refactor: use new needs_payment_method field

Author: mauricioabreu

packages/clerk-js/src/core/resources/BillingCheckout.ts

@@ -29,6 +29,7 @@ export class BillingCheckout extends BaseResource implements BillingCheckoutReso
   totals!: BillingCheckoutTotals;
   isImmediatePlanChange!: boolean;
   freeTrialEndsAt!: Date | null;
+  needsPaymentMethod!: boolean;
   payer!: BillingPayerResource;
 
   constructor(data: BillingCheckoutJSON) {
@@ -52,6 +53,7 @@ export class BillingCheckout extends BaseResource implements BillingCheckoutReso
     this.totals = billingTotalsFromJSON(data.totals);
     this.isImmediatePlanChange = data.is_immediate_plan_change;
     this.freeTrialEndsAt = data.free_trial_ends_at ? unixEpochToDate(data.free_trial_ends_at) : null;
+    this.needsPaymentMethod = data.needs_payment_method;
     this.payer = new BillingPayer(data.payer);
     return this;
   }

packages/clerk-js/src/core/resources/CommerceSettings.ts

@@ -8,7 +8,6 @@ import { BaseResource } from './internal';
 export class CommerceSettings extends BaseResource implements CommerceSettingsResource {
   billing: CommerceSettingsResource['billing'] = {
     stripePublishableKey: '',
-    freeTrialRequiresPaymentMethod: true,
     organization: {
       enabled: false,
       hasPaidPlans: false,
@@ -30,7 +29,6 @@ export class CommerceSettings extends BaseResource implements CommerceSettingsRe
     }
 
     this.billing.stripePublishableKey = data.billing.stripe_publishable_key || '';
-    this.billing.freeTrialRequiresPaymentMethod = data.billing.free_trial_requires_payment_method ?? true;
     this.billing.organization.enabled = data.billing.organization.enabled || false;
     this.billing.organization.hasPaidPlans = data.billing.organization.has_paid_plans || false;
     this.billing.user.enabled = data.billing.user.enabled || false;
@@ -43,7 +41,6 @@ export class CommerceSettings extends BaseResource implements CommerceSettingsRe
     return {
       billing: {
         stripe_publishable_key: this.billing.stripePublishableKey,
-        free_trial_requires_payment_method: this.billing.freeTrialRequiresPaymentMethod,
         organization: {
           enabled: this.billing.organization.enabled,
           has_paid_plans: this.billing.organization.hasPaidPlans,

packages/clerk-js/src/test/fixture-helpers.ts

@@ -367,19 +367,16 @@ const createBillingSettingsFixtureHelpers = (environment: EnvironmentJSON) => {
     userHasPaidPlans = true,
     organizationEnabled = true,
     organizationHasPaidPlans = true,
-    freeTrialRequiresPaymentMethod = true,
   }: {
     userEnabled?: boolean;
     userHasPaidPlans?: boolean;
     organizationEnabled?: boolean;
     organizationHasPaidPlans?: boolean;
-    freeTrialRequiresPaymentMethod?: boolean;
   } = {}) => {
     os.user.enabled = userEnabled;
     os.user.has_paid_plans = userHasPaidPlans;
     os.organization.enabled = organizationEnabled;
     os.organization.has_paid_plans = organizationHasPaidPlans;
-    os.free_trial_requires_payment_method = freeTrialRequiresPaymentMethod;
   };
 
   return { withBilling };

packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx

@@ -5,7 +5,7 @@ import { Drawer, useDrawerContext } from '@/ui/elements/Drawer';
 import { LineItems } from '@/ui/elements/LineItems';
 import { formatDate } from '@/ui/utils/formatDate';
 
-import { useCheckoutContext, useEnvironment } from '../../contexts';
+import { useCheckoutContext } from '../../contexts';
 import { Box, Button, descriptors, Heading, localizationKeys, Span, Text, useAppearance } from '../../customizables';
 import { transitionDurationValues, transitionTiming } from '../../foundations/transitions';
 import { usePrefersReducedMotion } from '../../hooks';
@@ -161,8 +161,7 @@ export const CheckoutComplete = () => {
   const { setIsOpen } = useDrawerContext();
   const { newSubscriptionRedirectUrl } = useCheckoutContext();
   const { checkout } = useCheckout();
-  const { totals, paymentMethod, planPeriodStart, freeTrialEndsAt } = checkout;
-  const environment = useEnvironment();
+  const { totals, paymentMethod, planPeriodStart, freeTrialEndsAt, needsPaymentMethod } = checkout;
   const [mousePosition, setMousePosition] = useState({ x: 256, y: 256 });
 
   const prefersReducedMotion = usePrefersReducedMotion();
@@ -431,16 +430,14 @@ export const CheckoutComplete = () => {
           <LineItems.Group variant='secondary'>
             <LineItems.Title
               title={
-                totals.totalDueNow.amount > 0 ||
-                (freeTrialEndsAt !== null && environment.commerceSettings.billing.freeTrialRequiresPaymentMethod)
+                totals.totalDueNow.amount > 0 || needsPaymentMethod
                   ? localizationKeys('billing.checkout.lineItems.title__paymentMethod')
                   : localizationKeys('billing.checkout.lineItems.title__subscriptionBegins')
               }
             />
             <LineItems.Description
               text={
-                totals.totalDueNow.amount > 0 ||
-                (freeTrialEndsAt !== null && environment.commerceSettings.billing.freeTrialRequiresPaymentMethod)
+                totals.totalDueNow.amount > 0 || needsPaymentMethod
                   ? paymentMethod
                     ? paymentMethod.paymentType !== 'card'
                       ? `${capitalize(paymentMethod.paymentType)}`

packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

@@ -12,7 +12,7 @@ import { Tooltip } from '@/ui/elements/Tooltip';
 import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
-import { useCheckoutContext, useEnvironment, usePaymentMethods } from '../../contexts';
+import { useCheckoutContext, usePaymentMethods } from '../../contexts';
 import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';
 import { ChevronUpDown, InformationCircle } from '../../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
@@ -219,17 +219,15 @@ const CheckoutFormElements = () => {
 
 const CheckoutFormElementsInternal = () => {
   const { checkout } = useCheckout();
-  const { id, totals, isImmediatePlanChange, freeTrialEndsAt } = checkout;
+  const { id, totals, isImmediatePlanChange, freeTrialEndsAt, needsPaymentMethod } = checkout;
   const { data: paymentMethods } = usePaymentMethods();
-  const environment = useEnvironment();
 
   const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>
     paymentMethods.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',
   );
 
   const isFreeTrial = Boolean(freeTrialEndsAt);
   const showTabs = isImmediatePlanChange && (totals.totalDueNow.amount > 0 || isFreeTrial);
-  const needsPaymentMethod = !(isFreeTrial && !environment.commerceSettings.billing.freeTrialRequiresPaymentMethod);
 
   if (!id) {
     return null;
@@ -427,8 +425,7 @@ const ExistingPaymentMethodForm = withCardStateProvider(
     paymentMethods: BillingPaymentMethodResource[];
   }) => {
     const { checkout } = useCheckout();
-    const { paymentMethod, isImmediatePlanChange, freeTrialEndsAt } = checkout;
-    const environment = useEnvironment();
+    const { paymentMethod, isImmediatePlanChange, needsPaymentMethod } = checkout;
 
     const { payWithExistingPaymentMethod } = useCheckoutMutations();
     const card = useCardState();
@@ -450,10 +447,7 @@ const ExistingPaymentMethodForm = withCardStateProvider(
       });
     }, [paymentMethods]);
 
-    const showPaymentMethods =
-      isImmediatePlanChange &&
-      (totalDueNow.amount > 0 ||
-        (!!freeTrialEndsAt && environment.commerceSettings.billing.freeTrialRequiresPaymentMethod));
+    const showPaymentMethods = isImmediatePlanChange && (totalDueNow.amount > 0 || needsPaymentMethod);
 
     return (
       <Form

packages/types/src/billing.ts

@@ -779,6 +779,10 @@ export interface BillingCheckoutResource extends ClerkResource {
    * Unix timestamp (milliseconds) of when the free trial ends.
    */
   freeTrialEndsAt: Date | null;
+  /**
+   * Whether a payment method is required for this checkout session.
+   */
+  needsPaymentMethod: boolean;
   /**
    * The payer associated with the checkout.
    */

packages/types/src/json.ts

@@ -815,6 +815,7 @@ export interface BillingCheckoutJSON extends ClerkResourceJSON {
   is_immediate_plan_change: boolean;
   // TODO(@COMMERCE): Remove optional after GA.
   free_trial_ends_at: number | null;
+  needs_payment_method: boolean;
   payer: BillingPayerJSON;
 }