fixing issues reported by Christian, wip

7 files changed, 83 insertions, 21 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
index cbfe1d573..db73217ed 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx
@@ -66,7 +66,7 @@ export function CardTable({
           <span class="icon">
             <i class="mdi mdi-shopping" />
           </span>
-          <i18n.Translate>Products</i18n.Translate>
+          <i18n.Translate>Inventory</i18n.Translate>
         </p>
         <div class="card-header-icon" aria-label="more options">
           <span
@@ -142,7 +142,7 @@ function Table({
               <i18n.Translate>Taxes</i18n.Translate>
             </th>
             <th>
-              <i18n.Translate>Profit</i18n.Translate>
+              <i18n.Translate>Sales</i18n.Translate>
             </th>
             <th>
               <i18n.Translate>Stock</i18n.Translate>
@@ -190,18 +190,21 @@ function Table({
                       src={i.image ? i.image : emptyImage}
                       style={{
                         border: "solid black 1px",
-                        width: 100,
-                        height: 100,
+                        maxHeight: "2em",
+                        width: "auto",
+                        height: "auto",
                       }}
                     />
                   </td>
                   <td
+                    class="has-tooltip-right"                    
+                    data-tooltip={i.description}
                     onClick={() =>
                       rowSelection !== i.id && rowSelectionHandler(i.id)
                     }
                     style={{ cursor: "pointer" }}
                   >
-                    {i.description}
+                    {i.description.length > 30  ? i.description.substring(0, 30) + "..." : i.description}
                   </td>
                   <td
                     onClick={() =>
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 85c50e5ed..274a7c2ea 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
@@ -53,7 +53,7 @@ export default function ProductList({
   onNotFound,
 }: Props): VNode {
   const result = useInstanceProducts();
-  const { deleteProduct, updateProduct } = useProductAPI();
+  const { deleteProduct, updateProduct, getProduct } = useProductAPI();
   const [deleting, setDeleting] =
     useState<MerchantBackend.Products.ProductDetail & WithId | null>(null);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
@@ -74,11 +74,61 @@ export default function ProductList({
       return onNotFound();
     return onLoadError(result);
   }
+  const [errorId, setErrorId] = useState<string | undefined>(
+    undefined,
+  );
+
+  const [productId, setProductId] = useState<string>()
+  async function testIfProductExistAndSelect(orderId: string | undefined): Promise<void> {
+    if (!orderId) {
+      setErrorId(i18n.str`Enter a product id`);
+      return;
+    }
+    try {
+      await getProduct(orderId);
+      onSelect(orderId);
+      setErrorId(undefined);
+    } catch {
+      setErrorId(i18n.str`product not found`);
+    }
+  }
 
   return (
     <section class="section is-main-section">
       <NotificationCard notification={notif} />
 
+      <div class="level">
+        <div class="level-left">
+          <div class="level-item">
+            <div class="field has-addons">
+              <div class="control">
+                <input
+                  class={errorId ? "input is-danger" : "input"}
+                  type="text"
+                  value={productId ?? ""}
+                  onChange={(e) => setProductId(e.currentTarget.value)}
+                  placeholder={i18n.str`product id`}
+                />
+                {errorId && <p class="help is-danger">{errorId}</p>}
+              </div>
+              <span
+                class="has-tooltip-bottom"
+                data-tooltip={i18n.str`jump to product with the given product ID`}
+              >
+                <button
+                  class="button"
+                  onClick={(e) => testIfProductExistAndSelect(productId)}
+                >
+                  <span class="icon">
+                    <i class="mdi mdi-arrow-right" />
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <CardTable
         instances={result.data}
         onCreate={onCreate}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
index 2201e75a5..0d2bb2c30 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx
@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { HttpError, RequestError, useApiContext, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { Fragment, h, VNode } from "preact";
 import { StateUpdater, useEffect, useState } from "preact/hooks";
 import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
@@ -35,6 +35,7 @@ import {
   PAYTO_WIRE_METHOD_LOOKUP,
   URL_REGEX,
 } from "../../../../utils/constants.js";
+import { useBackendBaseRequest } from "../../../../hooks/backend.js";
 
 type Entity = MerchantBackend.Rewards.ReserveCreateRequest;
 
@@ -65,6 +66,7 @@ function ViewStep({
   setReserve,
 }: ViewProps): VNode {
   const { i18n } = useTranslationContext();
+  const {request} = useApiContext()
   const [wireMethods, setWireMethods] = useState<Array<string>>([]);
   const [exchangeQueryError, setExchangeQueryError] = useState<
     string | undefined
@@ -123,19 +125,26 @@ function ViewStep({
             <AsyncButton
               class="has-tooltip-left"
               onClick={() => {
-                return fetch(`${reserve.exchange_url}wire`)
-                  .then((r) => r.json())
+                if (!reserve.exchange_url) {
+                  return Promise.resolve();
+                }
+                
+                return request<any>(reserve.exchange_url, "keys") //</div>fetch(`${reserve.exchange_url}wire`)
                   .then((r) => {
-                    const wireMethods = r.accounts.map((a: any) => {
-                      const match = PAYTO_WIRE_METHOD_LOOKUP.exec(a.payto_uri);
-                      return (match && match[1]) || "";
-                    });
+                    if (r.loading) return;
+                    if (r.ok) {
+                      const wireMethods = r.data.accounts.map((a: any) => {
+                        const match = PAYTO_WIRE_METHOD_LOOKUP.exec(a.payto_uri);
+                        return (match && match[1]) || "";
+                      });                     
+                    }
                     setWireMethods(wireMethods);
                     setCurrentStep(Steps.WIRE_METHOD);
                     return;
                   })
-                  .catch((r: any) => {
-                    setExchangeQueryError(r.message);
+                  .catch((r: RequestError<{}>) => {
+                    console.log(r.cause)
+                    setExchangeQueryError(r.cause.message);
                   });
               }}
               data-tooltip={
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx
index bdc86d226..cebc1ade6 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatePage.tsx
@@ -70,8 +70,8 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
         : state.otp_key.length !== 32
           ? i18n.str`size of the key should be 32`
           : undefined,
-    otp_description: !state.otp_description ? i18n.str`required`
-      : !/[a-zA-Z0-9]*/.test(state.otp_description)
+          otp_device_description: !state.otp_device_description ? i18n.str`required`
+      : !/[a-zA-Z0-9]*/.test(state.otp_device_description)
         ? i18n.str`no valid. only characters and numbers`
         : undefined,
 
@@ -103,7 +103,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode {
                 tooltip={i18n.str`Internal id on the system`}
               />
               <Input<Entity>
-                name="otp_description"
+                name="otp_device_description"
                 label={i18n.str`Descripiton`}
                 tooltip={i18n.str`Useful to identify the device physically`}
               />
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx
index 22ae55677..db3842711 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/create/CreatedSuccessfully.tsx
@@ -77,7 +77,7 @@ export function CreatedSuccessfully({
               <input
                 class="input"
                 readonly
-                value={entity.otp_description}
+                value={entity.otp_device_description}
               />
             </p>
           </div>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx
index 585c12e11..79be9802f 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/update/UpdatePage.tsx
@@ -87,7 +87,7 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode {
                 errors={errors}
               >
                 <Input<Entity>
-                  name="otp_description"
+                  name="otp_device_description"
                   label={i18n.str`Description`}
                   tooltip={i18n.str`dddd`}
                 />
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx
index 9a27ccfee..52f6c6c29 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/validators/update/index.tsx
@@ -80,7 +80,7 @@ export default function UpdateValidator({
         device={{
           id: vid,
           otp_algorithm: result.data.otp_algorithm,
-          otp_description: result.data.device_description,
+          otp_device_description: result.data.device_description,
           otp_key: undefined,
           otp_ctr: result.data.otp_ctr
         }}