Enable wishlist functionalities for Einstein recommended products

[kevinxh]

Description

Note: this work is built on top of the wishlist_rework branch, for easier PR review, the base branch for this PR is temporarily pointing to wishlist_rework. (after wishlist_rework is merged, this will point back to develop)

Enable wishlist functionalities for Einstein recommended products.

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• Rename wishlist icon to heart icon to better represent the actual svg icon
• Decouple ProductTile from ProductScroller so it's more easier to customize the tiles in the scroller
• Update RecommendedProducts component to have wishlist functionalities
• Re work ProductTile component, update the API of this component to be clean and easy to use.
  • decouple the concept of "wishlist" from product tile, instead use "favourite" (make this is an isolated React component for re-usability)

OLD product tile API:

<ProductTile
  isWishlistLoading={wishlistLoading.includes(
    productId
  )}
  productSearchItem={productSearchItem}
  onAddToWishlistClick={() =>
    addItemToWishlist(productSearchItem)
  }
  onRemoveWishlistClick={() => {
    removeItemFromWishlist(productSearchItem)
  }}
  isInWishlist={isInWishlist}
/>

NEW api:

<ProductTile
  product={product}
  enableFavourite={wishlist.isInitialized}
  isFavourite={isInWishlist}
  onFavouriteToggle={(isFavourite) => {
    if (isFavourite) {
      addItemToWishlist(productSearchItem)
    } else {
      removeItemFromWishlist(productSearchItem)
    }
  }}
/>

How to Test-Drive This PR

• npm start and go to http://localhost:3000/en-GB/product/25686364M
• ensure you can add/remove einstein recommend products to your wishlist!

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[kevinxh]

it's hard to customize the product tiles in the scroller so this is my attempt to decouple the two components...

feedback is welcomed

[kevinxh]

i'd like to de-couple the concept of wishlist from the components like ProductTile, so they are more re-usable.

i intentionally renamed wishlist related props to "favourite", which i think is more generic. feedback is welcomed

[bendvc]

Couple of comments on general usability:

1. For those users that are unfortunate to be on slow 3g connections, there is no immediate feedback when clicking the heart icon. To be more app like I'd assume we want to have instant feedback. Looking at https://pwa-kit.mobify-storefront.com/ it looks like there is some feedback in the form of turning the heart grey-ish. Looks like there might be a regression.
2. Clicking on the heart for recommended items is being blocked on the far right item, I'm assuming it's from the scrollers button maybe?
   

[bendvc]

We probably shouldn't knowingly leave todo's in the production code.

[bendvc]

Please remove the "todo" comment and we are good to go.