@akinon/pz-theme 2.0.165-rc.0 → 2.0.166-beta.0

package/src/auth/auth-field-errors.tsx

@@ -56,6 +56,51 @@ export interface AuthFieldValidation {
 
 type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 
+/**
+ * Every control a form checks: the named ones, plus the parts of a compound
+ * field.
+ *
+ * A compound field — the day, month and year selects of a birth date — submits
+ * ONE value under one name through a hidden input, and a hidden input is never
+ * validated. So the visible parts carry no name of their own (they would post
+ * three stray keys) and say which field they belong to through
+ * `data-field-name` instead; their `required` is then reported under that
+ * field's name, which is where the field draws its message.
+ */
+const VALIDATED_CONTROLS =
+  'input[name], select[name], textarea[name], [data-field-name]';
+
+/**
+ * The box a control is presented in: its Auth Field or Consent Row when it has
+ * one, so "can the shopper see this question" is asked of the field rather
+ * than of the native control. A brand that draws its own tick or radio hides
+ * the native input and styles a sibling — the question is still on screen —
+ * and a compound field's hidden input is visible exactly when its parts are.
+ */
+export const fieldBoxOf = (control: HTMLElement): HTMLElement =>
+  control.closest<HTMLElement>('[data-auth-field], [data-auth-consent]') ??
+  (control instanceof HTMLInputElement && control.type === 'hidden'
+    ? (control.parentElement ?? control)
+    : control);
+
+/** The name a control's message is filed under. */
+const fieldNameOf = (control: FormControl): string =>
+  control.name || control.dataset.fieldName || '';
+
+/**
+ * The field an `input`/`change` event was about, for the form that clears that
+ * field's message as soon as it is edited. Same rule as the collector: a
+ * compound field's part answers with the field's name.
+ */
+export const eventFieldName = (target: EventTarget | null): string => {
+  const element = target as {
+    name?: string;
+    dataset?: { fieldName?: string };
+  } | null;
+
+  return element?.name || element?.dataset?.fieldName || '';
+};
+
 /**
  * Whether a control is actually on screen for this breakpoint.
  *
@@ -65,7 +110,7 @@ type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
  * scrolled out of view, sized to nothing, or covered by another is still a
  * control the shopper can be sent to.
  */
-const isVisibleControl = (control: FormControl): boolean => {
+export const isVisibleControl = (control: HTMLElement): boolean => {
   if (typeof control.checkVisibility === 'function') {
     return control.checkVisibility();
   }
@@ -98,9 +143,7 @@ export const collectAuthFieldErrors = (
   let firstInvalid: HTMLElement | null = null;
 
   const controls = Array.from(
-    form.querySelectorAll<FormControl>(
-      'input[name], select[name], textarea[name]'
-    )
+    form.querySelectorAll<FormControl>(VALIDATED_CONTROLS)
   );
 
   controls.forEach((control) => {
@@ -116,12 +159,15 @@ export const collectAuthFieldErrors = (
     // `noValidate` had already suppressed the browser's bubble, and the
     // message this function returns was drawn inside the hidden wrapper. A
     // field the shopper cannot see is not one they can be asked to fill in.
-    if (!isVisibleControl(control)) return;
+    if (!isVisibleControl(fieldBoxOf(control))) return;
+
+    // First one wins per name: a radio group, a compound field's parts, or a
+    // name a composition duplicated, is one question to the shopper rather
+    // than several.
+    const name = fieldNameOf(control);
 
-    // First one wins per name: a radio group, or a name a composition
-    // duplicated, is one question to the shopper rather than several.
-    if (!errors[control.name]) {
-      errors[control.name] = control.validity.valueMissing
+    if (!errors[name]) {
+      errors[name] = control.validity.valueMissing
         ? messages.required
         : messages.invalid;
     }
@@ -151,13 +197,13 @@ export const focusFirstAuthFieldError = (
   if (!form || Object.keys(errors).length === 0) return;
 
   const controls = Array.from(
-    form.querySelectorAll<FormControl>(
-      'input[name], select[name], textarea[name]'
-    )
+    form.querySelectorAll<FormControl>(VALIDATED_CONTROLS)
   );
 
   const first = controls.find(
-    (control) => Boolean(errors[control.name]) && isVisibleControl(control)
+    (control) =>
+      Boolean(errors[fieldNameOf(control)]) &&
+      isVisibleControl(fieldBoxOf(control))
   );
 
   first?.focus();

package/src/auth/form-field-defaults.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import React from 'react';
+
+/**
+ * What a composed form already knows about each of its fields, keyed by the
+ * name the field submits under.
+ *
+ * A sign-up starts empty, so the field blocks were written as empty controls
+ * the form reads back through `FormData`. A form that EDITS a record — the
+ * profile form — has to start from the record instead: the shopper's name in
+ * the name box, their birth date in the date selects, their current answer in
+ * each consent tick. The fields are child blocks at any depth, so the form has
+ * no reference to hand a value to; each field reads its own entry here, the
+ * same way it reads its error message from `auth-field-errors.tsx`.
+ *
+ * `readOnly` names the fields the form shows but cannot change — the profile's
+ * e-mail, which commerce only moves through its own verified flow. Such a
+ * field is drawn disabled, so it is neither submitted nor validated.
+ *
+ * Outside such a form nothing is provided and every field starts empty, which
+ * is exactly what a register or auth form has always drawn.
+ */
+export interface FormFieldDefaultsValue {
+  values: Readonly<Record<string, unknown>>;
+  readOnly: ReadonlyArray<string>;
+}
+
+const NO_DEFAULTS: FormFieldDefaultsValue = { values: {}, readOnly: [] };
+
+const FormFieldDefaultsContext =
+  React.createContext<FormFieldDefaultsValue>(NO_DEFAULTS);
+
+export const FormFieldDefaultsProvider = FormFieldDefaultsContext.Provider;
+
+/** The value a text-like control starts with: '' when the form has none. */
+export const useFormFieldDefault = (name: string): string => {
+  const { values } = React.useContext(FormFieldDefaultsContext);
+  const value = name ? values[name] : undefined;
+
+  if (value === null || value === undefined) return '';
+
+  return String(value);
+};
+
+/**
+ * Whether a tick starts ticked. Only an explicit `true` counts: commerce keeps
+ * `null` for a consent the shopper was never asked about, and drawing that as
+ * ticked would put an agreement in their mouth.
+ */
+export const useFormFieldChecked = (
+  name: string,
+  tickedValue = 'true'
+): boolean => {
+  const { values } = React.useContext(FormFieldDefaultsContext);
+  const stored = name ? values[name] : undefined;
+
+  if (stored === true) return true;
+  // A custom tick that sends its own value (`yes`, `1`) is ticked when that is
+  // what is stored.
+  return (
+    tickedValue !== 'true' &&
+    stored !== undefined &&
+    stored !== null &&
+    String(stored) === tickedValue
+  );
+};
+
+/** Whether the hosting form shows this field without letting it change. */
+export const useFormFieldReadOnly = (name: string): boolean => {
+  const { readOnly } = React.useContext(FormFieldDefaultsContext);
+
+  return Boolean(name) && readOnly.includes(name);
+};

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'
     );
   });
 

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

@@ -3,6 +3,7 @@
 import React from 'react';
 
 import { useAuthFieldError } from '../auth/auth-field-errors';
+import { useFormFieldChecked } from '../auth/form-field-defaults';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
@@ -27,12 +28,37 @@ import { BlockRendererProps } from './block-renderer-registry';
  * reads out of `FormData` — and an unticked checkbox simply is not in there,
  * which is exactly the "did they agree" question the form asks.
  *
+ * A contact-channel tick (`email`, `sms`, `call`, `whatsapp`) is one channel's
+ * answer under the flag commerce stores for it (`email_allowed` …). A register
+ * form reads it in place of its blanket marketing answer for that channel; a
+ * profile form starts it from the shopper's stored answer and saves it back.
+ *
  * 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';
+export type AuthContactChannel = 'email' | 'sms' | 'call' | 'whatsapp';
+
+export type AuthConsentType =
+  | 'legal'
+  | 'marketing'
+  | 'custom'
+  | AuthContactChannel;
+
+/**
+ * The contact channels and the profile flag each one is stored under. The same
+ * four flags the register form fans its marketing answer out to.
+ */
+export const AUTH_CONTACT_CHANNEL_FLAGS: Record<AuthContactChannel, string> = {
+  email: 'email_allowed',
+  sms: 'sms_allowed',
+  call: 'call_allowed',
+  whatsapp: 'whatsapp_allowed'
+};
+
+const isContactChannel = (value: string): value is AuthContactChannel =>
+  value in AUTH_CONTACT_CHANNEL_FLAGS;
 
 /**
  * What each tick is called on the wire.
@@ -74,7 +100,13 @@ const DEFAULT_TEXT: Record<AuthConsentType, string> = {
   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: ''
+  custom: '',
+  // A channel row is usually one of a list under a heading, so its caption
+  // is the channel's name rather than a sentence.
+  email: 'E-mail',
+  sms: 'SMS',
+  call: 'Phone call',
+  whatsapp: 'WhatsApp'
 };
 
 const AuthConsentBlock = ({
@@ -90,7 +122,10 @@ const AuthConsentBlock = ({
     )
   ).trim();
   const consentType: AuthConsentType =
-    rawType === 'marketing' || rawType === 'custom' ? rawType : 'legal';
+    rawType === 'marketing' || rawType === 'custom' || isContactChannel(rawType)
+      ? rawType
+      : 'legal';
+  const isChannel = isContactChannel(consentType);
 
   /**
    * The two known ticks own their names because commerce owns their meaning: the
@@ -109,7 +144,9 @@ const AuthConsentBlock = ({
   const name =
     consentType === 'custom'
       ? customName
-      : AUTH_CONSENT_NAMES[consentType as 'legal' | 'marketing'];
+      : isContactChannel(consentType)
+        ? AUTH_CONTACT_CHANNEL_FLAGS[consentType]
+        : AUTH_CONSENT_NAMES[consentType as 'legal' | 'marketing'];
 
   /**
    * What a ticked custom consent sends. `true` by default because that is what
@@ -117,10 +154,11 @@ const AuthConsentBlock = ({
    * 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 tickedValue = isChannel
+    ? 'true'
+    : String(
+        getResponsiveValue(block.properties?.tickedValue, currentBreakpoint, '')
+      ).trim() || 'true';
 
   const text = String(
     getResponsiveValue(
@@ -135,18 +173,30 @@ const AuthConsentBlock = ({
    * 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.
+   *
+   * A contact permission is the shopper's choice by definition: a form that
+   * refused to save until it was ticked would be extracting consent, not
+   * asking for it. So a channel tick is never required, whatever the toggle
+   * (which the editor seeds on for every new row) says.
    */
-  const required = readToggle(
-    block.properties?.required,
-    currentBreakpoint,
-    consentType === 'legal'
-  );
+  const required =
+    !isChannel &&
+    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);
+  /**
+   * The shopper's stored answer, when the hosting form edits a record (the
+   * Profile Form). Unticked everywhere else, which is what a sign-up asks.
+   */
+  const startsTicked = useFormFieldChecked(name, tickedValue);
 
   // 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.
@@ -158,8 +208,10 @@ const AuthConsentBlock = ({
 
   // 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) {
+  // verbatim by any composed form, and a channel tick is a flag both the
+  // register and the profile form read by name, so those belong wherever the
+  // author puts them.
+  if (consentType !== 'custom' && !isChannel && !insideConsentHost) {
     if (!isDesigner) return null;
 
     return (
@@ -177,12 +229,19 @@ const AuthConsentBlock = ({
         style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}
       >
         <input
+          // Keyed by name so a tick whose type changes on the canvas (e-mail
+          // → WhatsApp) starts again from ITS stored answer: `defaultChecked`
+          // is only read when the box mounts.
+          key={name}
           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}
+          // Only the custom and channel ticks carry 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' || isChannel ? tickedValue : undefined
+          }
+          defaultChecked={startsTicked || undefined}
           required={required || undefined}
           aria-invalid={errorMessage ? true : undefined}
           {...partAttrs('checkbox')}