pretty

1 files changed, 143 insertions, 89 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx
index 74806734c..57aa5968d 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx
@@ -15,9 +15,9 @@
  */
 
 /**
-*
-* @author Sebastian Javier Marchano (sebasjm)
-*/
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
 import { Fragment, h } from "preact";
 import { MerchantBackend, Timestamp } from "../../declaration.js";
 import { InputProps, useField } from "./useField.js";
@@ -34,8 +34,7 @@ export interface Props<T> extends InputProps<T> {
   alreadyExist?: boolean;
 }
 
-
-type Entity = Stock
+type Entity = Stock;
 
 export interface Stock {
   current: number;
@@ -50,66 +49,96 @@ interface StockDelta {
   lost: number;
 }
 
-
-export function InputStock<T>({ name, tooltip, label, alreadyExist }: Props<keyof T>) {
+export function InputStock<T>({
+  name,
+  tooltip,
+  label,
+  alreadyExist,
+}: Props<keyof T>) {
   const { error, value, onChange } = useField<T>(name);
 
-  const [errors, setErrors] = useState<FormErrors<Entity>>({})
-
-  const [formValue, valueHandler] = useState<Partial<Entity>>(value)
-  const [addedStock, setAddedStock] = useState<StockDelta>({ incoming: 0, lost: 0 })
-  const i18n = useTranslator()
+  const [errors, setErrors] = useState<FormErrors<Entity>>({});
 
+  const [formValue, valueHandler] = useState<Partial<Entity>>(value);
+  const [addedStock, setAddedStock] = useState<StockDelta>({
+    incoming: 0,
+    lost: 0,
+  });
+  const i18n = useTranslator();
 
   useLayoutEffect(() => {
     if (!formValue) {
-      onChange(undefined as any)
+      onChange(undefined as any);
     } else {
       onChange({
         ...formValue,
         current: (formValue?.current || 0) + addedStock.incoming,
-        lost: (formValue?.lost || 0) + addedStock.lost
-      } as any)
+        lost: (formValue?.lost || 0) + addedStock.lost,
+      } as any);
     }
-  }, [formValue, addedStock])
+  }, [formValue, addedStock]);
 
   if (!formValue) {
-    return <Fragment>
-      <div class="field is-horizontal">
-        <div class="field-label is-normal">
-          <label class="label">
-            {label}
-            {tooltip && <span class="icon has-tooltip-right" data-tooltip={tooltip}>
-              <i class="mdi mdi-information" />
-            </span>}
-          </label>
-        </div>
-        <div class="field-body is-flex-grow-3">
-          <div class="field has-addons">
-            {!alreadyExist ?
-              <button class="button" 
-                data-tooltip={i18n`click here to configure the stock of the product, leave it as is and the backend will not control stock`}
-                onClick={(): void => { valueHandler({ current: 0, lost: 0, sold: 0 } as Stock as any); }} >
-                <span><Translate>Manage stock</Translate></span>
-              </button> : <button class="button" 
-                data-tooltip={i18n`this product has been configured without stock control`}
-                disabled >
-                <span><Translate>Infinite</Translate></span>
-              </button>
-            }
+    return (
+      <Fragment>
+        <div class="field is-horizontal">
+          <div class="field-label is-normal">
+            <label class="label">
+              {label}
+              {tooltip && (
+                <span class="icon has-tooltip-right" data-tooltip={tooltip}>
+                  <i class="mdi mdi-information" />
+                </span>
+              )}
+            </label>
+          </div>
+          <div class="field-body is-flex-grow-3">
+            <div class="field has-addons">
+              {!alreadyExist ? (
+                <button
+                  class="button"
+                  data-tooltip={i18n`click here to configure the stock of the product, leave it as is and the backend will not control stock`}
+                  onClick={(): void => {
+                    valueHandler({
+                      current: 0,
+                      lost: 0,
+                      sold: 0,
+                    } as Stock as any);
+                  }}
+                >
+                  <span>
+                    <Translate>Manage stock</Translate>
+                  </span>
+                </button>
+              ) : (
+                <button
+                  class="button"
+                  data-tooltip={i18n`this product has been configured without stock control`}
+                  disabled
+                >
+                  <span>
+                    <Translate>Infinite</Translate>
+                  </span>
+                </button>
+              )}
+            </div>
           </div>
         </div>
-      </div>
-    </Fragment >
+      </Fragment>
+    );
   }
 
