561 lines
22 KiB
JavaScript
561 lines
22 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";
|
|
import {
|
|
buildBreadcrumbRendererMaps,
|
|
resolveMappedRouteRenderer as resolveMappedRouteRendererByMaps
|
|
} from "../lib/routing/breadcrumbRouteMaps";
|
|
import {
|
|
createSimpleRouteRenderers,
|
|
createSimpleLinkTextPairRenderers,
|
|
createSimpleMyPortalRouteRenderers
|
|
} from "../lib/routing/breadcrumbRendererFactories";
|
|
|
|
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 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 simpleRouteRenderersByPath = createSimpleRouteRenderers({
|
|
t,
|
|
renderTextCrumb,
|
|
renderMyPortalSectionCrumbs
|
|
});
|
|
|
|
const simpleLinkTextPairRenderersByPath = createSimpleLinkTextPairRenderers(
|
|
{
|
|
t,
|
|
router,
|
|
isWelsh,
|
|
renderLinkCrumb,
|
|
renderTextCrumb
|
|
}
|
|
);
|
|
|
|
const simpleMyPortalRouteRenderersByPath =
|
|
createSimpleMyPortalRouteRenderers({
|
|
t,
|
|
router,
|
|
isWelsh,
|
|
myPortalHref,
|
|
currentViewState,
|
|
getViewAllLabel,
|
|
renderAnchorCrumb,
|
|
renderLinkCrumb,
|
|
renderTextCrumb,
|
|
renderMyPortalCrumb,
|
|
renderMyPortalSectionCrumbs
|
|
});
|
|
|
|
const mappedRouteRendererMaps = buildBreadcrumbRendererMaps({
|
|
simpleRouteRenderersByPath,
|
|
simpleLinkTextPairRenderersByPath,
|
|
simpleMyPortalRouteRenderersByPath
|
|
});
|
|
|
|
const resolveMappedRouteRenderer = (path) => {
|
|
return resolveMappedRouteRendererByMaps(path, mappedRouteRendererMaps);
|
|
};
|
|
|
|
const renderMappedRoute = (path, resolver = resolveMappedRouteRenderer) => {
|
|
const routeRenderer = resolver(path);
|
|
return routeRenderer ? routeRenderer() : null;
|
|
};
|
|
|
|
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")
|
|
});
|
|
|
|
const staticTextCrumbLabel = getStaticTextCrumbLabel(pathname);
|
|
|
|
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")
|
|
)}
|
|
|
|
{renderMappedRoute(pathname)}
|
|
|
|
{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/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"
|
|
),
|
|
() => {
|
|
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"),
|
|
() => {
|
|
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>
|
|
</>
|
|
)}
|
|
|
|
{staticTextCrumbLabel &&
|
|
renderTextCrumb(staticTextCrumbLabel)}
|
|
</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(setRepresentationCapacity(representationCapacity));
|
|
},
|
|
setRepresentationSubmit: (representationSubmit) => {
|
|
dispatch(setRepresentationSubmit(representationSubmit));
|
|
},
|
|
setCurrentView: (currentView) => {
|
|
dispatch(setCurrentView(currentView));
|
|
},
|
|
setCurrentSection: (currentSection) => {
|
|
dispatch(setCurrentSection(currentSection));
|
|
}
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Breadcrumbs);
|