wip DD39: removed webRequest permission and changes made into demobank

7 files changed, 105 insertions, 68 deletions

diff --git a/packages/demobank-ui/src/pages/OperationState/views.tsx b/packages/demobank-ui/src/pages/OperationState/views.tsx
index ac3724eb8..4d193505e 100644
--- a/packages/demobank-ui/src/pages/OperationState/views.tsx
+++ b/packages/demobank-ui/src/pages/OperationState/views.tsx
@@ -36,6 +36,7 @@ import { useBankState } from "../../hooks/bank-state.js";
 import { usePreferences } from "../../hooks/preferences.js";
 import { ShouldBeSameUser } from "../WithdrawalConfirmationQuestion.js";
 import { State } from "./index.js";
+import { useTalerWalletIntegrationAPI } from "../../context/wallet-integration.js";
 
 export function InvalidPaytoView({ payto }: State.InvalidPayto) {
   return <div>Payto from server is not valid &quot;{payto}&quot;</div>;
@@ -328,23 +329,12 @@ export function ReadyView({
   onAbort: doAbort,
 }: State.Ready): VNode<Record<string, never>> {
   const { i18n } = useTranslationContext();
+  const walletInegrationApi = useTalerWalletIntegrationAPI()
   const [notification, notify, errorHandler] = useLocalNotification();
 
   const talerWithdrawUri = stringifyWithdrawUri(uri);
   useEffect(() => {
-    // Taler Wallet WebExtension is listening to headers response and tab updates.
-    // In the SPA there is no header response with the Taler URI so
-    // this hack manually triggers the tab update after the QR is in the DOM.
-    // WebExtension will be using
-    // https://developer.chrome.com/docs/extensions/reference/tabs/#event-onUpdated
-    document.title = `${document.title} ${uri.withdrawalOperationId}`;
-    const meta = document.createElement("meta");
-    meta.setAttribute("name", "taler-uri");
-    meta.setAttribute("content", talerWithdrawUri);
-    document.head.insertBefore(
-      meta,
-      document.head.children.length ? document.head.children[0] : null,
-    );
+    walletInegrationApi.publishTalerAction(uri)
   }, []);
 
   async function onAbort() {
diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx
index 53086d4cc..51a6a17a9 100644
--- a/packages/demobank-ui/src/pages/PaymentOptions.tsx
+++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx
@@ -14,13 +14,43 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountJson } from "@gnu-taler/taler-util";
-import { VNode, h } from "preact";
+import { AmountJson, TalerError } from "@gnu-taler/taler-util";
+import { Fragment, VNode, h } from "preact";
 import { useBankState } from "../hooks/bank-state.js";
 import { PaytoWireTransferForm } from "./PaytoWireTransferForm.js";
 import { WalletWithdrawForm } from "./WalletWithdrawForm.js";
 import { RouteDefinition } from "../route.js";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { useWithdrawalDetails } from "../hooks/access.js";
+import { useEffect } from "preact/hooks";
+
+function ShowOperationPendingTag({ woid, onOperationAlreadyCompleted }: { woid: string, onOperationAlreadyCompleted?: () => void }): VNode {
+  const { i18n } = useTranslationContext();
+  const result = useWithdrawalDetails(woid);
+  const error = !result || result instanceof TalerError || result.type === "fail"
+  const completed = !error && (result.body.status === "aborted" || result.body.status === "confirmed")
+  useEffect(() => {
+    if (completed && onOperationAlreadyCompleted) {
+      onOperationAlreadyCompleted()
+    }
+  }, [completed])
+
+  if (error || completed) {
+    return <Fragment />;
+  }
+
+  return <span class="flex items-center gap-x-1.5 w-fit rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-700 whitespace-pre">
+    <svg
+      class="h-1.5 w-1.5 fill-green-500"
+      viewBox="0 0 6 6"
+      aria-hidden="true"
+    >
+      <circle cx="3" cy="3" r="3" />
+    </svg>
+    <i18n.Translate>operation ready</i18n.Translate>
+  </span>
+
+}
 
 /**
  * Let the user choose a payment option,
@@ -46,7 +76,7 @@ export function PaymentOptions({
   routeWireTransfer: RouteDefinition<Record<string, never>>;
 }): VNode {
   const { i18n } = useTranslationContext();
-  const [bankState] = useBankState();
+  const [bankState, updateBankState] = useBankState();
 
   return (
     <div class="mt-4">
@@ -98,16 +128,9 @@ export function PaymentOptions({
                   </i18n.Translate>
                 </div>
                 {!!bankState.currentWithdrawalOperationId && (
-                  <span class="flex items-center gap-x-1.5 w-fit rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-700 whitespace-pre">
-                    <svg
-                      class="h-1.5 w-1.5 fill-green-500"
-                      viewBox="0 0 6 6"
-                      aria-hidden="true"
-                    >
-                      <circle cx="3" cy="3" r="3" />
-                    </svg>
-                    <i18n.Translate>operation ready</i18n.Translate>
-                  </span>
+                  <ShowOperationPendingTag woid={bankState.currentWithdrawalOperationId} onOperationAlreadyCompleted={() => {
+                    updateBankState("currentWithdrawalOperationId", undefined)
+                  }} />
                 )}
               </div>
             </label>
diff --git a/packages/demobank-ui/src/pages/ProfileNavigation.tsx b/packages/demobank-ui/src/pages/ProfileNavigation.tsx
index a6615d578..02f30d8e8 100644
--- a/packages/demobank-ui/src/pages/ProfileNavigation.tsx
+++ b/packages/demobank-ui/src/pages/ProfileNavigation.tsx
@@ -19,6 +19,7 @@ import { privatePages } from "../Routing.js";
 import { useBankCoreApiContext } from "../context/config.js";
 import { useBackendState } from "../hooks/backend.js";
 import { assertUnreachable } from "@gnu-taler/taler-util";
+import { useNavigationContext } from "../context/navigation.js";
 
 export function ProfileNavigation({
   current,
@@ -32,6 +33,7 @@ export function ProfileNavigation({
     credentials.status !== "loggedIn"
       ? false
       : !credentials.isUserAdministrator;
+  const { navigateTo } = useNavigationContext()
   return (
     <div>
       <div class="sm:hidden">
@@ -46,19 +48,19 @@ export function ProfileNavigation({
             const op = e.currentTarget.value as typeof current;
             switch (op) {
               case "details": {
-                window.location.href = privatePages.myAccountDetails.url({});
+                navigateTo(privatePages.myAccountDetails.url({}));
                 return;
               }
               case "delete": {
-                window.location.href = privatePages.myAccountDelete.url({});
+                navigateTo(privatePages.myAccountDelete.url({}));
                 return;
               }
               case "credentials": {
-                window.location.href = privatePages.myAccountPassword.url({});
+                navigateTo(privatePages.myAccountPassword.url({}));
                 return;
               }
               case "cashouts": {
-                window.location.href = privatePages.myAccountCashouts.url({});
+                navigateTo(privatePages.myAccountCashouts.url({}));
                 return;
               }
               default:
diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx b/packages/demobank-ui/src/pages/QrCodeSection.tsx
index f21134aa1..037849804 100644
--- a/packages/demobank-ui/src/pages/QrCodeSection.tsx
+++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx
@@ -19,7 +19,7 @@ import {
   HttpStatusCode,
   stringifyWithdrawUri,
   TranslatedString,
-  WithdrawUriResult,
+  WithdrawUriResult
 } from "@gnu-taler/taler-util";
 import {
   LocalNotificationBanner,
@@ -30,6 +30,7 @@ import { Fragment, h, VNode } from "preact";
 import { useEffect } from "preact/hooks";
 import { QR } from "../components/QR.js";
 import { useBankCoreApiContext } from "../context/config.js";
+import { useTalerWalletIntegrationAPI } from "../context/wallet-integration.js";
 import { useBackendState } from "../hooks/backend.js";
 
 export function QrCodeSection({
@@ -40,25 +41,15 @@ export function QrCodeSection({
   onAborted: () => void;
 }): VNode {
   const { i18n } = useTranslationContext();
+  const walletInegrationApi = useTalerWalletIntegrationAPI()
   const talerWithdrawUri = stringifyWithdrawUri(withdrawUri);
   const { state: credentials } = useBackendState();
   const creds = credentials.status !== "loggedIn" ? undefined : credentials;
 
   useEffect(() => {
-    // Taler Wallet WebExtension is listening to headers response and tab updates.
-    // In the SPA there is no header response with the Taler URI so
-    // this hack manually triggers the tab update after the QR is in the DOM.
-    // WebExtension will be using
-    // https://developer.chrome.com/docs/extensions/reference/tabs/#event-onUpdated
-    document.title = `${document.title} ${withdrawUri.withdrawalOperationId}`;
-    const meta = document.createElement("meta");
-    meta.setAttribute("name", "taler-uri");
-    meta.setAttribute("content", talerWithdrawUri);
-    document.head.insertBefore(
-      meta,
-      document.head.children.length ? document.head.children[0] : null,
-    );
+    walletInegrationApi.publishTalerAction(withdrawUri)
   }, []);
+
   const [notification, notify, handleError] = useLocalNotification();
 
   const { api } = useBankCoreApiContext();
diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
index 1e48b818a..9f7f46c4f 100644
--- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
+++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx
@@ -21,6 +21,7 @@ import {
   TranslatedString,
   assertUnreachable,
   parseWithdrawUri,
+  stringifyWithdrawUri,
 } from "@gnu-taler/taler-util";
 import {
   Attention,
@@ -41,6 +42,8 @@ import { RouteDefinition } from "../route.js";
 import { undefinedIfEmpty } from "../utils.js";
 import { OperationState } from "./OperationState/index.js";
 import { InputAmount, doAutoFocus } from "./PaytoWireTransferForm.js";
+import { useTalerWalletIntegrationAPI } from "../context/wallet-integration.js";
+import { useNavigationContext } from "../context/navigation.js";
 
 const RefAmount = forwardRef(InputAmount);
 
@@ -57,18 +60,32 @@ function OldWithdrawalForm({
 }): VNode {
   const { i18n } = useTranslationContext();
   const [settings] = usePreferences();
+
+  // const walletInegrationApi = useTalerWalletIntegrationAPI()
+  // const { navigateTo } = useNavigationContext();
+
   const [bankState, updateBankState] = useBankState();
+  const { api } = useBankCoreApiContext();
 
   const { state: credentials } = useBackendState();
   const creds = credentials.status !== "loggedIn" ? undefined : credentials;
 
-  const { api } = useBankCoreApiContext();
   const [amountStr, setAmountStr] = useState<string | undefined>(
     `${settings.maxWithdrawalAmount}`,
   );
   const [notification, notify, handleError] = useLocalNotification();
 
   if (bankState.currentWithdrawalOperationId) {
+    // FIXME: doing the preventDefault is not optimal
+
+    // const suri = stringifyWithdrawUri({
+    //   bankIntegrationApiBaseUrl: api.getIntegrationAPI().baseUrl,
+    //   withdrawalOperationId: bankState.currentWithdrawalOperationId,
+    // });
+    // const uri = parseWithdrawUri(suri)!
+    const url = privatePages.operationDetails.url({
+      wopid: bankState.currentWithdrawalOperationId,
+    })
     return (
       <Attention type="warning" title={i18n.str`There is an operation already`}>
         <span ref={focus ? doAutoFocus : undefined} />
@@ -77,9 +94,13 @@ function OldWithdrawalForm({
         </i18n.Translate>{" "}
         <a
           class="font-semibold text-yellow-700 hover:text-yellow-600"
-          href={privatePages.operationDetails.url({
-            wopid: bankState.currentWithdrawalOperationId,
-          })}
+          href={url}
+        // onClick={(e) => {
+        //   e.preventDefault()
+        //   walletInegrationApi.publishTalerAction(uri, () => {
+        //     navigateTo(url)
+        //   })
+        // }}
         >
           <i18n.Translate>this page</i18n.Translate>
         </a>
@@ -324,7 +345,7 @@ export function WalletWithdrawForm({
             onAuthorizationRequired={onAuthorizationRequired}
             routeClose={routeCancel}
             onAbort={onOperationAborted}
-            // route={routeCancel}
+          // route={routeCancel}
           />
         )}
       </div>
diff --git a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
index 3cf552f39..03f6556af 100644
--- a/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
+++ b/packages/demobank-ui/src/pages/WithdrawalQRCode.tsx
@@ -75,29 +75,39 @@ export function WithdrawalQRCode({
 
   if (data.status === "aborted") {
     return (
-      <section id="main" class="content">
-        <h1 class="nav">{i18n.str`Operation aborted`}</h1>
-        <section>
-          <p>
-            <i18n.Translate>
-              The wire transfer to the Taler Exchange operator's account was
-              aborted, your balance was not affected.
-            </i18n.Translate>
-          </p>
-          <p>
-            <i18n.Translate>
-              You can close this page now or continue to the account page.
-            </i18n.Translate>
-          </p>
+      <div class="relative ml-auto mr-auto transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
+        <div>
+          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100">
+            <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <div class="mt-3 text-center sm:mt-5">
+            <h3
+              class="text-base font-semibold leading-6 text-gray-900"
+              id="modal-title"
+            >
+              <i18n.Translate>Operation aborted</i18n.Translate>
+            </h3>
+            <div class="mt-2">
+              <p class="text-sm text-gray-500">
+                <i18n.Translate>
+                  The wire transfer to the Taler Exchange operator's account was
+                  aborted from somewhere else, your balance was not affected.
+                </i18n.Translate>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="mt-5 sm:mt-6">
           <a
             href={routeClose.url({})}
-            class="pure-button pure-button-primary"
-            style={{ float: "right" }}
+            class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
           >
             <i18n.Translate>Continue</i18n.Translate>
           </a>
-        </section>
-      </section>
+        </div>
+      </div>
     );
   }
 
diff --git a/packages/demobank-ui/src/pages/business/CreateCashout.tsx b/packages/demobank-ui/src/pages/business/CreateCashout.tsx
index 75e0a9b84..46da5c847 100644
--- a/packages/demobank-ui/src/pages/business/CreateCashout.tsx
+++ b/packages/demobank-ui/src/pages/business/CreateCashout.tsx
@@ -316,7 +316,7 @@ export function CreateCashout({
   const cashoutDisabled =
     config.supported_tan_channels.length < 1 ||
     !resultAccount.body.cashout_payto_uri;
-  console.log("disab", cashoutDisabled);
+
   const cashoutAccount = !resultAccount.body.cashout_payto_uri
     ? undefined
     : parsePaytoUri(resultAccount.body.cashout_payto_uri);