wineater-bot 3.1.13 → 3.2.1

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: 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG', 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.1.13",
+  "version": "3.2.1",
   "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();

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,18 +124,19 @@ body {
 /* ===================== 6) Поисковая строка (input + кнопка) ===================== */
 #wine-widget-container #wine-widget-search {
   position: relative;
-  margin: 20px auto;
+  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;
@@ -235,6 +232,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 +249,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 +313,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