Add CoffinDetailsStep page (wizard step 11)
- Coffin profile: image + specs grid + description + price note - Three product option sections: handles, lining, name plate - RadioGroup per section with branded selected state (brand border + warm bg) - Price impact inline: "Included" for allowance items, "+$X" for upgrades - Options hidden when not offered by provider (graceful empty state) - Responsive: image stacks above details on mobile Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,205 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react';
|
||||||
|
import { CoffinDetailsStep } from './CoffinDetailsStep';
|
||||||
|
import type { CoffinDetailsStepValues, CoffinProfile, ProductOption } from './CoffinDetailsStep';
|
||||||
|
import { Navigation } from '../../organisms/Navigation';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
|
||||||
|
// ─── Helpers ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const FALogo = () => (
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Box
|
||||||
|
component="img"
|
||||||
|
src="/brandlogo/logo-full.svg"
|
||||||
|
alt="Funeral Arranger"
|
||||||
|
sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
component="img"
|
||||||
|
src="/brandlogo/logo-short.svg"
|
||||||
|
alt="Funeral Arranger"
|
||||||
|
sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
|
const nav = (
|
||||||
|
<Navigation
|
||||||
|
logo={<FALogo />}
|
||||||
|
items={[
|
||||||
|
{ label: 'FAQ', href: '/faq' },
|
||||||
|
{ label: 'Contact Us', href: '/contact' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const sampleCoffin: CoffinProfile = {
|
||||||
|
name: 'Cedar Classic',
|
||||||
|
imageUrl: 'https://images.unsplash.com/photo-1618220179428-22790b461013?w=600&h=400&fit=crop',
|
||||||
|
description:
|
||||||
|
'A beautifully crafted solid cedar coffin with a natural satin finish. Handmade with care and attention to detail.',
|
||||||
|
specs: [
|
||||||
|
{ label: 'Range', value: 'Solid Timber' },
|
||||||
|
{ label: 'Shape', value: 'Coffin' },
|
||||||
|
{ label: 'Wood', value: 'Cedar' },
|
||||||
|
{ label: 'Finish', value: 'Satin' },
|
||||||
|
{ label: 'Hardware', value: 'Brass' },
|
||||||
|
],
|
||||||
|
price: 2800,
|
||||||
|
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> = {
|
||||||
|
title: 'Pages/CoffinDetailsStep',
|
||||||
|
component: CoffinDetailsStep,
|
||||||
|
tags: ['autodocs'],
|
||||||
|
parameters: {
|
||||||
|
layout: 'fullscreen',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof CoffinDetailsStep>;
|
||||||
|
|
||||||
|
// ─── Interactive (default) ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** Full customisation flow */
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─── Pre-planning ───────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** Pre-planning variant */
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
350
src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
Normal file
350
src/components/pages/CoffinDetailsStep/CoffinDetailsStep.tsx
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
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';
|
||||||
|
import { Button } from '../../atoms/Button';
|
||||||
|
import { Divider } from '../../atoms/Divider';
|
||||||
|
|
||||||
|
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/** Coffin specification key-value pair */
|
||||||
|
export interface CoffinSpec {
|
||||||
|
label: 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 */
|
||||||
|
export interface CoffinProfile {
|
||||||
|
name: string;
|
||||||
|
imageUrl: string;
|
||||||
|
description?: string;
|
||||||
|
specs?: CoffinSpec[];
|
||||||
|
price: number;
|
||||||
|
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 */
|
||||||
|
onBack?: () => void;
|
||||||
|
/** Callback for save-and-exit */
|
||||||
|
onSaveAndExit?: () => void;
|
||||||
|
/** Whether the Continue button is in a loading state */
|
||||||
|
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 */
|
||||||
|
navigation?: React.ReactNode;
|
||||||
|
/** Progress stepper */
|
||||||
|
progressStepper?: React.ReactNode;
|
||||||
|
/** Running total */
|
||||||
|
runningTotal?: React.ReactNode;
|
||||||
|
/** Hide the help bar */
|
||||||
|
hideHelpBar?: boolean;
|
||||||
|
/** MUI sx prop */
|
||||||
|
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".
|
||||||
|
*
|
||||||
|
* 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,
|
||||||
|
runningTotal,
|
||||||
|
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,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 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,
|
||||||
|
backgroundImage: `url(${coffin.imageUrl})`,
|
||||||
|
backgroundSize: 'cover',
|
||||||
|
backgroundPosition: 'center',
|
||||||
|
backgroundColor: 'var(--fa-color-surface-subtle)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<Box sx={{ flex: 1 }}>
|
||||||
|
<Typography variant="h4" sx={{ mb: 1 }}>
|
||||||
|
{coffin.name}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
{coffin.description && (
|
||||||
|
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||||
|
{coffin.description}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Specs */}
|
||||||
|
{coffin.specs && coffin.specs.length > 0 && (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'grid',
|
||||||
|
gridTemplateColumns: 'auto 1fr',
|
||||||
|
gap: 0.5,
|
||||||
|
columnGap: 2,
|
||||||
|
mb: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{coffin.specs.map((spec) => (
|
||||||
|
<React.Fragment key={spec.label}>
|
||||||
|
<Typography variant="labelSm" color="text.secondary">
|
||||||
|
{spec.label}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body2">{spec.value}</Typography>
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Price */}
|
||||||
|
<Typography variant="h5" color="primary">
|
||||||
|
${coffin.price.toLocaleString('en-AU')}
|
||||||
|
</Typography>
|
||||||
|
{coffin.priceNote && (
|
||||||
|
<Typography variant="body2" color="text.secondary">
|
||||||
|
{coffin.priceNote}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Paper>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
component="form"
|
||||||
|
noValidate
|
||||||
|
onSubmit={(e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
onContinue();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* ─── Option sections ─── */}
|
||||||
|
<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
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</WizardLayout>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
CoffinDetailsStep.displayName = 'CoffinDetailsStep';
|
||||||
|
export default CoffinDetailsStep;
|
||||||
8
src/components/pages/CoffinDetailsStep/index.ts
Normal file
8
src/components/pages/CoffinDetailsStep/index.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
export { CoffinDetailsStep, default } from './CoffinDetailsStep';
|
||||||
|
export type {
|
||||||
|
CoffinDetailsStepProps,
|
||||||
|
CoffinDetailsStepValues,
|
||||||
|
CoffinProfile,
|
||||||
|
CoffinSpec,
|
||||||
|
ProductOption,
|
||||||
|
} from './CoffinDetailsStep';
|
||||||
Reference in New Issue
Block a user