// Forms — Scope (Draft 3 add-on): Commission Research Request Form. // Fields and copy per RDB spec. A second form (New Vendor Setup) is pending. // Inputs are native/uncontrolled so they stay directly editable in the wireframe. const COMMISSION_FIELDS = [ { id: "sion", label: "SION Booking number", type: "text", ph: "e.g. SN-4821093" }, { id: "agentName", label: "Agent name", type: "text", ph: "First and last name" }, { id: "agentEmail",label: "Agent email address", type: "email", ph: "you@rdbvip.com" }, { id: "resName", label: "Reservation name", type: "text", ph: "Name on the reservation" }, { id: "dates", label: "Arrival – Departure dates", type: "text", ph: "MM/DD/YYYY – MM/DD/YYYY" }, { id: "vendor", label: "Vendor name", type: "text", ph: "Supplier / property" }, { id: "vendorConf",label: "Vendor's confirmation number", type: "text", ph: "Confirmation #" }, { id: "method", label: "Vendor's method of payment", type: "select", options: ["Select method", "TACS", "NPC", "Onyx", "Check", "Other"] }, { id: "payRef", label: "Vendor's payment reference or check number", type: "text", ph: "Reference / check #" }, { id: "payDate", label: "Vendor's payment date", type: "date" }, { id: "checkAmt", label: "Vendor's check amount", type: "money", ph: "0.00" }, { id: "commAmt", label: "Your commission amount", type: "money", ph: "0.00", hint: "Approximate is fine" }, ]; // ── Shared form-submission helpers (used by Commission + Vendor forms) ──────── // Read a File as base64 (without the data-URL prefix) for JSON transport. function fileToBase64(file) { return new Promise((resolve, reject) => { const r = new FileReader(); r.onload = () => { const s = String(r.result || ""); resolve(s.slice(s.indexOf(",") + 1)); }; r.onerror = () => reject(new Error("Could not read the attached file.")); r.readAsDataURL(file); }); } // POST a form to the server relay (/api/submit-form), which injects the Web3Forms // key server-side and emails keyholders@rdbvip.com. Throws on failure. async function rdbSubmitForm({ formType, from_name, subject, replyto, fields, file }) { const payload = { formType, from_name, subject, replyto: replyto || "", fields: fields || {} }; if (file && file.size) { payload.file = { name: file.name, type: file.type || "application/octet-stream", base64: await fileToBase64(file) }; } const res = await fetch("/api/submit-form", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }); let data = {}; try { data = await res.json(); } catch (e) {} if (!res.ok || !data.success) { throw new Error((data && data.message) || "Submission failed. Please try again."); } return data; } // Inline error callout shown when a submission fails (shared by both forms). function FormError({ message, compact }) { return (
{message}
); } function FormField({ f }) { const [focus, setFocus] = React.useState(false); const required = f.id !== "notes"; const baseInput = { width: "100%", boxSizing: "border-box", background: "var(--ink-0)", border: "1px solid " + (focus ? "var(--rdb-gold)" : "var(--ink-3)"), color: "var(--fg-1)", fontFamily: "var(--font-body)", fontSize: 14, padding: "11px 13px", outline: "none", borderRadius: 2, transition: "border-color 140ms", }; return (
{f.type === "select" ? ( ) : f.type === "money" ? (
$ setFocus(true)} onBlur={() => setFocus(false)} style={{ ...baseInput, paddingLeft: 26 }} />
) : ( setFocus(true)} onBlur={() => setFocus(false)} style={baseInput} /> )}
); } // Defaults reproduce the Commission "Payment documentation" upload exactly; the // Vendor form passes its own label/hint/accept/placeholder. `inputName` lets the // chosen file be captured by the form's FormData on submit. function UploadField({ inputName = "payment", label = "Payment documentation", hint = "Image or PDF of the payment", placeholder = "Attach payment documentation", formats = "PNG, JPG, or PDF · up to 10 MB", accept = "image/*,.pdf", }) { const [name, setName] = React.useState(""); const [hover, setHover] = React.useState(false); return (
); } function CommissionForm({ compact }) { const [sent, setSent] = React.useState(false); const [sending, setSending] = React.useState(false); const [error, setError] = React.useState(""); const formRef = React.useRef(null); const pad = compact ? "22px 18px 60px" : "48px 64px 96px"; const maxW = compact ? "100%" : 880; async function submit(e) { e.preventDefault(); if (sending) return; setError(""); setSending(true); try { const fd = new FormData(formRef.current); let file = null; const raw = {}; for (const [k, v] of fd.entries()) { if (v instanceof File) { if (v && v.size) file = v; } else raw[k] = v; } // Forward fields under their human labels so the email reads cleanly. const fields = {}; COMMISSION_FIELDS.forEach(f => { fields[f.label] = raw[f.id] || ""; }); fields["Additional notes"] = raw.notes || ""; await rdbSubmitForm({ formType: "commission", from_name: "RDB Backstage — Commission Research", subject: "Commission Research Request — RDB Backstage", replyto: raw.agentEmail || "", fields, file, }); if (formRef.current) formRef.current.reset(); setSent(true); window.scrollTo(0, 0); } catch (err) { setError((err && err.message) || "We couldn't submit your request. Please try again."); } finally { setSending(false); } } return (
Backstage · Forms

Commission Research Request

{/* Purpose */}

Use this form to submit a commission research request for commissions that cannot be found in SION's Unreconciled Commissions. Please complete all required fields to help us process your request.

{/* Required-docs callout (Nova gold left-border pattern) */}
Payment documentation from the vendor is required — we can't research a request without proof of payment, and requests submitted without it will be returned.
Important: a matching booking must already be entered into SION before we can research and post the commission to your account.
{sent ? (
Request submitted
RDB Finance will follow up at the email provided.
) : (
{COMMISSION_FIELDS.map(f => )}
{/* Notes — full width */}