ReservationDialog

Coming-soon product reservation dialog (name + email, reservation-id on success).

Forms & Dialogs

Default

Product nameProduct slug

Without product name

Success with reservation ID

Error state (mocked)

Validation error — missing name

Loading state

Always open

Long product name

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ReservationDialog — migrated to the repo-root story contract // (`lib/styleguide/story-contract`) in wave 3 (epic #1647, #1656). // // This dialog POSTs to `/api/reservation`, so its variants OPT INTO MSW via the // `Story.msw` scenario string; the scenario → handler mapping lives in the // preview island's browser-only mock feature and this file imports NO `msw` // (see notify-me-dialog.stories.tsx for the rationale). Scenarios: // - `reservation` → happy path (returns a generated reservation id) // - `reservation-error` → forced 500 // - `reservation-validation` → forced 400 (missing name) // - `reservation-loading` → 5s delay, to observe the loading spinner import { useState } from 'preact/hooks'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { DialogStoryContainer } from '@lib/styleguide/dialog-story-container'; import { ReservationDialog } from './reservation-dialog'; import { ActionButton } from '@takazudo-modular/ui-preact/action-button'; const meta: StoryMeta = { title: 'ReservationDialog', category: 'Forms & Dialogs', description: 'Coming-soon product reservation dialog (name + email, reservation-id on success).', usage: `import { ReservationDialog } from '@/components/notify-dialog/reservation-dialog';\n\n<ReservationDialog isOpen={isOpen} onClose={close} productSlug="mock-incoming" productName="Incoming Product" />`, }; export default meta; /** Interactive wrapper: a trigger button that opens the dialog into the local portal. */ const DialogWrapper = ({ productSlug, productName, buttonLabel = '予約する', }: { productSlug: string; productName?: string; buttonLabel?: string; }) => { const [isOpen, setIsOpen] = useState(false); return ( <DialogStoryContainer> {(portalContainer) => ( <div className="p-hgap-sm"> <ActionButton onClick={() => setIsOpen(true)}>{buttonLabel}</ActionButton> <ReservationDialog isOpen={isOpen} onClose={() => setIsOpen(false)} productSlug={productSlug} productName={productName} portalContainer={portalContainer} /> </div> )} </DialogStoryContainer> ); }; interface ReservationDialogArgs { productName: string; productSlug: string; } export const Default = defineStory<ReservationDialogArgs>({ name: 'Default', msw: 'reservation', controls: [ { type: 'text', prop: 'productName', label: 'Product name', defaultValue: 'Incoming Product' }, { type: 'text', prop: 'productSlug', label: 'Product slug', defaultValue: 'mock-incoming' }, ], render: ({ productName = 'Incoming Product', productSlug = 'mock-incoming' } = {}) => ( <DialogWrapper productSlug={productSlug} productName={productName || undefined} /> ), }); export const WithoutProductName = defineStory({ name: 'Without product name', msw: 'reservation', render: () => <DialogWrapper productSlug="mock-product" />, }); export const SuccessWithReservationId = defineStory({ name: 'Success with reservation ID', msw: 'reservation', render: () => ( <div> <p className="text-zd-white pb-vgap-sm"> フォームを送信すると、予約番号付きの成功メッセージが表示されます。 </p> <DialogWrapper productSlug="mock-incoming" productName="Sample Product" /> </div> ), }); export const ErrorState = defineStory({ name: 'Error state (mocked)', msw: 'reservation-error', render: () => <DialogWrapper productSlug="mock-incoming" productName="Error Test Product" />, }); export const ValidationErrorMissingName = defineStory({ name: 'Validation error — missing name', msw: 'reservation-validation', render: () => <DialogWrapper productSlug="mock-incoming" productName="Validation Test" />, }); export const LoadingState = defineStory({ name: 'Loading state', msw: 'reservation-loading', render: () => <DialogWrapper productSlug="mock-incoming" productName="Loading Test Product" />, }); export const AlwaysOpen = defineStory({ name: 'Always open', msw: 'reservation', render: () => ( <DialogStoryContainer> {(portalContainer) => ( <ReservationDialog isOpen={true} onClose={() => {}} productSlug="mock-incoming" productName="Visual Test Product" portalContainer={portalContainer} /> )} </DialogStoryContainer> ), }); export const LongProductName = defineStory({ name: 'Long product name', msw: 'reservation', render: () => ( <DialogWrapper productSlug="mock-long-name" productName="Very Long Product Name That Should Wrap Nicely In The Dialog Header And Description Area" /> ), });