// Zyro Electric — i18n (NL/EN) + theme (light/dark) + VAT helpers. // // Design: // • One file holds the language store, theme store, VAT helpers and a // small `t(nl, en)` inline translation function. Inline `t(nl, en)` // instead of key dictionaries keeps the diff small in every JSX file // that needs translating. // • Both stores persist to localStorage and trigger React re-renders // through context providers in app.jsx. // • Theme is applied via a `data-theme="dark"` attribute on ; CSS // in light.css overrides the design tokens for that selector. (() => { // ─────────────── Constants ─────────────── const VAT_RATE = 21; // percent const LANGS = ["nl", "en"]; const DEFAULT_LANG = "nl"; const THEMES = ["light", "dark"]; const DEFAULT_THEME = "light"; // ─────────────── Language store ─────────────── const LangContext = React.createContext({ lang: DEFAULT_LANG, setLang: () => {}, t: (nl, en) => nl, }); const useLangStore = () => { const [lang, setLangRaw] = React.useState(() => { try { const v = localStorage.getItem("zyro-lang"); return LANGS.indexOf(v) >= 0 ? v : DEFAULT_LANG; } catch (_) { return DEFAULT_LANG; } }); const setLang = React.useCallback((next) => { if (LANGS.indexOf(next) < 0) return; try { localStorage.setItem("zyro-lang", next); } catch (_) {} setLangRaw(next); try { document.documentElement.setAttribute("lang", next); } catch (_) {} }, []); React.useEffect(() => { try { document.documentElement.setAttribute("lang", lang); } catch (_) {} }, [lang]); const t = React.useCallback((nl, en) => (lang === "en" ? (en == null ? nl : en) : nl), [lang]); return { lang, setLang, t }; }; // ─────────────── Theme store ─────────────── const ThemeContext = React.createContext({ theme: DEFAULT_THEME, setTheme: () => {}, toggleTheme: () => {}, }); const useThemeStore = () => { const [theme, setThemeRaw] = React.useState(() => { try { const v = localStorage.getItem("zyro-theme"); return THEMES.indexOf(v) >= 0 ? v : DEFAULT_THEME; } catch (_) { return DEFAULT_THEME; } }); const apply = (t) => { try { document.documentElement.setAttribute("data-theme", t); } catch (_) {} }; React.useEffect(() => { apply(theme); }, [theme]); const setTheme = React.useCallback((next) => { if (THEMES.indexOf(next) < 0) return; try { localStorage.setItem("zyro-theme", next); } catch (_) {} setThemeRaw(next); }, []); const toggleTheme = React.useCallback(() => { setThemeRaw((t) => { const next = t === "dark" ? "light" : "dark"; try { localStorage.setItem("zyro-theme", next); } catch (_) {} return next; }); }, []); return { theme, setTheme, toggleTheme }; }; // ─────────────── VAT helpers ─────────────── // All product prices are VAT-inclusive (NL 21%). These helpers return // the VAT portion contained in a given inclusive total. const vatPortion = (total) => (Number(total) || 0) * VAT_RATE / (100 + VAT_RATE); const vatLabel = (lang) => lang === "en" ? "incl. " + VAT_RATE + "% VAT" : "incl. " + VAT_RATE + "% BTW"; const vatRowLabel = (lang) => lang === "en" ? "VAT included (" + VAT_RATE + "%)" : "Waarvan BTW (" + VAT_RATE + "%)"; // Apply the theme attribute as early as possible to avoid a "light flash" // when the page boots with the dark setting saved. try { const saved = localStorage.getItem("zyro-theme"); if (THEMES.indexOf(saved) >= 0) { document.documentElement.setAttribute("data-theme", saved); } const savedLang = localStorage.getItem("zyro-lang"); if (LANGS.indexOf(savedLang) >= 0) { document.documentElement.setAttribute("lang", savedLang); } } catch (_) {} window.LangContext = LangContext; window.useLangStore = useLangStore; window.ThemeContext = ThemeContext; window.useThemeStore = useThemeStore; window.VAT_RATE = VAT_RATE; window.vatPortion = vatPortion; window.vatLabel = vatLabel; window.vatRowLabel = vatRowLabel; })();