payment method

lib/presentation/app_widget.dart

@@ -5,6 +5,7 @@ import '../application/auth/auth_bloc.dart';
 import '../application/category/category_loader/category_loader_bloc.dart';
 import '../application/checkout/checkout_form/checkout_form_bloc.dart';
 import '../application/outlet/outlet_loader/outlet_loader_bloc.dart';
+import '../application/payment_method/payment_method_loader/payment_method_loader_bloc.dart';
 import '../application/product/product_loader/product_loader_bloc.dart';
 import '../application/table/table_form/table_form_bloc.dart';
 import '../application/table/table_loader/table_loader_bloc.dart';
@@ -35,6 +36,7 @@ class _AppWidgetState extends State<AppWidget> {
         BlocProvider(create: (context) => getIt<CheckoutFormBloc>()),
         BlocProvider(create: (context) => getIt<TableLoaderBloc>()),
         BlocProvider(create: (context) => getIt<TableFormBloc>()),
+        BlocProvider(create: (context) => getIt<PaymentMethodLoaderBloc>()),
       ],
       child: MaterialApp.router(
         debugShowCheckedModeBanner: false,

lib/presentation/components/card/payment_card.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+import '../../../common/theme/theme.dart';
+import '../../../domain/payment_method/payment_method.dart';
+
+class PaymentCard extends StatelessWidget {
+  final PaymentMethod payment;
+  final bool isSelected;
+  final Function(bool)? onSelected;
+  const PaymentCard({
+    super.key,
+    required this.payment,
+    required this.isSelected,
+    this.onSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ChoiceChip(
+      label: Text(payment.name),
+      selected: isSelected,
+      onSelected: onSelected,
+      selectedColor: AppColor.primary,
+      backgroundColor: AppColor.white,
+      labelStyle: TextStyle(
+        color: isSelected ? AppColor.white : AppColor.primary,
+        fontWeight: FontWeight.bold,
+      ),
+      checkmarkColor: AppColor.white,
+      shape: RoundedRectangleBorder(
+        side: BorderSide(color: AppColor.primary),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+    );
+  }
+}

lib/presentation/components/error/payment_method_error_state_widget.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../../application/payment_method/payment_method_loader/payment_method_loader_bloc.dart';
+import '../../../domain/payment_method/payment_method.dart';
+import '../card/error_card.dart';
+
+class PaymentMethodErrorStateWidget extends StatelessWidget {
+  final PaymentMethodFailure failure;
+  const PaymentMethodErrorStateWidget({super.key, required this.failure});
+
+  @override
+  Widget build(BuildContext context) {
+    return failure.maybeMap(
+      orElse: () => ErrorCard(
+        title: 'Metode Pembayaran',
+        message: 'Terjadi Kesalahan saat memuat metode pembayaran',
+        onTap: () {
+          context.read<PaymentMethodLoaderBloc>().add(
+            PaymentMethodLoaderEvent.fetched(isRefresh: true),
+          );
+        },
+      ),
+      dynamicErrorMessage: (value) => ErrorCard(
+        title: 'Metode Pembayaran',
+        message: value.erroMessage,
+        onTap: () {
+          context.read<PaymentMethodLoaderBloc>().add(
+            PaymentMethodLoaderEvent.fetched(isRefresh: true),
+          );
+        },
+      ),
+      empty: (value) => ErrorCard(
+        title: 'Metode Pembayaran',
+        message:
+            'Metode pembayaran masih kosong, silahkan tambahkan metode pembayaran',
+        onTap: () {
+          context.read<PaymentMethodLoaderBloc>().add(
+            PaymentMethodLoaderEvent.fetched(isRefresh: true),
+          );
+        },
+      ),
+      serverError: (value) => ErrorCard(
+        title: 'Metode Pembayaran',
+        message: 'Terjadi Kesalahan saat memuat metode pembayaran',
+        onTap: () {
+          context.read<PaymentMethodLoaderBloc>().add(
+            PaymentMethodLoaderEvent.fetched(isRefresh: true),
+          );
+        },
+      ),
+      localStorageError: (value) => ErrorCard(
+        title: 'Metode Pembayaran',
+        message: value.erroMessage,
+        onTap: () {
+          context.read<PaymentMethodLoaderBloc>().add(
+            PaymentMethodLoaderEvent.fetched(isRefresh: true),
+          );
+        },
+      ),
+      unexpectedError: (value) => ErrorCard(
+        title: 'Metode Pembayaran',
+        message: 'Terjadi Kesalahan saat memuat metode pembayaran',
+        onTap: () {
+          context.read<PaymentMethodLoaderBloc>().add(
+            PaymentMethodLoaderEvent.fetched(isRefresh: true),
+          );
+        },
+      ),
+    );
+  }
+}

lib/presentation/pages/checkout/checkout_page.dart

@@ -3,13 +3,15 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../../../application/checkout/checkout_form/checkout_form_bloc.dart';
+import '../../../application/payment_method/payment_method_loader/payment_method_loader_bloc.dart';
 import '../../../common/theme/theme.dart';
+import '../../../injection.dart';
 import '../../components/spaces/space.dart';
 import 'widgets/checkout_left_panel.dart';
 import 'widgets/checkout_right_panel.dart';
 
 @RoutePage()
-class CheckoutPage extends StatelessWidget {
+class CheckoutPage extends StatelessWidget implements AutoRouteWrapper {
   const CheckoutPage({super.key});
 
   @override
@@ -49,4 +51,12 @@ class CheckoutPage extends StatelessWidget {
       ),
     );
   }
+
+  @override
+  Widget wrappedRoute(BuildContext context) => BlocProvider(
+    create: (context) =>
+        getIt<PaymentMethodLoaderBloc>()
+          ..add(PaymentMethodLoaderEvent.fetched(isRefresh: true)),
+    child: this,
+  );
 }

lib/presentation/pages/checkout/widgets/checkout_right_panel.dart

@@ -1,8 +1,13 @@
 import 'package:flutter/widgets.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
+import '../../../../application/payment_method/payment_method_loader/payment_method_loader_bloc.dart';
 import '../../../../common/theme/theme.dart';
-import '../../../components/field/field.dart';
+import '../../../components/card/payment_card.dart';
+import '../../../components/error/payment_method_error_state_widget.dart';
+import '../../../components/loader/loader_with_text.dart';
 import '../../../components/page/page_title.dart';
+import '../../../components/spaces/space.dart';
 
 class CheckoutRightPanel extends StatelessWidget {
   const CheckoutRightPanel({super.key});
@@ -38,6 +43,51 @@ class CheckoutRightPanel extends StatelessWidget {
                 //     },
                 //   ),
                 // ),
+                Container(
+                  padding: const EdgeInsets.all(16),
+                  width: double.infinity,
+                  decoration: BoxDecoration(
+                    color: AppColor.white,
+                    border: Border(
+                      bottom: BorderSide(color: AppColor.border, width: 1.0),
+                    ),
+                  ),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Metode Pembayaran',
+                        style: AppStyle.lg.copyWith(
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      const SpaceHeight(12.0),
+                      BlocBuilder<
+                        PaymentMethodLoaderBloc,
+                        PaymentMethodLoaderState
+                      >(
+                        builder: (context, state) {
+                          if (state.isFetching) {
+                            return Center(child: LoaderWithText());
+                          }
+                          return state.failureOption.fold(
+                            () => Wrap(
+                              spacing: 12.0,
+                              runSpacing: 8.0,
+                              children: state.paymentMethods.map((item) {
+                                return PaymentCard(
+                                  payment: item,
+                                  isSelected: true,
+                                );
+                              }).toList(),
+                            ),
+                            (f) => PaymentMethodErrorStateWidget(failure: f),
+                          );
+                        },
+                      ),
+                    ],
+                  ),
+                ),
               ],
             ),
           ),