fix(ui): Render EmailOrPhoneNumberField when both phone and email a…

…re optional (#3799)
clerk · Jul 24, 2024 · 872f615 · 872f615
1 parent d61d31d
commit 872f615
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/.changeset/swift-spoons-double.md b/.changeset/swift-spoons-double.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx
@@ -4,6 +4,7 @@ import * as SignUp from '@clerk/elements/sign-up';
 
 import { Connections } from '~/common/connections';
 import { EmailField } from '~/common/email-field';
+import { EmailOrPhoneNumberField } from '~/common/email-or-phone-number-field';
 import { FirstNameField } from '~/common/first-name-field';
 import { LastNameField } from '~/common/last-name-field';
 import { OTPField } from '~/common/otp-field';
@@ -43,7 +44,7 @@ function SignUpComponentLoaded() {
   const { enabled: lastNameEnabled, required: lastNameRequired } = useAttributes('last_name');
   const { enabled: usernameEnabled, required: usernameRequired } = useAttributes('username');
   const { enabled: phoneNumberEnabled, required: phoneNumberRequired } = useAttributes('phone_number');
-  const { enabled: emailAddressEnabled } = useAttributes('email_address');
+  const { enabled: emailAddressEnabled, required: emailAddressRequired } = useAttributes('email_address');
   const { enabled: passwordEnabled, required: passwordRequired } = useAttributes('password');
   const { applicationName, branded, homeUrl, logoImageUrl } = useDisplayConfig();
 
@@ -113,18 +114,24 @@ function SignUpComponentLoaded() {
                           />
                         ) : null}
 
-                        <EmailField disabled={isGlobalLoading} />
+                        {emailAddressEnabled && !emailAddressRequired && phoneNumberEnabled && !phoneNumberRequired ? (
+                          <EmailOrPhoneNumberField locationBasedCountryIso={locationBasedCountryIso} />
+                        ) : (
+                          <>
+                            <EmailField disabled={isGlobalLoading} />
 
-                        {phoneNumberEnabled ? (
-                          <PhoneNumberField
-                            label={t('formFieldLabel__phoneNumber')}
-                            hintText={t('formFieldHintText__optional')}
-                            required={phoneNumberRequired}
-                            disabled={isGlobalLoading}
-                            initPhoneWithCode={clerk.client.signUp.phoneNumber || ''}
-                            locationBasedCountryIso={locationBasedCountryIso}
-                          />
-                        ) : null}
+                            {phoneNumberEnabled ? (
+                              <PhoneNumberField
+                                label={t('formFieldLabel__phoneNumber')}
+                                hintText={t('formFieldHintText__optional')}
+                                required={phoneNumberRequired}
+                                disabled={isGlobalLoading}
+                                initPhoneWithCode={clerk.client.signUp.phoneNumber || ''}
+                                locationBasedCountryIso={locationBasedCountryIso}
+                              />
+                            ) : null}
+                          </>
+                        )}
 
                         {passwordEnabled && passwordRequired ? (
                           <PasswordField