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

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

@@ -0,0 +1,465 @@
+import { buildIteratorBlock, expandNestedIterators } from './iterator-utils';
+import type { Block } from '../theme-block';
+
+/**
+ * ZERO-4829 — the editor previews a collection with Omnitron's item rows,
+ * whose money sits under `active_price`; the storefront fetches commerce rows
+ * with `price` flat. A card bound to `item.price` previewed with EMPTY prices,
+ * because the price branch was reached only when the bound path itself
+ * resolved — the pair reader that handles both shapes never got asked.
+ */
+const priceText = (): Block => ({
+  id: 'price',
+  type: 'text',
+  label: 'Price',
+  value: '',
+  properties: { tag: 'p', dataBinding: 'item.price' },
+  styles: {},
+  blocks: []
+});
+
+const iterator = (): Block => ({
+  id: 'it',
+  type: 'group',
+  label: 'Iterator',
+  isIterator: true,
+  properties: { tag: 'div', iteratorDataPath: 'products', iteratorCount: 2 },
+  styles: {},
+  blocks: [
+    {
+      id: 'card',
+      type: 'group',
+      label: 'Card',
+      properties: { tag: 'div' },
+      styles: {},
+      blocks: [priceText()]
+    }
+  ]
+});
+
+const source = (products: Record<string, unknown>[]) => ({
+  id: 'ds',
+  name: 'c',
+  type: 'collection',
+  details: { collection: { pk: 1, productLimit: 2, products } }
+});
+
+const priceValueOf = (expanded: Block, index: number): string =>
+  String(expanded.blocks?.[index]?.blocks?.[0]?.value ?? '');
+
+describe('a price binding on a collection row', () => {
+  it('answers from `active_price` when the row carries no flat price (editor preview rows)', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: iterator(),
+      sectionDataSource: source([
+        {
+          pk: 1,
+          name: 'A',
+          active_price: {
+            price: '3499.00',
+            retail_price: '0.00',
+            currency_type: 'try'
+          }
+        },
+        {
+          pk: 2,
+          name: 'B',
+          active_price: {
+            price: '2999.00',
+            retail_price: '3999.00',
+            currency_type: 'try'
+          }
+        }
+      ]),
+      pageContext: null
+    } as never);
+
+    expect(priceValueOf(expanded, 0)).toBe('3.499 TL');
+    // A discount strikes the list price into the same text.
+    expect(priceValueOf(expanded, 1)).toContain('line-through');
+    expect(priceValueOf(expanded, 1)).toContain('3.999 TL');
+    expect(priceValueOf(expanded, 1)).toContain('2.999 TL');
+  });
+
+  it('still answers from the flat fields the storefront rows carry', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: iterator(),
+      sectionDataSource: source([
+        {
+          pk: 1,
+          name: 'A',
+          price: '3499.00',
+          retail_price: '',
+          currency_type: 'try'
+        }
+      ]),
+      pageContext: null
+    } as never);
+
+    expect(priceValueOf(expanded, 0)).toBe('3.499 TL');
+  });
+
+  it('leaves the text empty when the row has no price in either shape', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: iterator(),
+      sectionDataSource: source([{ pk: 1, name: 'A' }]),
+      pageContext: null
+    } as never);
+
+    expect(priceValueOf(expanded, 0)).toBe('');
+  });
+});
+
+/**
+ * The Product Card puts the list price and the current price in two texts so
+ * each can carry its own colour; a text bound to a price path therefore says
+ * which PART of the price it prints. And a collection row is published in the
+ * listing row's shape on top of its own, so the same card binds `item.url`,
+ * `item.retailPrice`, `item.hasDiscount`, `item.attributes`, `item.colors`
+ * over a grid row and a collection row alike.
+ */
+const text = (
+  id: string,
+  properties: Record<string, unknown>,
+  styles: Record<string, unknown> = {}
+): Block => ({
+  id,
+  type: 'text',
+  label: id,
+  value: '',
+  properties: { tag: 'p', ...properties },
+  styles,
+  blocks: []
+});
+
+const cardIterator = (
+  rootProperties: Record<string, unknown>,
+  children: Block[]
+): Block => ({
+  id: 'it',
+  type: 'group',
+  label: 'Iterator',
+  isIterator: true,
+  properties: { tag: 'div', iteratorDataPath: 'products', iteratorCount: 2 },
+  styles: {},
+  blocks: [
+    {
+      id: 'card',
+      type: 'group',
+      label: 'Card',
+      properties: { tag: 'div', ...rootProperties },
+      styles: {},
+      blocks: children
+    }
+  ]
+});
+
+const valuesOf = (expanded: Block, index: number): Record<string, unknown> =>
+  Object.fromEntries(
+    (expanded.blocks?.[index]?.blocks || []).map((child) => [
+      child.id,
+      child.value
+    ])
+  );
+
+const omnitronRow = (pk: number, price: string, retail: string) => ({
+  pk,
+  name: `Product ${pk}`,
+  productimage_set: [{ image: `/img-${pk}.jpg` }],
+  attributes: { badge2: pk === 1 ? 'YENİ SEZON' : '', integration_renk: '457' },
+  extra_data: {
+    variants: [
+      {
+        attribute_key: 'integration_renk',
+        options: [
+          {
+            label: '457',
+            is_selectable: true,
+            product: { pk, absolute_url: `/p-${pk}/` }
+          },
+          {
+            label: '200',
+            is_selectable: true,
+            product: { pk: pk + 10, absolute_url: `/p-${pk + 10}/` }
+          }
+        ]
+      }
+    ]
+  },
+  active_price: { price, retail_price: retail, currency_type: 'try' }
+});
+
+describe('pricePart on a text bound to a price path', () => {
+  const children = [
+    text('full', { dataBinding: 'item.price' }),
+    text('current', { dataBinding: 'item.price', pricePart: 'current' }),
+    text('retail', { dataBinding: 'item.price', pricePart: 'retail' }),
+    text('retailOnRetailPath', {
+      dataBinding: 'item.active_price.retail_price',
+      pricePart: { desktop: 'retail' }
+    })
+  ];
+
+  it('prints one part each, and nothing for a figure the row does not have', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: cardIterator({}, children),
+      sectionDataSource: source([
+        omnitronRow(1, '2999.00', '3999.00'),
+        omnitronRow(2, '3499.00', '0.00')
+      ]),
+      pageContext: null
+    } as never);
+
+    const discounted = valuesOf(expanded, 0);
+    expect(discounted.full).toContain('line-through');
+    expect(discounted.current).toBe('2.999 TL');
+    expect(discounted.retail).toBe('3.999 TL');
+    expect(discounted.retailOnRetailPath).toBe('3.999 TL');
+
+    const plain = valuesOf(expanded, 1);
+    expect(plain.full).toBe('3.499 TL');
+    expect(plain.current).toBe('3.499 TL');
+    expect(plain.retail).toBe('');
+  });
+
+  it('formats every part with the money format authored on the card root', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: cardIterator(
+        {
+          decimals: { desktop: 'always' },
+          currencyDisplay: { desktop: 'custom' },
+          currencyText: { desktop: 'TL' },
+          currencyPosition: { desktop: 'after' }
+        },
+        [...children, text('list', { dataBinding: 'item.retailPrice' })]
+      ),
+      sectionDataSource: source([omnitronRow(1, '2999.00', '3999.00')]),
+      pageContext: null
+    } as never);
+
+    const values = valuesOf(expanded, 0);
+    expect(values.current).toBe('2.999,00 TL');
+    expect(values.retail).toBe('3.999,00 TL');
+    expect(values.list).toBe('3.999,00 TL');
+    expect(values.full).toContain('3.999,00 TL');
+    expect(values.full).toContain('2.999,00 TL');
+  });
+});
+
+describe('a collection row published in the listing row shape', () => {
+  const children = [
+    text('url', { dataBinding: 'item.url' }),
+    text('image', { dataBinding: 'item.image' }),
+    text('list', { dataBinding: 'item.retailPrice' }),
+    text('percent', { dataBinding: '-%{{item.discountPercent}}' }),
+    text('badge', { dataBinding: 'item.attributes.badge2' }),
+    text('colours', { dataBinding: '{{item.colorCount}} colours' }),
+    text('firstSwatch', { dataBinding: 'item.colors[1].url' }),
+    text('struck', {
+      dataBinding: 'item.retailPrice',
+      visibleWhenField: 'item.hasDiscount',
+      visibleWhenMode: 'truthy'
+    })
+  ];
+
+  it('derives url, image, list price, discount, attributes and colours from an Omnitron row', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: cardIterator({}, children),
+      sectionDataSource: source([
+        omnitronRow(1, '2999.00', '3999.00'),
+        omnitronRow(2, '3499.00', '0.00')
+      ]),
+      pageContext: null
+    } as never);
+
+    const discounted = valuesOf(expanded, 0);
+    // An Omnitron item row carries no product URL of its own; the link falls
+    // back to '#' the way a listing row without one does.
+    expect(discounted.url).toBe('#');
+    expect(discounted.image).toBe('/img-1.jpg');
+    expect(discounted.list).toBe('3.999 TL');
+    expect(discounted.percent).toBe('-%25');
+    expect(discounted.badge).toBe('YENİ SEZON');
+    expect(discounted.colours).toBe('2 colours');
+    expect(discounted.firstSwatch).toBe('/p-11/');
+
+    const struck = expanded.blocks?.map((clone) =>
+      clone.blocks?.find((child) => child.id === 'struck')?.hidden
+    );
+    // Row visibility reads the derived flag: struck on the discounted row only.
+    expect(struck).toEqual([undefined, true]);
+    expect(valuesOf(expanded, 1).list).toBe('');
+  });
+
+  it('derives the url and the flat money from a commerce row (what the storefront fetches)', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: cardIterator({}, [
+        text('url', { dataBinding: 'item.url' }),
+        text('list', { dataBinding: 'item.retailPrice' }),
+        text('current', { dataBinding: 'item.price', pricePart: 'current' }),
+        text('flag', { dataBinding: '{{item.hasDiscount}}' })
+      ]),
+      sectionDataSource: source([
+        {
+          pk: 3,
+          name: 'C',
+          absolute_url: '/p-3/',
+          price: '2999.00',
+          retail_price: '3999.00',
+          currency_type: 'try'
+        }
+      ]),
+      pageContext: null
+    } as never);
+
+    expect(valuesOf(expanded, 0)).toEqual({
+      url: '/p-3/',
+      list: '3.999 TL',
+      current: '2.999 TL',
+      flag: 'true'
+    });
+  });
+
+  it('fills swatch colours from a table authored on the card root', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: cardIterator({ swatchMap: '457|#2d5da1\n200|#d9c8a9' }, [
+        text('hex', { dataBinding: 'item.colors[1].color' })
+      ]),
+      sectionDataSource: source([omnitronRow(1, '2999.00', '3999.00')]),
+      pageContext: null
+    } as never);
+
+    expect(valuesOf(expanded, 0).hex).toBe('#d9c8a9');
+  });
+
+  it('never replaces a field the row already carries', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: cardIterator({}, [
+        text('name', { dataBinding: 'item.name' }),
+        text('url', { dataBinding: 'item.url' })
+      ]),
+      sectionDataSource: source([
+        { ...omnitronRow(1, '2999.00', ''), url: '/custom/', absolute_url: '/x/' }
+      ]),
+      pageContext: null
+    } as never);
+
+    expect(valuesOf(expanded, 0)).toEqual({ name: 'Product 1', url: '/custom/' });
+  });
+
+  it('leaves the scope product as the raw row', () => {
+    const expanded = buildIteratorBlock({
+      iteratorBlock: cardIterator({}, [text('name', { dataBinding: 'item.name' })]),
+      sectionDataSource: source([omnitronRow(7, '2999.00', '')]),
+      pageContext: null
+    } as never);
+
+    expect(expanded.blocks?.[0]?.itemScopeProduct).toMatchObject({ pk: 7 });
+    expect('retailPrice' in (expanded.blocks?.[0]?.itemScopeProduct || {})).toBe(
+      false
+    );
+  });
+});
+
+describe('a repeat inside a collection row', () => {
+  const strip = (): Block => ({
+    id: 'strip',
+    type: 'group',
+    label: 'Swatches',
+    isIterator: true,
+    properties: {
+      tag: 'div',
+      iteratorDataPath: 'item.colors',
+      useIteratorCount: true,
+      iteratorCount: 3
+    },
+    styles: {},
+    blocks: [
+      {
+        id: 'chip',
+        type: 'group',
+        label: 'Chip',
+        properties: {
+          tag: 'a',
+          dataBinding: 'item.url',
+          dataBindingTarget: 'href'
+        },
+        styles: {
+          'background-image': {
+            desktop: 'linear-gradient({{item.color}}, {{item.color}})'
+          }
+        },
+        blocks: []
+      }
+    ]
+  });
+
+  it('draws its product colours — capped by its count — and never treats them as products', () => {
+    const outer = buildIteratorBlock({
+      iteratorBlock: cardIterator({ swatchMap: '457|#2d5da1\n200|#d9c8a9' }, [
+        strip()
+      ]),
+      sectionDataSource: source([omnitronRow(1, '2999.00', '3999.00')]),
+      pageContext: null
+    } as never);
+
+    const card = expandNestedIterators(outer.blocks?.[0] as Block);
+    const chips = card.blocks?.[0]?.blocks || [];
+
+    expect(chips).toHaveLength(2);
+    expect(chips.map((chip) => chip.properties?.href)).toEqual(['/p-1/', '/p-11/']);
+    expect(chips.map((chip) => chip.styles?.['background-image']?.desktop)).toEqual([
+      'linear-gradient(#2d5da1, #2d5da1)',
+      'linear-gradient(#d9c8a9, #d9c8a9)'
+    ]);
+    // The colours are not products: no scope is opened around a chip.
+    for (const chip of chips) expect('itemScopeProduct' in chip).toBe(false);
+    expect(card.blocks?.[0]?.properties).not.toHaveProperty('iteratorScopedItems');
+  });
+
+  it('on the canvas, a product without colours still gets the count floor to arrange', () => {
+    const outer = buildIteratorBlock({
+      iteratorBlock: cardIterator({}, [strip()]),
+      sectionDataSource: source([{ ...omnitronRow(1, '2999.00', ''), extra_data: {} }]),
+      pageContext: null,
+      isDesigner: true
+    } as never);
+
+    const [clone] = (outer.blocks || []).map((c) => expandNestedIterators(c, { isDesigner: true }));
+    // Three placeholder chips (the strip's iteratorCount), none linking anywhere.
+    expect(clone.blocks?.[0]?.blocks).toHaveLength(3);
+    expect(clone.blocks?.[0]?.blocks?.every((chip) => !chip.properties?.href)).toBe(true);
+  });
+
+  it('draws nothing for a product without colours, and expands an already pre-expanded strip', () => {
+    const outer = buildIteratorBlock({
+      iteratorBlock: cardIterator({}, [
+        // What the section walk leaves behind when it met the strip before
+        // the row existed: one placeholder clone in place of the template.
+        {
+          ...strip(),
+          blocks: [
+            {
+              ...(strip().blocks as Block[])[0],
+              id: 'chip-clone-0',
+              styleSourceId: 'chip'
+            }
+          ]
+        }
+      ]),
+      sectionDataSource: source([
+        { ...omnitronRow(1, '2999.00', ''), extra_data: {} },
+        omnitronRow(2, '2999.00', '')
+      ]),
+      pageContext: null
+    } as never);
+
+    const [noColours, twoColours] = (outer.blocks || []).map((clone) =>
+      expandNestedIterators(clone)
+    );
+    expect(noColours.blocks?.[0]?.blocks).toHaveLength(0);
+    expect(
+      twoColours.blocks?.[0]?.blocks?.map((chip) => chip.styleSourceId)
+    ).toEqual(['chip', 'chip']);
+  });
+});