wineater-bot 4.24.1 → 4.24.2

package/src/components/WinePopup.svelte

@@ -1,192 +0,0 @@
-<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="wr-WinePopupMobile">
-		<div class="wr-WinePopupMobile-overlay" onclick={onClose}></div>
-		<div class="wr-WinePopupMobile-wrapper">
-			<div class="wr-WinePopup js-WinePopup">
-				<div class="wr-WinePopup-header">
-					<h2 class="wr-WinePopup-title">{title}</h2>
-					<button class="wr-WinePopup-close js-WinePopupClose" onclick={onClose}>&times;</button>
-				</div>
-
-				{#if shortDescription}
-					<p class="wr-WinePopup-desc wr-WinePopup-text">{shortDescription}</p>
-				{/if}
-
-				{#if reason}
-					<div class="wr-WinePopup-reason">{reason}</div>
-				{:else if pairing}
-					<p class="wr-WinePopup-pairing wr-WinePopup-text">{pairing}</p>
-				{/if}
-
-				{#if tags && tags.length}
-					<div class="wr-WinePopup-tags">
-						{#each tags as tag}
-							<span class="wr-WinePopup-tag">{tag}</span>
-						{/each}
-					</div>
-				{/if}
-			</div>
-		</div>
-	</div>
-{:else}
-	<div class="wr-WinePopup">
-		<div class="wr-WinePopup-header">
-			<h2 class="wr-WinePopup-title">{title}</h2>
-			<button class="wr-WinePopup-close" onclick={onClose}>&times;</button>
-		</div>
-
-		{#if shortDescription}
-			<p class="wr-WinePopup-desc wr-WinePopup-text">{shortDescription}</p>
-		{/if}
-
-		{#if reason}
-			<div class="wr-WinePopup-reason">{reason}</div>
-		{:else if pairing}
-			<p class="wr-WinePopup-pairing wr-WinePopup-text">{pairing}</p>
-		{/if}
-
-		{#if tags && tags.length}
-			<div class="wr-WinePopup-tags">
-				{#each tags as tag}
-					<span class="wr-WinePopup-tag">{tag}</span>
-				{/each}
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.wr-WinePopup {
-		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;
-	}
-
-	.wr-WinePopup-text {
-		margin: 5px 0;
-	}
-
-	.wr-WinePopup-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		gap: 12px;
-	}
-
-	.wr-WinePopup-title {
-		font-size: 16px;
-		font-weight: 600;
-		margin: 0;
-		flex: 1;
-		line-height: 1.3;
-	}
-
-	.wr-WinePopup-close {
-		font-size: 20px;
-		font-weight: bold;
-		cursor: pointer;
-		color: #999;
-		border: none;
-		background: transparent;
-		line-height: 1;
-	}
-
-	.wr-WinePopup-close:hover {
-		color: #000;
-	}
-
-	.wr-WinePopup-desc {
-		margin-top: 8px;
-	}
-
-	.wr-WinePopup-reason {
-		font-size: 14px;
-		font-weight: 400;
-		color: #333;
-		margin-top: 8px;
-	}
-
-	.wr-WinePopup-pairing {
-		margin-top: 8px;
-	}
-
-	.wr-WinePopup-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-		margin-top: 8px;
-		justify-content: center;
-	}
-
-	.wr-WinePopup-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;
-	}
-
-	.wr-WinePopupMobile {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 10000;
-	}
-
-	.wr-WinePopupMobile-overlay {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0, 0, 0, 0.5);
-	}
-
-	.wr-WinePopupMobile-wrapper {
-		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>

package/src/components/WineTile.svelte

@@ -1,458 +0,0 @@
-<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';
-	import Action from './ui/Action.svelte';
-	import WineBottle from './WineBottle.svelte';
-	import { hasImage } from '../services/bottle/bottle';
-	import { variantIdOf } from '../services/shopify/shopify';
-
-	// Desktop grid has 4 columns: the first row is above the fold
-	const FIRST_ROW_SIZE = 4;
-
-	let lang = $derived(appStore.getAppLanguage());
-
-	// A broken image URL falls back to the drawn bottle, same as an empty one
-	let imageFailed = $state(false);
-
-	let {
-		wine,
-		index,
-		selectedWineId,
-		hoveredWineId,
-		onTileEnter,
-		onTileLeave,
-		onTileClick,
-		onBuyClick,
-		onBuyLinkClick,
-		onAddToCart,
-		addedToCart = false,
-		onPopupClose,
-		onSimilarClick,
-		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;
-		onBuyLinkClick: (wine: Wine | RecommendedWine, index: number) => void;
-		/** Shopify mode: BUY puts the bottle into the shop's cart */
-		onAddToCart?: (wine: Wine | RecommendedWine, index: number) => void;
-		addedToCart?: boolean;
-		onPopupClose: () => void;
-		onSimilarClick?: (wine: Wine | RecommendedWine) => 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);
-	let canAddToCart = $derived(!!onAddToCart && !!variantIdOf(wine as { url?: string | null; itemId?: string | null }));
-	let adding = $state(false);
-
-	async function addToCartClick() {
-		if (adding || addedToCart) return;
-		adding = true;
-		try {
-			await onAddToCart?.(wine, index);
-		} finally {
-			adding = 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 -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<article
-	class="wr-WineTile {isAnimating ? 'ww-slide-up' : ''}"
-	onmouseenter={() => onTileEnter(wine)}
-	onmouseleave={() => onTileLeave(wine)}
-	onclick={(event) => onTileClick(event, wine)}
->
-	<header class="wr-WineTile-header">
-		{#if hasImage(wine.image) && !imageFailed}
-			<img
-					src={wine.image}
-					alt={wine.title}
-					class="wr-WineTile-image"
-					loading={index < FIRST_ROW_SIZE ? 'eager' : 'lazy'}
-					fetchpriority={index < FIRST_ROW_SIZE ? 'high' : 'auto'}
-					decoding="async"
-					onerror={() => (imageFailed = true)}
-				/>
-		{:else}
-			<div class="wr-WineTile-image wr-WineTile-bottle">
-				<WineBottle type={wine.type} />
-			</div>
-		{/if}
-		{#if wine.total}
-			<div class="wr-WineTile-price">
-				{formatPrice(wine.total)}
-			</div>
-		{/if}
-
-		{#if wine.byTheGlass}
-			<div class="wr-WineTile-glass">
-				{getTranslation({ key: 'byTheGlass', lang })}{wine.glassPrice ? ` — ${formatPrice(wine.glassPrice)}` : ''}
-			</div>
-		{/if}
-
-		{#if canAddToCart && wine.url}
-			<h3 class="wr-WineTile-title">
-				<a class="wr-WineTile-titleLink js-WineTileAction" href={wine.url}>{wine.title}</a>
-			</h3>
-		{:else}
-			<h3 class="wr-WineTile-title">{wine.title}</h3>
-		{/if}
-	</header>
-
-	{#if joinParams(wine, ['type', 'country', 'region', 'grape'])}
-		<div class="wr-WineTile-params">
-			{joinParams(wine, ['type', 'country', 'region', 'grape'])}
-		</div>
-	{/if}
-
-	<footer class="wr-WineTile-footer">
-		<!-- We need this wrapper for top margin -->
-		<div class="wr-WineTile-actions">
-			{#if canAddToCart}
-				<Action
-					handleClick={addToCartClick}
-					variant={addedToCart ? 'outlined' : 'primary'}
-					className="wr-WineTile-action wr-WineTile-action--cart js-WineTileAction"
-				>
-					{getTranslation({ key: addedToCart ? 'addedToCart' : 'addToCart', lang })}
-				</Action>
-			{:else if wine.url}
-				<Action
-					href={wine.url}
-					handleClick={() => onBuyLinkClick(wine, index)}
-					className="wr-WineTile-action wr-WineTile-action--link js-WineTileAction"
-					target="_blank"
-					variant="outlined"
-				>
-					{getTranslation({ key: 'wineDetails.buy', lang })}
-				</Action>
-			{:else}
-				<Action
-					handleClick={() => onBuyClick(wine, index)}
-					variant="outlined"
-					className="wr-WineTile-action wr-WineTile-action--button js-WineTileAction"
-				>
-					{getTranslation({ key: 'moreInfo', lang })}
-				</Action>
-			{/if}
-			{#if onSimilarClick}
-				<Action
-					handleClick={() => onSimilarClick(wine)}
-					variant="text"
-					className="wr-WineTile-action wr-WineTile-action--similar js-WineTileAction"
-				>
-					{getTranslation({ key: 'similarWines', lang })}
-				</Action>
-			{/if}
-		</div>
-	</footer>
-
-	{#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="wr-WineTilePopup {hoveredWineId === wine.id ? 'slide-in visible' : ''}">
-			{#if translatedPopup?.reason || translatedPopup?.shortDescription || wine.reason || wine.shortDescription}
-				<div class="wr-WineTilePopup-reason">
-					{translatedPopup?.reason ||
-						translatedPopup?.shortDescription ||
-						wine.reason ||
-						wine.shortDescription}
-				</div>
-			{/if}
-			{#if translatedPopup?.tags || translatedPopup?.Tags || wine.tags}
-				<div class="wr-WineTilePopup-tags">
-					{#each getTags(translatedPopup, wine) as tag}
-						<span class="wr-WineTilePopup-tag">{tag}</span>
-					{/each}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</article>
-
-{#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>
-	.wr-WineTile {
-		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;
-	}
-
-	.wr-WineTile:last-child {
-		border-right: none;
-	}
-
-	.wr-WineTile.ww-slide-up {
-		transform: translateY(-28px);
-		opacity: 0;
-	}
-
-	.wr-WineTile-header {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: flex-start;
-	}
-
-	.wr-WineTile-image {
-		height: 200px;
-		width: 100%;
-		max-width: 100%;
-		object-fit: contain;
-		margin: 0 auto 16px;
-		display: block;
-	}
-
-	.wr-WineTile-bottle {
-		padding: 4px 0;
-		box-sizing: border-box;
-	}
-
-	.wr-WineTile-title {
-		font-size: 15px;
-		font-weight: 500;
-		margin: 0 0 8px;
-		min-height: 3rem;
-		line-height: 1.2;
-		text-align: center;
-		color: #000;
-	}
-
-	.wr-WineTile-titleLink {
-		color: inherit;
-		text-decoration: none;
-	}
-
-	.wr-WineTile-titleLink:hover {
-		text-decoration: underline;
-	}
-
-	.wr-WineTile-params {
-		font-size: 14px;
-		color: #666;
-		white-space: normal;
-		text-align: center;
-	}
-
-	.wr-WineTile-footer {
-		margin-top: auto;
-		display: flex;
-		align-items: center;
-		gap: 12px;
-		justify-content: center;
-	}
-
-	.wr-WineTile-price {
-		font-size: 16px;
-		font-weight: 400;
-		margin-bottom: 8px;
-		color: #333;
-	}
-
-	.wr-WineTile-glass {
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--wr-brand-color, #7b2beb);
-		margin-bottom: 8px;
-	}
-
-	.wr-WineTile-actions {
-		margin: 16px auto 0;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 8px;
-	}
-
-	/* :global обязателен — класс уезжает внутрь <Action>, а скоуп Svelte
-	   действует только на разметку этого компонента, иначе правило отбрасывается
-	   как неиспользуемое. Цвет тот же, что у Buy; подчёркивание выезжает слева. */
-	:global(.wr-WineTile-action--similar) {
-		/* Заметно легче кнопки Buy (14px/500) — это вторичное действие, не кнопка */
-		font-size: 12px;
-		font-weight: 400;
-		color: var(--wr-brand-color, #7b2beb);
-		text-decoration: none;
-		background: transparent;
-		border: none;
-		padding: 0;
-		position: relative;
-	}
-
-	:global(.wr-WineTile-action--similar)::after {
-		content: '';
-		position: absolute;
-		left: 0;
-		bottom: -2px;
-		width: 100%;
-		height: 1px;
-		background-color: currentColor;
-		transform: scaleX(0);
-		transform-origin: left;
-		transition: transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
-	}
-
-	:global(.wr-WineTile-action--similar:hover)::after,
-	:global(.wr-WineTile-action--similar:focus-visible)::after {
-		transform: scaleX(1);
-	}
-
-	/* Hover popup inside tile */
-	.wr-WineTilePopup {
-		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;
-	}
-
-	.wr-WineTilePopup.visible {
-		display: block;
-	}
-
-	.wr-WineTilePopup.slide-in {
-		animation: whPopup 0.25s ease;
-	}
-
-	.wr-WineTilePopup-reason {
-		font-size: 14px;
-		font-weight: 400;
-		color: #333;
-		margin-bottom: 8px;
-	}
-
-	.wr-WineTilePopup-tags {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-		margin-top: 8px;
-		justify-content: center;
-	}
-
-	.wr-WineTilePopup-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) {
-		.wr-WineTile {
-			flex: 0 0 auto;
-			scroll-snap-align: center;
-			width: 240px;
-			text-align: center;
-		}
-	}
-</style>

package/src/components/icons/Budget.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	export let className: string = '';
-	export let size: number = 20;
-</script>
-
-<svg
-	class={className}
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	viewBox="0 0 37 37"
-	fill="none"
->
-	<path
-		d="M29.3014 7.96326C27.0206 7.96326 25.0439 10.092 24.7398 11.0044C19.4179 8.72353 8.01376 10.5482 8.01376 18.6071C8.01376 21.3441 8.01376 23.1687 11.0549 25.4496V30.7715H17.1371V27.7304H21.6987V30.7715H27.7809V24.6893C29.3014 23.929 30.3658 23.1687 30.822 21.6482H33.8631V15.566H30.822C30.822 14.0455 30.0617 13.2852 29.3014 12.5249V7.96326Z"
-		stroke="currentColor"
-		stroke-width="3.0411"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-	<path
-		d="M3.45209 14.0455V15.5661C3.45209 17.2387 4.82058 18.6072 6.49318 18.6072H8.01373"
-		stroke="currentColor"
-		stroke-width="3.0411"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-	<path
-		d="M24.7398 17.0867H24.7544"
-		stroke="currentColor"
-		stroke-width="3.0411"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-</svg>

package/src/components/icons/Diamond.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	export let className: string = '';
-	export let size: number = 20;
-</script>
-
-<svg
-	class={className}
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	viewBox="0 0 38 38"
-	fill="none"
->
-	<path
-		d="M10.036 4.96326H28.2826L34.3648 14.0865L19.1593 33.8537L3.95381 14.0865L10.036 4.96326Z"
-		stroke="currentColor"
-		stroke-width="3.0411"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-	<path
-		d="M17.6388 4.96326L13.0771 14.0865L19.1593 33.8537L25.2415 14.0865L20.6799 4.96326"
-		stroke="currentColor"
-		stroke-width="3.0411"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-	<path
-		d="M3.95381 14.0867H34.3648"
-		stroke="currentColor"
-		stroke-width="3.0411"
-		stroke-linecap="round"
-		stroke-linejoin="round"
-	/>
-</svg>