diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx')
| -rw-r--r-- | packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx | 225 |
1 files changed, 225 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx new file mode 100644 index 000000000..40cfba3bc --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx @@ -0,0 +1,225 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { ExchangeTosStatus } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +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"; +import { EnabledBySettings } from "../EnabledBySettings.js"; + +export function ShowButtonsAcceptedTosView({ + termsAccepted, + showingTermsOfService, + children, +}: State.ShowButtonsAccepted): VNode { + const { i18n } = useTranslationContext(); + + return ( + <Fragment> + {showingTermsOfService.button.onClick !== undefined && ( + <Fragment> + <section style={{ justifyContent: "space-around", display: "flex" }}> + <LinkSuccess + upperCased + onClick={showingTermsOfService.button.onClick} + > + <i18n.Translate>Show terms of service</i18n.Translate> + </LinkSuccess> + </section> + {termsAccepted.button.onClick !== undefined && ( + <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> + )} + </Fragment> + )} + {children} + </Fragment> + ); +} + +export function ShowButtonsNonAcceptedTosView({ + showingTermsOfService, + 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" + color="success" + onClick={showingTermsOfService.button.onClick} + > + <i18n.Translate>Review exchange terms of service</i18n.Translate> + </Button> + </section> + </Fragment> + ); +} + +export function ShowTosContentView({ + termsAccepted, + showingTermsOfService, + terms, + tosLang, + tosFormat, +}: State.ShowContent): VNode { + const { i18n } = useTranslationContext(); + const ableToReviewTermsOfService = + termsAccepted.button.onClick !== undefined; + + 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} + name="lang" + value={tosLang.value} + onChange={tosLang.onChange} + /> + </Input> + + {!terms.content && ( + <section style={{ justifyContent: "space-around", display: "flex" }}> + <WarningBox> + <i18n.Translate> + The exchange replied with a empty terms of service + </i18n.Translate> + </WarningBox> + </section> + )} + {terms.content && ( + <section style={{ justifyContent: "space-around", display: "flex" }}> + {terms.content.type === "xml" && + (!terms.content.document ? ( + <WarningBox> + <i18n.Translate> + No terms of service. The exchange replied with a empty + document + </i18n.Translate> + </WarningBox> + ) : ( + <TermsOfServiceStyle> + <ExchangeXmlTos doc={terms.content.document} /> + </TermsOfServiceStyle> + ))} + {terms.content.type === "plain" && + (!terms.content.content ? ( + <WarningBox> + <i18n.Translate> + No terms of service. The exchange replied with a empty text + </i18n.Translate> + </WarningBox> + ) : ( + <div style={{ textAlign: "left" }}> + <pre>{terms.content.content}</pre> + </div> + ))} + {terms.content.type === "html" && ( + <iframe style={{ width: "100%" }} srcDoc={terms.content.html} /> + )} + {terms.content.type === "pdf" && ( + <a href={terms.content.location.toString()} download="tos.pdf"> + <i18n.Translate>Download Terms of Service</i18n.Translate> + </a> + )} + </section> + )} + {showingTermsOfService && ableToReviewTermsOfService && ( + <section style={{ justifyContent: "space-around", display: "flex" }}> + <LinkSuccess + upperCased + onClick={showingTermsOfService.button.onClick} + > + <i18n.Translate>Hide terms of service</i18n.Translate> + </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> + )} + </section> + ); +} |