PurchaseNav

Product purchase-status block: routes a resolved product through the 6 Mercari status states (available/sold/incoming/askToBuy/discontinued/unavailable).

Product Pages

Default

StatusShow notify meShow reservationPrice153800Subtitle

Available

Sold out

Incoming

Incoming with buttons

Ask to buy

Discontinued

Unavailable

Multiple products

With article navigation

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for PurchaseNav — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave-3 batch D / #1655). // // Uses virtual product data to exercise all 6 status states: // - Available (default) - Shows link to Mercari product page // - Sold - Shows sold out message with link to Mercari for stock notifications // - Incoming - Shows coming soon message with link to contact page // - Ask to Buy - Shows manufacturer consultation required message with link to contact page // - Discontinued - Shows discontinued message (non-clickable) // - Unavailable - Shows unavailable message (non-clickable) import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import type { PurchaseNavProduct } from './types'; import { MERCARI_STATUS_VALUES } from '@/src/types/product'; import type { MercariStatus } from '@/src/types/product'; import { PurchaseItem } from './purchase-item'; import { formatProductFullTitle } from './constants'; import { mockMercariProducts, createMockProduct } from './__mocks__/products'; const meta: StoryMeta = { title: 'PurchaseNav', category: 'Product Pages', order: 1, description: 'Product purchase-status block: routes a resolved product through the 6 Mercari status states (available/sold/incoming/askToBuy/discontinued/unavailable).', usage: `import { PurchaseItem } from '@/components/mdx/purchase-nav/purchase-item';\n\n<PurchaseItem product={product} />`, }; export default meta; // Convert mock products object to mapping by slug const mockProducts: Record<string, PurchaseNavProduct> = { 'mock-available': mockMercariProducts.available, 'mock-sold': mockMercariProducts.sold, 'mock-incoming': mockMercariProducts.incoming, 'mock-ask-to-buy': mockMercariProducts.askToBuy, 'mock-discontinued': mockMercariProducts.discontinued, 'mock-unavailable': mockMercariProducts.unavailable, // Inline override: incoming + both buttons enabled; used by IncomingWithButtons variant 'mock-incoming-with-buttons': { ...mockMercariProducts.incoming, showNotifyMe: true, showReservation: true, }, }; interface ArticleNavItemProps { product: PurchaseNavProduct; } const ArticleNavItem = ({ product }: ArticleNavItemProps) => { const { name, subtitle, detailHref, brandName } = product; return detailHref ? ( <li> <a href={detailHref}>{formatProductFullTitle(brandName, name, subtitle)}紹介</a> </li> ) : null; }; interface PurchaseNavStorybookProps { ids?: string[]; id?: string | null; addArticleNav?: boolean; } /** Demo wrapper that renders PurchaseItems with mock product data. */ const PurchaseNavStorybook = ({ ids = [], id = null, addArticleNav = false, }: PurchaseNavStorybookProps) => { const productIds = id ? [...ids, id] : ids; return ( <> <div className="pb-vgap-lg"> <div className={'border-b-2 border-zd-white flex flex-col gap-vgap-sm pb-vgap-sm'}> {productIds.map((productId) => { const product = mockProducts[productId]; if (!product) { return ( <div key={productId} className="text-red-500"> Product not found: {productId} </div> ); } return ( <div key={productId} className={'border-t-2 border-zd-white pt-vgap-sm'}> <PurchaseItem product={product} /> </div> ); })} </div> </div> {addArticleNav && ( <div className="pb-vgap-sm"> <ul> {productIds.map((productId) => { const product = mockProducts[productId]; return product ? <ArticleNavItem product={product} key={productId} /> : null; })} </ul> </div> )} </> ); }; /** Scene args for the interactive Default variant — mirrors the old module-level controls. */ interface DefaultArgs { status: MercariStatus | 'available'; showNotifyMe: boolean; showReservation: boolean; price: number; subtitle: string; } export const Default = defineStory<DefaultArgs>({ name: 'Default', controls: [ { type: 'select', prop: 'status', label: 'Status', // 'available' is the derived state (mercariStatus undefined); the rest come from MERCARI_STATUS_VALUES options: ['available', ...MERCARI_STATUS_VALUES], defaultValue: 'incoming', }, { type: 'boolean', prop: 'showNotifyMe', label: 'Show notify me', defaultValue: true }, { type: 'boolean', prop: 'showReservation', label: 'Show reservation', defaultValue: true }, { type: 'number', prop: 'price', label: 'Price', defaultValue: 153800, min: 0, step: 100 }, { type: 'text', prop: 'subtitle', label: 'Subtitle', defaultValue: 'Demo subtitle' }, ], render: ({ status = 'incoming', showNotifyMe = true, showReservation = true, price = 153800, subtitle = 'Demo subtitle', } = {}) => { const product = createMockProduct({ slug: 'playground-product', name: 'Playground Product', subtitle, price, // 'available' is not a MercariStatus — it maps to undefined (PurchaseItem derives it) mercariStatus: status === 'available' ? undefined : status, mercariProductId: 'mock-mercari-id-playground', detailHref: '/products/playground-intro/', showNotifyMe, showReservation, }); return <PurchaseItem product={product} />; }, }); export const Available = defineStory({ name: 'Available', render: () => <PurchaseNavStorybook id="mock-available" />, }); export const SoldOut = defineStory({ name: 'Sold out', render: () => <PurchaseNavStorybook id="mock-sold" />, }); export const Incoming = defineStory({ name: 'Incoming', render: () => <PurchaseNavStorybook id="mock-incoming" />, }); // Extends Incoming to show both optional action buttons — an inline override // of mockMercariProducts.incoming (see mock-incoming-with-buttons above), does // not mutate __mocks__/products.ts. export const IncomingWithButtons = defineStory({ name: 'Incoming with buttons', render: () => <PurchaseNavStorybook id="mock-incoming-with-buttons" />, }); export const AskToBuy = defineStory({ name: 'Ask to buy', render: () => <PurchaseNavStorybook id="mock-ask-to-buy" />, }); export const Discontinued = defineStory({ name: 'Discontinued', render: () => <PurchaseNavStorybook id="mock-discontinued" />, }); export const Unavailable = defineStory({ name: 'Unavailable', render: () => <PurchaseNavStorybook id="mock-unavailable" />, }); export const MultipleProducts = defineStory({ name: 'Multiple products', render: () => ( <PurchaseNavStorybook ids={[ 'mock-available', 'mock-sold', 'mock-incoming', 'mock-ask-to-buy', 'mock-discontinued', 'mock-unavailable', ]} /> ), }); export const WithArticleNavigation = defineStory({ name: 'With article navigation', render: () => <PurchaseNavStorybook id="mock-available" addArticleNav />, });