new payto form

9 files changed, 150 insertions, 71 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/CreatePage.tsx
index 2f19d0c91..bec32bac3 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/CreatePage.tsx
@@ -21,10 +21,12 @@
 
 import {
   HttpStatusCode,
+  PaytoUri,
   TalerError,
   TalerMerchantApi,
   TranslatedString,
   assertUnreachable,
+  parsePaytoUri,
 } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
@@ -37,12 +39,16 @@ import {
 import { Input } from "../../../../components/form/Input.js";
 import { InputPaytoForm } from "../../../../components/form/InputPaytoForm.js";
 import { InputSelector } from "../../../../components/form/InputSelector.js";
-import { ImportingAccountModal } from "../../../../components/modal/index.js";
+import {
+  CompareAccountsModal,
+  ImportingAccountModal,
+} from "../../../../components/modal/index.js";
 import { undefinedIfEmpty } from "../../../../utils/table.js";
 import { safeConvertURL } from "../update/UpdatePage.js";
 import { testRevenueAPI } from "./index.js";
+import { InputToggle } from "../../../../components/form/InputToggle.js";
 
-type Entity = TalerMerchantApi.AccountAddDetails;
+type Entity = TalerMerchantApi.AccountAddDetails & { verified?: boolean };
 
 interface Props {
   onCreate: (d: TalerMerchantApi.AccountAddDetails) => Promise<void>;
@@ -55,8 +61,12 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
   const { i18n } = useTranslationContext();
 
   const [importing, setImporting] = useState(false);
+  const [revenuePayto, setRevenuePayto] = useState<PaytoUri | undefined>(
+    undefined,
+  );
   const [state, setState] = useState<Partial<Entity>>({});
   const facadeURL = safeConvertURL(state.credit_facade_url);
+
   const [testError, setTestError] = useState<TranslatedString | undefined>(
     undefined,
   );
@@ -133,70 +143,60 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
       );
       if (resp instanceof TalerError) {
         setTestError(i18n.str`The request to check the revenue API failed.`);
+        setState({
+          ...state,
+          verified: undefined,
+        });
         return;
-      }
-      if (resp.type === "fail") {
+      } else if (resp.type === "fail") {
         switch (resp.case) {
           case HttpStatusCode.BadRequest: {
             setTestError(i18n.str`Server replied with "bad request".`);
+            setState({
+              ...state,
+              verified: undefined,
+            });
             return;
           }
           case HttpStatusCode.Unauthorized: {
-            setTestError(i18n.str`Unauthorized, try with another credentials.`);
-
+            setTestError(i18n.str`Unauthorized, check credentials.`);
+            setState({
+              ...state,
+              verified: undefined,
+            });
             return;
           }
           case HttpStatusCode.NotFound: {
             setTestError(
               i18n.str`The endpoint doesn't seems to be a Taler Revenue API.`,
             );
+            setState({
+              ...state,
+              verified: undefined,
+            });
             return;
           }
           default: {
             assertUnreachable(resp);
           }
         }
+      } else {
+        const found = resp.body;
+        const match = state.payto_uri === found;
+        setState({
+          ...state,
+          verified: match,
+        });
+        if (!match) {
+          setRevenuePayto(parsePaytoUri(resp.body));
+        }
+        setTestError(undefined);
       }
     }
   }
 
   return (
-    <div>
-      {importing && (
-        <ImportingAccountModal
-          onCancel={() => {
-            setImporting(false);
-          }}
-          onConfirm={(ac) => {
-            const u = new URL(ac.infoURL);
-            const user = u.username;
-            const pwd = u.password;
-            u.password = "";
-            u.username = "";
-            const credit_facade_url = u.href;
-            setState({
-              payto_uri: ac.accountURI,
-              credit_facade_credentials:
-                user || pwd
-                  ? {
-                      type: "basic",
-                      password: pwd,
-                      username: user,
-                    }
-                  : undefined,
-              credit_facade_url,
-            });
-            // if (u.username && ac.accesToken) {
-            //   state.credit_facade_credentials = {
-            //     type: "bearer",
-            //     token: ac.accesToken,
-            //     username: u.username,
-            //   };
-            // } else
-            setImporting(false);
-          }}
-        />
-      )}
+    <Fragment>
       <section class="section is-main-section">
         <div class="columns">
           <div class="column" />
@@ -208,11 +208,19 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
             >
               <InputPaytoForm<Entity>
                 name="payto_uri"
-                label={i18n.str`Account`}
+                label={i18n.str`Account details`}
               />
+              <div class="message-body" style={{marginBottom: 10}}>
+                <p>
+                  <i18n.Translate>
+                    If the bank supports Taler Revenue API then you can add the
+                    endpoint URL below to keep the revenue information in sync.
+                  </i18n.Translate>
+                </p>
+              </div>
               <Input<Entity>
                 name="credit_facade_url"
-                label={i18n.str`Account info URL`}
+                label={i18n.str`Endpoint URL`}
                 help="https://bank.demo.taler.net/accounts/_username_/taler-revenue/"
                 expand
                 tooltip={i18n.str`From where the merchant can download information about incoming wire transfers to this account`}
@@ -242,22 +250,39 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                   />
                 </Fragment>
               ) : undefined}
