From d7c6806ad48615f56dda0fa25e7b9c87f2022d14 Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Tue, 24 Jun 2025 21:04:03 +0530
Subject: [PATCH] fix confirmation modal on subdomain settings (#12845)

before -


https://github.com/user-attachments/assets/ff063912-0c1e-41e4-b01d-15081ecb04a1

after -



https://github.com/user-attachments/assets/0ee6022d-f0a8-4243-a108-c4295d0fb560
---
 .../settings/workspace/SettingsDomain.tsx     | 85 ++++++++++---------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx b/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
index 8424e09e0..20565e006 100644
--- a/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
+++ b/packages/twenty-front/src/pages/settings/workspace/SettingsDomain.tsx
@@ -68,7 +68,7 @@ export const SettingsDomain = () => {
     currentWorkspaceState,
   );
 
-  const { openModal } = useModal();
+  const { openModal, closeModal } = useModal();
 
   const form = useForm<{
     subdomain: string;
@@ -141,6 +141,7 @@ export const SettingsDomain = () => {
           error instanceof ApolloError &&
           error.graphQLErrors[0]?.extensions?.code === 'CONFLICT'
         ) {
+          closeModal(SUBDOMAIN_CHANGE_CONFIRMATION_MODAL_ID);
           return form.control.setError('subdomain', {
             type: 'manual',
             message: t`Subdomain already taken`,
@@ -203,45 +204,47 @@ export const SettingsDomain = () => {
   };
 
   return (
-    <form onSubmit={form.handleSubmit(handleSave)}>
-      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <FormProvider {...form}>
-        <SubMenuTopBarContainer
-          title={t`Domain`}
-          links={[
-            {
-              children: <Trans>Workspace</Trans>,
-              href: getSettingsPath(SettingsPath.Workspace),
-            },
-            {
-              children: <Trans>General</Trans>,
-              href: getSettingsPath(SettingsPath.Workspace),
-            },
-            { children: <Trans>Domain</Trans> },
-          ]}
-          actionButton={
-            <SaveAndCancelButtons
-              onCancel={() => navigate(SettingsPath.Workspace)}
-              isSaveDisabled={form.formState.isSubmitting}
-            />
-          }
-        >
-          <SettingsPageContainer>
-            <SettingsSubdomain />
-            <SettingsCustomDomain />
-          </SettingsPageContainer>
-        </SubMenuTopBarContainer>
-        <ConfirmationModal
-          modalId={SUBDOMAIN_CHANGE_CONFIRMATION_MODAL_ID}
-          title={t`Change subdomain?`}
-          subtitle={t`You're about to change your workspace subdomain. This action will log out all users.`}
-          onConfirmClick={() => {
-            const values = form.getValues();
-            currentWorkspace &&
-              updateSubdomain(values.subdomain, currentWorkspace);
-          }}
-        />
-      </FormProvider>
-    </form>
+    <>
+      <form onSubmit={form.handleSubmit(handleSave)}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <FormProvider {...form}>
+          <SubMenuTopBarContainer
+            title={t`Domain`}
+            links={[
+              {
+                children: <Trans>Workspace</Trans>,
+                href: getSettingsPath(SettingsPath.Workspace),
+              },
+              {
+                children: <Trans>General</Trans>,
+                href: getSettingsPath(SettingsPath.Workspace),
+              },
+              { children: <Trans>Domain</Trans> },
+            ]}
+            actionButton={
+              <SaveAndCancelButtons
+                onCancel={() => navigate(SettingsPath.Workspace)}
+                isSaveDisabled={form.formState.isSubmitting}
+              />
+            }
+          >
+            <SettingsPageContainer>
+              <SettingsSubdomain />
+              <SettingsCustomDomain />
+            </SettingsPageContainer>
+          </SubMenuTopBarContainer>
+        </FormProvider>
+      </form>
+      <ConfirmationModal
+        modalId={SUBDOMAIN_CHANGE_CONFIRMATION_MODAL_ID}
+        title={t`Change subdomain?`}
+        subtitle={t`You're about to change your workspace subdomain. This action will log out all users.`}
+        onConfirmClick={() => {
+          const values = form.getValues();
+          currentWorkspace &&
+            updateSubdomain(values.subdomain, currentWorkspace);
+        }}
+      />
+    </>
   );
 };