CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CFE-2 Merge branch 'feature/CFE-2_widget_call_action' into 'develop'

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-10-29 12:50:46 +00:00
parent 579dbbcea6 c598d82ed0
commit 308ae20019
22 changed files with 656 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/__test__/index.test.js Normal file
View File

@@ -0,0 +1,43 @@
import {render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import ActionHeader from "..";
const tab = {
active: true,
active_category_id: 1,
phone_number : "09134849737"
}
describe('Action Header Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see header text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<ActionHeader tab={tab} />
</AnswersProvider>
</MockAppWithProviders>
)
const headingElement = screen.getByRole('heading', {
name: /\.\.\.\. عملیات های مربوط به تماس:/i
})
await waitFor(() => {
expect(headingElement).toBeInTheDocument()
})
});
it('should see phone number', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<ActionHeader tab={tab} />
</AnswersProvider>
</MockAppWithProviders>
)
const phone_numberElement = screen.queryByText(/09134849737/i)
await waitFor(() => {
expect(phone_numberElement).toBeInTheDocument()
})
});
});
});

25
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/ActionHeader/index.jsx Normal file
View File

@@ -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 data-testid="phone_number" variant="subtitle1" sx={{color: "#fff"}}>
{tab.phone_number} ....
</Typography>
</Stack>
)
}
export default ActionHeader

25
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/CallActionCategoriesButton.jsx Normal file
View File

@@ -0,0 +1,25 @@
import { Button, Grid } from "@mui/material";
import useCategories from "@/lib/callWidget/hooks/useCategories";
const CallActionCategoriesButton = ({ category, tab }) => {
const { setActiveCategoryID } = useCategories();
return (
<Grid item xs={4}>
<Button
sx={{py : 1.5}}
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;

51
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/CallActionCategoriesButton.test.js Normal file
View File

@@ -0,0 +1,51 @@
import {fireEvent, 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()
})
});
});
describe("Behavior", ()=>{
it("Should change the color when button clecked",async()=>{
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionCategoriesButton tab={tab} category={category}/>
</AnswersProvider>
</MockAppWithProviders>
)
const buttonElement = screen.getByRole('button', {
name: /اطلاعات راه ها/i
})
fireEvent.click(buttonElement);
await waitFor(() => {
expect(buttonElement).toHaveStyle('background-color: rgb(12, 31, 23)');
})
})
})
})

29
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/__test__/index.test.js Normal file
View File

@@ -0,0 +1,29 @@
import { AnswersProvider } from "@/lib/callWidget/contexts/answers";
import CallActionsCategories from "..";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import { render, screen, waitFor } from "@testing-library/react";
const tab = {
active: true,
active_category_id: 1,
id : 1,
phone_number : "09134849737"
}
describe('Call Action Categories Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see divider text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionsCategories tab={tab}/>
</AnswersProvider>
</MockAppWithProviders>
)
const divider_textElement = screen.queryByText("موضوع ها")
await waitFor(() => {
expect(divider_textElement).toBeInTheDocument()
})
});
});
})

22
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionCategories/index.jsx Normal file
View File

@@ -0,0 +1,22 @@
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 (
<>
<Divider sx={{margin : 2}}><Chip label={t("CallAction.categories")} variant="outlined"/></Divider>
<Stack sx={{m : 1, p : 1}} direction={"row"}>
<Grid container spacing={2}>
{categoryLists.map((category) => {
return <CallActionCategoriesButton tab={tab} key={category.category_id} category={category} />;
})}
</Grid>
</Stack>
</>
);
};
export default CallActionsCategories;

54
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionDescription/__test__/index.test.js Normal file
View File

@@ -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("امین")
})
})
})
});

27
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionDescription/index.jsx Normal file
View File

@@ -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

14
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/CallActionSubcategoriesButton.jsx Normal file
View File

@@ -0,0 +1,14 @@
import { Button, Grid } from "@mui/material";
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(sub_category.category_id, sub_category.subcategory_id)}} variant={"contained"}>
{sub_category.subcategory_name}
</Button>
</Grid>
) : null;
};
export default CallActionSubcategoriesButton;

37
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/CallActionSubcategoriesButton.test.js Normal file
View File

@@ -0,0 +1,37 @@
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 render subcategory name', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionSubcategoriesButton sub_category={sub_category} tab={tab} />
</AnswersProvider>
</MockAppWithProviders>
);
const subCategoryElement = screen.queryByText(/اطلاعات باز و بسته/i);
await waitFor(() => {
expect(subCategoryElement).toBeInTheDocument();
});
});
});
});

29
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/__test__/index.test.js Normal file
View File

@@ -0,0 +1,29 @@
import { AnswersProvider } from "@/lib/callWidget/contexts/answers";
import CallActionsSubcategories from "..";
import MockAppWithProviders from "../../../../../../../../../../../mocks/AppWithProvider";
import { render, screen, waitFor } from "@testing-library/react";
const tab = {
active: true,
active_category_id: 1,
id : 1,
phone_number : "09134849737"
}
describe('Call Action Categories Button from Call Actions Categories', () => {
describe('Rendering', () => {
it('should see divider text', async () => {
render(
<MockAppWithProviders>
<AnswersProvider>
<CallActionsSubcategories tab={tab}/>
</AnswersProvider>
</MockAppWithProviders>
)
const divider_textElement = screen.queryByText("زیر موضوع ها")
await waitFor(() => {
expect(divider_textElement).toBeInTheDocument()
})
});
});
})

22
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions/CallActionSubcategories/index.jsx Normal file
View File

@@ -0,0 +1,22 @@
import useCategories from "@/lib/callWidget/hooks/useCategories";
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, handleSubcategoryButton }) => {
const { subCategoryLists } = useCategories();
const t = useTranslations();
return (
<>
<Divider sx={{margin : 2}}><Chip label={t("CallAction.subcategories")} variant="outlined"/></Divider>
<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} handleSubcategoryButton={handleSubcategoryButton}/>;
})}
</Grid>
</Stack>
</>
);
};
export default CallActionsSubcategories;

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

@@ -1,7 +1,43 @@
const CallActions = ({tab}) => {
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 (
<>CallActions - {tab.id}</>
)
<>
<ActionHeader tab={tab} />
<CallActionDescription setDescription={setDescription} />
<CallActionsCategories tab={tab} />
<CallActionsSubcategories handleSubcategoryButton={handleSubcategoryButton} tab={tab} />
</>
);
}
export default CallActions
export default CallActions;