shopify-chatbot-widget 0.9.2 → 0.9.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shopify-chatbot-widget",
   "private": false,
-  "version": "0.9.2",
+  "version": "0.9.3",
   "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(true);
+  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);
@@ -100,16 +100,31 @@ const Chatbot: React.FC = () => {
     const onMessage = (e: MessageEvent) => {
       const msg = (e.data || {}) as any;
       if (msg.type !== 'JAWEB_CHAT') return;
-
-      if (msg.action === 'open-ready') {
-        setOpen(true);
-      } else if (msg.action === 'closed') {
-        setOpen(false);
+  
+      switch (msg.action) {
+        case 'open-ready':
+          setOpen(true);
+          break;
+  
+        case 'closed':
+          setOpen(false);
+          break;
+  
+        case 'start-session':
+          console.log('[Chatbot] start-session message received');
+          handleNewSessionClick(); // 👈 Trigger new session automatically
+          break;
+  
+        default:
+          break;
       }
     };
+  
     window.addEventListener('message', onMessage);
     return () => window.removeEventListener('message', onMessage);
   }, []);
+  
+
 
   const requestOpen = () => {
     window.parent?.postMessage({ type: 'JAWEB_CHAT', action: 'open' }, '*');

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

@@ -37,10 +37,10 @@ const SallaProductCarousel: FC<Props> = ({
   groupedProducts,
   selectedVariants,
   setSelectedVariants,
-  // counts,
-  // setCounts,
-  // handleAddToCart,
-  // handleRemoveFromCart,
+  counts,
+  setCounts,
+  handleAddToCart,
+  handleRemoveFromCart,
   colorCode = '#7F28F8',
   shortenName,
   sliderRef,
@@ -72,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(
@@ -94,25 +94,25 @@ 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,currentVariant.image,currentVariant.price, 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)
 
@@ -180,8 +180,39 @@ const SallaProductCarousel: FC<Props> = ({
                   </div>
                 )}
 
-
-                  <Button
+<div className="flex items-center justify-between w-full space-x-4">
+                 
+                    <div className="sallaX-cta" aria-label="Quantity controls">
+                      <button
+                        type="button"
+                        className="sallaX-qty sallaX-qty--minus"
+                        onClick={decrement}
+                        aria-label="Decrease quantity"
+                        disabled={count === 0}
+                      >
+                        –
+                      </button>
+                      <output
+                        className="sallaX-qtyCount"
+                        aria-live="polite"
+                        aria-atomic="true"
+                      >
+                        {count}
+                      </output>
+                      <button
+                        type="button"
+                        className="sallaX-qty sallaX-qty--plus"
+                        onClick={increment}
+                        aria-label="Increase quantity"
+                      >
+                        +
+                      </button>
+                    </div>
+           
+
+                  {/* Try On toggle button (kept) */}
+ 
+                    <Button
                       style={{ backgroundColor: colorCode, color: "white" }}
                       className="px-6 py-2 rounded-lg shadow-md transition"
                       onClick={() =>
@@ -189,27 +220,9 @@ const SallaProductCarousel: FC<Props> = ({
                       }
                     >
                       {isTryOnOpen ? "Close Try On" : "Try On"}
-                  </Button>
-                  {/* <button
-                    type="button"
-                    className="sallaX-qty sallaX-qty--minus"
-                    onClick={decrement}
-                    aria-label="Decrease quantity"
-                    disabled={count === 0}
-                  >
-                    –
-                  </button>
-                  <output className="sallaX-qtyCount" aria-live="polite" aria-atomic="true">
-                    {count}
-                  </output>
-                  <button
-                    type="button"
-                    className="sallaX-qty sallaX-qty--plus"
-                    onClick={increment}
-                    aria-label="Increase quantity"
-                  >
-                    +
-                  </button> */}
+                    </Button>
+
+                </div>
 
                 { isTryOnOpen && (
                   <div className="mt-4">

package/src/hooks/useCheckout.tsx

@@ -22,6 +22,8 @@ export const useCartAPI = () => {
 
       if (data?.checkoutUrl) {
         // Open in parent frame for embedded chatbots
+        // window.open(data.checkoutUrl, '_blank'); // ✅ opens in new tab
+
         window.parent?.postMessage(
           {
             type: 'JAWEB_CHAT',