update version

src/components/BxMiniWidjetUi/index.jsx

@@ -13,6 +13,8 @@ const BxMiniWidjetUi = ({
 	onClick,
 	position,
 }) => {
+	console.log(reason, 'reason');
+
 	return (
 		<BxMiniWidjetUiStyle
 			status={widjetState}
@@ -21,7 +23,7 @@ const BxMiniWidjetUi = ({
 			<div className='left'>
 				<p className='title'>{phoneNumber}</p>
 				<p>
-					<span className='status'>{widjetState}</span>
+					<span className='status'>{reason}</span>
 					<TimerUi reason={reason} time={leftTime} />
 				</p>
 			</div>

src/components/BxMiniWidjetUi/style.js

@@ -30,7 +30,7 @@ const BxMiniWidjetUiStyle = styled.div`
 	-ms-user-select: none;
 	user-select: none;
 
-	${({ position }) => boxDialerWidjetPosition[position].block}
+	${({ position }) => boxDialerWidjetPosition.bxmini[position].block}
 
 	.left {
 		display: flex;
@@ -53,14 +53,7 @@ const BxMiniWidjetUiStyle = styled.div`
 		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'};
+		color: #ffffffab;
 	}
 `;
 BxMiniWidjetUiStyle.StatusLine = styled.div`

src/components/DefaultWidjetUi/style.js

@@ -21,7 +21,7 @@ const DefaultWidjetStyle = styled.div`
 	z-index: 999;
 
 	position: fixed;
-	${({ position }) => boxDialerWidjetPosition[position].block}
+	${({ position }) => boxDialerWidjetPosition.defaultWidjet[position].block}
 	display: grid;
 	align-items: center;
 	grid-template-columns: 1fr 30px;

src/components/ModalPhoneNumpad/index.jsx

@@ -15,6 +15,7 @@ const ModalPhoneNumpad = ({
 	onSetDnd,
 	dynamicValue,
 	position,
+	variant,
 }) => {
 	const boxDialer = window.BoxDialer;
 
@@ -124,6 +125,7 @@ const ModalPhoneNumpad = ({
 		<ModalPhoneNumpadStyle
 			position={position}
 			hidden={!phoneModal}
+			variant={variant}
 			onClick={(e) => e.stopPropagation()}>
 			<ModalPhoneNumpadStyle.InputArea>
 				<Input disabled type='text' value={inputValue} />

src/components/ModalPhoneNumpad/style.js

@@ -10,10 +10,10 @@ const ModalPhoneNumpadStyle = styled.div`
 	bottom: 120px;
 	transition: 0.2s;
 	z-index: 999;
-	${({ hidden, position }) =>
+	${({ hidden, position, variant }) =>
 		hidden
-			? boxDialerWidjetPosition[position].numpad.hidden
-			: boxDialerWidjetPosition[position].numpad.seen}
+			? boxDialerWidjetPosition[variant][position].numpad.hidden
+			: boxDialerWidjetPosition[variant][position].numpad.seen}
 
 	background-color: #c9d5d9;
 	border-radius: 20px;

src/lib/boxDialerWidjetPosition.js

 /** @format */
 
 export const boxDialerWidjetPosition = {
-	bottomLeft: {
-		block: {
-			bottom: '30px',
-			left: '50px',
+	defaultWidjet: {
+		bottomLeft: {
+			block: {
+				bottom: '30px',
+				left: '50px',
+			},
+			numpad: {
+				hidden: {
+					left: '-300px',
+				},
+				seen: {
+					left: '25px',
+				},
+			},
 		},
-		numpad: {
-			hidden: {
-				left: '-300px',
+		bottomCenter: {
+			block: {
+				transform: 'translate(-50%, 0)',
+				bottom: '30px',
+				left: '50%',
 			},
-			seen: {
-				left: '25px',
+			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',
+				},
 			},
 		},
 	},
-	bottomCenter: {
-		block: {
-			transform: 'translate(-50%, 0)',
-			bottom: '30px',
-			left: '50%',
+
+	// BX mini UI
+	bxmini: {
+		bottomLeft: {
+			block: {
+				bottom: '30px',
+				left: '50px',
+			},
+			numpad: {
+				hidden: {
+					left: '-300px',
+				},
+				seen: {
+					left: '25px',
+				},
+			},
 		},
-		numpad: {
-			hidden: {
-				bottom: '-300px',
-				left: '50%',
+		bottomCenter: {
+			block: {
 				transform: 'translate(-50%, 0)',
-			},
-			seen: {
-				bottom: '120px',
+				bottom: '30px',
 				left: '50%',
-				transform: 'translate(-50%, 0)',
+			},
+			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: {
+		bottomRight: {
+			block: {
+				bottom: '0',
 				left: 'auto',
-				right: '-300px',
+				right: '0',
 			},
-			seen: {
-				left: 'auto',
-				right: '25px',
+			numpad: {
+				hidden: {
+					left: 'auto',
+					right: '-300px',
+				},
+				seen: {
+					left: 'auto',
+					right: '25px',
+				},
 			},
 		},
 	},

src/root/index.jsx

@@ -99,6 +99,7 @@ const Root = ({ data, onSetDnd }) => {
 				onClick={(e) => e.stopPropagation()}
 				dynamicValue={dynamicValue}
 				onSetDnd={onSetDnd}
+				variant={data.variant}
 				position={data.position || 'bottomLeft'}
 			/>
 

webpack.config.js

@@ -9,7 +9,9 @@ module.exports = {
 	output: {
 		path: path.resolve(__dirname, 'dist'),
 	},
-
+	// devServer: {
+	// 	port: 80,
+	// },
 	module: {
 		rules: [
 			{