refactor(clerk-js): Simplify plans action localization logic

Author: octoper

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

@@ -121,13 +121,17 @@ 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 isEligibleForSwitch = planPeriod !== subscription?.planPeriod && !plan.isDefault;
+  const isEligibleForSwitchToAnnual = isEligibleForSwitch && plan.annualMonthlyAmount > 0 && planPeriod === 'annual';
+  const isEligibleForSwitchToMonthly = isEligibleForSwitch && planPeriod === 'month';
 
   const shouldShowFooter =
     !subscription ||
     subscription?.status === 'upcoming' ||
     subscription?.canceledAt ||
-    (planPeriod !== subscription?.planPeriod && !plan.isDefault && isEligibleForSwitchToAnnual);
+    isEligibleForSwitchToAnnual ||
+    isEligibleForSwitchToMonthly;
+
   const shouldShowFooterNotice =
     subscription?.status === 'upcoming' && (planPeriod === subscription.planPeriod || plan.isDefault);
 

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

@@ -217,27 +217,54 @@ export const usePlansContext = () => {
 
       const isEligibleForSwitchToAnnual = (plan?.annualMonthlyAmount ?? 0) > 0;
 
+      const getLocalizationKey = () => {
+        // Handle subscription cases
+        if (subscription) {
+          if (selectedPlanPeriod !== subscription.planPeriod && subscription.canceledAt) {
+            if (selectedPlanPeriod === 'month') {
+              return localizationKeys('commerce.switchToMonthly');
+            }
+
+            if (isEligibleForSwitchToAnnual) {
+              return localizationKeys('commerce.switchToAnnual');
+            }
+          }
+
+          if (subscription.canceledAt) {
+            return localizationKeys('commerce.reSubscribe');
+          }
+
+          if (selectedPlanPeriod !== subscription.planPeriod) {
+            if (selectedPlanPeriod === 'month') {
+              return localizationKeys('commerce.switchToMonthly');
+            }
+
+            if (isEligibleForSwitchToAnnual) {
+              return localizationKeys('commerce.switchToAnnual');
+            }
+
+            return localizationKeys('commerce.manageSubscription');
+          }
+
+          return localizationKeys('commerce.manageSubscription');
+        }
+
+        // Handle non-subscription cases
+        const hasNonDefaultSubscriptions =
+          ctx.subscriptions.filter(subscription => !subscription.plan.isDefault).length > 0;
+        return hasNonDefaultSubscriptions
+          ? localizationKeys('commerce.switchPlan')
+          : localizationKeys('commerce.subscribe');
+      };
+
       return {
-        localizationKey: subscription
-          ? subscription.canceledAt
-            ? localizationKeys('commerce.reSubscribe')
-            : selectedPlanPeriod !== subscription.planPeriod
-              ? selectedPlanPeriod === 'month'
-                ? localizationKeys('commerce.switchToMonthly')
-                : 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.filter(subscription => !subscription.plan.isDefault).length > 0
-            ? localizationKeys('commerce.switchPlan')
-            : localizationKeys('commerce.subscribe'),
+        localizationKey: getLocalizationKey(),
         variant: isCompact ? 'bordered' : 'solid',
         colorScheme: isCompact ? 'secondary' : 'primary',
         isDisabled: !canManageBilling,
       };
     },
-    [activeOrUpcomingSubscription],
+    [activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
   );
 
   const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {