@akinon/pz-theme 2.0.37-rc.0 → 2.0.37

package/src/blocks/add-to-cart-block.tsx

@@ -0,0 +1,417 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { useAddProductMutation } from '@akinon/next/data/client/product';
+import { basketApi } from '@akinon/next/data/client/basket';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  DesignerPlaceholder,
+  ThemeProduct,
+  ThemeVariantGroup,
+  getVariantOptionStock,
+  isProductInStock,
+  pickProductField,
+  readToggle,
+  useThemeProduct
+} from './product-block-utils';
+
+const DEFAULT_FEEDBACK_TIMEOUT = 2000;
+
+const ALLOWED_ICONS = ['cart', 'bag', 'plus'];
+const ALLOWED_ICON_POSITIONS = ['before', 'after'];
+
+const ICON_PATHS: Record<string, string> = {
+  cart: 'M3 4h2l2.4 10.4a2 2 0 0 0 2 1.6h7.2a2 2 0 0 0 2-1.6L20.5 8H6M9 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm9 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z',
+  bag: 'M6 8h12l-1 12H7L6 8Zm3 0V6a3 3 0 0 1 6 0v2',
+  plus: 'M12 5v14M5 12h14'
+};
+
+const CartIcon = ({ name }: { name: string }) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.6"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d={ICON_PATHS[name] || ICON_PATHS.cart} />
+  </svg>
+);
+
+const clamp = (value: number, min: number, max: number): number =>
+  Math.min(Math.max(value, min), max);
+
+/**
+ * The stock behind what one click would add: the variant option the shopper is
+ * on when the matrix carries a number for it, otherwise the product's own —
+ * `pickProductField` already falls through to the selected variant there.
+ *
+ * null when commerce sent nothing. Unknown stock must never cap the stepper,
+ * the same way it never blocks the button: commerce validates on add.
+ */
+const readAvailableStock = (product: ThemeProduct | null): number | null => {
+  const groups = pickProductField<ThemeVariantGroup[]>(product, 'variants');
+
+  for (const group of Array.isArray(groups) ? groups : []) {
+    const selected = (group?.options || []).find(
+      (option) => option?.is_selected === true
+    );
+    const stock = selected ? getVariantOptionStock(selected) : null;
+
+    if (stock !== null) return stock;
+  }
+
+  const own = Number(pickProductField(product, 'stock'));
+
+  return Number.isFinite(own) ? own : null;
+};
+
+/**
+ * Functional PDP block: adds the product on the page to the basket. Behavior
+ * is fixed (commerce add-to-basket); the editor owns the labels, the quantity
+ * added, the optional icon, the width and — through named parts — the styling
+ * of the button in every state.
+ *
+ * Parts: button, label, icon, row, quantity, quantity-button, quantity-input.
+ * Properties: label, addingLabel, addedLabel, errorLabel, outOfStockLabel,
+ * fullWidth, quantity, showIcon, icon, iconPosition, hideWhenOutOfStock,
+ * feedbackDuration, showQuantitySelector, quantityMin, quantityMax,
+ * quantityStep, quantityPosition, decreaseLabel, increaseLabel,
+ * decreaseAriaLabel, increaseAriaLabel.
+ */
+const AddToCartBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+  const dispatch = useAppDispatch();
+  const [addProduct, { isLoading }] = useAddProductMutation();
+  const [feedback, setFeedback] = useState<'idle' | 'added' | 'error'>('idle');
+  // null = the shopper has not touched the stepper, so the amount follows the
+  // authored quantity even after the author changes it in the panel.
+  const [pickedQuantity, setPickedQuantity] = useState<number | null>(null);
+  const feedbackTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (feedbackTimer.current) clearTimeout(feedbackTimer.current);
+    },
+    []
+  );
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const label = prop('label', 'Add to Cart');
+  const addingLabel = prop('addingLabel', 'Adding…');
+  const addedLabel = prop('addedLabel', 'Added');
+  const errorLabel = prop('errorLabel', 'Try again');
+  const outOfStockLabel = prop('outOfStockLabel', 'Out of Stock');
+  const fullWidth = readToggle(
+    block.properties?.fullWidth,
+    currentBreakpoint,
+    true
+  );
+  const showIcon = readToggle(
+    block.properties?.showIcon,
+    currentBreakpoint,
+    false
+  );
+  const iconValue = prop('icon', 'cart');
+  const icon = ALLOWED_ICONS.includes(iconValue) ? iconValue : 'cart';
+  const iconPositionValue = prop('iconPosition', 'before');
+  const iconPosition = ALLOWED_ICON_POSITIONS.includes(iconPositionValue)
+    ? iconPositionValue
+    : 'before';
+  const hideWhenOutOfStock = readToggle(
+    block.properties?.hideWhenOutOfStock,
+    currentBreakpoint,
+    false
+  );
+  const quantityValue = Number(
+    getResponsiveValue(block.properties?.quantity, currentBreakpoint, 1)
+  );
+  const authoredQuantity =
+    Number.isFinite(quantityValue) && quantityValue >= 1
+      ? Math.round(quantityValue)
+      : 1;
+
+  // The shopper-facing stepper. Off by default, in which case the amount added
+  // is still the fixed one the author set and no extra markup is rendered.
+  const showQuantitySelector = readToggle(
+    block.properties?.showQuantitySelector,
+    currentBreakpoint,
+    false
+  );
+  const readCount = (key: string, fallback: number, floor: number) => {
+    const raw = Math.round(
+      Number(getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback))
+    );
+
+    return Number.isFinite(raw) && raw >= floor ? raw : fallback;
+  };
+
+  const quantityMin = readCount('quantityMin', 1, 1);
+  const authoredMax = readCount('quantityMax', 10, 1);
+  // The authored ceiling is a design choice; stock is a fact. Letting a shopper
+  // pick 10 of a product with 3 left only earns them the generic error with
+  // nothing on screen explaining it, so the smaller of the two wins — but only
+  // when commerce actually sent a number. A max below the min would trap the
+  // stepper, so the min still wins last.
+  const availableStock = readAvailableStock(product);
+  const stockedMax =
+    availableStock !== null && availableStock > 0
+      ? Math.min(authoredMax, Math.floor(availableStock))
+      : authoredMax;
+  const quantityMax = Math.max(stockedMax, quantityMin);
+  const quantityStep = readCount('quantityStep', 1, 1);
+  const quantityPositionValue = prop('quantityPosition', 'before');
+  // Same two sides the icon offers, so the panel reads consistently.
+  const quantityPosition = ALLOWED_ICON_POSITIONS.includes(
+    quantityPositionValue
+  )
+    ? quantityPositionValue
+    : 'before';
+  const decreaseLabel = prop('decreaseLabel', '–');
+  const increaseLabel = prop('increaseLabel', '+');
+  const decreaseAriaLabel = prop('decreaseAriaLabel', 'Decrease quantity');
+  const increaseAriaLabel = prop('increaseAriaLabel', 'Increase quantity');
+
+  // Untouched, the stepper starts on the amount the author asked for: setting
+  // "Quantity Added" to 2 and being handed 1 reads as the property being
+  // ignored. Clamped, because the authored amount can sit outside the range —
+  // or above what is left in stock.
+  const pickedAmount = clamp(
+    pickedQuantity ?? authoredQuantity,
+    quantityMin,
+    quantityMax
+  );
+  const quantity = showQuantitySelector ? pickedAmount : authoredQuantity;
+
+  const feedbackDurationValue = Number(
+    getResponsiveValue(
+      block.properties?.feedbackDuration,
+      currentBreakpoint,
+      DEFAULT_FEEDBACK_TIMEOUT
+    )
+  );
+  const feedbackDuration =
+    Number.isFinite(feedbackDurationValue) && feedbackDurationValue > 0
+      ? feedbackDurationValue
+      : DEFAULT_FEEDBACK_TIMEOUT;
+
+  const productPk = Number(pickProductField(product, 'pk'));
+  const hasProduct = Number.isFinite(productPk) && productPk > 0;
+
+  if (!hasProduct) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Add to cart (no product)"
+        attribute="data-add-to-cart"
+      />
+    ) : null;
+  }
+
+  const inStock = isProductInStock(product);
+
+  // Brands that would rather show nothing than a dead button get the block
+  // removed outright; the author still sees it in the designer.
+  if (!inStock && hideWhenOutOfStock) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Add to cart (hidden while out of stock)"
+        attribute="data-add-to-cart"
+      />
+    ) : null;
+  }
+
+  const disabled = !inStock || isLoading;
+
+  const currentLabel = !inStock
+    ? outOfStockLabel
+    : isLoading
+    ? addingLabel
+    : feedback === 'added'
+    ? addedLabel
+    : feedback === 'error'
+    ? errorLabel
+    : label;
+
+  const scheduleReset = () => {
+    if (feedbackTimer.current) clearTimeout(feedbackTimer.current);
+    feedbackTimer.current = setTimeout(
+      () => setFeedback('idle'),
+      feedbackDuration
+    );
+  };
+
+  const handleClick = async () => {
+    // A click inside the designer must never touch the shopper's real basket.
+    if (isDesigner || disabled) return;
+
+    try {
+      await addProduct({
+        product: productPk,
+        quantity,
+        attributes: {}
+      }).unwrap();
+
+      // addProduct only invalidates MiniBasket, so the full basket query (used
+      // by the mini-basket chrome block) has to be refreshed explicitly.
+      dispatch(basketApi.util.invalidateTags(['Basket', 'MiniBasket']));
+      setFeedback('added');
+    } catch {
+      setFeedback('error');
+    }
+
+    scheduleReset();
+  };
+
+  const iconNode = showIcon ? (
+    <span
+      data-add-to-cart-icon=""
+      {...partAttrs('icon')}
+      style={{ display: 'inline-flex', flex: '0 0 auto' }}
+    >
+      <CartIcon name={icon} />
+    </span>
+  ) : null;
+
+  const buttonNode = (
+    <button
+      type="button"
+      data-add-to-cart=""
+      data-add-to-cart-state={
+        !inStock ? 'out-of-stock' : isLoading ? 'busy' : feedback
+      }
+      {...partAttrs('button', { loading: isLoading, disabled })}
+      disabled={disabled}
+      aria-busy={isLoading}
+      onClick={handleClick}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '8px',
+        width: fullWidth ? '100%' : 'auto',
+        padding: 0,
+        margin: 0,
+        border: 'none',
+        background: 'transparent',
+        color: 'inherit',
+        font: 'inherit',
+        textAlign: 'center',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        // The busy state is carried by the label and opacity: a keyframed
+        // spinner would need a <style> tag inside the button, which is invalid
+        // markup and hydrates inconsistently across React versions.
+        opacity: !inStock ? 0.6 : isLoading ? 0.7 : 1,
+        transition: 'opacity 150ms ease',
+        // A `width: 100%` flex item beside the stepper would overflow the row,
+        // so the button becomes a flex child only when the stepper is there.
+        ...(showQuantitySelector
+          ? { flex: fullWidth ? '1 1 auto' : '0 0 auto', minWidth: 0 }
+          : null)
+      }}
+    >
+      {iconPosition === 'before' && iconNode}
+      <span data-add-to-cart-label="" {...partAttrs('label')}>
+        {currentLabel}
+      </span>
+      {iconPosition === 'after' && iconNode}
+    </button>
+  );
+
+  if (!showQuantitySelector) return buttonNode;
+
+  const stepQuantity = (delta: number) => {
+    // Clicking inside the designer must not move the preview's state around.
+    if (isDesigner) return;
+
+    setPickedQuantity(
+      clamp(quantity + delta * quantityStep, quantityMin, quantityMax)
+    );
+  };
+
+  const atMin = quantity <= quantityMin;
+  const atMax = quantity >= quantityMax;
+  const stepButtonStyle: React.CSSProperties = {
+    background: 'none',
+    border: 'none',
+    cursor: 'pointer',
+    color: 'inherit',
+    font: 'inherit',
+    padding: '2px 6px'
+  };
+
+  // Same part names as the basket line's stepper, so the two are one control
+  // to a designer rather than two vocabularies that happen to look alike.
+  const stepper = (
+    <div
+      data-add-to-cart-quantity=""
+      {...partAttrs('quantity', { disabled })}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '8px',
+        flex: '0 0 auto',
+        border: '1px solid var(--add-to-cart-border, #e5e7eb)',
+        borderRadius: '4px',
+        padding: '2px 6px'
+      }}
+    >
+      <button
+        type="button"
+        aria-label={decreaseAriaLabel}
+        disabled={disabled || atMin}
+        onClick={() => stepQuantity(-1)}
+        {...partAttrs('quantity-button', { disabled: disabled || atMin })}
+        style={stepButtonStyle}
+      >
+        {decreaseLabel}
+      </button>
+      {/* Announced on change so a screen reader hears the new amount. */}
+      <span {...partAttrs('quantity-input')} aria-live="polite">
+        {quantity}
+      </span>
+      <button
+        type="button"
+        aria-label={increaseAriaLabel}
+        disabled={disabled || atMax}
+        onClick={() => stepQuantity(1)}
+        {...partAttrs('quantity-button', { disabled: disabled || atMax })}
+        style={stepButtonStyle}
+      >
+        {increaseLabel}
+      </button>
+    </div>
+  );
+
+  return (
+    <div
+      data-add-to-cart-row=""
+      {...partAttrs('row')}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        width: fullWidth ? '100%' : 'auto'
+      }}
+    >
+      {quantityPosition === 'before' && stepper}
+      {buttonNode}
+      {quantityPosition === 'after' && stepper}
+    </div>
+  );
+};
+
+export default AddToCartBlock;