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

package/CHANGELOG.md

@@ -1,36 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.38-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea0688]
-- Updated dependencies
-- Updated dependencies [2fea4143]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f4]
-- Updated dependencies [57d7eb30]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a71]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d0]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b20]
-  - @akinon/next@2.0.38-rc.0
-  - @akinon/theme-contract@2.0.38-rc.0
+## 2.0.39-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd75]
+  - @akinon/next@2.0.39-beta.0
+  - @akinon/theme-contract@2.0.39-beta.0
+
+## 2.0.38
+
+### Patch Changes
+
+- 11f6cc0b: ZERO-4702: Make a brand's chrome and pages composable — ChromeSlot with a project fallback and an explicit takeover, the chrome block vocabulary, and a slot per storefront page
+  - @akinon/next@2.0.38
+  - @akinon/theme-contract@2.0.38
 
 ## 2.0.37
 

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.38-rc.0",
+  "version": "2.0.39-beta.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.38-rc.0",
+    "@akinon/next": "2.0.39-beta.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.38-rc.0",
+    "@akinon/theme-contract": "2.0.39-beta.0",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.38-rc.0",
+    "@akinon/next": "2.0.39-beta.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/chrome-takeover-gate.test.tsx

@@ -0,0 +1,252 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+
+import { ChromeFallback } from '../chrome/chrome-fallback';
+import {
+  readCompositionState,
+  warnAboutUncomposedSlot
+} from '../chrome/composition-state';
+import { resetDevWarnCacheForTests } from '../utils/dev-warn';
+
+/**
+ * The takeover decision is made twice — once on the server, from the persisted
+ * placeholder order, and once in the designer, from the theme pushed into the
+ * preview. The two must agree; when they do not, the editor shows the designer
+ * something no visitor will ever see.
+ *
+ * These tests pin both halves:
+ *  - `readCompositionState` — what the server concludes, including the
+ *    difference between a widget that is absent and one that is empty.
+ *  - `ChromeFallback` — what the designer sees, which must follow the same rule
+ *    about which sections count.
+ */
+
+const asWidget = (layout: unknown) => ({
+  attributes: { theme_editor_placeholder: layout }
+});
+
+describe('readCompositionState', () => {
+  it('separates a missing widget from an empty layout', () => {
+    // Both reach the renderer as "no composition", but only one of them means
+    // the storefront may be reading a different store than the editor writes.
+    expect(readCompositionState(null)).toEqual({ kind: 'missing' });
+    expect(readCompositionState(undefined)).toEqual({ kind: 'missing' });
+    expect(readCompositionState(asWidget('[]'))).toEqual({ kind: 'empty' });
+    expect(readCompositionState(asWidget([]))).toEqual({ kind: 'empty' });
+    expect(readCompositionState(asWidget(undefined))).toEqual({ kind: 'empty' });
+    expect(readCompositionState(asWidget('   '))).toEqual({ kind: 'empty' });
+  });
+
+  it('reads a composition from every shape a backend sends', () => {
+    const order = [{ section_slug: 'section-abc', order: 0 }];
+
+    expect(readCompositionState(asWidget(JSON.stringify(order)))).toEqual({
+      kind: 'composed',
+      sectionCount: 1
+    });
+    expect(readCompositionState(asWidget(order))).toEqual({
+      kind: 'composed',
+      sectionCount: 1
+    });
+    // v1 attribute shape: the value is wrapped.
+    expect(
+      readCompositionState(asWidget({ value: JSON.stringify(order) }))
+    ).toEqual({ kind: 'composed', sectionCount: 1 });
+  });
+
+  it('reports a layout it cannot use as malformed rather than empty', () => {
+    expect(readCompositionState(asWidget('{not json'))).toEqual({
+      kind: 'malformed'
+    });
+    expect(readCompositionState(asWidget('{"a":1}'))).toEqual({
+      kind: 'malformed'
+    });
+  });
+});
+
+describe('warnAboutUncomposedSlot', () => {
+  let warn: jest.SpyInstance;
+
+  beforeEach(() => {
+    resetDevWarnCacheForTests();
+    warn = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => warn.mockRestore());
+
+  it('names the store mismatch when the widget is absent', () => {
+    warnAboutUncomposedSlot('header', { kind: 'missing' });
+
+    expect(warn).toHaveBeenCalledTimes(1);
+    const message = String(warn.mock.calls[0][0]);
+    expect(message).toContain('header');
+    expect(message).toContain('different store');
+  });
+
+  it('says empty, not missing, when the widget exists', () => {
+    warnAboutUncomposedSlot('footer', { kind: 'empty' });
+
+    const message = String(warn.mock.calls[0][0]);
+    expect(message).toContain('layout is empty');
+    expect(message).not.toContain('different store');
+  });
+
+  it('stays quiet for a composed slot', () => {
+    warnAboutUncomposedSlot('header', { kind: 'composed', sectionCount: 2 });
+    expect(warn).not.toHaveBeenCalled();
+  });
+});
+
+describe('ChromeFallback takeover gate', () => {
+  // The bridge only accepts frames from a trusted editor origin, so the theme
+  // has to arrive from one. localhost is trusted outside production.
+  const EDITOR_ORIGIN = 'http://localhost:5174';
+
+  const pushTheme = (sections: unknown[], origin = EDITOR_ORIGIN) =>
+    act(() => {
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          origin,
+          data: {
+            type: 'UPDATE_THEME',
+            data: {
+              theme: {
+                placeholders: [{ slug: 'header', sections }]
+              }
+            }
+          }
+        })
+      );
+    });
+
+  beforeAll(() => {
+    // The fallback only offers the takeover affordance inside the designer,
+    // which it detects by being framed.
+    Object.defineProperty(window, 'top', {
+      configurable: true,
+      value: { name: 'designer' }
+    });
+  });
+
+  it('asks the editor to take the area over when the affordance is used', async () => {
+    // What the designer clicks has to arrive as a contract message, not as a
+    // raw frame posted to '*'. The whole affordance is dead if the type is not
+    // one the editor's validator knows — which is why it is asserted here and
+    // not just eyeballed in the browser.
+    const postMessage = jest.fn();
+    Object.defineProperty(window, 'parent', {
+      configurable: true,
+      value: { postMessage }
+    });
+
+    render(
+      <ChromeFallback slug="header">
+        <div data-testid="project-header">project header</div>
+      </ChromeFallback>
+    );
+
+    // 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(screen.getByTestId('project-header').parentElement!);
+    fireEvent.click(
+      await screen.findByRole('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: 'header' }
+    });
+    // Stamped, and addressed to the editor rather than to any embedding page.
+    expect(envelope.protocolVersion).toBeGreaterThan(0);
+    expect(targetOrigin).toBe(EDITOR_ORIGIN);
+  });
+
+  it('withdraws for a composed section', () => {
+    render(
+      <ChromeFallback slug="header">
+        <div data-testid="project-header">project header</div>
+      </ChromeFallback>
+    );
+
+    expect(screen.getByTestId('project-header')).toBeInTheDocument();
+
+    pushTheme([{ id: 'section-abc', type: 'custom' }]);
+
+    expect(screen.queryByTestId('project-header')).not.toBeInTheDocument();
+  });
+
+  it('KEEPS the project markup for a placeholder holding only native sections', () => {
+    // A native section restyles the project's own chrome instead of replacing
+    // it, and never enters the saved order — so the server keeps rendering the
+    // project header. Withdrawing here would hide the very element being
+    // styled and show an empty area the visitor never sees.
+    render(
+      <ChromeFallback slug="header">
+        <div data-testid="project-header">project header</div>
+      </ChromeFallback>
+    );
+
+    pushTheme([{ id: 'layout-header-styles', type: 'native' }]);
+
+    expect(screen.getByTestId('project-header')).toBeInTheDocument();
+  });
+
+  it('withdraws for a mixed placeholder, because the order carries the composed section', () => {
+    render(
+      <ChromeFallback slug="header">
+        <div data-testid="project-header">project header</div>
+      </ChromeFallback>
+    );
+
+    pushTheme([
+      { id: 'layout-header-styles', type: 'native' },
+      { id: 'section-abc', type: 'custom' }
+    ]);
+
+    expect(screen.queryByTestId('project-header')).not.toBeInTheDocument();
+  });
+
+  it('ignores hidden sections', () => {
+    render(
+      <ChromeFallback slug="header">
+        <div data-testid="project-header">project header</div>
+      </ChromeFallback>
+    );
+
+    pushTheme([{ id: 'section-abc', type: 'custom', hidden: true }]);
+
+    expect(screen.getByTestId('project-header')).toBeInTheDocument();
+  });
+
+  it('ignores a theme pushed from an untrusted origin', () => {
+    // An embedding page must not be able to make the project chrome disappear.
+    render(
+      <ChromeFallback slug="header">
+        <div data-testid="project-header">project header</div>
+      </ChromeFallback>
+    );
+
+    pushTheme([{ id: 'section-abc', type: 'custom' }], 'https://evil.example');
+
+    expect(screen.getByTestId('project-header')).toBeInTheDocument();
+  });
+
+  it('comes back when the designer removes the composition again', () => {
+    render(
+      <ChromeFallback slug="header">
+        <div data-testid="project-header">project header</div>
+      </ChromeFallback>
+    );
+
+    pushTheme([{ id: 'section-abc', type: 'custom' }]);
+    expect(screen.queryByTestId('project-header')).not.toBeInTheDocument();
+
+    pushTheme([]);
+    expect(screen.getByTestId('project-header')).toBeInTheDocument();
+  });
+});

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

