wineater-bot 3.0.5 → 3.0.7

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 type="module" src="https://unpkg.com/wineater-bot@1.0.0/dist/wineater-chatbot.umd.js"></script> -->
-    <script>window.wineaterData = {CLIENT_TOKEN: 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG', position: 'right-center', TYPE: 'widget'};</script>
-    <script type="module" src="./dist/wineater-chatbot.umd.js"></script>
+    <!--     <script type="module" src="./dist/wineater-chatbot.umd.js"></script> -->
+    <script>window.wineaterData = {CLIENT_TOKEN: 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG', position: 'right-center', TYPE: 'widget', WIDGET_TYPE: 'bar'};</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.0.5",
+  "version": "3.0.7",
   "description": "",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/js/barConfig.js

@@ -0,0 +1,54 @@
+// barConfig.js
+
+export const barConfig = {
+    barName: "LENEZ",
+    dishGroups: [
+      {
+        groupTitle: "Entradas",
+        dishes: [
+          "Pimientos rojo asado y aceite de oliva con ajo confitado",
+          "Ensalada de arúgula y parmesano",
+          "Tomate hierloom aliñado",
+          "Aceitunas LENEZ",
+          "PapaBnaz",
+          "Croquetas | hongos de temporada | jamón serrano",
+          "Carpaccio Cesar",
+          "Torreznos",
+          "Calamares fritos"
+        ]
+      },
+      {
+        groupTitle: "Bocadillos",
+        dishes: [
+          "Brioche de pollo frito, col y salsa macha",
+          "Baguette de calamares rebozados en salsa brava",
+          "Hogaza de cola de res en recado negro y cebollas encurtidas"
+        ]
+      },
+      {
+        groupTitle: "Embutidos",
+        dishes: [
+          "Jamón Ibérico de bellota",
+          "Lomo ibérico",
+          "Chorizo ibérico",
+          "Plato mixto"
+        ]
+      },
+      {
+        groupTitle: "Quesos",
+        dishes: [
+          "Selección de quesos"
+        ]
+      },
+      {
+        groupTitle: "Postres",
+        dishes: [
+          "Ate con queso manchego semi curado",
+          "Gelato de nata con balsámico",
+          "Gelato de ron con pasas y “El candado”, Valdespino PX",
+          "Gelato Dua Lipa",
+          "Créme Brûlée al Orange"
+        ]
+      }
+    ]
+  };

package/src/js/i18n.js

@@ -37,7 +37,15 @@ class Translator {
                 rose: "Rosé",
                 light: "Léger",
                 medium: "Moyen",
-                full: "Puissant"
+                full: "Puissant",
+
+                /* -- Новые ключи для bar-режима -- */
+                barTitle: "Sélection du bar",
+                barSubtitle: "Choisissez vos plats ci-dessous et cliquez sur «Envoyer»",
+                barSendButton: "Envoyer",
+                barResetButton: "Réinitialiser",
+                barName: "Nom du bar",
+                barNotesPlaceholder: "Entrez vos souhaits ici...",
             },
             es: {
                 welcomeMessage: "¿Qué vas a comer? Cuéntame tu plato y te recomendaré el maridaje perfecto.",
@@ -71,7 +79,15 @@ class Translator {
                 rose: "Rosado",
                 light: "Ligero",
                 medium: "Medio",
-                full: "Intenso"
+                full: "Intenso",
+
+                /* -- Новые ключи bar -- */
+                barTitle: "Platos de Bar",
+                barSubtitle: "Selecciona de la lista y presiona «Enviar»",
+                barSendButton: "Enviar",
+                barResetButton: "Reiniciar",
+                barName: "Nombre del bar",
+                barNotesPlaceholder: "Agrega tus comentarios aquí...",
             },
             en: {
                 welcomeMessage: "What are you planning to eat? Share your dish and I'll recommend the perfect wine pairing for your meal.",
@@ -105,7 +121,15 @@ class Translator {
                 rose: "Rosé",
                 light: "Light",
                 medium: "Medium",
-                full: "Full"
+                full: "Full",
+
+                /* -- Новые ключи bar -- */
+                barTitle: "Bar Dishes",
+                barSubtitle: "Select dishes below and click ‘Send’",
+                barSendButton: "Send",
+                barResetButton: "Reset",
+                barName: "Bar Name",
+                barNotesPlaceholder: "Add your wishes here...",
             },
             de: {
                 welcomeMessage: "Was möchten Sie essen? Beschreiben Sie Ihr Gericht und ich empfehle Ihnen den perfekten Wein dazu.",
@@ -139,21 +163,25 @@ class Translator {
                 rose: "Rosé",
                 light: "Leicht",
                 medium: "Mittel",
-                full: "Voll"
-              }
+                full: "Voll",
+
+                /* -- Новые ключи bar -- */
+                barTitle: "Bar-Auswahl",
+                barSubtitle: "Wählen Sie Ihre Gerichte und klicken Sie auf „Senden“",
+                barSendButton: "Senden",
+                barResetButton: "Zurücksetzen",
+                barName: "Name der Bar",
+            }
         };
     }
 
     async fetchConfig(storeName) {
-        console.log(storeName);
         try {
             const config = await this.api.getStoreConfig(storeName);
-            console.log(config);
             this.language = config.lang;
         } catch (e) {
             this.language = 'en'; // Fallback to English
         }
-        console.log(this.language);
     }
 
     translate(key) {
@@ -161,4 +189,4 @@ class Translator {
     }
 }
 
-export default new Translator();
+export default new Translator();

package/src/js/widget-styles.js

@@ -13,6 +13,7 @@ const widgetStyles = `
     z-index: 10000;
     max-width: 1200px;
     min-width: 1200px;
+    min-height: 500px;
     margin: 40px auto;
 }
 
@@ -313,6 +314,95 @@ const widgetStyles = `
         max-width: 100px;
     }
 }
