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

package/src/blocks/forgot-password-block.tsx

@@ -8,28 +8,12 @@ import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
   clearAuthFieldError,
-  collectAuthFieldErrors,
-  focusFirstAuthFieldError
+  collectAuthFieldErrors
 } from '../auth/auth-field-errors';
-import {
-  authFormMessage,
-  readCommerceError,
-  splitByKnownFields
-} from '../auth/read-auth-error';
 import {
   AuthFormErrorProvider,
   containsAuthErrorBlock
 } from '../auth/form-error-context';
-import {
-  AuthFormSuccessProvider,
-  containsAuthSuccessBlock
-} from '../auth/form-success-context';
-import {
-  AuthFormStateProvider,
-  AuthFormStateValue,
-  containsFormStateBlock,
-  showsInFormState
-} from '../auth/form-state-context';
 import {
   clearFormSubmitState,
   publishFormSubmitState
@@ -40,17 +24,8 @@ import {
   setAuthStep
 } from '../auth/auth-flow-bus';
 import { renderComposedChildren } from './render-composed-children';
-import { useHostModalCloser } from '../overlays/modal-host-context';
 import { BlockRendererProps } from './block-renderer-registry';
 
-/**
- * The only name this form submits under, and therefore the only one a
- * field-level refusal can be hung on. Named as well as measured, because a
- * composition whose CTA is a detached Button still has to attribute
- * "no account with this address" to the address field.
- */
-const FORGOT_PASSWORD_FIELD_NAMES = ['email'] as const;
-
 /**
  * Functional auth block: e-mail input that triggers the password reset mail
  * through the v1 `forgotPassword` mutation. Behaviour is fixed (commerce sends
@@ -83,19 +58,6 @@ const ForgotPasswordBlock = ({
       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 = prop('submitLabel', 'Send reset link');
   // Empty on purpose: without a busy label the submit caption stays put while
   // the request runs, which is what published blocks render today.
@@ -181,21 +143,6 @@ const ForgotPasswordBlock = ({
     .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
     .sort((a, b) => (a.order || 0) - (b.order || 0));
   const isComposed = childBlocks.length > 0;
-  /**
-   * Whether the composition draws the confirmation itself — either with a Form
-   * Success block carrying this form's sentence, or with a whole screen scoped
-   * to the success state in a Form State container.
-   *
-   * Two things follow: the built-in success copy stands down, and the form is
-   * NOT replaced by it — a block inside a form that has been swapped out is
-   * unmounted and would draw nothing at all, which is the whole reason the
-   * confirmation was unmanageable in the first place.
-   */
-  const successScreenIsComposed =
-    isComposed && containsFormStateBlock(childBlocks, 'success', currentBreakpoint);
-  const successIsAuthored =
-    successScreenIsComposed ||
-    (isComposed && containsAuthSuccessBlock(childBlocks));
 
   const [email, setEmail] = useState('');
   const [error, setError] = useState('');
@@ -238,14 +185,10 @@ const ForgotPasswordBlock = ({
     // Submitting inside the designer would send a real reset mail.
     if (isDesigner || isLoading) return;
 
-    // Held onto because `currentTarget` is only the form for as long as the
-    // handler runs, and the refusal is read after an await.
-    const formElement = event.currentTarget;
-
     // The form carries `noValidate`, so this is what stops an empty submit —
     // and it says so under the field rather than in a browser bubble.
     const { errors: nextFieldErrors, firstInvalid } = collectAuthFieldErrors(
-      formElement,
+      event.currentTarget,
       { required: requiredMessage, invalid: invalidMessage }
     );
 
@@ -261,7 +204,7 @@ const ForgotPasswordBlock = ({
     // form the way every other composed auth form reads its fields, rather
     // than from state no child writes to.
     const address = isComposed
-      ? String(new FormData(formElement).get('email') ?? '').trim()
+      ? String(new FormData(event.currentTarget).get('email') ?? '').trim()
       : email;
 
     try {
@@ -273,28 +216,8 @@ const ForgotPasswordBlock = ({
       if (successStep) {
         setAuthStep(successStep.flowId, successStep.stepKey);
       }
-
-      // Contradictory on purpose-tolerant: a composition that names a success
-      // STEP and also asks to close gets the close, because a step inside a
-      // closed drawer is moot. Off by default — "check your inbox" is the
-      // point of this form's success state.
-      closeHostModal();
-    } catch (rejection) {
-      /**
-       * What commerce actually said, rather than "could not send" over a rate
-       * limit the shopper cannot see. RTK Query puts the body on `data`; a
-       * message naming the address goes under the field, which is where the
-       * shopper is looking, and anything form-level stays above it.
-       */
-      const reading = splitByKnownFields(
-        readCommerceError((rejection as { data?: unknown })?.data),
-        formElement,
-        FORGOT_PASSWORD_FIELD_NAMES
-      );
-
-      setFieldErrors((current) => ({ ...current, ...reading.fieldMessages }));
-      focusFirstAuthFieldError(formElement, reading.fieldMessages);
-      setError(authFormMessage(reading, errorLabel));
+    } catch {
+      setError(errorLabel);
     }
   };
 
@@ -326,26 +249,9 @@ const ForgotPasswordBlock = ({
     </button>
   ) : null;
 
-  /** Finished — for real on a storefront, on the toggle in the canvas. */
-  const inSuccessState =
-    (isSuccess && !isDesigner) || (isDesigner && previewSuccess);
-
-  /**
-   * What the composition's Form State containers read. `busy` and `hasError`
-   * sit beside the screen rather than replacing it, so a refusal does not take
-   * the fields away with it — see `auth/form-state-context.tsx`.
-   */
-  const formStateValue: AuthFormStateValue = {
-    screen: inSuccessState ? 'success' : 'form',
-    busy: isLoading,
-    hasError: Boolean(error)
-  };
-
   // The success copy replaces the form so the shopper is not invited to submit
   // the same address twice; the root attribute is kept so styling still applies.
-  // A composition that placed a Form Success block keeps its own layout
-  // instead — see `successIsAuthored`.
-  if (inSuccessState && !successIsAuthored) {
+  if ((isSuccess && !isDesigner) || (isDesigner && previewSuccess)) {
     return (
       <div
         data-forgot-password=""
@@ -373,10 +279,6 @@ const ForgotPasswordBlock = ({
 
     return (
       <AuthFormErrorProvider value={error}>
-        {/* The confirmation, for the block the composition placed for it. Empty
-            until the mail is away, so the block draws nothing before then. */}
-        <AuthFormSuccessProvider value={inSuccessState ? successLabel : ''}>
-        <AuthFormStateProvider value={formStateValue}>
         <AuthFieldErrorsProvider value={fieldErrors}>
           <form
             id={formHtmlId || undefined}
@@ -384,9 +286,7 @@ const ForgotPasswordBlock = ({
             data-forgot-password-composed=""
             // Fills its block wrapper; see the note in auth-step-block.tsx.
             className="w-full"
-            data-forgot-password-state={
-              inSuccessState ? 'success' : isLoading ? 'busy' : 'idle'
-            }
+            data-forgot-password-state={isLoading ? 'busy' : 'idle'}
             {...partAttrs('form')}
             onSubmit={submit}
             // Our own message under the field instead of the browser's bubble
@@ -401,17 +301,7 @@ const ForgotPasswordBlock = ({
             }}
           >
             {renderComposedChildren({
-              // Only the containers this screen calls for; everything that is
-              // not a container is shared chrome and shows on all of them.
-              blocks: childBlocks.filter((childBlock) =>
-                showsInFormState({
-                  block: childBlock,
-                  state: formStateValue,
-                  isDesigner,
-                  selectedBlockId,
-                  currentBreakpoint
-                })
-              ),
+              blocks: childBlocks,
               placeholderId,
               sectionId,
               isDesigner,
@@ -432,14 +322,7 @@ const ForgotPasswordBlock = ({
               </div>
             )}
 
-            {/* Kept in the success state where the confirmation is only a
-                LINE — the address is still valid and the fields are still on
-                screen, so pressing it again is a RESEND, the affordance a
-                "check your inbox" screen normally wants. Dropped where a Form
-                State container owns the success screen: the fields are then
-                scoped away with it and this would be an orphan button under a
-                composition that never asked for it. */}
-            {showSubmit && !(inSuccessState && successScreenIsComposed) && (
+            {showSubmit && (
               <button
                 type="submit"
                 data-forgot-password-submit=""
@@ -461,14 +344,8 @@ const ForgotPasswordBlock = ({
                 {isLoading && busyLabel ? busyLabel : submitLabel}
               </button>
             )}
-
-            {/* The authored way back. Not when a container owns the screen:
-                the way onward is then part of the composition. */}
-            {inSuccessState && !successScreenIsComposed && backControl}
           </form>
         </AuthFieldErrorsProvider>
-        </AuthFormStateProvider>
-        </AuthFormSuccessProvider>
       </AuthFormErrorProvider>
     );
   }

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

@@ -3,8 +3,6 @@
 import React, { useState } from 'react';
 import { useEmailSubscriptionMutation } from '@akinon/next/data/client/misc';
 import { getResponsiveValue, partAttrs } from '../utils';
-import { useHostModalCloser } from '../overlays/modal-host-context';
-import { readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
 /** The wording the block has always shipped with; every label is editable. */
@@ -39,22 +37,9 @@ const NewsletterFormBlock = ({
       currentBreakpoint,
       fallback
     );
-
     return value === undefined || value === null ? fallback : String(value);
   };
 
-  /**
-   * 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 placeholder = prop('placeholder', 'Your email address');
   const inputLabel = prop('inputLabel', '');
   const submitLabel = prop('submitLabel', 'Subscribe');
@@ -86,7 +71,6 @@ const NewsletterFormBlock = ({
       // form itself is the consent, so it is always sent as true.
       await subscribe({ email: value, subscribe_contract: true }).unwrap();
       setStatus('success');
-      closeHostModal();
       setEmail('');
     } catch {
       setErrorKind('request');

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

@@ -1,17 +1,13 @@
 'use client';
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } 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,
@@ -29,36 +25,51 @@ 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 {
-  authFormMessage,
-  readAuthError,
-  splitByKnownFields
-} from '../auth/read-auth-error';
-import {
-  AUTH_AFTER_SIGN_IN_MODES,
-  AuthAfterSignIn,
-  resolveAuthDestination
-} from '../auth/auth-destination';
+import { BlockRendererProps } from './block-renderer-registry';
 
 /**
- * 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.
+ * 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.
  */
-const OTP_FIELD_NAMES = ['code', 'phone'] as const;
-import { BlockRendererProps } from './block-renderer-registry';
+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);
+  }
+};
 
 /**
  * Where the serialised AuthError[] actually lives depends on the next-auth
@@ -71,6 +82,28 @@ 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
@@ -141,25 +174,6 @@ 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,
@@ -217,24 +231,7 @@ 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.
@@ -251,17 +248,13 @@ const OtpFormBlock = ({
     'codeIncompleteMessage',
     'Enter the {length}-digit code we sent you.'
   );
-  /**
-   * 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.
-   */
+  // 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.
   const closeModalsOnSuccess = readToggle(
     block.properties?.closeModalsOnSuccess,
     currentBreakpoint,
-    false
+    true
   );
   // The code phase is unreachable in the canvas without sending a real SMS,
   // so the designer picks the phase to dress — the previewSuccess pattern.
@@ -273,17 +266,6 @@ 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);
   /**
@@ -524,48 +506,14 @@ const OtpFormBlock = ({
       });
 
       if (!response || response.error) {
-        // 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));
-
+        setError(readAuthError(signInErrorDetail(response)) || 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();
-      // 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);
+      router.push(response.url || callbackUrl);
     } catch {
       setError(errorLabel);
     } finally {
@@ -602,24 +550,8 @@ const OtpFormBlock = ({
         // never sent. (Same shape `submitCode` reads.)
         const detail = signInErrorDetail(response);
 
-        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
-          );
-
+        if (response?.error && !hasOtpChallenge(detail)) {
+          setError(readAuthError(detail) || sendErrorLabel);
           return;
         }
 
@@ -740,17 +672,6 @@ 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.
    *
@@ -761,19 +682,6 @@ 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 (
@@ -865,7 +773,6 @@ 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}
@@ -895,7 +802,6 @@ const OtpFormBlock = ({
               {!errorIsAuthored && errorNode}
             </form>
           </AuthFieldErrorsProvider>
-          </AuthFormStateProvider>
         </AuthFormErrorProvider>
       </OtpFormProvider>
     );

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

@@ -7,7 +7,6 @@ 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';
 
@@ -64,17 +63,6 @@ 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');
@@ -177,7 +165,6 @@ const ProfileFormBlock = ({
       }).unwrap();
 
       setStatus('saved');
-      closeHostModal();
     } catch {
       setStatus('error');
     }