payment
This commit is contained in:
efrilm
@@ -0,0 +1,103 @@
|
||||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
|
||||
import '../../../application/payment/payment_form/payment_form_bloc.dart';
|
||||
import '../../../application/payment_method/payment_method_loader/payment_method_loader_bloc.dart';
|
||||
import '../../../common/theme/theme.dart';
|
||||
import '../../../domain/order/order.dart';
|
||||
import '../../../injection.dart';
|
||||
import '../../components/spaces/space.dart';
|
||||
import '../../components/toast/flushbar.dart';
|
||||
import 'widgets/payment_left_panel.dart';
|
||||
import 'widgets/payment_right_panel.dart';
|
||||
|
||||
@RoutePage()
|
||||
class PaymentPage extends StatelessWidget implements AutoRouteWrapper {
|
||||
final Order order;
|
||||
const PaymentPage({super.key, required this.order});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return BlocListener<PaymentFormBloc, PaymentFormState>(
|
||||
listenWhen: (p, c) => p.failureOrPayment != c.failureOrPayment,
|
||||
listener: (context, state) {
|
||||
state.failureOrPayment.fold(
|
||||
() {},
|
||||
(either) => either.fold(
|
||||
(f) => AppFlushbar.showOrderFailureToast(context, f),
|
||||
(data) {},
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Scaffold(
|
||||
backgroundColor: AppColor.background,
|
||||
appBar: AppBar(
|
||||
backgroundColor: AppColor.white,
|
||||
elevation: 0,
|
||||
title: const Text(
|
||||
'Pembayaran',
|
||||
style: TextStyle(color: AppColor.primary),
|
||||
),
|
||||
leading: IconButton(
|
||||
onPressed: () => context.router.maybePop(),
|
||||
icon: Icon(Icons.arrow_back, color: AppColor.primary),
|
||||
),
|
||||
),
|
||||
body: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final isWide = constraints.maxWidth > 800;
|
||||
|
||||
return BlocBuilder<PaymentFormBloc, PaymentFormState>(
|
||||
builder: (context, state) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: isWide
|
||||
? Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
flex: 3,
|
||||
child: PaymentLeftPanel(state: state),
|
||||
),
|
||||
const SizedBox(width: 24),
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: PaymentRightPanel(state: state),
|
||||
),
|
||||
],
|
||||
)
|
||||
: SingleChildScrollView(
|
||||
child: Column(
|
||||
children: [
|
||||
PaymentLeftPanel(state: state),
|
||||
const SpaceHeight(24),
|
||||
PaymentRightPanel(state: state),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget wrappedRoute(BuildContext context) => MultiBlocProvider(
|
||||
providers: [
|
||||
BlocProvider(
|
||||
create: (context) =>
|
||||
getIt<PaymentFormBloc>()..add(PaymentFormEvent.setOrder(order)),
|
||||
),
|
||||
BlocProvider(
|
||||
create: (context) =>
|
||||
getIt<PaymentMethodLoaderBloc>()
|
||||
..add(PaymentMethodLoaderEvent.fetched(isRefresh: true)),
|
||||
),
|
||||
],
|
||||
child: this,
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../../application/payment/payment_form/payment_form_bloc.dart';
|
||||
import '../../../../common/extension/extension.dart';
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../components/border/dashed_border.dart';
|
||||
import '../../../components/spaces/space.dart';
|
||||
|
||||
class PaymentLeftPanel extends StatelessWidget {
|
||||
final PaymentFormState state;
|
||||
const PaymentLeftPanel({super.key, required this.state});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Detail Order',
|
||||
style: AppStyle.h5.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
),
|
||||
const SpaceHeight(16),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
'No. Pesanan',
|
||||
style: AppStyle.md.copyWith(fontWeight: FontWeight.w600),
|
||||
),
|
||||
Text(
|
||||
state.order.orderNumber,
|
||||
style: AppStyle.md.copyWith(fontWeight: FontWeight.bold),
|
||||
),
|
||||
],
|
||||
),
|
||||
SpaceHeight(8),
|
||||
Divider(color: AppColor.border),
|
||||
SpaceHeight(8),
|
||||
Expanded(
|
||||
child: state.pendingItems.isEmpty
|
||||
? const Center(child: Text('Tidak ada item'))
|
||||
: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
itemCount: state.pendingItems.length,
|
||||
separatorBuilder: (_, __) =>
|
||||
Divider(color: AppColor.border),
|
||||
itemBuilder: (context, index) {
|
||||
final item = state.pendingItems[index];
|
||||
return ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
title: Text(
|
||||
item.productName,
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
),
|
||||
subtitle: Text(
|
||||
'Qty: ${item.quantity} | ${item.productVariantName}',
|
||||
style: AppStyle.sm,
|
||||
),
|
||||
trailing: Text(
|
||||
(item.totalPrice).currencyFormatRpV2,
|
||||
style: AppStyle.md.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
Divider(color: AppColor.border),
|
||||
_buildSummaryRow('Subtotal', state.order.subtotal),
|
||||
_buildSummaryRow('Pajak', state.order.taxAmount),
|
||||
_buildSummaryRow('Diskon', state.order.discountAmount),
|
||||
SpaceHeight(8),
|
||||
DashedDivider(color: AppColor.border),
|
||||
SpaceHeight(8),
|
||||
_buildSummaryRow(
|
||||
'Total',
|
||||
state.order.totalAmount,
|
||||
isTotal: true,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSummaryRow(
|
||||
String label,
|
||||
int amount, {
|
||||
bool isTotal = false,
|
||||
Color? color,
|
||||
}) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontWeight: isTotal ? FontWeight.bold : FontWeight.normal,
|
||||
fontSize: isTotal ? 18 : 14,
|
||||
color: color ?? Colors.black,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
amount.currencyFormatRpV2,
|
||||
style: TextStyle(
|
||||
fontWeight: isTotal ? FontWeight.bold : FontWeight.normal,
|
||||
fontSize: isTotal ? 18 : 14,
|
||||
color: color ?? Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,226 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
|
||||
import '../../../../application/payment/payment_form/payment_form_bloc.dart';
|
||||
import '../../../../application/payment_method/payment_method_loader/payment_method_loader_bloc.dart';
|
||||
import '../../../../common/extension/extension.dart';
|
||||
import '../../../../common/theme/theme.dart';
|
||||
import '../../../components/button/button.dart';
|
||||
import '../../../components/card/payment_card.dart';
|
||||
import '../../../components/error/payment_method_error_state_widget.dart';
|
||||
import '../../../components/field/field.dart';
|
||||
import '../../../components/loader/loader_with_text.dart';
|
||||
import '../../../components/spaces/space.dart';
|
||||
import '../../../components/toast/flushbar.dart';
|
||||
|
||||
class PaymentRightPanel extends StatefulWidget {
|
||||
final PaymentFormState state;
|
||||
const PaymentRightPanel({super.key, required this.state});
|
||||
|
||||
@override
|
||||
State<PaymentRightPanel> createState() => _PaymentRightPanelState();
|
||||
}
|
||||
|
||||
class _PaymentRightPanelState extends State<PaymentRightPanel> {
|
||||
TextEditingController totalPriceController = TextEditingController();
|
||||
|
||||
int priceValue = 0;
|
||||
int pasMoney1 = 0;
|
||||
int pasMoney2 = 0;
|
||||
int pasMoney3 = 0;
|
||||
|
||||
initMoney() {
|
||||
setState(() {
|
||||
priceValue = widget.state.order.totalAmount;
|
||||
pasMoney1 = widget.state.order.totalAmount;
|
||||
pasMoney2 = pasMoney1 ~/ 50000 * 50000 + 50000;
|
||||
pasMoney3 = pasMoney1 ~/ 50000 * 50000 + 100000;
|
||||
totalPriceController.text =
|
||||
widget.state.order.totalAmount.currencyFormatRpV2;
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
initMoney();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColor.white,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
padding: EdgeInsets.all(16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Pembayaran',
|
||||
style: AppStyle.h5.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColor.primary,
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SpaceHeight(24),
|
||||
Text(
|
||||
'Metode Pembayaran',
|
||||
style: AppStyle.md.copyWith(fontWeight: FontWeight.w600),
|
||||
),
|
||||
SpaceHeight(12),
|
||||
BlocBuilder<
|
||||
PaymentMethodLoaderBloc,
|
||||
PaymentMethodLoaderState
|
||||
>(
|
||||
builder: (context, pmState) {
|
||||
if (pmState.isFetching) {
|
||||
return Center(child: LoaderWithText());
|
||||
}
|
||||
return pmState.failureOption.fold(
|
||||
() => Wrap(
|
||||
spacing: 12.0,
|
||||
runSpacing: 8.0,
|
||||
children: pmState.paymentMethods.map((item) {
|
||||
// Set default selected payment method if none selected or if current selection is not in the list
|
||||
if (widget.state.paymentMethod == null ||
|
||||
!pmState.paymentMethods.any(
|
||||
(method) =>
|
||||
method.id ==
|
||||
widget.state.paymentMethod?.id,
|
||||
)) {
|
||||
context.read<PaymentFormBloc>().add(
|
||||
PaymentFormEvent.setPaymentMethod(
|
||||
pmState.paymentMethods.first,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return PaymentCard(
|
||||
payment: item,
|
||||
isSelected: widget.state.paymentMethod == item,
|
||||
onSelected: (_) {
|
||||
context.read<PaymentFormBloc>().add(
|
||||
PaymentFormEvent.setPaymentMethod(item),
|
||||
);
|
||||
},
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
(f) => PaymentMethodErrorStateWidget(failure: f),
|
||||
);
|
||||
},
|
||||
),
|
||||
SpaceHeight(24),
|
||||
if (widget.state.paymentMethod != null &&
|
||||
widget.state.paymentMethod!.type == 'cash')
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Total Bayar',
|
||||
style: AppStyle.lg.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
const SpaceHeight(8.0),
|
||||
AppTextFormField(
|
||||
label: 'Total Bayar',
|
||||
showLabel: false,
|
||||
keyboardType: TextInputType.number,
|
||||
controller: totalPriceController,
|
||||
onChanged: (value) {
|
||||
priceValue = value.toIntegerFromText;
|
||||
final int newValue = value.toIntegerFromText;
|
||||
totalPriceController.text =
|
||||
newValue.currencyFormatRp;
|
||||
totalPriceController.selection =
|
||||
TextSelection.fromPosition(
|
||||
TextPosition(
|
||||
offset: totalPriceController.text.length,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
const SpaceHeight(20.0),
|
||||
SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
AppElevatedButton.outlined(
|
||||
width: 150.0,
|
||||
onPressed: () {
|
||||
totalPriceController.text = pasMoney1
|
||||
.toString()
|
||||
.currencyFormatRpV2;
|
||||
priceValue = pasMoney1;
|
||||
},
|
||||
label: 'UANG PAS',
|
||||
),
|
||||
const SpaceWidth(20.0),
|
||||
AppElevatedButton.outlined(
|
||||
width: 150.0,
|
||||
onPressed: () {
|
||||
totalPriceController.text = pasMoney2
|
||||
.toString()
|
||||
.currencyFormatRpV2;
|
||||
priceValue = pasMoney2;
|
||||
},
|
||||
label: pasMoney2.toString().currencyFormatRpV2,
|
||||
),
|
||||
const SpaceWidth(20.0),
|
||||
AppElevatedButton.outlined(
|
||||
width: 150.0,
|
||||
onPressed: () {
|
||||
totalPriceController.text = pasMoney3
|
||||
.toString()
|
||||
.currencyFormatRpV2;
|
||||
priceValue = pasMoney3;
|
||||
},
|
||||
label: pasMoney3.toString().currencyFormatRpV2,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
AppElevatedButton.filled(
|
||||
onPressed: () {
|
||||
if (widget.state.paymentMethod == null) {
|
||||
AppFlushbar.showError(
|
||||
context,
|
||||
'Pilih metode pembayaran terlebih dahulu',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (widget.state.paymentMethod?.type == "cash" &&
|
||||
priceValue == 0) {
|
||||
AppFlushbar.showError(context, 'Total bayar tidak boleh 0');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!widget.state.isSubmitting) {
|
||||
context.read<PaymentFormBloc>().add(
|
||||
PaymentFormEvent.submitted(),
|
||||
);
|
||||
}
|
||||
},
|
||||
label: 'Bayar',
|
||||
isLoading: widget.state.isSubmitting,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user