fix(clerk-js): Correctly display all badges email/phone (#1749)

clerk · Sep 21, 2023 · a2c7115 · a2c7115
1 parent 40ea407
commit a2c7115
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 24 deletions.
diff --git a/.changeset/breezy-countries-play.md b/.changeset/breezy-countries-play.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixed a bug where the "Unverified" badge was missing on email or phone number fields when those where marked as "Primary"
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailSection.tsx
@@ -49,18 +49,21 @@ const EmailAccordion = ({ email }: { email: EmailAddressResource }) => {
     <UserProfileAccordion
       title={email.emailAddress}
       badge={
-        isPrimary ? (
-          <Badge
-            localizationKey={localizationKeys('badge__primary')}
-            textVariant={'extraSmallMedium'}
-          />
-        ) : !isVerified ? (
-          <Badge
-            localizationKey={localizationKeys('badge__unverified')}
-            colorScheme='danger'
-            textVariant={'extraSmallMedium'}
-          />
-        ) : undefined
+        <>
+          {isPrimary && (
+            <Badge
+              localizationKey={localizationKeys('badge__primary')}
+              textVariant={'extraSmallMedium'}
+            />
+          )}
+          {!isVerified && (
+            <Badge
+              localizationKey={localizationKeys('badge__unverified')}
+              colorScheme='danger'
+              textVariant={'extraSmallMedium'}
+            />
+          )}
+        </>
       }
     >
       <Col gap={4}>

diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
@@ -60,18 +60,21 @@ const PhoneAccordion = ({ phone }: { phone: PhoneNumberResource }) => {
       }
       title={formattedPhone}
       badge={
-        isPrimary ? (
-          <Badge
-            localizationKey={localizationKeys('badge__primary')}
-            textVariant={'extraSmallMedium'}
-          />
-        ) : !isVerified ? (
-          <Badge
-            localizationKey={localizationKeys('badge__unverified')}
-            colorScheme='danger'
-            textVariant={'extraSmallMedium'}
-          />
-        ) : undefined
+        <>
+          {isPrimary && (
+            <Badge
+              localizationKey={localizationKeys('badge__primary')}
+              textVariant={'extraSmallMedium'}
+            />
+          )}
+          {!isVerified && (
+            <Badge
+              localizationKey={localizationKeys('badge__unverified')}
+              colorScheme='danger'
+              textVariant={'extraSmallMedium'}
+            />
+          )}
+        </>
       }
     >
       <Col gap={4}>