diff options
author | Sebastian <sebasjm@gmail.com> | 2024-03-01 13:17:15 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-03-01 13:17:15 -0300 |
commit | d81a88343892bc00d8499733ea16968f9153295d (patch) | |
tree | 4906923733acdc178a9a5c56517f8302e4d1caf0 /packages/taler-wallet-webextension | |
parent | 4d36b5a469e03f3485a5ea4448ad3d5bacc1f230 (diff) | |
download | wallet-core-d81a88343892bc00d8499733ea16968f9153295d.tar.xz |
fix 8500
Diffstat (limited to 'packages/taler-wallet-webextension')
5 files changed, 71 insertions, 254 deletions
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx index 9fd117b08..631ffa5e9 100644 --- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx +++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx @@ -46,7 +46,7 @@ export function BankDetailsByPaytoType({ }: BankDetailsProps): VNode { const { i18n } = useTranslationContext(); const [index, setIndex] = useState(0) - const [currency, setCurrency] = useState(amount.currency) + // const [currency, setCurrency] = useState(amount.currency) if (!accounts.length) { return <div>the exchange account list is empty</div> } @@ -56,7 +56,7 @@ export function BankDetailsByPaytoType({ 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; @@ -73,35 +73,32 @@ export function BankDetailsByPaytoType({ <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> + + </div> </div> {children} - {altCurrency ? + {accounts.length > 1 ? <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"} + {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> + })} + + {/* <Button variant={currency === altCurrency ? "contained" : "outlined"} onClick={async () => { setCurrency(altCurrency) }} > <i18n.Translate>{altCurrency}</i18n.Translate> - </Button> + </Button> */} </Fragment> : undefined} </section> @@ -175,34 +172,37 @@ 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> + {accountPart} + <Row name={i18n.str`Subject`} value={subject} literal /> - </Fragment> : <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> + + {receiver ? ( + <Row name={i18n.str`Receiver name`} value={receiver} /> + ) : undefined} + + <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 + or the "payto://" URI below to copy just one value. + </i18n.Translate> + </span> + </WarningBox> + </td> + </tr> + <tr> <td> <pre> @@ -227,14 +227,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> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx deleted file mode 100644 index 2fcf580ed..000000000 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.stories.tsx +++ /dev/null @@ -1,107 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { parsePaytoUri } from "@gnu-taler/taler-util"; -import * as tests from "@gnu-taler/web-util/testing"; -import { ReserveCreated as TestedComponent } from "./ReserveCreated.js"; - -export default { - title: "reserve created", - component: TestedComponent, - argTypes: {}, -}; - -export const TalerBank = tests.createExample(TestedComponent, { - reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", - paytoURI: parsePaytoUri( - "payto://x-taler-bank/bank.taler:5882/exchangeminator?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", - ), - amount: { - currency: "USD", - value: 10, - fraction: 0, - }, - accounts: [] -}); - -export const IBAN = tests.createExample(TestedComponent, { - reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", - paytoURI: parsePaytoUri( - "payto://iban/ES8877998399652238?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", - ), - amount: { - currency: "USD", - value: 10, - fraction: 0, - }, - accounts: [] -}); - -export const WithReceiverName = tests.createExample(TestedComponent, { - reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG", - paytoURI: parsePaytoUri( - "payto://iban/ES8877998399652238?amount=COL%3A1&message=Taler+Withdrawal+A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG&receiver=Sebastian", - ), - amount: { - currency: "USD", - value: 10, - fraction: 0, - }, - accounts: [] -}); - -export const Bitcoin = tests.createExample(TestedComponent, { - reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", - paytoURI: parsePaytoUri( - "payto://bitcoin/bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", - ), - amount: { - currency: "BTC", - value: 0, - fraction: 14000000, - }, - accounts: [] -}); - -export const BitcoinRegTest = tests.createExample(TestedComponent, { - reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", - paytoURI: parsePaytoUri( - "payto://bitcoin/bcrt1q6ps8qs6v8tkqrnru4xqqqa6rfwcx5ufpdfqht4?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", - ), - amount: { - currency: "BTC", - value: 0, - fraction: 14000000, - }, - accounts: [] -}); -export const BitcoinTest = tests.createExample(TestedComponent, { - reservePub: "0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", - paytoURI: parsePaytoUri( - "payto://bitcoin/tb1qw508d6qejxtdg4y5r3zarvary0c5xw7kxpjzsx?amount=BTC:0.1&subject=0ZSX8SH0M30KHX8K3Y1DAMVGDQV82XEF9DG1HC4QMQ3QWYT4AF00", - ), - amount: { - currency: "BTC", - value: 0, - fraction: 14000000, - }, - accounts: [] -}); diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx deleted file mode 100644 index 144413541..000000000 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ -import { AmountJson, PaytoUri, WithdrawalExchangeAccountDetails, stringifyPaytoUri } from "@gnu-taler/taler-util"; -import { Fragment, h, VNode } from "preact"; -import { Amount } from "../components/Amount.js"; -import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType.js"; -import { CopyButton } from "../components/CopyButton.js"; -import { ErrorMessage } from "../components/ErrorMessage.js"; -import { QR } from "../components/QR.js"; -import { Title, WarningBox } from "../components/styled/index.js"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Button } from "../mui/Button.js"; -export interface Props { - reservePub: string; - paytoURI: PaytoUri | undefined; - accounts: WithdrawalExchangeAccountDetails[]; - amount: AmountJson; - onCancel: () => Promise<void>; -} - -export function ReserveCreated({ - reservePub, - paytoURI, - onCancel, - accounts, - amount, -}: Props): VNode { - const { i18n } = useTranslationContext(); - if (!paytoURI) { - return ( - <ErrorMessage - title={i18n.str`Could not parse the payto URI`} - description={i18n.str`Please check the uri`} - /> - ); - } - return ( - <Fragment> - <section> - <Title> - <i18n.Translate>Exchange is ready for withdrawal</i18n.Translate> - </Title> - <p> - <i18n.Translate> - To complete the process you need to wire{` `} - <b>{<Amount value={amount} />}</b> to the exchange bank account - </i18n.Translate> - </p> - </section> - <BankDetailsByPaytoType - amount={amount} - accounts={accounts} - subject={reservePub} - /> - <section> - <p> - <i18n.Translate> - Alternative, you can also scan this QR code or open{" "} - <a href={stringifyPaytoUri(paytoURI)}>this link</a> if you have a - banking app installed that supports RFC 8905 - </i18n.Translate> - </p> - <QR text={stringifyPaytoUri(paytoURI)} /> - </section> - <footer> - <div /> - <Button variant="contained" color="error" onClick={onCancel}> - <i18n.Translate>Cancel withdrawal</i18n.Translate> - </Button> - </footer> - </Fragment> - ); -} diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 65ba6cc85..7363cca77 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -276,7 +276,7 @@ function TransactionTemplate({ <WarningBox> <div style={{ justifyContent: "center", lineHeight: "25px" }}> <i18n.Translate>This transaction is not completed</i18n.Translate> - <Link onClick={onRetry}> + <Link onClick={onRetry} style={{padding: 0}}> <SvgIcon title={i18n.str`Retry`} dangerouslySetInnerHTML={{ __html: refreshIcon }} @@ -469,15 +469,34 @@ export function TransactionView({ .minor === TransactionMinorState.KycRequired || transaction.txState.minor === TransactionMinorState.AmlRequired ? undefined : transaction - .withdrawalDetails.type === WithdrawalType.ManualTransfer ? ( - //manual withdrawal - <BankDetailsByPaytoType - amount={raw} - accounts={ - transaction.withdrawalDetails.exchangeCreditAccountDetails ?? [] - } - subject={transaction.withdrawalDetails.reservePub} - /> + .withdrawalDetails.type === WithdrawalType.ManualTransfer + && transaction.withdrawalDetails.exchangeCreditAccountDetails ? ( + <Fragment> + <InfoBox> + {transaction.withdrawalDetails.exchangeCreditAccountDetails.length > 1 ? + <span> + <i18n.Translate> + Now the payment service provider is waiting for <Amount value={raw} /> to + be transferred. Select one of the account and use the information below + to complete the operation by making a wire transfer from your bank account. + </i18n.Translate> + </span> + : + <span><i18n.Translate> + Now the payment service provider is waiting for <Amount value={raw} /> to + be transferred. Use the information below to complete the operation + by making a wire transfer from your bank account. + </i18n.Translate></span>} + + </InfoBox> + <BankDetailsByPaytoType + amount={raw} + accounts={ + transaction.withdrawalDetails.exchangeCreditAccountDetails ?? [] + } + subject={transaction.withdrawalDetails.reservePub} + /> + </Fragment> ) : ( //integrated bank withdrawal <ShowWithdrawalDetailForBankIntegrated transaction={transaction} /> diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx index 989292326..89bb75b29 100644 --- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx @@ -24,7 +24,6 @@ export * as a4 from "./DepositPage/stories.js"; export * as a7 from "./History.stories.js"; export * as a8 from "./AddBackupProvider/stories.js"; export * as a10 from "./ProviderDetail.stories.js"; -export * as a11 from "./ReserveCreated.stories.js"; export * as a12 from "./Settings.stories.js"; export * as a13 from "./Transaction.stories.js"; export * as a14 from "./Welcome.stories.js"; |