Article/PurchaseNav

Ask To Buy

Component Source

types.ts

import type { Brand } from '@/src/types/brand';
import type { MercariStatus } from '@/src/types/product';

/**
 * Product node type for PurchaseNav component
 * This matches the structure from product-master-data.mjs
 *
 * Note: brand can be either a string (from raw product data) or Brand object
 * (when enriched with brand metadata). The getBrandName utility handles both.
 */
export interface ProductNode {
  id: string;
  index: number;
  blurHash?: string;
  imgSrc: string;
  spec?: {
    width?: string;
  };
  brand: string | Brand;
  description: string;
  descriptionEn?: string;
  detailHref?: string | null;
  name: string;
  nameEn?: string;
  subtitle?: string | null;
  seriesId?: string | null;
  brandBasedCategory?: string;
  mercariProductId?: string | null;
  mercariStatus?: MercariStatus | null;
  slug: string;
  price?: number | null;
  /** Show reservation button for pre-orders */
  showReservation?: boolean;
  /** Show notify-me button for stock notifications */
  showNotifyMe?: boolean;
  tags?: string[];
}

purchase-item.tsx

import type { FunctionComponent } from 'preact';
import type { ProductNode } from './types';
import { generateMercariUrl } from '@/lib/utils/product-utils';
import type { MercariStatus } from '@/src/types/product';
import { AvailableItem } from './status-items/available-item';
import { SoldItem } from './status-items/sold-item';
import { IncomingItem } from './status-items/incoming-item';
import { DiscontinuedItem } from './status-items/discontinued-item';
import { AskToBuyItem } from './status-items/ask-to-buy-item';
import { UnavailableItem } from './status-items/unavailable-item';
import { getMissingProductError } from './constants';
import type { Locale } from '@/lib/i18n/types';
import { localePath } from '@/lib/i18n/paths';

type ProductStatus = MercariStatus | 'available';

interface PurchaseItemProps {
  product: ProductNode | undefined;
  locale?: Locale;
}

export const PurchaseItem: FunctionComponent<PurchaseItemProps> = ({ product, locale = 'ja' }) => {
  if (!product) {
    return <div>{getMissingProductError(locale)}</div>;
  }

  const { mercariProductId, mercariStatus } = product;

  // Determine the status: 'available', 'sold', 'incoming', 'discontinued', 'askToBuy', or 'unavailable'
  const status: ProductStatus = mercariStatus || 'available';

  // Determine link URL based on status (for available and sold items)
  const contactPath = localePath('/contact/', locale);
  const linkUrl =
    status === 'incoming' || status === 'askToBuy'
      ? contactPath
      : generateMercariUrl(mercariProductId);

  // Route to the appropriate status-specific component
  switch (status) {
    case 'available':
      return <AvailableItem product={product} linkUrl={linkUrl} />;
    case 'sold':
      return <SoldItem product={product} linkUrl={linkUrl} locale={locale} />;
    case 'incoming':
      return <IncomingItem product={product} locale={locale} />;
    case 'askToBuy':
      return <AskToBuyItem product={product} locale={locale} />;
    case 'discontinued':
      return <DiscontinuedItem product={product} locale={locale} />;
    case 'unavailable':
      return <UnavailableItem product={product} locale={locale} />;
    default:
      return <AvailableItem product={product} linkUrl={linkUrl} />;
  }
};

products.ts

import type { ProductNode } from '../types';

/**
 * Mock brand data for testing
 */
export const mockBrand = {
  slug: 'oam',
  name: 'OAM',
  svg: {
    component: 'OamLogo',
    className: '',
  },
  description: 'Mock brand',
} as const;

export const mockBrandTakazudo = {
  slug: 'takazudo-modular',
  name: 'Takazudo Modular',
  svg: {
    component: 'TakazudoModularLogo',
    className: '',
  },
  description: 'Mock brand',
} as const;

/**
 * Standard blurHash for mock product images
 * Used across all mock products for consistent loading placeholders
 */
export const MOCK_BLURHASH = 'LEHV6nWB2yk8pyo0adR*.7kCMdnj';

/**
 * Mock URL constants
 */
export const MOCK_URLS = {
  mercariProduct: 'https://mercari-shops.com/shops/mock-shop/items/mock-id',
  contact: '/contact/',
} as const;

/**
 * Creates a fully-typed mock product for testing
 */
export const createMockProduct = (overrides: Partial<ProductNode> = {}): ProductNode => ({
  id: 'mock-product-id',
  index: 0,
  slug: 'mock-product',
  name: 'Mock Product',
  blurHash: MOCK_BLURHASH,
  brand: mockBrand,
  imgSrc: 'https://takazudomodular.com/images/p/oam-tiny-view1',
  description: 'Mock product for testing',
  spec: {
    width: '8HP',
  },
  ...overrides,
});

