feat(ui): Render email or phone number during verification step (#3694)

clerk · Jul 11, 2024 · e2782ed · e2782ed
1 parent 1de2cfb
commit e2782ed
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 11 deletions.
diff --git a/.changeset/thirty-lizards-lick.md b/.changeset/thirty-lizards-lick.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/common/phone-number-field/index.tsx b/packages/ui/src/common/phone-number-field/index.tsx
@@ -23,13 +23,15 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
     label = 'Phone number',
     name = 'phoneNumber',
     hintText = 'Optional',
+    initPhoneWithCode = '',
     locationBasedCountryIso,
     onChange,
     ...props
   }: React.InputHTMLAttributes<HTMLInputElement> & {
     alternativeFieldTrigger?: React.ReactNode;
     label?: React.ReactNode;
     hintText?: string;
+    initPhoneWithCode?: string;
     locationBasedCountryIso: CountryIso;
   },
   forwardedRef: React.ForwardedRef<HTMLInputElement>,
@@ -42,7 +44,7 @@ export const PhoneNumberField = React.forwardRef(function PhoneNumberField(
   const commandInputRef = React.useRef<HTMLInputElement>(null);
   const contentWidth = containerRef.current?.clientWidth || 0;
   const { setNumber, setIso, setNumberAndIso, numberWithCode, formattedNumber, iso } = useFormattedPhoneNumber({
-    initPhoneWithCode: selectedCountry.iso,
+    initPhoneWithCode,
     locationBasedCountryIso,
   });
 

diff --git a/packages/ui/src/components/sign-up/indentifiers.tsx b/packages/ui/src/components/sign-up/indentifiers.tsx
@@ -0,0 +1,26 @@
+import { useClerk } from '@clerk/clerk-react';
+
+import { parsePhoneString } from '~/common/phone-number-field/utils';
+import type { RequireExactlyOne } from '~/types/utils';
+
+type Identifiers = {
+  emailAddress: boolean;
+  phoneNumber: boolean;
+};
+
+type Identifier = RequireExactlyOne<Identifiers>;
+
+export function SignUpIdentifier({ emailAddress, phoneNumber }: Identifier) {
+  const { client } = useClerk();
+
+  if (emailAddress) {
+    return <span>{client.signUp.emailAddress}</span>;
+  }
+
+  if (phoneNumber) {
+    const { formattedNumberWithCode } = parsePhoneString(client.signUp.phoneNumber || '');
+    return <span>{formattedNumberWithCode}</span>;
+  }
+
+  return null;
+}
diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx
@@ -21,6 +21,8 @@ import * as Icon from '~/primitives/icon';
 import { LinkButton } from '~/primitives/link-button';
 import { Seperator } from '~/primitives/seperator';
 
+import { SignUpIdentifier } from './indentifiers';
+
 export function SignUpComponent() {
   return (
     <SignUp.Root>
@@ -115,6 +117,7 @@ function SignUpComponentLoaded() {
                             hintText={t('formFieldHintText__optional')}
                             required={phoneNumberRequired}
                             disabled={isGlobalLoading}
+                            initPhoneWithCode={clerk.client.signUp.phoneNumber || ''}
                             locationBasedCountryIso={locationBasedCountryIso}
                           />
                         ) : null}
@@ -171,11 +174,7 @@ function SignUpComponentLoaded() {
                       <Card.Description>{t('signUp.phoneCode.subtitle')}</Card.Description>
                       <Card.Description>
                         <span className='flex items-center justify-center gap-2'>
-                          {/* TODO: elements work
-                                    1. https://linear.app/clerk/issue/SDK-1830/add-signup-elements-for-accessing-email-address-and-phone-number
-                                    2. https://linear.app/clerk/issue/SDK-1831/pre-populate-emailphone-number-fields-when-navigating-back-to-the
-                          */}
-                          +1 (424) 424-4242{' '}
+                          <SignUpIdentifier phoneNumber />
                           <SignUp.Action
                             navigate='start'
                             asChild
@@ -244,11 +243,7 @@ function SignUpComponentLoaded() {
                       <Card.Description>{t('signUp.emailCode.subtitle')}</Card.Description>
                       <Card.Description>
                         <span className='flex items-center justify-center gap-2'>
-                          {/* TODO: elements work
-                                    1. https://linear.app/clerk/issue/SDK-1830/add-signup-elements-for-accessing-email-address-and-phone-number
-                                    2. https://linear.app/clerk/issue/SDK-1831/pre-populate-emailphone-number-fields-when-navigating-back-to-the
-                          */}
-                          [email protected]{' '}
+                          <SignUpIdentifier emailAddress />
                           <SignUp.Action
                             navigate='start'
                             asChild

diff --git a/packages/ui/src/types/utils.ts b/packages/ui/src/types/utils.ts
@@ -0,0 +1,5 @@
+// https://github.com/sindresorhus/type-fest/blob/main/source/require-exactly-one.d.ts
+export type RequireExactlyOne<ObjectType, KeysType extends keyof ObjectType = keyof ObjectType> = {
+  [Key in KeysType]: Required<Pick<ObjectType, Key>> & Partial<Record<Exclude<KeysType, Key>, never>>;
+}[KeysType] &
+  Omit<ObjectType, KeysType>;