PNSPS-frontend-MaterialUI/src/pages/Payment/Details_GLD/PaymentDetails.js

// material-ui
import {
    Grid,
    Typography,
    FormLabel,
    Button,
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Box
} from '@mui/material';

import * as React from "react";
import * as FormatUtils from "utils/FormatUtils";
import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
import * as DateUtils from "utils/DateUtils";
import * as HttpUtils from "utils/HttpUtils";
import { PAYMENT_MARK_AS_PAID } from "utils/ApiPathConst";
import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
import DownloadIcon from '@mui/icons-material/Download';
import {useIntl} from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const PaymentDetails = ({ formData, doPrint, onDownload, onRefresh }) => {

    const intl = useIntl();
    const [data, setData] = React.useState({});
    const [onReady, setOnReady] = React.useState(false);
    const [confirmOpen, setConfirmOpen] = React.useState(false);
    const [markingPaid, setMarkingPaid] = React.useState(false);
    // const { locale } = intl;

    React.useEffect(() => {
        if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
            setData(formData);
        }
    }, [formData]);

    React.useEffect(() => {
        if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
            setOnReady(data != {});
        }
    }, [data]);

    const getPaymentMethod=()=>{
        let paymentmethod = data.payload?.paymentdetail.paymentmethod;
        if("01" == paymentmethod) return "PPS";
        if("02" == paymentmethod || "03" == paymentmethod) return "Credit Card";
        if("04" == paymentmethod) return "FPS";
        if (data.payMethod === "04,BCFP,FPS") return "FPS";
        return paymentmethod;
    }

    const showMarkAsPaid = data.status === "REJT" && getPaymentMethod() === "FPS";

    const handleMarkAsPaid = () => {
        setMarkingPaid(true);
        HttpUtils.post({
            url: PAYMENT_MARK_AS_PAID + "/" + data.id,
            onSuccess: () => {
                setConfirmOpen(false);
                setMarkingPaid(false);
                if (onRefresh) {
                    onRefresh();
                }
            },
            onError: () => {
                setMarkingPaid(false);
            }
        });
    };

    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
            >
                <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, borderBottom: "1px solid black" }}>
                    <Typography variant="h5" sx={{ textAlign: "left" }}>
                        Payment Details
                    </Typography>
                    {showMarkAsPaid && (
                        <Button
                            className="printHidden"
                            variant="contained"
                            color="primary"
                            onClick={() => setConfirmOpen(true)}
                        >
                            Mark as Paid
                        </Button>
                    )}
                </Box>
                <form>
                    <Grid container>
                        <Grid item xs={12} md={12} >
                            <Grid container alignItems="center">
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right", alignItems: 'center', color: "#000000" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Status:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
                                        {PaymentStatus.getStatus_Eng(data.status)}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                    Payment No.:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {data.payload?.transactionid}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Payment Date:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {DateUtils.dateFormat(data.transDateStr, intl.formatMessage({id: "dateStrFormat"})) +" ("+intl.formatMessage({id: "dateStrFormat"})+")"}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Payment Time:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {data.transTimeStr + " (HH:MI:SS)"}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Payment Reference No.:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {data.egisRefNo}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Payment Amount:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {"$ " + FormatUtils.currencyFormat(data.payload?.amount)}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Grid container >
                                <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        Payment Method:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        {getPaymentMethod()}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                        {
                            data.status == "APPR"
                            ?
                                <Grid item xs={12} md={12}>
                                    <Grid container alignItems="center">
                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                            <FormLabel sx={{ color: "#000000" }}>
                                                Payment Receipt:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
                                            <Button className="printHidden" variant="contained" disabled={onDownload} sx={{ mt:2 }} onClick={doPrint}>
                                                <DownloadIcon/>
                                                <Typography sx={{fontSize: "16px"}}>Download</Typography>
                                            </Button>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            : null
                        }
                    </Grid>
                </form>
                <Dialog
                    open={confirmOpen}
                    onClose={() => !markingPaid && setConfirmOpen(false)}
                >
                    <DialogTitle>Confirm</DialogTitle>
                    <DialogContent>
                        <Typography variant="h5" sx={{ padding: '16px' }}>
                            {`Are you sure to mark as paid for Payment No. ${data.transNo || data.payload?.transactionid} ?`}
                        </Typography>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setConfirmOpen(false)} disabled={markingPaid}>
                            <Typography variant="h5">Cancel</Typography>
                        </Button>
                        <Button onClick={handleMarkAsPaid} disabled={markingPaid}>
                            <Typography variant="h5">Confirm</Typography>
                        </Button>
                    </DialogActions>
                </Dialog>
            </MainCard>
    );
};

export default PaymentDetails;