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
@@ -0,0 +1,96 @@
|
||||
import { notFound } from 'next/navigation'
|
||||
import type { Metadata } from 'next'
|
||||
|
||||
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
|
||||
import { getCategoriesResult, getCmsPageResult } from '../../lib/cms'
|
||||
|
||||
const lang = 'th'
|
||||
|
||||
const reservedSlugs = new Set([
|
||||
'about',
|
||||
'article',
|
||||
'category',
|
||||
'contact',
|
||||
'coupons',
|
||||
'faq',
|
||||
'order',
|
||||
'products',
|
||||
'profile',
|
||||
'search',
|
||||
'scent-guide',
|
||||
'shop',
|
||||
'track',
|
||||
'wishlist',
|
||||
])
|
||||
|
||||
function normalizeSlug(slug: string) {
|
||||
return slug.trim().replace(/^\/+|\/+$/g, '').toLowerCase()
|
||||
}
|
||||
|
||||
function isReservedSlug(slug: string) {
|
||||
return reservedSlugs.has(normalizeSlug(slug))
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
|
||||
const { slug } = await params
|
||||
if (isReservedSlug(slug)) return { title: 'Page Not Found | HomAroma' }
|
||||
|
||||
const pageResult = await getCmsPageResult(slug, lang)
|
||||
if (!pageResult.ok || !pageResult.data.isPublished) return { title: 'Page Not Found | HomAroma' }
|
||||
|
||||
return {
|
||||
title: `${pageResult.data.title} | HomAroma`,
|
||||
}
|
||||
}
|
||||
|
||||
export default async function CmsCustomPage({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params
|
||||
if (isReservedSlug(slug)) notFound()
|
||||
|
||||
const [pageResult, categoriesResult] = await Promise.all([
|
||||
getCmsPageResult(slug, lang),
|
||||
getCategoriesResult(lang),
|
||||
])
|
||||
|
||||
if (!pageResult.ok) {
|
||||
if (pageResult.status === 404) notFound()
|
||||
|
||||
return (
|
||||
<main className="min-h-[70vh] bg-pop-bg px-6 py-24">
|
||||
<div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white px-6 py-16 text-center shadow-brutal">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-rose-500">CMS Page Error</p>
|
||||
<h1 className="mt-4 text-3xl font-semibold text-pop-black md:text-4xl">
|
||||
ไม่สามารถโหลดหน้านี้ได้
|
||||
</h1>
|
||||
<p className="mt-4 text-sm text-rose-500">{pageResult.error}</p>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
const page = pageResult.data
|
||||
if (!page.isPublished) notFound()
|
||||
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const sections = page.sections?.filter((section) => section.isActive) ?? []
|
||||
|
||||
if (!categoriesResult.ok) {
|
||||
console.error(`[website-cms] categories unavailable for CMS page "${slug}": ${categoriesResult.error}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-[70vh] bg-pop-bg">
|
||||
{sections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={sections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<div className="mx-auto max-w-4xl px-6 py-24 text-center">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">HomAroma</p>
|
||||
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">{page.title}</h1>
|
||||
<p className="mt-5 text-gray-600">
|
||||
หน้านี้ถูกเผยแพร่แล้ว แต่ยังไม่มี section ที่เปิดใช้งานใน Page Builder
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -32,91 +32,82 @@ export const metadata = {
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Hero */}
|
||||
<section className="relative min-h-[60vh] flex items-center justify-center overflow-hidden pt-24">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-night-800/60 via-night-900 to-night-900" />
|
||||
<div
|
||||
className="absolute inset-0 opacity-10"
|
||||
style={{ backgroundImage: 'radial-gradient(circle at 30% 50%, rgba(102,252,241,0.3) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(69,162,158,0.2) 0%, transparent 50%)' }}
|
||||
/>
|
||||
<div className="relative z-10 text-center px-6 max-w-3xl mx-auto space-y-6 animate-fade-in">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Our Story</p>
|
||||
<h1 className="text-6xl font-bold leading-tight">
|
||||
Born from a passion for <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-glow to-night-700 italic font-serif">stillness</span>
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
<section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-white pt-24">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,107,107,0.22),transparent_34%),radial-gradient(circle_at_80%_20%,rgba(255,160,122,0.18),transparent_34%)]" />
|
||||
<div className="relative z-10 mx-auto max-w-3xl space-y-6 px-6 text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Our Story</p>
|
||||
<h1 className="text-5xl font-bold leading-tight text-pop-black md:text-7xl">
|
||||
Born from a passion for <span className="italic text-pop-pink">stillness</span>
|
||||
</h1>
|
||||
<p className="text-slate-300 text-lg leading-relaxed">
|
||||
<p className="text-lg leading-relaxed text-gray-600">
|
||||
HomAroma began in 2019 as a one-person studio in Bangkok, crafting small batches of botanical aroma blends for friends and family. What started as a personal journey toward calm became a philosophy — that our environment shapes how we feel, think, and rest.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats Band */}
|
||||
<section className="py-12 px-6 bg-white/3 border-y border-white/5">
|
||||
<div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||||
<section className="border-y border-gray-200 bg-white px-6 py-12">
|
||||
<div className="mx-auto grid max-w-4xl grid-cols-2 gap-8 text-center md:grid-cols-4">
|
||||
{STATS.map(s => (
|
||||
<div key={s.label} className="space-y-1">
|
||||
<div className="text-4xl font-bold text-cyan-glow">{s.value}</div>
|
||||
<div className="text-xs uppercase tracking-widest text-slate-400">{s.label}</div>
|
||||
<div className="text-4xl font-bold text-pop-pink">{s.value}</div>
|
||||
<div className="text-xs uppercase tracking-widest text-gray-500">{s.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Mission Section */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
|
||||
<section className="px-6 py-24">
|
||||
<div className="mx-auto grid max-w-6xl items-center gap-16 md:grid-cols-2">
|
||||
<div className="space-y-6">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">Our Mission</p>
|
||||
<h2 className="text-4xl font-bold leading-tight">Transforming spaces into sanctuaries of peace</h2>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">Our Mission</p>
|
||||
<h2 className="text-4xl font-bold leading-tight text-pop-black">Transforming spaces into sanctuaries of peace</h2>
|
||||
<p className="leading-relaxed text-gray-700">
|
||||
We believe that scent is the fastest pathway to emotional transformation. A single breath of the right blend can dissolve anxiety, sharpen focus, or unlock creativity. Our mission is to make that transformation accessible — through products that are as beautiful as they are effective.
|
||||
</p>
|
||||
<p className="text-slate-400 leading-relaxed text-sm">
|
||||
<p className="text-sm leading-relaxed text-gray-600">
|
||||
Every HomAroma product is designed with intention: the glass bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative h-80 rounded-2xl overflow-hidden glass border border-white/5">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-teal-900/30 via-night-800/30 to-purple-900/20" />
|
||||
<div className="relative h-80 overflow-hidden rounded-3xl border border-gray-100 bg-white shadow-brutal">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-pop-bg via-white to-pop-orange/20" />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center space-y-3">
|
||||
<div className="space-y-3 text-center">
|
||||
<div className="text-7xl">🌿</div>
|
||||
<p className="text-white/30 text-sm uppercase tracking-widest">HomAroma Studio, Bangkok</p>
|
||||
<p className="text-sm uppercase tracking-widest text-gray-500">HomAroma Studio, Bangkok</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Three Pillars */}
|
||||
<section className="py-24 px-6 bg-night-800/20 border-y border-white/5">
|
||||
<div className="max-w-6xl mx-auto space-y-12">
|
||||
<div className="text-center space-y-3">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">What We Stand For</p>
|
||||
<h2 className="text-4xl font-bold">Three Pillars</h2>
|
||||
<div className="w-12 h-px bg-cyan-glow mx-auto" />
|
||||
<section className="border-y border-gray-200 bg-white px-6 py-24">
|
||||
<div className="mx-auto max-w-6xl space-y-12">
|
||||
<div className="space-y-3 text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-pop-pink">What We Stand For</p>
|
||||
<h2 className="text-4xl font-bold text-pop-black">Three Pillars</h2>
|
||||
<div className="mx-auto h-px w-12 bg-pop-pink" />
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{PILLARS.map(p => (
|
||||
<div key={p.title} className="glass rounded-2xl p-8 border border-white/5 hover:border-cyan-glow/20 transition-all duration-500 space-y-4">
|
||||
<div key={p.title} className="space-y-4 rounded-2xl border border-gray-100 bg-pop-bg p-8 shadow-brutal transition-all duration-300 hover:-translate-y-1 hover:shadow-brutal-hover">
|
||||
<div className="text-4xl">{p.icon}</div>
|
||||
<h3 className="text-xl font-bold">{p.title}</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">{p.desc}</p>
|
||||
<h3 className="text-xl font-bold text-pop-black">{p.title}</h3>
|
||||
<p className="text-sm leading-relaxed text-gray-600">{p.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className="py-24 px-6 text-center space-y-6">
|
||||
<h2 className="text-4xl font-bold">Ready to find your scent?</h2>
|
||||
<p className="text-slate-400 max-w-md mx-auto">Let our Scent Guide help you discover the perfect blend for your moment.</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
|
||||
<Link href="/scent-guide" className="px-10 py-4 bg-white text-night-900 font-bold rounded-sm tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_30px_rgba(102,252,241,0.4)] transition-all duration-500">
|
||||
<section className="space-y-6 px-6 py-24 text-center">
|
||||
<h2 className="text-4xl font-bold text-pop-black">Ready to find your scent?</h2>
|
||||
<p className="mx-auto max-w-md text-gray-600">Let our Scent Guide help you discover the perfect blend for your moment.</p>
|
||||
<div className="flex flex-col justify-center gap-4 pt-4 sm:flex-row">
|
||||
<Link href="/scent-guide" className="rounded-full bg-pop-black px-10 py-4 font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
|
||||
Take the Scent Guide
|
||||
</Link>
|
||||
<Link href="/shop" className="px-10 py-4 glass text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300">
|
||||
<Link href="/shop" className="rounded-full border border-pop-pink bg-white px-10 py-4 font-bold uppercase tracking-widest text-pop-pink transition hover:bg-pop-bg">
|
||||
Shop All Products
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -36,43 +36,40 @@ export default async function ArticleReaderPage({ params }: { params: Promise<{
|
||||
if (!article) notFound()
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-night-950">
|
||||
<main className="flex-1 pt-24 pb-20">
|
||||
<article className="max-w-4xl mx-auto w-full animate-fade-in relative mt-8">
|
||||
|
||||
{/* Desktop back button */}
|
||||
<div className="flex min-h-screen flex-col bg-pop-bg">
|
||||
<main className="flex-1 pb-20 pt-24">
|
||||
<article className="relative mx-auto mt-8 w-full max-w-4xl">
|
||||
<Link
|
||||
href="/scent-guide"
|
||||
className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 glass border border-white/5 rounded-full hover:bg-white/10 transition-colors"
|
||||
className="absolute -left-16 top-0 mt-8 hidden rounded-full border border-gray-200 bg-white p-4 text-pop-black shadow-sm transition-colors hover:text-pop-pink xl:-left-24 lg:flex"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5 text-slate-300" />
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Link>
|
||||
|
||||
{/* Header */}
|
||||
<div className="text-center px-6 py-12 space-y-6">
|
||||
<Link href="/scent-guide" className="lg:hidden text-slate-400 text-sm hover:text-white inline-flex items-center gap-2 mb-4">
|
||||
<ArrowLeft className="w-4 h-4" /> Go Back
|
||||
<div className="space-y-6 px-6 py-12 text-center">
|
||||
<Link href="/scent-guide" className="mb-4 inline-flex items-center gap-2 text-sm text-gray-600 hover:text-pop-pink lg:hidden">
|
||||
<ArrowLeft className="h-4 w-4" /> Go Back
|
||||
</Link>
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] font-bold text-xs">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.3em] text-pop-pink">
|
||||
{new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
|
||||
</p>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight max-w-3xl mx-auto font-serif">
|
||||
<h1 className="mx-auto max-w-3xl text-4xl font-bold leading-tight text-pop-black md:text-5xl lg:text-6xl">
|
||||
{article.title}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Cover Image */}
|
||||
{article.coverImage && (
|
||||
<div className="w-full aspect-[16/7] bg-night-900 md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-white/5">
|
||||
<img src={article.coverImage} alt={article.title} className="w-full h-full object-cover" />
|
||||
<div className="mb-16 aspect-[16/7] w-full overflow-hidden bg-white shadow-brutal md:rounded-[2rem]">
|
||||
<img src={article.coverImage} alt={article.title} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content Body */}
|
||||
<div className="px-6 md:px-12 prose prose-invert prose-lg prose-cyan mx-auto max-w-3xl pb-16">
|
||||
<div dangerouslySetInnerHTML={{ __html: article.content }} className="space-y-6" />
|
||||
<div className="mx-auto max-w-3xl rounded-3xl bg-white px-6 py-10 shadow-brutal md:px-12">
|
||||
<div
|
||||
dangerouslySetInnerHTML={{ __html: article.content }}
|
||||
className="space-y-6 leading-relaxed text-gray-700 [&_a]:font-semibold [&_a]:text-pop-pink [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-pop-black [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:text-pop-black [&_img]:rounded-2xl [&_img]:shadow-brutal [&_p]:leading-relaxed [&_strong]:text-pop-black"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,140 +1,148 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useParams } from 'next/navigation'
|
||||
import { notFound } from 'next/navigation'
|
||||
import type { Metadata } from 'next'
|
||||
import type { Category, Product } from '@homaroma/types'
|
||||
import { getCategoryImage } from '@homaroma/types'
|
||||
import DynamicPageRenderer from '../../../components/dynamic/DynamicPageRenderer'
|
||||
import ProductCard from '../../../components/ProductCard'
|
||||
import { getCategoryImage, type Category, type Product } from '@homaroma/types'
|
||||
import { type ApiResult, fetchJsonResult, getCategoriesResult, getCmsPageResult } from '../../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../../lib/cms-sections'
|
||||
import { resolveLocalized } from '../../../lib/localization'
|
||||
|
||||
import { API_BASE } from '../../../lib/api'
|
||||
const lang = 'th'
|
||||
|
||||
export default function CategoryPage() {
|
||||
const params = useParams<{ id: string }>()
|
||||
const id = params.id
|
||||
type CategoryProductsResponse = {
|
||||
category?: Category
|
||||
data?: Product[]
|
||||
}
|
||||
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [category, setCategory] = useState<Category | null>(null)
|
||||
const [products, setProducts] = useState<Product[]>([])
|
||||
const [displayCount, setDisplayCount] = useState(24)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const loaderRef = useRef<HTMLDivElement>(null)
|
||||
async function getCategoryProducts(id: string): Promise<ApiResult<CategoryProductsResponse>> {
|
||||
return await fetchJsonResult<CategoryProductsResponse>(`/categories/${id}/products?limit=1000&lang=${lang}`, {
|
||||
next: { revalidate: 60 },
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
setDisplayCount(24)
|
||||
}, [id])
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||
const { id } = await params
|
||||
const result = await getCategoryProducts(id)
|
||||
const categoryName = result.ok && result.data.category ? resolveLocalized(result.data.category.name, lang) : ''
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
Promise.all([
|
||||
fetch(`${API_BASE}/categories/${id}/products?limit=1000`),
|
||||
fetch(`${API_BASE}/categories`),
|
||||
])
|
||||
.then(async ([catRes, allCatsRes]) => {
|
||||
if (!catRes.ok) throw new Error('Category not found')
|
||||
const catPaginated = await catRes.json()
|
||||
const allCats: Category[] = await allCatsRes.json()
|
||||
setCategory(catPaginated.category)
|
||||
setProducts(catPaginated.data || [])
|
||||
setCategories(allCats)
|
||||
})
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false))
|
||||
}, [id])
|
||||
return {
|
||||
title: categoryName ? `${categoryName} | HomAroma` : 'Category | HomAroma',
|
||||
description: categoryName ? `Shop ${categoryName} products from HomAroma.` : 'Shop HomAroma category products.',
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && products.length > displayCount)
|
||||
setDisplayCount((prev) => Math.min(prev + 12, products.length))
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: '200px' }
|
||||
)
|
||||
if (loaderRef.current) observer.observe(loaderRef.current)
|
||||
return () => observer.disconnect()
|
||||
}, [products.length, displayCount, loading])
|
||||
export default async function CategoryPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
const [categoryProductsResult, categoriesResult, cmsLayoutResult] = await Promise.all([
|
||||
getCategoryProducts(id),
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('category-layout', lang),
|
||||
])
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Hero Banner */}
|
||||
<div className="relative h-64 md:h-80 overflow-hidden">
|
||||
<img
|
||||
src={category?.imageUrl || getCategoryImage(typeof category?.name === 'string' ? category.name : (category?.name as any)?.th || (category?.name as any)?.en || '')}
|
||||
className="absolute inset-0 w-full h-full object-cover brightness-30 scale-105"
|
||||
alt={typeof category?.name === 'string' ? category.name : (category?.name as any)?.th || (category?.name as any)?.en || ''}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-night-900 via-night-900/60 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 px-6 pb-10 pt-20">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400 uppercase tracking-widest mb-4">
|
||||
<Link href="/" className="hover:text-white transition-colors">Home</Link>
|
||||
<span>/</span>
|
||||
<Link href="/shop" className="hover:text-white transition-colors">Shop</Link>
|
||||
<span>/</span>
|
||||
<span className="text-cyan-glow">{typeof category?.name === 'string' ? category.name : (category?.name as any)?.th || (category?.name as any)?.en || '...'}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold">
|
||||
{loading ? <div className="h-10 w-48 bg-white/10 animate-pulse rounded-lg" /> : typeof category?.name === 'string' ? category.name : (category?.name as any)?.th || (category?.name as any)?.en || ''}
|
||||
</h1>
|
||||
{!loading && category?._count && (
|
||||
<p className="text-slate-400 mt-2">{category._count.products} products available</p>
|
||||
)}
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] category-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
if (!categoryProductsResult.ok) {
|
||||
if (categoryProductsResult.status === 404) notFound()
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
<div className="px-6 py-20">
|
||||
<div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white p-10 text-center shadow-brutal">
|
||||
<p className="text-lg font-semibold text-pop-black">Unable to load this category</p>
|
||||
<p className="mt-2 text-sm text-rose-500">{categoryProductsResult.error}</p>
|
||||
<Link href="/shop" className="mt-6 inline-flex font-semibold text-pop-pink">Back to Shop</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{/* Products Grid */}
|
||||
<div className="max-w-7xl mx-auto px-6 py-16 space-y-10">
|
||||
if (!categoryProductsResult.data.category) notFound()
|
||||
|
||||
const category = categoryProductsResult.data.category
|
||||
const products = categoryProductsResult.data.data ?? []
|
||||
const categoryName = resolveLocalized(category.name, lang)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<section className="relative overflow-hidden bg-white">
|
||||
<img
|
||||
src={category.imageUrl || getCategoryImage(categoryName)}
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
alt={categoryName}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-pop-bg/95 via-pop-bg/70 to-white/20" />
|
||||
<div className="relative mx-auto max-w-7xl px-6 py-20">
|
||||
<div className="mb-5 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-gray-500">
|
||||
<Link href="/" className="transition hover:text-pop-pink">Home</Link>
|
||||
<span>/</span>
|
||||
<Link href="/shop" className="transition hover:text-pop-pink">Shop</Link>
|
||||
<span>/</span>
|
||||
<span className="text-pop-black">{categoryName}</span>
|
||||
</div>
|
||||
<h1 className="text-5xl font-semibold text-pop-black md:text-6xl">{categoryName}</h1>
|
||||
{category._count && <p className="mt-3 text-gray-600">{category._count.products} products available</p>}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
href={`/category/${cat.id}`}
|
||||
className={`px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
cat.id === category?.id
|
||||
? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
|
||||
: 'glass hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{typeof cat.name === 'string' ? cat.name : (cat.name as any)?.th || (cat.name as any)?.en || ''}
|
||||
</Link>
|
||||
))}
|
||||
{!categoriesResult.ok && (
|
||||
<span className="rounded-full border border-rose-100 bg-white px-5 py-2 text-xs font-bold uppercase tracking-widest text-rose-500">
|
||||
Categories unavailable
|
||||
</span>
|
||||
)}
|
||||
{categories.map((item) => {
|
||||
const name = resolveLocalized(item.name, lang)
|
||||
const isActive = item.id === category.id
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={`/category/${item.id}`}
|
||||
className={`rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition ${
|
||||
isActive
|
||||
? 'bg-pop-black text-white'
|
||||
: 'border border-gray-200 bg-white text-gray-600 hover:border-pop-pink hover:text-pop-pink'
|
||||
}`}
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="text-center py-24 space-y-3">
|
||||
<p className="text-4xl">⚠️</p>
|
||||
<p className="text-slate-400">{error}</p>
|
||||
<Link href="/shop" className="text-cyan-glow text-sm hover:underline">Back to Shop</Link>
|
||||
</div>
|
||||
) : loading ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
|
||||
))}
|
||||
</div>
|
||||
) : products.length === 0 ? (
|
||||
<div className="text-center py-24 text-slate-500 space-y-3">
|
||||
<p className="text-4xl">🌿</p>
|
||||
<p>No products in this category yet.</p>
|
||||
{products.length === 0 ? (
|
||||
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<p className="text-lg font-semibold text-pop-black">No products in this category yet.</p>
|
||||
<Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">Back to Shop</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{products.slice(0, displayCount).map((p) => (
|
||||
<ProductCard key={p.id} product={p} />
|
||||
))}
|
||||
</div>
|
||||
{displayCount < products.length && (
|
||||
<div ref={loaderRef} className="py-12 flex justify-center">
|
||||
<div className="w-8 h-8 rounded-full border-2 border-cyan-glow border-t-transparent animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{products.map((product) => <ProductCard key={product.id} product={product} />)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { CreditCard } from 'lucide-react'
|
||||
|
||||
import CheckoutClient from '../../components/CheckoutClient'
|
||||
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
|
||||
import { getCategoriesResult, getCmsPageResult } from '../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../lib/cms-sections'
|
||||
|
||||
const lang = 'th'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Checkout | HomAroma',
|
||||
description: 'ตรวจสอบรายการสินค้า กรอกข้อมูลจัดส่ง และสร้างคำสั่งซื้อ HomAroma',
|
||||
}
|
||||
|
||||
export default async function CheckoutPage() {
|
||||
const [categoriesResult, cmsLayoutResult] = await Promise.all([
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('checkout-layout', lang),
|
||||
])
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] checkout-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-[70vh] bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
|
||||
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
|
||||
<CreditCard className="h-8 w-8" />
|
||||
</div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Secure Checkout</p>
|
||||
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">ยืนยันคำสั่งซื้อ</h1>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
|
||||
ตรวจสอบรายการสินค้า ใช้คูปองหรือคะแนนสะสม และสร้างคำสั่งซื้อเพื่อไปยังหน้ารายละเอียดออเดอร์
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mx-auto max-w-7xl px-6 py-14 md:py-20">
|
||||
<CheckoutClient />
|
||||
</section>
|
||||
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -5,8 +5,6 @@ type FormState = { name: string; email: string; subject: string; message: string
|
||||
type Status = 'idle' | 'sending' | 'sent' | 'error'
|
||||
const SUBJECTS = ['Product Inquiry', 'Order Support', 'Custom Blending', 'Wholesale', 'Partnership', 'Other']
|
||||
|
||||
|
||||
|
||||
export default function ContactPage() {
|
||||
const [form, setForm] = useState<FormState>({ name: '', email: '', subject: '', message: '' })
|
||||
const [status, setStatus] = useState<Status>('idle')
|
||||
@@ -24,19 +22,17 @@ export default function ContactPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Header */}
|
||||
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Get in Touch</p>
|
||||
<h1 className="text-5xl font-bold">Contact Us</h1>
|
||||
<p className="text-slate-400 max-w-lg mx-auto">Have a question, custom request, or partnership idea? We'd love to hear from you.</p>
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
<div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Get in Touch</p>
|
||||
<h1 className="text-5xl font-bold text-pop-black">Contact Us</h1>
|
||||
<p className="mx-auto max-w-lg text-gray-600">Have a question, custom request, or partnership idea? We'd love to hear from you.</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-6xl mx-auto px-6 py-16 grid md:grid-cols-5 gap-16">
|
||||
{/* Contact Info */}
|
||||
<div className="md:col-span-2 space-y-8">
|
||||
<div className="mx-auto grid max-w-6xl gap-16 px-6 py-16 md:grid-cols-5">
|
||||
<div className="space-y-8 md:col-span-2">
|
||||
<div>
|
||||
<h2 className="font-bold text-xl mb-6">Reach Us Directly</h2>
|
||||
<h2 className="mb-6 text-xl font-bold text-pop-black">Reach Us Directly</h2>
|
||||
<div className="space-y-5">
|
||||
{[
|
||||
{ icon: '📧', label: 'Email', value: 'hello@homaroma.shop', href: 'mailto:hello@homaroma.shop' },
|
||||
@@ -44,75 +40,75 @@ export default function ContactPage() {
|
||||
{ icon: '📸', label: 'Instagram', value: '@homaroma', href: '#' },
|
||||
{ icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' },
|
||||
].map(item => (
|
||||
<a key={item.label} href={item.href} className="flex items-start gap-4 group">
|
||||
<div className="glass w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0 group-hover:bg-cyan-glow/10 transition-colors">{item.icon}</div>
|
||||
<a key={item.label} href={item.href} className="group flex items-start gap-4">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-gray-100 bg-white text-lg shadow-sm transition-colors group-hover:border-pop-pink/30 group-hover:bg-pop-bg">{item.icon}</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500 uppercase tracking-widest">{item.label}</p>
|
||||
<p className="text-white text-sm font-medium group-hover:text-cyan-glow transition-colors">{item.value}</p>
|
||||
<p className="text-xs uppercase tracking-widest text-gray-500">{item.label}</p>
|
||||
<p className="text-sm font-medium text-pop-black transition-colors group-hover:text-pop-pink">{item.value}</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="glass rounded-2xl p-6 border border-white/5 space-y-3">
|
||||
<h3 className="font-bold text-sm uppercase tracking-widest">Response Time</h3>
|
||||
|
||||
<div className="space-y-3 rounded-3xl border border-gray-100 bg-white p-6 shadow-brutal">
|
||||
<h3 className="text-sm font-bold uppercase tracking-widest text-pop-black">Response Time</h3>
|
||||
<div className="space-y-2 text-sm">
|
||||
{[['Email', '~2 hours'], ['LINE', '~30 minutes'], ['Instagram DM', '~4 hours']].map(([k, v]) => (
|
||||
<div key={k} className="flex justify-between">
|
||||
<span className="text-slate-400">{k}</span>
|
||||
<span className="text-cyan-glow font-medium">{v}</span>
|
||||
<span className="text-gray-600">{k}</span>
|
||||
<span className="font-medium text-pop-pink">{v}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-600 pt-2 uppercase tracking-wider">Mon–Sat, 9:00–18:00 (ICT)</p>
|
||||
<p className="pt-2 text-[10px] uppercase tracking-wider text-gray-500">Mon-Sat, 9:00-18:00 (ICT)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div className="md:col-span-3">
|
||||
{status === 'sent' ? (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center space-y-5 py-16">
|
||||
<div className="text-6xl animate-bounce">✉️</div>
|
||||
<h2 className="text-2xl font-bold">Message Sent!</h2>
|
||||
<p className="text-slate-400">Thank you for reaching out. We'll get back to you within 2 hours.</p>
|
||||
<button onClick={() => setStatus('idle')} className="mt-4 px-8 py-3 glass border border-white/10 hover:border-cyan-glow/30 font-bold uppercase tracking-widest text-xs transition-all rounded-lg">
|
||||
<div className="flex h-full items-center justify-center rounded-3xl bg-white shadow-brutal">
|
||||
<div className="space-y-5 py-16 text-center">
|
||||
<div className="text-6xl">✉️</div>
|
||||
<h2 className="text-2xl font-bold text-pop-black">Message Sent!</h2>
|
||||
<p className="text-gray-600">Thank you for reaching out. We'll get back to you within 2 hours.</p>
|
||||
<button onClick={() => setStatus('idle')} className="mt-4 rounded-full border border-pop-pink bg-white px-8 py-3 text-xs font-bold uppercase tracking-widest text-pop-pink transition-all hover:bg-pop-bg">
|
||||
Send Another
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="grid md:grid-cols-2 gap-5">
|
||||
<form onSubmit={handleSubmit} className="space-y-5 rounded-3xl border border-gray-100 bg-white p-6 shadow-brutal md:p-8">
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Full Name *</label>
|
||||
<label className="text-xs uppercase tracking-widest text-gray-600">Full Name *</label>
|
||||
<input required type="text" name="name" value={form.name} onChange={handleChange} placeholder="Your name"
|
||||
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors" />
|
||||
className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors placeholder:text-gray-400 focus:border-pop-pink" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Email *</label>
|
||||
<label className="text-xs uppercase tracking-widest text-gray-600">Email *</label>
|
||||
<input required type="email" name="email" value={form.email} onChange={handleChange} placeholder="your@email.com"
|
||||
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors" />
|
||||
className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors placeholder:text-gray-400 focus:border-pop-pink" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Subject *</label>
|
||||
<label className="text-xs uppercase tracking-widest text-gray-600">Subject *</label>
|
||||
<select required name="subject" value={form.subject} onChange={handleChange}
|
||||
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-night-900 outline-none text-sm text-white transition-colors">
|
||||
className="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors focus:border-pop-pink">
|
||||
<option value="" disabled>Select a subject</option>
|
||||
{SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs uppercase tracking-widest text-slate-400">Message *</label>
|
||||
<label className="text-xs uppercase tracking-widest text-gray-600">Message *</label>
|
||||
<textarea required name="message" value={form.message} onChange={handleChange} rows={6} placeholder="Tell us about your inquiry..."
|
||||
className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 resize-none transition-colors" />
|
||||
className="w-full resize-none rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-pop-black outline-none transition-colors placeholder:text-gray-400 focus:border-pop-pink" />
|
||||
</div>
|
||||
<button type="submit" disabled={status === 'sending'}
|
||||
className="w-full py-4 bg-white text-night-900 font-bold uppercase tracking-widest text-sm rounded-xl hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3">
|
||||
className="flex w-full items-center justify-center gap-3 rounded-full bg-pop-black py-4 text-sm font-bold uppercase tracking-widest text-white transition-all duration-300 hover:bg-pop-pink disabled:cursor-not-allowed disabled:opacity-50">
|
||||
{status === 'sending' ? (
|
||||
<><svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /></svg>Sending...</>
|
||||
) : 'Send Message →'}
|
||||
<><svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /></svg>Sending...</>
|
||||
) : 'Send Message ->'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
@@ -1,25 +1,15 @@
|
||||
import { API_BASE } from '@/lib/api'
|
||||
import Link from 'next/link'
|
||||
import { Ticket, ArrowRight } from 'lucide-react'
|
||||
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
|
||||
import { getActiveCouponsResult, getCategoriesResult, getCmsPageResult } from '../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../lib/cms-sections'
|
||||
|
||||
// Fetch active coupons with ISR (revalidate every 60s)
|
||||
async function getActiveCoupons() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/coupons/active`, { next: { revalidate: 60 } })
|
||||
if (!res.ok) return []
|
||||
const data = await res.json()
|
||||
// Filter out ones that hit usageLimit
|
||||
return data.filter((c: any) => c.usageLimit === null || c.usedCount < c.usageLimit)
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch coupons:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
const lang = 'th'
|
||||
|
||||
function formatDiscount(type: string, value: number) {
|
||||
if (type === 'PERCENTAGE') return `${value}% OFF`
|
||||
if (type === 'FIXED_AMOUNT') return `ลด ${value} ฿`
|
||||
if (type === 'FREE_SHIPPING') return `ส่งฟรี`
|
||||
if (type === 'FREE_SHIPPING') return 'ส่งฟรี'
|
||||
return `${value}`
|
||||
}
|
||||
|
||||
@@ -29,84 +19,110 @@ export const metadata = {
|
||||
}
|
||||
|
||||
export default async function CouponsPage() {
|
||||
const coupons = await getActiveCoupons()
|
||||
const [couponsResult, categoriesResult, cmsLayoutResult] = await Promise.all([
|
||||
getActiveCouponsResult(),
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('coupons-layout', lang),
|
||||
])
|
||||
const coupons = couponsResult.ok ? couponsResult.data : []
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] coupons-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="max-w-6xl mx-auto px-6 pt-32 pb-24 min-h-[70vh]">
|
||||
<div className="text-center space-y-4 mb-16">
|
||||
<h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-white via-cyan-glow to-blue-500 bg-clip-text text-transparent">
|
||||
Exclusive Offers
|
||||
</h1>
|
||||
<p className="text-slate-400 max-w-2xl mx-auto">
|
||||
คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{coupons.length === 0 ? (
|
||||
<div className="text-center py-20 bg-night-900/50 rounded-3xl border border-white/5">
|
||||
<Ticket className="w-16 h-16 text-slate-600 mx-auto mb-4" />
|
||||
<h2 className="text-xl font-bold text-white mb-2">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
|
||||
<p className="text-slate-400 mb-6">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
|
||||
<a
|
||||
href="https://homaroma.shop/shop"
|
||||
className="inline-flex px-8 py-3 bg-cyan-glow/10 text-cyan-glow hover:bg-cyan-glow hover:text-night-900 font-bold rounded-xl transition-all"
|
||||
>
|
||||
ไปช้อปปิ้งกันก่อน
|
||||
</a>
|
||||
</div>
|
||||
<main className="min-h-[70vh] bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{coupons.map((coupon: any) => (
|
||||
<div
|
||||
key={coupon.id}
|
||||
className="group relative bg-night-900 border border-white/10 rounded-3xl overflow-hidden hover:border-cyan-glow/50 transition-all duration-500"
|
||||
>
|
||||
{/* Decoration */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-cyan-glow/10 blur-3xl rounded-full -translate-y-1/2 translate-x-1/2" />
|
||||
|
||||
<div className="p-8 space-y-6 relative z-10">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="w-12 h-12 rounded-xl bg-cyan-glow/10 text-cyan-glow flex items-center justify-center border border-cyan-glow/20">
|
||||
<Ticket className="w-6 h-6" />
|
||||
</div>
|
||||
{coupon.expiresAt && (
|
||||
<span className="text-[10px] font-bold text-amber-400 bg-amber-500/10 px-2 py-1 rounded-md uppercase tracking-wider">
|
||||
หมดเขต {new Date(coupon.expiresAt).toLocaleDateString('th-TH')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-3xl font-black text-white mb-1">
|
||||
{formatDiscount(coupon.type, coupon.value)}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-400">
|
||||
เมื่อซื้อครบ {coupon.minPurchase} บาท
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 bg-night-950 p-3 rounded-xl border border-white/5 justify-center">
|
||||
<span className="font-mono text-cyan-glow font-bold tracking-widest uppercase">
|
||||
{coupon.code}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={`https://homaroma.shop/shop?coupon=${coupon.code}`}
|
||||
className="w-full py-4 bg-white/5 hover:bg-cyan-glow text-white hover:text-night-900 font-bold rounded-xl flex items-center justify-center gap-2 transition-all duration-300"
|
||||
>
|
||||
ช้อปพร้อมใช้คูปองเลย
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Scalloped edge effect */}
|
||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 w-6 h-6 bg-[#0a0a0a] rounded-full border-r border-white/10" />
|
||||
<div className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 w-6 h-6 bg-[#0a0a0a] rounded-full border-l border-white/10" />
|
||||
</div>
|
||||
))}
|
||||
<div className="mx-auto max-w-6xl px-6 py-16">
|
||||
<div className="space-y-4 text-center">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Offers</p>
|
||||
<h1 className="text-4xl font-semibold text-pop-black md:text-5xl">
|
||||
Exclusive Offers
|
||||
</h1>
|
||||
<p className="mx-auto max-w-2xl text-gray-600">
|
||||
คูปองส่วนลดพิเศษสำหรับคุณ เลือกใช้คูปองที่คุณต้องการแล้วไปช้อปกันเลย!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mx-auto max-w-6xl px-6 pb-24">
|
||||
{!couponsResult.ok ? (
|
||||
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<Ticket className="mx-auto mb-4 h-16 w-16 text-rose-200" />
|
||||
<h2 className="mb-2 text-xl font-semibold text-pop-black">ไม่สามารถโหลดคูปองได้</h2>
|
||||
<p className="text-sm text-rose-500">{couponsResult.error}</p>
|
||||
</div>
|
||||
) : coupons.length === 0 ? (
|
||||
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<Ticket className="mx-auto mb-4 h-16 w-16 text-gray-300" />
|
||||
<h2 className="mb-2 text-xl font-semibold text-pop-black">ยังไม่มีคูปองส่วนลดในขณะนี้</h2>
|
||||
<p className="mb-6 text-gray-500">กรุณากลับมาตรวจสอบโปรโมชั่นใหม่ในภายหลัง</p>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="inline-flex rounded-full bg-pop-pink px-8 py-3 font-bold text-white transition hover:bg-pop-red"
|
||||
>
|
||||
ไปช้อปปิ้งกันก่อน
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{coupons.map((coupon) => (
|
||||
<article
|
||||
key={coupon.id}
|
||||
className="relative overflow-hidden rounded-3xl bg-white p-8 shadow-brutal transition hover:-translate-y-1 hover:shadow-brutal-hover"
|
||||
>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-pop-bg text-pop-pink">
|
||||
<Ticket className="h-6 w-6" />
|
||||
</div>
|
||||
{coupon.expiresAt && (
|
||||
<span className="rounded-md bg-amber-50 px-2 py-1 text-[10px] font-bold uppercase tracking-wider text-amber-600">
|
||||
หมดเขต {new Date(coupon.expiresAt).toLocaleDateString('th-TH')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-1 text-3xl font-black text-pop-black">
|
||||
{formatDiscount(coupon.type, coupon.value)}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
เมื่อซื้อครบ {coupon.minPurchase} บาท
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-dashed border-pop-pink/40 bg-pop-bg p-3 text-center">
|
||||
<span className="font-mono font-bold uppercase tracking-widest text-pop-pink">
|
||||
{coupon.code}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href={`/shop?coupon=${encodeURIComponent(coupon.code)}`}
|
||||
className="flex w-full items-center justify-center gap-2 rounded-full bg-pop-black py-4 font-bold text-white transition hover:bg-pop-pink"
|
||||
>
|
||||
ช้อปพร้อมใช้คูปองเลย
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
import { useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
const FAQS = [
|
||||
{
|
||||
@@ -43,22 +44,23 @@ export default function FaqPage() {
|
||||
const activeFaqs = FAQS.find(f => f.category === activeCategory)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Header */}
|
||||
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p>
|
||||
<h1 className="text-5xl font-bold">Frequently Asked Questions</h1>
|
||||
<p className="text-slate-400 max-w-lg mx-auto">Everything you need to know about HomAroma products, shipping, and care.</p>
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
<div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Support</p>
|
||||
<h1 className="text-5xl font-bold text-pop-black">Frequently Asked Questions</h1>
|
||||
<p className="mx-auto max-w-lg text-gray-600">Everything you need to know about HomAroma products, shipping, and care.</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto px-6 py-16 space-y-10">
|
||||
<div className="mx-auto max-w-4xl space-y-10 px-6 py-16">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{FAQS.map(({ category, icon }) => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setActiveCategory(category)}
|
||||
className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 ${
|
||||
activeCategory === category ? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]' : 'glass hover:bg-white/10'
|
||||
className={`flex items-center gap-2 rounded-full px-5 py-2 text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
activeCategory === category
|
||||
? 'bg-pop-black text-white shadow-brutal'
|
||||
: 'border border-gray-200 bg-white text-pop-black hover:border-pop-pink hover:text-pop-pink'
|
||||
}`}
|
||||
>
|
||||
<span>{icon}</span> {category}
|
||||
@@ -71,17 +73,17 @@ export default function FaqPage() {
|
||||
const key = `${activeCategory}-${i}`
|
||||
const isOpen = openItems[key]
|
||||
return (
|
||||
<div key={key} className={`glass rounded-xl overflow-hidden border transition-all duration-300 ${isOpen ? 'border-cyan-glow/20' : 'border-white/5'}`}>
|
||||
<button onClick={() => toggle(key)} className="w-full text-left px-6 py-5 flex justify-between items-start gap-4">
|
||||
<span className="font-semibold text-sm md:text-base leading-snug">{item.q}</span>
|
||||
<svg className={`w-5 h-5 text-cyan-glow shrink-0 transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<div key={key} className={`overflow-hidden rounded-2xl border bg-white shadow-brutal transition-all duration-300 ${isOpen ? 'border-pop-pink/30' : 'border-gray-100'}`}>
|
||||
<button onClick={() => toggle(key)} className="flex w-full items-start justify-between gap-4 px-6 py-5 text-left">
|
||||
<span className="text-sm font-semibold leading-snug text-pop-black md:text-base">{item.q}</span>
|
||||
<svg className={`h-5 w-5 shrink-0 text-pop-pink transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
{isOpen && (
|
||||
<div className="px-6 pb-6">
|
||||
<div className="w-full h-px bg-white/5 mb-4" />
|
||||
<p className="text-slate-300 leading-relaxed text-sm">{item.a}</p>
|
||||
<div className="mb-4 h-px w-full bg-gray-100" />
|
||||
<p className="text-sm leading-relaxed text-gray-600">{item.a}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -89,13 +91,13 @@ export default function FaqPage() {
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="glass rounded-2xl p-8 text-center space-y-4 border border-white/5 mt-12">
|
||||
<div className="mt-12 space-y-4 rounded-3xl border border-gray-100 bg-white p-8 text-center shadow-brutal">
|
||||
<div className="text-3xl">💬</div>
|
||||
<h3 className="font-bold text-xl">Still have questions?</h3>
|
||||
<p className="text-slate-400 text-sm">Our team is here to help — usually responds within 2 hours.</p>
|
||||
<a href="/contact" className="inline-block px-8 py-3 bg-white text-night-900 font-bold rounded-lg uppercase tracking-widest text-xs hover:bg-cyan-glow transition-colors duration-300">
|
||||
<h3 className="text-xl font-bold text-pop-black">Still have questions?</h3>
|
||||
<p className="text-sm text-gray-600">Our team is here to help — usually responds within 2 hours.</p>
|
||||
<Link href="/contact" className="inline-block rounded-full bg-pop-black px-8 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-300 hover:bg-pop-pink">
|
||||
Contact Us
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,8 +30,8 @@ export default async function RootLayout({
|
||||
const categories = await getCategories();
|
||||
|
||||
return (
|
||||
<html lang="en" className="scroll-smooth">
|
||||
<body className="bg-night-900 text-silver-metallic font-sans antialiased min-h-screen">
|
||||
<html lang="th" className="scroll-smooth">
|
||||
<body className="min-h-screen bg-pop-bg text-pop-black font-sans antialiased">
|
||||
<ClientProviders>
|
||||
<Navbar categories={categories} />
|
||||
<main className="pt-[72px]">
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
import Link from 'next/link'
|
||||
import { notFound } from 'next/navigation'
|
||||
import type { Metadata } from 'next'
|
||||
import { CheckCircle2, Clock, PackageCheck, Truck } from 'lucide-react'
|
||||
import { formatPrice } from '@homaroma/types'
|
||||
|
||||
import DynamicPageRenderer from '../../../components/dynamic/DynamicPageRenderer'
|
||||
import { getCategoriesResult, getCmsPageResult, getOrderResult } from '../../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../../lib/cms-sections'
|
||||
|
||||
const lang = 'th'
|
||||
|
||||
function orderLabel(id: number) {
|
||||
return `#${id.toString().padStart(4, '0')}`
|
||||
}
|
||||
|
||||
function statusLabel(status: string) {
|
||||
const labels: Record<string, string> = {
|
||||
PENDING_PAYMENT: 'รอชำระเงิน',
|
||||
PAID: 'ชำระเงินแล้ว',
|
||||
PROCESSING: 'กำลังจัดเตรียมสินค้า',
|
||||
SHIPPED: 'จัดส่งแล้ว',
|
||||
DELIVERED: 'จัดส่งสำเร็จ',
|
||||
CANCELLED: 'ยกเลิกแล้ว',
|
||||
}
|
||||
|
||||
return labels[status] ?? status.replaceAll('_', ' ')
|
||||
}
|
||||
|
||||
function statusTone(status: string) {
|
||||
if (status === 'PENDING_PAYMENT') return 'bg-amber-50 text-amber-700 border-amber-100'
|
||||
if (status === 'PAID' || status === 'PROCESSING') return 'bg-emerald-50 text-emerald-700 border-emerald-100'
|
||||
if (status === 'SHIPPED' || status === 'DELIVERED') return 'bg-sky-50 text-sky-700 border-sky-100'
|
||||
if (status === 'CANCELLED') return 'bg-rose-50 text-rose-700 border-rose-100'
|
||||
return 'bg-gray-50 text-gray-700 border-gray-100'
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||
const { id } = await params
|
||||
const result = await getOrderResult(id)
|
||||
|
||||
if (!result.ok) return { title: 'Order Not Found | HomAroma' }
|
||||
|
||||
return {
|
||||
title: `Order ${orderLabel(result.data.id)} | HomAroma`,
|
||||
description: `ตรวจสอบสถานะคำสั่งซื้อ ${orderLabel(result.data.id)} จาก HomAroma`,
|
||||
}
|
||||
}
|
||||
|
||||
export default async function OrderStatusPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
const [orderResult, categoriesResult, cmsLayoutResult] = await Promise.all([
|
||||
getOrderResult(id),
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('order-success-layout', lang),
|
||||
])
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] order-success-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
if (!orderResult.ok) {
|
||||
if (orderResult.status === 404) notFound()
|
||||
|
||||
return (
|
||||
<main className="min-h-[70vh] bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
<section className="mx-auto max-w-3xl px-6 py-24 text-center">
|
||||
<div className="rounded-3xl border border-rose-100 bg-white p-10 shadow-brutal">
|
||||
<h1 className="text-2xl font-semibold text-pop-black">ไม่สามารถโหลดคำสั่งซื้อนี้ได้</h1>
|
||||
<p className="mt-3 text-sm text-rose-500">{orderResult.error}</p>
|
||||
<Link href="/track" className="mt-6 inline-flex font-semibold text-pop-pink">กลับไปค้นหาคำสั่งซื้อ</Link>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
const order = orderResult.data
|
||||
const subtotal = order.subtotal ?? Math.max(0, order.totalAmount - order.shippingFee)
|
||||
|
||||
return (
|
||||
<main className="min-h-[70vh] bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
|
||||
<section className="mx-auto max-w-4xl space-y-8 px-6 py-16 md:py-20">
|
||||
<div className="text-center">
|
||||
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
|
||||
<CheckCircle2 className="h-10 w-10" />
|
||||
</div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Order Status</p>
|
||||
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">
|
||||
{orderLabel(order.id)}
|
||||
</h1>
|
||||
<p className="mt-3 text-gray-600">คำสั่งซื้อของคุณถูกบันทึกแล้ว สามารถตรวจสอบสถานะล่าสุดได้จากหน้านี้</p>
|
||||
</div>
|
||||
|
||||
<section className="grid gap-5 md:grid-cols-3">
|
||||
<article className="rounded-3xl bg-white p-6 shadow-brutal">
|
||||
<Clock className="mb-4 h-6 w-6 text-pop-pink" />
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Created</p>
|
||||
<p className="mt-2 font-semibold text-pop-black">
|
||||
{new Date(order.createdAt).toLocaleDateString('th-TH')}
|
||||
</p>
|
||||
</article>
|
||||
<article className="rounded-3xl bg-white p-6 shadow-brutal">
|
||||
<PackageCheck className="mb-4 h-6 w-6 text-pop-pink" />
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Status</p>
|
||||
<span className={`mt-3 inline-flex rounded-full border px-3 py-1 text-xs font-bold uppercase tracking-[0.14em] ${statusTone(order.status)}`}>
|
||||
{statusLabel(order.status)}
|
||||
</span>
|
||||
</article>
|
||||
<article className="rounded-3xl bg-white p-6 shadow-brutal">
|
||||
<Truck className="mb-4 h-6 w-6 text-pop-pink" />
|
||||
<p className="text-xs font-bold uppercase tracking-[0.22em] text-gray-400">Tracking No.</p>
|
||||
<p className="mt-2 font-semibold text-pop-black">{order.trackingNo || 'อยู่ระหว่างจัดเตรียมพัสดุ'}</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section className="rounded-3xl bg-white p-8 shadow-brutal">
|
||||
<h2 className="border-b border-gray-100 pb-4 text-sm font-bold uppercase tracking-[0.22em] text-pop-pink">
|
||||
Order Items
|
||||
</h2>
|
||||
<div className="mt-6 space-y-4">
|
||||
{order.items.map((item) => (
|
||||
<div key={item.id} className="flex items-center gap-4 rounded-2xl bg-pop-bg p-4">
|
||||
<div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-white">
|
||||
<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="font-semibold text-pop-black">{item.productName}</p>
|
||||
<p className="text-sm 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-6 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>
|
||||
<div className="flex justify-between text-gray-500">
|
||||
<span>Shipping Fee</span>
|
||||
<span>{formatPrice(order.shippingFee)}</span>
|
||||
</div>
|
||||
{(order.discountAmount ?? 0) > 0 && (
|
||||
<div className="flex justify-between text-emerald-600">
|
||||
<span>Discount{order.couponCode ? ` (${order.couponCode})` : ''}</span>
|
||||
<span>-{formatPrice(order.discountAmount)}</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(order.totalAmount)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{order.status === 'PENDING_PAYMENT' && (
|
||||
<section className="rounded-3xl border border-amber-100 bg-amber-50 p-6 text-amber-800">
|
||||
<h2 className="font-semibold">คำสั่งซื้อนี้ยังรอการชำระเงิน</h2>
|
||||
<p className="mt-2 text-sm leading-relaxed">
|
||||
หน้านี้รองรับการตรวจสอบสถานะคำสั่งซื้อแล้ว ส่วนการชำระเงินและอัปโหลดสลิปบน website จะย้ายมาในรอบถัดไป เพื่อไม่ทำ workaround ที่เสี่ยงกับ payment flow
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
<Link href="/track" className="rounded-full bg-white px-6 py-3 font-semibold text-pop-black shadow-brutal transition hover:text-pop-pink">
|
||||
ค้นหาออเดอร์อื่น
|
||||
</Link>
|
||||
<Link href="/shop" className="rounded-full bg-pop-pink px-6 py-3 font-semibold text-white transition hover:bg-pop-red">
|
||||
กลับไปช้อปต่อ
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
+27
-154
@@ -1,170 +1,43 @@
|
||||
import Link from 'next/link'
|
||||
import ProductCard from '../components/ProductCard'
|
||||
import { getCategoryImage, type Category, type Product, type Hero } from '@homaroma/types'
|
||||
import { API_BASE } from '../lib/api'
|
||||
import type { Metadata } from 'next'
|
||||
import DynamicPageRenderer from '../components/dynamic/DynamicPageRenderer'
|
||||
import { getCategories, getCmsPage } from '../lib/cms'
|
||||
|
||||
// Cache settings for Next.js fetch
|
||||
const revalidate = 60; // Revalidate cache every 60 seconds
|
||||
const lang = 'th'
|
||||
|
||||
async function getCategories(): Promise<Category[]> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/categories`, { next: { revalidate } })
|
||||
if (!res.ok) return []
|
||||
const text = await res.text()
|
||||
return text ? JSON.parse(text) : []
|
||||
} catch (e) { return [] }
|
||||
}
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const page = await getCmsPage('home', lang)
|
||||
|
||||
async function getFeaturedProducts(): Promise<Product[]> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/products?categoryId=1`, { next: { revalidate } })
|
||||
if (!res.ok) return []
|
||||
const text = await res.text()
|
||||
const json = text ? JSON.parse(text) : { data: [] }
|
||||
return json?.data?.slice(0, 3) || []
|
||||
} catch (e) { return [] }
|
||||
}
|
||||
|
||||
async function getHero(): Promise<Hero | null> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/hero`, { next: { revalidate } })
|
||||
if (!res.ok) return null
|
||||
const text = await res.text()
|
||||
return text ? JSON.parse(text) : null
|
||||
} catch (e) { return null }
|
||||
return {
|
||||
title: page?.title ? `${page.title} | HomAroma` : 'HomAroma',
|
||||
description: 'Premium aromatherapy, home fragrance, and botanical scent products from HomAroma.',
|
||||
}
|
||||
}
|
||||
|
||||
export default async function HomePage() {
|
||||
const [categories, featuredProducts, hero] = await Promise.all([
|
||||
getCategories(),
|
||||
getFeaturedProducts(),
|
||||
getHero(),
|
||||
const [categories, page] = await Promise.all([
|
||||
getCategories(lang),
|
||||
getCmsPage('home', lang),
|
||||
])
|
||||
|
||||
const sections = page?.sections ?? []
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
{/* Hero Section */}
|
||||
<section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-[21/9] flex items-center justify-center overflow-hidden bg-white">
|
||||
<div className="absolute inset-0 z-0 opacity-40">
|
||||
<img
|
||||
src={hero?.imageUrl || "/images/hero.png"}
|
||||
className="w-full h-full object-cover scale-[1.02] filter contrast-125 saturate-150"
|
||||
alt="Hero Background"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-pop-bg/80 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-center md:text-left space-y-6 px-8 animate-pop-in max-w-6xl w-full mx-auto">
|
||||
<p className="text-pop-pink font-semibold tracking-[0.2em] text-sm uppercase">
|
||||
{hero?.tagline || "Vibrant Elegance Collection"}
|
||||
{sections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={sections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<section className="mx-auto flex min-h-[70vh] max-w-5xl flex-col items-center justify-center px-6 text-center">
|
||||
<p className="mb-4 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
|
||||
HomAroma
|
||||
</p>
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-pop-black leading-[1.1] tracking-tight max-w-3xl">
|
||||
{hero ? (
|
||||
hero.title.split('[').map((part, i) => {
|
||||
if (part.includes(']')) {
|
||||
const [accent, rest] = part.split(']')
|
||||
return (
|
||||
<span key={i}>
|
||||
<span className="text-pop-pink font-semibold">
|
||||
{accent}
|
||||
</span>
|
||||
{rest}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return <span key={i}>{part}</span>
|
||||
})
|
||||
) : (
|
||||
<>
|
||||
Inhale <span className="text-pop-pink">Serenity</span>
|
||||
</>
|
||||
)}
|
||||
<h1 className="text-5xl font-semibold text-pop-black md:text-7xl">
|
||||
Premium scents for calmer spaces
|
||||
</h1>
|
||||
<p className="text-gray-600 max-w-xl text-lg md:text-xl font-normal pt-4 pb-6">
|
||||
{hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."}
|
||||
<p className="mt-6 max-w-2xl text-lg leading-relaxed text-gray-600">
|
||||
The home CMS layout is unavailable right now, so this SEO-safe fallback keeps the page meaningful while the API is checked.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 items-center md:justify-start justify-center">
|
||||
<Link
|
||||
href={hero?.buttonLink || "/shop"}
|
||||
className="brutal-button shadow-lg shadow-pop-pink/30"
|
||||
>
|
||||
{hero?.buttonText || "Explore Collection"}
|
||||
</Link>
|
||||
<Link
|
||||
href="#categories"
|
||||
className="px-8 py-4 text-pop-black font-medium hover:text-pop-pink transition-colors"
|
||||
>
|
||||
Learn More
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Categories Showcase */}
|
||||
<section id="categories" className="py-24 px-6 relative overflow-hidden bg-white">
|
||||
<div className="max-w-7xl mx-auto space-y-16 relative z-10">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="text-4xl md:text-5xl font-bold tracking-tight text-pop-black">
|
||||
Our Collections
|
||||
</h2>
|
||||
<p className="text-gray-500 max-w-2xl mx-auto">Discover the perfect scent for every moment</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-6">
|
||||
{categories.map((cat) => (
|
||||
<Link
|
||||
key={cat.id}
|
||||
href={`/category/${cat.id}`}
|
||||
className="relative h-80 rounded-2xl group overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10 opacity-80 group-hover:opacity-100 transition-opacity" />
|
||||
<img
|
||||
src={cat.imageUrl || getCategoryImage(typeof cat.name === 'string' ? cat.name : (cat.name as any)?.th || (cat.name as any)?.en || '')}
|
||||
className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||||
alt={typeof cat.name === 'string' ? cat.name : (cat.name as any)?.th || (cat.name as any)?.en || ''}
|
||||
/>
|
||||
<div className="absolute bottom-6 left-6 right-6 z-20 text-white">
|
||||
<span className="font-semibold text-xl block mb-1">
|
||||
{typeof cat.name === 'string' ? cat.name : (cat.name as any)?.th || (cat.name as any)?.en || ''}
|
||||
</span>
|
||||
{cat._count && (
|
||||
<span className="text-sm font-medium text-white/80">
|
||||
{cat._count.products} Products
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Products */}
|
||||
<section className="bg-pop-bg py-24 px-6 relative">
|
||||
<div className="max-w-7xl mx-auto space-y-12 relative z-10">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end gap-6 border-b border-gray-200 pb-6">
|
||||
<div>
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-pop-black">
|
||||
Featured Picks
|
||||
</h2>
|
||||
</div>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="text-pop-pink font-medium hover:text-pop-red transition-colors flex items-center gap-2"
|
||||
>
|
||||
View All Collection →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{featuredProducts.map((p) => (
|
||||
<div key={p.id}>
|
||||
<ProductCard product={p} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,46 +1,38 @@
|
||||
import Link from 'next/link'
|
||||
import { notFound } from 'next/navigation'
|
||||
import type { Metadata } from 'next'
|
||||
import { getCategoryImage, formatPrice, type Product } from '@homaroma/types'
|
||||
import { getCategoryImage, type Product } from '@homaroma/types'
|
||||
import AddToCartSection from '../../../components/AddToCartSection'
|
||||
import DynamicPageRenderer from '../../../components/dynamic/DynamicPageRenderer'
|
||||
import ProductCard from '../../../components/ProductCard'
|
||||
import { getCategoriesResult, getCmsPageResult, getProduct, getProductResult, getProductsResult } from '../../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../../lib/cms-sections'
|
||||
import { resolveLocalized } from '../../../lib/localization'
|
||||
|
||||
import { API_BASE } from '../../../lib/api'
|
||||
import type { TranslatableString } from '@homaroma/types'
|
||||
|
||||
/** Resolve TranslatableString → plain string (SSR: always defaults to 'th') */
|
||||
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] ?? ''
|
||||
}
|
||||
|
||||
async function getProduct(id: string): Promise<Product | null> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/products/${id}?lang=th`, { next: { revalidate: 60 } })
|
||||
return res.ok ? res.json() : null
|
||||
} catch { return null }
|
||||
}
|
||||
const lang = 'th'
|
||||
|
||||
async function getRelated(categoryId: number, excludeId: number): Promise<Product[]> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/products?categoryId=${categoryId}`, { next: { revalidate: 60 } })
|
||||
const json = res.ok ? await res.json() : { data: [] }
|
||||
return (json.data || []).filter((p: Product) => p.id !== excludeId).slice(0, 6)
|
||||
} catch { return [] }
|
||||
const result = await getProductsResult(`categoryId=${categoryId}`, lang)
|
||||
if (!result.ok) return []
|
||||
return result.data.filter((product) => product.id !== excludeId).slice(0, 6)
|
||||
}
|
||||
|
||||
// Generate dynamic SEO metadata per product
|
||||
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
|
||||
const { id } = await params
|
||||
const product = await getProduct(id)
|
||||
const product = await getProduct(id, lang)
|
||||
|
||||
if (!product) return { title: 'Product Not Found | HomAroma' }
|
||||
|
||||
const productName = resolveLocalized(product.name, lang) || product.scent.name
|
||||
const categoryName = resolveLocalized(product.category.name, lang)
|
||||
const description = resolveLocalized(product.description, lang)
|
||||
|
||||
return {
|
||||
title: `${product.scent.name} ${typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''} | HomAroma`,
|
||||
description: resolveStr(product.description) ?? `Premium ${typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''} — ${product.scent.name}. Shop HomAroma for high-quality botanical scents.`,
|
||||
title: `${productName} ${categoryName ? `| ${categoryName}` : ''} | HomAroma`,
|
||||
description: description || `Premium ${categoryName} from HomAroma.`,
|
||||
openGraph: {
|
||||
title: product.scent.name,
|
||||
description: resolveStr(product.description) ?? '',
|
||||
title: productName,
|
||||
description,
|
||||
images: product.images?.[0]?.url ? [product.images[0].url] : [],
|
||||
},
|
||||
}
|
||||
@@ -48,86 +40,112 @@ export async function generateMetadata({ params }: { params: Promise<{ id: strin
|
||||
|
||||
export default async function ProductDetailPage({ params }: { params: Promise<{ id: string }> }) {
|
||||
const { id } = await params
|
||||
const [product, related] = await Promise.all([
|
||||
getProduct(id),
|
||||
getProduct(id).then(p => p ? getRelated(p.category.id, p.id) : []),
|
||||
const [productResult, categoriesResult, cmsLayoutResult] = await Promise.all([
|
||||
getProductResult(id, lang),
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('product-detail-layout', lang),
|
||||
])
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
|
||||
if (!product) notFound()
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] product-detail-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
const firstVariant = product.variants[0]
|
||||
if (!productResult.ok) {
|
||||
if (productResult.status === 404) notFound()
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
<div className="px-6 py-20">
|
||||
<div className="mx-auto max-w-3xl rounded-3xl border border-rose-100 bg-white p-10 text-center shadow-brutal">
|
||||
<p className="text-lg font-semibold text-pop-black">Unable to load this product</p>
|
||||
<p className="mt-2 text-sm text-rose-500">{productResult.error}</p>
|
||||
<Link href="/shop" className="mt-6 inline-flex font-semibold text-pop-pink">Back to Shop</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const product = productResult.data
|
||||
const related = await getRelated(product.category.id, product.id)
|
||||
const productName = resolveLocalized(product.name, lang) || product.scent.name
|
||||
const categoryName = resolveLocalized(product.category.name, lang)
|
||||
const details = resolveLocalized(product.details, lang)
|
||||
const imageUrl = product.images?.[0]?.url || product.category.imageUrl || getCategoryImage(categoryName)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-24 md:pb-0">
|
||||
<div className="max-w-7xl mx-auto px-6 pt-32 pb-24 space-y-24">
|
||||
{/* Breadcrumb */}
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400 uppercase tracking-widest">
|
||||
<Link href="/" className="hover:text-white transition-colors">Home</Link>
|
||||
<div className="min-h-screen bg-pop-bg pb-24 md:pb-0">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
<div className="mx-auto max-w-7xl space-y-16 px-6 py-14 md:py-20">
|
||||
<nav className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-widest text-gray-400">
|
||||
<Link href="/" className="transition hover:text-pop-pink">Home</Link>
|
||||
<span>/</span>
|
||||
<Link href="/shop" className="hover:text-white transition-colors">Shop</Link>
|
||||
<Link href="/shop" className="transition hover:text-pop-pink">Shop</Link>
|
||||
<span>/</span>
|
||||
<Link href={`/category/${product.category.id}`} className="hover:text-white transition-colors">
|
||||
{typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''}
|
||||
<Link href={`/category/${product.category.id}`} className="transition hover:text-pop-pink">
|
||||
{categoryName}
|
||||
</Link>
|
||||
<span>/</span>
|
||||
<span className="text-cyan-glow">{product.scent.name}</span>
|
||||
</div>
|
||||
<span className="text-pop-black">{productName}</span>
|
||||
</nav>
|
||||
|
||||
{/* Product Detail */}
|
||||
<div className="grid md:grid-cols-2 gap-16 items-center">
|
||||
{/* Image */}
|
||||
<div className="relative rounded-2xl overflow-hidden h-[480px] group">
|
||||
<section className="grid gap-10 md:grid-cols-2 md:gap-16">
|
||||
<div className="relative overflow-hidden rounded-3xl bg-white shadow-brutal">
|
||||
<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}
|
||||
src={imageUrl}
|
||||
className="aspect-square h-full w-full object-cover"
|
||||
alt={productName}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-night-900/50 to-transparent" />
|
||||
<div className="absolute top-6 left-6 glass px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest text-cyan-glow border border-cyan-glow/20">
|
||||
{typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''}
|
||||
</div>
|
||||
{categoryName && (
|
||||
<div className="absolute left-5 top-5 rounded-full bg-white/90 px-4 py-2 text-xs font-bold uppercase tracking-widest text-pop-black shadow-sm">
|
||||
{categoryName}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info — Interactive (Add to Cart, Variant select) must be Client */}
|
||||
<AddToCartSection product={product} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Full Details Section */}
|
||||
{resolveStr(product.details) && (
|
||||
<div className="pt-16 border-t border-white/10 space-y-6">
|
||||
<h2 className="text-3xl font-bold">Product Details</h2>
|
||||
<div
|
||||
className="text-slate-300 leading-relaxed prose prose-invert max-w-none"
|
||||
dangerouslySetInnerHTML={{ __html: resolveStr(product.details) }}
|
||||
{details && (
|
||||
<section className="rounded-3xl bg-white p-8 shadow-brutal md:p-12">
|
||||
<h2 className="mb-6 text-3xl font-semibold text-pop-black">Product Details</h2>
|
||||
<div
|
||||
className="product-editorial leading-relaxed text-gray-600"
|
||||
dangerouslySetInnerHTML={{ __html: details }}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Related Products */}
|
||||
{related.length > 0 && (
|
||||
<div className="space-y-8 border-t border-white/5 pt-16">
|
||||
<div className="flex justify-between items-end">
|
||||
<section className="space-y-8">
|
||||
<div className="flex flex-col gap-4 border-b border-gray-200 pb-6 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70 mb-2">
|
||||
More {typeof product.category.name === 'string' ? product.category.name : (product.category.name as any)?.th || (product.category.name as any)?.en || ''}
|
||||
<p className="mb-2 text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
|
||||
More {categoryName}
|
||||
</p>
|
||||
<h2 className="text-3xl font-bold">Related Products</h2>
|
||||
<h2 className="text-3xl font-semibold text-pop-black">Related Products</h2>
|
||||
</div>
|
||||
<Link
|
||||
href={`/category/${product.category.id}`}
|
||||
className="text-cyan-glow text-sm font-bold uppercase tracking-widest hover:underline"
|
||||
>
|
||||
View All →
|
||||
<Link href={`/category/${product.category.id}`} className="font-semibold text-pop-pink transition hover:text-pop-red">
|
||||
View All →
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{related.map((p) => (
|
||||
<ProductCard key={p.id} product={p} />
|
||||
))}
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{related.map((item) => <ProductCard key={item.id} product={item} />)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { User } from 'lucide-react'
|
||||
|
||||
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
|
||||
import ProfileClient from '../../components/ProfileClient'
|
||||
import { getCategoriesResult, getCmsPageResult } from '../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../lib/cms-sections'
|
||||
|
||||
const lang = 'th'
|
||||
|
||||
export const metadata = {
|
||||
title: 'โปรไฟล์สมาชิก | HomAroma',
|
||||
description: 'จัดการโปรไฟล์สมาชิก HomAroma ประวัติคำสั่งซื้อ คะแนนสะสม และสมุดที่อยู่จัดส่ง',
|
||||
}
|
||||
|
||||
export default async function ProfilePage() {
|
||||
const [categoriesResult, cmsLayoutResult] = await Promise.all([
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('profile-layout', lang),
|
||||
])
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] profile-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-[70vh] bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
|
||||
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
|
||||
<User className="h-8 w-8" />
|
||||
</div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Member Profile</p>
|
||||
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">โปรไฟล์ของฉัน</h1>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
|
||||
ตรวจสอบประวัติคำสั่งซื้อ คะแนนสะสม และจัดการที่อยู่จัดส่งสำหรับการสั่งซื้อครั้งถัดไป
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mx-auto max-w-5xl px-6 py-14 md:py-20">
|
||||
<ProfileClient />
|
||||
</section>
|
||||
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -1,65 +1,87 @@
|
||||
import Link from 'next/link'
|
||||
import type { Article } from '@homaroma/types'
|
||||
import { API_BASE } from '../../lib/api'
|
||||
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
|
||||
import { getArticlesResult, getCategoriesResult, getCmsPageResult } from '../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../lib/cms-sections'
|
||||
|
||||
const lang = 'th'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Scent Guide | HomAroma',
|
||||
description: 'Explore our collection of aroma articles, guides, and sensory knowledge to find your perfect scent.',
|
||||
}
|
||||
|
||||
async function getArticles(): Promise<Article[]> {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/articles?publishedOnly=true`, { next: { revalidate: 60 } })
|
||||
return res.ok ? res.json() : []
|
||||
} catch { return [] }
|
||||
}
|
||||
|
||||
export default async function ScentGuidePage() {
|
||||
const articles = await getArticles()
|
||||
const [articlesResult, categoriesResult, cmsLayoutResult] = await Promise.all([
|
||||
getArticlesResult(),
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('scent-guide-layout', lang),
|
||||
])
|
||||
const articles = articlesResult.ok ? articlesResult.data : []
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] scent-guide-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Journal</p>
|
||||
<h1 className="text-5xl font-bold">Scent Guide</h1>
|
||||
<p className="text-slate-400 max-w-lg mx-auto">Explore our collection of articles, guides, and sensory knowledge.</p>
|
||||
</div>
|
||||
<div className="flex min-h-screen flex-col bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<div className="space-y-4 border-b border-gray-200 bg-white px-6 pb-16 pt-32 text-center">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.4em] text-pop-pink">Journal</p>
|
||||
<h1 className="text-5xl font-bold text-pop-black">Scent Guide</h1>
|
||||
<p className="mx-auto max-w-lg text-gray-600">Explore our collection of articles, guides, and sensory knowledge.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 max-w-7xl mx-auto px-6 py-16 w-full">
|
||||
{articles.length === 0 ? (
|
||||
<div className="text-center text-slate-500 italic py-20">
|
||||
<div className="mx-auto w-full max-w-7xl flex-1 px-6 py-16">
|
||||
{!articlesResult.ok ? (
|
||||
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<p className="text-lg font-semibold text-pop-black">Unable to load articles</p>
|
||||
<p className="mt-2 text-sm text-rose-500">{articlesResult.error}</p>
|
||||
</div>
|
||||
) : articles.length === 0 ? (
|
||||
<div className="rounded-3xl bg-white px-6 py-20 text-center italic text-gray-500 shadow-brutal">
|
||||
Articles coming soon. Check back later!
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{articles.map(article => (
|
||||
<Link
|
||||
key={article.id}
|
||||
href={`/article/${article.slug}`}
|
||||
className="group block bg-night-950 rounded-2xl overflow-hidden border border-white/5 hover:border-cyan-glow/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl flex flex-col"
|
||||
className="group flex flex-col overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-brutal transition-all duration-300 hover:-translate-y-1 hover:shadow-brutal-hover"
|
||||
>
|
||||
<div className="aspect-[4/3] bg-night-900 overflow-hidden shrink-0">
|
||||
<div className="aspect-[4/3] shrink-0 overflow-hidden bg-pop-bg">
|
||||
{article.coverImage ? (
|
||||
<img src={article.coverImage} alt={article.title} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500" />
|
||||
<img src={article.coverImage} alt={article.title} className="h-full w-full object-cover transition-all duration-500 group-hover:scale-105" />
|
||||
) : (
|
||||
<div className="w-full h-full bg-white/5 flex items-center justify-center">
|
||||
<span className="text-slate-600 text-sm tracking-widest uppercase">No Image</span>
|
||||
<div className="flex h-full w-full items-center justify-center bg-pop-bg">
|
||||
<span className="text-sm uppercase tracking-widest text-gray-500">No Image</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-6 space-y-3 flex-1 flex flex-col">
|
||||
<p className="text-[10px] text-cyan-glow font-bold tracking-widest uppercase">
|
||||
<div className="flex flex-1 flex-col space-y-3 p-6">
|
||||
<p className="text-[10px] font-bold uppercase tracking-widest text-pop-pink">
|
||||
{new Date(article.createdAt).toLocaleDateString()}
|
||||
</p>
|
||||
<h2 className="text-xl font-bold leading-tight group-hover:text-cyan-glow transition-colors">{article.title}</h2>
|
||||
<div className="text-slate-400 text-sm line-clamp-3" dangerouslySetInnerHTML={{ __html: article.content }} />
|
||||
<h2 className="text-xl font-bold leading-tight text-pop-black transition-colors group-hover:text-pop-pink">{article.title}</h2>
|
||||
<div className="line-clamp-3 text-sm text-gray-600" dangerouslySetInnerHTML={{ __html: article.content }} />
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,136 +1,120 @@
|
||||
"use client"
|
||||
import { useState, useEffect, useRef, Suspense } from 'react'
|
||||
import { useSearchParams, useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
|
||||
import ProductCard from '../../components/ProductCard'
|
||||
import { type Product } from '@homaroma/types'
|
||||
import { API_BASE } from '../../lib/api'
|
||||
import { getCategoriesResult, getCmsPageResult, getProductsResult } from '../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../lib/cms-sections'
|
||||
import { resolveLocalized } from '../../lib/localization'
|
||||
|
||||
function SearchResults() {
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const q = searchParams.get('q') || ''
|
||||
const lang = 'th'
|
||||
|
||||
const [query, setQuery] = useState(q)
|
||||
const [products, setProducts] = useState<Product[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [displayCount, setDisplayCount] = useState(24)
|
||||
const loaderRef = useRef<HTMLDivElement>(null)
|
||||
export const metadata = {
|
||||
title: 'Search Products | HomAroma',
|
||||
description: 'Search HomAroma products by scent, category, or keyword.',
|
||||
}
|
||||
|
||||
// Sync input → URL
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
if (query.trim()) router.replace(`/search?q=${encodeURIComponent(query.trim())}`)
|
||||
}, 400)
|
||||
return () => clearTimeout(timer)
|
||||
}, [query, router])
|
||||
export default async function SearchPage({ searchParams }: { searchParams: Promise<{ q?: string | string[] }> }) {
|
||||
const params = await searchParams
|
||||
const rawQuery = Array.isArray(params.q) ? params.q[0] : params.q
|
||||
const query = rawQuery?.trim() ?? ''
|
||||
const [categoriesResult, cmsLayoutResult, productsResult] = await Promise.all([
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('search-layout', lang),
|
||||
query ? getProductsResult(`search=${encodeURIComponent(query)}&limit=1000`, lang) : Promise.resolve({ ok: true as const, data: [] }),
|
||||
])
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
const products = productsResult.ok ? productsResult.data : []
|
||||
|
||||
// Fetch on URL change
|
||||
useEffect(() => {
|
||||
if (!q.trim()) { setProducts([]); return }
|
||||
setLoading(true)
|
||||
setDisplayCount(24)
|
||||
fetch(`${API_BASE}/products?search=${encodeURIComponent(q)}&limit=1000`)
|
||||
.then(r => r.json())
|
||||
.then(data => setProducts(data.data || []))
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false))
|
||||
}, [q])
|
||||
|
||||
// Infinite scroll
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
entries => {
|
||||
if (entries[0].isIntersecting && products.length > displayCount)
|
||||
setDisplayCount(prev => Math.min(prev + 12, products.length))
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: '200px' }
|
||||
)
|
||||
if (loaderRef.current) observer.observe(loaderRef.current)
|
||||
return () => observer.disconnect()
|
||||
}, [products.length, displayCount])
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] search-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Header */}
|
||||
<div className="pt-32 pb-12 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/30">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Search</p>
|
||||
<h1 className="text-5xl font-bold tracking-tight">Find Your Scent</h1>
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<section className="border-b border-gray-200 bg-white px-6 py-16 text-center">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Search</p>
|
||||
<h1 className="mt-4 text-5xl font-semibold tracking-tight text-pop-black">Find Your Scent</h1>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="max-w-md mx-auto mt-6">
|
||||
<div className="flex glass border border-white/10 rounded-xl overflow-hidden">
|
||||
<svg className="w-4 h-4 text-slate-400 m-3.5 shrink-0" 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
|
||||
type="text"
|
||||
autoFocus
|
||||
placeholder="Search by scent or product name..."
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-500"
|
||||
/>
|
||||
{query && (
|
||||
<button
|
||||
onClick={() => { setQuery(''); router.replace('/search') }}
|
||||
className="px-3 text-slate-400 hover:text-white transition-colors"
|
||||
>✕</button>
|
||||
)}
|
||||
<section className="border-b border-gray-100 bg-white/70 px-6 py-8">
|
||||
<form className="mx-auto flex max-w-xl overflow-hidden rounded-full border border-gray-200 bg-white shadow-brutal" action="/search">
|
||||
<input
|
||||
name="q"
|
||||
defaultValue={query}
|
||||
placeholder="Search by scent or product name..."
|
||||
className="min-w-0 flex-1 px-5 py-3 text-sm text-pop-black outline-none placeholder:text-gray-400"
|
||||
/>
|
||||
<button className="bg-pop-black px-6 py-3 text-sm font-bold uppercase tracking-widest text-white transition hover:bg-pop-pink">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{categories.length > 0 && (
|
||||
<div className="mx-auto mt-5 flex max-w-3xl flex-wrap justify-center gap-2">
|
||||
{categories.map((category) => {
|
||||
const name = resolveLocalized(category.name, lang)
|
||||
if (!name) return null
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={category.id}
|
||||
href={`/search?q=${encodeURIComponent(name)}`}
|
||||
className="rounded-full border border-gray-200 bg-white px-4 py-1.5 text-xs font-semibold text-gray-600 transition hover:border-pop-pink hover:text-pop-pink"
|
||||
>
|
||||
{name}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && q && (
|
||||
<p className="text-slate-500 text-sm">
|
||||
{query && (
|
||||
<p className="mt-5 text-center text-sm text-gray-500">
|
||||
{products.length > 0
|
||||
? `Found ${products.length} result${products.length !== 1 ? 's' : ''} for "${q}"`
|
||||
: `No results for "${q}"`}
|
||||
? `Found ${products.length} result${products.length !== 1 ? 's' : ''} for "${query}"`
|
||||
: `No results for "${query}"`}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 py-12">
|
||||
{!q.trim() ? (
|
||||
<div className="text-center py-24 text-slate-500 space-y-3">
|
||||
<p className="text-4xl">🔍</p>
|
||||
<p className="text-lg">Type something to search</p>
|
||||
<Link href="/shop" className="text-cyan-glow text-sm hover:underline">Browse All Products →</Link>
|
||||
<div className="mx-auto max-w-7xl px-6 py-12">
|
||||
{!query ? (
|
||||
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<p className="text-lg font-semibold text-pop-black">Type something to search</p>
|
||||
<Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">
|
||||
Browse All Products →
|
||||
</Link>
|
||||
</div>
|
||||
) : loading ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
|
||||
))}
|
||||
) : !productsResult.ok ? (
|
||||
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<p className="text-lg font-semibold text-pop-black">Unable to search products</p>
|
||||
<p className="mt-2 text-sm text-rose-500">{productsResult.error}</p>
|
||||
</div>
|
||||
) : products.length === 0 ? (
|
||||
<div className="text-center py-24 text-slate-500 space-y-4">
|
||||
<p className="text-4xl">🌿</p>
|
||||
<p className="text-lg font-semibold">No products found</p>
|
||||
<p className="text-sm">Try a different scent name or keyword</p>
|
||||
<Link href="/shop" className="text-cyan-glow text-sm hover:underline">Browse All Products →</Link>
|
||||
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<p className="text-lg font-semibold text-pop-black">No products found</p>
|
||||
<p className="mt-2 text-sm text-gray-500">Try a different scent name or keyword.</p>
|
||||
<Link href="/shop" className="mt-4 inline-flex font-semibold text-pop-pink">
|
||||
Browse All Products →
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{products.slice(0, displayCount).map(p => (
|
||||
<ProductCard key={p.id} product={p} />
|
||||
))}
|
||||
</div>
|
||||
{displayCount < products.length && (
|
||||
<div ref={loaderRef} className="py-12 flex justify-center">
|
||||
<div className="w-8 h-8 rounded-full border-2 border-cyan-glow border-t-transparent animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{products.map((product) => <ProductCard key={product.id} product={product} />)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function SearchPage() {
|
||||
return (
|
||||
<Suspense>
|
||||
<SearchResults />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
@@ -1,152 +1,104 @@
|
||||
"use client";
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import Link from 'next/link'
|
||||
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
|
||||
import ProductCard from '../../components/ProductCard'
|
||||
import { type Category, type Product } from '@homaroma/types'
|
||||
import ShopCouponBridge from '../../components/ShopCouponBridge'
|
||||
import { getCategoriesResult, getCmsPageResult, getProductsResult } from '../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../lib/cms-sections'
|
||||
import { resolveLocalized } from '../../lib/localization'
|
||||
|
||||
import { API_BASE } from '../../lib/api'
|
||||
const lang = 'th'
|
||||
|
||||
export default function ShopPage() {
|
||||
const [categories, setCategories] = useState<Category[]>([])
|
||||
const [products, setProducts] = useState<Product[]>([])
|
||||
const [activeCategory, setActiveCategory] = useState<number | null>(null)
|
||||
const [searchInput, setSearchInput] = useState('')
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [displayCount, setDisplayCount] = useState(24)
|
||||
const [totalProducts, setTotalProducts] = useState(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [productsLoading, setProductsLoading] = useState(false)
|
||||
const loaderRef = useRef<HTMLDivElement>(null)
|
||||
export const metadata = {
|
||||
title: 'Shop Aroma Products | HomAroma',
|
||||
description: 'Browse HomAroma aroma oils, reed diffusers, room sprays, and premium scent products.',
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${API_BASE}/categories`)
|
||||
.then((r) => r.json())
|
||||
.then((data: Category[]) => { setCategories(data); setLoading(false) })
|
||||
.catch(console.error)
|
||||
}, [])
|
||||
export default async function ShopPage({ searchParams }: { searchParams: Promise<{ coupon?: string | string[] }> }) {
|
||||
const params = await searchParams
|
||||
const coupon = Array.isArray(params.coupon) ? params.coupon[0] : params.coupon
|
||||
const [categoriesResult, productsResult, cmsLayoutResult] = await Promise.all([
|
||||
getCategoriesResult(lang),
|
||||
getProductsResult('limit=1000', lang),
|
||||
getCmsPageResult('shop-layout', lang),
|
||||
])
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const products = productsResult.ok ? productsResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
const apiError = !categoriesResult.ok
|
||||
? categoriesResult.error
|
||||
: !productsResult.ok
|
||||
? productsResult.error
|
||||
: ''
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => setSearchQuery(searchInput), 400)
|
||||
return () => clearTimeout(timer)
|
||||
}, [searchInput])
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
setDisplayCount(24)
|
||||
}, [activeCategory, searchQuery])
|
||||
|
||||
useEffect(() => {
|
||||
setProductsLoading(true)
|
||||
const params = new URLSearchParams()
|
||||
params.append('limit', '1000')
|
||||
if (activeCategory) params.append('categoryId', activeCategory.toString())
|
||||
if (searchQuery.trim()) params.append('search', searchQuery.trim())
|
||||
fetch(`${API_BASE}/products?${params.toString()}`)
|
||||
.then((r) => r.json())
|
||||
.then((data: { data: Product[], meta?: any }) => {
|
||||
setProducts(data.data || [])
|
||||
setTotalProducts(data.meta?.total || 0)
|
||||
})
|
||||
.catch(console.error)
|
||||
.finally(() => setProductsLoading(false))
|
||||
}, [activeCategory, searchQuery])
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && products.length > displayCount)
|
||||
setDisplayCount((prev) => Math.min(prev + 12, products.length))
|
||||
},
|
||||
{ threshold: 0.1, rootMargin: '200px' }
|
||||
)
|
||||
if (loaderRef.current) observer.observe(loaderRef.current)
|
||||
return () => observer.disconnect()
|
||||
}, [products.length, displayCount, productsLoading])
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] shop-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* Page Header */}
|
||||
<div className="pt-32 pb-12 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/30">
|
||||
<p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">All Products</p>
|
||||
<h1 className="text-5xl font-bold tracking-tight">The Collection</h1>
|
||||
<p className="text-slate-400 max-w-md mx-auto">Browse our full range of premium aroma products — crafted to elevate every space.</p>
|
||||
<div className="max-w-md mx-auto mt-6">
|
||||
<div className="flex glass border border-white/10 rounded-xl overflow-hidden">
|
||||
<svg className="w-4 h-4 text-slate-400 m-3.5 shrink-0" 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
|
||||
type="text"
|
||||
placeholder="Search by scent or category..."
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
className="bg-transparent border-none outline-none text-sm p-2 w-full text-white placeholder-slate-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-screen bg-pop-bg">
|
||||
<ShopCouponBridge coupon={coupon} />
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<section className="border-b border-gray-200 bg-white px-6 py-16 text-center">
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">All Products</p>
|
||||
<h1 className="mt-4 text-5xl font-semibold tracking-tight text-pop-black">The Collection</h1>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
|
||||
Browse our full range of premium aroma products crafted to elevate every space.
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 py-12 space-y-10">
|
||||
{/* Category Filter Tabs */}
|
||||
<div className="mx-auto max-w-7xl space-y-10 px-6 py-12">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
onClick={() => setActiveCategory(null)}
|
||||
className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
activeCategory === null ? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]' : 'glass hover:bg-white/10'
|
||||
}`}
|
||||
>All</button>
|
||||
{categories.map((cat) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setActiveCategory(cat.id)}
|
||||
className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 ${
|
||||
activeCategory === cat.id ? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]' : 'glass hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
{typeof cat.name === 'string' ? cat.name : (cat.name as any)?.th || (cat.name as any)?.en || ''}
|
||||
{cat._count && <span className="ml-2 opacity-60">({cat._count.products})</span>}
|
||||
</button>
|
||||
))}
|
||||
<Link className="rounded-full bg-pop-black px-5 py-2 text-xs font-bold uppercase tracking-widest text-white" href="/shop">
|
||||
All
|
||||
</Link>
|
||||
{categories.map((category) => {
|
||||
const name = resolveLocalized(category.name, lang)
|
||||
return (
|
||||
<Link
|
||||
key={category.id}
|
||||
href={`/category/${category.id}`}
|
||||
className="rounded-full border border-gray-200 bg-white px-5 py-2 text-xs font-bold uppercase tracking-widest text-gray-600 transition hover:border-pop-pink hover:text-pop-pink"
|
||||
>
|
||||
{name}
|
||||
{category._count && <span className="ml-2 opacity-60">({category._count.products})</span>}
|
||||
</Link>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{!loading && (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-slate-500 text-sm">{productsLoading ? 'Loading...' : `${totalProducts} products`}</p>
|
||||
{activeCategory && (
|
||||
<Link href={`/category/${activeCategory}`} className="text-cyan-glow text-xs font-bold uppercase tracking-widest hover:underline">
|
||||
View Category Page →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-gray-500">{products.length} products</p>
|
||||
<Link href="/search" className="text-sm font-semibold text-pop-pink transition hover:text-pop-red">
|
||||
Search products
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{loading || productsLoading ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" />
|
||||
))}
|
||||
{apiError ? (
|
||||
<div className="rounded-3xl border border-rose-100 bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<p className="text-lg font-semibold text-pop-black">Unable to load products</p>
|
||||
<p className="mt-2 text-sm text-rose-500">{apiError}</p>
|
||||
</div>
|
||||
) : products.length === 0 ? (
|
||||
<div className="text-center py-24 text-slate-500 space-y-3">
|
||||
<p className="text-4xl">🌿</p>
|
||||
<p className="text-lg">No products found</p>
|
||||
<p className="text-sm">Try adjusting your search or filter</p>
|
||||
<div className="rounded-3xl bg-white px-6 py-20 text-center shadow-brutal">
|
||||
<p className="text-lg font-semibold text-pop-black">No products found</p>
|
||||
<p className="mt-2 text-sm text-gray-500">Please check back soon.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
|
||||
{products.slice(0, displayCount).map((p) => (
|
||||
<ProductCard key={p.id} product={p} />
|
||||
))}
|
||||
</div>
|
||||
{displayCount < products.length && (
|
||||
<div ref={loaderRef} className="py-12 flex justify-center">
|
||||
<div className="w-8 h-8 rounded-full border-2 border-cyan-glow border-t-transparent animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||||
{products.map((product) => <ProductCard key={product.id} product={product} />)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,58 @@
|
||||
import { redirect } from 'next/navigation'
|
||||
import { MapPin } from 'lucide-react'
|
||||
|
||||
export default function TrackPage() {
|
||||
redirect('/')
|
||||
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
|
||||
import TrackOrderClient from '../../components/TrackOrderClient'
|
||||
import { getCategoriesResult, getCmsPageResult } from '../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../lib/cms-sections'
|
||||
|
||||
const lang = 'th'
|
||||
|
||||
export const metadata = {
|
||||
title: 'ติดตามคำสั่งซื้อ | HomAroma',
|
||||
description: 'ตรวจสอบสถานะคำสั่งซื้อ HomAroma ด้วยหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์ที่ใช้สั่งซื้อ',
|
||||
}
|
||||
|
||||
export default async function TrackPage() {
|
||||
const [categoriesResult, cmsLayoutResult] = await Promise.all([
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('track-order-layout', lang),
|
||||
])
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] track-order-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-[70vh] bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
|
||||
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-pop-pink shadow-brutal">
|
||||
<MapPin className="h-8 w-8" />
|
||||
</div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Track Order</p>
|
||||
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Track Your Status</h1>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
|
||||
กรอกหมายเลขคำสั่งซื้อและเบอร์โทรศัพท์เพื่อตรวจสอบสถานะสินค้า หรือกลับมาดูคำสั่งซื้อที่เคยค้นหาบนอุปกรณ์นี้
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mx-auto max-w-5xl px-6 py-14 md:py-20">
|
||||
<TrackOrderClient />
|
||||
</section>
|
||||
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
import { Heart } from 'lucide-react'
|
||||
|
||||
import DynamicPageRenderer from '../../components/dynamic/DynamicPageRenderer'
|
||||
import WishlistClient from '../../components/WishlistClient'
|
||||
import { getCategoriesResult, getCmsPageResult } from '../../lib/cms'
|
||||
import { splitCmsLayoutSections } from '../../lib/cms-sections'
|
||||
|
||||
const lang = 'th'
|
||||
|
||||
export const metadata = {
|
||||
title: 'Wishlist | HomAroma',
|
||||
description: 'รายการสินค้าที่คุณบันทึกไว้ใน Wishlist ของ HomAroma',
|
||||
}
|
||||
|
||||
export default async function WishlistPage() {
|
||||
const [categoriesResult, cmsLayoutResult] = await Promise.all([
|
||||
getCategoriesResult(lang),
|
||||
getCmsPageResult('wishlist-layout', lang),
|
||||
])
|
||||
const categories = categoriesResult.ok ? categoriesResult.data : []
|
||||
const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
|
||||
const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
|
||||
|
||||
if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
|
||||
console.error(`[website-cms] wishlist-layout unavailable: ${cmsLayoutResult.error}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-[70vh] bg-pop-bg">
|
||||
{announcementSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
|
||||
{heroSections.length > 0 ? (
|
||||
<DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
|
||||
) : (
|
||||
<section className="mx-auto max-w-4xl px-6 pt-20 text-center md:pt-24">
|
||||
<div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-white text-rose-500 shadow-brutal">
|
||||
<Heart className="h-8 w-8 fill-current" />
|
||||
</div>
|
||||
<p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">Wishlist</p>
|
||||
<h1 className="mt-4 text-4xl font-semibold text-pop-black md:text-5xl">Your Wishlist</h1>
|
||||
<p className="mx-auto mt-4 max-w-2xl text-gray-600">
|
||||
Items you've loved. Keep them here until you're ready to make them yours.
|
||||
</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="mx-auto max-w-7xl px-6 py-14 md:py-20">
|
||||
<WishlistClient />
|
||||
</section>
|
||||
|
||||
{bottomSections.length > 0 && (
|
||||
<DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user