78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { useStore } from '../src/context/StoreContext';
|
|
|
|
const MockPayment: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const { placeOrder, clearCart } = useStore();
|
|
const [isSimulating, setIsSimulating] = useState(false);
|
|
|
|
const orderData = location.state?.orderData;
|
|
|
|
const handleSimulatePayment = async () => {
|
|
if (!orderData) return;
|
|
|
|
setIsSimulating(true);
|
|
// Simulate network delay
|
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
|
|
|
try {
|
|
await placeOrder(orderData);
|
|
clearCart();
|
|
navigate('/success');
|
|
} catch (err) {
|
|
alert('Payment simulation failed');
|
|
setIsSimulating(false);
|
|
}
|
|
};
|
|
|
|
if (!orderData) {
|
|
return (
|
|
<div className="min-h-screen pt-48 flex flex-col items-center justify-center">
|
|
<p>No order data found. Please go back to checkout.</p>
|
|
<button onClick={() => navigate('/checkout')} className="mt-4 underline">Back to Checkout</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-stone-50 dark:bg-stone-950 pt-48 px-6">
|
|
<div className="max-w-md mx-auto bg-white dark:bg-stone-900 p-12 rounded-sm shadow-xl border border-stone-100 dark:border-stone-800 text-center">
|
|
<span className="material-symbols-outlined text-6xl text-stone-300 mb-8">account_balance_wallet</span>
|
|
<h1 className="font-display text-3xl text-text-main dark:text-white mb-4">Payment Simulation</h1>
|
|
<p className="text-stone-500 text-sm mb-12 leading-relaxed">
|
|
This is a secure test environment. Click the button below to simulate a successful transaction of
|
|
<span className="font-bold text-text-main dark:text-white ml-1">${orderData.total_amount.toFixed(2)}</span>.
|
|
</p>
|
|
|
|
<button
|
|
onClick={handleSimulatePayment}
|
|
disabled={isSimulating}
|
|
className="w-full bg-black dark:bg-white text-white dark:text-black py-5 uppercase tracking-[0.3em] text-xs font-bold hover:opacity-90 transition-opacity flex items-center justify-center gap-4"
|
|
>
|
|
{isSimulating ? (
|
|
<>
|
|
<span className="animate-spin w-4 h-4 border-2 border-current border-t-transparent rounded-full" />
|
|
Processing...
|
|
</>
|
|
) : (
|
|
'Simulate Success'
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => navigate('/checkout')}
|
|
disabled={isSimulating}
|
|
className="mt-6 text-[10px] text-stone-400 uppercase tracking-widest hover:text-stone-600 transition-colors"
|
|
>
|
|
Cancel and go back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MockPayment;
|