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 UserFields from "./UserFields";
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";
import { withErrorBoundary } from "react-error-boundary";
import { handleComponentError } from "@root/utils/handleComponentError";

function AccountSettings() {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const upSm = useMediaQuery(theme.breakpoints.up("sm"));
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
    const isMobile = useMediaQuery(theme.breakpoints.down(600));

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

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

    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: "25px",
                mb: "70px",
                px: isTablet ? (isMobile ? "18px" : "40px") : "20px",
            }}
        >
            <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",
                    }}
                >
                    <UserFields/>
                    <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>
    );
}

export default withErrorBoundary(AccountSettings, {
    fallback: <Typography mt="8px" textAlign="center">Ошибка при отображении настроек аккаунта</Typography>,
    onError: handleComponentError,
})

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