wineater-bot 4.9.6 → 4.9.8

package/package.json

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

package/src/App.svelte

@@ -200,6 +200,15 @@
 		});
 	}
 
+	function handleBuyLinkClick(wine: Wine | RecommendedWine, index: number) {
+		trackWidgetEvent(WIDGET_EVENTS.BUY_BUTTON_CLICKED, storeId, {
+			wine_id: wine.id,
+			wine_title: wine.title,
+			wine_url: wine.url,
+			is_mobile: window.innerWidth <= 768
+		});
+	}
+
 	function closePopup() {
 		const wine = results.find((w) => w.id === selectedWineId);
 		trackWidgetEvent(WIDGET_EVENTS.WINE_DETAILS_CLOSED, storeId, {
@@ -314,6 +323,7 @@
 							{isAnimating}
 							translatedPopup={translatedPopups[index]}
 							onBuyClick={handleBuyBtnClick}
+							onBuyLinkClick={handleBuyLinkClick}
 							onPopupClose={closePopup}
 							{onTileEnter}
 							{onTileLeave}

package/src/components/Header.svelte

@@ -7,13 +7,42 @@
 	import Fish from './icons/Fish.svelte';
 
 	let lang = $derived(appStore.getAppLanguage());
-	const titleText = window?.wineaterData?.TITLE_TEXT || null;
+	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 titleText}
-		<h1 class="wr-Header-title">{titleText}</h1>
+	{#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 })}

package/src/components/WineTile.svelte

@@ -17,6 +17,7 @@
 		onTileLeave,
 		onTileClick,
 		onBuyClick,
+		onBuyLinkClick,
 		onPopupClose,
 		isAnimating,
 		translatedPopup
@@ -29,6 +30,7 @@
 		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;
 		onPopupClose: () => void;
 		isAnimating: boolean;
 		translatedPopup: Partial<RecommendedWine> | null;
@@ -114,6 +116,7 @@
 			{#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"

package/src/components/ui/Action.svelte

@@ -25,7 +25,7 @@
 </script>
 
 {#if href}
-	<a class={calculatedClassName} {href} {id} {target} rel="noopener noreferrer">
+	<a class={calculatedClassName} {href} {id} {target} rel="noopener noreferrer" onclick={handleClick}>
 		<slot></slot>
 	</a>
 {:else}

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

@@ -0,0 +1,72 @@
+import type { ProjectUiConfig } from "./types";
+
+export const projectConfigs: Record<string, ProjectUiConfig> = {
+    "0": {
+        logoUrl: null,
+        brandColor: "#7B2BEB",
+    },
+    "25": {
+        logoUrl: null,
+        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; }
+            #wr-Custom {
+                .wr-Search-input {
+                    border-color: #7c7c7c;
+                    color: #7c7c7c;
+                }                
+                .wr-Search-button:hover {
+                    background: #E3BE8D;
+                    opacity: 1;
+                }
+
+                .wr-WineTile-params {
+                    color: #7c7c7c;
+                }
+
+                .wr-WineTilePopup-reason {
+                    color: #000000;
+                }
+                .wr-WineTilePopup-tag {
+                    color: #000000;
+                    background: rgba(239,239,239,0.7);
+                    border-color: transparent;
+                }
+
+                .wr-WineTile-action {
+                    background: transparent;
+                }
+
+                .wr-WineTile-action:hover {
+                    background: #000000;
+                    color: #ffffff;
+                    box-shadow: none;
+                }
+            }
+        `,
+        translations: {
+            fr: {
+                "wineDetails.buy": "voir plus"
+            }
+        }
+    },
+    "21": {
+        logoUrl: "https://www.intermarche.com/images/logoIntermarche.svg",
+        brandColor: "#B81242",
+        wineaterColor: "#7B2BEB",
+        buttonUppercase: true,
+        customCss: "",
+        translations: {}
+    },
+    "26": {
+        logoUrl: "https://paladarlondon.com/wp-content/uploads/2021/05/cropped-cropped-Paladar-Logo-1473x464-min-768x219.png",
+        brandColor: "#B81242",
+        wineaterColor: "#7B2BEB",
+        buttonUppercase: true,
+        customCss: "",
+        translations: {}
+    }
+};

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

@@ -124,6 +124,7 @@ export const projectConfigs: Record<string, ProjectUiConfig> = {
         logoUrl: null,
         brandColor: "#8bae98",
         wineaterColor: "#8bae98",
+        titleText: "Looking for the perfect bottle? Ask our AI Sommelier for personalised recommendations, whatever the meal, mood or occasion.",
         customCss: `
             @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
             :root { --wineater-font-primary: 'Montserrat', Verdana, Helvetica, Arial, sans-serif; }

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

@@ -7,6 +7,7 @@ export type ProjectUiConfig = {
     wineaterColor?: string;
     customCss?: string | null;
     buttonUppercase?: boolean;
+    titleText?: string | null;
     translations?: Partial<Record<LanguageCode, Record<string, string>>>;
 }
 export type UiConfig = ProjectUiConfig & {