commit ab3b88ceca80e49c335cfbe16b8ff8631ce54d40
parent a7f2e37c0b7a978f3b618ae263730d31906dc906
Author: Sebastian <sebasjm@gmail.com>
Date: Tue, 3 Sep 2024 23:57:01 -0300
wip #8958
Diffstat:
5 files changed, 115 insertions(+), 26 deletions(-)
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -177,8 +177,10 @@ export const Pages = {
scope: CrockEncodedString;
amount?: string;
}>("/cta/manual-withdraw/:scope/:amount?"),
- paytoQrs: "/payto/qrs/:payto?",
- paytoBanks: "/payto/banks/:payto?",
+ paytoQrs: pageDefinition<{ payto: CrockEncodedString }>("/payto/qrs/:payto?"),
+ paytoBanks: pageDefinition<{ payto: CrockEncodedString }>(
+ "/payto/banks/:payto?",
+ ),
};
const talerUriActionToPageName: {
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -27,7 +27,10 @@ import {
TranslatedString,
WithdrawalExchangeAccountDetails,
} from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import {
+ encodeCrockForURI,
+ useTranslationContext,
+} from "@gnu-taler/web-util/browser";
import { ComponentChildren, Fragment, h, VNode } from "preact";
import { useEffect, useRef, useState } from "preact/hooks";
import { Button } from "../mui/Button.js";
@@ -38,6 +41,7 @@ import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
import { useBackendContext } from "../context/backend.js";
import { QR } from "./QR.js";
+import { Pages } from "../NavigationBar.js";
export interface BankDetailsProps {
subject: string;
@@ -140,6 +144,24 @@ export function BankDetailsByPaytoType({
defaultCurrency={amount.currency}
>
<IBANAccountInfoTable payto={payto} subject={subject} />
+ <div>
+ <a
+ href={`#${Pages.paytoBanks({
+ payto: encodeCrockForURI(selectedAccount.paytoUri),
+ })}`}
+ >
+ Continue with banking app or website
+ </a>
+ </div>
+ <div>
+ <a
+ href={`#${Pages.paytoQrs({
+ payto: encodeCrockForURI(selectedAccount.paytoUri),
+ })}`}
+ >
+ Show QR code
+ </a>
+ </div>
</Frame>
);
}
@@ -152,23 +174,23 @@ function IBANAccountInfoTable({
payto: PaytoUriUnknown | PaytoUriIBAN | PaytoUriTalerBank;
}) {
const { i18n } = useTranslationContext();
- const api = useBackendContext();
-
- const hook = useAsyncAsHook(async () => {
- const qrs = await api.wallet.call(WalletApiOperation.GetQrCodesForPayto, {
- paytoUri: stringifyPaytoUri(payto),
- });
- const banks = await api.wallet.call(
- WalletApiOperation.GetBankingChoicesForPayto,
- {
- paytoUri: stringifyPaytoUri(payto),
- },
- );
- return { qrs, banks };
- }, []);
-
- const qrCodes = !hook || hook.hasError ? [] : hook.response.qrs.codes;
- const banksSites = !hook || hook.hasError ? [] : hook.response.banks.choices;
+ // const api = useBackendContext();
+
+ // const hook = useAsyncAsHook(async () => {
+ // const qrs = await api.wallet.call(WalletApiOperation.GetQrCodesForPayto, {
+ // paytoUri: stringifyPaytoUri(payto),
+ // });
+ // const banks = await api.wallet.call(
+ // WalletApiOperation.GetBankingChoicesForPayto,
+ // {
+ // paytoUri: stringifyPaytoUri(payto),
+ // },
+ // );
+ // return { qrs, banks };
+ // }, []);
+
+ // const qrCodes = !hook || hook.hasError ? [] : hook.response.qrs.codes;
+ // const banksSites = !hook || hook.hasError ? [] : hook.response.banks.choices;
const accountPart = !payto.isKnown ? (
<Fragment>
@@ -278,7 +300,7 @@ function IBANAccountInfoTable({
</td>
</tr>
- {qrCodes.map((qr, idx) => {
+ {/* {qrCodes.map((qr, idx) => {
return (
<tr key={idx}>
<td colSpan={3} width="100%">
@@ -295,7 +317,7 @@ function IBANAccountInfoTable({
</td>
</tr>
);
- })}
+ })} */}
</tbody>
</table>
);
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -95,6 +95,7 @@ import { EnabledBySettings } from "../components/EnabledBySettings.js";
import { DevExperimentPage } from "../cta/DevExperiment/index.js";
import { ConfirmAddExchangeView } from "./AddExchange/views.js";
import { ManageAccountPage } from "./ManageAccount/index.js";
+import { SupportedBanksForAccount } from "./SupportedBanksForAccount.js";
export function Application(): VNode {
const { i18n } = useTranslationContext();
@@ -774,7 +775,7 @@ export function Application(): VNode {
}}
/>
<Route
- path={Pages.paytoBanks}
+ path={Pages.paytoBanks.pattern}
component={({ payto }: { payto: string }) => {
const pUri = parsePaytoUri(
decodeCrockFromURI(payto).toLowerCase(),
@@ -785,13 +786,13 @@ export function Application(): VNode {
}
return (
<WalletTemplate goToURL={redirectToURL}>
- <pre>{JSON.stringify({ title: "BANKS", pUri })}</pre>
+ <SupportedBanksForAccount account={pUri} />
</WalletTemplate>
);
}}
/>
<Route
- path={Pages.paytoQrs}
+ path={Pages.paytoQrs.pattern}
component={({ payto }: { payto: string }) => {
const pUri = parsePaytoUri(
decodeCrockFromURI(payto).toLowerCase(),
@@ -802,6 +803,7 @@ export function Application(): VNode {
}
return (
<WalletTemplate goToURL={redirectToURL}>
+ {/* <AllQrsForAccount account={pUri} /> */}
<pre>{JSON.stringify({ title: "QRS", pUri })}</pre>
</WalletTemplate>
);
diff --git a/packages/taler-wallet-webextension/src/wallet/SupportedBanksForAccount.tsx b/packages/taler-wallet-webextension/src/wallet/SupportedBanksForAccount.tsx
@@ -0,0 +1,60 @@
+/*
+ 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 { PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
+import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
+import { Loading, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { VNode, h } from "preact";
+import { ErrorAlertView } from "../components/CurrentAlerts.js";
+import { alertFromError } from "../context/alert.js";
+import { useBackendContext } from "../context/backend.js";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
+
+interface Props {
+ account: PaytoUri;
+}
+
+export function SupportedBanksForAccount({ account }: Props): VNode {
+ const api = useBackendContext();
+ const { i18n } = useTranslationContext();
+ const state = useAsyncAsHook(() => {
+ return api.wallet.call(WalletApiOperation.GetBankingChoicesForPayto, {
+ paytoUri: stringifyPaytoUri(account),
+ });
+ });
+ if (!state) {
+ return <Loading />;
+ }
+
+ if (state.hasError) {
+ return (
+ <ErrorAlertView
+ error={alertFromError(
+ i18n,
+ i18n.str`Could not bank choices for account`,
+ state,
+ )}
+ />
+ );
+ }
+
+ return (
+ <div>
+ {state.response.choices.map((ch) => {
+ return <a href={ch.uri}>{ch.label}</a>;
+ })}
+ </div>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -44,7 +44,10 @@ import {
WithdrawalType,
} from "@gnu-taler/taler-util";
import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import {
+ encodeCrockForURI,
+ useTranslationContext,
+} from "@gnu-taler/web-util/browser";
import { styled } from "@linaria/react";
import { isPast } from "date-fns";
import { ComponentChildren, Fragment, h, VNode } from "preact";
