69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { useSearchParams } from "next/navigation"
|
|
import Link from "next/link"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { CheckCircle } from "lucide-react"
|
|
|
|
export default function SuccessPage() {
|
|
const searchParams = useSearchParams()
|
|
const sessionId = searchParams.get("session_id")
|
|
const [showPortalButton, setShowPortalButton] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (sessionId) {
|
|
setShowPortalButton(true)
|
|
}
|
|
}, [sessionId])
|
|
|
|
const handleManageBilling = async () => {
|
|
if (!sessionId) return
|
|
|
|
try {
|
|
const response = await fetch("/api/create-portal-session", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({ session_id: sessionId }),
|
|
})
|
|
|
|
const { url } = await response.json()
|
|
if (url) {
|
|
window.location.href = url
|
|
}
|
|
} catch (error) {
|
|
console.error("Error creating portal session:", error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
|
|
<Card className="max-w-md w-full">
|
|
<CardContent className="p-8 text-center">
|
|
<CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-6" />
|
|
<h1 className="text-2xl font-bold text-gray-900 mb-4">Thank You for Your Support!</h1>
|
|
<p className="text-gray-600 mb-6">
|
|
Your donation to support Jerry Higginson, the Alert Bay Trumpeter, has been processed successfully. Jerry
|
|
appreciates your contribution to help him continue spreading smiles at sea!
|
|
</p>
|
|
|
|
<div className="space-y-4">
|
|
<Link href="/">
|
|
<Button className="w-full">Return to Home</Button>
|
|
</Link>
|
|
|
|
{showPortalButton && (
|
|
<Button variant="outline" className="w-full bg-transparent" onClick={handleManageBilling}>
|
|
Manage Billing Information
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|