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

package/src/auth/read-auth-error.ts

@@ -0,0 +1,332 @@
+/**
+ * What a commerce refusal actually says, and which field it says it about.
+ *
+ * Every composed auth form used to carry its own copy of this, and all three
+ * copies made the same mistake: they kept a message only when it was a string.
+ * Commerce sends field errors as `{ name, value: string[] }` — that is the
+ * shape `buildFieldErrors` in `@akinon/next/api/auth.ts` serialises — so the
+ * commonest real refusals ("this e-mail is already registered", "this password
+ * is too common") extracted to nothing, the empty result fell through to
+ * `String(error)`, and the shopper was shown the raw
+ * `[{"type":"field_errors","data":[…]}]`. Because that string is non-empty, the
+ * designer's authored fallback sentence never fired either, so there was no way
+ * to author around it.
+ *
+ * Two shapes reach a form, and both land here:
+ *
+ *  - the serialised `AuthError[]` string next-auth hands back (v4 on `error`,
+ *    v5 on `code`), which is what a `signIn()` form reads;
+ *  - the raw commerce body an RTK Query mutation rejects with — `{ email:
+ *    ['…'], non_field_errors: ['…'] }` — which is what the forgot-password
+ *    form gets, and used to discard entirely.
+ *
+ * The reading separates what belongs to the form from what belongs to a field,
+ * because those go to different places on screen: the form-level sentence to a
+ * Form Error block, the field-level ones under the inputs, through the same
+ * `AuthFieldErrorsProvider` client validation already writes to.
+ */
+
+/** Nothing was wrong, or nothing legible was said about it. */
+const EMPTY_READING = {
+  formMessage: '',
+  fieldMessages: {} as Readonly<Record<string, string>>,
+  hasOtpChallenge: false,
+  hasCaptchaChallenge: false
+};
+
+export interface AuthErrorReading {
+  /** The sentence for the form-level slot. '' when every message found a field. */
+  formMessage: string;
+  /** One sentence per submitted control name, ready for the errors provider. */
+  fieldMessages: Readonly<Record<string, string>>;
+  /**
+   * Commerce accepted the credentials and wants an SMS code. A HANDOFF, not a
+   * failure — the register form parks its payload and an `otp-form` finishes
+   * the journey — which is why it is reported separately from the messages.
+   */
+  hasOtpChallenge: boolean;
+  /**
+   * Commerce escalated to a captcha after too many attempts. Also carries no
+   * message of its own, and nothing in this theme can answer it yet, so a form
+   * reports it as a sentence rather than pretending the submit merely failed.
+   */
+  hasCaptchaChallenge: boolean;
+}
+
+/** Copy for the two challenges that arrive with no words in them. */
+export interface AuthErrorCopy {
+  otp?: string;
+  captcha?: string;
+}
+
+/**
+ * Every sentence inside one value, whatever shape it arrived in.
+ *
+ * A commerce field error is `string[]`; a `non_field_errors` payload is
+ * sometimes a bare string; a brand's middleware occasionally re-encodes the
+ * array as a JSON string. All three are the same thing to a shopper, so all
+ * three are flattened here rather than in three call sites.
+ */
+const messagesOf = (value: unknown): string[] => {
+  if (typeof value === 'string') {
+    const text = value.trim();
+    if (!text) return [];
+
+    // A JSON-encoded array is unwrapped, but only when it really is one:
+    // `JSON.parse` would also happily turn "42" into a number and an ordinary
+    // sentence into a throw.
+    if (text.startsWith('[') || text.startsWith('{')) {
+      try {
+        return messagesOf(JSON.parse(text));
+      } catch {
+        return [text];
+      }
+    }
+
+    return [text];
+  }
+
+  if (Array.isArray(value)) {
+    return value.flatMap((item) => messagesOf(item));
+  }
+
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+
+    // `{ name, value }` is the field-error entry; `{ message }` and
+    // `{ detail }` are what a brand's own error middleware tends to send.
+    return messagesOf(record.value ?? record.message ?? record.detail);
+  }
+
+  return [];
+};
+
+/** A field's messages, appended rather than replacing what is already there. */
+const addFieldMessage = (
+  fieldMessages: Record<string, string>,
+  name: string,
+  messages: string[]
+) => {
+  const text = messages.join(' ');
+  if (!text) return;
+
+  fieldMessages[name] = fieldMessages[name]
+    ? `${fieldMessages[name]} ${text}`
+    : text;
+};
+
+/**
+ * The serialised `AuthError[]` a next-auth credentials refusal carries.
+ *
+ * An unknown entry type keeps its messages at form level rather than being
+ * dropped: a brand that added its own error type must still be able to tell
+ * the shopper something, and that is what every previous copy of this did.
+ */
+export const readAuthError = (
+  error: string | null | undefined,
+  copy: AuthErrorCopy = {}
+): AuthErrorReading => {
+  if (!error) return EMPTY_READING;
+
+  let parsed: unknown;
+
+  try {
+    parsed = JSON.parse(error);
+  } catch {
+    return { ...EMPTY_READING, formMessage: String(error) };
+  }
+
+  if (!Array.isArray(parsed)) {
+    return { ...EMPTY_READING, formMessage: String(error) };
+  }
+
+  const formMessages: string[] = [];
+  const fieldMessages: Record<string, string> = {};
+  let hasOtpChallenge = false;
+  let hasCaptchaChallenge = false;
+
+  parsed.forEach((entry) => {
+    const type = (entry as { type?: unknown })?.type;
+    const data = (entry as { data?: unknown })?.data;
+
+    if (type === 'otp') {
+      hasOtpChallenge = true;
+      if (copy.otp) formMessages.push(copy.otp);
+
+      return;
+    }
+
+    if (type === 'captcha') {
+      hasCaptchaChallenge = true;
+      if (copy.captcha) formMessages.push(copy.captcha);
+
+      return;
+    }
+
+    if (type === 'field_errors' && Array.isArray(data)) {
+      data.forEach((item) => {
+        const name = (item as { name?: unknown })?.name;
+        const messages = messagesOf((item as { value?: unknown })?.value);
+
+        // `non_field_errors` is filtered out upstream, but a brand's own
+        // serialiser may still put it in the list — it is not a field, so it
+        // must not be hung under one.
+        if (typeof name !== 'string' || !name || name === 'non_field_errors') {
+          formMessages.push(...messages);
+
+          return;
+        }
+
+        addFieldMessage(fieldMessages, name, messages);
+      });
+
+      return;
+    }
+
+    formMessages.push(...messagesOf(data));
+  });
+
+  const formMessage = formMessages.join(' ');
+
+  // Nothing legible AND nothing attributed: show the raw detail rather than an
+  // empty error slot, which is what the copies this replaces did. A challenge
+  // is not "nothing" — the form has its own answer for those.
+  if (
+    !formMessage &&
+    Object.keys(fieldMessages).length === 0 &&
+    !hasOtpChallenge &&
+    !hasCaptchaChallenge
+  ) {
+    return { ...EMPTY_READING, formMessage: String(error) };
+  }
+
+  return { formMessage, fieldMessages, hasOtpChallenge, hasCaptchaChallenge };
+};
+
+/**
+ * The raw commerce body an RTK Query mutation rejects with — `error.data`.
+ *
+ * Same reading, different envelope: keys are field names, `non_field_errors`
+ * and `detail` are form-level, and a `redirect_url` naming captcha is the same
+ * escalation the credentials provider reports as `{ type: 'captcha' }` (see
+ * `buildFieldErrors`).
+ */
+export const readCommerceError = (
+  payload: unknown,
+  copy: AuthErrorCopy = {}
+): AuthErrorReading => {
+  if (!payload) return EMPTY_READING;
+
+  if (typeof payload === 'string') return readAuthError(payload, copy);
+
+  if (typeof payload !== 'object' || Array.isArray(payload)) {
+    return { ...EMPTY_READING, formMessage: messagesOf(payload).join(' ') };
+  }
+
+  const record = payload as Record<string, unknown>;
+  const formMessages: string[] = [];
+  const fieldMessages: Record<string, string> = {};
+  let hasCaptchaChallenge = false;
+
+  Object.entries(record).forEach(([name, value]) => {
+    if (name === 'redirect_url') {
+      if (typeof value === 'string' && value.includes('captcha')) {
+        hasCaptchaChallenge = true;
+        if (copy.captcha) formMessages.push(copy.captcha);
+      }
+
+      return;
+    }
+
+    if (name === 'non_field_errors' || name === 'detail' || name === 'error') {
+      formMessages.push(...messagesOf(value));
+
+      return;
+    }
+
+    addFieldMessage(fieldMessages, name, messagesOf(value));
+  });
+
+  return {
+    formMessage: formMessages.join(' '),
+    fieldMessages,
+    hasOtpChallenge: false,
+    hasCaptchaChallenge
+  };
+};
+
+/**
+ * The reading, re-split against the form that is actually on screen.
+ *
+ * A message hung on a name no control submits under would be a message the
+ * shopper never sees — commerce names a field this composition did not author
+ * (a brand-specific `tckn`, a field the designer removed), and the sentence
+ * would vanish into a provider nothing reads. Those move up to the form-level
+ * slot, which is the one place that always exists.
+ *
+ * Called with no form (the fixed-row path measures nothing) everything stays
+ * where the reading put it: those rows render `fieldErrors[name]` for their own
+ * fixed names, so the attribution is already right.
+ */
+export const splitByKnownFields = (
+  reading: AuthErrorReading,
+  form: HTMLFormElement | null | undefined,
+  knownNames?: readonly string[]
+): AuthErrorReading => {
+  const names = Object.keys(reading.fieldMessages);
+  if (names.length === 0) return reading;
+
+  const known = new Set<string>(knownNames || []);
+
+  if (form) {
+    form
+      .querySelectorAll<HTMLElement>('input[name], select[name], textarea[name]')
+      .forEach((control) => {
+        const name = control.getAttribute('name');
+        if (name) known.add(name);
+      });
+  }
+
+  if (known.size === 0) return reading;
+
+  const kept: Record<string, string> = {};
+  const orphaned: string[] = [];
+
+  names.forEach((name) => {
+    if (known.has(name)) {
+      kept[name] = reading.fieldMessages[name];
+
+      return;
+    }
+
+    orphaned.push(reading.fieldMessages[name]);
+  });
+
+  if (orphaned.length === 0) return reading;
+
+  return {
+    ...reading,
+    formMessage: [reading.formMessage, ...orphaned]
+      .filter(Boolean)
+      .join(' ')
+      .trim(),
+    fieldMessages: kept
+  };
+};
+
+/**
+ * What a form shows in its form-level slot after a refusal.
+ *
+ * The authored fallback is for a refusal nobody could read — NOT for one whose
+ * every sentence is already under a field, where a second generic line above
+ * the inputs would only add noise.
+ */
+export const authFormMessage = (
+  reading: AuthErrorReading,
+  fallback: string
+): string => {
+  if (reading.formMessage) return reading.formMessage;
+  if (Object.keys(reading.fieldMessages).length > 0) return '';
+
+  return fallback;
+};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 // react-multi-carousel is an ESM/DOM-heavy dependency. Replace its default
 // export with a passthrough that simply renders its children so we can assert
