@akinon/pz-theme 2.0.163-rc.0 → 2.0.164-beta.0

package/src/blocks/favourites-grid-block.tsx

@@ -25,6 +25,7 @@ import {
   readItemsCurrency
 } from '../utils/analytics';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { useListImpression } from '../hooks/use-list-impression';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
 
@@ -283,25 +284,21 @@ const FavouritesGridBlock = ({
 
   // GA4 view_item_list (ZERO-4869), once per distinct wishlist content: the
   // favourites grid IS the list impression on this screen. Keyed by row keys
-  // so a remove refires with the new list, a mere re-render does not. A ref,
-  // not a global — each visit mounts a fresh grid and must report again.
+  // so a remove refires with the new list, a mere re-render does not. Sent
+  // when the grid is seen, as every other list is (ZERO-5305): a grid kept
+  // only for its empty state, its list laid out with `display: none` next to
+  // a favourites strip, used to report the favourites a second time.
   const rowsKey = rows.map((row) => row.key).join(',');
-  const pushedListKey = React.useRef<string | null>(null);
-  React.useEffect(() => {
-    if (isDesigner || rows.length === 0) return;
-    if (pushedListKey.current === rowsKey) return;
-    pushedListKey.current = rowsKey;
-    emitCommerceEvent('view_item_list', {
-      currency: localeCurrency,
-      items: rows.map((row) =>
-        buildCommerceItem(row as Record<string, unknown>, {
-          listId: 'favourites',
-          listName: 'Favourites'
-        })
-      )
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowsKey, isDesigner]);
+  const listRef = React.useRef<HTMLDivElement>(null);
+  useListImpression({
+    ref: listRef,
+    products: rows as Array<Record<string, unknown>>,
+    listId: 'favourites',
+    listName: 'Favourites',
+    enabled: !isDesigner,
+    refreshKey: rowsKey,
+    currency: localeCurrency
+  });
 
   // A designer who marked a child as the card layout gets that layout repeated
   // per saved product; otherwise the built-in card renders unchanged.
@@ -402,6 +399,7 @@ const FavouritesGridBlock = ({
 
   return (
     <div
+      ref={listRef}
       data-favourites-grid=""
       data-favourites-grid-id={gridId}
       aria-busy={isBusy}

package/src/blocks/group-block.tsx

@@ -17,6 +17,7 @@ import { DesignerPlaceholder, useThemeItemScope } from './product-block-utils';
 import { renderComposedChildren } from './render-composed-children';
 import { CardListSlider, readListGap } from '../components/card-list-slider';
 import { CardListViews } from '../components/card-list-views';
+import { useThemeSectionList } from '../theme-section-data-context';
 
 /**
  * Composed anchors to the storefront's own routes navigate client-side. A
@@ -59,17 +60,28 @@ const GroupBlock = ({
   const Tag = tag as keyof React.JSX.IntrinsicElements;
   const href = tag === 'a' ? block.properties?.href : undefined;
   const itemScope = useThemeItemScope();
+  const sectionList = useThemeSectionList();
 
   // GA4 select_item (ZERO-4869): a composed anchor inside a repeated product
   // row IS the product card's click. The row scope carries the product, so no
-  // per-card wiring is needed — and outside a row this stays silent.
+  // per-card wiring is needed — and outside a row this stays silent. The card
+  // reports the list it sits in — the section's — and its place in it
+  // (ZERO-5305), the same identity the row's view_item_list carries.
   const handleAnchorAnalytics = () => {
     if (isDesigner) return;
     const scopedProduct = itemScope?.product;
     if (!scopedProduct) return;
     emitCommerceEvent('select_item', {
       currency: readItemsCurrency(scopedProduct as Record<string, unknown>),
-      items: [buildCommerceItem(scopedProduct as Record<string, unknown>)]
+      items: [
+        buildCommerceItem(scopedProduct as Record<string, unknown>, {
+          ...(typeof itemScope?.index === 'number'
+            ? { index: itemScope.index }
+            : null),
+          ...(sectionList?.listId ? { listId: sectionList.listId } : null),
+          ...(sectionList?.listName ? { listName: sectionList.listName } : null)
+        })
+      ]
     });
   };
 

package/src/blocks/item-template.tsx

@@ -158,6 +158,7 @@ export const ItemTemplateList = ({
                 product={
                   scoped ?? (isDesigner ? DESIGNER_SAMPLE_PRODUCT : null)
                 }
+                index={index}
               >
                 {row}
               </ThemeItemScopeProvider>

package/src/blocks/order-detail-block.tsx

@@ -9,7 +9,6 @@ import { getResponsiveValue, partAttrs } from '../utils';
 import { formatDate, formatMoney } from './commerce-format';
 import { readMoneyStyle } from './money-style';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
-import { renderOrderLineActions } from './order-line-actions';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
   DesignerPlaceholder,
@@ -25,7 +24,7 @@ import {
   useOrderActionRules
 } from '../utils/order-action-rules';
 
-type OrderItemLike = {
+interface OrderItemLike {
   id?: number;
   price?: string;
   quantity?: string | number;
@@ -44,7 +43,7 @@ type OrderItemLike = {
     absolute_url?: string;
     attributes?: Record<string, unknown>;
   } | null;
-};
+}
 
 interface AddressLike {
   first_name?: string;
@@ -409,7 +408,7 @@ const formatAddress = (address: AddressLike | null | undefined): string[] => {
  * currencyText, currencyPosition.
  * Parts: detail, header, number, date, header-total, status,
  * invoice-link, cancel-link, return-link, list, item, image, name, quantity,
- * color, size, item-status, item-tracking, item-return-code, item-actions,
+ * color, size, item-status, item-tracking, item-return-code,
  * item-return-method, item-return-carrier, item-pickup-date, price, shipment,
  * delivery, tracking, addresses, address, address-label, totals, total-row,
  * total-label, total-value, grand-total, payment-info, payment-info-label.
@@ -956,21 +955,6 @@ const OrderDetailBlock = ({
                 showPickupDate && returnDetails.pickupDate
                   ? formatPickupDate(returnDetails.pickupDate, locale)
                   : '';
-              const lineActions = renderOrderLineActions({
-                order,
-                line,
-                isDesigner
-              });
-              const showLineMeta =
-                showShipmentStatus &&
-                Boolean(
-                  item.status?.label ||
-                    trackingValue ||
-                    returnCodeValue ||
-                    returnMethodValue ||
-                    returnCarrierValue ||
-                    pickupDateValue
-                );
 
               return (
                 <li
@@ -1086,100 +1070,98 @@ const OrderDetailBlock = ({
                       </div>
                     </div>
 
-                    {(showLineMeta || lineActions) && (
-                      <div
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'column',
-                          alignItems: isMobile ? 'flex-start' : 'flex-end',
-                          textAlign: isMobile ? 'left' : 'right',
-                          gap: '4px',
-                          flex: isMobile ? '1 1 100%' : '0 0 auto'
-                        }}
-                      >
-                        {lineActions && (
-                          <div
-                            data-order-detail-item-actions=""
-                            {...partAttrs('item-actions')}
-                          >
-                            {lineActions}
-                          </div>
-                        )}
-                        {showLineMeta && item.status?.label && (
-                          <span
-                            data-order-detail-item-status=""
-                            data-order-status-value={item.status.value}
-                            {...partAttrs('item-status')}
-                            style={{ display: 'inline-block' }}
-                          >
-                            {item.status.label}
-                          </span>
-                        )}
-                        {/* Label and value in their own spans, so a
-                            composition can colour them apart. */}
-                        {showLineMeta && returnMethodValue && (
-                          <span
-                            data-order-detail-item-return-method=""
-                            {...partAttrs('item-return-method')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{returnMethodLabel}</span>{' '}
-                            <span data-value="">{returnMethodValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && returnCarrierValue && (
-                          <span
-                            data-order-detail-item-return-carrier=""
-                            {...partAttrs('item-return-carrier')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{returnCarrierLabel}</span>{' '}
-                            <span data-value="">{returnCarrierValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && pickupDateValue && (
-                          <span
-                            data-order-detail-item-pickup-date=""
-                            {...partAttrs('item-pickup-date')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            <span data-label="">{pickupDateLabel}</span>{' '}
-                            <span data-value="">{pickupDateValue}</span>
-                          </span>
-                        )}
-                        {showLineMeta && trackingValue && (
-                          <span
-                            data-order-detail-item-tracking=""
-                            {...partAttrs('item-tracking')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {lineTrackingLabel}{' '}
-                            {item.tracking_url ? (
-                              <a
-                                href={isDesigner ? '#' : item.tracking_url}
-                                onClick={guard}
-                                target={isDesigner ? undefined : '_blank'}
-                                rel="noreferrer"
-                                style={{ color: 'inherit' }}
-                              >
-                                {item.tracking_number || item.tracking_url}
-                              </a>
-                            ) : (
-                              trackingValue
-                            )}
-                          </span>
-                        )}
-                        {showLineMeta && returnCodeValue && (
-                          <span
-                            data-order-detail-item-return-code=""
-                            {...partAttrs('item-return-code')}
-                            style={{ opacity: 0.8 }}
-                          >
-                            {returnCodeLabel} {returnCodeValue}
-                          </span>
-                        )}
-                      </div>
-                    )}
+                    {showShipmentStatus &&
+                      (item.status?.label ||
+                        trackingValue ||
+                        returnCodeValue ||
+                        returnMethodValue ||
+                        returnCarrierValue ||
+                        pickupDateValue) && (
+                        <div
+                          style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: isMobile ? 'flex-start' : 'flex-end',
+                            textAlign: isMobile ? 'left' : 'right',
+                            gap: '4px',
+                            flex: isMobile ? '1 1 100%' : '0 0 auto'
+                          }}
+                        >
+                          {item.status?.label && (
+                            <span
+                              data-order-detail-item-status=""
+                              data-order-status-value={item.status.value}
+                              {...partAttrs('item-status')}
+                              style={{ display: 'inline-block' }}
+                            >
+                              {item.status.label}
+                            </span>
+                          )}
+                          {/* Label and value in their own spans, so a
+                              composition can colour them apart. */}
+                          {returnMethodValue && (
+                            <span
+                              data-order-detail-item-return-method=""
+                              {...partAttrs('item-return-method')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnMethodLabel}</span>{' '}
+                              <span data-value="">{returnMethodValue}</span>
+                            </span>
+                          )}
+                          {returnCarrierValue && (
+                            <span
+                              data-order-detail-item-return-carrier=""
+                              {...partAttrs('item-return-carrier')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{returnCarrierLabel}</span>{' '}
+                              <span data-value="">{returnCarrierValue}</span>
+                            </span>
+                          )}
+                          {pickupDateValue && (
+                            <span
+                              data-order-detail-item-pickup-date=""
+                              {...partAttrs('item-pickup-date')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              <span data-label="">{pickupDateLabel}</span>{' '}
+                              <span data-value="">{pickupDateValue}</span>
+                            </span>
+                          )}
+                          {trackingValue && (
+                            <span
+                              data-order-detail-item-tracking=""
+                              {...partAttrs('item-tracking')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {lineTrackingLabel}{' '}
+                              {item.tracking_url ? (
+                                <a
+                                  href={isDesigner ? '#' : item.tracking_url}
+                                  onClick={guard}
+                                  target={isDesigner ? undefined : '_blank'}
+                                  rel="noreferrer"
+                                  style={{ color: 'inherit' }}
+                                >
+                                  {item.tracking_number || item.tracking_url}
+                                </a>
+                              ) : (
+                                trackingValue
+                              )}
+                            </span>
+                          )}
+                          {returnCodeValue && (
+                            <span
+                              data-order-detail-item-return-code=""
+                              {...partAttrs('item-return-code')}
+                              style={{ opacity: 0.8 }}
+                            >
+                              {returnCodeLabel} {returnCodeValue}
+                            </span>
+                          )}
+                        </div>
+                      )}
                   </div>
                 </li>
               );

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

@@ -99,6 +99,8 @@ export interface ThemeProduct {
  */
 interface ThemeItemScopeValue {
   product: ThemeProduct | null;
+  /** The row's place in its list (0-based), when the repeat knows it. */
+  index?: number;
 }
 
 const ThemeItemScopeContext = React.createContext<ThemeItemScopeValue | null>(
@@ -107,12 +109,14 @@ const ThemeItemScopeContext = React.createContext<ThemeItemScopeValue | null>(
 
 export const ThemeItemScopeProvider = ({
   product,
+  index,
   children
 }: {
   product: ThemeProduct | null;
+  index?: number;
   children: React.ReactNode;
 }) => {
-  const value = React.useMemo(() => ({ product }), [product]);
+  const value = React.useMemo(() => ({ product, index }), [product, index]);
 
   return (
     <ThemeItemScopeContext.Provider value={value}>

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

@@ -11,7 +11,12 @@ 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 {
+  ThemeSectionListProvider,
+  useThemeSectionData,
+  useThemeSectionList
+} from '../theme-section-data-context';
+import { useListImpression } from '../hooks/use-list-impression';
 import { getResponsiveValue, partAttrs } from '../utils';
 import {
   buildCommerceItem,
@@ -285,6 +290,7 @@ const ProductRecommendationsBlock = ({
 }: BlockRendererProps) => {
   const { locale, currency: localeCurrency } = useLocalization();
   const rootRef = useRef<HTMLDivElement>(null);
+  const sectionList = useThemeSectionList();
   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.
@@ -863,6 +869,25 @@ const ProductRecommendationsBlock = ({
     ? favouriteCards
     : collectionProducts;
 
+  // The list this strip is (ZERO-5305): named after its title ("You may also
+  // like"), else the section's label; identified by the
+  // collection it shows, else the section.
+  const listIdentity = {
+    listId:
+      (!isRecentlyViewed && !isFavourites && !isSectionSource && collectionId) ||
+      sectionList?.listId ||
+      'product_recommendations',
+    listName: title || sectionList?.listName || 'Product Recommendations'
+  };
+
+  useListImpression({
+    ref: rootRef,
+    products: products as unknown as Record<string, unknown>[],
+    listId: listIdentity.listId,
+    listName: listIdentity.listName,
+    enabled: !isDesigner
+  });
+
   /**
    * The designer has no browsing history behind the canvas, so a recently
    * viewed strip would collapse to nothing and stop being selectable, sizeable
@@ -891,17 +916,24 @@ const ProductRecommendationsBlock = ({
 
   // A designer who marked a child as the card layout gets that layout repeated
   // per product; otherwise the built-in card renders unchanged.
+  // The strip's own list identity rides over its cards, so an authored card's
+  // click reports this strip — not the section around it — as its list.
   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}
-    />
+    <ThemeSectionListProvider
+      listId={listIdentity.listId}
+      listName={listIdentity.listName}
+    >
+      <ItemTemplateList
+        block={block}
+        items={products as unknown as Record<string, unknown>[]}
+        placeholderId={placeholderId}
+        sectionId={sectionId}
+        isDesigner={isDesigner}
+        selectedBlockId={selectedBlockId}
+        currentBreakpoint={currentBreakpoint}
+        designerPlaceholderCount={4}
+      />
+    </ThemeSectionListProvider>
   ) : null;
 
   // An empty history is the normal state on a first visit, so the strip
@@ -1294,8 +1326,8 @@ const ProductRecommendationsBlock = ({
                     buildCommerceItem(
                       product as unknown as Record<string, unknown>,
                       {
-                        listId: 'product_recommendations',
-                        listName: 'Product Recommendations'
+                        ...listIdentity,
+                        index: products.indexOf(product)
                       }
                     )
                   ]

package/src/blocks/text-block.tsx

@@ -7,7 +7,6 @@ import { getInnerRootInlineStyles, partAttrs } from '../utils';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { useLocalizeHref } from '../hooks/use-localize-href';
 import { localizeHtmlLinks } from '../utils/localize-href';
-import { useValueLocale } from '../utils/localized-value';
 
 const TextBlock = ({
   block,
@@ -15,7 +14,7 @@ const TextBlock = ({
 }: BlockRendererProps) => {
   const { locale } = useLocalization();
   const localize = useLocalizeHref();
-  const { defaultLocale } = useValueLocale();
+  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
   const themeSettings = useThemeSettingsContext();
 
   const getLocalizedContent = (): string => {
@@ -31,10 +30,7 @@ const TextBlock = ({
 
     if (typeof value === 'object' && value !== null) {
       return (
-        value[locale] ||
-        (defaultLocale && value[defaultLocale]) ||
-        Object.values(value)[0] ||
-        ''
+        value[locale] || value[defaultLocale] || Object.values(value)[0] || ''
       );
     }