@akinon/pz-theme 2.0.106-beta.0 → 2.0.106

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.106-beta.0
+## 2.0.106
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.106-beta.0
-  - @akinon/theme-contract@2.0.106-beta.0
+- e083ee2: ZERO-5078: Keep pz-theme buildable on v1 brands (Next 14.2, React 18 types, @akinon/next 1.x)
+  - @akinon/next@2.0.106
+  - @akinon/theme-contract@2.0.106
 
 ## 2.0.105
 

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.106-beta.0",
+  "version": "2.0.106",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.106-beta.0",
+    "@akinon/next": "2.0.106",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.106-beta.0",
+    "@akinon/theme-contract": "2.0.106",
     "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.106-beta.0",
+    "@akinon/next": "2.0.106",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/reset-password-composed.test.tsx

@@ -17,6 +17,7 @@ import { Block } from '../theme-block';
  */
 
 const passwordReset = jest.fn();
+const validateToken = jest.fn();
 const unwrap = jest.fn();
 let resetState = { isLoading: false, isSuccess: false };
 let validation: {
@@ -34,7 +35,11 @@ jest.mock('@akinon/next/data/client/account', () => ({
     },
     resetState
   ],
-  useGetValidatePasswordResetTokenQuery: () => validation
+  useGetValidatePasswordResetTokenQuery: (...args: unknown[]) => {
+    validateToken(...args);
+
+    return validation;
+  }
 }));
 
 let params: Record<string, string | string[]> = { id: ['tok', 'abc123'] };
