Split AdditionalServicesStep into IncludedServicesStep + ExtrasStep
- 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:
343
src/components/pages/ExtrasStep/ExtrasStep.tsx
Normal file
343
src/components/pages/ExtrasStep/ExtrasStep.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user