fix(clerk-js): Incremental improvements for account funds (#5705)

Author: panteliselef

.changeset/silver-symbols-worry.md

@@ -0,0 +1,9 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Incremental improvements for account funds in checkout.
+
+- Fixes CLS issues when rendering account funds
+- Renames "accounts funds" to "payment sources" for consistency
+- Auto opes the "Add a new payment source" drawer only if no payments sources exist

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

@@ -93,10 +93,6 @@ const CheckoutFormElements = ({
   const { __experimental_commerce } = useClerk();
   const { organization } = useOrganization();
   const { subscriberType } = useCheckoutContext();
-  const [openAccountFundsDropDown, setOpenAccountFundsDropDown] = useState(true);
-  const [openAddNewSourceDropDown, setOpenAddNewSourceDropDown] = useState(true);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitError, setSubmitError] = useState<ClerkRuntimeError | ClerkAPIError | string | undefined>();
 
   const { data } = useFetch(
     __experimental_commerce?.getPaymentSources,
@@ -106,6 +102,12 @@ const CheckoutFormElements = ({
     undefined,
     'commerce-payment-sources',
   );
+
+  const [openAccountFundsDropDown, setOpenAccountFundsDropDown] = useState(true);
+  const [openAddNewSourceDropDown, setOpenAddNewSourceDropDown] = useState((data?.data.length || 0) === 0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<ClerkRuntimeError | ClerkAPIError | string | undefined>();
+
   const { data: paymentSources } = data || { data: [] };
 
   const confirmCheckout = async ({ paymentSourceId }: { paymentSourceId: string }) => {
@@ -160,7 +162,7 @@ const CheckoutFormElements = ({
             onOpenChange={setOpenAccountFundsDropDown}
           >
             {/* TODO(@Commerce): needs localization */}
-            <Disclosure.Trigger text='Account Funds' />
+            <Disclosure.Trigger text='Payment Sources' />
             <Disclosure.Content>
               <Col gap={3}>
                 <PaymentSourceMethods
@@ -181,8 +183,9 @@ const CheckoutFormElements = ({
         open={openAddNewSourceDropDown}
         onOpenChange={setOpenAddNewSourceDropDown}
       >
-        {/* TODO(@Commerce): needs localization */}
-        <Disclosure.Trigger text='Add a New Payment Source' />
+        <Disclosure.Trigger
+          text={localizationKeys('userProfile.__experimental_billingPage.paymentSourcesSection.add')}
+        />
         <Disclosure.Content>
           <__experimental_PaymentSourcesContext.Provider value={{ componentName: 'PaymentSources', subscriberType }}>
             <AddPaymentSource

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

@@ -1,4 +1,4 @@
-import { useClerk } from '@clerk/shared/react';
+import { useClerk, useOrganization } from '@clerk/shared/react';
 import type {
   __experimental_CommercePlanResource,
   __experimental_CommerceSubscriptionPlanPeriod,
@@ -7,13 +7,15 @@ import type {
 import { useState } from 'react';
 
 import { usePlansContext, usePricingTableContext } from '../../contexts';
+import { useFetch } from '../../hooks/useFetch';
 import { PricingTableDefault } from './PricingTableDefault';
 import { PricingTableMatrix } from './PricingTableMatrix';
 
 const PricingTable = (props: __experimental_PricingTableProps) => {
   const clerk = useClerk();
-  const { mode = 'mounted' } = usePricingTableContext();
+  const { mode = 'mounted', subscriberType } = usePricingTableContext();
   const isCompact = mode === 'modal';
+  const { organization } = useOrganization();
 
   const { plans, handleSelectPlan } = usePlansContext();
 
@@ -27,6 +29,17 @@ const PricingTable = (props: __experimental_PricingTableProps) => {
     handleSelectPlan({ mode, plan, planPeriod });
   };
 
+  const { __experimental_commerce } = useClerk();
+
+  useFetch(
+    __experimental_commerce?.getPaymentSources,
+    {
+      ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
+    },
+    undefined,
+    'commerce-payment-sources',
+  );
+
   return (
     <>
       {mode !== 'modal' && props.layout === 'matrix' ? (