Billing address saved in profile doesn't show up in checkout form

[QAComet]

Description

On the user profile page in the account settings, there is a section for setting a default billing address. If a user sets this, I would expect there to be functionality to use this in the billing address section of checkout or filled in as the billing address by default.

Steps to reproduce

• Go to /us/account/profile as an authenticated user
• Click the "Edit" button on the "Billing address" row at the bottom
• Enter in the billing address
• Click save
• Go to the store at /us/store
• Select the first item
• On the item page, add it to the cart
• Go to the cart page
• Click on the checkout button
• Uncheck the checkbox "Same as billing address"
• The billing address form is now visible and empty

Suggestions for improvement

There are some ways to improve the situation:

1. Fill in the billing address by default with the billing address saved in the profile
2. On the addresses page, when creating or editing an address, have a field which toggles as "Default billing address". Could also have a toggle field for "Default shipping address" as well.
3. On the profile page, have a select box as the form for the billing address, this could have a list of saved addresses, and an option called "+ New Address". If the user clicks on "+ New Address", they will be given the new address modal.
4. A blend of suggestions from (2) and (3)

Option 1

This choice is straight forward and just requires filling in the billing address form with the billing address saved in the profile when the user unchecks "Same as billing address"

Option 2

This option is more involved and requires some UX decisions. Not only would there be a change to the address form on the address modal, there should probably also be some indication on the address card that it is the default billing address. If there is already a default address set in either case, the default is changed to the new default address. E.g. have address A as the current default, create address B and toggle the default address, saving this form causes address B to be the default, and removes the default flag from address A

Also, keeping the default addresses first in the addresses list is probably a good idea as well. In addition, the checkout page could have the address dropdown, similar to the Shipping address form if the user unchecks the "Same as billing address" checkbox.

Option 3

In addition to the text before, this "+ New Address" could be a feature for all the address dropdowns. Moreover, the modal could show up on any of these pages as well.

Option 4

You could take any of the suggestions from before and combine them to get a better checkout experience.

• Have an address select on the billing address form on the profile page
• Have an address select on the billing address form on the checkout page
• Add in a "+ New Address" option into any of the address select
• Use a toggle on the address modal for default shipping address, and/or default billing address
• Have a marker on the addresses list which shows if the address is the default shipping address or default billing address
• List the default addresses first in the addresses list
• List the default addresses on top of the select address options, maybe even including a divider between the defaults and other addresses

[codebucks27]

Hey @QAComet,

You can directly use the customer to get the billing address that is saved in the user profile.

const customer = await getCustomer()
console.log(customer?.billing_address)

Initialize the form data as following code snippet:

  const [formData, setFormData] = useState({
    "billing_address.first_name": cart?.billing_address?.first_name || customer?.billing_address?.first_name || "",
    "billing_address.last_name": cart?.billing_address?.last_name || customer?.billing_address?.last_name || "",
    ...all other values
  })

You could also create the similar component like AddressSelect which is in the ShippingAddress component, to select the default billing address.