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

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

@@ -1,13 +1,17 @@
 'use client';
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { signIn } from 'next-auth/react';
 import { useLocalization } from '@akinon/next/hooks';
 import { useOtpLoginMutation } from '@akinon/next/data/client/user';
 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 {
   AuthFlowIdContext,
   clearPendingOtp,
@@ -25,51 +29,36 @@ import {
   AuthFormErrorProvider,
   containsAuthErrorBlock
 } from '../auth/form-error-context';
+import {
+  AuthFormStateProvider,
+  AuthFormStateValue,
+  showsInFormState
+} from '../auth/form-state-context';
 import {
   clearFormSubmitState,
   publishFormSubmitState
 } from '../auth/form-submit-bus';
 import { OtpFormApi, OtpFormProvider } from '../auth/otp-form-context';
 import { renderComposedChildren } from './render-composed-children';
-import { BlockRendererProps } from './block-renderer-registry';
+import {
+  authFormMessage,
+  readAuthError,
+  splitByKnownFields
+} from '../auth/read-auth-error';
+import {
+  AUTH_AFTER_SIGN_IN_MODES,
+  AuthAfterSignIn,
+  resolveAuthDestination
+} from '../auth/auth-destination';
 
 /**
- * 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, for the same reason register-form keeps
- * its own copy: exporting it would change a shipped module's public surface.
+ * The two names an OTP journey submits under, and therefore the only two a
+ * field-level refusal can be hung on. The verify handler has no form element
+ * to measure — its CTA may be a detached Button outside the form — so the set
+ * is named rather than read off the DOM.
  */
-const readAuthError = (error: string | null | undefined): string => {
-  if (!error) return '';
-
-  try {
-    const parsed = JSON.parse(error);
-    if (!Array.isArray(parsed)) return String(error);
-
-    const messages: string[] = [];
-
-    parsed.forEach((entry) => {
-      const data = (entry as { data?: unknown })?.data;
-
-      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);
-  }
-};
+const OTP_FIELD_NAMES = ['code', 'phone'] as const;
+import { BlockRendererProps } from './block-renderer-registry';
 
 /**
  * Where the serialised AuthError[] actually lives depends on the next-auth
@@ -82,28 +71,6 @@ const signInErrorDetail = (
   response: { error?: string | null; code?: string | null } | null | undefined
 ): string | null | undefined => response?.code || response?.error;
 
-/**
- * Whether commerce answered with another SMS-verification challenge — which is
- * what a RESEND of a parked registration is supposed to get back, as opposed to
- * the refusals (a rate limit, an expired attempt) that must reach the shopper.
- * Kept local for the same reason `readAuthError` is: exporting register-form's
- * copy would change a shipped module's public surface.
- */
-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;
-  }
-};
-
 /**
  * The OTP endpoint answers a successful send with 2xx and an EMPTY body, which
  * RTK Query rejects as a parse failure. Brands treat that rejection as the
@@ -174,6 +141,25 @@ const OtpFormBlock = ({
       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 collectPhone = readToggle(
     block.properties?.collectPhone,
     currentBreakpoint,
@@ -231,7 +217,24 @@ const OtpFormBlock = ({
   const providerId = prop('providerId', 'default');
   const otpFormType = prop('otpFormType', 'otpLogin');
   const callbackUrl = prop('callbackUrl', '/');
+  /**
+   * Where a finished verification leaves the shopper. Same three modes as the
+   * Auth Form, and the same default — a phone login inside a drawer wants
+   * `stay` just as much as an e-mail one does.
+   */
+  const afterSignIn = resolveOption<AuthAfterSignIn>(
+    block.properties?.afterSignIn,
+    currentBreakpoint,
+    'fixed',
+    AUTH_AFTER_SIGN_IN_MODES as unknown as AuthAfterSignIn[]
+  );
   const errorLabel = prop('errorLabel', 'Verification failed.');
+  // Named rather than shown as raw JSON — see auth-form-block for the reason
+  // this theme cannot answer the challenge yet.
+  const captchaLabel = prop(
+    'captchaLabel',
+    'Please complete the security check and try again.'
+  );
   /**
    * Submitting a half-typed code used to be a silent no-op: the built-in verify
    * button is disabled until the last box is filled, so nothing could reach it.
@@ -248,13 +251,17 @@ const OtpFormBlock = ({
     'codeIncompleteMessage',
     'Enter the {length}-digit code we sent you.'
   );
-  // Defaults on: the commonest home for this block is a drawer, and a drawer
-  // still covering the page the shopper just signed into reads as a hang.
-  // closeAllModals is a no-op when nothing is open, so pages pay nothing.
+  /**
+   * Off now, and the reason it used to be on is what changed: "the commonest
+   * home for this block is a drawer" is exactly the case the host-scoped close
+   * below handles, without touching any other overlay. Left on, this toggle
+   * would take the WIDE branch — every open modal on the page — so a phone
+   * login would also close an unrelated mini-basket or quick-view.
+   */
   const closeModalsOnSuccess = readToggle(
     block.properties?.closeModalsOnSuccess,
     currentBreakpoint,
-    true
+    false
   );
   // The code phase is unreachable in the canvas without sending a real SMS,
   // so the designer picks the phase to dress — the previewSuccess pattern.
