@akinon/pz-theme 2.0.43-rc.0 → 2.0.44

package/src/__tests__/chrome-empty-zone.test.tsx

@@ -62,11 +62,11 @@ describe('ChromeFallback empty zone in the designer', () => {
       value: { postMessage }
     });
 
-    render(<ChromeFallback slug="checkout-summary-body" emptyZone />);
+    render(<ChromeFallback slug="checkout-bottom-body" emptyZone />);
 
     // A frame from the editor is what proves its origin to the bridge;
     // without one there is no trusted target and the message is dropped.
-    pushTheme([], 'checkout-summary-body');
+    pushTheme([], 'checkout-bottom-body');
 
     fireEvent.click(
       screen.getByRole('button', { name: /edit in theme editor/i })
@@ -76,7 +76,7 @@ describe('ChromeFallback empty zone in the designer', () => {
     const [envelope, targetOrigin] = postMessage.mock.calls[0];
     expect(envelope).toMatchObject({
       type: 'REQUEST_CHROME_OVERRIDE',
-      data: { slug: 'checkout-summary-body' }
+      data: { slug: 'checkout-bottom-body' }
     });
     expect(envelope.protocolVersion).toBeGreaterThan(0);
     expect(targetOrigin).toBe(EDITOR_ORIGIN);

package/src/__tests__/code-owned-region.test.tsx

@@ -4,10 +4,14 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { CodeOwnedRegion } from '../chrome/code-owned-region';
 
 /**
- * The checkout flow offers no takeover affordance on purpose, but silence
- * reads as breakage: a designer hovering it sees the same nothing a bug would
- * produce. These tests pin the explainer that fills that gap — and pin that
- * it never leaks to visitors and never blocks the flow it wraps.
+ * Some regions offer no takeover on purpose, but silence reads as breakage: a
+ * designer hovering one sees the same nothing a bug would produce. These tests
+ * pin the explainer that fills that gap — and pin that it never leaks to
+ * visitors and never blocks what it wraps.
+ *
+ * The reference app's checkout no longer mounts this: its body IS composable,
+ * so it takes `ComposableRegion` and a real affordance. The template app's
+ * checkout, which has no body zone at all, still does.
  */
 
 describe('CodeOwnedRegion in the designer', () => {
@@ -18,7 +22,7 @@ describe('CodeOwnedRegion in the designer', () => {
     });
   });
 
-  it('explains the region on hover and says where the composable zones are', () => {
+  it('explains the region on hover without promising outlet placement', () => {
     render(
       <CodeOwnedRegion label="checkout flow">
         <div data-testid="flow">payment steps</div>
@@ -31,12 +35,32 @@ describe('CodeOwnedRegion in the designer', () => {
 
     const note = screen.getByText(/checkout flow is code-owned/i);
     expect(note).toBeInTheDocument();
-    expect(note.textContent).toMatch(/zones above and below/i);
+    expect(note.textContent).toMatch(/is code-owned/i);
+    expect(note.textContent).toMatch(/internals cannot be edited here/i);
+    // The default used to promise placement through outlet blocks, which is
+    // false for any mount without a composable body zone — and outlets only
+    // register inside one. A mount that has the zone passes its own note.
+    expect(note.textContent).not.toMatch(/outlet blocks/i);
 
     fireEvent.mouseLeave(screen.getByTestId('flow').parentElement!);
     expect(screen.queryByText(/code-owned/i)).not.toBeInTheDocument();
   });
 
+  it('lets the mounting layout replace the default sentence with its own note', () => {
+    render(
+      <CodeOwnedRegion label="checkout flow" note="Compose the Checkout Body zone.">
+        <div data-testid="flow">payment steps</div>
+      </CodeOwnedRegion>
+    );
+
+    fireEvent.mouseEnter(screen.getByTestId('flow').parentElement!);
+
+    expect(
+      screen.getByText('Compose the Checkout Body zone.')
+    ).toBeInTheDocument();
+    expect(screen.queryByText(/is code-owned —/)).not.toBeInTheDocument();
+  });
+
   it('never intercepts the pointer, so the flow stays usable in the preview', () => {
     render(
       <CodeOwnedRegion label="checkout flow">

package/src/__tests__/composable-region.test.tsx

@@ -0,0 +1,481 @@
+import React, { useState } from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+
+import { ComposableRegionClient } from '../chrome/composable-region-client';
+
+/**
+ * The checkout body is composable, but its content — the real payment flow —
+ * can never be withdrawn to make room for the takeover affordance the way a
+ * ChromeFallback withdraws brand markup. So this region offers the affordance
+ * OVER live content it always keeps mounted.
+ *
+ * These tests pin both halves of that: the affordance behaves exactly like the
+ * one on every other page (same message, same trust rules, same composed-state
+ * gate), and the children survive every state it can be in — losing them would
+ * mean losing a customer's checkout session, mid-3DS in the worst case.
+ */
+
+const EDITOR_ORIGIN = 'http://localhost:5174';
+
+const pushTheme = (
+  sections: unknown[],
+  slug = 'checkout-page-body',
+  origin = EDITOR_ORIGIN
+) =>
+  act(() => {
+    fireEvent(
+      window,
+      new MessageEvent('message', {
+        origin,
+        data: {
+          type: 'UPDATE_THEME',
+          data: {
+            theme: {
+              placeholders: [{ slug, sections }]
+            }
+          }
+        }
+      })
+    );
+  });
+
+/** Stateful stand-in for the flow: its count survives only if it is not remounted. */
+const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button type="button" onClick={() => setCount((value) => value + 1)}>
+      count:{count}
+    </button>
+  );
+};
+
+/** Frames the document without proving an editor — a production embed. */
+const frameDocument = () =>
+  Object.defineProperty(window, 'top', {
+    configurable: true,
+    value: { name: 'embedder' }
+  });
+
+const unframeDocument = () =>
+  Object.defineProperty(window, 'top', { configurable: true, value: window });
+
+describe('ComposableRegion in the designer', () => {
+  beforeAll(() => {
+    // The designer is framed AND has proven itself with the editor cookie
+    // frame. Both are needed: framing is what lets `postToEditor` reach a
+    // parent, the flag is what makes this a designer rather than an embed.
+    frameDocument();
+    window.__themeEditorDesigner = true;
+  });
+
+  afterAll(() => {
+    delete window.__themeEditorDesigner;
+  });
+
+  it('offers the takeover on hover over the live content', () => {
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    // Unhovered the area looks untouched — the flow is what the designer is
+    // meant to see, not a permanent overlay on top of it.
+    expect(screen.getByTestId('flow')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /edit in theme editor/i })
+    ).not.toBeInTheDocument();
+
+    fireEvent.mouseEnter(
+      document.querySelector('[data-chrome-region-affordance]')!
+    );
+
+    expect(
+      screen.getByText(/checkout-page-body area is not composed yet/i)
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /edit in theme editor/i })
+    ).toBeInTheDocument();
+  });
+
+  it('asks the editor to take the area over when the affordance is used', () => {
+    // What the designer clicks has to arrive as a contract message addressed
+    // to the editor: an unknown type never reaches the editor's handler, and
+    // the template picker never opens.
+    const postMessage = jest.fn();
+    Object.defineProperty(window, 'parent', {
+      configurable: true,
+      value: { postMessage }
+    });
+
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    // A frame from the editor is what proves its origin to the bridge; without
+    // one there is no trusted target and the message is dropped by design.
+    pushTheme([]);
+
+    fireEvent.mouseEnter(
+      document.querySelector('[data-chrome-region-affordance]')!
+    );
+    fireEvent.click(
+      screen.getByRole('button', { name: /edit in theme editor/i })
+    );
+
+    expect(postMessage).toHaveBeenCalledTimes(1);
+    const [envelope, targetOrigin] = postMessage.mock.calls[0];
+    expect(envelope).toMatchObject({
+      type: 'REQUEST_CHROME_OVERRIDE',
+      data: { slug: 'checkout-page-body' }
+    });
+    expect(envelope.protocolVersion).toBeGreaterThan(0);
+    expect(targetOrigin).toBe(EDITOR_ORIGIN);
+  });
+
+  it('NEVER unmounts the children, in any composition state', () => {
+    // The reason this component exists instead of a ChromeFallback mode.
+    // A remount here refetches checkout state and would break a 3DS session,
+    // so the flow's own state has to survive every transition.
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <Counter />
+      </ComposableRegionClient>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /count:0/i }));
+    expect(
+      screen.getByRole('button', { name: /count:1/i })
+    ).toBeInTheDocument();
+
+    pushTheme([{ id: 'section-abc', type: 'custom' }]);
+    expect(
+      screen.getByRole('button', { name: /count:1/i })
+    ).toBeInTheDocument();
+
+    pushTheme([]);
+    expect(
+      screen.getByRole('button', { name: /count:1/i })
+    ).toBeInTheDocument();
+  });
+
+  it('stands down once the area is composed and returns when emptied again', () => {
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    pushTheme([{ id: 'section-abc', type: 'custom' }]);
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).toBeNull();
+
+    pushTheme([]);
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).not.toBeNull();
+  });
+
+  it('KEEPS offering the takeover for a placeholder holding only native sections', () => {
+    // A native section never entered the saved order, so the server renders no
+    // composition for it — standing down would leave the area with no way in.
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    pushTheme([{ id: 'layout-checkout-styles', type: 'native' }]);
+
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).not.toBeNull();
+  });
+
+  it('ignores a theme pushed from an untrusted origin', () => {
+    // An embedding page must not be able to toggle designer chrome.
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    pushTheme(
+      [{ id: 'section-abc', type: 'custom' }],
+      'checkout-page-body',
+      'https://evil.example'
+    );
+
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).not.toBeNull();
+  });
+
+  it('starts silent when the server rendered a composition', () => {
+    // The composition already owns the area; offering to take it over again
+    // before any frame arrives would flash a CTA over composed content.
+    render(
+      <ComposableRegionClient slug="checkout-page-body" initiallyComposed>
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    expect(screen.getByTestId('flow')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).toBeNull();
+  });
+
+  it('keeps the canvas inert while the flow renders in place', () => {
+    // The capture guards that neutralize clicks, submits and Enter live on the
+    // outlet target, which exists only once a composition places one. Until
+    // then this is what stops a canvas click reaching a real place-order.
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    expect(
+      document.querySelector('[data-chrome-region="checkout-page-body"]')
+    ).toHaveStyle({ pointerEvents: 'none' });
+    // The overlay re-enables itself, so hover detection never depends on the
+    // inert wrapper being a hit target.
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).toHaveStyle({ pointerEvents: 'auto' });
+  });
+
+  it('still explains the inert area once it is composed', () => {
+    // The click guard is keyed on being in the designer, not on the area
+    // being uncomposed — so a composition that does NOT place the live
+    // content elsewhere (an ordinary section, an outlet-free template) leaves
+    // it visible and unclickable. Without a note that reads as a broken
+    // preview, which is exactly what the code-owned explainer existed to
+    // prevent.
+    render(
+      <ComposableRegionClient
+        slug="checkout-page-body"
+        composedNote="The checkout flow renders here until an outlet places it"
+      >
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    pushTheme([{ id: 'section-abc', type: 'custom' }]);
+
+    const note = document.querySelector('[data-chrome-region-note]');
+    expect(note).not.toBeNull();
+    // Still inert: explaining the guard must not remove it.
+    expect(
+      document.querySelector('[data-chrome-region="checkout-page-body"]')
+    ).toHaveStyle({ pointerEvents: 'none' });
+
+    fireEvent.mouseEnter(note!);
+
+    expect(
+      screen.getByText(/renders here until an outlet places it/i)
+    ).toBeInTheDocument();
+    // A composed area has nothing left to take over, so no second CTA.
+    expect(
+      screen.queryByRole('button', { name: /edit in theme editor/i })
+    ).not.toBeInTheDocument();
+  });
+
+  it('explains a server-composed area too, without a CTA', () => {
+    render(
+      <ComposableRegionClient slug="checkout-page-body" initiallyComposed>
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    const note = document.querySelector('[data-chrome-region-note]');
+    expect(note).not.toBeNull();
+
+    fireEvent.mouseEnter(note!);
+
+    expect(
+      screen.queryByRole('button', { name: /edit in theme editor/i })
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe('ComposableRegion framed by a page that is not the editor', () => {
+  // pz-next ships `frame-ancestors 'self' … akifast.com … akinoncloud.com`, so
+  // a REAL checkout is legitimately embedded in production. Treating any frame
+  // as the designer would make the whole payment area pointer-inert behind an
+  // interactive scrim: a customer who cannot enter a card, tick an agreement
+  // or press Place Order. Nothing here may depend on framing alone.
+  beforeAll(() => {
+    frameDocument();
+    delete window.__themeEditorDesigner;
+  });
+
+  it('never makes the checkout inert and never shows designer chrome', () => {
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    const wrapper = document.querySelector<HTMLElement>(
+      '[data-chrome-region="checkout-page-body"]'
+    )!;
+
+    expect(wrapper.style.pointerEvents).toBe('');
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).toBeNull();
+    expect(document.querySelector('[data-chrome-region-note]')).toBeNull();
+
+    fireEvent.mouseEnter(wrapper);
+
+    expect(
+      screen.queryByRole('button', { name: /edit in theme editor/i })
+    ).not.toBeInTheDocument();
+  });
+
+  it('is not talked into designer chrome by an embedder pushing a theme', () => {
+    // The embedder cannot reach the origin guard, but pin that even an
+    // accepted theme frame never doubles as proof of being the designer.
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    pushTheme([{ id: 'section-abc', type: 'custom' }]);
+
+    expect(
+      document.querySelector<HTMLElement>(
+        '[data-chrome-region="checkout-page-body"]'
+      )!.style.pointerEvents
+    ).toBe('');
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).toBeNull();
+    expect(document.querySelector('[data-chrome-region-note]')).toBeNull();
+  });
+
+  it('turns designer once the editor proves itself with the cookie frame', () => {
+    // The flag rides a postMessage and can land after mount, so the region has
+    // to pick the frame up rather than latching "not the designer" forever.
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).toBeNull();
+
+    act(() => {
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          origin: EDITOR_ORIGIN,
+          data: { type: 'SET_THEME_EDITOR_COOKIE', data: { cookie: 'x' } }
+        })
+      );
+    });
+
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).not.toBeNull();
+    expect(
+      document.querySelector<HTMLElement>(
+        '[data-chrome-region="checkout-page-body"]'
+      )!.style.pointerEvents
+    ).toBe('none');
+  });
+
+  it('ignores a cookie frame from an untrusted origin', () => {
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    act(() => {
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          origin: 'https://evil.example',
+          data: { type: 'SET_THEME_EDITOR_COOKIE', data: { cookie: 'x' } }
+        })
+      );
+    });
+
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).toBeNull();
+    expect(
+      document.querySelector<HTMLElement>(
+        '[data-chrome-region="checkout-page-body"]'
+      )!.style.pointerEvents
+    ).toBe('');
+  });
+});
+
+describe('ComposableRegion on the live site', () => {
+  beforeAll(() => {
+    unframeDocument();
+    delete window.__themeEditorDesigner;
+  });
+
+  it('renders the children and no overlay, hovered or not', () => {
+    render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    expect(screen.getByTestId('flow')).toBeInTheDocument();
+
+    fireEvent.mouseEnter(screen.getByTestId('flow').parentElement!);
+
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).toBeNull();
+    expect(
+      screen.queryByRole('button', { name: /edit in theme editor/i })
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders the children under a server-rendered composition too', () => {
+    // Composed or not, the flow is never the thing a composition replaces.
+    render(
+      <ComposableRegionClient slug="checkout-page-body" initiallyComposed>
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    expect(screen.getByTestId('flow')).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-chrome-region-affordance]')
+    ).toBeNull();
+  });
+
+  it('adds one positioned wrapper and no pointer-events at all', () => {
+    // The live output pin: the wrapper replaces the previous code-owned div
+    // one-for-one, and nothing about the designer leaks into a visitor's page.
+    const { container } = render(
+      <ComposableRegionClient slug="checkout-page-body">
+        <div data-testid="flow">payment steps</div>
+      </ComposableRegionClient>
+    );
+
+    const wrapper = container.querySelector<HTMLElement>(
+      '[data-chrome-region="checkout-page-body"]'
+    )!;
+
+    expect(container.children).toHaveLength(1);
+    expect(wrapper.style.position).toBe('relative');
+    expect(wrapper.style.pointerEvents).toBe('');
+  });
+});

