diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/TransferPickup')
4 files changed, 34 insertions, 11 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts b/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts index 5cfbe7170..c01168307 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts +++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts @@ -52,7 +52,8 @@ export namespace State { } export interface Ready extends BaseInfo { status: "ready"; - amount: AmountJson; + effective: AmountJson; + raw: AmountJson; summary: string | undefined; expiration: AbsoluteTime | undefined; error: undefined; diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts b/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts index 0a781746f..986354bad 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts +++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts @@ -62,12 +62,17 @@ export function useComponentState({ // }; // } - const { contractTerms, peerPushPaymentIncomingId } = hook.response; + const { + contractTerms, + peerPushPaymentIncomingId, + amountEffective, + amountRaw, + } = hook.response; - const amount: string = contractTerms?.amount; - const summary: string | undefined = contractTerms?.summary; - const expiration: TalerProtocolTimestamp | undefined = - contractTerms?.purse_expiration; + const effective = Amounts.parseOrThrow(amountEffective); + const raw = Amounts.parseOrThrow(amountRaw); + const summary: string = contractTerms.summary; + const expiration: TalerProtocolTimestamp = contractTerms.purse_expiration; async function accept(): Promise<void> { const resp = await api.wallet.call( @@ -80,7 +85,8 @@ export function useComponentState({ } return { status: "ready", - amount: Amounts.parseOrThrow(amount), + effective, + raw, error: undefined, accept: { onClick: pushAlertOnError(accept), diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx b/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx index 48f006127..ed8bad2f2 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx @@ -27,7 +27,12 @@ export default { }; export const Ready = tests.createExample(ReadyView, { - amount: { + effective: { + currency: "ARS", + value: 1, + fraction: 0, + }, + raw: { currency: "ARS", value: 1, fraction: 0, diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx index 25f5cdf52..b7ba3ea26 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx @@ -23,13 +23,15 @@ 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 { getAmountWithFee, TransferDetails } from "../../wallet/Transaction.js"; import { State } from "./index.js"; export function ReadyView({ accept, summary, expiration, - amount, + effective, + raw, }: State.Ready): VNode { const { i18n } = useTranslationContext(); return ( @@ -40,7 +42,16 @@ export function ReadyView({ </SubTitle> <section style={{ textAlign: "left" }}> <Part title={i18n.str`Subject`} text={<div>{summary}</div>} /> - <Part title={i18n.str`Amount`} text={<Amount value={amount} />} /> + <Part title={i18n.str`Amount`} text={<Amount value={raw} />} /> + <Part + title={i18n.str`Details`} + text={ + <TransferDetails + amount={getAmountWithFee(effective, raw, "credit")} + /> + } + /> + <Part title={i18n.str`Valid until`} text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />} @@ -50,7 +61,7 @@ export function ReadyView({ <section> <Button variant="contained" color="success" onClick={accept.onClick}> <i18n.Translate> - Receive {<Amount value={amount} />} + Receive {<Amount value={effective} />} </i18n.Translate> </Button> </section> |