shopify-chatbot-widget 0.9.0 → 0.9.2

package/package.json

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

package/src/Chatbot/Chatbot.tsx

@@ -12,7 +12,7 @@ import { motion, AnimatePresence } from 'framer-motion';
 import CartLayout from './components/Cart/Index';
 
 const Chatbot: React.FC = () => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(true);
   const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | 'cartView' >('sessions');
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [HasInfo, setHasInfo] = useState(false);

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

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import {
   CloseOutlined,
   ArrowLeftOutlined,
   DeleteOutlined,
   ShoppingOutlined,
-  LoadingOutlined
+  LoadingOutlined,
 } from "@ant-design/icons";
 import { Button, Spin, message } from "antd";
 import { useCart } from "../../../hooks/useCart";
@@ -30,7 +30,30 @@ const CartLayout: React.FC<CartSessionProps> = ({
   const { checkOut } = useCartAPI();
   const [isLoading, setIsLoading] = useState(false);
 
+  /** ✅ Parse price from strings like "$2,000" or "USD 49.99" */
+  const getNumericPrice = (price?: string) => {
+    if (!price) return { symbol: '', value: 0 }
+  
+    // Extract first currency symbol (e.g. $, ₵, €, £, ₦)
+    const symbolMatch = price.match(/[^0-9.,\s]+/)
+    const symbol = symbolMatch ? symbolMatch[0] : ''
+  
+    // Extract numeric portion
+    const value = parseFloat(price.replace(/[^0-9.]/g, ''))
+    return { symbol, value: isNaN(value) ? 0 : value }
+  }
+  
 
+  /** ✅ Calculate subtotal */
+  const subtotal = useMemo(() => {
+    if (!items.length) return 0
+    return items.reduce((sum, item) => {
+      const { value } = getNumericPrice(item.price)
+      return sum + value * item.quantity
+    }, 0)
+  }, [items])
+  
+  /** ✅ Handle checkout */
   const handleCheckout = async () => {
     if (!sessionId) {
       message.warning("No session found — please start a chat first.");
@@ -48,9 +71,14 @@ const CartLayout: React.FC<CartSessionProps> = ({
     }
   };
 
-  const loadingIcon = <LoadingOutlined style={{ fontSize: 24, color: colorCode||'#7F28F8' }} spin />;
-
+  const loadingIcon = (
+    <LoadingOutlined
+      style={{ fontSize: 24, color: colorCode || "#7F28F8" }}
+      spin
+    />
+  );
 
+  /** ✅ Handle item removal */
   const handleRemove = async (variantId: string) => {
     await removeFromCart(variantId, 1);
     message.info("Item removed from cart");
@@ -79,7 +107,7 @@ const CartLayout: React.FC<CartSessionProps> = ({
           borderBottom: "1px solid #f5f5f5",
           boxShadow: "0 2px 6px rgba(0,0,0,0.03)",
           zIndex: 5,
-          height:'8%'
+          height: "8%",
         }}
       >
         <Button
@@ -117,10 +145,8 @@ const CartLayout: React.FC<CartSessionProps> = ({
           flex: 1,
           overflowY: "auto",
           padding: "16px",
-          height:'66%'
-
+          height: "66%",
         }}
-
       >
         <h3 style={{ fontWeight: 600, marginBottom: 16 }}>
           <ShoppingOutlined style={{ marginRight: 8 }} />
@@ -129,110 +155,100 @@ const CartLayout: React.FC<CartSessionProps> = ({
 
         {loading ? (
           <div style={{ textAlign: "center", marginTop: 40 }}>
-                <Spin indicator={loadingIcon} />
-             </div>
+            <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"
+          <div
             style={{
-              backgroundColor: colorCode || "black",
-              borderColor: colorCode || "black",
-              borderRadius: 6,
+              flex: 1,
+              overflowY: "auto",
+              display: "flex",
+              flexDirection: "column",
+              height: "80%",
+              gap: "12px",
+              paddingRight: "4px",
             }}
           >
-            APPLY
-          </Button>
-        </div> */}
+            {items.map((item) => {
+            const { symbol, value } = getNumericPrice(item.price)
+            const total = value * item.quantity
 
-        {/* Summary */}
+              return (
+                <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 }}>
+                    {symbol}{total.toLocaleString()}
+                    </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>
+        )}
       </div>
 
-      {/* Sticky Footer */}
+      {/* ✅ Sticky Footer with Subtotal + Checkout */}
       <div
         style={{
           position: "sticky",
@@ -246,6 +262,19 @@ const CartLayout: React.FC<CartSessionProps> = ({
           zIndex: 10,
         }}
       >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            marginBottom: "10px",
+            fontWeight: 600,
+            color: "#222",
+          }}
+        >
+          <span>Subtotal:</span>
+          <span>{subtotal.toLocaleString()}</span>
+        </div>
+
         <Button
           type="primary"
           block
@@ -260,26 +289,9 @@ const CartLayout: React.FC<CartSessionProps> = ({
             fontWeight: 600,
           }}
         >
-          <span style={{color:'white'}}>
-          CHECKOUT
-
-          </span>
+          <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>
   );
 };

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

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

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, variantImage:string, qty?: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string, variantImage:string,price:string,  qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
   colorCode?: string;
   shortenName: (name: string) => string;
@@ -101,7 +101,7 @@ const ProductCarousel: FC<Props> = ({
             [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
           }));
         try {
-          await handleAddToCart(currentVariant.variant_id, currentVariant.name,currentVariant.image, 1);
+          await handleAddToCart(currentVariant.variant_id, currentVariant.name,currentVariant.image,currentVariant.price, 1);
 
         } catch (err: any) {
           console.warn("Add to cart failed:", err.message);

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,variantImage:string, qty: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string,variantImage:string,price: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, variantImage:string,qty: number) => Promise<void>;
+  handleAddToCart: (variantId: string, name: string, variantImage:string,price: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

@@ -38,6 +38,7 @@ interface ChatMessagesProps {
     variantId: string,
     name: string,
     variantImage:string,
+    price:string,
     qty?: number,
     
   ) => Promise<void>;

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

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

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

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

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

@@ -414,10 +414,10 @@ const socket = useChatSocket(sessionId, handleSocketData);
   }
   
   const handleToCart = useCallback(
-    async (variantId: string, name: string, variantImage: string, qty = 1) => {
+    async (variantId: string, name: string, variantImage: string,price: string ,qty = 1) => {
       try {
-        await addToCart(variantId, name, qty, variantImage);
-  
+        await addToCart(variantId, name, qty, variantImage,price);
+
         const shortName = shorten(name, 20);
         setNotification(`✅ ${qty}× ${shortName} added to cart`);
       } catch (err: any) {

package/src/hooks/useCart.tsx

@@ -1,116 +1,124 @@
-import { useState, useEffect, useCallback } from 'react';
-import config from './config';
+import { useState, useEffect, useCallback } from 'react'
+import config from './config'
 
 export interface CartItem {
-  variantId: string;
-  name: string;
-  quantity: number;
-  variantImage: string;
+  variantId: string
+  name: string
+  quantity: number
+  variantImage: string
+  price: string
 }
 
 export function useCart(sessionId: string) {
-  const [items, setItems] = useState<CartItem[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [items, setItems] = useState<CartItem[]>([])
+  const [loading, setLoading] = useState(false)
 
   // ✅ Fetch current cart
   const fetchCart = useCallback(async () => {
-    if (!sessionId) return;
-
-    setLoading(true);
+    if (!sessionId) return
+    setLoading(true)
     try {
-      const res = await fetch(`${config.apiUrl}cart/?session_id=${sessionId}`);
-      const json = await res.json();
-      setItems(json.items || []);
+      const res = await fetch(`${config.apiUrl}cart/?session_id=${sessionId}`)
+      if (!res.ok) throw new Error('Failed to fetch cart')
+      const json = await res.json()
+      setItems(json.items || [])
     } catch (err) {
-      console.error('Failed to fetch cart', err);
+      console.error('Failed to fetch cart:', err)
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  }, [sessionId]);
+  }, [sessionId])
 
-  // ✅ Add to Cart (includes image)
-  const addToCart = async (
-    variantId: string,
-    name: string,
-    qty: number,
-    variantImage: string
-  ) => {
-    if (!sessionId) return;
+  // ✅ Add item to cart
+  const addToCart = useCallback(
+    async (variantId: string, name: string, qty: number, variantImage: string, price: string) => {
+      if (!sessionId) return
+      try {
+        const res = await fetch(`${config.apiUrl}cart/add/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            session_id: sessionId,
+            variantId,
+            name,
+            quantity: qty,
+            variantImage,
+            price,
+          }),
+        })
 
-    try {
-      const res = await fetch(`${config.apiUrl}cart/add/`, {
-        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')
 
-      const json = await res.json();
-      if (!res.ok) {
-        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, price },
+          ]
+        })
+      } catch (err) {
+        console.error('Error adding to cart:', err)
+      } finally {
+        // ✅ Always reconcile with backend
+        await fetchCart()
       }
+    },
+    [sessionId, fetchCart]
+  )
 
-      // ✅ Optimistic update
-      setItems((current) => {
-        const found = current.find((i) => i.variantId === variantId);
-        if (found) {
-          return current.map((i) =>
+  // ✅ Remove item from cart
+  const removeFromCart = useCallback(
+    async (variantId: string, qty: number) => {
+      if (!sessionId) return
+
+      // Optimistic update
+      setItems((current) =>
+        current
+          .map((i) =>
             i.variantId === variantId
-              ? { ...i, quantity: i.quantity + qty }
+              ? { ...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 with server
-  };
-
-  // ✅ Remove from Cart
-  const removeFromCart = async (variantId: string, qty: number) => {
-    if (!sessionId) return;
+          )
+          .filter((i) => i.quantity > 0)
+      )
 
-    // Optimistic update
-    setItems((current) =>
-      current
-        .map((i) =>
-          i.variantId === variantId
-            ? { ...i, quantity: i.quantity - qty }
-            : i
-        )
-        .filter((i) => i.quantity > 0)
-    );
+      try {
+        const res = await fetch(`${config.apiUrl}cart/remove/`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            session_id: sessionId,
+            variantId,
+            quantity: qty,
+          }),
+        })
 
-    try {
-      await fetch(`${config.apiUrl}cart/remove/`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          session_id: sessionId,
-          variantId,
-          quantity: qty,
-        }),
-      });
-    } catch (err) {
-      console.error('Error removing from cart:', err);
-    }
-
-    await fetchCart(); // ✅ reconcile with server
-  };
+        if (!res.ok) {
+          const json = await res.json()
+          throw new Error(json.error || 'Failed to remove item')
+        }
+      } catch (err) {
+        console.error('Error removing from cart:', err)
+      } finally {
+        await fetchCart()
+      }
+    },
+    [sessionId, fetchCart]
+  )
 
-  // ✅ Fetch cart on mount
+  // ✅ Initial fetch
   useEffect(() => {
-    fetchCart();
-  }, [fetchCart]);
+    fetchCart()
+  }, [fetchCart])
 
-  return { items, loading, addToCart, removeFromCart, refresh: fetchCart };
+  return { items, loading, addToCart, removeFromCart, refresh: fetchCart }
 }