umwd-components 0.1.737 → 0.1.738

package/dist/esm/_virtual/index3.js

@@ -4,6 +4,6 @@
  * @license MIT
  */
   
-var safeBuffer = {exports: {}};
+var reactIs = {exports: {}};
 
-export { safeBuffer as __module };
+export { reactIs as __module };

package/dist/esm/_virtual/index4.js

@@ -4,6 +4,6 @@
  * @license MIT
  */
   
-var reactIs = {exports: {}};
+var safeBuffer = {exports: {}};
 
-export { reactIs as __module };
+export { safeBuffer as __module };

package/dist/esm/node_modules/prop-types/node_modules/react-is/index.js

@@ -4,7 +4,7 @@
  * @license MIT
  */
   
-import { __module as reactIs } from '../../../../_virtual/index4.js';
+import { __module as reactIs } from '../../../../_virtual/index3.js';
 import { __require as requireReactIs_production_min } from './cjs/react-is.production.min.js';
 import { __require as requireReactIs_development } from './cjs/react-is.development.js';
 

package/dist/esm/node_modules/safe-buffer/index.js

@@ -4,7 +4,7 @@
  * @license MIT
  */
   
-import { __module as safeBuffer } from '../../_virtual/index3.js';
+import { __module as safeBuffer } from '../../_virtual/index4.js';
 import require$$0 from 'buffer';
 
 /*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */

package/dist/esm/src/components/common/csv/CsvDownloader.js

@@ -183,18 +183,18 @@ function CsvDownloader(props) {
             }, {}),
         }, { encodeValuesOnly: true }));
     }, [attributes, relations, startDate, endDate, dateType]);
-    return (jsx(Paper, { sx: { width: "100%", p: 2 }, children: jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsxs(Grid, { container: true, spacing: 2, children: [open && (jsxs(Fragment, { children: [jsxs(Grid, { item: true, xs: 12, children: [jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(IconButton, { "aria-label": "expand row", size: "small", onClick: () => setOpen(!open), children: open ? jsx(KeyboardArrowUpIcon, {}) : jsx(KeyboardArrowDownIcon, {}) }) }), jsx(Divider, {})] }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", children: "Attributes" }), jsx(Checkbox, { checked: defaultAttributes.length === attributes.length, indeterminate: defaultAttributes.length !== attributes.length &&
-                                                attributes.length > 0, sx: { "& .MuiSvgIcon-root": { fontSize: 28 } }, onChange: selectAllAttributes })] }) }), defaultAttributes.map((attribute) => (jsx(Grid, { item: true, xs: 4, children: jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: attribute.name, checked: attributes.includes(attribute.name), onChange: handleAttributeChange }), jsx(Typography, { children: attribute.label })] }) }, attribute.name))), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", children: "Relations" }), jsx(Checkbox, { checked: defaultRelations.length === relations.length, indeterminate: defaultRelations.length !== relations.length &&
+    return (jsx(Paper, { sx: { width: "100%", p: 2 }, children: jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsxs(Grid, { container: true, spacing: 2, children: [open && (jsxs(Fragment, { children: [jsxs(Grid, { size: 12, children: [jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(IconButton, { "aria-label": "expand row", size: "small", onClick: () => setOpen(!open), children: open ? jsx(KeyboardArrowUpIcon, {}) : jsx(KeyboardArrowDownIcon, {}) }) }), jsx(Divider, {})] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", children: "Attributes" }), jsx(Checkbox, { checked: defaultAttributes.length === attributes.length, indeterminate: defaultAttributes.length !== attributes.length &&
+                                                attributes.length > 0, sx: { "& .MuiSvgIcon-root": { fontSize: 28 } }, onChange: selectAllAttributes })] }) }), defaultAttributes.map((attribute) => (jsx(Grid, { size: 4, children: jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: attribute.name, checked: attributes.includes(attribute.name), onChange: handleAttributeChange }), jsx(Typography, { children: attribute.label })] }) }, attribute.name))), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", children: "Relations" }), jsx(Checkbox, { checked: defaultRelations.length === relations.length, indeterminate: defaultRelations.length !== relations.length &&
                                                 relations.length > 0, sx: { "& .MuiSvgIcon-root": { fontSize: 28 } }, onChange: selectAllRelations })] }) }), defaultRelations.map((relation) => {
                                 const isOpen = openRelations.includes(relation.name);
                                 const relationChecked = relations.some((rel) => rel.name === relation.name);
                                 const relationIndeterminate = relationChecked &&
                                     relations.some((rel) => rel.name === relation.name &&
                                         rel.attributes.length !== relation.attributes.length);
-                                return (jsxs(Grid, { item: true, xs: 12, children: [jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: relation.name, checked: relationChecked, indeterminate: relationIndeterminate, onChange: handleRelationChange }), jsx(Typography, { children: relation.label }), jsx(IconButton, { name: relation.name, onClick: () => toggleRelationOpen(relation.name), children: isOpen ? (jsx(KeyboardArrowDownIcon, {})) : (jsx(KeyboardArrowUpIcon, {})) })] }), jsx(Divider, {}), jsx(Collapse, { in: isOpen, children: jsx(Grid, { container: true, sx: { pl: 2 }, children: relation.attributes.map((attribute) => (jsx(Grid, { item: true, xs: 3, children: jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: `${attribute.name}|${relation.name}`, checked: relations.some((rel) => rel.name === relation.name &&
+                                return (jsxs(Grid, { size: 12, children: [jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: relation.name, checked: relationChecked, indeterminate: relationIndeterminate, onChange: handleRelationChange }), jsx(Typography, { children: relation.label }), jsx(IconButton, { name: relation.name, onClick: () => toggleRelationOpen(relation.name), children: isOpen ? (jsx(KeyboardArrowDownIcon, {})) : (jsx(KeyboardArrowUpIcon, {})) })] }), jsx(Divider, {}), jsx(Collapse, { in: isOpen, children: jsx(Grid, { container: true, sx: { pl: 2 }, children: relation.attributes.map((attribute) => (jsx(Grid, { size: 3, children: jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: `${attribute.name}|${relation.name}`, checked: relations.some((rel) => rel.name === relation.name &&
                                                                     rel.attributes.includes(attribute.name)), onChange: handleRelationAttributeChange, size: "small" }), jsx(Typography, { variant: "body2", children: attribute.label })] }) }, attribute.name))) }) })] }, relation.name));
-                            }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", children: "Creation, Publication and Update" }), jsx(Checkbox, { checked: defaultStrapiAttributes.length === strapiAttributes.length, indeterminate: defaultStrapiAttributes.length !==
-                                                strapiAttributes.length && strapiAttributes.length > 0, sx: { "& .MuiSvgIcon-root": { fontSize: 28 } }, onChange: selectAllStrapiAttributes })] }) }), defaultStrapiAttributes.map((strapi) => (jsx(Grid, { item: true, xs: 4, children: jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: strapi.name, checked: strapiAttributes.includes(strapi.name), onChange: handleStrapiAttributeChange }), jsx(Typography, { children: strapi.label })] }) }, strapi.name))), jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h6", children: "Select date range" }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Autocomplete, { value: dateType, options: dateFieldOptions, multiple: false, onChange: (e, newValue) => setDateType(newValue), renderInput: (params) => (jsx(TextField, { ...params, label: "Date Type" })), sx: { width: 300 }, disableClearable: true }), jsx(DatePicker, { value: startDate, label: "start date", onChange: (value) => value && setStartDate(value) }), jsx(DatePicker, { value: endDate, label: "end date", onChange: (value) => value && setEndDate(value) })] }) })] })), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", spacing: 2, sx: { justifyContent: "space-between" }, children: [jsxs(Fragment$1, { children: [jsx(Button, { variant: "contained", disabled: attributes.length === 0 && relations.length === 0, onClick: exportCSV, children: "Export CSV" }), csvData && (jsx(reactCsv.CSVLink, { data: csvData, filename: `${dayjs(startDate).format("DD-MM-YYYY")}_${dayjs(endDate).format("DD-MM-YYYY")}/${dateType}_${entityCode}-export.csv`, ref: csvLinkRef }))] }), jsx(IconButton, { "aria-label": "expand row", size: "small", onClick: () => setOpen(!open), children: open ? jsx(KeyboardArrowUpIcon, {}) : jsx(KeyboardArrowDownIcon, {}) })] }) })] }) }) }));
+                            }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h6", children: "Creation, Publication and Update" }), jsx(Checkbox, { checked: defaultStrapiAttributes.length === strapiAttributes.length, indeterminate: defaultStrapiAttributes.length !==
+                                                strapiAttributes.length && strapiAttributes.length > 0, sx: { "& .MuiSvgIcon-root": { fontSize: 28 } }, onChange: selectAllStrapiAttributes })] }) }), defaultStrapiAttributes.map((strapi) => (jsx(Grid, { size: 4, children: jsxs(Stack, { spacing: 1, direction: "row", sx: { alignItems: "center" }, children: [jsx(Checkbox, { name: strapi.name, checked: strapiAttributes.includes(strapi.name), onChange: handleStrapiAttributeChange }), jsx(Typography, { children: strapi.label })] }) }, strapi.name))), jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h6", children: "Select date range" }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Autocomplete, { value: dateType, options: dateFieldOptions, multiple: false, onChange: (e, newValue) => setDateType(newValue), renderInput: (params) => (jsx(TextField, { ...params, label: "Date Type" })), sx: { width: 300 }, disableClearable: true }), jsx(DatePicker, { value: startDate, label: "start date", onChange: (value) => value && setStartDate(value) }), jsx(DatePicker, { value: endDate, label: "end date", onChange: (value) => value && setEndDate(value) })] }) })] })), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", spacing: 2, sx: { justifyContent: "space-between" }, children: [jsxs(Fragment$1, { children: [jsx(Button, { variant: "contained", disabled: attributes.length === 0 && relations.length === 0, onClick: exportCSV, children: "Export CSV" }), csvData && (jsx(reactCsv.CSVLink, { data: csvData, filename: `${dayjs(startDate).format("DD-MM-YYYY")}_${dayjs(endDate).format("DD-MM-YYYY")}/${dateType}_${entityCode}-export.csv`, ref: csvLinkRef }))] }), jsx(IconButton, { "aria-label": "expand row", size: "small", onClick: () => setOpen(!open), children: open ? jsx(KeyboardArrowUpIcon, {}) : jsx(KeyboardArrowDownIcon, {}) })] }) })] }) }) }));
 }
 
 export { CsvDownloader as default };

