CemeteryStep: rewrite to match live site
- ToggleButtonGroups (Yes/No/Not sure) replace RadioGroups - Select dropdown replaces card selection grid - Progressive disclosure: own plot → locate it; no plot → preference? - "Not sure" option on both questions for grief-sensitive escape hatch - Component registry updated Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -84,7 +84,7 @@ duplicates) and MUST update it after completing one.
|
||||
| VenueDetailStep | done | WizardLayout (detail-toggles) + ImageGallery + Card + Chip + Typography + Button + Divider | Wizard step 7b — venue detail. Two-panel: gallery/description/features/location (left), name/meta/price/CTA/religions (right). Informational service preview. |
|
||||
| VenueServicesStep | done | WizardLayout (centered-form) + AddOnOption + Card + Typography + Button + Divider | Wizard step 7c — venue services. Compact venue card, availability notices, AddOnOption toggles with "View more" for long descriptions. Follows VenueDetailStep. |
|
||||
| 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) + Card + RadioGroup + Collapse + Divider + Button | Wizard step 9 — cemetery. Triple progressive disclosure (have plot? → choose? → grid). Dependent field resets. |
|
||||
| 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 (centered-form) + Card + Badge + TextField + MenuItem + Pagination + Divider + Button | Wizard step 10 — coffin selection. 3-col card grid with category/price filters. "Most Popular" badge. Pagination. |
|
||||
| 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. |
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { CemeteryStep } from './CemeteryStep';
|
||||
import type { CemeteryStepValues, CemeteryStepErrors, Cemetery } from './CemeteryStep';
|
||||
import type { CemeteryStepValues, CemeteryOption } from './CemeteryStep';
|
||||
import { Navigation } from '../../organisms/Navigation';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
@@ -34,31 +34,19 @@ const nav = (
|
||||
/>
|
||||
);
|
||||
|
||||
const sampleCemeteries: Cemetery[] = [
|
||||
{
|
||||
id: 'rookwood',
|
||||
name: 'Rookwood Cemetery',
|
||||
location: 'Lidcombe, NSW',
|
||||
price: 4500,
|
||||
},
|
||||
{
|
||||
id: 'northern-suburbs',
|
||||
name: 'Northern Suburbs Memorial Gardens',
|
||||
location: 'North Ryde, NSW',
|
||||
price: 5200,
|
||||
},
|
||||
{
|
||||
id: 'macquarie-park',
|
||||
name: 'Macquarie Park Cemetery',
|
||||
location: 'Macquarie Park, NSW',
|
||||
price: 4800,
|
||||
},
|
||||
const sampleCemeteries: CemeteryOption[] = [
|
||||
{ value: 'rookwood', label: 'Rookwood Cemetery' },
|
||||
{ value: 'northern-suburbs', label: 'Northern Suburbs Memorial Gardens' },
|
||||
{ value: 'macquarie-park', label: 'Macquarie Park Cemetery' },
|
||||
{ value: 'pinegrove', label: 'Pinegrove Memorial Park' },
|
||||
{ value: 'waverley', label: 'Waverley Cemetery' },
|
||||
{ value: 'botany', label: 'Botany Cemetery' },
|
||||
];
|
||||
|
||||
const defaultValues: CemeteryStepValues = {
|
||||
burialOwn: null,
|
||||
burialCustom: null,
|
||||
selectedCemeteryId: null,
|
||||
ownPlot: null,
|
||||
hasPreference: null,
|
||||
selectedCemetery: '',
|
||||
};
|
||||
|
||||
// ─── Meta ────────────────────────────────────────────────────────────────────
|
||||
@@ -75,36 +63,19 @@ const meta: Meta<typeof CemeteryStep> = {
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof CemeteryStep>;
|
||||
|
||||
// ─── Interactive (default) ──────────────────────────────────────────────────
|
||||
// ─── Default ─────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Fully interactive — progressive disclosure flow */
|
||||
/** Initial state — no selections made */
|
||||
export const Default: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({ ...defaultValues });
|
||||
const [errors, setErrors] = useState<CemeteryStepErrors>({});
|
||||
|
||||
const handleContinue = () => {
|
||||
const newErrors: CemeteryStepErrors = {};
|
||||
if (!values.burialOwn) newErrors.burialOwn = 'Please let us know about the burial plot.';
|
||||
if (values.burialOwn === 'no' && !values.burialCustom)
|
||||
newErrors.burialCustom = "Please let us know if you'd like to choose a specific cemetery.";
|
||||
if (values.burialOwn === 'no' && values.burialCustom === 'yes' && !values.selectedCemeteryId)
|
||||
newErrors.selectedCemeteryId = 'Please choose a cemetery.';
|
||||
setErrors(newErrors);
|
||||
if (Object.keys(newErrors).length === 0) alert('Continue');
|
||||
};
|
||||
|
||||
return (
|
||||
<CemeteryStep
|
||||
values={values}
|
||||
onChange={(v) => {
|
||||
setValues(v);
|
||||
setErrors({});
|
||||
}}
|
||||
onContinue={handleContinue}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
onSaveAndExit={() => alert('Save')}
|
||||
errors={errors}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
@@ -112,14 +83,14 @@ export const Default: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Has existing plot ──────────────────────────────────────────────────────
|
||||
// ─── Owns a plot ─────────────────────────────────────────────────────────────
|
||||
|
||||
/** User already owns a burial plot — short confirmation */
|
||||
export const HasExistingPlot: Story = {
|
||||
/** User owns a plot — shows "tell us where" + dropdown */
|
||||
export const OwnsPlot: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({
|
||||
...defaultValues,
|
||||
burialOwn: 'yes',
|
||||
ownPlot: 'yes',
|
||||
});
|
||||
return (
|
||||
<CemeteryStep
|
||||
@@ -127,6 +98,7 @@ export const HasExistingPlot: Story = {
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
onSaveAndExit={() => alert('Save')}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
@@ -134,15 +106,15 @@ export const HasExistingPlot: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Provider arranges ──────────────────────────────────────────────────────
|
||||
// ─── No plot, has preference ─────────────────────────────────────────────────
|
||||
|
||||
/** User wants provider to arrange — no cemetery grid */
|
||||
export const ProviderArranges: Story = {
|
||||
/** No plot, has a preference — shows both questions + dropdown */
|
||||
export const HasPreference: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({
|
||||
...defaultValues,
|
||||
burialOwn: 'no',
|
||||
burialCustom: 'no',
|
||||
ownPlot: 'no',
|
||||
hasPreference: 'yes',
|
||||
});
|
||||
return (
|
||||
<CemeteryStep
|
||||
@@ -150,6 +122,7 @@ export const ProviderArranges: Story = {
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
onSaveAndExit={() => alert('Save')}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
@@ -157,15 +130,15 @@ export const ProviderArranges: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Cemetery grid visible ──────────────────────────────────────────────────
|
||||
// ─── No plot, no preference ──────────────────────────────────────────────────
|
||||
|
||||
/** User wants to choose — cemetery grid revealed */
|
||||
export const CemeteryGridVisible: Story = {
|
||||
/** No plot, no preference — provider will arrange */
|
||||
export const NoPreference: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({
|
||||
...defaultValues,
|
||||
burialOwn: 'no',
|
||||
burialCustom: 'yes',
|
||||
ownPlot: 'no',
|
||||
hasPreference: 'no',
|
||||
});
|
||||
return (
|
||||
<CemeteryStep
|
||||
@@ -173,6 +146,7 @@ export const CemeteryGridVisible: Story = {
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
onSaveAndExit={() => alert('Save')}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
@@ -180,30 +154,7 @@ export const CemeteryGridVisible: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Cemetery selected ──────────────────────────────────────────────────────
|
||||
|
||||
/** Cemetery selected */
|
||||
export const CemeterySelected: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({
|
||||
burialOwn: 'no',
|
||||
burialCustom: 'yes',
|
||||
selectedCemeteryId: 'rookwood',
|
||||
});
|
||||
return (
|
||||
<CemeteryStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Pre-planning ───────────────────────────────────────────────────────────
|
||||
// ─── Pre-planning ────────────────────────────────────────────────────────────
|
||||
|
||||
/** Pre-planning variant */
|
||||
export const PrePlanning: Story = {
|
||||
@@ -222,22 +173,3 @@ export const PrePlanning: Story = {
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Validation errors ──────────────────────────────────────────────────────
|
||||
|
||||
/** All errors showing */
|
||||
export const WithErrors: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CemeteryStepValues>({ ...defaultValues });
|
||||
return (
|
||||
<CemeteryStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => {}}
|
||||
errors={{ burialOwn: 'Please let us know about the burial plot.' }}
|
||||
cemeteries={sampleCemeteries}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
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 TextField from '@mui/material/TextField';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import type { SxProps, Theme } from '@mui/material/styles';
|
||||
import { WizardLayout } from '../../templates/WizardLayout';
|
||||
import { Card } from '../../atoms/Card';
|
||||
import { ToggleButtonGroup } from '../../atoms/ToggleButtonGroup';
|
||||
import { Collapse } from '../../atoms/Collapse';
|
||||
import { Typography } from '../../atoms/Typography';
|
||||
import { Button } from '../../atoms/Button';
|
||||
@@ -15,29 +12,27 @@ import { Divider } from '../../atoms/Divider';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
/** A cemetery available for selection */
|
||||
export interface Cemetery {
|
||||
id: string;
|
||||
name: string;
|
||||
location: string;
|
||||
price?: number;
|
||||
/** A cemetery option for the dropdown */
|
||||
export interface CemeteryOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
/** Form values for the cemetery step */
|
||||
export interface CemeteryStepValues {
|
||||
/** Does the family already own a burial plot? */
|
||||
burialOwn: 'yes' | 'no' | null;
|
||||
/** Would they like to choose a specific cemetery? (when burialOwn=no) */
|
||||
burialCustom: 'yes' | 'no' | null;
|
||||
ownPlot: 'yes' | 'no' | 'unsure' | null;
|
||||
/** Do they have a preference for a cemetery? (when ownPlot ≠ yes) */
|
||||
hasPreference: 'yes' | 'no' | 'unsure' | null;
|
||||
/** Selected cemetery ID */
|
||||
selectedCemeteryId: string | null;
|
||||
selectedCemetery: string;
|
||||
}
|
||||
|
||||
/** Field-level error messages */
|
||||
export interface CemeteryStepErrors {
|
||||
burialOwn?: string;
|
||||
burialCustom?: string;
|
||||
selectedCemeteryId?: string;
|
||||
ownPlot?: string;
|
||||
hasPreference?: string;
|
||||
selectedCemetery?: string;
|
||||
}
|
||||
|
||||
/** Props for the CemeteryStep page component */
|
||||
@@ -46,7 +41,7 @@ export interface CemeteryStepProps {
|
||||
values: CemeteryStepValues;
|
||||
/** Callback when any field value changes */
|
||||
onChange: (values: CemeteryStepValues) => void;
|
||||
/** Callback when the Continue button is clicked */
|
||||
/** Callback when Continue is clicked */
|
||||
onContinue: () => void;
|
||||
/** Callback for back navigation */
|
||||
onBack?: () => void;
|
||||
@@ -54,10 +49,10 @@ export interface CemeteryStepProps {
|
||||
onSaveAndExit?: () => void;
|
||||
/** Field-level validation errors */
|
||||
errors?: CemeteryStepErrors;
|
||||
/** Whether the Continue button is in a loading state */
|
||||
/** Whether Continue is loading */
|
||||
loading?: boolean;
|
||||
/** Available cemeteries */
|
||||
cemeteries: Cemetery[];
|
||||
/** Available cemeteries for the dropdown */
|
||||
cemeteries: CemeteryOption[];
|
||||
/** Whether this is a pre-planning flow */
|
||||
isPrePlanning?: boolean;
|
||||
/** Navigation bar */
|
||||
@@ -81,12 +76,10 @@ export interface CemeteryStepProps {
|
||||
* burial-type funerals (Service & Burial, Graveside, Burial Only).
|
||||
*
|
||||
* Progressive disclosure flow:
|
||||
* 1. "Do you have a burial plot?" → Yes/No
|
||||
* 2. If No: "Would you like to choose a specific cemetery?" → Yes/No
|
||||
* 3. If Yes to #2: Cemetery card grid
|
||||
*
|
||||
* If the user already owns a plot, the cemetery grid can be shown
|
||||
* for confirmation (passed via showGridForExistingPlot).
|
||||
* 1. "Do you already own a burial plot?" → Yes / No / Not sure
|
||||
* 2a. Yes → "Tell us where it's located" + cemetery dropdown
|
||||
* 2b. No/Not sure → "Do you have a preference?" → Yes / No / Not sure
|
||||
* 3. Preference Yes → "Select your preferred cemetery" + dropdown
|
||||
*
|
||||
* Pure presentation component — props in, callbacks out.
|
||||
*
|
||||
@@ -108,31 +101,28 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
|
||||
hideHelpBar,
|
||||
sx,
|
||||
}) => {
|
||||
const showCustomQuestion = values.burialOwn === 'no';
|
||||
const showCemeteryGrid = values.burialOwn === 'no' && values.burialCustom === 'yes';
|
||||
const showPreferenceQuestion = values.ownPlot === 'no' || values.ownPlot === 'unsure';
|
||||
const showCemeteryForOwnPlot = values.ownPlot === 'yes';
|
||||
const showCemeteryForPreference = showPreferenceQuestion && values.hasPreference === 'yes';
|
||||
|
||||
const handleBurialOwnChange = (value: string) => {
|
||||
const handleOwnPlotChange = (value: string | null) => {
|
||||
onChange({
|
||||
...values,
|
||||
burialOwn: value as CemeteryStepValues['burialOwn'],
|
||||
// Reset dependent fields when parent changes
|
||||
burialCustom: null,
|
||||
selectedCemeteryId: null,
|
||||
ownPlot: (value ?? null) as CemeteryStepValues['ownPlot'],
|
||||
// Reset dependent fields
|
||||
hasPreference: null,
|
||||
selectedCemetery: '',
|
||||
});
|
||||
};
|
||||
|
||||
const handleBurialCustomChange = (value: string) => {
|
||||
const handlePreferenceChange = (value: string | null) => {
|
||||
onChange({
|
||||
...values,
|
||||
burialCustom: value as CemeteryStepValues['burialCustom'],
|
||||
selectedCemeteryId: null,
|
||||
hasPreference: (value ?? null) as CemeteryStepValues['hasPreference'],
|
||||
selectedCemetery: '',
|
||||
});
|
||||
};
|
||||
|
||||
const handleCemeterySelect = (id: string) => {
|
||||
onChange({ ...values, selectedCemeteryId: id });
|
||||
};
|
||||
|
||||
return (
|
||||
<WizardLayout
|
||||
variant="centered-form"
|
||||
@@ -152,7 +142,7 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
|
||||
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}>
|
||||
{isPrePlanning
|
||||
? "If you haven't decided on a cemetery yet, the funeral provider can help with this later."
|
||||
? 'If you haven\u2019t decided on a cemetery yet, the funeral provider can help with this later.'
|
||||
: 'Choose where the burial will take place.'}
|
||||
</Typography>
|
||||
|
||||
@@ -165,115 +155,97 @@ export const CemeteryStep: React.FC<CemeteryStepProps> = ({
|
||||
if (!loading) onContinue();
|
||||
}}
|
||||
>
|
||||
{/* ─── Burial plot question ─── */}
|
||||
<FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}>
|
||||
<FormLabel component="legend" sx={{ mb: 1 }}>
|
||||
Do you already have a burial plot?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
value={values.burialOwn ?? ''}
|
||||
onChange={(e) => handleBurialOwnChange(e.target.value)}
|
||||
>
|
||||
<FormControlLabel value="yes" control={<Radio />} label="Yes, we have a plot" />
|
||||
<FormControlLabel value="no" control={<Radio />} label="No, we need to find one" />
|
||||
</RadioGroup>
|
||||
{errors?.burialOwn && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mt: 0.5, color: 'var(--fa-color-text-brand)' }}
|
||||
role="alert"
|
||||
>
|
||||
{errors.burialOwn}
|
||||
</Typography>
|
||||
)}
|
||||
</FormControl>
|
||||
|
||||
{/* ─── Custom cemetery question (progressive disclosure) ─── */}
|
||||
<Collapse in={showCustomQuestion}>
|
||||
<FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}>
|
||||
<FormLabel component="legend" sx={{ mb: 1 }}>
|
||||
Would you like to choose a specific cemetery?
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
value={values.burialCustom ?? ''}
|
||||
onChange={(e) => handleBurialCustomChange(e.target.value)}
|
||||
>
|
||||
<FormControlLabel value="yes" control={<Radio />} label="Yes, I'd like to choose" />
|
||||
<FormControlLabel
|
||||
value="no"
|
||||
control={<Radio />}
|
||||
label="No, the funeral provider can arrange this"
|
||||
{/* ─── Question 1: Own a burial plot? ─── */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<ToggleButtonGroup
|
||||
label="Do you already own a burial plot?"
|
||||
options={[
|
||||
{ value: 'yes', label: 'Yes' },
|
||||
{ value: 'no', label: 'No' },
|
||||
{ value: 'unsure', label: 'Not sure' },
|
||||
]}
|
||||
value={values.ownPlot}
|
||||
onChange={handleOwnPlotChange}
|
||||
error={!!errors?.ownPlot}
|
||||
helperText={errors?.ownPlot}
|
||||
fullWidth
|
||||
/>
|
||||
</RadioGroup>
|
||||
{errors?.burialCustom && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mt: 0.5, color: 'var(--fa-color-text-brand)' }}
|
||||
role="alert"
|
||||
>
|
||||
{errors.burialCustom}
|
||||
</Typography>
|
||||
)}
|
||||
</FormControl>
|
||||
</Collapse>
|
||||
|
||||
{/* ─── Cemetery card grid (progressive disclosure) ─── */}
|
||||
<Collapse in={showCemeteryGrid}>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="h5" sx={{ mb: 2 }}>
|
||||
Available cemeteries
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
role="radiogroup"
|
||||
aria-label="Available cemeteries"
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)' },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
{cemeteries.map((cemetery, index) => (
|
||||
<Card
|
||||
key={cemetery.id}
|
||||
interactive
|
||||
selected={cemetery.id === values.selectedCemeteryId}
|
||||
onClick={() => handleCemeterySelect(cemetery.id)}
|
||||
role="radio"
|
||||
aria-checked={cemetery.id === values.selectedCemeteryId}
|
||||
tabIndex={
|
||||
values.selectedCemeteryId === null
|
||||
? index === 0
|
||||
? 0
|
||||
: -1
|
||||
: cemetery.id === values.selectedCemeteryId
|
||||
? 0
|
||||
: -1
|
||||
}
|
||||
sx={{ p: 3 }}
|
||||
>
|
||||
<Typography variant="h5">{cemetery.name}</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{cemetery.location}
|
||||
</Typography>
|
||||
{cemetery.price != null && (
|
||||
<Typography variant="h6" color="primary" sx={{ mt: 1 }}>
|
||||
${cemetery.price.toLocaleString('en-AU')}
|
||||
</Typography>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
{errors?.selectedCemeteryId && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{ mt: 1, color: 'var(--fa-color-text-brand)' }}
|
||||
role="alert"
|
||||
>
|
||||
{errors.selectedCemeteryId}
|
||||
{/* ─── Own plot: tell us where ─── */}
|
||||
<Collapse in={showCemeteryForOwnPlot}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h5" component="h2" sx={{ mb: 3 }}>
|
||||
Tell us where the burial plot is located
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<TextField
|
||||
select
|
||||
label="Cemetery"
|
||||
value={values.selectedCemetery}
|
||||
onChange={(e) => onChange({ ...values, selectedCemetery: e.target.value })}
|
||||
placeholder="Select a cemetery"
|
||||
fullWidth
|
||||
error={!!errors?.selectedCemetery}
|
||||
helperText={errors?.selectedCemetery}
|
||||
>
|
||||
<MenuItem value="" disabled>
|
||||
Select a cemetery
|
||||
</MenuItem>
|
||||
{cemeteries.map((c) => (
|
||||
<MenuItem key={c.value} value={c.value}>
|
||||
{c.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Box>
|
||||
</Collapse>
|
||||
|
||||
{/* ─── Question 2: Have a preference? (when no plot) ─── */}
|
||||
<Collapse in={showPreferenceQuestion}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<ToggleButtonGroup
|
||||
label="Do you have a preference for a cemetery?"
|
||||
options={[
|
||||
{ value: 'yes', label: 'Yes' },
|
||||
{ value: 'no', label: 'No' },
|
||||
{ value: 'unsure', label: 'Not sure' },
|
||||
]}
|
||||
value={values.hasPreference}
|
||||
onChange={handlePreferenceChange}
|
||||
error={!!errors?.hasPreference}
|
||||
helperText={errors?.hasPreference}
|
||||
fullWidth
|
||||
/>
|
||||
</Box>
|
||||
</Collapse>
|
||||
|
||||
{/* ─── Preference: select cemetery ─── */}
|
||||
<Collapse in={showCemeteryForPreference}>
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant="h5" component="h2" sx={{ mb: 3 }}>
|
||||
Select your preferred cemetery
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
select
|
||||
label="Cemetery"
|
||||
value={values.selectedCemetery}
|
||||
onChange={(e) => onChange({ ...values, selectedCemetery: e.target.value })}
|
||||
placeholder="Select a cemetery"
|
||||
fullWidth
|
||||
error={!!errors?.selectedCemetery}
|
||||
helperText={errors?.selectedCemetery}
|
||||
>
|
||||
<MenuItem value="" disabled>
|
||||
Select a cemetery
|
||||
</MenuItem>
|
||||
{cemeteries.map((c) => (
|
||||
<MenuItem key={c.value} value={c.value}>
|
||||
{c.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
</Box>
|
||||
</Collapse>
|
||||
|
||||
|
||||
@@ -3,5 +3,5 @@ export type {
|
||||
CemeteryStepProps,
|
||||
CemeteryStepValues,
|
||||
CemeteryStepErrors,
|
||||
Cemetery,
|
||||
CemeteryOption,
|
||||
} from './CemeteryStep';
|
||||
|
||||
Reference in New Issue
Block a user