main: add many things to app :)

Signed-off-by: nfel <nfilsaraee@gmail.com>
2025-12-30 01:30:31 +03:30
parent 91c149e92e
commit 895afc44af
26 changed files with 2180 additions and 249 deletions
@@ -0,0 +1,138 @@
+'use client';
+
+import { useEffect, useState, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { FaCheckCircle, FaTimesCircle, FaSpinner } from 'react-icons/fa';
+
+function CallbackContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [status, setStatus] = useState<'verifying' | 'success' | 'failed'>('verifying');
+  const [message, setMessage] = useState('Verifying your payment...');
+  const [refId, setRefId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const authority = searchParams.get('Authority');
+    const statusParam = searchParams.get('Status');
+
+    if (!authority || !statusParam) {
+      setStatus('failed');
+      setMessage('Invalid payment callback');
+      return;
+    }
+
+    if (statusParam !== 'OK') {
+      setStatus('failed');
+      setMessage('Payment was cancelled or failed');
+      return;
+    }
+
+    // Verify the payment
+    verifyPayment(authority);
+  }, [searchParams]);
+
+  const verifyPayment = async (authority: string) => {
+    try {
+      const response = await fetch('/api/payment/verify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ authority }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        setStatus('success');
+        setMessage(`Payment verified successfully!`);
+        setRefId(data.refId);
+
+        // Redirect to home after 3 seconds
+        setTimeout(() => {
+          router.push('/');
+        }, 3000);
+      } else {
+        setStatus('failed');
+        setMessage(data.error || 'Payment verification failed');
+      }
+    } catch (error: any) {
+      setStatus('failed');
+      setMessage('Failed to verify payment');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-paper-light flex items-center justify-center p-4">
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="paper-card max-w-md w-full p-8 border-4 border-paper-dark shadow-paper-lg text-center"
+      >
+        {status === 'verifying' && (
+          <>
+            <FaSpinner className="text-6xl text-paper-brown mx-auto mb-4 animate-spin" />
+            <h1 className="text-2xl font-bold text-paper-dark mb-2">Verifying Payment</h1>
+            <p className="text-paper-gray">{message}</p>
+          </>
+        )}
+
+        {status === 'success' && (
+          <>
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ type: 'spring', stiffness: 200 }}
+            >
+              <FaCheckCircle className="text-6xl text-green-600 mx-auto mb-4" />
+            </motion.div>
+            <h1 className="text-2xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">
+              Payment Successful!
+            </h1>
+            <p className="text-paper-gray mt-4">{message}</p>
+            {refId && (
+              <div className="mt-4 p-3 bg-paper-light border-2 border-paper-brown">
+                <p className="text-xs text-paper-gray">Reference ID:</p>
+                <p className="text-sm font-mono text-paper-dark font-semibold">{refId}</p>
+              </div>
+            )}
+            <p className="text-sm text-paper-gray mt-4">Redirecting you to the home page...</p>
+          </>
+        )}
+
+        {status === 'failed' && (
+          <>
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ type: 'spring', stiffness: 200 }}
+            >
+              <FaTimesCircle className="text-6xl text-red-600 mx-auto mb-4" />
+            </motion.div>
+            <h1 className="text-2xl font-bold text-paper-dark mb-2 border-b-4 border-paper-dark inline-block pb-1">
+              Payment Failed
+            </h1>
+            <p className="text-paper-gray mt-4">{message}</p>
+            <button
+              onClick={() => router.push('/')}
+              className="mt-6 px-6 py-3 bg-paper-brown hover:bg-paper-dark border-2 border-paper-dark text-paper-light font-semibold transition-all shadow-paper"
+            >
+              Return to Home
+            </button>
+          </>
+        )}
+      </motion.div>
+    </div>
+  );
+}
+
+export default function PaymentCallback() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen bg-paper-light flex items-center justify-center">
+        <FaSpinner className="text-6xl text-paper-brown animate-spin" />
+      </div>
+    }>
+      <CallbackContent />
+    </Suspense>
+  );
+}