wip #8655

35 files changed, 726 insertions, 827 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/JumpToElementById.tsx b/packages/merchant-backoffice-ui/src/components/form/JumpToElementById.tsx
index a0e1d6ae4..f5f9d5b4f 100644
--- a/packages/merchant-backoffice-ui/src/components/form/JumpToElementById.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/JumpToElementById.tsx
@@ -3,7 +3,7 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 
-export function JumpToElementById({ testIfExist, onSelect, placeholder, description }: { placeholder: TranslatedString, description: TranslatedString, testIfExist: (id: string) => Promise<any>, onSelect: (id: string) => void }): VNode {
+export function JumpToElementById({ testIfExist, onSelect, placeholder, description }: { placeholder: TranslatedString, description: TranslatedString, testIfExist: (id: string) => Promise<boolean>, onSelect: (id: string) => void }): VNode {
   const { i18n } = useTranslationContext()
 
   const [error, setError] = useState<string | undefined>(
@@ -17,9 +17,13 @@ export function JumpToElementById({ testIfExist, onSelect, placeholder, descript
       return;
     }
     try {
-      await testIfExist(currentId);
-      onSelect(currentId);
-      setError(undefined);
+      const exi = await testIfExist(currentId);
+      if (exi) {
+        onSelect(currentId);
+        setError(undefined);
+      } else {
+        setError(i18n.str`not found`);
+      }
     } catch {
       setError(i18n.str`not found`);
     }
diff --git a/packages/merchant-backoffice-ui/src/context/session.ts b/packages/merchant-backoffice-ui/src/context/session.ts
index 9d63d8e33..98cb27400 100644
--- a/packages/merchant-backoffice-ui/src/context/session.ts
+++ b/packages/merchant-backoffice-ui/src/context/session.ts
@@ -55,6 +55,7 @@ interface Expired {
   backendUrl: string;
   isAdmin: boolean;
   instance: string;
+  token?: undefined;
   impersonate: Impersonate | undefined;
 }
 interface LoggedOut {
@@ -62,6 +63,7 @@ interface LoggedOut {
   backendUrl: string;
   instance: string;
   isAdmin: boolean;
+  token?: undefined;
 }
 
 export const codecForSessionStateLoggedIn = (): Codec<LoggedIn> =>
@@ -231,6 +233,7 @@ export function useSessionContext(): SessionStateHandler {
       const nextState: SessionState = {
         ...state,
         status: "expired",
+        token: undefined,
       };
       update(nextState);
     },
diff --git a/packages/merchant-backoffice-ui/src/hooks/backend.ts b/packages/merchant-backoffice-ui/src/hooks/backend.ts
index e4e50c8ad..8c54f70db 100644
--- a/packages/merchant-backoffice-ui/src/hooks/backend.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/backend.ts
@@ -24,8 +24,6 @@ import {
   TalerMerchantApi
 } from "@gnu-taler/taler-util";
 import {
-  EmptyObject,
-  HttpError,
   HttpResponse,
   HttpResponseOk,
   RequestError,
@@ -186,7 +184,7 @@ type YesOrNo = "yes" | "no";
 export function useBackendBaseRequest(): useBackendBaseRequestType {
   const { request: requestHandler } = useApiContext();
   const { state } = useSessionContext();
-  const token = state.status === "loggedIn" ? state.token : undefined;
+  const token = state.token;
   const baseUrl = state.backendUrl;
 
   const request = useCallback(
@@ -212,7 +210,7 @@ export function useBackendInstanceRequest(): useBackendInstanceRequestType {
   const { request: requestHandler } = useApiContext();
 
   const { state } = useSessionContext();
-  const token = state.status === "loggedIn" ? state.token : undefined;
+  const token = state.token;
   const baseUrl = state.backendUrl;
 
   const request = useCallback(
diff --git a/packages/merchant-backoffice-ui/src/hooks/bank.ts b/packages/merchant-backoffice-ui/src/hooks/bank.ts
index 3cf9c7846..9ad4c3069 100644
--- a/packages/merchant-backoffice-ui/src/hooks/bank.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/bank.ts
@@ -41,67 +41,67 @@ const useSWR = _useSWR as unknown as SWRHook;
 //   },
 // }
 
-export function useBankAccountAPI(): BankAccountAPI {
-  const mutateAll = useMatchMutate();
-  const { request } = useBackendInstanceRequest();
-
-  const createBankAccount = async (
-    data: TalerMerchantApi.AccountAddDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    // MOCKED_ACCOUNTS[data.h_wire] = data
-    // return Promise.resolve({ ok: true, data: undefined });
-    const res = await request<void>(`/private/accounts`, {
-      method: "POST",
-      data,
-    });
-    await mutateAll(/.*private\/accounts.*/);
-    return res;
-  };
-
-  const updateBankAccount = async (
-    h_wire: string,
-    data: TalerMerchantApi.AccountPatchDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    // MOCKED_ACCOUNTS[h_wire].credit_facade_credentials = data.credit_facade_credentials
-    // MOCKED_ACCOUNTS[h_wire].credit_facade_url = data.credit_facade_url
-    // return Promise.resolve({ ok: true, data: undefined });
-    const res = await request<void>(`/private/accounts/${h_wire}`, {
-      method: "PATCH",
-      data,
-    });
-    await mutateAll(/.*private\/accounts.*/);
-    return res;
-  };
-
-  const deleteBankAccount = async (
-    h_wire: string,
-  ): Promise<HttpResponseOk<void>> => {
-    // delete MOCKED_ACCOUNTS[h_wire]
-    // return Promise.resolve({ ok: true, data: undefined });
-    const res = await request<void>(`/private/accounts/${h_wire}`, {
-      method: "DELETE",
-    });
-    await mutateAll(/.*private\/accounts.*/);
-    return res;
-  };
-
-  return {
-    createBankAccount,
-    updateBankAccount,
-    deleteBankAccount,
-  };
-}
+// export function useBankAccountAPI(): BankAccountAPI {
+//   const mutateAll = useMatchMutate();
+//   const { request } = useBackendInstanceRequest();
+
+//   const createBankAccount = async (
+//     data: TalerMerchantApi.AccountAddDetails,
+//   ): Promise<HttpResponseOk<void>> => {
+//     // MOCKED_ACCOUNTS[data.h_wire] = data
+//     // return Promise.resolve({ ok: true, data: undefined });
+//     const res = await request<void>(`/private/accounts`, {
+//       method: "POST",
+//       data,
+//     });
+//     await mutateAll(/.*private\/accounts.*/);
+//     return res;
+//   };
+
+//   const updateBankAccount = async (
+//     h_wire: string,
+//     data: TalerMerchantApi.AccountPatchDetails,
+//   ): Promise<HttpResponseOk<void>> => {
+//     // MOCKED_ACCOUNTS[h_wire].credit_facade_credentials = data.credit_facade_credentials
+//     // MOCKED_ACCOUNTS[h_wire].credit_facade_url = data.credit_facade_url
+//     // return Promise.resolve({ ok: true, data: undefined });
+//     const res = await request<void>(`/private/accounts/${h_wire}`, {
+//       method: "PATCH",
+//       data,
+//     });
+//     await mutateAll(/.*private\/accounts.*/);
+//     return res;
+//   };
+
+//   const deleteBankAccount = async (
+//     h_wire: string,
+//   ): Promise<HttpResponseOk<void>> => {
+//     // delete MOCKED_ACCOUNTS[h_wire]
+//     // return Promise.resolve({ ok: true, data: undefined });
+//     const res = await request<void>(`/private/accounts/${h_wire}`, {
+//       method: "DELETE",
+//     });
+//     await mutateAll(/.*private\/accounts.*/);
+//     return res;
+//   };
+
+//   return {
+//     createBankAccount,
+//     updateBankAccount,
+//     deleteBankAccount,
+//   };
+// }
 
-export interface BankAccountAPI {
-  createBankAccount: (
-    data: TalerMerchantApi.AccountAddDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  updateBankAccount: (
-    id: string,
-    data: TalerMerchantApi.AccountPatchDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  deleteBankAccount: (id: string) => Promise<HttpResponseOk<void>>;
-}
+// export interface BankAccountAPI {
+//   createBankAccount: (
+//     data: TalerMerchantApi.AccountAddDetails,
+//   ) => Promise<HttpResponseOk<void>>;
+//   updateBankAccount: (
+//     id: string,
+//     data: TalerMerchantApi.AccountPatchDetails,
+//   ) => Promise<HttpResponseOk<void>>;
+//   deleteBankAccount: (id: string) => Promise<HttpResponseOk<void>>;
+// }
 
 export interface InstanceBankAccountFilter {
 }
diff --git a/packages/merchant-backoffice-ui/src/hooks/merchant.ts b/packages/merchant-backoffice-ui/src/hooks/merchant.ts
deleted file mode 100644
index 47d9e5624..000000000
--- a/packages/merchant-backoffice-ui/src/hooks/merchant.ts
+++ /dev/null
@@ -1,211 +0,0 @@
-/*
- This file is part of GNU Taler
- (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
- 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/>
- */
-import {
-  HttpResponse,
-  HttpResponseOk,
-  HttpResponsePaginated,
-  RequestError,
-} from "@gnu-taler/web-util/browser";
-import { useEffect, useState } from "preact/hooks";
-import { MAX_RESULT_SIZE, PAGE_SIZE } from "../utils/constants.js";
-import { useBackendInstanceRequest, useMatchMutate } from "./backend.js";
-
-// FIX default import https://github.com/microsoft/TypeScript/issues/49189
-import { TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
-import _useSWR, { SWRHook, mutate } from "swr";
-const useSWR = _useSWR as unknown as SWRHook;
-
-// const MOCKED_ACCOUNTS: Record<string, TalerMerchantApi.AccountAddDetails> = {
-//   "hwire1": {
-//     h_wire: "hwire1",
-//     payto_uri: "payto://fake/iban/123",
-//     salt: "qwe",
-//   },
-//   "hwire2": {
-//     h_wire: "hwire2",
-//     payto_uri: "payto://fake/iban/123",
-//     salt: "qwe2",
-//   },
-// }
-
-export function useBankAccountAPI(): BankAccountAPI {
-  const mutateAll = useMatchMutate();
-  const { request } = useBackendInstanceRequest();
-
-  const createBankAccount = async (
-    data: TalerMerchantApi.AccountAddDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    // MOCKED_ACCOUNTS[data.h_wire] = data
-    // return Promise.resolve({ ok: true, data: undefined });
-    const res = await request<void>(`/private/accounts`, {
-      method: "POST",
-      data,
-    });
-    await mutateAll(/.*private\/accounts.*/);
-    return res;
-  };
-
-  const updateBankAccount = async (
-    h_wire: string,
-    data: TalerMerchantApi.AccountPatchDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    // MOCKED_ACCOUNTS[h_wire].credit_facade_credentials = data.credit_facade_credentials
-    // MOCKED_ACCOUNTS[h_wire].credit_facade_url = data.credit_facade_url
-    // return Promise.resolve({ ok: true, data: undefined });
-    const res = await request<void>(`/private/accounts/${h_wire}`, {
-      method: "PATCH",
-      data,
-    });
-    await mutateAll(/.*private\/accounts.*/);
-    return res;
-  };
-
-  const deleteBankAccount = async (
-    h_wire: string,
-  ): Promise<HttpResponseOk<void>> => {
-    // delete MOCKED_ACCOUNTS[h_wire]
-    // return Promise.resolve({ ok: true, data: undefined });
-    const res = await request<void>(`/private/accounts/${h_wire}`, {
-      method: "DELETE",
-    });
-    await mutateAll(/.*private\/accounts.*/);
-    return res;
-  };
-
-  return {
-    createBankAccount,
-    updateBankAccount,
-    deleteBankAccount,
-  };
-}
-
-export interface BankAccountAPI {
-  createBankAccount: (
-    data: TalerMerchantApi.AccountAddDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  updateBankAccount: (
-    id: string,
-    data: TalerMerchantApi.AccountPatchDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  deleteBankAccount: (id: string) => Promise<HttpResponseOk<void>>;
-}
-
-export interface InstanceBankAccountFilter {
-}
-
-export function revalidateInstanceBankAccounts() {
-  // mutate(key => key instanceof)
-  return mutate((key) => Array.isArray(key) && key[key.length - 1] === "/private/accounts", undefined, { revalidate: true });
-}
-export function useInstanceBankAccounts(
-  args?: InstanceBankAccountFilter,
-  updatePosition?: (id: string) => void,
-): HttpResponsePaginated<
-  TalerMerchantApi.AccountsSummaryResponse,
-  TalerErrorDetail
-> {
-
-  const { fetcher } = useBackendInstanceRequest();
-
-  const [pageAfter, setPageAfter] = useState(1);
-
-  const totalAfter = pageAfter * PAGE_SIZE;
-  const {
-    data: afterData,
-    error: afterError,
-    isValidating: loadingAfter,
-  } = useSWR<
-    HttpResponseOk<TalerMerchantApi.AccountsSummaryResponse>,
-    RequestError<TalerErrorDetail>
-  >([`/private/accounts`], fetcher);
-
-  const [lastAfter, setLastAfter] = useState<
-    HttpResponse<
-      TalerMerchantApi.AccountsSummaryResponse,
-      TalerErrorDetail
-    >
-  >({ loading: true });
-  useEffect(() => {
-    if (afterData) setLastAfter(afterData);
-  }, [afterData /*, beforeData*/]);
-
-  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.accounts.length < totalAfter;
-  const isReachingStart = false;
-
-  const pagination = {
-    isReachingEnd,
-    isReachingStart,
-    loadMore: () => {
-      if (!afterData || isReachingEnd) return;
-      if (afterData.data.accounts.length < MAX_RESULT_SIZE) {
-        setPageAfter(pageAfter + 1);
-      } else {
-        const from = `${afterData.data.accounts[afterData.data.accounts.length - 1]
-          .h_wire
-          }`;
-        if (from && updatePosition) updatePosition(from);
-      }
-    },
-    loadMorePrev: () => {
-    },
-  };
-
-  const accounts = !afterData ? [] : (afterData || lastAfter).data.accounts;
-  if (loadingAfter /* || loadingBefore */)
-    return { loading: true, data: { accounts } };
-  if (/*beforeData &&*/ afterData) {
-    return { ok: true, data: { accounts }, ...pagination };
-  }
-  return { loading: true };
-}
-
-export function useBankAccountDetails(
-  h_wire: string,
-): HttpResponse<
-  TalerMerchantApi.BankAccountEntry,
-  TalerErrorDetail
-> {
-  // return {
-  //   ok: true,
-  //   data: {
-  //     ...MOCKED_ACCOUNTS[h_wire],
-  //     active: true,
-  //   }
-  // }
-  const { fetcher } = useBackendInstanceRequest();
-
-  const { data, error, isValidating } = useSWR<
-    HttpResponseOk<TalerMerchantApi.BankAccountEntry>,
-    RequestError<TalerErrorDetail>
-  >([`/private/accounts/${h_wire}`], fetcher, {
-    refreshInterval: 0,
-    refreshWhenHidden: false,
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-    refreshWhenOffline: false,
-  });
-
-  if (isValidating) return { loading: true, data: data?.data };
-  if (data) {
-    return data;
-  }
-  if (error) return error.cause;
-  return { loading: true };
-}
diff --git a/packages/merchant-backoffice-ui/src/hooks/order.test.ts b/packages/merchant-backoffice-ui/src/hooks/order.test.ts
index 0d4199875..3d4f2809f 100644
--- a/packages/merchant-backoffice-ui/src/hooks/order.test.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/order.test.ts
@@ -22,7 +22,7 @@
 import { AmountString, TalerMerchantApi } from "@gnu-taler/taler-util";
 import * as tests from "@gnu-taler/web-util/testing";
 import { expect } from "chai";
-import { useInstanceOrders, useOrderAPI, useOrderDetails } from "./order.js";
+import { useInstanceOrders, useOrderDetails } from "./order.js";
 import { ApiMockEnvironment } from "./testing.js";
 import {
   API_CREATE_ORDER,
@@ -32,6 +32,7 @@ import {
   API_LIST_ORDERS,
   API_REFUND_ORDER_BY_ID,
 } from "./urls.js";
+import { useMerchantApiContext } from "@gnu-taler/web-util/browser";
 
 describe("order api interaction with listing", () => {
   it("should evict cache when creating an order", async () => {
@@ -51,7 +52,7 @@ describe("order api interaction with listing", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useInstanceOrders({ paid: "yes" }, newDate);
-        const api = useOrderAPI();
+        const { lib: api } = useMerchantApiContext()
         return { query, api };
       },
       {},
@@ -85,9 +86,9 @@ describe("order api interaction with listing", () => {
             },
           });
 
-          api.createOrder({
-            order: { amount: "ARS:12", summary: "pay me" },
-          } as any);
+          api.management.createOrder(undefined, {
+            order: { amount: "ARS:12" as AmountString, summary: "pay me" },
+          })
         },
         ({ query, api }) => {
           expect(env.assertJustExpectedRequestWereMade()).deep.eq({
@@ -129,7 +130,7 @@ describe("order api interaction with listing", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useInstanceOrders({ paid: "yes" }, newDate);
-        const api = useOrderAPI();
+        const { lib: api } = useMerchantApiContext()
         return { query, api };
       },
       {},
@@ -170,10 +171,10 @@ describe("order api interaction with listing", () => {
             },
           });
 
-          api.refundOrder("1", {
+          api.management.addRefund(undefined, "1", {
             reason: "double pay",
             refund: "EUR:1" as AmountString,
-          });
+          })
         },
         ({ query, api }) => {
           expect(env.assertJustExpectedRequestWereMade()).deep.eq({
@@ -218,7 +219,7 @@ describe("order api interaction with listing", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useInstanceOrders({ paid: "yes" }, newDate);
-        const api = useOrderAPI();
+        const { lib: api } = useMerchantApiContext()
         return { query, api };
       },
       {},
@@ -246,7 +247,7 @@ describe("order api interaction with listing", () => {
             },
           });
 
-          api.deleteOrder("1");
+          api.management.deleteOrder(undefined, "1")
         },
         ({ query, api }) => {
           expect(env.assertJustExpectedRequestWereMade()).deep.eq({
@@ -286,7 +287,7 @@ describe("order api interaction with details", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useOrderDetails("1");
-        const api = useOrderAPI();
+        const { lib: api } = useMerchantApiContext()
         return { query, api };
       },
       {},
@@ -319,10 +320,10 @@ describe("order api interaction with details", () => {
             } as unknown as TalerMerchantApi.CheckPaymentPaidResponse,
           });
 
-          api.refundOrder("1", {
+          api.management.addRefund(undefined, "1", {
             reason: "double pay",
             refund: "EUR:1" as AmountString,
-          });
+          })
         },
         ({ query, api }) => {
           expect(env.assertJustExpectedRequestWereMade()).deep.eq({
@@ -362,7 +363,7 @@ describe("order api interaction with details", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useOrderDetails("1");
-        const api = useOrderAPI();
+        const { lib: api } = useMerchantApiContext()
         return { query, api };
       },
       {},
@@ -393,9 +394,9 @@ describe("order api interaction with details", () => {
             } as unknown as TalerMerchantApi.CheckPaymentPaidResponse,
           });
 
-          api.forgetOrder("1", {
+          api.management.forgetOrder(undefined, "1", {
             fields: ["$.summary"],
-          });
+          })
         },
         ({ query, api }) => {
           expect(env.assertJustExpectedRequestWereMade()).deep.eq({
@@ -441,7 +442,7 @@ describe("order listing pagination", () => {
       () => {
         const date = new Date(12000);
         const query = useInstanceOrders({ wired: "yes", date }, newDate);
-        const api = useOrderAPI();
+        const { lib: api } = useMerchantApiContext()
         return { query, api };
       },
       {},
@@ -507,7 +508,7 @@ describe("order listing pagination", () => {
       () => {
         const date = new Date(12000);
         const query = useInstanceOrders({ wired: "yes", date }, newDate);
-        const api = useOrderAPI();
+        const { lib: api } = useMerchantApiContext()
         return { query, api };
       },
       {},
diff --git a/packages/merchant-backoffice-ui/src/hooks/order.ts b/packages/merchant-backoffice-ui/src/hooks/order.ts
index 39bc1725b..94e66795b 100644
--- a/packages/merchant-backoffice-ui/src/hooks/order.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/order.ts
@@ -28,106 +28,106 @@ import { TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
 import _useSWR, { SWRHook } from "swr";
 const useSWR = _useSWR as unknown as SWRHook;
 
-export interface OrderAPI {
-  //FIXME: add OutOfStockResponse on 410
-  createOrder: (
-    data: TalerMerchantApi.PostOrderRequest,
-  ) => Promise<HttpResponseOk<TalerMerchantApi.PostOrderResponse>>;
-  forgetOrder: (
-    id: string,
-    data: TalerMerchantApi.ForgetRequest,
-  ) => Promise<HttpResponseOk<void>>;
-  refundOrder: (
-    id: string,
-    data: TalerMerchantApi.RefundRequest,
-  ) => Promise<HttpResponseOk<TalerMerchantApi.MerchantRefundResponse>>;
-  deleteOrder: (id: string) => Promise<HttpResponseOk<void>>;
-  getPaymentURL: (id: string) => Promise<HttpResponseOk<string>>;
-}
+// export interface OrderAPI {
+//   //FIXME: add OutOfStockResponse on 410
+//   createOrder: (
+//     data: TalerMerchantApi.PostOrderRequest,
+//   ) => Promise<HttpResponseOk<TalerMerchantApi.PostOrderResponse>>;
+//   forgetOrder: (
+//     id: string,
+//     data: TalerMerchantApi.ForgetRequest,
+//   ) => Promise<HttpResponseOk<void>>;
+//   refundOrder: (
+//     id: string,
+//     data: TalerMerchantApi.RefundRequest,
+//   ) => Promise<HttpResponseOk<TalerMerchantApi.MerchantRefundResponse>>;
+//   deleteOrder: (id: string) => Promise<HttpResponseOk<void>>;
+//   getPaymentURL: (id: string) => Promise<HttpResponseOk<string>>;
+// }
 
 type YesOrNo = "yes" | "no";
 
-export function useOrderAPI(): OrderAPI {
-  const mutateAll = useMatchMutate();
-  const { request } = useBackendInstanceRequest();
+// export function useOrderAPI(): OrderAPI {
+//   const mutateAll = useMatchMutate();
+//   const { request } = useBackendInstanceRequest();
 
-  const createOrder = async (
-    data: TalerMerchantApi.PostOrderRequest,
-  ): Promise<HttpResponseOk<TalerMerchantApi.PostOrderResponse>> => {
-    const res = await request<TalerMerchantApi.PostOrderResponse>(
-      `/private/orders`,
-      {
-        method: "POST",
-        data,
-      },
-    );
-    await mutateAll(/.*private\/orders.*/);
-    // mutate('')
-    return res;
-  };
-  const refundOrder = async (
-    orderId: string,
-    data: TalerMerchantApi.RefundRequest,
-  ): Promise<HttpResponseOk<TalerMerchantApi.MerchantRefundResponse>> => {
-    mutateAll(/@"\/private\/orders"@/);
-    const res = request<TalerMerchantApi.MerchantRefundResponse>(
-      `/private/orders/${orderId}/refund`,
-      {
-        method: "POST",
-        data,
-      },
-    );
+//   const createOrder = async (
+//     data: TalerMerchantApi.PostOrderRequest,
+//   ): Promise<HttpResponseOk<TalerMerchantApi.PostOrderResponse>> => {
+//     const res = await request<TalerMerchantApi.PostOrderResponse>(
+//       `/private/orders`,
+//       {
+//         method: "POST",
+//         data,
+//       },
+//     );
+//     await mutateAll(/.*private\/orders.*/);
+//     // mutate('')
+//     return res;
+//   };
+//   const refundOrder = async (
+//     orderId: string,
+//     data: TalerMerchantApi.RefundRequest,
+//   ): Promise<HttpResponseOk<TalerMerchantApi.MerchantRefundResponse>> => {
+//     mutateAll(/@"\/private\/orders"@/);
+//     const res = request<TalerMerchantApi.MerchantRefundResponse>(
+//       `/private/orders/${orderId}/refund`,
+//       {
+//         method: "POST",
+//         data,
+//       },
+//     );
 
-    // order list returns refundable information, so we must evict everything
-    await mutateAll(/.*private\/orders.*/);
-    return res;
-  };
+//     // order list returns refundable information, so we must evict everything
+//     await mutateAll(/.*private\/orders.*/);
+//     return res;
+//   };
 
-  const forgetOrder = async (
-    orderId: string,
-    data: TalerMerchantApi.ForgetRequest,
-  ): Promise<HttpResponseOk<void>> => {
-    mutateAll(/@"\/private\/orders"@/);
-    const res = request<void>(`/private/orders/${orderId}/forget`, {
-      method: "PATCH",
-      data,
-    });
-    // we may be forgetting some fields that are pare of the listing, so we must evict everything
-    await mutateAll(/.*private\/orders.*/);
-    return res;
-  };
-  const deleteOrder = async (
-    orderId: string,
-  ): Promise<HttpResponseOk<void>> => {
-    mutateAll(/@"\/private\/orders"@/);
-    const res = request<void>(`/private/orders/${orderId}`, {
-      method: "DELETE",
-    });
-    await mutateAll(/.*private\/orders.*/);
-    return res;
-  };
+//   const forgetOrder = async (
+//     orderId: string,
+//     data: TalerMerchantApi.ForgetRequest,
+//   ): Promise<HttpResponseOk<void>> => {
+//     mutateAll(/@"\/private\/orders"@/);
+//     const res = request<void>(`/private/orders/${orderId}/forget`, {
+//       method: "PATCH",
+//       data,
+//     });
+//     // we may be forgetting some fields that are pare of the listing, so we must evict everything
+//     await mutateAll(/.*private\/orders.*/);
+//     return res;
+//   };
+//   const deleteOrder = async (
+//     orderId: string,
+//   ): Promise<HttpResponseOk<void>> => {
+//     mutateAll(/@"\/private\/orders"@/);
+//     const res = request<void>(`/private/orders/${orderId}`, {
+//       method: "DELETE",
+//     });
+//     await mutateAll(/.*private\/orders.*/);
+//     return res;
+//   };
 
-  const getPaymentURL = async (
-    orderId: string,
-  ): Promise<HttpResponseOk<string>> => {
-    return request<TalerMerchantApi.MerchantOrderStatusResponse>(
-      `/private/orders/${orderId}`,
-      {
-        method: "GET",
-      },
-    ).then((res) => {
-      const url =
-        res.data.order_status === "unpaid"
-          ? res.data.taler_pay_uri
-          : res.data.contract_terms.fulfillment_url;
-      const response: HttpResponseOk<string> = res as any;
-      response.data = url || "";
-      return response;
-    });
-  };
+//   const getPaymentURL = async (
+//     orderId: string,
+//   ): Promise<HttpResponseOk<string>> => {
+//     return request<TalerMerchantApi.MerchantOrderStatusResponse>(
+//       `/private/orders/${orderId}`,
+//       {
+//         method: "GET",
+//       },
+//     ).then((res) => {
+//       const url =
+//         res.data.order_status === "unpaid"
+//           ? res.data.taler_pay_uri
+//           : res.data.contract_terms.fulfillment_url;
+//       const response: HttpResponseOk<string> = res as any;
+//       response.data = url || "";
+//       return response;
+//     });
+//   };
 
-  return { createOrder, forgetOrder, deleteOrder, refundOrder, getPaymentURL };
-}
+//   return { createOrder, forgetOrder, deleteOrder, refundOrder, getPaymentURL };
+// }
 
 export function useOrderDetails(
   oderId: string,
@@ -278,9 +278,9 @@ export function useInstanceOrders(
     !beforeData || !afterData
       ? []
       : (beforeData || lastBefore).data.orders
-          .slice()
-          .reverse()
-          .concat((afterData || lastAfter).data.orders);
+        .slice()
+        .reverse()
+        .concat((afterData || lastAfter).data.orders);
   if (loadingAfter || loadingBefore) return { loading: true, data: { orders } };
   if (beforeData && afterData) {
     return { ok: true, data: { orders }, ...pagination };
diff --git a/packages/merchant-backoffice-ui/src/hooks/otp.ts b/packages/merchant-backoffice-ui/src/hooks/otp.ts
index 4b45dcf06..36db2ea90 100644
--- a/packages/merchant-backoffice-ui/src/hooks/otp.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/otp.ts
@@ -28,69 +28,69 @@ import { TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
 import _useSWR, { SWRHook } from "swr";
 const useSWR = _useSWR as unknown as SWRHook;
 
-export function useOtpDeviceAPI(): OtpDeviceAPI {
-  const mutateAll = useMatchMutate();
-  const { request } = useBackendInstanceRequest();
-
-  const createOtpDevice = async (
-    data: TalerMerchantApi.OtpDeviceAddDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    // MOCKED_DEVICES[data.otp_device_id] = data
-    // return Promise.resolve({ ok: true, data: undefined });
-    const res = await request<void>(`/private/otp-devices`, {
-      method: "POST",
-      data,
-    });
-    await mutateAll(/.*private\/otp-devices.*/);
-    return res;
-  };
-
-  const updateOtpDevice = async (
-    deviceId: string,
-    data: TalerMerchantApi.OtpDevicePatchDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    // MOCKED_DEVICES[deviceId].otp_algorithm = data.otp_algorithm
-    // MOCKED_DEVICES[deviceId].otp_ctr = data.otp_ctr
-    // MOCKED_DEVICES[deviceId].otp_device_description = data.otp_device_description
-    // MOCKED_DEVICES[deviceId].otp_key = data.otp_key
-    // return Promise.resolve({ ok: true, data: undefined });
-    const res = await request<void>(`/private/otp-devices/${deviceId}`, {
-      method: "PATCH",
-      data,
-    });
-    await mutateAll(/.*private\/otp-devices.*/);
-    return res;
-  };
-
-  const deleteOtpDevice = async (
-    deviceId: string,
-  ): Promise<HttpResponseOk<void>> => {
-    // delete MOCKED_DEVICES[deviceId]
-    // return Promise.resolve({ ok: true, data: undefined });
-    const res = await request<void>(`/private/otp-devices/${deviceId}`, {
-      method: "DELETE",
-    });
-    await mutateAll(/.*private\/otp-devices.*/);
-    return res;
-  };
-
-  return {
-    createOtpDevice,
-    updateOtpDevice,
-    deleteOtpDevice,
-  };
-}
-
-export interface OtpDeviceAPI {
-  createOtpDevice: (
-    data: TalerMerchantApi.OtpDeviceAddDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  updateOtpDevice: (
-    id: string,
-    data: TalerMerchantApi.OtpDevicePatchDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  deleteOtpDevice: (id: string) => Promise<HttpResponseOk<void>>;
-}
+// export function useOtpDeviceAPI(): OtpDeviceAPI {
+//   const mutateAll = useMatchMutate();
+//   const { request } = useBackendInstanceRequest();
+
+//   const createOtpDevice = async (
+//     data: TalerMerchantApi.OtpDeviceAddDetails,
+//   ): Promise<HttpResponseOk<void>> => {
+//     // MOCKED_DEVICES[data.otp_device_id] = data
+//     // return Promise.resolve({ ok: true, data: undefined });
+//     const res = await request<void>(`/private/otp-devices`, {
+//       method: "POST",
+//       data,
+//     });
+//     await mutateAll(/.*private\/otp-devices.*/);
+//     return res;
+//   };
+
+//   const updateOtpDevice = async (
+//     deviceId: string,
+//     data: TalerMerchantApi.OtpDevicePatchDetails,
+//   ): Promise<HttpResponseOk<void>> => {
+//     // MOCKED_DEVICES[deviceId].otp_algorithm = data.otp_algorithm
+//     // MOCKED_DEVICES[deviceId].otp_ctr = data.otp_ctr
+//     // MOCKED_DEVICES[deviceId].otp_device_description = data.otp_device_description
+//     // MOCKED_DEVICES[deviceId].otp_key = data.otp_key
+//     // return Promise.resolve({ ok: true, data: undefined });
+//     const res = await request<void>(`/private/otp-devices/${deviceId}`, {
+//       method: "PATCH",
+//       data,
+//     });
+//     await mutateAll(/.*private\/otp-devices.*/);
+//     return res;
+//   };
+
+//   const deleteOtpDevice = async (
+//     deviceId: string,
+//   ): Promise<HttpResponseOk<void>> => {
+//     // delete MOCKED_DEVICES[deviceId]
+//     // return Promise.resolve({ ok: true, data: undefined });
+//     const res = await request<void>(`/private/otp-devices/${deviceId}`, {
+//       method: "DELETE",
+//     });
+//     await mutateAll(/.*private\/otp-devices.*/);
+//     return res;
+//   };
+
+//   return {
+//     createOtpDevice,
+//     updateOtpDevice,
+//     deleteOtpDevice,
+//   };
+// }
+
+// export interface OtpDeviceAPI {
+//   createOtpDevice: (
+//     data: TalerMerchantApi.OtpDeviceAddDetails,
+//   ) => Promise<HttpResponseOk<void>>;
+//   updateOtpDevice: (
+//     id: string,
+//     data: TalerMerchantApi.OtpDevicePatchDetails,
+//   ) => Promise<HttpResponseOk<void>>;
+//   deleteOtpDevice: (id: string) => Promise<HttpResponseOk<void>>;
+// }
 
 export interface InstanceOtpDeviceFilter {
 }
diff --git a/packages/merchant-backoffice-ui/src/hooks/product.test.ts b/packages/merchant-backoffice-ui/src/hooks/product.test.ts
index 64dbd0103..c819c739e 100644
--- a/packages/merchant-backoffice-ui/src/hooks/product.test.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/product.test.ts
@@ -23,7 +23,6 @@ import * as tests from "@gnu-taler/web-util/testing";
 import { expect } from "chai";
 import {
   useInstanceProducts,
-  useProductAPI,
   useProductDetails,
 } from "./product.js";
 import { ApiMockEnvironment } from "./testing.js";
@@ -35,6 +34,7 @@ import {
   API_UPDATE_PRODUCT_BY_ID,
 } from "./urls.js";
 import { TalerMerchantApi } from "@gnu-taler/taler-util";
+import { useMerchantApiContext } from "@gnu-taler/web-util/browser";
 
 describe("product api interaction with listing", () => {
   it("should evict cache when creating a product", async () => {
@@ -52,7 +52,7 @@ describe("product api interaction with listing", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useInstanceProducts();
-        const api = useProductAPI();
+        const { lib: api } = useMerchantApiContext();
         return { query, api };
       },
       {},
@@ -70,7 +70,7 @@ describe("product api interaction with listing", () => {
           expect(query.loading).undefined;
           expect(query.ok).true;
           if (!query.ok) return;
-          expect(query.data).deep.equals([{ id: "1234" , price: "ARS:12" }]);
+          expect(query.data).deep.equals([{ id: "1234", price: "ARS:12" }]);
 
           env.addRequestExpectation(API_CREATE_PRODUCT, {
             request: {
@@ -99,7 +99,7 @@ describe("product api interaction with listing", () => {
             } as TalerMerchantApi.ProductDetail,
           });
 
-          api.createProduct({
+          api.management.addProduct(undefined, {
             price: "ARS:23",
           } as any);
         },
@@ -150,7 +150,7 @@ describe("product api interaction with listing", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useInstanceProducts();
-        const api = useProductAPI();
+        const { lib: api } = useMerchantApiContext();
         return { query, api };
       },
       {},
@@ -187,7 +187,7 @@ describe("product api interaction with listing", () => {
             } as TalerMerchantApi.ProductDetail,
           });
 
-          api.updateProduct("1234", {
+          api.management.updateProduct(undefined, "1234", {
             price: "ARS:13",
           } as any);
         },
@@ -218,7 +218,7 @@ describe("product api interaction with listing", () => {
 
     env.addRequestExpectation(API_LIST_PRODUCTS, {
       response: {
-        products: [{ product_id: "1234" , product_serial: 1}, { product_id: "2345", product_serial: 2 }],
+        products: [{ product_id: "1234", product_serial: 1 }, { product_id: "2345", product_serial: 2 }],
       },
     });
     env.addRequestExpectation(API_GET_PRODUCT_BY_ID("1234"), {
@@ -231,7 +231,7 @@ describe("product api interaction with listing", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useInstanceProducts();
-        const api = useProductAPI();
+        const { lib: api } = useMerchantApiContext();
         return { query, api };
       },
       {},
@@ -267,7 +267,7 @@ describe("product api interaction with listing", () => {
               price: "ARS:12",
             } as TalerMerchantApi.ProductDetail,
           });
-          api.deleteProduct("2345");
+          api.management.deleteProduct(undefined, "2345");
         },
         ({ query, api }) => {
           expect(env.assertJustExpectedRequestWereMade()).deep.eq({
@@ -306,7 +306,7 @@ describe("product api interaction with details", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useProductDetails("12");
-        const api = useProductAPI();
+        const { lib: api } = useMerchantApiContext();
         return { query, api };
       },
       {},
@@ -337,7 +337,7 @@ describe("product api interaction with details", () => {
             } as TalerMerchantApi.ProductDetail,
           });
 
-          api.updateProduct("12", {
+          api.management.updateProduct(undefined, "12", {
             description: "other description",
           } as any);
         },
diff --git a/packages/merchant-backoffice-ui/src/hooks/product.ts b/packages/merchant-backoffice-ui/src/hooks/product.ts
index c0ace0d32..0eb54f717 100644
--- a/packages/merchant-backoffice-ui/src/hooks/product.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/product.ts
@@ -25,84 +25,84 @@ import _useSWR, { SWRHook, useSWRConfig } from "swr";
 import { TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
 const useSWR = _useSWR as unknown as SWRHook;
 
-export interface ProductAPI {
-  getProduct: (
-    id: string,  
-  ) => Promise<void>;
-  createProduct: (
-    data: TalerMerchantApi.ProductAddDetail,
-  ) => Promise<void>;
-  updateProduct: (
-    id: string,
-    data: TalerMerchantApi.ProductPatchDetail,
-  ) => Promise<void>;
-  deleteProduct: (id: string) => Promise<void>;
-  lockProduct: (
-    id: string,
-    data: TalerMerchantApi.LockRequest,
-  ) => Promise<void>;
-}
-
-export function useProductAPI(): ProductAPI {
-  const mutateAll = useMatchMutate();
-  const { mutate } = useSWRConfig();
-
-  const { request } = useBackendInstanceRequest();
-
-  const createProduct = async (
-    data: TalerMerchantApi.ProductAddDetail,
-  ): Promise<void> => {
-    const res = await request(`/private/products`, {
-      method: "POST",
-      data,
-    });
-
-    return await mutateAll(/.*\/private\/products.*/);
-  };
-
-  const updateProduct = async (
-    productId: string,
-    data: TalerMerchantApi.ProductPatchDetail,
-  ): Promise<void> => {
-    const r = await request(`/private/products/${productId}`, {
-      method: "PATCH",
-      data,
-    });
-
-    return await mutateAll(/.*\/private\/products.*/);
-  };
-
-  const deleteProduct = async (productId: string): Promise<void> => {
-    await request(`/private/products/${productId}`, {
-      method: "DELETE",
-    });
-    await mutate([`/private/products`]);
-  };
-
-  const lockProduct = async (
-    productId: string,
-    data: TalerMerchantApi.LockRequest,
-  ): Promise<void> => {
-    await request(`/private/products/${productId}/lock`, {
-      method: "POST",
-      data,
-    });
-
-    return await mutateAll(/.*"\/private\/products.*/);
-  };
-
-  const getProduct = async (
-    productId: string,
-  ): Promise<void> => {
-    await request(`/private/products/${productId}`, {
-      method: "GET",
-    });
-
-    return
-  };
-
-  return { createProduct, updateProduct, deleteProduct, lockProduct, getProduct };
-}
+// export interface ProductAPI {
+//   getProduct: (
+//     id: string,  
+//   ) => Promise<void>;
+//   createProduct: (
+//     data: TalerMerchantApi.ProductAddDetail,
+//   ) => Promise<void>;
+//   updateProduct: (
+//     id: string,
+//     data: TalerMerchantApi.ProductPatchDetail,
+//   ) => Promise<void>;
+//   deleteProduct: (id: string) => Promise<void>;
+//   lockProduct: (
+//     id: string,
+//     data: TalerMerchantApi.LockRequest,
+//   ) => Promise<void>;
+// }
+
+// export function useProductAPI(): ProductAPI {
+//   const mutateAll = useMatchMutate();
+//   const { mutate } = useSWRConfig();
+
+//   const { request } = useBackendInstanceRequest();
+
+//   const createProduct = async (
+//     data: TalerMerchantApi.ProductAddDetail,
+//   ): Promise<void> => {
+//     const res = await request(`/private/products`, {
+//       method: "POST",
+//       data,
+//     });
+
+//     return await mutateAll(/.*\/private\/products.*/);
+//   };
+
+//   const updateProduct = async (
+//     productId: string,
+//     data: TalerMerchantApi.ProductPatchDetail,
+//   ): Promise<void> => {
+//     const r = await request(`/private/products/${productId}`, {
+//       method: "PATCH",
+//       data,
+//     });
+
+//     return await mutateAll(/.*\/private\/products.*/);
+//   };
+
+//   const deleteProduct = async (productId: string): Promise<void> => {
+//     await request(`/private/products/${productId}`, {
+//       method: "DELETE",
+//     });
+//     await mutate([`/private/products`]);
+//   };
+
+//   const lockProduct = async (
+//     productId: string,
+//     data: TalerMerchantApi.LockRequest,
+//   ): Promise<void> => {
+//     await request(`/private/products/${productId}/lock`, {
+//       method: "POST",
+//       data,
+//     });
+
+//     return await mutateAll(/.*"\/private\/products.*/);
+//   };
+
+//   const getProduct = async (
+//     productId: string,
+//   ): Promise<void> => {
+//     await request(`/private/products/${productId}`, {
+//       method: "GET",
+//     });
+
+//     return
+//   };
+
+//   return { createProduct, updateProduct, deleteProduct, lockProduct, getProduct };
+// }
 
 export function useInstanceProducts(): HttpResponse<
   (TalerMerchantApi.ProductDetail & WithId)[],
diff --git a/packages/merchant-backoffice-ui/src/hooks/templates.ts b/packages/merchant-backoffice-ui/src/hooks/templates.ts
index 2da02e3c7..ff0461a67 100644
--- a/packages/merchant-backoffice-ui/src/hooks/templates.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/templates.ts
@@ -28,94 +28,94 @@ import { TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
 import _useSWR, { SWRHook } from "swr";
 const useSWR = _useSWR as unknown as SWRHook;
 
-export function useTemplateAPI(): TemplateAPI {
-  const mutateAll = useMatchMutate();
-  const { request } = useBackendInstanceRequest();
+// export function useTemplateAPI(): TemplateAPI {
+//   const mutateAll = useMatchMutate();
+//   const { request } = useBackendInstanceRequest();
 
-  const createTemplate = async (
-    data: TalerMerchantApi.TemplateAddDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    const res = await request<void>(`/private/templates`, {
-      method: "POST",
-      data,
-    });
-    await mutateAll(/.*private\/templates.*/);
-    return res;
-  };
+//   const createTemplate = async (
+//     data: TalerMerchantApi.TemplateAddDetails,
+//   ): Promise<HttpResponseOk<void>> => {
+//     const res = await request<void>(`/private/templates`, {
+//       method: "POST",
+//       data,
+//     });
+//     await mutateAll(/.*private\/templates.*/);
+//     return res;
+//   };
 
-  const updateTemplate = async (
-    templateId: string,
-    data: TalerMerchantApi.TemplatePatchDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    const res = await request<void>(`/private/templates/${templateId}`, {
-      method: "PATCH",
-      data,
-    });
-    await mutateAll(/.*private\/templates.*/);
-    return res;
-  };
+//   const updateTemplate = async (
+//     templateId: string,
+//     data: TalerMerchantApi.TemplatePatchDetails,
+//   ): Promise<HttpResponseOk<void>> => {
+//     const res = await request<void>(`/private/templates/${templateId}`, {
+//       method: "PATCH",
+//       data,
+//     });
+//     await mutateAll(/.*private\/templates.*/);
+//     return res;
+//   };
 
-  const deleteTemplate = async (
-    templateId: string,
-  ): Promise<HttpResponseOk<void>> => {
-    const res = await request<void>(`/private/templates/${templateId}`, {
-      method: "DELETE",
-    });
-    await mutateAll(/.*private\/templates.*/);
-    return res;
-  };
+//   const deleteTemplate = async (
+//     templateId: string,
+//   ): Promise<HttpResponseOk<void>> => {
+//     const res = await request<void>(`/private/templates/${templateId}`, {
+//       method: "DELETE",
+//     });
+//     await mutateAll(/.*private\/templates.*/);
+//     return res;
+//   };
 
-  const createOrderFromTemplate = async (
-    templateId: string,
-    data: TalerMerchantApi.UsingTemplateDetails,
-  ): Promise<
-    HttpResponseOk<TalerMerchantApi.PostOrderResponse>
-  > => {
-    const res = await request<TalerMerchantApi.PostOrderResponse>(
-      `/templates/${templateId}`,
-      {
-        method: "POST",
-        data,
-      },
-    );
-    await mutateAll(/.*private\/templates.*/);
-    return res;
-  };
+//   const createOrderFromTemplate = async (
+//     templateId: string,
+//     data: TalerMerchantApi.UsingTemplateDetails,
+//   ): Promise<
+//     HttpResponseOk<TalerMerchantApi.PostOrderResponse>
+//   > => {
+//     const res = await request<TalerMerchantApi.PostOrderResponse>(
+//       `/templates/${templateId}`,
+//       {
+//         method: "POST",
+//         data,
+//       },
+//     );
+//     await mutateAll(/.*private\/templates.*/);
+//     return res;
+//   };
 
-  const testTemplateExist = async (
-    templateId: string,
-  ): Promise<HttpResponseOk<void>> => {
-    const res = await request<void>(`/private/templates/${templateId}`, { method: "GET", });
-    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,
-  };
-}
+//   return {
+//     createTemplate,
+//     updateTemplate,
+//     deleteTemplate,
+//     testTemplateExist,
+//     createOrderFromTemplate,
+//   };
+// }
 
-export interface TemplateAPI {
-  createTemplate: (
-    data: TalerMerchantApi.TemplateAddDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  updateTemplate: (
-    id: string,
-    data: TalerMerchantApi.TemplatePatchDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  testTemplateExist: (
-    id: string
-  ) => Promise<HttpResponseOk<void>>;
-  deleteTemplate: (id: string) => Promise<HttpResponseOk<void>>;
-  createOrderFromTemplate: (
-    id: string,
-    data: TalerMerchantApi.UsingTemplateDetails,
-  ) => Promise<HttpResponseOk<TalerMerchantApi.PostOrderResponse>>;
-}
+// export interface TemplateAPI {
+//   createTemplate: (
+//     data: TalerMerchantApi.TemplateAddDetails,
+//   ) => Promise<HttpResponseOk<void>>;
+//   updateTemplate: (
+//     id: string,
+//     data: TalerMerchantApi.TemplatePatchDetails,
+//   ) => Promise<HttpResponseOk<void>>;
+//   testTemplateExist: (
+//     id: string
+//   ) => Promise<HttpResponseOk<void>>;
+//   deleteTemplate: (id: string) => Promise<HttpResponseOk<void>>;
+//   createOrderFromTemplate: (
+//     id: string,
+//     data: TalerMerchantApi.UsingTemplateDetails,
+//   ) => Promise<HttpResponseOk<TalerMerchantApi.PostOrderResponse>>;
+// }
 
 export interface InstanceTemplateFilter {
   //FIXME: add filter to the template list
diff --git a/packages/merchant-backoffice-ui/src/hooks/transfer.test.ts b/packages/merchant-backoffice-ui/src/hooks/transfer.test.ts
index ee987af7e..5f1cf51a7 100644
--- a/packages/merchant-backoffice-ui/src/hooks/transfer.test.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/transfer.test.ts
@@ -23,8 +23,9 @@ import { AmountString, PaytoString, TalerMerchantApi } from "@gnu-taler/taler-ut
 import * as tests from "@gnu-taler/web-util/testing";
 import { expect } from "chai";
 import { ApiMockEnvironment } from "./testing.js";
-import { useInstanceTransfers, useTransferAPI } from "./transfer.js";
+import { useInstanceTransfers } from "./transfer.js";
 import { API_INFORM_TRANSFERS, API_LIST_TRANSFERS } from "./urls.js";
+import { useMerchantApiContext } from "@gnu-taler/web-util/browser";
 
 describe("transfer api interaction with listing", () => {
   it("should evict cache when informing a transfer", async () => {
@@ -44,7 +45,7 @@ describe("transfer api interaction with listing", () => {
     const hookBehavior = await tests.hookBehaveLikeThis(
       () => {
         const query = useInstanceTransfers({}, moveCursor);
-        const api = useTransferAPI();
+        const { lib: api } = useMerchantApiContext();
         return { query, api };
       },
       {},
@@ -81,7 +82,7 @@ describe("transfer api interaction with listing", () => {
             },
           });
 
-          api.informTransfer({
+          api.management.informWireTransfer(undefined, {
             wtid: "3",
             credit_amount: "EUR:1" as AmountString,
             exchange_url: "exchange.url",
diff --git a/packages/merchant-backoffice-ui/src/hooks/transfer.ts b/packages/merchant-backoffice-ui/src/hooks/transfer.ts
index 20062a5e2..af62af0fa 100644
--- a/packages/merchant-backoffice-ui/src/hooks/transfer.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/transfer.ts
@@ -28,30 +28,30 @@ import { TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
 import _useSWR, { SWRHook } from "swr";
 const useSWR = _useSWR as unknown as SWRHook;
 
-export function useTransferAPI(): TransferAPI {
-  const mutateAll = useMatchMutate();
-  const { request } = useBackendInstanceRequest();
-
-  const informTransfer = async (
-    data: TalerMerchantApi.TransferInformation,
-  ): Promise<HttpResponseOk<{}>> => {
-    const res = await request<{}>(`/private/transfers`, {
-      method: "POST",
-      data,
-    });
-
-    await mutateAll(/.*private\/transfers.*/);
-    return res;
-  };
-
-  return { informTransfer };
-}
-
-export interface TransferAPI {
-  informTransfer: (
-    data: TalerMerchantApi.TransferInformation,
-  ) => Promise<HttpResponseOk<{}>>;
-}
+// export function useTransferAPI(): TransferAPI {
+//   const mutateAll = useMatchMutate();
+//   const { request } = useBackendInstanceRequest();
+
+//   const informTransfer = async (
+//     data: TalerMerchantApi.TransferInformation,
+//   ): Promise<HttpResponseOk<{}>> => {
+//     const res = await request<{}>(`/private/transfers`, {
+//       method: "POST",
+//       data,
+//     });
+
+//     await mutateAll(/.*private\/transfers.*/);
+//     return res;
+//   };
+
+//   return { informTransfer };
+// }
+
+// export interface TransferAPI {
+//   informTransfer: (
+//     data: TalerMerchantApi.TransferInformation,
+//   ) => Promise<HttpResponseOk<{}>>;
+// }
 
 export interface InstanceTransferFilter {
   payto_uri?: string;
@@ -151,10 +151,9 @@ export function useInstanceTransfers(
       if (afterData.data.transfers.length < MAX_RESULT_SIZE) {
         setPageAfter(pageAfter + 1);
       } else {
-        const from = `${
-          afterData.data.transfers[afterData.data.transfers.length - 1]
+        const from = `${afterData.data.transfers[afterData.data.transfers.length - 1]
             .transfer_serial_id
-        }`;
+          }`;
         if (from && updatePosition) updatePosition(from);
       }
     },
@@ -163,10 +162,9 @@ export function useInstanceTransfers(
       if (beforeData.data.transfers.length < MAX_RESULT_SIZE) {
         setPageBefore(pageBefore + 1);
       } else if (beforeData) {
-        const from = `${
-          beforeData.data.transfers[beforeData.data.transfers.length - 1]
+        const from = `${beforeData.data.transfers[beforeData.data.transfers.length - 1]
             .transfer_serial_id
-        }`;
+          }`;
         if (from && updatePosition) updatePosition(from);
       }
     },
@@ -176,9 +174,9 @@ export function useInstanceTransfers(
     !beforeData || !afterData
       ? []
       : (beforeData || lastBefore).data.transfers
-          .slice()
-          .reverse()
-          .concat((afterData || lastAfter).data.transfers);
+        .slice()
+        .reverse()
+        .concat((afterData || lastAfter).data.transfers);
   if (loadingAfter || loadingBefore)
     return { loading: true, data: { transfers } };
   if (beforeData && afterData) {
diff --git a/packages/merchant-backoffice-ui/src/hooks/webhooks.ts b/packages/merchant-backoffice-ui/src/hooks/webhooks.ts
index 4e62a81c9..cc817b84e 100644
--- a/packages/merchant-backoffice-ui/src/hooks/webhooks.ts
+++ b/packages/merchant-backoffice-ui/src/hooks/webhooks.ts
@@ -28,56 +28,56 @@ import { TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
 import _useSWR, { SWRHook } from "swr";
 const useSWR = _useSWR as unknown as SWRHook;
 
-export function useWebhookAPI(): WebhookAPI {
-  const mutateAll = useMatchMutate();
-  const { request } = useBackendInstanceRequest();
-
-  const createWebhook = async (
-    data: TalerMerchantApi.WebhookAddDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    const res = await request<void>(`/private/webhooks`, {
-      method: "POST",
-      data,
-    });
-    await mutateAll(/.*private\/webhooks.*/);
-    return res;
-  };
-
-  const updateWebhook = async (
-    webhookId: string,
-    data: TalerMerchantApi.WebhookPatchDetails,
-  ): Promise<HttpResponseOk<void>> => {
-    const res = await request<void>(`/private/webhooks/${webhookId}`, {
-      method: "PATCH",
-      data,
-    });
-    await mutateAll(/.*private\/webhooks.*/);
-    return res;
-  };
-
-  const deleteWebhook = async (
-    webhookId: string,
-  ): Promise<HttpResponseOk<void>> => {
-    const res = await request<void>(`/private/webhooks/${webhookId}`, {
-      method: "DELETE",
-    });
-    await mutateAll(/.*private\/webhooks.*/);
-    return res;
-  };
-
-  return { createWebhook, updateWebhook, deleteWebhook };
-}
-
-export interface WebhookAPI {
-  createWebhook: (
-    data: TalerMerchantApi.WebhookAddDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  updateWebhook: (
-    id: string,
-    data: TalerMerchantApi.WebhookPatchDetails,
-  ) => Promise<HttpResponseOk<void>>;
-  deleteWebhook: (id: string) => Promise<HttpResponseOk<void>>;
-}
+// export function useWebhookAPI(): WebhookAPI {
+//   const mutateAll = useMatchMutate();
+//   const { request } = useBackendInstanceRequest();
+
+//   const createWebhook = async (
+//     data: TalerMerchantApi.WebhookAddDetails,
+//   ): Promise<HttpResponseOk<void>> => {
+//     const res = await request<void>(`/private/webhooks`, {
+//       method: "POST",
+//       data,
+//     });
+//     await mutateAll(/.*private\/webhooks.*/);
+//     return res;
+//   };
+
+//   const updateWebhook = async (
+//     webhookId: string,
+//     data: TalerMerchantApi.WebhookPatchDetails,
+//   ): Promise<HttpResponseOk<void>> => {
+//     const res = await request<void>(`/private/webhooks/${webhookId}`, {
+//       method: "PATCH",
+//       data,
+//     });
+//     await mutateAll(/.*private\/webhooks.*/);
+//     return res;
+//   };
+
+//   const deleteWebhook = async (
+//     webhookId: string,
+//   ): Promise<HttpResponseOk<void>> => {
+//     const res = await request<void>(`/private/webhooks/${webhookId}`, {
+//       method: "DELETE",
+//     });
+//     await mutateAll(/.*private\/webhooks.*/);
+//     return res;
+//   };
+
+//   return { createWebhook, updateWebhook, deleteWebhook };
+// }
+
+// export interface WebhookAPI {
+//   createWebhook: (
+//     data: TalerMerchantApi.WebhookAddDetails,
+//   ) => Promise<HttpResponseOk<void>>;
+//   updateWebhook: (
+//     id: string,
+//     data: TalerMerchantApi.WebhookPatchDetails,
+//   ) => Promise<HttpResponseOk<void>>;
+//   deleteWebhook: (id: string) => Promise<HttpResponseOk<void>>;
+// }
 
 export interface InstanceWebhookFilter {
   //FIXME: add filter to the webhook list
@@ -133,9 +133,8 @@ 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);
       }
     },
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 b12b95f2f..35c9e6624 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
@@ -20,13 +20,13 @@
  */
 
 import { TalerMerchantApi } from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { useMerchantApiContext, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useBankAccountAPI } from "../../../../hooks/bank.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatePage } from "./CreatePage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.AccountAddDetails;
 interface Props {
@@ -35,7 +35,8 @@ interface Props {
 }
 
 export default function CreateValidator({ onConfirm, onBack }: Props): VNode {
-  const { createBankAccount } = useBankAccountAPI();
+  const { lib: api } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const { i18n } = useTranslationContext();
 
@@ -45,7 +46,7 @@ export default function CreateValidator({ onConfirm, onBack }: Props): VNode {
       <CreatePage
         onBack={onBack}
         onCreate={(request: Entity) => {
-          return createBankAccount(request)
+          return api.management.addAccount(state.token, request)
             .then(() => {
               onConfirm()
             })
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 72efa08c9..8de6c763e 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
@@ -23,15 +23,17 @@ import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/t
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useBankAccountAPI, useInstanceBankAccounts } from "../../../../hooks/bank.js";
+import { useInstanceBankAccounts } from "../../../../hooks/bank.js";
 import { Notification } from "../../../../utils/types.js";
 import { ListPage } from "./ListPage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 interface Props {
   onUnauthorized: () => VNode;
@@ -51,7 +53,8 @@ export default function ListOtpDevices({
   const [position, setPosition] = useState<string | undefined>(undefined);
   const { i18n } = useTranslationContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
-  const { deleteBankAccount } = useBankAccountAPI();
+  const { lib: api } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const result = useInstanceBankAccounts({ position }, (id) => setPosition(id));
 
   if (result.loading) return <Loading />;
@@ -89,8 +92,8 @@ export default function ListOtpDevices({
         onSelect={(e) => {
           onSelect(e.h_wire);
         }}
-        onDelete={(e: TalerMerchantApi.BankAccountEntry) =>
-          deleteBankAccount(e.h_wire)
+        onDelete={(e: TalerMerchantApi.BankAccountEntry) => {
+          return api.management.deleteAccount(state.token, e.h_wire)
             .then(() =>
               setNotif({
                 message: i18n.str`bank account delete successfully`,
@@ -105,6 +108,7 @@ export default function ListOtpDevices({
               }),
             )
         }
+        }
       />
     </Fragment>
   );
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/index.tsx
index 742d13b67..f83020ed1 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/index.tsx
@@ -23,15 +23,17 @@ import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/t
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useBankAccountAPI, useBankAccountDetails } from "../../../../hooks/bank.js";
+import { useBankAccountDetails } from "../../../../hooks/bank.js";
 import { Notification } from "../../../../utils/types.js";
 import { UpdatePage } from "./UpdatePage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.AccountPatchDetails & WithId;
 
@@ -51,7 +53,8 @@ export default function UpdateValidator({
   onNotFound,
   onLoadError,
 }: Props): VNode {
-  const { updateBankAccount } = useBankAccountAPI();
+  const { lib: api } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const result = useBankAccountDetails(bid);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
 
@@ -79,7 +82,7 @@ export default function UpdateValidator({
         account={{ ...result.data, id: bid }}
         onBack={onBack}
         onUpdate={(data) => {
-          return updateBankAccount(bid, data)
+          return api.management.updateAccount(state.token, bid, data)
             .then(onConfirm)
             .catch((error) => {
               setNotif({
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx
index 3f7b20f52..be631c1e0 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx
@@ -13,32 +13,52 @@
  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/>
  */
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { ErrorType, HttpError, Loading, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { CreatedSuccessfully } from "../../../../components/notifications/CreatedSuccessfully.js";
-import { useOrderAPI } from "../../../../hooks/order.js";
 import { Entity } from "./index.js";
+import { useOrderDetails } from "../../../../hooks/order.js";
+import { HttpStatusCode, TalerErrorDetail } from "@gnu-taler/taler-util";
 
 interface Props {
   entity: Entity;
   onConfirm: () => void;
   onCreateAnother?: () => void;
+  onUnauthorized: () => VNode;
+  onNotFound: () => VNode;
+  onLoadError: (error: HttpError<TalerErrorDetail>) => VNode;
 }
 
 export function OrderCreatedSuccessfully({
   entity,
   onConfirm,
   onCreateAnother,
+  onLoadError,
+  onNotFound,
+  onUnauthorized,
 }: Props): VNode {
-  const { getPaymentURL } = useOrderAPI();
-  const [url, setURL] = useState<string | undefined>(undefined);
+  const result = useOrderDetails(entity.response.order_id)
   const { i18n } = useTranslationContext();
-  useEffect(() => {
-    getPaymentURL(entity.response.order_id).then((response) => {
-      setURL(response.data);
-    });
-  }, [getPaymentURL, entity.response.order_id]);
+
+  if (result.loading) return <Loading />;
+  if (!result.ok) {
+    if (
+      result.type === ErrorType.CLIENT &&
+      result.status === HttpStatusCode.Unauthorized
+    )
+      return onUnauthorized();
+    if (
+      result.type === ErrorType.CLIENT &&
+      result.status === HttpStatusCode.NotFound
+    )
+      return onNotFound();
+    return onLoadError(result);
+  }
+
+  const url = result.data.order_status === "unpaid" ?
+    result.data.taler_pay_uri :
+    result.data.contract_terms.fulfillment_url
 
   return (
     <CreatedSuccessfully
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx
index 0f8618435..a7165fa41 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx
@@ -20,16 +20,16 @@
  */
 
 import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
-import { ErrorType, HttpError } from "@gnu-taler/web-util/browser";
+import { ErrorType, HttpError, useMerchantApiContext } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import { useInstanceDetails } from "../../../../hooks/instance.js";
-import { useOrderAPI } from "../../../../hooks/order.js";
 import { useInstanceProducts } from "../../../../hooks/product.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatePage } from "./CreatePage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = {
   request: TalerMerchantApi.PostOrderRequest;
@@ -49,9 +49,9 @@ export default function OrderCreate({
   onNotFound,
   onUnauthorized,
 }: Props): VNode {
-  const { createOrder } = useOrderAPI();
+  const { lib } = useMerchantApiContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
-
+  const { state } = useSessionContext();
   const detailsResult = useInstanceDetails();
   const inventoryResult = useInstanceProducts();
 
@@ -93,9 +93,16 @@ export default function OrderCreate({
       <CreatePage
         onBack={onBack}
         onCreate={(request: TalerMerchantApi.PostOrderRequest) => {
-          createOrder(request)
+          lib.management.createOrder(state.token, request)
             .then((r) => {
-              return onConfirm(r.data.order_id)
+              if (r.type === "ok") {
+                return onConfirm(r.body.order_id)
+              } else {
+                setNotif({
+                  message: "could not create order",
+                  type: "ERROR",
+                });
+              }
             })
             .catch((error) => {
               setNotif({
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx
index a7fe1801b..c0c4862a1 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx
@@ -17,15 +17,17 @@ import { HttpStatusCode, TalerErrorDetail } from "@gnu-taler/taler-util";
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useOrderAPI, useOrderDetails } from "../../../../hooks/order.js";
+import { useOrderDetails } from "../../../../hooks/order.js";
 import { Notification } from "../../../../utils/types.js";
 import { DetailPage } from "./DetailPage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export interface Props {
   oid: string;
@@ -43,9 +45,10 @@ export default function Update({
   onNotFound,
   onUnauthorized,
 }: Props): VNode {
-  const { refundOrder } = useOrderAPI();
   const result = useOrderDetails(oid);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
+  const { lib: api } = useMerchantApiContext()
+  const { state } = useSessionContext();
 
   const { i18n } = useTranslationContext();
 
@@ -71,8 +74,11 @@ export default function Update({
       <DetailPage
         onBack={onBack}
         id={oid}
-        onRefund={(id, value) =>
-          refundOrder(id, value)
+        onRefund={(id, value) => {
+          if (state.status !== "loggedIn") {
+            return;
+          }
+          api.management.addRefund(state.token, id, value)
             .then(() =>
               setNotif({
                 message: i18n.str`refund created successfully`,
@@ -87,6 +93,7 @@ export default function Update({
               }),
             )
         }
+        }
         selected={result.data}
       />
     </Fragment>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
index cd62685ca..a50f02a2d 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx
@@ -19,10 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
+import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi, stringifyPayUri } from "@gnu-taler/taler-util";
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
@@ -33,12 +34,12 @@ import { NotificationCard } from "../../../../components/menu/index.js";
 import {
   InstanceOrderFilter,
   useInstanceOrders,
-  useOrderAPI,
   useOrderDetails,
 } from "../../../../hooks/order.js";
 import { Notification } from "../../../../utils/types.js";
 import { ListPage } from "./ListPage.js";
 import { RefundModal } from "./Table.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 interface Props {
   onUnauthorized: () => VNode;
@@ -64,11 +65,12 @@ export default function OrderList({
     setFilter((prev) => ({ ...prev, date }));
 
   const result = useInstanceOrders(filter, setNewDate);
-  const { refundOrder, getPaymentURL } = useOrderAPI();
+  const { lib } = useMerchantApiContext();
 
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
 
   const { i18n } = useTranslationContext();
+  const { state } = useSessionContext()
 
   if (result.loading) return <Loading />;
   if (!result.ok) {
@@ -102,7 +104,13 @@ export default function OrderList({
       <NotificationCard notification={notif} />
 
       <JumpToElementById
-        testIfExist={getPaymentURL} 
+        testIfExist={async (order) => {
+          if (state.status !== "loggedIn") {
+            return false;
+          }
+          const resp = await lib.management.getOrder(state.token, order)
+          return resp.type === "ok"
+        }}
         onSelect={onSelect}
         description={i18n.str`jump to order with the given product ID`}
         placeholder={i18n.str`order id`}
@@ -123,9 +131,22 @@ export default function OrderList({
         isNotPaidActive={isNotPaidActive}
         isRefundedActive={isRefundedActive}
         jumpToDate={filter.date}
-        onCopyURL={(id) =>
-          getPaymentURL(id).then((resp) => copyToClipboard(resp.data))
-        }
+        onCopyURL={async (id) => {
+          if (state.status !== "loggedIn") {
+            return false;
+          }
+          const resp = await lib.management.getOrder(state.token, id)
+          if (resp.type === "ok") {
+            if (resp.body.order_status === "unpaid") {
+              copyToClipboard(resp.body.taler_pay_uri)
+            } else {
+              if (resp.body.contract_terms.fulfillment_url) {
+                copyToClipboard(resp.body.contract_terms.fulfillment_url)
+              }
+            }
+            copyToClipboard(resp.body.order_status)
+          }
+        }}
         onCreate={onCreate}
         onSelectDate={setNewDate}
         onShowAll={() => setFilter({})}
@@ -140,8 +161,8 @@ export default function OrderList({
         <RefundModalForTable
           id={orderToBeRefunded.order_id}
           onCancel={() => setOrderToBeRefunded(undefined)}
-          onConfirm={(value) =>
-            refundOrder(orderToBeRefunded.order_id, value)
+          onConfirm={(value) => {
+            lib.management.addRefund(state.token, orderToBeRefunded.order_id, value)
               .then(() =>
                 setNotif({
                   message: i18n.str`refund created successfully`,
@@ -156,7 +177,8 @@ export default function OrderList({
                 }),
               )
               .then(() => setOrderToBeRefunded(undefined))
-          }
+
+          }}
           onLoadError={(error) => {
             setNotif({
               message: i18n.str`could not create the refund`,
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx
index e4501a053..6ad1295ed 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx
@@ -20,14 +20,14 @@
  */
 
 import { TalerMerchantApi } from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { useMerchantApiContext, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useOtpDeviceAPI } from "../../../../hooks/otp.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatedSuccessfully } from "./CreatedSuccessfully.js";
 import { CreatePage } from "./CreatePage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.OtpDeviceAddDetails;
 interface Props {
@@ -36,7 +36,8 @@ interface Props {
 }
 
 export default function CreateValidator({ onConfirm, onBack }: Props): VNode {
-  const { createOtpDevice } = useOtpDeviceAPI();
+  const { lib: api } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const { i18n } = useTranslationContext();
   const [created, setCreated] = useState<TalerMerchantApi.OtpDeviceAddDetails | null>(null)
@@ -51,7 +52,7 @@ export default function CreateValidator({ onConfirm, onBack }: Props): VNode {
       <CreatePage
         onBack={onBack}
         onCreate={(request: Entity) => {
-          return createOtpDevice(request)
+          return api.management.addOtpDevice(state.token, request)
             .then((d) => {
               setCreated(request)
             })
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx
index 7fd827956..06a9f4a55 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx
@@ -23,13 +23,15 @@ import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/t
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useInstanceOtpDevices, useOtpDeviceAPI } from "../../../../hooks/otp.js";
+import { useSessionContext } from "../../../../context/session.js";
+import { useInstanceOtpDevices } from "../../../../hooks/otp.js";
 import { Notification } from "../../../../utils/types.js";
 import { ListPage } from "./ListPage.js";
 
@@ -51,7 +53,8 @@ export default function ListOtpDevices({
   const [position, setPosition] = useState<string | undefined>(undefined);
   const { i18n } = useTranslationContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
-  const { deleteOtpDevice } = useOtpDeviceAPI();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const result = useInstanceOtpDevices({ position }, (id) => setPosition(id));
 
   if (result.loading) return <Loading />;
@@ -83,8 +86,8 @@ export default function ListOtpDevices({
         onSelect={(e) => {
           onSelect(e.otp_device_id);
         }}
-        onDelete={(e: TalerMerchantApi.OtpDeviceEntry) =>
-          deleteOtpDevice(e.otp_device_id)
+        onDelete={(e: TalerMerchantApi.OtpDeviceEntry) => {
+          return lib.management.deleteOtpDevice(state.token, e.otp_device_id)
             .then(() =>
               setNotif({
                 message: i18n.str`validator delete successfully`,
@@ -98,7 +101,7 @@ export default function ListOtpDevices({
                 description: error.message,
               }),
             )
-        }
+        }}
       />
     </Fragment>
   );
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx
index a824c6936..6b9970eab 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx
@@ -23,13 +23,15 @@ import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/t
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useOtpDeviceAPI, useOtpDeviceDetails } from "../../../../hooks/otp.js";
+import { useSessionContext } from "../../../../context/session.js";
+import { useOtpDeviceDetails } from "../../../../hooks/otp.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatedSuccessfully } from "../create/CreatedSuccessfully.js";
 import { UpdatePage } from "./UpdatePage.js";
@@ -52,10 +54,11 @@ export default function UpdateValidator({
   onNotFound,
   onLoadError,
 }: Props): VNode {
-  const { updateOtpDevice } = useOtpDeviceAPI();
   const result = useOtpDeviceDetails(vid);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const [keyUpdated, setKeyUpdated] = useState<TalerMerchantApi.OtpDeviceAddDetails | null>(null)
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
 
   const { i18n } = useTranslationContext();
 
@@ -91,7 +94,7 @@ export default function UpdateValidator({
         }}
         onBack={onBack}
         onUpdate={async (newInfo) => {
-          return updateOtpDevice(vid, newInfo)
+          return lib.management.updateOtpDevice(state.token, vid, newInfo)
             .then((d) => {
               if (newInfo.otp_key) {
                 setKeyUpdated({
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx
index 9935a9625..6cb083025 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx
@@ -20,13 +20,13 @@
  */
 
 import { TalerMerchantApi } from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { useMerchantApiContext, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useProductAPI } from "../../../../hooks/product.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatePage } from "./CreatePage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.ProductAddDetail;
 interface Props {
@@ -34,7 +34,8 @@ interface Props {
   onConfirm: () => void;
 }
 export default function CreateProduct({ onConfirm, onBack }: Props): VNode {
-  const { createProduct } = useProductAPI();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const { i18n } = useTranslationContext();
 
@@ -44,7 +45,7 @@ export default function CreateProduct({ onConfirm, onBack }: Props): VNode {
       <CreatePage
         onBack={onBack}
         onCreate={(request: TalerMerchantApi.ProductAddDetail) => {
-          return createProduct(request)
+          return lib.management.addProduct(state.token, request)
             .then(() => onConfirm())
             .catch((error) => {
               setNotif({
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
index 1017a9334..dc2e08d91 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx
@@ -23,6 +23,7 @@ import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/t
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { VNode, h } from "preact";
@@ -31,9 +32,9 @@ import { Loading } from "../../../../components/exception/loading.js";
 import { JumpToElementById } from "../../../../components/form/JumpToElementById.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import { ConfirmModal } from "../../../../components/modal/index.js";
+import { useSessionContext } from "../../../../context/session.js";
 import {
-  useInstanceProducts,
-  useProductAPI,
+  useInstanceProducts
 } from "../../../../hooks/product.js";
 import { Notification } from "../../../../utils/types.js";
 import { CardTable } from "./Table.js";
@@ -53,7 +54,8 @@ export default function ProductList({
   onNotFound,
 }: Props): VNode {
   const result = useInstanceProducts();
-  const { deleteProduct, updateProduct, getProduct } = useProductAPI();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const [deleting, setDeleting] =
     useState<TalerMerchantApi.ProductDetail & WithId | null>(null);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
@@ -80,7 +82,10 @@ export default function ProductList({
       <NotificationCard notification={notif} />
 
       <JumpToElementById
-        testIfExist={getProduct} 
+        testIfExist={async (id) => {
+          const resp = await lib.management.getProduct(state.token, id);
+          return resp.type === "ok";
+        }}
         onSelect={onSelect}
         description={i18n.str`jump to product with the given product ID`}
         placeholder={i18n.str`product id`}
@@ -89,22 +94,22 @@ export default function ProductList({
       <CardTable
         instances={result.data}
         onCreate={onCreate}
-        onUpdate={(id, prod) =>
-          updateProduct(id, prod)
-            .then(() =>
-              setNotif({
-                message: i18n.str`product updated successfully`,
-                type: "SUCCESS",
-              }),
-            )
-            .catch((error) =>
-              setNotif({
-                message: i18n.str`could not update the product`,
-                type: "ERROR",
-                description: error.message,
-              }),
-            )
-        }
+        onUpdate={async (id, prod) => {
+          try {
+            await lib.management.updateProduct(state.token, id, prod);
+            setNotif({
+              message: i18n.str`product updated successfully`,
+              type: "SUCCESS",
+            });
+          } catch (error) {
+            setNotif({
+              message: i18n.str`could not update the product`,
+              type: "ERROR",
+              description: error instanceof Error ? error.message : undefined,
+            });
+          }
+          return
+        }}
         onSelect={(product) => onSelect(product.id)}
         onDelete={(prod: TalerMerchantApi.ProductDetail & WithId) =>
           setDeleting(prod)
@@ -120,7 +125,7 @@ export default function ProductList({
           onCancel={() => setDeleting(null)}
           onConfirm={async (): Promise<void> => {
             try {
-              await deleteProduct(deleting.id);
+              await lib.management.deleteProduct(state.token, deleting.id);
               setNotif({
                 message: i18n.str`Product "${deleting.description}" (ID: ${deleting.id}) has been deleted`,
                 type: "SUCCESS",
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx
index 842462c12..b9470ddac 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx
@@ -23,15 +23,17 @@ import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/t
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useProductAPI, useProductDetails } from "../../../../hooks/product.js";
+import { useProductDetails } from "../../../../hooks/product.js";
 import { Notification } from "../../../../utils/types.js";
 import { UpdatePage } from "./UpdatePage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.ProductAddDetail;
 interface Props {
@@ -50,9 +52,10 @@ export default function UpdateProduct({
   onNotFound,
   onLoadError,
 }: Props): VNode {
-  const { updateProduct } = useProductAPI();
   const result = useProductDetails(pid);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
 
   const { i18n } = useTranslationContext();
 
@@ -78,7 +81,7 @@ export default function UpdateProduct({
         product={{ ...result.data, product_id: pid }}
         onBack={onBack}
         onUpdate={(data) => {
-          return updateProduct(pid, data)
+          return lib.management.updateProduct(state.token, pid, data)
             .then(onConfirm)
             .catch((error) => {
               setNotif({
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/index.tsx
index 593850268..d23afb609 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/index.tsx
@@ -20,11 +20,11 @@
  */
 
 import { TalerMerchantApi } from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { Fragment, h, VNode } from "preact";
+import { useMerchantApiContext, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useTemplateAPI } from "../../../../hooks/templates.js";
+import { useSessionContext } from "../../../../context/session.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatePage } from "./CreatePage.js";
 
@@ -35,7 +35,8 @@ interface Props {
 }
 
 export default function CreateTransfer({ onConfirm, onBack }: Props): VNode {
-  const { createTemplate } = useTemplateAPI();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const { i18n } = useTranslationContext();
 
@@ -45,7 +46,7 @@ export default function CreateTransfer({ onConfirm, onBack }: Props): VNode {
       <CreatePage
         onBack={onBack}
         onCreate={(request: TalerMerchantApi.TemplateAddDetails) => {
-          return createTemplate(request)
+          return lib.management.addTemplate(state.token, request)
             .then(() => onConfirm())
             .catch((error) => {
               setNotif({
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx
index 40ca6ac98..adbfb93cd 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx
@@ -23,6 +23,7 @@ import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/t
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
@@ -31,9 +32,9 @@ import { Loading } from "../../../../components/exception/loading.js";
 import { JumpToElementById } from "../../../../components/form/JumpToElementById.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import { ConfirmModal } from "../../../../components/modal/index.js";
+import { useSessionContext } from "../../../../context/session.js";
 import {
-  useInstanceTemplates,
-  useTemplateAPI,
+  useInstanceTemplates
 } from "../../../../hooks/templates.js";
 import { Notification } from "../../../../utils/types.js";
 import { ListPage } from "./ListPage.js";
@@ -60,10 +61,11 @@ export default function ListTemplates({
   const [position, setPosition] = useState<string | undefined>(undefined);
   const { i18n } = useTranslationContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
-  const { deleteTemplate, testTemplateExist } = useTemplateAPI();
+  const { lib } = useMerchantApiContext();
   const result = useInstanceTemplates({ position }, (id) => setPosition(id));
   const [deleting, setDeleting] =
     useState<TalerMerchantApi.TemplateEntry | null>(null);
+  const { state } = useSessionContext();
 
   if (result.loading) return <Loading />;
   if (!result.ok) {
@@ -85,7 +87,10 @@ export default function ListTemplates({
       <NotificationCard notification={notif} />
 
       <JumpToElementById
-        testIfExist={testTemplateExist}
+        testIfExist={async (id) => {
+          const resp = await lib.management.getTemplate(state.token, id)
+          return resp.type === "ok"
+        }}
         onSelect={onSelect}
         description={i18n.str`jump to template with the given template ID`}
         placeholder={i18n.str`template id`}
@@ -122,7 +127,7 @@ export default function ListTemplates({
           onCancel={() => setDeleting(null)}
           onConfirm={async (): Promise<void> => {
             try {
-              await deleteTemplate(deleting.template_id);
+              await lib.management.deleteTemplate(state.token, deleting.template_id);
               setNotif({
                 message: i18n.str`Template "${deleting.template_description}" (ID: ${deleting.template_id}) has been deleted`,
                 type: "SUCCESS",
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/index.tsx
index ba1939914..fc436056a 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/index.tsx
@@ -23,6 +23,7 @@ import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/t
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
@@ -30,11 +31,11 @@ import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import {
-  useTemplateAPI,
   useTemplateDetails,
 } from "../../../../hooks/templates.js";
 import { Notification } from "../../../../utils/types.js";
 import { UpdatePage } from "./UpdatePage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.TemplatePatchDetails & WithId;
 
@@ -54,7 +55,8 @@ export default function UpdateTemplate({
   onNotFound,
   onLoadError,
 }: Props): VNode {
-  const { updateTemplate } = useTemplateAPI();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const result = useTemplateDetails(tid);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
 
@@ -82,7 +84,7 @@ export default function UpdateTemplate({
         template={{ ...result.data }}
         onBack={onBack}
         onUpdate={(data) => {
-          return updateTemplate(tid, data)
+          return lib.management.updateTemplate(state.token, tid, data)
             .then(onConfirm)
             .catch((error) => {
               setNotif({
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx
index 64c38c86b..dd5d4aea3 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx
@@ -23,6 +23,7 @@ import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/t
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, VNode, h } from "preact";
@@ -30,11 +31,11 @@ import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import {
-  useTemplateAPI,
-  useTemplateDetails,
+  useTemplateDetails
 } from "../../../../hooks/templates.js";
 import { Notification } from "../../../../utils/types.js";
 import { UsePage } from "./UsePage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.TransferInformation;
 interface Props {
@@ -54,7 +55,8 @@ export default function TemplateUsePage({
   onNotFound,
   onUnauthorized,
 }: Props): VNode {
-  const { createOrderFromTemplate } = useTemplateAPI();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const result = useTemplateDetails(tid);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const { i18n } = useTranslationContext();
@@ -84,8 +86,18 @@ export default function TemplateUsePage({
         onCreateOrder={(
           request: TalerMerchantApi.UsingTemplateDetails,
         ) => {
-          return createOrderFromTemplate(tid, request)
-            .then((res) => onOrderCreated(res.data.order_id))
+
+          return lib.management.useTemplateCreateOrder(tid, request)
+            .then((res) => {
+              if (res.type === "ok") {
+                onOrderCreated(res.body.order_id)
+              } else {
+                setNotif({
+                  message: i18n.str`could not create order from template`,
+                  type: "ERROR",
+                });
+              }
+            })
             .catch((error) => {
               setNotif({
                 message: i18n.str`could not create order from template`,
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx
index e640e47f6..ac1d692a4 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx
@@ -20,14 +20,14 @@
  */
 
 import { TalerMerchantApi } from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { useMerchantApiContext, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import { useInstanceBankAccounts } from "../../../../hooks/bank.js";
-import { useTransferAPI } from "../../../../hooks/transfer.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatePage } from "./CreatePage.js";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.TransferInformation;
 interface Props {
@@ -36,7 +36,8 @@ interface Props {
 }
 
 export default function CreateTransfer({ onConfirm, onBack }: Props): VNode {
-  const { informTransfer } = useTransferAPI();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const { i18n } = useTranslationContext();
   const instance = useInstanceBankAccounts();
@@ -51,7 +52,7 @@ export default function CreateTransfer({ onConfirm, onBack }: Props): VNode {
         onBack={onBack}
         accounts={accounts}
         onCreate={(request: TalerMerchantApi.TransferInformation) => {
-          return informTransfer(request)
+          return lib.management.informWireTransfer(state.token, request)
             .then(() => onConfirm())
             .catch((error) => {
               setNotif({
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/index.tsx
index 42a432cf0..50c431079 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/index.tsx
@@ -19,14 +19,14 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { useMerchantApiContext, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { NotificationCard } from "../../../../components/menu/index.js";
-import { useWebhookAPI } from "../../../../hooks/webhooks.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatePage } from "./CreatePage.js";
 import { TalerMerchantApi } from "@gnu-taler/taler-util";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.WebhookAddDetails;
 interface Props {
@@ -35,9 +35,10 @@ interface Props {
 }
 
 export default function CreateWebhook({ onConfirm, onBack }: Props): VNode {
-  const { createWebhook } = useWebhookAPI();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const { i18n } = useTranslationContext();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
 
   return (
     <>
@@ -45,7 +46,7 @@ export default function CreateWebhook({ onConfirm, onBack }: Props): VNode {
       <CreatePage
         onBack={onBack}
         onCreate={(request: TalerMerchantApi.WebhookAddDetails) => {
-          return createWebhook(request)
+          return lib.management.addWebhook(state.token, request)
             .then(() => onConfirm())
             .catch((error) => {
               setNotif({
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/index.tsx
index 17e767337..2923a8096 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/index.tsx
@@ -22,6 +22,7 @@
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
@@ -30,11 +31,11 @@ import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import {
   useInstanceWebhooks,
-  useWebhookAPI,
 } from "../../../../hooks/webhooks.js";
 import { Notification } from "../../../../utils/types.js";
 import { ListPage } from "./ListPage.js";
 import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
+import { useSessionContext } from "../../../../context/session.js";
 
 interface Props {
   onUnauthorized: () => VNode;
@@ -54,7 +55,8 @@ export default function ListWebhooks({
   const [position, setPosition] = useState<string | undefined>(undefined);
   const { i18n } = useTranslationContext();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
-  const { deleteWebhook } = useWebhookAPI();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const result = useInstanceWebhooks({ position }, (id) => setPosition(id));
 
   if (result.loading) return <Loading />;
@@ -86,8 +88,8 @@ export default function ListWebhooks({
         onSelect={(e) => {
           onSelect(e.webhook_id);
         }}
-        onDelete={(e: TalerMerchantApi.WebhookEntry) =>
-          deleteWebhook(e.webhook_id)
+        onDelete={(e: TalerMerchantApi.WebhookEntry) => {
+          return lib.management.deleteWebhook(state.token, e.webhook_id)
             .then(() =>
               setNotif({
                 message: i18n.str`webhook delete successfully`,
@@ -101,7 +103,7 @@ export default function ListWebhooks({
                 description: error.message,
               }),
             )
-        }
+        }}
       />
     </Fragment>
   );
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/index.tsx
index 97b4f44ba..aecb4b947 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/index.tsx
@@ -22,6 +22,7 @@
 import {
   ErrorType,
   HttpError,
+  useMerchantApiContext,
   useTranslationContext,
 } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
@@ -29,12 +30,12 @@ import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import {
-  useWebhookAPI,
   useWebhookDetails,
 } from "../../../../hooks/webhooks.js";
 import { Notification } from "../../../../utils/types.js";
 import { UpdatePage } from "./UpdatePage.js";
 import { HttpStatusCode, TalerErrorDetail, TalerMerchantApi } from "@gnu-taler/taler-util";
+import { useSessionContext } from "../../../../context/session.js";
 
 export type Entity = TalerMerchantApi.WebhookPatchDetails & WithId;
 
@@ -54,7 +55,8 @@ export default function UpdateWebhook({
   onNotFound,
   onLoadError,
 }: Props): VNode {
-  const { updateWebhook } = useWebhookAPI();
+  const { lib } = useMerchantApiContext();
+  const { state } = useSessionContext();
   const result = useWebhookDetails(tid);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
 
@@ -82,7 +84,7 @@ export default function UpdateWebhook({
         webhook={{ ...result.data, id: tid }}
         onBack={onBack}
         onUpdate={(data) => {
-          return updateWebhook(tid, data)
+          return lib.management.updateWebhook(state.token, tid, data)
             .then(onConfirm)
             .catch((error) => {
               setNotif({