PNSPS-frontend-MaterialUI/src/pages/authentication/AuthWrapper.js

import PropTypes from 'prop-types';
import { Box, Grid, Typography, Dialog, DialogContent, IconButton } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import Loadable from 'components/Loadable';
import { lazy, useState } from 'react';
import { FormattedMessage, useIntl } from "react-intl";
import { checkSysEnv, checkPaymentSuspension } from "utils/Utils";
import backbroundImg from 'assets/images/bg_ml.jpg';
import lgceImg from 'assets/images/2025_lgce.jpg'; // <-- your popup image
import 'assets/style/loginStyles.css';
import { checkIsOnlyOnlinePayment } from '../../utils/Utils';

const AuthCard = Loadable(lazy(() => import('./AuthCardCustom')));

const BackgroundHead = {
  backgroundImage: `url(${backbroundImg})`,
  width: '100%',
  height: '100%',
  backgroundSize: 'cover'
};

const AuthWrapper = ({ children }) => {
  const intl = useIntl();

  // --- Date control ---
  const today = new Date();
  const showUntil = new Date("2025-11-27T00:00:00");  // 8 Dec 2025 and onwards = hide popup
  const [openPopup, setOpenPopup] = useState(today < showUntil);

  const handleClosePopup = () => {
    setOpenPopup(false);
  };

  const isOnlyOnline = checkIsOnlyOnlinePayment();
  console.log("isOnlyOnlinePayment =", isOnlyOnline);

  return (
    <Box sx={{ minHeight: '87vh' }}>
      <Dialog
        open={openPopup}
        onClose={handleClosePopup}
        aria-labelledby="election-promo-title"
        maxWidth="md"
        PaperProps={{
          sx: {
            borderRadius: 2,
            overflow: 'hidden',
            boxShadow: 6
          }
        }}
      >
        <Box sx={{ position: 'relative' }}>
          <IconButton
            aria-label="Close"
            onClick={handleClosePopup}
            sx={{
              position: 'absolute',
              top: 6,
              right: 6,
              zIndex: 1,
              bgcolor: 'rgba(255,255,255,0.8)',
              '&:hover': { bgcolor: 'rgba(255,255,255,1)' }
            }}
          >
            <CloseIcon />
          </IconButton>
          <DialogContent sx={{ p: 0 }}>
            <Box
              component="img"
              src={lgceImg}
              alt={intl.formatMessage({ id: 'lgce_alt', defaultMessage: '2025 Legislative Council General Election' })}
              title={intl.formatMessage({ id: 'lgce_title', defaultMessage: '2025 Legislative Council General Election' })}
              sx={{
                display: 'block',
                width: '100%',
                maxWidth: '720px',
                height: 'auto'
              }}
            />
          </DialogContent>
        </Box>
      </Dialog>

      {/* Page content */}
      <div style={BackgroundHead}>
        <Grid
          container
          direction="row"
          justifyContent="space-between"
          alignItems="center"
          sx={{ minHeight: '87vh' }}
        >
          <Grid item xs={12} md={8} lg={8} xl={8}>
            <Grid
              container
              direction="column"
              justifyContent="flex-start"
              alignItems="flex-start"
              sx={{ minHeight: { md: 'calc(87vh)' } }}
            >
              <Grid item xs={12} sx={{ ml: 4,}}>
              {checkPaymentSuspension()?
                <Typography style={{ color: 'red', textAlign: "flex-start" }}>
                  <div style={{ padding: 12 }} dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: "suspensionMessageText" }) }} />
                </Typography>
              :
                <Typography style={{ textAlign: "flex-start" }}>
                  <div
                    style={{ padding: 12 }}
                    dangerouslySetInnerHTML={{
                      __html: intl.formatMessage({
                        id: isOnlyOnline
                          ? "homePageHeaderMessageFullImpl"
                          : "homePageHeaderMessage"
                      })
                    }}
                  />
                </Typography>

              }
              </Grid>
              <Grid
                container
                direction="column"
                justifyContent="flex-start"
                alignItems="center"
                spacing={2}
                sx={{ minHeight: { md: 'calc(50vh)' } }}
              >
                <Grid item xs={12} sx={{ ml: 4, mt: 12, display: { xs: 'none', sm: 'block' } }}>
                  <Typography style={{ textAlign: "center", fontSize: "1.8rem" }}>
                    <FormattedMessage id="HKSARGOV" />
                  </Typography>
                  <Typography style={{ textAlign: "center", fontSize: "1.8rem" }}>
                    <FormattedMessage id="Gazette" />
                  </Typography>
                  <Typography style={{ textAlign: "center", fontSize: "1.8rem" }}>
                    <FormattedMessage id="PNSPS_fullname" />
                  </Typography>
                  {checkSysEnv() !== '' ? (
                    <Typography style={{ color: 'red', textAlign: "center", fontSize: "1.8rem" }}>
                      User Acceptance Test Environment
                    </Typography>
                  ) : (
                    ""
                  )}
                </Grid>
              </Grid>
            </Grid>
          </Grid>

          <Grid item xs={12} md={4} lg={4} xl={4}>
            <Grid
              container
              justifyContent="center"
              alignItems="center"
              sx={{ minHeight: { xs: 'calc(90vh - 134px)', md: 'calc(90vh - 112px)' } }}
            >
              <Grid item xs={12} md={11} lg={11} xl={11}>
                <AuthCard>{children}</AuthCard>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </div>
    </Box>
  );
};

AuthWrapper.propTypes = {
  children: PropTypes.node
};

export default AuthWrapper;