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 * as DateUtils from "utils/DateUtils";
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) {
            // console.log(formData)
            setData(formData);
        }
    }, [formData]);
    
    React.useEffect(() => {
        if (data != null && data != undefined && Object.keys(data).length > 0) {
            // console.log(data)
            setOnReady(data != {});
        }
    }, [data]);

    const getPaymentMethod=()=>{
        let paymentmethod = ""
        // console.log(locale)
        if (data?.payload!=null) {
            paymentmethod = data.payload?.paymentdetail.paymentmethod;
            if (locale == "zh-HK"){
                if("01" == paymentmethod) return "繳費靈";
                if("02" == paymentmethod || "03" == paymentmethod) return "信用卡";
                if("04" == paymentmethod) return "轉數快";
            }
            else if (locale == "zh-CN"){
                if("01" == paymentmethod) return "缴费灵";
                if("02" == paymentmethod || "03" == paymentmethod) return "信用卡";
                if("04" == paymentmethod) return "转数快";
            }
            else {
                if("01" == paymentmethod) return "PPS";
                if("02" == paymentmethod || "03" == paymentmethod) return "Credit Card";
                if("04" == paymentmethod) return "FPS";
            }
        } else {
            paymentmethod = data.payMethod;
            if (locale == "zh-HK"){
                if("01,PPSB,PPS" == paymentmethod) return "繳費靈";
                if("02,BCMP,CreditCard" == paymentmethod || "03,BCMP,CreditCard" == paymentmethod) return "信用卡";
                if("04,BCFP,FPS" == paymentmethod) return "轉數快";
            }
            else if (locale == "zh-CN"){
                if("01,PPSB,PPS" == paymentmethod) return "缴费灵";
                if("02,BCMP,CreditCard" == paymentmethod || "03,BCMP,CreditCard" == paymentmethod) return "信用卡";
                if("04,BCFP,FPS" == paymentmethod) return "转数快";
            }
            else {
                if("01,PPSB,PPS" == paymentmethod) return "PPS";
                if("02,BCMP,CreditCard" == paymentmethod || "03,BCMP,CreditCard" == paymentmethod) return "Credit Card";
                if("04,BCFP,FPS" == 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="paymentNo" />:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{ textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                {data.payload?.transactionid?data.payload?.transactionid:data.transNo}
                                            </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="paymentDate" />:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", 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 spacing={5}>
                                        <Grid item xs={6} md={6} sx={{ textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                <FormattedMessage id="paymentTime" />:
                                            </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="payDeatail"/>:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={6} sx={{textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                {"$ " + FormatUtils.currencyFormat(data.payload?.amount?data.payload?.amount:data.payAmount)}
                                            </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="epayMethod"/>:
                                            </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" }}>
                                                    <Button className="printHidden" variant="contained" disabled={onDownload} 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;