index.jsx 8.48 KB
Newer Older
1 2
/** @format */

Muhammadali's avatar
Muhammadali committed
3 4
import React, { useCallback, useEffect, useState } from 'react';
import ModalPhoneNumpadStyle, { NumberButton, Input } from './style';
Muhammadali's avatar
Muhammadali committed
5
import numbers from '../../lib/numbers';
Muhammadali's avatar
Muhammadali committed
6 7
import CallIcon from '@mui/icons-material/Call';
import { toast } from 'react-hot-toast';
Muhammadali's avatar
Muhammadali committed
8
import DropDown from '../DropDown';
Muhammadali's avatar
Muhammadali committed
9
import { CommentsDisabledOutlined } from '@mui/icons-material';
Muhammadali's avatar
Muhammadali committed
10
import CallHistoryInputDropdown from '../CallHistoryInputDropdown';
Muhammadali's avatar
Muhammadali committed
11
import KeyboardControlKeyIcon from '@mui/icons-material/KeyboardControlKey';
Muhammadali's avatar
Muhammadali committed
12
import { Text, useTranslator } from '@eo-locale/react';
13
const ModalPhoneNumpad = ({
Muhammadali's avatar
Muhammadali committed
14 15 16 17 18 19 20
	phoneModal,
	modalState,
	reasons,
	reason,
	onSetDnd,
	dynamicValue,
	position,
Muhammadali's avatar
Muhammadali committed
21
	variant,
Muhammadali's avatar
Muhammadali committed
22
	extnums,
23
}) => {
Muhammadali's avatar
Muhammadali committed
24 25 26
	const boxDialer = window.BoxDialer;

	const [inputValue, setInputValue] = useState('');
Muhammadali's avatar
Muhammadali committed
27
	const [call_history, setCall_history] = useState([]);
Muhammadali's avatar
Muhammadali committed
28
	const [numberSelectHistory, setNumberSelectHistory] = useState(0);
Muhammadali's avatar
Muhammadali committed
29
	const [exNum, setExNum] = useState();
Muhammadali's avatar
Muhammadali committed
30
	const translator = useTranslator();
Muhammadali's avatar
Muhammadali committed
31
	useEffect(() => {
Muhammadali's avatar
Muhammadali committed
32 33 34
		let currentCalls = localStorage.getItem('callhistory')
			? JSON.parse(localStorage.getItem('callhistory'))
			: false;
Muhammadali's avatar
Muhammadali committed
35 36 37
		if (currentCalls) {
			setCall_history(currentCalls);
		}
Muhammadali's avatar
Muhammadali committed
38 39
	}, [localStorage.getItem('callhistory'), inputValue]);

Muhammadali's avatar
Muhammadali committed
40 41 42 43 44
	useEffect(() => {
		if (!modalState.bool) setInputValue('');
	}, [modalState.bool]);

	const inputController = ({ value, type, from }) => {
Muhammadali's avatar
Muhammadali committed
45
		boxDialer.onSoundType({ type: 'pick', bool: true });
Muhammadali's avatar
Muhammadali committed
46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
		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;
		}
	};

Muhammadali's avatar
Muhammadali committed
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
	const history = ({ type }) => {
		if (phoneModal && (modalState.bool ? false : true)) {
			if (
				(type === 'up' && numberSelectHistory < call_history.length) ||
				numberSelectHistory === 'zero'
			) {
				setNumberSelectHistory(
					numberSelectHistory !== 'zero' ? numberSelectHistory + 1 : 0 + 1,
				);
			}
			if (type === 'down' && numberSelectHistory > 0) {
				setNumberSelectHistory(
					numberSelectHistory !== 'zero' ? numberSelectHistory - 1 : 0 - 1,
				);
			}
		}
	};

	useEffect(() => {
		if (phoneModal && (modalState.bool ? false : true)) {
			let selectedNumber;
			if (numberSelectHistory == 0) {
				setInputValue('');
			}
			selectedNumber = call_history.slice(numberSelectHistory * -1)[0]
				? call_history.slice(numberSelectHistory * -1)[0]
				: false;
Muhammadali's avatar
Muhammadali committed
101

Muhammadali's avatar
Muhammadali committed
102 103 104 105 106 107 108 109 110
			if (numberSelectHistory === 0) {
				selectedNumber = '';
				setNumberSelectHistory('zero');
			}
			if (numberSelectHistory === 'zero') {
				selectedNumber = '';
				setNumberSelectHistory('zero');
			}
			if (selectedNumber) {
Muhammadali's avatar
Muhammadali committed
111
				setInputValue(selectedNumber.value);
Muhammadali's avatar
Muhammadali committed
112 113 114 115
			}
		}
	}, [numberSelectHistory]);

