x

apps/website/src/app/[lang]/category/[id]/page.tsx

@@ -3,17 +3,30 @@ import Image from 'next/image'
 import { notFound } from 'next/navigation'
 import type { Metadata } from 'next'
 import { generateSeoMetadata } from '@/lib/seo'
-import type { Category, Product, AttributeDefinition } from '@homaroma/types'
+import type { Category, Product, AttributeDefinition, CategorySection, PageSection } from '@homaroma/types'
 import { getCategoryImage, getCategoryMedia, resolveCategoryMediaUrl } from '@homaroma/types'
 import DynamicPageRenderer from '@/components/dynamic/DynamicPageRenderer'
 import ProductCard from '@/components/ProductCard'
 import CategoryFeaturedSeries from '@/components/category/CategoryFeaturedSeries'
 import CategoryCatalogContainer from '@/components/category/CategoryCatalogContainer'
 import CategoryUspBar from '@/components/category/CategoryUspBar'
-import { type ApiResult, fetchJsonResult, getCategoriesResult, getCmsPageResult, getStoreSettings } from '@/lib/cms'
+import { type ApiResult, fetchJsonResult, getCategoriesResult, getCmsPageResult, getCategorySectionsResult, getStoreSettings } from '@/lib/cms'
 import { splitCmsLayoutSections } from '@/lib/cms-sections'
 import { resolveLocalized } from '@/lib/localization'
 
