87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
|
|
import { FC } from "react";
|
|
import { AccountResponse } from "@api/integration";
|
|
|
|
type AmoAccountInfoProps = {
|
|
handleNextStep: () => void;
|
|
accountInfo: AccountResponse;
|
|
};
|
|
|
|
export const AmoAccountInfo: FC<AmoAccountInfoProps> = ({ handleNextStep, accountInfo }) => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|
|
|
const infoItem = (title: string, value: string | number) => (
|
|
<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%" }}>
|
|
<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>
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
height: "100%",
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
marginTop: isMobile ? "20px" : "60px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: isMobile ? "10px" : "20px",
|
|
}}
|
|
>
|
|
{infoItem("Amo ID", accountInfo.amoUserID)}
|
|
{infoItem("Имя аккаунта", accountInfo.name)}
|
|
{infoItem("Email аккаунта", accountInfo.email)}
|
|
{infoItemLink("ЛК в amo", `https://${accountInfo.subdomain}.amocrm.ru/dashboard/`)}
|
|
{infoItemLink("Профиль пользователя в amo", `https://${accountInfo.subdomain}.amocrm.ru/settings/users/`)}
|
|
{infoItem("Страна пользователя", accountInfo.country)}
|
|
</Box>
|
|
<StepButtonsBlock
|
|
isSmallBtnDisabled={true}
|
|
onLargeBtnClick={handleNextStep}
|
|
largeBtnText={"Далее"}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|