From 81bf1cc9c12bcf82835c7dffca4557e39ec5e600 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 21 Jun 2023 11:28:27 -0300
Subject: show bank details

---
 .../src/wallet/ReserveCreated.tsx                  |  47 +-----
 .../src/wallet/Transaction.tsx                     | 172 ++++++++++-----------
 2 files changed, 88 insertions(+), 131 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/wallet')

diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 0bf9ef9d1..f489b805b 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -50,48 +50,11 @@ export function ReserveCreated({
   function TransferDetails(): VNode {
     if (!paytoURI) return <Fragment />;
     return (
-      <section>
-        <BankDetailsByPaytoType
-          amount={amount}
-          exchangeBaseUrl={exchangeBaseUrl}
-          payto={paytoURI}
-          subject={reservePub}
-        />
-        <table>
-          <tbody>
-            <tr>
-              <td>
-                <pre>
-                  <b>
-                    <a
-                      target="_bank"
-                      rel="noreferrer"
-                      title="RFC 8905 for designating targets for payments"
-                      href="https://tools.ietf.org/html/rfc8905"
-                    >
-                      Payto URI
-                    </a>
-                  </b>
-                </pre>
-              </td>
-              <td width="100%" style={{ wordBreak: "break-all" }}>
-                {stringifyPaytoUri(paytoURI)}
-              </td>
-              <td>
-                <CopyButton getContent={() => stringifyPaytoUri(paytoURI)} />
-              </td>
-            </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>
-      </section>
+      <BankDetailsByPaytoType
+        amount={amount}
+        exchangeBaseUrl={exchangeBaseUrl}
+        subject={reservePub}
+      />
     );
   }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 9ed41c5de..13adb34b2 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -32,9 +32,11 @@ import {
   TransactionAction,
   TransactionDeposit,
   TransactionIdStr,
+  TransactionInternalWithdrawal,
   TransactionMajorState,
   TransactionMinorState,
   TransactionType,
+  TransactionWithdrawal,
   TranslatedString,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
@@ -459,96 +461,14 @@ export function TransactionView({
         TransactionMajorState.Pending ? undefined : transaction
             .withdrawalDetails.type === WithdrawalType.ManualTransfer ? (
           //manual withdrawal
-          <Fragment>
-            <BankDetailsByPaytoType
-              amount={raw}
-              exchangeBaseUrl={transaction.exchangeBaseUrl}
-              payto={parsePaytoUri(
-                transaction.withdrawalDetails.exchangePaytoUris[0],
-              )}
-              subject={transaction.withdrawalDetails.reservePub}
-            />
-            <table>
-              <tbody>
-                <tr>
-                  <td>
-                    <pre>
-                      <b>
-                        <a
-                          target="_bank"
-                          rel="noreferrer"
-                          title="RFC 8905 for designating targets for payments"
-                          href="https://tools.ietf.org/html/rfc8905"
-                        >
-                          Payto URI
-                        </a>
-                      </b>
-                    </pre>
-                  </td>
-                  <td width="100%" style={{ wordBreak: "break-all" }}>
-                    {transaction.withdrawalDetails.exchangePaytoUris[0]}
-                  </td>
-                  <td>
-                    <CopyButton
-                      getContent={() =>
-                        transaction.withdrawalDetails.type ===
-                        WithdrawalType.ManualTransfer
-                          ? transaction.withdrawalDetails.exchangePaytoUris[0]
-                          : ""
-                      }
-                    />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <WarningBox>
-              <i18n.Translate>
-                Make sure to use the correct subject, otherwise the money will
-                not arrive in this wallet.
-              </i18n.Translate>
-            </WarningBox>
-          </Fragment>
+          <BankDetailsByPaytoType
+            amount={raw}
+            exchangeBaseUrl={transaction.exchangeBaseUrl}
+            subject={transaction.withdrawalDetails.reservePub}
+          />
         ) : (
           //integrated bank withdrawal
-          <Fragment>
-            {!transaction.withdrawalDetails.confirmed &&
-            transaction.withdrawalDetails.bankConfirmationUrl ? (
-              <InfoBox>
-                <div style={{ display: "block" }}>
-                  <i18n.Translate>
-                    Wire transfer need a confirmation. Go to the{" "}
-                    <a
-                      href={transaction.withdrawalDetails.bankConfirmationUrl}
-                      target="_blank"
-                      rel="noreferrer"
-                      style={{ display: "inline" }}
-                    >
-                      <i18n.Translate>bank site</i18n.Translate>
-                    </a>{" "}
-                    and check wire transfer operation to exchange account is
-                    complete.
-                  </i18n.Translate>
-                </div>
-              </InfoBox>
-            ) : undefined}
-            {transaction.withdrawalDetails.confirmed &&
-              !transaction.withdrawalDetails.reserveIsReady && (
-                <InfoBox>
-                  <i18n.Translate>
-                    Bank has confirmed the wire transfer. Waiting for the
-                    exchange to send the coins
-                  </i18n.Translate>
-                </InfoBox>
-              )}
-            {transaction.withdrawalDetails.confirmed &&
-              transaction.withdrawalDetails.reserveIsReady && (
-                <InfoBox>
-                  <i18n.Translate>
-                    Exchange is ready to send the coins, withdrawal in progress.
-                  </i18n.Translate>
-                </InfoBox>
-              )}
-          </Fragment>
+          <ShowWithdrawalDetailForBankIntegrated transaction={transaction} />
         )}
         <Part
           title={i18n.str`Details`}
@@ -1404,7 +1324,7 @@ export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode {
     <PurchaseDetailsTable>
       <tr>
         <td>
-          <i18n.Translate>Withdraw</i18n.Translate>
+          <i18n.Translate>Wire transfer</i18n.Translate>
         </td>
         <td>
           <Amount value={amount.value} maxFracSize={amount.maxFrac} />
@@ -1952,3 +1872,77 @@ function getShowButtonStates(transaction: Transaction) {
   });
   return { abort, fail, resume, retry, remove, suspend };
 }
+
+function ShowWithdrawalDetailForBankIntegrated({
+  transaction,
+}: {
+  transaction: TransactionWithdrawal | TransactionInternalWithdrawal;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  const [showDetails, setShowDetails] = useState(false);
+  if (
+    transaction.txState.major !== TransactionMajorState.Pending ||
+    transaction.withdrawalDetails.type === WithdrawalType.ManualTransfer
+  )
+    return <Fragment />;
+  const raw = Amounts.parseOrThrow(transaction.amountRaw);
+  return (
+    <Fragment>
+      <EnabledBySettings name="advanceMode">
+        <a
+          href="#"
+          onClick={(e) => {
+            e.preventDefault();
+            setShowDetails(!showDetails);
+          }}
+        >
+          show details
+        </a>
+      </EnabledBySettings>
+
+      {showDetails && (
+        <BankDetailsByPaytoType
+          amount={raw}
+          exchangeBaseUrl={transaction.exchangeBaseUrl}
+          subject={transaction.withdrawalDetails.reservePub}
+        />
+      )}
+      {!transaction.withdrawalDetails.confirmed &&
+      transaction.withdrawalDetails.bankConfirmationUrl ? (
+        <InfoBox>
+          <div style={{ display: "block" }}>
+            <i18n.Translate>
+              Wire transfer need a confirmation. Go to the{" "}
+              <a
+                href={transaction.withdrawalDetails.bankConfirmationUrl}
+                target="_blank"
+                rel="noreferrer"
+                style={{ display: "inline" }}
+              >
+                <i18n.Translate>bank site</i18n.Translate>
+              </a>{" "}
+              and check wire transfer operation to exchange account is complete.
+            </i18n.Translate>
+          </div>
+        </InfoBox>
+      ) : undefined}
+      {transaction.withdrawalDetails.confirmed &&
+        !transaction.withdrawalDetails.reserveIsReady && (
+          <InfoBox>
+            <i18n.Translate>
+              Bank has confirmed the wire transfer. Waiting for the exchange to
+              send the coins
+            </i18n.Translate>
+          </InfoBox>
+        )}
+      {transaction.withdrawalDetails.confirmed &&
+        transaction.withdrawalDetails.reserveIsReady && (
+          <InfoBox>
+            <i18n.Translate>
+              Exchange is ready to send the coins, withdrawal in progress.
+            </i18n.Translate>
+          </InfoBox>
+        )}
+    </Fragment>
+  );
+}
-- 
cgit v1.2.3