108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { Card } from '../ui/card';
|
|
import { Tag, ShieldCheck, CreditCard } from 'lucide-react';
|
|
import { Button } from '../ui/button';
|
|
|
|
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="glass" className="p-8 bg-black/40 border-white/5 relative overflow-hidden group">
|
|
<div className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
|
|
|
|
<h3 className="font-bold text-white mb-8 uppercase tracking-[0.2em] text-xs flex items-center gap-3">
|
|
<CreditCard className="w-4 h-4 text-primary" /> Checkout Summary
|
|
</h3>
|
|
|
|
<div className="space-y-5 text-sm mb-8">
|
|
<div className="flex justify-between text-muted-foreground font-mono uppercase text-[10px]">
|
|
<span>Transaction Base</span>
|
|
<span className="text-white font-bold">
|
|
{formatPrice(subtotal)}
|
|
</span>
|
|
</div>
|
|
|
|
{discount && (
|
|
<div className="flex justify-between text-lime-500 font-mono uppercase text-[10px] bg-lime-500/5 p-2 rounded border border-lime-500/20">
|
|
<span className="flex items-center gap-2">
|
|
<Tag className="w-3 h-3" /> Protocol: {discount.code}
|
|
</span>
|
|
<span className="font-bold">-{formatPrice(discountAmount)}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-between text-muted-foreground font-mono uppercase text-[10px]">
|
|
<span>Regulatory Levy ({(taxRate * 100).toFixed(0)}%)</span>
|
|
<span className="text-white font-bold">
|
|
{formatPrice(taxAmount)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-white/5 pt-6 mb-8">
|
|
<div className="flex justify-between items-end">
|
|
<span className="text-xs font-mono text-muted-foreground uppercase tracking-widest">Total Liability</span>
|
|
<span className="text-3xl font-display font-bold text-white shadow-glow-cyan">
|
|
{formatPrice(total)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{onCheckout && (
|
|
<Button
|
|
variant="primary"
|
|
className="w-full h-14 font-mono tracking-widest uppercase text-xs shadow-glow-cyan"
|
|
onClick={onCheckout}
|
|
disabled={loading}
|
|
>
|
|
{loading ? 'PROCESSING UPLINK...' : 'AUTHORIZE TRANSACTION'}
|
|
</Button>
|
|
)}
|
|
</Card>
|
|
|
|
<div className="bg-white/2 backdrop-blur-md p-5 rounded-2xl border border-white/5 flex items-start gap-4">
|
|
<div className="p-2 bg-gold-500/10 rounded-lg">
|
|
<ShieldCheck className="w-5 h-5 text-gold-500" />
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-white text-xs mb-1 uppercase tracking-wider">Encrypted Node</h4>
|
|
<p className="text-[10px] text-muted-foreground leading-relaxed font-mono uppercase">
|
|
SECURE FLOW ENABLED. DATA PACKETS ARE ENCRYPTED VIA AES-256.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|