package/dist/esm/src/components/common/media/MediaGrid.js

@@ -24,7 +24,7 @@ function MediaGrid({ mediaArray, selected = [], handleSelect, }) {
     };
     return (jsx(Grid, { container: true, spacing: 2, sx: { transform: "translateX(-1rem)" }, children: mediaArray?.length > 0 &&
             mediaArray.map((item, index) => {
-                return (jsxs(Fragment, { children: [jsx(EditMediaDialog, { open: openDialog && openItem === index, handleClose: handleClose, data: item }), jsx(Grid, { item: true, xs: 3, children: jsx(MediaItem, { mediaItem: item, isSelected: selected.findIndex((select) => select.id === item.id) !== -1, onClick: handleSelect
+                return (jsxs(Fragment, { children: [jsx(EditMediaDialog, { open: openDialog && openItem === index, handleClose: handleClose, data: item }), jsx(Grid, { size: 3, children: jsx(MediaItem, { mediaItem: item, isSelected: selected.findIndex((select) => select.id === item.id) !== -1, onClick: handleSelect
                                     ? () => handleSelect(item)
                                     : () => handleButtonClick(index) }) })] }, item.id));
             }) }));

package/dist/esm/src/components/common/media/UploadMediaForm.js

@@ -40,9 +40,19 @@ function UploadMediaForm({ reference, refID, field, multiple = true, accept = "i
                         border: "1px dashed white",
                         minHeight: "100px",
                     }, children: accept === undefined || accept === "image/*" ? (jsx(Grid, { container: true, children: filePreviews.map((image, index) => {
-                            return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 2, children: jsx("img", { src: image.url, alt: image.name, style: { width: "100px" } }, index) }, index));
+                            return (jsx(Grid, { size: {
+                                    xs: 12,
+                                    sm: 6,
+                                    md: 4,
+                                    lg: 2
+                                }, children: jsx("img", { src: image.url, alt: image.name, style: { width: "100px" } }, index) }, index));
                         }) })) : (jsx(Grid, { container: true, children: filePreviews.map((file, index) => {
-                            return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 2, children: jsx(Typography, { children: file.name }) }, index));
+                            return (jsx(Grid, { size: {
+                                    xs: 12,
+                                    sm: 6,
+                                    md: 4,
+                                    lg: 2
+                                }, children: jsx(Typography, { children: file.name }) }, index));
                         }) })) })) : (jsx(Box, { onClick: () => fileInput.current?.click(), sx: {
                         p: 2,
                         width: "100%",

package/dist/esm/src/components/e-commerce/cart/CartDisplay.js

@@ -22,7 +22,7 @@ function CartDisplay({ data }) {
     if (!isClient) {
         return jsx(CircularProgress, {});
     }
-    return (jsxs(Grid, { container: true, spacing: 2, sx: { py: 3, minHeight: "60vh" }, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h4", align: "center", component: "h1", children: "My cart" }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Paper, { sx: { width: "100%", p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(CartSummary, {}), state.items.length > 0 && (jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555" }, children: "Total excl. VAT" }), jsxs(Typography, { sx: { width: "30%", color: "#555" }, align: "right", children: ["\u20AC ", state.totalExVAT.toFixed(2)] })] }), jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555" }, children: "Total VAT" }), jsxs(Typography, { sx: { width: "30%", color: "#555" }, align: "right", children: ["\u20AC ", state.totalVAT.toFixed(2)] })] }), jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555", fontWeight: 600 }, children: "Total" }), jsxs(Typography, { sx: { width: "30%", color: "#555", fontWeight: 600 }, align: "right", children: ["\u20AC ", state.totalInclVAT.toFixed(2)] })] })] })), jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Link, { href: shopUrl, legacyBehavior: true, children: jsx(Button, { variant: "outlined", children: "Continue shopping" }) }), state.items.length > 0 && (jsx(Link, { href: checkoutUrl, legacyBehavior: true, children: jsx(Button, { variant: "contained", children: "Check Out" }) }))] })] }) }) })] }));
+    return (jsxs(Grid, { container: true, spacing: 2, sx: { py: 3, minHeight: "60vh" }, children: [jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h4", align: "center", component: "h1", children: "My cart" }) }), jsx(Grid, { size: 12, children: jsx(Paper, { sx: { width: "100%", p: 2 }, children: jsxs(Stack, { spacing: 2, children: [jsx(CartSummary, {}), state.items.length > 0 && (jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555" }, children: "Total excl. VAT" }), jsxs(Typography, { sx: { width: "30%", color: "#555" }, align: "right", children: ["\u20AC ", state.totalExVAT.toFixed(2)] })] }), jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555" }, children: "Total VAT" }), jsxs(Typography, { sx: { width: "30%", color: "#555" }, align: "right", children: ["\u20AC ", state.totalVAT.toFixed(2)] })] }), jsxs(Stack, { direction: "row", children: [jsx(Typography, { sx: { width: "10%" } }), jsx(Typography, { sx: { width: "60%", color: "#555", fontWeight: 600 }, children: "Total" }), jsxs(Typography, { sx: { width: "30%", color: "#555", fontWeight: 600 }, align: "right", children: ["\u20AC ", state.totalInclVAT.toFixed(2)] })] })] })), jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Link, { href: shopUrl, legacyBehavior: true, children: jsx(Button, { variant: "outlined", children: "Continue shopping" }) }), state.items.length > 0 && (jsx(Link, { href: checkoutUrl, legacyBehavior: true, children: jsx(Button, { variant: "contained", children: "Check Out" }) }))] })] }) }) })] }));
 }
 
 export { CartDisplay as default };

package/dist/esm/src/components/e-commerce/categories/AddCategoryForm.js

@@ -50,7 +50,7 @@ function AddCategoryForm({ productNamesArray, revalidateCallback, sx, handleClos
             });
         }
     }, [formState?.strapiErrors]);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Add Category" }), jsx(Typography, { variant: "body2", children: "Create a new category for your products. You can add products to this category later." })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title" }), jsx(MarkdownEditor, { name: "description", label: "Description" })] }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArray, currentValue: [] })] }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Create category", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Add Category" }), jsx(Typography, { variant: "body2", children: "Create a new category for your products. You can add products to this category later." })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title" }), jsx(MarkdownEditor, { name: "description", label: "Description" })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArray, currentValue: [] })] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Create category", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
 }
 
 export { AddCategoryForm };

package/dist/esm/src/components/e-commerce/categories/EditCategoryForm.js

@@ -52,7 +52,7 @@ function EditCategoryForm({ data, revalidateCallback, handleClose, productNamesA
             });
         }
     }, [formState?.strapiErrors]);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Edit Category" }), jsx(Typography, { variant: "body2", children: "Edit the category for your products. You can add products to this category later." })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: title }), jsx(MarkdownEditor, { name: "description", label: "Description", defaultValue: description })] }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArray, currentValue: [...initialProducts.map((prod) => prod.documentId)] })] }), jsxs(Grid, { item: true, xs: 12, children: [" ", jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Update category", loadingText: "Loading...", variant: "contained" })] })] })] }) }) }));
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Edit Category" }), jsx(Typography, { variant: "body2", children: "Edit the category for your products. You can add products to this category later." })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: title }), jsx(MarkdownEditor, { name: "description", label: "Description", defaultValue: description })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArray, currentValue: [...initialProducts.map((prod) => prod.documentId)] })] }), jsxs(Grid, { size: 12, children: [" ", jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Update category", loadingText: "Loading...", variant: "contained" })] })] })] }) }) }));
 }
 
 export { EditCategoryForm };

