From 77bac1478f4556488d8704d6c2575c912fe84eef Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Sun, 29 Mar 2026 15:02:18 +1100
Subject: [PATCH] Add AdditionalServicesStep page (wizard step 12)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Merged from baseline steps 14 (optionals) + 15 (extras) per Rec #2
- Section 1: Complimentary inclusions (dressing, viewing, prayers, announcement)
- Section 2: Paid extras (catering, music, bearing, newspaper notice)
- Progressive disclosure: viewing → same venue radio, music → live musician → type
- Dependent field resets when parent toggled off
- AddOnOption reuse for all toggle rows
- Bearing as RadioGroup (family/professional/both)
- No upsell language — toggle design is inherently low-pressure

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../AdditionalServicesStep.stories.tsx        | 157 ++++++++
 .../AdditionalServicesStep.tsx                | 352 ++++++++++++++++++
 .../pages/AdditionalServicesStep/index.ts     |   5 +
 3 files changed, 514 insertions(+)
 create mode 100644 src/components/pages/AdditionalServicesStep/AdditionalServicesStep.stories.tsx
 create mode 100644 src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx
 create mode 100644 src/components/pages/AdditionalServicesStep/index.ts

diff --git a/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.stories.tsx b/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.stories.tsx
new file mode 100644
index 0000000..090a26c
--- /dev/null
+++ b/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.stories.tsx
@@ -0,0 +1,157 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { AdditionalServicesStep } from './AdditionalServicesStep';
+import type { AdditionalServicesStepValues } from './AdditionalServicesStep';
+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 defaultValues: AdditionalServicesStepValues = {
+  dressing: false,
+  viewing: false,
+  viewingSameVenue: null,
+  prayers: false,
+  funeralAnnouncement: true,
+  catering: false,
+  music: false,
+  liveMusician: false,
+  musicianType: null,
+  bearing: null,
+  newspaperNotice: false,
+};
+
+// ─── Meta ────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof AdditionalServicesStep> = {
+  title: 'Pages/AdditionalServicesStep',
+  component: AdditionalServicesStep,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AdditionalServicesStep>;
+
+// ─── Interactive (default) ──────────────────────────────────────────────────
+
+/** Full interactive flow with both sections */
+export const Default: Story = {
+  render: () => {
+    const [values, setValues] = useState<AdditionalServicesStepValues>({ ...defaultValues });
+    return (
+      <AdditionalServicesStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert(JSON.stringify(values, null, 2))}
+        onBack={() => alert('Back')}
+        onSaveAndExit={() => alert('Save')}
+        newspaperPrice={250}
+        musicianPrice={450}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Many options enabled ───────────────────────────────────────────────────
+
+/** Multiple services toggled on with sub-options visible */
+export const ManyOptionsEnabled: Story = {
+  render: () => {
+    const [values, setValues] = useState<AdditionalServicesStepValues>({
+      dressing: true,
+      viewing: true,
+      viewingSameVenue: 'yes',
+      prayers: false,
+      funeralAnnouncement: true,
+      catering: true,
+      music: true,
+      liveMusician: true,
+      musicianType: 'vocalist',
+      bearing: 'both',
+      newspaperNotice: true,
+    });
+    return (
+      <AdditionalServicesStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert('Continue')}
+        onBack={() => alert('Back')}
+        cateringPrice={850}
+        newspaperPrice={250}
+        musicianPrice={450}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Pre-planning ───────────────────────────────────────────────────────────
+
+/** Pre-planning variant */
+export const PrePlanning: Story = {
+  render: () => {
+    const [values, setValues] = useState<AdditionalServicesStepValues>({ ...defaultValues });
+    return (
+      <AdditionalServicesStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert('Continue')}
+        onBack={() => alert('Back')}
+        isPrePlanning
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Minimal (provider shows few options) ───────────────────────────────────
+
+/** Announcement only — minimal provider offerings */
+export const Minimal: Story = {
+  render: () => {
+    const [values, setValues] = useState<AdditionalServicesStepValues>({
+      ...defaultValues,
+      funeralAnnouncement: true,
+    });
+    return (
+      <AdditionalServicesStep
+        values={values}
+        onChange={setValues}
+        onContinue={() => alert('Continue')}
+        onBack={() => alert('Back')}
+        navigation={nav}
+      />
+    );
+  },
+};
diff --git a/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx b/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx
new file mode 100644
index 0000000..2813f41
--- /dev/null
+++ b/src/components/pages/AdditionalServicesStep/AdditionalServicesStep.tsx
@@ -0,0 +1,352 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+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 { Typography } from '../../atoms/Typography';
+import { Button } from '../../atoms/Button';
+import { Divider } from '../../atoms/Divider';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** Form values for the additional services step */
+export interface AdditionalServicesStepValues {
+  // Section 1: Complimentary inclusions
+  dressing: boolean;
+  viewing: boolean;
+  viewingSameVenue: 'yes' | 'no' | null;
+  prayers: boolean;
+  funeralAnnouncement: boolean;
+
+  // Section 2: Paid extras
+  catering: boolean;
+  music: boolean;
+  liveMusician: boolean;
+  musicianType: 'vocalist' | 'cellist' | 'other' | null;
+  bearing: 'family' | 'funeralHouse' | 'both' | null;
+  newspaperNotice: boolean;
+}
+
+/** Props for the AdditionalServicesStep page component */
+export interface AdditionalServicesStepProps {
+  /** Current form values */
+  values: AdditionalServicesStepValues;
+  /** Callback when any field value changes */
+  onChange: (values: AdditionalServicesStepValues) => 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 (undefined = POA) */
+  cateringPrice?: number;
+  /** Price for newspaper notice (undefined = POA) */
+  newspaperPrice?: number;
+  /** Price for live musician (undefined = 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 12 — Additional Services for the FA arrangement wizard.
+ *
+ * Merged from baseline steps 14 (optionals) and 15 (extras) per Rec #2.
+ * Two sections preserving the semantic distinction:
+ * 1. Complimentary inclusions (toggle on/off at no cost)
+ * 2. Paid extras (toggle with pricing or POA)
+ *
+ * Progressive disclosure: sub-options revealed when parent toggle is on.
+ * Toggle design is inherently low-pressure — no upsell language.
+ *
+ * Pure presentation component — props in, callbacks out.
+ *
+ * Spec: documentation/steps/steps/12_additional_services.yaml
+ */
+export const AdditionalServicesStep: React.FC<AdditionalServicesStepProps> = ({
+  values,
+  onChange,
+  onContinue,
+  onBack,
+  onSaveAndExit,
+  loading = false,
+  cateringPrice,
+  newspaperPrice,
+  musicianPrice,
+  isPrePlanning = false,
+  navigation,
+  progressStepper,
+  runningTotal,
+  hideHelpBar,
+  sx,
+}) => {
+  const handleToggle = (field: keyof AdditionalServicesStepValues, checked: boolean) => {
+    const next = { ...values, [field]: checked };
+    // Reset dependent fields when parent toggled off
+    if (field === 'viewing' && !checked) {
+      next.viewingSameVenue = null;
+    }
+    if (field === 'music' && !checked) {
+      next.liveMusician = false;
+      next.musicianType = null;
+    }
+    if (field === 'liveMusician' && !checked) {
+      next.musicianType = null;
+    }
+    onChange(next);
+  };
+
+  const handleFieldChange = <K extends keyof AdditionalServicesStepValues>(
+    field: K,
+    value: AdditionalServicesStepValues[K],
+  ) => {
+    onChange({ ...values, [field]: value });
+  };
+
+  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}>
+        Additional services
+      </Typography>
+
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+        {isPrePlanning
+          ? "These options can be finalised later. Toggle on the ones you're interested in."
+          : 'Choose which services to include in your plan.'}
+      </Typography>
+
+      <Box
+        component="form"
+        noValidate
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+          onContinue();
+        }}
+      >
+        {/* ─── Section 1: Complimentary inclusions ─── */}
+        <Paper variant="outlined" sx={{ p: 3, mb: 4 }}>
+          <Typography variant="h5" sx={{ mb: 0.5 }}>
+            Complimentary inclusions
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+            These items are included at no additional cost. You can choose to include or remove
+            them.
+          </Typography>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <AddOnOption
+              name="Dressing and preparation"
+              description="Professional dressing and preparation"
+              checked={values.dressing}
+              onChange={(c) => handleToggle('dressing', c)}
+            />
+
+            <AddOnOption
+              name="Viewing"
+              description="Arrange a viewing for family and friends"
+              checked={values.viewing}
+              onChange={(c) => handleToggle('viewing', c)}
+            />
+
+            <Collapse in={values.viewing}>
+              <Box sx={{ pl: 4, pt: 1 }}>
+                <FormControl component="fieldset" sx={{ display: 'block' }}>
+                  <FormLabel component="legend" sx={{ mb: 1 }}>
+                    Same venue as the service?
+                  </FormLabel>
+                  <RadioGroup
+                    value={values.viewingSameVenue ?? ''}
+                    onChange={(e) =>
+                      handleFieldChange(
+                        'viewingSameVenue',
+                        e.target.value as AdditionalServicesStepValues['viewingSameVenue'],
+                      )
+                    }
+                  >
+                    <FormControlLabel value="yes" control={<Radio />} label="Yes, same venue" />
+                    <FormControlLabel value="no" control={<Radio />} label="No, different venue" />
+                  </RadioGroup>
+                </FormControl>
+              </Box>
+            </Collapse>
+
+            <AddOnOption
+              name="Prayers or vigil"
+              description="Arrange prayers or vigil before the service"
+              checked={values.prayers}
+              onChange={(c) => handleToggle('prayers', c)}
+            />
+
+            <AddOnOption
+              name="Funeral announcement"
+              description="Complimentary funeral notice"
+              checked={values.funeralAnnouncement}
+              onChange={(c) => handleToggle('funeralAnnouncement', c)}
+            />
+          </Box>
+        </Paper>
+
+        {/* ─── Section 2: Paid extras ─── */}
+        <Paper variant="outlined" sx={{ p: 3, mb: 4 }}>
+          <Typography variant="h5" sx={{ mb: 0.5 }}>
+            Additional extras
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+            These items are available but may incur additional costs. Prices shown where available.
+          </Typography>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <AddOnOption
+              name="Catering"
+              description="Catering for after the service"
+              price={cateringPrice}
+              checked={values.catering}
+              onChange={(c) => handleToggle('catering', c)}
+            />
+
+            <AddOnOption
+              name="Music"
+              description="Music arrangements for the service"
+              checked={values.music}
+              onChange={(c) => handleToggle('music', c)}
+            />
+
+            <Collapse in={values.music}>
+              <Box sx={{ pl: 4, pt: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
+                <AddOnOption
+                  name="Live musician"
+                  description="A live musician to perform during the service"
+                  price={musicianPrice}
+                  checked={values.liveMusician}
+                  onChange={(c) => handleToggle('liveMusician', c)}
+                />
+
+                <Collapse in={values.liveMusician}>
+                  <Box sx={{ pl: 4, pt: 1 }}>
+                    <FormControl component="fieldset" sx={{ display: 'block' }}>
+                      <FormLabel component="legend" sx={{ mb: 1 }}>
+                        Musician type
+                      </FormLabel>
+                      <RadioGroup
+                        value={values.musicianType ?? ''}
+                        onChange={(e) =>
+                          handleFieldChange(
+                            'musicianType',
+                            e.target.value as AdditionalServicesStepValues['musicianType'],
+                          )
+                        }
+                      >
+                        <FormControlLabel value="vocalist" control={<Radio />} label="Vocalist" />
+                        <FormControlLabel value="cellist" control={<Radio />} label="Cellist" />
+                        <FormControlLabel value="other" control={<Radio />} label="Other" />
+                      </RadioGroup>
+                    </FormControl>
+                  </Box>
+                </Collapse>
+              </Box>
+            </Collapse>
+
+            {/* Coffin bearing */}
+            <Divider />
+            <FormControl component="fieldset" sx={{ display: 'block' }}>
+              <FormLabel component="legend" sx={{ mb: 1 }}>
+                Coffin bearing
+              </FormLabel>
+              <RadioGroup
+                value={values.bearing ?? ''}
+                onChange={(e) =>
+                  handleFieldChange(
+                    'bearing',
+                    e.target.value as AdditionalServicesStepValues['bearing'],
+                  )
+                }
+              >
+                <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>
+
+            <Divider />
+
+            <AddOnOption
+              name="Newspaper notice"
+              description="Paid newspaper death notice"
+              price={newspaperPrice}
+              checked={values.newspaperNotice}
+              onChange={(c) => handleToggle('newspaperNotice', c)}
+            />
+          </Box>
+        </Paper>
+
+        <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>
+  );
+};
+
+AdditionalServicesStep.displayName = 'AdditionalServicesStep';
+export default AdditionalServicesStep;
diff --git a/src/components/pages/AdditionalServicesStep/index.ts b/src/components/pages/AdditionalServicesStep/index.ts
new file mode 100644
index 0000000..23af28d
--- /dev/null
+++ b/src/components/pages/AdditionalServicesStep/index.ts
@@ -0,0 +1,5 @@
+export { AdditionalServicesStep, default } from './AdditionalServicesStep';
+export type {
+  AdditionalServicesStepProps,
+  AdditionalServicesStepValues,
+} from './AdditionalServicesStep';