diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx')
| -rw-r--r-- | packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx | 240 |
1 files changed, 145 insertions, 95 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index 9fd117b08..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,75 +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"] = currency === 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></div> + </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> - {accounts.length > 1 ? - <Button variant="contained" - onClick={async () => { - setIndex((index + 1) % accounts.length) - }} - > - <i18n.Translate>Next</i18n.Translate> - </Button> - : undefined} - </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> + ); + })} - {altCurrency ? - <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"} + {/* <Button variant={currency === altCurrency ? "contained" : "outlined"} onClick={async () => { setCurrency(altCurrency) }} > <i18n.Translate>{altCurrency}</i18n.Translate> - </Button> - </Fragment> - : undefined} - </section> + </Button> */} + </Fragment> + ) : undefined} + </section> + ); } if (payto.isKnown && payto.targetType === "bitcoin") { @@ -160,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} /> @@ -175,51 +194,90 @@ 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> + <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 /> - </Fragment> : + <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={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> + <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 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> - <td width="100%" style={{ wordBreak: "break-all" }}> - {stringifyPaytoUri(payto)} + </tr> + + <tr> + <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)} /> @@ -227,14 +285,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> ); } |