pedwfrontend/components/case/status.js

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);