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/Tip | |
parent | 979cd2daf2cca2ff14a8e8a2d68712358344e9c4 (diff) | |
download | wallet-core-614a3e3c8702bb7436398acb911880caae0fdee7.tar.xz |
standarizing components
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Tip')
5 files changed, 535 insertions, 0 deletions
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 new file mode 100644 index 000000000..8c72a8812 --- /dev/null +++ b/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx @@ -0,0 +1,46 @@ +/* + 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 { AcceptedView, ReadyView } from "./views.js"; + +export default { + title: "cta/tip", +}; + +export const Accepted = createExample(AcceptedView, { + status: "accepted", + error: undefined, + amount: Amounts.parseOrThrow("EUR:1"), + exchangeBaseUrl: "", + merchantBaseUrl: "", +}); + +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 new file mode 100644 index 000000000..1c7d363f4 --- /dev/null +++ b/packages/taler-wallet-webextension/src/cta/Tip/test.ts @@ -0,0 +1,195 @@ +/* + 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, PrepareTipResult +} from "@gnu-taler/taler-util"; +import { expect } from "chai"; +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({ talerTipUri: undefined }, { + prepareTip: async () => ({}), + acceptTip: 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-TIP"); + } + + await assertNoPendingUpdate(); + }); + + it("should be ready for accepting the tip", async () => { + let tipAccepted = false; + + const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = + mountHook(() => + useComponentState({ talerTipUri: "taler://tip/asd" }, { + prepareTip: async () => + ({ + accepted: tipAccepted, + exchangeBaseUrl: "exchange url", + merchantBaseUrl: "merchant url", + tipAmountEffective: "EUR:1", + walletTipId: "tip_id", + } as PrepareTipResult as any), + acceptTip: async () => { + tipAccepted = true; + }, + } 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.amount).deep.eq(Amounts.parseOrThrow("EUR:1")); + expect(state.merchantBaseUrl).eq("merchant url"); + expect(state.exchangeBaseUrl).eq("exchange url"); + if (state.accept.onClick === undefined) expect.fail(); + + state.accept.onClick(); + } + + await waitNextUpdate(); + { + const state = getLastResultOrThrow(); + + if (state.status !== "accepted") 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"); + } + await assertNoPendingUpdate(); + }); + + it("should be ignored after clicking the ignore button", async () => { + const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = + mountHook(() => + useComponentState({ talerTipUri: "taler://tip/asd" }, { + prepareTip: async () => + ({ + exchangeBaseUrl: "exchange url", + merchantBaseUrl: "merchant url", + tipAmountEffective: "EUR:1", + walletTipId: "tip_id", + } as PrepareTipResult as any), + acceptTip: 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.amount).deep.eq(Amounts.parseOrThrow("EUR:1")); + expect(state.merchantBaseUrl).eq("merchant url"); + expect(state.exchangeBaseUrl).eq("exchange url"); + 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(); + } + await assertNoPendingUpdate(); + }); + + it("should render accepted if the tip has been used previously", async () => { + const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = + mountHook(() => + useComponentState({ talerTipUri: "taler://tip/asd" }, { + prepareTip: async () => + ({ + accepted: true, + exchangeBaseUrl: "exchange url", + merchantBaseUrl: "merchant url", + tipAmountEffective: "EUR:1", + walletTipId: "tip_id", + } as PrepareTipResult as any), + acceptTip: async () => ({}), + } as any), + ); + + { + const { status, error } = getLastResultOrThrow(); + expect(status).equals("loading"); + expect(error).undefined; + } + + await waitNextUpdate(); + + { + const state = getLastResultOrThrow(); + + if (state.status !== "accepted") 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"); + } + await assertNoPendingUpdate(); + }); +}); 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> + ); +} |