test update verison: 0.1.3

package.json

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

src/components/CallCardDropDown/index.jsx

+/** @format */
+
+import React, { useState } from 'react';
+import Block from './style';
+import { data as mockData } from '../WidjetButton/mockTest';
+
+const CallCardDropDown = ({ hiddenState, selectUserFunc }) => {
+
+	const [inputValue, setinputValue] = useState('');
+	return (
+		<Block onClick={(e) => e.stopPropagation()} hiddenState={hiddenState}>
+			<Block.Input
+				placeholder='Search'
+				hiddenState={hiddenState}
+				onChange={(e) => setinputValue(e.target.value)}
+			/>
+			<Block.Inset hiddenState={hiddenState}>
+				{mockData.map(
+					({ NAME, UF_PHONE_INNER, LAST_NAME }) =>
+						(NAME.toLocaleLowerCase().includes(
+							inputValue.toLocaleLowerCase(),
+						) ||
+							LAST_NAME.toLocaleLowerCase().includes(
+								inputValue.toLocaleLowerCase(),
+							) ||
+							UF_PHONE_INNER.toString().includes(inputValue.toString())) && (
+							<Block.Section onClick={() => selectUserFunc(UF_PHONE_INNER)}>
+								<p className='name'>
+									{NAME} {LAST_NAME}
+								</p>
+								<p className='phone_number'>{UF_PHONE_INNER}</p>
+							</Block.Section>
+						),
+				)}
+			</Block.Inset>
+		</Block>
+	);
+};
+
+export default CallCardDropDown;

src/components/CallCardDropDown/style.js

+/** @format */
+
+import styled from 'styled-components';
+
+const Block = styled.div`
+	transition: 0.3s;
+	${({ hiddenState }) => console.log(hiddenState, 'dhjgdasjhgdasjhg')}
+	${({ hiddenState }) =>
+		hiddenState
+			? {
+					width: '0',
+					height: '0',
+					padding: '0',
+			  }
+			: {
+					width: '280px',
+					height: '250px',
+					padding: '60px 3px 5px 0',
+			  }}
+
+	position: absolute;
+	bottom: 45px;
+	left: 50%;
+	transform: translate(-50%, 0);
+	background-color: #232932f2;
+	border-radius: 10px;
+	/* width */
+	::-webkit-scrollbar {
+		width: 10px !important;
+	}
+
+	/* Track */
+	::-webkit-scrollbar-track {
+		background: #ffffff00 !important;
+	}
+
+	/* Handle */
+	::-webkit-scrollbar-thumb {
+		background: #ffffff4a !important;
+		border-radius: 20px;
+	}
+
+	/* Handle on hover */
+	::-webkit-scrollbar-thumb:hover {
+		background: #ffffff4a !important;
+	}
+`;
+
+Block.Inset = styled.div`
+	${({ hiddenState }) => (hiddenState ? { padding: '0' } : { padding: '5px' })}
+	padding: 0 2px 0 5px;
+	height: 100%;
+	width: 100%;
+
+	overflow-y: scroll;
+
+	border-radius: 10px;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-gap: 5px;
+`;
+Block.Section = styled.div`
+	border-radius: 15px;
+	width: 100%;
+	height: 30px;
+	background-color: #ffffff8a;
+	padding: 0 8px;
+	display: grid;
+	grid-template-columns: 1fr 30px;
+	align-items: center;
+	grid-gap: 10px;
+	p {
+		margin: 0;
+		padding: 0;
+	}
+	display: flex;
+	justify-content: space-between;
+	.name {
+		font-size: 14px;
+	}
+	.phone_number {
+		font-size: 12px;
+		background-color: #a0c13d;
+		padding: 2px 5px;
+		min-width: 40px;
+		border-radius: 20px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+`;
+Block.Input = styled.input`
+	${({ hiddenState }) =>
+		hiddenState ? { display: 'none' } : { display: 'block' }}
+	color: #fff;
+	position: absolute;
+	width: 258px;
+	height: 40px;
+	top: 3px;
+	background-color: #ffffff1c;
+	transform: translate(5px, 10px);
+	border-radius: 10px;
+	padding: 3px;
+	font-size: 20px;
+	:focus {
+		border-color: inherit;
+		-webkit-box-shadow: none;
+		box-shadow: none;
+		padding: 0 10px;
+		font-size: 24px;
+		outline: 0 none;
+	}
+	outline: none;
+
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	/* Firefox */
+	&[type='number'] {
+		-moz-appearance: textfield;
+	}
+`;
+
+export default Block;

src/components/Modal/index.jsx

@@ -10,6 +10,7 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 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';
 const Modal = ({
 	children,
 	hidden,
@@ -23,7 +24,7 @@ const Modal = ({
 	const [rollUp, setRollUp] = useState(false);
 	const [modalHidden, setModalHidden] = useState(false);
 	const [callEvents, setCallEvents] = useState({});
-
+	const [transferModel, setTransferModel] = useState(true);
 	useEffect(() => {
 		boxDialer.setSipStateChangeCallback(setCallEvents, 'setCallEvents');
 	}, []);
@@ -32,9 +33,19 @@ const Modal = ({
 		setModalHidden(hidden);
 	}, [hidden]);
 
+	const selectUserFunc = (e) => {
+		if (e) {
+			boxDialer.transferButtonClick(e);
+			setTransferModel(true);
+		}
+	};
+
 	if (!modalHidden) return;
 	return (
-		<MainBlock hidden={modalHidden || modalHidden} rollUp={rollUp}>
+		<MainBlock
+			hidden={modalHidden || modalHidden}
+			rollUp={rollUp}
+			onClick={(e) => e.stopPropagation()}>
 			<ModalContainer onClick={(e) => e.stopPropagation()} rollUp={rollUp}>
 				{children}
 				<ModalContainer.Top className={'top'} rollUp={rollUp}>
@@ -59,10 +70,7 @@ const Modal = ({
 				<ModalContainer.Bottom rollUp={rollUp}></ModalContainer.Bottom>
 				<hr />
 				{callType === 'outcoming' ? (
-					<ModalContainer.Footer
-						justify={'space-between'}
-						rollUp={rollUp}
-						onClick={() => hangupButton()}>
+					<ModalContainer.Footer justify={'space-between'} rollUp={rollUp}>
 						<div className='outcomingEventStyle'>
 							<div onClick={() => boxDialer.holdButtonClick()}>
 								{callEvents.callHold ? (
@@ -78,14 +86,21 @@ const Modal = ({
 									<MicIcon style={{ color: '#fff' }} />
 								)}
 							</div>
-							<div onClick={() => boxDialer.transferButtonClick()}>
+							<div
+								className='transferAreaIcon'
+								onClick={() => setTransferModel(!transferModel)}
+							>
 								<SendToMobileIcon style={{ color: '#fff' }} />
+								<CallCardDropDown
+									hiddenState={transferModel}
+									selectUserFunc={selectUserFunc}
+								/>
 							</div>
 							<div>
 								<DialpadIcon style={{ color: '#fff' }} />
 							</div>
 						</div>
-						<button className='redButton'>
+						<button className='redButton' onClick={() => hangupButton()}>
 							<CallEndIcon />
 							ЗАКРЫТЬ
 						</button>
@@ -121,8 +136,15 @@ const Modal = ({
 									<MicIcon style={{ color: '#fff' }} />
 								)}
 							</div>
-							<div onClick={() => boxDialer.transferButtonClick()}>
+							<div
+								className='transferAreaIcon'
+								onClick={() => setTransferModel(!transferModel)}
+							>
 								<SendToMobileIcon style={{ color: '#fff' }} />
+								<CallCardDropDown
+									hiddenState={transferModel}
+									selectUserFunc={selectUserFunc}
+								/>
 							</div>
 							<div>
 								<DialpadIcon style={{ color: '#fff' }} />

src/components/Modal/style.js

@@ -125,6 +125,9 @@ ModalContainer.Footer = styled.div`
 			align-items: center;
 		}
 	}
+	.transferAreaIcon {
+		position: relative;
+	}
 	.redButton {
 		background-color: #9d0f23;
 		border-radius: 50px;

src/components/WidjetButton/index.jsx

@@ -37,7 +37,7 @@ const WidjetButton = ({ data, onSetDnd }) => {
 		console.log(
 			window.BX.rest.callMethod('user.get', {}, (rr) => {
 				console.log(rr.answer.result);
-			})
+			}),
 		);
 	}
 
@@ -57,8 +57,6 @@ const WidjetButton = ({ data, onSetDnd }) => {
 		}
 	}, []);
 
-	console.log(data, 'data');
-
 	useEffect(() => {
 		if (!modalState.bool) setInputValue('');
 	}, [modalState.bool]);
@@ -96,7 +94,7 @@ const WidjetButton = ({ data, onSetDnd }) => {
 		}
 	};
 	document.onkeydown = function (e) {
-		if (phoneModal) {
+		if (phoneModal && modalState.bool ? false : true) {
 			e = e || window.event;
 			if (e.ctrlKey && e.keyCode === 86) {
 				navigator.clipboard
@@ -113,11 +111,19 @@ const WidjetButton = ({ data, onSetDnd }) => {
 	};
 	const gameState = {
 		toggleCP: (e) => {
-			if (phoneModal && e.key === 'Enter') {
+			if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
 				boxDialer.initialized(inputValue, data.number);
-			} else if (phoneModal && e.key === 'Backspace') {
+			} else if (
+				phoneModal &&
+				(modalState.bool ? false : true) &&
+				e.key === 'Backspace'
+			) {
 				inputController({ type: 'delete', from: 'button', value: e.value });
-			} else if (phoneModal && !isNaN(+e.key)) {
+			} else if (
+				phoneModal &&
+				(modalState.bool ? false : true) &&
+				!isNaN(+e.key)
+			) {
 				inputController({ type: 'add', value: e.key, from: 'button' });
 			}
 		},
@@ -159,7 +165,9 @@ const WidjetButton = ({ data, onSetDnd }) => {
 	return (
 		<>
 			<WidjetBlock
+				id={'responsible-button'}
 				onClick={(e) => {
+					boxDialer.selectUser(e)
 					phoneModal ? setPhoneModal(false) : setPhoneModal(true);
 				}}>
 				<WidjetBlock.AccauntInfo status={dynamicValue}>

src/lib/boxDIaler.js

@@ -347,6 +347,29 @@ export class BoxDialer {
 				break;
 		}
 	}
+
+	selectUser(param) {
+		BX.Runtime.loadExtension('ui.entity-selector').then((exports) => {
+			const { Dialog, TagSelector } = exports;
+
+			const button = param;
+			const dialog = new BX.UI.EntitySelector.Dialog({
+				targetNode: button,
+				enableSearch: true,
+				context: 'MY_MODULE_CONTEXT',
+				entities: [
+					{
+						id: 'user', // пользователи
+					},
+					{
+						id: 'department', // структура компании: выбор только пользователей
+					},
+				],
+			});
+			dialog.show();
+		});
+	}
+
 	// call_connected;
 	setSipStateChangeCallback(callback, funcName) {
 		this.onSipStateChange[funcName] = callback.bind(this);
@@ -459,11 +482,9 @@ export class BoxDialer {
 	closeButtonClick() {
 		console.log('closeButtonClick');
 	}
-	transferButtonClick() {
+	transferButtonClick(number) {
 		if (this.oSipSessionCall) {
-			console.log('transferButtonClick');
-			var s_destination = prompt('Enter destination number', '');
-			if (this.oSipSessionCall.transfer(s_destination) != 0) {
+			if (this.oSipSessionCall.transfer(number) != 0) {
 				toast.error('Call transfer failed');
 				return;
 			}