web: simplify buy credits panel. no custom purchase amount

jahooma · jahooma · commit ed33ed3f5551 · 2026-02-06T22:42:55.000-08:00
diff --git a/web/src/app/payment-success/page.tsx b/web/src/app/payment-success/page.tsx
@@ -28,12 +28,12 @@ function PaymentSuccessContent() {
   } = useAutoTopup()
 
   const enableMinimumAutoTopup = async () => {
-    const { MIN_THRESHOLD_CREDITS, MIN_TOPUP_DOLLARS } = AUTO_TOPUP_CONSTANTS
+    const { MIN_THRESHOLD_CREDITS, DEFAULT_TOPUP_DOLLARS } =
+      AUTO_TOPUP_CONSTANTS
 
-    // Enable auto top-up with minimum values
     await handleToggleAutoTopup(true)
     handleThresholdChange(MIN_THRESHOLD_CREDITS)
-    handleTopUpAmountChange(MIN_TOPUP_DOLLARS)
+    handleTopUpAmountChange(DEFAULT_TOPUP_DOLLARS)
   }
 
   useEffect(() => {
diff --git a/web/src/app/profile/components/subscription-section.tsx b/web/src/app/profile/components/subscription-section.tsx
@@ -96,7 +96,7 @@ function SubscriptionActive({ data }: { data: ActiveSubscriptionResponse }) {
       <CardHeader className="pb-5">
         <CardTitle className="flex items-baseline gap-2 text-lg">
           <span>💪</span>
-          {SUBSCRIPTION_DISPLAY_NAME}
+          {SUBSCRIPTION_DISPLAY_NAME} Subscription
           <span className="text-sm font-normal text-muted-foreground">
             ${subscription.tier}/mo
           </span>
@@ -164,7 +164,7 @@ function SubscriptionActive({ data }: { data: ActiveSubscriptionResponse }) {
             disabled={updatePreferenceMutation.isPending}
           />
           <Label htmlFor="always-use-credits" className="text-sm cursor-pointer">
-            Use a-la-carte credits when limit is reached
+            Automatically use credits when limit is reached
           </Label>
         </div>
       </CardContent>
diff --git a/web/src/components/auto-topup/constants.ts b/web/src/components/auto-topup/constants.ts
@@ -1,7 +1,8 @@
 export const AUTO_TOPUP_CONSTANTS = {
   MIN_THRESHOLD_CREDITS: 150,
   MAX_THRESHOLD_CREDITS: 1000,
-  MIN_TOPUP_DOLLARS: 5.0,
+  MIN_TOPUP_DOLLARS: 10.0,
+  DEFAULT_TOPUP_DOLLARS: 20.0,
   MAX_TOPUP_DOLLARS: 100.0,
   CENTS_PER_CREDIT: 1,
 } as const
diff --git a/web/src/components/credits/CreditPurchaseSection.tsx b/web/src/components/credits/CreditPurchaseSection.tsx
@@ -1,31 +1,17 @@
-import { convertCreditsToUsdCents } from '@codebuff/common/util/currency'
-import { pluralize } from '@codebuff/common/util/string'
 import { Loader2 as Loader } from 'lucide-react'
 import { useState } from 'react'
 
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { NeonGradientButton } from '@/components/ui/neon-gradient-button'
-import { formatDollars } from '@/lib/currency'
+import { dollarsToCredits } from '@/lib/currency'
 import { cn } from '@/lib/utils'
 
-// Individual user credit options (starting from $10)
-export const CREDIT_OPTIONS = [1000, 2500, 5000, 10000] as const
-export const CENTS_PER_CREDIT = 1
-const MIN_CREDITS = 500
-const MAX_CREDITS = 100000
-
-// Organization credit options (starting from $100)
-export const ORG_CREDIT_OPTIONS = [10000, 25000, 50000, 100000] as const
-const MIN_CREDITS_ORG = 5000
-const MAX_CREDITS_ORG = 1000000
+const DOLLAR_OPTIONS = [10, 25, 50, 100] as const
+const ORG_DOLLAR_OPTIONS = [50, 100, 250, 1000] as const
 
 export interface CreditPurchaseSectionProps {
   onPurchase: (credits: number) => void
   onSaveAutoTopupSettings?: () => Promise<boolean>
   isAutoTopupEnabled?: boolean
-  isAutoTopupPending?: boolean
   isPending?: boolean
   isPurchasePending: boolean
   isOrganization?: boolean
@@ -35,166 +21,57 @@ export function CreditPurchaseSection({
   onPurchase,
   onSaveAutoTopupSettings,
   isAutoTopupEnabled,
-  isAutoTopupPending,
   isPending,
   isPurchasePending,
   isOrganization = false,
 }: CreditPurchaseSectionProps) {
-  const [selectedCredits, setSelectedCredits] = useState<number | null>(null)
-  const [customCredits, setCustomCredits] = useState<string>('')
-  const [customError, setCustomError] = useState<string>('')
   const [cooldownActive, setCooldownActive] = useState(false)
+  const [purchasingDollars, setPurchasingDollars] = useState<number | null>(
+    null,
+  )
 
-  // Use organization-specific options if isOrganization is true
-  const creditOptions = isOrganization ? ORG_CREDIT_OPTIONS : CREDIT_OPTIONS
-  const minCredits = isOrganization ? MIN_CREDITS_ORG : MIN_CREDITS
-  const maxCredits = isOrganization ? MAX_CREDITS_ORG : MAX_CREDITS
+  const dollarOptions = isOrganization ? ORG_DOLLAR_OPTIONS : DOLLAR_OPTIONS
+  const isDisabled = isPending || isPurchasePending || cooldownActive
 
-  const handlePurchaseClick = async () => {
-    const credits = selectedCredits || parseInt(customCredits)
-    if (!credits || isPurchasePending || isPending || cooldownActive) return
+  const handlePurchase = async (dollars: number) => {
+    if (isDisabled) return
 
     let canProceed = true
     if (isAutoTopupEnabled && onSaveAutoTopupSettings) {
       canProceed = await onSaveAutoTopupSettings()
     }
 
     if (canProceed) {
+      setPurchasingDollars(dollars)
       setCooldownActive(true)
-      setTimeout(() => setCooldownActive(false), 3000) // 3 second cooldown
-      onPurchase(credits)
+      setTimeout(() => {
+        setCooldownActive(false)
+        setPurchasingDollars(null)
+      }, 3000)
+      onPurchase(dollarsToCredits(dollars))
     }
   }
 
-  const handleCreditSelection = (credits: number) => {
-    setSelectedCredits((currentSelected) =>
-      currentSelected === credits ? null : credits,
-    )
-    setCustomCredits('')
-    setCustomError('')
-  }
-
-  const handleCustomCreditsChange = (value: string) => {
-    setCustomCredits(value)
-    setSelectedCredits(null)
-
-    if (!value) {
-      setCustomError('')
-      return
-    }
-
-    const numCredits = parseInt(value)
-    if (isNaN(numCredits)) {
-      setCustomError('Please enter a valid number')
-    } else if (numCredits < minCredits) {
-      setCustomError(`Minimum ${pluralize(minCredits, 'credit')}`)
-    } else if (numCredits > maxCredits) {
-      setCustomError(`Maximum ${pluralize(maxCredits, 'credit')}`)
-    } else {
-      setCustomError('')
-    }
-  }
-
-  const isValid = selectedCredits || (customCredits && !customError)
-  const effectiveCredits =
-    selectedCredits ||
-    (customCredits && !customError ? parseInt(customCredits) : null)
-  const costInCents = effectiveCredits
-    ? convertCreditsToUsdCents(effectiveCredits, CENTS_PER_CREDIT)
-    : 0
-
-  const costInDollars = formatDollars(costInCents)
-
   return (
-    <div className="space-y-6">
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
-        {creditOptions.map((credits) => {
-          const optionCostInCents = convertCreditsToUsdCents(
-            credits,
-            CENTS_PER_CREDIT,
-          )
-          const optionCostInDollars = formatDollars(optionCostInCents)
-
-          return (
-            <Button
-              key={credits}
-              variant="outline"
-              onClick={() => handleCreditSelection(credits)}
-              className={cn(
-                'flex flex-col p-4 h-auto gap-1 transition-colors',
-                selectedCredits === credits
-                  ? 'border-primary bg-accent'
-                  : 'hover:bg-accent/50',
-              )}
-              disabled={isPending || isPurchasePending || cooldownActive}
-            >
-              <span className="text-lg font-semibold">
-                {credits.toLocaleString()}
-              </span>
-              <span className="text-sm text-muted-foreground">
-                ${optionCostInDollars}
-              </span>
-            </Button>
-          )
-        })}
-      </div>
-
-      <div className="flex flex-col md:flex-row gap-4 items-start md:items-end">
-        <div className="w-full flex-1 space-y-2">
-          <Label htmlFor="custom-credits">Or enter a custom amount:</Label>
-          <div>
-            <div className="flex flex-col md:flex-row gap-4 items-start">
-              <div className="w-full flex-1">
-                <Input
-                  id="custom-credits"
-                  type="number"
-                  min={minCredits}
-                  max={maxCredits}
-                  value={customCredits}
-                  onChange={(e) => handleCustomCreditsChange(e.target.value)}
-                  placeholder={`${pluralize(minCredits, 'credit')} - ${pluralize(maxCredits, 'credit')}`}
-                  className={cn(customError && 'border-destructive')}
-                  disabled={cooldownActive}
-                />
-                {customError && (
-                  <p className="text-xs text-destructive mt-2 pl-1">
-                    {customError}
-                  </p>
-                )}
-                {customCredits && !customError && (
-                  <p className="text-sm text-muted-foreground mt-2 pl-1">
-                    We'll charge you ${costInDollars}
-                  </p>
-                )}
-              </div>
-
-              <NeonGradientButton
-                onClick={handlePurchaseClick}
-                disabled={
-                  !isValid || isPending || isPurchasePending || cooldownActive
-                }
-                className={cn(
-                  'w-full md:w-auto transition-opacity min-w-[120px]',
-                  (!isValid ||
-                    isPending ||
-                    isPurchasePending ||
-                    cooldownActive) &&
-                    'opacity-50',
-                )}
-                neonColors={{
-                  firstColor: '#4F46E5',
-                  secondColor: '#06B6D4',
-                }}
-              >
-                {isPurchasePending ? (
-                  <Loader className="mr-2 size-4 animate-spin" />
-                ) : null}
-                Buy Credits
-              </NeonGradientButton>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+      {dollarOptions.map((dollars) => (
+        <Button
+          key={dollars}
+          variant="outline"
+          onClick={() => handlePurchase(dollars)}
+          className={cn(
+            'flex flex-col p-4 h-auto transition-all',
+            'hover:bg-accent/50 hover:border-primary',
+          )}
+          disabled={isDisabled}
+        >
+          {isPurchasePending && purchasingDollars === dollars ? (
+            <Loader className="size-5 animate-spin" />
+          ) : (
+            <span className="text-xl font-bold">${dollars}</span>
+          )}
+        </Button>
+      ))}
     </div>
   )
 }
diff --git a/web/src/hooks/use-auto-topup.ts b/web/src/hooks/use-auto-topup.ts
@@ -14,6 +14,7 @@ const {
   MIN_THRESHOLD_CREDITS,
   MAX_THRESHOLD_CREDITS,
   MIN_TOPUP_DOLLARS,
+  DEFAULT_TOPUP_DOLLARS,
   MAX_TOPUP_DOLLARS,
   CENTS_PER_CREDIT,
 } = AUTO_TOPUP_CONSTANTS
@@ -23,7 +24,7 @@ export function useAutoTopup(): AutoTopupState {
   const [isEnabled, setIsEnabled] = useState(false)
   const [threshold, setThreshold] = useState<number>(MIN_THRESHOLD_CREDITS)
   const [topUpAmountDollars, setTopUpAmountDollars] =
-    useState<number>(MIN_TOPUP_DOLLARS)
+    useState<number>(DEFAULT_TOPUP_DOLLARS)
   const isInitialLoad = useRef(true)
   const pendingSettings = useRef<{
     threshold: number
@@ -40,7 +41,7 @@ export function useAutoTopup(): AutoTopupState {
       const data = await response.json()
       const thresholdCredits =
         data.auto_topup_threshold ?? MIN_THRESHOLD_CREDITS
-      const topUpAmount = data.auto_topup_amount ?? MIN_TOPUP_DOLLARS * 100
+      const topUpAmount = data.auto_topup_amount ?? DEFAULT_TOPUP_DOLLARS * 100
       const topUpDollars = topUpAmount / 100
 
       return {
@@ -52,7 +53,7 @@ export function useAutoTopup(): AutoTopupState {
           MAX_THRESHOLD_CREDITS,
         ),
         initialTopUpDollars: clamp(
-          topUpDollars > 0 ? topUpDollars : MIN_TOPUP_DOLLARS,
+          topUpDollars > 0 ? topUpDollars : DEFAULT_TOPUP_DOLLARS,
           MIN_TOPUP_DOLLARS,
           MAX_TOPUP_DOLLARS,
         ),
@@ -76,7 +77,7 @@ export function useAutoTopup(): AutoTopupState {
       setIsEnabled(userProfile.auto_topup_enabled ?? false)
       setThreshold(userProfile.auto_topup_threshold ?? MIN_THRESHOLD_CREDITS)
       setTopUpAmountDollars(
-        userProfile.initialTopUpDollars ?? MIN_TOPUP_DOLLARS,
+        userProfile.initialTopUpDollars ?? DEFAULT_TOPUP_DOLLARS,
       )
       setTimeout(() => {
         isInitialLoad.current = false
@@ -190,13 +191,13 @@ export function useAutoTopup(): AutoTopupState {
           initialTopUpDollars:
             savedEnabled && savedAmountCents
               ? savedAmountCents / 100
-              : MIN_TOPUP_DOLLARS,
+              : DEFAULT_TOPUP_DOLLARS,
         }
 
         setIsEnabled(updatedData.auto_topup_enabled ?? false)
         setThreshold(updatedData.auto_topup_threshold ?? MIN_THRESHOLD_CREDITS)
         setTopUpAmountDollars(
-          updatedData.initialTopUpDollars ?? MIN_TOPUP_DOLLARS,
+          updatedData.initialTopUpDollars ?? DEFAULT_TOPUP_DOLLARS,
         )
 
         return updatedData
@@ -214,7 +215,7 @@ export function useAutoTopup(): AutoTopupState {
         setIsEnabled(userProfile.auto_topup_enabled ?? false)
         setThreshold(userProfile.auto_topup_threshold ?? MIN_THRESHOLD_CREDITS)
         setTopUpAmountDollars(
-          userProfile.initialTopUpDollars ?? MIN_TOPUP_DOLLARS,
+          userProfile.initialTopUpDollars ?? DEFAULT_TOPUP_DOLLARS,
         )
       }
       pendingSettings.current = null