+              <InputToggle<Entity>
+                label={i18n.str`Match`}
+                tooltip={i18n.str`Check where the information match agaisnt the server info.`}
+                name="verified"
+                readonly
+                threeState
+                help={
+                  testError !== undefined
+                    ? testError
+                    : state.verified === undefined
+                      ? i18n.str`Not verified`
+                      : state.verified
+                        ? i18n.str`Last test was ok`
+                        : i18n.str`Last test failed`
+                }
+                side={
+                  <button
+                    class="button is-info"
+                    data-tooltip={i18n.str`Compare info from server with account form`}
+                    disabled={!state.credit_facade_url}
+                    onClick={() => {
+                      testAccountInfo();
+                    }}
+                  >
+                    <i18n.Translate>Test</i18n.Translate>
+                  </button>
+                }
+              />
             </FormProvider>
 
             <div class="buttons is-right mt-5">
               <button
                 class="button is-info"
-                data-tooltip={i18n.str`Need to complete marked fields`}
-                onClick={() => {
-                  testAccountInfo();
-                }}
-              >
-                <i18n.Translate>Test account info</i18n.Translate>
-              </button>
-
-              <button
-                class="button is-info"
-                data-tooltip={i18n.str`Need to complete marked fields`}
                 onClick={() => {
                   setImporting(true);
                 }}
@@ -286,6 +311,52 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
           <div class="column" />
         </div>
       </section>
-    </div>
+      {!importing ? undefined : (
+        <ImportingAccountModal
+          onCancel={() => {
+            setImporting(false);
+          }}
+          onConfirm={(ac) => {
+            const u = new URL(ac.infoURL);
+            const user = u.username;
+            const pwd = u.password;
+            u.password = "";
+            u.username = "";
+            const credit_facade_url = u.href;
+            setState({
+              payto_uri: ac.accountURI,
+              credit_facade_credentials:
+                user || pwd
+                  ? {
+                      type: "basic",
+                      password: pwd,
+                      username: user,
+                    }
+                  : undefined,
+              credit_facade_url,
+            });
+            setImporting(false);
+          }}
+        />
+      )}
+      {!revenuePayto ? undefined : (
+        <CompareAccountsModal
+          onCancel={() => {
+            setRevenuePayto(undefined);
+          }}
+          onConfirm={(d) => {
+            setState({
+              ...state,
+              payto_uri: d,
+            });
+            setRevenuePayto(undefined);
+          }}
+          formPayto={
+            !state.payto_uri ? undefined : parsePaytoUri(state.payto_uri)
+          }
+          testPayto={revenuePayto}
+        />
+      )}
+    </Fragment>
   );
 }
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/index.tsx
index 9e0830e6e..2c1a13e27 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/index.tsx
@@ -33,7 +33,7 @@ import {
 } from "@gnu-taler/taler-util";
 import {
   BrowserFetchHttpLib,
-  useTranslationContext
+  useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
@@ -86,10 +86,13 @@ export enum TestRevenueErrorType {
 export async function testRevenueAPI(
   revenueAPI: URL,
   creds: FacadeCredentials | undefined,
-): Promise<OperationOk<void> | OperationFail<HttpStatusCode.NotFound>
-| OperationFail<HttpStatusCode.Unauthorized>
-| OperationFail<HttpStatusCode.BadRequest>
-| TalerError> {
+): Promise<
+  | OperationOk<PaytoString>
+  | OperationFail<HttpStatusCode.NotFound>
+  | OperationFail<HttpStatusCode.Unauthorized>
+  | OperationFail<HttpStatusCode.BadRequest>
+  | TalerError
+> {
   const api = new TalerRevenueHttpClient(
     revenueAPI.href,
     new BrowserFetchHttpLib(),
@@ -113,6 +116,12 @@ export async function testRevenueAPI(
       return config;
     }
 
+    const resp = await api.getHistory(auth);
+    if (resp.type === "fail") {
+      return resp;
+    }
+    
+    return opFixedSuccess(resp.body.credit_account as PaytoString);
   } catch (err) {
     if (err instanceof TalerError) {
       return err;
@@ -122,7 +131,6 @@ export async function testRevenueAPI(
       //   detail: err.errorDetail,
       // };
     }
+    throw err
   }
-
-  return opFixedSuccess(undefined);
 }
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx
index 1eda7382d..c0ddab475 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx
@@ -75,7 +75,7 @@ export default function ListOtpDevices({
         <NotificationCard notification={{
           type: "WARN",
           message: i18n.str`You need to associate a bank account to receive revenue.`,
-          description: i18n.str`Without this the merchant backend will refuse to create new orders.`
+          description: i18n.str`Without this the you won't be able to create new orders.`
         }} />
       }
       <ListPage
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/Create.stories.tsx
index d9ac4202c..82038c918 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/Create.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/Create.stories.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 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
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx
index cec1f3426..cab5ba9cf 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 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
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/index.tsx
index deee7d0d5..32c92cab0 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/index.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 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
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/Table.tsx
index b5ca03cfd..1af8a1192 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/Table.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 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
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/index.tsx
index 006c2a49c..58d071ffc 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/index.tsx
@@ -1,6 +1,6 @@
 /*
  This file is part of GNU Taler
- (C) 2021-2023 Taler Systems S.A.
+ (C) 2021-2024 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
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
index 6738b1c6c..927e36cf7 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx
@@ -73,14 +73,14 @@ export function ListPage({
           >
             <InputSelector
               name="payto_uri"
-              label={i18n.str`Account URI`}
+              label={i18n.str`Bank account`}
               values={accounts}
               fromStr={(d) => {
                 const idx = accounts.indexOf(d)
                 if (idx === -1) return undefined;
                 return d
               }}
-              placeholder={i18n.str`Select one account`}
+              placeholder={i18n.str`All accounts`}
               tooltip={i18n.str`filter by account address`}
             />
           </FormProvider>