Address Book - Add & Edit

[supernova-at]

Description

This PR adds the ability to add and edit addresses in the address book.

Related Issue

Closes PWA-634.

Acceptance

Verification Stakeholders

@schensley @dpatil-magento

Specification

n/a

Verification Steps

1. Sign in
2. Go to My Account > Address Book

Add New Address

1. Click on "Add an Address" button
2. Complete the form
3. Click "Save"
4. Verify that the newly created address appears on the page

Default

1. Click on "Add an Address" button
2. Complete the form
3. Check the "make this my default address" checkbox
4. Click "Save"
5. Verify that the newly created address appears on the page and has the default icon on it

Edit Existing Address

1. Click on "Edit" button of an existing address
2. Complete the form
3. Click "Save"
4. Verify that the address is correctly updated on the page

Screenshots / Screen Captures (if appropriate)

Checklist

• I have added tests to cover my changes, if necessary.
• I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

• Make this my default works
• Errors need to be cleared out between showings of the dialog
• Check and disable "make default" when the first address is being added
• Check and disable "make default" when the only address is being edited

[PWAStudioBot]

	Messages
📖	Associated JIRA tickets: PWA-634.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against f387313

[supernova-at]

We may be able to remove these fields from the query result since we do a refetchQueries to get the updated data.

[tjwiebell]

Add definitely may not be needed, since this response isn't enough to slot it into the existing collection (we always could if wanted to do our own cache write to that collection).

[supernova-at]

Removed from the Add mutation in a10123d.

[jimbo]

Works pretty well for me.

[supernova-at]

While adding first Address and/or during editing Default address, Make this my default address should be disabled but currently its enabled.

This was actually implemented but we talked about this at length during a group code review with UX and decided to revert it. It is possible to not have a default address.

If user has item in cart and then user updates default address in account address book and go to checkout > User still sees stale address.

After discussion we decided this is acceptable for now. Ideally GraphQL keeps the cart address in sync.

When user add Middle name in address, the middle name is not displayed in read only mode of address book.

Fixed in fc73ce7.

[supernova-at]

Issue found in QA:

1. Add or Update an address and set the country as "United Kingdom"
2. Type a value into the Region field
3. Save
4. Edit the address
5. Change the country dropdown to "United States"
6. Cancel the edit
7. Edit the address
8. See that the value is empty / blank / not filled with the proper value

---

Investigation:

This happens because the form is seeded with initialValues, including an empty region.
When the edit dialog is opened, the form gets reset to its initial state and then the target address is filled in.
When the Region component in the form sees that the country value has changed, its useEffect fires and resets itself back to its initial value, which is empty.

Note that his happens with any country that doesn't populate the region dropdown, not just UK.
In fact, you can repeat the bug just by repeatedly editing an address in a country without a region dropdown.

---

Solution:

The solution was actually fixing a bug in the Dialog component so that it would properly destroy the form when shouldUnmountOnHide was true. Now that Dialog properly unmounts the form we can use initialValues instead of formApi.setValues to set the edit form values. This avoids the "field got reset to an empty initial state" bug described above.

[supernova-at]

Other places that use shouldUnmountOnHide:

1. Checkout Page > Edit Payment Information
2. Wishlist Page > Confirm Remove Product

I should note that animation in on the dialog still works but the animation out appears instant. We can open a separate ticket for that if we'd like.

[tjwiebell]

Tiny bug with add address flow. I'll also look into a solution to retaining the animation, it is a bit jarring.

[tjwiebell]

You may not need a duplicate piece of state here; pass activeEditAddress as initialValues and update handleAddAddress to pass this default value when it calls setActiveEditAddress, eg. setActiveEditAddress({ country_code: 'US' });.

Regardless of this duplication, I think there is a bug here where initialValues is not being set correctly on add, and the previous edited address is being displayed. Either go with my proposal above, or add setFormInitialValues({ country_code: 'US' }); to that handler if there's a necessity to have two copies of this state.

[supernova-at]

Dang, you're totally right - great catch

[tjwiebell]

@supernova-at - I did work out an onTransitionEnd solution, but every transition inside of the Dialog bubbles up to this handler, so I can see it becoming fragile unless we add some target/ref validation. Definitely understand @jimbo's concerns with this approach a little better now.

const [readyToUnmount, setReadyToUnmount] = useState(true);
// handles onTransitionEnd prop on element - fires both ways (open/close)
const handleTransitionEnd = useCallback(e => {
    if (e.propertyName === 'opacity') {
        setReadyToUnmount(current => !current);
    }
}, []);

[tjwiebell]

Fixes look good, nice work 👍 I do believe we should solve the animation breakage before we release, so please get that in the backlog.

[dpatil-magento]

@supernova-at Just a minor observation >> When user uncheck Make this my default address checkbox > Address card is moved to second position, which is not needed I believe. Rest all looks good.