richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split AdditionalServicesStep into IncludedServicesStep + ExtrasStep

Browse Source 
- IncludedServicesStep: package inclusions at no cost (dressing, viewing,
  prayers, funeral announcement). Sub-options render inside parent card.
- ExtrasStep: optional paid extras for lead generation (catering, music,
  coffin bearing, newspaper notice). POA support, tally of priced items.
- AddOnOption: children prop (sub-options inside card), priceLabel prop
  (custom text like "Price on application" in brand copper italic)
- Flattened sub-option pattern: inline toggle rows inside parent card
  instead of nested card-in-card ("Russian doll") pattern
- Coffin bearing now uses toggle + bearer type radio (consistent UX)
- Removed old AdditionalServicesStep (replaced by two new pages)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-31 12:10:26 +11:00
parent c7a8d9e906
commit 6cb3184130
11 changed files with 815 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/memory/component-registry.md
View File

@@ -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. |

67
docs/memory/session-log.md
View File

@@ -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 `<p>` not `<h5>`, Product details as `<h2>`) — 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)

24
src/components/molecules/AddOnOption/AddOnOption.tsx
View File

@@ -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<Theme>;
}
@@ -59,10 +65,12 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
name,
description,
price,
priceLabel,
checked = false,
onChange,
disabled = false,
maxDescriptionLines,
children,
sx,
},
ref,
@@ -141,10 +149,16 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
</Box>
{/* Price — tucks directly under heading */}
{price != null && (
{priceLabel ? (
<Typography variant="body2" color="primary" sx={{ fontStyle: 'italic' }}>
{priceLabel}
</Typography>
) : (
price != null && (
<Typography variant="body2" color="primary">
${price.toLocaleString('en-AU')}
</Typography>
)
)}
{/* Description with optional line clamping */}
@@ -182,6 +196,14 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
)}
</>
)}
{/* Sub-options — rendered inside the card when checked */}
{children && (
<Collapse in={checked}>
<Divider sx={{ my: 1.5 }} />
<Box onClick={(e) => e.stopPropagation()}>{children}</Box>
</Collapse>
)}
</Card>
);
},

353
src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx
View File