package/dist/esm/src/components/e-commerce/checkout/CheckoutForm.js

@@ -145,7 +145,7 @@ function CheckoutForm({ shopUrl = "/shop" }) {
         small,
         activeStep,
     ]);
-    return (jsx(Container, { sx: { py: 2, minHeight: "100vh" }, children: jsxs(Grid, { container: true, spacing: 2, sx: { py: 3, minHeight: "60vh" }, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h4", align: "center", children: "Check Out" }) }), cartIsEmpty && activeStep != 4 && (jsx(Grid, { item: true, xs: 12, children: jsxs(Alert, { severity: "error", children: [jsx(Typography, { variant: "h5", children: "No products in cart" }), jsx(Typography, { variant: "body1", children: "There are no products selected to order, please visit the shop befor continuing" })] }) })), alert != null && (jsx(Grid, { item: true, xs: 12, children: jsx(Alert, { severity: alert.severity, children: jsx(Typography, { variant: "body1", children: alert.message }) }) })), jsx(Grid, { item: true, xs: 12, children: jsxs(Box, { width: "100%", children: [jsx(Paper, { sx: {
+    return (jsx(Container, { sx: { py: 2, minHeight: "100vh" }, children: jsxs(Grid, { container: true, spacing: 2, sx: { py: 3, minHeight: "60vh" }, children: [jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h4", align: "center", children: "Check Out" }) }), cartIsEmpty && activeStep != 4 && (jsx(Grid, { size: 12, children: jsxs(Alert, { severity: "error", children: [jsx(Typography, { variant: "h5", children: "No products in cart" }), jsx(Typography, { variant: "body1", children: "There are no products selected to order, please visit the shop befor continuing" })] }) })), alert != null && (jsx(Grid, { size: 12, children: jsx(Alert, { severity: alert.severity, children: jsx(Typography, { variant: "body1", children: alert.message }) }) })), jsx(Grid, { size: 12, children: jsxs(Box, { width: "100%", children: [jsx(Paper, { sx: {
                                     p: 2,
                                     mb: 2,
                                     display: { xs: "block", sm: "none" },
@@ -153,7 +153,7 @@ function CheckoutForm({ shopUrl = "/shop" }) {
                                         const stepProps = {};
                                         const labelProps = {};
                                         return (jsx(Step, { ...stepProps, sx: { pb: "20px" }, children: jsx(StepLabel, { ...labelProps, children: step.label }) }, index));
-                                    }) }) }), !loading && (jsxs(Fragment, { children: [steps[activeStep].children, jsx(Paper, { sx: { p: 2, mt: 2, display: { xs: "none", sm: "block" } }, children: jsxs(Stack, { direction: "row", spacing: 2, children: [steps[activeStep].backButton, jsx(Button, { variant: "outlined", sx: { ml: 1 }, children: jsx(Link, { href: shopUrl, children: "continue shopping" }) }), jsx(Box, { sx: { flex: "1 1 auto" } }), steps[activeStep].nextButton] }) })] }))] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(MobileStepper, { sx: { display: { xs: "flex", sm: "none" } }, variant: "text", steps: steps.length, position: "static", activeStep: activeStep, nextButton: steps[activeStep].nextButton, backButton: steps[activeStep].backButton }) })] }) }));
+                                    }) }) }), !loading && (jsxs(Fragment, { children: [steps[activeStep].children, jsx(Paper, { sx: { p: 2, mt: 2, display: { xs: "none", sm: "block" } }, children: jsxs(Stack, { direction: "row", spacing: 2, children: [steps[activeStep].backButton, jsx(Button, { variant: "outlined", sx: { ml: 1 }, children: jsx(Link, { href: shopUrl, children: "continue shopping" }) }), jsx(Box, { sx: { flex: "1 1 auto" } }), steps[activeStep].nextButton] }) })] }))] }) }), jsx(Grid, { size: 12, children: jsx(MobileStepper, { sx: { display: { xs: "flex", sm: "none" } }, variant: "text", steps: steps.length, position: "static", activeStep: activeStep, nextButton: steps[activeStep].nextButton, backButton: steps[activeStep].backButton }) })] }) }));
 }
 
 export { CheckoutForm as default };

package/dist/esm/src/components/e-commerce/checkout/Step3.js

@@ -15,9 +15,15 @@ import TextField from '@mui/material/TextField';
 import Address from '../../common/Address.js';
 
 function Step3({ user, prefersBillingAddress = true, prefersDeliveryAddress = true, delivery_options, payment_options, togglePrefersBillingAddress, togglePrefersDeliveryAddress, setCustomerInternalReference, }) {
-    return (jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 2, children: user !== null && (jsx("form", { children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, md: 6, children: jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Typography, { variant: "h5", children: "Delivery Options" }), jsx(Typography, { variant: "body1", children: "Your order will be delivered at this address" }), prefersDeliveryAddress &&
-                                        user.customer_profile.delivery_address ? (jsx(Address, { data: user.customer_profile.delivery_address })) : (jsx(Address, { data: user.customer_profile.company_address })), user?.customer_profile?.delivery_address != undefined && (jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { checked: !prefersDeliveryAddress, onChange: togglePrefersDeliveryAddress }), jsx(Typography, { children: "Use company address instead" })] })), delivery_options && delivery_options.length > 0 && (jsx(Autocomplete, { options: delivery_options, renderInput: (params) => (jsx(TextField, { ...params, label: "Delivery Options" })) }))] }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Typography, { variant: "h5", children: "Payment Options" }), jsx(Typography, { variant: "body1", children: "Your invoice will be shipped to this address" }), prefersBillingAddress &&
-                                        user.customer_profile.billing_address ? (jsx(Address, { data: user.customer_profile.billing_address })) : (jsx(Address, { data: user.customer_profile.company_address })), user?.customer_profile?.billing_address != undefined && (jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { checked: !prefersBillingAddress, onChange: togglePrefersBillingAddress }), jsx(Typography, { children: "Use company address instead" })] })), payment_options && payment_options.length > 0 && (jsx(Autocomplete, { options: payment_options, renderInput: (params) => (jsx(TextField, { ...params, label: "Payment Options" })) }))] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Internal Reference" }), jsx(Typography, { variant: "body1", children: "Optionaly attach an internal reference to this order" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", label: "Internal Reference", onChange: (e) => setCustomerInternalReference(e.target.value) })] }) })] }) })) }) }));
+    return (jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 2, children: user !== null && (jsx("form", { children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: {
+                                xs: 12,
+                                md: 6
+                            }, children: jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Typography, { variant: "h5", children: "Delivery Options" }), jsx(Typography, { variant: "body1", children: "Your order will be delivered at this address" }), prefersDeliveryAddress &&
+                                        user.customer_profile.delivery_address ? (jsx(Address, { data: user.customer_profile.delivery_address })) : (jsx(Address, { data: user.customer_profile.company_address })), user?.customer_profile?.delivery_address != undefined && (jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { checked: !prefersDeliveryAddress, onChange: togglePrefersDeliveryAddress }), jsx(Typography, { children: "Use company address instead" })] })), delivery_options && delivery_options.length > 0 && (jsx(Autocomplete, { options: delivery_options, renderInput: (params) => (jsx(TextField, { ...params, label: "Delivery Options" })) }))] }) }), jsx(Grid, { size: {
+                                xs: 12,
+                                md: 6
+                            }, children: jsxs(Stack, { spacing: 2, justifyContent: "space-between", children: [jsx(Typography, { variant: "h5", children: "Payment Options" }), jsx(Typography, { variant: "body1", children: "Your invoice will be shipped to this address" }), prefersBillingAddress &&
+                                        user.customer_profile.billing_address ? (jsx(Address, { data: user.customer_profile.billing_address })) : (jsx(Address, { data: user.customer_profile.company_address })), user?.customer_profile?.billing_address != undefined && (jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { checked: !prefersBillingAddress, onChange: togglePrefersBillingAddress }), jsx(Typography, { children: "Use company address instead" })] })), payment_options && payment_options.length > 0 && (jsx(Autocomplete, { options: payment_options, renderInput: (params) => (jsx(TextField, { ...params, label: "Payment Options" })) }))] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Internal Reference" }), jsx(Typography, { variant: "body1", children: "Optionaly attach an internal reference to this order" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", label: "Internal Reference", onChange: (e) => setCustomerInternalReference(e.target.value) })] }) })] }) })) }) }));
 }
 
 export { Step3 as default };

package/dist/esm/src/components/e-commerce/customer/CustomerProfileDisplay.js

@@ -40,7 +40,25 @@ function CustomerProfileDisplay({ data, }) {
     }
     const pathname = usePathname();
     const isCustomer = pathname.includes("/user/");
