richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split AdditionalServicesStep into IncludedServicesStep + ExtrasStep

Browse Source 
- IncludedServicesStep: package inclusions at no cost (dressing, viewing,
  prayers, funeral announcement). Sub-options render inside parent card.
- ExtrasStep: optional paid extras for lead generation (catering, music,
  coffin bearing, newspaper notice). POA support, tally of priced items.
- AddOnOption: children prop (sub-options inside card), priceLabel prop
  (custom text like "Price on application" in brand copper italic)
- Flattened sub-option pattern: inline toggle rows inside parent card
  instead of nested card-in-card ("Russian doll") pattern
- Coffin bearing now uses toggle + bearer type radio (consistent UX)
- Removed old AdditionalServicesStep (replaced by two new pages)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-31 12:10:26 +11:00
parent c7a8d9e906
commit 6cb3184130
11 changed files with 815 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/memory/component-registry.md
View File

@@ -86,8 +86,10 @@ duplicates) and MUST update it after completing one.
| CrematoriumStep | done | WizardLayout (centered-form) + Card + Badge + ToggleButtonGroup + Typography + Button + Divider | Wizard step 8 — crematorium. Two variants: Service & Cremation (compact card + witness Yes/No toggle), Cremation Only (compact card + "Cremation Only" badge + "Included in Package" notice). Single pre-selected crematorium, no multi-select. |
| CemeteryStep | done | WizardLayout (centered-form) + ToggleButtonGroup + Collapse + TextField (select) + Typography + Button + Divider | Wizard step 9 — cemetery. ToggleButtonGroups (Yes/No/Not sure) with progressive disclosure. Own plot → locate dropdown. No plot → preference? → select dropdown. No card grid. |
| CoffinsStep | done | WizardLayout (grid-sidebar) + Card + Badge + Collapse + Slider + TextField + Pagination + Divider + Link | Wizard step 10 — coffin browsing. Grid-sidebar: filter sidebar (categories with expandable subcategories, dual-knob price slider with editable inputs, sort by) + 3-col card grid. CoffinCard with thumbnail hover preview. Equal-height cards, subtle bg for white-bg product photos. Card click → CoffinDetailsStep (no Continue). 20/page max. Conditional allowance info bubble. |
| CoffinDetailsStep | done | WizardLayout (centered-form) + Paper + RadioGroup + Divider + Button | Wizard step 11 — coffin customisation. Profile (image + specs) + 3 option sections (handles, lining, nameplate). Branded selected state. |
| AdditionalServicesStep | done | WizardLayout (centered-form) + Paper + AddOnOption + RadioGroup + Collapse + Divider + Button | Wizard step 12 — additional services. Section 1: complimentary. Section 2: paid extras. Multi-level progressive disclosure. |
| CoffinDetailsStep | done | WizardLayout (detail-toggles) + ImageGallery + Divider + Button | Wizard step 11 — coffin detail. Two-panel: gallery + product details dl (left), name + description + colour swatches + allowance-aware price + CTA (right). Allowance logic: fully covered / partially covered / no allowance. Colour selection does not affect price. |
| ~~AdditionalServicesStep~~ | removed | — | Replaced by IncludedServicesStep + ExtrasStep. Split for clearer distinction between free inclusions and paid extras. |
| IncludedServicesStep | done | WizardLayout (centered-form) + AddOnOption + RadioGroup + Collapse + Divider + Button | Wizard step 12a — included services. Package inclusions at no additional cost: dressing, viewing (with same-venue sub-option), prayers/vigil, funeral announcement. Sub-options render inside parent card. |
| ExtrasStep | done | WizardLayout (centered-form) + AddOnOption + Card + Switch + RadioGroup + Collapse + Divider + Button | Wizard step 12b — optional extras. Lead-gen interest capture: catering, music (inline live musician toggle + musician type), coffin bearing (toggle + bearer type), newspaper notice. POA via `priceLabel`. Tally of priced selections. No nested cards. |
| SummaryStep | done | WizardLayout (centered-form) + Accordion + Paper + IconButton + Divider + Button | Wizard step 13 — plan review. Accordion sections with edit buttons. dl/dt/dd definition lists. Total bar. Share button. |
| PaymentStep | done | WizardLayout (centered-form) + ToggleButtonGroup + Paper + Collapse + Checkbox + Divider + Button | Wizard step 14 — payment. Plan (full/deposit) + method (card/bank). PayWay iframe slot. Bank transfer details. Terms checkbox. |
| ConfirmationStep | done | WizardLayout (centered-form) + Button | Wizard step 15 — confirmation. Terminal page. At-need: "submitted" + callback. Pre-planning: "saved" + return-anytime. Muted success icon. |

