The address book presents an editable list of the configured addresses for the customer. It also includes a number of popups that appear when adding, editing, or deleting an address.

Where this element can be seen?

My Account

How should this element be designed?

The most important thing is to keep consistency between BT elements, molecules, and this organism.

Designs should represent saved default billing and/or shipping address, all hover effects if necessary. Workflow for delete of address, mainly good to have popup which will require to submit yes if the address should be really deleted.

<aside> ℹ️ Usually, styling this element takes from-to: 2-4h

</aside>

How the design may look like?

Design example #1

How to develop styles for this element?

It is rendered in the MyAccountAddressBook component.

The main part was developed during the molecules stage, here we need to adjust the layout and page-specific representation if necessary.

They are rendered in the MyAccountAddressPopup component.

How the implementation may look like?

Implementation Example #1