/* Wizards — a marketplace of social-media experts. Users get free tips, best
practices, ideas and short videos; experts publish profiles + bookable
services (booked per job — simulated, no payment). Anyone can publish their
own expert profile. Exposed as window.WizardsView. */
(function () {
const S = window.CroprStore;
const D = window.CROPR_DATA;
const SV = D.WIZARD_SERVICES, CT = D.WIZARD_CONTENT_TYPES;
const fieldStyle = { width: "100%", boxSizing: "border-box", fontFamily: "inherit", fontSize: 13.5, color: "var(--fg1)", background: "var(--surface)", border: "1px solid var(--border-strong)", borderRadius: 10, padding: "9px 11px", outline: "none" };
const Label = ({ children }) => {children} ;
const svc = (id) => SV.find((s) => s.id === id) || { label: id, icon: "tag" };
const ct = (id) => CT.find((t) => t.id === id) || { label: id, icon: "file-text", color: "var(--fg3)" };
const wAvatar = (w, size) => {(w.name || "?").slice(0, 1).toUpperCase()} ;
const Stars = ({ r }) => (
);
const Verified = ({ on }) => on ?
{[{ id: "all", label: "All services" }].concat(SV).map((s) => {
const on = value === s.id;
return onPick(s.id)} style={{ display: "inline-flex", alignItems: "center", gap: 6, border: `1px solid ${on ? "var(--leap-teal)" : "var(--border-strong)"}`, background: on ? "var(--accent-weak)" : "transparent", color: on ? "var(--accent)" : "var(--fg2)", borderRadius: 999, padding: "4px 11px", fontSize: 12, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>{s.icon && s.id !== "all" && ;
})}
);
}
// ---- shared promo banner (Dashboard + Wizards) ------------------------
function WizardBanner({ onExplore, onBecome, showExplore }) {
return (
Wizards give your social media engagement an even bigger leap.
Discover valuable tips and tricks, best practice and video content from our experts, and find and book the experts you need to elevate your social media success — or become a Wizard yourself.
{showExplore !== false && Explore Wizards }
);
}
window.WizardBanner = WizardBanner;
// ---- Discover: free content feed --------------------------------------
function ContentCard({ c, onOpen }) {
const meta = ct(c.type);
return (
onOpen(c)} hover style={{ cursor: "pointer" }}>
{c.type === "video" && c.minutes &&
{c.minutes} min }
FREE
{c.url
? {c.mediaKind === "video" || c.type === "video" ?
:
}{(c.mediaKind === "video" || c.type === "video") &&
}
}
{c.title}
{c.body}
{c.wizardName.slice(0, 1)}
{c.wizardName}
);
}
// ---- Experts directory ------------------------------------------------
function ExpertCard({ w, onOpen }) {
return (
onOpen(w)} hover style={{ cursor: "pointer" }}>
{wAvatar(w, 44)}
{w.name} You }
{w.headline}
{(w.specialties || []).slice(0, 3).map((s) =>
{w.jobs} jobs
from ${w.fromPrice}
);
}
function ExpertModal({ w, onClose, onBook, onToast }) {
if (!w) return null;
return (
{wAvatar(w, 48)}
· {w.jobs} jobs · {w.location}
{w.responseTime &&
}
{w.bio}
{(w.specialties || []).map((s) =>
Services · book per job
{(w.offerings || []).map((o) => (
{o.title}
{o.desc}
{priceStr(o)} {o.duration && · {o.duration} }
{!w.isMe &&
onBook(w, o)}>Request service }
))}
{!(w.offerings || []).length &&
No bookable services listed yet.
}
Free content from {w.name.split(" ")[0]}
{w.content.map((c) => (
{c.title}
{ct(c.type).label}
))}
)}
{(w.showcases || []).length > 0 && (
Showcases
{w.showcases.map((s) =>
{s.kind === "video" ?
:
}
)}
)}
{(w.reviews || []).length > 0 && (
{w.reviews.map((r, i) => { const rm = (D.WIZARD_RATINGS || []).find((x) => x.choice === r.choice); return (
{rm ? {[1, 2, 3, 4, 5].map((n) => }
{r.by}
{r.offering && · {r.offering} }
{r.recommended &&
{r.comment &&
{r.comment}
}
); })}
)}
);
}
function BookModal({ pair, onClose, onToast }) {
const [notes, setNotes] = React.useState("");
const [startDate, setStartDate] = React.useState("");
const [deliveryDate, setDeliveryDate] = React.useState("");
if (!pair) return null;
const { w, o } = pair;
const client = S.getActiveClient();
const me = S.currentMember();
const contact = (me && (me.fullName || me.name)) || S.getCurrentUser();
const company = client ? client.name : ((me && me.company && me.company.name) || "Leap workspace");
const send = () => { S.bookService(w.id, o.id, { jobNotes: notes, startDate, deliveryDate }); onToast(`Request sent to ${w.name} — they'll send an official proposal. (Simulated · no payment yet.)`); onClose(); };
return (
Cancel Send request }>
{wAvatar(w, 36)}
from {priceStr(o)}
Requesting as
{contact}
·
{company}
What do you need? · the brief
{c.url
? {c.mediaKind === "video" || c.type === "video" ?
:
}
}
{c.body}
{c.wizardName.slice(0, 1)}
{c.wizardName}
FREE
);
}
// published Wizards publish free content to Discover
function AddContentModal({ onClose, onToast }) {
const [type, setType] = React.useState("tip");
const [title, setTitle] = React.useState("");
const [body, setBody] = React.useState("");
const [media, setMedia] = React.useState(null);
const onFile = (e) => { const f = (e.target.files || [])[0]; if (!f) return; const r = new FileReader(); r.onload = () => setMedia({ url: r.result, kind: (f.type || "").startsWith("video") ? "video" : "image" }); r.readAsDataURL(f); e.target.value = ""; };
const publish = () => { if (!title.trim()) { onToast("Add a title", "error"); return; } S.addMyContent({ type, title, body, url: media ? media.url : "", mediaKind: media ? media.kind : "" }); onToast("Published to Discover 🎉"); onClose(); };
return (
Cancel Publish }>
Type ({ value: t.id, label: t.label }))} style={{ width: 150 }} />
Title
Body
Media {type === "video" ? "· video" : "· optional image/video"}
{media ? (
{media.kind === "video" ?
:
}
setMedia(null)} style={{ position: "absolute", top: 6, right: 6, width: 22, height: 22, borderRadius: 999, border: 0, background: "rgba(11,59,66,.7)", cursor: "pointer", display: "grid", placeItems: "center" }}>
Upload an image or video
)}
{f.kind === "video" ?
:
}
{f.name}
{uploaderLabel}{f.accepted && · Accepted }
setOpen((o) => !o)} style={{ ...iconBtn, width: "auto", padding: "0 9px", gap: 4, display: "inline-flex", alignItems: "center", fontFamily: "inherit", fontSize: 12, color: "var(--fg2)" }}>
{ S.addAsset({ name: f.name, url: f.url, kind: f.kind, category: "other", keywords: [], platforms: [] }); onToast(`Saved “${f.name}” to Assets`); }} style={iconBtn}>
{!isExpert && !f.accepted && b.status !== "completed" && f.uploadedBy === "expert" &&
{ S.bookingAcceptFile(b.id, f.id); onToast("File accepted"); }}>Accept }
{open && (
{(f.comments || []).map((cm, i) => { const mine = cm.from === mineFrom; return
{cm.from === "system" ? {cm.text} : cm.text}
; })}
{!(f.comments || []).length &&
{isExpert ? "Reply to the client's change requests here." : "Comment to request a change, or accept the file above."}
}
{b.status !== "completed" && (
{ if (e.key === "Enter") sendComment(); }} />
Send
)}
)}
);
}
function RatingBlock({ b, onToast }) {
const [choice, setChoice] = React.useState(1);
const [comment, setComment] = React.useState("");
const [rec, setRec] = React.useState(true);
return (
How was working with {b.wizardName.split(" ")[0]}?
{(D.WIZARD_RATINGS || []).map((r) => { const on = choice === r.choice; return (
setChoice(r.choice)} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, width: 104, padding: "12px 6px", borderRadius: 14, cursor: "pointer", fontFamily: "inherit", border: `1.5px solid ${on ? r.color : "var(--border)"}`, background: on ? r.color + "16" : "var(--surface)" }}>
{r.label}
); })}
{ e.preventDefault(); setRec(!rec); }} style={{ width: 42, height: 24, borderRadius: 999, border: 0, cursor: "pointer", padding: 3, background: rec ? "var(--success)" : "var(--border-strong)", display: "flex", justifyContent: rec ? "flex-end" : "flex-start", transition: "background 160ms" }}>
{ S.bookingRate(b.id, choice, comment, rec); onToast("Thanks — your rating is on their profile"); }}>Submit rating
);
}
// EXPERT feature — compose & send an official proposal with terms + a document
function ProposalComposer({ b, onClose, onToast }) {
const [price, setPrice] = React.useState(b.price ? String(b.price) : "");
const [deliverables, setDeliverables] = React.useState("");
const [startDate, setStartDate] = React.useState(b.startDate || "");
const [endDate, setEndDate] = React.useState(b.deliveryDate || "");
const [vatOn, setVatOn] = React.useState(false);
const [vatPct, setVatPct] = React.useState("20");
const [terms, setTerms] = React.useState("");
const [doc, setDoc] = React.useState(null);
const onFile = (e) => { const f = (e.target.files || [])[0]; if (!f) return; const r = new FileReader(); r.onload = () => setDoc({ name: f.name, url: r.result }); r.readAsDataURL(f); e.target.value = ""; };
const sub = +price || 0; const vat = vatOn ? sub * (+vatPct || 0) / 100 : 0; const total = Math.round((sub + vat) * 100) / 100;
const send = () => {
if (!(+price > 0)) { onToast("Set a price for the proposal", "error"); return; }
S.bookingSendProposal(b.id, { price: +price, deliverables, startDate, endDate, vatEnabled: vatOn, vatPercent: +vatPct || 0, terms, docName: doc ? doc.name : "", docUrl: doc ? doc.url : "" });
onToast("Proposal sent to the client"); onClose();
};
return (
Cancel Send proposal }>
Deliverables
Terms · optional
Proposal document
{doc ? (
{doc.name}
setDoc(null)} style={{ border: 0, background: "none", cursor: "pointer" }}>
) : (
Upload the official proposal (PDF, DOC or image)
)}
Total{vatOn ? ` (incl. ${+vatPct || 0}% VAT)` : ""}
{money(total)}
{l} {v}
;
return (
Close}>
{p.deliverables && Deliverables {p.deliverables}
{p.startDate &&
}
{p.endDate &&
}
{row("Service", money(t.sub))}
{t.vatEnabled && row(`VAT (${t.pct}%)`, money(t.vat))}
Total {money(t.total)}
Attached document
{isImgDoc(p.docName, p.docUrl) &&
}
{isPdf(p.docName, p.docUrl) &&
}
) :
}
);
}
// Accept & confirm → payment. SIMULATED Stripe seam — no real charge is made.
function PaymentModal({ b, onClose, onToast }) {
if (!b) return null;
const t = propTotals(b);
const pay = () => { S.bookingPay(b.id); onToast("Payment confirmed (simulated) — your booking is now in progress"); onClose(); };
return (
Cancel Pay {money(t.total)} }>
Service {money(t.sub)}
{t.vatEnabled &&
VAT ({t.pct}%) {money(t.vat)}
}
Total due {money(t.total)}
stripe
You'll continue to Stripe's secure checkout to pay.
Simulated — no real charge is made. Stripe is wired as a seam; add live keys in Settings → Integrations to process real payments.
{/* perspective switcher — act as either side of the contract & fulfilment */}
Test as
{isExpert ? `You're ${b.wizardName} — the expert` : `You're ${clientName} — the client`}
onOpenWizard(S.getWizard(b.wizardId))} style={{ width: 42, height: 42, borderRadius: 11, background: b.wizardColor, color: "#fff", display: "grid", placeItems: "center", fontSize: 16, fontWeight: 800, flex: "none", cursor: "pointer" }}>{b.wizardName.slice(0, 1)}
{b.offeringTitle}
{b.wizardName}
${b.price.toLocaleString()}{b.unit ? " / " + b.unit : ""}
{b.startDate && Start {fmtD(b.startDate)}Delivery {fmtD(b.deliveryDate)}
{b.jobNotes && Brief: {b.jobNotes}
}
{b.requestor &&
Requested by {b.requestor.contact} · {b.requestor.company}{b.requestor.email ? " · " + b.requestor.email : ""}
}
{/* proposal — expert composes it (requested), client reviews & pays (offered) */}
{b.status === "requested" && isExpert && (
Official proposal
Prepare an official proposal for {clientName} — price, deliverables, dates, VAT and an attached document.
setShowComposer(true)}>Prepare & send proposal
)}
{b.status === "requested" && isClient && waiting(`Waiting for ${expertFirst} to send the official proposal.`)}
{b.status === "offered" && b.proposal && isClient && (
setShowProposal(true)}>View proposal}>Proposal received
{money(t.total)} {t.vatEnabled && incl. {t.pct}% VAT }
{b.proposal.endDate &&
Delivery by {fmtD(b.proposal.endDate)}
}
{b.proposal.docName &&
}
{b.proposal.deliverables && {b.proposal.deliverables}
}
setShowPay(true)}>Accept & pay {money(t.total)}
)}
{b.status === "offered" && b.proposal && isExpert && (
setShowProposal(true)}>View proposal}>Proposal sent
)}
{/* message thread — attributed to the current perspective */}
Messages
{(b.messages || []).map((m, i) => { const mine = m.from === mineFrom; return (
{m.from === "system" ? {m.text} : m.text}
); })}
{ if (e.key === "Enter") sendMsg(); }} />
Send
)}
{/* board — files, per-file chat, accept, download, save-to-assets */}
{boardOpen && (
{(b.files || []).map((f) =>
)}
{!(b.files || []).length &&
{isExpert ? "No files yet — upload the deliverable for the client." : "No files yet — upload references, or wait for the deliverable."}
}
)}
{/* confirmed → client accepts the work; expert waits */}
{b.status === "confirmed" && isClient && (
Happy with the delivery? Accept the work, then rate the collaboration.
{ S.bookingAcceptWork(b.id); onToast("Work accepted — leave a rating"); }}>Accept the work
)}
{b.status === "confirmed" && isExpert && waiting(`Deliverables shared — waiting for ${clientName} to accept the work.`)}
{/* accepted → client rates; expert waits */}
{b.status === "accepted" && isClient &&
}
{b.status === "accepted" && isExpert && waiting(`Work accepted — waiting for ${clientName}'s rating.`)}
{b.status === "completed" && (
Completed · “{b.ratingLabel || "rated"}” {b.recommended &&
{b.ratingComment && "{b.ratingComment}"
}
)}
{showComposer &&
setShowComposer(false)} onToast={onToast} />}
{showProposal && setShowProposal(false)} />}
{showPay && setShowPay(false)} onToast={onToast} />}
);
}
function Bookings({ onToast, onBrowse, onOpenWizard }) {
const [sel, setSel] = React.useState(null);
const bookings = S.getBookings();
const current = sel && bookings.find((b) => b.id === sel);
if (current) return setSel(null)} onToast={onToast} onOpenWizard={onOpenWizard} />;
if (!bookings.length) return (
No bookings yet
Browse experts and book a service per job.
Browse experts
);
return (
{bookings.map((b) => { const sm = BK_STATUS[b.status] || BK_STATUS.requested; const unread = (b.messages || []).length; return (
setSel(b.id)} hover style={{ cursor: "pointer" }}>
{b.wizardName.slice(0, 1)}
{b.offeringTitle}
{b.wizardName}{b.deliveryDate ? " · deliver by " + fmtD(b.deliveryDate) : ""}
${b.price.toLocaleString()}{b.unit ? " / " + b.unit : ""}
{sm.label}
{ e.stopPropagation(); if (confirm("Cancel this booking?")) { S.cancelBooking(b.id); onToast("Booking cancelled"); } }} title="Cancel" style={{ border: 0, background: "none", cursor: "pointer", marginLeft: 4 }}>
); })}
setTab("experts")} onBecome={() => onNav && onNav("settings")} />
{tab === "discover" && (
Free tips, best practices, ideas and short videos from social-media experts.
{myWiz
?
setAddContent(true)}>Add content
:
}
{[{ id: "all", label: "All" }].concat(CT).map((t) => { const on = ctFilter === t.id; return setCtFilter(t.id)} style={{ display: "inline-flex", alignItems: "center", gap: 5, border: `1px solid ${on ? "var(--leap-teal)" : "var(--border-strong)"}`, background: on ? "var(--accent-weak)" : "transparent", color: on ? "var(--accent)" : "var(--fg2)", borderRadius: 999, padding: "5px 12px", fontSize: 12.5, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>{t.icon && t.id !== "all" && ; })}
{feed.map((c) =>
)}
{tab === "experts" && (
{experts.map((w) => No experts in this category yet. }
)}
{tab === "bookings" &&
setTab("experts")} onOpenWizard={setOpenWizard} />}
setOpenWizard(null)} onBook={(w, o) => { setOpenWizard(null); setPair({ w, o }); }} onToast={onToast} />
setPair(null)} onToast={onToast} />
setOpenContent(null)} />
{addContent && setAddContent(false)} onToast={onToast} />}
);
}
window.WizardsView = WizardsView;
})();
}{(c.mediaKind === "video" || c.type === "video") &&