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

// material-ui
import {
    Grid,
    Typography,
    Stack,
    Button,
} from '@mui/material';
import { 
    checkIsOnlyOnlinePayment,
 } from "utils/Utils";
import { useNavigate } from "react-router-dom";
import * as DateUtils from "utils/DateUtils";


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 Index = ({ record }) => {
    const navigate = useNavigate()
    const intl = useIntl();
const isAfter = checkIsOnlyOnlinePayment();

    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={{ display: { xs: 'none', sm: 'none', md: 'block' }, 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} >
                                {isAfter ? (
                                <Typography
                                    variant="h4"
                                    sx={{ textAlign: "left", ml: 8, mr: 4, mt: 4, 
                                            textDecoration: "underline",
                                            textDecorationThickness: "2px",
                                            textUnderlineOffset: "4px" }}
                                >
                                    <FormattedMessage id="proofPaymentHeader_office2" />
                                </Typography>
                                ) : (
                                <Typography
                                    variant="h4"
                                    sx={{
                                    textAlign: "left",
                                    ml: 4,
                                    mr: 4,
                                    mt: 4,
                                    textDecoration: "underline",
                                    textDecorationThickness: "2px",
                                    textUnderlineOffset: "4px"
                                    }}
                                >
                                    <FormattedMessage id="proofPaymentHeader_office" />
                                </Typography>
                                )}



                                <Typography variant="h5" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "left" }}>
                                    <div dangerouslySetInnerHTML={{
                                        __html: intl.formatMessage(
                                            {
                                                id: 'proofPaymentBody_office'
                                            },
                                            {
                                                appNo: record?.appNo,
                                            }
                                        )
                                    }} />
                                    <br />
                                    <div dangerouslySetInnerHTML={{
                                        __html: intl.formatMessage(
                                            {
                                                id: 'proofPaymentBody_office2'
                                            },
                                        )
                                    }} />
                                     <br />
                                    <div dangerouslySetInnerHTML={{
                                        __html: intl.formatMessage(
                                            {
                                                id: 'proofPaymentBody_office3'
                                            }
                                        )
                                    }} />
                                     <br />
                                    <div dangerouslySetInnerHTML={{
                                        __html: intl.formatMessage(
                                            {
                                                id: 'proofPaymentBody_office4'
                                            }
                                        )
                                    }} />
                                    <br />
                                    <div dangerouslySetInnerHTML={{
                                        __html: intl.formatMessage(
                                            {
                                                id: 'proofPaymentBody_office5'
                                            },
                                            {
                                                paymentDeadline: DateUtils.dateFormat(record?.closingDate, intl.formatMessage({id: "dateStrFormat"})),
                                            }
                                        )
                                    }} />
                                    <br />
                                    <div dangerouslySetInnerHTML={{
                                        __html: intl.formatMessage(
                                            {
                                                id: 'proofPaymentBody_office6'
                                            }
                                        )
                                    }} />


                                </Typography>

                                <Typography variant="h3" sx={{ ml: 8, mt: 4, mr: 8, textAlign: "center" }}>
                                    <Button
                                        component="span"
                                        variant="contained"
                                        size="large"
                                        sx={{ m: 4 }}
                                        onClick={() => {
                                            navigate("/publicNotice");
                                        }}
                                    >
                                        <FormattedMessage id="backToNoticePage" />
                                    </Button>
                                </Typography>
                            </Grid>
                        </center>
                    </Grid>
                </Grid>
                {/*row 2*/}
            </Grid >


        )


    );
};

export default Index;