pretty

10 files changed, 363 insertions, 276 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx
index b5e0ff9c7..2fc0819bb 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx
@@ -15,28 +15,29 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { h, VNode, FunctionalComponent } from 'preact';
+import { h, VNode, FunctionalComponent } from "preact";
 import { CreatePage as TestedComponent } from "./CreatePage.js";
 
-
 export default {
-  title: 'Pages/Product/Create',
+  title: "Pages/Product/Create",
   component: TestedComponent,
   argTypes: {
-    onCreate: { action: 'onCreate' },
-    onBack: { action: 'onBack' },
+    onCreate: { action: "onCreate" },
+    onBack: { action: "onBack" },
   },
 };
 
-function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
-  const r = (args: any) => <Component {...args} />
-  r.args = props
-  return r
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
 }
 
-export const Example = createExample(TestedComponent, {
-});
+export const Example = createExample(TestedComponent, {});
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx
index 3b475cb82..f6d7000ef 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx
@@ -15,9 +15,9 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
 import { h, VNode } from "preact";
 import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
@@ -26,40 +26,55 @@ import { MerchantBackend } from "../../../../declaration.js";
 import { useListener } from "../../../../hooks/listener.js";
 import { Translate, useTranslator } from "../../../../i18n/index.js";
 
-type Entity = MerchantBackend.Products.ProductAddDetail & { product_id: string}
+type Entity = MerchantBackend.Products.ProductAddDetail & {
+  product_id: string;
+};
 
 interface Props {
   onCreate: (d: Entity) => Promise<void>;
   onBack?: () => void;
 }
 
