Add to Wishlist from PDP

[sirugh]

Description

Add a product to your wishlist(s) from PDP for both CE and EE.

Related Issue

Closes PWA-1267.

Acceptance

Verification Stakeholders

Specification

Verification Steps

CE

1. Go to a PDP without being signed in. You should see no "Add to Favorites" button.
2. Sign in. You should see the button show up.
3. Click the button. It should add to favorites (verify via network/no errors in console) and the button should become disabled with some text like "Added to Favorites"
4. Click some new combination of options. The button should re-enable.

EE

1. Go to a PDP without being signed in. You should see no "Add to Favorites" button.
2. Sign in. You should see the button show up.
3. Click the button. It should show a dialog.
4. Select the first list. It should close the dialog if successful.
5. Click the button again after changing some options.
6. Create a new list with same name as existing. It should fail.
7. Create a new list with a new name. It should add successfully.
8. Keep creating lists until you cannot add any more (10?). Should still let you choose a list to add the item to.

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.

[PWAStudioBot]

	Messages
📖	Associated JIRA tickets: PWA-1267.
📖	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 5620add

[jimbo]

Seems like the right place to use Relevant. Should we memoize the when function here?

const shouldRenderForm = useCallback(
  () => !!isOpen,
  [isOpen]
)

[sirugh]

Done.

[jimbo]

I think I'd put this in its own file.

[sirugh]

Resolved.

[jimbo]

Good use of useMemo to convert this array to a map. 👍

Optionally, a small optimization would be to skip the intermediate array (faster, less memory):

const attributeIdToValuesMap = useMemo(
  () => {
    const map = new Map()

    for (const { attribute_id, values } of options) {
      map.set(attribute_id, values)
    }
  },
  [options]
)

[sirugh]

Done.

[schensley]

@sirugh Since there has been some 'compromise' on behavior for "add to Favs" in that while a shopper may tap to add to Favs, they cannot tap again to remove (instead go to list to manage list items). I would propose the following revisions to the UI.

• have the text "Add to Favorites" appear as a link with the Heart icon by default/when item is been added to a list.
• after added to a Favs list, swap the heart icon with a success checkmark and have then text appear as regular text (regular weight & no underline). Colors. Checkmark icon : #238564 / text color : #535965

Additionally, I think it is somewhat better if when a shopper taps "Create New List" but then decides to Cancel (and not create a new list) that only the Create New List form closes and not the entire drawer/modal.
While this means two clicks to get back to PDP if they decide not to create a list. It is better that it gives them the opportunity to add to an existing one AND if 'create new' results in an error (Same name as other list or whatever) they can add to existing without having to reopen the drawer/modal - one step forward and one step back.

See demo:
https://user-images.githubusercontent.com/19538346/110997088-81946b80-8342-11eb-8c72-09bf13e7be4f.mp4

[supernova-at]

Tests look great!

There were some areas where the merge overlapped with the recently merged
#3052 , so we should give a quick smoke test of the overlap of these two features.

[dpatil-magento]

@sirugh Everything Looks great other than Link UI on Virtual Product PDP and Safari browser.

Safari -

Virtual Product Page -

[sirugh]

Discussed with Dev on a call - the safari issue with the icon appearing above the text seems to be some issue with Safari 13 as it does not happen on my local Safari 14. Inspecting further it seems the span for the icon is spread to the max width of the button above, whereas in Safari 14 the enclosing icon span just matches the icon width. Maybe a grid issue they fixed?

[dpatil-magento]

QA Approved