umwd-components 0.1.731 → 0.1.733

package/dist/esm/src/components/logistics/ipo/TextualManageIPOForm.js

@@ -133,14 +133,14 @@ function TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role,
     const parseItems = (items) => {
         return items.map((item) => {
             return {
-                id: item.id,
+                id: item.documentId,
                 ordered_quantity: item.ordered_quantity,
                 received_quantity: item.received_quantity,
                 registered_quantity: item.registered_quantity,
                 released_quantity: item.released_quantity,
                 reports: item.reports?.map((report) => {
                     return {
-                        id: "id" in report ? report.id : undefined,
+                        documentId: "documentId" in report ? report.documentId : undefined,
                         quantity: report.quantity,
                         content: report.content,
                         type: report.type,
@@ -151,7 +151,7 @@ function TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role,
     };
     const handleUpdateQuantity = (value, itemID, type) => {
         const newItems = [...items];
-        const index = newItems.findIndex((item) => item.id === itemID);
+        const index = newItems.findIndex((item) => item.documentId === itemID);
         newItems[index][type] = value;
         setItems(newItems);
     };
@@ -160,7 +160,7 @@ function TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role,
      * - only used with Textual form */
     const handleAddReport = (report, itemID) => {
         const newItems = [...items];
-        const index = newItems.findIndex((item) => item.id === itemID);
+        const index = newItems.findIndex((item) => item.documentId === itemID);
         const reportsOnItem = newItems[index]?.reports || [];
         const newReports = [...reportsOnItem, report];
         if (newItems[index]?.reports == undefined) {
@@ -171,7 +171,7 @@ function TextualManageIPOForm({ data, sx, revalidateCallback, handleClose, role,
     };
     const handleRemoveReportAtIndex = (itemID, index) => {
         const newItems = [...items];
-        const itemIndex = newItems.findIndex((item) => item.id === itemID);
+        const itemIndex = newItems.findIndex((item) => item.documentId === itemID);
         const reportsOnItem = newItems[itemIndex]?.reports || [];
         const dbReports = reportsOnItem.filter((report) => "id" in report);
         const preReports = reportsOnItem.filter((report) => !("id" in report));
@@ -207,12 +207,14 @@ function TextualManageIPOForm({ 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: [{ id: data.id, __type: "api::logistics.ipo" }], 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: "Purchase Order Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.ipo_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(DescriptionIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Custom 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: "Order Date" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.order_date })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(BusinessIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Supplier" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.vendor_profile?.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: "Order Status" }), jsx(IpoStatusIndicator, { status: data.internal_status })] })] }) }) }), role === "enduser" && (jsx(Grid, { item: true, xs: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [(data.internal_status === "placed" ||
+        ], 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: [
+                                            { id: data.documentId, __type: "api::logistics.ipo" },
+                                        ], 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: "Purchase Order Number" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.ipo_number })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(DescriptionIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Custom 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: "Order Date" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.order_date })] }), jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [jsx(BusinessIcon, { color: "primary" }), jsx(Typography, { variant: "subtitle1", color: "text.secondary", width: "200px", children: "Supplier" }), jsx(Typography, { variant: "body1", fontWeight: "medium", children: data.vendor_profile?.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: "Order Status" }), jsx(IpoStatusIndicator, { status: data.internal_status })] })] }) }) }), role === "enduser" && (jsx(Grid, { item: true, xs: 6, children: jsx(Paper, { elevation: 2, sx: { p: 2, height: "100%" }, children: jsxs(Stack, { spacing: 2, children: [(data.internal_status === "placed" ||
                                     data.internal_status === "released_on_stock") && (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: data.documentId, currentStatus: data.internal_status, revalidateCallback: revalidateCallback })] })), (data.internal_status === "placed" ||
                                     data.internal_status === "ordered") && (jsxs(Fragment, { children: [jsx(Button, { variant: "contained", color: "error", onClick: () => setCancelDialogOpen(true), children: "Cancel order" }), jsx(CancelIpoDialog, { 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: jsxs(Stack, { spacing: 1, children: [role === "enduser" && (jsx(Fragment, { children: data.order_confirmation ? (jsxs(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Order Confirmation" }), jsx(Typography, { children: data.order_confirmation?.name }), jsx(Button, { variant: "contained", onClick: () => {
-                                                            downloadBase64File(`api/ipos/${data.id}`, "order_confirmation");
+                                                            downloadBase64File(`api/ipos/${data.documentId}`, "order_confirmation");
                                                         }, children: "Download" })] })) : (jsxs(Fragment, { children: [jsx(Typography, { variant: "h5", children: "Order Confirmation" }), jsx(Typography, { variant: "body1", children: "Here you can upload the the order confirmation for this order" }), jsx(Typography, { variant: "body1", children: "FileUpload" }), jsx(Divider, {}), jsx(UploadBase64MediaForm /* This form manages it's own state internally */, { reference: "api::logistics.ipo", refID: data.documentId, field: "order_confirmation", multiple: false, accept: "text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", path: "api/ipos", componentName: "order_confirmation", componentReference: "common.base64-encoded-media", revalidateCallback: revalidateCallback })] })) })), data.delivery_note ? (jsxs(Fragment, { children: [jsx(Typography, { variant: "h6", children: "Delivery Note" }), jsx(Typography, { children: data.delivery_note?.name }), jsx(Button, { variant: "contained", onClick: () => {
-                                                        downloadBase64File(`api/ipos/${data.id}`, "delivery_note");
+                                                        downloadBase64File(`api/ipos/${data.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::logistics.ipo", refID: data.documentId, field: "delivery_note", multiple: false, accept: "text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", path: "api/ipos", componentName: "delivery_note", componentReference: "common.base64-encoded-media", revalidateCallback: revalidateCallback })] }))] }) })] }) }), 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: {
                                     bgcolor: "background.default",
                                     border: "1px solid",

package/dist/esm/src/components/logistics/vendor/EditVendorForm.js

@@ -36,9 +36,8 @@ const INITIAL_STATE = {
     severity: null,
 };
 function EditVendorForm({ data, productNamesArr, revalidateCallback, handleClose, sx, }) {
-    const { id, website_url, phone_number, email, business_credentials, address, products, contacts, notes, } = data;
-    console.log("data", data);
-    const [formState, formAction] = useFormState(updateVendorAction, INITIAL_STATE);
+    const { documentId, website_url, phone_number, email, business_credentials, address, products, contacts, notes, } = data;
+    const [formState, formAction] = useFormState((prevState, formData) => updateVendorAction(documentId, prevState, formData), INITIAL_STATE);
     const { handleAddMessage } = useSnackbar();
     useEffect(() => {
         if (formState?.message) {
@@ -81,68 +80,50 @@ function EditVendorForm({ data, productNamesArr, revalidateCallback, handleClose
     // INFO must utilize the uuid to ensure that the new contacts are unique
     // this is important to use both the deleteCallback and still not have problems with the key
     const [newContacts, setNewContacts] = useState([]);
-    return (jsx(Box, { sx: [...(Array.isArray(sx) ? sx : [sx])], children: jsxs("form", { action: formAction, children: [id && jsx("input", { id: "id", type: "hidden", name: "id", value: id }), jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h5", children: "Edit Vendor" }), jsx(NoteTakingComponent, { content: "", related: [
-                                            { id: data.id, __type: "api::logistics.vendor-profile" },
-                                        ], revalidateCallback: revalidateCallback })] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(ExplanatoryFoldOut, { title: "Vendor", description: "Vendors are businesses that you purchase products from." }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(BusinessCredentialsFields, { data: business_credentials, componentName: "business_credentials", componentReference: "common.business-credentials" }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "website_url", name: "website_url", label: "Website Url", defaultValue: website_url }), jsx(TextField, { id: "phone_number", name: "phone_number", label: "Phone Number", defaultValue: phone_number }), jsx(TextField, { id: "email", name: "email", label: "Email", defaultValue: email })] }) }), jsxs(Grid, { item: true, xs: 12, md: 6, children: [jsx(Typography, { variant: "h6", children: "Address" }), jsx(AddressFields, { data: address, componentName: "address", componentReference: "common.address" })] }), jsxs(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArr, currentValue: initialProducts.map((prod) => prod.id) })] }), jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: jsx(Typography, { variant: "h6", children: "Contacts" }) }), oldContacts?.map((contact, index) => {
-                            if (contact.data?.id) {
-                                if (open.includes(contact.data?.id)) {
-                                    return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
-                                            justifyContent: "center",
+    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, { direction: "row", justifyContent: "space-between", children: [jsx(Typography, { variant: "h5", children: "Edit Vendor" }), jsx(NoteTakingComponent, { content: "", related: [
+                                        {
+                                            id: data.documentId,
+                                            __type: "api::logistics.vendor-profile",
+                                        },
+                                    ], revalidateCallback: revalidateCallback })] }) }), jsx(Grid, { item: true, xs: 12, children: jsx(ExplanatoryFoldOut, { title: "Vendor", description: "Vendors are businesses that you purchase products from." }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(BusinessCredentialsFields, { data: business_credentials, componentName: "business_credentials", componentReference: "common.business-credentials" }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "website_url", name: "website_url", label: "Website Url", defaultValue: website_url }), jsx(TextField, { id: "phone_number", name: "phone_number", label: "Phone Number", defaultValue: phone_number }), jsx(TextField, { id: "email", name: "email", label: "Email", defaultValue: email })] }) }), jsxs(Grid, { item: true, xs: 12, md: 6, children: [jsx(Typography, { variant: "h6", children: "Address" }), jsx(AddressFields, { data: address, componentName: "address", componentReference: "common.address" })] }), jsxs(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: [jsx(Typography, { variant: "h6", children: "Products" }), jsx(ProductSelector, { productNames: productNamesArr, currentValue: initialProducts.map((prod) => prod.documentId) })] }), jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: jsx(Typography, { variant: "h6", children: "Contacts" }) }), oldContacts?.map((contact, index) => {
+                        if (contact.data?.id) {
+                            if (open.includes(contact.data?.id)) {
+                                return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
+                                        justifyContent: "center",
+                                        display: "flex",
+                                        alignItems: "center",
+                                    }, children: jsx(Paper, { sx: {
+                                            p: 2,
+                                            width: "100%",
                                             display: "flex",
-                                            alignItems: "center",
-                                        }, children: jsx(Paper, { sx: {
-                                                p: 2,
-                                                width: "100%",
-                                                display: "flex",
-                                                justifyContent: "center",
-                                                alignItems: "center",
-                                                height: "100%",
-                                            }, children: jsx(ContactsFields, { data: contact.data, componentName: `contacts[${index}]`, componentReference: "logistics-elements.contact", deleteCallback: () => {
-                                                    setOldContacts(oldContacts.filter((_, i) => i !== index));
-                                                    /* setOpen(
-                                                    open.filter((openId) => openId !== contact.data?.id)
-                                                  ); */
-                                                } }) }) }, contact.data.id));
-                                }
-                                else {
-                                    return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
                                             justifyContent: "center",
-                                            display: "flex",
                                             alignItems: "center",
-                                        }, children: jsxs(Paper, { sx: {
-                                                p: 2,
-                                                width: "100%",
-                                                display: "flex",
-                                                justifyContent: "center",
-                                                alignItems: "center",
-                                                height: "100%",
-                                            }, children: [jsx("input", { type: "hidden", name: `contacts[${index}].id`, value: contact.data.id }), jsx("input", { type: "hidden", name: `contacts[${index}].__component`, value: "logistics-elements.contact" }), jsx(Contacts, { data: { ...contact.data, onClick: onClickHandler } })] }) }, contact.data.id));
-                                }
+                                            height: "100%",
+                                        }, children: jsx(ContactsFields, { data: contact.data, componentName: `contacts[${index}]`, componentReference: "logistics-elements.contact", deleteCallback: () => {
+                                                setOldContacts(oldContacts.filter((_, i) => i !== index));
+                                                /* setOpen(
+                                                open.filter((openId) => openId !== contact.data?.id)
+                                              ); */
+                                            } }) }) }, contact.data.id));
                             }
-                            return null;
-                        }), newContacts.map((contact, index) => {
-                            return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
-                                    justifyContent: "center",
-                                    display: "flex",
-                                    alignItems: "center",
-                                }, children: jsx(Paper, { sx: {
-                                        p: 2,
-                                        width: "100%",
-                                        display: "flex",
+                            else {
+                                return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
                                         justifyContent: "center",
+                                        display: "flex",
                                         alignItems: "center",
-                                        height: "100%",
-                                    }, children: jsx(ContactsFields, { data: contact.data, componentName: contact.componentName, componentReference: "logistics-elements.contact", deleteCallback: () => {
-                                            setNewContacts(newContacts
-                                                .filter((_, i) => i !== index)
-                                                .map((_, i) => {
-                                                return {
-                                                    ..._,
-                                                    componentName: `contacts[${i + oldContacts.length}]`,
-                                                };
-                                            }));
-                                        } }) }) }, contact.data?.id || index));
-                        }), jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
+                                    }, children: jsxs(Paper, { sx: {
+                                            p: 2,
+                                            width: "100%",
+                                            display: "flex",
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            height: "100%",
+                                        }, children: [jsx("input", { type: "hidden", name: `contacts[${index}].id`, value: contact.data.id }), jsx("input", { type: "hidden", name: `contacts[${index}].__component`, value: "logistics-elements.contact" }), jsx(Contacts, { data: { ...contact.data, onClick: onClickHandler } })] }) }, contact.data.id));
+                            }
+                        }
+                        return null;
+                    }), newContacts.map((contact, index) => {
+                        return (jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
                                 justifyContent: "center",
                                 display: "flex",
                                 alignItems: "center",
@@ -153,23 +134,44 @@ function EditVendorForm({ data, productNamesArr, revalidateCallback, handleClose
                                     justifyContent: "center",
                                     alignItems: "center",
                                     height: "100%",
-                                }, children: jsx(Button, { variant: "contained", startIcon: jsx(AddIcon, {}), onClick: () => {
-                                        setNewContacts([
-                                            ...newContacts,
-                                            {
-                                                componentName: `contacts[${oldContacts.length + newContacts.length}]`,
-                                                componentReference: "logistics-elements.contact",
-                                                data: {
-                                                    uuid: Math.random(),
-                                                    first_name: "",
-                                                    last_name: "",
-                                                    email: "",
-                                                    phone_number: "",
-                                                    type: ContactType.Other,
-                                                },
+                                }, children: jsx(ContactsFields, { data: contact.data, componentName: contact.componentName, componentReference: "logistics-elements.contact", deleteCallback: () => {
+                                        setNewContacts(newContacts
+                                            .filter((_, i) => i !== index)
+                                            .map((_, i) => {
+                                            return {
+                                                ..._,
+                                                componentName: `contacts[${i + oldContacts.length}]`,
+                                            };
+                                        }));
+                                    } }) }) }, contact.data?.id || index));
+                    }), jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, sx: {
+                            justifyContent: "center",
+                            display: "flex",
+                            alignItems: "center",
+                        }, children: jsx(Paper, { sx: {
+                                p: 2,
+                                width: "100%",
+                                display: "flex",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                height: "100%",
+                            }, children: jsx(Button, { variant: "contained", startIcon: jsx(AddIcon, {}), onClick: () => {
+                                    setNewContacts([
+                                        ...newContacts,
+                                        {
+                                            componentName: `contacts[${oldContacts.length + newContacts.length}]`,
+                                            componentReference: "logistics-elements.contact",
+                                            data: {
+                                                uuid: Math.random(),
+                                                first_name: "",
+                                                last_name: "",
+                                                email: "",
+                                                phone_number: "",
+                                                type: ContactType.Other,
                                             },
-                                        ]);
-                                    }, size: "large", children: "Add contact" }) }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Notes" }), notes?.data !== undefined ? (jsx(NotesDisplay, { notes: notes.data })) : (jsx(Typography, { children: "No notes to display" }))] }), " ", jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", sx: { mt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Update Vendor", loadingText: "Updating..." })] }) })] })] }) }));
+                                        },
+                                    ]);
+                                }, size: "large", children: "Add contact" }) }) }), jsxs(Grid, { item: true, xs: 12, children: [jsx(Typography, { variant: "h6", children: "Notes" }), notes?.data !== undefined ? (jsx(NotesDisplay, { notes: notes.data })) : (jsx(Typography, { children: "No notes to display" }))] }), " ", jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", sx: { mt: 2 }, children: [handleClose && (jsx(Button, { onClick: handleClose, variant: "outlined", children: "Cancel" })), jsx(SubmitButton, { text: "Update Vendor", loadingText: "Updating..." })] }) })] }) }) }));
 }
 
 export { EditVendorForm };

package/dist/esm/src/components/logistics/vendor/VendorDisplay.js

@@ -18,7 +18,7 @@ import { ExplanatoryFoldOut } from '../../ExplanatoryFoldOut.js';
 import Contacts from '../../common/Contacts.js';
 
 function VendorDisplay({ data, sx }) {
-    const { id, website_url, phone_number, email, business_credentials, address, products, contacts, } = data;
+    const { documentId, website_url, phone_number, email, business_credentials, address, products, contacts, } = data;
     console.log(contacts);
     return (jsxs(Box, { sx: [
             // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.

package/dist/esm/src/components/logistics/vendor/VendorSelector.js

@@ -18,12 +18,13 @@ const VendorSelector = ({ vendorNames, currentValue, onSelectVendor, }) => {
     const [selectedValue, setSelectedValue] = useState(currentValue || null);
     const handleVendorChange = (event, value) => {
         // if (!value) return;
-        const id = value?.id || null;
-        setSelectedValue(id);
+        const documentId = value?.documentId || null;
+        setSelectedValue(documentId);
         if (onSelectVendor)
-            onSelectVendor(id);
+            onSelectVendor(documentId);
     };
-    return (jsxs(Fragment, { children: [jsx(Autocomplete, { options: vendorNames, getOptionLabel: (option) => option?.business_credentials?.company_name, filterSelectedOptions: true, onChange: handleVendorChange, renderInput: (params) => jsx(TextField, { ...params, label: "Vendors" }), value: vendorNames?.find((vendor) => vendor.id === selectedValue) || null }), jsx("input", { type: "hidden", name: "vendors", value: selectedValue ? JSON.stringify(selectedValue) : "" })] }));
+    return (jsxs(Fragment, { children: [jsx(Autocomplete, { options: vendorNames, getOptionLabel: (option) => option?.business_credentials?.company_name, filterSelectedOptions: true, onChange: handleVendorChange, renderInput: (params) => jsx(TextField, { ...params, label: "Vendors" }), value: vendorNames?.find((vendor) => vendor.documentId === selectedValue) ||
+                    null }), jsx("input", { type: "hidden", name: "vendors", value: selectedValue ? selectedValue : "" })] }));
 };
 
 export { VendorSelector as default };

package/dist/esm/src/components/page-elements/CategoryBlock.js

@@ -29,7 +29,7 @@ function CategoryBlock({ data }) {
                     }, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h4", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: data.category.title }), data.category?.description &&
                                 typeof data.category.description === "string" && (jsx(MarkdownDisplay, { children: data.category.description.substring(0, 150) + "..." })), jsx(Button, { variant: "contained", href: `/shop/categories/${data.category.slug}`, children: "Learn More" }), data.category?.products?.data != undefined && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 2 } }), jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, justifyContent: "space-around", sx: { pt: 2 }, children: data.category.products.data
                                             .slice(0, previewAmount)
-                                            .map((product) => (jsx(ProductCard, { product: product }, product.id))) })] })), jsx(Typography, { variant: "body2", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: "Show all" })] }) }) }) }) }));
+                                            .map((product) => (jsx(ProductCard, { product: product }, product.documentId))) })] })), jsx(Typography, { variant: "body2", component: "a", href: `/shop/categories/${data.category.slug}`, sx: { textDecoration: "none", color: "inherit" }, children: "Show all" })] }) }) }) }) }));
 }
 
 export { CategoryBlock };

package/dist/esm/src/components/public-information/PublicInformationForm.js

@@ -32,8 +32,8 @@ const INITIAL_STATE = {
     message: null,
 };
 function PublicInformationForm({ publicInformation, sx, }) {
-    const { id, title, description, disclaimer_link, privacypolicy_link, maxWidth, email, phone_number, business_credentials, address, socials, header_logo, footer_logo, } = publicInformation;
-    const [formState, formAction] = useFormState(updatePublicInformationAction, INITIAL_STATE);
+    const { documentId, title, description, disclaimer_link, privacypolicy_link, maxWidth, email, phone_number, business_credentials, address, socials, header_logo, footer_logo, } = publicInformation;
+    const [formState, formAction] = useFormState((prevState, formData) => updatePublicInformationAction(documentId, prevState, formData), INITIAL_STATE);
     const [open, setOpen] = useState([]);
     const onClickHandler = (event, id) => {
         if (open.includes(id)) {
@@ -58,48 +58,48 @@ function PublicInformationForm({ publicInformation, sx, }) {
             // You cannot spread `sx` directly because `SxProps` (typeof sx) can be an array.
             { p: 2 },
             ...(Array.isArray(sx) ? sx : [sx]),
-        ], component: Paper, children: jsxs("form", { action: formAction, children: [id && jsx("input", { id: "id", type: "hidden", name: "id", value: id }), jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h5", children: "Edit Public Information" }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: title }), jsx(TextField, { id: "description", name: "description", label: "Description", defaultValue: description }), jsx(TextField, { id: "email", name: "email", label: "email", defaultValue: email }), jsx(TextField, { id: "phone_number", name: "phone_number", label: "phone_number", defaultValue: phone_number })] }) }), jsx(Grid, { item: true, xs: 12, lg: 6, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Divider, {}), jsx(AddressFields, { componentName: "address", componentReference: "common.address", data: address })] }) }), jsx(Grid, { item: true, xs: 12, lg: 6, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Business Credentials" }), jsx(Divider, {}), jsx(BusinessCredentialsFields, { componentName: "business_credentials", componentReference: "business.credentials", data: business_credentials })] }) }), jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: jsx(Typography, { variant: "h6", children: "Socials" }) }), oldSocials.map((social, index) => {
-                            if (social.data?.id) {
-                                if (open.includes(social.data?.id)) {
-                                    return (jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(SocialsFields, { data: social.data, componentName: `socials[${index}]`, componentReference: "common.social", deleteCallback: () => {
-                                                setOldSocials(oldSocials.filter((_, i) => i !== index));
-                                                /* setOpen(
-                                                  open.filter((openId) => openId !== social.data?.id)
-                                                ); */
-                                            } }) }, social.data.id));
-                                }
-                                else {
-                                    return (jsxs(Grid, { item: true, xs: 12, md: 6, lg: 4, children: [jsx("input", { type: "hidden", name: `socials[${index}].id`, value: social.data.id }), jsx("input", { type: "hidden", name: `socials[${index}].__component`, value: "logistics-elements.social" }), jsx(SocialsDisplay, { data: { ...social.data, onClick: onClickHandler } })] }, social.data.id));
-                                }
+        ], component: Paper, children: jsx("form", { action: formAction, children: jsxs(Grid, { container: true, spacing: 2, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Typography, { variant: "h5", children: "Edit Public Information" }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { spacing: 2, children: [jsx(TextField, { id: "title", name: "title", label: "Title", defaultValue: title }), jsx(TextField, { id: "description", name: "description", label: "Description", defaultValue: description }), jsx(TextField, { id: "email", name: "email", label: "email", defaultValue: email }), jsx(TextField, { id: "phone_number", name: "phone_number", label: "phone_number", defaultValue: phone_number })] }) }), jsx(Grid, { item: true, xs: 12, lg: 6, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Company Address" }), jsx(Divider, {}), jsx(AddressFields, { componentName: "address", componentReference: "common.address", data: address })] }) }), jsx(Grid, { item: true, xs: 12, lg: 6, children: jsxs(Stack, { spacing: 2, children: [jsx(Typography, { variant: "h6", children: "Business Credentials" }), jsx(Divider, {}), jsx(BusinessCredentialsFields, { componentName: "business_credentials", componentReference: "business.credentials", data: business_credentials })] }) }), jsx(Grid, { item: true, xs: 12, sx: { mt: 1 }, children: jsx(Typography, { variant: "h6", children: "Socials" }) }), oldSocials.map((social, index) => {
+                        if (social.data?.id) {
+                            if (open.includes(social.data?.id)) {
+                                return (jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(SocialsFields, { data: social.data, componentName: `socials[${index}]`, componentReference: "common.social", deleteCallback: () => {
+                                            setOldSocials(oldSocials.filter((_, i) => i !== index));
+                                            /* setOpen(
+                                              open.filter((openId) => openId !== social.data?.id)
+                                            ); */
+                                        } }) }, social.data.id));
                             }
-                            return null;
-                        }), newSocials.map((social, index) => {
-                            return (jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(SocialsFields, { data: social.data, componentName: social.componentName, componentReference: "common.social", deleteCallback: () => {
-                                        setNewSocials(newSocials
-                                            .filter((_, i) => i !== index)
-                                            .map((_, i) => {
-                                            return {
-                                                ..._,
-                                                componentName: `socials[${i + oldSocials.length}]`,
-                                            };
-                                        }));
-                                    } }) }, social.data?.uuid));
-                        }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, justifyContent: "center", alignItems: "center", children: jsx(IconButton, { onClick: () => {
-                                    setNewSocials([
-                                        ...newSocials,
-                                        {
-                                            componentName: `socials[${oldSocials.length + newSocials.length}]`,
-                                            componentReference: "logistics-elements.social",
-                                            data: {
-                                                uuid: Math.random(),
-                                                name: "",
-                                                url: "",
-                                            },
+                            else {
+                                return (jsxs(Grid, { item: true, xs: 12, md: 6, lg: 4, children: [jsx("input", { type: "hidden", name: `socials[${index}].id`, value: social.data.id }), jsx("input", { type: "hidden", name: `socials[${index}].__component`, value: "logistics-elements.social" }), jsx(SocialsDisplay, { data: { ...social.data, onClick: onClickHandler } })] }, social.data.id));
+                            }
+                        }
+                        return null;
+                    }), newSocials.map((social, index) => {
+                        return (jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(SocialsFields, { data: social.data, componentName: social.componentName, componentReference: "common.social", deleteCallback: () => {
+                                    setNewSocials(newSocials
+                                        .filter((_, i) => i !== index)
+                                        .map((_, i) => {
+                                        return {
+                                            ..._,
+                                            componentName: `socials[${i + oldSocials.length}]`,
+                                        };
+                                    }));
+                                } }) }, social.data?.uuid));
+                    }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, justifyContent: "center", alignItems: "center", children: jsx(IconButton, { onClick: () => {
+                                setNewSocials([
+                                    ...newSocials,
+                                    {
+                                        componentName: `socials[${oldSocials.length + newSocials.length}]`,
+                                        componentReference: "logistics-elements.social",
+                                        data: {
+                                            uuid: Math.random(),
+                                            name: "",
+                                            url: "",
                                         },
-                                    ]);
-                                }, children: jsx(AddIcon, {}) }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row-reverse", spacing: 2, alignItems: "center", sx: {
-                                    py: 1,
-                                }, children: [jsx(SubmitButton, { text: "save changes", loadingText: "loading" }), formState?.strapiErrors && (jsx(StrapiErrors, { error: formState?.strapiErrors })), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message }))] }) })] })] }) }));
+                                    },
+                                ]);
+                            }, children: jsx(AddIcon, {}) }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Stack, { direction: "row-reverse", spacing: 2, alignItems: "center", sx: {
+                                py: 1,
+                            }, children: [jsx(SubmitButton, { text: "save changes", loadingText: "loading" }), formState?.strapiErrors && (jsx(StrapiErrors, { error: formState?.strapiErrors })), formState?.message && (jsx(Alert, { severity: "error", children: formState?.message }))] }) })] }) }) }));
 }
 
 export { PublicInformationForm };

package/dist/esm/src/context/e-commerce/cart/CartContext.js

@@ -25,7 +25,7 @@ const CartContext = createContext({
 const cartReducer = (state, action) => {
     switch (action.type) {
         case "ADD_ITEM": {
-            const existingItemIndex = state.items.findIndex((item) => item.id === action.payload.id);
+            const existingItemIndex = state.items.findIndex((item) => item.documentId === action.payload.documentId);
             if (existingItemIndex > -1) {
                 const updatedItems = state.items.map((item, index) => index === existingItemIndex
                     ? { ...item, quantity: item.quantity + action.payload.quantity }
@@ -35,7 +35,7 @@ const cartReducer = (state, action) => {
             return { ...state, items: [...state.items, action.payload] };
         }
         case "REMOVE_ITEM": {
-            const existingItemIndex = state.items.findIndex((item) => item.id === action.payload.id);
+            const existingItemIndex = state.items.findIndex((item) => item.documentId === action.payload.documentId);
             if (existingItemIndex > -1) {
                 const updatedItems = state.items
                     .map((item, index) => index === existingItemIndex

package/dist/esm/src/data/actions/e-commerce/categories/updateCategoryAction.js

@@ -9,8 +9,8 @@ import { mutateData } from '../../../services/mutate-data.js';
 import { flattenAttributes } from '../../../../lib/utils.js';
 import { parseFormData } from '../../../../lib/parseFormData.js';
 
-async function updateCategoryAction(prevState, formData) {
-    const rawFormData = Object.fromEntries(formData);
+async function updateCategoryAction(documentId, prevState, formData) {
+    Object.fromEntries(formData);
     const parsedFormData = parseFormData(formData);
     /**
      * INFO: The products are JSONStringyfied in the frontend to add them to the hidden input
@@ -19,7 +19,7 @@ async function updateCategoryAction(prevState, formData) {
     if (parsedFormData.data.products) {
         parsedFormData.data.products = JSON.parse(parsedFormData.data.products);
     }
-    const responseData = await mutateData("PUT", `/api/product-categories/${rawFormData.id}`, parsedFormData);
+    const responseData = await mutateData("PUT", `/api/product-categories/${documentId}`, parsedFormData);
     if (!responseData) {
         return {
             ...prevState,

package/dist/esm/src/data/actions/e-commerce/enduser/profile-actions.js

@@ -9,9 +9,9 @@ import { mutateData } from '../../../services/mutate-data.js';
 import { flattenAttributes } from '../../../../lib/utils.js';
 import { parseFormData } from '../../../../lib/parseFormData.js';
 
-async function updateEnduserProfileAction(id, prevState, formData) {
+async function updateEnduserProfileAction(documentId, prevState, formData) {
     const parsedFormData = parseFormData(formData);
-    const responseData = await mutateData("PUT", `/api/enduser-profiles/${id}`, parsedFormData);
+    const responseData = await mutateData("PUT", `/api/enduser-profiles/${documentId}`, parsedFormData);
     if (!responseData) {
         return {
             ...prevState,

package/dist/esm/src/data/actions/e-commerce/product/updateProductAction.js

@@ -6,11 +6,10 @@
  */
   
 import { mutateData } from '../../../services/mutate-data.js';
-import { flattenAttributes } from '../../../../lib/utils.js';
 import { parseFormData } from '../../../../lib/parseFormData.js';
 
-async function updateProductAction(prevState, formData) {
-    const rawFormData = Object.fromEntries(formData);
+async function updateProductAction(documentId, prevState, formData) {
+    Object.fromEntries(formData);
     const parsedFormData = parseFormData(formData);
     /**
      * INFO: The categories are JSONStringyfied in the frontend to add them to the hidden input
@@ -29,7 +28,7 @@ async function updateProductAction(prevState, formData) {
     if (parsedFormData.data.stock_reports) {
         parsedFormData.data.stock_reports = JSON.parse(parsedFormData.data.stock_reports);
     }
-    const responseData = await mutateData("PUT", `/api/products/${rawFormData.id}`, parsedFormData);
+    const responseData = await mutateData("PUT", `/api/products/${documentId}`, parsedFormData);
     if (!responseData) {
         return {
             ...prevState,
@@ -46,12 +45,12 @@ async function updateProductAction(prevState, formData) {
             message: "Failed to Update Product.",
         };
     }
-    const flattenedData = flattenAttributes(responseData);
+    // const flattenedData = flattenAttributes(responseData);
     return {
         ...prevState,
         severity: "success",
         message: "Product Updated Successfully",
-        data: flattenedData,
+        data: responseData,
         strapiErrors: null,
     };
 }

package/dist/esm/src/data/actions/logistics/dispatcher/profile-actions.js

@@ -9,9 +9,9 @@ import { mutateData } from '../../../services/mutate-data.js';
 import { flattenAttributes } from '../../../../lib/utils.js';
 import { parseFormData } from '../../../../lib/parseFormData.js';
 
-async function updateDispatcherProfileAction(id, prevState, formData) {
+async function updateDispatcherProfileAction(documentId, prevState, formData) {
     const parsedFormData = parseFormData(formData);
-    const responseData = await mutateData("PUT", `/api/dispatcher-profiles/${id}`, parsedFormData);
+    const responseData = await mutateData("PUT", `/api/dispatcher-profiles/${documentId}`, parsedFormData);
     if (!responseData) {
         return {
             ...prevState,

package/dist/esm/src/data/actions/logistics/vendor/updateVendorAction.js

@@ -9,14 +9,14 @@ import { mutateData } from '../../../services/mutate-data.js';
 import { flattenAttributes } from '../../../../lib/utils.js';
 import { parseFormData } from '../../../../lib/parseFormData.js';
 
-async function updateVendorAction(prevState, formData) {
+async function updateVendorAction(documentId, prevState, formData) {
     try {
         const rawFormData = Object.fromEntries(formData);
         const parsedFormData = parseFormData(formData);
         if (parsedFormData.data.products) {
             parsedFormData.data.products = JSON.parse(parsedFormData.data.products);
         }
-        const responseData = await mutateData("PUT", `/api/vendor-profiles/${rawFormData.id}`, parsedFormData);
+        const responseData = await mutateData("PUT", `/api/vendor-profiles/${documentId}`, parsedFormData);
         if (!responseData) {
             return {
                 ...prevState,

package/dist/esm/src/data/actions/media/uploadBase64MediaAction.js

@@ -24,7 +24,7 @@ const fileSchema = z.object({
       )
       .refine((file) => file.size <= MAX_FILE_SIZE, `Max file size is 5MB.`), */
 });
-async function uploadBase64MediaAction(path, id, component_name, prevState, formData) {
+async function uploadBase64MediaAction(path, documentId, component_name, prevState, formData) {
     // CONVERT FORM DATA TO OBJECT
     const rawFormData = Object.fromEntries(formData);
     parseFormData(formData);
@@ -43,7 +43,7 @@ async function uploadBase64MediaAction(path, id, component_name, prevState, form
     }
     // UPLOAD NEW IMAGE TO MEDIA LIBRARY
     // const fileUploadResponse = await fileUploadService(formData);
-    const url = `${path}/${id}`;
+    const url = `${path}/${documentId}`;
     // const files = rawFormData.files;
     const files = formData.getAll("files");
     files
@@ -78,7 +78,7 @@ async function uploadBase64MediaAction(path, id, component_name, prevState, form
     }));
     const parsedData = {
         data: {
-            id: id,
+            documentId: documentId,
             [component_name]: filesData[0],
         },
     };

package/dist/esm/src/data/actions/pagebuilder-actions.js

@@ -10,7 +10,7 @@ import { formDataToBlocks } from '../../lib/utils.js';
 import { mutateData } from '../services/mutate-data.js';
 
 const schemaUpdate = z.object({
-    id: z.string(),
+    documentId: z.string(),
     title: z.string().min(3).max(100, {
         message: "Title must be between 3 and 100 characters",
     }),
@@ -108,7 +108,7 @@ const schemaUpdate = z.object({
 async function updatePageAction(prevState, formData) {
     const newBlocks = formDataToBlocks(formData);
     const validatedFields = schemaUpdate.safeParse({
-        id: formData.get("id"),
+        documentId: formData.get("documentId"),
         title: formData.get("title"),
         description: formData.get("description"),
         blocks: newBlocks,
@@ -123,7 +123,7 @@ async function updatePageAction(prevState, formData) {
     }
     const { data } = validatedFields;
     // important: the mutate data function expects an object (payload/body) with a data key
-    const responseData = await mutateData("PUT", `/api/pages/${data.id}`, {
+    const responseData = await mutateData("PUT", `/api/pages/${data.documentId}`, {
         data: data,
     });
     if (!responseData) {