-    return (jsxs(Grid, { container: true, sx: { width: "100%" }, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, sx: { width: "100%" }, children: [jsx(Typography, { variant: "h3", component: "h1", children: isCustomer ? "Your Profile" : "Customer Profile" }), !isCustomer && data.customer_number && (jsxs(Typography, { variant: "body1", children: ["Customer Number: ", jsx("strong", { children: data.customer_number })] }))] }), isCustomer && (jsx(Fragment, { children: !Boolean(completeEnough) ? (jsx(Alert, { severity: "warning", action: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "complete profile" }) }), children: "After completion of your profile you can enjoy all the benefits of your services." })) : (jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "edit profile" }) }) })) }))] }), jsx(Divider, {})] }) }), jsxs(Grid, { item: true, xs: 12, children: [business_credentials ? (jsx(BusinessCredentials, { data: business_credentials })) : (jsx(Typography, { children: "Business credentials not available" })), jsx(Divider, { sx: { pt: 2 } })] }), jsxs(Grid, { item: true, xs: 12, children: [jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PersonIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [first_name, " ", last_name, " ", !first_name && !last_name && "N/A"] }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(EmailIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [email, " ", !email && "N/A"] }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PhoneIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [phone, " ", !phone && "N/A"] }) })] }), jsx(Divider, { sx: { pt: 2 } })] }), company_address ? (jsxs(Grid, { item: true, xs: 12, md: 4, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Address, { data: { ...company_address } })] })) : (jsx(Grid, { item: true, xs: 12, md: 4, children: jsx(Typography, { children: "Company address not available" }) })), delivery_address ? (jsxs(Grid, { item: true, xs: 12, md: 4, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Address, { data: { ...delivery_address } })] })) : (jsx(Grid, { item: true, xs: 12, md: 4, children: jsx(Typography, { children: "Delivery address not available" }) })), billing_address ? (jsxs(Grid, { item: true, xs: 12, md: 4, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Address, { data: { ...billing_address } })] })) : (jsx(Grid, { item: true, xs: 12, md: 4, children: jsx(Typography, { children: "Billing address not available" }) })), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", gutterBottom: true, children: "Orders" }), jsx(Paper, { children: orders && orders.length > 0 ? (jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Order Number" }), jsx(TableCell, { children: "Date" }), jsx(TableCell, { children: "Status" }), jsx(TableCell, { align: "right", children: "Total" }), jsx(TableCell, { align: "right", children: "Actions" })] }) }), jsx(TableBody, { children: orders.map((order, index) => (jsxs(TableRow, { children: [jsx(TableCell, { children: order.opo_number }), jsx(TableCell, { children: new Date(order.order_date).toLocaleDateString() }), jsx(TableCell, { children: order.internal_status }), jsxs(TableCell, { align: "right", children: [order.total_incl_vat, " ", order.order_currency] }), jsx(TableCell, { align: "right", children: isCustomer ? (jsx(StyledLink, { href: `/user/orders?selectedOpoId=${order.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) : (jsx(StyledLink, { href: `/dashboard/admin/e-commerce/opos?selectedOpoId=${order.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) })] }, index))) })] })) : (jsx(Box, { p: 2, children: isCustomer ? (jsx(Typography, { children: "You have no orders." })) : (jsx(Typography, { children: "This user has no orders." })) })) })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", gutterBottom: true, children: "Returns" }), jsx(Paper, { children: returns && returns.length > 0 ? (jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Return Number" }), jsx(TableCell, { children: "RMA Number" }), jsx(TableCell, { children: "Date" }), jsx(TableCell, { children: "Status" }), jsx(TableCell, { align: "right", children: "Actions" })] }) }), jsx(TableBody, { children: returns.map((iro, index) => (jsxs(TableRow, { children: [jsx(TableCell, { children: iro.return_number }), jsx(TableCell, { children: iro.rma_number }), jsx(TableCell, { children: new Date(iro.return_date).toLocaleDateString() }), jsx(TableCell, { children: iro.internal_status }), jsx(TableCell, { align: "right", children: isCustomer ? (jsx(StyledLink, { href: `/user/returns?selectedIroId=${iro.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) : (jsx(StyledLink, { href: `/dashboard/admin/e-commerce/iros?selectedIroId=${iro.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) })] }, index))) })] })) : (jsx(Box, { p: 2, children: isCustomer ? (jsx(Typography, { children: "You have no returns." })) : (jsx(Typography, { children: "This user has no returns." })) })) })] })] }));
+    return (jsxs(Grid, { container: true, sx: { width: "100%" }, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, sx: { width: "100%" }, children: [jsx(Typography, { variant: "h3", component: "h1", children: isCustomer ? "Your Profile" : "Customer Profile" }), !isCustomer && data.customer_number && (jsxs(Typography, { variant: "body1", children: ["Customer Number: ", jsx("strong", { children: data.customer_number })] }))] }), isCustomer && (jsx(Fragment, { children: !Boolean(completeEnough) ? (jsx(Alert, { severity: "warning", action: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "complete profile" }) }), children: "After completion of your profile you can enjoy all the benefits of your services." })) : (jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "edit profile" }) }) })) }))] }), jsx(Divider, {})] }) }), jsxs(Grid, { size: 12, children: [business_credentials ? (jsx(BusinessCredentials, { data: business_credentials })) : (jsx(Typography, { children: "Business credentials not available" })), jsx(Divider, { sx: { pt: 2 } })] }), jsxs(Grid, { size: 12, children: [jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PersonIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [first_name, " ", last_name, " ", !first_name && !last_name && "N/A"] }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(EmailIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [email, " ", !email && "N/A"] }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PhoneIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [phone, " ", !phone && "N/A"] }) })] }), jsx(Divider, { sx: { pt: 2 } })] }), company_address ? (jsxs(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Address, { data: { ...company_address } })] })) : (jsx(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: jsx(Typography, { children: "Company address not available" }) })), delivery_address ? (jsxs(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Address, { data: { ...delivery_address } })] })) : (jsx(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: jsx(Typography, { children: "Delivery address not available" }) })), billing_address ? (jsxs(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Address, { data: { ...billing_address } })] })) : (jsx(Grid, { size: {
+                    xs: 12,
+                    md: 4
+                }, children: jsx(Typography, { children: "Billing address not available" }) })), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", gutterBottom: true, children: "Orders" }), jsx(Paper, { children: orders && orders.length > 0 ? (jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Order Number" }), jsx(TableCell, { children: "Date" }), jsx(TableCell, { children: "Status" }), jsx(TableCell, { align: "right", children: "Total" }), jsx(TableCell, { align: "right", children: "Actions" })] }) }), jsx(TableBody, { children: orders.map((order, index) => (jsxs(TableRow, { children: [jsx(TableCell, { children: order.opo_number }), jsx(TableCell, { children: new Date(order.order_date).toLocaleDateString() }), jsx(TableCell, { children: order.internal_status }), jsxs(TableCell, { align: "right", children: [order.total_incl_vat, " ", order.order_currency] }), jsx(TableCell, { align: "right", children: isCustomer ? (jsx(StyledLink, { href: `/user/orders?selectedOpoId=${order.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) : (jsx(StyledLink, { href: `/dashboard/admin/e-commerce/opos?selectedOpoId=${order.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) })] }, index))) })] })) : (jsx(Box, { p: 2, children: isCustomer ? (jsx(Typography, { children: "You have no orders." })) : (jsx(Typography, { children: "This user has no orders." })) })) })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", gutterBottom: true, children: "Returns" }), jsx(Paper, { children: returns && returns.length > 0 ? (jsxs(Table, { children: [jsx(TableHead, { children: jsxs(TableRow, { children: [jsx(TableCell, { children: "Return Number" }), jsx(TableCell, { children: "RMA Number" }), jsx(TableCell, { children: "Date" }), jsx(TableCell, { children: "Status" }), jsx(TableCell, { align: "right", children: "Actions" })] }) }), jsx(TableBody, { children: returns.map((iro, index) => (jsxs(TableRow, { children: [jsx(TableCell, { children: iro.return_number }), jsx(TableCell, { children: iro.rma_number }), jsx(TableCell, { children: new Date(iro.return_date).toLocaleDateString() }), jsx(TableCell, { children: iro.internal_status }), jsx(TableCell, { align: "right", children: isCustomer ? (jsx(StyledLink, { href: `/user/returns?selectedIroId=${iro.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) : (jsx(StyledLink, { href: `/dashboard/admin/e-commerce/iros?selectedIroId=${iro.documentId}`, target: "_self", children: jsx(Button, { variant: "contained", size: "small", children: "View" }) })) })] }, index))) })] })) : (jsx(Box, { p: 2, children: isCustomer ? (jsx(Typography, { children: "You have no returns." })) : (jsx(Typography, { children: "This user has no returns." })) })) })] })] }));
 }
 
 export { CustomerProfileDisplay as default };

package/dist/esm/src/components/e-commerce/customer/CustomerProfileEditForm.js

