service banner annpouncement and display logic

This commit is contained in:
2026-01-28 13:30:05 +00:00
parent c40d2df1e9
commit c8f43710d3
+98 -26
View File
@@ -1,46 +1,118 @@
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import router from "next/router"; import router from "next/router";
import Link from "next/link"; import Link from "next/link";
import CaseNoticeBanner from "./case/caseNoticeBanner";
export default function ServiceBanner(props) { export default function ServiceBanner(props) {
let { t, lang } = useTranslation(); let { t, lang } = useTranslation();
const showSigninFromEnv = false;
const showNoticeFromEnv = true;
// keep backwards-compat with existing usage
const showSignin = props?.noSignin === true ? false : showSigninFromEnv;
const signInButton = () => { const signInButton = () => {
router.push( router.push(
`${ `${
router.locale == "cy" ? "/awd/mewngofnodi" : "/auth/signin" router.locale == "cy" ? "/awd/mewngofnodi" : "/auth/signin"
}?callbackUrl=${encodeURIComponent( }?callbackUrl=${encodeURIComponent(
window.location.href window.location.href,
)}&error=EmailSignin` )}&error=EmailSignin`,
); );
}; };
return ( return (
<div className="servicebanner"> <>
<h1> <div className="servicebanner">
<img <h1>
className={ <img
router.locale == "cy" className={
? "govuk-!-margin-top-4 serviceTitle cy" router.locale == "cy"
: "govuk-!-margin-top-4 serviceTitle" ? "govuk-!-margin-top-4 serviceTitle cy"
} : "govuk-!-margin-top-4 serviceTitle"
src={ }
router.locale == "cy" src={
? "/assets/images/planning-casework-cy.svg" router.locale == "cy"
: "/assets/images/planning-casework-en.svg" ? "/assets/images/planning-casework-cy.svg"
} : "/assets/images/planning-casework-en.svg"
alt="Planning casework" }
/> alt="Planning casework"
</h1> />
{props.noSignin != true && ( </h1>
<div className="serviceBanner_userDetails">
<button {showSignin && props.noSignin != true && (
onClick={() => signInButton()} <div className="serviceBanner_userDetails">
className="govuk-header__link " <button
onClick={() => signInButton()}
className="govuk-header__link "
>
{t("common:signin-label")}
</button>
</div>
)}
</div>
{showNoticeFromEnv && (
<div>
<div
className="govuk-warning-text noticebanner govuk-!-margin-bottom-0"
key={1}
> >
{t("common:signin-label")} <strong className="govuk-warning-text__text">
</button> <span className="govuk-visually-hidden">
Announcement
</span>
</strong>
<div>
<div className=" govuk-body-s">
<h2 className="govuk-heading-s">
{router.locale == "cy"
? "Cyhoeddiad"
: "Announcement"}
</h2>
</div>
<div className="govuk-body-s">
{router.locale == "cy" ? (
<>
<p>
Oherwydd gwaith cynnal a chadw
hanfodol, rydym yn disgwyl rhywfaint
o darfu ar ein gwasanaethau Porth
Gwaith Achos rhwng 9-13 Chwefror
2026.{" "}
</p>
<p>
Ymddiheurwn am yr anghyfleustra. Am
ymholiadau brys yn ystod y cyfnod
hwn, cysylltwch â{" "}
<a href="mailto:pedw.gwaithachos@llyw.cymru">
pedw.gwaithachos@llyw.cymru
</a>
</p>
</>
) : (
<>
<p>
Due to essential maintenance, we are
expecting some disruption to our
Casework Portal services between
9-13 February 2026.
</p>
<p>
We apologise for the inconvenience.
For urgent enquries during this time
please contact{" "}
<a href="mailto:pedw.casework@gov.wales">
pedw.casework@gov.wales
</a>
</p>
</>
)}
</div>
</div>
</div>
</div> </div>
)} )}
</div> </>
); );
} }