PNSPS-frontend-MaterialUI/src/pages/Proof/Payment/Pay.js

// material-ui
import {
    Grid,
    Typography,
    Stack,
    Button,
    Dialog, DialogTitle, DialogContent, DialogActions
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import * as DateUtils from "utils/DateUtils"
import * as FormatUtils from "utils/FormatUtils";

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

import {
    // useEffect,
    useState
} from "react";
import {PNSPS_BUTTON_THEME, PNSPS_LONG_BUTTON_THEME} from "../../../themes/buttonConst";
import {ThemeProvider} from "@emotion/react";
import {FormattedMessage} from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {
    const params = useParams();
    const navigate = useNavigate()
    const [fee, setFee] = useState(0);

    const [record, setRecord] = React.useState();
    const [onReady, setOnReady] = React.useState(false);
    const [isPopUp, setIsPopUp] = useState(false);

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

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


    const loadForm = () => {
        if (params.id > 0) {
            HttpUtils.get({
                url: UrlUtils.GET_PROOF_PAY + "/" + params.id,
                onSuccess: (responseData) => {
                    if (!responseData.data?.id) {
                        navigate("/proof/search");
                    }
                    setRecord(responseData.data);
                    setFee(responseData.data.fee);
                }
            });
        }
    }

    function doPayment() {
        setIsPopUp(false);
        navigate('/paymentPage', { state: { amount: fee, appIdList: [record?.appId] } });
    }

    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 }}>
                                    <FormattedMessage id="proofRecord"/>
                                </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="h3" sx={{ textAlign: "left", ml: 4, mr: 4, mt: 4, borderBottom: "1px solid black" }}>
                                        <FormattedMessage id="publicNoticePaymentProofDoneAndPaid"/>
                                    </Typography>

                                    <Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                        我們已收到申請編號: {record?.appNo} 的稿件校對確定及可付印的指示。
                                        <br /><br />
                                        請於  <span style={{ color: "red" }}>{DateUtils.dateStr_Cht(record?.returnBeforeDate)} 下午 2:00 前</span>  完成繳費，我們將於收到繳費確認後處理刊出事宜。
                                        <br /><br />
                                        如你在憲報期數 {record?.issueYear} 年 {record?.issueVolume} 卷, 第 {record?.issueNo} 期內有多於一個公共啟事的申請，你可選擇完成所有此期所有稿件校對確定後，於繳費期限前在「我的公共啟事」內合併付款。
                                    </Typography>

                                    <Typography variant="h4" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                        請按以下完成繳費：
                                    </Typography>

                                    <Typography variant="h4" sx={{ml:8, textAlign: "left" }}>
                                        <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                            <Button
                                                component="span"
                                                variant="contained"
                                                sx={{ ml: {md:4,lg:4}, mr:4}}
                                                onClick={() => { setIsPopUp(true) }}
                                            >
                                                即時網上繳費
                                            </Button>
                                        </ThemeProvider>

                                        <FormattedMessage id="or"/>

                                        <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                            <Button
                                                component="span"
                                                variant="contained"
                                                sx={{ ml: {sm:4, md:4, lg:4}, mr: 4, mt:{xs:2,sm:2}, mb:{xs:2, sm:2}}}
                                                onClick={()=>{
                                                    navigate("/publicNotice");
                                                }}
                                            >
                                                稍後繳費
                                            </Button>
                                            （返回「我的公共啟事」）
                                        </ThemeProvider>
                                    </Typography>
                                </Grid>
                            </center>
                        </Grid>
                    </Grid>
                    <div>
                        <Dialog
                            open={isPopUp}
                            onClose={() => setIsPopUp(false)}
                            PaperProps={{
                                sx: {
                                    minWidth: '40vw',
                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
                                }
                            }}
                        >
                            <DialogTitle>
                                <Typography variant="h3" >
                                    <FormattedMessage id="payConfirm"/>
                                </Typography>
                            </DialogTitle>
                            <DialogContent style={{ display: 'flex', }}>
                                <Stack direction="column" justifyContent="space-between">
                                    <Typography variant="h4">
                                        <FormattedMessage id="totalAmount"/>(HK$): {FormatUtils.currencyFormat(fee)}
                                    </Typography>
                                </Stack>
                            </DialogContent>
                            <DialogActions>
                                <Button onClick={() => setIsPopUp(false)}>
                                    <Typography variant="h5">
                                        <FormattedMessage id="close"/>
                                    </Typography></Button>
                                <Button onClick={() => doPayment()}><Typography variant="h5">
                                    <FormattedMessage id="confirm"/>
                                </Typography></Button>
                            </DialogActions>
                        </Dialog>
                    </div>
                    {/*row 2*/}
                </Grid >


            )


    );
};

export default Index;