standarizing components

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&apos;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>
+  );
+}