385 lines
16 KiB
TypeScript
385 lines
16 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import Navbar from '../components/Navbar'
|
|
import Footer from '../components/Footer'
|
|
import { API_BASE, formatPrice, type Category } from '../types'
|
|
import { useCartStore } from '../store/cartStore'
|
|
import { useAuthStore } from '../store/authStore'
|
|
import { Loader2 } from 'lucide-react'
|
|
|
|
export default function CheckoutPage() {
|
|
const navigate = useNavigate()
|
|
const { items, getCartTotal, clearCart } = useCartStore()
|
|
const { customer } = useAuthStore()
|
|
const [categories, setCategories] = useState<Category[]>([])
|
|
|
|
const [shippingFee, setShippingFee] = useState<number>(35)
|
|
const [loading, setLoading] = useState(false)
|
|
const [loadingSettings, setLoadingSettings] = useState(true)
|
|
|
|
const [couponCode, setCouponCode] = useState('')
|
|
const [appliedCoupon, setAppliedCoupon] = useState<string | null>(null)
|
|
const [discountAmount, setDiscountAmount] = useState<number>(0)
|
|
const [isFreeShipping, setIsFreeShipping] = useState<boolean>(false)
|
|
const [couponLoading, setCouponLoading] = useState(false)
|
|
const [couponError, setCouponError] = useState('')
|
|
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
address: ''
|
|
})
|
|
|
|
// Prefill form with LINE customer data
|
|
useEffect(() => {
|
|
if (customer) {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
name: prev.name || customer.displayName || '',
|
|
email: prev.email || customer.email || '',
|
|
phone: prev.phone || customer.phone || ''
|
|
}))
|
|
}
|
|
}, [customer])
|
|
|
|
// Load Settings (for dynamic shipping fee)
|
|
useEffect(() => {
|
|
fetch(`${API_BASE}/settings`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.shippingFee !== undefined) setShippingFee(data.shippingFee)
|
|
})
|
|
.catch(err => console.error("Could not load settings:", err))
|
|
.finally(() => setLoadingSettings(false))
|
|
|
|
fetch(`${API_BASE}/categories`)
|
|
.then(res => res.json())
|
|
.then(setCategories)
|
|
|
|
// Check if there's an active coupon saved in localStorage
|
|
const savedCoupon = localStorage.getItem('homaroma_active_coupon')
|
|
if (savedCoupon) {
|
|
setCouponCode(savedCoupon)
|
|
// We will trigger handleApplyCoupon but we need to wait for items/subtotal to be ready.
|
|
// So we'll handle this in another effect or let the user click apply if needed.
|
|
// Better yet, we can validate it immediately if subtotal is available.
|
|
}
|
|
}, [])
|
|
|
|
// Kick out if cart empty
|
|
useEffect(() => {
|
|
if (items.length === 0) {
|
|
navigate('/shop')
|
|
}
|
|
}, [items, navigate])
|
|
|
|
const subtotal = getCartTotal()
|
|
const effectiveShippingFee = isFreeShipping ? 0 : shippingFee
|
|
const total = Math.max(0, subtotal + effectiveShippingFee - discountAmount)
|
|
|
|
// Auto-apply saved coupon if subtotal is ready
|
|
useEffect(() => {
|
|
const savedCoupon = localStorage.getItem('homaroma_active_coupon')
|
|
if (savedCoupon && subtotal > 0 && !appliedCoupon && !couponError && !couponLoading) {
|
|
setCouponCode(savedCoupon)
|
|
// trigger fetch to validate
|
|
fetch(`${API_BASE}/coupons/validate`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ code: savedCoupon, cartTotal: subtotal })
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.valid) {
|
|
setAppliedCoupon(data.coupon.code)
|
|
setDiscountAmount(data.discountAmount)
|
|
setIsFreeShipping(data.isFreeShipping)
|
|
} else {
|
|
localStorage.removeItem('homaroma_active_coupon') // Remove invalid
|
|
}
|
|
})
|
|
.catch(console.error)
|
|
}
|
|
}, [subtotal, appliedCoupon])
|
|
|
|
// Re-validate applied coupon if subtotal changes
|
|
useEffect(() => {
|
|
if (appliedCoupon && subtotal > 0) {
|
|
fetch(`${API_BASE}/coupons/validate`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ code: appliedCoupon, cartTotal: subtotal })
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.valid) {
|
|
setDiscountAmount(data.discountAmount)
|
|
setIsFreeShipping(data.isFreeShipping)
|
|
} else {
|
|
removeCoupon()
|
|
setCouponError(data.error || 'Coupon is no longer valid for this cart')
|
|
}
|
|
})
|
|
}
|
|
}, [subtotal, appliedCoupon])
|
|
|
|
const handleApplyCoupon = async () => {
|
|
if (!couponCode.trim()) return
|
|
setCouponLoading(true)
|
|
setCouponError('')
|
|
|
|
try {
|
|
const res = await fetch(`${API_BASE}/coupons/validate`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ code: couponCode, cartTotal: subtotal })
|
|
})
|
|
const data = await res.json()
|
|
|
|
if (res.ok && data.valid) {
|
|
setAppliedCoupon(data.coupon.code)
|
|
setDiscountAmount(data.discountAmount)
|
|
setIsFreeShipping(data.isFreeShipping)
|
|
} else {
|
|
setCouponError(data.error || 'Invalid coupon')
|
|
setAppliedCoupon(null)
|
|
setDiscountAmount(0)
|
|
setIsFreeShipping(false)
|
|
}
|
|
} catch (err) {
|
|
setCouponError('Error validating coupon')
|
|
} finally {
|
|
setCouponLoading(false)
|
|
}
|
|
}
|
|
|
|
const removeCoupon = () => {
|
|
setAppliedCoupon(null)
|
|
setCouponCode('')
|
|
setDiscountAmount(0)
|
|
setIsFreeShipping(false)
|
|
setCouponError('')
|
|
localStorage.removeItem('homaroma_active_coupon')
|
|
}
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
|
|
try {
|
|
const orderData = {
|
|
customerId: customer ? customer.id : null,
|
|
customerName: formData.name,
|
|
customerEmail: formData.email,
|
|
customerPhone: formData.phone,
|
|
shippingAddress: formData.address,
|
|
totalAmount: total,
|
|
shippingFee: effectiveShippingFee,
|
|
couponCode: appliedCoupon || undefined,
|
|
discountAmount: discountAmount || undefined,
|
|
items: items.map(item => ({
|
|
productId: item.productId,
|
|
variantId: item.variantId,
|
|
quantity: item.quantity,
|
|
priceAtPurchase: item.price,
|
|
productName: item.productName,
|
|
variantSize: item.variantSize,
|
|
productImage: item.productImage
|
|
}))
|
|
}
|
|
|
|
const res = await fetch(`${API_BASE}/orders`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(orderData)
|
|
})
|
|
|
|
const responseData = await res.json()
|
|
|
|
if (res.ok) {
|
|
clearCart()
|
|
|
|
const existingStr = localStorage.getItem('homaroma_local_orders')
|
|
const existing = existingStr ? JSON.parse(existingStr) : []
|
|
if (!existing.includes(responseData.id)) {
|
|
localStorage.setItem('homaroma_local_orders', JSON.stringify([responseData.id, ...existing]))
|
|
}
|
|
|
|
navigate(`/order/${responseData.id}`)
|
|
} else {
|
|
alert(responseData.error || 'Failed to place order')
|
|
}
|
|
} catch (err) {
|
|
console.error(err)
|
|
alert('An error occurred. Please try again.')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Navbar categories={categories} />
|
|
|
|
<main className="max-w-6xl mx-auto px-6 pt-32 pb-24">
|
|
<h1 className="text-4xl font-bold mb-12">Checkout</h1>
|
|
|
|
<div className="flex flex-col lg:flex-row gap-12">
|
|
{/* Form Section */}
|
|
<div className="flex-1 space-y-8">
|
|
<form id="checkout-form" onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 space-y-6">
|
|
<h2 className="text-xl font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4">Shipping Information</h2>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<label className="text-xs uppercase tracking-widest text-slate-400">Full Name *</label>
|
|
<input
|
|
type="text"
|
|
required
|
|
value={formData.name}
|
|
onChange={e => setFormData({ ...formData, name: e.target.value })}
|
|
className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
|
|
placeholder="Jane Doe"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-xs uppercase tracking-widest text-slate-400">Phone Number *</label>
|
|
<input
|
|
type="tel"
|
|
required
|
|
value={formData.phone}
|
|
onChange={e => setFormData({ ...formData, phone: e.target.value })}
|
|
className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
|
|
placeholder="0812345678"
|
|
/>
|
|
</div>
|
|
<div className="md:col-span-2 space-y-2">
|
|
<label className="text-xs uppercase tracking-widest text-slate-400">Email Address *</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={formData.email}
|
|
onChange={e => setFormData({ ...formData, email: e.target.value })}
|
|
className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all"
|
|
placeholder="jane@example.com"
|
|
/>
|
|
</div>
|
|
<div className="md:col-span-2 space-y-2">
|
|
<label className="text-xs uppercase tracking-widest text-slate-400">Shipping Address *</label>
|
|
<textarea
|
|
required
|
|
rows={3}
|
|
value={formData.address}
|
|
onChange={e => setFormData({ ...formData, address: e.target.value })}
|
|
className="w-full bg-night-950 border border-white/10 rounded-lg p-3 text-white focus:border-cyan-glow focus:ring-1 focus:ring-cyan-glow outline-none transition-all resize-none"
|
|
placeholder="123 Serenity Street..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Summary Section */}
|
|
<div className="lg:w-96 space-y-6">
|
|
<div className="bg-night-900/50 p-8 rounded-2xl border border-white/5 sticky top-32">
|
|
<h2 className="text-xl font-bold uppercase tracking-widest text-cyan-glow border-b border-white/10 pb-4 mb-6">Order Summary</h2>
|
|
|
|
{/* Coupon Section */}
|
|
<div className="mb-6 pb-6 border-b border-white/10">
|
|
{!appliedCoupon ? (
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] uppercase font-bold tracking-widest text-slate-500">Discount Code</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={couponCode}
|
|
onChange={e => setCouponCode(e.target.value.toUpperCase())}
|
|
placeholder="e.g. SUMMER2026"
|
|
className="flex-1 bg-night-950 border border-white/10 rounded-lg px-3 text-sm text-white focus:border-cyan-glow outline-none uppercase tracking-widest"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleApplyCoupon}
|
|
disabled={couponLoading || !couponCode.trim()}
|
|
className="px-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-xs font-bold uppercase tracking-widest disabled:opacity-50 transition-all"
|
|
>
|
|
{couponLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Apply'}
|
|
</button>
|
|
</div>
|
|
{couponError && <p className="text-xs text-rose-500 mt-1">{couponError}</p>}
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-between bg-cyan-glow/10 border border-cyan-glow/20 rounded-lg px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<svg className="w-4 h-4 text-cyan-glow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span className="text-sm font-bold tracking-widest text-cyan-glow">{appliedCoupon}</span>
|
|
</div>
|
|
<button type="button" onClick={removeCoupon} className="text-xs text-slate-400 hover:text-rose-500 uppercase tracking-widest font-bold">Remove</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-4 mb-6">
|
|
{items.map(item => (
|
|
<div key={item.cartItemId} className="flex justify-between items-start gap-4 text-sm">
|
|
<div className="flex-1">
|
|
<p className="font-bold">{item.productName}</p>
|
|
<p className="text-slate-400 text-xs mt-0.5">{item.variantSize} x {item.quantity}</p>
|
|
</div>
|
|
<p className="font-medium text-cyan-glow">{formatPrice(item.price * item.quantity)}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="border-t border-white/10 pt-4 space-y-3 font-medium">
|
|
<div className="flex justify-between text-sm text-slate-300">
|
|
<span>Subtotal</span>
|
|
<span>{formatPrice(subtotal)}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm text-slate-300">
|
|
<span>Shipping Fee</span>
|
|
{loadingSettings ? <Loader2 className="w-4 h-4 animate-spin" /> :
|
|
<span className={isFreeShipping ? "line-through text-slate-500" : ""}>{formatPrice(shippingFee)}</span>
|
|
}
|
|
</div>
|
|
{isFreeShipping && (
|
|
<div className="flex justify-between text-sm text-emerald-400">
|
|
<span>Shipping Discount</span>
|
|
<span>- {formatPrice(shippingFee)}</span>
|
|
</div>
|
|
)}
|
|
{discountAmount > 0 && (
|
|
<div className="flex justify-between text-sm text-cyan-glow">
|
|
<span>Discount</span>
|
|
<span>- {formatPrice(discountAmount)}</span>
|
|
</div>
|
|
)}
|
|
<div className="border-t border-white/10 pt-3 mt-3 flex justify-between text-lg font-bold">
|
|
<span>Total</span>
|
|
<span className="text-cyan-glow">{formatPrice(total)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
form="checkout-form"
|
|
type="submit"
|
|
disabled={loading || loadingSettings}
|
|
className="w-full mt-8 py-4 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center gap-2"
|
|
>
|
|
{loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer categories={categories} />
|
|
</div>
|
|
)
|
|
}
|