show sharing action when the tx is not completed

3 files changed, 108 insertions, 15 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index 335d5ea9c..e37711b8a 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -51,9 +51,9 @@ const commonTransaction = (): TransactionCommon =>
     amountEffective: "USD:9",
     pending: false,
     timestamp: TalerProtocolTimestamp.fromSeconds(
-      new Date().getTime() - count++ * 60 * 60 * 7,
+      new Date().getTime() / 1000 - count++ * 60 * 60 * 7,
     ),
-    transactionId: "12",
+    transactionId: String(count),
   } as TransactionCommon);
 
 const exampleData = {
@@ -145,6 +145,7 @@ const exampleData = {
   pull_debit: {
     ...commonTransaction(),
     type: TransactionType.PeerPullDebit,
+
     exchangeBaseUrl: "https://exchange.taler.net",
   } as TransactionPeerPullDebit,
 };
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index 6c591611a..acb50642a 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -20,6 +20,7 @@
  */
 
 import {
+  AbsoluteTime,
   PaymentStatus,
   TalerProtocolTimestamp,
   TransactionCommon,
@@ -146,6 +147,13 @@ const exampleData = {
   push_credit: {
     ...commonTransaction,
     type: TransactionType.PeerPushCredit,
+    info: {
+      expiration: {
+        t_s: new Date().getTime() / 1000 + 2 * 60 * 60,
+      },
+      summary: "take this money",
+      completed: true,
+    },
     exchangeBaseUrl: "https://exchange.taler.net",
   } as TransactionPeerPushCredit,
   push_debit: {
@@ -153,6 +161,13 @@ const exampleData = {
     type: TransactionType.PeerPushDebit,
     talerUri:
       "taler://pay-push/exchange.taler.ar/HS585JK0QCXHJ8Z8QWZA3EBAY5WY7XNC1RR2MHJXSH2Z4WP0YPJ0",
+    info: {
+      expiration: {
+        t_s: new Date().getTime() / 1000 + 2 * 60 * 60,
+      },
+      summary: "take this money",
+      completed: true,
+    },
     exchangeBaseUrl: "https://exchange.taler.net",
   } as TransactionPeerPushDebit,
   pull_credit: {
@@ -160,11 +175,25 @@ const exampleData = {
     type: TransactionType.PeerPullCredit,
     talerUri:
       "taler://pay-push/exchange.taler.ar/HS585JK0QCXHJ8Z8QWZA3EBAY5WY7XNC1RR2MHJXSH2Z4WP0YPJ0",
+    info: {
+      expiration: {
+        t_s: new Date().getTime() / 1000 + 2 * 60 * 60,
+      },
+      summary: "pay me, please?",
+      completed: true,
+    },
     exchangeBaseUrl: "https://exchange.taler.net",
   } as TransactionPeerPullCredit,
   pull_debit: {
     ...commonTransaction,
     type: TransactionType.PeerPullDebit,
+    info: {
+      expiration: {
+        t_s: new Date().getTime() / 1000 + 2 * 60 * 60,
+      },
+      summary: "pay me, please?",
+      completed: true,
+    },
     exchangeBaseUrl: "https://exchange.taler.net",
   } as TransactionPeerPullDebit,
 };
@@ -527,10 +556,17 @@ export const RefundPending = createExample(TestedComponent, {
   transaction: { ...exampleData.refund, pending: true },
 });
 
-export const InvoiceCredit = createExample(TestedComponent, {
+export const InvoiceCreditComplete = createExample(TestedComponent, {
   transaction: { ...exampleData.pull_credit },
 });
 
+export const InvoiceCreditIncomplete = createExample(TestedComponent, {
+  transaction: {
+    ...exampleData.pull_credit,
+    info: { ...exampleData.pull_credit.info, completed: false },
+  },
+});
+
 export const InvoiceDebit = createExample(TestedComponent, {
   transaction: { ...exampleData.pull_debit },
 });
@@ -539,6 +575,15 @@ export const TransferCredit = createExample(TestedComponent, {
   transaction: { ...exampleData.push_credit },
 });
 
-export const TransferDebit = createExample(TestedComponent, {
+export const TransferDebitComplete = createExample(TestedComponent, {
   transaction: { ...exampleData.push_debit },
 });
+export const TransferDebitIncomplete = createExample(TestedComponent, {
+  transaction: {
+    ...exampleData.push_debit,
+    info: {
+      ...exampleData.push_debit.info,
+      completed: false,
+    },
+  },
+});
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index c8c4e3ae1..44543c2cd 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -115,6 +115,9 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
   return (
     <TransactionView
       transaction={state.response}
+      onSend={async () => {
+        null;
+      }}
       onDelete={() =>
         wxApi.deleteTransaction(tid).then(() => goToWalletHistory(currency))
       }
@@ -129,6 +132,7 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode {
 
 export interface WalletTransactionProps {
   transaction: Transaction;
+  onSend: () => Promise<void>;
   onDelete: () => Promise<void>;
   onRetry: () => Promise<void>;
   onRefund: (id: string) => Promise<void>;
@@ -147,6 +151,7 @@ export function TransactionView({
   transaction,
   onDelete,
   onRetry,
+  onSend,
   onRefund,
 }: WalletTransactionProps): VNode {
   const [confirmBeforeForget, setConfirmBeforeForget] = useState(false);
@@ -169,6 +174,10 @@ export function TransactionView({
   }: {
     children: ComponentChildren;
   }): VNode {
+    const showSend =
+      (transaction.type === TransactionType.PeerPullCredit ||
+        transaction.type === TransactionType.PeerPushDebit) &&
+      !transaction.info.completed;
     const showRetry =
       transaction.error !== undefined ||
       transaction.timestamp.t_s === "never" ||
@@ -194,7 +203,13 @@ export function TransactionView({
         </section>
         <section>{children}</section>
         <footer>
-          <div />
+          <div>
+            {showSend ? (
+              <Button variant="contained" onClick={onSend}>
+                <i18n.Translate>Send</i18n.Translate>
+              </Button>
+            ) : null}
+          </div>
           <div>
             {showRetry ? (
               <Button variant="contained" onClick={onRetry}>
@@ -597,16 +612,25 @@ export function TransactionView({
           Invoice
         </Header>
 
+        {transaction.info.summary ? (
+          <Part
+            title={<i18n.Translate>Subject</i18n.Translate>}
+            text={transaction.info.summary}
+            kind="neutral"
+          />
+        ) : undefined}
         <Part
           title={<i18n.Translate>Exchange</i18n.Translate>}
           text={transaction.exchangeBaseUrl}
           kind="neutral"
         />
-        <Part
-          title={<i18n.Translate>URI</i18n.Translate>}
-          text={<ShowQrWithCopy text={transaction.talerUri} />}
-          kind="neutral"
-        />
+        {!transaction.info.completed && (
+          <Part
+            title={<i18n.Translate>URI</i18n.Translate>}
+            text={<ShowQrWithCopy text={transaction.talerUri} />}
+            kind="neutral"
+          />
+        )}
         <Part
           title={<i18n.Translate>Details</i18n.Translate>}
           text={
@@ -635,6 +659,13 @@ export function TransactionView({
           Invoice
         </Header>
 
+        {transaction.info.summary ? (
+          <Part
+            title={<i18n.Translate>Subject</i18n.Translate>}
+            text={transaction.info.summary}
+            kind="neutral"
+          />
+        ) : undefined}
         <Part
           title={<i18n.Translate>Exchange</i18n.Translate>}
           text={transaction.exchangeBaseUrl}
@@ -667,16 +698,25 @@ export function TransactionView({
           Transfer
         </Header>
 
+        {transaction.info.summary ? (
+          <Part
+            title={<i18n.Translate>Subject</i18n.Translate>}
+            text={transaction.info.summary}
+            kind="neutral"
+          />
+        ) : undefined}
         <Part
           title={<i18n.Translate>Exchange</i18n.Translate>}
           text={transaction.exchangeBaseUrl}
           kind="neutral"
         />
-        <Part
-          title={<i18n.Translate>URI</i18n.Translate>}
-          text={<QR text={transaction.talerUri} />}
-          kind="neutral"
-        />
+        {!transaction.info.completed && (
+          <Part
+            title={<i18n.Translate>URI</i18n.Translate>}
+            text={<ShowQrWithCopy text={transaction.talerUri} />}
+            kind="neutral"
+          />
+        )}
         <Part
           title={<i18n.Translate>Details</i18n.Translate>}
           text={
@@ -705,6 +745,13 @@ export function TransactionView({
           Transfer
         </Header>
 
+        {transaction.info.summary ? (
+          <Part
+            title={<i18n.Translate>Subject</i18n.Translate>}
+            text={transaction.info.summary}
+            kind="neutral"
+          />
+        ) : undefined}
         <Part
           title={<i18n.Translate>Exchange</i18n.Translate>}
           text={transaction.exchangeBaseUrl}