From 5c1bb87b50f17e14d52496979d62fa9b91015e4e Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 8 May 2025 13:46:30 +0300
Subject: [PATCH 1/6] refactor(clerk-js): Simplify plans action localization
 logic

---
 .../PricingTable/PricingTableDefault.tsx      |  8 ++-
 .../src/ui/contexts/components/Plans.tsx      | 55 ++++++++++++++-----
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index c34e0f3863c..d229ceedf59 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -127,13 +127,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);
 
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index fc661f5c5ac..d771f029540 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -218,21 +218,48 @@ 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,

From f71ffdd6596807d6a2d0ce23acc8971e9f134ed2 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 8 May 2025 14:59:29 +0300
Subject: [PATCH 2/6] fix(clerk-js): Improve flows for switching between plans

# Conflicts:
#	packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
---
 packages/clerk-js/sandbox/template.html       |  2 +-
 .../PricingTable/PricingTableDefault.tsx      | 11 ++--
 .../src/ui/contexts/components/Plans.tsx      | 53 ++++++++++++++++---
 3 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index cd4207e24c4..bdaa9c7fee9 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -437,7 +437,7 @@
     <script
       type="text/javascript"
       src="/<%= htmlRspackPlugin.files.js[0] %>"
-      data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
+      data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"
     ></script>
     <script
       type="text/javascript"
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index d229ceedf59..b27859c067e 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -109,8 +109,8 @@ function Card(props: CardProps) {
   const canManageBilling = useProtect(
     has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
   );
-
-  const { buttonPropsForPlan, upcomingSubscriptionsExist, activeOrUpcomingSubscription } = usePlansContext();
+  const { buttonPropsForPlan, upcomingSubscriptionsExist, activeOrUpcomingSubscriptionBasedOnPlanPeriod } =
+    usePlansContext();
 
   const showPlanDetails = (event?: React.MouseEvent<HTMLElement>) => {
     const portalRoot = getClosestProfileScrollBox(mode, event);
@@ -123,9 +123,12 @@ function Card(props: CardProps) {
     });
   };
 
-  const subscription = activeOrUpcomingSubscription(plan);
-  const hasFeatures = plan.features.length > 0;
+  const subscription = React.useMemo(
+    () => activeOrUpcomingSubscriptionBasedOnPlanPeriod(plan, planPeriod),
+    [plan, planPeriod, activeOrUpcomingSubscriptionBasedOnPlanPeriod],
+  );
   const isPlanActive = subscription?.status === 'active';
+  const hasFeatures = plan.features.length > 0;
   const showStatusRow = !!subscription;
   const isEligibleForSwitch = planPeriod !== subscription?.planPeriod && !plan.isDefault;
   const isEligibleForSwitchToAnnual = isEligibleForSwitch && plan.annualMonthlyAmount > 0 && planPeriod === 'annual';
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index d771f029540..f9eb1211945 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -174,6 +174,42 @@ export const usePlansContext = () => {
     [ctx.subscriptions],
   );
 
