feat(core): show sale price for line items in Cart (#2803)

Author: jorgemoya

.changeset/slick-apples-spend.md

@@ -0,0 +1,24 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+- Added optional `salePrice?: string` property to the `CartLineItem` interface
+- Cart UI now displays sale prices with a strikethrough on the original price when `salePrice` is provided and differs from `price`
+
+## Migration
+
+If you're using the `Cart` component with custom line items, you can now optionally include a `salePrice` property:
+
+```tsx
+const lineItems = [
+  {
+    // ... other properties
+    price: '$100.00',
+    salePrice: '$80.00', // Optional: when provided, displays as strikethrough price + sale price
+  },
+];
+```
+
+### Backward Compatibility
+
+This change is **fully backward compatible**. The `salePrice` property is optional, so existing implementations will continue to work without modification. If `salePrice` is not provided or equals `price`, only the regular price will be displayed.

core/app/[locale]/(default)/cart/page-data.ts

@@ -19,19 +19,11 @@ export const PhysicalItemFragment = graphql(`
     quantity
     productEntityId
     variantEntityId
-    extendedListPrice {
-      currencyCode
-      value
-    }
-    extendedSalePrice {
-      currencyCode
-      value
-    }
-    originalPrice {
+    listPrice {
       currencyCode
       value
     }
-    listPrice {
+    salePrice {
       currencyCode
       value
     }
@@ -79,19 +71,11 @@ export const DigitalItemFragment = graphql(`
     quantity
     productEntityId
     variantEntityId
-    extendedListPrice {
-      currencyCode
-      value
-    }
-    extendedSalePrice {
-      currencyCode
-      value
-    }
-    originalPrice {
+    listPrice {
       currencyCode
       value
     }
-    listPrice {
+    salePrice {
       currencyCode
       value
     }

core/app/[locale]/(default)/cart/page.tsx

@@ -130,6 +130,10 @@ export default async function Cart({ params }: Props) {
         style: 'currency',
         currency: item.listPrice.currencyCode,
       }),
+      salePrice: format.number(item.salePrice.value, {
+        style: 'currency',
+        currency: item.salePrice.currencyCode,
+      }),
       subtitle: item.selectedOptions
         .map((option) => {
           switch (option.__typename) {

core/vibes/soul/sections/cart/client.tsx

@@ -41,6 +41,7 @@ export interface CartLineItem {
   subtitle: string;
   quantity: number;
   price: string;
+  salePrice?: string;
   href?: string;
 }
 
@@ -558,8 +559,13 @@ function CounterForm({
     <form {...getFormProps(form)} action={action}>
       <input {...getInputProps(fields.id, { type: 'hidden' })} key={fields.id.id} />
       <div className="flex w-full flex-wrap items-center gap-x-5 gap-y-2">
-        <span className="font-medium @xl:ml-auto">{lineItem.price}</span>
-
+        {lineItem.salePrice && lineItem.salePrice !== lineItem.price ? (
+          <span className="font-medium @xl:ml-auto">
+            <span className="line-through">{lineItem.price}</span> {lineItem.salePrice}
+          </span>
+        ) : (
+          <span className="font-medium @xl:ml-auto">{lineItem.price}</span>
+        )}
         {/* Counter */}
         <div className="flex items-center rounded-lg border border-[var(--cart-counter-border,hsl(var(--contrast-100)))]">
           <button
@@ -604,7 +610,6 @@ function CounterForm({
             />
           </button>
         </div>
-
         <button
           aria-label={deleteLabel}
           className="group -ml-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full transition-colors duration-300 hover:bg-[var(--cart-button-background,hsl(var(--contrast-100)))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cart-focus,hsl(var(--primary)))] focus-visible:ring-offset-4"