diff --git a/apps/admin/src/pages/PageBuilderPage.tsx b/apps/admin/src/pages/PageBuilderPage.tsx index 9c94452..c14afa7 100644 --- a/apps/admin/src/pages/PageBuilderPage.tsx +++ b/apps/admin/src/pages/PageBuilderPage.tsx @@ -134,6 +134,50 @@ export default function PageBuilderPage() { }); }; + // Accordion Localization Helpers + const getLocalizedAccordionValue = (item: any, field: string) => { + if (!item || item[field] === undefined) return ''; + const val = item[field]; + if (typeof val === 'string') return editingLang === 'th' ? val : ''; + return val[editingLang] || ''; + }; + + const updateAccordionCategory = (catIdx: number, field: string, value: string) => { + setEditingSection((prev: any) => { + const categories = [...(prev.payload?.categories || [])]; + const cat = categories[catIdx] || {}; + if (field === 'icon') { + categories[catIdx] = { ...cat, [field]: value }; + } else { + let newVal; + if (typeof cat[field] === 'string') { + newVal = { th: cat[field], [editingLang]: value }; + } else { + newVal = { ...(cat[field] || {}), [editingLang]: value }; + } + categories[catIdx] = { ...cat, [field]: newVal }; + } + return { ...prev, payload: { ...(prev.payload || {}), categories } }; + }); + }; + + const updateAccordionQuestion = (catIdx: number, qIdx: number, field: string, value: string) => { + setEditingSection((prev: any) => { + const categories = [...(prev.payload?.categories || [])]; + const cat = categories[catIdx] || { questions: [] }; + const questions = [...(cat.questions || [])]; + const q = questions[qIdx] || {}; + let newVal; + if (typeof q[field] === 'string') { + newVal = { th: q[field], [editingLang]: value }; + } else { + newVal = { ...(q[field] || {}), [editingLang]: value }; + } + questions[qIdx] = { ...q, [field]: newVal }; + categories[catIdx] = { ...cat, questions }; + return { ...prev, payload: { ...(prev.payload || {}), categories } }; + }); + }; const [pages, setPages] = useState([]); const [selectedPageId, setSelectedPageId] = useState(null); @@ -507,6 +551,35 @@ export default function PageBuilderPage() { textAlign: 'center' }; break; + case 'ACCORDION': + defaultPayload = { + title: 'Frequently Asked Questions', + categories: [ + { + name: 'General', + icon: 'HelpCircle', + questions: [ + { q: 'What is this?', a: 'This is an example.' } + ] + } + ] + }; + break; + case 'CONTACT_INFO': + defaultPayload = { + title: 'Contact Us', + address: '123 Street Name', + email: 'hello@example.com', + line: '@example', + hours: 'Mon-Fri 9AM-5PM' + }; + break; + case 'CONTACT_FORM': + defaultPayload = { + title: 'Get In Touch', + subtitle: 'We would love to hear from you.' + }; + break; } setEditingSection(prev => { @@ -738,7 +811,7 @@ export default function PageBuilderPage() { )}

- {getAdminDisplayString(section.payload?.title || section.payload?.tagline || (section.type === 'ANNOUNCEMENT_BAR' && section.payload?.slides?.[0])) || `Block #${section.id}`} + {getAdminDisplayString(section.payload?.title || section.payload?.tagline || (section.type === 'ANNOUNCEMENT_BAR' ? section.payload?.slides?.[0] : undefined)) || `Block #${section.id}`}

{section.type === 'PRODUCTS' && (

@@ -790,8 +863,8 @@ export default function PageBuilderPage() { {/* Editor Modal */} {isModalOpen && editingSection && ( -

-
+
+

@@ -824,7 +897,8 @@ export default function PageBuilderPage() { ))}

-
+ +
{!editingSection.id && (
@@ -842,6 +916,9 @@ export default function PageBuilderPage() { + + +
)} @@ -1744,7 +1821,213 @@ export default function PageBuilderPage() {
)} -
+ {editingSection.type === 'ACCORDION' && ( +
+
+ + updateLocalizedValue('title', e.target.value)} + className="admin-input w-full" + /> +
+ +
+
+ + +
+ + {(editingSection.payload?.categories || []).map((cat: any, cIdx: number) => ( +
+
+ updateAccordionCategory(cIdx, 'icon', e.target.value)} + className="admin-input w-16 text-center text-xl" + placeholder="Emoji" + /> + updateAccordionCategory(cIdx, 'name', e.target.value)} + className="admin-input flex-1" + placeholder="Category Name" + /> + +
+ +
+ {(cat.questions || []).map((q: any, qIdx: number) => ( +
+
+
+
+ + updateAccordionQuestion(cIdx, qIdx, 'q', e.target.value)} + className="admin-input w-full text-xs" + placeholder="What is..." + /> +
+
+ +