orionplace-react 0.7.7 → 0.8.0

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

@@ -1,730 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import type {
-  CSSProperties,
-  MouseEvent,
-  PointerEvent,
-  ReactNode,
-  TouchEvent,
-} from 'react';
-import {
-  OrionplaceSuppliedProductContext,
-  useOrionplaceProduct,
-} from '@/hooks/useOrionplaceProduct';
-import {
-  useOrionplaceProducts,
-  useOrionplaceProductsStore,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type {
-  IProduct,
-  IProductSecondaryVariant,
-  IProductSeller,
-  IProductVariantValue,
-} from '@/interfaces/orionplace/products/IProduct';
-import type { IProductSecondaryVariantRequest } from '@/interfaces/orionplace/products/IProductSecondaryVariantRequest';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import {
-  getAvailableNestedValueFromObject,
-  getAvailableValueFromObject,
-  safePublicUrl,
-} from '@/lib/orionplace/presentation';
-import { useOrionplaceStableHeight } from '@/hooks/useOrionplaceStableHeight';
-import { productLabels } from '@/lib/orionplace/productLabels';
-import {
-  productPhotoAfterSwipe,
-  productPhotoAtPointer,
-  productPhotos,
-} from '@/lib/orionplace/productPhotos';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import { ProductCardActions } from './ProductCardActions';
-import { ProductCardBadges } from './ProductCardBadges';
-import { ProductCardDescription } from './ProductCardDescription';
-import { ProductCardFavorite } from './ProductCardFavorite';
-import { ProductCardPrice } from './ProductCardPrice';
-import { ProductCardRating } from './ProductCardRating';
-import { ProductCardSeller } from './ProductCardSeller';
-import { ProductCardStockNotice } from './ProductCardStockNotice';
-import { ProductCardTitle } from './ProductCardTitle';
-import { ProductCardVariants } from './ProductCardVariants';
-import type { ProductCardVariantsHandle } from './ProductCardVariants';
-import type { ProductActionSelection } from './ProductCardActions';
-import styles from './ProductCard.module.css';
-
-// An empty label hides the badge; an omitted one keeps the locale's label.
-function hiddenBadgeLabels(hidden: readonly string[]) {
-  return {
-    ...(hidden.includes('new') ? { newLabel: '' } : {}),
-    ...(hidden.includes('popular') ? { popularLabel: '' } : {}),
-    ...(hidden.includes('deal') ? { dealLabel: '' } : {}),
-  };
-}
-
-export interface ProductCardProps {
-  productId: number;
-  initialProduct?: IProduct;
-  collection?: OrionplaceProductCollection;
-  compact?: boolean;
-  details?: boolean;
-  disabled?: boolean;
-  actionsDisabled?: boolean;
-  purchaseActions?: boolean;
-  variantProductIds?: number[];
-  // Badge keys not to show on this card (new / popular / deal).
-  hiddenBadges?: readonly string[];
-  productHref?: (id: number) => string;
-  onSelect?: (product: IProduct) => void;
-  onSelectSeller?: (seller: IProductSeller) => void;
-  onToggleFavorite?: (
-    selection: ProductActionSelection & { selected: boolean },
-  ) => void;
-  onSelectVariant?: (
-    selection: ProductActionSelection & { variant: IProductVariantValue },
-  ) => void;
-  onSelectSecondaryVariant?: (
-    selection: ProductActionSelection & { variant: IProductSecondaryVariant },
-  ) => void;
-  onRequestSecondaryVariants?: (
-    request: IProductSecondaryVariantRequest,
-  ) => void;
-  onAdd?: (selection: ProductActionSelection & { quantity: number }) => void;
-  onRemove?: (selection: ProductActionSelection & { cartItem: number }) => void;
-  onSubscribe?: (selection: ProductActionSelection) => void;
-  onUnsubscribe?: (selection: ProductActionSelection) => void;
-  onPreorder?: (selection: ProductActionSelection) => void;
-  renderAfterPrice?: (product: IProduct) => ReactNode;
-  renderFooter?: (product: IProduct) => ReactNode;
-  className?: string;
-  dataCatalogProduct?: number;
-}
-
-export function ProductCard({
-  productId,
-  initialProduct,
-  collection = 'products',
-  compact = false,
-  details = false,
-  disabled = false,
-  actionsDisabled = false,
-  purchaseActions = true,
-  variantProductIds,
-  hiddenBadges = [],
-  productHref,
-  onSelect,
-  onSelectSeller,
-  onToggleFavorite,
-  onSelectVariant,
-  onSelectSecondaryVariant,
-  onRequestSecondaryVariants,
-  onAdd,
-  onRemove,
-  onSubscribe,
-  onUnsubscribe,
-  onPreorder,
-  renderAfterPrice,
-  renderFooter,
-  className = '',
-  dataCatalogProduct,
-}: ProductCardProps) {
-  const [displayedId, setDisplayedId]     = useState(productId);
-  const [requestedId, setRequestedId]     = useState(productId);
-  const [variantFailed, setVariantFailed] = useState(false);
-  const variants                          = useRef<ProductCardVariantsHandle>(null);
-  const productsStore                     = useOrionplaceProductsStore();
-  const storedProduct                     = useOrionplaceProduct(displayedId, collection);
-  const product                           =
-    storedProduct ??
-    (initialProduct?.id === displayedId ? initialProduct : undefined);
-  const requestedProduct                  = useOrionplaceProduct(requestedId, collection);
-  const requestState                      = useOrionplaceProducts(
-    (state) => state.requests[requestedId],
-  );
-  const localeCode                        = useOrionplaceSelections((state) => state.localeCode);
-  const copy                              = productLabels(localeCode);
-  const isCompact                         = compact && !details;
-  const layout                            = details ? 'details' : isCompact ? 'compact' : 'card';
-  const variantLoading                    =
-    requestedId !== displayedId && requestState === 'loading';
-  const purchaseDisabled                  = disabled || actionsDisabled || variantLoading;
-  const href                              = product ? safePublicUrl(productHref?.(product.id)) : '';
-  const name                              =
-    getAvailableNestedValueFromObject(
-      product?.locale,
-      localeCode,
-      'product_name',
-    ) || '';
-  const imageArea                         = useRef<HTMLDivElement>(null);
-  // Like Nuxt and Svelte, the card keeps its tallest height at one width, so
-  // switching to a variant with a shorter name or price does not shift the
-  // cards around it.
-  const card                              = useRef<HTMLElement>(null);
-  const { minHeight }                     = useOrionplaceStableHeight(
-    card,
-    Boolean(product),
-  );
-  // A product with several photos switches them in the card: the mouse picks
-  // the photo of its zone (one equal zone per photo, left to right), a
-  // sideways swipe steps to the next or previous one, and the bars at the
-  // bottom show which photo is shown. Leaving the picture shows the first
-  // photo again. The other photos load once the visitor points at or
-  // touches the picture. A click on any photo selects the product.
-  const photos                            = productPhotos(product?.images, compact);
-  const photoKey                          = photos.join('\n');
-  const [activePhoto, setActivePhoto]     = useState(0);
-  const [photosPrimed, setPhotosPrimed]   = useState(false);
-  const photoSwipeStart                   = useRef<{ x: number; y: number } | undefined>(
-    undefined,
-  );
-  const photoSwipedAt                     = useRef(0);
-  const shownPhoto                        = Math.min(activePhoto, Math.max(0, photos.length - 1));
-  const [photoInset, setPhotoInset]       = useState({ x: 0, y: 0 });
-  const photoInsetStyle                   = {
-    '--product-photo-inset-x': `${photoInset.x}px`,
-    '--product-photo-inset-y': `${photoInset.y}px`,
-  } as CSSProperties;
-  const mainVariant                       = product?.variants.main_variant;
-  const selectedMain                      = mainVariant?.value.find(
-    (value) => value.reload_product === displayedId,
-  );
-  const variantCaption                    =
-    mainVariant && selectedMain
-      ? {
-          name:
-            getAvailableValueFromObject(mainVariant.locale, localeCode) || '',
-          value:
-            getAvailableValueFromObject(selectedMain.locale, localeCode) || '',
-        }
-      : undefined;
-
-  useEffect(() => {
-    setDisplayedId(productId);
-    setRequestedId(productId);
-    setVariantFailed(false);
-  }, [productId, collection]);
-
-  useEffect(() => {
-    if (initialProduct?.id === productId) {
-      productsStore.getState().setProduct(initialProduct, collection);
-    }
-  }, [collection, initialProduct, productId, productsStore]);
-
-  useEffect(() => {
-    if (requestedId === displayedId) {
-      return;
-    }
-    if (requestState === 'failed') {
-      setRequestedId(displayedId);
-      setVariantFailed(true);
-    } else if (requestedProduct) {
-      setDisplayedId(requestedProduct.id);
-    }
-  }, [requestedId, displayedId, requestState, requestedProduct]);
-
-  useEffect(() => {
-    setActivePhoto(0);
-    setPhotosPrimed(false);
-  }, [photoKey]);
-
-  useEffect(() => {
-    const area          = imageArea.current;
-    if (!area) {
-      return;
-    }
-    const measuredArea  = area;
-
-    function updatePhotoInset(x: number, y: number) {
-      setPhotoInset((current) => {
-        if (current.x === x && current.y === y) {
-          return current;
-        }
-
-        return { x, y };
-      });
-    }
-
-    function clearPhotoInset() {
-      updatePhotoInset(0, 0);
-    }
-
-    function measurePhoto() {
-      const viewport =
-        measuredArea.querySelector<HTMLElement>(
-          '[data-product-image-viewport]',
-        ) ?? measuredArea;
-      const image    = viewport.querySelector<HTMLImageElement>(
-        'img[aria-hidden="false"], img:not([aria-hidden])',
-      );
-      if (!image?.naturalWidth || !image.naturalHeight) {
-        clearPhotoInset();
-        return;
-      }
-
-      const bounds   = viewport.getBoundingClientRect();
-      const scale    = Math.min(
-        bounds.width / image.naturalWidth,
-        bounds.height / image.naturalHeight,
-      );
-
-      updatePhotoInset(
-        Math.max(0, (bounds.width - image.naturalWidth * scale) / 2),
-        Math.max(0, (bounds.height - image.naturalHeight * scale) / 2),
-      );
-    }
-
-    measuredArea.addEventListener('load', measurePhoto, true);
-    measuredArea.addEventListener('error', clearPhotoInset, true);
-    const observer      =
-      typeof ResizeObserver === 'undefined'
-        ? undefined
-        : new ResizeObserver(measurePhoto);
-    const imageObserver =
-      typeof MutationObserver === 'undefined'
-        ? undefined
-        : new MutationObserver(measurePhoto);
-    observer?.observe(
-      measuredArea.querySelector('[data-product-image-viewport]') ??
-        measuredArea,
-    );
-    imageObserver?.observe(measuredArea, {
-      attributes: true,
-      attributeFilter: ['aria-hidden'],
-      childList: true,
-      subtree: true,
-    });
-    measurePhoto();
-
-    return () => {
-      measuredArea.removeEventListener('load', measurePhoto, true);
-      measuredArea.removeEventListener('error', clearPhotoInset, true);
-      observer?.disconnect();
-      imageObserver?.disconnect();
-    };
-  }, [displayedId]);
-
-  function showVariant(id: number) {
-    const otherCollection = collection === 'products' ? 'featured' : 'products';
-    const target          =
-      productsStore.getState().getProduct(id, collection) ??
-      productsStore.getState().getProduct(id, otherCollection);
-    setRequestedId(id);
-    setVariantFailed(false);
-    if (target) {
-      productsStore.getState().setProduct(target, collection);
-      setDisplayedId(target.id);
-    }
-  }
-
-  function selectVariant(variant: IProductVariantValue) {
-    if (!product || disabled || !variant.reload_product) {
-      return;
-    }
-    if (variant.reload_product === product.id) {
-      setRequestedId(product.id);
-      return;
-    }
-    if (
-      productsStore.getState().getProductRequest(variant.reload_product) ===
-      'failed'
-    ) {
-      productsStore.getState().setProductRequest(variant.reload_product);
-    }
-    const selection = { product: product.id, variant };
-    showVariant(variant.reload_product);
-    onSelectVariant?.(selection);
-  }
-
-  function selectSecondaryVariant(variant: IProductSecondaryVariant) {
-    if (!product || disabled || variant.product.id === product.id) {
-      return;
-    }
-    const target    =
-      productsStore.getState().updates[collection][variant.product.id] ??
-      variant.product;
-    productsStore.getState().setProduct(
-      {
-        ...target,
-        secondary_variants:
-          target.secondary_variants ?? product.secondary_variants,
-      },
-      collection,
-    );
-    const selection = { product: product.id, variant };
-    showVariant(variant.product.id);
-    onSelectSecondaryVariant?.(selection);
-  }
-
-  function pointAtPhoto(event: PointerEvent<HTMLElement>) {
-    // A touch switches photos by swiping, not by where the finger rests.
-    if (event.pointerType === 'touch' || photos.length < 2) {
-      return;
-    }
-
-    setPhotosPrimed(true);
-    setActivePhoto(
-      productPhotoAtPointer(
-        event.clientX,
-        event.currentTarget.getBoundingClientRect(),
-        photos.length,
-      ),
-    );
-  }
-
-  function leavePhotos(event: PointerEvent<HTMLElement>) {
-    if (event.pointerType !== 'touch') {
-      setActivePhoto(0);
-    }
-  }
-
-  // A sideways swipe switches photos only where the picture keeps sideways
-  // moves for itself (`touch-action: pan-y`). A horizontal row of cards,
-  // such as a product group on a phone, turns that off so the row scrolls.
-  function startPhotoSwipe(event: TouchEvent<HTMLElement>) {
-    const touch             = event.touches[0];
-
-    setPhotosPrimed(true);
-    photoSwipeStart.current =
-      touch &&
-      event.touches.length === 1 &&
-      getComputedStyle(event.currentTarget).touchAction === 'pan-y'
-        ? { x: touch.clientX, y: touch.clientY }
-        : undefined;
-  }
-
-  function endPhotoSwipe(event: TouchEvent<HTMLElement>) {
-    const touch             = event.changedTouches[0];
-    const start             = photoSwipeStart.current;
-
-    photoSwipeStart.current = undefined;
-    if (!start || !touch) {
-      return;
-    }
-
-    const next              = productPhotoAfterSwipe(
-      shownPhoto,
-      photos.length,
-      touch.clientX - start.x,
-      touch.clientY - start.y,
-    );
-
-    if (next !== shownPhoto) {
-      setActivePhoto(next);
-      photoSwipedAt.current = Date.now();
-    }
-  }
-
-  function selectProduct(event?: MouseEvent<HTMLElement>) {
-    // The click a browser may send after a photo swipe does not open the product.
-    if (Date.now() - photoSwipedAt.current < 500) {
-      event?.preventDefault();
-      return;
-    }
-    if (event) {
-      const modified =
-        event.button > 0 ||
-        event.metaKey ||
-        event.ctrlKey ||
-        event.shiftKey ||
-        event.altKey;
-      if (href && !disabled && modified) {
-        return;
-      }
-      event.preventDefault();
-    }
-    if (!disabled && product) {
-      onSelect?.(product);
-    }
-  }
-
-  if (!product) {
-    return null;
-  }
-
-  // Without photos the image shows its placeholder.
-  const picture                           = (photos.length ? photos : [undefined]).map(
-    (photo, index) =>
-      index === 0 || photosPrimed || index === shownPhoto ? (
-        <OrionplaceImage
-          key={`${index}:${photo}`}
-          src={photo}
-          alt={name}
-          width={3}
-          height={4}
-          loading={index === 0 ? 'lazy' : 'eager'}
-          ariaHidden={photos.length > 1 ? index !== shownPhoto : undefined}
-          className={[
-            styles.image,
-            index > 0 ? styles.stackedImage : '',
-            index === shownPhoto ? '' : styles.hiddenImage,
-          ]
-            .filter(Boolean)
-            .join(' ')}
-        />
-      ) : null,
-  );
-  const photoEvents                       = {
-    'data-product-photo-swipe': photos.length > 1 || undefined,
-    onPointerEnter: () => setPhotosPrimed(true),
-    onPointerMove: pointAtPhoto,
-    onPointerLeave: leavePhotos,
-    onTouchStart: startPhotoSwipe,
-    onTouchEnd: endPhotoSwipe,
-  };
-
-  return (
-    <OrionplaceSuppliedProductContext.Provider value={product}>
-      <article
-        ref={card}
-        style={{ minHeight }}
-        className={`${styles.card} ${styles[layout]} ${className}`.trim()}
-        data-product-part="ProductCard"
-        data-product-id={product.id}
-        data-product-layout={layout}
-        data-catalog-product={dataCatalogProduct}
-        aria-busy={variantLoading || undefined}
-      >
-        {!details && (
-          <div
-            ref={imageArea}
-            className={styles.imageArea}
-            style={photoInsetStyle}
-            data-product-image
-          >
-            {href ? (
-              <a
-                href={href}
-                className={styles.imageLink}
-                aria-disabled={disabled || undefined}
-                data-product-image-viewport
-                data-product-part="OrionplaceImage"
-                {...photoEvents}
-                onClick={selectProduct}
-              >
-                {picture}
-              </a>
-            ) : (
-              <button
-                type="button"
-                disabled={disabled}
-                className={styles.imageLink}
-                data-product-image-viewport
-                data-product-part="OrionplaceImage"
-                {...photoEvents}
-                onClick={selectProduct}
-              >
-                {picture}
-              </button>
-            )}
-            <div
-              className={styles.mediaOverlay}
-              data-product-media-overlay
-            >
-              {photos.length > 1 && (
-                <span
-                  className={styles.photoBars}
-                  aria-hidden="true"
-                  data-product-photo-bars
-                >
-                  {photos.map((photo, index) => (
-                    <span
-                      key={`${index}:${photo}`}
-                      className={
-                        index === shownPhoto
-                          ? `${styles.photoBar} ${styles.activePhotoBar}`
-                          : styles.photoBar
-                      }
-                    />
-                  ))}
-                </span>
-              )}
-              {variantLoading && (
-                <span
-                  className={styles.loadingOverlay}
-                  aria-hidden="true"
-                  data-product-variant-loading
-                >
-                  <span className={styles.spinner} />
-                </span>
-              )}
-              {!isCompact && (
-                <ProductCardBadges
-                  productId={product.id}
-                  collection={collection}
-                  lowStockLabel=""
-                  {...hiddenBadgeLabels(hiddenBadges)}
-                  className={styles.overlaidBadges}
-                />
-              )}
-              {purchaseActions && (
-                <>
-                  <ProductCardActions
-                    productId={product.id}
-                    collection={collection}
-                    disabled={purchaseDisabled}
-                    iconOnly
-                    className={styles.overlaidActions}
-                    onRequestVariants={() =>
-                      variants.current?.openForPurchase()
-                    }
-                    onAdd={onAdd}
-                    onRemove={onRemove}
-                    onSubscribe={onSubscribe}
-                    onUnsubscribe={onUnsubscribe}
-                    onPreorder={onPreorder}
-                  />
-                  <ProductCardFavorite
-                    productId={product.id}
-                    collection={collection}
-                    disabled={purchaseDisabled}
-                    className={styles.overlaidFavorite}
-                    onToggle={(selected) =>
-                      onToggleFavorite?.({ product: product.id, selected })
-                    }
-                  />
-                </>
-              )}
-            </div>
-          </div>
-        )}
-        <div
-          className={styles.heading}
-          data-product-heading
-        >
-          {!details && (
-            <ProductCardSeller
-              productId={product.id}
-              collection={collection}
-              disabled={disabled}
-              onSelect={onSelectSeller}
-            />
-          )}
-          {!details &&
-            (href ? (
-              <a
-                href={href}
-                aria-disabled={disabled || undefined}
-                className={styles.productLink}
-                onClick={selectProduct}
-              >
-                <ProductCardTitle
-                  productId={product.id}
-                  collection={collection}
-                />
-              </a>
-            ) : (
-              <button
-                type="button"
-                disabled={disabled}
-                className={styles.productLink}
-                onClick={() => selectProduct()}
-              >
-                <ProductCardTitle
-                  productId={product.id}
-                  collection={collection}
-                />
-              </button>
-            ))}
-          {variantFailed ? (
-            <p
-              role="alert"
-              className={styles.error}
-              data-product-variant-error
-            >
-              {copy.variantFailed}
-            </p>
-          ) : variantLoading ? (
-            <p
-              role="status"
-              className={styles.screenReaderOnly}
-              data-product-variant-status
-            >
-              {copy.variantLoading}
-            </p>
-          ) : null}
-        </div>
-        {details && (
-          <ProductCardBadges
-            productId={product.id}
-            collection={collection}
-            lowStockLabel=""
-            {...hiddenBadgeLabels(hiddenBadges)}
-          />
-        )}
-        <ProductCardPrice
-          productId={product.id}
-          collection={collection}
-        />
-        {details && renderAfterPrice && (
-          <div data-product-after-price>{renderAfterPrice(product)}</div>
-        )}
-        {details && variantCaption && (
-          <p
-            className={styles.variantCaption}
-            data-product-variant-caption
-          >
-            {variantCaption.name}: <span>{variantCaption.value}</span>
-          </p>
-        )}
-        <ProductCardVariants
-          ref={variants}
-          productId={product.id}
-          collection={collection}
-          variantProductIds={variantProductIds}
-          disabled={disabled}
-          actionsDisabled={purchaseDisabled}
-          onSelect={selectVariant}
-          onSelectSecondary={selectSecondaryVariant}
-          onRequestSecondary={onRequestSecondaryVariants}
-          onAdd={onAdd}
-          onRemove={onRemove}
-          onSubscribe={onSubscribe}
-          onUnsubscribe={onUnsubscribe}
-          onPreorder={onPreorder}
-        />
-        {!isCompact && !details && (
-          <ProductCardRating
-            productId={product.id}
-            collection={collection}
-          />
-        )}
-        {!isCompact && (
-          <ProductCardStockNotice
-            productId={product.id}
-            collection={collection}
-          />
-        )}
-        {!isCompact && !details && (
-          <ProductCardDescription
-            productId={product.id}
-            collection={collection}
-          />
-        )}
-        {details && purchaseActions && (
-          <div className={styles.detailActions}>
-            <ProductCardActions
-              productId={product.id}
-              collection={collection}
-              disabled={purchaseDisabled}
-              variantSelectionResolved
-              onRequestVariants={() => variants.current?.openForPurchase()}
-              onAdd={onAdd}
-              onRemove={onRemove}
-              onSubscribe={onSubscribe}
-              onUnsubscribe={onUnsubscribe}
-              onPreorder={onPreorder}
-            />
-            <ProductCardFavorite
-              productId={product.id}
-              collection={collection}
-              disabled={purchaseDisabled}
-              onToggle={(selected) =>
-                onToggleFavorite?.({ product: product.id, selected })
-              }
-            />
-          </div>
-        )}
-        {renderFooter && <div data-product-footer>{renderFooter(product)}</div>}
-      </article>
-    </OrionplaceSuppliedProductContext.Provider>
-  );
-}