Merged PR 2278: mocked design for status tab

mocked design for status tab

Related work items: #22805

components/case/status.js

@@ -0,0 +1,166 @@
+import { setEventDetails } from "../../store/searchOutput/action";
+import { setCurrentPage } from "../../store/currentView/action";
+import { connect } from "react-redux";
+import useTranslation from "next-translate/useTranslation";
+import { formatDates } from "../utils";
+import { useState } from "react";
+
+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: "Complete",
+    "in-progress": "In progress",
+    "not-started": "Not started",
+    blocked: "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 EventView = (eventsArr) => {
+        eventsArr = eventsArr.value;
+
+        return eventsArr.map((item, key) => {
+            <div>{item.pinswg_name}</div>;
+        });
+    };
+
+    const eventsArr = props.eventsObj?.value || [];
+
+    // event publishiing flag set to true displa
+
+    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-show-all-label")
+                            : t("case:status-hide-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.description && (
+                                            <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}
+                                                    </span>
+                                                </summary>
+                                                <div className="govuk-details__text">
+                                                    {stage.description}
+                                                </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"
+                                            }
+                                        >
+                                            {statusTextMap[stage.status] ||
+                                                "Not started"}
+                                        </strong>
+                                    </div>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        ...state
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setEventDetails: (eventsObj) => {
+            dispatch(setEventDetails(eventsObj));
+        },
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        }
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(StatusDetails);

components/case/summary.js

@@ -9,6 +9,7 @@ import transLookup from "../../data/lookuptranslations.json";
 import Documents from "./documents";
 import EventsDetails from "./events";
 import MediaDetails from "./media";
+import StatusDetails from "./status";
 
 import {
     createWatchedCases,
@@ -563,6 +564,21 @@ const CaseSummary = (props) => {
                                     {t("case:summary-tab-documents-label")}
                                 </a>
                             </li>
+                            <li
+                                className={
+                                    whichTab == "case-status"
+                                        ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
+                                        : "govuk-tabs__list-item "
+                                }
+                            >
+                                <a
+                                    className="govuk-tabs__tab"
+                                    href="#case-status"
+                                    onClick={() => setWhichTab("case-status")}
+                                >
+                                    {t("case:status-title")}
+                                </a>
+                            </li>
                         </ul>
                         <div
                             className={
@@ -1986,6 +2002,16 @@ const CaseSummary = (props) => {
                                 showFilteredDocs={props.showFilteredDocs}
                             />
                         </div>
+                        <div
+                            className={
+                                whichTab == "case-status"
+                                    ? "govuk-tabs__panel "
+                                    : "govuk-tabs__panel govuk-tabs__panel--hidden"
+                            }
+                            id="case-status"
+                        >
+                            <StatusDetails />
+                        </div>
                     </div>
                 </div>
             </>

components/case/summaryTypes/pinswg_sipscase.js

@@ -38,8 +38,6 @@ const Pinswg_sipscase = (props) => {
             new Date(a.pinswg_datedeadlineextended)
     )[0];
 
-    console.log(latest);
-
     return (
         <>
             {detailsObj.pinswg_projectdescription != null ? (

locales/cy/case.json

@@ -148,5 +148,8 @@
     "video-heading": "Fideos",
     "live-event-subheading": "Digwyddiad byw",
     "live-event-copy": "Mae digwyddiad sy'n cael ei ffrydio'n fyw yn digwydd nawr.",
-    "live-event-link": "Gwylio'r ffrydio byw"
+    "live-event-link": "Gwylio'r ffrydio byw",
+    "status-title": "Statws",
+    "status-show-all-label": "Dangoswch bob cam",
+    "status-hide-all-label": "Cuddio pob cam"
 }

locales/en/case.json

@@ -149,5 +149,8 @@
     "video-heading": "Videos",
     "live-event-subheading": "Live event",
     "live-event-copy": "A live streamed event is happening now.",
-    "live-event-link": "Watch live stream"
+    "live-event-link": "Watch live stream",
+    "status-title": "Status",
+    "status-show-all-label": "Show all stages",
+    "status-hide-all-label": "Hide all stages"
 }