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

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

@@ -1,17 +1,16 @@
 'use client';
 
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import NextLink from 'next/link';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { signIn, useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import { signIn } from 'next-auth/react';
 import { useLocalization } from '@akinon/next/hooks';
-import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
+import { getResponsiveValue, partAttrs } from '../utils';
 import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
-  collectAuthFieldErrors,
-  focusFirstAuthFieldError
+  collectAuthFieldErrors
 } from '../auth/auth-field-errors';
 import {
   clearFormSubmitState,
@@ -21,58 +20,61 @@ import {
   AuthFormErrorProvider,
   containsAuthErrorBlock
 } from '../auth/form-error-context';
-import {
-  AuthFormStateProvider,
-  AuthFormStateValue,
-  showsInFormState
-} from '../auth/form-state-context';
 import { emitCommerceEvent } from '../utils/analytics';
 import { readToggle } from './product-block-utils';
 import { closeAllModals } from '../overlays/overlay-bus';
-import {
-  useHostModalCloser,
-  useModalHostId
-} from '../overlays/modal-host-context';
 import {
   AuthFlowIdContext,
   resolveAuthStepTarget,
   setAuthStep
 } from '../auth/auth-flow-bus';
 import { renderComposedChildren } from './render-composed-children';
-import {
-  authFormMessage,
-  readAuthError,
-  splitByKnownFields
-} from '../auth/read-auth-error';
-import {
-  AUTH_AFTER_SIGN_IN_MODES,
-  AuthAfterSignIn,
-  resolveAuthDestination,
-  resolveSignedInDestination
-} from '../auth/auth-destination';
-import {
-  AuthCaptchaApi,
-  AuthCaptchaHost,
-  AuthCaptchaSlot,
-  containsCaptchaBlock
-} from '../auth/auth-captcha';
 import { BlockRendererProps } from './block-renderer-registry';
 
+/**
+ * Extracts a readable message out of the next-auth error string. pz brands
+ * serialise an AuthError[] into `error`, but a plain string is also possible,
+ * so both shapes are handled.
+ */
+const readAuthError = (error?: string | null): 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);
+  }
+};
+
 /**
  * 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.
  */
