e.stopPropagation()}> {/* Header */}

Settings

{['email', 'design'].map(t => ( ))}

{tab === 'email' && (<>

Campaign Monitor

{statusLabel}

API Key

setApiKeyInput(e.target.value)} placeholder={status === 'connected' ? '(key saved — paste to replace)' : 'Paste your CM API key'} style={{flex:1, fontFamily:'var(--font-mono)', fontSize:12}} />

From name setFromName(e.target.value)} placeholder="Your Travel Agency" />

From email setFromEmail(e.target.value)} placeholder="hello@youragency.co.uk" />

Subscriber list {listsLoading ? (

Loading lists…

) : lists.length > 0 ? ( ) : (

{status === 'connected' ? 'No lists found — check your CM account' : 'Save your API key first to load lists'}

)}

{saveMsg && {saveMsg}}

Send Options

Subject line setSubject(e.target.value)} placeholder="Our latest travel deals" />

)} {tab === 'design' && (

Use the ⚙ Tweaks panel (bottom-left corner) to adjust canvas surface, selection style, and density.

)}

); } // ── Send dropdown ─────────────────────────────────────────────────────────── function SendDropdown({ onSendTest, onCreateCampaign }) { const [open, setOpen] = useState(false); const { Mail, ChevronDown } = window.Icons; return (

