kayela/membership-fe
1
0
Fork 0
forked from andika/membership-fe
Code Pull Requests Activity

Initial Commit

Browse Source
This commit is contained in:
Koncept Kit
2025-12-05 16:40:33 +07:00
parent 0834f12410
commit 94c7d5aec0
91 changed files with 20446 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
src/pages/PaymentSuccess.js Normal file
View File

@@ -0,0 +1,135 @@
import React, { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { Card } from '../components/ui/card';
import { Button } from '../components/ui/button';
import Navbar from '../components/Navbar';
import { CheckCircle, Calendar, User } from 'lucide-react';
const PaymentSuccess = () => {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { refreshUser } = useAuth();
const sessionId = searchParams.get('session_id');
useEffect(() => {
// Refresh user data to get updated status after payment
if (refreshUser) {
refreshUser();
}
}, [refreshUser]);
return (
<div className="min-h-screen bg-[#FDFCF8]">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
<div className="text-center mb-12">
{/* Success Icon */}
<div className="mb-8">
<div className="bg-[#81B29A] rounded-full w-24 h-24 mx-auto flex items-center justify-center">
<CheckCircle className="h-12 w-12 text-white" />
</div>
</div>
{/* Success Message */}
<h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
Payment Successful!
</h1>
<p className="text-lg text-[#6B708D] max-w-2xl mx-auto mb-8">
Thank you for your payment. Your LOAF membership is now active!
</p>
</div>
{/* Confirmation Card */}
<Card className="p-8 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg mb-8">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6 text-center">
Welcome to the LOAF Community!
</h2>
<div className="space-y-6 mb-8">
<div className="bg-[#FDFCF8] p-6 rounded-xl">
<h3 className="text-lg font-semibold text-[#3D405B] mb-4">
What's Next?
</h3>
<ul className="space-y-3">
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
Your membership is now active and you have full access to all member benefits
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
You can now RSVP and attend members-only events
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
Access the community directory and connect with other members
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
<span className="text-[#6B708D]">
You'll receive our newsletter with exclusive updates and announcements
</span>
</li>
</ul>
</div>
{sessionId && (
<div className="bg-[#F2CC8F]/20 p-4 rounded-xl">
<p className="text-sm text-[#6B708D] text-center">
<span className="font-medium text-[#3D405B]">Transaction ID:</span>{' '}
<span className="font-mono text-xs">{sessionId}</span>
</p>
<p className="text-xs text-[#6B708D] text-center mt-2">
A confirmation email has been sent to your registered email address.
</p>
</div>
)}
</div>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
onClick={() => navigate('/dashboard')}
className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-semibold"
data-testid="go-to-dashboard-button"
>
<User className="mr-2 h-5 w-5" />
Go to Dashboard
</Button>
<Button
onClick={() => navigate('/events')}
variant="outline"
className="border-2 border-[#E07A5F] text-[#E07A5F] hover:bg-[#E07A5F] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
data-testid="browse-events-button"
>
<Calendar className="mr-2 h-5 w-5" />
Browse Events
</Button>
</div>
</Card>
{/* Additional Info */}
<div className="text-center">
<p className="text-sm text-[#6B708D]">
Need help? Contact us at{' '}
<a
href="mailto:support@loaf.org"
className="text-[#E07A5F] hover:text-[#D0694E] font-medium"
>
support@loaf.org
</a>
</p>
</div>
</div>
</div>
);
};
export default PaymentSuccess;