diff --git a/components/dashboard/NewChatForm.tsx b/components/dashboard/NewChatForm.tsx index c8a7414..42aec8f 100644 --- a/components/dashboard/NewChatForm.tsx +++ b/components/dashboard/NewChatForm.tsx @@ -1,8 +1,14 @@ -"use client" +"use client"; import React, { useState, useEffect } from "react"; import { useRouter, useSearchParams } from "next/navigation"; -import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; +import { + Card, + CardContent, + CardHeader, + CardTitle, + CardDescription, +} from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; @@ -29,41 +35,43 @@ export default function NewChatForm() { const [initialMessage, setInitialMessage] = useState(""); const [loading, setLoading] = useState(false); const [loadingUser, setLoadingUser] = useState(false); - const [vendorStores, setVendorStores] = useState<{ _id: string, name: string }[]>([]); + const [vendorStores, setVendorStores] = useState< + { _id: string; name: string }[] + >([]); const [selectedStore, setSelectedStore] = useState(""); const [selectedUser, setSelectedUser] = useState(null); - + // Create an axios instance with auth const getAuthAxios = () => { const authToken = getCookie("Authorization"); if (!authToken) return null; - + return axios.create({ baseURL: process.env.NEXT_PUBLIC_API_URL, - headers: { Authorization: `Bearer ${authToken}` } + headers: { Authorization: `Bearer ${authToken}` }, }); }; - + // Parse URL parameters for buyerId and fetch user details if present useEffect(() => { - const buyerIdParam = searchParams.get('buyerId'); + const buyerIdParam = searchParams.get("buyerId"); if (buyerIdParam) { setBuyerId(buyerIdParam); // We'll fetch user details after stores are loaded } }, [searchParams]); - + // Fetch user information by ID const fetchUserById = async (userId: string) => { if (!userId || !vendorStores[0]?._id) return; - + const authAxios = getAuthAxios(); if (!authAxios) { toast.error("You need to be logged in"); router.push("/auth/login"); return; } - + setLoadingUser(true); try { const response = await authAxios.get(`/chats/user/${userId}`); @@ -90,7 +98,9 @@ export default function NewChatForm() { try { setSearching(true); - const response = await authAxios.get(`/chats/search/users?query=${encodeURIComponent(query)}&storeId=${vendorStores[0]._id}`); + const response = await authAxios.get( + `/chats/search/users?query=${encodeURIComponent(query)}&storeId=${vendorStores[0]._id}`, + ); setSearchResults(response.data); } catch (error) { console.error("Error searching users:", error); @@ -114,7 +124,7 @@ export default function NewChatForm() { setSearchQuery(user.telegramUsername || user.telegramUserId); setOpen(false); }; - + // Fetch vendor stores useEffect(() => { const fetchVendorStores = async () => { @@ -124,41 +134,51 @@ export default function NewChatForm() { router.push("/auth/login"); return; } - + try { // Get vendor profile first - const vendorResponse = await authAxios.get('/auth/me'); - + const vendorResponse = await authAxios.get("/auth/me"); + // Extract vendor ID properly const vendorId = vendorResponse.data.vendor?._id; - + if (!vendorId) { - console.error("Vendor ID not found in profile response:", vendorResponse.data); + console.error( + "Vendor ID not found in profile response:", + vendorResponse.data, + ); toast.error("Could not retrieve vendor information"); return; } - + // Fetch store const storeResponse = await authAxios.get(`/storefront`); - + // Handle both array and single object responses if (Array.isArray(storeResponse.data)) { setVendorStores(storeResponse.data); if (storeResponse.data.length > 0) { setSelectedStore(storeResponse.data[0]._id); } - } else if (storeResponse.data && typeof storeResponse.data === 'object' && storeResponse.data._id) { + } else if ( + storeResponse.data && + typeof storeResponse.data === "object" && + storeResponse.data._id + ) { const singleStore = [storeResponse.data]; setVendorStores(singleStore); setSelectedStore(storeResponse.data._id); } else { - console.error("Expected store data but received:", storeResponse.data); + console.error( + "Expected store data but received:", + storeResponse.data, + ); setVendorStores([]); toast.error("Failed to load store data in expected format"); } - + // Now that we have the store, fetch user details if buyerId was set - const buyerIdParam = searchParams.get('buyerId'); + const buyerIdParam = searchParams.get("buyerId"); if (buyerIdParam) { fetchUserById(buyerIdParam); } @@ -168,29 +188,29 @@ export default function NewChatForm() { setVendorStores([]); } }; - + fetchVendorStores(); }, []); - + const handleBackClick = () => { router.push("/dashboard/chats"); }; - + const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); - + if (!buyerId) { toast.error("Please select a customer"); return; } - + if (vendorStores.length === 0) { toast.error("No store available. Please create a store first."); return; } - + const storeId = vendorStores[0]._id; - + setLoading(true); try { const authAxios = getAuthAxios(); @@ -199,13 +219,13 @@ export default function NewChatForm() { router.push("/auth/login"); return; } - + const response = await authAxios.post("/chats/create", { buyerId, storeId: storeId, - initialMessage: initialMessage.trim() || undefined + initialMessage: initialMessage.trim() || undefined, }); - + if (response.data.chatId) { toast.success("Chat created successfully!"); router.push(`/dashboard/chats/${response.data.chatId}`); @@ -215,7 +235,7 @@ export default function NewChatForm() { } } catch (error: any) { console.error("Error creating chat:", error); - + if (error.response?.status === 409) { toast.info("Chat already exists, redirecting..."); router.push(`/dashboard/chats/${error.response.data.chatId}`); @@ -226,7 +246,7 @@ export default function NewChatForm() { setLoading(false); } }; - + return ( @@ -240,7 +260,7 @@ export default function NewChatForm() { Start a new conversation with a customer by their Telegram ID - +
@@ -260,7 +280,7 @@ export default function NewChatForm() { )}
- + {open && searchQuery && (
{searching ? ( @@ -300,9 +320,11 @@ export default function NewChatForm() { )}

- This is the customer's Telegram ID or username. You can search for them above or ask them to use the /myid command in your Telegram bot. + This is the customer's Telegram ID or username. You can search for + them above or ask them to use the /myid command in your Telegram + bot.

- + {buyerId && !searchQuery && (

@@ -311,7 +333,7 @@ export default function NewChatForm() {

)} - +