wineater-bot 3.9.4 → 4.0.0-beta.3

package/src/components/WineTile.svelte

@@ -0,0 +1,331 @@
+<script lang="ts">
+	import type { RecommendedWine, Wine, WineId, WinePrice } from '../services/api/api';
+	import { formatCurrency, getTranslation } from '../services/i18n/i18n';
+	import WinePopup from './WinePopup.svelte';
+	import { onMount } from 'svelte';
+	import { appStore } from '../services/store/app-store.svelte';
+	let lang = $derived(appStore.getAppLanguage());
+
+	let {
+		wine,
+		index,
+		selectedWineId,
+		hoveredWineId,
+		onTileEnter,
+		onTileLeave,
+		onTileClick,
+		onBuyClick,
+		onPopupClose,
+		isAnimating,
+		translatedPopup
+	}: {
+		wine: Wine | RecommendedWine;
+		index: number;
+		selectedWineId: WineId | null;
+		hoveredWineId: WineId | null;
+		onTileEnter: (wine: Wine | RecommendedWine) => void;
+		onTileLeave: (wine: Wine | RecommendedWine) => void;
+		onTileClick: (event: MouseEvent, wine: Wine | RecommendedWine) => void;
+		onBuyClick: (wine: Wine | RecommendedWine, index: number) => void;
+		onPopupClose: () => void;
+		isAnimating: boolean;
+		translatedPopup: Partial<RecommendedWine> | null;
+	} = $props();
+
+	const getValue = (wine: Wine | RecommendedWine, key: string) =>
+		wine[key] || wine[key.charAt(0).toUpperCase() + key.slice(1)];
+
+	const joinParams = (wine: Wine | RecommendedWine, keys: string[]) =>
+		keys
+			.map((key) => getValue(wine, key))
+			.filter(Boolean)
+			.join(' • ');
+
+	function formatPrice(price: WinePrice) {
+		return formatCurrency(price, appStore.getCurrency?.() || 'USD', lang);
+	}
+
+	function isPopupOpen(id: WineId) {
+		return selectedWineId === id;
+	}
+
+	function hasHoverPopupContent(w: Wine | RecommendedWine) {
+		return !!(w.reason || w.shortDescription || w.tags);
+	}
+
+	function getTags(translated: Wine | RecommendedWine, w: Wine | RecommendedWine) {
+		let tags: any = translated?.tags || w.tags;
+		if (!tags) return [];
+		if (Array.isArray(tags)) tags = tags.join(',');
+		if (typeof tags !== 'string') return [];
+		return tags
+			.split(',')
+			.map((tag) => tag.trim())
+			.filter(Boolean);
+	}
+	let isMobile = $state(false);
+
+	onMount(() => {
+		const checkIsMobile = () => {
+			isMobile = window.innerWidth <= 768;
+		};
+
+		checkIsMobile();
+		window.addEventListener('resize', checkIsMobile);
+		return () => {
+			window.removeEventListener('resize', checkIsMobile);
+		};
+	});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+	class="wine-recommendation-tile {isAnimating ? 'ww-slide-up' : ''}"
+	onmouseenter={() => onTileEnter(wine)}
+	onmouseleave={() => onTileLeave(wine)}
+	onclick={(event) => onTileClick(event, wine)}
+>
+	<div class="tile-top">
+		{#if wine.image}
+			<img src={wine.image} alt={wine.title} class="wine-image" />
+		{/if}
+		{#if wine.total}
+			<div class="wine-price">
+				{formatPrice(wine.total)}
+			</div>
+		{/if}
+
+		<h3 class="wine-title">{wine.title}</h3>
+	</div>
+
+	{#if joinParams(wine, ['type', 'country', 'region', 'grape'])}
+		<div class="wine-params">
+			{joinParams(wine, ['type', 'country', 'region', 'grape'])}
+		</div>
+	{/if}
+
+	<div class="bottom-row">
+		{#if wine.url}
+			<a class="buy-btn" href={wine.url} target="_blank">
+				{getTranslation({ key: 'wineDetails.buy', lang })}
+			</a>
+		{:else}
+			<button class="buy-btn" type="button" onclick={() => onBuyClick(wine, index)}>
+				{getTranslation({ key: 'moreInfo', lang })}
+			</button>
+		{/if}
+	</div>
+
+	{#if isPopupOpen(wine.id) && !isMobile}
+		<WinePopup
+			title={wine.title}
+			shortDescription={translatedPopup?.shortDescription || wine.shortDescription}
+			reason={translatedPopup?.reason || wine.reason}
+			pairing={translatedPopup?.pairingRecommendation || wine.pairingRecommendation}
+			tags={getTags(translatedPopup, wine)}
+			onClose={onPopupClose}
+			isMobile={false}
+		/>
+	{/if}
+
+	{#if hasHoverPopupContent(wine)}
+		<div class="wine-hover-popup {hoveredWineId === wine.id ? 'slide-in visible' : ''}">
+			{#if translatedPopup?.reason || translatedPopup?.shortDescription || wine.reason || wine.shortDescription}
+				<div class="popup-reason">
+					{translatedPopup?.reason ||
+						translatedPopup?.shortDescription ||
+						wine.reason ||
+						wine.shortDescription}
+				</div>
+			{/if}
+			{#if translatedPopup?.tags || translatedPopup?.Tags || wine.tags}
+				<div class="popup-tags">
+					{#each getTags(translatedPopup, wine) as tag}
+						<span class="popup-tag">{tag}</span>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+{#if isPopupOpen(wine.id) && isMobile}
+	<WinePopup
+		title={wine.title}
+		shortDescription={translatedPopup?.shortDescription || wine.shortDescription}
+		reason={translatedPopup?.reason || wine.reason}
+		pairing={translatedPopup?.pairingRecommendation || wine.pairingRecommendation}
+		tags={getTags(translatedPopup, wine)}
+		onClose={onPopupClose}
+		isMobile={true}
+	/>
+{/if}
+
+<style>
+	.wine-recommendation-tile {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		box-sizing: border-box;
+		padding: 16px 8px;
+		border-right: 2px solid #f6f7fd;
+		position: relative;
+		transform: translateY(0);
+		opacity: 1;
+		transition:
+			transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
+			opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
+		will-change: transform, opacity;
+	}
+
+	.wine-recommendation-tile:last-child {
+		border-right: none;
+	}
+
+	.wine-recommendation-tile.ww-slide-up {
+		transform: translateY(-28px);
+		opacity: 0;
+	}
+
+	.tile-top {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-start;
+	}
+
+	.wine-image {
+		height: 200px;
+		object-fit: contain;
+		margin: 0 auto 16px;
+		display: block;
+	}
+
+	.wine-title {
+		font-size: 15px;
+		font-weight: 500;
+		margin: 0 0 8px;
+		min-height: 3rem;
+		line-height: 1.2;
+		text-align: center;
+		color: #000;
+	}
+
+	.wine-params {
+		font-size: 14px;
+		color: #666;
+		white-space: normal;
+		text-align: center;
+	}
+
+	.bottom-row {
+		margin-top: auto;
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		justify-content: center;
+	}
+
+	.wine-price {
+		font-size: 16px;
+		font-weight: 400;
+		margin-bottom: 8px;
+		color: #333;
+	}
+
+	.buy-btn {
+		margin: 16px auto 0;
+		background-color: transparent;
+		color: var(--wineater-color);
+		border: 2px solid var(--wineater-color);
+		border-radius: 6px;
+		padding: 8px 16px;
+		font-size: 14px;
+		font-weight: 500;
+		cursor: pointer;
+		display: block;
+		text-decoration: none;
+		transition:
+			background-color 0.2s,
+			color 0.2s,
+			box-shadow 0.2s;
+	}
+
+	.buy-btn:hover {
+		box-shadow: 0 4px 8px rgba(123, 43, 235, 0.25);
+		background-color: var(--wineater-color);
+		color: #fff;
+	}
+
+	/* Hover popup inside tile */
+	.wine-hover-popup {
+		display: none;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		padding: 12px;
+		background-color: #fff;
+		border: 1px solid #ddd;
+		border-radius: 8px;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+		transition: transform 0.3s ease;
+		z-index: 999;
+	}
+
+	.wine-hover-popup.visible {
+		display: block;
+	}
+
+	.wine-hover-popup.slide-in {
+		animation: whPopup 0.25s ease;
+	}
+
+	.popup-reason {
+		font-size: 14px;
+		font-weight: 400;
+		color: #333;
+		margin-bottom: 8px;
+	}
+
+	.popup-tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-top: 8px;
+		justify-content: center;
+	}
+
+	.popup-tag {
+		display: inline-block;
+		padding: 4px 8px;
+		border-radius: 12px;
+		background-color: #f5f0ff;
+		border: 1px solid #ddd;
+		font-size: 13px;
+		color: #333;
+		text-transform: capitalize;
+	}
+
+	@keyframes whPopup {
+		from {
+			opacity: 0;
+			transform: translateY(6px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media screen and (max-width: 768px) {
+		.wine-recommendation-tile {
+			flex: 0 0 auto;
+			scroll-snap-align: center;
+			width: 240px;
+			text-align: center;
+		}
+	}
+</style>

package/src/demo.spec.ts

@@ -0,0 +1,13 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+	
+	it('handles ESM imports correctly', () => {
+		// Test that verifies ESM module loading works
+		const result = typeof import.meta !== 'undefined';
+		expect(result).toBe(true);
+	});
+});

package/src/index.js

@@ -1,37 +1,5 @@
-import { setCookie, setUniqueUserCookie, getCookie } from './js/analytics.js';
-import flagsmith from 'flagsmith';
-import Tracker from '@openreplay/tracker';
-import { WineWidget } from './js/widget.js';
-import translator from './js/i18n.js';
+import SvelteApp from './App.svelte'
+import { mount } from 'svelte';
 
-const DEMO_TOKEN = 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG';
-
-class App {
-    constructor() {
-        this.tracker = new Tracker({ projectKey: "PA8j9fAi49i6g2QnvpNs", '__DISABLE_SECURE_MODE': true });
-    }
-
-    async initTranslator() {
-        const storeName = this.store ? this.store.charAt(0).toUpperCase() + this.store.slice(1) : 'Test';
-        await translator.fetchConfig(storeName || 'Test');
-    }
- 
-    initCookies() {
-        setCookie('chatbotToken', window.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN, 365);
-        setUniqueUserCookie();
-    }
-
-
-    async initialize() {
-        this.tracker.start();
-        await this.initTranslator();
-        this.initCookies();
-        new WineWidget();
-    }
-}
-
-// Initialize the application on DOM ready
-document.addEventListener('DOMContentLoaded', () => {
-    const app = new App();
-    app.initialize();
-});
+const app = mount(SvelteApp, { target: document.getElementById("wineater-widget-conteiner") });
+export default app

package/src/services/analytics/analytics.ts

@@ -0,0 +1,103 @@
+function generateUUID(): string {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        const r = Math.random() * 16 | 0,
+            v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+}
+
+export function setCookie(name: string, value: string, days: number) {
+    let expires = "";
+    if (days) {
+        const date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "") + expires + "; path=/; secure; samesite=strict";
+}
+
+function getCookie(name: string): string | null {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+        let c = ca[i];
+        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+}
+
+export function setUniqueUserCookie(): string {
+    const cookieName = 'uniqueUserID';
+    let userId = getCookie(cookieName);
+
+    if (!userId) {
+        userId = generateUUID();
+        setCookie(cookieName, userId, 365);
+    }
+    return userId;
+}
+
+export function trackWidgetEvent(event_type: string, 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
+    };
+
+    // 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,
+        session_id,
+        event_time,
+        data,
+        meta: {
+            ...meta,
+            user_id
+        },
+        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(payload)
+    })
+        .then(response => {
+            if (!response.ok) {
+                return response.json().then(err => {
+                    throw new Error(err.message || 'Failed to track widget event');
+                });
+            }
+            return response.json();
+        })
+        .catch(error => {
+            console.error('Widget event tracking error:', error);
+            throw error;
+        });
+}

package/src/{js/widget/widget-events.js → services/analytics/constants.ts}

@@ -1,5 +1,3 @@
-// widget-events.js
-
 export const WIDGET_EVENTS = {
     WIDGET_INITIALIZED: 'widget_initialized',
     WIDGET_LOADED: 'widget_loaded',

package/src/services/api/api.ts

@@ -0,0 +1,112 @@
+import { deserializeInstantRecommendation, deserializeRecommendedWine } from "./deserialize";
+
+export type WineId = string;
+export type WinePrice = number;
+export type Wine = {
+    id: WineId;
+    title: string;
+    price: WinePrice;
+    type: string;
+    region: string;
+    grape: string;
+    appellation: string | null;
+    url: string | null;
+    store: string;
+    storeId: string | null;
+    image: string;
+    producer: string | null;
+    country: string;
+    vintage: number | null;
+    tags: string[];
+    pairingRecommendation: string | null;
+    shortDescription: string;
+    score: number | null;
+    total: number | null;
+    itemId: string | null;
+    isPromote: boolean | null;
+    stock: number | null;
+};
+
+export type RecommendedWine = Omit<Wine, "shortDescription" | "producer" | "pairingRecommendation" | "itemId"> & {
+    description: string;
+    distance: number;
+    reason: string;
+};
+
+class WineaterApi {
+    #baseUrl = 'https://wineater-backend.vercel.app/';
+    #token: string;
+
+    constructor(token: string) {
+        this.#token = token;
+    }
+
+    async getInstantRecommendations(): Promise<Wine[]> {
+        try {
+            const response = await fetch(`${this.#baseUrl}dish/recommendations/instant`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.#token}`
+                }
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(`API call failed with status ${response.status}: ${data.message || 'No additional error information'}`);
+            }
+
+            const deserializedData: Wine[] = data.map(deserializeInstantRecommendation);
+            return deserializedData;
+        } catch (error) {
+            throw new Error(`Error in getInstantRecommendations: ${error.message}`);
+        }
+    }
+
+    async getWineRecommendationsSearch(text): Promise<RecommendedWine[]> {
+        try {
+            const response = await fetch(`${this.#baseUrl}dish/recommendations/search`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.#token}`
+                },
+                body: JSON.stringify({ text: text })
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(`API call failed with status ${response.status}: ${data.message || 'No additional error information'}`);
+            }
+
+            const deserializedData: RecommendedWine[] = data.map(deserializeRecommendedWine);
+            return deserializedData;
+        } catch (error) {
+            throw new Error(`Error in getWineRecommendations: ${error.message}`);
+        }
+    }
+
+    // TODO: define store type
+    async getStoreConfig(): Promise<any> {
+        try {
+            const response = await fetch(`${this.#baseUrl}stores/store`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${this.#token}`
+                }
+            });
+            if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+            return await response.json();
+        } catch (error) {
+            console.error('Error fetching store configuration:', error);
+            throw error;
+        }
+    }
+}
+
+const DEMO_TOKEN = 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG';
+const token = window?.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN;
+export const wineaterApi = new WineaterApi(token)

package/src/services/api/deserialize.ts

@@ -0,0 +1,102 @@
+import type { RecommendedWine, Wine } from './api.ts';
+
+type RawInstantRecommendation = {
+    ID: string;
+    Appellation?: string;
+    Country?: string;
+    Grape: string;
+    Image: string;
+    Price: string;
+    Producer?: string;
+    Region: string;
+    Score?: string;
+    "Short Description"?: string;
+    Store: string;
+    Store_id?: string;
+    Tags: any[];
+    Title: string;
+    Type: string;
+    Url?: string;
+    Vintage?: string;
+    pairing_recommendation?: string;
+    Total?: string;
+    item_id?: string;
+    is_promote?: boolean;
+    stock?: string;
+}
+
+export function deserializeInstantRecommendation(raw: RawInstantRecommendation): Wine {
+    return {
+        id: String(raw.ID),
+        appellation: raw.Appellation || null,
+        country: raw.Country || null,
+        grape: raw.Grape,
+        image: raw.Image,
+        price: Number(raw.Price),
+        producer: raw.Producer || null,
+        region: raw.Region,
+        score: raw.Score ? Number(raw.Score) : null,
+        shortDescription: raw["Short Description"] || null,
+        store: raw.Store,
+        storeId: raw.Store_id || null,
+        tags: Array.isArray(raw.Tags) ? raw.Tags.map(String) : [],
+        title: raw.Title,
+        type: raw.Type,
+        url: raw.Url || null,
+        vintage: raw.Vintage ? Number(raw.Vintage) : null,
+        pairingRecommendation: raw.pairing_recommendation || null,
+        total: raw.Total ? Number(raw.Total) : null,
+        itemId: raw.item_id || null,
+        isPromote: raw.is_promote ? Boolean(raw.is_promote) : null,
+        stock: raw.stock ? Number(raw.stock) : null,
+    }
+}
+
+type RawRecommendedWine = {
+    id: string;
+    title: string;
+    description: string;
+    region: string;
+    price: string;
+    grape: string;
+    appellation?: string;
+    url?: string;
+    store: string;
+    storeId?: string;
+    image: string;
+    country?: string;
+    vintage?: string;
+    tags: any[];
+    score?: string;
+    total?: string;
+    is_promote?: boolean;
+    stock?: string;
+    distance: string;
+    reason: string;
+    type: string;
+}
+export function deserializeRecommendedWine(raw: RawRecommendedWine): RecommendedWine {
+    return {
+        id: String(raw.id),
+        title: String(raw.title),
+        description: String(raw.description),
+        region: String(raw.region),
+        price: Number(raw.price),
+        grape: String(raw.grape),
+        appellation: raw.appellation ? String(raw.appellation) : null,
+        url: raw.url ? String(raw.url) : null,
+        store: String(raw.store),
+        storeId: raw.storeId ? String(raw.storeId) : null,
+        image: String(raw.image),
+        country: raw.country ? String(raw.country) : null,
+        vintage: raw.vintage ? Number(raw.vintage) : null,
+        tags: Array.isArray(raw.tags) ? raw.tags.map(String) : [],
+        score: raw.score ? Number(raw.score) : null,
+        total: raw.total ? Number(raw.total) : null,
+        isPromote: raw.is_promote ? Boolean(raw.is_promote) : null,
+        stock: raw.stock ? Number(raw.stock) : null,
+        distance: Number(raw.distance),
+        reason: String(raw.reason),
+        type: String(raw.type),
+    }
+}