diff --git a/src/app/faq/page.tsx b/src/app/faq/page.tsx index 30dd5aa..aac0432 100644 --- a/src/app/faq/page.tsx +++ b/src/app/faq/page.tsx @@ -1,11 +1,13 @@ 'use client'; import Image from 'next/image'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { CommonHeader } from '@/components/layout/CommonHeader'; import { Footer } from '@/components/layout/Footer'; +import { cmsService } from '@/services/cms.service'; +import { FaqContent, FaqCategoryItem, FaqItem, CmsContentRecord } from '@/types/cms'; -const categories = [ +const defaultCategories: FaqCategoryItem[] = [ { id: 'all', label: 'All Questions' }, { id: 'agent', label: 'Agent Resources' }, { id: 'buying', label: 'Buying a Home' }, @@ -13,7 +15,7 @@ const categories = [ { id: 'platform', label: 'Platform & Account' }, ]; -const faqs = [ +const defaultFaqs: FaqItem[] = [ { id: 1, icon: '/assets/icons/home-icon.svg', @@ -58,10 +60,54 @@ const faqs = [ }, ]; +const defaultPageTitle = 'Frequently Asked Questions ?'; +const defaultSupportTitle = 'Still Need Help ?'; +const defaultSupportDescription = 'Our Support Team Is Available\nMon-Fri, 9am-6pm IST'; + export default function FAQPage() { const [activeCategory, setActiveCategory] = useState('all'); const [expandedFaq, setExpandedFaq] = useState(1); + const [pageTitle, setPageTitle] = useState(defaultPageTitle); + const [categories, setCategories] = useState(defaultCategories); + const [faqs, setFaqs] = useState(defaultFaqs); + const [supportTitle, setSupportTitle] = useState(defaultSupportTitle); + const [supportDescription, setSupportDescription] = useState(defaultSupportDescription); + + useEffect(() => { + async function loadCmsContent() { + try { + const records: CmsContentRecord[] = await cmsService.getPageContent('faq'); + const faqRecord = records.find((r) => r.sectionKey === 'faqContent'); + if (faqRecord) { + const content = faqRecord.content as FaqContent; + if (content.pageTitle) { + setPageTitle(content.pageTitle); + } + if (content.categories && content.categories.length > 0) { + // Always prepend "All Questions" category + const hasAll = content.categories.some((c) => c.id === 'all'); + const cmsCategories = hasAll ? content.categories : [{ id: 'all', label: 'All Questions' }, ...content.categories]; + setCategories(cmsCategories); + } + if (content.faqs && content.faqs.length > 0) { + setFaqs(content.faqs); + setExpandedFaq(content.faqs[0]?.id ?? null); + } + if (content.supportTitle) { + setSupportTitle(content.supportTitle); + } + if (content.supportDescription) { + setSupportDescription(content.supportDescription); + } + } + } catch { + // Keep defaults on error + } + } + loadCmsContent(); + }, []); + const filteredFaqs = activeCategory === 'all' ? faqs : faqs.filter(faq => faq.category === activeCategory); @@ -124,7 +170,7 @@ export default function FAQPage() {
{/* Title */}

- Frequently Asked Questions ? + {pageTitle}

{/* FAQ Accordion */} @@ -140,12 +186,24 @@ export default function FAQPage() { onClick={() => toggleFaq(faq.id)} className="w-full px-6 py-5 flex items-center gap-4 text-left" > - + {faq.icon && ( + faq.icon.startsWith('/') ? ( + + ) : ( + + ) + )} {faq.question} @@ -176,11 +234,10 @@ export default function FAQPage() {

- Still Need Help ? + {supportTitle}

-

- Our Support Team Is Available
- Mon-Fri, 9am-6pm IST +

+ {supportDescription}

diff --git a/src/types/cms.ts b/src/types/cms.ts index e5ee27e..4d690a5 100644 --- a/src/types/cms.ts +++ b/src/types/cms.ts @@ -103,6 +103,27 @@ export interface AboutCtaContent { buttonText: string; } +export interface FaqCategoryItem { + id: string; + label: string; +} + +export interface FaqItem { + id: number; + icon: string; + question: string; + answer: string; + category: string; +} + +export interface FaqContent { + pageTitle: string; + categories: FaqCategoryItem[]; + faqs: FaqItem[]; + supportTitle: string; + supportDescription: string; +} + export interface CmsContentRecord { id: string; pageSlug: string;