Frontend first draft

frontend/pweb/lib/utils/payment/dropdown.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/methods/type.dart';
+
+import 'package:pweb/pages/payment_methods/icon.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PaymentMethodDropdown extends StatefulWidget {
+  final List<PaymentMethod> methods;
+  final ValueChanged<PaymentMethod> onChanged;
+  final PaymentMethod? initialValue;
+
+  const PaymentMethodDropdown({
+    super.key,
+    required this.methods,
+    required this.onChanged,
+    this.initialValue,
+  });
+
+  @override
+  State<PaymentMethodDropdown> createState() => _PaymentMethodDropdownState();
+}
+
+class _PaymentMethodDropdownState extends State<PaymentMethodDropdown> {
+  late PaymentMethod _selectedMethod;
+
+  @override
+  void initState() {
+    super.initState();
+    _selectedMethod = widget.initialValue ?? widget.methods.first;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return DropdownButtonFormField<PaymentMethod>(
+      dropdownColor: Theme.of(context).colorScheme.onSecondary,
+      value: _selectedMethod,
+      decoration: InputDecoration(
+        labelText: AppLocalizations.of(context)!.whereGetMoney,
+        border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
+      ),
+      items: widget.methods.map((method) {
+        return DropdownMenuItem<PaymentMethod>(
+          value: method,
+          child: Row(
+            children: [
+              Icon(iconForPaymentType(method.type), size: 20),
+              const SizedBox(width: 8),
+              Text('${method.label} (${method.details})'),
+            ],
+          ),
+        );
+      }).toList(),
+      onChanged: (value) {
+        if (value != null) {
+          setState(() => _selectedMethod = value);
+          widget.onChanged(value);
+        }
+      },
+    );
+  }
+}

frontend/pweb/lib/utils/payment/label.dart

@@ -0,0 +1,16 @@
+import 'package:flutter/widgets.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+String getPaymentTypeLabel(BuildContext context, PaymentType type) {
+  final l10n = AppLocalizations.of(context)!;
+  return switch (type) {
+    PaymentType.card => l10n.paymentTypeCard,
+    PaymentType.bankAccount => l10n.paymentTypeBankAccount,
+    PaymentType.iban => l10n.paymentTypeIban,
+    PaymentType.wallet => l10n.paymentTypeWallet,
+  };
+}

frontend/pweb/lib/utils/payment/selector_type.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+import 'package:pweb/utils/payment/label.dart';
+
+
+class PaymentTypeSelector extends StatelessWidget {
+  final Map<PaymentType, Object> availableTypes;
+  final PaymentType selectedType;
+  final ValueChanged<PaymentType> onSelected;
+
+  const PaymentTypeSelector({
+    super.key,
+    required this.availableTypes,
+    required this.selectedType,
+    required this.onSelected,
+  });
+
+  static const double _chipSpacing = 12.0;
+  static const double _chipBorderRadius = 10.0;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Wrap(
+      spacing: _chipSpacing,
+      runSpacing: _chipSpacing,
+      children: availableTypes.keys.map((type) {
+        final isSelected = selectedType == type;
+
+        return ChoiceChip(
+          label: Text(
+            getPaymentTypeLabel(context, type),
+            style: theme.textTheme.titleMedium!.copyWith(
+              color: isSelected
+                  ? theme.colorScheme.onPrimary
+                  : theme.colorScheme.onSurface,
+            ),
+          ),
+          selected: isSelected,
+          showCheckmark: false,
+          selectedColor: theme.colorScheme.primary,
+          backgroundColor: theme.colorScheme.onSecondary,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(_chipBorderRadius),
+          ),
+          onSelected: (_) => onSelected(type),
+        );
+      }).toList(),
+    );
+  }
+}