adding tos information in settings and return to manual withdraw when adding an exchange

7 files changed, 124 insertions, 54 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index 554952795..36feeb76e 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -21,7 +21,6 @@
 
 import { AmountJson, Amounts, i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { route } from "preact-router";
 import { useState } from "preact/hooks";
 import { ErrorMessage } from "../components/ErrorMessage";
 import { SelectList } from "../components/SelectList";
@@ -35,13 +34,13 @@ import {
   LightText,
   LinkPrimary,
 } from "../components/styled";
-import { Pages } from "../NavigationBar";
 
 export interface Props {
   error: string | undefined;
   initialAmount?: string;
   exchangeList: Record<string, string>;
   onCreate: (exchangeBaseUrl: string, amount: AmountJson) => Promise<void>;
+  onAddExchange: () => void;
 }
 
 export function CreateManualWithdraw({
@@ -49,6 +48,7 @@ export function CreateManualWithdraw({
   exchangeList,
   error,
   onCreate,
+  onAddExchange,
 }: Props): VNode {
   const exchangeSelectList = Object.keys(exchangeList);
   const currencySelectList = Object.values(exchangeList);
@@ -90,7 +90,7 @@ export function CreateManualWithdraw({
     return (
       <Centered style={{ marginTop: 100 }}>
         <BoldLight>No exchange configured</BoldLight>
-        <ButtonSuccess onClick={() => route(Pages.exchange_add)}>
+        <ButtonSuccess onClick={onAddExchange}>
           <i18n.Translate>Add exchange</i18n.Translate>
         </ButtonSuccess>
       </Centered>
@@ -130,10 +130,7 @@ export function CreateManualWithdraw({
             />
           </Input>
           <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <LinkPrimary
-              onClick={() => route(Pages.exchange_add)}
-              style={{ marginLeft: "auto" }}
-            >
+            <LinkPrimary onClick={onAddExchange} style={{ marginLeft: "auto" }}>
               <i18n.Translate>Add exchange</i18n.Translate>
             </LinkPrimary>
           </div>
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
index 5c7f94ecd..409e0b49e 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx
@@ -5,7 +5,6 @@ import {
   Button,
   ButtonSuccess,
   ButtonWarning,
-  WarningBox,
 } from "../components/styled/index";
 import { TermsOfServiceSection } from "../cta/TermsOfServiceSection";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
@@ -97,14 +96,6 @@ export function View({
           </a>
         </div>
       </section>
-      {terms && terms.status === "notfound" && (
-        <section>
-          <WarningBox>
-            {i18n.str`Exchange doesn't have terms of service`}
-          </WarningBox>
-        </section>
-      )}
-
       {terms && (
         <TermsOfServiceSection
           reviewed={reviewed}
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx
index 10449c101..0c8336e69 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx
@@ -27,7 +27,7 @@ import { ExchangeAddConfirmPage } from "./ExchangeAddConfirm";
 import { ExchangeSetUrlPage } from "./ExchangeSetUrl";
 
 interface Props {
-  currency: string;
+  currency?: string;
   onBack: () => void;
 }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
index bc182cb70..9ea800fe4 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx
@@ -55,6 +55,12 @@ export const WithDemoAsKnownExchange = createExample(TestedComponent, {
     {
       currency: "TESTKUDOS",
       exchangeBaseUrl: "https://exchange.demo.taler.net/",
+      tos: {
+        currentVersion: "1",
+        acceptedVersion: "1",
+        content: "content of tos",
+        contentType: "text/plain",
+      },
       paytoUris: [],
     },
   ],
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index 88d5f1722..b3e8a2c25 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -22,11 +22,13 @@ import {
   AcceptManualWithdrawalResult,
   AmountJson,
   Amounts,
+  NotificationType,
 } from "@gnu-taler/taler-util";
 import { ReserveCreated } from "./ReserveCreated";
 import { route } from "preact-router";
 import { Pages } from "../NavigationBar";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { ExchangeAddPage } from "./ExchangeAddPage";
 
 export function ManualWithdrawPage(): VNode {
   const [success, setSuccess] = useState<
@@ -39,7 +41,9 @@ export function ManualWithdrawPage(): VNode {
   >(undefined);
   const [error, setError] = useState<string | undefined>(undefined);
 
-  const state = useAsyncAsHook(() => wxApi.listExchanges());
+  const state = useAsyncAsHook(wxApi.listExchanges, [
+    NotificationType.ExchangeAdded,
+  ]);
 
   async function doCreate(
     exchangeBaseUrl: string,
@@ -61,6 +65,12 @@ export function ManualWithdrawPage(): VNode {
     }
   }
 
+  const [addingExchange, setAddingExchange] = useState(false);
+
+  if (addingExchange) {
+    return <ExchangeAddPage onBack={() => setAddingExchange(false)} />;
+  }
+
   if (success) {
     return (
       <ReserveCreated
@@ -91,6 +101,7 @@ export function ManualWithdrawPage(): VNode {
 
   return (
     <CreateManualWithdraw
+      onAddExchange={() => setAddingExchange(true)}
       error={error}
       exchangeList={exchangeList}
       onCreate={doCreate}
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
index 6cc1368d5..8acf9d210 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.stories.tsx
@@ -49,6 +49,52 @@ export const WithOneExchange = createExample(TestedComponent, {
     {
       currency: "USD",
       exchangeBaseUrl: "http://exchange.taler",
+      tos: {
+        currentVersion: "1",
+        acceptedVersion: "1",
+        content: "content of tos",
+        contentType: "text/plain",
+      },
+      paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"],
+    },
+  ],
+});
+
+export const WithExchangeInDifferentState = createExample(TestedComponent, {
+  deviceName: "this-is-the-device-name",
+  permissionsEnabled: true,
+  setDeviceName: () => Promise.resolve(),
+  knownExchanges: [
+    {
+      currency: "USD",
+      exchangeBaseUrl: "http://exchange1.taler",
+      tos: {
+        currentVersion: "1",
+        acceptedVersion: "1",
+        content: "content of tos",
+        contentType: "text/plain",
+      },
+      paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"],
+    },
+    {
+      currency: "USD",
+      exchangeBaseUrl: "http://exchange2.taler",
+      tos: {
+        currentVersion: "2",
+        acceptedVersion: "1",
+        content: "content of tos",
+        contentType: "text/plain",
+      },
+      paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"],
+    },
+    {
+      currency: "USD",
+      exchangeBaseUrl: "http://exchange3.taler",
+      tos: {
+        currentVersion: "1",
+        content: "content of tos",
+        contentType: "text/plain",
+      },
       paytoUris: ["payto://x-taler-bank/bank.rpi.sebasjm.com/exchangeminator"],
     },
   ],
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index 5f1cd89d3..04656acc1 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -17,14 +17,19 @@
 import { ExchangeListItem, i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { Checkbox } from "../components/Checkbox";
-import { LinkPrimary } from "../components/styled";
+import {
+  DestructiveText,
+  LinkPrimary,
+  SuccessText,
+  WarningText,
+} from "../components/styled";
 import { useDevContext } from "../context/devContext";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { useBackupDeviceName } from "../hooks/useBackupDeviceName";
 import { useExtendedPermissions } from "../hooks/useExtendedPermissions";
 import { useLang } from "../hooks/useLang";
 import { Pages } from "../NavigationBar";
-// import { strings as messages } from "../i18n/strings";
+import { buildTermsOfServiceStatus } from "../utils";
 import * as wxApi from "../wxApi";
 
 export function SettingsPage(): VNode {
@@ -65,25 +70,8 @@ export interface ViewProps {
   knownExchanges: Array<ExchangeListItem>;
 }
 
-// type LangsNames = {
-//   [P in keyof typeof messages]: string;
-// };
-
-// const names: LangsNames = {
-//   es: "Español [es]",
-//   en: "English [en]",
-//   fr: "Français [fr]",
-//   de: "Deutsch [de]",
-//   sv: "Svenska [sv]",
-//   it: "Italiano [it]",
-// };
-
 export function SettingsView({
   knownExchanges,
-  // lang,
-  // changeLang,
-  // deviceName,
-  // setDeviceName,
   permissionsEnabled,
   togglePermissions,
   developerMode,
@@ -93,6 +81,17 @@ export function SettingsView({
     <Fragment>
       <section>
         <h2>
+          <i18n.Translate>Permissions</i18n.Translate>
+        </h2>
+        <Checkbox
+          label="Automatically open wallet based on page content"
+          name="perm"
+          description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)"
+          enabled={permissionsEnabled}
+          onToggle={togglePermissions}
+        />
+
+        <h2>
           <i18n.Translate>Known exchanges</i18n.Translate>
         </h2>
         {!knownExchanges || !knownExchanges.length ? (
@@ -100,14 +99,44 @@ export function SettingsView({
         ) : (
           <Fragment>
             <table>
-              {knownExchanges.map((e, idx) => (
-                <tr key={idx}>
-                  <td>{e.currency}</td>
-                  <td>
-                    <a href={e.exchangeBaseUrl}>{e.exchangeBaseUrl}</a>
-                  </td>
+              <thead>
+                <tr>
+                  <th>currency</th>
+                  <th>url</th>
+                  <th>term of service</th>
                 </tr>
-              ))}
+              </thead>
+              <tbody>
+                {knownExchanges.map((e, idx) => {
+                  function Status(): VNode {
+                    const status = buildTermsOfServiceStatus(
+                      e.tos.content,
+                      e.tos.acceptedVersion,
+                      e.tos.currentVersion,
+                    );
+                    switch (status) {
+                      case "accepted":
+                        return <SuccessText>ok</SuccessText>;
+                      case "changed":
+                        return <WarningText>changed!</WarningText>;
+                      case "new":
+                      case "notfound":
+                        return <DestructiveText>not accepted</DestructiveText>;
+                    }
+                  }
+                  return (
+                    <tr key={idx}>
+                      <td>{e.currency}</td>
+                      <td>
+                        <a href={e.exchangeBaseUrl}>{e.exchangeBaseUrl}</a>
+                      </td>
+                      <td>
+                        <Status />
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
             </table>
           </Fragment>
         )}
@@ -116,16 +145,6 @@ export function SettingsView({
           <LinkPrimary href={Pages.exchange_add}>Add an exchange</LinkPrimary>
         </div>
 
-        <h2>
-          <i18n.Translate>Permissions</i18n.Translate>
-        </h2>
-        <Checkbox
-          label="Automatically open wallet based on page content"
-          name="perm"
-          description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)"
-          enabled={permissionsEnabled}
-          onToggle={togglePermissions}
-        />
         <h2>Config</h2>
         <Checkbox
           label="Developer mode"