Skip to content

B
BoxDialer
Commit 8f82117d authored by Muhammadali's avatar Muhammadali
Browse files
Options

update verison: 0.8.3

parent 360f0efa
Hide whitespace changes
Inline Side-by-side
Showing with 495 additions and 254 deletions
package.json
View file @ 8f82117d
{
"name": "boxdialer",
"version": "0.8.2",
"version": "0.8.3",
"description": "",
"main": "src/boxDialer.js",
"scripts": {
......
src/components/BxMiniWidjetUi/index.jsx 0 → 100644
View file @ 8f82117d
/** @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 0 → 100644
View file @ 8f82117d
/** @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
View file @ 8f82117d
......@@ -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
View file @ 8f82117d
......@@ -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
View file @ 8f82117d
/** @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,
modalState,
reasons,
reason,
onSetDnd,
dynamicValue
phoneModal,
modalState,
reasons,
reason,
onSetDnd,
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});
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>
);
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
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' })}
/>
) : (
''
)}
</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;
src/components/ModalPhoneNumpad/style.js
View file @ 8f82117d
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;
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;
width: 230px;
position: fixed;
bottom: 120px;
transition: 0.2s;
z-index: 999;
${({ hidden, position }) =>
hidden
? boxDialerWidjetPosition[position].numpad.hidden
: boxDialerWidjetPosition[position].numpad.seen}
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;
position: relative;
`;
ModalPhoneNumpadStyle.ButtonArea = styled.div`
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 8px;
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;
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;
}
: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;
position: relative;
display: inline-block;
margin: 0;
outline: none;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
/* Firefox */
&[type='number'] {
-moz-appearance: textfield;
}
&[type='number'] {
-moz-appearance: textfield;
}
`;
Input.BackSpaceIcon = styled(KeyboardBackspaceIcon)`
color: black;
position: absolute;
right: 5px;
cursor: pointer;
top: 50%;
transform: translate(0, -50%);
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'};
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;
font-size: 20px;
`;
export {NumberButton, Input}
export default ModalPhoneNumpadStyle
export { NumberButton, Input };
export default ModalPhoneNumpadStyle;
src/lib/boxDialerWidjetPosition.js 0 → 100644
View file @ 8f82117d
/** @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
View file @ 8f82117d
......@@ -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 (
<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 (
<>
<DefaultWidjet
widjetState={dynamicValue}
phoneNumber={data?.number}
reason={data?.reason}
widjetVersion={packageJson?.version}
leftTime={data.lefttime}
onClick={() => {
phoneModal ? setPhoneModal(false) : setPhoneModal(true);
}}
/>
{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}
......
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

Technounit-GROUP 2023