use request api from web-util

9 files changed, 222 insertions, 113 deletions

diff --git a/packages/merchant-backoffice-ui/src/hooks/backend.ts b/packages/merchant-backoffice-ui/src/hooks/backend.ts
index 3f3db2fa1..952b33f7e 100644
--- a/packages/merchant-backoffice-ui/src/hooks/backend.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/backend.ts
@@ -28,8 +28,8 @@ import {
   HttpResponse,
   HttpResponseOk,
   RequestOptions,
-} from "../utils/request.js";
-import { useApiContext } from "../context/api.js";
+} from "@gnu-taler/web-util/lib/index.browser";
+import { useApiContext } from "@gnu-taler/web-util/lib/index.browser";
 
 export function useMatchMutate(): (
   re: RegExp,
@@ -54,12 +54,17 @@ export function useMatchMutate(): (
   };
 }
 
-export function useBackendInstancesTestForAdmin(): HttpResponse<MerchantBackend.Instances.InstancesResponse> {
+export function useBackendInstancesTestForAdmin(): HttpResponse<
+  MerchantBackend.Instances.InstancesResponse,
+  MerchantBackend.ErrorDetail
+> {
   const { request } = useBackendBaseRequest();
 
   type Type = MerchantBackend.Instances.InstancesResponse;
 
-  const [result, setResult] = useState<HttpResponse<Type>>({ loading: true });
+  const [result, setResult] = useState<
+    HttpResponse<Type, MerchantBackend.ErrorDetail>
+  >({ loading: true });
 
   useEffect(() => {
     request<Type>(`/management/instances`)
@@ -70,12 +75,17 @@ export function useBackendInstancesTestForAdmin(): HttpResponse<MerchantBackend.
   return result;
 }
 
-export function useBackendConfig(): HttpResponse<MerchantBackend.VersionResponse> {
+export function useBackendConfig(): HttpResponse<
+  MerchantBackend.VersionResponse,
+  MerchantBackend.ErrorDetail
+> {
   const { request } = useBackendBaseRequest();
 
   type Type = MerchantBackend.VersionResponse;
 
-  const [result, setResult] = useState<HttpResponse<Type>>({ loading: true });
+  const [result, setResult] = useState<
+    HttpResponse<Type, MerchantBackend.ErrorDetail>
+  >({ loading: true });
 
   useEffect(() => {
     request<Type>(`/config`)
@@ -88,15 +98,15 @@ export function useBackendConfig(): HttpResponse<MerchantBackend.VersionResponse
 
 interface useBackendInstanceRequestType {
   request: <T>(
-    path: string,
+    endpoint: string,
     options?: RequestOptions,
   ) => Promise<HttpResponseOk<T>>;
-  fetcher: <T>(path: string) => Promise<HttpResponseOk<T>>;
-  reserveDetailFetcher: <T>(path: string) => Promise<HttpResponseOk<T>>;
-  tipsDetailFetcher: <T>(path: string) => Promise<HttpResponseOk<T>>;
+  fetcher: <T>(endpoint: string) => Promise<HttpResponseOk<T>>;
+  reserveDetailFetcher: <T>(endpoint: string) => Promise<HttpResponseOk<T>>;
+  tipsDetailFetcher: <T>(endpoint: string) => Promise<HttpResponseOk<T>>;
   multiFetcher: <T>(url: string[]) => Promise<HttpResponseOk<T>[]>;
   orderFetcher: <T>(
-    path: string,
+    endpoint: string,
     paid?: YesOrNo,
     refunded?: YesOrNo,
     wired?: YesOrNo,
@@ -104,26 +114,26 @@ interface useBackendInstanceRequestType {
     delta?: number,
   ) => Promise<HttpResponseOk<T>>;
   transferFetcher: <T>(
-    path: string,
+    endpoint: string,
     payto_uri?: string,
     verified?: string,
     position?: string,
     delta?: number,
   ) => Promise<HttpResponseOk<T>>;
   templateFetcher: <T>(
-    path: string,
+    endpoint: string,
     position?: string,
     delta?: number,
   ) => Promise<HttpResponseOk<T>>;
   webhookFetcher: <T>(
-    path: string,
+    endpoint: string,
     position?: string,
     delta?: number,
   ) => Promise<HttpResponseOk<T>>;
 }
 interface useBackendBaseRequestType {
   request: <T>(
-    path: string,
+    endpoint: string,
     options?: RequestOptions,
   ) => Promise<HttpResponseOk<T>>;
 }
@@ -141,10 +151,10 @@ export function useBackendBaseRequest(): useBackendBaseRequestType {
 
   const request = useCallback(
     function requestImpl<T>(
-      path: string,
+      endpoint: string,
       options: RequestOptions = {},
     ): Promise<HttpResponseOk<T>> {
-      return requestHandler<T>(backend, path, { token, ...options });
+      return requestHandler<T>(backend, endpoint, { token, ...options });
     },
     [backend, token],
   );
@@ -153,45 +163,47 @@ export function useBackendBaseRequest(): useBackendBaseRequestType {
 }
 
 export function useBackendInstanceRequest(): useBackendInstanceRequestType {
-  const { url: baseUrl, token: baseToken } = useBackendContext();
+  const { url: rootBackendUrl, token: rootToken } = useBackendContext();
   const { token: instanceToken, id, admin } = useInstanceContext();
   const { request: requestHandler } = useApiContext();
 
-  const { backend, token } = !admin
-    ? { backend: baseUrl, token: baseToken }
-    : { backend: `${baseUrl}/instances/${id}`, token: instanceToken };
+  const { baseUrl, token } = !admin
+    ? { baseUrl: rootBackendUrl, token: rootToken }
+    : { baseUrl: `${rootBackendUrl}/instances/${id}`, token: instanceToken };
 
   const request = useCallback(
     function requestImpl<T>(
-      path: string,
+      endpoint: string,
       options: RequestOptions = {},
     ): Promise<HttpResponseOk<T>> {
-      return requestHandler<T>(backend, path, { token, ...options });
+      return requestHandler<T>(baseUrl, endpoint, { token, ...options });
     },
-    [backend, token],
+    [baseUrl, token],
   );
 
   const multiFetcher = useCallback(
     function multiFetcherImpl<T>(
-      paths: string[],
+      endpoints: string[],
     ): Promise<HttpResponseOk<T>[]> {
       return Promise.all(
-        paths.map((path) => requestHandler<T>(backend, path, { token })),
+        endpoints.map((endpoint) =>
+          requestHandler<T>(baseUrl, endpoint, { token }),
+        ),
       );
     },
-    [backend, token],
+    [baseUrl, token],
   );
 
   const fetcher = useCallback(
-    function fetcherImpl<T>(path: string): Promise<HttpResponseOk<T>> {
-      return requestHandler<T>(backend, path, { token });
+    function fetcherImpl<T>(endpoint: string): Promise<HttpResponseOk<T>> {
+      return requestHandler<T>(baseUrl, endpoint, { token });
     },
-    [backend, token],
+    [baseUrl, token],
   );
 
   const orderFetcher = useCallback(
     function orderFetcherImpl<T>(
-      path: string,
+      endpoint: string,
       paid?: YesOrNo,
       refunded?: YesOrNo,
       wired?: YesOrNo,
@@ -208,42 +220,42 @@ export function useBackendInstanceRequest(): useBackendInstanceRequestType {
       if (refunded !== undefined) params.refunded = refunded;
       if (wired !== undefined) params.wired = wired;
       if (date_ms !== undefined) params.date_ms = date_ms;
-      return requestHandler<T>(backend, path, { params, token });
+      return requestHandler<T>(baseUrl, endpoint, { params, token });
     },
-    [backend, token],
+    [baseUrl, token],
   );
 
   const reserveDetailFetcher = useCallback(
     function reserveDetailFetcherImpl<T>(
-      path: string,
+      endpoint: string,
     ): Promise<HttpResponseOk<T>> {
-      return requestHandler<T>(backend, path, {
+      return requestHandler<T>(baseUrl, endpoint, {
         params: {
           tips: "yes",
         },
         token,
       });
     },
-    [backend, token],
+    [baseUrl, token],
   );
 
   const tipsDetailFetcher = useCallback(
     function tipsDetailFetcherImpl<T>(
-      path: string,
+      endpoint: string,
     ): Promise<HttpResponseOk<T>> {
-      return requestHandler<T>(backend, path, {
+      return requestHandler<T>(baseUrl, endpoint, {
         params: {
           pickups: "yes",
         },
         token,
       });
     },
-    [backend, token],
+    [baseUrl, token],
   );
 
   const transferFetcher = useCallback(
     function transferFetcherImpl<T>(
-      path: string,
+      endpoint: string,
       payto_uri?: string,
       verified?: string,
       position?: string,
@@ -257,14 +269,14 @@ export function useBackendInstanceRequest(): useBackendInstanceRequestType {
       }
       if (position !== undefined) params.offset = position;
 
-      return requestHandler<T>(backend, path, { params, token });
+      return requestHandler<T>(baseUrl, endpoint, { params, token });
     },
-    [backend, token],
+    [baseUrl, token],
   );
 
   const templateFetcher = useCallback(
     function templateFetcherImpl<T>(
-      path: string,
+      endpoint: string,
       position?: string,
       delta?: number,
     ): Promise<HttpResponseOk<T>> {
@@ -274,14 +286,14 @@ export function useBackendInstanceRequest(): useBackendInstanceRequestType {
       }
       if (position !== undefined) params.offset = position;
 
-      return requestHandler<T>(backend, path, { params, token });
+      return requestHandler<T>(baseUrl, endpoint, { params, token });
     },
-    [backend, token],
+    [baseUrl, token],
   );
 
   const webhookFetcher = useCallback(
     function webhookFetcherImpl<T>(
-      path: string,
+      endpoint: string,
       position?: string,
       delta?: number,
     ): Promise<HttpResponseOk<T>> {
@@ -291,9 +303,9 @@ export function useBackendInstanceRequest(): useBackendInstanceRequestType {
       }
       if (position !== undefined) params.offset = position;
 
-      return requestHandler<T>(backend, path, { params, token });
+      return requestHandler<T>(baseUrl, endpoint, { params, token });
     },
-    [backend, token],
+    [baseUrl, token],
   );
 
   return {
diff --git a/packages/merchant-backoffice-ui/src/hooks/instance.ts b/packages/merchant-backoffice-ui/src/hooks/instance.ts
index 3c05472d0..f118e1e6e 100644
--- a/packages/merchant-backoffice-ui/src/hooks/instance.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/instance.ts
@@ -16,7 +16,11 @@
 import useSWR, { useSWRConfig } from "swr";
 import { useBackendContext } from "../context/backend.js";
 import { MerchantBackend } from "../declaration.js";
-import { HttpError, HttpResponse, HttpResponseOk } from "../utils/request.js";
+import {
+  HttpError,
+  HttpResponse,
+  HttpResponseOk,
+} from "@gnu-taler/web-util/lib/index.browser";
 import {
   useBackendBaseRequest,
   useBackendInstanceRequest,
@@ -176,12 +180,15 @@ export function useInstanceAPI(): InstanceAPI {
   return { updateInstance, deleteInstance, setNewToken, clearToken };
 }
 
-export function useInstanceDetails(): HttpResponse<MerchantBackend.Instances.QueryInstancesResponse> {
+export function useInstanceDetails(): HttpResponse<
+  MerchantBackend.Instances.QueryInstancesResponse,
+  MerchantBackend.ErrorDetail
+> {
   const { fetcher } = useBackendInstanceRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Instances.QueryInstancesResponse>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/`], fetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
@@ -203,12 +210,15 @@ type KYCStatus =
   | { type: "ok" }
   | { type: "redirect"; status: MerchantBackend.Instances.AccountKycRedirects };
 
-export function useInstanceKYCDetails(): HttpResponse<KYCStatus> {
+export function useInstanceKYCDetails(): HttpResponse<
+  KYCStatus,
+  MerchantBackend.ErrorDetail
+> {
   const { fetcher } = useBackendInstanceRequest();
 
   const { data, error } = useSWR<
     HttpResponseOk<MerchantBackend.Instances.AccountKycRedirects>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/kyc`], fetcher, {
     refreshInterval: 5000,
     refreshWhenHidden: false,
@@ -231,12 +241,15 @@ export function useInstanceKYCDetails(): HttpResponse<KYCStatus> {
 
 export function useManagedInstanceDetails(
   instanceId: string,
-): HttpResponse<MerchantBackend.Instances.QueryInstancesResponse> {
+): HttpResponse<
+  MerchantBackend.Instances.QueryInstancesResponse,
+  MerchantBackend.ErrorDetail
+> {
   const { request } = useBackendBaseRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Instances.QueryInstancesResponse>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/management/instances/${instanceId}`], request, {
     refreshInterval: 0,
     refreshWhenHidden: false,
@@ -254,12 +267,15 @@ export function useManagedInstanceDetails(
   return { loading: true };
 }
 
-export function useBackendInstances(): HttpResponse<MerchantBackend.Instances.InstancesResponse> {
+export function useBackendInstances(): HttpResponse<
+  MerchantBackend.Instances.InstancesResponse,
+  MerchantBackend.ErrorDetail
+> {
   const { request } = useBackendBaseRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Instances.InstancesResponse>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >(["/management/instances"], request);
 
   if (isValidating) return { loading: true, data: data?.data };
diff --git a/packages/merchant-backoffice-ui/src/hooks/order.ts b/packages/merchant-backoffice-ui/src/hooks/order.ts
index 5be480160..c01f8dd83 100644
--- a/packages/merchant-backoffice-ui/src/hooks/order.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/order.ts
@@ -22,7 +22,7 @@ import {
   HttpResponse,
   HttpResponseOk,
   HttpResponsePaginated,
-} from "../utils/request.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 import { useBackendInstanceRequest, useMatchMutate } from "./backend.js";
 
 export interface OrderAPI {
@@ -128,12 +128,15 @@ export function useOrderAPI(): OrderAPI {
 
 export function useOrderDetails(
   oderId: string,
-): HttpResponse<MerchantBackend.Orders.MerchantOrderStatusResponse> {
+): HttpResponse<
+  MerchantBackend.Orders.MerchantOrderStatusResponse,
+  MerchantBackend.ErrorDetail
+> {
   const { fetcher } = useBackendInstanceRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Orders.MerchantOrderStatusResponse>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/orders/${oderId}`], fetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
@@ -158,7 +161,10 @@ export interface InstanceOrderFilter {
 export function useInstanceOrders(
   args?: InstanceOrderFilter,
   updateFilter?: (d: Date) => void,
-): HttpResponsePaginated<MerchantBackend.Orders.OrderHistory> {
+): HttpResponsePaginated<
+  MerchantBackend.Orders.OrderHistory,
+  MerchantBackend.ErrorDetail
+> {
   const { orderFetcher } = useBackendInstanceRequest();
 
   const [pageBefore, setPageBefore] = useState(1);
@@ -177,7 +183,10 @@ export function useInstanceOrders(
     data: beforeData,
     error: beforeError,
     isValidating: loadingBefore,
-  } = useSWR<HttpResponseOk<MerchantBackend.Orders.OrderHistory>, HttpError>(
+  } = useSWR<
+    HttpResponseOk<MerchantBackend.Orders.OrderHistory>,
+    HttpError<MerchantBackend.ErrorDetail>
+  >(
     [
       `/private/orders`,
       args?.paid,
@@ -192,7 +201,10 @@ export function useInstanceOrders(
     data: afterData,
     error: afterError,
     isValidating: loadingAfter,
-  } = useSWR<HttpResponseOk<MerchantBackend.Orders.OrderHistory>, HttpError>(
+  } = useSWR<
+    HttpResponseOk<MerchantBackend.Orders.OrderHistory>,
+    HttpError<MerchantBackend.ErrorDetail>
+  >(
     [
       `/private/orders`,
       args?.paid,
@@ -206,10 +218,16 @@ export function useInstanceOrders(
 
   //this will save last result
   const [lastBefore, setLastBefore] = useState<
-    HttpResponse<MerchantBackend.Orders.OrderHistory>
+    HttpResponse<
+      MerchantBackend.Orders.OrderHistory,
+      MerchantBackend.ErrorDetail
+    >
   >({ loading: true });
   const [lastAfter, setLastAfter] = useState<
-    HttpResponse<MerchantBackend.Orders.OrderHistory>
+    HttpResponse<
+      MerchantBackend.Orders.OrderHistory,
+      MerchantBackend.ErrorDetail
+    >
   >({ loading: true });
   useEffect(() => {
     if (afterData) setLastAfter(afterData);
diff --git a/packages/merchant-backoffice-ui/src/hooks/product.ts b/packages/merchant-backoffice-ui/src/hooks/product.ts
index af8ad74f3..5d95a2f8f 100644
--- a/packages/merchant-backoffice-ui/src/hooks/product.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/product.ts
@@ -15,7 +15,11 @@
  */
 import useSWR, { useSWRConfig } from "swr";
 import { MerchantBackend, WithId } from "../declaration.js";
-import { HttpError, HttpResponse, HttpResponseOk } from "../utils/request.js";
+import {
+  HttpError,
+  HttpResponse,
+  HttpResponseOk,
+} from "@gnu-taler/web-util/lib/index.browser";
 import { useBackendInstanceRequest, useMatchMutate } from "./backend.js";
 
 export interface ProductAPI {
@@ -85,13 +89,14 @@ export function useProductAPI(): ProductAPI {
 }
 
 export function useInstanceProducts(): HttpResponse<
-  (MerchantBackend.Products.ProductDetail & WithId)[]
+  (MerchantBackend.Products.ProductDetail & WithId)[],
+  MerchantBackend.ErrorDetail
 > {
   const { fetcher, multiFetcher } = useBackendInstanceRequest();
 
   const { data: list, error: listError } = useSWR<
     HttpResponseOk<MerchantBackend.Products.InventorySummaryResponse>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/products`], fetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
@@ -105,7 +110,7 @@ export function useInstanceProducts(): HttpResponse<
   );
   const { data: products, error: productError } = useSWR<
     HttpResponseOk<MerchantBackend.Products.ProductDetail>[],
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([paths], multiFetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
@@ -122,7 +127,7 @@ export function useInstanceProducts(): HttpResponse<
       //take the id from the queried url
       return {
         ...d.data,
-        id: d.info?.url.href.replace(/.*\/private\/products\//, "") || "",
+        id: d.info?.url.replace(/.*\/private\/products\//, "") || "",
       };
     });
     return { ok: true, data: dataWithId };
@@ -132,12 +137,15 @@ export function useInstanceProducts(): HttpResponse<
 
 export function useProductDetails(
   productId: string,
-): HttpResponse<MerchantBackend.Products.ProductDetail> {
+): HttpResponse<
+  MerchantBackend.Products.ProductDetail,
+  MerchantBackend.ErrorDetail
+> {
   const { fetcher } = useBackendInstanceRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Products.ProductDetail>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/products/${productId}`], fetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
diff --git a/packages/merchant-backoffice-ui/src/hooks/reserves.ts b/packages/merchant-backoffice-ui/src/hooks/reserves.ts
index dc127af13..0215f32c5 100644
--- a/packages/merchant-backoffice-ui/src/hooks/reserves.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/reserves.ts
@@ -15,7 +15,11 @@
  */
 import useSWR, { useSWRConfig } from "swr";
 import { MerchantBackend } from "../declaration.js";
-import { HttpError, HttpResponse, HttpResponseOk } from "../utils/request.js";
+import {
+  HttpError,
+  HttpResponse,
+  HttpResponseOk,
+} from "@gnu-taler/web-util/lib/index.browser";
 import { useBackendInstanceRequest, useMatchMutate } from "./backend.js";
 
 export function useReservesAPI(): ReserveMutateAPI {
@@ -77,7 +81,9 @@ export function useReservesAPI(): ReserveMutateAPI {
     return res;
   };
 
-  const deleteReserve = async (pub: string): Promise<HttpResponse<void>> => {
+  const deleteReserve = async (
+    pub: string,
+  ): Promise<HttpResponse<void, MerchantBackend.ErrorDetail>> => {
     const res = await request<void>(`/private/reserves/${pub}`, {
       method: "DELETE",
     });
@@ -102,15 +108,20 @@ export interface ReserveMutateAPI {
   authorizeTip: (
     data: MerchantBackend.Tips.TipCreateRequest,
   ) => Promise<HttpResponseOk<MerchantBackend.Tips.TipCreateConfirmation>>;
-  deleteReserve: (id: string) => Promise<HttpResponse<void>>;
+  deleteReserve: (
+    id: string,
+  ) => Promise<HttpResponse<void, MerchantBackend.ErrorDetail>>;
 }
 
-export function useInstanceReserves(): HttpResponse<MerchantBackend.Tips.TippingReserveStatus> {
+export function useInstanceReserves(): HttpResponse<
+  MerchantBackend.Tips.TippingReserveStatus,
+  MerchantBackend.ErrorDetail
+> {
   const { fetcher } = useBackendInstanceRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Tips.TippingReserveStatus>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/reserves`], fetcher);
 
   if (isValidating) return { loading: true, data: data?.data };
@@ -121,12 +132,15 @@ export function useInstanceReserves(): HttpResponse<MerchantBackend.Tips.Tipping
 
 export function useReserveDetails(
   reserveId: string,
-): HttpResponse<MerchantBackend.Tips.ReserveDetail> {
+): HttpResponse<
+  MerchantBackend.Tips.ReserveDetail,
+  MerchantBackend.ErrorDetail
+> {
   const { reserveDetailFetcher } = useBackendInstanceRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Tips.ReserveDetail>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/reserves/${reserveId}`], reserveDetailFetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
@@ -143,12 +157,12 @@ export function useReserveDetails(
 
 export function useTipDetails(
   tipId: string,
-): HttpResponse<MerchantBackend.Tips.TipDetails> {
+): HttpResponse<MerchantBackend.Tips.TipDetails, MerchantBackend.ErrorDetail> {
   const { tipsDetailFetcher } = useBackendInstanceRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Tips.TipDetails>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/tips/${tipId}`], tipsDetailFetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
diff --git a/packages/merchant-backoffice-ui/src/hooks/templates.ts b/packages/merchant-backoffice-ui/src/hooks/templates.ts
index 3a28b903d..124786887 100644
--- a/packages/merchant-backoffice-ui/src/hooks/templates.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/templates.ts
@@ -23,7 +23,7 @@ import {
   HttpResponse,
   HttpResponseOk,
   HttpResponsePaginated,
-} from "../utils/request.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 
 export function useTemplateAPI(): TemplateAPI {
   const mutateAll = useMatchMutate();
@@ -79,7 +79,12 @@ export function useTemplateAPI(): TemplateAPI {
     return res;
   };
 
-  return { createTemplate, updateTemplate, deleteTemplate, createOrderFromTemplate };
+  return {
+    createTemplate,
+    updateTemplate,
+    deleteTemplate,
+    createOrderFromTemplate,
+  };
 }
 
 export interface TemplateAPI {
@@ -105,7 +110,10 @@ export interface InstanceTemplateFilter {
 export function useInstanceTemplates(
   args?: InstanceTemplateFilter,
   updatePosition?: (id: string) => void,
-): HttpResponsePaginated<MerchantBackend.Template.TemplateSummaryResponse> {
+): HttpResponsePaginated<
+  MerchantBackend.Template.TemplateSummaryResponse,
+  MerchantBackend.ErrorDetail
+> {
   const { templateFetcher } = useBackendInstanceRequest();
 
   // const [pageBefore, setPageBefore] = useState(1);
@@ -140,15 +148,18 @@ export function useInstanceTemplates(
     isValidating: loadingAfter,
   } = useSWR<
     HttpResponseOk<MerchantBackend.Template.TemplateSummaryResponse>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/templates`, args?.position, -totalAfter], templateFetcher);
 
   //this will save last result
   // const [lastBefore, setLastBefore] = useState<
-  //   HttpResponse<MerchantBackend.Template.TemplateSummaryResponse>
+  //   HttpResponse<MerchantBackend.Template.TemplateSummaryResponse, MerchantBackend.ErrorDetail>
   // >({ loading: true });
   const [lastAfter, setLastAfter] = useState<
-    HttpResponse<MerchantBackend.Template.TemplateSummaryResponse>
+    HttpResponse<
+      MerchantBackend.Template.TemplateSummaryResponse,
+      MerchantBackend.ErrorDetail
+    >
   >({ loading: true });
   useEffect(() => {
     if (afterData) setLastAfter(afterData);
@@ -174,9 +185,10 @@ 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);
       }
     },
@@ -211,12 +223,15 @@ export function useInstanceTemplates(
 
 export function useTemplateDetails(
   templateId: string,
-): HttpResponse<MerchantBackend.Template.TemplateDetails> {
+): HttpResponse<
+  MerchantBackend.Template.TemplateDetails,
+  MerchantBackend.ErrorDetail
+> {
   const { templateFetcher } = useBackendInstanceRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Template.TemplateDetails>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/templates/${templateId}`], templateFetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,
diff --git a/packages/merchant-backoffice-ui/src/hooks/testing.tsx b/packages/merchant-backoffice-ui/src/hooks/testing.tsx
index 8c5a5a36b..64e646bb5 100644
--- a/packages/merchant-backoffice-ui/src/hooks/testing.tsx
+++ b/packages/merchant-backoffice-ui/src/hooks/testing.tsx
@@ -22,10 +22,13 @@
 import { MockEnvironment } from "@gnu-taler/web-util/lib/tests/mock";
 import { ComponentChildren, FunctionalComponent, h, VNode } from "preact";
 import { SWRConfig } from "swr";
-import { ApiContextProvider } from "../context/api.js";
+import { ApiContextProvider } from "@gnu-taler/web-util/lib/index.browser";
 import { BackendContextProvider } from "../context/backend.js";
 import { InstanceContextProvider } from "../context/instance.js";
-import { HttpResponseOk, RequestOptions } from "../utils/request.js";
+import {
+  HttpResponseOk,
+  RequestOptions,
+} from "@gnu-taler/web-util/lib/index.browser";
 
 export class ApiMockEnvironment extends MockEnvironment {
   constructor(debug = false) {
@@ -78,7 +81,7 @@ export class ApiMockEnvironment extends MockEnvironment {
           info: {
             hasToken: !!options.token,
             status: !mocked ? 200 : mocked.status,
-            url: _url,
+            url: _url.href,
             payload: options.data,
           },
         };
diff --git a/packages/merchant-backoffice-ui/src/hooks/transfer.ts b/packages/merchant-backoffice-ui/src/hooks/transfer.ts
index b86247476..6b30047e9 100644
--- a/packages/merchant-backoffice-ui/src/hooks/transfer.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/transfer.ts
@@ -22,7 +22,7 @@ import {
   HttpResponse,
   HttpResponseOk,
   HttpResponsePaginated,
-} from "../utils/request.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 import { useBackendInstanceRequest, useMatchMutate } from "./backend.js";
 
 export function useTransferAPI(): TransferAPI {
@@ -67,7 +67,10 @@ export interface InstanceTransferFilter {
 export function useInstanceTransfers(
   args?: InstanceTransferFilter,
   updatePosition?: (id: string) => void,
-): HttpResponsePaginated<MerchantBackend.Transfers.TransferList> {
+): HttpResponsePaginated<
+  MerchantBackend.Transfers.TransferList,
+  MerchantBackend.ErrorDetail
+> {
   const { transferFetcher } = useBackendInstanceRequest();
 
   const [pageBefore, setPageBefore] = useState(1);
@@ -86,7 +89,10 @@ export function useInstanceTransfers(
     data: beforeData,
     error: beforeError,
     isValidating: loadingBefore,
-  } = useSWR<HttpResponseOk<MerchantBackend.Transfers.TransferList>, HttpError>(
+  } = useSWR<
+    HttpResponseOk<MerchantBackend.Transfers.TransferList>,
+    HttpError<MerchantBackend.ErrorDetail>
+  >(
     [
       `/private/transfers`,
       args?.payto_uri,
@@ -100,7 +106,10 @@ export function useInstanceTransfers(
     data: afterData,
     error: afterError,
     isValidating: loadingAfter,
-  } = useSWR<HttpResponseOk<MerchantBackend.Transfers.TransferList>, HttpError>(
+  } = useSWR<
+    HttpResponseOk<MerchantBackend.Transfers.TransferList>,
+    HttpError<MerchantBackend.ErrorDetail>
+  >(
     [
       `/private/transfers`,
       args?.payto_uri,
@@ -113,10 +122,16 @@ export function useInstanceTransfers(
 
   //this will save last result
   const [lastBefore, setLastBefore] = useState<
-    HttpResponse<MerchantBackend.Transfers.TransferList>
+    HttpResponse<
+      MerchantBackend.Transfers.TransferList,
+      MerchantBackend.ErrorDetail
+    >
   >({ loading: true });
   const [lastAfter, setLastAfter] = useState<
-    HttpResponse<MerchantBackend.Transfers.TransferList>
+    HttpResponse<
+      MerchantBackend.Transfers.TransferList,
+      MerchantBackend.ErrorDetail
+    >
   >({ loading: true });
   useEffect(() => {
     if (afterData) setLastAfter(afterData);
diff --git a/packages/merchant-backoffice-ui/src/hooks/webhooks.ts b/packages/merchant-backoffice-ui/src/hooks/webhooks.ts
index 9f196cefa..e1cd3daf2 100644
--- a/packages/merchant-backoffice-ui/src/hooks/webhooks.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/webhooks.ts
@@ -23,7 +23,7 @@ import {
   HttpResponse,
   HttpResponseOk,
   HttpResponsePaginated,
-} from "../utils/request.js";
+} from "@gnu-taler/web-util/lib/index.browser";
 
 export function useWebhookAPI(): WebhookAPI {
   const mutateAll = useMatchMutate();
@@ -84,7 +84,10 @@ export interface InstanceWebhookFilter {
 export function useInstanceWebhooks(
   args?: InstanceWebhookFilter,
   updatePosition?: (id: string) => void,
-): HttpResponsePaginated<MerchantBackend.Webhooks.WebhookSummaryResponse> {
+): HttpResponsePaginated<
+  MerchantBackend.Webhooks.WebhookSummaryResponse,
+  MerchantBackend.ErrorDetail
+> {
   const { webhookFetcher } = useBackendInstanceRequest();
 
   const [pageAfter, setPageAfter] = useState(1);
@@ -97,11 +100,14 @@ export function useInstanceWebhooks(
     isValidating: loadingAfter,
   } = useSWR<
     HttpResponseOk<MerchantBackend.Webhooks.WebhookSummaryResponse>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/webhooks`, args?.position, -totalAfter], webhookFetcher);
 
   const [lastAfter, setLastAfter] = useState<
-    HttpResponse<MerchantBackend.Webhooks.WebhookSummaryResponse>
+    HttpResponse<
+      MerchantBackend.Webhooks.WebhookSummaryResponse,
+      MerchantBackend.ErrorDetail
+    >
   >({ loading: true });
   useEffect(() => {
     if (afterData) setLastAfter(afterData);
@@ -121,21 +127,20 @@ export function useInstanceWebhooks(
       if (afterData.data.webhooks.length < MAX_RESULT_SIZE) {
         setPageAfter(pageAfter + 1);
       } else {
-        const from = `${afterData.data.webhooks[afterData.data.webhooks.length - 1]
-          .webhook_id
-          }`;
+        const from = `${
+          afterData.data.webhooks[afterData.data.webhooks.length - 1].webhook_id
+        }`;
         if (from && updatePosition) updatePosition(from);
       }
     },
     loadMorePrev: () => {
-      return
+      return;
     },
   };
 
   const webhooks = !afterData ? [] : (afterData || lastAfter).data.webhooks;
 
-  if (loadingAfter)
-    return { loading: true, data: { webhooks } };
+  if (loadingAfter) return { loading: true, data: { webhooks } };
   if (afterData) {
     return { ok: true, data: { webhooks }, ...pagination };
   }
@@ -144,12 +149,15 @@ export function useInstanceWebhooks(
 
 export function useWebhookDetails(
   webhookId: string,
-): HttpResponse<MerchantBackend.Webhooks.WebhookDetails> {
+): HttpResponse<
+  MerchantBackend.Webhooks.WebhookDetails,
+  MerchantBackend.ErrorDetail
+> {
   const { webhookFetcher } = useBackendInstanceRequest();
 
   const { data, error, isValidating } = useSWR<
     HttpResponseOk<MerchantBackend.Webhooks.WebhookDetails>,
-    HttpError
+    HttpError<MerchantBackend.ErrorDetail>
   >([`/private/webhooks/${webhookId}`], webhookFetcher, {
     refreshInterval: 0,
     refreshWhenHidden: false,