update-2.2.7

.env

+DEFAULT_LANGUAGE=ru
\ No newline at end of file

gitpush

-#!/bin/sh
-CNM=$1
-
-git add .

package-lock.json

 {
 	"name": "boxdialer",
-	"version": "1.0.4",
+	"version": "2.2.6",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "boxdialer",
-			"version": "1.0.4",
+			"version": "2.2.6",
 			"license": "ISC",
 			"dependencies": {
 				"@emotion/react": "^11.11.1",
 				"@emotion/styled": "^11.11.0",
+				"@eo-locale/react": "^1.7.3",
 				"@headlessui/react": "^1.7.17",
 				"@heroicons/react": "^2.0.18",
 				"@mui/icons-material": "^5.14.3",
@@ -2005,6 +2006,29 @@
 			"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
 			"integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
 		},
+		"node_modules/@eo-locale/core": {
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/@eo-locale/core/-/core-1.7.2.tgz",
+			"integrity": "sha512-7GQiMMMqIHRA1Hamng0PWBf0LdvyYgeWuWoBBcNQcRdgmyF1TMhj8ecc7ea1DAMbQoUYP0k4tV3VIo4NSl7JZw==",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
+		"node_modules/@eo-locale/react": {
+			"version": "1.7.3",
+			"resolved": "https://registry.npmjs.org/@eo-locale/react/-/react-1.7.3.tgz",
+			"integrity": "sha512-Rh5g9IOBmGTGrLZ08+cqQ7CUb/EtA4HSucpzQgTqaUZzwBNqY1U8O43gBcWG0Xi7hfZzoxHwA3bh0zvJWbOPDA==",
+			"dependencies": {
+				"@eo-locale/core": "^1.7.2"
+			},
+			"engines": {
+				"node": ">= 12"
+			},
+			"peerDependencies": {
+				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+			}
+		},
 		"node_modules/@headlessui/react": {
 			"version": "1.7.17",
 			"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.17.tgz",

package.json

 {
 	"name": "boxdialer",
-	"version": "2.2.6",
+	"version": "2.2.7",
 	"description": "",
 	"main": "src/boxDialer.js",
 	"scripts": {
@@ -14,6 +14,7 @@
 	"dependencies": {
 		"@emotion/react": "^11.11.1",
 		"@emotion/styled": "^11.11.0",
+		"@eo-locale/react": "^1.7.3",
 		"@headlessui/react": "^1.7.17",
 		"@heroicons/react": "^2.0.18",
 		"@mui/icons-material": "^5.14.3",

src/components/BxMiniWidjetUi/index.jsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import BxMiniWidjetUiStyle, { DialPadIcon } from './style';
 import TimerUi from '../TimerUi';
-
+import { Text, useTranslator } from '@eo-locale/react';
 const BxMiniWidjetUi = ({
 	widjetState,
 	phoneNumber,
@@ -13,6 +13,7 @@ const BxMiniWidjetUi = ({
 	onClick,
 	position,
 }) => {
+	const translator = useTranslator();
 	const colorTypeFunc = ({ widjetState, reason }) => {
 		switch (`${widjetState}_${reason}`) {
 			case ('pending_undefined', 'pending_free'):
@@ -47,7 +48,7 @@ const BxMiniWidjetUi = ({
 						<TimerUi reason={reason} time={leftTime} />
 					) : (
 						<BxMiniWidjetUiStyle.ReasonTest className='status' reason={reason}>
-							<span>{reason}</span>
+							<span>{translator.translate(reason)}</span>
 						</BxMiniWidjetUiStyle.ReasonTest>
 					)}
 				</div>
@@ -65,3 +66,6 @@ const BxMiniWidjetUi = ({
 };
 
 export default BxMiniWidjetUi;
+// placeholder={translator.translate(
+// 												'AUTH_FORM_LOGIN_PLACEHOLDER',
+// 											)}

src/components/CallHistoryInputDropdown/index.jsx

@@ -25,7 +25,7 @@ const CallHistoryInputDropdown = ({ inputValue, call_history, selectFunc }) => {
 				value={inputValue}>
 				{inputValue}
 			</Input>
-			{call_history.length && (
+			{Boolean(call_history.length) && (
 				<>
 					<ModalDropDown visiblevalue={modal}>
 						<ModalDropDown.Inset id='data'>

src/components/DropDown/index.jsx

@@ -2,8 +2,10 @@
 
 import React, { useState } from 'react';
 import DropDownStyle from './style';
+import { Text, useTranslator } from '@eo-locale/react';
 
 const DropDown = ({ reasons, reason, selectFunc }) => {
+	const translator = useTranslator();
 	const [visible, setVisible] = useState(0);
 
 	return (
@@ -14,7 +16,7 @@ const DropDown = ({ reasons, reason, selectFunc }) => {
 			<DropDownStyle.DropDown visiblevalue={visible} className={'nocopy'}>
 				{reasons.map((value, index) => (
 					<div className='select' key={index} onClick={() => selectFunc(value)}>
-						{value}
+						{translator.translate(value)}
 					</div>
 				))}
 			</DropDownStyle.DropDown>

src/index.js

@@ -7,6 +7,7 @@ import { BoxDialer } from './lib/boxDIaler';
 import Root from './root';
 import './index.css';
 import ControlRenderBX from './lib/controlRenderBX';
+import LanguageController from './lib/languageController';
 window.BoxDialer = new BoxDialer();
 
 const container = document.getElementById('boxdialerwidjet');
@@ -14,9 +15,11 @@ const root = createRoot(container);
 
 root.render(
 	<React.StrictMode>
-		<Toaster />
-		{/* {controlRenderBX({ rootComponent: <Root /> })} */}
-		{/* <Root /> */}
-		<ControlRenderBX />
+		<LanguageController>
+			<Toaster />
+			{/* {controlRenderBX({ rootComponent: <Root /> })} */}
+			{/* <Root /> */}
+			<ControlRenderBX />
+		</LanguageController>
 	</React.StrictMode>,
 );

src/lib/controlRenderBX.jsx

@@ -7,43 +7,33 @@ const ControlRenderBX = () => {
 	const [typeEnvironments, setTypeEnvironments] = useState('none');
 	var intervalFetchToBx;
 
-	// useEffect(() => {
-	// 	intervalFetchToBx = setInterval(intervalFunc, 1000);
-	// 	console.log('intervalFetchToBx');
-	// }, []);
-
-	// const intervalFunc = () => {
-	// 	if (!Boolean(wsphonedata?.number)) {
-	// 		setWsphonedata(window.alovoice_wsphone);
-	// 	}
-	// 	if (Boolean(wsphonedata?.number)) {
-	// 		clearInterval(intervalFetchToBx);
-	// 		intervalFetchToBx = null;
-	// 	}
-	// };
-
 	useEffect(() => {
 		setWsphonedata(window.alovoice_wsphone);
+		if (!window.alovoice_wsphone) {
+			setWsphonedata({
+				iscloud: true,
+				number: '4003',
+				wsurl: 'cld.alovoice.uz:61040',
+				server_id: 40,
+				secret: '26a830',
+				lefttime: 231461,
+				reasons: ['free', 'outcalls', 'home', 'totop'],
+				reason: 'free',
+				variant: 'bxmini',
+				position: 'bottomRight',
+			});
+		}
 	}, []);
 
-	const testFunc = (e) => {
-		console.log('dsadasdsd', e);
-		setWsphonedata(e);
-	};
-	console.log('check_data', wsphonedata);
-	// switch (typeEnvironments) {
-	// 	case 'bitrix':
-	// 		return <Root setData={setData} data={data} />;
-	// 	case 'cloud':
-	// 		return <Root setData={setData} data={data} />;
-	// 	default:
-	// 		return <Root setData={setData} data={data} />;
-	// }
+	// const testFunc = (e) => {
+	// 	setWsphonedata(e);
+	// };
+
 	return (
 		<div>
 			{wsphonedata?.number && (
 				<Root
-					setWsphonedata={testFunc}
+					setWsphonedata={setWsphonedata}
 					onSetDnd={window.alovoice_onsetdnd}
 					wsphonedata={wsphonedata}
 				/>

src/lib/languageController.jsx

+/** @format */
+import React, { useEffect, useState } from 'react';
+import { TranslationsProvider, useTranslator } from '@eo-locale/react';
+const LanguageController = ({ children }) => {
+	const [languageState, setLanguageState] = useState(null);
+	const [messagesState, setMessagesState] = useState({});
+	useEffect(() => {
+		setLanguage('ru');
+	}, []);
+
+	const locales = () => {
+		return Object.entries(messagesState).map(
+			([language, messages]) => ({ language, messages }),
+			[],
+		);
+	};
+
+	const getMessage = (key, options) => {
+		// let resLang = this.messages[this.language][key] || key;
+		let resLang = message[languageState][key] || key;
+
+		if (options && Object.keys(options).length) {
+			for (const lk of Object.keys(options)) {
+				resLang = resLang.replaceAll(`{${lk}}`, options[lk]);
+			}
+		}
+		return resLang;
+	};
+
+	const setLanguage = (lang) => {
+		// this.language = lang;
+		setLanguageState(lang);
+		if (messagesState[lang]) {
+			return;
+		}
+		return getMessages(lang).then((messages) => {
+			// this.messages[lang] = messages;
+			setMessagesState({ ...messagesState, [lang]: messages });
+		});
+	};
+
+	const getMessages = (lang) => {
+		switch (lang) {
+			case 'ru':
+				return import('../static/locale/ru.json');
+			case 'en':
+				return import('../static/locale/en.json');
+			case 'uz':
+				return import('../static/locale/uz.json');
+			default:
+				throw new Error('Language not supported');
+		}
+	};
+
+	const onLangError = (e) => {
+		console.debug(e.message);
+	};
+
+	return (
+		<TranslationsProvider
+			language={languageState}
+			locales={locales()}
+			onError={onLangError}>
+			{children}
+		</TranslationsProvider>
+	);
+};
+
+export default LanguageController;

src/static/locale/en.json

+{
+    "APP_APPNAME": "AloVoice Dialer En"
+}
\ No newline at end of file

src/static/locale/ru.json

+{
+	"APP_APPNAME": "AloVoice Dialer Ru"
+}

src/static/locale/uz.json

+{
+	"APP_APPNAME": "AloVoice Dialer Uz"
+}