fix broken build since wallet-core new api and placeholder for payment-temlate

16 files changed, 517 insertions, 14 deletions

diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index aa2238753..fb6f280c3 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -117,6 +117,7 @@ export const Pages = {
 
   cta: pageDefinition<{ action: string }>("/cta/:action"),
   ctaPay: "/cta/pay",
+  ctaPayTemplate: "/cta/payTemplate",
   ctaRecovery: "/cta/recovery",
   ctaRefund: "/cta/refund",
   ctaTips: "/cta/tip",
diff --git a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
index 0b5a71b3e..415ee1605 100644
--- a/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
+++ b/packages/taler-wallet-webextension/src/components/TermsOfService/views.tsx
@@ -142,23 +142,38 @@ export function ShowTosContentView({
         <section style={{ justifyContent: "space-around", display: "flex" }}>
           <WarningBox>
             <i18n.Translate>
-              The exchange reply with a empty terms of service
+              The exchange replied with a empty terms of service
             </i18n.Translate>
           </WarningBox>
         </section>
       )}
       {terms.content && (
         <section style={{ justifyContent: "space-around", display: "flex" }}>
-          {terms.content.type === "xml" && (
-            <TermsOfService>
-              <ExchangeXmlTos doc={terms.content.document} />
-            </TermsOfService>
-          )}
-          {terms.content.type === "plain" && (
-            <div style={{ textAlign: "left" }}>
-              <pre>{terms.content.content}</pre>
-            </div>
-          )}
+          {terms.content.type === "xml" &&
+            (!terms.content.document ? (
+              <WarningBox>
+                <i18n.Translate>
+                  No terms of service. The exchange replied with a empty
+                  document
+                </i18n.Translate>
+              </WarningBox>
+            ) : (
+              <TermsOfService>
+                <ExchangeXmlTos doc={terms.content.document} />
+              </TermsOfService>
+            ))}
+          {terms.content.type === "plain" &&
+            (!terms.content.content ? (
+              <WarningBox>
+                <i18n.Translate>
+                  No terms of service. The exchange replied with a empty text
+                </i18n.Translate>
+              </WarningBox>
+            ) : (
+              <div style={{ textAlign: "left" }}>
+                <pre>{terms.content.content}</pre>
+              </div>
+            ))}
           {terms.content.type === "html" && (
             <iframe src={terms.content.href.toString()} />
           )}
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/test.ts b/packages/taler-wallet-webextension/src/cta/Payment/test.ts
index f53be00c9..e92eb78c0 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Payment/test.ts
@@ -27,6 +27,7 @@ import {
   PreparePayResultInsufficientBalance,
   PreparePayResultPaymentPossible,
   PreparePayResultType,
+  ScopeType,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { expect } from "chai";
@@ -143,6 +144,11 @@ describe("Payment CTA states", () => {
             pendingIncoming: "USD:0",
             pendingOutgoing: "USD:0",
             requiresUserInput: false,
+            scopeInfo: {
+              currency: "USD",
+              type: ScopeType.Auditor,
+              url: "",
+            },
           },
         ],
       },
@@ -198,6 +204,11 @@ describe("Payment CTA states", () => {
             pendingIncoming: "USD:0",
             pendingOutgoing: "USD:0",
             requiresUserInput: false,
+            scopeInfo: {
+              currency: "USD",
+              type: ScopeType.Auditor,
+              url: "",
+            },
           },
         ],
       },
@@ -256,6 +267,11 @@ describe("Payment CTA states", () => {
             pendingIncoming: "USD:0",
             pendingOutgoing: "USD:0",
             requiresUserInput: false,
+            scopeInfo: {
+              currency: "USD",
+              type: ScopeType.Auditor,
+              url: "",
+            },
           },
         ],
       },
@@ -312,6 +328,11 @@ describe("Payment CTA states", () => {
             pendingIncoming: "USD:0",
             pendingOutgoing: "USD:0",
             requiresUserInput: false,
+            scopeInfo: {
+              currency: "USD",
+              type: ScopeType.Auditor,
+              url: "",
+            },
           },
         ],
       },
