wineater-bot 4.23.3 → 4.24.0

package/src/services/shopify/cart.ts

@@ -0,0 +1,105 @@
+// "Add to cart" on a Shopify storefront. Only ever runs on the shopper's click.
+// Order (phase 0 check on Horizon and Debut):
+//   1. Shopify.actions.updateCart + openCart — every Liquid storefront since 2026-06; the theme
+//      refreshes its own cart UI. Checked at click time: the module loads at the end of the page.
+//   2. AJAX /cart/add.js with `sections` — older themes; Dawn-style cart drawer/notification
+//      re-render from the returned sections, other themes get the usual cart events.
+//   3. Cart permalink /cart/<variant>:1?storefront=true — keeps the shopper on the cart page.
+// The cart attribute `_wineater_session` (hidden at checkout: leading underscore) ties the order
+// to the widget session for later attribution. It goes through /cart/update.js, which changes only
+// the keys it is given (updateCart's `attributes` would replace every other app's attributes).
+
+export type AddToCartResult = { ok: true; via: 'actions' | 'ajax' } | { ok: false; via: 'permalink' };
+
+const SESSION_ATTRIBUTE = '_wineater_session';
+
+function tagCart(root: string, sessionId: string): void {
+	fetch(`${root}cart/update.js`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+		body: JSON.stringify({ attributes: { [SESSION_ATTRIBUTE]: sessionId } }),
+		keepalive: true
+	}).catch(() => {});
+}
+
+function sectionIds(): string[] {
+	// Dawn and its descendants render these sections after an add
+	const ids = ['cart-drawer', 'cart-icon-bubble', 'cart-notification-product', 'cart-notification-button', 'cart-live-region-text'];
+	return ids.filter((id) => id === 'cart-drawer' || id === 'cart-icon-bubble' || document.getElementById(id));
+}
+
+function refreshThemeCart(res: any): void {
+	const drawer = document.querySelector('cart-drawer') as any;
+	if (drawer && typeof drawer.renderContents === 'function') {
+		drawer.classList.remove('is-empty');
+		drawer.renderContents(res);
+		return;
+	}
+	const notification = document.querySelector('cart-notification') as any;
+	if (notification && typeof notification.renderContents === 'function') {
+		notification.renderContents(res);
+		return;
+	}
+	const bubble = document.getElementById('cart-icon-bubble');
+	if (bubble && res?.sections?.['cart-icon-bubble']) {
+		const doc = new DOMParser().parseFromString(res.sections['cart-icon-bubble'], 'text/html');
+		bubble.innerHTML = (doc.querySelector('.shopify-section') || doc.body).innerHTML;
+	}
+	// themes that listen for their own refresh events
+	document.dispatchEvent(new CustomEvent('cart:refresh', { bubbles: true }));
+	document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', { bubbles: true }));
+}
+
+async function viaActions(variantId: string): Promise<boolean> {
+	const actions = (window as any).Shopify?.actions;
+	if (!actions || typeof actions.updateCart !== 'function') return false;
+	// resolves with userErrors instead of throwing (sold out, quantity rules…)
+	const res = await actions.updateCart({
+		lines: [{ merchandiseId: `gid://shopify/ProductVariant/${variantId}`, quantity: 1 }]
+	});
+	if (res?.userErrors?.length) throw new Error(res.userErrors[0]?.message || 'cart rejected the line');
+	if (typeof actions.openCart === 'function') {
+		try {
+			await actions.openCart();
+		} catch {
+			/* the item is in the cart; the drawer just did not open */
+		}
+	}
+	return true;
+}
+
+async function viaAjax(variantId: string, root: string): Promise<boolean> {
+	const res = await fetch(`${root}cart/add.js`, {
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+		body: JSON.stringify({
+			items: [{ id: Number(variantId), quantity: 1 }],
+			sections: sectionIds(),
+			sections_url: window.location.pathname
+		})
+	});
+	if (!res.ok) return false;
+	refreshThemeCart(await res.json().catch(() => null));
+	return true;
+}
+
+export async function addToCart(variantId: string, opts: { root: string; sessionId: string }): Promise<AddToCartResult> {
+	try {
+		if (await viaActions(variantId)) {
+			tagCart(opts.root, opts.sessionId);
+			return { ok: true, via: 'actions' };
+		}
+	} catch (error) {
+		console.debug('[wineater] cart actions failed, trying ajax:', (error as Error)?.message);
+	}
+	try {
+		if (await viaAjax(variantId, opts.root)) {
+			tagCart(opts.root, opts.sessionId);
+			return { ok: true, via: 'ajax' };
+		}
+	} catch (error) {
+		console.debug('[wineater] cart ajax failed, using the cart link:', (error as Error)?.message);
+	}
+	window.location.href = `${opts.root}cart/${variantId}:1?storefront=true&attributes[${SESSION_ATTRIBUTE}]=${encodeURIComponent(opts.sessionId)}`;
+	return { ok: false, via: 'permalink' };
+}

