@akinon/pz-theme 2.0.94 → 2.0.95-beta.1

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/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 })]

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

@@ -20,7 +20,7 @@ import { BlockRendererProps } from './block-renderer-registry';
  * form owns those. Standalone (outside any form) it still renders, but
  * nothing collects its value, which the designer sees immediately.
  *
- * Properties: fieldType, label, placeholder, showLabel, required, and for
+ * Properties: fieldType, label, placeholder, showLabel, required, autoComplete, and for
  * a `gender` field the two option captions (femaleLabel, maleLabel).
  * Parts: field, label, input, error.
  */
@@ -143,6 +143,16 @@ const AuthFieldBlock = ({
       : preset.type;
 
   const label = prop('label', preset.label);
+  /**
+   * What a password manager is told this box is for.
+   *
+   * The preset was compiled in, which made one screen wrong on purpose: the
+   * `password` preset says `current-password`, so a composed SIGN-UP or a
+   * reset screen told the manager to offer a saved password instead of
+   * generating a new one, and what the shopper then typed was never saved.
+   * Absent keeps the preset, so every published field is untouched.
+   */
+  const autoComplete = prop('autoComplete', '').trim() || preset.autoComplete;
   const placeholder = prop('placeholder', '');
   const showLabel = readToggle(
     block.properties?.showLabel,
@@ -216,7 +226,7 @@ const AuthFieldBlock = ({
          */
         <select
           name={controlName}
-          autoComplete={preset.autoComplete}
+          autoComplete={autoComplete}
           defaultValue=""
           aria-label={showLabel ? undefined : label}
           aria-invalid={errorMessage ? true : undefined}
@@ -235,7 +245,7 @@ const AuthFieldBlock = ({
         <input
           type={controlType}
           name={controlName}
-          autoComplete={preset.autoComplete}
+          autoComplete={autoComplete}
           placeholder={placeholder || undefined}
           aria-label={showLabel ? undefined : label}
           aria-invalid={errorMessage ? true : undefined}

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

@@ -1,11 +1,11 @@
 'use client';
 
 import React, { useEffect } from 'react';
+import { useSession } from 'next-auth/react';
 import { getResponsiveValue, partAttrs } from '../utils';
 import {
   ActiveAuthStepContext,
   AuthFlowIdContext,
-  DEFAULT_AUTH_FLOW_ID,
   goBackAuthStep,
   registerAuthFlowMount,
   useAuthFlowState
@@ -74,9 +74,33 @@ const AuthFlowBlock = ({
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
 
-  const flowId = prop('flowId', '').trim() || DEFAULT_AUTH_FLOW_ID;
+  /**
+   * The name this journey answers to on the bus.
+   *
+   * Authored, it is shared: two flows carrying the same name show the same step
+   * — deliberate for one journey rendered twice, and for a trigger outside the
+   * flow that names `<flowId>:<step>`.
+   *
+   * Empty, it is the BLOCK's own, because the alternative was a collision the
+   * moment a brand did what the composition invites: a journey in the header
+   * drawer and a second one in a tab or a page body both fell back to one
+   * shared name, so opening the drawer on "register" moved the page's journey
+   * with it, and closing the drawer reset it. `DEFAULT_AUTH_FLOW_ID` stays the
+   * fallback for controls that know no flow at all — see `resolveAuthStepTarget`
+   * — so a composition that wants to be reachable that way names itself.
+   */
+  const flowId = prop('flowId', '').trim() || `flow-${block.id}`;
   const initialStep = prop('initialStep', '').trim();
   const previewStep = prop('previewStep', '').trim();
+  /**
+   * The step a shopper who is ALREADY signed in lands on.
+   *
+   * The state picks the step, which is the flow's whole idea — so a member who
+   * opens the drawer gets "Hoş geldin / Hesabım / Çıkış" composed out of
+   * ordinary blocks instead of the login form they have no use for. Empty
+   * keeps the historical behaviour: the flow does not care about the session.
+   */
+  const signedInStep = prop('signedInStep', '').trim();
   const backLabel = prop('backLabel', 'Back');
   const showBack = readToggle(
     block.properties?.showBack,
@@ -92,6 +116,13 @@ const AuthFlowBlock = ({
   );
 
   const flowState = useAuthFlowState(isDesigner ? '' : flowId);
+  const { status } = useSession();
+  /**
+   * `loading` is not treated as signed in: the flow would open on the member
+   * step for a guest and then swap. The other way round — a member seeing the
+   * login step for a beat — is the state they are being moved out of anyway.
+   */
+  const isSignedIn = status === 'authenticated' && !isDesigner;
 
   useEffect(() => {
     if (isDesigner) return undefined;
@@ -124,9 +155,20 @@ const AuthFlowBlock = ({
       if (selected) return stepKeyOf(selected, currentBreakpoint);
     }
 
+    /**
+     * A step the shopper NAVIGATED to still wins over the member step: a
+     * signed-in shopper who taps "change password" inside the journey is
+     * asking for that step, and answering with the welcome card would be the
+     * flow overruling them. The member step is the ENTRY, so it only leads
+     * while the bus has nothing to say.
+     */
     const candidates = isDesigner
       ? [previewStep, initialStep]
-      : [flowState?.active ?? '', initialStep];
+      : [
+          flowState?.active ?? '',
+          ...(isSignedIn ? [signedInStep] : []),
+          initialStep
+        ];
 
     for (const candidate of candidates) {
       if (candidate && stepKeys.includes(candidate)) return candidate;