How should the address list be displayed?

The address list lets the user choose from their list of configured addresses in the shipping step.

Where this element can be seen?

• Checkout
  • My Account

How should this element be designed?

The user may have no addresses configured. In that case, the address list will not be displayed and the user will have to enter a new address through a form.

If there are addresses in the list, one of them will be selected, and the other ones will be selectable.

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

</aside>

How the design may look like?

Design example 1

Design example 2

How to develop styles for this element?

The CheckoutAddressBook component is responsible for rendering the address list.

The main part was done in the scope of molecules development. The main idea of this task is to develop the correct layout and placement of this molecule and additionally fix issues if they will be present.

How the implementation may look like?

Implementation example 1