@@ -72,7 +72,7 @@ function CustomerProfileEditForm({ data, sx, revalidateCallback, handleClose, })
             });
         }
     }, [formState?.strapiErrors]);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Edit Profile" }), jsx(Typography, { variant: "body2", children: "Update your personal and business information" })] }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Personal Details" }), jsx(Divider, {}), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsx(TextField, { id: "first_name", name: "first_name", label: "First Name", defaultValue: first_name }), jsx(TextField, { id: "last_name", name: "last_name", label: "Last Name", defaultValue: last_name }), jsx(TextField, { id: "email", name: "email", label: "Email", defaultValue: email, disabled: true }), jsx(TextField, { id: "phone", name: "phone", label: "Phone", defaultValue: phone })] })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Business Credentials" }), jsx(Divider, {}), jsx(Box, { sx: { mt: 2 }, children: jsx(BusinessCredentialsFields, { componentName: "business_credentials", componentReference: "business.credentials", data: business_credentials }) })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Divider, {}), jsx(Box, { sx: { mt: 2 }, children: jsx(AddressFields, { componentName: "company_address", componentReference: "common.address", data: company_address }) })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Divider, {}), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { value: withDeliveryAddress, checked: withDeliveryAddress, onChange: () => setWithDeliveryAddress(!withDeliveryAddress) }), jsx(Typography, { children: "Use a different address for delivery" })] }), withDeliveryAddress && (jsx(AddressFields, { componentName: "delivery_address", componentReference: "common.address", data: delivery_address }))] })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Divider, {}), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { value: withBillingAddress, checked: withBillingAddress, onChange: () => setWithBillingAddress(!withBillingAddress) }), jsx(Typography, { children: "Use a different address for billing" })] }), withBillingAddress && (jsx(AddressFields, { componentName: "billing_address", componentReference: "common.address", data: billing_address }))] })] }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Save changes", loadingText: "Saving...", variant: "contained" })] }) })] }) }) }));
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Edit Profile" }), jsx(Typography, { variant: "body2", children: "Update your personal and business information" })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Personal Details" }), jsx(Divider, {}), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsx(TextField, { id: "first_name", name: "first_name", label: "First Name", defaultValue: first_name }), jsx(TextField, { id: "last_name", name: "last_name", label: "Last Name", defaultValue: last_name }), jsx(TextField, { id: "email", name: "email", label: "Email", defaultValue: email, disabled: true }), jsx(TextField, { id: "phone", name: "phone", label: "Phone", defaultValue: phone })] })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Business Credentials" }), jsx(Divider, {}), jsx(Box, { sx: { mt: 2 }, children: jsx(BusinessCredentialsFields, { componentName: "business_credentials", componentReference: "business.credentials", data: business_credentials }) })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Divider, {}), jsx(Box, { sx: { mt: 2 }, children: jsx(AddressFields, { componentName: "company_address", componentReference: "common.address", data: company_address }) })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Divider, {}), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { value: withDeliveryAddress, checked: withDeliveryAddress, onChange: () => setWithDeliveryAddress(!withDeliveryAddress) }), jsx(Typography, { children: "Use a different address for delivery" })] }), withDeliveryAddress && (jsx(AddressFields, { componentName: "delivery_address", componentReference: "common.address", data: delivery_address }))] })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Divider, {}), jsxs(Stack, { spacing: 2, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(Checkbox, { value: withBillingAddress, checked: withBillingAddress, onChange: () => setWithBillingAddress(!withBillingAddress) }), jsx(Typography, { children: "Use a different address for billing" })] }), withBillingAddress && (jsx(AddressFields, { componentName: "billing_address", componentReference: "common.address", data: billing_address }))] })] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Save changes", loadingText: "Saving...", variant: "contained" })] }) })] }) }) }));
 }
 
 export { CustomerProfileEditForm as default };

package/dist/esm/src/components/e-commerce/customer/DenseCustomerProfileDisplay.js

@@ -21,7 +21,22 @@ function CustomerProfileDisplay({ data, }) {
         return (jsx(Stack, { spacing: 2, children: jsx(Typography, { children: "Customer profile not available" }) }));
     }
     const { first_name = "", last_name, email, phone, company_address, billing_address, delivery_address, business_credentials, } = data;
-    return (jsxs(Stack, { spacing: 2, children: [business_credentials ? (jsx(BusinessCredentials, { data: business_credentials })) : (jsx(Typography, { children: "Business credentials not available" })), jsx(Divider, {}), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PersonIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [first_name, " ", last_name] }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(EmailIcon, {}), jsx(Box, { children: jsx(Typography, { variant: "body1", component: "p", children: email }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PhoneIcon, {}), jsx(Box, { children: jsx(Typography, { variant: "body1", component: "p", children: phone }) })] }), jsx(Divider, {}), jsxs(Grid, { container: true, children: [company_address ? (jsxs(Grid, { item: true, xs: 12, md: 4, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Address, { data: { ...company_address } })] })) : (jsx(Typography, { children: "Company address not available" })), delivery_address ? (jsxs(Grid, { item: true, xs: 12, md: 4, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Address, { data: { ...delivery_address } })] })) : (jsx(Grid, { item: true, xs: 12, md: 4, children: jsx(Typography, { children: "Delivery address not available" }) })), billing_address ? (jsxs(Grid, { item: true, xs: 12, md: 4, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Address, { data: { ...billing_address } })] })) : (jsx(Grid, { item: true, xs: 12, md: 4, children: jsx(Typography, { children: "Billing address not available" }) }))] })] }));
+    return (jsxs(Stack, { spacing: 2, children: [business_credentials ? (jsx(BusinessCredentials, { data: business_credentials })) : (jsx(Typography, { children: "Business credentials not available" })), jsx(Divider, {}), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PersonIcon, {}), jsx(Box, { children: jsxs(Typography, { variant: "body1", component: "p", children: [first_name, " ", last_name] }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(EmailIcon, {}), jsx(Box, { children: jsx(Typography, { variant: "body1", component: "p", children: email }) })] }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(PhoneIcon, {}), jsx(Box, { children: jsx(Typography, { variant: "body1", component: "p", children: phone }) })] }), jsx(Divider, {}), jsxs(Grid, { container: true, children: [company_address ? (jsxs(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Address, { data: { ...company_address } })] })) : (jsx(Typography, { children: "Company address not available" })), delivery_address ? (jsxs(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: [jsx(Typography, { variant: "h6", children: "Delivery Address" }), jsx(Address, { data: { ...delivery_address } })] })) : (jsx(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: jsx(Typography, { children: "Delivery address not available" }) })), billing_address ? (jsxs(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: [jsx(Typography, { variant: "h6", children: "Billing Address" }), jsx(Address, { data: { ...billing_address } })] })) : (jsx(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: jsx(Typography, { children: "Billing address not available" }) }))] })] }));
 }
 
 export { CustomerProfileDisplay as default };

package/dist/esm/src/components/e-commerce/enduser/EnduserProfileDisplay.js

@@ -24,7 +24,10 @@ function EnduserProfileDisplay({ data, }) {
     const pathname = usePathname();
     // Check if the current path is for an enduser profile
     const isEnduser = pathname.includes("admin/user/");
-    return (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [isEnduser && (jsx(Fragment, { children: !Boolean(completeEnough) ? (jsx(Alert, { severity: "warning", action: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "complete profile" }) }), children: "After completion of your profile you can enjoy all the benefits of your services." })) : (jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "edit profile" }) }) })) })), jsx(Divider, {}), jsx(Grid, { container: true, spacing: 2, sx: { width: "100%" }, children: jsxs(Grid, { item: true, xs: 12, md: 4, children: [jsx(Typography, { variant: "h6", children: "Personal Information" }), jsxs(Stack, { spacing: 1, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PersonIcon, {}), jsx(Typography, { children: `${first_name} ${last_name}` })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(EmailIcon, {}), jsx(Typography, { children: email })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PhoneIcon, {}), jsx(Typography, { children: phone })] })] })] }) })] }) }));
+    return (jsx(Paper, { sx: { p: 2 }, children: jsxs(Stack, { spacing: 2, children: [isEnduser && (jsx(Fragment, { children: !Boolean(completeEnough) ? (jsx(Alert, { severity: "warning", action: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "complete profile" }) }), children: "After completion of your profile you can enjoy all the benefits of your services." })) : (jsx(Stack, { direction: "row", justifyContent: "flex-end", children: jsx(StyledLink, { href: editProfileUrl, target: "_self", children: jsx(Button, { variant: "contained", children: "edit profile" }) }) })) })), jsx(Divider, {}), jsx(Grid, { container: true, spacing: 2, sx: { width: "100%" }, children: jsxs(Grid, { size: {
+                            xs: 12,
+                            md: 4
+                        }, children: [jsx(Typography, { variant: "h6", children: "Personal Information" }), jsxs(Stack, { spacing: 1, sx: { mt: 2 }, children: [jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PersonIcon, {}), jsx(Typography, { children: `${first_name} ${last_name}` })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(EmailIcon, {}), jsx(Typography, { children: email })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PhoneIcon, {}), jsx(Typography, { children: phone })] })] })] }) })] }) }));
 }
 
 export { EnduserProfileDisplay as default };

package/dist/esm/src/components/e-commerce/enduser/EnduserProfileEditForm.js

