feat: update fee details (#146)

lib/features/payin/deposit_page.dart

@@ -69,16 +69,8 @@ class DepositPage extends HookConsumerWidget {
                           ),
                           const SizedBox(height: Grid.xl),
                           FeeDetails(
-                            payinCurrency: selectedOffering
-                                    .value?.data.payin.currencyCode ??
-                                '',
-                            payoutCurrency: selectedOffering
-                                    .value?.data.payout.currencyCode ??
-                                '',
-                            exchangeRate: selectedOffering
-                                    .value?.data.payoutUnitsPerPayinUnit ??
-                                '',
-                            serviceFee: '0',
+                            transactionType: TransactionType.deposit,
+                            offering: selectedOffering.value?.data,
                           ),
                         ],
                       ),

lib/features/payin/payin.dart

@@ -161,7 +161,7 @@ class Payin extends HookWidget {
   Widget _buildPayinLabel(BuildContext context) {
     final style = Theme.of(context).textTheme.bodyLarge;
     final labels = {
-      TransactionType.deposit: Loc.of(context).youDeposit,
+      TransactionType.deposit: Loc.of(context).youPay,
       TransactionType.withdraw: Loc.of(context).youWithdraw,
       TransactionType.send: Loc.of(context).youSend,
     };

lib/features/payment/review_payment_page.dart

@@ -64,7 +64,7 @@ class ReviewPaymentPage extends HookConsumerWidget {
                           ),
                         ),
                       ),
-                      _buildSubmitButton(context),
+                      _buildSubmitButton(context, quote.data),
                     ],
                   )
                 : _loading(),
@@ -136,7 +136,10 @@ class ReviewPaymentPage extends HookConsumerWidget {
             ],
           ),
           const SizedBox(height: Grid.xxs),
-          _buildPayinLabel(context),
+          Text(
+            Loc.of(context).requestedAmount,
+            style: Theme.of(context).textTheme.bodySmall,
+          ),
           const SizedBox(height: Grid.sm),
           Row(
             crossAxisAlignment: CrossAxisAlignment.baseline,
@@ -161,26 +164,12 @@ class ReviewPaymentPage extends HookConsumerWidget {
         ],
       );
 
-  Widget _buildPayinLabel(BuildContext context) {
-    final style = Theme.of(context).textTheme.bodySmall;
-    final labels = {
-      TransactionType.deposit: Loc.of(context).youPay,
-      TransactionType.withdraw: Loc.of(context).withdrawAmount,
-      TransactionType.send: Loc.of(context).youSend,
-    };
-
-    final label =
-        labels[paymentState.transactionType] ?? 'unknown transaction type';
-
-    return Text(label, style: style);
-  }
-
   Widget _buildPayoutLabel(BuildContext context) {
     final style = Theme.of(context).textTheme.bodySmall;
     final labels = {
-      TransactionType.deposit: Loc.of(context).depositAmount,
-      TransactionType.withdraw: Loc.of(context).youGet,
-      TransactionType.send: Loc.of(context).theyGet,
+      TransactionType.deposit: Loc.of(context).totalToAccount,
+      TransactionType.withdraw: Loc.of(context).totalToYou,
+      TransactionType.send: Loc.of(context).totalToRecipient,
     };
 
     final label =
@@ -189,25 +178,11 @@ class ReviewPaymentPage extends HookConsumerWidget {
     return Text(label, style: style);
   }
 
-  // TODO(ethan-tbd): clean up this widget, https://github.com/TBD54566975/didpay/issues/143
   Widget _buildFeeDetails(BuildContext context, QuoteData quote) => Padding(
         padding: const EdgeInsets.symmetric(vertical: Grid.lg),
         child: FeeDetails(
-          payinCurrency: Loc.of(context).usd,
-          payoutCurrency: quote.payin.currencyCode != Loc.of(context).usd
-              ? quote.payin.currencyCode
-              : quote.payout.currencyCode,
-          exchangeRate: paymentState.exchangeRate,
-          serviceFee: double.parse(quote.payout.fee ?? '0').toStringAsFixed(2),
-          total: paymentState.transactionType == TransactionType.deposit
-              ? (double.parse(
-                        quote.payin.amount.replaceAll(',', ''),
-                      ) -
-                      double.parse(quote.payin.fee ?? '0'))
-                  .toStringAsFixed(2)
-              : (double.parse(quote.payout.amount.replaceAll(',', '')) -
-                      double.parse(quote.payout.fee ?? '0'))
-                  .toStringAsFixed(2),
+          transactionType: paymentState.transactionType,
+          quote: quote,
         ),
       );
 
@@ -236,14 +211,17 @@ class ReviewPaymentPage extends HookConsumerWidget {
         ),
       );
 
-  Widget _buildSubmitButton(BuildContext context) => FilledButton(
+  Widget _buildSubmitButton(BuildContext context, QuoteData quote) =>
+      FilledButton(
         onPressed: () {
           Navigator.of(context).push(
             MaterialPageRoute(
               builder: (context) => const PaymentConfirmationPage(),
             ),
           );
         },
-        child: Text(Loc.of(context).submit),
+        child: Text(
+          '${Loc.of(context).pay} ${FeeDetails.calculateTotalAmount(quote)} ${quote.payin.currencyCode}',
+        ),
       );
 }

