/* WP Site Beam — WP Scope Estimator */ /* Hosting plan library — pre-filled from the live price sheet. cost/profit/margin carried through so Plan Comparison matches the legacy estimator exactly. */ const CD_PLANS = { /* ── M plans — hosting only, no care ─────────────────────────── */ M: [ { code:'CD-M-B2', label:'B2', support:'—', charge:100, cost:33.26, profit:66.74, margin:66.7, hosting:15, cats:['business'], inc:'Business hosting · No care' }, { code:'CD-M-B3', label:'B3', support:'—', charge:135, cost:44.59, profit:90.41, margin:67.0, hosting:25, cats:['business'], inc:'Business+ hosting · No care' }, { code:'CD-M-S2', label:'S2', support:'—', charge:165, cost:55.73, profit:109.27, margin:66.2, hosting:35, cats:['business','ecommerce','lms','social'], inc:'Standard hosting · No care' }, { code:'CD-M-S3', label:'S3', support:'—', charge:195, cost:66.87, profit:128.13, margin:65.7, hosting:45, cats:['business','ecommerce','lms','social'], inc:'Standard+ hosting · No care' }, { code:'CD-M-G2', label:'G2', support:'—', charge:527, cost:184.49,profit:342.51, margin:65.0, hosting:150, cats:['ecommerce','lms','social'], inc:'Growth+ hosting · No care' }, { code:'CD-M-G3', label:'G3', support:'—', charge:195, cost:66.87, profit:128.13, margin:65.7, hosting:45, cats:['business'], inc:'Growth tier · No care' }, { code:'CD-M-P2', label:'P2', support:'—', charge:525, cost:234.41,profit:290.59, margin:55.4, hosting:200, cats:['ecommerce','lms','social'], inc:'Pro+ hosting · No care' }, { code:'CD-M-U2', label:'U2', support:'—', charge:725, cost:342.01,profit:382.99, margin:52.8, hosting:300, cats:['ecommerce','lms','social'], inc:'Ultimate+ hosting · No care' }, ], /* ── MWC plans — hosting + care bundled ──────────────────────── */ MWC: [ { code:'CD-MWC-B2-15', label:'B2', support:'15 min', charge:125, cost:34.21, profit:90.79, margin:72.6, hosting:15, cats:['business'], inc:'Business + 15 min/mo' }, { code:'CD-MWC-B3-15', label:'B3', support:'15 min', charge:155, cost:45.35, profit:109.65, margin:70.7, hosting:25, cats:['business'], inc:'Business+ + 15 min/mo' }, { code:'CD-MWC-B3-30', label:'B3', support:'30 min', charge:185, cost:57.12, profit:127.88, margin:69.1, hosting:25, cats:['business'], inc:'Business+ + 30 min/mo' }, { code:'CD-MWC-S2-15', label:'S2', support:'15 min', charge:185, cost:83.36, profit:101.64, margin:54.9, hosting:35, cats:['business','ecommerce','lms','social'], inc:'Standard+ + 15 min/mo' }, { code:'CD-MWC-S3-15', label:'S3', support:'15 min', charge:215, cost:94.50, profit:120.50, margin:56.1, hosting:45, cats:['business','ecommerce','lms','social'], inc:'Standard Pro + 15 min/mo' }, { code:'CD-MWC-G2-15', label:'G2', support:'15 min', charge:445, cost:213.26,profit:231.74, margin:52.1, hosting:150, cats:['ecommerce','lms','social'], inc:'Growth+ + 15 min/mo' }, { code:'CD-MWC-P2-15', label:'P2', support:'15 min', charge:595, cost:279.59,profit:315.41, margin:53.0, hosting:200, cats:['ecommerce','lms','social'], inc:'Pro+ + 15 min/mo' }, { code:'CD-MWC-U2-15', label:'U2', support:'15 min', charge:895, cost:390.99,profit:504.01, margin:56.3, hosting:300, cats:['ecommerce','lms','social'], inc:'Ultimate+ + 15 min/mo' }, { code:'CD-MWC-T1-15', label:'T1', support:'15 min', charge:1195,cost:584.53,profit:610.47, margin:51.1, hosting:500, cats:['ecommerce','lms','social'], inc:'Enterprise + 15 min/mo' }, ], CARE_ONLY: [ { code:'CD-CARE-S1', label:'Support Starter', support:'30 min/mo', charge:49, inc:'30 min support · WP updates · uptime monitoring', bestFor:'Personal/brochure sites' }, { code:'CD-CARE-S2', label:'Support Basic', support:'60 min/mo', charge:79, inc:'1 hr support · WP updates · backups · uptime', bestFor:'Small business sites' }, { code:'CD-CARE-S3', label:'Support Standard',support:'90 min/mo', charge:119, inc:'90 min support · WP updates · backups · security scans',bestFor:'Active business sites' }, { code:'CD-CARE-P1', label:'Support Pro', support:'120 min/mo', charge:179, inc:'2 hr support · full managed care · priority response', bestFor:'eCommerce / high-traffic' }, { code:'CD-CARE-E1', label:'Support Elite', support:'240 min/mo', charge:299, inc:'4 hr support · dedicated care · SLA response', bestFor:'Enterprise / mission-critical' }, ], CIVIC: [ { code:'CIVIC-STARTER', label:'Civic Starter', pop:'Under 300', pages:'5–15', buildMin:5950, buildMax:7950, support:'30 min', charge:249, inc:'30 min support · Civic stack' }, { code:'CIVIC-COMMUNITY', label:'Civic Community', pop:'300–5,000', pages:'15–40', buildMin:5950, buildMax:8950, support:'45 min', charge:295, inc:'45 min support · Doc storage' }, { code:'CIVIC-ESSENTIAL', label:'Civic Essential', pop:'5,000–10,000', pages:'25–75', buildMin:8950, buildMax:12500, support:'60 min', charge:425, inc:'60 min support · Full civic' }, { code:'CIVIC-PROFESSIONAL', label:'Civic Professional', pop:'10,000–25,000', pages:'40–100', buildMin:12500, buildMax:18500, support:'60 min', charge:500, inc:'60 min support · Gov tools' }, { code:'CIVIC-ENTERPRISE', label:'Civic Enterprise', pop:'25,000–60,000', pages:'75–150', buildMin:18500, buildMax:26500, support:'90 min', charge:875, inc:'90 min support · Gov suite' }, { code:'CIVIC-GOVPLUS', label:'Civic Gov Plus', pop:'60,000+', pages:'100–250', buildMin:26500, buildMax:35000, support:'120 min', charge:1095, inc:'120 min support · Full gov' }, { code:'CIVIC-GOVENT', label:'Civic Gov Enterprise', pop:'County / Multi-Dept',pages:'150–400+', buildMin:35000, buildMax:99000, support:'120 min', charge:1295, inc:'120 min support · Max gov' }, ], }; window.CD_PLANS = CD_PLANS; function Estimator() { const { useState, useMemo, useEffect } = React; const [s] = window.useWPSBD(); const [tab, setTab] = useState('estimate'); const cart = (window.useProposalCart && window.useProposalCart()) || { items: [], tokens: {}, narrative: {} }; const adaItems = (cart.items || []).filter(i => i.source === 'ada-scan' && i.included !== false); const [siteType, setSiteType] = useState('business'); const [pages, setPages] = useState(12); const [popTier, setPopTier] = useState(1); const [tier, setTier] = useState('medium'); const [addons, setAddons] = useState({ cpt:true, smtp:true, seo:false, gbp:false, ssl:true, migration:true, training:false, woocommerce:false, membership:false, docLibrary:false, minutes:false, agenda:false, accessibility:false, }); const [monthly, setMonthly] = useState({ cloudflare:false, ada:false, plugin1:false, plugin2:false, retainer:false, appCivic:false, }); const [hours, setHours] = useState(0); const [editing, setEditing] = useState(false); const [docLoad, setDocLoad] = useState('none'); const [complexity, setComplexity] = useState('standard'); const [rush, setRush] = useState('standard'); // Auto-detected items from scanner (url + detected list) const [autoDetected, setAutoDetected] = useState({ scannedSite: null, // e.g. 'republiccounty.org' detected: [], // [{ key, label, price, reason }] }); // White Label & Branding (pre-filled from Agency Profile, customizable per-proposal) // Agency Plan+ feature const [brandOpen, setBrandOpen] = useState(false); const [brand, setBrand] = useState(() => { // Pulls from global brand profile (Account Settings → Brand) try { const saved = JSON.parse(localStorage.getItem('wpsb-agency-brand') || '{}'); return { agencyName: 'Your Agency', tagline: 'WordPress care done right', primary: 'var(--orange)', accent: 'var(--beam)', logoUrl: '', fontHead: 'Orbitron', fontBody: 'DM Sans', clientName: '', clientEmail:'', proposalFooter: '', ...saved, }; } catch(e) { return { agencyName:'', tagline:'', primary:'var(--orange)', accent:'var(--beam)', logoUrl:'', fontHead:'Orbitron', fontBody:'DM Sans', clientName:'', clientEmail:'', proposalFooter:'' }; } }); function saveBrandGlobal() { try { localStorage.setItem('wpsb-agency-brand', JSON.stringify(brand)); } catch(e){} } const docLoadOpts = [ { id:'none', lbl:'None', desc:'No docs', mult:1.0 }, { id:'light', lbl:'Light', desc:'Basic PDFs', mult:1.0 }, { id:'moderate', lbl:'Moderate', desc:'Depts + agendas', mult:1.15 }, { id:'heavy', lbl:'Heavy', desc:'Large archives', mult:1.325}, ]; const complexityOpts = [ { id:'standard', lbl:'Standard', mult:1.0 }, { id:'complex', lbl:'Complex', mult:1.25 }, { id:'high', lbl:'High', mult:1.5 }, ]; const rushOpts = [ { id:'standard', lbl:'Standard', mult:1.0 }, { id:'2weeks', lbl:'2 Weeks', mult:1.25 }, { id:'1week', lbl:'1 Week', mult:1.5 }, ]; // Listen for Scanner → Estimator push payloads useEffect(() => { try { const raw = sessionStorage.getItem('wpsb_estimator_payload'); if (raw) { const p = JSON.parse(raw); if (p.siteType) setSiteType(p.siteType); if (typeof p.pages === 'number') setPages(p.pages); if (p.tier) setTier(p.tier); if (p.popTier !== undefined) setPopTier(p.popTier); if (p.detected) { setAutoDetected({ scannedSite: p.scannedSite || 'acme.co', detected: p.detected }); const pre = {}; p.detected.forEach(d => { pre[d.key] = true; }); setAddons(a => ({...a, ...pre})); } sessionStorage.removeItem('wpsb_estimator_payload'); } else { // Demo mode: show auto-detected state for illustration setAutoDetected({ scannedSite: 'republiccounty.org', detected: [ { key:'ssl', label:'SSL Install + Configuration', price:150, reason:'No HTTPS detected' }, { key:'migration', label:'Content Migration (from old site)',price:650, reason:'44 pages on legacy CMS' }, { key:'accessibility', label:'ADA / WCAG 2.1 AA Remediation', price:675, reason:'Civic classification · 18 ADA issues' }, { key:'docLibrary', label:'Document Library Setup (Civic)', price:850, reason:'312 PDFs on /documents' }, ], }); setAddons(a => ({...a, ssl:true, migration:true, accessibility:true, docLibrary:true})); } } catch(e){} }, []); const isCivic = siteType === 'civic'; // Editable site classifications — matches old system const [siteTypes, setSiteTypes] = useState([ { id:'business', lbl:'Business', emoji:'🏢', rate:95 }, { id:'lms', lbl:'LMS', emoji:'🎓', rate:140 }, { id:'ecommerce', lbl:'eCommerce', emoji:'🛒', rate:125 }, { id:'social', lbl:'Social', emoji:'📱', rate:115 }, { id:'civic', lbl:'Civic / Gov', emoji:'🏛️', rate:105 }, ]); // Editable business tiers — matches old system: 5 tiers with hrs + page ranges. // priceMin/priceMax drive the Build Estimate range; pageMin/pageMax + hrsMin/hrsMax // feed the hours & page-count readout. const [bizTiers, setBizTiers] = useState([ { id:'starter', lbl:'Starter', basePrice:1950, priceMin:1900, priceMax:2900, care:79, pageMin:5, pageMax:10, hrsMin:9, hrsMax:17, pages:'5–10 pages', hrs:'9–17 hrs', desc:'Small brochure / solo' }, { id:'small', lbl:'Small', basePrice:2950, priceMin:2900, priceMax:4200, care:119, pageMin:10, pageMax:20, hrsMin:17, hrsMax:24, pages:'10–20 pages', hrs:'17–24 hrs', desc:'Small business' }, { id:'medium', lbl:'Medium', basePrice:4850, priceMin:4200, priceMax:6900, care:159, pageMin:20, pageMax:40, hrsMin:31, hrsMax:46, pages:'20–40 pages', hrs:'31–46 hrs', desc:'Growing business' }, { id:'large', lbl:'Large', basePrice:7850, priceMin:6900, priceMax:10800, care:199, pageMin:40, pageMax:70, hrsMin:31, hrsMax:68, pages:'40–70 pages', hrs:'31–68 hrs', desc:'Established / complex' }, { id:'custom', lbl:'Enterprise', basePrice:12850, priceMin:10800, priceMax:18500, care:299, pageMin:70, pageMax:125, hrsMin:68, hrsMax:111, pages:'70–125 pages', hrs:'68–111 hrs', desc:'Enterprise / integrations' }, ]); // Editable Civic plans (client-side copy so user edits don't mutate global) const [civicPlans, setCivicPlans] = useState(() => CD_PLANS.CIVIC.map(p => ({...p}))); // Per-page adder rate (editable) const [perPageRate, setPerPageRate] = useState(85); function updateSiteRate(id, rate) { setSiteTypes(prev => prev.map(s => s.id === id ? {...s, rate} : s)); } function updateTier(id, patch) { setBizTiers(prev => prev.map(t => t.id === id ? {...t, ...patch} : t)); } function updateCivic(i, patch) { setCivicPlans(prev => prev.map((p, idx) => idx === i ? {...p, ...patch} : p)); } const bizSetupAddons = [ ['cpt', 'Custom Post Type Setup + Migration', 450], ['smtp', 'SMTP / Email Deliverability Setup', 225], ['seo', 'SEO Plugin Setup + Configuration', 350], ['gbp', 'Google Business Profile Setup', 275], ['ssl', 'SSL Install + Configuration', 150], ['migration', 'Content Migration (from old site)', 650], ['training', 'Client Training Session (90 min)', 225], ['woocommerce', 'WooCommerce Setup (up to 25 products)', 1250], ['membership', 'Membership / LMS Integration', 1850], ]; const civicSetupAddons = [ ['docLibrary', 'Document Library Setup (Civic)', 850], ['minutes', 'Commission Minutes Import', 450], ['agenda', 'Agenda Management System', 950], ['accessibility','ADA / WCAG 2.1 AA Remediation', 675], ['ssl', 'SSL Install + Configuration', 150], ['migration', 'Content Migration (from old site)', 650], ['training', 'Staff Training Session (90 min)', 225], ]; const addonList = isCivic ? civicSetupAddons : bizSetupAddons; const monthlyList = [ ['cloudflare', 'Cloudflare Pro Integration', 20], ['ada', 'Accessibility (ADA/WCAG) Tool', 30], ['plugin1', 'Custom Plugin License #1', 19], ['plugin2', 'Custom Plugin License #2', 12], ['retainer', 'Extended Care Retainer', 150], ...(isCivic ? [['appCivic', 'Web-to-App — Civic Plan', 249]] : []), ]; const totals = useMemo(() => { let base, baseMin, baseMax, hrsMin, hrsMax, pageMin, pageMax, scopeLabel; if (isCivic) { const plan = civicPlans[popTier] || civicPlans[1]; base = Math.round((plan.buildMin + plan.buildMax) / 2); baseMin = plan.buildMin; baseMax = plan.buildMax; hrsMin = plan.hrsMin || Math.round(plan.buildMin / 105); hrsMax = plan.hrsMax || Math.round(plan.buildMax / 105); const pp = (plan.pages || '').split('–'); pageMin = Number(pp[0]) || 0; pageMax = Number((pp[1] || '').replace(/[^0-9]/g,'')) || pageMin; scopeLabel = plan.label; } else { const t = bizTiers.find(x => x.id === tier) || bizTiers[2]; base = t.basePrice; const extraPages = Math.max(0, pages - 8) * perPageRate; baseMin = t.priceMin + extraPages; baseMax = t.priceMax + extraPages; base = base + extraPages; hrsMin = t.hrsMin; hrsMax = t.hrsMax; pageMin = t.pageMin; pageMax = t.pageMax; scopeLabel = t.lbl; } const addonSetup = addonList.reduce((s, [k,,p]) => s + (addons[k] ? p : 0), 0); const monthlyAddon = monthlyList.reduce((s, [k,,p]) => s + (monthly[k] ? p : 0), 0); const care = isCivic ? (civicPlans[popTier] || civicPlans[1]).charge : bizTiers.find(t => t.id === tier).care; // ADA remediation totals — pulled from ProposalCart const adaLow = adaItems.filter(i => !i.recurring).reduce((s,i) => s + (i.lowPrice || 0), 0); const adaHigh = adaItems.filter(i => !i.recurring).reduce((s,i) => s + (i.highPrice || 0), 0); const adaMo = adaItems.filter(i => i.recurring).reduce((s,i) => s + (i.lowPrice || 0), 0); const docMult = isCivic ? (docLoadOpts.find(o => o.id === docLoad)?.mult || 1) : 1; const complexMult = complexityOpts.find(o => o.id === complexity)?.mult || 1; const rushMult = rushOpts.find(o => o.id === rush)?.mult || 1; const totalMult = docMult * complexMult * rushMult; const rawSetup = base + addonSetup; const rawSetupMin = baseMin + addonSetup; const rawSetupMax = baseMax + addonSetup; const adjustedSetup = Math.round(rawSetup * totalMult) + adaLow; const adjustedSetupMin = Math.round(rawSetupMin * totalMult) + adaLow; const adjustedSetupMax = Math.round(rawSetupMax * totalMult) + adaHigh; return { setup: adjustedSetup, setupMin: adjustedSetupMin, setupMax: adjustedSetupMax, rawSetup, monthly: care + monthlyAddon + hours * 90 + adaMo, careBase: care, monthlyAddon, addonSetup, adaLow, adaHigh, adaMo, adaCount: adaItems.length, base, baseMin, baseMax, hrsMin, hrsMax, pageMin, pageMax, scopeLabel, docMult, complexMult, rushMult, totalMult, }; }, [tier, popTier, pages, addons, monthly, hours, siteType, bizTiers, civicPlans, perPageRate, docLoad, complexity, rush, adaItems]); /* ── Recommended plans: bottom-of-category (MIN) then next two business-cat matches, hidden items filtered out. Matches legacy estimator logic. ───────────────────────────────── */ const recommend = useMemo(() => { const cat = isCivic ? 'business' : siteType; // civic uses its own care via CIVIC array const matches = arr => arr.filter(p => !p.hidden && (!p.cats || p.cats.length === 0 || p.cats.includes(cat))) .sort((a,b) => a.charge - b.charge); const mList = matches(CD_PLANS.M).slice(0, 3); const mwcList = matches(CD_PLANS.MWC).slice(0, 3); return { hosting: mList, care: mwcList, hostingRange: mList.length ? [mList[0].charge, mList[mList.length-1].charge] : null, careRange: mwcList.length ? [mwcList[0].charge, mwcList[mwcList.length-1].charge] : null, }; }, [siteType, isCivic]); return (
}/>
{[ ['estimate','Estimator'], ['pagegap','Page Gap'], ['catalog','Service Catalog'], ['hosting','Hosting Plans'], ['rules','Trigger Rules'], ['proposal','Proposal'], ['email','Email Templates'], ].map(([id, lbl]) => ( ))}
{tab === 'estimate' && (
{/* White Label & Branding (Agency Plan+) */}
setBrandOpen(v => !v)}>

White Label & Branding AGENCY PLAN+ · {brand.agencyName}

{brandOpen && (
{/* Gallery layout — preview left, compact form right */}
{/* LEFT — live preview card */}
{!brand.logoUrl && brand.agencyName.split(' ').map(w=>w[0]).join('').slice(0,2)}
{brand.agencyName}
{brand.tagline || '—'}
{brand.fontHead} · {brand.fontBody}
Proposal for {brand.clientName || 'Client'}
{brand.clientEmail || 'contact@client.co'}
LIVE PREVIEW
{/* RIGHT — compact control strip in 2-col grid */}
setBrand({...brand, agencyName: e.target.value})}/> setBrand({...brand, tagline: e.target.value})}/> setBrand({...brand, clientName: e.target.value})}/> setBrand({...brand, clientEmail: e.target.value})}/>
setBrand({...brand, primary: e.target.value})} style={{ width:30, height:28, padding:1, border:'1px solid var(--border)', background:'var(--surface-3)', borderRadius:4, flexShrink:0 }}/> setBrand({...brand, primary: e.target.value})} style={{ flex:1, minWidth:0, fontSize:'.72rem' }}/>
setBrand({...brand, accent: e.target.value})} style={{ width:30, height:28, padding:1, border:'1px solid var(--border)', background:'var(--surface-3)', borderRadius:4, flexShrink:0 }}/> setBrand({...brand, accent: e.target.value})} style={{ flex:1, minWidth:0, fontSize:'.72rem' }}/>
setBrand({...brand, fontHead: v})} ariaLabel="Heading font"/> setBrand({...brand, fontBody: v})} ariaLabel="Body font"/>
setBrand({...brand, logoUrl: e.target.value})} style={{ flex:1, minWidth:0 }}/>
setBrand({...brand, proposalFooter: e.target.value})}/>
WPSiteBeam branding never shown to client ✓
)}
{/* Site Classification */}
1. Site Classification
Rates editable
{siteTypes.map(s => ( ))}
setPages(Number(e.target.value))}/>
{!isCivic && (
$ setPerPageRate(Number(e.target.value))} disabled={!editing} style={{ flex:1 }}/>
)}
{/* Civic: Population tier OR Business: Build tier */} {isCivic ? (
2. Population Tier — Civic {civicPlans.length} TIERS
Civic builds are priced by population served, not page count. Auto-populated when scanner detects civic classification.
{civicPlans.map((p, i) => ( ))}
) : (
2. Page Tier — Build Size {bizTiers.length} TIERS
Content pages only — web policy pages (Privacy Policy, Terms, Disclaimer, Cookie Notice, EULA) are included in all plans.
{bizTiers.map(t => ( ))}
)} {/* 3. Document Load Complexity — civic only */} {isCivic && (
3. Document Load Complexity CIVIC
{docLoadOpts.map(o => ( ))}
)} {/* Project Multipliers */}
{(isCivic ? '4.' : '3.') + ' Project Multipliers'} ×{totals.totalMult.toFixed(2)} total
{complexityOpts.map(o => ( ))}
{rushOpts.map(o => ( ))}
{/* Auto-Detected Services */} {autoDetected.detected.length > 0 && (

✨Auto-Detected Services

{autoDetected.detected.length} DETECTED
These line items were added automatically based on what WP Beam Scan detected on {autoDetected.scannedSite}. Toggle any item to include or exclude.
{autoDetected.detected.map((d, i) => (
{d.label} AUTO
${d.price} · {d.reason}
setAddons({...addons, [d.key]: v})}/>
))}
)} {/* From ADA Scan (Proposal Cart) — pulls remediation items from Scanner → ADA tab */} {adaItems.length > 0 && (

From ADA Scan {adaItems.length} IN CART

Remediation items added from the Scanner → ADA tab via + Cart actions. Edit pricing & scope here — changes flow through to the proposal.
{(cart.items || []).filter(i => i.source === 'ada-scan').map((item) => ( ))}
Line item Priority Low High Hrs Include
{item.label}
{item.description &&
{item.description}
} {item.scope &&
{item.scope}
} 		{(item.priority || 'medium').toUpperCase()} window.ProposalCart.updateItem(item.id, { lowPrice: Number(e.target.value) })} style={{ width:80, padding:'2px 6px', fontSize:'.76rem', textAlign:'right', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:4, color:'var(--text)', fontFamily:'var(--font-mono)' }}/> window.ProposalCart.updateItem(item.id, { highPrice: Number(e.target.value) })} style={{ width:80, padding:'2px 6px', fontSize:'.76rem', textAlign:'right', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:4, color:'var(--text)', fontFamily:'var(--font-mono)' }}/> window.ProposalCart.updateItem(item.id, { hours: Number(e.target.value) })} style={{ width:54, padding:'2px 6px', fontSize:'.76rem', textAlign:'right', background:'var(--surface)', border:'1px solid var(--border)', borderRadius:4, color:'var(--text)', fontFamily:'var(--font-mono)' }}/> window.ProposalCart.updateItem(item.id, { included: v })}/>
ADA remediation subtotal ${totals.adaLow.toLocaleString()} ${totals.adaHigh.toLocaleString()}
)} {/* Setup add-ons */}