/**
 * Pre-configured mock products for PurchaseNav status testing
 */
export const mockMercariProducts = {
  available: createMockProduct({
    id: 'mock-available-id',
    slug: 'mock-available',
    name: 'Available Product',
    description: 'Mock product for testing Available status',
    mercariProductId: 'mock-mercari-id-available',
    detailHref: '/products/mock-available-intro/',
    price: 153800,
  }),
  sold: createMockProduct({
    id: 'mock-sold-id',
    index: 1,
    slug: 'mock-sold',
    name: 'Sold Out Product',
    description: 'Mock product for testing Sold status',
    mercariProductId: 'mock-mercari-id-sold',
    mercariStatus: 'sold',
    detailHref: '/products/mock-sold-intro/',
    price: 89000,
  }),
  incoming: createMockProduct({
    id: 'mock-incoming-id',
    index: 2,
    slug: 'mock-incoming',
    name: 'Incoming Product',
    description: 'Mock product for testing Incoming status',
    mercariProductId: 'mock-mercari-id-incoming',
    mercariStatus: 'incoming',
    detailHref: '/products/mock-incoming-intro/',
    price: 45000,
  }),
  askToBuy: createMockProduct({
    id: 'mock-ask-to-buy-id',
    index: 3,
    slug: 'mock-ask-to-buy',
    name: 'Ask to Buy Product',
    description: 'Mock product for testing AskToBuy status',
    mercariProductId: 'mock-mercari-id-asktobuy',
    mercariStatus: 'askToBuy',
    detailHref: '/products/mock-ask-to-buy-intro/',
    price: 275000,
  }),
  discontinued: createMockProduct({
    id: 'mock-discontinued-id',
    index: 4,
    slug: 'mock-discontinued',
    name: 'Discontinued Product',
    description: 'Mock product for testing Discontinued status',
    mercariProductId: 'mock-mercari-id-discontinued',
    mercariStatus: 'discontinued',
    detailHref: '/products/mock-discontinued-intro/',
    price: 32000,
  }),
  unavailable: createMockProduct({
    id: 'mock-unavailable-id',
    index: 5,
    slug: 'mock-unavailable',
    name: 'Unavailable Product',
    description: 'Mock product for testing Unavailable status',
    mercariProductId: 'mock-mercari-id-unavailable',
    mercariStatus: 'unavailable',
    detailHref: '/products/mock-unavailable-intro/',
    price: 28000,
  }),
};

/**
 * Pre-configured mock products for RelatedProducts testing
 */
export const mockRelatedProducts = {
  product1: createMockProduct({
    id: 'mock-product-1-id',
    slug: 'mock-product-1',
    name: 'Mock Product One',
    description: 'First mock product for testing',
    detailHref: '/products/mock-product-1-intro/',
  }),
  product2: createMockProduct({
    id: 'mock-product-2-id',
    index: 1,
    slug: 'mock-product-2',
    name: 'Mock Product Two',
    description: 'Second mock product for testing',
    spec: { width: '16HP' },
    detailHref: '/products/mock-product-2-intro/',
  }),
  product3: createMockProduct({
    id: 'mock-product-3-id',
    index: 2,
    slug: 'mock-product-3',
    name: 'Mock Product Three',
    description: 'Third mock product for testing',
    brand: mockBrandTakazudo,
    spec: { width: '4HP' },
    detailHref: '/products/mock-product-3-intro/',
  }),
  productNoDetail: createMockProduct({
    id: 'mock-product-no-detail-id',
    index: 3,
    slug: 'mock-product-no-detail',
    name: 'Mock Product Without Detail',
    description: 'Mock product without detail page (should be filtered out)',
    detailHref: undefined,
  }),
};

Story Source

import type { ProductNode } from './types';
import { PurchaseItem } from './purchase-item';
import { mockMercariProducts } from './__mocks__/products';

/**
 * PurchaseNav Component Stories with Mock Data
 *
 * Uses virtual product data to test all 6 status states:
 * - Available (default) - Shows link to Mercari product page
 * - Sold - Shows sold out message with link to Mercari for stock notifications
 * - Incoming - Shows coming soon message with link to contact page
 * - Ask to Buy - Shows manufacturer consultation required message with link to contact page
 * - Discontinued - Shows discontinued message (non-clickable)
 * - Unavailable - Shows unavailable message (non-clickable)
 */

// Convert mock products object to mapping by slug
const mockProducts: Record<string, ProductNode> = {
  'mock-available': mockMercariProducts.available,
  'mock-sold': mockMercariProducts.sold,
  'mock-incoming': mockMercariProducts.incoming,
  'mock-ask-to-buy': mockMercariProducts.askToBuy,
  'mock-discontinued': mockMercariProducts.discontinued,
  'mock-unavailable': mockMercariProducts.unavailable,
};

interface ArticleNavItemProps {
  product: ProductNode;
}

