refactored transaction details

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

@@ -4,7 +4,7 @@ import type * as Linaria from '@linaria/core';
 
 import { styled } from '@linaria/react';
 
-export const PaymentStatus = styled.span<{color:string}>`
+export const PaymentStatus = styled.span<{ color: string }>`
   padding: 5px;
   border-radius: 5px;
   color: white;
@@ -136,20 +136,53 @@ export const Centered = styled.div`
 `
 export const Row = styled.div`
   display: flex;
-  border: 1px solid gray;
-  border-radius: 0.5em;
   margin: 0.5em 0;
   justify-content: space-between;
   padding: 0.5em;
 `
 
+export const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0em 1em;
+  justify-content: space-between;
+`
+
+export const RowBorderGray = styled(Row)`
+  border: 1px solid gray;
+  border-radius: 0.5em;
+`
+
+export const HistoryRow = styled(RowBorderGray)`
+  & > ${Column}:last-of-type {
+    margin-left: auto;
+    align-self: center;
+  }
+`
+
+export const ListOfProducts = styled.div`
+  & > div > a > img {
+    max-width: 100%;
+    display: inline-block;
+
+    width: 32px;
+    height: 32px;
+  }
+  & > div > div {
+    margin-right: auto;
+    margin-left: 1em;
+  }
+`
+
 export const LightText = styled.div`
   color: gray;
 `
 
 export const SmallText = styled.div`
   font-size: small; 
-  margin-top: 0.5em;
+`
+export const ExtraLargeText = styled.div`
+  font-size: x-large; 
 `
 
 export const SmallTextLight = styled(SmallText)`

packages/taler-wallet-webextension/src/popup/BackupPage.tsx

@@ -21,7 +21,7 @@ import { differenceInMonths, formatDuration, intervalToDuration } from "date-fns
 import { FunctionalComponent, Fragment, JSX, VNode, AnyComponent } from "preact";
 import {
   BoldLight, ButtonPrimary, ButtonSuccess, Centered,
-  CenteredText, CenteredTextBold, PopupBox, Row,
+  CenteredText, CenteredTextBold, PopupBox, RowBorderGray,
   SmallText, SmallTextLight
 } from "../components/styled";
 import { useBackupStatus } from "../hooks/useBackupStatus";
@@ -94,12 +94,12 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element {
 
 
   return (
-    <Row>
+    <RowBorderGray>
       <div style={{ color: !props.active ? "grey" : undefined }}>
         <a href={Pages.provider_detail.replace(':pid', encodeURIComponent(props.id))}><span>{props.title}</span></a>
 
-        {dateStr && <SmallText>Last synced: {dateStr}</SmallText>}
+        {dateStr && <SmallText style={{marginTop: 5}}>Last synced: {dateStr}</SmallText>}
-        {!dateStr && <SmallTextLight>Not synced</SmallTextLight>}
+        {!dateStr && <SmallTextLight style={{marginTop: 5}}>Not synced</SmallTextLight>}
       </div>
       <div>
         {props.status?.type === 'paid' ?
@@ -107,7 +107,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element {
           <div>{props.status.type}</div>
         }
       </div>
-    </Row>
+    </RowBorderGray>
   );
 }
 

packages/taler-wallet-webextension/src/popup/History.tsx

@@ -42,11 +42,13 @@ export function HistoryPage(props: any): JSX.Element {
 }
 
 export function HistoryView({ list }: { list: Transaction[] }) {
-  return <div style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}>
+  return <PopupBox>
-    {list.map((tx, i) => (
+    <section>
-      <TransactionItem key={i} tx={tx} />
+      {list.map((tx, i) => (
-    ))}
+        <TransactionItem key={i} tx={tx} />
-  </div>
+      ))}
+    </section>
+  </PopupBox>
 }
 
 import imageBank from '../../static/img/ri-bank-line.svg';
@@ -54,6 +56,7 @@ import imageShoppingCart from '../../static/img/ri-shopping-cart-line.svg';
 import imageRefund from '../../static/img/ri-refund-2-line.svg';
 import imageHandHeart from '../../static/img/ri-hand-heart-line.svg';
 import imageRefresh from '../../static/img/ri-refresh-line.svg';
