diff options
author | Sebastian <sebasjm@gmail.com> | 2021-09-06 14:55:55 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-09-06 14:55:55 -0300 |
commit | d2cf75b782b63d7b217b14c0a3bdc953c5e3bca9 (patch) | |
tree | f739a11ae3409048ee8a65a151a5f7f68ca0bc94 /packages/taler-wallet-webextension/src/wallet | |
parent | 1ea598b048375c4043ac4faff13af0af6ae9b041 (diff) | |
download | wallet-core-d2cf75b782b63d7b217b14c0a3bdc953c5e3bca9.tar.xz |
rendring pending transation item
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
5 files changed, 25 insertions, 123 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx index 8b88432e0..ffc4418e0 100644 --- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx @@ -21,8 +21,8 @@ import { differenceInMonths, formatDuration, intervalToDuration } from "date-fns import { Fragment, JSX, VNode, h } from "preact"; import { BoldLight, ButtonPrimary, ButtonSuccess, Centered, - CenteredText, CenteredTextBold, PopupBox, RowBorderGray, - SmallText, SmallTextLight, WalletBox + CenteredText, CenteredBoldText, PopupBox, RowBorderGray, + SmallText, SmallLightText, WalletBox } from "../components/styled"; import { useBackupStatus } from "../hooks/useBackupStatus"; import { Pages } from "../NavigationBar"; @@ -99,7 +99,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element { <a href={Pages.provider_detail.replace(':pid', encodeURIComponent(props.id))}><span>{props.title}</span></a> {dateStr && <SmallText style={{marginTop: 5}}>Last synced: {dateStr}</SmallText>} - {!dateStr && <SmallTextLight style={{marginTop: 5}}>Not synced</SmallTextLight>} + {!dateStr && <SmallLightText style={{marginTop: 5}}>Not synced</SmallLightText>} </div> <div> {props.status?.type === 'paid' ? @@ -114,7 +114,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element { function ExpirationText({ until }: { until: Timestamp }) { return <Fragment> <CenteredText> Expires in </CenteredText> - <CenteredTextBold {...({ color: colorByTimeToExpire(until) })}> {daysUntil(until)} </CenteredTextBold> + <CenteredBoldText {...({ color: colorByTimeToExpire(until) })}> {daysUntil(until)} </CenteredBoldText> </Fragment> } diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx index 32499a264..c2b3bcd51 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx @@ -130,6 +130,19 @@ export const One = createExample(TestedComponent, { }] }); +export const OnePending = createExample(TestedComponent, { + list: [{...exampleData.withdraw, + pending: true + }], + balances: [{ + available: 'USD:10', + pendingIncoming: 'USD:0', + pendingOutgoing: 'USD:0', + hasPendingTransactions: false, + requiresUserInput: false, + }] +}); + export const Several = createExample(TestedComponent, { list: [ exampleData.withdraw, @@ -176,114 +189,3 @@ export const SeveralWithTwoCurrencies = createExample(TestedComponent, { }] }); -// export const WithdrawPending = createExample(TestedComponent, { -// transaction: { ...exampleData.withdraw, pending: true }, -// }); - - -// export const Payment = createExample(TestedComponent, { -// transaction: exampleData.payment -// }); - -// 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 DepositPending = createExample(TestedComponent, { -// transaction: { ...exampleData.deposit, pending: true } -// }); - -// export const Refresh = createExample(TestedComponent, { -// transaction: exampleData.refresh -// }); - -// export const Tip = createExample(TestedComponent, { -// transaction: exampleData.tip -// }); - -// export const TipPending = createExample(TestedComponent, { -// transaction: { ...exampleData.tip, pending: true } -// }); - -// export const Refund = createExample(TestedComponent, { -// transaction: exampleData.refund -// }); - -// 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/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx index 2b205ebee..aa87c91e5 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx @@ -4,7 +4,7 @@ import { VNode, h } from "preact"; import { useEffect, useState } from "preact/hooks"; import { Checkbox } from "../components/Checkbox"; import { ErrorMessage } from "../components/ErrorMessage"; -import { Button, ButtonPrimary, Input, LightText, WalletBox, SmallTextLight } from "../components/styled/index"; +import { Button, ButtonPrimary, Input, LightText, WalletBox, SmallLightText } from "../components/styled/index"; import * as wxApi from "../wxApi"; interface Props { @@ -129,7 +129,7 @@ export function ConfirmProviderView({ url, provider, onCancel, onConfirm }: Conf <section> <h1>Review terms of service</h1> <div>Provider URL: <a href={url} target="_blank">{url}</a></div> - <SmallTextLight>Please review and accept this provider's terms of service</SmallTextLight> + <SmallLightText>Please review and accept this provider's terms of service</SmallLightText> <h2>1. Pricing</h2> <p> {Amounts.isZero(provider.annual_fee) ? 'free of charge' : `${provider.annual_fee} per year of service`} diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx index 871e30b71..c45458eb7 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx @@ -20,7 +20,7 @@ import { ProviderInfo, ProviderPaymentStatus, ProviderPaymentType } from "@gnu-t import { format, formatDuration, intervalToDuration } from "date-fns"; import { Fragment, VNode, h } from "preact"; import { ErrorMessage } from "../components/ErrorMessage"; -import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, WalletBox, SmallTextLight } from "../components/styled"; +import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, WalletBox, SmallLightText } from "../components/styled"; import { useProviderStatus } from "../hooks/useProviderStatus"; interface Props { @@ -60,7 +60,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP <WalletBox> <Error info={info} /> <header> - <h3>{info.name} <SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3> + <h3>{info.name} <SmallLightText>{info.syncProviderBaseUrl}</SmallLightText></h3> <PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60, 60)'}>{isPaid ? 'Paid' : 'Unpaid'}</PaymentStatus> </header> <section> diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index ad00b3d1b..cc5430d0d 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -22,7 +22,7 @@ import { useEffect, useState } from "preact/hooks"; import * as wxApi from "../wxApi"; import { Pages } from "../NavigationBar"; import emptyImg from "../../static/img/empty.png" -import { Button, ButtonBox, ButtonBoxDestructive, ButtonDestructive, ButtonPrimary, ExtraLargeText, FontIcon, LargeText, ListOfProducts, PopupBox, Row, RowBorderGray, SmallTextLight, WalletBox } from "../components/styled"; +import { Button, ButtonBox, ButtonBoxDestructive, ButtonDestructive, ButtonPrimary, ExtraLargeText, FontIcon, LargeText, ListOfProducts, PopupBox, Row, RowBorderGray, SmallLightText, WalletBox } from "../components/styled"; import { ErrorMessage } from "../components/ErrorMessage"; export function TransactionPage({ tid }: { tid: string; }): JSX.Element { @@ -94,7 +94,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall function Part({ text, title, kind, big }: { title: string, text: AmountLike, kind: Kind, big?: boolean }) { const Text = big ? ExtraLargeText : LargeText; return <div style={{ margin: '1em' }}> - <SmallTextLight style={{ margin: '.5em' }}>{title}</SmallTextLight> + <SmallLightText style={{ margin: '.5em' }}>{title}</SmallLightText> <Text style={{ color: kind == 'positive' ? 'green' : (kind == 'negative' ? 'red' : 'black') }}> {text} </Text> @@ -153,7 +153,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall <img src={p.image ? p.image : emptyImg} /> </a> <div> - {p.quantity && p.quantity > 0 && <SmallTextLight>x {p.quantity} {p.unit}</SmallTextLight>} + {p.quantity && p.quantity > 0 && <SmallLightText>x {p.quantity} {p.unit}</SmallLightText>} <div>{p.description}</div> </div> </RowBorderGray>)} @@ -235,7 +235,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall <img src={p.image ? p.image : emptyImg} /> </a> <div> - {p.quantity && p.quantity > 0 && <SmallTextLight>x {p.quantity} {p.unit}</SmallTextLight>} + {p.quantity && p.quantity > 0 && <SmallLightText>x {p.quantity} {p.unit}</SmallLightText>} <div>{p.description}</div> </div> </RowBorderGray>)} |