orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,1339 @@
+'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>
+  );
+}