PNSPS-frontend-MaterialUI/src/pages/Payment/PaymentSuccess.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 { paymentPath } from "auth/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 [responeData, setResponeDataData] = React.useState({});

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


    React.useEffect(() => {
        console.log("webtoken: " + localStorage.getItem("webtoken"));
        if (localStorage.getItem("webtoken") != null && localStorage.getItem("webtoken") != "") {
            loadForm();
        }
        // else{
        //     navigate("/dashboard");
        // }
    }, []);

    React.useEffect(() => {
        console.log(responeData)
        if (Object.keys(responeData).length > 0) {
            setTransactionData(responeData)
        }
    }, [responeData]);

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

    const loadForm = () => {
        const date = new Date();
        const trnDate = date.getDate() + "/" + date.getMonth() + "/" + date.getFullYear();
        const trnTime = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
        setTransactionDate(trnDate)
        setTransactionTime(trnTime)
        const params = new URLSearchParams(window.location.search);
        let transactionid = params.get("TRANSACTION_ID")
        let receipt_token = params.get("RECEIPT_TOKEN").replace("%3D", "=")

        HttpUtils.post({
            url: paymentPath + updatePaymentApi,
            params: {
                "transactionid": transactionid,
                "receipttoken": receipt_token,
            },
            onSuccess: function (responseData) {
                // {
                //     "transactionid": "<transactionid>",
                //     "currencycode":"<currencycode>",
                //     "amount":<amount>,
                //     "paymentdetail":{
                //         "paymentid": "<paymentid>",
                //         "paymentmethod": "<paymentmethod>",
                //         "time": "<time>",
                //         "brandname": "<brandname>",
                //         "channel": "<channeltype>",
                //         "subtype": "<subtype>",
                //         "attemptno": "<attemptno>",
                //         "result": {
                //             "code": "<code>",
                //             "paymentstatuscode":
                //             "<paymentstatuscode>"
                //             "description": "<description>",
                //             "rejectreasoncode":
                //             "<rejectreasoncode>",
                //             "canretry": "<retry>"
                //         }
                //     }
                //}
                setResponeDataData(responseData)
                if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {
                    localStorage.removeItem("webtoken");
                    localStorage.removeItem("transactionid");
                }
                // HttpUtils.post({
                //     url: paymentPath + paymentStatusApi + transactionid,
                //     params: {
                //         "apprefid": transactionid,
                //         "webtoken": localStorage.getItem("webtoken"),
                //     },
                //     onSuccess: function (responseData) {

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


    }

    return (
        !onReady ?
            <LoadingComponent />
            :
            transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ? 
            (
                <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 }}>公共啟事：付款成功</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" }}>
                                        您的申請和付款已收到
                                    </Typography>

                                    <Grid container>
                                        <Grid item xs={12} md={12}>
                                            <Grid container >
                                                <Grid item>
                                                    <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                        交易參考號:
                                                    </FormLabel>
                                                </Grid>
                                                <Grid item>
                                                    <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                    {"P"+transactionData.transactionid}
                                                    </FormLabel>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                        <Grid item xs={12} md={12}>
                                            <Grid container >
                                                <Grid item>
                                                    <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                        交易日期:
                                                    </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" }}>
                                                        交易時間:
                                                    </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 參考號:
                                                    </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" }}>
                                                        支付金額
                                                    </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" }}>
                                                        付款方式:
                                                    </FormLabel>
                                                </Grid>
                                                <Grid item>
                                                    <FormLabel sx={{ fontSize: "16px", color: "#000000", textAlign: "center" }}>
                                                        {transactionData.paymentdetail.brandname??(transactionData.paymentdetail.paymentmethod==="01"?"PPS":"")}
                                                    </FormLabel>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </center>
                        </Grid>
                    </Grid>
                    {/*row 2*/}
                </Grid >
            ) :
                (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?

                <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 }}>公共啟事：付款取消</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={8} >
                                <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                付款取消訊息：
                                <br /><br />
                                您的付款已被取消。我們收到了您的付款請求，但由於某些原因，付款無法完成。請注意以下事項：
                                <br /><br />
                                如果您主動取消了支付，請確認並確保取消是您的意願。
                                <br />
                                如果付款被取消是由於系統問題或其他原因，請您嘗試以下解決方法：
                                <br /><br />
                                檢查您的支付帳戶是否有任何異常或限制。
                                <br />
                                確保您的付款資訊準確無誤。
                                <br />
                                檢查您的網路連線是否正常。
                                <br /><br />
                                如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫，我們將盡快解決您的付款問題。謝謝！
                                </Typography>
                            </Grid>
                        </center>
                    </Grid>
                </Grid>
                {/*row 2*/}
            </Grid >
            :
                    <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 }}>公共啟事：付款失敗</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={8} >

                                        <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                            付款失敗訊息：
                                            <br /><br />
                                            親愛的用戶，很遺憾地告訴您，您的付款操作未成功。我們在處理您的付款時遇到了問題。請您仔細檢查以下事項：
                                            <br /><br />
                                            您的支付帳戶餘額是否足夠。
                                            <br />
                                            您提供的付款資訊是否準確無誤。
                                            <br />
                                            請檢查您的網路連線是否正常。
                                            <br /><br />
                                            如果您已確認以上問題無誤，但付款失敗，請您嘗試以下解決方法：
                                            <br /><br />
                                            嘗試使用其他付款方式進行付款。
                                            <br />
                                            檢查您的支付帳戶是否有異常或限制。
                                            <br />
                                            聯絡我們的客服人員尋求協助。
                                            <br /><br />
                                            如果您需要進一步的協助或有任何疑問，請隨時與我們聯繫。非常抱歉給您帶來不便，我們將盡快解決您的付款問題。謝謝！
                                        </Typography>

                                    </Grid>
                                </center>
                            </Grid>
                        </Grid>
                        {/*row 2*/}
                    </Grid >
                )

    );
};

export default Index;