// Quote / Invoice detail modal — open an existing document, edit its line
// items, change status per the never-delete lifecycle, download the PDF,
// and email it to the customer. One component for both doc kinds: they
// differ only in labels, status vocabulary, and the payments panel.
//
// Lifecycle rules enforced here (mirror the backend):
// - Quotes: items editable while draft or sent (a quote is a negotiation
// document); issued quotes are cancelled, never deleted.
// - Invoices: items editable only in draft — an issued invoice is a
// financial record; fix mistakes by voiding and reissuing.
// - paid/partial are ledger-derived, never set by hand.
const DOC_KIND = {
quote: {
noun: 'Quote', numberKey: 'quote_number', dateKey: 'expiry_date', dateLabel: 'Valid until',
manualStatuses: ['draft', 'sent', 'accepted', 'declined', 'expired', 'cancelled'],
deadStatus: 'cancelled', deadVerb: 'Cancel',
canEditItems: (s) => s === 'draft' || s === 'sent',
},
invoice: {
noun: 'Invoice', numberKey: 'invoice_number', dateKey: 'due_date', dateLabel: 'Due date',
manualStatuses: ['draft', 'sent', 'overdue', 'void'],
deadStatus: 'void', deadVerb: 'Void',
canEditItems: (s) => s === 'draft',
},
};
// inline: render as a docked side pane (no overlay) instead of a modal —
// used by the account detail split view. Same content, different chrome.
// allowPopout=false hides the open-in-window button (set inside the popout
// itself, where popping out again makes no sense).
const DocDetailModal = ({ kind, docId, currentUser, onClose, onChanged, inline, allowPopout = true }) => {
const K = DOC_KIND[kind];
const [doc, setDoc] = React.useState(null);
const [products, setProducts] = React.useState([]);
const [err, setErr] = React.useState('');
const [busy, setBusy] = React.useState(false);
// Line-item editing: local draft rows keyed by item id ('new' = the add row).
const [editRows, setEditRows] = React.useState({});
const [notesDraft, setNotesDraft] = React.useState(null); // null = not editing
const [billToDraft, setBillToDraft] = React.useState(null); // null = not editing
// Acceptance evidence (quotes): loaded when the quote is accepted; the
// terms text itself expands on demand.
const [acceptance, setAcceptance] = React.useState(null);
const [showTermsText, setShowTermsText] = React.useState(false);
// Send panel
const [showSend, setShowSend] = React.useState(false);
const [sendTo, setSendTo] = React.useState('');
const [sendMsg, setSendMsg] = React.useState('');
const [sendResult, setSendResult] = React.useState(null);
const getDoc = kind === 'quote' ? api.getQuote : api.getInvoice;
const load = async () => {
try {
const d = await getDoc(docId);
setDoc(d);
if (kind === 'quote' && d.status === 'accepted') {
api.getQuoteAcceptance(d.id).then(rows => setAcceptance(rows[0] || null)).catch(() => {});
}
// Prefill the send recipient, best-effort: the doc's contact, or —
// when there is none (individual accounts ARE the client, no
// contact row) — the account's own email.
if (d.contact_id && !sendTo) {
api.getContacts({ account_id: d.account_id }).then(cs => {
const c = cs.find(x => x.id === d.contact_id);
const email = c?.emails?.find(e => e.is_primary)?.value || c?.emails?.[0]?.value;
if (email) setSendTo(prev => prev || email);
}).catch(() => {});
} else if (!d.contact_id && !sendTo) {
api.getAccount(d.account_id).then(a => {
if (a?.main_email) setSendTo(prev => prev || a.main_email);
}).catch(() => {});
}
} catch (e) { setErr(e.message); }
};
React.useEffect(() => {
// Clear the previous document first — the docked pane reuses this
// component across doc switches, and stale data/errors must not show
// while the new fetch is in flight.
setDoc(null); setErr(null);
load();
api.getProducts({ active: 'true' }).then(setProducts).catch(() => {});
}, [docId]);
if (!doc) {
const pending = err ?
);
};
const statusOptions = K.manualStatuses.includes(doc.status)
? K.manualStatuses
: [doc.status, ...K.manualStatuses]; // ledger-derived (paid/partial) shows but stays reachable-only-by-ledger
// Header + body are built once; the chrome around them (modal overlay vs
// docked pane) is chosen at the bottom based on the inline prop.
const headerContent = (
<>
{sendResult.reason === 'no_mailbox'
? 'No connected mailbox — connect one in Email Settings (envelope icon, top right), or download the PDF and send it yourself.'
: 'Sending failed — check Email Settings for the mailbox status, or download the PDF and send it yourself.'}
)}
{sendResult && sendResult.sent && (
// "Accepted" is the honest word — the provider took it, which
// is not the same as it landing. Naming the lane here is the
// fix for the "it's not in my Outlook Sent folder" question:
// a platform-lane send never transits the rep's mailbox.