From 1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 15 Nov 2021 11:18:58 -0300
Subject: prettier

---
 .../src/wallet/Transaction.tsx                     | 442 ++++++++++++++-------
 1 file changed, 302 insertions(+), 140 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/wallet/Transaction.tsx')

diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index cf41efb59..7de6982e7 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -14,27 +14,43 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountLike, Amounts, i18n, Transaction, TransactionType } from "@gnu-taler/taler-util";
+import {
+  AmountLike,
+  Amounts,
+  i18n,
+  Transaction,
+  TransactionType,
+} from "@gnu-taler/taler-util";
 import { format } from "date-fns";
-import { JSX, VNode } from "preact";
-import { route } from 'preact-router';
+import { JSX, VNode, h } from "preact";
+import { route } from "preact-router";
 import { useEffect, useState } from "preact/hooks";
 import emptyImg from "../../static/img/empty.png";
 import { ErrorMessage } from "../components/ErrorMessage";
 import { Part } from "../components/Part";
-import { ButtonBox, ButtonBoxDestructive, ButtonPrimary, FontIcon, ListOfProducts, RowBorderGray, SmallLightText, WalletBox, WarningBox } from "../components/styled";
+import {
+  ButtonBox,
+  ButtonBoxDestructive,
+  ButtonPrimary,
+  FontIcon,
+  ListOfProducts,
+  RowBorderGray,
+  SmallLightText,
+  WalletBox,
+  WarningBox,
+} from "../components/styled";
 import { Pages } from "../NavigationBar";
 import * as wxApi from "../wxApi";
 
