Add SummaryStep, PaymentStep, ConfirmationStep (wizard steps 13-15)

SummaryStep (step 13):
- Accordion sections with edit IconButtons linking back to each step
- dl/dt/dd definition list for label-value pairs
- Total bar with prominent price display (aria-live)
- Share plan icon button, deposit display
- Pre-planning: "Save your plan" CTA; at-need: "Confirm" CTA

PaymentStep (step 14):
- Payment plan (full/deposit) shown before method (amount before how)
- ToggleButtonGroup for plan + method selection
- Card: PayWay iframe slot with placeholder; Bank: account details display
- Terms checkbox with service agreement + privacy links
- Security reassurance (lock icon, no-surprise copy)

ConfirmationStep (step 15):
- Terminal page — no back button, no progress indicator
- At-need: "submitted" + callback timeframe + arranger contact
- Pre-planning: "saved" + return-anytime + family-ready copy
- Muted success icon (not celebratory), next-steps link buttons
- VenueCard selected prop also staged (from step 7 work)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/pages/ConfirmationStep/ConfirmationStep.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfirmationStep } from './ConfirmationStep';
+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' },
+    ]}
+  />
+);
+
+// ─── Meta ────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof ConfirmationStep> = {
+  title: 'Pages/ConfirmationStep',
+  component: ConfirmationStep,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConfirmationStep>;
+
+// ─── At-need (default) ──────────────────────────────────────────────────────
+
+/** At-need confirmation — arranger will call */
+export const Default: Story = {
+  render: () => (
+    <ConfirmationStep
+      email="jane.smith@example.com"
+      phone="0412 345 678"
+      callbackTimeframe="within 2 hours"
+      onViewPlan={() => alert('View plan')}
+      nextSteps={[
+        { label: 'Start detailed arrangement', onClick: () => alert('Arrangement') },
+        { label: 'Go to dashboard', onClick: () => alert('Dashboard') },
+      ]}
+      navigation={nav}
+    />
+  ),
+};
+
+// ─── Pre-planning ───────────────────────────────────────────────────────────
+
+/** Pre-planning confirmation — plan saved, return anytime */
+export const PrePlanning: Story = {
+  render: () => (
+    <ConfirmationStep
+      isPrePlanning
+      email="jane.smith@example.com"
+      onViewPlan={() => alert('View plan')}
+      nextSteps={[{ label: 'Go to dashboard', onClick: () => alert('Dashboard') }]}
+      navigation={nav}
+    />
+  ),
+};
+
+// ─── Minimal ────────────────────────────────────────────────────────────────
+
+/** Minimal — no next steps, no view plan */
+export const Minimal: Story = {
+  render: () => <ConfirmationStep email="jane.smith@example.com" navigation={nav} />,
+};

