redesigned payment page + a lot of fixes

frontend/pweb/lib/pages/dashboard/payouts/form.dart

@@ -1,8 +1,13 @@
 import 'package:flutter/material.dart';
 
-import 'package:pweb/pages/dashboard/payouts/amount.dart';
+import 'package:provider/provider.dart';
+
+import 'package:pweb/controllers/payouts/quotation.dart';
+import 'package:pweb/models/dashboard/quote_status_data.dart';
+import 'package:pweb/pages/dashboard/payouts/amount/widget.dart';
 import 'package:pweb/pages/dashboard/payouts/fee_payer.dart';
-import 'package:pweb/pages/dashboard/payouts/quote_status/quote_status.dart';
+import 'package:pweb/pages/dashboard/payouts/quote_status/widgets/card.dart';
+import 'package:pweb/pages/dashboard/payouts/quote_status/widgets/refresh_section.dart';
 import 'package:pweb/pages/dashboard/payouts/summary/widget.dart';
 
 import 'package:pweb/generated/i18n/app_localizations.dart';
@@ -12,34 +17,134 @@ class PaymentFormWidget extends StatelessWidget {
   const PaymentFormWidget({super.key});
 
   static const double _smallSpacing = 5;
-  static const double _mediumSpacing = 10;
-  static const double _largeSpacing = 16;
+  static const double _mediumSpacing = 12;
+  static const double _largeSpacing = 20;
   static const double _extraSpacing = 15;
+  static const double _columnSpacing = 24;
+  static const double _narrowWidth = 560;
 
 
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final loc = AppLocalizations.of(context)!;
+    final controller = context.watch<QuotationController>();
+    final quoteStatus = QuoteStatusData.resolve(
+      controller: controller,
+      loc: loc,
+    );
 
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Text(loc.details, style: theme.textTheme.titleMedium),
-        const SizedBox(height: _smallSpacing),
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isNarrow = constraints.maxWidth < _narrowWidth;
 
-        const PaymentAmountWidget(),
+        final detailsHeader = Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(loc.details, style: theme.textTheme.titleMedium),
+            const SizedBox(height: _smallSpacing),
+          ],
+        );
 
-        const SizedBox(height: _mediumSpacing),
+        final quoteCard = QuoteStatusCard(
+          statusType: quoteStatus.statusType,
+          isLoading: quoteStatus.isLoading,
+          statusText: quoteStatus.statusText,
+          helperText: quoteStatus.helperText,
+          canRefresh: quoteStatus.canRefresh,
+          showPrimaryRefresh: quoteStatus.showPrimaryRefresh,
+          onRefresh: controller.refreshQuotation,
+        );
 
-        FeePayerSwitch(spacing: _mediumSpacing, style: theme.textTheme.titleMedium),
+        final autoRefreshSection = QuoteAutoRefreshSection(
+          autoRefreshMode: quoteStatus.autoRefreshMode,
+          canRefresh: quoteStatus.canRefresh,
+          onModeChanged: controller.setAutoRefreshMode,
+        );
 
-        const SizedBox(height: _largeSpacing),
+        final leftColumn = Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const PaymentAmountWidget(),
+            const SizedBox(height: _smallSpacing),
+            FeePayerSwitch(
+              spacing: _smallSpacing,
+              style: theme.textTheme.bodySmall,
+            ),
+            const SizedBox(height: _mediumSpacing),
+            const PaymentSummary(spacing: _extraSpacing),
+          ],
+        );
 
-        const PaymentSummary(spacing: _extraSpacing),
-        const SizedBox(height: _mediumSpacing),
-        const QuoteStatus(spacing: _smallSpacing),
-      ],
+        final rightColumn = Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            quoteCard,
+            const SizedBox(height: _smallSpacing),
+            autoRefreshSection,
+          ],
+        );
+
+        if (isNarrow) {
+          return Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              detailsHeader,
+              leftColumn,
+              const SizedBox(height: _largeSpacing),
+              rightColumn,
+            ],
+          );
+        }
+
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            detailsHeader,
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Expanded(
+                  flex: 3,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      const PaymentAmountWidget(),
+                      const SizedBox(height: _smallSpacing),
+                      FeePayerSwitch(
+                        spacing: _smallSpacing,
+                        style: theme.textTheme.bodySmall,
+                      ),
+                    ],
+                  ),
+                ),
+                const SizedBox(width: _columnSpacing),
+                Expanded(flex: 2, child: quoteCard),
+              ],
+            ),
+            const SizedBox(height: _mediumSpacing),
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const Expanded(
+                  flex: 3,
+                  child: PaymentSummary(spacing: _extraSpacing),
+                ),
+                const SizedBox(width: _columnSpacing),
+                Expanded(
+                  flex: 2,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      autoRefreshSection,
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ],
+        );
+      },
     );
   }
 }