@visns-studio/visns-components 1.8.4 → 2.0.0

package/components/cms/visns-form.jsx

@@ -1,475 +0,0 @@
-import React, { useState, useEffect } from "react";
-import CustomFetch from "../crm/visns-fetch";
-import Field from "./visns-field";
-import slugify from "react-slugify";
-import moment from "moment";
-import Reveal from "react-reveal/Reveal";
-import parse from "html-react-parser";
-import { confirmAlert } from "react-confirm-alert";
-import { toast } from "react-toastify";
-import { Copy, TrashBin } from "akar-icons";
-
-import "react-confirm-alert/src/react-confirm-alert.css";
-
-function Form(props) {
-	const { dataId, navigate, form, setActiveNav } = props;
-	const [data, setData] = useState({});
-	const [dataClass, setDataClass] = useState({});
-	const [audit, setAudit] = useState({
-		createdBy: {},
-		created: "",
-		updatedBy: {},
-		updated: "",
-	});
-	const [uploadProgress, setUploadProgress] = useState({});
-
-	const handleChange = (e) => {
-		if (e) {
-			const { name, value } = e.target;
-
-			switch (e.target.name) {
-				case "title":
-					setData((prevState) => ({
-						...prevState,
-						[name]: value,
-					}));
-
-					setData((prevState) => ({
-						...prevState,
-						slug: slugify(value),
-					}));
-					break;
-				case "name":
-					setData((prevState) => ({
-						...prevState,
-						[name]: value,
-					}));
-
-					setData((prevState) => ({
-						...prevState,
-						slug: slugify(value),
-					}));
-					break;
-				default:
-					if (name) {
-						setData((prevState) => ({
-							...prevState,
-							[name]: value,
-						}));
-					} else {
-						setData((prevState) => ({
-							...prevState,
-							[e.target.dataset.name]: value,
-						}));
-					}
-					break;
-			}
-		}
-	};
-
-	const handleChangeDate = (date, id) => {
-		setData((prevState) => ({
-			...prevState,
-			[id]: date,
-		}));
-	};
-
-	const handleChangeSelect = (value, action, id) => {
-		if (value && action && id) {
-			setData((prevState) => ({
-				...prevState,
-				[id]: value,
-			}));
-		}
-	};
-
-	const handleChangeRicheditor = (value, name) => {
-		setData((prevState) => ({
-			...prevState,
-			[name]: value,
-		}));
-	};
-
-	const handleChangeToggle = (e) => {
-		if (!e) {
-			return;
-		}
-
-		const { name, checked } = e.target;
-
-		setData((prevState) => ({
-			...prevState,
-			[name]: checked,
-		}));
-	};
-
-	const handleChangeFile = (e) => {
-		if (e) {
-			setData((prevState) => ({
-				...prevState,
-				[e.target.name]: e.target.files[0],
-			}));
-
-			Vapor.store(e.target.files[0], {
-				progress: (progress) => {
-					setUploadProgress((prevState) => ({
-						...prevState,
-						[e.target.name]: progress * 100,
-					}));
-				},
-			}).then((response) => {
-				if (data.hasOwnProperty("files")) {
-					let _files = data.files;
-					let _new = true;
-
-					data.files.forEach((a, b) => {
-						if (e.target.name === a.field) {
-							_files[b] = {
-								field: e.target.name,
-								uuid: response.uuid,
-								key: response.key,
-								bucket: response.bucket,
-								filename: e.target.files[0].name,
-								filesize: e.target.files[0].size,
-								extension: response.extension,
-							};
-
-							_new = false;
-						}
-					});
-
-					if (_new === true) {
-						setData((prevState) => ({
-							...prevState,
-							files: [
-								...prevState.files,
-								{
-									field: e.target.name,
-									uuid: response.uuid,
-									key: response.key,
-									bucket: response.bucket,
-									filename: e.target.files[0].name,
-									filesize: e.target.files[0].size,
-									extension: response.extension,
-								},
-							],
-						}));
-					} else {
-						setData((prevState) => ({
-							...prevState,
-							files: _files,
-						}));
-					}
-				} else {
-					setData((prevState) => ({
-						...prevState,
-						files: [
-							{
-								field: e.target.name,
-								uuid: response.uuid,
-								key: response.key,
-								bucket: response.bucket,
-								filename: e.target.files[0].name,
-								filesize: e.target.files[0].size,
-								extension: response.extension,
-							},
-						],
-					}));
-				}
-			});
-		}
-	};
-
-	const handleSubmit = (e) => {
-		if (e) {
-			e.preventDefault();
-
-			let error = "";
-			let url = "";
-			let method = "";
-			let message = "";
-
-			if (data.title === "") {
-				error += "Please enter a title.<br />";
-			}
-
-			if (data.summary === "") {
-				error += "Please enter a summary.<br />";
-			}
-
-			if (error === "") {
-				if (dataId === "create") {
-					url = form.url;
-					method = "POST";
-					message = "You have successfully created a new entry.";
-				} else {
-					url = form.url + "/" + dataId;
-					method = "PUT";
-					message = "You have successfully updated this entry.";
-				}
-
-				CustomFetch(url, method, data, function (result) {
-					if (result.error === "") {
-						let _uploadProgress = uploadProgress;
-
-						Object.keys(_uploadProgress).forEach((a, b) => {
-							setUploadProgress((prevState) => ({
-								...prevState,
-								[b]: 0,
-							}));
-						});
-
-						toast.success(message);
-
-						if (dataId === "create") {
-							navigate(
-								form.url.replace("/ajax", "") +
-									"/" +
-									result.data.id,
-								{
-									state: {
-										form: form,
-									},
-								}
-							);
-						}
-					} else {
-						toast.error(result.error);
-					}
-				});
-			} else {
-				toast.error(<div>{parse(error)}</div>);
-			}
-		}
-	};
-
-	const handleDelete = (e) => {
-		if (e) {
-			confirmAlert({
-				title: "Delete this entry",
-				message: "Are you sure you want to delete it?",
-				buttons: [
-					{
-						label: "Yes",
-						onClick: () =>
-							CustomFetch(
-								`${form.url}/${dataId}`,
-								"DELETE",
-								{},
-								function (result) {
-									if (result.error === "") {
-										navigate(form.url.replace("/ajax", ""));
-										toast.success(
-											"You have successfully deleted this entry."
-										);
-									} else {
-										toast.error(result.error);
-									}
-								}
-							),
-					},
-					{
-						label: "No",
-						onClick: () => close(),
-					},
-				],
-			});
-		}
-	};
-
-	const fetchData = () => {
-		form.fields.forEach((a) => {
-			setData((prevState) => ({
-				...prevState,
-				[a.id]: "",
-			}));
-		});
-
-		if (dataId !== "create") {
-			CustomFetch(
-				`${form.url}/${dataId}`,
-				"GET",
-				{},
-				function (result) {
-					let now = moment();
-					let created = moment.duration(
-						now.diff(result.data.created_at)
-					);
-					let updated = moment.duration(
-						now.diff(result.data.updated_at)
-					);
-
-					setData(result.data);
-					setAudit((prevState) => ({
-						...prevState,
-						createdBy: result.audit_first,
-						created:
-							created.hours() > 24
-								? created.days() +
-								  " Days " +
-								  created.hours() +
-								  " Hour(s) " +
-								  created.minutes() +
-								  " Minutes"
-								: created.hours() +
-								  " Hour(s) " +
-								  created.minutes() +
-								  " Minutes",
-						updatedBy: result.audit_latest,
-						updated:
-							updated.hours() > 24
-								? updated.days() +
-								  " Days " +
-								  updated.hours() +
-								  " Hour(s) " +
-								  updated.minutes() +
-								  " Minutes"
-								: updated.hours() +
-								  " Hour(s) " +
-								  updated.minutes() +
-								  " Minutes",
-					}));
-				},
-				function (error) {
-					navigate("/");
-
-					toast.error(String(error));
-				}
-			);
-		}
-	};
-
-	useEffect(() => {
-		form.fields.forEach((a) => {
-			if (a.type === "image") {
-				setUploadProgress((prevState) => ({
-					...prevState,
-					[a.id]: 0,
-				}));
-			}
-
-			setData((prevState) => ({
-				...prevState,
-				[a.id]: "",
-			}));
-
-			setDataClass((prevState) => ({
-				...prevState,
-				[a.id]: "",
-			}));
-		});
-
-		fetchData();
-		setActiveNav();
-	}, [dataId]);
-
-	return (
-		<Reveal effect="fadeInUp">
-			<div className="grid">
-				<div className="grid__row">
-					<div className="grid__full cmstitle">
-						<h1>
-							{data.title
-								? data.title
-								: dataId !== "create"
-								? form.update.title
-								: form.create.title}
-						</h1>
-						<div className="cmstitle__actions">
-							<button
-								className="btn actionbtn"
-								onClick={handleSubmit}
-							>
-								<Copy size={18} strokeWidth={2} />{" "}
-								{dataId !== "create" ? "Save" : "Create"}
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div className="dynamic">
-				<div className="dynamic__left">
-					<div className="formcontainer">
-						<div className="dynamicform">
-							{form.fields.map((a, b) => (
-								<Field
-									settings={a}
-									key={
-										b +
-										"-fields-" +
-										(a.hasOwnProperty("key")
-											? a.id + "-" + a.key
-											: a.id)
-									}
-									inputValue={
-										a.hasOwnProperty("key")
-											? data[a.key]
-											: Array.isArray(data[a.id]) &&
-											  a.type === "image"
-											? data[a.id].length > 0
-												? data[a.id][0]
-												: ""
-											: data[a.id]
-									}
-									inputClass={dataClass}
-									onChange={handleChange}
-									onChangeDate={handleChangeDate}
-									onChangeFile={handleChangeFile}
-									onChangeRicheditor={handleChangeRicheditor}
-									onChangeSelect={handleChangeSelect}
-									onChangeToggle={handleChangeToggle}
-									setFormData={setData}
-									uploadProgress={uploadProgress}
-								/>
-							))}
-						</div>
-					</div>
-				</div>
-				<div className="dynamic__right">
-					<h1>Information</h1>
-					<ul>
-						<li>
-							Created: <span>{audit.created} Ago</span>
-						</li>
-						<li>
-							By:{" "}
-							<span>
-								{audit &&
-								audit.createdBy &&
-								audit.createdBy.user
-									? audit.createdBy.user.name
-									: null}
-							</span>
-						</li>
-						<li>
-							Last Update: <span>{audit.updated} Ago</span>
-						</li>
-						<li>
-							by:{" "}
-							<span>
-								{audit &&
-								audit.updatedBy &&
-								audit.updatedBy.user
-									? audit.updatedBy.user.name
-									: null}
-							</span>
-						</li>
-						{dataId !== "create" ? (
-							<li>
-								<button
-									className="btn actionbtn deletebtn"
-									onClick={handleDelete}
-								>
-									<TrashBin size={14} strokeWidth={2} />{" "}
-									Delete Entry
-								</button>
-							</li>
-						) : null}
-					</ul>
-				</div>
-			</div>
-		</Reveal>
-	);
-}
-
-export default Form;

