@akinon/pz-theme 2.0.83-rc.0 → 2.0.84-beta.0

package/src/blocks/__tests__/store-locator-block.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import StoreLocatorBlock from '../store-locator-block';
 import { ThemePageContextProvider } from '../../theme-page-context';
+import { isScrollLocked } from '../../hooks/use-overlay';
 
 /**
  * The store list is the block a brand already has on the page, and the find-in-
@@ -265,6 +266,7 @@ describe('store locator — find in store is a dialog', () => {
     expect(trigger(container).getAttribute('aria-haspopup')).toBe('dialog');
     expect(trigger(container).getAttribute('aria-expanded')).toBe('false');
     expect(panel(container)).toBeNull();
+    expect(isScrollLocked()).toBe(false);
     expect(document.body.style.overflow).toBe('');
   });
 
@@ -281,7 +283,7 @@ describe('store locator — find in store is a dialog', () => {
     expect(dialog.getAttribute('aria-label')).toBe('Find in store');
     expect(trigger(container).getAttribute('aria-expanded')).toBe('true');
     expect(dialog.contains(document.activeElement)).toBe(true);
-    expect(document.body.style.overflow).toBe('hidden');
+    expect(isScrollLocked()).toBe(true);
   });
 
   it('holds Tab inside the dialog', () => {
@@ -335,6 +337,7 @@ describe('store locator — find in store is a dialog', () => {
 
     expect(panel(container)).toBeNull();
     expect(document.activeElement).toBe(trigger(container));
+    expect(isScrollLocked()).toBe(false);
     expect(document.body.style.overflow).toBe('');
   });
 
@@ -368,14 +371,15 @@ describe('store locator — find in store is a dialog', () => {
 
     act(() => trigger(a.container).click());
     act(() => trigger(b.container).click());
-    expect(document.body.style.overflow).toBe('hidden');
+    expect(isScrollLocked()).toBe(true);
 
     b.unmount();
     // The first panel is still over the page, so the lock is not the second
     // panel's to release.
-    expect(document.body.style.overflow).toBe('hidden');
+    expect(isScrollLocked()).toBe(true);
 
     a.unmount();
+    expect(isScrollLocked()).toBe(false);
     expect(document.body.style.overflow).toBe('');
   });
 
@@ -424,7 +428,7 @@ describe('store locator — find in store is a dialog', () => {
     // Escape backed out of one panel, not out of every panel on the page — so
     // the page stays frozen behind the one still covering it, and that one
     // takes the claim back now that it is on top.
-    expect(document.body.style.overflow).toBe('hidden');
+    expect(isScrollLocked()).toBe(true);
     expect(
       (panel(a.container) as HTMLElement).getAttribute('aria-modal')
     ).toBe('true');
@@ -434,19 +438,41 @@ describe('store locator — find in store is a dialog', () => {
     });
 
     expect(panel(a.container)).toBeNull();
+    expect(isScrollLocked()).toBe(false);
     expect(document.body.style.overflow).toBe('');
   });
 
-  it('restores the page value the first locker found, not an empty one', () => {
+  it('never takes the page value it found, so clip stays clip throughout', () => {
+    // Each block used to save `body.style.overflow`, overwrite it and put it
+    // back, so whatever the page had declared was only ever as safe as the
+    // block that borrowed it: the SECOND panel to open saved `hidden` as "the
+    // page's own value" and the page never got its own back. Two panels is
+    // what it takes to reproduce that, which is why both are here. The lock is
+    // an author rule keyed off an attribute now, so the inline slot is neither
+    // read nor written, and the page's `clip` is still exactly `clip` while a
+    // panel covers the page — not merely restored once the panels have gone.
     document.body.style.overflow = 'clip';
 
-    const { container } = renderBlock({ displayMode: 'trigger' });
-    act(() => trigger(container).click());
-    expect(document.body.style.overflow).toBe('hidden');
+    const a = renderBlock({ displayMode: 'trigger' });
+    const b = renderBlock({ displayMode: 'trigger' });
+
+    act(() => trigger(a.container).click());
+    act(() => trigger(b.container).click());
+    expect(isScrollLocked()).toBe(true);
+    expect(document.body.style.overflow).toBe('clip');
+
+    // Escape backs out of the panel on top; the one underneath still holds the
+    // page, and the page's own value is still nobody's to hand back.
+    act(() => {
+      fireEvent.keyDown(document, { key: 'Escape' });
+    });
+    expect(isScrollLocked()).toBe(true);
+    expect(document.body.style.overflow).toBe('clip');
 
     act(() => {
       fireEvent.keyDown(document, { key: 'Escape' });
     });
+    expect(isScrollLocked()).toBe(false);
     expect(document.body.style.overflow).toBe('clip');
   });
 });
@@ -466,6 +492,7 @@ describe('store locator — the designer is not a shopper', () => {
     expect(dialog).toBeTruthy();
     expect(dialog.getAttribute('aria-modal')).toBeNull();
     expect(document.activeElement).toBe(outside);
+    expect(isScrollLocked()).toBe(false);
     expect(document.body.style.overflow).toBe('');
 
     // Nothing a click reaches may close the panel being styled.

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

@@ -144,7 +144,13 @@ describe('TextBlock leaves the block box geometry to the wrapper', () => {
     expect(div.getAttribute('style')).toBeNull();
   });
 
-  it('still wears everything else, which per-row bindings depend on', () => {
+  /**
+   * The sheet now writes these against this element itself (`data-part="root"`,
+   * see INNER_ROOT_BLOCK_TYPES), not against the wrapper it sits in. An inline
+   * copy would apply them a second time and — being inline — outrank the media
+   * query and the `:hover` the same sheet emits for the element.
+   */
+  it('leaves a plain value to the sheet that now targets this element', () => {
     const { container } = renderBlock('hello', {
       'background-color': { desktop: '#00a86b' },
       color: { desktop: '#610529' },
@@ -154,9 +160,37 @@ describe('TextBlock leaves the block box geometry to the wrapper', () => {
 
     const div = container.querySelector('div') as HTMLDivElement;
 
+    expect(div.getAttribute('style')).toBeNull();
+  });
+
+  /**
+   * The one value the sheet genuinely cannot write, which is what the inline
+   * copy is still for: one rule serves every clone of an iterator, so a colour
+   * a row resolved for itself has nowhere else to live.
+   */
+  it('still inlines what an iterator row resolved for itself', () => {
+    const block: any = {
+      id: 'b1',
+      type: 'text',
+      value: 'hello',
+      styles: {
+        'background-color': { desktop: '#00a86b' },
+        'margin-bottom': { desktop: '29px' }
+      },
+      rowStyleKeys: ['background-color']
+    };
+    const { container } = render(
+      <TextBlock
+        block={block}
+        placeholderId="p1"
+        sectionId="s1"
+        isDesigner={false}
+      />
+    );
+
+    const div = container.querySelector('div') as HTMLDivElement;
+
     expect(div.style.backgroundColor).toBe('rgb(0, 168, 107)');
-    expect(div.style.color).toBe('rgb(97, 5, 41)');
-    expect(div.style.borderRadius).toBe('4px');
     expect(div.style.marginBottom).toBe('');
   });
 

package/src/blocks/__tests__/variant-selector-block.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 import VariantSelectorBlock from '../variant-selector-block';
 import { ThemePageContextProvider } from '../../theme-page-context';
+import { isScrollLocked } from '../../hooks/use-overlay';
 import GOLDEN from './variant-selector-golden.json';
 
 jest.mock('next/navigation', () => ({
@@ -636,6 +637,7 @@ describe('designer safety', () => {
 
     fireEvent.click(trigger(container, 'L') as HTMLButtonElement);
 
+    expect(isScrollLocked()).toBe(false);
     expect(document.body.style.overflow).toBe('');
     expect(
       container.querySelector('[data-variant-alert]')?.hasAttribute('aria-modal')
@@ -673,16 +675,22 @@ describe('modal contract', () => {
   });
 
   it('reference-counts the scroll lock across two open pickers', () => {
+    // A value the PAGE chose for itself. The lock is an author rule flipped by
+    // an attribute, so this inline declaration is none of its business and is
+    // asserted at every step below: it has to read `scroll` while the pickers
+    // hold the page just as it does once they have both let go.
     document.body.style.overflow = 'scroll';
 
     const first = renderBlock(MODAL);
     const second = renderBlock(MODAL);
 
     fireEvent.click(trigger(first.container, 'L') as HTMLButtonElement);
-    expect(document.body.style.overflow).toBe('hidden');
+    expect(isScrollLocked()).toBe(true);
+    expect(document.body.style.overflow).toBe('scroll');
 
     fireEvent.click(trigger(second.container, 'L') as HTMLButtonElement);
-    expect(document.body.style.overflow).toBe('hidden');
+    expect(isScrollLocked()).toBe(true);
+    expect(document.body.style.overflow).toBe('scroll');
 
     // Closed one at a time: Escape is on the document, so it would dismiss
     // both at once and never exercise the counting.
@@ -692,14 +700,17 @@ describe('modal contract', () => {
       ) as HTMLButtonElement
     );
     // The first letting go must not unlock the page under the second.
-    expect(document.body.style.overflow).toBe('hidden');
+    expect(isScrollLocked()).toBe(true);
+    expect(document.body.style.overflow).toBe('scroll');
 
     fireEvent.click(
       second.container.querySelector(
         '[data-variant-alert-close]'
       ) as HTMLButtonElement
     );
-    // Only the last holder restores what the page had before either opened.
+    // Only the last holder out lets the page scroll again, and it does so by
+    // dropping the attribute rather than by handing anything back.
+    expect(isScrollLocked()).toBe(false);
     expect(document.body.style.overflow).toBe('scroll');
   });
 
@@ -735,6 +746,7 @@ describe('modal contract', () => {
     const panel = container.querySelector('[data-variant-alert]');
     expect(panel?.hasAttribute('aria-modal')).toBe(false);
     expect(panel?.getAttribute('role')).toBe('group');
+    expect(isScrollLocked()).toBe(false);
     expect(document.body.style.overflow).toBe('');
   });
 

package/src/blocks/auth-consent-block.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import React from 'react';
+
+import { useAuthFieldError } from '../auth/auth-field-errors';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * One consent tick of a composed registration.
+ *
+ * A register form is fields plus consents, and the fields already compose:
+ * an `auth-field` per input, arranged and dressed like any other block. The
+ * consents did not, so a composition could carry its own e-mail row and its own
+ * password row but had to accept whatever row the form drew for the legal
+ * opt-in — which is the one row a brand's legal team actually rewrites.
+ *
+ * A tick is not an `auth-field`: it is a checkbox beside a sentence rather than
+ * a caption above an input, its sentence is long enough to wrap and to carry
+ * links, and what it submits is presence rather than text. So it is its own
+ * block, with the part names the fixed form already used (`consent`,
+ * `checkbox`, `consent-text`, `error`) so a brand's existing styling reads the
+ * same way.
+ *
+ * The value travels the way every composed field's does — a `name` the form
+ * reads out of `FormData` — and an unticked checkbox simply is not in there,
+ * which is exactly the "did they agree" question the form asks.
+ *
+ * Properties: consentType, text, required, and for a `custom` tick the
+ * name it submits and the value it sends when ticked.
+ * Parts: consent, checkbox, consent-text, error.
+ */
+
+export type AuthConsentType = 'legal' | 'marketing' | 'custom';
+
+/**
+ * What each tick is called on the wire.
+ *
+ * `is_allowed` is the membership agreement, which commerce requires to register
+ * at all; `permissions` is the marketing opt-in, and the form turns it into the
+ * four channel flags because commerce wants them named individually. The names
+ * are the fixed form's, so a composition and a fixed form post the same body.
+ */
+export const AUTH_CONSENT_NAMES = {
+  legal: 'is_allowed',
+  marketing: 'permissions'
+} as const;
+
+/**
+ * Whether the row is standing inside a form that READS the two known ticks.
+ *
+ * `is_allowed` and `permissions` are not values a form forwards, they are
+ * questions the register form ANSWERS: it turns the first into the flags
+ * commerce will not create an account without, and the second into the four
+ * channel flags. Any other composed form just copies what it finds, so a legal
+ * tick dropped into a login form posted the browser's own `on` — a string
+ * commerce does not read as a consent — while looking to the author like a
+ * working row.
+ *
+ * The editor's palette already offers the row only under a Register Form, but
+ * that guard is one nesting level deep: a Group inside a login form takes
+ * anything. So the block says for itself where it works, the same way it
+ * already refuses to draw a custom tick nobody has named.
+ */
+export const AuthConsentHostContext = React.createContext(false);
+
+/** Put around the children of a form that answers the two known ticks. */
+export const AuthConsentHostProvider = AuthConsentHostContext.Provider;
+
+const DEFAULT_TEXT: Record<AuthConsentType, string> = {
+  legal:
+    'I have read and accept the membership agreement and the privacy notice.',
+  marketing: 'I would like to receive campaign and marketing messages.',
+  // A custom tick is whatever the brand has to ask this month; nothing here
+  // could guess its sentence.
+  custom: ''
+};
+
+const AuthConsentBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const rawType = String(
+    getResponsiveValue(
+      block.properties?.consentType,
+      currentBreakpoint,
+      'legal'
+    )
+  ).trim();
+  const consentType: AuthConsentType =
+    rawType === 'marketing' || rawType === 'custom' ? rawType : 'legal';
+
+  /**
+   * The two known ticks own their names because commerce owns their meaning: the
+   * register form turns `is_allowed` into the flags an account cannot be created
+   * without, and `permissions` into the four channel flags. A `custom` tick is
+   * asked for by a brand and read by nothing here, so its name is the author's —
+   * which is what makes a third agreement an editor job rather than a release.
+   *
+   * It needs no special case on the form's side: a composed submit already
+   * forwards every named control it finds, so a custom tick travels exactly as
+   * authored, with the value below when it is ticked and absent when it is not.
+   */
+  const customName = String(
+    getResponsiveValue(block.properties?.name, currentBreakpoint, '')
+  ).trim();
+  const name =
+    consentType === 'custom'
+      ? customName
+      : AUTH_CONSENT_NAMES[consentType as 'legal' | 'marketing'];
+
+  /**
+   * What a ticked custom consent sends. `true` by default because that is what
+   * commerce stores for an agreement; a backend that wants `on` or `1` gets it
+   * by typing that instead. (The browser's own default for a valueless checkbox
+   * is `on`, which is why the value is set explicitly rather than left off.)
+   */
+  const tickedValue =
+    String(
+      getResponsiveValue(block.properties?.tickedValue, currentBreakpoint, '')
+    ).trim() || 'true';
+
+  const text = String(
+    getResponsiveValue(
+      block.properties?.text,
+      currentBreakpoint,
+      DEFAULT_TEXT[consentType]
+    )
+  );
+
+  /**
+   * The legal tick defaults to required and the marketing one to optional,
+   * because that is what each one IS — but it stays a toggle: a brand whose
+   * agreement is not mandatory in its market must be able to say so without
+   * swapping the block for another.
+   */
+  const required = readToggle(
+    block.properties?.required,
+    currentBreakpoint,
+    consentType === 'legal'
+  );
+
+  // The form puts its own sentence here — "you have to accept the agreement"
+  // beats "this field is required" for a legal opt-in — and clears it as soon
+  // as the box is ticked.
+  const errorMessage = useAuthFieldError(name);
+  const insideConsentHost = React.useContext(AuthConsentHostContext);
+
+  // Same refusal as an unnamed custom field: a tick that submits nothing is not
+  // a consent, and the canvas has to say what it is waiting for.
+  if (!name) {
+    if (!isDesigner) return null;
+
+    return <DesignerPlaceholder label="Consent row (give this tick a Name)" />;
+  }
+
+  // A membership or marketing tick outside the form that reads it would post a
+  // string commerce ignores. A CUSTOM tick is the brand's own key, forwarded
+  // verbatim by any composed form, so it belongs wherever the author puts it.
+  if (consentType !== 'custom' && !insideConsentHost) {
+    if (!isDesigner) return null;
+
+    return (
+      <DesignerPlaceholder label="Consent row (the membership and marketing ticks belong in a Register Form — a Custom tick works anywhere)" />
+    );
+  }
+
+  return (
+    <>
+      <label
+        data-auth-consent={consentType}
+        // Fills its block wrapper; see the note in auth-step-block.tsx.
+        className="w-full"
+        {...partAttrs('consent')}
+        style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}
+      >
+        <input
+          type="checkbox"
+          name={name}
+          // Only the custom tick carries a value: the two known ones are read
+          // by presence and re-expressed as flags, so a value on them would be
+          // a string the form throws away.
+          value={consentType === 'custom' ? tickedValue : undefined}
+          required={required || undefined}
+          aria-invalid={errorMessage ? true : undefined}
+          {...partAttrs('checkbox')}
+          style={{ marginTop: '3px' }}
+        />
+        <span {...partAttrs('consent-text')}>{text}</span>
+      </label>
+
+      {/* Outside the label rather than inside it: the row is a checkbox beside
+          its sentence, and a message wedged in there would sit between them. */}
+      {errorMessage && (
+        <span
+          data-auth-consent-error={name}
+          {...partAttrs('error')}
+          role="alert"
+          style={{
+            color:
+              'var(--register-form-error-color, var(--auth-form-error-color, #dc2626))',
+            fontSize: '0.875em'
+          }}
+        >
+          {errorMessage}
+        </span>
+      )}
+    </>
+  );
+};
+
+export default AuthConsentBlock;

package/src/blocks/auth-error-block.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React from 'react';
+
+import { useAuthFormError } from '../auth/form-error-context';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+
+/**
+ * The message the auth form around this block is answering with.
+ *
+ * A form-level error belongs to the submission rather than to a field, so there
+ * is no input for it to sit under and the form itself has nowhere good to put
+ * it: appended after its children it lands below the composed CTA and outside
+ * whatever wrapper carries the design's padding. Placed as a block it is
+ * ordinary content — above the CTA, under the fields, inside the same padded
+ * group as everything else — and it inherits that group's spacing like any
+ * sibling would.
+ *
+ * Empty until the form has something to say, and gone again the moment it
+ * succeeds: a shopper never sees a reserved gap. In the canvas it draws
+ * `previewMessage` instead, so an author can see and dress the state without
+ * having to fail a login to reach it.
+ *
+ * Properties: previewMessage.
+ * Parts: root.
+ */
+const AuthErrorBlock = ({
+  block,
+  isDesigner = false,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const message = useAuthFormError();
+
+  const previewMessage = String(
+    getResponsiveValue(
+      block.properties?.previewMessage,
+      currentBreakpoint,
+      'Something went wrong. Please try again.'
+    )
+  ).trim();
+
+  // The canvas shows the state being styled; a storefront shows nothing until
+  // there is a real message. An author who empties the preview text gets the
+  // placeholder rather than an invisible block they cannot select.
+  const shown = message || (isDesigner ? previewMessage : '');
+
+  if (!shown) {
+    if (!isDesigner) return null;
+
+    return (
+      <DesignerPlaceholder label="Form error (shown when the form answers with one)" />
+    );
+  }
+
+  return (
+    <div
+      data-auth-error=""
+      // Fills its block wrapper; see the note in auth-step-block.tsx.
+      className="w-full"
+      // Only the live message is announced. `role="alert"` on the canvas
+      // preview would have a designer's screen reader read a failure that has
+      // not happened.
+      role={message ? 'alert' : undefined}
+      data-auth-error-state={message ? 'error' : 'preview'}
+      {...partAttrs('root')}
+      // Either form's variable, because the block sits in both: a login form
+      // and an SMS verification are the same kind of message to a shopper and a
+      // brand that has set one colour should not have to set it twice.
+      style={{
+        margin: 0,
+        color:
+          'var(--auth-form-error-color, var(--otp-form-error-color, #dc2626))'
+      }}
+    >
+      {shown}
+    </div>
+  );
+};
+
+export default AuthErrorBlock;