wineater-bot 3.1.12 → 3.2.0

package/index.html

@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chatbot</title>
-    <script>window.wineaterData = {CLIENT_TOKEN: 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG', 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> -->
+    <script>window.wineaterData = {CLIENT_TOKEN: 'emZGQHlITdVpwvK2hLXRopFS2emvorRsHadgaKbJThiVCPRWRzD0JyZrxrtgt10a', 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>
 <body style="margin: 0;">
     <div id="wineater-widget-conteiner"></div> <!-- Контейнер для виджета -->

package/package.json

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

package/src/index.js

@@ -40,7 +40,7 @@ class App {
         const storeName = this.store ? this.store.charAt(0).toUpperCase() + this.store.slice(1) : 'Test';
         await translator.fetchConfig(storeName || 'Test');
     }
-
+ 
     initCookies() {
         setCookie('chatbotToken', window.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN, 365);
         setUniqueUserCookie();
@@ -60,37 +60,7 @@ class App {
     }
 
     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://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/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>
-              </div>
-              <div id="close-btn">&times;</div>
-            </div>
-            <div id="message-container"></div>
-            <div id="typing-indicator" class="typing-indicator hidden">
-              <span></span><span></span><span></span>
-            </div>
-            <div id="input-container">
-              <input type="text" id="user-input" placeholder="${translator.translate('inputPlaceholder')}">
-              <button id="send-button">${translator.translate('sendButton')}</button>
-            </div>
-            <div id="powered-by">
-              <a href="https://wineater.com" target="_blank">
-                <span>${translator.translate('poweredBy')}</span>
-                <img src="https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/logo.svg" alt="Wineater Logo" id="chatbot-logo">
-              </a>
-                    </div>
-          </div>
-      `;
+      const chatbotHTML = ``;
       document.body.insertAdjacentHTML('beforeend', chatbotHTML);
   }
 

package/src/js/analytics.js

@@ -19,7 +19,7 @@ function setCookie(name, value, days) {
     expires = "; expires=" + date.toUTCString();
   }
   document.cookie = name + "=" + (value || "") + expires + "; path=/; secure; samesite=strict";
-}
+} 
 
 // Function to get a cookie by name
 function getCookie(name) {

package/src/js/widget-styles.js

@@ -25,7 +25,7 @@ body {
   display: flex;
   gap: 24px;
   font-family: 'Bricolage Grotesque', sans-serif;
-  padding: 24px 24px 0px;
+  padding: 12px 12px 0px;
   border-radius: 16px;
   background-color: #fff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
@@ -73,7 +73,7 @@ body {
 #wine-widget-header h1 {
   font-family: "Bricolage Grotesque", serif;
   font-weight: 600;
-  font-size: 32px;
+  font-size: 24px;
   margin: 0 auto;
   line-height: 1.3;
   color: #333;
@@ -124,7 +124,7 @@ body {
 /* ===================== 6) Поисковая строка (input + кнопка) ===================== */
 #wine-widget-container #wine-widget-search {
   position: relative;
-  margin: 20px auto;
+  margin: 12px auto;
   display: flex;
   justify-content: center;
 }
@@ -235,6 +235,7 @@ body {
   opacity: 0;
   transform: translateY(20px); /* чтобы анимация была заметна */
   transition: opacity 0.3s ease, transform 0.3s ease;
+  position: relative;
 }
 #wine-widget-container .wine-recommendation-tile:last-child {
   border-right: none;
@@ -251,17 +252,63 @@ body {
 
 /* Картинка */
 #wine-widget-container .wine-image {
-  width: 150px;   /* или 200px, на ваш вкус */
-  max-height: 200px;
+  height: 200px;
   object-fit: contain; /* чтобы не обрезалось, если нужно */
   margin: 0 auto 16px; /* отступ снизу */
   display: block;
 }
 
+.wine-hover-popup {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 12px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease;
+  z-index: 999;
+}
+
+.wine-hover-popup.slide-in {
+  transform: translateY(0);
+}
+
+/* Стили содержимого внутри попапа */
+.popup-reason {
+  font-size: 14px;
+  font-weight: 400;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.popup-tags {
+  display: flex;
+  flex-wrap: wrap;   
+  gap: 8px;         
+  margin-top: 8px;
+  justify-content: center; /* Горизонтальное выравнивание по центру */
+}
+
+/* Каждый чип */
+.popup-tag {
+  display: inline-block;
+  padding: 4px 8px;
+  border-radius: 12px;
+  background-color: #F5F0FF; 
+  border: 1px solid #ddd;
+  font-size: 13px;
+  color: #333;
+  text-transform: capitalize; /* Делаем каждое слово с заглавной буквы */
+}
+
 /* Детальный блок */
 #wine-widget-container .tile-details {
   /* Можно дополнительные отступы или нет */
-  display: flex;
+  display: flex; 
   flex-direction: column;
   align-items: center; 
   /* т.к. заголовок и таблица по центру */
@@ -269,8 +316,8 @@ body {
 
 /* Заголовок вина */
 #wine-widget-container .wine-title {
-  font-size: 20px;  /* крупнее */
-  font-weight: 700; 
+  font-size: 18px;  /* крупнее */
+  font-weight: 500; 
   margin: 0 0 8px;
   min-height: 3rem;
   line-height: 1.2;

package/src/js/widget.js

@@ -32,7 +32,8 @@ export class WineWidget {
 
         // Инициализируем виджет
         this.initializeWidget();
-                this.initializeSearchAnimation();
+        this.initializeSearchAnimation();
+        this.sendEvent('widgetInitialized', { widgetType: this.widgetType });
 
         // Если нужна мгновенная загрузка рекомендаций только в store
         if (this.widgetType === 'store') {
@@ -40,6 +41,11 @@ export class WineWidget {
         }
     }
 
+    sendEvent(eventType, data) {
+      // Моковая реализация отправки событий в API
+      console.log('Event sent:', eventType, data);
+  }
+
     getTitle(title) {
       return !!title ? `<h1 class="wine-widget-big-title">${title}</h1>` :`<h1 class="wine-widget-big-title">
   ${translator.translate('headerLine1')} 
@@ -156,9 +162,12 @@ export class WineWidget {
     }
 
     addEventListenersStoreVersion() {
-        document
-          .getElementById('wine-search-button')
-          .addEventListener('click', () => this.handleSearch());
+      document
+      .getElementById('wine-search-button')
+      .addEventListener('click', () => {
+          this.sendEvent('searchButtonClicked', { query: document.getElementById('wine-search-input').value });
+          this.handleSearch();
+      });
     
         // Привязка фильтров
         this.setupFilterButtons('price-buttons', 'price');
@@ -213,6 +222,8 @@ export class WineWidget {
         // Логирование запроса
         console.log('Searching for:', fullQuery);
         console.log('Applied filters:', filters);
+
+        this.sendEvent('searchPerformed', { query: fullQuery, filters });
     
         // Показать эффект исчезновения карточек и индикатор загрузки
         this.animateCardDisappearance();
@@ -236,11 +247,32 @@ export class WineWidget {
         }
     }
 
+    enableHoverPopups() {
+      const tiles = document.querySelectorAll('.wine-recommendation-tile');
+      
+      tiles.forEach(tile => {
+        const popup = tile.querySelector('.wine-hover-popup');
+        if (!popup) return;
+        
+        tile.addEventListener('mouseenter', () => {
+          popup.style.display = 'block';
+          popup.classList.add('slide-in');
+        });
+        
+        tile.addEventListener('mouseleave', () => {
+          popup.classList.remove('slide-in');
+          popup.style.display = 'none';
+        });
+      });
+    }
+
     displayResults(wines, isAnimated = false) {
         const resultsContainer = document.getElementById('wine-placeholder');
         this.hideLoadingIndicator();
         resultsContainer.innerHTML = '';
 
+        this.sendEvent('resultsDisplayed', { resultsCount: wines.length });
+
         wines.forEach((wine, index) => {
 
 
@@ -262,13 +294,32 @@ export class WineWidget {
                 const paramList = [];
     if (wine.type || wine.Type)     paramList.push(wine.type || wine.Type);
     if (wine.country || wine.Country) paramList.push(wine.country || wine.Country);
-    if (wine.region || wine.Region)   paramList.push(wine.region || wine.Region);
-    if (wine.grape || wine.Grape)     paramList.push(wine.grape || wine.Grape);
+    // if (wine.region || wine.Region)   paramList.push(wine.region || wine.Region);
+    // if (wine.grape || wine.Grape)     paramList.push(wine.grape || wine.Grape);
 
     // Допустим, первые 3 идут в одну строку, а если есть 4‑й, 
     // мы выведем его на вторую строку. Или всё в одну строку — на вкус.
-    const line1 = paramList.slice(0, 3).join(' • ');
-    const line2 = paramList.slice(3).join(' • ');
+    const line1 = paramList.join(' • ');
+    // const line2 = paramList.slice(3).join(' • ');
+    const tags = wine.tags || wine.Tags;
+    const reasonPopupHTML = (wine.reason || tags)
+  ? `
+      <div class="wine-hover-popup">
+        ${wine.reason ? `<div class="popup-reason">${wine.reason}</div>` : ''}
+        ${
+          tags
+            ? `<div class="popup-tags">${
+                 Array.isArray(tags)
+                  // Для каждого тега делаем отдельный span
+                  ? tags.map(tag => `<span class="popup-tag">${tag}</span>`).join('')
+                  : tags
+               }
+              </div>`
+            : ''
+        }
+      </div>`
+  : '';
+
             const wineHTML = `
 <div class="wine-recommendation-tile ${wine.isSommSelection ? 'somm-selection' : ''}">
         ${
@@ -306,11 +357,7 @@ export class WineWidget {
             ? `<div class="wine-params">${line1}</div>`
             : ''
         }
-        ${
-          line2 
-            ? `<div class="wine-params">${line2}</div>`
-            : ''
-        }
+      
 
         <!-- Кнопка Buy, видна только при наведении -->
         <div class="bottom-row">
@@ -318,6 +365,9 @@ export class WineWidget {
           ${translator.translate('wineDetails.buy')}
         </a>
         </div>
+
+        <!-- Добавляем HTML попапа -->
+        ${reasonPopupHTML}
       </div>
 `;
             resultsContainer.insertAdjacentHTML('beforeend', wineHTML);
@@ -331,6 +381,8 @@ export class WineWidget {
                 currentCard.style.transform = 'translateY(0)';
             }, isAnimated ? index * 200 : 0); // Задержка между карточками
         });
+
+        this.enableHoverPopups();
     }
 
     animateCardDisappearance() {
@@ -430,6 +482,8 @@ export class WineWidget {
           const finalQuery = queryParts.join('; ');
       
           console.log('Final query =>', finalQuery);
+
+          this.sendEvent('barSearchPerformed', { query: finalQuery, selectedDishes, notes });
       
           try {
             // 4) Делаете запрос к API