fix: undefined plan name when user is on trial (#794)

* fix: undefined plan name when user is on trial * fix: show banner if user is not only on trial
raystack · Oct 14, 2024 · 6f284e5 · 6f284e5
1 parent ee7b134
commit 6f284e5
Showing 1 changed file with 21 additions and 24 deletions.
diff --git a/sdks/js/packages/core/react/components/organization/billing/upcoming-billing-cycle.tsx b/sdks/js/packages/core/react/components/organization/billing/upcoming-billing-cycle.tsx
@@ -89,6 +89,7 @@ export const UpcomingBillingCycle = ({
     billingAccount,
     config,
     activeSubscription,
+    trialSubscription,
     isActiveOrganizationLoading,
     basePlan
   } = useFrontier();
@@ -184,31 +185,26 @@ export const UpcomingBillingCycle = ({
     billingAccount?.provider_id
   ]);
 
-  const planName = getPlanNameWithInterval(plan);
+  const planName = activeSubscription
+    ? getPlanNameWithInterval(plan)
+    : getPlanNameWithInterval(basePlan);
 
-  const planInfo = activeSubscription
-    ? {
-        message: `You are subscribed to ${planName}.`,
-        action: {
-          label: 'Upgrade',
-          link: '/plans'
-        }
-      }
-    : basePlan
-    ? {
-        message: `You are subscribed to ${basePlan?.title}.`,
-        action: {
-          label: 'Upgrade',
-          link: '/plans'
-        }
-      }
-    : {
-        message: 'You are not subscribed to any plan',
-        action: {
-          label: 'Subscribe',
-          link: '/plans'
+  const planInfo =
+    activeSubscription || basePlan
+      ? {
+          message: `You are subscribed to ${planName}.`,
+          action: {
+            label: 'Upgrade',
+            link: '/plans'
+          }
         }
-      };
+      : {
+          message: 'You are not subscribed to any plan',
+          action: {
+            label: 'Subscribe',
+            link: '/plans'
+          }
+        };
 
   const onActionBtnClick = () => {
     // @ts-ignore
@@ -226,11 +222,12 @@ export const UpcomingBillingCycle = ({
     isPlansLoading ||
     isPermissionLoading;
 
+  const isUserOnlyTrialing = !activeSubscription?.id && trialSubscription?.id;
   const due_date = upcomingInvoice?.due_date || upcomingInvoice?.period_end_at;
 
   return isLoading ? (
     <Skeleton />
-  ) : due_date ? (
+  ) : due_date && !isUserOnlyTrialing ? (
     <Flex
       align={'center'}
       justify={'between'}