Consolidate the three tier pages (PackagesStep, UnverifiedPackageT2,
UnverifiedPackageT3) into a single tier-aware PackagesStep with
providerTier: 'verified' | 'tier3' | 'tier2'. Copy, CTA label, price
disclaimer, and itemised-unavailable state all derive from tier via
an internal TIER_COPY map.
Extract NearbyPackageCard as a molecule (was duplicated inline in T2
and T3). Inherits Card atom's default elevated variant so shadow
matches the primary ServiceOption cards in the same column.
Add showAllFromProvider variant for the "See N more packages from
this provider" flow — flat list, no grouping, no secondary list,
preference filter dropped.
Polish pass on PackagesStep + PackageDetail:
- PackageDetail header band warm → white; added card drop-shadow.
- onCompare prop wire-through (button was built in but never exposed).
- Price disclaimer info-box: padding/gap/line-height tuned, icon
alignment fixed (mt: '3px' matches codebase convention for 16px
icons paired with body2 text).
- Left-column vertical rhythm: 48px gaps between provider card /
subheading / list; 128px gap (Divider my: 8) between primary and
secondary sections to separate groupings.
- Mobile drill-in navigation via useMediaQuery + display toggles.
onSelectPackage widened to accept string | null; Back button
swaps to "Back to packages" when a package is selected on mobile.
Scrolls to top on drill-in.
- "See all" link copy: "See N more packages from this provider →"
(overflow count, no provider name — sidesteps long-name wrapping).
- Verified provider image: placeholder URL → real local asset
(hparsonsvenue.jpg, resized 2048×1366/591KB → 640×427/52KB).
Delete legacy PackageSelectPage story in PackageDetail.stories.tsx
(predated the real page components).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Richie
e67872cb6a