From 51585849554b1445211a29b00e76b133ac891ce9 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Tue, 5 Nov 2024 20:10:10 +0900
Subject: [PATCH] fix: checkout loading button (#1445)

---
 .../app/(dashboard)/settings/billing/billing-plans.tsx   | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx b/apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx
index 6d4b350dd..537a0c97b 100644
--- a/apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx
@@ -44,11 +44,11 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
   const isMounted = useIsMounted();
 
   const [interval, setInterval] = useState<Interval>('month');
-  const [isFetchingCheckoutSession, setIsFetchingCheckoutSession] = useState(false);
+  const [checkoutSessionPriceId, setCheckoutSessionPriceId] = useState<string | null>(null);
 
   const onSubscribeClick = async (priceId: string) => {
     try {
-      setIsFetchingCheckoutSession(true);
+      setCheckoutSessionPriceId(priceId);
 
       const url = await createCheckout({ priceId });
 
@@ -64,7 +64,7 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
         variant: 'destructive',
       });
     } finally {
-      setIsFetchingCheckoutSession(false);
+      setCheckoutSessionPriceId(null);
     }
   };
 
@@ -122,7 +122,8 @@ export const BillingPlans = ({ prices }: BillingPlansProps) => {
 
                 <Button
                   className="mt-4"
-                  loading={isFetchingCheckoutSession}
+                  disabled={checkoutSessionPriceId !== null}
+                  loading={checkoutSessionPriceId === price.id}
                   onClick={() => void onSubscribeClick(price.id)}
                 >
                   <Trans>Subscribe</Trans>