update-

package-lock.json

 {
 	"name": "boxdialer",
-	"version": "3.3.3",
+	"version": "3.3.4",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "boxdialer",
-			"version": "3.3.3",
+			"version": "3.3.4",
 			"license": "ISC",
 			"dependencies": {
 				"@emotion/react": "^11.11.1",
@@ -19,6 +19,7 @@
 				"date-fns": "^2.30.0",
 				"ecmascript-webrtc-sipml": "git+https://git.4u.uz/kulya/ecmascript-webrtc-sipml.git",
 				"i": "^0.3.7",
+				"jssip": "^3.10.0",
 				"npm": "^10.1.0",
 				"react": "^18.2.0",
 				"react-dom": "^18.2.0",
@@ -2401,6 +2402,14 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/@types/debug": {
+			"version": "4.1.9",
+			"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.9.tgz",
+			"integrity": "sha512-8Hz50m2eoS56ldRlepxSBa6PWEVCtzUo/92HgLc2qTMnotJNIm7xP+UZhyWoYsyOdd5dxZ+NZLb24rsKyFs2ow==",
+			"dependencies": {
+				"@types/ms": "*"
+			}
+		},
 		"node_modules/@types/eslint": {
 			"version": "8.44.2",
 			"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.2.tgz",
@@ -2427,6 +2436,11 @@
 			"integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
 			"dev": true
 		},
+		"node_modules/@types/events": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.1.tgz",
+			"integrity": "sha512-QfUFdKjGSc+iCf8OFZhqJKfDuqB6lP57kSMkPw8ba3yNDANicUwCdaPt5ytZ4nDXXVFxQkvT8v73I4stSVrCxA=="
+		},
 		"node_modules/@types/express": {
 			"version": "4.17.17",
 			"resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
@@ -2484,6 +2498,11 @@
 			"integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
 			"dev": true
 		},
+		"node_modules/@types/ms": {
+			"version": "0.7.32",
+			"resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.32.tgz",
+			"integrity": "sha512-xPSg0jm4mqgEkNhowKgZFBNtwoEwF6gJ4Dhww+GFpm3IgtNseHQZ5IqdNwnquZEoANxyDAKDRAdVo4Z72VvD/g=="
+		},
 		"node_modules/@types/node": {
 			"version": "20.5.1",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-20.5.1.tgz",
@@ -4172,7 +4191,6 @@
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
 			"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.8.x"
 			}
@@ -5202,6 +5220,39 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/jssip": {
+			"version": "3.10.0",
+			"resolved": "https://registry.npmjs.org/jssip/-/jssip-3.10.0.tgz",
+			"integrity": "sha512-iJj+bhnNl0S296sUDc2ZjIbAetnelzZ92aWARyW01oKZ0X8t+5aGrYfJdMFliLFm8hxMcnkep3vmSRGe/yRjsA==",
+			"dependencies": {
+				"@types/debug": "^4.1.7",
+				"@types/events": "^3.0.0",
+				"debug": "^4.3.1",
+				"events": "^3.3.0",
+				"sdp-transform": "^2.14.1"
+			}
+		},
+		"node_modules/jssip/node_modules/debug": {
+			"version": "4.3.4",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+			"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+			"dependencies": {
+				"ms": "2.1.2"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/jssip/node_modules/ms": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+		},
 		"node_modules/kind-of": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -9412,6 +9463,14 @@
 				"url": "https://opencollective.com/webpack"
 			}
 		},
+		"node_modules/sdp-transform": {
+			"version": "2.14.1",
+			"resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.1.tgz",
+			"integrity": "sha512-RjZyX3nVwJyCuTo5tGPx+PZWkDMCg7oOLpSlhjDdZfwUoNqG1mM8nyj31IGHyaPWXhjbP7cdK3qZ2bmkJ1GzRw==",
+			"bin": {
+				"sdp-verify": "checker.js"
+			}
+		},
 		"node_modules/select-hose": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",

package.json

@@ -22,6 +22,7 @@
 		"date-fns": "^2.30.0",
 		"ecmascript-webrtc-sipml": "git+https://git.4u.uz/kulya/ecmascript-webrtc-sipml.git",
 		"i": "^0.3.7",
+		"jssip": "^3.10.0",
 		"npm": "^10.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