@@ -56,7 +56,7 @@ function EnduserProfileEditForm({ data, sx, revalidateCallback, handleClose, })
             });
         }
     }, [formState?.strapiErrors]);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Edit Profile" }), jsx(Typography, { variant: "body1", children: "Update your profile information" })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Personal Information" }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PersonIcon, {}), jsx(Typography, { children: `${first_name} ${last_name}` })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(EmailIcon, {}), jsx(TextField, { id: "email", name: "email", label: "Email", type: "email", defaultValue: email })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PhoneIcon, {}), jsx(TextField, { id: "phone", name: "phone", label: "Phone", type: "tel", defaultValue: phone })] })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center", sx: { mt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Save Changes", loadingText: "Saving...", variant: "contained" })] }) })] }) }) }));
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Edit Profile" }), jsx(Typography, { variant: "body1", children: "Update your profile information" })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Personal Information" }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PersonIcon, {}), jsx(Typography, { children: `${first_name} ${last_name}` })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(EmailIcon, {}), jsx(TextField, { id: "email", name: "email", label: "Email", type: "email", defaultValue: email })] }), jsxs(Stack, { direction: "row", alignItems: "center", children: [jsx(PhoneIcon, {}), jsx(TextField, { id: "phone", name: "phone", label: "Phone", type: "tel", defaultValue: phone })] })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center", sx: { mt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Save Changes", loadingText: "Saving...", variant: "contained" })] }) })] }) }) }));
 }
 
 export { EnduserProfileEditForm as default };

package/dist/esm/src/components/e-commerce/invoice/CreateInvoiceForm.js

@@ -117,7 +117,7 @@ function CreateInvoiceForm({ customerLabels, revalidateCallback, handleClose, sx
         }
         fetchPublicInformation();
     }, []);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Create Invoice" }), jsx(Typography, { variant: "body2", children: "Create a new invoice by selecting a customer or filling in the details manually" })] }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Choose a user" }), jsx(CustomerSelector, { customerLabels: customerLabels, onChangeCallback: onChangeCustomer }), jsx(Typography, { variant: "h6", children: "Set user details manually" }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(TextField, { name: "buyer_first_name", label: "First Name", value: customerDefaults?.first_name ||
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Create Invoice" }), jsx(Typography, { variant: "body2", children: "Create a new invoice by selecting a customer or filling in the details manually" })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Choose a user" }), jsx(CustomerSelector, { customerLabels: customerLabels, onChangeCallback: onChangeCustomer }), jsx(Typography, { variant: "h6", children: "Set user details manually" }), jsxs(Stack, { spacing: 2, direction: "row", children: [jsx(TextField, { name: "buyer_first_name", label: "First Name", value: customerDefaults?.first_name ||
                                             invoice?.buyer_first_name ||
                                             "", onChange: (e) => {
                                             setInvoice((prev) => ({
@@ -159,14 +159,14 @@ function CreateInvoiceForm({ customerLabels, revalidateCallback, handleClose, sx
                                         ...prev,
                                         buyer_business_credentials: data,
                                     }));
-                                }, disabled: customerDefaults !== null ? true : false })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Invoice Items" }), jsx(InvoiceItemFields, { onChangeCallback: onChangeItems })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Add a Comment" }), jsx(MarkdownEditor, { name: "comments", label: "Comments", onChangeCallback: (data) => setInvoice((prev) => {
+                                }, disabled: customerDefaults !== null ? true : false })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Invoice Items" }), jsx(InvoiceItemFields, { onChangeCallback: onChangeItems })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Add a Comment" }), jsx(MarkdownEditor, { name: "comments", label: "Comments", onChangeCallback: (data) => setInvoice((prev) => {
                                     if (!prev)
                                         return null;
                                     return {
                                         ...prev,
                                         comments: data,
                                     };
-                                }) })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Preview the Invoice" }), invoice !== null && jsx(InvoicePDFViewer, { invoice: invoice })] }), " ", jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Create Invoice", loadingText: "Creating...", variant: "contained" })] }) })] }) }) }));
+                                }) })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Preview the Invoice" }), invoice !== null && jsx(InvoicePDFViewer, { invoice: invoice })] }), " ", jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Create Invoice", loadingText: "Creating...", variant: "contained" })] }) })] }) }) }));
 }
 
 export { CreateInvoiceForm };

package/dist/esm/src/components/e-commerce/iro/CreateIROForm.js

@@ -53,7 +53,7 @@ function CreateIroForm({ sx, revalidateCallback, handleClose, customerLabels, pr
             });
         }
     }, [formState?.strapiErrors]);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Stack, { spacing: 2, children: jsx(Typography, { variant: "h3", component: "h1", children: "Create new return order" }) }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Choose a customer" }), jsx(Typography, { variant: "body2", children: "Select the customer for which you want to create a return order" }), jsx(CustomerSelector, { customerLabels: customerLabels })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Customer reference" }), jsx(Typography, { children: "If the customer utilizes a custom reference for inbound order management it should be left here" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", sx: { width: "100%" } })] }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Choose products that should be in this return order" }), jsx(IROItemFields, { productsArr: productLabels })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Confirm Order" }), jsx(Typography, { children: "Are you sure you want to confirm this return? Confirming this order means you are sure the customer wants to return the products and you are ready to process the return." }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Checkbox, { value: returnConfirmed, checked: returnConfirmed, onChange: () => setReturnConfirmed(!returnConfirmed) }), returnConfirmed && (jsx(Typography, { color: "primary", children: "I am sure I want to confirm this return order" }))] }), jsx("input", { name: "status", type: "hidden", value: returnConfirmed ? "returning" : "requested" })] }), " ", jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Confirm", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsx(Stack, { spacing: 2, children: jsx(Typography, { variant: "h3", component: "h1", children: "Create new return order" }) }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Choose a customer" }), jsx(Typography, { variant: "body2", children: "Select the customer for which you want to create a return order" }), jsx(CustomerSelector, { customerLabels: customerLabels })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Customer reference" }), jsx(Typography, { children: "If the customer utilizes a custom reference for inbound order management it should be left here" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", sx: { width: "100%" } })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Choose products that should be in this return order" }), jsx(IROItemFields, { productsArr: productLabels })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Confirm Order" }), jsx(Typography, { children: "Are you sure you want to confirm this return? Confirming this order means you are sure the customer wants to return the products and you are ready to process the return." }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Checkbox, { value: returnConfirmed, checked: returnConfirmed, onChange: () => setReturnConfirmed(!returnConfirmed) }), returnConfirmed && (jsx(Typography, { color: "primary", children: "I am sure I want to confirm this return order" }))] }), jsx("input", { name: "status", type: "hidden", value: returnConfirmed ? "returning" : "requested" })] }), " ", jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Confirm", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
 }
 
 export { CreateIroForm as default };

package/dist/esm/src/components/e-commerce/iro/ManageIROForm.js

