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

applying some comments from belen

Browse Source
This commit is contained in:
Sebastian 2021-10-14 19:37:18 -03:00
parent 90f4a4e655
commit 1f365d1c42
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
3 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -459,6 +459,10 @@ export const LightText = styled.div`
color: gray; color: gray;
` `
export const WarningText = styled.div`
color: rgb(223, 117, 20);
`
export const SmallText = styled.div` export const SmallText = styled.div`
font-size: small; font-size: small;
` `

17
packages/taler-wallet-webextension/src/cta/Withdraw.tsx
View File

@ -30,7 +30,7 @@ import { ExchangeXmlTos } from '../components/ExchangeToS';
import { LogoHeader } from '../components/LogoHeader'; import { LogoHeader } from '../components/LogoHeader';
import { Part } from '../components/Part'; import { Part } from '../components/Part';
import { SelectList } from '../components/SelectList'; import { SelectList } from '../components/SelectList';
import { ButtonSuccess, ButtonWarning, LinkSuccess, LinkWarning, TermsOfService, WalletAction } from '../components/styled'; import { ButtonSuccess, ButtonWarning, LinkSuccess, LinkWarning, TermsOfService, WalletAction, WarningText } from '../components/styled';
import { useAsyncAsHook } from '../hooks/useAsyncAsHook'; import { useAsyncAsHook } from '../hooks/useAsyncAsHook';
import { import {
acceptWithdrawal, getExchangeWithdrawalInfo, getWithdrawalDetailsForUri, setExchangeTosAccepted, listExchanges, getExchangeTos acceptWithdrawal, getExchangeWithdrawalInfo, getWithdrawalDetailsForUri, setExchangeTosAccepted, listExchanges, getExchangeTos
@ -142,6 +142,13 @@ export function View({ details, withdrawalFee, exchangeBaseUrl, knownExchanges,
</LinkSuccess> </LinkSuccess>
</section> </section>
} }
{terms.status === 'notfound' &&
<section>
<WarningText>
{i18n.str`Exchange doesn't have terms of service`}
</WarningText>
</section>
}
{reviewing && {reviewing &&
<section> <section>
{terms.status !== 'accepted' && terms.value && terms.value.type === 'xml' && {terms.status !== 'accepted' && terms.value && terms.value.type === 'xml' &&
@ -216,10 +223,7 @@ export function View({ details, withdrawalFee, exchangeBaseUrl, knownExchanges,
{i18n.str`Confirm withdrawal`} {i18n.str`Confirm withdrawal`}
</ButtonSuccess> </ButtonSuccess>
} }
{terms.status === 'notfound' && <Fragment> {terms.status === 'notfound' &&
<LinkWarning>
{i18n.str`Exchange doesn't have terms of service`}
</LinkWarning>
<ButtonWarning <ButtonWarning
upperCased upperCased
disabled={!exchangeBaseUrl} disabled={!exchangeBaseUrl}
@ -227,7 +231,6 @@ export function View({ details, withdrawalFee, exchangeBaseUrl, knownExchanges,
> >
{i18n.str`Withdraw anyway`} {i18n.str`Withdraw anyway`}
</ButtonWarning> </ButtonWarning>
</Fragment>
} }
</section> </section>
</WalletAction> </WalletAction>
@ -257,7 +260,7 @@ export function WithdrawPageWithParsedURI({ uri, uriInfo }: { uri: string, uriIn
amount: withdrawAmount, amount: withdrawAmount,
tosAcceptedFormat: ['text/xml'] tosAcceptedFormat: ['text/xml']
}) })
return {tos, info} return { tos, info }
}) })
if (!detailsHook) { if (!detailsHook) {

53
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 * as wxApi from "../wxApi";
import { Pages } from "../NavigationBar"; import { Pages } from "../NavigationBar";
import emptyImg from "../../static/img/empty.png" import emptyImg from "../../static/img/empty.png"
import { Button, ButtonBox, ButtonBoxDestructive, ButtonDestructive, ButtonPrimary, ExtraLargeText, FontIcon, LargeText, ListOfProducts, PopupBox, Row, RowBorderGray, SmallLightText, WalletBox } from "../components/styled"; import { Button, ButtonBox, ButtonBoxDestructive, ButtonDestructive, ButtonPrimary, ExtraLargeText, FontIcon, LargeText, ListOfProducts, PopupBox, Row, RowBorderGray, SmallLightText, WalletBox, WarningBox } from "../components/styled";
import { ErrorMessage } from "../components/ErrorMessage"; import { ErrorMessage } from "../components/ErrorMessage";
import { Part } from "../components/Part"; import { Part } from "../components/Part";
@ -55,28 +55,21 @@ export function TransactionPage({ tid }: { tid: string; }): JSX.Element {
} }
export interface WalletTransactionProps { export interface WalletTransactionProps {
transaction: Transaction, transaction: Transaction;
onDelete: () => void, onDelete: () => void;
onRetry: () => void, onRetry: () => void;
onBack: () => void, onBack: () => void;
} }
export function TransactionView({ transaction, onDelete, onRetry, onBack }: WalletTransactionProps) { 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 TransactionTemplate({ children }: { children: VNode[] }) { function TransactionTemplate({ children }: { children: VNode[] }) {
return <WalletBox> return <WalletBox>
<section> <section style={{ padding: 8, textAlign: 'center'}}>
<ErrorMessage title={transaction?.error?.hint} /> <ErrorMessage title={transaction?.error?.hint} />
{transaction.pending && <WarningBox>This transaction is not completed</WarningBox>}
</section>
<section>
<div style={{ textAlign: 'center' }}> <div style={{ textAlign: 'center' }}>
{children} {children}
</div> </div>
@ -104,8 +97,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountEffective), Amounts.parseOrThrow(transaction.amountEffective),
).amount ).amount
return <TransactionTemplate> return <TransactionTemplate>
<h2>Withdrawal <Status /></h2> <h2>Withdrawal</h2>
<div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
<br /> <br />
<Part title="Total withdrawn" text={amountToString(transaction.amountEffective)} kind='positive' /> <Part title="Total withdrawn" text={amountToString(transaction.amountEffective)} kind='positive' />
<Part title="Chosen amount" text={amountToString(transaction.amountRaw)} kind='neutral' /> <Part title="Chosen amount" text={amountToString(transaction.amountRaw)} kind='neutral' />
@ -125,8 +118,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
).amount ).amount
return <TransactionTemplate> return <TransactionTemplate>
<h2>Payment <Status /></h2> <h2>Payment </h2>
<div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
<br /> <br />
<Part big title="Total paid" text={amountToString(transaction.amountEffective)} kind='negative' /> <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="Purchase amount" text={amountToString(transaction.amountRaw)} kind='neutral' />
@ -138,7 +131,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
<div> <div>
{transaction.info.products && transaction.info.products.length > 0 && {transaction.info.products && transaction.info.products.length > 0 &&
<ListOfProducts> <ListOfProducts>
{transaction.info.products.map(p => <RowBorderGray> {transaction.info.products.map((p, k) => <RowBorderGray key={k}>
<a href="#" onClick={showLargePic}> <a href="#" onClick={showLargePic}>
<img src={p.image ? p.image : emptyImg} /> <img src={p.image ? p.image : emptyImg} />
</a> </a>
@ -159,8 +152,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountEffective), Amounts.parseOrThrow(transaction.amountEffective),
).amount ).amount
return <TransactionTemplate> return <TransactionTemplate>
<h2>Deposit <Status /></h2> <h2>Deposit </h2>
<div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
<br /> <br />
<Part big title="Total deposit" text={amountToString(transaction.amountEffective)} kind='negative' /> <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="Purchase amount" text={amountToString(transaction.amountRaw)} kind='neutral' />
@ -174,8 +167,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountEffective), Amounts.parseOrThrow(transaction.amountEffective),
).amount ).amount
return <TransactionTemplate> return <TransactionTemplate>
<h2>Refresh <Status /></h2> <h2>Refresh</h2>
<div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
<br /> <br />
<Part big title="Total refresh" text={amountToString(transaction.amountEffective)} kind='negative' /> <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="Refresh amount" text={amountToString(transaction.amountRaw)} kind='neutral' />
@ -189,8 +182,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountEffective), Amounts.parseOrThrow(transaction.amountEffective),
).amount ).amount
return <TransactionTemplate> return <TransactionTemplate>
<h2>Tip <Status /></h2> <h2>Tip</h2>
<div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
<br /> <br />
<Part big title="Total tip" text={amountToString(transaction.amountEffective)} kind='positive' /> <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="Received amount" text={amountToString(transaction.amountRaw)} kind='neutral' />
@ -204,8 +197,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
Amounts.parseOrThrow(transaction.amountEffective), Amounts.parseOrThrow(transaction.amountEffective),
).amount ).amount
return <TransactionTemplate> return <TransactionTemplate>
<h2>Refund <Status /></h2> <h2>Refund</h2>
<div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div> <div>{transaction.timestamp.t_ms === 'never' ? 'never' : format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
<br /> <br />
<Part big title="Total refund" text={amountToString(transaction.amountEffective)} kind='positive' /> <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="Refund amount" text={amountToString(transaction.amountRaw)} kind='neutral' />
@ -220,7 +213,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
<div> <div>
{transaction.info.products && transaction.info.products.length > 0 && {transaction.info.products && transaction.info.products.length > 0 &&
<ListOfProducts> <ListOfProducts>
{transaction.info.products.map(p => <RowBorderGray> {transaction.info.products.map((p, k) => <RowBorderGray key={k}>
<a href="#" onClick={showLargePic}> <a href="#" onClick={showLargePic}>
<img src={p.image ? p.image : emptyImg} /> <img src={p.image ? p.image : emptyImg} />
</a> </a>