diff --git a/apps/webapp/app/components/billing/PricingTiers.tsx b/apps/webapp/app/components/billing/PricingTiers.tsx index d13cf6351..4f055c413 100644 --- a/apps/webapp/app/components/billing/PricingTiers.tsx +++ b/apps/webapp/app/components/billing/PricingTiers.tsx @@ -2,7 +2,7 @@ import { useForm } from "@conform-to/react"; import { parse } from "@conform-to/zod"; import { CheckIcon, XMarkIcon } from "@heroicons/react/24/solid"; import { Form, useActionData, useNavigation } from "@remix-run/react"; -import { Plan, Plans, SetPlanBodySchema } from "@trigger.dev/billing"; +import { ActiveSubscription, Plan, Plans, SetPlanBodySchema } from "@trigger.dev/billing"; import { cn } from "~/utils/cn"; import { DefinitionTip } from "../DefinitionTooltip"; import { Button } from "../primitives/Buttons"; @@ -49,6 +49,13 @@ export function PricingTiers({ plans: Plans; className?: string; }) { + const currentPlan = useCurrentPlan(); + //if they've canceled, we set the subscription to undefined so they can re-upgrade + let currentSubscription = currentPlan?.subscription; + if (currentPlan?.subscription?.canceledAt) { + currentSubscription = undefined; + } + return (
- - + +
); @@ -67,10 +84,12 @@ export function TierFree({ plan, organizationSlug, showActionText, + currentSubscription, }: { plan: Plan; organizationSlug: string; showActionText: boolean; + currentSubscription?: ActiveSubscription; }) { const lastSubmission = useActionData(); const [form] = useForm({ @@ -85,10 +104,8 @@ export function TierFree({ const navigation = useNavigation(); const isLoading = navigation.state === "submitting" || navigation.state === "loading"; - const currentPlan = useCurrentPlan(); const isCurrentPlan = - currentPlan?.subscription?.isPaying === undefined || - currentPlan?.subscription?.isPaying === false; + currentSubscription?.isPaying === undefined || currentSubscription?.isPaying === false; let actionText = "Select plan"; @@ -177,10 +194,12 @@ export function TierPro({ plan, organizationSlug, showActionText, + currentSubscription, }: { plan: Plan; organizationSlug: string; showActionText: boolean; + currentSubscription?: ActiveSubscription; }) { const lastSubmission = useActionData(); const [form] = useForm({ @@ -195,8 +214,7 @@ export function TierPro({ const navigation = useNavigation(); const isLoading = navigation.state === "submitting" || navigation.state === "loading"; - const currentPlan = useCurrentPlan(); - const currentConcurrencyTier = currentPlan?.subscription?.plan.concurrentRuns.pricing?.code; + const currentConcurrencyTier = currentSubscription?.plan.concurrentRuns.pricing?.code; const [concurrentBracketCode, setConcurrentBracketCode] = useState( currentConcurrencyTier ?? plan.concurrentRuns?.pricing?.tiers[0].code );