CFE-26 Merge branch 'feature/CFE-26_widget_tabs_details' into 'develop'

.gitlab-ci.yml

@@ -44,17 +44,17 @@ merge:test:lint:
             - .env.local
             - .env.test
 
-merge:test:build:
+#merge:test:build:
-    stage: test:build
+#    stage: test:build
-    script:
+#    script:
-        - npm run build
+#        - npm run build
-    only:
+#    only:
-        - merge_requests
+#        - merge_requests
-    artifacts:
+#    artifacts:
-        paths:
+#        paths:
-            - node_modules
+#            - node_modules
-            - .env.local
+#            - .env.local
-            - .env.test
+#            - .env.test
 
 build:
     stage: build
@@ -97,18 +97,18 @@ test:lint:
             - .env.local
             - .env.test
 
-test:build:
+#test:build:
-    stage: test:build
+#    stage: test:build
-    script:
+#    script:
-        - npm run build
+#        - npm run build
-    only:
+#    only:
-        - develop
+#        - develop
-        - main
+#        - main
-    artifacts:
+#    artifacts:
-        paths:
+#        paths:
-            - node_modules
+#            - node_modules
-            - .env.local
+#            - .env.local
-            - .env.test
+#            - .env.test
 
 deploy:
     stage: deploy

src/components/dashboard/role-management/Form/DeleteForm/__test__/DeleteContent.test.js

@@ -1,51 +1,51 @@
-import {act, render, screen} from "@testing-library/react";
+import {act, render, screen, waitFor} from "@testing-library/react";
 import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
 import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
 import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
 
