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

package/CHANGELOG.md

@@ -1,58 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.168-rc.0
-
-### Patch Changes
-
-- e3c2bab2: ZERO-5521: restore the text block's useValueLocale import and the /api/auth no-store header rule that the automatic RC sync dropped
-- 8e040731e: ZERO-5235: let brands hang actions on order detail lines
-- c761b9fd4: ZERO-5296: fall back to the storefront default language in the text block
-- 17a598dae: ZERO-5296: report the storefront default language to the editor
-- 3b05a407d: ZERO-5232: allow richtext settings on custom blocks
-- Updated dependencies [86187b1c2]
-- Updated dependencies [08390a87]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [4c3465ae]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [549da545]
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [d635d345]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [d860c917]
-- Updated dependencies [ac6cada1c]
-- Updated dependencies [e90c0e02]
-- Updated dependencies [dc7f9ca5]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [0145dc3f]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [92086b29]
-- Updated dependencies [227b74086]
-- Updated dependencies [9db81a714]
-- Updated dependencies [e3c2bab2]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b1]
-- Updated dependencies [1595d458e]
-- Updated dependencies [dca128112]
-- Updated dependencies [9a7b0937]
-- Updated dependencies [8853822c]
-  - @akinon/next@2.0.168-rc.0
-  - @akinon/theme-contract@2.0.168-rc.0
+## 2.0.168
+
+### Patch Changes
+
+- c5aaa9b3: ZERO-5475: Let the account menu block render a designer-edited item list with a selected rule per item, and scroll sideways when horizontal
+  - @akinon/next@2.0.168
+  - @akinon/theme-contract@2.0.168
 
 ## 2.0.167
 

package/package.json

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

package/src/__tests__/editor-locale-bridge.test.tsx

@@ -28,7 +28,6 @@ const SETTINGS_LOCALES = [
 const mockLocalization = {
   locale: 'tr',
   locales: SETTINGS_LOCALES as Array<Record<string, unknown>>,
-  defaultLocaleValue: 'tr',
   setLocale: jest.fn()
 };
 
@@ -107,7 +106,6 @@ beforeEach(() => {
   postMessage.mockClear();
   mockLocalization.locale = 'tr';
   mockLocalization.locales = SETTINGS_LOCALES;
-  mockLocalization.defaultLocaleValue = 'tr';
   mockLocalization.setLocale = jest.fn();
   delete (window as { __iframeReadySent?: boolean }).__iframeReadySent;
 });
@@ -146,8 +144,7 @@ describe('inside the editor', () => {
             { value: 'en', label: 'English' },
             { value: 'tr', label: 'Türkçe' },
             { value: 'de', label: 'de' }
-          ],
-          defaultLocale: 'tr'
+          ]
         }
       })
     ]);
@@ -157,34 +154,6 @@ describe('inside the editor', () => {
     expect(targetOrigin).toBe(EDITOR_ORIGIN);
   });
 
