/* ─── Seller Panel — shared chrome: Sidebar + Topbar + Page header ───────── Every screen renders inside so the layout is consistent and the brand visuals live in exactly one place. */ /* Brand logo — uses the real PNG asset so it matches the production mark */ const Logo = ({ size = 32, white = false, className = '' }) => ( Review Buddie ); /* Pixel icons for the sidebar */ const NavIcons = { dashboard: ( ), analytics: ( ), product: ( ), promotion: ( ), campaign: ( ), inbox: ( ), inserts: ( ), customers: ( ), book: ( ), gift: ( ), settings: ( ), logout: ( ), }; const NAV = [ { id:'dashboard', label:'Dashboard', icon:'dashboard' }, { id:'products', label:'Products', icon:'product', step:1 }, { id:'promotions',label:'Promotions', icon:'promotion', step:2 }, { id:'campaigns', label:'Campaigns', icon:'campaign', step:3 }, { id:'claims', label:'Claim Center', icon:'inbox', needs:'ClaimCenter' }, { id:'customers', label:'Customers', icon:'customers' }, { id:'referrals', label:'Refer & Earn', icon:'gift', needs:'ReferEarn' }, { id:'knowledge', label:'Knowledge Center', icon:'book', needs:'KnowledgeCenter' }, ]; function Sidebar({ active, onNav }) { const isSettings = active === 'settings'; const items = NAV.filter(n => !n.needs || window[n.needs]); const itemCls = (on) => "group w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-150 " + (on ? "bg-white/[0.07] text-white shadow-[inset_0_0_0_1px_rgba(255,255,255,0.08)]" : "text-white/55 hover:text-white hover:bg-white/[0.04]"); return ( ); } /* Help & Support — seller files a ticket; it lands in the Admin Portal support inbox */ function HelpSupport() { const [open, setOpen] = React.useState(false); const [sent, setSent] = React.useState(false); const [cat, setCat] = React.useState('Payouts & rewards'); const [msg, setMsg] = React.useState(''); const [chat, setChat] = React.useState(false); const [chatMsgs, setChatMsgs] = React.useState([]); const [chatDraft, setChatDraft] = React.useState(''); const [typing, setTyping] = React.useState(false); React.useEffect(() => { window.__openHelp = () => setOpen(true); return () => { delete window.__openHelp; }; }, []); const close = () => { setOpen(false); setTimeout(()=>{ setSent(false); setMsg(''); setChat(false); setChatMsgs([]); setChatDraft(''); setTyping(false); }, 300); }; const openAdminInbox = () => { try { localStorage.setItem('rb-admin-route','support'); } catch(e){} window.open('Admin Portal.html','_blank'); }; const chatSend = () => { const t = chatDraft.trim(); if(!t) return; setChatMsgs(m=>[...m,{from:'me',txt:t}]); setChatDraft(''); setTyping(true); setTimeout(()=>{ setTyping(false); setChatMsgs(m=>[...m,{from:'agent',txt:m.length<2 ? "Thanks for the details — let me pull up your account. One moment." : "I've flagged this to the right team and left a note on your account — you'll see an update in your inbox shortly. Anything else?"}]); }, 1400); }; if (!open) return null; return ReactDOM.createPortal(
e.stopPropagation()}> {chat ? (
R

Riya · Live support

Online · replies in ~1 min

Hi! I'm Riya from ReviewBuddie support. What can I help you with today?
{chatMsgs.map((m,i)=>( m.from==='me' ?
{m.txt}
:
{m.txt}
))} {typing &&
•••
}
setChatDraft(e.target.value)} onKeyDown={e=>e.key==='Enter'&&chatSend()} placeholder="Type a message…" className="flex-1 bg-surface-input rounded-full px-4 py-2.5 text-[13px] text-ink placeholder:text-ink-soft outline-none focus:bg-white focus:border-brand-200 border border-transparent acc-ring transition"/>
) : sent ? (

We've received your query

Our support team will reply within 48 hours max — you'll get the reply here.

) : ( <>

Help & Support

Quick answers, or message our team — we reply within 48 hours.

{[['Getting started guide','knowledge'],['QR & insert setup','knowledge'],['Billing & invoices','settings'],['Claim page languages','knowledge']].map(([lb,go])=>( ))}

Or leave a message

)}
, document.body); } /* Suggest-a-feature — sellers pitch improvements; rewarded if implemented */ function SuggestFeature() { const [open, setOpen] = React.useState(false); const [sent, setSent] = React.useState(false); const [area, setArea] = React.useState('Dashboard'); const [idea, setIdea] = React.useState(''); const [why, setWhy] = React.useState(''); const close = () => { setOpen(false); setTimeout(()=>{ setSent(false); setIdea(''); setWhy(''); }, 300); }; return ( <> {open && ReactDOM.createPortal(
e.stopPropagation()}> {sent ? (

Idea received!

Our team reviews every suggestion. If we implement yours, you'll get 1 month of Pro free — we'll notify you here and by email.

) : ( <>

Suggest a feature

Help us improve ReviewBuddie. If we like your idea and ship it, you get 1 month of Pro free.

)}
, document.body )} ); } function Topbar() { return (
Welcome back, Demo User
Here's what's happening with your reviews today.
{/* search */}
{/* bell */} {/* avatar */}
); } /* InfoTip — ⓘ hover/click tooltip explaining a section */ function InfoTip({ text, dark=false }) { const [open, setOpen] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { if (!open) return; const h = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, [open]); return ( {text} ); } /* Per-page descriptions shown by the ⓘ next to every page title */ const PAGE_INFO = { 'Dashboard':'Your home base and analytics in one place — live performance, funnel drop-offs, and which products, campaigns and marketplaces earn the most.', 'Products':'All products you collect reviews for. Add a product first — promotions and campaigns are built on top of it.', 'Promotions':'The offers you give customers (gift, cashback, extended warranty…) in exchange for honest feedback.', 'Create Promotion':'Build a new customer offer — pick a type, attach a brand and set what the customer receives.', 'Campaigns':'A campaign connects a promotion to your products and generates the QR code / link customers scan.', 'Add New Campaign':'Link a promotion to one or more products and launch it — you\u2019ll get a QR code and claim page.', 'Add New Product':'Register a product with its marketplace listings so customers can be routed to the right review page.', 'Generate Package Insert':'Design the printed card that goes inside your packaging with the QR code customers scan.', 'Customers':'Everyone who claimed one of your promotions — their contact details, orders and review status.', 'Claim Center':'Incoming customer claims to verify and deliver — approve, reject or fulfil rewards from here.', 'Refer & Earn':'Invite other sellers to ReviewBuddie — you both earn rewards when they join and go active.', 'Knowledge Center':'Guides, videos and articles from the ReviewBuddie team to help you get more from the platform.', 'Settings':'Your account, brands, plan & billing, password and affiliate payout preferences.', }; /* PageHeader — the strip beneath Topbar with breadcrumb/title + right-side action */ function PageHeader({ crumbs, title, action, info }) { const tip = info || PAGE_INFO[title]; return (
{crumbs && crumbs.length > 0 && (
{crumbs.map((c,i) => ( {i > 0 && ›} {c} ))}
)}

{title}

{tip && } {action}
); } /* Primary CTA pill */ const BtnPrimary = ({ children, icon, onClick, type='button', disabled=false }) => ( ); const BtnGhost = ({ children, onClick }) => ( ); /* App shell — wraps everything */ function AppShell({ children, active, onNav }) { React.useEffect(() => { window.__sellerNav = onNav; }, [onNav]); return (
{children}
); } /* Generic small bits */ const Card = ({ children, className='' }) => (
{children}
); const Field = ({ label, hint, children, required }) => ( ); const Input = (props) => ( ); const Select = (props) => (
); /* Icon: edit + trash action buttons used in tables */ const RowActions = ({ onEdit, onDelete }) => (
); const StatusToggle = ({ checked = true, onChange }) => ( ); /* tiny coloured chip */ const Chip = ({ tone = 'brand', children }) => { const map = { brand:'bg-brand-50 text-brand', green:'bg-green-50 text-green-700', amber:'bg-amber-50 text-amber-700', slate:'bg-slate-100 text-slate-600', rose: 'bg-rose-50 text-rose-700', }; return {children}; }; /* Tiny phone preview frame used in Promotion / Campaign create forms */ function PhonePreview({ children, label='Preview' }) { return (
{label}
{children}
); } /* Search row used by list pages */ const SearchInput = ({ placeholder='Search', value, onChange }) => (
); Object.assign(window, { Logo, Sidebar, Topbar, PageHeader, AppShell, SuggestFeature, InfoTip, HelpSupport, BtnPrimary, BtnGhost, Card, Field, Input, Select, RowActions, StatusToggle, Chip, PhonePreview, SearchInput, NAV, });