fix(clerk-js): Only render toggle if plan is not the default plan (#8031)

Author: dstaley

.changeset/bright-brooms-rule.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix issue where free plans had a monthly/annual toggle.

packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx

@@ -325,7 +325,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
         </>
       </Flex>
 
-      {plan.annualMonthlyFee ? (
+      {plan.annualMonthlyFee && !plan.isDefault ? (
         <Box
           elementDescriptor={descriptors.planDetailPeriodToggle}
           sx={t => ({

packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx

@@ -381,7 +381,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
         ) : null}
       </Flex>
 
-      {planSupportsAnnual && setPlanPeriod ? (
+      {planSupportsAnnual && !plan.isDefault && setPlanPeriod ? (
         <Box
           elementDescriptor={descriptors.pricingTableCardPeriodToggle}
           sx={t => ({

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';