src/components/pages/ConfirmationStep/ConfirmationStep.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { WizardLayout } from '../../templates/WizardLayout';
+import { Typography } from '../../atoms/Typography';
+import { Button } from '../../atoms/Button';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** Next step link shown on the confirmation page */
+export interface ConfirmationLink {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+/** Props for the ConfirmationStep page component */
+export interface ConfirmationStepProps {
+  /** Whether this is a pre-planning flow (different copy) */
+  isPrePlanning?: boolean;
+  /** User's email address (shown in confirmation text) */
+  email?: string;
+  /** User's phone number (shown in at-need confirmation) */
+  phone?: string;
+  /** Expected callback timeframe (at-need) */
+  callbackTimeframe?: string;
+  /** Navigation links to next steps */
+  nextSteps?: ConfirmationLink[];
+  /** Callback for "View your plan" */
+  onViewPlan?: () => void;
+  /** Navigation bar */
+  navigation?: React.ReactNode;
+  /** Hide the help bar */
+  hideHelpBar?: boolean;
+  /** MUI sx prop */
+  sx?: SxProps<Theme>;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * Step 15 — Confirmation / Plan View for the FA arrangement wizard.
+ *
+ * Terminal confirmation page. Different copy for at-need vs pre-planning.
+ * Confirming and orienting — not celebratory.
+ *
+ * At-need: "Your arrangement has been submitted" + callback info
+ * Pre-planning: "Your plan has been saved" + return-anytime info
+ *
+ * No progress indicator. No back button. Links to post-plan flows.
+ *
+ * Pure presentation component — props in, callbacks out.
+ *
+ * Spec: documentation/steps/steps/15_view.yaml
+ */
+export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({
+  isPrePlanning = false,
+  email,
+  phone,
+  callbackTimeframe = 'within 2 hours',
+  nextSteps = [],
+  onViewPlan,
+  navigation,
+  hideHelpBar,
+  sx,
+}) => {
+  return (
+    <WizardLayout variant="centered-form" navigation={navigation} hideHelpBar={hideHelpBar} sx={sx}>
+      <Box sx={{ textAlign: 'center', py: 4 }}>
+        {/* Success icon — muted, not celebratory */}
+        <CheckCircleOutlineIcon
+          sx={{
+            fontSize: 64,
+            color: 'var(--fa-color-brand-500)',
+            mb: 3,
+            opacity: 0.8,
+          }}
+          aria-hidden
+        />
+
+        {/* Heading */}
+        <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
+          {isPrePlanning ? 'Your plan has been saved' : 'Your arrangement has been submitted'}
+        </Typography>
+
+        {/* Body text */}
+        {isPrePlanning ? (
+          <Box sx={{ maxWidth: 480, mx: 'auto', mb: 4 }}>
+            <Typography variant="body1" color="text.secondary">
+              You can return and update it anytime.
+              {email && ` We've sent a copy to ${email}.`}
+            </Typography>
+            <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
+              When the time comes, your family can contact us and we&apos;ll have everything ready.
+            </Typography>
+          </Box>
+        ) : (
+          <Box sx={{ maxWidth: 480, mx: 'auto', mb: 4 }}>
+            <Typography variant="body1" color="text.secondary">
+              A funeral arranger will call you
+              {phone && ` on ${phone}`} {callbackTimeframe} to confirm the details.
+              {email && ` A confirmation has been sent to ${email}.`}
+            </Typography>
+            <Typography variant="body1" color="text.secondary" sx={{ mt: 2 }}>
+              If you need to make changes before then, call us on{' '}
+              <Box
+                component="a"
+                href="tel:1300000000"
+                sx={{
+                  color: 'var(--fa-color-text-brand)',
+                  textDecoration: 'underline',
+                  fontSize: 'inherit',
+                }}
+              >
+                1300 000 000
+              </Box>
+              .
+            </Typography>
+          </Box>
+        )}
+
+        {/* View plan CTA */}
+        {onViewPlan && (
+          <Button variant="contained" size="large" onClick={onViewPlan} sx={{ mb: 4 }}>
+            View your plan
+          </Button>
+        )}
+
+        {/* Next steps */}
+        {nextSteps.length > 0 && (
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5, alignItems: 'center' }}>
+            {nextSteps.map((link) => (
+              <Button
+                key={link.label}
+                variant="text"
+                color="secondary"
+                onClick={link.onClick}
+                href={link.href}
+              >
+                {link.label}
+              </Button>
+            ))}
+          </Box>
+        )}
+      </Box>
+    </WizardLayout>
+  );
+};
+
+ConfirmationStep.displayName = 'ConfirmationStep';
+export default ConfirmationStep;

src/components/pages/ConfirmationStep/index.ts

@@ -0,0 +1,2 @@
+export { ConfirmationStep, default } from './ConfirmationStep';
+export type { ConfirmationStepProps, ConfirmationLink } from './ConfirmationStep';

src/components/pages/PaymentStep/PaymentStep.stories.tsx

