/* eslint-disable @typescript-eslint/no-explicit-any */ "use client"; import { Button } from "@/src/elements/ui/button"; import { useGetLandingPageQuery, useUpdateLandingPageMutation } from "@/src/redux/api/landingPageApi"; import CommonHeader from "@/src/shared/CommonHeader"; import { LandingPageData } from "@/src/types/landingPage"; import { CreditCard, HelpCircle, Layers, Layout, MessageSquareQuote, Monitor, PhoneCall, RefreshCw, Rocket, Save } from "lucide-react"; import Can from "../shared/Can"; import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; import ContactForm from "./sections/ContactForm"; import FaqForm from "./sections/FaqForm"; import FeaturesForm from "./sections/FeaturesForm"; import FooterForm from "./sections/FooterForm"; import HeroForm from "./sections/HeroForm"; import PlatformForm from "./sections/PlatformForm"; import PricingForm from "./sections/PricingForm"; import TestimonialsForm from "./sections/TestimonialsForm"; const tabs = [ { id: "hero", label: "Hero", icon: Rocket, description: "Main landing header", }, { id: "features", label: "Features", icon: Layers, description: "Highlight key values", }, { id: "platform", label: "Platform", icon: Monitor, description: "Showcase platform features", }, { id: "pricing", label: "Pricing", icon: CreditCard, description: "Subscription plans", }, { id: "testimonials", label: "Testimonials", icon: MessageSquareQuote, description: "Customer feedback", }, { id: "faq", label: "FAQ", icon: HelpCircle, description: "Common questions", }, { id: "contact", label: "Contact", icon: PhoneCall, description: "Get in touch info", }, { id: "footer", label: "Footer", icon: Layout, description: "Social links & legal", }, ] as const; type TabId = (typeof tabs)[number]["id"]; const LandingPageContainer = () => { const { t } = useTranslation(); const { data: landingResponse, isLoading, refetch } = useGetLandingPageQuery(); const [updateLandingPage, { isLoading: isUpdating }] = useUpdateLandingPageMutation(); const [activeTab, setActiveTab] = useState("hero"); const [formData, setFormData] = useState(null); const [isDirty, setIsDirty] = useState(false); useEffect(() => { if (landingResponse?.data) { // eslint-disable-next-line react-hooks/set-state-in-effect setFormData(landingResponse.data); } }, [landingResponse]); const handleSectionChange = (section: keyof LandingPageData, sectionData: any) => { if (!formData) return; setFormData({ ...formData, [section]: sectionData }); setIsDirty(true); }; const handleSave = async () => { if (!formData) return; try { console.log("Prepare Saving Landing Data...", formData); // Prepare payload - extract IDs for plans, testimonials, faqs if they are objects const payload: any = JSON.parse(JSON.stringify(formData)); // Deep clone to avoid mutating state if (payload.pricing_section && Array.isArray(payload.pricing_section.plans)) { payload.pricing_section.plans = payload.pricing_section.plans .map((p: any) => { if (!p) return null; if (typeof p === "string") return p; return p?._id?._id || p?._id || p; }) .filter(Boolean); } if (payload.testimonials_section && Array.isArray(payload.testimonials_section.testimonials)) { payload.testimonials_section.testimonials = payload.testimonials_section.testimonials .map((t: any) => { if (!t) return null; if (typeof t === "string") return t; return t?._id?._id || t?._id || t; }) .filter(Boolean); } if (payload.faq_section && Array.isArray(payload.faq_section.faqs)) { payload.faq_section.faqs = payload.faq_section.faqs .map((f: any) => { if (!f) return null; if (typeof f === "string") return f; return f?._id?._id || f?._id || f; }) .filter(Boolean); } if (payload.platform_section && Array.isArray(payload.platform_section.items)) { payload.platform_section.items = payload.platform_section.items.map((item: any, index: number) => ({ ...item, step: index + 1, })); } console.log("Final Payload for API:", payload); const result = await updateLandingPage(payload).unwrap(); console.log("Update Result:", result); setIsDirty(false); toast.success("Landing page updated successfully"); refetch(); } catch (error: any) { console.error("Landing Page Update Crash/Error:", error); toast.error(error?.data?.message || error?.message || "Failed to update landing page"); } }; const renderActiveTab = () => { if (!formData) return null; switch (activeTab) { case "hero": return handleSectionChange("hero_section", data)} />; case "features": return handleSectionChange("features_section", data)} />; case "platform": return handleSectionChange("platform_section", data)} />; case "pricing": return handleSectionChange("pricing_section", data)} />; case "testimonials": return handleSectionChange("testimonials_section", data)} />; case "faq": return handleSectionChange("faq_section", data)} />; case "contact": return handleSectionChange("contact_section", data)} />; case "footer": return handleSectionChange("footer_section", data)} />; default: return null; } }; const activeTabInfo = tabs.find((t) => t.id === activeTab)!; return (
{/* Left Navigation */} {/* Form Content Area */}
{/* Section Header Card */}

{t(`landing_page.tabs.${activeTab}`)} {t("landing_page.configuration")}

{t(`landing_page.tabs.${activeTab}_desc`)} {t("landing_page.global_appearance")}

{isDirty && (
{t("common.draft")}
)}
{isLoading ? (

Synchronizing...

Fetching appearance settings

) : (
{renderActiveTab()}
)}
); }; export default LandingPageContainer;