{open &&

setOpen(false)} />} {open && (

)}

); } function relTime(date) { if (!date) return null; const mins = Math.floor((Date.now() - date.getTime()) / 60000); if (mins < 1) return 'Saved just now'; if (mins === 1) return 'Saved 1 min ago'; return `Saved ${mins} min ago`; } function App() { const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS); const [blocks, setBlocks] = useState(() => { const saved = window.TMS_SAVED_DESIGN; if (saved) { try { const parsed = typeof saved === 'string' ? JSON.parse(saved) : saved; if (Array.isArray(parsed.blocks)) return parsed.blocks; } catch {} } return [makeBlock("header"), makeBlock("offer"), makeBlock("text"), makeBlock("footer")]; }); const [selectedId, setSelectedId] = useState(null); const [preview, setPreview] = useState(false); const [insertAt, setInsertAt] = useState(null); const [toast, setToast] = useState(null); const [exportHtml, setExportHtml] = useState(null); const [designId, setDesignId] = useState(null); const [designName] = useState('Untitled'); const [mobileTab, setMobileTab] = useState(null); const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768); const [showA2HS, setShowA2HS] = useState(false); const [deferredPrompt, setDeferredPrompt] = useState(null); const [showSettings, setShowSettings] = useState(false); const [subject, setSubject] = useState(() => localStorage.getItem('tms-eb-subject') || 'Our latest travel deals'); const [lastSavedAt, setLastSavedAt] = useState(null); const toastTimer = useRef(null); const drawerRef = useRef(null); const autoSaveTimer = useRef(null); useEffect(() => { const offer = blocks.find((b) => b.type === "offer"); if (offer) setSelectedId(offer.id); }, []); // eslint-disable-line useEffect(() => { if (window.TMS_SAVED_DESIGN) flash("Design loaded"); }, []); // eslint-disable-line // Load design from ?design_id= URL param on mount useEffect(() => { const params = new URLSearchParams(window.location.search); const urlDesignId = params.get('design_id'); const cfg = window.TMS_CONFIG || {}; const token = cfg.agentToken || ''; const workerUrl = (cfg.workerUrl || 'https://tms-promotions-api.tms-travel-marketing-systems.workers.dev').replace(/\/$/, ''); if (!urlDesignId || !token) return; fetch(`${workerUrl}/email-builder/load/${encodeURIComponent(urlDesignId)}`, { headers: { 'Authorization': `Bearer ${token}` }, }).then(r => r.json()).then(data => { if (data.blocks) { setBlocks(data.blocks); setDesignId(urlDesignId); flash('Design loaded'); } }).catch(() => {}); }, []); // eslint-disable-line // Auto-save 60 s after any block change (debounced) useEffect(() => { const cfg = window.TMS_CONFIG || {}; const token = cfg.agentToken || ''; if (!token) return; clearTimeout(autoSaveTimer.current); autoSaveTimer.current = setTimeout(() => doSaveDesign(blocks, designId, designName), 60000); return () => clearTimeout(autoSaveTimer.current); }, [blocks]); // eslint-disable-line useEffect(() => { const ta = document.getElementById('design-json'); if (ta) ta.value = JSON.stringify({ blocks, savedAt: new Date().toISOString() }); }, [blocks]); useEffect(() => { const mq = window.matchMedia('(max-width: 767px)'); const h = (e) => { setIsMobile(e.matches); if (!e.matches) setMobileTab(null); }; mq.addEventListener('change', h); return () => mq.removeEventListener('change', h); }, []); useEffect(() => { if (!isMobile) return; const isStandalone = window.navigator.standalone === true || window.matchMedia('(display-mode: standalone)').matches; if (isStandalone) return; if (sessionStorage.getItem('a2hs-dismissed')) return; const timer = setTimeout(() => setShowA2HS(true), 2000); return () => clearTimeout(timer); }, []); // eslint-disable-line useEffect(() => { const handler = (e) => { e.preventDefault(); setDeferredPrompt(e); }; window.addEventListener('beforeinstallprompt', handler); return () => window.removeEventListener('beforeinstallprompt', handler); }, []); useEffect(() => { const el = drawerRef.current; if (!el) return; let startY = 0; const onTouchStart = (e) => { startY = e.touches[0].clientY; }; const onTouchEnd = (e) => { if (e.changedTouches[0].clientY - startY > 80) setMobileTab(null); }; el.addEventListener('touchstart', onTouchStart); el.addEventListener('touchend', onTouchEnd); return () => { el.removeEventListener('touchstart', onTouchStart); el.removeEventListener('touchend', onTouchEnd); }; }, [mobileTab]); const flash = (msg) => { setToast(msg); clearTimeout(toastTimer.current); toastTimer.current = setTimeout(() => setToast(null), 2400); }; const selected = blocks.find((b) => b.id === selectedId) || null; const updateProp = (id, key, value) => setBlocks((bs) => bs.map((b) => (b.id === id ? { ...b, props: { ...b.props, [key]: value } } : b))); const moveBlock = (id, dir) => setBlocks((bs) => { const i = bs.findIndex((b) => b.id === id); const j = i + dir; if (j < 0 || j >= bs.length) return bs; const next = bs.slice(); [next[i], next[j]] = [next[j], next[i]]; return next; }); const dupBlock = (id) => setBlocks((bs) => { const i = bs.findIndex((b) => b.id === id); const copy = { ...bs[i], id: uid(), props: { ...bs[i].props } }; const next = bs.slice(); next.splice(i + 1, 0, copy); setSelectedId(copy.id); return next; }); const delBlock = (id) => setBlocks((bs) => bs.filter((b) => b.id !== id)); const handleBlockSelect = (id) => { console.log('block selected:', id, 'isMobile:', isMobile); setSelectedId(id); if (isMobile && !preview) { console.log('opening settings drawer'); setMobileTab('settings'); } }; const appendBlock = (type) => { const b = makeBlock(type); setBlocks((bs) => [...bs, b]); setSelectedId(b.id); flash(`${window.TYPE_META[type].label} block added`); }; const insertBlock = (type, index) => { const b = makeBlock(type); setBlocks((bs) => { const n = bs.slice(); n.splice(index, 0, b); return n; }); setSelectedId(b.id); setInsertAt(null); flash(`${window.TYPE_META[type].label} block added`); }; const addOffer = (o) => { const headlineParts = [ o.title, o.nights && `${o.nights} night${o.nights === '1' ? '' : 's'}`, o.board, o.op && `with ${o.op}`, o.airport && `flying from ${o.airport}`, ].filter(Boolean); const b = makeBlock("offer", { destination: o.dest, price: o.price, badge: o.badge, headline: headlineParts.join(' · ') + '.', availability: o.availability || 'Limited availability', imageUrl: o.imageUrl || '', ctaUrl: o.ctaUrl || '', operator: o.op || '', }); setBlocks((bs) => [...bs, b]); setSelectedId(b.id); flash(`${o.dest} offer added`); }; const addCruise = async (c) => { console.log('imageUrl written to block:', c.imageUrl); const b = makeBlock("cruise", { cruiseName: c.cruiseName, operatorLine: c.operatorLine, departureDate: c.departureDate, duration: c.duration, departurePort: c.departurePort, regions: c.regions, price: c.price, imageUrl: c.imageUrl, ctaUrl: c.ctaUrl, teaser: c.teaser || '', promoBadge: c.promoBadge || '', cruiseType: c.cruiseType || 'ocean', }); setBlocks((bs) => [...bs, b]); setSelectedId(b.id); flash(`${c.cruiseName} added`); if (c._id) { try { const res = await fetch(`${CRUISE_API}/cruises/${c._id}/highlights`); const data = await res.json(); const teaser = (data.highlights || [])[0] || ''; if (teaser) updateProp(b.id, 'teaser', teaser); } catch {} } }; const handleExport = () => { const html = window.buildEmailHtml(blocks); setExportHtml(html); }; const doSaveDesign = async (currentBlocks, currentDesignId, name) => { const saveCfg = window.TMS_CONFIG || {}; const token = saveCfg.agentToken || ''; const workerUrl = (saveCfg.workerUrl || 'https://tms-promotions-api.tms-travel-marketing-systems.workers.dev').replace(/\/$/, ''); const ta = document.getElementById('design-json'); if (ta) ta.value = JSON.stringify({ blocks: currentBlocks, savedAt: new Date().toISOString() }); if (!token) return; try { const res = await fetch(`${workerUrl}/email-builder/save`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, body: JSON.stringify({ blocks: currentBlocks, name: name || 'Untitled', designId: currentDesignId }), }); const data = await res.json(); if (data.designId) { setDesignId(data.designId); setLastSavedAt(new Date()); const u = new URL(window.location.href); u.searchParams.set('design_id', data.designId); window.history.replaceState({}, '', u.toString()); } } catch {} }; const saveDesign = async () => { const cfg = window.TMS_CONFIG || {}; const token = cfg.agentToken || ''; if (!token) { flash("Saved locally (no agent token configured)"); return; } await doSaveDesign(blocks, designId, designName); flash("Design saved"); }; const handleSendTest = async () => { const toEmail = window.prompt('Send test email to:'); if (!toEmail) return; const cfg = window.TMS_CONFIG || {}; const token = cfg.agentToken || ''; const workerUrl = (cfg.workerUrl || 'https://tms-promotions-api.tms-travel-marketing-systems.workers.dev').replace(/\/$/, ''); if (!token) { setShowSettings(true); return; } const html = window.buildEmailHtml(blocks); flash('Sending test email…'); try { const res = await fetch(`${workerUrl}/email-builder/send-test`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, body: JSON.stringify({ html, subject, toEmail }), }); const data = await res.json(); flash(data.ok ? `Test sent to ${toEmail}` : (data.error || 'Send failed')); } catch { flash('Send failed — check connection'); } }; const handleCreateCampaign = async () => { const cfg = window.TMS_CONFIG || {}; const token = cfg.agentToken || ''; const workerUrl = (cfg.workerUrl || 'https://tms-promotions-api.tms-travel-marketing-systems.workers.dev').replace(/\/$/, ''); if (!token) { setShowSettings(true); return; } flash('Creating campaign…'); const html = window.buildEmailHtml(blocks); await doSaveDesign(blocks, designId, designName); const currentDesignId = designId; try { const res = await fetch(`${workerUrl}/email-builder/create-campaign`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` }, body: JSON.stringify({ html, subject, designId: currentDesignId }), }); const data = await res.json(); if (data.ok) { flash('Campaign created in CM!'); if (data.previewUrl) window.open(data.previewUrl, '_blank'); } else { if (data.error && data.error.includes('not configured')) setShowSettings(true); flash(data.error || 'Campaign creation failed'); } } catch { flash('Campaign creation failed — check connection'); } }; const dismissA2HS = () => { setShowA2HS(false); sessionStorage.setItem('a2hs-dismissed', '1'); }; const handleInstall = async () => { if (deferredPrompt) { deferredPrompt.prompt(); await deferredPrompt.userChoice; setDeferredPrompt(null); } dismissA2HS(); }; const { Eye, Download, Check, Plus, Layers, Save, Search, Settings, Mail } = window.Icons; const canvasClasses = ["bld-canvas-area", "surf-" + t.canvasSurface].join(" "); const appClasses = ["bld-app", "sel-" + t.selectStyle, "dens-" + t.density, preview ? "is-preview" : ""].join(" "); return (

