[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: standarizing components
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: standarizing components |
|
Date: |
Mon, 01 Aug 2022 15:55:27 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new 614a3e3c standarizing components
614a3e3c is described below
commit 614a3e3c8702bb7436398acb911880caae0fdee7
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Sat Jul 30 20:55:41 2022 -0300
standarizing components
---
packages/taler-wallet-webextension/package.json | 4 +-
.../taler-wallet-webextension/src/cta/Deposit.tsx | 221 --------
.../src/cta/Deposit/index.ts | 70 +++
.../src/cta/Deposit/state.ts | 76 +++
.../{Deposit.stories.tsx => Deposit/stories.tsx} | 22 +-
.../src/cta/{Deposit.test.ts => Deposit/test.ts} | 33 +-
.../src/cta/Deposit/views.tsx | 109 ++++
.../src/cta/Pay.stories.tsx | 396 --------------
.../src/cta/Payment/index.ts | 93 ++++
.../src/cta/Payment/state.ts | 171 +++++++
.../src/cta/Payment/stories.tsx | 356 +++++++++++++
.../src/cta/{Pay.test.ts => Payment/test.ts} | 72 ++-
.../src/cta/{Pay.tsx => Payment/views.tsx} | 273 +---------
.../src/cta/Refund.stories.tsx | 105 ----
.../taler-wallet-webextension/src/cta/Refund.tsx | 364 -------------
.../src/cta/Refund/index.ts | 94 ++++
.../src/cta/Refund/state.ts | 104 ++++
.../src/cta/Refund/stories.tsx | 96 ++++
.../src/cta/{Refund.test.ts => Refund/test.ts} | 61 ++-
.../src/cta/Refund/views.tsx | 172 +++++++
packages/taler-wallet-webextension/src/cta/Tip.tsx | 241 ---------
.../taler-wallet-webextension/src/cta/Tip/index.ts | 84 +++
.../taler-wallet-webextension/src/cta/Tip/state.ts | 92 ++++
.../src/cta/{Tip.stories.tsx => Tip/stories.tsx} | 38 +-
.../src/cta/{Tip.test.ts => Tip/test.ts} | 54 +-
.../src/cta/Tip/views.tsx | 118 +++++
.../taler-wallet-webextension/src/cta/Withdraw.tsx | 570 ---------------------
.../src/cta/Withdraw/index.ts | 38 +-
.../src/cta/Withdraw/state.ts | 32 +-
.../src/cta/Withdraw/stories.tsx | 14 +-
.../src/cta/Withdraw/test.ts | 50 +-
.../src/cta/Withdraw/views.tsx | 25 +-
.../src/cta/index.stories.ts | 8 +-
.../src/wallet/Application.tsx | 10 +-
34 files changed, 1878 insertions(+), 2388 deletions(-)
diff --git a/packages/taler-wallet-webextension/package.json
b/packages/taler-wallet-webextension/package.json
index d9940776..b62bae08 100644
--- a/packages/taler-wallet-webextension/package.json
+++ b/packages/taler-wallet-webextension/package.json
@@ -9,7 +9,7 @@
"private": false,
"scripts": {
"clean": "rimraf dist lib tsconfig.tsbuildinfo",
- "test": "pnpm compile && mocha --enable-source-maps 'dist/**/*.test.js'",
+ "test": "pnpm compile && mocha --enable-source-maps 'dist/**/*.test.js'
'dist/**/test.js'",
"test:coverage": "nyc pnpm test",
"compile": "tsc && ./build-fast-with-linaria.mjs",
"prepare": "pnpm compile",
@@ -81,4 +81,4 @@
"pogen": {
"domain": "taler-wallet-webex"
}
-}
+}
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx
b/packages/taler-wallet-webextension/src/cta/Deposit.tsx
deleted file mode 100644
index 2c5a94d5..00000000
--- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx
+++ /dev/null
@@ -1,221 +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/>
- */
-
-/**
- * Page shown to the user to confirm entering
- * a contract.
- */
-
-/**
- * Imports.
- */
-
-import {
- AmountJson,
- Amounts,
- AmountString,
- CreateDepositGroupResponse,
-} from "@gnu-taler/taler-util";
-import { Fragment, h, VNode } from "preact";
-import { useState } from "preact/hooks";
-import { Amount } from "../components/Amount.js";
-import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
-import { LogoHeader } from "../components/LogoHeader.js";
-import { Part } from "../components/Part.js";
-import {
- ButtonSuccess,
- SubTitle,
- WalletAction,
-} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
-import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { Button } from "../mui/Button.js";
-import { ButtonHandler } from "../mui/handlers.js";
-import * as wxApi from "../wxApi.js";
-
-interface Props {
- talerDepositUri?: string;
- amount: AmountString;
- goBack: () => Promise<void>;
-}
-
-type State = Loading | Ready | Completed;
-interface Loading {
- status: "loading";
- hook: HookError | undefined;
-}
-interface Ready {
- status: "ready";
- hook: undefined;
- fee: AmountJson;
- cost: AmountJson;
- effective: AmountJson;
- confirm: ButtonHandler;
-}
-interface Completed {
- status: "completed";
- hook: undefined;
-}
-
-export function useComponentState(
- talerDepositUri: string | undefined,
- amountStr: AmountString | undefined,
- api: typeof wxApi,
-): State {
- const [result, setResult] = useState<CreateDepositGroupResponse | undefined>(
- undefined,
- );
-
- const info = useAsyncAsHook(async () => {
- if (!talerDepositUri) throw Error("ERROR_NO-URI-FOR-DEPOSIT");
- if (!amountStr) throw Error("ERROR_NO-AMOUNT-FOR-DEPOSIT");
- const amount = Amounts.parse(amountStr);
- if (!amount) throw Error("ERROR_INVALID-AMOUNT-FOR-DEPOSIT");
- const deposit = await api.prepareDeposit(
- talerDepositUri,
- Amounts.stringify(amount),
- );
- return { deposit, uri: talerDepositUri, amount };
- });
-
- if (!info || info.hasError) {
- return {
- status: "loading",
- hook: info,
- };
- }
-
- const { deposit, uri, amount } = info.response;
- async function doDeposit(): Promise<void> {
- const resp = await api.createDepositGroup(uri, Amounts.stringify(amount));
- setResult(resp);
- }
-
- if (result !== undefined) {
- return {
- status: "completed",
- hook: undefined,
- };
- }
-
- return {
- status: "ready",
- hook: undefined,
- confirm: {
- onClick: doDeposit,
- },
- fee: Amounts.sub(deposit.totalDepositCost, deposit.effectiveDepositAmount)
- .amount,
- cost: deposit.totalDepositCost,
- effective: deposit.effectiveDepositAmount,
- };
-}
-
-export function DepositPage({ talerDepositUri, amount, goBack }: Props): VNode
{
- const { i18n } = useTranslationContext();
-
- const state = useComponentState(talerDepositUri, amount, wxApi);
-
- if (!talerDepositUri) {
- return (
- <span>
- <i18n.Translate>missing taler deposit uri</i18n.Translate>
- </span>
- );
- }
-
- return <View state={state} />;
-}
-
-export interface ViewProps {
- state: State;
-}
-export function View({ state }: ViewProps): VNode {
- const { i18n } = useTranslationContext();
-
- if (state.status === "loading") {
- if (!state.hook) return <Loading />;
- return (
- <LoadingError
- title={<i18n.Translate>Could not load deposit status</i18n.Translate>}
- error={state.hook}
- />
- );
- }
-
- if (state.status === "completed") {
- return (
- <WalletAction>
- <LogoHeader />
-
- <SubTitle>
- <i18n.Translate>Digital cash deposit</i18n.Translate>
- </SubTitle>
- <section>
- <p>
- <i18n.Translate>deposit completed</i18n.Translate>
- </p>
- </section>
- </WalletAction>
- );
- }
-
- return (
- <WalletAction>
- <LogoHeader />
-
- <SubTitle>
- <i18n.Translate>Digital cash deposit</i18n.Translate>
- </SubTitle>
- <section>
- {Amounts.isNonZero(state.cost) && (
- <Part
- big
- title={<i18n.Translate>Cost</i18n.Translate>}
- text={<Amount value={state.cost} />}
- kind="negative"
- />
- )}
- {Amounts.isNonZero(state.fee) && (
- <Part
- big
- title={<i18n.Translate>Fee</i18n.Translate>}
- text={<Amount value={state.fee} />}
- kind="negative"
- />
- )}
- <Part
- big
- title={<i18n.Translate>To be received</i18n.Translate>}
- text={<Amount value={state.effective} />}
- kind="positive"
- />
- </section>
- <section>
- <Button
- variant="contained"
- color="success"
- onClick={state.confirm.onClick}
- >
- <i18n.Translate>
- Deposit {<Amount value={state.effective} />}
- </i18n.Translate>
- </Button>
- </section>
- </WalletAction>
- );
-}
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit/index.ts
b/packages/taler-wallet-webextension/src/cta/Deposit/index.ts
new file mode 100644
index 00000000..c2d70061
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Deposit/index.ts
@@ -0,0 +1,70 @@
+/*
+ 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, AmountString } from "@gnu-taler/taler-util";
+import { Loading } from "../../components/Loading.js";
+import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { ButtonHandler } from "../../mui/handlers.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import * as wxApi from "../../wxApi.js";
+import { useComponentState } from "./state.js";
+import { CompletedView, LoadingUriView, ReadyView } from "./views.js";
+
+
+
+export interface Props {
+ talerDepositUri: string | undefined,
+ amountStr: AmountString | undefined,
+}
+
+export type State =
+ | State.Loading
+ | State.LoadingUriError
+ | State.Ready
+ | State.Completed;
+
+export namespace State {
+
+ export interface Loading {
+ status: "loading";
+ error: undefined;
+ }
+ export interface LoadingUriError {
+ status: "loading-uri";
+ error: HookError;
+ }
+ export interface Ready {
+ status: "ready";
+ error: undefined;
+ fee: AmountJson;
+ cost: AmountJson;
+ effective: AmountJson;
+ confirm: ButtonHandler;
+ }
+ export interface Completed {
+ status: "completed";
+ error: undefined;
+ }
+}
+
+const viewMapping: StateViewMap<State> = {
+ "loading": Loading,
+ "loading-uri": LoadingUriView,
+ completed: CompletedView,
+ ready: ReadyView,
+};
+
+export const DepositPage = compose("Deposit", (p: Props) =>
useComponentState(p, wxApi), viewMapping)
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit/state.ts
b/packages/taler-wallet-webextension/src/cta/Deposit/state.ts
new file mode 100644
index 00000000..8876a297
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Deposit/state.ts
@@ -0,0 +1,76 @@
+/*
+ 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 { Amounts, CreateDepositGroupResponse } from "@gnu-taler/taler-util";
+import { useState } from "preact/hooks";
+import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
+import * as wxApi from "../../wxApi.js";
+import { Props, State } from "./index.js";
+
+export function useComponentState(
+ { talerDepositUri, amountStr }: Props,
+ api: typeof wxApi,
+): State {
+ const [result, setResult] = useState<CreateDepositGroupResponse | undefined>(
+ undefined,
+ );
+
+ const info = useAsyncAsHook(async () => {
+ if (!talerDepositUri) throw Error("ERROR_NO-URI-FOR-DEPOSIT");
+ if (!amountStr) throw Error("ERROR_NO-AMOUNT-FOR-DEPOSIT");
+ const amount = Amounts.parse(amountStr);
+ if (!amount) throw Error("ERROR_INVALID-AMOUNT-FOR-DEPOSIT");
+ const deposit = await api.prepareDeposit(
+ talerDepositUri,
+ Amounts.stringify(amount),
+ );
+ return { deposit, uri: talerDepositUri, amount };
+ });
+
+ if (!info) return { status: "loading", error: undefined }
+ if (info.hasError) {
+ return {
+ status: "loading-uri",
+ error: info,
+ };
+ }
+
+ const { deposit, uri, amount } = info.response;
+ async function doDeposit(): Promise<void> {
+ const resp = await api.createDepositGroup(uri, Amounts.stringify(amount));
+ setResult(resp);
+ }
+
+ if (result !== undefined) {
+ return {
+ status: "completed",
+ error: undefined,
+ };
+ }
+
+ return {
+ status: "ready",
+ error: undefined,
+ confirm: {
+ onClick: doDeposit,
+ },
+ fee: Amounts.sub(deposit.totalDepositCost, deposit.effectiveDepositAmount)
+ .amount,
+ cost: deposit.totalDepositCost,
+ effective: deposit.effectiveDepositAmount,
+ };
+}
\ No newline at end of file
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.stories.tsx
b/packages/taler-wallet-webextension/src/cta/Deposit/stories.tsx
similarity index 67%
rename from packages/taler-wallet-webextension/src/cta/Deposit.stories.tsx
rename to packages/taler-wallet-webextension/src/cta/Deposit/stories.tsx
index 269b33ce..a4168bcc 100644
--- a/packages/taler-wallet-webextension/src/cta/Deposit.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Deposit/stories.tsx
@@ -20,22 +20,18 @@
*/
import { Amounts } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils.js";
-import { View as TestedComponent } from "./Deposit.js";
+import { createExample } from "../../test-utils.js";
+import { ReadyView } from "./views.js";
export default {
title: "cta/deposit",
- component: TestedComponent,
- argTypes: {},
};
-export const Ready = createExample(TestedComponent, {
- state: {
- status: "ready",
- confirm: {},
- cost: Amounts.parseOrThrow("EUR:1.2"),
- effective: Amounts.parseOrThrow("EUR:1"),
- fee: Amounts.parseOrThrow("EUR:0.2"),
- hook: undefined,
- },
+export const Ready = createExample(ReadyView, {
+ status: "ready",
+ confirm: {},
+ cost: Amounts.parseOrThrow("EUR:1.2"),
+ effective: Amounts.parseOrThrow("EUR:1"),
+ fee: Amounts.parseOrThrow("EUR:0.2"),
+ error: undefined,
});
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.test.ts
b/packages/taler-wallet-webextension/src/cta/Deposit/test.ts
similarity index 74%
rename from packages/taler-wallet-webextension/src/cta/Deposit.test.ts
rename to packages/taler-wallet-webextension/src/cta/Deposit/test.ts
index 125a4342..6e7aaf23 100644
--- a/packages/taler-wallet-webextension/src/cta/Deposit.test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Deposit/test.ts
@@ -19,16 +19,18 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { Amounts, PrepareDepositResponse } from "@gnu-taler/taler-util";
+import {
+ Amounts, PrepareDepositResponse
+} from "@gnu-taler/taler-util";
import { expect } from "chai";
-import { mountHook } from "../test-utils.js";
-import { useComponentState } from "./Deposit.jsx";
+import { mountHook } from "../../test-utils.js";
+import { useComponentState } from "./state.js";
describe("Deposit CTA states", () => {
it("should tell the user that the URI is missing", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState(undefined, undefined, {
+ useComponentState({ talerDepositUri: undefined, amountStr: undefined
}, {
prepareRefund: async () => ({}),
applyRefund: async () => ({}),
onUpdateNotification: async () => ({}),
@@ -36,21 +38,21 @@ describe("Deposit CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
}
await waitNextUpdate();
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
- expect(status).equals("loading");
- if (!hook) expect.fail();
- if (!hook.hasError) expect.fail();
- if (hook.operational) expect.fail();
- expect(hook.message).eq("ERROR_NO-URI-FOR-DEPOSIT");
+ expect(status).equals("loading-uri");
+
+ if (!error) expect.fail();
+ if (!error.hasError) expect.fail();
+ if (error.operational) expect.fail();
+ expect(error.message).eq("ERROR_NO-URI-FOR-DEPOSIT");
}
await assertNoPendingUpdate();
@@ -59,7 +61,7 @@ describe("Deposit CTA states", () => {
it("should be ready after loading", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("payto://refund/asdasdas", "EUR:1", {
+ useComponentState({ talerDepositUri: "payto://refund/asdasdas",
amountStr: "EUR:1" }, {
prepareDeposit: async () =>
({
effectiveDepositAmount: Amounts.parseOrThrow("EUR:1"),
@@ -70,9 +72,8 @@ describe("Deposit CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
}
await waitNextUpdate();
@@ -81,7 +82,7 @@ describe("Deposit CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "ready") expect.fail();
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.confirm.onClick).not.undefined;
expect(state.cost).deep.eq(Amounts.parseOrThrow("EUR:1.2"));
expect(state.fee).deep.eq(Amounts.parseOrThrow("EUR:0.2"));
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit/views.tsx
b/packages/taler-wallet-webextension/src/cta/Deposit/views.tsx
new file mode 100644
index 00000000..ba1ca58d
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Deposit/views.tsx
@@ -0,0 +1,109 @@
+/*
+ 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 { Amounts } from "@gnu-taler/taler-util";
+import { Fragment, h, VNode } from "preact";
+import { Amount } from "../../components/Amount.js";
+import { LoadingError } from "../../components/LoadingError.js";
+import { LogoHeader } from "../../components/LogoHeader.js";
+import { Part } from "../../components/Part.js";
+import { SubTitle, WalletAction } from "../../components/styled/index.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { Button } from "../../mui/Button.js";
+import { State } from "./index.js";
+
+/**
+ *
+ * @author sebasjm
+ */
+
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
+ const { i18n } = useTranslationContext();
+
+ return (
+ <LoadingError
+ title={<i18n.Translate>Could not load deposit status</i18n.Translate>}
+ error={error}
+ />
+ );
+}
+export function CompletedView(state: State.Completed): VNode {
+ const { i18n } = useTranslationContext();
+
+ return (
+ <WalletAction>
+ <LogoHeader />
+
+ <SubTitle>
+ <i18n.Translate>Digital cash deposit</i18n.Translate>
+ </SubTitle>
+ <section>
+ <p>
+ <i18n.Translate>deposit completed</i18n.Translate>
+ </p>
+ </section>
+ </WalletAction>
+ );
+}
+
+export function ReadyView(state: State.Ready): VNode {
+ const { i18n } = useTranslationContext();
+
+ return (
+ <WalletAction>
+ <LogoHeader />
+
+ <SubTitle>
+ <i18n.Translate>Digital cash deposit</i18n.Translate>
+ </SubTitle>
+ <section>
+ {Amounts.isNonZero(state.cost) && (
+ <Part
+ big
+ title={<i18n.Translate>Cost</i18n.Translate>}
+ text={<Amount value={state.cost} />}
+ kind="negative"
+ />
+ )}
+ {Amounts.isNonZero(state.fee) && (
+ <Part
+ big
+ title={<i18n.Translate>Fee</i18n.Translate>}
+ text={<Amount value={state.fee} />}
+ kind="negative"
+ />
+ )}
+ <Part
+ big
+ title={<i18n.Translate>To be received</i18n.Translate>}
+ text={<Amount value={state.effective} />}
+ kind="positive"
+ />
+ </section>
+ <section>
+ <Button
+ variant="contained"
+ color="success"
+ onClick={state.confirm.onClick}
+ >
+ <i18n.Translate>
+ Deposit {<Amount value={state.effective} />}
+ </i18n.Translate>
+ </Button>
+ </section>
+ </WalletAction>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
deleted file mode 100644
index 147ae683..00000000
--- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
+++ /dev/null
@@ -1,396 +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 {
- Amounts,
- ContractTerms,
- PreparePayResultType,
-} from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils.js";
-import { View as TestedComponent } from "./Pay.js";
-
-export default {
- title: "cta/pay",
- component: TestedComponent,
- argTypes: {},
-};
-
-const noop = async (): Promise<void> => {
- return;
-};
-
-export const NoBalance = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:10"),
- balance: undefined,
- payHandler: {
- onClick: async () => {
- null;
- },
- },
- totalFees: Amounts.parseOrThrow("USD:0"),
- payResult: undefined,
- uri: "",
- payStatus: {
- status: PreparePayResultType.InsufficientBalance,
- noncePriv: "",
- proposalId: "proposal1234",
- contractTerms: {
- merchant: {
- name: "someone",
- },
- summary: "some beers",
- amount: "USD:10",
- } as Partial<ContractTerms> as any,
- amountRaw: "USD:10",
- },
- },
- goBack: noop,
- goToWalletManualWithdraw: noop,
-});
-
-export const NoEnoughBalance = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:10"),
- balance: {
- currency: "USD",
- fraction: 40000000,
- value: 9,
- },
- payHandler: {
- onClick: async () => {
- null;
- },
- },
- totalFees: Amounts.parseOrThrow("USD:0"),
- payResult: undefined,
- uri: "",
- payStatus: {
- status: PreparePayResultType.InsufficientBalance,
- noncePriv: "",
- proposalId: "proposal1234",
- contractTerms: {
- merchant: {
- name: "someone",
- },
- summary: "some beers",
- amount: "USD:10",
- } as Partial<ContractTerms> as any,
- amountRaw: "USD:10",
- },
- },
- goBack: noop,
- goToWalletManualWithdraw: noop,
-});
-
-export const EnoughBalanceButRestricted = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:10"),
- balance: {
- currency: "USD",
- fraction: 40000000,
- value: 19,
- },
- payHandler: {
- onClick: async () => {
- null;
- },
- },
- totalFees: Amounts.parseOrThrow("USD:0"),
- payResult: undefined,
- uri: "",
- payStatus: {
- status: PreparePayResultType.InsufficientBalance,
- noncePriv: "",
- proposalId: "proposal1234",
- contractTerms: {
- merchant: {
- name: "someone",
- },
- summary: "some beers",
- amount: "USD:10",
- } as Partial<ContractTerms> as any,
- amountRaw: "USD:10",
- },
- },
- goBack: noop,
- goToWalletManualWithdraw: noop,
-});
-
-export const PaymentPossible = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:10"),
- balance: {
- currency: "USD",
- fraction: 40000000,
- value: 11,
- },
- payHandler: {
- onClick: async () => {
- null;
- },
- },
- totalFees: Amounts.parseOrThrow("USD:0"),
- payResult: undefined,
- uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
- payStatus: {
- status: PreparePayResultType.PaymentPossible,
- amountEffective: "USD:10",
- amountRaw: "USD:10",
- noncePriv: "",
- contractTerms: {
- nonce: "123213123",
- merchant: {
- name: "someone",
- },
- amount: "USD:10",
- summary: "some beers",
- } as Partial<ContractTerms> as any,
- contractTermsHash: "123456",
- proposalId: "proposal1234",
- },
- },
- goBack: noop,
- goToWalletManualWithdraw: noop,
-});
-
-export const PaymentPossibleWithFee = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:10"),
- balance: {
- currency: "USD",
- fraction: 40000000,
- value: 11,
- },
- payHandler: {
- onClick: async () => {
- null;
- },
- },
- totalFees: Amounts.parseOrThrow("USD:0.20"),
- payResult: undefined,
- uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
- payStatus: {
- status: PreparePayResultType.PaymentPossible,
- amountEffective: "USD:10.20",
- amountRaw: "USD:10",
- noncePriv: "",
- contractTerms: {
- nonce: "123213123",
- merchant: {
- name: "someone",
- },
- amount: "USD:10",
- summary: "some beers",
- } as Partial<ContractTerms> as any,
- contractTermsHash: "123456",
- proposalId: "proposal1234",
- },
- },
- goBack: noop,
- goToWalletManualWithdraw: noop,
-});
-
-import beer from "../../static-dev/beer.png";
-
-export const TicketWithAProductList = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:10"),
- balance: {
- currency: "USD",
- fraction: 40000000,
- value: 11,
- },
- payHandler: {
- onClick: async () => {
- null;
- },
- },
- totalFees: Amounts.parseOrThrow("USD:0.20"),
- payResult: undefined,
- uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
- payStatus: {
- status: PreparePayResultType.PaymentPossible,
- amountEffective: "USD:10.20",
- amountRaw: "USD:10",
- noncePriv: "",
- contractTerms: {
- nonce: "123213123",
- merchant: {
- name: "someone",
- },
- amount: "USD:10",
- summary: "some beers",
- products: [
- {
- description: "ten beers",
- price: "USD:1",
- quantity: 10,
- image: beer,
- },
- {
- description: "beer without image",
- price: "USD:1",
- quantity: 10,
- },
- {
- description: "one brown beer",
- price: "USD:2",
- quantity: 1,
- image: beer,
- },
- ],
- } as Partial<ContractTerms> as any,
- contractTermsHash: "123456",
- proposalId: "proposal1234",
- },
- },
- goBack: noop,
- goToWalletManualWithdraw: noop,
-});
-
-export const AlreadyConfirmedByOther = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:10"),
- balance: {
- currency: "USD",
- fraction: 40000000,
- value: 11,
- },
- payHandler: {
- onClick: async () => {
- null;
- },
- },
- totalFees: Amounts.parseOrThrow("USD:0.20"),
- payResult: undefined,
- uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
- payStatus: {
- status: PreparePayResultType.AlreadyConfirmed,
- amountEffective: "USD:10",
- amountRaw: "USD:10",
- contractTerms: {
- merchant: {
- name: "someone",
- },
- summary: "some beers",
- amount: "USD:10",
- } as Partial<ContractTerms> as any,
- contractTermsHash: "123456",
- proposalId: "proposal1234",
- paid: false,
- },
- },
- goBack: noop,
- goToWalletManualWithdraw: noop,
-});
-
-export const AlreadyPaidWithoutFulfillment = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:10"),
- balance: {
- currency: "USD",
- fraction: 40000000,
- value: 11,
- },
- payHandler: {
- onClick: async () => {
- null;
- },
- },
- totalFees: Amounts.parseOrThrow("USD:0.20"),
- payResult: undefined,
- uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
- payStatus: {
- status: PreparePayResultType.AlreadyConfirmed,
- amountEffective: "USD:10",
- amountRaw: "USD:10",
- contractTerms: {
- merchant: {
- name: "someone",
- },
- summary: "some beers",
- amount: "USD:10",
- } as Partial<ContractTerms> as any,
- contractTermsHash: "123456",
- proposalId: "proposal1234",
- paid: true,
- },
- },
- goBack: noop,
- goToWalletManualWithdraw: noop,
-});
-
-export const AlreadyPaidWithFulfillment = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:10"),
- balance: {
- currency: "USD",
- fraction: 40000000,
- value: 11,
- },
- payHandler: {
- onClick: async () => {
- null;
- },
- },
- totalFees: Amounts.parseOrThrow("USD:0.20"),
- payResult: undefined,
- uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
- payStatus: {
- status: PreparePayResultType.AlreadyConfirmed,
- amountEffective: "USD:10",
- amountRaw: "USD:10",
- contractTerms: {
- merchant: {
- name: "someone",
- },
- fulfillment_message:
- "congratulations! you are looking at the fulfillment message! ",
- summary: "some beers",
- amount: "USD:10",
- } as Partial<ContractTerms> as any,
- contractTermsHash: "123456",
- proposalId: "proposal1234",
- paid: true,
- },
- },
- goBack: noop,
- goToWalletManualWithdraw: noop,
-});
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/index.ts
b/packages/taler-wallet-webextension/src/cta/Payment/index.ts
new file mode 100644
index 00000000..0e67a499
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Payment/index.ts
@@ -0,0 +1,93 @@
+/*
+ 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, ConfirmPayResult, PreparePayResult } from
"@gnu-taler/taler-util";
+import { Loading } from "../../components/Loading.js";
+import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { ButtonHandler } from "../../mui/handlers.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import * as wxApi from "../../wxApi.js";
+import { useComponentState } from "./state.js";
+import { LoadingUriView, BaseView } from "./views.js";
+
+
+
+export interface Props {
+ talerPayUri?: string;
+ goToWalletManualWithdraw: (currency?: string) => Promise<void>;
+ goBack: () => Promise<void>;
+}
+
+export type State =
+ | State.Loading
+ | State.LoadingUriError
+ | State.Ready
+ | State.NoEnoughBalance
+ | State.NoBalanceForCurrency
+ | State.Confirmed;
+
+export namespace State {
+
+ export interface Loading {
+ status: "loading";
+ error: undefined;
+ }
+ export interface LoadingUriError {
+ status: "loading-uri";
+ error: HookError;
+ }
+
+ interface BaseInfo {
+ amount: AmountJson;
+ totalFees: AmountJson;
+ payStatus: PreparePayResult;
+ uri: string;
+ error: undefined;
+ goToWalletManualWithdraw: (currency?: string) => Promise<void>;
+ goBack: () => Promise<void>;
+ }
+ export interface NoBalanceForCurrency extends BaseInfo {
+ status: "no-balance-for-currency"
+ balance: undefined;
+ }
+ export interface NoEnoughBalance extends BaseInfo {
+ status: "no-enough-balance"
+ balance: AmountJson;
+ }
+ export interface Ready extends BaseInfo {
+ status: "ready";
+ payHandler: ButtonHandler;
+ balance: AmountJson;
+ }
+
+ export interface Confirmed extends BaseInfo {
+ status: "confirmed";
+ payResult: ConfirmPayResult;
+ payHandler: ButtonHandler;
+ balance: AmountJson;
+ }
+}
+
+const viewMapping: StateViewMap<State> = {
+ loading: Loading,
+ "loading-uri": LoadingUriView,
+ "no-balance-for-currency": BaseView,
+ "no-enough-balance": BaseView,
+ confirmed: BaseView,
+ ready: BaseView,
+};
+
+export const PaymentPage = compose("Payment", (p: Props) =>
useComponentState(p, wxApi), viewMapping)
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/state.ts
b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
new file mode 100644
index 00000000..3c819ec8
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Payment/state.ts
@@ -0,0 +1,171 @@
+/*
+ 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, Amounts, ConfirmPayResult, ConfirmPayResultType,
NotificationType, PreparePayResultType, TalerErrorCode } from
"@gnu-taler/taler-util";
+import { TalerError } from "@gnu-taler/taler-wallet-core";
+import { useEffect, useState } from "preact/hooks";
+import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
+import { ButtonHandler } from "../../mui/handlers.js";
+import * as wxApi from "../../wxApi.js";
+import { Props, State } from "./index.js";
+
+export function useComponentState(
+ { talerPayUri, goBack, goToWalletManualWithdraw }: Props,
+ api: typeof wxApi,
+): State {
+ const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>(
+ undefined,
+ );
+ const [payErrMsg, setPayErrMsg] = useState<TalerError |
undefined>(undefined);
+
+ const hook = useAsyncAsHook(async () => {
+ if (!talerPayUri) throw Error("ERROR_NO-URI-FOR-PAYMENT");
+ const payStatus = await api.preparePay(talerPayUri);
+ const balance = await api.getBalance();
+ return { payStatus, balance, uri: talerPayUri };
+ });
+
+ useEffect(() => {
+ api.onUpdateNotification([NotificationType.CoinWithdrawn], () => {
+ hook?.retry();
+ });
+ });
+
+ const hookResponse = !hook || hook.hasError ? undefined : hook.response;
+
+ useEffect(() => {
+ if (!hookResponse) return;
+ const { payStatus } = hookResponse;
+ if (
+ payStatus &&
+ payStatus.status === PreparePayResultType.AlreadyConfirmed &&
+ payStatus.paid
+ ) {
+ const fu = payStatus.contractTerms.fulfillment_url;
+ if (fu) {
+ setTimeout(() => {
+ document.location.href = fu;
+ }, 3000);
+ }
+ }
+ }, [hookResponse]);
+
+ if (!hook) return { status: "loading", error: undefined };
+ if (hook.hasError) {
+ return {
+ status: "loading-uri",
+ error: hook,
+ };
+ }
+ const { payStatus } = hook.response;
+ const amount = Amounts.parseOrThrow(payStatus.amountRaw);
+
+ const foundBalance = hook.response.balance.balances.find(
+ (b) => Amounts.parseOrThrow(b.available).currency === amount.currency,
+ );
+
+
+ let totalFees = Amounts.getZero(amount.currency);
+ if (payStatus.status === PreparePayResultType.PaymentPossible) {
+ const amountEffective: AmountJson = Amounts.parseOrThrow(
+ payStatus.amountEffective,
+ );
+ totalFees = Amounts.sub(amountEffective, amount).amount;
+ }
+
+ const baseResult = {
+ uri: hook.response.uri,
+ amount,
+ totalFees,
+ payStatus,
+ error: undefined,
+ goBack, goToWalletManualWithdraw
+ }
+
+ if (!foundBalance) {
+ return {
+ status: "no-balance-for-currency",
+ balance: undefined,
+ ...baseResult,
+ }
+ }
+
+ const foundAmount = Amounts.parseOrThrow(foundBalance.available);
+
+ async function doPayment(): Promise<void> {
+ try {
+ if (payStatus.status !== "payment-possible") {
+ throw TalerError.fromUncheckedDetail({
+ code: TalerErrorCode.GENERIC_CLIENT_INTERNAL_ERROR,
+ hint: `payment is not possible: ${payStatus.status}`,
+ });
+ }
+ const res = await api.confirmPay(payStatus.proposalId, undefined);
+ if (res.type !== ConfirmPayResultType.Done) {
+ throw TalerError.fromUncheckedDetail({
+ code: TalerErrorCode.GENERIC_CLIENT_INTERNAL_ERROR,
+ hint: `could not confirm payment`,
+ payResult: res,
+ });
+ }
+ const fu = res.contractTerms.fulfillment_url;
+ if (fu) {
+ if (typeof window !== "undefined") {
+ document.location.href = fu;
+ } else {
+ console.log(`should d to ${fu}`);
+ }
+ }
+ setPayResult(res);
+ } catch (e) {
+ if (e instanceof TalerError) {
+ setPayErrMsg(e);
+ }
+ }
+ }
+
+ if (payStatus.status === PreparePayResultType.InsufficientBalance) {
+ return {
+ status: 'no-enough-balance',
+ balance: foundAmount,
+ ...baseResult,
+ }
+ }
+
+ const payHandler: ButtonHandler = {
+ onClick: payErrMsg ? undefined : doPayment,
+ error: payErrMsg,
+ };
+
+ if (!payResult) {
+ return {
+ status: "ready",
+ payHandler,
+ ...baseResult,
+ balance: foundAmount
+ };
+ }
+
+ return {
+ status: "confirmed",
+ balance: foundAmount,
+ payResult,
+ payHandler: {},
+ ...baseResult,
+ };
+}
+
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx
b/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx
new file mode 100644
index 00000000..603a9cb3
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Payment/stories.tsx
@@ -0,0 +1,356 @@
+/*
+ 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 {
+ Amounts,
+ ContractTerms,
+ PreparePayResultType,
+} from "@gnu-taler/taler-util";
+import { createExample } from "../../test-utils.js";
+import { BaseView } from "./views.js";
+
+export default {
+ title: "cta/payment",
+ component: BaseView,
+ argTypes: {},
+};
+
+export const NoBalance = createExample(BaseView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:10"),
+ balance: undefined,
+ payHandler: {
+ onClick: async () => {
+ null;
+ },
+ },
+ totalFees: Amounts.parseOrThrow("USD:0"),
+
+ uri: "",
+ payStatus: {
+ status: PreparePayResultType.InsufficientBalance,
+ noncePriv: "",
+ proposalId: "proposal1234",
+ contractTerms: {
+ merchant: {
+ name: "someone",
+ },
+ summary: "some beers",
+ amount: "USD:10",
+ } as Partial<ContractTerms> as any,
+ amountRaw: "USD:10",
+ },
+});
+
+export const NoEnoughBalance = createExample(BaseView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:10"),
+ balance: {
+ currency: "USD",
+ fraction: 40000000,
+ value: 9,
+ },
+ payHandler: {
+ onClick: async () => {
+ null;
+ },
+ },
+ totalFees: Amounts.parseOrThrow("USD:0"),
+
+ uri: "",
+ payStatus: {
+ status: PreparePayResultType.InsufficientBalance,
+ noncePriv: "",
+ proposalId: "proposal1234",
+ contractTerms: {
+ merchant: {
+ name: "someone",
+ },
+ summary: "some beers",
+ amount: "USD:10",
+ } as Partial<ContractTerms> as any,
+ amountRaw: "USD:10",
+ },
+});
+
+export const EnoughBalanceButRestricted = createExample(BaseView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:10"),
+ balance: {
+ currency: "USD",
+ fraction: 40000000,
+ value: 19,
+ },
+ payHandler: {
+ onClick: async () => {
+ null;
+ },
+ },
+ totalFees: Amounts.parseOrThrow("USD:0"),
+
+ uri: "",
+ payStatus: {
+ status: PreparePayResultType.InsufficientBalance,
+ noncePriv: "",
+ proposalId: "proposal1234",
+ contractTerms: {
+ merchant: {
+ name: "someone",
+ },
+ summary: "some beers",
+ amount: "USD:10",
+ } as Partial<ContractTerms> as any,
+ amountRaw: "USD:10",
+ },
+});
+
+export const PaymentPossible = createExample(BaseView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:10"),
+ balance: {
+ currency: "USD",
+ fraction: 40000000,
+ value: 11,
+ },
+ payHandler: {
+ onClick: async () => {
+ null;
+ },
+ },
+ totalFees: Amounts.parseOrThrow("USD:0"),
+
+ uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
+ payStatus: {
+ status: PreparePayResultType.PaymentPossible,
+ amountEffective: "USD:10",
+ amountRaw: "USD:10",
+ noncePriv: "",
+ contractTerms: {
+ nonce: "123213123",
+ merchant: {
+ name: "someone",
+ },
+ amount: "USD:10",
+ summary: "some beers",
+ } as Partial<ContractTerms> as any,
+ contractTermsHash: "123456",
+ proposalId: "proposal1234",
+ },
+});
+
+export const PaymentPossibleWithFee = createExample(BaseView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:10"),
+ balance: {
+ currency: "USD",
+ fraction: 40000000,
+ value: 11,
+ },
+ payHandler: {
+ onClick: async () => {
+ null;
+ },
+ },
+ totalFees: Amounts.parseOrThrow("USD:0.20"),
+
+ uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
+ payStatus: {
+ status: PreparePayResultType.PaymentPossible,
+ amountEffective: "USD:10.20",
+ amountRaw: "USD:10",
+ noncePriv: "",
+ contractTerms: {
+ nonce: "123213123",
+ merchant: {
+ name: "someone",
+ },
+ amount: "USD:10",
+ summary: "some beers",
+ } as Partial<ContractTerms> as any,
+ contractTermsHash: "123456",
+ proposalId: "proposal1234",
+ },
+});
+
+import beer from "../../../static-dev/beer.png";
+
+export const TicketWithAProductList = createExample(BaseView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:10"),
+ balance: {
+ currency: "USD",
+ fraction: 40000000,
+ value: 11,
+ },
+ payHandler: {
+ onClick: async () => {
+ null;
+ },
+ },
+ totalFees: Amounts.parseOrThrow("USD:0.20"),
+
+ uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
+ payStatus: {
+ status: PreparePayResultType.PaymentPossible,
+ amountEffective: "USD:10.20",
+ amountRaw: "USD:10",
+ noncePriv: "",
+ contractTerms: {
+ nonce: "123213123",
+ merchant: {
+ name: "someone",
+ },
+ amount: "USD:10",
+ summary: "some beers",
+ products: [
+ {
+ description: "ten beers",
+ price: "USD:1",
+ quantity: 10,
+ image: beer,
+ },
+ {
+ description: "beer without image",
+ price: "USD:1",
+ quantity: 10,
+ },
+ {
+ description: "one brown beer",
+ price: "USD:2",
+ quantity: 1,
+ image: beer,
+ },
+ ],
+ } as Partial<ContractTerms> as any,
+ contractTermsHash: "123456",
+ proposalId: "proposal1234",
+ },
+});
+
+export const AlreadyConfirmedByOther = createExample(BaseView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:10"),
+ balance: {
+ currency: "USD",
+ fraction: 40000000,
+ value: 11,
+ },
+ payHandler: {
+ onClick: async () => {
+ null;
+ },
+ },
+ totalFees: Amounts.parseOrThrow("USD:0.20"),
+
+ uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
+ payStatus: {
+ status: PreparePayResultType.AlreadyConfirmed,
+ amountEffective: "USD:10",
+ amountRaw: "USD:10",
+ contractTerms: {
+ merchant: {
+ name: "someone",
+ },
+ summary: "some beers",
+ amount: "USD:10",
+ } as Partial<ContractTerms> as any,
+ contractTermsHash: "123456",
+ proposalId: "proposal1234",
+ paid: false,
+ },
+});
+
+export const AlreadyPaidWithoutFulfillment = createExample(BaseView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:10"),
+ balance: {
+ currency: "USD",
+ fraction: 40000000,
+ value: 11,
+ },
+ payHandler: {
+ onClick: async () => {
+ null;
+ },
+ },
+ totalFees: Amounts.parseOrThrow("USD:0.20"),
+
+ uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
+ payStatus: {
+ status: PreparePayResultType.AlreadyConfirmed,
+ amountEffective: "USD:10",
+ amountRaw: "USD:10",
+ contractTerms: {
+ merchant: {
+ name: "someone",
+ },
+ summary: "some beers",
+ amount: "USD:10",
+ } as Partial<ContractTerms> as any,
+ contractTermsHash: "123456",
+ proposalId: "proposal1234",
+ paid: true,
+ },
+});
+
+export const AlreadyPaidWithFulfillment = createExample(BaseView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:10"),
+ balance: {
+ currency: "USD",
+ fraction: 40000000,
+ value: 11,
+ },
+ payHandler: {
+ onClick: async () => {
+ null;
+ },
+ },
+ totalFees: Amounts.parseOrThrow("USD:0.20"),
+
+ uri:
"taler://pay/merchant-backend.taler/2021.242-01G2X4275RBWG/?c=66BE594PDZR24744J6EQK52XM0",
+ payStatus: {
+ status: PreparePayResultType.AlreadyConfirmed,
+ amountEffective: "USD:10",
+ amountRaw: "USD:10",
+ contractTerms: {
+ merchant: {
+ name: "someone",
+ },
+ fulfillment_message:
+ "congratulations! you are looking at the fulfillment message! ",
+ summary: "some beers",
+ amount: "USD:10",
+ } as Partial<ContractTerms> as any,
+ contractTermsHash: "123456",
+ proposalId: "proposal1234",
+ paid: true,
+ },
+});
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.test.ts
b/packages/taler-wallet-webextension/src/cta/Payment/test.ts
similarity index 84%
rename from packages/taler-wallet-webextension/src/cta/Pay.test.ts
rename to packages/taler-wallet-webextension/src/cta/Payment/test.ts
index 42ab902b..aea70b7c 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/test.ts
@@ -30,9 +30,9 @@ import {
PreparePayResultType,
} from "@gnu-taler/taler-util";
import { expect } from "chai";
-import { mountHook } from "../test-utils.js";
-import * as wxApi from "../wxApi.js";
-import { useComponentState } from "./Pay.jsx";
+import { mountHook } from "../../test-utils.js";
+import { useComponentState } from "./state.js";
+import * as wxApi from "../../wxApi.js";
const nullFunction: any = () => null;
type VoidFunction = () => void;
@@ -66,30 +66,30 @@ export class SubsHandler {
}
}
-describe("Pay CTA states", () => {
+describe("Payment CTA states", () => {
it("should tell the user that the URI is missing", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState(undefined, {
+ useComponentState({ talerPayUri: undefined, goBack: nullFunction,
goToWalletManualWithdraw: nullFunction }, {
onUpdateNotification: nullFunction,
} as Partial<typeof wxApi> as any),
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
- expect(status).equals("loading");
- if (hook === undefined) expect.fail();
- expect(hook.hasError).true;
- expect(hook.operational).false;
+ expect(status).equals("loading-uri");
+ if (error === undefined) expect.fail();
+ expect(error.hasError).true;
+ expect(error.operational).false;
}
await assertNoPendingUpdate();
@@ -98,7 +98,7 @@ describe("Pay CTA states", () => {
it("should response with no balance", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taller://pay", {
+ useComponentState({ talerPayUri: "taller://pay", goBack: nullFunction,
goToWalletManualWithdraw: nullFunction }, {
onUpdateNotification: nullFunction,
preparePay: async () =>
({
@@ -113,19 +113,18 @@ describe("Pay CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
{
const r = getLastResultOrThrow();
- if (r.status !== "ready") expect.fail();
+ if (r.status !== "no-balance-for-currency") expect.fail();
expect(r.balance).undefined;
expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:10"));
- expect(r.payHandler.onClick).undefined;
}
await assertNoPendingUpdate();
@@ -134,7 +133,7 @@ describe("Pay CTA states", () => {
it("should not be able to pay if there is no enough balance", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taller://pay", {
+ useComponentState({ talerPayUri: "taller://pay", goBack: nullFunction,
goToWalletManualWithdraw: nullFunction }, {
onUpdateNotification: nullFunction,
preparePay: async () =>
({
@@ -153,19 +152,18 @@ describe("Pay CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
{
const r = getLastResultOrThrow();
- if (r.status !== "ready") expect.fail();
+ if (r.status !== "no-enough-balance") expect.fail();
expect(r.balance).deep.equal(Amounts.parseOrThrow("USD:5"));
expect(r.amount).deep.equal(Amounts.parseOrThrow("USD:10"));
- expect(r.payHandler.onClick).undefined;
}
await assertNoPendingUpdate();
@@ -174,7 +172,7 @@ describe("Pay CTA states", () => {
it("should be able to pay (without fee)", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taller://pay", {
+ useComponentState({ talerPayUri: "taller://pay", goBack: nullFunction,
goToWalletManualWithdraw: nullFunction }, {
onUpdateNotification: nullFunction,
preparePay: async () =>
({
@@ -194,9 +192,9 @@ describe("Pay CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -216,7 +214,7 @@ describe("Pay CTA states", () => {
it("should be able to pay (with fee)", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taller://pay", {
+ useComponentState({ talerPayUri: "taller://pay", goBack: nullFunction,
goToWalletManualWithdraw: nullFunction }, {
onUpdateNotification: nullFunction,
preparePay: async () =>
({
@@ -236,9 +234,9 @@ describe("Pay CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -258,7 +256,7 @@ describe("Pay CTA states", () => {
it("should get confirmation done after pay successfully", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taller://pay", {
+ useComponentState({ talerPayUri: "taller://pay", goBack: nullFunction,
goToWalletManualWithdraw: nullFunction }, {
onUpdateNotification: nullFunction,
preparePay: async () =>
({
@@ -283,9 +281,9 @@ describe("Pay CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -319,7 +317,7 @@ describe("Pay CTA states", () => {
it("should not stay in ready state after pay with error", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taller://pay", {
+ useComponentState({ talerPayUri: "taller://pay", goBack: nullFunction,
goToWalletManualWithdraw: nullFunction }, {
onUpdateNotification: nullFunction,
preparePay: async () =>
({
@@ -344,9 +342,9 @@ describe("Pay CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -395,7 +393,7 @@ describe("Pay CTA states", () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taller://pay", {
+ useComponentState({ talerPayUri: "taller://pay", goBack: nullFunction,
goToWalletManualWithdraw: nullFunction }, {
onUpdateNotification: subscriptions.saveSubscription,
preparePay: async () =>
({
@@ -415,9 +413,9 @@ describe("Pay CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx
b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
similarity index 62%
rename from packages/taler-wallet-webextension/src/cta/Pay.tsx
rename to packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index df381832..a8c9a640 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -14,40 +14,22 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-/**
- * Page shown to the user to confirm entering
- * a contract.
- */
-
-/**
- * Imports.
- */
-
import {
- AmountJson,
Amounts,
- ConfirmPayResult,
ConfirmPayResultType,
ContractTerms,
- NotificationType,
- PreparePayResult,
PreparePayResultType,
Product,
- TalerErrorCode,
} from "@gnu-taler/taler-util";
-import { TalerError } from "@gnu-taler/taler-wallet-core";
import { Fragment, h, VNode } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import { Amount } from "../components/Amount.js";
-import { ErrorMessage } from "../components/ErrorMessage.js";
-import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
-import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
-import { LogoHeader } from "../components/LogoHeader.js";
-import { Part } from "../components/Part.js";
-import { QR } from "../components/QR.js";
+import { useState } from "preact/hooks";
+import { Amount } from "../../components/Amount.js";
+import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
+import { LoadingError } from "../../components/LoadingError.js";
+import { LogoHeader } from "../../components/LogoHeader.js";
+import { Part } from "../../components/Part.js";
+import { QR } from "../../components/QR.js";
import {
- ButtonSuccess,
Link,
LinkSuccess,
SmallLightText,
@@ -55,233 +37,32 @@ import {
SuccessBox,
WalletAction,
WarningBox,
-} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
-import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { Button } from "../mui/Button.js";
-import { ButtonHandler } from "../mui/handlers.js";
-import * as wxApi from "../wxApi.js";
-
-interface Props {
- talerPayUri?: string;
- goToWalletManualWithdraw: (currency?: string) => Promise<void>;
- goBack: () => Promise<void>;
-}
-
-type State = Loading | Ready | Confirmed;
-interface Loading {
- status: "loading";
- hook: HookError | undefined;
-}
-interface Ready {
- status: "ready";
- hook: undefined;
- uri: string;
- amount: AmountJson;
- totalFees: AmountJson;
- payStatus: PreparePayResult;
- balance: AmountJson | undefined;
- payHandler: ButtonHandler;
- payResult: undefined;
-}
-
-interface Confirmed {
- status: "confirmed";
- hook: undefined;
- uri: string;
- amount: AmountJson;
- totalFees: AmountJson;
- payStatus: PreparePayResult;
- balance: AmountJson | undefined;
- payResult: ConfirmPayResult;
- payHandler: ButtonHandler;
-}
-
-export function useComponentState(
- talerPayUri: string | undefined,
- api: typeof wxApi,
-): State {
- const [payResult, setPayResult] = useState<ConfirmPayResult | undefined>(
- undefined,
- );
- const [payErrMsg, setPayErrMsg] = useState<TalerError |
undefined>(undefined);
-
- const hook = useAsyncAsHook(async () => {
- if (!talerPayUri) throw Error("ERROR_NO-URI-FOR-PAYMENT");
- const payStatus = await api.preparePay(talerPayUri);
- const balance = await api.getBalance();
- return { payStatus, balance, uri: talerPayUri };
- });
-
- useEffect(() => {
- api.onUpdateNotification([NotificationType.CoinWithdrawn], () => {
- hook?.retry();
- });
- });
-
- const hookResponse = !hook || hook.hasError ? undefined : hook.response;
-
- useEffect(() => {
- if (!hookResponse) return;
- const { payStatus } = hookResponse;
- if (
- payStatus &&
- payStatus.status === PreparePayResultType.AlreadyConfirmed &&
- payStatus.paid
- ) {
- const fu = payStatus.contractTerms.fulfillment_url;
- if (fu) {
- setTimeout(() => {
- document.location.href = fu;
- }, 3000);
- }
- }
- }, [hookResponse]);
-
- if (!hook || hook.hasError) {
- return {
- status: "loading",
- hook,
- };
- }
- const { payStatus } = hook.response;
- const amount = Amounts.parseOrThrow(payStatus.amountRaw);
-
- const foundBalance = hook.response.balance.balances.find(
- (b) => Amounts.parseOrThrow(b.available).currency === amount.currency,
- );
- const foundAmount = foundBalance
- ? Amounts.parseOrThrow(foundBalance.available)
- : undefined;
-
- async function doPayment(): Promise<void> {
- try {
- if (payStatus.status !== "payment-possible") {
- throw TalerError.fromUncheckedDetail({
- code: TalerErrorCode.GENERIC_CLIENT_INTERNAL_ERROR,
- hint: `payment is not possible: ${payStatus.status}`,
- });
- }
- const res = await api.confirmPay(payStatus.proposalId, undefined);
- if (res.type !== ConfirmPayResultType.Done) {
- throw TalerError.fromUncheckedDetail({
- code: TalerErrorCode.GENERIC_CLIENT_INTERNAL_ERROR,
- hint: `could not confirm payment`,
- payResult: res,
- });
- }
- const fu = res.contractTerms.fulfillment_url;
- if (fu) {
- if (typeof window !== "undefined") {
- document.location.href = fu;
- } else {
- console.log(`should d to ${fu}`);
- }
- }
- setPayResult(res);
- } catch (e) {
- if (e instanceof TalerError) {
- setPayErrMsg(e);
- }
- }
- }
-
- const payDisabled =
- payErrMsg ||
- !foundAmount ||
- payStatus.status === PreparePayResultType.InsufficientBalance;
-
- const payHandler: ButtonHandler = {
- onClick: payDisabled ? undefined : doPayment,
- error: payErrMsg,
- };
+} from "../../components/styled/index.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { Button } from "../../mui/Button.js";
+import { State } from "./index.js";
- let totalFees = Amounts.getZero(amount.currency);
- if (payStatus.status === PreparePayResultType.PaymentPossible) {
- const amountEffective: AmountJson = Amounts.parseOrThrow(
- payStatus.amountEffective,
- );
- totalFees = Amounts.sub(amountEffective, amount).amount;
- }
-
- if (!payResult) {
- return {
- status: "ready",
- hook: undefined,
- uri: hook.response.uri,
- amount,
- totalFees,
- balance: foundAmount,
- payHandler,
- payStatus: hook.response.payStatus,
- payResult,
- };
- }
-
- return {
- status: "confirmed",
- hook: undefined,
- uri: hook.response.uri,
- amount,
- totalFees,
- balance: foundAmount,
- payStatus: hook.response.payStatus,
- payResult,
- payHandler: {},
- };
-}
-
-export function PayPage({
- talerPayUri,
- goToWalletManualWithdraw,
- goBack,
-}: Props): VNode {
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
const { i18n } = useTranslationContext();
- const state = useComponentState(talerPayUri, wxApi);
-
- if (state.status === "loading") {
- if (!state.hook) return <Loading />;
- return (
- <LoadingError
- title={<i18n.Translate>Could not load pay status</i18n.Translate>}
- error={state.hook}
- />
- );
- }
return (
- <View
- state={state}
- goBack={goBack}
- goToWalletManualWithdraw={goToWalletManualWithdraw}
+ <LoadingError
+ title={<i18n.Translate>Could not load pay status</i18n.Translate>}
+ error={error}
/>
);
}
-export function View({
- state,
- goBack,
- goToWalletManualWithdraw,
-}: {
- state: Ready | Confirmed;
- goToWalletManualWithdraw: (currency?: string) => Promise<void>;
- goBack: () => Promise<void>;
-}): VNode {
+type SupportedStates =
+ | State.Ready
+ | State.Confirmed
+ | State.NoBalanceForCurrency
+ | State.NoEnoughBalance;
+
+export function BaseView(state: SupportedStates): VNode {
const { i18n } = useTranslationContext();
const contractTerms: ContractTerms = state.payStatus.contractTerms;
- if (!contractTerms) {
- return (
- <ErrorMessage
- title={
- <i18n.Translate>
- Could not load contract terms from merchant or wallet backend.
- </i18n.Translate>
- }
- />
- );
- }
-
return (
<WalletAction>
<LogoHeader />
@@ -341,10 +122,10 @@ export function View({
</section>
<ButtonsSection
state={state}
- goToWalletManualWithdraw={goToWalletManualWithdraw}
+ goToWalletManualWithdraw={state.goToWalletManualWithdraw}
/>
<section>
- <Link upperCased onClick={goBack}>
+ <Link upperCased onClick={state.goBack}>
<i18n.Translate>Cancel</i18n.Translate>
</Link>
</section>
@@ -421,7 +202,7 @@ export function ProductList({ products }: { products:
Product[] }): VNode {
);
}
-function ShowImportantMessage({ state }: { state: Ready | Confirmed }): VNode {
+function ShowImportantMessage({ state }: { state: SupportedStates }): VNode {
const { i18n } = useTranslationContext();
const { payStatus } = state;
if (payStatus.status === PreparePayResultType.AlreadyConfirmed) {
@@ -483,7 +264,7 @@ function ShowImportantMessage({ state }: { state: Ready |
Confirmed }): VNode {
return <Fragment />;
}
-function PayWithMobile({ state }: { state: Ready }): VNode {
+function PayWithMobile({ state }: { state: State.Ready }): VNode {
const { i18n } = useTranslationContext();
const [showQR, setShowQR] = useState<boolean>(false);
@@ -520,7 +301,7 @@ function ButtonsSection({
state,
goToWalletManualWithdraw,
}: {
- state: Ready | Confirmed;
+ state: SupportedStates;
goToWalletManualWithdraw: (currency: string) => Promise<void>;
}): VNode {
const { i18n } = useTranslationContext();
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.stories.tsx
b/packages/taler-wallet-webextension/src/cta/Refund.stories.tsx
deleted file mode 100644
index 28182c81..00000000
--- a/packages/taler-wallet-webextension/src/cta/Refund.stories.tsx
+++ /dev/null
@@ -1,105 +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 { Amounts } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils.js";
-import { View as TestedComponent } from "./Refund.js";
-
-export default {
- title: "cta/refund",
- component: TestedComponent,
- argTypes: {},
-};
-
-export const Complete = createExample(TestedComponent, {
- state: {
- status: "completed",
- amount: Amounts.parseOrThrow("USD:1"),
- granted: Amounts.parseOrThrow("USD:1"),
- hook: undefined,
- merchantName: "the merchant",
- products: undefined,
- },
-});
-
-export const InProgress = createExample(TestedComponent, {
- state: {
- status: "in-progress",
- hook: undefined,
- amount: Amounts.parseOrThrow("USD:1"),
- awaitingAmount: Amounts.parseOrThrow("USD:1"),
- granted: Amounts.parseOrThrow("USD:0"),
- merchantName: "the merchant",
- products: undefined,
- },
-});
-
-export const Ready = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- accept: {},
- ignore: {},
-
- amount: Amounts.parseOrThrow("USD:1"),
- awaitingAmount: Amounts.parseOrThrow("USD:1"),
- granted: Amounts.parseOrThrow("USD:0"),
- merchantName: "the merchant",
- products: [],
- orderId: "abcdef",
- },
-});
-
-import beer from "../../static-dev/beer.png";
-
-export const WithAProductList = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- accept: {},
- ignore: {},
- amount: Amounts.parseOrThrow("USD:1"),
- awaitingAmount: Amounts.parseOrThrow("USD:1"),
- granted: Amounts.parseOrThrow("USD:0"),
- merchantName: "the merchant",
- products: [
- {
- description: "beer",
- image: beer,
- quantity: 2,
- },
- {
- description: "t-shirt",
- price: "EUR:1",
- quantity: 5,
- },
- ],
- orderId: "abcdef",
- },
-});
-
-export const Ignored = createExample(TestedComponent, {
- state: {
- status: "ignored",
- hook: undefined,
- merchantName: "the merchant",
- },
-});
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.tsx
b/packages/taler-wallet-webextension/src/cta/Refund.tsx
deleted file mode 100644
index 04873b1c..00000000
--- a/packages/taler-wallet-webextension/src/cta/Refund.tsx
+++ /dev/null
@@ -1,364 +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/>
- */
-
-/**
- * Page that shows refund status for purchases.
- *
- * @author sebasjm
- */
-
-import {
- AmountJson,
- Amounts,
- NotificationType,
- Product,
-} from "@gnu-taler/taler-util";
-import { h, VNode } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import { Amount } from "../components/Amount.js";
-import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
-import { LogoHeader } from "../components/LogoHeader.js";
-import { Part } from "../components/Part.js";
-import {
- ButtonSuccess,
- SubTitle,
- WalletAction,
-} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
-import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { Button } from "../mui/Button.js";
-import { ButtonHandler } from "../mui/handlers.js";
-import * as wxApi from "../wxApi.js";
-import { ProductList } from "./Pay.js";
-
-interface Props {
- talerRefundUri?: string;
-}
-export interface ViewProps {
- state: State;
-}
-export function View({ state }: ViewProps): VNode {
- const { i18n } = useTranslationContext();
- if (state.status === "loading") {
- if (!state.hook) {
- return <Loading />;
- }
- return (
- <LoadingError
- title={<i18n.Translate>Could not load refund status</i18n.Translate>}
- error={state.hook}
- />
- );
- }
-
- if (state.status === "ignored") {
- return (
- <WalletAction>
- <LogoHeader />
-
- <SubTitle>
- <i18n.Translate>Digital cash refund</i18n.Translate>
- </SubTitle>
- <section>
- <p>
- <i18n.Translate>You've ignored the tip.</i18n.Translate>
- </p>
- </section>
- </WalletAction>
- );
- }
-
- if (state.status === "in-progress") {
- return (
- <WalletAction>
- <LogoHeader />
-
- <SubTitle>
- <i18n.Translate>Digital cash refund</i18n.Translate>
- </SubTitle>
- <section>
- <p>
- <i18n.Translate>The refund is in progress.</i18n.Translate>
- </p>
- </section>
- <section>
- <Part
- big
- title={<i18n.Translate>Total to refund</i18n.Translate>}
- text={<Amount value={state.awaitingAmount} />}
- kind="negative"
- />
- <Part
- big
- title={<i18n.Translate>Refunded</i18n.Translate>}
- text={<Amount value={state.amount} />}
- kind="negative"
- />
- </section>
- {state.products && state.products.length ? (
- <section>
- <ProductList products={state.products} />
- </section>
- ) : undefined}
- {/* <section>
- <ProgressBar value={state.progress} />
- </section> */}
- </WalletAction>
- );
- }
-
- if (state.status === "completed") {
- return (
- <WalletAction>
- <LogoHeader />
-
- <SubTitle>
- <i18n.Translate>Digital cash refund</i18n.Translate>
- </SubTitle>
- <section>
- <p>
- <i18n.Translate>this refund is already accepted.</i18n.Translate>
- </p>
- </section>
- <section>
- <Part
- big
- title={<i18n.Translate>Total to refunded</i18n.Translate>}
- text={<Amount value={state.granted} />}
- kind="negative"
- />
- </section>
- </WalletAction>
- );
- }
-
- return (
- <WalletAction>
- <LogoHeader />
-
- <SubTitle>
- <i18n.Translate>Digital cash refund</i18n.Translate>
- </SubTitle>
- <section>
- <p>
- <i18n.Translate>
- The merchant "<b>{state.merchantName}</b>" is offering
you
- a refund.
- </i18n.Translate>
- </p>
- </section>
- <section>
- <Part
- big
- title={<i18n.Translate>Order amount</i18n.Translate>}
- text={<Amount value={state.amount} />}
- kind="neutral"
- />
- {Amounts.isNonZero(state.granted) && (
- <Part
- big
- title={<i18n.Translate>Already refunded</i18n.Translate>}
- text={<Amount value={state.granted} />}
- kind="neutral"
- />
- )}
- <Part
- big
- title={<i18n.Translate>Refund offered</i18n.Translate>}
- text={<Amount value={state.awaitingAmount} />}
- kind="positive"
- />
- </section>
- {state.products && state.products.length ? (
- <section>
- <ProductList products={state.products} />
- </section>
- ) : undefined}
- <section>
- <Button variant="contained" onClick={state.accept.onClick}>
- <i18n.Translate>Confirm refund</i18n.Translate>
- </Button>
- </section>
- </WalletAction>
- );
-}
-
-type State = Loading | Ready | Ignored | InProgress | Completed;
-
-interface Loading {
- status: "loading";
- hook: HookError | undefined;
-}
-interface Ready {
- status: "ready";
- hook: undefined;
- merchantName: string;
- products: Product[] | undefined;
- amount: AmountJson;
- awaitingAmount: AmountJson;
- granted: AmountJson;
- accept: ButtonHandler;
- ignore: ButtonHandler;
- orderId: string;
-}
-interface Ignored {
- status: "ignored";
- hook: undefined;
- merchantName: string;
-}
-interface InProgress {
- status: "in-progress";
- hook: undefined;
- merchantName: string;
- products: Product[] | undefined;
- amount: AmountJson;
- awaitingAmount: AmountJson;
- granted: AmountJson;
-}
-interface Completed {
- status: "completed";
- hook: undefined;
- merchantName: string;
- products: Product[] | undefined;
- amount: AmountJson;
- granted: AmountJson;
-}
-
-export function useComponentState(
- talerRefundUri: string | undefined,
- api: typeof wxApi,
-): State {
- const [ignored, setIgnored] = useState(false);
-
- const info = useAsyncAsHook(async () => {
- if (!talerRefundUri) throw Error("ERROR_NO-URI-FOR-REFUND");
- const refund = await api.prepareRefund({ talerRefundUri });
- return { refund, uri: talerRefundUri };
- });
-
- useEffect(() => {
- api.onUpdateNotification([NotificationType.RefreshMelted], () => {
- info?.retry();
- });
- });
-
- if (!info || info.hasError) {
- return {
- status: "loading",
- hook: info,
- };
- }
-
- const { refund, uri } = info.response;
-
- const doAccept = async (): Promise<void> => {
- await api.applyRefund(uri);
- info.retry();
- };
-
- const doIgnore = async (): Promise<void> => {
- setIgnored(true);
- };
-
- if (ignored) {
- return {
- status: "ignored",
- hook: undefined,
- merchantName: info.response.refund.info.merchant.name,
- };
- }
-
- const awaitingAmount = Amounts.parseOrThrow(refund.awaiting);
-
- if (Amounts.isZero(awaitingAmount)) {
- return {
- status: "completed",
- hook: undefined,
- amount: Amounts.parseOrThrow(info.response.refund.effectivePaid),
- granted: Amounts.parseOrThrow(info.response.refund.granted),
- merchantName: info.response.refund.info.merchant.name,
- products: info.response.refund.info.products,
- };
- }
-
- if (refund.pending) {
- return {
- status: "in-progress",
- hook: undefined,
- awaitingAmount,
- amount: Amounts.parseOrThrow(info.response.refund.effectivePaid),
- granted: Amounts.parseOrThrow(info.response.refund.granted),
-
- merchantName: info.response.refund.info.merchant.name,
- products: info.response.refund.info.products,
- };
- }
-
- return {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow(info.response.refund.effectivePaid),
- granted: Amounts.parseOrThrow(info.response.refund.granted),
- awaitingAmount,
- merchantName: info.response.refund.info.merchant.name,
- products: info.response.refund.info.products,
- orderId: info.response.refund.info.orderId,
- accept: {
- onClick: doAccept,
- },
- ignore: {
- onClick: doIgnore,
- },
- };
-}
-
-export function RefundPage({ talerRefundUri }: Props): VNode {
- const { i18n } = useTranslationContext();
-
- const state = useComponentState(talerRefundUri, wxApi);
-
- if (!talerRefundUri) {
- return (
- <span>
- <i18n.Translate>missing taler refund uri</i18n.Translate>
- </span>
- );
- }
-
- return <View state={state} />;
-}
-
-function ProgressBar({ value }: { value: number }): VNode {
- return (
- <div
- style={{
- width: 400,
- height: 20,
- backgroundColor: "white",
- border: "solid black 1px",
- }}
- >
- <div
- style={{
- width: `${value * 100}%`,
- height: "100%",
- backgroundColor: "lightgreen",
- }}
- ></div>
- </div>
- );
-}
diff --git a/packages/taler-wallet-webextension/src/cta/Refund/index.ts
b/packages/taler-wallet-webextension/src/cta/Refund/index.ts
new file mode 100644
index 00000000..b122559a
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Refund/index.ts
@@ -0,0 +1,94 @@
+/*
+ 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, Product } from "@gnu-taler/taler-util";
+import { Loading } from "../../components/Loading.js";
+import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { ButtonHandler } from "../../mui/handlers.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import * as wxApi from "../../wxApi.js";
+import { useComponentState } from "./state.js";
+import { CompletedView, IgnoredView, InProgressView, LoadingUriView, ReadyView
} from "./views.js";
+
+
+
+export interface Props {
+ talerRefundUri?: string;
+}
+
+export type State =
+ | State.Loading
+ | State.LoadingUriError
+ | State.Ready
+ | State.Ignored
+ | State.InProgress
+ | State.Completed;
+
+export namespace State {
+
+ export interface Loading {
+ status: "loading";
+ error: undefined;
+ }
+
+ export interface LoadingUriError {
+ status: "loading-uri";
+ error: HookError;
+ }
+
+ interface BaseInfo {
+ merchantName: string;
+ products: Product[] | undefined;
+ amount: AmountJson;
+ awaitingAmount: AmountJson;
+ granted: AmountJson;
+ }
+
+ export interface Ready extends BaseInfo {
+ status: "ready";
+ error: undefined;
+
+ accept: ButtonHandler;
+ ignore: ButtonHandler;
+ orderId: string;
+ }
+
+ export interface Ignored extends BaseInfo {
+ status: "ignored";
+ error: undefined;
+ }
+ export interface InProgress extends BaseInfo {
+ status: "in-progress";
+ error: undefined;
+
+ }
+ export interface Completed extends BaseInfo {
+ status: "completed";
+ error: undefined;
+ }
+
+}
+
+const viewMapping: StateViewMap<State> = {
+ loading: Loading,
+ "loading-uri": LoadingUriView,
+ "in-progress": InProgressView,
+ completed: CompletedView,
+ ignored: IgnoredView,
+ ready: ReadyView,
+};
+
+export const RefundPage = compose("Refund", (p: Props) => useComponentState(p,
wxApi), viewMapping)
diff --git a/packages/taler-wallet-webextension/src/cta/Refund/state.ts
b/packages/taler-wallet-webextension/src/cta/Refund/state.ts
new file mode 100644
index 00000000..f8ce71a1
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Refund/state.ts
@@ -0,0 +1,104 @@
+/*
+ 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 { Amounts, NotificationType } from "@gnu-taler/taler-util";
+import { useEffect, useState } from "preact/hooks";
+import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
+import * as wxApi from "../../wxApi.js";
+import { Props, State } from "./index.js";
+
+export function useComponentState(
+ { talerRefundUri }: Props,
+ api: typeof wxApi,
+): State {
+ const [ignored, setIgnored] = useState(false);
+
+ const info = useAsyncAsHook(async () => {
+ if (!talerRefundUri) throw Error("ERROR_NO-URI-FOR-REFUND");
+ const refund = await api.prepareRefund({ talerRefundUri });
+ return { refund, uri: talerRefundUri };
+ });
+
+ useEffect(() => {
+ api.onUpdateNotification([NotificationType.RefreshMelted], () => {
+ info?.retry();
+ });
+ });
+
+ if (!info) {
+ return { status: "loading", error: undefined }
+ }
+ if (info.hasError) {
+ return {
+ status: "loading-uri",
+ error: info,
+ };
+ }
+
+ const { refund, uri } = info.response;
+
+ const doAccept = async (): Promise<void> => {
+ await api.applyRefund(uri);
+ info.retry();
+ };
+
+ const doIgnore = async (): Promise<void> => {
+ setIgnored(true);
+ };
+
+ const baseInfo = {
+ amount: Amounts.parseOrThrow(info.response.refund.effectivePaid),
+ granted: Amounts.parseOrThrow(info.response.refund.granted),
+ merchantName: info.response.refund.info.merchant.name,
+ products: info.response.refund.info.products,
+ awaitingAmount: Amounts.parseOrThrow(refund.awaiting),
+ error: undefined,
+ }
+
+ if (ignored) {
+ return {
+ status: "ignored",
+ ...baseInfo,
+ };
+ }
+
+ if (Amounts.isZero(baseInfo.awaitingAmount)) {
+ return {
+ status: "completed",
+ ...baseInfo,
+ };
+ }
+
+ if (refund.pending) {
+ return {
+ status: "in-progress",
+ ...baseInfo,
+ };
+ }
+
+ return {
+ status: "ready",
+ ...baseInfo,
+ orderId: info.response.refund.info.orderId,
+ accept: {
+ onClick: doAccept,
+ },
+ ignore: {
+ onClick: doIgnore,
+ },
+ };
+}
diff --git a/packages/taler-wallet-webextension/src/cta/Refund/stories.tsx
b/packages/taler-wallet-webextension/src/cta/Refund/stories.tsx
new file mode 100644
index 00000000..d3a2302d
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Refund/stories.tsx
@@ -0,0 +1,96 @@
+/*
+ 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 { Amounts } from "@gnu-taler/taler-util";
+import beer from "../../../static-dev/beer.png";
+import { createExample } from "../../test-utils.js";
+import {
+ CompletedView,
+ IgnoredView,
+ InProgressView,
+ ReadyView,
+} from "./views.js";
+export default {
+ title: "cta/refund",
+};
+
+export const Complete = createExample(CompletedView, {
+ status: "completed",
+ amount: Amounts.parseOrThrow("USD:1"),
+ granted: Amounts.parseOrThrow("USD:1"),
+ error: undefined,
+ merchantName: "the merchant",
+ products: undefined,
+});
+
+export const InProgress = createExample(InProgressView, {
+ status: "in-progress",
+ error: undefined,
+ amount: Amounts.parseOrThrow("USD:1"),
+ awaitingAmount: Amounts.parseOrThrow("USD:1"),
+ granted: Amounts.parseOrThrow("USD:0"),
+ merchantName: "the merchant",
+ products: undefined,
+});
+
+export const Ready = createExample(ReadyView, {
+ status: "ready",
+ error: undefined,
+ accept: {},
+ ignore: {},
+
+ amount: Amounts.parseOrThrow("USD:1"),
+ awaitingAmount: Amounts.parseOrThrow("USD:1"),
+ granted: Amounts.parseOrThrow("USD:0"),
+ merchantName: "the merchant",
+ products: [],
+ orderId: "abcdef",
+});
+
+export const WithAProductList = createExample(ReadyView, {
+ status: "ready",
+ error: undefined,
+ accept: {},
+ ignore: {},
+ amount: Amounts.parseOrThrow("USD:1"),
+ awaitingAmount: Amounts.parseOrThrow("USD:1"),
+ granted: Amounts.parseOrThrow("USD:0"),
+ merchantName: "the merchant",
+ products: [
+ {
+ description: "beer",
+ image: beer,
+ quantity: 2,
+ },
+ {
+ description: "t-shirt",
+ price: "EUR:1",
+ quantity: 5,
+ },
+ ],
+ orderId: "abcdef",
+});
+
+export const Ignored = createExample(IgnoredView, {
+ status: "ignored",
+ error: undefined,
+ merchantName: "the merchant",
+});
diff --git a/packages/taler-wallet-webextension/src/cta/Refund.test.ts
b/packages/taler-wallet-webextension/src/cta/Refund/test.ts
similarity index 83%
rename from packages/taler-wallet-webextension/src/cta/Refund.test.ts
rename to packages/taler-wallet-webextension/src/cta/Refund/test.ts
index 3eff42e9..04c83b8f 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund.test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Refund/test.ts
@@ -21,22 +21,19 @@
import {
AmountJson,
- Amounts,
- NotificationType,
- PrepareRefundResult,
+ Amounts, NotificationType,
+ PrepareRefundResult
} from "@gnu-taler/taler-util";
import { expect } from "chai";
-import { mountHook } from "../test-utils.js";
-import { SubsHandler } from "./Pay.test.js";
-import { useComponentState } from "./Refund.jsx";
-
-// onUpdateNotification: subscriptions.saveSubscription,
+import { mountHook } from "../../test-utils.js";
+import { SubsHandler } from "../Payment/test.js";
+import { useComponentState } from "./state.js";
describe("Refund CTA states", () => {
it("should tell the user that the URI is missing", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState(undefined, {
+ useComponentState({ talerRefundUri: undefined }, {
prepareRefund: async () => ({}),
applyRefund: async () => ({}),
onUpdateNotification: async () => ({}),
@@ -44,21 +41,21 @@ describe("Refund CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
- expect(status).equals("loading");
- if (!hook) expect.fail();
- if (!hook.hasError) expect.fail();
- if (hook.operational) expect.fail();
- expect(hook.message).eq("ERROR_NO-URI-FOR-REFUND");
+ expect(status).equals("loading-uri");
+ if (!error) expect.fail();
+ if (!error.hasError) expect.fail();
+ if (error.operational) expect.fail();
+ expect(error.message).eq("ERROR_NO-URI-FOR-REFUND");
}
await assertNoPendingUpdate();
@@ -67,7 +64,7 @@ describe("Refund CTA states", () => {
it("should be ready after loading", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taler://refund/asdasdas", {
+ useComponentState({ talerRefundUri: "taler://refund/asdasdas" }, {
prepareRefund: async () =>
({
effectivePaid: "EUR:2",
@@ -91,9 +88,9 @@ describe("Refund CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -102,7 +99,7 @@ describe("Refund CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "ready") expect.fail();
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.accept.onClick).not.undefined;
expect(state.ignore.onClick).not.undefined;
expect(state.merchantName).eq("the merchant name");
@@ -116,7 +113,7 @@ describe("Refund CTA states", () => {
it("should be ignored after clicking the ignore button", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taler://refund/asdasdas", {
+ useComponentState({ talerRefundUri: "taler://refund/asdasdas" }, {
prepareRefund: async () =>
({
effectivePaid: "EUR:2",
@@ -140,9 +137,9 @@ describe("Refund CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -151,7 +148,7 @@ describe("Refund CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "ready") expect.fail();
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.accept.onClick).not.undefined;
expect(state.merchantName).eq("the merchant name");
expect(state.orderId).eq("orderId1");
@@ -167,7 +164,7 @@ describe("Refund CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "ignored") expect.fail();
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.merchantName).eq("the merchant name");
}
@@ -192,7 +189,7 @@ describe("Refund CTA states", () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taler://refund/asdasdas", {
+ useComponentState({ talerRefundUri: "taler://refund/asdasdas" }, {
prepareRefund: async () =>
({
awaiting: Amounts.stringify(awaiting),
@@ -216,9 +213,9 @@ describe("Refund CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -227,7 +224,7 @@ describe("Refund CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "in-progress") expect.fail("1");
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.merchantName).eq("the merchant name");
expect(state.products).undefined;
expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:2"));
@@ -242,7 +239,7 @@ describe("Refund CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "in-progress") expect.fail("2");
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.merchantName).eq("the merchant name");
expect(state.products).undefined;
expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:2"));
@@ -257,7 +254,7 @@ describe("Refund CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "completed") expect.fail("3");
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.merchantName).eq("the merchant name");
expect(state.products).undefined;
expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:2"));
diff --git a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
new file mode 100644
index 00000000..e0c7bb55
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
@@ -0,0 +1,172 @@
+/*
+ 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 { Amounts } from "@gnu-taler/taler-util";
+import { Fragment, h, VNode } from "preact";
+import { Amount } from "../../components/Amount.js";
+import { LoadingError } from "../../components/LoadingError.js";
+import { LogoHeader } from "../../components/LogoHeader.js";
+import { Part } from "../../components/Part.js";
+import { SubTitle, WalletAction } from "../../components/styled/index.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { Button } from "../../mui/Button.js";
+import { ProductList } from "../Payment/views.js";
+import { State } from "./index.js";
+
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
+ const { i18n } = useTranslationContext();
+
+ return (
+ <LoadingError
+ title={<i18n.Translate>Could not load refund status</i18n.Translate>}
+ error={error}
+ />
+ );
+}
+
+export function IgnoredView(state: State.Ignored): VNode {
+ const { i18n } = useTranslationContext();
+
+ return (
+ <WalletAction>
+ <LogoHeader />
+
+ <SubTitle>
+ <i18n.Translate>Digital cash refund</i18n.Translate>
+ </SubTitle>
+ <section>
+ <p>
+ <i18n.Translate>You've ignored the tip.</i18n.Translate>
+ </p>
+ </section>
+ </WalletAction>
+ );
+}
+export function InProgressView(state: State.InProgress): VNode {
+ const { i18n } = useTranslationContext();
+
+ return (
+ <WalletAction>
+ <LogoHeader />
+
+ <SubTitle>
+ <i18n.Translate>Digital cash refund</i18n.Translate>
+ </SubTitle>
+ <section>
+ <p>
+ <i18n.Translate>The refund is in progress.</i18n.Translate>
+ </p>
+ </section>
+ <section>
+ <Part
+ big
+ title={<i18n.Translate>Total to refund</i18n.Translate>}
+ text={<Amount value={state.awaitingAmount} />}
+ kind="negative"
+ />
+ <Part
+ big
+ title={<i18n.Translate>Refunded</i18n.Translate>}
+ text={<Amount value={state.amount} />}
+ kind="negative"
+ />
+ </section>
+ {state.products && state.products.length ? (
+ <section>
+ <ProductList products={state.products} />
+ </section>
+ ) : undefined}
+ </WalletAction>
+ );
+}
+export function CompletedView(state: State.Completed): VNode {
+ const { i18n } = useTranslationContext();
+
+ return (
+ <WalletAction>
+ <LogoHeader />
+
+ <SubTitle>
+ <i18n.Translate>Digital cash refund</i18n.Translate>
+ </SubTitle>
+ <section>
+ <p>
+ <i18n.Translate>this refund is already accepted.</i18n.Translate>
+ </p>
+ </section>
+ <section>
+ <Part
+ big
+ title={<i18n.Translate>Total to refunded</i18n.Translate>}
+ text={<Amount value={state.granted} />}
+ kind="negative"
+ />
+ </section>
+ </WalletAction>
+ );
+}
+export function ReadyView(state: State.Ready): VNode {
+ const { i18n } = useTranslationContext();
+ return (
+ <WalletAction>
+ <LogoHeader />
+
+ <SubTitle>
+ <i18n.Translate>Digital cash refund</i18n.Translate>
+ </SubTitle>
+ <section>
+ <p>
+ <i18n.Translate>
+ The merchant "<b>{state.merchantName}</b>" is offering
you
+ a refund.
+ </i18n.Translate>
+ </p>
+ </section>
+ <section>
+ <Part
+ big
+ title={<i18n.Translate>Order amount</i18n.Translate>}
+ text={<Amount value={state.amount} />}
+ kind="neutral"
+ />
+ {Amounts.isNonZero(state.granted) && (
+ <Part
+ big
+ title={<i18n.Translate>Already refunded</i18n.Translate>}
+ text={<Amount value={state.granted} />}
+ kind="neutral"
+ />
+ )}
+ <Part
+ big
+ title={<i18n.Translate>Refund offered</i18n.Translate>}
+ text={<Amount value={state.awaitingAmount} />}
+ kind="positive"
+ />
+ </section>
+ {state.products && state.products.length ? (
+ <section>
+ <ProductList products={state.products} />
+ </section>
+ ) : undefined}
+ <section>
+ <Button variant="contained" onClick={state.accept.onClick}>
+ <i18n.Translate>Confirm refund</i18n.Translate>
+ </Button>
+ </section>
+ </WalletAction>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.tsx
b/packages/taler-wallet-webextension/src/cta/Tip.tsx
deleted file mode 100644
index 2feffcda..00000000
--- a/packages/taler-wallet-webextension/src/cta/Tip.tsx
+++ /dev/null
@@ -1,241 +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/>
- */
-
-/**
- * Page shown to the user to accept or ignore a tip from a merchant.
- *
- * @author sebasjm
- */
-
-import { AmountJson, Amounts, PrepareTipResult } from "@gnu-taler/taler-util";
-import { h, VNode } from "preact";
-import { useEffect, useState } from "preact/hooks";
-import { Amount } from "../components/Amount.js";
-import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError.js";
-import { LogoHeader } from "../components/LogoHeader.js";
-import { Part } from "../components/Part.js";
-import {
- Button,
- ButtonSuccess,
- SubTitle,
- WalletAction,
-} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
-import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { ButtonHandler } from "../mui/handlers.js";
-import * as wxApi from "../wxApi.js";
-
-interface Props {
- talerTipUri?: string;
-}
-
-type State = Loading | Ready | Accepted | Ignored;
-
-interface Loading {
- status: "loading";
- hook: HookError | undefined;
-}
-
-interface Ignored {
- status: "ignored";
- hook: undefined;
-}
-interface Accepted {
- status: "accepted";
- hook: undefined;
- merchantBaseUrl: string;
- amount: AmountJson;
- exchangeBaseUrl: string;
-}
-interface Ready {
- status: "ready";
- hook: undefined;
- merchantBaseUrl: string;
- amount: AmountJson;
- exchangeBaseUrl: string;
- accept: ButtonHandler;
- ignore: ButtonHandler;
-}
-
-export function useComponentState(
- talerTipUri: string | undefined,
- api: typeof wxApi,
-): State {
- const [tipIgnored, setTipIgnored] = useState(false);
-
- const tipInfo = useAsyncAsHook(async () => {
- if (!talerTipUri) throw Error("ERROR_NO-URI-FOR-TIP");
- const tip = await api.prepareTip({ talerTipUri });
- return { tip };
- });
-
- if (!tipInfo || tipInfo.hasError) {
- return {
- status: "loading",
- hook: tipInfo,
- };
- }
-
- const { tip } = tipInfo.response;
-
- const doAccept = async (): Promise<void> => {
- await api.acceptTip({ walletTipId: tip.walletTipId });
- tipInfo.retry();
- };
-
- const doIgnore = async (): Promise<void> => {
- setTipIgnored(true);
- };
-
- if (tipIgnored) {
- return {
- status: "ignored",
- hook: undefined,
- };
- }
-
- if (tip.accepted) {
- return {
- status: "accepted",
- hook: undefined,
- merchantBaseUrl: tip.merchantBaseUrl,
- exchangeBaseUrl: tip.exchangeBaseUrl,
- amount: Amounts.parseOrThrow(tip.tipAmountEffective),
- };
- }
-
- return {
- status: "ready",
- hook: undefined,
- merchantBaseUrl: tip.merchantBaseUrl,
- exchangeBaseUrl: tip.exchangeBaseUrl,
- accept: {
- onClick: doAccept,
- },
- ignore: {
- onClick: doIgnore,
- },
- amount: Amounts.parseOrThrow(tip.tipAmountEffective),
- };
-}
-
-export function View({ state }: { state: State }): VNode {
- const { i18n } = useTranslationContext();
- if (state.status === "loading") {
- if (!state.hook) {
- return <Loading />;
- }
- return (
- <LoadingError
- title={<i18n.Translate>Could not load tip status</i18n.Translate>}
- error={state.hook}
- />
- );
- }
-
- if (state.status === "ignored") {
- return (
- <WalletAction>
- <LogoHeader />
-
- <SubTitle>
- <i18n.Translate>Digital cash tip</i18n.Translate>
- </SubTitle>
- <span>
- <i18n.Translate>You've ignored the tip.</i18n.Translate>
- </span>
- </WalletAction>
- );
- }
-
- if (state.status === "accepted") {
- return (
- <WalletAction>
- <LogoHeader />
-
- <SubTitle>
- <i18n.Translate>Digital cash tip</i18n.Translate>
- </SubTitle>
- <section>
- <i18n.Translate>
- Tip from <code>{state.merchantBaseUrl}</code> accepted. Check your
- transactions list for more details.
- </i18n.Translate>
- </section>
- </WalletAction>
- );
- }
-
- return (
- <WalletAction>
- <LogoHeader />
-
- <SubTitle>
- <i18n.Translate>Digital cash tip</i18n.Translate>
- </SubTitle>
-
- <section>
- <p>
- <i18n.Translate>The merchant is offering you a tip</i18n.Translate>
- </p>
- <Part
- title={<i18n.Translate>Amount</i18n.Translate>}
- text={<Amount value={state.amount} />}
- kind="positive"
- big
- />
- <Part
- title={<i18n.Translate>Merchant URL</i18n.Translate>}
- text={state.merchantBaseUrl}
- kind="neutral"
- />
- <Part
- title={<i18n.Translate>Exchange</i18n.Translate>}
- text={state.exchangeBaseUrl}
- kind="neutral"
- />
- </section>
- <section>
- <Button
- variant="contained"
- color="success"
- onClick={state.accept.onClick}
- >
- <i18n.Translate>Accept tip</i18n.Translate>
- </Button>
- <Button onClick={state.ignore.onClick}>
- <i18n.Translate>Ignore</i18n.Translate>
- </Button>
- </section>
- </WalletAction>
- );
-}
-
-export function TipPage({ talerTipUri }: Props): VNode {
- const { i18n } = useTranslationContext();
- const state = useComponentState(talerTipUri, wxApi);
-
- if (!talerTipUri) {
- return (
- <span>
- <i18n.Translate>missing tip uri</i18n.Translate>
- </span>
- );
- }
-
- return <View state={state} />;
-}
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/index.ts
b/packages/taler-wallet-webextension/src/cta/Tip/index.ts
new file mode 100644
index 00000000..24a7b1cf
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Tip/index.ts
@@ -0,0 +1,84 @@
+/*
+ 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 } from "@gnu-taler/taler-util";
+import { Loading } from "../../components/Loading.js";
+import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import * as wxApi from "../../wxApi.js";
+import {
+ Props as TermsOfServiceSectionProps
+} from "../TermsOfServiceSection.js";
+import { useComponentState } from "./state.js";
+import { AcceptedView, IgnoredView, LoadingUriView, ReadyView } from
"./views.js";
+
+
+
+export interface Props {
+ talerTipUri?: string;
+}
+
+export type State =
+ | State.Loading
+ | State.LoadingUriError
+ | State.Ignored
+ | State.Accepted
+ | State.Ready
+ | State.Ignored;
+
+export namespace State {
+
+ export interface Loading {
+ status: "loading";
+ error: undefined;
+ }
+
+ export interface LoadingUriError {
+ status: "loading-uri";
+ error: HookError;
+ }
+
+ export interface BaseInfo {
+ merchantBaseUrl: string;
+ amount: AmountJson;
+ exchangeBaseUrl: string;
+ error: undefined;
+ }
+
+ export interface Ignored extends BaseInfo {
+ status: "ignored";
+ }
+
+ export interface Accepted extends BaseInfo {
+ status: "accepted";
+ }
+ export interface Ready extends BaseInfo {
+ status: "ready";
+ accept: ButtonHandler;
+ ignore: ButtonHandler;
+ }
+}
+
+const viewMapping: StateViewMap<State> = {
+ loading: Loading,
+ "loading-uri": LoadingUriView,
+ "accepted": AcceptedView,
+ "ignored": IgnoredView,
+ "ready": ReadyView,
+};
+
+export const TipPage = compose("Tip", (p: Props) => useComponentState(p,
wxApi), viewMapping)
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/state.ts
b/packages/taler-wallet-webextension/src/cta/Tip/state.ts
new file mode 100644
index 00000000..e5511074
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Tip/state.ts
@@ -0,0 +1,92 @@
+/*
+ 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 { Amounts } from "@gnu-taler/taler-util";
+import { useState } from "preact/hooks";
+import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
+import * as wxApi from "../../wxApi.js";
+import { Props, State } from "./index.js";
+
+export function useComponentState(
+ { talerTipUri }: Props,
+ api: typeof wxApi,
+): State {
+ const [tipIgnored, setTipIgnored] = useState(false);
+
+ const tipInfo = useAsyncAsHook(async () => {
+ if (!talerTipUri) throw Error("ERROR_NO-URI-FOR-TIP");
+ const tip = await api.prepareTip({ talerTipUri });
+ return { tip };
+ });
+
+ if (!tipInfo) {
+ return {
+ status: "loading",
+ error: undefined,
+ }
+ }
+ if (tipInfo.hasError) {
+ return {
+ status: "loading-uri",
+ error: tipInfo,
+ };
+ }
+
+ const { tip } = tipInfo.response;
+
+ const doAccept = async (): Promise<void> => {
+ await api.acceptTip({ walletTipId: tip.walletTipId });
+ tipInfo.retry();
+ };
+
+ const doIgnore = async (): Promise<void> => {
+ setTipIgnored(true);
+ };
+
+ const baseInfo = {
+ merchantBaseUrl: tip.merchantBaseUrl,
+ exchangeBaseUrl: tip.exchangeBaseUrl,
+ amount: Amounts.parseOrThrow(tip.tipAmountEffective),
+ error: undefined,
+ }
+
+ if (tipIgnored) {
+ return {
+ status: "ignored",
+ ...baseInfo,
+ };
+ }
+
+ if (tip.accepted) {
+ return {
+ status: "accepted",
+ ...baseInfo,
+ };
+ }
+
+ return {
+ status: "ready",
+ ...baseInfo,
+ accept: {
+ onClick: doAccept,
+ },
+ ignore: {
+ onClick: doIgnore,
+ },
+ };
+}
+
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.stories.tsx
b/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
similarity index 57%
rename from packages/taler-wallet-webextension/src/cta/Tip.stories.tsx
rename to packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
index 40a89d1b..8c72a881 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
@@ -20,33 +20,27 @@
*/
import { Amounts } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils.js";
-import { View as TestedComponent } from "./Tip.js";
+import { createExample } from "../../test-utils.js";
+import { AcceptedView, ReadyView } from "./views.js";
export default {
title: "cta/tip",
- component: TestedComponent,
- argTypes: {},
};
-export const Accepted = createExample(TestedComponent, {
- state: {
- status: "accepted",
- hook: undefined,
- amount: Amounts.parseOrThrow("EUR:1"),
- exchangeBaseUrl: "",
- merchantBaseUrl: "",
- },
+export const Accepted = createExample(AcceptedView, {
+ status: "accepted",
+ error: undefined,
+ amount: Amounts.parseOrThrow("EUR:1"),
+ exchangeBaseUrl: "",
+ merchantBaseUrl: "",
});
-export const Ready = createExample(TestedComponent, {
- state: {
- status: "ready",
- hook: undefined,
- amount: Amounts.parseOrThrow("EUR:1"),
- merchantBaseUrl: "http://merchant.url/";,
- exchangeBaseUrl: "http://exchange.url/";,
- accept: {},
- ignore: {},
- },
+export const Ready = createExample(ReadyView, {
+ status: "ready",
+ error: undefined,
+ amount: Amounts.parseOrThrow("EUR:1"),
+ merchantBaseUrl: "http://merchant.url/";,
+ exchangeBaseUrl: "http://exchange.url/";,
+ accept: {},
+ ignore: {},
});
diff --git a/packages/taler-wallet-webextension/src/cta/Tip.test.ts
b/packages/taler-wallet-webextension/src/cta/Tip/test.ts
similarity index 79%
rename from packages/taler-wallet-webextension/src/cta/Tip.test.ts
rename to packages/taler-wallet-webextension/src/cta/Tip/test.ts
index a77b5916..1c7d363f 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip.test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Tip/test.ts
@@ -19,37 +19,39 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import { Amounts, PrepareTipResult } from "@gnu-taler/taler-util";
+import {
+ Amounts, PrepareTipResult
+} from "@gnu-taler/taler-util";
import { expect } from "chai";
-import { mountHook } from "../test-utils.js";
-import { useComponentState } from "./Tip.jsx";
+import { mountHook } from "../../test-utils.js";
+import { useComponentState } from "./state.js";
describe("Tip CTA states", () => {
it("should tell the user that the URI is missing", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState(undefined, {
+ useComponentState({ talerTipUri: undefined }, {
prepareTip: async () => ({}),
acceptTip: async () => ({}),
} as any),
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
- expect(status).equals("loading");
- if (!hook) expect.fail();
- if (!hook.hasError) expect.fail();
- if (hook.operational) expect.fail();
- expect(hook.message).eq("ERROR_NO-URI-FOR-TIP");
+ expect(status).equals("loading-uri");
+ if (!error) expect.fail();
+ if (!error.hasError) expect.fail();
+ if (error.operational) expect.fail();
+ expect(error.message).eq("ERROR_NO-URI-FOR-TIP");
}
await assertNoPendingUpdate();
@@ -60,7 +62,7 @@ describe("Tip CTA states", () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taler://tip/asd", {
+ useComponentState({ talerTipUri: "taler://tip/asd" }, {
prepareTip: async () =>
({
accepted: tipAccepted,
@@ -76,9 +78,9 @@ describe("Tip CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -87,7 +89,7 @@ describe("Tip CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "ready") expect.fail();
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:1"));
expect(state.merchantBaseUrl).eq("merchant url");
expect(state.exchangeBaseUrl).eq("exchange url");
@@ -101,7 +103,7 @@ describe("Tip CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "accepted") expect.fail();
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:1"));
expect(state.merchantBaseUrl).eq("merchant url");
expect(state.exchangeBaseUrl).eq("exchange url");
@@ -112,7 +114,7 @@ describe("Tip CTA states", () => {
it("should be ignored after clicking the ignore button", async () => {
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taler://tip/asd", {
+ useComponentState({ talerTipUri: "taler://tip/asd" }, {
prepareTip: async () =>
({
exchangeBaseUrl: "exchange url",
@@ -125,9 +127,9 @@ describe("Tip CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -136,7 +138,7 @@ describe("Tip CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "ready") expect.fail();
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:1"));
expect(state.merchantBaseUrl).eq("merchant url");
expect(state.exchangeBaseUrl).eq("exchange url");
@@ -150,7 +152,7 @@ describe("Tip CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "ignored") expect.fail();
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
}
await assertNoPendingUpdate();
});
@@ -158,7 +160,7 @@ describe("Tip CTA states", () => {
it("should render accepted if the tip has been used previously", async () =>
{
const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
mountHook(() =>
- useComponentState("taler://tip/asd", {
+ useComponentState({ talerTipUri: "taler://tip/asd" }, {
prepareTip: async () =>
({
accepted: true,
@@ -172,9 +174,9 @@ describe("Tip CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -183,7 +185,7 @@ describe("Tip CTA states", () => {
const state = getLastResultOrThrow();
if (state.status !== "accepted") expect.fail();
- if (state.hook) expect.fail();
+ if (state.error) expect.fail();
expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:1"));
expect(state.merchantBaseUrl).eq("merchant url");
expect(state.exchangeBaseUrl).eq("exchange url");
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/views.tsx
b/packages/taler-wallet-webextension/src/cta/Tip/views.tsx
new file mode 100644
index 00000000..442d41d2
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/Tip/views.tsx
@@ -0,0 +1,118 @@
+/*
+ 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 { Fragment, h, VNode } from "preact";
+import { Amount } from "../../components/Amount.js";
+import { LoadingError } from "../../components/LoadingError.js";
+import { LogoHeader } from "../../components/LogoHeader.js";
+import { Part } from "../../components/Part.js";
+import { SubTitle, WalletAction } from "../../components/styled/index.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { Button } from "../../mui/Button.js";
+import { State } from "./index.js";
+
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
+ const { i18n } = useTranslationContext();
+
+ return (
+ <LoadingError
+ title={<i18n.Translate>Could not load tip status</i18n.Translate>}
+ error={error}
+ />
+ );
+}
+
+export function IgnoredView(state: State.Ignored): VNode {
+ const { i18n } = useTranslationContext();
+ return (
+ <WalletAction>
+ <LogoHeader />
+
+ <SubTitle>
+ <i18n.Translate>Digital cash tip</i18n.Translate>
+ </SubTitle>
+ <span>
+ <i18n.Translate>You've ignored the tip.</i18n.Translate>
+ </span>
+ </WalletAction>
+ );
+}
+
+export function ReadyView(state: State.Ready): VNode {
+ const { i18n } = useTranslationContext();
+ return (
+ <WalletAction>
+ <LogoHeader />
+
+ <SubTitle>
+ <i18n.Translate>Digital cash tip</i18n.Translate>
+ </SubTitle>
+
+ <section>
+ <p>
+ <i18n.Translate>The merchant is offering you a tip</i18n.Translate>
+ </p>
+ <Part
+ title={<i18n.Translate>Amount</i18n.Translate>}
+ text={<Amount value={state.amount} />}
+ kind="positive"
+ big
+ />
+ <Part
+ title={<i18n.Translate>Merchant URL</i18n.Translate>}
+ text={state.merchantBaseUrl}
+ kind="neutral"
+ />
+ <Part
+ title={<i18n.Translate>Exchange</i18n.Translate>}
+ text={state.exchangeBaseUrl}
+ kind="neutral"
+ />
+ </section>
+ <section>
+ <Button
+ variant="contained"
+ color="success"
+ onClick={state.accept.onClick}
+ >
+ <i18n.Translate>Accept tip</i18n.Translate>
+ </Button>
+ <Button onClick={state.ignore.onClick}>
+ <i18n.Translate>Ignore</i18n.Translate>
+ </Button>
+ </section>
+ </WalletAction>
+ );
+}
+
+export function AcceptedView(state: State.Accepted): VNode {
+ const { i18n } = useTranslationContext();
+ return (
+ <WalletAction>
+ <LogoHeader />
+
+ <SubTitle>
+ <i18n.Translate>Digital cash tip</i18n.Translate>
+ </SubTitle>
+ <section>
+ <i18n.Translate>
+ Tip from <code>{state.merchantBaseUrl}</code> accepted. Check your
+ transactions list for more details.
+ </i18n.Translate>
+ </section>
+ </WalletAction>
+ );
+}
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
deleted file mode 100644
index a27a214b..00000000
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ /dev/null
@@ -1,570 +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/>
- */
-
-/**
- * Page shown to the user to confirm creation
- * of a reserve, usually requested by the bank.
- *
- * @author sebasjm
- */
-
-import { AmountJson, Amounts } from "@gnu-taler/taler-util";
-import { TalerError } from "@gnu-taler/taler-wallet-core";
-import { Fragment, h, VNode } from "preact";
-import { useMemo, 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 { LogoHeader } from "../components/LogoHeader.js";
-import { Part } from "../components/Part.js";
-import { SelectList } from "../components/SelectList.js";
-import {
- Input,
- LinkSuccess,
- SubTitle,
- SuccessBox,
- WalletAction,
-} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation.js";
-import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { Button } from "../mui/Button.js";
-import { ButtonHandler, SelectFieldHandler } from "../mui/handlers.js";
-import { buildTermsOfServiceState } from "../utils/index.js";
-import * as wxApi from "../wxApi.js";
-import {
- Props as TermsOfServiceSectionProps,
- TermsOfServiceSection,
-} from "./TermsOfServiceSection.js";
-
-interface Props {
- talerWithdrawUri?: string;
-}
-
-type State =
- | LoadingUri
- | LoadingExchange
- | LoadingInfoError
- | Success
- | Completed;
-
-interface LoadingUri {
- status: "loading-uri";
- hook: HookError | undefined;
-}
-interface LoadingExchange {
- status: "loading-exchange";
- hook: HookError | undefined;
-}
-interface LoadingInfoError {
- status: "loading-info";
- hook: HookError | undefined;
-}
-
-type Completed = {
- status: "completed";
- hook: undefined;
-};
-
-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;
-
- ageRestriction: SelectFieldHandler;
-};
-
-export function useComponentState(
- talerWithdrawUri: string | undefined,
- api: typeof wxApi,
-): State {
- const [customExchange, setCustomExchange] = useState<string | undefined>(
- undefined,
- );
- const [ageRestricted, setAgeRestricted] = useState(0);
-
- /**
- * Ask the wallet about the withdraw URI
- */
- 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 };
- });
-
- /**
- * Get the amount and select one exchange
- */
- const uriHookDep =
- !uriInfoHook || uriInfoHook.hasError || !uriInfoHook.response
- ? undefined
- : uriInfoHook.response;
-
- const { amount, thisExchange, thisCurrencyExchanges } = useMemo(() => {
- if (!uriHookDep)
- return {
- amount: undefined,
- thisExchange: undefined,
- thisCurrencyExchanges: [],
- };
-
- const { uriInfo, knownExchanges } = uriHookDep;
-
- const amount = uriInfo ? Amounts.parseOrThrow(uriInfo.amount) : undefined;
- const thisCurrencyExchanges =
- !amount || !knownExchanges
- ? []
- : knownExchanges.filter((ex) => ex.currency === amount.currency);
-
- const thisExchange: string | undefined =
- customExchange ??
- uriInfo?.defaultExchangeBaseUrl ??
- (thisCurrencyExchanges && thisCurrencyExchanges[0]
- ? thisCurrencyExchanges[0].exchangeBaseUrl
- : undefined);
-
- return { amount, thisExchange, thisCurrencyExchanges };
- }, [uriHookDep, customExchange]);
-
- /**
- * For the exchange selected, bring the status of the terms of service
- */
- const terms = useAsyncAsHook(async () => {
- if (!thisExchange) return false;
-
- const exchangeTos = await api.getExchangeTos(thisExchange, ["text/xml"]);
-
- const state = buildTermsOfServiceState(exchangeTos);
-
- return { state };
- }, [thisExchange]);
-
- /**
- * With the exchange and amount, ask the wallet the information
- * about the withdrawal
- */
- const info = useAsyncAsHook(async () => {
- if (!thisExchange || !amount) return false;
-
- 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 };
- }, [thisExchange, amount]);
-
- const [reviewing, setReviewing] = useState<boolean>(false);
- const [reviewed, setReviewed] = useState<boolean>(false);
-
- const [withdrawError, setWithdrawError] = useState<TalerError | undefined>(
- undefined,
- );
- const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false);
- const [withdrawCompleted, setWithdrawCompleted] = useState<boolean>(false);
-
- const [showExchangeSelection, setShowExchangeSelection] = useState(false);
- const [nextExchange, setNextExchange] = useState<string | undefined>();
-
- if (!uriInfoHook || uriInfoHook.hasError) {
- return {
- status: "loading-uri",
- hook: uriInfoHook,
- };
- }
-
- if (!thisExchange || !amount) {
- return {
- status: "loading-exchange",
- hook: {
- hasError: true,
- operational: false,
- message: "ERROR_NO-DEFAULT-EXCHANGE",
- },
- };
- }
-
- const selectedExchange = thisExchange;
-
- async function doWithdrawAndCheckError(): Promise<void> {
- try {
- setDoingWithdraw(true);
- if (!talerWithdrawUri) return;
- const res = await api.acceptWithdrawal(
- talerWithdrawUri,
- selectedExchange,
- !ageRestricted ? undefined : ageRestricted,
- );
- if (res.confirmTransferUrl) {
- document.location.href = res.confirmTransferUrl;
- }
- setWithdrawCompleted(true);
- } catch (e) {
- if (e instanceof TalerError) {
- setWithdrawError(e);
- }
- }
- setDoingWithdraw(false);
- }
-
- const exchanges = thisCurrencyExchanges.reduce(
- (prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }),
- {},
- );
-
- if (!info || info.hasError) {
- return {
- status: "loading-info",
- hook: info,
- };
- }
- if (!info.response) {
- return {
- status: "loading-info",
- hook: undefined,
- };
- }
- if (withdrawCompleted) {
- return {
- status: "completed",
- hook: undefined,
- };
- }
-
- const exchangeHandler: SelectFieldHandler = {
- onChange: async (e) => setNextExchange(e),
- value: nextExchange ?? thisExchange,
- list: exchanges,
- isDirty: nextExchange !== undefined,
- };
-
- const editExchange: ButtonHandler = {
- onClick: async () => {
- setShowExchangeSelection(true);
- },
- };
- const cancelEditExchange: ButtonHandler = {
- onClick: async () => {
- setShowExchangeSelection(false);
- },
- };
- const confirmEditExchange: ButtonHandler = {
- onClick: async () => {
- setCustomExchange(exchangeHandler.value);
- setShowExchangeSelection(false);
- setNextExchange(undefined);
- },
- };
-
- 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;
-
- try {
- await api.setExchangeTosAccepted(
- selectedExchange,
- accepted ? termsState.version : undefined,
- );
- setReviewed(accepted);
- } catch (e) {
- if (e instanceof Error) {
- //FIXME: uncomment this and display error
- // setErrorAccepting(e.message);
- }
- }
- }
-
- const mustAcceptFirst =
- termsState !== undefined &&
- (termsState.status === "changed" || termsState.status === "new");
-
- const ageRestrictionOptions: Record<string, string> | undefined = "6:12:18"
- .split(":")
- .reduce((p, c) => ({ ...p, [c]: `under ${c}` }), {});
-
- if (ageRestrictionOptions) {
- ageRestrictionOptions["0"] = "Not restricted";
- }
-
- return {
- status: "success",
- hook: undefined,
- exchange: exchangeHandler,
- editExchange,
- cancelEditExchange,
- confirmEditExchange,
- showExchangeSelection,
- toBeReceived,
- withdrawalFee,
- chosenAmount: amount,
- ageRestriction: {
- list: ageRestrictionOptions,
- value: String(ageRestricted),
- onChange: async (v) => setAgeRestricted(parseInt(v, 10)),
- },
- doWithdrawal: {
- onClick:
- doingWithdraw || (mustAcceptFirst && !reviewed)
- ? undefined
- : doWithdrawAndCheckError,
- error: withdrawError,
- },
- tosProps: !termsState
- ? undefined
- : {
- onAccept,
- onReview: setReviewing,
- reviewed: reviewed,
- reviewing: reviewing,
- terms: termsState,
- },
- mustAcceptFirst,
- };
-}
-
-export function View({ state }: { state: State }): VNode {
- const { i18n } = useTranslationContext();
- 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={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}
- />
- );
- }
-
- if (state.status === "completed") {
- return (
- <WalletAction>
- <LogoHeader />
- <SubTitle>
- <i18n.Translate>Digital cash withdrawal</i18n.Translate>
- </SubTitle>
- <SuccessBox>
- <h3>
- <i18n.Translate>Withdrawal in process...</i18n.Translate>
- </h3>
- <p>
- <i18n.Translate>
- You can close the page now. Check your bank if the transaction
- need a confirmation step to be completed
- </i18n.Translate>
- </p>
- </SuccessBox>
- </WalletAction>
- );
- }
-
- return (
- <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>
- <section>
- <Input>
- <SelectList
- label={<i18n.Translate>Age restriction</i18n.Translate>}
- list={state.ageRestriction.list}
- name="age"
- maxWidth
- value={state.ageRestriction.value}
- onChange={state.ageRestriction.onChange}
- />
- </Input>
- </section>
- {state.tosProps && <TermsOfServiceSection {...state.tosProps} />}
- {state.tosProps ? (
- <section>
- {(state.tosProps.terms.status === "accepted" ||
- (state.mustAcceptFirst && state.tosProps.reviewed)) && (
- <Button
- variant="contained"
- color="success"
- disabled={!state.doWithdrawal.onClick}
- onClick={state.doWithdrawal.onClick}
- >
- <i18n.Translate>Confirm withdrawal</i18n.Translate>
- </Button>
- )}
- {state.tosProps.terms.status === "notfound" && (
- <Button
- variant="contained"
- color="warning"
- disabled={!state.doWithdrawal.onClick}
- onClick={state.doWithdrawal.onClick}
- >
- <i18n.Translate>Withdraw anyway</i18n.Translate>
- </Button>
- )}
- </section>
- ) : (
- <section>
- <i18n.Translate>Loading terms of service...</i18n.Translate>
- </section>
- )}
- </WalletAction>
- );
-}
-
-export function WithdrawPage({ talerWithdrawUri }: Props): VNode {
- const { i18n } = useTranslationContext();
-
- const state = useComponentState(talerWithdrawUri, wxApi);
-
- if (!talerWithdrawUri) {
- return (
- <span>
- <i18n.Translate>missing withdraw uri</i18n.Translate>
- </span>
- );
- }
-
- if (!state) {
- return <Loading />;
- }
-
- return <View state={state} />;
-}
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
index 75b44fe1..1bf38721 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
@@ -15,56 +15,57 @@
*/
import { AmountJson } from "@gnu-taler/taler-util";
-import { compose, StateViewMap } from "../../utils/index.js";
+import { Loading } from "../../components/Loading.js";
import { HookError } from "../../hooks/useAsyncAsHook.js";
import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import * as wxApi from "../../wxApi.js";
import {
Props as TermsOfServiceSectionProps
} from "../TermsOfServiceSection.js";
-import { CompletedView, LoadingExchangeView, LoadingInfoView, LoadingUriView,
SuccessView } from "./views.js";
import { useComponentState } from "./state.js";
+import { CompletedView, LoadingExchangeView, LoadingInfoView, LoadingUriView,
SuccessView } from "./views.js";
-/**
- * Page shown to the user to confirm creation
- * of a reserve, usually requested by the bank.
- *
- * @author sebasjm
- */
export interface Props {
talerWithdrawUri: string | undefined;
}
export type State =
- | State.LoadingUri
- | State.LoadingExchange
+ | State.Loading
+ | State.LoadingUriError
+ | State.LoadingExchangeError
| State.LoadingInfoError
| State.Success
| State.Completed;
export namespace State {
- export interface LoadingUri {
+ export interface Loading {
+ status: "loading";
+ error: undefined;
+ }
+ export interface LoadingUriError {
status: "loading-uri";
- hook: HookError | undefined;
+ error: HookError;
}
- export interface LoadingExchange {
+ export interface LoadingExchangeError {
status: "loading-exchange";
- hook: HookError | undefined;
+ error: HookError;
}
export interface LoadingInfoError {
status: "loading-info";
- hook: HookError | undefined;
+ error: HookError;
}
export type Completed = {
status: "completed";
- hook: undefined;
+ error: undefined;
};
export type Success = {
status: "success";
- hook: undefined;
+ error: undefined;
exchange: SelectFieldHandler;
@@ -86,6 +87,7 @@ export namespace State {
}
const viewMapping: StateViewMap<State> = {
+ loading: Loading,
"loading-uri": LoadingUriView,
"loading-exchange": LoadingExchangeView,
"loading-info": LoadingInfoView,
@@ -93,6 +95,4 @@ const viewMapping: StateViewMap<State> = {
success: SuccessView,
};
-import * as wxApi from "../../wxApi.js";
-
export const WithdrawPage = compose("Withdraw", (p: Props) =>
useComponentState(p, wxApi), viewMapping)
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
index cfca3a0f..2e63c0f4 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
@@ -14,12 +14,6 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-/**
- * Page shown to the user to confirm creation
- * of a reserve, usually requested by the bank.
- *
- * @author sebasjm
- */
import { Amounts } from "@gnu-taler/taler-util";
import { TalerError } from "@gnu-taler/taler-wallet-core";
@@ -133,17 +127,18 @@ export function useComponentState(
const [showExchangeSelection, setShowExchangeSelection] = useState(false);
const [nextExchange, setNextExchange] = useState<string | undefined>();
- if (!uriInfoHook || uriInfoHook.hasError) {
+ if (!uriInfoHook) return { status: "loading", error: undefined }
+ if (uriInfoHook.hasError) {
return {
status: "loading-uri",
- hook: uriInfoHook,
+ error: uriInfoHook,
};
}
if (!thisExchange || !amount) {
return {
status: "loading-exchange",
- hook: {
+ error: {
hasError: true,
operational: false,
message: "ERROR_NO-DEFAULT-EXCHANGE",
@@ -179,23 +174,20 @@ export function useComponentState(
{},
);
- if (!info || info.hasError) {
+ if (!info) {
+ return { status: "loading", error: undefined }
+ }
+ if (info.hasError) {
return {
status: "loading-info",
- hook: info,
+ error: info,
};
}
if (!info.response) {
- return {
- status: "loading-info",
- hook: undefined,
- };
+ return { status: "loading", error: undefined };
}
if (withdrawCompleted) {
- return {
- status: "completed",
- hook: undefined,
- };
+ return { status: "completed", error: undefined };
}
const exchangeHandler: SelectFieldHandler = {
@@ -263,7 +255,7 @@ export function useComponentState(
return {
status: "success",
- hook: undefined,
+ error: undefined,
exchange: exchangeHandler,
editExchange,
cancelEditExchange,
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
index e221f903..3ecccd1b 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/stories.tsx
@@ -61,7 +61,7 @@ const ageRestrictionSelectField = {
};
export const TermsOfServiceNotYetLoaded = createExample(SuccessView, {
- hook: undefined,
+ error: undefined,
status: "success",
cancelEditExchange: nullHandler,
confirmEditExchange: nullHandler,
@@ -95,7 +95,7 @@ export const TermsOfServiceNotYetLoaded =
createExample(SuccessView, {
});
export const WithSomeFee = createExample(SuccessView, {
- hook: undefined,
+ error: undefined,
status: "success",
cancelEditExchange: nullHandler,
confirmEditExchange: nullHandler,
@@ -130,7 +130,7 @@ export const WithSomeFee = createExample(SuccessView, {
});
export const WithoutFee = createExample(SuccessView, {
- hook: undefined,
+ error: undefined,
status: "success",
cancelEditExchange: nullHandler,
confirmEditExchange: nullHandler,
@@ -165,7 +165,7 @@ export const WithoutFee = createExample(SuccessView, {
});
export const EditExchangeUntouched = createExample(SuccessView, {
- hook: undefined,
+ error: undefined,
status: "success",
cancelEditExchange: nullHandler,
confirmEditExchange: nullHandler,
@@ -200,7 +200,7 @@ export const EditExchangeUntouched =
createExample(SuccessView, {
});
export const EditExchangeModified = createExample(SuccessView, {
- hook: undefined,
+ error: undefined,
status: "success",
cancelEditExchange: nullHandler,
confirmEditExchange: nullHandler,
@@ -237,11 +237,11 @@ export const EditExchangeModified =
createExample(SuccessView, {
export const CompletedWithoutBankURL = createExample(CompletedView, {
status: "completed",
- hook: undefined,
+ error: undefined,
});
export const WithAgeRestrictionSelected = createExample(SuccessView, {
- hook: undefined,
+ error: undefined,
status: "success",
cancelEditExchange: nullHandler,
confirmEditExchange: nullHandler,
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
index 7726d8a5..f335f46a 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
@@ -54,21 +54,20 @@ describe("Withdraw CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
- expect(status).equals("loading-uri");
- expect(hook).undefined;
+ const { status } = getLastResultOrThrow();
+ expect(status).equals("loading");
}
await waitNextUpdate();
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
- expect(status).equals("loading-uri");
- if (!hook) expect.fail();
- if (!hook.hasError) expect.fail();
- if (hook.operational) expect.fail();
- expect(hook.message).eq("ERROR_NO-URI-FOR-WITHDRAWAL");
+ if (status != "loading-uri") expect.fail();
+ if (!error) expect.fail();
+ if (!error.hasError) expect.fail();
+ if (error.operational) expect.fail();
+ expect(error.message).eq("ERROR_NO-URI-FOR-WITHDRAWAL");
}
await assertNoPendingUpdate();
@@ -87,19 +86,18 @@ describe("Withdraw CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
- expect(status).equals("loading-uri");
- expect(hook).undefined;
+ const { status } = getLastResultOrThrow();
+ expect(status).equals("loading");
}
await waitNextUpdate();
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
expect(status).equals("loading-exchange");
- expect(hook).deep.equals({
+ expect(error).deep.equals({
hasError: true,
operational: false,
message: "ERROR_NO-DEFAULT-EXCHANGE",
@@ -134,19 +132,19 @@ describe("Withdraw CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
- expect(status).equals("loading-uri");
- expect(hook).undefined;
+ const { status, error } = getLastResultOrThrow();
+ expect(status).equals("loading");
+ expect(error).undefined;
}
await waitNextUpdate();
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
- expect(status).equals("loading-info");
+ expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
@@ -200,19 +198,19 @@ describe("Withdraw CTA states", () => {
);
{
- const { status, hook } = getLastResultOrThrow();
- expect(status).equals("loading-uri");
- expect(hook).undefined;
+ const { status, error } = getLastResultOrThrow();
+ expect(status).equals("loading");
+ expect(error).undefined;
}
await waitNextUpdate();
{
- const { status, hook } = getLastResultOrThrow();
+ const { status, error } = getLastResultOrThrow();
- expect(status).equals("loading-info");
+ expect(status).equals("loading");
- expect(hook).undefined;
+ expect(error).undefined;
}
await waitNextUpdate();
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 26e37320..578e5e61 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -35,46 +35,39 @@ import { Amounts } from "@gnu-taler/taler-util";
import { TermsOfServiceSection } from "../TermsOfServiceSection.js";
import { Button } from "../../mui/Button.js";
-/**
- * Page shown to the user to confirm creation
- * of a reserve, usually requested by the bank.
- *
- * @author sebasjm
- */
-
-export function LoadingUriView(state: State.LoadingUri): VNode {
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
const { i18n } = useTranslationContext();
- if (!state.hook) return <Loading />;
return (
<LoadingError
title={
<i18n.Translate>Could not get the info from the URI</i18n.Translate>
}
- error={state.hook}
+ error={error}
/>
);
}
-export function LoadingExchangeView(state: State.LoadingExchange): VNode {
+export function LoadingExchangeView({
+ error,
+}: State.LoadingExchangeError): VNode {
const { i18n } = useTranslationContext();
- if (!state.hook) return <Loading />;
return (
<LoadingError
title={<i18n.Translate>Could not get exchange</i18n.Translate>}
- error={state.hook}
+ error={error}
/>
);
}
-export function LoadingInfoView(state: State.LoadingInfoError): VNode {
+export function LoadingInfoView({ error }: State.LoadingInfoError): VNode {
const { i18n } = useTranslationContext();
- if (!state.hook) return <Loading />;
+
return (
<LoadingError
title={<i18n.Translate>Could not get info of withdrawal</i18n.Translate>}
- error={state.hook}
+ error={error}
/>
);
}
diff --git a/packages/taler-wallet-webextension/src/cta/index.stories.ts
b/packages/taler-wallet-webextension/src/cta/index.stories.ts
index 29349db2..92f4bbcb 100644
--- a/packages/taler-wallet-webextension/src/cta/index.stories.ts
+++ b/packages/taler-wallet-webextension/src/cta/index.stories.ts
@@ -19,10 +19,10 @@
* @author Sebastian Javier Marchano (sebasjm)
*/
-import * as a1 from "./Deposit.stories.jsx";
-import * as a3 from "./Pay.stories.jsx";
-import * as a4 from "./Refund.stories.jsx";
-import * as a5 from "./Tip.stories.jsx";
+import * as a1 from "./Deposit/stories.jsx";
+import * as a3 from "./Payment/stories.jsx";
+import * as a4 from "./Refund/stories.jsx";
+import * as a5 from "./Tip/stories.jsx";
import * as a6 from "./Withdraw/stories.jsx";
import * as a7 from "./TermsOfServiceSection.stories.js";
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx
b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index 99acb10c..603163ce 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -34,11 +34,11 @@ import {
TranslationProvider,
useTranslationContext,
} from "../context/translation.js";
-import { PayPage } from "../cta/Pay.js";
-import { RefundPage } from "../cta/Refund.js";
-import { TipPage } from "../cta/Tip.js";
+import { PaymentPage } from "../cta/Payment/index.js";
+import { RefundPage } from "../cta/Refund/index.js";
+import { TipPage } from "../cta/Tip/index.js";
import { WithdrawPage } from "../cta/Withdraw/index.js";
-import { DepositPage as DepositPageCTA } from "../cta/Deposit.js";
+import { DepositPage as DepositPageCTA } from "../cta/Deposit/index.js";
import { Pages, WalletNavBar } from "../NavigationBar.js";
import { DeveloperPage } from "./DeveloperPage.js";
import { BackupPage } from "./BackupPage.js";
@@ -202,7 +202,7 @@ export function Application(): VNode {
*/}
<Route
path={Pages.ctaPay}
- component={PayPage}
+ component={PaymentPage}
goToWalletManualWithdraw={(currency?: string) =>
redirectTo(Pages.balanceManualWithdraw({ currency }))
}
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: standarizing components,
gnunet <=