@@ -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<Theme>;
}
// ─── 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<AdditionalServicesStepProps> = ({
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 = <K extends keyof AdditionalServicesStepValues>(
field: K,
value: AdditionalServicesStepValues[K],
) => {
onChange({ ...values, [field]: value });
};
return (
<WizardLayout
variant="centered-form"
navigation={navigation}
progressStepper={progressStepper}
runningTotal={runningTotal}
showBackLink={!!onBack}
backLabel="Back"
onBack={onBack}
hideHelpBar={hideHelpBar}
sx={sx}
>
{/* Page heading */}
<Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
Additional services
</Typography>
<Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}>
{isPrePlanning
? "These options can be finalised later. Toggle on the ones you're interested in."
: 'Choose which services to include in your plan.'}
</Typography>
<Box
component="form"
noValidate
aria-busy={loading}
onSubmit={(e: React.FormEvent) => {
e.preventDefault();
if (!loading) onContinue();
}}
>
{/* ─── Section 1: Complimentary inclusions ─── */}
<Paper variant="outlined" sx={{ p: 3, mb: 4 }}>
<Typography variant="h5" sx={{ mb: 0.5 }}>
Complimentary inclusions
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
These items are included at no additional cost. You can choose to include or remove
them.
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<AddOnOption
name="Dressing and preparation"
description="Professional dressing and preparation"
checked={values.dressing}
onChange={(c) => handleToggle('dressing', c)}
/>
<AddOnOption
name="Viewing"
description="Arrange a viewing for family and friends"
checked={values.viewing}
onChange={(c) => handleToggle('viewing', c)}
/>
<Collapse in={values.viewing}>
<Box sx={{ pl: 4, pt: 1 }}>
<FormControl component="fieldset" sx={{ display: 'block' }}>
<FormLabel component="legend" sx={{ mb: 1 }}>
Same venue as the service?
</FormLabel>
<RadioGroup
value={values.viewingSameVenue ?? ''}
onChange={(e) =>
handleFieldChange(
'viewingSameVenue',
e.target.value as AdditionalServicesStepValues['viewingSameVenue'],
)
}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes, same venue" />
<FormControlLabel value="no" control={<Radio />} label="No, different venue" />
</RadioGroup>
</FormControl>
</Box>
</Collapse>
<AddOnOption
name="Prayers or vigil"
description="Arrange prayers or vigil before the service"
checked={values.prayers}
onChange={(c) => handleToggle('prayers', c)}
/>
<AddOnOption
name="Funeral announcement"
description="Complimentary funeral notice"
checked={values.funeralAnnouncement}
onChange={(c) => handleToggle('funeralAnnouncement', c)}
/>
</Box>
</Paper>
{/* ─── Section 2: Paid extras ─── */}
<Paper variant="outlined" sx={{ p: 3, mb: 4 }}>
<Typography variant="h5" sx={{ mb: 0.5 }}>
Additional extras
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
These items are available but may incur additional costs. Prices shown where available.
</Typography>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
<AddOnOption
name="Catering"
description="Catering for after the service"
price={cateringPrice}
checked={values.catering}
onChange={(c) => handleToggle('catering', c)}
/>
<AddOnOption
name="Music"
description="Music arrangements for the service"
checked={values.music}
onChange={(c) => handleToggle('music', c)}
/>
<Collapse in={values.music}>
<Box sx={{ pl: 4, pt: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
<AddOnOption
name="Live musician"
description="A live musician to perform during the service"
price={musicianPrice}
checked={values.liveMusician}
onChange={(c) => handleToggle('liveMusician', c)}
/>
<Collapse in={values.liveMusician}>
<Box sx={{ pl: 4, pt: 1 }}>
<FormControl component="fieldset" sx={{ display: 'block' }}>
<FormLabel component="legend" sx={{ mb: 1 }}>
Musician type
</FormLabel>
<RadioGroup
value={values.musicianType ?? ''}
onChange={(e) =>
handleFieldChange(
'musicianType',
e.target.value as AdditionalServicesStepValues['musicianType'],
)
}
>
<FormControlLabel value="vocalist" control={<Radio />} label="Vocalist" />
<FormControlLabel value="cellist" control={<Radio />} label="Cellist" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>
</FormControl>
</Box>
</Collapse>
</Box>
</Collapse>
{/* Coffin bearing */}
<Divider />
<FormControl component="fieldset" sx={{ display: 'block' }}>
<FormLabel component="legend" sx={{ mb: 1 }}>
Coffin bearing
</FormLabel>
<RadioGroup
value={values.bearing ?? ''}
onChange={(e) =>
handleFieldChange(
'bearing',
e.target.value as AdditionalServicesStepValues['bearing'],
)
}
>
<FormControlLabel value="family" control={<Radio />} label="Family and friends" />
<FormControlLabel
value="funeralHouse"
control={<Radio />}
label="Professional bearers"
/>
<FormControlLabel
value="both"
control={<Radio />}
label="Both family and professional"
/>
</RadioGroup>
</FormControl>
<Divider />
<AddOnOption
name="Newspaper notice"
description="Paid newspaper death notice"
price={newspaperPrice}
checked={values.newspaperNotice}
onChange={(c) => handleToggle('newspaperNotice', c)}
/>
</Box>
</Paper>
<Divider sx={{ my: 3 }} />
{/* CTAs */}
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: { xs: 'column-reverse', sm: 'row' },
gap: 2,
}}
>
{onSaveAndExit ? (
<Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
Save and continue later
</Button>
) : (
<Box />
)}
<Button type="submit" variant="contained" size="large" loading={loading}>
Continue
</Button>
</Box>
</Box>
</WizardLayout>
);
};
AdditionalServicesStep.displayName = 'AdditionalServicesStep';
export default AdditionalServicesStep;

5
src/components/pages/AdditionalServicesStep/index.ts
View File

@@ -1,5 +0,0 @@
export { AdditionalServicesStep, default } from './AdditionalServicesStep';
export type {
AdditionalServicesStepProps,
AdditionalServicesStepValues,
} from './AdditionalServicesStep';

