wineater-bot 4.24.1 → 4.24.2

package/src/App.svelte.test.ts

@@ -1,13 +0,0 @@
-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/CookieConsent.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-	// Consent banner for shops with Stores.requires_cookie_consent (EU).
-	// Rendered inside the widget, not over the host page: the shop has its own
-	// site-wide banner, ours covers only what the widget itself stores/sends.
-	import Action from './ui/Action.svelte';
-	import { getTranslation } from '../services/i18n/i18n';
-	import { setConsent } from '../services/profile/consent.svelte';
-
-	let { lang }: { lang: string } = $props();
-
-	// optional link to the shop's privacy policy
-	const privacyUrl: string | undefined = window?.wineaterData?.PRIVACY_URL;
-
-	const t = (key: string) => getTranslation({ key, lang });
-</script>
-
-<div class="wr-Consent" role="region" aria-label="Cookies">
-	<p class="wr-Consent-text">
-		{t('consentText')}
-		{#if privacyUrl}
-			<a class="wr-Consent-link" href={privacyUrl} target="_blank" rel="noopener noreferrer">
-				{t('consentPrivacy')}
-			</a>
-		{/if}
-	</p>
-	<div class="wr-Consent-actions">
-		<Action variant="outlined" handleClick={() => setConsent('denied')}>
-			{t('consentDecline')}
-		</Action>
-		<Action variant="primary" handleClick={() => setConsent('granted')}>
-			{t('consentAccept')}
-		</Action>
-	</div>
-</div>
-
-<style>
-	.wr-Consent {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 16px;
-		margin: 12px 0 0;
-		padding: 12px 16px;
-		border-radius: 12px;
-		background: #f6f4f2;
-		font-size: 13px;
-		line-height: 1.4;
-		color: #333;
-	}
-	.wr-Consent-text {
-		margin: 0;
-		flex: 1;
-	}
-	.wr-Consent-link {
-		color: inherit;
-		text-decoration: underline;
-		margin-left: 4px;
-	}
-	.wr-Consent-actions {
-		display: flex;
-		gap: 8px;
-		flex-shrink: 0;
-	}
-	@media (max-width: 640px) {
-		.wr-Consent {
-			flex-direction: column;
-			align-items: stretch;
-		}
-		.wr-Consent-actions {
-			justify-content: flex-end;
-		}
-	}
-</style>

package/src/components/Footer.svelte

@@ -1,122 +0,0 @@
-<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>
-
-<footer class="wr-Footer">
-	<div class="wr-Footer-center">
-		<a href="https://wineater.com" class="wr-Footer-link" target="_blank">
-			<span class="wr-Footer-text">{getTranslation({ key: 'poweredBy', lang: appLanguage })}</span>
-			<img
-				class="wr-Footer-logo"
-				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"
-				loading="lazy"
-				decoding="async"
-			/>
-			<span class="wr-Footer-text wr-Footer-text--sommelier">
-				{getTranslation({ key: 'ai_sommelier', lang: appLanguage })}
-			</span>
-		</a>
-	</div>
-	{#if supportedLanguages.length > 1}
-		<select class="wr-Footer-dropdown" value={appLanguage} onchange={handleLanguageChange}>
-			{#each supportedLanguages as lang}
-				<option class="wr-Footer-lang" value={lang} selected={lang === appLanguage}>
-					{lang.toUpperCase()}
-				</option>
-			{/each}
-		</select>
-	{/if}
-</footer>
-
-<style>
-	.wr-Footer {
-		position: relative;
-		border-top: 2px solid #f6f7fd;
-		font-weight: 200;
-		padding: 12px 24px;
-		min-height: 40px;
-	}
-
-	.wr-Footer-center {
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%);
-		text-align: center;
-	}
-
-	.wr-Footer-dropdown {
-		position: absolute;
-		right: 0px;
-		top: 50%;
-		transform: translateY(-50%);
-		padding: 4px;
-		border-radius: 6px;
-		border: 2px solid var(--wr-brand-color);
-		background-color: white;
-		color: var(--wr-brand-color);
-		font-weight: 500;
-		font-size: 12px;
-		cursor: pointer;
-		transition: all 0.2s ease;
-	}
-
-	.wr-Footer-dropdown:hover {
-		box-shadow: 0 4px 8px rgba(123, 43, 235, 0.2);
-	}
-
-	.wr-Footer-link {
-		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;
-	}
-
-	.wr-Footer-link:hover {
-		opacity: 0.8;
-	}
-
-	.wr-Footer-logo {
-		height: 16px;
-		width: auto;
-		color: #a8a8a8;
-	}
-
-	@media screen and (max-width: 768px) {
-		.wr-Footer-text--sommelier {
-			display: none;
-		}
-	}
-</style>

package/src/components/Header.svelte

@@ -1,99 +0,0 @@
-<script lang="ts">
-	import { getTranslation } from '../services/i18n/i18n';
-	import { appStore } from '../services/store/app-store.svelte';
-	import Diamond from './icons/Diamond.svelte';
-	import Heart from './icons/Heart.svelte';
-	import Meat from './icons/Meat.svelte';
-	import Fish from './icons/Fish.svelte';
-
-	let lang = $derived(appStore.getAppLanguage());
-	let uiConfig = $derived(appStore.getUiConfig());
-	let titleText = $derived(window?.wineaterData?.TITLE_TEXT || uiConfig?.titleText || null);
-	let ShowedIcon = $state(Meat);
-
-	// splits a custom title into text/keyword segments so the meal/mood/occasion
-	// icons can be placed right next to their matching word
-	function splitTitleText(text: string) {
-		return text
-			.split(/(meal|mood|occasion)/gi)
-			.map((part) => ({ keyword: /^(meal|mood|occasion)$/i.test(part) ? part.toLowerCase() : null, text: part }));
-	}
-
-	let titleSegments = $derived(titleText ? splitTitleText(titleText) : null);
-</script>
-
-<div class="wr-Header">
-	{#if titleSegments}
-		<h1 class="wr-Header-title">
-			{#each titleSegments as segment}
-				{#if segment.keyword === 'meal'}
-					<span onmouseenter={() => (ShowedIcon = Fish)} onmouseleave={() => (ShowedIcon = Meat)}>
-						<ShowedIcon className="wr-Header-icon" size="28" />
-					</span><span class="wr-Header-label">{segment.text}</span>
-				{:else if segment.keyword === 'mood'}
-					<Heart className="wr-Header-icon" size="28" /><span class="wr-Header-label"
-						>{segment.text}</span
-					>
-				{:else if segment.keyword === 'occasion'}
-					<Diamond className="wr-Header-icon" size="28" /><span class="wr-Header-label"
-						>{segment.text}</span
-					>
-				{:else}
-					{segment.text}
-				{/if}
-			{/each}
-		</h1>
-	{:else}
-		<h1 class="wr-Header-title">
-			{getTranslation({ key: 'headerLine1', lang })}
-			<!-- <span class="wr-Header-icon wr-Header-icon--meal"></span> -->
-			<!-- TODO: show fish on hover -->
-
-			<span onmouseenter={() => (ShowedIcon = Fish)} onmouseleave={() => (ShowedIcon = Meat)}>
-				<ShowedIcon className="wr-Header-icon" size="28" />
-			</span>
-
-			<span class="wr-Header-label">{getTranslation({ key: 'headerMeal', lang })}</span>,
-			<!-- <span class="wr-Header-icon wr-Header-icon--mood"></span> -->
-			<Heart className="wr-Header-icon" size="28" />
-
-			<span class="wr-Header-label">{getTranslation({ key: 'headerMood', lang })}</span>
-			<br />
-			{getTranslation({ key: 'headerOr', lang })}
-			<!-- <span class="wr-Header-icon wr-Header-icon--occasion"></span> -->
-			<Diamond className="wr-Header-icon" size="28" />
-			<span class="wr-Header-label">{getTranslation({ key: 'headerOccasion', lang })}</span>
-			{getTranslation({ key: 'headerLine2', lang })}
-		</h1>
-	{/if}
-</div>
-
-<style>
-	.wr-Header-title {
-		font-weight: 600;
-		font-size: 24px;
-		margin: 0 auto;
-		line-height: 1.3;
-		color: #333;
-		text-align: center;
-
-		/* TODO: add wineater-color to svg */
-	}
-
-	:global(.wr-Header-icon) {
-		display: inline-block;
-		vertical-align: middle;
-		color: var(--wr-wineater-color);
-	}
-
-	.wr-Header-label {
-		color: var(--wr-wineater-color);
-		font-weight: 500;
-	}
-
-	@media screen and (max-width: 768px) {
-		.wr-Header-title {
-			display: none;
-		}
-	}
-</style>

package/src/components/Search.svelte

@@ -1,177 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { appStore } from '../services/store/app-store.svelte';
-	import { getTranslation } from '../services/i18n/i18n';
-	import Action from './ui/Action.svelte';
-
-	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 class="wr-Search" onsubmit={onSubmit}>
-	<span class="wr-Search-icon"></span>
-	<input
-		class="wr-Search-input"
-		bind:this={searchEl}
-		type="text"
-		bind:value={searchQuery}
-		onfocus={onSearchFocus}
-		onblur={onSearchBlur}
-	/>
-	<Action className="wr-Search-button" type="submit" variant="primary">
-		{getTranslation({ key: 'searchButton', lang })}
-	</Action>
-</form>
-
-<style>
-	.wr-Search {
-		position: relative;
-		margin: 12px auto;
-		padding: 0 6px;
-		display: flex;
-		align-items: center;
-		border: 2px solid #d5d9ee;
-		border-radius: 10px;
-	}
-
-	.wr-Search-icon {
-		left: 12px;
-		width: 24px;
-		height: 24px;
-		flex: 0 0 auto;
-		background-image: url("data:image/svg+xml,%3Csvg%20width=%2224%22%20height=%2225%22%20viewBox=%220%200%2024%2025%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M11%2019.3884C15.4183%2019.3884%2019%2015.8067%2019%2011.3884C19%206.97015%2015.4183%203.38843%2011%203.38843C6.58172%203.38843%203%206.97015%203%2011.3884C3%2015.8067%206.58172%2019.3884%2011%2019.3884Z%22%20stroke=%22%238250D2%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M21%2021.3884L16.7%2017.0884%22%20stroke=%22%238250D2%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
-		background-repeat: no-repeat;
-		background-size: contain;
-		z-index: 2;
-	}
-
-	.wr-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;
-	}
-
-	.wr-Search-input::placeholder {
-		color: var(--wr-wineater-color);
-		opacity: 1;
-		transition:
-			color 0.3s ease,
-			opacity 0.3s ease-in-out;
-	}
-
-	.wr-Search-input:focus {
-		border-color: var(--wr-brand-color);
-	}
-
-	.wr-Search-input:focus::placeholder {
-		opacity: 0.5;
-	}
-
-	.wr-Search-button {
-		flex: 0 0 auto;
-	}
-</style>

package/src/components/SkeletonTiles.svelte

@@ -1,94 +0,0 @@
-<!-- Placeholder cards that match the WineTile layout so the grid does not jump when real data arrives -->
-<div class="wr-Skeleton" aria-hidden="true">
-	{#each [0, 1, 2, 3] as n (n)}
-		<div class="wr-Skeleton-tile">
-			<div class="wr-Skeleton-block wr-Skeleton-image"></div>
-			<div class="wr-Skeleton-block wr-Skeleton-price"></div>
-			<div class="wr-Skeleton-block wr-Skeleton-title"></div>
-			<div class="wr-Skeleton-block wr-Skeleton-title wr-Skeleton-title--short"></div>
-			<div class="wr-Skeleton-block wr-Skeleton-button"></div>
-		</div>
-	{/each}
-</div>
-
-<style>
-	.wr-Skeleton {
-		display: grid;
-		grid-template-columns: repeat(4, 1fr);
-	}
-
-	.wr-Skeleton-tile {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 10px;
-		padding: 16px 8px;
-		border-right: 2px solid #f6f7fd;
-	}
-
-	.wr-Skeleton-tile:last-child {
-		border-right: none;
-	}
-
-	.wr-Skeleton-block {
-		border-radius: 6px;
-		background: linear-gradient(90deg, #f1f2f8 25%, #f8f9fc 50%, #f1f2f8 75%);
-		background-size: 200% 100%;
-		animation: wr-shimmer 1.2s linear infinite;
-	}
-
-	.wr-Skeleton-image {
-		width: 60%;
-		height: 200px;
-		margin-bottom: 6px;
-	}
-
-	.wr-Skeleton-price {
-		width: 40px;
-		height: 16px;
-	}
-
-	.wr-Skeleton-title {
-		width: 80%;
-		height: 14px;
-	}
-
-	.wr-Skeleton-title--short {
-		width: 55%;
-	}
-
-	.wr-Skeleton-button {
-		width: 96px;
-		height: 36px;
-		margin-top: 14px;
-		border-radius: 10px;
-	}
-
-	@keyframes wr-shimmer {
-		from {
-			background-position: 200% 0;
-		}
-		to {
-			background-position: -200% 0;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.wr-Skeleton-block {
-			animation: none;
-		}
-	}
-
-	@media screen and (max-width: 768px) {
-		.wr-Skeleton {
-			display: flex;
-			gap: 8px;
-			overflow: hidden;
-			padding: 8px 0;
-		}
-
-		.wr-Skeleton-tile {
-			flex: 0 0 240px;
-		}
-	}
-</style>

package/src/components/WineBottle.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-	import { BOTTLES, BUBBLES, SHAPES, bottleKind } from '../services/bottle/bottle';
-
-	let { type }: { type?: string | null } = $props();
-
-	const kind = $derived(bottleKind(type));
-	const k = $derived(BOTTLES[kind]);
-	const sh = $derived(SHAPES[k.shoulder]);
-	const gid = `wr-bottle-${Math.random().toString(36).slice(2, 8)}`;
-</script>
-
-<svg class="wr-WineBottle" viewBox="0 0 44 130" aria-hidden="true" focusable="false">
-	<defs>
-		<linearGradient id={gid} x1="0" x2="1" y1="0" y2="0">
-			<stop offset="0" stop-color={k.glass} stop-opacity="0.78" />
-			<stop offset="0.45" stop-color={k.glass} />
-			<stop offset="1" stop-color={k.glass} stop-opacity="0.88" />
-		</linearGradient>
-	</defs>
-	<path d={sh.body} fill="url(#{gid})" />
-	{#if kind === 'sparkling'}
-		<path d="M16.5 10h11l1.5 26h-14z" fill={k.foil} />
-		<rect x="14" y="2" width="16" height="9" rx="3.5" fill={k.foil} />
-		<rect x="14" y="8" width="16" height="2.4" fill="#000" opacity="0.12" />
-		<path
-			d="M16 15h12M15.6 20h12.8M15.2 25h13.6M14.8 30h14.4M22 11v21"
-			stroke="#8a6d12"
-			stroke-opacity="0.55"
-			stroke-width="0.9"
-			fill="none"
-		/>
-		<circle cx="22" cy="33" r="1.6" fill="none" stroke="#8a6d12" stroke-opacity="0.55" stroke-width="0.9" />
-		<g fill="#fff" opacity="0.4">
-			{#each BUBBLES as [cx, cy, r] (`${cx}-${cy}`)}
-				<circle {cx} {cy} {r} />
-			{/each}
-		</g>
-	{:else}
-		<rect x={sh.cap.x} y={sh.cap.y} width={sh.cap.w} height={sh.cap.h} rx="2.5" fill={k.foil} />
-		<rect x={sh.cap.x} y={sh.cap.y + sh.cap.h - 3} width={sh.cap.w} height="2.5" fill="#000" opacity="0.12" />
-	{/if}
-	<rect x={sh.label.x} y={sh.label.y} width={sh.label.w} height={sh.label.h} rx="2.5" fill="#fffdf8" opacity="0.94" />
-	<rect x={sh.label.x + sh.label.w * 0.2} y={sh.label.y + 8} width={sh.label.w * 0.6} height="2.4" rx="1.2" fill={k.accent} />
-	<rect x={sh.label.x + sh.label.w * 0.3} y={sh.label.y + 14} width={sh.label.w * 0.4} height="1.8" rx="0.9" fill={k.accent} opacity="0.5" />
-	<rect x={sh.label.x + sh.label.w * 0.3} y={sh.label.y + 19} width={sh.label.w * 0.4} height="1.8" rx="0.9" fill={k.accent} opacity="0.5" />
-	<path d={sh.shine} stroke="#fff" stroke-opacity="0.22" stroke-width="2.2" stroke-linecap="round" fill="none" />
-</svg>
-
-<style>
-	.wr-WineBottle {
-		display: block;
-		height: 100%;
-		width: auto;
-		margin: 0 auto;
-	}
-</style>