AddressDialog

Modal add/edit address form.

import { AddressDialog } from "@evolve-storefront/commerce-ui/address-dialog";

Renders inside AddressConfigProvider.

Design notes

It owns the dialog chrome and the field layout, and not the write: the consumer passes formProps, so the account address book, checkout and a quote dialog all reach for this one dialog and each keeps its own mutation. Cancel and submit sit in a DialogFooter because AddressFormSubmit reads its pending state from context rather than from a prop.

Preview

AddOpen in Storybook ↗

Usage

A failed write: the form-level error sits above the actions, inside the dialog.

// The error comes from the consumer's mutation through `formProps`, so the
// dialog needs no error handling of its own.
<AddressDialog open={open} onOpenChange={setOpen} formProps={formProps} />;

Props

Prop	Type	Description
open	boolean
onOpenChange	(open: boolean) => void
formProps	AddressFormBinding	The write, supplied by the consumer — formProps from feature-account's useAddressForm, or any hook of the same shape. Seeding defaultValues through it is what makes edit mode work.
defaultOpen?	boolean
mode?	"add" | "edit"	"edit" titles the dialog for an existing address. Taken as a prop rather than derived from formProps.defaultValues being present, because a prefilled add form is a legitimate thing (checkout seeding from the profile) and must not read as an edit.
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.
description?	ReactNode	Overrides the sentence under the heading.
onClosed?	(() => void)	Runs once the dialog has closed — where a consumer resets its mutation.
children?	ReactNode	Extra controls under the fields, inside the form, such as a "make default" box.