73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { useCartStore } from '@/lib/cart-store';
|
|
import { formatCurrency } from '@/lib/utils';
|
|
import Link from 'next/link';
|
|
import { ShieldCheck, ArrowRight, Tag } from 'lucide-react';
|
|
|
|
export function CartSummary() {
|
|
const { items, getTotal } = useCartStore();
|
|
const [promoCode, setPromoCode] = useState('');
|
|
|
|
if (items.length === 0) return null;
|
|
|
|
const total = getTotal();
|
|
const subtotal = total / 1.23;
|
|
const vat = total - subtotal;
|
|
|
|
return (
|
|
<div className="bg-slate-50 p-6 md:p-8 rounded-2xl border border-border sticky top-24">
|
|
<h3 className="text-xl font-bold text-primary font-heading mb-6">Podsumowanie zamówienia</h3>
|
|
|
|
<div className="mb-8">
|
|
<label htmlFor="promo" className="text-sm font-semibold text-text-muted mb-2 block">Posiadasz kod rabatowy?</label>
|
|
<div className="flex gap-2">
|
|
<div className="relative flex-grow">
|
|
<Tag className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
|
|
<input
|
|
id="promo"
|
|
type="text"
|
|
value={promoCode}
|
|
onChange={(e) => setPromoCode(e.target.value)}
|
|
placeholder="Wprowadź kod"
|
|
className="w-full pl-9 pr-4 py-2.5 rounded-xl border border-border focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all text-sm"
|
|
/>
|
|
</div>
|
|
<button className="btn btn-outline btn-primary bg-white shrink-0">Zastosuj</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 mb-6 border-b border-border/50 pb-6">
|
|
<div className="flex justify-between text-sm text-text-muted">
|
|
<span>Suma netto</span>
|
|
<span className="font-semibold text-primary">{formatCurrency(subtotal)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm text-text-muted">
|
|
<span>Podatek VAT (23%)</span>
|
|
<span className="font-semibold text-primary">{formatCurrency(vat)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-end mb-8">
|
|
<span className="text-lg font-bold text-primary">Do zapłaty brutto</span>
|
|
<span className="text-3xl font-extrabold text-primary font-heading text-right">{formatCurrency(total)}</span>
|
|
</div>
|
|
|
|
<Link href="/zamowienie" className="block w-full btn btn-primary font-bold group cursor-pointer text-white">
|
|
|
|
Przejdź do zamówienia
|
|
<ArrowRight className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
|
|
|
|
</Link>
|
|
|
|
<div className="mt-6 flex flex-col gap-3">
|
|
<div className="flex items-center gap-2 text-xs text-text-muted font-medium justify-center">
|
|
<ShieldCheck className="w-4 h-4 text-green-600" />
|
|
Bezpieczne zakupy z certyfikatem SSL
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|