diff options
author | Sebastian <sebasjm@gmail.com> | 2022-07-30 20:55:41 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-08-01 10:55:17 -0300 |
commit | 614a3e3c8702bb7436398acb911880caae0fdee7 (patch) | |
tree | 18aed0268f98642f2ca4bc7b7ac23297ad4f2cc8 /packages/taler-wallet-webextension/src/cta/Refund | |
parent | 979cd2daf2cca2ff14a8e8a2d68712358344e9c4 (diff) | |
download | wallet-core-614a3e3c8702bb7436398acb911880caae0fdee7.tar.xz |
standarizing components
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Refund')
5 files changed, 731 insertions, 0 deletions
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 new file mode 100644 index 000000000..04c83b8f1 --- /dev/null +++ b/packages/taler-wallet-webextension/src/cta/Refund/test.ts @@ -0,0 +1,265 @@ +/* + 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 { + AmountJson, + Amounts, NotificationType, + PrepareRefundResult +} from "@gnu-taler/taler-util"; +import { expect } from "chai"; +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({ talerRefundUri: undefined }, { + prepareRefund: async () => ({}), + applyRefund: async () => ({}), + onUpdateNotification: async () => ({}), + } as any), + ); + + { + const { status, error } = getLastResultOrThrow(); + expect(status).equals("loading"); + expect(error).undefined; + } + + await waitNextUpdate(); + + { + const { status, error } = getLastResultOrThrow(); + + 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(); + }); + + it("should be ready after loading", async () => { + const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = + mountHook(() => + useComponentState({ talerRefundUri: "taler://refund/asdasdas" }, { + prepareRefund: async () => + ({ + effectivePaid: "EUR:2", + awaiting: "EUR:2", + gone: "EUR:0", + granted: "EUR:0", + pending: false, + proposalId: "1", + info: { + contractTermsHash: "123", + merchant: { + name: "the merchant name", + }, + orderId: "orderId1", + summary: "the summary", + }, + } as PrepareRefundResult as any), + applyRefund: async () => ({}), + onUpdateNotification: async () => ({}), + } as any), + ); + + { + const { status, error } = getLastResultOrThrow(); + expect(status).equals("loading"); + expect(error).undefined; + } + + await waitNextUpdate(); + + { + const state = getLastResultOrThrow(); + + if (state.status !== "ready") 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"); + expect(state.orderId).eq("orderId1"); + expect(state.products).undefined; + } + + await assertNoPendingUpdate(); + }); + + it("should be ignored after clicking the ignore button", async () => { + const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = + mountHook(() => + useComponentState({ talerRefundUri: "taler://refund/asdasdas" }, { + prepareRefund: async () => + ({ + effectivePaid: "EUR:2", + awaiting: "EUR:2", + gone: "EUR:0", + granted: "EUR:0", + pending: false, + proposalId: "1", + info: { + contractTermsHash: "123", + merchant: { + name: "the merchant name", + }, + orderId: "orderId1", + summary: "the summary", + }, + } as PrepareRefundResult as any), + applyRefund: async () => ({}), + onUpdateNotification: async () => ({}), + } as any), + ); + + { + const { status, error } = getLastResultOrThrow(); + expect(status).equals("loading"); + expect(error).undefined; + } + + await waitNextUpdate(); + + { + const state = getLastResultOrThrow(); + + if (state.status !== "ready") 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"); + expect(state.products).undefined; + + if (state.ignore.onClick === undefined) expect.fail(); + state.ignore.onClick(); + } + + await waitNextUpdate(); + + { + const state = getLastResultOrThrow(); + + if (state.status !== "ignored") expect.fail(); + if (state.error) expect.fail(); + expect(state.merchantName).eq("the merchant name"); + } + + await assertNoPendingUpdate(); + }); + + it("should be in progress when doing refresh", async () => { + let granted = Amounts.getZero("EUR"); + const unit: AmountJson = { currency: "EUR", value: 1, fraction: 0 }; + const refunded: AmountJson = { currency: "EUR", value: 2, fraction: 0 }; + let awaiting: AmountJson = refunded; + let pending = true; + + const subscriptions = new SubsHandler(); + + function notifyMelt(): void { + granted = Amounts.add(granted, unit).amount; + pending = granted.value < refunded.value; + awaiting = Amounts.sub(refunded, granted).amount; + subscriptions.notifyEvent(NotificationType.RefreshMelted); + } + + const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = + mountHook(() => + useComponentState({ talerRefundUri: "taler://refund/asdasdas" }, { + prepareRefund: async () => + ({ + awaiting: Amounts.stringify(awaiting), + effectivePaid: "EUR:2", + gone: "EUR:0", + granted: Amounts.stringify(granted), + pending, + proposalId: "1", + info: { + contractTermsHash: "123", + merchant: { + name: "the merchant name", + }, + orderId: "orderId1", + summary: "the summary", + }, + } as PrepareRefundResult as any), + applyRefund: async () => ({}), + onUpdateNotification: subscriptions.saveSubscription, + } as any), + ); + + { + const { status, error } = getLastResultOrThrow(); + expect(status).equals("loading"); + expect(error).undefined; + } + + await waitNextUpdate(); + + { + const state = getLastResultOrThrow(); + + if (state.status !== "in-progress") expect.fail("1"); + 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")); + // expect(state.progress).closeTo(1 / 3, 0.01) + + notifyMelt(); + } + + await waitNextUpdate(); + + { + const state = getLastResultOrThrow(); + + if (state.status !== "in-progress") expect.fail("2"); + 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")); + // expect(state.progress).closeTo(2 / 3, 0.01) + + notifyMelt(); + } + + await waitNextUpdate(); + + { + const state = getLastResultOrThrow(); + + if (state.status !== "completed") expect.fail("3"); + 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")); + } + + await assertNoPendingUpdate(); + }); +}); 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> + ); +} |