fix(clerk-js): Plan card fixes

.changeset/clean-comics-relate.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix plan card button text and handles ending subscriptions on the same plan.

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

@@ -23,7 +23,12 @@ const PricingTableRoot = (props: PricingTableProps) => {
   const defaultPlanPeriod = useMemo(() => {
     if (isCompact) {
       const upcomingSubscription = subscriptions?.find(sub => sub.status === 'upcoming');
-      if (upcomingSubscription) {
+      const hasEndingSubscriptionOfSamePlan = subscriptions?.find(
+        sub => sub.canceledAt && sub.status === 'active' && sub.plan.id === upcomingSubscription?.plan.id,
+      );
+
+      // the exception to this is if there is an upcoming subscription AND an active subscription for the SAME plan, default to the active subscription's period
+      if (upcomingSubscription && !hasEndingSubscriptionOfSamePlan) {
         return upcomingSubscription.planPeriod;
       }
 

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

@@ -104,7 +104,7 @@ function Card(props: CardProps) {
   const collapseFeatures = pricingTableProps.collapseFeatures || false;
   const { id, slug } = plan;
 
-  const { buttonPropsForPlan, upcomingSubscriptionsExist, activeOrUpcomingSubscription } = usePlansContext();
+  const { buttonPropsForPlan, activeOrUpcomingSubscription } = usePlansContext();
 
   const showPlanDetails = (event?: React.MouseEvent<HTMLElement>) => {
     const portalRoot = getClosestProfileScrollBox(mode, event);
@@ -121,17 +121,31 @@ 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 && isEligibleForSwitchToAnnual);
-  const shouldShowFooterNotice =
-    subscription?.status === 'upcoming' && (planPeriod === subscription.planPeriod || plan.isDefault);
+  let shouldShowFooter = false;
+  let shouldShowFooterNotice = false;
 
-  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
@@ -220,7 +234,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,
             })}
           >

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

@@ -169,7 +169,16 @@ export const usePlansContext = () => {
   // return the active or upcoming subscription for a plan if it exists
   const activeOrUpcomingSubscription = useCallback(
     (plan: CommercePlanResource) => {
-      return ctx.subscriptions.find(subscription => subscription.plan.id === plan.id);
+      const matchingSubscriptions = ctx.subscriptions.filter(subscription => subscription.plan.id === plan.id);
+      const activeSubscription = matchingSubscriptions.find(subscription => subscription.status === 'active');
+      return activeSubscription || matchingSubscriptions[0];
+    },
+    [ctx.subscriptions],
+  );
+
+  const hasMultipleSubscriptionsForPlan = useCallback(
+    (plan: CommercePlanResource) => {
+      return ctx.subscriptions.filter(subscription => subscription.plan.id === plan.id).length > 1;
     },
     [ctx.subscriptions],
   );
@@ -183,14 +192,6 @@ export const usePlansContext = () => {
     [activeOrUpcomingSubscription],
   );
 
-  // should the default plan be shown as active
-  const upcomingSubscriptionsExist = useMemo(() => {
-    return (
-      ctx.subscriptions.some(subscription => subscription.status === 'upcoming') ||
-      isDefaultPlanImplicitlyActiveOrUpcoming
-    );
-  }, [ctx.subscriptions, isDefaultPlanImplicitlyActiveOrUpcoming]);
-
   // return the CTA button props for a plan
   const buttonPropsForPlan = useCallback(
     ({
@@ -257,7 +258,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,
@@ -297,12 +298,12 @@ export const usePlansContext = () => {
     ...ctx,
     componentName,
     activeOrUpcomingSubscription,
+    hasMultipleSubscriptionsForPlan,
     isDefaultPlanImplicitlyActiveOrUpcoming,
     handleSelectPlan,
     buttonPropsForPlan,
     canManageSubscription,
     captionForSubscription,
-    upcomingSubscriptionsExist,
     defaultFreePlan,
   };
 };