512 lines
17 KiB
Dart
512 lines
17 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_animate/flutter_animate.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
|
|
import '../../../core/router/app_router.dart';
|
|
import '../../../core/theme/app_colors.dart';
|
|
import '../../../core/theme/app_dimens.dart';
|
|
import '../../../core/theme/app_typography.dart';
|
|
import '../../../core/utils/extensions.dart';
|
|
import '../../../core/utils/formatters.dart';
|
|
import '../../../core/widgets/glass_card.dart';
|
|
import '../../../core/widgets/numeric_keypad.dart';
|
|
import '../../../core/widgets/primary_button.dart';
|
|
import '../../../domain/entities/transaction.dart';
|
|
import '../../pos/providers/cart_controller.dart';
|
|
import '../providers/payment_controller.dart';
|
|
|
|
class PaymentScreen extends ConsumerStatefulWidget {
|
|
const PaymentScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<PaymentScreen> createState() => _PaymentScreenState();
|
|
}
|
|
|
|
class _PaymentScreenState extends ConsumerState<PaymentScreen> {
|
|
String _cashBuffer = '';
|
|
|
|
void _syncCash() {
|
|
final value = double.tryParse(_cashBuffer) ?? 0;
|
|
ref.read(paymentControllerProvider.notifier).setCashTendered(value);
|
|
}
|
|
|
|
void _appendCash(String d) {
|
|
if (d == '.' && _cashBuffer.contains('.')) return;
|
|
if (_cashBuffer.length >= 8) return;
|
|
setState(() => _cashBuffer += d);
|
|
_syncCash();
|
|
}
|
|
|
|
void _backspaceCash() {
|
|
if (_cashBuffer.isEmpty) return;
|
|
setState(() => _cashBuffer = _cashBuffer.substring(0, _cashBuffer.length - 1));
|
|
_syncCash();
|
|
}
|
|
|
|
void _setCash(double value) {
|
|
setState(() => _cashBuffer = value.toStringAsFixed(0));
|
|
_syncCash();
|
|
}
|
|
|
|
Future<void> _confirm() async {
|
|
final result = await ref.read(paymentControllerProvider.notifier).confirm();
|
|
if (result == null || !mounted) return;
|
|
|
|
// Sale is banked — clear the terminal and show the receipt.
|
|
ref.read(cartControllerProvider.notifier).reset();
|
|
context.go(AppRoutes.receipt, extra: result.transaction);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final cart = ref.watch(cartControllerProvider);
|
|
final state = ref.watch(paymentControllerProvider);
|
|
final controller = ref.read(paymentControllerProvider.notifier);
|
|
|
|
return Scaffold(
|
|
backgroundColor: AppColors.background,
|
|
appBar: AppBar(
|
|
title: const Text('Payment'),
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.arrow_back_rounded),
|
|
onPressed: () => context.pop(),
|
|
),
|
|
),
|
|
body: Padding(
|
|
padding: const EdgeInsets.all(AppSpacing.xxl),
|
|
child: context.isCompact
|
|
? SingleChildScrollView(
|
|
child: Column(children: [
|
|
_amountCard(controller, state),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
_methodsCard(controller, state),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
_tenderCard(controller, state),
|
|
]),
|
|
)
|
|
: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Expanded(
|
|
flex: 4,
|
|
child: Column(children: [
|
|
_amountCard(controller, state),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
Expanded(child: _methodsCard(controller, state)),
|
|
]),
|
|
),
|
|
const SizedBox(width: AppSpacing.lg),
|
|
Expanded(flex: 5, child: _tenderCard(controller, state)),
|
|
],
|
|
),
|
|
),
|
|
bottomNavigationBar: SafeArea(
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(
|
|
AppSpacing.xxl,
|
|
0,
|
|
AppSpacing.xxl,
|
|
AppSpacing.xxl,
|
|
),
|
|
child: Column(mainAxisSize: MainAxisSize.min, children: [
|
|
if (state.error != null) ...[
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(AppSpacing.md),
|
|
margin: const EdgeInsets.only(bottom: AppSpacing.md),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.dangerSurface,
|
|
borderRadius: AppRadius.brSm,
|
|
),
|
|
child: Row(children: [
|
|
const Icon(Icons.error_outline_rounded,
|
|
color: AppColors.danger, size: 18),
|
|
const SizedBox(width: AppSpacing.sm),
|
|
Expanded(
|
|
child: Text(state.error!,
|
|
style: const TextStyle(color: AppColors.danger)),
|
|
),
|
|
]),
|
|
).animate().shake(duration: 300.ms, hz: 3),
|
|
],
|
|
PrimaryButton(
|
|
label: 'Complete Sale',
|
|
icon: Icons.check_circle_outline_rounded,
|
|
large: true,
|
|
tone: ButtonTone.success,
|
|
busy: state.isProcessing,
|
|
onPressed: cart.isEmpty ? null : _confirm,
|
|
trailing: Text(
|
|
Formatters.money(cart.grandTotal),
|
|
style: AppTypography.money(21, color: Colors.white),
|
|
),
|
|
),
|
|
]),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// ------------------------------------------------------------- Sections
|
|
Widget _amountCard(PaymentController controller, PaymentState state) {
|
|
final cart = ref.watch(cartControllerProvider);
|
|
|
|
return GlassCard(
|
|
padding: const EdgeInsets.all(AppSpacing.xxl),
|
|
radius: AppRadius.xl,
|
|
tinted: true,
|
|
child: Column(children: [
|
|
Text('Amount due', style: context.text.labelMedium),
|
|
const SizedBox(height: AppSpacing.xs),
|
|
Text(
|
|
Formatters.money(controller.balanceDue),
|
|
style: AppTypography.money(40, color: AppColors.primary),
|
|
),
|
|
const SizedBox(height: AppSpacing.md),
|
|
Row(mainAxisAlignment: MainAxisAlignment.center, children: [
|
|
_mini('Items', '${cart.lineCount}'),
|
|
_dot(),
|
|
_mini('Bill total', Formatters.money(cart.grandTotal)),
|
|
if (state.settled > 0) ...[
|
|
_dot(),
|
|
_mini('Settled', Formatters.money(state.settled)),
|
|
],
|
|
]),
|
|
]),
|
|
);
|
|
}
|
|
|
|
Widget _methodsCard(PaymentController controller, PaymentState state) {
|
|
return GlassCard(
|
|
padding: const EdgeInsets.all(AppSpacing.xl),
|
|
radius: AppRadius.xl,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Text('Payment method', style: context.text.titleMedium),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
Wrap(
|
|
spacing: AppSpacing.md,
|
|
runSpacing: AppSpacing.md,
|
|
children: PaymentMethod.values
|
|
.where((m) => m != PaymentMethod.loyalty)
|
|
.map((m) => _MethodTile(
|
|
method: m,
|
|
selected: state.activeMethod == m,
|
|
onTap: () {
|
|
setState(() => _cashBuffer = '');
|
|
controller.selectMethod(m);
|
|
},
|
|
))
|
|
.toList(),
|
|
),
|
|
|
|
if (state.splits.isNotEmpty) ...[
|
|
const SizedBox(height: AppSpacing.xl),
|
|
const Divider(),
|
|
const SizedBox(height: AppSpacing.md),
|
|
Row(children: [
|
|
Text('Split tenders', style: context.text.titleSmall),
|
|
const Spacer(),
|
|
TextButton(
|
|
onPressed: controller.clearSplits,
|
|
style: TextButton.styleFrom(
|
|
foregroundColor: AppColors.danger),
|
|
child: const Text('Clear all'),
|
|
),
|
|
]),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
...state.splits.asMap().entries.map((e) => Padding(
|
|
padding: const EdgeInsets.only(bottom: AppSpacing.sm),
|
|
child: Row(children: [
|
|
Text(e.value.method.emoji,
|
|
style: const TextStyle(fontSize: 16)),
|
|
const SizedBox(width: AppSpacing.sm),
|
|
Expanded(child: Text(e.value.method.label)),
|
|
Text(Formatters.money(e.value.amount),
|
|
style: AppTypography.money(14.5)),
|
|
IconButton(
|
|
onPressed: () => controller.removeSplit(e.key),
|
|
icon: const Icon(Icons.close_rounded, size: 17),
|
|
color: AppColors.textTertiary,
|
|
constraints:
|
|
const BoxConstraints(minWidth: 30, minHeight: 30),
|
|
padding: EdgeInsets.zero,
|
|
),
|
|
]),
|
|
)),
|
|
],
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _tenderCard(PaymentController controller, PaymentState state) {
|
|
final isCash = state.activeMethod.needsChange;
|
|
|
|
return GlassCard(
|
|
padding: const EdgeInsets.all(AppSpacing.xl),
|
|
radius: AppRadius.xl,
|
|
child: isCash
|
|
? _cashTender(controller, state)
|
|
: _referenceTender(controller, state),
|
|
);
|
|
}
|
|
|
|
Widget _cashTender(PaymentController controller, PaymentState state) {
|
|
final change = controller.changeDue;
|
|
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Text('Cash received', style: context.text.titleMedium),
|
|
const SizedBox(height: AppSpacing.md),
|
|
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.xl,
|
|
vertical: AppSpacing.lg,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.surfaceAlt,
|
|
borderRadius: AppRadius.brLg,
|
|
border: Border.all(color: AppColors.border),
|
|
),
|
|
child: Row(children: [
|
|
const Text('₹',
|
|
style: TextStyle(fontSize: 24, color: AppColors.textTertiary)),
|
|
const SizedBox(width: AppSpacing.sm),
|
|
Expanded(
|
|
child: Text(
|
|
_cashBuffer.isEmpty ? '0' : _cashBuffer,
|
|
style: AppTypography.money(30),
|
|
),
|
|
),
|
|
]),
|
|
),
|
|
|
|
const SizedBox(height: AppSpacing.md),
|
|
Wrap(
|
|
spacing: AppSpacing.sm,
|
|
runSpacing: AppSpacing.sm,
|
|
children: [
|
|
ActionChip(
|
|
avatar: const Icon(Icons.done_all_rounded, size: 15),
|
|
label: const Text('Exact'),
|
|
onPressed: () => _setCash(controller.balanceDue),
|
|
),
|
|
...[50, 100, 200, 500, 2000].map(
|
|
(note) => ActionChip(
|
|
label: Text('₹$note'),
|
|
onPressed: () => _setCash(
|
|
(double.tryParse(_cashBuffer) ?? 0) + note,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: AppSpacing.lg),
|
|
|
|
AnimatedContainer(
|
|
duration: AppMotion.normal,
|
|
padding: const EdgeInsets.all(AppSpacing.lg),
|
|
decoration: BoxDecoration(
|
|
color: change > 0
|
|
? AppColors.successSurface
|
|
: AppColors.surfaceAlt,
|
|
borderRadius: AppRadius.brMd,
|
|
),
|
|
child: Row(children: [
|
|
Icon(
|
|
change > 0
|
|
? Icons.currency_exchange_rounded
|
|
: Icons.info_outline_rounded,
|
|
size: 19,
|
|
color: change > 0 ? AppColors.success : AppColors.textTertiary,
|
|
),
|
|
const SizedBox(width: AppSpacing.md),
|
|
Text(
|
|
'Change to return',
|
|
style: TextStyle(
|
|
fontWeight: FontWeight.w600,
|
|
color: change > 0
|
|
? AppColors.success
|
|
: AppColors.textSecondary,
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Text(
|
|
Formatters.money(change),
|
|
style: AppTypography.money(
|
|
22,
|
|
color: change > 0 ? AppColors.success : AppColors.textTertiary,
|
|
),
|
|
),
|
|
]),
|
|
),
|
|
|
|
const SizedBox(height: AppSpacing.lg),
|
|
Center(
|
|
child: NumericKeypad(
|
|
allowDecimal: true,
|
|
maxWidth: 330,
|
|
onKey: _appendCash,
|
|
onBackspace: _backspaceCash,
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: AppSpacing.md),
|
|
OutlinedButton.icon(
|
|
onPressed: controller.balanceDue > 0
|
|
? () {
|
|
controller.addSplit(
|
|
amount: (double.tryParse(_cashBuffer) ?? 0)
|
|
.clamp(0, controller.balanceDue)
|
|
.toDouble(),
|
|
);
|
|
setState(() => _cashBuffer = '');
|
|
}
|
|
: null,
|
|
icon: const Icon(Icons.call_split_rounded, size: 17),
|
|
label: const Text('Add as split payment'),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _referenceTender(PaymentController controller, PaymentState state) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
Row(children: [
|
|
Text(state.activeMethod.emoji, style: const TextStyle(fontSize: 22)),
|
|
const SizedBox(width: AppSpacing.sm),
|
|
Text('${state.activeMethod.label} payment',
|
|
style: context.text.titleMedium),
|
|
]),
|
|
const SizedBox(height: AppSpacing.xxl),
|
|
|
|
Center(
|
|
child: Column(children: [
|
|
Container(
|
|
width: 120,
|
|
height: 120,
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primarySurface,
|
|
borderRadius: AppRadius.brXl,
|
|
),
|
|
alignment: Alignment.center,
|
|
child: Text(state.activeMethod.emoji,
|
|
style: const TextStyle(fontSize: 52)),
|
|
),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
Text(
|
|
'Charge ${Formatters.money(controller.balanceDue)} '
|
|
'on the ${state.activeMethod.label.toLowerCase()} terminal',
|
|
textAlign: TextAlign.center,
|
|
style: context.text.bodyMedium,
|
|
),
|
|
]),
|
|
),
|
|
|
|
const SizedBox(height: AppSpacing.xxl),
|
|
if (state.activeMethod.needsReference)
|
|
TextField(
|
|
onChanged: controller.setReference,
|
|
decoration: InputDecoration(
|
|
labelText: switch (state.activeMethod) {
|
|
PaymentMethod.card => 'Approval code',
|
|
PaymentMethod.upi => 'UPI transaction ID',
|
|
PaymentMethod.giftCard => 'Gift card number',
|
|
_ => 'Reference',
|
|
},
|
|
prefixIcon: const Icon(Icons.tag_rounded),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: AppSpacing.xxxl),
|
|
OutlinedButton.icon(
|
|
onPressed: controller.balanceDue > 0
|
|
? () => controller.addSplit()
|
|
: null,
|
|
icon: const Icon(Icons.call_split_rounded, size: 17),
|
|
label: const Text('Add as split payment'),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _mini(String label, String value) => Column(children: [
|
|
Text(label,
|
|
style: const TextStyle(
|
|
fontSize: 11,
|
|
color: AppColors.textSecondary,
|
|
)),
|
|
Text(value,
|
|
style: AppTypography.money(14, weight: FontWeight.w600)),
|
|
]);
|
|
|
|
Widget _dot() => Container(
|
|
width: 3,
|
|
height: 3,
|
|
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.lg),
|
|
decoration: const BoxDecoration(
|
|
color: AppColors.textTertiary,
|
|
shape: BoxShape.circle,
|
|
),
|
|
);
|
|
}
|
|
|
|
class _MethodTile extends StatelessWidget {
|
|
const _MethodTile({
|
|
required this.method,
|
|
required this.selected,
|
|
required this.onTap,
|
|
});
|
|
|
|
final PaymentMethod method;
|
|
final bool selected;
|
|
final VoidCallback onTap;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Material(
|
|
color: selected ? AppColors.primary : AppColors.surfaceAlt,
|
|
borderRadius: AppRadius.brMd,
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
borderRadius: AppRadius.brMd,
|
|
child: AnimatedContainer(
|
|
duration: AppMotion.fast,
|
|
width: 118,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.lg,
|
|
),
|
|
decoration: BoxDecoration(
|
|
borderRadius: AppRadius.brMd,
|
|
border: Border.all(
|
|
color: selected ? AppColors.primary : AppColors.border,
|
|
),
|
|
),
|
|
child: Column(children: [
|
|
Text(method.emoji, style: const TextStyle(fontSize: 24)),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
Text(
|
|
method.label,
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w600,
|
|
color: selected ? Colors.white : AppColors.textPrimary,
|
|
),
|
|
),
|
|
]),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|