Add CrematoriumStep page (wizard step 8)
- Single crematorium: confirmation card (pre-selected), most common case
- Multiple crematoriums: card grid with radiogroup pattern + roving tabindex
- Witness question: "Will anyone follow the hearse?" with personalised helper text
- Special instructions: radio + progressive disclosure textarea via Collapse
- Personalised copy with deceased name ("escort [Name] to the crematorium")
- Pre-planning variant with softer helper text
- Australian terminology: "crematorium" not "crematory"
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
217
src/components/pages/CrematoriumStep/CrematoriumStep.stories.tsx
Normal file
217
src/components/pages/CrematoriumStep/CrematoriumStep.stories.tsx
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react';
|
||||||
|
import { CrematoriumStep } from './CrematoriumStep';
|
||||||
|
import type { CrematoriumStepValues, CrematoriumStepErrors, Crematorium } from './CrematoriumStep';
|
||||||
|
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 singleCrematorium: Crematorium[] = [
|
||||||
|
{
|
||||||
|
id: 'warrill-park',
|
||||||
|
name: 'Warrill Park Crematorium',
|
||||||
|
location: 'Ipswich',
|
||||||
|
distance: '15 min from venue',
|
||||||
|
price: 850,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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 defaultValues: CrematoriumStepValues = {
|
||||||
|
selectedCrematoriumId: null,
|
||||||
|
attend: 'no',
|
||||||
|
priority: '',
|
||||||
|
hasInstructions: 'no',
|
||||||
|
specialInstructions: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─── Meta ────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const meta: Meta<typeof CrematoriumStep> = {
|
||||||
|
title: 'Pages/CrematoriumStep',
|
||||||
|
component: CrematoriumStep,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
parameters: {
|
||||||
|
layout: 'fullscreen',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof CrematoriumStep>;
|
||||||
|
|
||||||
|
// ─── Single crematorium (most common) ───────────────────────────────────────
|
||||||
|
|
||||||
|
/** Single pre-selected crematorium — confirmation pattern */
|
||||||
|
export const Default: Story = {
|
||||||
|
render: () => {
|
||||||
|
const [values, setValues] = useState<CrematoriumStepValues>({
|
||||||
|
...defaultValues,
|
||||||
|
selectedCrematoriumId: 'warrill-park',
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<CrematoriumStep
|
||||||
|
values={values}
|
||||||
|
onChange={setValues}
|
||||||
|
onContinue={() => alert('Continue')}
|
||||||
|
onBack={() => alert('Back')}
|
||||||
|
onSaveAndExit={() => alert('Save')}
|
||||||
|
crematoriums={singleCrematorium}
|
||||||
|
deceasedName="Margaret"
|
||||||
|
navigation={nav}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─── Multiple crematoriums ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** Multiple options — card grid with selection */
|
||||||
|
export const MultipleCrematoriums: 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
|
||||||
|
values={values}
|
||||||
|
onChange={setValues}
|
||||||
|
onContinue={() => alert('Continue')}
|
||||||
|
onBack={() => alert('Back')}
|
||||||
|
crematoriums={singleCrematorium}
|
||||||
|
deceasedName="Margaret"
|
||||||
|
navigation={nav}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─── Pre-planning ───────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** Pre-planning variant — softer helper text */
|
||||||
|
export const PrePlanning: Story = {
|
||||||
|
render: () => {
|
||||||
|
const [values, setValues] = useState<CrematoriumStepValues>({
|
||||||
|
...defaultValues,
|
||||||
|
selectedCrematoriumId: 'warrill-park',
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<CrematoriumStep
|
||||||
|
values={values}
|
||||||
|
onChange={setValues}
|
||||||
|
onContinue={() => alert('Continue')}
|
||||||
|
onBack={() => alert('Back')}
|
||||||
|
crematoriums={singleCrematorium}
|
||||||
|
isPrePlanning
|
||||||
|
navigation={nav}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─── Validation error ───────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** No crematorium selected with error */
|
||||||
|
export const WithError: Story = {
|
||||||
|
render: () => {
|
||||||
|
const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
|
||||||
|
return (
|
||||||
|
<CrematoriumStep
|
||||||
|
values={values}
|
||||||
|
onChange={setValues}
|
||||||
|
onContinue={() => {}}
|
||||||
|
errors={{ selectedCrematoriumId: 'Please confirm the crematorium.' }}
|
||||||
|
crematoriums={multipleCrematoriums}
|
||||||
|
navigation={nav}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
340
src/components/pages/CrematoriumStep/CrematoriumStep.tsx
Normal file
340
src/components/pages/CrematoriumStep/CrematoriumStep.tsx
Normal file
@@ -0,0 +1,340 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
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 { Card } from '../../atoms/Card';
|
||||||
|
import { Collapse } from '../../atoms/Collapse';
|
||||||
|
import { Typography } from '../../atoms/Typography';
|
||||||
|
import { Button } from '../../atoms/Button';
|
||||||
|
import { Divider } from '../../atoms/Divider';
|
||||||
|
|
||||||
|
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** A crematorium available for selection */
|
||||||
|
export interface Crematorium {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
location: 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Field-level error messages */
|
||||||
|
export interface CrematoriumStepErrors {
|
||||||
|
selectedCrematoriumId?: string;
|
||||||
|
attend?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Props for the CrematoriumStep page component */
|
||||||
|
export interface CrematoriumStepProps {
|
||||||
|
/** Current form values */
|
||||||
|
values: CrematoriumStepValues;
|
||||||
|
/** Callback when any field value changes */
|
||||||
|
onChange: (values: CrematoriumStepValues) => void;
|
||||||
|
/** Callback when the Continue button is clicked */
|
||||||
|
onContinue: () => void;
|
||||||
|
/** Callback for back navigation */
|
||||||
|
onBack?: () => void;
|
||||||
|
/** Callback for save-and-exit */
|
||||||
|
onSaveAndExit?: () => void;
|
||||||
|
/** Field-level validation errors */
|
||||||
|
errors?: CrematoriumStepErrors;
|
||||||
|
/** Whether the Continue button 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 */
|
||||||
|
deceasedName?: string;
|
||||||
|
/** Whether this is a pre-planning flow */
|
||||||
|
isPrePlanning?: boolean;
|
||||||
|
/** Navigation bar — passed through to WizardLayout */
|
||||||
|
navigation?: React.ReactNode;
|
||||||
|
/** Progress stepper */
|
||||||
|
progressStepper?: React.ReactNode;
|
||||||
|
/** Running total */
|
||||||
|
runningTotal?: React.ReactNode;
|
||||||
|
/** Hide the help bar */
|
||||||
|
hideHelpBar?: boolean;
|
||||||
|
/** MUI sx prop for the root */
|
||||||
|
sx?: SxProps<Theme>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Component ───────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Step 8 — Crematorium for the FA arrangement wizard.
|
||||||
|
*
|
||||||
|
* Select a crematorium and cremation witness/attendance preferences.
|
||||||
|
* Only shown for cremation-type funerals.
|
||||||
|
*
|
||||||
|
* Often a single pre-selected crematorium (provider's default). When
|
||||||
|
* multiple options exist, shows a card grid with radiogroup pattern.
|
||||||
|
*
|
||||||
|
* Personalises witness question with deceased name when available.
|
||||||
|
*
|
||||||
|
* Pure presentation component — props in, callbacks out.
|
||||||
|
*
|
||||||
|
* Spec: documentation/steps/steps/08_crematorium.yaml
|
||||||
|
*/
|
||||||
|
export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
|
||||||
|
values,
|
||||||
|
onChange,
|
||||||
|
onContinue,
|
||||||
|
onBack,
|
||||||
|
onSaveAndExit,
|
||||||
|
errors,
|
||||||
|
loading = false,
|
||||||
|
crematoriums,
|
||||||
|
priorityOptions = [],
|
||||||
|
deceasedName,
|
||||||
|
isPrePlanning = false,
|
||||||
|
navigation,
|
||||||
|
progressStepper,
|
||||||
|
runningTotal,
|
||||||
|
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
|
||||||
|
? 'This can be decided closer to the time.'
|
||||||
|
: 'Please indicate if anyone wishes to follow the hearse to the crematorium.';
|
||||||
|
|
||||||
|
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}>
|
||||||
|
Crematorium
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
component="form"
|
||||||
|
noValidate
|
||||||
|
onSubmit={(e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
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>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{errors?.selectedCrematoriumId && (
|
||||||
|
<Typography variant="body2" color="error" sx={{ mt: 1 }} role="alert">
|
||||||
|
{errors.selectedCrematoriumId}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* ─── Witness / attendance question ─── */}
|
||||||
|
<FormControl component="fieldset" sx={{ mb: 3, 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'])
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FormControlLabel value="yes" control={<Radio />} label="Yes" />
|
||||||
|
<FormControlLabel value="no" control={<Radio />} label="No" />
|
||||||
|
</RadioGroup>
|
||||||
|
{errors?.attend && (
|
||||||
|
<Typography variant="body2" color="error" sx={{ mt: 0.5 }} role="alert">
|
||||||
|
{errors.attend}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</FormControl>
|
||||||
|
|
||||||
|
{/* ─── Priority / timing preference (optional, provider-specific) ─── */}
|
||||||
|
{priorityOptions.length > 0 && (
|
||||||
|
<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 }}
|
||||||
|
>
|
||||||
|
{priorityOptions.map((opt) => (
|
||||||
|
<option key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* ─── 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 */}
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
CrematoriumStep.displayName = 'CrematoriumStep';
|
||||||
|
export default CrematoriumStep;
|
||||||
7
src/components/pages/CrematoriumStep/index.ts
Normal file
7
src/components/pages/CrematoriumStep/index.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export { CrematoriumStep, default } from './CrematoriumStep';
|
||||||
|
export type {
|
||||||
|
CrematoriumStepProps,
|
||||||
|
CrematoriumStepValues,
|
||||||
|
CrematoriumStepErrors,
|
||||||
|
Crematorium,
|
||||||
|
} from './CrematoriumStep';
|
||||||
Reference in New Issue
Block a user