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

add account, checkout page

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-11-03 15:54:51 +07:00
parent d8e3ca4c46
commit c689f967d5
16 changed files with 2319 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
lib/features/cart/presentation/pages/cart_page.dart
View File

@@ -443,12 +443,7 @@ class _CartPageState extends ConsumerState<CartPage> {
child: ElevatedButton(
onPressed: cartState.isNotEmpty
? () {
// TODO: Navigate to checkout page when implemented
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Checkout page chưa được triển khai'),
),
);
context.push(RouteNames.checkout);
}
: null,
child: const Text(

192
lib/features/cart/presentation/pages/checkout_page.dart Normal file
View File

@@ -0,0 +1,192 @@
/// Checkout Page
///
/// Complete checkout flow with delivery info, invoice options, payment methods.
/// Features:
/// - Delivery information form with province/ward dropdowns
/// - Invoice toggle section (checkbox reveals invoice fields)
/// - Payment method selection (bank transfer vs COD)
/// - Order summary with items list
/// - Price negotiation option (hides payment, changes button)
/// - Form validation and submission
library;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/features/cart/presentation/widgets/checkout_submit_button.dart';
import 'package:worker/features/cart/presentation/widgets/delivery_information_section.dart';
import 'package:worker/features/cart/presentation/widgets/invoice_section.dart';
import 'package:worker/features/cart/presentation/widgets/order_summary_section.dart';
import 'package:worker/features/cart/presentation/widgets/payment_method_section.dart';
import 'package:worker/features/cart/presentation/widgets/price_negotiation_section.dart';
/// Checkout Page
///
/// Full checkout flow for placing orders.
class CheckoutPage extends HookConsumerWidget {
const CheckoutPage({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
// Form key for validation
final formKey = useMemoized(() => GlobalKey<FormState>());
// Delivery information controllers
final nameController = useTextEditingController(text: 'Hoàng Minh Hiệp');
final phoneController = useTextEditingController(text: '0347302911');
final addressController = useTextEditingController();
final notesController = useTextEditingController();
// Dropdown selections
final selectedProvince = useState<String?>('TP.HCM');
final selectedWard = useState<String?>('Quận 1');
final selectedPickupDate = useState<DateTime?>(null);
// Invoice section
final needsInvoice = useState<bool>(false);
final companyNameController = useTextEditingController();
final taxIdController = useTextEditingController();
final companyAddressController = useTextEditingController();
final companyEmailController = useTextEditingController();
// Payment method
final paymentMethod = useState<String>('bank_transfer');
// Price negotiation
final needsNegotiation = useState<bool>(false);
// Mock cart items
final cartItems = useState<List<Map<String, dynamic>>>([
{
'id': '1',
'name': 'Gạch Granite 60x60 Marble White',
'sku': 'GT-6060-MW',
'quantity': 20,
'price': 250000,
'image':
'https://images.unsplash.com/photo-1615971677499-5467cbab01c0?w=200',
},
{
'id': '2',
'name': 'Gạch Ceramic 30x60 Wood Effect',
'sku': 'CR-3060-WE',
'quantity': 15,
'price': 180000,
'image':
'https://images.unsplash.com/photo-1604709177225-055f99402ea3?w=200',
},
]);
// Calculate totals
final subtotal = cartItems.value.fold<double>(
0,
(sum, item) => sum + (item['price'] as int) * (item['quantity'] as int),
);
final discount = subtotal * 0.05; // 5% discount
const shipping = 50000.0;
final total = subtotal - discount + shipping;
return Scaffold(
backgroundColor: const Color(0xFFF4F6F8),
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: const Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => context.pop(),
),
title: const Text(
'Thanh toán',
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
centerTitle: false,
actions: const [SizedBox(width: AppSpacing.sm)],
),
body: Form(
key: formKey,
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: AppSpacing.md),
// Delivery Information Section
DeliveryInformationSection(
nameController: nameController,
phoneController: phoneController,
addressController: addressController,
notesController: notesController,
selectedProvince: selectedProvince,
selectedWard: selectedWard,
selectedPickupDate: selectedPickupDate,
),
const SizedBox(height: AppSpacing.md),
// Invoice Section
InvoiceSection(
needsInvoice: needsInvoice,
companyNameController: companyNameController,
taxIdController: taxIdController,
companyAddressController: companyAddressController,
companyEmailController: companyEmailController,
),
const SizedBox(height: AppSpacing.md),
// Payment Method Section (hidden if negotiation is checked)
if (!needsNegotiation.value)
PaymentMethodSection(
paymentMethod: paymentMethod,
),
if (!needsNegotiation.value) const SizedBox(height: AppSpacing.md),
// Order Summary Section
OrderSummarySection(
cartItems: cartItems.value,
subtotal: subtotal,
discount: discount,
shipping: shipping,
total: total,
),
const SizedBox(height: AppSpacing.md),
// Price Negotiation Section
PriceNegotiationSection(
needsNegotiation: needsNegotiation,
),
const SizedBox(height: AppSpacing.md),
// Place Order Button
CheckoutSubmitButton(
formKey: formKey,
needsNegotiation: needsNegotiation.value,
needsInvoice: needsInvoice.value,
name: nameController.text,
phone: phoneController.text,
address: addressController.text,
province: selectedProvince.value,
ward: selectedWard.value,
paymentMethod: paymentMethod.value,
companyName: companyNameController.text,
taxId: taxIdController.text,
total: total,
),
const SizedBox(height: AppSpacing.lg),
],
),
),
),
);
}
}

