Adding Items to Cart

Multiple ways to add products to your cart:

• From Product Card: Select variant (if multiple) and click "Add to Cart" button
• From Detail Dialog: Select variant and click "Add to Cart" in the dialog
• Variant Selection: Must select a specific variant before adding
• Stock Validation: Can only add items that are in stock
• Quantity: Adds 1 unit of the selected variant
• Cart Notification: Cart popover appears showing the added item
• Same Variant: Adding same variant again increases quantity (no duplicates)

Cart Management

Manage your shopping cart:

• Cart Icon: Badge shows item count - click to view cart popover
• Cart Popover: Quick view shows all items, quantities, and total
• Cart Page: Full cart page accessible via "View Cart & Checkout" button
• Quantity Adjustment: Increase/decrease buttons on cart page (minimum 1, max available stock)
• Remove Items: X icon removes individual items, "Clear all" removes everything
• Real-Time Updates: Totals recalculate immediately when quantities change
• Stock Limits: Cannot increase beyond available inventory
• Cart Persistence: Cart persists for browser session (clears on order completion)

Cart Display

What's shown in the cart:

• Product Image: Thumbnail from variant or product
• Product Name: Clean product name (truncated if too long)
• Variant Info: Condition abbreviation, printing, language (if not EN)
• Unit Price: Price per unit displayed
• Quantity: Current quantity in cart
• Subtotal: Unit price × quantity for each item
• Grand Total: Sum of all item subtotals
• Empty State: Friendly message when cart is empty

Checkout Process

Complete checkout to create an order:

1. Click "Proceed to checkout" button on cart page
2. Enter customer name or phone number in dialog
3. Click "Confirm order" to submit
4. System creates order and reserves inventory
5. Collection code is generated and displayed
6. Cart clears automatically after viewing code

Collection Code

After successful order creation:

• Unique Code: 6-character alphanumeric code (e.g., "A3B9X2") generated randomly
• Large Display: Code shown prominently in success dialog
• Purpose: Customer shows this code at counter to collect items
• Order Matching: Staff can lookup order in POS using this code
• One-Time Use: Code is unique and associated with specific order
• Note It Down: Code displayed once - screenshot or write it down

Order Creation

What happens when order is created:

1. Order Document: Order saved to database with all item details
2. Inventory Reservation: Stock quantities deducted using FIFO method
3. Deduction Logs: Audit trail created for each stock deduction
4. Reserved Cart: Reserved cart document created for POS integration
5. Collection Code: Unique code generated for pickup
6. Downstream Syncs: Inventory changes synced to Shopify, CardTrader, ManaPool
7. POS Ready: Order available in POS system for staff processing

Inventory Reservation

Stock is reserved using FIFO (First In, First Out) method:

• Stock Matching: Matches requested SKU ID, condition, and printing
• Chronological Order: Uses oldest stock entries first (by createdAt date)
• Partial Quantities: Can consume from multiple stock entries if needed
• Quantity Deduction: Decrements stock quantity atomically
• Transaction Safety: Uses MongoDB transactions to ensure consistency
• Deduction Logs: Creates log entry for each stock deduction
• Real-Time: Stock removed immediately from kiosk view

Error Handling

If checkout fails:

• Validation Errors: Shows error if customer name missing
• Stock Unavailable: Error if requested quantity exceeds available stock
• Product Not Found: Error if product or variant no longer exists
• Transaction Rollback: All changes rolled back if any step fails
• User Feedback: Error message displayed in dialog with retry option
• Cart Preserved: Cart remains intact if order fails - can retry