/* =================== PRINT-SHOP OUTREACH =================== */ /* Manage prospects, read their Google profile via AI, attach a mockup, generate the outreach email, preview, edit, and send. */ const { useState: useStateO, useEffect: useEffectO, useRef: useRefO } = React; const OUT_STATUS = { new: { label: "New", cls: "badge--grey" }, previewed: { label: "Previewed", cls: "badge--blue" }, sent: { label: "Sent", cls: "badge--green" }, }; // List order: new on top, previewed next, sent last (stable within each group). const STATUS_RANK = { new: 0, previewed: 1, sent: 2 }; // Quick-pick products → Dynamic Mockups template + smart-object. Blank UUIDs // mean "use the default" (the black tee). Add more products here as needed. const MOCKUP_PRESETS = [ { key: "tshirt", label: "Black t-shirt", icon: "shirt", mockupUuid: "50661cc6-7cbc-488d-bd73-c88144178f24", smartObjectUuid: "04902ff2-6311-4a70-a2d1-32ba0e7ec229" }, { key: "apron", label: "Black apron (men) 2", icon: "box", mockupUuid: "2377dabf-0a8a-4797-a98c-d958d60a7a16", smartObjectUuid: "11116db4-051e-4208-9776-7c1d1ad04951" }, { key: "cap", label: "Men black cap", icon: "box", mockupUuid: "7db1302c-8f09-46ab-8458-efb29c99830e", smartObjectUuid: "d8659646-eba7-4bdd-8494-c895b20be4e5" }, { key: "wcap", label: "Women black cap", icon: "box", mockupUuid: "b18505f2-9af0-4a86-b9e5-f04c2d4e6651", smartObjectUuid: "bf763326-c822-434d-acc2-292d1ff92f4c" }, { key: "apronBlkM", label: "Black apron (men)", icon: "box", mockupUuid: "2de3f6f1-6784-481e-b9b3-dcd4a15ecc4d", smartObjectUuid: "e8dffa89-4745-4435-9efa-b3e7dcebfadf" }, { key: "apronNatM", label: "Natural apron (men)", icon: "box", mockupUuid: "9c928af8-a908-4c6a-943d-56d4efbbd278", smartObjectUuid: "fb2d2c87-af7b-4a1b-b884-5eeb76fe14c3" }, { key: "apronWhtM", label: "White apron (men)", icon: "box", mockupUuid: "cc2b9258-aba9-43e8-9237-36a799149c2a", smartObjectUuid: "01400c27-c724-44a1-b3a7-04c6e6cc5cb2" }, { key: "apronWhtM2", label: "White apron (men) 2", icon: "box", mockupUuid: "ec1f12d0-b0a8-4e83-9a27-579808764316", smartObjectUuid: "fc5ee798-370a-4ac7-b2bb-9df9b728e77f" }, { key: "tridriBlkM", label: "TriDri man black", icon: "shirt", mockupUuid: "55594354-38b9-4eb5-ba22-b18c94afa093", smartObjectUuid: "47bb67df-ad18-4a0e-8d2d-e24b28e26c61" }, { key: "tridriBluM", label: "TriDri man blue", icon: "shirt", mockupUuid: "1536eca8-bb38-4212-925a-ad83c3a0c086", smartObjectUuid: "dbe0abb3-33f1-4c38-b9b8-d1de0fec7fa5" }, { key: "tridriPrpM", label: "TriDri man purple", icon: "shirt", mockupUuid: "071559bb-26da-4a93-a6e8-5994df794321", smartObjectUuid: "c585048d-7ac6-43c7-9594-fad809655697" }, { key: "tridriGrnW", label: "TriDri women green", icon: "shirt", mockupUuid: "f942d99a-25cb-4609-a257-c8fd2dd0de75", smartObjectUuid: "fa371b42-2a81-4ecb-b833-1f0ce0234ecc" }, { key: "tridriKid", label: "TriDri kids", icon: "shirt", mockupUuid: "395321ef-8c41-4bd6-9149-1565d9d5f588", smartObjectUuid: "583c28a5-6071-40e5-8b5f-3d757e0de5fe,a37aff3e-8465-481a-bd90-15c61916a3b4" }, { key: "tridriKidB", label: "TriDri kids blue", icon: "shirt", mockupUuid: "6f171db9-7ea1-4480-b130-cbdc61916580", smartObjectUuid: "8f95dba9-26bc-422b-99b1-012b097f7082" }, { key: "sweatBlk", label: "Sweatshirt black", icon: "shirt", mockupUuid: "477ebb08-8870-4754-9222-c6d440c35709", smartObjectUuid: "76704c6e-ce38-4551-82d3-c4f9c33563ca" }, { key: "hoodieBlk", label: "Hoodie black", icon: "shirt", mockupUuid: "55f15f5c-c802-42ea-964e-f23de0d1ab9b", smartObjectUuid: "4617c7cd-b5ef-4f61-a9f7-5e4ed7f7aa57" }, { key: "hoodieZip", label: "Hoodie full-zip", icon: "shirt", mockupUuid: "534b12a0-60c8-4b4e-ab6c-04ef1f960247", smartObjectUuid: "3c9fea08-6171-4cdc-8646-5d953e256b2a" }, { key: "sweatZip", label: "Sweatshirt zip-neck", icon: "shirt", mockupUuid: "96be2268-eaa0-4cfe-9af1-7c849140793a", smartObjectUuid: "295f06ff-5ac4-4e7a-9340-770719ff3154" }, ]; const DEFAULT_MOCKUP_UUID = "50661cc6-7cbc-488d-bd73-c88144178f24"; const FOLLOWUP_STEPS = [ { step: 1, day: 3, label: "Soft bump" }, { step: 2, day: 7, label: "Use-cases + offer" }, { step: 3, day: 14, label: "Breakup" }, ]; const fmtDate = (ts) => { try { return new Date(ts).toLocaleDateString(undefined, { day: "numeric", month: "short" }); } catch { return ""; } }; function activeProductKey(sel) { const mk = (sel.mockupUuid || "").trim(); const m = MOCKUP_PRESETS.find(p => (p.mockupUuid || DEFAULT_MOCKUP_UUID) === (mk || DEFAULT_MOCKUP_UUID)); return m ? m.key : null; // null = a custom UUID not in the preset list } // Normalise a typed website into an openable URL (prepend https:// if missing). function webHref(u) { const s = String(u || "").trim(); if (!s) return ""; return /^https?:\/\//i.test(s) ? s : "https://" + s; } // Parse a response safely. A proxy (e.g. Cloudflare) can replace an origin 5xx // with an HTML error page; reading that as JSON throws a cryptic // "Unexpected token '<'". This surfaces the real server message or a clean status. async function outJson(r, fallback) { const text = await r.text(); let j = null; try { j = text ? JSON.parse(text) : null; } catch {} if (!r.ok) throw new Error((j && j.error) || ((fallback || "Request failed") + " (" + r.status + ")")); if (j == null) throw new Error((fallback || "Unexpected response") + " (" + r.status + ")"); return j; } function OutreachView({ go, id }) { const [list, setList] = useStateO(null); const [sel, setSel] = useStateO(null); const [busy, setBusy] = useStateO(""); // action in progress const [err, setErr] = useStateO(""); const [editHtml, setEditHtml] = useStateO(false); const [importOpen, setImportOpen] = useStateO(false); const [importText, setImportText] = useStateO(""); const [importing, setImporting] = useStateO(false); const [importProg, setImportProg] = useStateO(""); const [importMsg, setImportMsg] = useStateO(""); // post-import summary (imported / skipped dupes) const [copied, setCopied] = useStateO(false); const [recolorHex, setRecolorHex] = useStateO("#ffffff"); const [q, setQ] = useStateO(""); const [nicheFilter, setNicheFilter] = useStateO(""); // "" = all niches const [importNiche, setImportNiche] = useStateO(""); // tag applied to the batch being imported const fileRef = useRefO(null); const logoRef = useRefO(null); function load() { return fetch("/api/outreach").then(r => r.json()).then(j => setList(j.prospects || [])).catch(e => setErr(e.message)); } useEffectO(() => { load(); }, []); // Open the prospect named in the URL (shareable link) once the list is loaded. useEffectO(() => { if (!id || !list) return; const p = list.find(x => x.id === id); if (p && (!sel || sel.id !== id)) { setSel(p); setEditHtml(false); } }, [id, list]); function select(p) { setSel(p); setEditHtml(false); setCopied(false); if (go) go({ view: "outreach", id: p.id }); } function copyLink() { if (!sel) return; navigator.clipboard.writeText(location.origin + "/#/outreach/" + sel.id).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1600); }); } // merge a server prospect into both list and selection function apply(p) { setSel(p); setList(l => (l || []).map(x => x.id === p.id ? p : x)); } async function addProspect() { const p = await fetch("/api/outreach", { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" }).then(r => r.json()); setList(l => [p, ...(l || [])]); select(p); } async function importLeads() { const text = importText.trim(); if (!text) return; setImporting(true); setErr(""); setImportProg(""); setImportMsg(""); try { // Split into lead blocks: numbered entries ("12. Name") or blank-line separated. let blocks = /^\s*\d+\.\s+\S/m.test(text) ? text.split(/\n(?=\s*\d+\.\s+\S)/) : text.split(/\n\s*\n/); blocks = blocks.map(b => b.replace(/^[=\s]+/, "").trim()).filter(b => /(website|phone|google\s*maps|email|address|rating)\s*:/i.test(b)); if (!blocks.length) throw new Error("No leads found — paste the numbered list"); let first = null, ok = 0, dupes = 0, failed = 0; for (let i = 0; i < blocks.length; i++) { setImportProg((i + 1) + "/" + blocks.length); try { const p = await fetch("/api/outreach/import", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text: blocks[i], niche: importNiche.trim().toLowerCase() }) }) .then(async r => { if (!r.ok) throw new Error((await r.json()).error || "import failed"); return r.json(); }); if (p && p.duplicate) { dupes++; continue; } // already exists — skip setList(l => [p, ...(l || [])]); if (!first) first = p; ok++; } catch (e) { failed++; /* skip a bad block, keep going */ } } if (first) select(first); setImportText(""); const parts = [`Imported ${ok}`]; if (dupes) parts.push(`skipped ${dupes} duplicate${dupes > 1 ? "s" : ""}`); if (failed) parts.push(`${failed} failed`); setImportMsg(parts.join(" · ")); if (!ok && !dupes) setErr("Couldn't import any leads from that text"); else if (ok && !dupes && !failed) { setImportOpen(false); setImportMsg(""); } // clean run: close panel } catch (e) { setErr(e.message); } finally { setImporting(false); setImportProg(""); } } async function del(pid) { await fetch("/api/outreach/" + pid, { method: "DELETE" }); setList(l => (l || []).filter(x => x.id !== pid)); if (sel && sel.id === pid) { setSel(null); if (go) go({ view: "outreach" }); } } async function put(patch) { if (!sel) return; const p = await outJson(await fetch("/api/outreach/" + sel.id, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(patch) }), "Save failed"); apply(p); } const setField = (k, v) => setSel(s => ({ ...s, [k]: v })); async function run(name, fn) { setErr(""); setBusy(name); try { await fn(); } catch (e) { setErr(e.message || String(e)); } finally { setBusy(""); } } const readMaps = () => run("maps", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/read-maps", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ mapsUrl: sel.mapsUrl }) }), "Read failed"); apply(p); }); const generate = () => run("gen", async () => { // save current field edits first, then generate await put({ name: sel.name, company: sel.company, email: sel.email, mapsUrl: sel.mapsUrl }); const r = await outJson(await fetch("/api/outreach/" + sel.id + "/generate", { method: "POST" }), "Generate failed"); setSel(s => ({ ...s, subject: s.subject || r.subject, body: r.html, status: s.status === "sent" ? "sent" : "previewed" })); setList(l => (l || []).map(x => x.id === sel.id ? { ...x, status: x.status === "sent" ? "sent" : "previewed" } : x)); }); const uploadMockup = (file) => run("mockup", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/mockup?filename=" + encodeURIComponent(file.name || "mockup.png"), { method: "POST", headers: { "Content-Type": file.type || "image/png" }, body: file }), "Upload failed"); apply({ ...p }); }); const removeMockup = () => run("mockup", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/mockup", { method: "DELETE" }), "Remove failed"); apply(p); }); const uploadLogo = (file) => run("logo", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/logo?filename=" + encodeURIComponent(file.name || "logo.png"), { method: "POST", headers: { "Content-Type": file.type || "image/png" }, body: file }), "Upload failed"); apply({ ...p }); }); const removeLogo = () => run("logo", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/logo", { method: "DELETE" }), "Remove failed"); apply(p); }); const buildMockup = () => run("build", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/build-mockup", { method: "POST" }), "Mockup failed"); apply(p); }); // Pick a product (template), save it, then (re)build the mockup in one go. const pickProduct = (preset) => run("build", async () => { await outJson(await fetch("/api/outreach/" + sel.id, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ mockupUuid: preset.mockupUuid, smartObjectUuid: preset.smartObjectUuid }) }), "Save failed"); setField("mockupUuid", preset.mockupUuid); setField("smartObjectUuid", preset.smartObjectUuid); const p = await outJson(await fetch("/api/outreach/" + sel.id + "/build-mockup", { method: "POST" }), "Mockup failed"); apply(p); }); const readWebsite = () => run("web", async () => { const r = await outJson(await fetch("/api/outreach/" + sel.id + "/read-website", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ website: sel.website }) }), "Read failed"); apply(r.prospect); }); const removeBg = () => run("bg", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/remove-bg", { method: "POST" }), "Background removal failed"); apply(p); }); const removeBgRembg = () => run("bg2", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/remove-bg-rembg", { method: "POST" }), "Background removal failed"); apply(p); }); const removeBgBria = () => run("bg3", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/remove-bg-bria", { method: "POST" }), "Background removal failed"); apply(p); }); const recolorLogo = (color) => run("recolor", async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/recolor-logo", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ color }) }), "Recolour failed"); apply(p); }); const send = () => run("send", async () => { if (!sel.email) throw new Error("Add the recipient email first"); const p = await outJson(await fetch("/api/outreach/" + sel.id + "/send", { method: "POST" }), "Send failed"); apply(p); // server records sentAt + sets status "sent"; reflect it in the UI }); const sendFollowup = (step) => run("fu" + step, async () => { const p = await outJson(await fetch("/api/outreach/" + sel.id + "/followup", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ step }) }), "Follow-up failed"); apply(p); }); const refreshTracking = () => run("track", async () => { const j = await fetch("/api/outreach").then(r => r.json()); setList(j.prospects || []); const fresh = (j.prospects || []).find(x => x.id === sel.id); if (fresh) setSel(fresh); }); const toggleFollowups = () => run("fustop", async () => { const cur = (sel.followups && sel.followups.stopped) || false; const p = await outJson(await fetch("/api/outreach/" + sel.id, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ followups: { ...(sel.followups || { history: [] }), stopped: !cur } }) }), "Save failed"); apply(p); }); const ctx = sel && sel.context; const mockupSrc = sel && sel.mockup ? ("/api/outreach/" + sel.id + "/mockup?ts=" + (sel.mockup.id || "")) : null; const qq = q.trim().toLowerCase(); // Distinct niches present in the list (for the filter chips), + counts. const niches = list ? [...new Set(list.map(p => (p.niche || "").trim()).filter(Boolean))].sort() : []; const nicheCount = (n) => (list || []).filter(p => (p.niche || "").trim() === n).length; const base = !list ? null : (nicheFilter ? list.filter(p => (p.niche || "").trim() === nicheFilter) : list); const filtered = base == null ? null : [...(qq ? base.filter(p => [p.company, p.name, p.email, p.website, p.phone].some(v => String(v || "").toLowerCase().includes(qq))) : base)] .sort((a, b) => (STATUS_RANK[a.status] ?? 0) - (STATUS_RANK[b.status] ?? 0)); // new → previewed → sent (stable) return (
{/* prospect list */}
Prospects {list ? ((qq || nicheFilter) ? `· ${filtered.length}/${list.length}` : `· ${list.length}`) : ""}
setQ(e.target.value)} placeholder="Search prospects…" /> {q && }
{niches.length > 0 && (
{niches.map(n => ( ))}
)} {importOpen && (
setImportNiche(e.target.value)} placeholder="Niche for this batch (e.g. badminton, restaurant)" /> {niches.map(n =>