fix #8839

5 files changed, 41 insertions, 42 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx b/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx
index 3d6b92295..6dbcdc523 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx
@@ -136,7 +136,7 @@ export function InputArray<T>({
                 class="tag is-medium is-danger is-delete mb-0"
                 onClick={() => {
                   onChange(array.filter((f) => f !== v) as T[keyof T]);
-                  setCurrentValue(toStr(v));
+                  setCurrentValue(getSuggestion ? (v as any).description : toStr(v));
                 }}
               />
             </div>
diff --git a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
index b618ecda4..c8a7fe911 100644
--- a/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/product/ProductForm.tsx
@@ -19,8 +19,13 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { AmountString, Amounts, TalerMerchantApi } from "@gnu-taler/taler-util";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import {
+  AmountString,
+  Amounts,
+  TalerError,
+  TalerMerchantApi,
+} from "@gnu-taler/taler-util";
+import { Loading, useTranslationContext } from "@gnu-taler/web-util/browser";
 import { h } from "preact";
 import { useCallback, useEffect, useState } from "preact/hooks";
 import { useSessionContext } from "../../context/session.js";
@@ -34,6 +39,8 @@ import { InputStock, Stock } from "../form/InputStock.js";
 import { InputTaxes } from "../form/InputTaxes.js";
 import { InputWithAddon } from "../form/InputWithAddon.js";
 import { InputArray } from "../form/InputArray.js";
+import { useInstanceCategories } from "../../hooks/category.js";
+import { ErrorLoadingMerchant } from "../ErrorLoadingMerchant.js";
 
 type Entity = TalerMerchantApi.ProductDetail & {
   product_id: string;
@@ -48,7 +55,15 @@ interface Props {
 export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) {
   const { i18n } = useTranslationContext();
   const { state, lib } = useSessionContext();
-
+  // FIXME: if the category list is big the will bring a lot of info
+  // we could find a lazy way to add up on searchs
+  const categoriesResult = useInstanceCategories();
+  if (!categoriesResult) return <Loading />;
+  if (categoriesResult instanceof TalerError) {
+    return <ErrorLoadingMerchant error={categoriesResult} />;
+  }
+  const categories =
+    categoriesResult.type === "fail" ? [] : categoriesResult.body.categories;
   const [value, valueHandler] = useState<
     Partial<
       Entity & {
@@ -64,6 +79,7 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) {
     next_restock: { t_s: "never" },
     price: ":0" as AmountString,
     ...initial,
+    minimum_age: !initial?.minimum_age ? undefined : initial?.minimum_age,
     stock:
       !initial || initial.total_stock === -1
         ? undefined
@@ -133,7 +149,7 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) {
       value.address = stock.address;
     }
     delete value.stock;
-    value.categories = value.categories_map?.map((d) => parseInt(d.id, 10))!;
+    value.categories = value.categories_map?.map((d) => parseInt(d.id, 10));
     delete value.categories_map;
 
     if (typeof value.minimum_age !== "undefined" && value.minimum_age < 1) {
@@ -208,9 +224,7 @@ export function ProductForm({ onSubscribe, initial, alreadyExist }: Props) {
           name="categories_map"
           label={i18n.str`Categories`}
           getSuggestion={async () => {
-            const resp = await lib.instance.listCategories(state.token);
-            if (resp.type === "fail") return [];
-            return resp.body.categories.map((cat) => {
+            return categories.map((cat) => {
               return { description: cat.name, id: String(cat.category_id) };
             });
           }}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/categories/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/categories/update/UpdatePage.tsx
index 15bca0df6..069892766 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/categories/update/UpdatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/categories/update/UpdatePage.tsx
@@ -19,17 +19,19 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { TalerMerchantApi } from "@gnu-taler/taler-util";
+import { TalerError, TalerMerchantApi } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { h, VNode } from "preact";
+import { VNode, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
 import { FormProvider } from "../../../../components/form/FormProvider.js";
 import { Input } from "../../../../components/form/Input.js";
-import { WithId } from "../../../../declaration.js";
 import { InputArray } from "../../../../components/form/InputArray.js";
 import { useSessionContext } from "../../../../context/session.js";
-import { ProductWithId } from "../../../../hooks/product.js";
+import { WithId } from "../../../../declaration.js";
+import {
+  useInstanceProducts
+} from "../../../../hooks/product.js";
 
 type Entity = TalerMerchantApi.CategoryProductList & WithId;
 
@@ -37,20 +39,23 @@ interface Props {
   onUpdate: (d: Entity) => Promise<void>;
   onBack?: () => void;
   category: Entity;
-  instanceInventory: ProductWithId[];
 }
-export function UpdatePage({
-  category,
-  instanceInventory,
-  onUpdate,
-  onBack,
-}: Props): VNode {
+export function UpdatePage({ category, onUpdate, onBack }: Props): VNode {
   const { i18n } = useTranslationContext();
   const {
     state: { token },
     lib,
   } = useSessionContext();
+  // FIXME: if the product list is big the will bring a lot of info
+  const inventoryResult = useInstanceProducts();
 
+  const inventory =
+    !inventoryResult ||
+    inventoryResult instanceof TalerError ||
+    inventoryResult.type === "fail"
+      ? []
+      : inventoryResult.body;
+  
   const [state, setState] = useState<
     Partial<Entity & { product_map: { id: string; description: string }[] }>
   >({
@@ -119,7 +124,7 @@ export function UpdatePage({
                   name="product_map"
                   label={i18n.str`Products`}
                   getSuggestion={async () => {
-                    return instanceInventory.map((prod) => {
+                    return inventory.map((prod) => {
                       return {
                         description: prod.description,
                         id: prod.id,
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/categories/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/categories/update/index.tsx
index 6b1fcf8e7..19352ca3e 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/categories/update/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/categories/update/index.tsx
@@ -36,7 +36,6 @@ import { Notification } from "../../../../utils/types.js";
 import { LoginPage } from "../../../login/index.js";
 import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js";
 import { UpdatePage } from "./UpdatePage.js";
-import { useInstanceProducts } from "../../../../hooks/product.js";
 
 interface Props {
   onBack?: () => void;
@@ -49,8 +48,6 @@ export default function UpdateCategory({
   onBack,
 }: Props): VNode {
   const result = useCategoryDetails(cid);
-  // FIXME: if the product list is big the will bring a lot of info
-  const inventoryResult = useInstanceProducts();
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const { state, lib } = useSessionContext();
 
@@ -73,23 +70,6 @@ export default function UpdateCategory({
       }
     }
   }
-  if (!inventoryResult) return <Loading />;
-  if (inventoryResult instanceof TalerError) {
-    return <ErrorLoadingMerchant error={inventoryResult} />;
-  }
-  if (inventoryResult.type === "fail") {
-    switch (inventoryResult.case) {
-      case HttpStatusCode.NotFound: {
-        return <NotFoundPageOrAdminCreate />;
-      }
-      case HttpStatusCode.Unauthorized: {
-        return <LoginPage />;
-      }
-      default: {
-        assertUnreachable(inventoryResult);
-      }
-    }
-  }
 
   return (
     <Fragment>
@@ -99,7 +79,6 @@ export default function UpdateCategory({
           ...result.body,
           id: cid,
         }}
-        instanceInventory={inventoryResult.body}
         onBack={onBack}
         onUpdate={async (newInfo) => {
           return lib.instance
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 06e140680..33db7021f 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
@@ -49,7 +49,7 @@ export default function UpdateProduct({
   const result = useProductDetails(pid);
   const [notif, setNotif] = useState<Notification | undefined>(undefined);
   const { state, lib } = useSessionContext();
-
+  
   const { i18n } = useTranslationContext();
 
   if (!result) return <Loading />;
@@ -70,6 +70,7 @@ export default function UpdateProduct({
     }
   }
 
+
   return (
     <Fragment>
       <NotificationCard notification={notif} />