From 247f2195ecaca9f5b6b8f1b544f5ff18229169eb Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 24 Apr 2025 13:08:00 +0300
Subject: [PATCH 1/2] fix(clerk-js): Incremental improvements for account funds

- 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
---
 .changeset/silver-symbols-worry.md              |  9 +++++++++
 .../src/ui/components/Checkout/CheckoutForm.tsx | 17 ++++++++++-------
 .../ui/components/PricingTable/PricingTable.tsx | 17 +++++++++++++++--
 3 files changed, 34 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/silver-symbols-worry.md

diff --git a/.changeset/silver-symbols-worry.md b/.changeset/silver-symbols-worry.md
new file mode 100644
index 00000000000..993e2e4feaa
--- /dev/null
+++ b/.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
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 03478bd8ecf..20327b399d5 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/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
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx
index e17463f8ec2..32c45757053 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx
+++ b/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,
@@ -9,11 +9,13 @@ import { useState } from 'react';
 import { usePlansContext, usePricingTableContext } from '../../contexts';
 import { PricingTableDefault } from './PricingTableDefault';
 import { PricingTableMatrix } from './PricingTableMatrix';
+import { useFetch } from '../../hooks/useFetch';
 
 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' ? (

From 1bf7a4fdd45b5ea12014137b3734c2dd8ac7e873 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Thu, 24 Apr 2025 13:23:53 +0300
Subject: [PATCH 2/2] fix auto imports

---
 .../clerk-js/src/ui/components/PricingTable/PricingTable.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx
index 32c45757053..dcdbd18c13d 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx
@@ -7,9 +7,9 @@ import type {
 import { useState } from 'react';
 
 import { usePlansContext, usePricingTableContext } from '../../contexts';
+import { useFetch } from '../../hooks/useFetch';
 import { PricingTableDefault } from './PricingTableDefault';
 import { PricingTableMatrix } from './PricingTableMatrix';
-import { useFetch } from '../../hooks/useFetch';
 
 const PricingTable = (props: __experimental_PricingTableProps) => {
   const clerk = useClerk();