package/components/crm/visns-call.jsx

@@ -1,220 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Popup from "reactjs-popup";
-import moment from "moment";
-
-import CustomFetch from "./visns-fetch";
-
-function CallPop(props) {
-	const { incomingCallData } = props;
-	const [modalShow, setModalShow] = useState(false);
-	const [client, setClient] = useState({});
-	const [tasks, setTasks] = useState([]);
-	const [callShow, setCallShow] = useState(false);
-	const [timerId, setTimerId] = useState(0);
-
-	const formatPhone = (value) => {
-		if (value) {
-			let _value = value.replace("61", 0);
-			let match;
-			let type = _value.substr(0, 2);
-
-			if (_value && _value !== "") {
-				switch (type) {
-					case "04":
-						match = _value.match(/^(\d{4})(\d{3})(\d{3})$/);
-						if (match) {
-							_value = match[1] + " " + match[2] + " " + match[3];
-						}
-						break;
-					default:
-						match = _value.match(/^(\d{2})(\d{4})(\d{4})$/);
-						if (match) {
-							_value = match[1] + " " + match[2] + " " + match[3];
-						}
-						break;
-				}
-			}
-
-			return _value;
-		}
-	};
-
-	const viewModal = () => {
-		setModalShow(true);
-
-		if (timerId > 0) {
-			clearTimeout(timerId);
-		}
-	};
-
-	useEffect(() => {
-		if (
-			incomingCallData &&
-			incomingCallData.number &&
-			incomingCallData.number != ""
-		) {
-			CustomFetch(
-				"/incoming/check",
-				"POST",
-				{
-					user_id: incomingCallData.user_id,
-				},
-				function (result) {
-					if (result.show === true) {
-						setCallShow(true);
-
-						let _timerId = setTimeout(() => {
-							setCallShow(false);
-						}, 20000);
-
-						setTimerId(_timerId);
-
-						CustomFetch(
-							"/company/call",
-							"POST",
-							{
-								search: incomingCallData.number,
-							},
-							function (result) {
-								setClient(result);
-							}
-						);
-					} else {
-						setCallShow(false);
-					}
-				}
-			);
-		}
-	}, [incomingCallData]);
-
-	return (
-		<>
-			{callShow === true ? (
-				<>
-					<div className="callpop callpop--alive">
-						<div className="callpop__left">
-							<span>
-								<strong>Active Call:</strong>{" "}
-								{formatPhone(incomingCallData.number)}{" "}
-								<strong>Client:</strong>{" "}
-								{setData
-									? setData.firstname === ""
-										? "No contacts found with the incoming number."
-										: setData.firstname +
-										  " " +
-										  setData.surname +
-										  " (" +
-										  setData.customer.name +
-										  ")"
-									: "No contacts found with the incoming number."}
-							</span>
-						</div>
-						<div className="callpop__right">
-							<button className="btn cpview" onClick={viewModal}>
-								View{" "}
-								<i className="cil-chevron-circle-up-alt "></i>
-							</button>
-							<button
-								className="btn cpdismiss"
-								onClick={() => {
-									setCallShow(false);
-								}}
-							>
-								Dismiss
-							</button>
-						</div>
-					</div>
-					<Popup
-						open={modalShow}
-						onClose={() => {
-							setCallShow(false);
-							setModalShow(false);
-						}}
-					>
-						<div className="modalwrap">
-							<div className="grid">
-								<div className="grid__row">
-									<div className="grid__full crmtitle callborder">
-										<i className="cil-phone-in-talk"></i>
-										<h1>
-											Active Call:{" "}
-											<span>
-												{formatPhone(
-													incomingCallData.number
-												)}
-											</span>{" "}
-											Client:{" "}
-											<span>
-												{setData
-													? setData.firstname === ""
-														? "No contacts found with the incoming number."
-														: setData.firstname +
-														  " " +
-														  setData.surname +
-														  " (" +
-														  setData.customer
-																.name +
-														  ")"
-													: "No contacts found with the incoming number."}
-											</span>{" "}
-										</h1>
-									</div>
-								</div>
-							</div>
-							<div className="grid">
-								<div className="grid__row">
-									<div className="grid__full">
-										<table className="content-table">
-											<thead>
-												<tr className="grid-headers">
-													<th>Ticket #</th>
-													<th>Subject</th>
-													<th>Status</th>
-													<th>Created</th>
-												</tr>
-											</thead>
-											<tbody>
-												{data &&
-												data.tickets &&
-												data.tickets.length > 0 ? (
-													data.tickets.map((a) => (
-														<tr
-															key={`task-id-${a.id}`}
-														>
-															<td>{a.id}</td>
-															<td>{a.subject}</td>
-															<td>
-																{a.status.label}
-															</td>
-															<td>
-																{moment(
-																	a.created_at
-																).format(
-																	"DD-MM-YYYY"
-																)}
-															</td>
-														</tr>
-													))
-												) : (
-													<tr colSpan="10">
-														<td>
-															No tickets found
-															with the incoming
-															number.
-														</td>
-													</tr>
-												)}
-											</tbody>
-										</table>
-									</div>
-								</div>
-							</div>
-						</div>
-					</Popup>
-				</>
-			) : null}
-		</>
-	);
-}
-
-export default CallPop;