From 2a5ea53536eb3df353c61e35f475c8ffaf831f04 Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Fri, 27 Jan 2023 11:00:56 +0000
Subject: [PATCH] watch case link on case summary

---
 components/case/summary.js             | 131 +++++++++++++------------
 styles/sass/welshgov/_application.scss |   1 +
 2 files changed, 69 insertions(+), 63 deletions(-)

diff --git a/components/case/summary.js b/components/case/summary.js
index 2ef51df1..1c841b66 100644
--- a/components/case/summary.js
+++ b/components/case/summary.js
@@ -288,74 +288,79 @@ const CaseSummary = (props) => {
                         </dl>
                     </div>
                 </div>
-                {props.currentView.showReps == true ||
-                    (props.currentView.showReps == "true" &&
-                        _.has(detailsObj, "pinswg_startdate") &&
-                        hasEndDate &&
-                        showReps(
-                            detailsObj.pinswg_startdate,
-                            detailsObj.pinswg_representation_period_end_date
-                        ) && (
-                            <div className="govuk-grid-row">
-                                <div className="govuk-grid-column-full">
-                                    <div className="govuk-button-group">
-                                        <Link
-                                            href={{
-                                                pathname:
-                                                    "/myportal/representation",
-                                                query: {
-                                                    case:
-                                                        currentType ==
-                                                        "searchResultsObj"
-                                                            ? detailsObj.pinswg_name
-                                                            : casesObj.reference,
-                                                },
-                                            }}
-                                        >
-                                            <a className="govuk-button">
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-button-group">
+                            {props.currentView.showReps == true ||
+                                (props.currentView.showReps == "true" &&
+                                    _.has(detailsObj, "pinswg_startdate") &&
+                                    hasEndDate &&
+                                    showReps(
+                                        detailsObj.pinswg_startdate,
+                                        detailsObj.pinswg_representation_period_end_date
+                                    ) && (
+                                        <>
+                                            <Link
+                                                href={{
+                                                    pathname:
+                                                        "/myportal/representation",
+                                                    query: {
+                                                        case:
+                                                            currentType ==
+                                                            "searchResultsObj"
+                                                                ? detailsObj.pinswg_name
+                                                                : casesObj.reference,
+                                                    },
+                                                }}
+                                            >
+                                                <a className="govuk-button">
+                                                    {t(
+                                                        "case:summary-make-representation-label"
+                                                    )}
+                                                </a>
+                                            </Link>
+                                            <a
+                                                onClick={() => {
+                                                    //spinnerState();
+                                                    router.back();
+                                                }}
+                                                className="govuk-button govuk-button--secondary"
+                                            >
                                                 {t(
-                                                    "case:summary-make-representation-label"
+                                                    "case:summary-back-button-label"
                                                 )}
                                             </a>
-                                        </Link>
-
-                                        <a
-                                            onClick={() => {
-                                                //spinnerState();
-                                                router.back();
-                                            }}
-                                            className="govuk-button govuk-button--secondary"
-                                        >
-                                            {t(
-                                                "case:summary-back-button-label"
-                                            )}
-                                        </a>
-                                    </div>
-                                </div>
+                                        </>
+                                    ))}
+                            <div className="govuk-body">
+                                <Link href="">
+                                    <a className="govuk-link">
+                                        Watch this case
+                                    </a>
+                                </Link>
                             </div>
-                        ))}
-
-                {props.currentView.showReps == true ||
-                    (props.currentView.showReps == "true" &&
-                        _.has(detailsObj, "pinswg_startdate") &&
-                        hasEndDate &&
-                        showRepsEnded(
-                            detailsObj.pinswg_startdate,
-                            detailsObj.pinswg_representation_period_end_date
-                        ) && (
-                            <div className="govuk-grid-row">
-                                <div className="govuk-grid-column-full">
-                                    <div className="govuk-button-group">
-                                        <div className="govuk-body">
-                                            Representation Period ended on{" "}
-                                            {formatDates(
-                                                detailsObj.pinswg_representation_period_end_date
-                                            )}
-                                        </div>
+                        </div>
+                    </div>
+                </div>{" "}
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        {props.currentView.showReps == true ||
+                            (props.currentView.showReps == "true" &&
+                                _.has(detailsObj, "pinswg_startdate") &&
+                                hasEndDate &&
+                                showRepsEnded(
+                                    detailsObj.pinswg_startdate,
+                                    detailsObj.pinswg_representation_period_end_date
+                                ) && (
+                                    <div className="govuk-body">
+                                        Representation Period ended on{" "}
+                                        {formatDates(
+                                            detailsObj.pinswg_representation_period_end_date
+                                        )}
                                     </div>
-                                </div>
-                            </div>
-                        ))}
+                                ))}
+                    </div>
+                </div>
                 {/* 1{" "}
                 {_.has(detailsObj, "pinswg_startdatetimeiftheevent") &&
                     detailsObj.pinswg_startdatetimeiftheevent}
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 2ce1058c..819d8736 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -21,6 +21,7 @@ html {
 .govuk-header__link,
 .govuk-footer__link,
 .govuk-link,
+.govuk-button-group .govuk-link,
 .govuk-button,
 .govuk-label,
 .govuk-select,