wineater-bot 3.2.1 → 3.4.0

package/src/js/widget.js

@@ -2,7 +2,6 @@
 import './widget-styles.js';
 import { Api } from './api.js';
 import translator from './i18n.js';
-import { barConfig } from './barConfig.js';
 
 export class WineWidget {
     constructor() {
@@ -21,24 +20,12 @@ export class WineWidget {
             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.initializeSearchAnimation();
         this.sendEvent('widgetInitialized', { widgetType: this.widgetType });
+        this.loadInstantRecommendations();
 
-        // Если нужна мгновенная загрузка рекомендаций только в store
-        if (this.widgetType === 'store') {
-            this.loadInstantRecommendations();
-        }
     }
 
     sendEvent(eventType, data) {
@@ -65,7 +52,6 @@ export class WineWidget {
 
     initializeWidget() {
         const widgetContainer = document.getElementById(this.widgetWrapper);
-        if (this.widgetType === 'store') {
         const widgetHTML = `
             <div id="wine-widget-container">
             <div class="wine-widget-wrapper">
@@ -108,57 +94,6 @@ export class WineWidget {
         `;
         widgetContainer.insertAdjacentHTML('beforeend', widgetHTML);
         this.addEventListenersStoreVersion();
-        } else {
-            const barHTML = `
-            <div id="wine-widget-container" class="bar-widget">
-            <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();
-        }
-        this.initializeSearchAnimation();
     }
 
     addEventListenersStoreVersion() {
@@ -267,122 +202,142 @@ export class WineWidget {
     }
 
     displayResults(wines, isAnimated = false) {
-        const resultsContainer = document.getElementById('wine-placeholder');
-        this.hideLoadingIndicator();
-        resultsContainer.innerHTML = '';
-
-        this.sendEvent('resultsDisplayed', { resultsCount: wines.length });
-
-        wines.forEach((wine, index) => {
-
+      const resultsContainer = document.getElementById('wine-placeholder');
+      this.hideLoadingIndicator();
+      resultsContainer.innerHTML = '';
+    
+      this.sendEvent('resultsDisplayed', { resultsCount: wines.length });
+    
+      const getValue = (wine, key) => wine[key] || wine[key.charAt(0).toUpperCase() + key.slice(1)];
+      const joinParams = (wine, keys) =>
+        keys.map(key => getValue(wine, key)).filter(Boolean).join(' • ');
+    
+      const createTagHTML = tags =>
+        Array.isArray(tags)
+          ? tags.map(tag => `<span class="popup-tag">${tag}</span>`).join('')
+          : '';
+    
+      const createPopupHTML = (wine) => {
+        const tags = wine.tags || wine.Tags;
+        const text = wine.reason || wine['Short Description'];
+        if (!text && !tags) return '';
+        return `
+          <div class="wine-hover-popup">
+            ${text ? `<div class="popup-reason">${text}</div>` : ''}
+            ${tags ? `<div class="popup-tags">${createTagHTML(tags)}</div>` : ''}
+          </div>`;
+      };
+    
+      wines.forEach((wine, index) => {
+        const title = getValue(wine, 'title');
+        const image = getValue(wine, 'image');
+        const price = getValue(wine, 'total');
+        const url = getValue(wine, 'url');
+        const tags = wine.tags || wine.Tags;
+        const line1 = joinParams(wine, ['type', 'country', 'region', 'grape']);
+        const tagsHTML = tags ? createTagHTML(tags) : '';
+        const reasonPopupHTML = createPopupHTML(wine);
+        const shortDescription = wine['Short Description'];
+        const pairing = wine.pairing_recommendation;
+        const isSomm = wine.isSommSelection;
+    
+        const wineHTML = `
+          <div class="wine-recommendation-tile ${isSomm ? 'somm-selection' : ''}">
+            ${isSomm ? `<div class="somm-selection-badge">${translator.translate('wineDetails.sommSelection')}</div>` : ''}
+    
+            <div class="tile-top">
+              ${image ? `<img src="${image}" alt="${title}" class="wine-image" />` : ''}
+              <div class="wine-price">${price} ${translator.getCurrency('label')}</div>
+              <h3 class="wine-title">${title}</h3>
+            </div>
+    
+            ${line1 ? `<div class="wine-params">${line1}</div>` : ''}
+    
+            <div class="bottom-row">
+              ${url
+                ? `<a class="buy-btn" href="${url}" target="_blank">${translator.translate('wineDetails.buy')}</a>`
+                : `<button class="buy-btn" data-toggle-info>${translator.translate('moreInfo')}</button>`
+              }
+            </div>
+    
+            <div class="card-popup hidden">
+              <div class="card-popup-header">
+                <h2>${title}</h2>
+                <span class="card-popup-close">&times;</span>
+              </div>
+              ${shortDescription ? `<p>${shortDescription}</p>` : ''}
+              ${wine.reason ? `<div class="popup-reason">${wine.reason}</div>` : pairing ? `<p>${pairing}</p>` : ''}
+              ${tagsHTML ? `<div class="popup-tags">${tagsHTML}</div>` : ''}
+            </div>
+    
+            ${reasonPopupHTML}
+          </div>
+        `;
+    
+        resultsContainer.insertAdjacentHTML('beforeend', wineHTML);
+        const currentCard = resultsContainer.children[index];
+    
+        if (!url) {
+          const buyBtn = currentCard.querySelector('[data-toggle-info]');
+          const popup = currentCard.querySelector('.card-popup');
+          const closeBtn = currentCard.querySelector('.card-popup-close');
+        
+          closeBtn?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            popup.classList.add('hidden');
+          });
 
-// А потом при генерации чипса:
-            const paramChips = [];
-            if (wine.type || wine.Type) {
-            paramChips.push(wine.type || wine.Type);
+          document.addEventListener('click', (e) => {
+            const isInsideAnyPopup = 
+              e.target.closest('.card-popup') || 
+              e.target.closest('.mobile-fullscreen-popup') || 
+              e.target.closest('[data-toggle-info]');
+          
+            if (!isInsideAnyPopup) {
+              document.querySelectorAll('.card-popup').forEach(p => p.classList.add('hidden'));
+              document.querySelectorAll('.mobile-fullscreen-popup').forEach(p => {
+                const wrapper = p.closest('.wine-widget-context');
+                if (wrapper) wrapper.remove();
+                else p.remove();
+              });
             }
-            if (wine.country || wine.Country) {
-            paramChips.push(wine.country || wine.Country);
+          });
+        
+          buyBtn?.addEventListener('click', (e) => {
+            e.stopPropagation();
+        
+            // Закрыть все открытые popup'ы
+            document.querySelectorAll('.card-popup').forEach(p => p.classList.add('hidden'));
+            document.querySelectorAll('.mobile-fullscreen-wrapper').forEach(p => p.remove());
+        
+            if (window.innerWidth <= 768) {
+              const popupContent = popup.innerHTML;
+        
+              const overlay = document.createElement('div');
+              overlay.className = 'mobile-fullscreen-wrapper';
+              overlay.innerHTML = `
+                <div class="mobile-fullscreen-overlay"></div>
+                <div class="card-popup mobile-fullscreen-popup">${popupContent}</div>
+              `;
+        
+              overlay.querySelector('.card-popup-close')?.addEventListener('click', () => overlay.remove());
+        
+              document.body.appendChild(overlay);
+            } else {
+              popup.classList.remove('hidden');
             }
-            if (wine.region || wine.Region) {
-            paramChips.push(wine.region || wine.Region);
-            };
-            if (wine.grape || wine.Grape) {
-                paramChips.push(wine.grape || wine.Grape);
-                }
-
-                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);
-
-    // Допустим, первые 3 идут в одну строку, а если есть 4‑й, 
-    // мы выведем его на вторую строку. Или всё в одну строку — на вкус.
-    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' : ''}">
-        ${
-          wine.isSommSelection 
-            ? `<div class="somm-selection-badge">
-                 ${translator.translate('wineDetails.sommSelection')}
-               </div>`
-            : ''
-        }
-
-        <div class="tile-top">
-        <!-- Большое изображение по центру -->
-        ${
-          (wine.image || wine.Image)
-            ? `<img src="${wine.image || wine.Image}" 
-                     alt="${wine.title || wine.Title}" 
-                     class="wine-image" />`
-            : ''
-        }
-
-        <!-- Цена над названием -->
-        <div class="wine-price">
-          ${wine.price || wine.Price}
-        </div>
-
-        <!-- Название вина (больше шрифт) -->
-        <h2 class="wine-title">
-          ${wine.title || wine.Title}
-        </h2>
-  </div>
-
-        <!-- Параметры через точки -->
-        ${
-          line1 
-            ? `<div class="wine-params">${line1}</div>`
-            : ''
+          });
         }
-      
-
-        <!-- Кнопка Buy, видна только при наведении -->
-        <div class="bottom-row">
-        <a class="buy-btn" href="${wine.url || wine.Url}" target="_blank">
-          ${translator.translate('wineDetails.buy')}
-        </a>
-        </div>
-
-        <!-- Добавляем HTML попапа -->
-        ${reasonPopupHTML}
-      </div>
-`;
-            resultsContainer.insertAdjacentHTML('beforeend', wineHTML);
     
-            // Найти только что добавленную карточку
-            const currentCard = resultsContainer.children[index];
+        setTimeout(() => {
+          currentCard.style.opacity = '1';
+          currentCard.style.transform = 'translateY(0)';
+        }, isAnimated ? index * 200 : 0);
+      });
     
-            // Анимация появления
-            setTimeout(() => {
-                currentCard.style.opacity = '1';
-                currentCard.style.transform = 'translateY(0)';
-            }, isAnimated ? index * 200 : 0); // Задержка между карточками
-        });
-
+      if (this.widgetType === 'store') {
         this.enableHoverPopups();
+      }
     }
 
     animateCardDisappearance() {
@@ -437,102 +392,6 @@ 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);
-
-          this.sendEvent('barSearchPerformed', { query: finalQuery, selectedDishes, notes });
-      
-          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) «Отправить» и дальше на месте, не меняется
-        });
-      }
 
       initializeSearchAnimation() {
     const searchInput = document.getElementById('wine-search-input');

package/src/css/styles.css

@@ -1,239 +0,0 @@
-@font-face {
-    font-family: 'Poppins';
-    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
-}
-
-/* Overall chatbot styles */
-#chatbot-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    font-family: 'Poppins', sans-serif; /* Use Poppins as the main font */
-    z-index: 1000; /* Ensure chat is above other content */
-}
-
-/* Styling the chat icon */
-#chat-icon {
-    display: flex; /* Use flexbox for alignment */
-    align-items: center; /* Center items vertically */
-    justify-content: center; /* Center items horizontally */
-    padding: 8px; /* Add some padding around the text and image */
-    border-radius: 20px; /* Rounded corners for the button */
-    background-color: #7E27ED; /* Background color from your style guide */
-    cursor: pointer;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Optional: add shadow for depth */
-
-}
-
-#chat-icon img {
-    width: 80%; /* Adjust icon size as needed */
-    height: auto;
-    margin-right: 8px;
-}
-
-#chat-icon span {
-    color: white; /* Text color */
-    font-family: 'Poppins', sans-serif; /* Font family from your style guide */
-    /* Add more text styles if needed */
-}
-
-/* Chat window styles */
-#chat-window {
-    width: 350px; /* Width of the chat window */
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    bottom: 80px; /* Positioning from the bottom */
-    right: 0;
-    display: none; /* Initially hidden */
-}
-
-/* Header of the chat window */
-#chat-header {
-    background-color: #7E27ED;
-    color: white;
-    padding: 16px;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative; /* Needed for absolute positioning of the close button */
-}
-
-
-/* Style for the close button */
-#close-btn {
-    font-size: 24px; /* Size of the close button */
-    cursor: pointer;
-    padding: 0 10px;
-    line-height: 24px;
-}
-
-/* Container for messages */
-#message-container {
-    max-height: 300px;
-    overflow-y: auto;
-    padding: 15px;
-    background: #f7f7f7; /* Light grey background for the message area */
-}
-
-/* Input area */
-#input-container {
-    border-top: 2px solid #ececec; /* Light border for input area */
-    background-color: white; /* White background for input area */
-    padding: 12px;
-    display: flex;
-    align-items: center; /* Align button and input vertically */
-    gap: 10px; /* Adds space between input and button */
-}
-
-#input-container input {
-    flex-grow: 1;
-    border: 2px solid #B928EB; /* Input border color based on style guide */
-    padding: 10px;
-    border-radius: 4px;
-    font-family: 'Poppins', sans-serif; /* Use Poppins font */
-}
-
-#input-container button {
-    padding: 10px 20px; /* Larger padding for a larger button */
-    background-color: #5F82FF; /* Button background color from style guide */
-    border: none;
-    color: white;
-    border-radius: 4px;
-    font-family: 'Poppins', sans-serif; /* Use Poppins font */
-    font-size: 1rem; /* Adjust font size as needed */
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle shadow for depth */
-    transition: background-color 0.3s ease; /* Smooth transition for background color */
-}
-
-#input-container button:hover {
-    background-color: #2FC0BF; /* Hover color based on style guide */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Darker shadow for hover state */
-}
-
-/* Message bubble styling */
-.message {
-    margin-bottom: 8px;
-    padding: 12px;
-    background-color: #e0e0e0; /* Light grey for message bubbles */
-    border-radius: 16px;
-    font-size: 14px;
-    line-height: 1.4;
-}
-
-.message.user {
-    background-color: #B928EB; /* User message bubble color */
-    color: white;
-    align-self: flex-end;
-}
-
-.message.api {
-    background-color: #e0e0e0; /* API message bubble color */
-    color: black;
-    align-self: flex-start;
-}
-
-/* Wine item styling */
-.wine-item {
-    display: flex;
-    align-items: center;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 10px;
-    margin-top: 10px;
-    background: white; /* White background for wine items */
-}
-
-.wine-item img {
-    width: 80px; /* Smaller wine image size */
-    height: auto;
-    border-radius: 4px; /* Rounded corners for images */
-    margin-right: 12px;
-}
-
-.wine-item div {
-    font-size: 0.9rem; /* Smaller font size for wine info */
-}
-
-/* Ensure the chat window is visible when the 'visible' class is added */
-#chat-window.visible {
-    display: block;
-}
-
-/* Loader Styles */
-.loader {
-    display: none; /* Loader is hidden by default */
-    border: 4px solid #f3f3f3; /* Light grey */
-    border-top: 4px solid #3498db; /* Blue, could be your primary color */
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    animation: spin 2s linear infinite;
-    margin: 20px auto; /* Centered horizontally */
-}
-
-.loader.visible {
-    display: block;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/* Typing indicator styles */
-.typing-indicator {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 0; /* Adjust as needed */
-    visibility: hidden; /* Start off invisible */
-}
-
-.typing-indicator span {
-    display: block;
-    width: 8px;
-    height: 8px;
-    margin: 0 4px;
-    background-color: #3498db; /* Or use a color from your style guide */
-    border-radius: 50%;
-    opacity: 0.4;
-    animation: typing 1.5s infinite;
-}
-
-/* Animation keyframes */
-@keyframes typing {
-    0% { transform: translateY(0); }
-    20% { transform: translateY(-10px); }
-    40% { transform: translateY(0); }
-    60% { transform: translateY(-10px); }
-    80% { transform: translateY(0); }
-    100% { transform: translateY(0); }
-}
-
-/* To stagger the animation for each dot */
-.typing-indicator span:nth-child(1) {
-    animation-delay: 0s;
-}
-.typing-indicator span:nth-child(2) {
-    animation-delay: 0.2s;
-}
-.typing-indicator span:nth-child(3) {
-    animation-delay: 0.4s;
-}
-
-/* Show the typing indicator */
-.typing-indicator.visible {
-    visibility: visible;
-    height: 50px;
-}
-
-  #message-container {
-    overflow-y: auto;
-    height: 300px; /* adjust based on your UI needs */
-    padding: 10px;
-}