-
 export function CreatePage({ onCreate, onBack }: Props): VNode {
+  const [submitForm, addFormSubmitter] = useListener<Entity | undefined>(
+    (result) => {
+      if (result) return onCreate(result);
+      return Promise.reject();
+    },
+  );
 
-  const [submitForm, addFormSubmitter] = useListener<Entity | undefined>((result) => {
-    if (result) return onCreate(result)
-    return Promise.reject()
-  })
-
-  const i18n = useTranslator()
+  const i18n = useTranslator();
 
-  return <div>
-    <section class="section is-main-section">
-      <div class="columns">
-        <div class="column" />
-        <div class="column is-four-fifths">
-          <ProductForm onSubscribe={addFormSubmitter} />
+  return (
+    <div>
+      <section class="section is-main-section">
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            <ProductForm onSubscribe={addFormSubmitter} />
 
-          <div class="buttons is-right mt-5">
-            {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>}
-            <AsyncButton onClick={submitForm} data-tooltip={
-              !submitForm ? i18n`Need to complete marked fields` : 'confirm operation'
-            } disabled={!submitForm}><Translate>Confirm</Translate></AsyncButton>
+            <div class="buttons is-right mt-5">
+              {onBack && (
+                <button class="button" onClick={onBack}>
+                  <Translate>Cancel</Translate>
+                </button>
+              )}
+              <AsyncButton
+                onClick={submitForm}
+                data-tooltip={
+                  !submitForm
+                    ? i18n`Need to complete marked fields`
+                    : "confirm operation"
+                }
+                disabled={!submitForm}
+              >
+                <Translate>Confirm</Translate>
+              </AsyncButton>
+            </div>
           </div>
-
+          <div class="column" />
         </div>
-        <div class="column" />
-      </div>
-    </section>
-  </div>
-}
\ No newline at end of file
+      </section>
+    </div>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx
index e9880b73a..6b02430cc 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx
@@ -24,44 +24,49 @@ interface Props {
   onCreateAnother?: () => void;
 }
 
-export function CreatedSuccessfully({ entity, onConfirm, onCreateAnother }: Props): VNode {
-
-  return <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
-    <div class="field is-horizontal">
-      <div class="field-label is-normal">
-        <label class="label">Image</label>
-      </div>
-      <div class="field-body is-flex-grow-3">
-        <div class="field">
-          <p class="control">
-            <img src={entity.image} style={{ width: 200, height: 200 }} />
-          </p>
+export function CreatedSuccessfully({
+  entity,
+  onConfirm,
+  onCreateAnother,
+}: Props): VNode {
+  return (
+    <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Image</label>
         </div>
-      </div>
-    </div>
-    <div class="field is-horizontal">
-      <div class="field-label is-normal">
-        <label class="label">Description</label>
-      </div>
-      <div class="field-body is-flex-grow-3">
-        <div class="field">
-          <p class="control">
-            <textarea class="input" readonly value={entity.description} />
-          </p>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <img src={entity.image} style={{ width: 200, height: 200 }} />
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="field is-horizontal">
-      <div class="field-label is-normal">
-        <label class="label">Price</label>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Description</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <textarea class="input" readonly value={entity.description} />
+            </p>
+          </div>
+        </div>
       </div>
-      <div class="field-body is-flex-grow-3">
-        <div class="field">
-          <p class="control">
-            <input class="input" readonly value={entity.price} />
-          </p>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">Price</label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input class="input" readonly value={entity.price} />
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-  </Template>;
+    </Template>
+  );
 }
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 90b4d01a6..62ecaf512 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
@@ -15,41 +15,46 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { Fragment, h, VNode } from 'preact';
-import { useState } from 'preact/hooks';
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { useProductAPI } from "../../../../hooks/product.js";
-import { useTranslator } from '../../../../i18n/index.js';
+import { useTranslator } from "../../../../i18n/index.js";
 import { Notification } from "../../../../utils/types.js";
 import { CreatePage } from "./CreatePage.js";
 
-export type Entity = MerchantBackend.Products.ProductAddDetail
+export type Entity = MerchantBackend.Products.ProductAddDetail;
 interface Props {
   onBack?: () => void;
   onConfirm: () => void;
 }
 export default function CreateProduct({ onConfirm, onBack }: Props): VNode {
-  const { createProduct } = useProductAPI()
-  const [notif, setNotif] = useState<Notification | undefined>(undefined)
-  const i18n = useTranslator()
-  
-  return <Fragment>
-    <NotificationCard notification={notif} />
-    <CreatePage
-      onBack={onBack}
-      onCreate={(request: MerchantBackend.Products.ProductAddDetail) => {
-        return createProduct(request).then(() => onConfirm()).catch((error) => {
-          setNotif({
-            message: i18n`could not create product`,
-            type: "ERROR",
-            description: error.message
-          })
-        })
-      }} />
-  </Fragment>
-}
\ No newline at end of file
+  const { createProduct } = useProductAPI();
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
+  const i18n = useTranslator();
+
+  return (
+    <Fragment>
+      <NotificationCard notification={notif} />
+      <CreatePage
+        onBack={onBack}
+        onCreate={(request: MerchantBackend.Products.ProductAddDetail) => {
+          return createProduct(request)
+            .then(() => onConfirm())
+            .catch((error) => {
+              setNotif({
+                message: i18n`could not create product`,
+                type: "ERROR",
+                description: error.message,
+              });
+            });
+        }}
+      />
+    </Fragment>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx
index ac22960b2..c2c4d548c 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx
@@ -15,44 +15,47 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { h, VNode, FunctionalComponent } from 'preact';
+import { h, VNode, FunctionalComponent } from "preact";
 import { CardTable as TestedComponent } from "./Table.js";
 
-
 export default {
-  title: 'Pages/Product/List',
+  title: "Pages/Product/List",
   component: TestedComponent,
   argTypes: {
-    onCreate: { action: 'onCreate' },
-    onSelect: { action: 'onSelect' },
-    onDelete: { action: 'onDelete' },
-    onUpdate: { action: 'onUpdate' },
+    onCreate: { action: "onCreate" },
+    onSelect: { action: "onSelect" },
+    onDelete: { action: "onDelete" },
+    onUpdate: { action: "onUpdate" },
   },
 };
 
-function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
-  const r = (args: any) => <Component {...args} />
-  r.args = props
-  return r
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
 }
 
-
 export const Example = createExample(TestedComponent, {
-  instances: [{
-    id: 'orderid',
-    description: 'description1',
-    description_i18n: {} as any,
-    image: '',
-    price: 'TESTKUDOS:10',
-    taxes: [],
-    total_lost: 10,
-    total_sold: 5,
-    total_stock: 15,
-    unit: 'bar',
-    address: {}
-  }]
+  instances: [
+    {
+      id: "orderid",
+      description: "description1",
+      description_i18n: {} as any,
+      image: "",
+      price: "TESTKUDOS:10",
+      taxes: [],
+      total_lost: 10,
+      total_sold: 5,
+      total_stock: 15,
+      unit: "bar",
+      address: {},
+    },
+  ],
 });
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 dfa66fcf4..515b36895 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
@@ -41,7 +41,7 @@ interface Props {
   onSelect: (product: Entity) => void;
   onUpdate: (
     id: string,
-    data: MerchantBackend.Products.ProductPatchDetail
+    data: MerchantBackend.Products.ProductPatchDetail,
   ) => Promise<void>;
   onCreate: () => void;
   selected?: boolean;
@@ -55,7 +55,7 @@ export function CardTable({
   onDelete,
 }: Props): VNode {
   const [rowSelection, rowSelectionHandler] = useState<string | undefined>(
-    undefined
+    undefined,
   );
   const i18n = useTranslator();
   return (
@@ -107,7 +107,7 @@ interface TableProps {
   onSelect: (id: Entity) => void;
   onUpdate: (
     id: string,
-    data: MerchantBackend.Products.ProductPatchDetail
+    data: MerchantBackend.Products.ProductPatchDetail,
   ) => Promise<void>;
   onDelete: (id: Entity) => void;
   rowSelectionHandler: StateUpdater<string | undefined>;
@@ -159,7 +159,7 @@ function Table({
               ? "never"
               : `restock at ${format(
                   new Date(i.next_restock.t_s * 1000),
-                  "yyyy/MM/dd"
+                  "yyyy/MM/dd",
                 )}`;
             let stockInfo: ComponentChildren = "";
             if (i.total_stock < 0) {
@@ -277,7 +277,7 @@ function Table({
                         product={i}
                         onUpdate={(prod) =>
                           onUpdate(i.id, prod).then((r) =>
-                            rowSelectionHandler(undefined)
+                            rowSelectionHandler(undefined),
                           )
                         }
                         onCancel={() => rowSelectionHandler(undefined)}
@@ -297,7 +297,7 @@ function Table({
 interface FastProductUpdateFormProps {
   product: Entity;
   onUpdate: (
-    data: MerchantBackend.Products.ProductPatchDetail
+    data: MerchantBackend.Products.ProductPatchDetail,
   ) => Promise<void>;
   onCancel: () => void;
 }
@@ -381,7 +381,7 @@ function FastProductWithManagedStockUpdateForm({
   };
 
   const hasErrors = Object.keys(errors).some(
-    (k) => (errors as any)[k] !== undefined
+    (k) => (errors as any)[k] !== undefined,
   );
   const i18n = useTranslator();
 
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 9f1d077ac..7e9118d24 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
@@ -15,18 +15,21 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { h, VNode } from 'preact';
-import { useState } from 'preact/hooks';
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import { MerchantBackend, WithId } from "../../../../declaration.js";
 import { HttpError } from "../../../../hooks/backend.js";
-import { useInstanceProducts, useProductAPI } from "../../../../hooks/product.js";
-import { useTranslator } from '../../../../i18n/index.js';
+import {
+  useInstanceProducts,
+  useProductAPI,
+} from "../../../../hooks/product.js";
+import { useTranslator } from "../../../../i18n/index.js";
 import { Notification } from "../../../../utils/types.js";
 import { CardTable } from "./Table.js";
 
@@ -37,44 +40,65 @@ interface Props {
   onSelect: (id: string) => void;
   onLoadError: (e: HttpError) => VNode;
 }
-export default function ProductList({ onUnauthorized, onLoadError, onCreate, onSelect, onNotFound }: Props): VNode {
-  const result = useInstanceProducts()
-  const { deleteProduct, updateProduct } = useProductAPI()
-  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+export default function ProductList({
+  onUnauthorized,
+  onLoadError,
+  onCreate,
+  onSelect,
+  onNotFound,
+}: Props): VNode {
+  const result = useInstanceProducts();
+  const { deleteProduct, updateProduct } = useProductAPI();
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
 
-  const i18n = useTranslator()
+  const i18n = useTranslator();
 
-  if (result.clientError && result.isUnauthorized) return onUnauthorized()
-  if (result.clientError && result.isNotfound) return onNotFound()
-  if (result.loading) return <Loading />
-  if (!result.ok) return onLoadError(result)
+  if (result.clientError && result.isUnauthorized) return onUnauthorized();
+  if (result.clientError && result.isNotfound) return onNotFound();
+  if (result.loading) return <Loading />;
+  if (!result.ok) return onLoadError(result);
 
-  return <section class="section is-main-section">
-    <NotificationCard notification={notif} />
+  return (
+    <section class="section is-main-section">
+      <NotificationCard notification={notif} />
 
-    <CardTable instances={result.data}
-      onCreate={onCreate}
-      onUpdate={(id, prod) => updateProduct(id, prod)
-        .then(() => setNotif({
-          message: i18n`product updated successfully`,
-          type: "SUCCESS"
-        })).catch((error) => setNotif({
-          message: i18n`could not update the product`,
-          type: "ERROR",
-          description: error.message
-        }))
-      }
-      onSelect={(product) => onSelect(product.id)}
-      onDelete={(prod: (MerchantBackend.Products.ProductDetail & WithId)) => deleteProduct(prod.id)
-        .then(() => setNotif({
-          message: i18n`product delete successfully`,
-          type: "SUCCESS"
-        })).catch((error) => setNotif({
-          message: i18n`could not delete the product`,
-          type: "ERROR",
-          description: error.message
-        }))
-      }
-    />
-  </section>
-}
\ No newline at end of file
+      <CardTable
+        instances={result.data}
+        onCreate={onCreate}
+        onUpdate={(id, prod) =>
+          updateProduct(id, prod)
+            .then(() =>
+              setNotif({
+                message: i18n`product updated successfully`,
+                type: "SUCCESS",
+              }),
+            )
+            .catch((error) =>
+              setNotif({
+                message: i18n`could not update the product`,
+                type: "ERROR",
+                description: error.message,
+              }),
+            )
+        }
+        onSelect={(product) => onSelect(product.id)}
+        onDelete={(prod: MerchantBackend.Products.ProductDetail & WithId) =>
+          deleteProduct(prod.id)
+            .then(() =>
+              setNotif({
+                message: i18n`product delete successfully`,
+                type: "SUCCESS",
+              }),
+            )
+            .catch((error) =>
+              setNotif({
+                message: i18n`could not delete the product`,
+                type: "ERROR",
+                description: error.message,
+              }),
+            )
+        }
+      />
+    </section>
+  );
+}
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx
index 95dd1f5cc..a85b13b8b 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx
@@ -15,57 +15,59 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { h, VNode, FunctionalComponent } from 'preact';
+import { h, VNode, FunctionalComponent } from "preact";
 import { UpdatePage as TestedComponent } from "./UpdatePage.js";
 
-
 export default {
-  title: 'Pages/Product/Update',
+  title: "Pages/Product/Update",
   component: TestedComponent,
   argTypes: {
-    onUpdate: { action: 'onUpdate' },
-    onBack: { action: 'onBack' },
+    onUpdate: { action: "onUpdate" },
+    onBack: { action: "onBack" },
   },
 };
 
-function createExample<Props>(Component: FunctionalComponent<Props>, props: Partial<Props>) {
-  const r = (args: any) => <Component {...args} />
-  r.args = props
-  return r
+function createExample<Props>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+) {
+  const r = (args: any) => <Component {...args} />;
+  r.args = props;
+  return r;
 }
 
 export const WithManagedStock = createExample(TestedComponent, {
   product: {
-    product_id: '20102-ASDAS-QWE',
-    description: 'description1',
+    product_id: "20102-ASDAS-QWE",
+    description: "description1",
     description_i18n: {} as any,
-    image: '',
-    price: 'TESTKUDOS:10',
+    image: "",
+    price: "TESTKUDOS:10",
     taxes: [],
     total_lost: 10,
     total_sold: 5,
     total_stock: 15,
-    unit: 'bar',
-    address: {}
-  }
+    unit: "bar",
+    address: {},
+  },
 });
 
 export const WithInfiniteStock = createExample(TestedComponent, {
   product: {
-    product_id: '20102-ASDAS-QWE',
-    description: 'description1',
+    product_id: "20102-ASDAS-QWE",
+    description: "description1",
     description_i18n: {} as any,
-    image: '',
-    price: 'TESTKUDOS:10',
+    image: "",
+    price: "TESTKUDOS:10",
     taxes: [],
     total_lost: 10,
     total_sold: 5,
     total_stock: -1,
-    unit: 'bar',
-    address: {}
-  }
+    unit: "bar",
+    address: {},
+  },
 });
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx
index 54fef6003..841c0222f 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx
@@ -15,9 +15,9 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
 import { h, VNode } from "preact";
 import { AsyncButton } from "../../../../components/exception/AsyncButton.js";
@@ -26,7 +26,7 @@ import { MerchantBackend, WithId } from "../../../../declaration.js";
 import { useListener } from "../../../../hooks/listener.js";
 import { Translate, useTranslator } from "../../../../i18n/index.js";
 
-type Entity = MerchantBackend.Products.ProductDetail & { product_id: string }
+type Entity = MerchantBackend.Products.ProductDetail & { product_id: string };
 
 interface Props {
   onUpdate: (d: Entity) => Promise<void>;
@@ -35,43 +35,65 @@ interface Props {
 }
 
 export function UpdatePage({ product, onUpdate, onBack }: Props): VNode {
-  const [submitForm, addFormSubmitter] = useListener<Entity | undefined>((result) => {
-    if (result) return onUpdate(result)
-    return Promise.resolve()
-  })
-
-  const i18n = useTranslator()
+  const [submitForm, addFormSubmitter] = useListener<Entity | undefined>(
+    (result) => {
+      if (result) return onUpdate(result);
+      return Promise.resolve();
+    },
+  );
 
-  return <div>
-    <section class="section">
-      <section class="hero is-hero-bar">
-        <div class="hero-body">
+  const i18n = useTranslator();
 
-          <div class="level">
-            <div class="level-left">
-              <div class="level-item">
-                <span class="is-size-4"><Translate>Product id:</Translate><b>{product.product_id}</b></span>
+  return (
+    <div>
+      <section class="section">
+        <section class="hero is-hero-bar">
+          <div class="hero-body">
+            <div class="level">
+              <div class="level-left">
+                <div class="level-item">
+                  <span class="is-size-4">
+                    <Translate>Product id:</Translate>
+                    <b>{product.product_id}</b>
+                  </span>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </section>
-      <hr />
+        </section>
+        <hr />
 
-      <div class="columns">
-        <div class="column" />
-        <div class="column is-four-fifths">
-          <ProductForm initial={product} onSubscribe={addFormSubmitter} alreadyExist />
+        <div class="columns">
+          <div class="column" />
+          <div class="column is-four-fifths">
+            <ProductForm
+              initial={product}
+              onSubscribe={addFormSubmitter}
+              alreadyExist
+            />
 
-          <div class="buttons is-right mt-5">
-            {onBack && <button class="button" onClick={onBack} ><Translate>Cancel</Translate></button>}
-            <AsyncButton onClick={submitForm} data-tooltip={
-              !submitForm ? i18n`Need to complete marked fields` : 'confirm operation'
-            } disabled={!submitForm}><Translate>Confirm</Translate></AsyncButton>
+            <div class="buttons is-right mt-5">
+              {onBack && (
+                <button class="button" onClick={onBack}>
+                  <Translate>Cancel</Translate>
+                </button>
+              )}
+              <AsyncButton
+                onClick={submitForm}
+                data-tooltip={
+                  !submitForm
+                    ? i18n`Need to complete marked fields`
+                    : "confirm operation"
+                }
+                disabled={!submitForm}
+              >
+                <Translate>Confirm</Translate>
+              </AsyncButton>
+            </div>
           </div>
+          <div class="column" />
         </div>
-        <div class="column" />
-      </div>
-    </section>
-  </div>
-}
\ No newline at end of file
+      </section>
+    </div>
+  );
+}
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 c32424348..3988fc9f0 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
@@ -15,22 +15,22 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 
-import { Fragment, h, VNode } from 'preact';
-import { useState } from 'preact/hooks';
+import { Fragment, h, VNode } from "preact";
+import { useState } from "preact/hooks";
 import { Loading } from "../../../../components/exception/loading.js";
 import { NotificationCard } from "../../../../components/menu/index.js";
 import { MerchantBackend } from "../../../../declaration.js";
 import { HttpError } from "../../../../hooks/backend.js";
 import { useProductAPI, useProductDetails } from "../../../../hooks/product.js";
-import { useTranslator } from '../../../../i18n/index.js';
+import { useTranslator } from "../../../../i18n/index.js";
 import { Notification } from "../../../../utils/types.js";
 import { UpdatePage } from "./UpdatePage.js";
 
-export type Entity = MerchantBackend.Products.ProductAddDetail
+export type Entity = MerchantBackend.Products.ProductAddDetail;
 interface Props {
   onBack?: () => void;
   onConfirm: () => void;
@@ -39,33 +39,43 @@ interface Props {
   onLoadError: (e: HttpError) => VNode;
   pid: string;
 }
-export default function UpdateProduct({ pid, onConfirm, onBack, onUnauthorized, onNotFound, onLoadError }: Props): VNode {
-  const { updateProduct } = useProductAPI()
-  const result = useProductDetails(pid)
-  const [notif, setNotif] = useState<Notification | undefined>(undefined)
+export default function UpdateProduct({
+  pid,
+  onConfirm,
+  onBack,
+  onUnauthorized,
+  onNotFound,
+  onLoadError,
+}: Props): VNode {
+  const { updateProduct } = useProductAPI();
+  const result = useProductDetails(pid);
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
 
-  const i18n = useTranslator()
+  const i18n = useTranslator();
 
-  if (result.clientError && result.isUnauthorized) return onUnauthorized()
-  if (result.clientError && result.isNotfound) return onNotFound()
-  if (result.loading) return <Loading />
-  if (!result.ok) return onLoadError(result)
+  if (result.clientError && result.isUnauthorized) return onUnauthorized();
+  if (result.clientError && result.isNotfound) return onNotFound();
+  if (result.loading) return <Loading />;
+  if (!result.ok) return onLoadError(result);
 
-  return <Fragment>
-    <NotificationCard notification={notif} />
-    <UpdatePage
-      product={{ ...result.data, product_id: pid }}
-      onBack={onBack}
-      onUpdate={(data) => {
-        return updateProduct(pid, data)
-          .then(onConfirm)
-          .catch((error) => {
-            setNotif({
-              message: i18n`could not create product`,
-              type: "ERROR",
-              description: error.message
-            })
-          })
-      }} />
-  </Fragment>
-}
\ No newline at end of file
+  return (
+    <Fragment>
+      <NotificationCard notification={notif} />
+      <UpdatePage
+        product={{ ...result.data, product_id: pid }}
+        onBack={onBack}
+        onUpdate={(data) => {
+          return updateProduct(pid, data)
+            .then(onConfirm)
+            .catch((error) => {
+              setNotif({
+                message: i18n`could not create product`,
+                type: "ERROR",
+                description: error.message,
+              });
+            });
+        }}
+      />
+    </Fragment>
+  );
+}