@@ -365,3 +365,267 @@ describe('SliderBlock — arrow button placement', () => {
     expect(previous(container).className).toContain('z-10');
   });
 });
+
+/**
+ * EVERY SLIDE IS THE SAME HEIGHT, OR THE DIVIDER BETWEEN TWO CARDS IS RAGGED.
+ *
+ * react-multi-carousel stretches its own `li` to the tallest slide, and a card
+ * inside one asks for `height: 100%`. Between the two sits this block's own
+ * per-slide wrapper, which had no height of its own — so the percentage
+ * resolved against an auto-height box, fell back to `auto`, and each card
+ * ended up as tall as its own text. The only lever a composition had was
+ * scoped custom CSS reaching into the library's class names, per section.
+ *
+ * Naming the wrapper makes it addressable from the panel (`slide/height`), so
+ * the marker is the contract: the editor's descriptor-conformance test fails
+ * the "Slide" part group the moment this attribute stops being emitted.
+ */
+describe('SliderBlock — the slide wrapper is a styleable part', () => {
+  const slideWrappers = (container: HTMLElement) =>
+    Array.from(container.querySelectorAll('[data-part="slide"]'));
+
+  it('marks one slide wrapper per slide', () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            blocks: [child('a'), child('b'), child('c')]
+          }
+        })}
+      />
+    );
+
+    expect(slideWrappers(container)).toHaveLength(3);
+  });
+
+  it("wraps each slide's card in its own marked box", () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: { ...props().block, blocks: [child('a'), child('b')] }
+        })}
+      />
+    );
+
+    expect(
+      slideWrappers(container).map((wrapper) =>
+        wrapper.querySelector('[data-testid="tb"]')?.getAttribute('data-id')
+      )
+    ).toEqual(['a', 'b']);
+  });
+
+  it('does not mark the arrow icons, which are not slides', () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            blocks: [
+              child('left', { type: 'icon', label: 'Left Arrow Icon' }),
+              child('right', { type: 'icon', label: 'Right Arrow Icon' }),
+              child('a')
+            ]
+          }
+        })}
+      />
+    );
+
+    expect(slideWrappers(container)).toHaveLength(1);
+  });
+
+  it('keeps the authored slide padding on the marked box', () => {
+    const { container } = render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            properties: { 'slide-gap': 24 },
+            blocks: [child('a'), child('b')]
+          }
+        })}
+      />
+    );
+
+    expect(
+      (slideWrappers(container)[0] as HTMLElement).style.paddingLeft
+    ).toBe('12px');
+  });
+});
+
+/**
+ * TWO THINGS THE PANEL COULD ASK FOR AND THE ARROWS COULD NOT DO.
+ *
+ * The arrow buttons are not composed blocks — the slider draws its own
+ * <button> and reads a fixed handful of the arrow icon block's style keys — so
+ * a key the reader does not know reaches the theme JSON and stops there. Rotate
+ * was one of those: the same right-pointing SVG ships for both sides, and a
+ * designer turning the left one round got nothing.
+ *
+ * The reveal-on-hover option is state rather than a `group-hover:` class
+ * because a brand's Tailwind `content` list does not scan this package: a class
+ * only this file writes is never generated, so the arrows would go away and
+ * never come back.
+ */
+describe('SliderBlock — arrow rotate and reveal-on-hover', () => {
+  // jest/setup.ts answers every media query with `matches: false`, which is a
+  // touch device — and the option is deliberately inert there. These cases are
+  // about the pointer that CAN hover, so they say so.
+  const setHoverCapability = (matches: boolean) => {
+    window.matchMedia = ((query: string) => ({
+      matches,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false
+    })) as unknown as typeof window.matchMedia;
+  };
+
+  beforeEach(() => setHoverCapability(true));
+
+  const arrow = (label: string, styles: Record<string, unknown>) =>
+    child(label, { type: 'icon', label, value: { url: '/a.svg' }, styles });
+
+  const glyphs = (container: HTMLElement) =>
+    Array.from(container.querySelectorAll('img')) as HTMLImageElement[];
+  const buttons = (container: HTMLElement) =>
+    Array.from(
+      container.querySelectorAll('button[aria-label="Previous"], button[aria-label="Next"]')
+    ) as HTMLElement[];
+
+  // An authored top/bottom is what moves the arrows out of the carousel, which
+  // is the branch a storefront render can assert on (the mocked Carousel drops
+  // its customArrow props).
+  const outside = (extra: Record<string, unknown> = {}) => ({
+    top: '0px',
+    ...extra
+  });
+
+  const renderSlider = (
+    arrowStyles: Record<string, unknown>,
+    over: Record<string, unknown> = {},
+    properties: Record<string, unknown> = {}
+  ) =>
+    render(
+      <SliderBlock
+        {...props({
+          block: {
+            ...props().block,
+            properties,
+            blocks: [
+              arrow('Left Arrow Icon', arrowStyles),
+              child('s1'),
+              arrow('Right Arrow Icon', arrowStyles)
+            ]
+          },
+          ...over
+        })}
+      />
+    );
+
+  it('turns an authored rotate into a rotation on the glyph', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: '180deg' } }));
+
+    expect(glyphs(container).map((img) => img.style.rotate)).toEqual([
+      '180deg',
+      '180deg'
+    ]);
+  });
+
+  it('reads the bare number the Rotate box stores as degrees', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: 180 } }));
+
+    expect(glyphs(container)[0].style.rotate).toBe('180deg');
+  });
+
+  // The Rotate box is free text, so the function spelling turns up as often as
+  // the value one; left alone it emits `rotate: rotate(45deg)` and is dropped.
+  it('unwraps the function spelling a free-text box invites', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: 'rotate(45deg)' } }));
+
+    expect(glyphs(container)[0].style.rotate).toBe('45deg');
+  });
+
+  it('reads a leading-dot number as degrees', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: '.5' } }));
+
+    expect(glyphs(container)[0].style.rotate).toBe('.5deg');
+  });
+
+  it('passes a unit through untouched', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: '0.5turn' } }));
+
+    expect(glyphs(container)[0].style.rotate).toBe('0.5turn');
+  });
+
+  it('leaves the glyph unrotated when nothing is authored', () => {
+    const { container } = renderSlider(outside());
+
+    expect(glyphs(container)[0].style.rotate).toBeFalsy();
+  });
+
+  // The rotation must not fight the button's own centring translate.
+  it('rotates the glyph, never the button', () => {
+    const { container } = renderSlider(outside({ rotate: { desktop: '180deg' } }));
+
+    expect(buttons(container)[0].style.rotate).toBeFalsy();
+    expect(buttons(container)[0].style.transform).toBeFalsy();
+  });
+
+  it('hides the arrows until the slider is hovered when asked to', () => {
+    const { container } = renderSlider(outside(), {}, {
+      'arrows-on-hover': { desktop: true }
+    });
+    const root = container.firstElementChild as HTMLElement;
+
+    expect(buttons(container).map((b) => b.style.opacity)).toEqual(['0', '0']);
+    expect(buttons(container)[0].style.pointerEvents).toBe('none');
+
+    fireEvent.mouseEnter(root);
+    expect(buttons(container).map((b) => b.style.opacity)).toEqual(['1', '1']);
+    expect(buttons(container)[0].style.pointerEvents).toBe('auto');
+
+    fireEvent.mouseLeave(root);
+    expect(buttons(container)[0].style.opacity).toBe('0');
+  });
+
+  // Keyboard users never send a mouseenter.
+  it('reveals the arrows when focus lands inside', () => {
+    const { container } = renderSlider(outside(), {}, {
+      'arrows-on-hover': { desktop: true }
+    });
+
+    fireEvent.focus(container.firstElementChild as HTMLElement);
+    expect(buttons(container)[0].style.opacity).toBe('1');
+  });
+
+  it('keeps the arrows visible in the designer, where they must stay selectable', () => {
+    const { container } = renderSlider(outside(), { isDesigner: true }, {
+      'arrows-on-hover': { desktop: true }
+    });
+
+    expect(buttons(container)[0].style.opacity).toBe('');
+    expect(buttons(container)[0].style.pointerEvents).toBe('');
+  });
+
+  // "Hover only" on a phone would mean "never", so the option stands down.
+  it('keeps the arrows visible on a device that cannot hover', () => {
+    setHoverCapability(false);
+    const { container } = renderSlider(outside(), {}, {
+      'arrows-on-hover': { desktop: true }
+    });
+
+    expect(buttons(container)[0].style.opacity).toBe('');
+    expect(buttons(container)[0].style.pointerEvents).toBe('');
+  });
+
+  it('writes no visibility style at all when the option is off', () => {
+    const { container } = renderSlider(outside());
+
+    expect(buttons(container)[0].style.opacity).toBe('');
+    expect(buttons(container)[0].style.transition).toBe('');
+  });
+});

