Notify/ReservationBlock

Default

product Name

product Slug

Component Source

reservation-block.tsx

import { BaseBlock } from './base-block';
import { ReservationDialog } from './reservation-dialog';

interface ReservationBlockProps {
  productSlug: string;
  productName?: string;
}

/**
 * ReservationBlock Component
 *
 * A block component that displays a full-width "予約する" button
 * with description text explaining the reservation process.
 *
 * Used on product detail pages for products that accept pre-orders.
 */
export const ReservationBlock = ({ productSlug, productName }: ReservationBlockProps) => {
  return (
    <BaseBlock
      productSlug={productSlug}
      productName={productName}
      buttonLabel="予約する"
      description={
        <>
          ご購入の事前予約を受け付けております。
          <br />
          登録確認後、詳細情報をメールにてお知らせいたします。
        </>
      }
      renderDialog={(props) => <ReservationDialog {...props} />}
    />
  );
};

export default ReservationBlock;

Story Source

import { ReservationBlock } from './reservation-block';
import type { ControlsMap } from '../../sub-packages/styleguide/src/data/control-types';

/**
 * ReservationBlock Component Stories
 *
 * Block component for product pages showing:
 * - Full-width "予約する" button
 * - Description text explaining the reservation process
 * - Opens ReservationDialog on click
 */

export const meta = {
  title: 'Notify/ReservationBlock',
};

export const controls: ControlsMap = {
  productName: { type: 'text', default: 'Sample Product' },
  productSlug: { type: 'text', default: 'sample-product' },
};

/**
 * Default State
 *
 * Shows the block with product name.
 * Click the button to open the reservation dialog.
 */
export const Default = {
  args: { productName: 'Sample Product', productSlug: 'sample-product' },
  render: ({ productName, productSlug }: { productName: string; productSlug: string }) => (
    <ReservationBlock productSlug={productSlug} productName={productName || undefined} />
  ),
};

/**
 * Without Product Name
 *
 * Shows the block without a specific product name.
 */
export const WithoutProductName = () => <ReservationBlock productSlug="sample-product" />;

/**
 * Long Product Name
 *
 * Tests the layout with a very long product name.
 */
export const LongProductName = () => (
  <ReservationBlock
    productSlug="long-name-product"
    productName="Very Long Product Name That Should Display Nicely In The Dialog"
  />
);

/**
 * Real Product Example
 *
 * Example with a real product slug from the catalog.
 */
export const RealProductExample = () => (
  <ReservationBlock productSlug="n32b-slim" productName="N32B Slim" />
);