@@ -26,9 +26,11 @@ const extractRegisteredTypes = (source: string): string[] => {
 
 const EXPECTED_BLOCK_TYPES = [
   'accordion',
+  'account-button',
   'account-menu',
   'add-to-cart',
   'address-list',
+  'announcement-bar',
   'applied-filters',
   'auth-form',
   'basket-items',
@@ -40,6 +42,7 @@ const EXPECTED_BLOCK_TYPES = [
   'countdown',
   'counter',
   'coupon-list',
+  'currency-selector',
   'divider',
   'embed',
   'facet-filters',
@@ -48,11 +51,13 @@ const EXPECTED_BLOCK_TYPES = [
   'favourites-grid',
   'forgot-password',
   'group',
+  'hamburger-menu',
   'hotspot',
   'icon',
   'image',
   'image-gallery',
   'input',
+  'language-selector',
   'link',
   'listing-breadcrumb',
   'listing-pagination',
@@ -60,11 +65,16 @@ const EXPECTED_BLOCK_TYPES = [
   'listing-title',
   'lottie',
   'map',
+  'mega-menu',
+  'mini-basket',
+  'nav-menu',
+  'newsletter-form',
   'oauth-buttons',
   'order-detail',
   'order-list',
   'order-success',
   'order-tracking',
+  'payment-badges',
   'product-attributes',
   'product-breadcrumb',
   'product-description',
@@ -75,16 +85,19 @@ const EXPECTED_BLOCK_TYPES = [
   'product-title',
   'profile-form',
   'register-form',
+  'search-box',
   'share',
   'size-guide',
   'slider',
+  'social-links',
   'sort-select',
   'stock-status',
   'store-locator',
   'tab',
   'text',
   'variant-selector',
-  'video'
+  'video',
+  'wishlist-button'
 ];
 
 const EXPECTED_SECTION_TYPES = [

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

@@ -0,0 +1,116 @@
+import { PLACEHOLDER_SLUGS } from '../chrome/placeholder-slugs';
+import {
+  normalizePath,
+  registerRouteSlugRules,
+  resetRouteSlugRules,
+  resolveBodySlug,
+  resolveBodySlugFromUrl
+} from '../chrome/route-slug';
+
+describe('resolveBodySlug', () => {
+  afterEach(() => resetRouteSlugRules());
+
+  it('gives every account screen its own placeholder', () => {
+    // One shared slug would leak a single composition across all of them.
+    const seen = new Set<string>();
+    const accountPaths = [
+      '/account',
+      '/account/profile',
+      '/account/address',
+      '/account/coupons',
+      '/account/change-password/',
+      '/account/change-email',
+      '/account/favourite-products/',
+      '/account/stock-waiting-products/',
+      '/account/notification-settings/',
+      '/users/orders',
+      '/users/orders/12345'
+    ];
+
+    accountPaths.forEach((path) => {
+      const slug = resolveBodySlug(path);
+      expect(slug).toBeTruthy();
+      seen.add(slug as string);
+    });
+
+    expect(seen.size).toBe(accountPaths.length);
+  });
+
+  it('matches the deeper route first', () => {
+    expect(resolveBodySlug('/users/orders')).toBe(
+      PLACEHOLDER_SLUGS.accountOrders
+    );
+    expect(resolveBodySlug('/users/orders/9911')).toBe(
+      PLACEHOLDER_SLUGS.accountOrderDetail
+    );
+  });
+
+  it('accepts the path variants brands actually ship', () => {
+    // Same screen, three different brands.
+    expect(resolveBodySlug('/basket')).toBe(PLACEHOLDER_SLUGS.basket);
+    expect(resolveBodySlug('/baskets/basket')).toBe(PLACEHOLDER_SLUGS.basket);
+    expect(resolveBodySlug('/users/auth')).toBe(PLACEHOLDER_SLUGS.auth);
+    expect(resolveBodySlug('/auth')).toBe(PLACEHOLDER_SLUGS.auth);
+    expect(resolveBodySlug('/users/password/reset')).toBe(
+      PLACEHOLDER_SLUGS.forgotPassword
+    );
+    expect(resolveBodySlug('/auth/register')).toBe(PLACEHOLDER_SLUGS.register);
+  });
+
+  it('does not let a login path swallow register or guest', () => {
+    expect(resolveBodySlug('/users/auth/guest')).toBe(
+      PLACEHOLDER_SLUGS.guestLogin
+    );
+    expect(resolveBodySlug('/users/auth/register')).toBe(
+      PLACEHOLDER_SLUGS.register
+    );
+  });
+
+  it('resolves commerce and content pages', () => {
+    expect(resolveBodySlug('/product/1/')).toBe(
+      PLACEHOLDER_SLUGS.productDetail
+    );
+    expect(resolveBodySlug('/group-product/1/')).toBe(
+      PLACEHOLDER_SLUGS.productDetail
+    );
+    expect(resolveBodySlug('/category/55/')).toBe(
+      PLACEHOLDER_SLUGS.productListing
+    );
+    expect(resolveBodySlug('/special-page/7/')).toBe(
+      PLACEHOLDER_SLUGS.productListing
+    );
+    expect(resolveBodySlug('/orders/completed/abc123')).toBe(
+      PLACEHOLDER_SLUGS.orderSuccess
+    );
+    expect(resolveBodySlug('/stores')).toBe(PLACEHOLDER_SLUGS.stores);
+    expect(resolveBodySlug('/address/stores')).toBe(PLACEHOLDER_SLUGS.stores);
+    expect(resolveBodySlug('/')).toBe(PLACEHOLDER_SLUGS.homepage);
+  });
+
+  it('returns null for a path with no placeholder', () => {
+    expect(resolveBodySlug('/kampanya-bilgilendirme')).toBeNull();
+  });
+
+  it('lets a brand override with its own paths', () => {
+    registerRouteSlugRules([[/^\/hesabim/, PLACEHOLDER_SLUGS.accountShell]]);
+    expect(resolveBodySlug('/hesabim')).toBe(PLACEHOLDER_SLUGS.accountShell);
+    resetRouteSlugRules();
+    expect(resolveBodySlug('/hesabim')).toBeNull();
+  });
+
+  it('ignores query strings and trailing slashes', () => {
+    expect(normalizePath('/account/profile/?tab=1')).toBe('/account/profile');
+    expect(resolveBodySlug('/users/orders/?page=2')).toBe(
+      PLACEHOLDER_SLUGS.accountOrders
+    );
+  });
+
+  it('reads the path out of a full segment URL', () => {
+    expect(
+      resolveBodySlugFromUrl('https://www.example.com/account/profile/')
+    ).toBe(PLACEHOLDER_SLUGS.accountProfile);
+    expect(resolveBodySlugFromUrl('/account/profile')).toBe(
+      PLACEHOLDER_SLUGS.accountProfile
+    );
+  });
+});