Finally fixes the stale checkout sidebar bug#148
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughCheckoutPageContent now reads shared cart state via ChangesCart Context Integration and Cart State Sync
Sequence DiagramsequenceDiagram
participant CheckoutPage as CheckoutPageContent
participant CartContext as CartContext (useCart)
participant API as getCheckoutOrder
participant LocalState as local cart state
CheckoutPage->>CartContext: read contextCart
CheckoutPage->>LocalState: compute cartItemsFingerprint(contextCart) vs fingerprint(local cart)
alt fingerprints differ and contextCart.id == cartId
CheckoutPage->>API: getCheckoutOrder(cartId)
API-->>CheckoutPage: fetched checkout cart
CheckoutPage->>LocalState: replace local cart with fetched checkout
end
Note right of CheckoutPage: useLayoutEffect republishes CheckoutSidebar whenever LocalState (cart) changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/app/[country]/[locale]/(checkout)/checkout/[id]/CheckoutPageContent.tsx (1)
62-76: 💤 Low valueConsider sorting line items before fingerprinting for stability.
cartItemsFingerprintrelies on positional order ofcart.items. If the backend ever returns items in a different order across responses (e.g., after a quantity change re-orders the list), the fingerprint will differ even though the line items are set-equal, triggering a benign but unnecessarysetCart(contextCart)overwrite that throws away locally accumulated totals/discount state. A small sort by id makes the comparison order-independent.♻️ Proposed refactor
function cartItemsFingerprint(cart: Cart | null): string { if (!cart) return ""; - return (cart.items ?? []).map((i) => `${i.id}:${i.quantity}`).join(","); + return (cart.items ?? []) + .map((i) => `${i.id}:${i.quantity}`) + .sort() + .join(","); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/app/`[country]/[locale]/(checkout)/checkout/[id]/CheckoutPageContent.tsx around lines 62 - 76, The cartItemsFingerprint function relies on the order of cart.items and should be made order-independent: inside cartItemsFingerprint (and where Cart/cart.items is used) sort the items deterministically (e.g., by i.id) before mapping to `${i.id}:${i.quantity}` so that the fingerprint reflects set-equivalence rather than array order; update cartItemsFingerprint to operate on a sorted copy of cart.items to avoid mutating the original array.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/`[country]/[locale]/(checkout)/checkout/[id]/CheckoutPageContent.tsx:
- Around line 280-285: The sync effect that updates local cart from CartContext
should be gated on the context loading flag to avoid applying stale line items;
extract loading from useCart (e.g., const { cart: contextCart, loading:
contextLoading } = useCart()) and update the effect in CheckoutPageContent so it
returns early when contextLoading is true (add contextLoading to the dependency
array), keeping the existing checks (contextCart truthiness, id match via
cartId, fingerprint equality via cartItemsFingerprint) and only calling
setCart(contextCart) when loading is false and fingerprints differ.
---
Nitpick comments:
In `@src/app/`[country]/[locale]/(checkout)/checkout/[id]/CheckoutPageContent.tsx:
- Around line 62-76: The cartItemsFingerprint function relies on the order of
cart.items and should be made order-independent: inside cartItemsFingerprint
(and where Cart/cart.items is used) sort the items deterministically (e.g., by
i.id) before mapping to `${i.id}:${i.quantity}` so that the fingerprint reflects
set-equivalence rather than array order; update cartItemsFingerprint to operate
on a sorted copy of cart.items to avoid mutating the original array.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 876263b3-294a-47ac-8403-93ee58e86163
📒 Files selected for processing (1)
src/app/[country]/[locale]/(checkout)/checkout/[id]/CheckoutPageContent.tsx
When customer was leaving checkout to storefront, changing cart and going back to checkout the sidebar wasn't re-rendered
damianlegawiec
force-pushed
the
fix/stale-checkout-bug
branch
from
4b061a0 to
f6a5b59
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/`[country]/[locale]/(checkout)/checkout/[id]/CheckoutPageContent.tsx:
- Around line 62-76: The cartItemsFingerprint function currently builds a
fingerprint using cart.items order; to make it robust to differing orderings,
sort the items by a stable key (use i.id) before mapping to
`${i.id}:${i.quantity}` and joining; update the cartItemsFingerprint
implementation to sort (e.g., ascending by id) on (cart.items ?? []) prior to
creating the fingerprint so identical sets produce identical fingerprints
regardless of array order.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e5381c82-88e0-42cb-ad03-952419191a73
📒 Files selected for processing (1)
src/app/[country]/[locale]/(checkout)/checkout/[id]/CheckoutPageContent.tsx
1 participant
When customer was leaving checkout to storefront, changing cart and going back to checkout the sidebar wasn't re-rendered
Summary by CodeRabbit