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 => {

); + 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 => { > {name} +
- +