fix(clerk-js): Fix PricingTable plan button display logic (#5869)

Author: brkalow

.changeset/violet-poets-move.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix PricingTable logic for plan button text.

packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

@@ -121,12 +121,13 @@ function Card(props: CardProps) {
   const hasFeatures = plan.features.length > 0;
   const isPlanActive = subscription?.status === 'active';
   const showStatusRow = !!subscription;
+  const isEligibleForSwitchToAnnual = plan.annualMonthlyAmount > 0 && planPeriod === 'annual';
 
   const shouldShowFooter =
     !subscription ||
     subscription?.status === 'upcoming' ||
     subscription?.canceledAt ||
-    (planPeriod !== subscription?.planPeriod && !plan.isDefault);
+    (planPeriod !== subscription?.planPeriod && !plan.isDefault && isEligibleForSwitchToAnnual);
   const shouldShowFooterNotice =
     subscription?.status === 'upcoming' && (planPeriod === subscription.planPeriod || plan.isDefault);
 

packages/clerk-js/src/ui/contexts/components/Plans.tsx

@@ -215,17 +215,21 @@ export const usePlansContext = () => {
         _selectedPlanPeriod = 'month';
       }
 
+      const isEligibleForSwitchToAnnual = (plan?.annualMonthlyAmount ?? 0) > 0;
+
       return {
         localizationKey: subscription
           ? subscription.canceledAt
             ? localizationKeys('commerce.reSubscribe')
             : selectedPlanPeriod !== subscription.planPeriod
               ? selectedPlanPeriod === 'month'
                 ? localizationKeys('commerce.switchToMonthly')
-                : localizationKeys('commerce.switchToAnnual')
+                : isEligibleForSwitchToAnnual
+                  ? localizationKeys('commerce.switchToAnnual')
+                  : localizationKeys('commerce.manageSubscription')
               : localizationKeys('commerce.manageSubscription')
           : // If there are no active or grace period subscriptions, show the get started button
-            ctx.subscriptions.length > 0
+            ctx.subscriptions.filter(subscription => !subscription.plan.isDefault).length > 0
             ? localizationKeys('commerce.switchPlan')
             : localizationKeys('commerce.subscribe'),
         variant: isCompact ? 'bordered' : 'solid',