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

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

@@ -1,13 +1,34 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import NextLink from 'next/link';
 import { useRouter } from 'next/navigation';
 import { signIn } from 'next-auth/react';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs } from '../utils';
+import {
+  AuthFieldErrors,
+  AuthFieldErrorsProvider,
+  clearAuthFieldError,
+  collectAuthFieldErrors
+} from '../auth/auth-field-errors';
+import {
+  clearFormSubmitState,
+  publishFormSubmitState
+} from '../auth/form-submit-bus';
+import {
+  AuthFormErrorProvider,
+  containsAuthErrorBlock
+} from '../auth/form-error-context';
 import { emitCommerceEvent } from '../utils/analytics';
 import { readToggle } from './product-block-utils';
+import { closeAllModals } from '../overlays/overlay-bus';
+import {
+  AuthFlowIdContext,
+  resolveAuthStepTarget,
+  setAuthStep
+} from '../auth/auth-flow-bus';
+import { renderComposedChildren } from './render-composed-children';
 import { BlockRendererProps } from './block-renderer-registry';
 
 /**
@@ -48,6 +69,36 @@ const readAuthError = (error?: string | null): string => {
   }
 };
 
+/**
+ * Names a composed field must not take, because the form and next-auth already
+ * mean something by them. A local copy of the register form's set, kept local
+ * for the same reason `readAuthError` is: making it an export would change a
+ * shipped module's public surface.
+ */
+const RESERVED_SUBMIT_KEYS = new Set([
+  'formType',
+  'locale',
+  'code',
+  'redirect',
+  'callbackUrl',
+  'csrfToken',
+  'json'
+]);
+
+/**
+ * Where the serialised AuthError[] actually lives depends on the next-auth
+ * major. v4 puts it into `error` itself; v5 keeps `error` at the generic
+ * "CredentialsSignin" enum name and moves the serialised array onto `code` —
+ * which is also what the brands' own views read. Preferring `code` shows the
+ * shopper the real commerce message on v5 storefronts instead of the enum.
+ */
+const signInErrorDetail = (
+  response:
+    | { error?: string | null; code?: string | null }
+    | null
+    | undefined
+): string | null | undefined => response?.code || response?.error;
+
 /**
  * Functional auth block: login or register form driven by props.mode.
  *
@@ -61,13 +112,17 @@ const readAuthError = (error?: string | null): string => {
  * Properties: mode, submitLabel, busyLabel, providerId, loginFormType,
  * registerFormType, callbackUrl, emailLabel, passwordLabel, firstNameLabel,
  * lastNameLabel, the matching *Placeholder keys, showLabels, errorLabel,
- * showForgotPassword, forgotPasswordLabel, forgotPasswordUrl.
+ * showForgotPassword, forgotPasswordLabel, forgotPasswordUrl,
+ * closeModalsOnSuccess.
  * Parts: form, field, label, input, error, submit, link.
  */
 const AuthFormBlock = ({
   block,
-  currentBreakpoint = 'desktop',
-  isDesigner = false
+  placeholderId,
+  sectionId,
+  isDesigner = false,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
 }: BlockRendererProps) => {
   const prop = (key: string, fallback: string) =>
     String(
@@ -98,13 +153,55 @@ const AuthFormBlock = ({
   );
   const forgotPasswordLabel = prop('forgotPasswordLabel', 'Forgot password?');
   const forgotPasswordUrl = prop('forgotPasswordUrl', '/auth/forgot-password');
+  /**
+   * Where "forgot password?" goes when the form lives inside an Auth Flow.
+   *
+   * The link navigates by default, which is right on an auth PAGE and wrong in
+   * a drawer: it closes the journey the shopper was two fields into. Naming a
+   * step keeps them inside the flow — put a Forgot Password block in that step.
+   * Empty keeps the URL, so every published form behaves as before.
+   */
+  const forgotPasswordStepTarget = prop('forgotPasswordStepTarget', '').trim();
   const formType =
     mode === 'register'
       ? prop('registerFormType', 'registration')
       : prop('loginFormType', 'login');
+  // Off by default: a form on a plain auth page must not start closing modals
+  // it does not live in. Compositions inside a drawer turn it on so a login
+  // does not leave the drawer covering the page the shopper just entered.
+  const closeModalsOnSuccess = readToggle(
+    block.properties?.closeModalsOnSuccess,
+    currentBreakpoint,
+    false
+  );
+  /**
+   * Detached submit: `formHtmlId` puts an id on the <form> so a Button block
+   * anywhere on the page can submit it through the native `form` attribute —
+   * which is how a design pins the CTA to a drawer's bottom bar while the
+   * fields stay in the flow. `showSubmit` off hides the built-in button then;
+   * Enter in a field still submits, as it does in any form.
+   */
+  /**
+   * The copy for a field left empty or filled in wrongly. Editor properties
+   * because these are shopper-facing sentences in the brand's own language —
+   * replacing the browser's wording is the whole point of validating here.
+   */
+  const requiredMessage = prop('requiredMessage', 'This field is required.');
+  const invalidMessage = prop('invalidMessage', 'Please check this field.');
+  const formHtmlId = prop('formHtmlId', '').trim();
+  const showSubmit = readToggle(
+    block.properties?.showSubmit,
+    currentBreakpoint,
+    true
+  );
 
   const router = useRouter();
   const { locale, defaultLocaleValue } = useLocalization();
+  const contextFlowId = useContext(AuthFlowIdContext);
+  const forgotPasswordStep = resolveAuthStepTarget(
+    forgotPasswordStepTarget,
+    contextFlowId
+  );
 
   const [values, setValues] = useState({
     email: '',
@@ -113,6 +210,9 @@ const AuthFormBlock = ({
     last_name: ''
   });
   const [error, setError] = useState('');
+  // Per FIELD, as opposed to `error` above, which is what the auth backend
+  // answered about the attempt as a whole.
+  const [fieldErrors, setFieldErrors] = useState<AuthFieldErrors>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const setField = (key: keyof typeof values) => (
@@ -122,37 +222,114 @@ const AuthFormBlock = ({
     setValues((current) => ({ ...current, [key]: nextValue }));
   };
 
-  const submit = async (event: React.FormEvent) => {
+  /**
+   * Composed mode: the form's fields are CHILD blocks (auth-field and
+   * whatever the designer arranged between them), so the values live in the
+   * DOM, not in this component's state — FormData reads every named input at
+   * submit time. That is what makes the field order, the links between
+   * fields and the CTA placement free arrangement instead of a fixed layout.
+   */
+  const childBlocks = (block.blocks || [])
+    .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+  const isComposed = childBlocks.length > 0;
+
+  /**
+   * A message describes what a field WAS: the moment the shopper edits it, it
+   * goes. `input` bubbles, so one handler on the form covers every field a
+   * composition put inside it, at any depth — and it is wired to `change` as
+   * well, for the edits that arrive without keystrokes (browser autofill, a
+   * select).
+   */
+  /**
+   * A detached CTA (a Button carrying this form's id) is outside this subtree
+   * and cannot see `isSubmitting` — so the form publishes it. See
+   * `auth/form-submit-bus.ts`.
+   */
+  React.useEffect(() => {
+    if (!formHtmlId) return undefined;
+
+    publishFormSubmitState(formHtmlId, isSubmitting);
+
+    return () => clearFormSubmitState(formHtmlId);
+  }, [formHtmlId, isSubmitting]);
+
+  const handleInput = (event: React.FormEvent<HTMLFormElement>) => {
+    const target = event.target as { name?: string } | null;
+
+    setFieldErrors((current) =>
+      clearAuthFieldError(current, target?.name || '')
+    );
+  };
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError('');
 
-    if (isDesigner) return;
+    if (isDesigner || isSubmitting) return;
+
+    // Before anything is sent: the form carries `noValidate`, so nothing else
+    // is going to stop an empty submit, and nothing else would have told the
+    // shopper WHICH field is the problem.
+    const form = event.currentTarget;
+    const { errors: nextFieldErrors, firstInvalid } = collectAuthFieldErrors(
+      form,
+      { required: requiredMessage, invalid: invalidMessage }
+    );
+
+    setFieldErrors(nextFieldErrors);
+
+    if (firstInvalid) {
+      firstInvalid.focus();
+
+      return;
+    }
 
     const payload: Record<string, string> = {
       formType,
       // The core credentials provider looks the locale up in Settings and
       // throws when it is missing, so an explicit value is always sent.
-      locale: locale || defaultLocaleValue || '',
-      email: values.email,
-      password: values.password
+      locale: locale || defaultLocaleValue || ''
     };
 
-    if (mode === 'register') {
-      payload.first_name = values.first_name;
-      payload.last_name = values.last_name;
+    if (isComposed) {
+      new FormData(event.currentTarget).forEach((entryValue, key) => {
+        if (typeof entryValue !== 'string') return;
+
+        // Same three rules the register form applies, and for the same
+        // reasons: a field named after part of the protocol would change the
+        // request rather than add to it, an answer nobody gave should not
+        // travel as an empty string, and where a name is duplicated the FIRST
+        // control wins — which is what `collectAuthFieldErrors` already does
+        // with the same duplicate.
+        if (RESERVED_SUBMIT_KEYS.has(key)) return;
+        if (entryValue === '') return;
+        if (key in payload) return;
+
+        payload[key] = entryValue;
+      });
+    } else {
+      payload.email = values.email;
+      payload.password = values.password;
+
+      if (mode === 'register') {
+        payload.first_name = values.first_name;
+        payload.last_name = values.last_name;
+      }
     }
 
     setIsSubmitting(true);
 
     try {
       const response = await signIn(providerId, {
+        // After the payload: these decide whether next-auth answers at all.
+        ...payload,
         redirect: false,
-        callbackUrl,
-        ...payload
+        callbackUrl
       });
 
       if (!response || response.error) {
-        setError(readAuthError(response?.error) || errorLabel);
+        setError(readAuthError(signInErrorDetail(response)) || errorLabel);
 
         return;
       }
@@ -163,6 +340,7 @@ const AuthFormBlock = ({
         method: providerId
       });
 
+      if (closeModalsOnSuccess) closeAllModals();
       router.refresh();
       router.push(callbackUrl);
     } catch {
@@ -204,19 +382,195 @@ const AuthFormBlock = ({
         autoComplete={autoComplete}
         placeholder={placeholder || undefined}
         aria-label={showLabels ? undefined : label}
+        aria-invalid={fieldErrors[key] ? true : undefined}
         required
         {...partAttrs('input')}
-        style={inputStyle}
+        style={{
+          ...inputStyle,
+          ...(fieldErrors[key]
+            ? { borderColor: 'var(--auth-form-border-invalid, #dc2626)' }
+            : null)
+        }}
       />
+      {fieldErrors[key] && (
+        <span
+          data-auth-form-field-error={key}
+          {...partAttrs('error')}
+          role="alert"
+          style={{
+            color: 'var(--auth-form-error-color, #dc2626)',
+            fontSize: '0.875em'
+          }}
+        >
+          {fieldErrors[key]}
+        </span>
+      )}
     </label>
   );
 
+  /**
+   * "Forgot password?", in both modes.
+   *
+   * Composed forms draw it too: the fields being child blocks says nothing
+   * about the chrome around them — the submit button and the form-level error
+   * are drawn in both modes for the same reason. Left out, `showForgotPassword`
+   * and the Link part group meant one thing on a fixed form and nothing at all
+   * on a composed one, which is the kind of difference a designer discovers by
+   * publishing.
+   */
+  const forgotPasswordControl =
+    showForgotPassword && forgotPasswordLabel ? (
+      forgotPasswordStep ? (
+        // A button, not a link: this moves the flow, it does not navigate —
+        // and `type="button"` keeps it from submitting the form it sits in.
+        // Styled to read as the link it replaces.
+        <button
+          type="button"
+          data-auth-form-link="reset-password"
+          {...partAttrs('link')}
+          onClick={() => {
+            // The canvas has its own step switcher; a click here must not move
+            // the flow under the designer's feet.
+            if (isDesigner) return;
+
+            setAuthStep(forgotPasswordStep.flowId, forgotPasswordStep.stepKey);
+          }}
+          style={{
+            alignSelf: 'flex-start',
+            padding: 0,
+            margin: 0,
+            border: 'none',
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            textDecoration: 'underline',
+            cursor: 'pointer'
+          }}
+        >
+          {forgotPasswordLabel}
+        </button>
+      ) : (
+        <NextLink
+          data-auth-form-link="reset-password"
+          {...partAttrs('link')}
+          href={isDesigner ? '#' : forgotPasswordUrl}
+          onClick={(event) => {
+            if (isDesigner) event.preventDefault();
+          }}
+          style={{ color: 'inherit' }}
+        >
+          {forgotPasswordLabel}
+        </NextLink>
+      )
+    ) : null;
+
+  /**
+   * The children, with the six editor callbacks each one needs to be movable,
+   * duplicable, hideable, deletable and renamable on the canvas.
+   *
+   * Through the package's own `renderComposedChildren` rather than a private
+   * copy of it. The copies each posted their messages to `'*'`, which
+   * `editor-bridge.ts` exists to prevent — it addresses the editor's real
+   * origin, so an editor command never reaches whatever other page happens to
+   * be embedding the storefront — and every copy was a place a new message
+   * field had to be remembered.
+   */
+  const renderChildren = () =>
+    renderComposedChildren({
+      blocks: childBlocks,
+      placeholderId,
+      sectionId,
+      isDesigner,
+      selectedBlockId,
+      currentBreakpoint
+    });
+
+  if (isComposed) {
+    /**
+     * The composed form: children carry the fields (native inputs named by
+     * `auth-field`), submit reads them through FormData. The built-in submit
+     * stays available under its toggle so a fresh composition works before
+     * the designer wires their own CTA.
+     */
+    const errorIsAuthored = containsAuthErrorBlock(childBlocks);
+
+    return (
+      <AuthFormErrorProvider value={error}>
+        <AuthFieldErrorsProvider value={fieldErrors}>
+          <form
+            id={formHtmlId || undefined}
+            data-auth-form=""
+            // Fills its block wrapper; see the note in auth-step-block.tsx.
+            className="w-full"
+            data-auth-form-mode={mode}
+            {...partAttrs('form')}
+            onSubmit={submit}
+            // The browser's own bubble is what this replaces; the constraints it
+            // reads (`required`, `type`) stay on the fields and are still what
+            // `collectAuthFieldErrors` reports on.
+            noValidate
+            onInput={handleInput}
+            onChange={handleInput}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 'var(--auth-form-gap, 12px)'
+            }}
+          >
+            {renderChildren()}
+
+            {forgotPasswordControl}
+
+            {/* The composition's own Form Error block draws the message where the
+              design wants it; this node is the fallback for one that has not
+              placed it, and appending it here is exactly why the block exists.
+              See `auth/form-error-context.tsx`. */}
+            {error && !errorIsAuthored && (
+              <div data-auth-form-error="" {...partAttrs('error')} role="alert">
+                {error}
+              </div>
+            )}
+
+            {showSubmit && (
+              <button
+                type="submit"
+                data-auth-form-submit=""
+                {...partAttrs('submit', {
+                  loading: isSubmitting,
+                  disabled: isSubmitting
+                })}
+                disabled={isSubmitting}
+                style={{
+                  padding: '12px 20px',
+                  background: 'var(--auth-form-cta-bg, #111827)',
+                  color: 'var(--auth-form-cta-color, #ffffff)',
+                  border: 'none',
+                  cursor: 'pointer'
+                }}
+              >
+                {isSubmitting && busyLabel ? busyLabel : submitLabel}
+              </button>
+            )}
+          </form>
+        </AuthFieldErrorsProvider>
+      </AuthFormErrorProvider>
+    );
+  }
+
   return (
     <form
+      id={formHtmlId || undefined}
       data-auth-form=""
+      // Fills its block wrapper; see the note in auth-step-block.tsx.
+      className="w-full"
       data-auth-form-mode={mode}
       {...partAttrs('form')}
       onSubmit={submit}
+      // Same reasoning as the composed form above: our own message under the
+      // field, not the browser's bubble over it.
+      noValidate
+      onInput={handleInput}
+      onChange={handleInput}
       style={{
         display: 'flex',
         flexDirection: 'column',
@@ -257,19 +611,7 @@ const AuthFormBlock = ({
         prop('passwordPlaceholder', '')
       )}
 
-      {showForgotPassword && forgotPasswordLabel && (
-        <NextLink
-          data-auth-form-link="reset-password"
-          {...partAttrs('link')}
-          href={isDesigner ? '#' : forgotPasswordUrl}
-          onClick={(event) => {
-            if (isDesigner) event.preventDefault();
-          }}
-          style={{ color: 'inherit' }}
-        >
-          {forgotPasswordLabel}
-        </NextLink>
-      )}
+      {forgotPasswordControl}
 
       {error && (
         <div data-auth-form-error="" {...partAttrs('error')} role="alert">
@@ -277,24 +619,26 @@ const AuthFormBlock = ({
         </div>
       )}
 
-      <button
-        type="submit"
-        data-auth-form-submit=""
-        {...partAttrs('submit', {
-          loading: isSubmitting,
-          disabled: isSubmitting
-        })}
-        disabled={isSubmitting}
-        style={{
-          padding: '12px 20px',
-          background: 'var(--auth-form-cta-bg, #111827)',
-          color: 'var(--auth-form-cta-color, #ffffff)',
-          border: 'none',
-          cursor: 'pointer'
-        }}
-      >
-        {isSubmitting && busyLabel ? busyLabel : submitLabel}
-      </button>
+      {showSubmit && (
+        <button
+          type="submit"
+          data-auth-form-submit=""
+          {...partAttrs('submit', {
+            loading: isSubmitting,
+            disabled: isSubmitting
+          })}
+          disabled={isSubmitting}
+          style={{
+            padding: '12px 20px',
+            background: 'var(--auth-form-cta-bg, #111827)',
+            color: 'var(--auth-form-cta-color, #ffffff)',
+            border: 'none',
+            cursor: 'pointer'
+          }}
+        >
+          {isSubmitting && busyLabel ? busyLabel : submitLabel}
+        </button>
+      )}
     </form>
   );
 };

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

@@ -0,0 +1,81 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { renderComposedChildren } from './render-composed-children';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+
+/**
+ * One step of an auth journey: a named wrapper whose contents are authored as
+ * CHILD blocks — a login form, an OTP form, plain text and buttons, whatever
+ * the design says the step is.
+ *
+ * The step itself decides nothing about visibility. Inside an `auth-flow`
+ * block the FLOW renders only the active step; dropped anywhere else the step
+ * is just a labelled column and its children always show — which is what makes
+ * every step reusable on its own (a register step straight on a page, a login
+ * step inside any panel).
+ *
+ * Properties: stepKey.
+ * Parts: step.
+ */
+const AuthStepBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner = false,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  const stepKey = String(
+    getResponsiveValue(block.properties?.stepKey, currentBreakpoint, '')
+  ).trim();
+
+  const childBlocks = (block.blocks || [])
+    .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+  // An empty step renders nothing a shopper could see; in the canvas it has to
+  // say what it is waiting for, or adding one looks like nothing happened.
+  if (childBlocks.length === 0 && !isDesigner) return null;
+
+  return (
+    <div
+      data-auth-step=""
+      // Fills the block wrapper the designer selects.
+      //
+      // That wrapper is a flex ROW by default (the Visibility control ships
+      // `flex`), and this element is its single item — so left to itself it
+      // shrink-wraps to its longest line of text, which is why a drawer full of
+      // auth blocks came out narrower than the drawer. A CLASS rather than an
+      // inline width on purpose: the generated part rule
+      // (`[data-block-id="x"] [data-part="…"]`) outranks a class, so a designer
+      // who types a width still wins — an inline style would outrank the rule and
+      // make that control inert.
+      className="w-full"
+      data-auth-step-key={stepKey || undefined}
+      {...partAttrs('step')}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--auth-step-gap, 12px)'
+      }}
+    >
+      {childBlocks.length === 0 ? (
+        <DesignerPlaceholder label="Auth step (drop its content here)" />
+      ) : (
+        renderComposedChildren({
+          blocks: childBlocks,
+          placeholderId,
+          sectionId,
+          isDesigner,
+          selectedBlockId,
+          currentBreakpoint
+        })
+      )}
+    </div>
+  );
+};
+
+export default AuthStepBlock;