const ArticleNavItem = ({ product }: ArticleNavItemProps) => {
  const { name, subtitle, detailHref, brand } = product;
  const brandName = typeof brand === 'string' ? brand : brand.name;
  return detailHref ? (
    <li>
      <a href={detailHref}>
        {brandName}: {name}
        {subtitle ? ` ${subtitle}` : ''}紹介
      </a>
    </li>
  ) : null;
};

interface PurchaseNavStorybookProps {
  ids?: string[];
  id?: string | null;
  addArticleNav?: boolean;
}

/** Demo wrapper that renders PurchaseItems with mock product data. */
const PurchaseNavStorybook = ({
  ids = [],
  id = null,
  addArticleNav = false,
}: PurchaseNavStorybookProps) => {
  const productIds = id ? [...ids, id] : ids;

  return (
    <>
      <div className="pb-vgap-lg">
        <div className={'border-b-2 border-zd-white flex flex-col gap-vgap-sm pb-vgap-sm'}>
          {productIds.map((productId) => {
            const product = mockProducts[productId];
            if (!product) {
              return (
                <div key={productId} className="text-red-500">
                  Product not found: {productId}
                </div>
              );
            }
            return (
              <div key={productId} className={'border-t-2 border-zd-white pt-vgap-sm'}>
                <PurchaseItem product={product} />
              </div>
            );
          })}
        </div>
      </div>
      {addArticleNav && (
        <div className="pb-vgap-sm">
          <ul>
            {productIds.map((productId) => {
              const product = mockProducts[productId];
              return product ? <ArticleNavItem product={product} key={productId} /> : null;
            })}
          </ul>
        </div>
      )}
    </>
  );
};

export const meta = {
  title: 'Article/PurchaseNav',
};

/**
 * Available Status (Default)
 *
 * Default state when product is available for purchase on Mercari.
 * Shows Mercari link with product name and image.
 *
 * Virtual slug: mock-available
 */
export const Available = () => <PurchaseNavStorybook id="mock-available" />;

/**
 * Sold Status
 *
 * When product is sold out (mercariStatus: 'sold').
 * Links to Mercari product page and shows:
 * - "メルカリShops: Takazudo Modularをチェック！"
 * - Product name with "現在売り切れ中"
 * - Message: "メルカリShopsで入荷通知の設定をご利用いただけます。"
 *
 * Virtual slug: mock-sold
 */
export const SoldOut = () => <PurchaseNavStorybook id="mock-sold" />;

/**
 * Incoming Status
 *
 * When product is coming soon (mercariStatus: 'incoming').
 * Links to contact page and shows:
 * - "Coming soon..."
 * - "近日入荷予定。入荷通知及びご予約が可能な商品です。"
 * - Link text: "お問い合わせ"
 *
 * Virtual slug: mock-incoming
 */
export const Incoming = () => <PurchaseNavStorybook id="mock-incoming" />;

/**
 * Ask to Buy Status
 *
 * When product requires manufacturer consultation (mercariStatus: 'askToBuy').
 * Links to contact page and shows:
 * - "Ask to Buy!"
 * - "要メーカー問い合わせ製品です。ご検討の際にはまずご相談ください。"
 * - Link text: "お問い合わせ"
 *
 * Virtual slug: mock-ask-to-buy
 */
export const AskToBuy = () => <PurchaseNavStorybook id="mock-ask-to-buy" />;

/**
 * Discontinued Status
 *
 * When product is discontinued (mercariStatus: 'discontinued').
 * Non-clickable div showing:
 * - "こちらの商品は製造終了品になります"
 *
 * Virtual slug: mock-discontinued
 */
export const Discontinued = () => <PurchaseNavStorybook id="mock-discontinued" />;

/**
 * Unavailable Status
 *
 * When product is no longer carried (mercariStatus: 'unavailable').
 * Non-clickable div showing:
 * - "こちらの商品は現在当店で取り扱っていない商品になります"
 *
 * Virtual slug: mock-unavailable
 */
export const Unavailable = () => <PurchaseNavStorybook id="mock-unavailable" />;

/**
 * Multiple Products
 *
 * Shows multiple products with different statuses in a single view.
 * Useful for comparing different states side by side.
 *
 * Displays all 6 virtual status variations together.
 */
export const MultipleProducts = () => (
  <PurchaseNavStorybook
    ids={[
      'mock-available',
      'mock-sold',
      'mock-incoming',
      'mock-ask-to-buy',
      'mock-discontinued',
      'mock-unavailable',
    ]}
  />
);

/**
 * With Article Navigation
 *
 * Shows PurchaseNav with article navigation links enabled.
 * The addArticleNav prop adds links to product detail pages below the purchase cards.
 *
 * Virtual slug: mock-available
 */
export const WithArticleNavigation = () => (
  <PurchaseNavStorybook id="mock-available" addArticleNav />
);