diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/Transaction.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Transaction.tsx | 130 |
1 files changed, 113 insertions, 17 deletions
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} /> |