Merged PR 581: watched case and stop wathcing case added

watched case and stop wathcing case added

Related work items: #5870, #5871, #6524, #6549

actions/index.js

@@ -838,24 +838,83 @@ export const getMyRepresentations = (token, loggedInUserId) => {
 };
 
 export const getWatchedCases = (token, loggedInUserId) => {
-    return (
+    return axios
-        axios
+        .get(
+            WEBAPI_URL +
+                "pinswg_watchlists?$filter= _pinswg_contact_value eq " +
+                loggedInUserId +
+                "&$count=true&$orderby=createdon desc",
+            azureHeaders(token)
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("this serror", error);
+        });
+};
 
-            // .get(BASE_URL + "/api/lookups/watchedCases", {
+export const getWatchedCasesProxy = (token, loggedInUserId) => {
-            //     httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+    return axios
-            // })
+        .get(
-            .get(
+            "/api/proxy/pinswg_watchlists?$filter= _pinswg_contact_value eq " +
-                WEBAPI_URL +
+                loggedInUserId +
-                    "incidents?$select=ticketnumber,casetypecode,createdon,_customerid_value,description,incidentid,pinswg_appealcasetype,_pinswg_assignedinspectrids_value,statecode,statuscode,title&$filter=_customerid_value eq " +
+                "&$count=true&$orderby=createdon desc",
-                    loggedInUserId +
+            azureHeaders(token)
-                    " and pinswg_appealcasetype ne null&$orderby=createdon desc&$count=true&$top=3",
+        )
-                azureHeaders(token)
+        .then((res) => res.data)
-            )
+        .catch((error) => {
-            .then((res) => res.data)
+            console.log("this serror", error);
-            .catch((error) => {
+        });
-                console.log("this serror", error);
+};
-            })
+
-    );
+export const createWatchedCases = (formValues) => {
+    var data = JSON.stringify(formValues);
+
+    var config = {
+        method: "post",
+        url: "/api/proxy/pinswg_watchlists",
+        headers: {
+            "OData-MaxVersion": "4.0",
+            "OData-Version": "4.0",
+            "Accept": "application/json",
+            "Prefer": 'odata.include-annotations="*",return=representation',
+            "Content-Type": "application/json",
+            "ServiceBusAuthorization": getSASToken(),
+        },
+        data: data,
+    };
+    // console.log(config);
+    return axios(config)
+        .then((res) => {
+            //console.log("posted ", res.data);
+            return res.data;
+        })
+        .catch((error) => {
+            console.log("this serror", error);
+        });
+};
+
+export const deleteWatchedCases = (watchedCaseID) => {
+    var config = {
+        method: "delete",
+        url: "/api/proxy/pinswg_watchlists(" + watchedCaseID + ")",
+        headers: {
+            "OData-MaxVersion": "4.0",
+            "OData-Version": "4.0",
+            "Accept": "application/json",
+            "Prefer": 'odata.include-annotations="*",return=representation',
+            "Content-Type": "application/json",
+            "ServiceBusAuthorization": getSASToken(),
+        },
+    };
+    // console.log(config);
+    return axios(config)
+        .then((res) => {
+            //console.log("deleted ", res.data);
+            return res.data;
+        })
+        .catch((error) => {
+            console.log("this serror", error);
+        });
 };
 
 export const getAwaitingSubmission = (token) => {
@@ -885,6 +944,26 @@ export const getPortalModuleDetails = (token, appealType, caseReference) => {
         });
 };
 
