"use client"; import { useEffect, useMemo, useState, type ReactNode } from "react"; import Link from "next/link"; import { usePathname, useRouter } from "next/navigation"; import Sidebar from "@/components/Sidebar"; import Footer from "@/components/Footer"; import BackgroundGradients from "@/components/BackgroundGradients"; import staticCopy from "@/i18n/staticCopy.json"; import { DEFAULT_LOCALE, getStoredLocale, LOCALE_CHANGE_EVENT, type LocaleCode, } from "@/i18n/localeSwitcher"; const STATUS_STYLES: Record = { Delivered: "bg-[#008000]/10 border border-[#008000]/50 text-[#008000]", "In Transit": "bg-[#155DFC]/10 border border-[#155DFC]/50 text-[#155DFC]", "Out for Delivery": "bg-[#155DFC]/10 border border-[#155DFC]/50 text-[#155DFC]", Pending: "bg-[#CB8601]/10 border border-[#CB8601]/50 text-[#CB8601]", Confirmed: "bg-[#F7FAF8] border border-[#053F31]/50 text-[#053F31]", Cancelled: "bg-[#FE3D45]/10 border border-[#FE3D45]/50 text-[#FE3D45]", }; type StoreOrderRow = { id: string; order_no: string; product_name: string; buyer_location: string; quantity_label: string; amount_label: string; date_label: string; status_label: string; derived_status?: string; status?: string; detail_id?: string; }; const PER_PAGE = 8; const ORDERS_LIST_PATH = "/store/customers/my-orders"; function normalizeDerived(o: StoreOrderRow) { return (o.derived_status || o.status || "").toLowerCase(); } function extractOrdersPayload(json: unknown): StoreOrderRow[] { if (!json || typeof json !== "object") return []; const o = json as Record; const raw = o.orders ?? (o.data as Record | undefined)?.orders; return Array.isArray(raw) ? (raw as StoreOrderRow[]) : []; } type StatusFilterOption = { value: string; label: string }; function parseStatusFilterItems(raw: unknown): StatusFilterOption[] { if (!Array.isArray(raw)) return []; return raw.filter( (item): item is StatusFilterOption => !!item && typeof item === "object" && typeof (item as StatusFilterOption).value === "string" && typeof (item as StatusFilterOption).label === "string" ); } function extractStatusFilters(json: unknown): StatusFilterOption[] { if (!json || typeof json !== "object") return []; const o = json as Record; const dataVal = o.data; const data = dataVal && typeof dataVal === "object" && !Array.isArray(dataVal) ? (dataVal as Record) : undefined; const fromFilters = (filters: unknown) => filters && typeof filters === "object" && !Array.isArray(filters) ? parseStatusFilterItems((filters as Record).statuses) : []; const candidates: unknown[] = [ o.filters && typeof o.filters === "object" ? (o.filters as Record).statuses : undefined, data?.filters && typeof data.filters === "object" ? (data.filters as Record).statuses : undefined, o.statuses, data?.statuses, ]; for (const raw of candidates) { const parsed = parseStatusFilterItems(raw); if (parsed.length > 0) return parsed; } return []; } function parseProductFilterItems(raw: unknown): string[] { if (!Array.isArray(raw)) return []; return raw.filter((item): item is string => typeof item === "string" && item.trim().length > 0); } function extractProductFilters(json: unknown): string[] { if (!json || typeof json !== "object") return []; const o = json as Record; const dataVal = o.data; const data = dataVal && typeof dataVal === "object" && !Array.isArray(dataVal) ? (dataVal as Record) : undefined; const candidates: unknown[] = [ o.filters && typeof o.filters === "object" ? (o.filters as Record).products : undefined, data?.filters && typeof data.filters === "object" ? (data.filters as Record).products : undefined, o.products, data?.products, ]; for (const raw of candidates) { const parsed = parseProductFilterItems(raw); if (parsed.length > 0) return parsed; } return []; } type DayFilterOption = { value: string; label: string }; function parseDayFilterItems(raw: unknown): DayFilterOption[] { if (!Array.isArray(raw)) return []; return raw.filter( (item): item is DayFilterOption => !!item && typeof item === "object" && typeof (item as DayFilterOption).value === "string" && typeof (item as DayFilterOption).label === "string" ); } function extractDayFilters(json: unknown): DayFilterOption[] { if (!json || typeof json !== "object") return []; const o = json as Record; const dataVal = o.data; const data = dataVal && typeof dataVal === "object" && !Array.isArray(dataVal) ? (dataVal as Record) : undefined; const candidates: unknown[] = [ o.filters && typeof o.filters === "object" ? (o.filters as Record).days : undefined, data?.filters && typeof data.filters === "object" ? (data.filters as Record).days : undefined, o.days, data?.days, ]; for (const raw of candidates) { const parsed = parseDayFilterItems(raw); if (parsed.length > 0) return parsed; } return []; } function IconSearch() { return ( ); } function IconChevronDown() { return ( ); } function IconLocation() { return ( ); } function IconChevronLeft() { return ( ); } function IconChevronRight() { return ( ); } function IconChevronRightSmall() { return ( ); } function formatStatCount(n: number) { return n >= 100 ? String(n) : String(n).padStart(2, "0"); } function IconStatTotal() { return ( ); } function IconStatPending() { return ( ); } function IconStatTransit() { return ( ); } function IconStatDelivered() { return ( ); } function IconStatCancelled() { return ( ); } function OrderStatCard({ title, value, classNameBg, classNameBorder, titleClass, icon, }: { title: string; value: string; classNameBg: string; classNameBorder: string; titleClass: string; icon: ReactNode; }) { return (
{title} {value}
{icon}
); } const MARKETPLACE_ZIGZAG_COUNT = 3; const OrdersPage = () => { const router = useRouter(); const pathname = usePathname(); const [search, setSearch] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [statusFilterOptions, setStatusFilterOptions] = useState([]); const [productFilter, setProductFilter] = useState("all"); const [productFilterOptions, setProductFilterOptions] = useState([]); const [dateFilter, setDateFilter] = useState("all"); const [dateFilterOptions, setDateFilterOptions] = useState([]); const [page, setPage] = useState(1); const [expandedIndex, setExpandedIndex] = useState(0); const [orders, setOrders] = useState([]); const [ordersLoading, setOrdersLoading] = useState(true); const [cardsData, setCardsData] = useState>({}); const [uiLocale, setUiLocale] = useState(DEFAULT_LOCALE); useEffect(() => { const syncLocale = () => setUiLocale(getStoredLocale()); syncLocale(); window.addEventListener("storage", syncLocale); window.addEventListener(LOCALE_CHANGE_EVENT, syncLocale); return () => { window.removeEventListener("storage", syncLocale); window.removeEventListener(LOCALE_CHANGE_EVENT, syncLocale); }; }, []); const t = staticCopy.ordersPage[uiLocale as keyof typeof staticCopy.ordersPage] ?? staticCopy.ordersPage["en-EN"]; useEffect(() => { const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL; if (!base) { setOrders([]); setOrdersLoading(false); return; } const qs = new URLSearchParams(); if (dateFilter && dateFilter !== "all") qs.set("days", dateFilter); if (statusFilter && statusFilter !== "all") qs.set("status", statusFilter); if (productFilter && productFilter !== "all") qs.set("product", productFilter); const q = search.trim(); if (q) { qs.set("q", q); const hasOtherFilter = qs.has("days") || qs.has("status") || qs.has("product"); qs.set("limit", hasOtherFilter ? "5" : "10"); } const queryString = qs.toString(); const pageUrl = queryString ? `${pathname}?${queryString}` : pathname; router.replace(pageUrl, { scroll: false }); let cancelled = false; const load = async () => { setOrdersLoading(true); try { const headers: Record = { "Content-Type": "application/json", "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "", }; try { const raw = typeof window !== "undefined" ? localStorage.getItem("currentUser") : null; const user = raw ? JSON.parse(raw) : null; const authTok = String(user?.token ?? user?.access_token ?? "").trim(); if (authTok) headers.Authorization = `Bearer ${authTok}`; } catch { } const apiUrl = queryString ? `${base}${ORDERS_LIST_PATH}?${queryString}` : `${base}${ORDERS_LIST_PATH}`; const res = await fetch(apiUrl, { method: "GET", headers, credentials: "include", cache: "no-store", }); const json = await res.json().catch(() => ({})); if (cancelled) return; const list = res.ok ? extractOrdersPayload(json) : []; const statuses = res.ok ? extractStatusFilters(json) : []; const products = res.ok ? extractProductFilters(json) : []; const days = res.ok ? extractDayFilters(json) : []; const cards = res.ok ? (json.cards as Record) || {} : {}; setOrders(list); setCardsData(cards); setStatusFilterOptions( statuses.length > 0 ? statuses : [{ value: "all", label: t.allStatus }] ); setProductFilterOptions(products); setDateFilterOptions( days.length > 0 ? days : [ { value: "7", label: t.last7Days }, { value: "15", label: t.last15Days }, { value: "30", label: t.last30Days }, { value: "all", label: t.allTime }, ] ); setPage(1); } catch { if (!cancelled) { setOrders([]); setPage(1); } } finally { if (!cancelled) setOrdersLoading(false); } }; void load(); return () => { cancelled = true; }; }, [dateFilter, statusFilter, productFilter, search, pathname, router, uiLocale]); const orderSummary = useMemo(() => { if (cardsData && Object.keys(cardsData).length > 0) { return { total: cardsData.total_orders?.value || 0, pending: cardsData.pending?.value || 0, inTransit: cardsData.in_transit?.value || 0, delivered: cardsData.delivered?.value || 0, cancelled: cardsData.cancelled?.value || 0, }; } const list = orders; const pending = list.filter((o) => { const n = normalizeDerived(o); return n === "pending" || n === "confirmed" || n === "processing"; }).length; const inTransit = list.filter((o) => { const n = normalizeDerived(o); return n.includes("transit") || n === "shipped" || n === "fulfilling"; }).length; const delivered = list.filter((o) => { const n = normalizeDerived(o); return n === "delivered" || n === "completed"; }).length; const cancelled = list.filter((o) => { const n = normalizeDerived(o); return n === "cancelled" || n === "canceled"; }).length; return { total: list.length, pending, inTransit, delivered, cancelled, }; }, [orders, cardsData]); const totalOrdersCount = orders.length; const totalPages = Math.max(1, Math.ceil(totalOrdersCount / PER_PAGE)); const start = totalOrdersCount === 0 ? 0 : (page - 1) * PER_PAGE + 1; const end = Math.min(page * PER_PAGE, totalOrdersCount); const paginatedOrders = useMemo( () => orders.slice((page - 1) * PER_PAGE, page * PER_PAGE), [orders, page] ); const paginationSlots: (number | "ellipsis")[] = (() => { if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1); const slots: (number | "ellipsis")[] = []; if (page <= 4) { for (let p = 1; p <= 5; p++) slots.push(p); slots.push("ellipsis"); slots.push(totalPages); } else if (page >= totalPages - 3) { slots.push(1); slots.push("ellipsis"); for (let p = totalPages - 4; p <= totalPages; p++) slots.push(p); } else { slots.push(1); slots.push("ellipsis"); for (let p = page - 1; p <= page + 1; p++) slots.push(p); slots.push("ellipsis"); slots.push(totalPages); } return slots; })(); const showingOrdersText = t.showingOrders .replace("{start}", String(start)) .replace("{end}", String(end)) .replace("{count}", String(totalOrdersCount)); return ( <>
{t.pageTitle}
} /> } /> } /> } /> } />
setSearch(e.target.value)} className="flex-1 min-w-0 rounded-l-[10px] border border-[#E6E6E6] bg-white px-4 py-3 font-outfit text-[#424242] placeholder:text-[#757575] focus:outline-none focus:ring-2 focus:ring-[#053F31]/20 focus:border-[#053F31]" />
{t.colOrderNumber} {t.colProduct}
{ordersLoading ? (
{t.loadingOrders}
) : paginatedOrders.length === 0 ? (
{t.noOrdersFound}
) : ( paginatedOrders.map((order, i) => (
{expandedIndex === i && (
{t.labelLocation} {order.buyer_location}
{t.labelQuantity} {order.quantity_label}
{t.labelAmount} {order.amount_label}
{t.labelDate} {order.date_label}
{t.labelStatus} {order.status_label === "Out for Delivery" ? t.statusOutForDeliveryAs : order.status_label}
{t.labelAction} {t.viewDetails}
)}
)) )}
{totalOrdersCount > 0 ? (

{showingOrdersText}

{paginationSlots.map((slot, i) => slot === "ellipsis" ? ( … ) : ( ) )}
) : null}
{ordersLoading ? ( ) : paginatedOrders.length === 0 ? ( ) : ( paginatedOrders.map((order) => ( )) )}
{t.colOrderNumber} {t.colProduct} {t.colLocation} {t.colQuantity} {t.colAmount} {t.colDate} {t.colStatus} {t.colActions}
{t.loadingOrders}
{t.noOrdersFound}
{order.order_no} {order.product_name} {order.buyer_location} {order.quantity_label} {order.amount_label} {order.date_label} {order.status_label === "Out for Delivery" ? t.statusOutForDeliveryAs : order.status_label} {t.viewDetails}
{totalOrdersCount > 0 ? (

{showingOrdersText}

{paginationSlots.map((slot, i) => slot === "ellipsis" ? ( … ) : ( ) )}
) : null}