wineater-bot 3.2.0 → 3.3.0

package/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chatbot</title>
-    <script>window.wineaterData = {CLIENT_TOKEN: 'emZGQHlITdVpwvK2hLXRopFS2emvorRsHadgaKbJThiVCPRWRzD0JyZrxrtgt10a', TYPE: 'widget', WIDGET_TYPE: 'store',  WIDGET_WRAPPER: 'wineater-widget-conteiner'};</script>
+    <script>window.wineaterData = {CLIENT_TOKEN: 'dRBwg6wB6LeEKFUiLHdlXa84TgSVDuR8HhE0hhq1l4vVeq3cE12DJkPDwXvuhT01', TYPE: 'widget', WIDGET_TYPE: 'store',  WIDGET_WRAPPER: 'wineater-widget-conteiner'};</script>
         <!-- <script type="module" src="./dist/wineater-chatbot.umd.js"></script> -->
     <script type="module" src="./src/index.js"></script>
 </head>

package/package.json

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

package/src/index.js

@@ -1,39 +1,14 @@
-import './js/styles.js';
 import { setCookie, setUniqueUserCookie, getCookie } from './js/analytics.js';
 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 DEMO_TOKEN = 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG';
 
 class App {
     constructor() {
-        this.stores = ['climats', 'telckel', 'biobio', 'weinpoint', 'vinigrandi', 'ampely', 'test'];
         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;
-    }
-
-    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() {
@@ -46,84 +21,15 @@ class App {
         setUniqueUserCookie();
     }
 
-    async initializeChatbotOrWidget() {
-        if (this.type === 'widget') {
-            new WineWidget();
-        } else {
-            this.createChatbotUI();
-            this.setupChatListeners();
-            this.setupChatButtonListener();
-            applyPositionToChat(this.position);
-            const chatbot = new Chatbot();
-            chatbot.initialize();
-        }
-    }
-
-    createChatbotUI() {
-      const 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';
-            }
-        });
-    }
-
-    autoOpenChatIfNeeded() {
-        const disableAutoOpen = getCookie('disableAutoOpen');
-        if (!disableAutoOpen) {
-            shouldOpenChatAutomatically();
-        }
-    }
-
-    setupChatButtonListener() {
-      const chatIcon = document.getElementById('chat-icon');
-      const chatWindow = document.getElementById('chat-window');
-
-      if (!chatIcon || !chatWindow) {
-          console.error('Chat icon or chat window element not found!');
-          return;
-      }
-
-      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();
+        new WineWidget();
     }
 }
 
-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', () => {
     const app = new App();

package/src/js/i18n.js

