Add sale price into product page

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.
    */

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>
   )
 }

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}>