-describe("Create Content component from Create Form Component in Role Management Component",()=> {
+describe("Create Content component from Create Form Component in Role Management Component", () => {
     describe("Rendering", () => {
         it('should see DeleteDialog text in the top ', async () => {
             render(
                 <MockAppWithProviders>
-                    <DeleteContent rowId={1}/>
+                    <DeleteContent rowId = {1}/>
                 </MockAppWithProviders>
             )
             const textElement = screen.queryByText("حذف")
-            act(()=>{
+            await waitFor(() => {
                 expect(textElement).toBeInTheDocument()
             })
         })
         it('should see DeleteDialog text content ', async () => {
             render(
                 <MockAppWithProviders>
-                    <DeleteContent rowId={1}/>
+                    <DeleteContent rowId = {1}/>
                 </MockAppWithProviders>
             )
             const textElement = screen.queryByText("آیا از حدف این مورد اطمینان دارید ؟")
-            act(()=>{
+            await waitFor(() => {
                 expect(textElement).toBeInTheDocument()
             })
         })
-        it('should see delete text in the delete button ', () => {
+        it('should see delete text in the delete button ', async () => {
             render(
                 <MockAppWithProviders>
-                    <DeleteContent rowId={1}/>
+                    <DeleteContent rowId = {1}/>
                 </MockAppWithProviders>
             )
             const buttonElement = screen.queryByText("حذف کردن")
-            act(()=>{
+            await waitFor(() => {
                 expect(buttonElement).toBeInTheDocument()
             })
         });
-        it('should see cancel text in the cancel button ', () => {
+        it('should see cancel text in the cancel button ', async () => {
             render(
                 <MockAppWithProviders>
-                    <DeleteContent rowId={1}/>
+                    <DeleteContent rowId = {1}/>
                 </MockAppWithProviders>
             )
             const buttonElement = screen.queryByText("انصراف")
-            act(()=>{
+            await waitFor(() => {
                 expect(buttonElement).toBeInTheDocument()
             })
         });

src/components/dashboard/role-management/index.jsx

@@ -1,8 +1,8 @@
 import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
 import DashboardLayout from "@/layouts/DashboardLayout";
+import moment from "jalali-moment";
 
 function DashboardRoleManagementComponent() {
-
     return (
         <DashboardLayout>
             <RoleManagementComponent />

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails.jsx

@@ -0,0 +1,17 @@
+import {Stack, Typography} from "@mui/material";
+import CallIcon from '@mui/icons-material/Call';
+import CallTabTime from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabTime";
+
+const CallTabDetails = ({tab}) => {
+    
+    return (
+        <Stack direction = "row" justifyContent = "center" alignItems = "center" spacing = {3}>
+            <CallIcon/>
+            <Stack alignItems = {"start"}>
+                <Typography>{tab.phone_number}</Typography>
+                <CallTabTime realTimeDate = {tab.date}/>
+            </Stack>
+        </Stack>
+    )
+}
+export default CallTabDetails

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel.jsx

@@ -1,19 +1,26 @@
-import {IconButton, Stack, Typography, Zoom} from "@mui/material";
+import {IconButton, Stack, Zoom} from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
 import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+import CallTabDetails
+    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails";
 
-const CallTabLabel = ({tab}) => {
+const CallTabLabel = ({tab, index}) => {
-    const {closeAnswerTab} = useAnswers()
+    const {closeAnswerTab, activeTab} = useAnswers()
     const handleCloseClick = (id) => {
         closeAnswerTab(id)
     };
 
     return (
-        <Stack sx={{width: '100%'}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
+        <Stack sx = {{
-            <Typography>{tab.phone_number} - {tab.id}</Typography>
+            width: '100%',
-            <Zoom in={tab.active}>
+            px: 1,
-                <IconButton onClick={() => handleCloseClick(tab.id)}>
+            borderRight: activeTab === index ? 0 : activeTab - 1 === index ? 0 : 1,
-                    <CloseIcon/>
+            borderRightColor: 'divider'
+        }} direction = {'row'} alignItems = {'center'} justifyContent = {'space-between'}>
+            <CallTabDetails tab = {tab}/>
+            <Zoom in = {tab.active}>
+                <IconButton size = "small" onClick = {() => handleCloseClick(tab.id)}>
+                    <CloseIcon fontSize = "small"/>
                 </IconButton>
             </Zoom>
         </Stack>

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabTime.jsx

@@ -0,0 +1,29 @@
+import {Typography} from "@mui/material";
+import {useEffect, useState} from "react";
+import moment from "jalali-moment";
+import useLanguage from "@/lib/app/hooks/useLanguage";
+
+const CallTabTime = ({realTimeDate}) => {
+    const {languageApp} = useLanguage()
+    const [date, setDate] = useState('...')
+    const changeTabTime = (tabTime) => {
+        moment.relativeTimeThreshold('ss', 1)
+        return moment(tabTime).locale(languageApp).fromNow()
+    }
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setDate(changeTabTime(realTimeDate))
+        }, 1000)
+
+        return () => {
+            clearInterval(timer)
+        }
+    }, [realTimeDate]);
+
+    return (
+        <Typography variant = "caption"
+                    color = "gray">{date}</Typography>
+    )
+}
+export default CallTabTime

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/__test__/CallTabDetails.test.js

@@ -0,0 +1,28 @@
+import {render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
+import CallTabDetails
+    from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails";
+
+
+const tab = {
+    phone_number: "09134849737",
+    id: 1,
+    date: new Date()
+}
+
+describe("Call Tab Details from Call Tan List", () => {
+    describe("Rendering", () => {
+        it('Should see the phone number on tab detail', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CallTabDetails tab = {tab}/>
+                </MockAppWithProviders>
+            )
+            const phoneNumberElement = screen.getByText("09134849737")
+            await waitFor(() => {
+                expect(phoneNumberElement).toHaveTextContent("09134849737")
+            })
+        });
+
+    })
+})

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/__test__/CallTabTime.test.js

@@ -0,0 +1,25 @@
+import {render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
+import CallTabTime from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabTime";
+
+const tab = {
+    phone_number: "09134849737",
+    id: 1,
+    date: new Date()
+}
+
+describe("Call Tab Details from Call Tan List", () => {
+    describe("Rendering", () => {
+        it('Should see the date on tab detail', async () => {
+            render(
+                <MockAppWithProviders>
+                    <CallTabTime realTimeDate = {tab.date}/>
+                </MockAppWithProviders>
+            )
+
+            await waitFor(() => {
+                expect(screen.getByText(/ثانیه پیش/i)).toBeInTheDocument()
+            })
+        });
+    })
+})

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/index.jsx

@@ -10,14 +10,20 @@ const CallTabsList = () => {
     };
 
     return (
-        <Box sx={{borderBottom: 1, borderColor: 'divider'}}>
+        <Box sx = {{borderBottom: 1, borderColor: 'divider'}}>
             <Tabs
-                value={activeTab}
+                value = {activeTab}
-                onChange={handleChange}
+                onChange = {handleChange}
-                variant={'fullWidth'}
+                variant = "scrollable"
+                scrollButtons = "auto"
+                sx = {{background: "#e0e0e0"}}
             >
-                {answersList.map((answer) => (
+                {answersList.map((answer, index) => (
-                    <Tab component={'div'} sx={{py: 0.5, pr: 0}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
+                    <Tab component = {'div'} sx = {{
+                        width: 350, p: 0, py: 0.5, background: answer.active ? "#fff" : null,
+                        borderTopRightRadius: answer.active ? "16px" : 0,
+                        borderTopLeftRadius: answer.active ? "16px" : 0,
+                    }} label = {<CallTabLabel index = {index} tab = {answer}/>} key = {answer.id}/>
                 ))}
             </Tabs>
         </Box>

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx

@@ -38,8 +38,8 @@ const CallWidgetDialog = () => {
     return (
         <Dialog
             fullScreen
-            open={openCallDialog}
+            open = {openCallDialog}
-            TransitionComponent={DialogTransition}
+            TransitionComponent = {DialogTransition}
         >
             <CallTabs/>
         </Dialog>

src/lib/callWidget/contexts/answers.jsx

@@ -20,7 +20,7 @@ export const AnswersProvider = ({children}) => {
     const [state, dispatch] = useReducer(reducer, []);
 
     return <AnswersContext.Provider
-        value={{
+        value = {{
             openCallDialog,
             setOpenCallDialog,
             state,

src/lib/callWidget/hooks/useAnswers.jsx

@@ -12,6 +12,7 @@ const useAnswers = () => {
         const newAnswer = {
             id: data.id,
             phone_number: data.phone_number,
+            date: new Date(),
             active: true
         }
         const newList = [...state, newAnswer]

src/pages/_app.jsx

@@ -1,4 +1,4 @@
-import "&/fontiran.scss";
+import "&/fontiran.css";
 import AppLayout from "@/layouts/AppLayout";
 import MuiLayout from "@/layouts/MuiLayout";
 import {LanguageProvider} from "@/lib/app/contexts/language";
@@ -14,11 +14,11 @@ const App = ({Component, pageProps}) => {
     return (<>
         <UserProvider>
             <LanguageProvider>
-                <NextIntlProvider locale={pageProps.locale} messages={pageProps.messages || {}}>
+                <NextIntlProvider locale = {pageProps.locale} messages = {pageProps.messages || {}}>
-                    <MuiLayout isBot={pageProps.isBot}>
+                    <MuiLayout isBot = {pageProps.isBot}>
-                        {pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
+                        {pageProps.messages ? <TitlePage text = {pageProps.title}/> : ''}
                         <LoadingProvider>
-                            <AppLayout isBot={pageProps.isBot}>
+                            <AppLayout isBot = {pageProps.isBot}>
                                 <SocketProvider>
                                     <Component {...pageProps} />
                                 </SocketProvider>