71 lines
2.0 KiB
TypeScript
71 lines
2.0 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>
|
||
|
|
);
|
||
|
|
|
||
|
|
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.AmoID)}
|
||
|
|
{infoItem("Имя аккаунта", accountInfo.Name)}
|
||
|
|
{infoItem("Email аккаунта", accountInfo.Email)}
|
||
|
|
{infoItem("Роль", accountInfo.Role)}
|
||
|
|
{infoItem("Группа пользователя", accountInfo.Group)}
|
||
|
|
{infoItem("URL профиля пользователя в Amo", accountInfo.Subdomain)}
|
||
|
|
{infoItem("Страна пользователя", accountInfo.Country)}
|
||
|
|
</Box>
|
||
|
|
<StepButtonsBlock
|
||
|
|
isSmallBtnDisabled={true}
|
||
|
|
onLargeBtnClick={handleNextStep}
|
||
|
|
largeBtnText={"Далее"}
|
||
|
|
/>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|