TMS Email Builder Beta

{preview ? ( Preview mode ) : lastSavedAt ? ( {relTime(lastSavedAt)} ) : ( {blocks.length} blocks )}

{!preview && !isMobile && }

{ setSelectedId(null); setInsertAt(null); }}>

{blocks.length === 0 ? (

e.stopPropagation()}>

Your email is empty

Add a block from the left to get started.

) : (

{blocks.map((b, i) => ( {!preview && ( { e.stopPropagation(); setInsertAt(insertAt === i + 1 ? null : i + 1); }} onPick={(type) => insertBlock(type, i + 1)} /> )} ))}

)}

{!preview && !isMobile && }

{isMobile && !preview && ( <> {mobileTab &&

setMobileTab(null)} />}

{mobileTab === 'settings' && ( )}

{(mobileTab === 'blocks' || mobileTab === 'search') && ( { appendBlock(t); setMobileTab(null); }} onAddOffer={(o) => { addOffer(o); setMobileTab(null); }} onAddCruise={(c) => { addCruise(c); setMobileTab(null); }} section={mobileTab} /> )} {mobileTab === 'settings' && ( )}

)} setTweak("canvasSurface", v)} /> setTweak("selectStyle", v)} /> setTweak("density", v)} /> {exportHtml && setExportHtml(null)} />} {showSettings && setShowSettings(false)} onSubjectChange={(s) => { setSubject(s); localStorage.setItem('tms-eb-subject', s); }} subject={subject} />} {toast &&

{toast}

} {showA2HS && }

); } function InsertSlot({ index, open, onToggle, onPick }) { const { Plus } = window.Icons; const TYPES = ["header", "offer", "cruise", "text", "image", "video", "footer"]; return (

e.stopPropagation()}> {open && (

{TYPES.map((type) => { const Ic = window.Icons[window.TYPE_META[type].label]; return ( ); })}

)}

); } ReactDOM.createRoot(document.getElementById("root")).render();

Export email HTML

Settings

Your email is empty