src/components/Modal/index.jsx

@@ -11,21 +11,16 @@ import PauseIcon from '@mui/icons-material/Pause';
 import SendToMobileIcon from '@mui/icons-material/SendToMobile';
 import DialpadIcon from '@mui/icons-material/Dialpad';
 import CallCardDropDown from '../CallCardDropDown';
+import ModalNumpad from '../ModalNumpad';
 
-const Modal = ({
-	children,
-	hidden,
-	hangupButton,
-	phoneNumber,
-	callType,
-	callAnswerType,
-}) => {
+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 [transferModel, setTransferModel] = useState(true);
+	const [numpadModal, setNumpadModal] = useState(false);
 	useEffect(() => {
 		boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents');
 	}, []);
@@ -41,75 +36,44 @@ const Modal = ({
 		}
 	};
 
+	const openNumpad = () => {
+		if (window.BX) {
+		} else {
+			setNumpadModal(!numpadModal);
+		}
+	};
 	if (!modalHidden) return;
-	return (
-		<MainBlock
-			hidden={modalHidden || modalHidden}
-			rollUp={rollUp}
-			onClick={(e) => e.stopPropagation()}>
-			<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
-				{children}
-				<ModalContainer.Top className={'top'} rollUp={rollUp}>
-					{callType === 'outcoming' ? (
-						<p>Звонок на {phoneNumber}</p>
-					) : (
-						<p>Звонок от {phoneNumber}</p>
-					)}
 
-					<p className='rollUpButton' onClick={() => setRollUp(true)}>
-						Свернуть
-					</p>
-				</ModalContainer.Top>
-				<hr />
-				<ModalContainer.Head rollUp={rollUp}>
-					<div className='round'></div>
-					<p className='name'>No name</p>
-				</ModalContainer.Head>
-				<hr />
-				<ModalContainer.Body rollUp={rollUp}></ModalContainer.Body>
-				<hr />
-				<ModalContainer.Bottom rollUp={rollUp}></ModalContainer.Bottom>
-				<hr />
-				{callType === 'outcoming' ? (
-					<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
-						<div className='outcomingEventStyle'>
-							<div onClick={() => boxDialer.holdButtonClick()}>
-								{callEvents.callHold ? (
-									<PlayArrowIcon style={{ color: '#fff' }} />
-								) : (
-									<PauseIcon style={{ color: '#fff' }} />
-								)}
-							</div>
-							<div onClick={() => boxDialer.muteButtonClick()}>
-								{callEvents.callMute ? (
-									<MicOffIcon style={{ color: '#fff' }} />
-								) : (
-									<MicIcon style={{ color: '#fff' }} />
-								)}
-							</div>
-							<div
-								className='transferAreaIcon'
-								onClick={() => {
-									window.BX
-										? boxDialer.selectUser()
-										: setTransferModel(!transferModel);
-								}}>
-								<SendToMobileIcon style={{ color: '#fff' }} />
-								<CallCardDropDown
-									hiddenState={transferModel}
-									selectUserFunc={selectUserFunc}
-								/>
-							</div>
-							<div>
-								<DialpadIcon style={{ color: '#fff' }} />
-							</div>
-						</div>
-						<button className='redButton' onClick={() => hangupButton()}>
+	const selectModalType = (type) => {
+		switch (type) {
+			case 'incoming':
+				return (
+					<ModalContainer.Footer rollUp={rollUp}>
+						<button
+							className='redButton'
+							onClick={() => boxDialer.skipButtonClick()}>
 							<CallEndIcon />
 							ЗАКРЫТЬ
 						</button>
+						<button
+							className='greenButton'
+							onClick={() => boxDialer.answerButtonClick()}>
+							ОТВЕТИТЬ
+						</button>
 					</ModalContainer.Footer>
-				) : callAnswerType !== 'answered' ? (
+				);
+			case 'outgoing':
+				return (
+					<ModalContainer.Footer rollUp={rollUp}>
+						<button
+							className='greenButton'
+							onClick={() => boxDialer.answerButtonClick()}>
+							ОТВЕТИТЬ
+						</button>
+					</ModalContainer.Footer>
+				);
+			case 'connectingIncoming':
+				return (
 					<ModalContainer.Footer rollUp={rollUp}>
 						<button
 							className='redButton'
@@ -117,13 +81,21 @@ const Modal = ({
 							<CallEndIcon />
 							ЗАКРЫТЬ
 						</button>
+					</ModalContainer.Footer>
+				);
+			case 'connectingOutgoing':
+				return (
+					<ModalContainer.Footer rollUp={rollUp}>
 						<button
-							className='greenButton'
-							onClick={() => boxDialer.answerButtonClick()}>
-							ОТВЕТИТЬ
+							className='redButton'
+							onClick={() => boxDialer.skipButtonClick()}>
+							<CallEndIcon />
+							ЗАКРЫТЬ
 						</button>
 					</ModalContainer.Footer>
-				) : (
+				);
+			case 'connected':
+				return (
 					<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
 						<div className='outcomingEventStyle'>
 							<div onClick={() => boxDialer.holdButtonClick()}>
@@ -153,8 +125,12 @@ const Modal = ({
 									selectUserFunc={selectUserFunc}
 								/>
 							</div>
-							<div>
-								<DialpadIcon style={{ color: '#fff' }} />
+							<div className={'openNumpadAreaIcon'}>
+								<DialpadIcon
+									style={{ color: '#fff' }}
+									onClick={() => openNumpad()}
+								/>
+								<ModalNumpad hidden={numpadModal} />
 							</div>
 						</div>
 						<button
@@ -164,7 +140,43 @@ const Modal = ({
 							ЗАКРЫТЬ
 						</button>
 					</ModalContainer.Footer>
-				)}
+				);
+			default:
+				return (
+					<ModalContainer.Footer rollUp={rollUp}>
+						Do not fount event
+					</ModalContainer.Footer>
+				);
+		}
+	};
+
+	return (
+		<MainBlock
+			hidden={modalHidden || modalHidden}
+			rollUp={rollUp}
+			onClick={(e) => e.stopPropagation()}>
+			<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
+				{children}
+				<ModalContainer.Top className={'top'} rollUp={rollUp}>
+					<p>
+						Звонок {callType === 'outcoming' ? 'на' : 'от'} {phoneNumber}
+					</p>
+
+					<p className='rollUpButton' onClick={() => setRollUp(true)}>
+						Свернуть
+					</p>
+				</ModalContainer.Top>
+				<hr />
+				<ModalContainer.Head rollUp={rollUp}>
+					<div className='round'></div>
+					<p className='name'>No name</p>
+				</ModalContainer.Head>
+				{/* <hr />
+				<ModalContainer.Body rollUp={rollUp}></ModalContainer.Body>
+				<hr />
+				<ModalContainer.Bottom rollUp={rollUp}></ModalContainer.Bottom>
+				<hr /> */}
+				{selectModalType(callType)}
 			</ModalContainer>
 			<div className='rollUpVesion'>
 				<button

src/components/Modal/style.js

@@ -113,6 +113,7 @@ ModalContainer.Footer = styled.div`
 	align-items: center;
 	padding: 15px;
 	gap: 20px;
+	color: #fff;
 	.outcomingEventStyle {
 		display: flex;
 		align-items: center;
@@ -132,6 +133,9 @@ ModalContainer.Footer = styled.div`
 	.transferAreaIcon {
 		position: relative;
 	}
+	.openNumpadAreaIcon {
+		position: relative;
+	}
 	.redButton {
 		background-color: #9d0f23;
 		border-radius: 50px;

src/components/ModalNumpad/index.jsx

+/** @format */
+
+import React, { useState } from 'react';
+import Block, { NumberButton } from './style';
+import numbers from '../../lib/numbers';
+const ModalNumpad = ({ hidden }) => {
+	const boxDialer = window.BoxDialer;
+
+	const [dtmfValue, setDtmfValue] = useState('');
+	const selectNumberType = (value) => {
+		boxDialer.sipSendDTMF(value);
+		if (dtmfValue.length > 10) {
+			let sliceValue = (dtmfValue + value).slice(1);
+			setDtmfValue(sliceValue);
+		} else {
+			setDtmfValue(dtmfValue + value);
+		}
+	};
+	// 11
+	return (
+		<Block visiblevalue={hidden}>
+			<Block.ShowNumbersArea>{dtmfValue}</Block.ShowNumbersArea>
+			{numbers?.map((mapItem) => (
+				<NumberButton
+					className='nocopy'
+					key={mapItem.id}
+					onClick={() => selectNumberType(mapItem.value)}>
+					{mapItem.nameNumber}
+					<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
+				</NumberButton>
+			))}
+		</Block>
+	);
+};
+
+export default ModalNumpad;

src/components/ModalNumpad/style.js

+/** @format */
+
+import styled from 'styled-components';
+
+const Block = styled.div`
+	width: 200px;
+	padding: 8px;
+	background-color: #c9d5d9;
+	position: absolute;
+	bottom: 50px;
+	border-radius: 10px;
+	left: 50%;
+	transition: 0.3s;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-gap: 8px;
+	transform: translate(-50%, 0);
+	${({ visiblevalue }) =>
+		visiblevalue
+			? {
+					opacity: '1',
+					transform: 'translate(-50%, 0)',
+			  }
+			: {
+					opacity: '0',
+					transform: 'translate(-50%, 0)',
+			  }}
+`;
+Block.ShowNumbersArea = styled.div`
+	grid-column: 1/4;
+	height: 33px;
+	color: #000;
+	font-size: 22px;
+	text-align: center;
+	letter-spacing: 5px;
+	font-weight: bold;
+`;
+const NumberButton = styled.div`
+	color: #fff;
+	font-weight: bold;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 7px;
+	font-size: 22px;
+	cursor: pointer;
+	height: 33px;
+	background-color: ${({ status = '', type = '' }) =>
+		type === 'call_button'
+			? status === 'pending'
+				? 'orange'
+				: status === 'connected' && '#a0c13d'
+			: '#5e5e5e'};
+`;
+NumberButton.Icon = styled.div`
+	font-size: 20px;
+`;
+
+export { NumberButton };
+
+export default Block;

src/components/ModalPhoneNumpad/index.jsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import ModalPhoneNumpadStyle, { NumberButton, Input } from './style';
-import numbers from './numbers';
+import numbers from '../../lib/numbers';
 import CallIcon from '@mui/icons-material/Call';
 import { toast } from 'react-hot-toast';
 import DropDown from '../DropDown';
@@ -45,7 +45,7 @@ const ModalPhoneNumpad = ({
 	const inputController = ({ value, type, from }) => {
 		boxDialer.onSoundType({ type: 'pick', bool: true });
 		if (modalState.callType === 'outcoming' && modalState.bool) {
-			boxDialer.sipSendDTMF(value);
+			// boxDialer.sipSendDTMF(value);
 		}
 		switch (type) {
 			case 'add':

src/lib/controlRenderBX.jsx

@@ -10,10 +10,10 @@ const ControlRenderBX = () => {
 		if (!window.alovoice_wsphone) {
 			setWsphonedata({
 				iscloud: true,
-				number: '4003',
+				number: '2020',
 				wsurl: 'cld.alovoice.uz:61040',
 				server_id: 40,
-				secret: '26a830',
+				secret: '97bff7',
 				lefttime: 231461,
 				reasons: ['free', 'outcalls', 'home', 'totop'],
 				reason: 'free',

src/root/index.jsx

@@ -52,20 +52,20 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
 		if (wsphonedata && wsphonedata?.number) {
 			boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
 			boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
-			boxDialer.setSipStateChangeCallback(setPhoneModal, 'phoneModal');
 			boxDialer.setSipStateChangeCallback(setSecondLine, 'secondLine');
 			boxDialer.sipRegister(wsphonedata);
 		}
-		// setData(data);
 	}, []);
 
 	const hangupButton = () => {
 		boxDialer.hangupButtonClick();
 	};
+
 	window.setWSData = (result) => {
 		console.log('setWsphonedata', result);
 		setWsphonedata(result);
 	};
+
 	const reasonSelect = async (e) => {
 		let result = await onSetDnd(e);
 		setWsphonedata(result);
@@ -130,9 +130,10 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
 
 			<Modal
 				className='tailwindGlobalCss'
-				callAnswerType={modalState.callType}
 				hidden={modalState.bool}
+				// hidden={true}
 				callType={modalState.callType}
+				// callType={'connected'}
 				hangupButton={hangupButton}
 				phoneNumber={
 					modalState.callType === 'outcoming'