const { useState: useStateDis, useEffect: useEffectDis, useRef: useRefDis, } = React; // ── helpers ──────────────────────────────────────────────────────────────────── function genSectionKey(title) { return title.toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, ""); } const MODE_LABELS = { auto_general: "Newest overall", auto_category: "Newest in category", manual: "Hand-picked", recently_viewed: "Recently viewed (per user)", }; // ── shared bits (mirrors page-categories.jsx conventions) ───────────────────── const DisModal = ({ title, onClose, children, width = 420 }) => (
{ if (e.target === e.currentTarget) onClose(); }} >
{title}
{children}
); const DisFormField = ({ label, hint, children }) => (
{children} {hint && {hint}}
); const disInputStyle = { padding: "7px 10px", fontSize: 13, borderRadius: 5, border: "1px solid var(--hairline)", background: "var(--surface-2)", color: "var(--ink)", outline: "none", fontFamily: "var(--font-sans)", width: "100%", }; // ── SectionModal: create / edit a home feed section ─────────────────────────── const SectionModal = ({ initial, categories, nextOrder, onSave, onClose }) => { const sb = window.supabaseClient; const I = window.Icons; const [title, setTitle] = useStateDis(initial?.title || ""); const [sectionKey, setSectionKey] = useStateDis(initial?.section_key || ""); const [mode, setMode] = useStateDis(initial?.mode || "auto_general"); const [categorySlug, setCategorySlug] = useStateDis(initial?.category_slug || (categories[0]?.slug ?? "")); const [productLimit, setProductLimit] = useStateDis(initial?.product_limit ?? 8); const [minCount, setMinCount] = useStateDis(initial?.min_count ?? 4); const [isFaves, setIsFaves] = useStateDis(initial?.is_faves ?? false); const [isActive, setIsActive] = useStateDis(initial?.is_active ?? true); const [saving, setSaving] = useStateDis(false); const [err, setErr] = useStateDis(null); // Product picker state — only relevant when mode === "manual". Picks are // held locally and only persisted to home_feed_section_items when the // whole modal is saved, so creating a brand-new section and picking its // products is one motion instead of "save, then reopen to manage picks". const [pickedProducts, setPickedProducts] = useStateDis([]); // [{id, name, images}] const [pickedLoading, setPickedLoading] = useStateDis(!!initial && initial.mode === "manual"); const [query, setQuery] = useStateDis(""); const [results, setResults] = useStateDis([]); const [searching, setSearching] = useStateDis(false); useEffectDis(() => { if (!initial || initial.mode !== "manual") return; sb.from("home_feed_section_items") .select("position, products(id, name, images, status)") .eq("section_id", initial.id) .order("position", { ascending: true }) .then(({ data, error }) => { if (!error && data) setPickedProducts(data.filter(r => r.products).map(r => r.products)); setPickedLoading(false); }); }, [initial?.id]); useEffectDis(() => { const q = query.trim(); if (!q || mode !== "manual") { setResults([]); return; } setSearching(true); const handle = setTimeout(async () => { const { data } = await sb .from("products") .select("id, name, images, status") .eq("status", "active") .ilike("name", `%${q}%`) .limit(15); setResults(data || []); setSearching(false); }, 300); return () => clearTimeout(handle); }, [query, mode]); const pickedIds = new Set(pickedProducts.map(p => p.id)); const addPicked = (product) => { if (pickedIds.has(product.id)) return; setPickedProducts(prev => [...prev, product]); }; const removePicked = (productId) => { setPickedProducts(prev => prev.filter(p => p.id !== productId)); }; const movePicked = (index, dir) => { const other = index + dir; if (other < 0 || other >= pickedProducts.length) return; const next = [...pickedProducts]; [next[index], next[other]] = [next[other], next[index]]; setPickedProducts(next); }; const handleTitleChange = (v) => { setTitle(v); if (!initial) setSectionKey(genSectionKey(v)); }; const handleSubmit = async () => { if (!title.trim() || !sectionKey.trim()) { setErr("Title and key are required."); return; } if (mode === "auto_category" && !categorySlug) { setErr("Pick a category for this mode."); return; } if (mode === "manual" && pickedProducts.length === 0) { setErr("Pick at least one product."); return; } setSaving(true); setErr(null); try { await onSave({ section_key: sectionKey.trim(), title: title.trim(), mode, category_slug: mode === "auto_category" ? categorySlug : null, product_limit: Number(productLimit) || 8, min_count: Number(minCount) || 4, is_faves: isFaves, is_active: isActive, ...(initial ? {} : { display_order: nextOrder }), }, mode === "manual" ? pickedProducts.map(p => p.id) : null); onClose(); } catch (e) { setErr(e.message); } finally { setSaving(false); } }; return (
handleTitleChange(e.target.value)} placeholder="e.g. Dashain Specials" /> setSectionKey(e.target.value)} /> Auto modes are diversified across stores automatically — one seller's upload batch can't fill the row. {mode === "auto_category" && ( )} {mode === "manual" && (
setQuery(e.target.value)} /> {query && setQuery("")} />}
{query && (
{searching ? (
Searching…
) : results.length === 0 ? (
No matches
) : results.map(p => { const added = pickedIds.has(p.id); return (
{p.images?.[0] && }
{p.name}
); })}
)}
Picked ({pickedProducts.length})
{pickedLoading ? (
Loading…
) : pickedProducts.length === 0 ? (
Nothing picked yet — search above to add products.
) : (
{pickedProducts.map((p, i) => (
{p.images?.[0] && }
{p.name}
))}
)}
)}
setProductLimit(e.target.value)} /> setMinCount(e.target.value)} />
setIsFaves(e.target.checked)} />
setIsActive(e.target.checked)} />
{err &&
{err}
}
); }; // ── DiscoveryPage ─────────────────────────────────────────────────────────────── const DiscoveryPage = () => { const I = window.Icons; const sb = window.supabaseClient; const [sections, setSections] = useStateDis([]); const [categories, setCategories] = useStateDis([]); const [loading, setLoading] = useStateDis(true); const [sectionModal, setSectionModal] = useStateDis(null); // null | "new" | row const [deleteTarget, setDeleteTarget] = useStateDis(null); const fetchSections = async () => { const { data, error } = await sb.from("home_feed_sections").select("*").order("display_order"); if (!error && data) setSections(data); setLoading(false); }; useEffectDis(() => { if (!sb) return; fetchSections(); sb.from("store_main_categories").select("slug, name").eq("is_active", true).order("display_order") .then(({ data }) => { if (data) setCategories(data); }); }, []); const swapOrder = async (editingId, oldOrder, newOrder) => { if (oldOrder === newOrder) return; const conflict = sections.find(s => s.id !== editingId && s.display_order === newOrder); if (!conflict) return; const { error } = await sb.from("home_feed_sections").update({ display_order: oldOrder }).eq("id", conflict.id); if (error) throw new Error(error.message || error.error || JSON.stringify(error)); }; const moveSection = async (index, dir) => { const other = index + dir; if (other < 0 || other >= sections.length) return; const a = sections[index], b = sections[other]; await Promise.all([ sb.from("home_feed_sections").update({ display_order: b.display_order }).eq("id", a.id), sb.from("home_feed_sections").update({ display_order: a.display_order }).eq("id", b.id), ]); await fetchSections(); }; // pickedProductIds is non-null only for mode === "manual" — when present, // home_feed_section_items is fully replaced with this list (in order) so // the section row and its hand-picked products save as one atomic-feeling // action from the single modal instead of two separate steps. const saveSection = async (payload, pickedProductIds) => { let sectionId = sectionModal?.id; if (sectionId) { const { error } = await sb.from("home_feed_sections").update(payload).eq("id", sectionId); if (error) throw new Error(error.message || error.error || JSON.stringify(error)); } else { const { data, error } = await sb.from("home_feed_sections").insert(payload).select("id").single(); if (error) throw new Error(error.message || error.error || JSON.stringify(error)); sectionId = data.id; } if (pickedProductIds) { const { error: delErr } = await sb.from("home_feed_section_items").delete().eq("section_id", sectionId); if (delErr) throw new Error(delErr.message || delErr.error || JSON.stringify(delErr)); if (pickedProductIds.length > 0) { const rows = pickedProductIds.map((product_id, i) => ({ section_id: sectionId, product_id, position: i })); const { error: insErr } = await sb.from("home_feed_section_items").insert(rows); if (insErr) throw new Error(insErr.message || insErr.error || JSON.stringify(insErr)); } } await fetchSections(); }; const toggleActive = async (section) => { const { error } = await sb.from("home_feed_sections").update({ is_active: !section.is_active }).eq("id", section.id); if (!error) setSections(ss => ss.map(s => s.id === section.id ? { ...s, is_active: !s.is_active } : s)); }; const handleDelete = async () => { if (!deleteTarget) return; await sb.from("home_feed_sections").delete().eq("id", deleteTarget.id); setDeleteTarget(null); await fetchSections(); }; const nextOrder = sections.length > 0 ? Math.max(...sections.map(s => s.display_order)) + 1 : 0; return (
{loading ? "Loading…" : `${sections.length} sections · ${sections.filter(s => s.is_active).length} active`}

Home Feed Sections

Sections "Made just for you" rows on the home feed
{loading ? (
Loading…
) : sections.length === 0 ? (
No sections yet
) : (
{sections.map((s, i) => ( ))}
Title Source Limit Active
{s.title}
{s.section_key}{s.is_faves ? " · faves style" : ""}
 {MODE_LABELS[s.mode] || s.mode} {s.mode === "auto_category" && s.category_slug ? ` · ${s.category_slug}` : ""} {s.product_limit} toggleActive(s)} > {s.is_active ? "on" : "off"}
)}
{sectionModal && ( setSectionModal(null)} /> )} {deleteTarget && ( setDeleteTarget(null)}>
Delete {deleteTarget.title}? This removes it from the home feed {deleteTarget.mode === "manual" && " along with its hand-picked product list"}. This cannot be undone.
)}
); }; window.DiscoveryPage = DiscoveryPage;