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

package/src/auth/form-state-context.tsx

@@ -1,170 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import type { Block } from '../theme-block';
-import { getResponsiveValue } from '../utils';
-
-/**
- * WHICH SCREEN a composed form is on, and what is true about it right now.
- *
- * The forms already composed their normal state — fields, message, CTA, all
- * blocks a designer places. Every OTHER state was still the form's own
- * markup: one authored sentence for the confirmation, one for a dead link, one
- * for "checking", and a spinner nobody could dress. So a brand could build its
- * login screen and could not build the screen it turns into.
- *
- * The two halves are separate on purpose, because a shopper's reality is:
- *
- *  - `screen` is exclusive — the form is being filled, OR it has finished, OR
- *    the link it needs is dead, OR it is still checking that link;
- *  - `busy` and `hasError` happen WHILE the form is being filled, so a refusal
- *    must not take the fields away with it. A single exclusive state would do
- *    exactly that, which is the bug this shape avoids.
- *
- * Read by `form-state` blocks — the container a designer scopes a piece of the
- * composition to. The form itself decides which of those containers to draw,
- * the same way an auth flow decides which of its steps to draw and the OTP
- * form which of its phases: a container decides nothing about its own
- * visibility, so it stays dressable on its own.
- */
-export interface AuthFormStateValue {
-  screen: 'form' | 'success' | 'expired' | 'checking';
-  busy: boolean;
-  hasError: boolean;
-}
-
-export const FORM_STATE_KEYS = [
-  'form',
-  'busy',
-  'error',
-  'success',
-  'expired',
-  'checking'
-] as const;
-
-export type FormStateKey = (typeof FORM_STATE_KEYS)[number];
-
-const IDLE: AuthFormStateValue = {
-  screen: 'form',
-  busy: false,
-  hasError: false
-};
-
-const AuthFormStateContext = React.createContext<AuthFormStateValue>(IDLE);
-
-export const AuthFormStateProvider = AuthFormStateContext.Provider;
-
-/** The state of the form this block is inside; the idle form outside one. */
-export const useAuthFormState = (): AuthFormStateValue =>
-  React.useContext(AuthFormStateContext);
-
-/**
- * Whether a container scoped to `want` shows in `state`.
- *
- * `form` covers being filled INCLUDING while busy or refused — a container
- * holding the fields must not vanish when commerce answers with a message.
- * `busy` and `error` are additive to it rather than instead of it.
- */
-export const matchesFormState = (
-  want: string,
-  state: AuthFormStateValue
-): boolean => {
-  switch (want) {
-    case 'busy':
-      return state.screen === 'form' && state.busy;
-    case 'error':
-      return state.screen === 'form' && state.hasError;
-    case 'form':
-      return state.screen === 'form';
-    case 'success':
-    case 'expired':
-    case 'checking':
-      return state.screen === want;
-    // An unrecognised value is a container a newer editor wrote: drawing it
-    // everywhere would be worse than drawing it nowhere, since it was scoped
-    // deliberately.
-    default:
-      return false;
-  }
-};
-
-/** The state a container is scoped to, '' when it names none. */
-export const readFormStateKey = (
-  block: Block,
-  currentBreakpoint = 'desktop'
-): string =>
-  String(
-    getResponsiveValue(block.properties?.formState, currentBreakpoint, '')
-  ).trim();
-
-/**
- * Whether the composition takes over one of the form's OWN screens.
- *
- * Asked before the form draws its built-in replacement for that screen: a
- * designer who has composed the confirmation should not get the form's
- * sentence as well, and — since these replacements swap out the whole
- * composition — the container has to be mounted at all to draw anything.
- *
- * Hidden containers do not count, for the same reason a hidden Form Error does
- * not: it draws nothing, so standing the built-in copy down would leave the
- * shopper with no answer whatsoever.
- */
-export const containsFormStateBlock = (
-  blocks: Block[] | undefined,
-  want: string,
-  currentBreakpoint = 'desktop'
-): boolean =>
-  (blocks || []).some(
-    (block) =>
-      !block.hidden &&
-      ((block.type === 'form-state' &&
-        readFormStateKey(block, currentBreakpoint) === want) ||
-        containsFormStateBlock(block.blocks, want, currentBreakpoint))
-  );
-
-/** Whether a subtree holds the block the designer has selected. */
-const containsBlockId = (
-  blocks: Block[] | undefined,
-  blockId: string
-): boolean =>
-  (blocks || []).some(
-    (candidate) =>
-      candidate.id === blockId || containsBlockId(candidate.blocks, blockId)
-  );
-
-/**
- * Which of a form's children to draw in the state it is in.
- *
- * A child that is not a state container is shared chrome — a logo, a title, a
- * support line — and shows on every screen, exactly as a non-phase child of
- * the OTP form does. A container shows when its state matches, and
- * additionally in the canvas while it holds the selected block, so a designer
- * can dress the screen they are not previewing.
- */
-export const showsInFormState = ({
-  block,
-  state,
-  isDesigner,
-  selectedBlockId,
-  currentBreakpoint = 'desktop'
-}: {
-  block: Block;
-  state: AuthFormStateValue;
-  isDesigner?: boolean;
-  selectedBlockId?: string;
-  currentBreakpoint?: string;
-}): boolean => {
-  if (block.type !== 'form-state') return true;
-
-  if (
-    isDesigner &&
-    selectedBlockId &&
-    (block.id === selectedBlockId ||
-      containsBlockId(block.blocks, selectedBlockId))
-  ) {
-    return true;
-  }
-
-  return matchesFormState(readFormStateKey(block, currentBreakpoint), state);
-};

