diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/TransferPickup')
4 files changed, 41 insertions, 6 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts b/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts index 603200747..08428851e 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts +++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util"; +import { AbsoluteTime, AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util"; import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; import { ButtonHandler } from "../../mui/handlers.js"; @@ -25,6 +25,7 @@ import { LoadingUriView, ReadyView } from "./views.js"; export interface Props { talerPayPushUri: string; + onClose: () => Promise<void>; } export type State = @@ -46,10 +47,13 @@ export namespace State { export interface BaseInfo { error: undefined; + cancel: ButtonHandler; } export interface Ready extends BaseInfo { status: "ready"; amount: AmountJson, + summary: string | undefined; + expiration: AbsoluteTime | undefined; error: undefined; accept: ButtonHandler; operationError?: TalerErrorDetail; diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts b/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts index a16389709..ce4c7236d 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts +++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts @@ -14,7 +14,7 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { Amounts, TalerErrorDetail } from "@gnu-taler/taler-util"; +import { AbsoluteTime, Amounts, TalerErrorDetail, TalerProtocolTimestamp } from "@gnu-taler/taler-util"; import { TalerError } from "@gnu-taler/taler-wallet-core"; import { useState } from "preact/hooks"; import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js"; @@ -22,7 +22,7 @@ import * as wxApi from "../../wxApi.js"; import { Props, State } from "./index.js"; export function useComponentState( - { talerPayPushUri }: Props, + { talerPayPushUri, onClose }: Props, api: typeof wxApi, ): State { const hook = useAsyncAsHook(async () => { @@ -45,13 +45,18 @@ export function useComponentState( }; } - const { amount, peerPushPaymentIncomingId } = hook.response + const { amount: purseAmount, contractTerms, peerPushPaymentIncomingId } = hook.response + + const amount: string = contractTerms?.amount + const summary: string | undefined = contractTerms?.summary + const expiration: TalerProtocolTimestamp | undefined = contractTerms?.purse_expiration async function accept(): Promise<void> { try { const resp = await api.acceptPeerPushPayment({ peerPushPaymentIncomingId }) + await onClose() } catch (e) { if (e instanceof TalerError) { setOperationError(e.errorDetail) @@ -67,6 +72,11 @@ export function useComponentState( accept: { onClick: accept }, + summary, + expiration: expiration ? AbsoluteTime.fromTimestamp(expiration) : undefined, + cancel: { + onClick: onClose + }, operationError } } diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx b/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx index 7a3ccb60d..425d7de36 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx @@ -33,4 +33,5 @@ export const Ready = createExample(ReadyView, { fraction: 0, }, accept: {}, + cancel: {}, }); diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx index 22ef8c776..c43b0ff52 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx @@ -20,7 +20,8 @@ import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js"; import { LoadingError } from "../../components/LoadingError.js"; import { LogoHeader } from "../../components/LogoHeader.js"; import { Part } from "../../components/Part.js"; -import { SubTitle, WalletAction } from "../../components/styled/index.js"; +import { Link, SubTitle, WalletAction } from "../../components/styled/index.js"; +import { Time } from "../../components/Time.js"; import { useTranslationContext } from "../../context/translation.js"; import { Button } from "../../mui/Button.js"; import { State } from "./index.js"; @@ -38,7 +39,10 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { export function ReadyView({ accept, + summary, + expiration, amount, + cancel, operationError, }: State.Ready): VNode { const { i18n } = useTranslationContext(); @@ -60,15 +64,31 @@ export function ReadyView({ )} <section style={{ textAlign: "left" }}> <Part + title={<i18n.Translate>Subject</i18n.Translate>} + text={<div>{summary}</div>} + /> + <Part title={<i18n.Translate>Amount</i18n.Translate>} text={<Amount value={amount} />} /> + <Part + title={<i18n.Translate>Valid until</i18n.Translate>} + text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />} + kind="neutral" + /> </section> <section> <Button variant="contained" color="success" onClick={accept.onClick}> - <i18n.Translate>Pickup</i18n.Translate> + <i18n.Translate> + Receive {<Amount value={amount} />} + </i18n.Translate> </Button> </section> + <section> + <Link upperCased onClick={cancel.onClick}> + <i18n.Translate>Cancel</i18n.Translate> + </Link> + </section> </WalletAction> ); } |