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

fix

Browse Source
This commit is contained in:
Phuoc Nguyen
2025-11-18 17:59:27 +07:00
parent 0dda402246
commit fc4711a18e
8 changed files with 568 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
lib/features/cart/presentation/pages/checkout_page.dart
View File

@@ -17,6 +17,7 @@ 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/account/domain/entities/address.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';
@@ -35,23 +36,13 @@ class CheckoutPage extends HookConsumerWidget {
// 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();
// Delivery information
final notesController = useTextEditingController();
// Dropdown selections
final selectedProvince = useState<String?>('TP.HCM');
final selectedWard = useState<String?>('Quận 1');
final selectedPickupDate = useState<DateTime?>(null);
final selectedAddress = useState<Address?>(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>('full_payment');
@@ -96,7 +87,11 @@ class CheckoutPage extends HookConsumerWidget {
backgroundColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: const FaIcon(FontAwesomeIcons.arrowLeft, color: Colors.black, size: 20),
icon: const FaIcon(
FontAwesomeIcons.arrowLeft,
color: Colors.black,
size: 20,
),
onPressed: () => context.pop(),
),
title: const Text(
@@ -119,25 +114,15 @@ class CheckoutPage extends HookConsumerWidget {
// Delivery Information Section
DeliveryInformationSection(
nameController: nameController,
phoneController: phoneController,
addressController: addressController,
notesController: notesController,
selectedProvince: selectedProvince,
selectedWard: selectedWard,
selectedPickupDate: selectedPickupDate,
selectedAddress: selectedAddress,
),
const SizedBox(height: AppSpacing.md),
// Invoice Section
InvoiceSection(
needsInvoice: needsInvoice,
companyNameController: companyNameController,
taxIdController: taxIdController,
companyAddressController: companyAddressController,
companyEmailController: companyEmailController,
),
InvoiceSection(needsInvoice: needsInvoice),
const SizedBox(height: AppSpacing.md),
@@ -169,14 +154,8 @@ class CheckoutPage extends HookConsumerWidget {
formKey: formKey,
needsNegotiation: needsNegotiation.value,
needsInvoice: needsInvoice.value,
name: nameController.text,
phone: phoneController.text,
address: addressController.text,
province: selectedProvince.value,
ward: selectedWard.value,
selectedAddress: selectedAddress.value,
paymentMethod: paymentMethod.value,
companyName: companyNameController.text,
taxId: taxIdController.text,
total: total,
),

41
lib/features/cart/presentation/widgets/checkout_submit_button.dart
View File

@@ -9,40 +9,29 @@ import 'package:go_router/go_router.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/router/app_router.dart';
import 'package:worker/core/theme/colors.dart';
import 'package:worker/features/account/domain/entities/address.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.selectedAddress,
required this.paymentMethod,
required this.companyName,
required this.taxId,
required this.total,
});
final GlobalKey<FormState> formKey;
final bool needsNegotiation;
final bool needsInvoice;
final Address? selectedAddress;
final String paymentMethod;
final double total;
@override
Widget build(BuildContext context) {
return Padding(
@@ -63,6 +52,18 @@ class CheckoutSubmitButton extends StatelessWidget {
width: double.infinity,
child: ElevatedButton(
onPressed: () {
// Validate address is selected
if (selectedAddress == null) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Vui lòng chọn địa chỉ giao hàng'),
backgroundColor: AppColors.danger,
duration: Duration(seconds: 2),
),
);
return;
}
if (formKey.currentState?.validate() ?? false) {
_handlePlaceOrder(context);
}

291
lib/features/cart/presentation/widgets/delivery_information_section.dart
View File

@@ -1,40 +1,55 @@
/// Delivery Information Section Widget
///
/// Form section for delivery details including name, phone, address, pickup date.
/// Shows delivery address selection and pickup date/notes.
library;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.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/core/theme/colors.dart';
import 'package:worker/features/account/domain/entities/address.dart';
import 'package:worker/features/account/presentation/providers/address_provider.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;
/// Shows default address selection and delivery details.
/// Matches HTML design from checkout.html.
class DeliveryInformationSection extends HookConsumerWidget {
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,
required this.selectedAddress,
});
final TextEditingController notesController;
final ValueNotifier<DateTime?> selectedPickupDate;
final ValueNotifier<Address?> selectedAddress;
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
// Watch the default address
final defaultAddr = ref.watch(defaultAddressProvider);
// Initialize selected address with default address when it loads
// Only update if user hasn't manually selected a different address
useEffect(() {
if (defaultAddr != null && selectedAddress.value == null) {
// Use Future.microtask to avoid setState during build
Future.microtask(() {
if (selectedAddress.value == null) {
selectedAddress.value = defaultAddr;
}
});
}
return null;
}, [defaultAddr]); // Watch defaultAddr changes
return Container(
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
padding: const EdgeInsets.all(AppSpacing.md),
@@ -53,104 +68,166 @@ class DeliveryInformationSection extends HookWidget {
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',
Row(
children: [
const FaIcon(
FontAwesomeIcons.truck,
color: AppColors.primaryBlue,
size: 16,
),
const SizedBox(width: AppSpacing.sm),
const Text(
'Thông tin giao hàng',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xFF212121),
),
),
],
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;
},
// Address Selection
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Địa chỉ nhận hàng',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: Color(0xFF424242),
),
),
const SizedBox(height: AppSpacing.sm),
// Address Card
if (selectedAddress.value != null)
InkWell(
onTap: () async {
// Navigate to address selection and wait for result
final result = await context.push<Address>(
'/account/addresses',
extra: {
'selectMode': true,
'currentAddress': selectedAddress.value,
},
);
// Update selected address if user picked one
if (result != null) {
selectedAddress.value = result;
}
},
borderRadius: BorderRadius.circular(AppRadius.sm),
child: Container(
padding: const EdgeInsets.all(AppSpacing.sm),
decoration: BoxDecoration(
border: Border.all(color: const Color(0xFFE0E0E0)),
borderRadius: BorderRadius.circular(AppRadius.sm),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Name
Text(
selectedAddress.value!.addressTitle,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Color(0xFF212121),
),
),
const SizedBox(height: 4),
// Phone
Text(
selectedAddress.value!.phone,
style: const TextStyle(
fontSize: 12,
color: Color(0xFF757575),
),
),
const SizedBox(height: 2),
// Address
Text(
selectedAddress.value!.fullAddress,
style: const TextStyle(
fontSize: 12,
color: Color(0xFF757575),
),
),
],
),
),
const SizedBox(width: AppSpacing.sm),
const FaIcon(
FontAwesomeIcons.chevronRight,
size: 14,
color: Color(0xFF9E9E9E),
),
],
),
),
)
else
// No address selected - show add button
InkWell(
onTap: () async {
final result = await context.push<Address>(
'/account/addresses',
extra: {'selectMode': true, 'currentAddress': null},
);
if (result != null) {
selectedAddress.value = result;
}
},
borderRadius: BorderRadius.circular(AppRadius.sm),
child: Container(
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
border: Border.all(
color: AppColors.primaryBlue,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.circular(AppRadius.sm),
),
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FaIcon(
FontAwesomeIcons.plus,
size: 14,
color: AppColors.primaryBlue,
),
SizedBox(width: AppSpacing.sm),
Text(
'Thêm địa chỉ giao hàng',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.primaryBlue,
),
),
],
),
),
),
],
),
const SizedBox(height: AppSpacing.md),
// Pickup Date
CheckoutDatePickerField(
label: 'Ngày nhận hàng mong muốn',
label: 'Ngày lấy hàng',
selectedDate: selectedPickupDate,
),
@@ -161,8 +238,8 @@ class DeliveryInformationSection extends HookWidget {
label: 'Ghi chú',
controller: notesController,
required: false,
maxLines: 3,
hintText: 'Ghi chú thêm cho đơn hàng (không bắt buộc)',
maxLines: 2,
hintText: 'Ví dụ: Thời gian yêu cầu giao hàng, lưu ý đặc biệt...',
),
],
),

