From 2411b31931efdd4a364c0c5f4fdc94a4350f03b1 Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Thu, 27 Jun 2024 15:00:26 +0530
Subject: [PATCH] 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 <glo11372@adobe.com>
---
 .../__tests__/useCustomerWishlistSkus.spec.js |  1 -
 .../talons/Gallery/isSupportedProductType.js  | 10 ++++++++++
 .../lib/talons/Gallery/useAddToCartButton.js  | 15 +++++++++++---
 .../lib/talons/Gallery/useGalleryItem.js      |  9 ++++++---
 .../venia-ui/lib/components/Gallery/item.js   | 20 +++++++++++++------
 5 files changed, 42 insertions(+), 13 deletions(-)
 create mode 100644 packages/peregrine/lib/talons/Gallery/isSupportedProductType.js

diff --git a/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js b/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
index 5b08e766d1..9afb2c60bb 100644
--- a/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
+++ b/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
@@ -49,7 +49,6 @@ test('pre-caches wishlist items', async () => {
         Object {
           "customerWishlistProducts": Array [
             "Dress",
-            "Shirt",
           ],
         }
     `);
diff --git a/packages/peregrine/lib/talons/Gallery/isSupportedProductType.js b/packages/peregrine/lib/talons/Gallery/isSupportedProductType.js
new file mode 100644
index 0000000000..9d6c68d253
--- /dev/null
+++ b/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);
+};
diff --git a/packages/peregrine/lib/talons/Gallery/useAddToCartButton.js b/packages/peregrine/lib/talons/Gallery/useAddToCartButton.js
index 3ce30b9be4..11916dfa12 100644
--- a/packages/peregrine/lib/talons/Gallery/useAddToCartButton.js
+++ b/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 || ''}`
                 );
diff --git a/packages/peregrine/lib/talons/Gallery/useGalleryItem.js b/packages/peregrine/lib/talons/Gallery/useGalleryItem.js
index 0fc21372fd..b8d9c520f8 100644
--- a/packages/peregrine/lib/talons/Gallery/useGalleryItem.js
+++ b/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 =
diff --git a/packages/venia-ui/lib/components/Gallery/item.js b/packages/venia-ui/lib/components/Gallery/item.js
index d553e13677..ddf2b7cb5b 100644
--- a/packages/venia-ui/lib/components/Gallery/item.js
+++ b/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}>