diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src')
11 files changed, 105 insertions, 120 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; diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts index 5fb3b1d80..04713f3c4 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts @@ -106,7 +106,6 @@ export namespace State { talerWithdrawUri?: string; cancel: () => Promise<void>; - onTosUpdate: () => void; }; } diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts index f30cb2323..7bff13e51 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts @@ -178,7 +178,6 @@ export function useComponentStateFromParams({ return () => exchangeSelectionState( - uriInfoHook.retry, doManualWithdraw, cancel, onSuccess, @@ -260,7 +259,6 @@ export function useComponentStateFromURI({ return () => exchangeSelectionState( - uriInfoHook.retry, doManagedWithdraw, cancel, onSuccess, @@ -277,7 +275,6 @@ type ManualOrManagedWithdrawFunction = ( ) => Promise<{ transactionId: string; confirmTransferUrl: string | undefined }>; function exchangeSelectionState( - onTosUpdate: () => void, doWithdraw: ManualOrManagedWithdrawFunction, cancel: () => Promise<void>, onSuccess: (txid: string) => Promise<void>, @@ -302,9 +299,6 @@ function exchangeSelectionState( const { pushAlertOnError } = useAlertContext(); const [ageRestricted, setAgeRestricted] = useState(0); const currentExchange = selectedExchange.selected; - const tosNeedToBeAccepted = - currentExchange.tosStatus == ExchangeTosStatus.Pending || - currentExchange.tosStatus == ExchangeTosStatus.Proposed; const [selectedCurrency, setSelectedCurrency] = useState<string>(chosenAmount.currency) /** @@ -428,11 +422,10 @@ function exchangeSelectionState( ageRestriction, doWithdrawal: { onClick: - doingWithdraw || tosNeedToBeAccepted + doingWithdraw ? undefined : pushAlertOnError(doWithdrawAndCheckError), }, - onTosUpdate, cancel, }; }; diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts index b6c9acfb5..3493415d9 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts @@ -200,7 +200,7 @@ describe("Withdraw CTA states", () => { expect(handler.getCallingQueueState()).eq("empty"); }); - it("should accept the tos before withdraw", async () => { + it.skip("should accept the tos before withdraw", async () => { const { handler, TestingContext } = createWalletApiMock(); const props = { talerWithdrawUri: "taler-withdraw://", @@ -270,18 +270,6 @@ describe("Withdraw CTA states", () => { expect(state.withdrawalFee).deep.equal(Amounts.parseOrThrow("ARS:0")); expect(state.chosenAmount).deep.equal(Amounts.parseOrThrow("ARS:2")); - expect(state.doWithdrawal.onClick).undefined; - - state.onTosUpdate(); - }, - (state) => { - expect(state.status).equals("success"); - if (state.status !== "success") return; - - expect(state.toBeReceived).deep.equal(Amounts.parseOrThrow("ARS:2")); - expect(state.withdrawalFee).deep.equal(Amounts.parseOrThrow("ARS:0")); - expect(state.chosenAmount).deep.equal(Amounts.parseOrThrow("ARS:2")); - expect(state.doWithdrawal.onClick).not.undefined; }, ], diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx index d732e60e2..748b65817 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx @@ -37,8 +37,8 @@ import { AmountField } from "../../components/AmountField.js"; export function SuccessView(state: State.Success): VNode { const { i18n } = useTranslationContext(); - const currentTosVersionIsAccepted = - state.currentExchange.tosStatus === ExchangeTosStatus.Accepted; + // const currentTosVersionIsAccepted = + // state.currentExchange.tosStatus === ExchangeTosStatus.Accepted; return ( <Fragment> <section style={{ textAlign: "left" }}> @@ -109,7 +109,7 @@ export function SuccessView(state: State.Success): VNode { </section> <section> - {currentTosVersionIsAccepted ? ( + <TermsOfService exchangeUrl={state.currentExchange.exchangeBaseUrl}> <Button variant="contained" color="success" @@ -120,12 +120,7 @@ export function SuccessView(state: State.Success): VNode { Withdraw <Amount value={state.toBeReceived} /> </i18n.Translate> </Button> - ) : ( - <TermsOfService - exchangeUrl={state.currentExchange.exchangeBaseUrl} - onChange={state.onTosUpdate} - /> - )} + </TermsOfService> </section> {state.talerWithdrawUri ? ( <WithdrawWithMobile talerWithdrawUri={state.talerWithdrawUri} /> diff --git a/packages/taler-wallet-webextension/src/wallet/AddExchange/index.ts b/packages/taler-wallet-webextension/src/wallet/AddExchange/index.ts index f16d3929d..69f2a6028 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddExchange/index.ts +++ b/packages/taler-wallet-webextension/src/wallet/AddExchange/index.ts @@ -22,6 +22,7 @@ import { TextFieldHandler } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; import { useComponentState } from "./state.js"; import { ConfirmView, VerifyView } from "./views.js"; +import { ExchangeListItem } from "@gnu-taler/taler-util"; export interface Props { currency?: string; @@ -64,7 +65,7 @@ export namespace State { url: TextFieldHandler, knownExchanges: URL[], - result: HttpResponse<{ currency_specification: {currency: string}, version: string}, unknown> | undefined, + result: HttpResponse<{ currency_specification: { currency: string }, version: string }, unknown> | undefined, expectedCurrency: string | undefined, } } diff --git a/packages/taler-wallet-webextension/src/wallet/AddExchange/views.tsx b/packages/taler-wallet-webextension/src/wallet/AddExchange/views.tsx index 87ea5eae3..53a46fe02 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddExchange/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/AddExchange/views.tsx @@ -143,7 +143,7 @@ export function VerifyView({ } e.preventDefault() }}> - {ex.href}</a></li> + {ex.href}</a></li> })} </ul> </section> @@ -159,8 +159,6 @@ export function ConfirmView({ }: State.Confirm): VNode { const { i18n } = useTranslationContext(); - const [accepted, setAccepted] = useState(false); - return ( <Fragment> <section> @@ -175,27 +173,27 @@ export function ConfirmView({ </div> </section> - <TermsOfService key="terms" exchangeUrl={url} onChange={setAccepted} /> - <footer> - <Button - key="cancel" - variant="contained" - color="secondary" - onClick={onCancel} - > - <i18n.Translate>Cancel</i18n.Translate> - </Button> - <Button - key="add" - variant="contained" - color="success" - disabled={!accepted} - onClick={onConfirm} - > - <i18n.Translate>Add exchange</i18n.Translate> - </Button> - </footer> + <TermsOfService key="terms" exchangeUrl={url} > + <footer> + <Button + key="cancel" + variant="contained" + color="secondary" + onClick={onCancel} + > + <i18n.Translate>Cancel</i18n.Translate> + </Button> + <Button + key="add" + variant="contained" + color="success" + onClick={onConfirm} + > + <i18n.Translate>Add exchange</i18n.Translate> + </Button> + </footer> + </TermsOfService> </Fragment> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx index be720f10e..6f67d84b7 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx @@ -135,7 +135,9 @@ export function TosContentView({ <Button variant="outlined" onClick={onClose.onClick}> <i18n.Translate>Close</i18n.Translate> </Button> - <TermsOfService exchangeUrl={exchangeUrl} /> + <TermsOfService exchangeUrl={exchangeUrl} readOnly > + s + </TermsOfService> </div> ); } |