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

// material-ui
import {
    Grid,
    Typography,
    FormLabel,
    Button
} from '@mui/material';

import * as React from "react";
import * as FormatUtils from "utils/FormatUtils";
import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
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 {FormattedMessage, useIntl} from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const PaymentDetails = ({ formData,doPrint,onDownload }) => {

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

    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";
        return paymentmethod;
    }

    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
            >
                <Typography variant="h5" sx={{ textAlign: "center", mb: 2, borderBottom: "1px solid black" }}>
                    <FormattedMessage id="payDetail"/>
                </Typography>
                <form>
                    <Grid container >
                        <Grid item>
                            <Grid container >
                                <Grid item xs={12} md={12} >
                                    <Grid container spacing={5} alignItems="center">
                                        <Grid item xs={6} md={6} sx={{ textAlign: "right", alignItems: 'center', color: "#000000" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                <FormattedMessage id="status"/>:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                            <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
                                                {
                                                    locale === 'en' ?
                                                        PaymentStatus.getStatus_Eng(data.status)
                                                        :
                                                        PaymentStatus.getStatus_Cht(data.status)
                                                }
                                            </FormLabel>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container spacing={5} >
                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                <FormattedMessage id="transactionNo" />:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{ textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                {data.payload?.transactionid}
                                            </FormLabel>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container spacing={5}>
                                        <Grid item xs={6} md={6} sx={{textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                <FormattedMessage id="transactionDate" />:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                {data.transDateStr + " (DD/MM/YYYY)"}
                                            </FormLabel>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container spacing={5}>
                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                <FormattedMessage id="transactionTime" />:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                {data.transTimeStr + " (HH:MI:SS)"}
                                            </FormLabel>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container spacing={5}>
                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                <FormattedMessage id="paymentRefCode" />:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                {data.egisRefNo}
                                            </FormLabel>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container spacing={5} >
                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                <FormattedMessage id="payTotalDeatail"/>:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                {"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
                                            </FormLabel>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container spacing={5} >
                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                <FormattedMessage id="payMethod"/>:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                {getPaymentMethod()}
                                            </FormLabel>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                {
                                    data.status == "APPR"
                                    ?
                                        <Grid item xs={12} md={12}>
                                            <Grid container spacing={5} alignItems="center">
                                                <Grid item xs={6} md={6} sx={{textAlign: "right" }}>
                                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                        <FormattedMessage id="payReceipt"/>:
                                                    </FormLabel>
                                                </Grid>
                                                <Grid item xs={6} md={5} sx={{textAlign: "left" }}>
                                                    {onDownload?
                                                        <LoadingComponent disableText={true} alignItems="flex-start"/>
                                                    :
                                                        <Button className="printHidden" variant="contained" sx={{ mt:2 }} onClick={doPrint}>
                                                            <DownloadIcon/>
                                                            <Typography sx={{fontSize: "16px"}}>
                                                                <FormattedMessage id="download"/>
                                                            </Typography>
                                                        </Button>
                                                    }
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    : null
                                }
                            </Grid>
                        </Grid>
                    </Grid>
                </form>
            </MainCard>
    );
};

export default PaymentDetails;