[PWA-2672] Product prices is informed by the outdated field (#3760)

* Update two areas displaying special prices incorrectly * Update additional areas not using final_price that includes special pricing. * Fix whitespace in snaps from manual edit * Add price_range data to integration test fixtures. Co-authored-by: Hwashiang (Michael) Yu <michaelyu0123@users.noreply.github.com> Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
magento · Apr 22, 2022 · 2704930 · 2704930
1 parent 93c3cc2
commit 2704930
Show file tree

Hide file tree

Showing 22 changed files with 467 additions and 62 deletions.
diff --git a/packages/pagebuilder/lib/ContentTypes/Products/products.js b/packages/pagebuilder/lib/ContentTypes/Products/products.js
@@ -288,7 +288,7 @@ export const GET_PRODUCTS_BY_URL_KEY = gql`
                 name
                 price_range {
                     maximum_price {
-                        regular_price {
+                        final_price {
                             currency
                             value
                         }

diff --git a/packages/peregrine/lib/talons/CartPage/ProductListing/EditModal/productFormFragment.gql.js b/packages/peregrine/lib/talons/CartPage/ProductListing/EditModal/productFormFragment.gql.js
@@ -43,6 +43,14 @@ export const ProductFormFragment = gql`
                             }
                         }
                     }
+                    price_range {
+                        maximum_price {
+                            final_price {
+                                currency
+                                value
+                            }
+                        }
+                    }
                     sku
                 }
             }

diff --git a/packages/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js b/packages/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm.js
@@ -19,11 +19,11 @@ import DEFAULT_OPERATIONS from './productForm.gql';
  *
  * @param {Object} props
  * @param {Object} props.cartItem The cart item to configure on the form
- * @param {GraphQLAST} props.getConfigurableOptionsQuery GraphQL query to get the configurable options for a product.
+ * @param {GraphQLDocument} props.getConfigurableOptionsQuery GraphQL query to get the configurable options for a product.
  * @param {function} props.setIsCartUpdating Function for setting the updating state for the shopping cart.
  * @param {function} props.setVariantPrice Function for setting the variant price on a product.
- * @param {GraphQLAST} props.updateConfigurableOptionsMutation GraphQL mutation for updating the configurable options for a product.
- * @param {GraphQLAST} props.updateQuantityMutation GraphQL mutation for updating the quantity of a product in a cart.
+ * @param {GraphQLDocument} props.updateConfigurableOptionsMutation GraphQL mutation for updating the configurable options for a product.
+ * @param {GraphQLDocument} props.updateQuantityMutation GraphQL mutation for updating the quantity of a product in a cart.
  * @param {function} props.setActiveEditItem Function for setting the actively editing item.
  *
  * @return {ProductFormTalonProps}
@@ -150,15 +150,8 @@ export const useProductForm = props => {
     }, [storeConfigData]);
 
     useEffect(() => {
-        let variantPrice = null;
-
-        if (selectedVariant) {
-            const { product } = selectedVariant;
-            const { price } = product;
-            const { regularPrice } = price;
-            variantPrice = regularPrice.amount;
-        }
-
+        const variantPrice =
+            selectedVariant?.product?.price_range?.maximum_price?.final_price;
         setVariantPrice(variantPrice);
     }, [selectedVariant, setVariantPrice]);
 

diff --git a/packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js b/packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js
@@ -155,7 +155,7 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
         0;
 
     if (!isConfigurable || !optionsSelected) {
-        value = product.price.regularPrice.amount;
+        value = product.price_range?.maximum_price?.final_price;
     } else {
         const item = findMatchingVariant({
             optionCodes,
@@ -164,8 +164,8 @@ const getConfigPrice = (product, optionCodes, optionSelections) => {
         });
 
         value = item
-            ? item.product.price.regularPrice.amount
-            : product.price.regularPrice.amount;
+            ? item.product.price_range?.maximum_price?.final_price
+            : product.price_range?.maximum_price?.final_price;
     }
 
     return value;

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js b/packages/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js
@@ -18,7 +18,7 @@ export const ProductsFragment = gql`
             name
             price_range {
                 maximum_price {
-                    regular_price {
+                    final_price {
                         currency
                         value
                     }

diff --git a/packages/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js b/packages/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js
@@ -33,6 +33,14 @@ export const ProductDetailsFragment = gql`
                 }
             }
         }
