wineater-bot 2.1.4 → 3.0.1

package/index.html

@@ -5,9 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chatbot</title>
     <!-- <script type="module" src="https://unpkg.com/wineater-bot@1.0.0/dist/wineater-chatbot.umd.js"></script> -->
-    <script>window.wineaterData = {CLIENT_TOKEN: 'K0ZzlrfT0z00J6dSAt8ZEIKWiUfypG1Tyb1ZGtgwuJaF8WZuRKlHfvEMCF9DyytZ', position: 'right-center'};</script><script type="module" src="./src/index.js"></script>
+    <script>window.wineaterData = {CLIENT_TOKEN: 'K0ZzlrfT0z00J6dSAt8ZEIKWiUfypG1Tyb1ZGtgwuJaF8WZuRKlHfvEMCF9DyytZ', position: 'right-center'};</script>
+    <script type="module" src="./src/index.js"></script>
 </head>
 <body style="margin: 0;">
-    <img src="./src/assets/biobio.png" style="width: 100vw; height: 100vh; margin: 0;">
+    <div id="widget-container"></div> <!-- Контейнер для виджета -->
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "2.1.4",
+  "version": "3.0.1",
   "description": "",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/index.js

@@ -1,58 +1,74 @@
-// src/index.js
-
-// Import your CSS here
 import './js/styles.js';
 import { setCookie, setUniqueUserCookie, getCookie } from './js/analytics.js';
-import flagsmith from 'flagsmith'; //Add this line if you're using flagsmith via npm
-
-
+import flagsmith from 'flagsmith';
 import Tracker from '@openreplay/tracker';
+import { WineWidget } from './js/widget.js';
+import { Chatbot } from './js/chatbot.js';
+import translator from './js/i18n.js';
+import { shouldOpenChatAutomatically } from './js/auto-open.js';
+import { toggleChatWindow, closeChatWindow, openChatWindow } from './js/ui.js';
 
-const tracker = new Tracker({
-  projectKey: "PA8j9fAi49i6g2QnvpNs",
-  '__DISABLE_SECURE_MODE': true
-});
+const DEMO_TOKEN = 'tbMTFzLbWcXFgXK8SzyFHA6kIjelFcz5VQABVPbXdXh5XZJCDQH9BcVlrv3DF3kA';
 
