orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,716 @@
+'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';
+
+export interface ProductCardProps {
+  productId: number;
+  initialProduct?: IProduct;
+  collection?: OrionplaceProductCollection;
+  compact?: boolean;
+  details?: boolean;
+  disabled?: boolean;
+  actionsDisabled?: boolean;
+  purchaseActions?: boolean;
+  variantProductIds?: number[];
+  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,
+  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=""
+                  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=""
+          />
+        )}
+        <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>
+  );
+}