payment method

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),
+                          );
+                        },
+                      ),
+                    ],
+                  ),
+                ),
               ],
             ),
           ),