SalePrice

Time Sale price renderer (#1113): plain price outside a sale window, or struck-through original + red sale price + discount badge inside one. Covers the sale-price.tsx / sale-price-slot.tsx family.

Product Cards

No sale (plain price)

Active sale (in window)

Expired sale (falls back to plain price)

Custom discount label

All states

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the sale-price family — new gap story (epic #1647 Wave 6, #1663), // covering `sale-price.tsx` (SalePrice / NormalPrice) AND `sale-price-slot.tsx` // (SalePriceSlot) in one file, as scoped by the issue. // // Only `SalePrice` / `NormalPrice` are rendered directly here — these are the // serializable-prop primitives `SalePriceSlot` itself renders once it has // resolved a Time Sale record. `SalePriceSlot` is intentionally NOT imported: // it statically pulls in `getSaleForSlug` -> the full product/time-sale // catalog (its own header comment warns against importing it from a // 'use client' module for exactly this reason, #476), and its sale window is // keyed off a REAL slug's actual sale dates plus live `Date.now()` on // hydration — a story built on it would silently change appearance once that // sale's window passes, instead of staying a deterministic reference. Driving // `SalePrice` with explicit `now`/`fromMs`/`toMs` props (exactly what // SalePriceSlot itself does once it resolves a record) reproduces the same // visual output with neither problem. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { SalePrice, NormalPrice } from './sale-price'; const meta: StoryMeta = { title: 'SalePrice', category: 'Product Cards', description: 'Time Sale price renderer (#1113): plain price outside a sale window, or struck-through original + red sale price + discount badge inside one. Covers the sale-price.tsx / sale-price-slot.tsx family.', usage: `import { SalePrice, NormalPrice } from '@/components/shared/sale-price';\n\n<NormalPrice price={19800} />\n<SalePrice normalPrice={19800} salePrice={15800} fromMs={0} toMs={Date.now() + 1} rateLabel="20% OFF" now={Date.now()} />`, }; export default meta; // A fixed reference instant (not `Date.now()`) so "in window" / "out of // window" stay deterministic regardless of when the catalog is viewed. const REF_NOW = new Date('2026-07-10T12:00:00+09:00').getTime(); const ONE_DAY_MS = 24 * 60 * 60 * 1000; export const NoSale = defineStory({ name: 'No sale (plain price)', render: () => <NormalPrice price={19800} />, }); export const ActiveSale = defineStory({ name: 'Active sale (in window)', render: () => ( <SalePrice normalPrice={19800} salePrice={15800} fromMs={REF_NOW - ONE_DAY_MS} toMs={REF_NOW + ONE_DAY_MS} rateLabel="20% OFF" now={REF_NOW} /> ), }); /** * Same record, but `now` is past `toMs` — SalePrice falls back to the plain * NormalPrice rendering, matching what SalePriceSlot's island shows once a * sale's window ends without any prop other than `now` changing. */ export const ExpiredSale = defineStory({ name: 'Expired sale (falls back to plain price)', render: () => ( <SalePrice normalPrice={19800} salePrice={15800} fromMs={REF_NOW - 10 * ONE_DAY_MS} toMs={REF_NOW - 5 * ONE_DAY_MS} rateLabel="20% OFF" now={REF_NOW} /> ), }); export const CustomDiscountLabel = defineStory({ name: 'Custom discount label', render: () => ( <SalePrice normalPrice={142200} salePrice={127980} fromMs={REF_NOW - ONE_DAY_MS} toMs={REF_NOW + ONE_DAY_MS} rateLabel="10% OFF" now={REF_NOW} /> ), }); export const AllStates = defineStory({ name: 'All states', render: () => ( <div className="flex flex-col gap-vgap-sm items-start"> <div className="flex items-center gap-hgap-sm"> <span className="text-muted text-xs w-[110px]">No sale</span> <NormalPrice price={19800} /> </div> <div className="flex items-center gap-hgap-sm"> <span className="text-muted text-xs w-[110px]">Active sale</span> <SalePrice normalPrice={19800} salePrice={15800} fromMs={REF_NOW - ONE_DAY_MS} toMs={REF_NOW + ONE_DAY_MS} rateLabel="20% OFF" now={REF_NOW} /> </div> <div className="flex items-center gap-hgap-sm"> <span className="text-muted text-xs w-[110px]">Expired sale</span> <SalePrice normalPrice={19800} salePrice={15800} fromMs={REF_NOW - 10 * ONE_DAY_MS} toMs={REF_NOW - 5 * ONE_DAY_MS} rateLabel="20% OFF" now={REF_NOW} /> </div> </div> ), });