diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx')
| -rw-r--r-- | packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | 200 |
1 files changed, 129 insertions, 71 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index bf77174df..8b6377fc5 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,72 +34,94 @@ import { Button } from "../mui/Button.js"; export interface BankDetailsProps { subject: string; amount: AmountJson; - accounts: WithdrawalExchangeAccountDetails[], + accounts: WithdrawalExchangeAccountDetails[]; } export function BankDetailsByPaytoType({ subject, amount, - accounts, + accounts: unsortedAccounts, }: BankDetailsProps): VNode { const { i18n } = useTranslationContext(); - const [index, setIndex] = useState(0) - // const [currency, setCurrency] = useState(amount.currency) - if (!accounts.length) { - return <div>the exchange account list is empty</div> + const [index, setIndex] = useState(0); + + if (!unsortedAccounts.length) { + return <div>the exchange account list is empty</div>; } + + const accounts = unsortedAccounts.sort((a, b) => { + 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) => { - return <Button variant={acIdx === index ? "contained" : "outlined"} - onClick={async () => { - setIndex(acIdx) - }} - > - <i18n.Translate>Account #{acIdx+1} ({ac.currencySpecification?.name ?? amount.currency})</i18n.Translate> - </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") { @@ -157,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} /> @@ -172,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> + + <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> + + <i18n.Translate> + If you don't already have it in your banking favourites list, + then copy and paste 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> + + <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> @@ -204,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)} /> |