@@ -112,6 +117,7 @@ const fill = (container: HTMLElement, first: string, second: string) => {
 
 beforeEach(() => {
   passwordReset.mockClear();
+  validateToken.mockClear();
   unwrap.mockReset();
   unwrap.mockResolvedValue(undefined);
   resetState = { isLoading: false, isSuccess: false };
@@ -154,6 +160,18 @@ describe('the link the mail carries', () => {
     expect(passwordReset.mock.calls[0][0].slug).toBe('xyz789');
   });
 
+  /**
+   * The query is reached through `reset-password-token-check` so that a brand
+   * on the 1.x core can still build (the export is 2.x only). On a core that
+   * HAS it, that indirection must be invisible: same query, same token, same
+   * skip.
+   */
+  it('is put to the core query itself where the core has one', () => {
+    renderBlock();
+
+    expect(validateToken).toHaveBeenCalledWith('tok/abc123', { skip: false });
+  });
+
   it('answers a spent link with the expired state, not with a form', () => {
     validation = { data: { validlink: false }, isLoading: false, isError: false };
 

package/src/__tests__/reset-password-v1-core.test.tsx

@@ -0,0 +1,154 @@
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import ResetPasswordBlock from '../blocks/reset-password-block';
+import {
+  canValidateResetToken,
+  useValidateResetToken
+} from '../blocks/reset-password-token-check';
+import { Block } from '../theme-block';
+
+/**
+ * The same screen on a core that cannot check the link up front.
+ *
+ * `useGetValidatePasswordResetTokenQuery` is a 2.x export, and most brands are
+ * still on the 1.x line. They transpile and type-check this package from
+ * `src`, so importing that name by hand failed their `next build` outright —
+ * and reaching for it at runtime instead would have left `undefined` where a
+ * hook is called. These cases pin what happens instead: nothing throws, the
+ * shopper is shown the two boxes, and the link's validity is settled by the
+ * submit, through the refusal path that already existed.
+ *
+ * The mock below is a 1.x `account` module: `usePasswordResetMutation` and no
+ * pre-check.
+ */
+
+const passwordReset = jest.fn();
+const unwrap = jest.fn();
+
+jest.mock('@akinon/next/data/client/account', () => ({
+  __esModule: true,
+  usePasswordResetMutation: () => [
+    (...args: unknown[]) => {
+      passwordReset(...args);
+
+      return { unwrap };
+    },
+    { isLoading: false, isSuccess: false }
+  ]
+}));
+
+jest.mock('next/navigation', () => ({
+  useParams: () => ({ id: ['tok', 'abc123'] }),
+  useSearchParams: () => new URLSearchParams(),
+  usePathname: () => '/users/reset/tok/abc123'
+}));
+
+const block = (overrides: Partial<Block>): Block =>
+  ({
+    id: 'reset-1',
+    type: 'reset-password',
+    label: 'Reset Password',
+    value: '',
+    order: 0,
+    hidden: false,
+    properties: {},
+    styles: {},
+    ...overrides
+  } as Block);
+
+const renderBlock = (properties = {}) =>
+  render(
+    <ResetPasswordBlock
+      block={block({ properties })}
+      placeholderId="placeholder-1"
+      sectionId="section-1"
+      currentBreakpoint="desktop"
+    />
+  );
+
+const fill = (container: HTMLElement, first: string, second: string) => {
+  fireEvent.change(container.querySelector('input[name="password"]')!, {
+    target: { value: first }
+  });
+  fireEvent.change(container.querySelector('input[name="repeatPassword"]')!, {
+    target: { value: second }
+  });
+};
+
+beforeEach(() => {
+  passwordReset.mockClear();
+  unwrap.mockReset();
+  unwrap.mockResolvedValue(undefined);
+});
+
+describe('a core without the pre-check', () => {
+  it('is recognised rather than assumed', () => {
+    expect(canValidateResetToken).toBe(false);
+  });
+
+  it('still answers in a hook position, so the screen mounts', () => {
+    expect(() =>
+      useValidateResetToken('tok/abc123', { skip: false })
+    ).not.toThrow();
+    expect(useValidateResetToken('tok/abc123', { skip: false })).toEqual({
+      data: undefined,
+      isLoading: false,
+      isError: false
+    });
+  });
+
+  it('offers the two boxes instead of calling the link dead', () => {
+    const { container } = renderBlock();
+
+    // No verdict is not a bad verdict: answering "expired" here would lock
+    // every shopper on a 1.x brand out of a link that is perfectly good.
+    expect(
+      container.querySelector('[data-reset-password-state="expired"]')
+    ).toBeNull();
+    expect(container.querySelector('input[name="password"]')).not.toBeNull();
+    expect(
+      container.querySelector('input[name="repeatPassword"]')
+    ).not.toBeNull();
+  });
+
+  it('never shows the checking state, because nothing is being checked', () => {
+    const { container } = renderBlock({ checkingLabel: 'Checking the link…' });
+
+    expect(
+      container.querySelector('[data-reset-password-state="checking"]')
+    ).toBeNull();
+  });
+
+  it('leaves the verdict to the submit, with the token the mail carried', async () => {
+    const { container } = renderBlock();
+
+    fill(container, 'hunter2A!', 'hunter2A!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() => expect(passwordReset).toHaveBeenCalled());
+    expect(passwordReset).toHaveBeenCalledWith({
+      password: 'hunter2A!',
+      repeatPassword: 'hunter2A!',
+      slug: 'tok/abc123'
+    });
+  });
+
+  it('shows a refused link as an error on the form it is still on', async () => {
+    unwrap.mockRejectedValue({
+      data: { non_field_errors: ['This link has already been used.'] }
+    });
+
+    const { container } = renderBlock();
+
+    fill(container, 'hunter2A!', 'hunter2A!');
+    fireEvent.submit(container.querySelector('form')!);
+
+    await waitFor(() =>
+      expect(
+        container.querySelector('[data-reset-password-error]')
+      ).not.toBeNull()
+    );
+    expect(container.querySelector('form')).not.toBeNull();
+  });
+});

package/src/blocks/__tests__/image-gallery-lightbox-modal.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * What the lightbox asks of the core Modal.
+ *
+ * `headerWrapperClassName` is a 2.x `ModalProps` field, and brands on the 1.x
+ * core type-check this package from `src` — so it is spread rather than
+ * written as a JSX attribute (see the block). That is a type-level move only:
+ * this case pins that the prop still reaches the Modal unchanged, which is the
+ * whole of the v2 behaviour it was protecting.
+ */
+
+const modalProps = jest.fn();
+
+jest.mock('@akinon/next/components/modal', () => {
+  const ReactModule = require('react');
+
+  return {
+    __esModule: true,
+    Modal: (props: Record<string, unknown>) => {
+      modalProps(props);
+
+      return props.open
+        ? ReactModule.createElement(
+            'div',
+            { 'data-testid': 'lightbox' },
+            props.children as React.ReactNode
+          )
+        : null;
+    }
+  };
+});
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: () => null
+}));
+
+import ImageGalleryBlock from '../image-gallery-block';
+
+const baseProps = {
+  placeholderId: 'ph-1',
+  sectionId: 'sec-1',
+  isDesigner: false,
+  selectedBlockId: null,
+  currentBreakpoint: 'desktop'
+} as any;
+
+const block = {
+  id: 'gallery-1',
+  blocks: [
+    {
+      id: 'img-a',
+      type: 'image',
+      value: 'https://cdn/a.jpg',
+      order: 1,
+      properties: { alt: 'Alpha' }
+    }
+  ]
+};
+
+beforeEach(() => modalProps.mockClear());
+
+describe('the image gallery lightbox', () => {
+  it('still asks the modal to drop its header divider', () => {
+    render(<ImageGalleryBlock {...baseProps} block={block} />);
+
+    fireEvent.click(screen.getAllByRole('button')[0]);
+
+    expect(modalProps).toHaveBeenCalled();
+    expect(modalProps.mock.calls[modalProps.mock.calls.length - 1][0]).toEqual(
+      expect.objectContaining({
+        portalId: 'image-gallery-lightbox',
+        open: true,
+        headerWrapperClassName: 'border-0'
+      })
+    );
+  });
+});

package/src/blocks/image-gallery-block.tsx

@@ -7,6 +7,18 @@ import ThemeBlock from '../theme-block';
 import { getResponsiveValue } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
+/**
+ * Spread onto the lightbox rather than written as a JSX attribute. Brands
+ * transpile this file from `src` and type-check it against their own
+ * @akinon/next, and 1.x's `ModalProps` has no `headerWrapperClassName` — so
+ * `next build` would fail there on a prop v2's Modal accepts. Spread, the
+ * lightbox is byte-for-byte the same on v2, and a 1.x Modal ignores the extra
+ * prop and keeps its header divider.
+ */
+const LIGHTBOX_HEADER: Record<string, string> = {
+  headerWrapperClassName: 'border-0'
+};
+
 type GalleryImage = {
   url: string;
   alt: string;
@@ -215,7 +227,7 @@ const ImageGalleryBlock = ({
         title=""
         showCloseButton={true}
         className="w-[92vw] max-w-[1024px] max-h-[90vh] overflow-hidden rounded"
-        headerWrapperClassName="border-0"
+        {...LIGHTBOX_HEADER}
       >
         <div
           className="relative bg-black"

package/src/blocks/reset-password-block.tsx

@@ -2,10 +2,8 @@
 
 import React, { useContext, useState } from 'react';
 import { useParams, useSearchParams } from 'next/navigation';
-import {
-  usePasswordResetMutation,
-  useGetValidatePasswordResetTokenQuery
-} from '@akinon/next/data/client/account';
+import { usePasswordResetMutation } from '@akinon/next/data/client/account';
+import { useValidateResetToken } from './reset-password-token-check';
 import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
 import { readToggle } from './product-block-utils';
 import {
@@ -275,12 +273,17 @@ const ResetPasswordBlock = ({
    * The link's own validity, asked before the shopper is invited to type
    * anything. Skipped in the canvas — the designer has no token, and asking
    * commerce about one would answer "expired" for every composition.
+   *
+   * Through `reset-password-token-check` rather than straight off
+   * `@akinon/next/data/client/account`: the query is a 2.x export, and on a
+   * brand whose core is still 1.x that module has no such name to import. See
+   * that file for what the screen does instead.
    */
   const {
     data: validation,
     isLoading: isValidating,
     isError: validationFailed
-  } = useGetValidatePasswordResetTokenQuery(token, {
+  } = useValidateResetToken(token, {
     skip: !token || isDesigner
   });
 

package/src/blocks/reset-password-token-check.ts

@@ -0,0 +1,69 @@
+'use client';
+
+import * as accountData from '@akinon/next/data/client/account';
+
+/**
+ * What the reset screen needs to know about the link it was opened with.
+ *
+ * Only the three readings the block acts on, rather than RTK Query's whole
+ * result: the hook behind this is reached through the module object (see
+ * below), so its shape has to be written out here instead of inferred from an
+ * import.
+ */
+export interface ResetTokenValidation {
+  data?: { validlink?: boolean };
+  isLoading: boolean;
+  isError: boolean;
+}
+
+type ValidateResetTokenHook = (
+  token: string,
+  options: { skip: boolean }
+) => ResetTokenValidation;
+
+/**
+ * No verdict on the link, which is the reading the block already answers by
+ * showing the form.
+ */
+const UNCHECKED: ResetTokenValidation = {
+  data: undefined,
+  isLoading: false,
+  isError: false
+};
+
+/**
+ * What a core without the query answers.
+ *
+ * A hook in its own right — same call signature, same position — so the block
+ * calls exactly one hook here on every render either way, and the degradation
+ * is the screen brands had before the pre-check existed: the two boxes are
+ * offered, and a link that has expired is refused by the SUBMIT instead of
+ * before it, through the error path that already handles a refusal.
+ */
+const useUncheckedResetToken: ValidateResetTokenHook = () => UNCHECKED;
+
+/**
+ * Read off the module object instead of imported by name.
+ *
+ * `useGetValidatePasswordResetTokenQuery` arrived with @akinon/next 2.x, and
+ * most brands are still on the 1.x line. A brand transpiles and type-checks
+ * this package from `src`, so a named import of an export its core does not
+ * have fails `next build` before the block can ever run — while a bare runtime
+ * lookup would leave `undefined` in a hook position and crash the screen.
+ *
+ * Both are answered here: the name never appears in an import clause, so the
+ * v1 type-checker has nothing to miss, and the fallback above is bound in its
+ * place once, at module load, rather than chosen per render.
+ */
+const providedHook = (accountData as unknown as Record<string, unknown>)
+  .useGetValidatePasswordResetTokenQuery as ValidateResetTokenHook | undefined;
+
+/** Whether the core in use can check a reset link before the shopper types. */
+export const canValidateResetToken = typeof providedHook === 'function';
+
+/**
+ * The core's query where there is one, the fallback where there is not. Bound
+ * at module load: the choice is made before any render, never during one.
+ */
+export const useValidateResetToken: ValidateResetTokenHook =
+  providedHook ?? useUncheckedResetToken;

package/src/chrome/__tests__/theme-fonts-link.test.tsx

@@ -0,0 +1,36 @@
+import { ThemeFontsLink, THEME_FONTS_CSS_PATH } from '../theme-fonts-link';
+
+/**
+ * The stylesheet a theme's uploaded faces are served from.
+ *
+ * `precedence` is what makes React hoist this link into the head and keep one
+ * copy of it across placeholders, and it is spread rather than written as a
+ * JSX attribute because @types/react 18 — what brands on the 1.x line
+ * type-check against — does not declare it. The element is read here rather
+ * than rendered, so the case pins the prop itself and not React's hoisting.
+ */
+
+const element = (settings: Record<string, unknown> | null) =>
+  ThemeFontsLink({ settings }) as React.ReactElement | null;
+
+describe('the theme fonts stylesheet link', () => {
+  it('carries the precedence that hoists and dedupes it', () => {
+    const link = element({ customFonts: [{ family: 'Whitney' }] });
+
+    expect(link).not.toBeNull();
+    expect(link!.props).toEqual(
+      expect.objectContaining({
+        rel: 'stylesheet',
+        href: THEME_FONTS_CSS_PATH,
+        'data-pz-theme-fonts': 'true',
+        precedence: 'pz-theme-fonts'
+      })
+    );
+  });
+
+  it('is not rendered at all when the theme has uploaded no faces', () => {
+    expect(element({ customFonts: [] })).toBeNull();
+    expect(element({})).toBeNull();
+    expect(element(null)).toBeNull();
+  });
+});

package/src/chrome/theme-fonts-link.tsx

@@ -16,6 +16,17 @@ import * as React from 'react';
  */
 export const THEME_FONTS_CSS_PATH = '/api/theme-fonts';
 
+/**
+ * Spread onto the link rather than written as a JSX attribute. Brands
+ * transpile this file from `src` and type-check it against their own
+ * @types/react; 18.x does not declare `precedence`, so `next build` would fail
+ * on a prop the renderer itself accepts. The rendered element is identical.
+ * Same reason, same shape, as `theme-google-fonts-links.tsx`.
+ */
+const HOIST_AS_RESOURCE: Record<string, string> = {
+  precedence: 'pz-theme-fonts'
+};
+
 /**
  * Rendered by every placeholder; React keeps ONE of them, matched by `href`,
  * and hoists it into the head.
@@ -38,7 +49,7 @@ export const ThemeFontsLink = ({
       // Read by the client font effect, which stands down when the document
       // already links the faces.
       data-pz-theme-fonts="true"
-      precedence="pz-theme-fonts"
+      {...HOIST_AS_RESOURCE}
     />
   );
 };