212 lines
8.7 KiB
JavaScript
212 lines
8.7 KiB
JavaScript
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 '<span class="badge badge-green">Done</span>';
|
||
return `<span class="badge badge-amber">${pendingLabel}</span>`;
|
||
}
|
||
|
||
function quickStartStepsMarkup() {
|
||
const s = onboardingStatus();
|
||
return `
|
||
<div class="help-step-list">
|
||
<div class="help-step-item">
|
||
<div>
|
||
<div class="help-step-title">1. Connect Adobe Sign</div>
|
||
<div class="help-step-desc">Use the Adobe Sign chip in the top bar so the app can load your source templates.</div>
|
||
</div>
|
||
${stepBadge(s.adobeConnected)}
|
||
</div>
|
||
<div class="help-step-item">
|
||
<div>
|
||
<div class="help-step-title">2. Connect DocuSign</div>
|
||
<div class="help-step-desc">Use the Docusign chip to sign in and authorize the app for this browser session.</div>
|
||
</div>
|
||
${stepBadge(s.docusignConnected, s.adobeConnected ? 'Next' : 'After Adobe')}
|
||
</div>
|
||
<div class="help-step-item">
|
||
<div>
|
||
<div class="help-step-title">3. Choose the right DocuSign account</div>
|
||
<div class="help-step-desc">If your login has multiple accounts, select the exact target account before migrating anything.</div>
|
||
</div>
|
||
${stepBadge(s.docusignAccountChosen, s.docusignConnected ? 'Next' : 'After Sign-In')}
|
||
</div>
|
||
<div class="help-step-item">
|
||
<div>
|
||
<div class="help-step-title">4. Review templates and blockers</div>
|
||
<div class="help-step-desc">Start on Templates, scan the readiness badges, and use dry-run or single-template migration first.</div>
|
||
</div>
|
||
${stepBadge(s.templatesLoaded, s.docusignAccountChosen && s.adobeConnected ? 'Next' : 'Pending')}
|
||
</div>
|
||
<div class="help-step-item">
|
||
<div>
|
||
<div class="help-step-title">5. Verify after migration</div>
|
||
<div class="help-step-desc">Use Verification to send a test envelope and History to confirm what succeeded or failed.</div>
|
||
</div>
|
||
<span class="badge badge-blue">Recommended</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
export function quickStartCardMarkup() {
|
||
return `
|
||
<div class="card help-card" id="quick-start-card">
|
||
<div class="card-header">
|
||
<div>
|
||
<div class="card-title">Quick Start</div>
|
||
<div class="page-subtitle">New here? This is the shortest safe path through the tool.</div>
|
||
</div>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
||
<button class="btn btn-secondary btn-sm" id="btn-open-help-guide">Open Full Help</button>
|
||
<button class="btn btn-ghost btn-sm" id="btn-hide-quick-start">Hide</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="callout info" style="margin-bottom:16px">
|
||
<span class="callout-icon">ℹ️</span>
|
||
This app helps you migrate templates from Adobe Sign into DocuSign, review blockers and warnings, and send verification envelopes after migration.
|
||
</div>
|
||
${quickStartStepsMarkup()}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
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 = `
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="page-title">Help & Quick Start</div>
|
||
<div class="page-subtitle">What this tool does, how to use it, and where to go next.</div>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn btn-primary btn-sm" id="btn-help-go-templates">Go to Templates</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="callout info">
|
||
<span class="callout-icon">🧭</span>
|
||
This app helps you migrate templates from Adobe Sign into DocuSign, review blockers and warnings, and send verification envelopes after migration.
|
||
</div>
|
||
|
||
<div class="two-col help-layout">
|
||
<div>
|
||
<div class="card help-card">
|
||
<div class="card-header">
|
||
<span class="card-title">Recommended First-Time Flow</span>
|
||
</div>
|
||
<div class="card-body">
|
||
${quickStartStepsMarkup()}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card help-card">
|
||
<div class="card-header">
|
||
<span class="card-title">What Each Screen Is For</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="help-mini-grid">
|
||
<div class="help-mini-card">
|
||
<div class="help-mini-title">Templates</div>
|
||
<div class="help-mini-text">Your main workspace. Review Adobe templates, readiness badges, blockers, and launch migrations.</div>
|
||
</div>
|
||
<div class="help-mini-card">
|
||
<div class="help-mini-title">Migration Results</div>
|
||
<div class="help-mini-text">See the most recent migration outcomes, including successes, partials, and failures.</div>
|
||
</div>
|
||
<div class="help-mini-card">
|
||
<div class="help-mini-title">Issues & Warnings</div>
|
||
<div class="help-mini-text">Focus on templates that need manual review before you migrate them confidently.</div>
|
||
</div>
|
||
<div class="help-mini-card">
|
||
<div class="help-mini-title">Verification</div>
|
||
<div class="help-mini-text">Send a test envelope after migration to validate the template works in DocuSign.</div>
|
||
</div>
|
||
<div class="help-mini-card">
|
||
<div class="help-mini-title">History & Audit</div>
|
||
<div class="help-mini-text">Review what was migrated, when it happened, and what account/session produced it.</div>
|
||
</div>
|
||
<div class="help-mini-card">
|
||
<div class="help-mini-title">Settings</div>
|
||
<div class="help-mini-text">Manage connections, default verification recipients, and reopen quick-start guidance.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="card help-card">
|
||
<div class="card-header">
|
||
<span class="card-title">Tips</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="help-tip-list">
|
||
<div class="help-tip-item"><strong>Pick the right DocuSign account.</strong> If you have many accounts, migrations go into the one you selected for this browser session.</div>
|
||
<div class="help-tip-item"><strong>Start with one template.</strong> Migrate a single clean template first before running a larger batch.</div>
|
||
<div class="help-tip-item"><strong>Use readiness badges.</strong> Blocked and Caveats are there to save you time before migration.</div>
|
||
<div class="help-tip-item"><strong>Verify afterward.</strong> A successful migration does not replace a real signing test.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card help-card">
|
||
<div class="card-header">
|
||
<span class="card-title">If Something Looks Wrong</span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="help-tip-list">
|
||
<div class="help-tip-item">If no templates appear, reconnect Adobe Sign and refresh the Templates page.</div>
|
||
<div class="help-tip-item">If DocuSign signs you into the wrong place, use <strong>Choose Account</strong> or <strong>Switch Account</strong>.</div>
|
||
<div class="help-tip-item">If the Templates page shows an error banner, fix that first before trying to migrate.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById('btn-help-go-templates')?.addEventListener('click', () => navigate('#/templates'));
|
||
}
|