);
}
// ─── Products ──────────────────────────────────────────────────────────────
// Real: every product here was placed on one of the user's own boards, so the
// product list, the brands and the usage counts are all derived from their
// saved outfits. Affiliate performance (clicks, revenue, conversion,
// commission) has no source and is not shown.
function StudioProducts({ go }) {
const { outfits, loading, error, reload } = useMyOutfits();
const [sort, setSort] = useStateVA('used');
const [overrides, setOverrides] = useStateVA({}); // keyed by brand|name
const [editing, setEditing] = useStateVA(null);
const [rechecking, setRechecking] = useStateVA(null);
const [toast, setToast] = useStateVA(null);
const withOverrides = (p) => ({ ...p, ...(overrides[p.key] || {}) });
// A product row is one piece as it appears across every board it's on, so
// saving an edit writes to each of those outfits. Only the items change —
// title, mood and notes are left alone.
const persistProductEdit = async (key, next) => {
const matches = (it) =>
((it.brand || '').trim().toLowerCase() + '|' + (it.name || '').trim().toLowerCase()) === key;
const money = MBMoney.split(next.price, next.productUrl, next.currency);
const touched = (outfits || []).filter(o => (o.items || []).some(matches));
if (!touched.length) return { error: 'That product isn’t on any of your saved outfits any more.' };
const results = await Promise.all(touched.map(o => window.MBOutfits.setItems(o.id, o.items.map(it => (
matches(it) ? Object.assign({}, it, {
brand: next.brand,
name: next.name,
store: next.store,
sourceUrl: next.productUrl || it.sourceUrl,
price: money.price,
currency: money.currency,
}) : it
)))));
const failed = results.find(r => r && r.error);
return failed ? { error: failed.error } : { count: touched.length };
};
// Re-scrape the product page for its live price via the real /api endpoint.
// If that endpoint isn't reachable we say so — the old code invented a
// random markdown here, which reported price drops that never happened.
const recheckPrice = async (p) => {
if (rechecking) return;
setRechecking(p.key);
try {
const url = p.productUrl || p.sourceUrl;
if (!url) {
setToast('No product URL saved for this item — add one to check its price.');
return;
}
if (!window.openaiProductFallback) {
setToast('Price checking needs the product API, which isn’t available here.');
return;
}
const r = await window.openaiProductFallback(url);
// The endpoint returns price as a number already.
const live = r && r.price != null ? Number(r.price) : null;
if (live == null || isNaN(live)) {
setToast('Couldn’t read a current price from that page.');
return;
}
const current = MBMoney.parseAmount(p.price) || 0;
const cur = r.currency || p.currency;
if (current && live < current) {
setOverrides(prev => ({ ...prev, [p.key]: { ...(prev[p.key] || {}), price: live, wasPrice: current, onSale: true, currency: cur } }));
setToast(`Price drop — ${p.name} now ${fmtPriceC(live, cur)} (was ${fmtPriceC(current, p.currency)})`);
} else {
setToast(`${p.name} is listed at ${fmtPriceC(live, cur)}.`);
}
} catch {
setToast('Couldn’t recheck the price right now.');
} finally {
setRechecking(null);
setTimeout(() => setToast(null), 3600);
}
};
const products = useMemoVA(() => deriveProducts(outfits), [outfits]);
const list = useMemoVA(() => {
const r = products.map(withOverrides);
return [...r].sort((a, b) => {
if (sort === 'used') return b.outfitCount - a.outfitCount || a.name.localeCompare(b.name);
if (sort === 'recent') return b.lastUsed - a.lastUsed;
if (sort === 'brand') return a.brand.localeCompare(b.brand) || a.name.localeCompare(b.name);
if (sort === 'name') return a.name.localeCompare(b.name);
return 0;
});
}, [products, sort, overrides]);
const topBrands = useMemoVA(() => deriveBrands(products).slice(0, 5), [products]);
return (
setSort(e.target.value)} style={selectStyle}>
}
/>
{error && }
{loading && !error && }
{!loading && !error && list.length === 0 && (
)}
{!loading && !error && list.length > 0 && (
<>
{/* Brands you actually use, by how many placements they have */}