-  const currentStock = (formValue.current || 0) - (formValue.lost || 0) - (formValue.sold || 0)
+  const currentStock =
+    (formValue.current || 0) - (formValue.lost || 0) - (formValue.sold || 0);
 
   const stockAddedErrors: FormErrors<typeof addedStock> = {
-    lost: currentStock + addedStock.incoming < addedStock.lost ?
-      i18n`lost cannot be greater than current and incoming (max ${currentStock + addedStock.incoming})`
-      : undefined
-  }
+    lost:
+      currentStock + addedStock.incoming < addedStock.lost
+        ? i18n`lost cannot be greater than current and incoming (max ${
+            currentStock + addedStock.incoming
+          })`
+        : undefined,
+  };
 
   // const stockUpdateDescription = stockAddedErrors.lost ? '' : (
   //   !!addedStock.incoming || !!addedStock.lost ?
@@ -117,26 +146,39 @@ export function InputStock<T>({ name, tooltip, label, alreadyExist }: Props<keyo
   //     i18n`current stock will stay at ${currentStock}`
   // )
 
-  return <Fragment>
-    <div class="card">
-      <header class="card-header">
-        <p class="card-header-title">
-          {label}
-          {tooltip && <span class="icon" data-tooltip={tooltip}>
-            <i class="mdi mdi-information" />
-          </span>}
-        </p>
-      </header>
-      <div class="card-content">
-        <FormProvider<Entity> name="stock" errors={errors} object={formValue} valueHandler={valueHandler}>
-          {alreadyExist ? <Fragment>
-
-            <FormProvider name="added" errors={stockAddedErrors} object={addedStock} valueHandler={setAddedStock as any}>
-              <InputNumber name="incoming" label={i18n`Incoming`} />
-              <InputNumber name="lost" label={i18n`Lost`} />
-            </FormProvider>
-
-            {/* <div class="field is-horizontal">
+  return (
+    <Fragment>
+      <div class="card">
+        <header class="card-header">
+          <p class="card-header-title">
+            {label}
+            {tooltip && (
+              <span class="icon" data-tooltip={tooltip}>
+                <i class="mdi mdi-information" />
+              </span>
+            )}
+          </p>
+        </header>
+        <div class="card-content">
+          <FormProvider<Entity>
+            name="stock"
+            errors={errors}
+            object={formValue}
+            valueHandler={valueHandler}
+          >
+            {alreadyExist ? (
+              <Fragment>
+                <FormProvider
+                  name="added"
+                  errors={stockAddedErrors}
+                  object={addedStock}
+                  valueHandler={setAddedStock as any}
+                >
+                  <InputNumber name="incoming" label={i18n`Incoming`} />
+                  <InputNumber name="lost" label={i18n`Lost`} />
+                </FormProvider>
+
+                {/* <div class="field is-horizontal">
               <div class="field-label is-normal" />
               <div class="field-body is-flex-grow-3">
                 <div class="field">
@@ -144,28 +186,40 @@ export function InputStock<T>({ name, tooltip, label, alreadyExist }: Props<keyo
                 </div>
               </div>
             </div> */}
-
-          </Fragment> : <InputNumber<Entity> name="current"
-            label={i18n`Current`}
-            side={
-              <button class="button is-danger" 
-                data-tooltip={i18n`remove stock control for this product`}
-                onClick={(): void => { valueHandler(undefined as any) }} >
-                <span><Translate>without stock</Translate></span>
-              </button>
-            }
-          />}
-
-          <InputDate<Entity> name="nextRestock" label={i18n`Next restock`} withTimestampSupport />
-
-          <InputGroup<Entity> name="address" label={i18n`Delivery address`}>
-            <InputLocation name="address" />
-          </InputGroup>
-        </FormProvider>
+              </Fragment>
+            ) : (
+              <InputNumber<Entity>
+                name="current"
+                label={i18n`Current`}
+                side={
+                  <button
+                    class="button is-danger"
+                    data-tooltip={i18n`remove stock control for this product`}
+                    onClick={(): void => {
+                      valueHandler(undefined as any);
+                    }}
+                  >
+                    <span>
+                      <Translate>without stock</Translate>
+                    </span>
+                  </button>
+                }
+              />
+            )}
+
+            <InputDate<Entity>
+              name="nextRestock"
+              label={i18n`Next restock`}
+              withTimestampSupport
+            />
+
+            <InputGroup<Entity> name="address" label={i18n`Delivery address`}>
+              <InputLocation name="address" />
+            </InputGroup>
+          </FormProvider>
+        </div>
       </div>
-    </div>
-  </Fragment>
+    </Fragment>
+  );
 }
-  // (
-
-
+// (