IncomingItem

PurchaseNav right-column block for incoming products: "Coming soon..." status plus the optional notify-me/reservation action buttons.

Product Pages

Both

Notify only

Reservation only

Neither

Both locales

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for IncomingItem — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave-3 batch D / #1655). // // Button relationship: NotifyMeBlock ("入荷通知を受け取る") and // ReservationBlock ("予約する") live as standalone components under // `components/notify-dialog/` (also shown individually in the Notify/* // styleguide stories). IncomingItem COMBINES them in-context when // `showNotifyMe` and/or `showReservation` are set on the product — these // stories are the only place in the styleguide where both buttons appear // together inside the PurchaseNav layout. // // Mock products come from the shared `mockMercariProducts` registry (single // source of truth): `incomingBoth` / `incomingNotify` / `incomingReservation`, // plus the base `incoming` (no flags) for Neither. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { IncomingItem } from './status-items/incoming-item'; import { mockMercariProducts } from './__mocks__/products'; const meta: StoryMeta = { title: 'IncomingItem', category: 'Product Pages', order: 2, description: 'PurchaseNav right-column block for incoming products: "Coming soon..." status plus the optional notify-me/reservation action buttons.', usage: `import { IncomingItem } from '@/components/mdx/purchase-nav/status-items/incoming-item';\n\n<IncomingItem product={product} locale="ja" />`, }; export default meta; export const Both = defineStory({ name: 'Both', render: () => ( <div className="font-futura bg-zd-dark p-vgap-sm"> <IncomingItem product={mockMercariProducts.incomingBoth} locale="ja" /> </div> ), }); export const NotifyOnly = defineStory({ name: 'Notify only', render: () => ( <div className="font-futura bg-zd-dark p-vgap-sm"> <IncomingItem product={mockMercariProducts.incomingNotify} locale="ja" /> </div> ), }); export const ReservationOnly = defineStory({ name: 'Reservation only', render: () => ( <div className="font-futura bg-zd-dark p-vgap-sm"> <IncomingItem product={mockMercariProducts.incomingReservation} locale="ja" /> </div> ), }); export const Neither = defineStory({ name: 'Neither', render: () => ( <div className="font-futura bg-zd-dark p-vgap-sm"> <IncomingItem product={mockMercariProducts.incoming} locale="ja" /> </div> ), }); export const BothLocales = defineStory({ name: 'Both locales', render: () => ( <div className="font-futura bg-zd-dark flex flex-col gap-vgap-sm p-vgap-sm"> <div> <div className="text-zd-gray text-xs mb-vgap-2xs">JA</div> <IncomingItem product={mockMercariProducts.incomingBoth} locale="ja" /> </div> <div> <div className="text-zd-gray text-xs mb-vgap-2xs">EN</div> <IncomingItem product={mockMercariProducts.incomingBoth} locale="en" /> </div> </div> ), });