Conversation
- Add CartContext for global cart state management - Create Cart page with item table, coupon codes, and order summary - Add cart icon with item count badge to Navigation - Wire up Products page to add items to cart - Support discount calculations and coupon codes (OCTOCAT10, MEOW20, COPILOT5) - Add dark mode support throughout cart experience - Update copilot-instructions.md with comprehensive codebase guidance
There was a problem hiding this comment.
Pull request overview
This PR adds a shopping cart feature to the frontend, including global cart state via React Context, a dedicated cart page UI, and navigation/routing updates so users can add products to a persisted cart and manage quantities.
Changes:
- Added
CartContextwith localStorage persistence and cart mutation helpers. - Implemented cart and checkout placeholder routes/pages, plus cart pricing helpers.
- Integrated “add to cart” into the Products page and exposed cart access from Navigation.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/utils/cartPricing.ts | Introduces cart pricing helpers (subtotal/discount/shipping/total). |
| frontend/src/types/product.ts | Adds a shared Product type for frontend usage (incl. optional discount). |
| frontend/src/types/cart.ts | Defines cart item/state types used by context and UI. |
| frontend/src/context/CartContext.tsx | Implements cart state management + persistence + public cart API. |
| frontend/src/components/Navigation.tsx | Adds cart link/icon and item count badge in the header. |
| frontend/src/components/entity/product/Products.tsx | Hooks product list “Add to Cart” into the new cart context and adds a status message. |
| frontend/src/components/entity/cart/CheckoutPlaceholder.tsx | Adds a placeholder checkout route/page. |
| frontend/src/components/entity/cart/Cart.tsx | Adds full cart page UI (table/mobile layout), quantity editing, coupon input, summary, and actions. |
| frontend/src/App.tsx | Registers cart/checkout routes and wraps app with CartProvider. |
| .github/copilot-instructions.md | Adds repository guidance for agents (architecture, commands, patterns, demo hints). |
Copilot's findings
Tip
Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Files reviewed: 10/10 changed files
- Comments generated: 8
Comment on lines
+16
to
+20
| export const calculateCartSummary = (items: CartItem[]) => { | ||
| const subtotal = calculateSubtotal(items); | ||
| const discount = subtotal * CART_DISCOUNT_RATE; | ||
| const shipping = CART_SHIPPING_FEE; | ||
| const total = subtotal - discount + shipping; |
Comment on lines
+37
to
+40
| const handleApplyCoupon = () => { | ||
| applyCoupon(couponInput); | ||
| setUpdateMessage(couponInput.trim() ? 'Coupon applied.' : 'Coupon cleared.'); | ||
| }; |
Comment on lines
+84
to
+86
| <span className="absolute -right-2 -top-1 min-w-5 rounded-full bg-primary px-1 text-center text-xs font-bold text-white"> | ||
| {itemCount} | ||
| </span> |
Comment on lines
+34
to
+38
| const parsedState = JSON.parse(storedState) as Partial<CartState>; | ||
| return { | ||
| items: Array.isArray(parsedState.items) ? parsedState.items : [], | ||
| couponCode: typeof parsedState.couponCode === 'string' ? parsedState.couponCode : '', | ||
| }; |
Comment on lines
+106
to
+109
| <input | ||
| type="number" | ||
| min={0} | ||
| value={draftQuantities[item.product.productId] ?? item.quantity} |
Comment on lines
+170
to
+173
| <input | ||
| type="number" | ||
| min={0} | ||
| value={draftQuantities[item.product.productId] ?? item.quantity} |
Comment on lines
+21
to
+22
| npm run test # Run tests in both workspaces (vitest) | ||
| npm run test:coverage # API coverage with vitest |
Comment on lines
+110
to
+111
| - **No cart persistence**: Cart functionality stub in Products.tsx; implement in new Cart component | ||
| - **Discounts**: Implemented in Product model but not applied in UI (add discount calculation when building Cart) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
This PR implements a complete shopping cart experience for the OctoCAT Supply demo application, including cart state management, a cart page with full item management, and navigation integration.
Features Implemented
🛒 Cart State Management (CartContext.tsx)
addToCart,removeFromCart,updateQuantity,clearCarttotalItems,subtotal(with product discount support)📄 Cart Page (Cart.tsx)
OCTOCAT10- 10% offMEOW20- 20% offCOPILOT5- 5% off🧭 Navigation Integration (Navigation.tsx)
/cartpage🛍️ Products Integration (Products.tsx)
alert()stub with real cart functionality📚 Documentation (.github/copilot-instructions.md)
Technical Details
ThemeContextandAuthContextTesting
Screenshots
The implementation matches the design provided in the mockup with:
Demo scenario ready: This implementation supports the Copilot demo scenario of building a cart page from an image mockup with natural language prompts.