update-

package.json

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

src/components/BxMiniWidjetUi/style.js

@@ -19,6 +19,7 @@ const colorTypeFunc = (type) => {
 };
 
 const BxMiniWidjetUiStyle = styled.div`
+	box-shadow: -2px 0px 9px 3px #0000004f;
 	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	/* background-color: ${({ status = '' }) =>
 		status === 'pending'
@@ -98,7 +99,7 @@ BxMiniWidjetUiStyle.StatusLine = styled.div`
 	height: 100%;
 	border-bottom-left-radius: 30px;
 	border-bottom-right-radius: 30px;
-	${({ status }) => (status ? status : {})}
+	/* ${({ status }) => (status ? status : {})} */
 	display: flex;
 	align-items: center;
 	justify-content: center;

src/components/InnerCaller/index.jsx

+/** @format */
+
+import React from 'react';
+import Block from './style';
+import { useTranslator } from '@eo-locale/react';
+
+const InnerCaller = ({ hidden, modalState }) => {
+	const boxDialer = window.BoxDialer;
+	const translator = useTranslator();
+	return (
+		<Block hidden={hidden}>
+			<div className='top'>
+				<p className='call_text nocopy'>
+					{translator.translate('CALL_FROM')}{' '}
+					<span>{this?.callSession?._remote_identity?._uri?.user}</span>
+				</p>
+			</div>
+			<div className='bottom'>
+				<button
+					className='button light_blue nocopy'
+					onClick={() => boxDialer.answerButtonClick()}>
+					{translator.translate('ANSWER')}
+				</button>
+				<button
+					className='button red nocopy'
+					onClick={() => boxDialer.skipButtonClick()}>
+					{translator.translate('REJECT')}
+				</button>
+			</div>
+		</Block>
+	);
+};
+
+export default InnerCaller;

src/components/InnerCaller/style.js

+/** @format */
+
+import styled from 'styled-components';
+
+const positionInnerCaller = (pos) => {
+	const open = {
+		right: '52px',
+	};
+	const hidden = {
+		right: '-270px',
+	};
+	pos ? open : hidden;
+};
+
+const Block = styled.div`
+	box-shadow: -2px 0px 9px 3px #0000004f;
+	z-index: 998;
+	box-sizing: border-box;
+	padding: 5px 15px 5px 10px;
+	position: fixed;
+	bottom: 1px;
+	right: 52px;
+	height: 62px;
+	width: 250px;
+	border: 3px solid green;
+	background-color: #fff;
+	/* border-radius: 13px; */
+	border-top-left-radius: 13px;
+	border-bottom-left-radius: 13px;
+	transition: 0.3s;
+	${({ hidden }) => positionInnerCaller(hidden)}
+	display: grid;
+	grid-template-rows: 1fr 1fr;
+	grid-row-gap: 5px;
+	.top {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.bottom {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 15px;
+	}
+	.call_text {
+		padding: 0;
+		margin: 0;
+	}
+	.button {
+		max-width: 100px;
+		width: 100%;
+		padding: 5px 0px;
+		border-radius: 5px;
+		font-size: 14px;
+		font-weight: bold;
+		cursor: pointer;
+	}
+	.light_blue {
+		background-color: #d2f95f;
+		border: 0;
+		color: #333;
+	}
+	.red {
+		background-color: #ff0505;
+		border: 0;
+		color: #fff;
+	}
+`;
+
+export default Block;

src/components/ModalPhoneNumpad/style.js

@@ -5,6 +5,8 @@ import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
 import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
 
 const ModalPhoneNumpadStyle = styled.div`
+	backdrop-filter: blur(4px);
+	box-shadow: inset 0 0 20px 20px #c0bbbb45;
 	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	margin: 0;
 	padding: 0;
@@ -18,7 +20,7 @@ const ModalPhoneNumpadStyle = styled.div`
 		hiddenValue
 			? boxDialerWidjetPosition[variant][position].numpad.hidden
 			: boxDialerWidjetPosition[variant][position].numpad.seen}
-	background-color: #c9d5d9;
+	/* background-color: #c9d5d9; */
 	border-radius: 20px;
 	padding: 15px;
 	display: grid;
@@ -83,6 +85,9 @@ Input.BackSpaceIcon = styled(KeyboardBackspaceIcon)`
 `;
 
 const NumberButton = styled.div`
+	/* background-color: #607d8b8f; */
+	text-shadow: 0px 0px 3px #000;
+	border-radius: 20px;
 	color: #fff;
 	font-weight: bold;
 	display: flex;
@@ -97,7 +102,7 @@ const NumberButton = styled.div`
 			? status === 'pending'
 				? 'orange'
 				: status === 'connected' && '#a0c13d'
-			: '#5e5e5e'};
+			: '#607d8b8f'};
 `;
 NumberButton.Icon = styled.div`
 	font-size: 20px;

src/lib/controlRenderBX.jsx

@@ -4,7 +4,6 @@ import Root from '../root';
 
 const ControlRenderBX = () => {
 	const [wsphonedata, setWsphonedata] = useState({});
-	console.log('boxdialer_wsphone_data: ', window.alovoice_wsphone);
 	useEffect(() => {
 		setWsphonedata(window.alovoice_wsphone);
 		if (!window.alovoice_wsphone) {

src/root/index.jsx

@@ -7,6 +7,7 @@ import ModalPhoneNumpad from '../components/ModalPhoneNumpad';
 import Modal from '../components/Modal';
 import BxMiniWidjetUi from '../components/BxMiniWidjetUi';
 import SecondNotifSip from '../components/SecondNotifSip';
+import InnerCaller from '../components/InnerCaller';
 // setWsphonedata;
 // const Root = ({ wsphonedata, onSetDnd, setWsphonedata }) => {
 const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
@@ -31,8 +32,6 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
 	// 	onSetDnd = window.alovoice_onsetdnd;
 	// }
 
-	console.log('boxdialer_wsphone_data: ', wsphonedata);
-
 	const [phoneModal, setPhoneModal] = useState(false);
 	const [dynamicValue, setDynamicValue] = useState('pending');
 	const [modalState, setModalState] = useState(false);
@@ -145,6 +144,8 @@ const Root = ({ wsphonedata, onSetDnd, setWsphonedata, callMethod }) => {
 				}
 			/>
 
+			<InnerCaller hidden={modalState.bool} modalState={modalState} />
+
 			<SecondNotifSip secondLine={secondLine} />
 		</>
 	);