lib/features/payout/payout.dart

@@ -97,10 +97,16 @@ class Payout extends HookWidget {
     }
   }
 
-  Widget _buildPayoutLabel(BuildContext context) => Text(
-        transactionType == TransactionType.send
-            ? Loc.of(context).theyGet
-            : Loc.of(context).youGet,
-        style: Theme.of(context).textTheme.bodyLarge,
-      );
+  Widget _buildPayoutLabel(BuildContext context) {
+    final style = Theme.of(context).textTheme.bodyLarge;
+    final labels = {
+      TransactionType.deposit: Loc.of(context).youDeposit,
+      TransactionType.withdraw: Loc.of(context).youGet,
+      TransactionType.send: Loc.of(context).theyGet,
+    };
+
+    final label = labels[transactionType] ?? 'unknown transaction type';
+
+    return Text(label, style: style);
+  }
 }

lib/features/payout/withdraw_page.dart

@@ -69,16 +69,8 @@ class WithdrawPage extends HookConsumerWidget {
                           ),
                           const SizedBox(height: Grid.xl),
                           FeeDetails(
-                            payinCurrency: selectedOffering
-                                    .value?.data.payin.currencyCode ??
-                                '',
-                            payoutCurrency: selectedOffering
-                                    .value?.data.payout.currencyCode ??
-                                '',
-                            exchangeRate: selectedOffering
-                                    .value?.data.payoutUnitsPerPayinUnit ??
-                                '',
-                            serviceFee: '0',
+                            transactionType: TransactionType.withdraw,
+                            offering: selectedOffering.value?.data,
                           ),
                         ],
                       ),

lib/features/remittance/remittance_page.dart

@@ -75,16 +75,8 @@ class RemittancePage extends HookConsumerWidget {
                           ),
                           const SizedBox(height: Grid.xl),
                           FeeDetails(
-                            payinCurrency: selectedOffering
-                                    .value?.data.payin.currencyCode ??
-                                '',
-                            payoutCurrency: selectedOffering
-                                    .value?.data.payout.currencyCode ??
-                                '',
-                            exchangeRate: selectedOffering
-                                    .value?.data.payoutUnitsPerPayinUnit ??
-                                '',
-                            serviceFee: '0',
+                            transactionType: TransactionType.send,
+                            offering: selectedOffering.value?.data,
                           ),
                         ],
                       ),

lib/l10n/app_en.arb

@@ -100,5 +100,19 @@
     "youSend": "You send",
     "theyGet": "They get",
     "sendMoneyAbroad": "Send money abroad",
-    "selectCountryToGetStarted": "Select a country to get started"
+    "selectCountryToGetStarted": "Select a country to get started",
+    "exchangeRate": "Exchange rate",
+    "txnTypeFee": "{txnType} fee",
+    "@txnTypeFee": {
+        "placeholders": {
+            "txnType": {
+                "type": "String"
+            }
+        }
+    },
+    "requestedAmount": "Requested amount",
+    "totalToAccount": "Total to account",
+    "totalToYou": "Total to you",
+    "totalToRecipient": "Total to recipient",
+    "pay": "Pay"
 }

lib/l10n/app_localizations.dart

@@ -558,6 +558,48 @@ abstract class Loc {
   /// In en, this message translates to:
   /// **'Select a country to get started'**
   String get selectCountryToGetStarted;
+
+  /// No description provided for @exchangeRate.
+  ///
+  /// In en, this message translates to:
+  /// **'Exchange rate'**
+  String get exchangeRate;
+
+  /// No description provided for @txnTypeFee.
+  ///
+  /// In en, this message translates to:
+  /// **'{txnType} fee'**
+  String txnTypeFee(String txnType);
+
+  /// No description provided for @requestedAmount.
+  ///
+  /// In en, this message translates to:
+  /// **'Requested amount'**
+  String get requestedAmount;
+
+  /// No description provided for @totalToAccount.
+  ///
+  /// In en, this message translates to:
+  /// **'Total to account'**
+  String get totalToAccount;
+
+  /// No description provided for @totalToYou.
+  ///
+  /// In en, this message translates to:
+  /// **'Total to you'**
+  String get totalToYou;
+
+  /// No description provided for @totalToRecipient.
+  ///
+  /// In en, this message translates to:
+  /// **'Total to recipient'**
+  String get totalToRecipient;
+
+  /// No description provided for @pay.
+  ///
+  /// In en, this message translates to:
+  /// **'Pay'**
+  String get pay;
 }
 
 class _LocDelegate extends LocalizationsDelegate<Loc> {

lib/l10n/app_localizations_en.dart

@@ -243,4 +243,27 @@ class LocEn extends Loc {
 
   @override
   String get selectCountryToGetStarted => 'Select a country to get started';
+
+  @override
+  String get exchangeRate => 'Exchange rate';
+
+  @override
+  String txnTypeFee(String txnType) {
+    return '$txnType fee';
+  }
+
+  @override
+  String get requestedAmount => 'Requested amount';
+
+  @override
+  String get totalToAccount => 'Total to account';
+
+  @override
+  String get totalToYou => 'Total to you';
+
+  @override
+  String get totalToRecipient => 'Total to recipient';
+
+  @override
+  String get pay => 'Pay';
 }