From 6a3bcd529ddee71037bf64b0af55342bda1f337c Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 25 Apr 2025 19:36:03 +0300
Subject: [PATCH 1/2] fix(clerk-js): Display "Switch to this plan" when a
 subscription already exists

---
 .changeset/clear-trains-rhyme.md                       | 5 +++++
 packages/clerk-js/src/ui/contexts/components/Plans.tsx | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/clear-trains-rhyme.md

diff --git a/.changeset/clear-trains-rhyme.md b/.changeset/clear-trains-rhyme.md
new file mode 100644
index 00000000000..d60d7baae9a
--- /dev/null
+++ b/.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. 
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 8cdf0b2d9d4..fd351780bac 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -166,7 +166,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',
       };

From a16bf7c9a986c17ad6b55dfa221ebb6c1cd0575c Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Fri, 25 Apr 2025 20:18:45 +0300
Subject: [PATCH 2/2] align with new ticket requirements

---
 .../Subscriptions/SubscriptionsList.tsx          | 16 +++++++++-------
 .../src/ui/contexts/components/Plans.tsx         | 16 ++++++++++++++++
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
index 1d774f12bcb..fe3f5e0e2d6 100644
--- a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
+++ b/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>
         ))}
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index fd351780bac..69274094264 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/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(
     ({
@@ -231,5 +246,6 @@ export const usePlansContext = () => {
     isDefaultPlanImplicitlyActive,
     handleSelectPlan,
     buttonPropsForPlan,
+    shouldDisplayPlanButton,
   };
 };