diff options
Diffstat (limited to 'packages')
34 files changed, 1878 insertions, 2388 deletions
diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json index d9940776c..b62bae081 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 2c5a94d51..000000000 --- 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 000000000..c2d700617 --- /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 000000000..8876a2971 --- /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 index 269b33ce8..a4168bcc2 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 index 125a43427..6e7aaf237 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 000000000..ba1ca58d6 --- /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 147ae6837..000000000 --- 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 000000000..0e67a4991 --- /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 000000000..3c819ec8f --- /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 000000000..603a9cb33 --- /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 index 42ab902b8..aea70b7ca 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 index df381832b..a8c9a640a 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 28182c81a..000000000 --- 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 04873b1ce..000000000 --- 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 000000000..b122559a9 --- /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 000000000..f8ce71a13 --- /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 000000000..d3a2302d9 --- /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 index 3eff42e90..04c83b8f1 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 000000000..e0c7bb553 --- /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 2feffcda4..000000000 --- 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 000000000..24a7b1cff --- /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 000000000..e5511074e --- /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 index 40a89d1bf..8c72a8812 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 index a77b59167..1c7d363f4 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 000000000..442d41d28 --- /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 a27a214be..000000000 --- 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 75b44fe1e..1bf38721c 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 cfca3a0f7..2e63c0f47 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 e221f9034..3ecccd1b2 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 7726d8a59..f335f46a8 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 26e373205..578e5e61f 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 29349db23..92f4bbcb1 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 99acb10c4..603163cee 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 })) } |