shopify-chatbot-widget 0.8.7 → 0.8.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-chatbot-widget",
   "private": false,
-  "version": "0.8.7",
+  "version": "0.8.9",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/Chatbot/Chatbot.tsx

@@ -9,10 +9,11 @@ import FingerprintJS from '@fingerprintjs/fingerprintjs';
 import { LoadingOutlined } from '@ant-design/icons';
 import { Spin } from 'antd';
 import { motion, AnimatePresence } from 'framer-motion';
+import CartLayout from './components/Cart/Index';
 
 const Chatbot: React.FC = () => {
   const [open, setOpen] = useState(false);
-  const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger'>('sessions');
+  const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | 'cartView' >('sessions');
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [HasInfo, setHasInfo] = useState(false);
   const [activeAgentName, setActiveAgentName] = useState('');
@@ -31,6 +32,7 @@ const Chatbot: React.FC = () => {
     calendly,
     disbleCheckout,
     chatbotName,
+    setMessagesSuggestions
   } = useChatbotData();
 
   const [visitorData, setVisitorData] = useState<{ visitorId: string; country: string } | null>(null);
@@ -177,6 +179,34 @@ const Chatbot: React.FC = () => {
                 </motion.div>
               )}
 
+            {viewMode === 'cartView' && (
+                <motion.div
+                  key="create"
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -30 }}
+                  transition={{ duration: 0.3 }}
+                  style={{height:'100%'}}
+
+
+                >
+          <CartLayout
+            setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
+            sessionId={activeSessionId}
+            Opened={open}
+            chatbotLogo={chatbotLogo}
+            colorCode={colorCode}
+            onBack={() => {
+              setNewSession(false);
+              setViewMode("messenger");
+            }}
+          />
+
+
+                </motion.div>
+              )}
+           
+
               {viewMode === 'messenger' && activeSessionId && (
                 <motion.div
                   key="messenger"
@@ -198,12 +228,15 @@ const Chatbot: React.FC = () => {
                     setOpen={(v: boolean) => (v ? requestOpen() : requestClose())}
                     setNewSession={setNewSession}
                     Opened={open}
-                    setView={() => setViewMode('sessions')}
+                    setView={setViewMode}
                     userType={userType}
                     disbleCheckout={disbleCheckout}
+                    setMessagesSuggestions={setMessagesSuggestions}
                   />
                 </motion.div>
               )}
+
+              
             </AnimatePresence>
           )}
         </div>

package/src/Chatbot/components/Cart/Index.tsx

