Add confirmation dialog to auto top-up if it would place a charge immediately

jahooma · jahooma · commit 18a91b4071b5 · 2026-02-25T11:14:22.000-08:00
diff --git a/web/src/app/payment-success/page.tsx b/web/src/app/payment-success/page.tsx
@@ -28,11 +28,11 @@ function PaymentSuccessContent() {
   } = useAutoTopup()
 
   const enableMinimumAutoTopup = async () => {
-    const { MIN_THRESHOLD_CREDITS, DEFAULT_TOPUP_DOLLARS } =
+    const { DEFAULT_THRESHOLD_CREDITS, DEFAULT_TOPUP_DOLLARS } =
       AUTO_TOPUP_CONSTANTS
 
     await handleToggleAutoTopup(true)
-    handleThresholdChange(MIN_THRESHOLD_CREDITS)
+    handleThresholdChange(DEFAULT_THRESHOLD_CREDITS)
     handleTopUpAmountChange(DEFAULT_TOPUP_DOLLARS)
   }
 
diff --git a/web/src/components/auto-topup/AutoTopupSettings.tsx b/web/src/components/auto-topup/AutoTopupSettings.tsx
@@ -2,6 +2,7 @@ import { AutoTopupSettingsForm } from './AutoTopupSettingsForm'
 import { AutoTopupSwitch } from './AutoTopupSwitch'
 import { BaseAutoTopupSettings } from './BaseAutoTopupSettings'
 
+import { ConfirmationDialog } from '@/components/ui/confirmation-dialog'
 import { useAutoTopup } from '@/hooks/use-auto-topup'
 
 export function AutoTopupSettings() {
@@ -15,31 +16,45 @@ export function AutoTopupSettings() {
     handleToggleAutoTopup,
     handleThresholdChange,
     handleTopUpAmountChange,
+    showConfirmDialog,
+    confirmDialogBalance,
+    confirmEnableAutoTopup,
+    cancelEnableAutoTopup,
   } = useAutoTopup()
 
   return (
-    <BaseAutoTopupSettings
-      isLoading={isLoadingProfile}
-      switchComponent={
-        <AutoTopupSwitch
-          isEnabled={isEnabled}
-          onToggle={handleToggleAutoTopup}
-          isPending={isPending}
-          autoTopupBlockedReason={
-            userProfile?.auto_topup_blocked_reason ?? null
-          }
-        />
-      }
-      formComponent={
-        <AutoTopupSettingsForm
-          isEnabled={isEnabled}
-          threshold={threshold}
-          topUpAmountDollars={topUpAmountDollars}
-          onThresholdChange={handleThresholdChange}
-          onTopUpAmountChange={handleTopUpAmountChange}
-          isPending={isPending}
-        />
-      }
-    />
+    <>
+      <BaseAutoTopupSettings
+        isLoading={isLoadingProfile}
+        switchComponent={
+          <AutoTopupSwitch
+            isEnabled={isEnabled}
+            onToggle={handleToggleAutoTopup}
+            isPending={isPending}
+            autoTopupBlockedReason={
+              userProfile?.auto_topup_blocked_reason ?? null
+            }
+          />
+        }
+        formComponent={
+          <AutoTopupSettingsForm
+            isEnabled={isEnabled}
+            threshold={threshold}
+            topUpAmountDollars={topUpAmountDollars}
+            onThresholdChange={handleThresholdChange}
+            onTopUpAmountChange={handleTopUpAmountChange}
+            isPending={isPending}
+          />
+        }
+      />
+      <ConfirmationDialog
+        isOpen={showConfirmDialog}
+        onClose={cancelEnableAutoTopup}
+        onConfirm={confirmEnableAutoTopup}
+        title="Enable Auto Top-up?"
+        description={`Your current balance (${(confirmDialogBalance ?? 0).toLocaleString()} credits) is below your threshold (${threshold.toLocaleString()} credits). Enabling auto top-up will charge your payment method ~$${topUpAmountDollars.toFixed(2)} on your next usage.`}
+        confirmText="Enable Anyway"
+      />
+    </>
   )
 }
