240 lines
11 KiB
TypeScript
240 lines
11 KiB
TypeScript
import { Box, SxProps, Theme, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import CustomButton from "@components/CustomButton";
|
||
import InputTextfield from "@components/InputTextfield";
|
||
import SectionWrapper from "@components/SectionWrapper";
|
||
import ComplexNavText from "@root/components/ComplexNavText";
|
||
import { openDocumentsDialog, sendUserData, setSettingsField, useUserStore } from "@root/stores/user";
|
||
import UnderlinedButtonWithIcon from "@root/components/UnderlinedButtonWithIcon";
|
||
import UploadIcon from "@root/components/icons/UploadIcon";
|
||
import { VerificationStatus } from "@root/model/user";
|
||
import DocumentsDialog from "./DocumentsDialog/DocumentsDialog";
|
||
import EyeIcon from "@root/components/icons/EyeIcon";
|
||
import { cardShadow } from "@root/utils/themes/shadow";
|
||
|
||
|
||
export default function AccountSetup() {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||
const fields = useUserStore(state => state.settingsFields);
|
||
const verificationStatus = useUserStore(state => state.verificationStatus);
|
||
const verificationType = useUserStore(state => state.verificationType);
|
||
|
||
const textFieldProps = {
|
||
gap: upMd ? "16px" : "10px",
|
||
color: "#F2F3F7",
|
||
bold: true,
|
||
};
|
||
|
||
return (
|
||
<SectionWrapper
|
||
maxWidth="lg"
|
||
sx={{
|
||
mt: "25px",
|
||
mb: "70px",
|
||
}}
|
||
>
|
||
<DocumentsDialog />
|
||
<ComplexNavText text1="Настройки аккаунта" />
|
||
<Typography variant="h4" mt="20px">Настройки аккаунта</Typography>
|
||
<Box sx={{
|
||
mt: "40px",
|
||
mb: "40px",
|
||
backgroundColor: "white",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
borderRadius: "12px",
|
||
p: "20px",
|
||
gap: "40px",
|
||
boxShadow: cardShadow,
|
||
}}>
|
||
<Box sx={{
|
||
display: "flex",
|
||
gap: "31px",
|
||
justifyContent: "space-between",
|
||
flexDirection: upMd ? "row" : "column",
|
||
}}>
|
||
<Box sx={{
|
||
display: "grid",
|
||
gridAutoFlow: upSm ? "column" : "row",
|
||
gridTemplateRows: "repeat(4, auto)",
|
||
rowGap: "15px",
|
||
columnGap: "31px",
|
||
flexGrow: 1,
|
||
}}>
|
||
<InputTextfield
|
||
TextfieldProps={{
|
||
placeholder: "Имя",
|
||
value: fields?.name.value || "",
|
||
helperText: fields?.name.touched && fields.name.error,
|
||
error: fields?.name.touched && Boolean(fields.name.error),
|
||
}}
|
||
onChange={e => setSettingsField("name", e.target.value)}
|
||
id="name"
|
||
label="Имя"
|
||
{...textFieldProps}
|
||
/>
|
||
<InputTextfield
|
||
TextfieldProps={{
|
||
placeholder: "Фамилия",
|
||
value: fields?.surname.value || "",
|
||
helperText: fields?.surname.touched && fields.surname.error,
|
||
error: fields?.surname.touched && Boolean(fields.surname.error),
|
||
}}
|
||
onChange={e => setSettingsField("surname", e.target.value)}
|
||
id="surname"
|
||
label="Фамилия"
|
||
{...textFieldProps}
|
||
/>
|
||
<InputTextfield
|
||
TextfieldProps={{
|
||
placeholder: "Отчество",
|
||
value: fields?.middleName.value || "",
|
||
helperText: fields?.middleName.touched && fields.middleName.error,
|
||
error: fields?.middleName.touched && Boolean(fields.middleName.error),
|
||
}}
|
||
onChange={e => setSettingsField("middleName", e.target.value)}
|
||
id="middleName"
|
||
label="Отчество"
|
||
{...textFieldProps}
|
||
/>
|
||
<InputTextfield
|
||
TextfieldProps={{
|
||
placeholder: "ООО Фирма",
|
||
value: fields?.companyName.value || "",
|
||
helperText: fields?.companyName.touched && fields.companyName.error,
|
||
error: fields?.companyName.touched && Boolean(fields.companyName.error),
|
||
}}
|
||
onChange={e => setSettingsField("companyName", e.target.value)}
|
||
id="companyName"
|
||
label="Название компании"
|
||
{...textFieldProps}
|
||
/>
|
||
<InputTextfield
|
||
TextfieldProps={{
|
||
placeholder: "username@penahaub.com",
|
||
value: fields?.email.value || "",
|
||
helperText: fields?.email.touched && fields.email.error,
|
||
error: fields?.email.touched && Boolean(fields.email.error),
|
||
}}
|
||
onChange={e => setSettingsField("email", e.target.value)}
|
||
id="email"
|
||
label="E-mail"
|
||
{...textFieldProps}
|
||
/>
|
||
<InputTextfield
|
||
TextfieldProps={{
|
||
placeholder: "+7 900 000 00 00",
|
||
value: fields?.phoneNumber.value || "",
|
||
helperText: fields?.phoneNumber.touched && fields.phoneNumber.error,
|
||
error: fields?.phoneNumber.touched && Boolean(fields.phoneNumber.error),
|
||
}}
|
||
onChange={e => setSettingsField("phoneNumber", e.target.value)}
|
||
id="phoneNumber"
|
||
label="Телефон"
|
||
{...textFieldProps}
|
||
/>
|
||
<InputTextfield
|
||
TextfieldProps={{
|
||
placeholder: "Не менее 8 символов",
|
||
value: fields?.password.value || "",
|
||
helperText: fields?.password.touched && fields.password.error,
|
||
error: fields?.password.touched && Boolean(fields.password.error),
|
||
type: "password",
|
||
}}
|
||
onChange={e => setSettingsField("password", e.target.value)}
|
||
id="password"
|
||
label="Пароль"
|
||
{...textFieldProps}
|
||
/>
|
||
</Box>
|
||
<Box sx={{
|
||
maxWidth: "246px",
|
||
}}>
|
||
<Typography variant="p1">Статус</Typography>
|
||
<VerificationIndicator
|
||
verificationStatus={verificationStatus}
|
||
sx={{ mt: "16px" }}
|
||
/>
|
||
{verificationStatus === "notVerificated" &&
|
||
<>
|
||
<UnderlinedButtonWithIcon
|
||
icon={<UploadIcon />}
|
||
sx={{ mt: "55px" }}
|
||
ButtonProps={{
|
||
onClick: () => openDocumentsDialog("juridical"),
|
||
}}
|
||
>Загрузить документы для юр лиц</UnderlinedButtonWithIcon>
|
||
<UnderlinedButtonWithIcon
|
||
icon={<UploadIcon />}
|
||
sx={{ mt: "15px" }}
|
||
ButtonProps={{
|
||
onClick: () => openDocumentsDialog("nko"),
|
||
}}
|
||
>Загрузить документы для НКО</UnderlinedButtonWithIcon>
|
||
</>
|
||
}
|
||
{verificationStatus === "verificated" &&
|
||
<UnderlinedButtonWithIcon
|
||
icon={<EyeIcon />}
|
||
sx={{ mt: "55px" }}
|
||
ButtonProps={{
|
||
onClick: () => openDocumentsDialog(verificationType),
|
||
}}
|
||
>Посмотреть свою верификацию</UnderlinedButtonWithIcon>
|
||
}
|
||
</Box>
|
||
</Box>
|
||
<CustomButton
|
||
onClick={sendUserData}
|
||
variant="contained"
|
||
sx={{
|
||
width: "180px",
|
||
height: "44px",
|
||
alignSelf: "end",
|
||
backgroundColor: theme.palette.brightPurple.main,
|
||
textColor: "white",
|
||
}}
|
||
>
|
||
Сохранить
|
||
</CustomButton>
|
||
</Box>
|
||
</SectionWrapper>
|
||
);
|
||
}
|
||
|
||
const verificationStatusData: Record<VerificationStatus, { text: string; color: string; }> = {
|
||
"verificated": {
|
||
text: "Верификация пройдена",
|
||
color: "#0D9F00",
|
||
},
|
||
"waiting": {
|
||
text: "В ожидании верификации",
|
||
color: "#F18956",
|
||
},
|
||
"notVerificated": {
|
||
text: "Не верифицирован",
|
||
color: "#E02C2C",
|
||
},
|
||
};
|
||
|
||
function VerificationIndicator({ verificationStatus, sx }: {
|
||
verificationStatus: VerificationStatus;
|
||
sx?: SxProps<Theme>;
|
||
}) {
|
||
return (
|
||
<Box sx={{
|
||
py: "14px",
|
||
px: "8.5px",
|
||
borderWidth: "1px",
|
||
borderStyle: "solid",
|
||
color: verificationStatusData[verificationStatus].color,
|
||
borderColor: verificationStatusData[verificationStatus].color,
|
||
borderRadius: "8px",
|
||
textAlign: "center",
|
||
...sx,
|
||
}}>
|
||
<Typography lineHeight="100%">{verificationStatusData[verificationStatus].text}</Typography>
|
||
</Box>
|
||
);
|
||
} |