feat(clerk-js,localizations,shared,ui): Add support for Banned badge (#8261)

Author: dstaley

.changeset/wet-mangos-stop.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/ui': minor
+---
+
+Add support for rendering the Banned badge in the organization members list.

packages/clerk-js/src/core/resources/PublicUserData.ts

@@ -12,6 +12,7 @@ export class PublicUserData implements IPublicUserData {
   identifier!: string;
   userId?: string;
   username?: string;
+  banned?: boolean;
 
   constructor(data: PublicUserDataJSON | PublicUserDataJSONSnapshot) {
     this.fromJSON(data);
@@ -26,6 +27,7 @@ export class PublicUserData implements IPublicUserData {
       this.identifier = data.identifier || '';
       this.userId = data.user_id;
       this.username = data.username;
+      this.banned = data.banned ?? undefined;
     }
 
     return this;
@@ -40,6 +42,7 @@ export class PublicUserData implements IPublicUserData {
       identifier: this.identifier,
       user_id: this.userId,
       username: this.username,
+      banned: this.banned,
     };
   }
 }

packages/localizations/src/en-US.ts

@@ -63,6 +63,7 @@ export const enUS: LocalizationResource = {
   badge__upcomingPlan: 'Upcoming',
   badge__userDevice: 'User device',
   badge__you: 'You',
+  badge__banned: 'Banned',
   billing: {
     addPaymentMethod__label: 'Add payment method',
     alwaysFree: 'Always free',

packages/shared/src/types/json.ts

@@ -321,6 +321,7 @@ export interface PublicUserDataJSON {
   identifier: string;
   user_id?: string;
   username?: string;
+  banned?: boolean;
 }
 
 export interface SessionWithActivitiesJSON extends Omit<SessionJSON, 'user'> {

packages/shared/src/types/localization.ts

@@ -152,6 +152,7 @@ export type __internal_LocalizationResource = {
   badge__unverified: LocalizationValue;
   badge__requiresAction: LocalizationValue;
   badge__you: LocalizationValue;
+  badge__banned: LocalizationValue;
   badge__freeTrial: LocalizationValue;
   badge__currentPlan: LocalizationValue;
   badge__upcomingPlan: LocalizationValue;

packages/shared/src/types/session.ts

@@ -336,6 +336,7 @@ export interface PublicUserData {
   identifier: string;
   userId?: string;
   username?: string;
+  banned?: boolean;
 }
 
 /**

packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx

@@ -95,7 +95,16 @@ const MemberRow = (props: {
           user={membership.publicUserData}
           subtitle={membership.publicUserData?.identifier}
           subtitleProps={{ variant: 'caption' }}
-          badge={isCurrentUser && <Badge localizationKey={localizationKeys('badge__you')} />}
+          badge={
+            isCurrentUser ? (
+              <Badge localizationKey={localizationKeys('badge__you')} />
+            ) : membership.publicUserData?.banned ? (
+              <Badge
+                colorScheme='danger'
+                localizationKey={localizationKeys('badge__banned')}
+              />
+            ) : undefined
+          }
         />
       </Td>
       <Td>