@orbe-agro/client-core 5.3.85 → 5.3.89

package/dist/@ecme/views/concepts/products/ProductForm/components/ImageSection.js

@@ -1,34 +1,34 @@
 import { jsxs as a, Fragment as y, jsx as e } from "react/jsx-runtime";
-import { useState as f } from "react";
+import { useState as x } from "react";
 import "../../../../../components/ui/Card/index.js";
 import "../../../../../components/ui/Upload/index.js";
 import "../../../../../components/ui/Form/index.js";
 import "../../../../../components/ui/Dialog/index.js";
-import b from "../../../../../components/shared/ConfirmDialog.js";
-import { Controller as w } from "react-hook-form";
-import { HiEye as I, HiTrash as j } from "react-icons/hi";
+import N from "../../../../../components/shared/ConfirmDialog.js";
+import { Controller as b } from "react-hook-form";
+import { HiEye as I, HiTrash as w } from "react-icons/hi";
 import D from "lodash/cloneDeep";
 import { PiImagesThin as v } from "react-icons/pi";
-import k from "../../../../../components/ui/Dialog/Dialog.js";
-import L from "../../../../../components/ui/Card/Card.js";
-import O from "../../../../../components/ui/Form/FormItem.js";
+import j from "../../../../../components/ui/Dialog/Dialog.js";
+import k from "../../../../../components/ui/Card/Card.js";
+import L from "../../../../../components/ui/Form/FormItem.js";
 import C from "../../../../../components/ui/Upload/Upload.js";
