@visns-studio/visns-components 1.0.0

package/components/visns-async-select.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import CustomFetch from './visns-fetch';
+import SelectList from './visns-select-list';
+import AsyncSelect from 'react-select/async';
+import { debounce } from 'lodash';
+
+function VisnsAsyncSelect(props) {
+    const { inputValue, onChange, settings, multi } = props;
+
+    const loadSuggestedOptions = useCallback(
+        debounce((inputValue, callback) => {
+            if (inputValue !== '') {
+                loadOptions(inputValue).then((options) => callback(options));
+            }
+        }, 500),
+        []
+    );
+
+    const loadOptions = (inputValue) => {
+        if (inputValue !== '') {
+            return new Promise((resolve, reject) => {
+                let data = [];
+
+                CustomFetch(
+                    settings.url,
+                    'POST',
+                    {
+                        where: [
+                            {
+                                id: 'async',
+                                value: inputValue,
+                            },
+                        ],
+                    },
+                    function (result) {
+                        result.data.forEach((a) => {
+                            data.push({
+                                value: a.id,
+                                label: a.label,
+                            });
+                        });
+
+                        resolve(data);
+                    },
+                    function (error) {
+                        reject(String(error));
+                    }
+                );
+            });
+        }
+    };
+
+    return (
+        <AsyncSelect
+            isClearable
+            cacheOptions
+            loadOptions={loadSuggestedOptions}
+            defaultOptions
+            className="visns__ms"
+            onChange={(inputValue, action) => {
+                onChange(inputValue, action, settings.id);
+            }}
+            components={{ SelectList }}
+            styles={{
+                menu: (provided) => ({
+                    ...provided,
+                    zIndex: 9999,
+                }),
+            }}
+            value={inputValue}
+        />
+    );
+}
+
+export default VisnsAsyncSelect;

package/components/visns-autocomplete.jsx

@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import AwesomeDebouncePromise from 'awesome-debounce-promise';
+import { ToggleOffFill, ToggleOnFill } from 'akar-icons';
+
+const VisnsAutocomplete = (props) => {
+    const { api, country, onSelect, setFormData, field, inputValue } = props;
+    const [search, setSearch] = useState('');
+    const [results, setResults] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [overwrite, setOverwrite] = useState(false);
+
+    const performSearch = (id, value) => {
+        if (id > 0) {
+            if (value === '') {
+                setResults([]);
+                setIsLoading(false);
+            } else {
+                let url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?types=address,poi&access_token=${api}`;
+
+                if (country && country !== '') {
+                    url += `&country=${country}`;
+                }
+
+                if (import.meta.env.hasOwnProperty('VITE_MAPBOX_PROXIMITY')) {
+                    url += `&proximity=${
+                        import.meta.env.VITE_MAPBOX_PROXIMITY
+                    }`;
+                }
+
+                axios
+                    .get(url)
+                    .then((response) => {
+                        setResults(response.data.features);
+                        setIsLoading(false);
+                    })
+                    .catch(function (error) {
+                        console.log(error);
+                    });
+            }
+        }
+    };
+
+    const handleSearchChange = async (e) => {
+        if (e) {
+            setSearch(e.target.value);
+            setFormData((prevState) => ({
+                ...prevState,
+                [field]: e.target.value,
+            }));
+
+            if (overwrite === false) {
+                setIsLoading(true);
+            }
+
+            if (overwrite === false) {
+                await performSearchDebounced(1, e.target.value);
+            }
+        }
+    };
+
+    const performSearchDebounced = AwesomeDebouncePromise(performSearch, 500, {
+        key: (id, value) => id,
+    });
+
+    const handleItemClicked = (place) => {
+        setSearch(place.address + ' ' + place.text);
+        setResults([]);
+        onSelect(place, field);
+    };
+
+    const handleOverwrite = () => {
+        if (overwrite === false) {
+            setOverwrite(true);
+            setResults([]);
+        } else {
+            setOverwrite(false);
+        }
+    };
+
+    useEffect(() => {
+        if (overwrite === false) {
+            if (search !== '') {
+                performSearch();
+            }
+        }
+    }, [overwrite]);
+
+    useEffect(() => {
+        setSearch(inputValue);
+    }, [inputValue]);
+
+    return (
+        <>
+            <div className="AutocompletePlace">
+                <input
+                    className="AutocompletePlace-input"
+                    style={{ height: '53px' }}
+                    type="text"
+                    value={search || ''}
+                    onChange={handleSearchChange}
+                    placeholder="Type an address"
+                    autoComplete="off"
+                />
+                {overwrite === false ? (
+                    <ToggleOffFill
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content="Disable Autocomplete"
+                        strokeWidth={2}
+                        size={24}
+                        onClick={handleOverwrite}
+                    />
+                ) : (
+                    <ToggleOnFill
+                        data-tooltip-id="system-tooltip"
+                        data-tooltip-content="Enable Autocomplete"
+                        strokeWidth={2}
+                        size={24}
+                        onClick={handleOverwrite}
+                        className="toggleActive"
+                    />
+                )}
+                {results.length > 0 ? (
+                    <ul className="AutocompletePlace-results">
+                        {results.map((place) => (
+                            <li
+                                key={place.id}
+                                className="AutocompletePlace-items"
+                                onClick={() => handleItemClicked(place)}
+                            >
+                                {place.place_name}
+                            </li>
+                        ))}
+
+                        {isLoading && (
+                            <li className="AutocompletePlace-items">
+                                Loading...
+                            </li>
+                        )}
+                    </ul>
+                ) : null}
+            </div>
+        </>
+    );
+};
+
+export default VisnsAutocomplete;

package/components/visns-call.jsx

@@ -0,0 +1,220 @@
+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;