Mini Cart Component - Flow Diagram & Execution Path
Module Overview: The Mini Cart component is a
modal-based cart preview that displays cart items with validation for
spare and single/assembly models. It provides quick access to view cart
details, remove items, continue shopping, and navigate to the full cart.
📋 Scenarios Overview
| Scenario | Product Type | Key Validation | Primary Actions |
|---|---|---|---|
| Validate Cart Preview (Spare/Single Model) | Spare Parts, Single Model | Product Name, Quantity, Price | View details, Remove item |
| View CTA Validation | All Types | CTA button availability | Navigate to full cart |
| Product Name Link | All Types | Product navigation | Product detail navigation |
| Validate Cart Preview (Assembly Model) | Assembly Model | Parent + Child products, Quantity, Price | Expand/Collapse child items |
| Continue Shopping | All Types | Navigation to catalog | Close modal, Navigate to catalog |
| Scroll Functionality | All Types | Multiple items display | Vertical scrolling |
| Remove Product from Mini Cart | All Types | Item removal | Remove item, Update context |
| Add Products Quick Add Modal | All Types | Quick product addition | Open add products modal |
🏗️ Architecture Overview
Mini Cart Context
↓
Mini Cart Modal
↓
Cart Item Components
↓
External APIs
📁 Key Files & Components
| File/Component | Purpose | Key Functions |
|---|---|---|
| src/components/mini-cart/index.tsx | Main Mini Cart Modal | Modal rendering, navigation handlers |
| src/components/mini-cart/CartItem/index.tsx | Individual Cart Item | Item display, expand/collapse, remove |
| src/context/MiniCartContext.tsx | State Management | Cart data, removal handling |
| src/apollo-client/query/mini-cart-details.ts | GraphQL Query | Fetch mini cart data |
| bff/resolvers/MiniCartDetails/index.js | BFF Resolver | Handle mini cart API calls |
🔄 Detailed Execution Flow
Scenario 1: Validate Cart Preview for Spare and Single Model
Step 1: User triggers mini cart display
src/components/mini-cart/index.tsx
The Modal component renders when
src/components/mini-cart/index.tsx
The Modal component renders when
isOpen prop is true
Step 2: Context provides cart data
src/context/MiniCartContext.tsx
Uses
src/context/MiniCartContext.tsx
Uses
useLazyQuery(GET_MINI_CART_DETAILS) to fetch cart data
Step 3: GraphQL query execution
src/apollo-client/query/mini-cart-details.ts
Query:
src/apollo-client/query/mini-cart-details.ts
Query:
getMiniCartDetails(cartId: String!)
Step 4: BFF resolver processes request
bff/resolvers/MiniCartDetails/index.js
Calls:
bff/resolvers/MiniCartDetails/index.js
Calls:
getSalesForceProcess(SF_CARTS_SERVICE, SF_ENDPOINTS.SF_GET_CARTS(cartId))
Step 5: External API call
https://sandbox.int-gateway.emrsn.com/api/commerce/webstores-dev/v1/msol/{cartId}?type=mini
Salesforce Commerce API returns mini cart data
https://sandbox.int-gateway.emrsn.com/api/commerce/webstores-dev/v1/msol/{cartId}?type=mini
Salesforce Commerce API returns mini cart data
Step 6: Data validation and rendering
src/components/mini-cart/CartItem/index.tsx
Validates: Product name, SKU, quantity, configuration status
Renders: Spare parts or single model without child items
src/components/mini-cart/CartItem/index.tsx
Validates: Product name, SKU, quantity, configuration status
Renders: Spare parts or single model without child items
Product Data Structure for Spare/Single: { productDetails: { name: "Product Name", sku: "Product SKU", quickShipEligible: boolean }, qty: "quantity", configDtls: { valid: "true/false", status: "Valid/Invalid" }, lstChildItems: [] // Empty for spare/single }
Scenario 2: Click on View CTA and Validate
Step 1: User clicks "View Cart" button
src/components/mini-cart/index.tsx
Function:
src/components/mini-cart/index.tsx
Function:
handleRedirect()
Step 2: URL construction and navigation
Constructs URL:
Opens in same window:
Constructs URL:
${getRuntimeConfig().NEXT_PUBLIC_BASE_URL_EXTERNAL}${lang}/measurement-instrumentation/cartOpens in same window:
window.open(url, "_self")
Step 3: Validation checks
Validates: User session, cart availability, routing permissions
Redirects to full cart page for detailed cart management
Validates: User session, cart availability, routing permissions
Redirects to full cart page for detailed cart management
Scenario 3: Click on Product Name Link
Step 1: Product name is rendered as clickable
src/components/mini-cart/CartItem/index.tsx
Component:
src/components/mini-cart/CartItem/index.tsx
Component:
<Heading text={item?.productDetails?.name} />
Step 2: Navigation to product details
Currently displays product name without click handler
Future enhancement: Could link to product detail page or configurator
Currently displays product name without click handler
Future enhancement: Could link to product detail page or configurator
Scenario 4: Validate Cart Preview for Assembly Model
Step 1: Assembly model detection
src/components/mini-cart/CartItem/index.tsx
Condition:
src/components/mini-cart/CartItem/index.tsx
Condition:
item?.lstChildItems?.length > 0
Step 2: Parent product display
Shows: Parent product name, SKU, total quantity
Includes: Expand/collapse toggle for child items
Shows: Parent product name, SKU, total quantity
Includes: Expand/collapse toggle for child items
Step 3: Child items expansion
Function:
State:
Renders child products when expanded
Function:
handleViewProductToggle()State:
setViewMore(!viewMore)Renders child products when expanded
Step 4: Child product validation
Each child shows: Name, SKU, individual quantity
Maps through:
Each child shows: Name, SKU, individual quantity
Maps through:
item?.lstChildItems?.map((childItem) => ...)
Assembly Product Structure: { productDetails: { name: "Assembly Product Name", sku: "Assembly SKU" }, qty: "total_quantity", lstChildItems: [ { productDetails: { name: "Child Product 1", sku: "Child SKU 1" }, qty: "child_quantity_1" }, { productDetails: { name: "Child Product 2", sku: "Child SKU 2" }, qty: "child_quantity_2" } ] }
Scenario 5: Click on Continue Shopping and Validate
Step 1: User clicks "Continue Shopping" link
src/components/mini-cart/index.tsx
Function:
src/components/mini-cart/index.tsx
Function:
handleContinueShopping()
Step 2: Modal closure
Function:
Sets modal state:
Function:
handleClose() called firstSets modal state:
setIsModalOpen(false)
Step 3: Navigation to catalog
Router navigation:
Takes user to product catalog for continued shopping
Router navigation:
router.push(`/${lang}/measurement-instrumentation/catalog/measurement-instrument`)Takes user to product catalog for continued shopping
Step 4: Validation checks
Validates: Language parameter, routing permissions, catalog availability
Validates: Language parameter, routing permissions, catalog availability
Scenario 6: Validate Scroll Functionality
Step 1: Modal body container setup
src/components/mini-cart/mini-cart.module.scss
CSS Class:
Properties:
src/components/mini-cart/mini-cart.module.scss
CSS Class:
.modalBodyProperties:
overflow-y: scroll; height: const.$screen-xsm; scrollbar-width: none;
Step 2: Cart items rendering
src/components/mini-cart/index.tsx
Maps through:
src/components/mini-cart/index.tsx
Maps through:
cartDetails?.cartItems?.map((item, index) => ...)
Step 3: Responsive scrolling
Desktop: Fixed height with scroll
Mobile: Adjusted height
Hidden scrollbar for clean UI
Desktop: Fixed height with scroll
Mobile: Adjusted height
calc(const.$height-large-xxxl - const.$lg)Hidden scrollbar for clean UI
Step 4: Performance validation
Virtual scrolling not implemented (suitable for mini cart with limited items)
Direct DOM rendering for all cart items
Virtual scrolling not implemented (suitable for mini cart with limited items)
Direct DOM rendering for all cart items
Scenario 7: Remove Product from Mini Cart
Step 1: User clicks remove link
src/components/mini-cart/CartItem/index.tsx
Function:
Element:
src/components/mini-cart/CartItem/index.tsx
Function:
handleRemove()Element:
<Box onClick={() => {handleRemove()}}>{labels?.remove}</Box>
Step 2: Context update
src/context/MiniCartContext.tsx
Function:
Updates removed items state:
src/context/MiniCartContext.tsx
Function:
handleRemovedCartItem(item.cartItemId)Updates removed items state:
setRemovedItems(cartItemId)
Step 3: Backend removal (if implemented)
Would call remove cart items mutation
bff/resolvers/DeleteCartItems/index.js
API:
Would call remove cart items mutation
bff/resolvers/DeleteCartItems/index.js
API:
deleteSalesForceProcess(SF_CARTS_SERVICE, `${STORENAME}/${cartId}/items?itemIds=${itemIds}`)
Step 4: UI state update
Item marked for removal in context
Mini cart re-fetches data or updates local state
Visual feedback provided to user
Item marked for removal in context
Mini cart re-fetches data or updates local state
Visual feedback provided to user
Scenario 8: Select "Add Products" and Validate Quick Add Modal
Step 1: Add Products button availability
Not directly available in mini cart modal
Available in empty cart state or full cart header
src/components/empty-cart/index.tsx
Not directly available in mini cart modal
Available in empty cart state or full cart header
src/components/empty-cart/index.tsx
Step 2: Modal trigger from related components
Empty cart:
Full cart header: Similar modal state management
Empty cart:
setOpenCartModal({ ...openCartModal, addProducts: true })Full cart header: Similar modal state management
Step 3: Add Products modal rendering
src/components/add-products/index.tsx
Options: Manual entry, bulk import
Integration with cart add functionality
src/components/add-products/index.tsx
Options: Manual entry, bulk import
Integration with cart add functionality
Step 4: Product addition flow
Manual: src/components/add-products-manually/index.tsx
Import: src/modules/import-products/index.tsx
API:
Manual: src/components/add-products-manually/index.tsx
Import: src/modules/import-products/index.tsx
API:
ADD_ITEMS_TO_CART mutation
🌐 External API Endpoints
| Endpoint | Method | Purpose | Response |
|---|---|---|---|
| msol/{cartId}?type=mini | GET | Fetch mini cart details | Cart items, totals, metadata |
| msol/{cartId}/items?itemIds={ids} | DELETE | Remove cart items | Success/failure status |
| msol/{cartId}/items | POST | Add items to cart | Updated cart state |
| msol/{cartId}/items/{itemId} | PATCH | Update cart item | Updated item details |
⚠️ Configuration Validation
Configuration Status Handling:
- valid: "false" - Shows warning icon and message
- valid: "true" - Normal display with quantity controls
- status: "InComplete" - Pending configuration state
- status: "Valid" - Fully configured product
📱 Responsive Behavior
| Breakpoint | Modal Size | Positioning | Behavior |
|---|---|---|---|
| Desktop (≥1920px) | Fixed width: 432px | Top-right with offset | Standard modal behavior |
| Desktop (1280-1919px) | Fixed width: 432px | Top-right standard | Standard modal behavior |
| Tablet | Adjusted width | Centered with offset | Touch-optimized |
| Mobile (≤767px) | Full width | Top of screen | Full-screen modal |
🔍 Data Flow Summary
User Action
↓
Mini Cart Context
↓
GraphQL Query
↓
BFF Resolver
↓
Salesforce Commerce API
↓
Data Processing
↓
UI Rendering
↓
User Interface
📝 Testing Scenarios
Test Cases:
1. Load mini cart with spare parts - verify name, SKU, quantity display
2. Load mini cart with assembly products - verify expand/collapse functionality
3. Click View Cart button - verify navigation to full cart page
4. Click Continue Shopping - verify navigation to catalog
5. Remove item from mini cart - verify item removal and state update
6. Test responsive behavior on different screen sizes
7. Validate configuration warning display for invalid products
8. Test scroll functionality with multiple items
9. Verify modal open/close behavior
10. Test empty cart state handling
1. Load mini cart with spare parts - verify name, SKU, quantity display
2. Load mini cart with assembly products - verify expand/collapse functionality
3. Click View Cart button - verify navigation to full cart page
4. Click Continue Shopping - verify navigation to catalog
5. Remove item from mini cart - verify item removal and state update
6. Test responsive behavior on different screen sizes
7. Validate configuration warning display for invalid products
8. Test scroll functionality with multiple items
9. Verify modal open/close behavior
10. Test empty cart state handling
Created By :
Checkout Module (Shipping & Billing) Documentation - Measurement Instrumentation Module