/* global React */
/* Invoices — create an invoice, pick which of your accounts the customer should pay into, and
issue it as a PDF on the same document machinery as the account letter and receipts.
Internal-first: the immediate use is Onboard billing its own subscription customers, so the
"from" block is editable rather than locked to the signed-in business. The same screen is what
a customer would use to invoice their own buyers, which is why nothing here knows about
Onboard's plans — the line items are whatever you type.
Saved in localStorage, on this machine only. No backend, so an invoice created here is a
document, not a receivable: nothing reconciles it against an incoming payment yet. */
const { useState: useStateI } = React;
const IIcon = window.OBIcon;
const IData = window.OBData;
const { Page, Sheet, Pill, useIsDesktop: useIsDesktopI } = window.OBPrimitives;
const { openDocument: iOpenDocument } = window.OBLetter;
const INVOICE_KEY = "ob_invoices";
const CCY_SYMBOL = { USD: "$", NGN: "₦", GBP: "£", EUR: "€" };
const INVOICE_CCYS = ["USD", "NGN", "GBP", "EUR"];
// Bank details are the ones this business already holds — picked, not typed, because an invoice
// must never quote an account that doesn't exist. Stablecoin addresses are typed for now: the
// wallet being invoiced into may be one Onboard doesn't issue.
const PAY_KINDS = [
{ id: "usd", label: "USD account", hint: "Wire, ACH or SWIFT" },
{ id: "ngn", label: "NGN account", hint: "Naira bank transfer" },
{ id: "eurgbp", label: "EUR or GBP account", hint: "SEPA, FPS or CHAPS" },
{ id: "stablecoin", label: "Stablecoin", hint: "USDC or USDT on any network", coin: true },
];
const STABLE_COINS = ["USDC", "USDT"];
// One source for the networks — the same list Deposit and sub-accounts render.
const chainsFor = (coin) => ((IData.STABLECOIN_CHAINS || {})[coin] || []);
const kindOf = (id) => PAY_KINDS.find((k) => k.id === id) || PAY_KINDS[0];
// The accounts this business actually holds. USD is one account, not three: ACH, Fedwire and
// SWIFT all arrive at the same details, which is how the Deposit page states it.
function payAccounts() {
const wire = (IData.FIAT_RAILS || []).find((r) => r.id === "usd-wire");
const rails = wire ? [{
id: "usd",
label: "USD account",
sub: "ACH, Fedwire or SWIFT",
fields: wire.fields.map((f) => [f.k, f.v]),
}] : [];
const ngn = {
id: "ngn",
label: "NGN account",
sub: "Naira bank transfer",
fields: [["Account name", "GFS / Acme Trading Co"], ["Bank", "Aella Microfinance Bank"], ["Account number", "5200 0443 12"]],
};
const chains = IData.STABLECOIN_CHAINS || {};
const coins = ["USDC", "USDT"].filter((c) => chains[c] && chains[c].length).map((c) => {
const net = chains[c].find((n) => n.id === (c === "USDC" ? "base" : "tron")) || chains[c][0];
return {
id: `${c.toLowerCase()}-${net.id}`,
label: `${c} · ${net.name}`,
sub: `${net.short} · arrives ${net.arrival}`,
fields: [["Network", `${net.name} (${net.short})`], ["Address", net.address]],
};
});
return [...rails, ngn, ...coins];
}
const parseNum = (v) => parseFloat(String(v).replace(/,/g, "")) || 0;
const money = (n, ccy) => `${CCY_SYMBOL[ccy] || ""}${n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
const todayISO = () => new Date().toISOString().slice(0, 10);
const plusDays = (days) => new Date(Date.now() + days * 86400000).toISOString().slice(0, 10);
const prettyDate = (iso) => {
if (!iso) return "";
const d = new Date(iso + "T00:00:00");
return isNaN(d) ? iso : d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
};
function loadInvoices() {
try { return JSON.parse(localStorage.getItem(INVOICE_KEY) || "[]"); } catch (e) { return []; }
}
function saveInvoices(list) {
try { localStorage.setItem(INVOICE_KEY, JSON.stringify(list)); } catch (e) { /* private mode */ }
}
function nextNumber(list) {
const year = new Date().getFullYear();
const used = list
.map((i) => (i.number || "").match(new RegExp(`^INV-${year}-(\\d+)$`)))
.filter(Boolean)
.map((m) => parseInt(m[1], 10));
const n = (used.length ? Math.max(...used) : 0) + 1;
return `INV-${year}-${String(n).padStart(4, "0")}`;
}
const BP = IData.BUSINESS_PROFILE || {};
const addrLines = (a) => (a ? [a.line1, a.line2, [a.city, a.region].filter(Boolean).join(", "), a.postalCode, a.country].filter(Boolean) : []);
// Who most invoices are from and to while this is used internally. A new invoice inherits
// whoever the last one was addressed to, so switching customers sticks without editing these.
const DEFAULT_FROM = {
name: "Gopay Financial Services Inc. (Onboard Pay)",
address: "3080 Yonge St, Suite 6060\nToronto, ON M4N 3N1, Canada",
email: "finance@onboard.xyz",
};
const DEFAULT_TO = {
name: "Muva Networks Limited",
address: "1 Ayo Makun Street, Richmond Gate Estate 1\nLagos, Nigeria",
email: "babasola@muvanetworks.com",
};
function blankInvoice(list) {
const last = (list || [])[0];
return {
id: "inv-" + Date.now(),
number: nextNumber(list),
issued: todayISO(),
due: plusDays(14),
currency: "USD",
status: "draft",
from: last ? { ...last.from } : { ...DEFAULT_FROM },
to: last ? { ...last.to } : { ...DEFAULT_TO },
payTo: last ? (last.payTo || []).map((m) => ({ ...m, id: m.id + "-c" })) : [],
items: [{ desc: "", qty: "1", price: "" }],
taxRate: "",
discount: "",
discountType: "pct",
notes: "",
};
}
// Discount comes off before tax, which is how tax is assessed nearly everywhere.
const invoiceTotals = (inv) => {
const subtotal = (inv.items || []).reduce((s, it) => s + parseNum(it.qty) * parseNum(it.price), 0);
const raw = parseNum(inv.discount);
const discount = Math.min(inv.discountType === "amt" ? raw : subtotal * (raw / 100), subtotal);
const taxable = subtotal - discount;
const tax = taxable * (parseNum(inv.taxRate) / 100);
return { subtotal, discount, taxable, tax, total: taxable + tax };
};
// ---------- The document ----------
// Not the Onboard letterhead: this invoice comes from the business, so the business's name is the
// masthead and Onboard appears once, small, at the foot.
function InvoiceDoc({ inv }) {
const { subtotal, discount, tax, total } = invoiceTotals(inv);
const accounts = (inv.payTo || []).filter((a) => a && a.fields && a.fields.length);
const fromLines = (inv.from.address || "").split("\n").filter(Boolean);
const toLines = (inv.to.address || "").split("\n").filter(Boolean);
return (