wineater-bot 3.9.4 → 4.0.0-beta.3

package/src/App.svelte.test.ts

@@ -0,0 +1,13 @@
+import { page } from '@vitest/browser/context';
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-svelte';
+import App from './App.svelte';
+
+describe('App.svelte', () => {
+	it('should render h1', async () => {
+		render(App);
+
+		const heading = page.getByRole('heading', { level: 1 });
+		await expect.element(heading).toBeInTheDocument();
+	});
+});

package/src/components/Footer.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { trackWidgetEvent } from '../services/analytics/analytics';
+	import { WIDGET_EVENTS } from '../services/analytics/constants';
+	import { appStore } from '../services/store/app-store.svelte';
+	import { getTranslation } from '../services/i18n/i18n';
+
+	type Props = {
+		countryCode?: string | null;
+	};
+
+	let { countryCode = null }: Props = $props();
+
+	let appLanguage = $derived(appStore.getAppLanguage());
+	let supportedLanguages = $derived(appStore.getSupportedLanguages());
+	let storeId = $derived(appStore.getStoreId());
+
+	function handleLanguageChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		const selectedLang = target.value;
+
+		trackWidgetEvent(WIDGET_EVENTS.LANGUAGE_CHANGED, storeId, {
+			from_language: appLanguage,
+			to_language: selectedLang
+		});
+
+		appStore.setStoreLanguage(selectedLang);
+	}
+</script>
+
+<div id="powered-by-widget">
+	<div class="powered-by-center">
+		<a href="https://wineater.com" target="_blank">
+			<span>{getTranslation({ key: 'poweredBy', lang: appLanguage })}</span>
+			<img
+				src={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"
+				>{getTranslation({ key: 'ai_sommelier', lang: appLanguage })}</span
+			>
+		</a>
+	</div>
+	<div class="powered-by-lang">
+		{#if supportedLanguages.length > 1}
+			<select
+				id="language-dropdown"
+				class="language-dropdown"
+				value={appLanguage}
+				onchange={handleLanguageChange}
+			>
+				{#each supportedLanguages as lang}
+					<option value={lang} selected={lang === appLanguage}>
+						{lang.toUpperCase()}
+					</option>
+				{/each}
+			</select>
+		{/if}
+	</div>
+</div>
+
+<style>
+	#powered-by-widget {
+		position: relative;
+		border-top: 2px solid #f6f7fd;
+		font-family: 'Bricolage Grotesque', sans-serif;
+		font-weight: 200;
+		padding: 12px 24px;
+		min-height: 40px;
+	}
+
+	#powered-by-widget .powered-by-center {
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		text-align: center;
+	}
+
+	#powered-by-widget .powered-by-lang {
+		position: absolute;
+		right: 0px;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.language-dropdown {
+		padding: 4px;
+		border-radius: 6px;
+		border: 2px solid var(--wineater-color);
+		background-color: white;
+		color: var(--wineater-color);
+		font-weight: 500;
+		font-family: 'Bricolage Grotesque', sans-serif;
+		font-size: 12px;
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.language-dropdown:hover {
+		box-shadow: 0 4px 8px rgba(123, 43, 235, 0.2);
+	}
+
+	#powered-by-widget a {
+		text-decoration: none;
+		display: flex;
+		align-items: center;
+		white-space: nowrap;
+		gap: 8px;
+		color: #a8a8a8;
+		font-size: 12px;
+		line-height: 16px;
+		transition: opacity 0.2s ease;
+	}
+
+	#powered-by-widget a:hover {
+		opacity: 0.8;
+	}
+
+	#powered-by-widget img {
+		height: 16px;
+		width: auto;
+		color: #a8a8a8;
+	}
+
+	@media screen and (max-width: 768px) {
+		.powered-by-sommelier {
+			display: none;
+		}
+	}
+</style>