+
+/* --- Стили для бар-версии --- */
+
+/* Сетка для блюд бара */
+.dish-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 12px;
+    margin: 16px 0;
+}
+
+/* Отдельная плитка блюда */
+.dish-tile {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #fff;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.2s ease;
+}
+
+.dish-tile:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
+}
+
+.dish-tile.selected {
+    background: linear-gradient(90deg, #7B2BEB, #0044FF);
+    color: #fff;
+}
+
+/* Кнопка "Отправить" для бар-версии */
+
+#bar-controls {
+  display: flex;
+  align-items: stretch; /* или center, если нужно выравнивать */
+  gap: 8px;
+  margin-top: 16px;
+}
+
+/* Задаем одной высотой и одинаковыми отступами */
+#bar-controls input,
+#bar-controls button {
+  height: 44px;           /* или 48px, как вам нравится */
+  line-height: 44px;      /* чтобы текст по вертикали выровнялся */
+  box-sizing: border-box; /* подстраховка, чтобы высота учитывала бордер */
+}
+
+/* Чтобы кнопка и инпут смотрелись схоже по высоте */
+#bar-notes-input {
+  flex: 1;
+  padding: 0 12px;      /* уберите или уменьшите вертикальные padding’и */
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 14px;
+  outline: none;
+}
+
+/* Кнопки – чуть меняем паддинги, чтобы не «лезли» за высоту */
+#bar-send-button, 
+#bar-reset-button {
+  padding: 0 20px; /* а по вертикали пусть высота сама регулируется через height */
+  border-radius: 6px;
+    background: linear-gradient(90deg, #7B2BEB, #0044FF);
+  font-size: 14px;
+  cursor: pointer;
+  white-space: nowrap;
+  color: white;
+  border: none;
+}
+
+/* При желании hover-эффект сохранить: */
+#bar-send-button:hover, 
+#bar-reset-button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
+}
+
+
+
+.hidden {
+    display: none;
+}
 `;
 
 const style = document.createElement('style');

package/src/js/widget.js

@@ -2,21 +2,42 @@
 import './widget-styles.js';
 import { Api } from './api.js';
 import translator from './i18n.js';
+import { barConfig } from './barConfig.js';
 
 export class WineWidget {
     constructor() {
-        this.api = new Api(); // Подключаем API
+        // Определяем тип виджета: 'store' (старый) или 'bar' (новый)
+        this.widgetType = window?.wineaterData?.WIDGET_TYPE || 'bar'; 
+        this.api = new Api(); 
+
+        // Фильтры для store
         this.selectedFilters = {
             price: null,
             color: null,
             intensity: null,
         };
+
+        // Если bar — берем название и список блюд из barConfig
+        if (this.widgetType === 'bar') {
+            this.barName = barConfig.barName;      // "LENEZ"
+            this.barDishes = barConfig.dishes;     // Список блюд из barConfig
+        } else {
+            this.barName = '';
+            this.barDishes = [];
+        }
+
+        // Инициализируем виджет
         this.initializeWidget();
-        this.loadInstantRecommendations(); // Загружаем мгновенные рекомендации
+
+        // Если нужна мгновенная загрузка рекомендаций только в store
+        if (this.widgetType === 'store') {
+            this.loadInstantRecommendations();
+        }
     }
 
     initializeWidget() {
         const widgetContainer = document.getElementById('wineater-widget-conteiner');
+        if (this.widgetType === 'store') {
         const widgetHTML = `
             <div id="wine-widget-container">
                 <div id="wine-widget-left">
