copy from popup to wallet

3 files changed, 1 insertions, 494 deletions

diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
index 4a2e1045b..a0655d379 100644
--- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
@@ -23,7 +23,7 @@ import { createExample, NullLink } from '../test-utils';
 import { BalanceView as TestedComponent } from './BalancePage';
 
 export default {
-  title: 'popup/balance/detail',
+  title: 'popup/balance',
   component: TestedComponent,
   argTypes: {
   }
diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx
deleted file mode 100644
index 65302babb..000000000
--- a/packages/taler-wallet-webextension/src/popup/Transaction.stories.tsx
+++ /dev/null
@@ -1,276 +0,0 @@
-/*
- This file is part of GNU Taler
- (C) 2021 Taler Systems S.A.
-
- GNU Taler is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-/**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
-
-import {
-  PaymentStatus,
-  TransactionCommon, TransactionDeposit, TransactionPayment,
-  TransactionRefresh, TransactionRefund, TransactionTip, TransactionType,
-  TransactionWithdrawal,
-  WithdrawalType
-} from '@gnu-taler/taler-util';
-import { createExample } from '../test-utils';
-import { TransactionView as TestedComponent } from './Transaction';
-
-export default {
-  title: 'popup/history/details',
-  component: TestedComponent,
-  argTypes: {
-    onRetry: { action: 'onRetry' },
-    onDelete: { action: 'onDelete' },
-    onBack: { action: 'onBack' },
-  }
-};
-
-const commonTransaction = {
-  amountRaw: 'USD:10',
-  amountEffective: 'USD:9',
-  pending: false,
-  timestamp: {
-    t_ms: new Date().getTime()
-  },
-  transactionId: '12',
-} as TransactionCommon
-
-const exampleData = {
-  withdraw: {
-    ...commonTransaction,
-    type: TransactionType.Withdrawal,
-    exchangeBaseUrl: 'http://exchange.taler',
-    withdrawalDetails: {
-      confirmed: false,
-      exchangePaytoUris: ['payto://x-taler-bank/bank/account'],
-      type: WithdrawalType.ManualTransfer,
-    }
-  } as TransactionWithdrawal,
-  payment: {
-    ...commonTransaction,
-    amountEffective: 'USD:11',
-    type: TransactionType.Payment,
-    info: {
-      contractTermsHash: 'ASDZXCASD',
-      merchant: {
-        name: 'the merchant',
-      },
-      orderId: '2021.167-03NPY6MCYMVGT',
-      products: [],
-      summary: "Essay: Why the Devil's Advocate Doesn't Help Reach the Truth",
-      fulfillmentMessage: '',
-    },
-    proposalId: '1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0',
-    status: PaymentStatus.Accepted,
-  } as TransactionPayment,
-  deposit: {
-    ...commonTransaction,
-    type: TransactionType.Deposit,
-    depositGroupId: '#groupId',
-    targetPaytoUri: 'payto://x-taler-bank/bank/account',
-  } as TransactionDeposit,
-  refresh: {
-    ...commonTransaction,
-    type: TransactionType.Refresh,
-    exchangeBaseUrl: 'http://exchange.taler',
-  } as TransactionRefresh,
-  tip: {
-    ...commonTransaction,
-    type: TransactionType.Tip,
-    merchantBaseUrl: 'http://merchant.taler',
-  } as TransactionTip,
-  refund: {
-    ...commonTransaction,
-    type: TransactionType.Refund,
-    refundedTransactionId: 'payment:1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0',
-    info: {
-      contractTermsHash: 'ASDZXCASD',
-      merchant: {
-        name: 'the merchant',
-      },
-      orderId: '2021.167-03NPY6MCYMVGT',
-      products: [],
-      summary: 'the summary',
-      fulfillmentMessage: '',
-    },
-  } as TransactionRefund,
-}
-
-const transactionError = {
-  code: 2000,
-  details: "details",
-  hint: "this is a hint for the error",
-  message: 'message'
-}
-
-export const Withdraw = createExample(TestedComponent, {
-  transaction: exampleData.withdraw
-});
-
-export const WithdrawError = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.withdraw,
-    error: transactionError,
-  },
-});
-
-export const WithdrawPending = createExample(TestedComponent, {
-  transaction: { ...exampleData.withdraw, pending: true },
-});
-
-
-export const Payment = createExample(TestedComponent, {
-  transaction: exampleData.payment
-});
-
-export const PaymentError = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.payment,
-    error: transactionError
-  },
-});
-
-export const PaymentWithoutFee = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.payment,
-    amountRaw: 'USD:11',
-
-  }
-});
-
-export const PaymentPending = createExample(TestedComponent, {
-  transaction: { ...exampleData.payment, pending: true },
-});
-
-export const PaymentWithProducts = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.payment,
-    info: {
-      ...exampleData.payment.info,
-      summary: 'this order has 5 products',
-      products: [{
-        description: 't-shirt',
-        unit: 'shirts',
-        quantity: 1,
-      }, {
-        description: 't-shirt',
-        unit: 'shirts',
-        quantity: 1,
-      }, {
-        description: 'e-book',
-      }, {
-        description: 'beer',
-        unit: 'pint',
-        quantity: 15,
-      }, {
-        description: 'beer',
-        unit: 'pint',
-        quantity: 15,
-      }]
-    }
-  } as TransactionPayment,
-});
-
-export const PaymentWithLongSummary = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.payment,
-    info: {
-      ...exampleData.payment.info,
-      summary: 'this is a very long summary that will occupy severals lines, this is a very long summary that will occupy severals lines, this is a very long summary that will occupy severals lines, this is a very long summary that will occupy severals lines, ',
-      products: [{
-        description: 'an xl sized t-shirt with some drawings on it, color pink',
-        unit: 'shirts',
-        quantity: 1,
-      }, {
-        description: 'beer',
-        unit: 'pint',
-        quantity: 15,
-      }]
-    }
-  } as TransactionPayment,
-});
-
-
-export const Deposit = createExample(TestedComponent, {
-  transaction: exampleData.deposit
-});
-
-export const DepositError = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.deposit,
-    error: transactionError
-  },
-});
-
-export const DepositPending = createExample(TestedComponent, {
-  transaction: { ...exampleData.deposit, pending: true }
-});
-
-export const Refresh = createExample(TestedComponent, {
-  transaction: exampleData.refresh
-});
-
-export const RefreshError = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.refresh,
-    error: transactionError
-  },
-});
-
-export const Tip = createExample(TestedComponent, {
-  transaction: exampleData.tip
-});
-
-export const TipError = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.tip,
-    error: transactionError
-  },
-});
-
-export const TipPending = createExample(TestedComponent, {
-  transaction: { ...exampleData.tip, pending: true }
-});
-
-export const Refund = createExample(TestedComponent, {
-  transaction: exampleData.refund
-});
-
-export const RefundError = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.refund,
-    error: transactionError
-  },
-});
-
-export const RefundPending = createExample(TestedComponent, {
-  transaction: { ...exampleData.refund, pending: true }
-});
-
-export const RefundWithProducts = createExample(TestedComponent, {
-  transaction: {
-    ...exampleData.refund,
-    info: {
-      ...exampleData.refund.info,
-      products: [{
-        description: 't-shirt',
-      }, {
-        description: 'beer',
-      }]
-    }
-  } as TransactionRefund,
-});
diff --git a/packages/taler-wallet-webextension/src/popup/Transaction.tsx b/packages/taler-wallet-webextension/src/popup/Transaction.tsx
deleted file mode 100644
index 117a098bc..000000000
--- a/packages/taler-wallet-webextension/src/popup/Transaction.tsx
+++ /dev/null
@@ -1,217 +0,0 @@
-/*
- This file is part of TALER
- (C) 2016 GNUnet e.V.
-
- TALER is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- TALER is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-import { AmountJson, Amounts, i18n, Transaction, TransactionType } from "@gnu-taler/taler-util";
-import { format } from "date-fns";
-import { Fragment, JSX, VNode, h } from "preact";
-import { route } from 'preact-router';
-import { useEffect, useState } from "preact/hooks";
-import * as wxApi from "../wxApi";
-import { Pages } from "../NavigationBar";
-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<
-    Transaction | undefined
-  >(undefined);
-
-  useEffect(() => {
-    const fetchData = async (): Promise<void> => {
-      const res = await wxApi.getTransactions();
-      const ts = res.transactions.filter(t => t.transactionId === tid);
-      if (ts.length === 1) {
-        setTransaction(ts[0]);
-      } else {
-        route(Pages.history);
-      }
-    };
-    fetchData();
-  }, []);
-
-  if (!transaction) {
-    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={() => { history.go(-1); }} />;
-}
-
-export interface WalletTransactionProps {
-  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 Fee({ value }: { value: AmountJson }) {
-    if (Amounts.isZero(value)) return null
-    return <span style="font-size: 16px;font-weight: normal;color: gray;">(fee {Amounts.stringify(value)})</span>
-  }
-
-  function TransactionTemplate({ upperRight, children }: { upperRight: VNode, children: VNode[] }) {
-    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 <TransactionTemplate upperRight={<Fragment>From <b>{transaction.exchangeBaseUrl}</b></Fragment>}>
-      <h3>Withdraw <Status /></h3>
-      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-    </TransactionTemplate>
-  }
-
-  const showLargePic = () => {
-
-  }
-
-  if (transaction.type === TransactionType.Payment) {
-    const fee = Amounts.sub(
-      Amounts.parseOrThrow(transaction.amountEffective),
-      Amounts.parseOrThrow(transaction.amountRaw),
-    ).amount
-
-    return <TransactionTemplate upperRight={<Fragment>To <b>{transaction.info.merchant.name}</b></Fragment>}>
-      <h3>Payment <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 &&
-          <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>
-  }
-
-  if (transaction.type === TransactionType.Deposit) {
-    const fee = Amounts.sub(
-      Amounts.parseOrThrow(transaction.amountRaw),
-      Amounts.parseOrThrow(transaction.amountEffective),
-    ).amount
-    return <TransactionTemplate upperRight={<Fragment>To <b>{transaction.targetPaytoUri}</b></Fragment>}>
-      <h3>Deposit <Status /></h3>
-      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-    </TransactionTemplate>
-  }
-
-  if (transaction.type === TransactionType.Refresh) {
-    const fee = Amounts.sub(
-      Amounts.parseOrThrow(transaction.amountRaw),
-      Amounts.parseOrThrow(transaction.amountEffective),
-    ).amount
-    return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.exchangeBaseUrl}</b></Fragment>}>
-      <h3>Refresh <Status /></h3>
-      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-    </TransactionTemplate>
-  }
-
-  if (transaction.type === TransactionType.Tip) {
-    const fee = Amounts.sub(
-      Amounts.parseOrThrow(transaction.amountRaw),
-      Amounts.parseOrThrow(transaction.amountEffective),
-    ).amount
-    return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.merchantBaseUrl}</b></Fragment>}>
-      <h3>Tip <Status /></h3>
-      <h1>{transaction.amountEffective} <Fee value={fee} /></h1>
-    </TransactionTemplate>
-  }
-
-  if (transaction.type === TransactionType.Refund) {
-    const fee = Amounts.sub(
-      Amounts.parseOrThrow(transaction.amountRaw),
-      Amounts.parseOrThrow(transaction.amountEffective),
-    ).amount
-    return <TransactionTemplate upperRight={<Fragment>From <b>{transaction.info.merchant.name}</b></Fragment>}>
-      <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 &&
-          <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>
-  }
-
-
-  return <div></div>
-}