-export function TransactionPage({ tid }: { tid: string; }): JSX.Element {
-  const [transaction, setTransaction] = useState<
-    Transaction | undefined
-  >(undefined);
+export function TransactionPage({ tid }: { tid: string }): JSX.Element {
+  const [transaction, setTransaction] = useState<Transaction | undefined>(
+    undefined,
+  );
 
   useEffect(() => {
     const fetchData = async (): Promise<void> => {
       const res = await wxApi.getTransactions();
-      const ts = res.transactions.filter(t => t.transactionId === tid);
+      const ts = res.transactions.filter((t) => t.transactionId === tid);
       if (ts.length === 1) {
         setTransaction(ts[0]);
       } else {
@@ -45,13 +61,22 @@ export function TransactionPage({ tid }: { tid: string; }): JSX.Element {
   }, [tid]);
 
   if (!transaction) {
-    return <div><i18n.Translate>Loading ...</i18n.Translate></div>;
+    return (
+      <div>
+        <i18n.Translate>Loading ...</i18n.Translate>
+      </div>
+    );
   }
-  return <TransactionView
-    transaction={transaction}
-    onDelete={() => wxApi.deleteTransaction(tid).then(_ => history.go(-1))}
-    onRetry={() => wxApi.retryTransaction(tid).then(_ => history.go(-1))}
-    onBack={() => { route(Pages.history) }} />;
+  return (
+    <TransactionView
+      transaction={transaction}
+      onDelete={() => wxApi.deleteTransaction(tid).then((_) => history.go(-1))}
+      onRetry={() => wxApi.retryTransaction(tid).then((_) => history.go(-1))}
+      onBack={() => {
+        route(Pages.history);
+      }}
+    />
+  );
 }
 
 export interface WalletTransactionProps {
@@ -61,173 +86,310 @@ export interface WalletTransactionProps {
   onBack: () => void;
 }
 
-export function TransactionView({ transaction, onDelete, onRetry, onBack }: WalletTransactionProps) {
-
+export function TransactionView({
+  transaction,
+  onDelete,
+  onRetry,
+  onBack,
+}: WalletTransactionProps) {
   function TransactionTemplate({ children }: { children: VNode[] }) {
-    return <WalletBox>
-      <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>
-      </section>
-      <footer>
-        <ButtonBox onClick={onBack}><i18n.Translate> <FontIcon>&#x2190;</FontIcon> </i18n.Translate></ButtonBox>
-        <div>
-          {transaction?.error ? <ButtonPrimary onClick={onRetry}><i18n.Translate>retry</i18n.Translate></ButtonPrimary> : null}
-          <ButtonBoxDestructive onClick={onDelete}><i18n.Translate>&#x1F5D1;</i18n.Translate></ButtonBoxDestructive>
-        </div>
-      </footer>
-    </WalletBox>
+    return (
+      <WalletBox>
+        <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>
+        </section>
+        <footer>
+          <ButtonBox onClick={onBack}>
+            <i18n.Translate>
+              {" "}
+              <FontIcon>&#x2190;</FontIcon>{" "}
+            </i18n.Translate>
+          </ButtonBox>
+          <div>
+            {transaction?.error ? (
+              <ButtonPrimary onClick={onRetry}>
+                <i18n.Translate>retry</i18n.Translate>
+              </ButtonPrimary>
+            ) : null}
+            <ButtonBoxDestructive onClick={onDelete}>
+              <i18n.Translate>&#x1F5D1;</i18n.Translate>
+            </ButtonBoxDestructive>
+          </div>
+        </footer>
+      </WalletBox>
+    );
   }
 
   function amountToString(text: AmountLike) {
-    const aj = Amounts.jsonifyAmount(text)
-    const amount = Amounts.stringifyValue(aj)
-    return `${amount} ${aj.currency}`
+    const aj = Amounts.jsonifyAmount(text);
+    const amount = Amounts.stringifyValue(aj);
+    return `${amount} ${aj.currency}`;
   }
 
-
   if (transaction.type === TransactionType.Withdrawal) {
     const fee = Amounts.sub(
       Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
-    ).amount
-    return <TransactionTemplate>
-      <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' />
-      <Part title="Exchange fee" text={amountToString(fee)} kind='negative' />
-      <Part title="Exchange" text={new URL(transaction.exchangeBaseUrl).hostname} kind='neutral' />
-    </TransactionTemplate>
+    ).amount;
+    return (
+      <TransactionTemplate>
+        <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"
+        />
+        <Part title="Exchange fee" text={amountToString(fee)} kind="negative" />
+        <Part
+          title="Exchange"
+          text={new URL(transaction.exchangeBaseUrl).hostname}
+          kind="neutral"
+        />
+      </TransactionTemplate>
+    );
   }
 
-  const showLargePic = () => {
-
-  }
+  const showLargePic = () => {};
 
   if (transaction.type === TransactionType.Payment) {
     const fee = Amounts.sub(
       Amounts.parseOrThrow(transaction.amountEffective),
       Amounts.parseOrThrow(transaction.amountRaw),
-    ).amount
-
-    return <TransactionTemplate>
-      <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' />
-      <Part big title="Fee" text={amountToString(fee)} kind='negative' />
-      <Part title="Merchant" text={transaction.info.merchant.name} kind='neutral' />
-      <Part title="Purchase" text={transaction.info.summary} kind='neutral' />
-      <Part title="Receipt" text={`#${transaction.info.orderId}`} kind='neutral' />
+    ).amount;
 
-      <div>
-        {transaction.info.products && transaction.info.products.length > 0 &&
-          <ListOfProducts>
-            {transaction.info.products.map((p, k) => <RowBorderGray key={k}>
-              <a href="#" onClick={showLargePic}>
-                <img src={p.image ? p.image : emptyImg} />
-              </a>
-              <div>
-                {p.quantity && p.quantity > 0 && <SmallLightText>x {p.quantity} {p.unit}</SmallLightText>}
-                <div>{p.description}</div>
-              </div>
-            </RowBorderGray>)}
-          </ListOfProducts>
-        }
-      </div>
-    </TransactionTemplate>
+    return (
+      <TransactionTemplate>
+        <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"
+        />
+        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
+        <Part
+          title="Merchant"
+          text={transaction.info.merchant.name}
+          kind="neutral"
+        />
+        <Part title="Purchase" text={transaction.info.summary} kind="neutral" />
+        <Part
+          title="Receipt"
+          text={`#${transaction.info.orderId}`}
+          kind="neutral"
+        />
+
+        <div>
+          {transaction.info.products && transaction.info.products.length > 0 && (
+            <ListOfProducts>
+              {transaction.info.products.map((p, k) => (
+                <RowBorderGray key={k}>
+                  <a href="#" onClick={showLargePic}>
+                    <img src={p.image ? p.image : emptyImg} />
+                  </a>
+                  <div>
+                    {p.quantity && p.quantity > 0 && (
+                      <SmallLightText>
+                        x {p.quantity} {p.unit}
+                      </SmallLightText>
+                    )}
+                    <div>{p.description}</div>
+                  </div>
+                </RowBorderGray>
+              ))}
+            </ListOfProducts>
+          )}
+        </div>
+      </TransactionTemplate>
+    );
   }
 
   if (transaction.type === TransactionType.Deposit) {
     const fee = Amounts.sub(
       Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
-    ).amount
-    return <TransactionTemplate>
-      <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' />
-      <Part big title="Fee" text={amountToString(fee)} kind='negative' />
-    </TransactionTemplate>
+    ).amount;
+    return (
+      <TransactionTemplate>
+        <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"
+        />
+        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
+      </TransactionTemplate>
+    );
   }
 
   if (transaction.type === TransactionType.Refresh) {
     const fee = Amounts.sub(
       Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
-    ).amount
-    return <TransactionTemplate>
-      <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' />
-      <Part big title="Fee" text={amountToString(fee)} kind='negative' />
-    </TransactionTemplate>
+    ).amount;
+    return (
+      <TransactionTemplate>
+        <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"
+        />
+        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
+      </TransactionTemplate>
+    );
   }
 
   if (transaction.type === TransactionType.Tip) {
     const fee = Amounts.sub(
       Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
-    ).amount
-    return <TransactionTemplate>
-      <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' />
-      <Part big title="Fee" text={amountToString(fee)} kind='negative' />
-    </TransactionTemplate>
+    ).amount;
+    return (
+      <TransactionTemplate>
+        <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"
+        />
+        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
+      </TransactionTemplate>
+    );
   }
 
   if (transaction.type === TransactionType.Refund) {
     const fee = Amounts.sub(
       Amounts.parseOrThrow(transaction.amountRaw),
       Amounts.parseOrThrow(transaction.amountEffective),
-    ).amount
-    return <TransactionTemplate>
-      <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' />
-      <Part big title="Fee" text={amountToString(fee)} kind='negative' />
-      <Part title="Merchant" text={transaction.info.merchant.name} kind='neutral' />
-      <Part title="Purchase" text={transaction.info.summary} kind='neutral' />
-      <Part title="Receipt" text={`#${transaction.info.orderId}`} kind='neutral' />
-
-      <p>
-        {transaction.info.summary}
-      </p>
-      <div>
-        {transaction.info.products && transaction.info.products.length > 0 &&
-          <ListOfProducts>
-            {transaction.info.products.map((p, k) => <RowBorderGray key={k}>
-              <a href="#" onClick={showLargePic}>
-                <img src={p.image ? p.image : emptyImg} />
-              </a>
-              <div>
-                {p.quantity && p.quantity > 0 && <SmallLightText>x {p.quantity} {p.unit}</SmallLightText>}
-                <div>{p.description}</div>
-              </div>
-            </RowBorderGray>)}
-          </ListOfProducts>
-        }
-      </div>
-    </TransactionTemplate>
-  }
+    ).amount;
+    return (
+      <TransactionTemplate>
+        <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"
+        />
+        <Part big title="Fee" text={amountToString(fee)} kind="negative" />
+        <Part
+          title="Merchant"
+          text={transaction.info.merchant.name}
+          kind="neutral"
+        />
+        <Part title="Purchase" text={transaction.info.summary} kind="neutral" />
+        <Part
+          title="Receipt"
+          text={`#${transaction.info.orderId}`}
+          kind="neutral"
+        />
 
+        <p>{transaction.info.summary}</p>
+        <div>
+          {transaction.info.products && transaction.info.products.length > 0 && (
+            <ListOfProducts>
+              {transaction.info.products.map((p, k) => (
+                <RowBorderGray key={k}>
+                  <a href="#" onClick={showLargePic}>
+                    <img src={p.image ? p.image : emptyImg} />
+                  </a>
+                  <div>
+                    {p.quantity && p.quantity > 0 && (
+                      <SmallLightText>
+                        x {p.quantity} {p.unit}
+                      </SmallLightText>
+                    )}
+                    <div>{p.description}</div>
+                  </div>
+                </RowBorderGray>
+              ))}
+            </ListOfProducts>
+          )}
+        </div>
+      </TransactionTemplate>
+    );
+  }
 
-  return <div></div>
+  return <div></div>;
 }
-- 
cgit v1.2.3