br-pay.jsx
1 // Brutalist CHECKOUT / REMITTANCE — two-column receipt-style payment form. 2 3 function BRPay({ cart, onNav, onComplete }) { 4 const subtotal = cart.reduce((a,c) => a + c.price, 0); 5 const brokerage = Math.round(subtotal * 0.015); 6 const escrow = Math.round(subtotal * 0.008); 7 const insurance = Math.round(subtotal * 0.018); 8 const tariff = Math.round(subtotal * 0.042); 9 const total = subtotal + brokerage + escrow + insurance + tariff; 10 11 const [method, setMethod] = React.useState("escrow"); 12 const methods = [ 13 ["escrow", "STELLAR BANK ESCROW", "Bonded clearinghouse — 2 cycles"], 14 ["credit", "COALITION CREDIT LINE", "Instant draw, 4.2% APR"], 15 ["bullion", "BULLION TRANSFER", "Platinum bars — in-person at yard"], 16 ["lease", "INDEFINITE LEASE", `From ₵${formatCred(Math.round(total/120))}/mo · 10-cyc min`], 17 ]; 18 19 return ( 20 <BRPage minHeight={1500}> 21 <BRNav active="pay" cartCount={cart.length} onNav={onNav}/> 22 23 {/* HEADER */} 24 <div style={{padding:"30px 40px 20px", borderBottom:`4px double ${BR.ink}`, display:"flex", justifyContent:"space-between", alignItems:"flex-end"}}> 25 <div> 26 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:3, color:BR.mute, textTransform:"uppercase"}}>FORM 9A · REMITTANCE</div> 27 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:92, lineHeight:0.9, letterSpacing:-2, textTransform:"uppercase", marginTop:6}}>Remittance</div> 28 </div> 29 <div style={{display:"flex", alignItems:"center", gap:14}}> 30 {["MANIFEST","REMITTANCE","RECEIPT"].map((step, i) => ( 31 <React.Fragment key={step}> 32 <div style={{textAlign:"center"}}> 33 <div style={{width:40, height:40, border:`2px solid ${BR.ink}`, background: i===1 ? BR.ink : i===0 ? BR.mute2 : BR.paper, color: i<=1 ? BR.paper : BR.ink, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"Oswald", fontWeight:900, fontSize:16, margin:"0 auto"}}> 34 {i===0 ? "✓" : i+1} 35 </div> 36 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute, marginTop:4, textTransform:"uppercase"}}>{step}</div> 37 </div> 38 {i<2 && <div style={{width:40, height:2, background:BR.ink, marginBottom:18}}/>} 39 </React.Fragment> 40 ))} 41 </div> 42 </div> 43 44 {/* BODY */} 45 <div style={{display:"grid", gridTemplateColumns:"1.6fr 1fr"}}> 46 47 {/* FORM */} 48 <div style={{borderRight:`1px solid ${BR.ink}`, padding:"24px 36px"}}> 49 50 <BRH n="01">Consignee Particulars</BRH> 51 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16}}> 52 <FieldBR label="Buyer of Record" value="Cmdr. Orlan Veyr" hand/> 53 <FieldBR label="Department" value="7th Expeditionary · LOG"/> 54 <FieldBR label="Rank / Tier" value="Commodore · Tier-3"/> 55 <FieldBR label="Comms ID" value="VEYR.O@7EXP.COALITION"/> 56 <FieldBR label="Sector" value="G-4 · Ceres Orbital"/> 57 <FieldBR label="Bay" value="Hangar 22-E · Dry-dock C"/> 58 </div> 59 60 <div style={{height:24}}/> 61 <BRH n="02">Remittance Method</BRH> 62 <div style={{display:"grid", gap:10}}> 63 {methods.map(([id, name, desc]) => ( 64 <label key={id} onClick={()=>setMethod(id)} style={{display:"flex", gap:14, padding:"14px 18px", border:`2px solid ${BR.ink}`, cursor:"pointer", background: method===id ? BR.ink : BR.paper, color: method===id ? BR.paper : BR.ink}}> 65 <div style={{width:16, height:16, border:`2px solid ${method===id ? BR.paper : BR.ink}`, borderRadius:"50%", flexShrink:0, marginTop:3, position:"relative"}}> 66 {method===id && <div style={{position:"absolute", inset:3, background:BR.paper, borderRadius:"50%"}}/>} 67 </div> 68 <div style={{flex:1}}> 69 <div style={{display:"flex", justifyContent:"space-between"}}> 70 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:15, letterSpacing:2.5}}>{name}</div> 71 {id==="escrow" && <BRChip ok>RECOMMENDED</BRChip>} 72 </div> 73 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, opacity:0.75, marginTop:3}}>{desc}</div> 74 </div> 75 </label> 76 ))} 77 </div> 78 79 <div style={{height:24}}/> 80 <BRH n="03">{method === "credit" ? "Credit Instrument" : method === "escrow" ? "Bonded Instrument" : method === "bullion" ? "Bullion Schedule" : "Lease Particulars"}</BRH> 81 82 {(method === "credit" || method === "escrow") && ( 83 <> 84 <div style={{display:"grid", gridTemplateColumns:"1.3fr 1fr 1fr", gap:16}}> 85 <FieldBR label={method==="credit" ? "Credit № (16)" : "Escrow Account"} value={method==="credit" ? "4912 7841 0204 3318" : "STLR-9912-44804-C"}/> 86 <FieldBR label="Expiry / Cycle" value="2399.244"/> 87 <FieldBR label="Seal Code" value="●●●●"/> 88 </div> 89 <FieldBR label="Signatory Name" value="O. VEYR" hand/> 90 <FieldBR label="Bonded by" value="Stellar Bank · Node Ceres-II"/> 91 </> 92 )} 93 {method === "bullion" && ( 94 <div style={{fontFamily:"IBM Plex Sans", fontSize:13, color:BR.ink2, lineHeight:1.6, padding:"12px 14px", border:`2px dashed ${BR.ink}`}}> 95 Bullion transfer requires physical attendance at {cart[0]?.ship.mfg.loc ?? "origin yard"}. Yard weighmaster will certify purity and mass. Allow 6 cycles. Contact the desk to schedule. 96 </div> 97 )} 98 {method === "lease" && ( 99 <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:16}}> 100 <FieldBR label="Lease term" value="24 cycles"/> 101 <FieldBR label="Buyout clause" value="Residual 12% at term"/> 102 </div> 103 )} 104 105 <div style={{marginTop:22, padding:"12px 14px", border:`2px solid ${BR.rust}`, display:"flex", gap:10, background:"rgba(194,66,26,0.05)"}}> 106 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:22, color:BR.rust}}>⚑</div> 107 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, color:BR.rust, letterSpacing:1.2, lineHeight:1.5, textTransform:"uppercase"}}> 108 This remittance is binding under Coalition Commerce Act §412. Once cleared, title passes irrevocably upon receipt of possession. No refunds. No brokered reversals. 109 </div> 110 </div> 111 </div> 112 113 {/* RECEIPT */} 114 <div style={{padding:"24px 28px", background:BR.paper2, display:"flex", flexDirection:"column"}}> 115 <BRH n="04">Summary</BRH> 116 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, color:BR.mute, letterSpacing:1.5, marginBottom:10, textTransform:"uppercase"}}>MANIFEST M-2396-11404</div> 117 118 {cart.map((c, i) => ( 119 <div key={i} style={{padding:"8px 0", borderBottom:`1px dotted ${BR.ink}33`}}> 120 <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline"}}> 121 <div> 122 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:1, textTransform:"uppercase"}}>{c.ship.model}</div> 123 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:1}}>{c.ship.serial} · {c.config}</div> 124 </div> 125 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14}}>₵{formatCred(c.price)}</div> 126 </div> 127 </div> 128 ))} 129 130 <div style={{marginTop:14}}> 131 <BRSpec k="Subtotal" v={`₵${formatCred(subtotal)}`}/> 132 <BRSpec k="Brokerage" v={`₵${formatCred(brokerage)}`}/> 133 <BRSpec k="Escrow" v={`₵${formatCred(escrow)}`}/> 134 <BRSpec k="Insurance" v={`₵${formatCred(insurance)}`}/> 135 <BRSpec k="Tariff" v={`₵${formatCred(tariff)}`}/> 136 </div> 137 138 <div style={{marginTop:18, padding:"16px 0", borderTop:`2px solid ${BR.ink}`, borderBottom:`2px solid ${BR.ink}`}}> 139 <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline"}}> 140 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:3, textTransform:"uppercase"}}>Total to Remit</div> 141 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:40, letterSpacing:-1}}>₵{formatCred(total)}</div> 142 </div> 143 </div> 144 145 <div style={{marginTop:18, fontFamily:"'Caveat','Space Grotesk',cursive", fontSize:24, color:BR.ink, borderBottom:`2px solid ${BR.ink}`, paddingBottom:6}}> 146 O. Veyr 147 </div> 148 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute, marginTop:4, textTransform:"uppercase"}}>Signatory — bound under §412</div> 149 150 <div style={{marginTop:"auto", paddingTop:20}}> 151 <button onClick={onComplete} style={{ 152 width:"100%", padding:"22px 0", background:BR.rust, color:BR.paper, border:"none", 153 fontFamily:"Oswald", fontWeight:900, fontSize:16, letterSpacing:4, cursor:"pointer", 154 }}>▸ REMIT ₵{formatCred(total)}</button> 155 <button onClick={()=>onNav("cart")} style={{width:"100%", marginTop:8, padding:"14px 0", background:"transparent", color:BR.ink, border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, cursor:"pointer"}}>◂ RETURN TO MANIFEST</button> 156 157 <div style={{marginTop:14, display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:1.5, color:BR.mute, textTransform:"uppercase"}}> 158 <span>◆ Q-KEY 4096 SECURE</span> 159 <span>◆ BONDED TIER-3</span> 160 <span>◆ NOTARIZED</span> 161 </div> 162 </div> 163 </div> 164 </div> 165 166 <BRFooter/> 167 </BRPage> 168 ); 169 } 170 171 function FieldBR({ label, value, hand }) { 172 return ( 173 <div style={{padding:"10px 0", borderBottom:`2px solid ${BR.ink}`}}> 174 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute, textTransform:"uppercase"}}>{label}</div> 175 <div style={{fontFamily: hand ? "'Caveat','Space Grotesk',cursive" : "IBM Plex Mono", fontSize: hand ? 22 : 14, fontWeight: 500, color:BR.ink, marginTop: hand ? 0 : 4}}>{value}</div> 176 </div> 177 ); 178 } 179 180 Object.assign(window, { BRPay });