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 (