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 ? (