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