shopify-chatbot-widget 0.8.7 → 0.9.0

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,18 +5,20 @@ 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;
 
     setLoading(true);
     try {
-      const res = await fetch(`${config.apiUrl}cart?session_id=${sessionId}`);
+      const res = await fetch(`${config.apiUrl}cart/?session_id=${sessionId}`);
       const json = await res.json();
       setItems(json.items || []);
     } catch (err) {
@@ -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;
-
-
-
-