package/src/components/Header.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { getTranslation } from '../services/i18n/i18n';
+	import { appStore } from '../services/store/app-store.svelte';
+
+	let lang = $derived(appStore.getAppLanguage());
+	const titleText = window?.wineaterData?.TITLE_TEXT || null;
+</script>
+
+<div id="wine-widget-header">
+	{#if titleText}
+		<h1 class="wine-widget-big-title">{titleText}</h1>
+	{:else}
+		<!-- TODO: translation is not working -->
+		<h1 class="wine-widget-big-title">
+			{getTranslation({ key: 'headerLine1', lang })}
+			<span class="icon icon-meal"></span>
+			<span class="icon-label">{getTranslation({ key: 'headerMeal', lang })}</span>,
+			<span class="icon icon-mood"></span>
+			<span class="icon-label">{getTranslation({ key: 'headerMood', lang })}</span>
+			<br />
+			{getTranslation({ key: 'headerOr', lang })}
+			<span class="icon icon-occasion"></span>
+			<span class="icon-label">{getTranslation({ key: 'headerOccasion', lang })}</span>
+			{getTranslation({ key: 'headerLine2', lang })}
+		</h1>
+	{/if}
+</div>
+
+<style>
+	#wine-widget-header h1 {
+		font-family: 'Bricolage Grotesque', serif;
+		font-weight: 600;
+		font-size: 24px;
+		margin: 0 auto;
+		line-height: 1.3;
+		color: #333;
+		text-align: center;
+	}
+
+	#wine-widget-header p {
+		font-size: 16px;
+		color: #666;
+		margin-top: 8px;
+		text-align: center;
+		padding: 0 15%;
+	}
+
+	.icon {
+		display: inline-block;
+		width: 1.2em;
+		height: 1.2em;
+		vertical-align: middle;
+		margin: 0 4px 0 2px;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+
+	.icon-meal {
+		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//meal1.svg');
+	}
+
+	.icon-meal:hover {
+		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//meal3.svg');
+	}
+
+	.icon-mood {
+		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//mood.svg');
+	}
+
+	.icon-budget {
+		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//budget.svg');
+	}
+
+	.icon-occasion {
+		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//ocasion.svg');
+	}
+
+	.icon-label {
+		color: var(--wineater-color);
+		font-weight: 500;
+	}
+
+	@media screen and (max-width: 768px) {
+		#wine-widget-header h1 {
+			display: none;
+		}
+
+		#wine-widget-header p {
+			display: none;
+		}
+	}
+</style>

package/src/components/Loader.svelte

@@ -0,0 +1,62 @@
+<div id="loading-indicator">
+	<div id="typing-indicator" class="typing-indicator">
+		<span></span>
+		<span></span>
+		<span></span>
+	</div>
+</div>
+
+<style>
+	#loading-indicator {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 10000;
+		text-align: center;
+	}
+
+	.typing-indicator {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 40px;
+		visibility: visible;
+		background-color: white;
+	}
+
+	.typing-indicator span {
+		display: block;
+		width: 8px;
+		height: 8px;
+		margin: 0 3px;
+		border-radius: 50%;
+		background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
+		opacity: 0.7;
+		animation: typing 1s infinite;
+	}
+
+	@keyframes typing {
+		0%,
+		100% {
+			transform: translateY(0);
+			opacity: 0.7;
+		}
+		50% {
+			transform: translateY(-8px);
+			opacity: 1;
+		}
+	}
+
+	.typing-indicator span:nth-child(1) {
+		animation-delay: 0s;
+	}
+
+	.typing-indicator span:nth-child(2) {
+		animation-delay: 0.15s;
+	}
+
+	.typing-indicator span:nth-child(3) {
+		animation-delay: 0.3s;
+	}
+</style>

