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

// material-ui
import {
    Grid,
    Typography,
    Stack,
    Box
    // Button,
    // FormLabel,
} from '@mui/material';
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
// 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 * as DateUtils from "utils/DateUtils"

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

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

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

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

    // const [locationData, setLocationData] = React.useState({});
    const [paymentData, setPaymentData] = React.useState({});
    const [responeData, setResponeDataData] = React.useState({});
    const [itemList, setItemList] = React.useState([]);
    // const [paymentId, setPaymentId] = 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 [onDownload, setOnDownload] = React.useState(false);
    const intl = useIntl();
    const { locale } = intl;

    React.useEffect(() => {
        loadForm();
    }, []);

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

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

    const loadForm = () => {
        const params = new URLSearchParams(window.location.search);
        let transactionid = params.get("TRANSACTION_ID")
        let webtoken = params.get("WEB_TOKEN")
        let paymentId = params.get("PAYMENT_ID")
        paymentId = paymentId.split('?is_successful')[0];

        console.log(transactionid)
        console.log(webtoken)
        console.log(paymentId)

        HttpUtils.post({
            url:  UrlUtils.PAYMENT_CALLBACK_STATUS_API,
            params:{
                "apprefid": transactionid,
                "webtoken": webtoken,
                "paymentId": paymentId,
                "transactionid":Number(transactionid) 
            },
            onSuccess: function(responseData){
                setResponeDataData(responseData)
                if (responseData.paymentdetail?.result?.paymentstatuscode === "APPR") {
                    localStorage.removeItem("webtoken");
                    localStorage.removeItem("transactionid");
                }
                responseData.data["transDateStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "DD/MM/YYYY");
                responseData.data["transTimeStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "HH:mm:ss");
                setResponeDataData(responseData.transactionData)
                setItemList(responseData.paymentItemList)
                setPaymentData(responseData.data);
            }
        });
        
        // const responseData = {
        //     "amount": 999.99,
        //     "currencycode": "HKD",
        //     "paymentdetail": {
        //         "attemptno": 1,
        //         "channel": "MobileWallet",
        //         "paymentid": "C202310268000681",
        //         "paymentmethod": "04",
        //         "result": {
        //             "canretry": "Y",
        //             "description": "APPR - Cancelled by user or Payment Server.",
        //             "paymentstatuscode": "APPR",
        //             "rejectreasoncode": "Payment Cancelled. [PAY-E-9022]"
        //         },
        //         "subtype": "FPS",
        //         "time": "2023-10-26T09:02:17Z"
        //     },
        //     "transactionid": "test0001"
        // }
        // setResponeDataData(responseData)

        // HttpUtils.post({
        //     url: UrlUtils.PAYMENT_SAVE,
        //     params: {
        //         id: paymentId,
        //         transNo: responseData.transactionid,
        //         transDateTime: new Date(responseData.paymentdetail.time).toISOString(),
        //         egisRefNo: responseData.paymentdetail.paymentid,
        //         status: responseData.paymentdetail.result.paymentstatuscode,
        //         payload: responseData
        //     },
        //     onSuccess: function (responseData2) {
        //         responseData2.data["transDateStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "DD/MM/YYYY");
        //         responseData2.data["transTimeStr"] = DateUtils.dateFormat(responseData2.data.transDateTime, "HH:mm:ss");
        //         setItemList(responseData2.paymentItemList)
        //         setPaymentData(responseData2.data);
        //         localStorage.removeItem("paymentId");
        //     }
        // });
    }

    const doPrint = () => {
        const params = new URLSearchParams(window.location.search);
        // window.print();
        setOnDownload(true)
        const local = locale
        HttpUtils.fileDownload({
            url: UrlUtils.GEN_PAYMENT_RECEIPT+"/"+params.get("PAYMENT_ID")+"/"+local,
            onResponse:()=>{
                setOnDownload(false)
            },
            onError:()=>{
                setOnDownload(false)
            }
        });
    };

    return (
        !onReady ?
            <Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center">
                <Grid item>
                    <LoadingComponent />
                </Grid>
            </Grid>
            :
            transactionData.paymentdetail?.result?.paymentstatuscode === "APPR" ?
            (
                <div>
                    <style>
                        {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
                    </style>
                    <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center">
                        <Grid className="printHidden" 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 }}>
                                        <FormattedMessage id="publicNoticePaymentSuccess"/>
                                    </Typography>
                                </Stack>
                            </div>
                        </Grid>
                        {/*row 1*/}
                        <Grid item xs={12} md={12} spacing={2} sx={{ textAlign: "center" }}>
                            <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                您的申請和付款已收到
                            </Typography>
                            <Grid container justifyContent="center" direction="column" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
                                <Grid item className="printOrder" xs={12} md={12} sx={{ pt: 2 }} style={{ height: '100%', order: 1 }}>
                                    <Box xs={12} md={12} sx={{ border: '3px solid #eee', borderRadius: '10px' }} >
                                        <PaymentDetails
                                            formData={paymentData}
                                            doPrint={doPrint}
                                            onDownload={onDownload}
                                            style={{
                                                display: "flex",
                                                height: "100%",
                                                flex: 1
                                            }}
                                        />
                                    </Box>
                                </Grid>
                                <Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }} style={{ height: '100%', order: 2 }}>
                                    <Box xs={12} md={12} sx={{ border: '3px solid #eee', borderRadius: '10px' }} >
                                        <DataGrid
                                            recordList={itemList}
                                        />
                                    </Box>
                                </Grid>
                            </Grid>
                        </Grid>
                        {/*row 2*/}
                    </Grid >
                </div>
            ) :
            (transactionData.paymentdetail?.result?.paymentstatuscode === "CANC" ?
                <div>
                    <style>
                        {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
                    </style>
                    <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
                        <Grid className="printHidden" 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 }}>
                                        <FormattedMessage id="publicNoticePaymentCancel"/>
                                    </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 >
                </div>
                :
                <div>
                    <style>
                        {`@media print {.printHidden{display: none;} .printOrder{order:-1 !important;}`}
                    </style>
                    <Grid container className="printheight" sx={{ minHeight: '80%', backgroundColor: '#fff' }}direction="column" justifyContent="flex-start" alignItems="center" >
                        <Grid className="printHidden" 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 }}>
                                        <FormattedMessage id="publicNoticePaymentFail"/>
                                    </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 >
                </div>
            )
    );
};

export default Fpscallback;