@@ -266,6 +273,17 @@ const OtpFormBlock = ({
   );
 
   const router = useRouter();
+  const search = useSearchParams();
+  const pathname = usePathname();
+  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);
   /**
@@ -506,14 +524,48 @@ const OtpFormBlock = ({
       });
 
       if (!response || response.error) {
-        setError(readAuthError(signInErrorDetail(response)) || errorLabel);
+        // A wrong or expired code is a FIELD refusal — commerce names `code`
+        // — so it belongs under the boxes the shopper just typed into.
+        const reading = splitByKnownFields(
+          readAuthError(signInErrorDetail(response), { captcha: captchaLabel }),
+          null,
+          OTP_FIELD_NAMES
+        );
+
+        setFieldErrors((current) => ({ ...current, ...reading.fieldMessages }));
+        setError(authFormMessage(reading, errorLabel));
+
         return;
       }
 
       clearPendingOtp(contextFlowId);
+      /**
+       * 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();
       router.refresh();
-      router.push(response.url || callbackUrl);
+      // Our own resolved path rather than next-auth's echo of it; `null` is
+      // `stay`, where the refresh above is the whole navigation.
+      if (destination) router.push(destination);
     } catch {
       setError(errorLabel);
     } finally {
@@ -550,8 +602,24 @@ const OtpFormBlock = ({
         // never sent. (Same shape `submitCode` reads.)
         const detail = signInErrorDetail(response);
 
-        if (response?.error && !hasOtpChallenge(detail)) {
-          setError(readAuthError(detail) || sendErrorLabel);
+        const resendReading = readAuthError(detail, {
+          captcha: captchaLabel
+        });
+
+        if (response?.error && !resendReading.hasOtpChallenge) {
+          // The rate limit commerce actually reported, rather than "could not
+          // send the code" over and over while the shopper retries into a
+          // lockout. Field-level detail is folded in: there is no field on
+          // screen to hang it under at this point in the journey.
+          setError(
+            [
+              resendReading.formMessage,
+              ...Object.values(resendReading.fieldMessages)
+            ]
+              .filter(Boolean)
+              .join(' ') || sendErrorLabel
+          );
+
           return;
         }
 
@@ -672,6 +740,17 @@ const OtpFormBlock = ({
     </div>
   ) : null;
 
+  /**
+   * What the composition's Form State containers read. A verification ends in
+   * a sign-in, so there is no success SCREEN — what can be scoped is the
+   * request running and the refusal. See `auth/form-state-context.tsx`.
+   */
+  const formStateValue: AuthFormStateValue = {
+    screen: 'form',
+    busy: isBusy,
+    hasError: Boolean(error)
+  };
+
   /**
    * Which children this phase draws.
    *
@@ -682,6 +761,19 @@ const OtpFormBlock = ({
    * flow applies to its steps.
    */
   const showsInPhase = (childBlock: BlockRendererProps['block']): boolean => {
+    // A state container answers to what the form is DOING rather than to which
+    // half it is on — a "sending the code…" panel or a designed refusal box —
+    // so it is filtered by state, not by phase.
+    if (childBlock.type === 'form-state') {
+      return showsInFormState({
+        block: childBlock,
+        state: formStateValue,
+        isDesigner,
+        selectedBlockId,
+        currentBreakpoint
+      });
+    }
+
     if (childBlock.type !== 'otp-phase') return true;
 
     if (
@@ -773,6 +865,7 @@ const OtpFormBlock = ({
       // message is what a Form Error block draws wherever the design put it.
       <OtpFormProvider value={api}>
         <AuthFormErrorProvider value={error}>
+          <AuthFormStateProvider value={formStateValue}>
           <AuthFieldErrorsProvider value={fieldErrors}>
             <form
               id={formHtmlId || undefined}
@@ -802,6 +895,7 @@ const OtpFormBlock = ({
               {!errorIsAuthored && errorNode}
             </form>
           </AuthFieldErrorsProvider>
+          </AuthFormStateProvider>
         </AuthFormErrorProvider>
       </OtpFormProvider>
     );

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

@@ -7,6 +7,7 @@ import {
   useUpdateProfileMutation
 } from '@akinon/next/data/client/account';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { useHostModalCloser } from '../overlays/modal-host-context';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
 
@@ -63,6 +64,17 @@ const ProfileFormBlock = ({
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
 
+  /**
+   * Whether saving closes the modal this form is inside. Off by default: the
+   * "Saved" confirmation is the only feedback the shopper gets.
+   */
+  const closeHostModalOnSuccess = readToggle(
+    block.properties?.closeHostModalOnSuccess,
+    currentBreakpoint,
+    false
+  );
+  const closeHostModal = useHostModalCloser(closeHostModalOnSuccess);
+
   const submitLabel = text('submitLabel', 'Save changes');
   const submitAlign = text('submitAlign', 'stretch');
   const firstNameLabel = text('firstNameLabel', 'First name');
@@ -165,6 +177,7 @@ const ProfileFormBlock = ({
       }).unwrap();
 
       setStatus('saved');
+      closeHostModal();
     } catch {
       setStatus('error');
     }