-// Import your JavaScript modules here
-import { toggleChatWindow, closeChatWindow, openChatWindow } from './js/ui.js';
-import { Chatbot } from  './js/chatbot.js';
-import './js/api.js';
-import translator from './js/i18n.js';
-import {shouldOpenChatAutomatically} from './js/auto-open.js'
+class App {
+    constructor() {
+        this.stores = ['climats', 'telckel', 'biobio', 'weinpoint', 'vinigrandi', 'ampely'];
+        this.tracker = new Tracker({ projectKey: "PA8j9fAi49i6g2QnvpNs", '__DISABLE_SECURE_MODE': true });
+        this.position = window?.wineaterData?.POSITION || 'right-center';
+        this.type = window?.wineaterData?.TYPE || 'chatbot';
+        this.store = this.detectStore();
+    }
+
+    detectStore() {
+        return this.stores.find(store => window.location.href.includes(store)) || null;
+    }
 
-const DEMO_TOKEN='tbMTFzLbWcXFgXK8SzyFHA6kIjelFcz5VQABVPbXdXh5XZJCDQH9BcVlrv3DF3kA';
+    async initFlagsmith() {
+        try {
+            await flagsmith.init({
+                environmentID: '5RfiDoiqb4dHrNdQvzbkfM',
+                cacheFlags: false,
+                enableAnalytics: true,
+                identity: getCookie('uniqueUserID'),
+            });
+        } catch (error) {
+            console.error('Flagsmith initialization failed:', error);
+        }
+    }
 
+    async initTranslator() {
+        const storeName = this.store ? this.store.charAt(0).toUpperCase() + this.store.slice(1) : 'Climats';
+        await translator.fetchConfig(storeName || 'Climats');
+    }
 
-document.addEventListener('DOMContentLoaded', () => {
-    // Attach any necessary initialization code here
-    // For example, expose functions to global scope if absolutely necessary
-    window.toggleChatWindow = toggleChatWindow;
-    window.closeChatWindow = closeChatWindow;
-    window.openChatWindow = openChatWindow;
-});
-
-export {
-    toggleChatWindow,
-    closeChatWindow,
-    openChatWindow
-};
-
-function getUniqueId() {
-  const uniqueId = getCookie()
-}
+    initCookies() {
+        setCookie('chatbotToken', window.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN, 365);
+        setUniqueUserCookie();
+    }
 
-function createChatbotUI() {
-  tracker.start();
-  const btnTextOption = flagsmith.getValue('chat-btn-txt');
-  const buttonText = window?.wineaterData?.BUTTON_TEXT || translator.translate(`chatButton${btnTextOption}`);
-  const chatbotHTML = `
-      <div id="chatbot-container">
-          <div id="chat-icon" onclick="toggleChatWindow()">
-              <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/chat-icon.svg" alt="Chat Icon"> <!-- Update the path to your logo image -->
-              <span>${buttonText}</span>
-          </div>
+    async initializeChatbotOrWidget() {
+        if (this.type === 'widget') {
+            new WineWidget();
+        } else {
+            this.createChatbotUI();
+            this.setupChatListeners();
+            this.setupChatButtonListener();
+            applyPositionToChat(this.position);
+            const chatbot = new Chatbot();
+            chatbot.initialize();
+        }
+    }
 
-          <div id="chat-window" class="hidden">
+    createChatbotUI() {
+      const btnTextOption = flagsmith.getValue('chat-btn-txt');
+      const buttonText = window?.wineaterData?.BUTTON_TEXT || translator.translate(`chatButton${btnTextOption}`);
+      const chatbotHTML = `
+          <div id="chatbot-container">
+              <div id="chat-icon">
+                  <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/chat-icon.svg" alt="Chat Icon">
+                  <span>${buttonText}</span>
+              </div>
+              <div id="chat-window" class="hidden">
             <div id="chat-header">
               <div id="chat-title">
                 <h1>${translator.translate('chatTitle')}</h1>
@@ -73,98 +89,73 @@ function createChatbotUI() {
                 <img src="https://landing-static.s3.eu-central-1.amazonaws.com/images/logo.svg" alt="Wineater Logo" id="chatbot-logo">
               </a>
                     </div>
-                  </div>
-      </div>
-  `;
+          </div>
+      `;
+      document.body.insertAdjacentHTML('beforeend', chatbotHTML);
+  }
 
-  document.body.insertAdjacentHTML('beforeend', chatbotHTML);
-}
+    setupChatListeners() {
+        const closeButton = document.getElementById('close-btn');
+        closeButton.addEventListener('click', toggleChatWindow);
+
+        window.addEventListener('click', event => {
+            const chatWindow = document.getElementById('chat-window');
+            const chatIcon = document.getElementById('chat-icon');
+            if (!chatWindow.contains(event.target) && !chatIcon.contains(event.target)) {
+                chatWindow.classList.remove('visible');
+                chatIcon.style.display = 'flex';
+            }
+        });
+    }
 
-function setupCloseButton() {
-  const closeButton = document.getElementById('close-btn');
-  closeButton.addEventListener('click', toggleChatWindow);
-}
+    autoOpenChatIfNeeded() {
+        const disableAutoOpen = getCookie('disableAutoOpen');
+        if (!disableAutoOpen) {
+            shouldOpenChatAutomatically();
+        }
+    }
 
-function setupOutsideClick() {
-  window.addEventListener('click', function(event) {
-      const chatWindow = document.getElementById('chat-window');
+    setupChatButtonListener() {
       const chatIcon = document.getElementById('chat-icon');
-      if (!chatWindow.contains(event.target) && !chatIcon.contains(event.target)) {
-          chatWindow.classList.remove('visible');
-          chatIcon.style.display = 'flex'; // Show the chat icon/button
+      const chatWindow = document.getElementById('chat-window');
+
+      if (!chatIcon || !chatWindow) {
+          console.error('Chat icon or chat window element not found!');
+          return;
       }
-  });
-}
 
-// Function to toggle the chat icon position
-function toggleChatIconPosition(position) {
-  console.log(position);
-  const chatIcon = document.getElementById('chat-icon');
-  const chatWindow = document.getElementById('chat-window');
-  
-  chatIcon.className = ''; // Reset classes
-  chatWindow.className = ''; // Reset classes
-  
-  if (position === 'right-center') {
-      chatIcon.classList.add('chat-icon-right-center');
-      chatWindow.classList.add('right-center-aligned');
-  } else {
-      // Apply bottom-right or other default classes as needed
-      chatIcon.classList.add('chat-icon-bottom-right');
+      chatIcon.addEventListener('click', () => {
+          const isVisible = chatWindow.classList.contains('visible');
+          if (isVisible) {
+              chatWindow.classList.remove('visible');
+              chatIcon.style.display = 'flex';
+          } else {
+              chatWindow.classList.add('visible');
+              chatIcon.style.display = 'none';
+          }
+      });
   }
+
+    async initialize() {
+        this.tracker.start();
+        await this.initFlagsmith();
+        await this.initTranslator();
+        this.initCookies();
+        await this.initializeChatbotOrWidget();
+        this.autoOpenChatIfNeeded();
+    }
 }
 
-function openChatAfterDelay(delay = 10000) { // delay is in milliseconds
-  setTimeout(() => {
-      openChatWindow(window.location.href); // Ensure openChatWindow is available globally
-  }, delay);
+function applyPositionToChat(position = 'right-center') {
+  const chatIcon = document.getElementById('chat-icon');
+  if (!chatIcon) return;
+
+  // Применение классов для позиции
+  chatIcon.className = `chat-icon-${position}`;
 }
 
+// Initialize the application on DOM ready
 document.addEventListener('DOMContentLoaded', () => {
-  // Check if auto-opening is disabled by cookie
-  const disableAutoOpen = getCookie('disableAutoOpen');
-   
-  if (!disableAutoOpen) {
-    shouldOpenChatAutomatically()
-  }
-});
-
-// If you want to initialize your chatbot automatically when the script is loaded
-if (typeof window !== 'undefined') {
-  let position = window?.wineaterData?.POSITION || 'right-center';
-  window.addEventListener('DOMContentLoaded', async () => {
-    const stores = ['climats', 'telckel', 'biobio', 'weinpoint', 'vinigrandi'];
-    const store = stores.find(value => window.location.href.includes(value)) || null;
-    let capitalizeStore;
-    if (store) {
-      capitalizeStore = store.charAt(0).toUpperCase() + store.slice(1);
-      if (capitalizeStore === 'Climats') {
-        position = 'right-center';
-      }
-    }
-    await translator.fetchConfig(capitalizeStore || 'Climats'); 
-    setCookie('chatbotToken', window.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN, 365);
-    setUniqueUserCookie();
-    flagsmith.init({
-      environmentID: '5RfiDoiqb4dHrNdQvzbkfM',
-      // api:"http://localhost:8000/api/v1/" set this if you are self hosting, and point it to your API
-      cacheFlags: false, // stores flags in localStorage cache
-      enableAnalytics: true,
-      identity: getCookie('uniqueUserID') // See https://docs.flagsmith.com/flag-analytics/ for more info.
-     }).then(() => {
-      createChatbotUI(); // Create the UI
-      setupCloseButton();
-      setupOutsideClick();
-      toggleChatIconPosition(position);
-      const myChatbot = new Chatbot();
-      myChatbot.initialize();
-     }).catch(() => {
-      createChatbotUI(); // Create the UI
-    setupCloseButton();
-    setupOutsideClick();
-    toggleChatIconPosition(position);
-    const myChatbot = new Chatbot();
-    myChatbot.initialize();
-     });
-  });
-}
+    const app = new App();
+    app.initialize();
+});

package/src/js/api.js

@@ -1,6 +1,6 @@
 // api.js
 
-const stores = ['climats', 'telckel', 'biobio', 'weinpoint', 'vinigrandi'];
+const stores = ['climats', 'telckel', 'biobio', 'weinpoint', 'vinigrandi', 'ampely'];
 const DEMO_TOKEN='bMTFzLbWcXFgXK8SzyFHA6kIjelFcz5VQABVPbXdXh5XZJCDQH9BcVlrv3DF3kA';
 
 export class Api {
@@ -83,4 +83,29 @@ export class Api {
             throw error;
         }
     }
+    async getInstantRecommendations() {
+        console.log('Fetching instant recommendations...');
+        try {
+            const response = await fetch(`${this.baseURL}dish/recommendations/instant`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.token}`
+                },
+                body: JSON.stringify({ store: this.store })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(`API call failed with status ${response.status}: ${data.message || 'No additional error information'}`);
+            }
+
+            console.log('Instant recommendations:', data);
+            return data;
+        } catch (error) {
+            console.error('Fetching instant recommendations failed:', error.message);
+            throw new Error(`Error in getInstantRecommendations: ${error.message}`);
+        }
+    }
 }

package/src/js/i18n.js

@@ -24,7 +24,20 @@ class Translator {
                 moreInfo: "Plus d'infos",
                 winePairingIntro: "Pour ce vin, voici quelques suggestions de plats :",
                 askForDinner: "Que voulez-vous manger ce soir?",
-                clearChatButton: "Effacer le chat"
+                clearChatButton: "Effacer le chat",
+                widgetTitle: "Découvrez votre vin",
+                widgetSubtitle: "Recherchez par vos préférences",
+                searchPlaceholder: "Entrez un mot-clé ou une description",
+                searchButton: "Rechercher",
+                priceRange: "Gamme de prix",
+                wineColor: "Couleur du vin",
+                intensity: "Intensité",
+                red: "Rouge",
+                white: "Blanc",
+                rose: "Rosé",
+                light: "Léger",
+                medium: "Moyen",
+                full: "Puissant"
             },
             es: {
                 welcomeMessage: "¿Qué vas a comer? Cuéntame tu plato y te recomendaré el maridaje perfecto.",
@@ -45,7 +58,20 @@ class Translator {
                 moreInfo: "Más info",
                 winePairingIntro: "Para este vino, aquí tienes algunas sugerencias de platos:",
                 askForDinner: "¿Qué te gustaría cenar?",
-                clearChatButton: "Limpiar el chat"
+                clearChatButton: "Limpiar el chat",
+                widgetTitle: "Encuentra tu vino",
+                widgetSubtitle: "Busca según tus preferencias",
+                searchPlaceholder: "Escribe una palabra clave o descripción",
+                searchButton: "Buscar",
+                priceRange: "Rango de precios",
+                wineColor: "Color del vino",
+                intensity: "Intensidad",
+                red: "Tinto",
+                white: "Blanco",
+                rose: "Rosado",
+                light: "Ligero",
+                medium: "Medio",
+                full: "Intenso"
             },
             en: {
                 welcomeMessage: "What are you planning to eat? Share your dish and I'll recommend the perfect wine pairing for your meal.",
@@ -66,7 +92,20 @@ class Translator {
                 moreInfo: "More info",
                 winePairingIntro: "For this wine, here are some suggested dishes:",
                 askForDinner: "What would you like to have for dinner?",
-                clearChatButton: "Clear Chat"
+                clearChatButton: "Clear Chat",
+                widgetTitle: "Discover Your Wine",
+                widgetSubtitle: "Search by your preferences",
+                searchPlaceholder: "Enter a keyword or description",
+                searchButton: "Search",
+                priceRange: "Price Range",
+                wineColor: "Wine Color",
+                intensity: "Intensity",
+                red: "Red",
+                white: "White",
+                rose: "Rosé",
+                light: "Light",
+                medium: "Medium",
+                full: "Full"
             },
             de: {
                 welcomeMessage: "Was möchten Sie essen? Beschreiben Sie Ihr Gericht und ich empfehle Ihnen den perfekten Wein dazu.",
@@ -87,7 +126,20 @@ class Translator {
                 moreInfo: "Mehr Info",
                 winePairingIntro: "Für diesen Wein gibt es folgende Essensvorschläge:",
                 askForDinner: "Was möchten Sie zum Abendessen essen?",
-                clearChatButton: "Chat löschen"
+                clearChatButton: "Chat löschen",
+                widgetTitle: "Finden Sie Ihren Wein",
+                widgetSubtitle: "Suchen Sie nach Ihren Vorlieben",
+                searchPlaceholder: "Geben Sie ein Stichwort oder eine Beschreibung ein",
+                searchButton: "Suche",
+                priceRange: "Preisspanne",
+                wineColor: "Weinfarbe",
+                intensity: "Intensität",
+                red: "Rot",
+                white: "Weiß",
+                rose: "Rosé",
+                light: "Leicht",
+                medium: "Mittel",
+                full: "Voll"
               }
         };
     }