+  // returns all subscriptions for a plan that are active or upcoming
+  const activeAndUpcomingSubscriptions = useCallback(
+    (plan: CommercePlanResource) => {
+      return ctx.subscriptions
+        .filter(subscription => subscription.plan.id === plan.id)
+        .filter(subscription => subscription.status === 'active' || subscription.status === 'upcoming');
+    },
+    [ctx.subscriptions],
+  );
+
+  // return the active or upcoming subscription for a plan based on the plan period, if there is no subscription for the plan period, return the first subscription
+  const activeOrUpcomingSubscriptionWithPlanPeriod = useCallback(
+    (plan: CommercePlanResource, planPeriod: CommerceSubscriptionPlanPeriod = 'month') => {
+      const plansSubscriptions = activeAndUpcomingSubscriptions(plan);
+      // Handle multiple subscriptions for the same plan
+      if (plansSubscriptions.length > 1) {
+        const subscriptionBaseOnPanPeriod = plansSubscriptions.find(subscription => {
+          return subscription.planPeriod === planPeriod;
+        });
+
+        if (subscriptionBaseOnPanPeriod) {
+          return subscriptionBaseOnPanPeriod;
+        }
+
+        return plansSubscriptions[0];
+      }
+
+      if (plansSubscriptions.length === 1) {
+        return plansSubscriptions[0];
+      }
+
+      return undefined;
+    },
+    [activeAndUpcomingSubscriptions],
+  );
+
   const canManageSubscription = useCallback(
     ({ plan, subscription: sub }: { plan?: CommercePlanResource; subscription?: CommerceSubscriptionResource }) => {
       const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
@@ -210,7 +246,8 @@ export const usePlansContext = () => {
       isDisabled: boolean;
       disabled: boolean;
     } => {
-      const subscription = sub ?? (plan ? activeOrUpcomingSubscription(plan) : undefined);
+      const subscription =
+        sub ?? (plan ? activeOrUpcomingSubscriptionWithPlanPeriod(plan, selectedPlanPeriod) : undefined);
       let _selectedPlanPeriod = selectedPlanPeriod;
       if (_selectedPlanPeriod === 'annual' && sub?.plan.annualMonthlyAmount === 0) {
         _selectedPlanPeriod = 'month';
@@ -221,8 +258,8 @@ export const usePlansContext = () => {
       const getLocalizationKey = () => {
         // Handle subscription cases
         if (subscription) {
-          if (selectedPlanPeriod !== subscription.planPeriod && subscription.canceledAt) {
-            if (selectedPlanPeriod === 'month') {
+          if (_selectedPlanPeriod !== subscription.planPeriod && subscription.canceledAt) {
+            if (_selectedPlanPeriod === 'month') {
               return localizationKeys('commerce.switchToMonthly');
             }
 
@@ -235,8 +272,8 @@ export const usePlansContext = () => {
             return localizationKeys('commerce.reSubscribe');
           }
 
-          if (selectedPlanPeriod !== subscription.planPeriod) {
-            if (selectedPlanPeriod === 'month') {
+          if (_selectedPlanPeriod !== subscription.planPeriod) {
+            if (_selectedPlanPeriod === 'month') {
               return localizationKeys('commerce.switchToMonthly');
             }
 
@@ -266,7 +303,7 @@ export const usePlansContext = () => {
         disabled: !canManageBilling,
       };
     },
-    [activeOrUpcomingSubscription, canManageBilling, ctx.subscriptions],
+    [activeOrUpcomingSubscriptionWithPlanPeriod, canManageBilling, ctx.subscriptions],
   );
 
   const captionForSubscription = useCallback((subscription: CommerceSubscriptionResource) => {
@@ -282,7 +319,7 @@ export const usePlansContext = () => {
   // handle the selection of a plan, either by opening the subscription details or checkout
   const handleSelectPlan = useCallback(
     ({ plan, planPeriod, onSubscriptionChange, mode = 'mounted', event }: HandleSelectPlanProps) => {
-      const subscription = activeOrUpcomingSubscription(plan);
+      const subscription = activeOrUpcomingSubscriptionWithPlanPeriod(plan, planPeriod);
 
       const portalRoot = getClosestProfileScrollBox(mode, event);
 
@@ -326,6 +363,8 @@ export const usePlansContext = () => {
     ...ctx,
     componentName,
     activeOrUpcomingSubscription,
+    activeAndUpcomingSubscriptions,
+    activeOrUpcomingSubscriptionBasedOnPlanPeriod: activeOrUpcomingSubscriptionWithPlanPeriod,
     isDefaultPlanImplicitlyActiveOrUpcoming,
     handleSelectPlan,
     buttonPropsForPlan,

From 88fee13030dcf4d6bc69cfe59b2ee90fec3baa66 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 8 May 2025 17:57:48 +0300
Subject: [PATCH 3/6] chore(repo): Add changeset

---
 .changeset/little-cases-knock.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/little-cases-knock.md

diff --git a/.changeset/little-cases-knock.md b/.changeset/little-cases-knock.md
new file mode 100644
index 00000000000..b04bc7f52b7
--- /dev/null
+++ b/.changeset/little-cases-knock.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Improvements of flows for switching between plans

From 63ff729f6769296fbefbe732be3d901c94c53254 Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 8 May 2025 19:43:30 +0300
Subject: [PATCH 4/6] chore(clerk-js): Pricing table footer fixes

---
 .../PricingTable/PricingTableDefault.tsx      | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index b27859c067e..b6cbef00847 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -109,8 +109,7 @@ function Card(props: CardProps) {
   const canManageBilling = useProtect(
     has => has({ permission: 'org:sys_billing:manage' }) || subscriberType === 'user',
   );
-  const { buttonPropsForPlan, upcomingSubscriptionsExist, activeOrUpcomingSubscriptionBasedOnPlanPeriod } =
-    usePlansContext();
+  const { buttonPropsForPlan, activeOrUpcomingSubscriptionBasedOnPlanPeriod } = usePlansContext();
 
   const showPlanDetails = (event?: React.MouseEvent<HTMLElement>) => {
     const portalRoot = getClosestProfileScrollBox(mode, event);
@@ -130,21 +129,31 @@ function Card(props: CardProps) {
   const isPlanActive = subscription?.status === 'active';
   const hasFeatures = plan.features.length > 0;
   const showStatusRow = !!subscription;
-  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 ||
-    isEligibleForSwitchToAnnual ||
-    isEligibleForSwitchToMonthly;
+  let shouldShowFooter = false;
+  let shouldShowFooterNotice = false;
 
-  const shouldShowFooterNotice =
-    subscription?.status === 'upcoming' && (planPeriod === subscription.planPeriod || plan.isDefault);
-
-  const planPeriodSameAsSelectedPlanPeriod = !upcomingSubscriptionsExist && subscription?.planPeriod === planPeriod;
+  if (!subscription) {
+    shouldShowFooter = true;
+    shouldShowFooterNotice = false;
+  } else if (subscription.status === 'upcoming') {
+    shouldShowFooter = true;
+    shouldShowFooterNotice = true;
+  } else if (subscription.status === 'active') {
+    if (subscription.canceledAt) {
+      shouldShowFooter = true;
+      shouldShowFooterNotice = false;
+    } else if (planPeriod !== subscription.planPeriod && plan.annualMonthlyAmount > 0) {
+      shouldShowFooter = true;
+      shouldShowFooterNotice = false;
+    } else {
+      shouldShowFooter = false;
+      shouldShowFooterNotice = false;
+    }
+  } else {
+    shouldShowFooter = false;
+    shouldShowFooterNotice = false;
+  }
 
   return (
     <Box
@@ -233,7 +242,6 @@ function Card(props: CardProps) {
               borderTopWidth: t.borderWidths.$normal,
               borderTopStyle: t.borderStyles.$solid,
               borderTopColor: t.colors.$neutralAlpha100,
-              background: planPeriodSameAsSelectedPlanPeriod && hasFeatures ? t.colors.$colorBackground : undefined,
               order: ctaPosition === 'top' ? -1 : undefined,
             })}
           >

From b2bdf051cc104892750f36589d2bb2678f77b47b Mon Sep 17 00:00:00 2001
From: Vaggelis Yfantis <me@octoper.me>
Date: Thu, 8 May 2025 20:01:27 +0300
Subject: [PATCH 5/6] chore(clerk-js): Bundlewatch increase

---
 packages/clerk-js/bundlewatch.config.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 94a9ac94378..29558e15910 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -4,7 +4,7 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "68.3KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "104KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "104.20KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39.5KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },

From eccb4caa77a816ec9e0baef1d5cb64df76b577b3 Mon Sep 17 00:00:00 2001
From: Keiran Flanigan <keiran@aeliox.com>
Date: Sun, 11 May 2025 08:43:04 -0700
Subject: [PATCH 6/6] fix handleSelectPlan for period switching, reset sandbox
 pk

---
 packages/clerk-js/sandbox/template.html                | 2 +-
 packages/clerk-js/src/ui/contexts/components/Plans.tsx | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index bdaa9c7fee9..cd4207e24c4 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -437,7 +437,7 @@
     <script
       type="text/javascript"
       src="/<%= htmlRspackPlugin.files.js[0] %>"
-      data-clerk-publishable-key="pk_test_ZGV2b3RlZC15YWstMjkuY2xlcmsuYWNjb3VudHNzdGFnZS5kZXYk"
+      data-clerk-publishable-key="pk_test_dG91Y2hlZC1sYWR5YmlyZC0yMy5jbGVyay5hY2NvdW50cy5kZXYk"
     ></script>
     <script
       type="text/javascript"
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index f9eb1211945..844f083efd8 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -177,9 +177,7 @@ export const usePlansContext = () => {
   // returns all subscriptions for a plan that are active or upcoming
   const activeAndUpcomingSubscriptions = useCallback(
     (plan: CommercePlanResource) => {
-      return ctx.subscriptions
-        .filter(subscription => subscription.plan.id === plan.id)
-        .filter(subscription => subscription.status === 'active' || subscription.status === 'upcoming');
+      return ctx.subscriptions.filter(subscription => subscription.plan.id === plan.id);
     },
     [ctx.subscriptions],
   );
@@ -323,7 +321,7 @@ export const usePlansContext = () => {
 
       const portalRoot = getClosestProfileScrollBox(mode, event);
 
-      if (subscription && !subscription.canceledAt) {
+      if (subscription && subscription.planPeriod === planPeriod && !subscription.canceledAt) {
         clerk.__internal_openPlanDetails({
           plan,
           subscriberType,