From 1f9f7e26112b5fbda7e41abbbebbe416ac005a41 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Sun, 29 Mar 2026 14:55:34 +1100
Subject: [PATCH] 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>
---
 .../CrematoriumStep.stories.tsx               | 217 +++++++++++
 .../pages/CrematoriumStep/CrematoriumStep.tsx | 340 ++++++++++++++++++
 src/components/pages/CrematoriumStep/index.ts |   7 +
 3 files changed, 564 insertions(+)
 create mode 100644 src/components/pages/CrematoriumStep/CrematoriumStep.stories.tsx
 create mode 100644 src/components/pages/CrematoriumStep/CrematoriumStep.tsx
 create mode 100644 src/components/pages/CrematoriumStep/index.ts

diff --git a/src/components/pages/CrematoriumStep/CrematoriumStep.stories.tsx b/src/components/pages/CrematoriumStep/CrematoriumStep.stories.tsx
new file mode 100644
index 0000000..ff57a58
--- /dev/null
+++ b/src/components/pages/CrematoriumStep/CrematoriumStep.stories.tsx
@@ -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}
+      />
+    );
+  },
+};
diff --git a/src/components/pages/CrematoriumStep/CrematoriumStep.tsx b/src/components/pages/CrematoriumStep/CrematoriumStep.tsx
new file mode 100644
index 0000000..1638104
--- /dev/null
+++ b/src/components/pages/CrematoriumStep/CrematoriumStep.tsx
@@ -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;
diff --git a/src/components/pages/CrematoriumStep/index.ts b/src/components/pages/CrematoriumStep/index.ts
new file mode 100644
index 0000000..6a9aa85
--- /dev/null
+++ b/src/components/pages/CrematoriumStep/index.ts
@@ -0,0 +1,7 @@
+export { CrematoriumStep, default } from './CrematoriumStep';
+export type {
+  CrematoriumStepProps,
+  CrematoriumStepValues,
+  CrematoriumStepErrors,
+  Crematorium,
+} from './CrematoriumStep';