update cart
This commit is contained in:
Phuoc Nguyen
319
CART_UPDATE_SUMMARY.md
Normal file
319
CART_UPDATE_SUMMARY.md
Normal file
@@ -0,0 +1,319 @@
|
||||
# Cart Feature Update Summary
|
||||
|
||||
## Overview
|
||||
Updated the cart feature to match the new HTML design with selection checkboxes, sticky footer, and conversion quantity display.
|
||||
|
||||
## Files Modified
|
||||
|
||||
### 1. Cart State (`lib/features/cart/presentation/providers/cart_state.dart`)
|
||||
|
||||
**Changes:**
|
||||
- Added `quantityConverted` (double) and `boxes` (int) fields to `CartItemData`
|
||||
- Updated `lineTotal` calculation to use `quantityConverted` instead of `quantity`
|
||||
- Added `selectedItems` map (productId -> isSelected) to `CartState`
|
||||
- Added getters:
|
||||
- `selectedCount` - Number of selected items
|
||||
- `isAllSelected` - Check if all items are selected
|
||||
- `selectedTotal` - Total price of selected items only
|
||||
|
||||
**Impact:**
|
||||
- Cart items now track both user-entered quantity and converted (rounded-up) quantity
|
||||
- Supports per-item selection for deletion and checkout
|
||||
|
||||
---
|
||||
|
||||
### 2. Cart Provider (`lib/features/cart/presentation/providers/cart_provider.dart`)
|
||||
|
||||
**New Methods:**
|
||||
- `_calculateConversion(quantity)` - Simulates 8% markup for rounding up tiles
|
||||
- Returns `(convertedQuantity, boxes)` tuple
|
||||
- `toggleSelection(productId)` - Toggle single item selection
|
||||
- `toggleSelectAll()` - Select/deselect all items
|
||||
- `deleteSelected()` - Remove all selected items from cart
|
||||
|
||||
**Updated Methods:**
|
||||
- `addToCart()` - Auto-selects new items, calculates conversion
|
||||
- `removeFromCart()` - Also removes from selection map
|
||||
- `updateQuantity()` - Recalculates conversion on quantity change
|
||||
- `_recalculateTotal()` - Only includes selected items in total calculation
|
||||
|
||||
**Key Logic:**
|
||||
```dart
|
||||
// Conversion calculation (simulated)
|
||||
final converted = (quantity * 1.008 * 100).ceilToDouble() / 100;
|
||||
final boxes = (quantity * 2.8).ceil();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 3. Cart Item Widget (`lib/features/cart/presentation/widgets/cart_item_widget.dart`)
|
||||
|
||||
**New Features:**
|
||||
- Checkbox on left side (20x20px, 6px radius)
|
||||
- Checkbox aligned 34px from top to match HTML design
|
||||
- Converted quantity display below quantity controls:
|
||||
```
|
||||
(Quy đổi: 10.08 m² = 28 viên)
|
||||
```
|
||||
|
||||
**Layout:**
|
||||
```
|
||||
[Checkbox] [Image 80x80] [Product Info]
|
||||
├─ Name
|
||||
├─ Price/unit
|
||||
├─ Quantity Controls (-, value, +, unit)
|
||||
└─ Conversion Display
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 4. Cart Page (`lib/features/cart/presentation/pages/cart_page.dart`)
|
||||
|
||||
**Major Changes:**
|
||||
|
||||
#### Removed:
|
||||
- Warehouse selection (moved to checkout as per HTML)
|
||||
- Discount code section (moved to checkout)
|
||||
- Order summary breakdown
|
||||
|
||||
#### Added:
|
||||
- **Select All Section** (line 114-167)
|
||||
- Checkbox + "Chọn tất cả" label
|
||||
- "Đã chọn: X/Y" count display
|
||||
|
||||
- **Sticky Footer** (line 170-288)
|
||||
- Delete button (48x48, red border, disabled when no selection)
|
||||
- Total info: "Tổng tạm tính (X sản phẩm)" + amount
|
||||
- Checkout button (disabled when no selection)
|
||||
|
||||
- **AppBar Changes:**
|
||||
- Title shows total items: "Giỏ hàng (3)"
|
||||
- Right action: Select all checkbox icon button
|
||||
|
||||
**Layout:**
|
||||
```
|
||||
Stack:
|
||||
├─ ScrollView
|
||||
│ ├─ Select All Section
|
||||
│ └─ Cart Items (with checkboxes)
|
||||
└─ Sticky Footer (Positioned at bottom)
|
||||
└─ [Delete] [Total Info] [Checkout Button]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 5. Payment Method Section (`lib/features/cart/presentation/widgets/payment_method_section.dart`)
|
||||
|
||||
**Updated Options:**
|
||||
1. **Full Payment** (value: `'full_payment'`)
|
||||
- Icon: `Icons.account_balance_outlined`
|
||||
- Label: "Thanh toán hoàn toàn"
|
||||
- Description: "Thanh toán qua tài khoản ngân hàng"
|
||||
|
||||
2. **Partial Payment** (value: `'partial_payment'`)
|
||||
- Icon: `Icons.payments_outlined`
|
||||
- Label: "Thanh toán một phần"
|
||||
- Description: "Trả trước(≥20%), còn lại thanh toán trong vòng 30 ngày"
|
||||
|
||||
**Removed:**
|
||||
- COD option (Cash on Delivery)
|
||||
|
||||
---
|
||||
|
||||
### 6. Order Summary Section (`lib/features/cart/presentation/widgets/order_summary_section.dart`)
|
||||
|
||||
**Updated Item Display:**
|
||||
- **Line 1:** Product name (14px, medium weight)
|
||||
- **Line 2:** Conversion details (13px, muted)
|
||||
```
|
||||
20 m² (56 viên / 20.16 m²)
|
||||
```
|
||||
|
||||
**Updated Discount:**
|
||||
- Changed from generic "Giảm giá (5%)" to "Giảm giá Diamond"
|
||||
- Color changed to `AppColors.success` (green)
|
||||
|
||||
**Price Calculation:**
|
||||
- Now uses `quantityConverted` for accurate billing
|
||||
- Mock implementation: `price * quantityConverted`
|
||||
|
||||
---
|
||||
|
||||
### 7. Checkout Page (`lib/features/cart/presentation/pages/checkout_page.dart`)
|
||||
|
||||
**Minor Changes:**
|
||||
- Default payment method changed from `'bank_transfer'` to `'full_payment'`
|
||||
|
||||
---
|
||||
|
||||
## Mock Data Structure
|
||||
|
||||
### Updated CartItemData
|
||||
```dart
|
||||
CartItemData(
|
||||
product: Product(...),
|
||||
quantity: 10.0, // User-entered quantity
|
||||
quantityConverted: 10.08, // Rounded-up for billing
|
||||
boxes: 28, // Number of tiles/boxes
|
||||
)
|
||||
```
|
||||
|
||||
### Cart State
|
||||
```dart
|
||||
CartState(
|
||||
items: [CartItemData(...)],
|
||||
selectedItems: {
|
||||
'product-1': true,
|
||||
'product-2': false,
|
||||
'product-3': true,
|
||||
},
|
||||
selectedWarehouse: 'Kho Hà Nội - Nguyễn Trãi',
|
||||
memberTier: 'Diamond',
|
||||
memberDiscountPercent: 15.0,
|
||||
subtotal: 17107200.0, // Only selected items
|
||||
total: 14541120.0, // After discount
|
||||
...
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design Alignment with HTML
|
||||
|
||||
### cart.html (lines 24-176)
|
||||
✅ Select all section with checkbox and count
|
||||
✅ Cart items with checkboxes on left
|
||||
✅ Converted quantity display: "(Quy đổi: X.XX m² = Y viên)"
|
||||
✅ Sticky footer with delete button
|
||||
✅ Total calculated for selected items only
|
||||
✅ Checkout button disabled when no selection
|
||||
❌ Warehouse selection removed (commented out in HTML)
|
||||
|
||||
### checkout.html (lines 115-138, 154-196)
|
||||
✅ Two payment options (full/partial)
|
||||
✅ Order summary with conversion on line 2
|
||||
✅ Member tier discount shown inline
|
||||
✅ Shipping shown as "Miễn phí" when 0
|
||||
|
||||
---
|
||||
|
||||
## Key Features Implemented
|
||||
|
||||
1. **Item Selection System**
|
||||
- Per-item checkboxes
|
||||
- Select all functionality
|
||||
- Selection count display
|
||||
- Only selected items included in total
|
||||
|
||||
2. **Conversion Tracking**
|
||||
- User-entered quantity (e.g., 10 m²)
|
||||
- Converted quantity (e.g., 10.08 m²) for billing
|
||||
- Box/tile count (e.g., 28 viên)
|
||||
- Displayed in cart and checkout
|
||||
|
||||
3. **Sticky Footer**
|
||||
- Fixed at bottom with shadow
|
||||
- Delete button for selected items
|
||||
- Total for selected items
|
||||
- Checkout button
|
||||
|
||||
4. **Updated Payment Methods**
|
||||
- Full payment via bank
|
||||
- Partial payment (≥20%, 30 days)
|
||||
- Removed COD option
|
||||
|
||||
5. **Accurate Pricing**
|
||||
- Calculations use `quantityConverted`
|
||||
- Member tier discount (Diamond 15%)
|
||||
- Free shipping display
|
||||
|
||||
---
|
||||
|
||||
## Testing Notes
|
||||
|
||||
### Manual Test Scenarios:
|
||||
|
||||
1. **Selection**
|
||||
- [ ] Add 3 items to cart
|
||||
- [ ] Toggle individual checkboxes
|
||||
- [ ] Use "Select All" button in AppBar
|
||||
- [ ] Use "Chọn tất cả" in select all section
|
||||
- [ ] Verify count: "Đã chọn: X/Y"
|
||||
|
||||
2. **Deletion**
|
||||
- [ ] Select 2 items
|
||||
- [ ] Click delete button
|
||||
- [ ] Confirm deletion
|
||||
- [ ] Verify items removed and total updated
|
||||
|
||||
3. **Conversion Display**
|
||||
- [ ] Add item with quantity 10
|
||||
- [ ] Verify conversion shows: "(Quy đổi: 10.08 m² = 28 viên)"
|
||||
- [ ] Change quantity to 15
|
||||
- [ ] Verify conversion updates
|
||||
|
||||
4. **Checkout Flow**
|
||||
- [ ] Select items
|
||||
- [ ] Click "Tiến hành đặt hàng"
|
||||
- [ ] Verify checkout page shows conversion details
|
||||
- [ ] Check payment method options (2 radios)
|
||||
- [ ] Verify Diamond discount shown
|
||||
|
||||
5. **Empty States**
|
||||
- [ ] Delete all items
|
||||
- [ ] Verify empty cart message
|
||||
- [ ] Select 0 items
|
||||
- [ ] Verify checkout button disabled
|
||||
- [ ] Verify delete button disabled
|
||||
|
||||
---
|
||||
|
||||
## Migration Notes
|
||||
|
||||
### Breaking Changes:
|
||||
- `CartItemData` constructor now requires `quantityConverted` and `boxes`
|
||||
- Existing cart data will need migration
|
||||
- Any code reading cart items must handle new fields
|
||||
|
||||
### Backward Compatibility:
|
||||
- Old cart items won't have conversion data
|
||||
- Consider adding migration in cart provider initialization
|
||||
- Default conversion: `quantityConverted = quantity * 1.01`, `boxes = 0`
|
||||
|
||||
### TODO for Production:
|
||||
1. Replace mock conversion calculation with backend API
|
||||
2. Get conversion rate from product specifications (tile size)
|
||||
3. Persist selection state in Hive (optional)
|
||||
4. Add loading states for delete operation
|
||||
5. Implement undo for accidental deletions
|
||||
6. Add analytics for selection patterns
|
||||
|
||||
---
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
- Selection state stored in Map for O(1) lookups
|
||||
- Total recalculated on every selection change
|
||||
- Consider debouncing if performance issues arise
|
||||
- Sticky footer uses Stack/Positioned for smooth scroll
|
||||
|
||||
---
|
||||
|
||||
## Accessibility
|
||||
|
||||
- All checkboxes have proper touch targets (22x22 minimum)
|
||||
- Delete button has tooltip
|
||||
- Disabled states have visual feedback (opacity)
|
||||
- Selection count announced for screen readers
|
||||
|
||||
---
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Test on physical devices
|
||||
2. Verify conversion calculations with business team
|
||||
3. Update API integration for conversion data
|
||||
4. Add unit tests for selection logic
|
||||
5. Add widget tests for cart page
|
||||
6. Consider adding animation for item deletion
|
||||
|
||||
Reference in New Issue
Block a user