shopify-chatbot-widget 1.0.6 → 1.0.8

package/package.json

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

package/src/Chatbot/Chatbot.tsx

@@ -269,6 +269,8 @@ const [viewMode, setViewMode] = useState<'sessions' | 'create' | 'messenger' | '
                 handleRemoveFromCart={handleRemoveFromCart}
                 counts={counts}
                 setCounts={setCounts}
+                addToCart={disbleCheckout}
+                userType={userType}
               />
             </motion.div>
           )}

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

@@ -1,10 +1,9 @@
-import React,{useState} from 'react';
+import React 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;
@@ -31,25 +30,22 @@ interface Props {
   sliderInstance: React.MutableRefObject<KeenSliderInstance | null>;
   currentSlide: number;
   totalSlides: number;
+  onTryOnSelect: (product: ProductVariant) => void;
+  enableTry:boolean;
 }
 
 const SallaProductCarousel: FC<Props> = ({
   groupedProducts,
   selectedVariants,
   setSelectedVariants,
-  counts,
-  setCounts,
-  handleAddToCart,
-  handleRemoveFromCart,
   colorCode = '#7F28F8',
   shortenName,
   sliderRef,
-  // sliderInstance, // currently unused
-  // currentSlide,   // currently unused
   totalSlides,
+  onTryOnSelect,
+  enableTry
 }) => {
   if (!totalSlides || totalSlides === 0) return null;
-  const [openTryOn, setOpenTryOn] = useState<string | null>(null);
 
   return (
     <section
@@ -72,8 +68,6 @@ const SallaProductCarousel: FC<Props> = ({
 
           if (!currentVariant) return null;
 
-          const count = counts[currentVariant.variant_id] || 0;
-
           // Build unique, cleaned list of options (exclude empty/'none')
           const options = Array.from(
             new Set(
@@ -94,29 +88,9 @@ 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,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)
 
-          const isTryOnOpen = openTryOn === currentVariant.variant_id;
 
           const selectValue = (currentVariant.option ?? options[0] ?? '');
 
@@ -179,56 +153,27 @@ const SallaProductCarousel: FC<Props> = ({
                     </select>
                   </div>
                 )}
-
-<div className="flex items-center justify-between w-full space-x-4">
+                
+                <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}
+                    {enableTry?
+                        <Button
+                        style={{ backgroundColor: colorCode, color: "white" }}
+                        className="px-6 py-2 rounded-lg shadow-md transition"
+                        onClick={() => {
+                            onTryOnSelect(currentVariant); 
+                        }}
                       >
-                        –
-                      </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={() =>
-                        setOpenTryOn(isTryOnOpen ? null : currentVariant.variant_id)
-                      }
-                    >
-                      {isTryOnOpen ? "Close Try On" : "Try On"}
-                    </Button>
+                        Try On
+                      </Button>
+                      :<></>
+                    }
+                                    
+                    
 
                 </div>
 
-                { 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,10 +1,10 @@
-import React,{useState} from 'react';
+import React 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,6 +31,8 @@ interface Props {
   sliderInstance: React.MutableRefObject<KeenSliderInstance | null>;
   currentSlide: number;
   totalSlides: number;
+    onTryOnSelect: (product: ProductVariant) => void;
+  enableTry:boolean;
 }
 
 
@@ -39,19 +41,14 @@ const ZidProductCarousel: FC<Props> = ({
   groupedProducts,
   selectedVariants,
   setSelectedVariants,
-  // counts,
-  // setCounts,
-  // handleAddToCart,
-  // handleRemoveFromCart,
   colorCode = '#7F28F8',
   shortenName,
   sliderRef,
-  // sliderInstance, // currently unused
-  // currentSlide,   // currently unused
   totalSlides,
+    onTryOnSelect,
+  enableTry
 }) => {
 
-  const [openTryOn, setOpenTryOn] = useState<string | null>(null);
 
   if (!totalSlides || totalSlides === 0) return null;
 
@@ -118,7 +115,6 @@ const ZidProductCarousel: FC<Props> = ({
           //   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] ?? '');
@@ -185,44 +181,20 @@ const ZidProductCarousel: FC<Props> = ({
 
 
 
-                  <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"
-                    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> */}
-              { isTryOnOpen && (
-                  <div className="mt-4">
-                    <TryOnBox productID={currentVariant.variant_id} productImage={currentVariant.image} />
-                  </div>
-                )}
+                  {enableTry?
+                        <Button
+                        style={{ backgroundColor: colorCode, color: "white" }}
+                        className="px-6 py-2 rounded-lg shadow-md transition"
+                        onClick={() => {
+                            onTryOnSelect(currentVariant); 
+                        }}
+                      >
+                        Try On
+                      </Button>
+                      :<></>
+                    }
+                                  
+                  
 
               </div>
             </article>

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

@@ -270,6 +270,8 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
                     colorCode={colorCode}
                     handleAddToCart={handleAddToCart}
                     handleRemoveFromCart={handleRemoveFromCart}
+                              onTryOnSelect={onTryOnSelect}
+                    enableTry={enableTry}
                     // enableTry={enableTry}
 
                     />
@@ -279,6 +281,8 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
                     colorCode={colorCode}
                     handleAddToCart={handleAddToCart}
                     handleRemoveFromCart={handleRemoveFromCart}
+                              onTryOnSelect={onTryOnSelect}
+                    enableTry={enableTry}
                     // enableTry={enableTry}
 
                   />

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

@@ -22,7 +22,8 @@ interface AssistantMessageProps {
   isBusiness?: boolean;
   handleAddToCart: (variantId: string, name: string,variantImage:string,price:string,  qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
-
+   onTryOnSelect: (product: any) => void; // Add this
+enableTry:boolean;
 }
 
 const SallaAsssiatnt: FC<AssistantMessageProps> = ({
@@ -30,6 +31,8 @@ const SallaAsssiatnt: FC<AssistantMessageProps> = ({
   colorCode,
   handleAddToCart,
   handleRemoveFromCart,
+    onTryOnSelect,
+  enableTry
 }) => {
   const [counts, setCounts] = useState<Record<string, number>>({});
   const [selectedVariants, setSelectedVariants] = useState<Record<string, string>>({});
@@ -185,6 +188,8 @@ const SallaAsssiatnt: FC<AssistantMessageProps> = ({
           currentSlide={currentSlide}
           totalSlides={totalSlides}
           sliderRef={sliderRef}
+          onTryOnSelect={onTryOnSelect}
+          enableTry={enableTry}
 
         />
         </div>

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

@@ -22,7 +22,8 @@ interface AssistantMessageProps {
   isBusiness?: boolean;
   handleAddToCart: (variantId: string, name: string,variantImage:string,price:string, qty?: number) => Promise<void>;
   handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
-
+   onTryOnSelect: (product: any) => void; // Add this
+enableTry:boolean;
 }
 
 const SallaAsssiatnt: FC<AssistantMessageProps> = ({
@@ -30,6 +31,8 @@ const SallaAsssiatnt: FC<AssistantMessageProps> = ({
   colorCode,
   handleAddToCart,
   handleRemoveFromCart,
+    onTryOnSelect,
+  enableTry
   
 }) => {
   const [counts, setCounts] = useState<Record<string, number>>({});
@@ -186,6 +189,8 @@ const SallaAsssiatnt: FC<AssistantMessageProps> = ({
           currentSlide={currentSlide}
           totalSlides={totalSlides}
           sliderRef={sliderRef}
+          onTryOnSelect={onTryOnSelect}
+          enableTry={enableTry}
 
         />
         </div>

package/src/Chatbot/components/TryOn/View.tsx

@@ -31,6 +31,8 @@ interface TryOnProps {
   counts: Record<string, number>;
   setCounts: React.Dispatch<React.SetStateAction<Record<string, number>>>;
   visitorId?: string;
+  addToCart?:boolean
+  userType: string;
 }
 
 interface UploadResponse {
@@ -55,6 +57,9 @@ const TryOnLayout: React.FC<TryOnProps> = ({
   handleRemoveFromCart,
   counts,
   setCounts,
+  addToCart,
+  userType
+  
 }) => {
   const [isGenerating, setIsGenerating] = useState(false);
   const [generatedImage, setGeneratedImage] = useState<string | null>(null);
@@ -297,7 +302,9 @@ const TryOnLayout: React.FC<TryOnProps> = ({
     </>
   );
 
-  const showCartControls = currentState === 'generated' && !isGenerating;
+  const hideCart = ['zid', 'email', 'salla'].includes(userType);
+  const showCartControls = !addToCart && !hideCart && currentState === 'generated' && !isGenerating;
+
 
   return (
     <div style={{
@@ -353,7 +360,7 @@ const TryOnLayout: React.FC<TryOnProps> = ({
           </div>
 
           {/* +/- stepper (only after try-on generated) */}
-          {showCartControls ? (
+          {showCartControls  ? (
             <div style={{
               display: 'flex', alignItems: 'center', background: '#f5f5f7',
               borderRadius: 12, padding: 4, flexShrink: 0, animation: 'slideUp 0.3s ease',
@@ -387,11 +394,11 @@ const TryOnLayout: React.FC<TryOnProps> = ({
                 aria-label="Increase quantity"
               >+</button>
             </div>
-          ) : (
+         ) : (!addToCart && !hideCart) ? (
             <div style={{ fontSize: 11, color: '#bbb', textAlign: 'right', lineHeight: 1.3, flexShrink: 0 }}>
               Try it on first,<br/>then add to cart
             </div>
-          )}
+          ) : null}
         </div>
       </div>