85
lib/features/cart/presentation/widgets/checkout_date_picker_field.dart Normal file
View File

@@ -0,0 +1,85 @@
/// Checkout Date Picker Field Widget
///
/// Reusable date picker field for checkout forms.
library;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
/// Checkout Date Picker Field
///
/// Date picker field with calendar dialog.
class CheckoutDatePickerField extends HookWidget {
final String label;
final ValueNotifier<DateTime?> selectedDate;
const CheckoutDatePickerField({
super.key,
required this.label,
required this.selectedDate,
});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Ngày nhận hàng mong muốn',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF1E293B),
),
),
const SizedBox(height: 8),
InkWell(
onTap: () async {
final picked = await showDatePicker(
context: context,
initialDate: DateTime.now().add(const Duration(days: 1)),
firstDate: DateTime.now().add(const Duration(days: 1)),
lastDate: DateTime.now().add(const Duration(days: 30)),
);
if (picked != null) {
selectedDate.value = picked;
}
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: const Color(0xFFF8FAFC),
borderRadius: BorderRadius.circular(AppRadius.input),
border: Border.all(color: const Color(0xFFE2E8F0)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
selectedDate.value != null
? _formatDate(selectedDate.value!)
: 'Chọn ngày',
style: TextStyle(
fontSize: 14,
color: selectedDate.value != null
? const Color(0xFF212121)
: AppColors.grey500.withValues(alpha: 0.6),
),
),
const Icon(Icons.calendar_today,
size: 20, color: AppColors.grey500),
],
),
),
),
],
);
}
/// Format date
String _formatDate(DateTime date) {
return '${date.day.toString().padLeft(2, '0')}/${date.month.toString().padLeft(2, '0')}/${date.year}';
}
}

94
lib/features/cart/presentation/widgets/checkout_dropdown_field.dart Normal file
View File

@@ -0,0 +1,94 @@
/// Checkout Dropdown Field Widget
///
/// Reusable dropdown field for checkout forms.
library;
import 'package:flutter/material.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
/// Checkout Dropdown Field
///
/// Styled dropdown field with label and validation.
class CheckoutDropdownField extends StatelessWidget {
final String label;
final String? value;
final bool required;
final List<String> items;
final void Function(String?) onChanged;
const CheckoutDropdownField({
super.key,
required this.label,
required this.value,
required this.required,
required this.items,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
text: label,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF1E293B),
),
children: [
if (required)
const TextSpan(
text: ' *',
style: TextStyle(color: AppColors.danger),
),
],
),
),
const SizedBox(height: 8),
DropdownButtonFormField<String>(
initialValue: value,
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xFFF8FAFC),
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.input),
borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.input),
borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.input),
borderSide: const BorderSide(
color: AppColors.primaryBlue,
width: 2,
),
),
),
items: items.map((item) {
return DropdownMenuItem<String>(
value: item,
child: Text(item),
);
}).toList(),
onChanged: onChanged,
validator: (value) {
if (required && (value == null || value.isEmpty)) {
return 'Vui lòng chọn $label';
}
return null;
},
),
],
);
}
}