+export const getPortalModuleDetailsProxy = (
+    token,
+    appealType,
+    caseReference
+) => {
+    return axios
+        .get(
+            "/api/proxy/" +
+                appealType +
+                "?$filter=pinswg_name eq '" +
+                caseReference +
+                "'&$count=true",
+            azureHeaders(token)
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thiserror", error);
+        });
+};
+
 export const getEmailAccountCheck = (emailAddress) => {
     let token = getSASToken();
     return axios
@@ -945,7 +1024,7 @@ export const updateAccount = (contactId, updateBody) => {
     // console.log(config);
     return axios(config)
         .then((res) => {
-            console.log("posted ", res.data);
+            //console.log("posted ", res.data);
             return res.data;
         })
         .catch((error) => {
@@ -973,7 +1052,7 @@ export const updatePassword = (contactId, newpassword) => {
     // console.log(config);
     return axios(config)
         .then((res) => {
-            console.log("posted ", res.data);
+            //console.log("posted ", res.data);
             return res.data;
         })
         .catch((error) => {

components/case.js

@@ -24,6 +24,7 @@ const CaseSummary = (props) => {
                         myCasesDetails={props.myCasesDetails}
                         myRepresentations={props.myRepresentations}
                         watchedCases={props.watchedCases}
+                        watchedCasesDetails={props.watchedCasesDetails}
                         awaitingSubmission={props.awaitingSubmission}
                         caseReference={props.caseReference}
                         currentType={props.currentType}

components/header.js

@@ -48,7 +48,6 @@ const Header = (props) => {
         domainSwitch = process.env.I18N_DOMAIN;
     }
 
-    console.log(_.isEmpty(router.query));
     return (
         <header
             className="govuk-header "
@@ -58,7 +57,7 @@ const Header = (props) => {
             <div className="govuk-header__container govuk-width-container">
                 <div className="govuk-header__logo govuk-!-width-one-quarter">
                     <Link href={t("common:gov-wales-link")}>
-                        <a className="govuk-header__link govuk-header__link--homepage">
+                        <a className="govuk-header__link govuk-link--no-underline govuk-header__link--homepage">
                             <span className="govuk-header__logotype header__logo">
                                 <img
                                     alt="gov.wales"
@@ -212,7 +211,7 @@ const Header = (props) => {
                             >
                                 <a
                                     onClick={() => {
-                                        destroyCookie(null, "pinsUser"),
+                                        destroyCookie({}, "pinsUser"),
                                             window.localStorage.clear();
                                     }}
                                     className="govuk-header__link govuk-!-margin-right-3"

components/homepage/casesearch.js

@@ -32,16 +32,19 @@ const RenderTextfield = ({
         <>
             <div className="govuk-form-group">
                 <div id="basicSearch-hint" className="govuk-hint ">
-                    <span className="govuk-body-s">{hint1}</span>
+                    <label
-
+                        className="govuk-label "
+                        htmlFor={id}
+                        id={id + "_label"}
+                    >
+                        <span className="govuk-body-s">{hint1}</span>
+                    </label>
                     <ul className="govuk-body-s govuk-!-margin-top-3">
                         <li>{hint2} </li>
                         <li>{hint3}</li>
                     </ul>
                 </div>
-                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+
-                    {label}
-                </label>
                 <div>
                     <input
                         {...input}

components/homepage/login.js

@@ -81,12 +81,13 @@ const RenderPasswordfield = ({
                         : "govuk-form-group "
                 }
             >
-                <div id="basicSearch-hint" className="govuk-hint ">
-                    <span className="govuk-body-m">{hint1}</span>
-                </div>
                 <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                     {label}
                 </label>
+                <div id="basicSearch-hint" className="govuk-hint ">
+                    <span className="govuk-body-m">{hint1}</span>
+                </div>
+
                 {touched && error && (
                     <span id={id + "-error"} className="govuk-error-message">
                         <span className="govuk-visually-hidden">Error:</span>{" "}
@@ -181,7 +182,7 @@ let Login = (props) => {
                         type="text"
                         aria-describedby="basicSearch-hint"
                         hint1={t("home:login-card-id-label")}
-                        hint2={t("home:login-card-id-hint")}
+                        label={t("home:login-card-id-hint")}
                     />
 
                     <Field

components/homepage/loginSoon.js

@@ -10,9 +10,9 @@ export default function LoginSoon() {
     return (
         <div className="card" id="login-card">
             <div className="card-body active">
-                <h3 className="heading-small card-heading">
+                <h2 className="govuk-heading-s">
                     {t("home:login-card-title-temp")}
-                </h3>
+                </h2>
 
                 <div className="govuk-form-group govuk-!-margin-top-4">
                     <p className="govuk-body-s">

components/myportal.js

@@ -17,11 +17,28 @@ const MyPortal = (props) => {
     const { locale } = router;
 
     return (
-        <main
+        <main className="" id="main-content" role="main">
-            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            <div className="servicebanner govuk-!-margin-bottom-4">
-            id="main-content"
+                <h1>
-            role="main"
+                    <img
-        >
+                        src={
+                            router.locale == "cy"
+                                ? "/assets/images/my-portal-cy.svg"
+                                : "/assets/images/my-portal-en.svg"
+                        }
+                        alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
+                    />
+                    <img
+                        className="pedw_logo"
+                        src="/assets/images/pedw_logo.png"
+                        alt={
+                            router.locale == "cy"
+                                ? "Penderfyniadau Cynllunio ac Amgylchedd Cymru"
+                                : "Planning & Environment Decisions Wales"
+                        }
+                    />
+                </h1>
+            </div>
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
                     <div className="flex-container grid-row govuk-body ">

components/myportal/makenewappeal.js

@@ -10,9 +10,9 @@ export default function MakeNewAppeal() {
     return (
         <div className="card card-3" id="casescomment-card">
             <div className="card-body">
-                <h3 className="heading-small card-heading">
+                <h2 className="govuk-heading-s">
                     {t("myportal:makenewappeal-card-title")}
-                </h3>
+                </h2>
                 <p className="govuk-body-s">
                     {t("myportal:makenewappeal-card-paragraph-one")}
                 </p>

components/myportal/searchcases.js

@@ -37,16 +37,21 @@ const RenderTextfield = ({
                 }
             >
                 <div id="basicSearch-hint" className="govuk-hint ">
-                    <span className="govuk-body-m">{hint1}</span>
+                    <label
+                        className="govuk-label "
+                        htmlFor={id}
+                        id={id + "_label"}
+                    >
+                        {label}
+                        <span className="govuk-body-m">{hint1}</span>
+                    </label>
 
                     <br />
                     <span className="govuk-body-s">
                         {hint2} CAS-00009-W8N6W4
                     </span>
                 </div>
-                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+
-                    {label}
-                </label>
                 {touched && error && (
                     <span id={id + "-error"} className="govuk-error-message">
                         <span className="govuk-visually-hidden">Error:</span>{" "}
@@ -76,7 +81,7 @@ let CaseSearch = (props) => {
 
     const onHandleSubmit = (values) => {
         spinnerState();
-        router.replace({
+        router.push({
             pathname:
                 router.locale == "cy"
                     ? "/fymhorth/canlyniadauchwilio"

components/myportal/topthree.js

@@ -4,77 +4,93 @@ import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { setCurrentReference } from "../../store/currentView/action";
 import { connect } from "react-redux";
+import { parseCookies } from "nookies";
+import {
+    getSASToken,
+    getWatchedCasesProxy,
+    getPortalModuleDetailsProxy,
+    deleteWatchedCases,
+} from "../../actions";
+
+import {
+    setWatchedCases,
+    setWatchedCasesDetails,
+} from "../../store/watchedCases/action";
+import { getFormCollectionByID } from "../../components/utils";
 
 const TopThree = (props) => {
     let { t } = useTranslation();
-    const { showTopThree, showDetails, setCurrentReference, topThreeType } =
+    const {
-        props;
+        showTopThree,
+        showDetails,
+        setCurrentReference,
+        topThreeType,
+        setWatchedCases,
+        setWatchedCasesDetails,
+    } = props;
 
     const router = useRouter();
     const { locale } = router;
 
     let topthreeRow = [];
 
-    // for (var i = 0; i < 3; i++) {
-    //     (function (i) {
-    //         topthreeRow.push(
-    //             <div className="cardModuleItem" key={i}>
-    //                 <div className="cardModuleDetails">
-    //                     <div className="cardModuleReference">
-    //                         <b>Case reference:</b>{" "}
-    //                         <Link
-    //                             href={
-    //                                 topThreeType == "awaitingSubmission"
-    //                                     ? "/representation"
-    //                                     : "/case"
-    //                             }
-    //                         >
-    //                             <a
-    //                                 data-id={i}
-    //                                 onClick={() => {
-    //                                     setCurrentReference({
-    //                                         "currentReference":
-    //                                             showTopThree.value[i]
-    //                                                 .ticketnumber,
-    //                                         "currentType": topThreeType,
-    //                                     });
-    //                                 }}
-    //                             >
-    //                                 {showTopThree.value[i].ticketnumber}
-    //                             </a>
-    //                         </Link>
-    //                     </div>
-    //                     {topThreeType != "awaitingSubmission" ? (
-    //                         <div className="carModuleAddress">
-    //                             <b>Addressaa: </b>
-    //                             {showDetails[i].value[0]
-    //                                 .pinswg_siteaddressline1 == null
-    //                                 ? "not entered"
-    //                                 : showDetails[i].value[0]
-    //                                       .pinswg_siteaddressline1}
-    //                         </div>
-    //                     ) : (
-    //                         ""
-    //                     )}
-
-    //                     {topThreeType == "awaitingSubmission" ? (
-    //                         <div className="carModuleAddress">
-    //                             Make Representation on Case Incomplete, not
-    //                             submitted
-    //                         </div>
-    //                     ) : (
-    //                         ""
-    //                     )}
-    //                 </div>
-    //                 <div className="cardModuleRemoveCase"> &mdash;</div>
-    //             </div>
-    //         );
-    //     })(i);
-    // }
-
     let showTopThreeArr = showTopThree.value;
 
-    Object.keys(showTopThreeArr).map((key, index) => {
+    const deleteItem = (caseID, topThreeType) => {
+        let token = getSASToken();
+        let cookies = parseCookies();
+        topThreeType == "watchedCases" &&
+            deleteWatchedCases(caseID)
+                .then((data) => data)
+                .then(() => {
+                    getWatchedCasesProxy(token, cookies.pinsUser).then(
+                        (data) => {
+                            setWatchedCases(data),
+                                getDetails(token, data, "myWatchedCases").then(
+                                    (data) => {
+                                        setWatchedCasesDetails(data);
+                                    }
+                                );
+                        }
+                    );
+                });
+    };
+
+    const getDetails = (token, resultsObj, detailsType) => {
+        //console.log(resultsObj);
+        let detailsArr = [];
+        resultsObj = resultsObj.value;
+        const detailsObj = resultsObj.map((searchDetail, index) => {
+            if (searchDetail.pinswg_appealcasetype == null) {
+                console.log(
+                    detailsType != "myWatchedCases"
+                        ? searchDetail.ticketnumber
+                        : searchDetail[
+                              "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                          ]
+                );
+            } else {
+                detailsArr.push(
+                    getPortalModuleDetailsProxy(
+                        token,
+                        getFormCollectionByID(
+                            searchDetail.pinswg_appealcasetype
+                        ).LogicalCollectionName,
+                        detailsType != "myWatchedCases"
+                            ? searchDetail.ticketnumber
+                            : searchDetail[
+                                  "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                              ]
+                    )
+                );
+            }
+        });
+        //console.log(detailsArr);
+        return Promise.all(detailsArr);
+    };
+
+    let topThreeOnlyArr = showTopThreeArr.slice(0, 3);
+    Object.keys(topThreeOnlyArr).map((key, index) => {
         topthreeRow.push(
             <div className="cardModuleItem" key={index}>
                 <div className="cardModuleDetails">
@@ -96,17 +112,32 @@ const TopThree = (props) => {
                                 onClick={() => {
                                     setCurrentReference({
                                         "currentReference":
-                                            showTopThreeArr[key].ticketnumber,
+                                            topThreeType != "watchedCases"
+                                                ? showTopThreeArr[key]
+                                                      .ticketnumber
+                                                : showTopThreeArr[key][
+                                                      "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                                                  ],
                                         "currentType": topThreeType,
                                         "incidentid":
-                                            showTopThreeArr[key].incidentid,
+                                            topThreeType != "watchedCases"
+                                                ? showTopThreeArr[key]
+                                                      .incidentid
+                                                : showTopThreeArr[key][
+                                                      " _pinswg_watchedcase_value"
+                                                  ],
+
                                         "appealType":
                                             showTopThreeArr[key]
                                                 .pinswg_appealcasetype,
                                     });
                                 }}
                             >
-                                {showTopThreeArr[key].ticketnumber}
+                                {topThreeType != "watchedCases"
+                                    ? showTopThreeArr[key].ticketnumber
+                                    : showTopThreeArr[key][
+                                          "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                                      ]}
                             </a>
                         </Link>
                     </div>
@@ -140,7 +171,30 @@ const TopThree = (props) => {
                         ""
                     )}
                 </div>
-                <div className="cardModuleRemoveCase"> &mdash;</div>
+
+                {topThreeType == "watchedCases" && (
+                    <div className="">
+                        <a
+                            href="#"
+                            className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
+                            onClick={() => {
+                                event.preventDefault();
+                                deleteItem(
+                                    showTopThreeArr[key].pinswg_watchlistid,
+                                    "watchedCases"
+                                );
+                                alert(
+                                    "You have stopped watching case " +
+                                        showTopThreeArr[key][
+                                            "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                );
+                            }}
+                        >
+                            &mdash;
+                        </a>
+                    </div>
+                )}
             </div>
         );
     });
@@ -176,6 +230,12 @@ const mapDispatchToProps = (dispatch) => {
         setCurrentReference: (currentReference) => {
             dispatch(setCurrentReference(currentReference));
         },
+        setWatchedCases: (watchedCases) => {
+            dispatch(setWatchedCases(watchedCases));
+        },
+        setWatchedCasesDetails: (watchedCasesDetails) => {
+            dispatch(setWatchedCasesDetails(watchedCasesDetails));
+        },
     };
 };
 

components/myportal/viewall.js

@@ -5,8 +5,13 @@ import { setCurrentReference } from "../../store/currentView/action";
 import { connect } from "react-redux";
 
 const ViewAllResults = (props) => {
-    const { searchString, searchResultsObj, currentView, setCurrentReference } =
+    const {
-        props;
+        searchString,
+        searchResultsObj,
+        currentView,
+        setCurrentReference,
+        myportal,
+    } = props;
 
     let { t } = useTranslation();
 
@@ -21,14 +26,35 @@ const ViewAllResults = (props) => {
         resultsRowArr.push(
             <div className="govuk-summary-list__row" key={key}>
                 <dd className="govuk-summary-list__value govuk-!-font-size-16  govuk-!-padding-left-2">
-                    <Link href={router.locale == "cy" ? "/achos" : "/case"}>
+                    <Link
+                        href={
+                            router.locale == "cy"
+                                ? myportal == "true"
+                                    ? "/fymhorth/achos"
+                                    : "/achos"
+                                : myportal == "true"
+                                ? "/myportal/case"
+                                : "/case"
+                        }
+                    >
                         <a
                             onClick={() => {
                                 setCurrentReference({
                                     "currentReference":
-                                        resultsArr[index].reference,
+                                        currentView.viewKey != "watchedCases"
+                                            ? resultsArr[index].ticketnumber
+                                            : resultsArr[index][
+                                                  "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                                              ],
+
                                     "currentType": currentView.viewKey,
-                                    "incidentid": resultsArr[index].incidentid,
+                                    "incidentid":
+                                        currentView.viewKey != "watchedCases"
+                                            ? resultsArr[index].incidentid
+                                            : resultsArr[index][
+                                                  " _pinswg_watchedcase_value"
+                                              ],
+
                                     "appealType":
                                         resultsArr[index].pinswg_appealcasetype,
                                 });
@@ -37,7 +63,12 @@ const ViewAllResults = (props) => {
                             <span className="results-visually-hidden">
                                 Case Reference:
                             </span>
-                            {resultsArr[index].ticketnumber}
+
+                            {currentView.viewKey != "watchedCases"
+                                ? resultsArr[index].ticketnumber
+                                : resultsArr[index][
+                                      "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                                  ]}
                         </a>
                     </Link>
                 </dd>

components/search/searchresults.js

@@ -23,10 +23,27 @@ import {
     setSearchResults,
     setSearchDetails,
 } from "../../store/searchOutput/action";
+import {
+    setWatchedCases,
+    setWatchedCasesDetails,
+} from "../../store/watchedCases/action";
 import { useEffect } from "react";
+import { parseCookies, setCookie, destroyCookie } from "nookies";
 
 import PaginationControl from "./pagination";
-import { getSearchDetailsPaged, getFormCollection } from "../utils";
+import {
+    getSearchDetailsPaged,
+    getFormCollection,
+    getFormCollectionByID,
+} from "../utils";
+
+import {
+    createWatchedCases,
+    getSASToken,
+    getWatchedCasesProxy,
+    getPortalModuleDetailsProxy,
+    deleteWatchedCases,
+} from "../../actions";
 
 const SearchResults = (props) => {
     const {
@@ -38,6 +55,9 @@ const SearchResults = (props) => {
         setSearchDetails,
         advancedSearch,
         myportal,
+        watchedCases,
+        setWatchedCases,
+        setWatchedCasesDetails,
     } = props;
     let { t } = useTranslation();
 
@@ -54,6 +74,93 @@ const SearchResults = (props) => {
             : setShowSpinnerState(true);
     };
 
+    const cookies = parseCookies();
+
+    const selectWatchedCase = (loggedInUser, incidentID, appealType) => {
+        let token = getSASToken();
+
+        let updateBody = {
+            "pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")",
+            "pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")",
+            "pinswg_appealcasetype": +appealType,
+        };
+
+        createWatchedCases(updateBody)
+            .then((data) => data)
+            .then(() => {
+                getWatchedCasesProxy(token, cookies.pinsUser).then((data) => {
+                    setWatchedCases(data),
+                        getDetails(token, data, "myWatchedCases").then(
+                            (data) => {
+                                setWatchedCasesDetails(data);
+                            }
+                        );
+                });
+            });
+    };
+
+    const isWatchedCase = (whichIncident) => {
+        let isWatched = jsonpath.query(
+            watchedCases,
+            "$..value[?(@._pinswg_watchedcase_value=='" + whichIncident + "')]"
+        );
+
+        return isWatched;
+    };
+
+    const deleteItem = (caseID, topThreeType) => {
+        let token = getSASToken();
+        let cookies = parseCookies();
+        topThreeType == "watchedCases" &&
+            deleteWatchedCases(caseID)
+                .then((data) => data)
+                .then(() => {
+                    getWatchedCasesProxy(token, cookies.pinsUser).then(
+                        (data) => {
+                            setWatchedCases(data),
+                                getDetails(token, data, "myWatchedCases").then(
+                                    (data) => {
+                                        setWatchedCasesDetails(data);
+                                    }
+                                );
+                        }
+                    );
+                });
+    };
+
+    const getDetails = (token, resultsObj, detailsType) => {
+        //console.log(resultsObj);
+        let detailsArr = [];
+        resultsObj = resultsObj.value;
+        const detailsObj = resultsObj.map((searchDetail, index) => {
+            if (searchDetail.pinswg_appealcasetype == null) {
+                console.log(
+                    detailsType != "myWatchedCases"
+                        ? searchDetail.ticketnumber
+                        : searchDetail[
+                              "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                          ]
+                );
+            } else {
+                detailsArr.push(
+                    getPortalModuleDetailsProxy(
+                        token,
+                        getFormCollectionByID(
+                            searchDetail.pinswg_appealcasetype
+                        ).LogicalCollectionName,
+                        detailsType != "myWatchedCases"
+                            ? searchDetail.ticketnumber
+                            : searchDetail[
+                                  "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                              ]
+                    )
+                );
+            }
+        });
+        //console.log(detailsArr);
+        return Promise.all(detailsArr);
+    };
+
     const ResultsView = (resultsArr) => {
         return (
             <>
@@ -77,6 +184,9 @@ const SearchResults = (props) => {
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
                             {t("search:searchresults-status-label")}
                         </dd>
+                        {myportal == "true" && (
+                            <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
+                        )}
                     </div>
 
                     {resultsArr.map((item, key) => {
@@ -85,8 +195,6 @@ const SearchResults = (props) => {
                             "$..value[?(@.pinswg_name=='" + item.title + "')]"
                         );
                         detailsObj = detailsObj[0];
-                        console.log(props.myportal);
-
                         return (
                             <div className="govuk-summary-list__row" key={key}>
                                 <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
@@ -115,7 +223,6 @@ const SearchResults = (props) => {
                                                 });
                                             }}
                                         >
-                                            mm
                                             <span className="results-visually-hidden">
                                                 {t(
                                                     "search:searchresults-case-reference-label"
@@ -270,6 +377,51 @@ const SearchResults = (props) => {
                                               "statuscode@OData.Community.Display.V1.FormattedValue"
                                           ] || "N/A"}
                                 </dd>
+                                {myportal == "true" && (
+                                    <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
+                                        {isWatchedCase(item.incidentid).length >
+                                            0 ==
+                                        true ? (
+                                            <span
+                                                className="govuk-summary-list__actionLink watched_link"
+                                                onClick={() => {
+                                                    deleteItem(
+                                                        isWatchedCase(
+                                                            item.incidentid
+                                                        )[0].pinswg_watchlistid,
+
+                                                        "watchedCases"
+                                                    );
+                                                    alert(
+                                                        "You have stopped watching case " +
+                                                            item.title
+                                                    );
+                                                }}
+                                                title="Stop watching this case"
+                                            >
+                                                &minus;
+                                            </span>
+                                        ) : (
+                                            <span
+                                                className="govuk-summary-list__actionLink"
+                                                onClick={() => {
+                                                    selectWatchedCase(
+                                                        cookies.pinsUser,
+                                                        item.incidentid,
+                                                        item.pinswg_appealcasetype
+                                                    );
+                                                    alert(
+                                                        "You are watching case " +
+                                                            item.title
+                                                    );
+                                                }}
+                                                title="Watch this case"
+                                            >
+                                                +
+                                            </span>
+                                        )}
+                                    </dd>
+                                )}
                             </div>
                         );
                     })}
@@ -402,6 +554,12 @@ const mapDispatchToProps = (dispatch) => {
         setSearchDetails: (searchDetailsObj) => {
             dispatch(setSearchDetails(searchDetailsObj));
         },
+        setWatchedCases: (watchedCases) => {
+            dispatch(setWatchedCases(watchedCases));
+        },
+        setWatchedCasesDetails: (watchedCasesDetails) => {
+            dispatch(setWatchedCasesDetails(watchedCasesDetails));
+        },
     };
 };
 

components/searchresults.js

@@ -7,7 +7,13 @@ import SearchResults from "./search/searchresults";
 import CRMError from "./crmError";
 
 export default function Search(props) {
-    const { searchString, searchResultsObj, advancedSearch, myportal } = props;
+    const {
+        searchString,
+        searchResultsObj,
+        advancedSearch,
+        myportal,
+        watchedCases,
+    } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -41,6 +47,7 @@ export default function Search(props) {
                                     searchResultsObj.searchDetailsObj
                                 }
                                 myportal={myportal}
+                                watchedCases={watchedCases}
                             />
                         </div>
                     </div>

components/servicebanner.js

@@ -16,6 +16,15 @@ export default function ServiceBanner() {
                     }
                     alt="Planning casework"
                 />
+                <img
+                    className="pedw_logo"
+                    src="/assets/images/pedw_logo.png"
+                    alt={
+                        router.locale == "cy"
+                            ? "Penderfyniadau Cynllunio ac Amgylchedd Cymru"
+                            : "Planning & Environment Decisions Wales"
+                    }
+                />
             </h1>
         </div>
     );

pages/myportal/case.js

@@ -57,6 +57,9 @@ const Home = (props) => {
                             props.myRepresentations.myRepresentations
                         }
                         watchedCases={props.watchedCases.watchedCases}
+                        watchedCasesDetails={
+                            props.watchedCases.watchedCasesDetails
+                        }
                         awaitingSubmission={
                             props.awaitingSubmission.awaitingSubmission
                         }

pages/myportal/index.js

@@ -154,11 +154,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
         const token = await getSASToken();
 
-        console.log("does it have ", cookies.pinsUser);
         let loggedInUser = cookies.pinsUser;
 
-        console.log("qweqe ", loggedInUser);
-
         const [
             accountDetails,
             myCases,
@@ -174,36 +171,15 @@ export const getServerSideProps = wrapper.getServerSideProps(
         ]);
 
         //const cookiesMaker = nookies.get(ctx)
-
-        let now = new Date();
-        let expDate = new Date(now);
-        expDate.setDate(now.getDate() + 1);
-
-        console.log(
-            "Check: ",
-            cookies,
-            cookies.pinsUser,
-            loggedInUser,
-            nookies.get("pinsUser")
-        );
-
-        // nookies.set(ctx, "pinsUser", loggedInUser, {
-        //     expires: expDate,
-        //     httpOnly: false,
-        //     path: "/",
-        // });
-
-        console.log(" from cookie ", cookies);
-
         const [
             myCasesDetails,
             myRepresentationsDetails,
             watchedCasesDetails,
             // awaitingSubmissionDetails,
         ] = await Promise.all([
-            await getDetails(token, myCases),
+            await getDetails(token, myCases, "myCases"),
-            await getDetails(token, myRepresentations),
+            await getDetails(token, myRepresentations, "myRepresentations"),
-            await getDetails(token, watchedCases),
+            await getDetails(token, watchedCases, "myWatchedCases"),
             //  await getDetails(awaitingSubmission),
         ]);
 
@@ -222,20 +198,30 @@ export const getServerSideProps = wrapper.getServerSideProps(
     }
 );
 
-const getDetails = (token, resultsObj) => {
+const getDetails = (token, resultsObj, detailsType) => {
     //console.log(resultsObj);
     let detailsArr = [];
     resultsObj = resultsObj.value;
     const detailsObj = resultsObj.map((searchDetail, index) => {
         if (searchDetail.pinswg_appealcasetype == null) {
-            console.log(searchDetail.ticketnumber);
+            console.log(
+                detailsType != "myWatchedCases"
+                    ? searchDetail.ticketnumber
+                    : searchDetail[
+                          "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                      ]
+            );
         } else {
             detailsArr.push(
                 getPortalModuleDetails(
                     token,
                     getFormCollectionByID(searchDetail.pinswg_appealcasetype)
                         .LogicalCollectionName,
-                    searchDetail.ticketnumber
+                    detailsType != "myWatchedCases"
+                        ? searchDetail.ticketnumber
+                        : searchDetail[
+                              "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                          ]
                 )
             );
         }

pages/myportal/searchresults.js

@@ -16,7 +16,10 @@ import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
 import data from "../../data/collections.json";
 
-import { getSearchDetails } from "../../components/utils";
+import {
+    getSearchDetails,
+    getFormCollectionByID,
+} from "../../components/utils";
 import { setSearch, getSearchObj } from "../../store/search/action";
 import {
     setSearchResults,
@@ -25,16 +28,22 @@ import {
     setDocumentHistory,
     getSearchResultsObj,
 } from "../../store/searchOutput/action";
+import {
+    setWatchedCases,
+    setWatchedCasesDetails,
+} from "../../store/watchedCases/action";
 import {
     getBasicSearch,
     getBasicSearchDetails,
     getSearchDocumentDetails,
     getSearchDocumentHistory,
+    getWatchedCases,
+    getPortalModuleDetails,
     getSASToken,
 } from "../../actions";
 
 const Home = (props) => {
-    const { footerLinks, pages } = props;
+    const { footerLinks, pages, watchedCases } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
@@ -57,6 +66,7 @@ const Home = (props) => {
                         searchString={props.search.searchString}
                         searchResultsObj={props.searchResultsObj}
                         myportal="true"
+                        watchedCases={watchedCases}
                     />
                 </div>
                 <Footer footerLinks={footerLinks} />
@@ -66,36 +76,77 @@ const Home = (props) => {
 };
 
 export const getServerSideProps = wrapper.getServerSideProps(
-    (store) =>
+    (store) => async (ctx) => {
-        async ({ query, req, res }) => {
+        const { query, req, res } = ctx;
-            console.log("query-", query);
+        console.log("query-", query);
 
-            const token = await getSASToken();
+        const { cookies } = req;
 
-            let searchResultsObj = await getBasicSearch(token, query.q);
+        const token = await getSASToken();
 
-            searchResultsObj =
+        let loggedInUser = cookies.pinsUser;
-                searchResultsObj.status == 502
-                    ? {
-                          value: [],
-                          errorCode: searchResultsObj.status,
-                          errorMsg: searchResultsObj.statusText,
-                      }
-                    : searchResultsObj;
 
-            //console.log("sssss", searchResultsObj);
+        let [searchResultsObj, watchedCases] = await Promise.all([
+            await getBasicSearch(token, query.q),
+            await getWatchedCases(token, loggedInUser),
+        ]);
 
-            const searchDetailsObj = await getSearchDetails(
+        searchResultsObj =
-                token,
+            searchResultsObj.status == 502
-                searchResultsObj
+                ? {
-            );
+                      value: [],
+                      errorCode: searchResultsObj.status,
+                      errorMsg: searchResultsObj.statusText,
+                  }
+                : searchResultsObj;
 
-            store.dispatch(setSearchResults(searchResultsObj));
+        //console.log("sssss", searchResultsObj);
-            store.dispatch(setSearchDetails(searchDetailsObj));
+
-            store.dispatch(setSearch(query.q));
+        const [searchDetailsObj, watchedCasesDetails] = await Promise.all([
-        }
+            await getSearchDetails(token, searchResultsObj),
+            await getDetails(token, watchedCases, "myWatchedCases"),
+        ]);
+
+        store.dispatch(setSearchResults(searchResultsObj));
+        store.dispatch(setSearchDetails(searchDetailsObj));
+        store.dispatch(setSearch(query.q));
+        store.dispatch(setWatchedCases(watchedCases));
+        store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
+    }
 );
 
+const getDetails = (token, resultsObj, detailsType) => {
+    //console.log(resultsObj);
+    let detailsArr = [];
+    resultsObj = resultsObj.value;
+    const detailsObj = resultsObj.map((searchDetail, index) => {
+        if (searchDetail.pinswg_appealcasetype == null) {
+            console.log(
+                detailsType != "myWatchedCases"
+                    ? searchDetail.ticketnumber
+                    : searchDetail[
+                          "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                      ]
+            );
+        } else {
+            detailsArr.push(
+                getPortalModuleDetails(
+                    token,
+                    getFormCollectionByID(searchDetail.pinswg_appealcasetype)
+                        .LogicalCollectionName,
+                    detailsType != "myWatchedCases"
+                        ? searchDetail.ticketnumber
+                        : searchDetail[
+                              "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                          ]
+                )
+            );
+        }
+    });
+    //console.log(detailsArr);
+    return Promise.all(detailsArr);
+};
+
 const mapStateToProps = (state) => {
     return {
         currentView: state.currentView,

pages/myportal/viewall.js

@@ -52,6 +52,7 @@ const Home = (props) => {
                         watchedCases={props.watchedCases}
                         myRepresentations={props.myRepresentations}
                         awaitingSubmission={props.awaitingSubmission}
+                        myportal="true"
                     />
                 </div>
                 <Footer footerLinks={footerLinks} />

public/assets/images/my-portal-cy.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="125px" height="24px" viewBox="0 0 125 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Fy mhorth</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rockwell-Bold, Rockwell" font-size="24" font-weight="bold" letter-spacing="-0.75">
+        <text id="Fy-mhorth" fill="#000000">
+            <tspan x="0" y="18">Fy mhorth</tspan>
+        </text>
+    </g>
+</svg>

public/assets/images/my-portal-en.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="119px" height="24px" viewBox="0 0 119 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>My Portal</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rockwell-Bold, Rockwell" font-size="24" font-weight="bold" letter-spacing="-0.75">
+        <text id="My-Portal" fill="#000000">
+            <tspan x="0" y="18">My Portal</tspan>
+        </text>
+    </g>
+</svg>

styles/sass/patterns/_card.scss

@@ -261,7 +261,7 @@ div.cardModuleItem:last-of-type {
         padding-bottom: 0px;
         border-radius: 5px;
         width: auto;
-        color: white;
+        color: white !important;
         font-weight: bold;
         background-color: $red;
         font-size: 15px;
@@ -273,7 +273,8 @@ div.cardModuleItem:last-of-type {
 
         &:hover {
             background-color: $lightred;
-            color: $white;
+            color: $white !important;
+            text-decoration: none;
         }
 
         &:focus {
@@ -286,9 +287,9 @@ div.cardModuleItem:last-of-type {
         &:focus:not(:active):not(:hover) {
             border-color: #ffdd00;
             color: #0b0c0c;
-            background-color: #ffdd00;
+            // background-color: #ffdd00;
-            -webkit-box-shadow: 0 2px 0 #0b0c0c;
+            // -webkit-box-shadow: 0 2px 0 #0b0c0c;
-            box-shadow: 0 2px 0 #0b0c0c;
+            // box-shadow: 0 2px 0 #0b0c0c;
         }
     }
 }

styles/sass/welshgov/_application.scss

@@ -188,6 +188,20 @@ a.longLinkBreak {
 .servicebanner {
     h1 {
         margin-bottom: 0px;
+        display: flex;
+        justify-content: space-between;
+
+        .pedw_logo {
+            width: 120px;
+            padding-right: 10px;
+        }
+
+        @media screen and (max-width: 360px) {
+            flex-direction: column-reverse;
+            .pedw_logo {
+                margin-bottom: 20px;
+            }
+        }
     }
 }
 
@@ -712,6 +726,13 @@ textarea,
 .results .govuk-summary-list__key {
     &:last-of-type {
         width: 30%;
+        &.govuk-summary-list__action {
+            width: 10%;
+
+            @media screen and (max-width: 768px) {
+                width: 100%;
+            }
+        }
     }
 }
 
@@ -1538,3 +1559,48 @@ ul#sharePageLinks.active {
         display: none;
     }
 }
+
+.govuk-summary-list__actionLink {
+    border: 1px solid $red;
+    padding: 5px;
+    height: 20px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border-radius: 5px;
+    width: auto;
+    color: white !important;
+    font-weight: bold;
+    background-color: $red;
+    font-size: 15px;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:active {
+        top: 2px;
+    }
+
+    &:hover {
+        background-color: $lightred;
+        color: $white;
+    }
+
+    &:focus {
+        border-color: #ffdd00;
+        outline: 3px solid transparent;
+        -webkit-box-shadow: inset 0 0 0 1px #ffdd00;
+        box-shadow: inset 0 0 0 1px #ffdd00;
+    }
+
+    &:focus:not(:active):not(:hover) {
+        border-color: #ffdd00;
+        color: #0b0c0c;
+        background-color: #ffdd00;
+        -webkit-box-shadow: 0 2px 0 #0b0c0c;
+        box-shadow: 0 2px 0 #0b0c0c;
+    }
+
+    &.watched_link {
+        color: $black !important;
+        background-color: $white;
+    }
+}