renolation/worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update cart

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-11-14 16:19:25 +07:00
parent 4738553d2e
commit aae3c9d080
30 changed files with 5954 additions and 758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
lib/features/cart/presentation/widgets/cart_item_widget.dart
View File

@@ -1,6 +1,6 @@
/// Cart Item Widget
///
/// Displays a single item in the cart with image, details, and quantity controls.
/// Displays a single item in the cart with checkbox, image, details, and quantity controls.
library;
import 'package:cached_network_image/cached_network_image.dart';
@@ -15,17 +15,68 @@ import 'package:worker/features/cart/presentation/providers/cart_state.dart';
/// Cart Item Widget
///
/// Displays:
/// - Product image (80x80, rounded)
/// - Product name and SKU
/// - Price per unit
/// - Quantity controls (-, value, +, unit label)
class CartItemWidget extends ConsumerWidget {
/// - Checkbox for selection (left side, aligned to top)
/// - Product image (100x100, rounded)
/// - Product name and price
/// - Quantity controls (-, text field for input, +, unit label)
/// - Converted quantity display: "(Quy đổi: X.XX m² = Y viên)"
class CartItemWidget extends ConsumerStatefulWidget {
final CartItemData item;
const CartItemWidget({super.key, required this.item});
@override
Widget build(BuildContext context, WidgetRef ref) {
ConsumerState<CartItemWidget> createState() => _CartItemWidgetState();
}
class _CartItemWidgetState extends ConsumerState<CartItemWidget> {
late TextEditingController _quantityController;
late FocusNode _quantityFocusNode;
@override
void initState() {
super.initState();
_quantityController = TextEditingController(
text: widget.item.quantity.toStringAsFixed(0),
);
_quantityFocusNode = FocusNode();
}
@override
void didUpdateWidget(CartItemWidget oldWidget) {
super.didUpdateWidget(oldWidget);
// Update text field when quantity changes from outside (increment/decrement buttons)
if (widget.item.quantity != oldWidget.item.quantity) {
_quantityController.text = widget.item.quantity.toStringAsFixed(0);
}
}
@override
void dispose() {
_quantityController.dispose();
_quantityFocusNode.dispose();
super.dispose();
}
void _handleQuantitySubmit(String value) {
final newQuantity = double.tryParse(value);
if (newQuantity != null && newQuantity >= 1) {
ref
.read(cartProvider.notifier)
.updateQuantity(widget.item.product.productId, newQuantity);
} else {
// Invalid input, reset to current quantity
_quantityController.text = widget.item.quantity.toStringAsFixed(0);
}
_quantityFocusNode.unfocus();
}
@override
Widget build(BuildContext context) {
final cartState = ref.watch(cartProvider);
final isSelected =
cartState.selectedItems[widget.item.product.productId] ?? false;
final currencyFormatter = NumberFormat.currency(
locale: 'vi_VN',
symbol: 'đ',
@@ -33,8 +84,8 @@ class CartItemWidget extends ConsumerWidget {
);
return Container(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColors.white,
borderRadius: BorderRadius.circular(12),
@@ -49,29 +100,45 @@ class CartItemWidget extends ConsumerWidget {
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Product Image
// Checkbox (aligned to top, ~50px from top to match HTML)
Padding(
padding: const EdgeInsets.only(top: 34),
child: _CustomCheckbox(
value: isSelected,
onChanged: (value) {
ref
.read(cartProvider.notifier)
.toggleSelection(widget.item.product.productId);
},
),
),
const SizedBox(width: 12),
// Product Image (bigger: 100x100)
ClipRRect(
borderRadius: BorderRadius.circular(8),
child: CachedNetworkImage(
imageUrl: item.product.imageUrl,
width: 80,
height: 80,
imageUrl: widget.item.product.thumbnail,
width: 100,
height: 100,
fit: BoxFit.cover,
placeholder: (context, url) => Container(
width: 80,
height: 80,
width: 100,
height: 100,
color: AppColors.grey100,
child: const Center(
child: CircularProgressIndicator(strokeWidth: 2),
),
),
errorWidget: (context, url, error) => Container(
width: 80,
height: 80,
width: 100,
height: 100,
color: AppColors.grey100,
child: const Icon(
Icons.image_not_supported,
color: AppColors.grey500,
size: 32,
),
),
),
@@ -86,9 +153,10 @@ class CartItemWidget extends ConsumerWidget {
children: [
// Product Name
Text(
item.product.name,
widget.item.product.name,
style: AppTypography.titleMedium.copyWith(
fontWeight: FontWeight.w600,
fontSize: 15,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
@@ -96,27 +164,18 @@ class CartItemWidget extends ConsumerWidget {
const SizedBox(height: 4),
// SKU
// Price
Text(
'Mã: ${item.product.erpnextItemCode ?? item.product.productId}',
style: AppTypography.bodySmall.copyWith(
color: AppColors.grey500,
'${currencyFormatter.format(widget.item.product.basePrice)}/${widget.item.product.unit ?? 'm²'}',
style: AppTypography.titleMedium.copyWith(
color: AppColors.primaryBlue,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
const SizedBox(height: 8),
// Price
Text(
'${currencyFormatter.format(item.product.basePrice)}/${item.product.unit ?? 'm²'}',
style: AppTypography.titleMedium.copyWith(
color: AppColors.primaryBlue,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 12),
// Quantity Controls
Row(
children: [
@@ -126,21 +185,57 @@ class CartItemWidget extends ConsumerWidget {
onPressed: () {
ref
.read(cartProvider.notifier)
.decrementQuantity(item.product.productId);
.decrementQuantity(widget.item.product.productId);
},
),
const SizedBox(width: 12),
const SizedBox(width: 8),
// Quantity value
Text(
item.quantity.toStringAsFixed(0),
style: AppTypography.titleMedium.copyWith(
fontWeight: FontWeight.w600,
// Quantity TextField
SizedBox(
width: 50,
height: 32,
child: TextField(
controller: _quantityController,
focusNode: _quantityFocusNode,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
style: AppTypography.titleMedium.copyWith(
fontWeight: FontWeight.w600,
fontSize: 16,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
color: Color(0xFFE0E0E0),
width: 1,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
color: Color(0xFFE0E0E0),
width: 1,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
color: AppColors.primaryBlue,
width: 2,
),
),
),
onSubmitted: _handleQuantitySubmit,
onEditingComplete: () {
_handleQuantitySubmit(_quantityController.text);
},
),
),
const SizedBox(width: 12),
const SizedBox(width: 8),
// Increase button
_QuantityButton(
@@ -148,7 +243,7 @@ class CartItemWidget extends ConsumerWidget {
onPressed: () {
ref
.read(cartProvider.notifier)
.incrementQuantity(item.product.productId);
.incrementQuantity(widget.item.product.productId);
},
),
@@ -156,13 +251,39 @@ class CartItemWidget extends ConsumerWidget {
// Unit label
Text(
item.product.unit ?? 'm²',
widget.item.product.unit ?? 'm²',
style: AppTypography.bodySmall.copyWith(
color: AppColors.grey500,
),
),
],
),
const SizedBox(height: 4),
// Converted Quantity Display
RichText(
text: TextSpan(
style: AppTypography.bodySmall.copyWith(
color: AppColors.grey500,
fontSize: 13,
),
children: [
const TextSpan(text: '(Quy đổi: '),
TextSpan(
text:
'${widget.item.quantityConverted.toStringAsFixed(2)} ${widget.item.product.unit ?? 'm²'}',
style: const TextStyle(fontWeight: FontWeight.bold),
),
const TextSpan(text: ' = '),
TextSpan(
text: '${widget.item.boxes} viên',
style: const TextStyle(fontWeight: FontWeight.bold),
),
const TextSpan(text: ')'),
],
),
),
],
),
),
@@ -172,9 +293,45 @@ class CartItemWidget extends ConsumerWidget {
}
}
/// Custom Checkbox Widget
///
/// Matches HTML design with 20px size, 6px radius, blue when checked.
class _CustomCheckbox extends StatelessWidget {
final bool value;
final ValueChanged<bool?>? onChanged;
const _CustomCheckbox({required this.value, this.onChanged});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => onChanged?.call(!value),
child: Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: value ? AppColors.primaryBlue : AppColors.white,
border: Border.all(
color: value ? AppColors.primaryBlue : const Color(0xFFCBD5E1),
width: 2,
),
borderRadius: BorderRadius.circular(6),
),
child: value
? const Icon(
Icons.check,
size: 14,
color: AppColors.white,
)
: null,
),
);
}
}
/// Quantity Button
///
/// Small circular button for incrementing/decrementing quantity.
/// Small button for incrementing/decrementing quantity.
class _QuantityButton extends StatelessWidget {
final IconData icon;
final VoidCallback onPressed;
@@ -185,15 +342,16 @@ class _QuantityButton extends StatelessWidget {
Widget build(BuildContext context) {
return InkWell(
onTap: onPressed,
borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.circular(6),
child: Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: AppColors.grey100,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: const Color(0xFFE0E0E0), width: 2),
borderRadius: BorderRadius.circular(6),
color: AppColors.white,
),
child: Icon(icon, size: 18, color: AppColors.grey900),
child: Icon(icon, size: 16, color: AppColors.grey900),
),
);
}

103
lib/features/cart/presentation/widgets/order_summary_section.dart
View File

@@ -1,6 +1,7 @@
/// Order Summary Section Widget
///
/// Displays cart items and price breakdown.
/// Displays cart items with conversion details and price breakdown.
/// Matches checkout.html design with product name on line 1, conversion on line 2.
library;
import 'package:flutter/material.dart';
@@ -9,7 +10,7 @@ import 'package:worker/core/theme/colors.dart';
/// Order Summary Section
///
/// Shows order items, subtotal, discount, shipping, and total.
/// Shows order items with conversion details, subtotal, discount, shipping, and total.
class OrderSummarySection extends StatelessWidget {
final List<Map<String, dynamic>> cartItems;
final double subtotal;
@@ -57,8 +58,8 @@ class OrderSummarySection extends StatelessWidget {
const SizedBox(height: AppSpacing.md),
// Cart Items
...cartItems.map((item) => _buildCartItem(item)),
// Cart Items with conversion details
...cartItems.map((item) => _buildCartItemWithConversion(item)),
const Divider(height: 32),
@@ -66,12 +67,12 @@ class OrderSummarySection extends StatelessWidget {
_buildSummaryRow('Tạm tính', subtotal),
const SizedBox(height: 8),
// Discount
_buildSummaryRow('Giảm giá (5%)', -discount, isDiscount: true),
// Member Tier Discount (Diamond 15%)
_buildSummaryRow('Giảm giá Diamond', -discount, isDiscount: true),
const SizedBox(height: 8),
// Shipping
_buildSummaryRow('Phí vận chuyển', shipping),
_buildSummaryRow('Phí vận chuyển', shipping, isFree: shipping == 0),
const Divider(height: 24),
@@ -80,9 +81,9 @@ class OrderSummarySection extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Tổng cộng',
'Tổng thanh toán',
style: TextStyle(
fontSize: 18,
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color(0xFF212121),
),
@@ -90,7 +91,7 @@ class OrderSummarySection extends StatelessWidget {
Text(
_formatCurrency(total),
style: const TextStyle(
fontSize: 20,
fontSize: 18,
fontWeight: FontWeight.bold,
color: AppColors.primaryBlue,
),
@@ -102,39 +103,26 @@ class OrderSummarySection extends StatelessWidget {
);
}
/// Build cart item row
Widget _buildCartItem(Map<String, dynamic> item) {
/// Build cart item with conversion details on two lines
Widget _buildCartItemWithConversion(Map<String, dynamic> item) {
// Mock conversion data (in real app, this comes from CartItemData)
final quantity = item['quantity'] as int;
final quantityM2 = quantity.toDouble(); // User input
final quantityConverted = (quantityM2 * 1.008 * 100).ceil() / 100; // Rounded up
final boxes = (quantityM2 * 2.8).ceil(); // Tiles count
return Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Product Image
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: AppColors.grey100,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
item['image'] as String,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return const Icon(Icons.image, color: AppColors.grey500);
},
),
),
),
const SizedBox(width: 12),
// Product Info
// Product info (left side)
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Line 1: Product name
Text(
item['name'] as String,
style: const TextStyle(
@@ -142,14 +130,15 @@ class OrderSummarySection extends StatelessWidget {
fontWeight: FontWeight.w500,
color: Color(0xFF212121),
),
maxLines: 2,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
// Line 2: Conversion details (muted text)
Text(
'Mã: ${item['sku']}',
'$quantityM2 m² ($boxes viên / ${quantityConverted.toStringAsFixed(2)} m²)',
style: const TextStyle(
fontSize: 12,
fontSize: 13,
color: AppColors.grey500,
),
),
@@ -159,27 +148,16 @@ class OrderSummarySection extends StatelessWidget {
const SizedBox(width: 12),
// Quantity and Price
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'SL: ${item['quantity']}',
style: const TextStyle(fontSize: 13, color: AppColors.grey500),
),
const SizedBox(height: 4),
Text(
_formatCurrency(
((item['price'] as int) * (item['quantity'] as int))
.toDouble(),
),
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.primaryBlue,
),
),
],
// Price (right side)
Text(
_formatCurrency(
((item['price'] as int) * quantityConverted).toDouble(),
),
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Color(0xFF212121),
),
),
],
),
@@ -191,6 +169,7 @@ class OrderSummarySection extends StatelessWidget {
String label,
double amount, {
bool isDiscount = false,
bool isFree = false,
}) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -200,11 +179,11 @@ class OrderSummarySection extends StatelessWidget {
style: const TextStyle(fontSize: 14, color: AppColors.grey500),
),
Text(
_formatCurrency(amount),
isFree ? 'Miễn phí' : _formatCurrency(amount),
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: isDiscount ? AppColors.danger : const Color(0xFF212121),
color: isDiscount ? AppColors.success : const Color(0xFF212121),
),
),
],
@@ -213,6 +192,6 @@ class OrderSummarySection extends StatelessWidget {
/// Format currency
String _formatCurrency(double amount) {
return '${amount.toStringAsFixed(0).replaceAllMapped(RegExp(r'(\d)(?=(\d{3})+(?!\d))'), (Match m) => '${m[1]}.')}₫';
return '${amount.abs().toStringAsFixed(0).replaceAllMapped(RegExp(r'(\d)(?=(\d{3})+(?!\d))'), (Match m) => '${m[1]}.')}đ';
}
}

40
lib/features/cart/presentation/widgets/payment_method_section.dart
View File

@@ -1,6 +1,8 @@
/// Payment Method Section Widget
///
/// Payment method selection (Bank Transfer or COD).
/// Payment method selection with two options:
/// 1. Full payment via bank transfer
/// 2. Partial payment (>=20%, 30 day terms)
library;
import 'package:flutter/material.dart';
@@ -10,7 +12,7 @@ import 'package:worker/core/theme/colors.dart';
/// Payment Method Section
///
/// Allows user to select payment method between bank transfer and COD.
/// Two payment options matching checkout.html design.
class PaymentMethodSection extends HookWidget {
final ValueNotifier<String> paymentMethod;
@@ -47,27 +49,34 @@ class PaymentMethodSection extends HookWidget {
const SizedBox(height: AppSpacing.md),
// Bank Transfer Option
// Full Payment Option
InkWell(
onTap: () => paymentMethod.value = 'bank_transfer',
onTap: () => paymentMethod.value = 'full_payment',
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
Radio<String>(
value: 'bank_transfer',
value: 'full_payment',
groupValue: paymentMethod.value,
onChanged: (value) {
paymentMethod.value = value!;
},
activeColor: AppColors.primaryBlue,
),
const SizedBox(width: 12),
const Icon(
Icons.account_balance_outlined,
color: AppColors.grey500,
size: 24,
),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Chuyển khoản ngân hàng',
'Thanh toán hoàn toàn',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
@@ -75,7 +84,7 @@ class PaymentMethodSection extends HookWidget {
),
SizedBox(height: 4),
Text(
'Thanh toán qua chuyển khoản',
'Thanh toán qua tài khoản ngân hàng',
style: TextStyle(
fontSize: 13,
color: AppColors.grey500,
@@ -91,27 +100,34 @@ class PaymentMethodSection extends HookWidget {
const Divider(height: 1),
// COD Option
// Partial Payment Option
InkWell(
onTap: () => paymentMethod.value = 'cod',
onTap: () => paymentMethod.value = 'partial_payment',
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
Radio<String>(
value: 'cod',
value: 'partial_payment',
groupValue: paymentMethod.value,
onChanged: (value) {
paymentMethod.value = value!;
},
activeColor: AppColors.primaryBlue,
),
const SizedBox(width: 12),
const Icon(
Icons.payments_outlined,
color: AppColors.grey500,
size: 24,
),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Thanh toán khi nhận hàng (COD)',
'Thanh toán một phần',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
@@ -119,7 +135,7 @@ class PaymentMethodSection extends HookWidget {
),
SizedBox(height: 4),
Text(
'Thanh toán bằng tiền mặt khi nhận hàng',
'Trả trước(≥20%), còn lại thanh toán trong vòng 30 ngày',
style: TextStyle(
fontSize: 13,
color: AppColors.grey500,