package/src/auth/form-success-context.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import type { Block } from '../theme-block';
-
-/**
- * The sentence a composed form answers a SUCCESS with.
- *
- * The mirror of `form-error-context.tsx`, and it exists for the same reason
- * turned the other way round: a form-level message belongs to the submission
- * rather than to a field, so the form has nowhere good to put it. The error
- * half was solved by publishing the message and letting a block draw it; the
- * success half was still a node the form drew ITSELF, and in the two blocks
- * where it matters — "a reset link is on its way", "your password has been
- * changed" — that node REPLACES the whole form. A designer could recolour it
- * through its style part and nothing more: no icon beside it, no heading above
- * it, no way back except the one built-in link, and no way to move it.
- *
- * With the message published, a `auth-success` block draws it wherever the
- * design puts it, with whatever the design puts around it — because the things
- * around it are then ordinary sibling blocks. The form keeps its built-in node
- * for every composition that has not placed one, so nothing published changes.
- *
- * Only the forms that HAVE a success state provide it: a sign-in has none —
- * the shopper is in and the screen moves on — which is why the login, register
- * and OTP forms are not in this list and the block is not offered inside them.
- */
-export const AuthFormSuccessContext = React.createContext<string>('');
-
-export const AuthFormSuccessProvider = AuthFormSuccessContext.Provider;
-
-/** The form's success message, or '' — outside a form and before it finishes. */
-export const useAuthFormSuccess = (): string =>
-  React.useContext(AuthFormSuccessContext);
-
-/**
- * Whether the blocks a form is ABOUT to draw contain a success block.
- *
- * Two things hang on the answer, which is why it is asked of the rendered
- * subset rather than of every child: the built-in message stands down, and —
- * in the forms whose success state replaces the form entirely — the
- * composition stays on screen so the block placed inside it is still mounted
- * to draw anything at all.
- *
- * A hidden block draws nothing, so it cannot be the place the message goes:
- * counting one would silence the built-in line and leave the shopper with no
- * confirmation whatsoever. Same rule, and the same past bug, as
- * `containsAuthErrorBlock`.
- */
-export const containsAuthSuccessBlock = (blocks: Block[] | undefined): boolean =>
-  (blocks || []).some(
-    (block) =>
-      !block.hidden &&
-      (block.type === 'auth-success' || containsAuthSuccessBlock(block.blocks))
-  );

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

