CompanyAddressDialog
The company address book's add/edit dialog: commerce-ui's AddressDialog with
this feature's write (useCompanyAddressForm) bound to it, plus an optional name
such as "Warehouse", which companyAddressTitle shows on the cards.
import { CompanyAddressDialog } from "@evolve-storefront/feature-organization/company-address-dialog";Renders inside OrganizationProvider.
Design notes
It extends the app's AddressConfigProvider with the company's field rules, the
company name required and the personal names optional, so the countries, their
order and the lookup stay the app's.
Preview
Usage
Adding an address. The country is a select — the regression this story exists
for. It was a plain text field validated as /^[A-Za-z]{2}$/, so completing the
form meant knowing that the Netherlands is NL.
const [open, setOpen] = useState(false);
// The write is bound inside; no `address` means add.<> <Button onClick={() => setOpen(true)}>{t("add-address")}</Button> <CompanyAddressDialog open={open} onOpenChange={setOpen} /></>;Props
| Prop | Type | Description |
|---|---|---|
open | boolean | |
onOpenChange | (open: boolean) => void | |
children? | ReactNode | Extra controls under the fields, inside the form, such as a "make default" box. |
defaultOpen? | boolean | |
address? | Address | Provide to edit an existing company address; omit to add a new one. |
Examples
Edit Preserves Every FieldEditing a US address, which is where the second fault showed.
// Passing the address switches to edit; every field it carries is seeded,// because the update replaces the whole record.<CompanyAddressDialog open={open} onOpenChange={setOpen} address={address} />;Country Decides The FieldsA Dutch address has no region, and puts the postal code before the street — commerce-ui picks the layout from the country, so the field is absent rather than an empty box a buyer has to reason about.
// No field config to pass: the address's country picks the layout,// so a Dutch address shows no region field.<CompanyAddressDialog open={open} onOpenChange={setOpen} address={address} />;Extends The App ConfigThe dialog extends the app's address config rather than replacing it: the app's countries in its order, and its field settings, with only the company's own rules on top.
<AddressConfigProvider countries={EU_COUNTRY_CODES} preferredCountries={["NL"]} fields={{ phone: "required" }}> <CompanyAddressDialog open={open} onOpenChange={setOpen} /></AddressConfigProvider>;