PNSPS-frontend-MaterialUI/src/pages/extra-pages/UserMenuPub1/index.js

// File: src/pages/userGuide/UserMenuPub1.jsx
// Notes:
// - No new libraries.
// - Fixes: target="_blank", rel="noopener noreferrer"
// - Adds aria-label for icon-only download links (WCAG 2.4.4 / 1.1.1 friendly)
// - Fixes invalid HTML: no <p> wrapping <table>
// - Adds <thead>/<tbody>, scope, and React keys

import { Grid, Typography, Stack } from "@mui/material";
import { useState, useEffect, lazy } from "react";
import Loadable from "components/Loadable";
import { useIntl, FormattedMessage } from "react-intl";
import usePageTitle from "components/usePageTitle";

import DownloadIcon from "@mui/icons-material/Download";
import titleBackgroundImg from "assets/images/dashboard/gazette-bar.png";

const LoadingComponent = Loadable(lazy(() => import("pages/extra-pages/LoadingComponent")));

const BackgroundHead = {
  backgroundImage: `url(${titleBackgroundImg})`,
  width: "auto",
  height: "auto",
  backgroundSize: "contain",
  backgroundRepeat: "no-repeat",
  backgroundColor: "#0c489e",
  backgroundPosition: "right",
};

const tableStyle = {
  fontFamily: "arial, sans-serif",
  borderCollapse: "collapse",
  width: "100%",
};

const cellStyle = {
  border: "1px solid #dddddd",
  textAlign: "left",
  padding: "8px",
};

