fix 8500

5 files changed, 71 insertions, 254 deletions

diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index 9fd117b08..631ffa5e9 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -46,7 +46,7 @@ export function BankDetailsByPaytoType({
 }: BankDetailsProps): VNode {
   const { i18n } = useTranslationContext();
   const [index, setIndex] = useState(0)
-  const [currency, setCurrency] = useState(amount.currency)
+  // const [currency, setCurrency] = useState(amount.currency)
   if (!accounts.length) {
     return <div>the exchange account list is empty</div>
   }
@@ -56,7 +56,7 @@ export function BankDetailsByPaytoType({
   const payto = parsePaytoUri(selectedAccount.paytoUri);
 
   if (!payto) return <Fragment />;
-  payto.params["amount"] = currency === altCurrency ? selectedAccount.transferAmount! :Amounts.stringify(amount) ;
+  payto.params["amount"] = altCurrency ? selectedAccount.transferAmount! : Amounts.stringify(amount);
   payto.params["message"] = subject;
 
 
@@ -73,35 +73,32 @@ export function BankDetailsByPaytoType({
         <p style={{ marginTop: 0 }}>
           {title}
         </p>
-        {accounts.length > 1 ?
-          <Button variant="contained"
-            onClick={async () => {
-              setIndex((index + 1) % accounts.length)
-            }}
-          >
-            <i18n.Translate>Next</i18n.Translate>
-          </Button>
-          : undefined}
+        <div>
+
+        </div>
       </div>
 
       {children}
 
-      {altCurrency ?
+      {accounts.length > 1 ?
         <Fragment>
-          <Button variant={currency === amount.currency ? "contained" : "outlined"}
-            onClick={async () => {
-              setCurrency(amount.currency)
-            }}
-          >
-            <i18n.Translate>{amount.currency}</i18n.Translate>
-          </Button>
-          <Button variant={currency === altCurrency ? "contained" : "outlined"}
+          {accounts.map((ac, acIdx) => {
+            return <Button variant={acIdx === index ? "contained" : "outlined"}
+              onClick={async () => {
+                setIndex(acIdx)
+              }}
+            >
+              <i18n.Translate>Account #{acIdx+1} ({ac.currencySpecification?.name ?? amount.currency})</i18n.Translate>
+            </Button>
+          })}
+
+          {/* <Button variant={currency === altCurrency ? "contained" : "outlined"}
             onClick={async () => {
               setCurrency(altCurrency)
             }}
           >
             <i18n.Translate>{altCurrency}</i18n.Translate>
-          </Button>
+          </Button> */}
         </Fragment>
         : undefined}
     </section>
@@ -175,34 +172,37 @@ export function BankDetailsByPaytoType({
     </Fragment>
   ) : undefined;
 
-  const receiver = payto.params["receiver"] || undefined;
+  const receiver = payto.params["receiver-name"] || payto.params["receiver"] || undefined;
   return (
     <Frame title={i18n.str`Bank transfer details`}>
       <table>
-        {accountPart}
-        {currency === altCurrency ? <Fragment>
-          <Row
-            name={i18n.str`Amount`}
-            value={<Amount value={selectedAccount.transferAmount!} />}
-          />
-          <Row
-            name={i18n.str`Converted`}
-            value={<Amount value={amount} />}
-          />
+        <tbody>
+          {accountPart}
+          <Row name={i18n.str`Subject`} value={subject} literal />
 
-        </Fragment> :
           <Row
             name={i18n.str`Amount`}
-            value={<Amount value={amount} />}
+            value={<Amount value={altCurrency ? selectedAccount.transferAmount! : amount} hideCurrency />}
           />
-        }
-        <Row name={i18n.str`Subject`} value={subject} literal />
-        {receiver ? (
-          <Row name={i18n.str`Receiver name`} value={receiver} />
-        ) : undefined}
-      </table>
-      <table>
-        <tbody>
+
+          {receiver ? (
+            <Row name={i18n.str`Receiver name`} value={receiver} />
+          ) : undefined}
+
+          <tr>
+            <td colSpan={3}>
+              <WarningBox style={{ margin: 0 }}>
+                <span>
+                  <i18n.Translate>
+                    Make sure ALL data is correct including the subject, otherwise the money will not
+                    arrive in this wallet. You can use the copy buttons (<CopyIcon />) to prevent typing errors
+                    or the "payto://" URI below to copy just one value.
+                  </i18n.Translate>
+                </span>
+              </WarningBox>
+            </td>
+          </tr>
+
           <tr>
             <td>
               <pre>
@@ -227,14 +227,6 @@ export function BankDetailsByPaytoType({
           </tr>
         </tbody>
       </table>
-      <p>
-        <WarningBox>
-          <i18n.Translate>
-            Make sure to use the correct subject, otherwise the money will not
-            arrive in this wallet.
-          </i18n.Translate>
-        </WarningBox>
-      </p>
     </Frame>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
deleted file mode 100644
index 2fcf580ed..000000000
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2022 Taler Systems S.A.
-
- GNU Taler is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-/**
- *
- * @author Sebastian Javier Marchano (sebasjm)
- */
-
-import { parsePaytoUri } from "@gnu-taler/taler-util";
-import * as tests from "@gnu-taler/web-util/testing";
-import { ReserveCreated as TestedComponent } from "./ReserveCreated.js";
-
-export default {
-  title: "reserve created",
-  component: TestedComponent,
-  argTypes: {},
-};
-
-export const TalerBank = tests.createExample(TestedComponent, {
-  reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
-  paytoURI: parsePaytoUri(
-    "payto://x-taler-bank/bank.taler:5882/exchangeminator?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
-  ),
-  amount: {
-    currency: "USD",
-    value: 10,
-    fraction: 0,
-  },
-  accounts: []
-});
-
-export const IBAN = tests.createExample(TestedComponent, {
-  reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
-  paytoURI: parsePaytoUri(
-    "payto://iban/ES8877998399652238?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
-  ),
-  amount: {
-    currency: "USD",
-    value: 10,
-    fraction: 0,
-  },
-  accounts: []
-});
-
-export const WithReceiverName = tests.createExample(TestedComponent, {
-  reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
-  paytoURI: parsePaytoUri(
-    "payto://iban/ES8877998399652238?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG&receiver=Sebastian",
-  ),
-  amount: {
-    currency: "USD",
-    value: 10,
-    fraction: 0,
-  },
-  accounts: []
-});
-
-export const Bitcoin = tests.createExample(TestedComponent, {
-  reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
-  paytoURI: parsePaytoUri(
-    "payto://bitcoin/bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
-  ),
-  amount: {
-    currency: "BTC",
-    value: 0,
-    fraction: 14000000,
-  },
-  accounts: []
-});
-
-export const BitcoinRegTest = tests.createExample(TestedComponent, {
-  reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
-  paytoURI: parsePaytoUri(
-    "payto://bitcoin/bcrt1q6ps8qs6v8tkqrnru4xqqqa6rfwcx5ufpdfqht4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
-  ),
-  amount: {
-    currency: "BTC",
-    value: 0,
-    fraction: 14000000,
-  },
-  accounts: []
-});
-export const BitcoinTest = tests.createExample(TestedComponent, {
-  reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
-  paytoURI: parsePaytoUri(
-    "payto://bitcoin/tb1qw508d6qejxtdg4y5r3zarvary0c5xw7kxpjzsx?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00",
-  ),
-  amount: {
-    currency: "BTC",
-    value: 0,
-    fraction: 14000000,
-  },
-  accounts: []
-});
diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
deleted file mode 100644
index 144413541..000000000
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2022 Taler Systems S.A.
-
- GNU Taler is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-import { AmountJson, PaytoUri, WithdrawalExchangeAccountDetails, stringifyPaytoUri } from "@gnu-taler/taler-util";
-import { Fragment, h, VNode } from "preact";
-import { Amount } from "../components/Amount.js";
-import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js";
-import { CopyButton } from "../components/CopyButton.js";
-import { ErrorMessage } from "../components/ErrorMessage.js";
-import { QR } from "../components/QR.js";
-import { Title, WarningBox } from "../components/styled/index.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { Button } from "../mui/Button.js";
-export interface Props {
-  reservePub: string;
-  paytoURI: PaytoUri | undefined;
-  accounts: WithdrawalExchangeAccountDetails[];
-  amount: AmountJson;
-  onCancel: () => Promise<void>;
-}
-
-export function ReserveCreated({
-  reservePub,
-  paytoURI,
-  onCancel,
-  accounts,
-  amount,
-}: Props): VNode {
-  const { i18n } = useTranslationContext();
-  if (!paytoURI) {
-    return (
-      <ErrorMessage
-        title={i18n.str`Could not parse the payto URI`}
-        description={i18n.str`Please check the uri`}
-      />
-    );
-  }
-  return (
-    <Fragment>
-      <section>
-        <Title>
-          <i18n.Translate>Exchange is ready for withdrawal</i18n.Translate>
-        </Title>
-        <p>
-          <i18n.Translate>
-            To complete the process you need to wire{` `}
-            <b>{<Amount value={amount} />}</b> to the exchange bank account
-          </i18n.Translate>
-        </p>
-      </section>
-      <BankDetailsByPaytoType
-        amount={amount}
-        accounts={accounts}
-        subject={reservePub}
-      />
-      <section>
-        <p>
-          <i18n.Translate>
-            Alternative, you can also scan this QR code or open{" "}
-            <a href={stringifyPaytoUri(paytoURI)}>this link</a> if you have a
-            banking app installed that supports RFC 8905
-          </i18n.Translate>
-        </p>
-        <QR text={stringifyPaytoUri(paytoURI)} />
-      </section>
-      <footer>
-        <div />
-        <Button variant="contained" color="error" onClick={onCancel}>
-          <i18n.Translate>Cancel withdrawal</i18n.Translate>
-        </Button>
-      </footer>
-    </Fragment>
-  );
-}
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 65ba6cc85..7363cca77 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -276,7 +276,7 @@ function TransactionTemplate({
           <WarningBox>
             <div style={{ justifyContent: "center", lineHeight: "25px" }}>
               <i18n.Translate>This transaction is not completed</i18n.Translate>
-              <Link onClick={onRetry}>
+              <Link onClick={onRetry} style={{padding: 0}}>
                 <SvgIcon
                   title={i18n.str`Retry`}
                   dangerouslySetInnerHTML={{ __html: refreshIcon }}
@@ -469,15 +469,34 @@ export function TransactionView({
             .minor === TransactionMinorState.KycRequired ||
             transaction.txState.minor ===
             TransactionMinorState.AmlRequired ? undefined : transaction
-              .withdrawalDetails.type === WithdrawalType.ManualTransfer ? (
-          //manual withdrawal
-          <BankDetailsByPaytoType
-            amount={raw}
-            accounts={
-              transaction.withdrawalDetails.exchangeCreditAccountDetails ?? []
-            }
-            subject={transaction.withdrawalDetails.reservePub}
-          />
+              .withdrawalDetails.type === WithdrawalType.ManualTransfer
+              && transaction.withdrawalDetails.exchangeCreditAccountDetails ? (
+          <Fragment>
+            <InfoBox>
+              {transaction.withdrawalDetails.exchangeCreditAccountDetails.length > 1 ?
+                <span>
+                  <i18n.Translate>
+                    Now the payment service provider is waiting for <Amount value={raw} /> to
+                    be transferred. Select one of the account and use the information below
+                    to complete the operation by making a wire transfer from your bank account.
+                  </i18n.Translate>
+                </span>
+                :
+                <span><i18n.Translate>
+                  Now the payment service provider is waiting for <Amount value={raw} /> to 
+                  be transferred. Use the information below to complete the operation
+                  by making a wire transfer from your bank account.
+                </i18n.Translate></span>}
+
+            </InfoBox>
+            <BankDetailsByPaytoType
+              amount={raw}
+              accounts={
+                transaction.withdrawalDetails.exchangeCreditAccountDetails ?? []
+              }
+              subject={transaction.withdrawalDetails.reservePub}
+            />
+          </Fragment>
         ) : (
           //integrated bank withdrawal
           <ShowWithdrawalDetailForBankIntegrated transaction={transaction} />
diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
index 989292326..89bb75b29 100644
--- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
@@ -24,7 +24,6 @@ export * as a4 from "./DepositPage/stories.js";
 export * as a7 from "./History.stories.js";
 export * as a8 from "./AddBackupProvider/stories.js";
 export * as a10 from "./ProviderDetail.stories.js";
-export * as a11 from "./ReserveCreated.stories.js";
 export * as a12 from "./Settings.stories.js";
 export * as a13 from "./Transaction.stories.js";
 export * as a14 from "./Welcome.stories.js";