update-

package.json

 {
 	"name": "boxdialer",
-	"version": "4.8.14",
+	"version": "4.8.15",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {

src/components/InnerCaller/index.jsx

@@ -11,15 +11,13 @@ import MicIcon from '@mui/icons-material/Mic';
 import MicOffIcon from '@mui/icons-material/MicOff';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import PauseIcon from '@mui/icons-material/Pause';
+import { contextModalEventProperty } from '../../context/modalEventProperty';
+import { useContext } from 'react';
 
 const InnerCaller = ({ hidden, type, from, innerTimer }) => {
 	const boxDialer = window.BoxDialer;
 	const translator = useTranslator();
-
-	const [callEvents, setCallEvents] = useState({});
-	useEffect(() => {
-		boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents');
-	}, []);
+	const [callEvents, setCallEvents] = useContext(contextModalEventProperty);
 	const dataFormatter = (secund) => {
 		let ts = intervalToDuration({
 			start: 0,
@@ -29,7 +27,7 @@ const InnerCaller = ({ hidden, type, from, innerTimer }) => {
 			? `${ts.hours}:${ts.minutes}:${ts.seconds}`
 			: `${ts.minutes}:${ts.seconds}`;
 	};
-	console.log('callEvents_callHold: ', callEvents.callHold);
+	console.log('callEvents_callHold: ', callEvents?.callHold);
 
 	const selectModalType = (type) => {
 		switch (type) {
@@ -39,14 +37,14 @@ const InnerCaller = ({ hidden, type, from, innerTimer }) => {
 						<div className='button timer'>
 							<div>{dataFormatter(innerTimer)}</div>
 							<div onClick={() => boxDialer.holdButtonClick()}>
-								{callEvents.callHold ? (
+								{callEvents?.callHold ? (
 									<PlayArrowIcon style={{ color: '#fff' }} />
 								) : (
 									<PauseIcon style={{ color: '#fff' }} />
 								)}
 							</div>
 							<div onClick={() => boxDialer.muteButtonClick()}>
-								{callEvents.callMute ? (
+								{callEvents?.callMute ? (
 									<MicOffIcon style={{ color: '#fff' }} />
 								) : (
 									<MicIcon style={{ color: '#fff' }} />

src/components/Modal/index.jsx

@@ -12,18 +12,21 @@ import SendToMobileIcon from '@mui/icons-material/SendToMobile';
 import DialpadIcon from '@mui/icons-material/Dialpad';
 import CallCardDropDown from '../CallCardDropDown';
 import ModalNumpad from '../ModalNumpad';
+import { useContext } from 'react';
+import { contextModalEventProperty } from '../../context/modalEventProperty';
 
 const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
 	const boxDialer = window.BoxDialer;
 
 	const [rollUp, setRollUp] = useState(false);
 	const [modalHidden, setModalHidden] = useState(false);
-	const [callEvents, setCallEvents] = useState({});
+	// const [callEvents, setCallEvents] = useState({});
 	const [transferModel, setTransferModel] = useState(true);
 	const [numpadModal, setNumpadModal] = useState(false);
-	useEffect(() => {
-		boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents');
-	}, []);
+	const [callEvents, setCallEvents] = useContext(contextModalEventProperty);
+	// useEffect(() => {
+	// 	boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents');
+	// }, []);
 
 	useEffect(() => {
 		setModalHidden(hidden);
@@ -99,14 +102,14 @@ const Modal = ({ children, hidden, hangupButton, phoneNumber, callType }) => {
 					<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
 						<div className='outcomingEventStyle'>
 							<div onClick={() => boxDialer.holdButtonClick()}>
-								{callEvents.callHold ? (
+								{callEvents?.callHold ? (
 									<PlayArrowIcon style={{ color: '#fff' }} />
 								) : (
 									<PauseIcon style={{ color: '#fff' }} />
 								)}
 							</div>
 							<div onClick={() => boxDialer.muteButtonClick()}>
-								{callEvents.callMute ? (
+								{callEvents?.callMute ? (
 									<MicOffIcon style={{ color: '#fff' }} />
 								) : (
 									<MicIcon style={{ color: '#fff' }} />

src/components/ModalPhoneNumpad/index.jsx

@@ -29,7 +29,6 @@ const ModalPhoneNumpad = ({
 	const [exNum, setExNum] = useState();
 	const translator = useTranslator();
 
-	
 	useEffect(() => {
 		let currentCalls = localStorage.getItem('callhistory')
 			? JSON.parse(localStorage.getItem('callhistory'))
@@ -296,7 +295,7 @@ const ModalPhoneNumpad = ({
 												setExNum(false);
 												callButton();
 											}}>
-											{title}({number})
+											{title}
 										</p>
 									))}
 								</NumberButton.CallButtonModalInset>

src/context/index.jsx

+/** @format */
+
+import React from 'react';
+import ModalEventProperty from './modalEventProperty';
+
+const CreateContext = ({ children }) => {
+	return (
+		<>
+			<ModalEventProperty>{children}</ModalEventProperty>
+		</>
+	);
+};
+
+export default CreateContext;

src/context/modalEventProperty.js

+/** @format */
+
+import React from 'react';
+import { createContext } from 'react';
+import { useEffect } from 'react';
+import { useState } from 'react';
+export const contextModalEventProperty = createContext();
+const ModalEventProperty = ({ children }) => {
+	const [callEvents, setCallEvents] = useState();
+	const boxDialer = window.BoxDialer;
+	useEffect(() => {
+		boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents');
+	}, []);
+	return (
+		<contextModalEventProperty.Provider value={[callEvents, setCallEvents]}>
+			{children}
+		</contextModalEventProperty.Provider>
+	);
+};
+
+export default ModalEventProperty;

src/index.js

@@ -8,6 +8,7 @@ import Root from './root';
 import './index.css';
 import ControlRenderBX from './lib/controlRenderBX';
 import LanguageController from './lib/languageController';
+import CreateContext from './context';
 window.BoxDialer = new BoxDialer();
 
 const container = document.getElementById('boxdialerwidjet');
@@ -15,9 +16,11 @@ const root = createRoot(container);
 
 root.render(
 	<React.StrictMode>
+		<CreateContext>
 			<LanguageController>
 				<Toaster />
 				<ControlRenderBX />
 			</LanguageController>
+		</CreateContext>
 	</React.StrictMode>,
 );