From ff9c67c72d8939560f9b5619ae2210841acdf01c Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 20 Feb 2023 11:32:34 -0300
Subject: fix #7579

---
 .../src/cta/TransferPickup/index.ts                    |  3 ++-
 .../src/cta/TransferPickup/state.ts                    | 18 ++++++++++++------
 .../src/cta/TransferPickup/stories.tsx                 |  7 ++++++-
 .../src/cta/TransferPickup/views.tsx                   | 17 ++++++++++++++---
 4 files changed, 34 insertions(+), 11 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/cta/TransferPickup')

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