package/src/__tests__/part-styles.test.ts

@@ -58,6 +58,14 @@ describe('part style keys', () => {
     expect(parsePartStyleKey('dropdown/wobble/border-color')).toBeNull();
   });
 
+  it('recognizes the completed state segment', () => {
+    expect(parsePartStyleKey('step/completed/color')).toEqual({
+      part: 'step',
+      state: 'completed',
+      property: 'color'
+    });
+  });
+
   it('round-trips through the builder', () => {
     expect(parsePartStyleKey(buildPartStyleKey('option', 'color'))).toEqual({
       part: 'option',
@@ -97,9 +105,9 @@ describe('partAttrs', () => {
       'data-part': 'option',
       'data-state': 'selected'
     });
-    expect(partAttrs('option', { selected: true, disabled: true })[
-      'data-state'
-    ]).toBe('selected disabled');
+    expect(
+      partAttrs('option', { selected: true, disabled: true })['data-state']
+    ).toBe('selected disabled');
   });
 
   it('omits data-state entirely when nothing is on', () => {
@@ -160,6 +168,18 @@ describe('generated CSS for parts', () => {
     expect(css).toContain('[data-part="option"][data-state~="disabled"]');
   });
 
+  it('emits the completed state as a data-state token only', () => {
+    const css = generateThemeCSS(
+      sectionWith({ 'step/completed/color': { desktop: '#16a34a' } })
+    );
+
+    expect(css).toContain('[data-part="step"][data-state~="completed"]');
+    // No ARIA analog and no pseudo-class: no ARIA attribute honestly means
+    // "completed", so the data-state token is the whole contract.
+    expect(css).not.toContain('[data-part="step"][aria-');
+    expect(css).not.toContain('[data-part="step"]:');
+  });
+
   it('supports focus and hover on a part', () => {
     const css = generateThemeCSS(
       sectionWith({
@@ -194,7 +214,7 @@ describe('generated CSS for parts', () => {
   });
 });
 
-describe('routing a block\'s own styles to its real root', () => {
+describe("routing a block's own styles to its real root", () => {
   const blockWith = (
     styles: Record<string, unknown>,
     stylesTargetRoot?: boolean

package/src/__tests__/registry-parity.test.ts

@@ -37,8 +37,11 @@ const EXPECTED_BLOCK_TYPES = [
   'basket-summary',
   'button',
   'change-password-form',
+  'checkout-flow-outlet',
   'checkout-steps',
+  'checkout-steps-outlet',
   'checkout-summary',
+  'checkout-summary-outlet',
   'countdown',
   'counter',
   'coupon-list',

package/src/__tests__/route-slug.test.ts

@@ -1,5 +1,6 @@
 import { PLACEHOLDER_SLUGS } from '../chrome/placeholder-slugs';
 import {
+  isPageMountedSlug,
   normalizePath,
   registerRouteSlugRules,
   resetRouteSlugRules,
@@ -129,11 +130,21 @@ describe('resolveBodySlug', () => {
     expect(resolveBodySlug('/orders/completed/abc123')).toBe(
       PLACEHOLDER_SLUGS.orderSuccess
     );
+    expect(resolveBodySlug('/orders/checkout')).toBe(
+      PLACEHOLDER_SLUGS.checkoutBody
+    );
     expect(resolveBodySlug('/stores')).toBe(PLACEHOLDER_SLUGS.stores);
     expect(resolveBodySlug('/address/stores')).toBe(PLACEHOLDER_SLUGS.stores);
     expect(resolveBodySlug('/')).toBe(PLACEHOLDER_SLUGS.homepage);
   });
 
+  it('keeps the checkout body out of root catch-all mounting', () => {
+    // Load-bearing for "the flow can never be lost": the checkout layout
+    // mounts this slot itself, and a root catch-all mounting it with
+    // `fallback={children}` would make the payment flow replaceable.
+    expect(isPageMountedSlug('checkout-page-body')).toBe(true);
+  });
+
   it('returns null for a path with no placeholder', () => {
     expect(resolveBodySlug('/kampanya-bilgilendirme')).toBeNull();
   });