updated cookie login and watched cases

actions/index.js

@@ -657,7 +657,7 @@ export const getLPA = (token) => {
 };
 
 export const getPersonalAccount = (token, contactid) => {
-    console.log("getting personal details:", contactid);
+    //console.log("getting personal details:", contactid);
     return axios
         .get(
             WEBAPI_URL +
@@ -682,7 +682,6 @@ export const getPersonalAccount = (token, contactid) => {
 };
 
 export const getAppealID = (
-    token,
     caseReference,
     updateFormCollection,
     primaryAttribute
@@ -696,9 +695,9 @@ export const getAppealID = (
         caseReference +
         "'";
 
-    console.log("proxy url", weburl);
+    console.log("proxy url ", weburl);
     return axios
-        .get(weburl, azureHeaders(token))
+        .get(weburl, azureHeaders(getSASToken()))
         .then((res) => {
             var appealID = res.data.value[0][primaryAttribute];
             return appealID;
@@ -723,13 +722,14 @@ export const getLogin = (emailAddress, pwd) => {
         });
 };
 
-export const createCase = (token, appealTypeId, contactid) => {
+export const createCase = (token, appealTypeId, lpaID, contactid) => {
     appealTypeId = parseInt(appealTypeId);
     var data = JSON.stringify({
         "title": "insertion test case",
         "caseorigincode": 3,
         "customerid_contact@odata.bind": "/contacts(" + contactid + ")",
         "pinswg_appealcasetype": appealTypeId,
+        "pinswg_AssociatedLPA@odata.bind": "/accounts(" + lpaID + ")",
     });
 
     var config = {
@@ -757,7 +757,6 @@ export const createCase = (token, appealTypeId, contactid) => {
 };
 
 export const updateCase = async (
-    token,
     incidentId,
     updateBody,
     updateFormCollection,
@@ -784,15 +783,15 @@ export const updateCase = async (
             "Accept": "application/json",
             "Prefer": 'odata.include-annotations="*",return=representation',
             "Content-Type": "application/json",
-            "ServiceBusAuthorization": token,
+            "ServiceBusAuthorization": getSASToken(),
         },
         data: data,
     };
 
-    console.log(config);
+    //console.log(config);
     return axios(config)
         .then((res) => {
-            console.log("patched ", res.data);
+            //console.log("patched ", res.data);
             return res.data;
         })
         .catch((error) => {
@@ -801,7 +800,7 @@ export const updateCase = async (
 };
 
 export const getMyCases = (token, loggedInUserId) => {
-    console.log("in action ", loggedInUserId);
+    //console.log("in action ", loggedInUserId);
     return axios
         .get(
             WEBAPI_URL +
@@ -839,24 +838,18 @@ export const getMyRepresentations = (token, loggedInUserId) => {
 };
 
 export const getWatchedCases = (token, loggedInUserId) => {
-    return (
+    return axios
-        axios
+        .get(
-
+            WEBAPI_URL +
-            // .get(BASE_URL + "/api/lookups/watchedCases", {
+                "contacts(" +
-            //     httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+                loggedInUserId +
-            // })
+                ")/pinswg_contact_incident?$count=true&$top=3&$orderby=createdon desc",
-            .get(
+            azureHeaders(token)
-                WEBAPI_URL +
+        )
-                    "incidents?$select=ticketnumber,casetypecode,createdon,_customerid_value,description,incidentid,pinswg_appealcasetype,_pinswg_assignedinspectrids_value,statecode,statuscode,title&$filter=_customerid_value eq " +
+        .then((res) => res.data)
-                    loggedInUserId +
+        .catch((error) => {
-                    " and pinswg_appealcasetype ne null&$orderby=createdon desc&$count=true&$top=3",
+            console.log("this serror", error);
-                azureHeaders(token)
+        });
-            )
-            .then((res) => res.data)
-            .catch((error) => {
-                console.log("this serror", error);
-            })
-    );
 };
 
 export const getAwaitingSubmission = (token) => {
@@ -870,7 +863,7 @@ export const getAwaitingSubmission = (token) => {
         });
 };
 
-export const getPortalModuelDetails = (token, appealType, caseReference) => {
+export const getPortalModuleDetails = (token, appealType, caseReference) => {
     return axios
         .get(
             WEBAPI_URL +

components/breadcrumbs.js

@@ -368,9 +368,7 @@ const Breadcrumbs = (props) => {
                                         href={
                                             router.locale == "cy"
                                                 ? router.locale + "/myportal"
-                                                : "/myportal?q=" +
+                                                : "/myportal"
-                                                  props.props.accountDetails
-                                                      .loggedinUserId
                                         }
                                     >
                                         <a className="govuk-breadcrumbs__link">
@@ -401,9 +399,7 @@ const Breadcrumbs = (props) => {
                                         href={
                                             router.locale == "cy"
                                                 ? router.locale + "/myportal"
-                                                : "/myportal?q=" +
+                                                : "/myportal"
-                                                  props.props.accountDetails
-                                                      .loggedinUserId
                                         }
                                     >
                                         <a className="govuk-breadcrumbs__link">

components/header.js

@@ -6,6 +6,7 @@ import Banner from "../components/banner";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import { setLogout } from "../store/accountDetails/action";
 import _ from "lodash";
+import { parseCookies, setCookie, destroyCookie } from "nookies";
 const Header = (props) => {
     let { t, lang } = useTranslation();
 
@@ -211,7 +212,8 @@ const Header = (props) => {
                             >
                                 <a
                                     onClick={() => {
-                                        window.localStorage.clear();
+                                        destroyCookie(null, "pinsUser"),
+                                            window.localStorage.clear();
                                     }}
                                     className="govuk-header__link govuk-!-margin-right-3"
                                 >

components/homepage/login.js

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { connect } from "react-redux";
@@ -7,6 +7,7 @@ import { Field, reduxForm } from "redux-form";
 import LoadingOverlay from "react-loading-overlay";
 import { getLogin } from "../../actions";
 import { setLoggedInUserId } from "../../store/accountDetails/action";
+import { parseCookies, setCookie, destroyCookie } from "nookies";
 
 const required = (errorMsg) => (value) =>
     value || typeof value === "number" ? undefined : errorMsg;
@@ -128,17 +129,30 @@ let Login = (props) => {
             data.value.length != 0
                 ? (setValidLoginID(true),
                   setLoggedInUserId(data.value[0].contactid),
+                  setCookie(null, "pinsUser", data.value[0].contactid, {
+                      path: "/",
+                  }),
                   spinnerState(),
                   router.replace({
                       pathname:
                           router.locale == "cy" ? "/fymhorth" : "/myportal",
-                      query: { q: data.value[0].contactid },
                       shallow: true,
                   }))
                 : (setShowSpinnerState(false), setValidLoginID(false));
         });
     };
 
+    const cookies = parseCookies();
+
+    useEffect(() => {
+        cookies.pinsUser != null || typeof cookies.pinsUser != "undefined"
+            ? (spinnerState(),
+              router.replace("/myportal", null, {
+                  shallow: true,
+              }))
+            : "";
+    }, []);
+
     return (
         <div className="card" id="login-card">
             <form onSubmit={handleSubmit(onHandleSubmit)}>

components/myportal/topthree.js

@@ -98,6 +98,11 @@ const TopThree = (props) => {
                                         "currentReference":
                                             showTopThreeArr[key].ticketnumber,
                                         "currentType": topThreeType,
+                                        "incidentid":
+                                            showTopThreeArr[key].incidentid,
+                                        "appealType":
+                                            showTopThreeArr[key]
+                                                .pinswg_appealcasetype,
                                     });
                                 }}
                             >

components/myportal/viewall.js

@@ -28,6 +28,9 @@ const ViewAllResults = (props) => {
                                     "currentReference":
                                         resultsArr[index].reference,
                                     "currentType": currentView.viewKey,
+                                    "incidentid": resultsArr[index].incidentid,
+                                    "appealType":
+                                        resultsArr[index].pinswg_appealcasetype,
                                 });
                             }}
                         >

components/myportal/youraccount.js

@@ -11,15 +11,17 @@ export default function YourAccount() {
         <>
             <div className="card" id="casescomment-card">
                 <div className="card-body">
-                    <h3 className="heading-small card-heading">Your details</h3>
+                    <h3 className="heading-small card-heading">
+                        {t("myportal:yourdetails-card-title")}
+                    </h3>
                     <p className="govuk-body-s">
-                        You can change your address and contact details
+                        {t("myportal:yourdetails-card-paragraph-one")}
                     </p>
 
                     <div>
                         <Link href="/account/personaldetails">
                             <a className="govuk-button-secondary">
-                                View your account details
+                                {t("myportal:yourdetails-card-link")}
                             </a>
                         </Link>
                     </div>
@@ -28,14 +30,17 @@ export default function YourAccount() {
             <div className="card" id="casescomment-card">
                 <div className="card-body">
                     <h3 className="heading-small card-heading">
-                        Change your password
+                        {t("myportal:changepassword-card-title")}
                     </h3>
-                    <p className="govuk-body-s">You can change your password</p>
+                    <p className="govuk-body-s">
+                        {" "}
+                        {t("myportal:changepassword-card-paragraph-one")}
+                    </p>
 
                     <div>
                         <Link href="/account/changepassword">
                             <a className="govuk-button-secondary">
-                                Update your password
+                                {t("myportal:changepassword-card-link")}
                             </a>
                         </Link>
                     </div>

components/newappeal/complete.js

@@ -9,6 +9,7 @@ import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import { setCurrentSection } from "../../store/appealType/action";
 import { updateCase } from "../../actions";
 import jsonpath from "jsonpath";
+import { getFormCollectionByID } from "../utils";
 
 import data from "../../data/collections.json";
 
@@ -18,12 +19,11 @@ let CompleteAppeal = (props) => {
         let incidentId = props.appealType.caseReference.incidentid;
         let updateBody = props.props.form.appealForm.values;
 
+        let appTypeCollection = getFormCollectionByID(
+            props.appealType.appealTypeID
+        );
         let updateBindAppealTypeToIncident =
-            "pinswg_" +
+            appTypeCollection.LogicalName + "Ids";
-            props.appealType.caseReference[
-                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-            ].replace(/(\band|[\s\-\+\(\)\,\&])/g, "") +
-            "Ids";
 
         Object.assign(updateBody, {
             "pinswg_Appellant@odata.bind":
@@ -40,23 +40,9 @@ let CompleteAppeal = (props) => {
         updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
         updateBody = updateBody.replace(/:"No"/gm, `:false`);
         updateBody = JSON.parse(updateBody);
-        let updateFormCollection = getFormCollection(
-            "pinswg_" +
-                props.appealType.caseReference[
-                    "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                ]
-                    .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                    .toLowerCase()
-        );
 
-        let primaryAttribute = getPrimaryAttr(
+        let updateFormCollection = appTypeCollection.LogicalCollectionName;
-            "pinswg_" +
+        let primaryAttribute = appTypeCollection.PrimaryIdAttribute;
-                props.appealType.caseReference[
-                    "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                ]
-                    .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                    .toLowerCase()
-        );
 
         updateCase(
             incidentId,
@@ -75,7 +61,7 @@ let CompleteAppeal = (props) => {
     const getFormCollection = (formtype) => {
         const collectionName = jsonpath.query(
             data,
-            "$..[?(@.LogicalName=='" + formtype + "')].LogicalCollectionName"
+            "$..[?(@.LogicalName=='" + formtype + "')]"
         );
         //console.log(collectionName[0]);
         return collectionName[0];

components/newappeal/createCase.js

@@ -8,6 +8,7 @@ import { reduxForm, formValueSelector, Field } from "redux-form";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import jsonpath from "jsonpath";
 import transLookup from "../../data/lookuptranslations.json";
+import { getFormCollectionByID } from "../utils";
 
 import data from "../../data/collections.json";
 import {
@@ -181,14 +182,7 @@ let CreateCase = (props) => {
                                                         )
                                                       ? ""
                                                       : optionsObj[key]
-                                                            .attributevalue +
+                                                            .attributevalue
-                                                        "," +
-                                                        optionsObj[key].value
-                                                            .replace(
-                                                                /(\band|[\s\-\+\(\)\,\&])/g,
-                                                                ""
-                                                            )
-                                                            .toLowerCase()
                                               }
                                           >
                                               {_.isEmpty(optionsObj[key])
@@ -220,34 +214,17 @@ let CreateCase = (props) => {
 
     const required = (value) => (value ? undefined : "Required");
 
-    const getFormCollection = (formtype) => {
-        formtype =
-            "pinswg_" +
-            (formtype.length > 39 ? formtype.slice(0, 39) : formtype);
-
-        const collectionName = jsonpath.query(
-            data,
-            "$..[?(@.LogicalName=='" + formtype + "')].UrlName"
-        );
-        //console.log(collectionName[0]);
-        return collectionName[0];
-    };
-
     const onHandleSubmit = (values) => {
         event.preventDefault();
 
-        var appTypeCollection = values.appealTypes.split(",")[1];
+        var appTypeCollection = values.appealTypes;
 
-        appTypeCollection = getFormCollection(
+        appTypeCollection = getFormCollectionByID(appTypeCollection);
-            appTypeCollection.length > 39
-                ? appTypeCollection.slice(0, 39)
-                : appTypeCollection
-        );
 
         router.replace(
             (router.locale = "cy" ? "/apelnewydd" : "/newappeal") +
                 "/" +
-                appTypeCollection +
+                appTypeCollection.UrlName +
                 "?lpa=" +
                 values.lpaTypes +
                 "&apt=" +

components/search/searchresults.js

@@ -37,6 +37,7 @@ const SearchResults = (props) => {
         setSearchResults,
         setSearchDetails,
         advancedSearch,
+        myportal,
     } = props;
     let { t } = useTranslation();
 
@@ -76,6 +77,9 @@ const SearchResults = (props) => {
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
                             {t("search:searchresults-status-label")}
                         </dd>
+                        {myportal == "true" && (
+                            <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
+                        )}
                     </div>
 
                     {resultsArr.map((item, key) => {
@@ -84,6 +88,7 @@ const SearchResults = (props) => {
                             "$..value[?(@.pinswg_name=='" + item.title + "')]"
                         );
                         detailsObj = detailsObj[0];
+                        console.log(props.myportal);
 
                         return (
                             <div className="govuk-summary-list__row" key={key}>
@@ -91,7 +96,11 @@ const SearchResults = (props) => {
                                     <Link
                                         href={
                                             router.locale == "cy"
-                                                ? "/achos"
+                                                ? myportal == "true"
+                                                    ? "/fymhorth/achos"
+                                                    : "/achos"
+                                                : myportal == "true"
+                                                ? "/myportal/case"
                                                 : "/case"
                                         }
                                     >
@@ -263,6 +272,19 @@ const SearchResults = (props) => {
                                               "statuscode@OData.Community.Display.V1.FormattedValue"
                                           ] || "N/A"}
                                 </dd>
+                                {myportal == "true" && (
+                                    <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
+                                        <Link href="">
+                                            <a
+                                                className="govuk-summary-list__actionLink"
+                                                onClick={() => {}}
+                                                title="Watch this case"
+                                            >
+                                                +
+                                            </a>
+                                        </Link>
+                                    </dd>
+                                )}
                             </div>
                         );
                     })}

components/searchresults.js

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

data/collections.json

@@ -202,7 +202,7 @@
         },
         {
             "LogicalCollectionName": "pinswg_householderappealhases",
-            "LogicalName": "pinswg_householderappealhas",
+            "LogicalName": "pinswg_HouseholderAppealHAS",
             "PrimaryIdAttribute": "pinswg_householderappealhasid",
             "UrlName": "householderappealhas",
             "MetadataId": "a6c728b0-9081-eb11-aac0-00224800be9c",

locales/cy/myportal.json

@@ -19,5 +19,11 @@
     "watchedcases-card-title": "Achosion a gwylio",
     "case-reference": "Cyfeirnod achos",
     "case-address": "Cyfeiriad",
-    "case-address-not-entered": "heb ei nodi"
+    "case-address-not-entered": "heb ei nodi",
+    "yourdetails-card-title": "Eich manylion",
+    "yourdetails-card-paragraph-one": "Gallwch newid eich cyfeiriad a'ch manylion cyswllt",
+    "yourdetails-card-link": "Gweld manylion eich cyfrif",
+    "changepassword-card-title": "Newid eich cyfrinair",
+    "changepassword-card-paragraph-one": "Gallwch chi newid eich cyfrinair",
+    "changepassword-card-link": "Diweddarwch eich cyfrinair"
 }

locales/en/myportal.json

@@ -12,12 +12,18 @@
     "searchcases-card-search-example-label": "Example",
     "searchcases-card-button": "Submit Search",
     "searchcases-card-advanced-link": "Advanced Search",
-    "searchcases-search-validation-required": "Angenrheidiol",
+    "searchcases-validation-required": "Required",
-    "searchcases-search-validation-minlength": "Rhaid bod yn 4 nod neu fwy",
+    "searchcases-validation-minlength": "Must be 4 characters or more",
     "awatitingsubmission-card-title": "Awaiting submission",
     "myrepresentations-card-title": "My representations",
     "watchedcases-card-title": "Watched cases",
     "case-reference": "Case reference",
     "case-address": "Address",
-    "case-address-not-entered": "not entered"
+    "case-address-not-entered": "not entered",
+    "yourdetails-card-title": "Your details",
+    "yourdetails-card-paragraph-one": "You can change your address and contact details",
+    "yourdetails-card-link": "View your account details",
+    "changepassword-card-title": "Change your password",
+    "changepassword-card-paragraph-one": "You can change your password",
+    "changepassword-card-link": "Update your password"
 }

pages/index.js

@@ -1,4 +1,5 @@
 import _ from "lodash";
+import { useState, useEffect, useRef } from "react";
 import Head from "next/head";
 import Header from "../components/header";
 import ServiceBanner from "../components/servicebanner";
@@ -13,6 +14,7 @@ import { wrapper } from "../store/store";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { getIncidents } from "../actions";
+import { parseCookies } from "nookies";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -20,6 +22,7 @@ const Home = (props) => {
 
     const router = useRouter();
     const { locale } = router;
+
     return (
         <div>
             <Head>

pages/myportal/case.js

@@ -27,7 +27,9 @@ const Home = (props) => {
         <div>
             <Head>
                 <title>
-                    {t("case:page-title")} - {t("common:service-name")}
+                    {t("case:page-title")}:{" "}
+                    {props.currentView.caseReference.currentReference}{" "}
+                    {t("common:service-name")}{" "}
                 </title>
             </Head>
             <div id="page_wrapper">
@@ -36,13 +38,21 @@ const Home = (props) => {
                 <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
                         }
@@ -56,6 +66,10 @@ const Home = (props) => {
                         currentType={
                             props.currentView.caseReference.currentType
                         }
+                        appealTypeID={
+                            props.currentView.caseReference.appealType
+                        }
+                        incidentid={props.currentView.caseReference.incidentid}
                     />
                 </div>
                 <Footer footerLinks={footerLinks} />

pages/myportal/index.js

@@ -41,7 +41,7 @@ import {
     getMyRepresentations,
     getWatchedCases,
     getAwaitingSubmission,
-    getPortalModuelDetails,
+    getPortalModuleDetails,
 } from "../../actions";
 
 const Home = (props) => {
@@ -155,8 +155,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
         const token = await getSASToken();
 
         console.log("does it have ", cookies.pinsUser);
-        let loggedInUser =
+        let loggedInUser = cookies.pinsUser;
-            typeof query.q == undefined ? cookies.pinsUser : query.q;
 
         console.log("qweqe ", loggedInUser);
 
@@ -188,13 +187,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
             nookies.get("pinsUser")
         );
 
-        nookies.set(ctx, "pinsUser", loggedInUser, {
+        console.log(watchedCases);
-            expires: expDate,
-            httpOnly: false,
-            path: "/",
-        });
-
-        console.log(" from cookie ", cookies);
 
         const [
             myCasesDetails,
@@ -232,14 +225,14 @@ const getDetails = (token, resultsObj) => {
             console.log(searchDetail.ticketnumber);
         } else {
             detailsArr.push(
-                getPortalModuelDetails(
+                getPortalModuleDetails(
                     token,
-                    getFormCollectionByID(searchDetail.pinswg_appealcasetype),
+                    getFormCollectionByID(searchDetail.pinswg_appealcasetype)
+                        .LogicalCollectionName,
                     searchDetail.ticketnumber
                 )
             );
         }
-        ß;
     });
     //console.log(detailsArr);
     return Promise.all(detailsArr);

pages/newappeal/[appealtypes].js

@@ -97,24 +97,27 @@ let Home = (props) => {
 
     let optionsStr = props.appealType.appealTypeOptions.value;
 
-    let selectedObj = jsonpath.query(optionsStr, "$..value");
+    // let selectedObj = jsonpath.query(optionsStr, "$..value");
+
+    let selectedObj = jsonpath.query(
+        optionsStr,
+        "$..[?(@.attributevalue=='" + router.query.apt + "')]"
+    );
 
     //let optionsTitleObj = [];
 
-    const optionsTitleObj = selectedObj.reduce(
+    // const optionsTitleObj = selectedObj.reduce(
-        (obj, arrValue) => (
+    //     (obj, arrValue) => (
-            (obj[arrValue] = arrValue
+    //         (obj[arrValue] = arrValue
-                .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
+    //             .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                .toLowerCase()
+    //             .toLowerCase()
-                .slice(0, 39)),
+    //             .slice(0, 39)),
-            obj
+    //         obj
-        ),
+    //     ),
-        {}
+    //     {}
-    );
+    // );
 
-    const formTitle = Object.keys(optionsTitleObj).find(
+    const formTitle = selectedObj[0].value;
-        (key) => optionsTitleObj[key] === appealtypes
-    );
 
     const getFormType = (appealType) => {
         switch (appealType) {
@@ -290,6 +293,7 @@ let Home = (props) => {
                                 formTitle={formTitle}
                                 appealType={props.appealType}
                                 props={props}
+                                key={1}
                                 mandatoryFieldsData={
                                     props.formData.mandatoryFieldsData
                                 }
@@ -335,7 +339,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
             pickListData,
             formdata,
         ] = await Promise.all([
-            await createCase(token, query.apt, loggedInUser),
+            await createCase(token, query.apt, query.lpa, loggedInUser),
             await getAppealsTypes(token),
             await getMandatoryFields(token, query.appealtypes),
             await getPickLists(token, query.appealtypes),

styles/sass/patterns/_card.scss

@@ -225,6 +225,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
     display: inline-flex;
     flex-direction: column;
     min-height: 30vh;
+    width: -webkit-fill-available;
 
     .cardVieAll {
         margin-top: auto;

styles/sass/welshgov/_application.scss

@@ -712,6 +712,13 @@ textarea,
 .results .govuk-summary-list__key {
     &:last-of-type {
         width: 30%;
+        &.govuk-summary-list__action {
+            width: 10%;
+
+            @media screen and (max-width: 768px) {
+                width: 100%;
+            }
+        }
     }
 }
 
@@ -1538,3 +1545,43 @@ ul#sharePageLinks.active {
         display: none;
     }
 }
+
+.govuk-summary-list__actionLink {
+    border: 1px solid $red;
+    padding: 5px;
+    height: 20px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    border-radius: 5px;
+    width: auto;
+    color: white !important;
+    font-weight: bold;
+    background-color: $red;
+    font-size: 15px;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:active {
+        top: 2px;
+    }
+
+    &:hover {
+        background-color: $lightred;
+        color: $white;
+    }
+
+    &:focus {
+        border-color: #ffdd00;
+        outline: 3px solid transparent;
+        -webkit-box-shadow: inset 0 0 0 1px #ffdd00;
+        box-shadow: inset 0 0 0 1px #ffdd00;
+    }
+
+    &:focus:not(:active):not(:hover) {
+        border-color: #ffdd00;
+        color: #0b0c0c;
+        background-color: #ffdd00;
+        -webkit-box-shadow: 0 2px 0 #0b0c0c;
+        box-shadow: 0 2px 0 #0b0c0c;
+    }
+}