Notify/NotifyMeBlock

Default

product Nameproduct Slug

English

Long Product Name

Real Product Example

Without Product Name

Component Source

notify-me-block.tsx

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

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

/**
 * NotifyMeBlock Component
 *
 * A block component that displays a full-width "notify me" 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, locale = 'ja' }: NotifyMeBlockProps) => {
  const copy = getNotifyDialogCopy(locale);
  return (
    <BaseBlock
      productSlug={productSlug}
      productName={productName}
      buttonLabel={copy.notifyBlock.button}
      description={<Lines lines={copy.notifyBlock.description} />}
      renderDialog={(props) => <NotifyMeDialog {...props} locale={locale} />}
    />
  );
};

export default NotifyMeBlock;

Story Source

notify-me-block.stories.tsx

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

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

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