Richie
36757bcdb0
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>
89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { ConfirmationStep } from './ConfirmationStep';
|
|
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' },
|
|
]}
|
|
/>
|
|
);
|
|
|
|
// ─── Meta ────────────────────────────────────────────────────────────────────
|
|
|
|
const meta: Meta<typeof ConfirmationStep> = {
|
|
title: 'Pages/ConfirmationStep',
|
|
component: ConfirmationStep,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
layout: 'fullscreen',
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof ConfirmationStep>;
|
|
|
|
// ─── At-need (default) ──────────────────────────────────────────────────────
|
|
|
|
/** At-need confirmation — arranger will call */
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<ConfirmationStep
|
|
email="jane.smith@example.com"
|
|
phone="0412 345 678"
|
|
callbackTimeframe="within 2 hours"
|
|
onViewPlan={() => alert('View plan')}
|
|
nextSteps={[
|
|
{ label: 'Start detailed arrangement', onClick: () => alert('Arrangement') },
|
|
{ label: 'Go to dashboard', onClick: () => alert('Dashboard') },
|
|
]}
|
|
navigation={nav}
|
|
/>
|
|
),
|
|
};
|
|
|
|
// ─── Pre-planning ───────────────────────────────────────────────────────────
|
|
|
|
/** Pre-planning confirmation — plan saved, return anytime */
|
|
export const PrePlanning: Story = {
|
|
render: () => (
|
|
<ConfirmationStep
|
|
isPrePlanning
|
|
email="jane.smith@example.com"
|
|
onViewPlan={() => alert('View plan')}
|
|
nextSteps={[{ label: 'Go to dashboard', onClick: () => alert('Dashboard') }]}
|
|
navigation={nav}
|
|
/>
|
|
),
|
|
};
|
|
|
|
// ─── Minimal ────────────────────────────────────────────────────────────────
|
|
|
|
/** Minimal — no next steps, no view plan */
|
|
export const Minimal: Story = {
|
|
render: () => <ConfirmationStep email="jane.smith@example.com" navigation={nav} />,
|
|
};
|