From bf1a8b6f878172dd79ae7ed5d26e4cb7354ec4ef Mon Sep 17 00:00:00 2001
From: Daniele Pancottini <daniele.pancottini@studio.unibo.it>
Date: Fri, 3 Mar 2023 14:14:20 +0100
Subject: [PATCH] Add sale price into product page

---
 packages/commerce/src/types/product.ts             |  1 +
 site/components/product/ProductTag/ProductTag.tsx  | 14 +++++++++++++-
 .../components/product/ProductView/ProductView.tsx |  8 +++++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/commerce/src/types/product.ts b/packages/commerce/src/types/product.ts
index 8b89f5b05..d6807781a 100644
--- a/packages/commerce/src/types/product.ts
+++ b/packages/commerce/src/types/product.ts
@@ -55,6 +55,7 @@ export type ProductMetafield = {
 }
 
 export interface ProductVariant {
+  listPrice: number | undefined
   /**
    *  The unique identifier for the variant.
    */
diff --git a/site/components/product/ProductTag/ProductTag.tsx b/site/components/product/ProductTag/ProductTag.tsx
index 7859c9486..1c63a8129 100644
--- a/site/components/product/ProductTag/ProductTag.tsx
+++ b/site/components/product/ProductTag/ProductTag.tsx
@@ -1,3 +1,4 @@
+import { Stack, Text } from '@chakra-ui/react'
 import cn from 'clsx'
 import s from './ProductTag.module.css'
 
@@ -5,12 +6,14 @@ interface ProductTagProps {
   className?: string
   name: string
   price: string
+  listPrice: string
   fontSize?: number
 }
 
 const ProductTag: React.FC<ProductTagProps> = ({
   name,
   price,
+  listPrice,
   className = '',
   fontSize = 32,
 }) => {
@@ -27,7 +30,16 @@ const ProductTag: React.FC<ProductTagProps> = ({
           {name}
         </span>
       </h3>
-      <div className={s.price}>{price}</div>
+      <div className={s.price}>
+        <Stack direction={'row'} align={'center'}>
+            <Text fontWeight={800} fontSize={'xl'}>
+              {price}
+            </Text>
+            <Text textDecoration={'line-through'} color={'gray.600'}>
+              {listPrice}
+            </Text>
+        </Stack>
+      </div>
     </div>
   )
 }
diff --git a/site/components/product/ProductView/ProductView.tsx b/site/components/product/ProductView/ProductView.tsx
index e72379e44..bb593d871 100644
--- a/site/components/product/ProductView/ProductView.tsx
+++ b/site/components/product/ProductView/ProductView.tsx
@@ -28,6 +28,11 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
     currencyCode: product.price.currencyCode!,
   })
 
+  const listPrice = usePrice({
+      amount: (product.variants[0].listPrice) ? product.variants[0].listPrice : -1,
+      currencyCode: product.price.currencyCode!,
+  }).price
+  
   const model3dPath = product.media
     .map((media) => {
       return media.sources
@@ -52,7 +57,8 @@ const ProductView: FC<ProductViewProps> = ({ product, relatedProducts }) => {
           <div className={cn(s.main, 'fit')}>
             <ProductTag
               name={product.name}
-              price={`${price} ${product.price?.currencyCode}`}
+              price={`${price}`}
+              listPrice={listPrice.includes("-") ? "" : listPrice}
               fontSize={28}
             />
             <div className={s.sliderContainer}>