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

package/src/blocks/checkout-summary-block.tsx

@@ -8,7 +8,7 @@ import { getResponsiveValue, partAttrs } from '../utils';
 import { useThemePageContext } from '../theme-page-context';
 import { formatMoney, parseAmount } from './commerce-format';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
-import { readToggle } from './product-block-utils';
+import { getLineImage, readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
 /** Live basket line, as `getBasket` returns it. */
@@ -20,7 +20,12 @@ interface BasketLineLike {
   unit_price?: string;
   total_amount?: string;
   currency_type?: string;
-  product?: { pk?: number; name?: string; image?: string } | null;
+  product?: {
+    pk?: number;
+    name?: string;
+    image?: string;
+    productimage_set?: Array<{ image?: string; url?: string }>;
+  } | null;
 }
 
 interface BasketTotalsLike {
@@ -162,7 +167,7 @@ const CheckoutSummaryBlock = ({
     ? liveLines.map((item, index) => ({
         key: String(item.id ?? item.product?.pk ?? index),
         name: item.product?.name || '',
-        image: item.image || item.product?.image || '',
+        image: getLineImage(item),
         quantity: Number(item.quantity ?? 1),
         total: String(item.total_amount ?? item.price ?? ''),
         // The line reports the currency it was priced in; the storefront

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

@@ -236,6 +236,7 @@ export const parsePriceValue = (value: unknown): number | null =>
 
 export interface OrderLineLike {
   id?: number;
+  image?: string;
   price?: string | number;
   quantity?: string | number;
   total_amount?: string | number;
@@ -244,9 +245,38 @@ export interface OrderLineLike {
     name?: string;
     image?: string;
     absolute_url?: string;
+    productimage_set?: ThemeProductImage[];
+  } | null;
+}
+
+/** A basket or order line as commerce sends it: the picture can sit on any of three fields. */
+export interface CommerceLineLike {
+  image?: unknown;
+  product?: {
+    image?: unknown;
+    productimage_set?: ThemeProductImage[] | null;
   } | null;
 }
 
+/**
+ * The image a basket/order line should show. Commerce leaves `line.image` and
+ * `product.image` unset on these payloads and carries the shot only in
+ * `product.productimage_set` — the page-context normaliser already falls back
+ * to it, but the blocks that prefer the live query over the context were
+ * reading the two empty fields and drawing no image at all.
+ */
+export const getLineImage = (
+  line: CommerceLineLike | null | undefined
+): string => {
+  const product = line?.product;
+  const direct = toText(line?.image) || toText(product?.image);
+  if (direct) return direct;
+
+  const first = (product?.productimage_set || [])[0];
+
+  return toText(first?.image) || toText(first?.url);
+};
+
 export interface GroupedOrderLine<T extends OrderLineLike> {
   /** Stable React key: the product pk when the payload carries one. */
   key: string;
@@ -300,7 +330,7 @@ export const groupOrderItems = <T extends OrderLineLike>(
     accumulator.push({
       key,
       name: item.product?.name || '',
-      image: item.product?.image || '',
+      image: getLineImage(item),
       href: item.product?.absolute_url || '',
       price: String(item.price ?? ''),
       total: lineTotal,

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

@@ -9,6 +9,7 @@ import {
 } from '@akinon/next/data/client/product';
 import { useLocalization } from '@akinon/next/hooks';
 import { useOverlay } from '../hooks/use-overlay';
+import { useThemeSectionData } from '../theme-section-data-context';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
@@ -18,6 +19,12 @@ import {
   listingPlaceholderStyle,
   readToggle
 } from './listing-context';
+import {
+  MoneyCurrencyDisplay,
+  MoneyCurrencyPosition,
+  MoneyDecimals,
+  MoneyStyleOptions
+} from './commerce-format';
 import {
   isProductInStock,
   isVariantOptionSoldOut,
@@ -40,9 +47,16 @@ import {
 const DEFAULT_CARD_GAP = 16;
 
 const ALLOWED_TITLE_TAGS = ['div', 'h2', 'h3', 'span'];
-const ALLOWED_IMAGE_RATIOS = ['', '1/1', '3/4', '4/3'];
+const ALLOWED_IMAGE_RATIOS = ['', '1/1', '2/3', '3/4', '4/3'];
+/** `stacked` is the title-above-arrows layout the block always drew. */
+const ALLOWED_HEADER_LAYOUTS = ['stacked', 'inline'];
+/** `chevron` is the stroked glyph the block always drew. */
+const ALLOWED_ARROW_ICONS = ['chevron', 'arrow'];
+const ALLOWED_DECIMALS = ['always', 'auto', 'never'];
+const ALLOWED_CURRENCY_DISPLAYS = ['', 'symbol', 'code', 'custom', 'none'];
+const ALLOWED_CURRENCY_POSITIONS = ['', 'before', 'after'];
 /** `collection` is the source the block has always had, so it is the default. */
-const ALLOWED_SOURCES = ['collection', 'recently-viewed'];
+const ALLOWED_SOURCES = ['collection', 'recently-viewed', 'section'];
 const ALLOWED_QUICK_VIEW_ICONS = ['eye', 'plus', 'none'];
 
 const DEFAULT_QUICK_VIEW_FEEDBACK = 2000;
@@ -94,6 +108,29 @@ const safeUrl = (value: unknown): string => {
   return /^https?:\/\//i.test(text) ? text : '';
 };
 
+/**
+ * The 8×8 line arrow of the editorial design, sized in em so the `arrow`
+ * part's font-size sets it.
+ */
+const LineArrowIcon = ({ direction }: { direction: 'prev' | 'next' }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 8 8"
+    fill="currentColor"
+    aria-hidden="true"
+    style={{ display: 'block' }}
+  >
+    <path
+      d={
+        direction === 'prev'
+          ? 'M5.85 0.78L2.67 3.96L5.85 7.15L5.15 7.85L1.26 3.96L5.15 0.08L5.85 0.78Z'
+          : 'M6.78 4.04L2.89 7.92L2.18 7.22L5.36 4.04L2.18 0.85L2.89 0.15L6.78 4.04Z'
+      }
+    />
+  </svg>
+);
+
 const ChevronIcon = ({ direction }: { direction: 'prev' | 'next' }) => (
   <svg
     width="16"
@@ -180,7 +217,9 @@ interface RecommendationCard {
  * `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).
+ * `recently-viewed-store.ts` for what is stored and why). `section` reads the
+ * rows the enclosing section's data source resolved to (the collection picked
+ * in the editor's Source panel), through `theme-section-data-context`.
  *
  * ACTING ON A CARD WITHOUT LEAVING THE PAGE comes in two halves, and only one
  * of them is built here.
@@ -202,7 +241,9 @@ interface RecommendationCard {
  * 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,
+ * Parts: header (inline header layout only), title, arrow-list, arrow
+ * (`disabled` at the start / end of the track), 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,
@@ -210,7 +251,9 @@ interface RecommendationCard {
  * 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,
+ * prevLabel, nextLabel, headerLayout (stacked | inline), arrowIcon
+ * (chevron | arrow), decimals, currencyDisplay, currencyText,
+ * currencyPosition, recentlyViewedKey, recentlyViewedCapacity,
  * recentlyViewedMaxAge, recentlyViewedEmptyLabel, showQuickView,
  * quickViewTriggerLabel, quickViewTriggerIcon, quickViewWidth,
  * showQuickViewBackdrop, quickViewCloseOnBackdrop, quickViewCloseOnEscape,
@@ -261,6 +304,11 @@ const ProductRecommendationsBlock = ({
     ? sourceValue
     : 'collection';
   const isRecentlyViewed = source === 'recently-viewed';
+  // `section` draws the rows the SECTION's data source resolved to (the
+  // collection picked in the editor's Source panel), so the strip needs no
+  // collection id of its own.
+  const isSectionSource = source === 'section';
+  const sectionData = useThemeSectionData();
 
   const title = String(
     getResponsiveValue(block.properties?.title, currentBreakpoint, '')
@@ -321,6 +369,33 @@ const ProductRecommendationsBlock = ({
   );
   const prevLabel = prop('prevLabel', 'Previous products');
   const nextLabel = prop('nextLabel', 'Next products');
+  const headerLayoutValue = prop('headerLayout', 'stacked');
+  const headerLayout = ALLOWED_HEADER_LAYOUTS.includes(headerLayoutValue)
+    ? headerLayoutValue
+    : 'stacked';
+  const arrowIconValue = prop('arrowIcon', 'chevron');
+  const arrowIcon = ALLOWED_ARROW_ICONS.includes(arrowIconValue)
+    ? arrowIconValue
+    : 'chevron';
+  const decimalsValue = prop('decimals', 'always');
+  const currencyDisplayValue = prop('currencyDisplay', '');
+  const currencyPositionValue = prop('currencyPosition', '');
+  const money: MoneyStyleOptions = {
+    decimals: (ALLOWED_DECIMALS.includes(decimalsValue)
+      ? decimalsValue
+      : 'always') as MoneyDecimals,
+    currencyDisplay: (ALLOWED_CURRENCY_DISPLAYS.includes(currencyDisplayValue)
+      ? currencyDisplayValue
+      : '') as MoneyCurrencyDisplay,
+    currencyText: prop('currencyText', ''),
+    currencyPosition: (ALLOWED_CURRENCY_POSITIONS.includes(
+      currencyPositionValue
+    )
+      ? currencyPositionValue
+      : '') as MoneyCurrencyPosition
+  };
+  // Which way the track can still scroll; drives the arrows' disabled state.
+  const [canScroll, setCanScroll] = React.useState({ prev: false, next: true });
   const recentlyViewedKey =
     prop('recentlyViewedKey', DEFAULT_RECENTLY_VIEWED_KEY).trim() ||
     DEFAULT_RECENTLY_VIEWED_KEY;
@@ -435,9 +510,33 @@ const ProductRecommendationsBlock = ({
   // 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
+    skip: !collectionId || isRecentlyViewed || isSectionSource
   });
 
+  // The arrows report where the track stands: the previous arrow is disabled
+  // at the start and the next one at the end, re-read on scroll and resize.
+  // In the designer both stay enabled so the author can style them.
+  React.useEffect(() => {
+    const track = trackRef.current;
+    if (!track || !showArrows || isDesigner) return;
+
+    const update = () => {
+      const maxScroll = track.scrollWidth - track.clientWidth;
+      setCanScroll({
+        prev: track.scrollLeft > 1,
+        next: track.scrollLeft < maxScroll - 1
+      });
+    };
+
+    update();
+    track.addEventListener('scroll', update, { passive: true });
+    window.addEventListener('resize', update);
+    return () => {
+      track.removeEventListener('scroll', update);
+      window.removeEventListener('resize', update);
+    };
+  }, [showArrows, isDesigner, data, recentEntries, sectionData]);
+
   /**
    * 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
@@ -572,7 +671,9 @@ const ProductRecommendationsBlock = ({
   );
 
   const collectionProducts: RecommendationCard[] = (
-    (data?.products || []) as Array<Record<string, unknown>>
+    (isSectionSource
+      ? sectionData?.items || []
+      : data?.products || []) as Array<Record<string, unknown>>
   )
     .slice(0, limit)
     // Annotated so the element type matches the predicate below: left inferred,
@@ -586,9 +687,17 @@ const ProductRecommendationsBlock = ({
       const images = Array.isArray(entry.productimage_set)
         ? (entry.productimage_set as Array<Record<string, unknown>>)
         : [];
+      // The section source hands over the editor's own rows in the designer,
+      // and those are Omnitron products: the money sits under `active_price`
+      // there, flat on the commerce payloads the storefront reads.
+      const activePrice = (entry.active_price ?? {}) as 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 || '';
+      const currency =
+        toText(entry.currency_type) ||
+        toText(activePrice.currency_type) ||
+        localeCurrency ||
+        '';
 
       return {
         key: toText(entry.pk) || `recommendation-${index}`,
@@ -596,7 +705,12 @@ const ProductRecommendationsBlock = ({
         name,
         url: url || '#',
         image: toText(entry.image) || toText(images[0]?.image),
-        price: formatListingPrice(entry.price, currency, locale)
+        price: formatListingPrice(
+          entry.price ?? activePrice.price,
+          currency,
+          locale,
+          money
+        )
       };
     })
     .filter((card): card is RecommendationCard => card !== null);
@@ -621,7 +735,8 @@ const ProductRecommendationsBlock = ({
       price: formatListingPrice(
         entry.price,
         entry.currency || localeCurrency || '',
-        locale
+        locale,
+        money
       )
     }));
 
@@ -678,7 +793,9 @@ const ProductRecommendationsBlock = ({
 
     return (
       <div data-product-recommendations="" style={listingPlaceholderStyle}>
-        {!collectionId
+        {isSectionSource
+          ? 'Recommendations (pick a collection in the section Source panel)'
+          : !collectionId
           ? 'Recommendations (set a collection id)'
           : isFetching
           ? 'Recommendations (loading)'
@@ -707,6 +824,7 @@ const ProductRecommendationsBlock = ({
     });
   };
 
+
   const arrowStyle: React.CSSProperties = {
     display: 'inline-flex',
     alignItems: 'center',
@@ -933,49 +1051,89 @@ const ProductRecommendationsBlock = ({
           )};}}`}
       </style>
 
-      {title && (
-        <TitleTag
-          data-product-recommendations-title=""
-          {...partAttrs('title')}
-          style={{ marginBottom: '12px', fontWeight: 600 }}
-        >
-          {title}
-        </TitleTag>
-      )}
+      {(() => {
+        const inlineHeader = headerLayout === 'inline';
+        const ArrowGlyph = arrowIcon === 'arrow' ? LineArrowIcon : ChevronIcon;
+        const prevDisabled = !isDesigner && !canScroll.prev;
+        const nextDisabled = !isDesigner && !canScroll.next;
 
-      {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}
+        const titleNode = title ? (
+          <TitleTag
+            data-product-recommendations-title=""
+            {...partAttrs('title')}
+            style={{
+              marginBottom: inlineHeader ? 0 : '12px',
+              fontWeight: 600
+            }}
           >
-            <ChevronIcon direction="prev" />
-          </button>
-          <button
-            type="button"
-            data-product-recommendations-arrow="next"
-            {...partAttrs('arrow')}
-            aria-label={nextLabel}
-            onClick={() => scrollTrack(1)}
-            style={arrowStyle}
+            {title}
+          </TitleTag>
+        ) : null;
+
+        const arrowsNode = showArrows ? (
+          <div
+            data-product-recommendations-arrows=""
+            {...partAttrs('arrow-list')}
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              gap: '8px',
+              marginBottom: inlineHeader ? 0 : '8px'
+            }}
           >
-            <ChevronIcon direction="next" />
-          </button>
-        </div>
-      )}
+            <button
+              type="button"
+              data-product-recommendations-arrow="prev"
+              {...partAttrs('arrow', { disabled: prevDisabled })}
+              aria-label={prevLabel}
+              aria-disabled={prevDisabled || undefined}
+              onClick={() => scrollTrack(-1)}
+              style={arrowStyle}
+            >
+              <ArrowGlyph direction="prev" />
+            </button>
+            <button
+              type="button"
+              data-product-recommendations-arrow="next"
+              {...partAttrs('arrow', { disabled: nextDisabled })}
+              aria-label={nextLabel}
+              aria-disabled={nextDisabled || undefined}
+              onClick={() => scrollTrack(1)}
+              style={arrowStyle}
+            >
+              <ArrowGlyph direction="next" />
+            </button>
+          </div>
+        ) : null;
+
+        // `inline` puts the title and the arrows on one row (`header` part);
+        // `stacked` is the element order the block always drew.
+        if (inlineHeader && (titleNode || arrowsNode)) {
+          return (
+            <div
+              data-product-recommendations-header=""
+              {...partAttrs('header')}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '16px',
+                marginBottom: '12px'
+              }}
+            >
+              {titleNode}
+              {arrowsNode}
+            </div>
+          );
+        }
+
+        return (
+          <>
+            {titleNode}
+            {arrowsNode}
+          </>
+        );
+      })()}
 
       <div
         ref={trackRef}

package/src/theme-section-data-context.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { createContext, PropsWithChildren, useContext, useMemo } from 'react';
+
+/**
+ * The rows a section's data source resolved to (a collection's products, for
+ * instance), for functional blocks that want to draw them with their own
+ * chrome — a scrolling strip with arrows — instead of the iterator/item
+ * template mechanism. Null outside a section, or in a section without one.
+ */
+export interface ThemeSectionDataValue {
+  items: Record<string, unknown>[];
+}
+
+const ThemeSectionDataContext = createContext<ThemeSectionDataValue | null>(
+  null
+);
+
+export const ThemeSectionDataProvider = ({
+  items,
+  children
+}: PropsWithChildren<{ items: Record<string, unknown>[] | null }>) => {
+  const value = useMemo(() => (items ? { items } : null), [items]);
+
+  return (
+    <ThemeSectionDataContext.Provider value={value}>
+      {children}
+    </ThemeSectionDataContext.Provider>
+  );
+};
+
+export const useThemeSectionData = () => useContext(ThemeSectionDataContext);

package/src/theme-section.tsx

@@ -22,6 +22,7 @@ import {
 import { safeDeepClone } from './utils/safe-clone';
 
 import { isTrustedEditorEvent, postToEditor } from './editor-bridge';
+import { ThemeSectionDataProvider } from './theme-section-data-context';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 export interface Section {
   id: string;
@@ -210,6 +211,16 @@ export default function ThemeSection({
     return Array.isArray(value) ? (value as Record<string, unknown>[]) : [];
   };
 
+  // The section's own rows, handed to functional blocks through context (see
+  // theme-section-data-context.tsx). Computed once per render; the list is
+  // empty rather than null when the section has a data source with no rows.
+  const sectionDataItems = useMemo<Record<string, unknown>[] | null>(
+    () =>
+      effectiveSection.dataSource?.details ? getProductsFromDataPath() : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [effectiveSection.dataSource, isDesigner]
+  );
+
   const getIteratorRenderMeta = (iteratorBlock: Block) => {
     const dataPath =
       (iteratorBlock.iteratorDataPath as string | undefined) ||
@@ -957,6 +968,7 @@ export default function ThemeSection({
   };
 
   return (
+    <ThemeSectionDataProvider items={sectionDataItems}>
     <section
       ref={sectionRef}
       data-section-id={effectiveSection.id}
@@ -1289,5 +1301,6 @@ export default function ThemeSection({
           })}
       </div>
     </section>
+    </ThemeSectionDataProvider>
   );
 }