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

import { useEffect } from "react";
import {
    Box,
    Button,
    SxProps,
    Theme,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import InputTextfield from "@components/InputTextfield";
import PasswordInput from "@components/passwordInput";
import SectionWrapper from "@components/SectionWrapper";
import {
    openDocumentsDialog,
    sendUserData,
    setSettingsField,
    useUserStore,
} from "@root/stores/user";
import UnderlinedButtonWithIcon from "@root/components/UnderlinedButtonWithIcon";
import UploadIcon from "@root/components/icons/UploadIcon";
import DocumentsDialog from "./DocumentsDialog/DocumentsDialog";
import EyeIcon from "@root/components/icons/EyeIcon";
import { cardShadow } from "@root/utils/theme";
import { getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { VerificationStatus } from "@root/model/account";
import { verify } from "./helper";

export default function AccountSettings() {
    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 comment = useUserStore((state) => state.comment);
    const userId = useUserStore((state) => state.userId) ?? "";

    useEffect(() => {
        verify(userId);
    }, []);

    const textFieldProps = {
        gap: upMd ? "16px" : "10px",
        color: "#F2F3F7",
        bold: true,
    };

    const verificationStatusData: Record<
        VerificationStatus,
        { text: string; color: string; }
    > = {
        verificated: { text: "Верификация пройдена", color: "#0D9F00" },
        waiting: { text: "В ожидании верификации", color: "#F18956" },
        notVerificated: { text: "Не верифицирован", color: "#E02C2C" },
    };

    function handleSendDataClick() {
        sendUserData()
            .then(() => {
                enqueueSnackbar("Информация обновлена");
            })
            .catch((error) => {
                const message = getMessageFromFetchError(error);
                if (message) enqueueSnackbar(message);
            });
    }

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

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "25px",
                mb: "70px",
            }}
        >
            <DocumentsDialog />
            <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)",
                            gridAutoColumns: "1fr",
                            rowGap: "15px",
                            columnGap: "31px",
                            flexGrow: 1,
                        }}
                    >
                        <InputTextfield
                            TextfieldProps={{
                                placeholder: "Имя",
                                value: fields.firstname.value || "",
                                helperText: fields.firstname.touched && fields.firstname.error,
                                error:
                                    fields.firstname.touched && Boolean(fields.firstname.error),
                            }}
                            onChange={(e) => setSettingsField("firstname", e.target.value)}
                            id="firstname"
                            label="Имя"
                            {...textFieldProps}
                        />
                        <InputTextfield
                            TextfieldProps={{
                                placeholder: "Фамилия",
                                value: fields.secondname.value || "",
                                helperText:
                                    fields.secondname.touched && fields.secondname.error,
                                error:
                                    fields.secondname.touched && Boolean(fields.secondname.error),
                            }}
                            onChange={(e) => setSettingsField("secondname", e.target.value)}
                            id="secondname"
                            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.orgname.value || "",
                                helperText: fields.orgname.touched && fields.orgname.error,
                                error: fields.orgname.touched && Boolean(fields.orgname.error),
                            }}
                            onChange={(e) => setSettingsField("orgname", e.target.value)}
                            id="orgname"
                            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}
                        />
                        <PasswordInput
                            TextfieldProps={{
                                placeholder: "Не менее 8 символов",
                                value: fields.password.value || "",
                                helperText: fields.password.touched && fields.password.error,
                                error:
                                    fields.password.touched && Boolean(fields.password.error),
                                autoComplete: "new-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", p: "14px 7.5px" }}
                        />
                        {verificationStatus === VerificationStatus.NOT_VERIFICATED && (
                            <>
                                <UnderlinedButtonWithIcon
                                    icon={<UploadIcon />}
                                    sx={{ mt: "55px" }}
                                    ButtonProps={{
                                        onClick: () => openDocumentsDialog("juridical"),
                                    }}
                                >
                                    Загрузить документы для юр лиц
                                </UnderlinedButtonWithIcon>
                                <UnderlinedButtonWithIcon
                                    icon={<UploadIcon />}
                                    sx={{ mt: "15px" }}
                                    ButtonProps={{
                                        onClick: () => openDocumentsDialog("nko"),
                                    }}
                                >
                                    Загрузить документы для НКО
                                </UnderlinedButtonWithIcon>
                            </>
                        )}
                        {verificationStatus === VerificationStatus.VERIFICATED && (
                            <UnderlinedButtonWithIcon
                                icon={<EyeIcon />}
                                sx={{ mt: "55px" }}
                                ButtonProps={{
                                    onClick: () => openDocumentsDialog(verificationType),
                                }}
                            >
                                Посмотреть свою верификацию
                            </UnderlinedButtonWithIcon>
                        )}
                        {comment && <p>{comment}</p>}
                    </Box>
                </Box>
                <Button
                    variant="pena-contained-dark"
                    onClick={handleSendDataClick}
                    disabled={fields.hasError}
                    sx={{ alignSelf: "end" }}
                >Сохранить</Button>
            </Box>
        </SectionWrapper>
    );
}