// GuestMaker CRM B2B · the proposal studio: live template generator, editor, design panel, content library.
const MERGE_VALUES = {
"contact.first_name": "Lennart", "contact.name": "Lennart Brauwe", "contact.email": "l.brauwe@nordwind.example",
"account.name": "Nordwind Travel Group", "hotel.name": "Marea Sierra Blanca", "deal.name": "Nordwind Travel Group, 2027 master contract",
"deal.value": "€148,000", "deal.dates": "1 Jan – 31 Dec 2027", "deal.rooms": "60 rooms",
"deal.room_nights": "9,000 room nights", "valid_until": "30 Sep 2026", "quote.number": "B2B-40351DCF",
"quote.date": "28 Jun 2026", "rep.name": "Adriana Vestri", "deal.board": "Bed & breakfast", "deal.pax": "320 attendees",
};
const MERGE_GROUPS = [
["CLIENT", [["Contact first name", "contact.first_name"], ["Contact full name", "contact.name"], ["Contact email", "contact.email"], ["Account / company", "account.name"]]],
["DEAL", [["Deal / reference name", "deal.name"], ["Deal value", "deal.value"], ["Valid-until date", "valid_until"]]],
["QUOTE", [["Quote / contract number", "quote.number"], ["Quote issue date", "quote.date"]]],
["STAY", [["Rooms required", "deal.rooms"], ["Room-nights", "deal.room_nights"], ["Board", "deal.board"], ["Property", "hotel.name"]]],
];
const PALETTES = [
{ id: "forest", primary: "#143A33", accent: "#B5853A", page: "#F4F0E8", cards: "#FBF9F4", text: "#1E1B17" },
{ id: "ink", primary: "#14161B", accent: "#C9A227", page: "#F5F3EE", cards: "#FFFFFF", text: "#16181D" },
{ id: "rust", primary: "#7A3A21", accent: "#C4703A", page: "#F7F1EA", cards: "#FFFDFA", text: "#221610" },
{ id: "navy", primary: "#1B2A4A", accent: "#7C5AC2", page: "#F2F4F8", cards: "#FFFFFF", text: "#141A26" },
{ id: "plum", primary: "#4A1F3F", accent: "#B5853A", page: "#F7F1F4", cards: "#FFFDFC", text: "#1F141B" },
{ id: "cocoa", primary: "#3E2B21", accent: "#A98055", page: "#F6F1EA", cards: "#FFFDF9", text: "#1E1712" },
{ id: "olive", primary: "#33391F", accent: "#8C9A4B", page: "#F4F4EA", cards: "#FDFDF7", text: "#1B1D12" },
{ id: "charcoal", primary: "#26282B", accent: "#8A8F98", page: "#F3F4F5", cards: "#FFFFFF", text: "#14161A" },
];
const HEAD_FONTS = [
{ id: "default", label: "Template default", css: "'Source Serif 4', Georgia, serif", note: "Editorial serif · shipped default" },
{ id: "playfair", label: "Playfair Display", css: "'Playfair Display', Georgia, serif", note: "High-contrast, editorial" },
{ id: "cormorant", label: "Cormorant Garamond", css: "'Cormorant Garamond', Georgia, serif", note: "Delicate, luxury" },
{ id: "eb", label: "EB Garamond", css: "'EB Garamond', Georgia, serif", note: "Classic old-style" },
{ id: "baskerville", label: "Libre Baskerville", css: "'Libre Baskerville', Georgia, serif", note: "Sturdy, readable" },
];
const BODY_FONTS = [
{ id: "default", label: "Template default", css: "'Inter', system-ui, sans-serif", note: "Neutral UI sans" },
{ id: "eb", label: "EB Garamond", css: "'EB Garamond', Georgia, serif", note: "Classic old-style" },
{ id: "baskerville", label: "Libre Baskerville", css: "'Libre Baskerville', Georgia, serif", note: "Sturdy, readable" },
{ id: "cormorant", label: "Cormorant Garamond", css: "'Cormorant Garamond', Georgia, serif", note: "Delicate, luxury" },
];
const TEMPLATES = [
{ id: "corp", name: "Corporate negotiated rate", tag: "CORPORATE", palette: "forest", head: "playfair",
desc: "Annual business-travel rate, negotiated cancellation, rate parity, room-night commitment.",
kicker: "GROUP PROPOSAL", title: "A season of rooms, held for {{account.name}}.",
note: "Dear {{contact.first_name}}, thank you for the opportunity to formalise a seasonal allotment between {{account.name}} and {{hotel.name}}. The terms below set out a guaranteed block of rooms, held for you across {{deal.dates}}, that your team can sell with complete confidence.\n\nAn allotment removes the friction of case-by-case requests: your contracted inventory is ours to protect and yours to fill, released back to us only on the agreed schedule. We have kept the structure deliberately simple, guaranteed availability, transparent release terms, and rate parity you can rely on.",
figures: [["Room nights", "9,000"], ["Properties", "5 hotels"], ["Allotment", "60 rooms"], ["Release", "21 days"]],
rooms: [["Double room · BB", "€104", "3,200 RN"], ["Superior double · BB", "€118", "2,400 RN"], ["Junior suite · HB", "€162", "1,100 RN"]],
incl: ["Guaranteed allotment across five properties", "Rate parity with all public channels", "21-day automatic release schedule", "Named account manager and quarterly review", "Consolidated monthly invoicing", "Complimentary upgrade allowance, subject to availability"],
terms: "Commission 12% settled monthly, net 30. Cancellation 14 days before arrival with a 20% penalty on the cancelled portion. Allotment released automatically 21 days before arrival. Rates net of VAT and city tax.",
total: "€148,000" },
{ id: "mice", name: "MICE event, conference & gala", tag: "MICE", palette: "ink", head: "cormorant",
desc: "Full event proposal: room block, meeting space, F&B and AV for a congress with gala dinner.",
kicker: "EVENT PROPOSAL", title: "A congress in Barcelona, run for {{account.name}}.",
note: "Dear {{contact.first_name}}, thank you for inviting us to quote your medical congress. Below is a complete plan for {{deal.pax}}: the room block, the plenary and breakout spaces, catering across the three days, and the gala dinner on the closing night.\n\nEverything in this proposal is held provisionally under your name. A single signature converts the hold into a confirmed block, and your dedicated event manager takes it from there.",
figures: [["Attendees", "320"], ["Rooms per night", "180"], ["Meeting rooms", "1 + 4"], ["Event days", "4"]],
rooms: [["Double room · HB", "€138", "540 RN"], ["Single occupancy · HB", "€118", "260 RN"], ["Speaker suite · HB", "€210", "24 RN"]],
incl: ["Plenary auditorium for 320 with stage and lectern", "Four breakout rooms with AV and technician", "Two coffee breaks per day, lunch on all three days", "Gala dinner with wine pairing on the closing night", "Dedicated on-site event manager", "Signage, registration desk and Wi-Fi for all attendees"],
terms: "30% deposit on signature, 40% at 60 days, balance at 14 days. Cancellation staged from 90 days. Meeting space held exclusively for the contracted dates. Final rooming list required 21 days before arrival.",
total: "€42,000" },
{ id: "leisure", name: "Leisure group series", tag: "LEISURE", palette: "rust", head: "eb",
desc: "Seasonal tour series for an agency, held rooms, one rate, transfers and a single invoice.",
kicker: "SERIES PROPOSAL", title: "A season of departures, priced once for {{account.name}}.",
note: "Dear {{contact.first_name}}, here is the series proposal for {{account.name}} across {{deal.dates}}. One rate, one release schedule and one invoice for the whole season, so your product team can publish with confidence and your operations team never has to chase a confirmation.\n\nWe have built the series around your published departure days and left room to grow the block mid-season if it sells ahead of forecast.",
figures: [["Departures", "26"], ["Rooms held", "34"], ["Room nights", "1,400"], ["Board", "Half board"]],
rooms: [["Double room · HB", "€96", "980 RN"], ["Family room · HB", "€142", "420 RN"]],
incl: ["Weekly guaranteed departures from May to October", "Airport transfers on arrival and departure", "Half board with one drink per meal", "Free tour-leader place per 20 paying guests", "Single seasonal invoice", "Mid-season block increase on request"],
terms: "Commission 10% settled monthly, net 45. Rooming lists 21 days before each departure. Cancellation of an individual departure at 30 days without penalty.",
total: "€62,000" },
{ id: "incentive", name: "Incentive trip, reward the best", tag: "MICE", palette: "plum", head: "baskerville",
desc: "Premium reward trip for top performers, suite stay, signature experiences, exclusive venue.",
kicker: "INCENTIVE PROPOSAL", title: "Four days worth winning, arranged for {{account.name}}.",
note: "Dear {{contact.first_name}}, an incentive trip is judged on the two hours your guests remember, not on the rate card. Below is a four-day programme built around a private beach venue, a chef's table for the leadership group, and a closing dinner your winners will talk about next year.\n\nEverything is exclusive-use where it matters and flexible where it does not.",
figures: [["Guests", "60"], ["Suites", "48"], ["Nights", "4"], ["Exclusive venues", "2"]],
rooms: [["Junior suite · AI", "€268", "144 RN"], ["Sea-view suite · AI", "€312", "48 RN"]],
incl: ["Exclusive use of the beach venue for the closing night", "Chef's table for the leadership group", "All-inclusive board with premium bar", "Welcome gift in room, personalised per guest", "Private transfers in executive vehicles", "Dedicated concierge for the full programme"],
terms: "50% deposit on signature, balance at 30 days. Exclusive-use venues confirmed on deposit. Cancellation 30 days before arrival with a 25% penalty.",
total: "€64,000" },
];
const COVER_NOTES = [
["Warm first enquiry", "Inviting opener for a brand-new prospect.", "Dear {{contact.first_name}}, thank you for getting in touch. It is a pleasure to hear from {{account.name}}. Here is what we can hold for you, and what it would cost."],
["Returning client", "Welcomes a repeat account back warmly.", "Dear {{contact.first_name}}, it is good to be working with {{account.name}} again. Building on last season, here is the structure we propose for {{deal.dates}}."],
["Formal corporate", "Precise, procurement-ready tone for corporate buyers.", "Dear {{contact.first_name}}, further to your request for proposal, please find below the negotiated terms for {{account.name}} covering {{deal.dates}}, quoted under reference {{quote.number}}."],
];
const INCLUSION_SETS = [
["Standard group", "Six core inclusions for a straightforward group stay.", ["Guaranteed room block", "Breakfast included", "Group check-in desk", "One free place per 20 paying guests", "Luggage handling", "Wi-Fi throughout"]],
["MICE & events", "Conference-ready inclusions, space, AV, catering, event manager.", ["Plenary room with AV", "Two breakout rooms", "Two coffee breaks per day", "Working lunch", "On-site event manager", "Registration desk and signage"]],
["Leisure half-board", "Leisure-group inclusions with half-board dining.", ["Half board with one drink per meal", "Airport transfers", "Welcome cocktail", "Tour-leader free place", "Pool and spa access", "Late check-out for the group"]],
];
const TERM_BLOCKS = [
["Flexible group, cancellation & payment", "Deposit plus staged cancellation with a flexible release window.", "20% deposit on signature. Staged cancellation from 60 days. Rooming list 14 days before arrival. Flexible release of unsold rooms up to 21 days out."],
["Non-refundable group", "Best-price, paid-on-signature, non-refundable terms.", "Full payment on signature. Non-refundable and non-transferable. Name changes accepted up to 7 days before arrival at no charge."],
["Contracted allotment release", "Allotment terms with a 21-day automatic release schedule.", "Allotment released automatically 21 days before arrival. Rate parity guaranteed across all channels. Commission settled monthly, net 30."],
];
const ROOM_CARDS = [
["Guaranteed seasonal allotment", "Double room · BB", "€104", "3,200 RN"],
["Congress single occupancy", "Single occupancy · HB", "€118", "260 RN"],
["Incentive sea-view suite", "Sea-view suite · AI", "€312", "48 RN"],
];
const ALL_SECTIONS = [
["cover", "Cover"], ["note", "Cover note"], ["figures", "Key figures"], ["rooms", "Accommodation"],
["incl", "Inclusions"], ["invest", "Investment"], ["terms", "Terms"], ["accept", "Acceptance"],
];
// ── merge-field aware text ──
function MergeText({ text, filled, design, onDark }) {
const parts = String(text).split(/(\{\{[a-z_.]+\}\})/g);
return (
<>
{parts.map((p, i) => {
const m = p.match(/^\{\{([a-z_.]+)\}\}$/);
if (!m) return {p};
if (filled) return {MERGE_VALUES[m[1]] || p};
return {p};
})}
);
}
// ── right-panel controls ──
function PanelBlock({ icon, title, note, children }) {
return (
{title}
{note &&
{note}
}
{children}
);
}
function PanelLabel({ children }) {
return {children};
}
function Seg({ options, value, onChange }) {
return (
{options.map(o => {
const v = Array.isArray(o) ? o[0] : o, l = Array.isArray(o) ? o[1] : o;
const on = value === v;
return (
);
})}
HEADLINES set("head", v)} sample="An offsite, arranged" />
BODY TEXT set("body", v)} sample="Rooms held for your group" />
TYPE SIZE · {design.typeScale}% set("typeScale", v)} />
HEADING WEIGHT set("headWeight", v)} />
LINE SPACING · {design.lineHeight.toFixed(2)} set("lineHeight", v)} />
HEADING TRACKING · {design.tracking} set("tracking", v)} />
No photo? The hero falls back to a gradient built from your primary colour.
PHOTO TINT · {design.heroTint}% set("heroTint", v)} />
HEIGHT set("heroHeight", v)} />
ALIGNMENT set("heroAlign", v)} />
INCLUSIONS set("inclusions", v)} />
ACCOMMODATION set("accommodation", v)} />
KEY FIGURES PER ROW set("figures", v)} />
SECTION BANDS set("bands", v)} />
CORNERS set("corners", v)} />
SPACING set("spacing", v)} />
PAGE WIDTH · {Math.round(design.pageWidth / 16)}REM set("pageWidth", v)} />
Content is untouched, only colours, fonts and layout reset.
)}
{panel === "track" && (
{[["Status", status], ["Views", status === "Sent" ? "9" : "0"], ["Languages", "EN · DE"], ["Recipient", "Lennart Brauwe"]].map(([k, v]) => (
{k.toUpperCase()}{v}
))}
{status === "Sent" ? [["Opened · Hannover, DE", "12 Aug 14:02 · Chrome 141"], ["Opened · Palma, ES", "11 Aug 09:41 · Safari iOS"], ["Link sent · EN + DE", "10 Aug 17:03 · by Adriana Vestri"]].map(([a, b]) => (
)) : Nothing tracked yet, send the proposal and every open, per language, lands here.}
)}
{panel === "history" && (
{[["Design changed · palette and headline font", "just now · you", FUCHSIA],
["Template applied · " + TEMPLATES.find(x => x.id === doc.template).name, "just now · you", VIOLET],
["Proposal created from deal", "28 Jun 2026 · Adriana Vestri", PLUM]].map(([a, b, c]) => (
))}
Every version is kept. Restoring one never changes what a client already signed.