Notify/ReservationBlock

Default

product Nameproduct Slug

English

Long Product Name

Real Product Example

Without Product Name

Component Source

reservation-block.tsx

import { BaseBlock } from './base-block';
import { ReservationDialog } from './reservation-dialog';
import { Lines } from './form-components';
import { getNotifyDialogCopy } from './copy';
import type { Locale } from '@/lib/i18n/types';

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

/**
 * ReservationBlock Component
 *
 * A block component that displays a full-width "reserve" button
 * with description text explaining the reservation process.
 *
 * Used on product detail pages for products that accept pre-orders.
 */
export const ReservationBlock = ({
  productSlug,
  productName,
  locale = 'ja',
}: ReservationBlockProps) => {
  const copy = getNotifyDialogCopy(locale);
  return (
    <BaseBlock
      productSlug={productSlug}
      productName={productName}
      buttonLabel={copy.reservationBlock.button}
      description={<Lines lines={copy.reservationBlock.description} />}
      renderDialog={(props) => <ReservationDialog {...props} locale={locale} />}
    />
  );
};

export default ReservationBlock;

Story Source

reservation-block.stories.tsx

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

/**
 * ReservationBlock Component Stories
 *
 * Block component for product pages showing:
 * - Full-width "reserve" button (localized via the `locale` prop)
 * - 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" />
);

/**
 * English Locale
 *
 * The block and its dialog render English copy when `locale="en"`.
 */
export const English = () => (
  <ReservationBlock productSlug="n32b-slim" productName="N32B Slim" locale="en" />
);