1 files changed, 68 insertions, 5 deletions

diff --git a/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx
index 3bf891504..bb408e497 100644
--- a/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx
+++ b/packages/bank-ui/src/pages/PaytoWireTransferForm.tsx
@@ -111,6 +111,17 @@ export function PaytoWireTransferForm({
       ? ("x-taler-bank" as const)
       : ("iban" as const);
 
+  const wireFee =
+    config.wire_transfer_fees === undefined
+      ? Amounts.zeroOfCurrency(config.currency)
+        // Amounts.parseOrThrow("YEIN:2.5")
+      : Amounts.parseOrThrow(config.wire_transfer_fees);
+
+  const amountAfterFee =
+    !parsedAmount || Amounts.cmp(parsedAmount, wireFee) < 1
+      ? undefined
+      : Amounts.sub(parsedAmount, wireFee).amount;
+
   const errorsWire = undefinedIfEmpty({
     account: !account
       ? i18n.str`Required`
@@ -124,7 +135,7 @@ export function PaytoWireTransferForm({
       ? i18n.str`Required`
       : !parsedAmount
         ? i18n.str`Not valid`
-        : validateAmount(parsedAmount, limit, i18n),
+        : validateAmount(parsedAmount, limit, wireFee, i18n),
   });
 
   const parsed = !rawPaytoInput ? undefined : parsePaytoUri(rawPaytoInput);
@@ -134,7 +145,7 @@ export function PaytoWireTransferForm({
       ? i18n.str`Required`
       : !parsed
         ? i18n.str`Does not follow the pattern`
-        : validateRawPayto(parsed, limit, url.host, i18n, paytoType),
+        : validateRawPayto(parsed, limit, wireFee, url.host, i18n, paytoType),
   });
 
   async function doSend() {
@@ -479,9 +490,9 @@ export function PaytoWireTransferForm({
           e.preventDefault();
         }}
       >
-        <div class="p-4 sm:p-8">
+        <div class="m-4">
           {!isRawPayto ? (
-            <div class="grid max-w-xs grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+            <div class="grid max-w-xs grid-cols-1 gap-x-6 gap-y-8 ">
               {(() => {
                 switch (paytoType) {
                   case "x-taler-bank": {
@@ -623,6 +634,53 @@ export function PaytoWireTransferForm({
             </div>
           )}
         </div>
+        <div class="px-4 my-4">
+          <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+            <div class="sm:col-span-6">
+              <dl class="mt-4 space-y-4">
+                {Amounts.isZero(wireFee) ? undefined : (
+                  <Fragment>
+                    <div class="flex items-center justify-between ">
+                      <dt class="flex items-center text-sm text-gray-600">
+                        <span>
+                          <i18n.Translate>Fee</i18n.Translate>
+                        </span>
+                      </dt>
+                      <dd class="text-sm text-gray-900">
+                        <RenderAmount
+                          value={wireFee}
+                          negative
+                          withColor
+                          spec={config.currency_specification}
+                        />
+                      </dd>
+                    </div>
+                  </Fragment>
+                )}{" "}
+                {!parsedAmount || !amountAfterFee ? undefined : (
+                  <Fragment>
+                    <div class="flex items-center justify-between border-t-2 afu pt-4">
+                      <dt class="flex items-center text-sm text-gray-600">
+                        <span>
+                          <i18n.Translate>
+                            Recipient will receive
+                          </i18n.Translate>
+                        </span>
+                      </dt>
+                      <dd class="text-sm text-gray-900">
+                        <RenderAmount
+                          value={amountAfterFee}
+                          withColor
+                          spec={config.currency_specification}
+                        />
+                      </dd>
+                    </div>
+                  </Fragment>
+                )}
+              </dl>
+            </div>
+          </div>
+        </div>
         <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
           {routeCancel ? (
             <a
@@ -768,6 +826,7 @@ export function RenderAmount({
 function validateRawPayto(
   parsed: PaytoUri,
   limit: AmountJson,
+  fee: AmountJson,
   host: string,
   i18n: InternationalizationAPI,
   type: "iban" | "x-taler-bank",
@@ -811,7 +870,7 @@ function validateRawPayto(
   if (!amount) {
     return i18n.str`The "amount" parameter is not valid`;
   }
-  result = validateAmount(amount, limit, i18n);
+  result = validateAmount(amount, limit, fee, i18n);
   if (result) return result;
 
   if (!parsed.params.message) {
@@ -827,6 +886,7 @@ function validateRawPayto(
 function validateAmount(
   amount: AmountJson,
   limit: AmountJson,
+  fee: AmountJson,
   i18n: InternationalizationAPI,
 ): TranslatedString | undefined {
   if (amount.currency !== limit.currency) {
@@ -835,6 +895,9 @@ function validateAmount(
   if (Amounts.isZero(amount)) {
     return i18n.str`Can't transfer zero amount`;
   }
+  if (Amounts.cmp(amount, fee) < 1) {
+    return i18n.str`Should be higher than fees`;
+  }
   if (Amounts.cmp(limit, amount) === -1) {
     return i18n.str`Balance is not enough`;
   }