new test api to test hooks rendering iteration, testing state of withdraw page
This commit is contained in:
Sebastian
parent
e09ed46675
commit
ccb50c6360
@ -19,349 +19,203 @@
|
||||
* @author Sebastian Javier Marchano (sebasjm)
|
||||
*/
|
||||
|
||||
import { amountFractionalBase, ExchangeListItem } from "@gnu-taler/taler-util";
|
||||
import { createExample } from "../test-utils.js";
|
||||
import { termsHtml, termsPdf, termsPlain, termsXml } from "./termsExample.js";
|
||||
import { TermsState } from "../utils/index.js";
|
||||
import { View as TestedComponent } from "./Withdraw.js";
|
||||
|
||||
function parseFromString(s: string): Document {
|
||||
if (typeof window === "undefined") {
|
||||
return {} as Document;
|
||||
}
|
||||
return new window.DOMParser().parseFromString(s, "text/xml");
|
||||
}
|
||||
|
||||
export default {
|
||||
title: "cta/withdraw",
|
||||
component: TestedComponent,
|
||||
};
|
||||
|
||||
const exchangeList: ExchangeListItem[] = [
|
||||
{
|
||||
currency: "USD",
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
tos: {
|
||||
currentVersion: "1",
|
||||
acceptedVersion: "1",
|
||||
content: "terms of service content",
|
||||
contentType: "text/plain",
|
||||
},
|
||||
paytoUris: ["asd"],
|
||||
},
|
||||
{
|
||||
currency: "USD",
|
||||
exchangeBaseUrl: "exchange.test.taler.net",
|
||||
tos: {
|
||||
currentVersion: "1",
|
||||
acceptedVersion: "1",
|
||||
content: "terms of service content",
|
||||
contentType: "text/plain",
|
||||
},
|
||||
paytoUris: ["asd"],
|
||||
},
|
||||
];
|
||||
const exchangeList = {
|
||||
"exchange.demo.taler.net": "http://exchange.demo.taler.net (USD)",
|
||||
"exchange.test.taler.net": "http://exchange.test.taler.net (KUDOS)",
|
||||
};
|
||||
|
||||
export const NewTerms = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 1,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
const nullHandler = {
|
||||
onClick: async (): Promise<void> => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: {
|
||||
type: "xml",
|
||||
document: parseFromString(termsXml),
|
||||
},
|
||||
status: "new",
|
||||
version: "",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const TermsReviewingPLAIN = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: {
|
||||
type: "plain",
|
||||
content: termsPlain,
|
||||
},
|
||||
status: "new",
|
||||
version: "",
|
||||
},
|
||||
reviewing: true,
|
||||
});
|
||||
|
||||
export const TermsReviewingHTML = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: {
|
||||
type: "html",
|
||||
href: new URL(`data:text/html;base64,${toBase64(termsHtml)}`),
|
||||
},
|
||||
version: "",
|
||||
status: "new",
|
||||
},
|
||||
reviewing: true,
|
||||
});
|
||||
|
||||
function toBase64(str: string): string {
|
||||
return btoa(
|
||||
encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
|
||||
return String.fromCharCode(parseInt(p1, 16));
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
export const TermsReviewingPDF = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: {
|
||||
type: "pdf",
|
||||
location: new URL(`data:text/html;base64,${toBase64(termsPdf)}`),
|
||||
},
|
||||
status: "new",
|
||||
version: "",
|
||||
},
|
||||
reviewing: true,
|
||||
});
|
||||
|
||||
export const TermsReviewingXML = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: {
|
||||
type: "xml",
|
||||
document: parseFromString(termsXml),
|
||||
},
|
||||
status: "new",
|
||||
version: "",
|
||||
},
|
||||
reviewing: true,
|
||||
});
|
||||
|
||||
export const NewTermsAccepted = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: {
|
||||
type: "xml",
|
||||
document: parseFromString(termsXml),
|
||||
},
|
||||
status: "new",
|
||||
version: "",
|
||||
},
|
||||
reviewed: true,
|
||||
});
|
||||
|
||||
export const TermsShowAgainXML = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: {
|
||||
type: "xml",
|
||||
document: parseFromString(termsXml),
|
||||
},
|
||||
version: "",
|
||||
status: "new",
|
||||
},
|
||||
reviewed: true,
|
||||
reviewing: true,
|
||||
});
|
||||
|
||||
export const TermsChanged = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: {
|
||||
type: "xml",
|
||||
document: parseFromString(termsXml),
|
||||
},
|
||||
version: "",
|
||||
status: "changed",
|
||||
},
|
||||
});
|
||||
|
||||
export const TermsNotFound = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: undefined,
|
||||
status: "notfound",
|
||||
version: "",
|
||||
},
|
||||
});
|
||||
|
||||
export const TermsAlreadyAccepted = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: amountFractionalBase * 0.5,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
const normalTosState = {
|
||||
terms: {
|
||||
status: "accepted",
|
||||
content: undefined,
|
||||
version: "",
|
||||
} as TermsState,
|
||||
onAccept: () => null,
|
||||
onReview: () => null,
|
||||
reviewed: false,
|
||||
reviewing: false,
|
||||
};
|
||||
|
||||
export const TermsOfServiceNotYetLoaded = createExample(TestedComponent, {
|
||||
state: {
|
||||
hook: undefined,
|
||||
status: "success",
|
||||
cancelEditExchange: nullHandler,
|
||||
confirmEditExchange: nullHandler,
|
||||
chosenAmount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
doWithdrawal: nullHandler,
|
||||
editExchange: nullHandler,
|
||||
exchange: {
|
||||
list: exchangeList,
|
||||
value: "exchange.demo.taler.net",
|
||||
onChange: () => null,
|
||||
},
|
||||
showExchangeSelection: false,
|
||||
mustAcceptFirst: false,
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 10000000,
|
||||
value: 1,
|
||||
},
|
||||
toBeReceived: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const WithSomeFee = createExample(TestedComponent, {
|
||||
state: {
|
||||
hook: undefined,
|
||||
status: "success",
|
||||
cancelEditExchange: nullHandler,
|
||||
confirmEditExchange: nullHandler,
|
||||
chosenAmount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
doWithdrawal: nullHandler,
|
||||
editExchange: nullHandler,
|
||||
exchange: {
|
||||
list: exchangeList,
|
||||
value: "exchange.demo.taler.net",
|
||||
onChange: () => null,
|
||||
},
|
||||
showExchangeSelection: false,
|
||||
mustAcceptFirst: false,
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 10000000,
|
||||
value: 1,
|
||||
},
|
||||
toBeReceived: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 1,
|
||||
},
|
||||
tosProps: normalTosState,
|
||||
},
|
||||
});
|
||||
|
||||
export const WithoutFee = createExample(TestedComponent, {
|
||||
knownExchanges: exchangeList,
|
||||
exchangeBaseUrl: "exchange.demo.taler.net",
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
amount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
|
||||
onSwitchExchange: async () => {
|
||||
null;
|
||||
},
|
||||
terms: {
|
||||
content: {
|
||||
type: "xml",
|
||||
document: parseFromString(termsXml),
|
||||
state: {
|
||||
hook: undefined,
|
||||
status: "success",
|
||||
cancelEditExchange: nullHandler,
|
||||
confirmEditExchange: nullHandler,
|
||||
chosenAmount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
status: "accepted",
|
||||
version: "",
|
||||
doWithdrawal: nullHandler,
|
||||
editExchange: nullHandler,
|
||||
exchange: {
|
||||
list: exchangeList,
|
||||
value: "exchange.demo.taler.net",
|
||||
onChange: () => null,
|
||||
},
|
||||
showExchangeSelection: false,
|
||||
mustAcceptFirst: false,
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
toBeReceived: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 2,
|
||||
},
|
||||
tosProps: normalTosState,
|
||||
},
|
||||
});
|
||||
|
||||
export const EditExchangeUntouched = createExample(TestedComponent, {
|
||||
state: {
|
||||
hook: undefined,
|
||||
status: "success",
|
||||
cancelEditExchange: nullHandler,
|
||||
confirmEditExchange: nullHandler,
|
||||
chosenAmount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
doWithdrawal: nullHandler,
|
||||
editExchange: nullHandler,
|
||||
exchange: {
|
||||
list: exchangeList,
|
||||
value: "exchange.demo.taler.net",
|
||||
onChange: () => null,
|
||||
},
|
||||
showExchangeSelection: true,
|
||||
mustAcceptFirst: false,
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
toBeReceived: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 2,
|
||||
},
|
||||
tosProps: normalTosState,
|
||||
},
|
||||
});
|
||||
|
||||
export const EditExchangeModified = createExample(TestedComponent, {
|
||||
state: {
|
||||
hook: undefined,
|
||||
status: "success",
|
||||
cancelEditExchange: nullHandler,
|
||||
confirmEditExchange: nullHandler,
|
||||
chosenAmount: {
|
||||
currency: "USD",
|
||||
value: 2,
|
||||
fraction: 10000000,
|
||||
},
|
||||
doWithdrawal: nullHandler,
|
||||
editExchange: nullHandler,
|
||||
exchange: {
|
||||
list: exchangeList,
|
||||
isDirty: true,
|
||||
value: "exchange.test.taler.net",
|
||||
onChange: () => null,
|
||||
},
|
||||
showExchangeSelection: true,
|
||||
mustAcceptFirst: false,
|
||||
withdrawalFee: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 0,
|
||||
},
|
||||
toBeReceived: {
|
||||
currency: "USD",
|
||||
fraction: 0,
|
||||
value: 2,
|
||||
},
|
||||
tosProps: normalTosState,
|
||||
},
|
||||
});
|
||||
|
||||
122
packages/taler-wallet-webextension/src/cta/Withdraw.test.ts
Normal file
122
packages/taler-wallet-webextension/src/cta/Withdraw.test.ts
Normal file
@ -0,0 +1,122 @@
|
||||
/*
|
||||
This file is part of GNU Taler
|
||||
(C) 2021 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 { ExchangeListItem } from "@gnu-taler/taler-util";
|
||||
import { expect } from "chai";
|
||||
import { mountHook } from "../test-utils.js";
|
||||
import { useComponentState } from "./Withdraw.js";
|
||||
|
||||
const exchanges: ExchangeListItem[] = [{
|
||||
currency: 'ARS',
|
||||
exchangeBaseUrl: 'http://exchange.demo.taler.net',
|
||||
paytoUris: [],
|
||||
tos: {
|
||||
acceptedVersion: '',
|
||||
}
|
||||
}]
|
||||
|
||||
describe("Withdraw CTA states", () => {
|
||||
it("should tell the user that the URI is missing", async () => {
|
||||
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() =>
|
||||
useComponentState(undefined, {
|
||||
listExchanges: async () => ({ exchanges }),
|
||||
getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
|
||||
amount: 'ARS:2',
|
||||
possibleExchanges: exchanges,
|
||||
})
|
||||
} as any),
|
||||
);
|
||||
|
||||
{
|
||||
const { status, hook } = getLastResultOrThrow()
|
||||
expect(status).equals('loading-uri')
|
||||
expect(hook).undefined;
|
||||
}
|
||||
|
||||
await waitNextUpdate()
|
||||
|
||||
{
|
||||
const { status, hook } = getLastResultOrThrow()
|
||||
|
||||
expect(status).equals('loading-uri')
|
||||
expect(hook).deep.equals({ "hasError": true, "operational": false, "message": "ERROR_NO-URI-FOR-WITHDRAWAL" });
|
||||
}
|
||||
await waitNextUpdate()
|
||||
{
|
||||
const { status, hook } = getLastResultOrThrow()
|
||||
|
||||
expect(status).equals('loading-uri')
|
||||
expect(hook).deep.equals({ "hasError": true, "operational": false, "message": "ERROR_NO-URI-FOR-WITHDRAWAL" });
|
||||
}
|
||||
|
||||
await assertNoPendingUpdate()
|
||||
});
|
||||
|
||||
it("should tell the user that there is not known exchange", async () => {
|
||||
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() =>
|
||||
useComponentState('taler-withdraw://', {
|
||||
listExchanges: async () => ({ exchanges }),
|
||||
getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
|
||||
amount: 'EUR:2',
|
||||
possibleExchanges: [],
|
||||
})
|
||||
} as any),
|
||||
);
|
||||
|
||||
{
|
||||
const { status, hook } = getLastResultOrThrow()
|
||||
expect(status).equals('loading-uri')
|
||||
expect(hook).undefined;
|
||||
}
|
||||
|
||||
await waitNextUpdate()
|
||||
|
||||
{
|
||||
const { status, hook } = getLastResultOrThrow()
|
||||
|
||||
expect(status).equals('loading-exchange')
|
||||
expect(hook).undefined;
|
||||
}
|
||||
|
||||
await waitNextUpdate()
|
||||
|
||||
{
|
||||
const { status, hook } = getLastResultOrThrow()
|
||||
|
||||
expect(status).equals('loading-exchange')
|
||||
|
||||
expect(hook).deep.equals({ "hasError": true, "operational": false, "message": "ERROR_NO-DEFAULT-EXCHANGE" });
|
||||
}
|
||||
|
||||
await waitNextUpdate()
|
||||
|
||||
{
|
||||
const { status, hook } = getLastResultOrThrow()
|
||||
|
||||
expect(status).equals('loading-exchange')
|
||||
|
||||
expect(hook).deep.equals({ "hasError": true, "operational": false, "message": "ERROR_NO-DEFAULT-EXCHANGE" });
|
||||
}
|
||||
|
||||
await assertNoPendingUpdate()
|
||||
});
|
||||
|
||||
});
|
||||
@ -21,17 +21,14 @@
|
||||
* @author sebasjm
|
||||
*/
|
||||
|
||||
import {
|
||||
AmountJson,
|
||||
Amounts,
|
||||
ExchangeListItem,
|
||||
WithdrawUriInfoResponse,
|
||||
} from "@gnu-taler/taler-util";
|
||||
import { AmountJson, Amounts } from "@gnu-taler/taler-util";
|
||||
import { TalerError } from "@gnu-taler/taler-wallet-core";
|
||||
import { Fragment, h, VNode } from "preact";
|
||||
import { useCallback, useMemo, useState } from "preact/hooks";
|
||||
import { useState } from "preact/hooks";
|
||||
import { Amount } from "../components/Amount.js";
|
||||
import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
|
||||
import { Loading } from "../components/Loading.js";
|
||||
import { LoadingError } from "../components/LoadingError.js";
|
||||
import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
|
||||
import { LogoHeader } from "../components/LogoHeader.js";
|
||||
import { Part } from "../components/Part.js";
|
||||
import { SelectList } from "../components/SelectList.js";
|
||||
@ -42,72 +39,198 @@ import {
|
||||
SubTitle,
|
||||
WalletAction,
|
||||
} from "../components/styled/index.js";
|
||||
import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
|
||||
import {
|
||||
amountToString,
|
||||
buildTermsOfServiceState,
|
||||
TermsState,
|
||||
} from "../utils/index.js";
|
||||
import * as wxApi from "../wxApi.js";
|
||||
import { TermsOfServiceSection } from "./TermsOfServiceSection.js";
|
||||
import { useTranslationContext } from "../context/translation.js";
|
||||
import { TalerError } from "@gnu-taler/taler-wallet-core";
|
||||
import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
|
||||
import { buildTermsOfServiceState } from "../utils/index.js";
|
||||
import {
|
||||
ButtonHandler,
|
||||
SelectFieldHandler,
|
||||
} from "../wallet/CreateManualWithdraw.js";
|
||||
import * as wxApi from "../wxApi.js";
|
||||
import {
|
||||
Props as TermsOfServiceSectionProps,
|
||||
TermsOfServiceSection,
|
||||
} from "./TermsOfServiceSection.js";
|
||||
|
||||
interface Props {
|
||||
talerWithdrawUri?: string;
|
||||
}
|
||||
|
||||
export interface ViewProps {
|
||||
withdrawalFee: AmountJson;
|
||||
exchangeBaseUrl?: string;
|
||||
amount: AmountJson;
|
||||
onSwitchExchange: (ex: string) => void;
|
||||
onWithdraw: () => Promise<void>;
|
||||
onReview: (b: boolean) => void;
|
||||
onAccept: (b: boolean) => void;
|
||||
reviewing: boolean;
|
||||
reviewed: boolean;
|
||||
terms: TermsState;
|
||||
knownExchanges: ExchangeListItem[];
|
||||
type State = LoadingUri | LoadingExchange | LoadingInfoError | Success;
|
||||
|
||||
interface LoadingUri {
|
||||
status: "loading-uri";
|
||||
hook: HookError | undefined;
|
||||
}
|
||||
interface LoadingExchange {
|
||||
status: "loading-exchange";
|
||||
hook: HookError | undefined;
|
||||
}
|
||||
interface LoadingInfoError {
|
||||
status: "loading-info";
|
||||
hook: HookError | undefined;
|
||||
}
|
||||
|
||||
export function View({
|
||||
withdrawalFee,
|
||||
exchangeBaseUrl,
|
||||
knownExchanges,
|
||||
amount,
|
||||
onWithdraw,
|
||||
onSwitchExchange,
|
||||
terms,
|
||||
reviewing,
|
||||
onReview,
|
||||
onAccept,
|
||||
reviewed,
|
||||
}: ViewProps): VNode {
|
||||
const { i18n } = useTranslationContext();
|
||||
type Success = {
|
||||
status: "success";
|
||||
hook: undefined;
|
||||
|
||||
exchange: SelectFieldHandler;
|
||||
|
||||
editExchange: ButtonHandler;
|
||||
cancelEditExchange: ButtonHandler;
|
||||
confirmEditExchange: ButtonHandler;
|
||||
|
||||
showExchangeSelection: boolean;
|
||||
chosenAmount: AmountJson;
|
||||
withdrawalFee: AmountJson;
|
||||
toBeReceived: AmountJson;
|
||||
|
||||
doWithdrawal: ButtonHandler;
|
||||
tosProps?: TermsOfServiceSectionProps;
|
||||
mustAcceptFirst: boolean;
|
||||
};
|
||||
|
||||
export function useComponentState(
|
||||
talerWithdrawUri: string | undefined,
|
||||
api: typeof wxApi,
|
||||
): State {
|
||||
const [customExchange, setCustomExchange] = useState<string | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
const uriInfoHook = useAsyncAsHook(async () => {
|
||||
if (!talerWithdrawUri) throw Error("ERROR_NO-URI-FOR-WITHDRAWAL");
|
||||
|
||||
const uriInfo = await api.getWithdrawalDetailsForUri({
|
||||
talerWithdrawUri,
|
||||
});
|
||||
const { exchanges: knownExchanges } = await api.listExchanges();
|
||||
|
||||
return { uriInfo, knownExchanges };
|
||||
});
|
||||
|
||||
const exchangeAndAmount = useAsyncAsHook(
|
||||
async () => {
|
||||
if (!uriInfoHook || uriInfoHook.hasError || !uriInfoHook.response) return;
|
||||
const { uriInfo, knownExchanges } = uriInfoHook.response;
|
||||
|
||||
const amount = Amounts.parseOrThrow(uriInfo.amount);
|
||||
|
||||
const thisCurrencyExchanges = knownExchanges.filter(
|
||||
(ex) => ex.currency === amount.currency,
|
||||
);
|
||||
|
||||
const thisExchange: string | undefined =
|
||||
customExchange ??
|
||||
uriInfo.defaultExchangeBaseUrl ??
|
||||
(thisCurrencyExchanges[0]
|
||||
? thisCurrencyExchanges[0].exchangeBaseUrl
|
||||
: undefined);
|
||||
|
||||
if (!thisExchange) throw Error("ERROR_NO-DEFAULT-EXCHANGE");
|
||||
|
||||
return { amount, thisExchange, thisCurrencyExchanges };
|
||||
},
|
||||
[],
|
||||
[!uriInfoHook || uriInfoHook.hasError ? undefined : uriInfoHook],
|
||||
);
|
||||
|
||||
const terms = useAsyncAsHook(
|
||||
async () => {
|
||||
if (
|
||||
!exchangeAndAmount ||
|
||||
exchangeAndAmount.hasError ||
|
||||
!exchangeAndAmount.response
|
||||
)
|
||||
return;
|
||||
const { thisExchange } = exchangeAndAmount.response;
|
||||
const exchangeTos = await api.getExchangeTos(thisExchange, ["text/xml"]);
|
||||
|
||||
const state = buildTermsOfServiceState(exchangeTos);
|
||||
|
||||
return { state };
|
||||
},
|
||||
[],
|
||||
[
|
||||
!exchangeAndAmount || exchangeAndAmount.hasError
|
||||
? undefined
|
||||
: exchangeAndAmount,
|
||||
],
|
||||
);
|
||||
|
||||
const info = useAsyncAsHook(
|
||||
async () => {
|
||||
if (
|
||||
!exchangeAndAmount ||
|
||||
exchangeAndAmount.hasError ||
|
||||
!exchangeAndAmount.response
|
||||
)
|
||||
return;
|
||||
const { thisExchange, amount } = exchangeAndAmount.response;
|
||||
|
||||
const info = await api.getExchangeWithdrawalInfo({
|
||||
exchangeBaseUrl: thisExchange,
|
||||
amount,
|
||||
tosAcceptedFormat: ["text/xml"],
|
||||
});
|
||||
|
||||
const withdrawalFee = Amounts.sub(
|
||||
Amounts.parseOrThrow(info.withdrawalAmountRaw),
|
||||
Amounts.parseOrThrow(info.withdrawalAmountEffective),
|
||||
).amount;
|
||||
|
||||
return { info, withdrawalFee };
|
||||
},
|
||||
[],
|
||||
[
|
||||
!exchangeAndAmount || exchangeAndAmount.hasError
|
||||
? undefined
|
||||
: exchangeAndAmount,
|
||||
],
|
||||
);
|
||||
|
||||
const [reviewing, setReviewing] = useState<boolean>(false);
|
||||
const [reviewed, setReviewed] = useState<boolean>(false);
|
||||
|
||||
const [withdrawError, setWithdrawError] = useState<TalerError | undefined>(
|
||||
undefined,
|
||||
);
|
||||
const [confirmDisabled, setConfirmDisabled] = useState<boolean>(false);
|
||||
|
||||
const needsReview = terms.status === "changed" || terms.status === "new";
|
||||
const [showExchangeSelection, setShowExchangeSelection] = useState(false);
|
||||
const [nextExchange, setNextExchange] = useState<string | undefined>();
|
||||
|
||||
const [switchingExchange, setSwitchingExchange] = useState(false);
|
||||
const [nextExchange, setNextExchange] = useState<string | undefined>(
|
||||
undefined,
|
||||
);
|
||||
if (!uriInfoHook || uriInfoHook.hasError) {
|
||||
return {
|
||||
status: "loading-uri",
|
||||
hook: uriInfoHook,
|
||||
};
|
||||
}
|
||||
|
||||
const exchanges = knownExchanges
|
||||
.filter((e) => e.currency === amount.currency)
|
||||
.reduce(
|
||||
(prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }),
|
||||
{},
|
||||
);
|
||||
if (!exchangeAndAmount || exchangeAndAmount.hasError) {
|
||||
return {
|
||||
status: "loading-exchange",
|
||||
hook: exchangeAndAmount,
|
||||
};
|
||||
}
|
||||
if (!exchangeAndAmount.response) {
|
||||
return {
|
||||
status: "loading-exchange",
|
||||
hook: undefined,
|
||||
};
|
||||
}
|
||||
const { thisExchange, thisCurrencyExchanges, amount } =
|
||||
exchangeAndAmount.response;
|
||||
|
||||
async function doWithdrawAndCheckError(): Promise<void> {
|
||||
try {
|
||||
setConfirmDisabled(true);
|
||||
await onWithdraw();
|
||||
if (!talerWithdrawUri) return;
|
||||
const res = await api.acceptWithdrawal(talerWithdrawUri, thisExchange);
|
||||
if (res.confirmTransferUrl) {
|
||||
document.location.href = res.confirmTransferUrl;
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof TalerError) {
|
||||
setWithdrawError(e);
|
||||
@ -116,202 +239,64 @@ export function View({
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<WalletAction>
|
||||
<LogoHeader />
|
||||
<SubTitle>
|
||||
<i18n.Translate>Digital cash withdrawal</i18n.Translate>
|
||||
</SubTitle>
|
||||
|
||||
{withdrawError && (
|
||||
<ErrorTalerOperation
|
||||
title={
|
||||
<i18n.Translate>
|
||||
Could not finish the withdrawal operation
|
||||
</i18n.Translate>
|
||||
}
|
||||
error={withdrawError.errorDetail}
|
||||
/>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<Part
|
||||
title={<i18n.Translate>Total to withdraw</i18n.Translate>}
|
||||
text={amountToString(Amounts.sub(amount, withdrawalFee).amount)}
|
||||
kind="positive"
|
||||
/>
|
||||
{Amounts.isNonZero(withdrawalFee) && (
|
||||
<Fragment>
|
||||
<Part
|
||||
title={<i18n.Translate>Chosen amount</i18n.Translate>}
|
||||
text={amountToString(amount)}
|
||||
kind="neutral"
|
||||
/>
|
||||
<Part
|
||||
title={<i18n.Translate>Exchange fee</i18n.Translate>}
|
||||
text={amountToString(withdrawalFee)}
|
||||
kind="negative"
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
{exchangeBaseUrl && (
|
||||
<Part
|
||||
title={<i18n.Translate>Exchange</i18n.Translate>}
|
||||
text={exchangeBaseUrl}
|
||||
kind="neutral"
|
||||
big
|
||||
/>
|
||||
)}
|
||||
{!reviewing &&
|
||||
(switchingExchange ? (
|
||||
<Fragment>
|
||||
<div>
|
||||
<SelectList
|
||||
label={<i18n.Translate>Known exchanges</i18n.Translate>}
|
||||
list={exchanges}
|
||||
value={nextExchange}
|
||||
name="switchingExchange"
|
||||
onChange={setNextExchange}
|
||||
/>
|
||||
</div>
|
||||
<LinkSuccess
|
||||
upperCased
|
||||
style={{ fontSize: "small" }}
|
||||
onClick={() => {
|
||||
if (nextExchange !== undefined) {
|
||||
onSwitchExchange(nextExchange);
|
||||
}
|
||||
setSwitchingExchange(false);
|
||||
}}
|
||||
>
|
||||
{nextExchange === undefined ? (
|
||||
<i18n.Translate>Cancel exchange selection</i18n.Translate>
|
||||
) : (
|
||||
<i18n.Translate>Confirm exchange selection</i18n.Translate>
|
||||
)}
|
||||
</LinkSuccess>
|
||||
</Fragment>
|
||||
) : (
|
||||
<LinkSuccess
|
||||
style={{ fontSize: "small" }}
|
||||
upperCased
|
||||
onClick={() => setSwitchingExchange(true)}
|
||||
>
|
||||
<i18n.Translate>Edit exchange</i18n.Translate>
|
||||
</LinkSuccess>
|
||||
))}
|
||||
</section>
|
||||
<TermsOfServiceSection
|
||||
reviewed={reviewed}
|
||||
reviewing={reviewing}
|
||||
terms={terms}
|
||||
onAccept={onAccept}
|
||||
onReview={onReview}
|
||||
/>
|
||||
<section>
|
||||
{(terms.status === "accepted" || (needsReview && reviewed)) && (
|
||||
<ButtonSuccess
|
||||
upperCased
|
||||
disabled={!exchangeBaseUrl || confirmDisabled}
|
||||
onClick={doWithdrawAndCheckError}
|
||||
>
|
||||
<i18n.Translate>Confirm withdrawal</i18n.Translate>
|
||||
</ButtonSuccess>
|
||||
)}
|
||||
{terms.status === "notfound" && (
|
||||
<ButtonWarning
|
||||
upperCased
|
||||
disabled={!exchangeBaseUrl}
|
||||
onClick={doWithdrawAndCheckError}
|
||||
>
|
||||
<i18n.Translate>Withdraw anyway</i18n.Translate>
|
||||
</ButtonWarning>
|
||||
)}
|
||||
</section>
|
||||
</WalletAction>
|
||||
);
|
||||
}
|
||||
|
||||
export function WithdrawPageWithParsedURI({
|
||||
uri,
|
||||
uriInfo,
|
||||
}: {
|
||||
uri: string;
|
||||
uriInfo: WithdrawUriInfoResponse;
|
||||
}): VNode {
|
||||
const { i18n } = useTranslationContext();
|
||||
const [customExchange, setCustomExchange] = useState<string | undefined>(
|
||||
undefined,
|
||||
const exchanges = thisCurrencyExchanges.reduce(
|
||||
(prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }),
|
||||
{},
|
||||
);
|
||||
|
||||
const [reviewing, setReviewing] = useState<boolean>(false);
|
||||
const [reviewed, setReviewed] = useState<boolean>(false);
|
||||
|
||||
const knownExchangesHook = useAsyncAsHook(wxApi.listExchanges);
|
||||
|
||||
const knownExchanges = useMemo(
|
||||
() =>
|
||||
!knownExchangesHook || knownExchangesHook.hasError
|
||||
? []
|
||||
: knownExchangesHook.response.exchanges,
|
||||
[knownExchangesHook],
|
||||
);
|
||||
const withdrawAmount = useMemo(
|
||||
() => Amounts.parseOrThrow(uriInfo.amount),
|
||||
[uriInfo.amount],
|
||||
);
|
||||
const thisCurrencyExchanges = useMemo(
|
||||
() =>
|
||||
knownExchanges.filter((ex) => ex.currency === withdrawAmount.currency),
|
||||
[knownExchanges, withdrawAmount.currency],
|
||||
);
|
||||
|
||||
const exchange: string | undefined = useMemo(
|
||||
() =>
|
||||
customExchange ??
|
||||
uriInfo.defaultExchangeBaseUrl ??
|
||||
(thisCurrencyExchanges[0]
|
||||
? thisCurrencyExchanges[0].exchangeBaseUrl
|
||||
: undefined),
|
||||
[customExchange, thisCurrencyExchanges, uriInfo.defaultExchangeBaseUrl],
|
||||
);
|
||||
|
||||
const detailsHook = useAsyncAsHook(async () => {
|
||||
if (!exchange) throw Error("no default exchange");
|
||||
const tos = await wxApi.getExchangeTos(exchange, ["text/xml"]);
|
||||
|
||||
const tosState = buildTermsOfServiceState(tos);
|
||||
|
||||
const info = await wxApi.getExchangeWithdrawalInfo({
|
||||
exchangeBaseUrl: exchange,
|
||||
amount: withdrawAmount,
|
||||
tosAcceptedFormat: ["text/xml"],
|
||||
});
|
||||
return { tos: tosState, info };
|
||||
});
|
||||
|
||||
if (!detailsHook) {
|
||||
return <Loading />;
|
||||
if (!info || info.hasError) {
|
||||
return {
|
||||
status: "loading-info",
|
||||
hook: info,
|
||||
};
|
||||
}
|
||||
if (detailsHook.hasError) {
|
||||
return (
|
||||
<LoadingError
|
||||
title={
|
||||
<i18n.Translate>Could not load the withdrawal details</i18n.Translate>
|
||||
}
|
||||
error={detailsHook}
|
||||
/>
|
||||
);
|
||||
if (!info.response) {
|
||||
return {
|
||||
status: "loading-info",
|
||||
hook: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
const details = detailsHook.response;
|
||||
const exchangeHandler: SelectFieldHandler = {
|
||||
onChange: setNextExchange,
|
||||
value: nextExchange || thisExchange,
|
||||
list: exchanges,
|
||||
isDirty: nextExchange !== thisExchange,
|
||||
};
|
||||
|
||||
const editExchange: ButtonHandler = {
|
||||
onClick: async () => {
|
||||
setShowExchangeSelection(true);
|
||||
},
|
||||
};
|
||||
const cancelEditExchange: ButtonHandler = {
|
||||
onClick: async () => {
|
||||
setShowExchangeSelection(false);
|
||||
},
|
||||
};
|
||||
const confirmEditExchange: ButtonHandler = {
|
||||
onClick: async () => {
|
||||
setCustomExchange(exchangeHandler.value);
|
||||
setShowExchangeSelection(false);
|
||||
},
|
||||
};
|
||||
|
||||
const { withdrawalFee } = info.response;
|
||||
const toBeReceived = Amounts.sub(amount, withdrawalFee).amount;
|
||||
|
||||
const { state: termsState } = (!terms
|
||||
? undefined
|
||||
: terms.hasError
|
||||
? undefined
|
||||
: terms.response) || { state: undefined };
|
||||
|
||||
async function onAccept(accepted: boolean): Promise<void> {
|
||||
if (!termsState) return;
|
||||
|
||||
const onAccept = async (accepted: boolean): Promise<void> => {
|
||||
if (!exchange) return;
|
||||
try {
|
||||
await wxApi.setExchangeTosAccepted(
|
||||
exchange,
|
||||
accepted ? details.tos.version : undefined,
|
||||
await api.setExchangeTosAccepted(
|
||||
thisExchange,
|
||||
accepted ? termsState.version : undefined,
|
||||
);
|
||||
setReviewed(accepted);
|
||||
} catch (e) {
|
||||
@ -320,44 +305,154 @@ export function WithdrawPageWithParsedURI({
|
||||
// setErrorAccepting(e.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
status: "success",
|
||||
hook: undefined,
|
||||
exchange: exchangeHandler,
|
||||
editExchange,
|
||||
cancelEditExchange,
|
||||
confirmEditExchange,
|
||||
showExchangeSelection,
|
||||
toBeReceived,
|
||||
withdrawalFee,
|
||||
chosenAmount: amount,
|
||||
doWithdrawal: {
|
||||
onClick: doWithdrawAndCheckError,
|
||||
error: withdrawError,
|
||||
disabled: confirmDisabled,
|
||||
},
|
||||
tosProps: !termsState
|
||||
? undefined
|
||||
: {
|
||||
onAccept,
|
||||
onReview: setReviewing,
|
||||
reviewed: reviewed,
|
||||
reviewing: reviewing,
|
||||
terms: termsState,
|
||||
},
|
||||
mustAcceptFirst:
|
||||
termsState !== undefined &&
|
||||
(termsState.status === "changed" || termsState.status === "new"),
|
||||
};
|
||||
}
|
||||
|
||||
const onWithdraw = async (): Promise<void> => {
|
||||
if (!exchange) return;
|
||||
const res = await wxApi.acceptWithdrawal(uri, exchange);
|
||||
if (res.confirmTransferUrl) {
|
||||
document.location.href = res.confirmTransferUrl;
|
||||
}
|
||||
};
|
||||
|
||||
const withdrawalFee = Amounts.sub(
|
||||
Amounts.parseOrThrow(details.info.withdrawalAmountRaw),
|
||||
Amounts.parseOrThrow(details.info.withdrawalAmountEffective),
|
||||
).amount;
|
||||
|
||||
export function View({ state }: { state: Success }): VNode {
|
||||
const { i18n } = useTranslationContext();
|
||||
return (
|
||||
<View
|
||||
onWithdraw={onWithdraw}
|
||||
amount={withdrawAmount}
|
||||
exchangeBaseUrl={exchange}
|
||||
withdrawalFee={withdrawalFee}
|
||||
terms={detailsHook.response.tos}
|
||||
onSwitchExchange={setCustomExchange}
|
||||
knownExchanges={knownExchanges}
|
||||
reviewed={reviewed}
|
||||
onAccept={onAccept}
|
||||
reviewing={reviewing}
|
||||
onReview={setReviewing}
|
||||
/>
|
||||
<WalletAction>
|
||||
<LogoHeader />
|
||||
<SubTitle>
|
||||
<i18n.Translate>Digital cash withdrawal</i18n.Translate>
|
||||
</SubTitle>
|
||||
|
||||
{state.doWithdrawal.error && (
|
||||
<ErrorTalerOperation
|
||||
title={
|
||||
<i18n.Translate>
|
||||
Could not finish the withdrawal operation
|
||||
</i18n.Translate>
|
||||
}
|
||||
error={state.doWithdrawal.error.errorDetail}
|
||||
/>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<Part
|
||||
title={<i18n.Translate>Total to withdraw</i18n.Translate>}
|
||||
text={<Amount value={state.toBeReceived} />}
|
||||
kind="positive"
|
||||
/>
|
||||
{Amounts.isNonZero(state.withdrawalFee) && (
|
||||
<Fragment>
|
||||
<Part
|
||||
title={<i18n.Translate>Chosen amount</i18n.Translate>}
|
||||
text={<Amount value={state.chosenAmount} />}
|
||||
kind="neutral"
|
||||
/>
|
||||
<Part
|
||||
title={<i18n.Translate>Exchange fee</i18n.Translate>}
|
||||
text={<Amount value={state.withdrawalFee} />}
|
||||
kind="negative"
|
||||
/>
|
||||
</Fragment>
|
||||
)}
|
||||
<Part
|
||||
title={<i18n.Translate>Exchange</i18n.Translate>}
|
||||
text={state.exchange.value}
|
||||
kind="neutral"
|
||||
big
|
||||
/>
|
||||
{state.showExchangeSelection ? (
|
||||
<Fragment>
|
||||
<div>
|
||||
<SelectList
|
||||
label={<i18n.Translate>Known exchanges</i18n.Translate>}
|
||||
list={state.exchange.list}
|
||||
value={state.exchange.value}
|
||||
name="switchingExchange"
|
||||
onChange={state.exchange.onChange}
|
||||
/>
|
||||
</div>
|
||||
<LinkSuccess
|
||||
upperCased
|
||||
style={{ fontSize: "small" }}
|
||||
onClick={state.confirmEditExchange.onClick}
|
||||
>
|
||||
{state.exchange.isDirty ? (
|
||||
<i18n.Translate>Confirm exchange selection</i18n.Translate>
|
||||
) : (
|
||||
<i18n.Translate>Cancel exchange selection</i18n.Translate>
|
||||
)}
|
||||
</LinkSuccess>
|
||||
</Fragment>
|
||||
) : (
|
||||
<LinkSuccess
|
||||
style={{ fontSize: "small" }}
|
||||
upperCased
|
||||
onClick={state.editExchange.onClick}
|
||||
>
|
||||
<i18n.Translate>Edit exchange</i18n.Translate>
|
||||
</LinkSuccess>
|
||||
)}
|
||||
</section>
|
||||
{state.tosProps && <TermsOfServiceSection {...state.tosProps} />}
|
||||
{state.tosProps ? (
|
||||
<section>
|
||||
{(state.tosProps.terms.status === "accepted" ||
|
||||
(state.mustAcceptFirst && state.tosProps.reviewed)) && (
|
||||
<ButtonSuccess
|
||||
upperCased
|
||||
disabled={state.doWithdrawal.disabled}
|
||||
onClick={state.doWithdrawal.onClick}
|
||||
>
|
||||
<i18n.Translate>Confirm withdrawal</i18n.Translate>
|
||||
</ButtonSuccess>
|
||||
)}
|
||||
{state.tosProps.terms.status === "notfound" && (
|
||||
<ButtonWarning
|
||||
upperCased
|
||||
disabled={state.doWithdrawal.disabled}
|
||||
onClick={state.doWithdrawal.onClick}
|
||||
>
|
||||
<i18n.Translate>Withdraw anyway</i18n.Translate>
|
||||
</ButtonWarning>
|
||||
)}
|
||||
</section>
|
||||
) : (
|
||||
<section>
|
||||
<i18n.Translate>Loading terms of service...</i18n.Translate>
|
||||
</section>
|
||||
)}
|
||||
</WalletAction>
|
||||
);
|
||||
}
|
||||
|
||||
export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
|
||||
const { i18n } = useTranslationContext();
|
||||
const uriInfoHook = useAsyncAsHook(() =>
|
||||
!talerWithdrawUri
|
||||
? Promise.reject(undefined)
|
||||
: wxApi.getWithdrawalDetailsForUri({ talerWithdrawUri }),
|
||||
);
|
||||
|
||||
const state = useComponentState(talerWithdrawUri, wxApi);
|
||||
|
||||
if (!talerWithdrawUri) {
|
||||
return (
|
||||
@ -366,24 +461,45 @@ export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (!uriInfoHook) {
|
||||
|
||||
if (!state) {
|
||||
return <Loading />;
|
||||
}
|
||||
if (uriInfoHook.hasError) {
|
||||
|
||||
console.log(state);
|
||||
if (state.status === "loading-uri") {
|
||||
if (!state.hook) return <Loading />;
|
||||
|
||||
return (
|
||||
<LoadingError
|
||||
title={
|
||||
<i18n.Translate>Could not get the info from the URI</i18n.Translate>
|
||||
}
|
||||
error={uriInfoHook}
|
||||
error={state.hook}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (state.status === "loading-exchange") {
|
||||
if (!state.hook) return <Loading />;
|
||||
|
||||
return (
|
||||
<LoadingError
|
||||
title={<i18n.Translate>Could not get exchange</i18n.Translate>}
|
||||
error={state.hook}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (state.status === "loading-info") {
|
||||
if (!state.hook) return <Loading />;
|
||||
return (
|
||||
<LoadingError
|
||||
title={
|
||||
<i18n.Translate>Could not get info of withdrawal</i18n.Translate>
|
||||
}
|
||||
error={state.hook}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<WithdrawPageWithParsedURI
|
||||
uri={talerWithdrawUri}
|
||||
uriInfo={uriInfoHook.response}
|
||||
/>
|
||||
);
|
||||
return <View state={state} />;
|
||||
}
|
||||
|
||||
@ -17,10 +17,10 @@ import {
|
||||
NotificationType, TalerErrorDetail
|
||||
} from "@gnu-taler/taler-util";
|
||||
import { TalerError } from "@gnu-taler/taler-wallet-core";
|
||||
import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
|
||||
import { useEffect, useMemo, useState } from "preact/hooks";
|
||||
import * as wxApi from "../wxApi.js";
|
||||
|
||||
interface HookOk<T> {
|
||||
export interface HookOk<T> {
|
||||
hasError: false;
|
||||
response: T;
|
||||
}
|
||||
|
||||
@ -32,30 +32,30 @@ describe('useTalerActionURL hook', () => {
|
||||
})
|
||||
}
|
||||
|
||||
const { result, waitNextUpdate } = mountHook(useTalerActionURL, ctx)
|
||||
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(useTalerActionURL, ctx)
|
||||
|
||||
{
|
||||
const [url] = result.current!
|
||||
const [url] = getLastResultOrThrow()
|
||||
expect(url).undefined;
|
||||
}
|
||||
|
||||
|
||||
await waitNextUpdate("waiting for useEffect")
|
||||
|
||||
{
|
||||
const [url] = result.current!
|
||||
const [url, setDismissed] = getLastResultOrThrow()
|
||||
expect(url).equals("asd");
|
||||
setDismissed(true)
|
||||
}
|
||||
|
||||
const [, setDismissed] = result.current!
|
||||
setDismissed(true)
|
||||
|
||||
await waitNextUpdate("after dismiss")
|
||||
|
||||
{
|
||||
const [url] = result.current!
|
||||
const [url] = getLastResultOrThrow()
|
||||
if (url !== undefined) throw Error('invalid')
|
||||
expect(url).undefined;
|
||||
}
|
||||
|
||||
await assertNoPendingUpdate()
|
||||
})
|
||||
})
|
||||
@ -103,12 +103,12 @@ export const Multiline = (): VNode => {
|
||||
const [value, onChange] = useState("");
|
||||
return (
|
||||
<Container>
|
||||
{/* <TextField
|
||||
<TextField
|
||||
{...{ value, onChange }}
|
||||
label="Multiline"
|
||||
variant="standard"
|
||||
multiline
|
||||
/> */}
|
||||
/>
|
||||
<TextField
|
||||
{...{ value, onChange }}
|
||||
label="Max row 4"
|
||||
@ -116,13 +116,39 @@ export const Multiline = (): VNode => {
|
||||
multiline
|
||||
maxRows={4}
|
||||
/>
|
||||
{/* <TextField
|
||||
<TextField
|
||||
{...{ value, onChange }}
|
||||
label="Row 10"
|
||||
variant="standard"
|
||||
multiline
|
||||
rows={10}
|
||||
/> */}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export const Select = (): VNode => {
|
||||
const [value, onChange] = useState("");
|
||||
return (
|
||||
<Container>
|
||||
<TextField
|
||||
{...{ value, onChange }}
|
||||
label="Multiline"
|
||||
variant="standard"
|
||||
select
|
||||
/>
|
||||
<TextField
|
||||
{...{ value, onChange }}
|
||||
label="Max row 4"
|
||||
variant="standard"
|
||||
select
|
||||
/>
|
||||
<TextField
|
||||
{...{ value, onChange }}
|
||||
label="Row 10"
|
||||
variant="standard"
|
||||
select
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
@ -304,9 +304,9 @@ function getStyleValue(
|
||||
|
||||
function debounce(func: any, wait = 166): any {
|
||||
let timeout: any;
|
||||
function debounced(...args) {
|
||||
function debounced(...args: any[]): void {
|
||||
const later = () => {
|
||||
func.apply(this, args);
|
||||
func.apply({}, args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
@ -452,7 +452,7 @@ export function TextareaAutoSize({
|
||||
renders.current = 0;
|
||||
}, [value]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const handleChange = (event: any): void => {
|
||||
renders.current = 0;
|
||||
|
||||
if (!isControlled) {
|
||||
|
||||
@ -64,23 +64,27 @@ export function renderNodeOrBrowser(Component: any, args: any): void {
|
||||
|
||||
interface Mounted<T> {
|
||||
unmount: () => void;
|
||||
result: { current: T | null };
|
||||
getLastResult: () => T | null;
|
||||
getLastResultOrThrow: () => T;
|
||||
assertNoPendingUpdate: () => void;
|
||||
waitNextUpdate: (s?: string) => Promise<void>;
|
||||
}
|
||||
|
||||
const isNode = typeof window === "undefined"
|
||||
|
||||
export function mountHook<T>(callback: () => T, Context?: ({ children }: { children: any }) => VNode): Mounted<T> {
|
||||
const result: { current: T | null } = {
|
||||
current: null
|
||||
}
|
||||
// const result: { current: T | null } = {
|
||||
// current: null
|
||||
// }
|
||||
let lastResult: T | null = null;
|
||||
|
||||
const listener: Array<() => void> = []
|
||||
|
||||
// component that's going to hold the hook
|
||||
function Component(): VNode {
|
||||
const hookResult = callback()
|
||||
// save the hook result
|
||||
result.current = hookResult
|
||||
lastResult = hookResult
|
||||
// notify to everyone waiting for an update and clean the queue
|
||||
listener.splice(0, listener.length).forEach(cb => cb())
|
||||
return create(Fragment, {})
|
||||
@ -119,7 +123,34 @@ export function mountHook<T>(callback: () => T, Context?: ({ children }: { child
|
||||
}
|
||||
}
|
||||
|
||||
function getLastResult(): T | null {
|
||||
const copy = lastResult
|
||||
lastResult = null
|
||||
return copy;
|
||||
}
|
||||
|
||||
function getLastResultOrThrow(): T {
|
||||
const r = getLastResult()
|
||||
if (!r) throw Error('there was no last result')
|
||||
return r;
|
||||
}
|
||||
|
||||
async function assertNoPendingUpdate(): Promise<void> {
|
||||
await new Promise((res, rej) => {
|
||||
const tid = setTimeout(() => {
|
||||
res(undefined)
|
||||
}, 10)
|
||||
|
||||
listener.push(() => {
|
||||
clearTimeout(tid)
|
||||
rej(Error(`Expecting no pending result but the hook get updated. Check the dependencies of the hooks.`))
|
||||
})
|
||||
})
|
||||
|
||||
const r = getLastResult()
|
||||
if (r) throw Error('There are still pending results. This may happen because the hook did a new update but the test didn\'t get the result using getLastResult');
|
||||
}
|
||||
return {
|
||||
unmount, result, waitNextUpdate
|
||||
unmount, getLastResult, getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate
|
||||
}
|
||||
}
|
||||
|
||||
@ -156,34 +156,27 @@ type TermsDocument =
|
||||
| TermsDocumentJson
|
||||
| TermsDocumentPdf;
|
||||
|
||||
interface TermsDocumentXml {
|
||||
export interface TermsDocumentXml {
|
||||
type: "xml";
|
||||
document: Document;
|
||||
}
|
||||
|
||||
interface TermsDocumentHtml {
|
||||
export interface TermsDocumentHtml {
|
||||
type: "html";
|
||||
href: URL;
|
||||
}
|
||||
|
||||
interface TermsDocumentPlain {
|
||||
export interface TermsDocumentPlain {
|
||||
type: "plain";
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface TermsDocumentJson {
|
||||
export interface TermsDocumentJson {
|
||||
type: "json";
|
||||
data: any;
|
||||
}
|
||||
|
||||
interface TermsDocumentPdf {
|
||||
export interface TermsDocumentPdf {
|
||||
type: "pdf";
|
||||
location: URL;
|
||||
}
|
||||
|
||||
export function amountToString(text: AmountJson): string {
|
||||
const aj = Amounts.jsonifyAmount(text);
|
||||
const amount = Amounts.stringifyValue(aj);
|
||||
return `${amount} ${aj.currency}`;
|
||||
}
|
||||
|
||||
|
||||
@ -36,174 +36,182 @@ const exchangeListEmpty = {
|
||||
|
||||
describe("CreateManualWithdraw states", () => {
|
||||
it("should set noExchangeFound when exchange list is empty", () => {
|
||||
const { result } = mountHook(() =>
|
||||
const { getLastResultOrThrow } = mountHook(() =>
|
||||
useComponentState(exchangeListEmpty, undefined, undefined),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
}
|
||||
const { noExchangeFound } = getLastResultOrThrow()
|
||||
|
||||
expect(result.current.noExchangeFound).equal(true)
|
||||
expect(noExchangeFound).equal(true)
|
||||
});
|
||||
|
||||
it("should set noExchangeFound when exchange list doesn't include selected currency", () => {
|
||||
const { result } = mountHook(() =>
|
||||
const { getLastResultOrThrow } = mountHook(() =>
|
||||
useComponentState(exchangeListWithARSandUSD, undefined, "COL"),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
}
|
||||
const { noExchangeFound } = getLastResultOrThrow()
|
||||
|
||||
expect(result.current.noExchangeFound).equal(true)
|
||||
expect(noExchangeFound).equal(true)
|
||||
});
|
||||
|
||||
|
||||
it("should select the first exchange from the list", () => {
|
||||
const { result } = mountHook(() =>
|
||||
const { getLastResultOrThrow } = mountHook(() =>
|
||||
useComponentState(exchangeListWithARSandUSD, undefined, undefined),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
}
|
||||
const { exchange } = getLastResultOrThrow()
|
||||
|
||||
expect(result.current.exchange.value).equal("url1")
|
||||
expect(exchange.value).equal("url1")
|
||||
});
|
||||
|
||||
it("should select the first exchange with the selected currency", () => {
|
||||
const { result } = mountHook(() =>
|
||||
const { getLastResultOrThrow } = mountHook(() =>
|
||||
useComponentState(exchangeListWithARSandUSD, undefined, "ARS"),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
}
|
||||
const { exchange } = getLastResultOrThrow()
|
||||
|
||||
expect(result.current.exchange.value).equal("url2")
|
||||
expect(exchange.value).equal("url2")
|
||||
});
|
||||
|
||||
it("should change the exchange when currency change", async () => {
|
||||
const { result, waitNextUpdate } = mountHook(() =>
|
||||
const { getLastResultOrThrow, waitNextUpdate } = mountHook(() =>
|
||||
useComponentState(exchangeListWithARSandUSD, undefined, "ARS"),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
|
||||
{
|
||||
const { exchange, currency } = getLastResultOrThrow()
|
||||
|
||||
expect(exchange.value).equal("url2")
|
||||
|
||||
currency.onChange("USD")
|
||||
}
|
||||
|
||||
expect(result.current.exchange.value).equal("url2")
|
||||
|
||||
result.current.currency.onChange("USD")
|
||||
|
||||
await waitNextUpdate()
|
||||
|
||||
expect(result.current.exchange.value).equal("url1")
|
||||
{
|
||||
const { exchange } = getLastResultOrThrow()
|
||||
expect(exchange.value).equal("url1")
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
it("should change the currency when exchange change", async () => {
|
||||
const { result, waitNextUpdate } = mountHook(() =>
|
||||
const { getLastResultOrThrow, waitNextUpdate } = mountHook(() =>
|
||||
useComponentState(exchangeListWithARSandUSD, undefined, "ARS"),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
{
|
||||
const { exchange, currency } = getLastResultOrThrow()
|
||||
|
||||
expect(exchange.value).equal("url2")
|
||||
expect(currency.value).equal("ARS")
|
||||
|
||||
exchange.onChange("url1")
|
||||
}
|
||||
|
||||
expect(result.current.exchange.value).equal("url2")
|
||||
expect(result.current.currency.value).equal("ARS")
|
||||
|
||||
result.current.exchange.onChange("url1")
|
||||
|
||||
await waitNextUpdate()
|
||||
|
||||
expect(result.current.exchange.value).equal("url1")
|
||||
expect(result.current.currency.value).equal("USD")
|
||||
{
|
||||
const { exchange, currency } = getLastResultOrThrow()
|
||||
|
||||
expect(exchange.value).equal("url1")
|
||||
expect(currency.value).equal("USD")
|
||||
}
|
||||
});
|
||||
|
||||
it("should update parsed amount when amount change", async () => {
|
||||
const { result, waitNextUpdate } = mountHook(() =>
|
||||
const { getLastResultOrThrow, waitNextUpdate } = mountHook(() =>
|
||||
useComponentState(exchangeListWithARSandUSD, undefined, "ARS"),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
{
|
||||
const { amount, parsedAmount } = getLastResultOrThrow()
|
||||
|
||||
expect(parsedAmount).equal(undefined)
|
||||
|
||||
amount.onInput("12")
|
||||
}
|
||||
|
||||
expect(result.current.parsedAmount).equal(undefined)
|
||||
|
||||
result.current.amount.onInput("12")
|
||||
|
||||
await waitNextUpdate()
|
||||
|
||||
expect(result.current.parsedAmount).deep.equals({
|
||||
value: 12, fraction: 0, currency: "ARS"
|
||||
})
|
||||
{
|
||||
const { parsedAmount } = getLastResultOrThrow()
|
||||
|
||||
expect(parsedAmount).deep.equals({
|
||||
value: 12, fraction: 0, currency: "ARS"
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
it("should have an amount field", async () => {
|
||||
const { result, waitNextUpdate } = mountHook(() =>
|
||||
const { getLastResultOrThrow, waitNextUpdate } = mountHook(() =>
|
||||
useComponentState(exchangeListWithARSandUSD, undefined, "ARS"),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
}
|
||||
|
||||
await defaultTestForInputText(waitNextUpdate, () => result.current!.amount)
|
||||
await defaultTestForInputText(waitNextUpdate, () => getLastResultOrThrow().amount)
|
||||
})
|
||||
|
||||
it("should have an exchange selector ", async () => {
|
||||
const { result, waitNextUpdate } = mountHook(() =>
|
||||
const { getLastResultOrThrow, waitNextUpdate } = mountHook(() =>
|
||||
useComponentState(exchangeListWithARSandUSD, undefined, "ARS"),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
}
|
||||
|
||||
await defaultTestForInputSelect(waitNextUpdate, () => result.current!.exchange)
|
||||
await defaultTestForInputSelect(waitNextUpdate, () => getLastResultOrThrow().exchange)
|
||||
})
|
||||
|
||||
it("should have a currency selector ", async () => {
|
||||
const { result, waitNextUpdate } = mountHook(() =>
|
||||
const { getLastResultOrThrow, waitNextUpdate } = mountHook(() =>
|
||||
useComponentState(exchangeListWithARSandUSD, undefined, "ARS"),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
}
|
||||
|
||||
await defaultTestForInputSelect(waitNextUpdate, () => result.current!.currency)
|
||||
await defaultTestForInputSelect(waitNextUpdate, () => getLastResultOrThrow().currency)
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
|
||||
async function defaultTestForInputText(awaiter: () => Promise<void>, getField: () => TextFieldHandler): Promise<void> {
|
||||
const initialValue = getField().value;
|
||||
const otherValue = `${initialValue} something else`
|
||||
getField().onInput(otherValue)
|
||||
let nextValue = ''
|
||||
{
|
||||
const field = getField()
|
||||
const initialValue = field.value;
|
||||
nextValue = `${initialValue} something else`
|
||||
field.onInput(nextValue)
|
||||
}
|
||||
|
||||
await awaiter()
|
||||
|
||||
expect(getField().value).equal(otherValue)
|
||||
{
|
||||
const field = getField()
|
||||
expect(field.value).equal(nextValue)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function defaultTestForInputSelect(awaiter: () => Promise<void>, getField: () => SelectFieldHandler): Promise<void> {
|
||||
const initialValue = getField().value;
|
||||
const keys = Object.keys(getField().list)
|
||||
const nextIdx = keys.indexOf(initialValue) + 1
|
||||
if (keys.length < nextIdx) {
|
||||
throw new Error('no enough values')
|
||||
let nextValue = ''
|
||||
|
||||
{
|
||||
const field = getField();
|
||||
const initialValue = field.value;
|
||||
const keys = Object.keys(field.list)
|
||||
const nextIdx = keys.indexOf(initialValue) + 1
|
||||
if (keys.length < nextIdx) {
|
||||
throw new Error('no enough values')
|
||||
}
|
||||
nextValue = keys[nextIdx]
|
||||
field.onChange(nextValue)
|
||||
}
|
||||
const nextValue = keys[nextIdx]
|
||||
getField().onChange(nextValue)
|
||||
|
||||
await awaiter()
|
||||
|
||||
expect(getField().value).equal(nextValue)
|
||||
{
|
||||
const field = getField();
|
||||
|
||||
expect(field.value).equal(nextValue)
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
*/
|
||||
|
||||
import { AmountJson, Amounts } from "@gnu-taler/taler-util";
|
||||
import { TalerError } from "@gnu-taler/taler-wallet-core";
|
||||
import { Fragment, h, VNode } from "preact";
|
||||
import { useState } from "preact/hooks";
|
||||
import { ErrorMessage } from "../components/ErrorMessage.js";
|
||||
@ -60,10 +61,17 @@ export interface TextFieldHandler {
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export interface ButtonHandler {
|
||||
onClick: () => Promise<void>;
|
||||
disabled?: boolean;
|
||||
error?: TalerError;
|
||||
}
|
||||
|
||||
export interface SelectFieldHandler {
|
||||
onChange: (value: string) => void;
|
||||
error?: string;
|
||||
value: string;
|
||||
isDirty?: boolean;
|
||||
list: Record<string, string>;
|
||||
}
|
||||
|
||||
@ -139,17 +147,6 @@ export function useComponentState(
|
||||
};
|
||||
}
|
||||
|
||||
export interface InputHandler {
|
||||
value: string;
|
||||
onInput: (s: string) => void;
|
||||
}
|
||||
|
||||
export interface SelectInputHandler {
|
||||
list: Record<string, string>;
|
||||
value: string;
|
||||
onChange: (s: string) => void;
|
||||
}
|
||||
|
||||
export function CreateManualWithdraw({
|
||||
initialAmount,
|
||||
exchangeUrlWithCurrency,
|
||||
|
||||
@ -39,26 +39,26 @@ const someBalance = [{
|
||||
|
||||
describe("DepositPage states", () => {
|
||||
it("should have status 'no-balance' when balance is empty", () => {
|
||||
const { result } = mountHook(() =>
|
||||
const { getLastResultOrThrow } = mountHook(() =>
|
||||
useComponentState(currency, [], [], feeCalculator),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
{
|
||||
const { status } = getLastResultOrThrow()
|
||||
expect(status).equal("no-balance")
|
||||
}
|
||||
|
||||
expect(result.current.status).equal("no-balance")
|
||||
});
|
||||
|
||||
it("should have status 'no-accounts' when balance is not empty and accounts is empty", () => {
|
||||
const { result } = mountHook(() =>
|
||||
const { getLastResultOrThrow } = mountHook(() =>
|
||||
useComponentState(currency, [], someBalance, feeCalculator),
|
||||
);
|
||||
|
||||
if (!result.current) {
|
||||
expect.fail("hook didn't render");
|
||||
{
|
||||
const { status } = getLastResultOrThrow()
|
||||
expect(status).equal("no-accounts")
|
||||
}
|
||||
|
||||
expect(result.current.status).equal("no-accounts")
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user