shopify-chatbot-widget 0.8.6 → 0.8.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-chatbot-widget",
   "private": false,
-  "version": "0.8.6",
+  "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(true);
-  const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger'>('sessions');
+  const [open, setOpen] = useState(false);
+  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>;
 }