diff options
author | Sebastian <sebasjm@gmail.com> | 2022-04-27 14:33:52 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-04-27 14:33:52 -0300 |
commit | 451dd746daeb57cfe0a601d1bf1f2b5506a5fc3c (patch) | |
tree | 975b98de7c3d28f62e05396a01129c69efbeb66b /packages/taler-wallet-webextension/src/cta | |
parent | 0b8e0a0806947472181b13a3c0dda9947a326b28 (diff) | |
download | wallet-core-451dd746daeb57cfe0a601d1bf1f2b5506a5fc3c.tar.xz |
toggle permission
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta')
-rw-r--r-- | packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx | 7 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/cta/Withdraw.tsx | 113 |
2 files changed, 84 insertions, 36 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx index f2bc14f76..b77e98a10 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx @@ -229,3 +229,10 @@ export const EditExchangeModified = createExample(TestedComponent, { tosProps: normalTosState, }, }); + +export const CompletedWithoutBankURL = createExample(TestedComponent, { + state: { + status: "completed", + hook: undefined, + }, +}); diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx index 3346512f7..cd0ba2cc3 100644 --- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx +++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx @@ -37,6 +37,7 @@ import { ButtonWarning, LinkSuccess, SubTitle, + SuccessBox, WalletAction, } from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; @@ -53,7 +54,12 @@ interface Props { talerWithdrawUri?: string; } -type State = LoadingUri | LoadingExchange | LoadingInfoError | Success; +type State = + | LoadingUri + | LoadingExchange + | LoadingInfoError + | Success + | Completed; interface LoadingUri { status: "loading-uri"; @@ -68,6 +74,11 @@ interface LoadingInfoError { hook: HookError | undefined; } +type Completed = { + status: "completed"; + hook: undefined; +}; + type Success = { status: "success"; hook: undefined; @@ -185,6 +196,7 @@ export function useComponentState( undefined, ); const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false); + const [withdrawCompleted, setWithdrawCompleted] = useState<boolean>(false); const [showExchangeSelection, setShowExchangeSelection] = useState(false); const [nextExchange, setNextExchange] = useState<string | undefined>(); @@ -220,6 +232,7 @@ export function useComponentState( if (res.confirmTransferUrl) { document.location.href = res.confirmTransferUrl; } + setWithdrawCompleted(true); } catch (e) { if (e instanceof TalerError) { setWithdrawError(e); @@ -245,6 +258,12 @@ export function useComponentState( hook: undefined, }; } + if (withdrawCompleted) { + return { + status: "completed", + hook: undefined, + }; + } const exchangeHandler: SelectFieldHandler = { onChange: async (e) => setNextExchange(e), @@ -332,8 +351,64 @@ export function useComponentState( }; } -export function View({ state }: { state: Success }): VNode { +export function View({ state }: { state: State }): VNode { const { i18n } = useTranslationContext(); + if (state.status === "loading-uri") { + if (!state.hook) return <Loading />; + + return ( + <LoadingError + title={ + <i18n.Translate>Could not get the info from the URI</i18n.Translate> + } + error={state.hook} + /> + ); + } + if (state.status === "loading-exchange") { + if (!state.hook) return <Loading />; + + return ( + <LoadingError + title={<i18n.Translate>Could not get exchange</i18n.Translate>} + error={state.hook} + /> + ); + } + if (state.status === "loading-info") { + if (!state.hook) return <Loading />; + return ( + <LoadingError + title={ + <i18n.Translate>Could not get info of withdrawal</i18n.Translate> + } + error={state.hook} + /> + ); + } + + if (state.status === "completed") { + return ( + <WalletAction> + <LogoHeader /> + <SubTitle> + <i18n.Translate>Digital cash withdrawal</i18n.Translate> + </SubTitle> + <SuccessBox> + <h3> + <i18n.Translate>Withdrawal in process...</i18n.Translate> + </h3> + <p> + <i18n.Translate> + You can close the page now. Check your bank if the transaction + need a confirmation step to be completed + </i18n.Translate> + </p> + </SuccessBox> + </WalletAction> + ); + } + return ( <WalletAction> <LogoHeader /> @@ -460,39 +535,5 @@ export function WithdrawPage({ talerWithdrawUri }: Props): VNode { return <Loading />; } - if (state.status === "loading-uri") { - if (!state.hook) return <Loading />; - - return ( - <LoadingError - title={ - <i18n.Translate>Could not get the info from the URI</i18n.Translate> - } - error={state.hook} - /> - ); - } - if (state.status === "loading-exchange") { - if (!state.hook) return <Loading />; - - return ( - <LoadingError - title={<i18n.Translate>Could not get exchange</i18n.Translate>} - error={state.hook} - /> - ); - } - if (state.status === "loading-info") { - if (!state.hook) return <Loading />; - return ( - <LoadingError - title={ - <i18n.Translate>Could not get info of withdrawal</i18n.Translate> - } - error={state.hook} - /> - ); - } - return <View state={state} />; } |