fix(clerk-js): Display "Switch to this plan" when a subscription already exists (#5722)

Author: panteliselef

.changeset/clear-trains-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+For each plan inside the `<PricingTable/>` display "Switch to this plan" instead of "Get started" when a subscription already exists. 

packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx

@@ -4,7 +4,7 @@ import { usePlansContext } from '../../contexts';
 import { Badge, Box, Button, localizationKeys, Span, Table, Tbody, Td, Text, Th, Thead, Tr } from '../../customizables';
 
 export function SubscriptionsList() {
-  const { subscriptions, handleSelectPlan, buttonPropsForPlan } = usePlansContext();
+  const { subscriptions, handleSelectPlan, buttonPropsForPlan, shouldDisplayPlanButton } = usePlansContext();
 
   const handleSelectSubscription = (subscription: __experimental_CommerceSubscriptionResource) => {
     handleSelectPlan({
@@ -68,12 +68,14 @@ export function SubscriptionsList() {
                 textAlign: 'right',
               })}
             >
-              <Button
-                size='xs'
-                textVariant='buttonSmall'
-                onClick={() => handleSelectSubscription(subscription)}
-                {...buttonPropsForPlan({ subscription })}
-              />
+              {shouldDisplayPlanButton({ subscription }) && (
+                <Button
+                  size='xs'
+                  textVariant='buttonSmall'
+                  onClick={() => handleSelectSubscription(subscription)}
+                  {...buttonPropsForPlan({ subscription })}
+                />
+              )}
             </Td>
           </Tr>
         ))}

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

@@ -148,6 +148,21 @@ export const usePlansContext = () => {
     return ctx.subscriptions.length === 0;
   }, [ctx.subscriptions]);
 
+  const shouldDisplayPlanButton = useCallback(
+    ({
+      plan,
+      subscription: sub,
+    }: {
+      plan?: __experimental_CommercePlanResource;
+      subscription?: __experimental_CommerceSubscriptionResource;
+    }) => {
+      const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
+
+      return !subscription || !subscription.canceledAt;
+    },
+    [activeOrUpcomingSubscription],
+  );
+
   // return the CTA button props for a plan
   const buttonPropsForPlan = useCallback(
     ({
@@ -166,7 +181,10 @@ export const usePlansContext = () => {
           ? subscription.canceledAt
             ? localizationKeys('__experimental_commerce.reSubscribe')
             : localizationKeys('__experimental_commerce.manageSubscription')
-          : localizationKeys('__experimental_commerce.getStarted'),
+          : // If there are no active or grace period subscriptions, show the get started button
+            ctx.subscriptions.length > 0
+            ? localizationKeys('__experimental_commerce.switchPlan')
+            : localizationKeys('__experimental_commerce.getStarted'),
         variant: isCompact || !!subscription ? 'bordered' : 'solid',
         colorScheme: isCompact || !!subscription ? 'secondary' : 'primary',
       };
@@ -228,5 +246,6 @@ export const usePlansContext = () => {
     isDefaultPlanImplicitlyActive,
     handleSelectPlan,
     buttonPropsForPlan,
+    shouldDisplayPlanButton,
   };
 };