@visns-studio/visns-components 1.2.4 → 1.2.6

package/components/crm/visns-data-grid.jsx

@@ -5,6 +5,10 @@ import debounce from "lodash.debounce";
 import moment from "moment";
 import numeral from "numeral";
 import Popup from "reactjs-popup";
+import parse from "html-react-parser";
+import NumberFilter from "@inovua/reactdatagrid-community/NumberFilter";
+import SelectFilter from "@inovua/reactdatagrid-community/SelectFilter";
+import DateFilter from "@inovua/reactdatagrid-community/DateFilter";
 import ReactDataGrid from "@inovua/reactdatagrid-community";
 import { confirmAlert } from "react-confirm-alert";
 import { toast } from "react-toastify";
@@ -105,6 +109,8 @@ const DataGrid = (props) => {
 		(params) => loadData(params, dSearch, ajaxSetting),
 		[ajaxSetting, dataReload, dSearch]
 	);
+	const [filterDataSource, setFilterDataSource] = useState([]);
+	const [filterValue, setFilterValue] = useState([]);
 	const [gridColumns, setGridColumns] = useState([]);
 	const limit = ajaxSetting.take || 10;
 	const [search, setSearch] = useState("");
@@ -157,7 +163,9 @@ const DataGrid = (props) => {
 												`The selected item has been deleted.`
 											);
 										} else {
-											toast.error(String(result.error));
+											toast.error(
+												<div>{parse(result.error)}</div>
+											);
 										}
 									}
 								),
@@ -195,7 +203,9 @@ const DataGrid = (props) => {
 
 											toast.success(String(s.title));
 										} else {
-											toast.error(String(result.error));
+											toast.error(
+												<div>{parse(result.error)}</div>
+											);
 										}
 									}
 								),
@@ -259,6 +269,45 @@ const DataGrid = (props) => {
 		};
 	}, []);
 
