Function PaymentSuccessContent

web/src/app/payment-success/page.tsx:16–112

()

import { trackUpgrade } from '@/lib/trackConversions'

function PaymentSuccessContent() {
  const searchParams = useSearchParams() ?? new URLSearchParams()
  const credits = searchParams.get('amt')
  const router = useRouter()
  const success = searchParams.get('success')
  const canceled = searchParams.get('canceled')

  const {
    handleToggleAutoTopup,
    handleThresholdChange,
    handleTopUpAmountChange,
    isEnabled: isAutoTopupEnabled,
  } = useAutoTopup()

  const enableMinimumAutoTopup = async () => {
    const { DEFAULT_THRESHOLD_CREDITS, DEFAULT_TOPUP_DOLLARS } =
      AUTO_TOPUP_CONSTANTS

    await handleToggleAutoTopup(true)
    handleThresholdChange(DEFAULT_THRESHOLD_CREDITS)
    handleTopUpAmountChange(DEFAULT_TOPUP_DOLLARS)
  }

  useEffect(() => {
    if (success) {
      trackUpgrade(true)
      toast({
        title: 'Success!',
        description: 'Your payment was successful.',
      })
    }
    if (canceled) {
      toast({
        title: 'Payment canceled',
        description: 'Your payment was canceled.',
        variant: 'destructive',
      })
      router.push('/pricing')
    }
  }, [success, canceled, router])

  return (
    <div className="space-y-8">
      <Card className="w-full max-w-2xl mx-auto relative">
        <CardContent className="space-y-6 pt-6">
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold">
                {credits
                  ? `${Number(credits).toLocaleString()} Credits Added!`
                  : 'Payment Successful!'}
              </h3>
            </div>
            <p className="text-sm text-muted-foreground">
              Never run out of credits by enabling auto top-up
            </p>
            <AutoTopupSettings />