Today, inviting a teammate to 1,247 WABAs takes 2,000+ clicks: one selection per channel, one role dropdown per channel. This redesign splits the flow into three focused steps in a 720-wide modal — with a left rail that tracks where you are and reveals a live member preview the moment you start typing.
Fully clickable prototype with 1,247 mock WABA channels. Type into the form and watch the left-rail member card fill in live. Then search, bulk-select, override roles, and send.
Every step shares the same 720 × 640 shell, split into a sage-tinted left rail (vertical step nav + live member-preview card) and a focused right pane. The member preview only appears once the user starts filling in details.
Identity + organization role. Each field you type writes into the rail's member card on the left, so the modal always shows who you're inviting.
Virtualised list of every WABA. Filter (search · channel type · status) → Select all matching. Default role applies to each new selection; override any row inline.
Summary card with member + org role + channel breakdown. Click any step in the rail to jump back. One green button to send.
On viewports below 720px the modal becomes a full-screen sheet. The vertical rail collapses into a horizontal step bar across the top; the member preview becomes a single-line chip with avatar, name and role. Tap targets bump to 40–44px throughout.
Or open the prototype on your phone (or resize your browser below 720px) to drive it directly.
Implementation lives in team-member-invite-modal.tsx + team-member-wabas-list.tsx. No new API contracts; multi-step + rail state are local component state.
WabaIntegrationPaginationParams (search, type, status).includeAllIntegrations.