From 0b4976601fe2ecb0462fe72ae188b5cbba06d9cc Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 16 Jun 2021 18:21:03 -0300 Subject: components renaming to follow react pattern --- .../src/popup/Transaction.tsx | 327 +++++++++++++++++++++ 1 file changed, 327 insertions(+) create mode 100644 packages/taler-wallet-webextension/src/popup/Transaction.tsx (limited to 'packages/taler-wallet-webextension/src/popup/Transaction.tsx') diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.tsx new file mode 100644 index 000000000..b1179228e --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/Transaction.tsx @@ -0,0 +1,327 @@ +/* + This file is part of TALER + (C) 2016 GNUnet e.V. + + TALER is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + TALER is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + TALER; see the file COPYING. If not, see + */ + +import { Amounts, i18n, Transaction, TransactionType } from "@gnu-taler/taler-util"; +import { format } from "date-fns"; +import { JSX } from "preact"; +import { route } from 'preact-router'; +import { useEffect, useState } from "preact/hooks"; +import * as wxApi from "../wxApi"; +import { Pages } from "./popup"; + + +export function TransactionPage({ tid }: { tid: string; }): JSX.Element { + const [transaction, setTransaction] = useState< + Transaction | undefined + >(undefined); + + useEffect(() => { + const fetchData = async (): Promise => { + const res = await wxApi.getTransactions(); + const ts = res.transactions.filter(t => t.transactionId === tid); + if (ts.length === 1) { + setTransaction(ts[0]); + } else { + route(Pages.history); + } + }; + fetchData(); + }, []); + + return wxApi.deleteTransaction(tid).then(_ => history.go(-1))} + onBack={() => { history.go(-1); }} />; +} + +export interface WalletTransactionProps { + transaction?: Transaction, + onDelete: () => void, + onBack: () => void, +} + +export function TransactionView({ transaction, onDelete, onBack }: WalletTransactionProps) { + if (!transaction) { + return
Loading ...
; + } + + function Footer() { + return
+ +
+ + +
+ +
+ } + + function Pending() { + if (!transaction?.pending) return null + return (pending...) + } + + if (transaction.type === TransactionType.Withdrawal) { + return ( +
+
+

Withdrawal

+

+ From {transaction.exchangeBaseUrl} +

+ + + + + + + + + + + + + + + + + +
Amount subtracted{transaction.amountRaw}
Amount received{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountRaw), + Amounts.parseOrThrow(transaction.amountEffective), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + if (transaction.type === TransactionType.Payment) { + return ( +
+
+

Payment ({transaction.proposalId.substring(0, 10)}...)

+

+ To {transaction.info.merchant.name} +

+ + + + + + + + + + {transaction.info.products && transaction.info.products.length > 0 && + + + + + } + + + + + + + + + + + + + + + + +
Order id{transaction.info.orderId}
Summary{transaction.info.summary}
Products
    + {transaction.info.products.map(p => +
  1. {p.description}
    2. + )}
Order amount{transaction.amountRaw}
Order amount and fees{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountEffective), + Amounts.parseOrThrow(transaction.amountRaw), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + if (transaction.type === TransactionType.Deposit) { + return ( +
+
+

Deposit ({transaction.depositGroupId})

+

+ To {transaction.targetPaytoUri} +

+ + + + + + + + + + + + + + + + + +
Amount deposit{transaction.amountRaw}
Amount deposit and fees{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountEffective), + Amounts.parseOrThrow(transaction.amountRaw), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + if (transaction.type === TransactionType.Refresh) { + return ( +
+
+

Refresh

+

+ From {transaction.exchangeBaseUrl} +

+ + + + + + + + + + + + + +
Amount refreshed{transaction.amountRaw}
Fees{transaction.amountEffective}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + if (transaction.type === TransactionType.Tip) { + return ( +
+
+

Tip

+

+ From {transaction.merchantBaseUrl} +

+ + + + + + + + + + + + + + + + + +
Amount deduce{transaction.amountRaw}
Amount received{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountRaw), + Amounts.parseOrThrow(transaction.amountEffective), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + const TRANSACTION_FROM_REFUND = /[a-z]*:([\w]{10}).*/ + if (transaction.type === TransactionType.Refund) { + return ( +
+
+

Refund ({TRANSACTION_FROM_REFUND.exec(transaction.refundedTransactionId)![1]}...)

+

+ From {transaction.info.merchant.name} +

+ + + + + + + + + + {transaction.info.products && transaction.info.products.length > 0 && + + + + + } + + + + + + + + + + + + + + + + +
Order id{transaction.info.orderId}
Summary{transaction.info.summary}
Products
    + {transaction.info.products.map(p => +
  1. {p.description}
    2. + )}
Amount deduce{transaction.amountRaw}
Amount received{transaction.amountEffective}
Exchange fee{Amounts.stringify( + Amounts.sub( + Amounts.parseOrThrow(transaction.amountRaw), + Amounts.parseOrThrow(transaction.amountEffective), + ).amount + )}
When{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}
+
+
+
+ ); + } + + + return
+} -- cgit v1.2.3