"use client"; import { useState, useEffect } from "react" import Image from "next/image"; import { withCDN } from "@/src/lib/utils"; import { ChevronDown, Loader2 } from "lucide-react"; // Import Loader2 here import { fetchClassesAction } from "@/src/lib/actions/classesAction"; import { transformClasses, buildFilterOptions, filterClasses, ALL_FILTER_OPTION } from "@/src/lib/utils/classesMapper"; import type { ClassListingItem } from "@/src/lib/types/classes"; import type { TenantData } from "@/src/lib/types/header"; import ClassListingCardSkeleton from "../ui/skeletons/ClassListingCardSkeleton"; import { useSelectedClass } from "@/src/lib/context/SelectedClassContext"; import { useLocalizedNavigation } from "@/src/lib/hooks/useLocalizedNavigation"; import { useSearchParams } from "next/navigation"; function CustomDropdown({ label, options, value, onChange, onClear, isOpen, onToggle, }: { label: string options: string[] value: string onChange: (val: string) => void onClear: () => void isOpen: boolean onToggle: () => void }) { const isPlaceholder = value === options[0] return (
{/* Trigger */} {/* Dropdown */} {isOpen && (
)}
) } export default function ClassListing({ tenant, hideRegisterButton = false }: { tenant?: TenantData; hideRegisterButton?: boolean }) { const router = useLocalizedNavigation(); const searchParams = useSearchParams(); const { setSelectedClass } = useSelectedClass(); const franchiseeIdFromUrl = searchParams.get("franchiseeId"); // State management const [allClasses, setAllClasses] = useState([]); const [rawClasses, setRawClasses] = useState([]); const [filteredClasses, setFilteredClasses] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [openDropdown, setOpenDropdown] = useState(null); const [values, setValues] = useState>({}); const [visibleMobileCount, setVisibleMobileCount] = useState(4); const [filters, setFilters] = useState>({}); // Track which item is navigating to show loader const [navigatingId, setNavigatingId] = useState(null); // Fetch classes on component mount useEffect(() => { const loadClasses = async () => { try { setLoading(true); setError(null); const response = await fetchClassesAction(tenant?.zoho_franchise_id, franchiseeIdFromUrl); if (!response.success || response.data.length === 0) { setError(response.message || "No classes available"); setAllClasses([]); setRawClasses([]); setFilteredClasses([]); setFilters({}); return; } setRawClasses(response.data); // Transform API data to UI format const transformedClasses = transformClasses(response.data); setAllClasses(transformedClasses); setFilteredClasses(transformedClasses); // Build filter options from data const filterOptions = buildFilterOptions(transformedClasses); setFilters(filterOptions); } catch (err) { const errorMessage = err instanceof Error ? err.message : "Failed to load classes"; setError(errorMessage); console.error("[ClassListing] Error loading classes:", err); } finally { setLoading(false); } }; loadClasses(); }, []); // Apply filters whenever values or allClasses change useEffect(() => { if (allClasses.length === 0) { setFilteredClasses([]); return; } const filtered = filterClasses(allClasses, values); setFilteredClasses(filtered); setVisibleMobileCount(4); }, [values, allClasses]); const handleRegister = (item: ClassListingItem) => { // Set loading state for this specific button setNavigatingId(item.id); // Append #registration-form so the target page knows to scroll router.push(`/class-registration/${item.id}#auto-scroll`); }; // Build filter configuration const filterConfig = Object.entries(filters).map(([label, options]) => ({ label, options: options || [label], })); const MOBILE_STEP = 4; if (loading) return if (error && allClasses.length === 0) { return (

No Classes Found

); } return (
{/* FILTERS */}
{filterConfig.map((filter) => { const currentValue = values[filter.label] ?? filter.options[0]; const isOpen = openDropdown === filter.label; return ( setOpenDropdown(isOpen ? null : filter.label)} onChange={(val) => setValues({ ...values, [filter.label]: val })} onClear={() => setValues({ ...values, [filter.label]: filter.options[0] })} /> ); })}
{filteredClasses.length > 0 && (

See what we have for your child ({filteredClasses.length} classes):

)} {filteredClasses.length === 0 && (

No classes found

We couldn't find any classes matching your selected filters.

)} {/*====================DESKTOP CARDS GRID===================== */} {filteredClasses.length > 0 && (
{filteredClasses.map((item) => (
{/* Ribbon */}
{item.title}

Age:

{item.age}

Number of lesson:

{item.lessons}

{item.priceLabel || "Price per lesson:"}

{item.price}

{/* Header */}

{item.title}

{item.groupName}

{/* Content */}

Study period:
{item.period}

Class time:
{item.time}

Days:
{item.days}

{!hideRegisterButton && ( )}
))}
)} {/*=================Mobile-card-layout=======================*/} {filteredClasses.length > 0 && (
{filteredClasses .slice(0, visibleMobileCount) .map((item) => (
{/* Ribbon */}
{item.title}

Age:

{item.age}

Number of lesson:

{item.lessons}

{item.priceLabel || "Price per lesson:"}

{item.price}

{/* Header */}

{item.title}

{item.groupName}

{/* Content */}

Study period:
{item.period}

Class time:
{item.time}

Days:
{item.days}

{!hideRegisterButton && ( )}
))} {/* ================= Load More (Mobile) ================= */} {visibleMobileCount < filteredClasses.length && (
)}
)}
); }