orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/products/StorefrontProduct.tsx

@@ -1,1339 +0,0 @@
-'use client';
-
-import { StorefrontLink as Link } from '@/lib/orionplace/navigation';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent,
-  type MouseEvent,
-  type TouchEvent,
-} from 'react';
-import {
-  useOrionplace,
-  useOrionplaceCatalog,
-  useOrionplaceProductsStore,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import { selectInit } from '@/stores/orionplace';
-import type {
-  IProduct,
-  IProductSeller,
-} from '@/interfaces/orionplace/products/IProduct';
-import { EProductStatus } from '@/interfaces/orionplace/products/IProduct';
-import type { IProductSearchRequest } from '@/interfaces/orionplace/products/IProductSearchApi';
-import type { IBreadcrumb } from '@/interfaces/orionplace/shared/IBreadcrumb';
-import { apiErrorMessage, OrionplaceApiError } from '@/lib/orionplace/api';
-import { catalogTrailToCategory } from '@/lib/orionplace/catalog';
-import { categoryLabels } from '@/lib/orionplace/categoryLabels';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { htmlTextParagraphs } from '@/lib/orionplace/htmlText';
-import { productActionLabels } from '@/lib/orionplace/productActionLabels';
-import {
-  productThumbnailKeyTarget,
-  productThumbnailRailEdges,
-  productThumbnailScrollTarget,
-  type ProductThumbnailRailMetrics,
-} from '@/lib/orionplace/productGallery';
-import { productPhotoAfterSwipe } from '@/lib/orionplace/productPhotos';
-import { productLabels } from '@/lib/orionplace/productLabels';
-import {
-  productPageManufacturer,
-  productPagePhotos,
-  productPageReturns,
-  productPageReviewStat,
-  productPageSpecifications,
-} from '@/lib/orionplace/productPage';
-import {
-  getAvailableNestedValueFromObject,
-  safePublicUrl,
-} from '@/lib/orionplace/presentation';
-import { reviewLabels } from '@/lib/orionplace/reviewLabels';
-import { safeBlogArticleHtml } from '@/lib/orionplace/blogArticleHtml';
-import { OrionplaceAvatar } from '@/components/orionplace/shared/OrionplaceAvatar';
-import { OrionplaceBreadcrumbs } from '@/components/orionplace/shared/OrionplaceBreadcrumbs';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import { ProductCard, type ProductCardProps } from './ProductCard';
-import {
-  ProductPreorderDialog,
-  type ProductPreorderSelection,
-} from './ProductPreorderDialog';
-import { ProductReviews, type ProductReviewsProps } from './ProductReviews';
-import { ProductSpecificationsDialog } from './ProductSpecificationsDialog';
-import { ProductReviewImageViewer } from './ProductReviewImageViewer';
-import styles from './StorefrontProduct.module.css';
-
-export interface ProductPageLoadAction {
-  endpoint: 'products_search' | 'products_preview';
-  request: IProductSearchRequest & {
-    filters: NonNullable<IProductSearchRequest['filters']> & {
-      id: number;
-      view_key?: string;
-    };
-  };
-  signal: AbortSignal;
-}
-
-export interface ProductPreorderAction {
-  endpoint: 'preorders_create';
-  request: ProductPreorderSelection;
-  signal: AbortSignal;
-}
-
-export interface ProductActionNotice {
-  message: string;
-  tone?: 'success' | 'error';
-  emailRequired?: boolean;
-}
-
-type CardCallbacks = Pick<
-  ProductCardProps,
-  | 'variantProductIds'
-  | 'onToggleFavorite'
-  | 'onSelectVariant'
-  | 'onSelectSecondaryVariant'
-  | 'onRequestSecondaryVariants'
-  | 'onAdd'
-  | 'onRemove'
-  | 'onSubscribe'
-  | 'onUnsubscribe'
->;
-
-export interface StorefrontProductProps extends CardCallbacks {
-  productId: number;
-  initialProduct?: IProduct;
-  preloaded?: boolean;
-  previewKey?: string;
-  loadOnMount?: boolean;
-  initialError?: string;
-  actionPending?: boolean;
-  actionNotice?: ProductActionNotice;
-  needsRefresh?: boolean;
-  profileHref?: string;
-  reviewProps?: Omit<ProductReviewsProps, 'productId'>;
-  onLoad?: (
-    action: ProductPageLoadAction,
-  ) => Promise<IProduct | undefined> | IProduct | undefined;
-  onLoaded?: (product: IProduct) => void;
-  onMissing?: () => void;
-  onSelectSeller?: (seller: IProductSeller) => void;
-  onOpenPreorder?: (product: IProduct) => void;
-  onSubmitPreorder?: (
-    action: ProductPreorderAction,
-  ) => Promise<boolean | void> | boolean | void;
-  /**
-   * Opens the sign-in page from the preorder dialog when OrionMarketplace asks a guest
-   * to sign in first (error code `sign_in`).
-   */
-  onSignIn?: () => void;
-  onRetryRefresh?: () => Promise<void> | void;
-}
-
-const railInset = 40;
-const emptyUnits = {};
-const publishedPreviewStatuses: number[] = [
-  EProductStatus.PUBLISHED,
-  EProductStatus.LOW_STOCK,
-  EProductStatus.LOW_SALE_STOCK,
-];
-
-function isModifiedClick(event: MouseEvent<HTMLAnchorElement>) {
-  return (
-    event.button > 0 ||
-    event.metaKey ||
-    event.ctrlKey ||
-    event.shiftKey ||
-    event.altKey
-  );
-}
-
-export function StorefrontProduct({
-  productId,
-  initialProduct,
-  preloaded = false,
-  previewKey = '',
-  loadOnMount = true,
-  initialError = '',
-  actionPending = false,
-  actionNotice,
-  needsRefresh = false,
-  profileHref,
-  reviewProps,
-  variantProductIds,
-  onLoad,
-  onLoaded,
-  onMissing,
-  onSelectSeller,
-  onOpenPreorder,
-  onSubmitPreorder,
-  onSignIn,
-  onRetryRefresh,
-  onToggleFavorite,
-  onSelectVariant,
-  onSelectSecondaryVariant,
-  onRequestSecondaryVariants,
-  onAdd,
-  onRemove,
-  onSubscribe,
-  onUnsubscribe,
-}: StorefrontProductProps) {
-  const init = useOrionplace(selectInit);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const weightId = useOrionplaceSelections((state) => state.weightId);
-  const lengthId = useOrionplaceSelections((state) => state.lengthId);
-  const weights = useOrionplaceSelections((state) => state.init?.weights);
-  const lengths = useOrionplaceSelections((state) => state.init?.lengths);
-  const catalog = useOrionplaceCatalog((state) => state.catalog);
-  const productStore = useOrionplaceProductsStore();
-  const rootProduct = useOrionplaceProduct(productId);
-  const [currentId, setCurrentId] = useState(productId);
-  const storedProduct = useOrionplaceProduct(currentId);
-  const [localProduct, setLocalProduct] = useState<IProduct | undefined>(() =>
-    initialProduct?.id === productId
-      ? initialProduct
-      : preloaded
-        ? rootProduct
-        : undefined,
-  );
-  const [confirmed, setConfirmed] = useState(Boolean(localProduct));
-  const [settled, setSettled] = useState(Boolean(localProduct));
-  const [pending, setPending] = useState(false);
-  const [error, setError] = useState(initialError);
-  const [requestedVariantId, setRequestedVariantId] = useState<number>();
-  const requestedVariant = useOrionplaceProduct(
-    requestedVariantId ?? currentId,
-  );
-  const [image, setImage] = useState(0);
-  const swipeStart         = useRef<{ x: number; y: number } | undefined>(undefined);
-  const [mounted, setMounted] = useState(false);
-  const [descriptionOpen, setDescriptionOpen] = useState(false);
-  const [descriptionLong, setDescriptionLong] = useState(false);
-  const [specificationsOpen, setSpecificationsOpen] = useState(false);
-  // A tap on the main photo opens it full screen; the page keeps the photo
-  // chosen there.
-  const [viewerOpen, setViewerOpen] = useState(false);
-  const [specificationsLong, setSpecificationsLong] = useState(false);
-  const [preorderId, setPreorderId] = useState<number>();
-  const [preorderPending, setPreorderPending] = useState(false);
-  const [preorderError, setPreorderError] = useState('');
-  const [preorderFields, setPreorderFields] = useState<Record<string, string>>({});
-  const [preorderSignIn, setPreorderSignIn] = useState(false);
-  const [railEdges, setRailEdges] = useState({ back: false, forward: false });
-  const request = useRef<AbortController | undefined>(undefined);
-  const preorderRequest = useRef<AbortController | undefined>(undefined);
-  const rail = useRef<HTMLDivElement>(null);
-  const descriptionBody = useRef<HTMLDivElement>(null);
-  const specificationsBody = useRef<HTMLDivElement>(null);
-  const callbacks = useRef({
-    onLoad,
-    onLoaded,
-    onMissing,
-    onSubmitPreorder,
-  });
-  callbacks.current = {
-    onLoad,
-    onLoaded,
-    onMissing,
-    onSubmitPreorder,
-  };
-
-  const labels = reviewLabels(locale);
-  const common = featureLabels(locale);
-  const cardLabels = productLabels(locale);
-  const actionLabels = productActionLabels(locale);
-  const categoryNames = categoryLabels(locale);
-  const product = confirmed
-    ? (storedProduct ??
-      (localProduct?.id === currentId ? localProduct : undefined))
-    : undefined;
-  const title =
-    getAvailableNestedValueFromObject(
-      product?.locale,
-      locale,
-      'product_name',
-    ) || labels.product;
-  const descriptionSource =
-    getAvailableNestedValueFromObject(
-      product?.locale,
-      locale,
-      'product_description',
-    ) || '';
-  const descriptionText = useMemo(
-    () => htmlTextParagraphs(descriptionSource),
-    [descriptionSource],
-  );
-  const descriptionHtml = useMemo(
-    () => (mounted ? safeBlogArticleHtml(descriptionSource) : ''),
-    [descriptionSource, mounted],
-  );
-  const hasDescription = mounted
-    ? Boolean(descriptionHtml)
-    : descriptionText.length > 0;
-  const photos = useMemo(() => productPagePhotos(product), [product]);
-  const manufacturer = useMemo(
-    () => productPageManufacturer(product, locale),
-    [product, locale],
-  );
-  const reviewStat = useMemo(() => productPageReviewStat(product), [product]);
-  const returns = useMemo(
-    () => productPageReturns(product, locale, labels),
-    [product, locale, labels],
-  );
-  const specifications = useMemo(
-    () =>
-      productPageSpecifications({
-        product,
-        locale,
-        weights: weights ?? emptyUnits,
-        lengths: lengths ?? emptyUnits,
-        weightId,
-        lengthId,
-        labels,
-      }),
-    [product, locale, weights, lengths, weightId, lengthId, labels],
-  );
-  const categoryPath =
-    typeof product?.main_category === 'number'
-      ? catalogTrailToCategory(catalog, product.main_category)
-      : [];
-  const breadcrumbs: IBreadcrumb[] = [
-    {
-      id: 'catalog',
-      label: categoryNames.catalog,
-      to: {
-        path: '/catalog',
-        query: { locale },
-      },
-    },
-    ...categoryPath.map((category) => ({
-      id: category.id,
-      label:
-        getAvailableNestedValueFromObject(category.locale, locale, 'cg_name') ||
-        `${categoryNames.category} ${category.id}`,
-      to: {
-        path: `/category/${category.id}`,
-        query: { locale },
-      },
-    })),
-    { id: `product-${currentId}`, label: title },
-  ];
-  const seller = init?.visual_settings?.single_seller_mode
-    ? undefined
-    : product?.seller;
-  const sellerHref = seller
-    ? `/sellers?locale=${encodeURIComponent(locale)}&seller=${seller.id}`
-    : '';
-  const safeProfileHref = safePublicUrl(
-    profileHref ?? `/profile?locale=${encodeURIComponent(locale)}`,
-  );
-  const previewStatus =
-    !previewKey || !product
-      ? ''
-      : product.status.status === EProductStatus.PUBLISHED_AS_OPTION
-        ? cardLabels.previewOption
-        : !publishedPreviewStatuses.includes(product.status.status)
-          ? cardLabels.previewUnpublished
-          : '';
-  const showSkeleton = !product && !error && (!settled || pending);
-
-  const load = useCallback(async () => {
-    if (!callbacks.current.onLoad) {
-      setSettled(true);
-      return;
-    }
-    request.current?.abort();
-    const controller = new AbortController();
-    request.current = controller;
-    setPending(true);
-    setError('');
-    try {
-      const found = await callbacks.current.onLoad({
-        endpoint: previewKey ? 'products_preview' : 'products_search',
-        request: {
-          filters: previewKey
-            ? { id: productId, view_key: previewKey }
-            : { id: productId },
-          paginate: { page: 1, pp_items: 1 },
-        },
-        signal: controller.signal,
-      });
-      if (controller.signal.aborted) {
-        return;
-      }
-      setSettled(true);
-      setConfirmed(Boolean(found));
-      if (found) {
-        productStore.getState().setProduct(found);
-        setLocalProduct(found);
-        setCurrentId(found.id);
-      } else {
-        callbacks.current.onMissing?.();
-      }
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setSettled(true);
-        setError(
-          apiErrorMessage(reason) || common.failed,
-        );
-      }
-    } finally {
-      if (request.current === controller) {
-        request.current = undefined;
-        setPending(false);
-      }
-    }
-  }, [common.failed, previewKey, productId, productStore]);
-
-  useEffect(() => {
-    setMounted(true);
-    return () => {
-      request.current?.abort();
-      preorderRequest.current?.abort();
-    };
-  }, []);
-
-  useEffect(() => {
-    request.current?.abort();
-    const seeded =
-      initialProduct?.id === productId
-        ? initialProduct
-        : preloaded
-          ? productStore.getState().getProduct(productId)
-          : undefined;
-    setCurrentId(productId);
-    setRequestedVariantId(undefined);
-    setImage(0);
-    setLocalProduct(seeded);
-    setConfirmed(Boolean(seeded));
-    setSettled(Boolean(seeded));
-    setError(initialError);
-    setSpecificationsOpen(false);
-    setPreorderId(undefined);
-    if (seeded) {
-      productStore.getState().setProduct(seeded);
-    } else if (loadOnMount && callbacks.current.onLoad) {
-      void load();
-    }
-  }, [
-    productId,
-    previewKey,
-    preloaded,
-    initialProduct,
-    initialError,
-    loadOnMount,
-    load,
-    productStore,
-  ]);
-
-  const notifiedProduct = useRef<IProduct | undefined>(undefined);
-  useEffect(() => {
-    if (product && notifiedProduct.current !== product) {
-      notifiedProduct.current = product;
-      callbacks.current.onLoaded?.(product);
-    }
-  }, [product]);
-
-  useEffect(() => {
-    if (requestedVariantId && requestedVariant?.id === requestedVariantId) {
-      setCurrentId(requestedVariantId);
-      setRequestedVariantId(undefined);
-      setImage(0);
-    }
-  }, [requestedVariantId, requestedVariant]);
-
-  useEffect(() => {
-    setDescriptionOpen(false);
-    setDescriptionLong(false);
-  }, [descriptionSource]);
-
-  useEffect(() => {
-    setSpecificationsLong(false);
-    if (!specifications.length) {
-      setSpecificationsOpen(false);
-    }
-  }, [specifications]);
-
-  function railIsVertical(element: HTMLElement) {
-    return getComputedStyle(element).flexDirection === 'column';
-  }
-
-  function railMetrics(element: HTMLElement): ProductThumbnailRailMetrics {
-    return railIsVertical(element)
-      ? {
-          position: element.scrollTop,
-          size: element.scrollHeight,
-          viewport: element.clientHeight,
-        }
-      : {
-          position: element.scrollLeft,
-          size: element.scrollWidth,
-          viewport: element.clientWidth,
-        };
-  }
-
-  const updateRail = useCallback(() => {
-    const element = rail.current;
-    setRailEdges(
-      element
-        ? productThumbnailRailEdges(railMetrics(element))
-        : { back: false, forward: false },
-    );
-  }, []);
-
-  useEffect(() => {
-    const element = rail.current;
-    if (!element) {
-      setRailEdges({ back: false, forward: false });
-      return;
-    }
-    const observer =
-      typeof ResizeObserver === 'undefined'
-        ? undefined
-        : new ResizeObserver(updateRail);
-    observer?.observe(element);
-    updateRail();
-
-    return () => observer?.disconnect();
-  }, [photos, updateRail]);
-
-  useEffect(() => {
-    const element = descriptionBody.current;
-    if (!element || descriptionOpen) {
-      return;
-    }
-    const measure = () => {
-      setDescriptionLong(element.scrollHeight > element.clientHeight + 1);
-    };
-    const observer =
-      typeof ResizeObserver === 'undefined'
-        ? undefined
-        : new ResizeObserver(measure);
-    observer?.observe(element);
-    measure();
-
-    return () => observer?.disconnect();
-  }, [descriptionHtml, descriptionText, descriptionOpen]);
-
-  useEffect(() => {
-    const element = specificationsBody.current;
-    if (!element) {
-      return;
-    }
-    const measure = () => {
-      setSpecificationsLong(element.scrollHeight > element.clientHeight + 1);
-    };
-    const observer =
-      typeof ResizeObserver === 'undefined'
-        ? undefined
-        : new ResizeObserver(measure);
-    observer?.observe(element);
-    measure();
-
-    return () => observer?.disconnect();
-  }, [specifications]);
-
-  useEffect(() => {
-    const element = rail.current;
-    const thumbnail = element?.children[image];
-    if (!element || !(thumbnail instanceof HTMLElement)) {
-      return;
-    }
-    const bounds = railIsVertical(element)
-      ? { start: thumbnail.offsetTop, length: thumbnail.offsetHeight }
-      : { start: thumbnail.offsetLeft, length: thumbnail.offsetWidth };
-    const target = productThumbnailScrollTarget(
-      bounds,
-      railMetrics(element),
-      railInset,
-    );
-    if (target !== undefined) {
-      scrollRail(element, target);
-    }
-  }, [image]);
-
-  useEffect(() => {
-    setImage(0);
-    if (rail.current) {
-      rail.current.scrollTop = 0;
-      rail.current.scrollLeft = 0;
-    }
-    updateRail();
-  }, [photos, updateRail]);
-
-  const viewerPhotos = useMemo(
-    () => photos.map((photo, id) => ({ id, image: photo })),
-    [photos],
-  );
-
-  function openViewerKey(event: { key: string; preventDefault: () => void }) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      setViewerOpen(true);
-    }
-  }
-
-  function showImage(index: number) {
-    if (photos.length) {
-      setImage((index + photos.length) % photos.length);
-    }
-  }
-
-  // A sideways swipe on a touch screen steps to the next or previous photo,
-  // as on the product cards.
-  function startSwipe(event: TouchEvent<HTMLElement>) {
-    const touch        = event.touches[0];
-    swipeStart.current =
-      touch && event.touches.length === 1
-        ? { x: touch.clientX, y: touch.clientY }
-        : undefined;
-  }
-
-  function endSwipe(event: TouchEvent<HTMLElement>) {
-    const touch        = event.changedTouches[0];
-    const start        = swipeStart.current;
-
-    swipeStart.current = undefined;
-    if (!start || !touch) {
-      return;
-    }
-    showImage(
-      productPhotoAfterSwipe(
-        image,
-        photos.length,
-        touch.clientX - start.x,
-        touch.clientY - start.y,
-      ),
-    );
-  }
-
-  function scrollRail(element: HTMLElement, position: number) {
-    const reduced = window.matchMedia(
-      '(prefers-reduced-motion: reduce)',
-    ).matches;
-    const behavior = reduced ? 'auto' : 'smooth';
-    if (railIsVertical(element)) {
-      element.scrollTo({ top: position, behavior });
-    } else {
-      element.scrollTo({ left: position, behavior });
-    }
-  }
-
-  function stepRail(direction: 1 | -1) {
-    const element = rail.current;
-    const thumbnail = element?.firstElementChild;
-    if (!element || !(thumbnail instanceof HTMLElement)) {
-      return;
-    }
-    const style = getComputedStyle(element);
-    const step = railIsVertical(element)
-      ? thumbnail.offsetHeight + Number.parseFloat(style.rowGap || '0')
-      : thumbnail.offsetWidth + Number.parseFloat(style.columnGap || '0');
-    scrollRail(element, railMetrics(element).position + direction * step);
-  }
-
-  function thumbnailKeydown(
-    event: KeyboardEvent<HTMLButtonElement>,
-    index: number,
-  ) {
-    const target = productThumbnailKeyTarget(event.key, index, photos.length);
-    if (target === undefined) {
-      return;
-    }
-    event.preventDefault();
-    setImage(target);
-    const button = rail.current?.children[target];
-    if (button instanceof HTMLElement) {
-      button.focus({ preventScroll: true });
-    }
-  }
-
-  function selectMainVariant(
-    selection: Parameters<NonNullable<ProductCardProps['onSelectVariant']>>[0],
-  ) {
-    const target = selection.variant.reload_product;
-    if (target) {
-      setRequestedVariantId(target);
-      const available = productStore.getState().getProduct(target);
-      if (available) {
-        setCurrentId(target);
-        setRequestedVariantId(undefined);
-        setImage(0);
-      }
-    }
-    onSelectVariant?.(selection);
-  }
-
-  function selectSecondaryVariant(
-    selection: Parameters<
-      NonNullable<ProductCardProps['onSelectSecondaryVariant']>
-    >[0],
-  ) {
-    setCurrentId(selection.variant.product.id);
-    setImage(0);
-    onSelectSecondaryVariant?.(selection);
-  }
-
-  function openPreorder(selection: { product: number }) {
-    const selected = productStore.getState().getProduct(selection.product);
-    setPreorderError('');
-    setPreorderFields({});
-    setPreorderSignIn(false);
-    setPreorderId(selection.product);
-    if (selected) {
-      onOpenPreorder?.(selected);
-    }
-  }
-
-  async function submitPreorder(selection: ProductPreorderSelection) {
-    if (!callbacks.current.onSubmitPreorder || preorderPending) {
-      return;
-    }
-    const controller = new AbortController();
-    preorderRequest.current = controller;
-    setPreorderPending(true);
-    setPreorderError('');
-    setPreorderFields({});
-    setPreorderSignIn(false);
-    try {
-      const saved = await callbacks.current.onSubmitPreorder({
-        endpoint: 'preorders_create',
-        request: selection,
-        signal: controller.signal,
-      });
-      if (!controller.signal.aborted && saved !== false) {
-        setPreorderId(undefined);
-      }
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setPreorderError(
-          apiErrorMessage(reason) || actionLabels.failed,
-        );
-        if (reason instanceof OrionplaceApiError) {
-          setPreorderFields(reason.fields);
-          setPreorderSignIn(reason.codes.includes('sign_in'));
-        }
-      }
-    } finally {
-      if (preorderRequest.current === controller) {
-        preorderRequest.current = undefined;
-        setPreorderPending(false);
-      }
-    }
-  }
-
-  function information() {
-    if (!hasDescription && !specifications.length) {
-      return null;
-    }
-
-    return (
-      <div
-        className={styles.information}
-        data-product-information
-      >
-        {hasDescription ? (
-          <section
-            className={styles.informationSection}
-            data-product-description
-          >
-            <h2>{labels.description}</h2>
-            {mounted ? (
-              <div
-                ref={descriptionBody}
-                id="product-description-text"
-                className={`${styles.description} ${
-                  descriptionOpen ? '' : styles.descriptionShort
-                } ${
-                  !descriptionOpen && descriptionLong
-                    ? styles.descriptionFade
-                    : ''
-                }`}
-                dangerouslySetInnerHTML={{ __html: descriptionHtml }}
-              />
-            ) : (
-              <div
-                ref={descriptionBody}
-                id="product-description-text"
-                className={`${styles.description} ${styles.descriptionShort}`}
-              >
-                {descriptionText.map((paragraph, index) => (
-                  <p key={`${index}:${paragraph}`}>{paragraph}</p>
-                ))}
-              </div>
-            )}
-            {descriptionLong ? (
-              <button
-                type="button"
-                className={styles.textAction}
-                aria-controls="product-description-text"
-                aria-expanded={descriptionOpen}
-                data-product-description-toggle
-                onClick={() => setDescriptionOpen((value) => !value)}
-              >
-                {descriptionOpen ? labels.less : labels.more}
-              </button>
-            ) : null}
-          </section>
-        ) : null}
-
-        {specifications.length ? (
-          <section
-            className={styles.informationSection}
-            data-product-specifications
-          >
-            <h2>{labels.characteristics}</h2>
-            <div
-              ref={specificationsBody}
-              id="product-specifications-list"
-              className={`${styles.specifications} ${
-                specificationsLong ? styles.specificationsFade : ''
-              }`}
-            >
-              {specifications.map((group) => (
-                <div
-                  key={group.key}
-                  className={styles.specificationGroup}
-                >
-                  {group.title ? <h3>{group.title}</h3> : null}
-                  <dl>
-                    {group.rows.map((row) => (
-                      <div key={row.key}>
-                        <dt>{row.label}</dt>
-                        <dd>
-                          {row.to ? (
-                            <Link
-                              href={{
-                                pathname: row.to.path,
-                                query: row.to.query,
-                              }}
-                            >
-                              {row.value}
-                            </Link>
-                          ) : (
-                            row.value
-                          )}
-                        </dd>
-                      </div>
-                    ))}
-                  </dl>
-                </div>
-              ))}
-            </div>
-            {specificationsLong ? (
-              <button
-                type="button"
-                className={styles.textAction}
-                aria-haspopup="dialog"
-                data-product-specifications-toggle
-                onClick={() => setSpecificationsOpen(true)}
-              >
-                {labels.allCharacteristics}
-              </button>
-            ) : null}
-          </section>
-        ) : null}
-      </div>
-    );
-  }
-
-  const reviewCaption = reviewStat
-    ? pluralReviewWord(reviewStat.count, cardLabels.reviews, locale)
-    : '';
-
-  return (
-    <section
-      className={styles.root}
-      data-feature-part="StorefrontProduct"
-      aria-busy={showSkeleton || undefined}
-    >
-      {error ? (
-        <div
-          className={styles.error}
-          role="alert"
-        >
-          {error}
-          <button
-            className={styles.noticeAction}
-            type="button"
-            disabled={pending}
-            onClick={() => void load()}
-          >
-            {common.retry}
-          </button>
-        </div>
-      ) : null}
-      {pending || showSkeleton ? (
-        <p
-          className="op-feature-loading"
-          role="status"
-        >
-          <span className={styles.screenReaderOnly}>{common.loading}</span>
-        </p>
-      ) : null}
-      {product || showSkeleton ? (
-        <div className={styles.breadcrumbs}>
-          <OrionplaceBreadcrumbs
-            items={breadcrumbs}
-            loading={!product}
-          />
-        </div>
-      ) : null}
-
-      {product ? (
-        <>
-          <div className={styles.layout}>
-            {photos.length ? (
-              <section
-                className={styles.gallery}
-                aria-label={labels.gallery}
-                data-product-gallery
-              >
-                <div
-                  className={
-                    photos.length > 1
-                      ? `${styles.mainImage} ${styles.mainImageSwipe}`
-                      : styles.mainImage
-                  }
-                  data-product-main-image
-                  onTouchStart={startSwipe}
-                  onTouchEnd={endSwipe}
-                >
-                  <OrionplaceImage
-                    src={photos[image]}
-                    alt={title}
-                    width={800}
-                    height={1000}
-                    loading="eager"
-                    role="button"
-                    tabIndex={0}
-                    aria-label={labels.openProductPhoto}
-                    data-product-photo-open
-                    onClick={() => setViewerOpen(true)}
-                    onKeyDown={openViewerKey}
-                    className={styles.mainImageAsset}
-                  />
-                  {photos.length > 1 ? (
-                    <>
-                      <button
-                        type="button"
-                        className={`${styles.imageArrow} ${styles.imagePrevious}`}
-                        aria-label={labels.previousImage}
-                        data-product-image-previous
-                        onClick={() => showImage(image - 1)}
-                      >
-                        <svg
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="1.5"
-                          aria-hidden="true"
-                        >
-                          <path d="m15 5-7 7 7 7" />
-                        </svg>
-                      </button>
-                      <button
-                        type="button"
-                        className={`${styles.imageArrow} ${styles.imageNext}`}
-                        aria-label={labels.nextImage}
-                        data-product-image-next
-                        onClick={() => showImage(image + 1)}
-                      >
-                        <svg
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          strokeWidth="1.5"
-                          aria-hidden="true"
-                        >
-                          <path d="m9 5 7 7-7 7" />
-                        </svg>
-                      </button>
-                    </>
-                  ) : null}
-                </div>
-                {photos.length > 1 ? (
-                  <div
-                    className={styles.thumbnailRail}
-                    data-product-thumbnail-rail
-                  >
-                    <div
-                      ref={rail}
-                      className={styles.thumbnails}
-                      data-product-thumbnails
-                      onScroll={updateRail}
-                    >
-                      {photos.map((photo, index) => (
-                        <button
-                          key={`${photo}:${index}`}
-                          type="button"
-                          className={`${styles.thumbnail} ${
-                            index === image ? styles.thumbnailSelected : ''
-                          }`}
-                          aria-label={`${labels.gallery} ${index + 1}`}
-                          aria-pressed={index === image}
-                          tabIndex={index === image ? 0 : -1}
-                          data-product-thumbnail={index}
-                          onClick={() => setImage(index)}
-                          onKeyDown={(event) => thumbnailKeydown(event, index)}
-                        >
-                          <OrionplaceImage
-                            src={photo}
-                            alt=""
-                            width={72}
-                            height={90}
-                            className={styles.thumbnailImage}
-                          />
-                        </button>
-                      ))}
-                    </div>
-                    <button
-                      type="button"
-                      className={`${styles.railArrow} ${styles.railPrevious}`}
-                      aria-label={labels.thumbnailsBack}
-                      disabled={!railEdges.back}
-                      data-product-thumbnails-previous
-                      onClick={() => stepRail(-1)}
-                    >
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="1.5"
-                        aria-hidden="true"
-                      >
-                        <path d="m15 5-7 7 7 7" />
-                      </svg>
-                    </button>
-                    <button
-                      type="button"
-                      className={`${styles.railArrow} ${styles.railNext}`}
-                      aria-label={labels.thumbnailsForward}
-                      disabled={!railEdges.forward}
-                      data-product-thumbnails-next
-                      onClick={() => stepRail(1)}
-                    >
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="1.5"
-                        aria-hidden="true"
-                      >
-                        <path d="m9 5 7 7-7 7" />
-                      </svg>
-                    </button>
-                  </div>
-                ) : null}
-              </section>
-            ) : null}
-
-            <div
-              className={styles.summary}
-              data-product-summary
-            >
-              <header className={styles.heading}>
-                <h1>{title}</h1>
-                {reviewStat ? (
-                  <a
-                    href="#product-reviews"
-                    className={styles.reviewSummary}
-                    aria-label={`${labels.showReviews}: ${reviewStat.average} ${
-                      labels.ofFive
-                    }, ${reviewStat.count} ${reviewCaption}`}
-                    data-product-review-summary
-                    onClick={(event) => {
-                      event.preventDefault();
-                      document
-                        .getElementById('product-reviews')
-                        ?.scrollIntoView({
-                          behavior: 'smooth',
-                          block: 'start',
-                        });
-                    }}
-                  >
-                    <span
-                      className={styles.stars}
-                      aria-hidden="true"
-                    >
-                      {[1, 2, 3, 4, 5].map((star) => (
-                        <span
-                          key={star}
-                          className={
-                            star <= Math.round(reviewStat.average)
-                              ? styles.starSelected
-                              : ''
-                          }
-                        >
-                          ★
-                        </span>
-                      ))}
-                    </span>
-                    <span className={styles.reviewAverage}>
-                      {reviewStat.average}
-                    </span>
-                    <span>
-                      · {reviewStat.count} {reviewCaption}
-                    </span>
-                  </a>
-                ) : null}
-              </header>
-
-              {previewStatus ? (
-                <p
-                  className={styles.attention}
-                  role="status"
-                  data-product-preview-status
-                >
-                  {previewStatus}
-                </p>
-              ) : null}
-
-              <ProductCard
-                key={currentId}
-                productId={currentId}
-                initialProduct={product}
-                details
-                actionsDisabled={actionPending || needsRefresh}
-                variantProductIds={variantProductIds}
-                onSelectSeller={onSelectSeller}
-                onAdd={onAdd}
-                onRemove={onRemove}
-                onToggleFavorite={onToggleFavorite}
-                onSubscribe={onSubscribe}
-                onUnsubscribe={onUnsubscribe}
-                onPreorder={openPreorder}
-                onRequestSecondaryVariants={onRequestSecondaryVariants}
-                onSelectVariant={selectMainVariant}
-                onSelectSecondaryVariant={selectSecondaryVariant}
-                renderAfterPrice={information}
-              />
-
-              {actionNotice?.message ? (
-                <div
-                  role={actionNotice.tone === 'error' ? 'alert' : 'status'}
-                  className={`${styles.notice} ${
-                    actionNotice.tone === 'error'
-                      ? styles.noticeError
-                      : styles.noticeSuccess
-                  }`}
-                  data-product-action-notice
-                >
-                  {actionNotice.message}
-                  {needsRefresh && onRetryRefresh ? (
-                    <button
-                      className={styles.noticeAction}
-                      type="button"
-                      disabled={actionPending}
-                      onClick={() => void onRetryRefresh()}
-                    >
-                      {actionLabels.retry}
-                    </button>
-                  ) : null}
-                  {actionNotice.emailRequired && safeProfileHref ? (
-                    <a
-                      className={styles.noticeAction}
-                      href={safeProfileHref}
-                    >
-                      {common.navigation.profile}
-                    </a>
-                  ) : null}
-                </div>
-              ) : null}
-
-              {returns.length ? (
-                <section
-                  className={styles.returns}
-                  data-product-returns
-                >
-                  <h2>{labels.returns}</h2>
-                  <dl>
-                    {returns.map((entry) => (
-                      <div key={entry.key}>
-                        <dt>{entry.label}</dt>
-                        <dd>{entry.value}</dd>
-                      </div>
-                    ))}
-                  </dl>
-                </section>
-              ) : null}
-
-              {manufacturer || seller ? (
-                <div className={styles.partners}>
-                  {manufacturer ? (
-                    <Link
-                      href={{
-                        pathname: manufacturer.to.path,
-                        query: manufacturer.to.query,
-                      }}
-                      className={styles.partner}
-                      aria-label={`${labels.manufacturerHint}: ${manufacturer.name}`}
-                      data-product-manufacturer
-                    >
-                      {manufacturer.logo ? (
-                        <span data-product-manufacturer-logo>
-                          <OrionplaceImage
-                            src={manufacturer.logo}
-                            alt=""
-                            width={64}
-                            height={40}
-                            className={styles.partnerLogo}
-                            dataLogoType="manufacturer"
-                          />
-                        </span>
-                      ) : (
-                        <OrionplaceAvatar name={manufacturer.name} />
-                      )}
-                      <span className={styles.partnerText}>
-                        <small>{labels.manufacturer}</small>
-                        <span>{manufacturer.name}</span>
-                      </span>
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="1.5"
-                        aria-hidden="true"
-                      >
-                        <path d="m9 5 7 7-7 7" />
-                      </svg>
-                    </Link>
-                  ) : null}
-                  {seller ? (
-                    <a
-                      href={sellerHref}
-                      className={styles.partner}
-                      aria-label={`${labels.sellerHint}: ${seller.name}`}
-                      data-product-seller-link
-                      onClick={(event) => {
-                        if (!isModifiedClick(event) && onSelectSeller) {
-                          event.preventDefault();
-                          onSelectSeller(seller);
-                        }
-                      }}
-                    >
-                      <OrionplaceAvatar
-                        src={seller.avatar}
-                        name={seller.name}
-                      />
-                      <span className={styles.partnerText}>
-                        <small>{labels.seller}</small>
-                        <span>
-                          {seller.name}
-                          {Number(seller.raiting) > 0 ? (
-                            <em>★ {seller.raiting}</em>
-                          ) : null}
-                        </span>
-                      </span>
-                      <svg
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeWidth="1.5"
-                        aria-hidden="true"
-                      >
-                        <path d="m9 5 7 7-7 7" />
-                      </svg>
-                    </a>
-                  ) : null}
-                </div>
-              ) : null}
-            </div>
-          </div>
-
-          <div
-            id="product-reviews"
-            className={styles.reviews}
-          >
-            <ProductReviews
-              key={currentId}
-              {...reviewProps}
-              productId={currentId}
-            />
-          </div>
-          {preorderId !== undefined ? (
-            <ProductPreorderDialog
-              productId={preorderId}
-              pending={preorderPending}
-              error={preorderError}
-              fieldErrors={preorderFields}
-              suggestSignIn={preorderSignIn}
-              onSubmit={(selection) => void submitPreorder(selection)}
-              onClose={() => setPreorderId(undefined)}
-              onSignIn={onSignIn}
-            />
-          ) : null}
-          {specificationsOpen ? (
-            <ProductSpecificationsDialog
-              groups={specifications}
-              onClose={() => setSpecificationsOpen(false)}
-            />
-          ) : null}
-          {viewerOpen && photos.length ? (
-            <ProductReviewImageViewer
-              images={viewerPhotos}
-              index={image}
-              label={labels.productPhotos}
-              alt={title}
-              onChange={(photo) => setImage(photo.index)}
-              onClose={() => setViewerOpen(false)}
-            />
-          ) : null}
-        </>
-      ) : showSkeleton ? (
-        <ProductSkeleton />
-      ) : !pending && !error ? (
-        <OrionplaceEmptyState
-          kind="search"
-          message={labels.notFound}
-        />
-      ) : null}
-    </section>
-  );
-}
-
-function pluralReviewWord(count: number, forms: string[], locale: string) {
-  let rule: Intl.LDMLPluralRule;
-  try {
-    rule = new Intl.PluralRules(locale).select(count);
-  } catch {
-    rule = new Intl.PluralRules('en').select(count);
-  }
-  if (rule === 'one') {
-    return forms[0] ?? '';
-  }
-  if (rule === 'few' && forms.length > 2) {
-    return forms[1] ?? '';
-  }
-
-  return forms.at(-1) ?? '';
-}
-
-function ProductSkeleton() {
-  return (
-    <div
-      className={styles.skeleton}
-      aria-hidden="true"
-      data-product-skeleton
-    >
-      <div className={styles.skeletonGallery}>
-        <span className={styles.skeletonImage} />
-        <div className={styles.skeletonThumbs}>
-          {[1, 2, 3, 4].map((item) => (
-            <span key={item} />
-          ))}
-        </div>
-      </div>
-      <div className={styles.skeletonSummary}>
-        <span className={styles.skeletonTitle} />
-        <span className={styles.skeletonPrice} />
-        {[1, 2, 3, 4, 5, 6].map((item) => (
-          <span key={item} />
-        ))}
-      </div>
-    </div>
-  );
-}