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

package/src/blocks/product-recommendations-block.tsx

@@ -0,0 +1,1433 @@
+'use client';
+
+import React, { useRef } from 'react';
+import NextLink from 'next/link';
+import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
+import {
+  useAddProductMutation,
+  useGetProductByPkQuery
+} from '@akinon/next/data/client/product';
+import { useLocalization } from '@akinon/next/hooks';
+import { useOverlay } from '../hooks/use-overlay';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { DESIGNER_SAMPLE_PRODUCT } from './item-template-utils';
+import {
+  formatListingPrice,
+  listingPlaceholderStyle,
+  readToggle
+} from './listing-context';
+import {
+  isProductInStock,
+  isVariantOptionSoldOut,
+  parsePriceValue,
+  pickProductField,
+  ThemeProduct,
+  ThemeVariantGroup,
+  ThemeVariantOption,
+  useThemeProduct
+} from './product-block-utils';
+import {
+  DEFAULT_RECENTLY_VIEWED_KEY,
+  deferIdleTask,
+  readRecentlyViewed,
+  recordRecentlyViewed,
+  RecentlyViewedEntry
+} from './recently-viewed-store';
+
+/** Fallback track gap; the card width is derived from whatever is in use. */
+const DEFAULT_CARD_GAP = 16;
+
+const ALLOWED_TITLE_TAGS = ['div', 'h2', 'h3', 'span'];
+const ALLOWED_IMAGE_RATIOS = ['', '1/1', '3/4', '4/3'];
+/** `collection` is the source the block has always had, so it is the default. */
+const ALLOWED_SOURCES = ['collection', 'recently-viewed'];
+const ALLOWED_QUICK_VIEW_ICONS = ['eye', 'plus', 'none'];
+
+const DEFAULT_QUICK_VIEW_FEEDBACK = 2000;
+
+const clampNumber = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+const toText = (value: unknown): string =>
+  typeof value === 'string'
+    ? value
+    : typeof value === 'number' && Number.isFinite(value)
+    ? String(value)
+    : '';
+
+/**
+ * A commerce product id, or undefined. The value is a merchant payload on its
+ * way into an endpoint path, so anything that is not a positive integer is
+ * refused rather than coerced: `pk` also feeds the React key fallback
+ * ("recommendation-3"), and a string like that appended to `/product/…/`
+ * would be a request built out of untrusted text.
+ */
+const toProductPk = (value: unknown): number | undefined => {
+  const numeric = Number(value);
+
+  return Number.isFinite(numeric) && numeric > 0
+    ? Math.trunc(numeric)
+    : undefined;
+};
+
+/**
+ * A merchant URL that is safe to put in an `href` or an `src`. Schemes that can
+ * execute (`javascript:`, `data:text/html`) are dropped rather than escaped —
+ * escaping does nothing to a URL the browser will run on click. Relative and
+ * protocol-relative paths carry no scheme to abuse, so they pass through.
+ */
+const safeUrl = (value: unknown): string => {
+  const text = toText(value).trim();
+  if (!text) return '';
+  if (/^[/?#]/.test(text)) return text;
+
+  return /^https?:\/\//i.test(text) ? text : '';
+};
+
+const ChevronIcon = ({ direction }: { direction: 'prev' | 'next' }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d={direction === 'prev' ? 'M15 5l-7 7 7 7' : 'M9 5l7 7-7 7'} />
+  </svg>
+);
+
+const QuickViewIcon = ({ name }: { name: string }) => {
+  if (name === 'none') return null;
+
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {name === 'plus' ? (
+        <path d="M12 5v14M5 12h14" />
+      ) : (
+        <>
+          <path d="M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6z" />
+          <circle cx="12" cy="12" r="2.6" />
+        </>
+      )}
+    </svg>
+  );
+};
+
+const CloseIcon = () => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.8"
+    strokeLinecap="round"
+    aria-hidden="true"
+  >
+    <path d="M6 6l12 12M18 6L6 18" />
+  </svg>
+);
+
+interface RecommendationCard {
+  key: string;
+  /**
+   * The commerce product id. `key` falls back to an index ("recommendation-3")
+   * so it can never address an endpoint; this can. It is also what opens the
+   * row's item scope — see `resolveItemProduct()` — so a favourite or
+   * add-to-cart block inside an authored card acts on the card's own product
+   * instead of falling through to the page's.
+   */
+  pk?: number;
+  name: string;
+  url: string;
+  image: string;
+  price: string;
+}
+
+/**
+ * Functional PDP/campaign block: a related-products slider.
+ *
+ * v1 core ships no recommendation endpoint, so the data path is the
+ * collection/widget one every storefront already uses: the author names a
+ * collection and `getWidget` returns its products in merchandiser order. The
+ * cards are laid out exactly like the product grid so a recommendation strip
+ * and a PLP card stay visually identical.
+ *
+ * `source` picks where the cards come from. It defaults to `collection` — the
+ * only behaviour that existed — and `recently-viewed` swaps in the products
+ * this browser has looked at, which the block also records (see
+ * `recently-viewed-store.ts` for what is stored and why).
+ *
+ * ACTING ON A CARD WITHOUT LEAVING THE PAGE comes in two halves, and only one
+ * of them is built here.
+ *
+ * Adding to basket from a card was already reachable and is not rebuilt: a
+ * designer marks a child as the card layout and drops the existing add-to-cart
+ * or favourite block into it, and `ItemTemplateList` wraps every row in the
+ * item scope so those blocks act on the ROW's product. What that mechanism was
+ * missing is the id — the card model published `key` (which falls back to an
+ * index) and no `pk`, so `resolveItemProduct()` refused the scope and the
+ * blocks silently fell through to the page's product. Publishing `pk` is what
+ * turns the existing mechanism on.
+ *
+ * The overlay is the half that did not exist. A recommendation row carries a
+ * SUMMARY — the collection/widget payload and the stored history both stop at
+ * name, url, image, price — and no variant matrix, so there is nothing to pick
+ * a size from. Quick view therefore fetches `/product/{pk}/` on demand, for the
+ * one card the shopper opened, and shows the summary it already has while that
+ * request is in flight. Off by default; every published strip renders exactly
+ * as it did.
+ *
+ * Parts: title, arrow-list, arrow, track, card-slot, card, card-image,
+ * card-name, card-price, quick-view-trigger, quick-view-backdrop,
+ * quick-view-panel, quick-view-close, quick-view-media, quick-view-body,
+ * quick-view-name, quick-view-price, quick-view-old-price, quick-view-status,
+ * quick-view-retry, quick-view-size-label, quick-view-size-list,
+ * quick-view-size, quick-view-add, quick-view-link.
+ * Properties: source, title, titleTag, collectionId, limit, columnsDesktop,
+ * columnsMobile, cardGap, showName, showPrice, imageRatio, showArrows,
+ * prevLabel, nextLabel, recentlyViewedKey, recentlyViewedCapacity,
+ * recentlyViewedMaxAge, recentlyViewedEmptyLabel, showQuickView,
+ * quickViewTriggerLabel, quickViewTriggerIcon, quickViewWidth,
+ * showQuickViewBackdrop, quickViewCloseOnBackdrop, quickViewCloseOnEscape,
+ * quickViewLockScroll, showQuickViewClose, quickViewCloseLabel,
+ * quickViewLoadingLabel, quickViewErrorLabel, quickViewRetryLabel,
+ * quickViewSizeLabel, quickViewSelectSizeLabel, quickViewAddLabel,
+ * quickViewAddingLabel, quickViewAddedLabel, quickViewAddErrorLabel,
+ * quickViewOutOfStockLabel, quickViewFeedbackDuration, showQuickViewLink,
+ * quickViewLinkLabel.
+ */
+const ProductRecommendationsBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const { locale, currency: localeCurrency } = useLocalization();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+  // The ambient product: on a PDP this is what the shopper is looking at, and
+  // it is both what gets recorded and what is excluded from its own strip.
+  const ambientProduct = useThemeProduct();
+  const [recentEntries, setRecentEntries] = React.useState<
+    RecentlyViewedEntry[]
+  >([]);
+  /** The card whose overlay is open, or null. Closed on load, designer too. */
+  const [quickViewCard, setQuickViewCard] =
+    React.useState<RecommendationCard | null>(null);
+  /** The variant option value the shopper picked, '' until they pick one. */
+  const [chosenOption, setChosenOption] = React.useState('');
+  const [addFeedback, setAddFeedback] = React.useState<
+    'idle' | 'added' | 'error'
+  >('idle');
+  // The element that opened the overlay, so focus can be handed back to the
+  // exact card the shopper came from rather than to the top of the strip.
+  const quickViewOpenerRef = useRef<HTMLElement | null>(null);
+  const addFeedbackTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const sourceValue = prop('source', 'collection');
+  const source = ALLOWED_SOURCES.includes(sourceValue)
+    ? sourceValue
+    : 'collection';
+  const isRecentlyViewed = source === 'recently-viewed';
+
+  const title = String(
+    getResponsiveValue(block.properties?.title, currentBreakpoint, '')
+  ).trim();
+  const titleTagValue = prop('titleTag', 'div');
+  const TitleTag = (
+    ALLOWED_TITLE_TAGS.includes(titleTagValue) ? titleTagValue : 'div'
+  ) as React.ElementType;
+  const collectionId = String(
+    getResponsiveValue(block.properties?.collectionId, currentBreakpoint, '')
+  ).trim();
+  const limit = clampNumber(
+    getResponsiveValue(block.properties?.limit, currentBreakpoint, 8),
+    8,
+    1,
+    24
+  );
+  const columnsDesktop = clampNumber(
+    getResponsiveValue(block.properties?.columnsDesktop, currentBreakpoint, 4),
+    4,
+    2,
+    6
+  );
+  const columnsMobile = clampNumber(
+    getResponsiveValue(block.properties?.columnsMobile, currentBreakpoint, 2),
+    2,
+    1,
+    3
+  );
+  const cardGap = clampNumber(
+    getResponsiveValue(
+      block.properties?.cardGap,
+      currentBreakpoint,
+      DEFAULT_CARD_GAP
+    ),
+    DEFAULT_CARD_GAP,
+    0,
+    64
+  );
+  const showName = readToggle(
+    block.properties?.showName,
+    currentBreakpoint,
+    true
+  );
+  const showPrice = readToggle(
+    block.properties?.showPrice,
+    currentBreakpoint,
+    true
+  );
+  const imageRatioValue = prop('imageRatio', '');
+  const imageRatio = ALLOWED_IMAGE_RATIOS.includes(imageRatioValue)
+    ? imageRatioValue
+    : '';
+  const showArrows = readToggle(
+    block.properties?.showArrows,
+    currentBreakpoint,
+    false
+  );
+  const prevLabel = prop('prevLabel', 'Previous products');
+  const nextLabel = prop('nextLabel', 'Next products');
+  const recentlyViewedKey =
+    prop('recentlyViewedKey', DEFAULT_RECENTLY_VIEWED_KEY).trim() ||
+    DEFAULT_RECENTLY_VIEWED_KEY;
+  const recentlyViewedCapacity = clampNumber(
+    getResponsiveValue(
+      block.properties?.recentlyViewedCapacity,
+      currentBreakpoint,
+      20
+    ),
+    20,
+    1,
+    60
+  );
+  const recentlyViewedMaxAge = clampNumber(
+    getResponsiveValue(
+      block.properties?.recentlyViewedMaxAge,
+      currentBreakpoint,
+      30
+    ),
+    30,
+    0,
+    365
+  );
+  const recentlyViewedEmptyLabel = prop(
+    'recentlyViewedEmptyLabel',
+    'Recently viewed'
+  );
+
+  // Off by default: a published strip has never drawn a trigger over its cards
+  // and must keep not drawing one.
+  const showQuickView = readToggle(
+    block.properties?.showQuickView,
+    currentBreakpoint,
+    false
+  );
+  const quickViewTriggerLabel = prop('quickViewTriggerLabel', 'Quick view');
+  const quickViewTriggerIconValue = prop('quickViewTriggerIcon', 'eye');
+  const quickViewTriggerIcon = ALLOWED_QUICK_VIEW_ICONS.includes(
+    quickViewTriggerIconValue
+  )
+    ? quickViewTriggerIconValue
+    : 'eye';
+  const quickViewWidth = clampNumber(
+    getResponsiveValue(block.properties?.quickViewWidth, currentBreakpoint, 720),
+    720,
+    280,
+    1200
+  );
+  const showQuickViewBackdrop = readToggle(
+    block.properties?.showQuickViewBackdrop,
+    currentBreakpoint,
+    true
+  );
+  const quickViewCloseOnBackdrop = readToggle(
+    block.properties?.quickViewCloseOnBackdrop,
+    currentBreakpoint,
+    true
+  );
+  const quickViewCloseOnEscape = readToggle(
+    block.properties?.quickViewCloseOnEscape,
+    currentBreakpoint,
+    true
+  );
+  const quickViewLockScroll = readToggle(
+    block.properties?.quickViewLockScroll,
+    currentBreakpoint,
+    true
+  );
+  const showQuickViewClose = readToggle(
+    block.properties?.showQuickViewClose,
+    currentBreakpoint,
+    true
+  );
+  const quickViewCloseLabel = prop('quickViewCloseLabel', 'Close');
+  const quickViewLoadingLabel = prop('quickViewLoadingLabel', 'Loading…');
+  const quickViewErrorLabel = prop(
+    'quickViewErrorLabel',
+    'This product could not be loaded.'
+  );
+  const quickViewRetryLabel = prop('quickViewRetryLabel', 'Try again');
+  const quickViewSizeLabel = prop('quickViewSizeLabel', 'Size');
+  const quickViewSelectSizeLabel = prop(
+    'quickViewSelectSizeLabel',
+    'Select a size'
+  );
+  const quickViewAddLabel = prop('quickViewAddLabel', 'Add to basket');
+  const quickViewAddingLabel = prop('quickViewAddingLabel', 'Adding…');
+  const quickViewAddedLabel = prop('quickViewAddedLabel', 'Added');
+  const quickViewAddErrorLabel = prop('quickViewAddErrorLabel', 'Try again');
+  const quickViewOutOfStockLabel = prop(
+    'quickViewOutOfStockLabel',
+    'Out of stock'
+  );
+  const quickViewFeedbackDuration = clampNumber(
+    getResponsiveValue(
+      block.properties?.quickViewFeedbackDuration,
+      currentBreakpoint,
+      DEFAULT_QUICK_VIEW_FEEDBACK
+    ),
+    DEFAULT_QUICK_VIEW_FEEDBACK,
+    500,
+    10000
+  );
+  const showQuickViewLink = readToggle(
+    block.properties?.showQuickViewLink,
+    currentBreakpoint,
+    true
+  );
+  const quickViewLinkLabel = prop('quickViewLinkLabel', 'View full details');
+
+  // The hook has to run unconditionally to keep the hook order stable; `skip`
+  // is what prevents a request before the author has named a collection — and
+  // now also a request for a collection the recently-viewed source never uses.
+  const { data, isFetching } = useGetWidgetQuery(collectionId, {
+    skip: !collectionId || isRecentlyViewed
+  });
+
+  /**
+   * The overlay's own request. A row carries a summary only, so the variant
+   * matrix a size picker needs exists nowhere on this page — it has to come
+   * from the product endpoint, for the ONE card the shopper opened. Skipped
+   * until then, so a strip that nobody touches still costs a single widget
+   * call; skipped in the designer, where there is no real product behind a
+   * canvas card and a sample stands in instead.
+   */
+  const quickViewPk = quickViewCard ? toProductPk(quickViewCard.pk) : undefined;
+  const {
+    data: quickViewDetail,
+    isFetching: isQuickViewLoading,
+    isError: isQuickViewFailed,
+    refetch: refetchQuickView
+  } = useGetProductByPkQuery(quickViewPk ?? 0, {
+    skip: isDesigner || quickViewPk === undefined
+  });
+  const [addProduct, { isLoading: isAdding }] = useAddProductMutation();
+
+  const currentPk = toText(pickProductField(ambientProduct, 'pk'));
+  // `pickProductField` already resolves title/name and url/absolute_url, so a
+  // page-context product and a normalised listing row both land here.
+  const currentName = toText(pickProductField(ambientProduct, 'title'));
+  const currentUrl = toText(pickProductField(ambientProduct, 'url'));
+  const currentImage = toText(pickProductField(ambientProduct, 'image'));
+  const currentPrice = toText(pickProductField(ambientProduct, 'price'));
+  const currentCurrency = toText(pickProductField(ambientProduct, 'currency'));
+
+  /**
+   * Reads the history, then records this view off the critical path.
+   *
+   * Deps are primitives on purpose: the ambient product object is rebuilt on
+   * every page-context change, and depending on it would rewrite storage in a
+   * loop. In the designer nothing is read, recorded or scheduled — an author
+   * clicking through pages must not fill their own browser with history, and
+   * `isDesigner` is what keeps the write path off the storefront preview.
+   */
+  React.useEffect(() => {
+    if (!isRecentlyViewed || isDesigner) return;
+
+    setRecentEntries(
+      readRecentlyViewed(recentlyViewedKey, recentlyViewedMaxAge)
+    );
+
+    // Nothing identifies the page's product (a homepage strip, say), so there
+    // is a history to read but no view to add.
+    if (!currentPk) return;
+
+    return deferIdleTask(() =>
+      recordRecentlyViewed(
+        recentlyViewedKey,
+        {
+          pk: currentPk,
+          name: currentName,
+          url: currentUrl,
+          image: currentImage,
+          price: currentPrice,
+          currency: currentCurrency,
+          viewedAt: Date.now()
+        },
+        recentlyViewedCapacity
+      )
+    );
+  }, [
+    isRecentlyViewed,
+    isDesigner,
+    recentlyViewedKey,
+    recentlyViewedMaxAge,
+    recentlyViewedCapacity,
+    currentPk,
+    currentName,
+    currentUrl,
+    currentImage,
+    currentPrice,
+    currentCurrency
+  ]);
+
+  /**
+   * Every way out of the overlay is a designer toggle, so a composition can
+   * legally have all of them off and seal a shopper inside. Only a POINTER
+   * route counts — Escape does not exist on the phone this pattern is used on
+   * most — and when none survives, the close button is forced back on and
+   * Escape re-armed. An authored composition must never be a trap.
+   */
+  const hasPointerDismissRoute =
+    showQuickViewClose || (showQuickViewBackdrop && quickViewCloseOnBackdrop);
+  const quickViewCloseVisible = showQuickViewClose || !hasPointerDismissRoute;
+  const escapeClosesQuickView =
+    quickViewCloseOnEscape || !hasPointerDismissRoute;
+  const quickViewOpen = quickViewCard !== null;
+
+  const closeQuickView = () => {
+    setQuickViewCard(null);
+    setChosenOption('');
+    setAddFeedback('idle');
+  };
+
+  /**
+   * Focus, Escape and the page scroll lock are the shared overlay contract
+   * rather than this block's own — and this block is exactly the reason it has
+   * to be shared: a strip ships more than once on a product page (a "you may
+   * also like" one and a "recently viewed" one), so a per-block focus trap
+   * fought its twin over focus and a per-block scroll lock captured the
+   * ALREADY LOCKED overflow as "the page's own value".
+   *
+   * `modal` is what the overlay honestly is: only a backdrop actually covers
+   * the page, and without one `aria-modal` would tell assistive tech the
+   * opposite of what is true. `manageFocus` stays on either way — moving focus
+   * in and handing it back is right for a panel the shopper opened, while the
+   * TRAP that backs the `aria-modal` claim is what the hook gates on `modal`.
+   */
+  const overlay = useOverlay<HTMLDivElement>({
+    open: quickViewOpen,
+    onClose: closeQuickView,
+    isDesigner,
+    modal: showQuickViewBackdrop,
+    lockScroll: quickViewLockScroll,
+    closeOnEscape: escapeClosesQuickView,
+    manageFocus: true,
+    returnFocusRef: quickViewOpenerRef,
+    // The card the shopper came from can be gone by the time the overlay
+    // closes (a recently-viewed strip re-reads its history), and the strip
+    // beats dropping a keyboard shopper at the top of the document.
+    fallbackFocusRef: rootRef
+  });
+
+  React.useEffect(
+    () => () => {
+      if (addFeedbackTimer.current) clearTimeout(addFeedbackTimer.current);
+    },
+    []
+  );
+
+  const collectionProducts: RecommendationCard[] = (
+    (data?.products || []) as Array<Record<string, unknown>>
+  )
+    .slice(0, limit)
+    // Annotated so the element type matches the predicate below: left inferred,
+    // the object literal makes `pk` required while a card's `pk` is optional,
+    // and a type predicate must be assignable to what it narrows.
+    .map((entry, index): RecommendationCard | null => {
+      const name = toText(entry.name) || toText(entry.title);
+      const url = toText(entry.absolute_url) || toText(entry.url);
+      if (!name && !url) return null;
+
+      const images = Array.isArray(entry.productimage_set)
+        ? (entry.productimage_set as Array<Record<string, unknown>>)
+        : [];
+      // Commerce prices each product in its own currency; the storefront
+      // currency is only the fallback for payloads that omit it.
+      const currency = toText(entry.currency_type) || localeCurrency || '';
+
+      return {
+        key: toText(entry.pk) || `recommendation-${index}`,
+        pk: toProductPk(entry.pk),
+        name,
+        url: url || '#',
+        image: toText(entry.image) || toText(images[0]?.image),
+        price: formatListingPrice(entry.price, currency, locale)
+      };
+    })
+    .filter((card): card is RecommendationCard => card !== null);
+
+  /**
+   * The stored amount is re-formatted here rather than read back as a string,
+   * so a shopper who switches locale or currency sees the money in the format
+   * the rest of the page uses. The AMOUNT itself is still the one captured at
+   * view time — see recently-viewed-store.ts.
+   */
+  const recentlyViewedProducts: RecommendationCard[] = recentEntries
+    // A product must never recommend itself back to the page it is on.
+    .filter((entry) => !currentPk || entry.pk !== currentPk)
+    .filter((entry) => Boolean(entry.name || entry.url))
+    .slice(0, limit)
+    .map((entry) => ({
+      key: entry.pk,
+      pk: toProductPk(entry.pk),
+      name: entry.name,
+      url: entry.url || '#',
+      image: entry.image,
+      price: formatListingPrice(
+        entry.price,
+        entry.currency || localeCurrency || '',
+        locale
+      )
+    }));
+
+  const products = isRecentlyViewed
+    ? recentlyViewedProducts
+    : collectionProducts;
+
+  /**
+   * The designer has no browsing history behind the canvas, so a recently
+   * viewed strip would collapse to nothing and stop being selectable, sizeable
+   * or stylable. Skeleton rows keep the track and every card part on screen.
+   * Storefront-side this is null, which is what leaves "empty renders nothing"
+   * intact.
+   */
+  const designerRows: RecommendationCard[] | null =
+    isDesigner &&
+    isRecentlyViewed &&
+    products.length === 0 &&
+    // An authored card layout already draws its own placeholder rows
+    // (`designerPlaceholderCount`), so adding built-in ones would double them.
+    !hasItemTemplate(block, currentBreakpoint)
+      ? Array.from(
+          { length: Math.min(limit, columnsDesktop + 1) },
+          (_, index) => ({
+            key: `recently-viewed-placeholder-${index}`,
+            name: recentlyViewedEmptyLabel,
+            url: '#',
+            image: '',
+            price: ''
+          })
+        )
+      : null;
+
+  // A designer who marked a child as the card layout gets that layout repeated
+  // per product; otherwise the built-in card renders unchanged.
+  const customCards = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={products as unknown as Record<string, unknown>[]}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+      designerPlaceholderCount={4}
+    />
+  ) : null;
+
+  // An empty history is the normal state on a first visit, so the strip
+  // renders nothing at all rather than an empty carousel — `designerRows` is
+  // null on the storefront and this returns before any markup is emitted.
+  if (products.length === 0 && !customCards && !designerRows) {
+    if (!isDesigner) return null;
+
+    return (
+      <div data-product-recommendations="" style={listingPlaceholderStyle}>
+        {!collectionId
+          ? 'Recommendations (set a collection id)'
+          : isFetching
+          ? 'Recommendations (loading)'
+          : 'Recommendations (no products in this collection)'}
+      </div>
+    );
+  }
+
+  // Column count is a block PROPERTY, and properties resolve with the designer
+  // breakpoint only — on the live storefront currentBreakpoint is always
+  // 'desktop'. A scoped rule with the same 1023px cutoff the theme CSS
+  // generator uses keeps real mobile viewports in sync with the editor.
+  const trackId = String(block.id || 'recommendations').replace(
+    /[^a-zA-Z0-9_-]/g,
+    ''
+  );
+  const cardWidth = (columns: number) =>
+    `calc((100% - ${(columns - 1) * cardGap}px) / ${columns})`;
+
+  const scrollTrack = (direction: -1 | 1) => {
+    const track = trackRef.current;
+    if (!track) return;
+    track.scrollBy({
+      left: direction * track.clientWidth,
+      behavior: 'smooth'
+    });
+  };
+
+  const arrowStyle: React.CSSProperties = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '32px',
+    height: '32px',
+    padding: 0,
+    border: 'none',
+    borderRadius: '50%',
+    background:
+      'var(--product-recommendations-arrow-bg, rgba(255, 255, 255, 0.85))',
+    color: 'inherit',
+    cursor: 'pointer'
+  };
+
+  /**
+   * What the overlay draws. The row's own summary goes up immediately and the
+   * fetched detail takes over as it lands, so opening a card never answers
+   * with an empty panel over a slow connection. In the designer the sample
+   * product stands in for one the canvas cannot have — without it an author
+   * would switch quick view on and find nothing to style.
+   */
+  const quickViewProduct: ThemeProduct | null = isDesigner
+    ? DESIGNER_SAMPLE_PRODUCT
+    : quickViewDetail?.product
+    ? // Through `unknown` deliberately: commerce sends `attributes` as a map
+      // while ThemeProduct models it as a list, so the two do not overlap
+      // enough for a direct assertion. Nothing on this path reads
+      // `attributes` — the fields quick view shows (title, price, images,
+      // variants, stock) agree in both shapes.
+      (({
+        ...(quickViewDetail.product as Record<string, unknown>),
+        variants: quickViewDetail.variants,
+        selectedVariant: quickViewDetail.selected_variant ?? null,
+        in_stock: quickViewDetail.in_stock
+      } as unknown) as ThemeProduct)
+    : null;
+
+  const quickViewName =
+    quickViewCard?.name ||
+    toText(pickProductField(quickViewProduct, 'title')) ||
+    '';
+  const quickViewImage =
+    safeUrl(pickProductField(quickViewProduct, 'image')) ||
+    safeUrl(quickViewCard?.image);
+  const quickViewHref = safeUrl(quickViewCard?.url);
+  // Commerce prices each product in its own currency; the storefront currency
+  // is only the fallback for payloads that omit it.
+  const quickViewCurrency =
+    toText(pickProductField(quickViewProduct, 'currency')) ||
+    localeCurrency ||
+    '';
+  const quickViewAmount = pickProductField(quickViewProduct, 'price');
+  const quickViewPrice =
+    quickViewAmount === undefined
+      ? quickViewCard?.price || ''
+      : formatListingPrice(quickViewAmount, quickViewCurrency, locale);
+  const quickViewRetail = parsePriceValue(
+    pickProductField(quickViewProduct, 'retail_price')
+  );
+  const quickViewCurrent = parsePriceValue(quickViewAmount);
+  // Nothing is derived: a struck price is only drawn when commerce actually
+  // sent a higher one, never computed from a discount the payload implies.
+  const quickViewOldPrice =
+    quickViewRetail !== null &&
+    quickViewCurrent !== null &&
+    quickViewRetail > quickViewCurrent
+      ? formatListingPrice(quickViewRetail, quickViewCurrency, locale)
+      : '';
+
+  const variantGroups = (
+    pickProductField<ThemeVariantGroup[]>(quickViewProduct, 'variants') || []
+  ).filter(
+    (group) => Array.isArray(group?.options) && group.options.length > 0
+  );
+  /**
+   * Commerce orders variant groups from the most general to the most specific,
+   * and only the LAST group's options are sellable leaves — each carries its
+   * own product, and that product's pk is what goes in the basket. An earlier
+   * group (colour) is a different product altogether, so picking there is a
+   * navigation and belongs on the product page, not in an overlay that adds.
+   */
+  const sizeGroup = variantGroups[variantGroups.length - 1] || null;
+  const sizeOptions: ThemeVariantOption[] = sizeGroup?.options || [];
+  /**
+   * The option the shopper actually picked.
+   *
+   * The empty-string guard is the whole point: `chosenOption` starts '' and an
+   * option whose payload carries no `value` also reads '', so an unguarded
+   * match selected that leaf on the first render — before the shopper had
+   * touched anything. Nothing showed as pressed (the size button has always
+   * guarded `value !== ''`), `needsSize` went false, and the add button posted
+   * a size nobody chose. The button's guard and this one have to be the same
+   * guard, because they are answering the same question.
+   */
+  const chosenSize =
+    (chosenOption
+      ? sizeOptions.find((option) => toText(option?.value) === chosenOption)
+      : null) || null;
+  // Commerce names the attribute ("Beden", "Numara"); the authored label is
+  // the fallback for a payload that did not, never an override of it.
+  const sizeGroupLabel =
+    toText(sizeGroup?.attribute_name) || quickViewSizeLabel;
+
+  const quickViewStatus = isQuickViewLoading
+    ? quickViewLoadingLabel
+    : isQuickViewFailed
+    ? quickViewErrorLabel
+    : '';
+  // The summary carries no stock and no variants, so adding before the detail
+  // lands would put a parent product in the basket for something that is only
+  // sellable by size. The button waits.
+  const isQuickViewReady = quickViewProduct !== null;
+  /**
+   * The stock of the thing that would actually go in the basket.
+   *
+   * A card carries ONE pk while the overlay sells whatever LEAF the shopper
+   * picked, so asking the card's product answered about a different product in
+   * both directions. A card pointing at a size that had sold through declared
+   * a product with two sellable sizes dead — the everyday state after a size
+   * sells out — and a parent commerce still called in stock let a sold-out
+   * leaf reach the add endpoint.
+   *
+   * With nothing picked yet the parent's own flag still says nothing about the
+   * sizes under it, so only "every size is gone" can honestly answer sold out;
+   * anything else is `needsSize`, and the button asks for a size.
+   */
+  const quickViewInStock = sizeGroup
+    ? chosenSize
+      ? !isVariantOptionSoldOut(chosenSize)
+      : !sizeOptions.every((option) => isVariantOptionSoldOut(option))
+    : isProductInStock(quickViewProduct);
+  const needsSize = sizeGroup !== null && chosenSize === null;
+  const quickViewAddPk = sizeGroup
+    ? toProductPk(chosenSize?.product?.pk)
+    : toProductPk(pickProductField(quickViewProduct, 'pk')) ||
+      toProductPk(quickViewCard?.pk);
+  const quickViewAddDisabled =
+    !isQuickViewReady ||
+    isAdding ||
+    !quickViewInStock ||
+    needsSize ||
+    // The designer has no real id behind the sample, and a permanently dead
+    // button is not something an author can judge their styling against.
+    (!isDesigner && quickViewAddPk === undefined);
+
+  const quickViewAddText = !isQuickViewReady
+    ? // Nothing is known yet, and "Out of stock" is a claim rather than a
+      // silence — the status line is what reports the wait.
+      quickViewAddLabel
+    : !quickViewInStock
+    ? quickViewOutOfStockLabel
+    : isAdding
+    ? quickViewAddingLabel
+    : addFeedback === 'added'
+    ? quickViewAddedLabel
+    : addFeedback === 'error'
+    ? quickViewAddErrorLabel
+    : needsSize
+    ? quickViewSelectSizeLabel
+    : quickViewAddLabel;
+
+  const openQuickView = (
+    card: RecommendationCard,
+    trigger: HTMLElement | null
+  ) => {
+    quickViewOpenerRef.current = trigger;
+    setChosenOption('');
+    setAddFeedback('idle');
+    setQuickViewCard(card);
+  };
+
+  const handleQuickViewAdd = async () => {
+    // A click inside the designer must never reach the shopper's real basket,
+    // and the feedback timer below must never run on the canvas.
+    if (isDesigner || quickViewAddDisabled || quickViewAddPk === undefined) {
+      return;
+    }
+
+    try {
+      await addProduct({
+        product: quickViewAddPk,
+        quantity: 1,
+        attributes: {}
+      }).unwrap();
+      setAddFeedback('added');
+    } catch {
+      setAddFeedback('error');
+    }
+
+    if (addFeedbackTimer.current) clearTimeout(addFeedbackTimer.current);
+    addFeedbackTimer.current = setTimeout(
+      () => setAddFeedback('idle'),
+      quickViewFeedbackDuration
+    );
+  };
+
+  const quickViewButtonStyle: React.CSSProperties = {
+    border: '1px solid var(--product-recommendations-quick-view-border, #d1d5db)',
+    background: 'transparent',
+    color: 'inherit',
+    font: 'inherit',
+    cursor: 'pointer'
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      data-product-recommendations=""
+      data-product-recommendations-id={trackId}
+      // The overlay's last-resort focus target, and a plain div refuses focus:
+      // without this the fallback silently did nothing and a shopper whose
+      // trigger card had gone was dropped at the top of the document. `-1`
+      // keeps it out of the Tab order, and it is only emitted where the
+      // overlay exists at all, so a strip without quick view is untouched.
+      tabIndex={showQuickView ? -1 : undefined}
+    >
+      <style>
+        {`[data-product-recommendations-id="${trackId}"] [data-product-recommendations-track]{grid-auto-columns:${cardWidth(
+          columnsDesktop
+        )};}` +
+          `@media (max-width:1023px){[data-product-recommendations-id="${trackId}"] [data-product-recommendations-track]{grid-auto-columns:${cardWidth(
+            columnsMobile
+          )};}}`}
+      </style>
+
+      {title && (
+        <TitleTag
+          data-product-recommendations-title=""
+          {...partAttrs('title')}
+          style={{ marginBottom: '12px', fontWeight: 600 }}
+        >
+          {title}
+        </TitleTag>
+      )}
+
+      {showArrows && (
+        <div
+          data-product-recommendations-arrows=""
+          {...partAttrs('arrow-list')}
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: '8px',
+            marginBottom: '8px'
+          }}
+        >
+          <button
+            type="button"
+            data-product-recommendations-arrow="prev"
+            {...partAttrs('arrow')}
+            aria-label={prevLabel}
+            onClick={() => scrollTrack(-1)}
+            style={arrowStyle}
+          >
+            <ChevronIcon direction="prev" />
+          </button>
+          <button
+            type="button"
+            data-product-recommendations-arrow="next"
+            {...partAttrs('arrow')}
+            aria-label={nextLabel}
+            onClick={() => scrollTrack(1)}
+            style={arrowStyle}
+          >
+            <ChevronIcon direction="next" />
+          </button>
+        </div>
+      )}
+
+      <div
+        ref={trackRef}
+        data-product-recommendations-track=""
+        {...partAttrs('track')}
+        style={{
+          display: 'grid',
+          gridAutoFlow: 'column',
+          gap: `var(--product-recommendations-gap, ${cardGap}px)`,
+          overflowX: 'auto',
+          scrollSnapType: 'x mandatory'
+        }}
+      >
+        {customCards ??
+          (designerRows ?? products).map((product) => {
+            const card = (
+            <NextLink
+              key={product.key}
+              // NextLink warns when href resolves to undefined, so a card whose
+              // product url the collection omitted still gets a resolved value.
+              href={isDesigner ? '#' : product.url || '#'}
+              data-product-card=""
+              {...partAttrs('card')}
+              // Navigating inside the designer iframe would drop the author out
+              // of the page they are editing, so cards are inert there.
+              onClick={(event) => {
+                if (isDesigner) event.preventDefault();
+              }}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
+                color: 'inherit',
+                textDecoration: 'none',
+                scrollSnapAlign: 'start'
+              }}
+            >
+              {product.image ? (
+                /* Plain img: collection thumbnails come from arbitrary commerce
+                   CDNs that the brand next.config may not allow. */
+                /* eslint-disable-next-line @next/next/no-img-element */
+                <img
+                  src={product.image}
+                  alt={product.name}
+                  loading="lazy"
+                  data-product-card-image=""
+                  {...partAttrs('card-image')}
+                  style={{
+                    width: '100%',
+                    height: 'auto',
+                    aspectRatio: imageRatio || undefined,
+                    display: 'block',
+                    objectFit: 'cover'
+                  }}
+                />
+              ) : (
+                <span
+                  data-product-card-image=""
+                  {...partAttrs('card-image')}
+                  style={{
+                    display: 'block',
+                    width: '100%',
+                    aspectRatio: imageRatio || '3 / 4',
+                    background: '#f1f5f9'
+                  }}
+                />
+              )}
+
+              {showName && (
+                <span data-product-card-name="" {...partAttrs('card-name')}>
+                  {product.name}
+                </span>
+              )}
+
+              {showPrice && product.price && (
+                <span data-product-card-price="" {...partAttrs('card-price')}>
+                  {product.price}
+                </span>
+              )}
+            </NextLink>
+            );
+
+            // Untouched unless the author asked for a trigger: a published
+            // strip has never had a wrapper around its cards, and the card is
+            // an anchor, which may not contain a button.
+            if (!showQuickView) return card;
+
+            // Storefront-side a card whose payload carried no usable id cannot
+            // be opened, so no dead trigger is drawn over it. The designer
+            // keeps it, so placeholder rows stay stylable.
+            const canQuickView = isDesigner || product.pk !== undefined;
+            const isThisCardOpen = quickViewCard?.key === product.key;
+
+            return (
+              <div
+                key={product.key}
+                data-product-card-slot=""
+                {...partAttrs('card-slot', { open: isThisCardOpen })}
+                style={{ position: 'relative', scrollSnapAlign: 'start' }}
+              >
+                {card}
+                {canQuickView && (
+                  <button
+                    type="button"
+                    data-product-card-quick-view=""
+                    {...partAttrs('quick-view-trigger', {
+                      open: isThisCardOpen
+                    })}
+                    aria-haspopup="dialog"
+                    aria-expanded={isThisCardOpen}
+                    onClick={(event) =>
+                      openQuickView(product, event.currentTarget)
+                    }
+                    style={{
+                      position: 'absolute',
+                      left: '50%',
+                      bottom: '8px',
+                      transform: 'translateX(-50%)',
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: '6px',
+                      padding: '6px 12px',
+                      border: 'none',
+                      background:
+                        'var(--product-recommendations-quick-view-bg, rgba(255, 255, 255, 0.92))',
+                      color: 'inherit',
+                      font: 'inherit',
+                      cursor: 'pointer'
+                    }}
+                  >
+                    <QuickViewIcon name={quickViewTriggerIcon} />
+                    <span>{quickViewTriggerLabel}</span>
+                  </button>
+                )}
+              </div>
+            );
+          })}
+      </div>
+
+      {quickViewOpen && quickViewCard && (
+        <div
+          data-product-recommendations-quick-view=""
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 1000,
+            display: 'flex',
+            padding: '16px',
+            // With the backdrop off nothing is drawn over the page, but this
+            // root still covers the whole viewport — it would swallow every
+            // click as an invisible sheet of glass. Letting events through it
+            // (and re-enabling them on the panel) keeps the page alive.
+            pointerEvents: showQuickViewBackdrop ? undefined : 'none'
+          }}
+        >
+          {showQuickViewBackdrop && (
+            <div
+              data-product-card-quick-view-backdrop=""
+              {...partAttrs('quick-view-backdrop', { open: true })}
+              onClick={() => {
+                if (quickViewCloseOnBackdrop) closeQuickView();
+              }}
+              style={{
+                position: 'absolute',
+                inset: 0,
+                background: 'rgba(0, 0, 0, 0.5)'
+              }}
+            />
+          )}
+
+          <div
+            {...overlay.overlayProps}
+            data-product-card-quick-view-panel=""
+            {...partAttrs('quick-view-panel', {
+              open: true,
+              loading: isQuickViewLoading
+            })}
+            role="dialog"
+            aria-label={quickViewName || quickViewTriggerLabel}
+            aria-busy={isQuickViewLoading}
+            // Focus target of last resort, for an overlay whose every control
+            // the designer turned off.
+            tabIndex={-1}
+            style={{
+              position: 'relative',
+              // `margin: auto` inside the flex root is what centres it; the
+              // backdrop is out of flow and does not compete.
+              margin: 'auto',
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '20px',
+              width: '100%',
+              maxWidth: `${quickViewWidth}px`,
+              maxHeight: '85vh',
+              overflowY: 'auto',
+              padding: '20px',
+              background:
+                'var(--product-recommendations-quick-view-panel-bg, #ffffff)',
+              color: 'inherit',
+              textAlign: 'left',
+              outline: 'none',
+              boxShadow: '0 12px 32px rgba(0, 0, 0, 0.18)',
+              pointerEvents: showQuickViewBackdrop ? undefined : 'auto'
+            }}
+          >
+            {quickViewCloseVisible && (
+              <button
+                type="button"
+                data-product-card-quick-view-close=""
+                {...partAttrs('quick-view-close')}
+                aria-label={quickViewCloseLabel}
+                onClick={closeQuickView}
+                style={{
+                  position: 'absolute',
+                  top: '12px',
+                  right: '12px',
+                  display: 'inline-flex',
+                  padding: '4px',
+                  border: 'none',
+                  background: 'none',
+                  color: 'inherit',
+                  cursor: 'pointer'
+                }}
+              >
+                <CloseIcon />
+              </button>
+            )}
+
+            {quickViewImage && (
+              /* Plain img, for the same reason the card uses one: commerce
+                 thumbnails come from CDNs the brand next.config may not list. */
+              /* eslint-disable-next-line @next/next/no-img-element */
+              <img
+                src={quickViewImage}
+                alt={quickViewName}
+                data-product-card-quick-view-image=""
+                {...partAttrs('quick-view-media')}
+                style={{
+                  flex: '1 1 220px',
+                  minWidth: 0,
+                  maxWidth: '100%',
+                  aspectRatio: imageRatio || '3 / 4',
+                  objectFit: 'cover'
+                }}
+              />
+            )}
+
+            <div
+              data-product-card-quick-view-body=""
+              {...partAttrs('quick-view-body')}
+              style={{
+                flex: '1 1 240px',
+                minWidth: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px'
+              }}
+            >
+              {quickViewName && (
+                <span
+                  data-product-card-quick-view-name=""
+                  {...partAttrs('quick-view-name')}
+                  style={{ fontWeight: 600 }}
+                >
+                  {quickViewName}
+                </span>
+              )}
+
+              {quickViewPrice && (
+                <span
+                  data-product-card-quick-view-price=""
+                  {...partAttrs('quick-view-price')}
+                >
+                  {quickViewPrice}
+                  {quickViewOldPrice && (
+                    <span
+                      data-product-card-quick-view-old-price=""
+                      {...partAttrs('quick-view-old-price')}
+                      style={{
+                        marginLeft: '8px',
+                        opacity: 0.6,
+                        textDecoration: 'line-through'
+                      }}
+                    >
+                      {quickViewOldPrice}
+                    </span>
+                  )}
+                </span>
+              )}
+
+              {quickViewStatus && (
+                <span
+                  data-product-card-quick-view-status=""
+                  {...partAttrs('quick-view-status', {
+                    loading: isQuickViewLoading,
+                    invalid: isQuickViewFailed
+                  })}
+                  // The panel opens before the request settles, so the outcome
+                  // has to be announced rather than silently swapped in.
+                  aria-live="polite"
+                  style={{ opacity: 0.7 }}
+                >
+                  {quickViewStatus}
+                </span>
+              )}
+
+              {isQuickViewFailed && (
+                <button
+                  type="button"
+                  data-product-card-quick-view-retry=""
+                  {...partAttrs('quick-view-retry')}
+                  onClick={() => {
+                    // Nothing was requested in the designer, so there is
+                    // nothing to request again.
+                    if (isDesigner) return;
+                    refetchQuickView();
+                  }}
+                  style={{ ...quickViewButtonStyle, padding: '8px 12px' }}
+                >
+                  {quickViewRetryLabel}
+                </button>
+              )}
+
+              {sizeOptions.length > 0 && (
+                <>
+                  <span
+                    data-product-card-quick-view-size-label=""
+                    {...partAttrs('quick-view-size-label')}
+                  >
+                    {sizeGroupLabel}
+                  </span>
+                  <div
+                    data-product-card-quick-view-sizes=""
+                    {...partAttrs('quick-view-size-list')}
+                    role="group"
+                    aria-label={sizeGroupLabel}
+                    style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}
+                  >
+                    {sizeOptions.map((option, index) => {
+                      const value = toText(option?.value);
+                      const label = toText(option?.label) || value;
+                      const isChosen = value !== '' && value === chosenOption;
+                      const isSoldOut = isVariantOptionSoldOut(option);
+                      /**
+                       * A leaf with no product behind it cannot be added; in
+                       * the designer the sample carries none by design, so the
+                       * author still sees a real row of pickable sizes. A leaf
+                       * with no STOCK behind it cannot be added either, and
+                       * offering it is how a sold-out size reached the basket
+                       * — unless commerce explicitly says this one may still
+                       * be picked, which is how a shopper gets to see WHICH
+                       * size is gone rather than a row that simply omits it.
+                       */
+                      const isUnavailable =
+                        option?.is_selectable === false ||
+                        (isSoldOut &&
+                          option?.is_selectable_without_stock !== true) ||
+                        // A leaf the payload gave no value to cannot be named
+                        // by `chosenOption`, so picking it could never take
+                        // effect — offering it would be a control whose click
+                        // does nothing.
+                        value === '' ||
+                        (!isDesigner &&
+                          toProductPk(option?.product?.pk) === undefined);
+
+                      return (
+                        <button
+                          type="button"
+                          key={value || `quick-view-size-${index}`}
+                          data-product-card-quick-view-size={value}
+                          {...partAttrs('quick-view-size', {
+                            selected: isChosen,
+                            disabled: isUnavailable,
+                            // Sold out is not the same fact as unpickable: the
+                            // one size a shopper is still allowed to select
+                            // and cannot buy has to be stylable as gone.
+                            unavailable: isSoldOut
+                          })}
+                          aria-pressed={isChosen}
+                          disabled={isUnavailable}
+                          onClick={() => setChosenOption(value)}
+                          style={{
+                            ...quickViewButtonStyle,
+                            padding: '6px 12px',
+                            cursor: isUnavailable ? 'not-allowed' : 'pointer',
+                            opacity: isUnavailable ? 0.45 : 1,
+                            fontWeight: isChosen ? 600 : 400
+                          }}
+                        >
+                          {label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </>
+              )}
+
+              <button
+                type="button"
+                data-product-card-quick-view-add=""
+                data-product-card-quick-view-add-state={
+                  !isQuickViewReady
+                    ? 'pending'
+                    : !quickViewInStock
+                    ? 'out-of-stock'
+                    : isAdding
+                    ? 'busy'
+                    : addFeedback
+                }
+                {...partAttrs('quick-view-add', {
+                  loading: isAdding,
+                  disabled: quickViewAddDisabled
+                })}
+                disabled={quickViewAddDisabled}
+                aria-busy={isAdding}
+                onClick={handleQuickViewAdd}
+                style={{
+                  padding: '12px 16px',
+                  border: 'none',
+                  background:
+                    'var(--product-recommendations-quick-view-add-bg, #111827)',
+                  color:
+                    'var(--product-recommendations-quick-view-add-color, #ffffff)',
+                  font: 'inherit',
+                  cursor: quickViewAddDisabled ? 'not-allowed' : 'pointer',
+                  opacity: quickViewAddDisabled ? 0.6 : 1
+                }}
+              >
+                {quickViewAddText}
+              </button>
+
+              {showQuickViewLink && (isDesigner || quickViewHref) && (
+                <NextLink
+                  // Navigating inside the designer iframe would drop the author
+                  // out of the page they are editing, so the link is inert.
+                  href={isDesigner ? '#' : quickViewHref}
+                  data-product-card-quick-view-link=""
+                  {...partAttrs('quick-view-link')}
+                  onClick={(event) => {
+                    if (isDesigner) event.preventDefault();
+                  }}
+                  style={{ color: 'inherit' }}
+                >
+                  {quickViewLinkLabel}
+                </NextLink>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductRecommendationsBlock;