"use client"; import Link from "next/link"; import { useRouter, useSearchParams } from "next/navigation"; import { useEffect, useRef, useState } from "react"; import OrderVisionBoardCapture from "../order/OrderVisionBoardCapture"; import { FormButton } from "@/app/components/form/forms"; import { getApiClient } from "@/utils/apiClient"; import DialogModal from "@/app/components/common/DialogModal"; import PageTransitionLoader from "@/app/components/PageTransitionLoader"; import { toast } from "react-toastify"; import CustomDropdown from "@/app/components/form/CustomDropdown"; import withAuth from "@/app/hook/withAuth"; type ModalKey = string | null; function SummaryRow({ label, value }: { label: string; value: string }) { return (
{label} ${value}
); } const STATUS_OPTIONS = [ { label: "All", value: "all" }, { label: "Draft", value: "DRAFT" }, { label: "Awaiting Response", value: "AWAITING_RESPONSE" }, { label: "Accepted", value: "ACCEPTED" }, { label: "Declined", value: "DECLINED" }, { label: "Order Initiated", value: "ORDERED" }, ]; const STATUS_PILL: Record = { DRAFT: { label: "Draft", className: "bg-gray-100 text-gray-600" }, AWAITING_RESPONSE: { label: "Awaiting Response", className: "bg-amber-100 text-amber-700", }, ACCEPTED: { label: "Accepted", className: "bg-green-100 text-green-700" }, DECLINED: { label: "Declined", className: "bg-red-100 text-red-700" }, ORDERED: { label: "Order Initiated", className: "bg-blue-100 text-blue-700" }, }; function getStatusDescription(product: any): string { switch (product.status) { case "DRAFT": return "Draft (incomplete vision)"; case "AWAITING_RESPONSE": if (product.is_owner) { const name = product.shared_with_name || ""; const email = product.shared_with_email ? `(${product.shared_with_email})` : ""; return `Sent to ${name} ${email}`.trim(); } return `Shared with you by ${product.sender_name || product.sender_email || ""}`.trim(); case "ACCEPTED": if (product.is_owner) { const name = product.shared_with_name || ""; const email = product.shared_with_email ? `(${product.shared_with_email})` : ""; return `Accepted by ${name} ${email}`.trim(); } return `Accepted — shared by ${product.sender_name || product.sender_email || ""}`.trim(); case "DECLINED": if (product.is_owner || product.shared_with_name || product.shared_with_email) { const name = product.shared_with_name || ""; const email = product.shared_with_email ? `(${product.shared_with_email})` : ""; return `Declined by ${name} ${email}`.trim(); } return `Declined — shared by ${product.sender_name || product.sender_email || ""}`.trim(); case "ORDERED": if (product.is_owner || product.shared_with_name || product.shared_with_email) { const name = product.shared_with_name || ""; const email = product.shared_with_email ? `(${product.shared_with_email})` : ""; return `Order Initiated by ${name} ${email}`.trim(); } return "Order Initiated"; default: return product.status || ""; } } function OrderClients() { const router = useRouter(); const searchParams = useSearchParams(); const [openModal, setOpenModal] = useState(null); const [orders, setOrders] = useState([]); const [selectedStatus, setSelectedStatus] = useState("all"); const [isLoading, setIsLoading] = useState(true); const [inviteEmail, setInviteEmail] = useState(""); const [customer_name, setCustomerName] = useState(""); const [isInviting, setIsInviting] = useState(false); const [declineOrderId, setDeclineOrderId] = useState(null); const [declineReason, setDeclineReason] = useState(""); const [isDeclining, setIsDeclining] = useState(false); const [highlightedId, setHighlightedId] = useState(null); const [justAccepted, setJustAccepted] = useState>(new Set()); const cardRefs = useRef>({}); useEffect(() => { const inviteId = searchParams.get("invite"); if (inviteId) setHighlightedId(inviteId); getUserOrderList(); }, []); useEffect(() => { if (highlightedId && orders.length > 0) { const el = cardRefs.current[highlightedId]; if (el) el.scrollIntoView({ behavior: "smooth", block: "center" }); } }, [orders, highlightedId]); async function getUserOrderList() { try { setIsLoading(true); const response = await fetch("/api/vision/list", { method: "GET", headers: { "Content-Type": "application/json" }, credentials: "include", }); if (!response.ok) throw new Error(`Error: ${response.status} - ${response.statusText}`); const data = await response.json(); setOrders(data.data.my_vision); } catch { // silently fail } finally { setIsLoading(false); } } const filteredOrders = orders.filter((order) => { if (selectedStatus === "all") return true; return order.status === selectedStatus; }); const closeAllModals = () => setOpenModal(null); const openSpecificModal = (modalKey: ModalKey) => { closeAllModals(); setTimeout(() => setOpenModal(modalKey), 50); }; const handleAccept = async (orderId: string) => { if (!window.confirm("Are you sure you want to accept this vision board invitation?")) return; try { const response = await fetch("/api/vision/invite-action", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ order_id: orderId, action: "accept" }), }); if (!response.ok) throw new Error(`Error: ${response.status} - ${response.statusText}`); setOrders((prev) => prev.map((o) => o.order_id === orderId ? { ...o, status: "ACCEPTED", is_add_to_bag_allow: true } : o, ), ); setJustAccepted((prev) => new Set(prev).add(orderId)); toast.success("Invite accepted successfully!"); } catch { toast.error("Failed to accept invite. Please try again."); } }; const handleDeclineSubmit = async () => { if (!declineOrderId) return; setIsDeclining(true); try { const response = await fetch("/api/vision/invite-action", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ order_id: declineOrderId, action: "reject", reason: declineReason, }), }); if (!response.ok) throw new Error(`Error: ${response.status} - ${response.statusText}`); setOrders((prev) => prev.map((o) => o.order_id === declineOrderId ? { ...o, status: "DECLINED", decline_reason: declineReason } : o, ), ); toast.success("Invite declined."); setDeclineOrderId(null); setDeclineReason(""); } catch { toast.error("Failed to decline invite. Please try again."); } finally { setIsDeclining(false); } }; const handleDelete = async (co_creation_invoice_id: string) => { if ( !window.confirm( "Are you sure you want to delete this vision board invitation?", ) ) return; try { await getApiClient(`co-creation/del/${co_creation_invoice_id}`); toast.success("Vision board deleted successfully!"); getUserOrderList(); } catch { toast.error("Failed to delete vision board. Please try again."); } }; const handleInviteSubmit = async (sessionId: string) => { if (!inviteEmail || !inviteEmail.includes("@")) { alert("Please enter a valid email address"); return; } try { setIsInviting(true); const response = await fetch("/api/vision/invite-submit", { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify({ email: inviteEmail, session_id: sessionId, customer_name, }), }); if (!response.ok) throw new Error(`Error: ${response.status} - ${response.statusText}`); // Update card status inline — no full list refresh setOrders((prev) => prev.map((o) => o.session_id === sessionId ? { ...o, status: "AWAITING_RESPONSE", vision_share_allow: false, shared_with_name: customer_name, shared_with_email: inviteEmail, } : o, ), ); setInviteEmail(""); setCustomerName(""); closeAllModals(); toast.success("Vision board shared successfully!"); } catch { toast.error("Failed to send invitation. Please try again."); } finally { setIsInviting(false); } }; return (
{/* Decline modal */} { setDeclineOrderId(null); setDeclineReason(""); }} size="md" title="Decline Vision" subtitle="" showFooter={false} >

Let the sender know why you're declining (optional).