package/src/components/Search.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { appStore } from '../services/store/app-store.svelte';
+	import { getTranslation } from '../services/i18n/i18n';
+
+	interface Props {
+		searchQuery: string;
+		onSubmit: (event: SubmitEvent) => void;
+		initialized: boolean;
+	}
+
+	let { searchQuery = $bindable(), onSubmit, initialized }: Props = $props();
+	let searchEl: HTMLInputElement;
+	let isInputFocused = $state(false);
+	let animIndex = $state(0);
+	let animChar = $state(0);
+	let animForward = $state(true);
+	let animRunning = $state(false);
+	let lang = $derived(appStore.getAppLanguage());
+	let animationToken = 0;
+
+	export function getSearchElement() {
+		return searchEl;
+	}
+
+	function initializeSearchAnimation() {
+		const localToken = ++animationToken;
+		const suggestions = getTranslation({ key: 'placeholderSuggestions', lang });
+		if (!searchEl || !suggestions.length) return;
+		animRunning = true;
+		const loop = () => {
+			// abort if a new animation has started or conditions changed
+			if (localToken !== animationToken) return;
+			if (!searchEl || !animRunning || isInputFocused || searchQuery.length) return;
+			const current = suggestions[animIndex];
+			if (animForward) {
+				searchEl.placeholder = current.substring(0, animChar++);
+				if (animChar > current.length) {
+					animForward = false;
+					setTimeout(loop, 1600);
+					return;
+				}
+				setTimeout(loop, 90);
+			} else {
+				searchEl.placeholder = current.substring(0, animChar--);
+				if (animChar < 0) {
+					animForward = true;
+					animIndex = (animIndex + 1) % suggestions.length;
+					setTimeout(loop, 450);
+					return;
+				}
+				setTimeout(loop, 45);
+			}
+		};
+		loop();
+	}
+
+	function stopSearchAnimation() {
+		animRunning = false;
+	}
+
+	function onSearchFocus() {
+		isInputFocused = true;
+		stopSearchAnimation();
+		if (searchEl) searchEl.placeholder = '';
+	}
+
+	function onSearchBlur() {
+		isInputFocused = false;
+		animChar = 0;
+		animForward = true;
+		animRunning = false;
+	}
+
+	$effect(() => {
+		// update placeholder whenever lang or searchEl change
+		if (!searchEl) return;
+		if (searchQuery.length > 0) return;
+		// cancel any running animation on language change
+		animationToken++;
+		animRunning = false;
+		animIndex = 0;
+		animChar = 0;
+		animForward = true;
+		const suggestions = getTranslation({ key: 'placeholderSuggestions', lang });
+		if (suggestions && suggestions.length) {
+			searchEl.placeholder = suggestions[0];
+		} else {
+			searchEl.placeholder = getTranslation({ key: 'searchPlaceholder', lang });
+		}
+	});
+
+	$effect(() => {
+		// control typing animation separately with latest lang
+		if (searchEl && initialized && !isInputFocused && !searchQuery.length && !animRunning) {
+			initializeSearchAnimation();
+		}
+		if (searchQuery.length > 0 && animRunning) {
+			animRunning = false;
+			animationToken++;
+		}
+	});
+
+	onMount(() => {
+		// effects handle initial placeholder and animation
+	});
+</script>
+
+<form id="wine-widget-search" onsubmit={onSubmit}>
+	<span class="search-icon"></span>
+	<input
+		id="wine-search-input"
+		bind:this={searchEl}
+		type="text"
+		bind:value={searchQuery}
+		onfocus={onSearchFocus}
+		onblur={onSearchBlur}
+	/>
+	<button id="wine-search-button" type="submit">
+		{getTranslation({ key: 'searchButton', lang })}
+	</button>
+</form>
+
+<style>
+	#wine-widget-search {
+		position: relative;
+		margin: 12px auto;
+		padding: 0 6px;
+		display: flex;
+		align-items: center;
+		border: 2px solid #d5d9ee;
+		border-radius: 10px;
+	}
+
+	.search-icon {
+		left: 12px;
+		width: 24px;
+		height: 24px;
+		flex: 0 0 auto;
+		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//search.svg?x=1');
+		background-repeat: no-repeat;
+		background-size: contain;
+		z-index: 2;
+	}
+
+	#wine-search-input {
+		flex: 1 1 0%;
+		min-width: 0;
+		padding: 12px;
+		font-size: 16px;
+		border: none;
+		border-radius: 10px;
+		outline: none;
+		transition: border 0.2s ease;
+	}
+
+	#wine-search-input::placeholder {
+		color: var(--wineater-color);
+		opacity: 1;
+		transition:
+			color 0.3s ease,
+			opacity 0.3s ease-in-out;
+	}
+
+	#wine-search-input:focus {
+		border-color: var(--wineater-color);
+	}
+
+	#wine-search-input:focus::placeholder {
+		opacity: 0.5;
+	}
+
+	#wine-search-button {
+		flex: 0 0 auto;
+		background-color: var(--wineater-color);
+		color: #fff;
+		border: none;
+		border-radius: 6px;
+		padding: 8px 16px;
+		font-size: 16px;
+		cursor: pointer;
+		transition: opacity 0.2s ease;
+	}
+
+	#wine-search-button:hover {
+		opacity: 0.8;
+	}
+</style>

