feat(core): show original price on Cart

bigcommerce · May 13, 2024 · 7adfa70 · 7adfa70
1 parent 15e4b82
commit 7adfa70
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/.changeset/kind-maps-attend.md b/.changeset/kind-maps-attend.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Show original price of Cart item when on sale
diff --git a/core/app/[locale]/(default)/cart/_components/cart-item.tsx b/core/app/[locale]/(default)/cart/_components/cart-item.tsx
@@ -24,6 +24,10 @@ const PhysicalItemFragment = graphql(`
       currencyCode
       value
     }
+    originalPrice {
+      currencyCode
+      value
+    }
     selectedOptions {
       __typename
       entityId
@@ -71,6 +75,10 @@ const DigitalItemFragment = graphql(`
       currencyCode
       value
     }
+    originalPrice {
+      currencyCode
+      value
+    }
     selectedOptions {
       __typename
       entityId
@@ -212,12 +220,23 @@ export const CartItem = async ({ currencyCode, product }: Props) => {
             </div>
 
             <div className="flex flex-col gap-2 md:items-end">
-              <p className="text-lg font-bold">
-                {format.number(product.extendedSalePrice.value, {
-                  style: 'currency',
-                  currency: currencyCode,
-                })}
-              </p>
+              <div>
+                {product.originalPrice.value &&
+                product.originalPrice.value !== product.extendedSalePrice.value ? (
+                  <p className="text-lg font-bold line-through">
+                    {format.number(product.originalPrice.value, {
+                      style: 'currency',
+                      currency: currencyCode,
+                    })}
+                  </p>
+                ) : null}
+                <p className="text-lg font-bold">
+                  {format.number(product.extendedSalePrice.value, {
+                    style: 'currency',
+                    currency: currencyCode,
+                  })}
+                </p>
+              </div>
 
               <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
                 <ItemQuantity product={product} />