91 lines
3.5 KiB
TypeScript
91 lines
3.5 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Card } from '../ui/card';
|
|
import { Tag, ShieldCheck } from 'lucide-react';
|
|
|
|
interface OrderSummaryProps {
|
|
subtotal: number;
|
|
taxRate?: number;
|
|
discount?: { code: string; amount: number; type: 'percent' | 'fixed' };
|
|
currency?: string;
|
|
onCheckout?: () => void;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export const OrderSummary: React.FC<OrderSummaryProps> = ({
|
|
subtotal,
|
|
taxRate = 0.08,
|
|
discount,
|
|
currency = 'USD',
|
|
onCheckout,
|
|
loading = false
|
|
}) => {
|
|
const discountAmount = discount
|
|
? (discount.type === 'percent' ? subtotal * (discount.amount / 100) : discount.amount)
|
|
: 0;
|
|
|
|
const taxableAmount = Math.max(0, subtotal - discountAmount);
|
|
const taxAmount = taxableAmount * taxRate;
|
|
const total = taxableAmount + taxAmount;
|
|
|
|
const formatPrice = (amount: number) => {
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency,
|
|
}).format(amount);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card variant="gaming" className="p-6">
|
|
<h3 className="font-bold text-white mb-6 uppercase tracking-wider text-sm border-b border-gray-700 pb-2">Order Summary</h3>
|
|
|
|
<div className="space-y-3 text-sm mb-6">
|
|
<div className="flex justify-between text-gray-400">
|
|
<span>Subtotal</span>
|
|
<span className="text-white font-mono">{formatPrice(subtotal)}</span>
|
|
</div>
|
|
|
|
{discount && (
|
|
<div className="flex justify-between text-kodo-lime">
|
|
<span className="flex items-center gap-2"><Tag className="w-3 h-3" /> Discount ({discount.code})</span>
|
|
<span className="font-mono">-{formatPrice(discountAmount)}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-between text-gray-400">
|
|
<span>Estimated Tax ({(taxRate * 100).toFixed(0)}%)</span>
|
|
<span className="text-white font-mono">{formatPrice(taxAmount)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-700 pt-4 mb-6">
|
|
<div className="flex justify-between items-end">
|
|
<span className="font-bold text-white">Total</span>
|
|
<span className="text-2xl font-mono font-bold text-kodo-cyan">{formatPrice(total)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{onCheckout && (
|
|
<button
|
|
className="w-full h-12 bg-gradient-to-r from-kodo-cyan-dim to-kodo-cyan text-kodo-void hover:shadow-lg hover:shadow-kodo-cyan/20 border border-transparent font-bold tracking-wide rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
|
onClick={onCheckout}
|
|
disabled={loading}
|
|
>
|
|
{loading ? 'PROCESSING...' : 'PROCEED TO CHECKOUT'}
|
|
</button>
|
|
)}
|
|
</Card>
|
|
|
|
<div className="bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50 flex items-start gap-3">
|
|
<ShieldCheck className="w-5 h-5 text-kodo-gold flex-shrink-0" />
|
|
<div>
|
|
<h4 className="font-bold text-white text-sm mb-1">Secure Checkout</h4>
|
|
<p className="text-xs text-gray-400 leading-relaxed">
|
|
Transactions are encrypted. Downloads are available immediately after payment.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|