From 30fdd434c61b8777167fe7e24c85a21e992d43ec Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 13 Mar 2025 15:59:57 -0400
Subject: [PATCH 1/3] fix(clerk-js): Conditionally render avatar

---
 .../ui/components/PricingTable/PlanCard.tsx   | 94 +++++++++++--------
 .../ui/customizables/elementDescriptors.ts    |  2 +-
 packages/types/src/appearance.ts              |  2 +-
 3 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
index 8cfae45beea..8b2b03e6b98 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
@@ -33,12 +33,24 @@ interface PlanCardProps {
 
 export function PlanCard(props: PlanCardProps) {
   const { plan, period, setPeriod, onSelect, props: pricingTableProps, isCompact = false } = props;
+  const {
+    id,
+    slug,
+    name,
+    description,
+    avatarUrl,
+    features,
+    isActiveForPayer,
+    hasBaseFee,
+    currencySymbol,
+    amountFormatted,
+    annualMonthlyAmountFormatted,
+  } = plan;
   const { ctaPosition = 'top', collapseFeatures = false } = pricingTableProps;
   const [showAllFeatures, setShowAllFeatures] = React.useState(false);
-  const totalFeatures = plan.features.length;
+  const totalFeatures = features.length;
   const hasFeatures = totalFeatures > 0;
   const canToggleFeatures = isCompact && totalFeatures > 3;
-  const isActivePlan = plan.isActiveForPayer;
   const prefersReducedMotion = usePrefersReducedMotion();
   const { animations: appearanceAnimations } = useAppearance().parsedLayout;
   const planCardFeePeriodNoticeAnimation: ThemableCssProp = t => ({
@@ -54,9 +66,9 @@ export function PlanCard(props: PlanCardProps) {
 
   return (
     <Box
-      key={plan.id}
+      key={id}
       elementDescriptor={[descriptors.planCard, isCompact ? descriptors.planCardCompact : descriptors.planCardDefault]}
-      elementId={descriptors.planCard.setId(plan.slug)}
+      elementId={descriptors.planCard.setId(slug)}
       sx={t => ({
         display: 'flex',
         flexDirection: 'column',
@@ -79,44 +91,48 @@ export function PlanCard(props: PlanCardProps) {
           padding: isCompact ? t.space.$3 : t.space.$4,
         })}
       >
-        <Flex
-          elementDescriptor={descriptors.planCardAvatarContainer}
-          align='start'
-          justify='between'
-          sx={{ width: '100%' }}
-        >
-          <Avatar
-            boxElementDescriptor={descriptors.planCardAvatar}
-            size={_ => 40}
-            title={plan.name}
-            initials={plan.name[0]}
-            rounded={false}
-            imageUrl={plan.avatarUrl}
-          />
-          {isActivePlan ? (
-            <Badge
-              localizationKey={localizationKeys('badge__currentPlan')}
-              colorScheme='secondary'
-            />
-          ) : null}
-        </Flex>
+        {avatarUrl || isActiveForPayer ? (
+          <Box
+            elementDescriptor={descriptors.planCardAvatarBadgeContainer}
+            sx={t => ({
+              display: 'flex',
+              alignItems: 'start',
+              gap: t.space.$3,
+              marginBlockEnd: t.space.$3,
+            })}
+          >
+            {avatarUrl ? (
+              <Avatar
+                boxElementDescriptor={descriptors.planCardAvatar}
+                size={_ => 40}
+                title={name}
+                initials={name[0]}
+                rounded={false}
+                imageUrl={avatarUrl}
+              />
+            ) : null}
+            {isActiveForPayer ? (
+              <Badge
+                localizationKey={localizationKeys('badge__currentPlan')}
+                colorScheme='secondary'
+              />
+            ) : null}
+          </Box>
+        ) : null}
         <Heading
           elementDescriptor={descriptors.planCardTitle}
           as='h2'
           textVariant={isCompact ? 'h3' : 'h2'}
-          sx={t => ({
-            marginTop: t.space.$3,
-          })}
         >
-          {plan.name}
+          {name}
         </Heading>
-        {!isCompact && plan.description ? (
+        {!isCompact && description ? (
           <Text
             elementDescriptor={descriptors.planCardDescription}
             variant='subtitle'
             colorScheme='secondary'
           >
-            {plan.description}
+            {description}
           </Text>
         ) : null}
         <Flex
@@ -128,15 +144,15 @@ export function PlanCard(props: PlanCardProps) {
             columnGap: t.space.$1x5,
           })}
         >
-          {plan.hasBaseFee ? (
+          {hasBaseFee ? (
             <>
               <Text
                 elementDescriptor={descriptors.planCardFee}
                 variant={isCompact ? 'h2' : 'h1'}
                 colorScheme='body'
               >
-                {plan.currencySymbol}
-                {period === 'month' ? plan.amountFormatted : plan.annualMonthlyAmountFormatted}
+                {currencySymbol}
+                {period === 'month' ? amountFormatted : annualMonthlyAmountFormatted}
               </Text>
               <Text
                 elementDescriptor={descriptors.planCardFeePeriod}
@@ -202,7 +218,7 @@ export function PlanCard(props: PlanCardProps) {
             />
           )}
         </Flex>
-        {plan.hasBaseFee ? (
+        {hasBaseFee ? (
           <Box
             elementDescriptor={descriptors.planCardPeriodToggle}
             sx={t => ({
@@ -246,7 +262,7 @@ export function PlanCard(props: PlanCardProps) {
                 rowGap: isCompact ? t.space.$2 : t.space.$3,
               })}
             >
-              {plan.features.slice(0, showAllFeatures ? totalFeatures : 3).map(feature => (
+              {features.slice(0, showAllFeatures ? totalFeatures : 3).map(feature => (
                 <Box
                   elementDescriptor={descriptors.planCardFeaturesListItem}
                   elementId={descriptors.planCardFeaturesListItem.setId(feature.slug)}
@@ -302,10 +318,10 @@ export function PlanCard(props: PlanCardProps) {
           <Button
             block
             textVariant={isCompact ? 'buttonSmall' : 'buttonLarge'}
-            variant={isActivePlan ? 'bordered' : 'solid'}
-            colorScheme={isActivePlan ? 'secondary' : 'primary'}
+            variant={isCompact || isActiveForPayer ? 'bordered' : 'solid'}
+            colorScheme={isCompact || isActiveForPayer ? 'secondary' : 'primary'}
             localizationKey={
-              isActivePlan
+              isActiveForPayer
                 ? localizationKeys('__experimental_commerce.manageMembership')
                 : localizationKeys('__experimental_commerce.getStarted')
             }
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index a109052d87a..38890433cff 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -219,7 +219,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'planCardHeader',
   'planCardTitle',
   'planCardDescription',
-  'planCardAvatarContainer',
+  'planCardAvatarBadgeContainer',
   'planCardAvatar',
   'planCardFeatures',
   'planCardFeaturesList',
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 83ba7ab1775..7e36c95718c 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -345,7 +345,7 @@ export type ElementsConfig = {
   planCardDefault: WithOptions;
   planCardCompact: WithOptions;
   planCardHeader: WithOptions;
-  planCardAvatarContainer: WithOptions;
+  planCardAvatarBadgeContainer: WithOptions;
   planCardAvatar: WithOptions;
   planCardTitle: WithOptions;
   planCardDescription: WithOptions;

From fd463e80b098b366d386ea2b1c7192cc7a29f1c6 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 13 Mar 2025 16:05:06 -0400
Subject: [PATCH 2/3] Create purple-lamps-beg.md

---
 .changeset/purple-lamps-beg.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/purple-lamps-beg.md

diff --git a/.changeset/purple-lamps-beg.md b/.changeset/purple-lamps-beg.md
new file mode 100644
index 00000000000..d75fc2af5ce
--- /dev/null
+++ b/.changeset/purple-lamps-beg.md
@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Conditionally render the avatar and badge components within PlanCard.

From 13d2959c4f1b18197e0cd75c3a8c8551c97ae8e3 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 13 Mar 2025 16:06:19 -0400
Subject: [PATCH 3/3] Update PlanCard.tsx

---
 packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
index 8b2b03e6b98..730f1083eba 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PlanCard.tsx
@@ -97,6 +97,7 @@ export function PlanCard(props: PlanCardProps) {
             sx={t => ({
               display: 'flex',
               alignItems: 'start',
+              justifyContent: 'space-between',
               gap: t.space.$3,
               marginBlockEnd: t.space.$3,
             })}