CFE-2 add header and description

public/locales/fa/app.json

@@ -264,6 +264,9 @@
   "CallAction": {
     "call_history_of": "عملیات های مربوط به تماس",
     "categories" : "موضوع ها",
-    "subcategories" : "زیر موضوع ها"
+    "subcategories" : "زیر موضوع ها",
+    "description" : "توضیحات تماس (اختیاری)",
+    "text_field_label" : "توضیحات",
+    "text_field_palacholder" : "لطفا توضیحات خود را وارد نمایید"
   }
 }

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionDescription/__test__/index.test.js

@@ -0,0 +1,54 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
+import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
+import CallActionDescription from "..";
+
+describe('Action Header Button from Call Actions Categories', () => {
+    describe('Rendering', () => {
+        it('should see placeholder text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <CallActionDescription />
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.getByPlaceholderText('لطفا توضیحات خود را وارد نمایید')
+            await waitFor(() => {
+                expect(textElement).toBeInTheDocument()
+            })
+        });
+        it('should see header text', async () => {
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <CallActionDescription />
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.getByText('توضیحات تماس (اختیاری)')
+            await waitFor(() => {
+                expect(textElement).toBeInTheDocument()
+            })
+        });
+    });
+    describe("Behavior", ()=>{
+        it("Should see what write in input", async()=>{
+            const setDescription = jest.fn();
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <CallActionDescription setDescription={setDescription} />
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const textElement = screen.getByPlaceholderText('لطفا توضیحات خود را وارد نمایید')
+
+            fireEvent.change(textElement, {target : {value : "امین"}})
+
+            await waitFor(() => {
+                expect(textElement).toHaveValue("امین")
+            })
+        })
+    })
+});

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionDescription/index.jsx

@@ -0,0 +1,27 @@
+import { Box, Chip, Divider, TextField } from "@mui/material"
+import { useTranslations } from "next-intl";
+
+const CallActionDescription = ({setDescription}) => {
+    const t = useTranslations();
+    return(
+        <>
+            <Divider sx={{margin : 2}}><Chip label={t("CallAction.description")} variant="outlined"/></Divider>
+            <Box sx={{m : 2}}>
+                <TextField 
+                variant="outlined" 
+                placeholder={t(
+                    "CallAction.text_field_palacholder"
+                )}
+                type={"text"}
+                fullWidth
+                multiline
+                rows={8}
+                onChange={(e)=>{
+                    setDescription(e.target.value)
+                }}
+                />
+            </Box>
+        </>
+    )
+}
+export default CallActionDescription

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton.jsx

@@ -1,29 +1,11 @@
-import { Button, Grid, Stack } from "@mui/material";
-import useRequest from "@/lib/app/hooks/useRequest";
-import { CALL_ACTION } from "@/core/data/apiRoutes";
-import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+import { Button, Grid } from "@mui/material";
 
-const CallActionSubcategoriesButton = ({ sub_category, tab }) => {
-    const requestServer = useRequest({ auth: true });
-    const { closeAnswerTab } = useAnswers();
-    const handleSubcategoryButton = () => {
-        requestServer(`${CALL_ACTION}/${tab.id}`, "post", {
-            data: {
-                category_id: sub_category.category_id,
-                subcategory_id: sub_category.subcategory_id,
-            },
-            success: {
-                notification: { show: false },
-            },
-        })
-            .then(() => {
-                closeAnswerTab(tab.id);
-            })
-            .catch(() => {});
-    };
+const CallActionSubcategoriesButton = ({ sub_category, tab, handleSubcategoryButton }) => {
+    
     return sub_category.category_id === tab.active_category_id ? (
         <Grid item xs={3}>
-            <Button sx={{py : 1.5}} fullWidth color="inherit" onClick={handleSubcategoryButton} variant={"contained"}>
+            <Button sx={{py : 1.5}} fullWidth color="inherit" 
+            onClick={()=>{handleSubcategoryButton(sub_category.category_id, sub_category.subcategory_id)}} variant={"contained"}>
                 {sub_category.subcategory_name}
             </Button>
         </Grid>

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/index.jsx

@@ -3,7 +3,7 @@ import { Chip, Divider, Grid, Stack } from "@mui/material";
 import CallActionSubcategoriesButton from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton";
 import { useTranslations } from "next-intl";
 
-const CallActionsSubcategories = ({ tab }) => {
+const CallActionsSubcategories = ({ tab, handleSubcategoryButton }) => {
     const { subCategoryLists } = useCategories();
     const t = useTranslations();
     return (
@@ -12,7 +12,7 @@ const CallActionsSubcategories = ({ tab }) => {
             <Stack sx={{m : 1, p : 1 }} direction={"row"}>
                 <Grid container spacing={2}>
                     {subCategoryLists.map((sub_category, index) => {
-                        return <CallActionSubcategoriesButton key={index} tab={tab} sub_category={sub_category} />;
+                        return <CallActionSubcategoriesButton key={index} tab={tab} sub_category={sub_category} handleSubcategoryButton={handleSubcategoryButton}/>;
                     })}
                 </Grid>
             </Stack>

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/index.jsx

@@ -1,14 +1,41 @@
-import { Divider } from "@mui/material";
 import CallActionsCategories from "./CallActionCategories";
 import CallActionsSubcategories from "./CallActionSubcategories";
 import ActionHeader from "./ActionHeader";
+import CallActionDescription from "./CallActionDescription";
+import { CALL_ACTION } from "@/core/data/apiRoutes";
+import useRequest from "@/lib/app/hooks/useRequest";
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+import { useState } from "react";
 
 function CallActions({ tab }) {
+    const [description, setDescription] = useState('')
+    const requestServer = useRequest({ auth: true });
+    const { closeAnswerTab } = useAnswers();
+
+    const handleSubcategoryButton = (category_id, subcategory_id) => {
+        requestServer(`${CALL_ACTION}/${tab.id}`, "post", {
+            data: {
+                category_id,
+                subcategory_id,
+                description
+            },
+            success: {
+                notification: { show: false },
+            },
+        })
+            .then(() => {
+                closeAnswerTab(tab.id);
+            })
+            .catch(() => {});
+    };
+    
+
     return (
         <>
             <ActionHeader tab={tab} />
+            <CallActionDescription setDescription={setDescription} />
             <CallActionsCategories tab={tab} />
-            <CallActionsSubcategories tab={tab} />
+            <CallActionsSubcategories handleSubcategoryButton={handleSubcategoryButton} tab={tab} />
         </>
     );
 }