[Hydrogen React] ProductPrice priceV2 deprecation. Hide compareAt, if…

… less than regular (#2461) Co-authored-by: Anders Søgaard <[email protected]> Co-authored-by: Helen Lin <[email protected]>
Shopify · Sep 3, 2024 · ca0c769 · ca0c769
1 parent 1a2534c
commit ca0c769
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 13 deletions.
diff --git a/.changeset/lovely-phones-grab.md b/.changeset/lovely-phones-grab.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Update ProductPrice to use price instead of priceV2, and hide compareAt price if less than regular price
diff --git a/packages/hydrogen-react/src/ProductPrice.test.tsx b/packages/hydrogen-react/src/ProductPrice.test.tsx
@@ -1,7 +1,7 @@
 import {describe, expect, it} from 'vitest';
 
 import {render, screen} from '@testing-library/react';
-import {getProduct} from './ProductProvider.test.helpers.js';
+import {getProduct, getVariant} from './ProductProvider.test.helpers.js';
 import {ProductPrice} from './ProductPrice.js';
 
 describe('<ProductPrice />', () => {
@@ -11,13 +11,32 @@ describe('<ProductPrice />', () => {
       const variant = product?.variants?.nodes?.[0];
       render(<ProductPrice data={product} variantId={variant?.id} />);
 
+      expect(
+        screen.getByText(variant?.price?.amount || '', {exact: false}),
+      ).toBeInTheDocument();
+
       expect(
         screen.getByText(variant?.priceV2?.amount || '', {exact: false}),
       ).toBeInTheDocument();
     });
 
     it("renders <Money /> with the variant's minimum compareAt price", () => {
-      const product = getProduct();
+      const product = getProduct({
+        variants: {
+          nodes: [
+            getVariant({
+              price: {
+                currencyCode: 'CAD',
+                amount: '250.00',
+              },
+              compareAtPrice: {
+                currencyCode: 'CAD',
+                amount: '500.00',
+              },
+            }),
+          ],
+        },
+      });
       const variant = product?.variants?.nodes?.[0];
       render(
         <ProductPrice
@@ -27,6 +46,12 @@ describe('<ProductPrice />', () => {
         />,
       );
 
+      expect(
+        screen.getByText(variant?.compareAtPrice?.amount || '', {
+          exact: false,
+        }),
+      ).toBeInTheDocument();
+
       expect(
         screen.getByText(variant?.compareAtPriceV2?.amount || '', {
           exact: false,
@@ -74,7 +99,20 @@ describe('<ProductPrice />', () => {
   });
 
   it("renders <Money /> with the product's minimum compareAt price when the `priceType` is `compareAt`", () => {
-    const product = getProduct();
+    const product = getProduct({
+      priceRange: {
+        minVariantPrice: {
+          currencyCode: 'CAD',
+          amount: '500.00',
+        },
+      },
+      compareAtPriceRange: {
+        minVariantPrice: {
+          currencyCode: 'CAD',
+          amount: '750.00',
+        },
+      },
+    });
     render(<ProductPrice data={product} priceType="compareAt" />);
 
     expect(
@@ -86,7 +124,20 @@ describe('<ProductPrice />', () => {
   });
 
   it("renders <Money /> with the product's maximum compareAt price when `valueType` is `max` and `priceType` is `compareAt`", () => {
-    const product = getProduct();
+    const product = getProduct({
+      priceRange: {
+        maxVariantPrice: {
+          currencyCode: 'CAD',
+          amount: '500.00',
+        },
+      },
+      compareAtPriceRange: {
+        maxVariantPrice: {
+          currencyCode: 'CAD',
+          amount: '750.00',
+        },
+      },
+    });
     render(
       <ProductPrice data={product} valueType="max" priceType="compareAt" />,
     );
@@ -99,6 +150,32 @@ describe('<ProductPrice />', () => {
     ).toBeInTheDocument();
   });
 
+  it('does not show compareAt price when regular price is larger than compareAt price', () => {
+    const product = getProduct({
+      priceRange: {
+        minVariantPrice: {
+          currencyCode: 'CAD',
+          amount: '750.00',
+        },
+      },
+      compareAtPriceRange: {
+        minVariantPrice: {
+          currencyCode: 'CAD',
+          amount: '500.00',
+        },
+      },
+    });
+
+    render(<ProductPrice data={product} priceType="compareAt" />);
+
+    expect(
+      screen.queryByText(
+        product.compareAtPriceRange?.minVariantPrice?.amount ?? '',
+        {exact: false},
+      ),
+    ).toBeNull();
+  });
+
   it('supports passthrough props', () => {
     const product = getProduct();
     render(<ProductPrice data={product} className="emphasized" />);

diff --git a/packages/hydrogen-react/src/ProductPrice.tsx b/packages/hydrogen-react/src/ProductPrice.tsx
@@ -49,20 +49,50 @@ export function ProductPrice<
       ) ?? null
     : null;
 
+  /**
+   * @deprecated (Next major release) Stop using compareAtPriceV2 and priceV2
+   */
+  const variantPriceProperty =
+    valueType === 'max' ? 'maxVariantPrice' : 'minVariantPrice';
+
   if (priceType === 'compareAt') {
     if (variantId && variant) {
-      if (variant.compareAtPriceV2?.amount === variant.priceV2?.amount) {
-        return null;
+      if (variant.compareAtPriceV2) {
+        console.error(
+          '<ProductPrice> `compareAtPriceV2` is deprecated. Use `compareAtPrice` instead.',
+        );
       }
-      price = variant.compareAtPriceV2;
-    } else if (valueType === 'max') {
-      price = product?.compareAtPriceRange?.maxVariantPrice;
+
+      price = variant.compareAtPrice ?? variant.compareAtPriceV2;
+    } else {
+      price = product?.compareAtPriceRange?.[variantPriceProperty];
+    }
+
+    let priceAsNumber: number;
+    if (variantId && variant) {
+      priceAsNumber = parseFloat(
+        variant.price?.amount ?? variant.priceV2?.amount ?? '0',
+      );
     } else {
-      price = product?.compareAtPriceRange?.minVariantPrice;
+      priceAsNumber = parseFloat(
+        product?.priceRange?.[variantPriceProperty]?.amount ?? '0',
+      );
+    }
+
+    const compareAtPriceAsNumber = parseFloat(price?.amount ?? '0');
+
+    if (priceAsNumber >= compareAtPriceAsNumber) {
+      return null;
     }
   } else {
     if (variantId && variant) {
-      price = variant.priceV2;
+      if (variant.priceV2) {
+        console.error(
+          '<ProductPrice> `priceV2` is deprecated. Use `price` instead.',
+        );
+      }
+
+      price = variant.price ?? variant.priceV2;
       if (valueType === 'unit') {
         price = variant.unitPrice;
         measurement = variant.unitPriceMeasurement;

diff --git a/packages/hydrogen-react/src/ProductProvider.test.helpers.ts b/packages/hydrogen-react/src/ProductProvider.test.helpers.ts
@@ -56,6 +56,9 @@ export function getProduct(
 export function getVariant(
   variant: PartialDeep<ProductVariant, {recurseIntoArrays: true}> = {},
 ): PartialDeep<ProductVariant, {recurseIntoArrays: true}> {
+  const price = getPrice(variant.price);
+  const compareAtPrice = getPrice(variant.compareAtPrice ?? undefined);
+
   return {
     id: variant.id ?? faker.random.words(),
     title: variant.title ?? faker.random.words(),
@@ -65,8 +68,10 @@ export function getVariant(
     unitPriceMeasurement: getUnitPriceMeasurement(
       variant?.unitPriceMeasurement ?? undefined,
     ),
-    priceV2: getPrice(variant.priceV2),
-    compareAtPriceV2: getPrice(variant?.compareAtPriceV2 ?? undefined),
+    price,
+    priceV2: price,
+    compareAtPrice,
+    compareAtPriceV2: compareAtPrice,
     selectedOptions: [
       {name: faker.random.word(), value: faker.random.word()},
       {name: faker.random.word(), value: faker.random.word()},