update version: 0.8.1 change to new code module

parent 49112174
{ {
"name": "boxdialer", "name": "boxdialer",
"version": "1.0.0", "version": "0.8.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "boxdialer", "name": "boxdialer",
"version": "1.0.0", "version": "0.8.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.1", "@emotion/react": "^11.11.1",
......
{ {
"name": "boxdialer", "name": "boxdialer",
"version": "0.8.0", "version": "0.8.1",
"description": "", "description": "",
"main": "src/boxDialer.js", "main": "src/boxDialer.js",
"scripts": { "scripts": {
......
/** @format */ /** @format */
import WidjetButton from './components/WidjetButton';
import { BoxDialer } from './lib/boxDIaler'; import { BoxDialer } from './lib/boxDIaler';
import Root from './root';
window.BoxDialer = new BoxDialer(); window.BoxDialer = new BoxDialer();
export default WidjetButton; export default Root;
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Block from './style'; import Block from './style';
import { data as mockData } from '../WidjetButton/mockTest'; import { data as mockData } from '../ModalPhoneNumpad/mockTest';
const CallCardDropDown = ({ hiddenState, selectUserFunc }) => { const CallCardDropDown = ({ hiddenState, selectUserFunc }) => {
const [inputValue, setinputValue] = useState(''); const [inputValue, setinputValue] = useState('');
......
/** @format */
import React from 'react';
import DefaultWidjetStyle, {DialPadIcon} from './style';
import TimerUi from '../TimerUi';
const DefaultWidjet = ({
widjetState,
phoneNumber,
reason,
widjetVersion,
leftTime,
onClick
}) => {
return (
<DefaultWidjetStyle status={widjetState} onClick={onClick}>
<div className='left'>
<p className='title'>{phoneNumber}</p>
<p>
<span className='status'>{widjetState}</span>
<TimerUi reason={reason} time={leftTime}/>
</p>
</div>
<div className='right'>
<DialPadIcon/>
</div>
<div className='bottom'>
<DefaultWidjetStyle.StatusLine status={widjetState}>
<p className='verison'>v {widjetVersion}</p>
</DefaultWidjetStyle.StatusLine>
</div>
</DefaultWidjetStyle>
);
};
export default DefaultWidjet;
/** @format */
import styled from 'styled-components';
import CallIcon from '@mui/icons-material/Dialpad';
const DefaultWidjetStyle = styled.div`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
height: 70px;
min-width: 180px;
max-width: 200px;
border-radius: 13px;
background-color: #164e63e6;
cursor: pointer;
color: white;
z-index: 999;
position: fixed;
bottom: 30px;
left: 50px;
display: grid;
align-items: center;
grid-template-columns: 1fr 30px;
grid-template-rows: 1fr 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.left {
display: flex;
flex-direction: column;
align-items: center;
}
.right {
}
.title {
font-size: 22px;
font-weight: 600;
}
.bottom {
height: 100%;
grid-column: 1/3;
grid-row: 2/3;
}
.status {
border-radius: 10px;
padding: 0 5px;
margin: 0 5px;
background-color: ${({ status }) =>
status === 'pending'
? 'orange'
: status === 'connected'
? '#a0c13d'
: '#ccc'};
color: ${({ status }) =>
status === 'pending' ? '#fff' : status === 'connected' ? '#333' : '#ccc'};
}
`;
DefaultWidjetStyle.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 DefaultWidjetStyle;
/** @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"
const ModalPhoneNumpad = ({
phoneModal,
modalState,
reasons,
reason,
onSetDnd,
dynamicValue
}) => {
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});
if (modalState.callType === 'outcoming' && modalState.bool) {
boxDialer.sipSendDTMF(value);
}
switch (type) {
case 'add':
if (value.match(/^[a-zA-Z0-9!@#\$%\^\&*\)\(+=._-]+$/g).join('').length) {
if (from === 'input') return setInputValue(value);
if (from === 'button') setInputValue(inputValue + value);
}
break;
case 'delete':
if (from === 'button') {
setInputValue(inputValue
.split('')
.slice(0, inputValue.length - 1)
.join(''),);
}
if (from === 'input') {
setInputValue(value);
}
break;
default:
break;
}
};
document.onkeydown = function (e) {
if (phoneModal && modalState.bool ? false : true) {
e = e || window.event;
if (e.ctrlKey && e.keyCode === 86) {
navigator.clipboard
.readText()
.then((text) => {
inputController({type: 'add', value: text, from: 'button'});
})
.catch((err) => {
console.log('Something went wrong', err);
});
}
return true;
}
};
const gameState = {
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'});
}
},
};
const handleKeyUp = useCallback((event) => {
console.log(event);
gameState.toggleCP(event);
}, [gameState.toggleCP],);
useEffect(() => {
document.addEventListener('keyup', handleKeyUp);
return () => {
document.removeEventListener('keyup', handleKeyUp);
};
}, [handleKeyUp]);
const callButton = () => {
if (dynamicValue === 'connected') {
boxDialer.initialized(inputValue, data.number);
} else {
toast.error('Please wait', {
style: {
zIndex: '99999999999999999',
},
});
}
};
return (
<ModalPhoneNumpadStyle
hidden={!phoneModal}
onClick={(e) => e.stopPropagation()}>
<ModalPhoneNumpadStyle.InputArea>
<Input disabled type='text' value={inputValue} />
{inputValue.length ? (
<Input.BackSpaceIcon
onClick={() =>
inputController({ type: 'delete', from: 'button' })
}
/>
) : (
''
)}
</ModalPhoneNumpadStyle.InputArea>
<ModalPhoneNumpadStyle.ButtonArea>
{numbers?.map((mapItem) => (
<NumberButton
key={mapItem.id}
onClick={() => {
mapItem.type === 'number' &&
inputController({
value: mapItem.value,
type: 'add',
from: 'button',
});
}}>
{mapItem.nameNumber}
<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
</NumberButton>
))}
{!modalState.bool ? (
<>
<NumberButton style={{ gridColumn: '1/3' }}>
<DropDownTailwind
selectFunc={onSetDnd}
reasons={reasons}
reason={reason}
/>
</NumberButton>
<NumberButton
onClick={() => callButton()}
// onClick={() => boxDialer.stopTimer()}
status={dynamicValue}
type={'call_button'}>
<CallIcon />
</NumberButton>
</>
) : (
<>
<div style={{ height: '33px' }}></div>
<div style={{ height: '33px' }}></div>
</>
)}
</ModalPhoneNumpadStyle.ButtonArea>
</ModalPhoneNumpadStyle>
);
};
export default ModalPhoneNumpad;
import styled from 'styled-components'
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace"
const ModalPhoneNumpadStyle = styled.div`
width: 230px;
position: fixed;
bottom: 120px;
transition: 0.2s;
z-index: 999;
transform: translate(${({hidden}) => (hidden ? '-300px' : '325px')}, 0%);
left: -300px;
background-color: #c9d5d9;
border-radius: 20px;
padding: 15px;
display: grid;
grid-template-rows: 40px 1fr;
grid-gap: 15px;
cursor: default;
`;
ModalPhoneNumpadStyle.InputArea = styled.div`
position: relative;
`;
ModalPhoneNumpadStyle.ButtonArea = styled.div`
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 8px;
`;
const Input = styled.input`
width: 100%;
height: 100%;
border-radius: 3px;
background-color: #fff;
border: 0;
padding: 0 35px 0 10px;
font-size: 22px;
color: #000;
:focus {
border-color: inherit;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0 10px;
font-size: 24px;
outline: 0 none;
}
position: relative;
display: inline-block;
margin: 0;
outline: none;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
&[type='number'] {
-moz-appearance: textfield;
}
`;
Input.BackSpaceIcon = styled(KeyboardBackspaceIcon)`
color: black;
position: absolute;
right: 5px;
cursor: pointer;
top: 50%;
transform: translate(0, -50%);
`;
const NumberButton = styled.div`
color: #fff;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 7px;
font-size: 22px;
cursor: pointer;
height: 33px;
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
...@@ -5,10 +5,10 @@ import WidjetBlock, { ...@@ -5,10 +5,10 @@ import WidjetBlock, {
DialPadIcon, DialPadIcon,
Input, Input,
ModalPhoneDropDowm, ModalPhoneDropDowm,
NumberButton NumberButton,
} from './style'; } from './style';
import numbers from './numbers'; import numbers from '../ModalPhoneNumpad/numbers';
import Modal from '../Modal'; import Modal from '../Modal';
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
...@@ -17,161 +17,22 @@ import { toast } from 'react-hot-toast'; ...@@ -17,161 +17,22 @@ import { toast } from 'react-hot-toast';
import DropDownTailwind from '../TailwindComponents/DropDown'; import DropDownTailwind from '../TailwindComponents/DropDown';
import TimerUi from '../TimerUi'; import TimerUi from '../TimerUi';
const WidjetButton = ({ data, onSetDnd, position }) => { const WidjetButton = ({ version, timer, widjetState }) => {
if (!data) { // dynamicValue;
data = { // data?.number
iscloud: true, // data.lefttime;
number: '4003', // data?.reason;
wsurl: 'cld.alovoice.uz:61040', // packageJson?.version;
server_id: 40,
secret: '26a830',
reason: 'free',
lefttime: 231461,
reasons: ['free', 'outcalls', 'home', 'totop'],
};
}
if (window?.alovoice_wsphone) {
// data = window.alovoice_wsphone; // если window.alovoice_wsphone то кроме numpad не какой UI не должен работать
data = window.alovoice_wsphone;
onSetDnd = window.alovoice_onsetdnd;
// console.log(
// window.BX.rest.callMethod('user.get', {}, (rr) => {
// console.log(rr.answer.result);
// }),
// );
}
const [phoneModal, setPhoneModal] = useState(false);
const [inputValue, setInputValue] = useState('');
const [dynamicValue, setDynamicValue] = useState('pending');
const [modalState, setModalState] = useState(false);
const boxDialer = window.BoxDialer;
useEffect(() => {
if (data && data?.number) {
boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
boxDialer.sipRegister(data);
}
}, []);
useEffect(() => {
if (!modalState.bool) setInputValue('');
}, [modalState.bool]);
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 (from === 'input') return setInputValue(value);
if (from === 'button') setInputValue(inputValue + value);
}
break;
case 'delete':
if (from === 'button') {
setInputValue(
inputValue
.split('')
.slice(0, inputValue.length - 1)
.join(''),
);
}
if (from === 'input') {
setInputValue(value);
}
break;
default:
break;
}
};
document.onkeydown = function (e) {
if (phoneModal && modalState.bool ? false : true) {
e = e || window.event;
if (e.ctrlKey && e.keyCode === 86) {
navigator.clipboard
.readText()
.then((text) => {
inputController({ type: 'add', value: text, from: 'button' });
})
.catch((err) => {
console.log('Something went wrong', err);
});
}
return true;
}
};
const gameState = {
toggleCP: (e) => {
if (phoneModal && (modalState.bool ? false : true) && e.key === 'Enter') {
boxDialer.initialized(inputValue, data.number);
} 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) => {
console.log(event);
gameState.toggleCP(event);
},
[gameState.toggleCP],
);
useEffect(() => {
document.addEventListener('keyup', handleKeyUp);
return () => {
document.removeEventListener('keyup', handleKeyUp);
};
}, [handleKeyUp]);
const hangupButton = () => {
boxDialer.hangupButtonClick();
};
const callButton = () => {
if (dynamicValue === 'connected') {
boxDialer.initialized(inputValue, data.number);
} else {
toast.error('Please wait', {
style: {
zIndex: '99999999999999999',
},
});
}
};
if (!data || !data?.number) return;
return ( return (
<> <>
<WidjetBlock <WidjetBlock
className='tailwindGlobalCss' className='tailwindGlobalCss'
id={'responsible-button'} id={'responsible-button'}
onClick={() => { // onClick={() => {
phoneModal ? setPhoneModal(false) : setPhoneModal(true); // phoneModal ? setPhoneModal(false) : setPhoneModal(true);
}}> // }}
<WidjetBlock.AccauntInfo status={dynamicValue}> >
{/* <WidjetBlock.AccauntInfo status={dynamicValue}>
<div className='left'> <div className='left'>
<p className='title'>{data?.number}</p> <p className='title'>{data?.number}</p>
<p> <p>
...@@ -187,7 +48,14 @@ const WidjetButton = ({ data, onSetDnd, position }) => { ...@@ -187,7 +48,14 @@ const WidjetButton = ({ data, onSetDnd, position }) => {
<p className='verison'>v {packageJson?.version}</p> <p className='verison'>v {packageJson?.version}</p>
</WidjetBlock.StatusLine> </WidjetBlock.StatusLine>
</div> </div>
</WidjetBlock.AccauntInfo> </WidjetBlock.AccauntInfo> */}
{/*
phoneModal
*/}
<ModalPhoneDropDowm <ModalPhoneDropDowm
hidden={!phoneModal} hidden={!phoneModal}
onClick={(e) => e.stopPropagation()}> onClick={(e) => e.stopPropagation()}>
...@@ -200,6 +68,7 @@ const WidjetButton = ({ data, onSetDnd, position }) => { ...@@ -200,6 +68,7 @@ const WidjetButton = ({ data, onSetDnd, position }) => {
} }
/> />
) : ( ) : (
'' ''
)} )}
</ModalPhoneDropDowm.InputArea> </ModalPhoneDropDowm.InputArea>
......
/** @format */ /** @format */
import React from 'react'; import React from 'react';
// import ReactDOM from 'react-dom';
import { render } from 'react-dom';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { Toaster } from 'react-hot-toast'; import { Toaster } from 'react-hot-toast';
import WidjetButton from './components/WidjetButton/index';
import { BoxDialer } from './lib/boxDIaler'; import { BoxDialer } from './lib/boxDIaler';
import Root from './root';
window.BoxDialer = new BoxDialer(); window.BoxDialer = new BoxDialer();
...@@ -16,6 +14,6 @@ const root = createRoot(container); ...@@ -16,6 +14,6 @@ const root = createRoot(container);
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<Toaster /> <Toaster />
<WidjetButton /> <Root />
</React.StrictMode>, </React.StrictMode>,
); );
...@@ -232,7 +232,7 @@ export class BoxDialer { ...@@ -232,7 +232,7 @@ export class BoxDialer {
case 'i_new_call': case 'i_new_call':
uiState = 'incoming'; uiState = 'incoming';
break; break;
case 'connected': case 'call_connected':
uiState = 'connected'; uiState = 'connected';
break; break;
default: default:
...@@ -300,7 +300,7 @@ export class BoxDialer { ...@@ -300,7 +300,7 @@ export class BoxDialer {
case 'call_connected': case 'call_connected':
// QORA EKRANDA ULANYAPTI.. SOZINI VAHTGA OZGARTIRISH KERE ( SEKKUNDAMER ) // QORA EKRANDA ULANYAPTI.. SOZINI VAHTGA OZGARTIRISH KERE ( SEKKUNDAMER )
this.setGuiPhoneState({ stateCode: 'connected' }); this.setGuiPhoneState({ stateCode: this.sipState });
break; break;
case 'hangup_terminating': case 'hangup_terminating':
...@@ -413,12 +413,11 @@ export class BoxDialer { ...@@ -413,12 +413,11 @@ export class BoxDialer {
console.log('sipTransfer'); console.log('sipTransfer');
} }
initialized(phoneNumber, phone) { initialized(phoneNumber) {
// if (phoneNumber == phone) { // if (phoneNumber == phone) {
// toast.error('Please enter another number'); // toast.error('Please enter another number');
// return; // return;
// } // }
console.log('initialized argument', phoneNumber);
this.callBxMethods({ this.callBxMethods({
bxMethodName: 'CallCardSetUiState', bxMethodName: 'CallCardSetUiState',
bxFuncParams: { uiState: 'connectingOutgoing' }, bxFuncParams: { uiState: 'connectingOutgoing' },
...@@ -442,20 +441,25 @@ export class BoxDialer { ...@@ -442,20 +441,25 @@ export class BoxDialer {
}); });
} }
} }
skipButtonClick() { skipButtonClick() {
this.onSoundType({ type: 'ring', bool: false }); this.onSoundType({ type: 'ring', bool: false });
this.hangupButtonClick(); this.hangupButtonClick();
} }
answerButtonClick() { answerButtonClick() {
this.onSipStateChange.modalState({ this.oSipSessionCall.accept(this.oConfigCall);
this.onSoundType({ type: 'ring', bool: false });
this.setGuiPhoneState({
funcName: 'modalState',
funcParam: {
bool: true, bool: true,
callType: 'answered', callType: 'answered',
callAnswerType: 'oncoming', callAnswerType: 'oncoming',
},
}); });
this.oSipSessionCall.accept(this.oConfigCall);
this.onSoundType({ type: 'ring', bool: false });
} }
sipSendDTMF(c) { sipSendDTMF(c) {
if (this.oSipSessionCall && c) { if (this.oSipSessionCall && c) {
this.oSipSessionCall.dtmf(c); this.oSipSessionCall.dtmf(c);
......
/** @format */
import WidjetButton from '../components/WidjetButton';
import React, {useCallback, useEffect, useState} from 'react';
import packageJson from '../../package.json';
import CallIcon from '@mui/icons-material/Call';
import {toast} from 'react-hot-toast';
// import DropDownTailwind from '../components/TailwindComponents/DropDown';
// import Modal from '../components/Modal';
// import numbers from '../components/WidjetButton/numbers';
// import TimerUi from '../components/TimerUi';
import DefaultWidjet from '../components/DefaultWidjetUi';
import ModalPhoneNumpad from "../components/ModalPhoneNumpad"
import Modal from "../components/Modal"
const Root = ({data, onSetDnd, position}) => {
if (!data) {
data = {
iscloud: true,
number: '4003',
wsurl: 'cld.alovoice.uz:61040',
server_id: 40,
secret: '26a830',
reason: 'free',
lefttime: 231461,
reasons: ['free', 'outcalls', 'home', 'totop'],
variant: 'bxmini',
};
}
if (window?.alovoice_wsphone) {
data = window.alovoice_wsphone;
onSetDnd = window.alovoice_onsetdnd;
}
const [phoneModal, setPhoneModal] = useState(false);
const [dynamicValue, setDynamicValue] = useState('pending');
const [modalState, setModalState] = useState(false);
const boxDialer = window.BoxDialer;
useEffect(() => {
if (data && data?.number) {
boxDialer.setSipStateChangeCallback(setDynamicValue, 'dynamicValue');
boxDialer.setSipStateChangeCallback(setModalState, 'modalState');
boxDialer.sipRegister(data);
}
}, []);
const hangupButton = () => {
boxDialer.hangupButtonClick();
};
console.log(phoneModal, 'phoneModal')
if (!data || !data?.number) return;
return (
<>
<DefaultWidjet
widjetState={dynamicValue}
phoneNumber={data?.number}
reason={data?.reason}
widjetVersion={packageJson?.version}
leftTime={data.lefttime}
onClick={() => {
phoneModal ? setPhoneModal(false) : setPhoneModal(true);
}}
/>
<ModalPhoneNumpad
modalState={modalState}
phoneModal={phoneModal}
reasons={data?.reasons}
reason={data?.reason}
onClick={(e) => e.stopPropagation()}
dynamicValue={dynamicValue}
onSetDnd={onSetDnd}
/>
<Modal
className='tailwindGlobalCss'
callAnswerType={modalState.callType}
hidden={
modalState.bool
// true
}
callType={
modalState.callType
// 'outcoming'
}
hangupButton={hangupButton}
phoneNumber={
modalState.callType === 'outcoming'
? 'inputValue'
: modalState.callFromName
}
/>
</>
);
};
export default Root;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment