Fix layout variants for VenueStep, CoffinsStep, CoffinDetailsStep

- VenueStep: centered-form → list-map (venue cards left, map slot right) Matches ProvidersStep pattern with vertical card stack + map placeholder - CoffinsStep: centered-form → grid-sidebar (filter sidebar left, card grid right) Filters now in dedicated sidebar, cards fill the wider main area - CoffinDetailsStep: centered-form → detail-toggles (profile left, options right) Coffin image + specs on left, option RadioGroups on right Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 15:16:01 +11:00
parent a6524a82fe
commit 1e91929411
3 changed files with 311 additions and 301 deletions
--- a/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
+++ b/src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
@@ -188,61 +188,25 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
  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,
-          }}
-        >
+  // ─── Left panel: Coffin profile (image + specs) ───
+  const profilePanel = (
+    <Box>
      {/* 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,
+          width: '100%',
+          height: { xs: 240, md: 320 },
+          borderRadius: 2,
          backgroundImage: `url(${coffin.imageUrl})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundColor: 'var(--fa-color-surface-subtle)',
+          mb: 3,
        }}
      />

-          {/* Details */}
-          <Box sx={{ flex: 1 }}>
      <Typography variant="h4" sx={{ mb: 1 }}>
        {coffin.name}
      </Typography>
@@ -285,8 +249,25 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
        </Typography>
      )}
    </Box>
-        </Box>
-      </Paper>
+  );
+
+  // ─── Right panel: Option selectors + CTAs ───
+  const optionsPanel = (
+    <Box>
+      <Typography variant="h4" 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"
@@ -296,7 +277,6 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
          onContinue();
        }}
      >
-        {/* ─── Option sections ─── */}
        <OptionSection
          legend="Handle style"
          options={handleOptions}
@@ -342,6 +322,23 @@ export const CoffinDetailsStep: React.FC<CoffinDetailsStepProps> = ({
          </Button>
        </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>
  );
 };
--- a/src/components/pages/CoffinsStep/CoffinsStep.tsx
+++ b/src/components/pages/CoffinsStep/CoffinsStep.tsx
@@ -147,57 +147,20 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
    onChange({ ...values, [field]: value, page: 1 });
  };

-  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}>
-        Choose a coffin
+  // ─── Sidebar content (filters) ───
+  const sidebar = (
+    <Box sx={{ py: { xs: 0, md: 2 } }}>
+      <Typography variant="h5" sx={{ mb: 2, display: { xs: 'none', md: 'block' } }}>
+        Filters
      </Typography>

-      <Typography variant="body1" color="text.secondary" sx={{ mb: 1 }}>
-        {isPrePlanning
-          ? 'Browse the range to get an idea of styles and pricing. You can change your selection later.'
-          : 'Browse the range available with your selected provider. Use the filters to narrow your options.'}
-      </Typography>
-
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
-        Selecting a coffin within your package allowance won&apos;t change your total. Coffins
-        outside the allowance will adjust the price.
-      </Typography>
-
-      <Box
-        component="form"
-        noValidate
-        onSubmit={(e: React.FormEvent) => {
-          e.preventDefault();
-          onContinue();
-        }}
-      >
-        {/* ─── Filters ─── */}
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: { xs: 'column', sm: 'row' },
-            gap: 2,
-            mb: 3,
-          }}
-        >
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <TextField
          select
          label="Categories"
          value={values.categoryFilter}
          onChange={(e) => handleFilterChange('categoryFilter', e.target.value)}
