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

package/src/chrome/page-context.ts

@@ -324,6 +324,15 @@ export const buildBasketPageContext = ({
     basket: {
       id: basket?.pk || null,
       path: path || ROUTES.BASKET,
+      /**
+       * Commerce publishes a currency per line and none on the basket itself,
+       * so a bound total had nothing to format against. Lifted from the first
+       * line that carries one, which is the precedence the summary block uses.
+       */
+      currency:
+        normalizedItems.find(
+          item => typeof item.currency === 'string' && item.currency
+        )?.currency || '',
       checkoutUrl: ROUTES.CHECKOUT,
       continueShoppingUrl: ROUTES.HOME,
       isEmpty: normalizedItems.length === 0,
@@ -379,9 +388,170 @@ export const buildAccountPageContext = ({
         lastName,
         fullName,
         email,
-        phone: toStringValue(profileInfo?.phone),
-        gender: toStringValue(profileInfo?.gender)
+        phone:
+          toStringValue(profileInfo?.phone) ||
+          toStringValue(sessionUser?.phone),
+        gender:
+          toStringValue(profileInfo?.gender) ||
+          toStringValue(sessionUser?.gender)
       }
     }
   };
 };
+
+/**
+ * The shopper's own order, for the success page and the account order detail.
+ *
+ * Deliberately a projection rather than a spread: the raw payload carries
+ * `identity_number`, `tax_no`, `iban` and `remote_addr`, none of which belongs
+ * in a template a merchandiser edits. What is published here is what a receipt
+ * legitimately shows, and it only ever travels through a client provider —
+ * never as a server prop into a cacheable page.
+ */
+export const buildOrderPageContext = ({
+  order,
+  path,
+  pageType = 'order-success',
+  title = 'Order'
+}: {
+  order?: UnknownRecord | null;
+  path?: string;
+  pageType?: string;
+  title?: string;
+}) => {
+  const source = toRecord(order);
+  const currency = toStringValue(toRecord(source.currency).value);
+
+  const items = (Array.isArray(source.orderitem_set)
+    ? source.orderitem_set
+    : []
+  ).map(entry => {
+    const item = toRecord(entry);
+    const product = toRecord(item.product);
+
+    return {
+      ...item,
+      title: toStringValue(product.name),
+      name: toStringValue(product.name),
+      url: toStringValue(product.absolute_url),
+      image: toStringValue(product.image),
+      price: toStringValue(item.price),
+      unitPrice: toStringValue(item.price),
+      quantity: 1,
+      status: toStringValue(toRecord(item.status).label),
+      currency
+    };
+  });
+
+  const discounts = (Array.isArray(source.discountitem_set)
+    ? source.discountitem_set
+    : []
+  ).map(entry => {
+    const discount = toRecord(entry);
+    return {
+      name: toStringValue(discount.name),
+      amount: toStringValue(discount.amount),
+      currency
+    };
+  });
+
+  const shippingAddress = toRecord(source.shipping_address);
+  const orderNumber =
+    toStringValue(source.number) || (source.id ? `#${source.id}` : '');
+
+  return {
+    page: {
+      type: pageType,
+      title,
+      path: path || ''
+    },
+    order: {
+      id: source.id ?? null,
+      number: orderNumber,
+      status: toStringValue(toRecord(source.status).label),
+      createdDate: toStringValue(source.created_date),
+      currency,
+      totalAmount: toStringValue(source.amount),
+      shippingAmount: toStringValue(source.shipping_amount),
+      email: toStringValue(source.user_email),
+      itemCount: items.length,
+      items,
+      discounts,
+      shippingAddress: {
+        fullName: [
+          toStringValue(shippingAddress.first_name),
+          toStringValue(shippingAddress.last_name)
+        ]
+          .filter(Boolean)
+          .join(' '),
+        line: toStringValue(shippingAddress.line),
+        district: toStringValue(shippingAddress.district),
+        city: toStringValue(shippingAddress.city),
+        country: toStringValue(shippingAddress.country)
+      }
+    }
+  };
+};
+
+/**
+ * The checkout zones above and below the code-owned flow. The basket root is
+ * republished unchanged so a composition written for the basket page keeps
+ * working here, and `checkout-summary-block` already reads it.
+ */
+export const buildCheckoutPageContext = ({
+  basket,
+  preOrder,
+  path
+}: {
+  basket?: Basket | null;
+  preOrder?: UnknownRecord | null;
+  path?: string;
+}) => {
+  const basketContext = buildBasketPageContext({ basket });
+  const source = toRecord(preOrder);
+  const shippingOption = toRecord(source.shipping_option);
+  const currency =
+    toStringValue(toRecord(source.currency).value) ||
+    toStringValue(basketContext.basket.currency);
+
+  return {
+    ...basketContext,
+    page: {
+      type: 'checkout',
+      title: 'Checkout',
+      path: path || ROUTES.CHECKOUT
+    },
+    checkout: {
+      path: path || ROUTES.CHECKOUT,
+      currency,
+      totalAmount: toStringValue(source.amount),
+      shippingAmount: toStringValue(source.shipping_amount),
+      unpaidAmount: toStringValue(source.unpaid_amount),
+      shippingOption: toStringValue(shippingOption.name),
+      hasShippingOption: Boolean(shippingOption.pk),
+      stepCount: Number(source.step_count) || 0
+    }
+  };
+};
+
+/** A CMS flat page: no commerce entity, but a title and a slug to bind. */
+export const buildFlatPageContext = (flatPage?: UnknownRecord | null) => {
+  const source = toRecord(flatPage);
+  const title = toStringValue(source.title);
+  const slug = toStringValue(source.slug);
+
+  return {
+    page: {
+      type: 'flat-page',
+      title: title || 'Page',
+      slug,
+      path: toStringValue(source.absolute_url) || (slug ? `/${slug}` : '')
+    },
+    flatPage: {
+      title,
+      slug,
+      content: toStringValue(source.content),
+      url: toStringValue(source.absolute_url)
+    }
+  };
+};

package/src/index.ts

@@ -22,6 +22,25 @@ export type { Block } from './theme-block';
 
 export { default as ChromeSlot } from './chrome/chrome-slot';
 export { ChromeFallback } from './chrome/chrome-fallback';
+export { LiveBasketPageContext } from './chrome/live-basket-page-context';
+export {
+  LiveOrderSuccessPageContext,
+  LiveAccountOrderPageContext
+} from './chrome/live-order-page-context';
+export { LiveCheckoutPageContext } from './chrome/live-checkout-page-context';
+
+export {
+  buildProductPageContext,
+  buildListingPageContext,
+  buildBasketPageContext,
+  buildAccountPageContext,
+  buildHomepagePageContext,
+  buildCustomPageContext,
+  buildOrderPageContext,
+  buildCheckoutPageContext,
+  buildFlatPageContext,
+  configurePageContextRoutes
+} from './chrome/page-context';
 
 export {
   PLACEHOLDER_SLUGS,

package/src/theme-placeholder-client.tsx

@@ -182,6 +182,10 @@ export default function ThemePlaceholderClient({
             <ThemeSection
               section={section}
               placeholderId={placeholderSlug}
+              // Without this the client render path resolves no bindings at
+              // all: the context is read for visibility rules and then dropped
+              // before the section that needs it.
+              pageContext={pageContext}
               isDesigner={isDesigner}
               isSelected={selectedSectionId === section.id}
               selectedBlockId={selectedBlockId}

package/src/theme-placeholder-wrapper.tsx

@@ -377,6 +377,17 @@ export default function ThemePlaceholderWrapper({
   useEffect(() => {
     if (typeof window === 'undefined') return;
     if (window.self === window.top || !window.parent) return;
+    // Being framed is not the same as being edited: a storefront embedded by a
+    // payment provider would otherwise post sample values of the shopper's own
+    // page data to that embedder.
+    if (!isDesigner) return;
+    // A page carries several placeholders, and the editor keeps one field list.
+    // A slot with no context of its own (a header, a footer) used to overwrite
+    // the body's list with an empty one, so the designer's fields blinked out
+    // depending on which placeholder re-rendered last.
+    if (!resolvedPageContext || Object.keys(resolvedPageContext).length === 0) {
+      return;
+    }
 
     postToEditor({
       type: 'PAGE_CONTEXT_DISCOVERY',
@@ -384,7 +395,7 @@ export default function ThemePlaceholderWrapper({
         discovery: createPageContextDiscovery(resolvedPageContext)
       }
     });
-  }, [resolvedPageContext]);
+  }, [resolvedPageContext, isDesigner]);
 
   // Load fonts from initial sections on mount (for production site, not iframe)
   useEffect(() => {

package/src/theme-section.tsx

@@ -124,7 +124,7 @@ export default function ThemeSection({
   // React context to read. Publishing the storefront's locale before the
   // bindings resolve is what stops an en-GB brand rendering Turkish number
   // grouping in every repeated row.
-  const { locale } = useLocalization();
+  const { locale, currency: storefrontCurrency } = useLocalization();
   setBindingLocale(locale);
 
   useEffect(() => {
@@ -466,7 +466,11 @@ export default function ThemeSection({
 
   const shouldApplyGenericBindings =
     String(effectiveSection.type || '').toLowerCase() === 'custom' ||
-    effectiveSection.dataSource?.type === 'page-context';
+    effectiveSection.dataSource?.type === 'page-context' ||
+    // A page that publishes commerce data is itself a binding source, so a
+    // section sitting on one resolves its bindings without the designer
+    // creating a data source first.
+    Boolean(pageContext);
 
   if (CustomSectionRenderer) {
     return (
@@ -1009,7 +1013,8 @@ export default function ThemeSection({
                   block: resolvedBlock,
                   sectionDataSource: effectiveSection.dataSource,
                   pageContext,
-                  isDesigner
+                  isDesigner,
+                  currency: storefrontCurrency
                 })
               : resolvedBlock;
             const createActionHandler =

package/src/utils/__tests__/generator-passthrough.test.ts

@@ -0,0 +1,92 @@
+import { generateThemeCSS } from '../index';
+import type { Section } from '../../theme-section';
+
+/**
+ * The generator has no property whitelist: it kebab-cases whatever keys a
+ * composition carries and emits them. The editor's Advanced families rely on
+ * exactly that — 161 CSS properties are offered there with no renderer-side
+ * entry of any kind, so introducing a whitelist would silently kill every one
+ * of them, and nothing else in this package would notice.
+ *
+ * These are the properties that made the difference on real brand pages: the
+ * ogee section dividers (clip-path, the mask family), the italic serif copy
+ * (font-style), the overlapping decoration (overflow), the blended banner
+ * (mix-blend-mode).
+ */
+
+const withBlockStyles = (styles: Record<string, unknown>): Section[] => [
+  {
+    id: 'sec-1',
+    type: 'custom',
+    name: 'Section',
+    label: 'Section',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    blocks: [
+      {
+        id: 'block-1',
+        type: 'group',
+        label: 'Group',
+        order: 0,
+        hidden: false,
+        properties: {},
+        styles,
+        blocks: []
+      }
+    ]
+  } as unknown as Section
+];
+
+describe('the CSS generator passes any property through', () => {
+  it('emits properties no renderer or descriptor mentions', () => {
+    const css = generateThemeCSS(
+      withBlockStyles({
+        'clip-path': 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
+        'mask-image':
+          'radial-gradient(circle at 50% 0, transparent 24px, #000 25px)',
+        'mask-repeat': 'repeat-x',
+        'mask-size': '48px 48px',
+        'font-style': 'italic',
+        'mix-blend-mode': 'multiply',
+        overflow: 'visible'
+      })
+    );
+
+    expect(css).toContain(
+      'clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)'
+    );
+    expect(css).toContain('mask-image: radial-gradient');
+    expect(css).toContain('mask-repeat: repeat-x');
+    expect(css).toContain('mask-size: 48px 48px');
+    expect(css).toContain('font-style: italic');
+    expect(css).toContain('mix-blend-mode: multiply');
+    expect(css).toContain('overflow: visible');
+  });
+
+  it('kebab-cases a camelCase key on the way out', () => {
+    const css = generateThemeCSS(
+      withBlockStyles({ maskComposite: 'exclude', backdropFilter: 'blur(4px)' })
+    );
+
+    expect(css).toContain('mask-composite: exclude');
+    expect(css).toContain('backdrop-filter: blur(4px)');
+  });
+
+  it('resolves such a property per breakpoint like any other', () => {
+    const css = generateThemeCSS(
+      withBlockStyles({
+        'clip-path': {
+          desktop: 'circle(40%)',
+          tablet: 'circle(45%)',
+          mobile: 'none'
+        }
+      })
+    );
+
+    expect(css).toContain('clip-path: circle(40%)');
+    expect(css).toContain('clip-path: circle(45%)');
+    expect(css).toContain('clip-path: none');
+  });
+});

package/src/utils/field-semantics.test.ts

@@ -0,0 +1,72 @@
+import { isMoneyPath, readFieldSemantic } from './field-semantics';
+import { createPageContextDiscovery } from './page-context-discovery';
+
+/**
+ * The designer's question is "what is this field?", and `typeof` cannot answer
+ * it: commerce publishes a total, a product URL and a title as three strings.
+ */
+
+describe('readFieldSemantic', () => {
+  it('reads money from the leaf name, under any root', () => {
+    expect(readFieldSemantic('basket.totalAmount', 'string')).toBe('money');
+    expect(readFieldSemantic('order.shippingAmount', 'string')).toBe('money');
+    expect(readFieldSemantic('product.price', 'string')).toBe('money');
+    expect(readFieldSemantic('basket.items[].unitPrice', 'string')).toBe(
+      'money'
+    );
+  });
+
+  it('separates the string fields a designer would otherwise confuse', () => {
+    expect(readFieldSemantic('product.image', 'string')).toBe('image');
+    expect(readFieldSemantic('product.url', 'string')).toBe('url');
+    expect(readFieldSemantic('product.title', 'string')).toBe('text');
+    expect(readFieldSemantic('order.created_at', 'string')).toBe('date');
+  });
+
+  it('keeps the observed type where the value already answers', () => {
+    expect(readFieldSemantic('basket.totalQuantity', 'number')).toBe('count');
+    expect(readFieldSemantic('basket.isEmpty', 'boolean')).toBe('flag');
+    expect(readFieldSemantic('basket.items', 'array')).toBe('list');
+    expect(readFieldSemantic('basket.discounts', 'object')).toBe('group');
+  });
+
+  it('agrees with the formatter about what money is', () => {
+    // Same list on both sides: a field the picker labels money is a field the
+    // renderer formats as money.
+    ['basket.totalAmount', 'order.amount', 'product.retailPrice'].forEach(
+      (path) => {
+        expect(isMoneyPath(path)).toBe(true);
+        expect(readFieldSemantic(path, 'string')).toBe('money');
+      }
+    );
+
+    expect(isMoneyPath('basket.voucherCode')).toBe(false);
+  });
+});
+
+describe('discovery publishes the semantic', () => {
+  it('labels every field of a basket page', () => {
+    const discovery = createPageContextDiscovery({
+      basket: {
+        totalAmount: '1299.90',
+        totalQuantity: 2,
+        isEmpty: false,
+        voucherCode: 'WELCOME',
+        items: [{ title: 'Sneaker', image: '/i.jpg', unitPrice: '649.95' }]
+      }
+    });
+
+    const byPath = Object.fromEntries(
+      discovery.entries.map((entry) => [entry.path, entry])
+    );
+
+    expect(byPath['basket.totalAmount'].semantic).toBe('money');
+    expect(byPath['basket.totalAmount'].sample).toBe('1299.90');
+    expect(byPath['basket.totalQuantity'].semantic).toBe('count');
+    expect(byPath['basket.isEmpty'].semantic).toBe('flag');
+    expect(byPath['basket.voucherCode'].semantic).toBe('text');
+    expect(byPath['basket.items'].semantic).toBe('list');
+    expect(byPath['basket.items[].image'].semantic).toBe('image');
+    expect(byPath['basket.items[].unitPrice'].semantic).toBe('money');
+  });
+});

package/src/utils/field-semantics.ts

@@ -0,0 +1,76 @@
+/**
+ * What a page-context field MEANS, as opposed to what JavaScript type it
+ * happens to be.
+ *
+ * Commerce publishes money as a raw string ("1299.90"), a product URL as a
+ * string and an image as a string, so a designer reading a picker sees three
+ * identical `string` fields and no way to tell which one belongs in an image
+ * block. The renderer needs the same answer to decide whether to format a
+ * bound value as money.
+ *
+ * One module so the two sides cannot drift: the formatter and the field the
+ * editor labels are derived from this list, not from two copies of it.
+ */
+export type FieldSemantic =
+  | 'money'
+  | 'count'
+  | 'flag'
+  | 'url'
+  | 'image'
+  | 'date'
+  | 'list'
+  | 'group'
+  | 'text';
+
+/** Leaf names commerce publishes as money, whatever root they sit under. */
+export const MONEY_LEAVES = new Set([
+  'totalAmount',
+  'totalProductAmount',
+  'totalDiscountAmount',
+  'totalPrice',
+  'unitPrice',
+  'retailPrice',
+  'shippingAmount',
+  'amount',
+  'price'
+]);
+
+const IMAGE_LEAVES = new Set(['image', 'thumbnail', 'logo', 'icon']);
+const URL_LEAVES = new Set(['url', 'href', 'link', 'absolute_url', 'path']);
+// Both spellings occur side by side: commerce sends `created_date`, the
+// builders publish `createdDate`.
+const DATE_LEAF_PATTERN = /(date|Date|_at|At)$/;
+
+const readLeaf = (path: string): string => {
+  const withoutWildcard = path.replace(/\[\]$/, '');
+  return withoutWildcard.split('.').pop() || '';
+};
+
+/** True for a path the renderer must format as money. */
+export const isMoneyPath = (path: string): boolean =>
+  Boolean(path) && MONEY_LEAVES.has(readLeaf(path));
+
+/**
+ * The semantic of a value at a path. `valueType` is what the walk observed, so
+ * a number stays a count and a boolean stays a flag even if its name suggests
+ * otherwise — the name only disambiguates the strings, which is where commerce
+ * hides everything.
+ */
+export const readFieldSemantic = (
+  path: string,
+  valueType: 'string' | 'number' | 'boolean' | 'null' | 'object' | 'array'
+): FieldSemantic => {
+  if (valueType === 'array') return 'list';
+  if (valueType === 'object') return 'group';
+  if (valueType === 'boolean') return 'flag';
+
+  const leaf = readLeaf(path);
+
+  if (MONEY_LEAVES.has(leaf)) return 'money';
+  if (valueType === 'number') return 'count';
+  if (IMAGE_LEAVES.has(leaf)) return 'image';
+  if (URL_LEAVES.has(leaf)) return 'url';
+  if (DATE_LEAF_PATTERN.test(leaf)) return 'date';
+
+  return 'text';
+};

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

@@ -215,7 +215,9 @@ describe('iterator-utils', () => {
       pageContext
     });
 
-    expect(resolvedText.value).toBe('799.90');
+    // A bound total is money now, not the raw commerce string: it used to
+    // print "799.90" beside a built-in summary block printing "1.299,90 TL".
+    expect(resolvedText.value).toBe('799,90 TL');
     expect(iteratorBlock.blocks).toHaveLength(1);
     expect(iteratorBlock.blocks?.[0].value).toBe(
       'https://cdn.example.com/image-1.jpg'