-/**
- * What a form does for a shopper who is already signed in. Named here rather
- * than in `auth-destination.ts` because it is a rendering decision, not a
- * destination one — the register form and the OTP form read the same list.
- */
-export const WHEN_SIGNED_IN_MODES = ['form', 'message', 'redirect'] as const;
-
-export type WhenSignedIn = (typeof WHEN_SIGNED_IN_MODES)[number];
-
 const RESERVED_SUBMIT_KEYS = new Set([
   'formType',
   'locale',
@@ -153,56 +155,10 @@ const AuthFormBlock = ({
       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 rawMode = prop('mode', 'login');
   const mode = rawMode === 'register' ? 'register' : 'login';
   const providerId = prop('providerId', 'default');
   const callbackUrl = prop('callbackUrl', '/');
-  /**
-   * Where a finished sign-in leaves the shopper. `fixed` is the historical
-   * answer and stays the default, so no published composition moves; a drawer
-   * wants `stay` and a login PAGE wants `return`. See `auth/auth-destination`.
-   */
-  const afterSignIn = resolveOption<AuthAfterSignIn>(
-    block.properties?.afterSignIn,
-    currentBreakpoint,
-    'fixed',
-    AUTH_AFTER_SIGN_IN_MODES as unknown as AuthAfterSignIn[]
-  );
-  /**
-   * What a shopper who is ALREADY signed in sees here.
-   *
-   * `form` is what shipped, and it is a dead end: a back button after signing
-   * in, a bookmarked /auth or a second tab shows a member a login form, and
-   * re-submitting it re-authenticates a live session. `message` says so;
-   * `redirect` takes them where they were going.
-   */
-  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');
   const submitLabel = prop(
     'submitLabel',
     mode === 'register' ? 'Create account' : 'Log in'
@@ -211,31 +167,6 @@ const AuthFormBlock = ({
   // the request is in flight, which is what every published block does today.
   const busyLabel = prop('busyLabel', '');
   const errorLabel = prop('errorLabel', 'Authentication failed.');
-  /**
-   * What the shopper is told when commerce escalates to a captcha after too
-   * many attempts. Nothing in this theme can ANSWER the challenge yet, so the
-   * least this can do is name it — the alternative, which shipped, was the
-   * literal `[{"type":"captcha"}]` in the error slot.
-   */
-  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, and not because the challenge is optional: `useCaptcha`
-   * fetches the site key on mount, and a storefront whose commerce never
-   * escalates should not pay a request per auth form for a widget it will
-   * never show. A brand that IS abuse-protected turns it on once, places a
-   * Captcha block where the challenge should appear (or lets the form draw it
-   * above the submit), and composed login stops dead-ending.
-   */
-  const showCaptcha = readToggle(
-    block.properties?.showCaptcha,
-    currentBreakpoint,
-    false
-  );
   const showLabels = readToggle(
     block.properties?.showLabels,
     currentBreakpoint,
@@ -257,16 +188,9 @@ const AuthFormBlock = ({
    * Empty keeps the URL, so every published form behaves as before.
    */
   const forgotPasswordStepTarget = prop('forgotPasswordStepTarget', '').trim();
-  /**
-   * `register`, not `registration`: the credentials provider resolves the
-   * endpoint as `user[formType]` and the core url map has only `register`, so
-   * the old default POSTed the sign-up to `${commerceUrl}undefined`. A brand
-   * whose own provider names the segment differently still says so here — that
-   * is what the property is for.
-   */
   const formType =
     mode === 'register'
-      ? prop('registerFormType', '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
@@ -298,25 +222,6 @@ const AuthFormBlock = ({
   );
 
   const router = useRouter();
-  const search = useSearchParams();
-  const pathname = usePathname();
-  const { status } = useSession();
-  /**
-   * `loading` counts as a guest on purpose. The opposite — withholding the
-   * form until the session is known — shows every shopper an empty panel for
-   * the first client render; this way the worst case is a member seeing the
-   * form for a beat, which is the state they are being moved out of anyway.
-   */
-  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);
   const forgotPasswordStep = resolveAuthStepTarget(
@@ -334,16 +239,6 @@ const AuthFormBlock = ({
   // 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>({});
-  /**
-   * The security check's api, kept in a ref rather than in state: the form
-   * reads `validated` and `validate` at SUBMIT time, and re-rendering the
-   * whole form every time the widget changes its mind would be a re-render for
-   * nothing. `AuthCaptchaHost` pushes it here.
-   */
-  const captchaRef = useRef<AuthCaptchaApi | null>(null);
-  const holdCaptchaApi = React.useCallback((api: AuthCaptchaApi) => {
-    captchaRef.current = api;
-  }, []);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const setField = (key: keyof typeof values) => (
@@ -385,31 +280,6 @@ const AuthFormBlock = ({
     return () => clearFormSubmitState(formHtmlId);
   }, [formHtmlId, isSubmitting]);
 
-  /**
-   * A shopper who is already signed in, taken where they were going.
-   *
-   * `replace`, not `push`: the login screen is not a place to come back to
-   * with the browser's Back button — that is precisely the loop that shows a
-   * member a login 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 Captcha block (or the form's own slot)
-   * can reach the challenge — and 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 handleInput = (event: React.FormEvent<HTMLFormElement>) => {
     const target = event.target as { name?: string } | null;
 
@@ -424,18 +294,6 @@ const AuthFormBlock = ({
 
     if (isDesigner || isSubmitting) return;
 
-    /**
-     * A live session must not be re-authenticated. Enforced whatever the
-     * `whenSignedIn` policy is: a composition left on `form` still has a form
-     * on screen, and submitting it would swap one valid session for another
-     * for no reason — with the shopper's password on the wire again.
-     */
-    if (isSignedIn) {
-      setError(signedInLabel);
-
-      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.
@@ -489,53 +347,12 @@ const AuthFormBlock = ({
     setIsSubmitting(true);
 
     try {
-      /**
-       * One attempt. Called twice at most: a captcha escalation is answered
-       * and the same body is sent again, which is what the brands' own views
-       * do — the shopper solved the challenge, so asking them to press the
-       * button a second time 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: these decide whether next-auth answers at all.
-          ...payload,
-          redirect: false,
-          callbackUrl
-        });
-
-      let response = await attempt();
-      let reading = splitByKnownFields(
-        readAuthError(signInErrorDetail(response), { captcha: captchaLabel }),
-        form
-      );
-
-      if (reading.hasCaptchaChallenge && showCaptcha) {
-        // `validate` reveals the widget and resolves false the first time;
-        // once the shopper has solved it the hook validates the answer and
-        // resolves true, and only then is there any point in retrying.
-        const solved = await captchaRef.current?.validate();
-
-        if (solved) {
-          // `true`, not the ref: what `validate` just resolved IS the answer, and
-          // the ref only catches up on the host's next render — which may not
-          // have happened by the time this retry goes out.
-          response = await attempt(true);
-          reading = splitByKnownFields(
-            readAuthError(signInErrorDetail(response), {
-              captcha: captchaLabel
-            }),
-            form
-          );
-        }
-      }
+      const response = await signIn(providerId, {
+        // After the payload: these decide whether next-auth answers at all.
+        ...payload,
+        redirect: false,
+        callbackUrl
+      });
 
       if (!response || response.error) {
         const errorDetail = signInErrorDetail(response);
@@ -551,18 +368,7 @@ const AuthFormBlock = ({
           });
         }
 
-        // Field-level refusals ("no account with this e-mail") go under the
-        // field, the way client-side validation already does; only what
-        // belongs to the form as a whole stays above it.
-        //
-        // `reading` is the same refusal `main` read with `readAuthError`, only
-        // already split by field — `splitByKnownFields` wraps that very call
-        // above, and `authFormMessage` keeps `errorLabel` as its fallback. So
-        // the message a shopper sees is unchanged for a form-level refusal and
-        // moves under the field for one that names a field.
-        setFieldErrors((current) => ({ ...current, ...reading.fieldMessages }));
-        focusFirstAuthFieldError(form, reading.fieldMessages);
-        setError(authFormMessage(reading, errorLabel));
+        setError(readAuthError(errorDetail) || errorLabel);
 
         return;
       }
@@ -576,38 +382,9 @@ const AuthFormBlock = ({
         emitCommerceEvent('login', { method: providerId });
       }
 
-      /**
-       * 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();
-
-      // Our own resolved path rather than next-auth's echo of it: the response
-      // url is whatever we handed in, and this one has been through the
-      // same-origin check. `null` is `stay` — there is nowhere to go.
-      if (destination) router.push(destination);
+      router.push(callbackUrl);
     } catch {
       setError(errorLabel);
     } finally {
@@ -740,33 +517,9 @@ const AuthFormBlock = ({
    * 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 sign-in has no success SCREEN — it is in, and the page moves on — so the
-   * screen here is always the form itself; what a composition can scope to is
-   * the submission running and the refusal, which is what a "signing you in…"
-   * panel and a designed error box need.
-   */
-  const formStateValue: AuthFormStateValue = {
-    screen: 'form',
-    busy: isSubmitting,
-    hasError: Boolean(error)
-  };
-
   const renderChildren = () =>
     renderComposedChildren({
-      // A child that is not a state container is shared chrome and always
-      // shows; see `auth/form-state-context.tsx`.
-      blocks: childBlocks.filter((childBlock) =>
-        showsInFormState({
-          block: childBlock,
-          state: formStateValue,
-          isDesigner,
-          selectedBlockId,
-          currentBreakpoint
-        })
-      ),
+      blocks: childBlocks,
       placeholderId,
       sectionId,
       isDesigner,
@@ -774,25 +527,6 @@ const AuthFormBlock = ({
       currentBreakpoint
     });
 
-  /**
-   * Told, rather than shown a form they cannot use. The `redirect` policy has
-   * this too, for the beat before the navigation lands — and for a shopper
-   * whose browser refuses it.
-   */
-  if (isSignedIn && whenSignedIn !== 'form') {
-    return (
-      <div
-        data-auth-form=""
-        className="w-full"
-        data-auth-form-state="signed-in"
-        {...partAttrs('signed-in')}
-        role="status"
-      >
-        {signedInLabel}
-      </div>
-    );
-  }
-
   if (isComposed) {
     /**
      * The composed form: children carry the fields (native inputs named by
@@ -801,14 +535,9 @@ const AuthFormBlock = ({
      * the designer wires their own CTA.
      */
     const errorIsAuthored = containsAuthErrorBlock(childBlocks);
-    // The form draws the widget only when the composition did not place a
-    // Captcha block — same relationship the built-in error line has with a
-    // Form Error block.
-    const captchaIsAuthored = containsCaptchaBlock(childBlocks);
 
     return (
       <AuthFormErrorProvider value={error}>
-        <AuthFormStateProvider value={formStateValue}>
         <AuthFieldErrorsProvider value={fieldErrors}>
           <form
             id={formHtmlId || undefined}
@@ -830,13 +559,7 @@ const AuthFormBlock = ({
               gap: 'var(--auth-form-gap, 12px)'
             }}
           >
-            {withCaptcha(
-              <>
-                {renderChildren()}
-
-                {!captchaIsAuthored && <AuthCaptchaSlot />}
-              </>
-            )}
+            {renderChildren()}
 
             {forgotPasswordControl}
 
@@ -872,7 +595,6 @@ const AuthFormBlock = ({
             )}
           </form>
         </AuthFieldErrorsProvider>
-        </AuthFormStateProvider>
       </AuthFormErrorProvider>
     );
   }
@@ -933,11 +655,6 @@ const AuthFormBlock = ({
 
       {forgotPasswordControl}
 
-      {/* A childless form has nowhere for a Captcha block to be, so it draws
-          the challenge itself — above its own submit, where the brands' own
-          views put it. */}
-      {withCaptcha(<AuthCaptchaSlot />)}
-
       {error && (
         <div data-auth-form-error="" {...partAttrs('error')} role="alert">
           {error}

package/src/blocks/block-renderer-registry.tsx

@@ -79,14 +79,10 @@ import AuthFlowBlock from './auth-flow-block';
 import AuthStepBlock from './auth-step-block';
 import AuthStepTitleBlock from './auth-step-title-block';
 import AuthErrorBlock from './auth-error-block';
-import AuthSuccessBlock from './auth-success-block';
-import FormStateBlock from './form-state-block';
 import AuthConsentBlock from './auth-consent-block';
 import AuthFieldBlock from './auth-field-block';
 import OtpPhaseBlock from './otp-phase-block';
 import OtpCodeInputBlock from './otp-code-input-block';
-import CaptchaBlock from './captcha-block';
-import ResetPasswordBlock from './reset-password-block';
 import StoreLocatorBlock from './store-locator-block';
 import FaqAccordionBlock from './faq-accordion-block';
 import ShareBlock from './share-block';
@@ -228,14 +224,10 @@ blockRendererRegistry.register('auth-flow', AuthFlowBlock);
 blockRendererRegistry.register('auth-step', AuthStepBlock);
 blockRendererRegistry.register('auth-step-title', AuthStepTitleBlock);
 blockRendererRegistry.register('auth-error', AuthErrorBlock);
-blockRendererRegistry.register('auth-success', AuthSuccessBlock);
-blockRendererRegistry.register('form-state', FormStateBlock);
 blockRendererRegistry.register('auth-consent', AuthConsentBlock);
 blockRendererRegistry.register('auth-field', AuthFieldBlock);
 blockRendererRegistry.register('otp-phase', OtpPhaseBlock);
 blockRendererRegistry.register('otp-code-input', OtpCodeInputBlock);
-blockRendererRegistry.register('captcha', CaptchaBlock);
-blockRendererRegistry.register('reset-password', ResetPasswordBlock);
 blockRendererRegistry.register('store-locator', StoreLocatorBlock);
 blockRendererRegistry.register('faq-accordion', FaqAccordionBlock);
 blockRendererRegistry.register('share', ShareBlock);

package/src/blocks/button-block.tsx

@@ -87,29 +87,8 @@ const ButtonBlock = ({
     return 'Click Me';
   };
 
-  const submitFormId = String(
-    getResponsiveValue(block.properties?.submitFormId, currentBreakpoint, '')
-  ).trim();
-  /**
-   * A detached CTA is a real submit button and has to behave like one while the
-   * form it drives is working: staying bright and clickable through a request
-   * is what makes a shopper press it twice. An empty id costs no subscription,
-   * so this is safe to read unconditionally — as a hook must be.
-   */
-  const isSubmittedFormBusy = useFormSubmitState(submitFormId);
-
   const textValue = block.properties?.text || block.value;
-  /**
-   * What the caption says while the form this button drives is working.
-   *
-   * Empty keeps the caption put, which is what every published button does —
-   * the same absence-preserving default the forms' own `busyLabel` carries.
-   */
-  const busyTextValue = block.properties?.busyText;
-  const text =
-    isSubmittedFormBusy && busyTextValue
-      ? getLocalizedText(busyTextValue)
-      : getLocalizedText(textValue);
+  const text = getLocalizedText(textValue);
 
   const url = block.properties?.url
     ? String(getResponsiveValue(block.properties.url, currentBreakpoint, '#'))
@@ -154,6 +133,16 @@ const ButtonBlock = ({
    * live in a pinned bottom bar while the fields stay in the flow above.
    * Forces the <button> branch: an anchor cannot submit anything.
    */
+  const submitFormId = String(
+    getResponsiveValue(block.properties?.submitFormId, currentBreakpoint, '')
+  ).trim();
+  /**
+   * A detached CTA is a real submit button and has to behave like one while the
+   * form it drives is working: staying bright and clickable through a request
+   * is what makes a shopper press it twice. An empty id costs no subscription,
+   * so this is safe to read unconditionally — as a hook must be.
+   */
+  const isSubmittedFormBusy = useFormSubmitState(submitFormId);
 
   const iconUrl = block.properties?.icon
     ? String(getResponsiveValue(block.properties.icon, currentBreakpoint, ''))
@@ -671,27 +660,8 @@ const ButtonBlock = ({
           // root styles HERE instead of onto the designer wrapper, so padding
           // and border land once, on the element the shopper actually clicks —
           // not once on the wrapper and again inline (which doubled them).
-          //
-          // The states travel with it: `disabled` alone changed nothing a
-          // shopper could see, because an authored background and colour
-          // override what a browser paints on a disabled button — so a
-          // detached CTA stayed bright and clickable-looking through the whole
-          // request, which is exactly what makes someone press it twice.
-          {...partAttrs('root', {
-            loading: isSubmittedFormBusy,
-            disabled: isSubmittedFormBusy
-          })}
-          style={
-            isSubmittedFormBusy
-              ? {
-                  ...finalStyles,
-                  // A default a designer does not have to author, and the same
-                  // one the forms' own submit buttons use.
-                  opacity: 0.7,
-                  cursor: 'not-allowed'
-                }
-              : finalStyles
-          }
+          {...partAttrs('root')}
+          style={finalStyles}
           onClick={handleClick}
           {...action.ariaProps}
         >

package/src/blocks/change-password-form-block.tsx

@@ -3,7 +3,6 @@
 import React, { useState } from 'react';
 import { useUpdatePasswordMutation } 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 { readToggle } from './product-block-utils';
 
@@ -64,19 +63,6 @@ const ChangePasswordFormBlock = ({
       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 submitLabel = text('submitLabel', 'Change password');
   const submitAlign = text('submitAlign', 'stretch');
   const currentPasswordLabel = text('currentPasswordLabel', 'Current password');
@@ -139,7 +125,6 @@ const ChangePasswordFormBlock = ({
       await updatePassword(values).unwrap();
       setValues(EMPTY_FORM);
       setIsDone(true);
-      closeHostModal();
     } catch (requestError) {
       setError(readPasswordError(requestError, errorMessage));
     }