wineater-bot 4.22.0 → 4.23.1

package/package.json

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

package/src/App.svelte

@@ -31,7 +31,14 @@
 	preconnectFontHosts();
 
 	const INSTANT_CACHE_MAX_AGE_MS = 6 * 60 * 60 * 1000;
-	const instantCacheKey = `${cacheScope}:instant`;
+	// 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;
@@ -132,7 +139,11 @@
 	// 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 cached = readCache<Wine[]>(instantCacheKey, INSTANT_CACHE_MAX_AGE_MS);
+		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;
@@ -140,8 +151,11 @@
 			isLoading = true;
 		}
 		try {
-			const fresh = await wineaterApi.getInstantRecommendations();
-			if (fresh.length > 0) writeCache(instantCacheKey, fresh);
+			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);

package/src/components/WineBottle.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { BOTTLES, BUBBLES, SHAPES, bottleKind } from '../services/bottle/bottle';
+
+	let { type }: { type?: string | null } = $props();
+
+	const kind = $derived(bottleKind(type));
+	const k = $derived(BOTTLES[kind]);
+	const sh = $derived(SHAPES[k.shoulder]);
+	const gid = `wr-bottle-${Math.random().toString(36).slice(2, 8)}`;
+</script>
+
+<svg class="wr-WineBottle" viewBox="0 0 44 130" aria-hidden="true" focusable="false">
+	<defs>
+		<linearGradient id={gid} x1="0" x2="1" y1="0" y2="0">
+			<stop offset="0" stop-color={k.glass} stop-opacity="0.78" />
+			<stop offset="0.45" stop-color={k.glass} />
+			<stop offset="1" stop-color={k.glass} stop-opacity="0.88" />
+		</linearGradient>
+	</defs>
+	<path d={sh.body} fill="url(#{gid})" />
+	{#if kind === 'sparkling'}
+		<path d="M16.5 10h11l1.5 26h-14z" fill={k.foil} />
+		<rect x="14" y="2" width="16" height="9" rx="3.5" fill={k.foil} />
+		<rect x="14" y="8" width="16" height="2.4" fill="#000" opacity="0.12" />
+		<path
+			d="M16 15h12M15.6 20h12.8M15.2 25h13.6M14.8 30h14.4M22 11v21"
+			stroke="#8a6d12"
+			stroke-opacity="0.55"
+			stroke-width="0.9"
+			fill="none"
+		/>
+		<circle cx="22" cy="33" r="1.6" fill="none" stroke="#8a6d12" stroke-opacity="0.55" stroke-width="0.9" />
+		<g fill="#fff" opacity="0.4">
+			{#each BUBBLES as [cx, cy, r] (`${cx}-${cy}`)}
+				<circle {cx} {cy} {r} />
+			{/each}
+		</g>
+	{:else}
+		<rect x={sh.cap.x} y={sh.cap.y} width={sh.cap.w} height={sh.cap.h} rx="2.5" fill={k.foil} />
+		<rect x={sh.cap.x} y={sh.cap.y + sh.cap.h - 3} width={sh.cap.w} height="2.5" fill="#000" opacity="0.12" />
+	{/if}
+	<rect x={sh.label.x} y={sh.label.y} width={sh.label.w} height={sh.label.h} rx="2.5" fill="#fffdf8" opacity="0.94" />
+	<rect x={sh.label.x + sh.label.w * 0.2} y={sh.label.y + 8} width={sh.label.w * 0.6} height="2.4" rx="1.2" fill={k.accent} />
+	<rect x={sh.label.x + sh.label.w * 0.3} y={sh.label.y + 14} width={sh.label.w * 0.4} height="1.8" rx="0.9" fill={k.accent} opacity="0.5" />
+	<rect x={sh.label.x + sh.label.w * 0.3} y={sh.label.y + 19} width={sh.label.w * 0.4} height="1.8" rx="0.9" fill={k.accent} opacity="0.5" />
+	<path d={sh.shine} stroke="#fff" stroke-opacity="0.22" stroke-width="2.2" stroke-linecap="round" fill="none" />
+</svg>
+
+<style>
+	.wr-WineBottle {
+		display: block;
+		height: 100%;
+		width: auto;
+		margin: 0 auto;
+	}
+</style>

package/src/components/WineTile.svelte

@@ -5,12 +5,17 @@
 	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';
 
 	// 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,
@@ -97,7 +102,7 @@
 	onclick={(event) => onTileClick(event, wine)}
 >
 	<header class="wr-WineTile-header">
-		{#if wine.image}
+		{#if hasImage(wine.image) && !imageFailed}
 			<img
 					src={wine.image}
 					alt={wine.title}
@@ -105,7 +110,12 @@
 					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">
@@ -250,6 +260,11 @@
 		display: block;
 	}
 
+	.wr-WineTile-bottle {
+		padding: 4px 0;
+		box-sizing: border-box;
+	}
+
 	.wr-WineTile-title {
 		font-size: 15px;
 		font-weight: 500;

package/src/services/api/api.ts

@@ -68,6 +68,12 @@ class WineaterApi {
     // One place for every backend call: JSON body, auth, anonymous uid header,
     // uniform error. `keepalive` lets the last feedback batch out-live the page.
     async #request<T>(endpoint: string, body?: unknown, options: { keepalive?: boolean; method?: string } = {}): Promise<T> {
+        return (await this.#send<T>(endpoint, body, options)).data;
+    }
+
+    // Same as #request, but also hands back the response headers (instant/v2
+    // returns the taste-profile version in X-Wineater-Profile).
+    async #send<T>(endpoint: string, body?: unknown, options: { keepalive?: boolean; method?: string } = {}): Promise<{ data: T; headers: Headers }> {
         const init = (): RequestInit => ({
             method: options.method ?? 'POST',
             headers: this.#headers(),
@@ -91,16 +97,22 @@ class WineaterApi {
         if (!response.ok) {
             throw new Error(`API call failed with status ${response.status}: ${data?.message || 'No additional error information'}`);
         }
-        return data as T;
+        return { data: data as T, headers: response.headers };
     }
 
-    async getInstantRecommendations(): Promise<Wine[]> {
+    // `profileHash` is set when the backend served the visitor's personal start
+    // grid (anonymous taste profile); null for the general grid. The widget keys
+    // its instant cache by it, so a recomputed profile is picked up next visit.
+    async getInstantRecommendations(): Promise<{ wines: Wine[]; profileHash: string | null }> {
         try {
             const endpoint = this.#apiVersion === '2'
                 ? 'dish/recommendations/instant/v2'
                 : 'dish/recommendations/instant';
-            const data = await this.#request<any[]>(endpoint, {});
-            return data.filter(Boolean).map(deserializeInstantRecommendation);
+            const { data, headers } = await this.#send<any[]>(endpoint, {});
+            return {
+                wines: data.filter(Boolean).map(deserializeInstantRecommendation),
+                profileHash: headers.get('X-Wineater-Profile') || null,
+            };
         } catch (error) {
             throw new Error(`Error in getInstantRecommendations: ${error.message}`);
         }

package/src/services/bottle/bottle.spec.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { bottleKind, hasImage } from './bottle';
+
+describe('bottleKind', () => {
+	it('maps the types the API sends', () => {
+		expect(bottleKind('Red')).toBe('red');
+		expect(bottleKind('Rosé')).toBe('rose');
+		expect(bottleKind('Rose')).toBe('rose');
+		expect(bottleKind('Sparkling')).toBe('sparkling');
+		expect(bottleKind('Champagne brut')).toBe('sparkling');
+		expect(bottleKind('sweet')).toBe('sweet');
+		expect(bottleKind('Port')).toBe('fortified');
+		expect(bottleKind('fortified')).toBe('fortified');
+	});
+	it('falls back to white', () => {
+		expect(bottleKind('White')).toBe('white');
+		expect(bottleKind('')).toBe('white');
+		expect(bottleKind(null)).toBe('white');
+		expect(bottleKind('orange')).toBe('white');
+	});
+});
+
+describe('hasImage', () => {
+	it('rejects empty and stringified nulls', () => {
+		expect(hasImage('')).toBe(false);
+		expect(hasImage('  ')).toBe(false);
+		expect(hasImage('null')).toBe(false);
+		expect(hasImage('undefined')).toBe(false);
+		expect(hasImage(null)).toBe(false);
+		expect(hasImage('https://cdn.example/a.png')).toBe(true);
+	});
+});

package/src/services/bottle/bottle.ts

@@ -0,0 +1,78 @@
+/**
+ * Fallback bottle drawn from the wine type, used when a wine has no image or its image fails to load.
+ * Pure data: the same type always gives the same drawing. Keep in sync with the admin onboarding
+ * (wineater-admin-panel/src/pages/OnboardingPage.tsx), which draws the same bottles.
+ */
+export type Shoulder = 'bordeaux' | 'burgundy' | 'flute' | 'champagne' | 'port';
+export type BottleKind = 'red' | 'white' | 'rose' | 'sparkling' | 'sweet' | 'fortified';
+
+export const BOTTLES: Record<BottleKind, { glass: string; foil: string; accent: string; shoulder: Shoulder }> = {
+	red: { glass: '#3b1230', foil: '#7a1f3d', accent: '#7a1f3d', shoulder: 'bordeaux' },
+	white: { glass: '#a9b568', foil: '#c9b458', accent: '#8a8f3c', shoulder: 'flute' },
+	rose: { glass: '#d98a9d', foil: '#e8a3b4', accent: '#b8566f', shoulder: 'burgundy' },
+	sparkling: { glass: '#5f6b3a', foil: '#d9c26a', accent: '#b89b2e', shoulder: 'champagne' },
+	sweet: { glass: '#b8862e', foil: '#d9a441', accent: '#9a6a1c', shoulder: 'flute' },
+	fortified: { glass: '#4a2a1a', foil: '#8a5a2b', accent: '#8a5a2b', shoulder: 'port' },
+};
+
+type Box = { x: number; y: number; w: number; h: number };
+
+/** Silhouettes on a 44x130 canvas; every bottle spans y=2..123. */
+export const SHAPES: Record<Shoulder, { body: string; cap: Box; label: Box; shine: string }> = {
+	flute: {
+		body: 'M17 4h10v34c0 6 8 10 8 24v56c0 3-2 5-5 5H14c-3 0-5-2-5-5V62c0-14 8-18 8-24z',
+		cap: { x: 16, y: 2, w: 12, h: 20 },
+		label: { x: 9, y: 72, w: 26, h: 34 },
+		shine: 'M12 66c0 18 0 40 0 52',
+	},
+	burgundy: {
+		body: 'M17 4h10v30c0 10 11 14 11 30v54c0 3-2 5-5 5H11c-3 0-5-2-5-5V64c0-16 11-20 11-30z',
+		cap: { x: 16, y: 2, w: 12, h: 20 },
+		label: { x: 8, y: 72, w: 28, h: 34 },
+		shine: 'M11 68c0 18 0 38 0 50',
+	},
+	bordeaux: {
+		body: 'M17 4h10v32c0 4 1 6 4 9 4 4 6 7 6 14v59c0 3-2 5-5 5H12c-3 0-5-2-5-5V59c0-7 2-10 6-14 3-3 4-5 4-9z',
+		cap: { x: 16, y: 2, w: 12, h: 20 },
+		label: { x: 9, y: 72, w: 26, h: 34 },
+		shine: 'M12 64c0 18 0 40 0 54',
+	},
+	champagne: {
+		body: 'M17 4h10v34c0 12 15 18 15 42v35c0 5-3 8-7 8H9c-4 0-7-3-7-8V80c0-24 15-30 15-42z',
+		cap: { x: 15, y: 2, w: 14, h: 34 },
+		label: { x: 6, y: 78, w: 32, h: 36 },
+		shine: 'M8 82c0 14 0 28 0 36',
+	},
+	port: {
+		body: 'M16 4h12v16c0 3-2 4-2 7s3 4 3 8c0 6 9 6 9 18v65c0 3-2 5-5 5H11c-3 0-5-2-5-5V53c0-12 9-12 9-18 0-4 3-5 3-8s-2-4-2-7z',
+		cap: { x: 15, y: 2, w: 14, h: 15 },
+		label: { x: 8, y: 66, w: 28, h: 42 },
+		shine: 'M11 60c0 20 0 40 0 56',
+	},
+};
+
+/** Bubbles of the sparkling bottle: cx, cy, r. */
+export const BUBBLES: [number, number, number][] = [
+	[20, 58, 1.5], [26, 50, 1.1], [23, 44, 0.8], [14, 66, 1.2], [30, 63, 1.7], [9, 86, 1.1],
+	[34, 92, 1.3], [8, 106, 1.6], [35, 112, 1], [25, 70, 0.9], [17, 73, 0.7],
+];
+
+/** "Red", "Rosé", "Rouge", "Champagne", "dessert wine", ... -> one of six kinds; unknown -> white. */
+export function bottleKind(type: string | null | undefined): BottleKind {
+	const v = (type ?? '')
+		.toLowerCase()
+		.normalize('NFD')
+		.replace(/[̀-ͯ]/g, '');
+	if (/(spark|champ|cava|prosecco|cremant|brut|pet.?nat|espum|petillant)/.test(v)) return 'sparkling';
+	if (/(rose|pink|rosado)/.test(v)) return 'rose';
+	if (/(fortif|port|sherry|madeira|marsala)/.test(v)) return 'fortified';
+	if (/(sweet|dessert|late|sauternes|ice|moelleux|dulce)/.test(v)) return 'sweet';
+	if (/(red|rouge|tinto|rosso|krasn)/.test(v)) return 'red';
+	return 'white';
+}
+
+/** A usable image URL: the API sometimes sends "", "null" or "undefined" as a string. */
+export function hasImage(src: string | null | undefined): src is string {
+	const s = (src ?? '').trim();
+	return !!s && s !== 'null' && s !== 'undefined';
+}