initial commit
This commit is contained in:
Kar k1
198
app/payment/success/page.tsx
Normal file
198
app/payment/success/page.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, Suspense } from 'react'
|
||||
import { useSearchParams, useRouter } from 'next/navigation'
|
||||
import { CheckCircle, Download, ArrowRight, Home, Receipt } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
interface PaymentDetails {
|
||||
txn: string
|
||||
amount: string
|
||||
type?: string
|
||||
warning?: string
|
||||
}
|
||||
|
||||
// Main payment success component with search params handling
|
||||
function PaymentSuccessContent() {
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const [details, setDetails] = useState<PaymentDetails | null>(null)
|
||||
const [countdown, setCountdown] = useState(10)
|
||||
|
||||
useEffect(() => {
|
||||
// Extract payment details from URL parameters
|
||||
const txn = searchParams.get('txn')
|
||||
const amount = searchParams.get('amount')
|
||||
const type = searchParams.get('type') || 'billing'
|
||||
const warning = searchParams.get('warning')
|
||||
|
||||
if (txn && amount) {
|
||||
setDetails({
|
||||
txn,
|
||||
amount,
|
||||
type,
|
||||
warning: warning || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
// Auto-redirect countdown
|
||||
const timer = setInterval(() => {
|
||||
setCountdown((prev) => {
|
||||
if (prev <= 1) {
|
||||
router.push('/profile')
|
||||
return 0
|
||||
}
|
||||
return prev - 1
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}, [searchParams, router])
|
||||
|
||||
const handleDashboardRedirect = () => {
|
||||
router.push('/profile')
|
||||
}
|
||||
|
||||
const handleDownloadReceipt = () => {
|
||||
// TODO: Implement receipt download
|
||||
// In real implementation, this would generate and download a PDF receipt
|
||||
console.log('Downloading receipt for transaction:', details?.txn)
|
||||
alert('Receipt download feature will be implemented')
|
||||
}
|
||||
|
||||
if (!details) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500 mx-auto mb-4"></div>
|
||||
<p>Loading payment details...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-green-50 to-blue-50 dark:from-green-900/10 dark:to-blue-900/10 flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-lg">
|
||||
<CardContent className="p-8 text-center">
|
||||
{/* Success Icon */}
|
||||
<div className="mb-6">
|
||||
<div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
|
||||
<CheckCircle className="w-10 h-10 text-green-600 dark:text-green-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Success Message */}
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Payment Successful!
|
||||
</h1>
|
||||
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||
{details.type === 'balance'
|
||||
? 'Your account balance has been updated successfully.'
|
||||
: 'Your payment has been processed successfully.'}
|
||||
</p>
|
||||
|
||||
{/* Warning Message (if any) */}
|
||||
{details.warning && (
|
||||
<div className="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-md">
|
||||
<p className="text-sm text-yellow-800 dark:text-yellow-200">
|
||||
⚠️ Payment successful, but there was an issue updating our records. Our team has
|
||||
been notified and will resolve this shortly.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Payment Details */}
|
||||
<div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-6 space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Transaction ID</span>
|
||||
<code className="text-sm font-mono text-gray-900 dark:text-gray-100">
|
||||
{details.txn}
|
||||
</code>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Amount</span>
|
||||
<span className="text-lg font-bold text-green-600 dark:text-green-400">
|
||||
₹{parseFloat(details.amount).toLocaleString('en-IN', { minimumFractionDigits: 2 })}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Type</span>
|
||||
<span className="text-sm capitalize text-gray-900 dark:text-gray-100">
|
||||
{details.type === 'balance' ? 'Balance Addition' : 'Service Payment'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Date</span>
|
||||
<span className="text-sm text-gray-900 dark:text-gray-100">
|
||||
{new Date().toLocaleDateString('en-IN', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 mb-6">
|
||||
<Button onClick={handleDownloadReceipt} variant="outline" className="flex-1">
|
||||
<Receipt className="w-4 h-4 mr-2" />
|
||||
Download Receipt
|
||||
</Button>
|
||||
<Button onClick={handleDashboardRedirect} className="flex-1">
|
||||
<Home className="w-4 h-4 mr-2" />
|
||||
Go to Dashboard
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Auto-redirect Notice */}
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Redirecting to dashboard in {countdown} seconds
|
||||
</p>
|
||||
|
||||
{/* Next Steps */}
|
||||
<div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||
<h3 className="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
|
||||
What's Next?
|
||||
</h3>
|
||||
<div className="text-sm text-blue-700 dark:text-blue-300 space-y-1">
|
||||
{details.type === 'balance' ? (
|
||||
<>
|
||||
<p>• Your account balance has been updated</p>
|
||||
<p>• You can now use your balance for services</p>
|
||||
<p>• Check your transaction history in your profile</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p>• Your service will be activated shortly</p>
|
||||
<p>• Check your email for service details</p>
|
||||
<p>• View service status in your dashboard</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Wrapper component with Suspense boundary
|
||||
export default function PaymentSuccessPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<PaymentSuccessContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user