@@ -0,0 +1,184 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { PaymentStep } from './PaymentStep';
+import type { PaymentStepValues, PaymentStepErrors } from './PaymentStep';
+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: PaymentStepValues = {
+  paymentPlan: null,
+  paymentMethod: null,
+  termsAccepted: false,
+};
+
+// ─── Meta ────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof PaymentStep> = {
+  title: 'Pages/PaymentStep',
+  component: PaymentStep,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PaymentStep>;
+
+// ─── Interactive (default) ──────────────────────────────────────────────────
+
+/** Full interactive payment flow */
+export const Default: Story = {
+  render: () => {
+    const [values, setValues] = useState<PaymentStepValues>({ ...defaultValues });
+    const [errors, setErrors] = useState<PaymentStepErrors>({});
+
+    const handleConfirm = () => {
+      const newErrors: PaymentStepErrors = {};
+      if (!values.paymentPlan) newErrors.paymentPlan = 'Please choose a payment option.';
+      if (!values.paymentMethod) newErrors.paymentMethod = 'Please choose a payment method.';
+      if (!values.termsAccepted)
+        newErrors.termsAccepted = 'Please review and accept the service agreement to continue.';
+      setErrors(newErrors);
+      if (Object.keys(newErrors).length === 0) alert('Payment confirmed!');
+    };
+
+    return (
+      <PaymentStep
+        values={values}
+        onChange={(v) => {
+          setValues(v);
+          setErrors({});
+        }}
+        onConfirmPayment={handleConfirm}
+        onBack={() => alert('Back to summary')}
+        errors={errors}
+        totalPrice={9850}
+        depositAmount={2000}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Card selected ──────────────────────────────────────────────────────────
+
+/** Card payment selected — shows payment form placeholder */
+export const CardPayment: Story = {
+  render: () => {
+    const [values, setValues] = useState<PaymentStepValues>({
+      paymentPlan: 'full',
+      paymentMethod: 'Card',
+      termsAccepted: false,
+    });
+    return (
+      <PaymentStep
+        values={values}
+        onChange={setValues}
+        onConfirmPayment={() => alert('Confirm')}
+        onBack={() => alert('Back')}
+        totalPrice={9850}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Bank transfer selected ─────────────────────────────────────────────────
+
+/** Bank transfer selected — shows account details */
+export const BankTransfer: Story = {
+  render: () => {
+    const [values, setValues] = useState<PaymentStepValues>({
+      paymentPlan: 'deposit',
+      paymentMethod: 'Bank',
+      termsAccepted: true,
+    });
+    return (
+      <PaymentStep
+        values={values}
+        onChange={setValues}
+        onConfirmPayment={() => alert('Confirm')}
+        onBack={() => alert('Back')}
+        totalPrice={9850}
+        depositAmount={2000}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Validation errors ──────────────────────────────────────────────────────
+
+/** All errors showing */
+export const WithErrors: Story = {
+  render: () => {
+    const [values, setValues] = useState<PaymentStepValues>({ ...defaultValues });
+    return (
+      <PaymentStep
+        values={values}
+        onChange={setValues}
+        onConfirmPayment={() => {}}
+        errors={{
+          paymentPlan: 'Please choose a payment option.',
+          paymentMethod: 'Please choose a payment method.',
+          termsAccepted: 'Please review and accept the service agreement to continue.',
+        }}
+        totalPrice={9850}
+        navigation={nav}
+      />
+    );
+  },
+};
+
+// ─── Processing ─────────────────────────────────────────────────────────────
+
+/** Payment processing */
+export const Processing: Story = {
+  render: () => {
+    const [values, setValues] = useState<PaymentStepValues>({
+      paymentPlan: 'full',
+      paymentMethod: 'Card',
+      termsAccepted: true,
+    });
+    return (
+      <PaymentStep
+        values={values}
+        onChange={setValues}
+        onConfirmPayment={() => {}}
+        loading
+        totalPrice={9850}
+        navigation={nav}
+      />
+    );
+  },
+};

src/components/pages/PaymentStep/PaymentStep.tsx

@@ -0,0 +1,332 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import type { SxProps, Theme } from '@mui/material/styles';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import { WizardLayout } from '../../templates/WizardLayout';
+import { ToggleButtonGroup } from '../../atoms/ToggleButtonGroup';
+import { Collapse } from '../../atoms/Collapse';
+import { Typography } from '../../atoms/Typography';
+import { Button } from '../../atoms/Button';
+import { Divider } from '../../atoms/Divider';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** Payment plan choice */
+export type PaymentPlan = 'full' | 'deposit' | null;
+
+/** Payment method choice */
+export type PaymentMethod = 'Card' | 'Bank' | null;
+
+/** Form values for the payment step */
+export interface PaymentStepValues {
+  /** Full payment or deposit */
+  paymentPlan: PaymentPlan;
+  /** Card or bank transfer */
+  paymentMethod: PaymentMethod;
+  /** Terms accepted */
+  termsAccepted: boolean;
+}
+
+/** Field-level error messages */
+export interface PaymentStepErrors {
+  paymentPlan?: string;
+  paymentMethod?: string;
+  termsAccepted?: string;
+  card?: string;
+}
+
+/** Props for the PaymentStep page component */
+export interface PaymentStepProps {
+  /** Current form values */
+  values: PaymentStepValues;
+  /** Callback when any field value changes */
+  onChange: (values: PaymentStepValues) => void;
+  /** Callback when Confirm Payment is clicked */
+  onConfirmPayment: () => void;
+  /** Callback for back navigation */
+  onBack?: () => void;
+  /** Field-level validation errors */
+  errors?: PaymentStepErrors;
+  /** Whether the button is in a loading/processing state */
+  loading?: boolean;
+  /** Total amount */
+  totalPrice: number;
+  /** Deposit amount */
+  depositAmount?: number;
+  /** Bank account details for transfer */
+  bankDetails?: {
+    accountName: string;
+    bsb: string;
+    accountNumber: string;
+    reference?: string;
+  };
+  /** Card payment iframe slot (PayWay integration) */
+  cardFormSlot?: React.ReactNode;
+  /** Navigation bar */
+  navigation?: React.ReactNode;
+  /** Progress stepper */
+  progressStepper?: React.ReactNode;
+  /** Hide the help bar */
+  hideHelpBar?: boolean;
+  /** MUI sx prop */
+  sx?: SxProps<Theme>;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * Step 14 — Payment for the FA arrangement wizard.
+ *
+ * Collect payment via credit card or bank transfer. Supports full
+ * payment or deposit. Hidden for pre-planning users.
+ *
+ * Payment plan shown before method so users know the amount first.
+ * Card details via PayWay iframe (slot). Bank transfer shows account info.
+ *
+ * Pure presentation component — props in, callbacks out.
+ *
+ * Spec: documentation/steps/steps/14_payment.yaml
+ */
+export const PaymentStep: React.FC<PaymentStepProps> = ({
+  values,
+  onChange,
+  onConfirmPayment,
+  onBack,
+  errors,
+  loading = false,
+  totalPrice,
+  depositAmount = 2000,
+  bankDetails = {
+    accountName: 'Funeral Arranger Services Pty Ltd',
+    bsb: '112-879',
+    accountNumber: '481 449 385',
+  },
+  cardFormSlot,
+  navigation,
+  progressStepper,
+  hideHelpBar,
+  sx,
+}) => {
+  const payingAmount = values.paymentPlan === 'deposit' ? depositAmount : totalPrice;
+
+  return (
+    <WizardLayout
+      variant="centered-form"
+      navigation={navigation}
+      progressStepper={progressStepper}
+      showBackLink={!!onBack}
+      backLabel="Back"
+      onBack={onBack}
+      hideHelpBar={hideHelpBar}
+      sx={sx}
+    >
+      {/* Page heading */}
+      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+        Payment
+      </Typography>
+
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 4 }}>
+        <LockOutlinedIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+        <Typography variant="body2" color="text.secondary">
+          Your payment is processed securely. You won&apos;t be charged more than the total shown.
+        </Typography>
+      </Box>
+
+      {/* ─── Amount display ─── */}
+      <Paper
+        elevation={2}
+        sx={{
+          p: 3,
+          mb: 4,
+          textAlign: 'center',
+          borderRadius: 2,
+        }}
+      >
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 0.5 }}>
+          {values.paymentPlan === 'deposit' ? 'Deposit amount' : 'Total due'}
+        </Typography>
+        <Typography variant="display3" color="primary" aria-live="polite" aria-atomic="true">
+          ${payingAmount.toLocaleString('en-AU')}
+        </Typography>
+        {values.paymentPlan === 'deposit' && (
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+            Remaining balance: ${(totalPrice - depositAmount).toLocaleString('en-AU')}
+          </Typography>
+        )}
+      </Paper>
+
+      <Box
+        component="form"
+        noValidate
+        onSubmit={(e: React.FormEvent) => {
+          e.preventDefault();
+          onConfirmPayment();
+        }}
+      >
+        {/* ─── Payment plan ─── */}
+        <Box sx={{ mb: 4 }}>
+          <ToggleButtonGroup
+            label="Payment option"
+            options={[
+              {
+                value: 'full',
+                label: 'Pay in full',
+                description: `Pay $${totalPrice.toLocaleString('en-AU')} now`,
+              },
+              {
+                value: 'deposit',
+                label: 'Pay a deposit',
+                description: `Pay $${depositAmount.toLocaleString('en-AU')} now, balance arranged with provider`,
+              },
+            ]}
+            value={values.paymentPlan}
+            onChange={(v) => onChange({ ...values, paymentPlan: v as PaymentPlan })}
+            error={!!errors?.paymentPlan}
+            helperText={errors?.paymentPlan}
+            required
+            fullWidth
+          />
+        </Box>
+
+        {/* ─── Payment method ─── */}
+        <Box sx={{ mb: 3 }}>
+          <ToggleButtonGroup
+            label="Payment method"
+            options={[
+              { value: 'Card', label: 'Credit or debit card' },
+              { value: 'Bank', label: 'Bank transfer' },
+            ]}
+            value={values.paymentMethod}
+            onChange={(v) => onChange({ ...values, paymentMethod: v as PaymentMethod })}
+            error={!!errors?.paymentMethod}
+            helperText={errors?.paymentMethod}
+            required
+            fullWidth
+          />
+        </Box>
+
+        {/* ─── Card form (PayWay iframe slot) ─── */}
+        <Collapse in={values.paymentMethod === 'Card'}>
+          <Box sx={{ mb: 3, minHeight: 200 }} role="region" aria-label="Payment details">
+            {cardFormSlot || (
+              <Paper
+                variant="outlined"
+                sx={{
+                  p: 3,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  minHeight: 200,
+                  bgcolor: 'var(--fa-color-surface-subtle)',
+                }}
+              >
+                <Typography variant="body2" color="text.secondary">
+                  Secure card payment form will appear here
+                </Typography>
+              </Paper>
+            )}
+            {errors?.card && (
+              <Typography variant="body2" color="error" sx={{ mt: 1 }} role="alert">
+                {errors.card}
+              </Typography>
+            )}
+          </Box>
+        </Collapse>
+
+        {/* ─── Bank transfer details ─── */}
+        <Collapse in={values.paymentMethod === 'Bank'}>
+          <Paper
+            variant="outlined"
+            sx={{ p: 3, mb: 3 }}
+            role="region"
+            aria-label="Bank transfer details"
+          >
+            <Typography variant="h5" sx={{ mb: 2 }}>
+              Bank transfer details
+            </Typography>
+            <Box component="dl" sx={{ m: 0 }}>
+              {[
+                { label: 'Account name', value: bankDetails.accountName },
+                { label: 'BSB', value: bankDetails.bsb },
+                { label: 'Account number', value: bankDetails.accountNumber },
+              ].map(({ label, value }) => (
+                <Box key={label} sx={{ display: 'flex', justifyContent: 'space-between', py: 1 }}>
+                  <Typography component="dt" variant="body2" color="text.secondary">
+                    {label}
+                  </Typography>
+                  <Typography component="dd" variant="body1" sx={{ m: 0, fontFamily: 'monospace' }}>
+                    {value}
+                  </Typography>
+                </Box>
+              ))}
+            </Box>
+            {bankDetails.reference && (
+              <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+                Reference: {bankDetails.reference}
+              </Typography>
+            )}
+          </Paper>
+        </Collapse>
+
+        {/* ─── Terms checkbox ─── */}
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={values.termsAccepted}
+              onChange={(e) => onChange({ ...values, termsAccepted: e.target.checked })}
+            />
+          }
+          label={
+            <Typography variant="body2">
+              I agree to the{' '}
+              <Box
+                component="a"
+                href="#"
+                sx={{
+                  color: 'var(--fa-color-text-brand)',
+                  textDecoration: 'underline',
+                  fontSize: 'inherit',
+                }}
+              >
+                service agreement
+              </Box>{' '}
+              and{' '}
+              <Box
+                component="a"
+                href="#"
+                sx={{
+                  color: 'var(--fa-color-text-brand)',
+                  textDecoration: 'underline',
+                  fontSize: 'inherit',
+                }}
+              >
+                privacy policy
+              </Box>
+            </Typography>
+          }
+          sx={{ mb: 1, alignItems: 'flex-start', '& .MuiCheckbox-root': { pt: 0.5 } }}
+        />
+        {errors?.termsAccepted && (
+          <Typography variant="body2" color="error" sx={{ mb: 2, ml: 4 }} role="alert">
+            {errors.termsAccepted}
+          </Typography>
+        )}
+
+        <Divider sx={{ my: 3 }} />
+
+        {/* CTA */}
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button type="submit" variant="contained" size="large" loading={loading}>
+            Confirm payment
+          </Button>
+        </Box>
+      </Box>
+    </WizardLayout>
+  );
+};
+
+PaymentStep.displayName = 'PaymentStep';
+export default PaymentStep;

src/components/pages/PaymentStep/index.ts

@@ -0,0 +1,8 @@
+export { PaymentStep, default } from './PaymentStep';
+export type {
+  PaymentStepProps,
+  PaymentStepValues,
+  PaymentStepErrors,
+  PaymentPlan,
+  PaymentMethod,
+} from './PaymentStep';

src/components/pages/SummaryStep/SummaryStep.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SummaryStep } from './SummaryStep';
+import type { SummarySection } from './SummaryStep';
+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 sampleSections: SummarySection[] = [
+  {
+    id: 'provider',
+    title: 'Funeral Provider',
+    editStepId: 'providers',
+    items: [
+      { label: 'Provider', value: 'H. Parsons Funeral Directors' },
+      { label: 'Package', value: 'Essential Service Package', price: 4950 },
+    ],
+  },
+  {
+    id: 'venue',
+    title: 'Service Venue',
+    editStepId: 'venue',
+    items: [
+      { label: 'Venue', value: 'West Chapel, Strathfield', price: 900 },
+      { label: 'Photo presentation', value: 'Included', price: 150 },
+      { label: 'Livestream', value: 'Included', price: 200 },
+    ],
+  },
+  {
+    id: 'crematorium',
+    title: 'Crematorium',
+    editStepId: 'crematorium',
+    items: [
+      { label: 'Crematorium', value: 'Warrill Park Crematorium', price: 850 },
+      { label: 'Following hearse', value: 'Yes' },
+    ],
+  },
+  {
+    id: 'coffin',
+    title: 'Coffin',
+    editStepId: 'coffins',
+    items: [
+      { label: 'Coffin', value: 'Cedar Classic', price: 2800 },
+      { label: 'Handles', value: 'Brass Bar Handle', price: 0 },
+      { label: 'Lining', value: 'White Satin', price: 0 },
+    ],
+  },
+  {
+    id: 'services',
+    title: 'Additional Services',
+    editStepId: 'additional_services',
+    items: [
+      { label: 'Funeral announcement', value: 'Included' },
+      { label: 'Bearing', value: 'Family and friends' },
+    ],
+  },
+];
+
+// ─── Meta ────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof SummaryStep> = {
+  title: 'Pages/SummaryStep',
+  component: SummaryStep,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SummaryStep>;
+
+// ─── At-need (default) ──────────────────────────────────────────────────────
+
+/** Full summary for at-need flow */
+export const Default: Story = {
+  render: () => (
+    <SummaryStep
+      sections={sampleSections}
+      totalPrice={9850}
+      depositAmount={2000}
+      onConfirm={() => alert('Confirmed — proceed to payment')}
+      onBack={() => alert('Back')}
+      onSaveAndExit={() => alert('Save')}
+      onEdit={(stepId) => alert(`Edit: ${stepId}`)}
+      onShare={() => alert('Share plan')}
+      navigation={nav}
+    />
+  ),
+};
+
+// ─── Pre-planning ───────────────────────────────────────────────────────────
+
+/** Pre-planning variant — "Save your plan" CTA, no payment */
+export const PrePlanning: Story = {
+  render: () => (
+    <SummaryStep
+      sections={sampleSections}
+      totalPrice={9850}
+      onConfirm={() => alert('Plan saved')}
+      onBack={() => alert('Back')}
+      onEdit={(stepId) => alert(`Edit: ${stepId}`)}
+      onShare={() => alert('Share plan')}
+      isPrePlanning
+      navigation={nav}
+    />
+  ),
+};
+
+// ─── Loading ────────────────────────────────────────────────────────────────
+
+/** Confirm button loading */
+export const Loading: Story = {
+  render: () => (
+    <SummaryStep
+      sections={sampleSections}
+      totalPrice={9850}
+      onConfirm={() => {}}
+      loading
+      navigation={nav}
+    />
+  ),
+};

src/components/pages/SummaryStep/SummaryStep.tsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Paper from '@mui/material/Paper';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { WizardLayout } from '../../templates/WizardLayout';
+import { Typography } from '../../atoms/Typography';
+import { Button } from '../../atoms/Button';
+import { IconButton } from '../../atoms/IconButton';
+import { Divider } from '../../atoms/Divider';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+/** A single line item in the summary */
+export interface SummaryLineItem {
+  label: string;
+  value: string;
+  price?: number;
+}
+
+/** A section in the summary (e.g. Provider, Venue, Coffin) */
+export interface SummarySection {
+  id: string;
+  title: string;
+  items: SummaryLineItem[];
+  /** Step ID to navigate back to for editing */
+  editStepId?: string;
+}
+
+/** Props for the SummaryStep page component */
+export interface SummaryStepProps {
+  /** Summary sections */
+  sections: SummarySection[];
+  /** Total cost */
+  totalPrice: number;
+  /** Deposit amount (if applicable) */
+  depositAmount?: number;
+  /** Callback when Confirm is clicked */
+  onConfirm: () => void;
+  /** Callback for back navigation */
+  onBack?: () => void;
+  /** Callback for save-and-exit */
+  onSaveAndExit?: () => void;
+  /** Callback when edit is clicked on a section */
+  onEdit?: (stepId: string) => void;
+  /** Callback for sharing the plan */
+  onShare?: () => void;
+  /** Whether the Confirm button is in a loading state */
+  loading?: boolean;
+  /** Whether this is a pre-planning flow */
+  isPrePlanning?: boolean;
+  /** Navigation bar */
+  navigation?: React.ReactNode;
+  /** Progress stepper */
+  progressStepper?: React.ReactNode;
+  /** Hide the help bar */
+  hideHelpBar?: boolean;
+  /** MUI sx prop */
+  sx?: SxProps<Theme>;
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * Step 13 — Summary / Review for the FA arrangement wizard.
+ *
+ * Complete summary of the funeral plan with all selections and pricing.
+ * Accordion sections with edit links back to each step. Total bar at bottom.
+ *
+ * For pre-planning: CTA is "Save your plan" instead of "Confirm".
+ * For at-need: CTA is "Confirm and continue to payment".
+ *
+ * Pure presentation component — props in, callbacks out.
+ *
+ * Spec: documentation/steps/steps/13_summary.yaml
+ */
+export const SummaryStep: React.FC<SummaryStepProps> = ({
+  sections,
+  totalPrice,
+  depositAmount,
+  onConfirm,
+  onBack,
+  onSaveAndExit,
+  onEdit,
+  onShare,
+  loading = false,
+  isPrePlanning = false,
+  navigation,
+  progressStepper,
+  hideHelpBar,
+  sx,
+}) => {
+  return (
+    <WizardLayout
+      variant="centered-form"
+      navigation={navigation}
+      progressStepper={progressStepper}
+      showBackLink={!!onBack}
+      backLabel="Back"
+      onBack={onBack}
+      hideHelpBar={hideHelpBar}
+      sx={sx}
+    >
+      {/* Header with share */}
+      <Box
+        sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}
+      >
+        <Typography variant="display3" component="h1" tabIndex={-1}>
+          Review your plan
+        </Typography>
+        {onShare && (
+          <IconButton aria-label="Share this plan via email" onClick={onShare} size="medium">
+            <ShareOutlinedIcon />
+          </IconButton>
+        )}
+      </Box>
+
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
+        Check everything looks right before confirming.
+      </Typography>
+
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
+        You can edit any section by tapping the edit icon.
+      </Typography>
+
+      {/* ─── Summary sections ─── */}
+      {sections.map((section) => (
+        <Accordion
+          key={section.id}
+          defaultExpanded
+          disableGutters
+          elevation={0}
+          sx={{
+            border: 1,
+            borderColor: 'divider',
+            borderRadius: '8px !important',
+            mb: 2,
+            '&:before': { display: 'none' },
+            overflow: 'hidden',
+          }}
+        >
+          <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ px: 3, py: 1 }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', flex: 1, gap: 1 }}>
+              <Typography variant="h5" sx={{ flex: 1 }}>
+                {section.title}
+              </Typography>
+              {section.editStepId && onEdit && (
+                <IconButton
+                  aria-label={`Edit ${section.title}`}
+                  size="small"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onEdit(section.editStepId!);
+                  }}
+                >
+                  <EditOutlinedIcon fontSize="small" />
+                </IconButton>
+              )}
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails sx={{ px: 3, pb: 3 }}>
+            <Box component="dl" sx={{ m: 0 }}>
+              {section.items.map((item, i) => (
+                <Box
+                  key={i}
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    py: 1,
+                    borderBottom: i < section.items.length - 1 ? 1 : 0,
+                    borderColor: 'divider',
+                  }}
+                >
+                  <Box>
+                    <Typography component="dt" variant="body2" color="text.secondary">
+                      {item.label}
+                    </Typography>
+                    <Typography component="dd" variant="body1" sx={{ m: 0 }}>
+                      {item.value}
+                    </Typography>
+                  </Box>
+                  {item.price != null && (
+                    <Typography
+                      variant="body1"
+                      color="primary"
+                      sx={{ ml: 2, whiteSpace: 'nowrap' }}
+                    >
+                      ${item.price.toLocaleString('en-AU')}
+                    </Typography>
+                  )}
+                </Box>
+              ))}
+            </Box>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+
+      {/* ─── Total bar ─── */}
+      <Paper
+        elevation={2}
+        sx={{
+          p: 3,
+          mt: 3,
+          mb: 4,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          borderRadius: 2,
+        }}
+      >
+        <Box>
+          <Typography variant="h5">Total cost</Typography>
+          {depositAmount != null && !isPrePlanning && (
+            <Typography variant="body2" color="text.secondary">
+              Deposit: ${depositAmount.toLocaleString('en-AU')}
+            </Typography>
+          )}
+        </Box>
+        <Typography variant="display3" color="primary" aria-live="polite" aria-atomic="true">
+          ${totalPrice.toLocaleString('en-AU')}
+        </Typography>
+      </Paper>
+
+      {/* Payment reassurance */}
+      {!isPrePlanning && (
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2, textAlign: 'center' }}>
+          You won&apos;t be charged until you complete the next step.
+        </Typography>
+      )}
+
+      <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 variant="contained" size="large" loading={loading} onClick={onConfirm}>
+          {isPrePlanning ? 'Save your plan' : 'Confirm'}
+        </Button>
+      </Box>
+    </WizardLayout>
+  );
+};
+
+SummaryStep.displayName = 'SummaryStep';
+export default SummaryStep;

src/components/pages/SummaryStep/index.ts

@@ -0,0 +1,2 @@
+export { SummaryStep, default } from './SummaryStep';
+export type { SummaryStepProps, SummarySection, SummaryLineItem } from './SummaryStep';