checkout page

This commit is contained in:
efrilm
2025-10-27 01:54:35 +07:00
parent e8fd683077
commit 3135dde317
9 changed files with 530 additions and 64 deletions
@@ -0,0 +1,52 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../application/checkout/checkout_form/checkout_form_bloc.dart';
import '../../../common/theme/theme.dart';
import '../../components/spaces/space.dart';
import 'widgets/checkout_left_panel.dart';
import 'widgets/checkout_right_panel.dart';
@RoutePage()
class CheckoutPage extends StatelessWidget {
const CheckoutPage({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Hero(
tag: 'checkout_screen',
child: BlocBuilder<CheckoutFormBloc, CheckoutFormState>(
builder: (context, state) {
final price = state.items.fold(
0,
(previousValue, element) =>
previousValue +
(element.product.price.toInt() +
(element.variant?.priceModifier.toInt() ?? 0)) *
element.quantity,
);
return Scaffold(
backgroundColor: AppColor.white,
body: Row(
children: [
Expanded(
flex: 3,
child: CheckoutLeftPanel(
checkoutState: state,
price: price,
),
),
SpaceWidth(2),
Expanded(flex: 3, child: CheckoutRightPanel()),
],
),
);
},
),
),
);
}
}
@@ -0,0 +1,199 @@
import 'package:flutter/widgets.dart';
import '../../../../application/checkout/checkout_form/checkout_form_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/border/dashed_border.dart';
import '../../../components/card/order_menu.dart';
import '../../../components/page/page_title.dart';
import '../../../components/spaces/space.dart';
class CheckoutLeftPanel extends StatelessWidget {
final CheckoutFormState checkoutState;
final int price;
const CheckoutLeftPanel({
super.key,
required this.checkoutState,
required this.price,
});
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
PageTitle(
title: 'Konfirmasi',
subtitle: checkoutState.table != null
? 'Pesanan Meja ${checkoutState.table?.tableName ?? "-"}'
: 'Pesanan',
actionWidget: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
border: Border.all(color: AppColor.primary, width: 1.0),
),
padding: const EdgeInsets.all(8.0),
child: Text(
checkoutState.orderType.value,
style: TextStyle(
color: AppColor.primary,
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
],
),
Container(
padding: const EdgeInsets.all(16.0).copyWith(bottom: 8),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: AppColor.border, width: 1.0),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Item',
style: AppStyle.lg.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
SpaceWidth(160),
SizedBox(
width: 50.0,
child: Text(
'Qty',
style: AppStyle.lg.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
),
SizedBox(
child: Text(
'Price',
style: AppStyle.lg.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
Expanded(
child: ListView.separated(
shrinkWrap: true,
padding: const EdgeInsets.all(16.0).copyWith(top: 8.0),
itemBuilder: (context, index) =>
OrderMenu(data: checkoutState.items[index]),
separatorBuilder: (context, index) => const SpaceHeight(12.0),
itemCount: checkoutState.items.length,
),
),
DashedDivider(color: AppColor.border),
Container(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
if (checkoutState.delivery != null) ...[
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Pengiriman',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w600,
),
),
Text(
checkoutState.delivery?.name ?? '-',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w600,
),
),
],
),
const SpaceHeight(8.0),
DashedDivider(color: AppColor.border),
const SpaceHeight(8.0),
],
),
],
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Sub total',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w600,
),
),
Text(
price.currencyFormatRp,
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w600,
),
),
],
),
const SpaceHeight(8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Pajak PB1',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w400,
),
),
Text(
'${checkoutState.tax}% (Rp. 0)',
style: AppStyle.md.copyWith(
color: AppColor.black,
fontWeight: FontWeight.w500,
),
),
],
),
const SpaceHeight(8.0),
DashedDivider(color: AppColor.border),
const SpaceHeight(8.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Total',
style: AppStyle.xl.copyWith(
color: AppColor.black,
fontWeight: FontWeight.bold,
),
),
Text(
price.currencyFormatRp,
style: const TextStyle(
color: AppColor.primary,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
],
),
],
),
),
],
);
}
}
@@ -0,0 +1,48 @@
import 'package:flutter/widgets.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/field/field.dart';
import '../../../components/page/page_title.dart';
class CheckoutRightPanel extends StatelessWidget {
const CheckoutRightPanel({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
PageTitle(
title: 'Pembayaran',
isBack: false,
subtitle: 'Silahkan lakukan pembayaran',
),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
// Container(
// padding: const EdgeInsets.all(16),
// decoration: BoxDecoration(
// color: AppColor.white,
// border: Border(
// bottom: BorderSide(color: AppColor.border, width: 1.0),
// ),
// ),
// child: CustomerAutocomplete(
// controller: customerController,
// selectedCustomer: selectedCustomer,
// onSelected: (customer) {
// setState(() {
// selectedCustomer = customer;
// });
// },
// ),
// ),
],
),
),
),
],
);
}
}
@@ -1,5 +1,6 @@
import 'dart:developer';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
@@ -10,6 +11,7 @@ import '../../../../../components/button/button.dart';
import '../../../../../components/card/order_menu.dart';
import '../../../../../components/spaces/space.dart';
import '../../../../../components/toast/flushbar.dart';
import '../../../../../router/app_router.gr.dart';
import 'home_right_title.dart';
class HomeRightPanel extends StatelessWidget {
@@ -146,7 +148,8 @@ class HomeRightPanel extends StatelessWidget {
elevation: 1,
disabled: state.items.isEmpty,
onPressed: () {
if (state.orderType.name == 'dineIn') {
if (state.orderType.name == 'dineIn' &&
state.table == null) {
AppFlushbar.showError(
context,
'Mohon pilih meja terlebih dahulu',
@@ -161,12 +164,7 @@ class HomeRightPanel extends StatelessWidget {
);
return;
}
// context.push(
// ConfirmPaymentPage(
// isTable: widget.table == null ? false : true,
// table: widget.table,
// ),
// );
context.router.push(CheckoutRoute());
},
label: 'Lanjutkan Pembayaran',
),