wineater-bot 3.8.2 → 3.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "3.8.2",
+  "version": "3.9.0",
   "description": "",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/js/analytics.js

@@ -49,52 +49,67 @@ function setUniqueUserCookie() {
   return userId;
 }
   
-  // Функция для отправки событий в Mixpanel
-  function trackEvent(event, properties) {
-    const endpoint = 'https://wineater-backend.vercel.app/proxy/track';
-    const data = {
-      event,
-      properties
+  function trackWidgetEvent(event_type, store_id, data = {}, meta = {}) {
+    const endpoint = 'https://admin-api.wineater.com/api/widget-events';
+    
+    // Ensure we have a unique user ID
+    let user_id = getCookie('uniqueUserID');
+    if (!user_id) {
+      user_id = setUniqueUserCookie();
+    }
+
+    // Get device info
+    const device_info = {
+      user_agent: navigator.userAgent,
+      screen_width: window.screen.width,
+      screen_height: window.screen.height,
+      language: navigator.language,
+      platform: navigator.platform
     };
-  
-    fetch(endpoint, {
+
+    // Get current timestamp
+    const event_time = new Date().toISOString();
+
+    // Generate session ID if not exists
+    let session_id = getCookie('sessionID');
+    if (!session_id) {
+      session_id = generateUUID();
+      setCookie('sessionID', session_id, 1); // Session cookie expires in 1 day
+    }
+
+    const payload = {
+      event_type,
+      store_id,
+      user_id,
+      session_id,
+      event_time,
+      data,
+      meta,
+      device_info,
+      region: navigator.language.split('-')[1] || null,
+      language: navigator.language.split('-')[0] || 'en'
+    };
+
+    return fetch(endpoint, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify(data)
-    }).then(response => {
+      body: JSON.stringify(payload)
+    })
+    .then(response => {
       if (!response.ok) {
-        console.error('Mixpanel tracking failed', response);
+        return response.json().then(err => {
+          throw new Error(err.message || 'Failed to track widget event');
+        });
       }
-    }).catch(error => {
-      console.error('Mixpanel tracking error', error);
+      return response.json();
+    })
+    .catch(error => {
+      console.error('Widget event tracking error:', error);
+      throw error;
     });
   }
   
-  function trackChatbotOpen() {
-    trackEvent('Chatbot Opened', { distinct_id: getCookie('uniqueUserID'), client: getCookie('chatbotToken') });
-  }
-
-  function trackChatbotOpenAuto(url) {
-    trackEvent('Chatbot Opened Auto', { distinct_id: getCookie('uniqueUserID'), url, client: getCookie('chatbotToken') });
-  }
-
-  function trackChatbotClose() {
-    trackEvent('Chatbot Closed', { distinct_id: getCookie('uniqueUserID'), client: getCookie('chatbotToken') });
-  }
-  
-  function trackMessageSent(message) {
-    trackEvent('Message Sent', { distinct_id: getCookie('uniqueUserID'), message_content: message, client: getCookie('chatbotToken') });
-  }
-
-  function trackRecommendationsGet(products) {
-    trackEvent('Products Got', { distinct_id: getCookie('uniqueUserID'), products: products, client: getCookie('chatbotToken') });
-  }
-  
-  function trackProductClick(productId) {
-    trackEvent('Product Clicked', { distinct_id: getCookie('uniqueUserID'), product_id: productId, client: getCookie('chatbotToken') });
-  }
-  
-  export { setCookie, getCookie, setUniqueUserCookie, trackChatbotOpen, trackMessageSent, trackProductClick, trackChatbotClose, trackRecommendationsGet, trackChatbotOpenAuto, deleteCookie };
+  export { setCookie, getCookie, setUniqueUserCookie, deleteCookie, trackWidgetEvent };
   

package/src/js/api.js

@@ -1,6 +1,6 @@
 // api.js
 
-const stores = ['climats', 'telckel', 'biobio', 'weinpoint', 'vinigrandi', 'ampely', 'test'];
+const stores = [];
 const DEMO_TOKEN='HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG';
 
 export class Api {

package/src/js/i18n.js

@@ -539,11 +539,14 @@ class Translator {
     }
 
     async fetchConfig(storeName) {
+      console.log('storeName', storeName);
         try {
           const config = await this.api.getStoreConfig(storeName);
           this.storeLanguage = config.lang;
+          this.storeId = config.id;
           this.supportedLanguages = config.available_languages;
           this.OpenAIApiKey = config.open_ai_key;
+          console.log('this.storeId', this.storeId);
       
           const urlParams = new URLSearchParams(window.location.search);
           const urlLang = urlParams.get('lang') || urlParams.get('language');
@@ -557,15 +560,21 @@ class Translator {
           }
       
           this.currency = config.currency || 'USD';
+          return config;
         } catch (e) {
           const urlParams = new URLSearchParams(window.location.search);
           const urlLang = urlParams.get('lang') || urlParams.get('language');
       
           this.language = this.translations[urlLang] ? urlLang : 'en';
           this.currency = 'USD';
+          return config;
         }
       }
 
+      getStoreId() {
+        return this.storeId;
+      }
+
     getCurrency(key) {
         const keys = key.split('.'); // Разбиваем ключ на части
         let value = this.currencies[this.currency];

package/src/js/widget/widget-events.js

@@ -0,0 +1,18 @@
+// widget-events.js
+
+export const WIDGET_EVENTS = {
+    WIDGET_INITIALIZED: 'widget_initialized',
+    WIDGET_LOADED: 'widget_loaded',
+    SEARCH_PERFORMED: 'search_performed',
+    SEARCH_RESULTS_DISPLAYED: 'search_results_displayed',
+    NO_RESULTS_FOUND: 'no_results_found',
+    WINE_CARD_HOVER: 'wine_card_hover',
+    WINE_CARD_CLICK: 'wine_card_click',
+    WINE_DETAILS_VIEWED: 'wine_details_viewed',
+    WINE_DETAILS_CLOSED: 'wine_details_closed',
+    BUY_BUTTON_CLICKED: 'buy_button_clicked',
+    FILTER_APPLIED: 'filter_applied',
+    LANGUAGE_CHANGED: 'language_changed',
+    ERROR_OCCURRED: 'error_occurred',
+    MOBILE_VIEW_ACTIVATED: 'mobile_view_activated'
+}; 

package/src/js/widget/widget-language.js

@@ -0,0 +1,107 @@
+// widget-language.js
+import translator from '../i18n.js';
+import { WIDGET_EVENTS } from './widget-events.js';
+
+export class WidgetLanguage {
+    constructor(widget) {
+        this.widget = widget;
+    }
+
+    createLanguageSwitcher() {
+        const langContainer = document.querySelector('#powered-by-widget .powered-by-lang');
+        const languages = translator.getSupportedLanguages();
+        if (!languages) return;
+
+        const currentLanguage = translator.language;
+        const dropdown = document.createElement('select');
+        dropdown.id = 'language-dropdown';
+        dropdown.className = 'language-dropdown';
+
+        languages.forEach(lang => {
+            const option = document.createElement('option');
+            option.value = lang;
+            option.textContent = lang.toUpperCase();
+            option.selected = lang === currentLanguage;
+            dropdown.appendChild(option);
+        });
+
+        dropdown.onchange = (event) => {
+            const selectedLang = event.target.value;
+            
+            this.widget.trackEvent(WIDGET_EVENTS.LANGUAGE_CHANGED, {
+                from_language: currentLanguage,
+                to_language: selectedLang
+            });
+
+            const url = new URL(window.location.href);
+            url.searchParams.set('lang', selectedLang);
+            localStorage.setItem('selectedLanguage', selectedLang);
+            window.location.href = url.toString();
+        };
+
+        langContainer.appendChild(dropdown);
+    }
+
+    async translatePopupContent(wines) {
+        if (translator.language === translator.storeLanguage || this.widget.widgetType !== 'bar') {
+            return;
+        }
+
+        const possibleFields = ['Short Description', 'reason', 'pairing_recommendation', 'Tags', 'tags'];
+        const firstWine = wines[0];
+        const fieldsToTranslate = possibleFields.filter(field => field in firstWine);
+        const batchSize = 4;
+
+        for (let i = 0; i < wines.length; i += batchSize) {
+            const batch = wines.slice(i, i + batchSize);
+
+            const translationPromises = batch.map(async (wine, index) => {
+                const globalIndex = i + index;
+                const entries = fieldsToTranslate
+                    .map(field => {
+                        const val = wine[field] || wine[field.toLowerCase()];
+                        if (!val) return null;
+                        return { 
+                            key: field, 
+                            text: Array.isArray(val) ? val.join(', ') : val 
+                        };
+                    })
+                    .filter(Boolean);
+
+                if (entries.length === 0) return;
+
+                const translatedArray = await translator.translateTexts(
+                    Object.fromEntries(entries.map(entry => [entry.key, entry.text]))
+                );
+
+                const popup = document.querySelector(`.card-popup[data-wine-index="${globalIndex}"]`);
+                if (!popup) return;
+
+                if (translatedArray['Short Description']) {
+                    const el = popup.querySelector('.popup-short-desc');
+                    if (el) el.textContent = translatedArray['Short Description'];
+                }
+
+                if (translatedArray.reason) {
+                    const el = popup.querySelector('.popup-reason');
+                    if (el) el.textContent = translatedArray.reason;
+                }
+
+                if (translatedArray.pairing_recommendation) {
+                    const el = popup.querySelector('.popup-pairing');
+                    if (el) el.textContent = translatedArray.pairing_recommendation;
+                }
+
+                const tags = translatedArray.tags || translatedArray.Tags;
+                if (tags) {
+                    const tagArray = tags.split(',').map(tag => tag.trim());
+                    const tagHTML = tagArray.map(tag => `<span class="popup-tag">${tag}</span>`).join('');
+                    const tagsContainer = popup.querySelector('.popup-tags');
+                    if (tagsContainer) tagsContainer.innerHTML = tagHTML;
+                }
+            });
+
+            await Promise.all(translationPromises);
+        }
+    }
+} 

package/src/js/widget/widget-search.js

@@ -0,0 +1,68 @@
+// widget-search.js
+import { WIDGET_EVENTS } from './widget-events.js';
+
+export class WidgetSearch {
+    constructor(widget) {
+        this.widget = widget;
+        // this.addEventListeners(); // Removed to avoid attaching listeners before DOM is ready
+    }
+
+    async handleSearch() {
+        const query = document.getElementById('wine-search-input').value.trim() + ';';
+        
+        this.widget.trackEvent(WIDGET_EVENTS.SEARCH_PERFORMED, { query });
+        this.widget.ui.animateCardDisappearance();
+        
+        try {
+            const results = await this.widget.api.getWineRecommendationsSearch(query);
+
+            if (results && results.length > 0) {
+                console.log('Recommendations:', results);
+                this.widget.displayResults(results, true);
+                this.widget.trackEvent(WIDGET_EVENTS.SEARCH_RESULTS_DISPLAYED, {
+                    results_count: results.length,
+                    results: results.map(result => result.Title || result.title),
+                    query
+                });
+            } else {
+                console.log('No recommendations found.');
+                this.widget.ui.displayNoResultsMessage();
+                this.widget.trackEvent(WIDGET_EVENTS.NO_RESULTS_FOUND, { query });
+            }
+        } catch (error) {
+            console.error('Error fetching wine recommendations:', error.message);
+            this.widget.ui.displayErrorMessage();
+            this.widget.trackEvent(WIDGET_EVENTS.ERROR_OCCURRED, {
+                error_message: error.message,
+                query
+            });
+        }
+    }
+
+    async loadInstantRecommendations() {
+        this.widget.ui.showLoadingIndicator();
+        try {
+            const recommendations = await this.widget.api.getInstantRecommendations();
+            this.widget.displayResults(recommendations);
+        } catch (error) {
+            console.error('Error loading instant recommendations:', error.message);
+        }
+    }
+
+    addEventListeners() {
+        document
+            .getElementById('wine-search-button')
+            .addEventListener('click', () => {
+                this.handleSearch();
+            });
+
+        // Add Enter key support
+        document
+            .getElementById('wine-search-input')
+            .addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    this.handleSearch();
+                }
+            });
+    }
+} 

package/src/js/widget/widget-ui.js

@@ -0,0 +1,186 @@
+// widget-ui.js
+import translator from '../i18n.js';
+import { WIDGET_EVENTS } from './widget-events.js';
+
+export class WidgetUI {
+    constructor(widget) {
+        this.widget = widget;
+    }
+
+    getTitle(title) {
+        return title ? 
+            `<h1 class="wine-widget-big-title">${title}</h1>` :
+            `<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>
+                ${translator.translate('headerOr')} 
+                <span class="icon icon-occasion"></span>
+                <span class="icon-label">${translator.translate('headerOccasion')}</span>
+                ${translator.translate('headerLine2')}
+            </h1>`;
+    }
+
+    initializeWidget() {
+        const widgetContainer = document.getElementById(this.widget.widgetWrapper);
+        const widgetHTML = `
+            <div id="wine-widget-container">
+                <div class="wine-widget-wrapper">
+                    <div id="wine-widget-header">
+                        ${this.getTitle(this.widget.titleText)}
+                    </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">
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                            </div>
+                        </div>
+                        <div id="wine-placeholder"></div>
+                    </div>
+
+                    <div id="powered-by-widget">
+                        <div class="powered-by-center">
+                            <a href="https://wineater.com" target="_blank">
+                                <span>${translator.translate('poweredBy')}</span>
+                                <img 
+                                    src="${this.widget.countryCode === '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 class="powered-by-sommelier">${translator.translate('AI sommelier')}</span>
+                            </a>
+                        </div>
+                        <div class="powered-by-lang"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+        widgetContainer.insertAdjacentHTML('beforeend', widgetHTML);
+    }
+
+    showLoadingIndicator() {
+        const loadingIndicator = document.getElementById('loading-indicator');
+        loadingIndicator.classList.remove('hidden');
+    }
+
+    hideLoadingIndicator() {
+        const loadingIndicator = document.getElementById('loading-indicator');
+        loadingIndicator.classList.add('hidden');
+    }
+
+    displayNoResultsMessage() {
+        const resultsContainer = document.getElementById('wine-placeholder');
+        resultsContainer.innerHTML = `
+            <div class="no-results">
+                <p>${translator.translate('noResultsMessage') || 'No recommendations found for your query.'}</p>
+            </div>
+        `;
+    }
+
+    displayErrorMessage() {
+        const resultsContainer = document.getElementById('wine-placeholder');
+        resultsContainer.innerHTML = `
+            <div class="error-message">
+                <p>${translator.translate('errorMessage') || 'Something went wrong. Please try again later.'}</p>
+            </div>
+        `;
+    }
+
+    animateCardDisappearance() {
+        const cards = document.querySelectorAll('.wine-recommendation-tile');
+        cards.forEach((card, index) => {
+            setTimeout(() => {
+                card.style.opacity = '0';
+                card.style.transform = 'translateY(-20px)';
+            }, index * 100);
+        });
+
+        setTimeout(() => {
+            document.getElementById('wine-placeholder').innerHTML = '';
+            this.showLoadingIndicator();
+        }, cards.length * 100 + 300);
+    }
+
+    initializeSearchAnimation() {
+        const searchInput = document.getElementById('wine-search-input');
+        const suggestions = translator.translate('placeholderSuggestions');
+        let index = 0;
+        let charIndex = 0;
+        let typingForward = true;
+        let isInputFocused = false;
+
+        const typeEffect = () => {
+            if (isInputFocused) return;
+
+            if (typingForward) {
+                searchInput.placeholder = suggestions[index].substring(0, charIndex++);
+                if (charIndex > suggestions[index].length) {
+                    typingForward = false;
+                    setTimeout(typeEffect, 2000);
+                } else {
+                    setTimeout(typeEffect, 100);
+                }
+            } else {
+                searchInput.placeholder = suggestions[index].substring(0, charIndex--);
+                if (charIndex < 0) {
+                    typingForward = true;
+                    index = (index + 1) % suggestions.length;
+                    setTimeout(typeEffect, 500);
+                } else {
+                    setTimeout(typeEffect, 50);
+                }
+            }
+        };
+
+        typeEffect();
+
+        searchInput.addEventListener('focus', () => {
+            searchInput.placeholder = '';
+            isInputFocused = true;
+        });
+
+        searchInput.addEventListener('blur', () => {
+            isInputFocused = false;
+            charIndex = 0;
+            typingForward = true;
+            typeEffect();
+        });
+    }
+
+    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';
+            });
+        });
+    }
+}