124
lib/features/cart/presentation/widgets/checkout_submit_button.dart Normal file
View File

@@ -0,0 +1,124 @@
/// Checkout Submit Button Widget
///
/// Place order or send negotiation request button.
library;
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
/// Checkout Submit Button
///
/// Button that changes based on negotiation checkbox state.
class CheckoutSubmitButton extends StatelessWidget {
final GlobalKey<FormState> formKey;
final bool needsNegotiation;
final bool needsInvoice;
final String name;
final String phone;
final String address;
final String? province;
final String? ward;
final String paymentMethod;
final String companyName;
final String taxId;
final double total;
const CheckoutSubmitButton({
super.key,
required this.formKey,
required this.needsNegotiation,
required this.needsInvoice,
required this.name,
required this.phone,
required this.address,
required this.province,
required this.ward,
required this.paymentMethod,
required this.companyName,
required this.taxId,
required this.total,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
child: Column(
children: [
// Terms Agreement Text
const Text(
'Bằng việc đặt hàng, bạn đồng ý với các điều khoản và điều kiện của chúng tôi',
style: TextStyle(fontSize: 12, color: AppColors.grey500),
textAlign: TextAlign.center,
),
const SizedBox(height: AppSpacing.md),
// Place Order / Send Negotiation Button
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
if (formKey.currentState?.validate() ?? false) {
_handlePlaceOrder(context);
}
},
style: ElevatedButton.styleFrom(
backgroundColor: needsNegotiation
? AppColors.warning
: AppColors.primaryBlue,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 16),
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppRadius.button),
),
),
child: Text(
needsNegotiation ? 'Gửi yêu cầu đàm phán' : 'Đặt hàng',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
),
],
),
);
}
/// Handle place order
void _handlePlaceOrder(BuildContext context) {
// TODO: Implement actual order placement with backend
if (needsNegotiation) {
// Show negotiation request sent message
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Yêu cầu đàm phán giá đã được gửi!'),
backgroundColor: AppColors.success,
duration: Duration(seconds: 2),
),
);
} else {
// Show order success message
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Đặt hàng thành công!'),
backgroundColor: AppColors.success,
duration: Duration(seconds: 2),
),
);
}
// Navigate back after a short delay
Future.delayed(const Duration(milliseconds: 500), () {
if (context.mounted) {
context.pop();
}
});
}
}

101
lib/features/cart/presentation/widgets/checkout_text_field.dart Normal file
View File

@@ -0,0 +1,101 @@
/// Checkout Text Field Widget
///
/// Reusable text field for checkout forms.
library;
import 'package:flutter/material.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
/// Checkout Text Field
///
/// Styled text field with label, validation, and optional features.
class CheckoutTextField extends StatelessWidget {
final String label;
final TextEditingController controller;
final bool required;
final String? hintText;
final int maxLines;
final TextInputType? keyboardType;
final String? Function(String?)? validator;
const CheckoutTextField({
super.key,
required this.label,
required this.controller,
required this.required,
this.hintText,
this.maxLines = 1,
this.keyboardType,
this.validator,
});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
text: label,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF1E293B),
),
children: [
if (required)
const TextSpan(
text: ' *',
style: TextStyle(color: AppColors.danger),
),
],
),
),
const SizedBox(height: 8),
TextFormField(
controller: controller,
maxLines: maxLines,
keyboardType: keyboardType,
validator: validator,
decoration: InputDecoration(
hintText: hintText ?? 'Nhập $label',
hintStyle: TextStyle(
color: AppColors.grey500.withValues(alpha: 0.6),
fontSize: 14,
),
filled: true,
fillColor: const Color(0xFFF8FAFC),
contentPadding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.input),
borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.input),
borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.input),
borderSide: const BorderSide(
color: AppColors.primaryBlue,
width: 2,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.input),
borderSide: const BorderSide(color: AppColors.danger),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.input),
borderSide: const BorderSide(color: AppColors.danger, width: 2),
),
),
),
],
);
}
}

