wineater-bot 4.0.0 → 4.1.0

package/src/components/Loader.svelte

@@ -1,5 +1,5 @@
-<div id="loading-indicator">
-	<div id="typing-indicator" class="typing-indicator">
+<div class="wr-Loader">
+	<div class="wr-Loader-indicator">
 		<span></span>
 		<span></span>
 		<span></span>
@@ -7,7 +7,7 @@
 </div>
 
 <style>
-	#loading-indicator {
+	.wr-Loader {
 		position: absolute;
 		top: 50%;
 		left: 50%;
@@ -16,7 +16,7 @@
 		text-align: center;
 	}
 
-	.typing-indicator {
+	.wr-Loader-indicator {
 		display: flex;
 		justify-content: center;
 		align-items: center;
@@ -25,7 +25,7 @@
 		background-color: white;
 	}
 
-	.typing-indicator span {
+	.wr-Loader-indicator span {
 		display: block;
 		width: 8px;
 		height: 8px;
@@ -48,15 +48,15 @@
 		}
 	}
 
-	.typing-indicator span:nth-child(1) {
+	.wr-Loader-indicator span:nth-child(1) {
 		animation-delay: 0s;
 	}
 
-	.typing-indicator span:nth-child(2) {
+	.wr-Loader-indicator span:nth-child(2) {
 		animation-delay: 0.15s;
 	}
 
-	.typing-indicator span:nth-child(3) {
+	.wr-Loader-indicator span:nth-child(3) {
 		animation-delay: 0.3s;
 	}
 </style>

package/src/components/Search.svelte

@@ -2,6 +2,7 @@
 	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;
@@ -106,23 +107,23 @@
 	});
 </script>
 
-<form id="wine-widget-search" onsubmit={onSubmit}>
-	<span class="search-icon"></span>
+<form class="wr-Search" onsubmit={onSubmit}>
+	<span class="wr-Search-icon"></span>
 	<input
-		id="wine-search-input"
+		class="wr-Search-input"
 		bind:this={searchEl}
 		type="text"
 		bind:value={searchQuery}
 		onfocus={onSearchFocus}
 		onblur={onSearchBlur}
 	/>
-	<button id="wine-search-button" type="submit">
+	<Action className="wr-Search-button" type="submit" variant="primary">
 		{getTranslation({ key: 'searchButton', lang })}
-	</button>
+	</Action>
 </form>
 
 <style>
-	#wine-widget-search {
+	.wr-Search {
 		position: relative;
 		margin: 12px auto;
 		padding: 0 6px;
@@ -132,7 +133,7 @@
 		border-radius: 10px;
 	}
 
-	.search-icon {
+	.wr-Search-icon {
 		left: 12px;
 		width: 24px;
 		height: 24px;
@@ -143,7 +144,7 @@
 		z-index: 2;
 	}
 
-	#wine-search-input {
+	.wr-Search-input {
 		flex: 1 1 0%;
 		min-width: 0;
 		padding: 12px;
@@ -154,7 +155,7 @@
 		transition: border 0.2s ease;
 	}
 
-	#wine-search-input::placeholder {
+	.wr-Search-input::placeholder {
 		color: var(--wineater-color);
 		opacity: 1;
 		transition:
@@ -162,27 +163,15 @@
 			opacity 0.3s ease-in-out;
 	}
 
-	#wine-search-input:focus {
+	.wr-Search-input:focus {
 		border-color: var(--wineater-color);
 	}
 
-	#wine-search-input:focus::placeholder {
+	.wr-Search-input:focus::placeholder {
 		opacity: 0.5;
 	}
 
-	#wine-search-button {
+	.wr-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

@@ -21,29 +21,29 @@
 </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 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="popup-short-desc">{shortDescription}</p>
+					<p class="wr-WinePopup-desc wr-WinePopup-text">{shortDescription}</p>
 				{/if}
 
 				{#if reason}
-					<div class="popup-reason">{reason}</div>
+					<div class="wr-WinePopup-reason">{reason}</div>
 				{:else if pairing}
-					<p class="popup-pairing">{pairing}</p>
+					<p class="wr-WinePopup-pairing wr-WinePopup-text">{pairing}</p>
 				{/if}
 
 				{#if tags && tags.length}
-					<div class="popup-tags">
+					<div class="wr-WinePopup-tags">
 						{#each tags as tag}
-							<span class="popup-tag">{tag}</span>
+							<span class="wr-WinePopup-tag">{tag}</span>
 						{/each}
 					</div>
 				{/if}
@@ -51,26 +51,26 @@
 		</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 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="popup-short-desc">{shortDescription}</p>
+			<p class="wr-WinePopup-desc wr-WinePopup-text">{shortDescription}</p>
 		{/if}
 
 		{#if reason}
-			<div class="popup-reason">{reason}</div>
+			<div class="wr-WinePopup-reason">{reason}</div>
 		{:else if pairing}
-			<p class="popup-pairing">{pairing}</p>
+			<p class="wr-WinePopup-pairing wr-WinePopup-text">{pairing}</p>
 		{/if}
 
 		{#if tags && tags.length}
-			<div class="popup-tags">
+			<div class="wr-WinePopup-tags">
 				{#each tags as tag}
-					<span class="popup-tag">{tag}</span>
+					<span class="wr-WinePopup-tag">{tag}</span>
 				{/each}
 			</div>
 		{/if}
@@ -78,7 +78,7 @@
 {/if}
 
 <style>
-	.card-popup {
+	.wr-WinePopup {
 		position: absolute;
 		width: 100%;
 		background-color: white;
@@ -92,18 +92,18 @@
 		flex-direction: column;
 	}
 
-	.card-popup p {
+	.wr-WinePopup-text {
 		margin: 5px 0;
 	}
 
-	.card-popup-header {
+	.wr-WinePopup-header {
 		display: flex;
 		justify-content: space-between;
 		align-items: flex-start;
 		gap: 12px;
 	}
 
-	.card-popup-header h2 {
+	.wr-WinePopup-title {
 		font-size: 16px;
 		font-weight: 600;
 		margin: 0;
@@ -111,7 +111,7 @@
 		line-height: 1.3;
 	}
 
-	.card-popup-close {
+	.wr-WinePopup-close {
 		font-size: 20px;
 		font-weight: bold;
 		cursor: pointer;
@@ -121,26 +121,26 @@
 		line-height: 1;
 	}
 
-	.card-popup-close:hover {
+	.wr-WinePopup-close:hover {
 		color: #000;
 	}
 
-	.popup-short-desc {
+	.wr-WinePopup-desc {
 		margin-top: 8px;
 	}
 
-	.popup-reason {
+	.wr-WinePopup-reason {
 		font-size: 14px;
 		font-weight: 400;
 		color: #333;
 		margin-top: 8px;
 	}
 
-	.popup-pairing {
+	.wr-WinePopup-pairing {
 		margin-top: 8px;
 	}
 
-	.popup-tags {
+	.wr-WinePopup-tags {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 8px;
@@ -148,7 +148,7 @@
 		justify-content: center;
 	}
 
-	.popup-tag {
+	.wr-WinePopup-tag {
 		display: inline-block;
 		padding: 4px 8px;
 		border-radius: 12px;
@@ -159,7 +159,7 @@
 		text-transform: capitalize;
 	}
 
-	.mobile-fullscreen-wrapper {
+	.wr-WinePopupMobile {
 		position: fixed;
 		top: 0;
 		left: 0;
@@ -168,7 +168,7 @@
 		z-index: 10000;
 	}
 
-	.mobile-fullscreen-overlay {
+	.wr-WinePopupMobile-overlay {
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -177,7 +177,7 @@
 		background: rgba(0, 0, 0, 0.5);
 	}
 
-	.mobile-fullscreen-popup {
+	.wr-WinePopupMobile-wrapper {
 		position: absolute;
 		width: 100%;
 		height: 100%;

package/src/components/WineTile.svelte

@@ -4,6 +4,8 @@
 	import WinePopup from './WinePopup.svelte';
 	import { onMount } from 'svelte';
 	import { appStore } from '../services/store/app-store.svelte';
+	import Action from './ui/Action.svelte';
+
 	let lang = $derived(appStore.getAppLanguage());
 
 	let {
@@ -80,42 +82,55 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-	class="wine-recommendation-tile {isAnimating ? 'ww-slide-up' : ''}"
+<!-- 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)}
 >
-	<div class="tile-top">
+	<header class="wr-WineTile-header">
 		{#if wine.image}
-			<img src={wine.image} alt={wine.title} class="wine-image" />
+			<img src={wine.image} alt={wine.title} class="wr-WineTile-image" />
 		{/if}
 		{#if wine.total}
-			<div class="wine-price">
+			<div class="wr-WineTile-price">
 				{formatPrice(wine.total)}
 			</div>
 		{/if}
 
-		<h3 class="wine-title">{wine.title}</h3>
-	</div>
+		<h3 class="wr-WineTile-title">{wine.title}</h3>
+	</header>
 
 	{#if joinParams(wine, ['type', 'country', 'region', 'grape'])}
-		<div class="wine-params">
+		<div class="wr-WineTile-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>
+	<footer class="wr-WineTile-footer">
+		<!-- We need this wrapper for top margin -->
+		<div class="wr-WineTile-actions">
+			{#if wine.url}
+				<Action
+					href={wine.url}
+					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}
+		</div>
+	</footer>
 
 	{#if isPopupOpen(wine.id) && !isMobile}
 		<WinePopup
@@ -130,9 +145,9 @@
 	{/if}
 
 	{#if hasHoverPopupContent(wine)}
-		<div class="wine-hover-popup {hoveredWineId === wine.id ? 'slide-in visible' : ''}">
+		<div class="wr-WineTilePopup {hoveredWineId === wine.id ? 'slide-in visible' : ''}">
 			{#if translatedPopup?.reason || translatedPopup?.shortDescription || wine.reason || wine.shortDescription}
-				<div class="popup-reason">
+				<div class="wr-WineTilePopup-reason">
 					{translatedPopup?.reason ||
 						translatedPopup?.shortDescription ||
 						wine.reason ||
@@ -140,15 +155,15 @@
 				</div>
 			{/if}
 			{#if translatedPopup?.tags || translatedPopup?.Tags || wine.tags}
-				<div class="popup-tags">
+				<div class="wr-WineTilePopup-tags">
 					{#each getTags(translatedPopup, wine) as tag}
-						<span class="popup-tag">{tag}</span>
+						<span class="wr-WineTilePopup-tag">{tag}</span>
 					{/each}
 				</div>
 			{/if}
 		</div>
 	{/if}
-</div>
+</article>
 
 {#if isPopupOpen(wine.id) && isMobile}
 	<WinePopup
@@ -163,7 +178,7 @@
 {/if}
 
 <style>
-	.wine-recommendation-tile {
+	.wr-WineTile {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -180,30 +195,30 @@
 		will-change: transform, opacity;
 	}
 
-	.wine-recommendation-tile:last-child {
+	.wr-WineTile:last-child {
 		border-right: none;
 	}
 
-	.wine-recommendation-tile.ww-slide-up {
+	.wr-WineTile.ww-slide-up {
 		transform: translateY(-28px);
 		opacity: 0;
 	}
 
-	.tile-top {
+	.wr-WineTile-header {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: flex-start;
 	}
 
-	.wine-image {
+	.wr-WineTile-image {
 		height: 200px;
 		object-fit: contain;
 		margin: 0 auto 16px;
 		display: block;
 	}
 
-	.wine-title {
+	.wr-WineTile-title {
 		font-size: 15px;
 		font-weight: 500;
 		margin: 0 0 8px;
@@ -213,14 +228,14 @@
 		color: #000;
 	}
 
-	.wine-params {
+	.wr-WineTile-params {
 		font-size: 14px;
 		color: #666;
 		white-space: normal;
 		text-align: center;
 	}
 
-	.bottom-row {
+	.wr-WineTile-footer {
 		margin-top: auto;
 		display: flex;
 		align-items: center;
@@ -228,39 +243,19 @@
 		justify-content: center;
 	}
 
-	.wine-price {
+	.wr-WineTile-price {
 		font-size: 16px;
 		font-weight: 400;
 		margin-bottom: 8px;
 		color: #333;
 	}
 
-	.buy-btn {
+	.wr-WineTile-actions {
 		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 {
+	.wr-WineTilePopup {
 		display: none;
 		position: absolute;
 		top: 0;
@@ -275,22 +270,22 @@
 		z-index: 999;
 	}
 
-	.wine-hover-popup.visible {
+	.wr-WineTilePopup.visible {
 		display: block;
 	}
 
-	.wine-hover-popup.slide-in {
+	.wr-WineTilePopup.slide-in {
 		animation: whPopup 0.25s ease;
 	}
 
-	.popup-reason {
+	.wr-WineTilePopup-reason {
 		font-size: 14px;
 		font-weight: 400;
 		color: #333;
 		margin-bottom: 8px;
 	}
 
-	.popup-tags {
+	.wr-WineTilePopup-tags {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 8px;
@@ -298,7 +293,7 @@
 		justify-content: center;
 	}
 
-	.popup-tag {
+	.wr-WineTilePopup-tag {
 		display: inline-block;
 		padding: 4px 8px;
 		border-radius: 12px;
@@ -321,7 +316,7 @@
 	}
 
 	@media screen and (max-width: 768px) {
-		.wine-recommendation-tile {
+		.wr-WineTile {
 			flex: 0 0 auto;
 			scroll-snap-align: center;
 			width: 240px;

package/src/components/ui/Action.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { appStore } from '../../services/store/app-store.svelte';
+
+	type ActionProps = {
+		type?: 'button' | 'submit' | 'reset';
+		handleClick?: () => void;
+		variant?: 'primary' | 'outlined' | 'text';
+		className?: string;
+		id?: string;
+		href?: string;
+		target?: string;
+	};
+	let {
+		type = 'button',
+		handleClick,
+		variant = 'primary',
+		className,
+		id,
+		href,
+		target = '_self'
+	}: ActionProps = $props();
+	let appUiConfig = appStore.getUiConfig();
+	let calculatedClassName =
+		`wr-Action ${variant} ${className || ''} ${appUiConfig.buttonUppercase ? 'wr-Action--uppercase' : ''}`.trim();
+</script>
+
+{#if href}
+	<a class={calculatedClassName} {href} {id} {target} rel="noopener noreferrer">
+		<slot></slot>
+	</a>
+{:else}
+	<button class={calculatedClassName} {type} onclick={handleClick} {id}>
+		<slot></slot>
+	</button>
+{/if}
+
+<style>
+	.wr-Action {
+		background: transparent;
+		border: none;
+		font-family: inherit;
+		cursor: pointer;
+		display: block;
+		text-decoration: none;
+		transition:
+			background 0.2s,
+			color 0.2s,
+			box-shadow 0.2s;
+	}
+
+	.wr-Action.primary {
+		background: var(--wineater-color);
+		color: #fff;
+		border-radius: 6px;
+		padding: 8px 16px;
+		font-size: 14px;
+		font-weight: 500;
+
+		&:hover {
+			opacity: 0.8;
+		}
+	}
+
+	.wr-Action.outlined {
+		background: transparent;
+		color: var(--wineater-color);
+		border: 2px solid var(--wineater-color);
+		border-radius: 6px;
+		padding: 8px 16px;
+		font-size: 14px;
+		font-weight: 500;
+
+		&:hover {
+			box-shadow: 0 4px 8px rgba(123, 43, 235, 0.25);
+			background-color: var(--wineater-color);
+			color: #fff;
+		}
+	}
+
+	.wr-Action--uppercase {
+		text-transform: uppercase;
+	}
+</style>

package/src/services/i18n/i18n.ts

@@ -1,4 +1,6 @@
 import translationsJson from './translations.json';
+// TODO: use DI to get custom translations to avoid high coupling
+import { appStore } from '../store/app-store.svelte';
 
 export type LanguageCode = keyof typeof translationsJson;
 
@@ -38,7 +40,13 @@ export function formatCurrency(amount: number, currencyCode: CurrencyCode, local
 // yes: "product.description.short": "..." 
 // no: "product": { "description": { "short": "..." } }
 export function getTranslation({ key, lang }): string {
-    const translations = translationsJson as Record<LanguageCode, Record<string, string>>;
+    const translations = translationsJson as Partial<Record<LanguageCode, Record<string, string>>>;
+    const appState = appStore.getUiConfig();
+    const projectTranslations = appState?.translations || {};
+    if (projectTranslations[lang] && projectTranslations[lang][key]) {
+        return projectTranslations[lang][key];
+    }
+
     if (translations[lang] && translations[lang][key]) {
         return translations[lang][key];
     }