some fixes

-fix fulfillment messages
-fix product list pricing and image on payment
-filter exchange by currency on withdrawal
-error message on operation error on withdrawal
-add taler url on balance page (just for dev)
-add no balance help
-better text when doing manual withdraw for the firt time
-removed balance from wallet (just history)
-removed pending page

9 files changed, 33 insertions, 374 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Balance.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Balance.stories.tsx
deleted file mode 100644
index 6c670b019..000000000
--- a/packages/taler-wallet-webextension/src/wallet/Balance.stories.tsx
+++ /dev/null
@@ -1,151 +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 { createExample } from "../test-utils";
-import { BalanceView as TestedComponent } from "./BalancePage";
-
-export default {
-  title: "wallet/balance",
-  component: TestedComponent,
-  argTypes: {},
-};
-
-export const EmptyBalance = createExample(TestedComponent, {
-  balances: [],
-});
-
-export const SomeCoins = createExample(TestedComponent, {
-  balances: [
-    {
-      available: "USD:10.5",
-      hasPendingTransactions: false,
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      requiresUserInput: false,
-    },
-  ],
-});
-
-export const SomeCoinsInTreeCurrencies = createExample(TestedComponent, {
-  balances: [
-    {
-      available: "EUR:1",
-      hasPendingTransactions: false,
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "TESTKUDOS:2000",
-      hasPendingTransactions: false,
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "JPY:4",
-      hasPendingTransactions: false,
-      pendingIncoming: "EUR:15",
-      pendingOutgoing: "EUR:0",
-      requiresUserInput: false,
-    },
-  ],
-});
-
-export const NoCoinsInTreeCurrencies = createExample(TestedComponent, {
-  balances: [
-    {
-      available: "EUR:3",
-      hasPendingTransactions: false,
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "USD:2",
-      hasPendingTransactions: false,
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "ARS:1",
-      hasPendingTransactions: false,
-      pendingIncoming: "EUR:15",
-      pendingOutgoing: "EUR:0",
-      requiresUserInput: false,
-    },
-  ],
-});
-
-export const SomeCoinsInFiveCurrencies = createExample(TestedComponent, {
-  balances: [
-    {
-      available: "USD:0",
-      hasPendingTransactions: false,
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "ARS:13451",
-      hasPendingTransactions: false,
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "EUR:202.02",
-      hasPendingTransactions: false,
-      pendingIncoming: "EUR:0",
-      pendingOutgoing: "EUR:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "JPY:0",
-      hasPendingTransactions: false,
-      pendingIncoming: "EUR:0",
-      pendingOutgoing: "EUR:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "JPY:51223233",
-      hasPendingTransactions: false,
-      pendingIncoming: "EUR:0",
-      pendingOutgoing: "EUR:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "DEMOKUDOS:6",
-      hasPendingTransactions: false,
-      pendingIncoming: "USD:0",
-      pendingOutgoing: "USD:0",
-      requiresUserInput: false,
-    },
-    {
-      available: "TESTKUDOS:6",
-      hasPendingTransactions: false,
-      pendingIncoming: "USD:5",
-      pendingOutgoing: "USD:0",
-      requiresUserInput: false,
-    },
-  ],
-});
diff --git a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
deleted file mode 100644
index 111ac86c6..000000000
--- a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
+++ /dev/null
@@ -1,121 +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 { Amounts, Balance, i18n } from "@gnu-taler/taler-util";
-import { Fragment, h, VNode } from "preact";
-import { BalanceTable } from "../components/BalanceTable";
-import { Loading } from "../components/Loading";
-import { LoadingError } from "../components/LoadingError";
-import { MultiActionButton } from "../components/MultiActionButton";
-import { ButtonPrimary, Centered } from "../components/styled";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
-import { PageLink } from "../renderHtml";
-import * as wxApi from "../wxApi";
-
-interface Props {
-  goToWalletDeposit: (currency: string) => void;
-  goToWalletHistory: (currency: string) => void;
-  goToWalletManualWithdraw: () => void;
-}
-
-export function BalancePage({
-  goToWalletManualWithdraw,
-  goToWalletDeposit,
-  goToWalletHistory,
-}: Props): VNode {
-  const state = useAsyncAsHook(wxApi.getBalance);
-
-  const balances = !state || state.hasError ? [] : state.response.balances;
-
-  if (!state) {
-    return <Loading />;
-  }
-
-  if (state.hasError) {
-    return <LoadingError title="Could not load balance page" error={state} />;
-  }
-
-  return (
-    <BalanceView
-      balances={balances}
-      goToWalletManualWithdraw={goToWalletManualWithdraw}
-      goToWalletDeposit={goToWalletDeposit}
-      goToWalletHistory={goToWalletHistory}
-    />
-  );
-}
-
-export interface BalanceViewProps {
-  balances: Balance[];
-  goToWalletManualWithdraw: () => void;
-  goToWalletDeposit: (currency: string) => void;
-  goToWalletHistory: (currency: string) => void;
-}
-
-export function BalanceView({
-  balances,
-  goToWalletManualWithdraw,
-  goToWalletDeposit,
-  goToWalletHistory,
-}: BalanceViewProps): VNode {
-  const currencyWithNonZeroAmount = balances
-    .filter((b) => !Amounts.isZero(b.available))
-    .map((b) => b.available.split(":")[0]);
-
-  if (balances.length === 0) {
-    return (
-      <Fragment>
-        <p>
-          <Centered style={{ marginTop: 100 }}>
-            <i18n.Translate>
-              You have no balance to show. Need some{" "}
-              <PageLink pageName="/welcome">help</PageLink> getting started?
-            </i18n.Translate>
-          </Centered>
-        </p>
-        <footer style={{ justifyContent: "space-between" }}>
-          <div />
-          <ButtonPrimary onClick={goToWalletManualWithdraw}>
-            Withdraw
-          </ButtonPrimary>
-        </footer>
-      </Fragment>
-    );
-  }
-
-  return (
-    <Fragment>
-      <section>
-        <BalanceTable
-          balances={balances}
-          goToWalletHistory={goToWalletHistory}
-        />
-      </section>
-      <footer style={{ justifyContent: "space-between" }}>
-        <ButtonPrimary onClick={goToWalletManualWithdraw}>
-          Withdraw
-        </ButtonPrimary>
-        {currencyWithNonZeroAmount.length > 0 && (
-          <MultiActionButton
-            label={(s) => `Deposit ${s}`}
-            actions={currencyWithNonZeroAmount}
-            onClick={(c) => goToWalletDeposit(c)}
-          />
-        )}
-      </footer>
-    </Fragment>
-  );
-}
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index f32a2aa5c..0ca07816e 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -98,12 +98,20 @@ export function CreateManualWithdraw({
 
   if (!initialExchange) {
     return (
-      <Centered style={{ marginTop: 100 }}>
-        <BoldLight>No exchange configured</BoldLight>
-        <ButtonSuccess onClick={onAddExchange}>
-          <i18n.Translate>Add exchange</i18n.Translate>
-        </ButtonSuccess>
-      </Centered>
+      <section>
+        <h2>Manual Withdrawal</h2>
+        <LightText>
+          Choose a exchange from where the coins will be withdrawn. The exchange
+          will send the coins to this wallet after receiving a wire transfer
+          with the correct subject.
+        </LightText>
+        <Centered style={{ marginTop: 100 }}>
+          <BoldLight>No exchange configured</BoldLight>
+          <ButtonSuccess onClick={onAddExchange}>
+            <i18n.Translate>Add exchange</i18n.Translate>
+          </ButtonSuccess>
+        </Centered>
+      </section>
     );
   }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index d8e46cc46..c4ba4f2a3 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
@@ -6,7 +6,13 @@ import {
 import { Fragment, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { ErrorMessage } from "../components/ErrorMessage";
-import { Button, ButtonPrimary, Input, WarningBox } from "../components/styled";
+import {
+  Button,
+  ButtonPrimary,
+  Input,
+  LightText,
+  WarningBox,
+} from "../components/styled";
 
 export interface Props {
   initialValue?: string;
@@ -89,6 +95,14 @@ export function ExchangeSetUrlPage({
         ) : (
           <h2>Add exchange for {expectedCurrency}</h2>
         )}
+        {!result && (
+          <LightText>Enter the URL of an exchange you trust.</LightText>
+        )}
+        {result && (
+          <LightText>
+            An exchange has been found! Review the information and click next
+          </LightText>
+        )}
         {result && expectedCurrency && expectedCurrency !== result.currency && (
           <WarningBox>
             This exchange doesn't match the expected currency{" "}
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index 921ac5005..bd52995d9 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -35,7 +35,7 @@ import { HistoryView as TestedComponent } from "./History";
 import { createExample } from "../test-utils";
 
 export default {
-  title: "wallet/balance/history",
+  title: "wallet/balance",
   component: TestedComponent,
 };
 
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index d873578b3..2fae07525 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -37,6 +37,7 @@ import {
 import { Time } from "../components/Time";
 import { TransactionItem } from "../components/TransactionItem";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { NoBalanceHelp } from "../popup/NoBalanceHelp";
 import * as wxApi from "../wxApi";
 
 interface Props {
@@ -130,14 +131,7 @@ export function HistoryView({
 
   if (balances.length === 0 || !selectedCurrency) {
     return (
-      <WarningBox>
-        <p>
-          You have <b>no balance</b>. Withdraw some funds into your wallet
-        </p>
-        <ButtonBoxWarning onClick={() => goToWalletManualWithdraw()}>
-          Withdraw
-        </ButtonBoxWarning>
-      </WarningBox>
+      <NoBalanceHelp goToWalletManualWithdraw={goToWalletManualWithdraw} />
     );
   }
   return (
diff --git a/packages/taler-wallet-webextension/src/wallet/PendingPage.stories.tsx b/packages/taler-wallet-webextension/src/wallet/PendingPage.stories.tsx
deleted file mode 100644
index cbcb5a824..000000000
--- a/packages/taler-wallet-webextension/src/wallet/PendingPage.stories.tsx
+++ /dev/null
@@ -1,33 +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 { createExample } from "../test-utils";
-import { queryToSlashKeys } from "../utils/index";
-import { Pending as TestedComponent } from "./PendingPage";
-
-export default {
-  title: "wallet/pending",
-  component: TestedComponent,
-};
-
-export const InitialState = createExample(TestedComponent, {
-  onVerify: queryToSlashKeys,
-});
diff --git a/packages/taler-wallet-webextension/src/wallet/PendingPage.tsx b/packages/taler-wallet-webextension/src/wallet/PendingPage.tsx
deleted file mode 100644
index 998095238..000000000
--- a/packages/taler-wallet-webextension/src/wallet/PendingPage.tsx
+++ /dev/null
@@ -1,35 +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 { h, VNode } from "preact";
-import { useState } from "preact/hooks";
-import { ButtonPrimary } from "../components/styled";
-import { AddNewActionView } from "./AddNewActionView";
-
-export function Pending(): VNode {
-  const [addingAction, setAddingAction] = useState(false);
-
-  if (addingAction) {
-    return <AddNewActionView onCancel={() => setAddingAction(false)} />;
-  }
-
-  return (
-    <section>
-      <div />
-      <ButtonPrimary onClick={() => setAddingAction(true)}>+</ButtonPrimary>
-    </section>
-  );
-}
diff --git a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
index 55f350d46..1e19445f8 100644
--- a/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/index.stories.tsx
@@ -20,7 +20,6 @@
  */
 
 import * as a1 from "./Backup.stories";
-import * as a2 from "./Balance.stories";
 import * as a3 from "./CreateManualWithdraw.stories";
 import * as a4 from "./DepositPage.stories";
 import * as a5 from "./ExchangeAddConfirm.stories";
@@ -35,20 +34,4 @@ import * as a13 from "./Transaction.stories";
 import * as a14 from "./Welcome.stories";
 import * as a15 from "./AddNewActionView.stories";
 
-export default [
-  a1,
-  a2,
-  a3,
-  a4,
-  a5,
-  a6,
-  a7,
-  a8,
-  a9,
-  a10,
-  a11,
-  a12,
-  a13,
-  a14,
-  a15,
-];
+export default [a1, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15];