177
lib/features/cart/presentation/widgets/delivery_information_section.dart Normal file
View File

@@ -0,0 +1,177 @@
/// Delivery Information Section Widget
///
/// Form section for delivery details including name, phone, address, pickup date.
library;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/features/cart/presentation/widgets/checkout_date_picker_field.dart';
import 'package:worker/features/cart/presentation/widgets/checkout_dropdown_field.dart';
import 'package:worker/features/cart/presentation/widgets/checkout_text_field.dart';
/// Delivery Information Section
///
/// Collects delivery details from the user with validation.
class DeliveryInformationSection extends HookWidget {
final TextEditingController nameController;
final TextEditingController phoneController;
final TextEditingController addressController;
final TextEditingController notesController;
final ValueNotifier<String?> selectedProvince;
final ValueNotifier<String?> selectedWard;
final ValueNotifier<DateTime?> selectedPickupDate;
const DeliveryInformationSection({
super.key,
required this.nameController,
required this.phoneController,
required this.addressController,
required this.notesController,
required this.selectedProvince,
required this.selectedWard,
required this.selectedPickupDate,
});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(AppRadius.card),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Section Title
const Text(
'Thông tin giao hàng',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Color(0xFF212121),
),
),
const SizedBox(height: AppSpacing.lg),
// Name Field
CheckoutTextField(
label: 'Họ và tên người nhận',
controller: nameController,
required: true,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng nhập họ tên';
}
return null;
},
),
const SizedBox(height: AppSpacing.md),
// Phone Field
CheckoutTextField(
label: 'Số điện thoại',
controller: phoneController,
required: true,
keyboardType: TextInputType.phone,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng nhập số điện thoại';
}
if (!RegExp(r'^0\d{9}$').hasMatch(value)) {
return 'Số điện thoại không hợp lệ';
}
return null;
},
),
const SizedBox(height: AppSpacing.md),
// Province Dropdown
CheckoutDropdownField(
label: 'Tỉnh/Thành phố',
value: selectedProvince.value,
required: true,
items: const [
'TP.HCM',
'Hà Nội',
'Đà Nẵng',
'Cần Thơ',
'Biên Hòa',
],
onChanged: (value) {
selectedProvince.value = value;
},
),
const SizedBox(height: AppSpacing.md),
// Ward Dropdown
CheckoutDropdownField(
label: 'Quận/Huyện',
value: selectedWard.value,
required: true,
items: const [
'Quận 1',
'Quận 2',
'Quận 3',
'Quận 4',
'Quận 5',
'Thủ Đức',
],
onChanged: (value) {
selectedWard.value = value;
},
),
const SizedBox(height: AppSpacing.md),
// Specific Address
CheckoutTextField(
label: 'Địa chỉ cụ thể',
controller: addressController,
required: true,
maxLines: 2,
hintText: 'Số nhà, tên đường, phường/xã',
validator: (value) {
if (value == null || value.isEmpty) {
return 'Vui lòng nhập địa chỉ cụ thể';
}
return null;
},
),
const SizedBox(height: AppSpacing.md),
// Pickup Date
CheckoutDatePickerField(
label: 'Ngày nhận hàng mong muốn',
selectedDate: selectedPickupDate,
),
const SizedBox(height: AppSpacing.md),
// Notes
CheckoutTextField(
label: 'Ghi chú',
controller: notesController,
required: false,
maxLines: 3,
hintText: 'Ghi chú thêm cho đơn hàng (không bắt buộc)',
),
],
),
);
}
}

147
lib/features/cart/presentation/widgets/invoice_section.dart Normal file
View File

