PNSPS-frontend-MaterialUI/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js

// material-ui
import {
    Grid, Button, Typography,
    FormHelperText,
    Stack,
    IconButton
} from '@mui/material';
import MainCard from "components/MainCard";
import { useEffect, useState, lazy } from "react";
import * as yup from 'yup';

import { useFormik } from 'formik';
import * as FieldUtils from "utils/FieldUtils";
import * as HttpUtils from 'utils/HttpUtils';
import * as UrlUtils from "utils/ApiPathConst";
import * as ComboData from "utils/ComboData";
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { notifyActiveSuccess, notifyLockSuccess, notifySaveSuccess, notifyVerifySuccess } from 'utils/CommonFunction';
import { useIntl } from "react-intl";
import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
import { isGrantedAny } from "auth/utils";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const UserInformationCard_Individual = ({ formData, loadDataFun }) => {

    const intl = useIntl();
    const [currentUserData, setCurrentUserData] = useState(formData);
    const [editMode, setEditMode] = useState(false);
    const [locked, setLocked] = useState(false);
    const [onReady, setOnReady] = useState(false);
    const [errorMsg, setErrorMsg] = useState("");
    const [showId, setshowId] = useState(false);

    const handleClickShowId = () => {
        setshowId(!showId);
    };

    const handleMouseDownId = (event) => {
        event.preventDefault();
    };

    useEffect(() => {
        //if state data are ready and assign to different field
        // console.log(currentApplicationDetailData)
        if (Object.keys(currentUserData).length > 0) {
            setOnReady(true);
        }
    }, [currentUserData]);


    function getMaxErrStr(num, fieldname) {
        return intl.formatMessage({ id: 'noMoreThenNWords' }, { num: num, fieldname: fieldname ? intl.formatMessage({ id: fieldname }) + ": " : "" });
    }

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: currentUserData,
        validationSchema: yup.object().shape({
            enName: yup.string().max(40, getMaxErrStr(40)).when('chName', {
                is: (chName) => chName?false:true,
                then: yup.string().required(intl.formatMessage({ id: 'userRequireEnglishName' }))
            }).nullable(),
            chName: yup.string().max(6, getMaxErrStr(6)).nullable(),
            addressLine1: yup.string().max(40, getMaxErrStr(40)).required(intl.formatMessage({ id: 'validateAddressLine1' })),
            addressLine2: yup.string().max(40, getMaxErrStr(40)).nullable(),
            addressLine3: yup.string().max(40, getMaxErrStr(40)).nullable(),
            emailAddress: yup.string().email(intl.formatMessage({ id: 'validEmailFormat' })).max(255).required(intl.formatMessage({ id: 'requireEmail' })),
            identification: yup.string().min(7, intl.formatMessage({ id: 'requireIdDocNumber' })).required(intl.formatMessage({ id: 'requireIdDocNumber' })),
            checkDigit: yup.string().max(1, getMaxErrStr(1)).required(intl.formatMessage({ id: 'requiredNumberInQuote' })).nullable(),
            idDocType: yup.string().max(255, getMaxErrStr(255)).required(intl.formatMessage({ id: 'requireIdDocType' })),
            tel_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })).required(intl.formatMessage({ id: 'requireDialingCode' })),
            fax_countryCode: yup.string().min(3, intl.formatMessage({ id: 'require3Number' })),
            phoneNumber: yup.string().min(8, intl.formatMessage({ id: 'require8Number' })).required(intl.formatMessage({ id: 'requireContactNumber' })),
            faxNumber: yup.string().min(8, intl.formatMessage({ id: 'require8Number' })).nullable(),
        }),
        onSubmit: values => {
            if (values.country == null) {
                setErrorMsg(intl.formatMessage({ id: 'pleaseFillInCountry' }))
            } else {
                if (values.country.type == "hongKong" && values.district == null) {
                    setErrorMsg(intl.formatMessage({ id: 'pleaseFillInDistrict' }))
                } else {
                    HttpUtils.post({
                        url: UrlUtils.POST_IND_USER + "/" + formData.id,
                        params: {
                            prefix: values.prefix,
                            enName: values.enName,
                            chName: values.chName,
                            idDocType: values.idDocType,
                            mobileNumber: {
                                countryCode: values.tel_countryCode,
                                phoneNumber: values.phoneNumber
                            },
                            identification: values.identification,
                            checkDigit: values.checkDigit,
                            faxNo: {
                                countryCode: values.fax_countryCode,
                                faxNumber: values.faxNumber
                            },
                            emailAddress: values.emailAddress,
                            address: {
                                country: values.country.type,
                                district: values.district?.type,
                                addressLine1: values.addressLine1,
                                addressLine2: values.addressLine2,
                                addressLine3: values.addressLine3,
                            },
                            preferLocale: values.preferLocale.type
                        },
                        onSuccess: function () {
                            notifySaveSuccess();
                            loadDataFun();
                        }
                    });
                }
            }
        }
    });



    useEffect(() => {
        if (Object.keys(formData).length > 0) {
            setCurrentUserData(formData);
        }
    }, [formData]);

    useEffect(() => {
        setLocked(currentUserData.locked);
    }, [currentUserData]);

    const onEditClick = () => {
        setEditMode(true);
    };

    const onVerifiedClick = () => {
        HttpUtils.get({
            url: UrlUtils.GET_IND_USER_VERIFY + "/" + formData.id,
            onSuccess: function () {
                notifyVerifySuccess()
                loadDataFun();
            }
        });
    };

    const doLock = () => {
        HttpUtils.get({
            url: UrlUtils.GET_USER_LOCK + "/" + formData.id,
            onSuccess: function () {
                notifyLockSuccess()
                loadDataFun();
            }
        });
    };

    const doUnlock = () => {
        HttpUtils.get({
            url: UrlUtils.GET_USER_UNLOCK + "/" + formData.id,
            onSuccess: function () {
                notifyActiveSuccess()
                loadDataFun();
            }
        });
    };

    return (
        <MainCard elevation={0}
            border={false}
            content={false}
        >
            {!onReady ?
                <LoadingComponent />
                :
                <form onSubmit={formik.handleSubmit} style={{ padding: 12 }}>
                    {/*top button*/}
                    {
                        isGrantedAny("MAINTAIN_USER") ?
                            <Grid item xs={12} sm={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
                                <Grid container maxWidth justifyContent="flex-start">
                                    {editMode ?
                                        <>
                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                <Grid item sx={{ mr: 3 }}>
                                                    <Button
                                                        variant="contained"
                                                        onClick={loadDataFun}
                                                        color="cancel"
                                                    >
                                                        Reset & Back
                                                    </Button>
                                                </Grid>

                                                <Grid item sx={{ ml: 3, mr: 3 }}>
                                                    <Button
                                                        variant="contained"
                                                        type="submit"
                                                        color="success"
                                                    >
                                                        Save
                                                    </Button>
                                                </Grid>
                                            </ThemeProvider>
                                        </>
                                        :
                                        <>
                                            <Grid item sx={{ mr: 3 }}>
                                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                    <Button
                                                        variant="contained"
                                                        onClick={onEditClick}
                                                    >
                                                        Edit
                                                    </Button>
                                                </ThemeProvider>
                                            </Grid>
                                        </>
                                    }
                                </Grid>
                            </Grid>
                            : <></>
                    }

                    {/*end top button*/}
                    <Typography variant="h4" sx={{ mt: 3, mb: 2, borderBottom: "1px solid black" }}>
                        Individual User Details
                    </Typography>
                    <Grid item xs={12} sm={12} md={12} lg={12}>
                        <Grid container>
                            <Grid item xs={12}>
                                <FormHelperText error id="helper-text-address1-signup">
                                    <Typography variant="errorMessage1">
                                        {errorMsg}
                                    </Typography>
                                </FormHelperText>
                            </Grid>
                            <Grid item xs={12} sm={12} md={12} lg={4} >
                                {FieldUtils.getTextField({
                                    label: "Username:",
                                    valueName: "username",
                                    disabled: true,
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getTextField({
                                    label: "English Name:",
                                    valueName: "enName",
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getTextField({
                                    label: "Created Date:",
                                    valueName: "createDate",
                                    disabled: true,
                                    form: formik
                                })}
                            </Grid>
                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getTextField({
                                    label: "Prefix:",
                                    valueName: "prefix",
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getTextField({
                                    label: "Chinese Name:",
                                    valueName: "chName",
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getTextField({
                                    label: "Last Updated:",
                                    valueName: "modifieDate",
                                    disabled: true,
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getComboField({
                                    label: "ID Type:",
                                    valueName: "idDocType",
                                    disabled: (!editMode),
                                    dataList: ComboData.idDocType,
                                    filterOptions: (options) => options,
                                    getOptionLabel: (item) => item ? typeof item === 'string' ? item : (item["type"] ? item["type"] + "-" + item["label"] : "") : "",
                                    onInputChange: (event, newValue, setInputValue) => {
                                        if (newValue == null) {
                                            setInputValue("");
                                        }
                                        let _val = newValue.split("-");
                                        if (_val[0]) {
                                            setInputValue(_val[0]);
                                        }
                                    },
                                    onChange: (event, newValue) => {
                                        if (newValue == null) {
                                            formik.setFieldValue("idDocType", "");
                                            return;
                                        }
                                        formik.setFieldValue("idDocType", newValue.type);
                                        if (newValue.type !== "HKID") {
                                            formik.setFieldValue("checkDigit", "")
                                        }
                                    },
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getPhoneField({
                                    label: "Contact Tel:",
                                    valueName: {
                                        code: "tel_countryCode",
                                        num: "phoneNumber"
                                    },
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography variant="h5">Verified:</Typography>
                                    </Grid>
                                    {
                                        !isGrantedAny("MAINTAIN_USER") || currentUserData.verifiedBy || editMode ?
                                            <Grid item xs={12} sm={12} md={6} lg={6} sx={{ mb: 2 }}>
                                                {FieldUtils.initField({
                                                    valueName: "verifiedStatus",
                                                    disabled: true,
                                                    form: formik,
                                                })}
                                            </Grid>
                                            :
                                            <>
                                                <Grid item xs={8} sm={8} md={6} lg={4} sx={{ mb: 2 }}>
                                                    {FieldUtils.initField({
                                                        valueName: "verifiedStatus",
                                                        disabled: true,
                                                        form: formik,
                                                    })}
                                                </Grid>
                                                <Grid item xs={2} sm={2} md={2} lg={2} sx={{ ml: 2, mb: 2 }}>
                                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                        <Button
                                                            variant="contained"
                                                            onClick={onVerifiedClick}
                                                        >
                                                            Verify
                                                        </Button>
                                                    </ThemeProvider>
                                                </Grid>
                                            </>
                                    }

                                </Grid>
                            </Grid>

                            <Grid xs={12} sm={12} md={12} lg={4}>
                                <Grid container alignItems={"center"} sx={{ mb: 2 }}>
                                    <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography variant="h5">ID No.:</Typography>
                                    </Grid>

                                    <Grid item xs={12} sm={12} md={9} lg={6}>
                                        <Grid container>
                                            {formik.values.idDocType === "HKID" ?
                                                editMode ?
                                                    <>
                                                        <Grid item xs={6} sm={6} md={6} lg={7.5} sx={{ mr: 1 }}>
                                                            {FieldUtils.initField({
                                                                valueName: "identification",
                                                                disabled: (!editMode),
                                                                form: formik,
                                                                placeholder: intl.formatMessage({ id: 'idDocNumber' }),
                                                                inputProps: {
                                                                    maxLength: 7,
                                                                    onKeyDown: (e) => {
                                                                        if (e.key === 'Enter') {
                                                                            e.preventDefault();
                                                                        }
                                                                    },
                                                                }
                                                            })}

                                                        </Grid>
                                                        <Grid item xs={2} sm={2} md={2} lg={2} style={{ minWidth: 40 }}>
                                                            {FieldUtils.initField({
                                                                valueName: "checkDigit",
                                                                disabled: (!editMode),
                                                                form: formik,
                                                            })}
                                                        </Grid>
                                                    </>
                                                    :
                                                    <Stack direction="row">
                                                        <Typography variant="h5" mt={1}>
                                                            {formik.values.identification.slice(0, 4)}
                                                        </Typography>
                                                        <Typography variant="h5" mt={1}>
                                                            {showId ? formik.values.identification.slice(4) : "****"}{showId ? '(' + formik.values.checkDigit + ')' : null}
                                                        </Typography>
                                                        <IconButton
                                                            aria-label="toggle id visibility"
                                                            onClick={handleClickShowId}
                                                            onMouseDown={handleMouseDownId}
                                                            edge="end"
                                                            size="large"
                                                        >
                                                            {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                        </IconButton>
                                                    </Stack>
                                                :
                                                editMode ?
                                                    <Grid item xs={10} sm={4} md={4} lg={10}>
                                                        {FieldUtils.initField({
                                                            valueName: "identification",
                                                            disabled: (!editMode),
                                                            form: formik
                                                        })}
                                                    </Grid>
                                                    :
                                                    <Stack direction="row">
                                                        <Typography variant="h5" mt={1}>
                                                            {formik.values.identification.slice(0, 4)}
                                                        </Typography>
                                                        <Typography variant="h5" mt={1}>
                                                            {showId ? formik.values.identification.slice(4) : "****"}
                                                        </Typography>
                                                        <IconButton
                                                            aria-label="toggle id visibility"
                                                            onClick={handleClickShowId}
                                                            onMouseDown={handleMouseDownId}
                                                            edge="end"
                                                            size="large"
                                                        >
                                                            {showId ? <EyeOutlined /> : <EyeInvisibleOutlined />}
                                                        </IconButton>
                                                    </Stack>
                                            }
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getPhoneField({
                                    label: "Fax No.:",
                                    valueName: {
                                        code: "fax_countryCode",
                                        num: "faxNumber"
                                    },
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getTextField({
                                    label: "Last Login:",
                                    valueName: "lastLoginDate",
                                    disabled: true,
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getComboField({
                                    label: "Country:",
                                    valueName: "country",
                                    getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                    dataList: ComboData.country,
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getTextField({
                                    label: "Email:",
                                    valueName: "emailAddress",
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>


                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                <Grid container alignItems={"center"} sx={{ mb: 2 }}>
                                    <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                        <Typography variant="h5">Status:</Typography>
                                    </Grid>

                                    {
                                        !isGrantedAny("MAINTAIN_USER") || editMode ?
                                            <Grid item xs={8} sm={8} md={6} lg={6}>
                                                {FieldUtils.initField({
                                                    valueName: "status",
                                                    disabled: true,
                                                    form: formik,
                                                })}
                                            </Grid>
                                            :
                                            <>
                                                <Grid item xs={8} sm={8} md={6} lg={4}>
                                                    {FieldUtils.initField({
                                                        valueName: "status",
                                                        disabled: true,
                                                        form: formik,
                                                    })}
                                                </Grid>
                                                {
                                                    locked ?
                                                        <Grid item xs={2} sm={2} md={2} lg={2} sx={{ ml: 2 }}>
                                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                                <Button
                                                                    variant="contained"
                                                                    color="success"
                                                                    onClick={doUnlock}
                                                                >
                                                                    Active
                                                                </Button>
                                                            </ThemeProvider>
                                                        </Grid>
                                                        :
                                                        <Grid item xs={2} sm={2} md={2} lg={2} sx={{ ml: 2 }}>
                                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                                <Button
                                                                    variant="contained"
                                                                    color="error"
                                                                    onClick={doLock}
                                                                >
                                                                    Lock
                                                                </Button>
                                                            </ThemeProvider>
                                                        </Grid>
                                                }
                                            </>
                                    }
                                </Grid>
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getComboField({
                                    label: "District:",
                                    valueName: "district",
                                    dataList: ComboData.district,
                                    getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                {FieldUtils.getComboField({
                                    label: intl.formatMessage({ id: 'language' }) + ":",
                                    valueName: "preferLocale",
                                    dataList: ComboData.Locale,
                                    getOptionLabel: (option) => option.label ? option.label : "",
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>

                            <Grid item xs={12} sm={12} md={12} lg={12}>
                                {FieldUtils.getAddressField({
                                    label: "Address:",
                                    valueName: ["addressLine1", "addressLine2", "addressLine3"],
                                    disabled: (!editMode),
                                    form: formik
                                })}
                            </Grid>
                        </Grid>
                    </Grid>
                </form>
            }
        </MainCard>
    );
};

export default UserInformationCard_Individual;