shopify-chatbot-widget 1.0.9 → 1.0.10

package/src/i18n.tsx

@@ -1,30 +1,404 @@
-// src/i18n.ts
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
+/** Visitor-facing widget languages. Persisted per browser; first visit
+ *  follows the visitor's browser language. */
+const LANG_KEY = 'jaweb_widget_lang';
+export const WIDGET_LANGS = ['en', 'fr', 'ar'] as const;
+export type WidgetLang = (typeof WIDGET_LANGS)[number];
+const RTL_LANGS: string[] = ['ar'];
+
+const detect = (): WidgetLang => {
+  try {
+    const stored = localStorage.getItem(LANG_KEY);
+    if (stored && (WIDGET_LANGS as readonly string[]).includes(stored)) return stored as WidgetLang;
+  } catch {
+    /* ignore */
+  }
+  const nav = (navigator.language || 'en').slice(0, 2).toLowerCase();
+  return (WIDGET_LANGS as readonly string[]).includes(nav) ? (nav as WidgetLang) : 'en';
+};
+
 const resources = {
   en: {
     translation: {
-      welcome: "Hi there, you’re speaking with Jaweb AI Assistant.",
-      // Add more English translations here
+      home: {
+        greeting: 'Hi there',
+        subCompany: "You're chatting with {{company}}. ",
+        sub: "Questions, orders, anything — we're here.",
+        startChat: 'Start a chat',
+        whatsapp: 'WhatsApp',
+        conversations: 'Conversations',
+        new: 'New',
+        newChat: 'New chat',
+        yourTickets: 'Your tickets',
+        ticketN: 'Ticket #{{id}}',
+        showLess: 'Show less',
+        showMore: 'Show {{count}} more',
+        tapToContinue: 'Tap to continue',
+        conversationEnded: 'Conversation ended',
+        newReplies_one: '{{count}} new reply',
+        newReplies_other: '{{count}} new replies',
+        closeChat: 'Close chat',
+        online: 'Online',
+        language: 'Language',
+      },
+      status: { Open: 'Open', 'In Progress': 'In Progress', Solved: 'Solved' },
+      time: { justNow: 'just now', m: '{{n}}m ago', h: '{{n}}h ago', d: '{{n}}d ago' },
+      messenger: {
+        onlineNow: 'Online now',
+        aiAssistant: 'Ai Assistant',
+        talkToUs: 'Talk to us',
+        voiceMode: 'Voice mode',
+      },
+      input: {
+        placeholder: 'Enter Message ...',
+        dropImage: 'Drop image here',
+        uploadImage: 'Upload image',
+        sendMessage: 'Send message',
+        recordVoice: 'Record voice',
+        stopRecording: 'Stop recording',
+        cancelRecording: 'Cancel recording',
+        imageTooBig: 'Image size should be less than 5MB',
+        recordingUnsupported: 'Voice recording is not supported in your browser',
+        micDenied: 'Microphone permission denied',
+      },
+      support: {
+        reaching: 'Reaching the team…',
+        requestSent: 'Your request has been sent',
+        connectingTo: 'Connecting you to {{name}}',
+        oneMoment: 'One moment…',
+        chattingWith: "You're chatting with {{name}}",
+        liveNow: 'Live now',
+        teamOffline: "The team isn't online right now",
+        savedSpot:
+          "We've saved your spot — we'll email you as soon as they're back so you can continue this chat",
+        ticketSubmitted: 'Ticket submitted',
+        teamMember: 'a team member',
+      },
+      order: {
+        order: 'Order',
+        placedOn: 'Placed {{date}}',
+        progress: 'Order progress',
+        stepPlaced: 'Placed',
+        stepPaid: 'Paid',
+        stepShipped: 'Shipped',
+        stepDelivered: 'Delivered',
+        delivered: 'Delivered',
+        onItsWay: 'On its way',
+        preparing: 'Preparing',
+        awaitingPayment: 'Awaiting payment',
+        trackPackage: 'Track package',
+      },
+      product: {
+        addToCart: 'Add to cart',
+        added: 'Added',
+        addedToCart: 'Added to cart',
+        tryOn: 'Try on',
+        view: 'View ↗',
+        recommended: 'Recommended products',
+        openProduct: 'Open product page',
+        chooseOption: 'Choose an option',
+        price: 'Price',
+        qty: 'Quantity controls',
+        decrease: 'Decrease quantity',
+        increase: 'Increase quantity',
+      },
+      cart: {
+        yourCart: 'Your Cart ({{count}})',
+        empty: 'Your cart is empty',
+        subtotal: 'Subtotal:',
+        qty: 'Qty: {{count}}',
+        checkout: 'CHECKOUT',
+        checkoutFailed: 'Checkout failed. Please try again.',
+        addFailed: 'Failed to add item',
+      },
+      voice: {
+        listening: 'Listening — just talk',
+        thinking: 'Thinking…',
+        speaking: '{{name}} is speaking — tap to interrupt',
+        tapToTalk: 'Tap the bars when you want to talk',
+        micNeeded: 'Microphone access is needed for voice mode',
+        didntCatch: "Didn't catch that — try again",
+        wentWrong: 'Something went wrong — tap the bars to retry',
+        title: 'Voice mode',
+        exit: 'Exit voice mode',
+      },
+      form: {
+        back: 'Back',
+        welcome: 'Welcome',
+        shareDetails: 'Please share a few details so we can get started.',
+        yourName: 'Your Name',
+        namePh: 'Enter your full name',
+        emailAddress: 'Email Address',
+        emailPh: 'Enter your email',
+        phoneNumber: 'Phone Number',
+        phonePh: 'Enter your phone number',
+        startChat: 'Start Chat',
+      },
+    },
+  },
+  fr: {
+    translation: {
+      home: {
+        greeting: 'Bonjour',
+        subCompany: 'Vous discutez avec {{company}}. ',
+        sub: 'Questions, commandes, tout — nous sommes là.',
+        startChat: 'Démarrer une discussion',
+        whatsapp: 'WhatsApp',
+        conversations: 'Conversations',
+        new: 'Nouveau',
+        newChat: 'Nouvelle discussion',
+        yourTickets: 'Vos tickets',
+        ticketN: 'Ticket n°{{id}}',
+        showLess: 'Voir moins',
+        showMore: 'Voir {{count}} de plus',
+        tapToContinue: 'Appuyez pour continuer',
+        conversationEnded: 'Conversation terminée',
+        newReplies_one: '{{count}} nouvelle réponse',
+        newReplies_other: '{{count}} nouvelles réponses',
+        closeChat: 'Fermer le chat',
+        online: 'En ligne',
+        language: 'Langue',
+      },
+      status: { Open: 'Ouvert', 'In Progress': 'En cours', Solved: 'Résolu' },
+      time: { justNow: "à l'instant", m: 'il y a {{n}} min', h: 'il y a {{n}} h', d: 'il y a {{n}} j' },
+      messenger: {
+        onlineNow: 'En ligne',
+        aiAssistant: 'Assistant IA',
+        talkToUs: 'Parlez-nous',
+        voiceMode: 'Mode vocal',
+      },
+      input: {
+        placeholder: 'Écrivez un message...',
+        dropImage: "Déposez l'image ici",
+        uploadImage: 'Importer une image',
+        sendMessage: 'Envoyer le message',
+        recordVoice: 'Enregistrer un vocal',
+        stopRecording: "Arrêter l'enregistrement",
+        cancelRecording: "Annuler l'enregistrement",
+        imageTooBig: "L'image doit faire moins de 5 Mo",
+        recordingUnsupported: "L'enregistrement vocal n'est pas pris en charge par votre navigateur",
+        micDenied: 'Autorisation du microphone refusée',
+      },
+      support: {
+        reaching: "Nous contactons l'équipe…",
+        requestSent: 'Votre demande a été envoyée',
+        connectingTo: 'Mise en relation avec {{name}}',
+        oneMoment: 'Un instant…',
+        chattingWith: 'Vous discutez avec {{name}}',
+        liveNow: 'En direct',
+        teamOffline: "L'équipe n'est pas en ligne pour le moment",
+        savedSpot:
+          'Votre place est réservée — nous vous enverrons un e-mail dès leur retour pour continuer cette discussion',
+        ticketSubmitted: 'Ticket envoyé',
+        teamMember: "un membre de l'équipe",
+      },
+      order: {
+        order: 'Commande',
+        placedOn: 'Passée le {{date}}',
+        progress: 'Suivi de commande',
+        stepPlaced: 'Passée',
+        stepPaid: 'Payée',
+        stepShipped: 'Expédiée',
+        stepDelivered: 'Livrée',
+        delivered: 'Livrée',
+        onItsWay: 'En route',
+        preparing: 'En préparation',
+        awaitingPayment: 'En attente de paiement',
+        trackPackage: 'Suivre le colis',
+      },
+      product: {
+        addToCart: 'Ajouter au panier',
+        added: 'Ajouté',
+        addedToCart: 'Ajouté au panier',
+        tryOn: 'Essayer',
+        view: 'Voir ↗',
+        recommended: 'Produits recommandés',
+        openProduct: 'Ouvrir la page produit',
+        chooseOption: 'Choisissez une option',
+        price: 'Prix',
+        qty: 'Contrôles de quantité',
+        decrease: 'Diminuer la quantité',
+        increase: 'Augmenter la quantité',
+      },
+      cart: {
+        yourCart: 'Votre panier ({{count}})',
+        empty: 'Votre panier est vide',
+        subtotal: 'Sous-total :',
+        qty: 'Qté : {{count}}',
+        checkout: 'PAYER',
+        checkoutFailed: 'Échec du paiement. Veuillez réessayer.',
+        addFailed: "Échec de l'ajout de l'article",
+      },
+      voice: {
+        listening: 'À votre écoute — parlez',
+        thinking: 'Réflexion…',
+        speaking: '{{name}} parle — touchez pour interrompre',
+        tapToTalk: 'Touchez les barres quand vous voulez parler',
+        micNeeded: "L'accès au microphone est requis pour le mode vocal",
+        didntCatch: "Nous n'avons pas compris — réessayez",
+        wentWrong: "Une erreur s'est produite — touchez les barres pour réessayer",
+        title: 'Mode vocal',
+        exit: 'Quitter le mode vocal',
+      },
+      form: {
+        back: 'Retour',
+        welcome: 'Bienvenue',
+        shareDetails: 'Partagez quelques informations pour commencer.',
+        yourName: 'Votre nom',
+        namePh: 'Saisissez votre nom complet',
+        emailAddress: 'Adresse e-mail',
+        emailPh: 'Saisissez votre e-mail',
+        phoneNumber: 'Numéro de téléphone',
+        phonePh: 'Saisissez votre numéro',
+        startChat: 'Démarrer la discussion',
+      },
     },
   },
   ar: {
     translation: {
-      welcome: "مرحبًا، أنت تتحدث إلى مساعد Jaweb AI.",
-      // Add more Arabic translations here
+      home: {
+        greeting: 'مرحبًا',
+        subCompany: 'أنت تتحدث مع {{company}}. ',
+        sub: 'أسئلة، طلبات، أي شيء — نحن هنا.',
+        startChat: 'ابدأ محادثة',
+        whatsapp: 'واتساب',
+        conversations: 'المحادثات',
+        new: 'جديد',
+        newChat: 'محادثة جديدة',
+        yourTickets: 'تذاكرك',
+        ticketN: 'تذكرة رقم {{id}}',
+        showLess: 'عرض أقل',
+        showMore: 'عرض {{count}} أكثر',
+        tapToContinue: 'اضغط للمتابعة',
+        conversationEnded: 'انتهت المحادثة',
+        newReplies_zero: 'لا ردود جديدة',
+        newReplies_one: 'رد جديد واحد',
+        newReplies_two: 'ردان جديدان',
+        newReplies_few: '{{count}} ردود جديدة',
+        newReplies_many: '{{count}} ردًا جديدًا',
+        newReplies_other: '{{count}} رد جديد',
+        closeChat: 'إغلاق المحادثة',
+        online: 'متصل',
+        language: 'اللغة',
+      },
+      status: { Open: 'مفتوحة', 'In Progress': 'قيد المعالجة', Solved: 'محلولة' },
+      time: { justNow: 'الآن', m: 'منذ {{n}} د', h: 'منذ {{n}} س', d: 'منذ {{n}} ي' },
+      messenger: {
+        onlineNow: 'متصل الآن',
+        aiAssistant: 'المساعد الذكي',
+        talkToUs: 'تحدث معنا',
+        voiceMode: 'الوضع الصوتي',
+      },
+      input: {
+        placeholder: 'اكتب رسالة...',
+        dropImage: 'أفلت الصورة هنا',
+        uploadImage: 'رفع صورة',
+        sendMessage: 'إرسال الرسالة',
+        recordVoice: 'تسجيل صوتي',
+        stopRecording: 'إيقاف التسجيل',
+        cancelRecording: 'إلغاء التسجيل',
+        imageTooBig: 'يجب أن يكون حجم الصورة أقل من 5 ميجابايت',
+        recordingUnsupported: 'التسجيل الصوتي غير مدعوم في متصفحك',
+        micDenied: 'تم رفض إذن الميكروفون',
+      },
+      support: {
+        reaching: 'جارٍ الوصول إلى الفريق…',
+        requestSent: 'تم إرسال طلبك',
+        connectingTo: 'جارٍ توصيلك بـ {{name}}',
+        oneMoment: 'لحظة واحدة…',
+        chattingWith: 'أنت تتحدث مع {{name}}',
+        liveNow: 'مباشر الآن',
+        teamOffline: 'الفريق غير متصل حاليًا',
+        savedSpot: 'حفظنا مكانك — سنراسلك عبر البريد فور عودتهم لتكمل هذه المحادثة',
+        ticketSubmitted: 'تم إرسال التذكرة',
+        teamMember: 'أحد أعضاء الفريق',
+      },
+      order: {
+        order: 'الطلب',
+        placedOn: 'أُنشئ {{date}}',
+        progress: 'تتبع الطلب',
+        stepPlaced: 'أُنشئ',
+        stepPaid: 'مدفوع',
+        stepShipped: 'شُحن',
+        stepDelivered: 'وصل',
+        delivered: 'تم التوصيل',
+        onItsWay: 'في الطريق',
+        preparing: 'قيد التجهيز',
+        awaitingPayment: 'بانتظار الدفع',
+        trackPackage: 'تتبع الشحنة',
+      },
+      product: {
+        addToCart: 'أضف إلى السلة',
+        added: 'أُضيف',
+        addedToCart: 'أُضيف إلى السلة',
+        tryOn: 'جرّبه',
+        view: 'عرض ↗',
+        recommended: 'منتجات مقترحة',
+        openProduct: 'فتح صفحة المنتج',
+        chooseOption: 'اختر خيارًا',
+        price: 'السعر',
+        qty: 'التحكم بالكمية',
+        decrease: 'إنقاص الكمية',
+        increase: 'زيادة الكمية',
+      },
+      cart: {
+        yourCart: 'سلتك ({{count}})',
+        empty: 'سلتك فارغة',
+        subtotal: 'المجموع الفرعي:',
+        qty: 'الكمية: {{count}}',
+        checkout: 'إتمام الشراء',
+        checkoutFailed: 'فشل إتمام الشراء. حاول مجددًا.',
+        addFailed: 'فشلت إضافة المنتج',
+      },
+      voice: {
+        listening: 'نستمع إليك — تحدث',
+        thinking: 'جارٍ التفكير…',
+        speaking: '{{name}} يتحدث — اضغط للمقاطعة',
+        tapToTalk: 'اضغط على الأشرطة عندما تريد التحدث',
+        micNeeded: 'الوصول إلى الميكروفون مطلوب للوضع الصوتي',
+        didntCatch: 'لم نفهم ذلك — حاول مجددًا',
+        wentWrong: 'حدث خطأ — اضغط على الأشرطة لإعادة المحاولة',
+        title: 'الوضع الصوتي',
+        exit: 'الخروج من الوضع الصوتي',
+      },
+      form: {
+        back: 'رجوع',
+        welcome: 'مرحبًا',
+        shareDetails: 'شاركنا بعض البيانات لنبدأ.',
+        yourName: 'اسمك',
+        namePh: 'أدخل اسمك الكامل',
+        emailAddress: 'البريد الإلكتروني',
+        emailPh: 'أدخل بريدك الإلكتروني',
+        phoneNumber: 'رقم الهاتف',
+        phonePh: 'أدخل رقم هاتفك',
+        startChat: 'ابدأ المحادثة',
+      },
     },
   },
 };
 
 i18n.use(initReactI18next).init({
   resources,
-  lng: 'en', // default language
+  lng: detect(),
   fallbackLng: 'en',
-
-  interpolation: {
-    escapeValue: false, // React already escapes
-  },
+  interpolation: { escapeValue: false },
+  returnEmptyString: false,
 });
 
