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

// material-ui
import {
    Grid,
    Typography,
    Stack,
    Button,
} 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 Index = () => {
    const navigate = useNavigate()
    const location = useLocation();

    const [paymentData, setPaymentData] = React.useState({});
    const [onReady, setOnReady] = React.useState(false);
    const [paymentid, setPaymentid] = React.useState("");
    const [fpsmerchanttimeoutdatetime, setFpsmerchanttimeoutdatetime] = React.useState("");
    const [fpsqrcodeimgbase64, setFpsqrcodeimgbase64] = React.useState("");
    // const [paymentstatuscode, setPaymentstatuscode] = React.useState("");
    // const [fpsqrcodeurl, setFpsqrcodeurl] = React.useState("");
    // const pasgPath = 'https://fps.payapps.hkicl.com.hk'; //PRD
    // const pasgPath = 'https://sim.fps.payapps.hkicl.com.hk'; //Testing
    // const loadPaymentUrl = "/api/payment/wallet/fps";
    const cancelPaymentUrl = "/api/payment/cancelpayment";
    // const paymentStatusApi = "/api/payment/status/";
    // const payloadUrl = "/api/payment/wallet/fps/enquiryfpspayload/";
    // const receiverUrl = "/noti-api/payment/payment-notification";
    
    //timer
    const currentTimer = React.useRef();
    const [time, setTime] = React.useState(0);

    React.useEffect(() => {
        setFpsqrcodeimgbase64("")
        if(location.state != undefined){
            setPaymentData(location.state)
        }
        loadForm();
        currentTimer.current = setInterval(() => {
            getPaymentStatus();
            setTime((prevTime) => prevTime + 1);
        }, 500);
        return () => clearInterval(currentTimer.current);
    }, []);

    React.useEffect(() => {
        setOnReady(true);
    }, [fpsqrcodeimgbase64]);


    const loadForm = () => {
        const timeoutdatetime = "2023-10-26T09:04:30Z[UTC]"
        const convertedDateString = timeoutdatetime.replace("[UTC]", "");
        setFpsmerchanttimeoutdatetime(convertedDateString)
        setPaymentid("C202310268000681")
        
        // HttpUtils.post({
        //     url: paymentPath+loadPaymentUrl,
        //     params:{
        //         "transactionid": paymentData.transactionid,
        //         "webtoken": paymentData.webtoken,
        //         "paymentmethod":"04,BCFP,FPS",
        //         "order": { 
        //             "totalamount":paymentData.amount,
        //             "currency":"HKD",
        //             "orderdetail": 
        //             [ 
        //                 { 
        //                     "itemid": "1",
        //                     "qty":"1",
        //                     "unitprice":paymentData.amount,
        //                     "amount":paymentData.amount
        //                 },
        //             ]
        //         },
        //         // "locale":"<locale>",
        //         // "eserviceid":"<eserviceid>"
        //     },
        //     onSuccess: function(responseData){
        //         /*
        //             {
        //                 "paymentid": "<paymentid>",
        //                 "paymentstatus": "<paymentstatus>",
        //                 "fpsmerchanttimeoutdatetime": <fpsmerchanttimeoutdatetime>,
        //                 "fpsqrcodeimgbase64": "<fpsqrcodeimgbase64>",
        //                 "fpsqrcodeurl": "<fpsqrcodeurl>"
        //             }
        //         */
        //        setFpsqrcodeimgbase64(responseData.fpsqrcodeimgbase64);
        //        setPaymentid(responseData.paymentid);
        //        setFpsmerchanttimeoutdatetime(responseData.fpsmerchanttimeoutdatetime);
        //        setPaymentstatuscode(responseData.paymentstatuscode);
        //     //    const parsedUrl = new URL(responseData.fpsqrcodeurl);
        //     //    const fpsqrcodeurl = parsedUrl.pathname;
        //     //    const openPASGUrl = pasgPath + '?pay_req_obj=' + encodeURIComponent(responseData.fpsqrcodeurl) + '&callback='
        //     //                     + encodeURIComponent(paymentPath + payment.config.fpscallbackPage);
        //     //    setFpsqrcodeurl(openPASGUrl)
        //     }
        // });
    }

    const getPaymentStatus = () => {
        
        // HttpUtils.post({
        //     url: paymentPath+paymentStatusApi+paymentid,
        //     params:{
        //         "apprefid": paymentData.transactionid,
        //         "webtoken": paymentData.webtoken,   
        //     },
        //     onSuccess: function(responseData){
        //         const paymentstatuscode = responseData.paymentdetail.result.paymentstatuscode;
        //         if (paymentstatuscode === 'APPR') {
        //             const timestamp = '?t=' + Date.now();
        //             window.top.location.href = paymentPath + payment.config.ackPagePath + timestamp;
        //         } else if (paymentstatuscode === 'CANC') {
        //             window.top.location.href = paymentPath + payment.config.indexPagePath;
        //         } else {
        //             window.top.location.href = paymentPath + payment.config.errPagePath;
        //         }
        //     },
        //     onError: function(){
        //         cancelPayment()
        //         clearInterval(currentTimer.current);
        //     }
        // });
    };
    
    React.useEffect(() => {
        const timeOutDate = new Date(fpsmerchanttimeoutdatetime);
        const currentTime = new Date;
        if (timeOutDate.getTime()<currentTime.getTime()){
            console.log("stop");
            clearInterval(currentTimer.current);
        }
    },[time])

    const cancelPayment = ()=>{
        HttpUtils.post({
            url: paymentPath+cancelPaymentUrl,
            params:{
                "transactionid": paymentData.transactionid,
                "webtoken": paymentData.webtoken,
                "paymentid": paymentid
            },
            onSuccess: function(){
                navigate("/dashboard");
            }
        });       
    }

    // const getPayload = ()=>{
    //     HttpUtils.get({
    //         url: payloadUrl+"<paymenttoken>",
    //         onSuccess: function(responseData){
    //     /* 
    //         {
    //             "payload": "<payload>"
    //         }

    //     */
    //         }
    //     });       
    // }

    // const getReceiver = ()=>{
    //     HttpUtils.get({
    //         url: receiverUrl+"<paymenttoken>",
    //         onSuccess: function(responseData){
    //     /* 
    //         {
    //             "payload": "<payload>"
    //         }

    //     */
    //         }
    //     });       
    // }


    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" }}>
                                        <img src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                        <br />
                                        支付金額
                                        <br />
                                        {"$HK " + paymentData.amount}
                                    </Typography>

                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                        請掃描以下二維碼
                                        <br />
                                        <img src={fpsqrcodeimgbase64} alt="QR Code"/>
                                        <img src={fpsqrcodeurl} alt="QR Code"/>
                                        <br />
                                        二維碼有效期限10分鐘
                                        <br />
                                        請在規定時間內完成付款流程 ({fpsmerchanttimeoutdatetime})
                                    </Typography>

                                    <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                        <Button
                                            component="span"
                                            variant="contained"
                                            size="large"
                                            color="error"
                                            onClick={()=>{
                                                cancelPayment();
                                            }}
                                            sx={{ m: 4 }}
                                        >取消付款</Button>
                                    </Typography>
                                </Grid>
                            </center>
                        </Grid>
                    </Grid>
                    {/*row 2*/}
                </Grid >
            )


    );
};

export default Index;