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

// material-ui
import {
    Grid,
    Typography,
    FormLabel,
} 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')));
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const PaymentDetails = ({ formData, }) => {

    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]);


    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
            >
                <Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
                    付款詳情
                </Typography>
                <form>
                    <Grid container>
                        <Grid item xs={12} md={12} >
                            <Grid container >
                                <Grid item xs={3} md={3} sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
                                    <FormLabel sx={{ color: "#000000" }}>
                                        狀態:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={9} md={9} sx={{ 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={3} md={3} sx={{ textAlign: "left" }}>
                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                        交易號碼:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={9} md={9} sx={{ 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={3} md={3} sx={{ textAlign: "left" }}>
                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                        交易日期:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={9} md={9} 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 >
                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                        交易時間:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={9} md={9} 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 >
                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                        付款參考號碼:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={9} md={9} sx={{ 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={3} md={3} sx={{ textAlign: "left" }}>
                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                        付款總額:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={9} md={9} 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 >
                                <Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                        付款方式:
                                    </FormLabel>
                                </Grid>
                                <Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
                                    <FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
                                        {data.payload?.paymentdetail?.subtype ?? (data.payload.paymentdetail.paymentmethod === "01" ? "PPS" : "")}
                                    </FormLabel>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </form>
            </MainCard>
    );
};

export default PaymentDetails;