diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-15 11:18:58 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-15 11:18:58 -0300 |
commit | 1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5 (patch) | |
tree | 99e8241a5eb5af4d752be93a460004bc0c6255aa /packages/taler-wallet-webextension/src/wallet/Transaction.tsx | |
parent | 9692f589c687a2ba39a705ca4238cf123f444c61 (diff) | |
download | wallet-core-1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5.tar.xz |
prettier
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet/Transaction.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/wallet/Transaction.tsx | 442 |
1 files changed, 302 insertions, 140 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index cf41efb59..7de6982e7 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -14,27 +14,43 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { AmountLike, Amounts, i18n, Transaction, TransactionType } from "@gnu-taler/taler-util"; +import { + AmountLike, + Amounts, + i18n, + Transaction, + TransactionType, +} from "@gnu-taler/taler-util"; import { format } from "date-fns"; -import { JSX, VNode } from "preact"; -import { route } from 'preact-router'; +import { JSX, VNode, h } from "preact"; +import { route } from "preact-router"; import { useEffect, useState } from "preact/hooks"; import emptyImg from "../../static/img/empty.png"; import { ErrorMessage } from "../components/ErrorMessage"; import { Part } from "../components/Part"; -import { ButtonBox, ButtonBoxDestructive, ButtonPrimary, FontIcon, ListOfProducts, RowBorderGray, SmallLightText, WalletBox, WarningBox } from "../components/styled"; +import { + ButtonBox, + ButtonBoxDestructive, + ButtonPrimary, + FontIcon, + ListOfProducts, + RowBorderGray, + SmallLightText, + WalletBox, + WarningBox, +} from "../components/styled"; import { Pages } from "../NavigationBar"; import * as wxApi from "../wxApi"; -export function TransactionPage({ tid }: { tid: string; }): JSX.Element { - const [transaction, setTransaction] = useState< - Transaction | undefined - >(undefined); +export function TransactionPage({ tid }: { tid: string }): JSX.Element { + const [transaction, setTransaction] = useState<Transaction | undefined>( + undefined, + ); useEffect(() => { const fetchData = async (): Promise<void> => { const res = await wxApi.getTransactions(); - const ts = res.transactions.filter(t => t.transactionId === tid); + const ts = res.transactions.filter((t) => t.transactionId === tid); if (ts.length === 1) { setTransaction(ts[0]); } else { @@ -45,13 +61,22 @@ export function TransactionPage({ tid }: { tid: string; }): JSX.Element { }, [tid]); if (!transaction) { - return <div><i18n.Translate>Loading ...</i18n.Translate></div>; + return ( + <div> + <i18n.Translate>Loading ...</i18n.Translate> + </div> + ); } - return <TransactionView - transaction={transaction} - onDelete={() => wxApi.deleteTransaction(tid).then(_ => history.go(-1))} - onRetry={() => wxApi.retryTransaction(tid).then(_ => history.go(-1))} - onBack={() => { route(Pages.history) }} />; + return ( + <TransactionView + transaction={transaction} + onDelete={() => wxApi.deleteTransaction(tid).then((_) => history.go(-1))} + onRetry={() => wxApi.retryTransaction(tid).then((_) => history.go(-1))} + onBack={() => { + route(Pages.history); + }} + /> + ); } export interface WalletTransactionProps { @@ -61,173 +86,310 @@ export interface WalletTransactionProps { onBack: () => void; } -export function TransactionView({ transaction, onDelete, onRetry, onBack }: WalletTransactionProps) { - +export function TransactionView({ + transaction, + onDelete, + onRetry, + onBack, +}: WalletTransactionProps) { function TransactionTemplate({ children }: { children: VNode[] }) { - return <WalletBox> - <section style={{ padding: 8, textAlign: 'center'}}> - <ErrorMessage title={transaction?.error?.hint} /> - {transaction.pending && <WarningBox>This transaction is not completed</WarningBox>} - </section> - <section> - <div style={{ textAlign: 'center' }}> - {children} - </div> - </section> - <footer> - <ButtonBox onClick={onBack}><i18n.Translate> <FontIcon>←</FontIcon> </i18n.Translate></ButtonBox> - <div> - {transaction?.error ? <ButtonPrimary onClick={onRetry}><i18n.Translate>retry</i18n.Translate></ButtonPrimary> : null} - <ButtonBoxDestructive onClick={onDelete}><i18n.Translate>🗑</i18n.Translate></ButtonBoxDestructive> - </div> - </footer> - </WalletBox> + return ( + <WalletBox> + <section style={{ padding: 8, textAlign: "center" }}> + <ErrorMessage title={transaction?.error?.hint} /> + {transaction.pending && ( + <WarningBox>This transaction is not completed</WarningBox> + )} + </section> + <section> + <div style={{ textAlign: "center" }}>{children}</div> + </section> + <footer> + <ButtonBox onClick={onBack}> + <i18n.Translate> + {" "} + <FontIcon>←</FontIcon>{" "} + </i18n.Translate> + </ButtonBox> + <div> + {transaction?.error ? ( + <ButtonPrimary onClick={onRetry}> + <i18n.Translate>retry</i18n.Translate> + </ButtonPrimary> + ) : null} + <ButtonBoxDestructive onClick={onDelete}> + <i18n.Translate>🗑</i18n.Translate> + </ButtonBoxDestructive> + </div> + </footer> + </WalletBox> + ); } function amountToString(text: AmountLike) { - const aj = Amounts.jsonifyAmount(text) - const amount = Amounts.stringifyValue(aj) - return `${amount} ${aj.currency}` + const aj = Amounts.jsonifyAmount(text); + const amount = Amounts.stringifyValue(aj); + return `${amount} ${aj.currency}`; } - if (transaction.type === TransactionType.Withdrawal) { const fee = Amounts.sub( Amounts.parseOrThrow(transaction.amountRaw), Amounts.parseOrThrow(transaction.amountEffective), - ).amount - return <TransactionTemplate> - <h2>Withdrawal</h2> - <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> - <br /> - <Part title="Total withdrawn" text={amountToString(transaction.amountEffective)} kind='positive' /> - <Part title="Chosen amount" text={amountToString(transaction.amountRaw)} kind='neutral' /> - <Part title="Exchange fee" text={amountToString(fee)} kind='negative' /> - <Part title="Exchange" text={new URL(transaction.exchangeBaseUrl).hostname} kind='neutral' /> - </TransactionTemplate> + ).amount; + return ( + <TransactionTemplate> + <h2>Withdrawal</h2> + <div> + {transaction.timestamp.t_ms === "never" + ? "never" + : format(transaction.timestamp.t_ms, "dd MMMM yyyy, HH:mm")} + </div> + <br /> + <Part + title="Total withdrawn" + text={amountToString(transaction.amountEffective)} + kind="positive" + /> + <Part + title="Chosen amount" + text={amountToString(transaction.amountRaw)} + kind="neutral" + /> + <Part title="Exchange fee" text={amountToString(fee)} kind="negative" /> + <Part + title="Exchange" + text={new URL(transaction.exchangeBaseUrl).hostname} + kind="neutral" + /> + </TransactionTemplate> + ); } - const showLargePic = () => { - - } + const showLargePic = () => {}; if (transaction.type === TransactionType.Payment) { const fee = Amounts.sub( Amounts.parseOrThrow(transaction.amountEffective), Amounts.parseOrThrow(transaction.amountRaw), - ).amount - - return <TransactionTemplate> - <h2>Payment </h2> - <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> - <br /> - <Part big title="Total paid" text={amountToString(transaction.amountEffective)} kind='negative' /> - <Part big title="Purchase amount" text={amountToString(transaction.amountRaw)} kind='neutral' /> - <Part big title="Fee" text={amountToString(fee)} kind='negative' /> - <Part title="Merchant" text={transaction.info.merchant.name} kind='neutral' /> - <Part title="Purchase" text={transaction.info.summary} kind='neutral' /> - <Part title="Receipt" text={`#${transaction.info.orderId}`} kind='neutral' /> + ).amount; - <div> - {transaction.info.products && transaction.info.products.length > 0 && - <ListOfProducts> - {transaction.info.products.map((p, k) => <RowBorderGray key={k}> - <a href="#" onClick={showLargePic}> - <img src={p.image ? p.image : emptyImg} /> - </a> - <div> - {p.quantity && p.quantity > 0 && <SmallLightText>x {p.quantity} {p.unit}</SmallLightText>} - <div>{p.description}</div> - </div> - </RowBorderGray>)} - </ListOfProducts> - } - </div> - </TransactionTemplate> + return ( + <TransactionTemplate> + <h2>Payment </h2> + <div> + {transaction.timestamp.t_ms === "never" + ? "never" + : format(transaction.timestamp.t_ms, "dd MMMM yyyy, HH:mm")} + </div> + <br /> + <Part + big + title="Total paid" + text={amountToString(transaction.amountEffective)} + kind="negative" + /> + <Part + big + title="Purchase amount" + text={amountToString(transaction.amountRaw)} + kind="neutral" + /> + <Part big title="Fee" text={amountToString(fee)} kind="negative" /> + <Part + title="Merchant" + text={transaction.info.merchant.name} + kind="neutral" + /> + <Part title="Purchase" text={transaction.info.summary} kind="neutral" /> + <Part + title="Receipt" + text={`#${transaction.info.orderId}`} + kind="neutral" + /> + + <div> + {transaction.info.products && transaction.info.products.length > 0 && ( + <ListOfProducts> + {transaction.info.products.map((p, k) => ( + <RowBorderGray key={k}> + <a href="#" onClick={showLargePic}> + <img src={p.image ? p.image : emptyImg} /> + </a> + <div> + {p.quantity && p.quantity > 0 && ( + <SmallLightText> + x {p.quantity} {p.unit} + </SmallLightText> + )} + <div>{p.description}</div> + </div> + </RowBorderGray> + ))} + </ListOfProducts> + )} + </div> + </TransactionTemplate> + ); } if (transaction.type === TransactionType.Deposit) { const fee = Amounts.sub( Amounts.parseOrThrow(transaction.amountRaw), Amounts.parseOrThrow(transaction.amountEffective), - ).amount - return <TransactionTemplate> - <h2>Deposit </h2> - <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> - <br /> - <Part big title="Total deposit" text={amountToString(transaction.amountEffective)} kind='negative' /> - <Part big title="Purchase amount" text={amountToString(transaction.amountRaw)} kind='neutral' /> - <Part big title="Fee" text={amountToString(fee)} kind='negative' /> - </TransactionTemplate> + ).amount; + return ( + <TransactionTemplate> + <h2>Deposit </h2> + <div> + {transaction.timestamp.t_ms === "never" + ? "never" + : format(transaction.timestamp.t_ms, "dd MMMM yyyy, HH:mm")} + </div> + <br /> + <Part + big + title="Total deposit" + text={amountToString(transaction.amountEffective)} + kind="negative" + /> + <Part + big + title="Purchase amount" + text={amountToString(transaction.amountRaw)} + kind="neutral" + /> + <Part big title="Fee" text={amountToString(fee)} kind="negative" /> + </TransactionTemplate> + ); } if (transaction.type === TransactionType.Refresh) { const fee = Amounts.sub( Amounts.parseOrThrow(transaction.amountRaw), Amounts.parseOrThrow(transaction.amountEffective), - ).amount - return <TransactionTemplate> - <h2>Refresh</h2> - <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> - <br /> - <Part big title="Total refresh" text={amountToString(transaction.amountEffective)} kind='negative' /> - <Part big title="Refresh amount" text={amountToString(transaction.amountRaw)} kind='neutral' /> - <Part big title="Fee" text={amountToString(fee)} kind='negative' /> - </TransactionTemplate> + ).amount; + return ( + <TransactionTemplate> + <h2>Refresh</h2> + <div> + {transaction.timestamp.t_ms === "never" + ? "never" + : format(transaction.timestamp.t_ms, "dd MMMM yyyy, HH:mm")} + </div> + <br /> + <Part + big + title="Total refresh" + text={amountToString(transaction.amountEffective)} + kind="negative" + /> + <Part + big + title="Refresh amount" + text={amountToString(transaction.amountRaw)} + kind="neutral" + /> + <Part big title="Fee" text={amountToString(fee)} kind="negative" /> + </TransactionTemplate> + ); } if (transaction.type === TransactionType.Tip) { const fee = Amounts.sub( Amounts.parseOrThrow(transaction.amountRaw), Amounts.parseOrThrow(transaction.amountEffective), - ).amount - return <TransactionTemplate> - <h2>Tip</h2> - <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> - <br /> - <Part big title="Total tip" text={amountToString(transaction.amountEffective)} kind='positive' /> - <Part big title="Received amount" text={amountToString(transaction.amountRaw)} kind='neutral' /> - <Part big title="Fee" text={amountToString(fee)} kind='negative' /> - </TransactionTemplate> + ).amount; + return ( + <TransactionTemplate> + <h2>Tip</h2> + <div> + {transaction.timestamp.t_ms === "never" + ? "never" + : format(transaction.timestamp.t_ms, "dd MMMM yyyy, HH:mm")} + </div> + <br /> + <Part + big + title="Total tip" + text={amountToString(transaction.amountEffective)} + kind="positive" + /> + <Part + big + title="Received amount" + text={amountToString(transaction.amountRaw)} + kind="neutral" + /> + <Part big title="Fee" text={amountToString(fee)} kind="negative" /> + </TransactionTemplate> + ); } if (transaction.type === TransactionType.Refund) { const fee = Amounts.sub( Amounts.parseOrThrow(transaction.amountRaw), Amounts.parseOrThrow(transaction.amountEffective), - ).amount - return <TransactionTemplate> - <h2>Refund</h2> - <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> - <br /> - <Part big title="Total refund" text={amountToString(transaction.amountEffective)} kind='positive' /> - <Part big title="Refund amount" text={amountToString(transaction.amountRaw)} kind='neutral' /> - <Part big title="Fee" text={amountToString(fee)} kind='negative' /> - <Part title="Merchant" text={transaction.info.merchant.name} kind='neutral' /> - <Part title="Purchase" text={transaction.info.summary} kind='neutral' /> - <Part title="Receipt" text={`#${transaction.info.orderId}`} kind='neutral' /> - - <p> - {transaction.info.summary} - </p> - <div> - {transaction.info.products && transaction.info.products.length > 0 && - <ListOfProducts> - {transaction.info.products.map((p, k) => <RowBorderGray key={k}> - <a href="#" onClick={showLargePic}> - <img src={p.image ? p.image : emptyImg} /> - </a> - <div> - {p.quantity && p.quantity > 0 && <SmallLightText>x {p.quantity} {p.unit}</SmallLightText>} - <div>{p.description}</div> - </div> - </RowBorderGray>)} - </ListOfProducts> - } - </div> - </TransactionTemplate> - } + ).amount; + return ( + <TransactionTemplate> + <h2>Refund</h2> + <div> + {transaction.timestamp.t_ms === "never" + ? "never" + : format(transaction.timestamp.t_ms, "dd MMMM yyyy, HH:mm")} + </div> + <br /> + <Part + big + title="Total refund" + text={amountToString(transaction.amountEffective)} + kind="positive" + /> + <Part + big + title="Refund amount" + text={amountToString(transaction.amountRaw)} + kind="neutral" + /> + <Part big title="Fee" text={amountToString(fee)} kind="negative" /> + <Part + title="Merchant" + text={transaction.info.merchant.name} + kind="neutral" + /> + <Part title="Purchase" text={transaction.info.summary} kind="neutral" /> + <Part + title="Receipt" + text={`#${transaction.info.orderId}`} + kind="neutral" + /> + <p>{transaction.info.summary}</p> + <div> + {transaction.info.products && transaction.info.products.length > 0 && ( + <ListOfProducts> + {transaction.info.products.map((p, k) => ( + <RowBorderGray key={k}> + <a href="#" onClick={showLargePic}> + <img src={p.image ? p.image : emptyImg} /> + </a> + <div> + {p.quantity && p.quantity > 0 && ( + <SmallLightText> + x {p.quantity} {p.unit} + </SmallLightText> + )} + <div>{p.description}</div> + </div> + </RowBorderGray> + ))} + </ListOfProducts> + )} + </div> + </TransactionTemplate> + ); + } - return <div></div> + return <div></div>; } |