-            sx={{ minWidth: 200 }}
+          fullWidth
        >
          {categories.map((cat) => (
            <MenuItem key={cat.value} value={cat.value}>
@@ -211,7 +174,7 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
          label="Price range"
          value={values.priceFilter}
          onChange={(e) => handleFilterChange('priceFilter', e.target.value)}
-            sx={{ minWidth: 200 }}
+          fullWidth
        >
          {priceRanges.map((range) => (
            <MenuItem key={range.value} value={range.value}>
@@ -220,13 +183,46 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
          ))}
        </TextField>
      </Box>
+    </Box>
+  );

-        {/* ─── Results count ─── */}
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }} aria-live="polite">
+  // ─── Main content (card grid) ───
+  const mainContent = (
+    <Box
+      component="form"
+      noValidate
+      onSubmit={(e: React.FormEvent) => {
+        e.preventDefault();
+        onContinue();
+      }}
+    >
+      {/* Page heading */}
+      <Typography variant="h4" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+        Choose a coffin
+      </Typography>
+
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+        {isPrePlanning
+          ? 'Browse the range to get an idea of styles and pricing. You can change your selection later.'
+          : 'Browse the range available with your selected provider. Use the filters to narrow your options.'}
+      </Typography>
+
+      <Typography variant="caption" color="text.secondary" sx={{ mb: 3, display: 'block' }}>
+        Selecting a coffin within your package allowance won&apos;t change your total. Coffins
+        outside the allowance will adjust the price.
+      </Typography>
+
+      {/* Results count */}
+      <Typography
+        variant="caption"
+        color="text.secondary"
+        sx={{ mb: 2, display: 'block' }}
+        aria-live="polite"
+      >
        Showing {displayCount} coffin{displayCount !== 1 ? 's' : ''}
      </Typography>

-        {/* ─── Coffin card grid ─── */}
+      {/* Coffin card grid */}
      <Box
        role="radiogroup"
        aria-label="Available coffins"
@@ -235,7 +231,7 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
          gridTemplateColumns: {
            xs: '1fr',
            sm: 'repeat(2, 1fr)',
-              md: 'repeat(3, 1fr)',
+            lg: 'repeat(3, 1fr)',
          },
          gap: 2,
          mb: 3,
@@ -342,6 +338,22 @@ export const CoffinsStep: React.FC<CoffinsStepProps> = ({
        </Button>
      </Box>
    </Box>
+  );
+
+  return (
+    <WizardLayout
+      variant="grid-sidebar"
+      navigation={navigation}
+      progressStepper={progressStepper}
+      runningTotal={runningTotal}
+      showBackLink={!!onBack}
+      backLabel="Back"
+      onBack={onBack}
+      hideHelpBar={hideHelpBar}
+      sx={sx}
+      secondaryPanel={mainContent}
+    >
+      {sidebar}
    </WizardLayout>
  );
 };
--- a/src/components/pages/VenueStep/VenueStep.tsx
+++ b/src/components/pages/VenueStep/VenueStep.tsx
@@ -13,7 +13,6 @@ import { Collapse } from '../../atoms/Collapse';
 import { Chip } from '../../atoms/Chip';
 import { Typography } from '../../atoms/Typography';
 import { Button } from '../../atoms/Button';
-import { Divider } from '../../atoms/Divider';

 // ─── Types ───────────────────────────────────────────────────────────────────

@@ -86,6 +85,8 @@ export interface VenueStepProps {
  locationName?: string;
  /** Whether this is a pre-planning flow */
  isPrePlanning?: boolean;
+  /** Map panel content — slot for map integration */
+  mapPanel?: React.ReactNode;
  /** Navigation bar — passed through to WizardLayout */
  navigation?: React.ReactNode;
  /** Progress stepper — passed through to WizardLayout */
@@ -131,6 +132,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
  ],
  locationName,
  isPrePlanning = false,
+  mapPanel,
  navigation,
  progressStepper,
  runningTotal,
@@ -162,7 +164,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({

  return (
    <WizardLayout
-      variant="centered-form"
+      variant="list-map"
      navigation={navigation}
      progressStepper={progressStepper}
      runningTotal={runningTotal}
@@ -171,13 +173,32 @@ export const VenueStep: React.FC<VenueStepProps> = ({
      onBack={onBack}
      hideHelpBar={hideHelpBar}
      sx={sx}
+      secondaryPanel={
+        mapPanel || (
+          <Box
+            sx={{
+              bgcolor: 'var(--fa-color-sage-50)',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderLeft: '1px solid',
+              borderColor: 'divider',
+            }}
+          >
+            <Typography variant="body1" color="text.secondary">
+              Map coming soon
+            </Typography>
+          </Box>
+        )
+      }
    >
      {/* Page heading */}
-      <Typography variant="display3" component="h1" sx={{ mb: 1 }} tabIndex={-1}>
+      <Typography variant="h4" component="h1" sx={{ mb: 0.5 }} tabIndex={-1}>
        Where would you like the service?
      </Typography>

-      <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
        {isPrePlanning
          ? 'Browse available venues. Your choice can be changed later.'
          : 'Choose a venue for the funeral service. You can filter by location, features, and religion.'}
@@ -230,15 +251,7 @@ export const VenueStep: React.FC<VenueStepProps> = ({
        <Box
          role="radiogroup"
          aria-label="Available venues"
-          sx={{
-            display: 'grid',
-            gridTemplateColumns: {
-              xs: '1fr',
-              sm: 'repeat(2, 1fr)',
-            },
-            gap: 2,
-            mb: 3,
-          }}
+          sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 3 }}
        >
          {venues.map((venue, index) => (
            <VenueCard
@@ -377,24 +390,12 @@ export const VenueStep: React.FC<VenueStepProps> = ({
          </Box>
        </Collapse>

-        <Divider sx={{ my: 3 }} />
-
        {/* CTAs */}
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            flexDirection: { xs: 'column-reverse', sm: 'row' },
-            gap: 2,
-          }}
-        >
-          {onSaveAndExit ? (
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, pb: 2 }}>
+          {onSaveAndExit && (
            <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
-              Save and continue later
+              Save and exit
            </Button>
-          ) : (
-            <Box />
          )}
          <Button type="submit" variant="contained" size="large" loading={loading}>
            Continue