// Optimal Trade — Screens 2: Suppliers, SupplierProfile, Contract, Logistics, PayConfirm const { useState: useState2, useEffect: useEffect2 } = React; /* ============================== SUPPLIER CATALOG ================================ */ function SupplierCatalog({ app }) { const [q, setQ] = useState2(""); const [cat, setCat] = useState2("All"); const cats = ["All", "Electronics", "Textiles", "Automotive", "Homeware", "Agriculture"]; const list = SUPPLIERS.filter(s => (cat === "All" || s.cat === cat) && (s.name.toLowerCase().includes(q.toLowerCase()) || s.cat.toLowerCase().includes(q.toLowerCase()))); return (
} />
setQ(e.target.value)} />
{cats.map(c => ( ))}
{list.map(s => (
app.navigate("supplier", { supplier: s })}>
{s.authorized && }
{s.name} {s.country} · {s.cat}
{s.rating}
{s.tags.map(t => {t})} {!s.authorized && Not authorized}
))}
); } /* ============================== SUPPLIER PROFILE =============================== */ function SupplierProfile({ app, params }) { const s = params.supplier; return (
} />

{s.name}

{s.country} · {s.cat}
{s.authorized ? Authorized supplier : Awaiting authorization}
{[["star", s.rating, "Rating"], ["package", s.orders, "Orders"], ["clock", s.lead.split("–")[0] + "d", "Lead time"]].map(([ic, val, lab]) => (
{val}
{lab}
))}

{s.blurb}

Product lines
{s.tags.map(t => {t})}
{s.authorized ? : }
); } /* ============================== CONTRACT / INVOICE ============================= */ function ContractCreate({ app, params }) { const a = app.account; const sup = params && params.supplier; const [supplier, setSupplier] = useState2(sup || null); const [pickerOpen, setPickerOpen] = useState2(false); const [goods, setGoods] = useState2(""); const [amount, setAmount] = useState2(8200); const [ccy, setCcy] = useState2("USD"); const [incoterm, setIncoterm] = useState2("FOB"); const valid = supplier && goods.trim() && amount > 0; return (
setGoods(e.target.value)} />
{ccy === "USD" ? "$" : ccy === "CNY" ? "\u00A5" : "\u062F.\u0625"} setAmount(+e.target.value.replace(/[^0-9]/g, "") || 0)} />
{["USD", "CNY", "AED"].map(c => )}
{["FOB", "CIF", "EXW"].map(t => )}
app.navigate("logistics")}>Calculate} />
{pickerOpen && (
setPickerOpen(false)}>
e.stopPropagation()}>

Select supplier

{SUPPLIERS.filter(s => s.authorized).map(s => ( } title={s.name} sub={`${s.country} · ${s.cat}`} onClick={() => { setSupplier(s); setPickerOpen(false); }} /> ))}
)}
); } /* ============================== LOGISTICS CALCULATOR =========================== */ function LogisticsCalc({ app }) { const [origin, setOrigin] = useState2("Shenzhen, China"); const [mode, setMode] = useState2("sea"); const [weight, setWeight] = useState2(1200); const [volume, setVolume] = useState2(8); const modes = [ { id: "sea", label: "Sea", icon: "ship", rate: 2.1, days: "18–24", base: 480 }, { id: "air", label: "Air", icon: "plane", rate: 6.8, days: "4–7", base: 320 }, { id: "road", label: "Road", icon: "truck", rate: 3.4, days: "10–16", base: 260 }, ]; const m = modes.find(x => x.id === mode); const cost = Math.round(m.base + weight * m.rate + volume * 95); return (
{modes.map(x => ( ))}
Estimated logistics cost
{money("$", cost)}
{m.label} freight · {m.days} days · customs included
); } function Slider({ label, value, setValue, min, max, step, unit }) { const pct = ((value - min) / (max - min)) * 100; return (
{fmt(value)} {unit}
setValue(+e.target.value)} style={{ width: "100%", accentColor: "var(--ot-orange)", background: `linear-gradient(90deg,var(--ot-orange) ${pct}%, var(--ot-gray-200) ${pct}%)`, height: 6, borderRadius: 999, appearance: "none", WebkitAppearance: "none", outline: "none" }} />
); } /* ============================== PAYMENT CONFIRMATION =========================== */ function PayConfirm({ app, params }) { const a = app.account; // paying: a To-pay invoice, a new draft, or an existing pending contract const src = params.invoice || params.draft || params.contract; const draft = params.draft; const supplierName = draft ? draft.supplier.name : src.supplier; const flag = draft ? draft.supplier.flag : src.flag; const amount = src.amount; const ccy = src.ccy || "USD"; const sym = ccy === "USD" ? "$" : ccy === "CNY" ? "\u00A5" : ccy === "AED" ? "\u062F.\u0625" : "$"; const goods = src.goods; const incoterm = src.incoterm || (draft && draft.incoterm) || "FOB"; const id = src.id || ("OT-" + (2050 + Math.floor(Math.random() * 40))); const rate = ccy === "USD" ? 1512.4 : ccy === "CNY" ? 208.65 : 411.78; const fee = Math.round(amount * 0.015); const localCost = Math.round((amount + fee) * rate); const [stage, setStage] = useState2("review"); // review | processing | done const [authed, setAuthed] = useState2(false); const [openFee, setOpenFee] = useState2(false); const pay = () => { setStage("processing"); setTimeout(() => { app.payContract({ id, supplier: supplierName, flag, amount, ccy, sym, goods, incoterm, localCost, fromInvoice: !!params.invoice }); setStage("done"); }, 1900); }; if (stage === "processing") return (
Settling payment

Converting {a.ccy} and routing {money(sym, amount)} to {supplierName} via the finance center.

); if (stage === "done") return (

Payment sent

{id} · {supplierName}

Shipment created
Receipt saved · protected by mandate contract №{id}
); return (
{/* total on top */}
Supplier gets {supplierName}
{money(sym, amount)}
You pay ≈ {money(a.sym, localCost)} from {a.ccy}
{/* fee accordion (transparency before confirm) */}
{openFee &&
}
); } Object.assign(window, { SupplierCatalog, SupplierProfile, ContractCreate, LogisticsCalc, Slider, PayConfirm });