update verison: 0.8.5

package.json

 {
 	"name": "boxdialer",
-	"version": "0.8.4",
+	"version": "0.8.5",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {
@@ -22,7 +22,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-hot-toast": "^2.4.1",
-		"styled-components": "^6.0.7"
+		"styled-components": "^5.3.5"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.22.10",

src/components/BxMiniWidjetUi/index.jsx

@@ -13,22 +13,22 @@ const BxMiniWidjetUi = ({
 	onClick,
 	position,
 }) => {
-	console.log(reason, 'reason');
-
 	return (
 		<BxMiniWidjetUiStyle
-			status={widjetState}
+			status={widjetState || ''}
 			onClick={onClick}
 			position={position}>
 			<div className='left'>
 				<p className='title'>{phoneNumber}</p>
 				<p>
-					<span className='status'>{reason}</span>
+					<BxMiniWidjetUiStyle.ReasonTest className='status' reason={reason}>
+						{reason}
+					</BxMiniWidjetUiStyle.ReasonTest>
 					<TimerUi reason={reason} time={leftTime} />
 				</p>
 			</div>
 			<div className='bottom'>
-				<BxMiniWidjetUiStyle.StatusLine status={widjetState}>
+				<BxMiniWidjetUiStyle.StatusLine status={widjetState || ''}>
 					<p className='verison'>v {widjetVersion}</p>
 				</BxMiniWidjetUiStyle.StatusLine>
 			</div>

src/components/BxMiniWidjetUi/style.js

@@ -11,7 +11,7 @@ const BxMiniWidjetUiStyle = styled.div`
 		box-sizing: border-box;
 	}
 
-	height: 70px;
+	height: 90px;
 	width: 80px;
 	border-radius: 13px;
 	background-color: #164e63e6;
@@ -48,20 +48,30 @@ const BxMiniWidjetUiStyle = styled.div`
 		grid-column: 1/3;
 		grid-row: 2/3;
 	}
-	.status {
-		border-radius: 10px;
-		padding: 0 3px;
-		margin: 0 5px;
-		font-size: 12px;
-		color: #ffffffab;
-	}
+`;
+
+BxMiniWidjetUiStyle.ReasonTest = styled.div`
+	border-radius: 10px;
+	padding: 0 1px;
+	margin: 0 5px;
+	font-size: 12px;
+
+	${({ reason }) =>
+		reason == 'free'
+			? {
+					color: '#ffffffab',
+			  }
+			: {
+					backgroundColor: 'orange',
+					color: '#000',
+			  }}
 `;
 BxMiniWidjetUiStyle.StatusLine = styled.div`
 	height: 100%;
 	background-color: ${({ backColor }) => backColor};
 	border-bottom-left-radius: 30px;
 	border-bottom-right-radius: 30px;
-	background-color: ${({ status }) =>
+	background-color: ${({ status = '' }) =>
 		status === 'pending'
 			? 'orange'
 			: status === 'connected'
@@ -78,6 +88,7 @@ BxMiniWidjetUiStyle.StatusLine = styled.div`
 		float: right;
 	}
 `;
+
 const DialPadIcon = styled(CallIcon)`
 	font-size: 26px;
 `;

src/components/DefaultWidjetUi/index.jsx

@@ -29,7 +29,9 @@ const DefaultWidjetUi = ({
 				<DialPadIcon />
 			</div>
 			<div className='bottom'>
-				<DefaultWidjetStyle.StatusLine status={widjetState}>
+				<DefaultWidjetStyle.StatusLine
+				status={widjetState}
+				>
 					<p className='verison'>v {widjetVersion}</p>
 				</DefaultWidjetStyle.StatusLine>
 			</div>

src/components/DefaultWidjetUi/style.js

@@ -53,7 +53,7 @@ const DefaultWidjetStyle = styled.div`
 		border-radius: 10px;
 		padding: 0 5px;
 		margin: 0 5px;
-		background-color: ${({ status }) =>
+		background-color: ${({ status = '' }) =>
 			status === 'pending'
 				? 'orange'
 				: status === 'connected'
@@ -68,7 +68,7 @@ DefaultWidjetStyle.StatusLine = styled.div`
 	background-color: ${({ backColor }) => backColor};
 	border-bottom-left-radius: 30px;
 	border-bottom-right-radius: 30px;
-	background-color: ${({ status }) =>
+	background-color: ${({ status = '' }) =>
 		status === 'pending'
 			? 'orange'
 			: status === 'connected'

src/components/ModalPhoneNumpad/index.jsx

@@ -111,7 +111,7 @@ const ModalPhoneNumpad = ({
 
 	const callButton = () => {
 		if (dynamicValue === 'connected') {
-			boxDialer.initialized(inputValue, data.number);
+			boxDialer.initialized(inputValue);
 		} else {
 			toast.error('Please wait', {
 				style: {
@@ -165,8 +165,7 @@ const ModalPhoneNumpad = ({
 
 						<NumberButton
 							onClick={() => callButton()}
-							// onClick={() => boxDialer.stopTimer()}
-							status={dynamicValue}
+							status={dynamicValue || ''}
 							type={'call_button'}>
 							<CallIcon />
 						</NumberButton>

src/components/ModalPhoneNumpad/style.js

@@ -86,7 +86,7 @@ const NumberButton = styled.div`
 	font-size: 22px;
 	cursor: pointer;
 	height: 33px;
-	background-color: ${({ status, type }) =>
+	background-color: ${({ status = '', type = '' }) =>
 		type === 'call_button'
 			? status === 'pending'
 				? 'orange'

src/components/WidjetButton/style.js

@@ -130,6 +130,7 @@ const NumberButton = styled.div`
 			? 'orange'
 			: status === 'connected' && '#a0c13d'};
 `;
+
 NumberButton.Icon = styled.div`
 	font-size: 20px;
 `;

src/root/index.jsx

@@ -9,6 +9,16 @@ import Modal from '../components/Modal';
 import BxMiniWidjetUi from '../components/BxMiniWidjetUi';
 
 const Root = ({ data, onSetDnd }) => {
+	let localValue = localStorage.getItem('activeValue') || false;
+
+	console.log(localValue, 'localValue');
+
+	// useEffect(() => {
+	// 	if (localValue && localValue > 0)
+	// 		localStorage.setItem('activeValue', +localValue + 1);
+	// 	else localStorage.setItem('activeValue', 1);
+	// }, []);
+
 	if (!data) {
 		data = {
 			iscloud: true,
@@ -16,9 +26,9 @@ const Root = ({ data, onSetDnd }) => {
 			wsurl: 'cld.alovoice.uz:61040',
 			server_id: 40,
 			secret: '26a830',
-			reason: 'free',
 			lefttime: 231461,
 			reasons: ['free', 'outcalls', 'home', 'totop'],
+			reason: 'free',
 			variant: 'bxmini',
 			position: 'bottomRight',
 		};
@@ -80,12 +90,7 @@ const Root = ({ data, onSetDnd }) => {
 		}
 	};
 
-	if (
-		!data ||
-		!data?.number
-		// || !data?.position
-	)
-		return;
+	if (!data || !data?.number || !data?.position) return;
 
 	return (
 		<>