fix!?

components/dashboard/ChatList.tsx

@@ -56,6 +56,7 @@ export default function ChatList() {
 
         // First, get vendor info using the /auth/me endpoint
         const vendorResponse = await authAxios.get('/auth/me');
+        console.log("Vendor auth response:", vendorResponse.data);
         
         // Access correct property - the vendor ID is in vendor._id
         const vendorId = vendorResponse.data.vendor?._id;
@@ -66,16 +67,32 @@ export default function ChatList() {
           return;
         }
         
-        // Fetch vendor's stores using storefront endpoint
-        const storesResponse = await authAxios.get(`/storefront`);
-        setVendorStores(storesResponse.data);
+        // Fetch vendor's store using storefront endpoint
+        const storeResponse = await authAxios.get(`/storefront`);
+        console.log("Store response:", storeResponse.data);
         
-        if (storesResponse.data.length > 0) {
-          setSelectedStore(storesResponse.data[0]._id);
+        // Handle both array and single object responses
+        if (Array.isArray(storeResponse.data)) {
+          // If it's an array, use it as is
+          setVendorStores(storeResponse.data);
+          
+          if (storeResponse.data.length > 0) {
+            setSelectedStore(storeResponse.data[0]._id);
+          }
+        } else if (storeResponse.data && typeof storeResponse.data === 'object' && storeResponse.data._id) {
+          // If it's a single store object, convert it to an array with one element
+          const singleStore = [storeResponse.data];
+          setVendorStores(singleStore);
+          setSelectedStore(storeResponse.data._id);
+        } else {
+          console.error("Expected store data but received:", storeResponse.data);
+          setVendorStores([]);
+          toast.error("Failed to load store data in expected format");
         }
       } catch (error) {
         console.error("Error fetching vendor data:", error);
         toast.error("Failed to load vendor data");
+        setVendorStores([]);
       }
     };
     
