479 lines
18 KiB
Dart
479 lines
18 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:qpay/screens/groups/models/group_batch_model.dart';
|
|
import 'package:qpay/screens/groups/models/recipient_group_model.dart';
|
|
import 'package:qpay/models/responsive_policy.dart';
|
|
import 'package:qpay/screens/groups/controllers/batch_controller.dart';
|
|
import 'package:qpay/screens/home/home_controller.dart';
|
|
import 'package:qpay/screens/pay/pay_controller.dart';
|
|
import 'package:shared_preferences/shared_preferences.dart';
|
|
|
|
class BatchCreateScreen extends StatefulWidget {
|
|
final RecipientGroup group;
|
|
|
|
const BatchCreateScreen({super.key, required this.group});
|
|
|
|
@override
|
|
State<BatchCreateScreen> createState() => _BatchCreateScreenState();
|
|
}
|
|
|
|
class _BatchCreateScreenState extends State<BatchCreateScreen> {
|
|
late BatchController controller;
|
|
final _formKey = GlobalKey<FormState>();
|
|
final _descriptionController = TextEditingController();
|
|
final _amountController = TextEditingController();
|
|
final _debitPhoneController = TextEditingController();
|
|
String _currency = 'USD';
|
|
bool _loadingDropdowns = true;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
controller = BatchController(context);
|
|
_init();
|
|
}
|
|
|
|
Future<void> _init() async {
|
|
final prefs = await SharedPreferences.getInstance();
|
|
if (prefs.containsKey('phone')) {
|
|
_debitPhoneController.text = prefs.getString('phone')!;
|
|
}
|
|
await Future.wait([controller.loadProviders()]);
|
|
if (mounted) setState(() => _loadingDropdowns = false);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
controller.dispose();
|
|
_descriptionController.dispose();
|
|
_amountController.dispose();
|
|
_debitPhoneController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Future<void> _submit() async {
|
|
if (!_formKey.currentState!.validate()) return;
|
|
|
|
final selectedProvider = controller.model.selectedProvider;
|
|
|
|
if (selectedProvider == null) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text('Please select a bill provider.')),
|
|
);
|
|
return;
|
|
}
|
|
|
|
final amount = double.tryParse(_amountController.text.trim());
|
|
if (amount == null || amount <= 0) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text('Please enter a valid amount.')),
|
|
);
|
|
return;
|
|
}
|
|
|
|
final prefs = await SharedPreferences.getInstance();
|
|
final userId = prefs.getString('userId') ?? '';
|
|
|
|
final transactionTemplate = <String, dynamic>{
|
|
'type': 'CONFIRM',
|
|
'billClientId': selectedProvider.clientId,
|
|
'debitPhone': _debitPhoneController.text.trim(),
|
|
'debitRef': 'Velocity',
|
|
'debitCurrency': _currency,
|
|
'billName': selectedProvider.name,
|
|
'providerImage': selectedProvider.image,
|
|
'providerLabel': selectedProvider.label,
|
|
'creditName': '',
|
|
'creditEmail': '',
|
|
'productUid': '',
|
|
'billProductName': '',
|
|
'region': 'ZW',
|
|
};
|
|
|
|
final req = CreateBatchRequest(
|
|
recipientGroupId: widget.group.id ?? '',
|
|
userId: userId,
|
|
currency: _currency,
|
|
description: _descriptionController.text.trim(),
|
|
amount: amount,
|
|
transactionTemplate: transactionTemplate,
|
|
);
|
|
|
|
final result = await controller.createBatch(req);
|
|
if (!mounted) return;
|
|
|
|
if (result.isSuccess) {
|
|
final batch = result.data!;
|
|
context.pushReplacement('/groups/${widget.group.id}/batches/${batch.id}');
|
|
} else {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(content: Text(result.error ?? 'Failed to create batch.')),
|
|
);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(title: const Text('New Batch'), centerTitle: true),
|
|
body: ListenableBuilder(
|
|
listenable: controller,
|
|
builder: (context, _) {
|
|
if (_loadingDropdowns) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
return Center(
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final width = constraints.maxWidth > ResponsivePolicy.md
|
|
? ResponsivePolicy.md.toDouble()
|
|
: constraints.maxWidth;
|
|
return SizedBox(
|
|
width: width,
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.all(20),
|
|
child: Form(
|
|
key: _formKey,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
_buildSectionLabel('Bill Provider'),
|
|
const SizedBox(height: 8),
|
|
_buildProviderGrid(constraints),
|
|
const SizedBox(height: 16),
|
|
TextFormField(
|
|
controller: _descriptionController,
|
|
textInputAction: TextInputAction.next,
|
|
decoration: InputDecoration(
|
|
labelText: 'Description (optional)',
|
|
hintText: 'e.g. Monthly salaries for January',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
flex: 2,
|
|
child: TextFormField(
|
|
controller: _amountController,
|
|
keyboardType:
|
|
const TextInputType.numberWithOptions(
|
|
decimal: true,
|
|
),
|
|
textInputAction: TextInputAction.next,
|
|
decoration: InputDecoration(
|
|
labelText:
|
|
'Amount each recipient will receive',
|
|
hintText: 'Amount',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
validator: (v) =>
|
|
(v == null || v.trim().isEmpty)
|
|
? 'Required'
|
|
: null,
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: DropdownButtonFormField<String>(
|
|
value: _currency,
|
|
decoration: InputDecoration(
|
|
labelText: 'Currency',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
items: const [
|
|
DropdownMenuItem(
|
|
value: 'USD',
|
|
child: Text('USD'),
|
|
),
|
|
DropdownMenuItem(
|
|
value: 'ZWG',
|
|
child: Text('ZWG'),
|
|
),
|
|
],
|
|
onChanged: (v) {
|
|
if (v != null)
|
|
setState(() => _currency = v);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
TextFormField(
|
|
controller: _debitPhoneController,
|
|
keyboardType: TextInputType.phone,
|
|
textInputAction: TextInputAction.done,
|
|
decoration: InputDecoration(
|
|
labelText: 'Your Phone Number',
|
|
hintText: '263773000000',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
validator: (v) => (v == null || v.trim().isEmpty)
|
|
? 'Phone number is required'
|
|
: null,
|
|
),
|
|
const SizedBox(height: 32),
|
|
ElevatedButton(
|
|
onPressed: controller.model.isActing
|
|
? null
|
|
: _submit,
|
|
style: ElevatedButton.styleFrom(
|
|
padding: const EdgeInsets.symmetric(vertical: 16),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
),
|
|
child: controller.model.isActing
|
|
? const SizedBox(
|
|
height: 20,
|
|
width: 20,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
color: Colors.white,
|
|
),
|
|
)
|
|
: const Text(
|
|
'Create Batch',
|
|
style: TextStyle(fontSize: 16),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildSectionLabel(String text) {
|
|
return Text(
|
|
text,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.grey.shade700,
|
|
),
|
|
);
|
|
}
|
|
|
|
static const Map<String, Color> _categoryColorMap = {
|
|
'ECONET': Color(0xFF1A73E8),
|
|
'NETONE': Color.fromARGB(255, 230, 127, 0),
|
|
'TELECEL': Color(0xFF7B1FA2),
|
|
'ZESA': Color.fromARGB(255, 230, 58, 0),
|
|
};
|
|
|
|
Color _resolveProviderColor(BillProvider provider) {
|
|
final exact = _categoryColorMap[provider.category.toUpperCase()];
|
|
if (exact != null) return exact;
|
|
|
|
final labelMatch = _categoryColorMap[provider.label.toUpperCase()];
|
|
if (labelMatch != null) return labelMatch;
|
|
|
|
final name = provider.name.toUpperCase();
|
|
for (final entry in _categoryColorMap.entries) {
|
|
if (name.contains(entry.key)) return entry.value;
|
|
}
|
|
|
|
final hash = provider.clientId.hashCode;
|
|
final hue = (hash % 360).toDouble();
|
|
return HSVColor.fromAHSV(1.0, hue, 0.75, 0.85).toColor();
|
|
}
|
|
|
|
Widget _buildProviderGrid(BoxConstraints constraints) {
|
|
if (controller.model.providers.isEmpty) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
|
decoration: BoxDecoration(
|
|
border: Border.all(color: Colors.black26),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(
|
|
'No providers available',
|
|
style: TextStyle(color: Colors.grey.shade600),
|
|
),
|
|
);
|
|
}
|
|
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
|
|
return LayoutBuilder(
|
|
builder: (context, gridConstraints) {
|
|
// gridConstraints.maxWidth reflects the actual rendered width of this widget
|
|
// 3-column grid: subtract 2 gaps (10*2 = 20), then divide by 3
|
|
final cardWidth = (gridConstraints.maxWidth - 20) / 3;
|
|
|
|
return Wrap(
|
|
spacing: 10,
|
|
runSpacing: 10,
|
|
children: controller.model.providers
|
|
.map(
|
|
(provider) => _buildProviderCard(provider, isDark, cardWidth),
|
|
)
|
|
.toList(),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget _buildProviderCard(BillProvider provider, bool isDark, double width) {
|
|
final isSelected =
|
|
controller.model.selectedProvider?.clientId == provider.clientId;
|
|
final accent = _resolveProviderColor(provider);
|
|
|
|
return SizedBox(
|
|
width: width,
|
|
child: Material(
|
|
color: Colors.transparent,
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(12),
|
|
onTap: () => controller.selectProvider(provider),
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: isDark ? const Color(0xFF1E1E1E) : Colors.white,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: isSelected
|
|
? accent
|
|
: isDark
|
|
? Colors.white.withValues(alpha: 0.1)
|
|
: Colors.black.withValues(alpha: 0.06),
|
|
width: isSelected ? 1.5 : 1,
|
|
),
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
width: 28,
|
|
height: 28,
|
|
padding: const EdgeInsets.all(2),
|
|
decoration: BoxDecoration(
|
|
color: accent.withValues(alpha: 0.12),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Image(
|
|
image: AssetImage("assets/${provider.image}"),
|
|
errorBuilder: (_, __, ___) => Icon(
|
|
Icons.payment_rounded,
|
|
size: 14,
|
|
color: accent,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
provider.name,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
color: isDark ? Colors.white : Colors.black87,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
provider.description,
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w400,
|
|
color: isDark ? Colors.white54 : Colors.grey.shade500,
|
|
height: 1.3,
|
|
),
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
if (isSelected)
|
|
Positioned(
|
|
top: -2,
|
|
right: -2,
|
|
child: Container(
|
|
width: 18,
|
|
height: 18,
|
|
decoration: BoxDecoration(
|
|
color: accent,
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: isDark
|
|
? const Color(0xFF1E1E1E)
|
|
: Colors.white,
|
|
width: 1.5,
|
|
),
|
|
),
|
|
child: const Icon(
|
|
Icons.check_rounded,
|
|
size: 11,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildProcessorDropdown() {
|
|
if (controller.model.processors.isEmpty) {
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
|
decoration: BoxDecoration(
|
|
border: Border.all(color: Colors.black26),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(
|
|
'No processors available',
|
|
style: TextStyle(color: Colors.grey.shade600),
|
|
),
|
|
);
|
|
}
|
|
return DropdownButtonFormField<PaymentProcessor>(
|
|
value: controller.model.selectedProcessor,
|
|
isExpanded: true,
|
|
decoration: InputDecoration(
|
|
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
|
|
),
|
|
items: controller.model.processors
|
|
.map(
|
|
(p) => DropdownMenuItem(
|
|
value: p,
|
|
child: Text(p.name, overflow: TextOverflow.ellipsis),
|
|
),
|
|
)
|
|
.toList(),
|
|
onChanged: (p) {
|
|
if (p != null) controller.selectProcessor(p);
|
|
},
|
|
);
|
|
}
|
|
}
|