PNSPS-frontend-MaterialUI/src/pages/Payment/FPS/AckPage.js

// material-ui
import {
    Grid,
    Typography,
    Stack,
    // Button,
    FormLabel,
} from '@mui/material';
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
// import { useNavigate } from "react-router-dom";
// import FpsIcon from "assets/images/icons/fps.svg";
import { useLocation } from 'react-router-dom';
import {paymentPath} from "auth/utils";
// import {poll} from "utils/Utils";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = {
    backgroundImage: `url(${titleBackgroundImg})`,
    width: '100%',
    height: '100%',
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    backgroundColor: '#0C489E',
    backgroundPosition: 'right'
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const AckPage = () => {
    // const navigate = useNavigate()
    const location = useLocation();

    const [paymentData, setPaymentData] = React.useState({});
    const [transactionData, setTransactionData] = React.useState({});
    const [transactionDate, setTransactionDate] = React.useState("");
    const [transactionTime, setTransactionTime] = React.useState("");
    const [onReady, setOnReady] = React.useState(false);
    const paymentStatusApi = "/api/payment/status/";
    const [paymentid, setPaymentid] = React.useState("");

    React.useEffect(() => {
       
        if(location.state != undefined){
            console.log(location.state)
            setPaymentData(location.state)
        }
    }, []);

    React.useEffect(() => {
        if(Object.keys(transactionData).length > 0 ){
            setOnReady(true);
        }
    }, [transactionData]);

    React.useEffect(() => {
        if (Object.keys(paymentData).length > 0){
            const dateTime = paymentData.transactionDateTime;
            const date = new Date(dateTime);
            const trnDate = date.getDate()+"/"+date.getMonth()+"/"+date.getFullYear();
            const trnTime = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
            setTransactionDate(trnDate)
            setTransactionTime(trnTime)
            setPaymentid(paymentData.paymentid)
        }
        // setTransactionData(
        //     {
        //         "amount": 999.99,
        //         "currencycode": "HKD",
        //         "paymentdetail": {
        //             "attemptno": 1,
        //             "channel": "MobileWallet",
        //             "paymentid": "C202310268000681",
        //             "paymentmethod": "04",
        //             "result": {
        //                 "canretry": "Y",
        //                 "description": "CANC - Cancelled by user or Payment Server.",
        //                 "paymentstatuscode": "CANC",
        //                 "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]"
        //             },
        //             "subtype": "FPS",
        //             "time": "2023-10-26T09:02:17Z[UTC]"
        //         },
        //         "transactionid": "20231026170103921"
        //     }
        // )
        HttpUtils.post({
            url: paymentPath+paymentStatusApi+paymentid,
            params:{
                "apprefid": paymentData.transactionid,
                "webtoken": paymentData.webtoken,   
            },
            onSuccess: function(responseData){
                setTransactionData(responseData)
            }
        });
    }, [paymentData]);

    return (
        !onReady ?
            <LoadingComponent />
            :
            (
                <Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                    <Grid item xs={12} width="100%">
                        <div style={BackgroundHead} width="100%">
                            <Stack direction="row" height='70px'>
                                <Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>公共啟事：FPS付款</Typography>
                            </Stack>
                        </div>
                    </Grid>
                    {/*row 1*/}
                    <Grid item xs={12} md={12} >
                        <Grid container justifyContent="flex-start" alignItems="center" >
                            <center>
                                <Grid item xs={12} md={12} >

                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                    Your application and payment have been received
                                    </Typography>

                                    <Grid container>
                                        <Grid item xs={12} md={12}>
                                            <Grid container >
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                    Transaction Reference No:
                                                </FormLabel>
                                            </Grid>
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                
                                                </FormLabel>
                                            </Grid>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} md={12}>
                                            <Grid container >
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                Transaction Date:
                                                </FormLabel>
                                            </Grid>
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                {transactionDate+" (DD/MM/YYYY)"}
                                                </FormLabel>
                                            </Grid>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} md={12}>
                                            <Grid container >
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                Transaction Time:
                                                </FormLabel>
                                            </Grid>
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                {transactionTime+" (HH:MI:SS)"}
                                                </FormLabel>
                                            </Grid>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} md={12}>
                                            <Grid container >
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                EGIS Reference No:
                                                </FormLabel>
                                            </Grid>
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                {transactionData.transactionid}
                                                </FormLabel>
                                            </Grid>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} md={12}>
                                            <Grid container >
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                Payment Amount
                                                </FormLabel>
                                            </Grid>
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                {"HK$ "+transactionData.amount}
                                                </FormLabel>
                                            </Grid>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} md={12}>
                                            <Grid container >
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                Payment Method:
                                                </FormLabel>
                                            </Grid>
                                            <Grid item>
                                                <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                {transactionData.paymentdetail.subtype}
                                                </FormLabel>
                                            </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </center>
                        </Grid>
                    </Grid>
                    {/*row 2*/}
                </Grid >
            )


    );
};

export default AckPage;