Files
pedwfrontend/components/myportal/makenewappeal.js
T
2026-03-18 14:11:37 +00:00

81 lines
3.0 KiB
JavaScript

import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { getDocLink } from "../utils";
export default function MakeNewAppeal(props) {
let { t } = useTranslation();
const { docsOffline } = props;
const router = useRouter();
const { locale } = router;
let ShowDocLinks = getDocLink(docsOffline);
return (
<div className="card" id="new-appeal-card">
<div className="card-body">
<h2 className="govuk-heading-s">
{t("myportal:makenewappeal-card-title")}
</h2>
<p className="govuk-body-s">
{t("myportal:makenewappeal-card-paragraph-zero")}
</p>
<p className="govuk-body-s">
{t("myportal:makenewappeal-card-paragraph-one")}{" "}
<Link href={t("myportal:makenewappeal-card-guidance-link")}>
{t("myportal:makenewappeal-card-link-label")}
</Link>
</p>
<p className="govuk-body-s">
{t("myportal:makenewappeal-card-paragraph-two")}
</p>
{ShowDocLinks ? (
<div className="govuk-warning-text ">
<span
className="govuk-warning-text__icon"
aria-hidden="true"
>
!
</span>
<strong className="govuk-warning-text__text govuk-!-margin-top-2">
<span className="govuk-visually-hidden">
Notice
</span>
{t("myportal:docsoffline-newappeal-label")}
</strong>
</div>
) : (
<div>
<Link href={"/newappeal"} className="govuk-button">
{t("myportal:makenewappeal-card-button-label")}
</Link>
</div>
)}
<p className="govuk-body-s govuk govuk-!-margin-top-5">
{t("myportal:makenewappeal-card-paragraph-three")}
</p>
<ul>
<li>
{" "}
{t(
"myportal:makenewappeal-card-paragraph-three-bullet-one"
)}
</li>
<li>
{" "}
{t(
"myportal:makenewappeal-card-paragraph-three-bullet-two"
)}
</li>
</ul>
<p className="govuk-body-s govuk govuk-!-margin-top-5">
{t("myportal:makenewappeal-card-paragraph-four")}
</p>
</div>
</div>
);
}