The Architecture Deep-Dive, Drawn Live

// keep a small, correct version ready to type or paste while sharing the screen
type State = 'business' | 'address' | 'photos' | 'guarantors' | 'income' | 'review' | 'submitting' | 'submitted' | 'failed';
type Event = { type: 'NEXT' } | { type: 'BACK' } | { type: 'SUBMIT' } | { type: 'RETRY' }
           | { type: 'SERVER_OK' } | { type: 'SERVER_ERR'; status: number; field?: string };

const order: State[] = ['business', 'address', 'photos', 'guarantors', 'income', 'review'];
const guards: Partial<Record<State, (d: Draft) => boolean>> = {
  photos: d => d.photos.length >= 2, guarantors: d => d.guarantors.every(g => g.bvnVerified),
};

function next(s: State, e: Event, d: Draft): State {
  const k = order.indexOf(s);
  switch (e.type) {
    case 'NEXT':   return k >= 0 && k < order.length - 1 && (guards[s]?.(d) ?? true) ? order[k + 1] : s;
    case 'BACK':   return k > 0 ? order[k - 1] : s;
    case 'SUBMIT': return s === 'review' ? 'submitting' : s;
    case 'SERVER_OK': return s === 'submitting' ? 'submitted' : s;
    case 'SERVER_ERR':
      if (s !== 'submitting') return s;
      return e.status >= 400 && e.status < 500 && e.field ? stepOwning(e.field) : 'failed';   // 4xx → the field's step
    case 'RETRY':  return s === 'failed' ? 'submitting' : s;                                 // same idempotency key
  }
}