[feature] Add products to wishlist from peregrine gallery

[sirugh]

Description

In #3105 the Gallery and GalleryItem components were augmented with logic and functionality to:

• initialize a local, cached list of skus within a customer's wishlists and
• render a button (the heart) for adding an item to a list
• render that button as filled or not, based on whether the product sku is in the local array

This PR takes the majority of that logic, specifically the first bullet above, and moves it into a re-useable hook, useCustomerWishlistSkus that can be run in a component to "prep" the cache array for comparison by some child component such as the GalleryButton.

Because of how Pagebuilder's Products component was implemented (it renders either a "SlickSlider" or venia's Gallery component) I didn't want to call the shared hook directly as that could potentially result in duplicate calls (once in Products and once in Gallery). Instead, there is a new Carousel component which calls this new shared hook and does a minimal amount of work to fetch the storeConfig to pass to the GalleryItems it renders.

Potential breaking changes

If this PR is released with #3105 then it is not breaking, but if it goes out in a subsequent release it would be breaking as the operations have moved to a new hook from useGallery.

Related Issue

Closes PWA-1672.

Acceptance

Verification Stakeholders

Specification

Verification Steps

1. In CE and EE, check that the gallery view on the home page renders the wishlist button.
2. Validate that the workflows continue to function when adding an item in all situations (only single wishlist enabled/multiple wishlist enabled, etc)
3. Verify functionality from [PWA-1268] Add products to Wishlist from Category Page #3105 works on the category pages.

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-1672.
📖	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 8caf0c3

[sirugh]

It's possible that this hook is called multiple times on a single page by different components, for example if a carousel is rendered on a category page.

In that event, we should be safe to assume that the onCompleted callbacks are invoked synchronously, and would result in the same list of skus regardless of order.

[eug123]

I have checked on the page with multiple instances of PageBuilder Carousels and it seems no problems

[dpatil-magento]

QA Approved

[ajithAllure]

Hi guys recently i updated the venia version and got add to wishlist error there i found a bug and tried to debug it,
then after some trial and error I got this fix in the following files:
packages/peregrine/lib/hooks/useCustomerWishlistSkus/useCustomerWishlistSkus.js
packages/peregrine/lib/talons/Wishlist/AddToListButton/helpers/useSingleWishlist.js

Replace this:

const {
       client
       data: { customerWishlistProducts }
} = useQuery(operations.getProductsInWishlistsQuery);

with this:
Note: "import useAppoloClient from apollo/client:
import { useApolloClient, useMutation, useQuery } from '@apollo/client';"

const { data, loading, error } = useQuery(operations.getProductsInWishlistsQuery);
const customerWishlistProducts = data ? data.customerWishlistProducts : [];
const client = useApolloClient();

Hope this helps anyone with the same kind of error that I got