diff --git a/web/src/components/auto-topup/constants.ts b/web/src/components/auto-topup/constants.ts
@@ -1,6 +1,7 @@
 export const AUTO_TOPUP_CONSTANTS = {
   MIN_THRESHOLD_CREDITS: 150,
-  MAX_THRESHOLD_CREDITS: 1000,
+  DEFAULT_THRESHOLD_CREDITS: 500,
+  MAX_THRESHOLD_CREDITS: 5000,
   MIN_TOPUP_DOLLARS: 10.0,
   DEFAULT_TOPUP_DOLLARS: 20.0,
   MAX_TOPUP_DOLLARS: 100.0,
diff --git a/web/src/components/auto-topup/types.ts b/web/src/components/auto-topup/types.ts
@@ -10,6 +10,10 @@ export interface AutoTopupState {
   handleToggleAutoTopup: (checked: boolean) => void
   handleThresholdChange: (value: number) => void
   handleTopUpAmountChange: (value: number) => void
+  showConfirmDialog: boolean
+  confirmDialogBalance: number | null
+  confirmEnableAutoTopup: () => void
+  cancelEnableAutoTopup: () => void
 }
 
 export interface AutoTopupSwitchProps {
diff --git a/web/src/hooks/use-auto-topup.ts b/web/src/hooks/use-auto-topup.ts
@@ -10,8 +10,16 @@ import { AUTO_TOPUP_CONSTANTS } from '@/components/auto-topup/constants'
 import { toast } from '@/components/ui/use-toast'
 import { clamp } from '@/lib/utils'
 
+async function fetchCurrentBalance(): Promise<number> {
+  const response = await fetch('/api/user/usage')
+  if (!response.ok) throw new Error('Failed to fetch balance')
+  const data = await response.json()
+  return data.balance?.totalRemaining ?? 0
+}
+
 const {
   MIN_THRESHOLD_CREDITS,
+  DEFAULT_THRESHOLD_CREDITS,
   MAX_THRESHOLD_CREDITS,
   MIN_TOPUP_DOLLARS,
   DEFAULT_TOPUP_DOLLARS,
@@ -22,14 +30,19 @@ const {
 export function useAutoTopup(): AutoTopupState {
   const queryClient = useQueryClient()
   const [isEnabled, setIsEnabled] = useState(false)
-  const [threshold, setThreshold] = useState<number>(MIN_THRESHOLD_CREDITS)
+  const [threshold, setThreshold] = useState<number>(DEFAULT_THRESHOLD_CREDITS)
   const [topUpAmountDollars, setTopUpAmountDollars] =
     useState<number>(DEFAULT_TOPUP_DOLLARS)
   const isInitialLoad = useRef(true)
   const pendingSettings = useRef<{
     threshold: number
     topUpAmountDollars: number
   } | null>(null)
+  const [isCheckingBalance, setIsCheckingBalance] = useState(false)
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false)
+  const [confirmDialogBalance, setConfirmDialogBalance] = useState<
+    number | null
+  >(null)
 
   const { data: userProfile, isLoading: isLoadingProfile } = useQuery<
     UserProfile & { initialTopUpDollars?: number }
@@ -40,7 +53,7 @@ export function useAutoTopup(): AutoTopupState {
       if (!response.ok) throw new Error('Failed to fetch profile')
       const data = await response.json()
       const thresholdCredits =
-        data.auto_topup_threshold ?? MIN_THRESHOLD_CREDITS
+        data.auto_topup_threshold ?? DEFAULT_THRESHOLD_CREDITS
       const topUpAmount = data.auto_topup_amount ?? DEFAULT_TOPUP_DOLLARS * 100
       const topUpDollars = topUpAmount / 100
 
@@ -75,7 +88,7 @@ export function useAutoTopup(): AutoTopupState {
   useEffect(() => {
     if (userProfile) {
       setIsEnabled(userProfile.auto_topup_enabled ?? false)
-      setThreshold(userProfile.auto_topup_threshold ?? MIN_THRESHOLD_CREDITS)
+      setThreshold(userProfile.auto_topup_threshold ?? DEFAULT_THRESHOLD_CREDITS)
       setTopUpAmountDollars(
         userProfile.initialTopUpDollars ?? DEFAULT_TOPUP_DOLLARS,
       )
@@ -176,7 +189,7 @@ export function useAutoTopup(): AutoTopupState {
         const savedThreshold =
           data?.auto_topup_threshold ??
           variables.auto_topup_threshold ??
-          MIN_THRESHOLD_CREDITS
+          DEFAULT_THRESHOLD_CREDITS
         const savedAmountCents =
           data?.auto_topup_amount ??
           (variables.auto_topup_amount
@@ -195,7 +208,7 @@ export function useAutoTopup(): AutoTopupState {
         }
 
         setIsEnabled(updatedData.auto_topup_enabled ?? false)
-        setThreshold(updatedData.auto_topup_threshold ?? MIN_THRESHOLD_CREDITS)
+        setThreshold(updatedData.auto_topup_threshold ?? DEFAULT_THRESHOLD_CREDITS)
         setTopUpAmountDollars(
           updatedData.initialTopUpDollars ?? DEFAULT_TOPUP_DOLLARS,
         )
@@ -213,7 +226,7 @@ export function useAutoTopup(): AutoTopupState {
       })
       if (userProfile) {
         setIsEnabled(userProfile.auto_topup_enabled ?? false)
-        setThreshold(userProfile.auto_topup_threshold ?? MIN_THRESHOLD_CREDITS)
+        setThreshold(userProfile.auto_topup_threshold ?? DEFAULT_THRESHOLD_CREDITS)
         setTopUpAmountDollars(
           userProfile.initialTopUpDollars ?? DEFAULT_TOPUP_DOLLARS,
         )
@@ -289,6 +302,39 @@ export function useAutoTopup(): AutoTopupState {
     }
   }
 
+  const enableAutoTopup = useCallback(() => {
+    setIsEnabled(true)
+    autoTopupMutation.mutate(
+      {
+        auto_topup_enabled: true,
+        auto_topup_threshold: threshold,
+        auto_topup_amount: topUpAmountDollars,
+      },
+      {
+        onSuccess: () => {
+          toast({
+            title: 'Auto Top-up enabled!',
+            description: `We'll automatically add credits when your balance falls below ${threshold.toLocaleString()} credits.`,
+          })
+        },
+        onError: () => {
+          setIsEnabled(false)
+        },
+      },
+    )
+  }, [autoTopupMutation, threshold, topUpAmountDollars])
+
+  const confirmEnableAutoTopup = useCallback(() => {
+    setShowConfirmDialog(false)
+    setConfirmDialogBalance(null)
+    enableAutoTopup()
+  }, [enableAutoTopup])
+
+  const cancelEnableAutoTopup = useCallback(() => {
+    setShowConfirmDialog(false)
+    setConfirmDialogBalance(null)
+  }, [])
+
   const handleToggleAutoTopup = (checked: boolean) => {
     if (checked && userProfile?.auto_topup_blocked_reason) {
       toast({
@@ -299,7 +345,6 @@ export function useAutoTopup(): AutoTopupState {
       return
     }
 
-    setIsEnabled(checked)
     debouncedSaveSettings.cancel()
     pendingSettings.current = null
 
@@ -316,29 +361,27 @@ export function useAutoTopup(): AutoTopupState {
             'Cannot enable auto top-up with current values. Please ensure they are within limits.',
           variant: 'destructive',
         })
-        setIsEnabled(false)
         return
       }
 
-      autoTopupMutation.mutate(
-        {
-          auto_topup_enabled: true,
-          auto_topup_threshold: threshold,
-          auto_topup_amount: topUpAmountDollars,
-        },
-        {
-          onSuccess: () => {
-            toast({
-              title: 'Auto Top-up enabled!',
-              description: `We'll automatically add credits when your balance falls below ${threshold.toLocaleString()} credits.`,
-            })
-          },
-          onError: () => {
-            setIsEnabled(false)
-          },
-        },
-      )
+      setIsCheckingBalance(true)
+      fetchCurrentBalance()
+        .then((balance) => {
+          if (balance < threshold) {
+            setConfirmDialogBalance(balance)
+            setShowConfirmDialog(true)
+          } else {
+            enableAutoTopup()
+          }
+        })
+        .catch(() => {
+          enableAutoTopup()
+        })
+        .finally(() => {
+          setIsCheckingBalance(false)
+        })
     } else {
+      setIsEnabled(false)
       autoTopupMutation.mutate(
         {
           auto_topup_enabled: false,
@@ -362,10 +405,14 @@ export function useAutoTopup(): AutoTopupState {
     threshold,
     topUpAmountDollars,
     isLoadingProfile,
-    isPending: autoTopupMutation.isPending,
+    isPending: autoTopupMutation.isPending || isCheckingBalance,
     userProfile: userProfile ?? null,
     handleToggleAutoTopup,
     handleThresholdChange,
     handleTopUpAmountChange,
+    showConfirmDialog,
+    confirmDialogBalance,
+    confirmEnableAutoTopup,
+    cancelEnableAutoTopup,
   }
 }