@@ -51,9 +51,9 @@ function ManageIROForm({ data, sx, revalidateCallback, handleClose, role, }) {
     return (jsx(Box, { sx: [
             // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
             ...(Array.isArray(sx) ? sx : [sx]),
-        ], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Management Inbound Purchase Order" }), jsx(Typography, { variant: "body1", children: "Manage arrival, registration and recieval of purchase order" })] }), jsx(NoteTakingComponent, { content: "", related: [
+        ], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Management Inbound Purchase Order" }), jsx(Typography, { variant: "body1", children: "Manage arrival, registration and recieval of purchase order" })] }), jsx(NoteTakingComponent, { content: "", related: [
                                             { id: data.documentId, __type: "api::logistics.ipo" },
-                                        ], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { item: true, xs: 6, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Details" }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Purchase Order Number" }), jsx(Typography, { variant: "body2", children: data.return_number })] }), jsx(Stack, { direction: "row", spacing: 2, children: jsx(Typography, { variant: "body1", width: "250px", children: "Custom reference" }) }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Date" }), jsx(Typography, { variant: "body2", children: data.return_date })] }), jsx(Stack, { direction: "row", spacing: 2, children: jsx(Typography, { variant: "body1", width: "250px", children: "Supplier" }) }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Status" }), jsx(Typography, { variant: "body2", width: "250px", children: data.internal_status })] })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1, children: role === "enduser" && (jsx(Fragment, {})) }) })] }) }), data?.notes?.length > 0 && (jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: data.notes }), jsx(Divider, {})] }) })), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), jsx(Divider, {}), jsxs("form", { action: formAction, children: [data?.iro_items &&
+                                        ], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { size: 6, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Details" }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Purchase Order Number" }), jsx(Typography, { variant: "body2", children: data.return_number })] }), jsx(Stack, { direction: "row", spacing: 2, children: jsx(Typography, { variant: "body1", width: "250px", children: "Custom reference" }) }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Date" }), jsx(Typography, { variant: "body2", children: data.return_date })] }), jsx(Stack, { direction: "row", spacing: 2, children: jsx(Typography, { variant: "body1", width: "250px", children: "Supplier" }) }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Status" }), jsx(Typography, { variant: "body2", width: "250px", children: data.internal_status })] })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1, children: role === "enduser" && (jsx(Fragment, {})) }) })] }) }), data?.notes?.length > 0 && (jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: data.notes }), jsx(Divider, {})] }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), jsx(Divider, {}), jsxs("form", { action: formAction, children: [data?.iro_items &&
                                         data.iro_items.map((item, index) => {
                                             console.log("item", item);
                                             return (jsx(Paper, { sx: { p: 2, mb: 2 } }, index));

package/dist/esm/src/components/e-commerce/iro/RmaForm.js

@@ -139,7 +139,7 @@ function RmaForm({ opo, sx, revalidateCallback, handleClose, }) {
             });
         }
     }, [formState?.strapiErrors]);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h6", children: "RMA Form" }) }), jsx("input", { type: "hidden", name: "opos", value: opo.documentId }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "body1", children: "Please fill out the form below to request a return merchandise authorization. Due to the sensitive nature of the products, only unopened packages can be returned." }), jsx(Alert, { severity: "warning", children: "We urge you to carefully photograph the items you are returning. These pictures can be requested at a later time by our team to verify the condition of the items." })] }) }), jsx(Grid, { item: true, xs: 12, children: opo.opo_items ? (jsx(Stack, { spacing: 1, children: opo.opo_items && (jsx(ItemLines, { items: opo.opo_items, itemsToReturn: itemsToReturn, setItemsToReturn: setItemsToReturn, selectedItems: selectedItems, setSelectedItems: setSelectedItems })) })) : (jsx(Typography, { variant: "body1", children: "No items" })) }), jsx(ConfirmRMADialog, { formState: formState, open: open, items: itemsToReturn.filter((item) => item.returned_quantity > 0), onClose: () => setOpen(!open), submitCallback: () => {
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h6", children: "RMA Form" }) }), jsx("input", { type: "hidden", name: "opos", value: opo.documentId }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "body1", children: "Please fill out the form below to request a return merchandise authorization. Due to the sensitive nature of the products, only unopened packages can be returned." }), jsx(Alert, { severity: "warning", children: "We urge you to carefully photograph the items you are returning. These pictures can be requested at a later time by our team to verify the condition of the items." })] }) }), jsx(Grid, { size: 12, children: opo.opo_items ? (jsx(Stack, { spacing: 1, children: opo.opo_items && (jsx(ItemLines, { items: opo.opo_items, itemsToReturn: itemsToReturn, setItemsToReturn: setItemsToReturn, selectedItems: selectedItems, setSelectedItems: setSelectedItems })) })) : (jsx(Typography, { variant: "body1", children: "No items" })) }), jsx(ConfirmRMADialog, { formState: formState, open: open, items: itemsToReturn.filter((item) => item.returned_quantity > 0), onClose: () => setOpen(!open), submitCallback: () => {
                             console.log("submit callback");
                             const formElement = document.querySelector("form");
                             if (formElement) {
@@ -149,7 +149,7 @@ function RmaForm({ opo, sx, revalidateCallback, handleClose, }) {
                                 formAction(new FormData());
                             }
                             setOpen(!open);
-                        } }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Button, { onClick: () => {
+                        } }), jsxs(Grid, { size: 12, children: [jsx(Button, { onClick: () => {
                                     console.log(formState);
                                     setOpen(!open);
                                 }, disabled: selectedItems.length === 0 ||

package/dist/esm/src/components/e-commerce/iro/TextualManageIROForm.js

@@ -341,11 +341,11 @@ revalidateCallback, handleClose, role, }) {
             setItems(data.iro_items ? data.iro_items : []);
         }
     }, [data]);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Management Inbound Return" }), jsx(Typography, { variant: "body1", children: "Manage arrival, registration and release of returns" })] }), jsx(NoteTakingComponent, { content: "", related: [
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Management Inbound Return" }), jsx(Typography, { variant: "body1", children: "Manage arrival, registration and release of returns" })] }), jsx(NoteTakingComponent, { content: "", related: [
                                             { id: data.documentId, __type: "api::e-commerce.iro" },
-                                        ], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h5", sx: { py: 1 }, children: "Details" }) }), jsx(Grid, { item: true, xs: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(NumbersIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Return Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.return_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(AssignmentReturnIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "RMA Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.rma_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(DescriptionIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Customer Reference" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.customer_reference })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(CalendarTodayIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Return Date" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.return_date })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(BusinessIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Customer" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.customer?.business_credentials?.company_name })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(UpdateIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Return Status" }), jsx(IroStatusIndicator, { status: data.internal_status })] })] }) }) }), (data.internal_status === "requested" ||
+                                        ], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { size: 12, children: jsx(Typography, { variant: "h5", sx: { py: 1 }, children: "Details" }) }), jsx(Grid, { size: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(NumbersIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Return Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.return_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(AssignmentReturnIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "RMA Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.rma_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(DescriptionIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Customer Reference" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.customer_reference })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(CalendarTodayIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Return Date" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.return_date })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(BusinessIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Customer" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.customer?.business_credentials?.company_name })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(UpdateIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Return Status" }), jsx(IroStatusIndicator, { status: data.internal_status })] })] }) }) }), (data.internal_status === "requested" ||
                     data.internal_status === "finalising_process") &&
-                    role === "enduser" && (jsx(Grid, { item: true, xs: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [jsx(Button, { variant: "contained", color: "primary", onClick: () => setConfirmDialogOpen(true), children: "Confirm order" }), data.internal_status === "requested" && (jsx(Alert, { severity: "warning", children: "Please confirm the order as soon as possible, only upon confirmation this order will be assigned an RMA number and will become available to the dispatcher. Status: requested - returning" })), data.internal_status === "finalising_process" && (jsx(Alert, { severity: "warning", children: "Please finalise this return order. Make sure the customer receives a return payment if eligible and then confirm this step. Status: finalising_process - done" })), data.internal_status === "finalising_process" && (jsx(Button, { variant: "contained", sx: { color: "yellow" }, children: "// TODO RE-PAYMENT PROCESS" })), jsx(Button, { variant: "contained", color: "error", onClick: () => setCancelDialogOpen(true), children: "Cancel order" }), jsx(ConfirmFormDialog, { open: confirmDialogOpen, handleClose: () => setConfirmDialogOpen(false), orderID: data.documentId, currentStatus: data.internal_status, revalidateCallback: revalidateCallback, openOverwritesDialog: () => setOverwritesDialogOpen(true) }), jsx(OverwritesDialog, { open: overwritesDialogOpen, handleClose: () => setOverwritesDialogOpen(false), overwrites: overwrites, setOverwrites: setOverwrites, iro: data }), jsx(CancelIroDialog, { open: cancelDialogOpen, handleClose: () => setCancelDialogOpen(false), orderID: data.documentId, revalidateCallback: revalidateCallback })] }) }) })), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1 }) })] }) }), data?.notes?.length > 0 && (jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: data.notes }), jsx(Divider, {})] }) })), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 2, component: Paper, p: 1, sx: {
+                    role === "enduser" && (jsx(Grid, { size: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [jsx(Button, { variant: "contained", color: "primary", onClick: () => setConfirmDialogOpen(true), children: "Confirm order" }), data.internal_status === "requested" && (jsx(Alert, { severity: "warning", children: "Please confirm the order as soon as possible, only upon confirmation this order will be assigned an RMA number and will become available to the dispatcher. Status: requested - returning" })), data.internal_status === "finalising_process" && (jsx(Alert, { severity: "warning", children: "Please finalise this return order. Make sure the customer receives a return payment if eligible and then confirm this step. Status: finalising_process - done" })), data.internal_status === "finalising_process" && (jsx(Button, { variant: "contained", sx: { color: "yellow" }, children: "// TODO RE-PAYMENT PROCESS" })), jsx(Button, { variant: "contained", color: "error", onClick: () => setCancelDialogOpen(true), children: "Cancel order" }), jsx(ConfirmFormDialog, { open: confirmDialogOpen, handleClose: () => setConfirmDialogOpen(false), orderID: data.documentId, currentStatus: data.internal_status, revalidateCallback: revalidateCallback, openOverwritesDialog: () => setOverwritesDialogOpen(true) }), jsx(OverwritesDialog, { open: overwritesDialogOpen, handleClose: () => setOverwritesDialogOpen(false), overwrites: overwrites, setOverwrites: setOverwrites, iro: data }), jsx(CancelIroDialog, { open: cancelDialogOpen, handleClose: () => setCancelDialogOpen(false), orderID: data.documentId, revalidateCallback: revalidateCallback })] }) }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1 }) })] }) }), data?.notes?.length > 0 && (jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: data.notes }), jsx(Divider, {})] }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 2, component: Paper, p: 1, sx: {
                                     bgcolor: "background.default",
                                     border: "1px solid",
                                     borderColor: "divider",

package/dist/esm/src/components/e-commerce/opo/CreateOpoForm.js

@@ -53,7 +53,7 @@ function CreateOpoForm({ sx, revalidateCallback, handleClose, customerLabels, pr
             });
         }
     }, [formState?.strapiErrors]);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Stack, { spacing: 2, children: jsx(Typography, { variant: "h3", component: "h1", children: "Create new order" }) }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Choose a customer" }), jsx(CustomerSelector, { customerLabels: customerLabels })] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Customer reference" }), jsx(Typography, { children: "If the customer utilizes a custom reference for inbound order management it should be left here" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", sx: { width: "100%" } })] }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Choose products for this order" }), jsx(OPOItemFields, { productsArr: productLabels })] }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Confirm Order" }), jsx(Typography, { children: "Are you sure you want to confirm this order? Creating a order this way will not create a shipping label nor will it invoke a payment. It does however create an invoice which you can find under invoices" }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Checkbox, { value: orderConfirmed, checked: orderConfirmed, onChange: () => setOrderConfirmed(!orderConfirmed) }), orderConfirmed && (jsx(Typography, { color: "primary", children: "I am sure I want to confirm this order" }))] }), jsx("input", { name: "internal_status", type: "hidden", value: orderConfirmed ? "ordered" : "placed" })] }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Confirm", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
