diff options
author | Sebastian <sebasjm@gmail.com> | 2022-05-03 00:16:03 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-05-03 00:16:03 -0300 |
commit | dc842eab6b7a3b2e891ee89a325ec73e04d3be95 (patch) | |
tree | 5df20315b9f50c88598fe4084d739b8610f46bac /packages/taler-wallet-webextension/src/cta/Deposit.tsx | |
parent | 939729004a8f5fecde19e679a0672843c496662f (diff) | |
download | wallet-core-dc842eab6b7a3b2e891ee89a325ec73e04d3be95.tar.xz |
deposit from payto
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Deposit.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/cta/Deposit.tsx | 158 |
1 files changed, 144 insertions, 14 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/Deposit.tsx b/packages/taler-wallet-webextension/src/cta/Deposit.tsx index 529da11ba..2fc7cbc41 100644 --- a/packages/taler-wallet-webextension/src/cta/Deposit.tsx +++ b/packages/taler-wallet-webextension/src/cta/Deposit.tsx @@ -24,48 +24,120 @@ * Imports. */ +import { + AmountJson, + Amounts, + AmountString, + CreateDepositGroupResponse, +} from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { Amount } from "../components/Amount.js"; import { Loading } from "../components/Loading.js"; import { LoadingError } from "../components/LoadingError.js"; import { LogoHeader } from "../components/LogoHeader.js"; -import { SubTitle, WalletAction } from "../components/styled/index.js"; +import { Part } from "../components/Part.js"; +import { + ButtonSuccess, + SubTitle, + WalletAction, +} from "../components/styled/index.js"; import { useTranslationContext } from "../context/translation.js"; -import { HookError } from "../hooks/useAsyncAsHook.js"; +import { HookError, useAsyncAsHook } from "../hooks/useAsyncAsHook.js"; +import { ButtonHandler } from "../mui/handlers.js"; +import * as wxApi from "../wxApi.js"; interface Props { talerDepositUri?: string; + amount: AmountString; goBack: () => void; } -type State = Loading | Ready; +type State = Loading | Ready | Completed; interface Loading { status: "loading"; hook: HookError | undefined; } interface Ready { status: "ready"; + hook: undefined; + fee: AmountJson; + cost: AmountJson; + effective: AmountJson; + confirm: ButtonHandler; } +interface Completed { + status: "completed"; + hook: undefined; +} + +export function useComponentState( + talerDepositUri: string | undefined, + amountStr: AmountString | undefined, + api: typeof wxApi, +): State { + const [result, setResult] = useState<CreateDepositGroupResponse | undefined>( + undefined, + ); + + const info = useAsyncAsHook(async () => { + if (!talerDepositUri) throw Error("ERROR_NO-URI-FOR-DEPOSIT"); + if (!amountStr) throw Error("ERROR_NO-AMOUNT-FOR-DEPOSIT"); + const amount = Amounts.parse(amountStr); + if (!amount) throw Error("ERROR_INVALID-AMOUNT-FOR-DEPOSIT"); + const deposit = await api.prepareDeposit( + talerDepositUri, + Amounts.stringify(amount), + ); + return { deposit, uri: talerDepositUri, amount }; + }); + + if (!info || info.hasError) { + return { + status: "loading", + hook: info, + }; + } + + const { deposit, uri, amount } = info.response; + async function doDeposit(): Promise<void> { + const resp = await api.createDepositGroup(uri, Amounts.stringify(amount)); + setResult(resp); + } + + if (result !== undefined) { + return { + status: "completed", + hook: undefined, + }; + } -function useComponentState(uri: string | undefined): State { return { - status: "loading", + status: "ready", hook: undefined, + confirm: { + onClick: doDeposit, + }, + fee: Amounts.sub(deposit.totalDepositCost, deposit.effectiveDepositAmount) + .amount, + cost: deposit.totalDepositCost, + effective: deposit.effectiveDepositAmount, }; } -export function DepositPage({ talerDepositUri, goBack }: Props): VNode { +export function DepositPage({ talerDepositUri, amount, goBack }: Props): VNode { const { i18n } = useTranslationContext(); - const state = useComponentState(talerDepositUri); - if (state.status === "loading") { - if (!state.hook) return <Loading />; + const state = useComponentState(talerDepositUri, amount, wxApi); + + if (!talerDepositUri) { return ( - <LoadingError - title={<i18n.Translate>Could not load pay status</i18n.Translate>} - error={state.hook} - /> + <span> + <i18n.Translate>missing taler deposit uri</i18n.Translate> + </span> ); } + return <View state={state} />; } @@ -75,13 +147,71 @@ export interface ViewProps { export function View({ state }: ViewProps): VNode { const { i18n } = useTranslationContext(); + if (state.status === "loading") { + if (!state.hook) return <Loading />; + return ( + <LoadingError + title={<i18n.Translate>Could not load deposit status</i18n.Translate>} + error={state.hook} + /> + ); + } + + if (state.status === "completed") { + return ( + <WalletAction> + <LogoHeader /> + + <SubTitle> + <i18n.Translate>Digital cash deposit</i18n.Translate> + </SubTitle> + <section> + <p> + <i18n.Translate>deposit completed</i18n.Translate> + </p> + </section> + </WalletAction> + ); + } + return ( <WalletAction> <LogoHeader /> <SubTitle> - <i18n.Translate>Digital cash refund</i18n.Translate> + <i18n.Translate>Digital cash deposit</i18n.Translate> </SubTitle> + <section> + {Amounts.isNonZero(state.cost) && ( + <Part + big + title={<i18n.Translate>Cost</i18n.Translate>} + text={<Amount value={state.cost} />} + kind="negative" + /> + )} + {Amounts.isNonZero(state.fee) && ( + <Part + big + title={<i18n.Translate>Fee</i18n.Translate>} + text={<Amount value={state.fee} />} + kind="negative" + /> + )} + <Part + big + title={<i18n.Translate>To be received</i18n.Translate>} + text={<Amount value={state.effective} />} + kind="positive" + /> + </section> + <section> + <ButtonSuccess upperCased onClick={state.confirm.onClick}> + <i18n.Translate> + Deposit {<Amount value={state.effective} />} + </i18n.Translate> + </ButtonSuccess> + </section> </WalletAction> ); } |