shopify-chatbot-widget 0.8.4 → 0.8.6

package/package.json

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

package/src/Chatbot/Chatbot.tsx

@@ -11,7 +11,7 @@ import { Spin } from 'antd';
 import { motion, AnimatePresence } from 'framer-motion';
 
 const Chatbot: React.FC = () => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(true);
   const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger'>('sessions');
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [HasInfo, setHasInfo] = useState(false);
@@ -30,6 +30,7 @@ const Chatbot: React.FC = () => {
     isFetchingDetails,
     calendly,
     disbleCheckout,
+    chatbotName,
   } = useChatbotData();
 
   const [visitorData, setVisitorData] = useState<{ visitorId: string; country: string } | null>(null);
@@ -43,7 +44,7 @@ const Chatbot: React.FC = () => {
       const newSessionId = crypto.randomUUID();
       setActiveSessionId(newSessionId);
       setActiveAgentImage(chatbotLogo);
-      setActiveAgentName('Ai Agent');
+      setActiveAgentName(chatbotName);
       setNewSession(true);
       setViewMode('messenger');
     }
@@ -188,7 +189,7 @@ const Chatbot: React.FC = () => {
                   <Messenger
                     sessionId={activeSessionId}
                     chatbotLogo={activeAgentImage || chatbotLogo}
-                    agentName={activeAgentName || 'Ai Assistant'}
+                    agentName={activeAgentName || chatbotName || "Ai Assistant"}
                     colorCode={colorCode}
                     messagesSuggestions={messagesSuggestions}
                     newSession={newSession}

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

@@ -1,8 +1,10 @@
-import React from 'react';
+import React,{useState} from 'react';
 import type { FC } from 'react';
 import 'keen-slider/keen-slider.min.css';
 import type { KeenSliderInstance } from 'keen-slider/react';
 import './SallaSwiper.css';
+import { Button } from 'antd';
+import TryOnBox from "./TryOn";
 
 interface ProductVariant {
   variant_id: string;
@@ -35,10 +37,10 @@ const SallaProductCarousel: FC<Props> = ({
   groupedProducts,
   selectedVariants,
   setSelectedVariants,
-  counts,
-  setCounts,
-  handleAddToCart,
-  handleRemoveFromCart,
+  // counts,
+  // setCounts,
+  // handleAddToCart,
+  // handleRemoveFromCart,
   colorCode = '#7F28F8',
   shortenName,
   sliderRef,
@@ -47,6 +49,7 @@ const SallaProductCarousel: FC<Props> = ({
   totalSlides,
 }) => {
   if (!totalSlides || totalSlides === 0) return null;
+  const [openTryOn, setOpenTryOn] = useState<string | null>(null);
 
   return (
     <section
@@ -69,7 +72,7 @@ const SallaProductCarousel: FC<Props> = ({
 
           if (!currentVariant) return null;
 
-          const count = counts[currentVariant.variant_id] || 0;
+          // const count = counts[currentVariant.variant_id] || 0;
 
           // Build unique, cleaned list of options (exclude empty/'none')
           const options = Array.from(
@@ -91,27 +94,30 @@ const SallaProductCarousel: FC<Props> = ({
             }
           };
 
-          const increment = async () => {
-            setCounts(prev => ({
-              ...prev,
-              [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
-            }));
-            await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
-          };
-
-          const decrement = async () => {
-            if (count === 0) return;
-            setCounts(prev => ({
-              ...prev,
-              [currentVariant.variant_id]: Math.max(
-                0,
-                (prev[currentVariant.variant_id] || 0) - 1
-              ),
-            }));
-            await handleRemoveFromCart(currentVariant.variant_id, 1);
-          };
+          // const increment = async () => {
+          //   setCounts(prev => ({
+          //     ...prev,
+          //     [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
+          //   }));
+          //   await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
+          // };
+
+          // const decrement = async () => {
+          //   if (count === 0) return;
+          //   setCounts(prev => ({
+          //     ...prev,
+          //     [currentVariant.variant_id]: Math.max(
+          //       0,
+          //       (prev[currentVariant.variant_id] || 0) - 1
+          //     ),
+          //   }));
+          //   await handleRemoveFromCart(currentVariant.variant_id, 1);
+          // };
 
           // Ensure the select has a stable value (fallback to first option)
+
+          const isTryOnOpen = openTryOn === currentVariant.variant_id;
+
           const selectValue = (currentVariant.option ?? options[0] ?? '');
 
           return (
@@ -174,8 +180,17 @@ const SallaProductCarousel: FC<Props> = ({
                   </div>
                 )}
 
-                <div className="sallaX-cta" aria-label="Quantity controls">
-                  <button
+
+                  <Button
+                      style={{ backgroundColor: colorCode, color: "white" }}
+                      className="px-6 py-2 rounded-lg shadow-md transition"
+                      onClick={() =>
+                        setOpenTryOn(isTryOnOpen ? null : currentVariant.variant_id)
+                      }
+                    >
+                      {isTryOnOpen ? "Close Try On" : "Try On"}
+                  </Button>
+                  {/* <button
                     type="button"
                     className="sallaX-qty sallaX-qty--minus"
                     onClick={decrement}
@@ -194,8 +209,14 @@ const SallaProductCarousel: FC<Props> = ({
                     aria-label="Increase quantity"
                   >
                     +
-                  </button>
-                </div>
+                  </button> */}
+
+                { isTryOnOpen && (
+                  <div className="mt-4">
+                    <TryOnBox productID={currentVariant.variant_id} productImage={currentVariant.image} />
+                  </div>
+                )}
+
               </div>
             </article>
           );

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

@@ -1,8 +1,10 @@
-import React from 'react';
+import React,{useState} from 'react';
 import type { FC } from 'react';
 import 'keen-slider/keen-slider.min.css';
 import type { KeenSliderInstance } from 'keen-slider/react';
+import { Button } from 'antd';
 import './SallaSwiper.css';
+import TryOnBox from "./TryOn";
 
 interface ProductVariant {
   variant_id: string;
@@ -31,14 +33,16 @@ interface Props {
   totalSlides: number;
 }
 
+
+
 const ZidProductCarousel: FC<Props> = ({
   groupedProducts,
   selectedVariants,
   setSelectedVariants,
-  counts,
-  setCounts,
-  handleAddToCart,
-  handleRemoveFromCart,
+  // counts,
+  // setCounts,
+  // handleAddToCart,
+  // handleRemoveFromCart,
   colorCode = '#7F28F8',
   shortenName,
   sliderRef,
@@ -46,6 +50,9 @@ const ZidProductCarousel: FC<Props> = ({
   // currentSlide,   // currently unused
   totalSlides,
 }) => {
+
+  const [openTryOn, setOpenTryOn] = useState<string | null>(null);
+
   if (!totalSlides || totalSlides === 0) return null;
 
   return (
@@ -69,7 +76,7 @@ const ZidProductCarousel: FC<Props> = ({
 
           if (!currentVariant) return null;
 
-          const count = counts[currentVariant.variant_id] || 0;
+          // const count = counts[currentVariant.variant_id] || 0;
 
           // Build unique, cleaned list of options (exclude empty/'none')
           const options = Array.from(
@@ -91,25 +98,27 @@ const ZidProductCarousel: FC<Props> = ({
             }
           };
 
-          const increment = async () => {
-            setCounts(prev => ({
-              ...prev,
-              [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
-            }));
-            await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
-          };
-
-          const decrement = async () => {
-            if (count === 0) return;
-            setCounts(prev => ({
-              ...prev,
-              [currentVariant.variant_id]: Math.max(
-                0,
-                (prev[currentVariant.variant_id] || 0) - 1
-              ),
-            }));
-            await handleRemoveFromCart(currentVariant.variant_id, 1);
-          };
+          // const increment = async () => {
+          //   setCounts(prev => ({
+          //     ...prev,
+          //     [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
+          //   }));
+          //   await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
+          // };
+
+          // const decrement = async () => {
+          //   if (count === 0) return;
+          //   setCounts(prev => ({
+          //     ...prev,
+          //     [currentVariant.variant_id]: Math.max(
+          //       0,
+          //       (prev[currentVariant.variant_id] || 0) - 1
+          //     ),
+          //   }));
+          //   await handleRemoveFromCart(currentVariant.variant_id, 1);
+          // };
+
+          const isTryOnOpen = openTryOn === currentVariant.variant_id;
 
           // Ensure the select has a stable value (fallback to first option)
           const selectValue = (currentVariant.option ?? options[0] ?? '');
@@ -174,7 +183,20 @@ const ZidProductCarousel: FC<Props> = ({
                   </div>
                 )}
 
-                <div className="sallaX-cta" aria-label="Quantity controls">
+
+
+                  <Button
+                      style={{ backgroundColor: colorCode, color: "white" }}
+                      className="px-6 py-2 rounded-lg shadow-md transition"
+                      onClick={() =>
+                        setOpenTryOn(isTryOnOpen ? null : currentVariant.variant_id)
+                      }
+                    >
+                      {isTryOnOpen ? "Close Try On" : "Try On"}
+                    </Button>
+
+ 
+                {/* <div className="sallaX-cta" aria-label="Quantity controls">
                   <button
                     type="button"
                     className="sallaX-qty sallaX-qty--minus"
@@ -195,7 +217,13 @@ const ZidProductCarousel: FC<Props> = ({
                   >
                     +
                   </button>
-                </div>
+                </div> */}
+              { isTryOnOpen && (
+                  <div className="mt-4">
+                    <TryOnBox productID={currentVariant.variant_id} productImage={currentVariant.image} />
+                  </div>
+                )}
+
               </div>
             </article>
           );

package/src/hooks/useChatbotData.tsx

@@ -25,6 +25,7 @@ export const useChatbotData = () => {
   const [restSuggestions, setRestSuggestions] = useState<string[]>([]);
   const [userType,setUserType]=useState('')
   const [disbleCheckout, setDisbleCheckout] = useState(false);
+  const [chatbotName,setchatbotName]=useState('')
 
 
   const fetchData = async (retryCount = 0) => {
@@ -67,6 +68,7 @@ export const useChatbotData = () => {
       setUserType(data.mode)
       setCalendly(data.calendly_link ?? null);
       setDisbleCheckout(data.disable_checkout)
+      setchatbotName(data.chatbot_name)
 
 
 
@@ -127,6 +129,7 @@ export const useChatbotData = () => {
     messagesSuggestions,
     restSuggestions,
     userType,
-    disbleCheckout
+    disbleCheckout,
+    chatbotName
   };
 };

package/src/types/chatbot.ts

@@ -14,6 +14,7 @@ export interface ChatbotDetailsResponse {
     phone_number_id?: string | null;
     mode:string;
     disable_checkout:boolean;
+    chatbot_name:string;
   };
 }