Split AdditionalServicesStep into IncludedServicesStep + ExtrasStep
- IncludedServicesStep: package inclusions at no cost (dressing, viewing,
prayers, funeral announcement). Sub-options render inside parent card.
- ExtrasStep: optional paid extras for lead generation (catering, music,
coffin bearing, newspaper notice). POA support, tally of priced items.
- AddOnOption: children prop (sub-options inside card), priceLabel prop
(custom text like "Price on application" in brand copper italic)
- Flattened sub-option pattern: inline toggle rows inside parent card
instead of nested card-in-card ("Russian doll") pattern
- Coffin bearing now uses toggle + bearer type radio (consistent UX)
- Removed old AdditionalServicesStep (replaced by two new pages)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,119 @@
|
||||
import { useState } from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { IncludedServicesStep } from './IncludedServicesStep';
|
||||
import type { IncludedServicesStepValues } from './IncludedServicesStep';
|
||||
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: IncludedServicesStepValues = {
|
||||
dressing: false,
|
||||
viewing: false,
|
||||
viewingSameVenue: null,
|
||||
prayers: false,
|
||||
funeralAnnouncement: true,
|
||||
};
|
||||
|
||||
// ─── Meta ────────────────────────────────────────────────────────────────────
|
||||
|
||||
const meta: Meta<typeof IncludedServicesStep> = {
|
||||
title: 'Pages/IncludedServicesStep',
|
||||
component: IncludedServicesStep,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof IncludedServicesStep>;
|
||||
|
||||
// ─── Default ────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Default state — funeral announcement on by default */
|
||||
export const Default: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<IncludedServicesStepValues>({ ...defaultValues });
|
||||
return (
|
||||
<IncludedServicesStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert(JSON.stringify(values, null, 2))}
|
||||
onBack={() => alert('Back')}
|
||||
onSaveAndExit={() => alert('Save')}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── All enabled ────────────────────────────────────────────────────────────
|
||||
|
||||
/** All inclusions toggled on with viewing sub-option visible */
|
||||
export const AllEnabled: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<IncludedServicesStepValues>({
|
||||
dressing: true,
|
||||
viewing: true,
|
||||
viewingSameVenue: 'yes',
|
||||
prayers: true,
|
||||
funeralAnnouncement: true,
|
||||
});
|
||||
return (
|
||||
<IncludedServicesStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Pre-planning ───────────────────────────────────────────────────────────
|
||||
|
||||
/** Pre-planning variant with softer copy */
|
||||
export const PrePlanning: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<IncludedServicesStepValues>({ ...defaultValues });
|
||||
return (
|
||||
<IncludedServicesStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
isPrePlanning
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,210 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
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 { Typography } from '../../atoms/Typography';
|
||||
import { Button } from '../../atoms/Button';
|
||||
import { Divider } from '../../atoms/Divider';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Form values for the included services step */
|
||||
export interface IncludedServicesStepValues {
|
||||
dressing: boolean;
|
||||
viewing: boolean;
|
||||
viewingSameVenue: 'yes' | 'no' | null;
|
||||
prayers: boolean;
|
||||
funeralAnnouncement: boolean;
|
||||
}
|
||||
|
||||
/** Props for the IncludedServicesStep page component */
|
||||
export interface IncludedServicesStepProps {
|
||||
/** Current form values */
|
||||
values: IncludedServicesStepValues;
|
||||
/** Callback when any field value changes */
|
||||
onChange: (values: IncludedServicesStepValues) => 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;
|
||||
/** 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 12a — Included Services for the FA arrangement wizard.
|
||||
*
|
||||
* Shows services that come with the selected package at no additional
|
||||
* cost. Users confirm which inclusions they'd like — toggling off
|
||||
* removes them, toggling on adds them back.
|
||||
*
|
||||
* Sub-options (e.g. viewing venue) render inside the parent card
|
||||
* when toggled on, keeping the visual grouping clear.
|
||||
*
|
||||
* Pure presentation component — props in, callbacks out.
|
||||
*
|
||||
* Spec: documentation/steps/steps/12_additional_services.yaml (Section 1)
|
||||
*/
|
||||
export const IncludedServicesStep: React.FC<IncludedServicesStepProps> = ({
|
||||
values,
|
||||
onChange,
|
||||
onContinue,
|
||||
onBack,
|
||||
onSaveAndExit,
|
||||
loading = false,
|
||||
isPrePlanning = false,
|
||||
navigation,
|
||||
progressStepper,
|
||||
runningTotal,
|
||||
hideHelpBar,
|
||||
sx,
|
||||
}) => {
|
||||
const handleToggle = (field: keyof IncludedServicesStepValues, checked: boolean) => {
|
||||
const next = { ...values, [field]: checked };
|
||||
if (field === 'viewing' && !checked) {
|
||||
next.viewingSameVenue = null;
|
||||
}
|
||||
onChange(next);
|
||||
};
|
||||
|
||||
const handleFieldChange = <K extends keyof IncludedServicesStepValues>(
|
||||
field: K,
|
||||
value: IncludedServicesStepValues[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}>
|
||||
Included services
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
|
||||
{isPrePlanning
|
||||
? "These services are included with your package. Let us know which you're considering — you can always adjust later."
|
||||
: "The following services come with your selected package at no additional cost. Simply let us know which you'd like to include."}
|
||||
</Typography>
|
||||
|
||||
<Divider sx={{ mb: 4 }} />
|
||||
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
aria-busy={loading}
|
||||
onSubmit={(e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!loading) onContinue();
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 4 }}>
|
||||
<AddOnOption
|
||||
name="Dressing and preparation"
|
||||
description="Professional dressing and preparation of your loved one before the service."
|
||||
checked={values.dressing}
|
||||
onChange={(c) => handleToggle('dressing', c)}
|
||||
/>
|
||||
|
||||
<AddOnOption
|
||||
name="Viewing"
|
||||
description="Arrange a private viewing for family and close friends before the service."
|
||||
checked={values.viewing}
|
||||
onChange={(c) => handleToggle('viewing', c)}
|
||||
>
|
||||
<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 IncludedServicesStepValues['viewingSameVenue'],
|
||||
)
|
||||
}
|
||||
>
|
||||
<FormControlLabel value="yes" control={<Radio />} label="Yes, same venue" />
|
||||
<FormControlLabel value="no" control={<Radio />} label="No, different venue" />
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</AddOnOption>
|
||||
|
||||
<AddOnOption
|
||||
name="Prayers or vigil"
|
||||
description="Arrange prayers or a vigil to be held before the service."
|
||||
checked={values.prayers}
|
||||
onChange={(c) => handleToggle('prayers', c)}
|
||||
/>
|
||||
|
||||
<AddOnOption
|
||||
name="Funeral announcement"
|
||||
description="A complimentary funeral notice prepared and shared by the funeral home."
|
||||
checked={values.funeralAnnouncement}
|
||||
onChange={(c) => handleToggle('funeralAnnouncement', c)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
IncludedServicesStep.displayName = 'IncludedServicesStep';
|
||||
export default IncludedServicesStep;
|
||||
2
src/components/pages/IncludedServicesStep/index.ts
Normal file
2
src/components/pages/IncludedServicesStep/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { IncludedServicesStep, default } from './IncludedServicesStep';
|
||||
export type { IncludedServicesStepProps, IncludedServicesStepValues } from './IncludedServicesStep';
|
||||
Reference in New Issue
Block a user