Full website
This commit is contained in:
Your Name committed
1 parent
807c43ece5
commit
ea9f33f60e
40 files changed
+4503
-1202
No files matched your search
@@ -1,15 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { getCategoryImage, formatPrice, type Product, type TranslatableString } from '@homaroma/types'
|
||||
import { getCategoryImage, formatPrice, type Product } from '@homaroma/types'
|
||||
import { useCartStore } from '../store/cartStore'
|
||||
|
||||
/** Resolve TranslatableString → plain string */
|
||||
function resolveStr(v: TranslatableString | null | undefined, lang = 'th'): string {
|
||||
if (!v) return ''
|
||||
if (typeof v === 'string') return v
|
||||
return v[lang] ?? v['th'] ?? v['en'] ?? Object.values(v)[0] ?? ''
|
||||
}
|
||||
import { resolveLocalized } from '../lib/localization'
|
||||
|
||||
interface Props {
|
||||
product: Product
|
||||
@@ -20,129 +15,134 @@ export default function AddToCartSection({ product }: Props) {
|
||||
const { addToCart, toggleCart } = useCartStore()
|
||||
|
||||
const currentVariant = product.variants[selectedVariant]
|
||||
const categoryName = resolveLocalized(product.category.name)
|
||||
const productName = resolveLocalized(product.name) || product.scent.name
|
||||
const description = resolveLocalized(product.description)
|
||||
|
||||
const handleAddToCart = () => {
|
||||
if (!currentVariant) return
|
||||
|
||||
addToCart({
|
||||
productId: product.id,
|
||||
variantId: currentVariant.id,
|
||||
quantity: 1,
|
||||
price: currentVariant.price || product.price || 0,
|
||||
productName: product.scent.name,
|
||||
productName,
|
||||
variantSize: currentVariant.size,
|
||||
productImage: product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''),
|
||||
productImage: product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName),
|
||||
})
|
||||
toggleCart(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Desktop Info Panel */}
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-2">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-80">
|
||||
{typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''}
|
||||
{categoryName && (
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
|
||||
{categoryName}
|
||||
</p>
|
||||
)}
|
||||
<h1 className="text-4xl font-semibold leading-tight text-pop-black md:text-6xl">
|
||||
{productName}
|
||||
</h1>
|
||||
<p className="text-sm font-semibold uppercase tracking-widest text-gray-500">
|
||||
Premium Collection
|
||||
</p>
|
||||
<h1 className="text-5xl font-bold leading-tight">{product.scent.name}</h1>
|
||||
<p className="text-slate-400 text-sm uppercase tracking-widest">Premium Collection</p>
|
||||
</div>
|
||||
|
||||
{resolveStr(product.description) && (
|
||||
<p className="text-slate-300 leading-relaxed">{resolveStr(product.description)}</p>
|
||||
{description && <p className="leading-relaxed text-gray-600">{description}</p>}
|
||||
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className="text-4xl font-bold text-pop-pink">
|
||||
{formatPrice(currentVariant?.price ?? product.price)}
|
||||
</span>
|
||||
{currentVariant && <span className="text-sm text-gray-500">/ {currentVariant.size}</span>}
|
||||
</div>
|
||||
|
||||
{product.variants.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-bold uppercase tracking-widest text-gray-500">Select Size</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{product.variants.map((variant, index) => (
|
||||
<button
|
||||
key={variant.id}
|
||||
onClick={() => setSelectedVariant(index)}
|
||||
className={`rounded-xl border px-5 py-3 text-sm font-bold uppercase tracking-widest transition ${
|
||||
selectedVariant === index
|
||||
? 'border-pop-pink bg-pop-pink text-white shadow-brutal'
|
||||
: 'border-gray-200 bg-white text-gray-600 hover:border-pop-pink hover:text-pop-pink'
|
||||
}`}
|
||||
>
|
||||
{variant.size}
|
||||
<span className={`mt-1 block text-[10px] ${selectedVariant === index ? 'text-white/80' : 'text-gray-400'}`}>
|
||||
{formatPrice(variant.price)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Price */}
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className="text-4xl font-bold text-cyan-glow">
|
||||
{formatPrice(currentVariant?.price)}
|
||||
</span>
|
||||
{currentVariant && (
|
||||
<span className="text-slate-400 text-sm">/ {currentVariant.size}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Variant Selector */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs uppercase tracking-widest text-slate-400 font-semibold">Select Size</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{product.variants.map((v, i) => (
|
||||
<button
|
||||
key={v.id}
|
||||
onClick={() => setSelectedVariant(i)}
|
||||
className={`px-5 py-2.5 rounded-lg text-sm font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
selectedVariant === i
|
||||
? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.4)]'
|
||||
: 'glass hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{v.size}
|
||||
<span className={`block text-[10px] mt-0.5 ${selectedVariant === i ? 'text-night-800' : 'text-slate-400'}`}>
|
||||
{formatPrice(v.price)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-4">
|
||||
<div className="hidden gap-4 md:flex">
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="flex-1 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"
|
||||
className="flex-1 rounded-full bg-pop-black px-8 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"
|
||||
>
|
||||
Add to Cart
|
||||
</button>
|
||||
<button className="glass p-4 rounded-lg hover:bg-white/10 transition-all">
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
{categoryName && (
|
||||
<Link
|
||||
href={`/category/${product.category.id}`}
|
||||
className="rounded-full border border-gray-200 bg-white px-8 py-4 font-bold uppercase tracking-widest text-gray-600 transition hover:border-pop-pink hover:text-pop-pink"
|
||||
>
|
||||
{categoryName}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Meta */}
|
||||
<div className="border-t border-white/5 pt-6 grid grid-cols-2 gap-4 text-sm text-slate-400">
|
||||
<div className="grid grid-cols-2 gap-4 border-t border-gray-200 pt-6 text-sm text-gray-500">
|
||||
<div>
|
||||
<span className="text-xs uppercase tracking-widest block mb-1">Scent</span>
|
||||
<span className="text-white font-medium">{product.scent.name}</span>
|
||||
<span className="mb-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Scent</span>
|
||||
<span className="font-semibold text-pop-black">{product.scent.name}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs uppercase tracking-widest block mb-1">Category</span>
|
||||
<Link href={`/category/${product.category.id}`} className="text-white font-medium hover:text-cyan-glow transition-colors">
|
||||
{typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''}
|
||||
<span className="mb-1 block text-xs font-bold uppercase tracking-widest text-gray-400">Category</span>
|
||||
<Link href={`/category/${product.category.id}`} className="font-semibold text-pop-black transition hover:text-pop-pink">
|
||||
{categoryName}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Sticky Add to Cart Bar */}
|
||||
<div className="md:hidden fixed bottom-0 left-0 right-0 p-4 bg-night-950/95 backdrop-blur-xl border-t border-white/10 z-40 animate-fade-in flex flex-col gap-3 shadow-[0_-10px_30px_rgba(0,0,0,0.5)]">
|
||||
<div className="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/95 p-4 shadow-[0_-10px_30px_rgba(0,0,0,0.08)] backdrop-blur md:hidden">
|
||||
{product.variants.length > 1 && (
|
||||
<div className="flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none' }}>
|
||||
{product.variants.map((v, i) => (
|
||||
<div className="mb-3 flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none' }}>
|
||||
{product.variants.map((variant, index) => (
|
||||
<button
|
||||
key={`mobile-v-${v.id}`}
|
||||
onClick={() => setSelectedVariant(i)}
|
||||
className={`flex-shrink-0 px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all border whitespace-nowrap ${
|
||||
selectedVariant === i
|
||||
? 'bg-cyan-glow/10 border-cyan-glow text-cyan-glow'
|
||||
: 'bg-white/5 border-white/10 text-slate-400'
|
||||
key={`mobile-v-${variant.id}`}
|
||||
onClick={() => setSelectedVariant(index)}
|
||||
className={`flex-shrink-0 rounded-full border px-4 py-2 text-[10px] font-bold uppercase tracking-widest transition ${
|
||||
selectedVariant === index
|
||||
? 'border-pop-pink bg-pop-pink text-white'
|
||||
: 'border-gray-200 bg-white text-gray-500'
|
||||
}`}
|
||||
>
|
||||
{v.size}
|
||||
{variant.size}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] uppercase tracking-widest text-slate-400">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">
|
||||
{product.variants.length > 1 ? currentVariant?.size : 'Total Price'}
|
||||
</span>
|
||||
<span className="text-xl font-bold text-cyan-glow">{formatPrice(currentVariant?.price)}</span>
|
||||
<span className="text-xl font-bold text-pop-pink">{formatPrice(currentVariant?.price ?? product.price)}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleAddToCart}
|
||||
className="flex-1 py-3.5 bg-cyan-glow text-night-900 font-bold rounded-lg tracking-widest uppercase hover:brightness-110 shadow-[0_0_15px_rgba(102,252,241,0.3)] transition-all"
|
||||
className="flex-1 rounded-full bg-pop-black px-5 py-3.5 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"
|
||||
>
|
||||
Add to Cart
|
||||
</button>
|
||||
|
||||
@@ -13,83 +13,62 @@ export default function CartDrawer() {
|
||||
|
||||
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"
|
||||
<div
|
||||
className="absolute inset-0 bg-pop-black/45 backdrop-blur-sm"
|
||||
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" />
|
||||
|
||||
<div className="relative flex h-full w-full max-w-md flex-col border-l border-gray-200 bg-white shadow-2xl">
|
||||
<div className="flex items-center justify-between border-b border-gray-100 bg-pop-bg/70 p-6">
|
||||
<h2 className="flex items-center gap-2 text-xl font-bold text-pop-black">
|
||||
<ShoppingBag className="h-5 w-5 text-pop-pink" />
|
||||
{t('cart.title')}
|
||||
<span className="text-sm font-normal text-slate-400 bg-white/5 px-2 py-0.5 rounded-full ml-2">
|
||||
<span className="ml-2 rounded-full bg-white px-2 py-0.5 text-sm font-normal text-gray-500">
|
||||
{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 onClick={() => toggleCart(false)} className="rounded-full border border-gray-200 p-2 text-gray-500 transition-colors hover:text-pop-pink">
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Cart Items */}
|
||||
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||||
<div className="flex-1 space-y-6 overflow-y-auto p-6">
|
||||
{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" />
|
||||
<div className="flex h-full flex-col items-center justify-center space-y-4 text-gray-500">
|
||||
<ShoppingBag className="h-16 w-16 opacity-30" />
|
||||
<p>{t('cart.empty')}</p>
|
||||
<button
|
||||
onClick={() => toggleCart(false)}
|
||||
className="text-cyan-glow hover:underline tracking-widest uppercase text-xs font-bold"
|
||||
>
|
||||
<button onClick={() => toggleCart(false)} className="text-xs font-bold uppercase tracking-widest text-pop-pink hover:underline">
|
||||
{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-20 h-24 rounded-lg bg-night-950 overflow-hidden flex-shrink-0">
|
||||
<img
|
||||
src={item.productImage || '/images/oil_ozone.png'}
|
||||
<div key={item.cartItemId} className="group relative flex gap-4 rounded-2xl border border-gray-100 bg-pop-bg/60 p-4">
|
||||
<div className="h-24 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-white">
|
||||
<img
|
||||
src={item.productImage || '/images/oil_ozone.png'}
|
||||
alt={item.productName}
|
||||
className="w-full h-full object-cover opacity-80"
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col pt-1 space-y-1 relative">
|
||||
<h3 className="font-bold text-sm leading-tight pr-6">{item.productName}</h3>
|
||||
{item.variantSize && (
|
||||
<p className="text-xs text-slate-400">{item.variantSize}</p>
|
||||
)}
|
||||
<p className="text-cyan-glow text-sm font-bold mt-auto">{formatPrice(item.price)}</p>
|
||||
|
||||
<div className="flex items-center gap-3 mt-2 bg-night-950/50 rounded-lg w-max border border-white/5">
|
||||
<button
|
||||
onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)}
|
||||
className="p-1 hover:text-cyan-glow transition-colors"
|
||||
>
|
||||
<Minus className="w-4 h-4" />
|
||||
|
||||
<div className="relative flex flex-1 flex-col space-y-1 pt-1">
|
||||
<h3 className="pr-6 text-sm font-bold leading-tight text-pop-black">{item.productName}</h3>
|
||||
{item.variantSize && <p className="text-xs text-gray-500">{item.variantSize}</p>}
|
||||
<p className="mt-auto text-sm font-bold text-pop-pink">{formatPrice(item.price)}</p>
|
||||
|
||||
<div className="mt-2 flex w-max items-center gap-3 rounded-lg border border-gray-200 bg-white">
|
||||
<button onClick={() => updateQuantity(item.cartItemId, item.quantity - 1)} className="p-1 transition-colors hover:text-pop-pink">
|
||||
<Minus className="h-4 w-4" />
|
||||
</button>
|
||||
<span className="w-4 text-center text-xs font-bold">{item.quantity}</span>
|
||||
<button
|
||||
onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)}
|
||||
className="p-1 hover:text-cyan-glow transition-colors"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<button onClick={() => updateQuantity(item.cartItemId, item.quantity + 1)} className="p-1 transition-colors hover:text-pop-pink">
|
||||
<Plus className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => removeFromCart(item.cartItemId)}
|
||||
className="absolute top-1 right-0 p-1 text-slate-500 hover:text-rose-500 transition-colors opacity-0 group-hover:opacity-100"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
<button onClick={() => removeFromCart(item.cartItemId)} className="absolute right-0 top-1 p-1 text-gray-400 opacity-0 transition-colors hover:text-rose-500 group-hover:opacity-100">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,19 +76,14 @@ export default function CartDrawer() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{items.length > 0 && (
|
||||
<div className="p-6 border-t border-white/10 bg-night-950/50 space-y-6">
|
||||
<div className="space-y-6 border-t border-gray-100 bg-pop-bg/70 p-6">
|
||||
<div className="flex items-center justify-between text-lg font-bold">
|
||||
<span>{t('cart.subtotal')}</span>
|
||||
<span className="text-cyan-glow">{formatPrice(getCartTotal())}</span>
|
||||
<span className="text-pop-pink">{formatPrice(getCartTotal())}</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 text-center">{t('cart.shippingNote')}</p>
|
||||
<Link
|
||||
href="/checkout"
|
||||
onClick={() => toggleCart(false)}
|
||||
className="btn-primary w-full py-4 text-center block uppercase tracking-widest text-sm"
|
||||
>
|
||||
<p className="text-center text-xs text-gray-500">{t('cart.shippingNote')}</p>
|
||||
<Link href="/checkout" onClick={() => toggleCart(false)} className="block w-full rounded-full bg-pop-black py-4 text-center text-sm font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
|
||||
{t('cart.proceed')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,765 @@
|
||||
"use client";
|
||||
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { AlertCircle, CheckCircle2, Loader2, PackageCheck, ShoppingBag, Ticket, UserRound } from 'lucide-react'
|
||||
import { formatPrice, type CartItem, type CustomerAddress } from '@homaroma/types'
|
||||
|
||||
import { API_BASE } from '../lib/api'
|
||||
import { useAuthStore, type Customer } from '../store/authStore'
|
||||
import { useCartStore } from '../store/cartStore'
|
||||
|
||||
type StoreSettings = {
|
||||
shippingFee?: number
|
||||
}
|
||||
|
||||
type Promotion = {
|
||||
id: number
|
||||
name: string
|
||||
level: number
|
||||
type: 'PERCENTAGE' | 'FIXED_AMOUNT' | string
|
||||
value: number
|
||||
minPurchase: number
|
||||
}
|
||||
|
||||
type CouponValidationResponse = {
|
||||
valid?: boolean
|
||||
coupon?: {
|
||||
code: string
|
||||
}
|
||||
discountAmount?: number
|
||||
isFreeShipping?: boolean
|
||||
error?: string
|
||||
}
|
||||
|
||||
type CustomerWithPoints = Customer & {
|
||||
points?: number
|
||||
}
|
||||
|
||||
type CheckoutFormState = {
|
||||
name: string
|
||||
email: string
|
||||
phone: string
|
||||
}
|
||||
|
||||
type AddressFormState = {
|
||||
addressLine: string
|
||||
subdistrict: string
|
||||
district: string
|
||||
province: string
|
||||
zipcode: string
|
||||
}
|
||||
|
||||
type CreatedOrder = {
|
||||
id: number
|
||||
}
|
||||
|
||||
const emptyAddressForm: AddressFormState = {
|
||||
addressLine: '',
|
||||
subdistrict: '',
|
||||
district: '',
|
||||
province: '',
|
||||
zipcode: '',
|
||||
}
|
||||
|
||||
function calculatePromotionDiscount(promotion: Promotion | undefined, amount: number) {
|
||||
if (!promotion || amount < promotion.minPurchase) return 0
|
||||
if (promotion.type === 'PERCENTAGE') return amount * (promotion.value / 100)
|
||||
return Math.min(promotion.value, amount)
|
||||
}
|
||||
|
||||
function formatAddress(address: CustomerAddress) {
|
||||
return `${address.addressLine} ต.${address.subdistrict} อ.${address.district} จ.${address.province} ${address.zipcode}`
|
||||
}
|
||||
|
||||
async function readJson<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const response = await fetch(`${API_BASE}${path}`, init)
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
const message = data && typeof data === 'object' && 'error' in data && typeof data.error === 'string'
|
||||
? data.error
|
||||
: `${path} returned ${response.status}`
|
||||
throw new Error(message)
|
||||
}
|
||||
|
||||
return data as T
|
||||
}
|
||||
|
||||
function toOrderItem(item: CartItem) {
|
||||
return {
|
||||
productId: item.productId,
|
||||
variantId: item.variantId ?? undefined,
|
||||
quantity: item.quantity,
|
||||
priceAtPurchase: item.price,
|
||||
productName: item.productName,
|
||||
variantSize: item.variantSize ?? undefined,
|
||||
productImage: item.productImage ?? undefined,
|
||||
}
|
||||
}
|
||||
|
||||
function saveLocalOrder(orderId: number) {
|
||||
try {
|
||||
const existingValue = window.localStorage.getItem('homaroma_local_orders')
|
||||
const existing = existingValue ? JSON.parse(existingValue) : []
|
||||
const orderIds = Array.isArray(existing) ? existing.filter((id) => typeof id === 'number') : []
|
||||
|
||||
if (!orderIds.includes(orderId)) {
|
||||
window.localStorage.setItem('homaroma_local_orders', JSON.stringify([orderId, ...orderIds]))
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('[website-checkout] Failed to persist local order history', error)
|
||||
}
|
||||
}
|
||||
|
||||
export default function CheckoutClient() {
|
||||
const router = useRouter()
|
||||
const { customer } = useAuthStore()
|
||||
const { items, clearCart, getCartTotal } = useCartStore()
|
||||
const [hydrated, setHydrated] = useState(false)
|
||||
const [shippingFee, setShippingFee] = useState(35)
|
||||
const [loadingSettings, setLoadingSettings] = useState(true)
|
||||
const [activePromotions, setActivePromotions] = useState<Promotion[]>([])
|
||||
const [savedAddresses, setSavedAddresses] = useState<CustomerAddress[]>([])
|
||||
const [selectedAddressId, setSelectedAddressId] = useState<number | 'new' | null>('new')
|
||||
const [customerPoints, setCustomerPoints] = useState(0)
|
||||
const [usePoints, setUsePoints] = useState(false)
|
||||
const [pointsToUse, setPointsToUse] = useState(0)
|
||||
const [formData, setFormData] = useState<CheckoutFormState>({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
})
|
||||
const [addressForm, setAddressForm] = useState<AddressFormState>(emptyAddressForm)
|
||||
const [couponCode, setCouponCode] = useState('')
|
||||
const [appliedCoupon, setAppliedCoupon] = useState<string | null>(null)
|
||||
const [discountAmount, setDiscountAmount] = useState(0)
|
||||
const [isFreeShipping, setIsFreeShipping] = useState(false)
|
||||
const [couponLoading, setCouponLoading] = useState(false)
|
||||
const [couponError, setCouponError] = useState<string | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [submitError, setSubmitError] = useState<string | null>(null)
|
||||
const [summaryOpen, setSummaryOpen] = useState(false)
|
||||
|
||||
const subtotal = getCartTotal()
|
||||
const promoLevel1 = useMemo(
|
||||
() => activePromotions.find((promotion) => promotion.level === 1 && subtotal >= promotion.minPurchase),
|
||||
[activePromotions, subtotal],
|
||||
)
|
||||
const promoLevel1Disc = calculatePromotionDiscount(promoLevel1, subtotal)
|
||||
const subtotalAfterL1 = Math.max(0, subtotal - promoLevel1Disc)
|
||||
const promoLevel2 = useMemo(
|
||||
() => activePromotions.find((promotion) => promotion.level === 2 && subtotalAfterL1 >= promotion.minPurchase),
|
||||
[activePromotions, subtotalAfterL1],
|
||||
)
|
||||
const promoLevel2Disc = calculatePromotionDiscount(promoLevel2, subtotalAfterL1)
|
||||
const subtotalAfterL2 = Math.max(0, subtotalAfterL1 - promoLevel2Disc)
|
||||
const subtotalAfterCoupon = Math.max(0, subtotalAfterL2 - discountAmount)
|
||||
const maxPointsAllowed = Math.floor(subtotalAfterCoupon)
|
||||
const pointsDiscount = usePoints ? Math.min(pointsToUse, customerPoints, maxPointsAllowed) : 0
|
||||
const effectiveShippingFee = isFreeShipping ? 0 : shippingFee
|
||||
const total = Math.max(0, subtotalAfterCoupon - pointsDiscount + effectiveShippingFee)
|
||||
|
||||
useEffect(() => {
|
||||
queueMicrotask(() => setHydrated(true))
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const loadCheckoutData = async () => {
|
||||
setLoadingSettings(true)
|
||||
try {
|
||||
const [settings, promotions] = await Promise.all([
|
||||
readJson<StoreSettings>('/settings'),
|
||||
readJson<Promotion[]>('/promotions/active'),
|
||||
])
|
||||
|
||||
if (typeof settings.shippingFee === 'number') setShippingFee(settings.shippingFee)
|
||||
setActivePromotions(Array.isArray(promotions) ? promotions : [])
|
||||
} catch (error) {
|
||||
setSubmitError(error instanceof Error ? error.message : 'ไม่สามารถโหลดข้อมูล checkout ได้')
|
||||
} finally {
|
||||
setLoadingSettings(false)
|
||||
}
|
||||
}
|
||||
|
||||
void loadCheckoutData()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
queueMicrotask(() => {
|
||||
const savedCoupon = window.localStorage.getItem('homaroma_active_coupon')
|
||||
if (savedCoupon) setCouponCode(savedCoupon)
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (!customer) return
|
||||
|
||||
queueMicrotask(() => {
|
||||
setFormData((current) => ({
|
||||
name: current.name || customer.displayName || '',
|
||||
email: current.email || customer.email || '',
|
||||
phone: current.phone || customer.phone || '',
|
||||
}))
|
||||
})
|
||||
|
||||
const loadCustomerData = async () => {
|
||||
try {
|
||||
const [addresses, profile] = await Promise.all([
|
||||
readJson<CustomerAddress[]>(`/profile/${customer.id}/addresses`),
|
||||
readJson<CustomerWithPoints>(`/customers/${customer.id}`),
|
||||
])
|
||||
const addressList = Array.isArray(addresses) ? addresses : []
|
||||
const defaultAddress = addressList.find((address) => address.isDefault)
|
||||
|
||||
setSavedAddresses(addressList)
|
||||
if (defaultAddress) {
|
||||
setSelectedAddressId(defaultAddress.id)
|
||||
setFormData((current) => ({
|
||||
...current,
|
||||
name: current.name || defaultAddress.recipientName,
|
||||
phone: current.phone || defaultAddress.phone,
|
||||
}))
|
||||
} else if (addressList.length > 0) {
|
||||
setSelectedAddressId(addressList[0].id)
|
||||
}
|
||||
|
||||
setCustomerPoints(profile.points ?? customer.points ?? 0)
|
||||
} catch (error) {
|
||||
console.warn('[website-checkout] Failed to preload customer checkout data', error)
|
||||
}
|
||||
}
|
||||
|
||||
void loadCustomerData()
|
||||
}, [customer])
|
||||
|
||||
useEffect(() => {
|
||||
if (!couponCode || appliedCoupon || subtotalAfterL2 <= 0) return
|
||||
|
||||
const savedCoupon = window.localStorage.getItem('homaroma_active_coupon')
|
||||
if (!savedCoupon || savedCoupon !== couponCode) return
|
||||
|
||||
const applySavedCoupon = async () => {
|
||||
try {
|
||||
const data = await readJson<CouponValidationResponse>('/coupons/validate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code: savedCoupon, cartTotal: subtotalAfterL2 }),
|
||||
})
|
||||
|
||||
if (data.valid && data.coupon?.code) {
|
||||
setAppliedCoupon(data.coupon.code)
|
||||
setDiscountAmount(data.discountAmount ?? 0)
|
||||
setIsFreeShipping(Boolean(data.isFreeShipping))
|
||||
} else {
|
||||
window.localStorage.removeItem('homaroma_active_coupon')
|
||||
}
|
||||
} catch {
|
||||
window.localStorage.removeItem('homaroma_active_coupon')
|
||||
}
|
||||
}
|
||||
|
||||
void applySavedCoupon()
|
||||
}, [appliedCoupon, couponCode, subtotalAfterL2])
|
||||
|
||||
const applyCoupon = async () => {
|
||||
const code = couponCode.trim().toUpperCase()
|
||||
if (!code) return
|
||||
|
||||
setCouponLoading(true)
|
||||
setCouponError(null)
|
||||
|
||||
try {
|
||||
const data = await readJson<CouponValidationResponse>('/coupons/validate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ code, cartTotal: subtotalAfterL2 }),
|
||||
})
|
||||
|
||||
if (!data.valid || !data.coupon?.code) {
|
||||
throw new Error(data.error || 'คูปองนี้ไม่สามารถใช้ได้')
|
||||
}
|
||||
|
||||
setAppliedCoupon(data.coupon.code)
|
||||
setDiscountAmount(data.discountAmount ?? 0)
|
||||
setIsFreeShipping(Boolean(data.isFreeShipping))
|
||||
window.localStorage.setItem('homaroma_active_coupon', data.coupon.code)
|
||||
} catch (error) {
|
||||
setAppliedCoupon(null)
|
||||
setDiscountAmount(0)
|
||||
setIsFreeShipping(false)
|
||||
setCouponError(error instanceof Error ? error.message : 'ไม่สามารถตรวจสอบคูปองได้')
|
||||
} finally {
|
||||
setCouponLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const removeCoupon = () => {
|
||||
setAppliedCoupon(null)
|
||||
setCouponCode('')
|
||||
setDiscountAmount(0)
|
||||
setIsFreeShipping(false)
|
||||
setCouponError(null)
|
||||
window.localStorage.removeItem('homaroma_active_coupon')
|
||||
}
|
||||
|
||||
const selectAddress = (address: CustomerAddress | 'new') => {
|
||||
if (address === 'new') {
|
||||
setSelectedAddressId('new')
|
||||
return
|
||||
}
|
||||
|
||||
setSelectedAddressId(address.id)
|
||||
setFormData((current) => ({
|
||||
...current,
|
||||
name: current.name || address.recipientName,
|
||||
phone: current.phone || address.phone,
|
||||
}))
|
||||
}
|
||||
|
||||
const resolveShippingAddress = () => {
|
||||
if (selectedAddressId && selectedAddressId !== 'new') {
|
||||
const address = savedAddresses.find((item) => item.id === selectedAddressId)
|
||||
if (address) return formatAddress(address)
|
||||
}
|
||||
|
||||
const values = Object.values(addressForm).map((value) => value.trim())
|
||||
if (values.some((value) => !value)) return ''
|
||||
return `${addressForm.addressLine.trim()} ต.${addressForm.subdistrict.trim()} อ.${addressForm.district.trim()} จ.${addressForm.province.trim()} ${addressForm.zipcode.trim()}`
|
||||
}
|
||||
|
||||
const createOrder = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
setSubmitError(null)
|
||||
|
||||
if (items.length === 0) {
|
||||
setSubmitError('ตะกร้าสินค้าว่าง กรุณาเลือกสินค้าก่อน checkout')
|
||||
return
|
||||
}
|
||||
|
||||
const shippingAddress = resolveShippingAddress()
|
||||
if (!shippingAddress) {
|
||||
setSubmitError('กรุณากรอกที่อยู่จัดส่งให้ครบถ้วน')
|
||||
return
|
||||
}
|
||||
|
||||
setSubmitting(true)
|
||||
|
||||
try {
|
||||
const order = await readJson<CreatedOrder>('/orders', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
customerId: customer ? customer.id : null,
|
||||
customerName: formData.name,
|
||||
customerEmail: formData.email,
|
||||
customerPhone: formData.phone,
|
||||
shippingAddress,
|
||||
totalAmount: total,
|
||||
shippingFee: effectiveShippingFee,
|
||||
subtotal,
|
||||
promoLevel1Name: promoLevel1?.name ?? null,
|
||||
promoLevel1Disc,
|
||||
promoLevel2Name: promoLevel2?.name ?? null,
|
||||
promoLevel2Disc,
|
||||
couponCode: appliedCoupon ?? null,
|
||||
discountAmount,
|
||||
pointsUsed: pointsDiscount,
|
||||
pointsDiscount,
|
||||
items: items.map(toOrderItem),
|
||||
}),
|
||||
})
|
||||
|
||||
clearCart()
|
||||
saveLocalOrder(order.id)
|
||||
router.push(`/order/${order.id}`)
|
||||
} catch (error) {
|
||||
setSubmitError(error instanceof Error ? error.message : 'ไม่สามารถสร้างคำสั่งซื้อได้')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!hydrated) {
|
||||
return (
|
||||
<div className="rounded-3xl bg-white p-10 text-center shadow-brutal">
|
||||
<Loader2 className="mx-auto h-8 w-8 animate-spin text-pop-pink" />
|
||||
<p className="mt-4 text-sm font-semibold text-gray-500">กำลังโหลดตะกร้าสินค้า...</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<div className="mx-auto max-w-xl rounded-3xl bg-white p-10 text-center shadow-brutal">
|
||||
<ShoppingBag className="mx-auto h-14 w-14 text-pop-pink" />
|
||||
<h2 className="mt-5 text-3xl font-semibold text-pop-black">ตะกร้าสินค้าว่าง</h2>
|
||||
<p className="mt-3 text-gray-600">เลือกสินค้าที่คุณชอบก่อน แล้วกลับมายืนยันคำสั่งซื้อที่หน้านี้ได้เลย</p>
|
||||
<Link href="/shop" className="mt-8 inline-flex rounded-full bg-pop-black px-8 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink">
|
||||
กลับไปเลือกสินค้า
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const maxRedeemablePoints = Math.min(customerPoints, maxPointsAllowed)
|
||||
const visiblePointsToUse = Math.min(pointsToUse || maxRedeemablePoints, maxRedeemablePoints)
|
||||
|
||||
return (
|
||||
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_420px]">
|
||||
<form id="checkout-form" onSubmit={createOrder} className="space-y-6">
|
||||
<section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8">
|
||||
<div className="flex items-center gap-3 border-b border-gray-100 pb-5">
|
||||
<UserRound className="h-5 w-5 text-pop-pink" />
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-pop-black">ข้อมูลผู้รับสินค้า</h2>
|
||||
<p className="text-sm text-gray-500">ข้อมูลนี้จะถูกส่งไปสร้างคำสั่งซื้อตาม contract ของ backend</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid gap-5 md:grid-cols-2">
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">ชื่อผู้รับ *</span>
|
||||
<input
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(event) => setFormData((current) => ({ ...current, name: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
|
||||
placeholder="ชื่อ-นามสกุล"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">เบอร์โทรศัพท์ *</span>
|
||||
<input
|
||||
required
|
||||
pattern="[0-9]{9,10}"
|
||||
title="กรุณากรอกเบอร์โทรศัพท์ 9-10 หลัก"
|
||||
value={formData.phone}
|
||||
onChange={(event) => setFormData((current) => ({ ...current, phone: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
|
||||
placeholder="0812345678"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-2 md:col-span-2">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">อีเมล *</span>
|
||||
<input
|
||||
required
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(event) => setFormData((current) => ({ ...current, email: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8">
|
||||
<div className="flex items-center gap-3 border-b border-gray-100 pb-5">
|
||||
<PackageCheck className="h-5 w-5 text-pop-pink" />
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-pop-black">ที่อยู่จัดส่ง</h2>
|
||||
<p className="text-sm text-gray-500">สมาชิกสามารถเลือกที่อยู่ที่บันทึกไว้ หรือกรอกที่อยู่ใหม่ได้</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{savedAddresses.length > 0 && (
|
||||
<div className="mt-6 grid gap-3">
|
||||
{savedAddresses.map((address) => (
|
||||
<label
|
||||
key={address.id}
|
||||
className={`flex cursor-pointer gap-3 rounded-2xl border p-4 transition ${
|
||||
selectedAddressId === address.id
|
||||
? 'border-pop-pink bg-pop-bg'
|
||||
: 'border-gray-100 bg-white hover:border-pop-pink/40'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="shippingAddress"
|
||||
checked={selectedAddressId === address.id}
|
||||
onChange={() => selectAddress(address)}
|
||||
className="mt-1 accent-pop-pink"
|
||||
/>
|
||||
<span>
|
||||
<span className="block text-sm font-bold text-pop-black">
|
||||
{address.recipientName}
|
||||
{address.isDefault && (
|
||||
<span className="ml-2 rounded-full bg-pop-pink/10 px-2 py-0.5 text-[10px] uppercase tracking-wide text-pop-pink">
|
||||
default
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="mt-1 block text-xs text-gray-500">{address.phone}</span>
|
||||
<span className="mt-1 block text-sm text-gray-600">{formatAddress(address)}</span>
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
<label
|
||||
className={`flex cursor-pointer items-center gap-3 rounded-2xl border p-4 transition ${
|
||||
selectedAddressId === 'new' ? 'border-pop-pink bg-pop-bg' : 'border-gray-100 bg-white hover:border-pop-pink/40'
|
||||
}`}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="shippingAddress"
|
||||
checked={selectedAddressId === 'new'}
|
||||
onChange={() => selectAddress('new')}
|
||||
className="accent-pop-pink"
|
||||
/>
|
||||
<span className="text-sm font-bold text-pop-black">กรอกที่อยู่ใหม่</span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(savedAddresses.length === 0 || selectedAddressId === 'new') && (
|
||||
<div className="mt-6 grid gap-5 md:grid-cols-2">
|
||||
<label className="space-y-2 md:col-span-2">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">บ้านเลขที่ / ถนน / ซอย *</span>
|
||||
<input
|
||||
required={selectedAddressId === 'new' || savedAddresses.length === 0}
|
||||
value={addressForm.addressLine}
|
||||
onChange={(event) => setAddressForm((current) => ({ ...current, addressLine: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
|
||||
placeholder="บ้านเลขที่ หมู่บ้าน ถนน ซอย"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">ตำบล/แขวง *</span>
|
||||
<input
|
||||
required={selectedAddressId === 'new' || savedAddresses.length === 0}
|
||||
value={addressForm.subdistrict}
|
||||
onChange={(event) => setAddressForm((current) => ({ ...current, subdistrict: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">อำเภอ/เขต *</span>
|
||||
<input
|
||||
required={selectedAddressId === 'new' || savedAddresses.length === 0}
|
||||
value={addressForm.district}
|
||||
onChange={(event) => setAddressForm((current) => ({ ...current, district: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">จังหวัด *</span>
|
||||
<input
|
||||
required={selectedAddressId === 'new' || savedAddresses.length === 0}
|
||||
value={addressForm.province}
|
||||
onChange={(event) => setAddressForm((current) => ({ ...current, province: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
|
||||
/>
|
||||
</label>
|
||||
<label className="space-y-2">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">รหัสไปรษณีย์ *</span>
|
||||
<input
|
||||
required={selectedAddressId === 'new' || savedAddresses.length === 0}
|
||||
value={addressForm.zipcode}
|
||||
onChange={(event) => setAddressForm((current) => ({ ...current, zipcode: event.target.value }))}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
|
||||
placeholder="10110"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{submitError && (
|
||||
<div className="flex gap-3 rounded-2xl border border-rose-100 bg-rose-50 p-4 text-sm text-rose-700">
|
||||
<AlertCircle className="h-5 w-5 shrink-0" />
|
||||
<p>{submitError}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || loadingSettings}
|
||||
className="flex w-full items-center justify-between rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60 lg:hidden"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
{submitting && <Loader2 className="h-5 w-5 animate-spin" />}
|
||||
สร้างคำสั่งซื้อ
|
||||
</span>
|
||||
<span>{formatPrice(total)}</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<aside className="lg:sticky lg:top-28 lg:self-start">
|
||||
<section className="rounded-3xl bg-white p-6 shadow-brutal md:p-8">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSummaryOpen((open) => !open)}
|
||||
className="flex w-full items-center justify-between border-b border-gray-100 pb-5 text-left lg:pointer-events-none"
|
||||
>
|
||||
<span>
|
||||
<span className="block text-xl font-semibold text-pop-black">สรุปรายการ</span>
|
||||
<span className="mt-1 block text-sm text-gray-500">{items.length} รายการในตะกร้า</span>
|
||||
</span>
|
||||
<span className="font-bold text-pop-pink lg:hidden">{formatPrice(total)}</span>
|
||||
</button>
|
||||
|
||||
<div className={`${summaryOpen ? 'block' : 'hidden'} mt-6 space-y-6 lg:block`}>
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => (
|
||||
<div key={item.cartItemId} className="flex gap-3">
|
||||
<div className="h-16 w-14 shrink-0 overflow-hidden rounded-xl bg-pop-bg">
|
||||
<img
|
||||
src={item.productImage || '/images/oil_ozone.png'}
|
||||
alt={item.productName}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-bold text-pop-black">{item.productName}</p>
|
||||
<p className="mt-1 text-xs text-gray-500">{item.variantSize || 'Standard'} x {item.quantity}</p>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-pop-pink">{formatPrice(item.price * item.quantity)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100 pt-5">
|
||||
{!appliedCoupon ? (
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">คูปองส่วนลด</label>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
value={couponCode}
|
||||
onChange={(event) => setCouponCode(event.target.value.toUpperCase())}
|
||||
placeholder="COUPON"
|
||||
className="min-w-0 flex-1 rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm uppercase tracking-widest text-pop-black outline-none transition focus:border-pop-pink"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={applyCoupon}
|
||||
disabled={couponLoading || !couponCode.trim()}
|
||||
className="rounded-2xl bg-pop-black px-4 py-3 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink disabled:opacity-50"
|
||||
>
|
||||
{couponLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : 'ใช้'}
|
||||
</button>
|
||||
</div>
|
||||
{couponError && <p className="text-xs font-semibold text-rose-500">{couponError}</p>}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-between rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
|
||||
<span className="flex items-center gap-2 text-sm font-bold text-emerald-700">
|
||||
<Ticket className="h-4 w-4" />
|
||||
{appliedCoupon}
|
||||
</span>
|
||||
<button type="button" onClick={removeCoupon} className="text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-rose-500">
|
||||
ลบ
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{customerPoints > 0 && (
|
||||
<div className="space-y-3 border-t border-gray-100 pt-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.18em] text-gray-500">คะแนนสะสม</span>
|
||||
<span className="text-sm font-bold text-pop-black">{customerPoints} points</span>
|
||||
</div>
|
||||
<label className="flex items-center gap-3 rounded-2xl border border-gray-100 bg-pop-bg p-4 text-sm font-semibold text-pop-black">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={usePoints}
|
||||
onChange={(event) => {
|
||||
setUsePoints(event.target.checked)
|
||||
if (event.target.checked) setPointsToUse(maxRedeemablePoints)
|
||||
}}
|
||||
className="accent-pop-pink"
|
||||
disabled={maxRedeemablePoints <= 0}
|
||||
/>
|
||||
ใช้คะแนนเป็นส่วนลด
|
||||
</label>
|
||||
{usePoints && (
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={maxRedeemablePoints}
|
||||
value={visiblePointsToUse}
|
||||
onChange={(event) => setPointsToUse(Math.min(Number(event.target.value), maxRedeemablePoints))}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3 border-t border-gray-100 pt-5 text-sm">
|
||||
<div className="flex justify-between text-gray-500">
|
||||
<span>Subtotal</span>
|
||||
<span>{formatPrice(subtotal)}</span>
|
||||
</div>
|
||||
{promoLevel1Disc > 0 && (
|
||||
<div className="flex justify-between text-emerald-600">
|
||||
<span>{promoLevel1?.name}</span>
|
||||
<span>-{formatPrice(promoLevel1Disc)}</span>
|
||||
</div>
|
||||
)}
|
||||
{promoLevel2Disc > 0 && (
|
||||
<div className="flex justify-between text-emerald-600">
|
||||
<span>{promoLevel2?.name}</span>
|
||||
<span>-{formatPrice(promoLevel2Disc)}</span>
|
||||
</div>
|
||||
)}
|
||||
{discountAmount > 0 && (
|
||||
<div className="flex justify-between text-emerald-600">
|
||||
<span>Coupon {appliedCoupon ? `(${appliedCoupon})` : ''}</span>
|
||||
<span>-{formatPrice(discountAmount)}</span>
|
||||
</div>
|
||||
)}
|
||||
{pointsDiscount > 0 && (
|
||||
<div className="flex justify-between text-emerald-600">
|
||||
<span>Points</span>
|
||||
<span>-{formatPrice(pointsDiscount)}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between text-gray-500">
|
||||
<span>Shipping</span>
|
||||
{loadingSettings ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<span className={isFreeShipping ? 'text-gray-400 line-through' : ''}>{formatPrice(shippingFee)}</span>
|
||||
)}
|
||||
</div>
|
||||
{isFreeShipping && (
|
||||
<div className="flex justify-between text-emerald-600">
|
||||
<span>Free shipping</span>
|
||||
<span>-{formatPrice(shippingFee)}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-between border-t border-gray-100 pt-4 text-lg font-bold text-pop-black">
|
||||
<span>Total</span>
|
||||
<span className="text-pop-pink">{formatPrice(total)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl border border-amber-100 bg-amber-50 p-4 text-sm text-amber-800">
|
||||
<div className="flex gap-2">
|
||||
<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />
|
||||
<p>
|
||||
รอบนี้จะสร้างคำสั่งซื้อสถานะรอชำระเงิน แล้วพาไปหน้า Order Detail ส่วน payment/slip upload ยังเป็นงานถัดไปตามแผน
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
form="checkout-form"
|
||||
disabled={submitting || loadingSettings}
|
||||
className="hidden w-full items-center justify-between rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60 lg:flex"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
{submitting && <Loader2 className="h-5 w-5 animate-spin" />}
|
||||
สร้างคำสั่งซื้อ
|
||||
</span>
|
||||
<span>{formatPrice(total)}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
import Link from 'next/link'
|
||||
import type { Category } from '@homaroma/types'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { resolveLocalized } from '../lib/localization'
|
||||
|
||||
interface FooterProps {
|
||||
categories?: Category[]
|
||||
@@ -10,18 +11,18 @@ interface FooterProps {
|
||||
export default function Footer({ categories = [] }: FooterProps) {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<footer className="bg-black py-20 px-6 border-t border-white/5">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-12">
|
||||
<footer className="border-t border-gray-200 bg-white px-6 py-20 text-pop-black">
|
||||
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
|
||||
<div className="space-y-6">
|
||||
<div className="text-2xl font-bold tracking-widest">
|
||||
HomAroma <span className="text-cyan-glow text-sm font-light italic">Essential</span>
|
||||
HomAroma <span className="text-sm font-semibold italic text-pop-pink">Essential</span>
|
||||
</div>
|
||||
<p className="text-slate-500 text-sm leading-relaxed">
|
||||
<p className="text-sm leading-relaxed text-gray-600">
|
||||
{t('footer.catchphrase')}
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
{['IG', 'FB', 'TW', 'YT'].map((s) => (
|
||||
<a key={s} href="#" className="glass w-9 h-9 rounded-full flex items-center justify-center text-[10px] font-bold hover:bg-cyan-glow hover:text-night-900 transition-all duration-300">
|
||||
<a key={s} href="#" className="flex h-9 w-9 items-center justify-center rounded-full border border-gray-200 bg-pop-bg text-[10px] font-bold text-pop-black transition-all duration-300 hover:border-pop-pink hover:bg-pop-pink hover:text-white">
|
||||
{s}
|
||||
</a>
|
||||
))}
|
||||
@@ -29,42 +30,42 @@ export default function Footer({ categories = [] }: FooterProps) {
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('footer.explore')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-slate-400">
|
||||
<Link href="/" className="hover:text-white transition-colors">{t('nav.home')}</Link>
|
||||
<Link href="/shop" className="hover:text-white transition-colors">{t('nav.shop')}</Link>
|
||||
<Link href="/scent-guide" className="hover:text-white transition-colors">{t('nav.scentGuide')}</Link>
|
||||
<Link href="/about" className="hover:text-white transition-colors">{t('nav.about')}</Link>
|
||||
<Link href="/contact" className="hover:text-white transition-colors">{t('nav.contact')}</Link>
|
||||
<Link href="/faq" className="hover:text-white transition-colors">{t('nav.faq')}</Link>
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('footer.explore')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-gray-600">
|
||||
<Link href="/" className="transition-colors hover:text-pop-pink">{t('nav.home')}</Link>
|
||||
<Link href="/shop" className="transition-colors hover:text-pop-pink">{t('nav.shop')}</Link>
|
||||
<Link href="/scent-guide" className="transition-colors hover:text-pop-pink">{t('nav.scentGuide')}</Link>
|
||||
<Link href="/about" className="transition-colors hover:text-pop-pink">{t('nav.about')}</Link>
|
||||
<Link href="/contact" className="transition-colors hover:text-pop-pink">{t('nav.contact')}</Link>
|
||||
<Link href="/faq" className="transition-colors hover:text-pop-pink">{t('nav.faq')}</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-white">{t('nav.collections')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-slate-400">
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">{t('nav.collections')}</h4>
|
||||
<div className="flex flex-col space-y-2 text-sm text-gray-600">
|
||||
{categories.map((c) => (
|
||||
<Link key={c.id} href={`/category/${c.id}`} className="hover:text-white transition-colors">
|
||||
{typeof c.name === 'string' ? c.name : (c.name as any)?.th || (c.name as any)?.en || ''}
|
||||
<Link key={c.id} href={`/category/${c.id}`} className="transition-colors hover:text-pop-pink">
|
||||
{resolveLocalized(c.name)}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-white">Newsletter</h4>
|
||||
<p className="text-xs text-slate-500">Subscribe for exclusive releases and sensory wisdom.</p>
|
||||
<div className="flex bg-white/5 border border-white/10 p-1 rounded-sm">
|
||||
<h4 className="text-xs font-bold uppercase tracking-widest text-pop-black">Newsletter</h4>
|
||||
<p className="text-xs text-gray-500">Subscribe for exclusive releases and sensory wisdom.</p>
|
||||
<div className="flex rounded-xl border border-gray-200 bg-pop-bg p-1">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Your email"
|
||||
className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-600"
|
||||
className="w-full border-none bg-transparent p-2 text-sm text-pop-black outline-none placeholder:text-gray-400"
|
||||
/>
|
||||
<button className="bg-white text-black px-4 py-2 font-bold text-xs uppercase hover:bg-cyan-glow transition-colors shrink-0">
|
||||
<button className="shrink-0 rounded-lg bg-pop-black px-4 py-2 text-xs font-bold uppercase text-white transition-colors hover:bg-pop-pink">
|
||||
Join
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-600 uppercase tracking-widest">
|
||||
<p className="text-[10px] uppercase tracking-widest text-gray-500">
|
||||
© {new Date().getFullYear()} HomAroma. {t('footer.rights')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -3,9 +3,12 @@ import Link from 'next/link'
|
||||
import { useRouter, usePathname } from 'next/navigation'
|
||||
import { useState, useEffect } from 'react'
|
||||
import type { Category } from '@homaroma/types'
|
||||
import { ShoppingBag, MapPin } from 'lucide-react'
|
||||
import { Heart, ShoppingBag, MapPin, User } from 'lucide-react'
|
||||
import { useCartStore } from '../store/cartStore'
|
||||
import { useWishlistStore } from '../store/wishlistStore'
|
||||
import { useAuthStore } from '../store/authStore'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { resolveLocalized } from '../lib/localization'
|
||||
|
||||
interface NavbarProps {
|
||||
categories?: Category[]
|
||||
@@ -19,8 +22,10 @@ export default function Navbar({ categories = [] }: NavbarProps) {
|
||||
const [localOrdersCount, setLocalOrdersCount] = useState(0)
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
|
||||
|
||||
const { toggleCart, getCartCount } = useCartStore()
|
||||
const wishlistCount = useWishlistStore((state) => state.items.length)
|
||||
const customer = useAuthStore((state) => state.customer)
|
||||
const cartCount = getCartCount()
|
||||
const { t, i18n } = useTranslation()
|
||||
|
||||
@@ -30,23 +35,21 @@ export default function Navbar({ categories = [] }: NavbarProps) {
|
||||
localStorage.setItem('homaroma_lang', newLang)
|
||||
}
|
||||
|
||||
// Detect scroll for navbar bg change
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 20)
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
|
||||
// Check local orders periodically (or just on mount)
|
||||
|
||||
const stored = localStorage.getItem('homaroma_local_orders')
|
||||
if (stored) {
|
||||
try { setLocalOrdersCount(JSON.parse(stored).length) } catch (e) {}
|
||||
try {
|
||||
const parsed = JSON.parse(stored) as unknown[]
|
||||
queueMicrotask(() => setLocalOrdersCount(parsed.length))
|
||||
} catch {}
|
||||
}
|
||||
|
||||
|
||||
return () => window.removeEventListener('scroll', onScroll)
|
||||
}, [])
|
||||
|
||||
// Close mobile menu on route change
|
||||
useEffect(() => { setMobileOpen(false) }, [pathname])
|
||||
// Prevent body scroll when overlays open
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = (searchOpen || mobileOpen) ? 'hidden' : ''
|
||||
return () => { document.body.style.overflow = '' }
|
||||
@@ -63,46 +66,48 @@ export default function Navbar({ categories = [] }: NavbarProps) {
|
||||
}
|
||||
|
||||
const navLinkClass = (path: string) =>
|
||||
pathname === path ? 'text-cyan-glow' : 'text-slate-300 hover:text-white transition-colors'
|
||||
pathname === path
|
||||
? 'text-pop-pink'
|
||||
: 'text-pop-black/75 transition-colors hover:text-pop-pink'
|
||||
|
||||
const iconButtonClass = 'rounded-full border border-gray-200 bg-white p-2.5 text-pop-black shadow-sm transition hover:border-pop-pink hover:text-pop-pink hover:shadow-brutal'
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* ── NAVBAR BAR ── */}
|
||||
<nav
|
||||
className={`fixed top-0 w-full z-50 transition-all duration-300 px-4 md:px-6 py-3.5 md:py-4 flex justify-between items-center ${
|
||||
scrolled ? 'bg-night-900/95 backdrop-blur-xl border-b border-white/10 shadow-xl' : 'glass backdrop-blur-xl border-b border-white/5'
|
||||
className={`fixed top-0 z-50 flex w-full items-center justify-between px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
|
||||
scrolled
|
||||
? 'border-b border-gray-200 bg-white/95 shadow-brutal backdrop-blur-xl'
|
||||
: 'border-b border-gray-100 bg-white/85 backdrop-blur-xl'
|
||||
}`}
|
||||
>
|
||||
{/* Logo */}
|
||||
<Link href="/" onClick={() => setMobileOpen(false)} className="text-xl md:text-2xl font-bold tracking-widest text-white uppercase italic shrink-0">
|
||||
HomAroma <span className="text-cyan-glow text-xs md:text-sm not-italic font-light opacity-60">Essential</span>
|
||||
<Link href="/" onClick={() => setMobileOpen(false)} className="shrink-0 text-xl font-bold uppercase italic tracking-widest text-pop-black md:text-2xl">
|
||||
HomAroma <span className="text-xs font-semibold not-italic text-pop-pink md:text-sm">Essential</span>
|
||||
</Link>
|
||||
|
||||
{/* ── DESKTOP NAV ── */}
|
||||
<div className="hidden md:flex space-x-7 text-sm font-medium tracking-wide uppercase">
|
||||
<div className="hidden space-x-7 text-sm font-semibold uppercase tracking-wide md:flex">
|
||||
<Link href="/" className={navLinkClass('/')}>{t('nav.home')}</Link>
|
||||
<Link href="/shop" className={navLinkClass('/shop')}>{t('nav.shop')}</Link>
|
||||
<Link href="/coupons" className={navLinkClass('/coupons')}>🔥 {t('nav.promotions') || 'Promotions'}</Link>
|
||||
|
||||
{/* Collections dropdown */}
|
||||
{categories.length > 0 && (
|
||||
<div className="relative group">
|
||||
<button className="text-slate-300 hover:text-white transition-colors flex items-center gap-1 uppercase text-sm font-medium tracking-wide">
|
||||
<div className="group relative">
|
||||
<button className="flex items-center gap-1 text-sm font-semibold uppercase tracking-wide text-pop-black/75 transition-colors hover:text-pop-pink">
|
||||
{t('nav.collections')}
|
||||
<svg className="w-3 h-3 opacity-50 transition-transform duration-300 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<svg className="h-3 w-3 opacity-60 transition-transform duration-300 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-4 w-52 bg-night-900/95 backdrop-blur-xl border border-white/10 rounded-xl overflow-hidden opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-all duration-300 shadow-2xl">
|
||||
<div className="p-2 space-y-0.5">
|
||||
<div className="pointer-events-none absolute left-1/2 top-full mt-4 w-56 -translate-x-1/2 overflow-hidden rounded-2xl border border-gray-200 bg-white opacity-0 shadow-brutal transition-all duration-300 group-hover:pointer-events-auto group-hover:opacity-100">
|
||||
<div className="space-y-0.5 p-2">
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
href={`/category/${cat.id}`}
|
||||
className="flex items-center justify-between px-4 py-2.5 text-xs uppercase tracking-widest rounded-lg hover:bg-white/10 hover:text-cyan-glow transition-colors"
|
||||
className="flex items-center justify-between rounded-xl px-4 py-2.5 text-xs uppercase tracking-widest text-gray-600 transition-colors hover:bg-pop-bg hover:text-pop-pink"
|
||||
>
|
||||
{typeof cat.name === 'string' ? cat.name : (cat.name as any)?.th || (cat.name as any)?.en || ''}
|
||||
<svg className="w-3 h-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{resolveLocalized(cat.name)}
|
||||
<svg className="h-3 w-3 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
@@ -116,141 +121,127 @@ export default function Navbar({ categories = [] }: NavbarProps) {
|
||||
<Link href="/about" className={navLinkClass('/about')}>{t('nav.about')}</Link>
|
||||
</div>
|
||||
|
||||
{/* ── DESKTOP RIGHT ACTIONS ── */}
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<Link
|
||||
href="/track"
|
||||
className="relative glass p-2.5 rounded-full hover:bg-white/10 transition-all group"
|
||||
aria-label="Track Orders"
|
||||
title="Track Orders"
|
||||
>
|
||||
<MapPin className="w-4 h-4 group-hover:text-cyan-glow transition-colors" />
|
||||
{localOrdersCount > 0 && (
|
||||
<span className="absolute top-0 right-0 w-2 h-2 bg-rose-500 rounded-full animate-pulse" />
|
||||
<div className="hidden items-center gap-3 md:flex">
|
||||
<Link href="/track" className={`relative ${iconButtonClass}`} aria-label="Track Orders" title="Track Orders">
|
||||
<MapPin className="h-4 w-4" />
|
||||
{localOrdersCount > 0 && <span className="absolute right-0 top-0 h-2 w-2 rounded-full bg-rose-500" />}
|
||||
</Link>
|
||||
|
||||
<Link href="/wishlist" className={`relative ${iconButtonClass}`} aria-label="Wishlist" title="Wishlist">
|
||||
<Heart className="h-4 w-4" />
|
||||
{wishlistCount > 0 && (
|
||||
<span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-rose-500 text-[9px] font-bold text-white">
|
||||
{wishlistCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="glass p-2.5 rounded-full hover:bg-white/10 transition-all group"
|
||||
aria-label="Search"
|
||||
>
|
||||
<svg className="w-4 h-4 group-hover:text-cyan-glow transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
|
||||
<Link href="/profile" className={iconButtonClass} aria-label="Profile" title={customer?.displayName || 'Profile'}>
|
||||
{customer?.pictureUrl ? (
|
||||
<img src={customer.pictureUrl} alt={customer.displayName || 'Profile'} className="h-4 w-4 rounded-full object-cover" />
|
||||
) : (
|
||||
<User className="h-4 w-4" />
|
||||
)}
|
||||
</Link>
|
||||
|
||||
<button onClick={() => setSearchOpen(true)} className={iconButtonClass} aria-label="Search">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => toggleCart(true)}
|
||||
className="relative glass p-2.5 rounded-full hover:bg-white/10 transition-all group"
|
||||
aria-label="Cart"
|
||||
>
|
||||
<ShoppingBag className="w-4 h-4 group-hover:text-cyan-glow transition-colors" />
|
||||
|
||||
<button onClick={() => toggleCart(true)} className={`relative ${iconButtonClass}`} aria-label="Cart">
|
||||
<ShoppingBag className="h-4 w-4" />
|
||||
{cartCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 bg-cyan-glow text-night-900 text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
|
||||
<span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-pop-pink text-[9px] font-bold text-white">
|
||||
{cartCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="glass px-4 py-2 rounded-full text-xs font-bold uppercase tracking-widest hover:bg-cyan-glow hover:text-night-900 transition-all duration-300"
|
||||
>
|
||||
|
||||
<Link href="/shop" className="rounded-full bg-pop-black px-4 py-2 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
|
||||
{t('nav.shopNow')}
|
||||
</Link>
|
||||
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="glass px-3 py-2 rounded-full text-xs font-bold hover:bg-white/10 transition-all text-cyan-glow border border-cyan-glow/20"
|
||||
>
|
||||
<button onClick={toggleLanguage} className="rounded-full border border-pop-pink/30 bg-white px-3 py-2 text-xs font-bold uppercase text-pop-pink transition hover:bg-pop-bg">
|
||||
{i18n.language.startsWith('en') ? 'EN' : 'TH'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── MOBILE RIGHT ACTIONS ── */}
|
||||
<div className="flex md:hidden items-center gap-2">
|
||||
<Link
|
||||
href="/track"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="relative p-2 rounded-full glass hover:bg-white/10 transition-all"
|
||||
aria-label="Track Orders"
|
||||
>
|
||||
<MapPin className="w-4 h-4" />
|
||||
{localOrdersCount > 0 && (
|
||||
<span className="absolute top-1 right-1 w-2 h-2 bg-rose-500 rounded-full" />
|
||||
<div className="flex items-center gap-2 md:hidden">
|
||||
<Link href="/track" onClick={() => setMobileOpen(false)} className={`relative ${iconButtonClass}`} aria-label="Track Orders">
|
||||
<MapPin className="h-4 w-4" />
|
||||
{localOrdersCount > 0 && <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-rose-500" />}
|
||||
</Link>
|
||||
<Link href="/wishlist" onClick={() => setMobileOpen(false)} className={`relative ${iconButtonClass}`} aria-label="Wishlist">
|
||||
<Heart className="h-4 w-4" />
|
||||
{wishlistCount > 0 && (
|
||||
<span className="absolute right-0 top-0 flex h-4 w-4 translate-x-1/4 -translate-y-1/4 items-center justify-center rounded-full bg-rose-500 text-[9px] font-bold text-white">
|
||||
{wishlistCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => { setSearchOpen(true); setMobileOpen(false) }}
|
||||
className="p-2 rounded-full glass hover:bg-white/10 transition-all"
|
||||
aria-label="Search"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<Link href="/profile" onClick={() => setMobileOpen(false)} className={iconButtonClass} aria-label="Profile">
|
||||
{customer?.pictureUrl ? (
|
||||
<img src={customer.pictureUrl} alt={customer.displayName || 'Profile'} className="h-4 w-4 rounded-full object-cover" />
|
||||
) : (
|
||||
<User className="h-4 w-4" />
|
||||
)}
|
||||
</Link>
|
||||
<button onClick={() => { setSearchOpen(true); setMobileOpen(false) }} className={iconButtonClass} aria-label="Search">
|
||||
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => { toggleCart(true); setMobileOpen(false) }}
|
||||
className="relative p-2 rounded-full glass hover:bg-white/10 transition-all"
|
||||
aria-label="Cart"
|
||||
>
|
||||
<ShoppingBag className="w-5 h-5" />
|
||||
|
||||
<button onClick={() => { toggleCart(true); setMobileOpen(false) }} className={`relative ${iconButtonClass}`} aria-label="Cart">
|
||||
<ShoppingBag className="h-5 w-5" />
|
||||
{cartCount > 0 && (
|
||||
<span className="absolute top-0 right-0 bg-cyan-glow text-night-900 text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center translate-x-1/4 -translate-y-1/4">
|
||||
<span className="absolute right-0 top-0 flex h-4 w-4 translate-x-1/4 -translate-y-1/4 items-center justify-center rounded-full bg-pop-pink text-[9px] font-bold text-white">
|
||||
{cartCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{/* Hamburger */}
|
||||
<button
|
||||
onClick={() => setMobileOpen(prev => !prev)}
|
||||
className="p-2 rounded-full glass hover:bg-white/10 transition-all"
|
||||
aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
|
||||
>
|
||||
<div className="w-5 h-5 flex flex-col justify-center gap-[5px] relative">
|
||||
<span className={`block w-5 h-0.5 bg-white rounded-full transition-all duration-300 ${mobileOpen ? 'absolute rotate-45' : ''}`} />
|
||||
<span className={`block h-0.5 bg-white rounded-full transition-all duration-300 ${mobileOpen ? 'opacity-0 w-0' : 'w-4'}`} />
|
||||
<span className={`block h-0.5 bg-white rounded-full transition-all duration-300 ${mobileOpen ? 'absolute -rotate-45 w-5' : 'w-5'}`} />
|
||||
|
||||
<button onClick={() => setMobileOpen(prev => !prev)} className={iconButtonClass} aria-label={mobileOpen ? 'Close menu' : 'Open menu'}>
|
||||
<div className="relative flex h-5 w-5 flex-col justify-center gap-[5px]">
|
||||
<span className={`block h-0.5 w-5 rounded-full bg-pop-black transition-all duration-300 ${mobileOpen ? 'absolute rotate-45' : ''}`} />
|
||||
<span className={`block h-0.5 rounded-full bg-pop-black transition-all duration-300 ${mobileOpen ? 'w-0 opacity-0' : 'w-4'}`} />
|
||||
<span className={`block h-0.5 rounded-full bg-pop-black transition-all duration-300 ${mobileOpen ? 'absolute w-5 -rotate-45' : 'w-5'}`} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* ── MOBILE DRAWER ── */}
|
||||
<div
|
||||
className={`fixed inset-0 z-40 md:hidden transition-all duration-300 ${mobileOpen ? 'visible' : 'invisible'}`}
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div className={`fixed inset-0 z-40 transition-all duration-300 md:hidden ${mobileOpen ? 'visible' : 'invisible'}`}>
|
||||
<div
|
||||
className={`absolute inset-0 bg-night-900/80 backdrop-blur-sm transition-opacity duration-300 ${mobileOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
className={`absolute inset-0 bg-pop-black/45 backdrop-blur-sm transition-opacity duration-300 ${mobileOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
/>
|
||||
{/* Drawer */}
|
||||
<div
|
||||
className={`absolute top-0 right-0 h-full w-72 bg-night-900/98 backdrop-blur-2xl border-l border-white/10 flex flex-col transition-transform duration-300 ${mobileOpen ? 'translate-x-0' : 'translate-x-full'}`}
|
||||
className={`absolute right-0 top-0 flex h-full w-72 flex-col border-l border-gray-200 bg-white shadow-2xl transition-transform duration-300 ${mobileOpen ? 'translate-x-0' : 'translate-x-full'}`}
|
||||
>
|
||||
{/* Drawer Header */}
|
||||
<div className="flex items-center justify-between px-6 py-5 border-b border-white/5">
|
||||
<span className="text-sm font-bold uppercase tracking-widest text-slate-300">{t('nav.menu')}</span>
|
||||
<div className="flex items-center justify-between border-b border-gray-100 px-6 py-5">
|
||||
<span className="text-sm font-bold uppercase tracking-widest text-pop-black">{t('nav.menu')}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<button onClick={toggleLanguage} className="glass px-2.5 py-1 rounded-md text-[10px] font-bold text-cyan-glow border border-cyan-glow/20 uppercase">
|
||||
<button onClick={toggleLanguage} className="rounded-md border border-pop-pink/30 px-2.5 py-1 text-[10px] font-bold uppercase text-pop-pink">
|
||||
{i18n.language.startsWith('en') ? 'EN' : 'TH'}
|
||||
</button>
|
||||
<button onClick={() => setMobileOpen(false)} className="p-1.5 rounded-full glass hover:bg-white/10 transition-all">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<button onClick={() => setMobileOpen(false)} className="rounded-full border border-gray-200 p-1.5 text-pop-black transition hover:text-pop-pink">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drawer Nav Links */}
|
||||
<div className="flex-1 overflow-y-auto px-4 py-6 space-y-1">
|
||||
<div className="flex-1 space-y-1 overflow-y-auto px-4 py-6">
|
||||
{[
|
||||
{ to: '/', label: t('nav.home') },
|
||||
{ to: '/shop', label: t('nav.shop') },
|
||||
{ to: '/coupons', label: `🔥 ${t('nav.promotions') || 'Promotions'}` },
|
||||
{ to: '/wishlist', label: '♡ Wishlist' },
|
||||
{ to: '/profile', label: customer ? `👤 ${customer.displayName || 'Profile'}` : '👤 Profile' },
|
||||
{ to: '/scent-guide', label: `✨ ${t('nav.scentGuide')}` },
|
||||
{ to: '/about', label: t('nav.about') },
|
||||
{ to: '/faq', label: t('nav.faq') },
|
||||
@@ -260,29 +251,26 @@ export default function Navbar({ categories = [] }: NavbarProps) {
|
||||
key={item.to}
|
||||
href={item.to}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className={
|
||||
`block px-4 py-3 rounded-xl text-sm font-medium tracking-wide transition-all duration-200 ${
|
||||
pathname === item.to ? 'bg-cyan-glow/10 text-cyan-glow border border-cyan-glow/20' : 'hover:bg-white/5 text-slate-300 hover:text-white'
|
||||
}`
|
||||
}
|
||||
className={`block rounded-xl px-4 py-3 text-sm font-semibold tracking-wide transition-all duration-200 ${
|
||||
pathname === item.to ? 'border border-pop-pink/20 bg-pop-bg text-pop-pink' : 'text-pop-black/75 hover:bg-pop-bg hover:text-pop-pink'
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* Collections sub-section */}
|
||||
{categories.length > 0 && (
|
||||
<div className="pt-4">
|
||||
<p className="text-[10px] uppercase tracking-widest text-slate-600 px-4 pb-2">{t('nav.collections')}</p>
|
||||
<p className="px-4 pb-2 text-[10px] uppercase tracking-widest text-gray-500">{t('nav.collections')}</p>
|
||||
{categories.map(cat => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
href={`/category/${cat.id}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center justify-between px-4 py-2.5 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
|
||||
className="flex items-center justify-between rounded-xl px-4 py-2.5 text-sm text-gray-600 transition-all hover:bg-pop-bg hover:text-pop-pink"
|
||||
>
|
||||
{typeof cat.name === 'string' ? cat.name : (cat.name as any)?.th || (cat.name as any)?.en || ''}
|
||||
<svg className="w-3 h-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
{resolveLocalized(cat.name)}
|
||||
<svg className="h-3 w-3 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</Link>
|
||||
@@ -291,45 +279,35 @@ export default function Navbar({ categories = [] }: NavbarProps) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Drawer Footer CTA */}
|
||||
<div className="px-4 pb-8 pt-4 border-t border-white/5 space-y-3">
|
||||
<Link
|
||||
href="/shop"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block w-full py-3 bg-white text-night-900 font-bold text-center rounded-xl text-xs uppercase tracking-widest hover:bg-cyan-glow transition-colors duration-300"
|
||||
>
|
||||
<div className="space-y-3 border-t border-gray-100 px-4 pb-8 pt-4">
|
||||
<Link href="/shop" onClick={() => setMobileOpen(false)} className="block w-full rounded-xl bg-pop-black py-3 text-center text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
|
||||
{t('nav.shopNow')}
|
||||
</Link>
|
||||
<Link
|
||||
href="/scent-guide"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="block w-full py-3 glass text-center rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-white/10 transition-colors border border-white/10"
|
||||
>
|
||||
<Link href="/scent-guide" onClick={() => setMobileOpen(false)} className="block w-full rounded-xl border border-pop-pink/30 bg-white py-3 text-center text-xs font-bold uppercase tracking-widest text-pop-pink transition hover:bg-pop-bg">
|
||||
{t('nav.findMyScent')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── SEARCH OVERLAY ── */}
|
||||
{searchOpen && (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] bg-night-900/95 backdrop-blur-xl flex flex-col items-center pt-24 md:pt-32 px-4 md:px-6"
|
||||
className="fixed inset-0 z-[100] flex flex-col items-center bg-pop-bg/95 px-4 pt-24 backdrop-blur-xl md:px-6 md:pt-32"
|
||||
onClick={(e) => { if (e.target === e.currentTarget) setSearchOpen(false) }}
|
||||
>
|
||||
<div className="w-full max-w-2xl space-y-6 animate-fade-in">
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="text-slate-400 text-xs uppercase tracking-widest">{t('nav.search.title')}</p>
|
||||
<button onClick={() => setSearchOpen(false)} className="glass p-2 rounded-full hover:bg-white/10 transition-all">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<div className="w-full max-w-2xl space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs uppercase tracking-widest text-gray-500">{t('nav.search.title')}</p>
|
||||
<button onClick={() => setSearchOpen(false)} className="rounded-full border border-gray-200 bg-white p-2 text-pop-black transition hover:text-pop-pink">
|
||||
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSearch}>
|
||||
<div className="flex glass border border-white/20 focus-within:border-cyan-glow/50 rounded-2xl overflow-hidden transition-colors">
|
||||
<svg className="w-5 h-5 text-slate-400 m-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<div className="flex overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-brutal transition-colors focus-within:border-pop-pink">
|
||||
<svg className="m-4 h-5 w-5 shrink-0 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
<input
|
||||
@@ -337,20 +315,20 @@ export default function Navbar({ categories = [] }: NavbarProps) {
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search scents, categories..."
|
||||
className="bg-transparent border-none outline-none text-lg md:text-xl p-4 pl-0 w-full text-white placeholder-slate-600"
|
||||
className="w-full border-none bg-transparent p-4 pl-0 text-lg text-pop-black outline-none placeholder:text-gray-400 md:text-xl"
|
||||
autoFocus
|
||||
/>
|
||||
<button type="submit" className="bg-cyan-glow text-night-900 px-4 md:px-6 font-bold text-xs uppercase tracking-widest shrink-0 hover:bg-white transition-colors">
|
||||
<button type="submit" className="shrink-0 bg-pop-black px-4 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-pop-pink md:px-6">
|
||||
Go
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-widest mb-3">Quick Links</p>
|
||||
<p className="mb-3 text-xs uppercase tracking-widest text-gray-500">Quick Links</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
...categories.map(c => ({ label: typeof c.name === 'string' ? c.name : (c.name as any)?.th || (c.name as any)?.en || '', to: `/category/${c.id}` })),
|
||||
...categories.map(c => ({ label: resolveLocalized(c.name), to: `/category/${c.id}` })),
|
||||
{ label: '✨ Scent Guide', to: '/scent-guide' },
|
||||
{ label: 'All Products', to: '/shop' },
|
||||
].map(item => (
|
||||
@@ -358,7 +336,7 @@ export default function Navbar({ categories = [] }: NavbarProps) {
|
||||
key={item.to}
|
||||
href={item.to}
|
||||
onClick={() => setSearchOpen(false)}
|
||||
className="glass px-4 py-1.5 rounded-full text-xs font-medium hover:bg-white/10 hover:text-cyan-glow transition-all border border-white/5"
|
||||
className="rounded-full border border-gray-200 bg-white px-4 py-1.5 text-xs font-semibold text-gray-600 transition-all hover:border-pop-pink hover:text-pop-pink"
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
|
||||
@@ -1,63 +1,71 @@
|
||||
import Link from 'next/link'
|
||||
import type { Product } from '@homaroma/types'
|
||||
import { getCategoryImage, formatPrice } from '@homaroma/types'
|
||||
import { resolveLocalized } from '../lib/localization'
|
||||
import WishlistButton from './WishlistButton'
|
||||
|
||||
interface ProductCardProps {
|
||||
product: Product
|
||||
}
|
||||
|
||||
export default function ProductCard({ product }: ProductCardProps) {
|
||||
const categoryName = resolveLocalized(product.category.name)
|
||||
const productName = resolveLocalized(product.name) || product.scent.name
|
||||
const imageUrl = product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName)
|
||||
const firstPrice = product.variants[0]?.price ?? product.price
|
||||
|
||||
return (
|
||||
<div className="glass glass-hover rounded-2xl overflow-hidden flex flex-col group p-1.5 md:p-2">
|
||||
<div className="h-40 md:h-64 overflow-hidden rounded-xl relative">
|
||||
<img
|
||||
src={product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || '')}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
alt={product.scent.name}
|
||||
/>
|
||||
{/* Category badge */}
|
||||
<div className="absolute top-4 left-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest text-cyan-glow">
|
||||
{typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''}
|
||||
</div>
|
||||
{/* Available badge */}
|
||||
<div className="hidden md:block absolute top-4 right-4 glass px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">
|
||||
Available
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3 md:p-6 space-y-2 md:space-y-4 flex flex-col flex-1">
|
||||
<div className="flex flex-col md:flex-row md:justify-between md:items-start gap-1">
|
||||
<div>
|
||||
<h3 className="text-sm md:text-xl font-bold leading-tight line-clamp-1">
|
||||
{product.scent.name}
|
||||
</h3>
|
||||
<p className="text-[10px] md:text-xs text-slate-400 mt-0.5 md:mt-1 uppercase tracking-widest line-clamp-1">
|
||||
{typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-cyan-glow font-bold text-xs md:text-lg">
|
||||
{formatPrice(product.variants[0]?.price)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Variants (sizes) */}
|
||||
<div className="hidden md:flex flex-wrap gap-1.5 md:gap-2">
|
||||
{product.variants.map((v) => (
|
||||
<div key={v.id} className="glass px-1.5 py-0.5 md:px-2.5 md:py-1 rounded-lg text-[8px] md:text-[10px] uppercase tracking-wider">
|
||||
{v.size}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<Link
|
||||
href={`/products/${product.id}`}
|
||||
className="block w-full py-2 md:py-3 text-center bg-white/10 hover:bg-white text-white hover:text-night-900 rounded-lg font-bold uppercase tracking-widest text-[10px] md:text-xs transition-all duration-300"
|
||||
>
|
||||
Discover
|
||||
<article className="group flex h-full flex-col overflow-hidden rounded-2xl bg-white shadow-brutal transition duration-300 hover:-translate-y-1 hover:shadow-brutal-hover">
|
||||
<div className="relative aspect-[4/3] overflow-hidden bg-pop-bg">
|
||||
<WishlistButton product={product} />
|
||||
<Link href={`/products/${product.id}`} className="block h-full w-full">
|
||||
<img
|
||||
src={imageUrl}
|
||||
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
|
||||
alt={productName}
|
||||
/>
|
||||
{categoryName && (
|
||||
<span className="absolute left-4 top-4 rounded-full bg-white/90 px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-pop-black shadow-sm">
|
||||
{categoryName}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-1 flex-col gap-4 p-5">
|
||||
<div className="space-y-1">
|
||||
<h3 className="line-clamp-2 text-lg font-semibold leading-snug text-pop-black">
|
||||
<Link href={`/products/${product.id}`} className="transition hover:text-pop-pink">
|
||||
{productName}
|
||||
</Link>
|
||||
</h3>
|
||||
{product.scent.name && (
|
||||
<p className="text-xs font-semibold uppercase tracking-widest text-gray-400">
|
||||
{product.scent.name}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{product.variants.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{product.variants.slice(0, 3).map((variant) => (
|
||||
<span key={variant.id} className="rounded-full bg-pop-bg px-3 py-1 text-xs font-semibold text-gray-600">
|
||||
{variant.size}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-auto flex items-center justify-between gap-4">
|
||||
<span className="text-lg font-bold text-pop-pink">{formatPrice(firstPrice)}</span>
|
||||
<Link
|
||||
href={`/products/${product.id}`}
|
||||
className="rounded-full bg-pop-black px-4 py-2 text-xs font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink"
|
||||
>
|
||||
View
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,613 @@
|
||||
"use client";
|
||||
|
||||
import Link from 'next/link'
|
||||
import { useEffect, useState } from 'react'
|
||||
import {
|
||||
Award,
|
||||
Check,
|
||||
Edit3,
|
||||
ExternalLink,
|
||||
Loader2,
|
||||
LogOut,
|
||||
Mail,
|
||||
MapPin,
|
||||
Package,
|
||||
Phone,
|
||||
Plus,
|
||||
Settings,
|
||||
Trash2,
|
||||
User,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react'
|
||||
import { formatPrice, type CustomerAddress, type Order } from '@homaroma/types'
|
||||
|
||||
import { API_BASE } from '../lib/api'
|
||||
import { useAuthStore, type Customer } from '../store/authStore'
|
||||
|
||||
type ProfileTab = 'orders' | 'addresses' | 'settings'
|
||||
|
||||
type ProfileTabItem = {
|
||||
tab: ProfileTab
|
||||
label: string
|
||||
icon: LucideIcon
|
||||
count: number | null
|
||||
}
|
||||
|
||||
type ProfileCustomer = Customer & {
|
||||
points?: number
|
||||
addresses?: CustomerAddress[]
|
||||
}
|
||||
|
||||
type AddressFormState = {
|
||||
recipientName: string
|
||||
phone: string
|
||||
addressLine: string
|
||||
subdistrict: string
|
||||
district: string
|
||||
province: string
|
||||
zipcode: string
|
||||
isDefault: boolean
|
||||
}
|
||||
|
||||
const emptyAddressForm: AddressFormState = {
|
||||
recipientName: '',
|
||||
phone: '',
|
||||
addressLine: '',
|
||||
subdistrict: '',
|
||||
district: '',
|
||||
province: '',
|
||||
zipcode: '',
|
||||
isDefault: false,
|
||||
}
|
||||
|
||||
function statusLabel(status: string) {
|
||||
const labels: Record<string, string> = {
|
||||
PENDING_PAYMENT: 'รอการชำระเงิน',
|
||||
PAID: 'ชำระเงินสำเร็จ',
|
||||
PROCESSING: 'กำลังจัดเตรียมสินค้า',
|
||||
SHIPPED: 'จัดส่งแล้ว',
|
||||
DELIVERED: 'จัดส่งสำเร็จ',
|
||||
CANCELLED: 'ยกเลิกแล้ว',
|
||||
}
|
||||
|
||||
return labels[status] ?? status.replaceAll('_', ' ')
|
||||
}
|
||||
|
||||
function statusClass(status: string) {
|
||||
if (status === 'PENDING_PAYMENT') return 'border-amber-100 bg-amber-50 text-amber-700'
|
||||
if (status === 'PAID' || status === 'PROCESSING') return 'border-emerald-100 bg-emerald-50 text-emerald-700'
|
||||
if (status === 'SHIPPED' || status === 'DELIVERED') return 'border-sky-100 bg-sky-50 text-sky-700'
|
||||
if (status === 'CANCELLED') return 'border-rose-100 bg-rose-50 text-rose-700'
|
||||
return 'border-gray-100 bg-gray-50 text-gray-700'
|
||||
}
|
||||
|
||||
function formatAddress(address: CustomerAddress) {
|
||||
return `${address.addressLine} ต.${address.subdistrict} อ.${address.district} จ.${address.province} ${address.zipcode}`
|
||||
}
|
||||
|
||||
function toAddressForm(address: CustomerAddress): AddressFormState {
|
||||
return {
|
||||
recipientName: address.recipientName,
|
||||
phone: address.phone,
|
||||
addressLine: address.addressLine,
|
||||
subdistrict: address.subdistrict,
|
||||
district: address.district,
|
||||
province: address.province,
|
||||
zipcode: address.zipcode,
|
||||
isDefault: address.isDefault,
|
||||
}
|
||||
}
|
||||
|
||||
async function readJson<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const response = await fetch(`${API_BASE}${path}`, init)
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
const message = data && typeof data === 'object' && 'error' in data && typeof data.error === 'string'
|
||||
? data.error
|
||||
: `${path} returned ${response.status}`
|
||||
throw new Error(message)
|
||||
}
|
||||
|
||||
return data as T
|
||||
}
|
||||
|
||||
export default function ProfileClient() {
|
||||
const { token, customer, setAuth, logout } = useAuthStore()
|
||||
const [activeTab, setActiveTab] = useState<ProfileTab>('orders')
|
||||
const [dbCustomer, setDbCustomer] = useState<ProfileCustomer | null>(null)
|
||||
const [orders, setOrders] = useState<Order[]>([])
|
||||
const [addresses, setAddresses] = useState<CustomerAddress[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [showAddressForm, setShowAddressForm] = useState(false)
|
||||
const [editingAddress, setEditingAddress] = useState<CustomerAddress | null>(null)
|
||||
const [addressForm, setAddressForm] = useState<AddressFormState>(emptyAddressForm)
|
||||
const [submittingAddress, setSubmittingAddress] = useState(false)
|
||||
const [settingsForm, setSettingsForm] = useState({ email: '', phone: '' })
|
||||
const [submittingSettings, setSubmittingSettings] = useState(false)
|
||||
const [settingsSuccess, setSettingsSuccess] = useState(false)
|
||||
|
||||
const loadProfileData = async (currentCustomer: Customer) => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const [profileData, orderData, addressData] = await Promise.all([
|
||||
readJson<ProfileCustomer>(`/profile/${currentCustomer.id}`),
|
||||
readJson<Order[]>(`/orders/customer/${currentCustomer.id}`),
|
||||
readJson<CustomerAddress[]>(`/profile/${currentCustomer.id}/addresses`),
|
||||
])
|
||||
|
||||
setDbCustomer(profileData)
|
||||
setOrders(Array.isArray(orderData) ? orderData : [])
|
||||
setAddresses(Array.isArray(addressData) ? addressData : [])
|
||||
setSettingsForm({
|
||||
email: profileData.email ?? '',
|
||||
phone: profileData.phone ?? '',
|
||||
})
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'ไม่สามารถโหลดข้อมูลสมาชิกได้')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!customer) return
|
||||
queueMicrotask(() => {
|
||||
void loadProfileData(customer)
|
||||
})
|
||||
}, [customer])
|
||||
|
||||
const resetAddressForm = () => {
|
||||
setAddressForm(emptyAddressForm)
|
||||
setEditingAddress(null)
|
||||
setShowAddressForm(false)
|
||||
}
|
||||
|
||||
const updateAddressForm = (key: keyof AddressFormState, value: string | boolean) => {
|
||||
setAddressForm((current) => ({ ...current, [key]: value }))
|
||||
}
|
||||
|
||||
const handleStartAddress = (address?: CustomerAddress) => {
|
||||
if (address) {
|
||||
setEditingAddress(address)
|
||||
setAddressForm(toAddressForm(address))
|
||||
} else {
|
||||
setEditingAddress(null)
|
||||
setAddressForm(emptyAddressForm)
|
||||
}
|
||||
setShowAddressForm(true)
|
||||
}
|
||||
|
||||
const reloadAddresses = async (customerId: number) => {
|
||||
const data = await readJson<CustomerAddress[]>(`/profile/${customerId}/addresses`)
|
||||
setAddresses(Array.isArray(data) ? data : [])
|
||||
}
|
||||
|
||||
const handleAddressSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
if (!customer) return
|
||||
|
||||
setSubmittingAddress(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
await readJson<CustomerAddress>(
|
||||
editingAddress
|
||||
? `/profile/${customer.id}/addresses/${editingAddress.id}`
|
||||
: `/profile/${customer.id}/addresses`,
|
||||
{
|
||||
method: editingAddress ? 'PUT' : 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(addressForm),
|
||||
},
|
||||
)
|
||||
resetAddressForm()
|
||||
await reloadAddresses(customer.id)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'ไม่สามารถบันทึกที่อยู่ได้')
|
||||
} finally {
|
||||
setSubmittingAddress(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteAddress = async (addressId: number) => {
|
||||
if (!customer) return
|
||||
if (!window.confirm('ยืนยันที่จะลบที่อยู่จัดส่งนี้?')) return
|
||||
|
||||
setError(null)
|
||||
try {
|
||||
await readJson<{ success: boolean }>(`/profile/${customer.id}/addresses/${addressId}`, { method: 'DELETE' })
|
||||
await reloadAddresses(customer.id)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'ไม่สามารถลบที่อยู่ได้')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSetDefaultAddress = async (addressId: number) => {
|
||||
if (!customer) return
|
||||
|
||||
setError(null)
|
||||
try {
|
||||
await readJson<CustomerAddress>(`/profile/${customer.id}/addresses/${addressId}/default`, { method: 'PATCH' })
|
||||
await reloadAddresses(customer.id)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'ไม่สามารถตั้งค่าที่อยู่เริ่มต้นได้')
|
||||
}
|
||||
}
|
||||
|
||||
const handleSettingsSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
if (!customer) return
|
||||
|
||||
setSubmittingSettings(true)
|
||||
setSettingsSuccess(false)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const updatedCustomer = await readJson<ProfileCustomer>(`/profile/${customer.id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
email: settingsForm.email || null,
|
||||
phone: settingsForm.phone || null,
|
||||
}),
|
||||
})
|
||||
|
||||
setDbCustomer(updatedCustomer)
|
||||
if (token) setAuth(token, updatedCustomer)
|
||||
setSettingsSuccess(true)
|
||||
setTimeout(() => setSettingsSuccess(false), 3000)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'ไม่สามารถบันทึกข้อมูลติดต่อได้')
|
||||
} finally {
|
||||
setSubmittingSettings(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLineLogin = () => {
|
||||
const maybeWindow = window as Window & {
|
||||
liff?: {
|
||||
login: (options?: { redirectUri?: string }) => void
|
||||
}
|
||||
}
|
||||
|
||||
if (maybeWindow.liff) {
|
||||
maybeWindow.liff.login({ redirectUri: window.location.href })
|
||||
return
|
||||
}
|
||||
|
||||
setError('ยังไม่พบ LINE LIFF ในหน้า website นี้ กรุณาเปิดผ่าน LINE OA หรือรอให้ทีมตั้งค่า LIFF สำหรับ website')
|
||||
}
|
||||
|
||||
if (!customer) {
|
||||
return (
|
||||
<section className="mx-auto max-w-md rounded-3xl bg-white p-10 text-center shadow-brutal">
|
||||
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-pop-bg text-pop-pink">
|
||||
<User className="h-10 w-10" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-semibold text-pop-black">เข้าสู่ระบบสมาชิก</h1>
|
||||
<p className="mt-3 text-sm leading-relaxed text-gray-600">
|
||||
ล็อกอินเพื่อตรวจสอบประวัติคำสั่งซื้อ สะสมคะแนนสมาชิก และบันทึกสมุดที่อยู่จัดส่งสินค้า
|
||||
</p>
|
||||
{error && (
|
||||
<p className="mt-5 rounded-2xl border border-amber-100 bg-amber-50 p-4 text-sm text-amber-700">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLineLogin}
|
||||
className="mt-8 flex w-full items-center justify-center gap-3 rounded-full bg-[#00B900] px-6 py-4 text-sm font-bold uppercase tracking-[0.16em] text-white transition hover:bg-[#009900]"
|
||||
>
|
||||
<Award className="h-5 w-5" />
|
||||
เข้าสู่ระบบผ่าน LINE
|
||||
</button>
|
||||
<Link href="/shop" className="mt-5 inline-flex text-sm font-semibold text-pop-pink">
|
||||
กลับไปเลือกซื้อสินค้า
|
||||
</Link>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
const displayCustomer = dbCustomer ?? customer
|
||||
const tabs: ProfileTabItem[] = [
|
||||
{ tab: 'orders', label: 'ออเดอร์', icon: Package, count: orders.length },
|
||||
{ tab: 'addresses', label: 'ที่อยู่', icon: MapPin, count: addresses.length },
|
||||
{ tab: 'settings', label: 'ตั้งค่า', icon: Settings, count: null },
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="space-y-8">
|
||||
{error && (
|
||||
<div className="rounded-3xl border border-rose-100 bg-rose-50 p-5 text-sm font-medium text-rose-600">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative overflow-hidden rounded-3xl bg-white p-6 shadow-brutal">
|
||||
<div className="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-pop-pink via-pop-yellow to-pop-red" />
|
||||
<div className="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex min-w-0 items-center gap-4">
|
||||
<div className="h-16 w-16 shrink-0 overflow-hidden rounded-full border border-pop-pink/20 bg-pop-bg">
|
||||
<img
|
||||
src={displayCustomer.pictureUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(displayCustomer.displayName || 'HomAroma')}`}
|
||||
alt={displayCustomer.displayName || 'LINE Profile'}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h1 className="truncate text-2xl font-semibold text-pop-black">{displayCustomer.displayName || 'HomAroma Member'}</h1>
|
||||
<div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs font-semibold text-gray-500">
|
||||
{displayCustomer.phone && <span className="inline-flex items-center gap-1"><Phone className="h-3 w-3" />{displayCustomer.phone}</span>}
|
||||
{displayCustomer.email && <span className="inline-flex items-center gap-1"><Mail className="h-3 w-3" />{displayCustomer.email}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4 rounded-2xl bg-pop-bg px-4 py-3">
|
||||
<Award className="h-6 w-6 text-pop-pink" />
|
||||
<div>
|
||||
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500">คะแนนสะสม</p>
|
||||
<p className="text-xl font-black text-pop-black">{displayCustomer.points ?? 0} คะแนน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 overflow-x-auto border-b border-gray-200">
|
||||
{tabs.map(({ tab, label, icon: Icon, count }) => (
|
||||
<button
|
||||
key={tab}
|
||||
type="button"
|
||||
onClick={() => setActiveTab(tab)}
|
||||
className={`relative flex shrink-0 items-center gap-2 px-3 pb-4 text-sm font-bold transition ${
|
||||
activeTab === tab ? 'text-pop-pink' : 'text-gray-500 hover:text-pop-black'
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{label}
|
||||
{typeof count === 'number' && (
|
||||
<span className="rounded-full bg-pop-bg px-2 py-0.5 text-[10px]">{count}</span>
|
||||
)}
|
||||
{activeTab === tab && <span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-pop-pink" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center rounded-3xl bg-white py-24 shadow-brutal">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-pop-pink" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{activeTab === 'orders' && (
|
||||
<div className="space-y-5">
|
||||
{orders.length === 0 ? (
|
||||
<EmptyPanel icon={Package} title="ไม่มีประวัติการสั่งซื้อ" description="คุณยังไม่ได้ทำการสั่งซื้อสินค้าใด ๆ กับ HomAroma" actionHref="/shop" actionText="ไปหน้าช้อปปิ้ง" />
|
||||
) : (
|
||||
orders.map((order) => (
|
||||
<article key={order.id} className="rounded-3xl bg-white p-6 shadow-brutal">
|
||||
<div className="flex flex-col gap-3 border-b border-gray-100 pb-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-gray-500">เลขออเดอร์ #{order.id.toString().padStart(4, '0')}</p>
|
||||
<p className="mt-1 text-[11px] text-gray-400">
|
||||
สั่งเมื่อ {new Date(order.createdAt).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`rounded-full border px-3 py-1 text-xs font-bold ${statusClass(order.status)}`}>
|
||||
{statusLabel(order.status)}
|
||||
</span>
|
||||
<Link href={`/order/${order.id}`} className="rounded-full border border-gray-200 p-2 text-gray-500 transition hover:text-pop-pink">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
{order.items.map((item) => (
|
||||
<div key={item.id} className="flex items-center gap-3 text-sm">
|
||||
<div className="h-11 w-11 shrink-0 overflow-hidden rounded-xl bg-pop-bg">
|
||||
<img src={item.productImage || '/images/oil_ozone.png'} alt={item.productName} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate font-semibold text-pop-black">{item.productName}</p>
|
||||
<p className="text-xs text-gray-500">{item.variantSize ? `${item.variantSize} · ` : ''}x {item.quantity}</p>
|
||||
</div>
|
||||
<p className="font-bold text-pop-pink">{formatPrice(item.priceAtPurchase * item.quantity)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex flex-col gap-3 border-t border-gray-100 pt-4 text-sm md:flex-row md:items-center md:justify-between">
|
||||
<p className="text-gray-500">
|
||||
{order.trackingNo ? <>เลขพัสดุ: <span className="font-mono font-bold text-pop-black">{order.trackingNo}</span></> : 'ยังไม่มีเลขพัสดุ'}
|
||||
</p>
|
||||
<p className="font-bold text-pop-black">ยอดรวมสุทธิ: <span className="text-pop-pink">{formatPrice(order.totalAmount)}</span></p>
|
||||
</div>
|
||||
</article>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'addresses' && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-3 border-b border-gray-200 pb-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<h2 className="flex items-center gap-2 text-xl font-semibold text-pop-black">
|
||||
<MapPin className="h-5 w-5 text-pop-pink" />
|
||||
สมุดที่อยู่จัดส่ง
|
||||
</h2>
|
||||
{!showAddressForm && (
|
||||
<button type="button" onClick={() => handleStartAddress()} className="inline-flex items-center justify-center gap-2 rounded-full bg-pop-black px-5 py-3 text-xs font-bold uppercase tracking-[0.16em] text-white transition hover:bg-pop-pink">
|
||||
<Plus className="h-4 w-4" />
|
||||
เพิ่มที่อยู่ใหม่
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showAddressForm && (
|
||||
<form onSubmit={handleAddressSubmit} className="space-y-5 rounded-3xl bg-white p-6 shadow-brutal">
|
||||
<h3 className="text-sm font-bold uppercase tracking-[0.2em] text-pop-pink">
|
||||
{editingAddress ? 'แก้ไขที่อยู่จัดส่ง' : 'เพิ่มที่อยู่จัดส่งใหม่'}
|
||||
</h3>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<TextInput label="ชื่อผู้รับ" value={addressForm.recipientName} onChange={(value) => updateAddressForm('recipientName', value)} required />
|
||||
<TextInput label="เบอร์โทรศัพท์ผู้รับ" value={addressForm.phone} onChange={(value) => updateAddressForm('phone', value)} required />
|
||||
</div>
|
||||
<TextInput label="ที่อยู่" value={addressForm.addressLine} onChange={(value) => updateAddressForm('addressLine', value)} required />
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<TextInput label="ตำบล/แขวง" value={addressForm.subdistrict} onChange={(value) => updateAddressForm('subdistrict', value)} required />
|
||||
<TextInput label="อำเภอ/เขต" value={addressForm.district} onChange={(value) => updateAddressForm('district', value)} required />
|
||||
<TextInput label="จังหวัด" value={addressForm.province} onChange={(value) => updateAddressForm('province', value)} required />
|
||||
<TextInput label="รหัสไปรษณีย์" value={addressForm.zipcode} onChange={(value) => updateAddressForm('zipcode', value)} required />
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-3 text-sm font-semibold text-gray-600">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={addressForm.isDefault}
|
||||
onChange={(event) => updateAddressForm('isDefault', event.target.checked)}
|
||||
className="h-4 w-4 rounded border-gray-300 text-pop-pink"
|
||||
/>
|
||||
ตั้งเป็นที่อยู่จัดส่งเริ่มต้น
|
||||
</label>
|
||||
|
||||
<div className="flex justify-end gap-3 border-t border-gray-100 pt-4">
|
||||
<button type="button" onClick={resetAddressForm} className="rounded-full border border-gray-200 px-5 py-2 text-sm font-semibold text-gray-600">
|
||||
ยกเลิก
|
||||
</button>
|
||||
<button type="submit" disabled={submittingAddress} className="inline-flex items-center gap-2 rounded-full bg-pop-pink px-5 py-2 text-sm font-semibold text-white disabled:opacity-60">
|
||||
{submittingAddress && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
บันทึกที่อยู่
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{addresses.length === 0 ? (
|
||||
<EmptyPanel icon={MapPin} title="ไม่มีข้อมูลที่อยู่จัดส่ง" description="เพิ่มที่อยู่เพื่อใช้ในขั้นตอน checkout รอบถัดไป" />
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{addresses.map((address) => (
|
||||
<article key={address.id} className={`rounded-3xl bg-white p-5 shadow-brutal ${address.isDefault ? 'ring-2 ring-pop-pink/30' : ''}`}>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<p className="font-semibold text-pop-black">{address.recipientName}</p>
|
||||
{address.isDefault && <span className="rounded-full bg-pop-bg px-2 py-0.5 text-[10px] font-bold text-pop-pink">เริ่มต้น</span>}
|
||||
</div>
|
||||
<p className="mt-1 text-xs font-semibold text-gray-500">{address.phone}</p>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<button type="button" onClick={() => handleStartAddress(address)} className="rounded-full border border-gray-200 p-2 text-gray-500 hover:text-pop-pink">
|
||||
<Edit3 className="h-4 w-4" />
|
||||
</button>
|
||||
<button type="button" onClick={() => void handleDeleteAddress(address.id)} className="rounded-full border border-rose-100 p-2 text-rose-500">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-600">{formatAddress(address)}</p>
|
||||
{!address.isDefault && (
|
||||
<button type="button" onClick={() => void handleSetDefaultAddress(address.id)} className="mt-4 w-full rounded-full border border-gray-200 px-4 py-2 text-xs font-bold uppercase tracking-[0.16em] text-gray-600 hover:text-pop-pink">
|
||||
ตั้งเป็นที่อยู่เริ่มต้น
|
||||
</button>
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'settings' && (
|
||||
<div className="space-y-6">
|
||||
<h2 className="flex items-center gap-2 border-b border-gray-200 pb-4 text-xl font-semibold text-pop-black">
|
||||
<Settings className="h-5 w-5 text-pop-pink" />
|
||||
ข้อมูลติดต่อสมาชิก
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSettingsSubmit} className="max-w-xl space-y-5 rounded-3xl bg-white p-6 shadow-brutal">
|
||||
{settingsSuccess && (
|
||||
<div className="flex items-center justify-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm font-bold text-emerald-700">
|
||||
<Check className="h-4 w-4" />
|
||||
บันทึกข้อมูลติดต่อสำเร็จแล้ว
|
||||
</div>
|
||||
)}
|
||||
<TextInput label="อีเมล" value={settingsForm.email} onChange={(email) => setSettingsForm((current) => ({ ...current, email }))} type="email" />
|
||||
<TextInput label="เบอร์โทรศัพท์" value={settingsForm.phone} onChange={(phone) => setSettingsForm((current) => ({ ...current, phone }))} type="tel" />
|
||||
<button type="submit" disabled={submittingSettings} className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-pop-pink px-6 py-3 text-sm font-bold uppercase tracking-[0.16em] text-white disabled:opacity-60">
|
||||
{submittingSettings ? <Loader2 className="h-4 w-4 animate-spin" /> : <Check className="h-4 w-4" />}
|
||||
บันทึกข้อมูลติดต่อ
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<button type="button" onClick={logout} className="inline-flex items-center gap-2 text-sm font-semibold text-gray-500 transition hover:text-rose-500">
|
||||
<LogOut className="h-4 w-4" />
|
||||
ออกจากระบบบนอุปกรณ์นี้
|
||||
</button>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function TextInput({
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
required = false,
|
||||
type = 'text',
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
required?: boolean
|
||||
type?: string
|
||||
}) {
|
||||
return (
|
||||
<label className="space-y-1.5">
|
||||
<span className="block text-[10px] font-bold uppercase tracking-[0.2em] text-gray-500">{label}</span>
|
||||
<input
|
||||
type={type}
|
||||
required={required}
|
||||
value={value}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-sm text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20"
|
||||
/>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
function EmptyPanel({
|
||||
icon: Icon,
|
||||
title,
|
||||
description,
|
||||
actionHref,
|
||||
actionText,
|
||||
}: {
|
||||
icon: typeof Package
|
||||
title: string
|
||||
description: string
|
||||
actionHref?: string
|
||||
actionText?: string
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-3xl bg-white px-6 py-16 text-center shadow-brutal">
|
||||
<Icon className="mx-auto mb-5 h-12 w-12 text-gray-300" />
|
||||
<h3 className="text-xl font-semibold text-pop-black">{title}</h3>
|
||||
<p className="mx-auto mt-2 max-w-md text-sm text-gray-500">{description}</p>
|
||||
{actionHref && actionText && (
|
||||
<Link href={actionHref} className="mt-6 inline-flex rounded-full bg-pop-pink px-6 py-3 text-sm font-bold text-white">
|
||||
{actionText}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
type ShopCouponBridgeProps = {
|
||||
coupon?: string
|
||||
}
|
||||
|
||||
export default function ShopCouponBridge({ coupon }: ShopCouponBridgeProps) {
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
if (!coupon) return
|
||||
|
||||
localStorage.setItem('homaroma_active_coupon', coupon)
|
||||
router.replace('/shop', { scroll: false })
|
||||
}, [coupon, router])
|
||||
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,183 @@
|
||||
"use client";
|
||||
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ChevronRight, Loader2, Package, Search } from 'lucide-react'
|
||||
|
||||
import { API_BASE } from '../lib/api'
|
||||
|
||||
type TrackResponse =
|
||||
| { success: true; orderId: number }
|
||||
| { error?: string }
|
||||
|
||||
function parseStoredOrders(value: string | null) {
|
||||
if (!value) return []
|
||||
|
||||
try {
|
||||
const parsed = JSON.parse(value)
|
||||
return Array.isArray(parsed)
|
||||
? parsed.map(Number).filter((id) => Number.isFinite(id) && id > 0)
|
||||
: []
|
||||
} catch {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
function orderLabel(id: number) {
|
||||
return `#${id.toString().padStart(4, '0')}`
|
||||
}
|
||||
|
||||
export default function TrackOrderClient() {
|
||||
const router = useRouter()
|
||||
const [orderId, setOrderId] = useState('')
|
||||
const [phone, setPhone] = useState('')
|
||||
const [localOrders, setLocalOrders] = useState<number[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const storedOrders = parseStoredOrders(localStorage.getItem('homaroma_local_orders'))
|
||||
queueMicrotask(() => setLocalOrders(storedOrders))
|
||||
}, [])
|
||||
|
||||
const saveLocalOrder = (id: number) => {
|
||||
setLocalOrders((current) => {
|
||||
const next = [id, ...current.filter((item) => item !== id)].slice(0, 12)
|
||||
localStorage.setItem('homaroma_local_orders', JSON.stringify(next))
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
const normalizedOrderId = Number.parseInt(orderId.replace(/[^0-9]/g, ''), 10)
|
||||
|
||||
if (!Number.isFinite(normalizedOrderId) || normalizedOrderId <= 0) {
|
||||
setError('กรุณากรอกหมายเลขคำสั่งซื้อให้ถูกต้อง')
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/orders/track`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
orderId: normalizedOrderId,
|
||||
phone,
|
||||
}),
|
||||
})
|
||||
const data = await response.json() as TrackResponse
|
||||
|
||||
if (response.ok && 'success' in data && data.success) {
|
||||
saveLocalOrder(data.orderId)
|
||||
router.push(`/order/${data.orderId}`)
|
||||
return
|
||||
}
|
||||
|
||||
setError('error' in data && data.error ? data.error : 'ไม่สามารถยืนยันข้อมูลคำสั่งซื้อได้')
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'เกิดข้อผิดพลาดในการเชื่อมต่อ กรุณาลองใหม่อีกครั้ง')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-10 md:grid-cols-2">
|
||||
<section className="self-start rounded-3xl bg-white p-8 shadow-brutal">
|
||||
<div className="mb-6 flex items-center gap-3 border-b border-gray-100 pb-4">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pop-bg text-pop-pink">
|
||||
<Search className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">Manual Search</p>
|
||||
<h2 className="text-xl font-semibold text-pop-black">ค้นหาคำสั่งซื้อ</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form className="space-y-5" onSubmit={handleSubmit}>
|
||||
{error && (
|
||||
<div className="rounded-2xl border border-rose-100 bg-rose-50 p-4 text-sm font-medium text-rose-600">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="orderId" className="text-xs font-bold uppercase tracking-[0.22em] text-gray-500">
|
||||
Order Number
|
||||
</label>
|
||||
<input
|
||||
id="orderId"
|
||||
required
|
||||
value={orderId}
|
||||
onChange={(event) => setOrderId(event.target.value)}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20"
|
||||
placeholder="เช่น 1024"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="phone" className="text-xs font-bold uppercase tracking-[0.22em] text-gray-500">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
id="phone"
|
||||
required
|
||||
value={phone}
|
||||
onChange={(event) => setPhone(event.target.value)}
|
||||
className="w-full rounded-2xl border border-gray-200 bg-pop-bg px-4 py-3 text-pop-black outline-none transition focus:border-pop-pink focus:ring-2 focus:ring-pop-pink/20"
|
||||
placeholder="เบอร์โทรที่ใช้ตอนสั่งซื้อ"
|
||||
type="tel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-full bg-pop-black px-6 py-4 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{loading ? <Loader2 className="h-5 w-5 animate-spin" /> : 'Find Order'}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-3 border-b border-gray-200 pb-4">
|
||||
<Package className="h-5 w-5 text-pop-pink" />
|
||||
<h2 className="text-xl font-semibold text-pop-black">Recent Device Orders</h2>
|
||||
</div>
|
||||
|
||||
{localOrders.length === 0 ? (
|
||||
<div className="rounded-3xl border border-dashed border-gray-200 bg-white p-10 text-center shadow-brutal">
|
||||
<p className="text-sm font-semibold text-gray-600">ยังไม่มีประวัติคำสั่งซื้อบนอุปกรณ์นี้</p>
|
||||
<p className="mt-2 text-xs uppercase tracking-[0.18em] text-gray-400">ใช้ฟอร์มค้นหาด้านซ้ายเพื่อบันทึกออเดอร์</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{localOrders.map((id) => (
|
||||
<Link
|
||||
key={id}
|
||||
href={`/order/${id}`}
|
||||
className="group flex items-center justify-between rounded-2xl bg-white p-5 shadow-brutal transition hover:-translate-y-0.5 hover:shadow-brutal-hover"
|
||||
>
|
||||
<div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Order</p>
|
||||
<p className="mt-1 font-mono text-2xl font-bold text-pop-black">{orderLabel(id)}</p>
|
||||
</div>
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pop-bg text-pop-black transition group-hover:bg-pop-pink group-hover:text-white">
|
||||
<ChevronRight className="h-5 w-5" />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import { Heart } from 'lucide-react'
|
||||
import type { Product } from '@homaroma/types'
|
||||
|
||||
import { useWishlistStore } from '../store/wishlistStore'
|
||||
|
||||
type WishlistButtonProps = {
|
||||
product: Product
|
||||
}
|
||||
|
||||
export default function WishlistButton({ product }: WishlistButtonProps) {
|
||||
const isInWishlist = useWishlistStore((state) => state.isInWishlist(product.id))
|
||||
const toggleItem = useWishlistStore((state) => state.toggleItem)
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
toggleItem(product)
|
||||
}}
|
||||
aria-label={isInWishlist ? 'Remove from wishlist' : 'Add to wishlist'}
|
||||
className={`absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-white/90 shadow-sm backdrop-blur transition hover:scale-105 ${
|
||||
isInWishlist
|
||||
? 'border-rose-200 text-rose-500'
|
||||
: 'border-gray-200 text-pop-black hover:border-rose-200 hover:text-rose-500'
|
||||
}`}
|
||||
>
|
||||
<Heart className={`h-5 w-5 ${isInWishlist ? 'fill-current' : ''}`} />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
|
||||
import Link from 'next/link'
|
||||
import { Heart } from 'lucide-react'
|
||||
|
||||
import ProductCard from './ProductCard'
|
||||
import { useWishlistStore } from '../store/wishlistStore'
|
||||
|
||||
export default function WishlistClient() {
|
||||
const items = useWishlistStore((state) => state.items)
|
||||
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
<section className="mx-auto max-w-2xl rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-rose-50 text-rose-300">
|
||||
<Heart className="h-10 w-10" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-semibold text-pop-black">Your wishlist is empty</h2>
|
||||
<p className="mx-auto mt-3 max-w-md text-gray-500">
|
||||
Explore our products and tap the heart icon to save your favorites.
|
||||
</p>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="mt-8 inline-flex rounded-full bg-pop-pink px-8 py-3 text-sm font-bold uppercase tracking-[0.18em] text-white transition hover:bg-pop-red"
|
||||
>
|
||||
Browse Shop
|
||||
</Link>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{items.map((product) => (
|
||||
<ProductCard key={product.id} product={product} />
|
||||
))}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,567 @@
|
||||
import Link from 'next/link'
|
||||
import { Clock, Mail, MapPin, MessageCircle } from 'lucide-react'
|
||||
import type { Category, PageSection, Product } from '@homaroma/types'
|
||||
import { getCategoryImage } from '@homaroma/types'
|
||||
import ProductCard from '../ProductCard'
|
||||
import { localizedFromRecord, resolveLocalized, toRecord } from '../../lib/localization'
|
||||
|
||||
type DynamicPageRendererProps = {
|
||||
sections: PageSection[]
|
||||
categories: Category[]
|
||||
lang?: string
|
||||
}
|
||||
|
||||
function categoryName(category: Category, lang: string) {
|
||||
if (typeof category.name === 'string') return category.name
|
||||
return category.name[lang] ?? category.name.th ?? category.name.en ?? Object.values(category.name)[0] ?? ''
|
||||
}
|
||||
|
||||
function getProducts(payload: Record<string, unknown>): Product[] {
|
||||
return Array.isArray(payload.products) ? payload.products as Product[] : []
|
||||
}
|
||||
|
||||
function getCategoriesFromPayload(payload: Record<string, unknown>): Category[] {
|
||||
return Array.isArray(payload.categories) ? payload.categories as Category[] : []
|
||||
}
|
||||
|
||||
function localizedValue(value: unknown, lang: string) {
|
||||
return resolveLocalized(value as never, lang)
|
||||
}
|
||||
|
||||
function optionalText(value: unknown, lang: string) {
|
||||
if (Array.isArray(value)) return value.filter(Boolean).join(', ')
|
||||
return localizedValue(value, lang)
|
||||
}
|
||||
|
||||
function renderAccentTitle(text: string, accentClassName = 'text-pop-pink italic') {
|
||||
if (!text.includes('[') || !text.includes(']')) return text
|
||||
|
||||
return text.split('[').map((part, index) => {
|
||||
if (!part.includes(']')) return <span key={index}>{part}</span>
|
||||
|
||||
const [accent, rest] = part.split(']')
|
||||
return (
|
||||
<span key={index}>
|
||||
<span className={accentClassName}>{accent}</span>
|
||||
{rest}
|
||||
</span>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const slides = Array.isArray(payload.slides) ? payload.slides : []
|
||||
if (!slides.length) return null
|
||||
|
||||
return (
|
||||
<section className="bg-pop-black px-4 py-3 text-center text-sm font-semibold tracking-wide text-white">
|
||||
{slides.map((slide, index) => (
|
||||
<span key={index} className={index === 0 ? '' : 'hidden md:inline'}>
|
||||
{index > 0 && <span className="mx-4 text-white/30">/</span>}
|
||||
{localizedFromRecord({ slide }, 'slide', lang)}
|
||||
</span>
|
||||
))}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const tagline = localizedFromRecord(payload, 'tagline', lang)
|
||||
const title = localizedFromRecord(payload, 'title', lang)
|
||||
const description = localizedFromRecord(payload, 'description', lang)
|
||||
const buttonText = localizedFromRecord(payload, 'buttonText', lang)
|
||||
const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
|
||||
const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
|
||||
|
||||
return (
|
||||
<section className="relative flex min-h-[78vh] w-full items-center justify-center overflow-hidden bg-white">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={title || 'HomAroma'}
|
||||
className="absolute inset-0 h-full w-full scale-[1.02] object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-pop-bg/90 via-pop-bg/55 to-white/10" />
|
||||
<div className="relative z-10 mx-auto w-full max-w-6xl px-6 py-24">
|
||||
<div className="max-w-3xl space-y-6">
|
||||
{tagline && (
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
|
||||
{tagline}
|
||||
</p>
|
||||
)}
|
||||
<h1 className="text-5xl font-semibold leading-tight text-pop-black md:text-7xl">
|
||||
{title || 'HomAroma'}
|
||||
</h1>
|
||||
{description && (
|
||||
<p className="max-w-2xl text-lg leading-relaxed text-gray-700 md:text-xl">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
<Link href={buttonLink} className="inline-flex rounded-full bg-pop-pink px-8 py-4 font-semibold text-white shadow-brutal transition hover:bg-pop-red">
|
||||
{buttonText || 'Explore Collection'}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function CategoriesSection({
|
||||
payload,
|
||||
categories,
|
||||
lang,
|
||||
}: {
|
||||
payload: Record<string, unknown>
|
||||
categories: Category[]
|
||||
lang: string
|
||||
}) {
|
||||
const title = localizedFromRecord(payload, 'title', lang) || 'Our Collections'
|
||||
const subtitle = localizedFromRecord(payload, 'subtitle', lang)
|
||||
const categoryIds = Array.isArray(payload.categoryIds) ? payload.categoryIds.map(Number) : []
|
||||
const payloadCategories = getCategoriesFromPayload(payload)
|
||||
const sourceCategories = payloadCategories.length ? payloadCategories : categories
|
||||
const displayed = categoryIds.length ? sourceCategories.filter((category) => categoryIds.includes(category.id)) : sourceCategories
|
||||
|
||||
return (
|
||||
<section id="categories" className="bg-white px-6 py-24">
|
||||
<div className="mx-auto max-w-7xl space-y-14">
|
||||
<div className="mx-auto max-w-2xl space-y-4 text-center">
|
||||
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
|
||||
{subtitle && <p className="text-gray-500">{subtitle}</p>}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-5 md:grid-cols-5">
|
||||
{displayed.map((category) => {
|
||||
const name = categoryName(category, lang)
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={category.id}
|
||||
href={`/category/${category.id}`}
|
||||
className="group relative h-72 overflow-hidden rounded-2xl shadow-brutal transition hover:-translate-y-1 hover:shadow-brutal-hover"
|
||||
>
|
||||
<img
|
||||
src={category.imageUrl || getCategoryImage(name)}
|
||||
alt={name}
|
||||
className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent" />
|
||||
<div className="absolute bottom-5 left-5 right-5 text-white">
|
||||
<span className="block text-lg font-semibold">{name}</span>
|
||||
{category._count && (
|
||||
<span className="text-sm text-white/80">{category._count.products} Products</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function ProductsSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const title = localizedFromRecord(payload, 'title', lang) || 'Featured Picks'
|
||||
const subtitle = localizedFromRecord(payload, 'subtitle', lang)
|
||||
const products = getProducts(payload)
|
||||
|
||||
return (
|
||||
<section className="bg-pop-bg px-6 py-24">
|
||||
<div className="mx-auto max-w-7xl space-y-10">
|
||||
<div className="flex flex-col gap-4 border-b border-gray-200 pb-6 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
|
||||
{subtitle && <p className="mt-2 text-gray-500">{subtitle}</p>}
|
||||
</div>
|
||||
<Link href="/shop" className="font-semibold text-pop-pink transition hover:text-pop-red">
|
||||
View All Collection →
|
||||
</Link>
|
||||
</div>
|
||||
{products.length ? (
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{products.map((product) => <ProductCard key={product.id} product={product} />)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="rounded-2xl bg-white p-8 text-center text-gray-500 shadow-brutal">
|
||||
No products found in this section.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function BannerSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const title = localizedFromRecord(payload, 'title', lang)
|
||||
const description = localizedFromRecord(payload, 'description', lang)
|
||||
const buttonText = localizedFromRecord(payload, 'buttonText', lang)
|
||||
const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
|
||||
const linkUrl = typeof payload.linkUrl === 'string' ? payload.linkUrl : ''
|
||||
|
||||
const content = (
|
||||
<div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-brutal">
|
||||
<img src={imageUrl} alt={title || 'Banner'} className="absolute inset-0 h-full w-full object-cover" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-pop-black/75 via-pop-black/35 to-transparent" />
|
||||
<div className="relative z-10 max-w-xl space-y-4 p-8 text-white md:p-14">
|
||||
{title && <h2 className="text-3xl font-semibold md:text-5xl">{title}</h2>}
|
||||
{description && <p className="text-white/90">{description}</p>}
|
||||
{buttonText && <span className="inline-flex rounded-full bg-white px-6 py-3 font-semibold text-pop-black">{buttonText}</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return <section className="bg-white px-6 py-16">{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section>
|
||||
}
|
||||
|
||||
function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const title = localizedFromRecord(payload, 'title', lang)
|
||||
const content = localizedFromRecord(payload, 'content', lang)
|
||||
const alignClass = payload.textAlign === 'center'
|
||||
? 'text-center'
|
||||
: payload.textAlign === 'right'
|
||||
? 'text-right'
|
||||
: 'text-left'
|
||||
|
||||
return (
|
||||
<section className="bg-white px-6 py-16">
|
||||
<div className={`mx-auto max-w-4xl space-y-6 ${alignClass}`}>
|
||||
{title && <h2 className="text-3xl font-semibold text-pop-black md:text-4xl">{title}</h2>}
|
||||
{content && <div className="leading-relaxed text-gray-600" dangerouslySetInnerHTML={{ __html: content }} />}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function NewsletterSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const title = localizedFromRecord(payload, 'title', lang) || 'Stay in touch'
|
||||
const description = localizedFromRecord(payload, 'description', lang)
|
||||
const buttonText = localizedFromRecord(payload, 'buttonText', lang) || 'Subscribe'
|
||||
const placeholder = typeof payload.placeholderText === 'string' ? payload.placeholderText : 'you@example.com'
|
||||
|
||||
return (
|
||||
<section className="bg-pop-black px-6 py-20 text-white">
|
||||
<div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-[1fr_auto] md:items-end">
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-3xl font-semibold text-white md:text-4xl">{title}</h2>
|
||||
{description && <p className="max-w-2xl text-white/75">{description}</p>}
|
||||
</div>
|
||||
<form className="flex flex-col gap-3 sm:flex-row">
|
||||
<input className="min-w-0 rounded-full px-5 py-3 text-pop-black" placeholder={placeholder} type="email" />
|
||||
<button className="rounded-full bg-pop-pink px-6 py-3 font-semibold text-white" type="button">
|
||||
{buttonText}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function EditorialTileSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const title = localizedFromRecord(payload, 'title', lang)
|
||||
const description = localizedFromRecord(payload, 'description', lang)
|
||||
const buttonText = localizedFromRecord(payload, 'buttonText', lang)
|
||||
const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : ''
|
||||
const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : ''
|
||||
const imagePosition = payload.imagePosition === 'right' ? 'right' : 'left'
|
||||
const backgroundColor = typeof payload.backgroundColor === 'string' ? payload.backgroundColor : undefined
|
||||
const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
|
||||
|
||||
return (
|
||||
<section className="overflow-hidden bg-white px-6 py-20" style={{ backgroundColor, color: textColor }}>
|
||||
<div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2 md:items-center">
|
||||
{imageUrl && (
|
||||
<div className={`group aspect-square overflow-hidden rounded-3xl shadow-brutal ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={title || 'Editorial'}
|
||||
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className={`space-y-6 ${imagePosition === 'left' ? 'md:order-2' : 'md:order-1'}`}>
|
||||
{title && (
|
||||
<h2 className="text-4xl font-semibold leading-tight text-pop-black md:text-6xl" style={{ color: textColor }}>
|
||||
{renderAccentTitle(title)}
|
||||
</h2>
|
||||
)}
|
||||
<div className="h-px w-14 bg-pop-pink" />
|
||||
{description && <p className="whitespace-pre-line text-base leading-relaxed text-gray-600 md:text-lg" style={{ color: textColor }}>{description}</p>}
|
||||
{buttonText && buttonLink && (
|
||||
<Link href={buttonLink} className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-pop-pink hover:text-white">
|
||||
{buttonText}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function EditorialCarouselSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const title = localizedFromRecord(payload, 'title', lang)
|
||||
const slides = Array.isArray(payload.slides) ? payload.slides.map(toRecord) : []
|
||||
if (!slides.length) return null
|
||||
|
||||
return (
|
||||
<section className="bg-pop-black px-6 py-20 text-white">
|
||||
<div className="mx-auto max-w-7xl space-y-12">
|
||||
{title && (
|
||||
<div className="mx-auto max-w-3xl space-y-4 text-center">
|
||||
<h2 className="text-4xl font-semibold text-white md:text-5xl">{renderAccentTitle(title, 'text-pop-yellow italic')}</h2>
|
||||
<div className="mx-auto h-px w-16 bg-pop-yellow" />
|
||||
</div>
|
||||
)}
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{slides.map((slide, index) => {
|
||||
const slideTitle = localizedFromRecord(slide, 'title', lang)
|
||||
const description = localizedFromRecord(slide, 'description', lang)
|
||||
const category = localizedFromRecord(slide, 'category', lang)
|
||||
const buttonText = localizedFromRecord(slide, 'buttonText', lang)
|
||||
const buttonLink = typeof slide.buttonLink === 'string' ? slide.buttonLink : ''
|
||||
const imageUrl = typeof slide.imageUrl === 'string' ? slide.imageUrl : ''
|
||||
|
||||
return (
|
||||
<article key={index} className="group overflow-hidden rounded-3xl border border-white/10 bg-white/5">
|
||||
{imageUrl && (
|
||||
<div className="aspect-[4/3] overflow-hidden">
|
||||
<img src={imageUrl} alt={slideTitle || 'Editorial slide'} className="h-full w-full object-cover transition duration-700 group-hover:scale-105" />
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-4 p-6">
|
||||
{category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-pop-yellow">{category}</p>}
|
||||
{slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle, 'text-pop-yellow italic')}</h3>}
|
||||
{description && <p className="line-clamp-4 text-sm leading-relaxed text-white/70">{description}</p>}
|
||||
{buttonText && buttonLink && (
|
||||
<Link href={buttonLink} className="inline-flex text-xs font-bold uppercase tracking-[0.22em] text-pop-yellow transition hover:text-white">
|
||||
{buttonText} →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const title = localizedFromRecord(payload, 'title', lang) || 'Scent Guide Article'
|
||||
const subtitle = localizedFromRecord(payload, 'subtitle', lang)
|
||||
const author = localizedFromRecord(payload, 'author', lang)
|
||||
const category = localizedFromRecord(payload, 'category', lang)
|
||||
const imageUrl = typeof payload.imageUrl === 'string'
|
||||
? payload.imageUrl
|
||||
: typeof payload.backgroundImageUrl === 'string'
|
||||
? payload.backgroundImageUrl
|
||||
: ''
|
||||
const date = typeof payload.date === 'string'
|
||||
? payload.date
|
||||
: typeof payload.publishDate === 'string'
|
||||
? payload.publishDate
|
||||
: ''
|
||||
|
||||
return (
|
||||
<section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-pop-black px-6 py-24 text-center text-white md:min-h-[76vh]">
|
||||
{imageUrl && (
|
||||
<>
|
||||
<img src={imageUrl} alt={title} className="absolute inset-0 h-full w-full object-cover" />
|
||||
<div className="absolute inset-0 bg-pop-black/55" />
|
||||
</>
|
||||
)}
|
||||
<div className="relative z-10 mx-auto max-w-4xl space-y-6">
|
||||
{category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-yellow">{category}</p>}
|
||||
<h1 className="text-4xl font-semibold leading-tight md:text-6xl">{title}</h1>
|
||||
{subtitle && <p className="mx-auto max-w-2xl text-lg text-white/85 md:text-xl">{subtitle}</p>}
|
||||
{(author || date) && (
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-white/70">
|
||||
{[author && `By ${author}`, date].filter(Boolean).join(' / ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const title = localizedFromRecord(payload, 'title', lang) || 'Scent Notes'
|
||||
const description = localizedFromRecord(payload, 'description', lang)
|
||||
const notes = [
|
||||
['Top Notes', optionalText(payload.topNotes, lang) || 'The initial, lighter smells of the fragrance.'],
|
||||
['Heart Notes', optionalText(payload.heartNotes ?? payload.middleNotes, lang) || 'The core of the fragrance, emerging just after the top notes.'],
|
||||
['Base Notes', optionalText(payload.baseNotes, lang) || 'The deepest, richest scents that linger the longest.'],
|
||||
]
|
||||
|
||||
return (
|
||||
<section className="bg-pop-bg px-6 py-20">
|
||||
<div className="mx-auto max-w-6xl space-y-12 text-center">
|
||||
<div className="mx-auto max-w-3xl space-y-4">
|
||||
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
|
||||
{description && <p className="text-gray-600">{description}</p>}
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{notes.map(([label, value]) => (
|
||||
<article key={label} className="rounded-3xl bg-white p-8 text-left shadow-brutal">
|
||||
<h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">{label}</h3>
|
||||
<p className="leading-relaxed text-gray-600">{value}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function QuoteCalloutSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
|
||||
const quote = localizedFromRecord(payload, 'quote', lang)
|
||||
const author = localizedFromRecord(payload, 'author', lang)
|
||||
const role = localizedFromRecord(payload, 'role', lang)
|
||||
if (!quote) return null
|
||||
|
||||
return (
|
||||
<section className="bg-white px-6 py-24">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<p className="mb-8 text-7xl leading-none text-pop-pink/25">"</p>
|
||||
<blockquote className="text-3xl font-semibold italic leading-relaxed text-pop-black md:text-5xl">
|
||||
{quote}
|
||||
</blockquote>
|
||||
{(author || role) && (
|
||||
<p className="mt-8 text-xs font-bold uppercase tracking-[0.24em] text-gray-500">
|
||||
{[author, role].filter(Boolean).join(' / ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionSection({ payload }: { payload: Record<string, unknown> }) {
|
||||
const categories = Array.isArray(payload.categories) ? payload.categories.map(toRecord) : []
|
||||
if (!categories.length) return null
|
||||
|
||||
return (
|
||||
<section className="bg-pop-bg px-6 py-20">
|
||||
<div className="mx-auto max-w-4xl space-y-10">
|
||||
{categories.map((category, categoryIndex) => {
|
||||
const questions = Array.isArray(category.questions) ? category.questions.map(toRecord) : []
|
||||
const name = typeof category.name === 'string' ? category.name : ''
|
||||
const icon = typeof category.icon === 'string' ? category.icon : ''
|
||||
|
||||
return (
|
||||
<div key={categoryIndex} className="space-y-5">
|
||||
{name && (
|
||||
<h2 className="flex items-center gap-3 text-2xl font-semibold text-pop-black">
|
||||
{icon && <span className="text-pop-pink">{icon}</span>}
|
||||
{name}
|
||||
</h2>
|
||||
)}
|
||||
<div className="space-y-4">
|
||||
{questions.map((item, itemIndex) => {
|
||||
const question = typeof item.q === 'string' ? item.q : ''
|
||||
const answer = typeof item.a === 'string' ? item.a : ''
|
||||
if (!question || !answer) return null
|
||||
|
||||
return (
|
||||
<details key={itemIndex} className="group rounded-2xl bg-white p-5 shadow-brutal">
|
||||
<summary className="cursor-pointer list-none text-lg font-semibold text-pop-black marker:hidden">
|
||||
{question}
|
||||
</summary>
|
||||
<p className="mt-4 whitespace-pre-wrap leading-relaxed text-gray-600">{answer}</p>
|
||||
</details>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function ContactInfoSection({ payload }: { payload: Record<string, unknown> }) {
|
||||
const items = [
|
||||
['ที่อยู่', typeof payload.address === 'string' ? payload.address : '', MapPin],
|
||||
['อีเมล', typeof payload.email === 'string' ? payload.email : '', Mail],
|
||||
['Line', typeof payload.line === 'string' ? payload.line : '', MessageCircle],
|
||||
['เวลาทำการ', typeof payload.hours === 'string' ? payload.hours : '', Clock],
|
||||
] as const
|
||||
|
||||
return (
|
||||
<section className="bg-white px-6 py-20">
|
||||
<div className="mx-auto grid max-w-6xl gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{items.map(([label, value, Icon]) => {
|
||||
if (!value) return null
|
||||
|
||||
return (
|
||||
<article key={label} className="rounded-3xl bg-pop-bg p-6 text-center shadow-brutal">
|
||||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-white text-pop-pink">
|
||||
<Icon className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold text-pop-black">{label}</h3>
|
||||
{label === 'อีเมล' ? (
|
||||
<a className="break-words text-gray-600 transition hover:text-pop-pink" href={`mailto:${value}`}>
|
||||
{value}
|
||||
</a>
|
||||
) : (
|
||||
<p className="whitespace-pre-wrap break-words text-gray-600">{value}</p>
|
||||
)}
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DynamicPageRenderer({ sections, categories, lang = 'th' }: DynamicPageRendererProps) {
|
||||
return (
|
||||
<div className="flex w-full flex-col">
|
||||
{sections.map((section) => {
|
||||
if (!section.isActive) return null
|
||||
|
||||
const payload = toRecord(section.payload)
|
||||
const type = section.type.toUpperCase()
|
||||
|
||||
switch (type) {
|
||||
case 'ANNOUNCEMENT_BAR':
|
||||
return <AnnouncementBar key={section.id} payload={payload} lang={lang} />
|
||||
case 'HERO':
|
||||
return <HeroSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'CATEGORIES':
|
||||
return <CategoriesSection key={section.id} payload={payload} categories={categories} lang={lang} />
|
||||
case 'PRODUCTS':
|
||||
case 'PRODUCT_CAROUSEL':
|
||||
return <ProductsSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'BANNER':
|
||||
return <BannerSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'TEXT':
|
||||
return <TextSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'NEWSLETTER':
|
||||
return <NewsletterSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'EDITORIAL_TILE':
|
||||
return <EditorialTileSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'EDITORIAL_CAROUSEL':
|
||||
return <EditorialCarouselSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'HERO_ARTICLE':
|
||||
return <HeroArticleSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'RICH_TEXT':
|
||||
return <TextSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'SCENT_NOTES_BREAKDOWN':
|
||||
return <ScentNotesBreakdownSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'QUOTE_CALLOUT':
|
||||
return <QuoteCalloutSection key={section.id} payload={payload} lang={lang} />
|
||||
case 'ACCORDION':
|
||||
return <AccordionSection key={section.id} payload={payload} />
|
||||
case 'CONTACT_INFO':
|
||||
return <ContactInfoSection key={section.id} payload={payload} />
|
||||
default:
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
console.warn(`[DynamicPageRenderer] Unsupported section type: ${section.type}`)
|
||||
}
|
||||
return null
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user