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

package/src/utils/iterator-utils.ts

@@ -1,6 +1,22 @@
 // Type-only: the CSS generator imports the binding-token guard from here, and
 // a value import of the block module would close that loop at runtime.
 import type { Block } from '../theme-block';
+import {
+  publishesProductRows,
+  resolveCollectionRowProduct
+} from '../blocks/item-template-utils';
+import type {
+  MoneyCurrencyDisplay,
+  MoneyCurrencyPosition,
+  MoneyDecimals,
+  MoneyStyleOptions
+} from '../blocks/commerce-format';
+import {
+  formatListingPrice,
+  normalizeListingProduct,
+  parseListingLookups,
+  type ListingValueLookups
+} from '../blocks/listing-row';
 import { devWarn } from './dev-warn';
 import { isMoneyPath } from './field-semantics';
 import { isVisibleForItem, readRowVisibility } from './row-visibility';
@@ -520,8 +536,58 @@ export const getPriceWithCurrency = (
   return `${amount} ${currencyLabel}`;
 };
 
+/**
+ * Which part of the row's price a text bound to a price path prints.
+ *
+ * `full` is what every published text prints: the list price struck through
+ * when there is a discount, then the current price, as one value. A card that
+ * wants to colour the struck price on its own — the ask that named this — has
+ * to be able to put the two in two texts, so `current` and `retail` print one
+ * each and nothing when that figure is absent or zero.
+ */
+export type PricePart = 'full' | 'current' | 'retail';
+
+const PRICE_PARTS: PricePart[] = ['full', 'current', 'retail'];
+
+/**
+ * How a row's money is written. `money` is the brand's format as the product
+ * grid reads it off its own properties; absent, a bound price prints the way
+ * it always has (`getPriceWithCurrency`, "3.499 TL").
+ */
+export interface RowMoneyFormat {
+  money?: MoneyStyleOptions;
+  locale?: string;
+}
+
+/** A property as the editor stores it: a scalar or a per-breakpoint object. */
+const readDesktopProperty = (value: unknown): unknown => {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+    return value;
+  }
+  const record = value as Record<string, unknown>;
+  return record.desktop ?? record.mobile;
+};
+
+export const readPricePart = (block: Block): PricePart => {
+  const raw = String(readDesktopProperty(block.properties?.pricePart) ?? '')
+    .trim()
+    .toLowerCase();
+  return (PRICE_PARTS as string[]).includes(raw) ? (raw as PricePart) : 'full';
+};
+
+const formatRowPrice = (
+  raw: unknown,
+  currency: unknown,
+  format?: RowMoneyFormat
+): string =>
+  format?.money
+    ? formatListingPrice(raw, String(currency ?? ''), format.locale, format.money)
+    : getPriceWithCurrency(raw, currency);
+
 const buildProductPriceHtml = (
-  productData: Record<string, unknown>
+  productData: Record<string, unknown>,
+  part: PricePart = 'full',
+  format?: RowMoneyFormat
 ): string => {
   const activePrice =
     ((productData as any)?.active_price as
@@ -538,8 +604,19 @@ const buildProductPriceHtml = (
   const currentNumeric = parsePriceValue(currentRaw);
   const retailNumeric = parsePriceValue(retailRaw);
 
-  const currentText = escapeHtml(getPriceWithCurrency(currentRaw, currency));
-  const retailText = escapeHtml(getPriceWithCurrency(retailRaw, currency));
+  if (part === 'current') {
+    return currentNumeric > 0
+      ? escapeHtml(formatRowPrice(currentRaw, currency, format))
+      : '';
+  }
+  if (part === 'retail') {
+    return retailNumeric > 0
+      ? escapeHtml(formatRowPrice(retailRaw, currency, format))
+      : '';
+  }
+
+  const currentText = escapeHtml(formatRowPrice(currentRaw, currency, format));
+  const retailText = escapeHtml(formatRowPrice(retailRaw, currency, format));
 
   if (retailNumeric > 0 && retailNumeric > currentNumeric) {
     return `<span style="display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;"><span style='color:#6b7280;text-decoration:line-through;font-weight:400;'>${retailText}</span><span style='font-weight:600;'>${currentText}</span></span>`;
@@ -605,7 +682,8 @@ const applyResolvedBinding = (
   block: Block,
   resolvedValue: unknown,
   bindingPath: string,
-  moneyCurrency?: string
+  moneyCurrency?: string,
+  rowFormat?: RowMoneyFormat
 ): Block => {
   const target = getItemBindingTarget(block);
   const nextBlock: Block = {
@@ -620,7 +698,11 @@ const applyResolvedBinding = (
     isPriceBinding(bindingPath) &&
     isRecord(resolvedValue)
   ) {
-    nextBlock.value = buildProductPriceHtml(resolvedValue);
+    nextBlock.value = buildProductPriceHtml(
+      resolvedValue,
+      readPricePart(block),
+      rowFormat
+    );
     return nextBlock;
   }
 
@@ -1129,7 +1211,9 @@ const replaceBlockValues = (
    * swatch. A visibility rule is worse still: `hidden` is only ever set, never
    * taken back, so one outer row decides every entry at once.
    */
-  insideNestedRepeat = false
+  insideNestedRepeat = false,
+  /** The row's money format, from the template this row was built from. */
+  rowFormat?: RowMoneyFormat
 ): Block => {
   const nextBlock: Block = {
     ...blockToReplace,
@@ -1241,13 +1325,20 @@ const replaceBlockValues = (
 
       if (interpolated !== undefined) {
         return {
-          ...applyResolvedBinding(nextBlock, interpolated, bindingPath),
+          ...applyResolvedBinding(
+            nextBlock,
+            interpolated,
+            bindingPath,
+            undefined,
+            rowFormat
+          ),
           blocks: nextBlock.blocks?.map((childBlock) =>
             replaceBlockValues(
               childBlock,
               itemData,
               itemIndex,
-              childInsideNestedRepeat
+              childInsideNestedRepeat,
+              rowFormat
             )
           )
         };
@@ -1256,29 +1347,46 @@ const replaceBlockValues = (
       const itemBindingPath = stripItemPrefix(bindingPath);
       const resolvedValue = getValueAtPath(itemData, itemBindingPath);
 
-      if (resolvedValue !== undefined) {
-        if (
-          nextBlock.type === 'text' &&
-          bindingPath.startsWith('item.') &&
-          isPriceBinding(bindingPath) &&
-          // A price is read off the whole row (list price, currency, discount),
-          // so a row that is a plain value cannot answer one.
-          isRecord(itemData)
-        ) {
-          nextBlock.value = buildProductPriceHtml(itemData);
-        } else {
-          return {
-            ...applyResolvedBinding(nextBlock, resolvedValue, bindingPath),
-            blocks: nextBlock.blocks?.map((childBlock) =>
-              replaceBlockValues(
-                childBlock,
-                itemData,
-                itemIndex,
-                childInsideNestedRepeat
-              )
+      // A price is read off the whole row (list price, currency, discount), so
+      // a row that is a plain value cannot answer one — and the row is asked
+      // even when the bound path itself is absent. Omnitron's collection rows
+      // (what the editor previews) carry the money under `active_price`, the
+      // commerce rows the storefront fetches carry it flat; `readProductPricePair`
+      // reads both, but it used to be reached only when `item.price` resolved
+      // on its own, so a card bound to `item.price` previewed without prices.
+      const answersPrice =
+        nextBlock.type === 'text' &&
+        bindingPath.startsWith('item.') &&
+        isPriceBinding(bindingPath) &&
+        isRecord(itemData) &&
+        (resolvedValue !== undefined ||
+          readProductPricePair(itemData).current > 0);
+
+      if (answersPrice) {
+        nextBlock.value = buildProductPriceHtml(
+          itemData,
+          readPricePart(nextBlock),
+          rowFormat
+        );
+      } else if (resolvedValue !== undefined) {
+        return {
+          ...applyResolvedBinding(
+            nextBlock,
+            resolvedValue,
+            bindingPath,
+            undefined,
+            rowFormat
+          ),
+          blocks: nextBlock.blocks?.map((childBlock) =>
+            replaceBlockValues(
+              childBlock,
+              itemData,
+              itemIndex,
+              childInsideNestedRepeat,
+              rowFormat
             )
-          };
-        }
+          )
+        };
       }
     }
   } else if (isPlaceholderMode && nextBlock.type === 'image') {
@@ -1306,7 +1414,8 @@ const replaceBlockValues = (
         childBlock,
         itemData,
         itemIndex,
-        childInsideNestedRepeat
+        childInsideNestedRepeat,
+        rowFormat
       )
     );
   }
@@ -1314,6 +1423,191 @@ const replaceBlockValues = (
   return nextBlock;
 };
 
+const MONEY_DECIMALS: MoneyDecimals[] = ['always', 'auto', 'never'];
+const MONEY_DISPLAYS: MoneyCurrencyDisplay[] = [
+  '',
+  'symbol',
+  'code',
+  'custom',
+  'none'
+];
+const MONEY_POSITIONS: MoneyCurrencyPosition[] = ['', 'before', 'after'];
+
+const readTemplateText = (template: Block, key: string): string => {
+  const raw = readDesktopProperty(template.properties?.[key]);
+  return typeof raw === 'string' ? raw : '';
+};
+
+const pickOption = <T extends string>(raw: string, allowed: T[]): T | undefined =>
+  (allowed as string[]).includes(raw) ? (raw as T) : undefined;
+
+/**
+ * The money format authored on a repeated row's template — the same four
+ * properties the product grid and the PDP price block carry. Nothing authored
+ * means no `money`, and every price on the row prints as it always has.
+ */
+export const readRowMoneyFormat = (template: Block): RowMoneyFormat => {
+  const decimals = pickOption(
+    readTemplateText(template, 'decimals').trim(),
+    MONEY_DECIMALS
+  );
+  const currencyDisplay = pickOption(
+    readTemplateText(template, 'currencyDisplay').trim(),
+    MONEY_DISPLAYS
+  );
+  const currencyPosition = pickOption(
+    readTemplateText(template, 'currencyPosition').trim(),
+    MONEY_POSITIONS
+  );
+  const currencyText = readTemplateText(template, 'currencyText').trim();
+
+  const authored =
+    decimals !== undefined ||
+    (currencyDisplay !== undefined && currencyDisplay !== '') ||
+    (currencyPosition !== undefined && currencyPosition !== '') ||
+    currencyText !== '';
+
+  return {
+    locale: bindingLocale,
+    ...(authored
+      ? {
+          money: {
+            ...(decimals ? { decimals } : {}),
+            ...(currencyDisplay ? { currencyDisplay } : {}),
+            ...(currencyText ? { currencyText } : {}),
+            ...(currencyPosition ? { currencyPosition } : {})
+          }
+        }
+      : {})
+  };
+};
+
+/** The badge and swatch tables authored on the template, as the grid's. */
+export const readRowLookups = (
+  template: Block
+): ListingValueLookups | undefined =>
+  parseListingLookups(
+    readTemplateText(template, 'badgeAttribute').trim(),
+    readTemplateText(template, 'badgeMap'),
+    readTemplateText(template, 'swatchMap')
+  );
+
+/**
+ * A collection row published in the listing row's shape as well as its own.
+ *
+ * The editor previews a collection with Omnitron item rows (money under
+ * `active_price`, no `absolute_url`); the storefront fetches commerce rows
+ * (money flat). Neither carries what a card designed against a product-grid
+ * row binds: `url`, `image`, `retailPrice`, `hasDiscount`, `discountPercent`,
+ * `inStock`, `attributes` keyed, `colors[]`, `badge`. The listing normaliser
+ * derives all of those from either shape once the money is flat, so the row is
+ * flattened, normalised, and the normalised fields are added where the row had
+ * none. Nothing the row already carried is replaced — `item.price` still reads
+ * the raw figure the price pair is built from, and every binding a published
+ * collection section has resolves exactly as before.
+ *
+ * Without an authored money format the normaliser would print the list price
+ * in the locale's own form ("₺3.999,00") beside a current price the pair
+ * prints as "3.499 TL"; the list price is therefore written the way the pair
+ * writes it, so the two halves of one card agree.
+ */
+export const normalizeCollectionRow = (
+  item: Record<string, unknown>,
+  index: number,
+  options: { lookups?: ListingValueLookups; format?: RowMoneyFormat } = {}
+): Record<string, unknown> => {
+  if (!isRecord(item) || Object.keys(item).length === 0) return item;
+
+  const activePrice = isRecord(item.active_price) ? item.active_price : null;
+  const flat: Record<string, unknown> = { ...item };
+  if (activePrice) {
+    if (flat.price === undefined) flat.price = activePrice.price;
+    if (flat.retail_price === undefined) {
+      flat.retail_price = activePrice.retail_price;
+    }
+    if (flat.currency_type === undefined && flat.currency === undefined) {
+      flat.currency_type = activePrice.currency_type;
+    }
+  }
+
+  const currency = readProductCurrency(flat);
+  const normalized = normalizeListingProduct(flat, index, {
+    currency: typeof currency === 'string' ? currency : undefined,
+    locale: options.format?.locale,
+    money: options.format?.money,
+    lookups: options.lookups
+  });
+  if (!normalized) return flat;
+
+  // Only fields the row lacks, and only fields that say something: the
+  // normaliser answers a missing figure with '' (a formatted nothing), and
+  // writing that onto the row would turn "no price" into a price of nothing —
+  // the pair reader prints "0 TL" for an empty string it is handed.
+  const row: Record<string, unknown> = { ...flat };
+  for (const [key, value] of Object.entries(normalized)) {
+    if (value !== undefined && value !== '' && row[key] === undefined) {
+      row[key] = value;
+    }
+  }
+
+  // The listing normaliser reads `image` off the page-context row, which has
+  // already been flattened; a raw row keeps its pictures in `productimage_set`,
+  // which the normaliser publishes as `images` — so the first of those is the
+  // picture, the way the page context would have made it.
+  if (
+    (row.image === undefined || row.image === '') &&
+    Array.isArray(normalized.images) &&
+    typeof normalized.images[0] === 'string'
+  ) {
+    row.image = normalized.images[0];
+  }
+
+  if (!options.format?.money) {
+    row.retailPrice =
+      parsePriceValue(flat.retail_price) > 0
+        ? getPriceWithCurrency(flat.retail_price, currency)
+        : '';
+    if (normalized.previousPrice !== undefined) {
+      const previous = isRecord(flat.price_extra_field)
+        ? flat.price_extra_field.previous_price
+        : undefined;
+      row.previousPrice = getPriceWithCurrency(previous, currency);
+    }
+  }
+
+  return row;
+};
+
+/**
+ * Expands the repeats INSIDE an already-built row.
+ *
+ * A functional list (the product grid's ItemTemplateList) expands its row
+ * template itself and renders the clones; the section renderer's walk, which
+ * expands a nested repeat after the repeat around it, never sees them. So a
+ * colour-swatch strip inside a grid card was handed its colours
+ * (`iteratorScopedItems`) and then drawn unexpanded. Each clone is walked here
+ * the way the section walks its own: a nested repeat expands against the list
+ * its row handed it, and its children are walked in turn.
+ */
+export const expandNestedIterators = (
+  block: Block,
+  options: { isDesigner?: boolean } = {}
+): Block => {
+  if (!block.blocks || block.blocks.length === 0) return block;
+
+  let changed = false;
+  const blocks = block.blocks.map((child) => {
+    const expanded = child.isIterator
+      ? buildIteratorBlock({ iteratorBlock: child, isDesigner: options.isDesigner })
+      : child;
+    const deep = expandNestedIterators(expanded, options);
+    if (deep !== child) changed = true;
+    return deep;
+  });
+
+  return changed ? { ...block, blocks } : block;
+};
+
 export const buildIteratorBlock = ({
   iteratorBlock,
   sectionDataSource,
@@ -1363,18 +1657,51 @@ export const buildIteratorBlock = ({
   // its row's list is neither: the row has already answered, and an empty
   // answer means this product has no colours — one empty swatch next to
   // products that do have colours reads as a colour the shopper can pick.
+  //
+  // Except on the canvas. The editor previews a collection with Omnitron's
+  // item rows, which carry no colour variants at all, so a swatch strip in
+  // that card answered "no colours" for every product and the designer had
+  // nothing to arrange or hover — the strip looked broken rather than empty.
+  // The canvas draws the count floor there too; the storefront still draws
+  // nothing for a product without colours.
   const actualCount =
     displayItems.length > 0
       ? displayItems.length
-      : scopedItems
+      : scopedItems && !isDesigner
         ? 0
         : Math.max(iteratorCount, 1);
 
+  // Only a repeat that read its rows off a collection publishes them as
+  // products; a caller that brought its own items (a product grid's
+  // ItemTemplateList) opens the scope itself and must not get a second one.
+  // …and not a repeat INSIDE a row: a swatch strip handed its product's
+  // colours draws colours, whatever the section's source publishes.
+  const scopesProducts =
+    providedItems === undefined &&
+    scopedItems === null &&
+    publishesProductRows(sectionDataSource);
+  // The card's own money format and lookup tables, read off the template the
+  // way the product grid reads them off itself — so a card that repeats over
+  // a collection prints "3.499,00 TL" and fills `item.badge` / `item.colors[]`
+  // exactly as the same card does inside a grid.
+  const rowFormat = scopesProducts ? readRowMoneyFormat(template) : undefined;
+  const rowLookups = scopesProducts ? readRowLookups(template) : undefined;
+
   const clonedBlocks = Array.from({ length: actualCount }, (_, index) => {
     // `??`, not `||`: an entry of a list of plain values can be falsy (0, '')
     // and is still the row, while a missing entry is the placeholder padding
     // the count floor asked for.
-    const item = displayItems[index] ?? {};
+    const rawItem = displayItems[index] ?? {};
+    // A collection row is a commerce product: it is published in the listing
+    // row's shape too (`item.url`, `item.retailPrice`, `item.hasDiscount`,
+    // `item.colors`…), on top of its own fields, so one card design binds over
+    // a grid row and a collection row alike. See normalizeCollectionRow.
+    const item = scopesProducts
+      ? normalizeCollectionRow(rawItem as Record<string, unknown>, index, {
+          lookups: rowLookups,
+          format: rowFormat
+        })
+      : rawItem;
 
     const templateCopy: Block = {
       ...template,
@@ -1393,10 +1720,19 @@ export const buildIteratorBlock = ({
         : template.properties,
       blocks: template.blocks
         ? template.blocks.map((childBlock) => ({ ...childBlock }))
-        : undefined
+        : undefined,
+      // Carried on the clone, read by ThemeBlock, which opens the product
+      // scope around it — see `Block.itemScopeProduct`.
+      ...(scopesProducts
+        ? {
+            itemScopeProduct: resolveCollectionRowProduct(
+              rawItem as Record<string, unknown>
+            )
+          }
+        : {})
     };
 
-    return replaceBlockValues(templateCopy, item, index);
+    return replaceBlockValues(templateCopy, item, index, false, rowFormat);
   });
 
   const nextProperties = forgetScopedItems(iteratorBlock.properties);