Add SummaryStep, PaymentStep, ConfirmationStep (wizard steps 13-15)
SummaryStep (step 13): - Accordion sections with edit IconButtons linking back to each step - dl/dt/dd definition list for label-value pairs - Total bar with prominent price display (aria-live) - Share plan icon button, deposit display - Pre-planning: "Save your plan" CTA; at-need: "Confirm" CTA PaymentStep (step 14): - Payment plan (full/deposit) shown before method (amount before how) - ToggleButtonGroup for plan + method selection - Card: PayWay iframe slot with placeholder; Bank: account details display - Terms checkbox with service agreement + privacy links - Security reassurance (lock icon, no-surprise copy) ConfirmationStep (step 15): - Terminal page — no back button, no progress indicator - At-need: "submitted" + callback timeframe + arranger contact - Pre-planning: "saved" + return-anytime + family-ready copy - Muted success icon (not celebratory), next-steps link buttons - VenueCard selected prop also staged (from step 7 work) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
150
src/components/pages/SummaryStep/SummaryStep.stories.tsx
Normal file
150
src/components/pages/SummaryStep/SummaryStep.stories.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { SummaryStep } from './SummaryStep';
|
||||
import type { SummarySection } from './SummaryStep';
|
||||
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 sampleSections: SummarySection[] = [
|
||||
{
|
||||
id: 'provider',
|
||||
title: 'Funeral Provider',
|
||||
editStepId: 'providers',
|
||||
items: [
|
||||
{ label: 'Provider', value: 'H. Parsons Funeral Directors' },
|
||||
{ label: 'Package', value: 'Essential Service Package', price: 4950 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'venue',
|
||||
title: 'Service Venue',
|
||||
editStepId: 'venue',
|
||||
items: [
|
||||
{ label: 'Venue', value: 'West Chapel, Strathfield', price: 900 },
|
||||
{ label: 'Photo presentation', value: 'Included', price: 150 },
|
||||
{ label: 'Livestream', value: 'Included', price: 200 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'crematorium',
|
||||
title: 'Crematorium',
|
||||
editStepId: 'crematorium',
|
||||
items: [
|
||||
{ label: 'Crematorium', value: 'Warrill Park Crematorium', price: 850 },
|
||||
{ label: 'Following hearse', value: 'Yes' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'coffin',
|
||||
title: 'Coffin',
|
||||
editStepId: 'coffins',
|
||||
items: [
|
||||
{ label: 'Coffin', value: 'Cedar Classic', price: 2800 },
|
||||
{ label: 'Handles', value: 'Brass Bar Handle', price: 0 },
|
||||
{ label: 'Lining', value: 'White Satin', price: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'services',
|
||||
title: 'Additional Services',
|
||||
editStepId: 'additional_services',
|
||||
items: [
|
||||
{ label: 'Funeral announcement', value: 'Included' },
|
||||
{ label: 'Bearing', value: 'Family and friends' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// ─── Meta ────────────────────────────────────────────────────────────────────
|
||||
|
||||
const meta: Meta<typeof SummaryStep> = {
|
||||
title: 'Pages/SummaryStep',
|
||||
component: SummaryStep,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SummaryStep>;
|
||||
|
||||
// ─── At-need (default) ──────────────────────────────────────────────────────
|
||||
|
||||
/** Full summary for at-need flow */
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<SummaryStep
|
||||
sections={sampleSections}
|
||||
totalPrice={9850}
|
||||
depositAmount={2000}
|
||||
onConfirm={() => alert('Confirmed — proceed to payment')}
|
||||
onBack={() => alert('Back')}
|
||||
onSaveAndExit={() => alert('Save')}
|
||||
onEdit={(stepId) => alert(`Edit: ${stepId}`)}
|
||||
onShare={() => alert('Share plan')}
|
||||
navigation={nav}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
// ─── Pre-planning ───────────────────────────────────────────────────────────
|
||||
|
||||
/** Pre-planning variant — "Save your plan" CTA, no payment */
|
||||
export const PrePlanning: Story = {
|
||||
render: () => (
|
||||
<SummaryStep
|
||||
sections={sampleSections}
|
||||
totalPrice={9850}
|
||||
onConfirm={() => alert('Plan saved')}
|
||||
onBack={() => alert('Back')}
|
||||
onEdit={(stepId) => alert(`Edit: ${stepId}`)}
|
||||
onShare={() => alert('Share plan')}
|
||||
isPrePlanning
|
||||
navigation={nav}
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
// ─── Loading ────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Confirm button loading */
|
||||
export const Loading: Story = {
|
||||
render: () => (
|
||||
<SummaryStep
|
||||
sections={sampleSections}
|
||||
totalPrice={9850}
|
||||
onConfirm={() => {}}
|
||||
loading
|
||||
navigation={nav}
|
||||
/>
|
||||
),
|
||||
};
|
||||
Reference in New Issue
Block a user