+
Secure Payment with PayPal
+ {order.length === 0 ?
+
+
+
+
+
+
+ Your cart is empty
+
+ Explore our products and add items to your cart
+
+
+
+
+ :
+
+
+
+
+
+
+ {!error && backendStatus && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+ Order Confirmed
+ {formatDate(new Date())}
+
+
+
+
+
+
+
+
+
+ Payment in progress
+
+
+
+
+
+
+
+
+
+ Estimated Delivery Date
+ {getDateAfterDays(10)}
+
+ We will shipp your product via FedEx and it should
+ arrive within 7-10 business days.
+
+
+
+
+
+
+
+
+
+ }
+
+
-
-
-
-
Complete your order securely with PayPal
-
{error && (
@@ -127,47 +279,38 @@ const Payment = () => {
)}
{backendStatus && (
-
-
+
+
+ Payment system connected
+
+ We're available via email and usually respond within a few hours. So don't hesitate to reach out if you need assistance - we're here to help.
+
+ {import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}
+
+
+
+
+
)}
-
-
- {!error && backendStatus && (
-
- )}
-
-
-
-
-
-
{/* Debug info for development */}
- {process.env.NODE_ENV === 'development' && (
-
-
Debug Info:
-
- Order ID: {orderData.wc_order_id}Total: ${orderData.total}PayPal Order: {paypalOrderId || 'Not created yet'}Backend: {backendStatus ? '✅ Connected' : '❌ Disconnected'}
-
-
+ {import.meta.env.VITE_NODE_ENV === 'development' && (
+
+
+ Debug Info
+
+
+ Order ID: {orderData.wc_order_id}Total: ${orderData.total}PayPal Order: {paypalOrderId || 'Not created yet'}Backend: {backendStatus ? '✅ Connected' : '❌ Disconnected'}
+
+
+
+
)}
diff --git a/frontend/src/pages/Success.jsx b/frontend/src/pages/Success.jsx
index 0cbb368..4a1eb02 100644
--- a/frontend/src/pages/Success.jsx
+++ b/frontend/src/pages/Success.jsx
@@ -1,14 +1,44 @@
import React, { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
+import {
+ Alert,
+ Text,
+ Spinner,
+ Center,
+ VStack,
+ HStack,
+ Button,
+ DataList
+} from "@chakra-ui/react"
+import { LuMoveLeft } from "react-icons/lu";
const Success = () => {
const [searchParams] = useSearchParams();
const [orderStatus, setOrderStatus] = useState(null);
const [loading, setLoading] = useState(true);
+ const [countdown, setCountdown] = useState(10);
const transactionId = searchParams.get('transaction_id');
const orderId = searchParams.get('order_id');
const paypalOrderId = searchParams.get('token'); // PayPal adds this
+ const returnUrl = searchParams.get('return_url');
+
+ useEffect(() => {
+ if (!returnUrl) return;
+
+ // Auto-redirect after X seconds
+ const timer = setInterval(() => {
+ setCountdown(prev => {
+ if (prev <= 1) {
+ window.location.href = decodeURIComponent(returnUrl);
+ return 0;
+ }
+ return prev - 1;
+ });
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }, [returnUrl]);
useEffect(() => {
// Simulate checking order status
@@ -38,112 +68,84 @@ const Success = () => {
if (loading) {
return (
-
-
-
-
-
- Processing...
-
-
Confirming your payment...
-
-
-
-
+
+ Processing and confirming your payment...
+
);
}
return (
+
+ Payment Successful!
+
+ Thank you for your payment. Your transaction has been completed successfully.
+ A confirmation email has been sent to your email address with all the transaction details.
+ Redirecting you back to checkout in {countdown} seconds...
+
+
+
+
+ {transactionId && (
+
+ Transaction ID:
+ {transactionId}
+
+ )}
+ {orderId && (
+
+ Order ID:
+ {orderId}
+
+ )}
+ {paypalOrderId && (
+
+ PayPal Order ID:
+ {paypalOrderId}
+
+ )}
+ {orderStatus && orderStatus.success && (
+ <>
+
+ PayPal Order ID:
+ {paypalOrderId}
+
+
+ Total: {formatCurrency(orderStatus.total, orderStatus.currency)}
+
+ {/**/}
+ {/* Order Status: */}
+ {/* */}
+ {/* {orderStatus.status}*/}
+ {/* */}
+ {/* */}
+
+ )}
+
+
+
+
-
-
-
-
Payment Successful!
-
Thank you for your payment. Your transaction has been completed successfully.
-
-
-
- {transactionId && (
-
- Transaction ID:
- {transactionId}
-
- )}
- {orderId && (
-
- Order ID:
- {orderId}
-
- )}
- {paypalOrderId && (
-
-
- PayPal Order ID: {paypalOrderId}
-
-
- )}
-
-
-
- {orderStatus && orderStatus.success && (
-
-
Order Details
-
-
-
- Status:
-
- {orderStatus.status}
-
-
-
-
-
- Total: {formatCurrency(orderStatus.total, orderStatus.currency)}
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 9531aba..3bc4c70 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,9 +1,10 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import tsconfigPaths from "vite-tsconfig-paths"
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [react(), tsconfigPaths()],
server: {
port: 5173,
proxy: {