{isCivic ? '5.' : '4.'} Setup Add-ons {isCivic && — Civic stack}

ONE-TIME
{addonList.map(([k, lbl, price], i) => (
{lbl}
${price}
setAddons({...addons, [k]: v})}/>
))}
{/* Monthly add-ons */}
4. Monthly Add-ons MONTHLY
{monthlyList.map(([k, lbl, price], i) => (
{lbl}
${price}/mo
setMonthly({...monthly, [k]: v})}/>
))}
Prepaid Hour Block (hrs/mo)
$90/hr
setHours(Number(e.target.value))} style={{ width:70 }}/>
{/* Summary sticky panel */}

Build Estimate

LIVE
{/* Big range + hours/pages */}
${totals.setupMin.toLocaleString()} – ${totals.setupMax.toLocaleString()}
{totals.hrsMin}–{totals.hrsMax} hrs · {totals.pageMin}–{totals.pageMax} pages · {totals.scopeLabel}
⚡ Build: {totals.scopeLabel} ({totals.pageMin}–{totals.pageMax} pages) ${totals.baseMin.toLocaleString()}–${totals.baseMax.toLocaleString()}
{totals.addonSetup > 0 && (
Setup add-ons${totals.addonSetup.toLocaleString()}
)} {totals.adaCount > 0 && (
◆ ADA remediation ({totals.adaCount} items) ${totals.adaLow.toLocaleString()}–${totals.adaHigh.toLocaleString()}
)} {totals.totalMult !== 1 && (
Multipliers ×{totals.totalMult.toFixed(2)}
)}
Total estimate ${totals.setupMin.toLocaleString()}–${totals.setupMax.toLocaleString()}
{/* Recommended Hosting (3 lowest M plans matching site type) */} {recommend.hosting.length > 0 && (

Recommended Hosting

M PLANS
Fully-Managed Hosting (Backend Only)
${recommend.hostingRange[0]}–${recommend.hostingRange[1]}/mo
{recommend.hosting.map((p, i) => (
{p.code} {i === 0 && MIN}
{p.inc}
${p.charge}/mo
{Math.round(p.margin)}% margin
))}
)} {/* Recommended Care (3 lowest MWC plans matching site type) */} {recommend.care.length > 0 && (

Recommended Care Plan

MWC PLANS
Fully-Managed Hosting + Care (Front and Backend)
${recommend.careRange[0]}–${recommend.careRange[1]}/mo
{recommend.care.map((p, i) => (
{p.code} {i === 0 && MIN} {p.support}
{p.inc}
${p.charge}/mo
{Math.round(p.margin)}% margin
))}
)} {/* Monthly Ongoing Costs */}

