// VELOUR Wardrobe — Step 4: Events & Budget → smart purchases.
// Add key events + set a budget; Claude recommends gap-filling pieces within budget,
// each with a projected cost-per-wear and a shop link. Closes the "shop your capsule" loop.
const { Card } = window.VelourDesignSystem_380ed4;
const FRESH = !!window.VELOUR_FRESH;
const EVENTS_KEY = FRESH ? "velour_fresh_events_v1" : "velour_events_v1";
const BUDGET_KEY = FRESH ? "velour_fresh_budget_v1" : "velour_budget_v1";
const DRESS_CODES = ["Casual", "Smart-casual", "Cocktail", "Formal / black-tie", "Work"];
const SEED_EVENTS = [
{ id: "e1", name: "Claire's wedding", date: "2026-07-11", dress: "Formal / black-tie" },
{ id: "e2", name: "Quarterly board review", date: "2026-06-24", dress: "Work" },
];
function loadJSON(key, fallback) { try { const r = localStorage.getItem(key); if (r) return JSON.parse(r); } catch (e) {} return fallback; }
function fmtDate(d) { try { return new Date(d + "T00:00").toLocaleDateString("en-US", { month: "short", day: "numeric" }); } catch (e) { return d; } }
function daysUntil(d) { const ms = new Date(d + "T00:00") - new Date(); return Math.ceil(ms / 86400000); }
// Ask the real advisor. The prompt lives server-side in api/advisor.js — the client
// sends the closet, the event and the budget, never a prompt, so the endpoint can't
// be used as an open LLM proxy. Web and mobile call this same endpoint.
async function recommendPieces(closet, event, remaining, gap) {
// Return the whole envelope, not just the list: `omitted` tells us whether the
// closet was too large to send in full, which the member is entitled to know.
const out = await window.velourAiFetch("/api/advisor", {
remaining,
gap: gap || null,
event: event ? { name: event.name, dress: event.dress, date: event.date } : null,
items: closet.map((it) => ({ name: it.name, category: it.category })),
});
return { recommendations: out.recommendations || [], omitted: out.omitted || 0 };
}
// Google Shopping, capped at the budget. `ppr_max` is Google's max-price filter.
// THE QUERY IS SHORTENED FIRST — see velourShopQuery in _ds_bundle.js. It used to
// send the recommendation's full prose name, which Shopping answers with almost
// nothing before falling back to web results. Both surfaces call the same helper.
function shopUrl(name, price, category) {
const q = `https://www.google.com/search?tbm=shop&q=${encodeURIComponent(window.velourShopQuery(name, category))}`;
return price > 0 ? `${q}&tbs=${encodeURIComponent("mr:1,price:1,ppr_max:" + Math.ceil(price))}` : q;
}
// Retailer choices for a suggested piece — plain search links, no AI needed.
//
// Two things each entry carries beyond a URL:
//
// A PRICE BAND. The same four shops used to appear for every recommendation, so an
// $85 piece offered Nordstrom — where $85 outerwear barely exists — and every result
// was over budget. A shop now only appears when it plausibly sells at that price.
//
// A BUDGET CAP, where the shop's own URL supports one. Amazon's `p_36` filter (in
// cents) and price-ascending sort were both verified against the live site: a
// $85 cap returned nothing above $60.99 out of 5,000 results. Google's `ppr_max` is
// applied but could not be verified here — automated requests hit its bot check.
// Nordstrom and Shein get no parameter at all rather than a guessed one: a wrong
// filter usually returns zero results, which reads as "nothing exists in your
// budget" and is worse than an unfiltered list. The band does the work there.
const RETAILERS = [
{ label: "Shein", max: 50, url: (q) => `https://www.shein.com/pdsearch/${encodeURIComponent(q)}` },
{ label: "Amazon", max: 250, filters: true,
url: (q, p) => `https://www.amazon.com/s?k=${encodeURIComponent(q)}` +
(p > 0 ? `&rh=${encodeURIComponent("p_36:-" + Math.round(p * 100))}&s=price-asc-rank` : "") },
{ label: "Nordstrom", min: 120, url: (q) => `https://www.nordstrom.com/sr?keyword=${encodeURIComponent(q)}` },
{ label: "Google", filters: true, url: (q, p, cat) => shopUrl(q, p, cat) },
];
function retailersFor(price) {
const p = Number(price) || 0;
return RETAILERS.filter((r) => (r.min == null || p >= r.min) && (r.max == null || p <= r.max));
}
// Local fallback recommender — suggests staples only for categories the closet
// is actually missing (a real gap), within brand voice. Swapped for the AI model
// (recommendPieces) in production; returns [] when there's no genuine gap.
const GAP_SUGGESTIONS = {
Tops: { name: "White cotton button-down", price: 45, wears: 90, why: "A clean neutral top anchors nearly every outfit — the highest-leverage gap to close." },
Denim: { name: "Straight-leg dark denim", price: 60, wears: 120, why: "One well-cut pair quietly outworks three trend pairs." },
Outerwear: { name: "Tailored wool-blend blazer", price: 90, wears: 70, why: "Lifts a casual capsule to put-together in a single layer." },
Shoes: { name: "Leather ankle boots", price: 95, wears: 80, why: "Bridges day to evening and pairs with most of what you own." },
Dresses: { name: "Simple midi dress", price: 80, wears: 45, why: "One easy dress removes the hardest what-do-I-wear mornings." },
"Trousers & skirts": { name: "Black tailored trousers", price: 75, wears: 90, why: "One sharp pair takes a plain top from day to dinner." },
Knits: { name: "Merino crew sweater", price: 70, wears: 65, why: "Warm, layerable, and quietly elevates denim." },
};
function recommendLocally(closet, event) {
const count = {};
closet.forEach((it) => { count[it.category] = (count[it.category] || 0) + 1; });
const dc = ((event && event.dress) || "").toLowerCase();
let priority;
if (event && /formal|black-tie|cocktail/.test(dc)) priority = ["Dresses", "Shoes", "Outerwear"];
else if (event && /work/.test(dc)) priority = ["Outerwear", "Tops", "Shoes"];
else if (event) priority = ["Tops", "Dresses", "Shoes"];
else priority = ["Tops", "Denim", "Outerwear", "Shoes"];
return priority.filter((c) => !count[c]).slice(0, 3).map((c) => ({ name: GAP_SUGGESTIONS[c].name, category: c, price: GAP_SUGGESTIONS[c].price, estimatedWearsPerYear: GAP_SUGGESTIONS[c].wears, why: GAP_SUGGESTIONS[c].why }));
}
function WardrobeBudget({ items, onNavigate }) {
const [events, setEvents] = React.useState(() => loadJSON(EVENTS_KEY, FRESH ? [] : SEED_EVENTS));
const [budget, setBudget] = React.useState(() => loadJSON(BUDGET_KEY, { total: FRESH ? 0 : 400, planned: [] }));
const [adding, setAdding] = React.useState(false);
const [draft, setDraft] = React.useState({ name: "", date: "", dress: "Smart-casual" });
const [selEvent, setSelEvent] = React.useState("");
const [recs, setRecs] = React.useState(null);
const [omitted, setOmitted] = React.useState(0);
// A gap handed down from the outfit formulas above. The plus tile on a missing slot
// dispatches velour:fill-gap; we scroll ourselves into view and lead with that category.
const [gapFocus, setGapFocus] = React.useState(null);
const rootRef = React.useRef(null);
React.useEffect(() => {
const onFill = (e) => {
const d = (e && e.detail) || {};
if (!d.label) return;
setGapFocus({ category: d.category || null, label: d.label });
if (rootRef.current) {
const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
rootRef.current.scrollIntoView({ behavior: reduce ? "auto" : "smooth", block: "start" });
}
};
window.addEventListener("velour:fill-gap", onFill);
return () => window.removeEventListener("velour:fill-gap", onFill);
}, []);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
// Events and the budget travel with the wardrobe pillar, so they land here too.
if (window.useVelourSynced) window.useVelourSynced("wardrobe", () => {
setEvents(loadJSON(EVENTS_KEY, FRESH ? [] : SEED_EVENTS));
setBudget(loadJSON(BUDGET_KEY, { total: FRESH ? 0 : 400, planned: [] }));
});
React.useEffect(() => { try { localStorage.setItem(EVENTS_KEY, JSON.stringify(events)); } catch (e) {} }, [events]);
React.useEffect(() => { try { localStorage.setItem(BUDGET_KEY, JSON.stringify(budget)); } catch (e) {} }, [budget]);
const plan = window.useVelourPlan ? window.useVelourPlan() : { budgetAdvisor: true };
// After every hook above, so the gate never changes the hook order between renders.
if (!plan.budgetAdvisor) {
return ;
}
const spent = budget.planned.reduce((s, p) => s + p.price, 0);
const remaining = Math.max(0, budget.total - spent);
const upcoming = [...events].sort((a, b) => new Date(a.date) - new Date(b.date));
const addEvent = () => {
if (!draft.name.trim() || !draft.date) return;
setEvents([...events, { ...draft, id: "e" + Math.random().toString(36).slice(2, 7) }]);
setDraft({ name: "", date: "", dress: "Smart-casual" }); setAdding(false);
};
const removeEvent = (id) => setEvents(events.filter((e) => e.id !== id));
const findPieces = async () => {
if (loading) return;
setLoading(true); setError(null); setRecs(null); setOmitted(0);
try {
const ev = events.find((e) => e.id === selEvent) || null;
let r = null;
// Try the real advisor; fall back to the deterministic local recommender on any
// failure (endpoint missing in local dev, API key unset, model unavailable).
try { r = await recommendPieces(items, ev, remaining, gapFocus && gapFocus.category); } catch (e) { r = null; }
// The local fallback sees the whole closet, so nothing is ever omitted there.
if (!r) { await new Promise((res) => setTimeout(res, 500)); r = { recommendations: recommendLocally(items, ev), omitted: 0 }; }
setOmitted(r.omitted || 0);
setRecs(r.recommendations.map((x) => ({ ...x, id: "r" + Math.random().toString(36).slice(2, 7), cpw: x.estimatedWearsPerYear > 0 ? x.price / x.estimatedWearsPerYear : null })));
} catch (e) {
setError("Couldn't draft picks just now. Try again in a moment.");
} finally { setLoading(false); }
};
const planBuy = (rec) => {
if (budget.planned.some((p) => p.id === rec.id)) return;
setBudget({ ...budget, planned: [...budget.planned, { id: rec.id, name: rec.name, price: rec.price }] });
};
const unplan = (id) => setBudget({ ...budget, planned: budget.planned.filter((p) => p.id !== id) });
// A planned price starts as VELOUR's estimate. What the member actually pays is the
// only number that keeps the budget honest, so it has to be editable — otherwise a
// $90 estimate spent at $50 quietly removes $40 of real budget.
const setPlannedPrice = (id, v) => {
const price = Math.max(0, Math.round(Number(v) || 0));
setBudget({ ...budget, planned: budget.planned.map((p) => (p.id === id ? { ...p, price } : p)) });
};
const pct = budget.total > 0 ? Math.min(100, (spent / budget.total) * 100) : 0;
return (
Plan ahead
Add what's coming up and set a budget. VELOUR only suggests a purchase when your capsule truly has a gap.
{gapFocus && (
Looking for a {gapFocus.label.toLowerCase()} to finish that look. Set a budget below and VELOUR will lead with it.
{retailersFor(r.price).some((rt) => rt.filters)
? `Capped at ${window.velourMoney(r.price)} where the shop allows it — the rest you'll want to filter.`
: "These open as plain searches, so filter to your budget."}