From af9dfe79d2a3bc657cc1b3073c0012963f4ecf97 Mon Sep 17 00:00:00 2001
From: Luis Alvarez <luis@vercel.com>
Date: Sun, 25 Oct 2020 17:52:52 -0500
Subject: [PATCH] Added usePrice to products in the landing

---
 components/product/ProductCard/ProductCard.tsx | 13 ++++++++++---
 lib/bigcommerce/api/fragments/product.ts       |  4 ++++
 lib/bigcommerce/schema.d.ts                    |  3 +++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 6383686b2..7b30e0db2 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -1,10 +1,11 @@
 import React, { FC, ReactNode, Component } from 'react'
 import cn from 'classnames'
-import s from './ProductCard.module.css'
 import Link from 'next/link'
+import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
+import usePrice from '@lib/bigcommerce/use-price'
 import { Heart } from '@components/icon'
 import { EnhancedImage } from '@components/core'
-import type { ProductNode } from '@lib/bigcommerce/api/operations/get-all-products'
+import s from './ProductCard.module.css'
 
 interface Props {
   className?: string
@@ -46,6 +47,12 @@ const ProductCard: FC<Props> = ({
     )
   }
 
+  const { price } = usePrice({
+    amount: p.prices?.price?.value,
+    baseAmount: p.prices?.retailPrice?.value,
+    currencyCode: p.prices?.price?.currencyCode!,
+  })
+
   return (
     <Link href={`product${p.path}`}>
       <a
@@ -57,7 +64,7 @@ const ProductCard: FC<Props> = ({
             <h3 className={s.productTitle}>
               <span>{p.name}</span>
             </h3>
-            <span className={s.productPrice}>${p.prices?.price.value}</span>
+            <span className={s.productPrice}>{price}</span>
           </div>
           <div className={s.wishlistButton}>
             <Heart />
diff --git a/lib/bigcommerce/api/fragments/product.ts b/lib/bigcommerce/api/fragments/product.ts
index 69773cea5..751179b99 100644
--- a/lib/bigcommerce/api/fragments/product.ts
+++ b/lib/bigcommerce/api/fragments/product.ts
@@ -51,6 +51,10 @@ export const productInfoFragment = /* GraphQL */ `
         value
         currencyCode
       }
+      retailPrice {
+        value
+        currencyCode
+      }
     }
     images {
       edges {
diff --git a/lib/bigcommerce/schema.d.ts b/lib/bigcommerce/schema.d.ts
index 06c56be51..393bfdbb9 100644
--- a/lib/bigcommerce/schema.d.ts
+++ b/lib/bigcommerce/schema.d.ts
@@ -1739,6 +1739,9 @@ export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
         salePrice?: Maybe<
           { __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
         >
+        retailPrice?: Maybe<
+          { __typename?: 'Money' } & Pick<Money, 'value' | 'currencyCode'>
+        >
       }
     >
     images: { __typename?: 'ImageConnection' } & {