wineater-bot 4.2.0 → 4.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "4.2.0",
+  "version": "4.2.5",
   "description": "",
   "main": "dist/wineater-chatbot.mjs",
   "module": "src/index.js",

package/src/App.svelte

@@ -248,8 +248,11 @@
 
 	// Set CSS variable from config reactively
 	$effect(() => {
+		if (uiConfig?.brandColor) {
+			document.documentElement.style.setProperty('--wr-brand-color', uiConfig.brandColor);
+		}
 		if (uiConfig?.wineaterColor) {
-			document.documentElement.style.setProperty('--wineater-color', uiConfig.wineaterColor);
+			document.documentElement.style.setProperty('--wr-wineater-color', uiConfig.wineaterColor);
 		}
 	});
 
@@ -327,8 +330,8 @@
 	/* ===================== 1) CSS Variables ===================== */
 	:global(:root) {
 		--wineater-corp-color: #0044ff;
-		/* --wineater-color is set dynamically from uiConfig.wineaterColor */
-		--wineater-color: #7b2beb; /* fallback value */
+		/* --wr-brand-color is set dynamically from uiConfig.brandColor */
+		--wr-brand-color: #7b2beb; /* fallback value */
 	}
 
 	/* ===================== 2) Global Styles ===================== */

package/src/components/Footer.svelte

@@ -77,9 +77,9 @@
 		transform: translateY(-50%);
 		padding: 4px;
 		border-radius: 6px;
-		border: 2px solid var(--wineater-color);
+		border: 2px solid var(--wr-brand-color);
 		background-color: white;
-		color: var(--wineater-color);
+		color: var(--wr-brand-color);
 		font-weight: 500;
 		font-size: 12px;
 		cursor: pointer;

package/src/components/Header.svelte

@@ -1,9 +1,14 @@
 <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());
 	const titleText = window?.wineaterData?.TITLE_TEXT || null;
+	let ShowedIcon = $state(Meat);
 </script>
 
 <div class="wr-Header">
@@ -12,13 +17,22 @@
 	{:else}
 		<h1 class="wr-Header-title">
 			{getTranslation({ key: 'headerLine1', lang })}
-			<span class="wr-Header-icon wr-Header-icon--meal"></span>
+			<!-- <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>
+			<!-- <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>
+			<!-- <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>
@@ -33,41 +47,18 @@
 		line-height: 1.3;
 		color: #333;
 		text-align: center;
+
+		/* TODO: add wineater-color to svg */
 	}
 
-	.wr-Header-icon {
+	:global(.wr-Header-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;
-	}
-
-	.wr-Header-icon--meal {
-		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//meal1.svg');
-	}
-
-	.wr-Header-icon--meal:hover {
-		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//meal3.svg');
-	}
-
-	.wr-Header-icon--mood {
-		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//mood.svg');
-	}
-
-	/* Not used, old icon */
-	.wr-Header-icon--budget {
-		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//budget.svg');
-	}
-
-	.wr-Header-icon--occasion {
-		background-image: url('https://czvgkhagwvmknscoerfy.supabase.co/storage/v1/object/public/static-media//ocasion.svg');
+		color: var(--wr-wineater-color);
 	}
 
 	.wr-Header-label {
-		color: #7B2BEB;
+		color: var(--wr-wineater-color);
 		font-weight: 500;
 	}
 

package/src/components/Loader.svelte

@@ -31,7 +31,7 @@
 		height: 8px;
 		margin: 0 3px;
 		border-radius: 50%;
-		background: linear-gradient(90deg, var(--wineater-color), var(--wineater-corp-color));
+		background: linear-gradient(90deg, var(--wr-brand-color), var(--wineater-corp-color));
 		opacity: 0.7;
 		animation: typing 1s infinite;
 	}

package/src/components/Search.svelte

