131 lines
5.5 KiB
JavaScript
131 lines
5.5 KiB
JavaScript
import useTranslation from "next-translate/useTranslation";
|
|
import { useState } from "react";
|
|
import { getLifecycleStagesForCase } from "../../lib/domain/case-lifecycle";
|
|
|
|
const statusClassMap = {
|
|
complete: "govuk-tag govuk-!-margin-top-2",
|
|
"in-progress": "govuk-tag govuk-tag--yellow govuk-!-margin-top-2",
|
|
"not-started": "govuk-tag govuk-tag--grey govuk-!-margin-top-2",
|
|
blocked: "govuk-tag govuk-tag--red govuk-!-margin-top-2"
|
|
};
|
|
|
|
const statusTextMap = {
|
|
complete: "status-complete",
|
|
"in-progress": "status-in-progress",
|
|
"not-started": "status-not-started",
|
|
blocked: "status-blocked"
|
|
};
|
|
|
|
const StatusDetails = (props) => {
|
|
let { t } = useTranslation();
|
|
|
|
const caseResult = props.searchResultsObj?.value?.[0];
|
|
const caseDetails = props.searchDetailsObj?.[0]?.value?.[0];
|
|
|
|
const statusCode = Number(caseResult?.statuscode);
|
|
const appealType = Number(caseResult?.pinswg_appealcasetype);
|
|
|
|
const specialistProcess = caseDetails?.pinswg_specialistcaseprocess;
|
|
|
|
const stages = getLifecycleStagesForCase(
|
|
appealType,
|
|
statusCode,
|
|
specialistProcess
|
|
);
|
|
|
|
function hasOwnPropertyAndNotNull(obj, property) {
|
|
return obj.hasOwnProperty(property) && obj[property] !== null;
|
|
}
|
|
|
|
const [expandAll, setExpandAll] = useState(null);
|
|
// null = use default (in-progress open)
|
|
// true = force open all
|
|
// false = force close all
|
|
|
|
const handleToggleAll = () => {
|
|
setExpandAll((prev) => (prev === true ? false : true));
|
|
};
|
|
|
|
return (
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-full">
|
|
<h2 className="govuk-heading-m ">
|
|
{t("case:status-title")}
|
|
</h2>
|
|
|
|
<button
|
|
type="button"
|
|
className="govuk-!-margin-bottom-3 govuk-link watchCase govuk-!-font-size-16 "
|
|
onClick={handleToggleAll}
|
|
>
|
|
{expandAll === true
|
|
? t("case:status-hide-all-label")
|
|
: t("case:status-show-all-label")}
|
|
</button>
|
|
<ul className="govuk-task-list">
|
|
{stages.map((stage) => {
|
|
const isDefaultOpen =
|
|
stage.status === "in-progress";
|
|
|
|
const isOpen =
|
|
expandAll === null ? isDefaultOpen : expandAll;
|
|
|
|
return (
|
|
<li
|
|
className="govuk-task-list__item"
|
|
key={stage.id}
|
|
>
|
|
<div className="govuk-task-list__name-and-hint">
|
|
{stage.descriptionKey && (
|
|
<details
|
|
className="govuk-details govuk-!-margin-top-2 govuk-!-margin-bottom-2"
|
|
open={isOpen}
|
|
>
|
|
<summary className="govuk-details__summary">
|
|
<span className="govuk-details__summary-text">
|
|
{t(
|
|
`case-stages:${stage.titleKey}`
|
|
)}
|
|
</span>
|
|
</summary>
|
|
<div className="govuk-details__text">
|
|
{t(
|
|
`case-stages:${stage.descriptionKey}`
|
|
)}
|
|
</div>
|
|
</details>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
className="govuk-task-list__status "
|
|
id={`${stage.id}-status`}
|
|
>
|
|
<strong
|
|
className={
|
|
statusClassMap[stage.status] ||
|
|
"govuk-tag govuk-tag--grey govuk-!-margin-top-2"
|
|
}
|
|
>
|
|
{t(
|
|
`case-stages:${
|
|
statusTextMap[
|
|
stage.status
|
|
] || "status-not-started"
|
|
}`
|
|
)}
|
|
</strong>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatusDetails;
|