| ${inner} |
${b.title||"Headline"}
`; const subHtml = b.subtitle ? `${b.subtitle}
` : ""; // Square mode extends BOTH sides past the email-card edges. width:calc(100% + 2x) // + a single negative left margin pushes the band out to the left and lets the // calc'd extra width reach past the right edge symmetrically. Same trick wrapBlockBg // uses — without it the right side stops at the card edge and leaves a white gap. const tWidth = sharp ? `width:calc(100% + ${2*wrapperPadH}px);` : `width:100%;`; const mLeft = sharp ? -wrapperPadH : mH; return `| ${titleHtml}${subHtml} |
${h1}
`;
}
case "para": {
const hasRowBg = b.blockBg || b.blockBgGradient || b.blockBgImage;
const lh = b.lineHeight != null ? `line-height:${b.lineHeight};` : (hasRowBg ? "line-height:1.45;" : "line-height:1.7;");
const innerMargin = hasRowBg ? "margin:0;" : `margin:0 0 ${pad}px;`;
const cls = b.fontSizeMobile ? `bk-${b.id||"x"}` : "";
const p = `")}`; if (hasRowBg) return wrapBlockBg(b, p, _nextHasBg); const pV = b.padV != null ? b.padV : 18; const pH = (b.align === "center") ? 0 : (b.padH != null ? b.padH : 18); return `
${p}
`;
}
case "btn": {
const bg = b.bgGradient || b.bgColor || c;
const hasRowBg = b.blockBg || b.blockBgGradient;
const innerMargin = hasRowBg ? "margin:0;" : `margin:${pad}px 0;`;
// Corner radius — "sharp"=2, "soft"=8 (default), "pill"=99. Numeric override wins.
const cornerMap = { sharp: 2, soft: 8, pill: 99 };
const btnRadius = b.btnRadius != null ? b.btnRadius : (cornerMap[b.btnCornerStyle] != null ? cornerMap[b.btnCornerStyle] : 8);
const btnPadV = b.btnPadV != null ? b.btnPadV : 13;
const btnPadH = b.btnPadH != null ? b.btnPadH : 30;
return wrapBlockBg(b, ``, _nextHasBg);
}
case "divider": {
const style = b.style || "line";
const color = b.color || "#e2e8f0";
// Decorative dividers: borderStyle + thickness for variety. Image style swaps the
// line for an `; } case "logo": { const w = Math.max(16, Math.min(400, b.width || 96)); const align = b.align || "center"; const placeholder = `https://placehold.co/${w*2}x${w*2}/${c.slice(1)}/ffffff?text=LOGO`; return `
${b.companyName}
`);
if (b.companyAddress) lines.push(`${b.companyAddress}
`);
if (b.showUnsubscribe) lines.push(``);
return wrapBlockBg(b, `${lines.join("")}
`, _nextHasBg);
}
case "spacer": {
// Spacer extends to the wrapper edges by default (negative horizontal margins) so a
// colored spacer reads as a solid band, matching how the banner's "square" mode works.
// Top/bottom margins are also pulled in when it sits flush against the wrapper edges
// (first/last block) so there's no white gap above/below a colored spacer.
const mH = -wrapperPadH;
const mTop = _isFirst ? -wrapperPadV : 0;
const mBot = _isLast ? -wrapperPadV : 0;
return ``;
}
case "imageBanner":
case "image": {
// Image sizing: S/M/L = 25/50/75% of container, Fit = 100%, Custom = pixel value, and
// Bleed = extend past the content backdrop padding to the email edges (mirrors the
// banner block's Square mode — also extends top/bottom when this is the first/last
// block in the layout). The user's own banner image can use Bleed as an alternative
// to the styled Hero Banner block.
// imageBanner = a separate library entry that hides the size picker and always renders
// in bleed mode — easy access for users uploading pre-designed banners.
const sizePct = { small:25, medium:50, large:75 };
const w = b.type === "imageBanner" ? "bleed" : (b.width || "fit");
const align = b.align || "center";
const isBleed = w === "bleed";
const widthCss = w === "fit" ? "width:100%;height:auto;"
: w === "custom" ? `width:${b.widthCustom||300}px;max-width:100%;height:auto;`
: isBleed ? `width:calc(100% + ${2*wrapperPadH}px);height:auto;display:block;margin-left:-${wrapperPadH}px;`
: `width:${sizePct[w]||50}%;height:auto;`;
const wrapAlign = align === "center" ? "text-align:center;" : align === "right" ? "text-align:right;" : "text-align:left;";
// Bleed mode bakes the negative margins onto the ${linked}
`;
}
// Non-bleed image: drop bottom margin when the next block has a visible bg so a colored
// band (or another image/banner) sits flush. Wrap in row-bg if configured.
const imgBottomMargin = _nextHasBg ? 0 : pad;
return wrapBlockBg(b, `${linked}
`, _nextHasBg);
}
case "row": {
// Email-client-safe row: a | columns. Width per cell is // proportional to its colSpan (so a merged cell with span=2 in a 3-slot row takes 2/3 // of the width). vertical-align:middle keeps content visually centered between cells. const cols = Math.max(1, Math.min(3, b.cols || 2)); const children = (b.children || []).slice(0, cols); const spans = (b.colSpans && b.colSpans.length === children.length) ? b.colSpans : children.map(() => 1); const totalSpan = spans.reduce((a,s)=>a+s,0) || cols; const gap = b.gap != null ? b.gap : 12; // noStack: when true, the row keeps columns horizontal even on narrow viewports — useful // for icon strips and feature grids. Default behavior matches typical email-builder // responsive collapse: columns stack vertically below ~520px. const tableCls = b.noStack ? "no-stack" : "stack-cols"; const cells = children.map((col, i) => { const span = spans[i] || 1; const widthPct = Math.floor((span / totalSpan) * 100); const inner = blocksToHtml(col || [], themeColor); const pl = i === 0 ? 0 : Math.round(gap/2); const pr = i === children.length - 1 ? 0 : Math.round(gap/2); return ` | ${inner || ""} | `; }).join(""); return `
This Month at {BRAND}
Wins, openings, and what's ahead
Hi {FIRST_NAME},
Here's a recap of what happened across the {BRAND} network this month.
🎉 New Openings: We welcomed 4 new franchisees this month.
📈 Top Markets: Texas, Florida, and Arizona led in candidate interest.
` }, { id:"g_promo", name:"Limited-Time Promo", category:"marketing", icon:"🎯", color:"#f59e0b", subject:"Limited Time: Reduced Franchise Fee This Quarter", body:`$10K Off Franchise Fee
Sign by quarter-end. No conditions.
Hi {FIRST_NAME}, we're running a quarter-end incentive — sign your agreement before the end of the quarter and the franchise fee is reduced by $10,000.
` }, { id:"g_welcome", name:"Welcome Series #1", category:"marketing", icon:"👋", color:"#4ade80", subject:"Welcome to {BRAND}, {FIRST_NAME}!", body:`Welcome aboard, {FIRST_NAME}! 🎉
We are thrilled to have you join the {BRAND} family. Over the next few days you'll receive a series of onboarding emails covering everything you need to know.
What to expect this week:
1. Portal access (today)
2. Training schedule (Day 2)
3. Your FBC introduction call (Day 3)
You're Invited
{BRAND} Discovery Day
Meet the team. Tour the operation. Sign a partnership.
Hi {FIRST_NAME}, congratulations — you've reached the Discovery Day stage. This is the final step before we partner.
Available dates: [DATES]
Location: [ADDRESS]
Hey {FIRST_NAME}, are we still on?
It's been a few weeks since we last connected about {BRAND}. Life gets busy — totally understand.
If now isn't the right time, just hit reply with "pause" and I'll check back in 6 months. If you're ready to pick up where we left off, click below and we'll get a 15-min call on the books.
` }, { id:"g_followup", name:"FDD Follow-Up Nudge", category:"follow_up", icon:"📄", color:"#60a5fa", subject:"Did the FDD answer your questions?", body:`Hi {FIRST_NAME},
Quick nudge — wanted to make sure the {BRAND} FDD landed and answered the questions you had. A few sections candidates usually have follow-up questions on:
• Item 7 — Total investment range
• Item 19 — Historical financial performance
• Item 20 — Number of operating units
Want to jump on a 30-min FDD Review Call this week? I'll walk you through the highlights.
` }, // ── Phase-5 additions: showcase blocks for the new primitives ───────────────────────── { id:"g_event_invite", name:"Event Invitation (Bold)", category:"marketing", icon:"🎉", color:"#7c3aed", subject:"You're Invited — {BRAND} Open House", color:"#7c3aed", blocks:[ { id:"e_logo", type:"logo", src:"", alt:"Logo", width:96, align:"center", padding:8 }, { id:"e_h1", type:"header", text:"YOU'RE INVITED", fontSize:48, fontSizeMobile:32, lineHeight:1.05, align:"center", color:"#ffffff", fontFamily:"'Bebas Neue',Impact,sans-serif", blockBgGradient:"linear-gradient(135deg,#7c3aed,#3b82f6)", blockBgCorner:"square", padding:32 }, { id:"e_h2", type:"header", text:"to the {BRAND} Open House", fontSize:22, lineHeight:1.3, align:"center", color:"#1e293b", padding:16 }, { id:"e_p", type:"para", text:"Hi {FIRST_NAME} — come tour the operation, meet the team, and find out what makes {BRAND} a category leader.", fontSize:16, lineHeight:1.6, align:"center", padding:8 }, { id:"e_div", type:"divider", style:"dashed", color:"#a78bfa", thickness:2, padding:20 }, { id:"e_btn", type:"btn", text:"RSVP NOW", url:"#", bgGradient:"linear-gradient(90deg,#7c3aed,#3b82f6)", color:"#ffffff", btnCornerStyle:"pill", btnRadius:99, btnPadV:14, btnPadH:36, fontSize:14, fontFamily:"Inter,system-ui,sans-serif", fontWeight:800, align:"center", padding:8 }, { id:"e_foot", type:"footer", companyName:"{COMPANY_NAME|{BRAND}}", companyAddress:"{COMPANY_ADDRESS}", showUnsubscribe:true, color:"#94a3b8", fontSize:11, align:"center", padding:8 }, ] }, { id:"g_feature_grid", name:"Three Features (Icon Grid)", category:"marketing", icon:"⚡", color:"#0ea5e9", subject:"3 reasons franchisees pick {BRAND}", color:"#0ea5e9", blocks:[ { id:"f_logo", type:"logo", width:120, align:"center", padding:12 }, { id:"f_h1", type:"header", text:"Why {BRAND}?", fontSize:36, fontSizeMobile:26, align:"center", color:"#0f172a", fontFamily:"'Playfair Display',Georgia,serif", padding:8 }, { id:"f_p", type:"para", text:"Three reasons franchisees pick us — and stay.", fontSize:16, align:"center", color:"#475569", padding:16 }, { id:"f_row", type:"row", cols:3, gap:16, noStack:false, children:[ [{ id:"f_c1h", type:"header", text:"📈 Growth", fontSize:18, align:"center", color:"#0ea5e9", padding:4 }, { id:"f_c1p", type:"para", text:"Average unit revenue up 22% YoY across the system.", fontSize:13, align:"center", color:"#475569", padding:8 }], [{ id:"f_c2h", type:"header", text:"🛟 Support", fontSize:18, align:"center", color:"#0ea5e9", padding:4 }, { id:"f_c2p", type:"para", text:"Field-business consultant per region, 24/7 escalation line.", fontSize:13, align:"center", color:"#475569", padding:8 }], [{ id:"f_c3h", type:"header", text:"🏆 Brand", fontSize:18, align:"center", color:"#0ea5e9", padding:4 }, { id:"f_c3p", type:"para", text:"Top-5 in our category for three years running.", fontSize:13, align:"center", color:"#475569", padding:8 }], ]}, { id:"f_div", type:"divider", style:"line", color:"#e2e8f0", padding:24 }, { id:"f_btn", type:"btn", text:"See the FDD", url:"#", bgColor:"#0ea5e9", color:"#ffffff", btnCornerStyle:"pill", btnRadius:99, fontSize:14, align:"center", padding:8 }, { id:"f_foot", type:"footer", companyName:"{COMPANY_NAME|{BRAND}}", companyAddress:"{COMPANY_ADDRESS}", showUnsubscribe:true, fontSize:11, padding:8 }, ] }, { id:"g_anniversary", name:"Anniversary Offer (Bright)", category:"marketing", icon:"🥂", color:"#fdd95c", subject:"It's been one year — here's a thank-you", color:"#fdd95c", blocks:[ { id:"a_logo", type:"logo", width:80, align:"center", padding:10 }, { id:"a_h1", type:"header", text:"ONE YEAR TOGETHER", fontSize:54, fontSizeMobile:36, lineHeight:1.05, align:"center", color:"#1a1a1a", fontFamily:"'DM Serif Display','Playfair Display',Georgia,serif", blockBg:"#fdd95c", blockBgCorner:"square", padding:32 }, { id:"a_h2", type:"header", text:"Thank you, {FIRST_NAME}.", fontSize:22, align:"center", color:"#1a1a1a", padding:16 }, { id:"a_p", type:"para", text:"To celebrate a full year of partnership, we're sending you a special gift on us — no strings.", fontSize:16, lineHeight:1.7, align:"center", padding:12 }, { id:"a_div", type:"divider", style:"double", color:"#1a1a1a", padding:18 }, { id:"a_btn", type:"btn", text:"CLAIM YOUR GIFT", url:"#", bgColor:"#1a1a1a", color:"#fdd95c", btnCornerStyle:"sharp", btnRadius:2, btnPadV:16, btnPadH:38, fontSize:13, fontFamily:"Inter,system-ui,sans-serif", fontWeight:900, align:"center", padding:10 }, { id:"a_foot", type:"footer", companyName:"{COMPANY_NAME|{BRAND}}", companyAddress:"{COMPANY_ADDRESS}", showUnsubscribe:true, color:"#5a5a5a", fontSize:11, padding:8 }, ] }, { id:"g_webinar", name:"Webinar Sign-Up", category:"marketing", icon:"🎥", color:"#10b981", subject:"Live this Thursday — {BRAND} Q&A", color:"#10b981", blocks:[ { id:"w_logo", type:"logo", width:96, align:"center", padding:8 }, { id:"w_h1", type:"header", text:"Live Q&A this Thursday", fontSize:34, fontSizeMobile:24, align:"center", color:"#ffffff", blockBg:"#064e3b", blockBgCorner:"square", padding:36 }, { id:"w_p", type:"para", text:"Bring your toughest questions about {BRAND} franchising. Our CEO + Director of FBC will answer them live for 60 minutes.", fontSize:16, lineHeight:1.6, align:"center", padding:14 }, { id:"w_spacer", type:"spacer", height:16 }, { id:"w_row", type:"row", cols:3, gap:0, noStack:true, children:[ [{ id:"w_d1", type:"header", text:"🗓", fontSize:32, align:"center", padding:4 }, { id:"w_d1p", type:"para", text:"Thursday 2pm ET", fontSize:13, align:"center", color:"#475569", padding:4 }], [{ id:"w_d2", type:"header", text:"⏱", fontSize:32, align:"center", padding:4 }, { id:"w_d2p", type:"para", text:"60 minutes", fontSize:13, align:"center", color:"#475569", padding:4 }], [{ id:"w_d3", type:"header", text:"💻", fontSize:32, align:"center", padding:4 }, { id:"w_d3p", type:"para", text:"Zoom — link sent on RSVP", fontSize:13, align:"center", color:"#475569", padding:4 }], ]}, { id:"w_div", type:"divider", style:"line", color:"#10b981", thickness:2, padding:22 }, { id:"w_btn", type:"btn", text:"Save my seat", url:"#", bgColor:"#10b981", color:"#ffffff", btnCornerStyle:"pill", btnRadius:99, fontSize:15, align:"center", padding:8 }, { id:"w_foot", type:"footer", companyName:"{COMPANY_NAME|{BRAND}}", companyAddress:"{COMPANY_ADDRESS}", showUnsubscribe:true, fontSize:11, padding:8 }, ] }, { id:"g_welcome_rich", name:"Onboarding Welcome (Branded)", category:"marketing", icon:"🌟", color:"#3b82f6", subject:"Welcome to {BRAND}, {FIRST_NAME}!", color:"#3b82f6", blocks:[ { id:"o_logo", type:"logo", width:120, align:"center", padding:14 }, { id:"o_h1", type:"header", text:"Welcome, {FIRST_NAME}!", fontSize:40, fontSizeMobile:28, lineHeight:1.1, align:"center", color:"#ffffff", blockBgGradient:"linear-gradient(135deg,#3b82f6,#6366f1)", blockBgCorner:"square", fontFamily:"Inter,system-ui,sans-serif", padding:36 }, { id:"o_p1", type:"para", text:"You're officially in the family. Here's everything you need to start your journey with {BRAND}.", fontSize:16, lineHeight:1.7, align:"center", padding:12 }, { id:"o_div", type:"divider", style:"dashed", color:"#3b82f6", thickness:2, padding:20 }, { id:"o_h2", type:"header", text:"Your first 7 days", fontSize:22, align:"left", color:"#1e293b", padding:6 }, { id:"o_p2", type:"para", text:"Day 1 — Portal accessDay 2 — Training schedule
Day 3 — FBC intro call
Day 5 — Vendor accounts
Day 7 — First check-in", fontSize:15, lineHeight:1.9, align:"left", padding:10 }, { id:"o_btn", type:"btn", text:"Open your portal", url:"#", bgColor:"#3b82f6", color:"#ffffff", btnCornerStyle:"soft", btnRadius:8, fontSize:15, align:"center", padding:16 }, { id:"o_foot", type:"footer", companyName:"{COMPANY_NAME|{BRAND}}", companyAddress:"{COMPANY_ADDRESS}", showUnsubscribe:true, fontSize:11, padding:8 }, ] }, { id:"g_thank_you", name:"Thank You · Post Discovery Day", category:"follow_up", icon:"🙏", color:"#f97316", subject:"Thank you for joining us, {FIRST_NAME}", color:"#f97316", blocks:[ { id:"t_h1", type:"header", text:"Thank you for coming.", fontSize:36, fontSizeMobile:26, align:"center", color:"#ffffff", blockBg:"#f97316", blockBgCorner:"square", fontFamily:"'Playfair Display',Georgia,serif", padding:36 }, { id:"t_p1", type:"para", text:"Hi {FIRST_NAME} — it was a pleasure hosting you at Discovery Day. The team is genuinely excited about the prospect of partnering with you.", fontSize:16, lineHeight:1.7, align:"left", padding:12 }, { id:"t_p2", type:"para", text:"Here are your next steps:", fontSize:15, lineHeight:1.7, align:"left", padding:6 }, { id:"t_p3", type:"para", text:"1. Review the agreement we'll send within 48 hours
2. Confirm financing letter from your lender
3. Schedule the signing call when you're ready", fontSize:15, lineHeight:1.9, align:"left", padding:10 }, { id:"t_div", type:"divider", style:"dotted", color:"#f97316", thickness:2, padding:18 }, { id:"t_btn", type:"btn", text:"Schedule signing call", url:"#", bgColor:"#f97316", color:"#ffffff", btnCornerStyle:"pill", btnRadius:99, fontSize:14, align:"center", padding:10 }, { id:"t_foot", type:"footer", companyName:"{COMPANY_NAME|{BRAND}}", companyAddress:"{COMPANY_ADDRESS}", showUnsubscribe:true, fontSize:11, padding:8 }, ] }, ]; // Default folders seeded for new brands. Once seeded, folders become editable // per-brand storage (see `ff4_template_folders` and the `templateFolders` state), // supporting create / rename / delete / nesting (parentId) and a Private/Group // scope flag intended to power shared-folder semantics when the SaaS proxy ships. const TEMPLATE_FOLDERS = [ { id:"marketing", label:"Marketing", icon:"📣", color:"#3b82f6" }, { id:"follow_up", label:"Follow-up", icon:"↻", color:"#60a5fa" }, ]; const FOLDER_ICONS = ["📁","📂","📣","↻","✉️","📧","📬","📨","💌","📥","📤","✨","⭐","🎯","🏆","🎁","🔥","💡","💼","📌","📋","🗂","🏷","🔖","📞","🤝","🎉","💬","🚀","🌐","🔒"]; const AUTOMATION_TRIGGERS = [ { id:"new_lead", label:"New Lead Created" }, { id:"lead_stage_change", label:"Lead Stage Changes" }, { id:"opp_stage_change", label:"Opportunity Stage Changes" }, { id:"score_drops", label:"Opportunity Score Drops Below…" }, { id:"no_activity", label:"No Activity for N Days" }, { id:"stale", label:"Opportunity Becomes Stale" }, { id:"note_added", label:"Note Added" }, ]; const AUTOMATION_ACTIONS = [ { id:"send_template", label:"Send Email Template" }, { id:"notify", label:"In-App Notification" }, { id:"change_stage", label:"Change Stage" }, { id:"assign_broker", label:"Assign Broker" }, { id:"flag", label:"Add Risk Flag" }, ]; const CONDITION_OPS = ["equals","not equals","contains","greater than","less than","is empty","is not empty"]; // Anthropic model options exposed in Settings → AI. // Haiku is default everywhere: fast and ~3× cheaper than Sonnet, ~15× cheaper than Opus. const AI_MODELS = [ { id: "claude-haiku-4-5", label: "Haiku 4.5", desc: "Fast & cheap — default" }, { id: "claude-sonnet-4-6", label: "Sonnet 4.6", desc: "Balanced reasoning · ~3× cost" }, { id: "claude-opus-4-7", label: "Opus 4.7", desc: "Maximum reasoning · ~15× cost" }, ]; const DEFAULT_SETTINGS = { // Profile repName: "", repRole: "Franchise Development Rep", repEmail: "", repPhone: "", // Company companyName: "", companyWebsite: "", companyPhone: "", companyEmail: "", companyAddress: "", // Locale timezone: "AUTO", dateFormat: "MMM D, YYYY", timeFormat: "12h", currency: "USD", language: "en", weekStartsOn: "Sunday", // Appearance theme: "dark", density: "comfortable", accentColor: "#3b82f6", sidebarDefault: "open", showWelcomeBanner: true, // Notifications inAppToasts: true, toastDuration: "medium", soundEnabled: false, emailDigest: "daily", browserPush: false, notifyOnStale: true, notifyOnNewLead: true, notifyOnBrokerReply: true, notifyOnScoreDrop: false, // Pipeline defaultView: "list", showScoreRings: true, showStaleBadges: true, autoStageOnDocusign: true, highScoreThreshold: 75, lowScoreThreshold: 30, autoConvertOnFddSigned: false, requireTerritoryOnNew: false, // AI — per-feature model choice. Haiku 4.5 default everywhere = cheapest path. aiModelScore: "claude-haiku-4-5", aiModelWhatsNext: "claude-haiku-4-5", aiModelSummary: "claude-haiku-4-5", aiModelOrganize: "claude-haiku-4-5", aiModelFDD: "claude-haiku-4-5", autoScoreOnLoad: true, autoScoreOnNote: true, aiSummaryAutoOpen: false, aiOrganizeFrequency: "manual", aiToneHint: "professional", aiClassifyNotes: true, // Email & Templates emailSignature: "", fromName: "", defaultEmailFooter: "", trackingPixel: false, unsubscribeLink: true, bccArchive: "", defaultMergeBrandColor: true, // Integrations twilioSid: "", sendgridKey: "", zapierWebhook: "", slackWebhook: "", // Brokers showBrokerInLeads: false, defaultCommissionStructure: "50% of franchise fee", autoAssignBroker: false, brokerNotifications: true, brokerEmailCC: false, requireBrokerOnLargeDeals: false, // Security twoFactorEnabled: false, sessionTimeout: 60, passwordExpiry: 90, auditLog: true, ipAllowlist: "", // Advanced webhookUrl: "", apiAccessEnabled: false, debugMode: false, betaFeatures: false, dataRetentionDays: 730, experimentalKanbanLanes: false, useFunctionalUpdates: true, // ─── Configurable taxonomies (Phase 1: lead intake) ───────────────────────── // Net worth ranges in $100k increments up to a $2M+ ceiling, liquidity in $50k // increments to $500k+. The defaults are surfaced in lead/opp dropdowns and // can be reordered / renamed / extended in Settings → Lead Intake. netWorthOptions: ["Under $100k","$100k–$200k","$200k–$300k","$300k–$400k","$400k–$500k","$500k–$600k","$600k–$700k","$700k–$800k","$800k–$900k","$900k–$1M","$1M–$1.1M","$1.1M–$1.2M","$1.2M–$1.3M","$1.3M–$1.4M","$1.4M–$1.5M","$1.5M–$1.6M","$1.6M–$1.7M","$1.7M–$1.8M","$1.8M–$1.9M","$1.9M–$2M","$2M+"], liquidityOptions: ["Under $50k","$50k–$100k","$100k–$150k","$150k–$200k","$200k–$250k","$250k–$300k","$300k–$350k","$350k–$400k","$400k–$450k","$450k–$500k","$500k+"], // Lead sources — each entry: {id, name, type, config?}. `type` drives the integration setup // wizard ("manual" / "website_form" / "linkedin_lead_gen" / "meta_lead_ads" / "email_parser" / // "google_forms" / "zapier" / "webhook" / "csv_import"). Only `manual` sources are // available immediately; other types persist their config but stay "Setup pending" until // the SaaS proxy lights up the connector. leadSources: [ { id:"manual_referral", name:"Referral", type:"manual" }, { id:"manual_website", name:"Website", type:"manual" }, { id:"manual_linkedin", name:"LinkedIn", type:"manual" }, { id:"manual_trade_show", name:"Trade Show", type:"manual" }, { id:"manual_cold", name:"Cold Outreach", type:"manual" }, ], // Custom record fields — let admins extend leads/opps/brokers with extra boxes (text, // textarea, number, dropdown, date, checkbox). Native fields (firstName, email, phone, // etc.) are not represented here and cannot be edited or deleted; only user-added // fields live in these arrays. Each field: {id, key, label, type, options?, placeholder?, required?}. customFields: { leads: [], opps: [], brokers: [] }, // Seats (placeholder until SaaS multi-seat ships). Drives the Assigned To dropdown. // Each entry: {id, name, email, brandAccess: [brandId...]}. brandAccess [] = all brands. seats: [], }; function ToggleSwitch({ checked, onChange, disabled=false }) { return ( ); } function SettingRow({ label, description, badge, children }) { return (
{label}
{badge && {badge.text}}
{description && {description}
}
{children}
{title}
{subtitle && {subtitle}
}
{children}
{list.map((opt, i) => (
{i+1}.
{ const n=[...list]; n[i]=e.target.value; save(n); }} style={inp({flex:1,boxSizing:"border-box",fontSize:12,padding:"5px 9px"})}/>
))}
setDraft(e.target.value)} placeholder={helpText||"+ Add a new range…"} style={inp({flex:1,boxSizing:"border-box",fontSize:12})} onKeyDown={e=>{ if(e.key==="Enter" && draft.trim()){ save([...list, draft.trim()]); setDraft(""); } }}/>
e.stopPropagation()} style={{background:C.panel,border:`1px solid ${C.border}`,borderRadius:14,width:"100%",maxWidth:560,maxHeight:"90vh",display:"flex",flexDirection:"column"}}>
🔌
Add Lead Source
Pick a name and (optionally) wire up an integration.
NAME
setName(e.target.value)} placeholder="e.g. Trade Show 2026" style={inp({width:"100%",boxSizing:"border-box",marginBottom:14})} autoFocus/>
HOW DO LEADS COME IN?
{LEAD_SOURCE_TYPES.map(t => {
const sel = picked === t.id;
return (
);
})}
{cfg && !cfg.instant && (
⚠️ Connector activation arrives with multi-seat SaaS. Your source will be saved and selectable in dropdowns right away; the live data pipe lights up when the proxy ships.
)}
{sources.map(s => {
const t = LEAD_SOURCE_TYPES.find(x => x.id === s.type) || LEAD_SOURCE_TYPES[0];
return (
{t.icon}
);
})}
{s.name}
{!t.instant && SETUP PENDING}
{t.label}
e.stopPropagation()} style={{background:C.panel,border:`1px solid ${C.border}`,borderRadius:14,width:"100%",maxWidth:500,maxHeight:"90vh",display:"flex",flexDirection:"column"}}>
{form.type === "select" && (
)}
{form.type !== "checkbox" && (
)}
➕
{field?.id?"Edit Custom Field":"New Custom Field"}
Add an extra box to this entity's profile + edit form.
LABEL
{ set("label", e.target.value); if (!field?.id) set("key", e.target.value.toLowerCase().replace(/[^a-z0-9]+/g,"_").replace(/^_|_$/g,"")); }} placeholder="e.g. Spouse Name, Funding Source" style={inp({width:"100%",boxSizing:"border-box"})} autoFocus/>
KEY (internal identifier — letters, digits, underscore only)
set("key", e.target.value.replace(/[^a-zA-Z0-9_]/g,""))} placeholder="e.g. spouse_name" disabled={!!field?.id} style={inp({width:"100%",boxSizing:"border-box",opacity:field?.id?0.6:1})}/>
FIELD TYPE
OPTIONS
{(form.options||[]).map((o, i) => (
{ const n=[...form.options]; n[i]=e.target.value; set("options", n); }} style={inp({flex:1,boxSizing:"border-box",fontSize:12,padding:"5px 9px"})}/>
))}
setOptDraft(e.target.value)} placeholder="+ Add option" style={inp({flex:1,boxSizing:"border-box",fontSize:12})} onKeyDown={e=>{ if(e.key==="Enter" && optDraft.trim()){ set("options", [...(form.options||[]), optDraft.trim()]); setOptDraft(""); } }}/>
PLACEHOLDER (optional)
set("placeholder", e.target.value)} placeholder="Hint shown when the field is empty" style={inp({width:"100%",boxSizing:"border-box"})}/>
{(BUILTIN_FIELDS[tab]||[]).map(f => (
🔒 {f}
))}
{[["leads","Leads"],["opps","Opportunities"],["brokers","Brokers"]].map(([k,l])=>(
))}
No custom fields yet. Add one to capture data the built-in fields don't cover (e.g. Spouse Name, Funding Source, Discovery Day Date).
) : (
{fields.map(f => (
))}
)}
{f.label}
{f.required && REQUIRED}
{f.type} · key:
{f.key}{f.type==="select" && f.options?.length ? ` · ${f.options.length} options` : ""}{settings.repName || "(set your name in Profile)"}
{settings.repRole}{settings.repEmail?` · ${settings.repEmail}`:""}
No additional team members yet. Add one to make their name selectable in Assigned To dropdowns.
) : (
{seats.map(s => {
const all = !s.brandAccess?.length;
const accessLabel = all ? `All brands (${brands.length})` : `${s.brandAccess.length} of ${brands.length} brands`;
const roleLabel = (SEAT_ROLES.find(r => r.id === s.role)?.label) || "Frandev Rep";
const perms = s.permissions || permsForRole(s.role || "frandev_rep");
const defaultPerms = new Set(permsForRole(s.role || "frandev_rep"));
const matches = perms.length === defaultPerms.size && perms.every(p => defaultPerms.has(p));
return (
);
})}
)}
{s.name}
{roleLabel.toUpperCase()}
{!matches && s.role !== "custom" && CUSTOMIZED}
{s.email||"(no email)"}{s.phone?` · ${s.phone}`:""} · {accessLabel} · {perms.length}/{PERMISSIONS.length} permissions
⚠️ Multi-seat sign-in arrives with SaaS. Today, seats here populate dropdowns; they don't get their own login yet.
e.stopPropagation()} style={{background:C.panel,border:`1px solid ${C.border}`,borderRadius:14,width:"100%",maxWidth:520,maxHeight:"90vh",display:"flex",flexDirection:"column"}}>
👤
{seat?.id?"Edit Seat":"Add Team Member"}
Drives the Assigned To dropdown across brands they can access.
NAME *
set("name", e.target.value)} placeholder="e.g. Alex Kim" style={inp({width:"100%",boxSizing:"border-box"})} autoFocus/>
EMAIL *
set("email", e.target.value)} placeholder="alex@yourorg.com" style={inp({width:"100%",boxSizing:"border-box", paddingRight: emailIssue?32:undefined, borderColor: emailIssue ? "#fb923c66" : undefined})}/>
{emailIssue && ⚠️}
{emailIssue && {emailIssue}
}
This is the email used to log in when SaaS multi-seat launches.
PHONE (optional)
set("phone", e.target.value)} placeholder="e.g. 555-123-4567" style={inp({width:"100%",boxSizing:"border-box", paddingRight: phoneIssue?32:undefined, borderColor: phoneIssue ? "#fb923c66" : undefined})}/>
{phoneIssue && ⚠️}
{phoneIssue && {phoneIssue}
}
ROLE *
{!matchesRoleDefault && form.role !== "custom" && CUSTOMIZED}
{SEAT_ROLES.map(r => {
const sel = form.role === r.id;
return (
);
})}
Picking a role pre-selects its default permissions below. Every permission stays editable — admins can grant extra access at creation, or tighten later.
PERMISSIONS
{!matchesRoleDefault && form.role !== "custom" && (
)}
{groupOrder.map(group => {
const items = groupedPerms[group] || [];
if (!items.length) return null;
const allChecked = items.every(p => currentSet.has(p.id));
const someChecked = items.some(p => currentSet.has(p.id));
return (
);
})}
{ if (el) el.indeterminate = someChecked && !allChecked; }}
onChange={e => toggleGroup(group, e.target.checked)}
/>
{group}
{items.filter(p => currentSet.has(p.id)).length} / {items.length}
{items.map(p => {
const on = currentSet.has(p.id);
return (
);
})}
BRAND ACCESS
Pick which brands this person appears in. Leave all unchecked to grant access to every brand (including ones added later).
{brands.map(b => (
))}
{tip.text}
);
}
// ═══════════════════════════════════════════════════════════
// SMALL COMPONENTS
// ═══════════════════════════════════════════════════════════
function Ava({ name="?", size=34 }) {
const i = name.trim().split(" ").map(w=>w[0]||"").join("").slice(0,2).toUpperCase()||"?";
const h = [...name].reduce((a,c)=>a+c.charCodeAt(0),0)%360;
return {i}
;
}
function SBadge({ stageId, stages=[] }) {
const s = stages.find(x=>x.id===stageId)||{color:"#64748b",icon:"◎",label:stageId};
return {s.label};
}
function Sec({ children, style={} }) {
return {children}
;
}
function ModalShell({ title, onClose, children, maxW=520 }) {
return (