амо: вывод инфо о юзере, реактивность, отправка id воронки
This commit is contained in:
parent
c9b27cbef9
commit
ca132a1575
@ -12,6 +12,7 @@ const API_URL = `${process.env.REACT_APP_DOMAIN}/squiz/amocrm`;
|
|||||||
|
|
||||||
export type AccountResponse = {
|
export type AccountResponse = {
|
||||||
ID: number;
|
ID: number;
|
||||||
|
AmoUserID: number;
|
||||||
AccountID: string;
|
AccountID: string;
|
||||||
AmoID: number;
|
AmoID: number;
|
||||||
Name: string;
|
Name: string;
|
||||||
|
@ -5,7 +5,7 @@ import RadioGroup from "@mui/material/RadioGroup";
|
|||||||
import FormControlLabel from "@mui/material/FormControlLabel";
|
import FormControlLabel from "@mui/material/FormControlLabel";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import CheckboxIcon from "@icons/Checkbox";
|
import CheckboxIcon from "@icons/Checkbox";
|
||||||
import { Typography, useTheme } from "@mui/material";
|
import { Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||||
import {
|
import {
|
||||||
getPipelines,
|
getPipelines,
|
||||||
getSteps,
|
getSteps,
|
||||||
@ -32,6 +32,9 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
|
|||||||
pipelineId,
|
pipelineId,
|
||||||
}) => {
|
}) => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
|
|
||||||
|
const isMobile = useMediaQuery(theme.breakpoints.down(500));
|
||||||
|
|
||||||
const [currentValue, setCurrentValue] = useState<string | null>(
|
const [currentValue, setCurrentValue] = useState<string | null>(
|
||||||
selectedValue,
|
selectedValue,
|
||||||
);
|
);
|
||||||
@ -117,7 +120,7 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
|
|||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
key={item.ID}
|
key={item.ID}
|
||||||
sx={{
|
sx={{
|
||||||
color: "black",
|
color: "red",
|
||||||
padding: "15px",
|
padding: "15px",
|
||||||
borderBottom: `1px solid ${theme.palette.background.default}`,
|
borderBottom: `1px solid ${theme.palette.background.default}`,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
@ -205,8 +208,13 @@ export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
|
|||||||
currentValue === pipeline.Name
|
currentValue === pipeline.Name
|
||||||
? theme.palette.background.default
|
? theme.palette.background.default
|
||||||
: theme.palette.common.white,
|
: theme.palette.common.white,
|
||||||
|
"&.MuiFormControlLabel-root > .MuiTypography-root": {
|
||||||
|
width: "200px",
|
||||||
|
overflow: "hidden",
|
||||||
|
textOverflow: "ellipsis"
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
value={pipeline.Name}
|
value={pipeline.ID}
|
||||||
control={
|
control={
|
||||||
<Radio
|
<Radio
|
||||||
checkedIcon={
|
checkedIcon={
|
||||||
|
@ -29,7 +29,26 @@ export const AmoAccountInfo: FC<AmoAccountInfoProps> = ({
|
|||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ width: isMobile ? "100%" : "45%" }}>
|
<Box sx={{ width: isMobile ? "100%" : "45%" }}>
|
||||||
<Typography>{value}</Typography>
|
<Typography>{value || "нет данных"}</Typography>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
|
const infoItemLink = (title: string, link: string) => (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: isMobile ? "column" : "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box sx={{ width: isMobile ? "100%" : "45%" }}>
|
||||||
|
<Typography sx={{ color: theme.palette.grey2.main }}>
|
||||||
|
{title}:
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box sx={{ width: isMobile ? "100%" : "45%" }}>
|
||||||
|
<a target="_blank" href={link}>{link}</a>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
@ -52,12 +71,11 @@ export const AmoAccountInfo: FC<AmoAccountInfoProps> = ({
|
|||||||
gap: isMobile ? "10px" : "20px",
|
gap: isMobile ? "10px" : "20px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{infoItem("Amo ID", accountInfo.AmoID)}
|
{infoItem("Amo ID", accountInfo.AmoUserID)}
|
||||||
{infoItem("Имя аккаунта", accountInfo.Name)}
|
{infoItem("Имя аккаунта", accountInfo.Name)}
|
||||||
{infoItem("Email аккаунта", accountInfo.Email)}
|
{infoItem("Email аккаунта", accountInfo.Email)}
|
||||||
{infoItem("Роль", accountInfo.Role)}
|
{infoItemLink("ЛК в amo", `https://${accountInfo.Subdomain}.amocrm.ru/dashboard/`)}
|
||||||
{infoItem("Группа пользователя", accountInfo.Group)}
|
{infoItemLink("Профиль пользователя в amo", `https://${accountInfo.Subdomain}.amocrm.ru/settings/users/`)}
|
||||||
{infoItem("URL профиля пользователя в Amo", accountInfo.Subdomain)}
|
|
||||||
{infoItem("Страна пользователя", accountInfo.Country)}
|
{infoItem("Страна пользователя", accountInfo.Country)}
|
||||||
</Box>
|
</Box>
|
||||||
<StepButtonsBlock
|
<StepButtonsBlock
|
||||||
|
@ -68,6 +68,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
|||||||
company: [],
|
company: [],
|
||||||
buyer: [],
|
buyer: [],
|
||||||
});
|
});
|
||||||
|
console.log(accountInfo)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isModalOpen) {
|
if (isModalOpen) {
|
||||||
@ -176,6 +177,7 @@ export const AmoCRMModal: FC<IntegrationsModalProps> = ({
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
|
accountInfo,
|
||||||
questionEntity,
|
questionEntity,
|
||||||
selectedPipelinePerformer,
|
selectedPipelinePerformer,
|
||||||
selectedPipeline,
|
selectedPipeline,
|
||||||
|
@ -321,7 +321,6 @@ export default function Component() {
|
|||||||
>
|
>
|
||||||
Аналитика
|
Аналитика
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography>(в разработке)</Typography>
|
|
||||||
</Box>
|
</Box>
|
||||||
<Box maxWidth={"230px"}>
|
<Box maxWidth={"230px"}>
|
||||||
<Typography
|
<Typography
|
||||||
|
Loading…
Reference in New Issue
Block a user