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
index 958530842..026c1de8d 100644
--- 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 ? (
- ) : due_date ? (
+ ) : due_date && !isUserOnlyTrialing ? (