+export const setWidgetLang = (lng: WidgetLang) => {
+  void i18n.changeLanguage(lng);
+  try {
+    localStorage.setItem(LANG_KEY, lng);
+  } catch {
+    /* ignore */
+  }
+};
+
+/** Direction for the current widget language — applied on the widget
+ *  containers only (never the host page). */
+export const widgetDir = (lng: string): 'rtl' | 'ltr' =>
+  RTL_LANGS.includes(lng) ? 'rtl' : 'ltr';
+
 export default i18n;

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

@@ -1,187 +0,0 @@
-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';
-
-interface ProductVariant {
-  variant_id: string;
-  name: string;
-  image: string;
-  link: string;
-  price: string;
-  option?: string; // e.g. "Red - XL" or "500ml"
-}
-
-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,variantImage:string,price:string, qty: number) => Promise<void>;
-  handleRemoveFromCart: (variantId: string, qty: number) => Promise<void>;
-  colorCode?: string; // accent
-  shortenName: (name: string) => string;
-
-  // slider
-  sliderRef: React.Ref<HTMLDivElement>;
-  sliderInstance: React.MutableRefObject<KeenSliderInstance | null>;
-  currentSlide: number;
-  totalSlides: number;
-  onTryOnSelect: (product: ProductVariant) => void;
-  enableTry:boolean;
-}
-
-const SallaProductCarousel: FC<Props> = ({
-  groupedProducts,
-  selectedVariants,
-  setSelectedVariants,
-  colorCode = '#7F28F8',
-  shortenName,
-  sliderRef,
-  totalSlides,
-  onTryOnSelect,
-  enableTry
-}) => {
-  if (!totalSlides || totalSlides === 0) return null;
-
-  return (
-    <section
-      className="sallaX"
-      style={
-        {
-          // allow live accent theming from prop
-          // @ts-ignore
-          '--sallaX-accent': colorCode,
-        } as React.CSSProperties
-      }
-      aria-label="Recommended products"
-    >
-      <div ref={sliderRef} className="keen-slider sallaX-slider">
-        {Object.entries(groupedProducts).map(([tag, 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;
-
-          // 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')
-            )
-          );
-
-          // Helper to update active variant by option
-          const setActiveVariant = (option?: string) => {
-            const match = group.find(v => v.option === option);
-            if (match) {
-              setSelectedVariants(prev => ({
-                ...prev,
-                [tag]: match.variant_id,
-              }));
-            }
-          };
-
-
-          // Ensure the select has a stable value (fallback to first option)
-
-
-          const selectValue = (currentVariant.option ?? options[0] ?? '');
-
-          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>
-
-                {/* NEW: Select-based options */}
-                {options.length > 0 && (
-                  <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">
-                 
-                    {enableTry?
-                        <Button
-                        style={{ backgroundColor: colorCode, color: "white" }}
-                        className="px-6 py-2 rounded-lg shadow-md transition"
-                        onClick={() => {
-                            onTryOnSelect(currentVariant); 
-                        }}
-                      >
-                        Try On
-                      </Button>
-                      :<></>
-                    }
-                                    
-                    
-
-                </div>
-
-         
-
-              </div>
-            </article>
-          );
-        })}
-      </div>
-    </section>
-  );
-};
-
-export default SallaProductCarousel;