215 lines
9.1 KiB
TypeScript
215 lines
9.1 KiB
TypeScript
import React from 'react'
|
||
import { X, ShoppingBag, Plus, Minus, Trash2, Tag, ArrowRight } from 'lucide-react'
|
||
import { Link } from 'react-router-dom'
|
||
import { useCartStore } from '../store/cartStore'
|
||
import { formatPrice } from '@homaroma/types'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { API_BASE } from '../types'
|
||
|
||
export default function CartDrawer() {
|
||
const { t } = useTranslation()
|
||
const { isCartOpen, toggleCart, items, updateQuantity, removeFromCart, getCartTotal } = useCartStore()
|
||
|
||
if (!isCartOpen) return null
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-[100] flex justify-end">
|
||
{/* Backdrop */}
|
||
<div
|
||
className="absolute inset-0 bg-night-950/80 backdrop-blur-sm animate-fade-in"
|
||
onClick={() => toggleCart(false)}
|
||
/>
|
||
|
||
{/* Drawer */}
|
||
<div className="relative w-full max-w-md h-full bg-night-900 shadow-2xl flex flex-col border-l border-white/10 animate-slide-left">
|
||
{/* Header */}
|
||
<div className="p-6 border-b border-white/10 flex items-center justify-between bg-night-950/50">
|
||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||
<ShoppingBag className="w-5 h-5 text-cyan-glow" />
|
||
{t('cart.title')}
|
||
<span className="text-sm font-normal text-slate-400 bg-white/5 px-2 py-0.5 rounded-full ml-2">
|
||
{t('cart.items', { count: items.length })}
|
||
</span>
|
||
</h2>
|
||
<button
|
||
onClick={() => toggleCart(false)}
|
||
className="p-2 hover:bg-white/5 rounded-full transition-colors"
|
||
>
|
||
<X className="w-5 h-5 text-slate-400 hover:text-white" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* Cart Items */}
|
||
<div className="flex-1 overflow-y-auto p-6 space-y-4">
|
||
{items.length === 0 ? (
|
||
<div className="h-full flex flex-col items-center justify-center text-slate-500 space-y-4">
|
||
<ShoppingBag className="w-16 h-16 opacity-20" />
|
||
<p>{t('cart.empty')}</p>
|
||
<button
|
||
onClick={() => toggleCart(false)}
|
||
className="text-cyan-glow hover:underline tracking-widest uppercase text-xs font-bold"
|
||
>
|
||
{t('cart.continueShopping')}
|
||
</button>
|
||
</div>
|
||
) : (
|
||
items.map((item) => (
|
||
<div key={item.cartItemId} className="flex gap-4 p-4 rounded-2xl bg-white/5 border border-white/5 group relative">
|
||
<div className="w-18 h-22 rounded-lg bg-night-950 overflow-hidden flex-shrink-0" style={{ width: '72px', height: '88px' }}>
|
||
<img
|
||
src={item.productImage || '/images/oil_ozone.png'}
|
||
alt={item.productName}
|
||
className="w-full h-full object-cover opacity-80"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex-1 flex flex-col pt-1 space-y-1 relative min-w-0">
|
||
<h3 className="font-bold text-sm leading-tight pr-6 truncate">{item.productName}</h3>
|
||
{item.variantSize && (
|
||
<p className="text-xs text-slate-500">{item.variantSize}</p>
|
||
)}
|
||
|
||
{/* Price row */}
|
||
<div className="flex items-baseline gap-1.5 mt-0.5">
|
||
<span className="text-xs text-slate-500">{formatPrice(item.price)}</span>
|
||
<span className="text-xs text-slate-600">×</span>
|
||
<span className="text-xs text-slate-500">{item.quantity}</span>
|
||
<span className="text-xs text-slate-600">=</span>
|
||
<span className="text-sm font-bold text-cyan-glow">{formatPrice(item.price * item.quantity)}</span>
|
||
</div>
|
||
|
||
{/* Quantity controls */}
|
||
<div className="flex items-center gap-2 mt-1">
|
||
<div className="flex items-center gap-2 bg-night-950/70 rounded-lg border border-white/5">
|
||
<button
|
||
onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)}
|
||
className="p-1.5 hover:text-cyan-glow transition-colors"
|
||
>
|
||
<Minus className="w-3 h-3" />
|
||
</button>
|
||
<span className="w-5 text-center text-xs font-bold">{item.quantity}</span>
|
||
<button
|
||
onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)}
|
||
className="p-1.5 hover:text-cyan-glow transition-colors"
|
||
>
|
||
<Plus className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => removeFromCart(item.cartItemId)}
|
||
className="absolute top-0 right-0 p-1.5 text-slate-600 hover:text-rose-500 transition-colors"
|
||
title="Remove item"
|
||
>
|
||
<Trash2 className="w-3.5 h-3.5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
{items.length > 0 && (
|
||
<CartDrawerFooter subtotal={getCartTotal()} onClose={() => toggleCart(false)} t={t} />
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function CartDrawerFooter({ subtotal, onClose }: { subtotal: number; onClose: () => void; t?: any }) {
|
||
const [savedCoupon, setSavedCoupon] = React.useState<string | null>(null)
|
||
const [discountAmount, setDiscountAmount] = React.useState<number>(0)
|
||
const [isFreeShipping, setIsFreeShipping] = React.useState<boolean>(false)
|
||
const [couponValid, setCouponValid] = React.useState<boolean>(false)
|
||
|
||
React.useEffect(() => {
|
||
const code = localStorage.getItem('irelax_active_coupon')
|
||
setSavedCoupon(code)
|
||
if (code && subtotal > 0) {
|
||
fetch(`${API_BASE}/coupons/validate`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ code, cartTotal: subtotal })
|
||
})
|
||
.then(r => r.json())
|
||
.then(data => {
|
||
if (data.valid) {
|
||
setCouponValid(true)
|
||
setDiscountAmount(data.discountAmount || 0)
|
||
setIsFreeShipping(data.isFreeShipping || false)
|
||
} else {
|
||
setCouponValid(false)
|
||
}
|
||
})
|
||
.catch(() => setCouponValid(false))
|
||
}
|
||
}, [subtotal])
|
||
|
||
const removeCoupon = () => {
|
||
localStorage.removeItem('irelax_active_coupon')
|
||
setSavedCoupon(null)
|
||
setDiscountAmount(0)
|
||
setIsFreeShipping(false)
|
||
setCouponValid(false)
|
||
}
|
||
|
||
|
||
|
||
return (
|
||
<div className="p-5 border-t border-white/10 bg-night-950/60 space-y-4">
|
||
|
||
{/* Totals */}
|
||
<div className="space-y-2 text-sm">
|
||
<div className="flex justify-between text-slate-400">
|
||
<span>ราคาสินค้า</span>
|
||
<span>{formatPrice(subtotal)}</span>
|
||
</div>
|
||
{(discountAmount > 0 || isFreeShipping) && savedCoupon && (
|
||
<div className="flex justify-between text-cyan-glow">
|
||
<span className="flex items-center gap-1.5">
|
||
ส่วนลดคูปอง
|
||
<span className="text-[10px] font-bold bg-cyan-glow/15 px-1.5 py-0.5 rounded tracking-widest">
|
||
{savedCoupon}
|
||
</span>
|
||
<button onClick={removeCoupon} className="text-slate-500 hover:text-rose-400 transition-colors" title="ยกเลิก">
|
||
<X className="w-3 h-3" />
|
||
</button>
|
||
</span>
|
||
<span>{isFreeShipping ? 'ส่งฟรี' : `- ${formatPrice(discountAmount)}`}</span>
|
||
</div>
|
||
)}
|
||
{savedCoupon && !couponValid && (
|
||
<div className="flex justify-between text-amber-400 text-xs">
|
||
<span className="flex items-center gap-1.5">
|
||
<Tag className="w-3 h-3" />
|
||
คูปอง <span className="font-bold tracking-widest">{savedCoupon}</span> (ยังไม่ถึงยอดขั้นต่ำ)
|
||
<button onClick={removeCoupon} className="text-slate-500 hover:text-rose-400 transition-colors">
|
||
<X className="w-3 h-3" />
|
||
</button>
|
||
</span>
|
||
</div>
|
||
)}
|
||
<div className="flex justify-between font-bold text-base pt-2 border-t border-white/10">
|
||
<span>รวมสุทธิ</span>
|
||
<span className="text-cyan-glow">{formatPrice(Math.max(0, subtotal - discountAmount))}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Checkout button */}
|
||
<Link
|
||
to="/checkout"
|
||
onClick={onClose}
|
||
className="flex items-center justify-center gap-2 w-full py-4 bg-white text-night-900 font-bold rounded-xl uppercase tracking-widest text-sm hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 group"
|
||
>
|
||
<ShoppingBag className="w-4 h-4" />
|
||
ดำเนินการชำระเงิน
|
||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||
</Link>
|
||
</div>
|
||
)
|
||
}
|
||
|