638 lines
28 KiB
JavaScript
638 lines
28 KiB
JavaScript
import useTranslation from "next-translate/useTranslation";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { connect } from "react-redux";
|
|
|
|
import { useSession } from "next-auth/react";
|
|
import { setCurrentView } from "../store/currentView/action";
|
|
import { change } from "redux-form";
|
|
|
|
import { setCurrentSection } from "../store/appealType/action";
|
|
import {
|
|
setRepresentationCapacity,
|
|
setRepresentationSubmit
|
|
} from "../store/currentView/action";
|
|
import { resolveCaseBreadcrumbState } from "../lib/routing/routeState";
|
|
const Breadcrumbs = (props) => {
|
|
const {
|
|
currentView,
|
|
setCurrentSection,
|
|
setRepresentationSubmit,
|
|
appealType,
|
|
showQuestionnaireSection,
|
|
setShowQuestionnaireSection
|
|
} = props;
|
|
const router = useRouter();
|
|
let { t } = useTranslation();
|
|
|
|
const { data: session } = useSession();
|
|
|
|
const nestedProps = props?.props || {};
|
|
const nestedSearchString = nestedProps?.search?.searchString || "";
|
|
const nestedCurrentReference =
|
|
nestedProps?.currentView?.caseReference?.currentReference || "";
|
|
|
|
const isWelsh = router.locale === "cy";
|
|
const localisedPath = (englishPath, welshSuffixPath) =>
|
|
isWelsh ? `/${router.locale}${welshSuffixPath}` : englishPath;
|
|
|
|
const currentReference =
|
|
currentView?.caseReference?.currentReference || nestedCurrentReference;
|
|
const fallbackSearchTitle =
|
|
props?.searchResultsObj?.searchResultsObj?.value?.[0]?.title || "";
|
|
const caseReferenceDisplay = currentReference || fallbackSearchTitle;
|
|
|
|
const myPortalHref = localisedPath("/myportal", "/fymhorth");
|
|
const cyMyPortalHref = myPortalHref;
|
|
const pathname = router.pathname;
|
|
const isPath = (path) => pathname === path;
|
|
const caseReference = currentView?.caseReference || {};
|
|
const currentViewState = currentView?.currentView || {};
|
|
const repDetails = caseReference?.repDetails;
|
|
const hasRepDetails = Object.prototype.hasOwnProperty.call(
|
|
caseReference,
|
|
"repDetails"
|
|
);
|
|
|
|
const qcount =
|
|
caseReference.appealType === 846040000 ||
|
|
caseReference.appealType === 846040001 ||
|
|
caseReference.appealType === 846040025 ||
|
|
caseReference.appealType === 846040004 ||
|
|
caseReference.appealType === 846040018 ||
|
|
caseReference.appealType === 846040003 ||
|
|
caseReference.appealType === 846040009 ||
|
|
caseReference.appealType === 846040008
|
|
? 7
|
|
: caseReference.appealType === 846040005 ||
|
|
caseReference.appealType === 846040006 ||
|
|
caseReference.appealType === 846040007
|
|
? 9
|
|
: "";
|
|
|
|
const hideServiceNamePaths = [
|
|
"/myportal/[appealtypes]",
|
|
"/newappeal",
|
|
"/newappeal/[appealtypes]",
|
|
"/myportal/representation"
|
|
];
|
|
const shouldShowServiceName = !hideServiceNamePaths.includes(pathname);
|
|
|
|
const getViewAllLabel = (viewKey) => {
|
|
const labelsByKey = {
|
|
awaitingSubmissionDetails: t(
|
|
"myportal:awatitingsubmission-card-title"
|
|
),
|
|
watchedCases: t("myportal:watchedcases-card-title"),
|
|
myCases: t("myportal:mycases-card-title"),
|
|
myRepresentations: t("myportal:myrepresentations-card-title"),
|
|
mySubmittedReps: "Submitted representations"
|
|
};
|
|
|
|
return labelsByKey[viewKey] || null;
|
|
};
|
|
|
|
const getStaticTextCrumbLabel = (path) => {
|
|
const staticTextCrumbByPath = {
|
|
"/account/register": t("account:register-new-account-heading"),
|
|
"/dns": t("dnsCommon:service-name"),
|
|
"/dnsapplications": t("dnsCommon:service-name"),
|
|
"/dns/application-process": "Guidance",
|
|
"/dns/help": "Help",
|
|
"/dns/contact-us": t("common:footer-contact-us-link-label"),
|
|
"/dns/applications": t("dnsApplications:page-title"),
|
|
"/help/cookies": t("cookies:cookie-breadcrumb"),
|
|
"/privacy": t("common:footer-privacy-link-label"),
|
|
"/accessibility": t("common:footer-accessibility-link-label"),
|
|
"/details-about-cookies": t("cookies:cookie-policy-title-heading"),
|
|
"/auth/signin": t("auth:auth-page-title"),
|
|
"/auth/verify-request": t("auth:auth-check-email-page-title"),
|
|
"/auth/error": t("auth:auth-error-signin-error-title")
|
|
};
|
|
|
|
return staticTextCrumbByPath[path] || null;
|
|
};
|
|
|
|
const getSimpleRouteRenderer = (path) => {
|
|
const simpleRouteRenderersByPath = {
|
|
"/myportal": () => renderTextCrumb(t("myportal:page-title")),
|
|
"/searchresults": () =>
|
|
renderTextCrumb(t("common:breadcrumb-search-results")),
|
|
"/advancedsearch": () =>
|
|
renderTextCrumb(t("common:breadcrumb-advanced-search")),
|
|
"/addresssearch": () =>
|
|
renderTextCrumb(t("common:breadcrumb-address-search")),
|
|
"/contactus": () =>
|
|
renderTextCrumb(t("common:footer-contact-us-link-label")),
|
|
"/viewall": () =>
|
|
renderMyPortalSectionCrumbs(t("common:breadcrumb-your-cases")),
|
|
"/myportal/dnsapplications": () =>
|
|
renderMyPortalSectionCrumbs(t("dnsCommon:service-name"))
|
|
};
|
|
|
|
return simpleRouteRenderersByPath[path] || null;
|
|
};
|
|
|
|
const getSimpleLinkTextPairRenderer = (path) => {
|
|
const simpleLinkTextPairRenderersByPath = {
|
|
"/addresssearchresults": () => (
|
|
<>
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? router.locale + "/chwiliadcyfeiriadau"
|
|
: "/addresssearch",
|
|
t("common:breadcrumb-address-search")
|
|
)}
|
|
{renderTextCrumb(
|
|
t("common:breadcrumb-address-search-results")
|
|
)}
|
|
</>
|
|
),
|
|
"/advancedsearchresults": () => (
|
|
<>
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? router.locale + "/advancedsearch"
|
|
: "/advancedsearch",
|
|
t("common:breadcrumb-advanced-search")
|
|
)}
|
|
{renderTextCrumb(
|
|
t("common:breadcrumb-advanced-search-results")
|
|
)}
|
|
</>
|
|
)
|
|
};
|
|
|
|
return simpleLinkTextPairRenderersByPath[path] || null;
|
|
};
|
|
|
|
const renderMyPortalCrumb = () => (
|
|
<li className="govuk-breadcrumbs__list-item">
|
|
<Link href={myPortalHref} className="govuk-breadcrumbs__link">
|
|
{t("common:breadcrumb-my-portal")}
|
|
</Link>
|
|
</li>
|
|
);
|
|
|
|
const renderMyPortalSectionCrumbs = (sectionLabel) => (
|
|
<>
|
|
{renderMyPortalCrumb()}
|
|
{renderTextCrumb(sectionLabel)}
|
|
</>
|
|
);
|
|
|
|
const renderCaseReferenceCrumb = (referenceValue) => (
|
|
<li className="govuk-breadcrumbs__list-item">
|
|
{t("common:breadcrumb-case-reference")}: {referenceValue}
|
|
</li>
|
|
);
|
|
|
|
const renderTextCrumb = (label) => (
|
|
<li className="govuk-breadcrumbs__list-item">{label}</li>
|
|
);
|
|
|
|
const renderLinkCrumb = (href, label, onClick) => (
|
|
<li className="govuk-breadcrumbs__list-item">
|
|
<Link
|
|
href={href}
|
|
onClick={onClick}
|
|
className="govuk-breadcrumbs__link"
|
|
>
|
|
{label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
|
|
const renderAnchorCrumb = (
|
|
href,
|
|
label,
|
|
onClick,
|
|
listItemClass = "govuk-breadcrumbs__list-item"
|
|
) => (
|
|
<li className={listItemClass}>
|
|
<a
|
|
className="govuk-breadcrumbs__link"
|
|
href={href}
|
|
onClick={onClick}
|
|
>
|
|
{label}
|
|
</a>
|
|
</li>
|
|
);
|
|
|
|
const renderBackCrumb = (
|
|
onClick,
|
|
listItemClass = "govuk-breadcrumbs__link-item backChevron"
|
|
) => renderAnchorCrumb("#", t("common:back-link"), onClick, listItemClass);
|
|
|
|
const renderDnsCaseReferenceCrumbs = (referenceValue) => (
|
|
<>
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? router.locale + "/dnsapplications"
|
|
: "/dnsapplications",
|
|
t("dnsCommon:service-name")
|
|
)}
|
|
{renderCaseReferenceCrumb(referenceValue)}
|
|
</>
|
|
);
|
|
|
|
const { breadcrumbHref, caseResultsHref, breadcrumbLabel } =
|
|
resolveCaseBreadcrumbState({
|
|
query: router.query,
|
|
hasSession: Boolean(session),
|
|
getViewAllLabel,
|
|
advancedLabel: t("common:breadcrumb-advanced-search-results"),
|
|
addressLabel: t("common:breadcrumb-address-search-results"),
|
|
defaultLabel: t("common:breadcrumb-search-results")
|
|
});
|
|
return (
|
|
<>
|
|
<nav
|
|
aria-label={"Breadcrumb for PEDW"}
|
|
role="navigation"
|
|
data-module="track-click"
|
|
>
|
|
<div className="govuk-breadcrumbs ">
|
|
<ol className="govuk-breadcrumbs__list">
|
|
{shouldShowServiceName &&
|
|
renderLinkCrumb(
|
|
"/",
|
|
t("common:service-name-breadcrumb")
|
|
)}
|
|
|
|
{(() => {
|
|
const renderSimpleRoute =
|
|
getSimpleRouteRenderer(pathname);
|
|
return renderSimpleRoute
|
|
? renderSimpleRoute()
|
|
: null;
|
|
})()}
|
|
{(() => {
|
|
const renderSimpleLinkTextPair =
|
|
getSimpleLinkTextPairRenderer(pathname);
|
|
return renderSimpleLinkTextPair
|
|
? renderSimpleLinkTextPair()
|
|
: null;
|
|
})()}
|
|
{isPath("/myportal/searchresults") && (
|
|
<>
|
|
{renderAnchorCrumb(
|
|
myPortalHref,
|
|
t("common:breadcrumb-my-portal")
|
|
)}
|
|
<li className="govuk-breadcrumbs__list-item">
|
|
{t("common:breadcrumb-search-results")}
|
|
</li>
|
|
</>
|
|
)}
|
|
{isPath("/myportal/addresssearch") &&
|
|
renderMyPortalSectionCrumbs(
|
|
t("common:breadcrumb-address-search")
|
|
)}
|
|
{isPath("/myportal/advancedsearch") &&
|
|
renderMyPortalSectionCrumbs(
|
|
t("common:breadcrumb-advanced-search")
|
|
)}
|
|
{isPath("/myportal/contactus") &&
|
|
renderMyPortalSectionCrumbs(
|
|
t("common:footer-contact-us-link-label")
|
|
)}
|
|
{isPath("/myportal/advancedsearchresults") && (
|
|
<>
|
|
{renderMyPortalCrumb()}
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? router.locale +
|
|
"/myportal/advancedsearch"
|
|
: "/myportal/advancedsearch",
|
|
t("common:breadcrumb-advanced-search")
|
|
)}
|
|
{renderTextCrumb(
|
|
t(
|
|
"common:breadcrumb-advanced-search-results"
|
|
)
|
|
)}
|
|
</>
|
|
)}
|
|
{isPath("/myportal/addresssearchresults") && (
|
|
<>
|
|
{renderMyPortalCrumb()}
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? "/" +
|
|
router.locale +
|
|
"/fymhorth/chwiliadcyfeiriadau"
|
|
: "/myportal/addresssearch",
|
|
t("common:breadcrumb-address-search")
|
|
)}
|
|
{renderTextCrumb(
|
|
t(
|
|
"common:breadcrumb-address-search-results"
|
|
)
|
|
)}
|
|
</>
|
|
)}
|
|
{isPath("/newappeal") && <></>}
|
|
{isPath("/newappeal/[appealtypes]") && (
|
|
<>
|
|
{appealType.currentSection > 1 &&
|
|
(appealType.currentSection === 9999
|
|
? renderLinkCrumb(
|
|
"/",
|
|
t(
|
|
"common:service-name-breadcrumb"
|
|
)
|
|
)
|
|
: renderBackCrumb(
|
|
() =>
|
|
setCurrentSection(
|
|
appealType.currentSection -
|
|
1
|
|
),
|
|
"govuk-breadcrumbs__link-item"
|
|
))}
|
|
</>
|
|
)}
|
|
{isPath("/myportal/[appealtypes]") && (
|
|
<>
|
|
{appealType.currentSection > 1 &&
|
|
(appealType.currentSection === 9999
|
|
? renderLinkCrumb(
|
|
"/",
|
|
t(
|
|
"common:service-name-breadcrumb"
|
|
)
|
|
)
|
|
: renderBackCrumb(() =>
|
|
setCurrentSection(
|
|
appealType.currentSection - 1
|
|
)
|
|
))}
|
|
</>
|
|
)}
|
|
{isPath("/newappeal/selectappeal") && (
|
|
<>
|
|
{renderLinkCrumb(
|
|
myPortalHref,
|
|
t("newappeal:parent-page-title")
|
|
)}
|
|
{renderLinkCrumb(
|
|
myPortalHref,
|
|
t("newappeal:page-title")
|
|
)}
|
|
<li className="govuk-breadcrumbs__list-item">
|
|
Select Appeal
|
|
</li>
|
|
</>
|
|
)}
|
|
{isPath("/myportal/viewall") && (
|
|
<>
|
|
{renderMyPortalCrumb()}
|
|
<li className="govuk-breadcrumbs__list-item">
|
|
{getViewAllLabel(
|
|
currentViewState.viewKey ||
|
|
router.query.key
|
|
)}
|
|
</li>
|
|
</>
|
|
)}
|
|
{isPath("/myportal/case") && (
|
|
<>
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? "/" + router.locale + "/fymhorth"
|
|
: "/myportal",
|
|
t("common:breadcrumb-my-portal")
|
|
)}
|
|
{renderCaseReferenceCrumb(currentReference)}
|
|
</>
|
|
)}
|
|
{isPath("/case/[ticketnumber]") && (
|
|
<>
|
|
{renderLinkCrumb(
|
|
caseResultsHref,
|
|
breadcrumbLabel
|
|
)}
|
|
{renderCaseReferenceCrumb(fallbackSearchTitle)}
|
|
</>
|
|
)}
|
|
{isPath("/case/id/[incident]") && (
|
|
<>
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? "/" +
|
|
router.locale +
|
|
"/chwiliadcyfeiriadau"
|
|
: "/addresssearch",
|
|
t("common:breadcrumb-address-search")
|
|
)}
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? "/" +
|
|
router.locale +
|
|
"/canlyniadaucyfeiriadau?" +
|
|
nestedSearchString
|
|
: "/addresssearchresults?" +
|
|
nestedSearchString,
|
|
t(
|
|
"common:breadcrumb-address-search-results"
|
|
)
|
|
)}
|
|
{renderCaseReferenceCrumb(currentReference)}
|
|
</>
|
|
)}
|
|
{isPath("/myportal/case/id/[incident]") && (
|
|
<>
|
|
{" "}
|
|
{renderMyPortalCrumb()}
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? "/" +
|
|
router.locale +
|
|
"/fymhorth/chwiliadcyfeiriadau"
|
|
: "/myportal/addresssearch",
|
|
t("common:breadcrumb-address-search")
|
|
)}
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? "/" +
|
|
router.locale +
|
|
"/fymhorth/canlyniadaucyfeiriadau?" +
|
|
nestedSearchString
|
|
: "/myportal/addresssearchresults?" +
|
|
nestedSearchString,
|
|
t(
|
|
"common:breadcrumb-address-search-results"
|
|
),
|
|
() => {
|
|
// spinnerState();
|
|
router.back();
|
|
}
|
|
)}
|
|
{renderCaseReferenceCrumb(currentReference)}
|
|
</>
|
|
)}
|
|
{isPath("/myportal/case/[ticketnumber]") && (
|
|
<>
|
|
{renderMyPortalCrumb()}
|
|
{renderLinkCrumb(
|
|
breadcrumbHref,
|
|
breadcrumbLabel
|
|
)}
|
|
{renderCaseReferenceCrumb(caseReferenceDisplay)}
|
|
</>
|
|
)}
|
|
{isPath("/myportal/dnsdetails") && (
|
|
<>
|
|
{renderMyPortalCrumb()}
|
|
{renderLinkCrumb(
|
|
"/myportal/dnsapplications",
|
|
t("dnsCommon:service-name")
|
|
)}
|
|
{renderCaseReferenceCrumb(currentReference)}
|
|
</>
|
|
)}
|
|
{isPath("/myportal/dns/[developmentName]") && (
|
|
<>
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? router.locale + "/fymhorth"
|
|
: "/myportal",
|
|
t("common:breadcrumb-my-portal")
|
|
)}
|
|
{renderLinkCrumb(
|
|
"/myportal/dnsapplications",
|
|
t("dnsCommon:service-name")
|
|
)}
|
|
{renderCaseReferenceCrumb(caseReferenceDisplay)}
|
|
</>
|
|
)}
|
|
{isPath("/case") && (
|
|
<>
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? router.locale +
|
|
"/searchresults?q=" +
|
|
router.query.q +
|
|
"&page=" +
|
|
router.query.page
|
|
: "/searchresults?q=" +
|
|
router.query.q +
|
|
"&page=" +
|
|
router.query.page,
|
|
t("common:breadcrumb-search-results"),
|
|
() => {
|
|
// spinnerState();
|
|
router.back();
|
|
}
|
|
)}
|
|
{renderCaseReferenceCrumb(currentReference)}
|
|
</>
|
|
)}
|
|
{isPath("/myportal/representation") && (
|
|
<>
|
|
{currentView.representationSubmit === true &&
|
|
currentView.representationSubmitConfirmation !==
|
|
true &&
|
|
renderBackCrumb(() => {
|
|
setRepresentationSubmit(qcount);
|
|
})}
|
|
{currentView.representationSubmit !== true &&
|
|
hasRepDetails &&
|
|
repDetails?.representationType !==
|
|
"Questionnaire" &&
|
|
renderBackCrumb(() => {
|
|
setRepresentationSubmit(false);
|
|
})}
|
|
{currentView.representationSubmit !== true &&
|
|
hasRepDetails &&
|
|
repDetails?.representationType ===
|
|
"Questionnaire" &&
|
|
showQuestionnaireSection > 1 &&
|
|
renderBackCrumb(() => {
|
|
setShowQuestionnaireSection(
|
|
showQuestionnaireSection - 1
|
|
);
|
|
setRepresentationSubmit(false);
|
|
})}
|
|
</>
|
|
)}
|
|
{isPath("/account/personaldetails") && (
|
|
<>
|
|
{renderLinkCrumb(
|
|
cyMyPortalHref,
|
|
t("common:breadcrumb-my-portal")
|
|
)}
|
|
<li className="govuk-breadcrumbs__list-item">
|
|
{t("account:account-title")}
|
|
</li>
|
|
</>
|
|
)}
|
|
{isPath("/account/changepassword") && (
|
|
<>
|
|
{renderLinkCrumb(
|
|
cyMyPortalHref,
|
|
t("common:breadcrumb-my-portal")
|
|
)}
|
|
<li className="govuk-breadcrumbs__list-item">
|
|
Update your password
|
|
</li>
|
|
</>
|
|
)}
|
|
{isPath("/dnsdetails") &&
|
|
renderDnsCaseReferenceCrumbs(currentReference)}
|
|
{isPath("/dns/[developmentName]") &&
|
|
renderDnsCaseReferenceCrumbs(caseReferenceDisplay)}
|
|
{isPath("/dns/application-view") && (
|
|
<>
|
|
{renderLinkCrumb(
|
|
isWelsh
|
|
? router.locale + "/dns/applications"
|
|
: "/dns/applications",
|
|
t("dnsApplicationView:page-parent-title")
|
|
)}
|
|
<li className="govuk-breadcrumbs__list-item">
|
|
TWA - Morlais Demonstration Zone
|
|
</li>
|
|
</>
|
|
)}
|
|
{getStaticTextCrumbLabel(pathname) &&
|
|
renderTextCrumb(getStaticTextCrumbLabel(pathname))}
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const mapStateToProps = (state) => ({
|
|
currentView: state.currentView,
|
|
appealType: state.appealType,
|
|
searchResultsObj: state.searchResultsObj,
|
|
search: state.search
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
updateField: (form, field, newValue) =>
|
|
dispatch(change(form, field, newValue)),
|
|
setRepresentationCapacity: (representationCapacity) => {
|
|
//dispatch(reset("representationForm"));
|
|
dispatch(setRepresentationCapacity(representationCapacity));
|
|
},
|
|
setRepresentationSubmit: (representationSubmit) => {
|
|
dispatch(setRepresentationSubmit(representationSubmit));
|
|
},
|
|
|
|
setCurrentView: (currentView) => {
|
|
dispatch(setCurrentView(currentView));
|
|
},
|
|
setCurrentSection: (currentSection) => {
|
|
dispatch(setCurrentSection(currentSection));
|
|
}
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Breadcrumbs);
|