using CTA for manual withdrawal

21 files changed, 675 insertions, 74 deletions

diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index 42a365f8c..4499bcdf8 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -85,9 +85,6 @@ export const Pages = {
   balanceHistory: pageDefinition<{ currency?: string }>(
     "/balance/history/:currency?",
   ),
-  balanceManualWithdraw: pageDefinition<{ amount?: string }>(
-    "/balance/manual-withdraw/:amount?",
-  ),
   balanceDeposit: pageDefinition<{ currency: string }>(
     "/balance/deposit/:currency",
   ),
@@ -111,12 +108,18 @@ export const Pages = {
     "/settings/exchange/add/:currency?",
   ),
 
+  invoice: pageDefinition<{ amount?: string }>("/receive/invoice/:amount?"),
+
   cta: pageDefinition<{ action: string }>("/cta/:action"),
   ctaPay: "/cta/pay",
   ctaRefund: "/cta/refund",
   ctaTips: "/cta/tip",
   ctaWithdraw: "/cta/withdraw",
   ctaDeposit: "/cta/deposit",
+
+  ctaWithdrawManual: pageDefinition<{ amount?: string }>(
+    "/cta/manual-withdraw/:amount?",
+  ),
 };
 
 export function PopupNavBar({ path = "" }: { path?: string }): VNode {
diff --git a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
index 5decb1632..b60c86021 100644
--- a/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx
@@ -48,7 +48,9 @@ export function TermsOfServiceSection({
         return (
           <Fragment>
             {terms.status === "notfound" && (
-              <section>
+              <section
+                style={{ justifyContent: "space-around", display: "flex" }}
+              >
                 <WarningText>
                   <i18n.Translate>
                     Exchange doesn&apos;t have terms of service
@@ -62,7 +64,9 @@ export function TermsOfServiceSection({
       return (
         <Fragment>
           {terms.status === "notfound" && (
-            <section>
+            <section
+              style={{ justifyContent: "space-around", display: "flex" }}
+            >
               <WarningText>
                 <i18n.Translate>
                   Exchange doesn&apos;t have terms of service
@@ -71,7 +75,9 @@ export function TermsOfServiceSection({
             </section>
           )}
           {terms.status === "new" && (
-            <section>
+            <section
+              style={{ justifyContent: "space-around", display: "flex" }}
+            >
               <Button
                 variant="contained"
                 color="success"
@@ -84,7 +90,9 @@ export function TermsOfServiceSection({
             </section>
           )}
           {terms.status === "changed" && (
-            <section>
+            <section
+              style={{ justifyContent: "space-around", display: "flex" }}
+            >
               <Button
                 variant="contained"
                 color="success"
@@ -102,13 +110,13 @@ export function TermsOfServiceSection({
     return (
       <Fragment>
         {ableToReviewTermsOfService && (
-          <section>
+          <section style={{ justifyContent: "space-around", display: "flex" }}>
             <LinkSuccess upperCased onClick={() => onReview(true)}>
               <i18n.Translate>Show terms of service</i18n.Translate>
             </LinkSuccess>
           </section>
         )}
-        <section>
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
           <CheckboxOutlined
             name="terms"
             enabled={reviewed}
@@ -129,7 +137,7 @@ export function TermsOfServiceSection({
   return (
     <Fragment>
       {terms.status !== "notfound" && !terms.content && (
-        <section>
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
           <WarningBox>
             <i18n.Translate>
               The exchange reply with a empty terms of service
@@ -138,7 +146,7 @@ export function TermsOfServiceSection({
         </section>
       )}
       {terms.status !== "accepted" && terms.content && (
-        <section>
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
           {terms.content.type === "xml" && (
             <TermsOfService>
               <ExchangeXmlTos doc={terms.content.document} />
@@ -160,14 +168,14 @@ export function TermsOfServiceSection({
         </section>
       )}
       {reviewed && ableToReviewTermsOfService && (
-        <section>
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
           <LinkSuccess upperCased onClick={() => onReview(false)}>
             <i18n.Translate>Hide terms of service</i18n.Translate>
           </LinkSuccess>
         </section>
       )}
       {terms.status !== "notfound" && (
-        <section>
+        <section style={{ justifyContent: "space-around", display: "flex" }}>
           <CheckboxOutlined
             name="terms"
             enabled={reviewed}
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
index b12e8df3b..7425dbd29 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
@@ -23,15 +23,20 @@ import * as wxApi from "../../wxApi.js";
 import {
   Props as TermsOfServiceSectionProps
 } from "../TermsOfServiceSection.js";
-import { useComponentState } from "./state.js";
+import { useComponentStateFromParams, useComponentStateFromURI } from "./state.js";
 import { CompletedView, LoadingExchangeView, LoadingInfoView, LoadingUriView, SuccessView } from "./views.js";
 
 
-export interface Props {
+export interface PropsFromURI {
   talerWithdrawUri: string | undefined;
   cancel: () => Promise<void>;
 }
 
+export interface PropsFromParams {
+  amount: string;
+  cancel: () => Promise<void>;
+}
+
 export type State =
   | State.Loading
   | State.LoadingUriError
@@ -93,4 +98,5 @@ const viewMapping: StateViewMap<State> = {
   success: SuccessView,
 };
 
-export const WithdrawPage = compose("Withdraw", (p: Props) => useComponentState(p, wxApi), viewMapping)
+export const WithdrawPageFromURI = compose("WithdrawPageFromURI", (p: PropsFromURI) => useComponentStateFromURI(p, wxApi), viewMapping)
+export const WithdrawPageFromParams = compose("WithdrawPageFromParams", (p: PropsFromParams) => useComponentStateFromParams(p, wxApi), viewMapping)
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
index 849dd5cca..3b138e74d 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
@@ -15,16 +15,210 @@
  */
 
 
-import { Amounts } from "@gnu-taler/taler-util";
+import { Amounts, parsePaytoUri } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
 import { buildTermsOfServiceState } from "../../utils/index.js";
 import * as wxApi from "../../wxApi.js";
-import { Props, State } from "./index.js";
+import { PropsFromURI, PropsFromParams, State } from "./index.js";
 
-export function useComponentState(
-  { talerWithdrawUri, cancel }: Props,
+export function useComponentStateFromParams(
+  { amount, cancel }: PropsFromParams,
+  api: typeof wxApi,
+): State {
+
+  const [ageRestricted, setAgeRestricted] = useState(0);
+
+  const exchangeHook = useAsyncAsHook(api.listExchanges);
+
+  const exchangeHookDep =
+    !exchangeHook || exchangeHook.hasError || !exchangeHook.response
+      ? undefined
+      : exchangeHook.response;
+
+  const chosenAmount = Amounts.parseOrThrow(amount);
+
+  // get the first exchange with the currency as the default one
+  const exchange = exchangeHookDep ? exchangeHookDep.exchanges.find(e => e.currency === chosenAmount.currency) : undefined
+  /**
+   * For the exchange selected, bring the status of the terms of service
+   */
+  const terms = useAsyncAsHook(async () => {
+    if (!exchange) return undefined
+
+    const exchangeTos = await api.getExchangeTos(exchange.exchangeBaseUrl, ["text/xml"]);
+
+    const state = buildTermsOfServiceState(exchangeTos);
+
+    return { state };
+  }, [exchangeHookDep]);
+
+  /**
+   * With the exchange and amount, ask the wallet the information
+   * about the withdrawal
+   */
+  const amountHook = useAsyncAsHook(async () => {
+    if (!exchange) return undefined
+
+    const info = await api.getExchangeWithdrawalInfo({
+      exchangeBaseUrl: exchange.exchangeBaseUrl,
+      amount: chosenAmount,
+      tosAcceptedFormat: ["text/xml"],
+    });
+
+    const withdrawAmount = {
+      raw: Amounts.parseOrThrow(info.withdrawalAmountRaw),
+      effective: Amounts.parseOrThrow(info.withdrawalAmountEffective),
+    }
+
+    return { amount: withdrawAmount };
+  }, [exchangeHookDep]);
+
+  const [reviewing, setReviewing] = useState<boolean>(false);
+  const [reviewed, setReviewed] = useState<boolean>(false);
+
+  const [withdrawError, setWithdrawError] = useState<TalerError | undefined>(
+    undefined,
+  );
+  const [doingWithdraw, setDoingWithdraw] = useState<boolean>(false);
+  const [withdrawCompleted, setWithdrawCompleted] = useState<boolean>(false);
+
+  if (!exchangeHook) return { status: "loading", error: undefined }
+  if (exchangeHook.hasError) {
+    return {
+      status: "loading-uri",
+      error: exchangeHook,
+    };
+  }
+
+  if (!exchange) {
+    return {
+      status: "loading-exchange",
+      error: {
+        hasError: true,
+        operational: false,
+        message: "ERROR_NO-DEFAULT-EXCHANGE",
+      },
+    };
+  }
+
+  async function doWithdrawAndCheckError(): Promise<void> {
+    if (!exchange) return;
+
+    try {
+      setDoingWithdraw(true);
+
+      const response = await wxApi.acceptManualWithdrawal(
+        exchange.exchangeBaseUrl,
+        Amounts.stringify(amount),
+      );
+
+      setWithdrawCompleted(true);
+    } catch (e) {
+      if (e instanceof TalerError) {
+        setWithdrawError(e);
+      }
+    }
+    setDoingWithdraw(false);
+  }
+
+  if (!amountHook) {
+    return { status: "loading", error: undefined }
+  }
+  if (amountHook.hasError) {
+    return {
+      status: "loading-info",
+      error: amountHook,
+    };
+  }
+  if (!amountHook.response) {
+    return { status: "loading", error: undefined };
+  }
+  if (withdrawCompleted) {
+    return { status: "completed", error: undefined };
+  }
+
+  const withdrawalFee = Amounts.sub(
+    amountHook.response.amount.raw,
+    amountHook.response.amount.effective,
+  ).amount;
+  const toBeReceived = amountHook.response.amount.effective;
+
+  const { state: termsState } = (!terms
+    ? undefined
+    : terms.hasError
+      ? undefined
+      : terms.response) || { state: undefined };
+
+  async function onAccept(accepted: boolean): Promise<void> {
+    if (!termsState || !exchange) return;
+
+    try {
+      await api.setExchangeTosAccepted(
+        exchange.exchangeBaseUrl,
+        accepted ? termsState.version : undefined,
+      );
+      setReviewed(accepted);
+    } catch (e) {
+      if (e instanceof Error) {
+        //FIXME: uncomment this and display error
+        // setErrorAccepting(e.message);
+      }
+    }
+  }
+
+  const mustAcceptFirst =
+    termsState !== undefined &&
+    (termsState.status === "changed" || termsState.status === "new");
+
+  const ageRestrictionOptions: Record<string, string> | undefined = "6:12:18"
+    .split(":")
+    .reduce((p, c) => ({ ...p, [c]: `under ${c}` }), {});
+
+  if (ageRestrictionOptions) {
+    ageRestrictionOptions["0"] = "Not restricted";
+  }
+
+  //TODO: calculate based on exchange info
+  const ageRestrictionEnabled = false;
+  const ageRestriction = ageRestrictionEnabled ? {
+    list: ageRestrictionOptions,
+    value: String(ageRestricted),
+    onChange: async (v: string) => setAgeRestricted(parseInt(v, 10)),
+  } : undefined;
+
+  return {
+    status: "success",
+    error: undefined,
+    exchangeUrl: exchange.exchangeBaseUrl,
+    toBeReceived,
+    withdrawalFee,
+    chosenAmount,
+    ageRestriction,
+    doWithdrawal: {
+      onClick:
+        doingWithdraw || (mustAcceptFirst && !reviewed)
+          ? undefined
+          : doWithdrawAndCheckError,
+      error: withdrawError,
+    },
+    tosProps: !termsState
+      ? undefined
+      : {
+        onAccept,
+        onReview: setReviewing,
+        reviewed: reviewed,
+        reviewing: reviewing,
+        terms: termsState,
+      },
+    mustAcceptFirst,
+    cancel,
+  };
+}
+
+export function useComponentStateFromURI(
+  { talerWithdrawUri, cancel }: PropsFromURI,
   api: typeof wxApi,
 ): State {
   const [ageRestricted, setAgeRestricted] = useState(0);
@@ -50,21 +244,6 @@ export function useComponentState(
       ? undefined
       : uriInfoHook.response;
 
-  // const { amount, thisExchange } = useMemo(() => {
-  // if (!uriHookDep)
-  //   return {
-  //     amount: undefined,
-  //     thisExchange: undefined,
-  //     thisCurrencyExchanges: [],
-  //   };
-
-  // const { uriInfo } = uriHookDep;
-
-  // const amount = uriHookDep ? Amounts.parseOrThrow(uriHookDep.amount) : undefined;
-  // const thisExchange = uriHookDep?.thisExchange;
-
-  // return { amount, thisExchange };
-  // }, [uriHookDep]);
 
   /**
    * For the exchange selected, bring the status of the terms of service
@@ -118,6 +297,7 @@ export function useComponentState(
   }
 
   const { amount, thisExchange } = uriInfoHook.response
+
   const chosenAmount = Amounts.parseOrThrow(amount);
 
   if (!thisExchange) {
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
index dd3f6c9c7..c72f906e5 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/test.ts
@@ -27,7 +27,7 @@ import {
 import { ExchangeWithdrawDetails } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
 import { mountHook } from "../../test-utils.js";
-import { useComponentState } from "./state.js";
+import { useComponentStateFromURI } from "./state.js";
 
 const exchanges: ExchangeListItem[] = [
   {
@@ -56,7 +56,7 @@ describe("Withdraw CTA states", () => {
   it("should tell the user that the URI is missing", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerWithdrawUri: undefined, cancel: async () => { null } }, {
+        useComponentStateFromURI({ talerWithdrawUri: undefined, cancel: async () => { null } }, {
           listExchanges: async () => ({ exchanges }),
           getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
             amount: "ARS:2",
@@ -88,7 +88,7 @@ describe("Withdraw CTA states", () => {
   it("should tell the user that there is not known exchange", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerWithdrawUri: "taler-withdraw://", cancel: async () => { null } }, {
+        useComponentStateFromURI({ talerWithdrawUri: "taler-withdraw://", cancel: async () => { null } }, {
           listExchanges: async () => ({ exchanges }),
           getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
             amount: "EUR:2",
@@ -122,7 +122,7 @@ describe("Withdraw CTA states", () => {
   it("should be able to withdraw if tos are ok", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerWithdrawUri: "taler-withdraw://", cancel: async () => { null } }, {
+        useComponentStateFromURI({ talerWithdrawUri: "taler-withdraw://", cancel: async () => { null } }, {
           listExchanges: async () => ({ exchanges }),
           getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
             amount: "ARS:2",
@@ -188,7 +188,7 @@ describe("Withdraw CTA states", () => {
   it("should be accept the tos before withdraw", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerWithdrawUri: "taler-withdraw://", cancel: async () => { null } }, {
+        useComponentStateFromURI({ talerWithdrawUri: "taler-withdraw://", cancel: async () => { null } }, {
           listExchanges: async () => ({ exchanges }),
           getWithdrawalDetailsForUri: async ({ talerWithdrawUri }: any) => ({
             amount: "ARS:2",
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 5949076e0..850bd6e8f 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -122,14 +122,17 @@ export function SuccessView(state: State.Success): VNode {
             <div
               style={{
                 display: "flex",
+                alignItems: "center",
               }}
             >
               <i18n.Translate>Exchange</i18n.Translate>
-              <SvgIcon
-                title="Edit"
-                dangerouslySetInnerHTML={{ __html: editIcon }}
-                color="black"
-              />
+              <Link>
+                <SvgIcon
+                  title="Edit"
+                  dangerouslySetInnerHTML={{ __html: editIcon }}
+                  color="black"
+                />
+              </Link>
             </div>
           }
           text={<ExchangeDetails exchange={state.exchangeUrl} />}
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx
index 9ad979c93..a7c574b27 100644
--- a/packages/taler-wallet-webextension/src/popup/Application.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -118,7 +118,7 @@ export function Application(): VNode {
                   component={RedirectToWalletPage}
                 />
                 <Route
-                  path={Pages.balanceManualWithdraw.pattern}
+                  path={Pages.ctaWithdrawManual.pattern}
                   component={RedirectToWalletPage}
                 />
                 <Route
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index 316a1c0e5..b39a7936b 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -37,7 +37,10 @@ import {
 import { PaymentPage } from "../cta/Payment/index.js";
 import { RefundPage } from "../cta/Refund/index.js";
 import { TipPage } from "../cta/Tip/index.js";
-import { WithdrawPage } from "../cta/Withdraw/index.js";
+import {
+  WithdrawPageFromParams,
+  WithdrawPageFromURI,
+} from "../cta/Withdraw/index.js";
 import { DepositPage as DepositPageCTA } from "../cta/Deposit/index.js";
 import { Pages, WalletNavBar } from "../NavigationBar.js";
 import { DeveloperPage } from "./DeveloperPage.js";
@@ -151,7 +154,10 @@ export function Application(): VNode {
                 path={Pages.receiveCash.pattern}
                 component={DestinationSelectionGetCash}
                 goToWalletManualWithdraw={(amount?: string) =>
-                  redirectTo(Pages.balanceManualWithdraw({ amount }))
+                  redirectTo(Pages.ctaWithdrawManual({ amount }))
+                }
+                goToWalletWalletInvoice={(amount?: string) =>
+                  redirectTo(Pages.ctaWithdrawManual({ amount }))
                 }
               />
               <Route
@@ -163,12 +169,6 @@ export function Application(): VNode {
               />
 
               <Route
-                path={Pages.balanceManualWithdraw.pattern}
-                component={ManualWithdrawPage}
-                onCancel={() => redirectTo(Pages.balance)}
-              />
-
-              <Route
                 path={Pages.balanceDeposit.pattern}
                 component={DepositPage}
                 onCancel={(currency: string) => {
@@ -237,7 +237,7 @@ export function Application(): VNode {
                 path={Pages.ctaPay}
                 component={PaymentPage}
                 goToWalletManualWithdraw={(amount?: string) =>
-                  redirectTo(Pages.balanceManualWithdraw({ amount }))
+                  redirectTo(Pages.ctaWithdrawManual({ amount }))
                 }
                 cancel={() => redirectTo(Pages.balance)}
               />
@@ -253,7 +253,12 @@ export function Application(): VNode {
               />
               <Route
                 path={Pages.ctaWithdraw}
-                component={WithdrawPage}
+                component={WithdrawPageFromURI}
+                cancel={() => redirectTo(Pages.balance)}
+              />
+              <Route
+                path={Pages.ctaWithdrawManual.pattern}
+                component={WithdrawPageFromParams}
                 cancel={() => redirectTo(Pages.balance)}
               />
               <Route
diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
index b9c83c06e..5320c6fe2 100644
--- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx
@@ -176,7 +176,9 @@ export function CreateManualWithdraw({
     return (
       <section>
         <SubTitle>
-          <i18n.Translate>Manual Withdrawal</i18n.Translate>
+          <i18n.Translate>
+            Manual Withdrawal for {state.currency.value}
+          </i18n.Translate>
         </SubTitle>
         <LightText>
           <i18n.Translate>
@@ -212,7 +214,9 @@ export function CreateManualWithdraw({
           />
         )}
         <SubTitle>
-          <i18n.Translate>Manual Withdrawal</i18n.Translate>
+          <i18n.Translate>
+            Manual Withdrawal for {state.currency.value}
+          </i18n.Translate>
         </SubTitle>
         <LightText>
           <i18n.Translate>
diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
index c62504538..4952ad225 100644
--- a/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/DestinationSelection.tsx
@@ -18,21 +18,17 @@ import { Amounts } from "@gnu-taler/taler-util";
 import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { ErrorMessage } from "../components/ErrorMessage.js";
 import { Loading } from "../components/Loading.js";
 import { LoadingError } from "../components/LoadingError.js";
 import { SelectList } from "../components/SelectList.js";
 import {
   Input,
-  InputWithLabel,
   LightText,
   LinkPrimary,
-  SubTitle,
   SvgIcon,
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { Alert } from "../mui/Alert.js";
 import { Button } from "../mui/Button.js";
 import { Grid } from "../mui/Grid.js";
 import { Paper } from "../mui/Paper.js";
@@ -54,6 +50,7 @@ interface Props {
   action: "send" | "get";
   amount?: string;
   goToWalletManualWithdraw: (amount: string) => void;
+  goToWalletWalletInvoice: (amount: string) => void;
 }
 
 type Contact = {
@@ -264,6 +261,7 @@ function RowExample({
 export function DestinationSelectionGetCash({
   amount: initialAmount,
   goToWalletManualWithdraw,
+  goToWalletWalletInvoice,
 }: Props): VNode {
   const parsedInitialAmount = !initialAmount
     ? undefined
@@ -293,6 +291,7 @@ export function DestinationSelectionGetCash({
       description: "account ending with 3454",
     },
   ];
+  const previous = previous1;
 
   if (!currency) {
     return (
@@ -331,13 +330,13 @@ export function DestinationSelectionGetCash({
       </Grid>
 
       <Grid container spacing={1} columns={1}>
-        {previous2.length > 0 ? (
+        {previous.length > 0 ? (
           <Fragment>
             <p>Use previous origins:</p>
             <Grid item xs={1}>
               <Paper style={{ padding: 8 }}>
                 <ContactTable>
-                  {previous2.map((info, i) => (
+                  {previous.map((info, i) => (
                     <tr key={i}>
                       <td>
                         <RowExample info={info} disabled={invalid} />
@@ -349,9 +348,15 @@ export function DestinationSelectionGetCash({
             </Grid>
           </Fragment>
         ) : undefined}
-        <Grid item>
-          <p>Or specify a new origin for the money</p>
-        </Grid>
+        {previous.length > 0 ? (
+          <Grid item>
+            <p>Or specify a new origin for the money</p>
+          </Grid>
+        ) : (
+          <Grid item>
+            <p>Specify a origin for the money</p>
+          </Grid>
+        )}
         <Grid item container columns={2} spacing={1}>
           <Grid item xs={1}>
             <Paper style={{ padding: 8 }}>
@@ -369,7 +374,12 @@ export function DestinationSelectionGetCash({
           <Grid item xs={1}>
             <Paper style={{ padding: 8 }}>
               <p>From another wallet</p>
-              <Button disabled>Invoice</Button>
+              <Button
+                disabled={invalid}
+                onClick={async () => goToWalletWalletInvoice(currencyAndAmount)}
+              >
+                Invoice
+              </Button>
             </Paper>
           </Grid>
         </Grid>
@@ -409,6 +419,7 @@ export function DestinationSelectionSendCash({
       description: "account ending with 3454",
     },
   ];
+  const previous = previous1;
 
   if (!currency) {
     return <div>currency not provided</div>;
@@ -440,13 +451,13 @@ export function DestinationSelectionSendCash({
       </div>
 
       <Grid container spacing={1} columns={1}>
-        {previous2.length > 0 ? (
+        {previous.length > 0 ? (
           <Fragment>
             <p>Use previous destinations:</p>
             <Grid item xs={1}>
               <Paper style={{ padding: 8 }}>
                 <ContactTable>
-                  {previous2.map((info, i) => (
+                  {previous.map((info, i) => (
                     <tr key={i}>
                       <td>
                         <RowExample info={info} disabled={invalid} />
@@ -458,9 +469,15 @@ export function DestinationSelectionSendCash({
             </Grid>
           </Fragment>
         ) : undefined}
-        <Grid item>
-          <p>Or specify a new destination for the money</p>
-        </Grid>
+        {previous.length > 0 ? (
+          <Grid item>
+            <p>Or specify a new destination for the money</p>
+          </Grid>
+        ) : (
+          <Grid item>
+            <p>Specify a destination for the money</p>
+          </Grid>
+        )}
         <Grid item container columns={2} spacing={1}>
           <Grid item xs={1}>
             <Paper style={{ padding: 8 }}>
diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts
new file mode 100644
index 000000000..2773e66f7
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/index.ts
@@ -0,0 +1,63 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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/>
+ */
+
+import { Loading } from "../../components/Loading.js";
+import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import { LoadingUriView, ReadyView } from "./views.js";
+import * as wxApi from "../../wxApi.js";
+import { useComponentState } from "./state.js";
+
+export interface Props {
+  p: string;
+}
+
+export type State =
+  | State.Loading
+  | State.LoadingUriError
+  | State.Ready;
+
+export namespace State {
+
+  export interface Loading {
+    status: "loading";
+    error: undefined;
+  }
+
+  export interface LoadingUriError {
+    status: "loading-uri";
+    error: HookError;
+  }
+
+  export interface BaseInfo {
+    error: undefined;
+  }
+  export interface Ready extends BaseInfo {
+    status: "ready";
+    error: undefined;
+  }
+}
+
+const viewMapping: StateViewMap<State> = {
+  loading: Loading,
+  "loading-uri": LoadingUriView,
+  "ready": ReadyView,
+};
+
+
+export const ComponentName = compose("ComponentName", (p: Props) => useComponentState(p, wxApi), viewMapping)
+
+
diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/state.ts b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/state.ts
new file mode 100644
index 000000000..45b174063
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/state.ts
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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/>
+ */
+
+import * as wxApi from "../../wxApi.js";
+import { Props, State } from "./index.js";
+
+export function useComponentState(
+  { p }: Props,
+  api: typeof wxApi,
+): State {
+  return {
+    status: "ready",
+    error: undefined,
+  }
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/stories.tsx b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/stories.tsx
new file mode 100644
index 000000000..696e424c4
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/stories.tsx
@@ -0,0 +1,29 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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.js";
+import { ReadyView } from "./views.js";
+
+export default {
+  title: "example",
+};
+
+export const Ready = createExample(ReadyView, {});
diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/test.ts b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/test.ts
new file mode 100644
index 000000000..631e76d01
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/test.ts
@@ -0,0 +1,31 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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 { expect } from "chai";
+
+describe("test description", () => {
+
+  it("should assert", () => {
+
+    expect([]).deep.equals([])
+  });
+})
+
diff --git a/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx
new file mode 100644
index 000000000..5784a7db5
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/EmptyComponentExample/views.tsx
@@ -0,0 +1,37 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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/>
+ */
+
+import { h, VNode } from "preact";
+import { LoadingError } from "../../components/LoadingError.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { State } from "./index.js";
+
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <LoadingError
+      title={<i18n.Translate>Could not load</i18n.Translate>}
+      error={error}
+    />
+  );
+}
+
+export function ReadyView({ error }: State.Ready): VNode {
+  const { i18n } = useTranslationContext();
+
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
index 1484ef7f4..37fdc8f5e 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/index.ts
@@ -88,7 +88,7 @@ const viewMapping: StateViewMap<State> = {
   "ready": ReadyView,
 };
 
-export const ExchangeSelectionPage = compose("Tip", (p: Props) => useComponentState(p, wxApi), viewMapping)
+export const ExchangeSelectionPage = compose("ExchangeSelectionPage", (p: Props) => useComponentState(p, wxApi), viewMapping)
 
 export interface FeeDescription {
   value: AmountJson;
diff --git a/packages/taler-wallet-webextension/src/wallet/Invoice/index.ts b/packages/taler-wallet-webextension/src/wallet/Invoice/index.ts
new file mode 100644
index 000000000..edb8721ac
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/Invoice/index.ts
@@ -0,0 +1,62 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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/>
+ */
+
+import { Loading } from "../../components/Loading.js";
+import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import { LoadingUriView, ReadyView } from "./views.js";
+import * as wxApi from "../../wxApi.js";
+import { useComponentState } from "./state.js";
+
+export interface Props {
+  p: string;
+}
+
+export type State =
+  | State.Loading
+  | State.LoadingUriError
+  | State.Ready;
+
+export namespace State {
+
+  export interface Loading {
+    status: "loading";
+    error: undefined;
+  }
+
+  export interface LoadingUriError {
+    status: "loading-uri";
+    error: HookError;
+  }
+
+  export interface BaseInfo {
+    error: undefined;
+  }
+  export interface Ready extends BaseInfo {
+    status: "ready";
+    error: undefined;
+  }
+}
+
+const viewMapping: StateViewMap<State> = {
+  loading: Loading,
+  "loading-uri": LoadingUriView,
+  "ready": ReadyView,
+};
+
+
+export const InvoicePage = compose("InvoicePage", (p: Props) => useComponentState(p, wxApi), viewMapping)
+
diff --git a/packages/taler-wallet-webextension/src/wallet/Invoice/state.ts b/packages/taler-wallet-webextension/src/wallet/Invoice/state.ts
new file mode 100644
index 000000000..45b174063
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/Invoice/state.ts
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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/>
+ */
+
+import * as wxApi from "../../wxApi.js";
+import { Props, State } from "./index.js";
+
+export function useComponentState(
+  { p }: Props,
+  api: typeof wxApi,
+): State {
+  return {
+    status: "ready",
+    error: undefined,
+  }
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/Invoice/stories.tsx b/packages/taler-wallet-webextension/src/wallet/Invoice/stories.tsx
new file mode 100644
index 000000000..75f78be1d
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/Invoice/stories.tsx
@@ -0,0 +1,29 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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.js";
+import { ReadyView } from "./views.js";
+
+export default {
+  title: "wallet/invoice",
+};
+
+export const Ready = createExample(ReadyView, {});
diff --git a/packages/taler-wallet-webextension/src/wallet/Invoice/test.ts b/packages/taler-wallet-webextension/src/wallet/Invoice/test.ts
new file mode 100644
index 000000000..631e76d01
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/Invoice/test.ts
@@ -0,0 +1,31 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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 { expect } from "chai";
+
+describe("test description", () => {
+
+  it("should assert", () => {
+
+    expect([]).deep.equals([])
+  });
+})
+
diff --git a/packages/taler-wallet-webextension/src/wallet/Invoice/views.tsx b/packages/taler-wallet-webextension/src/wallet/Invoice/views.tsx
new file mode 100644
index 000000000..5784a7db5
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/Invoice/views.tsx
@@ -0,0 +1,37 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 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/>
+ */
+
+import { h, VNode } from "preact";
+import { LoadingError } from "../../components/LoadingError.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { State } from "./index.js";
+
+export function LoadingUriView({ error }: State.LoadingUriError): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <LoadingError
+      title={<i18n.Translate>Could not load</i18n.Translate>}
+      error={error}
+    />
+  );
+}
+
+export function ReadyView({ error }: State.Ready): VNode {
+  const { i18n } = useTranslationContext();
+
+  return <div />;
+}