package/src/services/shopify/shopify.spec.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from 'vitest';
+import { parseShopifyContext, pickLanguage, quotaErrorOf, variantIdOf } from './shopify';
+
+describe('parseShopifyContext', () => {
+	it('needs a myshopify domain', () => {
+		expect(parseShopifyContext({ shop: 'demo.myshopify.com' })?.shop).toBe('demo.myshopify.com');
+		expect(parseShopifyContext({ shop: 'DEMO.myshopify.com ' })?.shop).toBe('demo.myshopify.com');
+		expect(parseShopifyContext({ shop: 'demo.com' })).toBeNull();
+		expect(parseShopifyContext({ shop: '' })).toBeNull();
+		expect(parseShopifyContext(undefined)).toBeNull();
+		expect(parseShopifyContext(null)).toBeNull();
+	});
+	it('keeps the storefront root and falls back to /', () => {
+		expect(parseShopifyContext({ shop: 'a.myshopify.com', root: '/fr/' })?.root).toBe('/fr/');
+		expect(parseShopifyContext({ shop: 'a.myshopify.com' })?.root).toBe('/');
+		expect(parseShopifyContext({ shop: 'a.myshopify.com', root: 'fr' })?.root).toBe('/');
+	});
+	it('accepts only a hex accent color', () => {
+		expect(parseShopifyContext({ shop: 'a.myshopify.com', color: '#7b2beb' })?.color).toBe('#7b2beb');
+		expect(parseShopifyContext({ shop: 'a.myshopify.com', color: 'red;}body{display:none' })?.color).toBeNull();
+	});
+});
+
+describe('variantIdOf', () => {
+	it('reads the variant from the product url the backend builds', () => {
+		expect(variantIdOf({ url: 'https://s.myshopify.com/products/x?variant=68290776793339', itemId: null })).toBe(
+			'68290776793339'
+		);
+		expect(variantIdOf({ url: '/products/x?foo=1&variant=42', itemId: null })).toBe('42');
+	});
+	it('falls back to item_id (instant cards)', () => {
+		expect(variantIdOf({ url: 'https://s.myshopify.com/products/x', itemId: '777' })).toBe('777');
+		expect(variantIdOf({ url: null, itemId: '777' })).toBe('777');
+	});
+	it('accepts only numeric ids', () => {
+		expect(variantIdOf({ url: '/products/x?variant=abc', itemId: 'sku-1' })).toBeNull();
+		expect(variantIdOf({ url: null, itemId: null })).toBeNull();
+		expect(variantIdOf({ url: 'not a url ?variant=12', itemId: null })).toBe('12');
+	});
+});
+
+describe('pickLanguage', () => {
+	const supported = ['en', 'es', 'fr', 'de', 'pt', 'ru'];
+	it('prefers the storefront locale when the widget speaks it', () => {
+		expect(pickLanguage('fr', 'en', supported)).toBe('fr');
+		expect(pickLanguage('pt-BR', 'en', supported)).toBe('pt');
+		expect(pickLanguage('ES', 'en', supported)).toBe('es');
+	});
+	it('falls back to the language set in the app, then English', () => {
+		expect(pickLanguage('it', 'es', supported)).toBe('es');
+		expect(pickLanguage(undefined, 'de', supported)).toBe('de');
+		expect(pickLanguage('it', 'it', supported)).toBe('en');
+		expect(pickLanguage(null, null, supported)).toBe('en');
+	});
+});
+
+describe('quotaErrorOf', () => {
+	it('recognises the plan limit answer', () => {
+		expect(quotaErrorOf(429, { code: 'quota_exceeded', limit: 500, used: 500 })).toBe(true);
+	});
+	it('does not confuse it with rate limiting or other errors', () => {
+		expect(quotaErrorOf(429, { code: 'rate_limited' })).toBe(false);
+		expect(quotaErrorOf(500, { code: 'quota_exceeded' })).toBe(false);
+		expect(quotaErrorOf(429, null)).toBe(false);
+	});
+});