@@ -4,6 +4,18 @@ class Translator {
     constructor() {
         this.api = new Api();
         this.language = 'en'; // Default to English
+        this.currency = 'USD';
+        this.currencies = {
+            'USD': {
+                label: '$'
+            },
+            'EUR': {
+                label: '€'
+            },
+            'MXN': {
+                label: '$'
+            }
+        }
         this.translations = {
             fr: {
                 lang: 'fr',
@@ -400,9 +412,26 @@ class Translator {
         try {
             const config = await this.api.getStoreConfig(storeName);
             this.language = config.lang;
+            this.currency = config.currency;
         } catch (e) {
             this.language = 'en'; // Fallback to English
+            this.currency = 'USD';
+        }
+    }
+
+    getCurrency(key) {
+        const keys = key.split('.'); // Разбиваем ключ на части
+        let value = this.currencies[this.currency];
+    
+        for (const k of keys) {
+            if (value && typeof value === 'object' && k in value) {
+                value = value[k]; // Переходим к следующему уровню
+            } else {
+                return this.currency; // Если ключ не найден, возвращаем сам ключ
+            }
         }
+    
+        return value;
     }
 
     translate(key) {

package/src/js/widget-styles.js

@@ -125,17 +125,18 @@ body {
 #wine-widget-container #wine-widget-search {
   position: relative;
   margin: 12px auto;
+  padding: 0 6px;
   display: flex;
-  justify-content: center;
+  align-items: center;
+  border: 2px solid #D5D9EE;
+  border-radius: 10px;
 }
 
 #wine-widget-container .search-icon {
-  position: absolute;
   left: 12px;
-  top: 50%;
-  transform: translateY(-50%);
   width: 24px;
   height: 24px;
+  flex: 0 0 auto;
   background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//search.svg?x=1');
   background-repeat: no-repeat;
   background-size: contain;
@@ -143,14 +144,13 @@ body {
 }
 
 #wine-widget-container #wine-search-input {
-  width: 100%;
-  padding: 12px 60px 12px 40px; /* место под иконку и кнопку */
+  flex: 1 1 auto;
+  padding: 12px; /* место под иконку и кнопку */
   font-size: 16px;
-  border: 2px solid #D5D9EE;
+  border: none;
   border-radius: 10px;
   outline: none;
   transition: border 0.2s ease;
-  background-color: #fff;
 }
 
 #wine-search-input::placeholder {
@@ -168,10 +168,7 @@ body {
 
 /* Кнопка поиска */
 #wine-search-button {
-  position: absolute;
-  right: 6px; 
-  top: 50%;
-  transform: translateY(-50%);
+flex: 0 0 auto;
   background-color: var(--wineater-color);
   color: #fff;
   border: none;
@@ -316,7 +313,7 @@ body {
 
 /* Заголовок вина */
 #wine-widget-container .wine-title {
-  font-size: 18px;  /* крупнее */
+  font-size: 15px;  /* крупнее */
   font-weight: 500; 
   margin: 0 0 8px;
   min-height: 3rem;
@@ -492,6 +489,58 @@ margin-top: auto; /* прижимает .bottom-row к низу
   animation: spin 1s linear infinite;
 }
 
+.typing-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 0;
+  visibility: hidden;
+  background-color: white;
+}
+
+#loading-indicator .typing-indicator {
+visibility: visible;
+}
+
+.typing-indicator span {
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: 0 3px;
+  border-radius: 50%;
+  background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
+  opacity: 0.7;
+  animation: typing 1s infinite;
+}
+
+@keyframes typing {
+  0%, 100% { 
+    transform: translateY(0); 
+    opacity: 0.7;
+  }
+  50% { 
+    transform: translateY(-8px);
+    opacity: 1;
+  }
+}
+
+/* Staggered animation for typing dots */
+.typing-indicator span:nth-child(1) {
+  animation-delay: 0s;
+}
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+/* Show the typing indicator */
+.typing-indicator.visible {
+  visibility: visible;
+  height: 40px;
+}
+
 /* ===================== 11) keyframes анимации ===================== */
 @keyframes spin {
   from { transform: rotate(0deg); }
@@ -631,6 +680,134 @@ margin-top: auto; /* прижимает .bottom-row к низу
   }
 }
 
+.card-popup {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  background-color: white;
+  padding: 16px;
+  border-radius: 16px;
+  box-shadow: 0 6px 30px rgba(0,0,0,0.2);
+  text-align: left;
+  font-size: 14px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-popup p {
+margin: 5px 0;
+}
+
+.card-popup.hidden {
+  display: none;
+}
+
+.card-popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.card-popup-header h2 {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  flex: 1;
+  line-height: 1.3;
+}
+
+.card-popup-close {
+  font-size: 20px;
+  font-weight: bold;
+  cursor: pointer;
+  color: #999;
+  border: none;
+  background: transparent;
+  line-height: 1;
+}
+.card-popup-close:hover {
+  color: #000;
+}
+
+.global-card-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10000;
+  padding: 24px 16px;
+  background-color: #fff;
+  overflow-y: auto;
+  border-radius: 0;
+  font-size: 14px;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+.global-card-popup .card-popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.global-card-popup .card-popup-close {
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+.mobile-fullscreen-popup {
+   font-family: 'Bricolage Grotesque', sans-serif;
+    position: fixed;
+    width: calc(100% - 20px);
+    top: 50px;
+    left: 10px;
+    z-index: 10000;
+    background-color: #fff;
+    padding: 24px;
+    overflow-y: auto;
+    border-radius: 0;
+    border-radius: 16px;
+    font-size: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+ }
+ .mobile-fullscreen-popup .card-popup-header {
+   display: flex;
+   justify-content: space-between;
+   align-items: flex-start;
+ }
+    .mobile-fullscreen-overlay {
+   position: absolute;
+   top: 0;
+   left: 0;
+   right: 0;
+   bottom: 0;
+   background: #fff;
+   opacity: 0.96;
+   z-index: 0;
+ }
+ .mobile-fullscreen-popup .card-popup-close {
+   font-size: 24px;
+   font-weight: bold;
+   cursor: pointer;
+   background: transparent;
+   border: none;
+ }
+
+
 /* Пример более узких экранов (i.e. <480px) можно добавить при необходимости */
 `;
 const fontLink = document.createElement('link');