add skip tos when the exhange doesn't have tos

3 files changed, 100 insertions, 77 deletions

diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
index 1585e3992..7ef5b95a1 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
@@ -17,7 +17,11 @@
 import { ComponentChildren } from "preact";
 import { Loading } from "../../components/Loading.js";
 import { ErrorAlert } from "../../context/alert.js";
-import { SelectFieldHandler, ToggleHandler } from "../../mui/handlers.js";
+import {
+  ButtonHandler,
+  SelectFieldHandler,
+  ToggleHandler,
+} from "../../mui/handlers.js";
 import { StateViewMap, compose } from "../../utils/index.js";
 import { ErrorAlertView } from "../CurrentAlerts.js";
 import { useComponentState } from "./state.js";
@@ -61,6 +65,7 @@ export namespace State {
     status: "show-content";
     termsAccepted: ToggleHandler;
     showingTermsOfService?: ToggleHandler;
+    skipTos: ButtonHandler;
     tosLang: SelectFieldHandler;
     tosFormat: SelectFieldHandler;
   }
@@ -68,7 +73,7 @@ export namespace State {
     status: "show-buttons-accepted";
     termsAccepted: ToggleHandler;
     showingTermsOfService: ToggleHandler;
-    children: ComponentChildren,
+    children: ComponentChildren;
   }
   export interface ShowButtonsNotAccepted extends BaseInfo {
     status: "show-buttons-not-accepted";
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
index 76524f0f4..96d14dadf 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
@@ -25,22 +25,28 @@ import { buildTermsOfServiceState } from "./utils.js";
 
 const supportedFormats = {
   "text/html": "HTML",
-  "text/xml" : "XML",
-  "text/markdown" : "Markdown",
-  "text/plain" : "Plain text",
-  "text/pdf" : "PDF",
-}
-
-export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, children }: Props): State {
+  "text/xml": "XML",
+  "text/markdown": "Markdown",
+  "text/plain": "Plain text",
+  "text/pdf": "PDF",
+};
+
+export function useComponentState({
+  showEvenIfaccepted,
+  exchangeUrl,
+  readOnly,
+  children,
+}: Props): State {
   const api = useBackendContext();
   const [showContent, setShowContent] = useState<boolean>(!!readOnly);
   const { i18n, lang } = useTranslationContext();
-  const [tosLang, setTosLang] = useState<string>()
+  const [forceAccepted, setForceAccepted] = useState<boolean>();
+  const [tosLang, setTosLang] = useState<string>();
   const { pushAlertOnError } = useAlertContext();
 
-  const [format, setFormat] = useState("text/html")
+  const [format, setFormat] = useState("text/html");
 
-  const acceptedLang = tosLang ?? lang
+  const acceptedLang = tosLang ?? lang;
   /**
    * For the exchange selected, bring the status of the terms of service
    */
@@ -54,10 +60,13 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
       },
     );
 
-    const supportedLangs = exchangeTos.tosAvailableLanguages.reduce((prev, cur) => {
-      prev[cur] = cur
-      return prev;
-    }, {} as Record<string, string>)
+    const supportedLangs = exchangeTos.tosAvailableLanguages.reduce(
+      (prev, cur) => {
+        prev[cur] = cur;
+        return prev;
+      },
+      {} as Record<string, string>,
+    );
 
     const state = buildTermsOfServiceState(exchangeTos);
 
@@ -92,30 +101,35 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
     } else {
       // mark as not accepted
     }
-    terms?.retry()
+    terms?.retry();
   }
 
-  const accepted = state.status === "accepted";
+  const accepted = state.status === "accepted" || forceAccepted;
 
   const base = {
     error: undefined,
     showingTermsOfService: {
       value: showContent && (!accepted || showEvenIfaccepted),
       button: {
-        onClick: accepted && !showEvenIfaccepted ? undefined : pushAlertOnError(async () => {
-          setShowContent(!showContent);
-        }),
+        onClick:
+          accepted && !showEvenIfaccepted
+            ? undefined
+            : pushAlertOnError(async () => {
+                setShowContent(!showContent);
+              }),
       },
     },
     terms: state,
     termsAccepted: {
       value: accepted,
       button: {
-        onClick: readOnly ? undefined : pushAlertOnError(async () => {
-          const newValue = !accepted; //toggle
-          await onUpdate(newValue);
-          setShowContent(false);
-        }),
+        onClick: readOnly
+          ? undefined
+          : pushAlertOnError(async () => {
+              const newValue = !accepted; //toggle
+              await onUpdate(newValue);
+              setShowContent(false);
+            }),
       },
     },
   };
