CFE-22 implementation of socket and dialog and button call widget

src/lib/callWidget/contexts/answers.jsx

@@ -0,0 +1,31 @@
+import {createContext, useReducer, useState} from "react";
+
+const reducer = (state, action) => {
+    switch (action.type) {
+        case "CHANGE_ACTIVE_TAB":
+            return state.map((answer, index) => action.newValue === index ? {...answer, active: true} : {
+                ...answer,
+                active: false
+            });
+        case "CHANGE_LIST":
+            return [...action.newList]
+        default:
+            return state;
+    }
+}
+export const AnswersContext = createContext()
+export const AnswersProvider = ({children}) => {
+    const [openCallDialog, setOpenCallDialog] = useState(false)
+    const [activeTab, setActiveTab] = useState(0)
+    const [state, dispatch] = useReducer(reducer, []);
+
+    return <AnswersContext.Provider
+        value={{
+            openCallDialog,
+            setOpenCallDialog,
+            state,
+            dispatch,
+            activeTab,
+            setActiveTab
+        }}>{children}</AnswersContext.Provider>
+}

src/lib/callWidget/hooks/useAnswers.jsx

@@ -0,0 +1,38 @@
+import {useContext} from "react";
+import {AnswersContext} from "@/lib/callWidget/contexts/answers";
+
+const useAnswers = () => {
+    const {state, dispatch, activeTab, setActiveTab} = useContext(AnswersContext)
+
+    const changeActiveTabAnswers = (newValue) => {
+        dispatch({type: 'CHANGE_ACTIVE_TAB', newValue})
+        setActiveTab(newValue)
+    }
+
+    const newAnswerTab = (data) => {
+        const newAnswer = {
+            id: data.id,
+            phone_number: data.phone_number,
+            active: true
+        }
+        const newList = [...state, newAnswer]
+        dispatch({type: 'CHANGE_LIST', newList})
+        changeActiveTabAnswers(newList.length - 1)
+    }
+
+    const closeAnswerTab = (id) => {
+        const index = state.findIndex(answer => answer.id === id)
+        const newIndex = index === 0 ? 0 : index - 1
+        const newList = [...state]
+        newList.splice(index, 1);
+        if (newList.length !== 0) {
+            newList[newIndex].active = true
+            setActiveTab(newIndex)
+        }
+        dispatch({type: 'CHANGE_LIST', newList})
+    }
+
+    return {answersList: state, activeTab, setActiveTab, changeActiveTabAnswers, closeAnswerTab, newAnswerTab}
+}
+
+export default useAnswers

src/lib/callWidget/hooks/useCallDialog.jsx

@@ -0,0 +1,10 @@
+import {useContext} from "react";
+import {AnswersContext} from "@/lib/callWidget/contexts/answers";
+
+const useCallDialog = () => {
+    const {openCallDialog, setOpenCallDialog} = useContext(AnswersContext)
+
+    return {openCallDialog, setOpenCallDialog}
+}
+
+export default useCallDialog