// Dassuu — Prototype (B/1 Bone)
// Components rendered into #root.
const { useState, useEffect, useMemo, useRef, useCallback } = React;
// ---------- helpers ----------
const fmtEUR = (n, withCents = false) => {
const opts = withCents
? { minimumFractionDigits: 2, maximumFractionDigits: 2, useGrouping: true }
: { maximumFractionDigits: 0, useGrouping: true };
return new Intl.NumberFormat("it-IT", opts).format(n);
};
// Use cents when value < 50, otherwise round to euro.
const fmtPrice = (n) => fmtEUR(n, n < 50);
const VAT_RATE = 0.22;
// Apply VAT if requested.
const withVAT = (n, vatIncluded) => vatIncluded ? n * (1 + VAT_RATE) : n;
// Compute per-bottle price for case formats. Returns null for single-bottle formats.
const perBottle = (price, format) => {
const m = format.match(/^(\d+)\s*[×x]/i);
if (!m) return null;
const count = parseInt(m[1], 10);
if (!count || count <= 1) return null;
return price / count;
};
const typeLabel = (type, lang) => {
if (!type || type === "fermo") return null;
const map = {
dolce: { it: "dolce", en: "sweet" },
spumante: { it: "spumante", en: "sparkling" },
fortificato: { it: "fortificato", en: "fortified" },
};
return map[type] ? map[type][lang] : null;
};
const colorTitle = (color, lang) => {
const map = {
red: { it: "Rosso", en: "Red" },
white: { it: "Bianco", en: "White" },
rose: { it: "Rosato", en: "Ros\u00e9" },
};
return map[color] ? map[color][lang] : "";
};
const scarcityBadge = (qty, format, lang) => {
// Use qty only as a subtle scarcity badge — never show raw counts.
// For multi-bottle formats (×6, ×12), qty 1 = "ultima cassa".
// For single-bottle formats (1×), qty 1 = "ultima bottiglia".
if (qty > 1) return null;
const isSingle = format.startsWith("1×");
if (lang === "it") return isSingle ? "ultimo esemplare" : "ultima cassa";
return isSingle ? "last bottle" : "last case";
};
const scrollTopOnChange = (deps) => {
useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, deps);
};
// Normalize: lowercase, strip diacritics, collapse whitespace.
const norm = (s) =>
(s == null ? "" : String(s))
.normalize("NFD")
.replace(/[\u0300-\u036f]/g, "")
.toLowerCase()
.trim();
// Split a query into individual tokens (AND semantics).
const tokenize = (q) => norm(q).split(/\s+/).filter(Boolean);
// Build a search haystack for a wine.
const wineHaystack = (w) =>
norm([w.producer, w.cuvee, w.appellation, w.vintage, w.format].filter(Boolean).join(" "));
// Build a search haystack for a collection (titles in both languages so the
// search works regardless of UI language).
const collectionHaystack = (c) =>
norm(
[
c.title.it, c.title.en,
c.subtitle.it, c.subtitle.en,
c.tagline.it, c.tagline.en,
c.number,
].join(" ")
);
// All tokens must match.
const matchesAll = (hay, tokens) => tokens.every((t) => hay.includes(t));
// Highlight matched tokens inside a string. Returns a React fragment.
const highlight = (text, tokens) => {
if (!text || tokens.length === 0) return text;
// Build a regex that matches any token, accent-insensitive by matching the
// normalized form. Easiest: walk normalized version, splice matches into
// original. Here we use a simpler approach: match on normalized indices.
const original = String(text);
const normed = norm(original);
// Find spans on normed string.
const spans = [];
tokens.forEach((tok) => {
if (!tok) return;
let i = 0;
while ((i = normed.indexOf(tok, i)) !== -1) {
spans.push([i, i + tok.length]);
i += tok.length;
}
});
if (spans.length === 0) return original;
// Merge overlapping spans.
spans.sort((a, b) => a[0] - b[0]);
const merged = [];
for (const s of spans) {
if (merged.length && s[0] <= merged[merged.length - 1][1]) {
merged[merged.length - 1][1] = Math.max(merged[merged.length - 1][1], s[1]);
} else {
merged.push([...s]);
}
}
// Note: norm() preserves length (NFD then strip combining marks may not, but
// for our latin content the length is preserved well enough; if length
// differs we fall back to no highlight to avoid corruption).
if (normed.length !== original.length) return original;
const out = [];
let cursor = 0;
merged.forEach(([s, e], idx) => {
if (cursor < s) out.push(original.slice(cursor, s));
out.push({original.slice(s, e)} );
cursor = e;
});
if (cursor < original.length) out.push(original.slice(cursor));
return {out} ;
};
// ---------- SYMBOL ----------
function SymbolMark({ size = 15 }) {
return (
);
}
// ---------- HEADER ----------
function Header({ lang, setLang, page, requestCount, openDrawer }) {
const t = window.DASSUU_DATA.copy.nav[lang];
return (
);
}
// ---------- HOME ----------
function PeriodMark() {
return (
);
}
function Home({ lang }) {
const t = window.DASSUU_DATA.copy.home[lang];
return (
{t.stamp1}
{t.stamp2}
{window.DASSUU_DATA.meta.yearMark}
);
}
// ---------- LISTINO ----------
function Listino({ lang, request, toggleRequest, vatIncluded, setVatIncluded }) {
const t = window.DASSUU_DATA.copy.listino[lang];
const collections = window.DASSUU_DATA.collections;
const refCount = useMemo(
() => collections.reduce((s, c) => s + c.wines.length, 0),
[collections]
);
const sub = t.subTemplate
.replace("{refs}", refCount)
.replace("{cols}", collections.length);
const [query, setQuery] = useState("");
const tokens = useMemo(() => tokenize(query), [query]);
const searching = tokens.length > 0;
// Filter: a wine is included if (a) its own haystack matches all tokens, OR
// (b) its parent collection's haystack matches all tokens (i.e. the user
// searched a nocciolo title — show all wines in it).
const filtered = useMemo(() => {
if (!searching) return collections;
return collections
.map((c) => {
const colHay = collectionHaystack(c);
const collectionMatches = matchesAll(colHay, tokens);
const wines = collectionMatches
? c.wines
: c.wines.filter((w) => matchesAll(wineHaystack(w), tokens));
return wines.length ? { ...c, wines, _collectionMatch: collectionMatches } : null;
})
.filter(Boolean);
}, [collections, tokens, searching]);
const matchCount = useMemo(
() => filtered.reduce((s, c) => s + c.wines.length, 0),
[filtered]
);
return (
{t.intro}
⌕
{t.searchLabel}
{matchCount} {" "}
{matchCount === 1 ? t.searchMatchSingular : t.searchMatchPlural}
{filtered.length > 0 && (
{" "}· {filtered.length} {" "}
{filtered.length === 1 ? t.searchClusterSingular : t.searchClusterPlural}
)}
)}
{searching && (
setQuery("")}>
{t.searchClear}
×
)}
{!searching && (
{collections.map((c) => (
{c.number}
{c.title[lang]} · {c.subtitle[lang]}
{c.wines.length}
→
))}
)}
{searching && filtered.length === 0 ? (
{t.searchEmpty}
{t.searchEmptyHint}
) : (
{filtered.map((c) => (
)}
);
}
function Collection({ collection: c, lang, request, toggleRequest, listinoCopy, tokens = [], vatIncluded }) {
return (
{listinoCopy.clusterLabel} {c.number}
{highlight(c.title[lang], tokens)} · {highlight(c.subtitle[lang], tokens)}
{c.tagline[lang]}
{c.wines.length} {c.wines.length === 1 ? listinoCopy.countSingular : listinoCopy.countPlural}
{c.wines.map((w) => {
const added = request.includes(w.id);
const badge = scarcityBadge(w.qty, w.format, lang);
const displayPrice = withVAT(w.price, vatIncluded);
return (
toggleRequest(w.id)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
toggleRequest(w.id);
}
}}
aria-label={added ? listinoCopy.ariaRemove : listinoCopy.ariaAdd}
>
{highlight(String(w.vintage), tokens)}
{highlight(w.producer, tokens)}
{w.cuvee && · {highlight(w.cuvee, tokens)} }
{highlight(w.appellation, tokens)}{typeLabel(w.type, lang) && {typeLabel(w.type, lang)} }
{badge && {badge} }
{w.format}
€ {fmtPrice(displayPrice)}
{vatIncluded ? listinoCopy.vatIncludedTag : listinoCopy.vatExcludedTag}
{(() => {
const pb = perBottle(displayPrice, w.format);
return pb ? (
€ {fmtPrice(pb)} / bot.
) : null;
})()}
{added ? "✓" : "+"}
);
})}
);
}
// ---------- DRAWER ----------
function Drawer({ open, close, lang, request, removeFromRequest, clearRequest, vatIncluded }) {
const t = window.DASSUU_DATA.copy.drawer[lang];
const all = useMemo(() => {
const map = new Map();
window.DASSUU_DATA.collections.forEach((c) => {
c.wines.forEach((w) => map.set(w.id, w));
});
return request.map((id) => map.get(id)).filter(Boolean);
}, [request]);
const total = useMemo(
() => all.reduce((s, w) => s + (w.price || 0), 0),
[all]
);
const totalDisplay = withVAT(total, vatIncluded);
const [email, setEmail] = useState("");
const [note, setNote] = useState("");
const [submitted, setSubmitted] = useState(false);
useEffect(() => {
if (!open) setTimeout(() => setSubmitted(false), 400);
}, [open]);
const submit = (e) => {
e.preventDefault();
setSubmitted(true);
clearRequest();
};
return (
);
}
// ---------- MANIFESTO ----------
function Manifesto({ lang }) {
const t = window.DASSUU_DATA.copy.manifesto[lang];
return (
§ Manifesto
{t.title.split(" ").map((w, i) => (i === 0 ? w : {w} ))}
{t.body.map((p, i) => (
{p}
))}
{t.storage.label}
{t.storage.line1}
{t.storage.line2}
);
}
// ---------- PERSONAL MARK ----------
// The user's own signature — the personal seal of guarantee. Sits in the
// footer; never named in body text.
function PersonalMark({ label, caption }) {
return (
);
}
// ---------- FOOTER ----------
function Footer({ lang }) {
const c = window.DASSUU_DATA.copy.footer[lang];
const yearMark = window.DASSUU_DATA.meta.yearMark;
const cols = [
{ lbl: c.sedeLegaleLabel, lines: c.sedeLegale },
{ lbl: c.sedeOperativaLabel, lines: c.sedeOperativa },
{ lbl: c.fiscalitaLabel, lines: c.fiscalita },
];
return (
{cols.map((col, i) => (
§ {col.lbl}
{col.lines.map((l, j) => (
{l}
))}
))}
{c.stamp1}
·
{c.stamp2}
{yearMark}
);
}
// ---------- APP ----------
function App() {
const [lang, setLang] = useState(() => {
const saved = localStorage.getItem("dassuu-lang");
if (saved === "it" || saved === "en") return saved;
const nav = (navigator.languages && navigator.languages[0]) || navigator.language || "it";
return nav.toLowerCase().startsWith("it") ? "it" : "en";
});
const setLangPersist = (l) => { setLang(l); localStorage.setItem("dassuu-lang", l); };
const page = document.body.dataset.page || "home";
const [request, setRequest] = useState(() => {
try { return JSON.parse(localStorage.getItem("dassuu-request")) || []; } catch (e) { return []; }
});
useEffect(() => { localStorage.setItem("dassuu-request", JSON.stringify(request)); }, [request]);
const [drawerOpen, setDrawerOpen] = useState(false);
const [vatIncluded, setVatIncludedState] = useState(() => localStorage.getItem("dassuu-vat") === "1");
const setVatIncluded = (v) => { setVatIncludedState(v); localStorage.setItem("dassuu-vat", v ? "1" : "0"); };
const toggleRequest = useCallback((id) => {
setRequest((r) => r.includes(id) ? r.filter((x) => x !== id) : [...r, id]);
}, []);
const removeFromRequest = useCallback((id) => {
setRequest((r) => r.filter((x) => x !== id));
}, []);
const clearRequest = useCallback(() => setRequest([]), []);
useEffect(() => {
document.body.style.overflow = drawerOpen ? "hidden" : "";
return () => { document.body.style.overflow = ""; };
}, [drawerOpen]);
return (
{page !== "home" && (
setDrawerOpen(true)}
/>
)}
{page === "home" && (
setDrawerOpen(false)}
lang={lang}
request={request}
removeFromRequest={removeFromRequest}
clearRequest={clearRequest}
vatIncluded={vatIncluded}
/>
{page !== "home" && request.length > 0 && !drawerOpen && (
setDrawerOpen(true)}
>
{String(request.length).padStart(2, "0")}
{lang === "it" ? "in richiesta" : "in request"}
→
)}
);
}
function HomeShell({ lang, setLang }) {
return (
setLang("it")}>IT
/
setLang("en")}>EN
);
}
ReactDOM.createRoot(document.getElementById("root")).render( 