wineater-bot 4.23.0 → 4.23.2

package/package.json

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

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/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';
+}