📅Monthly Ongoing Costs

MONTHLY
Optional Add-ons · Added to monthly recurring total
{isCivic ? 'Civic care plan' : 'Care plan base'}${totals.careBase}/mo
Monthly add-ons${totals.monthlyAddon}/mo
{hours > 0 &&
{hours} hour block${hours * 90}/mo
}
Monthly recurring${totals.monthly}/mo
12-mo: ${(totals.monthly * 12).toLocaleString()}
)} {/* Full Plan Comparison (below grid, visible on estimate tab) */} {tab === 'estimate' && } {tab === 'pagegap' && } {tab === 'catalog' && } {tab === 'hosting' && } {tab === 'rules' && } {tab === 'proposal'&& } {tab === 'email' && }
); } function Toggle({ on, onChange }) { return ( ); } /* ── PLAN COMPARISON ───────────── Three-tab comparison (M / MWC / Civic) showing code, charge, cost, profit, margin and inclusions — carried over from the legacy WP Scope Estimator. The `highlightCat` arg dims rows that don't match the current site type so the relevant plans pop. */ function PlanComparisonSection({ siteType }) { const { useState } = React; const [tab, setTab] = useState('M'); const rows = CD_PLANS[tab] || []; const marginTone = (m) => m >= 65 ? 'var(--green)' : m >= 55 ? 'var(--beam)' : m >= 50 ? 'var(--warn)' : 'var(--red)'; return (

📋Plan Comparison

{['M','MWC','CIVIC'].map(k => ( ))}
{tab !== 'CIVIC' ? ( {rows.map(p => { const matches = !p.cats || p.cats.length === 0 || p.cats.includes(siteType); return ( ); })}
Code Charge/mo Cost Profit Margin Includes
{p.code} ${p.charge} ${p.cost?.toFixed?.(2) ?? '—'} ${p.profit?.toFixed?.(2) ?? '—'} {p.margin?.toFixed?.(1)}% {p.inc}
) : ( {rows.map(p => ( ))}
Code Population Pages Build Support Charge/mo Includes
{p.code} {p.pop} {p.pages} ${p.buildMin.toLocaleString()}–${p.buildMax.toLocaleString()} {p.support} ${p.charge} {p.inc}
)}
); } function PageGapTab() { const scanned = ['Home','About','Services','Pricing','Team','Contact','Blog','Blog: Post 1','Blog: Post 2','Careers','Case Studies','Privacy']; const standard = ['Home','About','Services','Pricing','Contact','Blog','Privacy','Terms','Sitemap','FAQ']; const matched = scanned.filter(p => standard.some(s => p.startsWith(s))); const missing = standard.filter(s => !scanned.some(p => p.startsWith(s))); return (
Pages scanned
{scanned.length}
Matched to standard
{matched.length}
Missing standard
{missing.length}

Pages on current site

FROM SCAN
{scanned.map((p, i) => (
{(i+1).toString().padStart(2,'0')} {p} {standard.some(s => p.startsWith(s)) && }
))}

Standard pages (missing)

{missing.length} GAPS
{missing.map(p => (
+
{p}
Recommended page
))}
); } function CatalogTab() { const rows = [ ['CPT Setup + Migration', 'setup', 450, 'Custom post type setup w/ ACF fields and content migration.'], ['SMTP Email Integration', 'setup', 225, 'SendGrid / Postmark wiring and DNS records.'], ['SSL Install + Configuration', 'setup', 150, 'Install certificate, force HTTPS, fix mixed content.'], ['WooCommerce Setup', 'setup', 1250, 'Products (up to 25), tax, shipping, payment gateway.'], ['Document Library Setup (Civic)','setup', 850, 'Categorized document repository with search & filters.'], ['Commission Minutes Import', 'setup', 450, 'Bulk import of historical meeting minutes as PDFs.'], ['Agenda Management System', 'setup', 950, 'Board/Council agenda publishing workflow.'], ['ADA / WCAG 2.1 AA Audit', 'setup', 675, 'Full accessibility remediation pass.'], ['Cloudflare Pro', 'monthly', 20, 'Pro CDN + security layer.'], ['Accessibility Tool (ADA)', 'monthly', 30, 'AccessiBe / UserWay subscription.'], ['Web-to-App — Civic', 'monthly', 249, 'Progressive web app shell for civic sites.'], ['Extended Care Retainer', 'monthly', 150, 'Dedicated hours & priority response.'], ]; return (

Service Catalog

{rows.map(([n, t, p, d]) => ( ))}
ServiceTypePriceDescription
{n} {t.toUpperCase()} ${p}{t==='monthly' && '/mo'} {d} e.preventDefault()}>Edit
); } function HostingTab() { const { useState } = React; const [hostTab, setHostTab] = useState('MWC'); const [view, setView] = useState('catalog'); // catalog | comparison | editor const tabs = [ ['M', `Managed (${CD_PLANS.M.length})`], ['MWC', `Managed + Care (${CD_PLANS.MWC.length})`], ['CIVIC',`Civic (${CD_PLANS.CIVIC.length})`], ['CARE', `Care-Only (${CD_PLANS.CARE_ONLY.length})`], ]; const plans = hostTab === 'CARE' ? CD_PLANS.CARE_ONLY : CD_PLANS[hostTab]; const isCivic = hostTab === 'CIVIC'; const isCare = hostTab === 'CARE'; // Subscribe to hosting cost edits so the Plan Comparison refreshes when // the user tweaks a value in the Cost Editor. const [costs] = window.useHostingCosts(); // Proxy through the shared helpers — overrides + cost components win. const calcCost = (p) => window.calcPlanCost(p, hostTab); const chargeOf = (p) => window.planCharge(p); function rec(p) { // Flag best-margin "recommended" rows const cost = calcCost(p); const charge = chargeOf(p); const margin = (charge - cost) / charge; return margin >= 0.65 && charge <= 200; } return (
Hosting Plan Library — full catalog pulled from the live Estimator. M = hosting only · MWC = hosting + care · Civic = population-tier plans · Care-Only = for sites hosted elsewhere.
{tabs.map(([id, lbl]) => ( ))}
{view === 'editor' && window.HostingCostEditor && } {view === 'catalog' && (

{hostTab === 'M' && 'M Plans — Fully-Managed Hosting (Backend Only)'} {hostTab === 'MWC' && 'MWC Plans — Hosting + Care (Front & Backend)'} {hostTab === 'CIVIC' && 'Civic Hosting & Care Plans'} {hostTab === 'CARE' && 'Care-Only Support Plans (Non-Hosted Sites)'}

{isCivic && <>} {!isCivic && !isCare && } {isCare && } {plans.map(p => ( {isCivic && <> } {!isCivic && !isCare && ( )} {isCare && } ))}
CodeLabelPopulationPagesCategoriesBest ForSupport Client Price Includes
{p.code} {p.label}{p.pop} {p.pages}{(p.cats||[]).map(c => {c})}{p.bestFor}{p.support} ${p.charge}/mo {p.inc}
)} {view === 'comparison' && (

📋 Plan Comparison · {hostTab === 'M' ? 'M Plans' : hostTab === 'MWC' ? 'MWC Plans' : hostTab === 'CIVIC' ? 'Civic Plans' : 'Care-Only Plans'}

INTERNAL · MARGIN VIEW
{plans.map(p => { const cost = calcCost(p); const profit = Math.round((p.charge - cost) * 100) / 100; const margin = ((profit / p.charge) * 100); const marginTone = margin >= 65 ? 'var(--green)' : margin >= 55 ? 'var(--orange)' : 'var(--rose)'; const isRec = rec(p); return ( ); })}
Code Charge/mo Cost Profit Margin Includes Rec.
{p.code} ${p.charge} ${cost.toFixed(2)} ${profit.toFixed(2)} {margin.toFixed(1)}% {p.inc} {isRec ? ✓ : —}
Averages ({plans.length}) ${Math.round(plans.reduce((s,p)=>s+p.charge,0)/plans.length)} ${(plans.reduce((s,p)=>s+calcCost(p),0)/plans.length).toFixed(2)} ${(plans.reduce((s,p)=>s+(p.charge-calcCost(p)),0)/plans.length).toFixed(2)} {(plans.reduce((s,p)=>{const c=calcCost(p); return s+((p.charge-c)/p.charge)*100;},0)/plans.length).toFixed(1)}%
Recommended: ≥65% margin at ≤$200/mo price point
Margin tones: ≥65% · 55–65% · <55%
)}
); } function TriggerRulesTab() { const { useState, useMemo } = React; // Scan field reference — what you can match against in IF conditions const SCAN_FIELDS = [ { grp:'Site type', fields:['site_type', 'civic_flag', 'ecommerce_flag', 'membership_flag'] }, { grp:'Site scale', fields:['population', 'pages_count', 'posts_count', 'products_count', 'users_count'] }, { grp:'Detected tech', fields:['gravity_forms_detected', 'learndash_detected', 'woocommerce_detected', 'elementor_detected', 'divi_detected'] }, { grp:'Health signals', fields:['ssl_valid', 'wp_outdated', 'plugin_vulns_count', 'scan_404_count', 'ada_violations_big6'] }, { grp:'Performance', fields:['lcp_ms', 'cls', 'inp_ms', 'image_kb_total', 'page_weight_mb'] }, { grp:'Ownership', fields:['hosted_elsewhere', 'has_care_plan', 'current_mrr', 'months_with_cd'] }, ]; const OPERATORS = ['equals','not equals','>','<','>=','<=','contains','matches regex','detected','not detected']; const ACTIONS = [ { id:'add_line_item', lbl:'Add line item', hint:'Append scoped service to Estimator cart' }, { id:'recommend_hosting', lbl:'Recommend plan', hint:'Promote a specific hosting plan in Plan Compare' }, { id:'bump_tier', lbl:'Bump scope tier', hint:'Upgrade Basic→Scale or Scale→Growth' }, { id:'recommend', lbl:'Suggest add-on', hint:'Surface recommendation without auto-add' }, { id:'block_plan', lbl:'Block plan', hint:'Hide plan from options (e.g., too small)' }, { id:'trigger_email', lbl:'Trigger email template', hint:'Send tokenized email on scan complete' }, { id:'flag_for_review', lbl:'Flag for SA review', hint:'Adds to SA triage queue' }, ]; const [rules, setRules] = useState([ { id:'r1', on:true, field:'site_type', op:'equals', val:'civic', action:'add_line_item', arg:'Document Library Setup', note:'Every civic site gets doc library' }, { id:'r2', on:true, field:'population', op:'<', val:'5000', action:'recommend_hosting', arg:'CIVIC-Community', note:'Small towns → Community tier' }, { id:'r3', on:true, field:'population', op:'>', val:'25000', action:'recommend_hosting', arg:'CIVIC-Professional', note:'Mid-size cities → Professional' }, { id:'r4', on:true, field:'site_type', op:'equals', val:'ecommerce', action:'recommend', arg:'WooCommerce Setup, MWC-S2', note:'Retail playbook' }, { id:'r5', on:true, field:'pages_count', op:'>', val:'50', action:'bump_tier', arg:'Scale', note:'Large site → Scale tier minimum' }, { id:'r6', on:true, field:'ssl_valid', op:'not detected', val:'', action:'add_line_item', arg:'SSL Setup + Configuration', note:'Blocker — must fix before launch' }, { id:'r7', on:true, field:'membership_flag', op:'detected', val:'', action:'recommend', arg:'Membership / LMS Integration', note:'BuddyPress / MemberPress / etc.' }, { id:'r8', on:true, field:'gravity_forms_detected', op:'detected', val:'', action:'add_line_item', arg:'Forms Migration (GF)', note:'Forms = scope blocker; price explicitly' }, { id:'r9', on:true, field:'learndash_detected', op:'detected', val:'', action:'recommend_hosting', arg:'MWC-G2', note:'LMS needs growth-tier resources' }, { id:'r10',on:false, field:'ada_violations_big6', op:'>', val:'0', action:'trigger_email', arg:'ada-findings-template', note:'Disabled — client opt-in required' }, { id:'r11',on:true, field:'page_weight_mb', op:'>', val:'5', action:'add_line_item', arg:'Image Tools Pipeline Cleanup', note:'Auto-offer compression retainer' }, ]); const [editingId, setEditingId] = useState(null); const [showRef, setShowRef] = useState(false); function patch(id, key, val) { setRules(rs => rs.map(r => r.id === id ? { ...r, [key]: val } : r)); } function addRule() { const id = 'r' + Math.random().toString(36).slice(2, 7); setRules(rs => [...rs, { id, on:true, field:'site_type', op:'equals', val:'', action:'add_line_item', arg:'', note:'' }]); setEditingId(id); } function deleteRule(id) { setRules(rs => rs.filter(r => r.id !== id)); } function exportJSON() { const json = JSON.stringify(rules, null, 2); const blob = new Blob([json], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'trigger-rules.json'; a.click(); URL.revokeObjectURL(url); window.wpsbToast('Exported trigger-rules.json', 'ok'); } function importJSON() { const input = document.createElement('input'); input.type = 'file'; input.accept = 'application/json'; input.onchange = () => { const f = input.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = (e) => { try { const parsed = JSON.parse(e.target.result); if (Array.isArray(parsed)) { setRules(parsed); window.wpsbToast(`Imported ${parsed.length} rules`, 'ok'); } else window.wpsbToast('Invalid — expected array of rules', 'warn'); } catch { window.wpsbToast('Import failed — invalid JSON', 'warn'); } }; reader.readAsText(f); }; input.click(); } const activeCount = rules.filter(r => r.on).length; return (
{/* ── MAIN RULES EDITOR ───────────────────────── */}

Trigger Rules

{activeCount} active · {rules.length - activeCount} disabled · Run on every scan completion
ONIF FIELDOPVALUETHEN ACTIONARG / NOTE
{rules.map((r, i) => { const isEditing = editingId === r.id; const actionDef = ACTIONS.find(a => a.id === r.action); return (
patch(r.id, 'val', e.target.value)} placeholder={r.op === 'detected' ? '—' : 'value'} style={{ fontSize:'.76rem', fontFamily:'var(--font-mono)', padding:'4px 6px', background:'var(--surface-2)', border:'1px solid var(--border)', borderRadius:4, color:'var(--text)', width:'100%' }}/> patch(r.id, 'arg', e.target.value)} placeholder={r.action === 'add_line_item' ? 'Line item label' : 'Argument'} title={r.note} style={{ fontSize:'.76rem', padding:'4px 6px', background:'var(--surface-2)', border:'1px solid var(--border)', borderRadius:4, color:'var(--text)', width:'100%' }}/>
); })} {rules.length === 0 && (
No trigger rules — add one to auto-suggest scope from scan results.
)}
Rules run in order · top-down · first match per action wins
{/* ── SCAN FIELD REFERENCE (collapsible side panel) ──── */} {showRef && (

Scan Field Reference

Fields produced by Site Scanner. Click a name to copy — paste into a rule's IF column.
{SCAN_FIELDS.map(grp => (
{grp.grp.toUpperCase()}
{grp.fields.map(f => ( ))}
))}
)}
); } function ProposalTab({ totals, isCivic, popTier, tier, bizTiers, cart, adaItems, brand }) { const { useState } = React; const name = isCivic ? CD_PLANS.CIVIC[popTier].label : bizTiers.find(t => t.id === tier).lbl; const tokens = (cart && cart.tokens) || {}; const site = tokens.site || 'acmecorp.com'; const clientName = (brand && brand.clientName) || (isCivic ? 'City of Northwind' : 'Northwind Traders'); const clientEmail = (brand && brand.clientEmail) || 'contact@northwind.co'; const agency = (brand && brand.agencyName) || 'Your Agency'; const primary = (brand && brand.primary) || 'var(--orange)'; const accent = (brand && brand.accent) || 'var(--beam)'; const [showEvidence, setShowEvidence] = useState(true); const [showNarrative, setShowNarrative] = useState(true); // Pre-filled narrative (tokenized). Editable via ADA tab → Compliance Docs. const nar = (cart && cart.narrative) || {}; const framework = nar.frameworkStake || (tokens.legalFramework ? `${clientName} operates under ${tokens.legalFramework}. Recent enforcement actions have made it clear that accessibility is no longer optional — digital assets must meet ${tokens.taxonomy || (window.WPSB && window.WPSB.CONSTANTS && window.WPSB.CONSTANTS.WCAG.DISPLAY) || 'WCAG 2.1 AA'} to avoid regulatory and legal exposure.` : `Public accessibility law (ADA Title II/III, Section 508, state parallels) requires that digital assets be usable by people with disabilities. Non-compliance carries legal, financial, and reputational risk.`); const approach = nar.approachStake || `We will remediate identified violations, produce the good-faith evidence expected under ADA enforcement (VPAT/ACR, methodology, remediation log, accessibility statement), and establish ongoing monitoring so ${site} stays compliant as content changes.`; const timeline = nar.timelineStake || (tokens.deadline ? `The ${tokens.deadline} compliance deadline is firm. Our critical-path plan delivers evidence-ready documentation within 4 weeks and full Big 6 remediation within 6–8 weeks.` : `Critical findings are addressed in the first 2 weeks, Big 6 violations within 6 weeks, and Level AA conformance within 8 weeks.`); const oneTimeLow = (totals.baseMin + totals.addonSetup) + totals.adaLow; const oneTimeHigh = (totals.baseMax + totals.addonSetup) + totals.adaHigh; return (
Proposal uses your white-label branding (logo, colors, agency name) and pulls line items directly from the Proposal Cart. ADA narrative is tokenized from scan data — edit in { e.preventDefault(); window.WPSBD.switchTab('scanner'); }}>Scanner → ADA → Compliance Docs. WPSiteBeam branding is always hidden from clients.
{/* Toolbar */}
{/* ───── Header ───── */}
{agency.toUpperCase()}
{isCivic ? 'Civic Website Proposal' : 'Website Redesign Proposal'}{adaItems.length > 0 ? ' + ADA Remediation' : ''} · Prepared Apr 18, 2026
For: {clientName}
{clientEmail}
{site && {site}}

