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';
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const PaymentDetails = ({ formData,doPrint }) => {

    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" }}>
                    付款詳情
                </Typography>
                <form>
                    <Grid container >
                        <Grid item>
                            <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" }}>
                                                狀態:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item xs={6} md={5} sx={{ ml:5,textAlign: "left" }}>
                                            <FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
                                                {PaymentStatus.getStatus_Cht(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={{ fontSize: "16px", color: "#000000" }}>
                                                交易號碼:
                                            </FormLabel>
                                        </Grid>
                                        <Grid item  xs={6} md={5} sx={{ml:5, textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", 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={{ fontSize: "16px", color: "#000000" }}>
                                                交易日期:
                                            </FormLabel>
                                        </Grid>
                                        <Grid xs={6} md={5} sx={{ml:5,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 >
                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                交易時間:
                                            </FormLabel>
                                        </Grid>
                                        <Grid xs={6} md={5} sx={{ml:5,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 >
                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                付款參考號碼:
                                            </FormLabel>
                                        </Grid>
                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", 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={{ fontSize: "16px", color: "#000000" }}>
                                                付款總額:
                                            </FormLabel>
                                        </Grid>
                                        <Grid xs={6} md={5} sx={{ml:5,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 >
                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                付款方式:
                                            </FormLabel>
                                        </Grid>
                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                {getPaymentMethod()}
                                            </FormLabel>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} md={12}>
                                    <Grid container alignItems="center">
                                        <Grid item xs={6} md={6} sx={{ml:-5, textAlign: "right" }}>
                                            <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                                付款收據:
                                            </FormLabel>
                                        </Grid>
                                        <Grid xs={6} md={5} sx={{ml:5,textAlign: "left" }}>
                                                <Button className="printHidden" variant="contained" sx={{ mt:2 }} onClick={doPrint}>
                                                    <DownloadIcon/>
                                                    <Typography sx={{fontSize: "16px"}}>下載</Typography>
                                                </Button>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </form>
            </MainCard>
    );
};

export default PaymentDetails;