Muhammadali's avatar
Muhammadali committed
116 117 118
	document.onkeydown = function (e) {
		if (phoneModal && modalState.bool ? false : true) {
			e = e || window.event;
Muhammadali's avatar
Muhammadali committed
119 120
			let actualKeyCode = e.keyCode;
			if (e.ctrlKey && actualKeyCode === 86) {
Muhammadali's avatar
Muhammadali committed
121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
				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') {
Muhammadali's avatar
Muhammadali committed
136
				callButton();
Muhammadali's avatar
Muhammadali committed
137 138 139 140 141 142 143 144 145 146 147 148
			} 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' });
Muhammadali's avatar
Muhammadali committed
149 150 151 152 153
			} else if (
				phoneModal &&
				(modalState.bool ? false : true) &&
				e.key === 'Backspace'
			) {
Muhammadali's avatar
Muhammadali committed
154 155 156 157 158
			} else if (
				(phoneModal && (modalState.bool ? false : true) && e.keyCode == 38) ||
				e.keyCode == 40
			)
				history({ type: e.keyCode === 38 ? 'up' : 'down' });
Muhammadali's avatar
Muhammadali committed
159 160
		},
	};
Muhammadali's avatar
Muhammadali committed
161

Muhammadali's avatar
Muhammadali committed
162 163 164 165 166 167
	const handleKeyUp = useCallback(
		(event) => {
			gameState.toggleCP(event);
		},
		[gameState.toggleCP],
	);
Muhammadali's avatar
Muhammadali committed
168

Muhammadali's avatar
Muhammadali committed
169 170
	useEffect(() => {
		document.addEventListener('keyup', handleKeyUp);
Muhammadali's avatar
Muhammadali committed
171

Muhammadali's avatar
Muhammadali committed
172 173 174 175
		return () => {
			document.removeEventListener('keyup', handleKeyUp);
		};
	}, [handleKeyUp]);
Muhammadali's avatar
Muhammadali committed
176
	// `${Data.getHours()}:${Data.getMinutes()} ${Data.getDate()}.${Data.getMonth()+1}.${Data.getFullYear()}`
Muhammadali's avatar
Muhammadali committed
177
	const callButton = () => {
Muhammadali's avatar
Muhammadali committed
178 179 180
		// inset if ----------

		// -------------------
Muhammadali's avatar
Muhammadali committed
181
		var currentTime = new Date();
Muhammadali's avatar
Muhammadali committed
182
		if (dynamicValue === 'connected') {
Muhammadali's avatar
Muhammadali committed
183 184
			if (
				Boolean(inputValue.toString().length) &&
Muhammadali's avatar
Muhammadali committed
185
				call_history.slice(-1)[0]?.value != inputValue
Muhammadali's avatar
Muhammadali committed
186
			) {
Muhammadali's avatar
Muhammadali committed
187 188 189 190
				let newCallsStringify = JSON.stringify([
					...call_history,
					{
						value: inputValue,
Muhammadali's avatar
Muhammadali committed
191
						time: `${currentTime.getHours()}:${currentTime.getMinutes()} ${currentTime.getDate()}.${currentTime.getMonth()}.${currentTime.getFullYear()}`,
Muhammadali's avatar
Muhammadali committed
192 193
					},
				]);
Muhammadali's avatar
Muhammadali committed
194 195
				localStorage.setItem('callhistory', newCallsStringify);
			}
Muhammadali's avatar
Muhammadali committed
196
			boxDialer.initialized(inputValue);
Muhammadali's avatar
Muhammadali committed
197
			setInputValue('');
Muhammadali's avatar
Muhammadali committed
198 199 200 201 202 203 204 205
		} else {
			toast.error('Please wait', {
				style: {
					zIndex: '99999999999999999',
				},
			});
		}
	};
Muhammadali's avatar
Muhammadali committed
206 207 208
	const selectFunc = (e) => {
		setInputValue(e);
	};
Muhammadali's avatar
Muhammadali committed
209 210 211
	const setDefaultHistoryNumberHistory = () => {
		setNumberSelectHistory('zero');
	};
Muhammadali's avatar
Muhammadali committed
212

Muhammadali's avatar
Muhammadali committed
213 214
	document.querySelector('body').addEventListener('click', function (e) {
		if (exNum) setExNum(false);
Muhammadali's avatar
Muhammadali committed
215
	});
