diff --git a/.changeset/bright-brooms-rule.md b/.changeset/bright-brooms-rule.md new file mode 100644 index 00000000000..baa907ea536 --- /dev/null +++ b/.changeset/bright-brooms-rule.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Fix issue where free plans had a monthly/annual toggle. diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx index ba5bde2d969..a715d8e7d31 100644 --- a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx +++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx @@ -325,7 +325,7 @@ const Header = React.forwardRef((props, ref) => { - {plan.annualMonthlyFee ? ( + {plan.annualMonthlyFee && !plan.isDefault ? ( ({ diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx index 879ed453c3c..2657b215faa 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx @@ -381,7 +381,7 @@ const CardHeader = React.forwardRef((props, ref ) : null} - {planSupportsAnnual && setPlanPeriod ? ( + {planSupportsAnnual && !plan.isDefault && setPlanPeriod ? ( ({ diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx index 834b37fdb06..582028125f2 100644 --- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx +++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx @@ -215,7 +215,7 @@ export const usePlansContext = () => { const subscription = sub ?? (plan ? activeOrUpcomingSubscriptionWithPlanPeriod(plan, selectedPlanPeriod) : undefined); let _selectedPlanPeriod = selectedPlanPeriod; - const isEligibleForSwitchToAnnual = Boolean(plan?.annualMonthlyFee); + const isEligibleForSwitchToAnnual = Boolean(plan?.annualMonthlyFee && !plan.isDefault); if (_selectedPlanPeriod === 'annual' && !isEligibleForSwitchToAnnual) { _selectedPlanPeriod = 'month';