From b71d6f2b11342bd22197289ad3872d8a341686b5 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sun, 4 Feb 2024 12:04:27 -0300 Subject: wip DD39: removed webRequest permission and changes made into demobank --- .../demobank-ui/src/pages/OperationState/views.tsx | 16 ++----- packages/demobank-ui/src/pages/PaymentOptions.tsx | 49 ++++++++++++++++------ .../demobank-ui/src/pages/ProfileNavigation.tsx | 10 +++-- packages/demobank-ui/src/pages/QrCodeSection.tsx | 19 +++------ .../demobank-ui/src/pages/WalletWithdrawForm.tsx | 31 +++++++++++--- .../demobank-ui/src/pages/WithdrawalQRCode.tsx | 46 ++++++++++++-------- .../src/pages/business/CreateCashout.tsx | 2 +- 7 files changed, 105 insertions(+), 68 deletions(-) (limited to 'packages/demobank-ui/src/pages') diff --git a/packages/demobank-ui/src/pages/OperationState/views.tsx b/packages/demobank-ui/src/pages/OperationState/views.tsx index ac3724eb8..4d193505e 100644 --- a/packages/demobank-ui/src/pages/OperationState/views.tsx +++ b/packages/demobank-ui/src/pages/OperationState/views.tsx @@ -36,6 +36,7 @@ import { useBankState } from "../../hooks/bank-state.js"; import { usePreferences } from "../../hooks/preferences.js"; import { ShouldBeSameUser } from "../WithdrawalConfirmationQuestion.js"; import { State } from "./index.js"; +import { useTalerWalletIntegrationAPI } from "../../context/wallet-integration.js"; export function InvalidPaytoView({ payto }: State.InvalidPayto) { return
Payto from server is not valid "{payto}"
; @@ -328,23 +329,12 @@ export function ReadyView({ onAbort: doAbort, }: State.Ready): VNode> { const { i18n } = useTranslationContext(); + const walletInegrationApi = useTalerWalletIntegrationAPI() const [notification, notify, errorHandler] = useLocalNotification(); const talerWithdrawUri = stringifyWithdrawUri(uri); useEffect(() => { - // Taler Wallet WebExtension is listening to headers response and tab updates. - // In the SPA there is no header response with the Taler URI so - // this hack manually triggers the tab update after the QR is in the DOM. - // WebExtension will be using - // https://developer.chrome.com/docs/extensions/reference/tabs/#event-onUpdated - document.title = `${document.title} ${uri.withdrawalOperationId}`; - const meta = document.createElement("meta"); - meta.setAttribute("name", "taler-uri"); - meta.setAttribute("content", talerWithdrawUri); - document.head.insertBefore( - meta, - document.head.children.length ? document.head.children[0] : null, - ); + walletInegrationApi.publishTalerAction(uri) }, []); async function onAbort() { diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index 53086d4cc..51a6a17a9 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -14,13 +14,43 @@ GNU Taler; see the file COPYING. If not, see */ -import { AmountJson } from "@gnu-taler/taler-util"; -import { VNode, h } from "preact"; +import { AmountJson, TalerError } from "@gnu-taler/taler-util"; +import { Fragment, VNode, h } from "preact"; import { useBankState } from "../hooks/bank-state.js"; import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js"; import { WalletWithdrawForm } from "./WalletWithdrawForm.js"; import { RouteDefinition } from "../route.js"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { useWithdrawalDetails } from "../hooks/access.js"; +import { useEffect } from "preact/hooks"; + +function ShowOperationPendingTag({ woid, onOperationAlreadyCompleted }: { woid: string, onOperationAlreadyCompleted?: () => void }): VNode { + const { i18n } = useTranslationContext(); + const result = useWithdrawalDetails(woid); + const error = !result || result instanceof TalerError || result.type === "fail" + const completed = !error && (result.body.status === "aborted" || result.body.status === "confirmed") + useEffect(() => { + if (completed && onOperationAlreadyCompleted) { + onOperationAlreadyCompleted() + } + }, [completed]) + + if (error || completed) { + return ; + } + + return + + operation ready + + +} /** * Let the user choose a payment option, @@ -46,7 +76,7 @@ export function PaymentOptions({ routeWireTransfer: RouteDefinition>; }): VNode { const { i18n } = useTranslationContext(); - const [bankState] = useBankState(); + const [bankState, updateBankState] = useBankState(); return (
@@ -98,16 +128,9 @@ export function PaymentOptions({
{!!bankState.currentWithdrawalOperationId && ( - - - operation ready - + { + updateBankState("currentWithdrawalOperationId", undefined) + }} /> )} diff --git a/packages/demobank-ui/src/pages/ProfileNavigation.tsx b/packages/demobank-ui/src/pages/ProfileNavigation.tsx index a6615d578..02f30d8e8 100644 --- a/packages/demobank-ui/src/pages/ProfileNavigation.tsx +++ b/packages/demobank-ui/src/pages/ProfileNavigation.tsx @@ -19,6 +19,7 @@ import { privatePages } from "../Routing.js"; import { useBankCoreApiContext } from "../context/config.js"; import { useBackendState } from "../hooks/backend.js"; import { assertUnreachable } from "@gnu-taler/taler-util"; +import { useNavigationContext } from "../context/navigation.js"; export function ProfileNavigation({ current, @@ -32,6 +33,7 @@ export function ProfileNavigation({ credentials.status !== "loggedIn" ? false : !credentials.isUserAdministrator; + const { navigateTo } = useNavigationContext() return (
@@ -46,19 +48,19 @@ export function ProfileNavigation({ const op = e.currentTarget.value as typeof current; switch (op) { case "details": { - window.location.href = privatePages.myAccountDetails.url({}); + navigateTo(privatePages.myAccountDetails.url({})); return; } case "delete": { - window.location.href = privatePages.myAccountDelete.url({}); + navigateTo(privatePages.myAccountDelete.url({})); return; } case "credentials": { - window.location.href = privatePages.myAccountPassword.url({}); + navigateTo(privatePages.myAccountPassword.url({})); return; } case "cashouts": { - window.location.href = privatePages.myAccountCashouts.url({}); + navigateTo(privatePages.myAccountCashouts.url({})); return; } default: diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx b/packages/demobank-ui/src/pages/QrCodeSection.tsx index f21134aa1..037849804 100644 --- a/packages/demobank-ui/src/pages/QrCodeSection.tsx +++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx @@ -19,7 +19,7 @@ import { HttpStatusCode, stringifyWithdrawUri, TranslatedString, - WithdrawUriResult, + WithdrawUriResult } from "@gnu-taler/taler-util"; import { LocalNotificationBanner, @@ -30,6 +30,7 @@ import { Fragment, h, VNode } from "preact"; import { useEffect } from "preact/hooks"; import { QR } from "../components/QR.js"; import { useBankCoreApiContext } from "../context/config.js"; +import { useTalerWalletIntegrationAPI } from "../context/wallet-integration.js"; import { useBackendState } from "../hooks/backend.js"; export function QrCodeSection({ @@ -40,25 +41,15 @@ export function QrCodeSection({ onAborted: () => void; }): VNode { const { i18n } = useTranslationContext(); + const walletInegrationApi = useTalerWalletIntegrationAPI() const talerWithdrawUri = stringifyWithdrawUri(withdrawUri); const { state: credentials } = useBackendState(); const creds = credentials.status !== "loggedIn" ? undefined : credentials; useEffect(() => { - // Taler Wallet WebExtension is listening to headers response and tab updates. - // In the SPA there is no header response with the Taler URI so - // this hack manually triggers the tab update after the QR is in the DOM. - // WebExtension will be using - // https://developer.chrome.com/docs/extensions/reference/tabs/#event-onUpdated - document.title = `${document.title} ${withdrawUri.withdrawalOperationId}`; - const meta = document.createElement("meta"); - meta.setAttribute("name", "taler-uri"); - meta.setAttribute("content", talerWithdrawUri); - document.head.insertBefore( - meta, - document.head.children.length ? document.head.children[0] : null, - ); + walletInegrationApi.publishTalerAction(withdrawUri) }, []); + const [notification, notify, handleError] = useLocalNotification(); const { api } = useBankCoreApiContext(); diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 1e48b818a..9f7f46c4f 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -21,6 +21,7 @@ import { TranslatedString, assertUnreachable, parseWithdrawUri, + stringifyWithdrawUri, } from "@gnu-taler/taler-util"; import { Attention, @@ -41,6 +42,8 @@ import { RouteDefinition } from "../route.js"; import { undefinedIfEmpty } from "../utils.js"; import { OperationState } from "./OperationState/index.js"; import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js"; +import { useTalerWalletIntegrationAPI } from "../context/wallet-integration.js"; +import { useNavigationContext } from "../context/navigation.js"; const RefAmount = forwardRef(InputAmount); @@ -57,18 +60,32 @@ function OldWithdrawalForm({ }): VNode { const { i18n } = useTranslationContext(); const [settings] = usePreferences(); + + // const walletInegrationApi = useTalerWalletIntegrationAPI() + // const { navigateTo } = useNavigationContext(); + const [bankState, updateBankState] = useBankState(); + const { api } = useBankCoreApiContext(); const { state: credentials } = useBackendState(); const creds = credentials.status !== "loggedIn" ? undefined : credentials; - const { api } = useBankCoreApiContext(); const [amountStr, setAmountStr] = useState( `${settings.maxWithdrawalAmount}`, ); const [notification, notify, handleError] = useLocalNotification(); if (bankState.currentWithdrawalOperationId) { + // FIXME: doing the preventDefault is not optimal + + // const suri = stringifyWithdrawUri({ + // bankIntegrationApiBaseUrl: api.getIntegrationAPI().baseUrl, + // withdrawalOperationId: bankState.currentWithdrawalOperationId, + // }); + // const uri = parseWithdrawUri(suri)! + const url = privatePages.operationDetails.url({ + wopid: bankState.currentWithdrawalOperationId, + }) return ( @@ -77,9 +94,13 @@ function OldWithdrawalForm({ {" "} { + // e.preventDefault() + // walletInegrationApi.publishTalerAction(uri, () => { + // navigateTo(url) + // }) + // }} > this page @@ -324,7 +345,7 @@ export function WalletWithdrawForm({ onAuthorizationRequired={onAuthorizationRequired} routeClose={routeCancel} onAbort={onOperationAborted} - // route={routeCancel} + // route={routeCancel} /> )}
diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx index 3cf552f39..03f6556af 100644 --- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx +++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx @@ -75,29 +75,39 @@ export function WithdrawalQRCode({ if (data.status === "aborted") { return ( -
-

{i18n.str`Operation aborted`}

-
-

- - The wire transfer to the Taler Exchange operator's account was - aborted, your balance was not affected. - -

-

- - You can close this page now or continue to the account page. - -

+
+
+
+ +
+
+

+ Operation aborted +

+
+

+ + The wire transfer to the Taler Exchange operator's account was + aborted from somewhere else, your balance was not affected. + +

+
+
+
+
Continue -
-
+
+ ); } diff --git a/packages/demobank-ui/src/pages/business/CreateCashout.tsx b/packages/demobank-ui/src/pages/business/CreateCashout.tsx index 75e0a9b84..46da5c847 100644 --- a/packages/demobank-ui/src/pages/business/CreateCashout.tsx +++ b/packages/demobank-ui/src/pages/business/CreateCashout.tsx @@ -316,7 +316,7 @@ export function CreateCashout({ const cashoutDisabled = config.supported_tan_channels.length < 1 || !resultAccount.body.cashout_payto_uri; - console.log("disab", cashoutDisabled); + const cashoutAccount = !resultAccount.body.cashout_payto_uri ? undefined : parsePaytoUri(resultAccount.body.cashout_payto_uri); -- cgit v1.2.3