allow selecting format in devmode

7 files changed, 48 insertions, 4 deletions

diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
index 1c76d4d95..1585e3992 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
@@ -62,6 +62,7 @@ export namespace State {
     termsAccepted: ToggleHandler;
     showingTermsOfService?: ToggleHandler;
     tosLang: SelectFieldHandler;
+    tosFormat: SelectFieldHandler;
   }
   export interface ShowButtonsAccepted extends BaseInfo {
     status: "show-buttons-accepted";
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
index 88d97af81..46df71523 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
@@ -16,13 +16,21 @@
 
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { useState, useEffect } from "preact/hooks";
+import { useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { Props, State } from "./index.js";
 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 {
   const api = useBackendContext();
   const [showContent, setShowContent] = useState<boolean>(!!readOnly);
@@ -30,6 +38,8 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
   const [tosLang, setTosLang] = useState<string>()
   const { pushAlertOnError } = useAlertContext();
 
+  const [format, setFormat] = useState("text/html")
+
   const acceptedLang = tosLang ?? lang
   /**
    * For the exchange selected, bring the status of the terms of service
@@ -39,7 +49,7 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
       WalletApiOperation.GetExchangeTos,
       {
         exchangeBaseUrl: exchangeUrl,
-        acceptedFormat: ["text/xml"],
+        acceptedFormat: [format],
         acceptLanguage: acceptedLang,
       },
     );
@@ -52,7 +62,7 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
     const state = buildTermsOfServiceState(exchangeTos);
 
     return { state, supportedLangs };
-  }, [acceptedLang]);
+  }, [acceptedLang, format]);
 
   if (!terms) {
     return {
@@ -124,6 +134,13 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
       terms: state,
       showingTermsOfService: readOnly ? undefined : base.showingTermsOfService,
       termsAccepted: base.termsAccepted,
+      tosFormat: {
+        onChange: pushAlertOnError(async (s) => {
+          setFormat(s)
+        }),
+        list: supportedFormats,
+        value: format ?? ""
+      },
       tosLang: {
         onChange: pushAlertOnError(async (s) => {
           setTosLang(s)
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx
index c6d7b4e41..a28729eae 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx
@@ -36,6 +36,14 @@ export const Ready = tests.createExample(ShowTosContentView, {
     value: "es",
     onChange: (() => { }) as any
   },
+  tosFormat: {
+    list: {
+      es: "es",
+      en: "en",
+    },
+    value: "es",
+    onChange: (() => { }) as any
+  },
   terms: {
     content: {
       type: "plain",
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
index 79e49427e..40cfba3bc 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
@@ -28,6 +28,7 @@ import {
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
 import { SelectList } from "../SelectList.js";
+import { EnabledBySettings } from "../EnabledBySettings.js";
 
 export function ShowButtonsAcceptedTosView({
   termsAccepted,
@@ -122,6 +123,7 @@ export function ShowTosContentView({
   showingTermsOfService,
   terms,
   tosLang,
+  tosFormat,
 }: State.ShowContent): VNode {
   const { i18n } = useTranslationContext();
   const ableToReviewTermsOfService =
@@ -130,6 +132,15 @@ export function ShowTosContentView({
   return (
     <section>
       <Input style={{ display: "flex", justifyContent: "end" }}>
+        <EnabledBySettings name="selectTosFormat">
+          <SelectList
+            label={i18n.str`Format`}
+            list={tosFormat.list}
+            name="format"
+            value={tosFormat.value}
+            onChange={tosFormat.onChange}
+          />
+        </EnabledBySettings>
         <SelectList
           label={i18n.str`Language`}
           list={tosLang.list}
@@ -176,7 +187,7 @@ export function ShowTosContentView({
               </div>
             ))}
           {terms.content.type === "html" && (
-            <iframe style={{width: "100%"}} srcDoc={terms.content.html} />
+            <iframe style={{ width: "100%" }} srcDoc={terms.content.html} />
           )}
           {terms.content.type === "pdf" && (
             <a href={terms.content.location.toString()} download="tos.pdf">
diff --git a/packages/taler-wallet-webextension/src/hooks/useSettings.ts b/packages/taler-wallet-webextension/src/hooks/useSettings.ts
index 09fe28888..c6b8c6b0e 100644
--- a/packages/taler-wallet-webextension/src/hooks/useSettings.ts
+++ b/packages/taler-wallet-webextension/src/hooks/useSettings.ts
@@ -44,6 +44,7 @@ export const codecForSettings = (): Codec<Settings> =>
     .property("suspendIndividualTransaction", codecForBoolean())
     .property("showRefeshTransactions", codecForBoolean())
     .property("showExchangeManagement", codecForBoolean())
+    .property("selectTosFormat", codecForBoolean())
     .build("Settings");
 
 const SETTINGS_KEY = buildStorageKey("wallet-settings", codecForSettings());
diff --git a/packages/taler-wallet-webextension/src/platform/api.ts b/packages/taler-wallet-webextension/src/platform/api.ts
index a16200cc5..059b234cc 100644
--- a/packages/taler-wallet-webextension/src/platform/api.ts
+++ b/packages/taler-wallet-webextension/src/platform/api.ts
@@ -121,6 +121,7 @@ export interface Settings extends WebexWalletConfig {
   showRefeshTransactions: boolean;
   suspendIndividualTransaction: boolean;
   showExchangeManagement: boolean;
+  selectTosFormat: boolean;
 }
 
 export const defaultSettings: Settings = {
@@ -135,6 +136,7 @@ export const defaultSettings: Settings = {
   extendedAccountTypes: false,
   showExchangeManagement: false,
   walletAllowHttp: false,
+  selectTosFormat: false,
 };
 
 /**
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index b8fc14469..fd2cf0b26 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -265,6 +265,10 @@ function AdvanceSettings(): VNode {
       label: i18n.str`Edit exchange management`,
       description: i18n.str`Allows to see the list of exchange, remove, add and switch before withdrawal.`,
     },
+    selectTosFormat: {
+      label: i18n.str`Select terms of service format`,
+      description: i18n.str`Allows to render the terms of service on different format selected by the user.`,
+    },
   };
   return (
     <Fragment>