Add FuneralFinder organism — hero search with stepped flow
Procedural stepped search widget for the homepage: 1. "I'm here to" — Arrange now / Pre-plan (radiogroup) 2. "I'm planning for" — Myself / Someone else (conditional, pre-plan only) 3. "Type of funeral" — dynamic Chip list from prop 4. Location — suburb or postcode input 5. CTA: "Find funeral directors" (disabled until complete) Features: - Progressive disclosure: steps unlock sequentially - Brand checkmarks + edit icon on completed steps - Click completed value to revert (only resets dependents) - Step numbering adjusts when conditional step hidden - Trust signal: "Free to use · No obligation" Audit: 17/20 (Good). P1/P2 fixes applied: - Location input aria-label for screen readers - Option groups wrapped in role="radiogroup" - Completed values have edit icon affordance - Heading uses display font CSS variable - CheckCircleIcon aria-hidden 5 stories: Default, FewerTypes, CustomHeading, InHeroDesktop, InHeroMobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
478
src/components/organisms/FuneralFinder/FuneralFinder.tsx
Normal file
478
src/components/organisms/FuneralFinder/FuneralFinder.tsx
Normal file
@@ -0,0 +1,478 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||||
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
|
||||
import type { SxProps, Theme } from '@mui/material/styles';
|
||||
import { Typography } from '../../atoms/Typography';
|
||||
import { Button } from '../../atoms/Button';
|
||||
import { Chip } from '../../atoms/Chip';
|
||||
import { Input } from '../../atoms/Input';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
/** A funeral type option (dynamic, from API) */
|
||||
export interface FuneralTypeOption {
|
||||
/** Unique identifier */
|
||||
id: string;
|
||||
/** Display label */
|
||||
label: string;
|
||||
}
|
||||
|
||||
/** Search parameters returned when the user submits */
|
||||
export interface FuneralSearchParams {
|
||||
/** "arrange" (immediate need) or "preplan" */
|
||||
intent: 'arrange' | 'preplan';
|
||||
/** Only present when intent is "preplan" */
|
||||
planningFor?: 'myself' | 'someone-else';
|
||||
/** Selected funeral type ID */
|
||||
funeralTypeId: string;
|
||||
/** Suburb or postcode entered */
|
||||
location: string;
|
||||
}
|
||||
|
||||
/** Props for the FA FuneralFinder organism */
|
||||
export interface FuneralFinderProps {
|
||||
/** Available funeral types — dynamic list from API */
|
||||
funeralTypes: FuneralTypeOption[];
|
||||
/** Called when the user clicks "Find funeral directors" */
|
||||
onSearch?: (params: FuneralSearchParams) => void;
|
||||
/** Optional heading override */
|
||||
heading?: string;
|
||||
/** Optional subheading override */
|
||||
subheading?: string;
|
||||
/** MUI sx prop for the root card */
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
// ─── Step state types ────────────────────────────────────────────────────────
|
||||
|
||||
type Intent = 'arrange' | 'preplan' | null;
|
||||
type PlanningFor = 'myself' | 'someone-else' | null;
|
||||
|
||||
type StepStatus = 'active' | 'completed' | 'locked';
|
||||
|
||||
// ─── Sub-components ──────────────────────────────────────────────────────────
|
||||
|
||||
/** Step number badge or completed checkmark */
|
||||
function StepBadge({ step, status }: { step: number; status: StepStatus }) {
|
||||
if (status === 'completed') {
|
||||
return (
|
||||
<CheckCircleIcon
|
||||
aria-hidden="true"
|
||||
sx={{
|
||||
fontSize: 24,
|
||||
color: 'var(--fa-color-brand-500)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: '50%',
|
||||
bgcolor: status === 'active' ? 'var(--fa-color-brand-500)' : 'var(--fa-color-neutral-300)',
|
||||
color: status === 'active' ? 'var(--fa-color-white)' : 'var(--fa-color-neutral-500)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '0.75rem',
|
||||
fontWeight: 600,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{step}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
/** A selectable option card within a step — uses radio semantics */
|
||||
function OptionCard({
|
||||
label,
|
||||
selected,
|
||||
onClick,
|
||||
disabled,
|
||||
}: {
|
||||
label: string;
|
||||
selected: boolean;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
component="button"
|
||||
role="radio"
|
||||
aria-checked={selected}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
sx={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
border: '2px solid',
|
||||
borderColor: selected ? 'var(--fa-color-brand-500)' : 'divider',
|
||||
borderRadius: 'var(--fa-border-radius-md)',
|
||||
bgcolor: selected ? 'var(--fa-color-surface-warm)' : 'transparent',
|
||||
cursor: disabled ? 'default' : 'pointer',
|
||||
opacity: disabled ? 0.4 : 1,
|
||||
fontFamily: 'inherit',
|
||||
fontSize: '0.875rem',
|
||||
fontWeight: 500,
|
||||
color: selected ? 'var(--fa-color-brand-700)' : 'text.primary',
|
||||
textAlign: 'left',
|
||||
transition: 'all 150ms ease-in-out',
|
||||
'&:hover:not(:disabled)': {
|
||||
borderColor: 'var(--fa-color-brand-400)',
|
||||
bgcolor: 'var(--fa-color-brand-50)',
|
||||
},
|
||||
'&:focus-visible': {
|
||||
outline: '2px solid var(--fa-color-brand-500)',
|
||||
outlineOffset: 2,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Hero search widget for the FA homepage.
|
||||
*
|
||||
* Guides users through a procedural stepped flow to find funeral directors:
|
||||
* 1. "I'm here to" — Arrange a funeral now / Pre-plan a funeral
|
||||
* 2. "I'm planning for" (conditional, only for pre-plan) — Myself / Someone else
|
||||
* 3. "Type of funeral" — dynamic list of funeral types (Cremation, Burial, etc.)
|
||||
* 4. Location — suburb or postcode input
|
||||
* 5. CTA: "Find funeral directors"
|
||||
*
|
||||
* Each step reveals progressively. Completed steps collapse to show the
|
||||
* selected value with a brand checkmark. Click a completed step to re-edit.
|
||||
* Reverting a step only resets dependent steps (e.g., changing intent from
|
||||
* "Pre-plan" to "Arrange now" removes the "I'm planning for" step).
|
||||
*
|
||||
* Composes Typography + Button + Chip + Input.
|
||||
*/
|
||||
export const FuneralFinder = React.forwardRef<HTMLDivElement, FuneralFinderProps>(
|
||||
(
|
||||
{
|
||||
funeralTypes,
|
||||
onSearch,
|
||||
heading = 'Find funeral directors near you',
|
||||
subheading = "Tell us a little about what you're looking for and we'll show you options in your area.",
|
||||
sx,
|
||||
},
|
||||
ref,
|
||||
) => {
|
||||
// ─── State ───────────────────────────────────────────────────────
|
||||
const [intent, setIntent] = React.useState<Intent>(null);
|
||||
const [planningFor, setPlanningFor] = React.useState<PlanningFor>(null);
|
||||
const [funeralTypeId, setFuneralTypeId] = React.useState<string | null>(null);
|
||||
const [location, setLocation] = React.useState('');
|
||||
|
||||
// Track which step the user is currently editing (null = auto-advance)
|
||||
const [editingStep, setEditingStep] = React.useState<number | null>(null);
|
||||
|
||||
// ─── Derived state ──────────────────────────────────────────────
|
||||
const needsPlanningFor = intent === 'preplan';
|
||||
const funeralTypeLabel = funeralTypes.find((ft) => ft.id === funeralTypeId)?.label;
|
||||
|
||||
// Determine step statuses
|
||||
const getStepStatus = (step: number): StepStatus => {
|
||||
if (editingStep === step) return 'active';
|
||||
|
||||
switch (step) {
|
||||
case 1:
|
||||
return intent ? 'completed' : 'active';
|
||||
case 2: // planning for (conditional)
|
||||
if (!needsPlanningFor) return 'locked';
|
||||
if (planningFor) return 'completed';
|
||||
return intent ? 'active' : 'locked';
|
||||
case 3: // funeral type
|
||||
if (funeralTypeId) return 'completed';
|
||||
if (!intent) return 'locked';
|
||||
if (needsPlanningFor && !planningFor) return 'locked';
|
||||
return 'active';
|
||||
case 4: // location
|
||||
if (!funeralTypeId) return 'locked';
|
||||
return 'active';
|
||||
default:
|
||||
return 'locked';
|
||||
}
|
||||
};
|
||||
|
||||
// Step numbering adjusts when planning-for step is hidden
|
||||
const getVisibleStepNumber = (step: number): number => {
|
||||
if (!needsPlanningFor && step > 2) return step - 1;
|
||||
return step;
|
||||
};
|
||||
|
||||
// Can submit?
|
||||
const canSubmit =
|
||||
intent !== null &&
|
||||
(!needsPlanningFor || planningFor !== null) &&
|
||||
funeralTypeId !== null &&
|
||||
location.trim().length > 0;
|
||||
|
||||
// ─── Handlers ───────────────────────────────────────────────────
|
||||
const handleIntentSelect = (value: Intent) => {
|
||||
setIntent(value);
|
||||
// If switching from preplan to arrange, clear planningFor
|
||||
if (value === 'arrange') {
|
||||
setPlanningFor(null);
|
||||
}
|
||||
setEditingStep(null);
|
||||
};
|
||||
|
||||
const handlePlanningForSelect = (value: PlanningFor) => {
|
||||
setPlanningFor(value);
|
||||
setEditingStep(null);
|
||||
};
|
||||
|
||||
const handleFuneralTypeSelect = (id: string) => {
|
||||
setFuneralTypeId(id);
|
||||
setEditingStep(null);
|
||||
};
|
||||
|
||||
const handleRevert = (step: number) => {
|
||||
setEditingStep(step);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (!canSubmit || !intent || !funeralTypeId) return;
|
||||
onSearch?.({
|
||||
intent,
|
||||
planningFor: needsPlanningFor ? (planningFor ?? undefined) : undefined,
|
||||
funeralTypeId,
|
||||
location: location.trim(),
|
||||
});
|
||||
};
|
||||
|
||||
// ─── Render helpers ─────────────────────────────────────────────
|
||||
const renderStep = (
|
||||
stepNum: number,
|
||||
label: string,
|
||||
status: StepStatus,
|
||||
completedValue: string | undefined,
|
||||
content: React.ReactNode,
|
||||
) => {
|
||||
const visibleNum = getVisibleStepNumber(stepNum);
|
||||
const isCompleted = status === 'completed' && editingStep !== stepNum;
|
||||
const isActive = status === 'active' || editingStep === stepNum;
|
||||
const isLocked = status === 'locked';
|
||||
|
||||
return (
|
||||
<Box
|
||||
key={stepNum}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 1.5,
|
||||
alignItems: 'flex-start',
|
||||
opacity: isLocked ? 0.5 : 1,
|
||||
transition: 'opacity 150ms',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ pt: 0.25 }}>
|
||||
<StepBadge step={visibleNum} status={isCompleted ? 'completed' : isActive ? 'active' : 'locked'} />
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Typography
|
||||
variant="overlineSm"
|
||||
sx={{
|
||||
display: 'block',
|
||||
color: isLocked ? 'text.disabled' : 'text.secondary',
|
||||
mb: isCompleted ? 0 : 1,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Typography>
|
||||
|
||||
{isCompleted && completedValue && (
|
||||
<Box
|
||||
component="button"
|
||||
onClick={() => handleRevert(stepNum)}
|
||||
sx={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
p: 0,
|
||||
cursor: 'pointer',
|
||||
fontFamily: 'inherit',
|
||||
fontSize: '0.9375rem',
|
||||
fontWeight: 600,
|
||||
color: 'text.primary',
|
||||
textAlign: 'left',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.75,
|
||||
'&:hover': { color: 'primary.main' },
|
||||
'&:focus-visible': {
|
||||
outline: '2px solid var(--fa-color-brand-500)',
|
||||
outlineOffset: 2,
|
||||
borderRadius: '2px',
|
||||
},
|
||||
}}
|
||||
aria-label={`${label}: ${completedValue}. Click to change.`}
|
||||
>
|
||||
{completedValue}
|
||||
<EditOutlinedIcon sx={{ fontSize: 14, opacity: 0.5 }} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{isActive && content}
|
||||
|
||||
{isLocked && (
|
||||
<Typography variant="caption" color="text.disabled">
|
||||
Complete the step above
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Render ─────────────────────────────────────────────────────
|
||||
return (
|
||||
<Box
|
||||
ref={ref}
|
||||
sx={[
|
||||
{
|
||||
bgcolor: 'background.paper',
|
||||
borderRadius: 'var(--fa-card-border-radius-default)',
|
||||
boxShadow: 'var(--fa-shadow-md)',
|
||||
p: { xs: 3, sm: 4 },
|
||||
},
|
||||
...(Array.isArray(sx) ? sx : [sx]),
|
||||
]}
|
||||
>
|
||||
{/* Header */}
|
||||
<Typography
|
||||
variant="h4"
|
||||
component="h2"
|
||||
sx={{ fontFamily: 'var(--fa-font-family-display)', textAlign: 'center', mb: 1 }}
|
||||
>
|
||||
{heading}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ textAlign: 'center', mb: 3, maxWidth: 400, mx: 'auto' }}
|
||||
>
|
||||
{subheading}
|
||||
</Typography>
|
||||
|
||||
{/* Steps */}
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
|
||||
{/* Step 1: Intent */}
|
||||
{renderStep(
|
||||
1,
|
||||
"I'M HERE TO",
|
||||
getStepStatus(1),
|
||||
intent === 'arrange' ? 'Arrange a funeral now' : intent === 'preplan' ? 'Pre-plan a funeral' : undefined,
|
||||
<Box role="radiogroup" aria-label="I'm here to" sx={{ display: 'flex', gap: 1.5, flexDirection: { xs: 'column', sm: 'row' } }}>
|
||||
<OptionCard
|
||||
label="Arrange a funeral now"
|
||||
selected={intent === 'arrange'}
|
||||
onClick={() => handleIntentSelect('arrange')}
|
||||
/>
|
||||
<OptionCard
|
||||
label="Pre-plan a funeral"
|
||||
selected={intent === 'preplan'}
|
||||
onClick={() => handleIntentSelect('preplan')}
|
||||
/>
|
||||
</Box>,
|
||||
)}
|
||||
|
||||
{/* Step 2: Planning for (conditional) */}
|
||||
{needsPlanningFor &&
|
||||
renderStep(
|
||||
2,
|
||||
"I'M PLANNING FOR",
|
||||
getStepStatus(2),
|
||||
planningFor === 'myself' ? 'Myself' : planningFor === 'someone-else' ? 'Someone else' : undefined,
|
||||
<Box role="radiogroup" aria-label="I'm planning for" sx={{ display: 'flex', gap: 1.5, flexDirection: { xs: 'column', sm: 'row' } }}>
|
||||
<OptionCard
|
||||
label="Myself"
|
||||
selected={planningFor === 'myself'}
|
||||
onClick={() => handlePlanningForSelect('myself')}
|
||||
/>
|
||||
<OptionCard
|
||||
label="Someone else"
|
||||
selected={planningFor === 'someone-else'}
|
||||
onClick={() => handlePlanningForSelect('someone-else')}
|
||||
/>
|
||||
</Box>,
|
||||
)}
|
||||
|
||||
{/* Step 3: Funeral type */}
|
||||
{renderStep(
|
||||
3,
|
||||
'TYPE OF FUNERAL',
|
||||
getStepStatus(3),
|
||||
funeralTypeLabel,
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{funeralTypes.map((ft) => (
|
||||
<Chip
|
||||
key={ft.id}
|
||||
label={ft.label}
|
||||
variant={funeralTypeId === ft.id ? 'filled' : 'outlined'}
|
||||
selected={funeralTypeId === ft.id}
|
||||
onClick={() => handleFuneralTypeSelect(ft.id)}
|
||||
/>
|
||||
))}
|
||||
</Box>,
|
||||
)}
|
||||
|
||||
{/* Step 4: Location */}
|
||||
{renderStep(
|
||||
4,
|
||||
'LOCATION',
|
||||
getStepStatus(4),
|
||||
undefined, // Location doesn't collapse — always editable when unlocked
|
||||
<Input
|
||||
placeholder="Suburb or postcode"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
size="small"
|
||||
fullWidth
|
||||
inputProps={{ 'aria-label': 'Location — suburb or postcode' }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && canSubmit) handleSubmit();
|
||||
}}
|
||||
/>,
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* CTA */}
|
||||
<Box sx={{ mt: 3 }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
fullWidth
|
||||
disabled={!canSubmit}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Find funeral directors
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Trust signal */}
|
||||
<Typography
|
||||
variant="captionSm"
|
||||
color="text.secondary"
|
||||
sx={{ textAlign: 'center', display: 'block', mt: 1.5 }}
|
||||
>
|
||||
Free to use · No obligation
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
FuneralFinder.displayName = 'FuneralFinder';
|
||||
export default FuneralFinder;
|
||||
Reference in New Issue
Block a user