PNSPS-frontend-MaterialUI/src/pages/Proof/Reply_Public/ProofForm.js

// material-ui
import {
    Dialog, DialogTitle, DialogContent, DialogActions,
    Typography,
    Grid,
    Stack,
    TextField,
    FormLabel,
    Button,
    Checkbox,
    RadioGroup, Radio,
    FormControlLabel
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as HttpUtils from "utils/HttpUtils";
import FileList from "components/FileList"
import MainCard from "components/MainCard";
import * as React from "react";
import * as yup from 'yup';
import { useParams } from "react-router-dom";
import { useFormik } from 'formik';
import { useNavigate } from "react-router-dom";
import * as DateUtils from "utils/DateUtils"
import Loadable from 'components/Loadable';
import { notifyActionSuccess } from 'utils/CommonFunction';
import { PNSPS_BUTTON_THEME } from "themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { FormattedMessage, useIntl } from "react-intl";
import { isDummyLoggedIn } from "utils/Utils"

const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
//import * as ProofStatus from "utils/statusUtils/ProofStatus";

// ==============================|| DASHBOARD - DEFAULT ||============================== //


const FormPanel = ({ formData }) => {
    const intl = useIntl();
    const { locale } = intl;
    const [data, setData] = React.useState({});
    const [paymentMethod, set_paymentMethod] = React.useState("");
    const [attachments, setAttachments] = React.useState([]);

    const [actionValue, setActionValue] = React.useState(true);

    const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
    const [warningText, setWarningText] = React.useState("");

    const navigate = useNavigate()
    const params = useParams();

    const tabelStyle = {
        border: "2px solid gray",
        borderCollapse: "collapse",
        padding: "right"
    }


    React.useEffect(() => {
        if (formData) {
            setData(formData);
            if (isDummyLoggedIn()) {
                set_paymentMethod("demandNote")
            }
        }
    }, [formData]);

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: data,
        validationSchema: yup.object().shape({
            vaild: yup.string().max(255, intl.formatMessage({ id: 'requireLoginPassword' })).required(intl.formatMessage({ id: 'requireLoginPassword' })),
        }),
        onSubmit: values => {
            if (!isDummyLoggedIn()){
                if (isOverTime()) {
                    setWarningText(intl.formatMessage({ id: 'MSG.proofOutOfTime' }));
                    setIsWarningPopUp(true);
                    return;
                }
            }
            let pm = paymentMethod;
            if (pm == "demandNote") {
                pm = isOverDnReviseDeadline() ? "" : pm;
            } else if (pm == "office") {
                pm = isOverNpgoReviseDeadline() ? "" : pm;
            }

            if (actionValue == false && isOverReviseDeadline()) {
                setWarningText(intl.formatMessage({ id: 'MSG.overReviseDeadline' }));
                setIsWarningPopUp(true);
                return;
            }
            else if (formData.creditor == false && pm == "") {
                setWarningText(intl.formatMessage({ id: 'MSG.plzSelectPaymentMethod' }));
                setIsWarningPopUp(true);
                return;
            }

            if (!actionValue) {
                if (!attachments || attachments.length <= 0) {
                    setWarningText(intl.formatMessage({ id: 'requireFile' }));
                    setIsWarningPopUp(true);
                    return;
                }
            }
            // console.log(values);
            HttpUtils.postWithFiles({
                url: UrlUtils.REPLY_PROOF,
                params: {
                    id: data.id,
                    action: actionValue,
                    vaild: values.vaild,
                    paymentMethod: pm
                },
                files: attachments ? attachments : [],
                onSuccess: function (responseData) {
                    if (responseData.msg) {
                        setWarningText(intl.formatMessage({ id: responseData.msg }));
                        setIsWarningPopUp(true);
                        return;
                    }
                    if (responseData.id == params.id) {
                        notifyActionSuccess(intl.formatMessage({ id: "submitted" }))
                        navigate("/proof/pay/" + params.id);
                    } else {
                        navigate("/proof/search");
                    }
                },
                onFail: function (response) {
                    setWarningText(intl.formatMessage({ id: 'actionFail' }));
                    setIsWarningPopUp(true);
                    console.log(response);
                },
                onError: function (error) {
                    setWarningText(intl.formatMessage({ id: 'actionFail' }));
                    setIsWarningPopUp(true);
                    console.log(error);
                }
            });
        }
    });

    const readFile = (event) => {
        let file = event.target.files[0];
        if (file) {
            if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) {
                setWarningText(intl.formatMessage({ id: 'requireValidFileWithPdfFormat' }));
                setIsWarningPopUp(true);
                document.getElementById("uploadFileBtn").value = "";
                return;
            }
            if (file.size >= (10 * 1024 * 1034)) {
                setWarningText(intl.formatMessage({ id: 'fileSizeWarning' }));
                setIsWarningPopUp(true);
                return;
            }

            file['id'] = attachments.length;
            setAttachments([
                ...attachments,
                file
            ]);
            document.getElementById("uploadFileBtn").value = "";
        }
    }

    const isOverTime = () => {
        let proofPaymentDeadline = DateUtils.convertToDate(formData?.proofPaymentDeadline);
        if (!proofPaymentDeadline) return true;
        let current = new Date();
        return current.getTime() > proofPaymentDeadline;
    }

    const isOverReviseDeadline = () => {
        // if (paymentMethod == "demandNote") return isOverDnReviseDeadline();
        // if (paymentMethod == "office") return isOverNpgoReviseDeadline();
        //online payment
        let reviseDeadline = DateUtils.convertToDate(formData?.reviseDeadline);
        // reviseDeadline?.setTime(reviseDeadline?.getTime() + (14 * 60 * 60 * 1000));// 14:00
        if (!reviseDeadline) return true;
        let current = new Date();
        return current.getTime() > reviseDeadline;
    }

    const isOverDnReviseDeadline = () => {
        let reviseDeadline = DateUtils.convertToDate(formData?.closingDateOff);
        reviseDeadline?.setTime(reviseDeadline?.getTime() + (17 * 60 * 60 * 1000));// 17:00
        if (!reviseDeadline) return true;
        let current = new Date();
        return current.getTime() > reviseDeadline;
    }

    const isOverNpgoReviseDeadline = () => {
        let reviseDeadline = DateUtils.convertToDate(formData?.closingDate);
        reviseDeadline?.setTime(reviseDeadline?.getTime() + (12 * 60 * 60 * 1000));// 12:00
        if (!reviseDeadline) return true;
        let current = new Date();
        return current.getTime() > reviseDeadline;
    }




    return (
        <MainCard xs={12} sm={12} md={12} lg={12}
            border={false}
            content={false}>

            <Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                <FormattedMessage id="publicNoticePaymentProofComment" />
            </Typography>

            <form onSubmit={formik.handleSubmit}>

                {
                    formik.values.replyDate ?
                        <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }}>
                            <Grid item xs={12} sm={12} md={12} lg={8} textAlign="left">
                                <Typography variant="h5">
                                    <FormattedMessage id="proofReplyDate" /> :&nbsp;
                                    {
                                        locale === 'en' ?
                                            DateUtils.dateValue(formik.values.replyDate)
                                            :
                                            DateUtils.datetimeStr_Cht(formik.values.replyDate)
                                    }
                                </Typography>
                            </Grid>
                            <Grid item xs={12} md={12} textAlign="left">
                                <Typography variant="h5">
                                    <FormattedMessage id="proofReply" /> : {formik.values.action ?
                                        (<span style={{ color: 'green' }}>
                                            <FormattedMessage id="proofErrorFree" />
                                        </span>)
                                        :
                                        (<span style={{ color: 'red' }}>
                                            <FormattedMessage id="proofWithError" />
                                        </span>)}
                                </Typography>
                            </Grid>
                            {/* <Grid item xs={12} md={12} textAlign="left">
                                <Typography variant="h5">
                                    <FormattedMessage id="proofReply" /> :&nbsp;
                                    <span style={{ color: 'green' }}>
                                        {
                                        locale === 'en' ? 
                                            ProofStatus.getStatusText_Eng(formik.values).text
                                            : 
                                            ProofStatus.getStatusText_Cht(formik.values).text
                                        }
                                    </span>
                                </Typography>
                            </Grid> */}
                            {
                                formik.values.action ?
                                    null
                                    :
                                    <Grid item xs={12} md={12} textAlign="left" sx={{ width: '95%', maxWidth: { xs: '70vw', sm: '72vw', md: '75vw', lg: '80vw' } }}>
                                        <FileList
                                            lang="ch"
                                            refId={params.id}
                                            refType={"proofReply"}
                                            dateHideable={true}
                                            disablePagination
                                            disableSelectionOnClick
                                            disableColumnMenu
                                            disableColumnSelector
                                            hideFooter
                                        />
                                    </Grid>
                            }

                        </Grid>
                        :
                        (
                            isOverTime() ?
                                <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }} spacing={1}>
                                    <Grid item xs={12} md={12} textAlign="left">
                                        <Typography variant="h5"><FormattedMessage id="MSG.proofOutOfTime" /></Typography>
                                    </Grid>
                                </Grid>
                                :
                                <Grid container direction="column" sx={{ paddingLeft: 0, paddingRight: 0 }} spacing={1}>

                                    <Grid item xs={12} md={12}>
                                        <RadioGroup
                                            aria-labelledby="demo-radio-buttons-group-label"
                                            id="action"
                                            name="action"
                                            defaultValue={true}
                                            onChange={(event) => {
                                                setActionValue(event.target.value === "true" ? true : false);
                                            }}
                                        >
                                            <FormControlLabel value={true} control={<Radio />} label={intl.formatMessage({ id: 'proofErrorFree' })} />
                                            <FormControlLabel value={false} control={<Radio />} label={intl.formatMessage({ id: 'proofWithError' })} />
                                        </RadioGroup>
                                    </Grid>


                                    {
                                        actionValue && formData.creditor == false ?
                                            isDummyLoggedIn() ?
                                                <Grid item xs={12} sx={{ mb: 1, }}>
                                                    <table style={tabelStyle}>
                                                        <tr style={tabelStyle}>
                                                            <th style={tabelStyle} width="50" align="left"></th>
                                                            <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMeans" /></th>
                                                            <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMethodMeans" /></th>
                                                            <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
                                                            <th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
                                                        </tr>
                                                        <tr>
                                                            <td style={tabelStyle}>
                                                                <Checkbox
                                                                    checked={paymentMethod == "demandNote"}
                                                                    onChange={() => {
                                                                        set_paymentMethod("demandNote")
                                                                    }}
                                                                />
                                                            </td>
                                                            <td style={tabelStyle}><FormattedMessage id="payDn" /></td>
                                                            <td style={tabelStyle}>
                                                                <ul>
                                                                    <li><FormattedMessage id="atm" /></li>
                                                                    <li><FormattedMessage id="pps" /></li>
                                                                    <li><FormattedMessage id="eBank" /></li>
                                                                    <li><FormattedMessage id="phoneBank" /></li>
                                                                    <li><FormattedMessage id="eCheque" /></li>
                                                                    <li><FormattedMessage id="fps" /></li>
                                                                    <li><FormattedMessage id="hkpo" /></li>
                                                                    <li><FormattedMessage id="store" /></li>
                                                                    <li><FormattedMessage id="post" /></li>
                                                                </ul>
                                                            </td>
                                                            <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
                                                            <td style={tabelStyle}>
                                                                <FormattedMessage id="payDnRemark" values={{
                                                                    date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
                                                                }} />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style={tabelStyle}>
                                                                <Checkbox
                                                                    checked={paymentMethod == "office"}
                                                                    onChange={() => {
                                                                        set_paymentMethod("office")
                                                                    }}
                                                                />
                                                            </td>
                                                            <td style={tabelStyle}><FormattedMessage id="payNPGO" /></td>
                                                            <td style={tabelStyle}>
                                                                <ul>
                                                                    <li><FormattedMessage id="cheque" /></li>
                                                                    <li><FormattedMessage id="cash" /></li>
                                                                </ul>
                                                            </td>
                                                            <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
                                                            <td style={tabelStyle}>
                                                                <FormattedMessage id="payNPGORemark" values={{
                                                                    date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
                                                                }} />
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </Grid> :
                                                <Grid item xs={12} sx={{ mb: 1, }}>
                                                    <table style={tabelStyle}>
                                                        <tr style={tabelStyle}>
                                                            <th style={tabelStyle} width="50" align="left"></th>
                                                            <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMeans" /></th>
                                                            <th style={tabelStyle} width="400" align="left"><FormattedMessage id="paymentMethodMeans" /></th>
                                                            <th style={tabelStyle} width="300" align="left"><FormattedMessage id="confirmingDealine" /></th>
                                                            <th style={tabelStyle} width="300" align="left"><FormattedMessage id="PaymentCoonpletDealine" /></th>
                                                        </tr>
                                                        <tr>
                                                            <td style={tabelStyle}>
                                                                <Checkbox
                                                                    checked={paymentMethod == "online"}
                                                                    onChange={() => {
                                                                        set_paymentMethod("online")
                                                                    }}
                                                                />
                                                            </td>
                                                            <td style={tabelStyle}><FormattedMessage id="payOnline" /></td>
                                                            <td style={tabelStyle}>
                                                                <ul>
                                                                    <li><FormattedMessage id="fps" /></li>
                                                                    <li><FormattedMessage id="card" /></li>
                                                                    <li><FormattedMessage id="pps" /></li>
                                                                </ul>
                                                            </td>
                                                            <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 2:00 p.m.</td>
                                                            <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 2:30 p.m.</td>
                                                        </tr>
                                                        <tr>
                                                            <td style={tabelStyle}>
                                                                {isOverDnReviseDeadline() ?
                                                                    <></> :
                                                                    <Checkbox
                                                                        checked={paymentMethod == "demandNote"}
                                                                        onChange={() => {
                                                                            set_paymentMethod("demandNote")
                                                                        }}
                                                                    />
                                                                }
                                                            </td>
                                                            <td style={tabelStyle}><FormattedMessage id="payDn" /></td>
                                                            <td style={tabelStyle}>
                                                                <ul>
                                                                    <li><FormattedMessage id="atm" /></li>
                                                                    <li><FormattedMessage id="pps" /></li>
                                                                    <li><FormattedMessage id="eBank" /></li>
                                                                    <li><FormattedMessage id="phoneBank" /></li>
                                                                    <li><FormattedMessage id="eCheque" /></li>
                                                                    <li><FormattedMessage id="fps" /></li>
                                                                    <li><FormattedMessage id="hkpo" /></li>
                                                                    <li><FormattedMessage id="store" /></li>
                                                                    <li><FormattedMessage id="post" /></li>
                                                                </ul>
                                                            </td>
                                                            <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDateOff, intl.formatMessage({ id: "dateStrFormat" }))} 5:00 p.m.</td>
                                                            <td style={tabelStyle}>
                                                                <FormattedMessage id="payDnRemark" values={{
                                                                    date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
                                                                }} />
                                                            </td>
                                                        </tr>

                                                        <tr>
                                                            <td style={tabelStyle}>
                                                                {
                                                                    isOverNpgoReviseDeadline() ?
                                                                        <></> :
                                                                        <Checkbox
                                                                            checked={paymentMethod == "office"}
                                                                            onChange={() => {
                                                                                set_paymentMethod("office")
                                                                            }}
                                                                        />
                                                                }
                                                            </td>
                                                            <td style={tabelStyle}><FormattedMessage id="payNPGO" /></td>
                                                            <td style={tabelStyle}>
                                                                <ul>
                                                                    <li><FormattedMessage id="cheque" /></li>
                                                                    <li><FormattedMessage id="cash" /></li>
                                                                </ul>
                                                            </td>
                                                            <td style={tabelStyle}>{DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" }))} 12:00 p.m.</td>
                                                            <td style={tabelStyle}>
                                                                <FormattedMessage id="payNPGORemark" values={{
                                                                    date: DateUtils.dateFormat(formData.closingDate, intl.formatMessage({ id: "dateStrFormat" })) + " 12:30 p.m."
                                                                }} />
                                                            </td>
                                                        </tr>


                                                    </table>
                                                </Grid>

                                            :
                                            actionValue ?
                                                <></>
                                                :
                                                <>
                                                    {
                                                        isOverReviseDeadline() ?
                                                            <Grid item xs={12} md={12} textAlign="left">
                                                                <Typography variant="h5" style={{ color: "red" }}>
                                                                    <FormattedMessage id="MSG.overReviseDeadline" />
                                                                </Typography>
                                                            </Grid>
                                                            :
                                                            <>
                                                                <Grid item xs={12} md={12} textAlign="left">
                                                                    <Typography variant="h5">
                                                                        <FormattedMessage id="requiredUploadFix" />：
                                                                    </Typography>
                                                                </Grid>

                                                                <Grid item xs={12} md={12} textAlign="left">
                                                                    <input
                                                                        id="uploadFileBtn"
                                                                        name="file"
                                                                        type="file"
                                                                        accept=".pdf"
                                                                        style={{ display: 'none' }}
                                                                        disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}
                                                                        onChange={(event) => {
                                                                            readFile(event)
                                                                        }}
                                                                    />
                                                                    <label htmlFor="uploadFileBtn">
                                                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                                            <Button
                                                                                color="save"
                                                                                component="span"
                                                                                variant="contained"
                                                                                aria-label={intl.formatMessage({ id: 'upload' })}
                                                                                disabled={attachments.length >= (formik.values.groupType === "Private Bill" ? 2 : 1)}
                                                                            >
                                                                                <FormattedMessage id="upload" />
                                                                            </Button>
                                                                        </ThemeProvider>
                                                                    </label>
                                                                </Grid>


                                                                <Grid item xs={12} sm={12} md={12} lg={12} textAlign="left" sx={{ width: '95%', maxWidth: { xs: '70vw', sm: '72vw', md: '75vw', lg: '80vw' } }} >
                                                                    <UploadFileTable key="uploadTable" recordList={attachments} setRecordList={setAttachments} />
                                                                </Grid>
                                                            </>
                                                    }
                                                </>
                                    }
                                    {
                                        actionValue == false && isOverReviseDeadline() ?
                                            <></>
                                            :
                                            <Grid item xs={12} sm={12} md={12} lg={12}>
                                                <Stack direction="row" alignItems="center">
                                                    <FormLabel sx={{ paddingRight: 2, paddingBottom: 3, textAlign: "center" }}>
                                                        <Typography variant="h5">
                                                            <FormattedMessage id="sign" />：
                                                        </Typography>
                                                    </FormLabel>
                                                    <TextField
                                                        fullWidth
                                                        type="password"
                                                        onChange={formik.handleChange}
                                                        name="vaild"
                                                        variant="outlined"
                                                        error={Boolean(formik.errors["vaild"])}
                                                        helperText={formik.errors["vaild"] ? formik.errors["vaild"] : ' '}
                                                        placeholder={intl.formatMessage({ id: 'requireLoginPassword' })}
                                                        sx={
                                                            {
                                                                "& .MuiInputBase-input.Mui-disabled": {
                                                                    WebkitTextFillColor: "#000000",
                                                                    background: "#f8f8f8",
                                                                },
                                                                width: '70%'
                                                            }
                                                        }
                                                    />

                                                </Stack>
                                            </Grid>
                                    }


                                    <Grid item xs={12} md={12} textAlign="left">
                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                            <Button
                                                variant="contained"
                                                color="success"
                                                type="submit"
                                                disabled={actionValue == false && isOverReviseDeadline()}
                                                aria-label={intl.formatMessage({ id: 'submitReply' })}
                                            >
                                                <FormattedMessage id="submitReply" />
                                            </Button>
                                        </ThemeProvider>
                                    </Grid>

                                </Grid>

                        )


                }



            </form>
            <div>
                <Dialog
                    open={isWarningPopUp}
                    onClose={() => setIsWarningPopUp(false)}
                    PaperProps={{
                        sx: {
                            minWidth: '40vw',
                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                        }
                    }}
                >
                    <DialogTitle>
                        <FormattedMessage id="attention" />
                    </DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Typography variant="h3" style={{ padding: '16px' }}>{warningText}</Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button
                            aria-label={intl.formatMessage({ id: 'ok' })}
                            onClick={() => setIsWarningPopUp(false)}
                        >
                            OK
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        </MainCard>
    );
};

export default FormPanel;