@@ -0,0 +1,147 @@
/// Invoice Section Widget
///
/// Optional invoice information form section.
library;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
import 'package:worker/features/cart/presentation/widgets/checkout_text_field.dart';
/// Invoice Section
///
/// Collects invoice/VAT information when checkbox is enabled.
class InvoiceSection extends HookWidget {
final ValueNotifier<bool> needsInvoice;
final TextEditingController companyNameController;
final TextEditingController taxIdController;
final TextEditingController companyAddressController;
final TextEditingController companyEmailController;
const InvoiceSection({
super.key,
required this.needsInvoice,
required this.companyNameController,
required this.taxIdController,
required this.companyAddressController,
required this.companyEmailController,
});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(AppRadius.card),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Invoice Checkbox
Row(
children: [
Checkbox(
value: needsInvoice.value,
onChanged: (value) {
needsInvoice.value = value ?? false;
},
activeColor: AppColors.primaryBlue,
),
const Expanded(
child: Text(
'Xuất hóa đơn VAT',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xFF212121),
),
),
),
],
),
// Invoice Fields (visible when checkbox is checked)
if (needsInvoice.value) ...[
const SizedBox(height: AppSpacing.md),
// Company Name
CheckoutTextField(
label: 'Tên công ty',
controller: companyNameController,
required: true,
validator: (value) {
if (needsInvoice.value && (value == null || value.isEmpty)) {
return 'Vui lòng nhập tên công ty';
}
return null;
},
),
const SizedBox(height: AppSpacing.md),
// Tax ID
CheckoutTextField(
label: 'Mã số thuế',
controller: taxIdController,
required: true,
keyboardType: TextInputType.number,
validator: (value) {
if (needsInvoice.value && (value == null || value.isEmpty)) {
return 'Vui lòng nhập mã số thuế';
}
return null;
},
),
const SizedBox(height: AppSpacing.md),
// Company Address
CheckoutTextField(
label: 'Địa chỉ công ty',
controller: companyAddressController,
required: true,
maxLines: 2,
validator: (value) {
if (needsInvoice.value && (value == null || value.isEmpty)) {
return 'Vui lòng nhập địa chỉ công ty';
}
return null;
},
),
const SizedBox(height: AppSpacing.md),
// Company Email
CheckoutTextField(
label: 'Email nhận hóa đơn',
controller: companyEmailController,
required: true,
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (needsInvoice.value && (value == null || value.isEmpty)) {
return 'Vui lòng nhập email';
}
if (needsInvoice.value &&
!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$')
.hasMatch(value!)) {
return 'Email không hợp lệ';
}
return null;
},
),
],
],
),
);
}
}

215
lib/features/cart/presentation/widgets/order_summary_section.dart Normal file
View File

@@ -0,0 +1,215 @@
/// Order Summary Section Widget
///
/// Displays cart items and price breakdown.
library;
import 'package:flutter/material.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
/// Order Summary Section
///
/// Shows order items, subtotal, discount, shipping, and total.
class OrderSummarySection extends StatelessWidget {
final List<Map<String, dynamic>> cartItems;
final double subtotal;
final double discount;
final double shipping;
final double total;
const OrderSummarySection({
super.key,
required this.cartItems,
required this.subtotal,
required this.discount,
required this.shipping,
required this.total,
});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(AppRadius.card),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Section Title
const Text(
'Tóm tắt đơn hàng',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Color(0xFF212121),
),
),
const SizedBox(height: AppSpacing.md),
// Cart Items
...cartItems.map((item) => _buildCartItem(item)),
const Divider(height: 32),
// Subtotal
_buildSummaryRow('Tạm tính', subtotal),
const SizedBox(height: 8),
// Discount
_buildSummaryRow('Giảm giá (5%)', -discount, isDiscount: true),
const SizedBox(height: 8),
// Shipping
_buildSummaryRow('Phí vận chuyển', shipping),
const Divider(height: 24),
// Total
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
'Tổng cộng',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Color(0xFF212121),
),
),
Text(
_formatCurrency(total),
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: AppColors.primaryBlue,
),
),
],
),
],
),
);
}
/// Build cart item row
Widget _buildCartItem(Map<String, dynamic> item) {
return Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Row(
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
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item['name'] as String,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF212121),
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
Text(
'Mã: ${item['sku']}',
style:
const TextStyle(fontSize: 12, color: AppColors.grey500),
),
],
),
),
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,
),
),
],
),
],
),
);
}
/// Build summary row
Widget _buildSummaryRow(String label, double amount,
{bool isDiscount = false}) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: const TextStyle(fontSize: 14, color: AppColors.grey500),
),
Text(
_formatCurrency(amount),
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: isDiscount ? AppColors.danger : const Color(0xFF212121),
),
),
],
);
}
/// Format currency
String _formatCurrency(double amount) {
return '${amount.toStringAsFixed(0).replaceAllMapped(
RegExp(r'(\d)(?=(\d{3})+(?!\d))'),
(Match m) => '${m[1]}.',
)}₫';
}
}

