UIComponents

Port-in wizard

A guided port-in: check portability, collect the losing-carrier account details, open a draft, and submit it for review — the create/submit flow that port-status only lets you watch.

  1. Numbers
    2. ›
  2. Details
    3. ›
  3. Review
    4. ›
  4. Done

Installation

npx shadcn@latest add @handset/port-in-wizard

Uses the proxy's porting routes (POST /port_ins/check, /port_ins, /port_ins/:id/submit). Pair with port-status to follow the order afterward.

Usage

import { PortInWizard } from "@/components/handset/port-in-wizard";

<PortInWizard tenantId={tenant.id} onSubmitted={(port) => router.push(`/ports/${port.id}`)} />

Built on usePorting. Try +14155550142 in the demo (a number containing 0004 comes back not portable, so you can see that path). Submitting sends the order to the carrier and can't be edited afterward.

Props

Props
PropTypeDefaultDescription
tenantIdstring—The tenant the ported numbers belong to (tnt_…).
onSubmitted(portIn: PortIn) => void—Called with the submitted order.
classNamestring—Merged onto the root card.