@@ -135,20 +149,25 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
       terms: state,
       showingTermsOfService: readOnly ? undefined : base.showingTermsOfService,
       termsAccepted: base.termsAccepted,
+      skipTos: {
+        onClick: pushAlertOnError(async () => {
+          setForceAccepted(true);
+        }),
+      },
       tosFormat: {
         onChange: pushAlertOnError(async (s) => {
-          setFormat(s)
+          setFormat(s);
         }),
         list: supportedFormats,
-        value: format ?? ""
+        value: format ?? "",
       },
       tosLang: {
         onChange: pushAlertOnError(async (s) => {
-          setTosLang(s)
+          setTosLang(s);
         }),
         list: supportedLangs,
-        value: tosLang ?? lang
-      }
+        value: tosLang ?? lang,
+      },
     };
   }
   //showing buttons
@@ -156,5 +175,4 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
     status: "show-buttons-not-accepted",
     ...base,
   };
-
 }
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
index 40cfba3bc..f3172a741 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
@@ -23,7 +23,7 @@ import {
   Input,
   LinkSuccess,
   TermsOfServiceStyle,
-  WarningBox
+  WarningBox,
 } from "../../components/styled/index.js";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
@@ -50,7 +50,9 @@ export function ShowButtonsAcceptedTosView({
             </LinkSuccess>
           </section>
           {termsAccepted.button.onClick !== undefined && (
-            <section style={{ justifyContent: "space-around", display: "flex" }}>
+            <section
+              style={{ justifyContent: "space-around", display: "flex" }}
+            >
               <CheckboxOutlined
                 name="terms"
                 enabled={termsAccepted.value}
@@ -75,36 +77,9 @@ export function ShowButtonsNonAcceptedTosView({
   terms,
 }: State.ShowButtonsNotAccepted): VNode {
   const { i18n } = useTranslationContext();
-  // const ableToReviewTermsOfService =
-  //   showingTermsOfService.button.onClick !== undefined;
-
-  // if (!ableToReviewTermsOfService) {
-  //   return (
-  //     <Fragment>
-  //       {terms.status === ExchangeTosStatus.Pending && (
-  //         <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 === ExchangeTosStatus.NotFound && (
-        <section style={{ justifyContent: "space-around", display: "flex" }}>
-          <WarningText>
-            <i18n.Translate>
-              Exchange doesn&apos;t have terms of service
-            </i18n.Translate>
-          </WarningText>
-        </section>
-      )} */}
       <section style={{ justifyContent: "space-around", display: "flex" }}>
         <Button
           variant="contained"
@@ -124,11 +99,35 @@ export function ShowTosContentView({
   terms,
   tosLang,
   tosFormat,
+  skipTos,
 }: State.ShowContent): VNode {
   const { i18n } = useTranslationContext();
-  const ableToReviewTermsOfService =
-    termsAccepted.button.onClick !== undefined;
+  const ableToReviewTermsOfService = termsAccepted.button.onClick !== undefined;
+
+  if (terms.status === ExchangeTosStatus.MissingTos) {
+    return (
+      <section>
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          <WarningBox>
+            <i18n.Translate>
+              The exchange doesn't have a terms of service.
+            </i18n.Translate>
+          </WarningBox>
+        </section>
 
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
+          <Button
+            variant="contained"
+            color="success"
+            disabled={!skipTos.onClick}
+            onClick={skipTos.onClick}
+          >
+            <i18n.Translate>Skip it for now.</i18n.Translate>
+          </Button>
+        </section>
+      </section>
+    );
+  }
   return (
     <section>
       <Input style={{ display: "flex", justifyContent: "end" }}>
@@ -206,20 +205,21 @@ export function ShowTosContentView({
           </LinkSuccess>
         </section>
       )}
-      {termsAccepted.button.onClick && terms.status !== ExchangeTosStatus.Accepted && (
-        <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>
-      )}
+      {termsAccepted.button.onClick &&
+        terms.status !== ExchangeTosStatus.Accepted && (
+          <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>
+        )}
     </section>
   );
 }