standarizing components

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&apos;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 &quot;<b>{state.merchantName}</b>&quot; 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>
+  );
+}