applying some comments from belen

2021-10-14 19:37:18 -03:00 · 2021-10-14 19:37:18 -03:00 · 1f365d1c42
commit 1f365d1c42
parent 90f4a4e655
3 changed files with 37 additions and 37 deletions
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@ -459,6 +459,10 @@ export const LightText = styled.div`
  color: gray;
 `

+export const WarningText = styled.div`
+  color: rgb(223, 117, 20);
+`
+
 export const SmallText = styled.div`
  font-size: small; 
 `
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@ -30,7 +30,7 @@ import { ExchangeXmlTos } from '../components/ExchangeToS';
 import { LogoHeader } from '../components/LogoHeader';
 import { Part } from '../components/Part';
 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 {
  acceptWithdrawal, getExchangeWithdrawalInfo, getWithdrawalDetailsForUri, setExchangeTosAccepted, listExchanges, getExchangeTos
@ -142,6 +142,13 @@ export function View({ details, withdrawalFee, exchangeBaseUrl, knownExchanges,
          </LinkSuccess>
        </section>
      }
+      {terms.status === 'notfound' &&
+        <section>
+          <WarningText>
+            {i18n.str`Exchange doesn't have terms of service`}
+          </WarningText>
+        </section>
+      }
      {reviewing &&
        <section>
          {terms.status !== 'accepted' && terms.value && terms.value.type === 'xml' &&
@ -216,10 +223,7 @@ export function View({ details, withdrawalFee, exchangeBaseUrl, knownExchanges,
            {i18n.str`Confirm withdrawal`}
          </ButtonSuccess>
        }
-        {terms.status === 'notfound' && <Fragment>
-          <LinkWarning>
-            {i18n.str`Exchange doesn't have terms of service`}
-          </LinkWarning>
+        {terms.status === 'notfound' &&
          <ButtonWarning
            upperCased
            disabled={!exchangeBaseUrl}
@ -227,7 +231,6 @@ export function View({ details, withdrawalFee, exchangeBaseUrl, knownExchanges,
          >
            {i18n.str`Withdraw anyway`}
          </ButtonWarning>
-        </Fragment>
        }
      </section>
    </WalletAction>
@ -257,7 +260,7 @@ export function WithdrawPageWithParsedURI({ uri, uriInfo }: { uri: string, uriIn
      amount: withdrawAmount,
      tosAcceptedFormat: ['text/xml']
    })
-    return {tos, info}
+    return { tos, info }
  })

  if (!detailsHook) {
--- 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, 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 { Part } from "../components/Part";

@ -55,28 +55,21 @@ export function TransactionPage({ tid }: { tid: string; }): JSX.Element {
 }

 export interface WalletTransactionProps {
-  transaction: Transaction,
-  onDelete: () => void,
-  onRetry: () => void,
-  onBack: () => void,
+  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 TransactionTemplate({ children }: { children: VNode[] }) {
    return <WalletBox>
-      <section>
+      <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>
@ -104,8 +97,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
      Amounts.parseOrThrow(transaction.amountEffective),
    ).amount
    return <TransactionTemplate>
-      <h2>Withdrawal <Status /></h2>
-      <div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+      <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' />
@ -125,8 +118,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
    ).amount

    return <TransactionTemplate>
-      <h2>Payment <Status /></h2>
-      <div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+      <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' />
@ -138,7 +131,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
      <div>
        {transaction.info.products && transaction.info.products.length > 0 &&
          <ListOfProducts>
-            {transaction.info.products.map(p => <RowBorderGray>
+            {transaction.info.products.map((p, k) => <RowBorderGray key={k}>
              <a href="#" onClick={showLargePic}>
                <img src={p.image ? p.image : emptyImg} />
              </a>
@ -159,8 +152,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
      Amounts.parseOrThrow(transaction.amountEffective),
    ).amount
    return <TransactionTemplate>
-      <h2>Deposit <Status /></h2>
-      <div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+      <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' />
@ -174,8 +167,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
      Amounts.parseOrThrow(transaction.amountEffective),
    ).amount
    return <TransactionTemplate>
-      <h2>Refresh <Status /></h2>
-      <div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+      <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' />
@ -189,8 +182,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
      Amounts.parseOrThrow(transaction.amountEffective),
    ).amount
    return <TransactionTemplate>
-      <h2>Tip <Status /></h2>
-      <div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+      <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' />
@ -204,8 +197,8 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
      Amounts.parseOrThrow(transaction.amountEffective),
    ).amount
    return <TransactionTemplate>
-      <h2>Refund <Status /></h2>
-      <div>{transaction.timestamp.t_ms === 'never' ? 'never': format(transaction.timestamp.t_ms, 'dd MMMM yyyy, HH:mm')}</div>
+      <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' />
@ -220,7 +213,7 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
      <div>
        {transaction.info.products && transaction.info.products.length > 0 &&
          <ListOfProducts>
-            {transaction.info.products.map(p => <RowBorderGray>
+            {transaction.info.products.map((p, k) => <RowBorderGray key={k}>
              <a href="#" onClick={showLargePic}>
                <img src={p.image ? p.image : emptyImg} />
              </a>