1+ import { useEffect , useState } from "react"
2+ import { useNavigate , useSearchParams } from "react-router-dom"
3+ import { CheckCircle , Home , MessageCircle } from "lucide-react"
4+ import Button from '@/components/ui/button'
5+ import { ApiService } from '@/lib/api/service'
6+
7+ export default function PaymentSuccess ( ) {
8+ const navigate = useNavigate ( )
9+ const [ searchParams ] = useSearchParams ( )
10+ const [ loading , setLoading ] = useState ( true )
11+ const [ registrationData , setRegistrationData ] = useState < {
12+ message : string
13+ sccId ?: string
14+ teamName ?: string
15+ } | null > ( null )
16+ const [ error , setError ] = useState < string | null > ( null )
17+
18+ useEffect ( ( ) => {
19+ const handlePaymentSuccess = async ( ) => {
20+ try {
21+ const teamId = searchParams . get ( 'teamId' )
22+ const transactionId = searchParams . get ( 'txnId' )
23+
24+ if ( ! teamId ) {
25+ setError ( "Invalid payment confirmation. Team ID not found." )
26+ setLoading ( false )
27+ return
28+ }
29+
30+ // Get registration data from session storage if available
31+ const storedData = sessionStorage . getItem ( 'registrationData' )
32+ let data = null
33+
34+ if ( storedData ) {
35+ data = JSON . parse ( storedData )
36+ sessionStorage . removeItem ( 'registrationData' )
37+ }
38+
39+ // Confirm payment with backend
40+ if ( transactionId ) {
41+ await ApiService . public . confirmPayment ( teamId , {
42+ transactionId,
43+ paymentStatus : 'success' ,
44+ timestamp : new Date ( ) . toISOString ( )
45+ } )
46+ }
47+
48+ setRegistrationData ( {
49+ message : data ?. message || 'Your payment has been processed successfully! Your registration is now complete.' ,
50+ sccId : data ?. sccId || teamId ,
51+ teamName : data ?. teamName
52+ } )
53+ } catch ( err ) {
54+ console . error ( 'Payment confirmation error:' , err )
55+ setError ( "There was an issue confirming your payment. Please contact support with your transaction details." )
56+ } finally {
57+ setLoading ( false )
58+ }
59+ }
60+
61+ handlePaymentSuccess ( )
62+ } , [ searchParams ] )
63+
64+ if ( loading ) {
65+ return (
66+ < main className = "min-h-screen flex items-center justify-center bg-background text-foreground" >
67+ < div className = "text-center" >
68+ < div className = "w-16 h-16 border-4 border-primary/30 border-t-primary rounded-full animate-spin mx-auto mb-4" />
69+ < p className = "text-lg text-muted-foreground" > Processing payment confirmation...</ p >
70+ </ div >
71+ </ main >
72+ )
73+ }
74+
75+ if ( error ) {
76+ return (
77+ < main className = "min-h-screen flex items-center justify-center bg-background text-foreground p-4" >
78+ < div className = "bg-card border border-border/50 rounded-2xl p-8 shadow-2xl max-w-lg w-full text-center" >
79+ < div className = "inline-flex p-4 bg-red-100 rounded-full mb-6" >
80+ < div className = "h-12 w-12 text-red-600 flex items-center justify-center" > ❌</ div >
81+ </ div >
82+ < h1 className = "text-2xl font-bold text-foreground mb-4" > Payment Confirmation Error</ h1 >
83+ < p className = "text-muted-foreground mb-6" > { error } </ p >
84+ < Button
85+ onClick = { ( ) => navigate ( "/" , { replace : true } ) }
86+ className = "w-full px-6 py-3 bg-primary text-primary-foreground hover:bg-primary/90 rounded-xl font-semibold"
87+ >
88+ < Home className = "h-5 w-5 mr-2" />
89+ Back to Home
90+ </ Button >
91+ </ div >
92+ </ main >
93+ )
94+ }
95+
96+ return (
97+ < main className = "min-h-screen flex items-center justify-center bg-background text-foreground p-4" >
98+ < div className = "bg-card border border-border/50 rounded-2xl p-8 shadow-2xl max-w-lg w-full text-center" >
99+ < div className = "inline-flex p-4 bg-green-100 rounded-full mb-6" >
100+ < CheckCircle className = "h-12 w-12 text-green-600" />
101+ </ div >
102+ < h1 className = "text-2xl font-bold text-foreground mb-4" > Payment Successful!</ h1 >
103+ < div className = "text-muted-foreground mb-6 space-y-3" >
104+ < p > { registrationData ?. message } </ p >
105+ { registrationData ?. sccId && (
106+ < div className = "bg-primary/10 border border-primary/20 rounded-lg p-4 mt-4" >
107+ < p className = "text-sm text-primary font-semibold" >
108+ Your SCC ID: < span className = "font-mono text-lg" > { registrationData . sccId } </ span >
109+ </ p >
110+ </ div >
111+ ) }
112+ { registrationData ?. teamName && (
113+ < p className = "text-sm text-muted-foreground" >
114+ Team: < span className = "font-medium" > { registrationData . teamName } </ span >
115+ </ p >
116+ ) }
117+ </ div >
118+
119+ { /* WhatsApp Group Section */ }
120+ < div className = "bg-green-50/50 border border-green-200/50 rounded-xl p-6 mb-6" >
121+ < h4 className = "text-lg font-semibold text-green-800 mb-3 flex items-center justify-center gap-2" >
122+ < MessageCircle className = "h-5 w-5" />
123+ Join our WhatsApp Group
124+ </ h4 >
125+ < p className = "text-sm text-green-700 mb-4" >
126+ Stay updated with the latest announcements and connect with other participants!
127+ </ p >
128+
129+ < Button
130+ onClick = { ( ) => window . open ( 'https://chat.whatsapp.com/GUg1kFD0let90x7LCA3amy' , '_blank' ) }
131+ className = "w-full px-4 py-2 bg-green-600 text-white hover:bg-green-700 rounded-lg font-medium transition-all duration-300 flex items-center justify-center gap-2"
132+ >
133+ < MessageCircle className = "h-4 w-4" />
134+ Join WhatsApp Group
135+ </ Button >
136+ </ div >
137+
138+ < Button
139+ onClick = { ( ) => navigate ( "/" , { replace : true } ) }
140+ className = "w-full px-6 py-3 bg-primary text-primary-foreground hover:bg-primary/90 rounded-xl font-semibold transition-all duration-300 hover:scale-[1.02] shadow-lg"
141+ >
142+ < Home className = "h-5 w-5 mr-2" />
143+ Back to Home
144+ </ Button >
145+ </ div >
146+ </ main >
147+ )
148+ }
0 commit comments