@@ -376,6 +397,11 @@ describe("Payment CTA states", () => {
             pendingIncoming: "USD:0",
             pendingOutgoing: "USD:0",
             requiresUserInput: false,
+            scopeInfo: {
+              currency: "USD",
+              type: ScopeType.Auditor,
+              url: "",
+            },
           },
         ],
       },
@@ -459,6 +485,11 @@ describe("Payment CTA states", () => {
             pendingIncoming: "USD:0",
             pendingOutgoing: "USD:0",
             requiresUserInput: false,
+            scopeInfo: {
+              currency: "USD",
+              type: ScopeType.Auditor,
+              url: "",
+            },
           },
         ],
       },
@@ -485,6 +516,11 @@ describe("Payment CTA states", () => {
             pendingIncoming: "USD:0",
             pendingOutgoing: "USD:0",
             requiresUserInput: false,
+            scopeInfo: {
+              currency: "USD",
+              type: ScopeType.Auditor,
+              url: "",
+            },
           },
         ],
       },
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/index.ts b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/index.ts
new file mode 100644
index 000000000..2cdc8d2e1
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/index.ts
@@ -0,0 +1,56 @@
+/*
+ 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 { ErrorAlertView } from "../../components/CurrentAlerts.js";
+import { Loading } from "../../components/Loading.js";
+import { ErrorAlert } from "../../context/alert.js";
+import { compose, StateViewMap } from "../../utils/index.js";
+import { useComponentState } from "./state.js";
+import { ReadyView } from "./views.js";
+
+export interface Props {
+  talerTemplateUri?: string;
+}
+
+export type State = State.Loading | State.LoadingUriError | State.Ready;
+
+export namespace State {
+  export interface Loading {
+    status: "loading";
+    error: undefined;
+  }
+  export interface LoadingUriError {
+    status: "error";
+    error: ErrorAlert;
+  }
+
+  export interface Ready {
+    status: "ready";
+    error: undefined;
+  }
+}
+
+const viewMapping: StateViewMap<State> = {
+  loading: Loading,
+  error: ErrorAlertView,
+  ready: ReadyView,
+};
+
+export const PaymentTemplatePage = compose(
+  "PaymentTemplate",
+  (p: Props) => useComponentState(p),
+  viewMapping,
+);
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
new file mode 100644
index 000000000..f5e6dee61
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.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 { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
+import { alertFromError } from "../../context/alert.js";
+import { useBackendContext } from "../../context/backend.js";
+import { useTranslationContext } from "../../context/translation.js";
+import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
+import { Props, State } from "./index.js";
+
+export function useComponentState({ talerTemplateUri }: Props): State {
+  // const { pushAlertOnError } = useAlertContext();
+  const api = useBackendContext();
+  const { i18n } = useTranslationContext();
+
+  const hook = useAsyncAsHook(async () => {
+    if (!talerTemplateUri) throw Error("ERROR_NO-URI-FOR-PAYMENT-TEMPLATE");
+    const payStatus = await api.wallet.call(
+      WalletApiOperation.PreparePayForTemplate,
+      {
+        talerPayTemplateUri: talerTemplateUri,
+        templateParams: {},
+      },
+    );
+    const balance = await api.wallet.call(WalletApiOperation.GetBalances, {});
+    return { payStatus, balance, uri: talerTemplateUri };
+  }, []);
+
+  if (!hook) {
+    return {
+      status: "loading",
+      error: undefined,
+    };
+  }
+
+  if (hook.hasError) {
+    return {
+      status: "error",
+      error: alertFromError(
+        i18n.str`Could not load the status of the order template`,
+        hook,
+      ),
+    };
+  }
+
+  return {
+    status: "ready",
+    error: undefined,
+  };
+}
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/stories.tsx b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/stories.tsx
new file mode 100644
index 000000000..32a080959
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/stories.tsx
@@ -0,0 +1,34 @@
+/*
+ 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 { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { ReadyView } from "./views.js";
+
+export default {
+  title: "payment template",
+  component: ReadyView,
+  argTypes: {},
+};
+
+export const PaymentPossible = tests.createExample(ReadyView, {
+  status: "ready",
+  error: undefined,
+});
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/test.ts b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/test.ts
new file mode 100644
index 000000000..d4c65e008
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/test.ts
@@ -0,0 +1,55 @@
+/*
+ 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";
+import { tests } from "../../../../web-util/src/index.browser.js";
+import { createWalletApiMock } from "../../test-utils.js";
+import { useComponentState } from "./state.js";
+
+describe("Order template CTA states", () => {
+  it("should tell the user that the URI is missing", async () => {
+    const { handler, TestingContext } = createWalletApiMock();
+    const props = {
+      talerTemplateUri: undefined,
+    };
+
+    const hookBehavior = await tests.hookBehaveLikeThis(
+      useComponentState,
+      props,
+      [
+        ({ status, error }) => {
+          expect(status).equals("loading");
+          expect(error).undefined;
+        },
+        ({ status, error }) => {
+          expect(status).equals("error");
+          if (error === undefined) expect.fail();
+          // expect(error.hasError).true;
+          // expect(error.operational).false;
+        },
+      ],
+      TestingContext,
+    );
+
+    expect(hookBehavior).deep.equal({ result: "ok" });
+    expect(handler.getCallingQueueState()).eq("empty");
+  });
+});
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx
new file mode 100644
index 000000000..d3f893c7e
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.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/>
+ */
+
+import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "../../context/translation.js";
+import { State } from "./index.js";
+
+export function ReadyView({ status }: State.Ready): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <div>
+      <i18n.Translate>Not yet implemented</i18n.Translate>
+    </div>
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/platform/chrome.ts b/packages/taler-wallet-webextension/src/platform/chrome.ts
index 1c5d5532e..07829641e 100644
--- a/packages/taler-wallet-webextension/src/platform/chrome.ts
+++ b/packages/taler-wallet-webextension/src/platform/chrome.ts
@@ -285,6 +285,9 @@ function openWalletURIFromPopup(maybeTalerUri: string): void {
     case TalerUriType.TalerDevExperiment:
       logger.warn(`taler://dev-experiment URIs are not allowed in headers`);
       return;
+    case TalerUriType.TalerTemplate:
+      logger.warn(`taler://dev-template URIs are not allowed in headers`);
+      return;
     default: {
       const error: never = uriType;
       logger.warn(
diff --git a/packages/taler-wallet-webextension/src/popup/Application.tsx b/packages/taler-wallet-webextension/src/popup/Application.tsx
index c9f98c0fb..ebbbc4c2a 100644
--- a/packages/taler-wallet-webextension/src/popup/Application.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Application.tsx
@@ -157,6 +157,7 @@ function ApplicationView(): VNode {
         component={RedirectToWalletPage}
       />
       <Route path={Pages.sendCash.pattern} component={RedirectToWalletPage} />
+      <Route path={Pages.ctaPayTemplate} component={RedirectToWalletPage} />
       <Route path={Pages.ctaPay} component={RedirectToWalletPage} />
       <Route path={Pages.qr} component={RedirectToWalletPage} />
       <Route path={Pages.settings} component={RedirectToWalletPage} />
diff --git a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
index 0fe9e7b49..6bfc75800 100644
--- a/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
+++ b/packages/taler-wallet-webextension/src/popup/Balance.stories.tsx
@@ -19,6 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { ScopeType } from "@gnu-taler/taler-util";
 import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { BalanceView as TestedComponent } from "./BalancePage.js";
 
@@ -39,6 +40,11 @@ export const SomeCoins = tests.createExample(TestedComponent, {
       pendingIncoming: "USD:0",
       pendingOutgoing: "USD:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
   ],
   addAction: {},
@@ -53,6 +59,11 @@ export const SomeCoinsInTreeCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "USD:0",
       pendingOutgoing: "USD:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "TESTKUDOS:2000",
@@ -60,6 +71,11 @@ export const SomeCoinsInTreeCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "USD:0",
       pendingOutgoing: "USD:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "JPY:4",
@@ -67,6 +83,11 @@ export const SomeCoinsInTreeCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "EUR:15",
       pendingOutgoing: "EUR:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
   ],
   goToWalletManualWithdraw: {},
@@ -81,6 +102,11 @@ export const NoCoinsInTreeCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "USD:0",
       pendingOutgoing: "USD:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "USD:2",
@@ -88,6 +114,11 @@ export const NoCoinsInTreeCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "USD:0",
       pendingOutgoing: "USD:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "ARS:1",
@@ -95,6 +126,11 @@ export const NoCoinsInTreeCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "EUR:15",
       pendingOutgoing: "EUR:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
   ],
   goToWalletManualWithdraw: {},
@@ -109,6 +145,11 @@ export const SomeCoinsInFiveCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "USD:0",
       pendingOutgoing: "USD:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "ARS:13451",
@@ -116,6 +157,11 @@ export const SomeCoinsInFiveCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "USD:0",
       pendingOutgoing: "USD:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "EUR:202.02",
@@ -123,6 +169,11 @@ export const SomeCoinsInFiveCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "EUR:0",
       pendingOutgoing: "EUR:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "JPY:0",
@@ -130,6 +181,11 @@ export const SomeCoinsInFiveCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "EUR:0",
       pendingOutgoing: "EUR:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "JPY:51223233",
@@ -137,6 +193,11 @@ export const SomeCoinsInFiveCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "EUR:0",
       pendingOutgoing: "EUR:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "DEMOKUDOS:6",
@@ -144,6 +205,11 @@ export const SomeCoinsInFiveCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "USD:0",
       pendingOutgoing: "USD:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
     {
       available: "TESTKUDOS:6",
@@ -151,6 +217,11 @@ export const SomeCoinsInFiveCurrencies = tests.createExample(TestedComponent, {
       pendingIncoming: "USD:5",
       pendingOutgoing: "USD:0",
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "TESTKUDOS",
+        type: ScopeType.Auditor,
+        url: "asd",
+      },
     },
   ],
   goToWalletManualWithdraw: {},
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index ec34606dd..007f12bb7 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -29,7 +29,6 @@ import { CurrentAlerts } from "../components/CurrentAlerts.js";
 import { LogoHeader } from "../components/LogoHeader.js";
 import PendingTransactions from "../components/PendingTransactions.js";
 import {
-  Link,
   LinkPrimary,
   SubTitle,
   WalletAction,
@@ -46,6 +45,7 @@ import { DepositPage as DepositPageCTA } from "../cta/Deposit/index.js";
 import { InvoiceCreatePage } from "../cta/InvoiceCreate/index.js";
 import { InvoicePayPage } from "../cta/InvoicePay/index.js";
 import { PaymentPage } from "../cta/Payment/index.js";
+import { PaymentTemplatePage } from "../cta/PaymentTemplate/index.js";
 import { RecoveryPage } from "../cta/Recovery/index.js";
 import { RefundPage } from "../cta/Refund/index.js";
 import { TipPage } from "../cta/Tip/index.js";
@@ -55,8 +55,9 @@ import {
   WithdrawPageFromParams,
   WithdrawPageFromURI,
 } from "../cta/Withdraw/index.js";
-import { WalletNavBarOptions, Pages, WalletNavBar } from "../NavigationBar.js";
+import { Pages, WalletNavBar, WalletNavBarOptions } from "../NavigationBar.js";
 import { platform } from "../platform/foreground.js";
+import CloseIcon from "../svg/close_24px.svg";
 import { AddBackupProviderPage } from "./AddBackupProvider/index.js";
 import { BackupPage } from "./BackupPage.js";
 import { DepositPage } from "./DepositPage/index.js";
@@ -70,7 +71,6 @@ import { QrReaderPage } from "./QrReader.js";
 import { SettingsPage } from "./Settings.js";
 import { TransactionPage } from "./Transaction.js";
 import { WelcomePage } from "./Welcome.js";
-import CloseIcon from "../svg/close_24px.svg";
 
 export function Application(): VNode {
   const { i18n } = useTranslationContext();
@@ -302,6 +302,18 @@ export function Application(): VNode {
               )}
             />
             <Route
+              path={Pages.ctaPay}
+              component={({
+                talerTemplateUri,
+              }: {
+                talerTemplateUri: string;
+              }) => (
+                <CallToActionTemplate title={i18n.str`Digital cash payment`}>
+                  <PaymentTemplatePage talerTemplateUri={talerTemplateUri} />
+                </CallToActionTemplate>
+              )}
+            />
+            <Route
               path={Pages.ctaRefund}
               component={({ talerRefundUri }: { talerRefundUri: string }) => (
                 <CallToActionTemplate title={i18n.str`Digital cash refund`}>
diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
index bfd69f945..1489e2bb9 100644
--- a/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
+++ b/packages/taler-wallet-webextension/src/wallet/DepositPage/test.ts
@@ -23,6 +23,7 @@ import {
   Amounts,
   DepositGroupFees,
   parsePaytoUri,
+  ScopeType,
   stringifyPaytoUri,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
@@ -60,6 +61,11 @@ describe("DepositPage states", () => {
           pendingIncoming: `${currency}:0`,
           pendingOutgoing: `${currency}:0`,
           requiresUserInput: false,
+          scopeInfo: {
+            currency,
+            type: ScopeType.Auditor,
+            url: "asd",
+          },
         },
       ],
     });
@@ -101,6 +107,11 @@ describe("DepositPage states", () => {
           pendingIncoming: `${currency}:0`,
           pendingOutgoing: `${currency}:0`,
           requiresUserInput: false,
+          scopeInfo: {
+            currency,
+            type: ScopeType.Auditor,
+            url: "asd",
+          },
         },
       ],
     });
@@ -155,6 +166,11 @@ describe("DepositPage states", () => {
           pendingIncoming: `${currency}:0`,
           pendingOutgoing: `${currency}:0`,
           requiresUserInput: false,
+          scopeInfo: {
+            currency,
+            type: ScopeType.Auditor,
+            url: "asd",
+          },
         },
       ],
     });
@@ -209,6 +225,11 @@ describe("DepositPage states", () => {
           pendingIncoming: `${currency}:0`,
           pendingOutgoing: `${currency}:0`,
           requiresUserInput: false,
+          scopeInfo: {
+            currency,
+            type: ScopeType.Auditor,
+            url: "asd",
+          },
         },
       ],
     });
