shopify-chatbot-widget 1.0.8 → 1.0.10

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

@@ -2,8 +2,8 @@ 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 "./ProductSwiper.css";
+import { useTranslation } from "react-i18next";
 
 interface ProductVariant {
   variant_id: string;
@@ -22,7 +22,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,price: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;
@@ -34,7 +34,7 @@ interface Props {
   currentSlide: number;
   totalSlides: number;
   onTryOnSelect: (product: ProductVariant) => void;
-  enableTry:boolean;
+  enableTry: boolean;
 }
 
 const ProductCarousel: FC<Props> = ({
@@ -45,28 +45,25 @@ const ProductCarousel: FC<Props> = ({
   setCounts,
   handleAddToCart,
   handleRemoveFromCart,
-  colorCode = "#7F28F8",
+  colorCode = "#111111",
   shortenName,
   sliderRef,
   totalSlides,
   disableCheckout = false,
   onTryOnSelect,
-  enableTry
-  
+  enableTry,
 }) => {
+  const { t } = useTranslation();
   if (!totalSlides || totalSlides === 0) return null;
 
-  // track which variant is open for Try On
-
   return (
     <section
-      className="sallaX"
-      style={{ "--sallaX-accent": colorCode } as React.CSSProperties}
-      aria-label="Recommended products"
+      className="jwbX"
+      style={{ "--jwbX-accent": colorCode } as React.CSSProperties}
+      aria-label={t("product.recommended")}
     >
-      <div ref={sliderRef} className="keen-slider sallaX-slider">
+      <div ref={sliderRef} className="keen-slider jwbX-slider">
         {Object.entries(groupedProducts).map(([tag, group]) => {
-          // figure out current active variant within this group
           const currentVariantId =
             selectedVariants[tag] || (group.length > 0 ? group[0].variant_id : "");
           const currentVariant =
@@ -75,7 +72,6 @@ const ProductCarousel: FC<Props> = ({
 
           const count = counts[currentVariant.variant_id] || 0;
 
-          // Build unique, cleaned list of options (exclude empty/'none')
           const options = Array.from(
             new Set(
               group
@@ -84,7 +80,6 @@ const ProductCarousel: FC<Props> = ({
             )
           );
 
-          // Update active variant by chosen option
           const setActiveVariant = (option?: string) => {
             const match = group.find(v => v.option === option);
             if (match) {
@@ -95,26 +90,23 @@ const ProductCarousel: FC<Props> = ({
             }
           };
 
-          // Ensure select has a stable value (fallback to first option)
           const selectValue = currentVariant.option ?? options[0] ?? "";
 
-        const increment = async () => {
-          setCounts(prev => ({
-            ...prev,
-            [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
-          }));
-        try {
-          await handleAddToCart(currentVariant.variant_id, currentVariant.name,currentVariant.image,currentVariant.price, 1);
-
-        } catch (err: any) {
-          console.warn("Add to cart failed:", err.message);
-          setCounts(prev => ({
-            ...prev,
-            [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) - 1,
-          }));
-        }
-      };
-
+          const increment = async () => {
+            setCounts(prev => ({
+              ...prev,
+              [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) + 1,
+            }));
+            try {
+              await handleAddToCart(currentVariant.variant_id, currentVariant.name, currentVariant.image, currentVariant.price, 1);
+            } catch (err: any) {
+              console.warn("Add to cart failed:", err.message);
+              setCounts(prev => ({
+                ...prev,
+                [currentVariant.variant_id]: (prev[currentVariant.variant_id] || 0) - 1,
+              }));
+            }
+          };
 
           const decrement = async () => {
             if (count === 0) return;
@@ -128,63 +120,71 @@ const ProductCarousel: FC<Props> = ({
             await handleRemoveFromCart(currentVariant.variant_id, 1);
           };
 
-         
           return (
             <article
               key={tag}
-              className="keen-slider__slide sallaX-card"
+              className="keen-slider__slide jwbX-card"
               role="group"
               aria-roledescription="slide"
             >
-              <div className="sallaX-media" onClick={() => window.open(currentVariant.link, "_blank")}>
+              <div className="jwbX-media" onClick={() => window.open(currentVariant.link, "_blank")}>
                 <img
                   src={currentVariant.image}
                   alt={currentVariant.name}
-                  className="sallaX-img"
+                  className="jwbX-img"
                   loading="lazy"
                 />
+                <span className="jwbX-mediaShade" />
+                <span className="jwbX-priceChip" aria-label={t("product.price")}>
+                  {currentVariant.price}
+                </span>
                 <a
                   href={currentVariant.link}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="sallaX-visit"
-                  aria-label="Open product page"
+                  className="jwbX-visit"
+                  aria-label={t("product.openProduct")}
                   onClick={(e) => e.stopPropagation()}
                 >
-                  View
+                  {t('product.view')}
                 </a>
               </div>
 
-              <div className="sallaX-body">
+              <div className="jwbX-body">
                 <a
                   href={currentVariant.link}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="sallaX-name"
+                  className="jwbX-name"
                   title={currentVariant.name}
                 >
                   {shortenName(currentVariant.name)}
                 </a>
 
-                <div className="sallaX-row">
-                  <span className="sallaX-price" aria-label="Price">
-                    {currentVariant.price}
-                  </span>
-                </div>
+                {/* Variant picker: chips when few, dropdown when many */}
+                {options.length > 1 && options.length <= 3 && (
+                  <div className="jwbX-chips" role="radiogroup" aria-label={t("product.chooseOption")}>
+                    {options.map((option) => (
+                      <button
+                        key={option}
+                        type="button"
+                        role="radio"
+                        aria-checked={selectValue === option}
+                        className={`jwbX-chip ${selectValue === option ? "jwbX-chip--active" : ""}`}
+                        onClick={() => setActiveVariant(option)}
+                      >
+                        {option.replace(/^[^:]+:\s*/, "")}
+                      </button>
+                    ))}
+                  </div>
+                )}
 
-                {/* ✅ Options dropdown restored */}
-                {options.length > 1 && (
-                  <div className="sallaX-selectWrap">
-                    <label
-                      htmlFor={`sallaX-select-${tag}`}
-                      className="sallaX-selectLabel"
-                    >
-                      Choose an option
-                    </label>
+                {options.length > 3 && (
+                  <div className="jwbX-selectWrap">
                     <select
-                      id={`sallaX-select-${tag}`}
-                      className="sallaX-select"
-                      aria-label="Choose an option"
+                      id={`jwbX-select-${tag}`}
+                      className="jwbX-select"
+                      aria-label={t("product.chooseOption")}
                       value={selectValue}
                       onChange={(e) => setActiveVariant(e.target.value)}
                     >
@@ -197,56 +197,51 @@ const ProductCarousel: FC<Props> = ({
                   </div>
                 )}
 
-                <div className="flex items-center justify-between w-full space-x-4">
-                  {!disableCheckout && (
-                    <div className="sallaX-cta" aria-label="Quantity controls">
+                <div className="jwbX-actions">
+                  {!disableCheckout && count === 0 && (
+                    <button
+                      type="button"
+                      className="jwbX-add"
+                      onClick={increment}
+                    >
+                      {t('product.addToCart')}
+                    </button>
+                  )}
+
+                  {!disableCheckout && count > 0 && (
+                    <div className="jwbX-cta" aria-label={t("product.qty")}>
                       <button
                         type="button"
-                        className="sallaX-qty sallaX-qty--minus"
+                        className="jwbX-qty"
                         onClick={decrement}
-                        aria-label="Decrease quantity"
-                        disabled={count === 0}
+                        aria-label={t("product.decrease")}
                       >
                         –
                       </button>
-                      <output
-                        className="sallaX-qtyCount"
-                        aria-live="polite"
-                        aria-atomic="true"
-                      >
+                      <output className="jwbX-qtyCount" aria-live="polite" aria-atomic="true">
                         {count}
                       </output>
                       <button
                         type="button"
-                        className="sallaX-qty sallaX-qty--plus"
+                        className="jwbX-qty"
                         onClick={increment}
-                        aria-label="Increase quantity"
+                        aria-label={t("product.increase")}
                       >
                         +
                       </button>
                     </div>
                   )}
 
-                  {/* Try On toggle button (kept) */}
- 
-                  {enableTry?
-                    <Button
-                    style={{ backgroundColor: colorCode, color: "white" }}
-                    className="px-6 py-2 rounded-lg shadow-md transition"
-                    onClick={() => {
-                        onTryOnSelect(currentVariant); 
-                    }}
-                  >
-                    Try On
-                  </Button>
-                  :<></>
-                }
-                
-
+                  {enableTry && (
+                    <button
+                      type="button"
+                      className="jwbX-try"
+                      onClick={() => onTryOnSelect(currentVariant)}
+                    >
+                      {t('product.tryOn')}
+                    </button>
+                  )}
                 </div>
-
-                {/* Try On panel */}
-               
               </div>
             </article>
           );

package/src/Chatbot/components/Messages/Carousel/ProductSwiper.css

@@ -0,0 +1,361 @@
+/* ============================================
+   Product cards — compact, dashboard-styled.
+   Accent color arrives via --jwbX-accent.
+   ============================================ */
+.jwbX {
+  --jwbX-accent: #111111;
+  --jwbX-bg: #ffffff;
+  --jwbX-text: #111827;
+  --jwbX-muted: #6b7280;
+  --jwbX-border: #ececec;
+  --jwbX-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
+
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--jwbX-text);
+  background: transparent;
+  padding: 2px 0;
+}
+
+.jwbX-slider {
+  padding: 4px 2px 8px;
+}
+
+/* ===== Carousel nav (counter + arrows) ===== */
+.jwbX-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  padding-inline: 2px;
+}
+
+.jwbX-navCount {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #9ca3af;
+  font-variant-numeric: tabular-nums;
+}
+
+.jwbX-navBtns {
+  display: flex;
+  gap: 6px;
+}
+
+.jwbX-navBtn {
+  appearance: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  border: 1px solid #ececec;
+  background: #ffffff;
+  color: #111827;
+  font-size: 15px;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 2px;
+  transition: all 0.15s ease;
+}
+
+.jwbX-navBtn:hover:not(:disabled) {
+  border-color: #d1d5db;
+  background: #fafafa;
+}
+
+.jwbX-navBtn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+/* ===== Card ===== */
+.jwbX-card {
+  background: var(--jwbX-bg);
+  border: 1px solid var(--jwbX-border);
+  border-radius: 18px;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 10px 32px rgba(17, 24, 39, 0.07);
+  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.jwbX-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.06), 0 18px 44px rgba(17, 24, 39, 0.13);
+  border-color: #e0e0e0;
+}
+
+/* ===== Media ===== */
+.jwbX-media {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  background: #f6f7f9;
+  cursor: pointer;
+}
+
+.jwbX-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.4s ease;
+}
+
+.jwbX-media:hover .jwbX-img {
+  transform: scale(1.045);
+}
+
+/* soft gradient at the base of the photo — lifts the chips */
+.jwbX-mediaShade {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(17, 24, 39, 0.08), transparent 30%, transparent 62%, rgba(17, 24, 39, 0.22));
+  pointer-events: none;
+}
+
+.jwbX-priceChip {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  font-size: 12.5px;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+  padding: 6px 11px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.86);
+  backdrop-filter: blur(10px) saturate(180%);
+  -webkit-backdrop-filter: blur(10px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  color: #111827;
+  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.18);
+}
+
+.jwbX-visit {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 7px 11px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: saturate(180%) blur(10px);
+  -webkit-backdrop-filter: saturate(180%) blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.14);
+  color: var(--jwbX-text);
+  text-decoration: none;
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.jwbX-visit:hover {
+  background: #ffffff;
+  transform: translateY(-1px);
+}
+
+/* ===== Body ===== */
+.jwbX-body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.jwbX-name {
+  display: block;
+  font-weight: 700;
+  font-size: 14px;
+  letter-spacing: -0.01em;
+  color: var(--jwbX-text);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.jwbX-name:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* ===== Variant chips (≤3 options) ===== */
+.jwbX-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.jwbX-chip {
+  appearance: none;
+  border: 1px solid var(--jwbX-border);
+  background: #ffffff;
+  color: var(--jwbX-muted);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.jwbX-chip:hover {
+  border-color: #d1d5db;
+  color: var(--jwbX-text);
+}
+
+.jwbX-chip--active {
+  background: var(--jwbX-accent);
+  border-color: var(--jwbX-accent);
+  color: #ffffff;
+}
+
+/* ===== Variant dropdown (4+ options) ===== */
+.jwbX-selectWrap {
+  position: relative;
+}
+
+.jwbX-select {
+  width: 100%;
+  appearance: none;
+  background: #fafafa;
+  border: 1px solid var(--jwbX-border);
+  border-radius: 10px;
+  padding: 8px 30px 8px 11px;
+  font-size: 13px;
+  line-height: 1.2;
+  color: var(--jwbX-text);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.jwbX-select:focus {
+  outline: none;
+  border-color: var(--jwbX-accent);
+  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
+}
+
+.jwbX-selectWrap::after {
+  content: '▾';
+  position: absolute;
+  right: 11px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  font-size: 11px;
+  color: var(--jwbX-muted);
+}
+
+/* ===== Actions ===== */
+.jwbX-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.jwbX-add {
+  flex: 1;
+  appearance: none;
+  border: none;
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--jwbX-accent) 82%, #6b7280),
+    var(--jwbX-accent)
+  );
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  height: 40px;
+  border-radius: 13px;
+  cursor: pointer;
+  box-shadow: 0 6px 16px color-mix(in srgb, var(--jwbX-accent) 28%, transparent);
+  transition: box-shadow 0.15s ease, transform 0.1s ease, filter 0.15s ease;
+}
+
+.jwbX-add:hover {
+  filter: brightness(1.08);
+  box-shadow: 0 8px 22px color-mix(in srgb, var(--jwbX-accent) 38%, transparent);
+}
+
+.jwbX-add:active {
+  transform: scale(0.98);
+}
+
+.jwbX-try {
+  appearance: none;
+  background: #ffffff;
+  border: 1px solid var(--jwbX-border);
+  color: var(--jwbX-text);
+  font-size: 13px;
+  font-weight: 600;
+  height: 38px;
+  padding: 0 14px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s ease, background 0.15s ease;
+  flex-shrink: 0;
+}
+
+.jwbX-try:hover {
+  border-color: #d1d5db;
+  background: #fafafa;
+}
+
+/* Quantity stepper (shown once added) */
+.jwbX-cta {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fafafa;
+  border: 1px solid var(--jwbX-border);
+  border-radius: 12px;
+  height: 38px;
+  padding: 3px;
+  user-select: none;
+}
+
+.jwbX-qty {
+  appearance: none;
+  border: none;
+  background: var(--jwbX-accent);
+  color: #ffffff;
+  width: 30px;
+  height: 30px;
+  border-radius: 9px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: opacity 0.15s ease, transform 0.1s ease;
+}
+
+.jwbX-qty:hover {
+  opacity: 0.85;
+}
+
+.jwbX-qty:active {
+  transform: scale(0.95);
+}
+
+.jwbX-qtyCount {
+  min-width: 30px;
+  text-align: center;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+/* Motion respect */
+@media (prefers-reduced-motion: reduce) {
+  .jwbX-card,
+  .jwbX-img,
+  .jwbX-visit,
+  .jwbX-qty,
+  .jwbX-add {
+    transition: none !important;
+  }
+}

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

@@ -124,7 +124,7 @@ const TryOnBox: React.FC<TryOnProps> = ({ productImage, productID }) => {
       {/* Upload Box */}
       {!userImage && !resultImage && !loading && (
         <label className="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl w-full h-44 cursor-pointer hover:border-purple-500 hover:bg-purple-50 transition">
-          <CloudUploadOutlined style={{ fontSize: 34, marginBottom: 8, color: '#7F28F8' }} />
+          <CloudUploadOutlined style={{ fontSize: 34, marginBottom: 8, color: '#111111' }} />
           <span className="text-gray-500 font-medium">Click to upload a picture</span>
           <input
             type="file"
@@ -138,7 +138,7 @@ const TryOnBox: React.FC<TryOnProps> = ({ productImage, productID }) => {
       {/* Loader */}
       {loading && (
         <div className="flex flex-col items-center justify-center h-44 text-center">
-          <Spin indicator={<LoadingOutlined style={{ fontSize: 36, color: '#7F28F8' }} spin />} />
+          <Spin indicator={<LoadingOutlined style={{ fontSize: 36, color: '#111111' }} spin />} />
           <p className="mt-2 text-gray-700 font-medium">{loadingMessages[loadingIndex]}</p>
         </div>
       )}