134
lib/features/cart/presentation/widgets/payment_method_section.dart Normal file
View File

@@ -0,0 +1,134 @@
/// Payment Method Section Widget
///
/// Payment method selection (Bank Transfer or COD).
library;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
/// Payment Method Section
///
/// Allows user to select payment method between bank transfer and COD.
class PaymentMethodSection extends HookWidget {
final ValueNotifier<String> paymentMethod;
const PaymentMethodSection({
super.key,
required this.paymentMethod,
});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(AppRadius.card),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Section Title
const Text(
'Phương thức thanh toán',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Color(0xFF212121),
),
),
const SizedBox(height: AppSpacing.md),
// Bank Transfer Option
InkWell(
onTap: () => paymentMethod.value = 'bank_transfer',
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
Radio<String>(
value: 'bank_transfer',
groupValue: paymentMethod.value,
onChanged: (value) {
paymentMethod.value = value!;
},
activeColor: AppColors.primaryBlue,
),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Chuyển khoản ngân hàng',
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w500),
),
SizedBox(height: 4),
Text(
'Thanh toán qua chuyển khoản',
style:
TextStyle(fontSize: 13, color: AppColors.grey500),
),
],
),
),
],
),
),
),
const Divider(height: 1),
// COD Option
InkWell(
onTap: () => paymentMethod.value = 'cod',
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
children: [
Radio<String>(
value: 'cod',
groupValue: paymentMethod.value,
onChanged: (value) {
paymentMethod.value = value!;
},
activeColor: AppColors.primaryBlue,
),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Thanh toán khi nhận hàng (COD)',
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.w500),
),
SizedBox(height: 4),
Text(
'Thanh toán bằng tiền mặt khi nhận hàng',
style:
TextStyle(fontSize: 13, color: AppColors.grey500),
),
],
),
),
],
),
),
),
],
),
);
}
}

65
lib/features/cart/presentation/widgets/price_negotiation_section.dart Normal file
View File

@@ -0,0 +1,65 @@
/// Price Negotiation Section Widget
///
/// Optional price negotiation checkbox.
library;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';
/// Price Negotiation Section
///
/// Allows user to request price negotiation instead of direct order.
class PriceNegotiationSection extends HookWidget {
final ValueNotifier<bool> needsNegotiation;
const PriceNegotiationSection({
super.key,
required this.needsNegotiation,
});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
color: const Color(0xFFFFF8E1),
borderRadius: BorderRadius.circular(AppRadius.card),
border: Border.all(color: const Color(0xFFFFD54F)),
),
child: Row(
children: [
Checkbox(
value: needsNegotiation.value,
onChanged: (value) {
needsNegotiation.value = value ?? false;
},
activeColor: AppColors.warning,
),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Đàm phán giá',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Color(0xFF212121),
),
),
SizedBox(height: 4),
Text(
'Gửi yêu cầu đàm phán giá cho đơn hàng này',
style: TextStyle(fontSize: 13, color: AppColors.grey500),
),
],
),
),
],
),
);
}
}