397 lines
14 KiB
Dart
397 lines
14 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
|
|
import '../../../app/providers.dart';
|
|
import '../../../core/constants/app_constants.dart';
|
|
import '../../../core/theme/app_colors.dart';
|
|
import '../../../core/theme/app_dimens.dart';
|
|
import '../../../core/theme/app_typography.dart';
|
|
import '../../../core/widgets/numeric_keypad.dart';
|
|
import '../../../core/widgets/primary_button.dart';
|
|
import '../../../domain/entities/customer.dart';
|
|
import '../../pos/providers/cart_controller.dart';
|
|
import '../providers/customer_providers.dart';
|
|
|
|
/// Attaches a customer to the current bill.
|
|
///
|
|
/// A mobile number, optionally a name, or skip. Nothing else — no lookup
|
|
/// result to read, no tier, no points balance. Those were a screenful of
|
|
/// information nobody at a counter acts on, in front of a queue, for a step
|
|
/// that is optional in the first place.
|
|
///
|
|
/// The lookup still happens; it just does not show. On save the number is
|
|
/// matched against what the terminal already holds, so a returning shopper is
|
|
/// attached to their existing record rather than duplicated — the loyalty
|
|
/// figures stay correct, they simply are not read out at the till.
|
|
Future<void> showCustomerCaptureSheet(BuildContext context) {
|
|
return showModalBottomSheet<void>(
|
|
context: context,
|
|
isScrollControlled: true,
|
|
backgroundColor: Colors.transparent,
|
|
builder: (_) => const _CustomerCaptureSheet(),
|
|
);
|
|
}
|
|
|
|
class _CustomerCaptureSheet extends ConsumerStatefulWidget {
|
|
const _CustomerCaptureSheet();
|
|
|
|
@override
|
|
ConsumerState<_CustomerCaptureSheet> createState() =>
|
|
_CustomerCaptureSheetState();
|
|
}
|
|
|
|
class _CustomerCaptureSheetState extends ConsumerState<_CustomerCaptureSheet> {
|
|
String _digits = '';
|
|
final _name = TextEditingController();
|
|
bool _saving = false;
|
|
String? _error;
|
|
|
|
bool get _complete => _digits.length == AppConstants.mobileNumberLength;
|
|
|
|
@override
|
|
void dispose() {
|
|
_name.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _append(String d) {
|
|
if (_digits.length >= AppConstants.mobileNumberLength) return;
|
|
setState(() {
|
|
_digits += d;
|
|
_error = null;
|
|
});
|
|
}
|
|
|
|
void _backspace() {
|
|
if (_digits.isEmpty) return;
|
|
setState(() {
|
|
_digits = _digits.substring(0, _digits.length - 1);
|
|
_error = null;
|
|
});
|
|
}
|
|
|
|
void _clear() {
|
|
setState(() {
|
|
_digits = '';
|
|
_error = null;
|
|
});
|
|
}
|
|
|
|
void _attachAndClose(Customer? customer) {
|
|
ref.read(cartControllerProvider.notifier).attachCustomer(customer);
|
|
Navigator.of(context).pop();
|
|
}
|
|
|
|
/// Saves with whatever was given.
|
|
///
|
|
/// The name is optional: a bare number is still worth keeping, because it is
|
|
/// what the WhatsApp bill is sent to. An existing record wins over creating a
|
|
/// second one — silently, because a cashier does not need to be told the
|
|
/// shopper has been here before to finish the sale.
|
|
Future<void> _save() async {
|
|
if (!_complete) return;
|
|
|
|
setState(() {
|
|
_saving = true;
|
|
_error = null;
|
|
});
|
|
|
|
final typed = _name.text.trim();
|
|
final repository = ref.read(customerRepositoryProvider);
|
|
|
|
try {
|
|
final existing = await repository.findByMobile(_digits);
|
|
if (existing != null) {
|
|
if (mounted) _attachAndClose(existing);
|
|
return;
|
|
}
|
|
|
|
final created = await repository.create(
|
|
Customer(
|
|
id: '',
|
|
name: typed.isEmpty
|
|
? 'Customer ${_digits.substring(_digits.length - 4)}'
|
|
: typed,
|
|
mobile: _digits,
|
|
),
|
|
);
|
|
ref.invalidate(recentCustomersProvider);
|
|
if (mounted) _attachAndClose(created);
|
|
} catch (e) {
|
|
if (!mounted) return;
|
|
setState(() {
|
|
_saving = false;
|
|
_error = e is StateError ? e.message : 'Could not save customer.';
|
|
});
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final attached = ref.watch(
|
|
cartControllerProvider.select((c) => c.customer),
|
|
);
|
|
|
|
return Padding(
|
|
padding: EdgeInsets.only(bottom: MediaQuery.viewInsetsOf(context).bottom),
|
|
child: Container(
|
|
constraints: BoxConstraints(
|
|
maxHeight: MediaQuery.sizeOf(context).height * 0.9,
|
|
),
|
|
decoration: const BoxDecoration(
|
|
color: AppColors.surface,
|
|
borderRadius:
|
|
BorderRadius.vertical(top: Radius.circular(AppRadius.xxl)),
|
|
),
|
|
child: SafeArea(
|
|
top: false,
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
_grabber(),
|
|
// Capped and centred. A modal sheet on a 27-inch till used to run
|
|
// the full width of the screen, which put the keypad and the save
|
|
// button at opposite ends of the desk.
|
|
Flexible(
|
|
child: Center(
|
|
child: ConstrainedBox(
|
|
constraints: const BoxConstraints(maxWidth: 640),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
_header(attached),
|
|
const Divider(height: 1),
|
|
Flexible(
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.fromLTRB(
|
|
AppSpacing.xxl,
|
|
AppSpacing.xl,
|
|
AppSpacing.xxl,
|
|
AppSpacing.xxl,
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
_display(),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
Text(
|
|
_complete
|
|
? 'Ready to save'
|
|
: '${AppConstants.mobileNumberLength - _digits.length}'
|
|
' more digit(s)',
|
|
textAlign: TextAlign.center,
|
|
style: const TextStyle(
|
|
fontSize: 11.5,
|
|
color: AppColors.textTertiary,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
Center(
|
|
child: NumericKeypad(
|
|
maxWidth: 320,
|
|
onKey: _append,
|
|
onBackspace: _backspace,
|
|
onClear: _clear,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.lg),
|
|
TextField(
|
|
controller: _name,
|
|
textCapitalization:
|
|
TextCapitalization.words,
|
|
enabled: !_saving,
|
|
onSubmitted: (_) => _save(),
|
|
inputFormatters: [
|
|
LengthLimitingTextInputFormatter(60),
|
|
],
|
|
decoration: const InputDecoration(
|
|
labelText: 'Customer name',
|
|
hintText: 'Optional',
|
|
prefixIcon:
|
|
Icon(Icons.person_outline_rounded),
|
|
),
|
|
),
|
|
if (_error != null) ...[
|
|
const SizedBox(height: AppSpacing.sm),
|
|
Text(
|
|
_error!,
|
|
style: const TextStyle(
|
|
color: AppColors.danger,
|
|
fontSize: 12.5,
|
|
),
|
|
),
|
|
],
|
|
const SizedBox(height: AppSpacing.lg),
|
|
PrimaryButton(
|
|
label: 'Save & use',
|
|
icon: Icons.check_rounded,
|
|
large: true,
|
|
busy: _saving,
|
|
onPressed: _complete ? _save : null,
|
|
),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
PrimaryButton(
|
|
label: 'Skip',
|
|
tone: ButtonTone.neutral,
|
|
onPressed:
|
|
_saving ? null : () => _attachAndClose(null),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _grabber() => Container(
|
|
width: 40,
|
|
height: 4,
|
|
margin: const EdgeInsets.symmetric(vertical: AppSpacing.md),
|
|
decoration: const BoxDecoration(
|
|
color: AppColors.border,
|
|
borderRadius: AppRadius.brPill,
|
|
),
|
|
);
|
|
|
|
Widget _header(Customer? attached) => Padding(
|
|
padding: const EdgeInsets.fromLTRB(
|
|
AppSpacing.xxl,
|
|
0,
|
|
AppSpacing.lg,
|
|
AppSpacing.lg,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primarySurface,
|
|
borderRadius: AppRadius.brSm,
|
|
border: Border.all(color: AppColors.primaryBorder),
|
|
),
|
|
child: const Icon(Icons.person_add_alt_1_outlined,
|
|
size: 20, color: AppColors.primary,),
|
|
),
|
|
const SizedBox(width: AppSpacing.md),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
attached == null ? 'Add customer' : 'Change customer',
|
|
overflow: TextOverflow.ellipsis,
|
|
style: const TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
letterSpacing: -0.3,
|
|
color: AppColors.textPrimary,
|
|
height: 1.2,
|
|
),
|
|
),
|
|
const Text(
|
|
'Optional — the bill can be sent to this number',
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontSize: 12.5,
|
|
color: AppColors.textSecondary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(width: AppSpacing.sm),
|
|
IconButton(
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
icon: const Icon(Icons.close_rounded),
|
|
color: AppColors.textTertiary,
|
|
tooltip: 'Close',
|
|
),
|
|
],
|
|
),
|
|
);
|
|
|
|
/// The number as it is keyed, grouped 5 + 5 the way it is read aloud.
|
|
Widget _display() {
|
|
final filled = _digits.isNotEmpty;
|
|
final head = _digits.length <= 5 ? _digits : _digits.substring(0, 5);
|
|
final tail = _digits.length <= 5 ? '' : _digits.substring(5);
|
|
|
|
return Container(
|
|
height: 64,
|
|
padding: const EdgeInsets.only(left: AppSpacing.md, right: AppSpacing.xs),
|
|
decoration: BoxDecoration(
|
|
color: filled ? AppColors.surface : AppColors.surfaceAlt,
|
|
borderRadius: AppRadius.brLg,
|
|
border: Border.all(
|
|
color: filled ? AppColors.primary : AppColors.border,
|
|
width: filled ? 1.4 : 1,
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.sm,
|
|
vertical: 3,
|
|
),
|
|
decoration: const BoxDecoration(
|
|
color: AppColors.surfaceAlt,
|
|
borderRadius: AppRadius.brXs,
|
|
),
|
|
child: const Text(
|
|
'+91',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w700,
|
|
color: AppColors.textSecondary,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: AppSpacing.md),
|
|
Expanded(
|
|
child: FittedBox(
|
|
fit: BoxFit.scaleDown,
|
|
alignment: Alignment.centerLeft,
|
|
child: filled
|
|
? Text(
|
|
tail.isEmpty ? head : '$head $tail',
|
|
style: AppTypography.money(23).copyWith(
|
|
letterSpacing: 1.5,
|
|
color: AppColors.textPrimary,
|
|
),
|
|
)
|
|
: Text(
|
|
'Mobile number',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
color: AppColors.textTertiary.withValues(alpha: 0.9),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
if (filled)
|
|
IconButton(
|
|
onPressed: _clear,
|
|
icon: const Icon(Icons.backspace_outlined, size: 18),
|
|
color: AppColors.textTertiary,
|
|
tooltip: 'Clear',
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|