payto to bank and qr placeholder

3 files changed, 71 insertions, 12 deletions

diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx
index 8dfa87d9c..26640a08e 100644
--- a/packages/taler-wallet-webextension/src/NavigationBar.tsx
+++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx
@@ -149,7 +149,9 @@ export const Pages = {
 
   defaultCta: pageDefinition<{ uri: CrockEncodedString }>("/taler-uri/:uri"),
   // FIXME: mem leak problems
-  defaultCtaSimple: pageDefinition<{ uri: CrockEncodedString }>("/taler-uri-simple/:uri"),
+  defaultCtaSimple: pageDefinition<{ uri: CrockEncodedString }>(
+    "/taler-uri-simple/:uri",
+  ),
   cta: pageDefinition<{ action: CrockEncodedString }>("/cta/:action"),
   ctaPay: "/cta/pay",
   ctaPayTemplate: "/cta/pay/template",
@@ -158,7 +160,7 @@ export const Pages = {
   ctaWithdraw: "/cta/withdraw",
   ctaDeposit: pageDefinition<{
     scope: CrockEncodedString;
-    account: CrockEncodedString,
+    account: CrockEncodedString;
   }>("/cta/deposit/:scope/:account"),
   ctaExperiment: "/cta/experiment",
   ctaAddExchange: "/cta/add/exchange",
@@ -175,6 +177,8 @@ export const Pages = {
     scope: CrockEncodedString;
     amount?: string;
   }>("/cta/manual-withdraw/:scope/:amount?"),
+  paytoQrs: "/payto/qrs/:payto?",
+  paytoBanks: "/payto/banks/:payto?",
 };
 
 const talerUriActionToPageName: {
@@ -277,11 +281,17 @@ export function WalletNavBar({ path }: { path?: WalletNavBarOptions }): VNode {
   return (
     <NavigationHeaderHolder>
       <NavigationHeader>
-        <a href={`#${Pages.balance}`} class={path === "balance" ? "active" : ""}>
+        <a
+          href={`#${Pages.balance}`}
+          class={path === "balance" ? "active" : ""}
+        >
           <i18n.Translate>Balance</i18n.Translate>
         </a>
         <EnabledBySettings name="backup">
-          <a href={`#${Pages.backup}`} class={path === "backup" ? "active" : ""}>
+          <a
+            href={`#${Pages.backup}`}
+            class={path === "backup" ? "active" : ""}
+          >
             <i18n.Translate>Backup</i18n.Translate>
           </a>
         </EnabledBySettings>
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index beb5d19aa..aba6823d2 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -154,15 +154,21 @@ function IBANAccountInfoTable({
   const { i18n } = useTranslationContext();
   const api = useBackendContext();
 
-  const hook = useAsyncAsHook(
-    () =>
-      api.wallet.call(WalletApiOperation.GetQrCodesForPayto, {
+  const hook = useAsyncAsHook(async () => {
+    const qrs = await api.wallet.call(WalletApiOperation.GetQrCodesForPayto, {
+      paytoUri: stringifyPaytoUri(payto),
+    });
+    const banks = await api.wallet.call(
+      WalletApiOperation.GetBankingChoicesForPayto,
+      {
         paytoUri: stringifyPaytoUri(payto),
-      }),
-    [],
-  );
+      },
+    );
+    return { qrs, banks };
+  }, []);
 
-  const qrCodes = !hook || hook.hasError ? [] : hook.response.codes;
+  const qrCodes = !hook || hook.hasError ? [] : hook.response.qrs.codes;
+  const banksSites = !hook || hook.hasError ? [] : hook.response.banks.choices;
 
   const accountPart = !payto.isKnown ? (
     <Fragment>
@@ -274,13 +280,22 @@ function IBANAccountInfoTable({
 
         {qrCodes.map((qr, idx) => {
           return (
-            <tr  key={idx}>
+            <tr key={idx}>
               <td colSpan={3} width="100%">
                 <QR text={qr.qrContent} />
               </td>
             </tr>
           );
         })}
+        {banksSites.map((bank, idx) => {
+          return (
+            <tr key={idx}>
+              <td colSpan={3} width="100%">
+                {bank.label} : {bank.uri}
+              </td>
+            </tr>
+          );
+        })}
       </tbody>
     </table>
   );
diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index 768b82073..3c54fd2cb 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -773,6 +773,40 @@ export function Application(): VNode {
               );
             }}
           />
+          <Route
+            path={Pages.paytoBanks}
+            component={({ payto }: { payto: string }) => {
+              const pUri = parsePaytoUri(
+                decodeCrockFromURI(payto).toLowerCase(),
+              );
+              if (!pUri) {
+                redirectTo(Pages.balanceHistory({}));
+                return <div>invalid uri {pUri}</div>;
+              }
+              return (
+                <WalletTemplate goToURL={redirectToURL}>
+                  <pre>{JSON.stringify({ title: "BANKS", pUri })}</pre>
+                </WalletTemplate>
+              );
+            }}
+          />
+          <Route
+            path={Pages.paytoQrs}
+            component={({ payto }: { payto: string }) => {
+              const pUri = parsePaytoUri(
+                decodeCrockFromURI(payto).toLowerCase(),
+              );
+              if (!pUri) {
+                redirectTo(Pages.balanceHistory({}));
+                return <div>invalid uri {pUri}</div>;
+              }
+              return (
+                <WalletTemplate goToURL={redirectToURL}>
+                  <pre>{JSON.stringify({ title: "QRS", pUri })}</pre>
+                </WalletTemplate>
+              );
+            }}
+          />
           {/**
            * NOT FOUND
            * all redirects should be at the end