clients/web: tweak loading status of checkout submit button

polarsource · Jan 24, 2025 · 83be1e9 · 83be1e9
1 parent 5852b53
commit 83be1e9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/clients/apps/web/src/components/Checkout/Checkout.tsx b/clients/apps/web/src/components/Checkout/Checkout.tsx
@@ -16,7 +16,7 @@ import type { CheckoutPublicConfirmed } from '@polar-sh/sdk/models/components/ch
 import type { Stripe, StripeElements } from '@stripe/stripe-js'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/navigation'
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 export interface CheckoutProps {
   embed?: boolean
@@ -38,25 +38,32 @@ const Checkout = ({ embed: _embed, theme: _theme }: CheckoutProps) => {
   const theme = _theme || (resolvedTheme as 'light' | 'dark')
 
   const router = useRouter()
+  const [fullLoading, setFullLoading] = useState(false)
+  const loading = useMemo(
+    () => confirmLoading || fullLoading,
+    [confirmLoading, fullLoading],
+  )
   const [listenFulfillment, fullfillmentLabel] = useCheckoutFulfillmentListener(
     client,
     checkout,
   )
-  const [fullfillmentLoading, setFullfillmentLoading] = useState(false)
-
-  const loading = fullfillmentLoading || confirmLoading
-  const label = fullfillmentLabel || loadingLabel
+  const label = useMemo(
+    () => fullfillmentLabel || loadingLabel,
+    [fullfillmentLabel, loadingLabel],
+  )
 
   const confirm = useCallback(
     async (
       data: CheckoutConfirmStripe,
       stripe: Stripe | null,
       elements: StripeElements | null,
     ) => {
+      setFullLoading(true)
       let confirmedCheckout: CheckoutPublicConfirmed
       try {
         confirmedCheckout = await _confirm(data, stripe, elements)
       } catch (error) {
+        setFullLoading(false)
         throw error
       }
 
@@ -83,9 +90,7 @@ const Checkout = ({ embed: _embed, theme: _theme }: CheckoutProps) => {
       // It ensures the user will have an up-to-date status when they are redirected,
       // especially if the external URL doesn't implement proper webhook handling
       if (!isInternalURL) {
-        setFullfillmentLoading(true)
         await listenFulfillment()
-        setFullfillmentLoading(false)
       }
 
       if (checkout.embedOrigin) {
@@ -100,7 +105,7 @@ const Checkout = ({ embed: _embed, theme: _theme }: CheckoutProps) => {
       }
 
       if (isInternalURL || !embed) {
-        router.push(parsedURL.toString())
+        await router.push(parsedURL.toString())
       }
 
       return confirmedCheckout

diff --git a/clients/packages/checkout/src/providers/CheckoutFormProvider.tsx b/clients/packages/checkout/src/providers/CheckoutFormProvider.tsx
@@ -200,9 +200,8 @@ export const CheckoutFormProvider = ({
           confirmationTokenId: confirmationToken.id,
         })
       } catch (e) {
-        throw e
-      } finally {
         setLoading(false)
+        throw e
       }
 
       setLoadingLabel('Payment successful! Getting your products ready')
@@ -221,6 +220,7 @@ export const CheckoutFormProvider = ({
         }
       }
 
+      setLoading(false)
       return updatedCheckout
     },
     [checkout, setError, _confirm],