+import { Column, ExtraLargeText, HistoryRow, PopupBox, Row, RowBorderGray, SmallTextLight } from "../components/styled";
 
 function TransactionItem(props: { tx: Transaction }): JSX.Element {
   const tx = props.tx;
@@ -146,37 +149,25 @@ function TransactionLayout(props: TransactionLayoutProps): JSX.Element {
     timeStyle: "short",
   } as any);
   return (
-    <div
+    <HistoryRow>
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        border: "1px solid gray",
-        borderRadius: "0.5em",
-        margin: "0.5em 0",
-        justifyContent: "space-between",
-        padding: "0.5em",
-      }}
-    >
       <img src={props.iconPath} />
-      <div
+      <Column>
-        style={{ display: "flex", flexDirection: "column", marginLeft: "1em" }}
+        <SmallTextLight>{dateStr}</SmallTextLight>
-      >
+        <ExtraLargeText>
-        <div style={{ fontSize: "small", color: "gray" }}>{dateStr}</div>
-        <div style={{ fontVariant: "small-caps", fontSize: "x-large" }}>
           <a href={Pages.transaction.replace(':tid', props.id)}><span>{props.title}</span></a>
           {props.pending ? (
             <span style={{ color: "darkblue" }}> (Pending)</span>
           ) : null}
-        </div>
+        </ExtraLargeText>
 
         <div>{props.subtitle}</div>
-      </div>
+      </Column>
       <TransactionAmount
         pending={props.pending}
         amount={props.amount}
         debitCreditIndicator={props.debitCreditIndicator}
       />
-    </div>
+    </HistoryRow>
   );
 }
 
@@ -210,24 +201,14 @@ function TransactionAmount(props: TransactionAmountProps): JSX.Element {
     case "unknown":
       sign = "";
   }
-  const style: JSX.AllCSSProperties = {
-    marginLeft: "auto",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    alignSelf: "center"
-  };
-  if (props.pending) {
-    style.color = "gray";
-  }
   return (
-    <div style={{ ...style }}>
+    <Column style={{ color: props.pending ? "gray" : undefined }}>
-      <div style={{ fontSize: "x-large" }}>
+      <ExtraLargeText>
         {sign}
         {amount}
-      </div>
+      </ExtraLargeText>
       <div>{currency}</div>
-    </div>
+    </Column>
   );
 }
 

packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx

@@ -123,8 +123,6 @@ function createExample<Props>(Component: FunctionalComponent<Props>, props: Part
   return r
 }
 
-export const NotYetLoaded = createExample(TestedComponent, {});
-
 export const Withdraw = createExample(TestedComponent, {
   transaction: exampleData.withdraw
 });

packages/taler-wallet-webextension/src/popup/Transaction.tsx

@@ -16,12 +16,14 @@
 
 import { AmountJson, Amounts, i18n, Transaction, TransactionType } from "@gnu-taler/taler-util";
 import { format } from "date-fns";
-import { Fragment, JSX } from "preact";
+import { Fragment, JSX, VNode } from "preact";
 import { route } from 'preact-router';
 import { useEffect, useState } from "preact/hooks";
 import * as wxApi from "../wxApi";
 import { Pages } from "./popup";
 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<
@@ -41,6 +43,9 @@ export function TransactionPage({ tid }: { tid: string; }): JSX.Element {
     fetchData();
   }, []);
 
+  if (!transaction) {
+    return <div><i18n.Translate>Loading ...</i18n.Translate></div>;
+  }
   return <TransactionView
     transaction={transaction}
     onDelete={() => wxApi.deleteTransaction(tid).then(_ => history.go(-1))}
@@ -49,65 +54,63 @@ export function TransactionPage({ tid }: { tid: string; }): JSX.Element {
 }
 
 export interface WalletTransactionProps {
-  transaction?: Transaction,
+  transaction: Transaction,
   onDelete: () => void,
   onRetry: () => void,
   onBack: () => void,
 }
 
