[taler-wallet-core] branch master updated: show summary on the history page

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository wallet-core.

The following commit(s) were added to refs/heads/master by this push:
     new 84ca0b1c show summary on the history page
84ca0b1c is described below

commit 84ca0b1cb9742733a43d1fb8d597c3e25e876ec7
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Thu Oct 14 20:00:39 2021 -0300

    show summary on the history page
---
 .../src/components/TransactionItem.tsx              | 21 ++++++++++++---------
 .../src/wallet/History.stories.tsx                  | 15 +++++++++++----
 .../src/wallet/History.tsx                          |  4 ++--
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git 
a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx 
b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index 2d6d8e6d..991e97c9 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -39,7 +39,7 @@ export function TransactionItem(props: { tx: Transaction, 
multiCurrency: boolean
           iconPath={imageBank}
           pending={tx.pending}
           multiCurrency={props.multiCurrency}
-        ></TransactionLayout>
+        />
       );
     case TransactionType.Payment:
       return (
@@ -48,11 +48,12 @@ export function TransactionItem(props: { tx: Transaction, 
multiCurrency: boolean
           amount={tx.amountEffective}
           debitCreditIndicator={"debit"}
           title={tx.info.merchant.name}
+          subtitle={tx.info.summary}
           timestamp={tx.timestamp}
           iconPath={imageShoppingCart}
           pending={tx.pending}
           multiCurrency={props.multiCurrency}
-        ></TransactionLayout>
+        />
       );
     case TransactionType.Refund:
       return (
@@ -65,7 +66,7 @@ export function TransactionItem(props: { tx: Transaction, 
multiCurrency: boolean
           iconPath={imageRefund}
           pending={tx.pending}
           multiCurrency={props.multiCurrency}
-        ></TransactionLayout>
+        />
       );
     case TransactionType.Tip:
       return (
@@ -78,7 +79,7 @@ export function TransactionItem(props: { tx: Transaction, 
multiCurrency: boolean
           iconPath={imageHandHeart}
           pending={tx.pending}
           multiCurrency={props.multiCurrency}
-        ></TransactionLayout>
+        />
       );
     case TransactionType.Refresh:
       return (
@@ -91,7 +92,7 @@ export function TransactionItem(props: { tx: Transaction, 
multiCurrency: boolean
           iconPath={imageRefresh}
           pending={tx.pending}
           multiCurrency={props.multiCurrency}
-        ></TransactionLayout>
+        />
       );
     case TransactionType.Deposit:
       return (
@@ -104,7 +105,7 @@ export function TransactionItem(props: { tx: Transaction, 
multiCurrency: boolean
           iconPath={imageRefresh}
           pending={tx.pending}
           multiCurrency={props.multiCurrency}
-        ></TransactionLayout>
+        />
       );
   }
 }
@@ -118,12 +119,13 @@ function TransactionLayout(props: 
TransactionLayoutProps): JSX.Element {
       <img src={props.iconPath} />
       <Column>
         <LargeText>
-          <span>{props.title}</span>
+          <div>{props.title}</div>
+          {props.subtitle && <div style={{color:'gray', fontSize:'medium', 
marginTop: 5}}>{props.subtitle}</div>}
         </LargeText>
         {props.pending &&
-          <LightText style={{marginTop: 5, marginBottom: 5}}>Waiting for 
confirmation</LightText>
+          <LightText style={{ marginTop: 5, marginBottom: 5 }}>Waiting for 
confirmation</LightText>
         }
-        <SmallLightText>{dateStr}</SmallLightText>
+        <SmallLightText style={{marginTop:5 }}>{dateStr}</SmallLightText>
       </Column>
       <TransactionAmount
         pending={props.pending}
@@ -140,6 +142,7 @@ interface TransactionLayoutProps {
   amount: AmountString | "unknown";
   timestamp: Timestamp;
   title: string;
+  subtitle?: string;
   id: string;
   iconPath: string;
   pending: boolean;
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx 
b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index c2b3bcd5..0ac4be9a 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -41,7 +41,7 @@ const commonTransaction = () => ({
   amountEffective: 'USD:9',
   pending: false,
   timestamp: {
-    t_ms: new Date().getTime() - (count++ * 1000*60*60*7)
+    t_ms: new Date().getTime() - (count++ * 1000 * 60 * 60 * 7)
   },
   transactionId: '12',
 } as TransactionCommon)
@@ -131,7 +131,8 @@ export const One = createExample(TestedComponent, {
 });
 
 export const OnePending = createExample(TestedComponent, {
-  list: [{...exampleData.withdraw, 
+  list: [{
+    ...exampleData.withdraw,
     pending: true
   }],
   balances: [{
@@ -149,7 +150,13 @@ export const Several = createExample(TestedComponent, {
     exampleData.payment,
     exampleData.withdraw,
     exampleData.payment,
-    exampleData.refresh,
+    {
+      ...exampleData.payment,
+      info: {
+        ...exampleData.payment.info,
+        summary: 'this is a long summary that may be cropped because its too 
long',
+      },
+    },
     exampleData.refund,
     exampleData.tip,
     exampleData.deposit,
@@ -180,7 +187,7 @@ export const SeveralWithTwoCurrencies = 
createExample(TestedComponent, {
     pendingOutgoing: 'TESTKUDOS:0',
     hasPendingTransactions: false,
     requiresUserInput: false,
-  },{
+  }, {
     available: 'USD:10',
     pendingIncoming: 'USD:0',
     pendingOutgoing: 'USD:0',
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx 
b/packages/taler-wallet-webextension/src/wallet/History.tsx
index 43b0a663..8160f857 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -74,8 +74,8 @@ export function HistoryView({ list, balances }: { list: 
Transaction[], balances:
       </div>}
     </header>}
     <section>
-      {Object.keys(byDate).map(d => {
-        return <Fragment>
+      {Object.keys(byDate).map((d,i) => {
+        return <Fragment key={i}>
           <DateSeparator>{d}</DateSeparator>
           {byDate[d].map((tx, i) => (
             <TransactionItem key={i} tx={tx} multiCurrency={multiCurrency}/>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.