added display of representatons on my portal

.env.local

@@ -1,9 +1,9 @@
 // dev
-//RELAY_ROOT = https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/
+RELAY_ROOT = https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/
-//RELAYURI = "dev-pedw-ns.servicebus.windows.net"
+RELAYURI = "dev-pedw-ns.servicebus.windows.net"
-//RELAYPATH = "dev-pedw-hc"
+RELAYPATH = "dev-pedw-hc"
-//SASKEY = "Ml0Y/S/nfRcmIrHFRkO4jNm2J3iH52TSxPiak7+E1+Y="
+SASKEY = "Ml0Y/S/nfRcmIrHFRkO4jNm2J3iH52TSxPiak7+E1+Y="
-//SASKEYNAME = "devpedwnspolicy"
+SASKEYNAME = "devpedwnspolicy"
 
 
 PORT= "3000"
@@ -15,11 +15,11 @@ I18N_DOMAIN = "cymru.local"
 //I18N_DOMAIN ="gwaithcynllunio.gwasanaeth.llyw.cymru"
 
 //test
-RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
+//RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
-RELAYURI = "test-pedw-ns.servicebus.windows.net"
+//RELAYURI = "test-pedw-ns.servicebus.windows.net"
-RELAYPATH = "test-pedw-hc"
+//RELAYPATH = "test-pedw-hc"
-SASKEY = "kTLrs9UHwuW9Msc9uNfjf+89qLYT6ly80lK0zdTYJW4="
+//SASKEY = "kTLrs9UHwuW9Msc9uNfjf+89qLYT6ly80lK0zdTYJW4="
-SASKEYNAME = "testpedwhcpolicy"
+//SASKEYNAME = "testpedwhcpolicy"
 
 
 //preprod

actions/index.js

