diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components')
4 files changed, 73 insertions, 64 deletions
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts index a8c1558d8..b089e17a6 100644 --- a/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts +++ b/packages/taler-wallet-webextension/src/components/TermsOfService/index.ts @@ -14,6 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +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"; @@ -26,10 +27,13 @@ import { ShowButtonsNonAcceptedTosView, ShowTosContentView, } from "./views.js"; +import { ComponentChildren } from "preact"; export interface Props { exchangeUrl: string; - onChange?: (v: boolean) => void; + readOnly?: boolean; + showEvenIfaccepted?: boolean; + children: ComponentChildren; } export type State = @@ -56,13 +60,14 @@ export namespace State { } export interface ShowContent extends BaseInfo { status: "show-content"; - termsAccepted?: ToggleHandler; + termsAccepted: ToggleHandler; showingTermsOfService?: ToggleHandler; } export interface ShowButtonsAccepted extends BaseInfo { status: "show-buttons-accepted"; termsAccepted: ToggleHandler; showingTermsOfService: ToggleHandler; + 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 8b1352694..ed4715301 100644 --- a/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts +++ b/packages/taler-wallet-webextension/src/components/TermsOfService/state.ts @@ -23,10 +23,9 @@ import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { Props, State } from "./index.js"; import { buildTermsOfServiceState } from "./utils.js"; -export function useComponentState({ exchangeUrl, onChange }: Props): State { +export function useComponentState({ showEvenIfaccepted, exchangeUrl, readOnly, children }: Props): State { const api = useBackendContext(); - const readOnly = !onChange; - const [showContent, setShowContent] = useState<boolean>(readOnly); + const [showContent, setShowContent] = useState<boolean>(!!readOnly); const { i18n } = useTranslationContext(); const { pushAlertOnError } = useAlertContext(); @@ -79,8 +78,7 @@ export function useComponentState({ exchangeUrl, onChange }: Props): State { etag: undefined, }); } - // setAccepted(accepted); - if (!readOnly) onChange(accepted); //external update + terms?.retry() } const accepted = state.status === "accepted"; @@ -88,9 +86,9 @@ export function useComponentState({ exchangeUrl, onChange }: Props): State { const base = { error: undefined, showingTermsOfService: { - value: showContent, + value: showContent && (!accepted || showEvenIfaccepted), button: { - onClick: pushAlertOnError(async () => { + onClick: accepted && !showEvenIfaccepted ? undefined : pushAlertOnError(async () => { setShowContent(!showContent); }), }, @@ -99,7 +97,7 @@ export function useComponentState({ exchangeUrl, onChange }: Props): State { termsAccepted: { value: accepted, button: { - onClick: pushAlertOnError(async () => { + onClick: readOnly ? undefined : pushAlertOnError(async () => { const newValue = !accepted; //toggle await onUpdate(newValue); setShowContent(false); @@ -108,25 +106,27 @@ export function useComponentState({ exchangeUrl, onChange }: Props): State { }, }; - if (showContent) { - return { - status: "show-content", - error: undefined, - terms: state, - showingTermsOfService: readOnly ? undefined : base.showingTermsOfService, - termsAccepted: readOnly ? undefined : base.termsAccepted, - }; - } - //showing buttons if (accepted) { return { status: "show-buttons-accepted", ...base, + children, }; - } else { + } + + if ((accepted && showEvenIfaccepted) || showContent) { return { - status: "show-buttons-not-accepted", - ...base, + status: "show-content", + error: undefined, + terms: state, + showingTermsOfService: readOnly ? undefined : base.showingTermsOfService, + termsAccepted: base.termsAccepted, }; } + //showing buttons + return { + 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 f8e8b1eba..3a9f9e85d 100644 --- a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx +++ b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx @@ -20,7 +20,7 @@ import { CheckboxOutlined } from "../../components/CheckboxOutlined.js"; import { ExchangeXmlTos } from "../../components/ExchangeToS.js"; import { LinkSuccess, - TermsOfService, + TermsOfServiceStyle, WarningBox, WarningText, } from "../../components/styled/index.js"; @@ -31,35 +31,39 @@ import { State } from "./index.js"; export function ShowButtonsAcceptedTosView({ termsAccepted, showingTermsOfService, + children, }: State.ShowButtonsAccepted): VNode { const { i18n } = useTranslationContext(); - const ableToReviewTermsOfService = - showingTermsOfService.button.onClick !== undefined; return ( <Fragment> - {ableToReviewTermsOfService && ( - <section style={{ justifyContent: "space-around", display: "flex" }}> - <LinkSuccess - upperCased - onClick={showingTermsOfService.button.onClick} - > - <i18n.Translate>Show terms of service</i18n.Translate> - </LinkSuccess> - </section> + {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> )} - <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> + {children} </Fragment> ); } @@ -99,15 +103,15 @@ export function ShowButtonsNonAcceptedTosView({ </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> + <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> ); } @@ -119,10 +123,10 @@ export function ShowTosContentView({ }: State.ShowContent): VNode { const { i18n } = useTranslationContext(); const ableToReviewTermsOfService = - showingTermsOfService?.button.onClick !== undefined; + termsAccepted.button.onClick !== undefined; return ( - <Fragment> + <section> {!terms.content && ( <section style={{ justifyContent: "space-around", display: "flex" }}> <WarningBox> @@ -143,9 +147,9 @@ export function ShowTosContentView({ </i18n.Translate> </WarningBox> ) : ( - <TermsOfService> + <TermsOfServiceStyle> <ExchangeXmlTos doc={terms.content.document} /> - </TermsOfService> + </TermsOfServiceStyle> ))} {terms.content.type === "plain" && (!terms.content.content ? ( @@ -179,7 +183,7 @@ export function ShowTosContentView({ </LinkSuccess> </section> )} - {termsAccepted && terms.status !== ExchangeTosStatus.Accepted && ( + {termsAccepted.button.onClick && terms.status !== ExchangeTosStatus.Accepted && ( <section style={{ justifyContent: "space-around", display: "flex" }}> <CheckboxOutlined name="terms" @@ -193,6 +197,6 @@ export function ShowTosContentView({ /> </section> )} - </Fragment> + </section> ); } diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 47b3c8e08..2501c61c8 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -540,7 +540,7 @@ export const LinkPrimary = styled(Link)` color: black; `; -export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>` +export const ButtonPrimary = styled(ButtonVariant) <{ small?: boolean }>` font-size: ${({ small }: any) => (small ? "small" : "inherit")}; background-color: #0042b2; border-color: #0042b2; @@ -972,7 +972,7 @@ export const TermsSection = styled.a` } `; -export const TermsOfService = styled.div` +export const TermsOfServiceStyle = styled.div` display: flex; flex-direction: column; text-align: left; |