Merged PR 842: build fix

Related work items: #6601

.env.local

@@ -47,6 +47,8 @@ RELAYPATH = "dev-pedw-hc"
 GOOGLE_TAG_MANAGER = GTM-T78CBC3
 SHOWLOGIN = "true"
 SHOWREPRESENTATIONS = false
+SHOWFILEUPLOAD = "false"
+SHOWMAPS = "true"
 //BASIC_AUTH_CREDENTIALS = pinswg:password|pinswg2:password2
 
 
@@ -72,3 +74,4 @@ NEXT_PUBLIC_GG_REDIRECT_URI = "http://localhost:3000"
 API_ROOT = "http://localhost:3000"
 
 
+GOOGLE_MAP_API_KEY = AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo

actions/govgateway.js

@@ -8,6 +8,19 @@ const WEBAPI_URL =
     process.env.RELAY_ROOT ||
     "https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/";
 
+const azureHeaders = (access_token) => {
+    return {
+        headers: {
+            "OData-MaxVersion": "4.0",
+            "OData-Version": "4.0",
+            "Accept": "application/json;odata.metadata=none",
+            "Prefer": 'odata.include-annotations="*",return=representation',
+            "Content-Type": "application/json",
+            "Authorization": "Bearer " + access_token,
+        },
+    };
+};
+
 export const getProviderConfig = () => {
     return axios
         .get(configEndpoint)
@@ -78,19 +91,6 @@ export const getPortalLogin = (emailAddress, token) => {
         });
 };
 
-const azureHeaders = (access_token) => {
-    return {
-        headers: {
-            "OData-MaxVersion": "4.0",
-            "OData-Version": "4.0",
-            "Accept": "application/json;odata.metadata=none",
-            "Prefer": 'odata.include-annotations="*",return=representation',
-            "Content-Type": "application/json",
-            "Authorization": "Bearer " + access_token,
-        },
-    };
-};
-
 var Base64 = {
     _keyStr:
         "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

actions/index.js

@@ -190,6 +190,24 @@ export const getBasicSearchPaged = (
         });
 };
 
