diff --git a/docs/memory/component-registry.md b/docs/memory/component-registry.md index f799a58..e969129 100644 --- a/docs/memory/component-registry.md +++ b/docs/memory/component-registry.md @@ -86,8 +86,10 @@ duplicates) and MUST update it after completing one. | CrematoriumStep | done | WizardLayout (centered-form) + Card + Badge + ToggleButtonGroup + Typography + Button + Divider | Wizard step 8 — crematorium. Two variants: Service & Cremation (compact card + witness Yes/No toggle), Cremation Only (compact card + "Cremation Only" badge + "Included in Package" notice). Single pre-selected crematorium, no multi-select. | | CemeteryStep | done | WizardLayout (centered-form) + ToggleButtonGroup + Collapse + TextField (select) + Typography + Button + Divider | Wizard step 9 — cemetery. ToggleButtonGroups (Yes/No/Not sure) with progressive disclosure. Own plot → locate dropdown. No plot → preference? → select dropdown. No card grid. | | CoffinsStep | done | WizardLayout (grid-sidebar) + Card + Badge + Collapse + Slider + TextField + Pagination + Divider + Link | Wizard step 10 — coffin browsing. Grid-sidebar: filter sidebar (categories with expandable subcategories, dual-knob price slider with editable inputs, sort by) + 3-col card grid. CoffinCard with thumbnail hover preview. Equal-height cards, subtle bg for white-bg product photos. Card click → CoffinDetailsStep (no Continue). 20/page max. Conditional allowance info bubble. | -| CoffinDetailsStep | done | WizardLayout (centered-form) + Paper + RadioGroup + Divider + Button | Wizard step 11 — coffin customisation. Profile (image + specs) + 3 option sections (handles, lining, nameplate). Branded selected state. | -| AdditionalServicesStep | done | WizardLayout (centered-form) + Paper + AddOnOption + RadioGroup + Collapse + Divider + Button | Wizard step 12 — additional services. Section 1: complimentary. Section 2: paid extras. Multi-level progressive disclosure. | +| CoffinDetailsStep | done | WizardLayout (detail-toggles) + ImageGallery + Divider + Button | Wizard step 11 — coffin detail. Two-panel: gallery + product details dl (left), name + description + colour swatches + allowance-aware price + CTA (right). Allowance logic: fully covered / partially covered / no allowance. Colour selection does not affect price. | +| ~~AdditionalServicesStep~~ | removed | — | Replaced by IncludedServicesStep + ExtrasStep. Split for clearer distinction between free inclusions and paid extras. | +| IncludedServicesStep | done | WizardLayout (centered-form) + AddOnOption + RadioGroup + Collapse + Divider + Button | Wizard step 12a — included services. Package inclusions at no additional cost: dressing, viewing (with same-venue sub-option), prayers/vigil, funeral announcement. Sub-options render inside parent card. | +| ExtrasStep | done | WizardLayout (centered-form) + AddOnOption + Card + Switch + RadioGroup + Collapse + Divider + Button | Wizard step 12b — optional extras. Lead-gen interest capture: catering, music (inline live musician toggle + musician type), coffin bearing (toggle + bearer type), newspaper notice. POA via `priceLabel`. Tally of priced selections. No nested cards. | | SummaryStep | done | WizardLayout (centered-form) + Accordion + Paper + IconButton + Divider + Button | Wizard step 13 — plan review. Accordion sections with edit buttons. dl/dt/dd definition lists. Total bar. Share button. | | PaymentStep | done | WizardLayout (centered-form) + ToggleButtonGroup + Paper + Collapse + Checkbox + Divider + Button | Wizard step 14 — payment. Plan (full/deposit) + method (card/bank). PayWay iframe slot. Bank transfer details. Terms checkbox. | | ConfirmationStep | done | WizardLayout (centered-form) + Button | Wizard step 15 — confirmation. Terminal page. At-need: "submitted" + callback. Pre-planning: "saved" + return-anytime. Muted success icon. | diff --git a/docs/memory/session-log.md b/docs/memory/session-log.md index a0b87ac..6946f42 100644 --- a/docs/memory/session-log.md +++ b/docs/memory/session-log.md @@ -26,6 +26,73 @@ Each entry follows this structure: ## Sessions +### Session 2026-03-31b — CoffinDetailsStep rewrite + AdditionalServicesStep split + +**Agent(s):** Claude Opus 4.6 (1M context) + +**Work completed:** +- **CoffinDetailsStep rewrite** — two-panel detail-toggles layout with gallery + specs (left), name + description + colour swatches + allowance-aware pricing + CTA (right). Colour selection doesn't affect price. Allowance logic: fully covered / partially covered / no allowance. +- **AdditionalServicesStep split into two pages:** + - **IncludedServicesStep (new)** — services included in the package at no cost. Dressing, viewing (with same-venue sub-option inside card), prayers/vigil, funeral announcement. + - **ExtrasStep (new)** — optional paid extras for lead generation. Catering, music (flat inline live musician toggle + musician type), coffin bearing (toggle + bearer preference radio), newspaper notice. POA support via `priceLabel`. Tally of priced selections. +- **AddOnOption molecule enhanced:** + - `children` prop — sub-options render inside the card boundary (below divider) when checked, eliminating nested card "Russian doll" pattern + - `priceLabel` prop — custom text like "Price on application" in brand copper italic +- **AdditionalServicesStep removed** — replaced by the two new pages +- All quality checks passing (TypeScript, ESLint, Prettier) +- Playwright visual verification of all key scenarios + +**Decisions made:** +- Split AdditionalServicesStep into two pages for clearer UX distinction between free inclusions and paid extras +- Sub-options render inside parent card (flat hierarchy) instead of nested cards +- Coffin bearing changed from always-visible radio to toggle + sub-options (consistent with other items) +- `bearing` field split into `bearing: boolean` + `bearerType` for toggle pattern +- Extras page is lead-gen: signals interest, not firm commitment. Director follows up. +- POA items show "Price on application" in brand copper italic +- Copy refined through brand lens — no transactional language ("toggle on"), warm professional tone + +**Open questions:** +- None + +**Next steps:** +- Continue page feedback: SummaryStep, PaymentStep, ConfirmationStep +- Retroactive review Phase 3 (organisms) still pending +- Batch a11y fix (aria-describedby + aria-invalid) deferred + +--- + +### Session 2026-03-31b — CoffinDetailsStep rewrite: product detail layout + +**Agent(s):** Claude Opus 4.6 (1M context) + +**Work completed:** +- **CoffinDetailsStep complete rewrite** — transformed to match VenueDetailStep two-panel pattern: + - **Left panel:** ImageGallery (hero + thumbnails), product details as semantic `dl` list (bold label above value) + - **Right panel (sticky):** coffin name (h1), description, colour swatch picker, price with allowance-aware display, CTA, save-and-exit + - **Colour picker:** circular swatches (36px), `aria-pressed`, controlled via `selectedColourId`/`onColourChange`, does not affect price + - **Allowance pricing logic:** fully covered (allowance >= price) → "Included in your package allowance — no change to your plan total." / partially covered → shows "$X package allowance applied" + "+$Y to your plan total" in brand colour / no allowance → price only with extra spacing to CTA + - **Removed:** info bubble (redundant with allowance impact text), `priceNote` prop, `termsText` prop, old horizontal specs grid, `CoffinAllowance` type + - **Added:** `CoffinColour` type, `allowanceAmount` prop, `onAddCoffin` callback (replaces `onContinue`) + - **A11y:** fixed heading hierarchy (price as `

