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 type { Meta, StoryObj } from '@storybook/react';
import { CoffinDetailsStep } from './CoffinDetailsStep'; import { CoffinDetailsStep } from './CoffinDetailsStep';
import type { CoffinDetailsStepValues, CoffinProfile, ProductOption } from './CoffinDetailsStep'; import type { CoffinProfile } from './CoffinDetailsStep';
import { Navigation } from '../../organisms/Navigation'; import { Navigation } from '../../organisms/Navigation';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
@@ -50,54 +49,6 @@ const sampleCoffin: CoffinProfile = {
priceNote: 'Selecting this coffin does not change your plan total.', 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 ──────────────────────────────────────────────────────────────────── // ─── Meta ────────────────────────────────────────────────────────────────────
const meta: Meta<typeof CoffinDetailsStep> = { const meta: Meta<typeof CoffinDetailsStep> = {
@@ -112,94 +63,57 @@ const meta: Meta<typeof CoffinDetailsStep> = {
export default meta; export default meta;
type Story = StoryObj<typeof CoffinDetailsStep>; type Story = StoryObj<typeof CoffinDetailsStep>;
// ─── Interactive (default) ────────────────────────────────────────────────── // ─── Default ────────────────────────────────────────────────────────────────
/** Full customisation flow */ /** Coffin details — simplified view with profile + CTA (D-G) */
export const Default: Story = { export const Default: Story = {
render: () => { args: {
const [values, setValues] = useState<CoffinDetailsStepValues>({ ...defaultValues }); coffin: sampleCoffin,
return ( onContinue: () => alert('Continue'),
<CoffinDetailsStep onBack: () => alert('Back to coffin selection'),
values={values} onSaveAndExit: () => alert('Save'),
onChange={setValues} navigation: nav,
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 ───────────────────────────────────────────────────────────
/** Pre-planning variant */ /** Pre-planning variant — softer copy */
export const PrePlanning: Story = { export const PrePlanning: Story = {
render: () => { args: {
const [values, setValues] = useState<CoffinDetailsStepValues>({ ...defaultValues }); coffin: sampleCoffin,
return ( onContinue: () => alert('Continue'),
<CoffinDetailsStep onBack: () => alert('Back'),
values={values} isPrePlanning: true,
onChange={setValues} navigation: nav,
onContinue={() => alert('Continue')} },
onBack={() => alert('Back')} };
coffin={sampleCoffin}
handleOptions={handleOptions} // ─── Minimal info ───────────────────────────────────────────────────────────
liningOptions={liningOptions}
namePlateOptions={namePlateOptions} /** Coffin with no specs or description */
isPrePlanning export const MinimalInfo: Story = {
navigation={nav} 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,
}, },
}; };

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

@@ -1,11 +1,5 @@
import React from 'react'; import React from 'react';
import Box from '@mui/material/Box'; 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 type { SxProps, Theme } from '@mui/material/styles';
import { WizardLayout } from '../../templates/WizardLayout'; import { WizardLayout } from '../../templates/WizardLayout';
import { Typography } from '../../atoms/Typography'; import { Typography } from '../../atoms/Typography';
@@ -20,15 +14,6 @@ export interface CoffinSpec {
value: 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 */ /** Selected coffin profile data */
export interface CoffinProfile { export interface CoffinProfile {
name: string; name: string;
@@ -39,22 +24,8 @@ export interface CoffinProfile {
priceNote?: string; 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 */ /** Props for the CoffinDetailsStep page component */
export interface CoffinDetailsStepProps { 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 */ /** Callback when the Continue button is clicked */
onContinue: () => void; onContinue: () => void;
/** Callback for back navigation */ /** Callback for back navigation */
@@ -65,12 +36,6 @@ export interface CoffinDetailsStepProps {
loading?: boolean; loading?: boolean;
/** The selected coffin profile */ /** The selected coffin profile */
coffin: CoffinProfile; coffin: CoffinProfile;
/** Available handle options */
handleOptions?: ProductOption[];
/** Available lining options */
liningOptions?: ProductOption[];
/** Available nameplate options */
namePlateOptions?: ProductOption[];
/** Whether this is a pre-planning flow */ /** Whether this is a pre-planning flow */
isPrePlanning?: boolean; isPrePlanning?: boolean;
/** Navigation bar */ /** Navigation bar */
@@ -85,102 +50,25 @@ export interface CoffinDetailsStepProps {
sx?: SxProps<Theme>; 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 ─────────────────────────────────────────────────────────────── // ─── Component ───────────────────────────────────────────────────────────────
/** /**
* Step 11 — Coffin Details for the FA arrangement wizard. * Step 11 — Coffin Details for the FA arrangement wizard.
* *
* Customise the selected coffin — choose handles, lining, and nameplate. * Shows the selected coffin's full profile: image, specs, description,
* Shows coffin profile at top (image, specs, description, price note). * and price. Customisation options (handles, lining, nameplate) have
* Three option sections below, each as a RadioGroup in a Paper card. * been deferred as a future enhancement (D-G).
*
* Price impact shown inline per option ("Included" or "+$X").
* Options within package allowance show "Included".
* *
* Pure presentation component — props in, callbacks out. * Pure presentation component — props in, callbacks out.
* *
* Spec: documentation/steps/steps/11_coffin_details.yaml * Spec: documentation/steps/steps/11_coffin_details.yaml
*/ */
export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
values,
onChange,
onContinue, onContinue,
onBack, onBack,
onSaveAndExit, onSaveAndExit,
loading = false, loading = false,
coffin, coffin,
handleOptions = [],
liningOptions = [],
namePlateOptions = [],
isPrePlanning = false, isPrePlanning = false,
navigation, navigation,
progressStepper, progressStepper,
@@ -188,10 +76,29 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
hideHelpBar, hideHelpBar,
sx, sx,
}) => { }) => {
// ─── Left panel: Coffin profile (image + specs) ─── return (
const profilePanel = ( <WizardLayout
<Box> variant="centered-form"
{/* Image */} 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 <Box
role="img" role="img"
aria-label={`Photo of ${coffin.name}`} 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 }}> <Typography variant="h4" sx={{ mb: 1 }}>
{coffin.name} {coffin.name}
</Typography> </Typography>
@@ -217,7 +125,7 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
</Typography> </Typography>
)} )}
{/* Specs */} {/* Specs grid */}
{coffin.specs && coffin.specs.length > 0 && ( {coffin.specs && coffin.specs.length > 0 && (
<Box <Box
sx={{ sx={{
@@ -225,7 +133,7 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
gridTemplateColumns: 'auto 1fr', gridTemplateColumns: 'auto 1fr',
gap: 0.5, gap: 0.5,
columnGap: 2, columnGap: 2,
mb: 2, mb: 3,
}} }}
> >
{coffin.specs.map((spec) => ( {coffin.specs.map((spec) => (
@@ -240,64 +148,14 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
)} )}
{/* Price */} {/* Price */}
<Typography variant="h5" color="primary"> <Typography variant="h5" color="primary" sx={{ mb: 1 }}>
${coffin.price.toLocaleString('en-AU')} ${coffin.price.toLocaleString('en-AU')}
</Typography> </Typography>
{coffin.priceNote && ( {coffin.priceNote && (
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
{coffin.priceNote} {coffin.priceNote}
</Typography> </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>
<Box
component="form"
noValidate
aria-busy={loading}
onSubmit={(e: React.FormEvent) => {
e.preventDefault();
if (!loading) onContinue();
}}
>
<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 }} /> <Divider sx={{ my: 3 }} />
@@ -312,34 +170,16 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
}} }}
> >
{onSaveAndExit ? ( {onSaveAndExit ? (
<Button variant="text" color="secondary" onClick={onSaveAndExit} type="button"> <Button variant="text" color="secondary" onClick={onSaveAndExit}>
Save and continue later Save and continue later
</Button> </Button>
) : ( ) : (
<Box /> <Box />
)} )}
<Button type="submit" variant="contained" size="large" loading={loading}> <Button variant="contained" size="large" onClick={onContinue} loading={loading}>
Continue Continue
</Button> </Button>
</Box> </Box>
</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> </WizardLayout>
); );
}; };

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

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

104
src/components/pages/ProvidersStep/ProvidersStep.stories.tsx
View File

@@ -118,66 +118,27 @@ type Story = StoryObj<typeof ProvidersStep>;
// ─── Interactive (default) ────────────────────────────────────────────────── // ─── Interactive (default) ──────────────────────────────────────────────────
/** Fully interactive — search, filter, select a provider, continue */ /** Click-to-navigate — clicking a provider triggers navigation (D-D) */
export const Default: Story = { export const Default: Story = {
render: () => { render: () => {
const [selectedId, setSelectedId] = useState<string | null>(null);
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
const [filters, setFilters] = useState(defaultFilters); const [filters, setFilters] = useState(defaultFilters);
const [error, setError] = useState<string | undefined>();
const filtered = mockProviders.filter((p) => const filtered = mockProviders.filter((p) =>
p.name.toLowerCase().includes(query.toLowerCase()), p.name.toLowerCase().includes(query.toLowerCase()),
); );
const handleContinue = () => {
if (!selectedId) {
setError('Please choose a funeral provider to continue.');
return;
}
setError(undefined);
alert(`Continue with provider: ${selectedId}`);
};
return ( return (
<ProvidersStep <ProvidersStep
providers={filtered} providers={filtered}
selectedProviderId={selectedId} onSelectProvider={(id) => alert(`Navigate to provider: ${id}`)}
onSelectProvider={(id) => {
setSelectedId(id);
setError(undefined);
}}
searchQuery={query} searchQuery={query}
onSearchChange={setQuery} onSearchChange={setQuery}
filters={filters} filters={filters}
onFilterToggle={(i) => onFilterToggle={(i) =>
setFilters((prev) => prev.map((f, idx) => (idx === i ? { ...f, active: !f.active } : f))) setFilters((prev) => prev.map((f, idx) => (idx === i ? { ...f, active: !f.active } : f)))
} }
onContinue={handleContinue} onFilterClear={() => setFilters((prev) => prev.map((f) => ({ ...f, active: false })))}
onBack={() => alert('Back')}
error={error}
navigation={nav}
/>
);
},
};
// ─── With selected provider ─────────────────────────────────────────────────
/** Provider already selected — ready to continue */
export const WithSelection: Story = {
render: () => {
const [selectedId, setSelectedId] = useState<string | null>('parsons');
const [query, setQuery] = useState('');
return (
<ProvidersStep
providers={mockProviders}
selectedProviderId={selectedId}
onSelectProvider={setSelectedId}
searchQuery={query}
onSearchChange={setQuery}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')} onBack={() => alert('Back')}
navigation={nav} navigation={nav}
/> />
@@ -190,17 +151,14 @@ export const WithSelection: Story = {
/** Pre-planning flow — softer copy */ /** Pre-planning flow — softer copy */
export const PrePlanning: Story = { export const PrePlanning: Story = {
render: () => { render: () => {
const [selectedId, setSelectedId] = useState<string | null>(null);
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
return ( return (
<ProvidersStep <ProvidersStep
providers={mockProviders} providers={mockProviders}
selectedProviderId={selectedId} onSelectProvider={(id) => alert(`Navigate to provider: ${id}`)}
onSelectProvider={setSelectedId}
searchQuery={query} searchQuery={query}
onSearchChange={setQuery} onSearchChange={setQuery}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')} onBack={() => alert('Back')}
navigation={nav} navigation={nav}
isPrePlanning isPrePlanning
@@ -209,30 +167,6 @@ export const PrePlanning: Story = {
}, },
}; };
// ─── Validation error ───────────────────────────────────────────────────────
/** No provider selected, error shown */
export const WithError: Story = {
render: () => {
const [selectedId, setSelectedId] = useState<string | null>(null);
const [query, setQuery] = useState('');
return (
<ProvidersStep
providers={mockProviders}
selectedProviderId={selectedId}
onSelectProvider={setSelectedId}
searchQuery={query}
onSearchChange={setQuery}
onContinue={() => {}}
onBack={() => alert('Back')}
error="Please choose a funeral provider to continue."
navigation={nav}
/>
);
},
};
// ─── Empty results ────────────────────────────────────────────────────────── // ─── Empty results ──────────────────────────────────────────────────────────
/** Search yielded no results */ /** Search yielded no results */
@@ -243,11 +177,9 @@ export const EmptyResults: Story = {
return ( return (
<ProvidersStep <ProvidersStep
providers={[]} providers={[]}
selectedProviderId={null}
onSelectProvider={() => {}} onSelectProvider={() => {}}
searchQuery={query} searchQuery={query}
onSearchChange={setQuery} onSearchChange={setQuery}
onContinue={() => {}}
onBack={() => alert('Back')} onBack={() => alert('Back')}
navigation={nav} navigation={nav}
/> />
@@ -255,45 +187,19 @@ export const EmptyResults: Story = {
}, },
}; };
// ─── Loading state ──────────────────────────────────────────────────────────
/** Continue button loading */
export const Loading: Story = {
render: () => {
const [query, setQuery] = useState('');
return (
<ProvidersStep
providers={mockProviders}
selectedProviderId="parsons"
onSelectProvider={() => {}}
searchQuery={query}
onSearchChange={setQuery}
onContinue={() => {}}
onBack={() => alert('Back')}
loading
navigation={nav}
/>
);
},
};
// ─── Single provider ──────────────────────────────────────────────────────── // ─── Single provider ────────────────────────────────────────────────────────
/** Only one provider available */ /** Only one provider available */
export const SingleProvider: Story = { export const SingleProvider: Story = {
render: () => { render: () => {
const [selectedId, setSelectedId] = useState<string | null>(null);
const [query, setQuery] = useState(''); const [query, setQuery] = useState('');
return ( return (
<ProvidersStep <ProvidersStep
providers={[mockProviders[0]]} providers={[mockProviders[0]]}
selectedProviderId={selectedId} onSelectProvider={(id) => alert(`Navigate to provider: ${id}`)}
onSelectProvider={setSelectedId}
searchQuery={query} searchQuery={query}
onSearchChange={setQuery} onSearchChange={setQuery}
onContinue={() => alert('Continue')}
onBack={() => alert('Back')} onBack={() => alert('Back')}
navigation={nav} navigation={nav}
/> />

60
src/components/pages/ProvidersStep/ProvidersStep.tsx
View File

@@ -7,7 +7,6 @@ import { SearchBar } from '../../molecules/SearchBar';
import { FilterPanel } from '../../molecules/FilterPanel'; import { FilterPanel } from '../../molecules/FilterPanel';
import { Chip } from '../../atoms/Chip'; import { Chip } from '../../atoms/Chip';
import { Typography } from '../../atoms/Typography'; import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';
// ─── Types ─────────────────────────────────────────────────────────────────── // ─── Types ───────────────────────────────────────────────────────────────────
@@ -49,9 +48,7 @@ export interface ProviderFilter {
export interface ProvidersStepProps { export interface ProvidersStepProps {
/** List of providers to display */ /** List of providers to display */
providers: ProviderData[]; providers: ProviderData[];
/** Currently selected provider ID */ /** Callback when a provider card is clicked — triggers navigation (D-D) */
selectedProviderId: string | null;
/** Callback when a provider is selected */
onSelectProvider: (id: string) => void; onSelectProvider: (id: string) => void;
/** Search query value */ /** Search query value */
searchQuery: string; searchQuery: string;
@@ -65,14 +62,8 @@ export interface ProvidersStepProps {
onFilterToggle?: (index: number) => void; onFilterToggle?: (index: number) => void;
/** Callback to clear all filters */ /** Callback to clear all filters */
onFilterClear?: () => void; onFilterClear?: () => void;
/** Callback for the Continue button */
onContinue: () => void;
/** Callback for the Back button */ /** Callback for the Back button */
onBack: () => void; onBack: () => void;
/** Validation error message */
error?: string;
/** Whether the Continue action is loading */
loading?: boolean;
/** Map panel content — slot for future map integration */ /** Map panel content — slot for future map integration */
mapPanel?: React.ReactNode; mapPanel?: React.ReactNode;
/** Navigation bar — passed through to WizardLayout */ /** Navigation bar — passed through to WizardLayout */
@@ -89,11 +80,11 @@ export interface ProvidersStepProps {
* Step 2 — Provider selection page for the FA arrangement wizard. * Step 2 — Provider selection page for the FA arrangement wizard.
* *
* List + Map split layout. Left panel shows a scrollable list of * List + Map split layout. Left panel shows a scrollable list of
* provider cards with search and filter chips. Right panel is a * provider cards with search and filter button. Right panel is a
* slot for future map integration. * slot for future map integration.
* *
* Uses radiogroup pattern for card selection — arrow keys navigate * Click-to-navigate (D-D): clicking a provider card triggers
* between cards, Space/Enter selects. * navigation directly — no selection state or Continue button.
* *
* Pure presentation component — props in, callbacks out. * Pure presentation component — props in, callbacks out.
* *
@@ -101,7 +92,6 @@ export interface ProvidersStepProps {
*/ */
export const ProvidersStep: React.FC<ProvidersStepProps> = ({ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
providers, providers,
selectedProviderId,
onSelectProvider, onSelectProvider,
searchQuery, searchQuery,
onSearchChange, onSearchChange,
@@ -109,10 +99,7 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
filters, filters,
onFilterToggle, onFilterToggle,
onFilterClear, onFilterClear,
onContinue,
onBack, onBack,
error,
loading = false,
mapPanel, mapPanel,
navigation, navigation,
isPrePlanning = false, isPrePlanning = false,
@@ -212,22 +199,10 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
</Typography> </Typography>
</Box> </Box>
{/* Error message */} {/* Provider list — click-to-navigate (D-D) */}
{error && (
<Typography
variant="body2"
sx={{ mb: 2, color: 'var(--fa-color-text-brand)' }}
role="alert"
>
{error}
</Typography>
)}
{/* Provider list — radiogroup pattern */}
<Box <Box
role="radiogroup"
aria-label="Funeral providers" aria-label="Funeral providers"
sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }} sx={{ display: 'flex', flexDirection: 'column', gap: 2, pb: 3 }}
> >
{providers.map((provider) => ( {providers.map((provider) => (
<ProviderCard <ProviderCard
@@ -240,21 +215,13 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
rating={provider.rating} rating={provider.rating}
reviewCount={provider.reviewCount} reviewCount={provider.reviewCount}
startingPrice={provider.startingPrice} startingPrice={provider.startingPrice}
selected={selectedProviderId === provider.id}
onClick={() => onSelectProvider(provider.id)} onClick={() => onSelectProvider(provider.id)}
role="radio"
aria-checked={selectedProviderId === provider.id}
aria-label={`${provider.name}, ${provider.location}${provider.rating ? `, rated ${provider.rating}` : ''}${provider.startingPrice ? `, from $${provider.startingPrice}` : ''}`} aria-label={`${provider.name}, ${provider.location}${provider.rating ? `, rated ${provider.rating}` : ''}${provider.startingPrice ? `, from $${provider.startingPrice}` : ''}`}
/> />
))} ))}
{providers.length === 0 && ( {providers.length === 0 && (
<Box <Box sx={{ py: 6, textAlign: 'center' }}>
sx={{
py: 6,
textAlign: 'center',
}}
>
<Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}> <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
No providers found matching your search. No providers found matching your search.
</Typography> </Typography>
@@ -264,19 +231,6 @@ export const ProvidersStep: React.FC<ProvidersStepProps> = ({
</Box> </Box>
)} )}
</Box> </Box>
{/* Continue button */}
<Box sx={{ display: 'flex', justifyContent: 'flex-end', pb: 2 }}>
<Button
variant="contained"
size="large"
onClick={onContinue}
disabled={!selectedProviderId}
loading={loading}
>
Continue
</Button>
</Box>
</WizardLayout> </WizardLayout>
); );
}; };