69 lines
3.5 KiB
TypeScript
69 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
|
|
import React, { useState } from 'react';
|
|
import { CreditCard, Shield, Lock, ArrowRight, Loader2 } from 'lucide-react';
|
|
import { useLanguage } from '@/providers/LanguageProvider';
|
|
|
|
interface CheckoutProps {
|
|
plan: { id: string; displayName: string; price: number };
|
|
onComplete: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const Checkout: React.FC<CheckoutProps> = ({ plan, onComplete, onCancel }) => {
|
|
const [loading, setLoading] = useState(false);
|
|
const { t } = useLanguage();
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
onComplete();
|
|
}, 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#eef2ff] flex items-center justify-center p-8">
|
|
<div className="bg-white rounded-3xl shadow-2xl flex flex-col md:flex-row max-w-4xl w-full overflow-hidden animate-in fade-in slide-in-from-bottom-10 duration-500">
|
|
<div className="w-full md:w-1/3 bg-slate-900 text-white p-8">
|
|
<h3 className="text-xl font-bold mb-8 flex items-center gap-2"><Lock size={18} className="text-blue-400" /> {t('checkout.order')}</h3>
|
|
<div className="space-y-4">
|
|
<div className="flex justify-between text-sm"><span>{plan.displayName}</span><span>{plan.price.toFixed(2)}€</span></div>
|
|
<div className="flex justify-between text-sm"><span>{t('checkout.vat')} (20%)</span><span>{(plan.price * 0.2).toFixed(2)}€</span></div>
|
|
<div className="h-px bg-slate-800 my-4" />
|
|
<div className="flex justify-between text-xl font-black"><span>{t('checkout.total')}</span><span className="text-blue-400">{(plan.price * 1.2).toFixed(2)}€</span></div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 p-8 md:p-12">
|
|
<h2 className="text-2xl font-black text-slate-900 mb-8 text-center">{t('checkout.secure_payment')}</h2>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label className="block text-xs font-black text-slate-500 uppercase tracking-widest mb-2">{t('checkout.card_number')}</label>
|
|
<div className="relative">
|
|
<input type="text" placeholder="4242 4242 4242 4242" className="w-full bg-[#eef2ff] border border-indigo-100 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-bold" />
|
|
<CreditCard className="absolute right-4 top-4 text-slate-400" />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<input type="text" placeholder="MM / YY" className="w-full bg-[#eef2ff] border border-indigo-100 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-bold" />
|
|
<input type="text" placeholder="CVC" className="w-full bg-[#eef2ff] border border-indigo-100 p-4 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 font-bold" />
|
|
</div>
|
|
<button
|
|
disabled={loading}
|
|
className="w-full bg-blue-600 text-white py-5 rounded-2xl font-black text-lg hover:bg-blue-700 transition-all shadow-xl shadow-blue-200 flex items-center justify-center gap-3"
|
|
>
|
|
{loading ? <Loader2 className="animate-spin" /> : <>{t('checkout.confirm_payment')} <ArrowRight size={20} /></>}
|
|
</button>
|
|
<div className="flex items-center justify-center gap-2 text-[10px] text-slate-400 font-bold uppercase">
|
|
<Shield size={12} /> {t('checkout.ssl_encryption')}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Checkout;
|