diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Withdraw')
4 files changed, 35 insertions, 68 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts index 25d4e44e5..7dfc7c141 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts @@ -27,7 +27,9 @@ import { import { ExchangeSelectionPage } from "../../wallet/ExchangeSelection/index.js"; import { NoExchangesView } from "../../wallet/ExchangeSelection/views.js"; -import { LoadingInfoView, LoadingUriView, SuccessView } from "./views.js"; +import { SuccessView } from "./views.js"; +import { ErrorAlert } from "../../context/alert.js"; +import { ErrorAlertView } from "../../components/CurrentAlerts.js"; export interface PropsFromURI { talerWithdrawUri: string | undefined; @@ -44,7 +46,6 @@ export interface PropsFromParams { export type State = | State.Loading | State.LoadingUriError - | State.LoadingInfoError | SelectExchangeState.NoExchange | SelectExchangeState.Selecting | State.Success; @@ -55,12 +56,8 @@ export namespace State { error: undefined; } export interface LoadingUriError { - status: "uri-error"; - error: HookError; - } - export interface LoadingInfoError { - status: "amount-error"; - error: HookError; + status: "error"; + error: ErrorAlert; } export type Success = { @@ -86,8 +83,7 @@ export namespace State { const viewMapping: StateViewMap<State> = { loading: Loading, - "uri-error": LoadingUriView, - "amount-error": LoadingInfoView, + error: ErrorAlertView, "no-exchange": NoExchangesView, "selecting-exchange": ExchangeSelectionPage, success: SuccessView, diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts index d1853442b..18c467aae 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts @@ -23,7 +23,9 @@ import { } from "@gnu-taler/taler-util"; import { TalerError, WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; +import { alertFromError } from "../../context/alert.js"; import { useBackendContext } from "../../context/backend.js"; +import { useTranslationContext } from "../../context/translation.js"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; import { useSelectedExchange } from "../../hooks/useSelectedExchange.js"; import { RecursiveState } from "../../utils/index.js"; @@ -35,6 +37,7 @@ export function useComponentStateFromParams({ onSuccess, }: PropsFromParams): RecursiveState<State> { const api = useBackendContext(); + const { i18n } = useTranslationContext(); const uriInfoHook = useAsyncAsHook(async () => { const exchanges = await api.wallet.call( WalletApiOperation.ListExchanges, @@ -47,8 +50,11 @@ export function useComponentStateFromParams({ if (uriInfoHook.hasError) { return { - status: "uri-error", - error: uriInfoHook, + status: "error", + error: alertFromError( + i18n.str`Could not load the list of exchanges`, + uriInfoHook, + ), }; } @@ -95,6 +101,7 @@ export function useComponentStateFromURI({ onSuccess, }: PropsFromURI): RecursiveState<State> { const api = useBackendContext(); + const { i18n } = useTranslationContext(); /** * Ask the wallet about the withdraw URI */ @@ -123,8 +130,11 @@ export function useComponentStateFromURI({ if (uriInfoHook.hasError) { return { - status: "uri-error", - error: uriInfoHook, + status: "error", + error: alertFromError( + i18n.str`Could not load info from URI`, + uriInfoHook, + ), }; } @@ -194,6 +204,7 @@ function exchangeSelectionState( } return () => { + const { i18n } = useTranslationContext(); const [ageRestricted, setAgeRestricted] = useState(0); const currentExchange = selectedExchange.selected; const tosNeedToBeAccepted = @@ -255,8 +266,11 @@ function exchangeSelectionState( } if (amountHook.hasError) { return { - status: "amount-error", - error: amountHook, + status: "error", + error: alertFromError( + i18n.str`Could not load the withdrawal details`, + amountHook, + ), }; } if (!amountHook.response) { diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts index 3277ac18d..2caa50dca 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts @@ -84,11 +84,11 @@ describe("Withdraw CTA states", () => { expect(status).equals("loading"); }, ({ status, error }) => { - if (status != "uri-error") expect.fail(); + if (status != "error") expect.fail(); if (!error) expect.fail(); - if (!error.hasError) expect.fail(); - if (error.operational) expect.fail(); - expect(error.message).eq("ERROR_NO-URI-FOR-WITHDRAWAL"); + // if (!error.hasError) expect.fail(); + // if (error.operational) expect.fail(); + expect(error.cause?.message).eq("ERROR_NO-URI-FOR-WITHDRAWAL"); }, ], TestingContext, diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx index 9dbe24b7e..cf87b35bb 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx @@ -19,16 +19,10 @@ import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Amount } from "../../components/Amount.js"; import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js"; -import { LoadingError } from "../../components/LoadingError.js"; import { Part } from "../../components/Part.js"; import { QR } from "../../components/QR.js"; import { SelectList } from "../../components/SelectList.js"; -import { - Input, - Link, - LinkSuccess, - SvgIcon, -} from "../../components/styled/index.js"; +import { Input, LinkSuccess, SvgIcon } from "../../components/styled/index.js"; import { TermsOfService } from "../../components/TermsOfService/index.js"; import { useTranslationContext } from "../../context/translation.js"; import { Button } from "../../mui/Button.js"; @@ -36,30 +30,6 @@ import editIcon from "../../svg/edit_24px.svg"; import { ExchangeDetails, WithdrawDetails } from "../../wallet/Transaction.js"; import { State } from "./index.js"; -export function LoadingUriView({ error }: State.LoadingUriError): VNode { - const { i18n } = useTranslationContext(); - - return ( - <LoadingError - title={ - <i18n.Translate>Could not get the info from the URI</i18n.Translate> - } - error={error} - /> - ); -} - -export function LoadingInfoView({ error }: State.LoadingInfoError): VNode { - const { i18n } = useTranslationContext(); - - return ( - <LoadingError - title={<i18n.Translate>Could not get info of withdrawal</i18n.Translate>} - error={error} - /> - ); -} - export function SuccessView(state: State.Success): VNode { const { i18n } = useTranslationContext(); const currentTosVersionIsAccepted = @@ -68,11 +38,7 @@ export function SuccessView(state: State.Success): VNode { <Fragment> {state.doWithdrawal.error && ( <ErrorTalerOperation - title={ - <i18n.Translate> - Could not finish the withdrawal operation - </i18n.Translate> - } + title={i18n.str`Could not finish the withdrawal operation`} error={state.doWithdrawal.error.errorDetail} /> )} @@ -103,7 +69,7 @@ export function SuccessView(state: State.Success): VNode { big /> <Part - title={<i18n.Translate>Details</i18n.Translate>} + title={i18n.str`Details`} text={ <WithdrawDetails amount={{ @@ -116,7 +82,7 @@ export function SuccessView(state: State.Success): VNode { {state.ageRestriction && ( <Input> <SelectList - label={<i18n.Translate>Age restriction</i18n.Translate>} + label={i18n.str`Age restriction`} list={state.ageRestriction.list} name="age" value={state.ageRestriction.value} @@ -148,11 +114,6 @@ export function SuccessView(state: State.Success): VNode { {state.talerWithdrawUri ? ( <WithdrawWithMobile talerWithdrawUri={state.talerWithdrawUri} /> ) : undefined} - <section> - <Link upperCased onClick={state.cancel}> - <i18n.Translate>Cancel</i18n.Translate> - </Link> - </section> </Fragment> ); } @@ -168,11 +129,7 @@ function WithdrawWithMobile({ return ( <section> <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}> - {!showQR ? ( - <i18n.Translate>Withdraw to a mobile phone</i18n.Translate> - ) : ( - <i18n.Translate>Hide QR</i18n.Translate> - )} + {!showQR ? i18n.str`Withdraw to a mobile phone` : i18n.str`Hide QR`} </LinkSuccess> {showQR && ( <div> |