CFE-2 styling buttons

public/locales/fa/app.json

@@ -260,5 +260,10 @@
     "call_history_not_found": "تاریخچه ای برای تماس دریافتی یافت نشد",
     "call_history_error_fetching": "خطا در دریافت تاریخچه تماس دریافتی",
     "show_more": "نمایش موارد بیشتر"
+  },
+  "CallAction": {
+    "call_history_of": "عملیات های مربوط به تماس",
+    "categories" : "موضوع ها",
+    "subcategories" : "زیر موضوع ها"
   }
 }

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

@@ -0,0 +1,25 @@
+import {useTranslations} from "next-intl";
+import {Stack, Typography} from "@mui/material";
+
+const ActionHeader = ({tab}) => {
+    const t = useTranslations();
+    return (
+        <Stack sx={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            py: 2,
+            backgroundColor: "primary.main",
+            overflow: "hidden"
+        }}>
+            <Typography variant="subtitle1" sx={{marginRight: 1, color: "#fff"}}>
+                .... {t("CallAction.call_history_of")}:
+            </Typography>
+            <Typography variant="subtitle1" sx={{color: "#fff"}}>
+                {tab.phone_number} ....
+            </Typography>
+        </Stack>
+    )
+}
+
+export default ActionHeader

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

@@ -1,21 +1,24 @@
-import { Button, Stack } from "@mui/material";
+import { Button, Grid } from "@mui/material";
 import useCategories from "@/lib/callWidget/hooks/useCategories";
 
 const CallActionCategoriesButton = ({ category, tab }) => {
     const { setActiveCategoryID } = useCategories();
 
     return (
-        <Stack sx={{ padding: 3 }}>
-            <Button
-                variant={"contained"}
-                color={tab.active_category_id === category.category_id ? "success" : "inherit"}
-                onClick={() => {
-                    setActiveCategoryID(tab.id, category.category_id);
-                }}
-            >
-                {category.category_name}
-            </Button>
-        </Stack>
+        
+            <Grid item xs={4}>
+                <Button
+                    fullWidth
+                    variant={"contained"}
+                    color={tab.active_category_id === category.category_id ? "primary" : "inherit"}
+                    onClick={() => {
+                        setActiveCategoryID(tab.id, category.category_id);
+                    }}
+                >
+                    {category.category_name}
+                </Button>
+            </Grid>
+        
     );
 };
 export default CallActionCategoriesButton;

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/CallActionCategoriesButton.test.js

@@ -0,0 +1,31 @@
+import {render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
+import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
+import CallActionCategoriesButton from "../CallActionCategoriesButton";
+
+const category = {
+    category_id: 1,
+    category_name: "اطلاعات راه ها",
+}
+const tab = {
+    active: true,
+    active_category_id: 1,
+}
+
+describe('Call Action Categories Button from Call Actions Categories', () => {
+    describe('Rendering', () => {
+        it('should categories names', async () => {
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <CallActionCategoriesButton tab={tab} category={category}/>
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const categoryElement = screen.queryByText("اطلاعات راه ها")
+            await waitFor(() => {
+                expect(categoryElement).toBeInTheDocument()
+            })
+        });
+    });
+});

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

@@ -1,15 +1,22 @@
-import { Stack } from "@mui/material";
+import { Chip, Divider, Grid, Stack } from "@mui/material";
 import useCategories from "@/lib/callWidget/hooks/useCategories";
 import CallActionCategoriesButton from "./CallActionCategoriesButton";
+import { useTranslations } from "next-intl";
 
 const CallActionsCategories = ({ tab }) => {
     const { categoryLists } = useCategories();
+    const t = useTranslations();
     return (
-        <Stack direction={"row"} spacing={2}>
-            {categoryLists.map((category) => {
-                return <CallActionCategoriesButton tab={tab} key={category.category_id} category={category} />;
-            })}
-        </Stack>
+        <>
+            <Divider sx={{margin : 2}}><Chip label={t("CallAction.categories")} variant="outlined"/></Divider>
+            <Stack sx={{margin : 1}} direction={"row"}>
+                <Grid container spacing={1} sx={{padding : 1}}>
+                    {categoryLists.map((category) => {
+                        return <CallActionCategoriesButton tab={tab} key={category.category_id} category={category} />;
+                    })}
+                </Grid>
+            </Stack>
+        </>
     );
 };
 export default CallActionsCategories;

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

@@ -1,4 +1,4 @@
-import { Button, Stack } from "@mui/material";
+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";
@@ -22,11 +22,11 @@ const CallActionSubcategoriesButton = ({ sub_category, tab }) => {
             .catch(() => {});
     };
     return sub_category.category_id === tab.active_category_id ? (
-        <Stack sx={{ padding: 3 }}>
-            <Button onClick={handleSubcategoryButton} variant={"contained"}>
+        <Grid item xs={3}>
+            <Button fullWidth color="inherit" onClick={handleSubcategoryButton} variant={"contained"}>
                 {sub_category.subcategory_name}
             </Button>
-        </Stack>
+        </Grid>
     ) : null;
 };
 export default CallActionSubcategoriesButton;

