Merged PR 2283: Data driven status pages from CRM

Related work items: #22805

components/case/status.js

@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import useTranslation from "next-translate/useTranslation";
 import { formatDates } from "../utils";
 import { useState } from "react";
+import { getStagesForAppealType } from "./summary/utils/caseStagesByAppealType";
 
 const statusClassMap = {
     complete: "govuk-tag govuk-!-margin-top-2",
@@ -13,41 +14,19 @@ const statusClassMap = {
 };
 
 const statusTextMap = {
-    complete: "Complete",
-    "in-progress": "In progress",
-    "not-started": "Not started",
-    blocked: "Blocked"
+    complete: "status-complete",
+    "in-progress": "status-in-progress",
+    "not-started": "status-not-started",
+    blocked: "status-blocked"
 };
 
 const StatusDetails = (props) => {
     let { t } = useTranslation();
 
-    const stages = [
-        {
-            id: "application-received",
-            title: "Application received",
-            status: "complete",
-            href: "#",
-            description:
-                "We have received the case and checked that the initial information has been provided."
-        },
-        {
-            id: "consultation",
-            title: "Consultation period",
-            status: "in-progress",
-            href: "#",
-            description:
-                "People can view the case documents and submit comments during this stage."
-        },
-        {
-            id: "decision",
-            title: "Decision",
-            status: "not-started",
-            href: "#",
-            description:
-                "The decision will be published once the case has been reviewed and completed."
-        }
-    ];
+    const stages = getStagesForAppealType(
+        props.currentView?.caseReference?.appealType,
+        props.currentView?.caseReference?.statuscode
+    );
 
     const EventView = (eventsArr) => {
         eventsArr = eventsArr.value;
@@ -105,18 +84,22 @@ const StatusDetails = (props) => {
                                     key={stage.id}
                                 >
                                     <div className="govuk-task-list__name-and-hint">
-                                        {stage.description && (
+                                        {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">
-                                                        {stage.title}
+                                                        {t(
+                                                            `case-stages:${stage.titleKey}`
+                                                        )}
                                                     </span>
                                                 </summary>
                                                 <div className="govuk-details__text">
-                                                    {stage.description}
+                                                    {t(
+                                                        `case-stages:${stage.descriptionKey}`
+                                                    )}
                                                 </div>
                                             </details>
                                         )}
@@ -132,8 +115,13 @@ const StatusDetails = (props) => {
                                                 "govuk-tag govuk-tag--grey govuk-!-margin-top-2"
                                             }
                                         >
-                                            {statusTextMap[stage.status] ||
-                                                "Not started"}
+                                            {t(
+                                                `case-stages:${
+                                                    statusTextMap[
+                                                        stage.status
+                                                    ] || "status-not-started"
+                                                }`
+                                            )}
                                         </strong>
                                     </div>
                                 </li>