[feature]: Re-factor Edit Shipping to use Dialog

[tjwiebell]

Description

Re-factor the Edit Shipping component on the CheckoutPage to use the Dialog component. This will ensure that all modals and dialogs in the app have a consistent look at feel.

Please let us know what packages this feature is in regards to:

• venia-concept
• venia-ui
• pwa-buildpack
• peregrine
• pwa-devdocs
• upward-js
• upward-spec
• create-pwa

[m2-assistant]

Hi @tjwiebell. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[m2-assistant]

Hi @jemoon! 👋
Thank you for collaboration. Only members of Community Contributors Team are allowed to be assigned to the issue. Please use @magento add to contributors team command to join Contributors team.

[m2-assistant]

Hi @jemoon! 👋
Thank you for joining. Please accept team invitation 👉 here 👈 and add your comment one more time.

[jemoon]

@magento I am working on this

[ericerway]

@jemoon any updates? Thanks for your help!

[jemoon]

@ericerway @tjwiebell sorry but I wont be able to provide good quality PR as I got stuck so please unassign this one from me.

[Frodigo]

@magento I am working on this

[sirugh]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

✅ Jira issue (https://jira.corp.magento.com/browse/PWA-1571) is successfully created for this issue.

[Frodigo]

I met an issue with the Dialog component here.

When I changed the Edit shipping form to use Dialog, the initial values of the form are no populated, and I see errors like this:

Attempting to get field country, but it does not exist 
    at Region (webpack-internal:///../venia-ui/lib/components/Region/region.js:50:14)

Here is the code: https://gist.github.com/Frodigo/e106254dc9d30b774475155370f51430 to reproduce this issue on a local instance, you can replace a file packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js with mine one.

Does anyone see what the problem is or can indicate where I should look for the cause?

Thanks,
Marcin

[sirugh]

@Frodigo I'm sorry I must have missed your question.

I don't think the country field warnings are related, they seem to be coming from informed after we upgraded it.

That said, I wonder if the dialog is not passing initial values properly. Here you can see that formValues is an object that has a property initialValues whereas in your code you have formValues={initialValues}. You'll need to pass formValues={{ initialValues }}

Let us know if you're still working on this. Apologies again for the delay in response