package/src/services/shopify/shopify.ts

@@ -0,0 +1,150 @@
+// Shopify mode: the widget runs on a Shopify storefront, opened from the Wineater app embed.
+// The embed loader puts the shop context into `window.wineaterData.shopify` before it loads this
+// bundle. In this mode the widget talks to /shopify/storefront/* (the shop is the key, the
+// backend checks Origin), puts wines into the Shopify cart instead of linking out, and follows
+// the shop's own consent banner (Customer Privacy API) instead of showing ours.
+//
+// Leaf module: no imports from the store or the API, so both can use it.
+
+export type ShopifyConfig = {
+	token?: string | null;
+	lang?: string | null;
+	currency?: string | null;
+	widget_type?: string | null;
+	title?: string | null;
+	hide_without_image?: boolean;
+	search_available?: boolean;
+};
+
+export type ShopifyContext = {
+	/** permanent myshopify domain */
+	shop: string;
+	/** storefront locale (request.locale.iso_code) */
+	locale: string | null;
+	/** cart currency */
+	currency: string | null;
+	/** Shopify.routes.root: '/' or a market/locale prefix like '/fr/' */
+	root: string;
+	/** public widget config (app-data metafield or /shopify/storefront/config) */
+	config: ShopifyConfig | null;
+	/** accent color from the theme editor setting */
+	color: string | null;
+};
+
+const MYSHOPIFY = /^[a-z0-9][a-z0-9-]*\.myshopify\.com$/;
+
+export function parseShopifyContext(raw: unknown): ShopifyContext | null {
+	if (!raw || typeof raw !== 'object') return null;
+	const r = raw as Record<string, unknown>;
+	const shop = String(r.shop ?? '')
+		.trim()
+		.toLowerCase();
+	if (!MYSHOPIFY.test(shop)) return null;
+	const root = typeof r.root === 'string' && r.root.startsWith('/') ? r.root : '/';
+	return {
+		shop,
+		locale: typeof r.locale === 'string' && r.locale ? r.locale : null,
+		currency: typeof r.currency === 'string' && r.currency ? r.currency : null,
+		root: root.endsWith('/') ? root : `${root}/`,
+		config: r.config && typeof r.config === 'object' ? (r.config as ShopifyConfig) : null,
+		color: typeof r.color === 'string' && /^#[0-9a-f]{3,8}$/i.test(r.color) ? r.color : null
+	};
+}
+
+let cached: ShopifyContext | null | undefined;
+
+/** Shop context set by the embed loader; null on every non-Shopify page. */
+export function shopifyContext(): ShopifyContext | null {
+	if (cached === undefined) {
+		cached = typeof window === 'undefined' ? null : parseShopifyContext((window as any).wineaterData?.shopify);
+	}
+	return cached;
+}
+
+export const isShopifyMode = (): boolean => shopifyContext() !== null;
+
+/**
+ * Shopify variant id of a card. Search cards carry the product url the backend builds from the
+ * variant (`…/products/<handle>?variant=<id>`); instant cards also carry `item_id` = variant id.
+ */
+export function variantIdOf(wine: { url?: string | null; itemId?: string | null }): string | null {
+	const fromUrl = /[?&]variant=(\d+)/.exec(wine.url ?? '')?.[1];
+	if (fromUrl) return fromUrl;
+	const item = String(wine.itemId ?? '').trim();
+	return /^\d+$/.test(item) ? item : null;
+}
+
+/** Storefront locale if the widget speaks it, else the language set in the app, else English. */
+export function pickLanguage(
+	locale: string | null | undefined,
+	configLang: string | null | undefined,
+	supported: string[]
+): string {
+	const base = (l: string | null | undefined) => (l ?? '').toLowerCase().split('-')[0];
+	for (const l of [base(locale), base(configLang)]) if (l && supported.includes(l)) return l;
+	return 'en';
+}
+
+/** 429 from /shopify/storefront/search because the shop used up its monthly searches. */
+export function quotaErrorOf(status: number, body: unknown): boolean {
+	return status === 429 && (body as { code?: unknown } | null)?.code === 'quota_exceeded';
+}
+
+export class QuotaExceededError extends Error {
+	constructor() {
+		super('quota_exceeded');
+		this.name = 'QuotaExceededError';
+	}
+}
+
+/**
+ * Per-tab session for the storefront search: the backend needs it to tell a repeated question
+ * from a new one (repeats within 10 minutes do not count toward the plan). Not a visitor id:
+ * it lives in sessionStorage (or memory) and dies with the tab.
+ */
+let memorySession: string | null = null;
+export function storefrontSessionId(): string {
+	if (memorySession) return memorySession;
+	let id: string | null = null;
+	try {
+		id = window.sessionStorage.getItem('wineater_sf_session');
+	} catch {
+		/* blocked */
+	}
+	if (!id) {
+		id = globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+		try {
+			window.sessionStorage.setItem('wineater_sf_session', id);
+		} catch {
+			/* blocked: the id lives for this page only */
+		}
+	}
+	memorySession = id;
+	return id;
+}
+
+/**
+ * Shopify Customer Privacy API: the shop's own cookie banner decides whether we may identify the
+ * visitor. Until the API answers (or if the shop never loads it) we treat tracking as not allowed:
+ * analytics still go out, anonymised, as for every other shop.
+ */
+export function shopifyAnalyticsAllowed(): boolean {
+	try {
+		const cp = (window as any).Shopify?.customerPrivacy;
+		if (cp && typeof cp.analyticsProcessingAllowed === 'function') return cp.analyticsProcessingAllowed() === true;
+	} catch {
+		/* ignore */
+	}
+	return false;
+}
+
+/** Ask Shopify to load the Customer Privacy API (no-op if the theme already did). */
+export function loadShopifyPrivacyApi(): void {
+	try {
+		const s = (window as any).Shopify;
+		if (s?.customerPrivacy || typeof s?.loadFeatures !== 'function') return;
+		s.loadFeatures([{ name: 'consent-tracking-api', version: '0.1' }], () => {});
+	} catch {
+		/* ignore */
+	}
+}

package/src/services/store/app-store.svelte.ts

@@ -5,15 +5,25 @@ import type { StoreConfig } from "./types";
 import { deserializeStoreConfig } from "./deserialize";
 import type { ProjectUiConfig } from "../ui-config/types";
 import { getProjectUiConfig } from "../ui-config/get-config";
-import { setStoreConsentPolicy } from "../profile/consent.svelte";
+import { setConsentGate, setStoreConsentPolicy } from "../profile/consent.svelte";
+import translationsJson from "../i18n/translations.json";
+import { loadShopifyPrivacyApi, pickLanguage, shopifyAnalyticsAllowed, shopifyContext, type ShopifyContext } from "../shopify/shopify";
 
 export type AppState = {
     storeConfig: StoreConfig | null;
     currentLanguage: LanguageCode;
     isConfigLoaded: boolean;
     uiConfig: ProjectUiConfig;
+    /** Shopify mode: false once the shop has used up its monthly searches */
+    searchAvailable: boolean;
 };
 
+// Shopify mode: the theme's own font and the accent color from the theme editor, no web fonts
+function shopifyUiConfig(sf: ShopifyContext): ProjectUiConfig {
+    const color = sf.color || '#7B2BEB';
+    return { ...getProjectUiConfig(''), brandColor: color, wineaterColor: color, customCss: '' };
+}
+
 const STORE_CONFIG_MAX_AGE_MS = 24 * 60 * 60 * 1000;
 
 let state = $state<AppState>({
@@ -21,10 +31,13 @@ let state = $state<AppState>({
     currentLanguage: 'en',
     isConfigLoaded: false,
     uiConfig: null,
+    searchAvailable: true,
 });
 
 export const appStore = {
     getLanguageFromURL(): LanguageCode | null {
+        // a Shopify storefront owns its URL and its locale
+        if (shopifyContext()) return null;
         const params = new URLSearchParams(window.location.search);
         const lang = params.get('lang');
         return lang as LanguageCode | null;
@@ -46,6 +59,10 @@ export const appStore = {
     setStoreLanguage(lang: LanguageCode) {
         if (state.storeConfig && state.storeConfig.available_languages.includes(lang)) {
             state.currentLanguage = lang;
+            if (shopifyContext()) {
+                wineaterApi.setLanguage(lang);
+                return;
+            }
             const params = new URLSearchParams(window.location.search);
             params.set('lang', lang);
             const newUrl = `${window.location.pathname}?${params.toString()}`;
@@ -73,7 +90,12 @@ export const appStore = {
             // fallback to store default language
             this.setStoreLanguage(state.storeConfig.lang as LanguageCode);
         }
-        this.setUiConfig(getProjectUiConfig(state.storeConfig.id));
+        const sf = shopifyContext();
+        this.setUiConfig(
+            sf
+                ? { ...shopifyUiConfig(sf), titleText: state.storeConfig.title || null }
+                : getProjectUiConfig(state.storeConfig.id)
+        );
         setStoreConsentPolicy(state.storeConfig.requires_cookie_consent);
         state.isConfigLoaded = true;
     },
@@ -81,6 +103,8 @@ export const appStore = {
     // paint without waiting for the network) and refreshed in the background
     // for the next visit. Without a cache we wait for the network as before.
     async initializeStore() {
+        const sf = shopifyContext();
+        if (sf) return this.initializeShopify(sf);
         // :v2 — конфиг получил requires_cookie_consent; старый кэш (24 ч) его не знает
         const cacheKey = `${cacheScope}:store-config:v2`;
         const fetchAndCache = async () => {
@@ -105,6 +129,37 @@ export const appStore = {
             state.isConfigLoaded = false;
         }
     },
+    // Shopify mode: the embed passes the public config (app-data metafield), so the first paint
+    // needs no request; without it we ask /shopify/storefront/config once.
+    async initializeShopify(sf: ShopifyContext) {
+        setConsentGate(shopifyAnalyticsAllowed);
+        loadShopifyPrivacyApi();
+        try {
+            const cfg = sf.config?.lang ? sf.config : await wineaterApi.getShopifyConfig();
+            const supported = Object.keys(translationsJson);
+            const lang = pickLanguage(sf.locale, cfg?.lang, supported);
+            this.applyStoreConfig({
+                id: `shopify:${sf.shop}`,
+                type: cfg?.widget_type ?? 'store',
+                lang,
+                available_languages: [lang],
+                open_ai_key: null,
+                currency: sf.currency || cfg?.currency || 'USD',
+                title: cfg?.title ?? '',
+                requires_cookie_consent: true,
+            });
+            state.searchAvailable = cfg?.search_available !== false;
+        } catch (error) {
+            console.error('Failed to initialize store:', error);
+            state.isConfigLoaded = false;
+        }
+    },
+    isSearchAvailable(): boolean {
+        return state.searchAvailable;
+    },
+    setSearchAvailable(available: boolean) {
+        state.searchAvailable = available;
+    },
     isInitialized(): boolean {
         return state.isConfigLoaded;
     },