{p.marque} · {cat?.nom}
{p.nom}
{p.note ? (
<>
WATT SPOT
ELECTRIC
e.preventDefault()}>
{loading && items.length === 0 && (
);
};
// ---------- Header (client) ----------
// Public read-only catalog: no cart, no account, no favorites — only search,
// browse, and a link to the brands page. Pro clients place orders in the
// Watt Spot mobile app.
const ClientHeader = ({ onNav, route, onSearch, query }) => {
const [openSugg, setOpenSugg] = useState(false);
const [drawerOpen, setDrawerOpen] = useState(false);
const submitSearch = (e) => {
if (e) e.preventDefault();
const q = (query || '').trim();
if (q.length >= 2) { onNav('search', { q }); setOpenSugg(false); }
};
const navAndClose = (r, p) => { setDrawerOpen(false); onNav(r, p); };
return (
Recherche en cours…
)}
{!loading && items.length === 0 && (
Aucun résultat pour « {q} »
{items.map((p, i) => (
setHighlight(i)}
onClick={() => go(p)}
>
))}
{p.nom}
{p.marque} · Réf {p.ref}
Voir tous les résultats pour « {q} »
)}
{openSugg && query && (
setOpenSugg(false)}/>
)}
);
};
// Top nav (extracted so it can subscribe to the live category tree hook).
const NavBar = ({ onNav, route }) => {
const tree = useCategoriesTree();
return (
);
};
// ---------- Per-L1 dropdown (one nav item per top category) ----------
// Each L1 sits inline in the nav bar. Hover (or click) shows a 2-column
// flyout: L2 list on the left, L3 children of the hovered L2 on the right.
// Tapping any node navigates to the category page for that slug.
const TopCategoryDropdown = ({ top, onNav, route }) => {
const [open, setOpen] = useState(false);
const [openL2, setOpenL2] = useState(null);
const wrapRef = useRef(null);
useEffect(() => {
const close = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) { setOpen(false); setOpenL2(null); } };
document.addEventListener('mousedown', close);
return () => document.removeEventListener('mousedown', close);
}, []);
const go = (slug) => { setOpen(false); setOpenL2(null); onNav('cat', { cat: slug }); };
const l2 = (top.children || []).find(c => c.slug === openL2);
const hasChildren = (top.children || []).length > 0;
return (
{p.tag && {p.tag}}
);
};
// ---------- Category page ----------
const CategoryPage = ({ cat, onNav, initialFilter }) => {
const tree = useCategoriesTree();
const [all, setAll] = useState([]);
const [sort, setSort] = useState('pop');
const [view, setView] = useState('grid');
const [brands, setBrands] = useState(new Set());
const [onlyStock, setOnlyStock] = useState(false);
// Resolve the category + its full path from the tree (single source of truth).
const found = findInTree(tree, cat);
const node = found?.node || { slug: cat, name: cat };
const path = found?.path || [{ slug: cat, name: cat }];
const isLeaf = !(node.children?.length);
// For non-leaf nodes (L1/L2 with sub-categories) we aggregate products from
// every leaf under it. Otherwise we just query the leaf's slug directly.
const slugsToQuery = isLeaf
? [cat]
: Array.from(collectLeafSlugs(node));
useEffect(() => {
let alive = true;
if (!slugsToQuery.length) { setAll([]); return; }
// Fire one request per slug; for top-level categories with many leaves this
// is still a small handful of round-trips and avoids a server-side `IN`.
Promise.all(slugsToQuery.map(s => window.WS_DB.listProducts({ category: s, platform: 'web' }).catch(() => [])))
.then(lists => {
if (!alive) return;
const seen = new Set(); const merged = [];
for (const list of lists) for (const p of (list || [])) {
if (seen.has(p.id)) continue;
seen.add(p.id); merged.push(p);
}
setAll(merged);
});
return () => { alive = false; };
// slugsToQuery is derived from cat — re-run when cat changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [cat]);
const availableBrands = [...new Set(all.map(p => p.marque).filter(Boolean))];
let items = all.filter(p => {
if (brands.size && !brands.has(p.marque)) return false;
if (onlyStock && p.stockStatus === 'rupture') return false;
return true;
});
if (sort === 'note') items = [...items].sort((a,b)=>(b.note||0)-(a.note||0));
const toggleBrand = (b) => {
const s = new Set(brands);
s.has(b) ? s.delete(b) : s.add(b);
setBrands(s);
};
// Sub-categories of the current node (chips above the grid for drilling down).
const subs = node.children || [];
// Siblings: alternate sub-categories at the same level (helpful at L2/L3).
const siblings = path.length >= 2
? (path[path.length - 2].children || []).filter(c => c.slug !== node.slug)
: [];
return (
{siblings.length > 0 && (
{/* If we're on a parent (L1/L2 with children), drill-down chips first. */}
{subs.length > 0 && (
);
};
const ProductRow = ({ p, onOpen }) => {
const cat = (window.CATEGORIES || []).find(c => c.id === p.cat);
return (
onNav('cat', { cat: sc.slug })}>
Voir tout ({sc.products.length})
))}
);
};
// ---------- Rayons grid (home section) ----------
// Shows the L2 sub-categories curated by the admin via the
// `home_rayons` setting. Default = first 8 L2s across all L1s in tree order.
// Admin manages the list from "Catégories → Rayons en vedette".
const RayonsSection = ({ products, onNav }) => {
const tree = useCategoriesTree();
const [featured, setFeatured] = useState(null); // null = not loaded yet
useEffect(() => {
let alive = true;
const load = () => window.WS_DB.getSetting('home_rayons')
.then(v => { if (alive) setFeatured(Array.isArray(v) ? v : []); })
.catch(() => { if (alive) setFeatured([]); });
load();
const h = () => load();
window.addEventListener('ws-rayons-changed', h);
return () => { alive = false; window.removeEventListener('ws-rayons-changed', h); };
}, []);
// Flatten all L2s across L1s with their L1 parent name (for context).
const allL2 = [];
for (const l1 of tree) {
for (const l2 of (l1.children || [])) {
allL2.push({ ...l2, parentName: l1.name, parentSlug: l1.slug });
}
}
const byId = Object.fromEntries(allL2.map(c => [c.slug, c]));
// Apply the admin's pick; fall back to first 8 if nothing curated yet.
let rayons;
if (featured && featured.length) {
rayons = featured.map(id => byId[id]).filter(Boolean);
} else {
rayons = allL2.slice(0, 8);
}
if (!rayons.length) return null;
return (
);
};
// ---------- Brands page (Nos marques) ----------
// Brands list = derived from products' `marque` field, enriched with logos
// and descriptions stored in the `brand_meta` setting (managed by admin).
// Click a brand → opens its dedicated product page.
const BrandsPage = ({ onNav }) => {
const [products, setProducts] = useState([]);
const [meta, setMeta] = useState({});
useEffect(() => {
let alive = true;
const refresh = () => Promise.all([
window.WS_DB.listProducts({ activeOnly: true, platform: 'web' }).catch(() => []),
window.WS_DB.getSetting('brand_meta').catch(() => ({})),
]).then(([p, m]) => {
if (!alive) return;
setProducts(p || []);
setMeta(m && typeof m === 'object' ? m : {});
});
refresh();
window.addEventListener('ws-brands-changed', refresh);
return () => { alive = false; window.removeEventListener('ws-brands-changed', refresh); };
}, []);
// Aggregate brands; merge in any meta-only entries (admin can pre-create
// a brand even before products land).
const byBrand = {};
for (const p of products) {
const b = (p.marque || '').trim();
if (!b) continue;
if (!byBrand[b]) byBrand[b] = { name: b, count: 0 };
byBrand[b].count++;
}
for (const name of Object.keys(meta || {})) {
if (!byBrand[name]) byBrand[name] = { name, count: 0 };
}
const brands = Object.values(byBrand).sort((a, b) => b.count - a.count);
return (
{brands.length === 0 ? (
);
};
// ---------- Single brand page: products grouped by category ----------
const BrandPage = ({ brand, onNav }) => {
const [products, setProducts] = useState([]);
const [meta, setMeta] = useState(null);
const tree = useCategoriesTree();
useEffect(() => {
let alive = true;
Promise.all([
window.WS_DB.listProducts({ activeOnly: true, platform: 'web' }).catch(() => []),
window.WS_DB.getSetting('brand_meta').catch(() => ({})),
]).then(([p, m]) => {
if (!alive) return;
setProducts((p || []).filter(x => (x.marque || '').trim().toLowerCase() === brand.toLowerCase()));
setMeta((m && m[brand]) || {});
});
return () => { alive = false; };
}, [brand]);
// Build category labels (full path) for grouping
const labelFor = (slug) => {
const found = findInTree(tree, slug);
return found ? found.path.map(n => n.name).join(' › ') : slug;
};
const groups = {};
for (const p of products) {
const key = p.cat || '__nocat__';
(groups[key] = groups[key] || []).push(p);
}
return (
{products.length === 0 ? (
))
)}
);
};
Object.assign(window, {
HomePage, CategoryPage, ProductCard, ProductRow, ClientHeader, Logo,
SearchPage, FavoritesPage, BrandsPage, BrandPage, Thumb, useFavSet,
fmt, TND, collectLeafSlugs, topIconFor,
applyCategoryOverrides, flattenCategoryTree, findInTree,
});
hasChildren && setOpen(true)}
onMouseLeave={() => { setOpen(false); setOpenL2(null); }}>
{
e.preventDefault();
// On mobile the megamenu is CSS-hidden — tap goes straight to the L1.
const isMobile = typeof window !== 'undefined' && window.innerWidth <= 768;
if (!hasChildren || isMobile) go(top.slug);
else setOpen(o => !o);
}}>
{top.name} {hasChildren && }
{open && hasChildren && (
);
};
// ---------- Home ----------
const HomePage = ({ onNav }) => {
// Start empty — no demo seed. After a Supabase wipe the home page must
// show 0 products, not the bundled 76-product fallback.
const [products, setProducts] = useState([]);
const [cats, setCats] = useState([]);
const [heroId, setHeroId] = useState(null);
useEffect(() => {
let alive = true;
Promise.all([
window.WS_DB.listProducts({ platform: 'web' }),
window.WS_DB.listCategories(),
window.WS_DB.getSetting('hero_product_id').catch(() => null),
]).then(([p, c, hero]) => {
if (!alive) return;
setProducts(p || []);
setCats(c || []);
if (hero) setHeroId(hero);
}).catch(() => {});
return () => { alive = false; };
}, []);
const promos = products.filter(p => p.tag === 'Promo');
const best = products.filter(p => p.tag === 'Best-seller');
const nouveau = products.filter(p => p.tag === 'Nouveau');
// Prefer the admin-selected product; fall back to first promo/best-seller
const featuredPromo = (heroId && products.find(p => p.id === heroId))
|| promos[0] || best[0] || products[0];
// hero stats — computed live from catalog
const totalProducts = products.length;
const inStockCount = products.filter(p => p.stockStatus !== 'rupture').length;
const avgRating = products.length
? (products.filter(p => p.note).reduce((a, p) => a + p.note, 0) / Math.max(1, products.filter(p => p.note).length)).toFixed(1)
: '—';
return (
{/* L2 column */}
)}
{top.children.map(c => (
))}
{/* L3 column */}
{l2?.children?.length > 0 && (
{l2.children.map(c => (
))}
)}
{/* Hero */}
Électricité · Éclairage · Domotique
Tout pour électrifier
{/* Categories grid — driven by the live tree (matches top nav) */}
{/* Tagged-product rows — only render if the admin has tagged any */}
{promos.length > 0 && (
)}
{best.length > 0 && (
)}
{nouveau.length > 0 && (
)}
{/* Showcase by category — admin picks which L2 categories to feature
(setting "home_showcases"), each shows its product preview + a link
to the full category page. */}
{/* Trust strip */}
);
};
// ---------- Product Card ----------
// Public catalog card: thumbnail, brand, name, rating. No price, no cart,
// no favorites — those live in the Pro mobile app.
const ProductCard = ({ p, onOpen }) => {
const cat = (window.CATEGORIES || []).find(c => c.id === p.cat);
return (
Tout pour électrifier
votre espace.
{totalProducts} références en stock. Livraison 24h sur Tunis. Conseils techniques par des pros.
{totalProducts}+Produits
24hLivraison
{avgRating}/5Note clients
{inStockCount}En stock
{featuredPromo && (
onNav('product', { id: featuredPromo.id })} style={{ cursor: 'pointer' }}>
)}
{featuredPromo.tag === 'Promo' ? 'Coup de projecteur' : featuredPromo.tag || 'À découvrir'}
{featuredPromo.marque} · {featuredPromo.ref}
{featuredPromo.nom}
Promos en cours
{promos.slice(0, 8).map(p => onNav("product", { id: p.id })}/>)}
Best-sellers
{best.slice(0, 8).map(p => onNav("product", { id: p.id })}/>)}
Nouveautés
{nouveau.slice(0, 8).map(p => onNav("product", { id: p.id })}/>)}
Catalogue completToutes nos références
Garantie 2 ansSur toutes les marques
Showroom Manouba44 Av. Habib Bougatfa
93 664 935Lun–Sam · Dim matin
onNav('home')}>Accueil
{path.map((n, i) => (
{i === path.length - 1
? {n.name}
: onNav('cat', { cat: n.slug })}>{n.name}}
))}
{node.name}
{!isLeaf && `${subs.length} sous-catégorie${subs.length > 1 ? 's' : ''} · `} {all.length} produit{all.length === 1 ? '' : 's'}
{siblings.slice(0, 6).map(c => (
))}
)}
{subs.map(s => (
))}
)}
{/* Filters */}
{/* Grid */}
{items.length === 0 ? (
{items.length} produits trouvés
{brands.size > 0 && · {[...brands].join(', ')}}
Aucun produit ne correspond
Ajustez vos filtres pour élargir la recherche.
{items.map(p => onNav('product', { id: p.id })}/>)}
) : (
{items.map(p => onNav('product', { id: p.id })}/>)}
)}
{p.marque} · {cat?.nom} · Réf {p.ref}
{p.nom}
{p.note ? (
onNav('home')}>Accueil
Recherche
Résultats pour « {q} »
{loading ? 'Recherche en cours…' : `${items.length} produit${items.length === 1 ? '' : 's'} trouvé${items.length === 1 ? '' : 's'}`}
Aucun produit trouvé
Essayez une orthographe différente ou parcourez onNav('home')} className="ws-link">tous les rayons.
{items.map(p => onNav('product', { id: p.id })}/>)}
)}
{sc.name}
{sc.parentName}
{sc.products.slice(0, perRow).map(p => (
onNav('product', { id: p.id })}/>
))}
Rayons
{rayons.length} rayon{rayons.length > 1 ? 's' : ''} en vedette
{rayons.map(c => {
const subCount = (c.children || []).length;
const leafSlugs = collectLeafSlugs(c);
const productCount = products.filter(p => leafSlugs.has(p.cat)).length;
return (
{ e.preventDefault(); onNav('cat', { cat: c.slug }); }}
href={`#/cat/${c.slug}`}>
{c.name}
{c.parentName}
{subCount > 0 && ` · ${subCount} sous-catégorie${subCount > 1 ? 's' : ''}`}
{productCount > 0 && ` · ${productCount} produits`}
onNav('home')}>Accueil
Nos marques
Nos marques
{brands.length} marque{brands.length > 1 ? 's' : ''} référencée{brands.length > 1 ? 's' : ''}Aucune marque pour le moment
Les marques apparaîtront ici dès que des produits seront ajoutés au catalogue.
{brands.map(b => {
const m = meta[b.name] || {};
return (
{ e.preventDefault(); onNav('brand', { brand: b.name }); }}
href={`#/brand/${encodeURIComponent(b.name)}`}>
)}
{m.logo
? 
: }
{b.name}
{b.count} produit{b.count > 1 ? 's' : ''}
);
})}
{meta?.logo
? 
: }
{brand}
{products.length} produit{products.length > 1 ? 's' : ''} référencé{products.length > 1 ? 's' : ''}
{meta?.description &&{meta.description}
}Aucun produit pour cette marque
{slug === '__nocat__' ? 'Sans catégorie' : labelFor(slug)}
{groups[slug].length} produit{groups[slug].length > 1 ? 's' : ''}
{groups[slug].map(p => (
onNav('product', { id: p.id })}/>
))}