@@ -293,6 +314,11 @@ describe("DepositPage states", () => {
           pendingIncoming: `${currency}:0`,
           pendingOutgoing: `${currency}:0`,
           requiresUserInput: false,
+          scopeInfo: {
+            currency,
+            type: ScopeType.Auditor,
+            url: "asd",
+          },
         },
       ],
     });
diff --git a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
index 13f4c8230..d89027e5f 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.stories.tsx
@@ -21,6 +21,7 @@
 
 import {
   PaymentStatus,
+  ScopeType,
   TalerProtocolTimestamp,
   TransactionCommon,
   TransactionDeposit,
@@ -66,6 +67,7 @@ const exampleData = {
       confirmed: false,
       exchangePaytoUris: ["payto://x-taler-bank/bank/account"],
       type: WithdrawalType.ManualTransfer,
+      reserveIsReady: false,
     },
   } as TransactionWithdrawal,
   payment: {
@@ -176,6 +178,11 @@ export const SomeBalanceWithNoTransactions = tests.createExample(
         pendingOutgoing: "TESTKUDOS:0",
         hasPendingTransactions: false,
         requiresUserInput: false,
+        scopeInfo: {
+          currency: "Ásd",
+          type: ScopeType.Auditor,
+          url: "",
+        },
       },
     ],
   },