+	const renderCreateButton = () => {
+		if (form.createDisable && form.createDisable === true) {
+			return null;
+		}
+
+		return (
+			<div className="filterAction--alt">
+				<button
+					className="btn"
+					onClick={() => {
+						modalOpen("create", 0);
+					}}
+				>
+					<div className="icon-plus"></div> Create
+				</button>
+			</div>
+		);
+	};
+
+	const renderSearch = () => {
+		const searchEnable = !(
+			form.searchDisable && form.searchDisable === true
+		);
+
+		return searchEnable ? (
+			<div className="filterInput--alt">
+				<div className="icon-search">
+					<Search strokeWidth={2} size={18} />
+				</div>
+				<input
+					type="text"
+					placeholder="Search"
+					value={search}
+					onChange={handleChangeSearch}
+				/>
+			</div>
+		) : null;
+	};
+
 	/** Table Hooks */
 	useEffect(() => {
 		const delayedSetDSearch = debounce(() => {
@@ -350,28 +399,41 @@ const DataGrid = (props) => {
 
 	useEffect(() => {
 		const renderColumn = (column) => {
+			let filterEditor = null;
+			let filterEditorProps = null;
+			let selectedDataSource = null;
+			let icons = [];
+			let relationName;
+			let stage;
+			let value;
+
+			const commonProps = {
+				header: column.label,
+				defaultFlex: 1,
+				link: column.link ? column.link : {},
+				minWidth:
+					column.minWidth && column.minWidth > 0
+						? column.minWidth
+						: undefined,
+				maxWidth:
+					column.maxWidth && column.maxWidth > 0
+						? column.maxWidth
+						: undefined,
+			};
+
 			switch (column.type) {
 				case "created_by":
 					return {
+						...commonProps,
 						name: "audits.name",
-						header: column.label,
-						defaultFlex: 1,
-						link: column.link ? column.link : {},
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
+						sortable: false,
 						render: ({ data }) => {
 							if (
 								data.audits[0] &&
 								data.audits[0].user &&
 								data.audits[0].user.name
 							) {
-								let value = data.audits[0].user.name;
+								value = data.audits[0].user.name;
 
 								return <span>{value}</span>;
 							} else {
@@ -381,18 +443,8 @@ const DataGrid = (props) => {
 					};
 				case "currency":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
 						render: ({ data }) => {
 							if (data) {
 								data = numeral(data[column.id]).format(
@@ -406,19 +458,24 @@ const DataGrid = (props) => {
 						},
 					};
 				case "date":
+					if (column.filter && column.filter.type) {
+						filterEditor = DateFilter;
+						filterEditorProps = (props, { index }) => {
+							return {
+								dateFormat: "DD-MM-YYYY",
+								placeholder: "All Dates",
+							};
+						};
+					} else {
+						filterEditor = null;
+						filterEditorProps = null;
+					}
+
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
+						filterEditor: filterEditor,
+						filterEditorProps: filterEditorProps,
 						render: ({ data }) => {
 							if (data && data[column.id]) {
 								data = moment(data[column.id]).format(
@@ -432,19 +489,24 @@ const DataGrid = (props) => {
 						},
 					};
 				case "datetime":
+					if (column.filter && column.filter.type) {
+						filterEditor = DateFilter;
+						filterEditorProps = (props, { index }) => {
+							return {
+								dateFormat: "DD-MM-YYYY",
+								placeholder: "All Dates",
+							};
+						};
+					} else {
+						filterEditor = null;
+						filterEditorProps = null;
+					}
+
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
+						filterEditor: filterEditor,
+						filterEditorProps: filterEditorProps,
 						render: ({ data }) => {
 							if (data && data[column.id]) {
 								data = moment(data[column.id]).format(
@@ -461,18 +523,9 @@ const DataGrid = (props) => {
 					};
 				case "file":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
+						sortable: false,
 						render: ({ data }) => {
 							if (data) {
 								return (
@@ -493,20 +546,11 @@ const DataGrid = (props) => {
 					};
 				case "icons":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
+						sortable: false,
 						render: ({ data }) => {
-							let icons = [];
+							icons = [];
 
 							if (column.icons && column.icons.length > 0) {
 								column.icons.forEach((icon) => {
@@ -521,23 +565,17 @@ const DataGrid = (props) => {
 								});
 							}
 
-							return <span>{icons}</span>;
+							if (data) {
+								return <span>{icons}</span>;
+							} else {
+								return null;
+							}
 						},
 					};
 				case "json":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
 						render: ({ data }) => {
 							if (
 								data &&
@@ -554,34 +592,14 @@ const DataGrid = (props) => {
 					};
 				case "number":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
 						type: "number",
 					};
 				case "option":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
 						render: ({ data }) => {
 							if (
 								data &&
@@ -598,44 +616,50 @@ const DataGrid = (props) => {
 					};
 				case "placeholder":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
+						sortable: false,
 						render: ({ data }) => {
-							return <span>{column.placeholder}</span>;
+							if (data) {
+								return <span>{column.placeholder}</span>;
+							} else {
+								return null;
+							}
 						},
 					};
 				case "relation":
-					let relationName = column.id.reduce(
+					relationName = column.id.reduce(
 						(acc, id) => acc + `${id}.`,
 						""
 					);
 					relationName += column.nameFrom;
 
+					selectedDataSource = filterDataSource.reduce((acc, fds) => {
+						if (fds.id === relationName) {
+							return fds.dataset;
+						}
+						return acc;
+					}, null);
+
+					if (column.filter && column.filter.type) {
+						filterEditor = SelectFilter;
+						filterEditorProps = {
+							placeholder: "All Options",
+							dataSource: selectedDataSource,
+						};
+					} else {
+						filterEditor = null;
+						filterEditorProps = null;
+					}
+
 					return {
+						...commonProps,
 						name: relationName,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
+						sortable: false,
+						filterEditor: filterEditor,
+						filterEditorProps: filterEditorProps,
 						render: ({ data }) => {
-							let value = column.id.reduce((acc, id) => {
+							value = column.id.reduce((acc, id) => {
 								if (acc === "") {
 									return data[id];
 								} else {
@@ -666,23 +690,34 @@ const DataGrid = (props) => {
 						},
 					};
 				case "relationArray":
-					const relationArrayName =
+					relationName =
 						column.id.reduce((acc, id) => acc + `${id}.`, "") +
 						column.nameFrom;
 
+					selectedDataSource = filterDataSource.reduce((acc, fds) => {
+						if (fds.id === relationName) {
+							return fds.dataset;
+						}
+						return acc;
+					}, null);
+
+					if (column.filter && column.filter.type) {
+						filterEditor = SelectFilter;
+						filterEditorProps = {
+							placeholder: "All Options",
+							dataSource: selectedDataSource,
+						};
+					} else {
+						filterEditor = null;
+						filterEditorProps = null;
+					}
+
 					return {
-						name: relationArrayName,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
+						...commonProps,
+						name: relationName,
+						sortable: false,
+						filterEditor: filterEditor,
+						filterEditorProps: filterEditorProps,
 						render: ({ data }) => {
 							const relationValue = column.id.reduce(
 								(acc, id) => (acc === "" ? data[id] : acc[id]),
@@ -702,20 +737,11 @@ const DataGrid = (props) => {
 
 				case "stage":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
+						sortable: false,
 						render: ({ data }) => {
-							let stage = "";
+							stage = "";
 
 							column.keyIds.forEach((a, b) => {
 								if (data[a] === 1) {
@@ -728,18 +754,8 @@ const DataGrid = (props) => {
 					};
 				case "time":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
 						render: ({ data }) => {
 							if (data && data[column.id]) {
 								data = moment(data[column.id]).format(
@@ -754,18 +770,8 @@ const DataGrid = (props) => {
 					};
 				case "url":
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
 						render: ({ data }) => {
 							if (data) {
 								return (
@@ -782,18 +788,8 @@ const DataGrid = (props) => {
 					};
 				default:
 					return {
+						...commonProps,
 						name: column.id,
-						header: column.label,
-						defaultFlex: 1,
-						minWidth:
-							column.minWidth && column.minWidth > 0
-								? column.minWidth
-								: undefined,
-						maxWidth:
-							column.maxWidth && column.maxWidth > 0
-								? column.maxWidth
-								: undefined,
-						link: column.link ? column.link : {},
 					};
 			}
 		};
@@ -828,7 +824,62 @@ const DataGrid = (props) => {
 		}
 
 		setGridColumns(newColumns);
-	}, [columns]);
+
+		const newFilterValue = columns
+			.filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
+			.map((column) => {
+				// Map these filtered columns to a new object array
+				const filterName = Array.isArray(column.id)
+					? column.id.reduce((acc, id) => acc + `${id}.`, "") +
+					  column.nameFrom
+					: column.id;
+
+				return {
+					name: filterName,
+					operator: column.filter.operator,
+					type: column.filter.type,
+					value: "",
+				};
+			});
+
+		setFilterValue(newFilterValue);
+	}, [columns, filterDataSource]);
+
+	useEffect(() => {
+		columns.forEach((column) => {
+			if (column.filter && column.filter.url) {
+				CustomFetch(column.filter.url, "POST", {}, (res) => {
+					const filterName = Array.isArray(column.id)
+						? column.id.reduce((acc, id) => acc + `${id}.`, "") +
+						  column.nameFrom
+						: column.id;
+
+					const filterIndex = filterDataSource.findIndex(
+						(filter) => filter.id === filterName
+					);
+
+					if (filterIndex >= 0) {
+						const updatedFilter = {
+							...filterDataSource[filterIndex],
+							dataset: res.data,
+						};
+						const updatedDataSource = [
+							...filterDataSource.slice(0, filterIndex),
+							updatedFilter,
+							...filterDataSource.slice(filterIndex + 1),
+						];
+						setFilterDataSource(updatedDataSource);
+					} else {
+						const newFilter = { id: filterName, dataset: res.data };
+						setFilterDataSource((prevState) => [
+							...prevState,
+							newFilter,
+						]);
+					}
+				});
+			}
+		});
+	}, []);
 
 	// Data Grid Styling
 	const [windowHeight, setWindowHeight] = useState(window.innerHeight);
@@ -854,33 +905,16 @@ const DataGrid = (props) => {
 
 	return (
 		<>
-			<div className="filterInput--alt">
-				<div className="icon-search">
-					<Search strokeWidth={2} size={18} />
-				</div>
-				<input
-					type="text"
-					placeholder="Search"
-					value={search}
-					onChange={handleChangeSearch}
-				/>
-			</div>
-			<div className="filterAction--alt">
-				<button
-					className="btn"
-					onClick={() => {
-						modalOpen("create", 0);
-					}}
-				>
-					<div className="icon-plus"></div> Create
-				</button>
-			</div>
+			{renderSearch()}
+			{renderCreateButton()}
 			<ReactDataGrid
 				columns={gridColumns}
 				dataSource={data}
+				filterValue={filterValue}
 				defaultLimit={limit}
 				defaultSortInfo={sortInfo}
 				enableColumnAutosize={false}
+				enableColumnFilterContextMenu={false}
 				headerProps={headerProps}
 				idProperty={`visns-datagrid-${ajaxSetting.url.replace(
 					/\//g,

package/components/crm/visns-download.jsx

@@ -1,102 +1,65 @@
-import _ from 'lodash';
-import axios from 'axios';
-import { trackPromise } from 'react-promise-tracker';
+import axios from "axios";
+import { trackPromise } from "react-promise-tracker";
 
-const CustomDownload = (
-    url,
-    method,
-    formData,
-    successCallback,
-    errorCallback
+const CustomDownload = async (
+	url,
+	method,
+	formData,
+	successCallback,
+	errorCallback
 ) => {
-    let baseUrl = '';
-    let fileUpload = false;
-    let body;
-    let headers = {};
-    let options = {};
+	let headers = {};
+	let options = {};
 
-    if (!_.isEmpty(formData)) {
-        Object.keys(formData).forEach((item) => {
-            if (formData[item] !== undefined) {
-                if (formData[item] instanceof File && formData[item] !== null) {
-                    fileUpload = true;
-                }
-            }
-        });
-    }
+	if (method.toUpperCase() === "PUT" || method.toUpperCase() === "PATCH") {
+		formData = { ...formData, _method: method };
+	}
 
-    if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
-        if (fileUpload === false) {
-            body = {
-                ...body,
-                _method: method,
-            };
-        }
-    }
+	if (!(formData instanceof FormData)) {
+		headers["Content-Type"] = "application/json";
+		formData = JSON.stringify(formData);
+	} else {
+		headers["Content-Type"] = "multipart/form-data";
+		headers.contentType = false;
+		headers.processData = false;
 
-    if (fileUpload === false) {
-        body = JSON.stringify(formData);
-        headers = {
-            ...headers,
-            'Content-Type': 'application/json',
-        };
-    } else {
-        body = new FormData();
+		if (
+			method.toUpperCase() === "PUT" ||
+			method.toUpperCase() === "PATCH"
+		) {
+			formData.append("_method", method);
+			method = "POST";
+		}
+	}
 
-        headers = {
-            ...headers,
-            'Content-Type': 'multipart/form-data',
-            contentType: false,
-            processData: false,
-        };
+	options = {
+		method: method,
+		data: formData,
+		headers: headers,
+		url: url,
+		responseType: "blob",
+	};
 
-        if (!_.isEmpty(formData)) {
-            Object.keys(formData).forEach((item) => {
-                body.append(item, formData[item]);
-            });
-        }
+	try {
+		const response = await trackPromise(axios(options));
+		successCallback(response.data);
+	} catch (error) {
+		if (
+			error.response &&
+			error.response.data &&
+			error.response.data.message
+		) {
+			const errorMessage = error.response.data.message;
 
-        if (
-            method.toUpperCase() === 'PUT' ||
-            method.toUpperCase() === 'PATCH'
-        ) {
-            if (fileUpload === false) {
-            } else {
-                body.append('_method', method);
-                method = 'POST';
-            }
-        }
-    }
+			if (errorMessage === "Unauthenticated.") {
+				localStorage.clear();
+			}
 
-    options = {
-        method: method,
-        data: body,
-        headers: headers,
-        url: baseUrl + url,
-        responseType: 'blob',
-    };
-
-    trackPromise(
-        axios(options).then(
-            (result) => {
-                successCallback(result.data);
-            },
-            (error) => {
-                if (
-                    error.response.hasOwnProperty('data') &&
-                    error.response.data.hasOwnProperty('message') &&
-                    error.response.data.message !== ''
-                ) {
-                    if (error.response.data.message === 'Unauthenticated.') {
-                        localStorage.clear();
-                    }
-                    errorCallback(error.response.data.message);
-                } else {
-                    errorCallback(error);
-                }
-            }
-        )
-    );
+			errorCallback(errorMessage);
+		} else {
+			errorCallback(error);
+		}
+	}
 };
 
 export default CustomDownload;

package/components/crm/visns-fetch.jsx

@@ -1,101 +1,79 @@
-import _ from 'lodash';
-import axios from 'axios';
-import { trackPromise } from 'react-promise-tracker';
-import { toast } from 'react-toastify';
-import parse from 'html-react-parser';
+import axios from "axios";
+import { trackPromise } from "react-promise-tracker";
+import { toast } from "react-toastify";
+import parse from "html-react-parser";
 
-const CustomFetch = (
-    url,
-    method,
-    formData,
-    successCallback = null,
-    errorCallback = null
+const CustomFetch = async (
+	url,
+	method,
+	formData,
+	successCallback = null,
+	errorCallback = null
 ) => {
-    let baseUrl = '';
-    let body;
-    let headers = {};
-    let options = {};
+	const baseUrl = "";
+	const headers = {
+		"Content-Type": "application/json",
+	};
 
-    if (method.toUpperCase() === 'PUT' || method.toUpperCase() === 'PATCH') {
-        body = {
-            ...body,
-            _method: method,
-        };
-    }
+	if (method.toUpperCase() === "PUT" || method.toUpperCase() === "PATCH") {
+		formData = {
+			...formData,
+			_method: method,
+		};
+	}
 
-    body = JSON.stringify(formData);
-    headers = {
-        ...headers,
-        'Content-Type': 'application/json',
-    };
+	const options = {
+		method: method,
+		data: formData,
+		headers: headers,
+		url: baseUrl + url,
+	};
 
-    options = {
-        method: method,
-        data: body,
-        headers: headers,
-        url: baseUrl + url,
-    };
+	try {
+		const response = await trackPromise(axios(options));
 
-    trackPromise(
-        axios(options).then(
-            (result) => {
-                if (successCallback) {
-                    successCallback(result.data);
-                } else {
-                    if (result.data.error === '') {
-                        toast.success('Data has been updated successfully.');
-                    } else {
-                        toast.error(result.data.error);
-                    }
-                }
-            },
-            (error) => {
-                if (
-                    error.response.hasOwnProperty('data') &&
-                    error.response.data.hasOwnProperty('message') &&
-                    error.response.data.message !== ''
-                ) {
-                    if (error.response.data.hasOwnProperty('errors')) {
-                        let errorMessage = '';
-                        let errors = error.response.data.errors;
+		if (successCallback) {
+			successCallback(response.data);
+		} else {
+			const error =
+				response.data.error || "Data has been updated successfully.";
+			toast.error(<div>{parse(error)}</div>);
+		}
+	} catch (error) {
+		let errorMessage = "";
 
-                        Object.keys(errors).forEach((a) => {
-                            errors[a].forEach((b) => {
-                                errorMessage += b + '<br />';
-                            });
-                        });
+		if (
+			error.response &&
+			error.response.data &&
+			error.response.data.message
+		) {
+			const { data } = error.response;
 
-                        if (errorCallback) {
-                            errorCallback(errorMessage);
-                        } else {
-                            toast.error(`<div>${parse(errorMessage)}</div>`);
-                        }
-                    } else {
-                        if (
-                            error.response.data.message ===
-                            'CSRF token mismatch.'
-                        ) {
-                            window.location.replace('/login');
-                        } else {
-                            if (errorCallback) {
-                                errorCallback(error.response.data.message);
-                            } else {
-                                toast.error(
-                                    `<div>${parse(errorMessage)}</div>`
-                                );
-                            }
-                        }
-                    }
-                } else {
-                    if (errorCallback) {
-                        errorCallback(error);
-                    } else {
-                        toast.error(`<div>${parse(errorMessage)}</div>`);
-                    }
-                }
-            }
-        )
-    );
+			if (data.errors) {
+				const { errors } = data;
+
+				Object.values(errors).forEach((errorArray) => {
+					errorArray.forEach((errorMsg) => {
+						errorMessage += `${errorMsg}<br />`;
+					});
+				});
+			} else {
+				if (data.message === "CSRF token mismatch.") {
+					window.location.replace("/login");
+				} else {
+					errorMessage = data.message;
+				}
+			}
+		} else {
+			errorMessage = error.message;
+		}
+
+		if (errorCallback) {
+			errorCallback(errorMessage);
+		} else {
+			toast.error(<div>{parse(errorMessage)}</div>);
+		}
+	}
 };
 
 export default CustomFetch;

package/package.json

@@ -12,6 +12,7 @@
 		"numeral": "^2.0.6",
 		"react-confirm-alert": "^3.0.6",
 		"react-datepicker": "^4.14.0",
+		"react-dropzone": "^14.2.3",
 		"react-number-format": "^5.2.2",
 		"react-promise-tracker": "^2.1.1",
 		"react-quill": "^2.0.0",
@@ -29,11 +30,11 @@
 		"react-dom": "^18.2.0"
 	},
 	"peerDependencies": {
-		"react": ">=18.2.0",
-		"react-dom": ">=18.2.0"
+		"react": "^17.0.1",
+		"react-dom": "^17.0.1"
 	},
 	"name": "@visns-studio/visns-components",
-	"version": "1.2.4",
+	"version": "1.2.6",
 	"description": "Various packages to assist in the development of our Custom Applications.",
 	"main": "index.js",
 	"devDependencies": {},