` not `

`, Product details as `

`) — 0 violations +- **Stories:** FullyCovered, PartiallyCovered, NoAllowance, NoColours, Minimal, PrePlanning, Loading +- **Playwright visual verification** of all key scenarios +- All quality checks passing (TypeScript, ESLint, Prettier) + +**Decisions made:** +- Allowance impact is computed from `allowanceAmount` vs `coffin.price` — no remaining balance tracking (out of scope) +- Info bubble removed from detail page (redundant) — kept on CoffinsStep browsing page +- Product details as single-column stacked `dl` (label above value) — more readable than grid + +**Open questions:** +- None + +**Next steps:** +- Continue page feedback: AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep +- Retroactive review Phase 3 (organisms) still pending +- Batch a11y fix (aria-describedby + aria-invalid) deferred + +--- + ### Session 2026-03-31a — CoffinsStep rewrite: grid-sidebar ecommerce layout **Agent(s):** Claude Opus 4.6 (1M context) diff --git a/src/components/molecules/AddOnOption/AddOnOption.tsx b/src/components/molecules/AddOnOption/AddOnOption.tsx index 5020f37..5f55230 100644 --- a/src/components/molecules/AddOnOption/AddOnOption.tsx +++ b/src/components/molecules/AddOnOption/AddOnOption.tsx @@ -2,6 +2,8 @@ import React from 'react'; import Box from '@mui/material/Box'; import type { SxProps, Theme } from '@mui/material/styles'; import { Card } from '../../atoms/Card'; +import { Collapse } from '../../atoms/Collapse'; +import { Divider } from '../../atoms/Divider'; import { Typography } from '../../atoms/Typography'; import { Switch } from '../../atoms/Switch'; import { Link } from '../../atoms/Link'; @@ -16,6 +18,8 @@ export interface AddOnOptionProps { description?: string; /** Price in dollars — shown below the heading */ price?: number; + /** Custom price label (e.g. "Price on application") — overrides formatted price */ + priceLabel?: string; /** Whether this add-on is currently enabled */ checked?: boolean; /** Called when the toggle changes */ @@ -24,6 +28,8 @@ export interface AddOnOptionProps { disabled?: boolean; /** Max visible lines for description before "View more" toggle. Omit for no limit. */ maxDescriptionLines?: number; + /** Sub-options rendered inside the card when checked. Appears below a divider. */ + children?: React.ReactNode; /** MUI sx prop for style overrides */ sx?: SxProps; } @@ -59,10 +65,12 @@ export const AddOnOption = React.forwardRef( name, description, price, + priceLabel, checked = false, onChange, disabled = false, maxDescriptionLines, + children, sx, }, ref, @@ -141,10 +149,16 @@ export const AddOnOption = React.forwardRef( {/* Price — tucks directly under heading */} - {price != null && ( - - ${price.toLocaleString('en-AU')} + {priceLabel ? ( + + {priceLabel} + ) : ( + price != null && ( + + ${price.toLocaleString('en-AU')} + + ) )} {/* Description with optional line clamping */} @@ -182,6 +196,14 @@ export const AddOnOption = React.forwardRef( )} )} + + {/* Sub-options — rendered inside the card when checked */} + {children && ( + + + e.stopPropagation()}>{children} + + )} ); }, diff --git a/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx b/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx deleted file mode 100644 index d85563e..0000000 --- a/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx +++ /dev/null @@ -1,353 +0,0 @@ -import React from 'react'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import Radio from '@mui/material/Radio'; -import type { SxProps, Theme } from '@mui/material/styles'; -import { WizardLayout } from '../../templates/WizardLayout'; -import { AddOnOption } from '../../molecules/AddOnOption'; -import { Collapse } from '../../atoms/Collapse'; -import { Typography } from '../../atoms/Typography'; -import { Button } from '../../atoms/Button'; -import { Divider } from '../../atoms/Divider'; - -// ─── Types ─────────────────────────────────────────────────────────────────── - -/** Form values for the additional services step */ -export interface AdditionalServicesStepValues { - // Section 1: Complimentary inclusions - dressing: boolean; - viewing: boolean; - viewingSameVenue: 'yes' | 'no' | null; - prayers: boolean; - funeralAnnouncement: boolean; - - // Section 2: Paid extras - catering: boolean; - music: boolean; - liveMusician: boolean; - musicianType: 'vocalist' | 'cellist' | 'other' | null; - bearing: 'family' | 'funeralHouse' | 'both' | null; - newspaperNotice: boolean; -} - -/** Props for the AdditionalServicesStep page component */ -export interface AdditionalServicesStepProps { - /** Current form values */ - values: AdditionalServicesStepValues; - /** Callback when any field value changes */ - onChange: (values: AdditionalServicesStepValues) => void; - /** Callback when the Continue button is clicked */ - onContinue: () => void; - /** Callback for back navigation */ - onBack?: () => void; - /** Callback for save-and-exit */ - onSaveAndExit?: () => void; - /** Whether the Continue button is in a loading state */ - loading?: boolean; - /** Price for catering (undefined = POA) */ - cateringPrice?: number; - /** Price for newspaper notice (undefined = POA) */ - newspaperPrice?: number; - /** Price for live musician (undefined = POA) */ - musicianPrice?: number; - /** Whether this is a pre-planning flow */ - isPrePlanning?: boolean; - /** Navigation bar */ - navigation?: React.ReactNode; - /** Progress stepper */ - progressStepper?: React.ReactNode; - /** Running total */ - runningTotal?: React.ReactNode; - /** Hide the help bar */ - hideHelpBar?: boolean; - /** MUI sx prop */ - sx?: SxProps; -} - -// ─── Component ─────────────────────────────────────────────────────────────── - -/** - * Step 12 — Additional Services for the FA arrangement wizard. - * - * Merged from baseline steps 14 (optionals) and 15 (extras) per Rec #2. - * Two sections preserving the semantic distinction: - * 1. Complimentary inclusions (toggle on/off at no cost) - * 2. Paid extras (toggle with pricing or POA) - * - * Progressive disclosure: sub-options revealed when parent toggle is on. - * Toggle design is inherently low-pressure — no upsell language. - * - * Pure presentation component — props in, callbacks out. - * - * Spec: documentation/steps/steps/12_additional_services.yaml - */ -export const AdditionalServicesStep: React.FC = ({ - values, - onChange, - onContinue, - onBack, - onSaveAndExit, - loading = false, - cateringPrice, - newspaperPrice, - musicianPrice, - isPrePlanning = false, - navigation, - progressStepper, - runningTotal, - hideHelpBar, - sx, -}) => { - const handleToggle = (field: keyof AdditionalServicesStepValues, checked: boolean) => { - const next = { ...values, [field]: checked }; - // Reset dependent fields when parent toggled off - if (field === 'viewing' && !checked) { - next.viewingSameVenue = null; - } - if (field === 'music' && !checked) { - next.liveMusician = false; - next.musicianType = null; - } - if (field === 'liveMusician' && !checked) { - next.musicianType = null; - } - onChange(next); - }; - - const handleFieldChange = ( - field: K, - value: AdditionalServicesStepValues[K], - ) => { - onChange({ ...values, [field]: value }); - }; - - return ( - - {/* Page heading */} - - Additional services - - - - {isPrePlanning - ? "These options can be finalised later. Toggle on the ones you're interested in." - : 'Choose which services to include in your plan.'} - - - { - e.preventDefault(); - if (!loading) onContinue(); - }} - > - {/* ─── Section 1: Complimentary inclusions ─── */} - - - Complimentary inclusions - - - These items are included at no additional cost. You can choose to include or remove - them. - - - - handleToggle('dressing', c)} - /> - - handleToggle('viewing', c)} - /> - - - - - - Same venue as the service? - - - handleFieldChange( - 'viewingSameVenue', - e.target.value as AdditionalServicesStepValues['viewingSameVenue'], - ) - } - > - } label="Yes, same venue" /> - } label="No, different venue" /> - - - - - - handleToggle('prayers', c)} - /> - - handleToggle('funeralAnnouncement', c)} - /> - - - - {/* ─── Section 2: Paid extras ─── */} - - - Additional extras - - - These items are available but may incur additional costs. Prices shown where available. - - - - handleToggle('catering', c)} - /> - - handleToggle('music', c)} - /> - - - - handleToggle('liveMusician', c)} - /> - - - - - - Musician type - - - handleFieldChange( - 'musicianType', - e.target.value as AdditionalServicesStepValues['musicianType'], - ) - } - > - } label="Vocalist" /> - } label="Cellist" /> - } label="Other" /> - - - - - - - - {/* Coffin bearing */} - - - - Coffin bearing - - - handleFieldChange( - 'bearing', - e.target.value as AdditionalServicesStepValues['bearing'], - ) - } - > - } label="Family and friends" /> - } - label="Professional bearers" - /> - } - label="Both family and professional" - /> - - - - - - handleToggle('newspaperNotice', c)} - /> - - - - - - {/* CTAs */} - - {onSaveAndExit ? ( - - ) : ( - - )} - - - - - ); -}; - -AdditionalServicesStep.displayName = 'AdditionalServicesStep'; -export default AdditionalServicesStep; diff --git a/src/components/pages/AdditionalServicesStep/index.ts b/src/components/pages/AdditionalServicesStep/index.ts deleted file mode 100644 index 23af28d..0000000 --- a/src/components/pages/AdditionalServicesStep/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { AdditionalServicesStep, default } from './AdditionalServicesStep'; -export type { - AdditionalServicesStepProps, - AdditionalServicesStepValues, -} from './AdditionalServicesStep'; diff --git a/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.stories.tsx b/src/components/pages/ExtrasStep/ExtrasStep.stories.tsx similarity index 60% rename from src/components/pages/AdditionalServicesStep/AdditionalServicesStep.stories.tsx rename to src/components/pages/ExtrasStep/ExtrasStep.stories.tsx index 090a26c..3e7c9ca 100644 --- a/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.stories.tsx +++ b/src/components/pages/ExtrasStep/ExtrasStep.stories.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { AdditionalServicesStep } from './AdditionalServicesStep'; -import type { AdditionalServicesStepValues } from './AdditionalServicesStep'; +import { ExtrasStep } from './ExtrasStep'; +import type { ExtrasStepValues } from './ExtrasStep'; import { Navigation } from '../../organisms/Navigation'; import Box from '@mui/material/Box'; @@ -34,25 +34,21 @@ const nav = ( /> ); -const defaultValues: AdditionalServicesStepValues = { - dressing: false, - viewing: false, - viewingSameVenue: null, - prayers: false, - funeralAnnouncement: true, +const defaultValues: ExtrasStepValues = { catering: false, music: false, liveMusician: false, musicianType: null, - bearing: null, + bearing: false, + bearerType: null, newspaperNotice: false, }; // ─── Meta ──────────────────────────────────────────────────────────────────── -const meta: Meta = { - title: 'Pages/AdditionalServicesStep', - component: AdditionalServicesStep, +const meta: Meta = { + title: 'Pages/ExtrasStep', + component: ExtrasStep, tags: ['autodocs'], parameters: { layout: 'fullscreen', @@ -60,21 +56,41 @@ const meta: Meta = { }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -// ─── Interactive (default) ────────────────────────────────────────────────── +// ─── Default (no prices — lead gen mode) ──────────────────────────────────── -/** Full interactive flow with both sections */ +/** Default state — no fixed prices, interest capture only */ export const Default: Story = { render: () => { - const [values, setValues] = useState({ ...defaultValues }); + const [values, setValues] = useState({ ...defaultValues }); return ( - alert(JSON.stringify(values, null, 2))} onBack={() => alert('Back')} onSaveAndExit={() => alert('Save')} + navigation={nav} + /> + ); + }, +}; + +// ─── With prices ──────────────────────────────────────────────────────────── + +/** Some extras have known prices */ +export const WithPrices: Story = { + render: () => { + const [values, setValues] = useState({ ...defaultValues }); + return ( + alert(JSON.stringify(values, null, 2))} + onBack={() => alert('Back')} + onSaveAndExit={() => alert('Save')} + cateringPrice={850} newspaperPrice={250} musicianPrice={450} navigation={nav} @@ -83,26 +99,22 @@ export const Default: Story = { }, }; -// ─── Many options enabled ─────────────────────────────────────────────────── +// ─── All enabled ──────────────────────────────────────────────────────────── -/** Multiple services toggled on with sub-options visible */ -export const ManyOptionsEnabled: Story = { +/** All extras toggled on with sub-options visible */ +export const AllEnabled: Story = { render: () => { - const [values, setValues] = useState({ - dressing: true, - viewing: true, - viewingSameVenue: 'yes', - prayers: false, - funeralAnnouncement: true, + const [values, setValues] = useState({ catering: true, music: true, liveMusician: true, musicianType: 'vocalist', - bearing: 'both', + bearing: true, + bearerType: 'both', newspaperNotice: true, }); return ( - alert('Continue')} @@ -118,12 +130,12 @@ export const ManyOptionsEnabled: Story = { // ─── Pre-planning ─────────────────────────────────────────────────────────── -/** Pre-planning variant */ +/** Pre-planning variant with softer copy */ export const PrePlanning: Story = { render: () => { - const [values, setValues] = useState({ ...defaultValues }); + const [values, setValues] = useState({ ...defaultValues }); return ( - alert('Continue')} @@ -134,24 +146,3 @@ export const PrePlanning: Story = { ); }, }; - -// ─── Minimal (provider shows few options) ─────────────────────────────────── - -/** Announcement only — minimal provider offerings */ -export const Minimal: Story = { - render: () => { - const [values, setValues] = useState({ - ...defaultValues, - funeralAnnouncement: true, - }); - return ( - alert('Continue')} - onBack={() => alert('Back')} - navigation={nav} - /> - ); - }, -}; diff --git a/src/components/pages/ExtrasStep/ExtrasStep.tsx b/src/components/pages/ExtrasStep/ExtrasStep.tsx new file mode 100644 index 0000000..01d7a97 --- /dev/null +++ b/src/components/pages/ExtrasStep/ExtrasStep.tsx @@ -0,0 +1,343 @@ +import React from 'react'; +import Box from '@mui/material/Box'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import RadioGroup from '@mui/material/RadioGroup'; +import Radio from '@mui/material/Radio'; +import type { SxProps, Theme } from '@mui/material/styles'; +import { WizardLayout } from '../../templates/WizardLayout'; +import { AddOnOption } from '../../molecules/AddOnOption'; +import { Collapse } from '../../atoms/Collapse'; +import { Switch } from '../../atoms/Switch'; +import { Typography } from '../../atoms/Typography'; +import { Button } from '../../atoms/Button'; +import { Divider } from '../../atoms/Divider'; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +/** Form values for the extras step */ +export interface ExtrasStepValues { + catering: boolean; + music: boolean; + liveMusician: boolean; + musicianType: 'vocalist' | 'cellist' | 'other' | null; + bearing: boolean; + bearerType: 'family' | 'funeralHouse' | 'both' | null; + newspaperNotice: boolean; +} + +/** Props for the ExtrasStep page component */ +export interface ExtrasStepProps { + /** Current form values */ + values: ExtrasStepValues; + /** Callback when any field value changes */ + onChange: (values: ExtrasStepValues) => void; + /** Callback when the Continue button is clicked */ + onContinue: () => void; + /** Callback for back navigation */ + onBack?: () => void; + /** Callback for save-and-exit */ + onSaveAndExit?: () => void; + /** Whether the Continue button is in a loading state */ + loading?: boolean; + /** Price for catering (omit for POA) */ + cateringPrice?: number; + /** Price for newspaper notice (omit for POA) */ + newspaperPrice?: number; + /** Price for live musician (omit for POA) */ + musicianPrice?: number; + /** Whether this is a pre-planning flow */ + isPrePlanning?: boolean; + /** Navigation bar */ + navigation?: React.ReactNode; + /** Progress stepper */ + progressStepper?: React.ReactNode; + /** Running total */ + runningTotal?: React.ReactNode; + /** Hide the help bar */ + hideHelpBar?: boolean; + /** MUI sx prop */ + sx?: SxProps; +} + +// ─── Component ─────────────────────────────────────────────────────────────── + +/** + * Step 12b — Optional Extras for the FA arrangement wizard. + * + * Shows optional services that may have additional costs. Users select + * anything they're interested in — their funeral director will follow + * up with details and confirm pricing. + * + * This is a lead-generation step: selecting an extra signals interest, + * not a firm commitment. Items show prices where available, otherwise + * "Price on application". + * + * Sub-options (e.g. musician type, bearer type) render as flat form + * fields inside the parent card — no nested cards. + * + * Pure presentation component — props in, callbacks out. + * + * Spec: documentation/steps/steps/12_additional_services.yaml (Section 2) + */ +export const ExtrasStep: React.FC = ({ + values, + onChange, + onContinue, + onBack, + onSaveAndExit, + loading = false, + cateringPrice, + newspaperPrice, + musicianPrice, + isPrePlanning = false, + navigation, + progressStepper, + runningTotal, + hideHelpBar, + sx, +}) => { + const liveMusicianSwitchId = React.useId(); + + const handleToggle = (field: keyof ExtrasStepValues, checked: boolean) => { + const next = { ...values, [field]: checked }; + if (field === 'music' && !checked) { + next.liveMusician = false; + next.musicianType = null; + } + if (field === 'liveMusician' && !checked) { + next.musicianType = null; + } + if (field === 'bearing' && !checked) { + next.bearerType = null; + } + onChange(next); + }; + + const handleFieldChange = ( + field: K, + value: ExtrasStepValues[K], + ) => { + onChange({ ...values, [field]: value }); + }; + + // Compute tally of selected priced extras + const tallyItems: { name: string; price: number }[] = []; + if (values.catering && cateringPrice != null) + tallyItems.push({ name: 'Catering', price: cateringPrice }); + if (values.liveMusician && musicianPrice != null) + tallyItems.push({ name: 'Live musician', price: musicianPrice }); + if (values.newspaperNotice && newspaperPrice != null) + tallyItems.push({ name: 'Newspaper notice', price: newspaperPrice }); + const totalAdditional = tallyItems.reduce((sum, item) => sum + item.price, 0); + + return ( + + {/* Page heading */} + + Optional extras + + + + {isPrePlanning + ? "These services are available if you'd like to personalise the arrangement. Select any you're interested in — details can be discussed when you're ready." + : "You may wish to personalise the arrangement with any of these services. Where pricing isn't shown, your funeral director will be happy to discuss options and provide a quote."} + + + + + { + e.preventDefault(); + if (!loading) onContinue(); + }} + > + + handleToggle('catering', c)} + /> + + {/* Music — flat sub-options inside the card */} + handleToggle('music', c)} + > + {/* Inline toggle row for live musician */} + + + Live musician + + + {musicianPrice != null ? ( + + ${musicianPrice.toLocaleString('en-AU')} + + ) : ( + + POA + + )} + + handleToggle('liveMusician', v)} + onClick={(e) => e.stopPropagation()} + inputProps={{ 'aria-labelledby': liveMusicianSwitchId }} + sx={{ flexShrink: 0 }} + /> + + + {/* Musician type — revealed when live musician is on */} + + + + Musician type + + + handleFieldChange( + 'musicianType', + e.target.value as ExtrasStepValues['musicianType'], + ) + } + > + } label="Vocalist" /> + } label="Cellist" /> + } label="Other" /> + + + + + + {/* Coffin bearing — toggle with radio sub-options */} + handleToggle('bearing', c)} + > + + + Bearer preference + + + handleFieldChange('bearerType', e.target.value as ExtrasStepValues['bearerType']) + } + > + } label="Family and friends" /> + } + label="Professional bearers" + /> + } + label="Both family and professional" + /> + + + + + handleToggle('newspaperNotice', c)} + /> + + + {/* ─── Tally ─── */} + {tallyItems.length > 0 && ( + <> + + + Extras total + + ${totalAdditional.toLocaleString('en-AU')} + + + + )} + + + + {/* CTAs */} + + {onSaveAndExit ? ( + + ) : ( + + )} + + + + + ); +}; + +ExtrasStep.displayName = 'ExtrasStep'; +export default ExtrasStep; diff --git a/src/components/pages/ExtrasStep/index.ts b/src/components/pages/ExtrasStep/index.ts new file mode 100644 index 0000000..6fb93eb --- /dev/null +++ b/src/components/pages/ExtrasStep/index.ts @@ -0,0 +1,2 @@ +export { ExtrasStep, default } from './ExtrasStep'; +export type { ExtrasStepProps, ExtrasStepValues } from './ExtrasStep'; diff --git a/src/components/pages/IncludedServicesStep/IncludedServicesStep.stories.tsx b/src/components/pages/IncludedServicesStep/IncludedServicesStep.stories.tsx new file mode 100644 index 0000000..73ac6af --- /dev/null +++ b/src/components/pages/IncludedServicesStep/IncludedServicesStep.stories.tsx @@ -0,0 +1,119 @@ +import { useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { IncludedServicesStep } from './IncludedServicesStep'; +import type { IncludedServicesStepValues } from './IncludedServicesStep'; +import { Navigation } from '../../organisms/Navigation'; +import Box from '@mui/material/Box'; + +// ─── Helpers ───────────────────────────────────────────────────────────────── + +const FALogo = () => ( + + + + +); + +const nav = ( + } + items={[ + { label: 'FAQ', href: '/faq' }, + { label: 'Contact Us', href: '/contact' }, + ]} + /> +); + +const defaultValues: IncludedServicesStepValues = { + dressing: false, + viewing: false, + viewingSameVenue: null, + prayers: false, + funeralAnnouncement: true, +}; + +// ─── Meta ──────────────────────────────────────────────────────────────────── + +const meta: Meta = { + title: 'Pages/IncludedServicesStep', + component: IncludedServicesStep, + tags: ['autodocs'], + parameters: { + layout: 'fullscreen', + }, +}; + +export default meta; +type Story = StoryObj; + +// ─── Default ──────────────────────────────────────────────────────────────── + +/** Default state — funeral announcement on by default */ +export const Default: Story = { + render: () => { + const [values, setValues] = useState({ ...defaultValues }); + return ( + alert(JSON.stringify(values, null, 2))} + onBack={() => alert('Back')} + onSaveAndExit={() => alert('Save')} + navigation={nav} + /> + ); + }, +}; + +// ─── All enabled ──────────────────────────────────────────────────────────── + +/** All inclusions toggled on with viewing sub-option visible */ +export const AllEnabled: Story = { + render: () => { + const [values, setValues] = useState({ + dressing: true, + viewing: true, + viewingSameVenue: 'yes', + prayers: true, + funeralAnnouncement: true, + }); + return ( + alert('Continue')} + onBack={() => alert('Back')} + navigation={nav} + /> + ); + }, +}; + +// ─── Pre-planning ─────────────────────────────────────────────────────────── + +/** Pre-planning variant with softer copy */ +export const PrePlanning: Story = { + render: () => { + const [values, setValues] = useState({ ...defaultValues }); + return ( + alert('Continue')} + onBack={() => alert('Back')} + isPrePlanning + navigation={nav} + /> + ); + }, +}; diff --git a/src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx b/src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx new file mode 100644 index 0000000..3c690a2 --- /dev/null +++ b/src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx @@ -0,0 +1,210 @@ +import React from 'react'; +import Box from '@mui/material/Box'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import RadioGroup from '@mui/material/RadioGroup'; +import Radio from '@mui/material/Radio'; +import type { SxProps, Theme } from '@mui/material/styles'; +import { WizardLayout } from '../../templates/WizardLayout'; +import { AddOnOption } from '../../molecules/AddOnOption'; +import { Typography } from '../../atoms/Typography'; +import { Button } from '../../atoms/Button'; +import { Divider } from '../../atoms/Divider'; + +// ─── Types ─────────────────────────────────────────────────────────────────── + +/** Form values for the included services step */ +export interface IncludedServicesStepValues { + dressing: boolean; + viewing: boolean; + viewingSameVenue: 'yes' | 'no' | null; + prayers: boolean; + funeralAnnouncement: boolean; +} + +/** Props for the IncludedServicesStep page component */ +export interface IncludedServicesStepProps { + /** Current form values */ + values: IncludedServicesStepValues; + /** Callback when any field value changes */ + onChange: (values: IncludedServicesStepValues) => void; + /** Callback when the Continue button is clicked */ + onContinue: () => void; + /** Callback for back navigation */ + onBack?: () => void; + /** Callback for save-and-exit */ + onSaveAndExit?: () => void; + /** Whether the Continue button is in a loading state */ + loading?: boolean; + /** Whether this is a pre-planning flow */ + isPrePlanning?: boolean; + /** Navigation bar */ + navigation?: React.ReactNode; + /** Progress stepper */ + progressStepper?: React.ReactNode; + /** Running total */ + runningTotal?: React.ReactNode; + /** Hide the help bar */ + hideHelpBar?: boolean; + /** MUI sx prop */ + sx?: SxProps; +} + +// ─── Component ─────────────────────────────────────────────────────────────── + +/** + * Step 12a — Included Services for the FA arrangement wizard. + * + * Shows services that come with the selected package at no additional + * cost. Users confirm which inclusions they'd like — toggling off + * removes them, toggling on adds them back. + * + * Sub-options (e.g. viewing venue) render inside the parent card + * when toggled on, keeping the visual grouping clear. + * + * Pure presentation component — props in, callbacks out. + * + * Spec: documentation/steps/steps/12_additional_services.yaml (Section 1) + */ +export const IncludedServicesStep: React.FC = ({ + values, + onChange, + onContinue, + onBack, + onSaveAndExit, + loading = false, + isPrePlanning = false, + navigation, + progressStepper, + runningTotal, + hideHelpBar, + sx, +}) => { + const handleToggle = (field: keyof IncludedServicesStepValues, checked: boolean) => { + const next = { ...values, [field]: checked }; + if (field === 'viewing' && !checked) { + next.viewingSameVenue = null; + } + onChange(next); + }; + + const handleFieldChange = ( + field: K, + value: IncludedServicesStepValues[K], + ) => { + onChange({ ...values, [field]: value }); + }; + + return ( + + {/* Page heading */} + + Included services + + + + {isPrePlanning + ? "These services are included with your package. Let us know which you're considering — you can always adjust later." + : "The following services come with your selected package at no additional cost. Simply let us know which you'd like to include."} + + + + + { + e.preventDefault(); + if (!loading) onContinue(); + }} + > + + handleToggle('dressing', c)} + /> + + handleToggle('viewing', c)} + > + + + Same venue as the service? + + + handleFieldChange( + 'viewingSameVenue', + e.target.value as IncludedServicesStepValues['viewingSameVenue'], + ) + } + > + } label="Yes, same venue" /> + } label="No, different venue" /> + + + + + handleToggle('prayers', c)} + /> + + handleToggle('funeralAnnouncement', c)} + /> + + + + + {/* CTAs */} + + {onSaveAndExit ? ( + + ) : ( + + )} + + + + + ); +}; + +IncludedServicesStep.displayName = 'IncludedServicesStep'; +export default IncludedServicesStep; diff --git a/src/components/pages/IncludedServicesStep/index.ts b/src/components/pages/IncludedServicesStep/index.ts new file mode 100644 index 0000000..1a05f75 --- /dev/null +++ b/src/components/pages/IncludedServicesStep/index.ts @@ -0,0 +1,2 @@ +export { IncludedServicesStep, default } from './IncludedServicesStep'; +export type { IncludedServicesStepProps, IncludedServicesStepValues } from './IncludedServicesStep';