Skip to content

Fix gift card not updating checkout sidebar - #103

Merged
damianlegawiec merged 2 commits into
mainfrom
V-3369
Apr 3, 2026
Merged

Fix gift card not updating checkout sidebar#103
damianlegawiec merged 2 commits into
mainfrom
V-3369

Conversation

@Cichorek

@Cichorek Cichorek commented Apr 2, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Fix checkout sidebar not re-rendering after applying/removing a gift card — the cartKey used to gate sidebar updates only tracked cart.total and cart.total_quantity, which don't change when a gift card is applied. Added cart.gift_card_total to the key so the sidebar updates immediately.
  • Add cursor-pointer to discount code and gift card remove (✕) buttons in checkout.

Note: amount_due display in the Summary component depends on the backend returning a correct amount_due value distinct from total — currently the API returns them equal, so the "Amount due" row doesn't appear. This is a backend issue tracked separately.

Test plan

  • Add items to cart, proceed to checkout
  • Apply a valid gift card code — verify the sidebar immediately shows the gift card line and deducted amount
  • Remove the gift card — verify it disappears from the sidebar without page refresh
  • Apply a discount code — verify the sidebar updates immediately
  • Hover over the ✕ button on applied codes — verify cursor changes to pointer

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Bug Fixes

    • Checkout summary now refreshes correctly when the amount due changes, ensuring totals and gift card adjustments are reflected immediately.
  • Style

    • Remove buttons for applied discount codes and gift cards now show a pointer cursor to indicate they are clickable, improving interactive feedback.

The sidebar cartKey only included cart.id, cart.total, and
cart.total_quantity — none of which change when a gift card is applied.
This caused the useEffect to skip the setSummaryContent call, so the
sidebar never reflected the gift card until the next unrelated cart
refresh (e.g. address save).

Add cart.gift_card_total to the cartKey so the sidebar re-renders
immediately when a gift card is applied or removed.

Also add cursor-pointer to the discount/gift-card remove buttons.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented Apr 2, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
storefront Ready Ready Preview, Comment Apr 3, 2026 0:06am

Request Review

@coderabbitai

coderabbitai Bot commented Apr 2, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a0fc3da3-611b-49bf-8fa6-815c83ed86af

📥 Commits

Reviewing files that changed from the base of the PR and between 8e5e09b and b8ebfe3.

📒 Files selected for processing (1)
  • src/app/[country]/[locale]/(checkout)/checkout/[id]/page.tsx
✅ Files skipped from review due to trivial changes (1)
  • src/app/[country]/[locale]/(checkout)/checkout/[id]/page.tsx

Walkthrough

Updated checkout sidebar key to include cart.amount_due for reactivity, and added cursor-pointer styling to remove buttons for discount codes and gift cards in the CouponCode component.

Changes

Cohort / File(s) Summary
Checkout Sidebar Reactivity
src/app/[country]/[locale]/(checkout)/checkout/[id]/page.tsx
Modified cartKey to include cart.amount_due (using ?? "") alongside cart.id, cart.total, and cart.total_quantity so setSummaryContent refreshes when the due amount changes.
Coupon Code UI
src/components/checkout/CouponCode.tsx
Added cursor-pointer class to the remove button elements for applied discount codes and the applied gift card to explicitly indicate clickability.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • Bump SDK to 0.16 #83: Modifies the checkout page's cart-change detection and related checkout UI/state logic, overlapping changes to cart/amount_due handling.

Poem

🐰 I nibbled keys and found the cue,

cart amounts now wake the view,
Buttons point where clicks may go,
Sidebar hums—updates flow! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the primary fix in the changeset: making the gift card updates trigger a checkout sidebar re-render by including amount_due in the cart key.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch V-3369

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

// Track cart key for sidebar updates
const cartKey = cart
? `${cart.id}-${cart.total}-${cart.total_quantity}`
? `${cart.id}-${cart.total}-${cart.total_quantity}-${cart.gift_card_total ?? ""}`

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its better to use amount due which will work with both gift cards and store credits

Replace gift_card_total with amount_due so the checkout sidebar
refreshes when either gift cards or store credits are applied.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@damianlegawiec
damianlegawiec merged commit d1ae860 into main Apr 3, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants