diff --git a/src/components/pages/CemeteryStep/CemeteryStep.stories.tsx b/src/components/pages/CemeteryStep/CemeteryStep.stories.tsx index 25293cf..bb1b600 100644 --- a/src/components/pages/CemeteryStep/CemeteryStep.stories.tsx +++ b/src/components/pages/CemeteryStep/CemeteryStep.stories.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { CemeteryStep } from './CemeteryStep'; -import type { CemeteryStepValues, CemeteryOption } from './CemeteryStep'; +import type { CemeteryStepValues } from './CemeteryStep'; import { Navigation } from '../../organisms/Navigation'; import Box from '@mui/material/Box'; @@ -34,19 +34,10 @@ const nav = ( /> ); -const sampleCemeteries: CemeteryOption[] = [ - { value: 'rookwood', label: 'Rookwood Cemetery' }, - { value: 'northern-suburbs', label: 'Northern Suburbs Memorial Gardens' }, - { value: 'macquarie-park', label: 'Macquarie Park Cemetery' }, - { value: 'pinegrove', label: 'Pinegrove Memorial Park' }, - { value: 'waverley', label: 'Waverley Cemetery' }, - { value: 'botany', label: 'Botany Cemetery' }, -]; - const defaultValues: CemeteryStepValues = { ownPlot: null, hasPreference: null, - selectedCemetery: '', + cemeterySearch: '', }; // ─── Meta ──────────────────────────────────────────────────────────────────── @@ -76,7 +67,6 @@ export const Default: Story = { onContinue={() => alert('Continue')} onBack={() => alert('Back')} onSaveAndExit={() => alert('Save')} - cemeteries={sampleCemeteries} navigation={nav} /> ); @@ -99,7 +89,6 @@ export const OwnsPlot: Story = { onContinue={() => alert('Continue')} onBack={() => alert('Back')} onSaveAndExit={() => alert('Save')} - cemeteries={sampleCemeteries} navigation={nav} /> ); @@ -123,7 +112,6 @@ export const HasPreference: Story = { onContinue={() => alert('Continue')} onBack={() => alert('Back')} onSaveAndExit={() => alert('Save')} - cemeteries={sampleCemeteries} navigation={nav} /> ); @@ -147,7 +135,6 @@ export const NoPreference: Story = { onContinue={() => alert('Continue')} onBack={() => alert('Back')} onSaveAndExit={() => alert('Save')} - cemeteries={sampleCemeteries} navigation={nav} /> ); @@ -166,7 +153,6 @@ export const PrePlanning: Story = { onChange={setValues} onContinue={() => alert('Continue')} onBack={() => alert('Back')} - cemeteries={sampleCemeteries} isPrePlanning navigation={nav} /> diff --git a/src/components/pages/CemeteryStep/CemeteryStep.tsx b/src/components/pages/CemeteryStep/CemeteryStep.tsx index 65187d2..af3e912 100644 --- a/src/components/pages/CemeteryStep/CemeteryStep.tsx +++ b/src/components/pages/CemeteryStep/CemeteryStep.tsx @@ -1,11 +1,9 @@ import React from 'react'; import Box from '@mui/material/Box'; -import Autocomplete from '@mui/material/Autocomplete'; -import TextField from '@mui/material/TextField'; import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined'; -import InputAdornment from '@mui/material/InputAdornment'; import type { SxProps, Theme } from '@mui/material/styles'; import { WizardLayout } from '../../templates/WizardLayout'; +import { Input } from '../../atoms/Input'; import { ToggleButtonGroup } from '../../atoms/ToggleButtonGroup'; import { Collapse } from '../../atoms/Collapse'; import { Typography } from '../../atoms/Typography'; @@ -14,27 +12,21 @@ import { Divider } from '../../atoms/Divider'; // ─── Types ─────────────────────────────────────────────────────────────────── -/** A cemetery option for the dropdown */ -export interface CemeteryOption { - value: string; - label: string; -} - /** Form values for the cemetery step */ export interface CemeteryStepValues { /** Does the family already own a burial plot? */ ownPlot: 'yes' | 'no' | 'unsure' | null; /** Do they have a preference for a cemetery? (when ownPlot ≠ yes) */ hasPreference: 'yes' | 'no' | 'unsure' | null; - /** Selected cemetery ID */ - selectedCemetery: string; + /** Cemetery search text (freetext — parent wires to Places API) */ + cemeterySearch: string; } /** Field-level error messages */ export interface CemeteryStepErrors { ownPlot?: string; hasPreference?: string; - selectedCemetery?: string; + cemeterySearch?: string; } /** Props for the CemeteryStep page component */ @@ -53,8 +45,8 @@ export interface CemeteryStepProps { errors?: CemeteryStepErrors; /** Whether Continue is loading */ loading?: boolean; - /** Available cemeteries for the dropdown */ - cemeteries: CemeteryOption[]; + /** Slot for a location autocomplete (e.g. Google Places) — rendered below the search input */ + searchSlot?: React.ReactNode; /** Whether this is a pre-planning flow */ isPrePlanning?: boolean; /** Navigation bar */ @@ -95,7 +87,7 @@ export const CemeteryStep: React.FC = ({ onSaveAndExit, errors, loading = false, - cemeteries, + searchSlot, isPrePlanning = false, navigation, progressStepper, @@ -113,7 +105,7 @@ export const CemeteryStep: React.FC = ({ ownPlot: (value ?? null) as CemeteryStepValues['ownPlot'], // Reset dependent fields hasPreference: null, - selectedCemetery: '', + cemeterySearch: '', }); }; @@ -121,7 +113,7 @@ export const CemeteryStep: React.FC = ({ onChange({ ...values, hasPreference: (value ?? null) as CemeteryStepValues['hasPreference'], - selectedCemetery: '', + cemeterySearch: '', }); }; @@ -181,32 +173,17 @@ export const CemeteryStep: React.FC = ({ Tell us where the burial plot is located. - option.label} - value={cemeteries.find((c) => c.value === values.selectedCemetery) ?? null} - onChange={(_, option) => - onChange({ ...values, selectedCemetery: option?.value ?? '' }) - } - renderInput={(params) => ( - - - - ), - }} - /> - )} - noOptionsText="No cemeteries found" - fullWidth - /> + {searchSlot ?? ( + onChange({ ...values, cemeterySearch: e.target.value })} + placeholder="Search for a cemetery or location..." + startIcon={} + error={!!errors?.cemeterySearch} + helperText={errors?.cemeterySearch} + fullWidth + /> + )} @@ -232,32 +209,17 @@ export const CemeteryStep: React.FC = ({ {/* ─── Preference: search cemetery ─── */} - option.label} - value={cemeteries.find((c) => c.value === values.selectedCemetery) ?? null} - onChange={(_, option) => - onChange({ ...values, selectedCemetery: option?.value ?? '' }) - } - renderInput={(params) => ( - - - - ), - }} - /> - )} - noOptionsText="No cemeteries found" - fullWidth - /> + {searchSlot ?? ( + onChange({ ...values, cemeterySearch: e.target.value })} + placeholder="Search for a cemetery or location..." + startIcon={} + error={!!errors?.cemeterySearch} + helperText={errors?.cemeterySearch} + fullWidth + /> + )} diff --git a/src/components/pages/CemeteryStep/index.ts b/src/components/pages/CemeteryStep/index.ts index 61b0b7f..634819e 100644 --- a/src/components/pages/CemeteryStep/index.ts +++ b/src/components/pages/CemeteryStep/index.ts @@ -1,7 +1,2 @@ export { CemeteryStep, default } from './CemeteryStep'; -export type { - CemeteryStepProps, - CemeteryStepValues, - CemeteryStepErrors, - CemeteryOption, -} from './CemeteryStep'; +export type { CemeteryStepProps, CemeteryStepValues, CemeteryStepErrors } from './CemeteryStep';