@visns-studio/visns-components 4.7.1 → 4.7.3

package/src/components/crm/Call.jsx

@@ -0,0 +1,220 @@
+import React, { useState, useEffect } from "react";
+import Popup from "reactjs-popup";
+import moment from "moment";
+
+import CustomFetch from "./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;