);
}
// Per-product keyword overrides — when a product's type/title gives a poor or
// misleading noun, map (by URL substring / handle) to the word we'd actually use
// in an email. Matched case-insensitively against the product URL.
const KW_OVERRIDES = [
{ match: "create-your-uv-dtf-gang-sheet-online-builder", kw: "uv stickers" },
{ match: "collections/dtf-transfers", kw: "DTF transfers" },
{ match: "build-a-dtf-gang-sheet-online", kw: "DTF gang sheet builder" },
];
function kwOverride(url) {
const u = (url || "").toLowerCase();
if (!u) return "";
for (const o of KW_OVERRIDES) if (u.includes(o.match)) return o.kw;
return "";
}
// Body uses lightweight markdown links — [words](https://…) — so links attach to
// words, not bare URLs. These convert to HTML (for the email + preview) and to a
// readable plain-text fallback.
const MD_LINK_RE = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
function _escHtml(s) { return String(s).replace(/&/g, "&").replace(//g, ">"); }
function mdLinksToHtml(s) {
let out = "", last = 0, m; MD_LINK_RE.lastIndex = 0;
while ((m = MD_LINK_RE.exec(s))) {
out += _escHtml(s.slice(last, m.index));
out += `${_escHtml(m[1])}`;
last = m.index + m[0].length;
}
out += _escHtml(s.slice(last));
return out.replace(/\n/g, " ");
}
function mdLinksToText(s) { return s.replace(MD_LINK_RE, "$1 ($2)"); }
function hasMdLinks(s) { MD_LINK_RE.lastIndex = 0; return MD_LINK_RE.test(s); }
// Personal outreach email to an identified visitor who's been browsing.
// Sent from the logged-in user, short + friendly, with an AI-write option.
function BrowseEmailModal({ group, events, ordered10d, onClose, initialNotes, defaultTpl }) {
const cust = group.email && (DTF.customers || []).find(c => (c.email || "").toLowerCase() === group.email.toLowerCase());
const fullName = (cust && cust.name) || "";
const eml = (group.email || "").toLowerCase();
const first = fullName.trim().split(/\s+/)[0] || "";
const me = (DTF.userName || "").trim() || "the DTF.UK team";
// Distinct products/collections this visitor viewed, newest first, with their
// storefront links — fed to the AI so the note can offer product-related help.
const products = (() => {
const out = [], seen = new Set();
for (const e of (events || [])) {
if (e.type !== "product_viewed" && e.type !== "collection_viewed") continue;
const d = e.data || {}, isCol = e.type === "collection_viewed";
const title = isCol ? (d.collectionTitle || d.collectionId) : (d.productTitle || d.productId);
if (!title) continue;
const key = (isCol ? "c:" : "p:") + String(title).toLowerCase();
if (seen.has(key)) continue; seen.add(key);
out.push({ title: String(title), url: e.url || null, kind: isCol ? "collection" : "product", type: (d.productType || "").trim(), kw: kwOverride(e.url) });
if (out.length >= 8) break;
}
return out;
})();
const lastLabel = group.last && window.eventLabel ? window.eventLabel(group.last) : "";
const greet = first ? `Hi ${first},` : "Hi there,";
const isExisting = !!(cust && cust.orders > 0);
const isVip = !!(cust && DTF.isVip(cust));
// A short keyword for what they were looking at (first selected/seen product),
// pluralised so it reads naturally ("a new run of gang sheets"). Auto-link will
// wrap it in the product link.
const welcomeSub = first ? `${first}, good to see you again!` : "Good to see you again!";
const kwBase = (products[0] && (products[0].kw || products[0].type || products[0].title) || "").toLowerCase();
const kw = kwBase ? (/s$/.test(kwBase) ? kwBase : kwBase + "s") : "";
// Templates: short hello to a likely-new customer, a warm "been a while" nudge
// to an existing one, and a VIP variant that asks about their recent order.
const TEMPLATES = {
reactivation: {
label: "Re-activation",
subject: first ? `${first}, how's it all going?` : "How's it all going?",
body:
`${greet}
It's been a while since your last order with us — I hope you and the business are keeping well.
I just wanted to check in and see how things are going your end. If you've got a run of transfers coming up, or there's anything we can help with, we'd be glad to sort it for you.
And if there's anything we could do to improve how we work together, I'd genuinely welcome the feedback — always keen to make things easier for you.
No pressure at all — just saying hello.
${me}
DTF.UK`,
},
new: {
label: "New customer",
subject: "Anything I can help with?",
body:
`${greet}
Saw you having a look round the site and thought I'd say hello.
If DTF transfers are new to you and you've got any questions, I'm happy to help — just reply and let me know what you're after.
No rush either way.
${me}
DTF.UK`,
},
existing: {
label: "Existing customer",
subject: welcomeSub,
body:
`${greet}
Been a while! Saw you back on the site having a look.
If there's anything I can help with, just give me a shout — happy to talk through whatever you need.
${me}
DTF.UK`,
},
vip: {
label: "VIP customer",
subject: welcomeSub,
body:
`${greet}
Been a while — lovely to see you back!
How did your last order turn out? Hope it all went well. Are you planning another run of ${kw || "prints"}, or is there anything else I can help with?
Always happy to help — just give me a shout.
${me}
DTF.UK`,
},
};
const initTpl = (defaultTpl && TEMPLATES[defaultTpl]) ? defaultTpl : (isVip ? "vip" : isExisting ? "existing" : "new");
const [tpl, setTpl] = useStateB(initTpl);
const [selected, setSelected] = useStateB(() => new Set(products.map((_, i) => i)));
// Ticking a product auto-links its keyword in the body (if present) to its URL.
const toggleSel = (i) => {
const adding = !selected.has(i);
setSelected(s => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; });
if (adding && products[i] && products[i].url) setBody(b => autoLinkBody(b, [products[i]]));
};
const [to, setTo] = useStateB(group.email || "");
const [subject, setSubject] = useStateB(TEMPLATES[initTpl].subject);
const [body, setBody] = useStateB(TEMPLATES[initTpl].body);
const pickTpl = (k) => { setTpl(k); setSubject(TEMPLATES[k].subject); setBody(autoLinkBody(TEMPLATES[k].body)); };
const [aiNotes, setAiNotes] = useStateB(initialNotes || "");
const [sending, setSending] = useStateB(false);
const [genning, setGenning] = useStateB(false);
const [err, setErr] = useStateB("");
const [done, setDone] = useStateB("");
const kbd = (navigator.platform || "").toLowerCase().includes("mac") ? "⌘" : "Ctrl";
useEffectB(() => {
const onKey = e => { if (e.key === "Escape") onClose(false); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, []);
// Link the initial template's product keyword on open.
useEffectB(() => { setBody(b => autoLinkBody(b)); }, []);
// Auto-link the selected products' keywords (their type, e.g. "gang sheets",
// else the title) to their store URLs — first unlinked match per product,
// never touching text already inside a [text](url) link.
const autoLinkBody = (text, list) => {
const chosen = (list || products.filter((_, i) => selected.has(i))).filter(p => p.url);
if (!chosen.length) return text;
const usedUrl = new Set(); MD_LINK_RE.lastIndex = 0; let mm;
while ((mm = MD_LINK_RE.exec(text))) usedUrl.add(mm[2]);
const segs = []; let last = 0, m; MD_LINK_RE.lastIndex = 0;
while ((m = MD_LINK_RE.exec(text))) { segs.push(["p", text.slice(last, m.index)]); segs.push(["l", m[0]]); last = m.index + m[0].length; }
segs.push(["p", text.slice(last)]);
for (const p of chosen) {
if (usedUrl.has(p.url)) continue;
// Candidate keywords: the product TYPE first (cleanest, e.g. "Gang Sheet"),
// then the title and its non-numeric word tail as fallbacks.
const cands = [];
const add = s => { s = (s || "").trim(); if (s && !cands.includes(s)) cands.push(s); };
add(p.kw); // explicit override always wins, tried first
add(p.type);
if (!p.type && !p.kw) {
add(p.title);
const w = (p.title || "").split(/\s+/).filter(x => !/\d/.test(x));
if (w.length >= 2) add(w.slice(-2).join(" "));
}
let done = false;
for (let si = 0; si < segs.length && !done; si++) {
if (segs[si][0] !== "p") continue;
for (const kw of cands) {
// match the keyword with a flexible trailing 's' (singular/plural) and
// flexible whitespace, e.g. "Gang Sheet" matches "gang sheets".
const esc = kw.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\s+/g, "\\s+").replace(/s$/i, "");
const found = segs[si][1].match(new RegExp("\\b" + esc + "s?\\b", "i"));
if (found) {
const seg = segs[si][1], idx = found.index;
segs[si][1] = seg.slice(0, idx) + "[" + found[0] + "](" + p.url + ")" + seg.slice(idx + found[0].length);
usedUrl.add(p.url); done = true; break;
}
}
}
}
return segs.map(s => s[1]).join("");
};
const genAI = () => {
if (genning) return;
setGenning(true); setErr("");
const chosen = products.filter((_, i) => selected.has(i));
const browsing = chosen.length
? chosen.map(p => `- ${p.title}${p.url ? " — " + p.url : ""}${p.kw ? ` (refer to this as "${p.kw}")` : ""}`).join("\n")
: lastLabel;
fetch("/api/ai/personal-email", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ context: aiNotes, customerName: fullName, userName: DTF.userName, browsing, kind: tpl }) })
.then(async r => { const j = await r.json().catch(() => ({})); if (!r.ok) throw new Error(j.error || "AI failed"); return j; })
.then(j => { if (j.subject) setSubject(j.subject); if (j.body) setBody(autoLinkBody(j.body || "")); })
.catch(e => setErr(e.message)).finally(() => setGenning(false));
};
const send = () => {
if (!to.trim()) { setErr("Add a recipient email"); return; }
setSending(true); setErr(""); setDone("");
const payload = { to: to.trim(), subject };
if (hasMdLinks(body)) {
payload.html = `