From 3f417b4c4f251b7dfad7e27308fdb966ef040c1c Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 17 Jan 2024 16:19:28 -0300 Subject: fixes #7336 --- .../src/components/TermsOfService/index.ts | 3 ++- .../src/components/TermsOfService/state.ts | 25 ++++++++++++++++----- .../src/components/TermsOfService/stories.tsx | 26 ++++++++++++++++++++-- .../src/components/TermsOfService/views.tsx | 13 +++++++++++ .../src/cta/Withdraw/state.ts | 7 +++--- 5 files changed, 62 insertions(+), 12 deletions(-) (limited to 'packages') 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(!!readOnly); - const { i18n } = useTranslationContext(); + const { i18n, lang } = useTranslationContext(); + const [tosLang, setTosLang] = useState() 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) + 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 { 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 (
+ + + + {!terms.content && (
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"; -- cgit v1.2.3