const UserMenuPub1 = () => {
  const intl = useIntl();
  const { locale } = intl;

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

  // Localized document title/meta for /userGuidePub
  usePageTitle("userGuide");

  useEffect(() => {
    setOnReady(true);
  }, [locale]);

  const pnspsurl = `https://${window.location.hostname}`;

  const pickByLocale = (en, zhHK, zhCN) => (locale === "zh-HK" ? zhHK : locale === "en" ? en : zhCN);

  // If you already created downloadPdfAria in i18n, keep it.
  // Example en: "Download {guide} PDF ({userType})"
  const buildAria = (guideId, userTypeId) => {
    const guideTitle = intl.formatMessage({ id: guideId });
    const userType = intl.formatMessage({ id: userTypeId });

    return intl.formatMessage(
      { id: "downloadPdfAria", defaultMessage: "Download {guide} PDF ({userType})" },
      { guide: guideTitle, userType }
    );
  };

  const rows = [
    {
      id: "userGuide1",
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/01 - Create account - c 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/01c - Create account - c 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/01sc - Create account - c 1.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/01 - Create account - p 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/01c - Create account - p 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/01sc - Create account - p 1.pdf`,
      },
    },
    {
      id: "userGuide2",
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/02 - Login - c 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/02c - Login - c 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/02sc - Login - c 1.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/02 - Login - p 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/02c - Login - p 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/02sc - Login - p 1.pdf`,
      },
    },
    {
      id: "userGuide3", // UPDATED TO v2
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - c 2.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - c 2.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - c 2.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/03 - Application for publishing a Public Notice in the Gazette - p 2.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/03c - Application for publishing a Public Notice in the Gazette - p 2.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/03sc - Application for publishing a Public Notice in the Gazette - p 2.pdf`,
      },
    },
    {
      id: "userGuide4",
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - c 2.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - c 2.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - c 2.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/04 - Proofreading reply (with correction) - p 2.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/04c - Proofreading reply (with correction) - p 2.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/04sc - Proofreading reply (with correction) - p 2.pdf`,
      },
    },
    {
      id: "userGuide5",
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - c 2.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - c 2.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - c 2.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/05 - Proofreading reply (pass for printing) - p 2.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/05c - Proofreading reply (pass for printing) - p 2.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/05sc - Proofreading reply (pass for printing) - p 2.pdf`,
      },
    },
    {
      id: "userGuide6",
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - c 1.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/06 - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/06c - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/06sc - Cancellation of application for publishing a Public Notice in the Gazette - p 1.pdf`,
      },
    },
    {
      id: "userGuide7",
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/07 - Forgot password - c 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/07c - Forgot password - c 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/07sc - Forgot password - c 1.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/07 - Forgot password - p 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/07c - Forgot password - p 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/07sc - Forgot password - p 1.pdf`,
      },
    },
    {
      id: "userGuide8",
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/08 - Change password - c 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/08c - Change password - c 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/08sc - Change password - c 1.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/08 - Change password - p 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/08c - Change password - p 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/08sc - Change password - p 1.pdf`,
      },
    },
    {
      id: "userGuide9",
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/09 - Language of email notification - c 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/09c - Language of email notification - c 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/09sc - Language of email notification - c 1.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/09 - Language of email notification - p 1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/09c - Language of email notification - p 1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/09sc - Language of email notification - p 1.pdf`,
      },
    },
    {
      id: "userGuidePub10",
      org: {
        en: `${pnspsurl}/user-guide-pub-1/eng/10-Payment-c1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/10c-Payment-c1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/10sc-Payment-c1.pdf`,
      },
      ind: {
        en: `${pnspsurl}/user-guide-pub-1/eng/10-Payment-p1.pdf`,
        zhHK: `${pnspsurl}/user-guide-pub-1/cht/10c-Payment-p1.pdf`,
        zhCN: `${pnspsurl}/user-guide-pub-1/chs/10sc-Payment-p1.pdf`,
      },
    },
  ];

  const renderDownloadLink = (href, ariaLabel) => (
    <a href={href} target="_blank" rel="noopener noreferrer" aria-label={ariaLabel}>
      <DownloadIcon aria-hidden="true" focusable="false" />
    </a>
  );

  if (!onReady) {
    return (
      <Grid container sx={{ minHeight: "87vh", mb: 3 }} direction="column" justifyContent="center" alignItems="center">
        <Grid item>
          <LoadingComponent />
        </Grid>
      </Grid>
    );
  }

  return (
    <Grid container sx={{ minHeight: "87vh", mb: 3 }} direction="column" alignItems="center">
      <Grid item xs={12} md={12} width="100%">
        <div style={BackgroundHead}>
          <Stack direction="row" height="70px" justifyContent="flex-start" alignItems="center">
            <Typography component="h1" ml={15} color="#FFF" variant="h4" sx={{ display: { xs: "none", sm: "none", md: "block" } }}>
              <FormattedMessage id="userGuide" />
            </Typography>
          </Stack>
        </div>
      </Grid>

      <Grid container justifyContent="center" alignItems="center">
        <Grid item xs={10} md={8} lg={6}>
          <div style={{ textAlign: "justify", textJustify: "interWord", fontStyle: "normal" }}>
            <table style={tableStyle}>
              <thead>
                <tr>
                  <th style={cellStyle} width="70%" scope="col"></th>
                  <th style={cellStyle} width="15%" scope="col">
                    <FormattedMessage id="forOrgUser" />
                  </th>
                  <th style={cellStyle} width="15%" scope="col">
                    <FormattedMessage id="forIndUser" />
                  </th>
                </tr>
              </thead>

              <tbody>
                {rows.map((r) => {
                  const orgHref = pickByLocale(r.org.en, r.org.zhHK, r.org.zhCN);
                  const indHref = pickByLocale(r.ind.en, r.ind.zhHK, r.ind.zhCN);

                  const guideTitle = intl.formatMessage({ id: r.id });

                  return (
                    <tr key={r.id}>
                      <td style={cellStyle}>{guideTitle}</td>
                      <td style={cellStyle}>
                        {renderDownloadLink(orgHref, buildAria(r.id, "forOrgUser"))}
                      </td>
                      <td style={cellStyle}>
                        {renderDownloadLink(indHref, buildAria(r.id, "forIndUser"))}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>

            <p style={{ marginTop: 12 }}>
              <FormattedMessage id="userGuidePubNote" />
            </p>
          </div>
        </Grid>
      </Grid>
    </Grid>
  );
};

export default UserMenuPub1;