PWA Product Recommendation venia (#4283)

* PWA Product Recommendation venia

* adding item.prices

* removing line

* Product recommendation

* change configure

* Product recommendation

* Product recommendation

* Worked on modification

* Worked on modification

* Worked on modification

---------

Co-authored-by: glo11372 <[email protected]>

Author: glo82145

packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js

@@ -49,7 +49,6 @@ test('pre-caches wishlist items', async () => {
         Object {
           "customerWishlistProducts": Array [
             "Dress",
-            "Shirt",
           ],
         }
     `);

packages/peregrine/lib/talons/Gallery/isSupportedProductType.js

@@ -0,0 +1,10 @@
+const SUPPORTED_PRODUCT_TYPES = [
+    'SimpleProduct',
+    'ConfigurableProduct',
+    'configurable',
+    'simple'
+];
+
+export const isSupportedProductType = productType => {
+    return SUPPORTED_PRODUCT_TYPES.includes(productType);
+};

packages/peregrine/lib/talons/Gallery/useAddToCartButton.js

@@ -38,10 +38,16 @@ export const useAddToCartButton = props => {
 
     const isInStock = item.stock_status === 'IN_STOCK';
 
-    const productType = item.__typename;
+    const productType = item
+        ? item.__typename !== undefined
+            ? item.__typename
+            : item.type
+        : null;
+
     const isUnsupportedProductType = UNSUPPORTED_PRODUCT_TYPES.includes(
         productType
     );
+
     const isDisabled = isLoading || !isInStock || isUnsupportedProductType;
 
     const history = useHistory();
@@ -52,7 +58,7 @@ export const useAddToCartButton = props => {
 
     const handleAddToCart = useCallback(async () => {
         try {
-            if (productType === 'SimpleProduct') {
+            if (productType === 'SimpleProduct' || productType === 'simple') {
                 setIsLoading(true);
 
                 const quantity = 1;
@@ -97,7 +103,10 @@ export const useAddToCartButton = props => {
                 });
 
                 setIsLoading(false);
-            } else if (productType === 'ConfigurableProduct') {
+            } else if (
+                productType === 'ConfigurableProduct' ||
+                productType === 'configurable'
+            ) {
                 const productLink = resourceUrl(
                     `/${item.url_key}${urlSuffix || ''}`
                 );

packages/peregrine/lib/talons/Gallery/useGalleryItem.js

@@ -1,4 +1,4 @@
-import { isSupportedProductType as isSupported } from '@magento/peregrine/lib/util/isSupportedProductType';
+import { isSupportedProductType as isSupported } from './isSupportedProductType';
 import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
 import { useCallback, useEffect, useRef } from 'react';
 import { useIntersectionObserver } from '@magento/peregrine/lib/hooks/useIntersectionObserver';
@@ -81,8 +81,11 @@ export const useGalleryItem = (props = {}) => {
         item
     ]);
 
-    const productType = item ? item.__typename : null;
-
+    const productType = item
+        ? item.__typename !== undefined
+            ? item.__typename
+            : item.type
+        : null;
     const isSupportedProductType = isSupported(productType);
 
     const wishlistButtonProps =

packages/venia-ui/lib/components/Gallery/item.js

@@ -70,11 +70,21 @@ const GalleryItem = props => {
             </p>
         </div>
     );
+    const currencyCode =
+        price_range?.maximum_price?.final_price?.currency ||
+        item.price.regularPrice.amount.currency;
 
     // fallback to regular price when final price is unavailable
     const priceSource =
-        price_range.maximum_price.final_price ||
-        price_range.maximum_price.regular_price;
+        (price_range?.maximum_price?.final_price !== undefined &&
+        price_range?.maximum_price?.final_price !== null
+            ? price_range.maximum_price.final_price
+            : item.prices.maximum.final) ||
+        (price_range?.maximum_price?.regular_price !== undefined &&
+        price_range?.maximum_price?.regular_price !== null
+            ? price_range.maximum_price.regular_price
+            : item.prices.maximum.regular);
+    const priceSourceValue = priceSource.value || priceSource;
 
     // Hide the Rating component until it is updated with the new look and feel (PWA-2512).
     const ratingAverage = null;
@@ -112,11 +122,9 @@ const GalleryItem = props => {
             >
                 <span>{name}</span>
             </Link>
+
             <div data-cy="GalleryItem-price" className={classes.price}>
-                <Price
-                    value={priceSource.value}
-                    currencyCode={priceSource.currency}
-                />
+                <Price value={priceSourceValue} currencyCode={currencyCode} />
             </div>
 
             <div className={classes.actionsContainer}>