shopify-chatbot-widget 0.7.8 → 0.8.0

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

@@ -0,0 +1,123 @@
+import React, { useEffect, useRef, useState } from "react";
+import WaveSurfer from "wavesurfer.js";
+import {
+  PlayCircleOutlined,
+  PauseCircleOutlined
+} from "@ant-design/icons";
+
+interface AudioVisualizerProps {
+  link: string;
+  colorCode: string;
+  transcription?: string;
+}
+
+const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
+  link,
+  colorCode,
+  transcription,
+}) => {
+  const audioRef = useRef<HTMLDivElement | null>(null);
+  const wavesurferRef = useRef<WaveSurfer | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [showTranscription, setShowTranscription] = useState(false);
+
+  useEffect(() => {
+    if (!audioRef.current) return;
+
+    wavesurferRef.current?.destroy();
+
+    wavesurferRef.current = WaveSurfer.create({
+      container: audioRef.current,
+      waveColor: "white",
+      progressColor: "white",
+      cursorWidth: 0,
+      barWidth: 3,
+      barHeight: 1.5,
+      barGap: 2,
+      height: 40,
+      interact: true,
+    });
+
+    wavesurferRef.current.load(link);
+    wavesurferRef.current.on("finish", () => setIsPlaying(false));
+
+    return () => {
+      wavesurferRef.current?.destroy();
+    };
+  }, [link, colorCode]);
+
+  const togglePlay = () => {
+    if (wavesurferRef.current) {
+      wavesurferRef.current.playPause();
+      setIsPlaying((prev) => !prev);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        backgroundColor:colorCode,
+        padding: "12px",
+        borderRadius: "20px",
+        color: "white",
+        maxWidth: "350px",
+        marginBottom: "16px",
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <button
+          onClick={togglePlay}
+          style={{
+            background: "transparent",
+            border: "none",
+            color: "white",
+            marginRight: "12px",
+            cursor: "pointer",
+          }}
+        >
+          {isPlaying ? (
+            <PauseCircleOutlined style={{ fontSize: "24px" }} />
+          ) : (
+            <PlayCircleOutlined style={{ fontSize: "24px" }} />
+          )}
+        </button>
+
+        <div
+            ref={audioRef}
+            style={{
+                width: "130px",
+                height: "40px",
+                overflow: "hidden",
+                color:'white'
+            }}
+            />
+
+      </div>
+
+      {transcription && (
+        <div style={{ marginTop: "12px", fontSize: "14px", color: "rgba(255,255,255,0.85)" }}>
+          <button
+            onClick={() => setShowTranscription(!showTranscription)}
+            style={{
+              background: "none",
+              border: "none",
+              color: "white",
+              textDecoration: "underline",
+              fontSize: "13px",
+              cursor: "pointer",
+              padding: 0,
+            }}
+          >
+            {showTranscription ? "Hide transcript" : "Show transcript"}
+          </button>
+
+          {showTranscription && (
+            <p style={{ marginTop: "6px", lineHeight: "1.4" }}>{transcription}</p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AudioVisualizer;

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

@@ -0,0 +1,66 @@
+import  { useEffect, useRef, useState } from 'react';
+
+interface CalendlyEmbedsProps {
+  calendlyLink: string;
+}
+
+declare global {
+  interface Window {
+    Calendly?: {
+      initInlineWidget: (options: {
+        url: string;
+        parentElement: HTMLElement;
+        prefill?: Record<string, unknown>;
+        utm?: Record<string, unknown>;
+      }) => void;
+    };
+  }
+}
+
+export default function CalendlyEmbeds({ calendlyLink }: CalendlyEmbedsProps) {
+  const calendlyRef = useRef<HTMLDivElement | null>(null); // Typed ref
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+
+  useEffect(() => {
+    // Only load the script if it's not already loaded
+    if (!window.Calendly) {
+      const script = document.createElement("script");
+      script.src = "https://assets.calendly.com/assets/external/widget.js";
+      script.async = true;
+      script.onload = () => setScriptLoaded(true);
+      document.body.appendChild(script);
+
+      return () => {
+        document.body.removeChild(script);
+      };
+    } else {
+      setScriptLoaded(true); // Calendly already loaded
+    }
+  }, []);
+
+  useEffect(() => {
+    if (scriptLoaded && calendlyLink && calendlyRef.current && window.Calendly) {
+      // Initialize Calendly widget once the script is loaded and the ref container is available
+      window.Calendly.initInlineWidget({
+        url: calendlyLink,
+        parentElement: calendlyRef.current,
+        prefill: {},
+        utm: {},
+      });
+    }
+  }, [scriptLoaded, calendlyLink]);
+
+  return (
+    <div
+      ref={calendlyRef}
+      style={{
+        minWidth: '320px',
+        height: '350px',
+        borderRadius: '8px',
+        boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
+      }}
+    >
+      {/* Calendly widget will be injected here */}
+    </div>
+  );
+}

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

@@ -0,0 +1,194 @@
+import React from 'react';
+import type { FC } from 'react';
+import 'keen-slider/keen-slider.min.css';
+import type { KeenSliderInstance } from 'keen-slider/react';
+
+
+interface ProductVariant {
+  variant_id: string;
+  name: string;
+  image: string;
+  link: string;
+  price: string;
+  color?: string;
+  size?: string;
+}
+
+interface Props {
+  groupedProducts: Record<string, ProductVariant[]>;
+  selectedVariants: Record<string, string>;
+  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, qty: number) => Promise<void>;
+  handleRemoveFromCart: (variantId: string, qty: number) => Promise<void>;
+  colorCode?: string;
+  shortenName: (name: string) => string;
+
+  sliderRef: React.Ref<HTMLDivElement>;
+  sliderInstance: React.MutableRefObject<KeenSliderInstance | null>;
+  currentSlide: number;
+  totalSlides: number;
+}
+
+const ProductCarousel: FC<Props> = ({
+  groupedProducts,
+  selectedVariants,
+  setSelectedVariants,
+  counts,
+  setCounts,
+  handleAddToCart,
+  handleRemoveFromCart,
+  colorCode = '#7F28F8',
+  shortenName,
+  sliderRef,
+  totalSlides,
+}) => {
+ 
+
+  if (totalSlides === 0) return null;
+
+  return (
+    <div className="relative w-full">
+      {/* Slider container with padding for arrow overlay */}
+      <div ref={sliderRef} className="keen-slider relative px-8">
+        {Object.entries(groupedProducts).map(([tag, group]) => {
+          const currentVariantId = selectedVariants[tag] || group[0].variant_id;
+          const currentVariant = group.find(v => v.variant_id === currentVariantId) || group[0];
+          const count = counts[currentVariant.variant_id] || 0;
+
+          const colors = Array.from(
+            new Set(
+              group.map(v => v.color?.trim() || '').filter(c => c && c.toLowerCase() !== 'none')
+            )
+          );
+          const sizes = Array.from(
+            new Set(
+              group.map(v => v.size?.trim() || '').filter(s => s && s.toLowerCase() !== 'none')
+            )
+          );
+
+          const isComboValid = (color?: string, size?: string) =>
+            group.some(v => v.color === color && v.size === size);
+
+          const setActiveVariant = (color?: string, size?: string) => {
+            const match = group.find(
+              v => (!color || v.color === color) && (!size || v.size === size)
+            );
+            if (match) {
+              setSelectedVariants(prev => ({
+                ...prev,
+                [tag]: match.variant_id,
+              }));
+            }
+          };
+
+          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]: prev[currentVariant.variant_id] - 1,
+            }));
+            await handleRemoveFromCart(currentVariant.variant_id, 1);
+          };
+
+          return (
+            <div key={tag} className="keen-slider__slide">
+            <div className="product-card">
+                <div className="product-image-container">
+                  <img
+                    src={currentVariant.image}
+                    alt={currentVariant.name}
+                    className="product-image"
+                    onClick={() => window.open(currentVariant.link, '_blank')}
+                  />
+                </div>
+                <div className="product-details">
+                  <a
+                    href={currentVariant.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="product-name"
+                  >
+                    {shortenName(currentVariant.name)}
+                  </a>
+                  <p className="product-price">{currentVariant.price}</p>
+
+                  {colors.length > 0 && (
+                    <div>
+                      <p className="label">Color:</p>
+                      <div className="color-options">
+                        {colors.map(color => {
+                          const disabled = !isComboValid(color, currentVariant.size);
+                          const isActive = color === currentVariant.color;
+                          return (
+                            <button
+                              key={color}
+                              disabled={disabled}
+                              onClick={() => setActiveVariant(color, currentVariant.size)}
+                              className={`color-button ${isActive ? 'active' : ''} ${disabled ? 'disabled' : ''}`}
+                              style={isActive ? { backgroundColor: colorCode, color: '#fff' } : {}}
+                            >
+                              {color === 'None' ? 'One Color' : color}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  {sizes.length > 0 && (
+                    <div>
+                      <p className="label">Size:</p>
+                      <div className="size-options">
+                        {sizes.map(size => {
+                          const disabled = !isComboValid(currentVariant.color, size);
+                          const isActive = size === currentVariant.size;
+                          return (
+                            <button
+                              key={size}
+                              disabled={disabled}
+                              onClick={() => setActiveVariant(currentVariant.color, size)}
+                              className={`size-button ${isActive ? 'active' : ''} ${disabled ? 'disabled' : ''}`}
+                              style={isActive ? { backgroundColor: colorCode, color: '#fff' } : {}}
+                            >
+                              {size === 'None' ? 'One size' : size}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="cart-controls">
+                    <button onClick={decrement} className="cart-button">–</button>
+                    <span className="cart-count">{count}</span>
+                    <button
+                      onClick={increment}
+                      className="cart-button increment"
+                      style={{ backgroundColor: colorCode, color: '#fff' }}
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+
+
+      </div>
+    </div>
+  );
+};
+
+export default ProductCarousel;

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

@@ -0,0 +1,264 @@
+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;
+  name: string;
+  image: string;
+  link: string;
+  price: string;
+  option?: string;       // e.g. "Red - XL"
+  variant_tag_name: string;
+  tag?: string;          // optional: "clothing" | "jewelry" | ...
+}
+
+interface Props {
+  groupedProducts: Record<string, ProductVariant[]>;
+  selectedVariants: Record<string, string>;
+  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, qty?: number) => Promise<void>;
+  handleRemoveFromCart: (variantId: string, qty?: number) => Promise<void>;
+  colorCode?: string;
+  shortenName: (name: string) => string;
+  disableCheckout?: boolean;
+
+  // slider
+  sliderRef: React.Ref<HTMLDivElement>;
+  sliderInstance: React.MutableRefObject<KeenSliderInstance | null>;
+  currentSlide: number;
+  totalSlides: number;
+}
+
+const ProductCarousel: FC<Props> = ({
+  groupedProducts,
+  selectedVariants,
+  setSelectedVariants,
+  counts,
+  setCounts,
+  handleAddToCart,
+  handleRemoveFromCart,
+  colorCode = "#7F28F8",
+  shortenName,
+  sliderRef,
+  totalSlides,
+  disableCheckout = false,
+}) => {
+  if (!totalSlides || totalSlides === 0) return null;
+
+  // track which variant is open for Try On
+  const [openTryOn, setOpenTryOn] = useState<string | null>(null);
+
+  return (
+    <section
+      className="sallaX"
+      style={{ "--sallaX-accent": colorCode } as React.CSSProperties}
+      aria-label="Recommended products"
+    >
+      <div ref={sliderRef} className="keen-slider sallaX-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 =
+            group.find(v => v.variant_id === currentVariantId) || group[0];
+          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(
+              group
+                .map(v => (v.option?.trim() ?? ""))
+                .filter(o => o && o.toLowerCase() !== "none")
+            )
+          );
+
+          // Update active variant by chosen option
+          const setActiveVariant = (option?: string) => {
+            const match = group.find(v => v.option === option);
+            if (match) {
+              setSelectedVariants(prev => ({
+                ...prev,
+                [tag]: match.variant_id,
+              }));
+            }
+          };
+
+          // 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 {
+          // wait for backend to confirm success
+          await handleAddToCart(currentVariant.variant_id, currentVariant.name, 1);
+
+          // only update counts if the request succeeded
+  
+        } 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;
+            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;
+          const canTryOn =
+            currentVariant.tag
+              ? currentVariant.tag.toLowerCase() === "clothing"
+              : true; // show by default unless you want to gate strictly by tag
+
+          return (
+            <article
+              key={tag}
+              className="keen-slider__slide sallaX-card"
+              role="group"
+              aria-roledescription="slide"
+            >
+              <div className="sallaX-media" onClick={() => window.open(currentVariant.link, "_blank")}>
+                <img
+                  src={currentVariant.image}
+                  alt={currentVariant.name}
+                  className="sallaX-img"
+                  loading="lazy"
+                />
+                <a
+                  href={currentVariant.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="sallaX-visit"
+                  aria-label="Open product page"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  View
+                </a>
+              </div>
+
+              <div className="sallaX-body">
+                <a
+                  href={currentVariant.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="sallaX-name"
+                  title={currentVariant.name}
+                >
+                  {shortenName(currentVariant.name)}
+                </a>
+
+                <div className="sallaX-row">
+                  <span className="sallaX-price" aria-label="Price">
+                    {currentVariant.price}
+                  </span>
+                </div>
+
+                {/* ✅ Options dropdown restored */}
+                {options.length > 1 && (
+                  <div className="sallaX-selectWrap">
+                    <label
+                      htmlFor={`sallaX-select-${tag}`}
+                      className="sallaX-selectLabel"
+                    >
+                      Choose an option
+                    </label>
+                    <select
+                      id={`sallaX-select-${tag}`}
+                      className="sallaX-select"
+                      aria-label="Choose an option"
+                      value={selectValue}
+                      onChange={(e) => setActiveVariant(e.target.value)}
+                    >
+                      {options.map((option) => (
+                        <option key={option} value={option}>
+                          {option}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                )}
+
+                <div className="flex items-center justify-between w-full space-x-4">
+                  {!disableCheckout && (
+                    <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) */}
+                  {canTryOn && (
+                    <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>
+
+                {/* Try On panel */}
+                {canTryOn && isTryOnOpen && (
+                  <div className="mt-4">
+                    <TryOnBox productImage={currentVariant.image} />
+                  </div>
+                )}
+              </div>
+            </article>
+          );
+        })}
+      </div>
+    </section>
+  );
+};
+
+export default ProductCarousel;