Discount not displayed in cart drawer and page, but applied at checkout

[hta218]

Bug Report

Product discounts are sometimes not displayed in the cart (both drawer and page), causing confusion when customers see lower prices without understanding why. The discount becomes visible only at checkout.

Problem

When a product with a discount is added to cart:

• The product shows a reduced price in cart
• No discount indicator or explanation is shown
• Customer doesn't know why the price is lower
• At checkout, discount line appears (e.g., "30% off")
• This creates confusion and distrust

Current Behavior

Cart Display:

Product Name
$70.00  ← Lower price shown, but no explanation

Checkout Display:

Product Name              $100.00
  - 30% discount          -$30.00
                          -------
Subtotal                   $70.00

Expected Behavior

Cart Display Should Show:

Product Name
$100.00  $70.00  ← Show both original and discounted price
30% off applied          ← Show discount label/badge

OR

Product Name
$70.00
Discount: -$30.00 (30% off)  ← Show discount details

Root Cause Analysis

The discount logic may be missing or incomplete in the cart UI:

Possible Issues:

1. Cart data contains discount info, but UI doesn't render it
2. Discount data is not included in cart query/response
3. Discount component exists but has conditional logic that's not triggered
4. Line item discount allocations are not being fetched

Steps to Reproduce

1. Create a product with a discount (e.g., 30% off)
2. Add the product to cart
3. Open cart drawer
4. Observe: Lower price is shown, but no discount explanation
5. Navigate to cart page
6. Observe: Same issue - no discount display
7. Proceed to checkout
8. Observe: Discount now appears as a line item

Side Quest: Check Gift Card Display

Verify if the same problem affects gift cards:

• Do gift cards show properly when applied?
• Is the gift card amount and code displayed in cart?
• Does the cart show the reduced total with gift card breakdown?

Test scenarios:

• Product discount in cart drawer
• Product discount in cart page
• Gift card applied in cart drawer
• Gift card applied in cart page
• Multiple discounts/gift cards combined

Impact

• Customer confusion: Users don't understand why prices are lower
• Trust issues: Unexpected price changes without explanation
• Abandoned carts: Customers may think there's an error
• Support burden: Increased customer service inquiries

Technical Investigation Needed

1. Check cart query/fragment for discount fields:

   • discountAllocations
   • compareAtPrice
   • discountedPrice

2. Review cart line item component:

   • Does it render discount information?
   • Are discount fields being passed to the component?

3. Check cart data structure:

   lines {
     merchandise {
       product {
         compareAtPrice
       }
       price
     }
     discountAllocations {
       allocatedAmount {
         amount
       }
       discountApplication {
         value
       }
     }
   }

4. Verify gift card query includes necessary fields

Expected Fix

Cart Line Item Should Display:

• Original price (if discounted)
• Discounted price (current price)
• Discount percentage or amount
• Discount badge or label
• Clear visual distinction (strikethrough, color, etc.)

For Gift Cards:

• Gift card code
• Gift card amount
• Applied amount
• Remaining balance (if partial)

Acceptance Criteria

• Discounts are visible in cart drawer
• Discounts are visible in cart page
• Discount amount/percentage is clearly shown
• Original price is displayed when discounted
• Gift card display is verified and fixed if needed
• Multiple discounts are handled correctly
• No layout issues with discount display