"use client"; import { TEXT } from "@/branding"; import { useAppSettings } from "@/lib/settingsContext"; import { useState, useEffect, useRef, useCallback } from "react"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { FiPackage, FiChevronRight, FiCheck, FiChevronDown, FiMapPin, FiUser, FiNavigation, FiX, FiRefreshCw, FiClock, } from "react-icons/fi"; import { useAuthStore } from "@/store/authStore"; import { orderService } from "@/services/orderService"; import { isPlaceholderImage } from "@/lib/utils"; import SafeImage from "@/components/ui/SafeImage"; import { cartService } from "@/services/cartService"; import { Order } from "@/types"; import toast from "react-hot-toast"; const ORDER_STATUSES = TEXT.orders.statusLabels; const statusColor = (v: number) => { if (v === 6) return "bg-green-500"; if (v === 7 || v === 8) return "bg-gray-300"; if (v === 5) return "bg-blue-500"; return "bg-amber-400"; }; /* ── Track Order Modal ─────────────────────────────────────────────────────── */ function TrackModal({ order, onClose }: { order: Order; onClose: () => void }) { const delivery = order.delivery_assignment?.[0]; const address = order.address?.[0]; return (
e.stopPropagation()} > {/* Map area */}
KUDASAN 📍 🛵
{["+", "−"].map((s) => ( ))}
{/* Delivery info */}
{delivery ? (
{delivery.delivery_boy_image && !isPlaceholderImage(delivery.delivery_boy_image) ? ( ) : (
)}

{delivery.delivery_boy_full_name ?? "Delivery Partner"}

{delivery.vehicle_name && ( 🛵 {delivery.vehicle_name} )} {delivery.vehicle_number && ( {delivery.vehicle_number} )}
{delivery.delivery_boy_number && ( 📞 )}
) : (

{TEXT.orders.deliveryPartnerUnassigned}

)}
{TEXT.orders.orderIdPrefix}: {order.group_order_id}
{address && (

{[address.address, address.area, address.city, address.state] .filter(Boolean) .join(", ")}

)}
); } function OrderCard({ order, onTrack, onView, onReorder, isReordering, }: { order: Order; onTrack?: (order: Order) => void; onView?: (order: Order) => void; onReorder?: (order: Order) => void; isReordering?: boolean; }) { const { settings } = useAppSettings(); const status = order.order_status ?? 1; const label = ORDER_STATUSES.find((s) => s.value === status)?.label ?? ""; const items = order.items ?? []; const isEnd = status === 6 || status === 7 || status === 8; return (
{/* Card header — tapping this opens details */}
onView?.(order)} className="flex items-center justify-between px-4 pt-4 pb-3 cursor-pointer" >
{items[0]?.item_image && !isPlaceholderImage(items[0].item_image) ? ( ) : (
)}
{isEnd ? ( ) : ( )}

{label}

{order.order_date_time}

{settings.currencyCode} {order.total_payable_amount}
{items.length > 1 && (
onView?.(order)} > {items.slice(0, 6).map((item, i) => (
{item.item_image && !isPlaceholderImage(item.item_image) ? ( ) : (
)}
))} {items.length > 6 && (
+{items.length - 6}
)}
)} {/* Bottom actions */}
{status === 5 && ( )} {status === 6 && ( )} {status !== 5 && status !== 6 && ( )} {/* Reorder — only for completed orders */} {status === 6 && ( )}
); } function OrderDetails({ order, onClose, }: { order: Order; onClose: () => void; }) { const { settings } = useAppSettings(); const address = order.address?.[0]; const items = order.items ?? []; const [downloading, setDownloading] = useState(false); const downloadInvoice = async () => { try { setDownloading(true); const res = await orderService.downloadInvoice(order.group_order_id); if (res?.result?.pdf_url) { window.open(res.result.pdf_url, "_blank"); } } catch (err) { console.error("Download failed", err); } finally { setDownloading(false); } }; return (
{/* Header */}

{TEXT.orders.orderIdPrefix} {order.group_order_id}

{/* Items */}

{TEXT.orders.itemsHeading}

{items.map((item) => (

{item.item_name}

{TEXT.orders.qty}: {item.order_quantity}

₹{item.order_quantity_amount}

))}
{/* Delivery schedule */}

{TEXT.orders.deliverySchedule}

{order.delivery_type === 1 ? [ order.scheduled_delivery_date && new Date(order.scheduled_delivery_date).toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric", }), order.delivery_slot_capacity, ] .filter(Boolean) .join(" • ") : TEXT.deliverySlot.asap}

{order.order_notes && (

📝 {order.order_notes}

)}
{/* Address */} {address && (

{TEXT.orders.deliveryAddress}

{[ address.address, address.area, address.city, address.state, address.pincode, ] .filter(Boolean) .join(", ")}

)} {/* Order Summary */}
{TEXT.orders.itemsTotal} {settings.currencyCode} {order.item_total}
{TEXT.orders.deliveryCharges} {settings.currencyCode} {order.delivery_charges}
{TEXT.common.discount} -{settings.currencyCode} {order.discount_amount}
{TEXT.orders.totalPaid} {settings.currencyCode} {order.total_payable_amount}
{/* Actions */}
{order.order_status === 6 && ( )}
); } export default function OrdersClient() { const { isAuthenticated, openModal } = useAuthStore(); const router = useRouter(); const [statusFilter, setStatusFilter] = useState(0); const [dropOpen, setDropOpen] = useState(false); const [allOrders, setAllOrders] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [hasMore, setHasMore] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isAppending, setIsAppending] = useState(false); const [trackingOrder, setTrackingOrder] = useState(null); const [selectedOrder, setSelectedOrder] = useState(null); const [reorderingId, setReorderingId] = useState(null); const dropRef = useRef(null); /* ── Core fetch — append=false replaces, append=true appends ── */ const fetchOrders = useCallback( async (page: number, status: number, append: boolean) => { try { const res = await orderService.getCustomerOrders(status, page); const incoming: Order[] = res.result ?? []; setHasMore(!!res.more_page); setCurrentPage(page); if (append) { setAllOrders((prev) => { const ids = new Set(prev.map((o) => o.id)); const newItems = incoming.filter((o) => !ids.has(o.id)); return [...prev, ...newItems]; }); } else { setAllOrders(incoming); } } catch { // silently handle fetch error — UI already shows empty state } finally { setIsLoading(false); setIsAppending(false); } }, [], ); /* Initial load + on filter change */ useEffect(() => { if (!isAuthenticated) return; setIsLoading(true); setAllOrders([]); setCurrentPage(1); setHasMore(false); fetchOrders(1, statusFilter, false); }, [statusFilter, isAuthenticated, fetchOrders]); /* Outside click closes dropdown */ useEffect(() => { const handler = (e: MouseEvent) => { if (dropRef.current && !dropRef.current.contains(e.target as Node)) setDropOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); const handleLoadMore = () => { if (isAppending) return; const next = currentPage + 1; setIsAppending(true); fetchOrders(next, statusFilter, true); // append=true }; const handleSelect = (value: number) => { if (value === statusFilter) { setDropOpen(false); return; } setStatusFilter(value); setDropOpen(false); }; const handleReorder = async (order: Order) => { const items = order.items ?? []; if (!items.length) return; setReorderingId(order.id); try { for (const item of items) { await cartService.addToCart( item.item_id ?? item.id, item.order_quantity ?? item.quantity ?? 1, item.item_price ?? item.price ?? 0, "", ); } toast.success(TEXT.orders.reorderSuccess); router.push("/checkout"); } catch { toast.error(TEXT.orders.reorderFailed); } finally { setReorderingId(null); } }; const selectedLabel = ORDER_STATUSES.find((s) => s.value === statusFilter)?.label ?? "All Orders"; if (!isAuthenticated) { return (

{TEXT.account.viewOrders}

{TEXT.account.ordersSignInSub}

); } return ( <> {trackingOrder && ( setTrackingOrder(null)} /> )}
{/* Header + filter row */}

{TEXT.account.myOrder}

{/* Status filter dropdown */}
{dropOpen && (
{ORDER_STATUSES.map((s) => ( ))}
)}
{/* Loading skeleton */} {isLoading && (
{Array.from({ length: 4 }).map((_, i) => (
))}
)} {/* Empty state */} {!isLoading && allOrders.length === 0 && (

{TEXT.account.noOrders}

{TEXT.account.noOrdersSub}

{TEXT.common.startShopping}
)} {/* Orders list */} {!isLoading && allOrders.length > 0 && ( <>
{allOrders.map((order) => ( ))}
{/* Load more */} {hasMore && (
)} )} {selectedOrder && ( setSelectedOrder(null)} /> )}
); }