241
lib/features/cart/presentation/widgets/invoice_section.dart
View File

@@ -1,35 +1,30 @@
/// Invoice Section Widget
///
/// Optional invoice information form section.
/// Optional invoice information section with address selection.
library;
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.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/core/theme/colors.dart';
import 'package:worker/features/cart/presentation/widgets/checkout_text_field.dart';
import 'package:worker/features/account/presentation/providers/address_provider.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;
/// Shows invoice toggle and default address when enabled.
/// Matches HTML design from checkout.html.
class InvoiceSection extends HookConsumerWidget {
const InvoiceSection({super.key, required this.needsInvoice});
const InvoiceSection({
super.key,
required this.needsInvoice,
required this.companyNameController,
required this.taxIdController,
required this.companyAddressController,
required this.companyEmailController,
});
final ValueNotifier<bool> needsInvoice;
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
// Watch the default address
final defaultAddr = ref.watch(defaultAddressProvider);
return Container(
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
padding: const EdgeInsets.all(AppSpacing.md),
@@ -47,19 +42,18 @@ class InvoiceSection extends HookWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Invoice Checkbox
// Header with Toggle
Row(
children: [
Checkbox(
value: needsInvoice.value,
onChanged: (value) {
needsInvoice.value = value ?? false;
},
activeColor: AppColors.primaryBlue,
const FaIcon(
FontAwesomeIcons.fileInvoice,
color: AppColors.primaryBlue,
size: 16,
),
const SizedBox(width: AppSpacing.sm),
const Expanded(
child: Text(
'Xuất hóa đơn VAT',
'Phát hành hóa đơn',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
@@ -67,79 +61,148 @@ class InvoiceSection extends HookWidget {
),
),
),
// Toggle Switch
Switch(
value: needsInvoice.value,
onChanged: (value) {
needsInvoice.value = value;
},
activeTrackColor: AppColors.primaryBlue,
),
],
),
// Invoice Fields (visible when checkbox is checked)
// Invoice Information (visible when toggle is ON)
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 Divider(color: Color(0xFFE0E0E0)),
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;
},
),
// Address Card
if (defaultAddr != null)
InkWell(
onTap: () {
// Navigate to addresses page for selection
context.push('/account/addresses');
},
borderRadius: BorderRadius.circular(AppRadius.sm),
child: Container(
padding: const EdgeInsets.all(AppSpacing.sm),
decoration: BoxDecoration(
border: Border.all(color: const Color(0xFFE0E0E0)),
borderRadius: BorderRadius.circular(AppRadius.sm),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Company/Address Title
Text(
defaultAddr.addressTitle,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Color(0xFF212121),
),
),
const SizedBox(height: 4),
const SizedBox(height: AppSpacing.md),
// Tax Code (if available)
if (defaultAddr.taxCode != null &&
defaultAddr.taxCode!.isNotEmpty) ...[
Text(
'Mã số thuế: ${defaultAddr.taxCode}',
style: const TextStyle(
fontSize: 12,
color: Color(0xFF757575),
),
),
const SizedBox(height: 2),
],
// 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;
},
),
// Phone
Text(
'Số điện thoại: ${defaultAddr.phone}',
style: const TextStyle(
fontSize: 12,
color: Color(0xFF757575),
),
),
const SizedBox(height: 2),
const SizedBox(height: AppSpacing.md),
// Email (if available)
if (defaultAddr.email != null &&
defaultAddr.email!.isNotEmpty) ...[
Text(
'Email: ${defaultAddr.email}',
style: const TextStyle(
fontSize: 12,
color: Color(0xFF757575),
),
),
const SizedBox(height: 2),
],
// 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;
},
),
// Address
Text(
'Địa chỉ: ${defaultAddr.fullAddress}',
style: const TextStyle(
fontSize: 12,
color: Color(0xFF757575),
),
),
],
),
),
const SizedBox(width: AppSpacing.sm),
const FaIcon(
FontAwesomeIcons.chevronRight,
size: 14,
color: Color(0xFF9E9E9E),
),
],
),
),
)
else
// No default address - show button to add
InkWell(
onTap: () {
context.push('/account/addresses');
},
borderRadius: BorderRadius.circular(AppRadius.sm),
child: Container(
padding: const EdgeInsets.all(AppSpacing.md),
decoration: BoxDecoration(
border: Border.all(
color: AppColors.primaryBlue,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.circular(AppRadius.sm),
),
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FaIcon(
FontAwesomeIcons.plus,
size: 14,
color: AppColors.primaryBlue,
),
SizedBox(width: AppSpacing.sm),
Text(
'Thêm địa chỉ xuất hóa đơn',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.primaryBlue,
),
),
],
),
),
),
],
],
),