+export const getDNSCoords = () => {
+    return axios
+        .get(BASE_URL + "/api/endpoint/getdnscoords_api")
+        .then((res) => {
+            //console.log(res.data);
+            return res.data;
+        })
+        .catch((error) => {
+            let ErrResponse = {
+                value: [],
+                errorCode: error.response.status,
+                errorMsg: error.response.statusText,
+            };
+
+            return ErrResponse;
+        });
+};
+
 export const getDNSList = (searchString) => {
     return axios
         .get(BASE_URL + "/api/endpoint/getdnslist_api")

actions/selectQueryTypes.js

@@ -19,7 +19,7 @@ export const getSelectQuery = (appealTypeName) => {
         case "pinswg_compulsorypurchaseorderses":
             return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode";
         case "pinswg_dnses":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_addresscounty,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_choiceofprocedure,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofdecision,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectdescription,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_suspensionenddates,pinswg_suspensionstartdates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode,pinswg_casestage";
+            return "&$select=pinswg_anticipatedgridreferenceeastingtext,pinswg_anticipatedgridreferencenorthingtext,_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_addresscounty,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_choiceofprocedure,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofdecision,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectdescription,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_suspensionenddates,pinswg_suspensionstartdates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode,pinswg_casestage";
         case "pinswg_electricityacts":
             return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode";
         case "pinswg_householderappealhases":

components/breadcrumbs.js

@@ -395,6 +395,64 @@ const Breadcrumbs = (props) => {
                         ) : (
                             ""
                         )}
+
+                        {router.pathname == "/myportal/dnsapplications" ? (
+                            <>
+                                {" "}
+                                <li className="govuk-breadcrumbs__list-item">
+                                    <Link
+                                        href={
+                                            router.locale != "en"
+                                                ? router.locale + "/myportal"
+                                                : "/myportal"
+                                        }
+                                    >
+                                        <a className="govuk-breadcrumbs__link">
+                                            {t("common:breadcrumb-my-portal")}
+                                        </a>
+                                    </Link>
+                                </li>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("dnsCommon:service-name")}
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
+                        {router.pathname == "/myportal/dnsdetails" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    <Link
+                                        href={
+                                            router.locale != "en"
+                                                ? router.locale + "/myportal"
+                                                : "/myportal"
+                                        }
+                                    >
+                                        <a className="govuk-breadcrumbs__link">
+                                            {t("common:breadcrumb-my-portal")}
+                                        </a>
+                                    </Link>
+                                </li>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    <Link href={"/myportal/dnsapplications"}>
+                                        <a className="govuk-breadcrumbs__link">
+                                            {t("dnsCommon:service-name")}
+                                        </a>
+                                    </Link>
+                                </li>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("common:breadcrumb-case-reference")}:{" "}
+                                    {
+                                        props.props.currentView.caseReference
+                                            .currentReference
+                                    }
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
+
                         {router.pathname == "/case" ? (
                             <>
                                 <li className="govuk-breadcrumbs__list-item">

components/case/documents.js

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import transLookup from "../../data/lookuptranslations.json";
 import PaginationControl from "./pagination";
@@ -289,9 +289,11 @@ const DocumentDetails = (props) => {
         selectedOption,
         fieldSortState,
         orderByState,
+        getDocumentResults,
     ]);
 
-    const getDocumentResults = (pageNumber, orderBy, fieldSort) => {
+    const getDocumentResults = useCallback(
+        (pageNumber, orderBy, fieldSort) => {
             getSearchDocumentDetailsPaged(
                 props.incidentid,
                 pageNumber,
@@ -305,7 +307,9 @@ const DocumentDetails = (props) => {
                     setDocumentDetails(data);
                     setShowSpinnerState(false);
                 });
-    };
+        },
+        [props.incidentid, selectedOption, setDocumentDetails]
+    );
 
     const getDocumentDetails = async () => {
         let docObj = await getSearchDocumentDetailsPaged(

components/case/summaryTypes/pinswg_dnsid.js

@@ -1,21 +1,50 @@
 import { useRouter } from "next/router";
+import Head from "next/head";
+import { useEffect, useRef, ReactElement } from "react";
+
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
-import _ from "lodash";
+import _, { round } from "lodash";
 import transLookup from "../../../data/lookuptranslations.json";
 
+import GoogleMapComponent from "../../mapping/";
+
+import OSPoint from "ospoint";
+
 const Pinswg_dnsid = (props) => {
     let { t } = useTranslation();
     const { casesObj, detailsObj, formatDates, linkedCasesList } = props;
 
     const router = useRouter();
     const { locale } = router;
+    const point = {};
+    const siteCoords = {};
+    let center = {};
+
+    point = new OSPoint(
+        detailsObj.pinswg_anticipatedgridreferencenorthingtext,
+        detailsObj.pinswg_anticipatedgridreferenceeastingtext
+    );
+    siteCoords = point.toOSGB36();
+    //console.log(siteCoords);
+    center = {
+        id: "",
+        lat: isNaN(parseFloat(siteCoords.latitude))
+            ? 52.412272
+            : parseFloat(siteCoords.latitude),
+        lng: isNaN(parseFloat(siteCoords.longitude))
+            ? -3.437989
+            : parseFloat(siteCoords.longitude),
+    };
+
+    const zoom = isNaN(parseFloat(siteCoords.latitude)) ? 7 : 12;
+
     return (
         <>
             {detailsObj.pinswg_projectdescription != null ? (
                 <div className="govuk-grid-row">
                     <div className="flex-container grid-row govuk-body case">
-                        <div className="govuk-grid-column-full">
+                        <div className="govuk-grid-column-one-half">
                             <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
                                 {t("case:summary-project-details-label")}
                             </h2>
@@ -51,6 +80,22 @@ const Pinswg_dnsid = (props) => {
                                     : ""}
                             </p> */}
                         </div>
+                        {/* {process.env.SHOWMAPS == "true" && ( */}
+                        <div className="govuk-grid-column-one-half">
+                            <div
+                                style={{
+                                    height: "40vh",
+                                    width: "100%",
+                                }}
+                            >
+                                <GoogleMapComponent
+                                    center={center}
+                                    zoom={zoom}
+                                />
+                                {/* <OSMapComponent center={center} zoom={zoom} /> */}
+                            </div>
+                        </div>
+                        {/* )} */}
                     </div>
                 </div>
             ) : (

components/dnssearchresults.js

@@ -7,7 +7,7 @@ import DNSSearchResults from "./search/dnssearchresults";
 import CRMError from "./crmError";
 
 export default function Search(props) {
-    const { searchString, searchResultsObj } = props;
+    const { searchString, searchResultsObj, myportal, watchedCases } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -39,6 +39,9 @@ export default function Search(props) {
                                 searchDetailsObj={
                                     searchResultsObj.searchDetailsObj
                                 }
+                                dnsCoords={searchResultsObj.dnsCoordsObj.value}
+                                myportal={myportal}
+                                watchedCases={watchedCases}
                             />
                         </div>
                     </div>

components/elements/index.js

@@ -73,10 +73,9 @@ export function Textfield(props) {
         hint,
     } = props;
     const required = (value) => (value ? undefined : "Required");
-
-    if (name == "pinswg_name") {
     let { t } = useTranslation();
 
+    if (name == "pinswg_name") {
         return (
             <>
                 <div className="govuk-form-group">
@@ -676,7 +675,7 @@ const RenderRadio = ({
                     >
                         {" "}
                         {custom.hint != false && (
-                            <div class="govuk-hint">{t(custom.hint)}</div>
+                            <div className="govuk-hint">{t(custom.hint)}</div>
                         )}
                         {Object.keys(options).map((key, index) => (
                             <div

components/mapping/index.js

@@ -0,0 +1,43 @@
+import GoogleMapReact from "google-map-react";
+const GoogleMapComponent = (props) => {
+    const { center, zoom } = props;
+
+    let data = [center];
+
+    const ModelsMap = (map, maps) => {
+        //instantiate array that will hold your Json Data
+        let dataArray = [];
+        //push your Json Data in the array
+        {
+            data.map((markerJson) => dataArray.push(markerJson));
+        }
+
+        //Loop through the dataArray to create a marker per data using the coordinates in the json
+        for (let i = 0; i < dataArray.length; i++) {
+            let marker = new maps.Marker({
+                position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
+                map,
+                label: dataArray[i].id,
+            });
+        }
+    };
+    return (
+        <GoogleMapReact
+            options={function (maps) {
+                return {
+                    overviewMapControl: true,
+                    mapTypeControl: true,
+                };
+            }}
+            bootstrapURLKeys={{
+                key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
+            }}
+            defaultCenter={center}
+            defaultZoom={zoom}
+            yesIWantToUseGoogleMapApiInternals
+            onGoogleApiLoaded={({ map, maps }) => ModelsMap(map, maps)}
+        ></GoogleMapReact>
+    );
+};
+
+export default GoogleMapComponent;

components/mapping/osm.js

@@ -0,0 +1,38 @@
+import L from "leaflet";
+import { useRef, useMemo } from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+
+const OSMapComponent = (props) => {
+    const { center, zoom } = props;
+    const markerRef = useRef(null);
+    let data = [center];
+
+    // const ModelsMap = (map, maps) => {
+    //     //instantiate array that will hold your Json Data
+    //     let dataArray = [];
+    //     //push your Json Data in the array
+    //     {
+    //         data.map((markerJson) => dataArray.push(markerJson));
+    //     }
+
+    //     //Loop through the dataArray to create a marker per data using the coordinates in the json
+    //     for (let i = 0; i < dataArray.length; i++) {
+    //         let marker = new maps.Marker({
+    //             position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
+    //             map,
+    //             label: dataArray[i].id,
+    //         });
+    //     }
+    // };
+
+    return (
+        <MapContainer center={center} zoom={zoom}>
+            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+
+            <Marker position={center} ref={markerRef}>
+                <Popup>hello</Popup>
+            </Marker>
+        </MapContainer>
+    );
+};
+export default OSMapComponent;

components/myportal.js

@@ -10,14 +10,17 @@ import MyRepresentations from "./myportal/myrepresentations";
 import WatchedCases from "./myportal/watchedcases";
 import YourAccount from "./myportal/youraccount";
 import { parseCookies, setCookie, destroyCookie } from "nookies";
+import Dns from "./myportal/dns";
 
 import IdleTimer from "react-idle-timer";
 import TimeoutModal from "./timeout/timeoutmodal";
 import { useState } from "react";
 
 import TimeOut from "../components/timeout";
+import UploadFile from "./myportal/uploadFile";
 
 const MyPortal = (props) => {
+    const { showFileUpload } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -110,18 +113,18 @@ const MyPortal = (props) => {
                     <div className="govuk-grid-column-full">
                         <div className="flex-container grid-row govuk-body ">
                             <MakeNewAppeal />
-                            <MyCases myCases={props.myCases} />
                             <SearchCases />
                             <AwaitingSubmission
                                 awaitingSubmission={props.awaitingSubmission}
                             />
+                            <MyCases myCases={props.myCases} />
+                            <WatchedCases watchedCases={props.watchedCases} />
                             <MyRepresentations
                                 myRepresentations={props.myRepresentations}
                             />
-                            <WatchedCases watchedCases={props.watchedCases} />
+                            <Dns />
-                        </div>
-                        <div className="flex-container grid-row govuk-body ">
                             <YourAccount />
+                            {showFileUpload == "true" && <UploadFile />}
                         </div>
                     </div>
                 </div>

components/myportal/awaitingsubmission.js

@@ -13,7 +13,7 @@ const AwaitingSubmission = (props) => {
     const { setCurrentView } = props;
 
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("myportal:awatitingsubmission-card-title")}

components/myportal/dns.js

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import LoadingOverlay from "react-loading-overlay";
+
+export default function Dns() {
+    let { t } = useTranslation();
+    //const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    const router = useRouter();
+    const { locale } = router;
+
+    // let spinnerState = () => {
+    //     showSpinnerState == true
+    //         ? setShowSpinnerState(false)
+    //         : setShowSpinnerState(true);
+    // };
+    return (
+        <div className="card" id="casesearch-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("home:dns-card-title")}
+                </h3>
+                <div className="govuk-form-group">
+                    <p className="govuk-body-s">
+                        {t("home:dns-card-paragraph")}
+                    </p>
+                </div>
+                <div className="govuk-form-group">
+                    <Link
+                        href={
+                            router.locale == "cy"
+                                ? "/fymhorth/ceisiadaudns"
+                                : "/myportal/dnsapplications"
+                        }
+                    >
+                        <a
+                            className="govuk-button withChevron govuk-button-cta"
+                            // onClick={() => {
+                            //     spinnerState();
+                            // }}
+                        >
+                            {t("home:dns-card-button")}
+                        </a>
+                    </Link>
+                </div>
+            </div>
+            {/* <LoadingOverlay
+                active={showSpinnerState}
+                spinner
+                text={t("common:spinner-loading")}
+            /> */}
+        </div>
+    );
+}

components/myportal/makenewappeal.js

@@ -8,7 +8,7 @@ export default function MakeNewAppeal() {
     const router = useRouter();
     const { locale } = router;
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h2 className="govuk-heading-s">
                     {t("myportal:makenewappeal-card-title")}

components/myportal/mycases.js

@@ -12,7 +12,7 @@ const MyCases = (props) => {
     const { locale } = router;
     const { setCurrentView } = props;
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("myportal:mycases-card-title")}

components/myportal/myrepresentations.js

@@ -13,7 +13,7 @@ const MyRepresentations = (props) => {
     const { setCurrentView } = props;
 
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("myportal:myrepresentations-card-title")}

components/myportal/searchcases.js

@@ -98,7 +98,7 @@ let CaseSearch = (props) => {
 
     return (
         <>
-            <div className="card card-3" id="casesearch-card">
+            <div className="card" id="casesearch-card">
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
                     <div className="card-body">
                         <h3 className="heading-small card-heading">

components/myportal/topthree.js

@@ -212,11 +212,17 @@ const TopThree = (props) => {
                                       ]}
                             </a>
                         </Link>
-                        {topThreeType == "awaitingSubmission" &&
+                    </div>
+                    {(topThreeType == "awaitingSubmission" ||
+                        topThreeType == "watchedCases") && (
+                        <div>
+                            {
                                 showTopThreeArr[key][
                                     "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                            ]}
+                                ]
+                            }
                         </div>
+                    )}
                     {topThreeType != "awaitingSubmission" ? (
                         <div className="carModuleAddress">
                             <b>{t("myportal:case-address")}:</b>{" "}

components/myportal/uploadFile.js

@@ -0,0 +1,313 @@
+import Link from "next/link";
+import { useState, useMemo } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import LoadingOverlay from "react-loading-overlay";
+import DropzoneComponent from "../newappeal/fileupload";
+import { Field, reduxForm } from "redux-form";
+import { connect } from "react-redux";
+import Dropzone, { useDropzone } from "react-dropzone";
+import { uploadFiles } from "../../actions";
+
+const required = (errorMsg) => (value) =>
+    value || typeof value === "number" ? undefined : errorMsg;
+
+export const minLength = (errorMsg) => (value) =>
+    value && value.length < 4
+        ? errorMsg //`Must be ${min} characters or more`
+        : undefined;
+
+const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    hint1,
+    hint2,
+    hint3,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div className="govuk-form-group">
+                <div id="basicSearch-hint" className="govuk-hint ">
+                    <label
+                        className="govuk-label "
+                        htmlFor={id}
+                        id={id + "_label"}
+                    >
+                        <span className="govuk-body-s">{hint1}</span>
+                    </label>
+                </div>
+
+                <div>
+                    <input
+                        {...input}
+                        className={className}
+                        name={name}
+                        id={id}
+                    />
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message govuk-form-group--error"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {error}
+                        </span>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+const baseStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "20px",
+    borderWidth: 2,
+    borderRadius: 2,
+    borderColor: "#eeeeee",
+    borderStyle: "dashed",
+    backgroundColor: "#fafafa",
+    color: "#bdbdbd",
+    transition: "border .3s ease-in-out",
+    width: "80%",
+    margin: "20px auto 30px",
+};
+
+const activeStyle = {
+    borderColor: "#2196f3",
+};
+
+const acceptStyle = {
+    borderColor: "#00e676",
+};
+
+const rejectStyle = {
+    borderColor: "#ff1744",
+};
+const RenderFileUpload = (field) => {
+    const files = field.input.value;
+    const style = useMemo(
+        () => ({
+            ...baseStyle,
+            // ...(isDragActive ? activeStyle : {}),
+            // ...(isDragAccept ? acceptStyle : {}),
+            // ...(isDragReject ? rejectStyle : {}),
+        }),
+        []
+        // [isDragActive, isDragReject, isDragAccept]
+    );
+    const [filesList, setFilesList] = useState([]);
+
+    const thumbs = filesList.map((file) => (
+        <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
+            <img src={file.preview} alt={file.name} width="50" /> -{" "}
+            <span className="govuk-body">
+                {file.name} ({file.size / 1024}kb)
+            </span>
+        </div>
+    ));
+
+    function bytesToSize(bytes) {
+        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+        if (bytes == 0) return "0 Byte";
+        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
+    }
+
+    const getThumbnailIcon = (fileObj, fileType) => {
+        switch (fileType) {
+            case "text/html":
+                return "/assets/images/documentTypes/html.png";
+                break;
+            case "text/plain":
+                return "/assets/images/documentTypes/txt.png";
+                break;
+            case "application/msword":
+                return "/assets/images/documentTypes/doc.png";
+                break;
+            case "application/pdf":
+                return "/assets/images/documentTypes/pdf.png";
+                break;
+            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+                return "/assets/images/documentTypes/docx.png";
+                break;
+            case "text/csv":
+                return "/assets/images/documentTypes/csv.png";
+                break;
+            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+                return "/assets/images/documentTypes/xlsx.png";
+                break;
+
+            case "application/zip":
+                return "/assets/images/documentTypes/zip.png";
+                break;
+            case "image/jpeg":
+            case "image/png":
+                return URL.createObjectURL(fileObj);
+                break;
+        }
+    };
+    return (
+        <div>
+            <Dropzone
+                onDrop={(filesToUpload, e) =>
+                    field.input.onChange(filesToUpload)
+                }
+            >
+                {({ getRootProps, getInputProps }) => (
+                    <div className="govuk-grid-row">
+                        <div className="govuk-form-group"></div>
+                        <section className="container">
+                            <div {...getRootProps({ style })}>
+                                {" "}
+                                <input {...getInputProps()} />
+                                <div>Drag and drop your files here.</div>
+                            </div>
+                            <aside>{thumbs}</aside>
+                        </section>
+                    </div>
+                )}
+            </Dropzone>
+
+            {field.meta.touched && field.meta.error && (
+                <span className="error">{field.meta.error}</span>
+            )}
+            {files && Array.isArray(files) && (
+                <ul>
+                    {files.map((file, i) => (
+                        <div
+                            key={file.name}
+                            className="govuk-!-margin-bottom-5 fileThumb"
+                        >
+                            <img
+                                src={getThumbnailIcon(file, file.type)}
+                                alt={file.name}
+                                width="50"
+                            />{" "}
+                            {"  "}
+                            <span className="govuk-body govuk-!-padding-left-5">
+                                {file.name} ({bytesToSize(file.size)})
+                            </span>
+                        </div>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+let UploadFile = (props) => {
+    let { t } = useTranslation();
+    //const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const { handleSubmit, pristine, reset, submitting } = props;
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const onHandleSubmit = async (values) => {
+        //spinnerState();
+        console.log(values);
+
+        const uploadAction = await uploadFiles(values);
+        // router.push({
+        //     pathname:
+        //         router.locale == "cy"
+        //             ? "/fymhorth/canlyniadauchwilio"
+        //             : "/myportal/searchresults",
+        //     query: { q: values.basicSearch },
+        //     shallow: true,
+        // });
+    };
+
+    return (
+        <div className="card" id="casesearch-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">Upload a file</h3>
+                <div className="govuk-form-group">
+                    <p className="govuk-body-s">reqweqwe eqwe qwe qwe qwe</p>
+                </div>
+                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    <div className="govuk-form-group">
+                        <Field
+                            validate={[
+                                required(
+                                    t(
+                                        "myportal:searchcases-validation-required"
+                                    )
+                                ),
+                                minLength(
+                                    t(
+                                        "myportal:searchcases-validation-minlength"
+                                    )
+                                ),
+                            ]}
+                            className="govuk-input"
+                            component={RenderTextfield}
+                            id="caseReference"
+                            name="caseReference"
+                            type="text"
+                            aria-describedby="caseReference-hint"
+                            hint1="Case Reference"
+                        />
+                    </div>
+                    <div className="govuk-grid-row">
+                        <Field
+                            name="fileList"
+                            id="fileList"
+                            component={RenderFileUpload}
+                            className="govuk-input govuk-input--width-20"
+                            //validate={[required]}
+                            label={props.label}
+                            errorMsg="Is required"
+                        />
+                    </div>
+                    <div className="govuk-form-group">
+                        <button type="submit" className="govuk-button">
+                            Add Files
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        currentView: state.currentView,
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "uploadFileForm",
+        destroyOnUnmount: false,
+    })(UploadFile)
+);

components/myportal/viewall.js

@@ -121,7 +121,7 @@ const ViewAllResults = (props) => {
                     <span className="results-visually-hidden">
                         {t("search:searchresults-site-address-label")}:
                     </span>
-                    {getFormCollectionByID(appealTypeID).PrimaryIdAttribute ==
+                    {/* {getFormCollectionByID(appealTypeID).PrimaryIdAttribute ==
                     "pinswg_dnsid"
                         ? detailsObj.pinswg_projectlocation != null
                             ? detailsObj.pinswg_projectlocation.indexOf(";") < 0
@@ -134,7 +134,7 @@ const ViewAllResults = (props) => {
                                       ";"
                                   )[0]
                             : ""
-                        : ""}
+                        : ""} */}
                     {_.has(detailsObj, "pinswg_siteaddressline1")
                         ? detailsObj.pinswg_siteaddressline1
                         : ""}

components/myportal/watchedcases.js

@@ -13,7 +13,7 @@ const WatchedCases = (props) => {
     const { setCurrentView } = props;
 
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("myportal:watchedcases-card-title")}

components/myportal/youraccount.js

@@ -26,8 +26,7 @@ export default function YourAccount() {
                         </Link>
                     </div>
                 </div>
-            </div>
+
-            <div className="card" id="casescomment-card">
                 <div className="card-body">
                     <h3 className="heading-small card-heading">
                         {t("myportal:changepassword-card-title")}

components/newappeal/aboutyou.js

@@ -180,13 +180,13 @@ let AboutYou = (props) => {
                 label={t("newappeal:about-you-on-behalf-label")}
             />
             <div className="govuk-form-group">
-                <details class="govuk-details" data-module="govuk-details">
+                <details className="govuk-details" data-module="govuk-details">
-                    <summary class="govuk-details__summary">
+                    <summary className="govuk-details__summary">
-                        <span class="govuk-details__summary-text">
+                        <span className="govuk-details__summary-text">
                             Who can appeal?
                         </span>
                     </summary>
-                    <div class="govuk-details__text">
+                    <div className="govuk-details__text">
                         Only those named as an applicant on the original
                         application form can submit an appeal. if you are
                         submitting an appeal on behalf of a company state the

components/newappeal/buildsection.js

@@ -267,7 +267,9 @@ let BuildSection = (props) => {
                                     <ol className="govuk-list govuk-list--bullet">
                                         {Object.entries(documentListObj).map(
                                             ([key, value]) => {
-                                                return <li>{value}</li>;
+                                                return (
+                                                    <li key={key}>{value}</li>
+                                                );
                                             }
                                         )}
                                     </ol>

components/search/dnssearchresults.js

@@ -6,7 +6,7 @@ import jsonpath from "jsonpath";
 import _ from "lodash";
 import transLookup from "../../data/lookuptranslations.json";
 import PaginationControl from "./pagination";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import LoadingOverlay from "react-loading-overlay";
 import {
     getBasicDNSSearchPaged,
@@ -18,12 +18,25 @@ import {
     setSearchResults,
     setSearchDetails,
 } from "../../store/searchOutput/action";
-import { getSearchDetailsPaged } from "../utils";
+import { getSearchDetailsPaged, getFormCollectionByID } from "../utils";
 import {
     currentViewActionTypes,
     setCurrentReference,
     setCurrentPage,
 } from "../../store/currentView/action";
+import GoogleMapReact from "google-map-react";
+import { parseCookies, setCookie, destroyCookie } from "nookies";
+import {
+    setWatchedCases,
+    setWatchedCasesDetails,
+} from "../../store/watchedCases/action";
+import {
+    createWatchedCases,
+    getWatchedCasesProxy,
+    getPortalModuleDetailsProxy,
+    deleteWatchedCases,
+} from "../../actions";
+import OSPoint from "ospoint";
 
 const DNSSearchResults = (props) => {
     const {
@@ -35,6 +48,11 @@ const DNSSearchResults = (props) => {
         setSearchDetails,
         advancedSearch,
         setCurrentPage,
+        dnsCoords,
+        myportal,
+        watchedCases,
+        setWatchedCases,
+        setWatchedCasesDetails,
     } = props;
     let { t } = useTranslation();
 
@@ -46,6 +64,82 @@ const DNSSearchResults = (props) => {
     const [searchLoaded, setSearchLoaded] = useState(false);
     const [showSpinnerState, setShowSpinnerState] = useState(false);
 
+    let dataArray = [];
+    //push your Json Data in the array
+
+    dnsCoords.map((item) => {
+        let point = new OSPoint(
+            item.pinswg_anticipatedgridreferencenorthingtext,
+            item.pinswg_anticipatedgridreferenceeastingtext
+        );
+        let siteCoords = point.toOSGB36();
+        //console.log(siteCoords);
+        //console.log(item);
+        dataArray.push({
+            appellant:
+                item[
+                    "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
+                ],
+            name: item.pinswg_projectname,
+            lat: parseFloat(siteCoords.latitude),
+            lng: parseFloat(siteCoords.longitude),
+            title: item.pinswg_name,
+        });
+    });
+
+    //console.log(dataArray);
+
+    const ModelsMap = (map, maps) => {
+        //instantiate array that will hold your Json Data
+        //console.log("here");
+        var prev_infowindow = false;
+        //Loop through the dataArray to create a marker per data using the coordinates in the json
+        console.log(dataArray.length);
+        for (let i = 0; i < dataArray.length; i++) {
+            const infowindow = new google.maps.InfoWindow({
+                content:
+                    "<div>" +
+                    (_.isEmpty(dataArray[i].name)
+                        ? ""
+                        : dataArray[i].name.indexOf(";") > 0
+                        ? router.locale == "cy"
+                            ? dataArray[i].name.split(";")[1]
+                            : dataArray[i].name.split(";")[0]
+                        : dataArray[i].name) +
+                    "</div>" +
+                    (dataArray[i].appellant != null
+                        ? "<div>" + dataArray[i].appellant + "</div>"
+                        : "") +
+                    "<div>" +
+                    dataArray[i].title +
+                    "</div>",
+            });
+            let marker = new maps.Marker({
+                position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
+                title: _.isEmpty(dataArray[i].name)
+                    ? ""
+                    : dataArray[i].name.indexOf(";") > 0
+                    ? router.locale == "cy"
+                        ? dataArray[i].name.split(";")[1]
+                        : dataArray[i].name.split(";")[0]
+                    : dataArray[i].name,
+                map,
+            });
+            marker.addListener("click", () => {
+                if (prev_infowindow) {
+                    prev_infowindow.close();
+                }
+
+                prev_infowindow = infowindow;
+                infowindow.open({
+                    anchor: marker,
+                    map,
+                    shouldFocus: true,
+                });
+            });
+        }
+    };
+
     let spinnerState = () => {
         showSpinnerState == true
             ? setShowSpinnerState(false)
@@ -56,6 +150,83 @@ const DNSSearchResults = (props) => {
     const [fieldSortState, setfieldSortState] = useState("asc");
     const [selectedOption, setSelectedOption] = useState(10);
 
+    const cookies = parseCookies();
+
+    const selectWatchedCase = (loggedInUser, incidentID, appealType) => {
+        let updateBody = {
+            "pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")",
+            "pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")",
+            "pinswg_appealcasetype": +appealType,
+        };
+
+        createWatchedCases(updateBody)
+            .then((data) => data)
+            .then(() => {
+                getWatchedCasesProxy(cookies.pinsUser).then((data) => {
+                    setWatchedCases(data),
+                        getDetails(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 cookies = parseCookies();
+        topThreeType == "watchedCases" &&
+            deleteWatchedCases(caseID)
+                .then((data) => data)
+                .then(() => {
+                    getWatchedCasesProxy(cookies.pinsUser).then((data) => {
+                        setWatchedCases(data),
+                            getDetails(data, "myWatchedCases").then((data) => {
+                                setWatchedCasesDetails(data);
+                            });
+                    });
+                });
+    };
+
+    const getDetails = (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(
+                        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 (
             <div className="govuk-grid-row govuk-!-margin-top-9">
@@ -107,6 +278,9 @@ const DNSSearchResults = (props) => {
                                     {t("search:searchresults-status-label")}
                                 </button>
                             </dd>
+                            {myportal == true && (
+                                <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
+                            )}
                         </div>
 
                         {showSpinnerState == true ? (
@@ -143,8 +317,14 @@ const DNSSearchResults = (props) => {
                                             <Link
                                                 href={
                                                     router.locale == "cy"
-                                                        ? "/manyliondns"
+                                                        ? (myportal == true
-                                                        : "/dnsdetails"
+                                                              ? "/fymhorth"
+                                                              : "") +
+                                                          "/manyliondns"
+                                                        : (myportal == true
+                                                              ? "/myportal"
+                                                              : "") +
+                                                          "/dnsdetails"
                                                 }
                                             >
                                                 <a
@@ -294,6 +474,53 @@ const DNSSearchResults = (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>
                                 );
                             })
@@ -334,10 +561,16 @@ const DNSSearchResults = (props) => {
               )
             : pagesCount;
 
-    const getSearchPageResults = (pageNumber, orderBy, fieldSort) => {
+    const getSearchPageResults = useCallback(
+        (pageNumber, orderBy, fieldSort) => {
             //console.log(advancedSearch, searchString, pageNumber);
 
-        getBasicDNSSearchPaged(pageNumber, orderBy, fieldSort, selectedOption)
+            getBasicDNSSearchPaged(
+                pageNumber,
+                orderBy,
+                fieldSort,
+                selectedOption
+            )
                 .then((data) => {
                     return data;
                 })
@@ -348,7 +581,9 @@ const DNSSearchResults = (props) => {
                         setShowSpinnerState(false);
                     });
                 });
-    };
+        },
+        [selectedOption, setSearchDetails, setSearchResults]
+    );
 
     const sortDataBy = (whichField) => {
         setOrderbyState(whichField);
@@ -373,11 +608,18 @@ const DNSSearchResults = (props) => {
         } else {
             setSearchLoaded(true);
         }
-    }, [selectedOption, fieldSortState, orderByState, searchLoaded]);
+    }, [
+        selectedOption,
+        fieldSortState,
+        orderByState,
+        searchLoaded,
+        getSearchPageResults,
+    ]);
     return (
         <>
             <div className="govuk-grid-row">
-                <div className="govuk-grid-column-two-thirds">
+                <div className="flex-container grid-row govuk-body case">
+                    <div className="govuk-grid-column-one-half">
                         <h1 className="govuk-heading-l">
                             {t("dnsApplications:page-title")}
                         </h1>
@@ -385,15 +627,56 @@ const DNSSearchResults = (props) => {
                             {t("dnsApplications:page-intro-paragraph-1")}
                         </p>
                         <ul className="govuk-list govuk-list--bullet">
-                        <li> {t("dnsApplications:page-intro-list-item-1")}</li>
+                            <li>
+                                {" "}
+                                {t("dnsApplications:page-intro-list-item-1")}
+                            </li>
 
-                        <li> {t("dnsApplications:page-intro-list-item-2")}</li>
+                            <li>
+                                {" "}
+                                {t("dnsApplications:page-intro-list-item-2")}
+                            </li>
 
-                        <li> {t("dnsApplications:page-intro-list-item-3")}</li>
+                            <li>
+                                {" "}
+                                {t("dnsApplications:page-intro-list-item-3")}
+                            </li>
                         </ul>
                     </div>
-            </div>
 
+                    {/* {process.env.SHOWMAPS == "true" && ( */}
+                    <div className="govuk-grid-column-one-half">
+                        <div
+                            style={{
+                                height: "45vh",
+                                width: "100%",
+                            }}
+                        >
+                            <GoogleMapReact
+                                options={function (maps) {
+                                    return {
+                                        overviewMapControl: true,
+                                        mapTypeControl: true,
+                                    };
+                                }}
+                                bootstrapURLKeys={{
+                                    key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
+                                }}
+                                defaultCenter={{
+                                    id: "",
+                                    lat: 52.412272,
+                                    lng: -3.437989,
+                                }}
+                                defaultZoom={7}
+                                onGoogleApiLoaded={({ map, maps }) =>
+                                    ModelsMap(map, maps)
+                                }
+                            />
+                        </div>
+                    </div>
+                    {/* )} */}
+                </div>
+            </div>
             {searchResultsObj["@odata.count"] > 5 && (
                 <div id="recordCountSelect" className="govuk-grid-row">
                     <div className="govuk-form-group">
@@ -449,6 +732,12 @@ const mapDispatchToProps = (dispatch) => {
         setSearchDetails: (searchDetailsObj) => {
             dispatch(setSearchDetails(searchDetailsObj));
         },
+        setWatchedCases: (watchedCases) => {
+            dispatch(setWatchedCases(watchedCases));
+        },
+        setWatchedCasesDetails: (watchedCasesDetails) => {
+            dispatch(setWatchedCasesDetails(watchedCasesDetails));
+        },
         setCurrentPage: (currentPage) => {
             dispatch(setCurrentPage(currentPage));
         },

components/search/searchresults.js

@@ -17,7 +17,7 @@ import {
     getAdvancedSearchPaged,
 } from "../../actions";
 import data from "../../data/collections.json";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import LoadingOverlay from "react-loading-overlay";
 
 import {
@@ -549,7 +549,8 @@ const SearchResults = (props) => {
               )
             : pagesCount;
 
-    const getSearchPageResults = (pageNumber, orderBy, fieldSort) => {
+    const getSearchPageResults = useCallback(
+        (pageNumber, orderBy, fieldSort) => {
             //console.log(advancedSearch, searchString, pageNumber);
 
             if (advancedSearch) {
@@ -591,7 +592,15 @@ const SearchResults = (props) => {
                         });
                     });
             }
-    };
+        },
+        [
+            advancedSearch,
+            searchString,
+            selectedOption,
+            setSearchDetails,
+            setSearchResults,
+        ]
+    );
 
     const sortDataBy = (whichField) => {
         setOrderbyState(whichField);
@@ -616,7 +625,13 @@ const SearchResults = (props) => {
         } else {
             setSearchLoaded(true);
         }
-    }, [selectedOption, fieldSortState, orderByState, searchLoaded]);
+    }, [
+        selectedOption,
+        fieldSortState,
+        orderByState,
+        searchLoaded,
+        getSearchPageResults,
+    ]);
     // console.log(
     //     "page is here ",
     //     currentPage,

i18n.js

@@ -11,12 +11,19 @@ module.exports = {
     "pages": {
         "*": ["common", "newappeal", "search"],
         "/": ["common", "home"],
-        "/myportal": ["myportal"],
+        "/myportal": ["myportal", "common", "home"],
         "/myportal/viewall": ["search"],
         "/myportal/advancedsearch": ["search", "myportal"],
         "/myportal/advancedsearchresults": ["search", "myportal"],
         "/myportal/searchresults": ["search", "myportal"],
         "/myportal/case": ["case"],
+        "/myportal/dnsapplications": ["search", "dnsCommon", "dnsApplications"],
+        "/myportal/dnsdetails": [
+            "case",
+            "search",
+            "dnsCommon",
+            "dnsApplications",
+        ],
         "/advancedsearch": ["search", "myportal"],
         "/advancedsearchresults": ["search"],
         "/searchresults": ["search"],
@@ -39,5 +46,6 @@ module.exports = {
         "/account/personaldetails": ["common", "search"],
         "/details-about-cookies": ["common", "cookies"],
         "/terms-and-conditions": ["common"],
+        "/account/passwordreset": ["common", "home"],
     },
 };

package.json

@@ -9,6 +9,7 @@
     "start": "node_modules/next/dist/bin/next start"
   },
   "dependencies": {
+    "@googlemaps/react-wrapper": "^1.1.24",
     "@webdeb/next-styles": "^1.1.1",
     "applicationinsights": "^2.2.0",
     "axios": "^0.24.0",
@@ -21,21 +22,26 @@
     "dynamics-web-api": "^1.7.4",
     "express": "^4.17.2",
     "fs": "^0.0.1-security",
+    "google-map-react": "^2.1.10",
     "govuk-frontend": "3.13.0",
     "https": "^1.0.0",
     "hyco-https": "^1.4.5",
     "jsonpath": "^1.1.1",
     "jsonpath-plus": "^6.0.1",
+    "leaflet": "^1.7.1",
+    "leaflet-defaulticon-compatibility": "^0.1.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
+    "multer": "^1.4.4",
     "nanoid": "^3.2.0",
     "next": "^12.0.8",
+    "next-connect": "^0.12.2",
     "next-redux-wrapper": "^7.0.5",
     "next-translate": "^1.2.0",
     "nextjs-basic-auth-middleware": "^0.2.1",
     "nookies": "^2.5.2",
+    "ospoint": "^0.2.1",
     "path": "^0.12.7",
-    "pm2": "^5.1.2",
     "react": "17.0.2",
     "react-accessible-accordion": "^4.0.0",
     "react-autosuggest": "^10.1.0",
@@ -44,6 +50,7 @@
     "react-dom": "17.0.2",
     "react-dropzone": "^11.5.1",
     "react-idle-timer": "^4.6.4",
+    "react-leaflet": "^3.2.5",
     "react-loading-overlay": "^1.0.1",
     "react-redux": "^7.2.6",
     "react-xml-parser": "^1.1.8",

pages/_document.js

@@ -46,7 +46,7 @@ class MyDocument extends Document {
         csp += `base-uri 'self';`;
         csp += `form-action 'self';`;
         csp += `object-src 'self' data:;`;
-        csp += `script-src 'self' unsafe-inline https://www.googletagmanager.com  'nonce-${generatedNonce}' ${
+        csp += `script-src 'self' unsafe-inline https://www.googletagmanager.com  https://maps.googleapis.com 'nonce-${generatedNonce}' ${
             process.env.NODE_ENV != "production" ? " 'unsafe-eval';" : " ;"
         }`;
         //csp += `img-src 'self' https://www.googletagmanager.com https://gov.wales https://www.google-analytics.com 'nonce-${generatedNonce}' data:;`;

pages/api/endpoint/getbasicdnsurlsearch_api.js

@@ -32,7 +32,7 @@ export default async function ApiProxy(req, res) {
         searchString +
         "')) and pinswg_appealcasetype eq 846040011 and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true";
 
-    // console.log("basic search ", queryUrl);
+    console.log("basic search ", queryUrl);
 
     var apiResponse = _.isEmpty(req.query)
         ? res.status(400).json()

pages/api/endpoint/getdnscoords_api.js

@@ -0,0 +1,41 @@
+import axios from "axios";
+import CryptoJS from "crypto-js";
+import { getToken, azureHeadersPaged, azureHeaders } from "../../../actions";
+
+const WORDKEY = process.env.HASHKEY;
+
+const WEBAPI_URL =
+    process.env.RELAY_ROOT ||
+    "https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/";
+
+const hashAPIPath = (queryPath) => {
+    var hashlink = CryptoJS.HmacSHA256(
+        queryPath,
+        CryptoJS.enc.Hex.parse(WORDKEY)
+    );
+    hashlink = hashlink.toString(CryptoJS.enc.Hex);
+
+    //return "&hash=" + hashlink;
+
+    return (queryPath.indexOf("?") > -1 ? "&hash=" : "?hash=") + hashlink;
+};
+
+export default async function ApiProxy(req, res) {
+    var token = await getToken();
+
+    var queryUrl =
+        "pinswg_dnses?$select=pinswg_name,pinswg_anticipatedgridreferenceeastingtext,pinswg_anticipatedgridreferencenorthingtext,pinswg_projectname,pinswg_dnsid,_pinswg_associatedlpa_value,_pinswg_appellant_value&$filter=pinswg_anticipatedgridreferencenorthingtext ne null and pinswg_anticipatedgridreferenceeastingtext ne null&$count=true";
+
+    console.log("dns ", queryUrl);
+    return axios
+        .get(
+            WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
+            azureHeaders(token.access_token)
+        )
+        .then(({ data }) => {
+            res.status(200).json(data);
+        })
+        .catch(({ err }) => {
+            res.status(400).json(err);
+        });
+}

pages/dnsapplications.js

@@ -2,7 +2,7 @@ import useTranslation from "next-translate/useTranslation";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
-import { getBasicDNSSearch } from "../actions";
+import { getBasicDNSSearch, getDNSCoords } from "../actions";
 import Breadcrumbs from "../components/breadcrumbs";
 import CookieBanner from "../components/cookieBanner";
 import DNSSearchResults from "../components/dnssearchresults";
@@ -13,6 +13,7 @@ import { setSearch } from "../store/search/action";
 import {
     setSearchDetails,
     setSearchResults,
+    setDNSCoords,
 } from "../store/searchOutput/action";
 import { wrapper } from "../store/store";
 
@@ -129,9 +130,11 @@ export const getServerSideProps = wrapper.getServerSideProps(
                     : searchResultsObj;
 
             const searchDetailsObj = await getSearchDetails(searchResultsObj);
+            const dnsCoords = await getDNSCoords();
             store.dispatch(setSearchResults(searchResultsObj));
             store.dispatch(setSearchDetails(searchDetailsObj));
             store.dispatch(setSearch("DNS"));
+            store.dispatch(setDNSCoords(dnsCoords));
         }
 );
 

pages/myportal/dnsapplications.js

@@ -0,0 +1,215 @@
+import useTranslation from "next-translate/useTranslation";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { connect } from "react-redux";
+import {
+    getBasicDNSSearch,
+    getDNSCoords,
+    getPortalModuleDetails,
+    getWatchedCases,
+} from "../../actions";
+
+import Breadcrumbs from "../../components/breadcrumbs";
+import CookieBanner from "../../components/cookieBanner";
+import DNSSearchResults from "../../components/dnssearchresults";
+import Footer from "../../components/footer";
+import Header from "../../components/header";
+import {
+    getSearchDetails,
+    getFormCollectionByID,
+} from "../../components/utils";
+import { setSearch } from "../../store/search/action";
+import {
+    setSearchDetails,
+    setSearchResults,
+    setDNSCoords,
+} from "../../store/searchOutput/action";
+import { wrapper } from "../../store/store";
+import {
+    setWatchedCases,
+    setWatchedCasesDetails,
+} from "../../store/watchedCases/action";
+
+const Home = (props) => {
+    const { footerLinks, pages, watchedCases } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+                <>
+                    <link
+                        rel="canonical"
+                        href={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        key="og:locale"
+                        property="og:locale"
+                        content={router.locale}
+                    />
+                    {/* If they have a Twitter Handle, include the meta details below */}
+                    <meta
+                        key="og:site_name"
+                        property="og:site_name"
+                        content={t("common:service-name")}
+                    />
+                    <meta
+                        key="twitter:site"
+                        property="twitter:site"
+                        content="@UKGovWales"
+                    />
+
+                    <meta
+                        name="description"
+                        content={t("common:service-description")}
+                    />
+                    <meta
+                        property="og:site_name"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        property="og:title"
+                        content={t("search:page-title")}
+                    />
+                    <meta
+                        property="og:description"
+                        content={t("common:service-description")}
+                    />
+                    <meta property="og:type" content="website" />
+                    <meta
+                        property="og:url"
+                        content={t("common:gov-wales-link")}
+                    />
+                    <meta
+                        property="og:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                    />
+                    <meta name="twitter:card" content="summary" />
+                    <meta
+                        name="twitter:title"
+                        content={t("common:gov-wales-label")}
+                    />
+                    <meta
+                        name="twitter:url"
+                        content={t("common:gov-wales-link") + router.asPath}
+                    />
+                    <meta
+                        name="twitter:image"
+                        content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                    />
+                </>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container">
+                    <Breadcrumbs slug={appealtypes} />
+                    <DNSSearchResults
+                        searchString="DNS"
+                        searchResultsObj={props.searchResultsObj}
+                        myportal={true}
+                        watchedCases={watchedCases}
+                    />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            console.log("query-", query);
+
+            const { cookies } = req;
+
+            res.setHeader(
+                "Cache-Control",
+                "public, s-maxage=10, stale-while-revalidate=59"
+            );
+
+            let loggedInUser = cookies.pinsUser;
+
+            let [searchResultsObj, watchedCases] = await Promise.all([
+                await getBasicDNSSearch(),
+                await getWatchedCases(loggedInUser),
+            ]);
+
+            searchResultsObj =
+                searchResultsObj.status == 502
+                    ? {
+                          value: [],
+                          errorCode: searchResultsObj.status,
+                          errorMsg: searchResultsObj.statusText,
+                      }
+                    : searchResultsObj;
+
+            const [searchDetailsObj, watchedCasesDetails] = await Promise.all([
+                await getSearchDetails(searchResultsObj),
+                await getDetails(watchedCases, "myWatchedCases"),
+            ]);
+            const dnsCoords = await getDNSCoords();
+            store.dispatch(setSearchResults(searchResultsObj));
+            store.dispatch(setSearchDetails(searchDetailsObj));
+            store.dispatch(setSearch("DNS"));
+            store.dispatch(setDNSCoords(dnsCoords));
+            store.dispatch(setWatchedCases(watchedCases));
+            store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
+        }
+);
+
+const getDetails = (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(
+                    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,
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+    };
+};
+
+export default connect(mapStateToProps)(Home);

pages/myportal/dnsdetails.js

@@ -0,0 +1,91 @@
+import useTranslation from "next-translate/useTranslation";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { connect } from "react-redux";
+import Breadcrumbs from "../../components/breadcrumbs";
+import Case from "../../components/case";
+import CookieBanner from "../../components/cookieBanner";
+import Footer from "../../components/footer";
+import Header from "../../components/header";
+
+const Home = (props) => {
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("case:page-title")}:{" "}
+                    {props.currentView.caseReference.currentReference}{" "}
+                    {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container">
+                    <Breadcrumbs slug={appealtypes} props={props} />
+                    <Case
+                        props={props}
+                        myCases={props.myCases.myCases}
+                        myCasesDetails={props.myCases.myCasesDetails}
+                        searchResultsObj={
+                            props.searchResultsObj.searchResultsObj
+                        }
+                        searchDetailsObj={
+                            props.searchResultsObj.searchDetailsObj
+                        }
+                        documentDetailsObj={
+                            props.searchResultsObj.documentDetailsObj
+                        }
+                        documentHistoryObj={
+                            props.searchResultsObj.documentHistoryObj
+                        }
+                        myRepresentations={
+                            props.myRepresentations.myRepresentations
+                        }
+                        watchedCases={props.watchedCases.watchedCases}
+                        awaitingSubmission={
+                            props.awaitingSubmission.awaitingSubmission
+                        }
+                        caseReference={
+                            props.currentView.caseReference.currentReference
+                        }
+                        currentType={
+                            props.currentView.caseReference.currentType
+                        }
+                        incidentid={props.currentView.caseReference.incidentid}
+                        appealTypeID={
+                            props.currentView.caseReference.appealType
+                        }
+                    />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    //console.log(state);
+
+    return {
+        currentView: state.currentView,
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+    };
+};
+
+export default connect(mapStateToProps)(Home);

pages/myportal/index.js

@@ -37,6 +37,7 @@ import {
     setWatchedCases,
     setWatchedCasesDetails,
 } from "../../store/watchedCases/action";
+import { setCookie } from "nookies";
 
 const Home = (props) => {
     const {

store/searchOutput/action.js

@@ -6,6 +6,7 @@ export const searchResultsActionTypes = {
     SETDOCUMENTDETAILS: "SETDOCUMENTDETAILS",
     SETDOCUMENTHISTORY: "SETDOCUMENTHISTORY",
     SETREPRESENTATIONS: "SETREPRESENTATIONS",
+    SETDNSCOORDS: "SETDNSCOORDS",
 };
 
 export const getSearchResultshObj = () => (dispatch) => {
@@ -47,3 +48,10 @@ export const setRepresentations = (representations) => (dispatch) => {
         representationsObj: representations,
     });
 };
+
+export const setDNSCoords = (dnsCoords) => (dispatch) => {
+    return dispatch({
+        type: searchResultsActionTypes.SETDNSCOORDS,
+        dnsCoordsObj: dnsCoords,
+    });
+};

store/searchOutput/reducer.js

@@ -5,6 +5,7 @@ const searchResultsInitialState = {
     searchDetailsObj: {},
     documentDetailsObj: {},
     representationsObj: {},
+    dnsCoordsObj: {},
 };
 
 export default function reducer(state = searchResultsInitialState, action) {
@@ -30,6 +31,11 @@ export default function reducer(state = searchResultsInitialState, action) {
                 ...state,
                 representationsObj: action.representationsObj,
             };
+        case searchResultsActionTypes.SETDNSCOORDS:
+            return {
+                ...state,
+                dnsCoordsObj: action.dnsCoordsObj,
+            };
         default:
             return state;
     }

styles/sass/patterns/_card.scss

@@ -250,8 +250,14 @@ div.cardModuleItem:last-of-type {
         width: 95%;
     }
 
-    .cardModuleReference a {
+    .cardModuleReference {
-        display: block;
+        display: flex;
+        b {
+            min-width: 122px;
+        }
+        a {
+            margin-left: 10px;
+        }
     }
 
     .cardModuleRemoveCase {

styles/sass/welshgov/_application.scss

@@ -1,3 +1,7 @@
+@import "leaflet/dist/leaflet.css";
+@import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
+// @import "leaflet-defaulticon-compatibility";
+
 html {
     scroll-behavior: smooth;
 }