diff --git a/web/static/css/base.css b/web/static/css/base.css index af38890..dadda55 100644 --- a/web/static/css/base.css +++ b/web/static/css/base.css @@ -269,11 +269,57 @@ tr:hover td { background: #FAFBFC; } flex-shrink: 0; } +/* ── Help / onboarding ── */ +.help-layout { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); } +.help-card { margin-bottom: 16px; } +.help-step-list, +.help-tip-list { + display: flex; + flex-direction: column; + gap: 12px; +} +.help-step-item, +.help-tip-item, +.help-mini-card { + border: 1px solid var(--border); + background: #FAFBFC; + border-radius: var(--radius-sm); + padding: 12px 14px; +} +.help-step-item { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 12px; +} +.help-step-title, +.help-mini-title { + font-size: var(--font-size-base); + font-weight: 700; + color: var(--text); + margin-bottom: 4px; +} +.help-step-desc, +.help-mini-text, +.help-tip-item { + font-size: var(--font-size-sm); + color: var(--text-muted); + line-height: 1.5; +} +.help-mini-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; +} + /* ── Responsive ── */ @media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } .two-col { grid-template-columns: 1fr; } + .help-layout { grid-template-columns: 1fr; } } @media (max-width: 600px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } + .help-mini-grid { grid-template-columns: 1fr; } + .help-step-item { flex-direction: column; align-items: flex-start; } } diff --git a/web/static/index.html b/web/static/index.html index 248a9c0..edfe378 100644 --- a/web/static/index.html +++ b/web/static/index.html @@ -99,6 +99,12 @@ Settings +
  • + + + Help + +
  • diff --git a/web/static/js/app.js b/web/static/js/app.js index b95832e..c0414c9 100644 --- a/web/static/js/app.js +++ b/web/static/js/app.js @@ -41,6 +41,11 @@ router.register('#/settings', async () => { renderSettings(); }); +router.register('#/help', async () => { + const { renderHelp } = await import('./help.js'); + renderHelp(); +}); + // ── Nav badge subscriptions ─────────────────────────────────────────────── subscribe('issueCount', count => { diff --git a/web/static/js/help.js b/web/static/js/help.js new file mode 100644 index 0000000..56e9ffb --- /dev/null +++ b/web/static/js/help.js @@ -0,0 +1,211 @@ +import { state } from './state.js'; +import { navigate } from './router.js'; + +const QUICK_START_KEY = 'migrator_quick_start_dismissed'; + +export function shouldShowQuickStart() { + try { + return localStorage.getItem(QUICK_START_KEY) !== '1'; + } catch { + return true; + } +} + +export function dismissQuickStart() { + try { + localStorage.setItem(QUICK_START_KEY, '1'); + } catch {} +} + +export function resetQuickStart() { + try { + localStorage.removeItem(QUICK_START_KEY); + } catch {} +} + +function onboardingStatus() { + return { + adobeConnected: !!state.auth.adobe, + docusignConnected: !!state.auth.docusign, + docusignAccountChosen: !!state.auth.docusign && !state.auth.docusignAccountSelectionRequired, + templatesLoaded: (state.templates || []).length > 0, + }; +} + +function stepBadge(done, pendingLabel = 'Next') { + if (done) return 'Done'; + return `${pendingLabel}`; +} + +function quickStartStepsMarkup() { + const s = onboardingStatus(); + return ` +
    +
    +
    +
    1. Connect Adobe Sign
    +
    Use the Adobe Sign chip in the top bar so the app can load your source templates.
    +
    + ${stepBadge(s.adobeConnected)} +
    +
    +
    +
    2. Connect DocuSign
    +
    Use the Docusign chip to sign in and authorize the app for this browser session.
    +
    + ${stepBadge(s.docusignConnected, s.adobeConnected ? 'Next' : 'After Adobe')} +
    +
    +
    +
    3. Choose the right DocuSign account
    +
    If your login has multiple accounts, select the exact target account before migrating anything.
    +
    + ${stepBadge(s.docusignAccountChosen, s.docusignConnected ? 'Next' : 'After Sign-In')} +
    +
    +
    +
    4. Review templates and blockers
    +
    Start on Templates, scan the readiness badges, and use dry-run or single-template migration first.
    +
    + ${stepBadge(s.templatesLoaded, s.docusignAccountChosen && s.adobeConnected ? 'Next' : 'Pending')} +
    +
    +
    +
    5. Verify after migration
    +
    Use Verification to send a test envelope and History to confirm what succeeded or failed.
    +
    + Recommended +
    +
    + `; +} + +export function quickStartCardMarkup() { + return ` +
    +
    +
    +
    Quick Start
    +
    New here? This is the shortest safe path through the tool.
    +
    +
    + + +
    +
    +
    +
    + ℹ️ + This tool compares Adobe Sign templates with DocuSign templates, helps you migrate them, and gives you a place to verify the results afterward. +
    + ${quickStartStepsMarkup()} +
    +
    + `; +} + +export function bindQuickStartCard(root = document) { + root.getElementById?.('btn-open-help-guide')?.addEventListener('click', () => navigate('#/help')); + root.getElementById?.('btn-hide-quick-start')?.addEventListener('click', () => { + dismissQuickStart(); + root.getElementById('quick-start-card')?.remove(); + }); +} + +export function renderHelp() { + const outlet = document.getElementById('router-outlet'); + outlet.innerHTML = ` + + +
    + 🧭 + This app helps you migrate templates from Adobe Sign into DocuSign, review blockers and warnings, and send verification envelopes after migration. +
    + +
    +
    +
    +
    + Recommended First-Time Flow +
    +
    + ${quickStartStepsMarkup()} +
    +
    + +
    +
    + What Each Screen Is For +
    +
    +
    +
    +
    Templates
    +
    Your main workspace. Review Adobe templates, readiness badges, blockers, and launch migrations.
    +
    +
    +
    Migration Results
    +
    See the most recent migration outcomes, including successes, partials, and failures.
    +
    +
    +
    Issues & Warnings
    +
    Focus on templates that need manual review before you migrate them confidently.
    +
    +
    +
    Verification
    +
    Send a test envelope after migration to validate the template works in DocuSign.
    +
    +
    +
    History & Audit
    +
    Review what was migrated, when it happened, and what account/session produced it.
    +
    +
    +
    Settings
    +
    Manage connections, default verification recipients, and reopen quick-start guidance.
    +
    +
    +
    +
    +
    + +
    +
    +
    + Tips +
    +
    +
    +
    Pick the right DocuSign account. If you have many accounts, migrations go into the one you selected for this browser session.
    +
    Start with one template. Migrate a single clean template first before running a larger batch.
    +
    Use readiness badges. Blocked and Caveats are there to save you time before migration.
    +
    Verify afterward. A successful migration does not replace a real signing test.
    +
    +
    +
    + +
    +
    + If Something Looks Wrong +
    +
    +
    +
    If no templates appear, reconnect Adobe Sign and refresh the Templates page.
    +
    If DocuSign signs you into the wrong place, use Choose Account or Switch Account.
    +
    If the Templates page shows an error banner, fix that first before trying to migrate.
    +
    +
    +
    +
    +
    + `; + + document.getElementById('btn-help-go-templates')?.addEventListener('click', () => navigate('#/templates')); +} diff --git a/web/static/js/settings.js b/web/static/js/settings.js index 6dc8582..59517e0 100644 --- a/web/static/js/settings.js +++ b/web/static/js/settings.js @@ -3,6 +3,8 @@ import { api } from './api.js'; import { escHtml } from './utils.js'; import { disconnectPlatform, showDocusignAccountPicker, switchAccount } from './auth.js'; +import { navigate } from './router.js'; +import { resetQuickStart } from './help.js'; const SETTINGS_KEY = 'migrator_settings'; @@ -110,6 +112,33 @@ export function renderSettings() { +
    +
    +
    Help & Onboarding
    +
    Make it easy to get oriented again or share the app with a first-time tester
    +
    +
    +
    +
    +
    Open Full Help
    +
    See the in-app guide with the recommended first-time flow and screen-by-screen overview.
    +
    +
    + +
    +
    +
    +
    +
    Show Quick Start Again
    +
    Re-enable the Templates quick-start card if you dismissed it earlier.
    +
    +
    + +
    +
    +
    +
    +
    @@ -142,6 +171,15 @@ export function renderSettings() { } }); + document.getElementById('btn-open-help')?.addEventListener('click', () => { + navigate('#/help'); + }); + + document.getElementById('btn-reset-quick-start')?.addEventListener('click', () => { + resetQuickStart(); + navigate('#/templates'); + }); + // Load connection info _loadConnInfo(); } diff --git a/web/static/js/templates.js b/web/static/js/templates.js index 61966c0..46bdd8a 100644 --- a/web/static/js/templates.js +++ b/web/static/js/templates.js @@ -4,6 +4,7 @@ import { api } from './api.js'; import { state, setState, updateDerivedState } from './state.js'; import { escHtml, formatDate, formatRelative, debounce, renderFieldIssues, bindFieldIssueToggles } from './utils.js'; import { navigate } from './router.js'; +import { bindQuickStartCard, quickStartCardMarkup, shouldShowQuickStart } from './help.js'; // ── Readiness badge ──────────────────────────────────────────────────────── @@ -96,6 +97,8 @@ function _render() {
    ` : ''} + ${shouldShowQuickStart() ? quickStartCardMarkup() : ''} +