fixes #7336

5 files changed, 62 insertions, 12 deletions

diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
index b089e17a6..6aac07cfe 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts
@@ -17,7 +17,7 @@
 import { ExchangeListItem } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { ErrorAlert } from "../../context/alert.js";
-import { ToggleHandler } from "../../mui/handlers.js";
+import { SelectFieldHandler, ToggleHandler } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import { ErrorAlertView } from "../CurrentAlerts.js";
 import { useComponentState } from "./state.js";
@@ -62,6 +62,7 @@ export namespace State {
     status: "show-content";
     termsAccepted: ToggleHandler;
     showingTermsOfService?: ToggleHandler;
+    tosLang: 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 ed4715301..ac7896fbe 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts
@@ -16,7 +16,7 @@
 
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { useState } from "preact/hooks";
+import { useState, useEffect } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
@@ -26,9 +26,11 @@ import { buildTermsOfServiceState } from "./utils.js";
 export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, children }: Props): State {
   const api = useBackendContext();
   const [showContent, setShowContent] = useState<boolean>(!!readOnly);
-  const { i18n } = useTranslationContext();
+  const { i18n, lang } = useTranslationContext();
+  const [tosLang, setTosLang] = useState<string>()
   const { pushAlertOnError } = useAlertContext();
 
+  const acceptedLang = tosLang ?? lang
   /**
    * For the exchange selected, bring the status of the terms of service
    */
@@ -38,13 +40,19 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
       {
         exchangeBaseUrl: exchangeUrl,
         acceptedFormat: ["text/xml"],
+        acceptLanguage: acceptedLang,
       },
     );
 
+    const supportedLangs = exchangeTos.tosAvailableLanguages.reduce((prev, cur) => {
+      prev[cur] = cur
+      return prev;
+    }, {} as Record<string, string>)
+
     const state = buildTermsOfServiceState(exchangeTos);
 
-    return { state };
-  }, []);
+    return { state, supportedLangs };
+  }, [acceptedLang]);
 
   if (!terms) {
     return {
@@ -61,7 +69,7 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
       ),
     };
   }
-  const { state } = terms.response;
+  const { state, supportedLangs } = terms.response;
 
   async function onUpdate(accepted: boolean): Promise<void> {
     if (!state) return;
@@ -121,6 +129,13 @@ export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, c
       terms: state,
       showingTermsOfService: readOnly ? undefined : base.showingTermsOfService,
       termsAccepted: base.termsAccepted,
+      tosLang: {
+        onChange: pushAlertOnError(async (s) => {
+          setTosLang(s)
+        }),
+        list: supportedLangs,
+        value: tosLang ?? lang
+      }
     };
   }
   //showing buttons
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx
index c578774ed..c6d7b4e41 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/stories.tsx
@@ -20,10 +20,32 @@
  */
 
 import * as tests from "@gnu-taler/web-util/testing";
-// import { ReadyView } from "./views.js";
+import { ShowTosContentView } from "./views.js";
+import { ExchangeTosStatus } from "@gnu-taler/taler-util";
 
 export default {
   title: "TermsOfService",
 };
 
-// export const Ready = tests.createExample(ReadyView, {});
+export const Ready = tests.createExample(ShowTosContentView, {
+  tosLang: {
+    list: {
+      es: "es",
+      en: "en",
+    },
+    value: "es",
+    onChange: (() => { }) as any
+  },
+  terms: {
+    content: {
+      type: "plain",
+      content: "hola"
+    },
+    status: ExchangeTosStatus.Accepted,
+    version: "1"
+  },
+  status: "show-content",
+  termsAccepted: {
+    button: {},
+  }
+});
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
index 4374b4a3b..3e2dfb630 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
@@ -20,12 +20,14 @@ import { Fragment, h, VNode } from "preact";
 import { CheckboxOutlined } from "../../components/CheckboxOutlined.js";
 import { ExchangeXmlTos } from "../../components/ExchangeToS.js";
 import {
+  Input,
   LinkSuccess,
   TermsOfServiceStyle,
   WarningBox
 } from "../../components/styled/index.js";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
+import { SelectList } from "../SelectList.js";
 
 export function ShowButtonsAcceptedTosView({
   termsAccepted,
@@ -119,6 +121,7 @@ export function ShowTosContentView({
   termsAccepted,
   showingTermsOfService,
   terms,
+  tosLang,
 }: State.ShowContent): VNode {
   const { i18n } = useTranslationContext();
   const ableToReviewTermsOfService =
@@ -126,6 +129,16 @@ export function ShowTosContentView({
 
   return (
     <section>
+      <Input style={{ display: "flex", justifyContent: "end" }}>
+        <SelectList
+          label={i18n.str`Language`}
+          list={tosLang.list}
+          name="lang"
+          value={tosLang.value}
+          onChange={tosLang.onChange}
+        />
+      </Input>
+
       {!terms.content && (
         <section style={{ justifyContent: "space-around", display: "flex" }}>
           <WarningBox>
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
index bf460834d..515c5765e 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
@@ -20,16 +20,15 @@ import {
   Amounts,
   ExchangeFullDetails,
   ExchangeListItem,
-  ExchangeTosStatus,
   NotificationType,
   TalerError,
-  parseWithdrawExchangeUri,
+  parseWithdrawExchangeUri
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
-import { useEffect, useState, useMemo, useCallback } from "preact/hooks";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { useCallback, useEffect, useState } from "preact/hooks";
 import { alertFromError, useAlertContext } from "../../context/alert.js";
 import { useBackendContext } from "../../context/backend.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { useSelectedExchange } from "../../hooks/useSelectedExchange.js";
 import { RecursiveState } from "../../utils/index.js";