fix(clerk-js): Hide payment selection if checkout results to downgrade (#6786)

Author: panteliselef

.changeset/slick-paths-write.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Hide payment methods from checkout if the new subscription does not result in an immediate change to the end user's plan.

packages/clerk-js/bundlewatch.config.json

@@ -23,7 +23,7 @@
     { "path": "./dist/waitlist*.js", "maxSize": "1.5KB" },
     { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
-    { "path": "./dist/checkout*.js", "maxSize": "8.75KB" },
+    { "path": "./dist/checkout*.js", "maxSize": "8.77KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/up-plans-page*.js", "maxSize": "1.0KB" },

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

@@ -13,7 +13,7 @@ import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
 import { useCheckoutContext, usePaymentMethods } from '../../contexts';
-import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Text } from '../../customizables';
+import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';
 import { ChevronUpDown, InformationCircle } from '../../icons';
 import * as AddPaymentSource from '../PaymentSources/AddPaymentSource';
 import { PaymentSourceRow } from '../PaymentSources/PaymentSourceRow';
@@ -187,13 +187,38 @@ const useCheckoutMutations = () => {
 
 const CheckoutFormElements = () => {
   const { checkout } = useCheckout();
-  const { id, totals, freeTrialEndsAt } = checkout;
+  const { id } = checkout;
+
+  const { isLoading } = usePaymentMethods();
+
+  if (!id) {
+    return null;
+  }
+
+  if (isLoading) {
+    return (
+      <Spinner
+        sx={{
+          margin: 'auto',
+        }}
+      />
+    );
+  }
+
+  return <CheckoutFormElementsInternal />;
+};
+
+const CheckoutFormElementsInternal = () => {
+  const { checkout } = useCheckout();
+  const { id, totals, isImmediatePlanChange, freeTrialEndsAt } = checkout;
   const { data: paymentSources } = usePaymentMethods();
 
   const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>
     paymentSources.length > 0 || __BUILD_DISABLE_RHC__ ? 'existing' : 'new',
   );
 
+  const showPaymentMethods = isImmediatePlanChange && (totals.totalDueNow.amount > 0 || !!freeTrialEndsAt);
+
   if (!id) {
     return null;
   }
@@ -206,8 +231,7 @@ const CheckoutFormElements = () => {
     >
       {__BUILD_DISABLE_RHC__ ? null : (
         <>
-          {/* only show if there are payment sources and there is a total due now */}
-          {paymentSources.length > 0 && (totals.totalDueNow.amount > 0 || !!freeTrialEndsAt) && (
+          {paymentSources.length > 0 && showPaymentMethods && (
             <SegmentedControl.Root
               aria-label='Payment method source'
               value={paymentMethodSource}
@@ -347,7 +371,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
   }) => {
     const submitLabel = useSubmitLabel();
     const { checkout } = useCheckout();
-    const { paymentSource, freeTrialEndsAt } = checkout;
+    const { paymentSource, isImmediatePlanChange, freeTrialEndsAt } = checkout;
 
     const { payWithExistingPaymentSource } = useCheckoutMutations();
     const card = useCardState();
@@ -369,7 +393,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
       });
     }, [paymentSources]);
 
-    const shouldDefaultBeUsed = totalDueNow.amount === 0 || !freeTrialEndsAt;
+    const showPaymentMethods = isImmediatePlanChange && (totalDueNow.amount > 0 || !!freeTrialEndsAt);
 
     return (
       <Form
@@ -380,7 +404,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
           rowGap: t.space.$4,
         })}
       >
-        {shouldDefaultBeUsed ? (
+        {showPaymentMethods ? (
           <Select
             elementId='paymentSource'
             options={options}