[Checkout] Allow on-demand address creation on checkout screen

[mochacr0]

Summary

This update modifies the checkout flow by enabling the creation of billing and shipping addresses when the user submits the respective address forms, instead of waiting until the "Process to Payment" button is clicked.

create-addresses.mp4

[duylv27]

Just personal taste, I would recommend to improve the UI.

You can reference to any E-Cormerce website, each component need to be easy to recognize. So you can consider following points for the address form:

• Add border(with different color from the background color), border radius for the form.
• Reduce the spacing between elements in the form.

[mochacr0]

Just personal taste, I would recommend to improve the UI.

You can reference to any E-Cormerce website, each component need to be easy to recognize. So you can consider following points for the address form:

• Add border(with different color from the background color), border radius for the form.
• Reduce the spacing between elements in the form.

@duylv27 Thanks for the suggestion. I’ve applied all the recommended changes except for the input background. I think keeping it as is works better in this case since the background is already white. Can you please take a look at this new form?

[duylv27]

@duylv27 Thanks for the suggestion. I’ve applied all the recommended changes except for the input background. I think keeping it as is works better in this case since the background is already white. Can you please take a look at this new form?

The background form, I meant the parent <div> of all Address Input.

It's kinda like the section comment on Github Issue. As you see below section have border in gray.

If it's ok to you, just add the gray border (with border radius) to group all fields retating to address.

[github-actions]

Storefront BFF Coverage Report

Overall Project	NaN% NaN%	🍏

There is no coverage information present for the Files changed

[mochacr0]

@duylv27 Thanks for the suggestion. I’ve applied all the recommended changes except for the input background. I think keeping it as is works better in this case since the background is already white. Can you please take a look at this new form?

The background form, I meant the parent <div> of all Address Input.

It's kinda like the section comment on Github Issue. As you see below section have border in gray.

If it's ok to you, just add the gray border (with border radius) to group all fields retating to address.

Hi @duylv27, I’ve made some additional updates. Here’s how it looks right now. Let me know if it’s okay for you.

[sonarqubecloud]

Quality Gate passed for 'storefront-bff'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate passed for 'storefront'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud