update verison: 0.8.3

package.json

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

src/components/BxMiniWidjetUi/index.jsx

+/** @format */
+
+import React from 'react';
+import BxMiniWidjetUiStyle, { DialPadIcon } from './style';
+import TimerUi from '../TimerUi';
+
+const BxMiniWidjetUi = ({
+	widjetState,
+	phoneNumber,
+	reason,
+	widjetVersion,
+	leftTime,
+	onClick,
+	position,
+}) => {
+	return (
+		<BxMiniWidjetUiStyle
+			status={widjetState}
+			onClick={onClick}
+			position={position}>
+			<div className='left'>
+				<p className='title'>{phoneNumber}</p>
+				<p>
+					<span className='status'>{widjetState}</span>
+					<TimerUi reason={reason} time={leftTime} />
+				</p>
+			</div>
+			<div className='bottom'>
+				<BxMiniWidjetUiStyle.StatusLine status={widjetState}>
+					<p className='verison'>v {widjetVersion}</p>
+				</BxMiniWidjetUiStyle.StatusLine>
+			</div>
+		</BxMiniWidjetUiStyle>
+	);
+};
+
+export default BxMiniWidjetUi;

src/components/BxMiniWidjetUi/style.js

+/** @format */
+
+import styled from 'styled-components';
+import CallIcon from '@mui/icons-material/Dialpad';
+import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
+
+const BxMiniWidjetUiStyle = styled.div`
+	* {
+		margin: 0;
+		padding: 0;
+		box-sizing: border-box;
+	}
+
+	height: 70px;
+	width: 80px;
+	border-radius: 13px;
+	background-color: #164e63e6;
+	cursor: pointer;
+	color: white;
+	z-index: 999;
+	position: fixed;
+	display: grid;
+	align-items: center;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr 10px;
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	${({ position }) => boxDialerWidjetPosition[position].block}
+
+	.left {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.right {
+	}
+	.title {
+		font-size: 20px;
+		font-weight: 600;
+	}
+	.bottom {
+		height: 100%;
+		grid-column: 1/3;
+		grid-row: 2/3;
+	}
+	.status {
+		border-radius: 10px;
+		padding: 0 3px;
+		margin: 0 5px;
+		font-size: 12px;
+		background-color: ${({ status }) =>
+			status === 'pending'
+				? 'orange'
+				: status === 'connected'
+				? '#a0c13d'
+				: '#ccc'};
+		color: ${({ status }) =>
+			status === 'pending' ? '#fff' : status === 'connected' ? '#333' : '#ccc'};
+	}
+`;
+BxMiniWidjetUiStyle.StatusLine = styled.div`
+	height: 100%;
+	background-color: ${({ backColor }) => backColor};
+	border-bottom-left-radius: 30px;
+	border-bottom-right-radius: 30px;
+	background-color: ${({ status }) =>
+		status === 'pending'
+			? 'orange'
+			: status === 'connected'
+			? '#a0c13d'
+			: '#ccc'};
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 0 10px 0 0;
+	color: green;
+	.verison {
+		font-size: 10px;
+		font-weight: bold;
+		float: right;
+	}
+`;
+const DialPadIcon = styled(CallIcon)`
+	font-size: 26px;
+`;
+
+export { DialPadIcon };
+export default BxMiniWidjetUiStyle;

src/components/DefaultWidjetUi/index.jsx

@@ -4,16 +4,20 @@ import React from 'react';
 import DefaultWidjetStyle, { DialPadIcon } from './style';
 import TimerUi from '../TimerUi';
 
-const DefaultWidjet = ({
+const DefaultWidjetUi = ({
 	widjetState,
 	phoneNumber,
 	reason,
 	widjetVersion,
 	leftTime,
 	onClick,
+	position,
 }) => {
 	return (
-		<DefaultWidjetStyle status={widjetState} onClick={onClick}>
+		<DefaultWidjetStyle
+			status={widjetState}
+			onClick={onClick}
+			position={position}>
 			<div className='left'>
 				<p className='title'>{phoneNumber}</p>
 				<p>
@@ -33,4 +37,4 @@ const DefaultWidjet = ({
 	);
 };
 
-export default DefaultWidjet;
+export default DefaultWidjetUi;

src/components/DefaultWidjetUi/style.js

@@ -2,6 +2,7 @@
 
 import styled from 'styled-components';
 import CallIcon from '@mui/icons-material/Dialpad';
+import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
 
 const DefaultWidjetStyle = styled.div`
 	* {
@@ -20,9 +21,7 @@ const DefaultWidjetStyle = styled.div`
 	z-index: 999;
 
 	position: fixed;
-	bottom: 30px;
-	left: 50px;
-
+	${({ position }) => boxDialerWidjetPosition[position].block}
 	display: grid;
 	align-items: center;
 	grid-template-columns: 1fr 30px;

src/components/ModalPhoneNumpad/index.jsx

 /** @format */
 
-import React, {useCallback, useEffect, useState} from 'react';
-import ModalPhoneNumpadStyle, {NumberButton, Input} from './style'
-import numbers from "./numbers"
-import DropDownTailwind from "../TailwindComponents/DropDown"
-import CallIcon from "@mui/icons-material/Call"
-import {toast} from "react-hot-toast"
+import React, { useCallback, useEffect, useState } from 'react';
+import ModalPhoneNumpadStyle, { NumberButton, Input } from './style';
+import numbers from './numbers';
+import DropDownTailwind from '../TailwindComponents/DropDown';
+import CallIcon from '@mui/icons-material/Call';
+import { toast } from 'react-hot-toast';
 
 const ModalPhoneNumpad = ({
 	phoneModal,
@@ -13,28 +13,27 @@ const ModalPhoneNumpad = ({
 	reasons,
 	reason,
 	onSetDnd,
-                              dynamicValue
+	dynamicValue,
+	position,
 }) => {
-
 	const boxDialer = window.BoxDialer;
 
 	const [inputValue, setInputValue] = useState('');
 
-
-
 	useEffect(() => {
 		if (!modalState.bool) setInputValue('');
 	}, [modalState.bool]);
 
-
-    const inputController = ({value, type, from}) => {
-        boxDialer.onSoundType({type: 'pick', bool: true});
+	const inputController = ({ value, type, from }) => {
+		boxDialer.onSoundType({ type: 'pick', bool: true });
 		if (modalState.callType === 'outcoming' && modalState.bool) {
 			boxDialer.sipSendDTMF(value);
 		}
 		switch (type) {
 			case 'add':
-                if (value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length) {
+				if (
+					value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length
+				) {
 					if (from === 'input') return setInputValue(value);
 					if (from === 'button') setInputValue(inputValue + value);
 				}
@@ -42,10 +41,12 @@ const ModalPhoneNumpad = ({
 				break;
 			case 'delete':
 				if (from === 'button') {
-                    setInputValue(inputValue
+					setInputValue(
+						inputValue
 							.split('')
 							.slice(0, inputValue.length - 1)
-                        .join(''),);
+							.join(''),
+					);
 				}
 				if (from === 'input') {
 					setInputValue(value);
@@ -63,7 +64,7 @@ const ModalPhoneNumpad = ({
 				navigator.clipboard
 					.readText()
 					.then((text) => {
-                        inputController({type: 'add', value: text, from: 'button'});
+						inputController({ type: 'add', value: text, from: 'button' });
 					})
 					.catch((err) => {
 						console.log('Something went wrong', err);
@@ -76,17 +77,28 @@ const ModalPhoneNumpad = ({
 		toggleCP: (e) => {
 			if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
 				boxDialer.initialized(inputValue);
-            } else if (phoneModal && (modalState.bool ? false : true) && e.key === 'Backspace') {
-                inputController({type: 'delete', from: 'button', value: e.value});
-            } else if (phoneModal && (modalState.bool ? false : true) && !isNaN(+e.key)) {
-                inputController({type: 'add', value: e.key, from: 'button'});
+			} else if (
+				phoneModal &&
+				(modalState.bool ? false : true) &&
+				e.key === 'Backspace'
+			) {
+				inputController({ type: 'delete', from: 'button', value: e.value });
+			} else if (
+				phoneModal &&
+				(modalState.bool ? false : true) &&
+				!isNaN(+e.key)
+			) {
+				inputController({ type: 'add', value: e.key, from: 'button' });
 			}
 		},
 	};
-    const handleKeyUp = useCallback((event) => {
+	const handleKeyUp = useCallback(
+		(event) => {
 			console.log(event);
 			gameState.toggleCP(event);
-    }, [gameState.toggleCP],);
+		},
+		[gameState.toggleCP],
+	);
 
 	useEffect(() => {
 		document.addEventListener('keyup', handleKeyUp);
@@ -110,15 +122,14 @@ const ModalPhoneNumpad = ({
 
 	return (
 		<ModalPhoneNumpadStyle
+			position={position}
 			hidden={!phoneModal}
 			onClick={(e) => e.stopPropagation()}>
 			<ModalPhoneNumpadStyle.InputArea>
 				<Input disabled type='text' value={inputValue} />
 				{inputValue.length ? (
 					<Input.BackSpaceIcon
-                        onClick={() =>
-                            inputController({ type: 'delete', from: 'button' })
-                        }
+						onClick={() => inputController({ type: 'delete', from: 'button' })}
 					/>
 				) : (
 					''

src/components/ModalPhoneNumpad/style.js

-import styled from 'styled-components'
-import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace"
+/** @format */
+
+import styled from 'styled-components';
+import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
+import { boxDialerWidjetPosition } from '../../lib/boxDialerWidjetPosition';
 
 const ModalPhoneNumpadStyle = styled.div`
 	width: 230px;
@@ -7,8 +10,11 @@ const ModalPhoneNumpadStyle = styled.div`
 	bottom: 120px;
 	transition: 0.2s;
 	z-index: 999;
-  transform: translate(${({hidden}) => (hidden ? '-300px' : '325px')}, 0%);
-  left: -300px;
+	${({ hidden, position }) =>
+		hidden
+			? boxDialerWidjetPosition[position].numpad.hidden
+			: boxDialerWidjetPosition[position].numpad.seen}
+
 	background-color: #c9d5d9;
 	border-radius: 20px;
 	padding: 15px;
@@ -80,13 +86,16 @@ const NumberButton = styled.div`
 	font-size: 22px;
 	cursor: pointer;
 	height: 33px;
-  background-color: ${({
-                         status, type
-                       }) => type === 'call_button' ? status === 'pending' ? 'orange' : status === 'connected' && '#a0c13d' : '#5e5e5e'};
+	background-color: ${({ status, type }) =>
+		type === 'call_button'
+			? status === 'pending'
+				? 'orange'
+				: status === 'connected' && '#a0c13d'
+			: '#5e5e5e'};
 `;
 NumberButton.Icon = styled.div`
 	font-size: 20px;
 `;
 
-export {NumberButton, Input}
-export default ModalPhoneNumpadStyle
+export { NumberButton, Input };
+export default ModalPhoneNumpadStyle;

src/lib/boxDialerWidjetPosition.js

+/** @format */
+
+export const boxDialerWidjetPosition = {
+	bottomLeft: {
+		block: {
+			bottom: '30px',
+			left: '50px',
+		},
+		numpad: {
+			hidden: {
+				left: '-300px',
+			},
+			seen: {
+				left: '25px',
+			},
+		},
+	},
+	bottomCenter: {
+		block: {
+			transform: 'translate(-50%, 0)',
+			bottom: '30px',
+			left: '50%',
+		},
+		numpad: {
+			hidden: {
+				bottom: '-300px',
+				left: '50%',
+				transform: 'translate(-50%, 0)',
+			},
+			seen: {
+				bottom: '120px',
+				left: '50%',
+				transform: 'translate(-50%, 0)',
+			},
+		},
+	},
+	bottomRight: {
+		block: {
+			bottom: '30px',
+			left: 'auto',
+			right: '50px',
+		},
+		numpad: {
+			hidden: {
+				left: 'auto',
+				right: '-300px',
+			},
+			seen: {
+				left: 'auto',
+				right: '25px',
+			},
+		},
+	},
+};

src/root/index.jsx

@@ -3,11 +3,12 @@
 import WidjetButton from '../components/WidjetButton';
 import React, { useEffect, useState } from 'react';
 import packageJson from '../../package.json';
-import DefaultWidjet from '../components/DefaultWidjetUi';
+import DefaultWidjetUi from '../components/DefaultWidjetUi';
 import ModalPhoneNumpad from '../components/ModalPhoneNumpad';
 import Modal from '../components/Modal';
+import BxMiniWidjetUi from '../components/BxMiniWidjetUi';
 
-const Root = ({ data, onSetDnd, position }) => {
+const Root = ({ data, onSetDnd }) => {
 	if (!data) {
 		data = {
 			iscloud: true,
@@ -19,6 +20,7 @@ const Root = ({ data, onSetDnd, position }) => {
 			lefttime: 231461,
 			reasons: ['free', 'outcalls', 'home', 'totop'],
 			variant: 'bxmini',
+			position: 'bottomRight',
 		};
 	}
 
@@ -45,20 +47,50 @@ const Root = ({ data, onSetDnd, position }) => {
 		boxDialer.hangupButtonClick();
 	};
 
-	if (!data || !data?.number) return;
-
+	const selectWidjetType = (type) => {
+		switch (type) {
+			case 'bxmini':
 				return (
-		<>
-			<DefaultWidjet
+					<BxMiniWidjetUi
+						widjetState={dynamicValue}
+						phoneNumber={data?.number}
+						reason={data?.reason}
+						widjetVersion={packageJson?.version}
+						leftTime={data.lefttime}
+						position={data.position || 'bottomLeft'}
+						onClick={() => {
+							phoneModal ? setPhoneModal(false) : setPhoneModal(true);
+						}}
+					/>
+				);
+			default:
+				return (
+					<DefaultWidjetUi
 						widjetState={dynamicValue}
 						phoneNumber={data?.number}
 						reason={data?.reason}
 						widjetVersion={packageJson?.version}
 						leftTime={data.lefttime}
+						position={data.position || 'bottomLeft'}
 						onClick={() => {
 							phoneModal ? setPhoneModal(false) : setPhoneModal(true);
 						}}
 					/>
+				);
+		}
+	};
+
+	if (
+		!data ||
+		!data?.number
+		// || !data?.position
+	)
+		return;
+
+	return (
+		<>
+			{selectWidjetType(data.variant)}
+
 			<ModalPhoneNumpad
 				modalState={modalState}
 				phoneModal={phoneModal}
@@ -67,7 +99,9 @@ const Root = ({ data, onSetDnd, position }) => {
 				onClick={(e) => e.stopPropagation()}
 				dynamicValue={dynamicValue}
 				onSetDnd={onSetDnd}
+				position={data.position || 'bottomLeft'}
 			/>
+
 			<Modal
 				className='tailwindGlobalCss'
 				callAnswerType={modalState.callType}