index.jsx 7.55 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
import SettingComponent from "../components/setting"
Muhammadali's avatar
Muhammadali committed
13
import { useColorConfig } from "../storage/globalColorConfig"
Muhammadali's avatar
Muhammadali committed
14

Muhammadali's avatar
Muhammadali committed
15
const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
Muhammadali's avatar
Muhammadali committed
16
    const boxDialer = window.BoxDialer;
Muhammadali's avatar
Muhammadali committed
17
    const useColorConfigStore = useColorConfig((store) => store)
Muhammadali's avatar
Muhammadali committed
18 19 20 21
    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
22
    const [settingHidden, setSettingHidden] = useState(false);
Muhammadali's avatar
Muhammadali committed
23
    const [secondLine, setSecondLine] = useState(false);
Muhammadali's avatar
Muhammadali committed
24
    // const [secondLine, setSecondLine] = useState(false);
Muhammadali's avatar
Muhammadali committed
25 26
    const [innerTimer, setInnerTimer] = useState(null);
    const [innerCallerModal, setInnerCallerModal] = useState({
Muhammadali's avatar
Muhammadali committed
27
        bool: false, type: null, from: '',
Muhammadali's avatar
Muhammadali committed
28 29 30 31 32 33 34 35 36 37
    });

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

Muhammadali's avatar
Muhammadali committed
38
    useEffect(() => {
Muhammadali's avatar
Muhammadali committed
39 40
        boxDialer.setGlobalHistoryData(useColorConfigStore.state)
    }, [useColorConfigStore.state])
Muhammadali's avatar
Muhammadali committed
41 42 43 44 45 46 47 48 49

    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');
Muhammadali's avatar
Muhammadali committed
50
            boxDialer.setSipStateChangeCallback(setInnerCallerModal, 'innerCallerModal',);
Muhammadali's avatar
Muhammadali committed
51

Muhammadali's avatar
Muhammadali committed
52
            if (boxDialer.isUaRunning()) console.log('UA is running! in other tab'); else boxDialer.sipRegister(wsphonedata);
Muhammadali's avatar
Muhammadali committed
53 54

            setTimeout(function waitUaRegisterLost() {
Muhammadali's avatar
Muhammadali committed
55
                if (boxDialer.isUaRunning() || boxDialer.isRestarting) setTimeout(waitUaRegisterLost, 10); else boxDialer.sipRegister(wsphonedata);
Muhammadali's avatar
Muhammadali committed
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
            }, 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
84

Muhammadali's avatar
Muhammadali committed
85 86 87
    // 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
88

Muhammadali's avatar
Muhammadali committed
89

Muhammadali's avatar
Muhammadali committed
90 91 92
    const selectWidjetType = (type) => {
        switch (type) {
            case 'bxmini':
Muhammadali's avatar
Muhammadali committed
93 94 95 96 97 98 99 100 101 102 103
                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);
                    }}
                />);
Muhammadali's avatar
Muhammadali committed
104
            default:
Muhammadali's avatar
Muhammadali committed
105 106 107 108 109 110 111 112 113 114 115
                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);
                    }}
                />);
Muhammadali's avatar
Muhammadali committed
116 117 118
        }
    };

Muhammadali's avatar
Muhammadali committed
119
    // console.log('wsphonedata_all_data: ', wsphonedata?.position, wsphonedata?.number, wsphonedata,);
Muhammadali's avatar
Muhammadali committed
120

Muhammadali's avatar
Muhammadali committed
121 122 123 124 125 126 127 128

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

Muhammadali's avatar
Muhammadali committed
129
            console.log('--==== Checking removed Items: ', localStorage.getItem('mycall'), localStorage.getItem(BX.bitrix_sessid() + '_mycall'),);
Muhammadali's avatar
Muhammadali committed
130 131 132
        }
    };

Muhammadali's avatar
Muhammadali committed
133

Muhammadali's avatar
Muhammadali committed
134
    if (!wsphonedata?.number && !wsphonedata?.position) return;
Muhammadali's avatar
Muhammadali committed
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
    return (<>
        {selectWidjetType(wsphonedata.variant)}
        <SettingComponent
            settingHidden={settingHidden && phoneModal ? true : false}
            variant={wsphonedata.variant || 'defaultWidjet'}
            position={wsphonedata.position || 'bottomLeft'}
        />

        <ModalPhoneNumpad
            setSettingHidden={setSettingHidden}
            settingHidden={settingHidden}
            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}
        />

        <Modal
            className='tailwindGlobalCss'
Muhammadali's avatar
Muhammadali committed
160
            hidden={modalState.bool}
Muhammadali's avatar
Muhammadali committed
161
            callType={modalState.callType}
Muhammadali's avatar
Muhammadali committed
162
            // hidden={true}
Muhammadali's avatar
Muhammadali committed
163 164 165 166 167 168 169 170 171 172 173 174
            // callType={'incoming'}
            hangupButton={hangupButton}
            phoneNumber={modalState.callType === 'outcoming' ? 'inputValue' : modalState.callFromName}
        />

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

Muhammadali's avatar
Muhammadali committed
175
        <SecondNotifSip secondLine={secondLine} />
Muhammadali's avatar
Muhammadali committed
176
    </>);
177 178
};
export default Root;
Muhammadali's avatar
Muhammadali committed
179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209

// ======================================================
// 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',
// );
// ======================================================