package/src/components/WinePopup.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	let {
+		title,
+		shortDescription,
+		reason,
+		pairing,
+		tags,
+		onClose,
+		isMobile
+	}: {
+		title: string;
+		shortDescription?: string;
+		reason?: string;
+		pairing?: string;
+		tags?: string[];
+		onClose: () => void;
+		isMobile?: boolean;
+	} = $props();
+
+	const mobile = !!isMobile;
+</script>
+
+{#if mobile}
+	<div class="mobile-fullscreen-wrapper">
+		<div class="mobile-fullscreen-overlay" onclick={onClose}></div>
+		<div class="mobile-fullscreen-popup">
+			<div class="card-popup">
+				<div class="card-popup-header">
+					<h2>{title}</h2>
+					<button class="card-popup-close" onclick={onClose}>&times;</button>
+				</div>
+
+				{#if shortDescription}
+					<p class="popup-short-desc">{shortDescription}</p>
+				{/if}
+
+				{#if reason}
+					<div class="popup-reason">{reason}</div>
+				{:else if pairing}
+					<p class="popup-pairing">{pairing}</p>
+				{/if}
+
+				{#if tags && tags.length}
+					<div class="popup-tags">
+						{#each tags as tag}
+							<span class="popup-tag">{tag}</span>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="card-popup">
+		<div class="card-popup-header">
+			<h2>{title}</h2>
+			<button class="card-popup-close" onclick={onClose}>&times;</button>
+		</div>
+
+		{#if shortDescription}
+			<p class="popup-short-desc">{shortDescription}</p>
+		{/if}
+
+		{#if reason}
+			<div class="popup-reason">{reason}</div>
+		{:else if pairing}
+			<p class="popup-pairing">{pairing}</p>
+		{/if}
+
+		{#if tags && tags.length}
+			<div class="popup-tags">
+				{#each tags as tag}
+					<span class="popup-tag">{tag}</span>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.card-popup {
+		position: absolute;
+		width: 100%;
+		background-color: white;
+		padding: 16px;
+		border-radius: 16px;
+		box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
+		text-align: left;
+		font-size: 14px;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.card-popup p {
+		margin: 5px 0;
+	}
+
+	.card-popup-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		gap: 12px;
+	}
+
+	.card-popup-header h2 {
+		font-size: 16px;
+		font-weight: 600;
+		margin: 0;
+		flex: 1;
+		line-height: 1.3;
+	}
+
+	.card-popup-close {
+		font-size: 20px;
+		font-weight: bold;
+		cursor: pointer;
+		color: #999;
+		border: none;
+		background: transparent;
+		line-height: 1;
+	}
+
+	.card-popup-close:hover {
+		color: #000;
+	}
+
+	.popup-short-desc {
+		margin-top: 8px;
+	}
+
+	.popup-reason {
+		font-size: 14px;
+		font-weight: 400;
+		color: #333;
+		margin-top: 8px;
+	}
+
+	.popup-pairing {
+		margin-top: 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;
+	}
+
+	.mobile-fullscreen-wrapper {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 10000;
+	}
+
+	.mobile-fullscreen-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.mobile-fullscreen-popup {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		max-width: 90%;
+		max-height: 80%;
+		overflow-y: auto;
+		background: transparent;
+	}
+</style>