Recommended Plan · {name}

{isCivic ? CD_PLANS.CIVIC[popTier].inc : bizTiers.find(t => t.id === tier).desc}

{/* ───── ADA Narrative ───── */} {showNarrative && adaItems.length > 0 && ( <>

Accessibility Compliance — Why This Matters

Legal stake
{framework}
Our approach
{approach}
Timeline stake
{timeline}
)} {/* ───── Investment ───── */}

Project Investment

{totals.addonSetup > 0 && } {totals.adaCount > 0 && ( )} {totals.totalMult !== 1 && ( )}
Build base — {name}${totals.baseMin.toLocaleString()}–${totals.baseMax.toLocaleString()}
Setup add-ons${totals.addonSetup.toLocaleString()}
ADA remediation ({totals.adaCount} items — from cart)${totals.adaLow.toLocaleString()}–${totals.adaHigh.toLocaleString()}
Project multipliers (complexity · rush · doc load)×{totals.totalMult.toFixed(2)}
One-time project total${oneTimeLow.toLocaleString()}–${oneTimeHigh.toLocaleString()}

Ongoing Care Plan

{totals.adaMo > 0 && }
{isCivic ? 'Civic care plan' : 'Care plan'}${totals.careBase}/mo
Monthly add-ons${totals.monthlyAddon}/mo
ADA monitoring & quarterly audit${totals.adaMo}/mo
Monthly recurring total${totals.monthly}/mo

