wineater-bot 4.24.1 → 4.24.3

package/src/App.svelte

@@ -1,784 +0,0 @@
-<script lang="ts">
-	import { setCookie, trackWidgetEvent } from './services/analytics/analytics';
-	import type { RecommendedWine, Wine, WineId } from './services/api/api';
-	import { wineaterApi, apiVersion, cacheScope } from './services/api/api';
-	import { readCache, writeCache } from './services/cache';
-	import { onMount } from 'svelte';
-	import { WIDGET_EVENTS } from './services/analytics/constants';
-	import { trackFeedback } from './services/profile/events';
-	import { newQueryId } from './services/profile/uid';
-	import Header from './components/Header.svelte';
-	import Footer from './components/Footer.svelte';
-	import Search from './components/Search.svelte';
-	import SkeletonTiles from './components/SkeletonTiles.svelte';
-	import WineTile from './components/WineTile.svelte';
-	import Action from './components/ui/Action.svelte';
-	import CookieConsent from './components/CookieConsent.svelte';
-	import { shouldAskConsent } from './services/profile/consent.svelte';
-	import { appStore } from './services/store/app-store.svelte';
-	import { getTranslation, translateTexts } from './services/i18n/i18n';
-	import { generateInlineStyle, preconnectFontHosts } from './services/ui-config/utils';
-	import {
-		QuotaExceededError,
-		shopifyContext,
-		storefrontSessionId,
-		variantIdOf
-	} from './services/shopify/shopify';
-	import { addToCart } from './services/shopify/cart';
-
-	// Shopify storefront (app embed): add to cart instead of a link out, no Wineater link,
-	// no cookies of our own, no web fonts; the shop's searches are limited by its plan.
-	const shopify = shopifyContext();
-
-	function initCookies() {
-		// chatbotToken — токен магазина, не данные посетителя. uniqueUserID
-		// больше не ставится при загрузке: его создаёт trackWidgetEvent, и только
-		// когда трекинг разрешён (consent.svelte.ts).
-		setCookie('chatbotToken', window.wineaterData?.CLIENT_TOKEN || DEMO_TOKEN, 365);
-	}
-
-	const DEMO_TOKEN = 'HeUw6IXuhvz6tRuXdPEGEbj3SGQ3Q2YtEc1Z8jd41Kg9LtyPb4Epu0to31SYIadG';
-	if (!shopify) {
-		initCookies();
-		preconnectFontHosts();
-	}
-
-	const INSTANT_CACHE_MAX_AGE_MS = 6 * 60 * 60 * 1000;
-	// A personal start grid follows the taste profile, which changes with every
-	// click — keep it for 1 h only; the general grid stays cached for 6 h.
-	const PERSONAL_INSTANT_CACHE_MAX_AGE_MS = 60 * 60 * 1000;
-	// The cache key carries the profile version from the last response
-	// (X-Wineater-Profile), remembered separately: a new profile → new key.
-	const instantProfileKey = `${cacheScope}:instant-profile`;
-	const instantCacheKey = (profileHash: string | null) =>
-		`${cacheScope}:instant${profileHash ? `:${profileHash}` : ''}`;
-
-	const widgetType = window?.wineaterData?.WIDGET_TYPE || 'store';
-	const countryCode = window?.wineaterData?.COUNTRY_CODE || null;
-	const widgetWrapper = window?.wineaterData?.WIDGET_WRAPPER || 'wineater-widget-conteiner';
-
-	let initialized = $state(false);
-	let configFailed = $state(false);
-	// Set once the user searches/clicks, so a late instant response never overwrites their results
-	let userActed = false;
-	let isLoading = $state(false);
-	let isLoadingMore = $state(false);
-	let results = $state<RecommendedWine[] | Wine[]>([]);
-	let selectedWineId = $state<WineId>(null);
-	let searchQuery = $state('');
-	let errorMessage = $state(null);
-	let isAnimating = $state(false);
-	let hoveredWineId = $state(null);
-	let translatedPopups = $state([]);
-	// Последний реально выполненный поиск (с добавленным ';') — searchQuery
-	// может измениться в поле ввода до следующего сабмита, а "ещё вариантов"
-	// должен повторять именно тот запрос, что дал текущие results.
-	let lastSearchedQuery = $state('');
-	let hasMore = $state(false);
-	// Всё, что уже показывали по текущему запросу — «Try again» заменяет выдачу,
-	// и без накопления повторный клик вернул бы те же вина.
-	let seenIds = $state<string[]>([]);
-	// Один id на поиск: уходит в тело search/v2 и в каждое событие обратной
-	// связи (shown/click/...), чтобы бэкенд связал клики с конкретной выдачей.
-	let currentQueryId: string | null = null;
-	// Shopify: wines put into the cart from this widget (the button shows "Added")
-	let addedIds = $state<string[]>([]);
-	// Shopify: the shop used up its monthly searches — instant picks + a soft line instead of an error
-	let sommelierResting = $state(false);
-
-	// Профиль вкуса: что показали и в каком порядке. Пустая выдача не событие.
-	function feedbackShown(wines: (Wine | RecommendedWine)[], text: string) {
-		if (!wines?.length) return;
-		trackFeedback({
-			type: 'shown',
-			query_id: currentQueryId ?? undefined,
-			sku_ids: wines.map((w) => w.id),
-			text: text || undefined
-		});
-	}
-	let appLanguage = $derived(appStore.getAppLanguage());
-	let storeLanguage = $derived(appStore.getStoreLanguage());
-	let apiKey = $derived(appStore.getApiKey());
-	let storeId = $derived(appStore.getStoreId());
-	let isStoreInitialized = $derived(appStore.isInitialized());
-	let uiConfig = $derived(appStore.getUiConfig());
-	let searchAvailable = $derived(appStore.isSearchAvailable());
-
-	function setSearchError() {
-		errorMessage = getTranslation({ key: 'errorMessage', lang: appLanguage });
-	}
-
-	const clearError = () => (errorMessage = null);
-
-	// Returns an array of translated fields for each wine
-	async function translatePopupContent(wines: RecommendedWine[] | Wine[]) {
-		if (appLanguage === storeLanguage || widgetType !== 'bar') {
-			return wines.map(() => ({}));
-		}
-
-		const possibleFields = ['shortDescription', 'reason', 'pairingRecommendation', 'tags'];
-		const firstWine = wines[0];
-		if (!firstWine) return wines.map(() => ({}));
-		const fieldsToTranslate = possibleFields.filter((field) => field in firstWine);
-		const batchSize = 4;
-		const translatedResults = [];
-
-		for (let i = 0; i < wines.length; i += batchSize) {
-			const batch = wines.slice(i, i + batchSize);
-			const translationPromises = batch.map(async (wine: Wine | RecommendedWine) => {
-				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 translated = await translateTexts({
-					sourceLang: storeLanguage,
-					targetLang: appLanguage,
-					texts: Object.fromEntries(entries.map((entry) => [entry.key, entry.text])),
-					apiKey: apiKey
-				});
-				return translated;
-			});
-			const batchTranslations = await Promise.all(translationPromises);
-			translatedResults.push(...batchTranslations);
-		}
-		return translatedResults;
-	}
-
-	// Stale-while-revalidate: cached wines are painted immediately and the fresh
-	// response only refreshes the cache for the next visit, so the grid the
-	// visitor is already looking at never swaps under their cursor.
-	async function loadInstantRecommendations(configReady: Promise<void>) {
-		const lastProfile = readCache<string>(instantProfileKey, 30 * 24 * 60 * 60 * 1000);
-		const cached = readCache<Wine[]>(
-			instantCacheKey(lastProfile),
-			lastProfile ? PERSONAL_INSTANT_CACHE_MAX_AGE_MS : INSTANT_CACHE_MAX_AGE_MS
-		);
-		const hasCached = !!cached?.length;
-		if (hasCached) {
-			results = cached;
-		} else {
-			isLoading = true;
-		}
-		try {
-			const { wines: fresh, profileHash } = await wineaterApi.getInstantRecommendations();
-			if (fresh.length > 0) {
-				writeCache(instantCacheKey(profileHash), fresh);
-				writeCache(instantProfileKey, profileHash);
-			}
-			if (!hasCached && !userActed) results = fresh;
-		} catch (error) {
-			console.error('[wineater] instant recommendations error:', error);
-			if (!hasCached && !userActed) {
-				// the message is translated, which needs the store language
-				await configReady;
-				setSearchError();
-			}
-		} finally {
-			if (!userActed) isLoading = false;
-		}
-	}
-
-	// Shopify: searches used up — show the start picks again with a soft line, never an error
-	async function showRestingPicks() {
-		sommelierResting = true;
-		appStore.setSearchAvailable(false);
-		try {
-			const { wines } = await wineaterApi.getInstantRecommendations();
-			results = wines;
-			translatedPopups = [];
-			hasMore = false;
-		} catch (error) {
-			console.error('[wineater] instant recommendations error:', error);
-			results = [];
-		}
-	}
-
-	// Простая функция-анимация: поднимаем карточки и ждём
-	function animateClearAll(duration = 220): Promise<void> {
-		if (!results || results.length === 0) return Promise.resolve();
-		isAnimating = true;
-		return new Promise((resolve) => {
-			setTimeout(() => {
-				resolve();
-			}, duration);
-		});
-	}
-
-	async function handleSearch(event) {
-		event.preventDefault();
-		userActed = true;
-
-		let query = '';
-		// id этого поиска: ответы и finally более старого поиска не трогают новый
-		let myQueryId: string | undefined;
-		try {
-			isLoading = true;
-			clearError();
-
-			query = searchQuery.trim() + ';';
-			lastSearchedQuery = query;
-			currentQueryId = newQueryId();
-			myQueryId = currentQueryId;
-			try {
-				trackWidgetEvent(WIDGET_EVENTS.SEARCH_PERFORMED, storeId, { query });
-			} catch (error) {
-				console.error('Error tracking search event:', error);
-			}
-
-			// Запрос уходит сразу, карточки уезжают вверх, пока он в полёте.
-			// v2 идёт потоком: 4 вина приходят, как только их выбрал реранкер,
-			// причины («почему») — следом, в том же ответе. Они видны только в
-			// попапе, поэтому плитки показываем, не дожидаясь их.
-			let animationDone = false;
-			let shown = false;
-			let pendingEarly: RecommendedWine[] | null = null;
-
-			const showResults = (searchResults: RecommendedWine[]) => {
-				if (!searchResults || searchResults.length === 0) {
-					results = [];
-					translatedPopups = [];
-					errorMessage = getTranslation({ key: 'noResultsMessage', lang: appLanguage });
-					trackWidgetEvent(WIDGET_EVENTS.NO_RESULTS_FOUND, storeId, { query });
-					return;
-				}
-				results = searchResults;
-				isLoading = false;
-				if (shown) return;
-				shown = true;
-				// Пагинация доступна только для search/v2 — у instant/legacy-путей нет
-				// "more"-эндпоинта. Неполная выдача (< 4) означает, что кандидаты и так
-				// кончились: кнопка в этом случае только мигнула бы впустую.
-				// в Shopify нет "more": каждый запрос считается в лимит плана
-				hasMore = apiVersion === '2' && !shopify && searchResults.length >= 4;
-				feedbackShown(searchResults, query);
-				trackWidgetEvent(WIDGET_EVENTS.SEARCH_RESULTS_DISPLAYED, storeId, {
-					results_count: searchResults.length,
-					results: searchResults,
-					query
-				});
-			};
-
-			const onWines = (early: RecommendedWine[]) => {
-				if (myQueryId !== currentQueryId) return; // устаревший поиск
-				if (!animationDone) pendingEarly = early;
-				else showResults(early);
-			};
-
-			const request = wineaterApi.searchStream(query, currentQueryId, onWines);
-			// Пустой catch нужен, чтобы отказ запроса во время анимации не стал
-			// unhandled rejection: ошибку обработает await ниже.
-			request.catch(() => {});
-
-			// шаг 1: плавно поднять карточки
-			await animateClearAll(220);
-
-			// шаг 2: очистить список и сбросить флаг
-			results = [];
-			isAnimating = false;
-			hasMore = false;
-			seenIds = [];
-			animationDone = true;
-			if (pendingEarly) showResults(pendingEarly);
-
-			const finalResults = await request;
-			if (myQueryId !== currentQueryId) return;
-
-			// Тот же состав — дописываем причины в уже показанные плитки, не
-			// перерисовывая сетку под курсором; иначе (fallback, редкие расхождения) — заменяем.
-			const sameWines =
-				shown &&
-				finalResults.length === results.length &&
-				finalResults.every((w, i) => w.id === results[i]?.id);
-			if (sameWines) {
-				const byId = new Map(finalResults.map((w) => [w.id, w]));
-				results = results.map((w) => ({ ...w, reason: byId.get(w.id)?.reason ?? w.reason }));
-			} else {
-				showResults(finalResults);
-			}
-		} catch (error) {
-			if (myQueryId !== currentQueryId) return;
-			if (error instanceof QuotaExceededError) {
-				await showRestingPicks();
-				return;
-			}
-			results = [];
-			console.error('[wineater] search error:', error);
-			trackWidgetEvent(WIDGET_EVENTS.ERROR_OCCURRED, storeId, {
-				error_message: error?.message,
-				query
-			});
-			setSearchError();
-		} finally {
-			if (myQueryId === currentQueryId) isLoading = false;
-		}
-	}
-
-	async function handleShowMore() {
-		if (isLoadingMore || !hasMore) return;
-		userActed = true;
-		// Выдача заменяется целиком, поэтому держим предыдущую под рукой: если
-		// новых вин не нашлось или запрос упал, покупатель не должен остаться
-		// перед пустой сеткой.
-		const previousResults = results;
-		try {
-			isLoadingMore = true;
-			isLoading = true;
-
-			// Карточки заменяются, а не дописываются, поэтому исключать надо всё
-			// показанное за сессию — иначе следующий клик вернёт те же вина.
-			seenIds = [...new Set([...seenIds, ...results.map((w) => w.id)])];
-
-			// Тот же жест, что и при поиске: запрос уходит сразу, карточки уезжают
-			// вверх, дальше скелетон
-			const request = wineaterApi.getMoreWineRecommendations(lastSearchedQuery, seenIds);
-			request.catch(() => {});
-			await animateClearAll(220);
-			results = [];
-			isAnimating = false;
-
-			const { recommendations, hasMore: more } = await request;
-			trackFeedback({
-				type: 'more',
-				query_id: currentQueryId ?? undefined,
-				text: lastSearchedQuery || undefined
-			});
-			feedbackShown(recommendations, lastSearchedQuery);
-			trackWidgetEvent(WIDGET_EVENTS.SHOW_MORE_CLICKED, storeId, {
-				query: lastSearchedQuery,
-				results_count: recommendations.length
-			});
-			results = recommendations.length > 0 ? recommendations : previousResults;
-			hasMore = more;
-		} catch (error) {
-			console.error('[wineater] try again error:', error);
-			results = previousResults;
-			hasMore = false;
-		} finally {
-			isLoadingMore = false;
-			isLoading = false;
-		}
-	}
-
-	async function handleSimilarClick(wine: Wine | RecommendedWine) {
-		userActed = true;
-		try {
-			isLoading = true;
-			clearError();
-			trackWidgetEvent(WIDGET_EVENTS.SIMILAR_WINES_CLICKED, storeId, {
-				wine_id: wine.id,
-				wine_title: wine.title
-			});
-			trackFeedback({ type: 'similar', query_id: currentQueryId ?? undefined, sku_ids: [wine.id] });
-			// «Похожие» — новая выдача без текста запроса: свой id, чтобы shown не
-			// приписались к предыдущему поиску.
-			currentQueryId = newQueryId();
-
-			const request = wineaterApi.getSimilarWines(wine.id);
-			request.catch(() => {});
-			await animateClearAll(220);
-			results = [];
-			isAnimating = false;
-			hasMore = false;
-			selectedWineId = null;
-
-			const similarWines = await request;
-			searchQuery = wine.title;
-			lastSearchedQuery = '';
-
-			if (!similarWines || similarWines.length === 0) {
-				results = [];
-				translatedPopups = [];
-				errorMessage = getTranslation({ key: 'noResultsMessage', lang: appLanguage });
-			} else {
-				results = similarWines;
-				feedbackShown(similarWines, '');
-			}
-		} catch (error) {
-			results = [];
-			console.error('[wineater] similar wines error:', error);
-			setSearchError();
-		} finally {
-			isLoading = false;
-		}
-	}
-
-	$effect(async () => {
-		// whenever results change, recompute translatedPopups asynchronously
-		if (!results || results.length === 0) {
-			translatedPopups = [];
-			return;
-		}
-		// run translation in background; ignore errors but keep latest mapping
-		try {
-			const translated = await translatePopupContent(results);
-			// guard against results having changed again while we awaited
-			if (results && results.length > 0) {
-				translatedPopups = translated;
-			}
-		} catch (e) {
-			console.error('translatePopupContent failed', e);
-		}
-	});
-
-	function handleBuyBtnClick(wine: Wine | RecommendedWine, index: number) {
-		// Close all other popups
-		if (selectedWineId && selectedWineId !== wine.id) {
-			selectedWineId = null;
-		}
-
-		selectedWineId = wine.id;
-
-		trackFeedback({ type: 'click', query_id: currentQueryId ?? undefined, sku_ids: [wine.id], position: index });
-		trackWidgetEvent(WIDGET_EVENTS.WINE_DETAILS_VIEWED, storeId, {
-			wine_id: wine.id,
-			wine_title: wine.title,
-			is_mobile: window.innerWidth <= 768
-		});
-	}
-
-	function handleBuyLinkClick(wine: Wine | RecommendedWine, index: number) {
-		// Переход на страницу товара — самый сильный сигнал, который виджет видит
-		// (корзины внутри виджета нет). keepalive-батч доедет и после ухода со страницы.
-		trackFeedback({ type: 'buy_click', query_id: currentQueryId ?? undefined, sku_ids: [wine.id], position: index });
-		trackWidgetEvent(WIDGET_EVENTS.BUY_BUTTON_CLICKED, storeId, {
-			wine_id: wine.id,
-			wine_title: wine.title,
-			wine_url: wine.url,
-			is_mobile: window.innerWidth <= 768
-		});
-	}
-
-	// Shopify: the BUY button puts the bottle into the shop's cart (on click only)
-	async function handleAddToCart(wine: Wine | RecommendedWine, index: number) {
-		const variantId = variantIdOf(wine as { url?: string | null; itemId?: string | null });
-		if (!shopify || !variantId) return;
-		trackFeedback({ type: 'add_to_cart', query_id: currentQueryId ?? undefined, sku_ids: [wine.id], position: index });
-		trackWidgetEvent(WIDGET_EVENTS.BUY_BUTTON_CLICKED, storeId, {
-			action: 'add_to_cart',
-			wine_id: wine.id,
-			wine_title: wine.title,
-			wine_url: wine.url,
-			variant_id: variantId,
-			query: lastSearchedQuery || undefined,
-			is_mobile: window.innerWidth <= 768
-		});
-		const result = await addToCart(variantId, { root: shopify.root, sessionId: storefrontSessionId() });
-		if (!result.ok) return; // the cart page is opening
-		addedIds = [...addedIds, wine.id];
-		// the embed closes its panel so the theme's cart drawer is visible
-		window.dispatchEvent(new CustomEvent('wineater:added-to-cart', { detail: { variantId, via: result.via } }));
-	}
-
-	function closePopup() {
-		const wine = results.find((w) => w.id === selectedWineId);
-		trackWidgetEvent(WIDGET_EVENTS.WINE_DETAILS_CLOSED, storeId, {
-			wine_id: selectedWineId,
-			wine_title: wine.title
-		});
-		selectedWineId = null;
-	}
-
-	function hasHoverPopupContent(wine: Wine | RecommendedWine) {
-		return !!(wine.reason || wine.shortDescription || wine.tags);
-	}
-
-	function onTileEnter(wine: Wine | RecommendedWine) {
-		if (widgetType === 'store' && hasHoverPopupContent(wine)) {
-			hoveredWineId = wine.id;
-			trackWidgetEvent(WIDGET_EVENTS.WINE_CARD_HOVER, storeId, {
-				wine_id: wine.id,
-				wine_title: wine.title
-			});
-		}
-	}
-
-	function onTileLeave(wine: Wine | RecommendedWine) {
-		if (widgetType === 'store' && hoveredWineId === wine.id) hoveredWineId = null;
-	}
-
-	function onTileClick(event, wine: Wine | RecommendedWine) {
-		// Don't track clicks on buy buttons or close buttons
-		if (event.target.closest('.js-WineTileAction') || event.target.closest('.js-WinePopupClose')) {
-			return;
-		}
-
-		trackFeedback({
-			type: 'click',
-			query_id: currentQueryId ?? undefined,
-			sku_ids: [wine.id],
-			position: results.findIndex((w) => w.id === wine.id)
-		});
-		trackWidgetEvent(WIDGET_EVENTS.WINE_CARD_CLICK, storeId, {
-			wine_id: wine.id,
-			wine_title: wine.title
-		});
-	}
-
-	function handleClickOutside(event: MouseEvent) {
-		// inside a shadow root (Shopify embed) document listeners see the host as the target
-		const target = (event.composedPath?.()[0] ?? event.target) as HTMLElement;
-		if (!target?.closest) return;
-		const isInsidePopup = target.closest('.js-WinePopup') || target.closest('.js-WineTileAction');
-
-		if (!isInsidePopup) {
-			selectedWineId = null;
-		}
-	}
-
-	// Set CSS variable from config reactively
-	// Shopify: variables go on the shadow host, not on the theme's <html>
-	const cssVarTarget: HTMLElement =
-		((window?.wineaterData?.mountTarget?.getRootNode?.() as ShadowRoot | undefined)?.host as HTMLElement) ||
-		document.documentElement;
-	$effect(() => {
-		if (uiConfig?.brandColor) {
-			cssVarTarget.style.setProperty('--wr-brand-color', uiConfig.brandColor);
-		}
-		if (uiConfig?.wineaterColor) {
-			cssVarTarget.style.setProperty('--wr-wineater-color', uiConfig.wineaterColor);
-		}
-	});
-
-	onMount(() => {
-		// Close popups on outside click
-		document.addEventListener('click', handleClickOutside);
-
-		(async () => {
-			// Config and the first wines do not depend on each other (the token is
-			// known up front), so both requests start together.
-			const configReady = appStore.initializeStore();
-			loadInstantRecommendations(configReady);
-
-			await configReady;
-			if (!isStoreInitialized) {
-				configFailed = true;
-				return;
-			}
-
-			if (uiConfig.customCss) {
-				generateInlineStyle(uiConfig.customCss);
-			}
-
-			initialized = true;
-			if (shopify && !searchAvailable) sommelierResting = true;
-			// без согласия (EU-магазин) событие уходит обезличенно — не повторяем
-			// его после «Принять», иначе инициализация посчиталась бы дважды
-			trackWidgetEvent(WIDGET_EVENTS.WIDGET_INITIALIZED, storeId);
-		})();
-
-		return () => {
-			document.removeEventListener('click', handleClickOutside);
-		};
-	});
-</script>
-
-{#if isStoreInitialized}
-	<!-- wr-Custom is used only for custom styling -->
-	<!-- id is used to increase specificity -->
-	<div id="wr-Custom" class="wr-App" class:wr-App--embedded={!!shopify}>
-		{#if uiConfig.logoUrl}
-			<div class="wr-App-picture">
-				<img class="wr-App-logo" src={uiConfig.logoUrl} alt="" />
-			</div>
-		{/if}
-		<Header />
-
-		<Search bind:searchQuery onSubmit={handleSearch} {initialized} />
-
-		<div class="wr-App-content">
-			{#if sommelierResting && !errorMessage}
-				<p class="wr-App-resting" role="status">
-					{getTranslation({ key: 'sommelierResting', lang: appLanguage })}
-				</p>
-			{/if}
-			{#if errorMessage}
-				<div class="wr-App-error">
-					<p>{errorMessage}</p>
-				</div>
-			{:else if results && results.length > 0}
-				<div class="wr-App-placeholder">
-					{#each results as wine, index}
-						<WineTile
-							{wine}
-							{index}
-							{hoveredWineId}
-							{selectedWineId}
-							{isAnimating}
-							translatedPopup={translatedPopups[index]}
-							onBuyClick={handleBuyBtnClick}
-							onBuyLinkClick={handleBuyLinkClick}
-							onAddToCart={shopify ? handleAddToCart : undefined}
-							addedToCart={addedIds.includes(wine.id)}
-							onPopupClose={closePopup}
-							onSimilarClick={shopify ? undefined : handleSimilarClick}
-							{onTileEnter}
-							{onTileLeave}
-							{onTileClick}
-						/>
-					{/each}
-				</div>
-				{#if hasMore}
-					<div class="wr-App-showMore">
-						<Action handleClick={handleShowMore} variant="outlined">
-							{getTranslation({ key: 'tryAgain', lang: appLanguage })}
-						</Action>
-					</div>
-				{/if}
-			{:else if isLoading}
-				<SkeletonTiles />
-			{/if}
-		</div>
-
-		{#if shouldAskConsent()}
-			<CookieConsent lang={appLanguage} />
-		{/if}
-
-		{#if !shopify}
-			<Footer {countryCode} />
-		{/if}
-	</div>
-{:else if !configFailed}
-	<!-- Shell with the same footprint as the widget while the store config loads -->
-	<div class="wr-App wr-App--loading" class:wr-App--embedded={!!shopify} aria-busy="true">
-		<div class="wr-App-loadingTop"></div>
-		<SkeletonTiles />
-	</div>
-{/if}
-
-<style>
-	/* ===================== 1) CSS Variables ===================== */
-	:global(:root) {
-		--wineater-corp-color: #0044ff;
-		/* --wr-brand-color is set dynamically from uiConfig.brandColor */
-		--wr-brand-color: #7b2beb; /* fallback value */
-	}
-
-	/* ===================== 2) Global Styles ===================== */
-	:global(*) {
-		box-sizing: border-box;
-	}
-
-	:global(.hidden) {
-		display: none;
-	}
-
-	:global(body) {
-		margin: 0;
-		padding: 0;
-
-		font-family: var(--wineater-font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
-	}
-
-	/* ===================== 3) Widget Container ===================== */
-	.wr-App {
-		padding: 12px 12px 0px;
-		border-radius: 16px;
-		background-color: #fff;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-		max-width: 1024px;
-		min-width: 1024px;
-		min-height: 500px;
-		margin: 40px auto;
-		position: relative;
-	}
-
-	/* Shopify: the embed's panel is the frame — fill it, no card of our own */
-	.wr-App.wr-App--embedded {
-		min-width: 0;
-		max-width: none;
-		width: 100%;
-		margin: 0;
-		box-shadow: none;
-		border-radius: 0;
-		min-height: 0;
-		padding-bottom: 12px;
-	}
-
-	.wr-App-resting {
-		margin: 0 0 8px;
-		padding: 10px 14px;
-		border-radius: 10px;
-		background: #f6f7fd;
-		color: #444;
-		font-size: 14px;
-		text-align: center;
-	}
-
-	.wr-App-loadingTop {
-		/* roughly the height of Header + Search, so tiles do not jump once they render */
-		height: 150px;
-	}
-
-	.wr-App-picture {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		margin-bottom: 12px;
-	}
-
-	.wr-App-logo {
-		max-width: 100%;
-		height: auto;
-		width: auto;
-		max-height: 60px;
-	}
-
-	.wr-App-content {
-		position: relative;
-		min-height: 300px;
-	}
-
-	.wr-App-placeholder {
-		display: grid;
-		grid-template-columns: repeat(4, 1fr);
-		gap: 0;
-		align-items: stretch;
-		margin-bottom: 0;
-	}
-
-	.wr-App-showMore {
-		display: flex;
-		justify-content: center;
-		padding: 16px 0 24px;
-	}
-
-	/* ===================== 12) Error Message ===================== */
-	.wr-App-error {
-		text-align: center;
-		padding: 24px;
-		color: #666;
-	}
-
-	/* ===================== 13) Mobile Styles ===================== */
-	@media screen and (max-width: 768px) {
-		.wr-App {
-			flex-direction: column;
-			padding: 0px 16px;
-			min-width: 100vw;
-		}
-
-		.wr-App.wr-App--embedded {
-			min-width: 0;
-			padding: 0 12px 12px;
-		}
-
-		.wr-App-placeholder {
-			display: flex;
-			gap: 8px;
-			overflow-x: auto;
-			scroll-snap-type: x mandatory;
-			padding: 8px 0;
-			width: calc(100vw - 32px);
-			min-width: calc(100vw - 32px);
-		}
-	}
-</style>