@@ -75,20 +96,77 @@ export class WineWidget {
             </div>
         `;
         widgetContainer.insertAdjacentHTML('beforeend', widgetHTML);
-        this.addEventListeners();
+        this.addEventListenersStoreVersion();
+        } else {
+            const barHTML = `
+            <div id="wine-widget-container">
+            <div id="wine-widget-right">
+            ${barConfig.dishGroups.map(group => `
+                <!-- Обёртка группы -->
+                <div class="dish-group">
+                  <!-- Заголовок группы, если нужен -->                  
+                  <!-- Сетка блюд конкретной группы -->
+                  <div class="dish-grid">
+                    ${group.dishes.map(dish => `
+                      <div class="dish-tile" data-dish="${dish}">
+                        ${dish}
+                      </div>
+                    `).join('')}
+                  </div>
+                </div>
+              `).join('')}
+
+                        <div id="wine-placeholder"></div>
+
+                                      <div id="loading-indicator" class="hidden">
+                  <div id="typing-indicator" class="typing-indicator">
+                      <span></span><span></span><span></span>
+                  </div>
+              </div>
+
+                        <!-- Кнопки для отправки и сброса -->
+                        <div id="bar-controls">
+                  <input 
+              type="text" 
+              id="bar-notes-input" 
+              placeholder="${translator.translate('barNotesPlaceholder')}"
+            />
+            <button id="bar-send-button">
+              ${translator.translate('barSendButton')}
+            </button>
+            <button id="bar-reset-button" class="hidden">
+              ${translator.translate('barResetButton')}
+            </button>
+              </div>
+
+                    </div>
+        </div>
+        `;
+        widgetContainer.insertAdjacentHTML('beforeend', barHTML);
+
+        // Привязка обработчиков "плиток" и кнопки
+        this.addEventListenersBarVersion();
+        }
     }
 
-    addEventListeners() {
-        document.getElementById('wine-search-button').addEventListener('click', () => this.handleSearch());
+    addEventListenersStoreVersion() {
+        document
+          .getElementById('wine-search-button')
+          .addEventListener('click', () => this.handleSearch());
+    
+        // Привязка фильтров
         this.setupFilterButtons('price-buttons', 'price');
         this.setupFilterButtons('color-buttons', 'color');
         this.setupFilterButtons('intensity-buttons', 'intensity');
-        // Добавляем обработчик нажатия Enter для поля ввода
-    document.getElementById('wine-search-input').addEventListener('keydown', (event) => {
-        if (event.key === 'Enter') {
-            this.handleSearch();
-        }
-    });
+    
+        // Обработчик Enter в поле ввода
+        document
+          .getElementById('wine-search-input')
+          .addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                this.handleSearch();
+            }
+        });
     }
 
     setupFilterButtons(containerId, filterKey) {
@@ -236,4 +314,98 @@ export class WineWidget {
             console.error('Error loading instant recommendations:', error.message);
         }
     }
+    addEventListenersBarVersion() {
+        // Теперь плитки блюд появятся только после renderDishGroups()
+        const tileElements = document.querySelectorAll('.dish-tile');
+        tileElements.forEach(tile => {
+          tile.addEventListener('click', () => {
+            tile.classList.toggle('selected');
+          });
+        });
+      
+        // Собираем все группы (или все .dish-grid)
+        const dishGroups = document.querySelectorAll('.dish-group');
+      
+        // Находим элементы управления
+        const sendButton   = document.getElementById('bar-send-button');
+        const resetButton  = document.getElementById('bar-reset-button');
+        const notesInput   = document.getElementById('bar-notes-input');
+        const winePlaceholder = document.getElementById('wine-placeholder');
+        
+        if (!sendButton || !resetButton || !notesInput || !winePlaceholder) return;
+      
+        // Нажатие "Отправить"
+        sendButton.addEventListener('click', async () => {
+          dishGroups.forEach(g => g.classList.add('hidden'));
+          this.showLoadingIndicator();
+      
+          // 1) Собираем выбранные блюда
+          const selectedDishes = [];
+          document.querySelectorAll('.dish-tile.selected').forEach(tile => {
+            selectedDishes.push(tile.dataset.dish);
+          });
+      
+          // 2) Берём пожелания (notes)
+          const notes = notesInput.value.trim(); // не стираем и не скрываем поле
+      
+          // 3) Формируем запрос
+          const queryParts = [];
+          if (selectedDishes.length > 0) {
+            queryParts.push(`Dishes: ${selectedDishes.join(', ')}`);
+          }
+          if (notes) {
+            queryParts.push(`Notes: ${notes}`);
+          }
+          const finalQuery = queryParts.join('; ');
+      
+          console.log('Final query =>', finalQuery);
+      
+          try {
+            // 4) Делаете запрос к API 
+            const results = await this.api.getWineRecommendationsSearch(finalQuery);
+      
+            // 5) Скрываем группы блюд (если хотите, чтобы больше не мешались)
+      
+            // 6) Отображаем результаты
+            if (results && results.length > 0) {
+              this.displayResults(results, true);
+            } else {
+              this.displayNoResultsMessage();
+            }
+      
+            // 7) Показываем кнопку «Сбросить»
+            resetButton.classList.remove('hidden');
+      
+            // 8) Кнопку «Отправить» НЕ скрываем — оставляем!
+            // ...никакого sendButton.classList.add('hidden')
+          } catch (error) {
+            console.error('Error while fetching bar recommendations:', error);
+            this.displayErrorMessage();
+          } finally {
+            this.hideLoadingIndicator();
+          }
+        });
+      
+        // Нажатие "Сбросить"
+        resetButton.addEventListener('click', () => {
+          // 1) Показываем все группы (блюда)
+          dishGroups.forEach(g => g.classList.remove('hidden'));
+      
+          // 2) Снимаем выделение с плиток
+          tileElements.forEach(tile => tile.classList.remove('selected'));
+      
+          // 3) Очищаем результаты
+          winePlaceholder.innerHTML = '';
+      
+          // 4) Прячем кнопку «Сбросить»
+          resetButton.classList.add('hidden');
+
+          notesInput.value = '';
+      
+          // 5) Инпут с пожеланиями НЕ трогаем — пусть остается, пользователь может менять
+          // notesInput.value = ''; // Если захотите — можете раскомментить, чтобы тоже сбрасывать
+      
+          // 6) «Отправить» и дальше на месте, не меняется
+        });
+      }
 }