+        price_range {
+            maximum_price {
+                final_price {
+                    currency
+                    value
+                }
+            }
+        }
         sku
         small_image {
             url
@@ -119,6 +127,14 @@ export const ProductDetailsFragment = gql`
                             }
                         }
                     }
+                    price_range {
+                        maximum_price {
+                            final_price {
+                                currency
+                                value
+                            }
+                        }
+                    }
                     custom_attributes {
                         selected_attribute_options {
                             attribute_option {

diff --git a/packages/peregrine/lib/talons/SearchPage/searchPage.gql.js b/packages/peregrine/lib/talons/SearchPage/searchPage.gql.js
@@ -48,7 +48,7 @@ export const PRODUCT_SEARCH = gql`
                 name
                 price_range {
                     maximum_price {
-                        regular_price {
+                        final_price {
                             currency
                             value
                         }

diff --git a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap
@@ -87,7 +87,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
               "name": "Test Product 1",
               "price_range": Object {
                 "maximum_price": Object {
-                  "regular_price": Object {
+                  "final_price": Object {
                     "currency": "USD",
                     "value": 100,
                   },
@@ -183,7 +183,7 @@ exports[`renders if \`items\` is an array of objects 1`] = `
               "name": "Test Product 2",
               "price_range": Object {
                 "maximum_price": Object {
-                  "regular_price": Object {
+                  "final_price": Object {
                     "currency": "USD",
                     "value": 100,
                   },

diff --git a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap
@@ -150,7 +150,7 @@ exports[`renders correctly with valid item data 1`] = `
           "name": "Test Product",
           "price_range": Object {
             "maximum_price": Object {
-              "regular_price": Object {
+              "final_price": Object {
                 "currency": "USD",
                 "value": 21,
               },

diff --git a/packages/venia-ui/lib/components/Gallery/__tests__/gallery.spec.js b/packages/venia-ui/lib/components/Gallery/__tests__/gallery.spec.js
@@ -39,7 +39,7 @@ const items = [
         __typename: 'SimpleProduct',
         price_range: {
             maximum_price: {
-                regular_price: {
+                final_price: {
                     value: 100,
                     currency: 'USD'
                 }
@@ -59,7 +59,7 @@ const items = [
         __typename: 'SimpleProduct',
         price_range: {
             maximum_price: {
-                regular_price: {
+                final_price: {
                     value: 100,
                     currency: 'USD'
                 }

diff --git a/packages/venia-ui/lib/components/Gallery/__tests__/item.spec.js b/packages/venia-ui/lib/components/Gallery/__tests__/item.spec.js
@@ -49,7 +49,7 @@ const validItem = {
     sku: 'sku-123',
     price_range: {
         maximum_price: {
-            regular_price: {
+            final_price: {
                 value: 21,
                 currency: 'USD'
             }

diff --git a/packages/venia-ui/lib/components/Gallery/item.js b/packages/venia-ui/lib/components/Gallery/item.js
@@ -112,9 +112,9 @@ const GalleryItem = props => {
             </Link>
             <div data-cy="GalleryItem-price" className={classes.price}>
                 <Price
-                    value={price_range.maximum_price.regular_price.value}
+                    value={price_range.maximum_price.final_price.value}
                     currencyCode={
-                        price_range.maximum_price.regular_price.currency
+                        price_range.maximum_price.final_price.currency
                     }
                 />
             </div>
@@ -152,7 +152,7 @@ GalleryItem.propTypes = {
         sku: string.isRequired,
         price_range: shape({
             maximum_price: shape({
-                regular_price: shape({
+                final_price: shape({
                     value: number.isRequired,
                     currency: string.isRequired
                 }).isRequired

diff --git a/packages/venia-ui/lib/components/SearchBar/__tests__/suggestedProduct.spec.js b/packages/venia-ui/lib/components/SearchBar/__tests__/suggestedProduct.spec.js
@@ -20,6 +20,14 @@ const defaultProps = {
                 value: 3.5
             }
         }
+    },
+    price_range: {
+        maximum_price: {
+            final_price: {
+                currency: 'USD',
+                value: 3.5
+            }
+        }
     }
 };
 

diff --git a/packages/venia-ui/lib/components/SearchBar/autocomplete.js b/packages/venia-ui/lib/components/SearchBar/autocomplete.js
@@ -40,6 +40,14 @@ const GET_AUTOCOMPLETE_RESULTS = gql`
                         }
                     }
                 }
+                price_range {
+                    maximum_price {
+                        final_price {
+                            currency
+                            value
+                        }
+                    }
+                }
             }
             page_info {
                 total_pages

diff --git a/packages/venia-ui/lib/components/SearchBar/suggestedProduct.js b/packages/venia-ui/lib/components/SearchBar/suggestedProduct.js
@@ -12,7 +12,14 @@ const IMAGE_WIDTH = 60;
 
 const SuggestedProduct = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    const { url_key, small_image, name, onNavigate, price, url_suffix } = props;
+    const {
+        url_key,
+        small_image,
+        name,
+        onNavigate,
+        price_range,
+        url_suffix
+    } = props;
 
     const handleClick = useCallback(() => {
         if (typeof onNavigate === 'function') {
@@ -25,6 +32,11 @@ const SuggestedProduct = props => {
         url_suffix
     ]);
 
+    const priceProps = {
+        currencyCode: price_range?.maximum_price?.final_price?.currency,
+        value: price_range?.maximum_price?.final_price?.value
+    };
+
     return (
         <Link
             className={classes.root}
@@ -41,10 +53,7 @@ const SuggestedProduct = props => {
             />
             <span className={classes.name}>{name}</span>
             <span data-cy="SuggestedProduct-price" className={classes.price}>
-                <Price
-                    currencyCode={price.regularPrice.amount.currency}
-                    value={price.regularPrice.amount.value}
-                />
+                <Price {...priceProps} />
             </span>
         </Link>
     );

diff --git a/venia-integration-tests/src/fixtures/categoryPage/productMockCall/productMockResponse.json b/venia-integration-tests/src/fixtures/categoryPage/productMockCall/productMockResponse.json
@@ -20,7 +20,7 @@
           "name": "Carina Cardigan",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 78,
                 "__typename": "Money"
@@ -45,7 +45,7 @@
           "name": "Juno Sweater",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 68,
                 "__typename": "Money"
@@ -70,7 +70,7 @@
           "name": "Phoebe Cardigan",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 88,
                 "__typename": "Money"
@@ -95,7 +95,7 @@
           "name": "Rosalina Cardigan",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 98,
                 "__typename": "Money"
@@ -120,7 +120,7 @@
           "name": "Hanna Sweater",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 98,
                 "__typename": "Money"
@@ -145,7 +145,7 @@
           "name": "Sabina Hooded Cardigan",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 108,
                 "__typename": "Money"
@@ -170,7 +170,7 @@
           "name": "Brigid Boucle Cardigan",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 118,
                 "__typename": "Money"
@@ -195,7 +195,7 @@
           "name": "Roxana Cropped Sweater",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 78,
                 "__typename": "Money"
@@ -220,7 +220,7 @@
           "name": "Helena Cardigan",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 98,
                 "__typename": "Money"
@@ -245,7 +245,7 @@
           "name": "Corina Lace-Back Sweater",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 108,
                 "__typename": "Money"
@@ -270,7 +270,7 @@
           "name": "Echo Sweater",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 78,
                 "__typename": "Money"
@@ -295,7 +295,7 @@
           "name": "Lorena Cardigan",
           "price_range": {
             "maximum_price": {
-              "regular_price": {
+              "final_price": {
                 "currency": "USD",
                 "value": 98,
                 "__typename": "Money"