Memory: session-log 2026-04-23c + registry catch-up; retire NearbyPackageCard
Session log entry for today (2026-04-23c) covers the 8-commit demo update pass: MiniCard-based nearby-verified grid, package fixtures cleanup (drop 'unknown' treatment) + 10 new verified packages, Vite envDir fix for Google Maps, always-recommended Comparison route, responsive PackageDetail CTAs, ComparisonTable tier-aware Unknown rendering, and info-card un-stick. Plus the pre-drafted 2026-04-23b session-log entry (extractions, CompareBar pattern, PackageDetail toggle, basket persistence) and the matching component-registry updates for those prior-session changes. Registry today: NearbyPackageCard row removed (now orphaned and deleted — no consumers after MiniCard swap). PackagesStep, PackageDetail, and ComparisonTable rows updated for this session's changes. Decisions-log D052–D056 live locally; decisions-log.md is gitignored so those additions aren't in this commit. Flagging the gitignore mismatch — the session log references decision IDs that won't resolve for anyone pulling from the remote until that's sorted. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,93 +0,0 @@
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import Box from '@mui/material/Box';
|
||||
import { NearbyPackageCard } from './NearbyPackageCard';
|
||||
|
||||
const meta: Meta<typeof NearbyPackageCard> = {
|
||||
title: 'Molecules/NearbyPackageCard',
|
||||
component: NearbyPackageCard,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<Box sx={{ maxWidth: 480, width: '100%' }}>
|
||||
<Story />
|
||||
</Box>
|
||||
),
|
||||
],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof NearbyPackageCard>;
|
||||
|
||||
/** Default — full metadata including rating and review count */
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
packageName: 'Everyday Cremation',
|
||||
price: 4200,
|
||||
providerName: 'H.Parsons Funerals',
|
||||
location: 'Wentworth',
|
||||
rating: 4.5,
|
||||
reviewCount: 32,
|
||||
onClick: () => alert('Navigate to provider package'),
|
||||
},
|
||||
};
|
||||
|
||||
/** Without rating — provider has no reviews yet */
|
||||
export const WithoutRating: Story = {
|
||||
args: {
|
||||
packageName: 'Simple Farewell',
|
||||
price: 3800,
|
||||
providerName: 'Riverstone Funerals',
|
||||
location: 'Mildura',
|
||||
onClick: () => alert('Navigate to provider package'),
|
||||
},
|
||||
};
|
||||
|
||||
/** Non-interactive — no onClick */
|
||||
export const Static: Story = {
|
||||
args: {
|
||||
packageName: 'Everyday Cremation',
|
||||
price: 4200,
|
||||
providerName: 'H.Parsons Funerals',
|
||||
location: 'Wentworth',
|
||||
rating: 4.5,
|
||||
reviewCount: 32,
|
||||
},
|
||||
};
|
||||
|
||||
/** Stacked — as rendered in the similar-packages list */
|
||||
export const Stacked: Story = {
|
||||
render: () => (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<NearbyPackageCard
|
||||
packageName="Everyday Cremation"
|
||||
price={4200}
|
||||
providerName="H.Parsons Funerals"
|
||||
location="Wentworth"
|
||||
rating={4.5}
|
||||
reviewCount={32}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<NearbyPackageCard
|
||||
packageName="Traditional Farewell"
|
||||
price={6800}
|
||||
providerName="Mackay Family Funerals"
|
||||
location="Parramatta"
|
||||
rating={4.7}
|
||||
reviewCount={58}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
<NearbyPackageCard
|
||||
packageName="Simple Cremation"
|
||||
price={3500}
|
||||
providerName="Coastal Funerals"
|
||||
location="Cronulla"
|
||||
rating={4.3}
|
||||
reviewCount={14}
|
||||
onClick={() => {}}
|
||||
/>
|
||||
</Box>
|
||||
),
|
||||
};
|
||||
@@ -1,106 +0,0 @@
|
||||
import React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
|
||||
import StarRoundedIcon from '@mui/icons-material/StarRounded';
|
||||
import type { SxProps, Theme } from '@mui/material/styles';
|
||||
import { Card } from '../../atoms/Card';
|
||||
import { Typography } from '../../atoms/Typography';
|
||||
|
||||
// ─── Types ───────────────────────────────────────────────────────────────────
|
||||
|
||||
/** Props for the FA NearbyPackageCard molecule */
|
||||
export interface NearbyPackageCardProps {
|
||||
/** Package display name */
|
||||
packageName: string;
|
||||
/** Package price in dollars */
|
||||
price: number;
|
||||
/** Provider display name */
|
||||
providerName: string;
|
||||
/** Provider location (suburb, city) */
|
||||
location: string;
|
||||
/** Provider rating (e.g. 4.5). Omit to hide. */
|
||||
rating?: number;
|
||||
/** Number of reviews */
|
||||
reviewCount?: number;
|
||||
/** Click handler — navigates to that provider's PackagesStep with this package loaded */
|
||||
onClick?: () => void;
|
||||
/** MUI sx prop */
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
// ─── Component ───────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Compact card representing a package offered by a nearby verified provider.
|
||||
*
|
||||
* Surfaced in the "Similar packages from verified providers nearby" section
|
||||
* of the unverified-tier PackagesStep pages. Clicking the card is a route
|
||||
* change to that verified provider's PackagesStep with this package loaded.
|
||||
*
|
||||
* Composes Card + Typography.
|
||||
*/
|
||||
export const NearbyPackageCard = React.forwardRef<HTMLDivElement, NearbyPackageCardProps>(
|
||||
({ packageName, price, providerName, location, rating, reviewCount, onClick, sx }, ref) => {
|
||||
return (
|
||||
<Card
|
||||
ref={ref}
|
||||
interactive={!!onClick}
|
||||
padding="none"
|
||||
onClick={onClick}
|
||||
sx={[{ p: 'var(--fa-card-padding-compact)' }, ...(Array.isArray(sx) ? sx : [sx])]}
|
||||
>
|
||||
{/* Package name + price */}
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
justifyContent: 'space-between',
|
||||
gap: 2,
|
||||
mb: 1,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" component="span">
|
||||
{packageName}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="labelLg"
|
||||
component="span"
|
||||
color="primary"
|
||||
sx={{ whiteSpace: 'nowrap' }}
|
||||
>
|
||||
${price.toLocaleString('en-AU')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Provider info */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap' }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{providerName}
|
||||
</Typography>
|
||||
{rating != null && (
|
||||
<>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
·
|
||||
</Typography>
|
||||
<StarRoundedIcon sx={{ fontSize: 14, color: 'warning.main' }} aria-hidden />
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{rating}
|
||||
{reviewCount != null ? ` (${reviewCount})` : ''}
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
·
|
||||
</Typography>
|
||||
<LocationOnOutlinedIcon sx={{ fontSize: 14, color: 'text.secondary' }} aria-hidden />
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{location}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
NearbyPackageCard.displayName = 'NearbyPackageCard';
|
||||
export default NearbyPackageCard;
|
||||
@@ -1 +0,0 @@
|
||||
export { NearbyPackageCard, type NearbyPackageCardProps } from './NearbyPackageCard';
|
||||
Reference in New Issue
Block a user