diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/InvoicePay')
4 files changed, 34 insertions, 11 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} |