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

CrematoriumStep: rewrite to match live site variants

Browse Source 
Simplified from over-engineered multi-card selection to two clean
variants based on funeral type:

- Service & Cremation: compact card + witness Yes/No (ToggleButtonGroup)
- Cremation Only: compact card + badge + "Included in Package" notice

Removed: multi-card grid, priority dropdown, special instructions,
crematoriums array prop. Crematorium is always pre-selected by provider.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-30 21:51:03 +11:00
parent a8354cc8dd
commit ab9c8bfa6f
3 changed files with 201 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/components/pages/CrematoriumStep/CrematoriumStep.stories.tsx
View File

@@ -1,7 +1,7 @@
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { CrematoriumStep } from './CrematoriumStep';
import type { CrematoriumStepValues, CrematoriumStepErrors, Crematorium } from './CrematoriumStep';
import type { CrematoriumStepValues, Crematorium } from './CrematoriumStep';
import { Navigation } from '../../organisms/Navigation';
import Box from '@mui/material/Box';
@@ -34,46 +34,22 @@ const nav = (
/>
);
const singleCrematorium: Crematorium[] = [
{
id: 'warrill-park',
name: 'Warrill Park Crematorium',
location: 'Ipswich',
distance: '15 min from venue',
price: 850,
},
];
const sampleCrematorium: Crematorium = {
name: 'Warrill Park Crematorium',
imageUrl: 'https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=400&h=300&fit=crop',
address: 'Anderson Day Drive, Willowbank, QLD, 4306',
distance: '152.62km from Killick Family Funerals Chapel Kingaroy',
};
const multipleCrematoriums: Crematorium[] = [
{
id: 'warrill-park',
name: 'Warrill Park Crematorium',
location: 'Ipswich',
distance: '15 min from venue',
price: 850,
},
{
id: 'mt-gravatt',
name: 'Mt Gravatt Crematorium',
location: 'Mt Gravatt',
distance: '25 min from venue',
price: 920,
},
{
id: 'pinnaroo',
name: 'Pinnaroo Valley Memorial Park',
location: 'Padstow',
distance: '35 min from venue',
price: 780,
},
];
const sydneyCrematorium: Crematorium = {
name: 'Macquarie Park Cemetery & Crematorium',
imageUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
address: 'Plassey Rd, Macquarie Park, NSW, 2113',
distance: '3.54km from Gladesville, Sydney',
};
const defaultValues: CrematoriumStepValues = {
selectedCrematoriumId: null,
attend: 'no',
priority: '',
hasInstructions: 'no',
specialInstructions: '',
attend: null,
};
// ─── Meta ────────────────────────────────────────────────────────────────────
@@ -90,23 +66,20 @@ const meta: Meta<typeof CrematoriumStep> = {
export default meta;
type Story = StoryObj<typeof CrematoriumStep>;
// ─── Single crematorium (most common) ───────────────────────────────────────
// ─── Service & Cremation (default) ─────────────────────────────────────────
/** Single pre-selected crematorium — confirmation pattern */
/** Service & Cremation — witness question with personalised name */
export const Default: Story = {
render: () => {
const [values, setValues] = useState<CrematoriumStepValues>({
...defaultValues,
selectedCrematoriumId: 'warrill-park',
});
const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
return (
<CrematoriumStep
crematorium={sampleCrematorium}
values={values}
onChange={setValues}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')}
onSaveAndExit={() => alert('Save')}
crematoriums={singleCrematorium}
deceasedName="Margaret"
navigation={nav}
/>
@@ -114,82 +87,40 @@ export const Default: Story = {
},
};
// ─── Multiple crematoriums ──────────────────────────────────────────────────
// ─── Cremation Only ────────────────────────────────────────────────────────
/** Multiple options — card grid with selection */
export const MultipleCrematoriums: Story = {
/** Cremation Only — no witness question, "included in package" notice */
export const CremationOnly: Story = {
render: () => {
const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
const [errors, setErrors] = useState<CrematoriumStepErrors>({});
const handleContinue = () => {
if (!values.selectedCrematoriumId) {
setErrors({ selectedCrematoriumId: 'Please confirm the crematorium.' });
return;
}
alert(`Selected: ${values.selectedCrematoriumId}`);
};
return (
<CrematoriumStep
values={values}
onChange={(v) => {
setValues(v);
setErrors({});
}}
onContinue={handleContinue}
onBack={() => alert('Back')}
errors={errors}
crematoriums={multipleCrematoriums}
deceasedName="Margaret"
navigation={nav}
/>
);
},
};
// ─── With special instructions ──────────────────────────────────────────────
/** Special instructions textarea revealed */
export const WithInstructions: Story = {
render: () => {
const [values, setValues] = useState<CrematoriumStepValues>({
...defaultValues,
selectedCrematoriumId: 'warrill-park',
attend: 'yes',
hasInstructions: 'yes',
specialInstructions: 'Please ensure the family has 10 minutes for a private farewell.',
});
return (
<CrematoriumStep
crematorium={sydneyCrematorium}
values={values}
onChange={setValues}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')}
crematoriums={singleCrematorium}
deceasedName="Margaret"
onSaveAndExit={() => alert('Save')}
isCremationOnly
navigation={nav}
/>
);
},
};
// ─── Pre-planning ───────────────────────────────────────────────────────────
// ─── Pre-planning ──────────────────────────────────────────────────────────
/** Pre-planning variant — softer helper text */
/** Pre-planning variant — softer copy */
export const PrePlanning: Story = {
render: () => {
const [values, setValues] = useState<CrematoriumStepValues>({
...defaultValues,
selectedCrematoriumId: 'warrill-park',
});
const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
return (
<CrematoriumStep
crematorium={sampleCrematorium}
values={values}
onChange={setValues}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')}
crematoriums={singleCrematorium}
isPrePlanning
navigation={nav}
/>
@@ -197,19 +128,46 @@ export const PrePlanning: Story = {
},
};
// ─── Validation error ───────────────────────────────────────────────────────
// ─── No image ──────────────────────────────────────────────────────────────
/** No crematorium selected with error */
export const WithError: Story = {
/** Crematorium without a photo */
export const NoImage: Story = {
render: () => {
const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
return (
<CrematoriumStep
crematorium={{
name: 'Northern Suburbs Crematorium',
address: '199 Delhi Rd, North Ryde, NSW, 2113',
distance: '8km from venue',
}}
values={values}
onChange={setValues}
onContinue={() => {}}
errors={{ selectedCrematoriumId: 'Please confirm the crematorium.' }}
crematoriums={multipleCrematoriums}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')}
onSaveAndExit={() => alert('Save')}
deceasedName="Robert"
navigation={nav}
/>
);
},
};
// ─── With error ────────────────────────────────────────────────────────────
/** Validation error on witness question */
export const WithError: Story = {
render: () => {
const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
return (
<CrematoriumStep
crematorium={sampleCrematorium}
values={values}
onChange={setValues}
onContinue={() => {}}
onBack={() => alert('Back')}
errors={{ attend: 'Please let us know if anyone will follow the hearse.' }}
deceasedName="Margaret"
navigation={nav}
/>
);

346
src/components/pages/CrematoriumStep/CrematoriumStep.tsx
View File

@@ -1,58 +1,47 @@
import React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';
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 LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
import DirectionsCarOutlinedIcon from '@mui/icons-material/DirectionsCarOutlined';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import type { SxProps, Theme } from '@mui/material/styles';
import { WizardLayout } from '../../templates/WizardLayout';
import { Card } from '../../atoms/Card';
import { Collapse } from '../../atoms/Collapse';
import { Badge } from '../../atoms/Badge';
import { ToggleButtonGroup } from '../../atoms/ToggleButtonGroup';
import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';
import { Divider } from '../../atoms/Divider';
// ─── Types ───────────────────────────────────────────────────────────────────
/** A crematorium available for selection */
/** The pre-selected crematorium */
export interface Crematorium {
id: string;
name: string;
location: string;
imageUrl?: string;
address: string;
distance?: string;
price?: number;
}
/** Form values for the crematorium step */
export interface CrematoriumStepValues {
/** Selected crematorium ID */
selectedCrematoriumId: string | null;
/** Will anyone follow the hearse? */
attend: 'yes' | 'no';
/** Cremation timing preference */
priority: string;
/** Has special instructions */
hasInstructions: 'yes' | 'no';
/** Special instructions text */
specialInstructions: string;
/** Will anyone follow the hearse? (service & cremation only) */
attend: 'yes' | 'no' | null;
}
/** Field-level error messages */
export interface CrematoriumStepErrors {
selectedCrematoriumId?: string;
attend?: string;
}
/** Props for the CrematoriumStep page component */
export interface CrematoriumStepProps {
/** The pre-selected crematorium */
crematorium: Crematorium;
/** Current form values */
values: CrematoriumStepValues;
/** Callback when any field value changes */
onChange: (values: CrematoriumStepValues) => void;
/** Callback when the Continue button is clicked */
/** Callback when Continue is clicked */
onContinue: () => void;
/** Callback for back navigation */
onBack?: () => void;
@@ -60,17 +49,15 @@ export interface CrematoriumStepProps {
onSaveAndExit?: () => void;
/** Field-level validation errors */
errors?: CrematoriumStepErrors;
/** Whether the Continue button is in a loading state */
/** Whether Continue is in a loading state */
loading?: boolean;
/** Available crematoriums */
crematoriums: Crematorium[];
/** Priority/timing options (provider-specific) */
priorityOptions?: Array<{ value: string; label: string }>;
/** Deceased first name — used to personalise copy */
/** Whether this is a cremation-only flow (no service) */
isCremationOnly?: boolean;
/** Deceased first name — personalises witness question */
deceasedName?: string;
/** Whether this is a pre-planning flow */
isPrePlanning?: boolean;
/** Navigation bar — passed through to WizardLayout */
/** Navigation bar */
navigation?: React.ReactNode;
/** Progress stepper */
progressStepper?: React.ReactNode;
@@ -78,7 +65,7 @@ export interface CrematoriumStepProps {
runningTotal?: React.ReactNode;
/** Hide the help bar */
hideHelpBar?: boolean;
/** MUI sx prop for the root */
/** MUI sx prop */
sx?: SxProps<Theme>;
}
@@ -87,19 +74,21 @@ export interface CrematoriumStepProps {
/**
* Step 8 — Crematorium for the FA arrangement wizard.
*
* Select a crematorium and cremation witness/attendance preferences.
* Only shown for cremation-type funerals.
* Confirmation page for the provider's pre-selected crematorium.
* Two variants based on funeral type:
*
* Often a single pre-selected crematorium (provider's default). When
* multiple options exist, shows a card grid with radiogroup pattern.
* **Service & Cremation:** Crematorium card + witness question
* ("Will anyone follow the hearse?") with personalised helper text.
*
* Personalises witness question with deceased name when available.
* **Cremation Only:** Crematorium card + "Cremation Only" badge +
* "Included in Package" notice. No witness question (no procession).
*
* Pure presentation component — props in, callbacks out.
*
* Spec: documentation/steps/steps/08_crematorium.yaml
*/
export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
crematorium,
values,
onChange,
onContinue,
@@ -107,8 +96,7 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
onSaveAndExit,
errors,
loading = false,
crematoriums,
priorityOptions = [],
isCremationOnly = false,
deceasedName,
isPrePlanning = false,
navigation,
@@ -117,15 +105,6 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
hideHelpBar,
sx,
}) => {
const isSingle = crematoriums.length === 1;
const handleFieldChange = <K extends keyof CrematoriumStepValues>(
field: K,
value: CrematoriumStepValues[K],
) => {
onChange({ ...values, [field]: value });
};
const witnessHelper = deceasedName
? `Please indicate if you wish to follow the hearse in your own vehicles to escort ${deceasedName} to the crematorium.`
: isPrePlanning
@@ -152,7 +131,9 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
<Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}>
{isPrePlanning
? 'Review the crematorium details. You can update this later.'
: 'Confirm the crematorium and let us know about any preferences.'}
: isCremationOnly
? 'The crematorium included with your selected package.'
: 'Confirm the crematorium and let us know about any preferences.'}
</Typography>
<Box
@@ -164,173 +145,124 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
if (!loading) onContinue();
}}
>
{/* ─── Crematorium selection ─── */}
<Box sx={{ mb: 4 }}>
{isSingle ? (
// Single crematorium — presented as confirmation
<Card
selected={values.selectedCrematoriumId === crematoriums[0].id}
interactive
onClick={() => handleFieldChange('selectedCrematoriumId', crematoriums[0].id)}
role="radio"
aria-checked={values.selectedCrematoriumId === crematoriums[0].id}
tabIndex={0}
sx={{ p: 3 }}
>
<Typography variant="h5">{crematoriums[0].name}</Typography>
<Typography variant="body2" color="text.secondary">
{crematoriums[0].location}
{crematoriums[0].distance && ` \u2022 ${crematoriums[0].distance}`}
</Typography>
{crematoriums[0].price != null && (
<Typography variant="h6" color="primary" sx={{ mt: 1 }}>
${crematoriums[0].price.toLocaleString('en-AU')}
</Typography>
)}
</Card>
) : (
// Multiple crematoriums — radiogroup grid
<Box role="radiogroup" aria-label="Available crematoriums">
<Box
sx={{
display: 'grid',
gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)' },
gap: 2,
}}
>
{crematoriums.map((crem, index) => (
<Card
key={crem.id}
interactive
selected={crem.id === values.selectedCrematoriumId}
onClick={() => handleFieldChange('selectedCrematoriumId', crem.id)}
role="radio"
aria-checked={crem.id === values.selectedCrematoriumId}
tabIndex={
values.selectedCrematoriumId === null
? index === 0
? 0
: -1
: crem.id === values.selectedCrematoriumId
? 0
: -1
}
sx={{ p: 3 }}
>
<Typography variant="h5">{crem.name}</Typography>
<Typography variant="body2" color="text.secondary">
{crem.location}
{crem.distance && ` \u2022 ${crem.distance}`}
</Typography>
{crem.price != null && (
<Typography variant="h6" color="primary" sx={{ mt: 1 }}>
${crem.price.toLocaleString('en-AU')}
</Typography>
)}
</Card>
))}
</Box>
</Box>
{/* ─── Compact crematorium card ─── */}
<Card
variant="outlined"
padding="none"
sx={{
display: 'flex',
overflow: 'hidden',
minHeight: 100,
mb: 4,
}}
>
{crematorium.imageUrl && (
<Box
role="img"
aria-label={`${crematorium.name} photo`}
sx={{
width: { xs: 120, sm: 160 },
flexShrink: 0,
backgroundImage: `url(${crematorium.imageUrl})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
)}
{errors?.selectedCrematoriumId && (
<Typography
variant="body2"
sx={{ mt: 1, color: 'var(--fa-color-text-brand)' }}
role="alert"
>
{errors.selectedCrematoriumId}
</Typography>
)}
</Box>
<Divider sx={{ my: 4 }} />
{/* ─── Witness / attendance question ─── */}
<FormControl component="fieldset" sx={{ mb: 4, display: 'block' }}>
<FormLabel component="legend" sx={{ mb: 0.5 }}>
Will anyone be following the hearse to the crematorium?
</FormLabel>
<Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
{witnessHelper}
</Typography>
<RadioGroup
value={values.attend}
onChange={(e) =>
handleFieldChange('attend', e.target.value as CrematoriumStepValues['attend'])
}
<Box
sx={{
flex: 1,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gap: 0.5,
p: 2,
minWidth: 0,
}}
>
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
<FormControlLabel value="no" control={<Radio />} label="No" />
</RadioGroup>
{errors?.attend && (
<Typography
variant="body2"
sx={{ mt: 0.5, color: 'var(--fa-color-text-brand)' }}
role="alert"
>
{errors.attend}
<Typography variant="h6" component="span" maxLines={2}>
{crematorium.name}
</Typography>
)}
</FormControl>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<LocationOnOutlinedIcon sx={{ fontSize: 14, color: 'text.secondary' }} aria-hidden />
<Typography variant="body2" color="text.secondary">
{crematorium.address}
</Typography>
</Box>
{crematorium.distance && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<DirectionsCarOutlinedIcon
sx={{ fontSize: 14, color: 'text.secondary' }}
aria-hidden
/>
<Typography variant="body2" color="text.secondary">
{crematorium.distance}
</Typography>
</Box>
)}
</Box>
</Card>
{/* ─── Priority / timing preference (optional, provider-specific) ─── */}
{priorityOptions.length > 0 && (
{isCremationOnly ? (
<>
<Divider sx={{ my: 4 }} />
<TextField
select
label="Cremation timing preference"
value={values.priority}
onChange={(e) => handleFieldChange('priority', e.target.value)}
placeholder="Select timing preference (optional)"
fullWidth
sx={{ mb: 3 }}
{/* ─── Cremation Only: badge + included notice ─── */}
<Badge variant="soft" color="success" sx={{ mb: 3 }}>
Cremation Only
</Badge>
<Card
variant="outlined"
padding="compact"
sx={{
bgcolor: 'var(--fa-color-surface-subtle)',
borderColor: 'var(--fa-color-border-default)',
}}
>
{priorityOptions.map((opt) => (
<MenuItem key={opt.value} value={opt.value}>
{opt.label}
</MenuItem>
))}
</TextField>
<Box sx={{ display: 'flex', gap: 1.5, alignItems: 'flex-start' }}>
<InfoOutlinedIcon
sx={{ fontSize: 20, color: 'text.secondary', mt: 0.25, flexShrink: 0 }}
aria-hidden
/>
<Box>
<Typography variant="label" sx={{ display: 'block', mb: 0.5 }}>
Crematorium included in package
</Typography>
<Typography variant="body2" color="text.secondary">
The selected crematorium is included in your funeral package. If you have any
questions or would prefer a different option, please speak with your funeral
director.
</Typography>
</Box>
</Box>
</Card>
</>
) : (
<>
{/* ─── Service & Cremation: witness question ─── */}
<Typography variant="h5" component="h2" sx={{ mb: 0.5 }}>
Will anyone be following the hearse to the crematorium?
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
{witnessHelper}
</Typography>
<ToggleButtonGroup
label=""
options={[
{ value: 'yes', label: 'Yes' },
{ value: 'no', label: 'No' },
]}
value={values.attend}
onChange={(v) =>
onChange({ ...values, attend: v as CrematoriumStepValues['attend'] })
}
error={!!errors?.attend}
helperText={errors?.attend}
fullWidth
/>
</>
)}
<Divider sx={{ my: 4 }} />
{/* ─── Special instructions ─── */}
<FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}>
<FormLabel component="legend" sx={{ mb: 1 }}>
Do you have any special requests for the cremation?
</FormLabel>
<RadioGroup
value={values.hasInstructions}
onChange={(e) =>
handleFieldChange(
'hasInstructions',
e.target.value as CrematoriumStepValues['hasInstructions'],
)
}
>
<FormControlLabel value="no" control={<Radio />} label="No" />
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
</RadioGroup>
</FormControl>
<Collapse in={values.hasInstructions === 'yes'}>
<TextField
label="Special requests"
value={values.specialInstructions}
onChange={(e) => handleFieldChange('specialInstructions', e.target.value)}
placeholder="Enter any special requests or instructions..."
multiline
minRows={3}
maxRows={8}
fullWidth
sx={{ mb: 3 }}
/>
</Collapse>
<Divider sx={{ my: 3 }} />
{/* CTAs */}