DateTimeStep: rework date preferences, remove service tradition, fix inputs

- Heading: display3 for centered-form consistency with IntroStep
- Name fields: swap MUI TextField for Input atom (external label, no clipping)
- Date preferences: single date → up to 3 preferred dates with progressive
  disclosure ("+ Add another date" link, × remove on 2nd/3rd)
- Remove service style/religion field — tradition flows from provider/package
  selection and is confirmed on summary step
- Add dividers between question sections for visual separation
- Fix spacing between sections (mb: 5, mb: 3 on headings)
- FormLabels styled with fontWeight 600 for readability
- Updated types: preferredDates: string[] replaces funeralDateSpecific,
  removed religion field

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

src/components/pages/DateTimeStep/DateTimeStep.stories.tsx

@@ -38,9 +38,8 @@ const defaultValues: DateTimeStepValues = {
   firstName: '',
   surname: '',
   funeralDate: 'asap',
-  funeralDateSpecific: '',
+  preferredDates: [],
   funeralTime: 'no_preference',
-  religion: null,
 };
 
 // ─── Meta ────────────────────────────────────────────────────────────────────
@@ -71,8 +70,8 @@ export const Default: Story = {
         newErrors.firstName = 'We need their first name for the funeral arrangements.';
       if (!values.surname)
         newErrors.surname = 'We need their surname for the funeral arrangements.';
-      if (values.funeralDate === 'specific' && !values.funeralDateSpecific)
+      if (values.funeralDate === 'specific' && !values.preferredDates[0])
-        newErrors.funeralDateSpecific = 'Please select a preferred date.';
+        newErrors.preferredDates = 'Please select at least one preferred date.';
       setErrors(newErrors);
       if (Object.keys(newErrors).length === 0)
         alert(`Continue: ${values.firstName} ${values.surname}`);
@@ -116,16 +115,17 @@ export const PrePlanning: Story = {
   },
 };
 
-// ─── Specific date selected ─────────────────────────────────────────────────
+// ─── Specific dates selected ───────────────────────────────────────────────
 
