PNSPS-frontend-MaterialUI/src/pages/Organization/DetailPage/OrganizationCard.js

// material-ui
import {
    Grid, Button, Checkbox, FormControlLabel, Typography,
    Dialog, DialogTitle, DialogContent, DialogActions,
    FormHelperText, TextField,
} from '@mui/material';
// import { FormControlLabel } from '@material-ui/core';
import MainCard from "components/MainCard";
import * as React from "react";
import { useFormik } from 'formik';
import { useForm } from "react-hook-form";
import * as yup from 'yup';
import { useEffect, useState, lazy } from "react";
import * as DateUtils from 'utils/DateUtils';
import * as HttpUtils from 'utils/HttpUtils';
import * as UrlUtils from "utils/ApiPathConst";
import * as FieldUtils from "utils/FieldUtils";
import * as ComboData from "utils/ComboData";
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
import Loadable from 'components/Loadable';
import { notifySaveSuccess } from 'utils/CommonFunction';
import { useIntl } from "react-intl";
import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { isGrantedAny } from "auth/utils";

import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";
import { DemoItem } from "@mui/x-date-pickers/internals/demo";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
    const intl = useIntl();
    const [creditorConfirmPopUp, setCreditorConfirmPopUp] = React.useState(false);
    const [nonCreditorConfirmPopUp, setNonCreditorConfirmPopUp] = React.useState(false);

    const [currentUserData, setCurrentUserData] = useState({});
    const [editMode, setEditMode] = useState(false);
    const [createMode, setCreateMode] = useState(false);
    const [onReady, setOnReady] = useState(false);
    const [errorMsg, setErrorMsg] = useState("");
    const [minDate] = React.useState(new Date().setDate(new Date().getDate() + 1));
    const [fromDate, setFromDate] = React.useState(null);
    const [currentFromDate, setCurrentFromDate] = React.useState(null);
    const [fromDateValue, setFromDateValue] = React.useState(null);
    const { register, handleSubmit, reset } = useForm()

    React.useEffect(() => {
        setFromDateValue(fromDate);
    }, [fromDate]);

    useEffect(() => {
        //if state data are ready and assign to different field
        // console.log(currentApplicationDetailData)
        if (Object.keys(currentUserData).length > 0) {
            console.log(currentUserData)
            if (DateUtils.dateValue(currentUserData.brExpiryDate) > DateUtils.dateValue(minDate)) {
                setFromDate(currentUserData.brExpiryDate);
            } else {
                setCurrentFromDate(currentUserData.brExpiryDate);
                // setErrorMsg("Please select a date after today.")
            }

            setOnReady(true);
        }
    }, [currentUserData]);

    function displayErrorMsg(errorMsg) {
        return <Typography variant="errorMessage1">{errorMsg}</Typography>
    }

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

    function getRequiredErrStr(fieldname) {
        return displayErrorMsg(intl.formatMessage({ id: 'require' }, { fieldname: fieldname ? intl.formatMessage({ id: fieldname }) : "" }));
    }

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: currentUserData,
        validationSchema: yup.object().shape({
            enCompanyName: yup.string().max(255, getMaxErrStr(255)).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
            chCompanyName: yup.string().max(255, displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))).nullable(),
            orgShortName: yup.string().max(24, getMaxErrStr(24)).required(getRequiredErrStr("orgShortName")),
            addressLine1: yup.string().max(40, getMaxErrStr(40)).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
            addressLine2: yup.string().max(40, getMaxErrStr(40)),
            addressLine3: yup.string().max(40, getMaxErrStr(40)),
            contactPerson: yup.string().max(60, getMaxErrStr(60)).required(getRequiredErrStr("contactPerson")),
            fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))).nullable(),
            tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
            phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requiredValidNumber' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
            faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'require8Number' }))).nullable(),
            brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }))),
            brNo: yup.string().required(displayErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertNumber' }))).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(intl.formatMessage({ id: 'pleaseFillInValidBusinessRegCertNumber' }))), function (value) {
                var brNo_pattern = /[0-9]{8}/
                if (value !== undefined) {
                    if (value.match(brNo_pattern)) {
                        return true
                    } else {
                        return false
                    }
                }
            }),
        }),
        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 {
                    let sentDateFrom = "";
                    if (fromDateValue == null) {
                        setErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }))
                    } else {
                        sentDateFrom = DateUtils.dateValue(fromDateValue)
                        HttpUtils.post({
                            url: UrlUtils.POST_ORG_SAVE_PATH,
                            params: {
                                id: id > 0 ? id : null,
                                enCompanyName: values.enCompanyName,
                                chCompanyName: values.chCompanyName,
                                orgShortName: values.orgShortName === "N/A" ? "" : values.orgShortName,
                                brNo: values.brNo,
                                // brExpiryDate: values.brExpiryDate,
                                brExpiryDate: sentDateFrom,
                                enCompanyNameTemp: values.enCompanyNameTemp,
                                chCompanyNameTemp: values.chCompanyNameTemp,
                                brExpiryDateTemp: values.brExpiryDateTemp,
                                contactPerson: values.contactPerson,
                                contactTel: {
                                    countryCode: values.tel_countryCode,
                                    phoneNumber: values.phoneNumber
                                },
                                faxNo: {
                                    countryCode: values.fax_countryCode,
                                    faxNumber: values.faxNumber
                                },
                                addressTemp: {
                                    country: values.country.type,
                                    district: values.district?.type,
                                    addressLine1: values.addressLine1,
                                    addressLine2: values.addressLine2,
                                    addressLine3: values.addressLine3,
                                },
                                creditor: values.creditor,
                            },
                            onSuccess: function () {
                                notifySaveSuccess()
                                loadDataFun();
                                setEditMode(false);
                            }
                        });
                    }

                }
            }
        }
    });

    useEffect(() => {
        setEditModeFun(editMode);
    }, [editMode]);

    useEffect(() => {
        if (Object.keys(userData).length > 0) {
            setCreateMode(id <= 0);
            setEditMode(id <= 0);
            setCurrentUserData(userData);
        }
    }, [userData]);

    // useEffect(() => {
    //     if (Object.keys(userData).length > 0) {
    //         if(userData.creditor === undefined||userData.creditor === null){
    //             userData.creditor = false
    //         }
    //         setCurrentUserData(userData);
    //     }
    // }, []);

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

    const onSubmit = (data) => {
        let sentOrgShortName = "";
        if (data.orgShortName != null && data.orgShortName != "" && data.orgShortName != "N/A") {
            sentOrgShortName = data.orgShortName
            if (sentOrgShortName.length <= 24) {
                const temp = {
                    orgShortName: sentOrgShortName,
                };
                markAsCreditor(temp);
            } else {
                alert("Organisation Short Name must not exceed 24 characters.")
            }
        } else {
            alert("Please enter Organisation Short Name for Demand Note.")
        }

    };

    function resetForm() {
        reset();
    }

    const markAsCreditor = (temp) => {
        setCreditorConfirmPopUp(false);
        HttpUtils.post({
            url: UrlUtils.GET_ORG_MARK_AS_CREDITOR + "/" + id,
            params: temp,
            onSuccess: () => {
                resetForm();
                loadDataFun();
            }
        });
    }

    const markAsNonCreditor = () => {
        setNonCreditorConfirmPopUp(false);
        HttpUtils.get({
            url: UrlUtils.GET_ORG_MARK_AS_NON_CREDITOR + "/" + id,
            onSuccess: () => {
                loadDataFun();
            }
        });
    }

    const sendDn_terminationOfCredit = () => {
        setNonCreditorConfirmPopUp(false);
        HttpUtils.get({
            url: UrlUtils.GET_SEND_TERMINATION_OF_CREDIT + "/" + id,
            onSuccess: () => {
                loadDataFun();
            }
        });
    }

    return (
        <MainCard elevation={0}
            border={false}
            content={false}
        >

            <form onSubmit={formik.handleSubmit} style={{ padding: 24 }}>

                {/*top*/}
                {isGrantedAny("MAINTAIN_ORG") ?
                    <Grid item s={12} md={12} lg={12} sx={{ mb: 3 }} alignItems={"start"} justifyContent="center">
                        <Grid container maxWidth justifyContent="flex-start">

                            {editMode ?
                                <>
                                    {createMode ?
                                        <>
                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                <Grid item sx={{ ml: 0, mr: 3 }}>
                                                    <Button
                                                        variant="contained"
                                                        type="submit"
                                                        color="success"
                                                    >
                                                        Create
                                                    </Button>
                                                </Grid>
                                            </ThemeProvider>
                                        </> :
                                        <>
                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                <Grid item sx={{ ml: 0, 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={{ ml: 0, mr: 3 }}>
                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                            <Button
                                                variant="contained"
                                                onClick={onEditClick}
                                                color="success"
                                            >
                                                Edit
                                            </Button>
                                        </ThemeProvider>
                                    </Grid>

                                    {
                                        currentUserData.creditor ?
                                            <Grid item sx={{ ml: 3, mr: 3 }}>
                                                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                    <Button
                                                        variant="contained"
                                                        color="error"
                                                        onClick={() => setNonCreditorConfirmPopUp(true)}
                                                    >
                                                        Mark as Non-Credit Client
                                                    </Button>
                                                </ThemeProvider>
                                            </Grid>
                                            :
                                            <>
                                                <Grid item sx={{ ml: 3, mr: 3 }}>
                                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                        <Button
                                                            variant="contained"
                                                            color="orange"
                                                            onClick={() => setCreditorConfirmPopUp(true)}
                                                        >
                                                            Mark as Credit Client
                                                        </Button>
                                                    </ThemeProvider>
                                                </Grid>
                                                <Grid item sx={{ ml: 3, mr: 3 }}>
                                                    <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                        <Button
                                                            variant="contained"
                                                            color="primary"
                                                            onClick={() => sendDn_terminationOfCredit(true)}
                                                        >
                                                           Send &quot;Termination of Credit&quot; Email
                                                        </Button>
                                                    </ThemeProvider>
                                                </Grid>
                                            </>
                                    }
                                </>
                            }
                        </Grid>
                    </Grid>
                    : <></>
                }

                {/*top*/}

                {!onReady ?
                    <LoadingComponent />
                    :
                    <Grid container spacing={1}>
                        <Grid item xs={12}>
                            <Typography variant="h4" sx={{ mb: 2, mr: 3, borderBottom: "1px solid black" }}>
                                Organisation Details
                            </Typography>
                        </Grid>
                        <Grid item xs={12}>
                            <FormHelperText error id="helper-text-address1-signup">
                                <Typography variant="errorMessage1">
                                    {errorMsg}
                                </Typography>
                            </FormHelperText>
                        </Grid>
                        <Grid item xs={12} lg={4} >
                            {FieldUtils.getTextField({
                                label: FieldUtils.notNullFieldLabel("BR No.:"),
                                valueName: "brNo",
                                disabled: (!editMode && !createMode),
                                form: formik
                            })}
                        </Grid>

                        <Grid item xs={12} lg={4} >
                            <FormControlLabel
                                control={<Checkbox checked={formik.values.creditor} />}
                                label="is Credit Client"
                                name="creditor"
                                onChange={() => {
                                    formik.setFieldValue("creditor", !formik.values.creditor);
                                }}
                                disabled={true}
                            //disabled={!editMode && !createMode}
                            />
                        </Grid>

                        <Grid item xs={12} lg={4} ></Grid>

                        <Grid item xs={12} lg={4} >
                            {FieldUtils.getTextField({
                                label: FieldUtils.notNullFieldLabel("Name (Eng):"),
                                valueName: "enCompanyName",
                                disabled: (!editMode && !createMode),
                                form: formik
                            })}
                        </Grid>

                        <Grid item xs={12} lg={4} >
                            {FieldUtils.getTextField({
                                label: "Name (Ch):",
                                valueName: "chCompanyName",
                                disabled: (!editMode && !createMode),
                                form: formik
                            })}
                        </Grid>

                        <Grid item xs={12} lg={4} >
                            <Grid container alignItems={"center"}>
                                <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                    <Typography variant="pnspsFormParagraphBold">{FieldUtils.notNullFieldLabel("Expiry Date:")}</Typography>
                                </Grid>
                                <Grid item xs={12} md={6} lg={6}>
                                    {(!editMode && !createMode) ?
                                        <TextField
                                            fullWidth
                                            id="currentExDate"
                                            // error={(fromDate===null)}
                                            // type="date"
                                            name="currentExDate"
                                            value={fromDate != null ? DateUtils.dateStr(fromDate) : DateUtils.dateStr(currentFromDate)}
                                            disabled={true}
                                        /> :
                                        <LocalizationProvider dateAdapter={AdapterDayjs}>
                                            <DemoItem components={['DatePicker']}>
                                                <DatePicker
                                                    id="brExpiryDate"
                                                    name="brExpiryDate"
                                                    // error={fromDate===null}
                                                    slotProps={{
                                                        field: { readOnly: true, },
                                                        // textField: {
                                                        //     helperText:fromDate == null ? intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }):""
                                                        // },
                                                    }}
                                                    format="DD/MM/YYYY"
                                                    // label={"Submit Date (From)"}
                                                    value={fromDate == null ? null : dayjs(fromDate)}
                                                    minDate={minDate == null ? null : dayjs(minDate)}
                                                    disabled={(!editMode && !createMode)}
                                                    onChange={(newValue) => {
                                                        // console.log(newValue)
                                                        // setErrorMsg("")
                                                        if (DateUtils.dateValue(newValue) > DateUtils.dateValue(new Date())) {
                                                            setFromDate(newValue);
                                                        } else {
                                                            // setErrorMsg("Please select a date after today.")
                                                        }
                                                    }}
                                                />
                                            </DemoItem >
                                        </LocalizationProvider>
                                    }
                                </Grid>
                                {
                                    fromDate == null ?
                                        (!editMode && !createMode) ?
                                            // <FormHelperText error id="helper-text-date">
                                            //     Please select a date after today.
                                            // </FormHelperText>
                                            null
                                            :
                                            <FormHelperText error id="helper-text-date">
                                                {intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' })}
                                            </FormHelperText>
                                        :
                                        null

                                }
                            </Grid>

                        </Grid>

                        <Grid item xs={12} lg={4} >
                            {FieldUtils.getTextField({
                                label: FieldUtils.notNullFieldLabel("Contact Person:"),
                                valueName: "contactPerson",
                                disabled: (!editMode && !createMode),
                                form: formik
                            })}
                        </Grid>

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

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

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

                        <Grid item xs={12} lg={4} >
                            {FieldUtils.getComboField({
                                label: FieldUtils.notNullFieldLabel("District:"),
                                valueName: "district",
                                disabled: (!editMode && !createMode),
                                dataList: ComboData.district,
                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                form: formik
                            })}
                        </Grid>
                        {
                            currentUserData.creditor ?
                                <Grid item xs={12} lg={4} >
                                    {FieldUtils.getTextField({
                                        label: FieldUtils.notNullFieldLabel("Org. Short Name:"),
                                        valueName: "orgShortName",
                                        disabled: (!editMode && !createMode),
                                        form: formik
                                    })}
                                </Grid>
                                :
                                null
                        }


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

                        <Grid item lg={12} ></Grid>

                    </Grid>
                }
            </form>
            <div>
                <Dialog
                    open={creditorConfirmPopUp}
                    onClose={() => setCreditorConfirmPopUp(false)}
                    PaperProps={{
                        sx: {
                            minWidth: '40vw',
                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                        }
                    }}
                >
                    <form onSubmit={handleSubmit(onSubmit)}>
                        <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                        <DialogContent style={{ display: 'flex', }}>
                            <Grid container direction="column">
                                <Grid item>
                                    <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Credit Client?</Typography>
                                </Grid>
                                <Grid item>
                                    <Typography variant="h6" style={{ padding: '16px' }}>Please Enter Organisation Short Name for Credit Client (Used for Demand Note)</Typography>
                                </Grid>
                                <Grid item sx={{ padding: '16px' }}>
                                    <TextField
                                        fullWidth
                                        {...register("orgShortName")}
                                        id='orgShortName'
                                        label="Organisation Short Name"
                                        defaultValue={currentUserData.orgShortName != "N/A" ? currentUserData.orgShortName : ""}
                                        InputLabelProps={{
                                            shrink: true
                                        }}
                                    />
                                </Grid>
                            </Grid>

                        </DialogContent>
                        <DialogActions>
                            <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                            <Button type="submit"><Typography variant="h5">Confirm</Typography></Button>
                            {/* <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button> */}
                        </DialogActions>
                    </form>
                </Dialog>
            </div>
            <div>
                <Dialog
                    open={nonCreditorConfirmPopUp}
                    onClose={() => setNonCreditorConfirmPopUp(false)}
                    PaperProps={{
                        sx: {
                            minWidth: '40vw',
                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                        }
                    }}
                >
                    <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Credit Client?</Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                        <Button onClick={() => markAsNonCreditor()}><Typography variant="h5">Confirm</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
        </MainCard>
    );
};

export default OrganizationCard;