package/src/blocks/account-button-block.tsx

@@ -3,7 +3,9 @@
 import React from 'react';
 import NextLink from 'next/link';
 import { useSession } from 'next-auth/react';
+import { usePathname } from 'next/navigation';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { withReturnPath } from '../auth/auth-destination';
 import useBlockAction from '../hooks/use-block-action';
 import { BlockRendererProps } from './block-renderer-registry';
 import { readToggle } from './product-block-utils';
@@ -50,8 +52,31 @@ const AccountButtonBlock = ({
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
 
+  /**
+   * Whether a guest click records where the shopper was standing.
+   *
+   * On by default, and it has to be here rather than in the form: this control
+   * is the only thing that knows the answer. pz's own route guard redirects to
+   * the auth page with no parameter at all, so a login PAGE had nothing to
+   * return to — which is why the form's "go back where they came from" mode
+   * was unbuildable. Appends `?callbackUrl=<current path>`, which is the key
+   * next-auth and the brands' own views already read; the form ignores
+   * anything that is not a path on this origin.
+   *
+   * Nothing changes for a drawer: it never navigates, so there is no href to
+   * record on. A brand that tracks its login links by url turns it off.
+   */
+  const rememberReturn = readToggle(
+    block.properties?.rememberReturn,
+    currentBreakpoint,
+    true
+  );
+  const pathname = usePathname();
+
   const href = isAuthenticated
     ? prop('accountHref', '/account')
+    : rememberReturn
+    ? withReturnPath(prop('loginHref', '/auth'), pathname)
     : prop('loginHref', '/auth');
   const label = isAuthenticated
     ? prop('accountLabel', 'Account')

package/src/blocks/add-to-cart-block.tsx

@@ -10,6 +10,7 @@ import {
   emitCommerceEvent,
   readItemsCurrency
 } from '../utils/analytics';
+import { useHostModalCloser } from '../overlays/modal-host-context';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
   DesignerPlaceholder,
@@ -118,6 +119,19 @@ const AddToCartBlock = ({
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
 
+  /**
+   * Whether finishing closes the modal this block is inside. OFF by default
+   * here, because this block's success state is something the shopper is meant
+   * to read — see `useHostModalCloser`.
+   */
+  const closeHostModalOnSuccess = readToggle(
+    block.properties?.closeHostModalOnSuccess,
+    currentBreakpoint,
+    false
+  );
+  const closeHostModal = useHostModalCloser(closeHostModalOnSuccess);
+
+
   const label = prop('label', 'Add to Cart');
   const addingLabel = prop('addingLabel', 'Adding…');
   const addedLabel = prop('addedLabel', 'Added');
@@ -286,6 +300,7 @@ const AddToCartBlock = ({
       // by the mini-basket chrome block) has to be refreshed explicitly.
       dispatch(basketApi.util.invalidateTags(['Basket', 'MiniBasket']));
       setFeedback('added');
+      closeHostModal();
       emitCommerceEvent('add_to_cart', {
         currency: readItemsCurrency(product),
         items: [buildCommerceItem(product, { quantity })]