CFE-2 reinitializing call action tab

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

@@ -0,0 +1,21 @@
+import { Button, Stack } 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>
+    );
+};
+export default CallActionCategoriesButton;

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

@@ -0,0 +1,15 @@
+import { Stack } from "@mui/material";
+import useCategories from "@/lib/callWidget/hooks/useCategories";
+import CallActionCategoriesButton from "./CallActionCategoriesButton";
+
+const CallActionsCategories = ({ tab }) => {
+    const { categoryLists } = useCategories();
+    return (
+        <Stack direction={"row"} spacing={2}>
+            {categoryLists.map((category) => {
+                return <CallActionCategoriesButton tab={tab} key={category.category_id} category={category} />;
+            })}
+        </Stack>
+    );
+};
+export default CallActionsCategories;

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

@@ -0,0 +1,33 @@
+import { Button, Stack } from "@mui/material";
+import useCategories from "@/lib/callWidget/hooks/useCategories";
+import useRequest from "@/lib/app/hooks/useRequest";
+import { CALL_ACTION } from "@/core/data/apiRoutes";
+import useAnswers from "@/lib/callWidget/hooks/useAnswers";
+
+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(() => {});
+    };
+    return sub_category.category_id === tab.active_category_id ? (
+        <Stack sx={{ padding: 3 }}>
+            <Button onClick={handleSubcategoryButton} variant={"contained"}>
+                {sub_category.subcategory_name}
+            </Button>
+        </Stack>
+    ) : null;
+};
+export default CallActionSubcategoriesButton;

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

@@ -0,0 +1,15 @@
+import useCategories from "@/lib/callWidget/hooks/useCategories";
+import { Stack } from "@mui/material";
+import CallActionSubcategoriesButton from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton";
+
+const CallActionsSubcategories = ({ tab }) => {
+    const { subCategoryLists } = useCategories();
+    return (
+        <Stack direction={"row"} spacing={2}>
+            {subCategoryLists.map((sub_category, index) => {
+                return <CallActionSubcategoriesButton key={index} tab={tab} sub_category={sub_category} />;
+            })}
+        </Stack>
+    );
+};
+export default CallActionsSubcategories;

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

@@ -1,7 +1,13 @@
-const CallActions = ({tab}) => {
+import CallActionsCategories from "./CallActionCategories";
+import CallActionSubcategoriesButton from "./CallActionSubcategories/CallActionSubcategoriesButton";
+
+function CallActions({ tab }) {
     return (
-        <>CallActions - {tab.id}</>
-    )
+        <>
+            <CallActionsCategories tab={tab} />
+            <CallActionSubcategoriesButton tab={tab} />
+        </>
+    );
 }
 
-export default CallActions
+export default CallActions;