@@ -156,7 +156,7 @@
 	}
 
 	.wr-Search-input::placeholder {
-		color: #7B2BEB;
+		color: var(--wr-wineater-color);
 		opacity: 1;
 		transition:
 			color 0.3s ease,
@@ -164,7 +164,7 @@
 	}
 
 	.wr-Search-input:focus {
-		border-color: var(--wineater-color);
+		border-color: var(--wr-brand-color);
 	}
 
 	.wr-Search-input:focus::placeholder {

package/src/components/WineTile.svelte

@@ -209,6 +209,7 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: flex-start;
+		background-color: transparent;
 	}
 
 	.wr-WineTile-image {

package/src/components/icons/Budget.svelte

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,35 @@
+<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>

package/src/components/icons/Fish.svelte

@@ -0,0 +1,56 @@
+<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 34 34"
+	fill="none"
+>
+	<path
+		d="M9.03846 17.0001C10.3456 12.1888 15.9077 8.65686 20.858 8.65686C25.8083 8.65686 29.2846 12.1888 30.5917 17.0001C29.2846 21.8252 25.8083 25.3432 20.858 25.3432C15.9077 25.3432 10.3456 21.8252 9.03846 17.0001Z"
+		stroke="currentColor"
+		stroke-width="2.78106"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M25.0296 17V17.6953"
+		stroke="currentColor"
+		stroke-width="2.78106"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M22.2485 25.2457C20.4397 22.8774 19.4599 19.98 19.4599 16.9999C19.4599 14.0198 20.4397 11.1224 22.2485 8.75403"
+		stroke="currentColor"
+		stroke-width="2.78106"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M9.73372 15.1506C9.73372 11.4379 7.75916 8.6151 3.79615 7.96155C2.40562 10.0473 2.40562 14.9142 4.11597 17C2.39171 19.0858 2.39171 23.9527 3.79615 26.0385C7.75916 25.3849 9.73372 22.5621 9.73372 18.8494"
+		stroke="currentColor"
+		stroke-width="2.78106"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M14.545 10.4089C14.1834 8.48998 12.7512 6.20951 11.1243 4.48525H19.1893C19.8491 4.4828 20.4883 4.71502 20.9927 5.14042C21.497 5.56582 21.8337 6.15668 21.9426 6.80744L22.2624 8.75418"
+		stroke="currentColor"
+		stroke-width="2.78106"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M22.2624 25.2459L21.9426 27.1926C21.8337 27.8434 21.497 28.4342 20.9927 28.8596C20.4883 29.285 19.8491 29.5172 19.1893 29.5148H13.2101C14.5573 27.9873 15.2948 26.0172 15.2819 23.9805"
+		stroke="currentColor"
+		stroke-width="2.78106"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/src/components/icons/Heart.svelte

@@ -0,0 +1,28 @@
+<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="M29.533 21.4034C31.7986 19.1834 34.0946 16.5224 34.0946 13.0404C34.0946 10.8224 33.2135 8.69521 31.6451 7.12684C30.0768 5.55847 27.9496 4.67737 25.7316 4.67737C23.0554 4.67737 21.1699 5.43764 18.8891 7.71847C16.6083 5.43764 14.7228 4.67737 12.0467 4.67737C9.82865 4.67737 7.70148 5.55847 6.13311 7.12684C4.56474 8.69521 3.68364 10.8224 3.68364 13.0404C3.68364 16.5376 5.96446 19.1986 8.24528 21.4034L18.8891 32.0472L29.533 21.4034Z"
+		stroke="currentColor"
+		stroke-width="3.0411"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M18.8891 19.8829L17.3686 18.3623L20.4097 15.3212L15.848 10.7596L18.8891 7.71851"
+		stroke="currentColor"
+		stroke-width="3.0411"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/src/components/icons/Meat.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	export let className: string = '';
+	export let size: number = 20;
+</script>
+
+<svg
+	class={className}
+	viewBox="0 0 38 38"
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	fill="none"
+	><path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="3.041"
+		d="M19.57 17.655a3.801 3.801 0 1 0 0-7.602 3.801 3.801 0 0 0 0 7.602Z"
+	/><path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="3.041"
+		d="M19.57 3.97a9.884 9.884 0 0 0-9.458 6.995c-1.673 4.76-1.186 5.93-4.835 9.245a4.562 4.562 0 0 0 2.889 8.09c6.082 0 12.772-2.738 17.334-6.54a9.885 9.885 0 0 0-5.93-17.79Z"
+	/><path
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="3.041"
+		d="m28.693 10.053 3.33 6.842c.316.983.475 2.009.471 3.041a9.867 9.867 0 0 1-3.953 7.907c-4.562 3.801-11.252 6.538-17.334 6.538a4.562 4.562 0 0 1-4.075-2.524l-2.92-5.839"
+	/></svg
+>

package/src/components/ui/Action.svelte

@@ -49,7 +49,7 @@
 	}
 
 	.wr-Action.primary {
-		background: var(--wineater-color);
+		background: var(--wr-brand-color);
 		color: #fff;
 		border-radius: 6px;
 		padding: 8px 16px;
@@ -63,8 +63,8 @@
 
 	.wr-Action.outlined {
 		background: transparent;
-		color: var(--wineater-color);
-		border: 2px solid var(--wineater-color);
+		color: var(--wr-brand-color);
+		border: 2px solid var(--wr-brand-color);
 		border-radius: 6px;
 		padding: 8px 16px;
 		font-size: 14px;
@@ -72,7 +72,7 @@
 
 		&:hover {
 			box-shadow: 0 4px 8px rgba(123, 43, 235, 0.25);
-			background-color: var(--wineater-color);
+			background-color: var(--wr-brand-color);
 			color: #fff;
 		}
 	}

package/src/services/ui-config/get-config.ts

@@ -4,7 +4,10 @@ import { UiConfig } from "./types";
 export function getProjectUiConfig(projectId: string): UiConfig {
     const defaultConfig = {
         logoUrl: null,
+        // Brand color is used for shop branding
         brandColor: "#7B2BEB",
+        // Wineater color is brand color of Wineater
+        // It should be changed if client wants to remove Wineater branding
         wineaterColor: "#7B2BEB",
         customCss: `
             @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

package/src/services/ui-config/projects-config.ts

@@ -7,20 +7,17 @@ export const projectConfigs: Record<string, ProjectUiConfig> = {
     },
     "25": {
         logoUrl: null,
-        brandColor: "#7B2BEB",
+        brandColor: "#000000",
+        wineaterColor: "#000000",
         buttonUppercase: true,
         customCss: `
-            @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
-            :root { --wineater-font-primary: 'Roboto', sans-serif; }
+            @import url('https://use.typekit.net/qao2vak.css');
+            :root { --wineater-font-primary: 'termina', sans-serif; }
             #wr-Custom {
                 .wr-Search-input {
                     border-color: #7c7c7c;
                     color: #7c7c7c;
-                }
-                .wr-Search-input::placeholder { color: #000000; }
-                .wr-Search-button {
-                    background: #000000;
-                }
+                }                
                 .wr-Search-button:hover {
                     background: #E3BE8D;
                     opacity: 1;
@@ -33,7 +30,6 @@ export const projectConfigs: Record<string, ProjectUiConfig> = {
                 .wr-WineTilePopup-reason {
                     color: #000000;
                 }
-
                 .wr-WineTilePopup-tag {
                     color: #000000;
                     background: rgba(239,239,239,0.7);
@@ -41,8 +37,6 @@ export const projectConfigs: Record<string, ProjectUiConfig> = {
                 }
 
                 .wr-WineTile-action {
-                    color: #000000;
-                    border-color: #000000;
                     background: transparent;
                 }
 
@@ -61,8 +55,8 @@ export const projectConfigs: Record<string, ProjectUiConfig> = {
     },
     "21": {
         logoUrl: "https://www.intermarche.com/images/logoIntermarche.svg",
-        wineaterColor: "#B81242",
-        brandColor: "#7B2BEB",
+        brandColor: "#B81242",
+        wineaterColor: "#7B2BEB",
         buttonUppercase: true,
         customCss: "",
         translations: {}