Notify/NotifyMeBlock

Default

product Name

product Slug

Component Source

notify-me-block.tsx

import { BaseBlock } from './base-block';
import { NotifyMeDialog } from './notify-me-dialog';

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

/**
 * NotifyMeBlock Component
 *
 * A block component that displays a full-width "入荷通知を受け取る" button
 * with description text explaining the notification signup process.
 *
 * Used on product detail pages for products that are coming soon.
 */
export const NotifyMeBlock = ({ productSlug, productName }: NotifyMeBlockProps) => {
  return (
    <BaseBlock
      productSlug={productSlug}
      productName={productName}
      buttonLabel="入荷通知を受け取る"
      description="メールアドレスをご登録いただくと、入荷時にお知らせいたします。"
      renderDialog={(props) => <NotifyMeDialog {...props} />}
    />
  );
};

export default NotifyMeBlock;

Story Source

import { NotifyMeBlock } from './notify-me-block';
import type { ControlsMap } from '../../sub-packages/styleguide/src/data/control-types';

/**
 * NotifyMeBlock Component Stories
 *
 * Block component for product pages showing:
 * - Full-width "入荷通知を受け取る" button
 * - Description text explaining the notification process
 * - Opens NotifyMeDialog on click
 */

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

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 notification dialog.
 */
export const Default = {
  args: { productName: 'Sample Product', productSlug: 'sample-product' },
  render: ({ productName, productSlug }: { productName: string; productSlug: string }) => (
    <NotifyMeBlock productSlug={productSlug} productName={productName || undefined} />
  ),
};

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

/**
 * Long Product Name
 *
 * Tests the layout with a very long product name.
 */
export const LongProductName = () => (
  <NotifyMeBlock
    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 = () => (
  <NotifyMeBlock productSlug="n32b-slim" productName="N32B Slim" />
);