+    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsx(Stack, { spacing: 2, children: jsx(Typography, { variant: "h3", component: "h1", children: "Create new order" }) }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Choose a customer" }), jsx(CustomerSelector, { customerLabels: customerLabels })] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Customer reference" }), jsx(Typography, { children: "If the customer utilizes a custom reference for inbound order management it should be left here" }), jsx(TextField, { id: "customer_reference", name: "customer_reference", sx: { width: "100%" } })] }) }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Choose products for this order" }), jsx(OPOItemFields, { productsArr: productLabels })] }), jsxs(Grid, { size: 12, children: [jsx(Typography, { variant: "h6", children: "Confirm Order" }), jsx(Typography, { children: "Are you sure you want to confirm this order? Creating a order this way will not create a shipping label nor will it invoke a payment. It does however create an invoice which you can find under invoices" }), jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [jsx(Checkbox, { value: orderConfirmed, checked: orderConfirmed, onChange: () => setOrderConfirmed(!orderConfirmed) }), orderConfirmed && (jsx(Typography, { color: "primary", children: "I am sure I want to confirm this order" }))] }), jsx("input", { name: "internal_status", type: "hidden", value: orderConfirmed ? "ordered" : "placed" })] }), jsx(Grid, { size: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Confirm", loadingText: "Loading...", variant: "contained" })] }) })] }) }) }));
 }
 
 export { CreateOpoForm as default };

package/dist/esm/src/components/e-commerce/opo/ManageOpoForm.js

@@ -167,13 +167,13 @@ revalidateCallback, handleClose, role, }) {
     return (jsx(Box, { sx: [
             // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
             ...(Array.isArray(sx) ? sx : [sx]),
-        ], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Manage Outbound Purchase Order" }), jsx(Typography, { variant: "body1", children: "Manage picking, packing and shipping of purchase order" })] }), jsx(NoteTakingComponent, { content: "", related: [
+        ], children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", children: [jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h3", component: "h1", children: "Manage Outbound Purchase Order" }), jsx(Typography, { variant: "body1", children: "Manage picking, packing and shipping of purchase order" })] }), jsx(NoteTakingComponent, { content: "", related: [
                                             { id: opo.documentId, __type: "api::e-commerce.opo" },
-                                        ], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { item: true, xs: 6, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Details" }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Purchase Order Number" }), jsx(Typography, { variant: "body2", children: opo.opo_number })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Custom reference" }), jsx(Typography, { variant: "body2", children: opo.customer_reference })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Date" }), jsx(Typography, { variant: "body2", children: opo.order_date })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Customer" }), jsx(Typography, { variant: "body2", children: opo.customer?.business_credentials?.company_name })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Status" }), jsx(Typography, { variant: "body2", width: "250px", children: opo.internal_status })] }), (opo.internal_status === "placed" ||
+                                        ], revalidateCallback: revalidateCallback })] }), jsx(Divider, {})] }) }), jsx(Grid, { size: 6, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Details" }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Purchase Order Number" }), jsx(Typography, { variant: "body2", children: opo.opo_number })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Custom reference" }), jsx(Typography, { variant: "body2", children: opo.customer_reference })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Date" }), jsx(Typography, { variant: "body2", children: opo.order_date })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Customer" }), jsx(Typography, { variant: "body2", children: opo.customer?.business_credentials?.company_name })] }), jsxs(Stack, { direction: "row", spacing: 2, children: [jsx(Typography, { variant: "body1", width: "250px", children: "Order Status" }), jsx(Typography, { variant: "body2", width: "250px", children: opo.internal_status })] }), (opo.internal_status === "placed" ||
                                 opo.internal_status === "external_shipping_process") &&
-                                role === "enduser" && (jsxs(Fragment, { children: [jsx(Button, { variant: "contained", color: "primary", onClick: () => setConfirmDialogOpen(true), children: "Confirm order" }), jsx(Alert, { severity: "warning", children: "Please confirm the order as soon as possible, only upon confirmation this order will be available to the dispatcher" }), jsx(ConfirmFormDialog, { open: confirmDialogOpen, handleClose: () => setConfirmDialogOpen(false), orderID: opo.documentId, currentStatus: opo.internal_status, revalidateCallback: revalidateCallback })] }))] }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1, children: opo.delivery_note ? (jsxs(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(Typography, { children: opo.delivery_note?.name }), jsx(Button, { variant: "contained", onClick: () => {
+                                role === "enduser" && (jsxs(Fragment, { children: [jsx(Button, { variant: "contained", color: "primary", onClick: () => setConfirmDialogOpen(true), children: "Confirm order" }), jsx(Alert, { severity: "warning", children: "Please confirm the order as soon as possible, only upon confirmation this order will be available to the dispatcher" }), jsx(ConfirmFormDialog, { open: confirmDialogOpen, handleClose: () => setConfirmDialogOpen(false), orderID: opo.documentId, currentStatus: opo.internal_status, revalidateCallback: revalidateCallback })] }))] }) }), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Documents" }), jsx(Paper, { sx: { p: 2 }, children: jsx(Stack, { spacing: 1, children: opo.delivery_note ? (jsxs(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(Typography, { children: opo.delivery_note?.name }), jsx(Button, { variant: "contained", onClick: () => {
                                                     downloadBase64File(`api/opos/${opo.documentId}`, "delivery_note");
-                                                }, children: "Download" })] })) : (jsxs(Fragment, { children: [jsx(Typography, { variant: "h5", children: "Delivery Note" }), jsx(Typography, { variant: "body1", children: "Here you can upload the the delivery note for this order" }), jsx(Divider, {}), jsx(UploadBase64MediaForm, { reference: "api::e-commerce.opo", refID: opo.documentId, field: "delivery_note", multiple: false, accept: "text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", path: "api/opos", componentName: "delivery_note", componentReference: "common.base64-encoded-media", revalidateCallback: revalidateCallback })] })) }) })] }) }), opo?.notes?.length > 0 && (jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: opo.notes }), jsx(Divider, {})] }) })), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), opo.internal_status === "placed" && (jsx(Alert, { severity: "warning", children: "Before confirmation you cannot update the items" })), jsx(Divider, {}), jsxs("form", { action: formAction, children: [jsx("input", { name: "id", type: "hidden", value: opo.documentId }), items &&
+                                                }, children: "Download" })] })) : (jsxs(Fragment, { children: [jsx(Typography, { variant: "h5", children: "Delivery Note" }), jsx(Typography, { variant: "body1", children: "Here you can upload the the delivery note for this order" }), jsx(Divider, {}), jsx(UploadBase64MediaForm, { reference: "api::e-commerce.opo", refID: opo.documentId, field: "delivery_note", multiple: false, accept: "text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", path: "api/opos", componentName: "delivery_note", componentReference: "common.base64-encoded-media", revalidateCallback: revalidateCallback })] })) }) })] }) }), opo?.notes?.length > 0 && (jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h5", children: "Notes" }), jsx(NotesDisplay, { notes: opo.notes }), jsx(Divider, {})] }) })), jsx(Grid, { size: 12, children: jsxs(Stack, { spacing: 1, children: [jsx(Typography, { variant: "h5", children: "Items" }), opo.internal_status === "placed" && (jsx(Alert, { severity: "warning", children: "Before confirmation you cannot update the items" })), jsx(Divider, {}), jsxs("form", { action: formAction, children: [jsx("input", { name: "id", type: "hidden", value: opo.documentId }), items &&
                                         items.map((item, index) => {
                                             console.log("item", item);
                                             return (jsx(Paper, { sx: { p: 2, mb: 2 }, children: opo.internal_status === "placed" ? (jsx(OpoItemDisplay, { item: item, index: index, image: item?.product?.image })) : (jsx(OpoItemUpdater, { item: item, index: index, handleUpdateQuantity: handleUpdateQuantity, image: item?.product?.image, revalidateCallback: revalidateCallback })) }, index));