From ed25c72416c1e87f6932d62108533d668a2e010f Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Fri, 12 Apr 2024 13:03:40 -0300
Subject: dd53: wire transfer subject is last, should be first -- PaytoURI
 should not be expanded on-screen

---
 .../src/components/BankDetailsByPaytoType.tsx      | 194 +++++++++++++--------
 1 file changed, 123 insertions(+), 71 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx')

diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index 007c840c6..6666413eb 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -21,11 +21,9 @@ import {
   segwitMinAmount,
   stringifyPaytoUri,
   TranslatedString,
-  WithdrawalExchangeAccountDetails
+  WithdrawalExchangeAccountDetails,
 } from "@gnu-taler/taler-util";
-import {
-  useTranslationContext
-} from "@gnu-taler/web-util/browser";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useEffect, useRef, useState } from "preact/hooks";
 import { CopiedIcon, CopyIcon } from "../svg/index.js";
@@ -36,7 +34,7 @@ import { Button } from "../mui/Button.js";
 export interface BankDetailsProps {
   subject: string;
   amount: AmountJson;
-  accounts: WithdrawalExchangeAccountDetails[],
+  accounts: WithdrawalExchangeAccountDetails[];
 }
 
 export function BankDetailsByPaytoType({
@@ -45,69 +43,85 @@ export function BankDetailsByPaytoType({
   accounts: unsortedAccounts,
 }: BankDetailsProps): VNode {
   const { i18n } = useTranslationContext();
-  const [index, setIndex] = useState(0)
+  const [index, setIndex] = useState(0);
 
   if (!unsortedAccounts.length) {
-    return <div>the exchange account list is empty</div>
+    return <div>the exchange account list is empty</div>;
   }
 
   const accounts = unsortedAccounts.sort((a, b) => {
-    return (b.priority ?? 0) - (a.priority ?? 0)
-  })
+    return (b.priority ?? 0) - (a.priority ?? 0);
+  });
 
   const selectedAccount = accounts[index];
-  const altCurrency = selectedAccount.currencySpecification?.name
+  const altCurrency = selectedAccount.currencySpecification?.name;
 
   const payto = parsePaytoUri(selectedAccount.paytoUri);
 
   if (!payto) return <Fragment />;
-  payto.params["amount"] = altCurrency ? selectedAccount.transferAmount! : Amounts.stringify(amount);
+  payto.params["amount"] = altCurrency
+    ? selectedAccount.transferAmount!
+    : Amounts.stringify(amount);
   payto.params["message"] = subject;
 
-
-  function Frame({ title, children }: { title: TranslatedString, children: ComponentChildren }): VNode {
-    return <section
-      style={{
-        textAlign: "left",
-        border: "solid 1px black",
-        padding: 8,
-        borderRadius: 4,
-      }}
-    >
-      <div style={{ display: "flex", width: "100%", justifyContent: "space-between" }}>
-        <p style={{ marginTop: 0 }}>
-          {title}
-        </p>
-        <div>
-
+  function Frame({
+    title,
+    children,
+  }: {
+    title: TranslatedString;
+    children: ComponentChildren;
+  }): VNode {
+    return (
+      <section
+        style={{
+          textAlign: "left",
+          border: "solid 1px black",
+          padding: 8,
+          borderRadius: 4,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            width: "100%",
+            justifyContent: "space-between",
+          }}
+        >
+          <p style={{ marginTop: 0 }}>{title}</p>
+          <div></div>
         </div>
-      </div>
 
-      {children}
+        {children}
 
-      {accounts.length > 1 ?
-        <Fragment>
-          {accounts.map((ac, acIdx) => {
-            const accountLabel = ac.bankLabel ?? `Account #${acIdx + 1}`
-            return <Button key={acIdx} variant={acIdx === index ? "contained" : "outlined"}
-              onClick={async () => {
-                setIndex(acIdx)
-              }}
-            >
-              {accountLabel} ({ac.currencySpecification?.name ?? amount.currency})
-            </Button>
-          })}
+        {accounts.length > 1 ? (
+          <Fragment>
+            {accounts.map((ac, acIdx) => {
+              const accountLabel = ac.bankLabel ?? `Account #${acIdx + 1}`;
+              return (
+                <Button
+                  key={acIdx}
+                  variant={acIdx === index ? "contained" : "outlined"}
+                  onClick={async () => {
+                    setIndex(acIdx);
+                  }}
+                >
+                  {accountLabel} (
+                  {ac.currencySpecification?.name ?? amount.currency})
+                </Button>
+              );
+            })}
 
-          {/* <Button variant={currency === altCurrency ? "contained" : "outlined"}
+            {/* <Button variant={currency === altCurrency ? "contained" : "outlined"}
             onClick={async () => {
               setCurrency(altCurrency)
             }}
           >
             <i18n.Translate>{altCurrency}</i18n.Translate>
           </Button> */}
-        </Fragment>
-        : undefined}
-    </section>
+          </Fragment>
+        ) : undefined}
+      </section>
+    );
   }
 
   if (payto.isKnown && payto.targetType === "bitcoin") {
@@ -163,7 +177,9 @@ export function BankDetailsByPaytoType({
   }
 
   const accountPart = !payto.isKnown ? (
-    <Row name={i18n.str`Account`} value={payto.targetPath} />
+    <Fragment>
+      <Row name={i18n.str`Account`} value={payto.targetPath} />
+    </Fragment>
   ) : payto.targetType === "x-taler-bank" ? (
     <Fragment>
       <Row name={i18n.str`Bank host`} value={payto.host} />
@@ -178,30 +194,68 @@ export function BankDetailsByPaytoType({
     </Fragment>
   ) : undefined;
 
-  const receiver = payto.params["receiver-name"] || payto.params["receiver"] || undefined;
+  const receiver =
+    payto.params["receiver-name"] || payto.params["receiver"] || undefined;
   return (
     <Frame title={i18n.str`Bank transfer details`}>
       <table>
         <tbody>
-          {accountPart}
+          <tr>
+            <td colSpan={3}>
+              <i18n.Translate>Step 1:</i18n.Translate>
+              &nbsp;
+              <i18n.Translate>
+                Copy this code and paste it into the subject/purpose field in
+                your banking app or bank website
+              </i18n.Translate>
+            </td>
+          </tr>
           <Row name={i18n.str`Subject`} value={subject} literal />
 
-          <Row
-            name={i18n.str`Amount`}
-            value={<Amount value={altCurrency ? selectedAccount.transferAmount! : amount} hideCurrency />}
-          />
-
+          <tr>
+            <td colSpan={3}>
+              <i18n.Translate>Step 2:</i18n.Translate>
+              &nbsp;
+              <i18n.Translate>
+                If you don't already have it in your banking favourites list,
+                then copy and past this IBAN and the name into the receiver
+                fields in your banking app or website
+              </i18n.Translate>
+            </td>
+          </tr>
+          {accountPart}
           {receiver ? (
             <Row name={i18n.str`Receiver name`} value={receiver} />
           ) : undefined}
 
+          <tr>
+            <td colSpan={3}>
+              <i18n.Translate>Step 3:</i18n.Translate>
+              &nbsp;
+              <i18n.Translate>
+                Finish the wire transfer setting the amount in your banking app
+                or website, then this withdrawal will proceed automatically.
+              </i18n.Translate>
+            </td>
+          </tr>
+          <Row
+            name={i18n.str`Amount`}
+            value={
+              <Amount
+                value={altCurrency ? selectedAccount.transferAmount! : amount}
+                hideCurrency
+              />
+            }
+          />
+
           <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
+                    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>
@@ -210,22 +264,20 @@ export function BankDetailsByPaytoType({
           </tr>
 
           <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(payto)}
+            <td colSpan={2} width="100%" style={{ wordBreak: "break-all" }}>
+              <i18n.Translate>
+                Alternative if your bank already supports PayTo URI, you can use
+                this{" "}
+                <a
+                  target="_bank"
+                  rel="noreferrer"
+                  title="RFC 8905 for designating targets for payments"
+                  href="https://tools.ietf.org/html/rfc8905"
+                >
+                  PayTo URI
+                </a>{" "}
+                link instead
+              </i18n.Translate>
             </td>
             <td>
               <CopyButton getContent={() => stringifyPaytoUri(payto)} />
-- 
cgit v1.2.3