diff --git a/app/settings/components/billing/plans.tsx b/app/settings/components/billing/plans.tsx index aa3ed15..a576fb3 100644 --- a/app/settings/components/billing/plans.tsx +++ b/app/settings/components/billing/plans.tsx @@ -5,17 +5,15 @@ import clsx from "clsx"; import useSubscription from "../../hooks/use-subscription"; export default function Plans() { - const { subscription, subscribe, changePlan } = useSubscription(); - const hasSubscription = Boolean(subscription); + const { hasActiveSubscription, subscription, subscribe, changePlan } = useSubscription(); return (
{pricing.tiers.map((tier) => { - const isCurrentTier = - !subscription?.paddlePlanId && tier.planId === -1 - ? true - : subscription?.paddlePlanId === tier.planId; - const cta = isCurrentTier ? "Current plan" : !!subscription ? `Switch to ${tier.title}` : "Subscribe"; + const isFreeTier = tier.planId === -1; + const isCurrentTier = subscription?.paddlePlanId === tier.planId; + const isActiveTier = (!hasActiveSubscription && isFreeTier) || (hasActiveSubscription && isCurrentTier); + const cta = isActiveTier ? "Current plan" : !!subscription ? `Switch to ${tier.title}` : "Subscribe"; return (