+function toPageSection(section: CategorySection): PageSection {
+  return {
+    id: section.id,
+    pageId: 0,
+    type: section.type,
+    order: section.order,
+    payload: section.payload,
+    isActive: section.isActive,
+    createdAt: section.createdAt,
+    updatedAt: section.updatedAt,
+  }
+}
+
 // lang is extracted from params
 type CategoryProductsResponse = {
   category?: Category
@@ -63,14 +76,18 @@ export async function generateMetadata({ params }: { params: Promise<{ id: strin
 
 export default async function CategoryPage({ params }: { params: Promise<{ id: string, lang: string }> }) {
   const { id, lang } = await params
-  const [categoryProductsResult, categoriesResult, cmsLayoutResult] = await Promise.all([
+  const [categoryProductsResult, categoriesResult, cmsLayoutResult, categorySectionsResult] = await Promise.all([
     getCategoryProducts(id, lang),
     getCategoriesResult(lang),
     getCmsPageResult('category-layout', lang),
+    getCategorySectionsResult(id, lang),
   ])
   const categories = categoriesResult.ok ? categoriesResult.data : []
   const cmsSections = cmsLayoutResult.ok ? cmsLayoutResult.data.sections ?? [] : []
   const { announcementSections, heroSections, bottomSections } = splitCmsLayoutSections(cmsSections)
+  const customSections = categorySectionsResult.ok && Array.isArray(categorySectionsResult.data)
+    ? categorySectionsResult.data.filter((s) => s.isActive)
+    : []
 
   if (!cmsLayoutResult.ok && cmsLayoutResult.status !== 404) {
     console.error(`[website-cms] category-layout unavailable: ${cmsLayoutResult.error}`)
@@ -122,195 +139,256 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
     }
   }
 
+  const renderHeaderSection = (payload?: Record<string, unknown>) => {
+    const showPills = payload?.showCategoryNav !== false && category.filterConfig?.showCategoryNav !== false
+    const showBreadcrumb = payload?.showBreadcrumbs !== false
+
+    return (
+      <div className="w-full">
+        {layoutType === 'none' ? null : layoutType === 'editorial_hero' ? (
+          /* ── Archetype 2: Editorial Hero Layout ── */
+          <section className="relative overflow-hidden min-h-[380px] md:min-h-[460px] flex items-center justify-center border-b border-line-primary/10 bg-black">
+            {heroDesktopUrl && (
+              <div className="absolute inset-0 z-0">
+                <Image
+                  src={heroDesktopUrl}
+                  alt={categoryName}
+                  fill
+                  unoptimized
+                  sizes="(min-width: 768px) 100vw, 1px"
+                  className="hidden object-cover filter brightness-[0.45] saturate-125 scale-105 md:block"
+                  style={{ objectPosition: `${(heroDesktopMedia?.focalX ?? 0.5) * 100}% ${(heroDesktopMedia?.focalY ?? 0.5) * 100}%` }}
+                />
+                <Image
+                  src={heroMobileUrl}
+                  alt={categoryName}
+                  fill
+                  unoptimized
+                  sizes="(max-width: 767px) 100vw, 1px"
+                  className="object-cover filter brightness-[0.45] saturate-125 scale-105 md:hidden"
+                  style={{ objectPosition: `${(heroMobileMedia?.focalX ?? 0.5) * 100}% ${(heroMobileMedia?.focalY ?? 0.5) * 100}%` }}
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/40" />
+              </div>
+            )}
+
+            <div className="relative z-10 mx-auto max-w-4xl px-6 pt-32 pb-16 text-center space-y-5">
+              {showBreadcrumb && (
+                <div className="flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-widest text-slate-300">
+                  <Link href="/" className="transition hover:text-brand-primary">Home</Link>
+                  <span>/</span>
+                  <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
+                  <span>/</span>
+                  <span className="text-brand-primary font-bold">{categoryName}</span>
+                </div>
+              )}
+
+              <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-[11px] font-bold uppercase tracking-widest bg-white/10 text-white border border-white/20 backdrop-blur-md">
+                <span>Curated Aroma Collection</span>
+              </div>
+
+              <h1 className="text-4xl font-serif font-bold text-white md:text-6xl tracking-tight leading-tight">
+                {categoryName}
+              </h1>
+
+              {category._count && (
+                <p className="text-slate-300 text-sm md:text-base max-w-xl mx-auto font-light leading-relaxed">
+                  Discover {category._count.products} handcrafted scents and artisanal essences designed to elevate your living spaces.
+                </p>
+              )}
+            </div>
+          </section>
+        ) : layoutType === 'dense_catalog' ? (
+          /* ── Archetype 3: Dense Catalog Layout ── */
+          <section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10 pt-28 pb-4 md:pt-32 md:pb-5">
+            <div className="mx-auto max-w-7xl px-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
+              <div className="space-y-1.5">
+                {showBreadcrumb && (
+                  <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-text">
+                    <Link href="/" className="transition hover:text-brand-primary">Home</Link>
+                    <span>/</span>
+                    <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
+                    <span>/</span>
+                    <span className="text-text-main font-bold">{categoryName}</span>
+                  </div>
+                )}
+                <div className="flex items-center gap-3">
+                  <h1 className="text-2xl font-bold text-text-main sm:text-3xl tracking-tight">{categoryName}</h1>
+                  {category._count && (
+                    <span className="px-2.5 py-0.5 rounded-full text-xs font-mono font-bold bg-brand-primary/10 text-brand-primary border border-brand-primary/20">
+                      {category._count.products} items
+                    </span>
+                  )}
+                </div>
+              </div>
+              <div className="text-xs text-muted-text">
+                High-Density Catalog View
+              </div>
+            </div>
+          </section>
+        ) : (
+          /* ── Archetype 1: Split Showcase Layout (Default) ── */
+          <section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10">
+            <div className="relative mx-auto max-w-7xl px-6 pt-32 pb-12 md:pt-32 md:pb-20 flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
+              <div className="flex-1 text-center md:text-left space-y-4">
+                {showBreadcrumb && (
+                  <div className="flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
+                    <Link href="/" className="transition hover:text-brand-primary">Home</Link>
+                    <span>/</span>
+                    <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
+                    <span>/</span>
+                    <span className="text-text-main font-bold">{categoryName}</span>
+                  </div>
+                )}
+                <div>
+                  <h1 className="text-4xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
+                  {category._count && <p className="mt-3 text-muted-text text-sm">{category._count.products} products available in this collection</p>}
+                </div>
+              </div>
+              {categoryThumbnailUrl && (
+                <div className="relative w-48 h-48 md:w-72 md:h-72 shrink-0 rounded-3xl overflow-hidden shadow-lg border border-line-primary/5">
+                  <Image
+                    src={categoryThumbnailUrl}
+                    alt={categoryName}
+                    fill
+                    unoptimized
+                    className="object-cover"
+                  />
+                </div>
+              )}
+            </div>
+          </section>
+        )}
+
+        {layoutType === 'none' && showBreadcrumb && (
+          <div className="mx-auto max-w-7xl px-6 pt-24 md:pt-28">
+            <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-text">
+              <Link href="/" className="transition hover:text-brand-primary">Home</Link>
+              <span>/</span>
+              <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
+              <span>/</span>
+              <span className="text-text-main font-bold">{categoryName}</span>
+            </nav>
+          </div>
+        )}
+
+        {showPills && (
+          <div className="mx-auto max-w-7xl px-6 pt-4">
+            <div className={`flex flex-wrap gap-2.5 ${layoutType === 'editorial_hero' ? 'justify-center' : 'justify-start'}`}>
+              {!categoriesResult.ok && (
+                <span className="rounded-full border border-rose-100 bg-surface-card px-4 py-1.5 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-4 py-1.5 text-xs font-bold uppercase tracking-wider transition-all ${isActive
+                      ? 'bg-text-main text-surface-card shadow-sm'
+                      : 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
+                      }`}
+                  >
+                    {name}
+                  </Link>
+                )
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const renderCatalogGrid = () => (
+    <div className="mx-auto max-w-7xl space-y-5 px-6 pb-12">
+      {/* Featured Series Showcase Banner */}
+      {Boolean(category.featuredSeries?.enabled) && (
+        <CategoryFeaturedSeries
+          featured={category.featuredSeries!}
+          categoryName={categoryName}
+        />
+      )}
+
+      {/* Catalog Container (Filter Sidebar + Toolbar + Grid) */}
+      {products.length === 0 ? (
+        <div className="ui-panel px-6 py-20 text-center">
+          <p className="text-lg font-semibold text-text-main">No products in this category yet.</p>
+          <Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
+        </div>
+      ) : (
+        <CategoryCatalogContainer
+          products={products}
+          categoryName={categoryName}
+          filterConfig={category.filterConfig}
+          availableFilters={categoryProductsResult.data?.availableFilters || category.availableFilters || []}
+          layoutGridClass={getProductGridClass()}
+          lang={lang}
+        />
+      )}
+    </div>
+  )
+
+  const renderUspBar = () => (
+    <div className="mx-auto max-w-7xl px-6 pb-12">
+      <CategoryUspBar benefits={category.uspBenefits} />
+    </div>
+  )
+
   return (
     <div className="min-h-screen bg-surface-page text-text-main">
       {announcementSections.length > 0 && (
         <DynamicPageRenderer sections={announcementSections} categories={categories} lang={lang} />
       )}
-      {heroSections.length > 0 && !(layoutType === 'editorial_hero' && hasArtDirectedHero) ? (
-        <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
-      ) : layoutType === 'none' ? (
-        /* ── Archetype 4: No Header (ปิดส่วนหัว Archetype) ── */
-        null
-      ) : layoutType === 'editorial_hero' ? (
-        /* ── Archetype 2: Editorial Hero Layout ── */
-        <section className="relative overflow-hidden min-h-[380px] md:min-h-[460px] flex items-center justify-center border-b border-line-primary/10 bg-black">
-          {heroDesktopUrl && (
-            <div className="absolute inset-0 z-0">
-              <Image
-                src={heroDesktopUrl}
-                alt={categoryName}
-                fill
-                unoptimized
-                sizes="(min-width: 768px) 100vw, 1px"
-                className="hidden object-cover filter brightness-[0.45] saturate-125 scale-105 md:block"
-                style={{ objectPosition: `${(heroDesktopMedia?.focalX ?? 0.5) * 100}% ${(heroDesktopMedia?.focalY ?? 0.5) * 100}%` }}
+
+      {customSections.length > 0 ? (
+        /* ── Dynamic Category CMS Layout ── */
+        <div className="space-y-6">
+          {customSections.map((sec, idx) => {
+            const secPayload = sec.payload && typeof sec.payload === 'object' && !Array.isArray(sec.payload)
+              ? (sec.payload as Record<string, unknown>)
+              : undefined
+
+            if (sec.type === 'CATEGORY_HEADER') {
+              return <div key={sec.id || idx}>{renderHeaderSection(secPayload)}</div>
+            }
+            if (sec.type === 'CATALOG_GRID') {
+              return <div key={sec.id || idx}>{renderCatalogGrid()}</div>
+            }
+            if (sec.type === 'USP_BAR') {
+              return <div key={sec.id || idx}>{renderUspBar()}</div>
+            }
+
+            return (
+              <DynamicPageRenderer
+                key={sec.id || idx}
+                sections={[toPageSection(sec)]}
+                categories={categories}
+                lang={lang}
               />
-              <Image
-                src={heroMobileUrl}
-                alt={categoryName}
-                fill
-                unoptimized
-                sizes="(max-width: 767px) 100vw, 1px"
-                className="object-cover filter brightness-[0.45] saturate-125 scale-105 md:hidden"
-                style={{ objectPosition: `${(heroMobileMedia?.focalX ?? 0.5) * 100}% ${(heroMobileMedia?.focalY ?? 0.5) * 100}%` }}
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-black/40" />
-            </div>
+            )
+          })}
+        </div>
+      ) : (
+        /* ── Legacy Fallback Category Layout ── */
+        <>
+          {heroSections.length > 0 && !(layoutType === 'editorial_hero' && hasArtDirectedHero) ? (
+            <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
+          ) : (
+            renderHeaderSection()
           )}
 
-          <div className="relative z-10 mx-auto max-w-4xl px-6 pt-32 pb-16 text-center space-y-5">
-            <div className="flex items-center justify-center gap-2 text-xs font-semibold uppercase tracking-widest text-slate-300">
-              <Link href="/" className="transition hover:text-brand-primary">Home</Link>
-              <span>/</span>
-              <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
-              <span>/</span>
-              <span className="text-brand-primary font-bold">{categoryName}</span>
-            </div>
+          {renderCatalogGrid()}
+          {renderUspBar()}
 
-            <div className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-[11px] font-bold uppercase tracking-widest bg-white/10 text-white border border-white/20 backdrop-blur-md">
-              <span>Curated Aroma Collection</span>
-            </div>
-
-            <h1 className="text-4xl font-serif font-bold text-white md:text-6xl tracking-tight leading-tight">
-              {categoryName}
-            </h1>
-
-            {category._count && (
-              <p className="text-slate-300 text-sm md:text-base max-w-xl mx-auto font-light leading-relaxed">
-                Discover {category._count.products} handcrafted scents and artisanal essences designed to elevate your living spaces.
-              </p>
-            )}
-          </div>
-        </section>
-      ) : layoutType === 'dense_catalog' ? (
-        /* ── Archetype 3: Dense Catalog Layout ── */
-        <section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10 pt-28 pb-4 md:pt-32 md:pb-5">
-          <div className="mx-auto max-w-7xl px-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
-            <div className="space-y-1.5">
-              <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-text">
-                <Link href="/" className="transition hover:text-brand-primary">Home</Link>
-                <span>/</span>
-                <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
-                <span>/</span>
-                <span className="text-text-main font-bold">{categoryName}</span>
-              </div>
-              <div className="flex items-center gap-3">
-                <h1 className="text-2xl font-bold text-text-main sm:text-3xl tracking-tight">{categoryName}</h1>
-                {category._count && (
-                  <span className="px-2.5 py-0.5 rounded-full text-xs font-mono font-bold bg-brand-primary/10 text-brand-primary border border-brand-primary/20">
-                    {category._count.products} items
-                  </span>
-                )}
-              </div>
-            </div>
-            <div className="text-xs text-muted-text">
-              High-Density Catalog View
-            </div>
-          </div>
-        </section>
-      ) : (
-        /* ── Archetype 1: Split Showcase Layout (Default) ── */
-        <section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10">
-          <div className="relative mx-auto max-w-7xl px-6 pt-32 pb-12 md:pt-32 md:pb-20 flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
-            <div className="flex-1 text-center md:text-left space-y-4">
-              <div className="flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
-                <Link href="/" className="transition hover:text-brand-primary">Home</Link>
-                <span>/</span>
-                <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
-                <span>/</span>
-                <span className="text-text-main font-bold">{categoryName}</span>
-              </div>
-              <div>
-                <h1 className="text-4xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
-                {category._count && <p className="mt-3 text-muted-text text-sm">{category._count.products} products available in this collection</p>}
-              </div>
-            </div>
-            {categoryThumbnailUrl && (
-              <div className="relative w-48 h-48 md:w-72 md:h-72 shrink-0 rounded-3xl overflow-hidden shadow-lg border border-line-primary/5">
-                <Image
-                  src={categoryThumbnailUrl}
-                  alt={categoryName}
-                  fill
-                  unoptimized
-                  className="object-cover"
-                />
-              </div>
-            )}
-          </div>
-        </section>
-      )}
-
-      <div className={`mx-auto max-w-7xl space-y-5 px-6 pb-12 ${layoutType === 'none' ? 'pt-24 md:pt-28' : 'pt-3'}`}>
-        {/* Minimal Breadcrumbs when Archetype Header is disabled */}
-        {layoutType === 'none' && (
-          <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-muted-text">
-            <Link href="/" className="transition hover:text-brand-primary">Home</Link>
-            <span>/</span>
-            <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
-            <span>/</span>
-            <span className="text-text-main font-bold">{categoryName}</span>
-          </nav>
-        )}
-
-        {/* Category Pills Navigation (Per-category Toggle) */}
-        {category.filterConfig?.showCategoryNav !== false && (
-          <div className={`flex flex-wrap gap-2.5 ${layoutType === 'editorial_hero' ? 'justify-center' : 'justify-start'}`}>
-            {!categoriesResult.ok && (
-              <span className="rounded-full border border-rose-100 bg-surface-card px-4 py-1.5 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-4 py-1.5 text-xs font-bold uppercase tracking-wider transition-all ${isActive
-                    ? 'bg-text-main text-surface-card shadow-sm'
-                    : 'border border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary hover:text-brand-primary'
-                    }`}
-                >
-                  {name}
-                </Link>
-              )
-            })}
-          </div>
-        )}
-
-        {/* Featured Series Showcase Banner (Mockup 01 & 03) */}
-        {Boolean(category.featuredSeries?.enabled) && (
-          <CategoryFeaturedSeries
-            featured={category.featuredSeries!}
-            categoryName={categoryName}
-          />
-        )}
-
-        {/* Catalog Container (Filter Sidebar + Toolbar + Grid) */}
-        {products.length === 0 ? (
-          <div className="ui-panel px-6 py-20 text-center">
-            <p className="text-lg font-semibold text-text-main">No products in this category yet.</p>
-            <Link href="/shop" className="mt-4 inline-flex font-semibold text-brand-primary">Back to Shop</Link>
-          </div>
-        ) : (
-          <CategoryCatalogContainer
-            products={products}
-            categoryName={categoryName}
-            filterConfig={category.filterConfig}
-            availableFilters={categoryProductsResult.data?.availableFilters || category.availableFilters || []}
-            layoutGridClass={getProductGridClass()}
-            lang={lang}
-          />
-        )}
-
-        {/* Benefits & Support USP Blocks (Mockup 06) */}
-        <CategoryUspBar benefits={category.uspBenefits} />
-      </div>
-      {bottomSections.length > 0 && (
-        <DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
+          {bottomSections.length > 0 && (
+            <DynamicPageRenderer sections={bottomSections} categories={categories} lang={lang} />
+          )}
+        </>
       )}
     </div>
   )