diff options
8 files changed, 68 insertions, 22 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts index c8a7eed65..f0cd63fbe 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts @@ -57,7 +57,8 @@ export namespace State { error: undefined; uri: string; cancel: ButtonHandler; - amount: AmountJson; + effective: AmountJson; + raw: AmountJson; goToWalletManualWithdraw: (currency: string) => Promise<void>; summary: string | undefined; expiration: AbsoluteTime | undefined; diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts index 5ffc78ece..7d8089814 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts @@ -76,13 +76,20 @@ export function useComponentState({ // }; // } - const { contractTerms, peerPullPaymentIncomingId } = hook.response.p2p; - - const amountStr: string = contractTerms?.amount; + const { + contractTerms, + peerPullPaymentIncomingId, + amountEffective, + amountRaw, + } = hook.response.p2p; + + const amountStr: string = contractTerms.amount; const amount = Amounts.parseOrThrow(amountStr); - const summary: string | undefined = contractTerms?.summary; + const effective = Amounts.parseOrThrow(amountEffective); + const raw = Amounts.parseOrThrow(amountRaw); + const summary: string | undefined = contractTerms.summary; const expiration: TalerProtocolTimestamp | undefined = - contractTerms?.purse_expiration; + contractTerms.purse_expiration; const foundBalance = hook.response.balance.balances.find( (b) => Amounts.parseOrThrow(b.available).currency === amount.currency, @@ -112,7 +119,8 @@ export function useComponentState({ cancel: { onClick: pushAlertOnError(onClose), }, - amount, + effective, + raw, goToWalletManualWithdraw, summary, expiration: expiration ? AbsoluteTime.fromTimestamp(expiration) : undefined, diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx index 1dada5a91..2ba0e85e0 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx @@ -28,7 +28,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/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx index f0e23b49b..471685bf1 100644 --- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx @@ -22,13 +22,14 @@ import { PaymentButtons } from "../../components/PaymentButtons.js"; import { SubTitle, WalletAction } from "../../components/styled/index.js"; import { Time } from "../../components/Time.js"; import { useTranslationContext } from "../../context/translation.js"; +import { getAmountWithFee, InvoiceDetails } from "../../wallet/Transaction.js"; import { State } from "./index.js"; export function ReadyView( state: State.Ready | State.NoBalanceForCurrency | State.NoEnoughBalance, ): VNode { const { i18n } = useTranslationContext(); - const { summary, amount, expiration, uri, status, payStatus } = state; + const { summary, effective, raw, expiration, uri, status, payStatus } = state; return ( <WalletAction> <LogoHeader /> @@ -37,7 +38,15 @@ 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={effective} />} /> + <Part + title={i18n.str`Details`} + text={ + <InvoiceDetails + amount={getAmountWithFee(effective, raw, "debit")} + /> + } + /> <Part title={i18n.str`Valid until`} text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />} @@ -45,7 +54,7 @@ export function ReadyView( /> </section> <PaymentButtons - amount={amount} + amount={raw} payStatus={payStatus} uri={uri} payHandler={status === "ready" ? state.accept : undefined} 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> |