pretty

3 files changed, 129 insertions, 95 deletions

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>
+  );
+}