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

package/src/theme-section.tsx

@@ -27,7 +27,12 @@ import { DesignerPlaceholder } from './blocks/product-block-utils';
 import { CustomSectionHost } from './custom/section-host';
 import { getCustomSectionDefinition } from './custom/section-definitions';
 import { isCustomThemeType } from './custom/types';
-import { ThemeSectionDataProvider } from './theme-section-data-context';
+import {
+  ThemeSectionDataProvider,
+  ThemeSectionListProvider
+} from './theme-section-data-context';
+import { useListImpression } from './hooks/use-list-impression';
+import { reportsOwnImpressions } from './utils/section-impressions';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 import { useSectionSeen } from './hooks/use-section-seen';
 export interface Section {
@@ -52,6 +57,15 @@ export interface Section {
   dataSourceSaved?: boolean;
 }
 
+/** How many products the section's collection holds; 0 without one. */
+const sectionProductCount = (section: Section): number => {
+  const collection = section.dataSource?.details?.collection;
+  const rows = collection?.data ?? collection?.products;
+  if (Array.isArray(rows)) return rows.length;
+  if (Array.isArray(rows?.products)) return rows.products.length;
+  return 0;
+};
+
 interface ThemeSectionProps {
   section: Section;
   placeholderId: string;
@@ -141,7 +155,21 @@ export default function ThemeSection({
   // Report this section becoming visible (ZERO-5164). The generic branch
   // below renders its own <section>; sections that go through SectionWrapper
   // are reported there, so exactly one of the two runs per section.
-  useSectionSeen({ ref: sectionRef, section: effectiveSection, placeholderId });
+  // The list this section's product rows are (ZERO-5305): the collection it
+  // is bound to, else the section; named after the section's label.
+  const sectionListId = String(
+    effectiveSection.dataSourceId || effectiveSection.id || ''
+  );
+  const sectionListName = String(
+    effectiveSection.label || effectiveSection.name || ''
+  ).trim();
+
+  useSectionSeen({
+    ref: sectionRef,
+    section: effectiveSection,
+    placeholderId,
+    productCount: sectionProductCount(effectiveSection)
+  });
 
   const constrainsContent = hasSectionContentWidth(effectiveSection.styles);
 
@@ -249,6 +277,32 @@ export default function ThemeSection({
     [effectiveSection.dataSource, isDesigner]
   );
 
+  // A section bound to a collection lists its products (a carousel, a strip):
+  // reported as one view_item_list when it comes into view. A section with a
+  // block that reports its products itself (the listing or favourites grid, a
+  // recommendations strip drawing the section's rows) is left to it.
+  // A section drawn through `SectionWrapper` reports there instead: this ref
+  // is attached only by the generic branch's own <section>.
+  const listProducts = reportsOwnImpressions(effectiveSection.blocks)
+    ? null
+    : sectionDataItems;
+  useListImpression({
+    ref: sectionRef,
+    products: listProducts,
+    listId: sectionListId,
+    listName: sectionListName,
+    enabled: !isDesigner
+  });
+
+  // What `SectionWrapper` needs to report this section as the generic branch
+  // does: seen with its product count, listed under its list identity.
+  const wrapperListProps = {
+    productCount: sectionProductCount(effectiveSection),
+    listProducts,
+    listId: sectionListId,
+    listName: sectionListName
+  };
+
   const getIteratorRenderMeta = (iteratorBlock: Block) => {
     const dataPath =
       (iteratorBlock.iteratorDataPath as string | undefined) ||
@@ -598,6 +652,7 @@ export default function ThemeSection({
         onToggleVisibility={onToggleVisibility}
         onDelete={onDelete}
         onRename={onRename}
+        {...wrapperListProps}
       >
         <CustomSectionHost
           type={effectiveSection.type}
@@ -660,6 +715,7 @@ export default function ThemeSection({
         onToggleVisibility={onToggleVisibility}
         onDelete={onDelete}
         onRename={onRename}
+        {...wrapperListProps}
       >
         <CustomSectionRenderer
           section={effectiveSection}
@@ -1141,6 +1197,7 @@ export default function ThemeSection({
 
   return (
     <ThemeSectionDataProvider items={sectionDataItems}>
+    <ThemeSectionListProvider listId={sectionListId} listName={sectionListName}>
     <section
       ref={sectionRef}
       data-section-id={effectiveSection.id}
@@ -1473,6 +1530,7 @@ export default function ThemeSection({
           })}
       </div>
     </section>
+    </ThemeSectionListProvider>
     </ThemeSectionDataProvider>
   );
 }

package/src/utils/__tests__/section-impressions.test.ts

@@ -0,0 +1,68 @@
+import { reportsOwnImpressions } from '../section-impressions';
+import type { Block } from '../../theme-block';
+
+/**
+ * A section reports its products as one list impression unless a block in
+ * it already does (ZERO-5305): one view_item_list per list, never two.
+ */
+
+const block = (
+  type: string,
+  properties: Record<string, unknown> = {},
+  blocks: Block[] = []
+) =>
+  ({
+    id: `${type}-1`,
+    type,
+    label: type,
+    value: '',
+    properties,
+    styles: {},
+    order: 0,
+    hidden: false,
+    blocks
+  } as unknown as Block);
+
+describe('reportsOwnImpressions (ZERO-5305)', () => {
+  it('leaves the listing and favourites grids their own reports, however deep', () => {
+    expect(reportsOwnImpressions([block('product-grid')])).toBe(true);
+    expect(
+      reportsOwnImpressions([
+        block('group', {}, [block('group', {}, [block('favourites-grid')])])
+      ])
+    ).toBe(true);
+  });
+
+  it('leaves a recommendations strip drawing the section’s rows its own report', () => {
+    expect(
+      reportsOwnImpressions([
+        block('product-recommendations', { source: 'section' })
+      ])
+    ).toBe(true);
+    expect(
+      reportsOwnImpressions([
+        block('product-recommendations', {
+          source: { desktop: 'section', mobile: 'collection' }
+        })
+      ])
+    ).toBe(true);
+  });
+
+  it('still reports the section’s rows next to a strip with a source of its own', () => {
+    expect(
+      reportsOwnImpressions([
+        block('product-recommendations', { source: 'recently-viewed' })
+      ])
+    ).toBe(false);
+    expect(reportsOwnImpressions([block('product-recommendations')])).toBe(
+      false
+    );
+  });
+
+  it('reports a plain carousel’s rows itself', () => {
+    expect(reportsOwnImpressions([block('group', {}, [block('image')])])).toBe(
+      false
+    );
+    expect(reportsOwnImpressions(undefined)).toBe(false);
+  });
+});

package/src/utils/iterator-price-shapes.test.ts

@@ -359,6 +359,19 @@ describe('a collection row published in the listing row shape', () => {
       false
     );
   });
+
+  it('numbers each scoped row, for the position a card click reports (ZERO-5305)', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: cardIterator({}, [text('name', { dataBinding: 'item.name' })]),
+      sectionDataSource: source([
+        omnitronRow(7, '2999.00', ''),
+        omnitronRow(8, '1999.00', '')
+      ]),
+      pageContext: null
+    } as never);
+
+    expect(expanded.blocks?.map((clone) => clone.itemScopeIndex)).toEqual([0, 1]);
+  });
 });
 
 describe('a repeat inside a collection row', () => {

package/src/utils/iterator-utils.ts

@@ -1723,7 +1723,8 @@ export const buildIteratorBlock = ({
         ? {
             itemScopeProduct: resolveCollectionRowProduct(
               rawItem as Record<string, unknown>
-            )
+            ),
+            itemScopeIndex: index
           }
         : {})
     };

package/src/utils/section-impressions.ts

@@ -0,0 +1,37 @@
+import type { Block } from '../theme-block';
+
+/**
+ * Whether a block inside a section already reports the section's products
+ * as a list impression of its own (ZERO-5305), so the section must not report
+ * them a second time:
+ *
+ *   - the listing grid and the favourites grid report their own pages;
+ *   - a recommendations strip drawing the SECTION's rows (`source: section`)
+ *     reports them under its title.
+ *
+ * A strip with a source of its own (a collection by id, recently viewed,
+ * favourites) shows other products, so the section's rows still need their
+ * own report. The source is read at every breakpoint: a strip that draws the
+ * section's rows anywhere draws them.
+ */
+
+const OWN_IMPRESSION_GRIDS = new Set(['product-grid', 'favourites-grid']);
+
+const drawsSectionRows = (block: Block): boolean => {
+  const source = (block.properties as Record<string, unknown> | undefined)
+    ?.source;
+  const values =
+    source && typeof source === 'object'
+      ? Object.values(source as Record<string, unknown>)
+      : [source];
+
+  return values.some((value) => value === 'section');
+};
+
+export const reportsOwnImpressions = (blocks: Block[] | undefined): boolean =>
+  (blocks ?? []).some(
+    (block) =>
+      OWN_IMPRESSION_GRIDS.has(block.type) ||
+      (block.type === 'product-recommendations' && drawsSectionRows(block)) ||
+      reportsOwnImpressions(block.blocks)
+  );

package/src/blocks/__tests__/order-line-actions.test.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import {
-  registerOrderLineActions,
-  renderOrderLineActions
-} from '../order-line-actions';
-
-const context = {
-  order: { id: 7, number: '20920397829', created_date: '2026-10-01' },
-  line: {
-    key: '1',
-    name: 'Product',
-    image: '',
-    href: '',
-    price: '100',
-    total: 100,
-    quantity: 1,
-    item: { id: 1, status: { value: '550', label: 'Delivered' } }
-  },
-  isDesigner: false
-};
-
-describe('order line actions registry', () => {
-  it('renders nothing until a brand registers', () => {
-    expect(renderOrderLineActions(context)).toBeNull();
-  });
-
-  it('hands the line and order to the registered renderer', () => {
-    const renderer = jest.fn(() => <span>action</span>);
-    const unregister = registerOrderLineActions(renderer);
-
-    expect(renderOrderLineActions(context)).toEqual(<span>action</span>);
-    expect(renderer).toHaveBeenCalledWith(context);
-
-    unregister();
-    expect(renderOrderLineActions(context)).toBeNull();
-  });
-
-  it('swallows a throwing renderer so a brand bug cannot break the line', () => {
-    const unregister = registerOrderLineActions(() => {
-      throw new Error('boom');
-    });
-
-    expect(renderOrderLineActions(context)).toBeNull();
-    unregister();
-  });
-
-  it('only forgets the renderer it was asked to forget', () => {
-    const first = registerOrderLineActions(() => 'first');
-    registerOrderLineActions(() => 'second');
-
-    first();
-    expect(renderOrderLineActions(context)).toBe('second');
-  });
-});

package/src/blocks/order-line-actions.ts

@@ -1,45 +0,0 @@
-import type { ReactNode } from 'react';
-import type { GroupedOrderLine, OrderLineLike } from './product-block-utils';
-
-export interface OrderLineActionsOrder {
-  id?: number;
-  number?: string;
-  created_date?: string;
-}
-
-export type OrderLineActionsItem = OrderLineLike & {
-  status?: { value?: string; label?: string };
-  [key: string]: unknown;
-};
-
-export interface OrderLineActionsContext {
-  order: OrderLineActionsOrder;
-  line: GroupedOrderLine<OrderLineActionsItem>;
-  isDesigner: boolean;
-}
-
-export type OrderLineActionsRenderer = (
-  context: OrderLineActionsContext
-) => ReactNode;
-
-let renderer: OrderLineActionsRenderer | null = null;
-
-export const registerOrderLineActions = (
-  fn: OrderLineActionsRenderer
-): (() => void) => {
-  renderer = fn;
-  return () => {
-    if (renderer === fn) renderer = null;
-  };
-};
-
-export const renderOrderLineActions = (
-  context: OrderLineActionsContext
-): ReactNode => {
-  if (!renderer) return null;
-  try {
-    return renderer(context) ?? null;
-  } catch {
-    return null;
-  }
-};

package/src/utils/__tests__/sanitize-rich-text.test.ts

@@ -1,80 +0,0 @@
-import { sanitizeRichText } from '../sanitize-rich-text';
-
-describe('sanitizeRichText', () => {
-  it('keeps the markup the editor writes', () => {
-    const html =
-      '<p>Sipariş <b>verirseniz</b> <i>yarın</i> <u>kapınızda</u></p><ul><li>bir</li></ul><h2>Başlık</h2><br>';
-
-    expect(sanitizeRichText(html)).toBe(
-      '<p>Sipariş <b>verirseniz</b> <i>yarın</i> <u>kapınızda</u></p><ul><li>bir</li></ul><h2>Başlık</h2><br />'
-    );
-  });
-
-  it('drops scripts, event handlers and unknown tags but keeps their text', () => {
-    const html =
-      '<p onclick="x()">a<script>alert(1)</script><custom>b</custom><img src=x onerror=alert(1)></p>';
-
-    expect(sanitizeRichText(html)).toBe('<p>ab</p>');
-  });
-
-  it('keeps only safe links and forces rel on new-tab links', () => {
-    expect(
-      sanitizeRichText(
-        '<a href="javascript:alert(1)">x</a><a href="https://gant.com" target="_blank">y</a><a href="/sss">z</a>'
-      )
-    ).toBe(
-      '<a>x</a><a href="https://gant.com" target="_blank" rel="noopener noreferrer">y</a><a href="/sss">z</a>'
-    );
-  });
-
-  it('keeps only the colour and emphasis styles', () => {
-    expect(
-      sanitizeRichText(
-        '<span style="color: #9a2320; position: fixed; background: url(x)">a</span>'
-      )
-    ).toBe('<span style="color: #9a2320">a</span>');
-  });
-
-  it('leaves text, entities and placeholders untouched', () => {
-    expect(sanitizeRichText('{{countdown}} &amp; {{add_day|4}}')).toBe(
-      '{{countdown}} &amp; {{add_day|4}}'
-    );
-    expect(sanitizeRichText('')).toBe('');
-  });
-
-  it('reads tag names the way the browser does, so no element slips through as text', () => {
-    expect(
-      sanitizeRichText(
-        '<x_y onmouseover=alert(1) style=position:fixed;inset:0>a</x_y>'
-      )
-    ).toBe('a');
-    expect(sanitizeRichText('<svg/onload=alert(1)>b')).toBe('b');
-  });
-
-  it('never lets an unfinished tag run into the markup that follows', () => {
-    expect(sanitizeRichText('<img src=x onerror=alert(1)')).toBe(
-      '&lt;img src=x onerror=alert(1)'
-    );
-    expect(sanitizeRichText('<p>a</p><b')).toBe('<p>a</p>&lt;b');
-  });
-
-  it('escapes every < that does not become a kept tag', () => {
-    expect(sanitizeRichText('a < b <3 c')).toBe('a &lt; b &lt;3 c');
-    expect(sanitizeRichText('<!DOCTYPE html><?xml version="1.0"?>x')).toBe(
-      '&lt;!DOCTYPE html>&lt;?xml version="1.0"?>x'
-    );
-    expect(sanitizeRichText('</>')).toBe('&lt;/>');
-  });
-
-  it('reads a quoted attribute value holding > as part of the tag', () => {
-    expect(sanitizeRichText('<a href="/x" title="a>b">t</a>')).toBe(
-      '<a href="/x">t</a>'
-    );
-  });
-
-  it('drops an unterminated comment or script to the end', () => {
-    expect(sanitizeRichText('a<!-- b')).toBe('a');
-    expect(sanitizeRichText('<!-->x')).toBe('x');
-    expect(sanitizeRichText('a<script>alert(1)')).toBe('a');
-  });
-});

package/src/utils/sanitize-rich-text.ts

@@ -1,215 +0,0 @@
-const ALLOWED_TAGS = new Set([
-  'p',
-  'div',
-  'br',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'ul',
-  'ol',
-  'li',
-  'b',
-  'strong',
-  'i',
-  'em',
-  'u',
-  's',
-  'span',
-  'a'
-]);
-
-const VOID_TAGS = new Set(['br']);
-
-const DROPPED_WITH_CONTENT = new Set([
-  'script',
-  'style',
-  'iframe',
-  'object',
-  'embed',
-  'template',
-  'noscript'
-]);
-
-const ALLOWED_STYLE_PROPERTIES = new Set([
-  'color',
-  'background-color',
-  'font-weight',
-  'font-style',
-  'text-decoration',
-  'text-decoration-line',
-  'text-align'
-]);
-
-const SAFE_HREF = /^(?:https?:\/\/|mailto:|tel:|\/(?!\/)|#|\?)/i;
-
-const ATTRIBUTE_PATTERN =
-  /([a-zA-Z-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
-
-const escapeAttribute = (value: string): string =>
-  value
-    .replace(/&/g, '&')
-    .replace(/"/g, '"')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-
-const readAttributes = (raw: string): Record<string, string> => {
-  const attributes: Record<string, string> = {};
-  let match = ATTRIBUTE_PATTERN.exec(raw);
-  while (match) {
-    attributes[match[1].toLowerCase()] = match[2] ?? match[3] ?? match[4] ?? '';
-    match = ATTRIBUTE_PATTERN.exec(raw);
-  }
-  ATTRIBUTE_PATTERN.lastIndex = 0;
-  return attributes;
-};
-
-const safeStyle = (value: string): string =>
-  value
-    .split(';')
-    .map((declaration) => declaration.trim())
-    .filter(Boolean)
-    .map((declaration) => {
-      const colon = declaration.indexOf(':');
-      if (colon === -1) return null;
-      const property = declaration.slice(0, colon).trim().toLowerCase();
-      const propertyValue = declaration.slice(colon + 1).trim();
-      if (!ALLOWED_STYLE_PROPERTIES.has(property)) return null;
-      if (/url\(|expression\(|javascript:|\\/i.test(propertyValue)) return null;
-      return `${property}: ${propertyValue}`;
-    })
-    .filter((declaration): declaration is string => declaration !== null)
-    .join('; ');
-
-const openingTag = (name: string, raw: string): string => {
-  const attributes = readAttributes(raw);
-  const kept: string[] = [];
-
-  if (name === 'a') {
-    const href = attributes.href?.trim() ?? '';
-    if (href && SAFE_HREF.test(href)) {
-      kept.push(`href="${escapeAttribute(href)}"`);
-      if (attributes.target === '_blank') {
-        kept.push('target="_blank"', 'rel="noopener noreferrer"');
-      }
-    }
-  }
-
-  const style = attributes.style ? safeStyle(attributes.style) : '';
-  if (style) kept.push(`style="${escapeAttribute(style)}"`);
-
-  const suffix = kept.length ? ` ${kept.join(' ')}` : '';
-  return VOID_TAGS.has(name) ? `<${name}${suffix} />` : `<${name}${suffix}>`;
-};
-
-/**
- * One tag, read the way the HTML tokenizer reads it: the name runs up to
- * whitespace, `/` or `>` (so `x_y`, `svg/onload` and friends are names, not
- * text), attribute values may be quoted and may hold `>`, and the tag closes
- * at the first unquoted `>`.
- *
- * `null` when the input ends inside the tag. The browser would keep reading
- * into whatever markup follows — on the server that is React's own closing
- * tag — so an unfinished tag is never passed on; the caller escapes its `<`.
- */
-interface TagToken {
-  name: string;
-  attributes: string;
-  closing: boolean;
-  end: number;
-}
-
-const isAsciiLetter = (char: string): boolean => /^[A-Za-z]$/.test(char);
-const endsTagName = (char: string): boolean => /^[\s/>]$/.test(char);
-
-const readTag = (html: string, start: number): TagToken | null => {
-  let index = start + 1;
-  const closing = html.charAt(index) === '/';
-  if (closing) index += 1;
-
-  if (!isAsciiLetter(html.charAt(index))) return null;
-  const nameStart = index;
-  while (index < html.length && !endsTagName(html.charAt(index))) index += 1;
-  const name = html.slice(nameStart, index).toLowerCase();
-
-  const attributesStart = index;
-  let quote: string | null = null;
-  while (index < html.length) {
-    const char = html.charAt(index);
-    if (quote) {
-      if (char === quote) quote = null;
-    } else if (char === '"' || char === "'") {
-      quote = char;
-    } else if (char === '>') {
-      return {
-        name,
-        attributes: html.slice(attributesStart, index),
-        closing,
-        end: index + 1
-      };
-    }
-    index += 1;
-  }
-
-  return null;
-};
-
-/**
- * The output holds no `<` this function did not write itself: every `<` in
- * the input either becomes a rebuilt, allowlisted tag with escaped attribute
- * values, or `&lt;`. Comments are dropped, the content of script-like
- * elements with them. Text and entities are otherwise left as written, so the
- * editor's `&nbsp;` and the message placeholders survive.
- */
-export const sanitizeRichText = (html: string): string => {
-  if (!html) return '';
-
-  const output: string[] = [];
-  let dropUntil: string | null = null;
-  let position = 0;
-
-  const emit = (text: string) => {
-    if (!dropUntil && text) output.push(text);
-  };
-
-  while (position < html.length) {
-    const lt = html.indexOf('<', position);
-    if (lt === -1) {
-      emit(html.slice(position));
-      break;
-    }
-    emit(html.slice(position, lt));
-
-    if (html.startsWith('<!--', lt)) {
-      const end = html.indexOf('-->', lt + 2);
-      position = end === -1 ? html.length : end + 3;
-      continue;
-    }
-
-    const tag = readTag(html, lt);
-    if (!tag) {
-      emit('&lt;');
-      position = lt + 1;
-      continue;
-    }
-    position = tag.end;
-
-    if (dropUntil) {
-      if (tag.closing && tag.name === dropUntil) dropUntil = null;
-    } else if (DROPPED_WITH_CONTENT.has(tag.name)) {
-      if (!tag.closing) dropUntil = tag.name;
-    } else if (ALLOWED_TAGS.has(tag.name)) {
-      output.push(
-        tag.closing
-          ? VOID_TAGS.has(tag.name)
-            ? ''
-            : `</${tag.name}>`
-          : openingTag(tag.name, tag.attributes)
-      );
-    }
-  }
-
-  return output.join('');
-};