Muhammadali's avatar
Muhammadali committed
216 217 218
	return (
		<ModalPhoneNumpadStyle
			position={position}
Muhammadali's avatar
Muhammadali committed
219
			hiddenValue={!phoneModal}
Muhammadali's avatar
Muhammadali committed
220
			variant={variant}
Muhammadali's avatar
Muhammadali committed
221
			onClick={(e) => e.stopPropagation()}>
Muhammadali's avatar
Muhammadali committed
222 223 224 225 226 227 228 229 230 231
			{/* <div
				style={{
					background: 'red',
					position: 'fixed',
					top: '0',
					left: '0',
					width: '100%',
					height: '100vh',
					zIndex: '99999999',
				}}></div> */}
Muhammadali's avatar
Muhammadali committed
232
			<ModalPhoneNumpadStyle.InputArea>
Muhammadali's avatar
Muhammadali committed
233 234 235 236
				<CallHistoryInputDropdown
					call_history={call_history}
					inputValue={inputValue}
					selectFunc={selectFunc}
Muhammadali's avatar
Muhammadali committed
237
					numberSelectHistory={numberSelectHistory}
Muhammadali's avatar
Muhammadali committed
238
					setDefaultHistoryNumberHistory={setDefaultHistoryNumberHistory}
Muhammadali's avatar
Muhammadali committed
239
				/>
Muhammadali's avatar
Muhammadali committed
240
				{inputValue?.length ? (
Muhammadali's avatar
Muhammadali committed
241 242 243 244 245 246 247 248 249 250
					<Input.BackSpaceIcon
						onClick={() => inputController({ type: 'delete', from: 'button' })}
					/>
				) : (
					''
				)}
			</ModalPhoneNumpadStyle.InputArea>
			<ModalPhoneNumpadStyle.ButtonArea>
				{numbers?.map((mapItem) => (
					<NumberButton
Muhammadali's avatar
Muhammadali committed
251 252 253 254 255
						onMouseDown={() =>
							boxDialer.dialTone(mapItem.ringHz[0], mapItem.ringHz[1])
						}
						onMouseUp={() => boxDialer.stop()}
						onMouseOut={() => boxDialer.stop()}
Muhammadali's avatar
Muhammadali committed
256
						className='nocopy'
Muhammadali's avatar
Muhammadali committed
257
						key={mapItem.id}
Muhammadali's avatar
Muhammadali committed
258 259 260 261 262 263 264 265 266 267 268 269 270 271 272
						onClick={() => {
							mapItem.type === 'number' &&
								inputController({
									value: mapItem.value,
									type: 'add',
									from: 'button',
								});
						}}>
						{mapItem.nameNumber}
						<NumberButton.Icon>{mapItem.icon}</NumberButton.Icon>
					</NumberButton>
				))}
				{!modalState.bool ? (
					<>
						<NumberButton
Muhammadali's avatar
Muhammadali committed
273
							style={{ gridColumn: '1/4' }}
Muhammadali's avatar
Muhammadali committed
274
							status={dynamicValue}
Muhammadali's avatar
Muhammadali committed
275
							type={'call_button'}>
Muhammadali's avatar
Muhammadali committed
276 277
							<NumberButton.CallButton exNum={exNum}>
								<div className='left' onClick={() => callButton()}>
Muhammadali's avatar
Muhammadali committed
278
									<CallIcon className='callIcon' />
Muhammadali's avatar
Muhammadali committed
279
									<p className='call_text'>{translator.translate('CALL')}</p>
Muhammadali's avatar
Muhammadali committed
280
								</div>
Muhammadali's avatar
Muhammadali committed
281
								<div className='right' onClick={() => setExNum(!exNum)}>
Muhammadali's avatar
Muhammadali committed
282 283
									{/* <KeyboardControlKeyIcon className='icon' /> */}
									<div className='icon'></div>
Muhammadali's avatar
Muhammadali committed
284
								</div>
Muhammadali's avatar
Muhammadali committed
285
							</NumberButton.CallButton>
Muhammadali's avatar
Muhammadali committed
286
							<NumberButton.CallButtonModal visiblevalue={exNum}>
Muhammadali's avatar
Muhammadali committed
287
								<NumberButton.CallButtonModalInset>
Muhammadali's avatar
Muhammadali committed
288
									{extnums?.map((item, index) => (
Muhammadali's avatar
Muhammadali committed
289
										<p
Muhammadali's avatar
Muhammadali committed
290
											key={index}
Muhammadali's avatar
Muhammadali committed
291 292 293 294 295 296 297 298 299 300
											className='num_item'
											onClick={() => {
												boxDialer.extnum = item;
												setExNum(false);
												callButton();
											}}>
											{item}
										</p>
									))}
								</NumberButton.CallButtonModalInset>
Muhammadali's avatar
Muhammadali committed
301
							</NumberButton.CallButtonModal>
Muhammadali's avatar
Muhammadali committed
302 303 304 305
							{/* <ModalPhoneNumpadStyle.Window
								visiblevalue={exNum}
								onClick={() => setExNum(false)}
							/> */}
Muhammadali's avatar
Muhammadali committed
306 307 308 309 310 311 312 313
						</NumberButton>
					</>
				) : (
					<>
						<div style={{ height: '33px' }}></div>
						<div style={{ height: '33px' }}></div>
					</>
				)}
Muhammadali's avatar
Muhammadali committed
314
				<DropDown selectFunc={onSetDnd} reasons={reasons} reason={reason} />
Muhammadali's avatar
Muhammadali committed
315 316 317
			</ModalPhoneNumpadStyle.ButtonArea>
		</ModalPhoneNumpadStyle>
	);
318 319 320
};

export default ModalPhoneNumpad;