Add CoffinDetailsStep page (wizard step 11)
- Coffin profile: image + specs grid + description + price note - Three product option sections: handles, lining, name plate - RadioGroup per section with branded selected state (brand border + warm bg) - Price impact inline: "Included" for allowance items, "+$X" for upgrades - Options hidden when not offered by provider (graceful empty state) - Responsive: image stacks above details on mobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,205 @@
|
||||
import { useState } from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { CoffinDetailsStep } from './CoffinDetailsStep';
|
||||
import type { CoffinDetailsStepValues, CoffinProfile, ProductOption } from './CoffinDetailsStep';
|
||||
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 sampleCoffin: CoffinProfile = {
|
||||
name: 'Cedar Classic',
|
||||
imageUrl: 'https://images.unsplash.com/photo-1618220179428-22790b461013?w=600&h=400&fit=crop',
|
||||
description:
|
||||
'A beautifully crafted solid cedar coffin with a natural satin finish. Handmade with care and attention to detail.',
|
||||
specs: [
|
||||
{ label: 'Range', value: 'Solid Timber' },
|
||||
{ label: 'Shape', value: 'Coffin' },
|
||||
{ label: 'Wood', value: 'Cedar' },
|
||||
{ label: 'Finish', value: 'Satin' },
|
||||
{ label: 'Hardware', value: 'Brass' },
|
||||
],
|
||||
price: 2800,
|
||||
priceNote: 'Selecting this coffin does not change your plan total.',
|
||||
};
|
||||
|
||||
const handleOptions: ProductOption[] = [
|
||||
{
|
||||
id: 'brass-bar',
|
||||
name: 'Brass Bar Handle',
|
||||
description: 'Traditional brass bar handles',
|
||||
price: 0,
|
||||
},
|
||||
{
|
||||
id: 'gold-swing',
|
||||
name: 'Gold Swing Handle',
|
||||
description: 'Elegant gold swing-arm handles',
|
||||
price: 150,
|
||||
},
|
||||
{
|
||||
id: 'timber-bar',
|
||||
name: 'Timber Bar Handle',
|
||||
description: 'Matching timber bar handles',
|
||||
price: 80,
|
||||
},
|
||||
];
|
||||
|
||||
const liningOptions: ProductOption[] = [
|
||||
{ id: 'white-satin', name: 'White Satin', description: 'Classic white satin interior', price: 0 },
|
||||
{ id: 'cream-silk', name: 'Cream Silk', description: 'Premium cream silk lining', price: 120 },
|
||||
{ id: 'blue-velvet', name: 'Blue Velvet', description: 'Royal blue velvet interior', price: 180 },
|
||||
];
|
||||
|
||||
const namePlateOptions: ProductOption[] = [
|
||||
{
|
||||
id: 'standard-brass',
|
||||
name: 'Standard Brass',
|
||||
description: 'Engraved brass name plate',
|
||||
price: 0,
|
||||
},
|
||||
{
|
||||
id: 'premium-silver',
|
||||
name: 'Premium Silver',
|
||||
description: 'Silver-plated name plate with decorative border',
|
||||
price: 95,
|
||||
},
|
||||
];
|
||||
|
||||
const defaultValues: CoffinDetailsStepValues = {
|
||||
handlesId: null,
|
||||
liningId: null,
|
||||
namePlateId: null,
|
||||
};
|
||||
|
||||
// ─── Meta ────────────────────────────────────────────────────────────────────
|
||||
|
||||
const meta: Meta<typeof CoffinDetailsStep> = {
|
||||
title: 'Pages/CoffinDetailsStep',
|
||||
component: CoffinDetailsStep,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof CoffinDetailsStep>;
|
||||
|
||||
// ─── Interactive (default) ──────────────────────────────────────────────────
|
||||
|
||||
/** Full customisation flow */
|
||||
export const Default: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CoffinDetailsStepValues>({ ...defaultValues });
|
||||
return (
|
||||
<CoffinDetailsStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert(`Options: ${JSON.stringify(values)}`)}
|
||||
onBack={() => alert('Back to coffin selection')}
|
||||
onSaveAndExit={() => alert('Save')}
|
||||
coffin={sampleCoffin}
|
||||
handleOptions={handleOptions}
|
||||
liningOptions={liningOptions}
|
||||
namePlateOptions={namePlateOptions}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── With selections ────────────────────────────────────────────────────────
|
||||
|
||||
/** All options pre-selected */
|
||||
export const WithSelections: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CoffinDetailsStepValues>({
|
||||
handlesId: 'gold-swing',
|
||||
liningId: 'cream-silk',
|
||||
namePlateId: 'standard-brass',
|
||||
});
|
||||
return (
|
||||
<CoffinDetailsStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
coffin={sampleCoffin}
|
||||
handleOptions={handleOptions}
|
||||
liningOptions={liningOptions}
|
||||
namePlateOptions={namePlateOptions}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Minimal options ────────────────────────────────────────────────────────
|
||||
|
||||
/** Only handles available (lining + nameplate not offered by provider) */
|
||||
export const MinimalOptions: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CoffinDetailsStepValues>({ ...defaultValues });
|
||||
return (
|
||||
<CoffinDetailsStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
coffin={sampleCoffin}
|
||||
handleOptions={handleOptions}
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
// ─── Pre-planning ───────────────────────────────────────────────────────────
|
||||
|
||||
/** Pre-planning variant */
|
||||
export const PrePlanning: Story = {
|
||||
render: () => {
|
||||
const [values, setValues] = useState<CoffinDetailsStepValues>({ ...defaultValues });
|
||||
return (
|
||||
<CoffinDetailsStep
|
||||
values={values}
|
||||
onChange={setValues}
|
||||
onContinue={() => alert('Continue')}
|
||||
onBack={() => alert('Back')}
|
||||
coffin={sampleCoffin}
|
||||
handleOptions={handleOptions}
|
||||
liningOptions={liningOptions}
|
||||
namePlateOptions={namePlateOptions}
|
||||
isPrePlanning
|
||||
navigation={nav}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
350
src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
Normal file
350
src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
Normal file
@@ -0,0 +1,350 @@
|
||||
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 { Typography } from '../../atoms/Typography';
|
||||
import { Button } from '../../atoms/Button';
|
||||
import { Divider } from '../../atoms/Divider';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Coffin specification key-value pair */
|
||||
export interface CoffinSpec {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
/** A product customisation option (handle, lining, nameplate) */
|
||||
export interface ProductOption {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
price?: number;
|
||||
imageUrl?: string;
|
||||
}
|
||||
|
||||
/** Selected coffin profile data */
|
||||
export interface CoffinProfile {
|
||||
name: string;
|
||||
imageUrl: string;
|
||||
description?: string;
|
||||
specs?: CoffinSpec[];
|
||||
price: number;
|
||||
priceNote?: string;
|
||||
}
|
||||
|
||||
/** Form values for the coffin details step */
|
||||
export interface CoffinDetailsStepValues {
|
||||
/** Selected handle option ID */
|
||||
handlesId: string | null;
|
||||
/** Selected lining option ID */
|
||||
liningId: string | null;
|
||||
/** Selected nameplate option ID */
|
||||
namePlateId: string | null;
|
||||
}
|
||||
|
||||
/** Props for the CoffinDetailsStep page component */
|
||||
export interface CoffinDetailsStepProps {
|
||||
/** Current form values */
|
||||
values: CoffinDetailsStepValues;
|
||||
/** Callback when any field value changes */
|
||||
onChange: (values: CoffinDetailsStepValues) => 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;
|
||||
/** The selected coffin profile */
|
||||
coffin: CoffinProfile;
|
||||
/** Available handle options */
|
||||
handleOptions?: ProductOption[];
|
||||
/** Available lining options */
|
||||
liningOptions?: ProductOption[];
|
||||
/** Available nameplate options */
|
||||
namePlateOptions?: ProductOption[];
|
||||
/** 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>;
|
||||
}
|
||||
|
||||
// ─── Option section helper ───────────────────────────────────────────────────
|
||||
|
||||
const OptionSection: React.FC<{
|
||||
legend: string;
|
||||
options: ProductOption[];
|
||||
selectedId: string | null;
|
||||
onChange: (id: string) => void;
|
||||
}> = ({ legend, options, selectedId, onChange }) => {
|
||||
if (options.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Paper variant="outlined" sx={{ p: 3, mb: 3 }}>
|
||||
<FormControl component="fieldset" sx={{ display: 'block', width: '100%' }}>
|
||||
<FormLabel component="legend">
|
||||
<Typography variant="h5" sx={{ mb: 2 }}>
|
||||
{legend}
|
||||
</Typography>
|
||||
</FormLabel>
|
||||
<RadioGroup
|
||||
value={selectedId ?? ''}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
sx={{ gap: 1.5 }}
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<FormControlLabel
|
||||
key={opt.id}
|
||||
value={opt.id}
|
||||
control={<Radio />}
|
||||
label={
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
|
||||
<Box>
|
||||
<Typography variant="body1">{opt.name}</Typography>
|
||||
{opt.description && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{opt.description}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
{opt.price != null && (
|
||||
<Typography
|
||||
variant="body1"
|
||||
color="primary"
|
||||
sx={{ ml: 2, whiteSpace: 'nowrap' }}
|
||||
>
|
||||
{opt.price === 0 ? 'Included' : `+$${opt.price.toLocaleString('en-AU')}`}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
sx={{
|
||||
alignItems: 'flex-start',
|
||||
mx: 0,
|
||||
py: 1.5,
|
||||
px: 2,
|
||||
borderRadius: 1,
|
||||
border: 1,
|
||||
borderColor: selectedId === opt.id ? 'var(--fa-color-border-brand)' : 'divider',
|
||||
bgcolor: selectedId === opt.id ? 'var(--fa-color-surface-warm)' : 'transparent',
|
||||
'&:hover': { bgcolor: 'action.hover' },
|
||||
'& .MuiFormControlLabel-label': { flex: 1 },
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Step 11 — Coffin Details for the FA arrangement wizard.
|
||||
*
|
||||
* Customise the selected coffin — choose handles, lining, and nameplate.
|
||||
* Shows coffin profile at top (image, specs, description, price note).
|
||||
* Three option sections below, each as a RadioGroup in a Paper card.
|
||||
*
|
||||
* Price impact shown inline per option ("Included" or "+$X").
|
||||
* Options within package allowance show "Included".
|
||||
*
|
||||
* Pure presentation component — props in, callbacks out.
|
||||
*
|
||||
* Spec: documentation/steps/steps/11_coffin_details.yaml
|
||||
*/
|
||||
export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
|
||||
values,
|
||||
onChange,
|
||||
onContinue,
|
||||
onBack,
|
||||
onSaveAndExit,
|
||||
loading = false,
|
||||
coffin,
|
||||
handleOptions = [],
|
||||
liningOptions = [],
|
||||
namePlateOptions = [],
|
||||
isPrePlanning = false,
|
||||
navigation,
|
||||
progressStepper,
|
||||
runningTotal,
|
||||
hideHelpBar,
|
||||
sx,
|
||||
}) => {
|
||||
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}>
|
||||
Coffin details
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
|
||||
{isPrePlanning
|
||||
? 'These options let you personalise the coffin. You can change these later.'
|
||||
: 'Personalise your chosen coffin with handles, lining, and a name plate.'}
|
||||
</Typography>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
|
||||
Each option shows the price impact on your plan total. Options within your package allowance
|
||||
are included at no extra cost.
|
||||
</Typography>
|
||||
|
||||
{/* ─── Coffin profile ─── */}
|
||||
<Paper variant="outlined" sx={{ p: 3, mb: 4, overflow: 'hidden' }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
gap: 3,
|
||||
}}
|
||||
>
|
||||
{/* Image */}
|
||||
<Box
|
||||
role="img"
|
||||
aria-label={`Photo of ${coffin.name}`}
|
||||
sx={{
|
||||
width: { xs: '100%', sm: 240 },
|
||||
height: { xs: 200, sm: 180 },
|
||||
flexShrink: 0,
|
||||
borderRadius: 1,
|
||||
backgroundImage: `url(${coffin.imageUrl})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundColor: 'var(--fa-color-surface-subtle)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Details */}
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Typography variant="h4" sx={{ mb: 1 }}>
|
||||
{coffin.name}
|
||||
</Typography>
|
||||
|
||||
{coffin.description && (
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{coffin.description}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{/* Specs */}
|
||||
{coffin.specs && coffin.specs.length > 0 && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'auto 1fr',
|
||||
gap: 0.5,
|
||||
columnGap: 2,
|
||||
mb: 2,
|
||||
}}
|
||||
>
|
||||
{coffin.specs.map((spec) => (
|
||||
<React.Fragment key={spec.label}>
|
||||
<Typography variant="labelSm" color="text.secondary">
|
||||
{spec.label}
|
||||
</Typography>
|
||||
<Typography variant="body2">{spec.value}</Typography>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Price */}
|
||||
<Typography variant="h5" color="primary">
|
||||
${coffin.price.toLocaleString('en-AU')}
|
||||
</Typography>
|
||||
{coffin.priceNote && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{coffin.priceNote}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
<Box
|
||||
component="form"
|
||||
noValidate
|
||||
onSubmit={(e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
onContinue();
|
||||
}}
|
||||
>
|
||||
{/* ─── Option sections ─── */}
|
||||
<OptionSection
|
||||
legend="Handle style"
|
||||
options={handleOptions}
|
||||
selectedId={values.handlesId}
|
||||
onChange={(id) => onChange({ ...values, handlesId: id })}
|
||||
/>
|
||||
|
||||
<OptionSection
|
||||
legend="Interior lining"
|
||||
options={liningOptions}
|
||||
selectedId={values.liningId}
|
||||
onChange={(id) => onChange({ ...values, liningId: id })}
|
||||
/>
|
||||
|
||||
<OptionSection
|
||||
legend="Name plate"
|
||||
options={namePlateOptions}
|
||||
selectedId={values.namePlateId}
|
||||
onChange={(id) => onChange({ ...values, namePlateId: id })}
|
||||
/>
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
CoffinDetailsStep.displayName = 'CoffinDetailsStep';
|
||||
export default CoffinDetailsStep;
|
||||
8
src/components/pages/CoffinDetailsStep/index.ts
Normal file
8
src/components/pages/CoffinDetailsStep/index.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export { CoffinDetailsStep, default } from './CoffinDetailsStep';
|
||||
export type {
|
||||
CoffinDetailsStepProps,
|
||||
CoffinDetailsStepValues,
|
||||
CoffinProfile,
|
||||
CoffinSpec,
|
||||
ProductOption,
|
||||
} from './CoffinDetailsStep';
|
||||
Reference in New Issue
Block a user