better wording to the tx details

2 files changed, 119 insertions, 19 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index a16590fe8..900218991 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -152,16 +152,20 @@ export function HistoryView({
       ? []
       : transactionByCurrency[selectedCurrency] ?? [];
 
+  const datesWithTransaction: string[] = [];
   const byDate = ts.reduce((rv, x) => {
     const theDate =
       x.timestamp.t_s === "never" ? 0 : normalizeToDay(x.timestamp.t_s * 1000);
     if (theDate) {
-      (rv[theDate] = rv[theDate] || []).push(x);
+      if (!rv[theDate]) {
+        rv[theDate] = [];
+        datesWithTransaction.push(String(theDate));
+      }
+      rv[theDate].push(x);
     }
 
     return rv;
   }, {} as { [x: string]: Transaction[] });
-  const datesWithTransaction = Object.keys(byDate);
 
   if (balances.length === 0 || !selectedCurrency) {
     return (
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 13adb34b2..17a921b54 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -876,7 +876,7 @@ export function TransactionView({
         <Part
           title={i18n.str`Details`}
           text={
-            <InvoiceDetails
+            <InvoiceCreationDetails
               amount={getAmountWithFee(effective, raw, "credit")}
             />
           }
@@ -920,7 +920,7 @@ export function TransactionView({
         <Part
           title={i18n.str`Details`}
           text={
-            <InvoiceDetails
+            <InvoicePaymentDetails
               amount={getAmountWithFee(effective, raw, "debit")}
             />
           }
@@ -972,7 +972,7 @@ export function TransactionView({
         <Part
           title={i18n.str`Details`}
           text={
-            <TransferDetails
+            <TransferCreationDetails
               amount={getAmountWithFee(effective, raw, "debit")}
             />
           }
@@ -1016,7 +1016,7 @@ export function TransactionView({
         <Part
           title={i18n.str`Details`}
           text={
-            <TransferDetails
+            <TransferPickupDetails
               amount={getAmountWithFee(effective, raw, "credit")}
             />
           }
@@ -1212,24 +1212,27 @@ export function getAmountWithFee(
   raw: AmountJson,
   direction: "credit" | "debit",
 ): AmountWithFee {
-  const fee =
-    direction === "credit"
-      ? Amounts.sub(raw, effective).amount
-      : Amounts.sub(effective, raw).amount;
+  const total = direction === "credit" ? effective : raw;
+  const value = direction === "debit" ? effective : raw;
+  const fee = Amounts.sub(value, total).amount;
 
   const maxFrac = [effective, raw, fee]
     .map((a) => Amounts.maxFractionalDigits(a))
     .reduce((c, p) => Math.max(c, p), 0);
 
   return {
-    total: effective,
-    value: raw,
+    total,
+    value,
     fee,
     maxFrac,
   };
 }
 
-export function InvoiceDetails({ amount }: { amount: AmountWithFee }): VNode {
+export function InvoiceCreationDetails({
+  amount,
+}: {
+  amount: AmountWithFee;
+}): VNode {
   const { i18n } = useTranslationContext();
 
   return (
@@ -1270,7 +1273,101 @@ export function InvoiceDetails({ amount }: { amount: AmountWithFee }): VNode {
   );
 }
 
-export function TransferDetails({ amount }: { amount: AmountWithFee }): VNode {
+export function InvoicePaymentDetails({
+  amount,
+}: {
+  amount: AmountWithFee;
+}): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <PurchaseDetailsTable>
+      <tr>
+        <td>
+          <i18n.Translate>Invoice</i18n.Translate>
+        </td>
+        <td>
+          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+        </td>
+      </tr>
+
+      {Amounts.isNonZero(amount.fee) && (
+        <tr>
+          <td>
+            <i18n.Translate>Fees</i18n.Translate>
+          </td>
+          <td>
+            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+          </td>
+        </tr>
+      )}
+      <tr>
+        <td colSpan={2}>
+          <hr />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <i18n.Translate>Total</i18n.Translate>
+        </td>
+        <td>
+          <Amount value={amount.value} maxFracSize={amount.maxFrac} />
+        </td>
+      </tr>
+    </PurchaseDetailsTable>
+  );
+}
+
+export function TransferCreationDetails({
+  amount,
+}: {
+  amount: AmountWithFee;
+}): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <PurchaseDetailsTable>
+      <tr>
+        <td>
+          <i18n.Translate>Sent</i18n.Translate>
+        </td>
+        <td>
+          <Amount value={amount.value} maxFracSize={amount.maxFrac} />
+        </td>
+      </tr>
+
+      {Amounts.isNonZero(amount.fee) && (
+        <tr>
+          <td>
+            <i18n.Translate>Fees</i18n.Translate>
+          </td>
+          <td>
+            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+          </td>
+        </tr>
+      )}
+      <tr>
+        <td colSpan={2}>
+          <hr />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <i18n.Translate>Transfer</i18n.Translate>
+        </td>
+        <td>
+          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+        </td>
+      </tr>
+    </PurchaseDetailsTable>
+  );
+}
+
+export function TransferPickupDetails({
+  amount,
+}: {
+  amount: AmountWithFee;
+}): VNode {
   const { i18n } = useTranslationContext();
 
   return (
@@ -1310,7 +1407,6 @@ export function TransferDetails({ amount }: { amount: AmountWithFee }): VNode {
     </PurchaseDetailsTable>
   );
 }
-
 export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode {
   const { i18n } = useTranslationContext();
 
@@ -1324,7 +1420,7 @@ export function WithdrawDetails({ amount }: { amount: AmountWithFee }): VNode {
     <PurchaseDetailsTable>
       <tr>
         <td>
-          <i18n.Translate>Wire transfer</i18n.Translate>
+          <i18n.Translate>Transfer</i18n.Translate>
         </td>
         <td>
           <Amount value={amount.value} maxFracSize={amount.maxFrac} />
@@ -1389,7 +1485,7 @@ export function PurchaseDetails({
           <i18n.Translate>Price</i18n.Translate>
         </td>
         <td>
-          <Amount value={price.value} />
+          <Amount value={price.total} />
         </td>
       </tr>
       {Amounts.isNonZero(price.fee) && (
@@ -1451,7 +1547,7 @@ export function PurchaseDetails({
               <i18n.Translate>Total</i18n.Translate>
             </td>
             <td>
-              <Amount value={price.total} />
+              <Amount value={price.value} />
             </td>
           </tr>
         </Fragment>
@@ -1621,7 +1717,7 @@ function DepositDetails({ amount }: { amount: AmountWithFee }): VNode {
     <PurchaseDetailsTable>
       <tr>
         <td>
-          <i18n.Translate>Deposit</i18n.Translate>
+          <i18n.Translate>Sent</i18n.Translate>
         </td>
         <td>
           <Amount value={amount.value} maxFracSize={amount.maxFrac} />