@@ -190,6 +197,11 @@ export const OneSimpleTransaction = tests.createExample(TestedComponent, {
       pendingOutgoing: "USD:0",
       hasPendingTransactions: false,
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "Ásd",
+        type: ScopeType.Auditor,
+        url: "",
+      },
     },
   ],
 });
@@ -205,6 +217,11 @@ export const TwoTransactionsAndZeroBalance = tests.createExample(
         pendingOutgoing: "USD:0",
         hasPendingTransactions: false,
         requiresUserInput: false,
+        scopeInfo: {
+          currency: "Ásd",
+          type: ScopeType.Auditor,
+          url: "",
+        },
       },
     ],
   },
@@ -224,6 +241,11 @@ export const OneTransactionPending = tests.createExample(TestedComponent, {
       pendingOutgoing: "USD:0",
       hasPendingTransactions: false,
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "Ásd",
+        type: ScopeType.Auditor,
+        url: "",
+      },
     },
   ],
 });
@@ -253,6 +275,11 @@ export const SomeTransactions = tests.createExample(TestedComponent, {
       pendingOutgoing: "USD:0",
       hasPendingTransactions: false,
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "Ásd",
+        type: ScopeType.Auditor,
+        url: "",
+      },
     },
   ],
 });
@@ -277,6 +304,11 @@ export const SomeTransactionsWithTwoCurrencies = tests.createExample(
         pendingOutgoing: "USD:0",
         hasPendingTransactions: false,
         requiresUserInput: false,
+        scopeInfo: {
+          currency: "Ásd",
+          type: ScopeType.Auditor,
+          url: "",
+        },
       },
       {
         available: "TESTKUDOS:10",
@@ -284,6 +316,11 @@ export const SomeTransactionsWithTwoCurrencies = tests.createExample(
         pendingOutgoing: "TESTKUDOS:0",
         hasPendingTransactions: false,
         requiresUserInput: false,
+        scopeInfo: {
+          currency: "Ásd",
+          type: ScopeType.Auditor,
+          url: "",
+        },
       },
     ],
   },