Timeline

  1. Week 1–2: Discovery, sitemap, wireframes{adaItems.length > 0 && ', critical ADA fixes (keyboard traps, missing form labels)'}
  2. Week 3–5: Design mockups & revisions{adaItems.length > 0 && ', Big 6 remediation pass'}
  3. Week 6–9: Development & content migration{adaItems.length > 0 && ', ADA re-scan + VPAT draft'}
  4. Week 10: QA, final ADA audit, launch{adaItems.length > 0 && ', Accessibility Statement + Remediation Log published'}
{/* ───── Evidence Appendix ───── */} {showEvidence && adaItems.length > 0 && ( <>

Appendix A · Evidence Summary

The following findings were identified during our WCAG 2.1 AA audit of {site}. Each item in the remediation scope above traces back to the evidence below.

{tokens.pagesScanned > 0 && (
{tokens.pagesScanned}
Pages scanned
{tokens.violations || 0}
Violations
{tokens.pdfsFound || 0}
PDFs checked
{tokens.score || 0}
Score / 100
)} {adaItems.map(item => ( ))}
Finding Scope Priority Remediation
{item.label} {item.description &&
{item.description}
} 		{item.scope || '—'} {(item.priority || 'medium').toUpperCase()} ${(item.lowPrice||0).toLocaleString()}–${(item.highPrice||0).toLocaleString()}

Evidence methodology: axe-core 4.10 automated scan + manual keyboard / screen-reader review on top 10 pages + PDF tagging audit. Full findings log and per-page screenshots available on request.

)} {/* Point-in-Time Disclosure — printed at bottom of every proposal */}
POINT-IN-TIME DISCLOSURE
This proposal and its underlying scan reflect the site's state at the time of audit. WordPress sites are dynamic: plugin updates, theme changes, cache/CDN configuration, media uploads, content edits, and automatic security patches can all alter or invalidate findings in this document — sometimes within hours. Deliverables are priced and scoped against the scan date; discovery of additional issues introduced after the scan may require scope revision. Ongoing compliance (ADA, SEO, performance, security) requires continuous monitoring and is covered separately under our Care Plans. Regressions caused by third-party changes outside active monitoring are not {agency}'s liability.
{(brand && brand.proposalFooter) || `Prepared by ${agency} · © 2026`}
); } /* ── EMAIL TEMPLATES — scan-complete, proposal-ready, regression-alert ── */ function EmailTemplatesTab({ brand, cart, totals }) { const { useState } = React; const tokens = (cart && cart.tokens) || {}; const site = tokens.site || 'acmecorp.com'; const clientName = (brand && brand.clientName) || 'Northwind Traders'; const clientEmail = (brand && brand.clientEmail) || 'contact@northwind.co'; const agency = (brand && brand.agencyName) || 'Your Agency'; const violations = tokens.violations || 0; const score = tokens.score || 0; const adaCount = (cart.items || []).filter(i => i.source === 'ada-scan').length; // 3 scenario templates w/ trigger config const TEMPLATES = [ { id: 'scan-complete', label: 'Scan Complete', icon: 'scanner', color: 'var(--beam)', trigger: 'Scanner run finishes · sends automatically to assigned account manager + client if enabled', to: clientEmail, cc: `sales@${agency.toLowerCase().replace(/\s+/g,'')}.co`, subject: `{{site}} accessibility scan complete — {{violations}} issues found`, body: `Hi {{clientName}},\n\nWe just finished a WCAG 2.1 AA scan of {{site}}. Here's a quick summary:\n\n · Accessibility score: {{score}} / 100\n · Violations detected: {{violations}}\n · Legal framework: {{legalFramework}}\n · Pages scanned: {{pagesScanned}}\n · PDFs audited: {{pdfsFound}}\n\nFull findings, Big 6 breakdown, and remediation priorities are in your dashboard. If the scan surfaced anything critical we'll be in touch today — otherwise we'll include this in your next proposal review.\n\nReply here if you'd like us to book a walkthrough.\n\n— {{agency}}`, cta: 'View scan results', }, { id: 'proposal-ready', label: 'Proposal Ready', icon: 'spark', color: 'var(--orange)', trigger: 'Proposal generated & saved · sent to client with share link + PDF attachment', to: clientEmail, cc: '', subject: `{{clientName}} — your ADA remediation + redesign proposal is ready`, body: `Hi {{clientName}},\n\nYour proposal is ready for review:\n\n · Project investment: {{oneTimeRange}}\n · Monthly care: {{monthlyTotal}}/mo\n · ADA remediation items: {{adaCount}}\n · Timeline: 10 weeks to compliance + launch\n\nThe proposal includes our full evidence appendix (the {{violations}} violations we found, prioritized) and the good-faith compliance package — VPAT, Accessibility Statement, Remediation Log.\n\n{{shareLink}}\n\nHappy to walk through it live — book a time here: {{bookingLink}}\n\n— {{agency}}`, cta: 'Review proposal', }, { id: 'regression-alert', label: 'Regression Alert', icon: 'activity', color: 'var(--red)', trigger: 'Monitoring detects new violations on next monthly scan vs. last signed-off baseline', to: clientEmail, cc: `support@${agency.toLowerCase().replace(/\s+/g,'')}.co`, subject: `⚠ Accessibility regression detected on {{site}}`, body: `Hi {{clientName}},\n\nOur monitoring just flagged new accessibility violations on {{site}} since the last sign-off:\n\n · New violations: {{newViolations}} (was {{baselineViolations}})\n · Affected pages: {{affectedPages}}\n · Root cause (likely): recent content changes or plugin update\n\nUnder {{legalFramework}}, a regression can reset the compliance clock if not addressed promptly. We've already queued fixes — no action needed unless you want to skip.\n\nFull diff report: {{diffLink}}\n\n— {{agency}}`, cta: 'View regression diff', }, ]; const [active, setActive] = useState(TEMPLATES[0].id); const tpl = TEMPLATES.find(t => t.id === active); // Token substitution — mock values when cart lacks them const tokenMap = { site, clientName, agency, clientEmail, violations, score, legalFramework: tokens.legalFramework || 'ADA Title II', pagesScanned: tokens.pagesScanned || 47, pdfsFound: tokens.pdfsFound || 312, adaCount, oneTimeRange: `$${(totals.setupMin||0).toLocaleString()}–$${(totals.setupMax||0).toLocaleString()}`, monthlyTotal: `$${(totals.monthly||0).toLocaleString()}`, shareLink: '', bookingLink: 'https://cal.com/acme-agency/15min', diffLink: 'https://wpsitebeam.com/scans/acme/diff/latest', newViolations: 3, baselineViolations: violations, affectedPages: '/contact, /services/lms', }; const fillT = (s) => (s || '').replace(/\{\{(\w+)\}\}/g, (_, k) => tokenMap[k] != null ? tokenMap[k] : `{{${k}}}`); return (
Automated emails fire on scan/proposal/monitoring events. Tokens auto-fill from the active scan & proposal cart — configure trigger routing in { e.preventDefault(); window.WPSBD.switchTab('settings'); }}>Account → Integrations.
{/* Template list */}
{TEMPLATES.map(t => ( ))} {/* Token reference card */}

Available tokens

{Object.entries(tokenMap).map(([k, v]) => (
{`{{${k}}}`} {String(v)}
))}
{/* Template preview + editor */}
{/* Trigger config */}

 Trigger: {tpl.label}

{tpl.trigger}
ENABLED
{/* Tokenized template (source) */}

Template source

TOKENIZED