Context
The coverage guidelines questionnaire wizard (coverageGuidelinesStore.ts) currently uses Zustand with persist middleware (localStorage) for both form state and cross-component shared state. This works but has several issues:
- No form validation — inputs accept any value with no error feedback
- Stale localStorage bugs — adding new fields causes
NaN for users with old persisted data (see ?? 0 guards throughout GuidelinesTab.tsx)
- Doesn't follow project conventions — CLAUDE.md specifies RHF for forms + Zod for validation
- Will be redundant — once backend persistence is implemented (#TBD), localStorage persistence should be removed entirely
Current Architecture
Wizard steps (5 components)
→ Zustand store actions (setLifeTpdAnswers, setCriticalIllnessAnswers, etc.)
→ persist middleware → localStorage
→ consumed by: CoverageJourney, JourneyTab, ConfiguredGuidelinesView, etc.
Target Architecture
Wizard steps (5 components)
→ React Hook Form useForm() per step
→ Zod schema validation per step
→ on step complete: React Query mutation → backend API
→ React Query cache = shared state for all consumers
Migration Steps
Phase 1: Add RHF + Zod to wizard steps (can do before backend)
Phase 2: Backend persistence (separate issue/PR)
Phase 3: Remove Zustand store
Files Involved
| File |
Change |
frontend/src/stores/coverageGuidelinesStore.ts |
Eventually remove |
frontend/src/components/insurance/tabs/GuidelinesTab.tsx |
Add RHF per wizard step |
frontend/src/hooks/queries/useCoverageGuidelinesQuery.ts |
New — React Query hooks |
frontend/src/types/insurance-schemas.ts |
New — Zod validation schemas |
Related
- Backend persistence spec:
spec/insurance-backend-persistence.md
- Similar pattern already used in:
OnboardingWizardModal (RHF + Zod)
Context
The coverage guidelines questionnaire wizard (
coverageGuidelinesStore.ts) currently uses Zustand withpersistmiddleware (localStorage) for both form state and cross-component shared state. This works but has several issues:NaNfor users with old persisted data (see?? 0guards throughoutGuidelinesTab.tsx)Current Architecture
Target Architecture
Migration Steps
Phase 1: Add RHF + Zod to wizard steps (can do before backend)
hospitalizationSchema,lifeTpdSchema, etc.)useForm()+ the relevant schemaPhase 2: Backend persistence (separate issue/PR)
spec/insurance-backend-persistence.md)useCoverageGuidelinesQuery,useCoverageGuidelinesMutationpersist→ React Query as source of truthPhase 3: Remove Zustand store
CoverageJourney,JourneyTab, etc.) read from React Query cache instead of ZustandcoverageGuidelinesStore.tsentirelycoverage-guidelines-storagefrom localStorageFiles Involved
frontend/src/stores/coverageGuidelinesStore.tsfrontend/src/components/insurance/tabs/GuidelinesTab.tsxfrontend/src/hooks/queries/useCoverageGuidelinesQuery.tsfrontend/src/types/insurance-schemas.tsRelated
spec/insurance-backend-persistence.mdOnboardingWizardModal(RHF + Zod)