wineater-bot 3.0.22 → 3.1.1

package/src/js/widget.js

@@ -8,6 +8,9 @@ export class WineWidget {
     constructor() {
         // Определяем тип виджета: 'store' (старый) или 'bar' (новый)
         this.widgetType = window?.wineaterData?.WIDGET_TYPE || 'store'; 
+        this.widgetWrapper = window?.wineaterData?.WIDGET_WRAPPER || 'wineater-widget-conteiner'; 
+        this.titleText = window?.wineaterData?.TITLE_TEXT;
+        this.subtitleText = window?.wineaterData?.SUBTITLE_TEXT;
         this.api = new Api(); 
 
         // Фильтры для store
@@ -37,19 +40,43 @@ export class WineWidget {
     }
 
     initializeWidget() {
-        const widgetContainer = document.getElementById('wineater-widget-conteiner');
+        const widgetContainer = document.getElementById(this.widgetWrapper);
         if (this.widgetType === 'store') {
         const widgetHTML = `
             <div id="wine-widget-container">
             <div class="wine-widget-wrapper">
                             <div id="wine-widget-header">
-                    <h1>${translator.translate('widgetTitle')}</h1>
-                    <p>${translator.translate('widgetSubtitle')}</p>
-                </div>
-                <div id="wine-widget-search">
-                    <input type="text" id="wine-search-input" placeholder="${translator.translate('searchPlaceholder')}">
-                    <button id="wine-search-button">${translator.translate('searchButton')}</button>
-                </div>
+<h1 class="wine-widget-big-title">
+  ${translator.translate('headerLine1')} 
+  <span class="icon icon-meal"></span>
+  <span class="icon-label">${translator.translate('headerMeal')}</span>,
+  <span class="icon icon-mood"></span>
+  <span class="icon-label">${translator.translate('headerMood')}</span>
+  </br>
+<!--   <span class="icon icon-budget"></span>  -->
+<!--  <span class="icon-label">${translator.translate('headerBudget')}</span>,  -->
+  ${translator.translate('headerOr')} 
+  <span class="icon icon-occasion"></span>
+  <span class="icon-label">${translator.translate('headerOccasion')}</span>
+  ${translator.translate('headerLine2')}
+</h1>
+</div>
+
+<div id="wine-widget-search">
+  <!-- Иконка поиска слева -->
+  <span class="search-icon"></span>
+  
+  <!-- Поле ввода -->
+  <input 
+    type="text" 
+    id="wine-search-input" 
+    placeholder="${translator.translate('searchPlaceholder')}">
+  
+  <!-- Кнопка -->
+  <button id="wine-search-button">
+    ${translator.translate('searchButton')}
+  </button>
+</div>
                 <div id="wine-widget-right">
                     <div id="loading-indicator" class="hidden">
                         <div id="typing-indicator" class="typing-indicator">
@@ -61,7 +88,8 @@ export class WineWidget {
                             <div id="powered-by-widget">
                     <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">
+                        <img src="${translator.translate('lang') === 'ru' ? 'https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/divino_logo.svg?x=5' : 'https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media/logo_medium_gray.svg'}" alt="Wineater Logo">
+                        <span>${translator.translate('AI sommelier')}</span>
                     </a>
                 </div>
                 </div>
@@ -207,28 +235,86 @@ export class WineWidget {
         const resultsContainer = document.getElementById('wine-placeholder');
         this.hideLoadingIndicator();
         resultsContainer.innerHTML = '';
-    
+
         wines.forEach((wine, index) => {
-            if ((index === wines.length - 1) && this.widgetType === 'store') {
-                wine['isSommSelection'] = true;
+
+
+// А потом при генерации чипса:
+            const paramChips = [];
+            if (wine.type || wine.Type) {
+            paramChips.push(wine.type || wine.Type);
             }
-            console.log(wine)
+            if (wine.country || wine.Country) {
+            paramChips.push(wine.country || wine.Country);
+            }
+            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.slice(0, 3).join(' • ');
+    const line2 = paramList.slice(3).join(' • ');
             const wineHTML = `
-           <div class="wine-recommendation-tile ${wine.isSommSelection ? 'somm-selection' : ''}">
-    ${wine.isSommSelection ? `<div class="somm-selection-badge">${translator.translate('wineDetails.sommSelection')}</div>` : ''}
-    ${(!!wine.image || !!wine.Image) ? `<img src="${wine.image || wine.Image}" alt="${wine.title || wine.Title}" />` : '' }
-    <div class="tile-details">
-        <strong>${wine.title || wine.Title}</strong>
-        <p>${translator.translate('wineDetails.price')}: ${wine.price || wine.Price}</p>
-        <p>${translator.translate('wineDetails.region')}: ${wine.region || wine.Region}</p>
-        <p>${translator.translate('wineDetails.type')}: ${wine.type || wine.Type}</p>
-        ${this.widgetType === 'bar' ? `<p>${translator.translate('wineDetails.reason')}: ${wine.pairing_recommendation || 'N/A'}</p>` : ''}
-        ${this.widgetType === 'bar' 
-            ? `<p>${translator.translate('wineDetails.code')}: ${wine.url || 'N/A'}</p>` 
-            : `<a href="${wine.Url}" target="_blank">${translator.translate('wineDetails.moreInfo')}</a>`}
-    </div>
-</div>
-            `;
+<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>`
+            : ''
+        }
+        ${
+          line2 
+            ? `<div class="wine-params">${line2}</div>`
+            : ''
+        }
+
+        <!-- Кнопка Buy, видна только при наведении -->
+        <div class="bottom-row">
+        <button class="buy-btn">
+          ${translator.translate('Buy') || 'Buy'}
+        </button>
+        </div>
+      </div>
+`;
             resultsContainer.insertAdjacentHTML('beforeend', wineHTML);
     
             // Найти только что добавленную карточку