From ec10f673ea220b2635b690ee342e0c3f32cfaf5c Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Wed, 18 Oct 2023 11:50:13 +0300
Subject: [PATCH] chore(clerk-js): Remove custom Alert from invitation page and
 display error as global (#1903)

* chore(clerk-js): Remove custom Alert from invitation page and display error as global

* chore(clerk-js): Remove custom Alert from invitation page and display error as global (pr comments)
---
 .changeset/shiny-experts-notice.md            |   5 +
 .../OrganizationProfile/InviteMembersForm.tsx | 139 ++++++++----------
 .../ui/elements/contexts/CardStateContext.tsx |   2 +-
 3 files changed, 68 insertions(+), 78 deletions(-)
 create mode 100644 .changeset/shiny-experts-notice.md

diff --git a/.changeset/shiny-experts-notice.md b/.changeset/shiny-experts-notice.md
new file mode 100644
index 0000000000..ef853ed6fc
--- /dev/null
+++ b/.changeset/shiny-experts-notice.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Remove custom Alert from invitation page and display it as a global error instead (at the top of the component).
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
index ce58e431cd..1cabd921aa 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 
 import { Flex, Text } from '../../customizables';
 import {
-  Alert,
   Form,
   FormButtonContainer,
   Select,
@@ -34,7 +33,6 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
   const card = useCardState();
   const { t, locale } = useLocalizations();
   const [isValidUnsubmittedEmail, setIsValidUnsubmittedEmail] = React.useState(false);
-  const [localizedEmails, setLocalizedEmails] = React.useState<string | null>(null);
 
   if (!organization) {
     return null;
@@ -45,7 +43,6 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
   const roles: Array<{ label: string; value: MembershipRole }> = [
     { label: t(roleLocalizationKey('admin')), value: 'admin' },
     { label: t(roleLocalizationKey('basic_member')), value: 'basic_member' },
-    // { label: t(roleLocalizationKey('guest_member')), value: 'guest_member' },
   ];
 
   const emailAddressField = useFormControl('emailAddress', '', {
@@ -75,9 +72,7 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
 
   const roleField = useFormControl('role', 'basic_member', {
     options: roles,
-    // label: localizationKeys('formFieldLabel__firstName'),
-    // placeholder: localizationKeys('formFieldInputPlaceholder__firstName'),
-    label: 'Role',
+    label: localizationKeys('formFieldLabel__role'),
     placeholder: '',
   });
 
@@ -95,12 +90,15 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
 
         if (isClerkAPIResponseError(err) && err.errors?.[0]?.code === 'duplicate_record') {
           const unlocalizedEmailsList = err.errors[0].meta?.emailAddresses || [];
-
-          // Create a localized list of email addresses
-          const localizedList = createListFormat(unlocalizedEmailsList, locale);
-          setLocalizedEmails(localizedList);
+          card.setError(
+            t(
+              localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {
+                // Create a localized list of email addresses
+                email_addresses: createListFormat(unlocalizedEmailsList, locale),
+              }),
+            ),
+          );
         } else {
-          setLocalizedEmails(null);
           handleError(err, [], card.setError);
         }
       });
@@ -113,74 +111,61 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
   };
 
   return (
-    <>
-      {localizedEmails && (
-        <Alert
-          variant='danger'
-          align='start'
-          title={localizationKeys('organizationProfile.invitePage.detailsTitle__inviteFailed', {
-            email_addresses: localizedEmails,
-          })}
-          sx={{ border: 0 }}
-        />
-      )}
+    <Form.Root onSubmit={onSubmit}>
+      <Form.ControlRow elementId={emailAddressField.id}>
+        <Flex
+          direction='col'
+          gap={2}
+          sx={{ width: '100%' }}
+        >
+          <Text localizationKey={localizationKeys('formFieldLabel__emailAddresses')} />
+
+          <Text
+            localizationKey={localizationKeys('formFieldInputPlaceholder__emailAddresses')}
+            colorScheme='neutral'
+            sx={t => ({ fontSize: t.fontSizes.$xs })}
+          />
 
-      <Form.Root onSubmit={onSubmit}>
-        <Form.ControlRow elementId={emailAddressField.id}>
-          <Flex
-            direction='col'
-            gap={2}
+          <TagInput
+            {...restEmailAddressProps}
+            autoFocus
+            validate={isEmail}
             sx={{ width: '100%' }}
-          >
-            <Text localizationKey={localizationKeys('formFieldLabel__emailAddresses')} />
-
-            <Text
-              localizationKey={localizationKeys('formFieldInputPlaceholder__emailAddresses')}
-              colorScheme='neutral'
-              sx={t => ({ fontSize: t.fontSizes.$xs })}
-            />
-
-            <TagInput
-              {...restEmailAddressProps}
-              autoFocus
-              validate={isEmail}
-              sx={{ width: '100%' }}
-              validateUnsubmittedEmail={validateUnsubmittedEmail}
-            />
-          </Flex>
-        </Form.ControlRow>
-        <Form.ControlRow elementId={roleField.id}>
-          <Flex
-            direction='col'
-            gap={2}
-          >
-            <Text localizationKey={localizationKeys('formFieldLabel__role')} />
-            {/*// @ts-expect-error */}
-            <Select
-              elementId='role'
-              {...roleField.props}
-              onChange={option => roleField.setValue(option.value)}
-            >
-              <SelectButton sx={t => ({ width: t.sizes.$48, justifyContent: 'space-between', display: 'flex' })}>
-                {roleField.props.options?.find(o => o.value === roleField.value)?.label}
-              </SelectButton>
-              <SelectOptionList sx={t => ({ minWidth: t.sizes.$48 })} />
-            </Select>
-          </Flex>
-        </Form.ControlRow>
-        <FormButtonContainer>
-          <Form.SubmitButton
-            block={false}
-            isDisabled={!canSubmit}
-            localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}
+            validateUnsubmittedEmail={validateUnsubmittedEmail}
           />
-          <Form.ResetButton
-            localizationKey={resetButtonLabel || localizationKeys('userProfile.formButtonReset')}
-            block={false}
-            onClick={onReset}
-          />
-        </FormButtonContainer>
-      </Form.Root>
-    </>
+        </Flex>
+      </Form.ControlRow>
+      <Form.ControlRow elementId={roleField.id}>
+        <Flex
+          direction='col'
+          gap={2}
+        >
+          <Text localizationKey={roleField.label} />
+          {/*@ts-expect-error  Select expects options to be an array but useFormControl returns an optional field. */}
+          <Select
+            elementId='role'
+            {...roleField.props}
+            onChange={option => roleField.setValue(option.value)}
+          >
+            <SelectButton sx={t => ({ width: t.sizes.$48, justifyContent: 'space-between', display: 'flex' })}>
+              {roleField.props.options?.find(o => o.value === roleField.value)?.label}
+            </SelectButton>
+            <SelectOptionList sx={t => ({ minWidth: t.sizes.$48 })} />
+          </Select>
+        </Flex>
+      </Form.ControlRow>
+      <FormButtonContainer>
+        <Form.SubmitButton
+          block={false}
+          isDisabled={!canSubmit}
+          localizationKey={localizationKeys('organizationProfile.invitePage.formButtonPrimary__continue')}
+        />
+        <Form.ResetButton
+          localizationKey={resetButtonLabel || localizationKeys('userProfile.formButtonReset')}
+          block={false}
+          onClick={onReset}
+        />
+      </FormButtonContainer>
+    </Form.Root>
   );
 };
diff --git a/packages/clerk-js/src/ui/elements/contexts/CardStateContext.tsx b/packages/clerk-js/src/ui/elements/contexts/CardStateContext.tsx
index 9ce1b59e51..2381e51b61 100644
--- a/packages/clerk-js/src/ui/elements/contexts/CardStateContext.tsx
+++ b/packages/clerk-js/src/ui/elements/contexts/CardStateContext.tsx
@@ -31,7 +31,7 @@ const useCardState = () => {
   const { translateError } = useLocalizations();
 
   const setIdle = (metadata?: Metadata) => setState(s => ({ ...s, status: 'idle', metadata }));
-  const setError = (metadata: ClerkRuntimeError | ClerkAPIError | Metadata) =>
+  const setError = (metadata: ClerkRuntimeError | ClerkAPIError | Metadata | string) =>
     setState(s => ({ ...s, error: translateError(metadata) }));
   const setLoading = (metadata?: Metadata) => setState(s => ({ ...s, status: 'loading', metadata }));
   const runAsync = async <T = unknown,>(cb: Promise<T> | (() => Promise<T>), metadata?: Metadata) => {