+
 export function TransactionView({ transaction, onDelete, onRetry, onBack }: WalletTransactionProps) {
-  if (!transaction) {
-    return <div><i18n.Translate>Loading ...</i18n.Translate></div>;
-  }
-
-  function Footer() {
-    return <footer style={{ marginTop: 'auto', display: 'flex', flexShrink: 0 }}>
-      <button class="pure-button" onClick={onBack}><i18n.Translate>back</i18n.Translate></button>
-      <div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}>
-        {transaction?.error ? <button class="pure-button button-secondary" style={{marginRight: 5}} onClick={onRetry}><i18n.Translate>retry</i18n.Translate></button> : null }
-        <button class="pure-button button-destructive"  onClick={onDelete}><i18n.Translate>delete</i18n.Translate></button>
-      </div>
-
-    </footer>
-  }
 
   function Status() {
-    if (transaction?.error) {
+    if (transaction.error) {
       return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'red' }}>(failed)</span>
     }
-    if (!transaction?.pending) return null
+    if (transaction.pending) {
-    return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'gray' }}>(pending...)</span>
+      return <span style={{ fontWeight: 'normal', fontSize: 16, color: 'gray' }}>(pending...)</span>
+    }
+    return null
   }
 
-  function Error() {
+  function Fee({ value }: { value: AmountJson }) {
-    if (!transaction?.error) return null
+    if (Amounts.isZero(value)) return null
-    return <div class="errorbox" >
+    return <span style="font-size: 16px;font-weight: normal;color: gray;">(fee {Amounts.stringify(value)})</span>
-      <p>{transaction.error.hint}</p>
-    </div>
   }
 
-  const Fee = ({ value }: { value: AmountJson }) => Amounts.isNonZero(value) ?
+  function TransactionTemplate({ upperRight, children }: { upperRight: VNode, children: VNode[] }) {
-    <span style="font-size: 16px;font-weight: normal;color: gray;">(fee {Amounts.stringify(value)})</span> : null
+    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> &lt; 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 (
+    return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.exchangeBaseUrl}</b></Fragment>}>
-      <div style={{ display: 'flex', flexDirection: 'column' }} >
+      <h3>Withdraw <Status /></h3>
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
+      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-          <span style="font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
+    </TransactionTemplate>
-          <span style="float: right; font-size:small; color:gray">
-            From <b>{transaction.exchangeBaseUrl}</b>
-          </span>
-          <Error />
-          <h3>Withdraw <Status /></h3>
-          <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-        </section>
-        <Footer />
-      </div>
-    );
   }
 
   const showLargePic = () => {
@@ -120,38 +123,29 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
       Amounts.parseOrThrow(transaction.amountRaw),
     ).amount
 
-    return (
+    return <TransactionTemplate upperRight={<Fragment>To <b>{transaction.info.merchant.name}</b></Fragment>}>
-      <div style={{ display: 'flex', flexDirection: 'column' }} >
+      <h3>Payment <Status /></h3>
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
+      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-          <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
+      <span style="font-size:small; color:gray">#{transaction.info.orderId}</span>
-          <span style="float: right; font-size:small; color:gray">
+      <p>
-            To <b>{transaction.info.merchant.name}</b>
+        {transaction.info.summary}
-          </span>
+      </p>
-          <Error />
+      <div>
-          <h3>Payment <Status /></h3>
+        {transaction.info.products && transaction.info.products.length > 0 &&
-          <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
+          <ListOfProducts>
-          <span style="font-size:small; color:gray">#{transaction.info.orderId}</span>
+            {transaction.info.products.map(p => <RowBorderGray>
-          <p>
+              <a href="#" onClick={showLargePic}>
-            {transaction.info.summary}
+                <img src={p.image ? p.image : emptyImg} />
-          </p>
+              </a>
-          <div>
+              <div>
-            {transaction.info.products && transaction.info.products.length > 0 && <div>
+                {p.quantity && p.quantity > 0 && <SmallTextLight>x {p.quantity} {p.unit}</SmallTextLight>}
-              {transaction.info.products.map(p => <div style="display: flex; flex-direction: row; border: 1px solid gray; border-radius: 0.5em; margin: 0.5em 0px; justify-content: left; padding: 0.5em;">
+                <div>{p.description}</div>
-                <a href="#" onClick={showLargePic}>
+              </div>
-                  <img class="pure-img" style="display:inline-block" src={p.image ? p.image : emptyImg} width="32" height="32" />
+            </RowBorderGray>)}
-                </a>
+          </ListOfProducts>
-                <div style="display: block; margin-left: 1em;">
+        }
-                  {p.quantity && p.quantity > 0 && <div style="font-size: small; color: gray;">x {p.quantity} {p.unit}</div>}
-                  <div style={{ textOverflow: 'ellipsis', overflow: 'hidden', width: 'calc(20rem - 32px - 32px - 8px - 1em)', whiteSpace: 'nowrap' }}>{p.description}</div>
-                </div>
-              </div>)}
-            </div>
-            }
-          </div>
-        </section>
-        <Footer />
       </div>
-    );
+    </TransactionTemplate>
   }
 
   if (transaction.type === TransactionType.Deposit) {
@@ -159,20 +153,10 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
       Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
     ).amount
