/* global React, I, S */
/* Pamp — Client (User) portal */
const U_NAV = [
{ key: "dashboard", label: "Home", icon: I.dashboard },
{ key: "discover", label: "Discover", icon: I.sparkle },
{ key: "bookings", label: "My bookings", icon: I.bookings, badge: "3" },
{ key: "favorites", label: "Favorites", icon: I.heart },
{ key: "notifications", label: "Notifications", icon: I.bell, badge: "3" },
{ key: "wallet", label: "Wallet", icon: I.wallet },
{ key: "plan", label: "My plan", icon: I.crown },
{ key: "influencer", label: "Pamp Program", icon: I.gift },
{ key: "reports", label: "Reports", icon: I.chart },
{ section: "Account" },
{ key: "support", label: "Help & support", icon: I.help },
{ key: "settings", label: "Settings", icon: I.settings },
];
function UserApp({ collapsed, onToggle, onTheme, theme, onExit, session, onNavigate, currentPage }) {
const page = currentPage || "dashboard";
const setPage = onNavigate;
const userId = session?.user?.id;
const profile = session?.profile;
return (
Sign out
}
/>
setPage("bookings")}>
}
/>
{page === "dashboard" &&
);
}
/* ====================================================================
USER — HOME (wired)
==================================================================== */
function UserHome({ userId, profile, onNav }) {
const [bookings, setBookings] = React.useState(null);
const [favorites, setFavorites] = React.useState(null);
React.useEffect(() => {
if (!userId) return;
let alive = true;
Promise.all([
SB.getUserBookings(userId),
SB.getUserFavorites(userId),
]).then(([b, f]) => {
if (!alive) return;
setBookings(b || []);
setFavorites(f || []);
});
return () => { alive = false; };
}, [userId]);
if (bookings === null || favorites === null) {
return
;
}
const now = Date.now();
const upcoming = bookings
.filter(b => b.status !== "cancelled" && b.status !== "completed" && b.status !== "no_show")
.filter(b => {
const t = new Date(`${b.booking_date}T${b.start_time || "00:00"}`).getTime();
return t >= now - 60 * 60 * 1000;
})
.sort((a, b) => {
const ta = new Date(`${a.booking_date}T${a.start_time || "00:00"}`).getTime();
const tb = new Date(`${b.booking_date}T${b.start_time || "00:00"}`).getTime();
return ta - tb;
});
const past = bookings.filter(b => b.status === "completed");
const next = upcoming[0] || null;
const totalSpent = past.reduce((s, b) => s + Number(b.total_price || 0), 0);
const firstName = (profile?.full_name || "").split(" ")[0] || "there";
const greeting = (() => {
const h = new Date().getHours();
if (h < 12) return "Good morning";
if (h < 18) return "Good afternoon";
return "Good evening";
})();
const today = new Date().toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" });
let subtitle = "Browse vendors or book a service to get started.";
if (next) {
const dt = new Date(`${next.booking_date}T${next.start_time || "00:00"}`);
const mins = Math.round((dt.getTime() - now) / 60000);
if (mins < 0) subtitle = `Your appointment with ${next.vendor_profiles?.business_name || "your vendor"} is happening now.`;
else if (mins < 60) subtitle = `Your next appointment starts in ${mins} min. Tea before you go.`;
else if (mins < 60 * 24) subtitle = `Your next appointment is in ${Math.round(mins / 60)} hours.`;
else subtitle = `Your next appointment is on ${window.fmtDate(next.booking_date)}.`;
}
return (
{today}
{greeting}, {firstName}.
{subtitle}
{profile?.city &&
{next ? <>
Next appointment
}>{window.statusLabel(next.status)}
{next.vendor_profiles?.business_name || "Your vendor"}{next.services?.name || "Service"}
{next.vendor_profiles?.city &&
}
onNav?.("bookings")}>All bookings
: <>
No upcoming appointments
Ready to book yournext experience?
Browse top-rated vendors and book in seconds.
}
Bookings
{bookings.length}
{upcoming.length} upcoming · {past.length} completed
onNav?.("bookings")}>View all
Favorites
{favorites.length}
Saved vendors
onNav?.("favorites")}>Browse
Total spent
{window.fmtMoney(totalSpent)}
Across {past.length} completed booking{past.length === 1 ? "" : "s"}
Recent activity
Your bookings
onNav?.("bookings")} iconRight={
{bookings.length === 0 ? (
}
title="No bookings yet"
sub="Book your first appointment to see it here."
action={
} onClick={() => onNav?.("discover")}>Discover vendors}
/>
) : (
Vendor
Service
When
Status
Price
{bookings.slice(0, 5).map(b => (
{b.services?.name || "—"}
{window.fmtDate(b.booking_date)}
{window.fmtTime(b.start_time)}
{window.statusLabel(b.status)} {window.fmtMoney(b.total_price)}
))}
)}
);
}
/* ====================================================================
USER — DISCOVER
==================================================================== */
function UserDiscover({ userId }) {
const toast = window.useToast();
const [cat, setCat] = React.useState("All");
const [searchInput, setSearchInput] = React.useState("");
const search = window.useDebounce(searchInput, 250);
const [vendors, setVendors] = React.useState(null);
const [favorites, setFavorites] = React.useState(new Set());
const [reloadKey, setReloadKey] = React.useState(0);
const [flow, setFlow] = React.useState(null);
const closeFlow = () => setFlow(null);
React.useEffect(() => {
let alive = true;
setVendors(null);
Promise.all([
SB.getActiveVendors(),
userId ? SB.getUserFavorites(userId) : Promise.resolve([]),
]).then(([v, f]) => {
if (!alive) return;
setVendors(v || []);
const favSet = new Set();
(f || []).forEach(item => {
const id = item.vendor_profiles?.id;
if (id) favSet.add(id);
});
setFavorites(favSet);
});
return () => { alive = false; };
}, [userId, reloadKey]);
if (vendors === null) return
;
// Build category list from real data
const catCounts = vendors.reduce((m, v) => {
const c = v.category || "Other";
m[c] = (m[c] || 0) + 1;
return m;
}, {});
const cats = ["All", ...Object.keys(catCounts).sort()];
// Filter
let visible = vendors;
if (cat !== "All") visible = visible.filter(v => (v.category || "Other") === cat);
if (search) {
const q = search.toLowerCase();
visible = visible.filter(v =>
(v.business_name || "").toLowerCase().includes(q) ||
(v.city || "").toLowerCase().includes(q) ||
(v.category || "").toLowerCase().includes(q)
);
}
const toggleFavorite = async (e, vendorId) => {
e.stopPropagation();
if (!userId) { toast.error("Sign in to save favorites"); return; }
const isFav = favorites.has(vendorId);
try {
if (isFav) {
const { error } = await SB.client.from("favorites").delete().eq("user_id", userId).eq("vendor_id", vendorId);
if (error) { toast.error("Couldn't unfavorite"); return; }
setFavorites(curr => { const n = new Set(curr); n.delete(vendorId); return n; });
} else {
const { error } = await SB.client.from("favorites").insert({ user_id: userId, vendor_id: vendorId });
if (error) { toast.error("Couldn't favorite"); return; }
setFavorites(curr => { const n = new Set(curr); n.add(vendorId); return n; });
}
} catch (err) {
toast.error(err.message || "Failed");
}
};
// Adapt a Supabase vendor row into the shape the design-pack modals expect.
// The modals read: vendor.name, vendor.tagline, vendor.dist, vendor.rating,
// vendor.gallery (array of strings), vendor.services[].duration (string),
// vendor.services[].price, vendor.staff (array).
const adaptVendorForModal = (v) => {
const services = (v.services || []).map(s => ({
...s,
// Preserve real DB id so we can reference it on insert
_dbId: s.id,
name: s.name || "Service",
price: Number(s.price || 0),
duration: formatMins(s.duration_mins || 60),
duration_mins: s.duration_mins || 60,
}));
const gallery = [v.cover_image_url, v.logo_url].filter(Boolean);
return {
...v,
name: v.business_name || "Vendor",
tagline: v.tagline || "",
dist: v.city || "",
rating: v.rating != null ? Number(v.rating).toFixed(1) : "—",
gallery: gallery.length ? gallery : ["vendor photo"],
services,
staff: [], // staff feature not yet in DB
// Keep originals so submitBooking can reference vendor.id, services[i]._dbId
_vendorRow: v,
};
};
const openBookingFlow = (v) => {
if (!userId) { toast.error("Sign in to book a service"); return; }
setFlow({ step: "select", vendor: v, modalVendor: adaptVendorForModal(v) });
};
// Convert a calendar Date + "HH:MM AM" time string to ISO date + 24h time.
const buildDateTime = (date, timeStr) => {
if (!date || !timeStr) return { booking_date: null, start_time: null };
const d = new Date(date);
const yyyy = d.getFullYear();
const mm = String(d.getMonth() + 1).padStart(2, "0");
const dd = String(d.getDate()).padStart(2, "0");
const booking_date = `${yyyy}-${mm}-${dd}`;
// Parse "10:30 AM" / "2:00 PM" / "14:00"
const cleaned = String(timeStr).trim();
let h = 0, m = 0;
const ampm = cleaned.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
const h24 = cleaned.match(/^(\d{1,2}):(\d{2})$/);
if (ampm) {
h = parseInt(ampm[1], 10) % 12;
if (/PM/i.test(ampm[3])) h += 12;
m = parseInt(ampm[2], 10);
} else if (h24) {
h = parseInt(h24[1], 10);
m = parseInt(h24[2], 10);
}
const start_time = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:00`;
return { booking_date, start_time };
};
// Add minutes to "HH:MM:00" and return the new "HH:MM:00"
const addMinutes = (timeStr, mins) => {
const [h, m] = timeStr.split(":").map(Number);
const total = h * 60 + m + mins;
return `${String(Math.floor(total / 60) % 24).padStart(2, "0")}:${String(total % 60).padStart(2, "0")}:00`;
};
const submitBooking = async () => {
if (!flow) return;
if (!userId) { toast.error("Sign in to book a service"); return; }
const vendor = flow.vendor;
const services = flow.services || [];
if (services.length === 0) { toast.error("Pick a service first"); return; }
const { booking_date, start_time } = buildDateTime(flow.date, flow.time);
if (!booking_date || !start_time) { toast.error("Pick a date and time"); return; }
// Create one booking row per selected service, staggered by duration.
// We call the SECURITY DEFINER RPC `create_my_booking` to bypass any
// RLS friction on the bookings table.
let cursor = start_time;
const created = [];
for (const svc of services) {
const dur = svc.duration_mins || (svc.duration ? parseDur(svc.duration) : 60);
const { data, error } = await SB.client.rpc("create_my_booking", {
p_vendor_id: vendor.id,
p_service_id: svc._dbId || svc.id,
p_booking_date: booking_date,
p_start_time: cursor,
p_total_price: Number(svc.price || 0),
p_status: "pending",
});
if (error) {
toast.error(`Couldn't create booking: ${error.message}`);
return;
}
created.push(data);
cursor = addMinutes(cursor, dur);
}
// Fire confirmation email (fire-and-forget, won't block on failure)
SB.emailBookingCreated({
bookings: created,
vendor: { id: vendor.id, name: vendor.business_name, email: vendor.contact_email || vendor.owner_email },
client: { id: userId },
when: { date: booking_date, time: start_time },
}).catch(() => {});
toast.success(`Booked! ${created.length} appointment${created.length === 1 ? "" : "s"} created.`);
setFlow((f) => ({ ...f, step: "success", bookings: created }));
};
// Local helpers - keep self-contained so we don't depend on modal internals.
const formatMins = (min) => {
if (!min) return "";
const h = Math.floor(min / 60), m = min % 60;
if (h && m) return `${h}h ${m}m`;
if (h) return `${h}h`;
return `${m} min`;
};
const parseDur = (str = "") => {
let total = 0;
const h = str.match(/(\d+)\s*h/i); if (h) total += parseInt(h[1]) * 60;
const m = str.match(/(\d+)\s*m/i); if (m) total += parseInt(m[1]);
return total || 60;
};
const tonForCat = (c) => {
if (!c) return "";
const lower = c.toLowerCase();
if (lower.includes("hair") || lower.includes("color")) return "accent";
if (lower.includes("spa") || lower.includes("massage")) return "info";
if (lower.includes("nail")) return "warn";
return "pos";
};
return (
{cats.map((c) => (
setCat(c)}
className={cat === c ? "btn btn-primary btn-sm" : "btn btn-outline btn-sm"}
>{c}{c !== "All" && ({catCounts[c]}) }
))}
{visible.length === 0 ? (
}
title={search || cat !== "All" ? "No vendors match" : "No vendors yet"}
sub={search || cat !== "All" ? "Try a different search or category." : "Vendors will appear here once they sign up."}
/>
) : (
{visible.map((v) => {
const isFav = favorites.has(v.id);
const fromPrice = v.services?.length
? Math.min(...v.services.map(s => Number(s.price || 0)).filter(p => p > 0))
: null;
return (
openBookingFlow(v)}>
{v.cover_image_url || v.logo_url ? (
{ e.target.style.display = "none"; }} />
) : (
{v.business_name}
)}
{v.category && {v.category} }
{v.city && · {v.city} }
{v.business_name}
{v.tagline &&
{v.tagline}
}
toggleFavorite(e, v.id)}>
{v.rating != null && <>
{Number(v.rating).toFixed(1)}
}
{v.total_reviews ? ({v.total_reviews}) : null}
{v.services?.length || 0} service{v.services?.length === 1 ? "" : "s"}
{fromPrice !== null && fromPrice > 0
? from {window.fmtMoney(fromPrice)}
:
);
})}
)}
setFlow((f) => ({ ...f, step: "calendar", services, serviceIndices, staff }))
}
/>
setFlow((f) => ({ ...f, step: "select" }))}
onContinue={({ date, time }) =>
setFlow((f) => ({ ...f, step: "details", date, time }))
}
/>
setFlow((f) => ({ ...f, step: "calendar" }))}
onPay={submitBooking}
/>
);
}
/* ====================================================================
USER — BOOKINGS
==================================================================== */
function UserBookings({ userId }) {
const toast = window.useToast();
const [tab, setTab] = React.useState("upcoming");
const [bookings, setBookings] = React.useState(null);
const [reloadKey, setReloadKey] = React.useState(0);
React.useEffect(() => {
if (!userId) return;
let alive = true;
setBookings(null);
SB.getUserBookings(userId).then(b => { if (alive) setBookings(b || []); });
return () => { alive = false; };
}, [userId, reloadKey]);
if (bookings === null) return
;
// Categorize
const now = Date.now();
const upcoming = bookings.filter(b => {
if (b.status === "cancelled" || b.status === "completed" || b.status === "no_show") return false;
const t = new Date(`${b.booking_date}T${b.start_time || "00:00"}`).getTime();
return t >= now - 60 * 60 * 1000;
});
const past = bookings.filter(b => b.status === "completed");
const cancelled = bookings.filter(b => b.status === "cancelled" || b.status === "no_show");
const visible = tab === "upcoming" ? upcoming : tab === "past" ? past : cancelled;
const cancelBooking = async (id) => {
if (!confirm("Cancel this booking? You may be subject to your vendor's cancellation policy.")) return;
const ok = await SB.updateBookingStatus(id, "cancelled");
if (!ok) { toast.error("Could not cancel"); return; }
toast.success("Booking cancelled");
setReloadKey(k => k + 1);
};
return (
{[
{ k: "upcoming", l: "Upcoming", n: upcoming.length },
{ k: "past", l: "Past", n: past.length },
{ k: "cancelled", l: "Cancelled", n: cancelled.length },
].map(t => (
setTab(t.k)}
style={{
padding: "12px 18px", fontSize: 13, fontWeight: 500,
color: tab === t.k ? "var(--ink)" : "var(--ink-3)",
borderBottom: `2px solid ${tab === t.k ? "var(--ink)" : "transparent"}`,
}}>
{t.l} {t.n}
))}
{visible.length === 0 ? (
}
title={tab === "upcoming" ? "No upcoming bookings" : tab === "past" ? "No past bookings yet" : "No cancellations"}
sub={tab === "upcoming" ? "Book a service to see it here." : tab === "past" ? "Completed bookings will appear here." : "Cancelled bookings show up here."}
/>
) : (
{visible.map((b) => {
const isUpcoming = tab === "upcoming";
return (
{b.vendor_profiles?.business_name?.slice(0, 2).toUpperCase() || "—"}
{window.statusLabel(b.status)}
{window.fmtDate(b.booking_date)} · {window.fmtTime(b.start_time)}
{b.vendor_profiles?.business_name || "—"}
{b.services?.name || "Service"} · {b.services?.duration_mins || 60} min
{b.vendor_profiles?.city &&
}
{window.fmtMoney(b.total_price)}
total
{isUpcoming ? <>
cancelBooking(b.id)} style={{ color: "var(--neg)" }}>Cancel
: tab === "past" ? <>
Details
: null}
);
})}
)}
);
}
/* ====================================================================
USER — WALLET
==================================================================== */
function UserWallet() {
return (
Available balance
$248.40
≈ 4 average bookings
Spent this year
$1,824
+12%
vs last year
Loyalty
Gold
3 visits to Platinum
Date Detail Method Amount
{[
{ d: "Feb 2", t: "Maison Color & Co. — Full color", m: "Visa ····2118", a: -184, tone: "neg" },
{ d: "Feb 1", t: "Top-up", m: "Apple Pay", a: 100, tone: "pos" },
{ d: "Jan 28", t: "Forest Spa — Deep tissue", m: "Wallet", a: -142, tone: "neg" },
{ d: "Jan 24", t: "Cut & Co Barber", m: "Visa ····2118", a: -38, tone: "neg" },
{ d: "Jan 18", t: "Loyalty bonus", m: "Pamp credit", a: 25, tone: "pos" },
].map((r, i) => (
{r.d}
{r.t}
{r.m}
{r.a > 0 ? "+" : "−"}${Math.abs(r.a).toLocaleString()}
))}
);
}
/* Card-style payment method tiles */
function PaymentCardTile({ brand, num, name, exp, tone = "ink", isDefault, onMakeDefault }) {
const palettes = {
ink: { bg: "var(--ink)", fg: "white", accent: "var(--accent)" },
accent: { bg: "linear-gradient(135deg, oklch(38% 0.05 145) 0%, oklch(28% 0.08 145) 100%)", fg: "white", accent: "var(--accent)" },
};
const p = palettes[tone];
return (
{!isDefault ? (
Make default
) : Primary card }
);
}
function ApplePayTile({ isDefault, onMakeDefault }) {
return (
Apple Pay
iPhone 15 Pro · Touch ID
Touch ID
Auto-fill
{!isDefault ? (
Make default
) : Primary method }
);
}
/* ====================================================================
USER — FAVORITES + NOTIFICATIONS
==================================================================== */
function UserFavorites({ userId, onNav }) {
const toast = window.useToast();
const [favorites, setFavorites] = React.useState(null);
const [reloadKey, setReloadKey] = React.useState(0);
React.useEffect(() => {
if (!userId) return;
let alive = true;
setFavorites(null);
SB.getUserFavorites(userId).then(f => { if (alive) setFavorites(f || []); });
return () => { alive = false; };
}, [userId, reloadKey]);
if (favorites === null) return
;
const remove = async (vendorId) => {
const { error } = await SB.client.from("favorites").delete().eq("user_id", userId).eq("vendor_id", vendorId);
if (error) { toast.error("Couldn't unfavorite"); return; }
toast.success("Removed from favorites");
setReloadKey(k => k + 1);
};
return (
{favorites.length === 0 ? (
}
title="No favorites yet"
sub="Tap the heart on any vendor to save them here."
action={
} onClick={() => onNav?.("discover")}>Discover vendors}
/>
) : (
{favorites.map((item) => {
const v = item.vendor_profiles;
if (!v) return null;
return (
{v.logo_url ? (
{ e.target.style.display = "none"; }} />
) : (
{v.business_name}
)}
{v.city || ""}
remove(v.id)} aria-label="Remove favorite">
{v.business_name}
{v.rating != null ? (
onNav?.("discover")}>Book
);
})}
)}
);
}
function UserNotifications({ userId }) {
const toast = window.useToast();
const [items, setItems] = React.useState(null);
const [filter, setFilter] = React.useState("all");
const [reloadKey, setReloadKey] = React.useState(0);
React.useEffect(() => {
if (!userId) return;
let alive = true;
setItems(null);
SB.client
.from("notifications")
.select("*")
.eq("user_id", userId)
.order("created_at", { ascending: false })
.limit(100)
.then(({ data }) => { if (alive) setItems(data || []); });
return () => { alive = false; };
}, [userId, reloadKey]);
if (items === null) return
;
const counts = {
all: items.length,
unread: items.filter(n => !n.read).length,
};
const filtered = filter === "all"
? items
: filter === "unread"
? items.filter(n => !n.read)
: items;
// Group by date bucket (Today / Yesterday / Earlier)
const today = new Date(); today.setHours(0, 0, 0, 0);
const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
const groups = filtered.reduce((acc, n) => {
const d = new Date(n.created_at);
const bucket = d >= today ? "Today" : d >= yesterday ? "Yesterday" : "Earlier";
(acc[bucket] = acc[bucket] || []).push(n);
return acc;
}, {});
const markAllRead = async () => {
const unread = items.filter(n => !n.read).map(n => n.id);
if (unread.length === 0) return;
const { error } = await SB.client.from("notifications").update({ read: true }).in("id", unread);
if (error) { toast.error("Couldn't mark read"); return; }
toast.success(`Marked ${unread.length} as read`);
setReloadKey(k => k + 1);
};
const markOneRead = async (id) => {
const { error } = await SB.client.from("notifications").update({ read: true }).eq("id", id);
if (error) return;
setReloadKey(k => k + 1);
};
return (
0 && <>
{counts.unread} unread notification{counts.unread === 1 ? "" : "s"}
Tap any notification to mark it read.
)}
{[
{ k: "all", l: "All", c: counts.all },
{ k: "unread", l: "Unread", c: counts.unread },
].map((f) => (
setFilter(f.k)}
className={`btn btn-sm ${filter === f.k ? "btn-primary" : "btn-outline"}`}>
{f.l}
{f.c}
))}
{Object.keys(groups).length === 0 ? (
{bucket}
{list.length} {list.length === 1 ? "notification" : "notifications"}
{list.map((n, i) => (
))
)}
);
}
function NotifRow({ n, isLast, onMarkRead }) {
const tone = n.tone || "info";
return (
!n.read && onMarkRead?.(n.id)}
style={{
padding: "18px 20px",
borderBottom: isLast ? "none" : "1px solid var(--border)",
gap: 16, position: "relative",
background: n.read ? "transparent" : "var(--surface-2)",
cursor: !n.read ? "pointer" : "default",
}}>
{!n.read &&
}
{window.fmtDateTime(n.created_at)}
}>View payout}
/>
{/* hero */}
Status · Gold ambassador
$1,248.40 earned this year
Your link drove 84 bookings across 12 vendors. Next tier (Platinum ) unlocks 15% rev share + early access.
How payouts work
Tier progress
{[
{ tier: "Silver", at: 0, done: true },
{ tier: "Gold", at: 50, done: true, current: true },
{ tier: "Platinum", at: 80 },
{ tier: "Diamond", at: 100 },
].map((t, i) => (
{t.done ? "✓" : i + 1}
{t.at}%
))}
{/* ───────────── SECTION 1 · Invite friends ───────────── */}
Your invite link
Or send directly
Send invite
Invite tracking
Last 30 days
{[
{ e: "mia@hey.com", s: "Booked", st: "pos", date: "Jan 14" },
{ e: "alex@gmail.com", s: "Joined", st: "info", date: "Jan 9" },
{ e: "sarah@me.com", s: "Pending", st: "warn", date: "Jan 4" },
{ e: "noah@hey.com", s: "Pending", st: "warn", date: "Dec 28" },
].map((r, i, a) => (
{r.e}
{r.date}
{r.s}
))}
{/* ───────────── SECTION 2 · Discount codes ───────────── */}
Redeem a code
Apply
Codes apply to your next eligible booking. Some codes are vendor-specific — usage details show below.
Active codes
2 active · 1 expiring soon
See all
{[
{ code: "WELCOME10", desc: "10% off your first booking", exp: "Expires Mar 30", uses: "1 / 1 use" },
{ code: "PAMPGOLD", desc: "Gold-tier · 15% off facials", exp: "Always active", uses: "4 / unlimited" },
{ code: "FORESTLOVE", desc: "10% off Forest Spa", exp: "Expires Feb 24", uses: "0 / 1 use" },
].map((c, i, a) => (
{c.code}
· {c.uses}
{c.desc}
))}
{/* ───────────── SECTION 3 · Ambassador (payouts, link, perks) ───────────── */}
{/* metric strip */}
{/* perks + link */}
Your share link
Share-ready assets
{["Story · 9:16", "Post · 1:1", "Banner · 16:9"].map((s) => (
{s}
))}
Gold ambassador perks
{[
{ i:
, t: "10% revenue share on every booking" },
{ i:
, t: "Early access to new vendors & launches" },
{ i:
, t: "$15 credit for the friend you invite" },
{ i:
, t: "Featured slot in the Discover feed monthly" },
].map((p, i) => (
{React.cloneElement(p.i, { size: 16 })}
{p.t}
))}
Recent payouts
Statements
Date Period Bookings driven Method Status Amount
{[
{ d: "Feb 1", p: "Jan 2026", n: 14, m: "Pamp credit", s: "Paid", st: "pos", a: 184.20 },
{ d: "Jan 1", p: "Dec 2025", n: 18, m: "PayPal ····42", s: "Paid", st: "pos", a: 248.80 },
{ d: "Dec 1", p: "Nov 2025", n: 12, m: "Pamp credit", s: "Paid", st: "pos", a: 156.40 },
].map((r, i) => (
{r.d}
{r.p}
{r.n}
{r.m}
{r.s} ${r.a.toFixed(2)}
))}
);
}
function PampSectionHead({ num, title, sub }) {
return (
);
}
function InviteStat({ label, value }) {
return (
);
}
/* ====================================================================
USER — SETTINGS
==================================================================== */
function UserSettings({ userId, profile }) {
const toast = window.useToast();
const [data, setData] = React.useState(null);
const [original, setOriginal] = React.useState("");
const [busy, setBusy] = React.useState(false);
const [pwdData, setPwdData] = React.useState({ newPwd: "", confirmPwd: "" });
React.useEffect(() => {
if (!userId) return;
let alive = true;
SB.getProfile(userId).then(p => {
if (!alive) return;
const next = {
full_name: p?.full_name || "",
phone: p?.phone || "",
city: p?.city || "",
email: p?.email || profile?.email || "",
};
setData(next);
setOriginal(JSON.stringify(next));
});
return () => { alive = false; };
}, [userId]);
if (data === null) return
;
const dirty = JSON.stringify(data) !== original;
const set = (k, v) => setData(d => ({ ...d, [k]: v }));
const save = async () => {
setBusy(true);
try {
const { error } = await SB.client
.from("profiles")
.update({
full_name: data.full_name.trim() || null,
phone: data.phone.trim() || null,
city: data.city.trim() || null,
})
.eq("id", userId);
if (error) { toast.error(error.message || "Save failed"); return; }
toast.success("Profile updated");
setOriginal(JSON.stringify(data));
} finally {
setBusy(false);
}
};
const changePassword = async () => {
if (!pwdData.newPwd || pwdData.newPwd.length < 8) { toast.error("Password must be at least 8 characters"); return; }
if (pwdData.newPwd !== pwdData.confirmPwd) { toast.error("Passwords don't match"); return; }
setBusy(true);
try {
const { error } = await SB.client.auth.updateUser({ password: pwdData.newPwd });
if (error) { toast.error(error.message || "Couldn't update password"); return; }
toast.success("Password updated");
setPwdData({ newPwd: "", confirmPwd: "" });
} finally {
setBusy(false);
}
};
return (
setData(JSON.parse(original))} disabled={!dirty || busy}>Discard
Profile
How you appear to vendors.
{data.full_name || "—"}
{data.email}
Full name
set("full_name", e.target.value)} placeholder="Your name" />
Phone
City
Email
Email changes require admin support.
Change password
You'll stay signed in on this device.
New password
Confirm new password
{busy ? "Saving…" : "Update password"}
);
}
window.UserInfluencer = UserInfluencer;
window.UserSettings = UserSettings;
/* ====================================================================
USER — REPORTS
==================================================================== */
function UserReports({ userId }) {
const [bookings, setBookings] = React.useState(null);
React.useEffect(() => {
if (!userId) return;
let alive = true;
SB.getUserBookings(userId).then(b => { if (alive) setBookings(b || []); });
return () => { alive = false; };
}, [userId]);
if (bookings === null) return
;
const completed = bookings.filter(b => b.status === "completed");
const totalSpent = completed.reduce((s, b) => s + Number(b.total_price || 0), 0);
const avgPerVisit = completed.length ? totalSpent / completed.length : 0;
// Distinct vendors visited
const vendorMap = {};
completed.forEach(b => {
const name = b.vendor_profiles?.business_name;
if (!name) return;
vendorMap[name] = vendorMap[name] || { name, count: 0, spent: 0 };
vendorMap[name].count += 1;
vendorMap[name].spent += Number(b.total_price || 0);
});
const topVendors = Object.values(vendorMap).sort((a, b) => b.count - a.count).slice(0, 5);
// Spend by month - last 12 months
const now = new Date();
const monthBuckets = [];
const monthLabels = [];
for (let i = 11; i >= 0; i--) {
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
monthBuckets.push(0);
monthLabels.push(d.toLocaleDateString("en-US", { month: "short" }));
}
completed.forEach(b => {
const d = new Date(b.booking_date);
const monthsAgo = (now.getFullYear() - d.getFullYear()) * 12 + (now.getMonth() - d.getMonth());
if (monthsAgo >= 0 && monthsAgo < 12) {
monthBuckets[11 - monthsAgo] += Number(b.total_price || 0);
}
});
// Service categories
const serviceMap = {};
completed.forEach(b => {
const name = b.services?.name;
if (!name) return;
serviceMap[name] = (serviceMap[name] || 0) + 1;
});
const topServices = Object.entries(serviceMap)
.map(([name, count]) => ({ name, count }))
.sort((a, b) => b.count - a.count)
.slice(0, 5);
return (
Spending
By month \u00b7 last 12 months
{totalSpent === 0 ? (
No completed bookings yet
) : (
)}
Loyalty
Top vendors
{topVendors.length === 0 ? (
No data yet
) : (
{topVendors.map((v, i) => {
const max = topVendors[0].count;
const pct = (v.count / max) * 100;
return (
{v.name}
{v.count} \u00b7 {window.fmtMoney(v.spent)}
);
})}
)}
Habits
Most booked services
{topServices.length === 0 ? (
No completed services yet
) : (
{topServices.map((s, i) => {
const max = topServices[0].count;
const pct = (s.count / max) * 100;
return (
{s.name}
{s.count} {s.count === 1 ? "booking" : "bookings"}
);
})}
)}
);
}
window.UserReports = UserReports;
/* ====================================================================
USER — MY PLAN
==================================================================== */
function UserPlan({ userId }) {
const [plans, setPlans] = React.useState(null);
React.useEffect(() => {
let alive = true;
SB.adminGetPlans(null).then(p => {
if (!alive) return;
// Filter to user-facing plans
const filtered = (p || []).filter(plan => (plan.audience || "user") === "user" && plan.is_active !== false);
setPlans(filtered);
});
return () => { alive = false; };
}, [userId]);
if (plans === null) return
;
return (
Current plan
Free tier
You're on the free Pamp plan. Upgrade for member perks and discounts.
{plans.length === 0 ? (
}
title="No paid plans available yet"
sub="Pamp memberships are coming soon. Check back in a bit."
/>
) : (
<>
Available plans
{plans.map(p => {
const features = Array.isArray(p.features) ? p.features : (p.features ? Object.values(p.features) : []);
const price = Number(p.price || 0);
return (
{price === 0 ? "Free" : window.fmtMoney(price)}
{price > 0 && /{p.duration === "Annual" ? "yr" : "mo"} }
{features.length === 0
? No features listed.
: features.map((f, i) => (
))}
Coming soon
);
})}
)}
Plan subscriptions and billing are still being wired up. You can browse plans here, but you can't subscribe yet.
{" "}This will be enabled in a future phase.
);
}
{ e.target.style.display = "none"; }} />
) : (