src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/CallActionSubcategoriesButton.test.js

@@ -0,0 +1,41 @@
+import {render, screen, waitFor} from "@testing-library/react";
+import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
+import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
+import CallActionSubcategoriesButton from "../CallActionSubcategoriesButton";
+
+const sub_category = [
+    {
+        category_id: 1,
+        category_name: "اطلاعات راه",
+        subcategory_id: 1,
+        subcategory_name:"اطلاعات باز و بسته"
+    }
+]
+
+const tab = [
+    {
+        active: true,
+        active_category_id: 1,
+        date: new Date(),
+        id: 1,
+        phone_number: "09134849737"
+    }
+]
+
+describe('Call Action Subcategories Button from Call Actions Categories', () => {
+    describe('Rendering', () => {
+        it('should categories names', async () => {
+            render(
+                <MockAppWithProviders>
+                    <AnswersProvider>
+                        <CallActionSubcategoriesButton sub_category={sub_category} tab={tab} />
+                    </AnswersProvider>
+                </MockAppWithProviders>
+            )
+            const subCategoryElement = screen.queryByText("اطلاعات باز و بسته")
+            await waitFor(()=>{
+                expect(subCategoryElement).toBeInTheDocument()
+            })
+        });
+    });
+});

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

@@ -1,15 +1,22 @@
 import useCategories from "@/lib/callWidget/hooks/useCategories";
-import { Stack } from "@mui/material";
+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 { subCategoryLists } = useCategories();
+    const t = useTranslations();
     return (
-        <Stack direction={"row"} spacing={2}>
-            {subCategoryLists.map((sub_category, index) => {
-                return <CallActionSubcategoriesButton key={index} tab={tab} sub_category={sub_category} />;
-            })}
-        </Stack>
+        <>
+            <Divider sx={{margin : 2}}><Chip label={t("CallAction.subcategories")} variant="outlined"/></Divider>
+            <Stack sx={{margin : 1}} direction={"row"}>
+                <Grid container spacing={1} sx={{padding : 1}}>
+                    {subCategoryLists.map((sub_category, index) => {
+                        return <CallActionSubcategoriesButton key={index} tab={tab} sub_category={sub_category} />;
+                    })}
+                </Grid>
+            </Stack>
+        </>
     );
 };
 export default CallActionsSubcategories;

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

@@ -1,9 +1,12 @@
+import { Divider } from "@mui/material";
 import CallActionsCategories from "./CallActionCategories";
 import CallActionsSubcategories from "./CallActionSubcategories";
+import ActionHeader from "./ActionHeader";
 
 function CallActions({ tab }) {
     return (
         <>
+            <ActionHeader tab={tab} />
             <CallActionsCategories tab={tab} />
             <CallActionsSubcategories tab={tab} />
         </>