diff options
author | Sebastian <sebasjm@gmail.com> | 2021-08-24 13:29:37 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-08-24 15:16:33 -0300 |
commit | 0bc235c64b6936aa092a2df40e0c4909e4ac05d5 (patch) | |
tree | c5dde44f6bab19365a4ba4ba0aab46febf2cad0c /packages/taler-wallet-webextension/src/popup | |
parent | 147da7c160c0175c2722f4587ccb2916a3f056d9 (diff) | |
download | wallet-core-0bc235c64b6936aa092a2df40e0c4909e4ac05d5.tar.xz |
copy from popup to wallet
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
3 files changed, 1 insertions, 494 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx index 4a2e1045b..a0655d379 100644 --- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx @@ -23,7 +23,7 @@ import { createExample, NullLink } from '../test-utils'; import { BalanceView as TestedComponent } from './BalancePage'; export default { - title: 'popup/balance/detail', + title: 'popup/balance', component: TestedComponent, argTypes: { } diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx deleted file mode 100644 index 65302babb..000000000 --- a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx +++ /dev/null @@ -1,276 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021 Taler Systems S.A. - - GNU 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. - - GNU 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 - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -/** -* -* @author Sebastian Javier Marchano (sebasjm) -*/ - -import { - PaymentStatus, - TransactionCommon, TransactionDeposit, TransactionPayment, - TransactionRefresh, TransactionRefund, TransactionTip, TransactionType, - TransactionWithdrawal, - WithdrawalType -} from '@gnu-taler/taler-util'; -import { createExample } from '../test-utils'; -import { TransactionView as TestedComponent } from './Transaction'; - -export default { - title: 'popup/history/details', - component: TestedComponent, - argTypes: { - onRetry: { action: 'onRetry' }, - onDelete: { action: 'onDelete' }, - onBack: { action: 'onBack' }, - } -}; - -const commonTransaction = { - amountRaw: 'USD:10', - amountEffective: 'USD:9', - pending: false, - timestamp: { - t_ms: new Date().getTime() - }, - transactionId: '12', -} as TransactionCommon - -const exampleData = { - withdraw: { - ...commonTransaction, - type: TransactionType.Withdrawal, - exchangeBaseUrl: 'http://exchange.taler', - withdrawalDetails: { - confirmed: false, - exchangePaytoUris: ['payto://x-taler-bank/bank/account'], - type: WithdrawalType.ManualTransfer, - } - } as TransactionWithdrawal, - payment: { - ...commonTransaction, - amountEffective: 'USD:11', - type: TransactionType.Payment, - info: { - contractTermsHash: 'ASDZXCASD', - merchant: { - name: 'the merchant', - }, - orderId: '2021.167-03NPY6MCYMVGT', - products: [], - summary: "Essay: Why the Devil's Advocate Doesn't Help Reach the Truth", - fulfillmentMessage: '', - }, - proposalId: '1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0', - status: PaymentStatus.Accepted, - } as TransactionPayment, - deposit: { - ...commonTransaction, - type: TransactionType.Deposit, - depositGroupId: '#groupId', - targetPaytoUri: 'payto://x-taler-bank/bank/account', - } as TransactionDeposit, - refresh: { - ...commonTransaction, - type: TransactionType.Refresh, - exchangeBaseUrl: 'http://exchange.taler', - } as TransactionRefresh, - tip: { - ...commonTransaction, - type: TransactionType.Tip, - merchantBaseUrl: 'http://merchant.taler', - } as TransactionTip, - refund: { - ...commonTransaction, - type: TransactionType.Refund, - refundedTransactionId: 'payment:1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0', - info: { - contractTermsHash: 'ASDZXCASD', - merchant: { - name: 'the merchant', - }, - orderId: '2021.167-03NPY6MCYMVGT', - products: [], - summary: 'the summary', - fulfillmentMessage: '', - }, - } as TransactionRefund, -} - -const transactionError = { - code: 2000, - details: "details", - hint: "this is a hint for the error", - message: 'message' -} - -export const Withdraw = createExample(TestedComponent, { - transaction: exampleData.withdraw -}); - -export const WithdrawError = createExample(TestedComponent, { - transaction: { - ...exampleData.withdraw, - error: transactionError, - }, -}); - -export const WithdrawPending = createExample(TestedComponent, { - transaction: { ...exampleData.withdraw, pending: true }, -}); - - -export const Payment = createExample(TestedComponent, { - transaction: exampleData.payment -}); - -export const PaymentError = createExample(TestedComponent, { - transaction: { - ...exampleData.payment, - error: transactionError - }, -}); - -export const PaymentWithoutFee = createExample(TestedComponent, { - transaction: { - ...exampleData.payment, - amountRaw: 'USD:11', - - } -}); - -export const PaymentPending = createExample(TestedComponent, { - transaction: { ...exampleData.payment, pending: true }, -}); - -export const PaymentWithProducts = createExample(TestedComponent, { - transaction: { - ...exampleData.payment, - info: { - ...exampleData.payment.info, - summary: 'this order has 5 products', - products: [{ - description: 't-shirt', - unit: 'shirts', - quantity: 1, - }, { - description: 't-shirt', - unit: 'shirts', - quantity: 1, - }, { - description: 'e-book', - }, { - description: 'beer', - unit: 'pint', - quantity: 15, - }, { - description: 'beer', - unit: 'pint', - quantity: 15, - }] - } - } as TransactionPayment, -}); - -export const PaymentWithLongSummary = createExample(TestedComponent, { - transaction: { - ...exampleData.payment, - info: { - ...exampleData.payment.info, - summary: 'this is a very long summary that will occupy severals lines, this is a very long summary that will occupy severals lines, this is a very long summary that will occupy severals lines, this is a very long summary that will occupy severals lines, ', - products: [{ - description: 'an xl sized t-shirt with some drawings on it, color pink', - unit: 'shirts', - quantity: 1, - }, { - description: 'beer', - unit: 'pint', - quantity: 15, - }] - } - } as TransactionPayment, -}); - - -export const Deposit = createExample(TestedComponent, { - transaction: exampleData.deposit -}); - -export const DepositError = createExample(TestedComponent, { - transaction: { - ...exampleData.deposit, - error: transactionError - }, -}); - -export const DepositPending = createExample(TestedComponent, { - transaction: { ...exampleData.deposit, pending: true } -}); - -export const Refresh = createExample(TestedComponent, { - transaction: exampleData.refresh -}); - -export const RefreshError = createExample(TestedComponent, { - transaction: { - ...exampleData.refresh, - error: transactionError - }, -}); - -export const Tip = createExample(TestedComponent, { - transaction: exampleData.tip -}); - -export const TipError = createExample(TestedComponent, { - transaction: { - ...exampleData.tip, - error: transactionError - }, -}); - -export const TipPending = createExample(TestedComponent, { - transaction: { ...exampleData.tip, pending: true } -}); - -export const Refund = createExample(TestedComponent, { - transaction: exampleData.refund -}); - -export const RefundError = createExample(TestedComponent, { - transaction: { - ...exampleData.refund, - error: transactionError - }, -}); - -export const RefundPending = createExample(TestedComponent, { - transaction: { ...exampleData.refund, pending: true } -}); - -export const RefundWithProducts = createExample(TestedComponent, { - transaction: { - ...exampleData.refund, - info: { - ...exampleData.refund.info, - products: [{ - description: 't-shirt', - }, { - description: 'beer', - }] - } - } as TransactionRefund, -}); diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.tsx deleted file mode 100644 index 117a098bc..000000000 --- a/packages/taler-wallet-webextension/src/popup/Transaction.tsx +++ /dev/null @@ -1,217 +0,0 @@ -/* - 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 <http://www.gnu.org/licenses/> - */ - -import { AmountJson, Amounts, i18n, Transaction, TransactionType } from "@gnu-taler/taler-util"; -import { format } from "date-fns"; -import { Fragment, JSX, VNode, h } from "preact"; -import { route } from 'preact-router'; -import { useEffect, useState } from "preact/hooks"; -import * as wxApi from "../wxApi"; -import { Pages } from "../NavigationBar"; -import emptyImg from "../../static/img/empty.png" -import { Button, ButtonDestructive, ButtonPrimary, ListOfProducts, PopupBox, Row, RowBorderGray, SmallTextLight } from "../components/styled"; -import { ErrorMessage } from "../components/ErrorMessage"; - -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); - if (ts.length === 1) { - setTransaction(ts[0]); - } else { - route(Pages.history); - } - }; - fetchData(); - }, []); - - if (!transaction) { - 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={() => { history.go(-1); }} />; -} - -export interface WalletTransactionProps { - transaction: Transaction, - onDelete: () => void, - onRetry: () => void, - onBack: () => void, -} - - -export function TransactionView({ transaction, onDelete, onRetry, onBack }: WalletTransactionProps) { - - function Status() { - if (transaction.error) { - return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'red' }}>(failed)</span> - } - if (transaction.pending) { - return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'gray' }}>(pending...)</span> - } - return null - } - - function Fee({ value }: { value: AmountJson }) { - if (Amounts.isZero(value)) return null - return <span style="font-size: 16px;font-weight: normal;color: gray;">(fee {Amounts.stringify(value)})</span> - } - - function TransactionTemplate({ upperRight, children }: { upperRight: VNode, children: VNode[] }) { - return <PopupBox> - <header> - <SmallTextLight> - {transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')} - </SmallTextLight> - <SmallTextLight> - {upperRight} - </SmallTextLight> - </header> - <section> - <ErrorMessage title={transaction?.error?.hint} /> - {children} - </section> - <footer> - <Button onClick={onBack}><i18n.Translate> < back</i18n.Translate></Button> - <div> - {transaction?.error ? <ButtonPrimary onClick={onRetry}><i18n.Translate>retry</i18n.Translate></ButtonPrimary> : null} - <ButtonDestructive onClick={onDelete}><i18n.Translate>delete</i18n.Translate></ButtonDestructive> - </div> - </footer> - </PopupBox> - } - - if (transaction.type === TransactionType.Withdrawal) { - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.exchangeBaseUrl}</b></Fragment>}> - <h3>Withdraw <Status /></h3> - <h1>{transaction.amountEffective} <Fee value={fee} /></h1> - </TransactionTemplate> - } - - const showLargePic = () => { - - } - - if (transaction.type === TransactionType.Payment) { - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountEffective), - Amounts.parseOrThrow(transaction.amountRaw), - ).amount - - return <TransactionTemplate upperRight={<Fragment>To <b>{transaction.info.merchant.name}</b></Fragment>}> - <h3>Payment <Status /></h3> - <h1>{transaction.amountEffective} <Fee value={fee} /></h1> - <span style="font-size:small; color:gray">#{transaction.info.orderId}</span> - <p> - {transaction.info.summary} - </p> - <div> - {transaction.info.products && transaction.info.products.length > 0 && - <ListOfProducts> - {transaction.info.products.map(p => <RowBorderGray> - <a href="#" onClick={showLargePic}> - <img src={p.image ? p.image : emptyImg} /> - </a> - <div> - {p.quantity && p.quantity > 0 && <SmallTextLight>x {p.quantity} {p.unit}</SmallTextLight>} - <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 upperRight={<Fragment>To <b>{transaction.targetPaytoUri}</b></Fragment>}> - <h3>Deposit <Status /></h3> - <h1>{transaction.amountEffective} <Fee value={fee} /></h1> - </TransactionTemplate> - } - - if (transaction.type === TransactionType.Refresh) { - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.exchangeBaseUrl}</b></Fragment>}> - <h3>Refresh <Status /></h3> - <h1>{transaction.amountEffective} <Fee value={fee} /></h1> - </TransactionTemplate> - } - - if (transaction.type === TransactionType.Tip) { - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.merchantBaseUrl}</b></Fragment>}> - <h3>Tip <Status /></h3> - <h1>{transaction.amountEffective} <Fee value={fee} /></h1> - </TransactionTemplate> - } - - if (transaction.type === TransactionType.Refund) { - const fee = Amounts.sub( - Amounts.parseOrThrow(transaction.amountRaw), - Amounts.parseOrThrow(transaction.amountEffective), - ).amount - return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.info.merchant.name}</b></Fragment>}> - <h3>Refund <Status /></h3> - <h1>{transaction.amountEffective} <Fee value={fee} /></h1> - - <span style="font-size:small; color:gray">#{transaction.info.orderId}</span> - <p> - {transaction.info.summary} - </p> - <div> - {transaction.info.products && transaction.info.products.length > 0 && - <ListOfProducts> - {transaction.info.products.map(p => <RowBorderGray> - <a href="#" onClick={showLargePic}> - <img src={p.image ? p.image : emptyImg} /> - </a> - <div> - {p.quantity && p.quantity > 0 && <SmallTextLight>x {p.quantity} {p.unit}</SmallTextLight>} - <div>{p.description}</div> - </div> - </RowBorderGray>)} - </ListOfProducts> - } - </div> - </TransactionTemplate> - } - - - return <div></div> -} |