-const U = (h) => {
-  const { imgList: p, onImageDelete: m } = h, [l, c] = f({}), [g, t] = f(!1), [r, n] = f(!1), s = (o) => {
-    c(o), t(!0);
-  }, i = () => {
+const O = (u) => {
+  const { imgList: d, onImageDelete: p } = u, [i, m] = x({}), [r, t] = x(!1), [s, o] = x(!1), l = (n) => {
+    m(n), t(!0);
+  }, g = () => {
     t(!1), setTimeout(() => {
-      c({});
+      m({});
     }, 300);
-  }, u = (o) => {
-    c(o), n(!0);
-  }, d = () => {
-    c({}), n(!1);
-  }, x = () => {
-    m == null || m(l), n(!1);
+  }, f = (n) => {
+    m(n), o(!0);
+  }, h = () => {
+    m({}), o(!1);
+  }, c = () => {
+    p?.(i), o(!1);
   };
   return /* @__PURE__ */ a(y, { children: [
-    p.map((o) => /* @__PURE__ */ a(
+    d.map((n) => /* @__PURE__ */ a(
       "div",
       {
         className: "group relative rounded-xl border border-gray-200 dark:border-gray-600 p-2 flex",
@@ -37,8 +37,8 @@ const U = (h) => {
             "img",
             {
               className: "rounded-lg max-h-[140px] mx-auto max-w-full dark:bg-transparent",
-              src: o.img,
-              alt: o.name
+              src: n.img,
+              alt: n.name
             }
           ),
           /* @__PURE__ */ a("div", { className: "absolute inset-2 bg-[#000000ba] group-hover:flex hidden text-xl items-center justify-center", children: [
@@ -46,7 +46,7 @@ const U = (h) => {
               "span",
               {
                 className: "text-gray-100 hover:text-gray-300 cursor-pointer p-1.5",
-                onClick: () => s(o),
+                onClick: () => l(n),
                 children: /* @__PURE__ */ e(I, {})
               }
             ),
@@ -54,97 +54,96 @@ const U = (h) => {
               "span",
               {
                 className: "text-gray-100 hover:text-gray-300 cursor-pointer p-1.5",
-                onClick: () => u(o),
-                children: /* @__PURE__ */ e(j, {})
+                onClick: () => f(n),
+                children: /* @__PURE__ */ e(w, {})
               }
             )
           ] })
         ]
       },
-      o.id
+      n.id
     )),
     /* @__PURE__ */ a(
-      k,
+      j,
       {
-        isOpen: g,
-        onClose: i,
-        onRequestClose: i,
+        isOpen: r,
+        onClose: g,
+        onRequestClose: g,
         children: [
-          /* @__PURE__ */ e("h5", { className: "mb-4", children: l.name }),
+          /* @__PURE__ */ e("h5", { className: "mb-4", children: i.name }),
           /* @__PURE__ */ e(
             "img",
             {
               className: "w-full",
-              src: l.img,
-              alt: l.name
+              src: i.img,
+              alt: i.name
             }
           )
         ]
       }
     ),
     /* @__PURE__ */ e(
-      b,
+      N,
       {
-        isOpen: r,
+        isOpen: s,
         type: "danger",
         title: "Remove image",
-        onClose: d,
-        onRequestClose: d,
-        onCancel: d,
-        onConfirm: x,
+        onClose: h,
+        onRequestClose: h,
+        onCancel: h,
+        onConfirm: c,
         children: /* @__PURE__ */ e("p", { children: " Are you sure you want to remove this image? " })
       }
     )
   ] });
-}, Q = ({ control: h, errors: p }) => {
-  var g;
-  const m = (t) => {
-    let r = !0;
-    const n = ["image/jpeg", "image/png"], s = 5e5;
-    if (t)
-      for (const i of t)
-        n.includes(i.type) || (r = "Please upload a .jpeg or .png file!"), i.size >= s && (r = "Upload image cannot more then 500kb!");
-    return r;
-  }, l = (t, r = [], n) => {
-    let s = "1-img-0";
-    const i = n.length - 1;
-    if (r.length > 0) {
-      const o = r[r.length - 1].id.split("-"), N = parseInt(o[o.length - 1]) + 1;
-      o.pop(), s = [...o, N].join("-");
+}, K = ({ control: u, errors: d }) => {
+  const p = (r) => {
+    let t = !0;
+    const s = ["image/jpeg", "image/png"], o = 5e5;
+    if (r)
+      for (const l of r)
+        s.includes(l.type) || (t = "Please upload a .jpeg or .png file!"), l.size >= o && (t = "Upload image cannot more then 500kb!");
+    return t;
+  }, i = (r, t = [], s) => {
+    let o = "1-img-0";
+    const l = s.length - 1;
+    if (t.length > 0) {
+      const c = t[t.length - 1].id.split("-"), n = parseInt(c[c.length - 1]) + 1;
+      c.pop(), o = [...c, n].join("-");
     }
-    const u = {
-      id: s,
-      name: n[i].name,
-      img: URL.createObjectURL(n[i])
-    }, d = [...r, u];
-    t(d);
-  }, c = (t, r = [], n) => {
-    let s = D(r);
-    s = s.filter((i) => i.id !== n.id), t(s);
+    const g = {
+      id: o,
+      name: s[l].name,
+      img: URL.createObjectURL(s[l])
+    }, f = [...t, g];
+    r(f);
+  }, m = (r, t = [], s) => {
+    let o = D(t);
+    o = o.filter((l) => l.id !== s.id), r(o);
   };
-  return /* @__PURE__ */ a(L, { children: [
+  return /* @__PURE__ */ a(k, { children: [
     /* @__PURE__ */ e("h4", { className: "mb-2", children: "Product Image" }),
     /* @__PURE__ */ e("p", { children: "Choose a product photo or simply drag and drop up to 5 photos here." }),
     /* @__PURE__ */ e("div", { className: "mt-4", children: /* @__PURE__ */ e(
-      O,
+      L,
       {
-        invalid: !!p.imgList,
-        errorMessage: (g = p.imgList) == null ? void 0 : g.message,
+        invalid: !!d.imgList,
+        errorMessage: d.imgList?.message,
         className: "mb-4",
         children: /* @__PURE__ */ e(
-          w,
+          b,
           {
             name: "imgList",
-            control: h,
-            render: ({ field: t }) => /* @__PURE__ */ e(y, { children: t.value && t.value.length ? /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 gap-2", children: [
+            control: u,
+            render: ({ field: r }) => /* @__PURE__ */ e(y, { children: r.value && r.value.length ? /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 gap-2", children: [
               /* @__PURE__ */ e(
-                U,
+                O,
                 {
-                  imgList: t.value,
-                  onImageDelete: (r) => c(
-                    t.onChange,
-                    t.value,
-                    r
+                  imgList: r.value,
+                  onImageDelete: (t) => m(
+                    r.onChange,
+                    r.value,
+                    t
                   )
                 }
               ),
@@ -153,12 +152,12 @@ const U = (h) => {
                 {
                   draggable: !0,
                   className: "min-h-fit",
-                  beforeUpload: m,
+                  beforeUpload: p,
                   showList: !1,
-                  onChange: (r) => l(
-                    t.onChange,
-                    t.value,
-                    r
+                  onChange: (t) => i(
+                    r.onChange,
+                    r.value,
+                    t
                   ),
                   children: /* @__PURE__ */ a("div", { className: "max-w-full flex flex-col px-4 py-2 justify-center items-center min-h-[130px]", children: [
                     /* @__PURE__ */ e("div", { className: "text-[50px]", children: /* @__PURE__ */ e(v, {}) }),
@@ -177,12 +176,12 @@ const U = (h) => {
               C,
               {
                 draggable: !0,
-                beforeUpload: m,
+                beforeUpload: p,
                 showList: !1,
-                onChange: (r) => l(
-                  t.onChange,
-                  t.value,
-                  r
+                onChange: (t) => i(
+                  r.onChange,
+                  r.value,
+                  t
                 ),
                 children: /* @__PURE__ */ a("div", { className: "max-w-full flex flex-col px-4 py-8 justify-center items-center", children: [
                   /* @__PURE__ */ e("div", { className: "text-[60px]", children: /* @__PURE__ */ e(v, {}) }),
@@ -205,6 +204,6 @@ const U = (h) => {
   ] });
 };
 export {
-  Q as default
+  K as default
 };
 //# sourceMappingURL=ImageSection.js.map

package/dist/@ecme/views/concepts/products/ProductForm/components/ImageSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/products/ProductForm/components/ImageSection.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Card from '@/components/ui/Card'\nimport Upload from '@/components/ui/Upload'\nimport { FormItem } from '@/components/ui/Form'\nimport Dialog from '@/components/ui/Dialog'\nimport ConfirmDialog from '@/components/shared/ConfirmDialog'\nimport { Controller } from 'react-hook-form'\nimport { HiEye, HiTrash } from 'react-icons/hi'\nimport cloneDeep from 'lodash/cloneDeep'\nimport { PiImagesThin } from 'react-icons/pi'\n\nimport type { FormSectionBaseProps } from '../types'\n\ntype ImageSectionProps = FormSectionBaseProps\n\ntype Image = {\n    id: string\n    name: string\n    img: string\n}\n\ntype ImageListProps = {\n    imgList: Image[]\n    onImageDelete: (img: Image) => void\n}\n\nconst ImageList = (props: ImageListProps) => {\n    const { imgList, onImageDelete } = props\n\n    const [selectedImg, setSelectedImg] = useState<Image>({} as Image)\n    const [viewOpen, setViewOpen] = useState(false)\n    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false)\n\n    const onViewOpen = (img: Image) => {\n        setSelectedImg(img)\n        setViewOpen(true)\n    }\n\n    const onDialogClose = () => {\n        setViewOpen(false)\n        setTimeout(() => {\n            setSelectedImg({} as Image)\n        }, 300)\n    }\n\n    const onDeleteConfirmation = (img: Image) => {\n        setSelectedImg(img)\n        setDeleteConfirmationOpen(true)\n    }\n\n    const onDeleteConfirmationClose = () => {\n        setSelectedImg({} as Image)\n        setDeleteConfirmationOpen(false)\n    }\n\n    const onDelete = () => {\n        onImageDelete?.(selectedImg)\n        setDeleteConfirmationOpen(false)\n    }\n\n    return (\n        <>\n            {imgList.map((img) => (\n                <div\n                    key={img.id}\n                    className=\"group relative rounded-xl border border-gray-200 dark:border-gray-600 p-2 flex\"\n                >\n                    <img\n                        className=\"rounded-lg max-h-[140px] mx-auto max-w-full dark:bg-transparent\"\n                        src={img.img}\n                        alt={img.name}\n                    />\n                    <div className=\"absolute inset-2 bg-[#000000ba] group-hover:flex hidden text-xl items-center justify-center\">\n                        <span\n                            className=\"text-gray-100 hover:text-gray-300 cursor-pointer p-1.5\"\n                            onClick={() => onViewOpen(img)}\n                        >\n                            <HiEye />\n                        </span>\n                        <span\n                            className=\"text-gray-100 hover:text-gray-300 cursor-pointer p-1.5\"\n                            onClick={() => onDeleteConfirmation(img)}\n                        >\n                            <HiTrash />\n                        </span>\n                    </div>\n                </div>\n            ))}\n            <Dialog\n                isOpen={viewOpen}\n                onClose={onDialogClose}\n                onRequestClose={onDialogClose}\n            >\n                <h5 className=\"mb-4\">{selectedImg.name}</h5>\n                <img\n                    className=\"w-full\"\n                    src={selectedImg.img}\n                    alt={selectedImg.name}\n                />\n            </Dialog>\n            <ConfirmDialog\n                isOpen={deleteConfirmationOpen}\n                type=\"danger\"\n                title=\"Remove image\"\n                onClose={onDeleteConfirmationClose}\n                onRequestClose={onDeleteConfirmationClose}\n                onCancel={onDeleteConfirmationClose}\n                onConfirm={onDelete}\n            >\n                <p> Are you sure you want to remove this image? </p>\n            </ConfirmDialog>\n        </>\n    )\n}\n\nconst ImageSection = ({ control, errors }: ImageSectionProps) => {\n    const beforeUpload = (file: FileList | null) => {\n        let valid: boolean | string = true\n\n        const allowedFileType = ['image/jpeg', 'image/png']\n        const maxFileSize = 500000\n\n        if (file) {\n            for (const f of file) {\n                if (!allowedFileType.includes(f.type)) {\n                    valid = 'Please upload a .jpeg or .png file!'\n                }\n\n                if (f.size >= maxFileSize) {\n                    valid = 'Upload image cannot more then 500kb!'\n                }\n            }\n        }\n\n        return valid\n    }\n\n    const handleUpload = (\n        onChange: (images: Image[]) => void,\n        originalImageList: Image[] = [],\n        files: File[],\n    ) => {\n        let imageId = '1-img-0'\n        const latestUpload = files.length - 1\n        if (originalImageList.length > 0) {\n            const prevImgId = originalImageList[originalImageList.length - 1].id\n            const splitImgId = prevImgId.split('-')\n            const newIdNumber = parseInt(splitImgId[splitImgId.length - 1]) + 1\n            splitImgId.pop()\n            const newIdArr = [...splitImgId, ...[newIdNumber]]\n            imageId = newIdArr.join('-')\n        }\n        const image = {\n            id: imageId,\n            name: files[latestUpload].name,\n            img: URL.createObjectURL(files[latestUpload]),\n        }\n        const imageList = [...originalImageList, ...[image]]\n        onChange(imageList)\n    }\n\n    const handleImageDelete = (\n        onChange: (images: Image[]) => void,\n        originalImageList: Image[] = [],\n        deletedImg: Image,\n    ) => {\n        let imgList = cloneDeep(originalImageList)\n        imgList = imgList.filter((img) => img.id !== deletedImg.id)\n        onChange(imgList)\n    }\n\n    return (\n        <Card>\n            <h4 className=\"mb-2\">Product Image</h4>\n            <p>\n                Choose a product photo or simply drag and drop up to 5 photos\n                here.\n            </p>\n            <div className=\"mt-4\">\n                <FormItem\n                    invalid={Boolean(errors.imgList)}\n                    errorMessage={errors.imgList?.message}\n                    className=\"mb-4\"\n                >\n                    <Controller\n                        name=\"imgList\"\n                        control={control}\n                        render={({ field }) => (\n                            <>\n                                {field.value && field.value.length ? (\n                                    <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 gap-2\">\n                                        <ImageList\n                                            imgList={field.value}\n                                            onImageDelete={(img: Image) =>\n                                                handleImageDelete(\n                                                    field.onChange,\n                                                    field.value,\n                                                    img,\n                                                )\n                                            }\n                                        />\n                                        <Upload\n                                            draggable\n                                            className=\"min-h-fit\"\n                                            beforeUpload={beforeUpload}\n                                            showList={false}\n                                            onChange={(files) =>\n                                                handleUpload(\n                                                    field.onChange,\n                                                    field.value,\n                                                    files,\n                                                )\n                                            }\n                                        >\n                                            <div className=\"max-w-full flex flex-col px-4 py-2 justify-center items-center min-h-[130px]\">\n                                                <div className=\"text-[50px]\">\n                                                    <PiImagesThin />\n                                                </div>\n                                                <p className=\"text-center mt-1 text-xs\">\n                                                    <span className=\"text-gray-800 dark:text-white\">\n                                                        Drop your image here, or{' '}\n                                                        {''}\n                                                    </span>\n                                                    <span className=\"text-primary\">\n                                                        Click to browse\n                                                    </span>\n                                                </p>\n                                            </div>\n                                        </Upload>\n                                    </div>\n                                ) : (\n                                    <Upload\n                                        draggable\n                                        beforeUpload={beforeUpload}\n                                        showList={false}\n                                        onChange={(files) =>\n                                            handleUpload(\n                                                field.onChange,\n                                                field.value,\n                                                files,\n                                            )\n                                        }\n                                    >\n                                        <div className=\"max-w-full flex flex-col px-4 py-8 justify-center items-center\">\n                                            <div className=\"text-[60px]\">\n                                                <PiImagesThin />\n                                            </div>\n                                            <p className=\"flex flex-col items-center mt-2\">\n                                                <span className=\"text-gray-800 dark:text-white\">\n                                                    Drop your image here, or{' '}\n                                                    {''}\n                                                </span>\n                                                <span className=\"text-primary\">\n                                                    Click to browse\n                                                </span>\n                                            </p>\n                                        </div>\n                                    </Upload>\n                                )}\n                            </>\n                        )}\n                    />\n                </FormItem>\n            </div>\n            <p>\n                Image formats: .jpg, .jpeg, .png, preferred size: 1:1, file size\n                is restricted to a maximum of 500kb.\n            </p>\n        </Card>\n    )\n}\n\nexport default ImageSection\n"],"names":["ImageList","props","imgList","onImageDelete","selectedImg","setSelectedImg","useState","viewOpen","setViewOpen","deleteConfirmationOpen","setDeleteConfirmationOpen","onViewOpen","img","onDialogClose","onDeleteConfirmation","onDeleteConfirmationClose","onDelete","jsxs","Fragment","jsx","HiEye","HiTrash","Dialog","ConfirmDialog","ImageSection","control","errors","beforeUpload","file","valid","allowedFileType","maxFileSize","f","handleUpload","onChange","originalImageList","files","imageId","latestUpload","splitImgId","newIdNumber","image","imageList","handleImageDelete","deletedImg","cloneDeep","Card","FormItem","_a","Controller","field","Upload","PiImagesThin"],"mappings":"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"}
+{"version":3,"file":"ImageSection.js","sources":["../../../../../../../lib/@ecme/views/concepts/products/ProductForm/components/ImageSection.tsx"],"sourcesContent":["import { useState } from 'react'\nimport Card from '@/components/ui/Card'\nimport Upload from '@/components/ui/Upload'\nimport { FormItem } from '@/components/ui/Form'\nimport Dialog from '@/components/ui/Dialog'\nimport ConfirmDialog from '@/components/shared/ConfirmDialog'\nimport { Controller } from 'react-hook-form'\nimport { HiEye, HiTrash } from 'react-icons/hi'\nimport cloneDeep from 'lodash/cloneDeep'\nimport { PiImagesThin } from 'react-icons/pi'\n\nimport type { FormSectionBaseProps } from '../types'\n\ntype ImageSectionProps = FormSectionBaseProps\n\ntype Image = {\n    id: string\n    name: string\n    img: string\n}\n\ntype ImageListProps = {\n    imgList: Image[]\n    onImageDelete: (img: Image) => void\n}\n\nconst ImageList = (props: ImageListProps) => {\n    const { imgList, onImageDelete } = props\n\n    const [selectedImg, setSelectedImg] = useState<Image>({} as Image)\n    const [viewOpen, setViewOpen] = useState(false)\n    const [deleteConfirmationOpen, setDeleteConfirmationOpen] = useState(false)\n\n    const onViewOpen = (img: Image) => {\n        setSelectedImg(img)\n        setViewOpen(true)\n    }\n\n    const onDialogClose = () => {\n        setViewOpen(false)\n        setTimeout(() => {\n            setSelectedImg({} as Image)\n        }, 300)\n    }\n\n    const onDeleteConfirmation = (img: Image) => {\n        setSelectedImg(img)\n        setDeleteConfirmationOpen(true)\n    }\n\n    const onDeleteConfirmationClose = () => {\n        setSelectedImg({} as Image)\n        setDeleteConfirmationOpen(false)\n    }\n\n    const onDelete = () => {\n        onImageDelete?.(selectedImg)\n        setDeleteConfirmationOpen(false)\n    }\n\n    return (\n        <>\n            {imgList.map((img) => (\n                <div\n                    key={img.id}\n                    className=\"group relative rounded-xl border border-gray-200 dark:border-gray-600 p-2 flex\"\n                >\n                    <img\n                        className=\"rounded-lg max-h-[140px] mx-auto max-w-full dark:bg-transparent\"\n                        src={img.img}\n                        alt={img.name}\n                    />\n                    <div className=\"absolute inset-2 bg-[#000000ba] group-hover:flex hidden text-xl items-center justify-center\">\n                        <span\n                            className=\"text-gray-100 hover:text-gray-300 cursor-pointer p-1.5\"\n                            onClick={() => onViewOpen(img)}\n                        >\n                            <HiEye />\n                        </span>\n                        <span\n                            className=\"text-gray-100 hover:text-gray-300 cursor-pointer p-1.5\"\n                            onClick={() => onDeleteConfirmation(img)}\n                        >\n                            <HiTrash />\n                        </span>\n                    </div>\n                </div>\n            ))}\n            <Dialog\n                isOpen={viewOpen}\n                onClose={onDialogClose}\n                onRequestClose={onDialogClose}\n            >\n                <h5 className=\"mb-4\">{selectedImg.name}</h5>\n                <img\n                    className=\"w-full\"\n                    src={selectedImg.img}\n                    alt={selectedImg.name}\n                />\n            </Dialog>\n            <ConfirmDialog\n                isOpen={deleteConfirmationOpen}\n                type=\"danger\"\n                title=\"Remove image\"\n                onClose={onDeleteConfirmationClose}\n                onRequestClose={onDeleteConfirmationClose}\n                onCancel={onDeleteConfirmationClose}\n                onConfirm={onDelete}\n            >\n                <p> Are you sure you want to remove this image? </p>\n            </ConfirmDialog>\n        </>\n    )\n}\n\nconst ImageSection = ({ control, errors }: ImageSectionProps) => {\n    const beforeUpload = (file: FileList | null) => {\n        let valid: boolean | string = true\n\n        const allowedFileType = ['image/jpeg', 'image/png']\n        const maxFileSize = 500000\n\n        if (file) {\n            for (const f of file) {\n                if (!allowedFileType.includes(f.type)) {\n                    valid = 'Please upload a .jpeg or .png file!'\n                }\n\n                if (f.size >= maxFileSize) {\n                    valid = 'Upload image cannot more then 500kb!'\n                }\n            }\n        }\n\n        return valid\n    }\n\n    const handleUpload = (\n        onChange: (images: Image[]) => void,\n        originalImageList: Image[] = [],\n        files: File[],\n    ) => {\n        let imageId = '1-img-0'\n        const latestUpload = files.length - 1\n        if (originalImageList.length > 0) {\n            const prevImgId = originalImageList[originalImageList.length - 1].id\n            const splitImgId = prevImgId.split('-')\n            const newIdNumber = parseInt(splitImgId[splitImgId.length - 1]) + 1\n            splitImgId.pop()\n            const newIdArr = [...splitImgId, ...[newIdNumber]]\n            imageId = newIdArr.join('-')\n        }\n        const image = {\n            id: imageId,\n            name: files[latestUpload].name,\n            img: URL.createObjectURL(files[latestUpload]),\n        }\n        const imageList = [...originalImageList, ...[image]]\n        onChange(imageList)\n    }\n\n    const handleImageDelete = (\n        onChange: (images: Image[]) => void,\n        originalImageList: Image[] = [],\n        deletedImg: Image,\n    ) => {\n        let imgList = cloneDeep(originalImageList)\n        imgList = imgList.filter((img) => img.id !== deletedImg.id)\n        onChange(imgList)\n    }\n\n    return (\n        <Card>\n            <h4 className=\"mb-2\">Product Image</h4>\n            <p>\n                Choose a product photo or simply drag and drop up to 5 photos\n                here.\n            </p>\n            <div className=\"mt-4\">\n                <FormItem\n                    invalid={Boolean(errors.imgList)}\n                    errorMessage={errors.imgList?.message}\n                    className=\"mb-4\"\n                >\n                    <Controller\n                        name=\"imgList\"\n                        control={control}\n                        render={({ field }) => (\n                            <>\n                                {field.value && field.value.length ? (\n                                    <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 gap-2\">\n                                        <ImageList\n                                            imgList={field.value}\n                                            onImageDelete={(img: Image) =>\n                                                handleImageDelete(\n                                                    field.onChange,\n                                                    field.value,\n                                                    img,\n                                                )\n                                            }\n                                        />\n                                        <Upload\n                                            draggable\n                                            className=\"min-h-fit\"\n                                            beforeUpload={beforeUpload}\n                                            showList={false}\n                                            onChange={(files) =>\n                                                handleUpload(\n                                                    field.onChange,\n                                                    field.value,\n                                                    files,\n                                                )\n                                            }\n                                        >\n                                            <div className=\"max-w-full flex flex-col px-4 py-2 justify-center items-center min-h-[130px]\">\n                                                <div className=\"text-[50px]\">\n                                                    <PiImagesThin />\n                                                </div>\n                                                <p className=\"text-center mt-1 text-xs\">\n                                                    <span className=\"text-gray-800 dark:text-white\">\n                                                        Drop your image here, or{' '}\n                                                        {''}\n                                                    </span>\n                                                    <span className=\"text-primary\">\n                                                        Click to browse\n                                                    </span>\n                                                </p>\n                                            </div>\n                                        </Upload>\n                                    </div>\n                                ) : (\n                                    <Upload\n                                        draggable\n                                        beforeUpload={beforeUpload}\n                                        showList={false}\n                                        onChange={(files) =>\n                                            handleUpload(\n                                                field.onChange,\n                                                field.value,\n                                                files,\n                                            )\n                                        }\n                                    >\n                                        <div className=\"max-w-full flex flex-col px-4 py-8 justify-center items-center\">\n                                            <div className=\"text-[60px]\">\n                                                <PiImagesThin />\n                                            </div>\n                                            <p className=\"flex flex-col items-center mt-2\">\n                                                <span className=\"text-gray-800 dark:text-white\">\n                                                    Drop your image here, or{' '}\n                                                    {''}\n                                                </span>\n                                                <span className=\"text-primary\">\n                                                    Click to browse\n                                                </span>\n                                            </p>\n                                        </div>\n                                    </Upload>\n                                )}\n                            </>\n                        )}\n                    />\n                </FormItem>\n            </div>\n            <p>\n                Image formats: .jpg, .jpeg, .png, preferred size: 1:1, file size\n                is restricted to a maximum of 500kb.\n            </p>\n        </Card>\n    )\n}\n\nexport default ImageSection\n"],"names":["ImageList","props","imgList","onImageDelete","selectedImg","setSelectedImg","useState","viewOpen","setViewOpen","deleteConfirmationOpen","setDeleteConfirmationOpen","onViewOpen","img","onDialogClose","onDeleteConfirmation","onDeleteConfirmationClose","onDelete","jsxs","Fragment","jsx","HiEye","HiTrash","Dialog","ConfirmDialog","ImageSection","control","errors","beforeUpload","file","valid","allowedFileType","maxFileSize","f","handleUpload","onChange","originalImageList","files","imageId","latestUpload","splitImgId","newIdNumber","image","imageList","handleImageDelete","deletedImg","cloneDeep","Card","FormItem","Controller","field","Upload","PiImagesThin"],"mappings":"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"}

package/dist/@ecme/views/concepts/products/ProductForm/components/PricingSection.js

@@ -3,131 +3,128 @@ import "../../../../../components/ui/Card/index.js";
 import "../../../../../components/ui/Form/index.js";
 import l from "../../../../../components/shared/NumericInput.js";
 import { Controller as r } from "react-hook-form";
-import h from "../../../../../components/ui/Card/Card.js";
+import c from "../../../../../components/ui/Card/Card.js";
 import n from "../../../../../components/ui/Form/FormItem.js";
-const B = ({ control: o, errors: t }) => {
-  var u, m, c, s;
-  return /* @__PURE__ */ i(h, { children: [
-    /* @__PURE__ */ e("h4", { className: "mb-6", children: "Pricing" }),
-    /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e(
-        n,
-        {
-          label: "Price",
-          invalid: !!t.price,
-          errorMessage: (u = t.price) == null ? void 0 : u.message,
-          children: /* @__PURE__ */ e(
-            r,
-            {
-              name: "price",
-              control: o,
-              render: ({ field: a }) => /* @__PURE__ */ e(
-                l,
-                {
-                  thousandSeparator: !0,
-                  type: "text",
-                  inputPrefix: "$",
-                  autoComplete: "off",
-                  placeholder: "0.00",
-                  value: a.value,
-                  onChange: a.onChange
-                }
-              )
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ e(
-        n,
-        {
-          label: "Cost price",
-          invalid: !!t.costPerItem,
-          errorMessage: (m = t.costPerItem) == null ? void 0 : m.message,
-          children: /* @__PURE__ */ e(
-            r,
-            {
-              name: "costPerItem",
-              control: o,
-              render: ({ field: a }) => /* @__PURE__ */ e(
-                l,
-                {
-                  thousandSeparator: !0,
-                  type: "text",
-                  inputPrefix: "$",
-                  autoComplete: "off",
-                  placeholder: "0.00",
-                  value: a.value,
-                  onChange: a.onChange
-                }
-              )
-            }
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ i("div", { className: "md:flex gap-4", children: [
-      /* @__PURE__ */ e(
-        n,
-        {
-          label: "Bulk discount price",
-          invalid: !!t.bulkDiscountPrice,
-          errorMessage: (c = t.bulkDiscountPrice) == null ? void 0 : c.message,
-          className: "w-full",
-          children: /* @__PURE__ */ e(
-            r,
-            {
-              name: "bulkDiscountPrice",
-              control: o,
-              render: ({ field: a }) => /* @__PURE__ */ e(
-                l,
-                {
-                  thousandSeparator: !0,
-                  type: "text",
-                  inputPrefix: "$",
-                  autoComplete: "off",
-                  placeholder: "0.00",
-                  value: a.value,
-                  onChange: a.onChange
-                }
-              )
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ e(
-        n,
-        {
-          label: "Tax rate(%)",
-          invalid: !!t.taxRate,
-          errorMessage: (s = t.taxRate) == null ? void 0 : s.message,
-          className: "w-full",
-          children: /* @__PURE__ */ e(
-            r,
-            {
-              name: "taxRate",
-              control: o,
-              render: ({ field: a }) => /* @__PURE__ */ e(
-                l,
-                {
-                  type: "text",
-                  autoComplete: "off",
-                  placeholder: "0",
-                  value: a.value,
-                  isAllowed: (p) => {
-                    const { floatValue: d } = p;
-                    return (d || 0) <= 100;
-                  },
-                  onChange: a.onChange
-                }
-              )
-            }
-          )
-        }
-      )
-    ] })
-  ] });
-};
+const C = ({ control: o, errors: t }) => /* @__PURE__ */ i(c, { children: [
+  /* @__PURE__ */ e("h4", { className: "mb-6", children: "Pricing" }),
+  /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ e(
+      n,
+      {
+        label: "Price",
+        invalid: !!t.price,
+        errorMessage: t.price?.message,
+        children: /* @__PURE__ */ e(
+          r,
+          {
+            name: "price",
+            control: o,
+            render: ({ field: a }) => /* @__PURE__ */ e(
+              l,
+              {
+                thousandSeparator: !0,
+                type: "text",
+                inputPrefix: "$",
+                autoComplete: "off",
+                placeholder: "0.00",
+                value: a.value,
+                onChange: a.onChange
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      n,
+      {
+        label: "Cost price",
+        invalid: !!t.costPerItem,
+        errorMessage: t.costPerItem?.message,
+        children: /* @__PURE__ */ e(
+          r,
+          {
+            name: "costPerItem",
+            control: o,
+            render: ({ field: a }) => /* @__PURE__ */ e(
+              l,
+              {
+                thousandSeparator: !0,
+                type: "text",
+                inputPrefix: "$",
+                autoComplete: "off",
+                placeholder: "0.00",
+                value: a.value,
+                onChange: a.onChange
+              }
+            )
+          }
+        )
+      }
+    )
+  ] }),
+  /* @__PURE__ */ i("div", { className: "md:flex gap-4", children: [
+    /* @__PURE__ */ e(
+      n,
+      {
+        label: "Bulk discount price",
+        invalid: !!t.bulkDiscountPrice,
+        errorMessage: t.bulkDiscountPrice?.message,
+        className: "w-full",
+        children: /* @__PURE__ */ e(
+          r,
+          {
+            name: "bulkDiscountPrice",
+            control: o,
+            render: ({ field: a }) => /* @__PURE__ */ e(
+              l,
+              {
+                thousandSeparator: !0,
+                type: "text",
+                inputPrefix: "$",
+                autoComplete: "off",
+                placeholder: "0.00",
+                value: a.value,
+                onChange: a.onChange
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      n,
+      {
+        label: "Tax rate(%)",
+        invalid: !!t.taxRate,
+        errorMessage: t.taxRate?.message,
+        className: "w-full",
+        children: /* @__PURE__ */ e(
+          r,
+          {
+            name: "taxRate",
+            control: o,
+            render: ({ field: a }) => /* @__PURE__ */ e(
+              l,
+              {
+                type: "text",
+                autoComplete: "off",
+                placeholder: "0",
+                value: a.value,
+                isAllowed: (u) => {
+                  const { floatValue: m } = u;
+                  return (m || 0) <= 100;
+                },
+                onChange: a.onChange
+              }
+            )
+          }
+        )
+      }
+    )
+  ] })
+] });
 export {
-  B as default
+  C as default
 };
 //# sourceMappingURL=PricingSection.js.map