5ba08aee22
- Add OnboardingResumeCard component shown when onboarding was dismissed but not completed - Store onboarding step state in localStorage for session persistence - Update App.tsx to render resume card when onboarding is resumable - Add comprehensive tests for model-onboarding-state utility functions - Add tests for OnboardingResumeCard component and App integration - Use onResume callback pattern for consistency with modal API
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { Play, Sparkles } from "lucide-react";
|
|
import { getOnboardingResumeStep } from "./model-onboarding-state";
|
|
|
|
interface OnboardingResumeCardProps {
|
|
/** Called when the user clicks "Continue onboarding" */
|
|
onResume: () => void;
|
|
}
|
|
|
|
/**
|
|
* A banner/card that appears when a user has previously started onboarding
|
|
* but dismissed the modal without completing. It allows them to resume
|
|
* from where they left off.
|
|
*/
|
|
export function OnboardingResumeCard({ onResume }: OnboardingResumeCardProps) {
|
|
const resumeStep = getOnboardingResumeStep();
|
|
|
|
// Should not render if no resumable state exists
|
|
if (!resumeStep) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section
|
|
className="onboarding-resume-card"
|
|
role="region"
|
|
aria-label="Resume onboarding"
|
|
>
|
|
<div className="onboarding-resume-card__main">
|
|
<div className="onboarding-resume-card__icon" aria-hidden="true">
|
|
<Sparkles size={20} />
|
|
</div>
|
|
<div className="onboarding-resume-card__content">
|
|
<h2 className="onboarding-resume-card__title">Continue Setup</h2>
|
|
<p className="onboarding-resume-card__description">
|
|
You're on the <strong>{resumeStep.label}</strong> step. Continue where you left off to complete your dashboard setup.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="onboarding-resume-card__actions">
|
|
<button
|
|
className="onboarding-resume-card__resume-btn"
|
|
onClick={onResume}
|
|
>
|
|
<Play size={14} aria-hidden="true" />
|
|
<span>Continue onboarding</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|