-/** Date picker revealed when "specific date" is selected */
+/** Multiple preferred dates entered */
-export const SpecificDate: Story = {
+export const SpecificDates: Story = {
   render: () => {
     const [values, setValues] = useState<DateTimeStepValues>({
       ...defaultValues,
       firstName: 'Margaret',
       surname: 'Wilson',
       funeralDate: 'specific',
+      preferredDates: ['2026-04-05', '2026-04-08'],
       funeralTime: 'morning',
     });
     return (
@@ -141,9 +141,9 @@ export const SpecificDate: Story = {
   },
 };
 
-// ─── Name fields only (cremation/burial only) ──────────────────────────────
+// ─── Name fields only ──────────────────────────────────────────────────────
 
-/** Scheduling hidden — only name fields shown (e.g. cremation-only at-need) */
+/** Scheduling hidden — only name fields shown */
 export const NameFieldsOnly: Story = {
   render: () => {
     const [values, setValues] = useState<DateTimeStepValues>({ ...defaultValues });
@@ -193,7 +193,6 @@ export const Loading: Story = {
       surname: 'Wilson',
       funeralDate: 'asap',
       funeralTime: 'morning',
-      religion: 'Anglican',
     });
     return (
       <DateTimeStep

src/components/pages/DateTimeStep/DateTimeStep.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
 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 IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
 import type { SxProps, Theme } from '@mui/material/styles';
 import { WizardLayout } from '../../templates/WizardLayout';
+import { Input } from '../../atoms/Input';
 import { Collapse } from '../../atoms/Collapse';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
+import { Link } from '../../atoms/Link';
 import { Divider } from '../../atoms/Divider';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -30,12 +33,10 @@ export interface DateTimeStepValues {
   surname: string;
   /** Date preference (ASAP or specific) */
   funeralDate: FuneralDatePref;
-  /** Specific date string (ISO format) when funeralDate is "specific" */
+  /** Preferred dates (up to 3) when funeralDate is "specific" */
-  funeralDateSpecific: string;
+  preferredDates: string[];
   /** Time-of-day preference */
   funeralTime: FuneralTimePref;
-  /** Service style / religion preference */
-  religion: string | null;
 }
 
 /** Field-level error messages */
@@ -43,8 +44,7 @@ export interface DateTimeStepErrors {
   firstName?: string;
   surname?: string;
   funeralDate?: string;
-  funeralDateSpecific?: string;
+  preferredDates?: string;
-  funeralTime?: string;
 }
 
 /** Props for the DateTimeStep page component */
@@ -69,8 +69,6 @@ export interface DateTimeStepProps {
   showNameFields?: boolean;
   /** Whether scheduling fields should be shown */
   showScheduling?: boolean;
-  /** Available religion/service style options */
-  religionOptions?: string[];
   /** Navigation bar — passed through to WizardLayout */
   navigation?: React.ReactNode;
   /** Hide the help bar */
@@ -81,30 +79,9 @@ export interface DateTimeStepProps {
 
 // ─── Constants ───────────────────────────────────────────────────────────────
 
-const DEFAULT_RELIGIONS = [
+const MAX_PREFERRED_DATES = 3;
-  'No Religion',
+
-  'Civil Celebrant',
+const DATE_LABELS = ['First preference', 'Second preference', 'Third preference'];
-  'Aboriginal',
-  'Anglican',
-  'Baptist',
-  'Buddhism',
-  'Catholic',
-  'Christian',
-  'Hinduism',
-  'Indigenous',
-  'Islam',
-  'Judaism',
-  'Lutheran',
-  'Oriental Orthodox',
-  'Eastern Orthodox',
-  'Greek Orthodox',
-  'Russian Orthodox',
-  'Serbian Orthodox',
-  'Pentecostal',
-  'Presbyterian',
-  'Sikhism',
-  'Uniting Church',
-];
 
 // ─── Component ───────────────────────────────────────────────────────────────
 
@@ -115,11 +92,13 @@ const DEFAULT_RELIGIONS = [
  * Two logical sections: "About the person" and "Service timing".
  * Each wrapped in fieldset/legend for screen reader structure.
  *
- * Field visibility is controlled by props (showNameFields, showScheduling)
+ * Date preferences support up to 3 preferred dates via progressive
- * since it depends on funeral type and pre-planning status.
+ * disclosure ("+ Add another date" link).
+ *
+ * Service tradition (religion) is NOT captured here — it flows through
+ * from provider/package selection and is confirmed on the summary step.
  *
  * Grief-sensitive labels: "Their first name" not "Deceased First Name".
- * Pre-planning copy: "About the person" (no "who died").
  *
  * Pure presentation component — props in, callbacks out.
  *
@@ -136,7 +115,6 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
   isAtNeed = true,
   showNameFields = true,
   showScheduling = true,
-  religionOptions = DEFAULT_RELIGIONS,
   navigation,
   hideHelpBar,
   sx,
@@ -148,12 +126,31 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
     onChange({ ...values, [field]: value });
   };
 
+  const handleDateChange = (index: number, value: string) => {
+    const next = [...values.preferredDates];
+    next[index] = value;
+    onChange({ ...values, preferredDates: next });
+  };
+
+  const handleAddDate = () => {
+    if (values.preferredDates.length < MAX_PREFERRED_DATES) {
+      onChange({ ...values, preferredDates: [...values.preferredDates, ''] });
+    }
+  };
+
+  const handleRemoveDate = (index: number) => {
+    const next = values.preferredDates.filter((_, i) => i !== index);
+    onChange({ ...values, preferredDates: next.length === 0 ? [''] : next });
+  };
+
   const personSectionHeading = isAtNeed ? 'About the person who has passed' : 'About the person';
 
   const schedulingHeading = isAtNeed
     ? 'When are you hoping to have the service?'
     : 'When would you like the service?';
 
+  const minDate = new Date().toISOString().split('T')[0];
+
   return (
     <WizardLayout
       variant="centered-form"
@@ -169,11 +166,11 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
         A few important details
       </Typography>
 
-      {!isAtNeed && (
+      <Typography variant="body1" color="text.secondary" sx={{ mb: 5 }}>
-        <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+        {isAtNeed
-          If you&apos;re not sure about dates yet, that&apos;s fine. You can update this later.
+          ? 'We just need a few details to help arrange the service.'
-        </Typography>
+          : "If you're not sure about dates yet, that's fine. You can update this later."}
-      )}
+      </Typography>
 
       <Box
         component="form"
@@ -186,8 +183,8 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
       >
         {/* ─── Section 1: About the person ─── */}
         {showNameFields && (
-          <Box component="fieldset" sx={{ border: 0, m: 0, p: 0, mb: 4 }}>
+          <Box component="fieldset" sx={{ border: 0, m: 0, p: 0, mb: 2 }}>
-            <Typography component="legend" variant="h5" sx={{ mb: 2.5 }}>
+            <Typography component="legend" variant="h5" sx={{ mb: 3 }}>
               {personSectionHeading}
             </Typography>
 
@@ -195,12 +192,10 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
               sx={{
                 display: 'flex',
                 flexDirection: { xs: 'column', sm: 'row' },
-                gap: 2,
+                gap: 2.5,
-                mb: 2,
-                pt: 0.5,
               }}
             >
-              <TextField
+              <Input
                 label="Their first name"
                 value={values.firstName}
                 onChange={(e) => handleFieldChange('firstName', e.target.value)}
@@ -210,7 +205,7 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
                 fullWidth
                 required
               />
-              <TextField
+              <Input
                 label="Their surname"
                 value={values.surname}
                 onChange={(e) => handleFieldChange('surname', e.target.value)}
@@ -224,53 +219,113 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
           </Box>
         )}
 
+        {showNameFields && showScheduling && <Divider sx={{ my: 4 }} />}
+
         {/* ─── Section 2: Scheduling ─── */}
         {showScheduling && (
-          <Box component="fieldset" sx={{ border: 0, m: 0, p: 0, mb: 4 }}>
+          <Box component="fieldset" sx={{ border: 0, m: 0, p: 0, mb: 5 }}>
-            <Typography component="legend" variant="h5" sx={{ mb: 2.5 }}>
+            <Typography component="legend" variant="h5" sx={{ mb: 3 }}>
               {schedulingHeading}
             </Typography>
 
             {/* Date preference */}
             <FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}>
-              <FormLabel component="legend" sx={{ mb: 1 }}>
+              <FormLabel
+                component="legend"
+                sx={{
+                  mb: 1.5,
+                  color: 'text.primary',
+                  fontWeight: 600,
+                  '&.Mui-focused': { color: 'text.primary' },
+                }}
+              >
                 Preferred timing
               </FormLabel>
               <RadioGroup
                 value={values.funeralDate ?? ''}
-                onChange={(e) =>
+                onChange={(e) => {
-                  handleFieldChange('funeralDate', e.target.value as FuneralDatePref)
+                  const pref = e.target.value as FuneralDatePref;
-                }
+                  onChange({
+                    ...values,
+                    funeralDate: pref,
+                    // Initialise with one empty date slot when switching to specific
+                    preferredDates:
+                      pref === 'specific' && values.preferredDates.length === 0
+                        ? ['']
+                        : values.preferredDates,
+                  });
+                }}
               >
-                <FormControlLabel value="asap" control={<Radio />} label="As soon as possible" />
+                <FormControlLabel
+                  value="asap"
+                  control={<Radio />}
+                  label="As soon as possible"
+                  sx={{ mb: 0.5 }}
+                />
                 <FormControlLabel
                   value="specific"
                   control={<Radio />}
-                  label="I have a specific date in mind"
+                  label="I have a preferred date"
                 />
               </RadioGroup>
             </FormControl>
 
-            {/* Specific date — progressive disclosure */}
+            {/* Preferred dates — progressive disclosure, up to 3 */}
             <Collapse in={values.funeralDate === 'specific'}>
-              <TextField
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3, pl: 4 }}>
-                label="Preferred date"
+                {values.preferredDates.map((date, index) => (
-                type="date"
+                  <Box key={index} sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
-                value={values.funeralDateSpecific}
+                    <TextField
-                onChange={(e) => handleFieldChange('funeralDateSpecific', e.target.value)}
+                      label={DATE_LABELS[index] ?? `Preference ${index + 1}`}
-                error={!!errors?.funeralDateSpecific}
+                      type="date"
-                helperText={errors?.funeralDateSpecific}
+                      value={date}
-                InputLabelProps={{ shrink: true }}
+                      onChange={(e) => handleDateChange(index, e.target.value)}
-                inputProps={{ min: new Date().toISOString().split('T')[0] }}
+                      error={index === 0 && !!errors?.preferredDates}
-                fullWidth
+                      helperText={index === 0 ? errors?.preferredDates : undefined}
-                required
+                      InputLabelProps={{ shrink: true }}
-                sx={{ mb: 3 }}
+                      inputProps={{ min: minDate }}
-              />
+                      fullWidth
+                      required={index === 0}
+                    />
+                    {index > 0 && (
+                      <IconButton
+                        onClick={() => handleRemoveDate(index)}
+                        aria-label={`Remove ${DATE_LABELS[index]?.toLowerCase() ?? 'date'}`}
+                        sx={{ mt: 1, color: 'text.secondary' }}
+                      >
+                        <CloseIcon fontSize="small" />
+                      </IconButton>
+                    )}
+                  </Box>
+                ))}
+
+                {values.preferredDates.length < MAX_PREFERRED_DATES && (
+                  <Link
+                    component="button"
+                    type="button"
+                    onClick={handleAddDate}
+                    underline="hover"
+                    sx={{ alignSelf: 'flex-start', fontSize: '0.875rem' }}
+                  >
+                    + Add another date
+                  </Link>
+                )}
+              </Box>
             </Collapse>
 
+            <Divider sx={{ my: 4 }} />
+
             {/* Time-of-day preference */}
-            <FormControl component="fieldset" sx={{ mb: 3, display: 'block' }}>
+            <FormControl component="fieldset" sx={{ display: 'block' }}>
-              <FormLabel component="legend" sx={{ mb: 1 }}>
+              <FormLabel
+                component="legend"
+                sx={{
+                  mb: 1.5,
+                  color: 'text.primary',
+                  fontWeight: 600,
+                  '&.Mui-focused': { color: 'text.primary' },
+                }}
+              >
                 Do you have a preferred time of day?
               </FormLabel>
               <RadioGroup
@@ -279,32 +334,37 @@ export const DateTimeStep: React.FC<DateTimeStepProps> = ({
                   handleFieldChange('funeralTime', e.target.value as FuneralTimePref)
                 }
               >
-                <FormControlLabel value="no_preference" control={<Radio />} label="No preference" />
+                <FormControlLabel
-                <FormControlLabel value="morning" control={<Radio />} label="Morning" />
+                  value="no_preference"
-                <FormControlLabel value="midday" control={<Radio />} label="Midday" />
+                  control={<Radio />}
-                <FormControlLabel value="afternoon" control={<Radio />} label="Afternoon" />
+                  label="No preference"
+                  sx={{ mb: 0.5 }}
+                />
+                <FormControlLabel
+                  value="morning"
+                  control={<Radio />}
+                  label="Morning"
+                  sx={{ mb: 0.5 }}
+                />
+                <FormControlLabel
+                  value="midday"
+                  control={<Radio />}
+                  label="Midday"
+                  sx={{ mb: 0.5 }}
+                />
+                <FormControlLabel
+                  value="afternoon"
+                  control={<Radio />}
+                  label="Afternoon"
+                  sx={{ mb: 0.5 }}
+                />
                 <FormControlLabel value="evening" control={<Radio />} label="Evening" />
               </RadioGroup>
             </FormControl>
           </Box>
         )}
 
-        {/* ─── Service style (religion) ─── */}
+        <Divider sx={{ my: 4 }} />
-        <Autocomplete
-          options={religionOptions}
-          value={values.religion}
-          onChange={(_, newValue) => handleFieldChange('religion', newValue)}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              label="Service style preference"
-              placeholder="Select a service style (optional)"
-            />
-          )}
-          sx={{ mb: 4 }}
-        />
-
-        <Divider sx={{ my: 3 }} />
 
         {/* CTAs */}
         <Box