better wording to the tx details

2023-06-21 14:51:14 -03:00 · 2023-06-21 14:51:14 -03:00 · 9dbf0bd7d2
commit 9dbf0bd7d2
parent 7010e707ba
9 changed files with 143 additions and 39 deletions
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@ -65,6 +65,8 @@ export function BankDetailsByPaytoType({
  const payto = parsePaytoUri(firstPayto);

  if (!payto) return <Fragment />;
+  payto.params["amount"] = Amounts.stringify(amount);
+  payto.params["message"] = subject;

  if (payto.isKnown && payto.targetType === "bitcoin") {
    const min = segwitMinAmount(amount.currency);
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
@ -31,7 +31,7 @@ import editIcon from "../../svg/edit_24px.inline.svg";
 import {
  ExchangeDetails,
  getAmountWithFee,
-  InvoiceDetails,
+  InvoiceCreationDetails,
 } from "../../wallet/Transaction.js";
 import { State } from "./index.js";

@ -144,7 +144,7 @@ export function ReadyView({
        <Part
          title={i18n.str`Details`}
          text={
-            <InvoiceDetails
+            <InvoiceCreationDetails
              amount={getAmountWithFee(toBeReceived, requestAmount, "credit")}
            />
          }
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
@ -22,7 +22,10 @@ import { PaymentButtons } from "../../components/PaymentButtons.js";
 import { SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { getAmountWithFee, InvoiceDetails } from "../../wallet/Transaction.js";
+import {
+  getAmountWithFee,
+  InvoicePaymentDetails,
+} from "../../wallet/Transaction.js";
 import { State } from "./index.js";

 export function ReadyView(
@ -38,7 +41,7 @@ export function ReadyView(
        <Part
          title={i18n.str`Details`}
          text={
-            <InvoiceDetails
+            <InvoicePaymentDetails
              amount={getAmountWithFee(effective, raw, "debit")}
            />
          }
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@ -104,7 +104,7 @@ export function BaseView(state: SupportedStates): VNode {
        )}
      </section>
      <PaymentButtons
-        amount={state.amount}
+        amount={effective}
        payStatus={state.payStatus}
        uri={state.uri}
        payHandler={state.status === "ready" ? state.payHandler : undefined}
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
@ -67,8 +67,8 @@ export function useComponentState({
  // }

  const { amountEffective, amountRaw } = hook.response;
-  const debitAmount = Amounts.parseOrThrow(amountRaw);
-  const toBeReceived = Amounts.parseOrThrow(amountEffective);
+  const debitAmount = Amounts.parseOrThrow(amountEffective);
+  const toBeReceived = Amounts.parseOrThrow(amountRaw);

  let purse_expiration: TalerProtocolTimestamp | undefined = undefined;
  let timestampError: string | undefined = undefined;
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
@ -14,17 +14,16 @@
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

-import { Amounts } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
-import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../../mui/Button.js";
 import { TextField } from "../../mui/TextField.js";
-import { getAmountWithFee, TransferDetails } from "../../wallet/Transaction.js";
+import {
+  getAmountWithFee,
+  TransferCreationDetails,
+} from "../../wallet/Transaction.js";
 import { State } from "./index.js";

 export function ReadyView({
@ -110,7 +109,7 @@ export function ReadyView({
        <Part
          title={i18n.str`Details`}
          text={
-            <TransferDetails
+            <TransferCreationDetails
              amount={getAmountWithFee(debitAmount, toBeReceived, "debit")}
            />
          }
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
@ -14,16 +14,16 @@
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { Amount } from "../../components/Amount.js";
-import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
-import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Button } from "../../mui/Button.js";
-import { getAmountWithFee, TransferDetails } from "../../wallet/Transaction.js";
+import {
+  getAmountWithFee,
+  TransferPickupDetails,
+} from "../../wallet/Transaction.js";
 import { State } from "./index.js";

 export function ReadyView({
@ -42,7 +42,7 @@ export function ReadyView({
        <Part
          title={i18n.str`Details`}
          text={
-            <TransferDetails
+            <TransferPickupDetails
              amount={getAmountWithFee(effective, raw, "credit")}
            />
          }
--- 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 (
--- 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} />