67
docs/memory/session-log.md
View File

@@ -26,6 +26,73 @@ Each entry follows this structure:
## Sessions
### Session 2026-03-31b — CoffinDetailsStep rewrite + AdditionalServicesStep split
**Agent(s):** Claude Opus 4.6 (1M context)
**Work completed:**
- **CoffinDetailsStep rewrite** — two-panel detail-toggles layout with gallery + specs (left), name + description + colour swatches + allowance-aware pricing + CTA (right). Colour selection doesn't affect price. Allowance logic: fully covered / partially covered / no allowance.
- **AdditionalServicesStep split into two pages:**
- **IncludedServicesStep (new)** — services included in the package at no cost. Dressing, viewing (with same-venue sub-option inside card), prayers/vigil, funeral announcement.
- **ExtrasStep (new)** — optional paid extras for lead generation. Catering, music (flat inline live musician toggle + musician type), coffin bearing (toggle + bearer preference radio), newspaper notice. POA support via `priceLabel`. Tally of priced selections.
- **AddOnOption molecule enhanced:**
- `children` prop — sub-options render inside the card boundary (below divider) when checked, eliminating nested card "Russian doll" pattern
- `priceLabel` prop — custom text like "Price on application" in brand copper italic
- **AdditionalServicesStep removed** — replaced by the two new pages
- All quality checks passing (TypeScript, ESLint, Prettier)
- Playwright visual verification of all key scenarios
**Decisions made:**
- Split AdditionalServicesStep into two pages for clearer UX distinction between free inclusions and paid extras
- Sub-options render inside parent card (flat hierarchy) instead of nested cards
- Coffin bearing changed from always-visible radio to toggle + sub-options (consistent with other items)
- `bearing` field split into `bearing: boolean` + `bearerType` for toggle pattern
- Extras page is lead-gen: signals interest, not firm commitment. Director follows up.
- POA items show "Price on application" in brand copper italic
- Copy refined through brand lens — no transactional language ("toggle on"), warm professional tone
**Open questions:**
- None
**Next steps:**
- Continue page feedback: SummaryStep, PaymentStep, ConfirmationStep
- Retroactive review Phase 3 (organisms) still pending
- Batch a11y fix (aria-describedby + aria-invalid) deferred
---
### Session 2026-03-31b — CoffinDetailsStep rewrite: product detail layout
**Agent(s):** Claude Opus 4.6 (1M context)
**Work completed:**
- **CoffinDetailsStep complete rewrite** — transformed to match VenueDetailStep two-panel pattern:
- **Left panel:** ImageGallery (hero + thumbnails), product details as semantic `dl` list (bold label above value)
- **Right panel (sticky):** coffin name (h1), description, colour swatch picker, price with allowance-aware display, CTA, save-and-exit
- **Colour picker:** circular swatches (36px), `aria-pressed`, controlled via `selectedColourId`/`onColourChange`, does not affect price
- **Allowance pricing logic:** fully covered (allowance >= price) → "Included in your package allowance — no change to your plan total." / partially covered → shows "$X package allowance applied" + "+$Y to your plan total" in brand colour / no allowance → price only with extra spacing to CTA
- **Removed:** info bubble (redundant with allowance impact text), `priceNote` prop, `termsText` prop, old horizontal specs grid, `CoffinAllowance` type
- **Added:** `CoffinColour` type, `allowanceAmount` prop, `onAddCoffin` callback (replaces `onContinue`)
- **A11y:** fixed heading hierarchy (price as `<p>` not `<h5>`, Product details as `<h2>`) — 0 violations
- **Stories:** FullyCovered, PartiallyCovered, NoAllowance, NoColours, Minimal, PrePlanning, Loading
- **Playwright visual verification** of all key scenarios
- All quality checks passing (TypeScript, ESLint, Prettier)
**Decisions made:**
- Allowance impact is computed from `allowanceAmount` vs `coffin.price` — no remaining balance tracking (out of scope)
- Info bubble removed from detail page (redundant) — kept on CoffinsStep browsing page
- Product details as single-column stacked `dl` (label above value) — more readable than grid
**Open questions:**
- None
**Next steps:**
- Continue page feedback: AdditionalServicesStep, SummaryStep, PaymentStep, ConfirmationStep
- Retroactive review Phase 3 (organisms) still pending
- Batch a11y fix (aria-describedby + aria-invalid) deferred
---
### Session 2026-03-31a — CoffinsStep rewrite: grid-sidebar ecommerce layout
**Agent(s):** Claude Opus 4.6 (1M context)