backoffice ui

4 files changed, 106 insertions, 52 deletions

diff --git a/packages/merchant-backoffice-ui/src/hooks/backend.ts b/packages/merchant-backoffice-ui/src/hooks/backend.ts
index eaeede103..4515f0557 100644
--- a/packages/merchant-backoffice-ui/src/hooks/backend.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/backend.ts
@@ -91,7 +91,7 @@ const CHECK_CONFIG_INTERVAL_OK = 5 * 60 * 1000;
 const CHECK_CONFIG_INTERVAL_FAIL = 2 * 1000;
 
 export function useBackendConfig(): HttpResponse<
-  MerchantBackend.VersionResponse,
+  MerchantBackend.VersionResponse | undefined,
   RequestError<MerchantBackend.ErrorDetail>
 > {
   const { request } = useBackendBaseRequest();
@@ -340,6 +340,14 @@ export function useBackendInstanceRequest(): useBackendInstanceRequestType {
       if (refunded !== undefined) params.refunded = refunded;
       if (wired !== undefined) params.wired = wired;
       if (date_s !== undefined) params.date_s = date_s;
+      if (delta === 0) {
+        //in this case we can already assume the response 
+        //and avoid network
+        return Promise.resolve({
+          ok: true,
+          data: {orders:[]} as T,
+        })
+      }
       return requestHandler<T>(baseUrl, endpoint, { params, token });
     },
     [baseUrl, token],
@@ -385,6 +393,14 @@ export function useBackendInstanceRequest(): useBackendInstanceRequestType {
       const params: any = {};
       if (payto_uri !== undefined) params.payto_uri = payto_uri;
       if (verified !== undefined) params.verified = verified;
+      if (delta === 0) {
+        //in this case we can already assume the response 
+        //and avoid network
+        return Promise.resolve({
+          ok: true,
+          data: {transfers:[]} as T,
+        })
+      }
       if (delta !== undefined) {
         params.limit = delta;
       }
@@ -403,6 +419,14 @@ export function useBackendInstanceRequest(): useBackendInstanceRequestType {
     ): Promise<HttpResponseOk<T>> {
       const [endpoint, position, delta] = args
       const params: any = {};
+      if (delta === 0) {
+        //in this case we can already assume the response 
+        //and avoid network
+        return Promise.resolve({
+          ok: true,
+          data: {templates:[]} as T,
+        })
+      }
       if (delta !== undefined) {
         params.limit = delta;
       }
@@ -421,6 +445,14 @@ export function useBackendInstanceRequest(): useBackendInstanceRequestType {
     ): Promise<HttpResponseOk<T>> {
       const [endpoint, position, delta] = args
       const params: any = {};
+      if (delta === 0) {
+        //in this case we can already assume the response 
+        //and avoid network
+        return Promise.resolve({
+          ok: true,
+          data: {webhooks:[]} as T,
+        })
+      }
       if (delta !== undefined) {
         params.limit = delta;
       }
diff --git a/packages/merchant-backoffice-ui/src/hooks/index.ts b/packages/merchant-backoffice-ui/src/hooks/index.ts
index 498e4eb78..3c8ef15ed 100644
--- a/packages/merchant-backoffice-ui/src/hooks/index.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/index.ts
@@ -32,7 +32,13 @@ const calculateRootPath = () => {
       ? window.location.origin + window.location.pathname
       : "/";
 
-  return rootPath.replace("webui/","");
+  /**
+   * By default, merchant backend serves the html content
+   * from the /webui root. This should cover most of the 
+   * cases and the rootPath will be the merchant backend
+   * URL where the instances are
+   */
+  return rootPath.replace("/webui/", "");
 };
 
 const loginTokenCodec = buildCodecForObject<LoginToken>()
diff --git a/packages/merchant-backoffice-ui/src/hooks/templates.ts b/packages/merchant-backoffice-ui/src/hooks/templates.ts
index 56cdd3046..ee8728cc8 100644
--- a/packages/merchant-backoffice-ui/src/hooks/templates.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/templates.ts
@@ -82,10 +82,19 @@ export function useTemplateAPI(): TemplateAPI {
     return res;
   };
 
+  const testTemplateExist = async (
+    templateId: string,
+  ): Promise<HttpResponseOk<void>> => {
+    const res = await request<void>(`/private/templates/${templateId}`, { method: "GET", });
+    return res;
+  };
+
+
   return {
     createTemplate,
     updateTemplate,
     deleteTemplate,
+    testTemplateExist,
     createOrderFromTemplate,
   };
 }
@@ -98,6 +107,9 @@ export interface TemplateAPI {
     id: string,
     data: MerchantBackend.Template.TemplatePatchDetails,
   ) => Promise<HttpResponseOk<void>>;
+  testTemplateExist: (
+    id: string
+  ) => Promise<HttpResponseOk<void>>;
   deleteTemplate: (id: string) => Promise<HttpResponseOk<void>>;
   createOrderFromTemplate: (
     id: string,
@@ -119,11 +131,11 @@ export function useInstanceTemplates(
 > {
   const { templateFetcher } = useBackendInstanceRequest();
 
-  // const [pageBefore, setPageBefore] = useState(1);
+  const [pageBefore, setPageBefore] = useState(1);
   const [pageAfter, setPageAfter] = useState(1);
 
   const totalAfter = pageAfter * PAGE_SIZE;
-  // const totalBefore = args?.position !== undefined ? pageBefore * PAGE_SIZE : 0;
+  const totalBefore = args?.position ? pageBefore * PAGE_SIZE : 0;
 
   /**
    * FIXME: this can be cleaned up a little
@@ -131,20 +143,20 @@ export function useInstanceTemplates(
    * the logic of double query should be inside the orderFetch so from the hook perspective and cache
    * is just one query and one error status
    */
-  // const {
-  //   data: beforeData,
-  //   error: beforeError,
-  //   isValidating: loadingBefore,
-  // } = useSWR<HttpResponseOk<MerchantBackend.Template.TemplateSummaryResponse>, HttpError>(
-  //   [
-  //     `/private/templates`,
-  //     token,
-  //     url,
-  //     args?.position,
-  //     totalBefore,
-  //   ],
-  //   templateFetcher,
-  // );
+  const {
+    data: beforeData,
+    error: beforeError,
+    isValidating: loadingBefore,
+  } = useSWR<
+    HttpResponseOk<MerchantBackend.Template.TemplateSummaryResponse>,
+    RequestError<MerchantBackend.ErrorDetail>>(
+      [
+        `/private/templates`,
+        args?.position,
+        totalBefore,
+      ],
+      templateFetcher,
+    );
   const {
     data: afterData,
     error: afterError,
@@ -155,9 +167,13 @@ export function useInstanceTemplates(
   >([`/private/templates`, args?.position, -totalAfter], templateFetcher);
 
   //this will save last result
-  // const [lastBefore, setLastBefore] = useState<
-  //   HttpResponse<MerchantBackend.Template.TemplateSummaryResponse, MerchantBackend.ErrorDetail>
-  // >({ loading: true });
+  const [lastBefore, setLastBefore] = useState<
+    HttpResponse<
+      MerchantBackend.Template.TemplateSummaryResponse,
+      MerchantBackend.ErrorDetail
+    >
+  >({ loading: true });
+
   const [lastAfter, setLastAfter] = useState<
     HttpResponse<
       MerchantBackend.Template.TemplateSummaryResponse,
@@ -166,19 +182,18 @@ export function useInstanceTemplates(
   >({ loading: true });
   useEffect(() => {
     if (afterData) setLastAfter(afterData);
-    // if (beforeData) setLastBefore(beforeData);
-  }, [afterData /*, beforeData*/]);
+    if (beforeData) setLastBefore(beforeData);
+  }, [afterData, beforeData]);
 
-  // if (beforeError) return beforeError;
+  if (beforeError) return beforeError.cause;
   if (afterError) return afterError.cause;
 
   // if the query returns less that we ask, then we have reach the end or beginning
   const isReachingEnd =
     afterData && afterData.data.templates.length < totalAfter;
-  const isReachingStart = false;
-  // args?.position === undefined
-  // ||
-  // (beforeData && beforeData.data.templates.length < totalBefore);
+  const isReachingStart = args?.position === undefined
+    ||
+    (beforeData && beforeData.data.templates.length < totalBefore);
 
   const pagination = {
     isReachingEnd,
@@ -188,37 +203,36 @@ export function useInstanceTemplates(
       if (afterData.data.templates.length < MAX_RESULT_SIZE) {
         setPageAfter(pageAfter + 1);
       } else {
-        const from = `${
-          afterData.data.templates[afterData.data.templates.length - 1]
-            .template_id
-        }`;
+        const from = `${afterData.data.templates[afterData.data.templates.length - 1]
+          .template_id
+          }`;
         if (from && updatePosition) updatePosition(from);
       }
     },
     loadMorePrev: () => {
-      // if (!beforeData || isReachingStart) return;
-      // if (beforeData.data.templates.length < MAX_RESULT_SIZE) {
-      //   setPageBefore(pageBefore + 1);
-      // } else if (beforeData) {
-      //   const from = `${beforeData.data.templates[beforeData.data.templates.length - 1]
-      //     .template_id
-      //     }`;
-      //   if (from && updatePosition) updatePosition(from);
-      // }
+      if (!beforeData || isReachingStart) return;
+      if (beforeData.data.templates.length < MAX_RESULT_SIZE) {
+        setPageBefore(pageBefore + 1);
+      } else if (beforeData) {
+        const from = `${beforeData.data.templates[beforeData.data.templates.length - 1]
+          .template_id
+          }`;
+        if (from && updatePosition) updatePosition(from);
+      }
     },
   };
 
-  const templates = !afterData ? [] : (afterData || lastAfter).data.templates;
-  // const templates =
-  //   !beforeData || !afterData
-  //     ? []
-  //     : (beforeData || lastBefore).data.templates
-  //       .slice()
-  //       .reverse()
-  //       .concat((afterData || lastAfter).data.templates);
-  if (loadingAfter /* || loadingBefore */)
+  // const templates = !afterData ? [] : (afterData || lastAfter).data.templates;
+  const templates =
+    !beforeData || !afterData
+      ? []
+      : (beforeData || lastBefore).data.templates
+        .slice()
+        .reverse()
+        .concat((afterData || lastAfter).data.templates);
+  if (loadingAfter || loadingBefore)
     return { loading: true, data: { templates } };
-  if (/*beforeData &&*/ afterData) {
+  if (beforeData && afterData) {
     return { ok: true, data: { templates }, ...pagination };
   }
   return { loading: true };
diff --git a/packages/merchant-backoffice-ui/src/hooks/webhooks.ts b/packages/merchant-backoffice-ui/src/hooks/webhooks.ts
index c91fff8b4..ad6bf96e2 100644
--- a/packages/merchant-backoffice-ui/src/hooks/webhooks.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/webhooks.ts
@@ -93,9 +93,11 @@ export function useInstanceWebhooks(
 > {
   const { webhookFetcher } = useBackendInstanceRequest();
 
+  const [pageBefore, setPageBefore] = useState(1);
   const [pageAfter, setPageAfter] = useState(1);
 
   const totalAfter = pageAfter * PAGE_SIZE;
+  const totalBefore = args?.position ? pageBefore * PAGE_SIZE : 0;
 
   const {
     data: afterData,
@@ -120,7 +122,7 @@ export function useInstanceWebhooks(
 
   const isReachingEnd =
     afterData && afterData.data.webhooks.length < totalAfter;
-  const isReachingStart = false;
+  const isReachingStart = true;
 
   const pagination = {
     isReachingEnd,