diff options
author | Sebastian <sebasjm@gmail.com> | 2022-08-31 11:46:39 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-08-31 11:46:39 -0300 |
commit | e759684fd0658b4a3ba241744424ceda11bd500b (patch) | |
tree | 31e3e8998aada76bf49df1dd9988021fb67bb856 /packages/taler-wallet-webextension/src/cta/InvoicePay | |
parent | d84424202dca22fff22cb1d304286f627642187b (diff) | |
download | wallet-core-e759684fd0658b4a3ba241744424ceda11bd500b.tar.xz |
invoice and transfer details
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/InvoicePay')
4 files changed, 41 insertions, 16 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts index 8d1612c7a..2521ee69c 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/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 { talerPayPullUri: 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/InvoicePay/state.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts index 53db117f9..27be1e424 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/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( - { talerPayPullUri }: Props, + { talerPayPullUri, onClose }: Props, api: typeof wxApi, ): State { const hook = useAsyncAsHook(async () => { @@ -45,13 +45,18 @@ export function useComponentState( }; } - const { amount, peerPullPaymentIncomingId } = hook.response + const { amount: purseAmount, contractTerms, peerPullPaymentIncomingId } = 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.acceptPeerPullPayment({ peerPullPaymentIncomingId }) + await onClose() } catch (e) { if (e instanceof TalerError) { setOperationError(e.errorDetail) @@ -69,6 +74,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/InvoicePay/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx index 6adaa5c22..81b79a208 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx @@ -33,4 +33,5 @@ export const Ready = createExample(ReadyView, { fraction: 0, }, accept: {}, + cancel: {}, }); diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx index 2960c3168..71bdb20b8 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx @@ -20,19 +20,10 @@ 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 { QR } from "../../components/QR.js"; -import { - Link, - SubTitle, - SvgIcon, - 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 { Grid } from "../../mui/Grid.js"; -import { TextField } from "../../mui/TextField.js"; -import editIcon from "../../svg/edit_24px.svg"; -import { ExchangeDetails, InvoiceDetails } from "../../wallet/Transaction.js"; import { State } from "./index.js"; export function LoadingUriView({ error }: State.LoadingUriError): VNode { @@ -48,7 +39,10 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { export function ReadyView({ operationError, + cancel, accept, + expiration, + summary, amount, }: State.Ready): VNode { const { i18n } = useTranslationContext(); @@ -71,15 +65,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>Pay</i18n.Translate> + <i18n.Translate> + Pay {<Amount value={amount} />} + </i18n.Translate> </Button> </section> + <section> + <Link upperCased onClick={cancel.onClick}> + <i18n.Translate>Cancel</i18n.Translate> + </Link> + </section> </WalletAction> ); } |