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

import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as UrlUtils from "utils/ApiPathConst";
import Loadable from 'components/Loadable';
// const MultiPaymentWindow = Loadable(React.lazy(() => import('./MultiPaymentWindow')));
const DataGrid = Loadable(React.lazy(() => import('./Details_Public/DataGrid')));
// const FPS = Loadable(React.lazy(() => import('./FPS')));
import { useEffect, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { paymentPath } from "auth/utils";
import * as FormatUtils from "utils/FormatUtils";
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));

import {
    Button,
    Grid,
    Typography,
    Stack,
    Box,
    Dialog, DialogTitle, DialogContent, DialogActions,
} from '@mui/material';

//icon
import VisaIcon from "assets/images/icons/visacard.svg";
import MasterIcon from "assets/images/icons/mastercard.svg";
import JcbIcon from "assets/images/icons/jcb.svg";
import UnionPayIcon from "assets/images/icons/unionpay.svg";
import PpsIcon from "assets/images/icons/ppshk.svg";
import FpsIcon from "assets/images/icons/fps.svg";

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'
}

const Index = () => {
    const getAvailablePaymentUrl = "/api/payment/availability";
    const getTransactionIdUrl = "/api/payment/transaction";
    const navigate = useNavigate()
    const location = useLocation();

    // const local = {en:"en-us", zh:"zh-hk", cn:"zh-cn"};
    const preferpaymentmethods = ['visa', 'mastercard', 'pps', 'creditcard', 'fps'];
    const [totalAmount, setTotalAmount] = useState(0);
    const [appIds, setAppIds] = useState([]);


    //statusWindow
    // const [open, setOpen] = useState(false);
    const [availableMethods, setAvailableMethods] = useState([]);
    const [transactionData, setTransactionData] = useState({});
    const [fpsStatus, setFPSStatus] = useState({});
    const [creditCardStatus, setCreditCardStatus] = useState({});
    const [unionPayStatus, setUnionPayStatus] = useState({});
    const [ppsStatus, setPPSStatus] = useState({});
    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState("");
    const [confirmPayment, setConfirmPayment] = useState(false);

    const [itemList, setItemList] = useState([]);
    const [onReady, setOnReady] = useState(false);

    const [expiryDateErrText, setExpiryDateErrText] = React.useState("");
    const [expiryDateErr, setExpiryDateErr] = React.useState(false);

    useEffect(() => {
        setAppIds(location.state?.appIdList ?? [])
        setTotalAmount(location.state?.amount ?? 2000)
        getAvailablePayment()
        getTransactionId()

    }, []);

    useEffect(() => {
        if (appIds != [] && appIds.length > 0)
            getAppList();
    }, [appIds]);

    // const handleClose = () => {
    //     // handleReset()
    //     setOpen(false);
    //     getTransactionId()
    //     getAvailablePayment()
    // };

    // const paymentClick = () => {
    //     setTotalAmount(totalAmount);
    //     setSelectedPaymentMethod("")
    //     setConfirmPayment(false)
    //     if (totalAmount > 0) {
    //         getTransactionId()
    //         // setOpen(true)
    //     }
    // };

    useEffect(() => {
        if (confirmPayment) {
            // setOpen(false);
            // let transactionid = "";
            // let webtoken = "";

            let page = "";
            let stateParams = {};
            let paymentMethod = "";
            if (selectedPaymentMethod === "FPS") {
                page = '/paymentPage/fps';
                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken } }
                paymentMethod = "04,BCFP,FPS";
            } else if (selectedPaymentMethod === "Visa") {
                page = '/paymentPage/card';
                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "Visa", paymentMethod: "02,BCMP,CreditCard" } }
                paymentMethod = "02,BCMP,CreditCard";
            } else if (selectedPaymentMethod === "Mastercard") {
                page = '/paymentPage/card';
                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "Mastercard", paymentMethod: "02,BCMP,CreditCard" } }
                paymentMethod = "02,BCMP,CreditCard";
            } else if (selectedPaymentMethod === "JCB") {
                page = '/paymentPage/card';
                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "JCB", paymentMethod: "02,BCMP,CreditCard" } }
                paymentMethod = "02,BCMP,CreditCard";
            } else if (selectedPaymentMethod === "UnionPay") {
                page = '/paymentPage/card';
                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "UnionPay", paymentMethod: "03,BCMP,CreditCard" } }
                paymentMethod = "03,BCMP,CreditCard";
            } else if (selectedPaymentMethod === "PPS") {
                page = '/paymentPage/card';
                stateParams = { state: { amount: totalAmount, transactionid: transactionData.transactionid, webtoken: transactionData.webtoken, type: "PPS", paymentMethod: "01,PPSB,PPS" } }
                paymentMethod = "01,PPSB,PPS";
            }
            if (paymentMethod != "") {
                HttpUtils.post({
                    url: UrlUtils.PAYMENT_CREATE,
                    params: {
                        transNo: transactionData.transactionid,
                        payMethod: paymentMethod,
                        payAmount: totalAmount,
                        appIdList: location.state?.appIdList ?? []
                    },
                    onSuccess: function (responData) {
                        localStorage.removeItem("paymentId");
                        localStorage.setItem("paymentId", responData.id)
                        navigate(page, stateParams);
                    }
                });
            }
        }
    }, [confirmPayment]);

    const getAvailablePayment = () => {
        HttpUtils.post({
            url: paymentPath + getAvailablePaymentUrl,
            params: {
                // "locale": local.zh,;
                "amount": totalAmount,
                // "eserviceids": [
                //     "<eserviceid>", "<eserviceid>"
                // ],
                "preferpaymentmethods": preferpaymentmethods
            },
            onSuccess: (responseData) => {
                let availableMethods = responseData.availablepaymentmethods;
                setAvailableMethods(availableMethods);

            }
        });
        // const responseData = {
        //     "availablepaymentmethods": [
        //         {
        //             "active": "Y",
        //             "code": "04,BCFP,FPS",
        //             "pointstonote": [
        //                 {
        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
        //                     "order": 10,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
        //                     "order": 11,
        //                     "type": "INFO"
        //                 }
        //             ],
        //             "subtype": "FPS"
        //         },
        //         {
        //             "active": "Y",
        //             "code": "02,BCMP,CreditCard",
        //             "pointstonote": [
        //                 {
        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
        //                     "order": 10,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
        //                     "order": 11,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "Merchant Name is applicable to credit card payment method only.",
        //                     "order": 40,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
        //                     "order": 41,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
        //                     "order": 42,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
        //                     "order": 43,
        //                     "type": "INFO"
        //                 }
        //             ],
        //             "subtype": "CreditCard",
        //             "supportedcard": [
        //                 "JCB",
        //                 "MasterCard",
        //                 "Visa"
        //             ]
        //         },
        //         {
        //             "active": "Y",
        //             "code": "03,BCMP,CreditCard",
        //             "pointstonote": [
        //                 {
        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
        //                     "order": 10,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
        //                     "order": 11,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "Merchant Name is applicable to credit card payment method only.",
        //                     "order": 40,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "Under exceptional conditions, a refund may need to be arranged.  If the payment is made by Credit Card, the refund can normally be made to the Credit Card account that is used for the payment.",
        //                     "order": 41,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "Some users may receive an error page or have to wait for several minutes before they get a response from the credit card payment gateway. If you experience such a problem, please wait a moment and retry, or change to use other available payment methods. We apologise for any inconvenience caused.",
        //                     "order": 42,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "Different credit card issuers may have implemented different mechanisms to authenticate the cardholder's identity during online payment. Please contact your card issuer if you want to learn more about the J/Secure, Mastercard SecureCode and Verified by Visa service. ",
        //                     "order": 43,
        //                     "type": "INFO"
        //                 }
        //             ],
        //             "subtype": "CreditCard",
        //             "supportedcard": [
        //                 "UnionPay"
        //             ]
        //         },
        //         {
        //             "active": "Y",
        //             "code": "01,PPSB,PPS",
        //             "pointstonote": [
        //                 {
        //                     "content": "Please take note of the transaction reference number or PRINT this page for making enquiry on the payment status when necessary.",
        //                     "order": 10,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "After pressing the 'Pay' button, please DO NOT leave this e-service until you receive the acknowledgement page, otherwise your transaction may not be successful.",
        //                     "order": 11,
        //                     "type": "INFO"
        //                 },
        //                 {
        //                     "content": "PPS Shop&Buy (PPS) does not support payment via browsers of mobile devices (including mobile phones and tablets) at the moment. If you wish to pay by PPS, please change to use desktop computer. ",
        //                     "order": 21,
        //                     "type": "INFO"
        //                 }
        //             ],
        //             "subtype": "PPS"
        //         }
        //     ]
        // };
        // let availableMethods = responseData.availablepaymentmethods;
        // setAvailableMethods(availableMethods);
        // if (availableMethods.length>0){
        //     availableMethods.forEach((method)=>{
        //         if(method.subtype === "FPS" ){
        //             setFPSStatus(method)
        //         }else if (method.subtype === "CreditCard"){
        //             method.supportedcard.forEach((supportedcard)=>{
        //                 if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa"){
        //                     setCreditCardStatus(method)
        //                 } else {
        //                     if (supportedcard === "UnionPay"){
        //                         setUnionPayStatus(method)
        //                     }
        //                 }
        //             })
        //         }else if (method.subtype === "PPS" ){
        //             setPPSStatus(method)
        //         }
        //     });
        // }
    }

    useEffect(() => {
        console.log(availableMethods)
        if (availableMethods.length > 0) {
            availableMethods.forEach((method) => {
                if (method.subtype === "FPS") {
                    setFPSStatus(method)
                } else if (method.subtype === "CreditCard") {
                    method.supportedcard.forEach((supportedcard) => {
                        if (supportedcard === "JCB" || supportedcard === "MasterCard" || supportedcard === "Visa") {
                            setCreditCardStatus(method)
                        } else {
                            if (supportedcard === "UnionPay") {
                                setUnionPayStatus(method)
                            }
                        }
                    })
                } else if (method.subtype === "PPS") {
                    setPPSStatus(method)
                }
            });
            setOnReady(true)
        }
    }, [availableMethods]);

    const getTransactionId = () => {
        HttpUtils.get({
            url: paymentPath + getTransactionIdUrl,
            onSuccess: (responseData) => {
                // const transactionData = responseData;
                setTransactionData(responseData)
            }
        });
    }

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

    const getAppList = () => {
        HttpUtils.post({
            url: UrlUtils.PAYMENT_APP_LIST,
            params: {
                appIds: appIds
            },
            onSuccess: (responseData) => {
                setItemList(responseData)
            }
        });
    }

    const selectedPaymentMethodHandle = (method) => () => {
        setSelectedPaymentMethod(method);
    };

    const confirmPaymentHandle = () => () => {
        HttpUtils.post({
            url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE,
            params: {
                ids: appIds
            },
            onSuccess: (responData) => {
                if (responData.success == true) {
                    setConfirmPayment(true);
                    return;
                }
                let str = "";
                responData.msg.forEach((item) => {
                    str += "App: " + item.appNo + ", 到期日: " + DateUtils.datetimeStr_Cht(item.expiryDate) + "\n";
                });
                setExpiryDateErrText(str.split('\n').map(str => <>{str}<br/></>));
                setExpiryDateErr(true);
            }
        });
    };

    const getMethodImgClass = (method) => {
        return selectedPaymentMethod == method || selectedPaymentMethod == "" ? "" : "grayscale";
    }

    return (
        <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} width="100%">
                <Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
                    <Grid item xs={12} md={5} style={{ height: '100%' }}>
                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
                            <DataGrid
                                recordList={itemList}
                            />
                        </Box>
                    </Grid>
                    <Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
                        <Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
                            <Grid container justifyContent="flex-start" alignItems="left" >

                                <center>
                                    <Grid item xs={12} md={12} >
                                        <Typography variant="h5" sx={{ textAlign: "left" }}>
                                            交易參考號: {transactionData.transactionid}
                                        </Typography>

                                        <Typography variant="h5" sx={{ textAlign: "left" }}>
                                            支付金額: HK$ {FormatUtils.currencyFormat(totalAmount)}
                                        </Typography>

                                        {/* <Button
                                                component="span"
                                                variant="contained"
                                                size="large"
                                                // color="error"
                                                onClick={() => paymentClick()}
                                                sx={{ mt: 4 }}
                                            >選擇付款方式</Button> */}
                                    </Grid>
                                    <Grid item xs={12} md={12}>
                                        <Grid container >
                                            <Grid item>
                                                <Typography variant="h5" sx={{ textAlign: "left" }}>
                                                    付款金額:
                                                </Typography>
                                            </Grid>
                                            <Grid item>
                                                <Typography variant="h5" sx={{ textAlign: "left" }}>
                                                    {"HK$ " + FormatUtils.currencyFormat(totalAmount)}
                                                </Typography>
                                            </Grid>
                                        </Grid>
                                    </Grid>

                                    {availableMethods.length > 0 ?
                                        !onReady ?
                                            <LoadingComponent /> :
                                            <Grid item xs={12} md={12}>
                                                <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="center">
                                                    <Grid item>
                                                        <Typography variant="h5" sx={{ textAlign: "left" }}>
                                                            請選擇付款方式:
                                                        </Typography>
                                                    </Grid>
                                                    <Grid item>
                                                        <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("FPS")} disabled={fpsStatus.active === "N"}>
                                                            <img className={getMethodImgClass("FPS")} src={FpsIcon} width="80" height="80" alt="FPS"></img>
                                                        </Button>
                                                    </Grid>
                                                    <Grid item>
                                                        <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Visa")} disabled={creditCardStatus.active === "N"}>
                                                            <img className={getMethodImgClass("Visa")} src={VisaIcon} width="80" height="80" alt="Visa"></img>
                                                        </Button>
                                                    </Grid>
                                                    <Grid item>
                                                        <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("Mastercard")} disabled={creditCardStatus.active === "N"}>
                                                            <img className={getMethodImgClass("Mastercard")} src={MasterIcon} width="80" height="80" alt="Mastercard"></img>
                                                        </Button>
                                                    </Grid>
                                                    <Grid item>
                                                        <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("UnionPay")} disabled={unionPayStatus.active === "N"}>
                                                            <img className={getMethodImgClass("UnionPay")} src={UnionPayIcon} width="80" height="80" alt="UnionPay"></img>
                                                        </Button>
                                                    </Grid>
                                                    <Grid item>
                                                        <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("JCB")} disabled={unionPayStatus.active === "N"}>
                                                            <img className={getMethodImgClass("JCB")} src={JcbIcon} width="80" height="80" alt="JCB"></img>
                                                        </Button>
                                                    </Grid>
                                                    <Grid item>
                                                        <Button variant="contained" color="white" onClick={selectedPaymentMethodHandle("PPS")} disabled={ppsStatus.active === "N"}>
                                                            <img className={getMethodImgClass("PPS")} src={PpsIcon} width="80" height="80" alt="PPS"></img>
                                                        </Button>
                                                    </Grid>
                                                </Grid>
                                                {selectedPaymentMethod != "" ?
                                                    <Grid item xs={12} md={12}>
                                                        <Grid container direction="row" justifyContent="flex-start" alignItems="center">
                                                            <Grid item>
                                                                <Typography variant="h5" sx={{ textAlign: "left" }}>
                                                                    已選擇付款方式:
                                                                </Typography>
                                                            </Grid>
                                                            <Grid item>
                                                                <Typography variant="h5" sx={{ textAlign: "left" }}>
                                                                    {selectedPaymentMethod}
                                                                </Typography>
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                    : null}
                                                <Button variant="contained" size="large" color="success" onClick={confirmPaymentHandle()} disabled={selectedPaymentMethod === ""}>
                                                    確認
                                                </Button>
                                            </Grid> :
                                        <Grid container direction="row" justifyContent="center" alignItems="center">
                                            <Typography sx={{ fontSize: "20px", color: "#000000", textAlign: "center" }}>
                                                付款功能現在不可用。
                                            </Typography>
                                        </Grid>
                                    }

                                </center>
                            </Grid>
                            {/* <MultiPaymentWindow open={open}
                                handleCose={handleClose}
                                availableMethods={availableMethods}
                                transactionData={transactionData}
                                totalAmount={totalAmount}
                                fpsStatus={fpsStatus}
                                creditCardStatus={creditCardStatus}
                                unionPayStatus={unionPayStatus}
                                ppsStatus={ppsStatus}
                                setSelectedPaymentMethod={setSelectedPaymentMethod}
                                selectedPaymentMethod={selectedPaymentMethod}
                                setConfirmPayment={setConfirmPayment}
                            /> */}
                        </Box>
                    </Grid>
                </Grid>
            </Grid>
            <Grid item xs={12} md={12} >

            </Grid>
            {/*row 2*/}
            <div>
                <Dialog open={expiryDateErr} onClose={() => setExpiryDateErr(false)}  >
                    <DialogTitle></DialogTitle>
                    <Typography variant="h2" style={{ padding: '16px' }}>行動失敗</Typography>
                    <DialogContent style={{ display: 'flex', }}>
                        <Stack direction="column" justifyContent="space-between">
                            {
                                expiryDateErrText
                            }
                        </Stack>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={() => setExpiryDateErr(false)}><Typography variant="h5">關閉</Typography></Button>
                    </DialogActions>
                </Dialog>
            </div>
        </Grid >
    );
}

export default Index;