terms and privacy on exchange selection

7 files changed, 643 insertions, 1 deletions

diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
new file mode 100644
index 000000000..2c77e5d3c
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/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 { Loading } from "../../components/Loading.js";
+import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { ToggleHandler } from "../../mui/handlers.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import * as wxApi from "../../wxApi.js";
+import { useComponentState } from "./state.js";
+import { TermsState } from "./utils.js";
+import {
+  ErrorAcceptingView,
+  LoadingUriView,
+  ShowButtonsAcceptedTosView,
+  ShowButtonsNonAcceptedTosView,
+  ShowTosContentView,
+} from "./views.js";
+
+export interface Props {
+  exchangeUrl: string;
+  onChange?: (v: boolean) => void;
+}
+
+export type State =
+  | State.Loading
+  | State.LoadingUriError
+  | State.ErrorAccepting
+  | State.ShowButtonsAccepted
+  | State.ShowButtonsNotAccepted
+  | State.ShowContent;
+
+export namespace State {
+  export interface Loading {
+    status: "loading";
+    error: undefined;
+  }
+
+  export interface LoadingUriError {
+    status: "loading-error";
+    error: HookError;
+  }
+
+  export interface ErrorAccepting {
+    status: "error-accepting";
+    error: HookError;
+  }
+
+  export interface BaseInfo {
+    error: undefined;
+    terms: TermsState;
+  }
+  export interface ShowContent extends BaseInfo {
+    status: "show-content";
+    termsAccepted?: ToggleHandler;
+    showingTermsOfService?: ToggleHandler;
+  }
+  export interface ShowButtonsAccepted extends BaseInfo {
+    status: "show-buttons-accepted";
+    termsAccepted: ToggleHandler;
+    showingTermsOfService: ToggleHandler;
+  }
+  export interface ShowButtonsNotAccepted extends BaseInfo {
+    status: "show-buttons-not-accepted";
+    showingTermsOfService: ToggleHandler;
+  }
+}
+
+const viewMapping: StateViewMap<State> = {
+  loading: Loading,
+  "loading-error": LoadingUriView,
+  "show-content": ShowTosContentView,
+  "show-buttons-accepted": ShowButtonsAcceptedTosView,
+  "show-buttons-not-accepted": ShowButtonsNonAcceptedTosView,
+  "error-accepting": ErrorAcceptingView,
+};
+
+export const TermsOfService = compose(
+  "TermsOfService",
+  (p: Props) => useComponentState(p, wxApi),
+  viewMapping,
+);
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
new file mode 100644
index 000000000..30322e139
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
@@ -0,0 +1,137 @@
+/*
+ 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 { useState } from "preact/hooks";
+import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
+import * as wxApi from "../../wxApi.js";
+import { Props, State } from "./index.js";
+import { buildTermsOfServiceState } from "./utils.js";
+
+export function useComponentState(
+  { exchangeUrl, onChange }: Props,
+  api: typeof wxApi,
+): State {
+  const readOnly = !onChange;
+  const [showContent, setShowContent] = useState<boolean>(readOnly);
+  const [errorAccepting, setErrorAccepting] = useState<Error | undefined>(
+    undefined,
+  );
+
+  /**
+   * For the exchange selected, bring the status of the terms of service
+   */
+  const terms = useAsyncAsHook(async () => {
+    const exchangeTos = await api.getExchangeTos(exchangeUrl, ["text/xml"]);
+
+    const state = buildTermsOfServiceState(exchangeTos);
+
+    return { state };
+  }, []);
+
+  if (!terms) {
+    return {
+      status: "loading",
+      error: undefined,
+    };
+  }
+  if (terms.hasError) {
+    return {
+      status: "loading-error",
+      error: terms,
+    };
+  }
+
+  if (errorAccepting) {
+    return {
+      status: "error-accepting",
+      error: {
+        hasError: true,
+        operational: false,
+        message: errorAccepting.message,
+      },
+    };
+  }
+
+  const { state } = terms.response;
+
+  async function onUpdate(accepted: boolean): Promise<void> {
+    if (!state) return;
+
+    try {
+      if (accepted) {
+        await api.setExchangeTosAccepted(exchangeUrl, state.version);
+      } else {
+        // mark as not accepted
+        await api.setExchangeTosAccepted(exchangeUrl, undefined);
+      }
+      // setAccepted(accepted);
+      if (!readOnly) onChange(accepted); //external update
+    } catch (e) {
+      if (e instanceof Error) {
+        //FIXME: uncomment this and display error
+        // setErrorAccepting(e.message);
+        setErrorAccepting(e);
+      }
+    }
+  }
+
+  const accepted = state.status === "accepted";
+
+  const base = {
+    error: undefined,
+    showingTermsOfService: {
+      value: showContent,
+      button: {
+        onClick: async () => {
+          setShowContent(!showContent);
+        },
+      },
+    },
+    terms: state,
+    termsAccepted: {
+      value: accepted,
+      button: {
+        onClick: async () => {
+          const newValue = !accepted; //toggle
+          onUpdate(newValue);
+          setShowContent(false);
+        },
+      },
+    },
+  };
+
+  if (showContent) {
+    return {
+      status: "show-content",
+      error: undefined,
+      terms: state,
+      showingTermsOfService: readOnly ? undefined : base.showingTermsOfService,
+      termsAccepted: readOnly ? undefined : base.termsAccepted,
+    };
+  }
+  //showing buttons
+  if (accepted) {
+    return {
+      status: "show-buttons-accepted",
+      ...base,
+    };
+  } else {
+    return {
+      status: "show-buttons-not-accepted",
+      ...base,
+    };
+  }
+}
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx
new file mode 100644
index 000000000..2479274cb
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx
@@ -0,0 +1,29 @@
+/*
+ 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 { createExample } from "../../test-utils.js";
+// import { ReadyView } from "./views.js";
+
+export default {
+  title: "TermsOfService",
+};
+
+// export const Ready = createExample(ReadyView, {});
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/test.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/test.ts
new file mode 100644
index 000000000..eae4d4ca2
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/test.ts
@@ -0,0 +1,28 @@
+/*
+ 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 { expect } from "chai";
+
+describe("test description", () => {
+  it("should assert", () => {
+    expect([]).deep.equals([]);
+  });
+});
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/utils.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/utils.ts
new file mode 100644
index 000000000..5766883ae
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/utils.ts
@@ -0,0 +1,130 @@
+/*
+ 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 { GetExchangeTosResult } from "@gnu-taler/taler-util";
+
+export function buildTermsOfServiceState(
+  tos: GetExchangeTosResult,
+): TermsState {
+  const content: TermsDocument | undefined = parseTermsOfServiceContent(
+    tos.contentType,
+    tos.content,
+  );
+
+  const status: TermsStatus = buildTermsOfServiceStatus(
+    tos.content,
+    tos.acceptedEtag,
+    tos.currentEtag,
+  );
+
+  return { content, status, version: tos.currentEtag };
+}
+export function buildTermsOfServiceStatus(
+  content: string | undefined,
+  acceptedVersion: string | undefined,
+  currentVersion: string | undefined,
+): TermsStatus {
+  return !content
+    ? "notfound"
+    : !acceptedVersion
+    ? "new"
+    : acceptedVersion !== currentVersion
+    ? "changed"
+    : "accepted";
+}
+
+function parseTermsOfServiceContent(
+  type: string,
+  text: string,
+): TermsDocument | undefined {
+  if (type === "text/xml") {
+    try {
+      const document = new DOMParser().parseFromString(text, "text/xml");
+      return { type: "xml", document };
+    } catch (e) {
+      console.log(e);
+    }
+  } else if (type === "text/html") {
+    try {
+      const href = new URL(text);
+      return { type: "html", href };
+    } catch (e) {
+      console.log(e);
+    }
+  } else if (type === "text/json") {
+    try {
+      const data = JSON.parse(text);
+      return { type: "json", data };
+    } catch (e) {
+      console.log(e);
+    }
+  } else if (type === "text/pdf") {
+    try {
+      const location = new URL(text);
+      return { type: "pdf", location };
+    } catch (e) {
+      console.log(e);
+    }
+  } else if (type === "text/plain") {
+    try {
+      const content = text;
+      return { type: "plain", content };
+    } catch (e) {
+      console.log(e);
+    }
+  }
+  return undefined;
+}
+
+export type TermsState = {
+  content: TermsDocument | undefined;
+  status: TermsStatus;
+  version: string;
+};
+
+type TermsStatus = "new" | "accepted" | "changed" | "notfound";
+
+export type TermsDocument =
+  | TermsDocumentXml
+  | TermsDocumentHtml
+  | TermsDocumentPlain
+  | TermsDocumentJson
+  | TermsDocumentPdf;
+
+export interface TermsDocumentXml {
+  type: "xml";
+  document: Document;
+}
+
+export interface TermsDocumentHtml {
+  type: "html";
+  href: URL;
+}
+
+export interface TermsDocumentPlain {
+  type: "plain";
+  content: string;
+}
+
+export interface TermsDocumentJson {
+  type: "json";
+  data: any;
+}
+
+export interface TermsDocumentPdf {
+  type: "pdf";
+  location: URL;
+}
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
new file mode 100644
index 000000000..c7f8ccb78
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
@@ -0,0 +1,223 @@
+/*
+ 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 { LoadingError } from "../../components/LoadingError.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { TermsDocument, TermsState } from "./utils.js";
+import { State } from "./index.js";
+import { CheckboxOutlined } from "../../components/CheckboxOutlined.js";
+import {
+  LinkSuccess,
+  TermsOfService,
+  WarningBox,
+  WarningText,
+} from "../../components/styled/index.js";
+import { ExchangeXmlTos } from "../../components/ExchangeToS.js";
+import { ToggleHandler } from "../../mui/handlers.js";
+import { Button } from "../../mui/Button.js";
+
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <LoadingError
+      title={<i18n.Translate>Could not load</i18n.Translate>}
+      error={error}
+    />
+  );
+}
+
+export function ErrorAcceptingView({ error }: State.ErrorAccepting): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <LoadingError
+      title={<i18n.Translate>Could not load</i18n.Translate>}
+      error={error}
+    />
+  );
+}
+
+export function ShowButtonsAcceptedTosView({
+  termsAccepted,
+  showingTermsOfService,
+  terms,
+}: State.ShowButtonsAccepted): VNode {
+  const { i18n } = useTranslationContext();
+  const ableToReviewTermsOfService =
+    showingTermsOfService.button.onClick !== undefined;
+
+  return (
+    <Fragment>
+      {ableToReviewTermsOfService && (
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          <LinkSuccess
+            upperCased
+            onClick={showingTermsOfService.button.onClick}
+          >
+            <i18n.Translate>Show terms of service</i18n.Translate>
+          </LinkSuccess>
+        </section>
+      )}
+      <section style={{ justifyContent: "space-around", display: "flex" }}>
+        <CheckboxOutlined
+          name="terms"
+          enabled={termsAccepted.value}
+          label={
+            <i18n.Translate>
+              I accept the exchange terms of service
+            </i18n.Translate>
+          }
+          onToggle={termsAccepted.button.onClick}
+        />
+      </section>
+    </Fragment>
+  );
+}
+
+export function ShowButtonsNonAcceptedTosView({
+  showingTermsOfService,
+  terms,
+}: State.ShowButtonsNotAccepted): VNode {
+  const { i18n } = useTranslationContext();
+  const ableToReviewTermsOfService =
+    showingTermsOfService.button.onClick !== undefined;
+
+  if (!ableToReviewTermsOfService) {
+    return (
+      <Fragment>
+        {terms.status === "notfound" && (
+          <section style={{ justifyContent: "space-around", display: "flex" }}>
+            <WarningText>
+              <i18n.Translate>
+                Exchange doesn&apos;t have terms of service
+              </i18n.Translate>
+            </WarningText>
+          </section>
+        )}
+      </Fragment>
+    );
+  }
+
+  return (
+    <Fragment>
+      {terms.status === "notfound" && (
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          <WarningText>
+            <i18n.Translate>
+              Exchange doesn&apos;t have terms of service
+            </i18n.Translate>
+          </WarningText>
+        </section>
+      )}
+      {terms.status === "new" && (
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          <Button
+            variant="contained"
+            color="success"
+            onClick={showingTermsOfService.button.onClick}
+          >
+            <i18n.Translate>Review exchange terms of service</i18n.Translate>
+          </Button>
+        </section>
+      )}
+      {terms.status === "changed" && (
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          <Button
+            variant="contained"
+            color="success"
+            onClick={showingTermsOfService.button.onClick}
+          >
+            <i18n.Translate>
+              Review new version of terms of service
+            </i18n.Translate>
+          </Button>
+        </section>
+      )}
+    </Fragment>
+  );
+}
+
+export function ShowTosContentView({
+  termsAccepted,
+  showingTermsOfService,
+  terms,
+}: State.ShowContent): VNode {
+  const { i18n } = useTranslationContext();
+  const ableToReviewTermsOfService =
+    showingTermsOfService?.button.onClick !== undefined;
+
+  return (
+    <Fragment>
+      {terms.status !== "notfound" && !terms.content && (
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          <WarningBox>
+            <i18n.Translate>
+              The exchange reply with a empty terms of service
+            </i18n.Translate>
+          </WarningBox>
+        </section>
+      )}
+      {terms.content && (
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          {terms.content.type === "xml" && (
+            <TermsOfService>
+              <ExchangeXmlTos doc={terms.content.document} />
+            </TermsOfService>
+          )}
+          {terms.content.type === "plain" && (
+            <div style={{ textAlign: "left" }}>
+              <pre>{terms.content.content}</pre>
+            </div>
+          )}
+          {terms.content.type === "html" && (
+            <iframe src={terms.content.href.toString()} />
+          )}
+          {terms.content.type === "pdf" && (
+            <a href={terms.content.location.toString()} download="tos.pdf">
+              <i18n.Translate>Download Terms of Service</i18n.Translate>
+            </a>
+          )}
+        </section>
+      )}
+      {showingTermsOfService && ableToReviewTermsOfService && (
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          <LinkSuccess
+            upperCased
+            onClick={showingTermsOfService.button.onClick}
+          >
+            <i18n.Translate>Hide terms of service</i18n.Translate>
+          </LinkSuccess>
+        </section>
+      )}
+      {termsAccepted && terms.status !== "notfound" && (
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          <CheckboxOutlined
+            name="terms"
+            enabled={termsAccepted.value}
+            label={
+              <i18n.Translate>
+                I accept the exchange terms of service
+              </i18n.Translate>
+            }
+            onToggle={termsAccepted.button.onClick}
+          />
+        </section>
+      )}
+    </Fragment>
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/components/index.stories.tsx b/packages/taler-wallet-webextension/src/components/index.stories.tsx
index 901347e4f..0e1bc22b2 100644
--- a/packages/taler-wallet-webextension/src/components/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/index.stories.tsx
@@ -23,5 +23,6 @@ import * as a1 from "./Banner.stories.js";
 import * as a2 from "./PendingTransactions.stories.js";
 import * as a3 from "./Amount.stories.js";
 import * as a4 from "./ShowFullContractTermPopup.stories.js";
+import * as a5 from "./TermsOfService/stories.js";
 
-export default [a1, a2, a3, a4];
+export default [a1, a2, a3, a4, a5];