diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/TermsOfService')
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'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'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> ); } |