@@ -0,0 +1,287 @@
+import React, { useState } from "react";
+import {
+  CloseOutlined,
+  ArrowLeftOutlined,
+  DeleteOutlined,
+  ShoppingOutlined,
+  LoadingOutlined
+} from "@ant-design/icons";
+import { Button, Spin, message } from "antd";
+import { useCart } from "../../../hooks/useCart";
+import { useCartAPI } from "../../../hooks/useCheckout";
+
+type CartSessionProps = {
+  setOpen: (v: boolean) => void;
+  sessionId: string | null;
+  Opened: boolean;
+  chatbotLogo: string;
+  colorCode?: string;
+  onBack: () => void;
+};
+
+const CartLayout: React.FC<CartSessionProps> = ({
+  colorCode,
+  setOpen,
+  Opened,
+  onBack,
+  sessionId,
+}) => {
+  const { items, loading, removeFromCart, refresh } = useCart(sessionId || "");
+  const { checkOut } = useCartAPI();
+  const [isLoading, setIsLoading] = useState(false);
+
+
+  const handleCheckout = async () => {
+    if (!sessionId) {
+      message.warning("No session found — please start a chat first.");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await checkOut(sessionId);
+    } catch (err: any) {
+      message.error("Checkout failed. Please try again.");
+      console.error("Checkout error:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadingIcon = <LoadingOutlined style={{ fontSize: 24, color: colorCode||'#7F28F8' }} spin />;
+
+
+  const handleRemove = async (variantId: string) => {
+    await removeFromCart(variantId, 1);
+    message.info("Item removed from cart");
+    await refresh();
+  };
+
+  return (
+    <div
+      style={{
+        maxWidth: "100%",
+        height: "100%",
+        border: "1px solid #f0f0f0",
+        borderRadius: 8,
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "#fff",
+        overflow: "hidden",
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          padding: "16px",
+          display: "flex",
+          alignItems: "center",
+          borderBottom: "1px solid #f5f5f5",
+          boxShadow: "0 2px 6px rgba(0,0,0,0.03)",
+          zIndex: 5,
+          height:'8%'
+        }}
+      >
+        <Button
+          type="text"
+          icon={<ArrowLeftOutlined />}
+          onClick={onBack}
+          style={{ color: "#333", fontWeight: 500 }}
+        >
+          Back
+        </Button>
+
+        <div style={{ marginLeft: "auto" }}>
+          <CloseOutlined
+            onClick={() => setOpen(!Opened)}
+            style={{
+              fontSize: 18,
+              cursor: "pointer",
+              color: "#555",
+              transition: "color 0.2s ease",
+            }}
+            onMouseEnter={(e) =>
+              ((e.currentTarget as HTMLElement).style.color =
+                colorCode || "#7F28F8")
+            }
+            onMouseLeave={(e) =>
+              ((e.currentTarget as HTMLElement).style.color = "#555")
+            }
+          />
+        </div>
+      </div>
+
+      {/* Scrollable Content */}
+      <div
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "16px",
+          height:'66%'
+
+        }}
+
+      >
+        <h3 style={{ fontWeight: 600, marginBottom: 16 }}>
+          <ShoppingOutlined style={{ marginRight: 8 }} />
+          Your Cart ({items.length})
+        </h3>
+
+        {loading ? (
+          <div style={{ textAlign: "center", marginTop: 40 }}>
+                <Spin indicator={loadingIcon} />
+             </div>
+        ) : items.length === 0 ? (
+          <div style={{ textAlign: "center", color: "#888", marginTop: 60 }}>
+            Your cart is empty 🛒
+          </div>
+        ) : (
+         <div
+    style={{
+      flex: 1, // fill remaining space
+      overflowY: "auto", // scroll only this part
+      display: "flex",
+      flexDirection: "column",
+      height:'80%',
+      gap: "12px",
+      paddingRight: "4px", 
+    }}
+  >
+            {items.map((item) => (
+              
+              <div
+              key={item.variantId}
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                background: "#fafafa",
+                borderRadius: 10,
+                padding: "12px 10px",
+                transition: "all 0.2s ease",
+              }}
+              className="hover:shadow-sm"
+            >
+              {/* ✅ Left side */}
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <img
+                  src={item.variantImage}
+                  alt={item.name}
+                  style={{
+                    width: 64,
+                    height: 64,
+                    borderRadius: 8,
+                    objectFit: "cover",
+                    backgroundColor: "#f3f3f3",
+                  }}
+                />
+                <div>
+                  <p style={{ fontWeight: 600, color: "#222", marginBottom: 4 }}>
+                    {item.name}
+                  </p>
+                  <p style={{ fontSize: 13, color: "#777", margin: 0 }}>
+                    Qty: {item.quantity}
+                  </p>
+                </div>
+              </div>
+            
+              {/* ✅ Right side */}
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <span style={{ fontWeight: 600 }}>£29.99</span>
+                <DeleteOutlined
+                  onClick={() => handleRemove(item.variantId)}
+                  style={{
+                    cursor: "pointer",
+                    color: "#999",
+                    fontSize: 16,
+                    transition: "color 0.2s ease",
+                  }}
+                  onMouseEnter={(e) =>
+                    ((e.currentTarget as HTMLElement).style.color = "#e74c3c")
+                  }
+                  onMouseLeave={(e) =>
+                    ((e.currentTarget as HTMLElement).style.color = "#999")
+                  }
+                />
+              </div>
+            </div>
+            
+            ))}
+          </div>
+        )}
+
+        {/* <Divider style={{ margin: "20px 0" }} /> */}
+
+        {/* Discount Section */}
+        {/* <div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}>
+          <Input placeholder="Enter discount code" size="large" />
+          <Button
+            type="primary"
+            size="large"
+            style={{
+              backgroundColor: colorCode || "black",
+              borderColor: colorCode || "black",
+              borderRadius: 6,
+            }}
+          >
+            APPLY
+          </Button>
+        </div> */}
+
+        {/* Summary */}
+
+      </div>
+
+      {/* Sticky Footer */}
+      <div
+        style={{
+          position: "sticky",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          background: "#fff",
+          borderTop: "1px solid #f0f0f0",
+          padding: "16px 20px",
+          boxShadow: "0 -3px 10px rgba(0,0,0,0.05)",
+          zIndex: 10,
+        }}
+      >
+        <Button
+          type="primary"
+          block
+          size="large"
+          onClick={handleCheckout}
+          loading={isLoading}
+          disabled={items.length === 0}
+          style={{
+            backgroundColor: colorCode || "black",
+            borderColor: colorCode || "black",
+            borderRadius: 10,
+            fontWeight: 600,
+          }}
+        >
+          <span style={{color:'white'}}>
+          CHECKOUT
+
+          </span>
+        </Button>
+      </div>
+
+      {/* Scrollbar */}
+      <style>{`
+        .custom-scrollbar::-webkit-scrollbar {
+          width: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+          background-color: rgba(0,0,0,0.2);
+          border-radius: 3px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+          background-color: rgba(0,0,0,0.4);
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default CartLayout;

package/src/Chatbot/components/ChatInput.tsx

@@ -300,18 +300,23 @@ const ChatInput: React.FC<ChatInputProps> = ({
               padding: "0"
             }}
             onKeyDown={(e) => {
-              if (e.key === "Enter") {
+              if (e.key === "Enter" && !isSending) {
                 e.preventDefault();
-                if (selectedImage) {
+            
+                const hasImage = !!selectedImage;
+                const hasText = !!userMessage.trim();
+            
+                if (hasImage) {
                   handleSendImage(selectedImage, userMessage);
                   removeSelectedImage();
                   setUserMessage("");
-                } else if (userMessage.trim()) {
+                } else if (hasText) {
                   handleSendMessage();
                   setUserMessage("");
                 }
               }
             }}
+            
           />
         )}
       </div>

package/src/Chatbot/components/Messages/AssistantMesage.tsx

@@ -22,7 +22,7 @@ interface AssistantMessageProps {
   colorCode: string;
   isBusiness?: boolean;
   disableCheckout?:boolean;
-  handleAddToCart: (variantId: string, name: string, qty?: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string,variantImage:string, qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
 }
 

package/src/Chatbot/components/Messages/CardSwiper.tsx

@@ -20,7 +20,7 @@ interface Props {
   setSelectedVariants: React.Dispatch<React.SetStateAction<Record<string, string>>>;
   counts: Record<string, number>;
   setCounts: React.Dispatch<React.SetStateAction<Record<string, number>>>;
-  handleAddToCart: (variantId: string, name: string, qty: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string,variantImage:string, qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty: number) => Promise<void>;
   colorCode?: string;
   shortenName: (name: string) => string;
@@ -88,7 +88,7 @@ const ProductCarousel: FC<Props> = ({
               ...prev,
               [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
             }));
-            await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
+            await handleAddToCart(currentVariant.variant_id,currentVariant.name,currentVariant.image, 1);
           };
 
           const decrement = async () => {

package/src/Chatbot/components/Messages/Carousel/CardSwiper.tsx

@@ -23,7 +23,7 @@ interface Props {
   setSelectedVariants: React.Dispatch<React.SetStateAction<Record<string, string>>>;
   counts: Record<string, number>;
   setCounts: React.Dispatch<React.SetStateAction<Record<string, number>>>;
-  handleAddToCart: (variantId: string, name: string, qty?: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string, variantImage:string, qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
   colorCode?: string;
   shortenName: (name: string) => string;
@@ -101,11 +101,8 @@ const ProductCarousel: FC<Props> = ({
             [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
           }));
         try {
-          // wait for backend to confirm success
-          await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
+          await handleAddToCart(currentVariant.variant_id, currentVariant.name,currentVariant.image, 1);
 
-          // only update counts if the request succeeded
-  
         } catch (err: any) {
           console.warn("Add to cart failed:", err.message);
           setCounts(prev => ({

package/src/Chatbot/components/Messages/Carousel/CardSwiperSalla.tsx

@@ -21,7 +21,7 @@ interface Props {
   setSelectedVariants: React.Dispatch<React.SetStateAction<Record<string, string>>>;
   counts: Record<string, number>;
   setCounts: React.Dispatch<React.SetStateAction<Record<string, number>>>;
-  handleAddToCart: (variantId: string, name: string, qty: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string,variantImage:string, qty: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty: number) => Promise<void>;
   colorCode?: string; // accent
   shortenName: (name: string) => string;

package/src/Chatbot/components/Messages/Carousel/CardSwiperZid.tsx

@@ -21,7 +21,7 @@ interface Props {
   setSelectedVariants: React.Dispatch<React.SetStateAction<Record<string, string>>>;
   counts: Record<string, number>;
   setCounts: React.Dispatch<React.SetStateAction<Record<string, number>>>;
-  handleAddToCart: (variantId: string, name: string, qty: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string, variantImage:string,qty: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty: number) => Promise<void>;
   colorCode?: string; // accent
   shortenName: (name: string) => string;

package/src/Chatbot/components/Messages/ChatMessages.tsx

@@ -33,11 +33,15 @@ interface ChatMessagesProps {
   messages: Message[];
   colorCode: string;
   isLoading: boolean;
+
   handleAddToCart: (
     variantId: string,
     name: string,
-    qty?: number
+    variantImage:string,
+    qty?: number,
+    
   ) => Promise<void>;
+
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
   sessionId:string;
   isBusiness?: boolean;

package/src/Chatbot/components/Messages/SallaAssistantMessage.tsx

@@ -20,7 +20,7 @@ interface AssistantMessageProps {
   message: string;
   colorCode: string;
   isBusiness?: boolean;
-  handleAddToCart: (variantId: string, name: string, qty?: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string,variantImage:string, qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
 }
 

package/src/Chatbot/components/Messages/Support.tsx

@@ -105,7 +105,7 @@ const SupportConnect: React.FC<SupportConnectProps> = ({
           >
             <div className="flex items-center space-x-4">
               <img
-                src={data.userImage}
+                src={data.userImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaC0jamaBcOGTbS86459UezKUs2Wo0lPU_mw&s'}
                 alt="User"
                 className="w-12 h-12 rounded-full border-2"
                 style={{ borderColor: colorCode }}
@@ -117,7 +117,7 @@ const SupportConnect: React.FC<SupportConnectProps> = ({
                 </span>
               </p>
               <img
-                src={data.companyImage}
+                src={data.companyImage || 'https://cdn-icons-png.flaticon.com/512/4812/4812244.png'}
                 alt="Company"
                 className="w-12 h-12 rounded-full border"
               />

package/src/Chatbot/components/Messages/ZidAssistantMesage.tsx

@@ -20,7 +20,7 @@ interface AssistantMessageProps {
   message: string;
   colorCode: string;
   isBusiness?: boolean;
-  handleAddToCart: (variantId: string, name: string, qty?: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string,variantImage:string, qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
 }
 

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 */}