taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

rendring pending transation item

Browse Source
This commit is contained in:
Sebastian 2021-09-06 14:55:55 -03:00
parent 1ea598b048
commit d2cf75b782
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
11 changed files with 43 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/taler-wallet-webextension/.gitignore vendored
View File

@ -1,3 +1,4 @@
extension/
/storybook-static/
/.linaria-cache/
/lib

12
packages/taler-wallet-webextension/src/components/TransactionItem.tsx
View File

@ -7,7 +7,7 @@ import imageRefresh from '../../static/img/ri-refresh-line.svg';
import imageRefund from '../../static/img/ri-refund-2-line.svg';
import imageShoppingCart from '../../static/img/ri-shopping-cart-line.svg';
import { Pages } from "../NavigationBar";
import { Column, ExtraLargeText, HistoryRow, SmallTextLight, LargeText } from './styled/index';
import { Column, ExtraLargeText, HistoryRow, SmallLightText, LargeText, LightText } from './styled/index';
export function TransactionItem(props: { tx: Transaction, multiCurrency: boolean }): JSX.Element {
const tx = props.tx;
@ -103,11 +103,11 @@ function TransactionLayout(props: TransactionLayoutProps): JSX.Element {
<Column>
<LargeText>
<span>{props.title}</span>
{props.pending ? (
<span style={{ color: "darkblue" }}> (Pending)</span>
) : null}
</LargeText>
<SmallTextLight>{dateStr}</SmallTextLight>
{props.pending &&
<LightText style={{marginTop: 5, marginBottom: 5}}>Waiting for confirmation</LightText>
}
<SmallLightText>{dateStr}</SmallLightText>
</Column>
<TransactionAmount
pending={props.pending}
@ -152,6 +152,7 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element {
}
return (
<Column style={{
textAlign: 'center',
color:
props.pending ? "gray" :
(sign === '+' ? 'darkgreen' :
@ -163,6 +164,7 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element {
{amount}
</ExtraLargeText>
{props.multiCurrency && <div>{currency}</div>}
{props.pending && <div>PENDING</div>}
</Column>
);
}

4
packages/taler-wallet-webextension/src/components/styled/index.tsx
View File

@ -366,7 +366,7 @@ export const ExtraLargeText = styled.div`
font-size: x-large;
`
export const SmallTextLight = styled(SmallText)`
export const SmallLightText = styled(SmallText)`
color: gray;
`
@ -375,7 +375,7 @@ export const CenteredText = styled.div`
text-align: center;
`
export const CenteredTextBold = styled(CenteredText)`
export const CenteredBoldText = styled(CenteredText)`
white-space: nowrap;
text-align: center;
font-weight: bold;

8
packages/taler-wallet-webextension/src/popup/BackupPage.tsx
View File

@ -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
CenteredText, CenteredBoldText, PopupBox, RowBorderGray,
SmallText, SmallLightText
} 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>
}

4
packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx
View File

@ -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, PopupBox, SmallTextLight } from "../components/styled/index";
import { Button, ButtonPrimary, Input, LightText, PopupBox, 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`}

4
packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
View File

@ -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, PopupBox, SmallTextLight } from "../components/styled";
import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, PopupBox, SmallLightText } from "../components/styled";
import { useProviderStatus } from "../hooks/useProviderStatus";
interface Props {
@ -60,7 +60,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP
<PopupBox>
<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>

8
packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
View File

@ -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>
}

124
packages/taler-wallet-webextension/src/wallet/History.stories.tsx
View File

@ -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,
// });

4
packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
View File

@ -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`}

4
packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
View File

@ -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>

8
packages/taler-wallet-webextension/src/wallet/Transaction.tsx
View File

@ -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>)}