front-hub/src/pages/AccountSetup/AccountSetup.tsx

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";


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: `
                    0px 100px 309px rgba(210, 208, 225, 0.24),
                    0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                    0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066), 
                    0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                    0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                    0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)
                `,
            }}>
                <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>
    );
}