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

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

@@ -1,22 +1,32 @@
 'use client';
 
-import React, { useContext, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { signIn } from 'next-auth/react';
+import React, { useContext, useRef, useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { signIn, useSession } from 'next-auth/react';
 import { useLocalization } from '@akinon/next/hooks';
-import { getResponsiveValue, partAttrs } from '../utils';
+import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
 import { readToggle } from './product-block-utils';
 import { closeAllModals } from '../overlays/overlay-bus';
+import {
+  useHostModalCloser,
+  useModalHostId
+} from '../overlays/modal-host-context';
 import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
-  collectAuthFieldErrors
+  collectAuthFieldErrors,
+  focusFirstAuthFieldError
 } from '../auth/auth-field-errors';
 import {
   AuthFormErrorProvider,
   containsAuthErrorBlock
 } from '../auth/form-error-context';
+import {
+  AuthFormStateProvider,
+  AuthFormStateValue,
+  showsInFormState
+} from '../auth/form-state-context';
 import {
   AUTH_CONSENT_NAMES,
   AuthConsentHostProvider
@@ -32,60 +42,29 @@ import {
   setAuthStep,
   setPendingOtp
 } from '../auth/auth-flow-bus';
+import {
+  authFormMessage,
+  readAuthError,
+  splitByKnownFields
+} from '../auth/read-auth-error';
+import {
+  AUTH_AFTER_SIGN_IN_MODES,
+  AuthAfterSignIn,
+  resolveAuthDestination,
+  resolveSignedInDestination
+} from '../auth/auth-destination';
+import {
+  WHEN_SIGNED_IN_MODES,
+  WhenSignedIn
+} from './auth-form-block';
+import {
+  AuthCaptchaApi,
+  AuthCaptchaHost,
+  AuthCaptchaSlot,
+  containsCaptchaBlock
+} from '../auth/auth-captcha';
 import { BlockRendererProps } from './block-renderer-registry';
 
-/**
- * pz brands serialise an AuthError[] into next-auth's `error` string, but a
- * plain string is also possible, so both shapes are handled. Kept local rather
- * than imported from auth-form-block: that block owns its own copy and making
- * it an export would change a shipped module's public surface.
- */
-const readAuthError = (
-  error: string | null | undefined,
-  otpMessage: string
-): string => {
-  if (!error) return '';
-
-  try {
-    const parsed = JSON.parse(error);
-    if (!Array.isArray(parsed)) return String(error);
-
-    const messages: string[] = [];
-
-    parsed.forEach((entry) => {
-      const type = (entry as { type?: unknown })?.type;
-      const data = (entry as { data?: unknown })?.data;
-
-      // The OTP branch carries no message: superstep answers a valid
-      // registration with an `otp` error and expects the storefront to run an
-      // SMS-verification step. When no `otpStepTarget` is set the challenge
-      // lands here, so the shopper is at least told what happened instead of
-      // seeing a silent failure.
-      if (type === 'otp') {
-        messages.push(otpMessage);
-        return;
-      }
-
-      if (Array.isArray(data)) {
-        data.forEach((item) => {
-          if (typeof item === 'string') {
-            messages.push(item);
-          } else if (item && typeof item === 'object') {
-            const value = (item as { value?: unknown }).value;
-            if (typeof value === 'string') messages.push(value);
-          }
-        });
-      } else if (typeof data === 'string') {
-        messages.push(data);
-      }
-    });
-
-    return messages.join(' ') || String(error);
-  } catch {
-    return String(error);
-  }
-};
-
 /**
  * Names a composed field must not take, because the form and next-auth already
  * mean something by them.
@@ -109,27 +88,6 @@ const RESERVED_SUBMIT_KEYS = new Set([
   'json'
 ]);
 
-/**
- * Whether commerce answered a valid registration with an SMS-verification
- * challenge. Detected separately from the message extraction because the
- * challenge is a HANDOFF, not a failure: the pending payload moves to the
- * auth bus and an `otp-form` block finishes the sign-up.
- */
-const hasOtpChallenge = (error: string | null | undefined): boolean => {
-  if (!error) return false;
-
-  try {
-    const parsed = JSON.parse(error);
-
-    return (
-      Array.isArray(parsed) &&
-      parsed.some((entry) => (entry as { type?: unknown })?.type === 'otp')
-    );
-  } catch {
-    return false;
-  }
-};
-
 /**
  * Where the serialised AuthError[] actually lives depends on the next-auth
  * major. v4 puts it into `error` itself; v5 keeps `error` at the generic
@@ -147,11 +105,27 @@ const signInErrorDetail = (
 
 /**
  * The commerce registration endpoint is reached through next-auth's credentials
- * provider, exactly like the brand's own register view: the provider id is
- * `default` and the url segment is selected by `formType`.
+ * provider, exactly like the brand's own register view: a provider id and a
+ * `formType` that selects the url segment. Both are authored properties now —
+ * see `providerId` / `formType` in the renderer — because the compiled-in
+ * `registration` is not a key the core url map has.
  */
-const PROVIDER_ID = 'default';
-const FORM_TYPE = 'registration';
+const DEFAULT_PROVIDER_ID = 'default';
+const DEFAULT_FORM_TYPE = 'register';
+
+/**
+ * The per-channel marketing permissions commerce records, in the order the
+ * brand's own register view sends them.
+ *
+ * Named here rather than written out at the call site because each one is a
+ * name a composition can author a tick for — see `authoredTick` in the submit.
+ */
+const AUTH_MARKETING_CHANNEL_FLAGS = [
+  'email_allowed',
+  'sms_allowed',
+  'call_allowed',
+  'whatsapp_allowed'
+] as const;
 
 /**
  * Functional auth block: full registration form (name, surname, e-mail,
@@ -184,6 +158,25 @@ const RegisterFormBlock = ({
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
 
+  /**
+   * The modal this form is inside, if any. Read before the destination is
+   * resolved, because it decides that destination's default: a sign-in inside
+   * a drawer is a detour from the page the shopper is on, so `stay` is right
+   * there and `fixed` — the historical push — is right on a page.
+   */
+  const hostModalId = useModalHostId();
+  /**
+   * Whether finishing closes the modal this form is inside. On here because a
+   * sign-in leaves nothing to read; the forms whose success state IS the point
+   * ("check your inbox") default to off. See `useHostModalCloser`.
+   */
+  const closeHostModalOnSuccess = readToggle(
+    block.properties?.closeHostModalOnSuccess,
+    currentBreakpoint,
+    true
+  );
+  const closeHostModal = useHostModalCloser(closeHostModalOnSuccess);
+
   const submitLabel = prop('submitLabel', 'Create account');
   // Empty on purpose: without a busy label the submit caption stays put while
   // the request runs, which is what published blocks render today.
@@ -227,6 +220,54 @@ const RegisterFormBlock = ({
     'otpLabel',
     'A verification code was sent. Please confirm it to finish.'
   );
+  const captchaLabel = prop(
+    'captchaLabel',
+    'Please complete the security check and try again.'
+  );
+  /**
+   * Whether this form offers the security check commerce escalates to. Off by
+   * default because `useCaptcha` fetches the site key on mount — see
+   * `auth/auth-captcha.tsx`.
+   */
+  const showCaptcha = readToggle(
+    block.properties?.showCaptcha,
+    currentBreakpoint,
+    false
+  );
+  /**
+   * Which credentials provider and which commerce endpoint the sign-up goes
+   * to. Authored for the same reason the Auth Form authors them: the provider
+   * id and the `formType` are how a brand points a form at its own provider,
+   * and a brand whose url map names the endpoint differently had no way to say
+   * so — the values were compiled in.
+   *
+   * `register` is the default because that is the key the core provider's url
+   * map actually has (`@akinon/next/data/urls.ts`, `user.register`). The
+   * compiled-in `registration` resolved to `undefined`, so the sign-up POSTed
+   * to `${commerceUrl}undefined` and no account was ever created.
+   */
+  const providerId = prop('providerId', DEFAULT_PROVIDER_ID);
+  const formType = prop('formType', DEFAULT_FORM_TYPE);
+  const callbackUrl = prop('callbackUrl', '/');
+  /**
+   * Where a finished sign-up leaves the shopper, and what one who is already
+   * signed in sees here. Same three modes and same default as the Auth Form —
+   * see `auth/auth-destination.ts`.
+   */
+  const afterSignIn = resolveOption<AuthAfterSignIn>(
+    block.properties?.afterSignIn,
+    currentBreakpoint,
+    'fixed',
+    AUTH_AFTER_SIGN_IN_MODES as unknown as AuthAfterSignIn[]
+  );
+  const whenSignedIn = resolveOption<WhenSignedIn>(
+    block.properties?.whenSignedIn,
+    currentBreakpoint,
+    'form',
+    WHEN_SIGNED_IN_MODES as unknown as WhenSignedIn[]
+  );
+  const signedInLabel = prop('signedInLabel', 'You are already signed in.');
+  const signedInHref = prop('signedInHref', '/account');
   // Where the SMS-verification challenge sends the shopper: a step key (or
   // `flow:step`) whose step holds an `otp-form` block. Empty keeps the old
   // behaviour — the otpLabel message — so published compositions are
@@ -252,6 +293,20 @@ const RegisterFormBlock = ({
   );
 
   const router = useRouter();
+  const search = useSearchParams();
+  const pathname = usePathname();
+  const { status } = useSession();
+  // `loading` counts as a guest — see the note in auth-form-block.
+  const isSignedIn = status === 'authenticated' && !isDesigner;
+  const destination = resolveAuthDestination({
+    mode: afterSignIn,
+    authored: callbackUrl,
+    search,
+    // A sign-in inside a drawer is a detour: a destination that names nowhere
+    // in particular means there is nowhere to go. An authored one still wins.
+    inModal: Boolean(hostModalId),
+    pathname
+  });
   const { locale, defaultLocaleValue } = useLocalization();
   const contextFlowId = useContext(AuthFlowIdContext);
 
@@ -279,6 +334,37 @@ const RegisterFormBlock = ({
   // Per FIELD, as opposed to `error`, which is what the backend answered about
   // the attempt as a whole.
   const [fieldErrors, setFieldErrors] = useState<AuthFieldErrors>({});
+  /**
+   * The security check's api. A ref, not state: the form reads it at SUBMIT
+   * time, and re-rendering a whole sign-up form every time the widget changes
+   * its mind would be a re-render for nothing.
+   */
+  const captchaRef = useRef<AuthCaptchaApi | null>(null);
+  const holdCaptchaApi = React.useCallback((api: AuthCaptchaApi) => {
+    captchaRef.current = api;
+  }, []);
+
+  /**
+   * A shopper who is already signed in, taken where they were going. `replace`
+   * so the Back button does not put them on a sign-up form again.
+   */
+  React.useEffect(() => {
+    if (!isSignedIn || whenSignedIn !== 'redirect') return;
+
+    router.replace(resolveSignedInDestination(signedInHref, search));
+  }, [isSignedIn, whenSignedIn, signedInHref, router, search]);
+
+  /**
+   * The form's contents, wrapped so a Security Check block (or the form's own
+   * slot) can reach the challenge. Left exactly as they were when the form
+   * does not offer one, which is every published composition.
+   */
+  const withCaptcha = (contents: React.ReactNode) =>
+    showCaptcha ? (
+      <AuthCaptchaHost onApi={holdCaptchaApi}>{contents}</AuthCaptchaHost>
+    ) : (
+      contents
+    );
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const setField = (key: keyof typeof values) => (
@@ -321,6 +407,14 @@ const RegisterFormBlock = ({
     // Submitting inside the designer would create a real commerce account.
     if (isDesigner) return;
 
+    // A live session must not be handed a second account. Enforced whatever
+    // the `whenSignedIn` policy is — see auth-form-block.
+    if (isSignedIn) {
+      setError(signedInLabel);
+
+      return;
+    }
+
     // Held onto because `currentTarget` is only the form for as long as the
     // handler is on the stack, and the consent question below is asked of the
     // markup rather than of state.
@@ -349,7 +443,7 @@ const RegisterFormBlock = ({
     }
 
     const payload: Record<string, string | boolean> = {
-      formType: FORM_TYPE,
+      formType,
       // The credentials provider looks the locale up in Settings and throws
       // when it is missing, so an explicit value is always sent.
       locale: locale || defaultLocaleValue || ''
@@ -440,16 +534,44 @@ const RegisterFormBlock = ({
       return;
     }
 
-    // Commerce requires both consent flags; one tick gates them because both
-    // are mandatory to register at all — unless the composition made the tick
-    // optional, and then the shopper's actual answer is what travels rather
-    // than a yes nobody gave.
-    payload.is_allowed = legalControl ? agreedToTerms : true;
-    payload.confirm = payload.is_allowed;
-    payload.email_allowed = agreedToMarketing;
-    payload.sms_allowed = agreedToMarketing;
-    payload.call_allowed = agreedToMarketing;
-    payload.whatsapp_allowed = agreedToMarketing;
+    /**
+     * A flag the composition asked about ITSELF, or `undefined` when it did
+     * not ask.
+     *
+     * Only a tick counts: a Custom field named after a flag would answer
+     * `checked === false` on a text input and post a refusal the shopper never
+     * gave, so the query is narrowed to checkboxes.
+     */
+    const authoredTick = (name: string): boolean | undefined => {
+      if (!isComposed) return undefined;
+
+      const control = formElement.querySelector(
+        `input[type="checkbox"][name="${name}"]`
+      ) as HTMLInputElement | null;
+
+      return control ? control.checked : undefined;
+    };
+
+    const agreedToLegal = legalControl ? agreedToTerms : true;
+
+    payload.is_allowed = agreedToLegal;
+    payload.confirm = authoredTick('confirm') ?? agreedToLegal;
+
+    /**
+     * The four marketing channels, each carrying the answer the shopper
+     * actually gave.
+     *
+     * They used to be fanned out from the single marketing tick, which turned
+     * a composition that asks per channel into a lie: a shopper who ticked
+     * e-mail and left SMS alone was recorded as refusing all four. A consent
+     * record is a legal record, so a channel the composition asks about
+     * carries its own tick, and only the channels nobody asked about fall back
+     * to the one blanket answer — which is what a childless fixed form, and
+     * every composition that shows a single marketing row, still sends.
+     */
+    AUTH_MARKETING_CHANNEL_FLAGS.forEach((name) => {
+      payload[name] = authoredTick(name) ?? agreedToMarketing;
+    });
 
     // Commerce expects bare digits; the mask characters brands render around
     // the phone input would fail its length validation.
@@ -468,20 +590,62 @@ const RegisterFormBlock = ({
     setIsSubmitting(true);
 
     try {
-      const response = await signIn(PROVIDER_ID, {
-        // After the payload, not before it: these decide whether next-auth
-        // hands back a response or navigates away, and a body key must never
-        // be able to answer that question. `RESERVED_SUBMIT_KEYS` already
-        // keeps them out of the payload; this is the belt to that braces.
-        ...payload,
-        redirect: false,
-        callbackUrl: '/'
-      });
+      /**
+       * One attempt. Called twice at most: a captcha escalation is answered
+       * and the same body is sent again, which is what the brand's own view
+       * does — the shopper solved the challenge, so making them press the
+       * button again would be the storefront's failure, not theirs.
+       */
+      const attempt = (solvedNow?: boolean) =>
+        signIn(providerId, {
+          // Sent only while the form offers a challenge, so a storefront
+          // without one keeps posting exactly the body it posts today.
+          ...(showCaptcha
+            ? {
+                captchaValidated:
+                  solvedNow ?? captchaRef.current?.validated ?? false
+              }
+            : null),
+          // After the payload, not before it: these decide whether next-auth
+          // hands back a response or navigates away, and a body key must never
+          // be able to answer that question. `RESERVED_SUBMIT_KEYS` already
+          // keeps them out of the payload; this is the belt to that braces.
+          ...payload,
+          redirect: false,
+          callbackUrl
+        });
 
-      if (!response || response.error) {
-        const errorDetail = signInErrorDetail(response);
+      let response = await attempt();
+
+      if (
+        response?.error &&
+        showCaptcha &&
+        readAuthError(signInErrorDetail(response)).hasCaptchaChallenge &&
+        (await captchaRef.current?.validate())
+      ) {
+        // `true`, not the ref: what `validate` just resolved IS the answer, and
+        // the ref only catches up on the host's next render.
+        response = await attempt(true);
+      }
 
-        if (hasOtpChallenge(errorDetail)) {
+      if (!response || response.error) {
+        /**
+         * What commerce actually refused, split into the sentence for the
+         * form-level slot and the sentences that belong under a field.
+         *
+         * Re-split against the form on screen: commerce names a field this
+         * composition may not have authored, and a message hung on a name no
+         * control submits under is a message nobody ever sees.
+         */
+        const reading = splitByKnownFields(
+          readAuthError(signInErrorDetail(response), {
+            otp: otpLabel,
+            captcha: captchaLabel
+          }),
+          formElement
+        );
+
+        if (reading.hasOtpChallenge) {
           // Resolved BEFORE the handoff is parked, so the record can say which
           // journey it belongs to.
           const resolvedStep = resolveAuthStepTarget(
@@ -502,7 +666,7 @@ const RegisterFormBlock = ({
           setPendingOtp({
             kind: 'register',
             phone: typeof payload.phone === 'string' ? payload.phone : '',
-            providerId: PROVIDER_ID,
+            providerId,
             payload,
             scope: resolvedStep ? resolvedStep.flowId : contextFlowId,
             stepKey: resolvedStep?.stepKey
@@ -514,13 +678,47 @@ const RegisterFormBlock = ({
           }
         }
 
-        setError(readAuthError(errorDetail, otpLabel) || errorLabel);
+        // Server-side field errors land where client-side ones already do, so
+        // "this e-mail is already registered" reads under the e-mail input
+        // instead of as a JSON blob above the form.
+        setFieldErrors((current) => ({ ...current, ...reading.fieldMessages }));
+        focusFirstAuthFieldError(formElement, reading.fieldMessages);
+        setError(authFormMessage(reading, errorLabel));
+
         return;
       }
 
+      /**
+       * The surface this form finished inside.
+       *
+       * Closing the modal it is IN is the default because it is never a
+       * surprise: a shopper who signed in inside the drawer is done with the
+       * drawer. `closeModalsOnSuccess` keeps its own, wider meaning — close
+       * EVERY open modal — for a composition that authored it, which is what a
+       * form nested two overlays deep needs.
+       *
+       * The live GANT drawer is why the default had to change: its OTP form has
+       * the toggle on and its login and register forms do not, so signing in
+       * with an e-mail left the drawer covering the page.
+       */
+      /**
+       * Both, not either: a composition that ticked the legacy toggle asked
+       * for "every open modal", and the wide close is a superset — so the
+       * narrow one runs unconditionally and simply finds nothing left to do.
+       * Sequencing them the other way round (an `else`) would have left every
+       * already-published drawer on the wide branch forever, which is the one
+       * behaviour this family exists to stop.
+       */
       if (closeModalsOnSuccess) closeAllModals();
+      closeHostModal();
+
+      // The new session has to reach the page either way; in `stay` mode this
+      // refresh IS the whole navigation.
       router.refresh();
-      router.push(response.url || '/');
+
+      // Our own resolved path rather than next-auth's echo of it: this one has
+      // been through the same-origin check. `null` is `stay`.
+      if (destination) router.push(destination);
     } catch {
       setError(errorLabel);
     } finally {
@@ -640,9 +838,31 @@ const RegisterFormBlock = ({
    * be embedding the storefront — and every copy was a place a new message
    * field had to be remembered.
    */
+  /**
+   * What the composition's Form State containers read. A registration ends in
+   * a sign-in or a handoff to the OTP step, so there is no success SCREEN
+   * here either — what can be scoped is the submission running and the
+   * refusal. See `auth/form-state-context.tsx`.
+   */
+  const formStateValue: AuthFormStateValue = {
+    screen: 'form',
+    busy: isSubmitting,
+    hasError: Boolean(error)
+  };
+
   const renderChildren = () =>
     renderComposedChildren({
-      blocks: childBlocks,
+      // A child that is not a state container is shared chrome, and shows
+      // whatever the form is doing.
+      blocks: childBlocks.filter((childBlock) =>
+        showsInFormState({
+          block: childBlock,
+          state: formStateValue,
+          isDesigner,
+          selectedBlockId,
+          currentBreakpoint
+        })
+      ),
       placeholderId,
       sectionId,
       isDesigner,
@@ -650,6 +870,21 @@ const RegisterFormBlock = ({
       currentBreakpoint
     });
 
+  // Told, rather than shown a form they cannot use — see auth-form-block.
+  if (isSignedIn && whenSignedIn !== 'form') {
+    return (
+      <div
+        data-register-form=""
+        className="w-full"
+        data-register-form-state="signed-in"
+        {...partAttrs('signed-in')}
+        role="status"
+      >
+        {signedInLabel}
+      </div>
+    );
+  }
+
   if (isComposed) {
     /**
      * The composed form: the children carry the inputs (`auth-field`), the
@@ -664,6 +899,7 @@ const RegisterFormBlock = ({
             them into the flags commerce names individually — so its children
             are where a membership or marketing row actually works. */}
         <AuthConsentHostProvider value>
+          <AuthFormStateProvider value={formStateValue}>
           <AuthFieldErrorsProvider value={fieldErrors}>
             <form
               id={formHtmlId || undefined}
@@ -684,7 +920,17 @@ const RegisterFormBlock = ({
                 gap: 'var(--register-form-gap, 12px)'
               }}
             >
-              {renderChildren()}
+              {withCaptcha(
+                <>
+                  {renderChildren()}
+
+                  {/* The form draws the challenge only when the composition
+                    did not place a Security Check block — the same
+                    relationship the built-in error line has with a Form Error
+                    block. */}
+                  {!containsCaptchaBlock(childBlocks) && <AuthCaptchaSlot />}
+                </>
+              )}
 
               {/* The fallback for a composition that has not placed a Form Error
                 block; see `auth/form-error-context.tsx` for why placing one is
@@ -723,6 +969,7 @@ const RegisterFormBlock = ({
               )}
             </form>
           </AuthFieldErrorsProvider>
+          </AuthFormStateProvider>
         </AuthConsentHostProvider>
       </AuthFormErrorProvider>
     );
@@ -794,6 +1041,11 @@ const RegisterFormBlock = ({
           false
         )}
 
+      {/* A childless form has nowhere for a Security Check block to be, so it
+          draws the challenge itself — above its own submit, where the brand's
+          own view puts it. */}
+      {withCaptcha(<AuthCaptchaSlot />)}
+
       {error && (
         <div data-register-form-error="" {...partAttrs('error')} role="alert">
           {error}