// crm-proposal-template.jsx — Admin-editable proposal template text // Default copy for the catalog proposal preview (crm-proposal-catalog.jsx // ProposalPreview). Admins manage one or more named templates via // Settings → Proposal Template; templates persist as a JSON array // [{ key, name, tpl }] under config key 'proposal_templates' (the first // template is also mirrored to the legacy 'proposal_template' key for // backward compatibility). Each tpl is a partial override merged over // these defaults at render time. const { useState, useEffect } = React; // ── DEFAULT TEMPLATE TEXT ───────────────────────────────── // Tokens: {client} {industry} {employeeCount} {proposalDate} {validUntil} // {repName}. {industryClause}/{employeeClause} expand to " — a **X** // organization" / " with **X** employees" only when the value exists. // **text** renders bold. \n renders as a line break. const PT_DEFAULT_TEXT = { // Clause variables: what {industryClause}/{employeeClause} expand to when // the proposal has an industry / employee count (empty otherwise). Clause // text may use any base token; industryOverrides gives a specific industry // its own wording. clauses: { industryClause: ' — a **{industry}** organization', employeeClause: ' with **{employeeCount}** employees', industryOverrides: [], // [{ industry:'Healthcare', clause:' — a **healthcare** provider' }] }, cover: { eyebrow: 'Workforce Solutions Proposal', title: 'Modern Time &\nAttendance for\nYour Team', subtitle: 'A tailored proposal for streamlining labor management, ensuring compliance, and reducing administrative overhead.', }, exec: { lead: 'CTR/NY is pleased to present this proposal to **{client}**{industryClause}{employeeClause} for the implementation of **Attendance on Demand (AOD)** — a modern, cloud-based workforce management platform purpose-built to simplify time tracking, automate compliance, and deliver actionable labor insights.', challenge: '**The challenge most businesses face:** manual timekeeping, inconsistent compliance with state and federal regulations, and fragmented data that makes labor cost decisions difficult. AOD solves all three — from day one.', stats: [ { num:'100%', label:'Cloud-Based' }, { num:'4+', label:'Payroll Integrations' }, { num:'$99', label:'Starting / Month' }, { num:'1+', label:'Days to Deploy' }, ], features: [ { title:'Time & Attendance Tracking', text:'Accurate, real-time punch data collected from mobile, kiosk, or biometric hardware — your choice.' }, { title:'Regulatory Compliance', text:'Built-in ACA tracking, NYS Spread of Hours automation, and state-mandated sick leave accruals.' }, { title:'Payroll Integration', text:'Certified integrations with ADP, Paylocity, Paychex, and most leading payroll providers via REST/SOAP APIs.' }, { title:'Executive Dashboards', text:'Real-time exception alerts and Excel-based reporting with OLE automation for deeper labor analysis.' }, ], }, capabilities: { lead: 'AOD is a comprehensive platform designed to handle every facet of workforce time management. Below is a complete overview of core system capabilities included with your subscription.', groups: [ { heading:'Compliance & Regulatory', bullets: [ 'Affordable Care Act (ACA) tracking and reporting', 'Automation of NYS Spread of Hours compliance', 'Paid Time Off (PTO) and sick leave accrual automation', 'Built-in state-mandated sick leave accrual compliance', ]}, { heading:'Platform & Infrastructure', bullets: [ 'Secure cloud infrastructure — no on-premise footprint', 'Advanced labor distribution by department, job, work orders and pay rate', 'Configurable employee and operator preferences', 'Full SOAP and REST API availability', 'Certified integrations with ADP, Paylocity, Paychex and leading payroll providers', ]}, { heading:'Reporting & Analytics', bullets: [ 'Executive dashboards with real-time exception alerts', 'Excel-based reporting with OLE automation', 'Scheduling and incident & point tracking', 'Leave management workflows', ]}, { heading:'Employee Self-Service', bullets: [ 'Mobile clock-in via iPhone/Android with geofencing', 'ESS Kiosk — turn any tablet or PC into a time clock', 'Timecard review and schedule visibility', 'Geo-fencing to prevent unauthorized location punches', ]}, ], }, pricing: { lead: 'AOD pricing is designed to scale with your business — starting as low as **$99/month flat** for small teams and becoming even more cost-effective as your workforce grows.', tiers: [ { match:'1-25', label:'1–25 Employees', model:'Flat monthly rate', cost:'$99.00' }, { match:'26-50', label:'26–50 Employees', model:'Per employee / month', cost:'$4.00 / emp' }, { match:'51-100', label:'51–100 Employees', model:'Per employee / month', cost:'$3.50 / emp' }, { match:'100+', label:'100+ Employees', model:'Per employee / month', cost:'$2.50 / emp' }, ], priceNote: 'Minimum monthly platform fee of $99 applies. First and last month software fees billed at implementation.', includedHeading: 'Included at No Additional Cost', included: [ { item:'ESS Kiosk', description:'iPad / Android / PC — BYOD time clock', price:'Included' }, { item:'ESS Mobile', description:'iPhone/Android clock-in with geofencing', price:'Included' }, { item:'Extended Online Training', description:'Instructor-led onboarding session', price:'Included' }, ], }, hardware: { lead: 'For organizations that prefer dedicated hardware, AOD supports a range of biometric terminals. All GT Clocks include **GT Protect** — advance replacement and extended warranty 2 years past manufacturer retirement.', installNote: 'On-site hardware installation available — $250/terminal flat fee (NY/NJ/CT and select markets, travel not included). GT Protect ($25/mo per device) required for all purchased GT terminals.', }, terms: { bullets: [ 'This proposal is valid for **30 days** from the issue date of {proposalDate}.', 'First and last month software fees are billed at implementation.', 'Monthly fees are processed via **ACH auto-debit**.', 'A minimum monthly platform fee of **$99** applies regardless of employee count.', 'A **30-day written notice** is required for cancellation.', 'GT Protect ($25/mo per device) is required for all purchased GT terminal hardware.', 'Rental terminals do not require GT Protect. Additional rates may apply.', ], }, cta: { eyebrow: "Let's Get Started", heading: 'Ready to modernize\nyour workforce?', body: 'We appreciate the opportunity to support your workforce management initiatives. Our team is available to review this proposal, demonstrate the platform, and finalize implementation timelines at your convenience.', steps: [ { title:'Review & Sign', desc:'Review this proposal and sign the corresponding order forms to proceed.' }, { title:'Discovery Call', desc:'Schedule a policy review so our technicians can custom tailor AOD to your specific requirements.' }, { title:'Setup & Go Live', desc:'Configuration, training, and launch — typically completed in days.' }, ], }, }; // ── RENDER HELPERS ──────────────────────────────────────── function ptEsc(s) { return String(s == null ? '' : s) .replace(/&/g, '&') .replace(//g, '>'); } // Substitute {tokens}. When `esc` is true, substituted values are // HTML-escaped (the surrounding string must already be escaped) and the // conditional clauses carry **bold** markers for the later pass. function ptFillTokens(str, ctx, esc) { const c = ctx || {}; const v = k => esc ? ptEsc(c[k] || '') : String(c[k] || ''); // Clause wording comes from the editable template (ctx.clauses); a // per-industry override beats the default. The clause TEMPLATE is inserted // here and its inner tokens ({industry} etc.) fill in the passes below. const cls = c.clauses || PT_DEFAULT_TEXT.clauses; const insertClause = t => esc ? ptEsc(t || '') : String(t || ''); const indOverride = c.industry ? (cls.industryOverrides || []).find(o => o && o.industry && o.clause && String(o.industry).toLowerCase() === String(c.industry).toLowerCase()) : null; const industryClause = c.industry ? insertClause(indOverride ? indOverride.clause : cls.industryClause) : ''; const employeeClause = c.employeeCount ? insertClause(cls.employeeClause) : ''; return String(str == null ? '' : str) .replace(/\{industryClause\}/g, () => industryClause) .replace(/\{employeeClause\}/g, () => employeeClause) .replace(/\{client\}/g, () => v('client')) .replace(/\{industry\}/g, () => v('industry')) .replace(/\{employeeCount\}/g, () => v('employeeCount')) .replace(/\{proposalDate\}/g, () => v('proposalDate')) .replace(/\{validUntil\}/g, () => v('validUntil')) .replace(/\{repName\}/g, () => v('repName')); } // Template string → React node. Escapes HTML, fills tokens, converts // **text** to and \n to
. function ptRender(str, ctx) { let h = ptEsc(str); h = ptFillTokens(h, ctx, true); h = h.replace(/\*\*(.+?)\*\*/g, '$1'); h = h.replace(/\n/g, '
'); return ; } // Plain-string variant — tokens only, bold markers stripped, no HTML. function ptFillPlain(str, ctx) { return ptFillTokens(str, ctx, false).replace(/\*\*(.+?)\*\*/g, '$1'); } // Deep-merge a saved partial template over the defaults. Saved values // win; arrays replace wholesale (no per-index merging). Always returns // fresh objects/arrays so callers can safely use it as React state. function mergeTemplate(saved) { const clone = v => JSON.parse(JSON.stringify(v)); const merge = (def, sv) => { if (Array.isArray(def)) return Array.isArray(sv) ? clone(sv) : clone(def); if (def && typeof def === 'object') { const out = {}; Object.keys(def).forEach(k => { const has = sv && typeof sv === 'object' && !Array.isArray(sv) && sv[k] !== undefined && sv[k] !== null; out[k] = has ? merge(def[k], sv[k]) : clone(def[k]); }); return out; } return typeof sv === typeof def ? sv : def; }; return merge(PT_DEFAULT_TEXT, saved || null); } // ── NAMED TEMPLATE STORAGE ──────────────────────────────── // Config key 'proposal_templates' = JSON array [{ key, name, tpl }] where // tpl is a (possibly partial) template object. Legacy single-template key // 'proposal_template' is migrated on read and mirrored on save. // cfgMap (key → string, from CRM.ConfigAPI.getAll()) → array of // { key, name, tpl } with tpl FULLY MERGED over the defaults. // Always returns ≥1 entry; the first entry is the default template. function loadProposalTemplates(cfgMap) { const cfg = cfgMap || {}; let list = null; if (cfg['proposal_templates']) { try { const parsed = JSON.parse(cfg['proposal_templates']); if (Array.isArray(parsed) && parsed.length) list = parsed; } catch (e) { /* fall through to legacy/defaults */ } } if (!list && cfg['proposal_template']) { try { list = [{ key: 'default', name: 'Standard', tpl: JSON.parse(cfg['proposal_template']) }]; } catch (e) { /* fall through to defaults */ } } if (!list || !list.length) list = [{ key: 'default', name: 'Standard', tpl: null }]; return list.map((t, i) => ({ key: String((t && t.key) || 'tpl-' + (i + 1)), name: String((t && t.name) || 'Template ' + (i + 1)), tpl: mergeTemplate(t && t.tpl), })); } // cfgMap + template key → that template's fully-merged tpl. Falls back to // the FIRST template when key is null/unknown. function resolveProposalTemplate(cfgMap, key) { const list = loadProposalTemplates(cfgMap); const found = key != null ? list.find(t => t.key === key) : null; return (found || list[0]).tpl; } // ── ADMIN EDITOR ────────────────────────────────────────── function ProposalTemplateEditor({ showToast }) { const [tpls, setTpls] = useState(null); // [{ key, name, tpl }] — whole array in state const [selKey, setSelKey] = useState(null); // key of the template being edited const [saving, setSaving] = useState(false); useEffect(() => { const applyList = list => { setTpls(list); setSelKey(list[0].key); }; CRM.ConfigAPI.getAll() .then(cfg => applyList(loadProposalTemplates(cfg))) .catch(() => applyList(loadProposalTemplates(null))); }, []); const selIdx = tpls ? Math.max(0, tpls.findIndex(t => t.key === selKey)) : 0; const tpl = tpls ? tpls[selIdx].tpl : null; // Update the SELECTED template's tpl (same updater signature the // section-field helpers below rely on). const setTpl = fn => setTpls(list => list.map((t, i) => i !== selIdx ? t : { ...t, tpl: fn(t.tpl) })); // ── Template management (array-level) ── const slugify = s => String(s || '').toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'template'; const uniqueKey = (base, list) => { let k = base, n = 2; while (list.some(t => t.key === k)) k = base + '-' + (n++); return k; }; const copyTemplate = () => { const cur = tpls[selIdx]; const name = prompt('Name for the new template:', cur.name + ' (Copy)'); if (!name || !name.trim()) return; const key = uniqueKey(slugify(name), tpls); setTpls(list => [...list, { key, name: name.trim(), tpl: JSON.parse(JSON.stringify(cur.tpl)) }]); setSelKey(key); }; const renameTemplate = () => { const name = prompt('Rename template:', tpls[selIdx].name); if (!name || !name.trim()) return; setTpls(list => list.map((t, i) => i !== selIdx ? t : { ...t, name: name.trim() })); }; const deleteTemplate = () => { if (tpls.length <= 1) { showToast('At least one template is required — cannot delete the last one.'); return; } if (!confirm('Delete template "' + tpls[selIdx].name + '"? Click Save Template to make it permanent.')) return; const next = tpls.filter((_, i) => i !== selIdx); setTpls(next); setSelKey(next[0].key); }; const setField = (section, key, v) => setTpl(t => ({ ...t, [section]: { ...t[section], [key]: v } })); // Array-of-objects item update; pass field=null for string arrays. const setItem = (section, key, idx, field, v) => setTpl(t => ({ ...t, [section]: { ...t[section], [key]: t[section][key].map((it, i) => i !== idx ? it : (field == null ? v : { ...it, [field]: v })) } })); const addItem = (section, key, blank) => setTpl(t => ({ ...t, [section]: { ...t[section], [key]: [...t[section][key], blank] } })); const removeItem = (section, key, idx) => setTpl(t => ({ ...t, [section]: { ...t[section], [key]: t[section][key].filter((_, i) => i !== idx) } })); const save = async () => { setSaving(true); try { // Drop empty rows/lines before persisting — every template in the array const cleaned = tpls.map(entry => { const clean = JSON.parse(JSON.stringify(entry.tpl)); clean.capabilities.groups = clean.capabilities.groups.map(g => ({ ...g, bullets: (g.bullets || []).filter(b => String(b).trim() !== '') })); clean.terms.bullets = (clean.terms.bullets || []).filter(b => String(b).trim() !== ''); clean.clauses.industryOverrides = (clean.clauses.industryOverrides || []) .filter(o => o && String(o.industry || '').trim() && String(o.clause || '').trim()); return { key: entry.key, name: entry.name, tpl: clean }; }); await CRM.ConfigAPI.set('proposal_templates', JSON.stringify(cleaned)); // Legacy single-template key: mirror the FIRST (default) template so // cached clients still reading 'proposal_template' keep working. await CRM.ConfigAPI.set('proposal_template', JSON.stringify(cleaned[0].tpl)); setTpls(cleaned); showToast('Proposal templates saved!', 'success'); } catch (e) { showToast('Error saving templates.'); } finally { setSaving(false); } }; const reset = () => { if (!confirm('Reset "' + tpls[selIdx].name + '" template text to defaults?')) return; setTpl(() => mergeTemplate(null)); showToast('Reset to defaults — click Save Template to apply.', 'success'); }; if (!tpl) return
Loading proposal template…
; // Shared styles (match the setup-items table editing pattern) const inp = { width:'100%', fontSize:12, padding:'5px 7px', border:'1.5px solid var(--g200)', borderRadius:4 }; const ta = { ...inp, resize:'vertical', fontFamily:'inherit', lineHeight:1.5 }; const thS = { textAlign:'left', padding:'6px 8px', color:'var(--g400)', fontWeight:600 }; const tdS = { padding:'4px 4px', verticalAlign:'top' }; const xBtn = { background:'none', border:'none', cursor:'pointer', color:'var(--g400)', fontSize:16, lineHeight:1, padding:2 }; const sectionHd = label => (
{label}
); const fieldRow = (label, node) => (
{node}
); const listTable = (cols, rows) => ( {cols.map((c, i) => )} {rows}
{c.label}
); // ── Industry clause table helpers ── // Overrides keep the [{ industry, clause }] shape (ptFillTokens depends // on it); lookups are case-insensitive to match render-time behavior. const findOverride = ind => (tpl.clauses.industryOverrides || []).find(o => o && String(o.industry || '').toLowerCase() === String(ind).toLowerCase()); // The default clause RESOLVED for one industry — i.e. the actual text // that gets inserted into the proposal. Shown (and compared) per row so // users edit real sentences, not token templates. const resolvedDefault = ind => String(tpl.clauses.industryClause || '').replace(/\{industry\}/g, ind); const setIndustryClause = (industry, value) => setTpl(t => { const rest = (t.clauses.industryOverrides || []).filter(o => !(o && String(o.industry || '').toLowerCase() === String(industry).toLowerCase())); // Typing the text back to EXACTLY the resolved default removes the // override instead of storing a redundant copy. const def = String(t.clauses.industryClause || '').replace(/\{industry\}/g, industry); const next = value === def ? rest : [...rest, { industry, clause: value }]; return { ...t, clauses: { ...t.clauses, industryOverrides: next } }; }); const clearIndustryClause = industry => setTpl(t => ({ ...t, clauses: { ...t.clauses, industryOverrides: (t.clauses.industryOverrides || []).filter(o => !(o && String(o.industry || '').toLowerCase() === String(industry).toLowerCase())) } })); return (
{/* Header actions */}
Edit the standard text shown on generated proposals. Keep multiple named templates and pick one per proposal.
{/* Help note */}
Placeholders: use {'{client}'} {'{industry}'} {'{employeeCount}'} {'{proposalDate}'} {'{validUntil}'} {'{repName}'} anywhere in the text — they fill in per-proposal at view/print time. Wrap text in **double asterisks** to render it bold.
{'{industryClause}'} and {'{employeeClause}'} expand to the clause wording below (empty when the proposal has no industry / employee count).
Edits apply to newly rendered proposals — the template is applied when a proposal is viewed or printed, so existing proposals pick up changes on their next print.
{/* ── Clause variables ── */} {sectionHd('Clause Variables')}
{fieldRow(<>Industry Clause — inserted for {'{industryClause}'}; use {'{industry}'} inside it, setField('clauses', 'industryClause', e.target.value)} />)} {fieldRow(<>Employee Clause — inserted for {'{employeeClause}'}; use {'{employeeCount}'} inside it, setField('clauses', 'employeeClause', e.target.value)} />)}
Industry Clauses
Each industry uses the default Industry Clause above unless you customize its wording here.
{(CRM.INDUSTRIES || []).map(ind => { const ov = findOverride(ind); return ( ); })}
Industry Clause
{ind} setIndustryClause(ind, e.target.value)} /> {ov ? ( <> custom ) : ( default )}
Industries are managed in Settings → Field Options → Industries.
{/* ── Cover ── */} {sectionHd('Cover Page')}
{fieldRow('Eyebrow', setField('cover', 'eyebrow', e.target.value)} />)} {fieldRow('Title (line breaks preserved)',