@@ -1,332 +0,0 @@
-/**
- * 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/auth-success-block.tsx

@@ -1,85 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { useAuthFormSuccess } from '../auth/form-success-context';
-import { getResponsiveValue, partAttrs } from '../utils';
-import { BlockRendererProps } from './block-renderer-registry';
-import { DesignerPlaceholder } from './product-block-utils';
-
-/**
- * The confirmation the form around this block finished with.
- *
- * The success twin of the Form Error block, and the reason it exists is the
- * same complaint: "the success message is not something I can manage". It was
- * a node the form drew itself, reachable only as a style part — a brand could
- * recolour "a reset link is on its way" and could not put an icon beside it, a
- * heading above it, or the sentence anywhere other than where the form chose.
- *
- * As a block it is ordinary content, so everything a design wants AROUND the
- * confirmation is an ordinary sibling. Placing it also keeps the composition on
- * screen in the forms whose success state would otherwise replace it — which is
- * the point: a block inside a form that has been swapped out draws nothing.
- * When the whole screen should change instead, the form's Step After Success is
- * still the tool for that, and it needs no block at all.
- *
- * Empty until the form has finished, so a shopper never sees a reserved gap. In
- * the canvas it draws `previewMessage` instead, so the state can be dressed
- * without having to reach it for real.
- *
- * Properties: previewMessage.
- * Parts: root.
- */
-const AuthSuccessBlock = ({
-  block,
-  isDesigner = false,
-  currentBreakpoint = 'desktop'
-}: BlockRendererProps) => {
-  const message = useAuthFormSuccess();
-
-  const previewMessage = String(
-    getResponsiveValue(
-      block.properties?.previewMessage,
-      currentBreakpoint,
-      'Done. Check your inbox.'
-    )
-  ).trim();
-
-  // The canvas shows the state being styled; a storefront shows nothing until
-  // the form has actually finished. 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 success (shown once the form finishes)" />
-    );
-  }
-
-  return (
-    <div
-      data-auth-success=""
-      // Fills its block wrapper; see the note in auth-step-block.tsx.
-      className="w-full"
-      // Only the live message is announced. `role="status"` on the canvas
-      // preview would have a designer's screen reader read a confirmation for
-      // something that has not happened.
-      role={message ? 'status' : undefined}
-      data-auth-success-state={message ? 'success' : 'preview'}
-      {...partAttrs('root')}
-      // No inline colour, unlike its error twin: that block sets one because
-      // the auth forms paint their message through a variable a brand may
-      // already have set, while a confirmation has never had a colour of its
-      // own. So this line inherits the composition's text colour, and the
-      // block's own Text Color — emitted `!important` as every part style is —
-      // is what overrides it.
-      style={{ margin: 0 }}
-    >
-      {shown}
-    </div>
-  );
-};
-
-export default AuthSuccessBlock;

package/src/blocks/captcha-block.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-import React from 'react';
-import { getResponsiveValue, partAttrs } from '../utils';
-import { useAuthCaptcha } from '../auth/auth-captcha';
-import { DesignerPlaceholder } from './product-block-utils';
-import { BlockRendererProps } from './block-renderer-registry';
-
-/**
- * Where the security check appears inside an auth form.
- *
- * The challenge itself is not a design decision — commerce decides when to
- * escalate, and the widget is Google's — but WHERE it lands is: above the
- * submit, under the password, inside the drawer's scrolling area rather than
- * behind its bottom bar. So it is a block, and the form it sits in offers the
- * widget through `auth/auth-captcha.tsx`.
- *
- * Renders nothing at all until there is something to render: the form has
- * `showCaptcha` off, or commerce has not escalated. That is what lets a
- * designer place it once and forget it, instead of composing a second version
- * of the form for the abuse-protected case.
- *
- * Properties: label. Parts: captcha.
- */
-const CaptchaBlock = ({
-  block,
-  currentBreakpoint = 'desktop',
-  isDesigner = false
-}: BlockRendererProps) => {
-  const captcha = useAuthCaptcha();
-
-  const label = String(
-    getResponsiveValue(
-      block.properties?.label,
-      currentBreakpoint,
-      'Security check'
-    )
-  );
-
-  /**
-   * In the canvas it is a marker rather than a live widget. Two reasons, and
-   * the first is enough on its own: rendering reCAPTCHA into an editor iframe
-   * asks Google for a token against the wrong origin. The second is that a
-   * designer has to be able to SEE and select a block whose whole point is to
-   * be invisible most of the time.
-   */
-  if (isDesigner) {
-    return <DesignerPlaceholder label={label} attribute="data-auth-captcha" />;
-  }
-
-  // No form is offering a challenge — see the note above.
-  if (!captcha) return null;
-
-  return (
-    <div {...partAttrs('captcha')} data-auth-captcha="">
-      <captcha.View />
-    </div>
-  );
-};
-
-export default CaptchaBlock;