diff options
author | Sebastian <sebasjm@gmail.com> | 2024-04-12 13:03:40 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-04-12 13:21:56 -0300 |
commit | ed25c72416c1e87f6932d62108533d668a2e010f (patch) | |
tree | 2fe49a3fb855e2a9ac3a6b343b24fd3399d71bf6 /packages | |
parent | 6a153202729b6a8ecfbe610abaabbc24bf8f94ba (diff) | |
download | wallet-core-ed25c72416c1e87f6932d62108533d668a2e010f.tar.xz |
dd53: wire transfer subject is last, should be first -- PaytoURI should not be expanded on-screen
Diffstat (limited to 'packages')
4 files changed, 126 insertions, 79 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx index b92929ceb..6dd577b88 100644 --- a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx +++ b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx @@ -27,12 +27,8 @@ export function BalanceTable({ balances: WalletBalance[]; goToWalletHistory: (currency: string) => void; }): VNode { - // const { i18n } = useTranslationContext(); return ( <Fragment> - {/* <SubTitle> - <i18n.Translate>Exchange Entries</i18n.Translate> - </SubTitle> */} <TableWithRoundedRows> {balances.map((entry, idx) => { const av = Amounts.parseOrThrow(entry.available); 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> + + <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 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> + + <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)} /> diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 3d1ab15b6..fcd21a5ee 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -35,8 +35,7 @@ import { CenteredBoldText, CenteredText, DateSeparator, - NiceSelect, - SubTitle, + NiceSelect } from "../components/styled/index.js"; import { alertFromError, useAlertContext } from "../context/alert.js"; import { useBackendContext } from "../context/backend.js"; @@ -53,7 +52,7 @@ interface Props { goToWalletManualWithdraw: (currency?: string) => Promise<void>; } export function HistoryPage({ - currency, + currency: _c, goToWalletManualWithdraw, goToWalletDeposit, }: Props): VNode { diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index eaf98e906..27c9b5d77 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -576,7 +576,7 @@ export function TransactionView({ tid: r.transactionId, })} > - Was refunded + was refunded </a>{" "} on{" "} { |