-    return (
+    return <TransactionTemplate upperRight={<Fragment>To <b>{transaction.targetPaytoUri}</b></Fragment>}>
-      <div style={{ display: 'flex', flexDirection: 'column' }} >
+      <h3>Deposit <Status /></h3>
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
+      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-          <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
+    </TransactionTemplate>
-          <span style="float: right; font-size:small; color:gray">
-            To <b>{transaction.targetPaytoUri}</b>
-          </span>
-          <Error />
-          <h3>Deposit <Status /></h3>
-          <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-        </section>
-        <Footer />
-      </div>
-    );
   }
 
   if (transaction.type === TransactionType.Refresh) {
@@ -180,20 +164,10 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
       Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
     ).amount
-    return (
+    return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.exchangeBaseUrl}</b></Fragment>}>
-      <div style={{ display: 'flex', flexDirection: 'column' }} >
+      <h3>Refresh <Status /></h3>
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
+      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-          <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
+    </TransactionTemplate>
-          <span style="float: right; font-size:small; color:gray">
-            From <b>{transaction.exchangeBaseUrl}</b>
-          </span>
-          <Error />
-          <h3>Refresh <Status /></h3>
-          <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-        </section>
-        <Footer />
-      </div>
-    );
   }
 
   if (transaction.type === TransactionType.Tip) {
@@ -201,20 +175,10 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
       Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
     ).amount
-    return (
+    return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.merchantBaseUrl}</b></Fragment>}>
-      <div style={{ display: 'flex', flexDirection: 'column' }} >
+      <h3>Tip <Status /></h3>
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
+      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-          <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
+    </TransactionTemplate>
-          <span style="float: right; font-size:small; color:gray">
-            From <b>{transaction.merchantBaseUrl}</b>
-          </span>
-          <Error />
-          <h3>Tip <Status /></h3>
-          <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-        </section>
-        <Footer />
-      </div>
-    );
   }
 
   if (transaction.type === TransactionType.Refund) {
@@ -222,39 +186,30 @@ export function TransactionView({ transaction, onDelete, onRetry, onBack }: Wall
       Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
     ).amount
-    return (
+    return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.info.merchant.name}</b></Fragment>}>
-      <div style={{ display: 'flex', flexDirection: 'column' }} >
+      <h3>Refund <Status /></h3>
-        <section style={{ color: transaction.pending ? 'gray' : '', flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}>
+      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-          <span style="flat: left; font-size:small; color:gray">{transaction.timestamp.t_ms === "never" ? "never" : format(transaction.timestamp.t_ms, 'dd/MM/yyyy HH:mm:ss')}</span>
-          <span style="float: right; font-size:small; color:gray">
-            From <b>{transaction.info.merchant.name}</b>
-          </span>
-          <Error />
-          <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 && <div>
-              {transaction.info.products.map(p => <div style="display: flex; flex-direction: row; border: 1px solid gray; border-radius: 0.5em; margin: 0.5em 0px; justify-content: left; padding: 0.5em;">
-                <a href="#" onClick={showLargePic}>
-                  <img class="pure-img" style="display:inline-block" src={p.image ? p.image : emptyImg} width="32" height="32" />
-                </a>
-                <div style="display: block; margin-left: 1em;">
-                  {p.quantity && p.quantity > 0 && <div style="font-size: small; color: gray;">x {p.quantity} {p.unit}</div>}
-                  <div style={{ textOverflow: 'ellipsis', overflow: 'hidden', width: 'calc(20rem - 32px - 32px - 8px - 1em)', whiteSpace: 'nowrap' }}>{p.description}</div>
-                </div>
-              </div>)}
-            </div>
-            }
-          </div>
 
-        </section>
+      <span style="font-size:small; color:gray">#{transaction.info.orderId}</span>
-        <Footer />
+      <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>
   }