AddressDialog

The address book's add/edit dialog: commerce-ui's dialog with this feature's write bound to it, plus an optional name such as "Work" and a box that makes the address the default delivery address. The box is left out when editing the address that already is.

import { AddressDialog } from "@evolve-storefront/feature-account/address-dialog";

Renders inside AccountProvider.

Design notes

Reach for the primitive directly to write somewhere other than the buyer's address book.

Preview

Add AddressOpen in Storybook ↗

Usage

No address: an empty form, titled for a new address.

const [open, setOpen] = useState(false);

// The write is bound inside; without `address` it adds one.
<AddressDialog open={open} onOpenChange={setOpen} />;

Props

Prop	Type	Description
open	boolean
onOpenChange	(open: boolean) => void
title?	ReactNode	Overrides the dialog's heading. Defaults to the generic add/edit address titles — a surface addressing something more specific than "an address" (a company's, a delivery one) says so here rather than forking the dialog.
defaultOpen?	boolean
description?	ReactNode	Overrides the sentence under the heading.
address?	Address	Provide to edit an existing address; omit to add a new one.

Examples

Edit Addressaddress seeds the fields, and saving the edit closes the dialog.

const [open, setOpen] = useState(false);

// `address` switches to edit and seeds every field.
<AddressDialog open={open} onOpenChange={setOpen} address={address} />;

Open in Storybook ↗