PNSPS-frontend-MaterialUI/src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

// material-ui
import * as React from 'react';
import {
    Stack,
    Typography,
    Button,
    Autocomplete,
    TextField,
    Grid,
    Dialog, DialogTitle, DialogContent, DialogActions, useMediaQuery,
} from '@mui/material';
import { FiDataGrid } from "components/FiDataGrid";
import * as HttpUtils from "utils/HttpUtils"
import * as UrlUtils from "utils/ApiPathConst"
import * as DateUtils from "utils/DateUtils"
import * as FormatUtils from "utils/FormatUtils"
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
import { useNavigate } from "react-router-dom";
import {
    isORGLoggedIn,
} from "utils/Utils";
import { ThemeProvider, useTheme } from "@emotion/react";
import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
import { FormattedMessage, useIntl } from "react-intl";
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({ rows }) {
    const [rowList, setRowList] = React.useState([]);
    const [selectedRowItems, setSelectedRowItems] = React.useState([]);
    const [isPopUp, setIsPopUp] = React.useState(false);
    const [checkCareOf, setCheckCareOf] = React.useState(false);
    const [getCareOfList, setCareOfList] = React.useState([]);
    const [careOfComboList, setCareOfComboList] = React.useState([{}]);
    const [selectedCareOf, setSelectedCareOf] = React.useState(null);
    const [expiryDateErrText, setExpiryDateErrText] = React.useState("");
    const [expiryDateErr, setExpiryDateErr] = React.useState(false);
    
    const [paymentHoldedErrText, setPaymentHoldedErrText] = React.useState("");
    const [paymentHoldedErr, setPaymentHoldedErr] = React.useState(false);
    
    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
    const intl = useIntl();

    //const [amount, setAmount] = React.useState(0);
    const navigate = useNavigate()

    React.useEffect(() => {
        // const careOfList = rows.map(obj => obj.careOf);
        // console.log(rows)
        // console.log(careOfList)
        setRowList(rows)
        const formattedData = Array.from(new Set(rows.filter(obj => obj.careOf !== null).map(obj => obj.careOf))).map((careOf, index) => ({
            key: index,
            id: rows.find(obj => obj.careOf === careOf).id,
            label: careOf
        }));
        //   console.log(formattedData)
        setCareOfList(formattedData)
    }, []);

    React.useEffect(() => {
        // console.log(getCareOfList)
        setCareOfComboList(getCareOfList)
    }, [getCareOfList]);

    React.useEffect(() => {
        if (selectedCareOf != null) {
            const afteSelectedList = [];
            console.log(rows)
            console.log(selectedCareOf)
            rows.forEach((element) => {
                if (element.careOf === selectedCareOf.label) {
                    afteSelectedList.push(element)
                }
            });
            // afteSelectedList.push(rows.find(obj => obj.careOf ===(selectedCareOf.label)));
            console.log(afteSelectedList)
            setRowList(afteSelectedList)
        } else {
            setRowList(rows)
        }
    }, [selectedCareOf]);

    const handleDetailClick = (params) => () => {
        navigate('/publicNotice/' + params.id);
    };

    const handlePaymentBtn = () => {
        let appIdList = [];
        const datas = rows?.filter((row) =>
            selectedRowItems.includes(row.id)
        );
        // console.log(datas)
        for (var i = 0; i < datas?.length; i++) {
            appIdList.push(datas[i].id);
        }
        if(appIdList.length<1){
            setExpiryDateErrText(intl.formatMessage({ id: 'MSG.plzSelectApp' }));
            setExpiryDateErr(true);
            return;
        }
        HttpUtils.post({
            url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE,
            params: {
                ids: appIdList
            },
            onSuccess: (responData) => {
                if (responData.success == true) {
                    // setIsPopUp(true);
                    handlePaymentCheck(appIdList)
                    return;
                }
                let str = "";
                responData.msg.forEach((item) => {
                    str += "App: " + item.appNo + ", 到期日: " + DateUtils.datetimeStr_Cht(item.expiryDate) + "\n";
                });
                setExpiryDateErrText(str.split('\n').map(str => <>{str}<br /></>));
                setExpiryDateErr(true);
            }
        });
    };

    const handlePaymentCheck = (appIdList) => {
        HttpUtils.post({
            url: UrlUtils.PAYMENT_CHECK,
            params: {
                appIds: appIdList
            },
            onSuccess: (responseData) => {
                const latestData = {};

                responseData.forEach(item => {
                const { appId, timeDiff } = item;
                if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
                    latestData[appId] = item;
                }
                });
                const latestDataObjects = Object.values(latestData);
                
                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
                const filteredAppIds = filteredData.map(item => item.appId);
                
                const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
                const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];
                
                const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
                if (readyToPayment){
                    setIsPopUp(true);
                        return;
                }else{
                    const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
                    const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
                    const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
                    setPaymentHoldedErrText(resultString);
                    // setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));
                    setPaymentHoldedErr(true);
                }
            }
        });
    };

    const columns = [
        {
            id: 'appNo',
            field: 'appNo',
            headerName: intl.formatMessage({ id: 'applicationId' }),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
        },
        {
            id: 'created',
            field: 'created',
            headerName: intl.formatMessage({ id: 'submitDate' }),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            valueGetter: (params) => {
                return DateUtils.datetimeStr(params.value);
            }
        },
        {
            id: 'remarks',
            field: 'remarks',
            headerName: isORGLoggedIn() ? intl.formatMessage({ id: 'gazetteCount2_1' }) : intl.formatMessage({ id: 'myRemarks' }),
            width: isMdOrLg ? 'auto' : 400,
            flex: isMdOrLg ? 3 : undefined,
            renderCell: (params) => (
                isORGLoggedIn() ?
                    <div>
                        <FormattedMessage id="careOf" />: {params.row.careOf}<br />
                        <FormattedMessage id="myRemarks" />: {params.row.remarks}
                    </div> :
                    <div>
                        {params.row.remarks}
                    </div>
            )
        },
        {
            id: 'fee',
            field: 'fee',
            headerName: intl.formatMessage({ id: 'price' }),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderCell: (params) => {
                return FormatUtils.currencyFormat(params.row.fee)
            },
        },
        {
            id: 'status',
            field: 'status',
            headerName: intl.formatMessage({ id: 'status' }),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
            renderCell: (params) => {
                return [StatusUtils.getStatusIntl(params, intl)]
            },
        },
        {
            field: 'actions',
            type: 'actions',
            headerName: '',
            width: 150,
            cellClassName: 'actions',
            renderCell: (params) => {
                return <Button aria-label={intl.formatMessage({ id: 'viewDetail' })} onClick={handleDetailClick(params)}>
                    <FormattedMessage id="viewDetail" />
                </Button>;
            },
        }
    ];

    const getWindowContent = () => {
        var content = [];
        let totalAmount = 0;
        const datas = rows?.filter((row) =>
            selectedRowItems.includes(row.id)
        );
        for (var i = 0; i < datas?.length; i++) {
            content.push(<>
                <Stack direction="row" justifyContent="space-between">
                    <Typography variant="h5">
                        <FormattedMessage id="applicationId" />: {datas[i].appNo}
                    </Typography>
                    ({DateUtils.datetimeStr(datas[i].created)})
                </Stack>
                <FormattedMessage id="extraMark" />: {datas[i].remarks}
                <br /><br />
            </>);

            totalAmount += datas[i].fee;
        }
        content.push(<Typography variant="h5">
            <FormattedMessage id="totalAmount" /> (HK$): {FormatUtils.currencyFormat(totalAmount)}
            <br /><br />
        </Typography>);
        return content;
    }

    function handleRowDoubleClick(params) {
        navigate('/publicNotice/' + params.id);
    }

    function doPayment() {
        setIsPopUp(false);
        let totalAmount = 0;
        let appIdList = [];
        const datas = rows?.filter((row) =>
            selectedRowItems.includes(row.id)
        );
        // console.log(datas)
        for (var i = 0; i < datas?.length; i++) {
            totalAmount += datas[i].fee;
            appIdList.push(datas[i].id);
        }
        const firstCareOf = datas[0].careOf;
        const areAllCareOfEqual = datas.every(obj => obj.careOf === firstCareOf);


        if (appIdList.length > 0 && areAllCareOfEqual) {
            navigate('/paymentPage', { state: { amount: totalAmount, appIdList: appIdList } });
        } else {
            setCheckCareOf(true);
            // console.log("The selected applications should be from the same Care of.")
        }
    }

    function afterWarningPayment() {
        let totalAmount = 0;
        let appIdList = [];
        const datas = rows?.filter((row) =>
            selectedRowItems.includes(row.id)
        );
        // console.log(datas)
        for (var i = 0; i < datas?.length; i++) {
            totalAmount += datas[i].fee;
            appIdList.push(datas[i].id);
        }
        navigate('/paymentPage', { state: { amount: totalAmount, appIdList: appIdList } });
    }

    return (
        <>
            <div style={{ minHeight: 400, width: '100%', padding: 4 }}>
                {isORGLoggedIn() ?
                    <Grid container direction="row" justifyContent="flex-start" alignItems="center" >
                        <Grid item xs={3} md={1}>
                            <Typography variant="h5"><FormattedMessage id="careOf" />:</Typography>
                        </Grid>
                        <Grid item xs={8} md={2}>
                            <Autocomplete
                                disablePortal
                                id="careOfCombo"
                                value={selectedCareOf === null ? null : selectedCareOf}
                                options={careOfComboList}
                                onChange={(event, newValue) => {
                                    // console.log(newValue)
                                    setSelectedCareOf(newValue);
                                }}
                                renderInput={(params) => <TextField {...params} />}
                            />
                        </Grid>
                    </Grid> : null
                }
                <FiDataGrid
                    checkboxSelection
                    disableRowSelectionOnClick
                    rows={rowList}
                    columns={columns}
                    customPageSize={20}
                    onRowSelectionModelChange={(newSelection) => {
                        setSelectedRowItems(newSelection);
                    }}
                    onRowDoubleClick={handleRowDoubleClick}
                    getRowHeight={() => 'auto'}
                />

                <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                    <Button
                        color="create"
                        variant="contained"
                        aria-label={intl.formatMessage({ id: 'pay' })}
                        onClick={() => { handlePaymentBtn() }}
                        sx={{ mt: 2, ml: 1 }}
                    >
                        <FormattedMessage id="pay" />
                    </Button>
                </ThemeProvider>
            </div>

            <div>
                <Dialog
                    open={isPopUp}
                    onClose={() => setIsPopUp(false)}
                    PaperProps={{
                        sx: {
                            minWidth: '40vw',
                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
                        }
                    }}
                >
                    <DialogTitle>
                        <Typography variant="h3" >
                            <FormattedMessage id="payConfirm" />
                        </Typography>
                    </DialogTitle>
                    <DialogContent style={{ display: 'flex', }}>
                        <Stack direction="column" justifyContent="space-between">
                            {getWindowContent()}
                        </Stack>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setIsPopUp(false)} aria-label={intl.formatMessage({ id: 'close' })}>
                            <Typography variant="h5">
                                <FormattedMessage id="close" />
                            </Typography></Button>

                        <Button onClick={() => doPayment()} aria-label={intl.formatMessage({ id: 'confirm' })}>
                            <Typography variant="h5">
                                <FormattedMessage id="confirm" />
                            </Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>

            <div>
                <Dialog
                    open={checkCareOf}
                    onClose={() => setCheckCareOf(false)}
                    PaperProps={{
                        sx: {
                            minWidth: '40vw',
                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                        }
                    }}
                >
                    <DialogTitle></DialogTitle>
                    <Typography variant="h2" style={{ padding: '16px' }}>                                
                        <FormattedMessage id="warning" />
                    </Typography>
                    <DialogContent style={{ display: 'flex', }}>
                        <Stack direction="column" justifyContent="space-between">
                            <Typography variant="h5" color="error">
                                <FormattedMessage id="careOfWarning" />
                            </Typography>
                        </Stack>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setCheckCareOf(false)} aria-label={intl.formatMessage({ id: 'close' })}>
                            <Typography variant="h5">
                                <FormattedMessage id="close" />
                            </Typography></Button>

                        <Button onClick={() => afterWarningPayment()} aria-label={intl.formatMessage({ id: 'confirm' })}>
                            <Typography variant="h5">
                                <FormattedMessage id="confirm" />
                            </Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>

            <div>
                <Dialog
                    open={expiryDateErr}
                    onClose={() => setExpiryDateErr(false)}
                    PaperProps={{
                        sx: {
                            minWidth: '40vw',
                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                        }
                    }}
                >
                    <DialogTitle></DialogTitle>
                    <Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
                    <DialogContent style={{ display: 'flex', }}>
                        <Stack direction="column" justifyContent="space-between">
                            {
                                expiryDateErrText
                            }
                        </Stack>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setExpiryDateErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>
                            <Typography variant="h5">
                                <FormattedMessage id="close" />
                            </Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
            <div>
                <Dialog
                    open={paymentHoldedErr}
                    onClose={() => setPaymentHoldedErr(false)}
                    PaperProps={{
                        sx: {
                            minWidth: '40vw',
                            maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                            maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                        }
                    }}
                >
                    <DialogTitle></DialogTitle>
                    <Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
                    <DialogContent style={{ display: 'flex', }}>
                        <Stack direction="column" justifyContent="space-between">
                            <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />
                        </Stack>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>
                            <Typography variant="h5">
                                <FormattedMessage id="close" />
                            </Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
        </>
    );



}