feat(dashboard): replace checklist with next-step card + unified list
Phase 2 Task 41 — Dashboard redesign. Backend: - Extend GET /users/onboarding-status with email_verified and shop_setup_done. - tried_ai_assistant kept in payload for backward-compat during deploy. Frontend: - New NextStepCard: surfaces the highest-priority incomplete onboarding item with a primary CTA. Priority order: verify email > set up shop > run first FlowPilot session > connect PSA > invite teammate > pick a plan (gated on trial stage warning/urgent/expired). Returns null when all done OR onboarding_dismissed. - New SetupChecklist: unified single list (no SOLO/TEAM bifurcation), drops the stale tried_ai_assistant / Script Builder item, surfaces "Pick a plan" when trial stage is warning or later. - Mounted on QuickStartPage below the hero with a "Show all setup steps" toggle. The whole onboarding section auto-hides when there's nothing left to nudge on, so the dashboard goes back to clean once setup is done. - Removed the orphaned OnboardingChecklist component (was defined but never mounted). - New useOnboardingStatus hook so page + components share one fetch contract. Tests: - Backend: test_onboarding_status_includes_email_verified_and_shop_setup_done. - Frontend (Vitest): 13 new tests across NextStepCard, SetupChecklist, and QuickStartPage covering priority ordering, dismissal, the SOLO/TEAM removal, the toggle reveal, and the trial-stage gate on Pick a plan. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
136
frontend/src/components/dashboard/SetupChecklist.tsx
Normal file
136
frontend/src/components/dashboard/SetupChecklist.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Check, ChevronRight } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { OnboardingStatus } from '@/api/onboarding'
|
||||
import { useTrialBanner } from '@/hooks/useTrialBanner'
|
||||
import type { TrialBannerStage } from '@/hooks/useTrialBanner'
|
||||
import { useOnboardingStatus } from '@/hooks/useOnboardingStatus'
|
||||
|
||||
/**
|
||||
* Unified setup checklist — single list (no SOLO/TEAM bifurcation).
|
||||
*
|
||||
* Replaces the old `OnboardingChecklist` widget. Items match `NextStepCard`'s
|
||||
* priority order. The "Pick a plan" item is gated on the trial stage.
|
||||
*
|
||||
* Surfaced behind a "Show all setup steps" toggle on the dashboard so the
|
||||
* always-visible surface is just the single next-step card.
|
||||
*/
|
||||
|
||||
interface ChecklistItem {
|
||||
key: string
|
||||
label: string
|
||||
path: string
|
||||
done: boolean
|
||||
}
|
||||
|
||||
const PLAN_GATE_STAGES: ReadonlyArray<TrialBannerStage> = [
|
||||
'warning',
|
||||
'urgent',
|
||||
'expired',
|
||||
]
|
||||
|
||||
export function buildChecklistItems(
|
||||
status: OnboardingStatus,
|
||||
trialStage: TrialBannerStage | null,
|
||||
): ChecklistItem[] {
|
||||
const items: ChecklistItem[] = [
|
||||
{
|
||||
key: 'verify_email',
|
||||
label: 'Verify your email',
|
||||
path: '/verify-email',
|
||||
done: status.email_verified,
|
||||
},
|
||||
{
|
||||
key: 'shop_setup',
|
||||
label: 'Set up your shop',
|
||||
path: '/welcome/step-1',
|
||||
done: status.shop_setup_done,
|
||||
},
|
||||
{
|
||||
key: 'ran_session',
|
||||
label: 'Run your first FlowPilot session',
|
||||
path: '/',
|
||||
done: status.ran_session,
|
||||
},
|
||||
{
|
||||
key: 'connected_psa',
|
||||
label: 'Connect your PSA',
|
||||
path: '/account/integrations',
|
||||
done: status.connected_psa,
|
||||
},
|
||||
{
|
||||
key: 'invited_teammate',
|
||||
label: 'Invite a teammate',
|
||||
path: '/account',
|
||||
done: status.invited_teammate,
|
||||
},
|
||||
]
|
||||
|
||||
if (trialStage && PLAN_GATE_STAGES.includes(trialStage)) {
|
||||
items.push({
|
||||
key: 'pick_plan',
|
||||
label: 'Pick a plan',
|
||||
path: '/account/billing/select-plan',
|
||||
done: false,
|
||||
})
|
||||
}
|
||||
|
||||
return items
|
||||
}
|
||||
|
||||
export function SetupChecklist() {
|
||||
const status = useOnboardingStatus()
|
||||
const { stage } = useTrialBanner()
|
||||
|
||||
if (!status || status.dismissed) return null
|
||||
|
||||
const items = buildChecklistItems(status, stage)
|
||||
const completedCount = items.filter((i) => i.done).length
|
||||
const totalCount = items.length
|
||||
|
||||
return (
|
||||
<div className="card-interactive overflow-hidden" data-testid="setup-checklist">
|
||||
<div className="px-4 pt-3 pb-2">
|
||||
<p className="font-sans text-[0.625rem] uppercase tracking-[0.12em] font-semibold text-muted-foreground">
|
||||
Setup steps · {completedCount} of {totalCount}
|
||||
</p>
|
||||
</div>
|
||||
<ul className="px-2 pb-2 space-y-1">
|
||||
{items.map((item) => (
|
||||
<li key={item.key}>
|
||||
{item.done ? (
|
||||
<div
|
||||
className="w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-default"
|
||||
data-testid={`checklist-item-${item.key}`}
|
||||
data-done="true"
|
||||
>
|
||||
<span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-transparent bg-primary">
|
||||
<Check size={12} className="text-white" />
|
||||
</span>
|
||||
<span className="flex-1 text-muted-foreground line-through">
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<Link
|
||||
to={item.path}
|
||||
className={cn(
|
||||
'w-full flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors text-left',
|
||||
'hover:bg-[rgba(255,255,255,0.04)]',
|
||||
)}
|
||||
data-testid={`checklist-item-${item.key}`}
|
||||
data-done="false"
|
||||
>
|
||||
<span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-border" />
|
||||
<span className="flex-1 text-foreground">{item.label}</span>
|
||||
<ChevronRight size={14} className="text-muted-foreground shrink-0" />
|
||||
</Link>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SetupChecklist
|
||||
Reference in New Issue
Block a user