=> (
+ Boolean(value) && typeof value === 'object' && !Array.isArray(value)
+)
+
+export const validateCategoryHeroCarouselPayload = (payload: unknown): string[] => {
+ if (!isRecord(payload) || !Array.isArray(payload.slides) || payload.slides.length === 0) {
+ return ['Add at least one slide.']
+ }
+
+ const issues = payload.slides.flatMap((slide, index) => {
+ if (!isRecord(slide) || typeof slide.imageUrl !== 'string' || slide.imageUrl.trim().length === 0) {
+ return [`Slide ${index + 1}: Desktop image is required.`]
+ }
+ return []
+ })
+
+ if (
+ payload.autoplay !== false
+ && (typeof payload.interval !== 'number' || !Number.isFinite(payload.interval) || payload.interval < 1000)
+ ) {
+ issues.push('Autoplay interval must be at least 1000 ms.')
+ }
+
+ return issues
+}
diff --git a/apps/admin/src/pages/CategoriesPage.tsx b/apps/admin/src/pages/CategoriesPage.tsx
index 7b163d3..4907039 100644
--- a/apps/admin/src/pages/CategoriesPage.tsx
+++ b/apps/admin/src/pages/CategoriesPage.tsx
@@ -13,7 +13,8 @@ import {
Search,
Globe,
Layers,
- FileJson
+ FileJson,
+ LayoutTemplate
} from 'lucide-react'
import CategoryBulkJsonModal from '../components/CategoryBulkJsonModal'
@@ -300,6 +301,13 @@ export default function CategoriesPage() {
{/* Actions */}
e.stopPropagation()}>
+
+
+
e.stopPropagation()}>
+
+
+
{
+ if (!data || typeof data !== 'object') return fallback
+
+ const response = data as { message?: unknown; issues?: unknown }
+ const message = typeof response.message === 'string' ? response.message : fallback
+ if (!Array.isArray(response.issues)) return message
+
+ const issueMessages = response.issues
+ .filter((issue): issue is ApiValidationIssue => Boolean(issue) && typeof issue === 'object')
+ .map((issue) => {
+ const detail = typeof issue.message === 'string' ? issue.message : ''
+ const path = typeof issue.path === 'string' ? issue.path : ''
+ return [path, detail].filter(Boolean).join(': ')
+ })
+ .filter(Boolean)
+
+ return issueMessages.length > 0 ? `${message} — ${issueMessages.join('; ')}` : message
+}
+
+// Exactly the blocks requested: Native blocks + Hero Promotional Slider + Divider
+const CATEGORY_SECTION_TYPES = [
+ 'CATEGORY_HEADER',
+ 'CATALOG_GRID',
+ 'USP_BAR',
+ 'HERO_CAROUSEL',
+ 'DIVIDER',
+] as const
+
+const CATEGORY_NATIVE_SECTION_TYPES = new Set([
+ 'CATEGORY_HEADER',
+ 'CATALOG_GRID',
+ 'USP_BAR',
+])
+
+const CATEGORY_STRUCTURED_SECTION_TYPES = new Set([
+ ...CATEGORY_NATIVE_SECTION_TYPES,
+ 'HERO_CAROUSEL',
+ 'DIVIDER',
+])
+
+const SECTION_LABELS: Record = {
+ CATEGORY_HEADER: 'Category header',
+ CATALOG_GRID: 'Product catalog',
+ USP_BAR: 'USP benefits',
+ HERO_CAROUSEL: 'Hero carousel (Wide Promo Slider)',
+ DIVIDER: 'Divider',
+}
+
+const SECTION_HELP: Record = {
+ CATEGORY_HEADER: 'Live category art-directed hero banner, title, description, and navigation pills.',
+ CATALOG_GRID: 'Product catalog grid, sorting toolbar, and facet filter sidebar.',
+ USP_BAR: 'Benefits and support USP blocks configured for this category.',
+ HERO_CAROUSEL: 'Category-specific wide promotional slider with responsive desktop and mobile artwork.',
+ DIVIDER: 'Configurable horizontal separator between category CMS blocks.',
+}
+
+const NATIVE_BLOCKS = [
+ { type: 'CATEGORY_HEADER', label: 'Category header', icon: PanelTop },
+ { type: 'CATALOG_GRID', label: 'Product catalog', icon: Grid3X3 },
+ { type: 'USP_BAR', label: 'USP benefits', icon: Shield },
+] as const
+
+const createDefaultCategoryPayload = (type: string) => {
+ switch (type) {
+ case 'CATEGORY_HEADER':
+ return {
+ showBreadcrumbs: true,
+ showCategoryNav: true,
+ showHeading: true,
+ title: { th: '', en: '' },
+ subtitle: { th: '', en: '' },
+ layoutType: 'split_showcase',
+ }
+ case 'CATALOG_GRID':
+ return {
+ showFilters: true,
+ showToolbar: true,
+ itemsPerPage: 24,
+ }
+ case 'USP_BAR':
+ return {
+ showUsp: true,
+ }
+ case 'HERO_CAROUSEL':
+ return {
+ slides: [
+ {
+ imageUrl: '',
+ mobileImageUrl: '',
+ linkUrl: '',
+ alt: { th: '', en: '' },
+ title: { th: '', en: '' },
+ subtitle: { th: '', en: '' },
+ buttonText: { th: '', en: '' },
+ focalPoint: { x: '50%', y: '50%' },
+ },
+ ],
+ autoplay: true,
+ interval: 4500,
+ aspectRatio: '21/7',
+ mobileAspectRatio: '16/9',
+ showArrows: true,
+ showDots: true,
+ }
+ case 'DIVIDER':
+ return { width: 'container', style: 'solid', thickness: 1, spacing: 'md', color: '#94a3b8' }
+ default:
+ return {}
+ }
+}
+
+export default function CategoryCmsPage() {
+ const { id } = useParams<{ id: string }>()
+ const navigate = useNavigate()
+
+ const [category, setCategory] = useState(null)
+ const [detailSections, setDetailSections] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [sectionsSaving, setSectionsSaving] = useState(false)
+ const [selectedSectionId, setSelectedSectionId] = useState('new')
+ const [sectionType, setSectionType] = useState('HERO_CAROUSEL')
+ const [sectionPayload, setSectionPayload] = useState>(createDefaultCategoryPayload('HERO_CAROUSEL'))
+ const [sectionJson, setSectionJson] = useState(JSON.stringify(createDefaultCategoryPayload('HERO_CAROUSEL'), null, 2))
+ const [sectionIsActive, setSectionIsActive] = useState(true)
+ const [sectionSaveError, setSectionSaveError] = useState(null)
+ const [activeLang, setActiveLang] = useState('th')
+ const [error, setError] = useState(null)
+ const [success, setSuccess] = useState(false)
+ const [isMediaModalOpen, setIsMediaModalOpen] = useState(false)
+ const [onSelectMedia, setOnSelectMedia] = useState<((url: string) => void) | null>(null)
+ const [isAddBlockModalOpen, setIsAddBlockModalOpen] = useState(false)
+
+ const languages = ['th', 'en', 'ja', 'zh', 'vi', 'ko', 'lo', 'it']
+
+ const selectedSection = selectedSectionId === 'new'
+ ? null
+ : detailSections.find((section) => section.id === selectedSectionId) || null
+
+ const nativeSectionCount = detailSections.filter((section) => CATEGORY_NATIVE_SECTION_TYPES.has(section.type)).length
+ const inactiveSectionCount = detailSections.filter((section) => !section.isActive).length
+
+ const resetDetailSectionEditor = (nextType = 'HERO_CAROUSEL') => {
+ const payload = createDefaultCategoryPayload(nextType)
+ setSelectedSectionId('new')
+ setSectionType(nextType)
+ setSectionPayload(payload)
+ setSectionJson(JSON.stringify(payload, null, 2))
+ setSectionIsActive(true)
+ setSectionSaveError(null)
+ }
+
+ const startNewSection = (nextType: string) => {
+ resetDetailSectionEditor(nextType)
+ }
+
+ const selectDetailSection = (section: CategorySection) => {
+ const payload = section.payload && typeof section.payload === 'object' && !Array.isArray(section.payload) ? section.payload : {}
+ setSelectedSectionId(section.id)
+ setSectionType(section.type)
+ setSectionPayload(payload)
+ setSectionJson(JSON.stringify(payload, null, 2))
+ setSectionIsActive(section.isActive)
+ setSectionSaveError(null)
+ }
+
+ const fetchDetailSections = async (catId: string | number) => {
+ const res = await fetch(`${API_BASE}/categories/${catId}/sections?includeInactive=true&lang=all`)
+ if (!res.ok) throw new Error('Failed to load category detail sections')
+ const data: CategorySection[] = await res.json()
+ setDetailSections(data)
+ if (data.length > 0) {
+ selectDetailSection(data[0])
+ } else {
+ resetDetailSectionEditor()
+ }
+ }
+
+ useEffect(() => {
+ const fetchData = async () => {
+ if (!id) return
+ setLoading(true)
+ setError(null)
+ try {
+ const categoryRes = await fetch(`${API_BASE}/categories/${id}?lang=all`)
+ if (!categoryRes.ok) throw new Error('Category not found')
+ const categoryData = await categoryRes.json()
+ setCategory(categoryData)
+ await fetchDetailSections(id)
+ } catch (err: any) {
+ setError(err.message)
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ fetchData()
+ }, [id])
+
+ const syncNativePayload = (field: string, value: unknown) => {
+ setSectionPayload((prev) => {
+ const next = { ...prev, [field]: value }
+ setSectionJson(JSON.stringify(next, null, 2))
+ return next
+ })
+ }
+
+ const syncNativeLocalizedPayload = (field: string, value: string) => {
+ setSectionPayload((prev) => {
+ const current = prev[field]
+ const next = {
+ ...prev,
+ [field]: {
+ ...(current && typeof current === 'object' && !Array.isArray(current) ? current : {}),
+ [activeLang]: value,
+ },
+ }
+ setSectionJson(JSON.stringify(next, null, 2))
+ return next
+ })
+ }
+
+ const getSectionLocalizedValue = (field: string) => {
+ const value = sectionPayload[field]
+ if (typeof value === 'string') return value
+ if (value && typeof value === 'object' && !Array.isArray(value)) {
+ const localized = value as Record
+ return localized[activeLang] || localized.th || localized.en || ''
+ }
+ return ''
+ }
+
+ const openMediaPicker = (onSelect: (url: string) => void) => {
+ setOnSelectMedia(() => onSelect)
+ setIsMediaModalOpen(true)
+ }
+
+ const handleSeedDetailSections = async () => {
+ if (!id) return
+ setSectionsSaving(true)
+ setError(null)
+ try {
+ const response = await fetch(`${API_BASE}/categories/${id}/sections/seed-default`, { method: 'POST' })
+ const data = await response.json().catch(() => null)
+ if (!response.ok) throw new Error(data?.message || 'Failed to seed category detail sections')
+ await fetchDetailSections(id)
+ setSuccess(true)
+ setTimeout(() => setSuccess(false), 2500)
+ } catch (err: any) {
+ setError(err.message)
+ } finally {
+ setSectionsSaving(false)
+ }
+ }
+
+ const handleSaveDetailSection = async () => {
+ if (!id) return
+ setSectionsSaving(true)
+ setError(null)
+ setSectionSaveError(null)
+ try {
+ const payload = CATEGORY_STRUCTURED_SECTION_TYPES.has(sectionType) ? sectionPayload : JSON.parse(sectionJson || '{}')
+ if (sectionType === 'HERO_CAROUSEL') {
+ const validationIssues = validateCategoryHeroCarouselPayload(payload)
+ if (validationIssues.length > 0) throw new Error(validationIssues.join(' '))
+ }
+ const isNewSection = selectedSectionId === 'new'
+ const response = await fetch(
+ isNewSection ? `${API_BASE}/categories/${id}/sections` : `${API_BASE}/categories/sections/${selectedSectionId}`,
+ {
+ method: isNewSection ? 'POST' : 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ type: sectionType, payload, isActive: sectionIsActive }),
+ }
+ )
+ const data = await response.json().catch(() => null)
+ if (!response.ok) throw new Error(getApiErrorMessage(data, 'Failed to save category detail section'))
+ await fetchDetailSections(id)
+ if (data?.section) selectDetailSection(data.section)
+ setSuccess(true)
+ setTimeout(() => setSuccess(false), 2500)
+ } catch (err: any) {
+ const message = err instanceof Error ? err.message : 'Failed to save category detail section'
+ setError(message)
+ setSectionSaveError(message)
+ } finally {
+ setSectionsSaving(false)
+ }
+ }
+
+ const handleDeleteDetailSection = async (section: CategorySection) => {
+ if (!id || section.isLocked) return
+ setSectionsSaving(true)
+ setError(null)
+ try {
+ const response = await fetch(`${API_BASE}/categories/sections/${section.id}`, { method: 'DELETE' })
+ const data = await response.json().catch(() => null)
+ if (!response.ok) throw new Error(data?.message || 'Failed to delete category detail section')
+ await fetchDetailSections(id)
+ } catch (err: any) {
+ setError(err.message)
+ } finally {
+ setSectionsSaving(false)
+ }
+ }
+
+ const handleToggleDetailSection = async (section: CategorySection) => {
+ if (!id || section.isLocked) return
+ setSelectedSectionId(section.id)
+ setSectionsSaving(true)
+ setError(null)
+ try {
+ const response = await fetch(`${API_BASE}/categories/sections/${section.id}`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ type: section.type, payload: section.payload, isActive: !section.isActive }),
+ })
+ const data = await response.json().catch(() => null)
+ if (!response.ok) throw new Error(data?.message || 'Failed to update category detail section')
+ await fetchDetailSections(id)
+ } catch (err: any) {
+ setError(err.message)
+ } finally {
+ setSectionsSaving(false)
+ }
+ }
+
+ const handleMoveDetailSection = async (index: number, direction: -1 | 1) => {
+ if (!id) return
+ const targetIndex = index + direction
+ if (targetIndex < 0 || targetIndex >= detailSections.length) return
+ if (detailSections[index]?.isLocked || detailSections[targetIndex]?.isLocked) return
+
+ const reordered = [...detailSections]
+ const [moved] = reordered.splice(index, 1)
+ reordered.splice(targetIndex, 0, moved)
+ const sections = reordered.map((section, idx) => ({ id: section.id, order: idx + 1 }))
+ setDetailSections(reordered.map((section, idx) => ({ ...section, order: idx + 1 })))
+
+ setSectionsSaving(true)
+ setError(null)
+ try {
+ const response = await fetch(`${API_BASE}/categories/${id}/sections/reorder`, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ sections }),
+ })
+ const data = await response.json().catch(() => null)
+ if (!response.ok) throw new Error(data?.message || 'Failed to reorder category detail sections')
+ await fetchDetailSections(id)
+ } catch (err: any) {
+ setError(err.message)
+ } finally {
+ setSectionsSaving(false)
+ }
+ }
+
+ if (loading) {
+ return (
+
+
+ Loading category CMS...
+
+
+ Error
+ {error}
+
+
+ Back to Categories
+
+
+ {/* Top Header Bar */}
+
+
+
+ Categories
+ /
+ Category CMS
+
+
+ Category CMS {categoryName}
+
+ Manage category detail sections without changing category data.
+
+
+
+
+
+
+
+
+ {/* Notifications */}
+ {success && (
+
+
+ Category CMS updated successfully.
+
+ )}
+
+ {error && (
+
+ )}
+
+ {/* Top 4 Stats Cards */}
+
+
+ Total Blocks
+ {detailSections.length}
+
+
+ Native Blocks
+ {nativeSectionCount}
+
+
+ Hidden
+ {inactiveSectionCount}
+
+
+ Mode
+ {selectedSectionId === 'new' ? 'Create block' : 'Edit selected block'}
+
+
+
+ {/* Main Page Builder Section */}
+
+ {/* Section Header with Language Switcher and Add Block Button */}
+
+
+
+
+ Category Detail Page Builder
+ Start with native blocks. Use content blocks only when this category needs extra storytelling.
+
+
+
+
+ {languages.map((lang) => (
+
+ ))}
+
+ {detailSections.length === 0 && (
+
+ )}
+
+
+
+
+
+
+
+ Native Category Blocks
+
+ These blocks render live category data and are the recommended starting point.
+
+
+ {NATIVE_BLOCKS.map(({ type, label, icon: Icon }) => (
+
+ ))}
+
+
+
+ {/* Left Column: Section Order */}
+
+
+
+ Section Order
+ Move blocks to control the category detail page layout.
+
+
+
+
+ {detailSections.length === 0 && (
+
+
+ No category CMS blocks yet.
+ Seed the standard layout or choose a native block above.
+
+ )}
+
+ {detailSections.map((section, index) => (
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+ {/* Right Column: Editing Block */}
+
+
+
+
+
+ {selectedSectionId === 'new' ? 'New Block' : 'Editing Block'}
+
+ {SECTION_LABELS[sectionType] || sectionType}
+
+ {SECTION_HELP[sectionType] || 'Configure the section payload for this category detail page.'}
+
+
+ {selectedSection?.isLocked && (
+
+
+ Locked
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Block Form Container */}
+
+ {CATEGORY_NATIVE_SECTION_TYPES.has(sectionType) ? (
+
+
+ Native Category Settings
+ These controls affect headers, navigation, and presentation. Live products come from this category.
+
+
+ {sectionType === 'CATEGORY_HEADER' && (
+
+ )}
+
+ {sectionType === 'CATALOG_GRID' && (
+
+ )}
+
+ {sectionType === 'USP_BAR' && (
+
+
+ Renders the 3 USP benefit columns configured for this category.
+
+ )}
+
+ ) : (
+
+
+
+ Category Content Block
+
+ These forms follow the Page Builder block design, but stay scoped to this category.
+
+
+ {sectionType === 'HERO_CAROUSEL' && (
+ {
+ setSectionPayload(nextPayload)
+ setSectionJson(JSON.stringify(nextPayload, null, 2))
+ }}
+ onBrowseMedia={openMediaPicker}
+ />
+ )}
+
+ {sectionType === 'DIVIDER' && (
+ {
+ setSectionPayload(nextPayload)
+ setSectionJson(JSON.stringify(nextPayload, null, 2))
+ }}
+ />
+ )}
+
+ )}
+
+ {/* Bottom Save Bar */}
+
+ {sectionSaveError && (
+
+ )}
+
+
+
+
+
+
+
+ {/* Media Library Modal */}
+ setIsMediaModalOpen(false)}
+ onSelect={(url) => {
+ if (onSelectMedia) onSelectMedia(url)
+ setIsMediaModalOpen(false)
+ }}
+ />
+
+ {/* Add Block Modal (Focused specifically on Hero Carousel and Divider) */}
+ {isAddBlockModalOpen && (
+
+
+
+
+ Add Page Block
+ Choose a section type to insert into this category detail page.
+
+
+
+
+
+ Content Blocks
+
+
+
+
+
+
+ Native Category Blocks
+
+ {NATIVE_BLOCKS.map(({ type, label, icon: Icon }) => (
+
+ ))}
+
+
+
+
+ {layoutType === 'none' ? null : layoutType === 'editorial_hero' ? (
+ /* ── Archetype 2: Editorial Hero Layout ── */
+
+ {heroDesktopUrl && (
+
+ )}
+
+
+ {showBreadcrumb && (
+
+ Home
+ /
+ Shop
+ /
+ {categoryName}
+
+ )}
+
+
+ Curated Aroma Collection
+
+
+
+ {categoryName}
+
+
+ {category._count && (
+
+ Discover {category._count.products} handcrafted scents and artisanal essences designed to elevate your living spaces.
+
+ )}
+
+ ) : layoutType === 'dense_catalog' ? (
+ /* ── Archetype 3: Dense Catalog Layout ── */
+
+
+
+ {showBreadcrumb && (
+
+ Home
+ /
+ Shop
+ /
+ {categoryName}
+
+ )}
+
+ {categoryName}
+ {category._count && (
+
+ {category._count.products} items
+
+ )}
+
+
+
+ High-Density Catalog View
+
+
+ ) : (
+ /* ── Archetype 1: Split Showcase Layout (Default) ── */
+
+
+
+ {showBreadcrumb && (
+
+ Home
+ /
+ Shop
+ /
+ {categoryName}
+
+ )}
+
+ {categoryName}
+ {category._count && {category._count.products} products available in this collection }
+
+
+ {categoryThumbnailUrl && (
+
+
+
+ )}
+
+ )}
+
+ {layoutType === 'none' && showBreadcrumb && (
+
+
+
+ )}
+
+ {showPills && (
+
+
+ {!categoriesResult.ok && (
+
+ Categories unavailable
+
+ )}
+ {categories.map((item) => {
+ const name = resolveLocalized(item.name, lang)
+ const isActive = item.id === category.id
+
+ return (
+
+ {name}
+
+ )
+ })}
+
+
+ )}
+
+ {/* Featured Series Showcase Banner */}
+ {Boolean(category.featuredSeries?.enabled) && (
+
+ )}
+
+ {/* Catalog Container (Filter Sidebar + Toolbar + Grid) */}
+ {products.length === 0 ? (
+
+ No products in this category yet.
+ Back to Shop
+
+ ) : (
+
+ )}
+
+
+
+ )
+
return (
{announcementSections.length > 0 && (
)}
- {heroSections.length > 0 && !(layoutType === 'editorial_hero' && hasArtDirectedHero) ? (
-
- ) : layoutType === 'none' ? (
- /* ── Archetype 4: No Header (ปิดส่วนหัว Archetype) ── */
- null
- ) : layoutType === 'editorial_hero' ? (
- /* ── Archetype 2: Editorial Hero Layout ── */
-
- {heroDesktopUrl && (
-
- 0 ? (
+ /* ── Dynamic Category CMS Layout ── */
+
+ {customSections.map((sec, idx) => {
+ const secPayload = sec.payload && typeof sec.payload === 'object' && !Array.isArray(sec.payload)
+ ? (sec.payload as Record )
+ : undefined
+
+ if (sec.type === 'CATEGORY_HEADER') {
+ return {renderHeaderSection(secPayload)}
+ }
+ if (sec.type === 'CATALOG_GRID') {
+ return {renderCatalogGrid()}
+ }
+ if (sec.type === 'USP_BAR') {
+ return {renderUspBar()}
+ }
+
+ return (
+
-
-
-
-
- Home
- /
- Shop
- /
- {categoryName}
-
+ {renderCatalogGrid()}
+ {renderUspBar()}
-
- Curated Aroma Collection
-
-
-
- {categoryName}
-
-
- {category._count && (
-
- Discover {category._count.products} handcrafted scents and artisanal essences designed to elevate your living spaces.
-
- )}
-
- ) : layoutType === 'dense_catalog' ? (
- /* ── Archetype 3: Dense Catalog Layout ── */
-
-
-
-
- Home
- /
- Shop
- /
- {categoryName}
-
-
- {categoryName}
- {category._count && (
-
- {category._count.products} items
-
- )}
-
-
-
- High-Density Catalog View
-
-
- ) : (
- /* ── Archetype 1: Split Showcase Layout (Default) ── */
-
-
-
-
- Home
- /
- Shop
- /
- {categoryName}
-
-
- {categoryName}
- {category._count && {category._count.products} products available in this collection }
-
-
- {categoryThumbnailUrl && (
-
-
-
- )}
-
- )}
-
-
- {/* Minimal Breadcrumbs when Archetype Header is disabled */}
- {layoutType === 'none' && (
-
- )}
-
- {/* Category Pills Navigation (Per-category Toggle) */}
- {category.filterConfig?.showCategoryNav !== false && (
-
- {!categoriesResult.ok && (
-
- Categories unavailable
-
- )}
- {categories.map((item) => {
- const name = resolveLocalized(item.name, lang)
- const isActive = item.id === category.id
-
- return (
-
- {name}
-
- )
- })}
-
- )}
-
- {/* Featured Series Showcase Banner (Mockup 01 & 03) */}
- {Boolean(category.featuredSeries?.enabled) && (
-
- )}
-
- {/* Catalog Container (Filter Sidebar + Toolbar + Grid) */}
- {products.length === 0 ? (
-
- No products in this category yet.
- Back to Shop
-
- ) : (
-
- )}
-
- {/* Benefits & Support USP Blocks (Mockup 06) */}
-
-
- {bottomSections.length > 0 && (
-
+ {bottomSections.length > 0 && (
+
+ )}
+
)}
| 
+ ) : (
+