shopify-chatbot-widget 0.8.6 → 0.8.9

package/src/Chatbot/components/Messenger/Messenger.tsx

@@ -1,6 +1,6 @@
 import React, { useState,useCallback } from 'react';
 import { Button, Avatar } from 'antd';
-import { CloseOutlined,ArrowLeftOutlined } from '@ant-design/icons';
+import { CloseOutlined,ArrowLeftOutlined,ShoppingCartOutlined} from '@ant-design/icons';
 import '../../Chatbot.css';
 import { useChatbotMessage } from '../../../hooks/useSessionMessages';
 import axios from 'axios';
@@ -14,7 +14,7 @@ import type { ChatMessage } from '../../../types/chatbot';
 import { getCookie } from '../../../utils/cookies';
 import useChatSocket from '../../../hooks/useWebsocke';
 import Notification from '../Notification';
-import CartWidget from '../Messages/CartWidget';
+// import CartWidget from '../Messages/CartWidget';
 import { useCart } from '../../../hooks/useCart';
 
 type MessengerProps = {
@@ -24,10 +24,11 @@ type MessengerProps = {
   colorCode: string;
   newSession: boolean;
   messagesSuggestions: string[];
+  setMessagesSuggestions: React.Dispatch<React.SetStateAction<string[]>>;
   disableForm: boolean;
   sessionId:string;
   setOpen: (v: boolean) => void;
-  setView: (v: string) => void;
+  setView: React.Dispatch<React.SetStateAction<'sessions' | 'create' | 'messenger' | 'cartView'>>;
   setNewSession: (v: boolean) => void;
  Opened: boolean;
  calendly:string;
@@ -52,6 +53,7 @@ const Messenger: React.FC<MessengerProps> = ({
   userType,
   setNewSession,
   messagesSuggestions,
+  setMessagesSuggestions,
   disableForm,
   sessionId,
   setOpen,
@@ -168,7 +170,10 @@ const socket = useChatSocket(sessionId, handleSocketData);
   const sendMessageSuggestion = async (message: string): Promise<void> => {
     if (!message.trim()) return;
   
-    setIsSending(true); // 🔒 Disable input
+    setIsSending(true);
+  
+    // Remove only the clicked suggestion
+    setMessagesSuggestions(prev => prev.filter(suggestion => suggestion !== message));
   
     const userMsg: ChatMessage = { role: 'user', content: message };
     setMessages(prev => [...prev, userMsg]);
@@ -187,10 +192,12 @@ const socket = useChatSocket(sessionId, handleSocketData);
     } catch (error) {
       console.error("Error sending suggestion:", error);
     } finally {
-      setIsSending(false); // 🔓 Re-enable input
+      setIsSending(false);
     }
   };
   
+  
+  
  
 
  async function handleSendImage  (image: File, userMessage:string)  {
@@ -398,7 +405,7 @@ const socket = useChatSocket(sessionId, handleSocketData);
     }
   };
 
-  const  { items, loading, addToCart, removeFromCart, refresh } = useCart(sessionId);
+  const  { items, addToCart, removeFromCart } = useCart(sessionId);
 
 
   // replace your old handleToCart:
@@ -407,9 +414,9 @@ const socket = useChatSocket(sessionId, handleSocketData);
   }
   
   const handleToCart = useCallback(
-    async (variantId: string, name: string, qty = 1) => {
+    async (variantId: string, name: string, variantImage: string, qty = 1) => {
       try {
-        await addToCart(variantId, name, qty);
+        await addToCart(variantId, name, qty, variantImage);
   
         const shortName = shorten(name, 20);
         setNotification(`✅ ${qty}× ${shortName} added to cart`);
@@ -420,6 +427,7 @@ const socket = useChatSocket(sessionId, handleSocketData);
     [addToCart]
   );
   
+  
   const handleRemoveFromCart = useCallback(
     async (variantId: string, qty = 1) => {
       await removeFromCart(variantId, qty);
@@ -452,18 +460,59 @@ const socket = useChatSocket(sessionId, handleSocketData);
         <span className="chatbot-title">{agentName || 'Ai Assistant'}</span>
 
         {items.length > 0 && (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-        <CartWidget
-          items={items}
-          loading={loading}
-          sessionId={sessionId}
-          onRefresh={refresh}
-          onRemove={removeFromCart}
-          colorCode={colorCode}
-          sendMessage={sendMessageSuggestion}
-        />
-      </div>
-    )}
+  <div
+    style={{
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      marginLeft: "auto",
+      marginRight: 12,
+    }}
+  >
+    <ShoppingCartOutlined
+      onClick={() => setView("cartView")}
+      style={{
+        fontSize: 26,
+        cursor: "pointer",
+        color: "#333",
+        padding: 6,
+        borderRadius: "50%",
+        transition: "0.2s",
+      }}
+      onMouseEnter={(e) => {
+        (e.currentTarget as HTMLElement).style.background = "rgba(0,0,0,0.05)";
+      }}
+      onMouseLeave={(e) => {
+        (e.currentTarget as HTMLElement).style.background = "transparent";
+      }}
+    />
+
+    {/* Counter Badge */}
+    <span
+      style={{
+        position: "absolute",
+        top: 2,
+        right: 2,
+        backgroundColor: colorCode || "#7F28F8",
+        color: "white",
+        fontSize: 10,
+        fontWeight: 600,
+        width: 18,
+        height: 18,
+        borderRadius: "50%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+      }}
+    >
+      {items.length}
+    </span>
+  </div>
+)}
+
+
           
               
         {/* Close Button */}

package/src/Chatbot/components/Sessions/RenderList.tsx

@@ -46,13 +46,13 @@ const ChatSessions: React.FC<ChatSessionsProps> = ({ chatbotLogo, colorCode, onN
           (now.getTime() - createdDate.getTime()) / (1000 * 60 * 60 * 24)
         );
   
-        const isOlderThan3Days = diffDays >= 3;
+        const isOlderThan5Days = diffDays >= 5;
   
         return {
           id: item.user_session_id,
           agentName: item.assignee || 'AI Agent',
           createdAt: item.date,
-          isBlurred: item.closed || isOlderThan3Days, // ✅ auto-close if 3+ days old
+          isBlurred: item.closed || isOlderThan5Days, // ✅ auto-close if 3+ days old
           agentImage: item.assignee_picture,
         };
       });

package/src/hooks/useCart.tsx

@@ -5,12 +5,14 @@ export interface CartItem {
   variantId: string;
   name: string;
   quantity: number;
+  variantImage: string;
 }
 
 export function useCart(sessionId: string) {
   const [items, setItems] = useState<CartItem[]>([]);
   const [loading, setLoading] = useState(false);
 
+  // ✅ Fetch current cart
   const fetchCart = useCallback(async () => {
     if (!sessionId) return;
 
@@ -26,61 +28,66 @@ export function useCart(sessionId: string) {
     }
   }, [sessionId]);
 
-  const addToCart = async (variantId: string, name: string, qty: number) => {
+  // ✅ Add to Cart (includes image)
+  const addToCart = async (
+    variantId: string,
+    name: string,
+    qty: number,
+    variantImage: string
+  ) => {
     if (!sessionId) return;
-  
-    // optimistic update
 
-  
     try {
       const res = await fetch(`${config.apiUrl}cart/add/`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           session_id: sessionId,
           variantId,
           name,
           quantity: qty,
+          variantImage, // ✅ include image
         }),
       });
-  
+
       const json = await res.json();
       if (!res.ok) {
-        throw new Error(json.error || "Failed to add to cart");
-      }
-      else{
-        setItems(current => {
-          const found = current.find(i => i.variantId === variantId);
-          if (found) {
-            return current.map(i =>
-              i.variantId === variantId
-                ? { ...i, quantity: i.quantity + qty }
-                : i
-            );
-          }
-          return [...current, { variantId, name, quantity: qty }];
-        });
+        throw new Error(json.error || 'Failed to add to cart');
       }
+
+      // ✅ Optimistic update
+      setItems((current) => {
+        const found = current.find((i) => i.variantId === variantId);
+        if (found) {
+          return current.map((i) =>
+            i.variantId === variantId
+              ? { ...i, quantity: i.quantity + qty }
+              : i
+          );
+        }
+        return [...current, { variantId, name, quantity: qty, variantImage }];
+      });
     } catch (err: any) {
+      console.error('Error adding to cart:', err);
       throw err;
     }
-  
-    await fetchCart(); // reconcile
+
+    await fetchCart(); // ✅ reconcile with server
   };
-  
 
+  // ✅ Remove from Cart
   const removeFromCart = async (variantId: string, qty: number) => {
     if (!sessionId) return;
 
     // Optimistic update
-    setItems(current =>
+    setItems((current) =>
       current
-        .map(i =>
+        .map((i) =>
           i.variantId === variantId
             ? { ...i, quantity: i.quantity - qty }
             : i
         )
-        .filter(i => i.quantity > 0)
+        .filter((i) => i.quantity > 0)
     );
 
     try {
@@ -94,11 +101,13 @@ export function useCart(sessionId: string) {
         }),
       });
     } catch (err) {
+      console.error('Error removing from cart:', err);
     }
 
-    await fetchCart(); // reconcile server data
+    await fetchCart(); // ✅ reconcile with server
   };
 
+  // ✅ Fetch cart on mount
   useEffect(() => {
     fetchCart();
   }, [fetchCart]);

package/src/hooks/useChatbotData.tsx

@@ -127,6 +127,7 @@ export const useChatbotData = () => {
     calendly,
     merchantPhone,
     messagesSuggestions,
+    setMessagesSuggestions,
     restSuggestions,
     userType,
     disbleCheckout,

package/src/hooks/useCheckout.tsx

@@ -0,0 +1,45 @@
+import config from "./config";
+
+interface CheckoutResponse {
+  checkoutUrl: string;
+}
+
+export const useCartAPI = () => {
+  const checkOut = async (sessionId: string): Promise<void> => {
+    try {
+      const companyUsername = localStorage.getItem('company_username');
+      if (!companyUsername) throw new Error('No company username found.');
+
+      const response = await fetch(`${config.apiUrl}checkout/shopify`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId, company_username: companyUsername }),
+      });
+
+      if (!response.ok) throw new Error('Failed to initiate checkout.');
+
+      const data: CheckoutResponse = await response.json();
+
+      if (data?.checkoutUrl) {
+        // Open in parent frame for embedded chatbots
+        window.parent?.postMessage(
+          {
+            type: 'JAWEB_CHAT',
+            action: 'navigate',
+            target: '_blank',
+            url: data.checkoutUrl,
+          },
+          '*'
+        );
+      } else {
+        alert('No checkout URL returned.');
+      }
+    } catch (err) {
+      console.error('Checkout error:', err);
+    }
+  };
+
+  return {
+    checkOut,
+  };
+};

package/src/Chatbot/OLDCHAT.tsx

@@ -1,259 +0,0 @@
-import React, { useState,useEffect } from 'react';
-import { Button } from 'antd';
-
-import { useChatbotData } from '../hooks/useChatbotData';
-import ChatSessions from './components/Sessions/RenderList';
-import CreateSession from './components/Sessions/CreateSession';
-import Messenger from './components/Messenger/Messenger';
-import './Chatbot.css'
-import config from '../hooks/config';
-import FingerprintJS from '@fingerprintjs/fingerprintjs';
-
-const Chatbot: React.FC = () => {
-  const [open, setOpen] = useState(false);
-  const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger'>('sessions');
-  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
-  const [HasInfo,setHasInfo]=useState(false)
-  const [activeAgentName,setActiveAgentName]=useState('')
-  const [activeAgentImage,setActiveAgentImage]=useState('')
-  const [newSession,setNewSession]=useState(false)
-
-
-  const windowWidth = window.innerWidth;
-
-  const {
-    chatbotLogo,
-    colorCode,
-    subscription,
-    messagesSuggestions,
-    isFetchingDetails,
-    disableForm,
-    merchantPhone,
-    userType,
-    calendly,
-    disbleCheckout
-  } = useChatbotData();
-
-  const [visitorData, setVisitorData] = useState<{ visitorId: string; country: string } | null>(null);
-
-
-  const handleNewSessionClick = () => {
-    // If the form is *not* disabled, always go to create
-    if (!disableForm && !HasInfo) {
-      setViewMode('create');
-      return;
-    }
-  
-    else {
-      const newSessionId = crypto.randomUUID();
-      setActiveSessionId(newSessionId);
-      setActiveAgentImage(chatbotLogo);
-      setActiveAgentName('Ai Agent');
-      setNewSession(true);
-      setViewMode('messenger');
-    }
-  
-    // Otherwise (disableForm true && !HasInfo) we simply bail.
-  };
-  
-  useEffect(() => {
-    const fetchVisitorInfo = async () => {
-      try {
-        let visitorId = localStorage.getItem('visitor_id');
-        let ip = localStorage.getItem('ip_address');
-        let country = localStorage.getItem('country');
-  
-        // ✅ If all cached, safely set and exit
-        // if (visitorId && ip && country) {
-        //   setVisitorData({ visitorId, country });
-
-        //   return;
-        // }
-  
-        // 🔍 Generate fingerprint if needed
-        if (!visitorId) {
-          const fp = await FingerprintJS.load();
-          const result = await fp.get();
-          visitorId = result.visitorId;
-          localStorage.setItem('visitor_id', visitorId);
-        }
-  
-        // 🌍 Fetch IP info if missing
-        if (!ip || !country) {
-          const res = await fetch('https://ipapi.co/json');
-          const data = await res.json();
-          ip = data.ip;
-          country = data.country_name;
-  
-          if (ip) localStorage.setItem('ip_address', ip);
-          if (country) localStorage.setItem('country', country);
-        }
-  
-        // ✅ Ensure values are non-null before use
-        if (visitorId && ip && country) {
-          setVisitorData({ visitorId, country });
-  
-          // 📡 Send to backend
-          const backendRes = await fetch(`${config.apiUrl}register-ip/`, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              ip_address: ip,
-              country,
-              visitor_id: visitorId,
-            }),
-          });
-  
-          const result = await backendRes.json();
-          setHasInfo(result.has_user_info || false);
-        } else {
-          console.warn('Missing IP or country info after fetch');
-        }
-      } catch (err) {
-        console.error('Failed to fetch or send visitor info', err);
-      }
-    };
-  
-    fetchVisitorInfo();
-  }, []);
-  
-
-  
-  
-
-  const handleSessionSelect = (sessionId: string,agentName:string,agentImage:string) => {
-    setActiveSessionId(sessionId);
-    setActiveAgentName(agentName)
-    setActiveAgentImage(agentImage)
-    setNewSession(false)
-    setViewMode('messenger');
-  };
-
-
-  useEffect(() => {
-    const onMessage = (e: MessageEvent) => {
-      const msg = (e.data || {}) as any;
-      if (msg.type !== 'JAWEB_CHAT') return;
-
-      if (msg.action === 'open-ready') {
-        // Parent has expanded iframe → now we can render full UI
-        setOpen(true);
-      } else if (msg.action === 'closed') {
-        // Parent collapsed iframe → hide full UI
-        setOpen(false);
-      }
-    };
-    window.addEventListener('message', onMessage);
-    return () => window.removeEventListener('message', onMessage);
-  }, []);
-
-  const requestOpen = () => {
-    // Ask parent to expand iframe
-    window.parent?.postMessage({ type: 'JAWEB_CHAT', action: 'open' }, '*');
-  };
-  const requestClose = () => {
-    // Ask parent to collapse iframe
-    window.parent?.postMessage({ type: 'JAWEB_CHAT', action: 'close' }, '*');
-  };
-
-  
-
-
-  return  (
-    <div>
-      {!isFetchingDetails && subscription ? (
-        <div
-          style={{
-            bottom: windowWidth < 768 ? '20%' : 0,
-            top: windowWidth < 768 ? '0' : '5%',
-            height: windowWidth < 768 ? '100%' : '85%',
-            borderRadius: 10,
-            width: '100%',
-            zIndex: 9999,
-          }}
-        >
-          {open && (
-            <div className="chatbot-box">
-              {viewMode === 'sessions' && (
-                <ChatSessions
-                  chatbotLogo={chatbotLogo}
-                  Phone={merchantPhone || ''}
-                  colorCode={colorCode}
-                  visitorId={visitorData?.visitorId || ''}
-                  Opened={open}
-                  // when a child wants to close, talk to parent
-                  setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
-                  onNewSession={handleNewSessionClick}
-                  onSessionSelect={handleSessionSelect}
-                />
-              )}
-
-              {viewMode === 'create' && (
-                <CreateSession
-                  colorCode={colorCode}
-                  visitorId={visitorData?.visitorId || ''}
-                  country={visitorData?.country || ''}
-                  onBack={() => setViewMode('sessions')}
-                  onCreate={(userData) => {
-                    setActiveSessionId(userData.session_id);
-                    setHasInfo(userData.hasInfo);
-                    setViewMode('messenger');
-                  }}
-                />
-              )}
-
-              {viewMode === 'messenger' && activeSessionId && (
-                <Messenger
-                  sessionId={activeSessionId}
-                  chatbotLogo={activeAgentImage || chatbotLogo}
-                  agentName={activeAgentName || 'Ai Assistant'}
-                  colorCode={colorCode}
-                  messagesSuggestions={messagesSuggestions}
-                  newSession={newSession}
-                  disableForm={disableForm}
-                  calendly={calendly ?? ''}
-                  // children call this to close/open → routed to parent
-                  setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
-                  setNewSession={setNewSession}
-                  Opened={open}
-                  setView={() => setViewMode('sessions')}
-                  userType={userType}
-                  disbleCheckout={disbleCheckout}
-                />
-              )}
-            </div>
-          )}
-        </div>
-      ) : null}
-
-      <div className="jaweb-chatbot-container">
-        {!isFetchingDetails && subscription ? (
-          <Button
-            type="primary"
-            shape="circle"
-            icon={
-              <img
-                src="https://jaweb.me/wp-content/uploads/2025/03/download__2_-removebg-preview.png"
-                alt="Chat Icon"
-                style={{ width: 30, height: 30 }}
-              />
-            }
-            size="large"
-            style={{ backgroundColor: colorCode, width: 60, height: 60 }}
-            className={`chat-launcher ${open ? 'chatbot-open' : ''}`}
-            // 🔑 Don’t setOpen directly; request parent resize
-            onClick={() => (open ? requestClose() : requestOpen())}
-          />
-        ) : null}
-      </div>
-    </div>
-  );
-};
-
-export default Chatbot;
-
-
-
-