@@ -298,6 +335,11 @@ export const FiveOfficialCurrencies = tests.createExample(TestedComponent, {
       pendingOutgoing: "USD:0",
       hasPendingTransactions: false,
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "Ásd",
+        type: ScopeType.Auditor,
+        url: "",
+      },
     },
     {
       available: "EUR:881",
@@ -305,6 +347,11 @@ export const FiveOfficialCurrencies = tests.createExample(TestedComponent, {
       pendingOutgoing: "TESTKUDOS:0",
       hasPendingTransactions: false,
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "Ásd",
+        type: ScopeType.Auditor,
+        url: "",
+      },
     },
     {
       available: "COL:4043000.5",
@@ -312,6 +359,11 @@ export const FiveOfficialCurrencies = tests.createExample(TestedComponent, {
       pendingOutgoing: "TESTKUDOS:0",
       hasPendingTransactions: false,
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "Ásd",
+        type: ScopeType.Auditor,
+        url: "",
+      },
     },
     {
       available: "JPY:11564450.6",
@@ -319,6 +371,11 @@ export const FiveOfficialCurrencies = tests.createExample(TestedComponent, {
       pendingOutgoing: "TESTKUDOS:0",
       hasPendingTransactions: false,
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "Ásd",
+        type: ScopeType.Auditor,
+        url: "",
+      },
     },
     {
       available: "GBP:736",
@@ -326,6 +383,11 @@ export const FiveOfficialCurrencies = tests.createExample(TestedComponent, {
       pendingOutgoing: "TESTKUDOS:0",
       hasPendingTransactions: false,
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "Ásd",
+        type: ScopeType.Auditor,
+        url: "",
+      },
     },
   ],
 });
@@ -341,6 +403,11 @@ export const FiveOfficialCurrenciesWithHighValue = tests.createExample(
         pendingOutgoing: "USD:0",
         hasPendingTransactions: false,
         requiresUserInput: false,
+        scopeInfo: {
+          currency: "Ásd",
+          type: ScopeType.Auditor,
+          url: "",
+        },
       },
       {
         available: "EUR:10",
@@ -348,12 +415,22 @@ export const FiveOfficialCurrenciesWithHighValue = tests.createExample(
         pendingOutgoing: "TESTKUDOS:0",
         hasPendingTransactions: false,
         requiresUserInput: false,
+        scopeInfo: {
+          currency: "Ásd",
+          type: ScopeType.Auditor,
+          url: "",
+        },
       },
       {
         available: "COL:443000123123000.5123123",
         pendingIncoming: "TESTKUDOS:0",
         pendingOutgoing: "TESTKUDOS:0",
         hasPendingTransactions: false,
+        scopeInfo: {
+          currency: "Ásd",
+          type: ScopeType.Auditor,
+          url: "",
+        },
         requiresUserInput: false,
       },
       {
@@ -362,6 +439,11 @@ export const FiveOfficialCurrenciesWithHighValue = tests.createExample(
         pendingOutgoing: "TESTKUDOS:0",
         hasPendingTransactions: false,
         requiresUserInput: false,
+        scopeInfo: {
+          currency: "Ásd",
+          type: ScopeType.Auditor,
+          url: "",
+        },
       },
       {
         available: "GBP:736001231231200.23123",
@@ -369,6 +451,11 @@ export const FiveOfficialCurrenciesWithHighValue = tests.createExample(
         pendingOutgoing: "TESTKUDOS:0",
         hasPendingTransactions: false,
         requiresUserInput: false,
+        scopeInfo: {
+          currency: "Ásd",
+          type: ScopeType.Auditor,
+          url: "",
+        },
       },
     ],
   },
@@ -388,6 +475,11 @@ export const PeerToPeer = tests.createExample(TestedComponent, {
       pendingOutgoing: "USD:0",
       hasPendingTransactions: false,
       requiresUserInput: false,
+      scopeInfo: {
+        currency: "Ásd",
+        type: ScopeType.Auditor,
+        url: "",
+      },
     },
   ],
 });
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
index 21e9ee55e..a2aa9f26f 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
@@ -77,6 +77,7 @@ const exampleData = {
     type: TransactionType.Withdrawal,
     exchangeBaseUrl: "http://exchange.taler",
     withdrawalDetails: {
+      reserveIsReady: false,
       confirmed: false,
       reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
       exchangePaytoUris: ["payto://x-taler-bank/bank.demo.taler.net/Exchange"],
@@ -308,6 +309,7 @@ export const WithdrawPendingTalerBankUnconfirmed = tests.createExample(
       withdrawalDetails: {
         type: WithdrawalType.TalerBankIntegrationApi,
         confirmed: false,
+        reserveIsReady: false,
         reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
         bankConfirmationUrl: "http://bank.demo.taler.net",
       },
@@ -324,6 +326,7 @@ export const WithdrawPendingTalerBankConfirmed = tests.createExample(
       withdrawalDetails: {
         type: WithdrawalType.TalerBankIntegrationApi,
         confirmed: true,
+        reserveIsReady: false,
         reservePub: "A05AJGMFNSK4Q62NXR2FKNDB1J4EXTYQTE7VA4M9GZQ4TR06YBNG",
       },
       extendedStatus: ExtendedStatus.Pending,
diff --git a/packages/taler-wallet-webextension/src/wxBackend.ts b/packages/taler-wallet-webextension/src/wxBackend.ts
index 2055953e3..99602445d 100644
--- a/packages/taler-wallet-webextension/src/wxBackend.ts
+++ b/packages/taler-wallet-webextension/src/wxBackend.ts
@@ -378,6 +378,12 @@ function parseTalerUriAndRedirect(tabId: number, maybeTalerUri: string): void {
       // FIXME: Implement!
       logger.warn("not implemented");
       return;
+    case TalerUriType.TalerTemplate:
+      return platform.redirectTabToWalletPage(
+        tabId,
+        `/cta/template?talerTemplateUri=${talerUri}`,
+      );
+      return;
     default: {
       const error: never = uriType;
       logger.warn(