fix #8887 #8896

6 files changed, 136 insertions, 85 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
index af1ef213b..418fef505 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
@@ -18,7 +18,7 @@ import {
   AmountJson,
   AmountString,
   CurrencySpecification,
-  ExchangeListItem
+  ExchangeListItem,
 } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
@@ -85,7 +85,7 @@ export namespace State {
     operationState: "confirmed" | "aborted" | "selected";
     thisWallet: boolean;
     redirectToTx: () => void;
-    confirmTransferUrl?: string,
+    confirmTransferUrl?: string;
     error: undefined;
   }
 
@@ -99,8 +99,8 @@ export namespace State {
     editableAmount: boolean;
 
     bankFee: AmountJson;
-    withdrawalFee: AmountJson;
     toBeReceived: AmountJson;
+    toBeSent: AmountJson;
 
     doWithdrawal: ButtonHandler;
     doSelectExchange: ButtonHandler;
@@ -109,10 +109,12 @@ export namespace State {
     chooseCurrencies: string[];
     selectedCurrency: string;
     changeCurrency: (s: string) => void;
-    conversionInfo: {
-      spec: CurrencySpecification,
-      amount: AmountJson,
-    } | undefined;
+    conversionInfo:
+      | {
+          spec: CurrencySpecification;
+          amount: AmountJson;
+        }
+      | undefined;
 
     ageRestriction?: SelectFieldHandler;
 
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
index f8e27e688..0541bbf3f 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
@@ -391,7 +391,6 @@ function exchangeSelectionState(
   const safeAmount = wInfo.amount
     ? wInfo.amount
     : Amounts.zeroOfCurrency(wInfo.currency);
-  const [choosenAmount, setChoosenAmount] = useState(safeAmount);
 
   if (selectedExchange.status !== "ready") {
     return selectedExchange;
@@ -403,8 +402,9 @@ function exchangeSelectionState(
     | State.Loading => {
     const { i18n } = useTranslationContext();
     const { pushAlertOnError } = useAlertContext();
+
+    const [choosenAmount, setChoosenAmount] = useState(safeAmount);
     const [ageRestricted, setAgeRestricted] = useState(0);
-    const currentExchange = selectedExchange.selected;
 
     const [selectedCurrency, setSelectedCurrency] = useState<string>(
       wInfo.currency,
@@ -417,7 +417,7 @@ function exchangeSelectionState(
       const info = await api.wallet.call(
         WalletApiOperation.GetWithdrawalDetailsForAmount,
         {
-          exchangeBaseUrl: currentExchange.exchangeBaseUrl,
+          exchangeBaseUrl: selectedExchange.selected.exchangeBaseUrl,
           amount: Amounts.stringify(choosenAmount),
           restrictAge: ageRestricted,
         },
@@ -430,13 +430,33 @@ function exchangeSelectionState(
 
       return {
         amount: withdrawAmount,
+        currentExchange: selectedExchange.selected,
         ageRestrictionOptions: info.ageRestrictionOptions,
         accounts: info.withdrawalAccountsList,
       };
-    }, []);
+    }, [choosenAmount, selectedExchange.selected, ageRestricted]);
 
     const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false);
 
+    if (!amountHook) {
+      return { status: "loading", error: undefined };
+    }
+    if (amountHook.hasError) {
+      return {
+        status: "error",
+        error: alertFromError(
+          i18n,
+          i18n.str`Could not load the withdrawal details`,
+          amountHook,
+        ),
+      };
+    }
+    if (!amountHook.response) {
+      return { status: "loading", error: undefined };
+    }
+
+    const currentExchange = amountHook.response.currentExchange;
+
     async function doWithdrawAndCheckError(): Promise<void> {
       try {
         setDoingWithdraw(true);
@@ -458,30 +478,10 @@ function exchangeSelectionState(
       setDoingWithdraw(false);
     }
 
-    if (!amountHook) {
-      return { status: "loading", error: undefined };
-    }
-    if (amountHook.hasError) {
-      return {
-        status: "error",
-        error: alertFromError(
-          i18n,
-          i18n.str`Could not load the withdrawal details`,
-          amountHook,
-        ),
-      };
-    }
-    if (!amountHook.response) {
-      return { status: "loading", error: undefined };
-    }
-
-    const withdrawalFee = Amounts.sub(
-      amountHook.response.amount.raw,
-      amountHook.response.amount.effective,
-    ).amount;
+    const toBeSent = amountHook.response.amount.raw;
     const toBeReceived = amountHook.response.amount.effective;
 
-    const bankFee = wInfo.amount;
+    const bankFee = wInfo.bankFee;
 
     const ageRestrictionOptions =
       amountHook.response.ageRestrictionOptions?.reduce(
@@ -544,6 +544,7 @@ function exchangeSelectionState(
       editableExchange: wInfo.editableExchange,
       currentExchange,
       toBeReceived,
+      toBeSent,
       chooseCurrencies,
       bankFee,
       selectedCurrency,
@@ -551,7 +552,6 @@ function exchangeSelectionState(
         setSelectedCurrency(s);
       },
       conversionInfo,
-      withdrawalFee,
       amount: {
         value: choosenAmount,
         onInput: wInfo.editableAmount
@@ -565,11 +565,11 @@ function exchangeSelectionState(
       ageRestriction,
       doWithdrawal: {
         onClick:
-          doingWithdraw && !amountError
+          doingWithdraw || amountError
             ? undefined
             : pushAlertOnError(doWithdrawAndCheckError),
       },
       cancel,
     };
-  }, []);
+  }, [selectedExchange.selected]);
 }
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
index 1bfafb231..d9b7c380e 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
@@ -48,14 +48,20 @@ export const TermsOfServiceNotYetLoaded = tests.createExample(SuccessView, {
       currency: "USD",
       value: 2,
       fraction: 10000000,
-    }
+    },
   },
+  bankFee: {
+    currency: "EUR",
+    fraction: 0,
+    value: 1,
+  },
+
   doWithdrawal: { onClick: nullFunction },
   currentExchange: {
     exchangeBaseUrl: "https://exchange.demo.taler.net",
     tos: {},
   } as Partial<ExchangeListItem> as any,
-  withdrawalFee: {
+  toBeSent: {
     currency: "USD",
     fraction: 10000000,
     value: 1,
@@ -72,20 +78,19 @@ export const TermsOfServiceNotYetLoaded = tests.createExample(SuccessView, {
 export const AlreadyAborted = tests.createExample(FinalStateOperation, {
   error: undefined,
   status: "already-completed",
-  operationState: "aborted"
+  operationState: "aborted",
 });
 export const AlreadySelected = tests.createExample(FinalStateOperation, {
   error: undefined,
   status: "already-completed",
-  operationState: "selected"
+  operationState: "selected",
 });
 export const AlreadyConfirmed = tests.createExample(FinalStateOperation, {
   error: undefined,
   status: "already-completed",
-  operationState: "confirmed"
+  operationState: "confirmed",
 });
 
-
 export const WithSomeFee = tests.createExample(SuccessView, {
   error: undefined,
   status: "success",
@@ -94,14 +99,20 @@ export const WithSomeFee = tests.createExample(SuccessView, {
       currency: "USD",
       value: 2,
       fraction: 10000000,
-    }
+    },
   },
+  bankFee: {
+    currency: "EUR",
+    fraction: 0,
+    value: 1,
+  },
+
   doWithdrawal: { onClick: nullFunction },
   currentExchange: {
     exchangeBaseUrl: "https://exchange.demo.taler.net",
     tos: {},
   } as Partial<ExchangeListItem> as any,
-  withdrawalFee: {
+  toBeSent: {
     currency: "USD",
     fraction: 10000000,
     value: 1,
@@ -123,14 +134,20 @@ export const WithoutFee = tests.createExample(SuccessView, {
       currency: "USD",
       value: 2,
       fraction: 0,
-    }
+    },
   },
+  bankFee: {
+    currency: "EUR",
+    fraction: 0,
+    value: 1,
+  },
+
   doWithdrawal: { onClick: nullFunction },
   currentExchange: {
     exchangeBaseUrl: "https://exchange.demo.taler.net",
     tos: {},
   } as Partial<ExchangeListItem> as any,
-  withdrawalFee: {
+  toBeSent: {
     currency: "USD",
     fraction: 0,
     value: 0,
@@ -152,14 +169,20 @@ export const EditExchangeUntouched = tests.createExample(SuccessView, {
       currency: "USD",
       value: 2,
       fraction: 10000000,
-    }
+    },
   },
+  bankFee: {
+    currency: "EUR",
+    fraction: 0,
+    value: 1,
+  },
+
   doWithdrawal: { onClick: nullFunction },
   currentExchange: {
     exchangeBaseUrl: "https://exchange.demo.taler.net",
     tos: {},
   } as Partial<ExchangeListItem> as any,
-  withdrawalFee: {
+  toBeSent: {
     currency: "USD",
     fraction: 0,
     value: 0,
@@ -181,14 +204,20 @@ export const EditExchangeModified = tests.createExample(SuccessView, {
       currency: "USD",
       value: 2,
       fraction: 10000000,
-    }
+    },
+  },
+  bankFee: {
+    currency: "EUR",
+    fraction: 0,
+    value: 1,
   },
+
   doWithdrawal: { onClick: nullFunction },
   currentExchange: {
     exchangeBaseUrl: "https://exchange.demo.taler.net",
     tos: {},
   } as Partial<ExchangeListItem> as any,
-  withdrawalFee: {
+  toBeSent: {
     currency: "USD",
     fraction: 0,
     value: 0,
@@ -211,15 +240,21 @@ export const WithAgeRestriction = tests.createExample(SuccessView, {
       currency: "USD",
       value: 2,
       fraction: 10000000,
-    }
+    },
   },
+  bankFee: {
+    currency: "EUR",
+    fraction: 0,
+    value: 1,
+  },
+
   doSelectExchange: {},
   doWithdrawal: { onClick: nullFunction },
   currentExchange: {
     exchangeBaseUrl: "https://exchange.demo.taler.net",
     tos: {},
   } as Partial<ExchangeListItem> as any,
-  withdrawalFee: {
+  toBeSent: {
     currency: "USD",
     fraction: 0,
     value: 0,
@@ -240,8 +275,14 @@ export const WithAlternateCurrenciesNETZBON = tests.createExample(SuccessView, {
       currency: "NETZBON",
       value: 2,
       fraction: 10000000,
-    }
+    },
+  },
+  bankFee: {
+    currency: "EUR",
+    fraction: 0,
+    value: 1,
   },
+
   chooseCurrencies: ["NETZBON", "EUR"],
   selectedCurrency: "NETZBON",
   doWithdrawal: { onClick: nullFunction },
@@ -249,7 +290,7 @@ export const WithAlternateCurrenciesNETZBON = tests.createExample(SuccessView, {
     exchangeBaseUrl: "https://exchange.netzbon.ch",
     tos: {},
   } as Partial<ExchangeListItem> as any,
-  withdrawalFee: {
+  toBeSent: {
     currency: "NETZBON",
     fraction: 10000000,
     value: 1,
@@ -270,27 +311,33 @@ export const WithAlternateCurrenciesEURO = tests.createExample(SuccessView, {
       currency: "NETZBON",
       value: 2,
       fraction: 10000000,
-    }
+    },
+  },
+  bankFee: {
+    currency: "EUR",
+    fraction: 0,
+    value: 1,
   },
+
   chooseCurrencies: ["NETZBON", "EUR"],
   selectedCurrency: "EUR",
-  changeCurrency: () => { },
+  changeCurrency: () => {},
   conversionInfo: {
     spec: {
-      name: "EUR"
+      name: "EUR",
     } as CurrencySpecification,
     amount: {
       currency: "EUR",
       fraction: 10000000,
       value: 1,
-    }
+    },
   },
   doWithdrawal: { onClick: nullFunction },
   currentExchange: {
     exchangeBaseUrl: "https://exchange.netzbon.ch",
     tos: {},
   } as Partial<ExchangeListItem> as any,
-  withdrawalFee: {
+  toBeSent: {
     currency: "NETZBON",
     fraction: 10000000,
     value: 1,
@@ -311,27 +358,32 @@ export const WithAlternateCurrenciesEURO11 = tests.createExample(SuccessView, {
       currency: "NETZBON",
       value: 2,
       fraction: 10000000,
-    }
+    },
   },
   chooseCurrencies: ["NETZBON", "EUR"],
   selectedCurrency: "EUR",
-  changeCurrency: () => { },
+  changeCurrency: () => {},
+  bankFee: {
+    currency: "EUR",
+    fraction: 0,
+    value: 1,
+  },
   conversionInfo: {
     spec: {
-      name: "EUR"
+      name: "EUR",
     } as CurrencySpecification,
     amount: {
       currency: "EUR",
       fraction: 10000000,
       value: 2,
-    }
+    },
   },
   doWithdrawal: { onClick: nullFunction },
   currentExchange: {
     exchangeBaseUrl: "https://exchange.netzbon.ch",
     tos: {},
   } as Partial<ExchangeListItem> as any,
-  withdrawalFee: {
+  toBeSent: {
     currency: "NETZBON",
     fraction: 10000000,
     value: 1,
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
index bce5f71e3..5a75cb4be 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
@@ -123,7 +123,7 @@ describe("Withdraw CTA states", () => {
           editableExchange: false,
           maxAmount: "ARS:1",
           wireFee: "ARS:0",
-          },
+        },
       },
     );
 
@@ -208,7 +208,7 @@ describe("Withdraw CTA states", () => {
           if (state.status !== "success") return;
 
           expect(state.toBeReceived).deep.equal(Amounts.parseOrThrow("ARS:2"));
-          expect(state.withdrawalFee).deep.equal(Amounts.parseOrThrow("ARS:0"));
+          expect(state.toBeSent).deep.equal(Amounts.parseOrThrow("ARS:2"));
           expect(state.amount.value).deep.equal(Amounts.parseOrThrow("ARS:2"));
 
           expect(state.doWithdrawal.onClick).not.undefined;
@@ -302,7 +302,7 @@ describe("Withdraw CTA states", () => {
           if (state.status !== "success") return;
 
           expect(state.toBeReceived).deep.equal(Amounts.parseOrThrow("ARS:2"));
-          expect(state.withdrawalFee).deep.equal(Amounts.parseOrThrow("ARS:0"));
+          expect(state.toBeSent).deep.equal(Amounts.parseOrThrow("ARS:2"));
           expect(state.amount.value).deep.equal(Amounts.parseOrThrow("ARS:2"));
 
           expect(state.doWithdrawal.onClick).not.undefined;
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 86d7248a4..b6a356de8 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -39,6 +39,7 @@ import {
   getAmountWithFee,
 } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
+import { Amounts } from "@gnu-taler/taler-util";
 
 export function FinalStateOperation(state: State.AlreadyCompleted): VNode {
   const { i18n } = useTranslationContext();
@@ -143,8 +144,6 @@ export function FinalStateOperation(state: State.AlreadyCompleted): VNode {
 
 export function SuccessView(state: State.Success): VNode {
   const { i18n } = useTranslationContext();
-  // const currentTosVersionIsAccepted =
-  //   state.currentExchange.tosStatus === ExchangeTosStatus.Accepted;
   return (
     <Fragment>
       <section style={{ textAlign: "left" }}>
@@ -212,9 +211,10 @@ export function SuccessView(state: State.Success): VNode {
               conversion={state.conversionInfo?.amount}
               amount={getAmountWithFee(
                 state.toBeReceived,
-                state.amount.value,
+                state.toBeSent,
                 "credit",
               )}
+              bankFee={state.bankFee}
             />
           }
         />
@@ -232,7 +232,6 @@ export function SuccessView(state: State.Success): VNode {
       </section>
 
       <section>
-        {/* <div> */}
         <TermsOfService exchangeUrl={state.currentExchange.exchangeBaseUrl}>
           <Button
             variant="contained"
@@ -245,20 +244,6 @@ export function SuccessView(state: State.Success): VNode {
             </i18n.Translate>
           </Button>
         </TermsOfService>
-        {/* </div>
-        <div style={{ marginTop: 20 }}>
-          <Button
-            variant="text"
-            color="success"
-
-            disabled={!state.doAbort.onClick}
-            onClick={state.doAbort.onClick}
-          >
-            <i18n.Translate>
-              Cancel
-            </i18n.Translate>
-          </Button>
-        </div> */}
       </section>
       {state.talerWithdrawUri ? (
         <WithdrawWithMobile talerWithdrawUri={state.talerWithdrawUri} />
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 1f0293352..ca5bc3756 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -1416,9 +1416,11 @@ export function TransferPickupDetails({
 export function WithdrawDetails({
   conversion,
   amount,
+  bankFee,
 }: {
   conversion?: AmountJson;
   amount: AmountWithFee;
+  bankFee?: AmountJson;
 }): VNode {
   const { i18n } = useTranslationContext();
 
@@ -1481,6 +1483,16 @@ export function WithdrawDetails({
           </tr>
         </Fragment>
       )}
+      {!bankFee ? undefined : (
+        <tr>
+          <td>
+            <i18n.Translate>Bank fee</i18n.Translate>
+          </td>
+          <td>
+            <Amount value={bankFee} maxFracSize={amount.maxFrac} />
+          </td>
+        </tr>
+      )}
     </PurchaseDetailsTable>
   );
 }