@@ -818,23 +818,32 @@ export const getMyCases = (token, loggedInUserId) => {
 };
 
 export const getMyRepresentations = (token, loggedInUserId) => {
-    return (
+    return axios
-        axios
+        .get(
-            // .get(BASE_URL + "/api/lookups/myRepresentations", {
+            WEBAPI_URL +
-            //     httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+                "pinswg_representationses?$filter= _pinswg_contact_value eq " +
-            // })
+                loggedInUserId +
-            .get(
+                "&$count=true&$orderby=createdon desc",
-                WEBAPI_URL +
+            azureHeaders(token)
-                    "incidents?$select=ticketnumber,casetypecode,createdon,_customerid_value,description,incidentid,pinswg_appealcasetype,_pinswg_assignedinspectrids_value,statecode,statuscode,title&$filter=_customerid_value eq " +
+        )
-                    loggedInUserId +
+        .then((res) => res.data)
-                    " and pinswg_appealcasetype ne null&$orderby=createdon desc&$count=true&$top=3",
+        .catch((error) => {
-                azureHeaders(token)
+            console.log("this serror", error);
-            )
+        });
-            .then((res) => res.data)
+};
-            .catch((error) => {
+
-                console.log("thi serror", error);
+export const getMyRepresentationsProxy = (token, loggedInUserId) => {
-            })
+    return axios
-    );
+        .get(
+            "/api/proxy/pinswg_representationses?$filter= _pinswg_contact_value eq " +
+                loggedInUserId +
+                "&$count=true&$orderby=createdon desc",
+            azureHeaders(token)
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("this serror", error);
+        });
 };
 
 export const getWatchedCases = (token, loggedInUserId) => {

components/case.js

@@ -4,6 +4,7 @@ import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
 import Summary from "./case/summary";
 import Documents from "./case/documents";
+import RepresentationList from "./case/representationList";
 
 const CaseSummary = (props) => {
     let { t } = useTranslation();
@@ -42,6 +43,8 @@ const CaseSummary = (props) => {
                         documentDetailsObj={props.documentDetailsObj}
                         documentHistoryObj={props.documentHistoryObj}
                     />
+
+                    <RepresentationList />
                 </div>
             </div>
         </main>

components/case/representation/index.js

@@ -49,6 +49,7 @@ let MakeRepresentation = (props) => {
         watchedCases,
         awaitingSubmission,
         searchResultsObj,
+        representationSubmit,
         currentType,
         currentView,
         setRepresentationCapacity,
@@ -160,7 +161,7 @@ let MakeRepresentation = (props) => {
                     />
                 );
                 break;
-            case "interestedpartyperson":
+            case "interestedparty/person":
                 // setRepresentationCapacity("interestedpartyperson");
                 return (
                     <RepInterestedPartyPerson
@@ -232,27 +233,31 @@ let MakeRepresentation = (props) => {
 
     return (
         <div>
-            {repForm["representationForm.submitSucceeded"] == true ? (
+            <form onSubmit={handleSubmit(onHandleSubmit)}>
-                <RepCompleteSubmit
+                {representationSubmit == true ? (
-                    formObj={formObj}
+                    <RepCompleteSubmit
-                    capacityOptionsArr={capacityOptionsArr}
+                        formObj={formObj}
-                    currentType={currentType}
+                        capacityOptionsArr={capacityOptionsArr}
-                    casesObj={casesObj}
+                        currentType={currentType}
-                    setRepresentationCapacity={setRepresentationCapacity}
+                        casesObj={casesObj}
-                    setRepresentationSubmit={setRepresentationSubmit}
+                        setRepresentationCapacity={setRepresentationCapacity}
-                    currentView={currentView}
+                        setRepresentationSubmit={setRepresentationSubmit}
-                    setSubmitBack={setSubmitBack}
+                        currentView={currentView}
-                    setRepresentationSubmitConfirmation={
+                        setSubmitBack={setSubmitBack}
-                        setRepresentationSubmitConfirmation
+                        setRepresentationSubmitConfirmation={
-                    }
+                            setRepresentationSubmitConfirmation
-                />
+                        }
-            ) : (
+                    />
-                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                ) : (
-                    {whichControl()}
+                    <>
-                </form>
+                        <h1 className="govuk-heading-l">
-            )}
+                            Make a representation on:{" "}
-
+                            {currentView.caseReference.currentReference}
-            {console.log("is submitted", currentView.representationSubmit)}
+                        </h1>
+                        {whichControl()}
+                    </>
+                )}
+            </form>
         </div>
     );
 };
@@ -271,8 +276,8 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = (dispatch) => {
     return {
         setRepresentationCapacity: (representationCapacity) => {
-            dispatch(setRepresentationCapacity(representationCapacity));
             dispatch(reset("representationForm"));
+            dispatch(setRepresentationCapacity(representationCapacity));
         },
         setRepresentationSubmit: (representationSubmit) => {
             dispatch(setRepresentationSubmit(representationSubmit));

components/case/representation/representationAgent.js

@@ -219,7 +219,7 @@ const RepAgent = (props) => {
 
                         <a
                             onClick={() => {
-                                setRepresentationCapacity("false");
+                                setRepresentationCapacity();
                             }}
                             className="govuk-link"
                         >

components/case/representation/representationAppellant.js

@@ -38,10 +38,6 @@ const RepAppellant = (props) => {
         <div id="rep-appellant">
             <div className="govuk-grid-column-full">
                 <div className="govuk-grid-row">
-                    <h2 className="govuk-heading-m ">
-                        Representation - appellantApplicant
-                    </h2>
-
                     <div className="govuk-form-group">
                         <label
                             className="govuk-label govuk-body-m"
@@ -204,7 +200,6 @@ const RepAppellant = (props) => {
                 </div>
                 <div className="govuk-grid-row">
                     <div className="govuk-button-group">
-                        {currentView.representationCapacity}
                         <button
                             type="submit"
                             className="govuk-button"
@@ -222,7 +217,7 @@ const RepAppellant = (props) => {
                             </a> */}
                         <a
                             onClick={() => {
-                                setRepresentationCapacity(false);
+                                setRepresentationCapacity();
                             }}
                             className="govuk-link"
                         >

components/case/representation/representationDetails.js

@@ -17,21 +17,7 @@ const RepDetails = (props) => {
             {" "}
             <div className="govuk-grid-column-full">
                 <div id="rep-sumamry" className="govuk-grid-row">
-                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
-                        Make a representation
-                    </h1>
-
                     <dl className="govuk-summary-list govuk-!-margin-bottom-9">
-                        <div className="govuk-summary-list__row">
-                            <dt className="govuk-summary-list__key">
-                                Appeal Reference
-                            </dt>
-                            <dd className="govuk-summary-list__value">
-                                {currentType == "searchResultsObj"
-                                    ? casesObj.title
-                                    : casesObj.reference}
-                            </dd>
-                        </div>
                         <div className="govuk-summary-list__row">
                             <dt className="govuk-summary-list__key">
                                 {t("case:summary-applicant-label")}
@@ -40,14 +26,14 @@ const RepDetails = (props) => {
                                 {casesObj.appellantApplicant || ""}
                             </dd>
                         </div>
-                        <div className="govuk-summary-list__row">
+                        {/* <div className="govuk-summary-list__row">
                             <dt className="govuk-summary-list__key">
                                 {t("case:summary-agent-label")}
                             </dt>
                             <dd className="govuk-summary-list__value">
                                 Mr A Agent
                             </dd>
-                        </div>
+                        </div> */}
                         <div className="govuk-summary-list__row">
                             <dt className="govuk-summary-list__key">
                                 {t("case:summary-site-address-label")}
@@ -66,14 +52,13 @@ const RepDetails = (props) => {
                 <div className="govuk-grid-row">
                     <p className="govuk-body">
                         This form enables you to submit comments on a case to
-                        The Planning Inspectorate.{" "}
+                        Planning and Environment Decisions Wales.{" "}
                     </p>
                     <p className="govuk-body">
                         Please note that comments from interested parties need
                         to be made within the timetable. This can be found on
                         the previous &lsquo;Case Summary&lsquo; page. Comments
-                        submitted after this date may be considered invalid and
+                        submitted after this date may be considered invalid.
-                        returned to the sender.
                     </p>
                 </div>
             </div>

components/case/representation/representationInterestedPartyPerson.js

@@ -297,7 +297,7 @@ const RepInterestedPartyPerson = (props) => {
                             <Link href="/representation">
                                 <a
                                     onClick={() => {
-                                        setRepresentationSubmit(false);
+                                        setRepresentationSubmit(true);
                                     }}
                                     className="govuk-button"
                                 >
@@ -306,7 +306,7 @@ const RepInterestedPartyPerson = (props) => {
                             </Link>
                             <a
                                 onClick={() => {
-                                    setRepresentationCapacity(false);
+                                    setRepresentationCapacity();
                                 }}
                                 className="govuk-link"
                             >

components/case/representation/representationLandowner.js

@@ -205,7 +205,7 @@ const RepLandOwner = (props) => {
                         <Link href="/representation">
                             <a
                                 onClick={() => {
-                                    setRepresentationSubmit(false);
+                                    setRepresentationSubmit(true);
                                 }}
                                 className="govuk-button"
                             >
@@ -214,7 +214,7 @@ const RepLandOwner = (props) => {
                         </Link>
                         <a
                             onClick={() => {
-                                setRepresentationCapacity(false);
+                                setRepresentationCapacity();
                             }}
                             className="govuk-link"
                         >

components/case/representationList.js

@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState, useEffect, useRef } from "react";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import useTranslation from "next-translate/useTranslation";
+import jsonpath from "jsonpath";
+import _ from "lodash";
+import transLookup from "../../data/lookuptranslations.json";
+import LoadingOverlay from "react-loading-overlay";
+
+const RepresentationList = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    let spinnerState = () => {
+        showSpinnerState == true
+            ? setShowSpinnerState(false)
+            : setShowSpinnerState(true);
+    };
+    return (
+        <>
+            <div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <h2>Representations</h2>
+                    </div>
+                </div>
+            </div>
+            <LoadingOverlay
+                active={showSpinnerState}
+                spinner
+                text={t("common:spinner-searching")}
+            />
+        </>
+    );
+};
+
+export default RepresentationList;

components/case/summary.js

@@ -199,14 +199,14 @@ const CaseSummary = (props) => {
                         </dl>
                     </div>
                 </div>
-                {/* <div className="govuk-grid-row">
+                <div className="govuk-grid-row">
                     <div className="govuk-grid-column-full">
                         <div className="govuk-button-group">
                             {noRepresentationLink.includes(router.pathname) ==
                             true ? (
                                 ""
                             ) : (
-                                <Link href="/representation">
+                                <Link href="/myportal/representation">
                                     <a className="govuk-button">
                                         {t(
                                             "case:summary-make-representation-label"
@@ -226,7 +226,7 @@ const CaseSummary = (props) => {
                             </a>
                         </div>
                     </div>
-                </div> */}
+                </div>
 
                 {showSummary(casesObj, detailsObj)}
             </div>

components/myportal/topthree.js

@@ -114,16 +114,27 @@ const TopThree = (props) => {
                                     setCurrentReference({
                                         "currentReference":
                                             topThreeType != "watchedCases"
-                                                ? showTopThreeArr[key]
+                                                ? topThreeType !=
-                                                      .ticketnumber
+                                                  "myRepresentations"
+                                                    ? showTopThreeArr[key]
+                                                          .ticketnumber
+                                                    : showTopThreeArr[key][
+                                                          "_pinswg_case_value@OData.Community.Display.V1.FormattedValue"
+                                                      ]
                                                 : showTopThreeArr[key][
                                                       "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                                   ],
                                         "currentType": topThreeType,
+
                                         "incidentid":
                                             topThreeType != "watchedCases"
-                                                ? showTopThreeArr[key]
+                                                ? topThreeType !=
-                                                      .incidentid
+                                                  "myRepresentations"
+                                                    ? showTopThreeArr[key]
+                                                          ._pinswg_case_value
+                                                    : showTopThreeArr[key][
+                                                          " _pinswg_watchedcase_value"
+                                                      ]
                                                 : showTopThreeArr[key][
                                                       " _pinswg_watchedcase_value"
                                                   ],
@@ -135,7 +146,11 @@ const TopThree = (props) => {
                                 }}
                             >
                                 {topThreeType != "watchedCases"
-                                    ? showTopThreeArr[key].ticketnumber
+                                    ? topThreeType != "myRepresentations"
+                                        ? showTopThreeArr[key].ticketnumber
+                                        : showTopThreeArr[key][
+                                              "_pinswg_case_value@OData.Community.Display.V1.FormattedValue"
+                                          ]
                                     : showTopThreeArr[key][
                                           "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                       ]}

i18n.js

@@ -21,7 +21,7 @@ module.exports = {
         "/searchresults": ["search"],
         "/viewall": ["search"],
         "/case": ["case"],
-        "/representation": ["case"],
+        "/myportal/representation": ["case"],
         "/newappeal": ["newappeal"],
         "/newappeal/*": ["newappeal"],
         "/newappeal/selectappeal": ["newappeal"],

pages/myportal/representation.js

@@ -1,19 +1,19 @@
 import _ from "lodash";
 import Head from "next/head";
-import Header from "../components/header";
+import Header from "../../components/header";
-import Banner from "../components/banner";
+import Banner from "../../components/banner";
-import CookieBanner from "../components/cookieBanner";
+import CookieBanner from "../../components/cookieBanner";
-import Breadcrumbs from "../components/breadcrumbs";
+import Breadcrumbs from "../../components/breadcrumbs";
-import CaseSummary from "../components/case";
+import CaseSummary from "../../components/case";
-import Footer from "../components/footer";
+import Footer from "../../components/footer";
-import Errorpage from "../components/errorpage";
+import Errorpage from "../../components/errorpage";
-import styles from "../styles/Home.module.css";
+import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
-import { wrapper } from "../store/store";
+import { wrapper } from "../../store/store";
 
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import Case from "../components/representation";
+import Case from "../../components/representation";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;