richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Batch 4: Click-to-navigate providers (D-D), simplify coffin details (D-G)

Browse Source 
ProvidersStep (D-D):
- Remove selection state (selectedProviderId) and Continue button
- Clicking a provider card triggers navigation directly
- Remove radiogroup pattern, error, loading props
- Cards are now simple interactive links, not radio buttons
- Stories updated: removed WithSelection, WithError, Loading

CoffinDetailsStep (D-G):
- Remove all customisation (handles, lining, nameplate)
- Remove OptionSection helper, ProductOption/CoffinDetailsStepValues types
- Simplified to coffin profile (image, specs, price) + Continue CTA
- Changed from detail-toggles split to centered-form layout
- Customisation noted as future enhancement
- Updated index.ts re-exports to match simplified API
- Stories simplified: Default, PrePlanning, MinimalInfo, Loading

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-29 22:29:24 +11:00
parent c5581c6e9f
commit be99acd51e
5 changed files with 106 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/components/pages/CoffinDetailsStep/CoffinDetailsStep.stories.tsx
View File

@@ -1,7 +1,6 @@
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { CoffinDetailsStep } from './CoffinDetailsStep';
import type { CoffinDetailsStepValues, CoffinProfile, ProductOption } from './CoffinDetailsStep';
import type { CoffinProfile } from './CoffinDetailsStep';
import { Navigation } from '../../organisms/Navigation';
import Box from '@mui/material/Box';
@@ -50,54 +49,6 @@ const sampleCoffin: CoffinProfile = {
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> = {
@@ -112,94 +63,57 @@ const meta: Meta<typeof CoffinDetailsStep> = {
export default meta;
type Story = StoryObj<typeof CoffinDetailsStep>;
// ─── Interactive (default) ──────────────────────────────────────────────────
// ─── Default ────────────────────────────────────────────────────────────────
/** Full customisation flow */
/** Coffin details — simplified view with profile + CTA (D-G) */
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}
/>
);
args: {
coffin: sampleCoffin,
onContinue: () => alert('Continue'),
onBack: () => alert('Back to coffin selection'),
onSaveAndExit: () => alert('Save'),
navigation: nav,
},
};
// ─── Pre-planning ───────────────────────────────────────────────────────────
/** Pre-planning variant */
/** Pre-planning variant — softer copy */
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}
/>
);
args: {
coffin: sampleCoffin,
onContinue: () => alert('Continue'),
onBack: () => alert('Back'),
isPrePlanning: true,
navigation: nav,
},
};
// ─── Minimal info ───────────────────────────────────────────────────────────
/** Coffin with no specs or description */
export const MinimalInfo: Story = {
args: {
coffin: {
name: 'Standard White',
imageUrl: 'https://placehold.co/600x400/F5F5F0/8B8B7E?text=Standard+White',
price: 1200,
},
onContinue: () => alert('Continue'),
onBack: () => alert('Back'),
navigation: nav,
},
};
// ─── Loading ────────────────────────────────────────────────────────────────
/** Continue button loading */
export const Loading: Story = {
args: {
coffin: sampleCoffin,
onContinue: () => {},
onBack: () => alert('Back'),
loading: true,
navigation: nav,
},
};

256
src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
View File

@@ -1,11 +1,5 @@
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';
@@ -20,15 +14,6 @@ export interface CoffinSpec {
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;
@@ -39,22 +24,8 @@ export interface CoffinProfile {
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 */
@@ -65,12 +36,6 @@ export interface CoffinDetailsStepProps {
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 */
@@ -85,102 +50,25 @@ export interface CoffinDetailsStepProps {
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".
* Shows the selected coffin's full profile: image, specs, description,
* and price. Customisation options (handles, lining, nameplate) have
* been deferred as a future enhancement (D-G).
*
* 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,
@@ -188,10 +76,29 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
hideHelpBar,
sx,
}) => {
// ─── Left panel: Coffin profile (image + specs) ───
const profilePanel = (
<Box>
{/* Image */}
return (
<WizardLayout
variant="centered-form"
navigation={navigation}
progressStepper={progressStepper}
runningTotal={runningTotal}
showBackLink={!!onBack}
backLabel="Back"
onBack={onBack}
hideHelpBar={hideHelpBar}
sx={sx}
>
<Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
Your selected coffin
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
{isPrePlanning
? 'Here are the details of the coffin you selected. You can change your selection at any time.'
: 'Review the details of your selected coffin below.'}
</Typography>
{/* Coffin image */}
<Box
role="img"
aria-label={`Photo of ${coffin.name}`}
@@ -207,6 +114,7 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
}}
/>
{/* Coffin name + description */}
<Typography variant="h4" sx={{ mb: 1 }}>
{coffin.name}
</Typography>
@@ -217,7 +125,7 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
</Typography>
)}
{/* Specs */}
{/* Specs grid */}
{coffin.specs && coffin.specs.length > 0 && (
<Box
sx={{
@@ -225,7 +133,7 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
gridTemplateColumns: 'auto 1fr',
gap: 0.5,
columnGap: 2,
mb: 2,
mb: 3,
}}
>
{coffin.specs.map((spec) => (
@@ -240,106 +148,38 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
)}
{/* Price */}
<Typography variant="h5" color="primary">
<Typography variant="h5" color="primary" sx={{ mb: 1 }}>
${coffin.price.toLocaleString('en-AU')}
</Typography>
{coffin.priceNote && (
<Typography variant="body2" color="text.secondary">
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
{coffin.priceNote}
</Typography>
)}
</Box>
);
// ─── Right panel: Option selectors + CTAs ───
const optionsPanel = (
<Box>
<Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
Coffin details
</Typography>
<Typography variant="body2" 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="caption" color="text.secondary" sx={{ mb: 3, display: 'block' }}>
Each option shows the price impact on your plan total. Options within your package allowance
are included at no extra cost.
</Typography>
<Divider sx={{ my: 3 }} />
{/* CTAs */}
<Box
component="form"
noValidate
aria-busy={loading}
onSubmit={(e: React.FormEvent) => {
e.preventDefault();
if (!loading) onContinue();
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
flexDirection: { xs: 'column-reverse', sm: 'row' },
gap: 2,
}}
>
<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
{onSaveAndExit ? (
<Button variant="text" color="secondary" onClick={onSaveAndExit}>
Save and continue later
</Button>
</Box>
) : (
<Box />
)}
<Button variant="contained" size="large" onClick={onContinue} loading={loading}>
Continue
</Button>
</Box>
</Box>
);
return (
<WizardLayout
variant="detail-toggles"
navigation={navigation}
progressStepper={progressStepper}
runningTotal={runningTotal}
showBackLink={!!onBack}
backLabel="Back"
onBack={onBack}
hideHelpBar={hideHelpBar}
sx={sx}
secondaryPanel={optionsPanel}
>
{profilePanel}
</WizardLayout>
);
};

8
src/components/pages/CoffinDetailsStep/index.ts
View File

@@ -1,8 +1,2 @@
export { CoffinDetailsStep, default } from './CoffinDetailsStep';
export type {
CoffinDetailsStepProps,
CoffinDetailsStepValues,
CoffinProfile,
CoffinSpec,
ProductOption,
} from './CoffinDetailsStep';
export type { CoffinDetailsStepProps, CoffinProfile, CoffinSpec } from './CoffinDetailsStep';