terms and privacy on exchange selection

6 files changed, 127 insertions, 52 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
index b0602d1e6..2118c8984 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
@@ -16,11 +16,9 @@
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Title } from "../components/styled/index.js";
+import { TermsOfService } from "../components/TermsOfService/index.js";
 import { useTranslationContext } from "../context/translation.js";
-import { TermsOfService } from "../cta/TermsOfService/index.js";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
-import * as wxApi from "../wxApi.js";
 
 export interface Props {
   url: string;
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
index 06d519268..2ea73d310 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
@@ -21,6 +21,7 @@ import {
   FeeDescriptionPair,
 } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
+import { TermsState } from "../../components/TermsOfService/utils.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
 import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
 import { ButtonHandler, SelectFieldHandler } from "../../mui/handlers.js";
@@ -31,7 +32,9 @@ import {
   ComparingView,
   ErrorLoadingView,
   NoExchangesView,
+  PrivacyContentView,
   ReadyView,
+  TosContentView,
 } from "./views.js";
 
 export interface Props {
@@ -46,6 +49,8 @@ export type State =
   | State.LoadingUriError
   | State.Ready
   | State.Comparing
+  | State.ShowingTos
+  | State.ShowingPrivacy
   | SelectExchangeState.NoExchange;
 
 export namespace State {
@@ -63,6 +68,8 @@ export namespace State {
     exchanges: SelectFieldHandler;
     selected: ExchangeFullDetails;
     error: undefined;
+    onShowTerms: ButtonHandler;
+    onShowPrivacy: ButtonHandler;
   }
 
   export interface Ready extends BaseInfo {
@@ -76,6 +83,16 @@ export namespace State {
     onReset: ButtonHandler;
     onSelect: ButtonHandler;
   }
+  export interface ShowingTos {
+    status: "showing-tos";
+    exchangeUrl: string;
+    onClose: ButtonHandler;
+  }
+  export interface ShowingPrivacy {
+    status: "showing-privacy";
+    exchangeUrl: string;
+    onClose: ButtonHandler;
+  }
 }
 
 const viewMapping: StateViewMap<State> = {
@@ -83,6 +100,8 @@ const viewMapping: StateViewMap<State> = {
   "error-loading": ErrorLoadingView,
   comparing: ComparingView,
   "no-exchange": NoExchangesView,
+  "showing-tos": TosContentView,
+  "showing-privacy": PrivacyContentView,
   ready: ReadyView,
 };
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
index e1b270a42..2450a90ca 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/state.ts
@@ -50,9 +50,15 @@ export function useComponentState(
     const original = !initialExchange
       ? undefined
       : await api.getExchangeDetailedInfo(initialExchange.exchangeBaseUrl);
+
     return { exchanges, selected, original };
   }, [value]);
 
+  const [showingTos, setShowingTos] = useState<string | undefined>(undefined);
+  const [showingPrivacy, setShowingPrivacy] = useState<string | undefined>(
+    undefined,
+  );
+
   if (!hook) {
     return {
       status: "loading",
@@ -82,6 +88,27 @@ export function useComponentState(
     {} as Record<string, string>,
   );
 
+  if (showingPrivacy) {
+    return {
+      status: "showing-privacy",
+      error: undefined,
+      onClose: {
+        onClick: async () => setShowingPrivacy(undefined),
+      },
+      exchangeUrl: showingPrivacy,
+    };
+  }
+  if (showingTos) {
+    return {
+      status: "showing-tos",
+      error: undefined,
+      onClose: {
+        onClick: async () => setShowingTos(undefined),
+      },
+      exchangeUrl: showingTos,
+    };
+  }
+
   if (!original) {
     // !original <=> selected == original
     return {
@@ -98,6 +125,16 @@ export function useComponentState(
         onClick: onCancel,
       },
       selected,
+      onShowPrivacy: {
+        onClick: async () => {
+          setShowingPrivacy(selected.exchangeBaseUrl);
+        },
+      },
+      onShowTerms: {
+        onClick: async () => {
+          setShowingTos(selected.exchangeBaseUrl);
+        },
+      },
     };
   }
 
@@ -140,6 +177,16 @@ export function useComponentState(
         onSelection(selected.exchangeBaseUrl);
       },
     },
+    onShowPrivacy: {
+      onClick: async () => {
+        setShowingPrivacy(selected.exchangeBaseUrl);
+      },
+    },
+    onShowTerms: {
+      onClick: async () => {
+        setShowingTos(selected.exchangeBaseUrl);
+      },
+    },
     selected,
     pairTimeline,
   };
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
index 38b63e615..dfa8bbd39 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/stories.tsx
@@ -39,6 +39,8 @@ export const Bitcoin1 = createExample(ReadyView, {
     transferFees: {},
     globalFees: [],
   } as any,
+  onShowPrivacy: {},
+  onShowTerms: {},
   onClose: {},
 });
 export const Bitcoin2 = createExample(ReadyView, {
@@ -57,6 +59,8 @@ export const Bitcoin2 = createExample(ReadyView, {
     transferFees: {},
     globalFees: [],
   } as any,
+  onShowPrivacy: {},
+  onShowTerms: {},
   onClose: {},
 });
 
@@ -75,6 +79,8 @@ export const Kudos1 = createExample(ReadyView, {
     transferFees: {},
     globalFees: [],
   } as any,
+  onShowPrivacy: {},
+  onShowTerms: {},
   onClose: {},
 });
 export const Kudos2 = createExample(ReadyView, {
@@ -93,6 +99,8 @@ export const Kudos2 = createExample(ReadyView, {
     transferFees: {},
     globalFees: [],
   } as any,
+  onShowPrivacy: {},
+  onShowTerms: {},
   onClose: {},
 });
 export const ComparingBitcoin = createExample(ComparingView, {
@@ -108,6 +116,8 @@ export const ComparingBitcoin = createExample(ComparingView, {
     globalFees: [],
   } as any,
   onReset: {},
+  onShowPrivacy: {},
+  onShowTerms: {},
   onSelect: {},
   error: undefined,
   pairTimeline: {
@@ -130,6 +140,8 @@ export const ComparingKudos = createExample(ComparingView, {
     globalFees: [],
   } as any,
   onReset: {},
+  onShowPrivacy: {},
+  onShowTerms: {},
   onSelect: {},
   error: undefined,
   pairTimeline: {
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
index d39aa3878..e89fc8879 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
@@ -22,6 +22,7 @@ import { Amount } from "../../components/Amount.js";
 import { LoadingError } from "../../components/LoadingError.js";
 import { SelectList } from "../../components/SelectList.js";
 import { Input, SvgIcon } from "../../components/styled/index.js";
+import { TermsOfService } from "../../components/TermsOfService/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js";
@@ -119,6 +120,36 @@ export function ErrorLoadingView({ error }: State.LoadingUriError): VNode {
   );
 }
 
+export function PrivacyContentView({
+  exchangeUrl,
+  onClose,
+}: State.ShowingPrivacy): VNode {
+  const { i18n } = useTranslationContext();
+  return (
+    <div>
+      <Button variant="outlined" onClick={onClose.onClick}>
+        <i18n.Translate>Close</i18n.Translate>
+      </Button>
+      <div>show privacy terms for {exchangeUrl}</div>
+    </div>
+  );
+}
+
+export function TosContentView({
+  exchangeUrl,
+  onClose,
+}: State.ShowingTos): VNode {
+  const { i18n } = useTranslationContext();
+  return (
+    <div>
+      <Button variant="outlined" onClick={onClose.onClick}>
+        <i18n.Translate>Close</i18n.Translate>
+      </Button>
+      <TermsOfService exchangeUrl={exchangeUrl} />
+    </div>
+  );
+}
+
 export function NoExchangesView({
   currency,
 }: SelectExchangeState.NoExchange): VNode {
@@ -145,6 +176,8 @@ export function ComparingView({
   onReset,
   onSelect,
   pairTimeline,
+  onShowPrivacy,
+  onShowTerms,
 }: State.Comparing): VNode {
   const { i18n } = useTranslationContext();
   return (
@@ -305,53 +338,13 @@ export function ComparingView({
         </FeeDescriptionTable>{" "}
       </section>
       <section>
-        <table>
-          <thead>
-            <tr>
-              <td>
-                <i18n.Translate>Wallet operations</i18n.Translate>
-              </td>
-              <td>
-                <i18n.Translate>Fee</i18n.Translate>
-              </td>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>history(i) </td>
-              <td>0.1</td>
-            </tr>
-            <tr>
-              <td>kyc (i) </td>
-              <td>0.1</td>
-            </tr>
-            <tr>
-              <td>account (i) </td>
-              <td>0.1</td>
-            </tr>
-            <tr>
-              <td>purse (i) </td>
-              <td>0.1</td>
-            </tr>
-            <tr>
-              <td>wire SEPA (i) </td>
-              <td>0.1</td>
-            </tr>
-            <tr>
-              <td>closing SEPA(i) </td>
-              <td>0.1</td>
-            </tr>
-            <tr>
-              <td>wad SEPA (i) </td>
-              <td>0.1</td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section>
         <ButtonGroupFooter>
-          <Button variant="outlined">Privacy policy</Button>
-          <Button variant="outlined">Terms of service</Button>
+          <Button onClick={onShowPrivacy.onClick} variant="outlined">
+            Privacy policy
+          </Button>
+          <Button onClick={onShowTerms.onClick} variant="outlined">
+            Terms of service
+          </Button>
         </ButtonGroupFooter>
       </section>
     </Container>
@@ -362,6 +355,8 @@ export function ReadyView({
   exchanges,
   selected,
   onClose,
+  onShowPrivacy,
+  onShowTerms,
 }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
 
@@ -616,8 +611,12 @@ export function ReadyView({
       </section>
       <section>
         <ButtonGroupFooter>
-          <Button variant="outlined">Privacy policy</Button>
-          <Button variant="outlined">Terms of service</Button>
+          <Button onClick={onShowPrivacy.onClick} variant="outlined">
+            Privacy policy
+          </Button>
+          <Button onClick={onShowTerms.onClick} variant="outlined">
+            Terms of service
+          </Button>
         </ButtonGroupFooter>
       </section>
     </Container>
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index 56e610e8a..80843ac27 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -36,7 +36,7 @@ import { useBackupDeviceName } from "../hooks/useBackupDeviceName.js";
 import { useAutoOpenPermissions } from "../hooks/useAutoOpenPermissions.js";
 import { ToggleHandler } from "../mui/handlers.js";
 import { Pages } from "../NavigationBar.js";
-import { buildTermsOfServiceStatus } from "../cta/TermsOfService/utils.js";
+import { buildTermsOfServiceStatus } from "../components/TermsOfService/utils.js";
 import * as wxApi from "../wxApi.js";
 import { platform } from "../platform/api.js";
 import { useClipboardPermissions } from "../hooks/useClipboardPermissions.js";