@@ -85,16 +102,23 @@ export default function ChatList() {
   // Fetch chats and unread counts when store is selected
   useEffect(() => {
     const fetchChats = async () => {
-      if (!selectedStore) return;
+      if (!selectedStore) {
+        console.log("No store selected, skipping fetch chats");
+        setLoading(false);
+        return;
+      }
       
+      console.log("Fetching chats for store:", selectedStore);
       setLoading(true);
       try {
         // Get auth token from cookies
         const authToken = getCookie("Authorization");
         
         if (!authToken) {
+          console.log("No auth token found");
           toast.error("You need to be logged in");
           router.push("/auth/login");
+          setLoading(false);
           return;
         }
         
@@ -108,6 +132,7 @@ export default function ChatList() {
         
         // Get vendor ID from profile
         const vendorResponse = await authAxios.get('/auth/me');
+        console.log("Vendor response:", vendorResponse.data);
         
         // Access correct property - the vendor ID is in vendor._id
         const vendorId = vendorResponse.data.vendor?._id;
@@ -115,27 +140,35 @@ export default function ChatList() {
         if (!vendorId) {
           console.error("Vendor ID not found in profile response:", vendorResponse.data);
           toast.error("Could not retrieve vendor information");
+          setLoading(false);
           return;
         }
         
         // Fetch chats
+        console.log("Fetching chats for vendor:", vendorId);
         const chatsResponse = await authAxios.get(`/chats/vendor/${vendorId}`);
+        console.log("Chats response:", chatsResponse.data);
         
         // Filter chats by selected store
         const filteredChats = chatsResponse.data.filter(
           (chat: Chat) => chat.storeId === selectedStore
         );
+        console.log("Filtered chats:", filteredChats);
         
         setChats(filteredChats);
         
         // Fetch unread counts
         const unreadResponse = await authAxios.get(`/chats/vendor/${vendorId}/unread`);
+        console.log("Unread counts:", unreadResponse.data);
         setUnreadCounts(unreadResponse.data);
+        
+        console.log("Chat loading complete");
       } catch (error) {
         console.error("Error fetching chats:", error);
         toast.error("Failed to load chats");
       } finally {
         setLoading(false);
+        console.log("Loading state set to false");
       }
     };
     
@@ -188,32 +221,50 @@ export default function ChatList() {
           <span>Customer Chats</span>
           <Button onClick={handleCreateChat}>New Chat</Button>
         </CardTitle>
-        <div className="flex items-center space-x-2">
-          <label htmlFor="store-select" className="text-sm font-medium">
-            Store:
-          </label>
-          <select
-            id="store-select"
-            value={selectedStore}
-            onChange={handleStoreChange}
-            className="rounded-md border border-input bg-background px-3 py-2 text-sm"
-          >
-            {vendorStores.map((store) => (
-              <option key={store._id} value={store._id}>
-                {store.name}
-              </option>
-            ))}
-          </select>
-        </div>
+        {vendorStores.length === 0 ? (
+          <div className="text-sm text-muted-foreground">
+            No store available. Please create a store first.
+          </div>
+        ) : vendorStores.length === 1 ? (
+          <div className="text-sm font-medium">
+            Store: {vendorStores[0].name}
+          </div>
+        ) : (
+          <div className="flex items-center space-x-2">
+            <label htmlFor="store-select" className="text-sm font-medium">
+              Store:
+            </label>
+            <select
+              id="store-select"
+              value={selectedStore}
+              onChange={handleStoreChange}
+              className="rounded-md border border-input bg-background px-3 py-2 text-sm"
+            >
+              {vendorStores.map((store) => (
+                <option key={store._id} value={store._id}>
+                  {store.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
       </CardHeader>
       <CardContent>
         {chats.length === 0 ? (
-          <div className="text-center py-8 text-muted-foreground">
-            <p>No conversations yet</p>
+          <div className="text-center py-12 px-4">
+            <div className="mb-4 mx-auto w-16 h-16 rounded-full bg-muted flex items-center justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-muted-foreground">
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+              </svg>
+            </div>
+            <h3 className="text-lg font-medium">No chats available</h3>
+            <p className="text-muted-foreground mt-2 mb-4">
+              There are no customer conversations for this store yet.
+            </p>
             <Button
-              variant="outline"
-              className="mt-4"
+              variant="default"
               onClick={handleCreateChat}
+              className="mt-2"
             >
               Start a new conversation
             </Button>

components/dashboard/NewChatForm.tsx

@@ -41,6 +41,7 @@ export default function NewChatForm() {
         
         // Get vendor profile first
         const vendorResponse = await authAxios.get('/auth/me');
+        console.log("Vendor auth response:", vendorResponse.data);
         
         // Extract vendor ID properly
         const vendorId = vendorResponse.data.vendor?._id;
@@ -51,16 +52,32 @@ export default function NewChatForm() {
           return;
         }
         
-        // Fetch stores
-        const storesResponse = await authAxios.get(`/storefront`);
-        setVendorStores(storesResponse.data);
+        // Fetch store
+        const storeResponse = await authAxios.get(`/storefront`);
+        console.log("Store response:", storeResponse.data);
         
-        if (storesResponse.data.length > 0) {
-          setSelectedStore(storesResponse.data[0]._id);
+        // Handle both array and single object responses
+        if (Array.isArray(storeResponse.data)) {
+          // If it's an array, use it as is
+          setVendorStores(storeResponse.data);
+          
+          if (storeResponse.data.length > 0) {
+            setSelectedStore(storeResponse.data[0]._id);
+          }
+        } else if (storeResponse.data && typeof storeResponse.data === 'object' && storeResponse.data._id) {
+          // If it's a single store object, convert it to an array with one element
+          const singleStore = [storeResponse.data];
+          setVendorStores(singleStore);
+          setSelectedStore(storeResponse.data._id);
+        } else {
+          console.error("Expected store data but received:", storeResponse.data);
+          setVendorStores([]);
+          toast.error("Failed to load store data in expected format");
         }
       } catch (error) {
-        console.error("Error fetching stores:", error);
-        toast.error("Failed to load stores");
+        console.error("Error fetching store:", error);
+        toast.error("Failed to load store");
+        setVendorStores([]);
       }
     };
     
@@ -158,20 +175,39 @@ export default function NewChatForm() {
           
           <div className="space-y-2">
             <Label htmlFor="store">Store</Label>
-            <select
-              id="store"
-              value={selectedStore}
-              onChange={(e) => setSelectedStore(e.target.value)}
-              className="w-full rounded-md border border-input bg-background px-3 py-2"
-              required
-            >
-              <option value="" disabled>Select a store</option>
-              {vendorStores.map((store) => (
-                <option key={store._id} value={store._id}>
-                  {store.name}
-                </option>
-              ))}
-            </select>
+            {vendorStores.length === 0 ? (
+              <div>
+                <p className="text-sm text-muted-foreground p-2 border rounded-md">
+                  No store available. Please create a store first.
+                </p>
+              </div>
+            ) : vendorStores.length === 1 ? (
+              <div className="p-2 border rounded-md bg-muted/20">
+                <p className="text-sm font-medium">
+                  {vendorStores[0].name}
+                </p>
+                <input 
+                  type="hidden" 
+                  value={vendorStores[0]._id} 
+                  name="storeId" 
+                />
+              </div>
+            ) : (
+              <select
+                id="store"
+                value={selectedStore}
+                onChange={(e) => setSelectedStore(e.target.value)}
+                className="w-full rounded-md border border-input bg-background px-3 py-2"
+                required
+              >
+                <option value="" disabled>Select a store</option>
+                {vendorStores.map((store) => (
+                  <option key={store._id} value={store._id}>
+                    {store.name}
+                  </option>
+                ))}
+              </select>
+            )}
           </div>
           
           <div className="space-y-2">