1 files changed, 123 insertions, 85 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
index ef0ec341c..21373c7cd 100644
--- a/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
+++ b/packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx
@@ -1,98 +1,136 @@
-import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
-import { ButtonPrimary, ButtonSuccess, PopupBox } from "../components/styled/index";
+/*
+ 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 { parseTalerUri, TalerUri, TalerUriAction } from "@gnu-taler/taler-util";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Fragment, h, VNode } from "preact";
+import { Title } from "../components/styled/index.js";
+import { Button } from "../mui/Button.js";
+import { platform } from "../platform/foreground.js";
 
 export interface Props {
   url: string;
-  onDismiss: () => void;
+  onDismiss: () => Promise<void>;
 }
 
-export function TalerActionFound({ url, onDismiss }: Props) {
-  const uriType = classifyTalerUri(url);
-  return <PopupBox>
-    <section>
-      <h1>Taler Action </h1>
-      {uriType === TalerUriType.TalerPay && <div>
-        <p>This page has pay action.</p>
-        <ButtonSuccess onClick={() => { chrome.tabs.create({ "url": actionForTalerUri(uriType, url) }); }}>
-          Open pay page
-        </ButtonSuccess>
-      </div>}
-      {uriType === TalerUriType.TalerWithdraw && <div>
-        <p>This page has a withdrawal action.</p>
-        <ButtonSuccess onClick={() => { chrome.tabs.create({ "url": actionForTalerUri(uriType, url) }); }}>
-          Open withdraw page
-        </ButtonSuccess>
-      </div>}
-      {uriType === TalerUriType.TalerTip && <div>
-        <p>This page has a tip action.</p>
-        <ButtonSuccess onClick={() => { chrome.tabs.create({ "url": actionForTalerUri(uriType, url) }); }}>
-          Open tip page
-        </ButtonSuccess>
-      </div>}
-      {uriType === TalerUriType.TalerNotifyReserve && <div>
-        <p>This page has a notify reserve action.</p>
-        <ButtonSuccess onClick={() => { chrome.tabs.create({ "url": actionForTalerUri(uriType, url) }); }}>
-          Notify
-        </ButtonSuccess>
-      </div>}
-      {uriType === TalerUriType.TalerRefund && <div>
-        <p>This page has a refund action.</p>
-        <ButtonSuccess onClick={() => { chrome.tabs.create({ "url": actionForTalerUri(uriType, url) }); }}>
-          Open refund page
-        </ButtonSuccess>
-      </div>}
-      {uriType === TalerUriType.Unknown && <div>
-        <p>This page has a malformed taler uri.</p>
-        <p>{url}</p>
-      </div>}
-
-    </section>
-    <footer>
-      <div />
-      <ButtonPrimary onClick={() => onDismiss()}> Dismiss </ButtonPrimary>
-    </footer>
-  </PopupBox>;
+function ContentByUriType({
+  uri,
+  onConfirm,
+}: {
+  uri: TalerUri;
+  onConfirm: () => Promise<void>;
+}) {
+  const { i18n } = useTranslationContext();
+  switch (uri.type) {
+    case TalerUriAction.WithdrawExchange:
+    case TalerUriAction.Withdraw:
+      return (
+        <div>
+          <p>
+            <i18n.Translate>This page has a withdrawal action.</i18n.Translate>
+          </p>
+          <Button variant="contained" color="success" onClick={onConfirm}>
+            <i18n.Translate>Open withdraw page</i18n.Translate>
+          </Button>
+        </div>
+      );
 
-}
+    case TalerUriAction.PayTemplate:
+    case TalerUriAction.Pay:
+      return (
+        <div>
+          <p>
+            <i18n.Translate>This page has pay action.</i18n.Translate>
+          </p>
+          <Button variant="contained" color="success" onClick={onConfirm}>
+            <i18n.Translate>Open pay page</i18n.Translate>
+          </Button>
+        </div>
+      );
 
-function actionForTalerUri(uriType: TalerUriType, talerUri: string): string | undefined {
-  switch (uriType) {
-    case TalerUriType.TalerWithdraw:
-      return makeExtensionUrlWithParams("static/wallet.html#/withdraw", {
-        talerWithdrawUri: talerUri,
-      });
-    case TalerUriType.TalerPay:
-      return makeExtensionUrlWithParams("static/wallet.html#/pay", {
-        talerPayUri: talerUri,
-      });
-    case TalerUriType.TalerTip:
-      return makeExtensionUrlWithParams("static/wallet.html#/tip", {
-        talerTipUri: talerUri,
-      });
-    case TalerUriType.TalerRefund:
-      return makeExtensionUrlWithParams("static/wallet.html#/refund", {
-        talerRefundUri: talerUri,
-      });
-    case TalerUriType.TalerNotifyReserve:
-      // FIXME: implement
-      break;
-    default:
-      console.warn(
-        "Response with HTTP 402 has Taler header, but header value is not a taler:// URI.",
+    case TalerUriAction.Refund:
+      return (
+        <div>
+          <p>
+            <i18n.Translate>This page has a refund action.</i18n.Translate>
+          </p>
+          <Button variant="contained" color="success" onClick={onConfirm}>
+            <i18n.Translate>Open refund page</i18n.Translate>
+          </Button>
+        </div>
       );
-      break;
+    case TalerUriAction.AddExchange:
+      return (
+        <div>
+          <p>
+            <i18n.Translate>This page has a add exchange action.</i18n.Translate>
+          </p>
+          <Button variant="contained" color="success" onClick={onConfirm}>
+            <i18n.Translate>Open add exchange page</i18n.Translate>
+          </Button>
+        </div>
+      );
+
+    case TalerUriAction.DevExperiment:
+    case TalerUriAction.PayPull:
+    case TalerUriAction.PayPush:
+    case TalerUriAction.Restore:
+      return null;
+    default: {
+      const error: never = uri;
+      return null;
+    }
   }
-  return undefined;
 }
 
-function makeExtensionUrlWithParams(
-  url: string,
-  params?: { [name: string]: string | undefined },
-): string {
-  const innerUrl = new URL(chrome.extension.getURL("/" + url));
-  if (params) {
-    const hParams = Object.keys(params).map(k => `${k}=${params[k]}`).join('&')
-    innerUrl.hash = innerUrl.hash + '?' + hParams
+export function TalerActionFound({ url, onDismiss }: Props): VNode {
+  const talerUri = parseTalerUri(url);
+  const { i18n } = useTranslationContext();
+  async function redirectToWallet(): Promise<void> {
+    platform.openWalletURIFromPopup(talerUri!);
   }
-  return innerUrl.href;
+  return (
+    <Fragment>
+      <section>
+        <Title>
+          <i18n.Translate>Taler Action</i18n.Translate>
+        </Title>
+        {!talerUri ? (
+          <div>
+            <p>
+              <i18n.Translate>
+                This page has a malformed taler uri.
+              </i18n.Translate>
+            </p>
+          </div>
+        ) : (
+          <ContentByUriType uri={talerUri} onConfirm={redirectToWallet} />
+        )}
+      </section>
+      <footer>
+        <div />
+        <Button variant="contained" onClick={onDismiss}>
+          <i18n.Translate>Dismiss</i18n.Translate>
+        </Button>
+      </footer>
+    </Fragment>
+  );
 }