6177214e-ce7c-49e3-99de-ff9721b26f63 — Commit 7c6ddde7
Changed files
.../widgets/select_payment_method.dart | 114 +++++++++++++++++++++ .../lib/presentation/widgets/toggle_checkmark.dart | 36 +++++++ 2 files changed, 150 insertions(+)
Diff
diff --git a/concierge/lib/presentation/screens/confirm_order/widgets/select_payment_method.dart b/concierge/lib/presentation/screens/confirm_order/widgets/select_payment_method.dart
new file mode 100644
index 00000000..0ef48dd4
--- /dev/null
+++ b/concierge/lib/presentation/screens/confirm_order/widgets/select_payment_method.dart
@@ -0,0 +1,114 @@
+import 'package:concierge/presentation/app/cart_cubit.dart';
+import 'package:concierge/presentation/theme/app_colors.dart';
+import 'package:concierge/presentation/widgets/toggle_checkmark.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:gap/gap.dart';
+
+class SelectPaymentMethod extends StatelessWidget {
+ const SelectPaymentMethod({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ final cartCubit = context.read<CartCubit>();
+ return Material(
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ buildPaymentOption(
+ context,
+ icon: Icons.bed_outlined,
+ title: "Skriv på værelset og få point",
+ subtitle: "Du betaler ved udtjekning",
+ isSelected: cartCubit.state.chargeToRoom,
+ isChargeToRoom: true,
+ ),
+ const Gap(12),
+ buildPaymentOption(
+ context,
+ icon: Icons.credit_card,
+ title: "Betal din ordre nu",
+ subtitle: "Vælg betalingsmetode i næste step",
+ isSelected: !cartCubit.state.chargeToRoom,
+ isChargeToRoom: false,
+ ),
+ ],
+ ),
+ );
+ }
+
+ Widget buildPaymentOption(
+ BuildContext context, {
+ required IconData icon,
+ required String title,
+ required String subtitle,
+ required bool isSelected,
+ required bool isChargeToRoom,
+ }) {
+ final cartCubit = context.read<CartCubit>();
+
+ final Color bgColor;
+ final Color iconBgColor;
+ final Border? borderSide;
+ if (isSelected) {
+ bgColor = AppColors.colorSecondary;
+ iconBgColor = Color(0xFFD7C9B9);
+ borderSide = null;
+ } else {
+ bgColor = Colors.white;
+ iconBgColor = AppColors.colorSecondary;
+ borderSide = Border.all(color: Colors.grey.shade300, width: 1);
+ }
+
+ return Ink(
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.circular(16),
+ color: bgColor,
+ border: borderSide,
+ ),
+ child: InkWell(
+ borderRadius: BorderRadius.circular(16),
+ onTap: () {
+ cartCubit.updatePaymentMethod(isChargeToRoom);
+ },
+ child: Padding(
+ padding: const EdgeInsets.all(16.0),
+ child: Row(
+ children: [
+ Container(
+ width: 36,
+ height: 36,
+ decoration: BoxDecoration(shape: BoxShape.circle, color: iconBgColor),
+ child: Icon(
+ icon,
+ size: 20,
+ color: Colors.black,
+ ),
+ ),
+ Gap(12),
+ Column(
+ mainAxisSize: MainAxisSize.min,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text(title, style: TextStyle(color: Colors.black)),
+ Text(
+ subtitle,
+ style: TextStyle(
+ color: Colors.black.withAlpha((0.5 * 255).toInt()),
+ fontSize: 12,
+ ),
+ ),
+ ],
+ ),
+ Spacer(),
+ ToggleCheckmark(
+ isSelected: isSelected,
+ size: 32,
+ ),
+ ],
+ ),
+ ),
+ ),
+ );
+ }
+}
diff --git a/concierge/lib/presentation/widgets/toggle_checkmark.dart b/concierge/lib/presentation/widgets/toggle_checkmark.dart
new file mode 100644
index 00000000..16116c31
--- /dev/null
+++ b/concierge/lib/presentation/widgets/toggle_checkmark.dart
@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+class ToggleCheckmark extends StatelessWidget {
+ const ToggleCheckmark({super.key, required this.isSelected, this.size = 20});
+
+ final double size;
+ final bool isSelected;
+
+ @override
+ Widget build(BuildContext context) {
+ if (isSelected) {
+ return Container(
+ height: size,
+ width: size,
+ decoration: BoxDecoration(
+ shape: BoxShape.circle,
+ color: Colors.black,
+ ),
+ child: Icon(
+ Icons.check,
+ size: size * 0.6,
+ color: Colors.white,
+ ),
+ );
+ }
+ return Container(
+ height: size,
+ width: size,
+ decoration: BoxDecoration(
+ shape: BoxShape.circle,
+ color: Colors.white,
+ border: Border.all(color: Colors.grey, width: 1),
+ ),
+ );
+ }
+}