fix nullable fees in BillingPlan

panteliselef · panteliselef · commit 38b1d42ba4fb · 2025-10-29T23:02:53.000+02:00
diff --git a/packages/clerk-js/src/core/resources/BillingPlan.ts b/packages/clerk-js/src/core/resources/BillingPlan.ts
@@ -8,8 +8,8 @@ export class BillingPlan extends BaseResource implements BillingPlanResource {
   id!: string;
   name!: string;
   fee!: BillingMoneyAmount;
-  annualFee!: BillingMoneyAmount;
-  annualMonthlyFee!: BillingMoneyAmount;
+  annualFee: BillingMoneyAmount | null = null;
+  annualMonthlyFee: BillingMoneyAmount | null = null;
   description!: string;
   isDefault!: boolean;
   isRecurring!: boolean;
@@ -32,11 +32,17 @@ export class BillingPlan extends BaseResource implements BillingPlanResource {
       return this;
     }
 
+    console.log('data', {
+      fee: data.fee,
+      annual_fee: data.annual_fee,
+      annual_monthly_fee: data.annual_monthly_fee,
+    });
+
     this.id = data.id;
     this.name = data.name;
     this.fee = billingMoneyAmountFromJSON(data.fee);
-    this.annualFee = billingMoneyAmountFromJSON(data.annual_fee);
-    this.annualMonthlyFee = billingMoneyAmountFromJSON(data.annual_monthly_fee);
+    this.annualFee = data.annual_fee ? billingMoneyAmountFromJSON(data.annual_fee) : null;
+    this.annualMonthlyFee = data.annual_monthly_fee ? billingMoneyAmountFromJSON(data.annual_monthly_fee) : null;
     this.description = data.description;
     this.isDefault = data.is_default;
     this.isRecurring = data.is_recurring;
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -39,7 +39,11 @@ export const CheckoutForm = withCardStateProvider(() => {
   const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;
   const showDowngradeInfo = !isImmediatePlanChange;
 
-  const fee = planPeriod === 'month' ? plan.fee : plan.annualMonthlyFee;
+  const fee =
+    planPeriod === 'month'
+      ? plan.fee
+      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        plan.annualMonthlyFee!;
 
   return (
     <Drawer.Body>
diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -215,7 +215,10 @@ function PaymentAttemptBody({ subscriptionItem }: { subscriptionItem: BillingSub
   }
 
   const fee =
-    subscriptionItem.planPeriod === 'month' ? subscriptionItem.plan.fee : subscriptionItem.plan.annualMonthlyFee;
+    subscriptionItem.planPeriod === 'month'
+      ? subscriptionItem.plan.fee
+      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        subscriptionItem.plan.annualMonthlyFee!;
 
   return (
     <Box
diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
@@ -227,7 +227,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
   const { plan, closeSlot, planPeriod, setPlanPeriod } = props;
 
   const fee = useMemo(() => {
-    if (plan.annualMonthlyFee.amount <= 0) {
+    if (!plan.annualMonthlyFee) {
       return plan.fee;
     }
     return planPeriod === 'annual' ? plan.annualMonthlyFee : plan.fee;
@@ -333,7 +333,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
         </>
       </Flex>
 
-      {plan.annualMonthlyFee.amount > 0 ? (
+      {plan.annualMonthlyFee ? (
         <Box
           elementDescriptor={descriptors.planDetailPeriodToggle}
           sx={t => ({
diff --git a/packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx b/packages/clerk-js/src/ui/components/Plans/__tests__/PlanDetails.test.tsx
@@ -221,18 +221,8 @@ describe('PlanDetails', () => {
         currencySymbol: '$',
         currency: 'USD',
       },
-      annualFee: {
-        amount: 0,
-        amountFormatted: '0.00',
-        currencySymbol: '$',
-        currency: 'USD',
-      },
-      annualMonthlyFee: {
-        amount: 0,
-        amountFormatted: '0.00',
-        currencySymbol: '$',
-        currency: 'USD',
-      },
+      annualFee: null,
+      annualMonthlyFee: null,
     };
 
     const { wrapper } = await createFixtures(f => {
@@ -265,18 +255,8 @@ describe('PlanDetails', () => {
         currencySymbol: '$',
         currency: 'USD',
       },
-      annualFee: {
-        amount: 0,
-        amountFormatted: '0.00',
-        currencySymbol: '$',
-        currency: 'USD',
-      },
-      annualMonthlyFee: {
-        amount: 0,
-        amountFormatted: '0.00',
-        currencySymbol: '$',
-        currency: 'USD',
-      },
+      annualFee: null,
+      annualMonthlyFee: null,
       isDefault: true,
     };
 
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -282,13 +282,17 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
   const { plan, isCompact, planPeriod, setPlanPeriod, badge } = props;
   const { name, annualMonthlyFee } = plan;
 
-  const planSupportsAnnual = annualMonthlyFee.amount > 0;
+  const planSupportsAnnual = Boolean(annualMonthlyFee);
 
   const fee = React.useMemo(() => {
     if (!planSupportsAnnual) {
       return plan.fee;
     }
-    return planPeriod === 'annual' ? plan.annualMonthlyFee : plan.fee;
+
+    return planPeriod === 'annual'
+      ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        plan.annualMonthlyFee!
+      : plan.fee;
   }, [planSupportsAnnual, planPeriod, plan.fee, plan.annualMonthlyFee]);
 
   const feeFormatted = React.useMemo(() => {
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx
@@ -60,7 +60,7 @@ export function PricingTableMatrix({
 
   const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);
 
-  const renderBillingCycleControls = React.useMemo(() => plans.some(plan => plan.annualMonthlyFee.amount > 0), [plans]);
+  const renderBillingCycleControls = React.useMemo(() => plans.some(plan => Boolean(plan.annualMonthlyFee)), [plans]);
 
   const getAllFeatures = React.useMemo(() => {
     const featuresSet = new Set<string>();
@@ -156,12 +156,11 @@ export function PricingTableMatrix({
               </Box>
               {plans.map(plan => {
                 const highlight = plan.slug === highlightedPlan;
-                const planFee =
-                  plan.annualMonthlyFee.amount <= 0
-                    ? plan.fee
-                    : planPeriod === 'annual'
-                      ? plan.annualMonthlyFee
-                      : plan.fee;
+                const planFee = !plan.annualMonthlyFee
+                  ? plan.fee
+                  : planPeriod === 'annual'
+                    ? plan.annualMonthlyFee
+                    : plan.fee;
 
                 return (
                   <Box
@@ -253,7 +252,7 @@ export function PricingTableMatrix({
                               })}
                               localizationKey={localizationKeys('billing.month')}
                             />
-                            {plan.annualMonthlyFee.amount > 0 ? (
+                            {plan.annualMonthlyFee ? (
                               <Box
                                 elementDescriptor={descriptors.pricingTableMatrixFeePeriodNotice}
                                 sx={[
diff --git a/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts b/packages/clerk-js/src/ui/components/PricingTable/utils/pricing-footer-state.ts
@@ -34,7 +34,7 @@ const valueResolution = (params: UsePricingFooterStateParams): [boolean, boolean
   // Active subscription
   if (subscription.status === 'active') {
     const isCanceled = !!subscription.canceledAt;
-    const isSwitchingPaidPeriod = planPeriod !== subscription.planPeriod && plan.annualMonthlyFee.amount > 0;
+    const isSwitchingPaidPeriod = planPeriod !== subscription.planPeriod && Boolean(plan.annualMonthlyFee);
     const isActiveFreeTrial = plan.freeTrialEnabled && subscription.isFreeTrial;
 
     if (isCanceled || isSwitchingPaidPeriod) {
diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx b/packages/clerk-js/src/ui/components/SubscriptionDetails/__tests__/SubscriptionDetails.test.tsx
@@ -262,18 +262,8 @@ describe('SubscriptionDetails', () => {
               currencySymbol: '$',
               currency: 'USD',
             },
-            annualFee: {
-              amount: 0,
-              amountFormatted: '0.00',
-              currencySymbol: '$',
-              currency: 'USD',
-            },
-            annualMonthlyFee: {
-              amount: 0,
-              amountFormatted: '0.00',
-              currencySymbol: '$',
-              currency: 'USD',
-            },
+            annualFee: null,
+            annualMonthlyFee: null,
             description: 'Free Plan description',
             hasBaseFee: false,
             isRecurring: true,
diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
@@ -374,7 +374,7 @@ const SubscriptionCardActions = ({ subscription }: { subscription: BillingSubscr
   const canManageBilling = subscriberType === 'user' || canOrgManageBilling;
 
   const isSwitchable =
-    ((subscription.planPeriod === 'month' && subscription.plan.annualMonthlyFee.amount > 0) ||
+    ((subscription.planPeriod === 'month' && Boolean(subscription.plan.annualMonthlyFee)) ||
       subscription.planPeriod === 'annual') &&
     subscription.status !== 'past_due';
   const isFree = isFreePlan(subscription.plan);
@@ -409,8 +409,10 @@ const SubscriptionCardActions = ({ subscription }: { subscription: BillingSubscr
             label:
               subscription.planPeriod === 'month'
                 ? localizationKeys('billing.switchToAnnualWithAnnualPrice', {
-                    price: normalizeFormatted(subscription.plan.annualFee.amountFormatted),
-                    currency: subscription.plan.annualFee.currencySymbol,
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    price: normalizeFormatted(subscription.plan.annualFee!.amountFormatted),
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    currency: subscription.plan.annualFee!.currencySymbol,
                   })
                 : localizationKeys('billing.switchToMonthlyWithPrice', {
                     price: normalizeFormatted(subscription.plan.fee.amountFormatted),
@@ -480,7 +482,11 @@ const SubscriptionCardActions = ({ subscription }: { subscription: BillingSubscr
 const SubscriptionCard = ({ subscription }: { subscription: BillingSubscriptionItemResource }) => {
   const { t } = useLocalizations();
 
-  const fee = subscription.planPeriod === 'month' ? subscription.plan.fee : subscription.plan.annualFee;
+  const fee =
+    subscription.planPeriod === 'month'
+      ? subscription.plan.fee
+      : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        subscription.plan.annualFee!;
 
   return (
     <Col
diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
@@ -153,7 +153,8 @@ export function SubscriptionsList({
 }
 
 function SubscriptionRow({ subscription, length }: { subscription: BillingSubscriptionItemResource; length: number }) {
-  const fee = subscription.planPeriod === 'annual' ? subscription.plan.annualFee : subscription.plan.fee;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const fee = subscription.planPeriod === 'annual' ? subscription.plan.annualFee! : subscription.plan.fee;
   const { captionForSubscription } = usePlansContext();
 
   const feeFormatted = useMemo(() => {
diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -213,7 +213,7 @@ export const usePlansContext = () => {
       const subscription =
         sub ?? (plan ? activeOrUpcomingSubscriptionWithPlanPeriod(plan, selectedPlanPeriod) : undefined);
       let _selectedPlanPeriod = selectedPlanPeriod;
-      const isEligibleForSwitchToAnnual = (plan?.annualMonthlyFee.amount ?? 0) > 0;
+      const isEligibleForSwitchToAnnual = Boolean(plan?.annualMonthlyFee);
 
       if (_selectedPlanPeriod === 'annual' && !isEligibleForSwitchToAnnual) {
         _selectedPlanPeriod = 'month';
@@ -326,7 +326,7 @@ export const usePlansContext = () => {
       clerk.__internal_openCheckout({
         planId: plan.id,
         // if the plan doesn't support annual, use monthly
-        planPeriod: planPeriod === 'annual' && plan.annualMonthlyFee.amount === 0 ? 'month' : planPeriod,
+        planPeriod: planPeriod === 'annual' && !plan.annualMonthlyFee ? 'month' : planPeriod,
         for: subscriberType,
         onSubscriptionComplete: () => {
           revalidateAll();
diff --git a/packages/types/src/billing.ts b/packages/types/src/billing.ts
@@ -131,13 +131,13 @@ export interface BillingPlanResource extends ClerkResource {
    */
   fee: BillingMoneyAmount;
   /**
-   * The annual price of the plan.
+   * The annual price of the plan or `null` if the plan is not annual.
    */
-  annualFee: BillingMoneyAmount;
+  annualFee: BillingMoneyAmount | null;
   /**
-   * The effective monthly price when billed annually.
+   * The effective monthly price when billed annually or `null` if the plan is not annual.
    */
-  annualMonthlyFee: BillingMoneyAmount;
+  annualMonthlyFee: BillingMoneyAmount | null;
   /**
    * A short description of what the plan offers.
    */
diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts
@@ -634,8 +634,8 @@ export interface BillingPlanJSON extends ClerkResourceJSON {
   id: string;
   name: string;
   fee: BillingMoneyAmountJSON;
-  annual_fee: BillingMoneyAmountJSON;
-  annual_monthly_fee: BillingMoneyAmountJSON;
+  annual_fee: BillingMoneyAmountJSON | null;
+  annual_monthly_fee: BillingMoneyAmountJSON | null;
   amount: number;
   amount_formatted: string;
   annual_amount: number;
