Shipping and billing address

Add it to your project

The command installs only the module; the page is your call. Your choices below prepare the prompt and the page code.

Add the checkout-address module to my ViraStack Start project.

1. Run `npx virastack add checkout-address` in the project root. It installs only the `src/features/checkout-address` folder and its packages, and creates no page. If you get a conflict error, delete nothing and tell me.
2. Confirm from `package.json` and the folder structure that the project uses Next.js. If it does not, stop and ask me.
3. Create `src/app/checkout-address/page.tsx` with the code below. If the file exists, do not overwrite it; add `CheckoutAddress` to the existing page.

```tsx
import { CheckoutAddress } from "@/features/checkout-address/components/CheckoutAddress"

export default function Page() {
  return (
    <main className="mx-auto w-full max-w-4xl flex-1 px-4 py-6 sm:px-6">
      <CheckoutAddress />
    </main>
  )
}
```

4. If I gave you my API address, set it in `NEXT_PUBLIC_API_URL` on Next.js or `VITE_API_URL` on TanStack Start. If the response shape differs, adapt what needs changing inside `src/features/checkout-address`.
5. Run the `typecheck`, `test` and `lint:ci` scripts with the project's package manager and report the result.

What's in the module?

• Only the chosen address shows on the page; the Change button lists all addresses in a popup. The list is managed with TanStack Query and starts with two dummy addresses.
• The address form is validated with React Hook Form and Zod, and uses shadcn/ui components. Adding and editing share one form, and saving sends a network request.
• Province, district, neighbourhood and postal code come from the ViraStack Address package; ViraStack Mask formats and checks the mobile phone and a corporate address's tax number.
• When the billing address matches shipping, the page shows one address. Otherwise a second address is chosen separately with the same components.
• An address has no shipping or billing type; it joins the address book. Zustand keeps the choice, and the useCheckoutAddress hook returns order-ready data.
• Tests use Vitest, Testing Library and MSW; 2 test files come ready.

What lands in your project?

Based on your choices above, npx virastack add checkout-address adds these files to your project.

No page is created; add the module to your own page with the steps above.

How do you use it?

Moving to your API

In .env.local, set your API's address in NEXT_PUBLIC_API_URL on Next.js or VITE_API_URL on TanStack Start, and the address endpoint path in ADDRESSES_PATH. get-addresses.api.ts returns the dummy addresses for now, so turn it into a request; change save-address.api.ts for your API. Server-side validation is yours to add.

The code is yours

The module is copied into your project, so you don't depend on a package. Change it however you like; if you don't want it, run npx virastack remove checkout-address.

More modules in this area

• Card payment

  The chosen card shows on the page; saved cards are listed in a popup, where you can add a new one. The card number and CVV never reach the network, and you connect your payment provider in one place.