fix #7579

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;

packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts

@@ -76,13 +76,20 @@ export function useComponentState({
   //   };
   // }
 
-  const { contractTerms, peerPullPaymentIncomingId } = hook.response.p2p;
+  const {
+    contractTerms,
+    peerPullPaymentIncomingId,
+    amountEffective,
+    amountRaw,
+  } = hook.response.p2p;
 
-  const amountStr: string = contractTerms?.amount;
+  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,

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,

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}

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;

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 effective = Amounts.parseOrThrow(amountEffective);
-  const summary: string | undefined = contractTerms?.summary;
+  const raw = Amounts.parseOrThrow(amountRaw);
-  const expiration: TalerProtocolTimestamp | undefined =
+  const summary: string = contractTerms.summary;
-    contractTerms?.purse_expiration;
+  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),

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,

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 &nbsp; {<Amount value={amount} />}
+            Receive &nbsp; {<Amount value={effective} />}
           </i18n.Translate>
         </Button>
       </section>