fix nullable fees in BillingPlan

Author: panteliselef

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;

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>

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

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 => ({

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(() => {

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={[

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) {

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

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(() => {

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' && Boolean(plan.annualMonthlyFee) ? 'month' : planPeriod,
         for: subscriberType,
         onSubscriptionComplete: () => {
           revalidateAll();