Initial Commit

src/pages/PaymentCancel.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card } from '../components/ui/card';
+import { Button } from '../components/ui/button';
+import Navbar from '../components/Navbar';
+import { XCircle, ArrowLeft, CreditCard, Mail } from 'lucide-react';
+
+const PaymentCancel = () => {
+  const navigate = useNavigate();
+
+  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">
+          {/* Cancel Icon */}
+          <div className="mb-8">
+            <div className="bg-[#6B708D] rounded-full w-24 h-24 mx-auto flex items-center justify-center">
+              <XCircle className="h-12 w-12 text-white" />
+            </div>
+          </div>
+
+          {/* Cancel Message */}
+          <h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-4">
+            Payment Cancelled
+          </h1>
+          <p className="text-lg text-[#6B708D] max-w-2xl mx-auto mb-8">
+            Your payment was cancelled. No charges have been made to your account.
+          </p>
+        </div>
+
+        {/* Info 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">
+            What Happened?
+          </h2>
+
+          <div className="space-y-6 mb-8">
+            <p className="text-[#6B708D] text-center">
+              You cancelled the payment process or closed the checkout page. Your membership has not been activated yet.
+            </p>
+
+            <div className="bg-[#F2CC8F]/20 p-6 rounded-xl">
+              <h3 className="text-lg font-semibold text-[#3D405B] mb-4">
+                Ready to Complete Your Membership?
+              </h3>
+              <ul className="space-y-3">
+                <li className="flex items-start gap-3">
+                  <CreditCard className="h-5 w-5 text-[#E07A5F] flex-shrink-0 mt-0.5" />
+                  <span className="text-[#6B708D]">
+                    Return to the plans page to complete your subscription
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <Mail className="h-5 w-5 text-[#E07A5F] flex-shrink-0 mt-0.5" />
+                  <span className="text-[#6B708D]">
+                    Contact us if you experienced any issues during checkout
+                  </span>
+                </li>
+              </ul>
+            </div>
+
+            <div className="bg-[#FDFCF8] p-6 rounded-xl">
+              <p className="text-sm text-[#6B708D] text-center mb-4">
+                <span className="font-medium text-[#3D405B]">Note:</span>{' '}
+                Your membership application is still approved. You can complete payment whenever you're ready.
+              </p>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <Button
+              onClick={() => navigate('/plans')}
+              className="bg-[#E07A5F] text-white hover:bg-[#D0694E] rounded-full px-8 py-6 text-lg font-semibold"
+              data-testid="try-again-button"
+            >
+              <CreditCard className="mr-2 h-5 w-5" />
+              Try Again
+            </Button>
+            <Button
+              onClick={() => navigate('/dashboard')}
+              variant="outline"
+              className="border-2 border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              data-testid="back-to-dashboard-button"
+            >
+              <ArrowLeft className="mr-2 h-5 w-5" />
+              Back to Dashboard
+            </Button>
+          </div>
+        </Card>
+
+        {/* Support Section */}
+        <Card className="p-6 bg-gradient-to-br from-[#F2CC8F]/20 to-[#E07A5F]/20 rounded-2xl border border-[#EAE0D5]">
+          <h3 className="text-lg font-semibold fraunces text-[#3D405B] mb-3 text-center">
+            Need Assistance?
+          </h3>
+          <p className="text-[#6B708D] text-center mb-4">
+            If you encountered any technical issues or have questions about the payment process, our support team is here to help.
+          </p>
+          <div className="text-center">
+            <a
+              href="mailto:support@loaf.org"
+              className="text-[#E07A5F] hover:text-[#D0694E] font-medium text-lg"
+            >
+              support@loaf.org
+            </a>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default PaymentCancel;