set('fullName', v)} required/>

set('dob', v)} required/> set('nationality', v)}/>

set('idNumber', v)} mono required/>

set('phone', v)} mono required hint="Used for OTP and advance notifications."/> set('email', v)} required/> set('employer', v)}/>

); } // ── Step: business KYC ───────────────────────────────────────── function StepBusinessKYC({d, set}) { const typeLabels = {llc: 'Limited Company', trust: 'Family Trust'}; return (

set('bizName', v)} required/>

set('bizReg', v)} mono required/> set('bizDate', v)}/>

{typeLabels[d.entityType] || d.entityType} Set on previous step · cannot be changed

Authorized Officer

set('officerName', v)} required/> set('officerID', v)} mono required/>

set('officerEmail', v)} required/> set('officerPhone', v)} mono/> {d.entityType === 'trust' && ( <> Trustees

Each trustee needs to complete individual KYC via an invite link sent to their email. You can manage trustees after onboarding.

)}

); } // ── Step: KYC documents upload ───────────────────────────────── function StepDocuments({d, set, isIndividual}) { const [uploads, setUploads] = React.useState({}); const markUploaded = (key) => { const next = {...uploads, [key]: true}; setUploads(next); set('docsUploaded', next); }; const docList = isIndividual ? [ {key: 'id_front', label: 'National ID — Front', hint: 'JPG or PNG, under 5MB'}, {key: 'id_back', label: 'National ID — Back', hint: 'JPG or PNG, under 5MB'}, {key: 'selfie', label: 'Selfie / Liveness photo', hint: 'Take or upload a clear photo of your face'}, ] : [ { key: 'cert_inc', label: d.entityType === 'trust' ? 'Trust Deed' : 'Certificate of Incorporation', hint: 'PDF or scanned copy' }, { key: 'cr12', label: d.entityType === 'trust' ? 'Trustee Resolution' : 'CR12 (Directors list)', hint: 'Within last 12 months' }, {key: 'officer_id', label: "Authorized Officer's National ID", hint: 'Front side, JPG or PNG'}, ]; return (

{docList.map(doc => ( markUploaded(doc.key)}/> ))}

Documents are encrypted at rest and only accessed by Gigi's compliance team under the CBK Digital Credit Provider framework.

); } // ── Step: KRA PIN ───────────────────────────────────────────── function StepKRAPIN({d, set}) { const [verified, setVerified] = React.useState(false); const [checking, setChecking] = React.useState(false); const check = () => { if (!d.kraPin) return; setChecking(true); setTimeout(() => { setChecking(false); setVerified(true); set('kraVerified', true); }, 1200); }; return (

{ set('kraPin', v); setVerified(false); set('kraVerified', false); }} mono required hint="Format: 1 letter + 9 digits + 1 letter (e.g. A004221987P)"/> {!verified ? {checking ? 'Verifying…' : 'Verify with iTax'} : (

KRA PIN verified

Taxpayer found — compliance status: Active

) } {d.entityType !== 'individual' && ( <> set('bizKraPin', v)} mono hint="Separate PIN for the registered entity."/> set('kraCertUploaded', true)} filename="KRA_Certificate.pdf"/> )}

); } // ── Step: disbursement ──────────────────────────────────────── function StepDisbursement({d, set}) { return (

{[ {id: 'mpesa', icon: 'mpesa', label: 'M-Pesa Business', desc: 'Mpesa Number'}, {id: 'bank', icon: 'bank', label: 'Corporate Bank', desc: 'NCBA, Equity, KCB, etc.'}, ].map(o => { const on = d.disbursement === o.id; return (

set('disbursement', o.id)} className="g-tap" style={{ padding: '16px', borderRadius: 'var(--r-md)', border: `1.5px solid ${on ? 'var(--accent-ink)' : 'var(--line)'}`, background: on ? 'var(--surface)' : 'var(--surface)', boxShadow: on ? 'var(--shadow)' : 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>

{o.label}

{o.desc}

{on && Selected}

); })}

{d.disbursement === 'mpesa' && ( <> set('mpesaAccount', v)} mono prefix="Mpesa" required/> set('mpesaName', v)}/> )} {d.disbursement === 'bank' && ( <> set('bankName', v)} required/> set('bankAccount', v)} mono required/> set('bankHolder', v)}/> )} {d.disbursement && (

This destination is locked after submission. Changes require re-authentication and are audited under CBK requirements.

)}

); } // ── Step: property type ─────────────────────────────────────── function StepPropertyType({d, set}) { const G = window.GIGI; const types = Object.entries(G.PROP_TYPES).map(([id, v]) => ({id, ...v})); return (

set('propType', v)}/> {d.propType && (

{G.PROP_TYPES[d.propType].multi ? 'Multi-unit property — you\'ll configure individual units and assign tenants per unit.' : 'Single dwelling — you\'ll add one tenant directly to this property.'}

)}

); } // ── Step: property details ───────────────────────────────────── function StepPropertyDetails({d, set}) { const [titleUploaded, setTitleUploaded] = React.useState(false); const [ownershipUploaded, setOwnershipUploaded] = React.useState(false); return (

set('propName', v)} required/> set('propAddress', v)} required/>

set('propLR', v)} mono required/> set('propStake', +e.target.value)} style={{flex: 1, accentColor: 'var(--accent-ink)'}}/>

{d.propStake || 100}%

{(d.propStake || 100) < 100 && (

Co-owners will receive an invite to register and attest their stake. Advances on this property require majority consent.

)}

Required documents { setTitleUploaded(true); set('titleDeedUploaded', true); }}/> { setOwnershipUploaded(true); set('ownershipDocUploaded', true); }}/> {d.propType === 'office' || d.propType === 'apartment_block' ? ( set('masterLeaseUploaded', true)}/> ) : null}