95
src/components/pages/AdditionalServicesStep/AdditionalServicesStep.stories.tsx → src/components/pages/ExtrasStep/ExtrasStep.stories.tsx
View File

@@ -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<typeof AdditionalServicesStep> = {
title: 'Pages/AdditionalServicesStep',
component: AdditionalServicesStep,
const meta: Meta<typeof ExtrasStep> = {
title: 'Pages/ExtrasStep',
component: ExtrasStep,
tags: ['autodocs'],
parameters: {
layout: 'fullscreen',
@@ -60,21 +56,41 @@ const meta: Meta<typeof AdditionalServicesStep> = {
};
export default meta;
type Story = StoryObj<typeof AdditionalServicesStep>;
type Story = StoryObj<typeof ExtrasStep>;
// ─── 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<AdditionalServicesStepValues>({ ...defaultValues });
const [values, setValues] = useState<ExtrasStepValues>({ ...defaultValues });
return (
<AdditionalServicesStep
<ExtrasStep
values={values}
onChange={setValues}
onContinue={() => 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<ExtrasStepValues>({ ...defaultValues });
return (
<ExtrasStep
values={values}
onChange={setValues}
onContinue={() => 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<AdditionalServicesStepValues>({
dressing: true,
viewing: true,
viewingSameVenue: 'yes',
prayers: false,
funeralAnnouncement: true,
const [values, setValues] = useState<ExtrasStepValues>({
catering: true,
music: true,
liveMusician: true,
musicianType: 'vocalist',
bearing: 'both',
bearing: true,
bearerType: 'both',
newspaperNotice: true,
});
return (
<AdditionalServicesStep
<ExtrasStep
values={values}
onChange={setValues}
onContinue={() => 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<AdditionalServicesStepValues>({ ...defaultValues });
const [values, setValues] = useState<ExtrasStepValues>({ ...defaultValues });
return (
<AdditionalServicesStep
<ExtrasStep
values={values}
onChange={setValues}
onContinue={() => 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<AdditionalServicesStepValues>({
...defaultValues,
funeralAnnouncement: true,
});
return (
<AdditionalServicesStep
values={values}
onChange={setValues}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')}
navigation={nav}
/>
);
},
};

343
src/components/pages/ExtrasStep/ExtrasStep.tsx Normal file
View File

@@ -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<Theme>;
}
// ─── 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<ExtrasStepProps> = ({
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 = <K extends keyof ExtrasStepValues>(
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 (
<WizardLayout
variant="centered-form"
navigation={navigation}
progressStepper={progressStepper}
runningTotal={runningTotal}
showBackLink={!!onBack}
backLabel="Back"
onBack={onBack}
hideHelpBar={hideHelpBar}
sx={sx}
>
{/* Page heading */}
<Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
Optional extras
</Typography>
<Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
{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."}
</Typography>
<Divider sx={{ mb: 4 }} />
<Box
component="form"
noValidate
aria-busy={loading}
onSubmit={(e: React.FormEvent) => {
e.preventDefault();
if (!loading) onContinue();
}}
>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 4 }}>
<AddOnOption
name="Catering"
description="Catering for after the service. Your director can arrange options to suit your needs and budget."
price={cateringPrice}
priceLabel={cateringPrice == null ? 'Price on application' : undefined}
checked={values.catering}
onChange={(c) => handleToggle('catering', c)}
/>
{/* Music — flat sub-options inside the card */}
<AddOnOption
name="Music"
description="Music arrangements for the service, including song selection and audio setup."
checked={values.music}
onChange={(c) => handleToggle('music', c)}
>
{/* Inline toggle row for live musician */}
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
gap: 2,
mb: 0.5,
}}
>
<Typography
variant="label"
component="span"
id={liveMusicianSwitchId}
sx={{ flex: 1, minWidth: 0 }}
>
Live musician
</Typography>
{musicianPrice != null ? (
<Typography variant="body2" color="primary" sx={{ flexShrink: 0 }}>
${musicianPrice.toLocaleString('en-AU')}
</Typography>
) : (
<Typography
variant="body2"
color="primary"
sx={{ flexShrink: 0, fontStyle: 'italic' }}
>
POA
</Typography>
)}
<Switch
checked={values.liveMusician}
onChange={(_e, v) => handleToggle('liveMusician', v)}
onClick={(e) => e.stopPropagation()}
inputProps={{ 'aria-labelledby': liveMusicianSwitchId }}
sx={{ flexShrink: 0 }}
/>
</Box>
{/* Musician type — revealed when live musician is on */}
<Collapse in={values.liveMusician}>
<FormControl component="fieldset" sx={{ display: 'block', mt: 1 }}>
<FormLabel component="legend" sx={{ mb: 1 }}>
Musician type
</FormLabel>
<RadioGroup
value={values.musicianType ?? ''}
onChange={(e) =>
handleFieldChange(
'musicianType',
e.target.value as ExtrasStepValues['musicianType'],
)
}
>
<FormControlLabel value="vocalist" control={<Radio />} label="Vocalist" />
<FormControlLabel value="cellist" control={<Radio />} label="Cellist" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>
</FormControl>
</Collapse>
</AddOnOption>
{/* Coffin bearing — toggle with radio sub-options */}
<AddOnOption
name="Coffin bearing"
description="Choose who will carry the coffin during the service. Professional bearers can be arranged through your funeral director."
checked={values.bearing}
onChange={(c) => handleToggle('bearing', c)}
>
<FormControl component="fieldset" sx={{ display: 'block' }}>
<FormLabel component="legend" sx={{ mb: 1 }}>
Bearer preference
</FormLabel>
<RadioGroup
value={values.bearerType ?? ''}
onChange={(e) =>
handleFieldChange('bearerType', e.target.value as ExtrasStepValues['bearerType'])
}
>
<FormControlLabel value="family" control={<Radio />} label="Family and friends" />
<FormControlLabel
value="funeralHouse"
control={<Radio />}
label="Professional bearers"
/>
<FormControlLabel
value="both"
control={<Radio />}
label="Both family and professional"
/>
</RadioGroup>
</FormControl>
</AddOnOption>
<AddOnOption
name="Newspaper notice"
description="A paid newspaper death notice. Your director will help with wording and placement."
price={newspaperPrice}
priceLabel={newspaperPrice == null ? 'Price on application' : undefined}
checked={values.newspaperNotice}
onChange={(c) => handleToggle('newspaperNotice', c)}
/>
</Box>
{/* ─── Tally ─── */}
{tallyItems.length > 0 && (
<>
<Divider sx={{ my: 3 }} />
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
aria-live="polite"
aria-atomic="true"
>
<Typography variant="h6">Extras total</Typography>
<Typography variant="h6" color="primary">
${totalAdditional.toLocaleString('en-AU')}
</Typography>
</Box>
</>
)}
<Divider sx={{ my: 3 }} />
{/* CTAs */}
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: { xs: 'column-reverse', sm: 'row' },
gap: 2,
}}
>
{onSaveAndExit ? (
<Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
Save and continue later
</Button>
) : (
<Box />
)}
<Button type="submit" variant="contained" size="large" loading={loading}>
Continue
</Button>
</Box>
</Box>
</WizardLayout>
);
};
ExtrasStep.displayName = 'ExtrasStep';
export default ExtrasStep;

2
src/components/pages/ExtrasStep/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { ExtrasStep, default } from './ExtrasStep';
export type { ExtrasStepProps, ExtrasStepValues } from './ExtrasStep';

119
src/components/pages/IncludedServicesStep/IncludedServicesStep.stories.tsx Normal file
View File

@@ -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 = () => (
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Box
component="img"
src="/brandlogo/logo-full.svg"
alt="Funeral Arranger"
sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
/>
<Box
component="img"
src="/brandlogo/logo-short.svg"
alt="Funeral Arranger"
sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
/>
</Box>
);
const nav = (
<Navigation
logo={<FALogo />}
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<typeof IncludedServicesStep> = {
title: 'Pages/IncludedServicesStep',
component: IncludedServicesStep,
tags: ['autodocs'],
parameters: {
layout: 'fullscreen',
},
};
export default meta;
type Story = StoryObj<typeof IncludedServicesStep>;
// ─── Default ────────────────────────────────────────────────────────────────
/** Default state — funeral announcement on by default */
export const Default: Story = {
render: () => {
const [values, setValues] = useState<IncludedServicesStepValues>({ ...defaultValues });
return (
<IncludedServicesStep
values={values}
onChange={setValues}
onContinue={() => 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<IncludedServicesStepValues>({
dressing: true,
viewing: true,
viewingSameVenue: 'yes',
prayers: true,
funeralAnnouncement: true,
});
return (
<IncludedServicesStep
values={values}
onChange={setValues}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')}
navigation={nav}
/>
);
},
};
// ─── Pre-planning ───────────────────────────────────────────────────────────
/** Pre-planning variant with softer copy */
export const PrePlanning: Story = {
render: () => {
const [values, setValues] = useState<IncludedServicesStepValues>({ ...defaultValues });
return (
<IncludedServicesStep
values={values}
onChange={setValues}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')}
isPrePlanning
navigation={nav}
/>
);
},
};

210
src/components/pages/IncludedServicesStep/IncludedServicesStep.tsx Normal file
View File

@@ -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<Theme>;
}
// ─── 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<IncludedServicesStepProps> = ({
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 = <K extends keyof IncludedServicesStepValues>(
field: K,
value: IncludedServicesStepValues[K],
) => {
onChange({ ...values, [field]: value });
};
return (
<WizardLayout
variant="centered-form"
navigation={navigation}
progressStepper={progressStepper}
runningTotal={runningTotal}
showBackLink={!!onBack}
backLabel="Back"
onBack={onBack}
hideHelpBar={hideHelpBar}
sx={sx}
>
{/* Page heading */}
<Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
Included services
</Typography>
<Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
{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."}
</Typography>
<Divider sx={{ mb: 4 }} />
<Box
component="form"
noValidate
aria-busy={loading}
onSubmit={(e: React.FormEvent) => {
e.preventDefault();
if (!loading) onContinue();
}}
>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 4 }}>
<AddOnOption
name="Dressing and preparation"
description="Professional dressing and preparation of your loved one before the service."
checked={values.dressing}
onChange={(c) => handleToggle('dressing', c)}
/>
<AddOnOption
name="Viewing"
description="Arrange a private viewing for family and close friends before the service."
checked={values.viewing}
onChange={(c) => handleToggle('viewing', c)}
>
<FormControl component="fieldset" sx={{ display: 'block' }}>
<FormLabel component="legend" sx={{ mb: 1 }}>
Same venue as the service?
</FormLabel>
<RadioGroup
value={values.viewingSameVenue ?? ''}
onChange={(e) =>
handleFieldChange(
'viewingSameVenue',
e.target.value as IncludedServicesStepValues['viewingSameVenue'],
)
}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes, same venue" />
<FormControlLabel value="no" control={<Radio />} label="No, different venue" />
</RadioGroup>
</FormControl>
</AddOnOption>
<AddOnOption
name="Prayers or vigil"
description="Arrange prayers or a vigil to be held before the service."
checked={values.prayers}
onChange={(c) => handleToggle('prayers', c)}
/>
<AddOnOption
name="Funeral announcement"
description="A complimentary funeral notice prepared and shared by the funeral home."
checked={values.funeralAnnouncement}
onChange={(c) => handleToggle('funeralAnnouncement', c)}
/>
</Box>
<Divider sx={{ my: 3 }} />
{/* CTAs */}
<Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: { xs: 'column-reverse', sm: 'row' },
gap: 2,
}}
>
{onSaveAndExit ? (
<Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
Save and continue later
</Button>
) : (
<Box />
)}
<Button type="submit" variant="contained" size="large" loading={loading}>
Continue
</Button>
</Box>
</Box>
</WizardLayout>
);
};
IncludedServicesStep.displayName = 'IncludedServicesStep';
export default IncludedServicesStep;

2
src/components/pages/IncludedServicesStep/index.ts Normal file
View File

@@ -0,0 +1,2 @@
export { IncludedServicesStep, default } from './IncludedServicesStep';
export type { IncludedServicesStepProps, IncludedServicesStepValues } from './IncludedServicesStep';