Task: Implementation, Bug Fixes, and Storefront Integration of Multi-SKU Product Variants & Pack Matrix
Status: In Progress / Completed Testing
Repositories Affected:
evergreen_pos_fe (Admin FE)
evergreen_pos_be (Backend Node/MongoDB API)
evergreenpos_E-commerce_new (Storefront FE)
🚀 Summary of Work Completed
1. Admin Panel - Multi-SKU Matrix Generator & Editing (evergreen_pos_fe)
Auto-Matrix Generation on Attribute Selection:
Removed manual "⚡ Generate Combination Matrix" button.
Matrix rows now auto-generate and update immediately upon selecting/deselecting attribute dimension pills (e.g., Pot Size, Light Needs, Water Needs).
Automatically clears matrix rows when all attribute dimensions are deselected.
Enable/Disable Row Toggle Switch:
Removed destructive "Remove" links from matrix table rows.
Replaced action column with an Ant Design <Switch /> component under Status, allowing admins to toggle variant rows active/disabled without deleting them.
Edit Product Hydration & State Sync:
Fixed getProductByID in CreateProduct.tsx to load existing hasVariants, variantDimensions, and variantsMatrix from backend product API responses.
Preserved edited prices, offer prices, stock quantities, SKUs, default variant selection, and active switch states during product updates.
2. Backend Services & MongoDB Persistence (evergreen_pos_be)
Mongoose Schema Persistence:
Updated variantSchema in src/models/nursery/nursery.product.js to include isActive: { type: Boolean, default: true }.
Ensures variant enable/disable switch states pass validation and persist in MongoDB.
Cart & Inventory Variant Resolution:
Updated cart.service.js and product.service.js to support variant SKU lookup, composite cart items (productId_variantSku), variant-specific pricing, and stock mapping.
Allowed hasVariants, variantDimensions, and variants fields in productPayloadFilter.js.
3. Storefront & Cart Integration (evergreenpos_E-commerce_new)
Variant Selection Dropdown on Product Cards:
Integrated a clean variant selection dropdown (<select>) in a separate row on product cards (ProductUnifiedCard.tsx and UnifiedCard.tsx).
Formatted options to show clean variant combination names (e.g., 4-inch / Low Light).
Dynamic Price & Offer Recalculation:
Selecting a variant in the dropdown instantly updates the card's displayed regular price, offer price, and discount percentage badge.
Guest & Logged-in Cart Variant Sync:
Fixed first variant (e.g., 4-inch variant) SKU mapping in guest cart local storage (useCart.tsx).
Generated composite cart keys (productId_variantSku) to ensure variant-specific cart management for both guest and authenticated users.
Cart & Recently Viewed Rail Integration:
Updated useCart.tsx to automatically trigger trackRecentlyViewed when any item is added to the cart.
Updated RecentlyViewedSection.tsx to merge active cart items into the Recently Viewed rail with quantity modifier controls ([- 1 +] and GO TO CART →).
🛠️ Files Modified
Repository Component / File Path Changes Description
Admin FE
CreateProduct.tsx
Auto-matrix generation, enable/disable switch, edit hydration fix
Backend BE
nursery.product.js
Added isActive field to variantSchema
Backend BE
cart.service.js
Added variant cart item resolution & stock checks
Backend BE
productPayloadFilter.js
Whitelisted variant fields in update payload filter
E-Comm FE
ProductUnifiedCard.tsx
Added variant dropdown row, dynamic pricing, variant cart sync
E-Comm FE
UnifiedCard.tsx
Added variant dropdown row, dynamic pricing
E-Comm FE
useCart.tsx
Fixed guest cart SKU mapping, auto-track recently viewed
E-Comm FE
RecentlyViewedSection.tsx
Merged active cart items into Recently Viewed section