From 7adfa70ab133a6100e9d9ff53dbeeb2350a3c346 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Mon, 13 May 2024 13:56:47 -0500
Subject: [PATCH] feat(core): show original price on Cart

---
 .changeset/kind-maps-attend.md                |  5 +++
 .../(default)/cart/_components/cart-item.tsx  | 31 +++++++++++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/kind-maps-attend.md

diff --git a/.changeset/kind-maps-attend.md b/.changeset/kind-maps-attend.md
new file mode 100644
index 000000000..1c5565ebb
--- /dev/null
+++ 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
index bba9e96a1..2f1be4567 100644
--- 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} />