index.jsx 8.4 KB
Newer Older
1 2
/** @format */

Muhammadali's avatar
Muhammadali committed
3
import React, {useContext, useEffect, useState} from 'react';
4
import packageJson from '../../package.json';
Muhammadali's avatar
Muhammadali committed
5
import DefaultWidjetUi from '../components/DefaultWidjetUi';
6 7
import ModalPhoneNumpad from '../components/ModalPhoneNumpad';
import Modal from '../components/Modal';
Muhammadali's avatar
Muhammadali committed
8
import BxMiniWidjetUi from '../components/BxMiniWidjetUi';
Muhammadali's avatar
Muhammadali committed
9
import SecondNotifSip from '../components/SecondNotifSip';
Muhammadali's avatar
Muhammadali committed
10
import InnerCaller from '../components/InnerCaller';
Muhammadali's avatar
Muhammadali committed
11
import {useConfigHoldMute} from "../storage"
Muhammadali's avatar
Muhammadali committed
12 13
import SettingComponent from "../components/setting"
import {useColorConfig} from "../storage/globalColorConfig"
Muhammadali's avatar
Muhammadali committed
14
// import { contextModalEventProperty } from '../context/modalEventProperty';
Muhammadali's avatar
Muhammadali committed
15

Muhammadali's avatar
Muhammadali committed
16 17 18
const Root = ({wsphonedata, onSetDnd, setWsphonedata, callMethod}) => {
    const boxDialer = window.BoxDialer;

Muhammadali's avatar
Muhammadali committed
19
    const useColorConfigStore = useColorConfig((store) => store)
Muhammadali's avatar
Muhammadali committed
20 21 22 23
    const configHoldMute = useConfigHoldMute((state) => state)
    const [phoneModal, setPhoneModal] = useState(false);
    const [dynamicValue, setDynamicValue] = useState('pending');
    const [modalState, setModalState] = useState(false);
Muhammadali's avatar
Muhammadali committed
24
    const [settingHidden, setSettingHidden] = useState(false);
Muhammadali's avatar
Muhammadali committed
25
    const [secondLine, setSecondLine] = useState(false);
Muhammadali's avatar
Muhammadali committed
26
    // const [secondLine, setSecondLine] = useState(false);
Muhammadali's avatar
Muhammadali committed
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
    const [innerTimer, setInnerTimer] = useState(null);
    const [innerCallerModal, setInnerCallerModal] = useState({
        bool: false,
        type: null,
        from: '',
    });

    useEffect(() => {
        if (secondLine) {
            setTimeout(() => {
                setSecondLine(false);
            }, 5000);
        }
    }, [secondLine]);

Muhammadali's avatar
Muhammadali committed
42 43 44
    useEffect(()=> {
        boxDialer.setGlobalHistoryData(useColorConfigStore.state)
    }, [useColorConfigStore.state])
Muhammadali's avatar
Muhammadali committed
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

    useEffect(() => {
        if (wsphonedata && wsphonedata?.number) {
            boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
            boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
            boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine');
            boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
            boxDialer.setSipStateChangeCallback(setInnerTimer, 'innerTimer');
            boxDialer.setSipStateChangeCallback(configHoldMute.setState, 'setCallEvents');
            boxDialer.setSipStateChangeCallback(
                setInnerCallerModal,
                'innerCallerModal',
            );

            if (boxDialer.isUaRunning()) console.log('UA is running! in other tab');
            else boxDialer.sipRegister(wsphonedata);

            setTimeout(function waitUaRegisterLost() {
                if (boxDialer.isUaRunning() || boxDialer.isRestarting)
                    setTimeout(waitUaRegisterLost, 10);
                else boxDialer.sipRegister(wsphonedata);
            }, 10);
        }
    }, []);

    const hangupButton = () => {
        boxDialer.hangupButtonClick();
    };

    window.setWSData = (result) => {
        console.log('setWsphonedata', result);
        setWsphonedata(result);
    };

    const reasonSelect = async (e) => {
        let result = await onSetDnd(e);
        if (setWsphonedata) {
            setWsphonedata(result);
        }
        console.log('reasonSelect_setWsphonedata', typeof setWsphonedata)
    };

    const getTransferers = async (e) => {
        let result = await callMethod({
            method: 'getPeers',
        });
        setWsphonedata(result);
    };

Muhammadali's avatar
Muhammadali committed
94

Muhammadali's avatar
Muhammadali committed
95 96 97 98 99
    // useEffect(()=> {
    //     console.log('auto_answer running: ', modalState.callType === 'incoming' && modalState.bool)
    //
    // }, [modalState.callType, modalState.bool, useColorConfigStore.state?.autoAnswer, useColorConfigStore.state?.autoAnswerSecond])
    //
Muhammadali's avatar
Muhammadali committed
100

Muhammadali's avatar
Muhammadali committed
101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
    const selectWidjetType = (type) => {
        switch (type) {
            case 'bxmini':
                return (
                    <BxMiniWidjetUi
                        widjetState={dynamicValue}
                        phoneNumber={wsphonedata?.number}
                        reason={wsphonedata?.reason}
                        widjetVersion={packageJson?.version}
                        leftTime={wsphonedata.lefttime}
                        position={wsphonedata.position || 'bottomLeft'}
                        onClick={() => {
                            phoneModal ? setPhoneModal(false) : setPhoneModal(true);
                        }}
                    />
                );
            default:
                return (
                    <DefaultWidjetUi
                        widjetState={dynamicValue}
                        phoneNumber={wsphonedata?.number}
                        reason={wsphonedata?.reason}
                        widjetVersion={packageJson?.version}
                        leftTime={wsphonedata.lefttime}
                        position={wsphonedata.position || 'bottomLeft'}
                        onClick={() => {
                            phoneModal ? setPhoneModal(false) : setPhoneModal(true);
                        }}
                    />
                );
        }
    };

    console.log(
        'wsphonedata_all_data: ',
        wsphonedata?.position,
        wsphonedata?.number,
        wsphonedata,
    );

    window.onbeforeunload = () => {
        if (typeof BX !== 'undefined') {
            boxDialer.isRestarting = true;
            console.log('window_onbeforeunload =============-------------');
            localStorage.removeItem('mycall');
            localStorage.removeItem(BX.bitrix_sessid() + '_mycall');

            console.log(
                '--==== Checking removed Items: ',
                localStorage.getItem('mycall'),
                localStorage.getItem(BX.bitrix_sessid() + '_mycall'),
            );
        }
    };

Muhammadali's avatar
Muhammadali committed
156
    if (!wsphonedata?.number && !wsphonedata?.position) return;
Muhammadali's avatar
Muhammadali committed
157 158 159
    return (
        <>
            {selectWidjetType(wsphonedata.variant)}
Muhammadali's avatar
Muhammadali committed
160 161 162 163 164
            <SettingComponent
                settingHidden={settingHidden && phoneModal ? true : false}
                variant={wsphonedata.variant || 'defaultWidjet'}
                position={wsphonedata.position || 'bottomLeft'}
            />
Muhammadali's avatar
Muhammadali committed
165 166

            <ModalPhoneNumpad
Muhammadali's avatar
Muhammadali committed
167 168
                setSettingHidden={setSettingHidden}
                settingHidden={settingHidden}
Muhammadali's avatar
Muhammadali committed
169 170 171 172 173 174 175 176 177 178 179 180
                modalState={modalState}
                phoneModal={phoneModal}
                reasons={wsphonedata?.reasons}
                reason={wsphonedata?.reason}
                onClick={(e) => e.stopPropagation()}
                dynamicValue={dynamicValue}
                onSetDnd={reasonSelect}
                variant={wsphonedata.variant || 'defaultWidjet'}
                position={wsphonedata.position || 'bottomLeft'}
                extnums={wsphonedata.extnums}
            />

Muhammadali's avatar
Muhammadali committed
181 182 183 184 185 186 187 188
            {/*
                incoming
                outgoing
                connectingIncoming
                connectingOutgoing
                connected
            */}

Muhammadali's avatar
Muhammadali committed
189 190 191 192
            <Modal
                className='tailwindGlobalCss'
                hidden={modalState.bool}
                callType={modalState.callType}
Muhammadali's avatar
Muhammadali committed
193 194
                // hidden={true}
                // callType={'incoming'}
Muhammadali's avatar
Muhammadali committed
195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212
                hangupButton={hangupButton}
                phoneNumber={
                    modalState.callType === 'outcoming'
                        ? 'inputValue'
                        : modalState.callFromName
                }
            />

            <InnerCaller
                hidden={innerCallerModal.bool}
                type={innerCallerModal.type}
                from={innerCallerModal.from}
                innerTimer={innerTimer}
            />

            <SecondNotifSip secondLine={secondLine}/>
        </>
    );
213 214
};
export default Root;
Muhammadali's avatar
Muhammadali committed
215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245

// ======================================================
// var no_active_delay = 60;
// var now_no_active = 0;
// function activeUser() {
// 	now_no_active = 0;
// }
// function updateChat() {
// 	location.reload();
// 	return;
// }
// setInterval(() => {
// 	if (
// 		now_no_active >= no_active_delay && modalState.bool === 'undefined'
// 			? true
// 			: (!modalState.bool && !innerCallerModal.bool) ||
// 			  modalState.bool === 'undefined'
// 	) {
// 		now_no_active++;
// 		updateChat();
// 	}
// }, 1000);
// document.onmousemove = activeUser;
// console.log(
// 	'modalState_bool: ',
// 	modalState.bool === 'undefined'
// 		? true
// 		: (!modalState.bool && !innerCallerModal.bool) ||
// 				modalState.bool === 'undefined',
// );
// ======================================================