wineater-bot 3.0.4 → 3.0.6

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.4",
+  "version": "3.0.6",
   "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,14 @@ 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",
             },
             es: {
                 welcomeMessage: "¿Qué vas a comer? Cuéntame tu plato y te recomendaré el maridaje perfecto.",
@@ -71,7 +78,14 @@ 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",
             },
             en: {
                 welcomeMessage: "What are you planning to eat? Share your dish and I'll recommend the perfect wine pairing for your meal.",
@@ -105,7 +119,14 @@ 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",
             },
             de: {
                 welcomeMessage: "Was möchten Sie essen? Beschreiben Sie Ihr Gericht und ich empfehle Ihnen den perfekten Wein dazu.",
@@ -139,21 +160,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 +186,4 @@ class Translator {
     }
 }
 
-export default new Translator();
+export default new Translator();

package/src/js/widget-styles.js

@@ -12,6 +12,8 @@ const widgetStyles = `
     box-sizing: border-box;
     z-index: 10000;
     max-width: 1200px;
+    min-width: 1200px;
+    min-height: 500px;
     margin: 40px auto;
 }
 
@@ -312,6 +314,86 @@ 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-send-button {
+    padding: 12px 20px;
+    background: linear-gradient(90deg, #7B2BEB, #0044FF);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s ease;
+    text-align:center;
+    margin-top: 16px;
+}
+
+#bar-send-button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
+}
+
+/* Кнопка "Сбросить" (bar-reset-button), стили как у bar-send-button */
+#bar-reset-button {
+    padding: 12px 20px;
+    background: linear-gradient(90deg, #7B2BEB, #0044FF);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.2s ease;
+    margin-top: 16px; /* или подстройте под свой макет */
+    margin-left: 12px; /* чтобы отступить от кнопки "Отправить" */
+}
+
+#bar-reset-button
+
+#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,71 @@ 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="bar-buttons">
+                            <button id="bar-send-button">
+                                ${translator.translate('barSendButton')}
+                            </button>
+                            <button id="bar-reset-button" class="hidden">
+                                ${translator.translate('barResetButton')}
+                            </button>
+                        </div>
+
+                        <div id="loading-indicator" class="hidden">
+                            <div id="typing-indicator" class="typing-indicator">
+                                <span></span><span></span><span></span>
+                            </div>
+                        </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 +308,76 @@ export class WineWidget {
             console.error('Error loading instant recommendations:', error.message);
         }
     }
+    addEventListenersBarVersion() {
+        // Клик по плиткам
+        const tileElements = document.querySelectorAll('.dish-tile');
+        tileElements.forEach((tile) => {
+            tile.addEventListener('click', () => {
+                tile.classList.toggle('selected');
+            });
+        });
+    
+        // Собираем все .dish-grid
+        const dishGrids = document.querySelectorAll('.dish-grid');
+    
+        // Кнопки
+        const sendButton  = document.getElementById('bar-send-button');
+        const resetButton = document.getElementById('bar-reset-button');
+        const winePlaceholder = document.getElementById('wine-placeholder');
+    
+        if (!sendButton || !resetButton || !winePlaceholder) return;
+    
+        // Нажатие «Отправить»
+        sendButton.addEventListener('click', async () => {
+            this.showLoadingIndicator(); 
+    
+            // Скрываем все группы/гриды блюд
+            dishGrids.forEach((dg) => dg.classList.add('hidden'));
+            // Прячем кнопку «Отправить»
+            sendButton.classList.add('hidden');
+    
+            // Собираем выбранные блюда
+            const selectedDishes = [];
+            document.querySelectorAll('.dish-tile.selected').forEach(selectedTile => {
+                selectedDishes.push(selectedTile.dataset.dish);
+            });
+    
+            const query = selectedDishes.join(', ');
+            console.log('Selected bar dishes =>', query);
+    
+            try {
+                const results = await this.api.getWineRecommendationsSearch(query);
+                if (results && results.length > 0) {
+                    this.displayResults(results, true);
+                } else {
+                    this.displayNoResultsMessage();
+                }
+                // Показываем кнопку «Сбросить»
+                resetButton.classList.remove('hidden');
+            } catch (error) {
+                console.error('Error while fetching bar recommendations:', error);
+                this.displayErrorMessage();
+            } finally {
+                this.hideLoadingIndicator();
+            }
+        });
+    
+        // Нажатие «Сбросить»
+        resetButton.addEventListener('click', () => {
+            // Показываем снова все гриды
+            dishGrids.forEach((dg) => dg.classList.remove('hidden'));
+    
+            // Снимаем выделение со всех плиток
+            tileElements.forEach(tile => tile.classList.remove('selected'));
+    
+            // Очищаем контейнер с результатами
+            winePlaceholder.innerHTML = '';
+    
+            // Прячем кнопку «Сбросить»
+            resetButton.classList.add('hidden');
+    
+            // Снова показываем кнопку «Отправить»
+            sendButton.classList.remove('hidden');
+        });
+    }
 }