-  it('posts the languages before the document reports ready', () => {
-    // The editor holds every per-language write until IFRAME_READY and takes
-    // "ready without languages" to mean they are never coming, so the order
-    // of the two frames is part of the contract.
-    render(placeholder('header'));
-
-    const types = postMessage.mock.calls.map(([message]) => message?.type);
-    expect(types).toContain('LOCALE_UPDATE');
-    expect(types).toContain('IFRAME_READY');
-    expect(types.indexOf('LOCALE_UPDATE')).toBeLessThan(
-      types.indexOf('IFRAME_READY')
-    );
-  });
-
-  it("posts the brand's default language, whichever it is", () => {
-    // The editor's per-language text controls take the plain-string form to
-    // mean this language; left to guess, the editor assumed English.
-    mockLocalization.defaultLocaleValue = 'de';
-
-    render(<EditorLocaleBridge />);
-
-    expect(localeFrames()).toEqual([
-      expect.objectContaining({
-        data: expect.objectContaining({ locale: 'tr', defaultLocale: 'de' })
-      })
-    ]);
-  });
-
   it("follows the editor's switch exactly once, with several placeholders mounted", () => {
     render(
       <>

package/src/blocks/__tests__/account-menu-items.test.tsx

@@ -0,0 +1,329 @@
+/**
+ * ZERO-5475: the account menu's items are a list the designer edits — added
+ * with +, removed with −, reordered — instead of five fixed keys.
+ *
+ * Every composition saved before the list existed has no `menuItems` and must
+ * render exactly as it did. Each entry can carry its own selected rule and
+ * further pages that keep it selected, and a horizontal menu can scroll
+ * sideways instead of wrapping.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+let mockPathname = '/account';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn() }),
+  usePathname: () => mockPathname,
+  useSearchParams: () => new URLSearchParams('')
+}));
+
+// Turkish is the hidden default, English lives under /en.
+const TURKISH = {
+  locale: 'tr',
+  defaultLocaleValue: 'tr',
+  localeUrlStrategy: 'hide-default-locale'
+};
+let mockLocalization: Record<string, unknown> = { ...TURKISH };
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => ({ t: (path: string) => path, ...mockLocalization })
+}));
+
+jest.mock('@akinon/next/utils', () => ({
+  __esModule: true,
+  ...jest.requireActual('@akinon/next/utils'),
+  urlLocaleMatcherRegex: /^\/(en)(?=\/|$)/
+}));
+
+// jest maps every `@akinon/next/data/client/*` to one module, so this mock
+// stands in for `user` as well: the account menu needs its logout mutation.
+jest.mock('@akinon/next/data/client/misc', () => ({
+  useLogoutMutation: () => [jest.fn(), { isLoading: false }]
+}));
+
+import AccountMenuBlock from '../account-menu-block';
+
+const mkBlock = (properties: Record<string, unknown> = {}) =>
+  ({
+    id: 'account-menu-1',
+    type: 'account-menu',
+    label: 'account-menu',
+    order: 0,
+    hidden: false,
+    value: '',
+    properties,
+    styles: {},
+    blocks: []
+  } as never);
+
+const blockProps = {
+  placeholderId: 'account-menu',
+  sectionId: 'account-menu-main',
+  currentBreakpoint: 'desktop',
+  isDesigner: false
+};
+
+const renderMenu = (
+  properties: Record<string, unknown>,
+  overrides: Partial<typeof blockProps> = {}
+) =>
+  render(
+    <AccountMenuBlock
+      block={mkBlock(properties)}
+      {...blockProps}
+      {...overrides}
+    />
+  );
+
+const links = (root: ParentNode) =>
+  Array.from(root.querySelectorAll('a')).map((a) => ({
+    label: a.textContent,
+    href: a.getAttribute('href'),
+    key: a.getAttribute('data-account-menu-item')
+  }));
+
+const selectedLabels = (root: ParentNode) =>
+  Array.from(root.querySelectorAll('a[aria-current="page"]')).map(
+    (a) => a.textContent
+  );
+
+// Gant's tab strip, the menu this list was built for.
+const GANT_TABS = [
+  { id: 'dashboard', label: 'Hesabım', href: '/account', match: 'exact' },
+  {
+    id: 'orders',
+    label: 'Siparişlerim',
+    href: '/users/orders',
+    match: 'startsWith',
+    activePaths: '/account/orders'
+  },
+  {
+    id: 'favourites',
+    label: 'Favorilerim',
+    href: '/account/favourite-products/',
+    match: 'startsWith'
+  },
+  { id: 'loyalty', label: 'MyGANT', href: '/account/loyalty' },
+  {
+    id: 'personal',
+    label: 'Kişisel Bilgiler',
+    href: '/account/profile',
+    activePaths:
+      '/account/address, /account/change-email,\n/account/change-password'
+  },
+  { id: 'coupons', label: 'Kuponlarım', href: '/account/coupons' }
+];
+
+beforeEach(() => {
+  mockLocalization = { ...TURKISH };
+  mockPathname = '/account';
+});
+
+describe('account menu without an item list', () => {
+  it('renders the five fixed entries a published composition has always had', () => {
+    const { container } = renderMenu({});
+
+    expect(links(container)).toEqual([
+      { label: 'Orders', href: '/account/orders', key: 'orders' },
+      { label: 'Addresses', href: '/account/address', key: 'addresses' },
+      { label: 'Profile', href: '/account/profile', key: 'profile' },
+      {
+        label: 'Favourites',
+        href: '/account/favourite-products',
+        key: 'favourites'
+      },
+      { label: 'Coupons', href: '/account/coupons', key: 'coupons' }
+    ]);
+  });
+
+  it('still follows itemOrder and the per-key labels and links', () => {
+    const { container } = renderMenu({
+      itemOrder: 'coupons, orders',
+      ordersLabel: 'Siparişlerim',
+      ordersHref: '/users/orders'
+    });
+
+    expect(links(container)).toEqual([
+      { label: 'Coupons', href: '/account/coupons', key: 'coupons' },
+      { label: 'Siparişlerim', href: '/users/orders', key: 'orders' }
+    ]);
+  });
+
+  // A drop in the editor seeds `{desktop: undefined}` for a property without
+  // a default; the panel shows the five fixed entries for it, so must the page.
+  it.each([
+    ['the bucket a drop seeds', { desktop: undefined }],
+    ['that bucket once saved', {}],
+    ['a blank value', '']
+  ])('keeps the fixed entries for %s', (_case, menuItems) => {
+    const { container } = renderMenu({ menuItems });
+
+    expect(links(container).map((link) => link.key)).toEqual([
+      'orders',
+      'addresses',
+      'profile',
+      'favourites',
+      'coupons'
+    ]);
+  });
+});
+
+describe('account menu with an item list', () => {
+  it('renders the listed entries in their order, ignoring the fixed keys', () => {
+    const { container } = renderMenu({
+      itemOrder: 'orders,addresses',
+      menuItems: GANT_TABS
+    });
+
+    expect(
+      links(container).map(({ label, href, key }) => [label, href, key])
+    ).toEqual([
+      ['Hesabım', '/account', 'dashboard'],
+      ['Siparişlerim', '/users/orders', 'orders'],
+      ['Favorilerim', '/account/favourite-products/', 'favourites'],
+      ['MyGANT', '/account/loyalty', 'loyalty'],
+      ['Kişisel Bilgiler', '/account/profile', 'personal'],
+      ['Kuponlarım', '/account/coupons', 'coupons']
+    ]);
+  });
+
+  it('skips an entry that has no label or no link yet', () => {
+    const { container } = renderMenu({
+      menuItems: [
+        { id: 'a', label: 'Hesabım', href: '/account' },
+        { id: 'b', label: '', href: '/account/orders' },
+        { id: 'c', label: 'Kuponlarım', href: '  ' },
+        null
+      ]
+    });
+
+    expect(links(container).map((link) => link.label)).toEqual(['Hesabım']);
+  });
+
+  it('shows no entry once every one was removed', () => {
+    const { container } = renderMenu({ menuItems: [], showLogout: true });
+
+    expect(links(container)).toEqual([]);
+    expect(
+      container.querySelector('[data-account-menu-item="logout"]')
+    ).not.toBeNull();
+  });
+
+  it('leaves the storefront empty when the list and logout are both off', () => {
+    const { container } = renderMenu({ menuItems: [], showLogout: false });
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('tells apart two entries that share an id', () => {
+    const { container } = renderMenu({
+      menuItems: [
+        { id: 'tab', label: 'One', href: '/account/one' },
+        { id: 'tab', label: 'Two', href: '/account/two' }
+      ]
+    });
+
+    expect(links(container).map((link) => link.key)).toEqual(['tab', 'tab-2']);
+  });
+
+  it('reads a list authored per breakpoint', () => {
+    const { container } = renderMenu(
+      {
+        menuItems: {
+          desktop: GANT_TABS,
+          mobile: GANT_TABS.slice(0, 2)
+        }
+      },
+      { currentBreakpoint: 'mobile' }
+    );
+
+    expect(links(container).map((link) => link.label)).toEqual([
+      'Hesabım',
+      'Siparişlerim'
+    ]);
+  });
+});
+
+describe('selected entry', () => {
+  it.each([
+    ['/account', ['Hesabım']],
+    ['/users/orders', ['Siparişlerim']],
+    ['/account/orders/1234', ['Siparişlerim']],
+    ['/account/favourite-products', ['Favorilerim']],
+    ['/account/profile', ['Kişisel Bilgiler']],
+    ['/account/change-password', ['Kişisel Bilgiler']],
+    ['/account/change-email', ['Kişisel Bilgiler']],
+    ['/account/address', ['Kişisel Bilgiler']],
+    ['/account/coupons', ['Kuponlarım']]
+  ])('on %s it is %j', (pathname, expected) => {
+    mockPathname = pathname;
+    const { container } = renderMenu({ menuItems: GANT_TABS });
+
+    expect(selectedLabels(container)).toEqual(expected);
+  });
+
+  it('lets an entry without its own rule inherit the block setting', () => {
+    mockPathname = '/account/loyalty/history';
+
+    const exact = renderMenu({ menuItems: GANT_TABS });
+    expect(selectedLabels(exact.container)).toEqual([]);
+    exact.unmount();
+
+    const section = renderMenu({
+      menuItems: GANT_TABS,
+      activeMatch: 'startsWith'
+    });
+    // Hesabım says "only this page" itself, so the section rule leaves it out.
+    expect(selectedLabels(section.container)).toEqual(['MyGANT']);
+  });
+
+  it('matches the further pages in the localized form the links render', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+    mockPathname = '/en/account/address';
+    const { container } = renderMenu({ menuItems: GANT_TABS });
+
+    expect(selectedLabels(container)).toEqual(['Kişisel Bilgiler']);
+  });
+});
+
+describe('horizontal overflow', () => {
+  const nav = (root: ParentNode) =>
+    root.querySelector('[data-account-menu]') as HTMLElement;
+
+  it('wraps by default, as a horizontal menu always has', () => {
+    const { container } = renderMenu({ orientation: 'horizontal' });
+
+    expect(nav(container).style.flexWrap).toBe('wrap');
+    expect(
+      nav(container).getAttribute('data-account-menu-overflow')
+    ).toBeNull();
+  });
+
+  it('stays on one line and scrolls sideways when set to scroll', () => {
+    const { container } = renderMenu({
+      orientation: 'horizontal',
+      overflow: 'scroll',
+      menuItems: GANT_TABS
+    });
+    const menu = nav(container);
+
+    expect(menu.getAttribute('data-account-menu-overflow')).toBe('scroll');
+    expect(menu.style.flexWrap).toBe('nowrap');
+    expect(menu.style.overflowX).toBe('auto');
+    expect(menu.style.whiteSpace).toBe('nowrap');
+    expect((container.querySelector('a') as HTMLElement).style.flexShrink).toBe(
+      '0'
+    );
+  });
+
+  it('ignores the setting on a vertical menu', () => {
+    const { container } = renderMenu({ overflow: 'scroll' });
+    const menu = nav(container);
+
+    expect(menu.style.flexDirection).toBe('column');
+    expect(menu.style.overflowX).toBe('');
+    expect(menu.getAttribute('data-account-menu-overflow')).toBeNull();
+  });
+});

package/src/blocks/__tests__/text-block.test.tsx

@@ -2,31 +2,9 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import TextBlock from '../text-block';
 
-// The page's language and the storefront's default, as the localization
-// provider reports them. Most cases run on an English-default store showing
-// English; the fallback case moves both.
-const mockLocalization = { locale: 'en-us', defaultLocaleValue: 'en-us' };
-
-jest.mock('@akinon/next/hooks', () => ({
-  __esModule: true,
-  useLocalization: () => ({
-    t: (path: string) => path,
-    setLocale: () => {},
-    setCurrency: () => {},
-    locale: mockLocalization.locale,
-    currency: 'USD',
-    locales: [{ value: 'en-us' }, { value: 'tr-tr' }],
-    currencies: ['USD'],
-    defaultLocaleValue: mockLocalization.defaultLocaleValue,
-    defaultCurrencyCode: 'USD',
-    localeUrlStrategy: 'hide-default-locale'
-  })
-}));
-
-beforeEach(() => {
-  mockLocalization.locale = 'en-us';
-  mockLocalization.defaultLocaleValue = 'en-us';
-});
+// The mocked useLocalization (jest/__mocks__/akinon-next-hooks.js) returns
+// locale: 'en-us'. process.env.NEXT_PUBLIC_DEFAULT_LOCALE is unset in the
+// jest env, so the component's defaultLocale falls back to 'en'.
 
 const renderBlock = (value: unknown, styles?: Record<string, unknown>) => {
   const block: any = { id: 'b1', type: 'text', value, styles };
@@ -56,16 +34,10 @@ describe('TextBlock value-shape resolution', () => {
     );
   });
 
-  it("falls back to the storefront's default language when the active one is absent", () => {
-    // A Turkish-default store showing German. The entry under `en` is what
-    // the block used to show: its default was read from an env variable
-    // that falls back to English, not from the storefront (ZERO-5296).
-    mockLocalization.locale = 'de-de';
-    mockLocalization.defaultLocaleValue = 'tr-tr';
-
-    const { container } = renderBlock({ en: 'EN', 'tr-tr': 'TR' });
+  it('falls back to defaultLocale ("en") when active locale is absent', () => {
+    const { container } = renderBlock({ en: 'EN', fr: 'FR' });
     expect((container.querySelector('div') as HTMLDivElement).innerHTML).toBe(
-      'TR'
+      'EN'
     );
   });