Multiple Wallet support, history of each wallet and updated payment page

2025-11-21 19:22:23 +03:00
parent 4c64a8d6e6
commit 87636a7ec3
68 changed files with 2154 additions and 701 deletions
--- a/frontend/pweb/lib/pages/payment_methods/add/card.dart
+++ b/frontend/pweb/lib/pages/payment_methods/add/card.dart
@@ -56,10 +56,21 @@ class _CardFormMinimalState extends State<CardFormMinimal> {
  @override
  void didUpdateWidget(covariant CardFormMinimal oldWidget) {
    super.didUpdateWidget(oldWidget);
-    if (widget.initialData == null && oldWidget.initialData != null) {
+    final newData = widget.initialData;
+    final oldData = oldWidget.initialData;
+
+    if (newData == null && oldData != null) {
      _panController.clear();
      _firstNameController.clear();
      _lastNameController.clear();
+      return;
+    }
+
+    if (newData != null && newData != oldData) {
+      _panController.text = newData.pan;
+      _firstNameController.text = newData.firstName;
+      _lastNameController.text = newData.lastName;
+      WidgetsBinding.instance.addPostFrameCallback((_) => _emitIfValid());
    }
  }

--- a/frontend/pweb/lib/pages/payment_methods/add/iban.dart
+++ b/frontend/pweb/lib/pages/payment_methods/add/iban.dart
@@ -57,11 +57,23 @@ class _IbanFormState extends State<IbanForm> {
  @override
  void didUpdateWidget(covariant IbanForm oldWidget) {
    super.didUpdateWidget(oldWidget);
-    if (widget.initialData == null && oldWidget.initialData != null) {
+    final newData = widget.initialData;
+    final oldData = oldWidget.initialData;
+
+    if (newData == null && oldData != null) {
      _ibanController.clear();
      _accountHolderController.clear();
      _bicController.clear();
      _bankNameController.clear();
+      return;
+    }
+
+    if (newData != null && newData != oldData) {
+      _ibanController.text = newData.iban;
+      _accountHolderController.text = newData.accountHolder;
+      _bicController.text = newData.bic ?? '';
+      _bankNameController.text = newData.bankName ?? '';
+      WidgetsBinding.instance.addPostFrameCallback((_) => _emitIfValid());
    }
  }

--- a/frontend/pweb/lib/pages/payment_methods/add/russian_bank.dart
+++ b/frontend/pweb/lib/pages/payment_methods/add/russian_bank.dart
@@ -66,7 +66,10 @@ class _RussianBankFormState extends State<RussianBankForm> {
  @override
  void didUpdateWidget(covariant RussianBankForm oldWidget) {
    super.didUpdateWidget(oldWidget);
-    if (widget.initialData == null && oldWidget.initialData != null) {
+    final newData = widget.initialData;
+    final oldData = oldWidget.initialData;
+
+    if (newData == null && oldData != null) {
      _recipientNameController.clear();
      _innController.clear();
      _kppController.clear();
@@ -74,6 +77,18 @@ class _RussianBankFormState extends State<RussianBankForm> {
      _bikController.clear();
      _accountNumberController.clear();
      _correspondentAccountController.clear();
+      return;
+    }
+
+    if (newData != null && newData != oldData) {
+      _recipientNameController.text = newData.recipientName;
+      _innController.text = newData.inn;
+      _kppController.text = newData.kpp;
+      _bankNameController.text = newData.bankName;
+      _bikController.text = newData.bik;
+      _accountNumberController.text = newData.accountNumber;
+      _correspondentAccountController.text = newData.correspondentAccount;
+      WidgetsBinding.instance.addPostFrameCallback((_) => _emitIfValid());
    }
  }

--- a/frontend/pweb/lib/pages/payment_methods/add/wallet.dart
+++ b/frontend/pweb/lib/pages/payment_methods/add/wallet.dart
@@ -41,8 +41,16 @@ class _WalletFormState extends State<WalletForm> {
  @override
  void didUpdateWidget(covariant WalletForm oldWidget) {
    super.didUpdateWidget(oldWidget);
-    if (widget.initialData == null && oldWidget.initialData != null) {
+    final newData = widget.initialData;
+    final oldData = oldWidget.initialData;
+
+    if (newData == null && oldData != null) {
      _walletIdController.clear();
+      return;
+    }
+
+    if (newData != null && newData != oldData) {
+      _walletIdController.text = newData.walletId;
    }
  }

--- a/frontend/pweb/lib/pages/payment_methods/delete_confirmation.dart
+++ b/frontend/pweb/lib/pages/payment_methods/delete_confirmation.dart
@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
+
 import 'package:pweb/generated/i18n/app_localizations.dart';

+
 Future<bool> showDeleteConfirmationDialog(BuildContext context) async {
  final l10n = AppLocalizations.of(context)!;
  return await showDialog<bool>(
--- a/frontend/pweb/lib/pages/payment_methods/header.dart
+++ b/frontend/pweb/lib/pages/payment_methods/header.dart
@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/utils/dimensions.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PaymentHeader extends StatelessWidget {
+
+  const PaymentHeader({super.key});
+  
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final dimensions = AppDimensions();
+
+    return Row(
+      children: [
+        Icon(
+          Icons.send_rounded, 
+          color: theme.colorScheme.primary, 
+          size: dimensions.iconSizeLarge
+        ),
+        SizedBox(width: dimensions.spacingSmall),
+        Text(
+          AppLocalizations.of(context)!.sendTo,
+          style: theme.textTheme.headlineSmall?.copyWith(
+            fontWeight: FontWeight.bold
+          ),
+        ),
+      ],
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/method_selector.dart
+++ b/frontend/pweb/lib/pages/payment_methods/method_selector.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/methods/type.dart';
+
+import 'package:pweb/providers/payment_methods.dart';
+import 'package:pweb/utils/payment/dropdown.dart';
+
+
+class PaymentMethodSelector extends StatelessWidget {
+  final PaymentMethodsProvider methodsProvider;
+  final ValueChanged<PaymentMethod> onMethodChanged;
+
+  const PaymentMethodSelector({
+    super.key,
+    required this.methodsProvider,
+    required this.onMethodChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return PaymentMethodDropdown(
+      methods: methodsProvider.methods,
+      initialValue: methodsProvider.selectedMethod,
+      onChanged: onMethodChanged,
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/page.dart
+++ b/frontend/pweb/lib/pages/payment_methods/page.dart
@@ -1,232 +1,120 @@
-import 'package:amplitude_flutter/amplitude.dart';
 import 'package:flutter/material.dart';

 import 'package:provider/provider.dart';

-import 'package:pshared/models/payment/type.dart';
 import 'package:pshared/models/recipient/recipient.dart';

-import 'package:pweb/pages/dashboard/payouts/payment_form.dart';
-import 'package:pweb/pages/dashboard/payouts/single/form/details.dart';
-import 'package:pweb/pages/dashboard/payouts/single/form/header.dart';
+import 'package:pweb/providers/payment_flow_provider.dart';
+import 'package:pweb/pages/payment_methods/widgets/payment_page_body.dart';
+import 'package:pweb/providers/page_selector.dart';
 import 'package:pweb/providers/payment_methods.dart';
 import 'package:pweb/providers/recipient.dart';
-import 'package:pweb/services/amplitude.dart';
-import 'package:pweb/utils/dimensions.dart';
-import 'package:pweb/utils/payment/dropdown.dart';
-import 'package:pweb/utils/payment/selector_type.dart';
-
-import 'package:pweb/generated/i18n/app_localizations.dart';
-import 'package:pweb/widgets/sidebar/destinations.dart';
-
-
-//TODO: decide whether to make AppDimensions universal for the whole app or leave it as it is - unique for this page alone


 class PaymentPage extends StatefulWidget {
-  final PaymentType? type;
  final ValueChanged<Recipient?>? onBack;

-  const PaymentPage({super.key, this.type, this.onBack});
+  const PaymentPage({super.key, this.onBack});

  @override
  State<PaymentPage> createState() => _PaymentPageState();
 }

 class _PaymentPageState extends State<PaymentPage> {
-  late Map<PaymentType, Object> _availableTypes;
-  late PaymentType _selectedType;
-  bool _isFormVisible = false;
-
-  @override
-  void didChangeDependencies() {
-    super.didChangeDependencies();
-    final recipientProvider = context.watch<RecipientProvider>();
-    final methodsProvider = context.watch<PaymentMethodsProvider>();
-    final recipient = recipientProvider.selectedRecipient;
-
-    // Initialize available types based on whether we have a recipient
-    if (recipient != null) {
-      // We have a recipient - use their payment methods
-      _availableTypes = {
-        if (recipient.card != null) PaymentType.card: recipient.card!,
-        if (recipient.iban != null) PaymentType.iban: recipient.iban!,
-        if (recipient.wallet != null) PaymentType.wallet: recipient.wallet!,
-        if (recipient.bank != null) PaymentType.bankAccount: recipient.bank!,
-      };
-      
-      // Set selected type if it's available, otherwise use first available type
-      if (_availableTypes.containsKey(_selectedType)) {
-        // Keep current selection if valid
-      } else if (_availableTypes.isNotEmpty) {
-        _selectedType = _availableTypes.keys.first;
-      } else {
-        // Fallback if recipient has no payment methods
-        _selectedType = PaymentType.bankAccount;
-      }
-    } else {
-      // No recipient - we're creating a new payment from scratch
-      _availableTypes = {};
-      _selectedType = widget.type ?? PaymentType.bankAccount;
-      _isFormVisible = true; // Always show form when creating new payment
-    }
-
-    // Load payment methods if not already loaded
-    if (methodsProvider.methods.isEmpty && !methodsProvider.isLoading) {
-      WidgetsBinding.instance.addPostFrameCallback((_) {
-        methodsProvider.loadMethods();
-      });
-    }
-  }
+  late final TextEditingController _searchController;
+  late final FocusNode _searchFocusNode;
+  late final PaymentFlowProvider _flowProvider;

  @override
  void initState() {
    super.initState();
-    // Initial values
-    _availableTypes = {};
-    _selectedType = widget.type ?? PaymentType.bankAccount;
+    _searchController = TextEditingController();
+    _searchFocusNode = FocusNode();
+    final pageSelector = context.read<PageSelectorProvider>();
+    _flowProvider = PaymentFlowProvider(
+      initialType: pageSelector.getDefaultPaymentType(),
+    );
+
+    WidgetsBinding.instance.addPostFrameCallback((_) => _initializePaymentPage());
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _searchFocusNode.dispose();
+    _flowProvider.dispose();
+    super.dispose();
+  }
+
+  void _initializePaymentPage() {
+    final pageSelector = context.read<PageSelectorProvider>();
+    final methodsProvider = context.read<PaymentMethodsProvider>();
+    final recipientProvider = context.read<RecipientProvider>();
+
+    pageSelector.handleWalletAutoSelection();
+
+    if (methodsProvider.methods.isEmpty && !methodsProvider.isLoading) {
+      methodsProvider.loadMethods();
+    }
+
+    if (recipientProvider.recipients.isEmpty && !recipientProvider.isLoading) {
+      recipientProvider.loadRecipients();
+    }
+
+    _flowProvider.syncWithSelector(pageSelector);
+  }
+
+  void _handleSearchChanged(String query) {
+    context.read<RecipientProvider>().setQuery(query);
+  }
+
+  void _handleRecipientSelected(Recipient recipient) {
+    final pageSelector = context.read<PageSelectorProvider>();
+    final recipientProvider = context.read<RecipientProvider>();
+
+    recipientProvider.selectRecipient(recipient);
+    pageSelector.selectRecipient(recipient);
+    _flowProvider.reset(pageSelector);
+    _clearSearchField();
+  }
+
+  void _handleRecipientCleared() {
+    final pageSelector = context.read<PageSelectorProvider>();
+    final recipientProvider = context.read<RecipientProvider>();
+
+    recipientProvider.selectRecipient(null);
+    pageSelector.selectRecipient(null);
+    _flowProvider.reset(pageSelector);
+    _clearSearchField();
+  }
+
+  void _clearSearchField() {
+    _searchController.clear();
+    _searchFocusNode.unfocus();
+    context.read<RecipientProvider>().setQuery('');
+  }
+
+  void _handleSendPayment() {
+    // TODO: Handle Payment logic
+    // AmplitudeService.paymentInitiated();
  }

  @override
  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final dimensions = AppDimensions();
-    final recipientProvider = context.watch<RecipientProvider>();
-    final methodsProvider = context.watch<PaymentMethodsProvider>();
-    final recipient = recipientProvider.selectedRecipient;
+    final pageSelector = context.watch<PageSelectorProvider>();
+    _flowProvider.syncWithSelector(pageSelector);

-    // Show loading state for payment methods
-    if (methodsProvider.isLoading) {
-      return const Center(child: CircularProgressIndicator());
-    }
-
-    // Show error state for payment methods
-    if (methodsProvider.error != null) {
-      return Center(
-        child: Text('Error: ${methodsProvider.error}'),
-      );
-    }
-
-    return Align(
-      alignment: Alignment.topCenter,
-      child: ConstrainedBox(
-        constraints: BoxConstraints(maxWidth: dimensions.maxContentWidth),
-        child: Material(
-          elevation: dimensions.elevationSmall,
-          borderRadius: BorderRadius.circular(dimensions.borderRadiusMedium),
-          color: theme.colorScheme.onSecondary,
-          child: Padding(
-            padding: EdgeInsets.all(dimensions.paddingLarge),
-            child: SingleChildScrollView(
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  // Back button
-                  Align(
-                    alignment: Alignment.topLeft,
-                    child: IconButton(
-                      icon: const Icon(Icons.arrow_back),
-                      onPressed: () {
-                        widget.onBack?.call(recipient);
-                      },
-                    ),
-                  ),
-                  SizedBox(height: dimensions.paddingSmall),
-                  
-                  // Header
-                  Row(
-                    children: [
-                      Icon(
-                        Icons.send_rounded, 
-                        color: theme.colorScheme.primary, 
-                        size: dimensions.iconSizeLarge
-                      ),
-                      SizedBox(width: dimensions.spacingSmall),
-                      Text(
-                        AppLocalizations.of(context)!.sendTo,
-                        style: theme.textTheme.headlineSmall?.copyWith(
-                          fontWeight: FontWeight.bold
-                        ),
-                      ),
-                    ],
-                  ),
-                  SizedBox(height: dimensions.paddingXXLarge),
-
-                  // Payment method dropdown (user's payment methods)
-                  PaymentMethodDropdown(
-                    methods: methodsProvider.methods,
-                    initialValue: methodsProvider.selectedMethod,
-                    onChanged: (method) {
-                      methodsProvider.selectMethod(method);
-                    },
-                  ),
-                  SizedBox(height: dimensions.paddingXLarge),
-
-                  // Recipient section (only show if we have a recipient)
-                  if (recipient != null) ...[
-                    RecipientHeader(recipient: recipient),
-                    SizedBox(height: dimensions.paddingMedium),
-                    
-                    // Payment type selector (recipient's payment methods)
-                    if (_availableTypes.isNotEmpty)
-                      PaymentTypeSelector(
-                        availableTypes: _availableTypes,
-                        selectedType: _selectedType,
-                        onSelected: (type) => setState(() => _selectedType = type),
-                      ),
-                    SizedBox(height: dimensions.paddingMedium),
-                  ],
-
-                  // Payment details section
-                  PaymentDetailsSection(
-                    isFormVisible: recipient == null || _isFormVisible,
-                    onToggle: recipient != null 
-                        ? () => setState(() => _isFormVisible = !_isFormVisible)
-                        : null, // No toggle when creating new payment
-                    selectedType: _selectedType,
-                    data: _availableTypes[_selectedType],
-                    isEditable: recipient == null,
-                  ),
-
-                  const PaymentFormWidget(),
-
-                  SizedBox(height: dimensions.paddingXXXLarge),
-
-                  Center(
-                    child: SizedBox(
-                      width: dimensions.buttonWidth,
-                      height: dimensions.buttonHeight,
-                      child: InkWell(
-                        borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
-                        onTap: () =>
-                          // TODO: Handle Payment logic
-                          AmplitudeService.pageOpened(PayoutDestination.payment), //TODO: replace with payment event
-                        child: Container(
-                          decoration: BoxDecoration(
-                            color: theme.colorScheme.primary,
-                            borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
-                          ),
-                          child: Center(
-                            child: Text(
-                              AppLocalizations.of(context)!.send,
-                              style: theme.textTheme.bodyLarge?.copyWith(
-                                color: theme.colorScheme.onSecondary,
-                                fontWeight: FontWeight.w600,
-                              ),
-                            ),
-                          ),
-                        ),
-                      ),
-                    ),
-                  ),
-                  SizedBox(height: dimensions.paddingLarge),
-                ],
-              ),
-            ),
-          ),
-        ),
+    return ChangeNotifierProvider.value(
+      value: _flowProvider,
+      child: PaymentPageBody(
+        onBack: widget.onBack,
+        searchController: _searchController,
+        searchFocusNode: _searchFocusNode,
+        onSearchChanged: _handleSearchChanged,
+        onRecipientSelected: _handleRecipientSelected,
+        onRecipientCleared: _handleRecipientCleared,
+        onSend: _handleSendPayment,
      ),
    );
  }
-}
+}
--- a/frontend/pweb/lib/pages/payment_methods/payment_details.dart
+++ b/frontend/pweb/lib/pages/payment_methods/payment_details.dart
@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+
+
+class PaymentDetailsSection extends StatelessWidget {
+  final bool isFormVisible;
+  final VoidCallback? onToggle;
+  final PaymentType selectedType;
+  final Object? data;
+  final bool isEditable;
+
+  const PaymentDetailsSection({
+    super.key,
+    required this.isFormVisible,
+    this.onToggle,
+    required this.selectedType,
+    required this.data,
+    required this.isEditable,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+
+    return PaymentDetailsSection(
+      isFormVisible: isFormVisible,
+      onToggle: onToggle,
+      selectedType: selectedType,
+      data: data,
+      isEditable: isEditable,
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/send_button.dart
+++ b/frontend/pweb/lib/pages/payment_methods/send_button.dart
@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/utils/dimensions.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class SendButton extends StatelessWidget {
+  final VoidCallback onPressed;
+
+  const SendButton({super.key, required this.onPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final dimensions = AppDimensions();
+
+    return Center(
+      child: SizedBox(
+        width: dimensions.buttonWidth,
+        height: dimensions.buttonHeight,
+        child: InkWell(
+          borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
+          onTap: onPressed,
+          child: Container(
+            decoration: BoxDecoration(
+              color: theme.colorScheme.primary,
+              borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
+            ),
+            child: Center(
+              child: Text(
+                AppLocalizations.of(context)!.send,
+                style: theme.textTheme.bodyLarge?.copyWith(
+                  color: theme.colorScheme.onSecondary,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/widgets/payment_info_section.dart
+++ b/frontend/pweb/lib/pages/payment_methods/widgets/payment_info_section.dart
@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/payment/type.dart';
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/payment_methods/form.dart';
+import 'package:pweb/pages/payment_methods/widgets/section_title.dart';
+import 'package:pweb/providers/page_selector.dart';
+import 'package:pweb/providers/payment_flow_provider.dart';
+import 'package:pweb/utils/dimensions.dart';
+import 'package:pweb/utils/payment/selector_type.dart';
+
+
+class PaymentInfoSection extends StatelessWidget {
+  final AppDimensions dimensions;
+  final PageSelectorProvider pageSelector;
+  final PaymentFlowProvider flowProvider;
+  final Recipient? recipient;
+
+  const PaymentInfoSection({
+    super.key,
+    required this.dimensions,
+    required this.pageSelector,
+    required this.flowProvider,
+    required this.recipient,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final hasRecipient = recipient != null;
+    final availableTypes = hasRecipient
+        ? pageSelector.getAvailablePaymentTypes()
+        : {for (final type in PaymentType.values) type: type};
+
+    if (hasRecipient && availableTypes.isEmpty) {
+      return const Text('This recipient has no available payment details.');
+    }
+
+    final selectedType = flowProvider.selectedType;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const SectionTitle('Payment info'),
+        SizedBox(height: dimensions.paddingSmall),
+        PaymentTypeSelector(
+          availableTypes: availableTypes,
+          selectedType: selectedType,
+          onSelected: (type) => flowProvider.selectType(
+            type,
+            resetManualData: !hasRecipient,
+          ),
+        ),
+        SizedBox(height: dimensions.paddingMedium),
+        PaymentMethodForm(
+          selectedType: selectedType,
+          onChanged: (data) {
+            if (!hasRecipient) {
+              flowProvider.setManualPaymentData(data);
+            }
+          },
+          initialData: hasRecipient ? availableTypes[selectedType] : flowProvider.manualPaymentData,
+          isEditable: !hasRecipient,
+        ),
+      ],
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/widgets/payment_page_body.dart
+++ b/frontend/pweb/lib/pages/payment_methods/widgets/payment_page_body.dart
@@ -0,0 +1,144 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/payment_methods/header.dart';
+import 'package:pweb/pages/payment_methods/method_selector.dart';
+import 'package:pweb/pages/payment_methods/send_button.dart';
+import 'package:pweb/pages/dashboard/payouts/payment_form.dart';
+import 'package:pweb/pages/payment_methods/widgets/payment_info_section.dart';
+import 'package:pweb/pages/payment_methods/widgets/recipient_section.dart';
+import 'package:pweb/pages/payment_methods/widgets/section_title.dart';
+import 'package:pweb/providers/page_selector.dart';
+import 'package:pweb/providers/payment_flow_provider.dart';
+import 'package:pweb/providers/payment_methods.dart';
+import 'package:pweb/providers/recipient.dart';
+import 'package:pweb/utils/dimensions.dart';
+
+
+class PaymentPageBody extends StatelessWidget {
+  final ValueChanged<Recipient?>? onBack;
+  final TextEditingController searchController;
+  final FocusNode searchFocusNode;
+  final ValueChanged<String> onSearchChanged;
+  final ValueChanged<Recipient> onRecipientSelected;
+  final VoidCallback onRecipientCleared;
+  final VoidCallback onSend;
+
+  const PaymentPageBody({
+    super.key,
+    required this.onBack,
+    required this.searchController,
+    required this.searchFocusNode,
+    required this.onSearchChanged,
+    required this.onRecipientSelected,
+    required this.onRecipientCleared,
+    required this.onSend,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final dimensions = AppDimensions();
+    final pageSelector = context.watch<PageSelectorProvider>();
+    final methodsProvider = context.watch<PaymentMethodsProvider>();
+    final recipientProvider = context.watch<RecipientProvider>();
+    final flowProvider = context.watch<PaymentFlowProvider>();
+    final recipient = pageSelector.selectedRecipient;
+
+    if (methodsProvider.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (methodsProvider.error != null) {
+      return Center(child: Text('Error: ${methodsProvider.error}'));
+    }
+
+    return Align(
+      alignment: Alignment.topCenter,
+      child: ConstrainedBox(
+        constraints: BoxConstraints(maxWidth: dimensions.maxContentWidth),
+        child: Material(
+          elevation: dimensions.elevationSmall,
+          borderRadius: BorderRadius.circular(dimensions.borderRadiusMedium),
+          color: Theme.of(context).colorScheme.onSecondary,
+          child: Padding(
+            padding: EdgeInsets.all(dimensions.paddingLarge),
+            child: SingleChildScrollView(
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  PaymentBackButton(onBack: onBack, pageSelector: pageSelector),
+                  SizedBox(height: dimensions.paddingSmall),
+                  PaymentHeader(),
+                  SizedBox(height: dimensions.paddingXXLarge),
+
+                  const SectionTitle('Source of funds'),
+                  SizedBox(height: dimensions.paddingSmall),
+                  PaymentMethodSelector(
+                    methodsProvider: methodsProvider,
+                    onMethodChanged: methodsProvider.selectMethod,
+                  ),
+                  SizedBox(height: dimensions.paddingXLarge),
+
+                  RecipientSection(
+                    recipient: recipient,
+                    dimensions: dimensions,
+                    recipientProvider: recipientProvider,
+                    searchController: searchController,
+                    searchFocusNode: searchFocusNode,
+                    onSearchChanged: onSearchChanged,
+                    onRecipientSelected: onRecipientSelected,
+                    onRecipientCleared: onRecipientCleared,
+                  ),
+
+                  SizedBox(height: dimensions.paddingXLarge),
+
+                  PaymentInfoSection(
+                    dimensions: dimensions,
+                    pageSelector: pageSelector,
+                    flowProvider: flowProvider,
+                    recipient: recipient,
+                  ),
+
+                  SizedBox(height: dimensions.paddingLarge),
+                  const PaymentFormWidget(),
+
+                  SizedBox(height: dimensions.paddingXXXLarge),
+                  SendButton(onPressed: onSend),
+                  SizedBox(height: dimensions.paddingLarge),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class PaymentBackButton extends StatelessWidget {
+  final ValueChanged<Recipient?>? onBack;
+  final PageSelectorProvider pageSelector;
+
+  const PaymentBackButton({
+    super.key,
+    required this.onBack,
+    required this.pageSelector,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: Alignment.topLeft,
+      child: IconButton(
+        icon: const Icon(Icons.arrow_back),
+        onPressed: () {
+          onBack?.call(pageSelector.selectedRecipient);
+          pageSelector.goBackFromPayment();
+        },
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/widgets/recipient_section.dart
+++ b/frontend/pweb/lib/pages/payment_methods/widgets/recipient_section.dart
@@ -0,0 +1,187 @@
+import 'package:flutter/material.dart';
+
+import 'package:pshared/models/recipient/recipient.dart';
+
+import 'package:pweb/pages/address_book/page/search.dart';
+import 'package:pweb/pages/payment_methods/widgets/section_title.dart';
+import 'package:pweb/providers/recipient.dart';
+import 'package:pweb/utils/dimensions.dart';
+
+
+class RecipientSection extends StatelessWidget {
+  final Recipient? recipient;
+  final AppDimensions dimensions;
+  final RecipientProvider recipientProvider;
+  final TextEditingController searchController;
+  final FocusNode searchFocusNode;
+  final ValueChanged<String> onSearchChanged;
+  final ValueChanged<Recipient> onRecipientSelected;
+  final VoidCallback onRecipientCleared;
+
+  const RecipientSection({
+    super.key,
+    required this.recipient,
+    required this.dimensions,
+    required this.recipientProvider,
+    required this.searchController,
+    required this.searchFocusNode,
+    required this.onSearchChanged,
+    required this.onRecipientSelected,
+    required this.onRecipientCleared,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (recipient != null) {
+      return SelectedRecipientCard(
+        dimensions: dimensions,
+        recipient: recipient!,
+        onClear: onRecipientCleared,
+      );
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const SectionTitle('Recipient'),
+        SizedBox(height: dimensions.paddingSmall),
+        RecipientSearchField(
+          controller: searchController,
+          onChanged: onSearchChanged,
+          focusNode: searchFocusNode,
+        ),
+        if (recipientProvider.query.isNotEmpty) ...[
+          SizedBox(height: dimensions.paddingMedium),
+          RecipientSearchResults(
+            dimensions: dimensions,
+            recipientProvider: recipientProvider,
+            onRecipientSelected: onRecipientSelected,
+          ),
+        ],
+      ],
+    );
+  }
+}
+
+class SelectedRecipientCard extends StatelessWidget {
+  final AppDimensions dimensions;
+  final Recipient recipient;
+  final VoidCallback onClear;
+
+  const SelectedRecipientCard({
+    super.key,
+    required this.dimensions,
+    required this.recipient,
+    required this.onClear,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Container(
+      width: double.infinity,
+      padding: EdgeInsets.all(dimensions.paddingMedium),
+      decoration: BoxDecoration(
+        color: theme.colorScheme.surfaceVariant.withOpacity(0.4),
+        borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const SectionTitle('Recipient'),
+          SizedBox(height: dimensions.paddingSmall),
+          Row(
+            children: [
+              CircleAvatar(
+                child: Text(recipient.name.substring(0, 1).toUpperCase()),
+              ),
+              SizedBox(width: dimensions.paddingMedium),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(recipient.name, style: theme.textTheme.titleMedium),
+                    if (recipient.email.isNotEmpty)
+                      Text(
+                        recipient.email,
+                        style: theme.textTheme.bodyMedium?.copyWith(
+                          color: theme.colorScheme.onSurface.withOpacity(0.7),
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+              TextButton(
+                onPressed: onClear,
+                child: const Text('Choose another recipient'),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class RecipientSearchResults extends StatelessWidget {
+  final AppDimensions dimensions;
+  final RecipientProvider recipientProvider;
+  final ValueChanged<Recipient> onRecipientSelected;
+
+  const RecipientSearchResults({
+    super.key,
+    required this.dimensions,
+    required this.recipientProvider,
+    required this.onRecipientSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (recipientProvider.isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (recipientProvider.error != null) {
+      return Text(
+        recipientProvider.error!,
+        style: TextStyle(color: Theme.of(context).colorScheme.error),
+      );
+    }
+
+    if (recipientProvider.recipients.isEmpty) {
+      return const Text('No recipients yet.');
+    }
+
+    final results = recipientProvider.filteredRecipients;
+
+    if (results.isEmpty) {
+      return const Text('No recipients found for this query.');
+    }
+
+    return ConstrainedBox(
+      constraints: const BoxConstraints(maxHeight: 240),
+      child: ListView.separated(
+        shrinkWrap: true,
+        itemCount: results.length,
+        separatorBuilder: (_, __) => SizedBox(height: dimensions.paddingSmall),
+        itemBuilder: (context, index) {
+          final recipient = results[index];
+          return ListTile(
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(dimensions.borderRadiusSmall),
+            ),
+            tileColor: Theme.of(context).colorScheme.surfaceVariant.withOpacity(0.2),
+            leading: CircleAvatar(
+              child: Text(recipient.name.substring(0, 1).toUpperCase()),
+            ),
+            title: Text(recipient.name),
+            subtitle: Text(recipient.email),
+            trailing: const Icon(Icons.arrow_forward_ios_rounded, size: 16),
+            onTap: () => onRecipientSelected(recipient),
+          );
+        },
+      ),
+    );
+  }
+}
--- a/frontend/pweb/lib/pages/payment_methods/widgets/section_title.dart
+++ b/frontend/pweb/lib/pages/payment_methods/widgets/section_title.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+
+class SectionTitle extends StatelessWidget {
+  final String title;
+
+  const SectionTitle(this.title, {super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      title,
+      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+            fontWeight: FontWeight.w600,
+          ),
+    );
+  }
+}