Merged PR 503: added create contact flow for registration

added create contact flow for registration

Related work items: #5875

.env.local

@@ -1,8 +1,8 @@
-//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"
@@ -14,8 +14,8 @@ I18N_DOMAIN = "cymru.local"
 //I18N_DOMAIN ="gwaithcynllunio.gwasanaeth.llyw.cymru"
 
 
-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"

actions/index.js

@@ -299,6 +299,7 @@ export const getSearchDocumentHistory1 = (documentID) => {
             console.log("thiserror", error);
         });
 };
+
 export const getBasicDNSSearchDetails = (token, appealType, caseReference) => {
     return axios
         .get(
@@ -400,49 +401,6 @@ export const getAppealsTypes = (token) => {
         });
 };
 
-//get list of entitydefinitions
-//https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/EntityDefinitions?$select=LogicalName
-
-// get list of appealtypes
-//https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/stringmaps?$filter=attributename%20eq%20%27pinswg_appealcasetype%27&$count=true
-
-//get crm xml form for appealtype
-//https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/systemforms?$select=formid,name,formxml&$filter=(objecttypecode%20eq%20%27pinswg_dns%27and%20type%20eq%202)&$count=true
-// then use regex to remove the escape
-// convert xml to json and return
-// promise example
-// var xml2js = require('xml2js');
-// var xml = '<foo></foo>';
-
-// // With parser
-// var parser = new xml2js.Parser(/* options */);
-// parser.parseStringPromise(data).then(function (result) {
-//   console.dir(result);
-//   console.log('Done');
-// })
-// .catch(function (err) {
-//   // Failed
-// });
-
-// export const getAppealTypeDetail = (caseReference, appealcasetype) => {
-//     console.log("got to axios", searchString);
-//     console.log("api_root: ", BASE_URL);
-//     // example appealcasetype type pinswg_householderappealhases
-//     return axios
-//         .get(
-//             "https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/" +
-//                 appealcasetype +
-//                 "?$filter=pinswg_name eq '" +
-//                 caseReference +
-//                 "'",
-//             { httpsAgent: new https.Agent({ rejectUnauthorized: false }) }
-//         )
-//         .then((res) => res.data)
-//         .catch((error) => {
-//             console.log("thi serror", error);
-//         });
-// };
-
 export const getLPA = (token) => {
     //  console.log("api_root: ", BASE_URL);
     return axios
@@ -508,13 +466,27 @@ export const getAppealID = (
         });
 };
 
-export const createCase = (token, appealTypeId) => {
+export const getLogin = (emailAddress, pwd) => {
+    return axios
+        .get(
+            "/api/proxy/contacts?$filter=emailaddress1 eq '" +
+                emailAddress +
+                "' and pinswg_custom_password eq '" +
+                pwd +
+                "'&$count=true&$select=emailaddress1,%20contactid,pinswg_custom_password, yomifullname, firstname, lastname"
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thiserror", error);
+        });
+};
+
+export const createCase = (token, appealTypeId, contactid) => {
     appealTypeId = parseInt(appealTypeId);
     var data = JSON.stringify({
         "title": "insertion test case",
         "caseorigincode": 3,
-        "customerid_contact@odata.bind":
+        "customerid_contact@odata.bind": "/contacts(" + contactid + ")",
-            "/contacts(f8b454ed-eded-eb11-aac7-00224800be9c)",
         "pinswg_appealcasetype": appealTypeId,
     });
 
@@ -587,6 +559,7 @@ export const updateCase = async (
 };
 
 export const getMyCases = (token, loggedInUserId) => {
+    console.log("in action ", loggedInUserId);
     return axios
         .get(
             WEBAPI_URL +
@@ -595,13 +568,15 @@ export const getMyCases = (token, loggedInUserId) => {
                 " and pinswg_appealcasetype ne null&$orderby=createdon desc&$count=true&$top=3",
             azureHeaders(token)
         )
-        .then((res) => res.data)
+        .then((res) => {
+            return res.data;
+        })
         .catch((error) => {
             console.log("thi serror", error);
         });
 };
 
-export const getMyRepresentations = (token) => {
+export const getMyRepresentations = (token, loggedInUserId) => {
     return (
         axios
             // .get(BASE_URL + "/api/lookups/myRepresentations", {
@@ -609,7 +584,9 @@ export const getMyRepresentations = (token) => {
             // })
             .get(
                 WEBAPI_URL +
-                    "incidents?$select=_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=pinswg_appealcasetype ne null &$count=true&$top=3",
+                    "incidents?$select=ticketnumber,casetypecode,createdon,_customerid_value,description,incidentid,pinswg_appealcasetype,_pinswg_assignedinspectrids_value,statecode,statuscode,title&$filter=_customerid_value eq " +
+                    loggedInUserId +
+                    " and pinswg_appealcasetype ne null&$orderby=createdon desc&$count=true&$top=3",
                 azureHeaders(token)
             )
             .then((res) => res.data)
@@ -619,7 +596,7 @@ export const getMyRepresentations = (token) => {
     );
 };
 
-export const getWatchedCases = (token) => {
+export const getWatchedCases = (token, loggedInUserId) => {
     return (
         axios
 
@@ -628,7 +605,9 @@ export const getWatchedCases = (token) => {
             // })
             .get(
                 WEBAPI_URL +
-                    "incidents?$select=_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=pinswg_appealcasetype ne null &$count=true&$top=3",
+                    "incidents?$select=ticketnumber,casetypecode,createdon,_customerid_value,description,incidentid,pinswg_appealcasetype,_pinswg_assignedinspectrids_value,statecode,statuscode,title&$filter=_customerid_value eq " +
+                    loggedInUserId +
+                    " and pinswg_appealcasetype ne null&$orderby=createdon desc&$count=true&$top=3",
                 azureHeaders(token)
             )
             .then((res) => res.data)
@@ -664,3 +643,44 @@ export const getPortalModuelDetails = (token, appealType, caseReference) => {
             console.log("thiserror", error);
         });
 };
+
+export const getEmailAccountCheck = (emailAddress) => {
+    let token = getSASToken();
+    return axios
+        .get(
+            "/api/proxy/contacts?$filter=emailaddress1 eq '" +
+                emailAddress +
+                "'&$count=true&$select=emailaddress1, contactid"
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thiserror", error);
+        });
+};
+
+export const createAccount = (formValues) => {
+    var data = JSON.stringify(formValues);
+
+    var config = {
+        method: "post",
+        url: "/api/proxy/contacts",
+        headers: {
+            "OData-MaxVersion": "4.0",
+            "OData-Version": "4.0",
+            "Accept": "application/json",
+            "Prefer": 'odata.include-annotations="*",return=representation',
+            "Content-Type": "application/json",
+            "ServiceBusAuthorization": getSASToken(),
+        },
+        data: data,
+    };
+    // console.log(config);
+    return axios(config)
+        .then((res) => {
+            // console.log("posted ", res.data);
+            return res.data;
+        })
+        .catch((error) => {
+            console.log("this serror", error);
+        });
+};

components/account/registerCheck.js

@@ -9,6 +9,7 @@ import {
     getFormSubmitErrors,
 } from "redux-form";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import { setAccCr } from "../../store/accountDetails/action";
 
 const RegisterFormCheck = (props) => {
     const {
@@ -18,6 +19,7 @@ const RegisterFormCheck = (props) => {
         value,
         setRegisterFormComplete,
         setAccountCreatedComplete,
+        setAccCr,
     } = props;
     let { t, lang } = useTranslation();
 
@@ -70,7 +72,6 @@ const RegisterFormCheck = (props) => {
                         >
                             Change
                             <span className="govuk-visually-hidden">
-                                {" "}
                                 last name
                             </span>
                         </a>
@@ -81,7 +82,7 @@ const RegisterFormCheck = (props) => {
                     <dd className="govuk-summary-list__value">
                         {
                             props.props.props.form.accountRegisterForm.values
-                                .email
+                                .emailaddress1
                         }
                     </dd>
                     <dd className="govuk-summary-list__actions">
@@ -105,7 +106,7 @@ const RegisterFormCheck = (props) => {
                     <dd className="govuk-summary-list__value">
                         {
                             props.props.props.form.accountRegisterForm.values
-                                .telephone
+                                .telephone1
                         }
                     </dd>
                     <dd className="govuk-summary-list__actions">
@@ -123,7 +124,7 @@ const RegisterFormCheck = (props) => {
                         </a>
                     </dd>
                 </div>
-                <div className="govuk-summary-list__row">
+                {/* <div className="govuk-summary-list__row">
                     <dt className="govuk-summary-list__key">Company/Group</dt>
                     <dd className="govuk-summary-list__value">
                         {
@@ -146,7 +147,7 @@ const RegisterFormCheck = (props) => {
                             </span>
                         </a>
                     </dd>
-                </div>
+                </div> */}
             </dl>
             <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
                 <h2 className="govuk-heading-m">Your address</h2>
@@ -156,7 +157,7 @@ const RegisterFormCheck = (props) => {
                     <dd className="govuk-summary-list__value">
                         {
                             props.props.props.form.accountRegisterForm.values
-                                .addressline1
+                                .address1_line1
                         }
                     </dd>
                     <dd className="govuk-summary-list__actions">
@@ -180,7 +181,7 @@ const RegisterFormCheck = (props) => {
                     <dd className="govuk-summary-list__value">
                         {
                             props.props.props.form.accountRegisterForm.values
-                                .addressline2
+                                .address1_line2
                         }
                     </dd>
                     <dd className="govuk-summary-list__actions">
@@ -204,7 +205,7 @@ const RegisterFormCheck = (props) => {
                     <dd className="govuk-summary-list__value">
                         {
                             props.props.props.form.accountRegisterForm.values
-                                .towncity
+                                .address1_city
                         }
                     </dd>
                     <dd className="govuk-summary-list__actions">
@@ -228,7 +229,7 @@ const RegisterFormCheck = (props) => {
                     <dd className="govuk-summary-list__value">
                         {
                             props.props.props.form.accountRegisterForm.values
-                                .county
+                                .address1_county
                         }
                     </dd>
                     <dd className="govuk-summary-list__actions">
@@ -252,7 +253,7 @@ const RegisterFormCheck = (props) => {
                     <dd className="govuk-summary-list__value">
                         {
                             props.props.props.form.accountRegisterForm.values
-                                .postcode
+                                .address1_postalcode
                         }
                     </dd>
                     <dd className="govuk-summary-list__actions">
@@ -278,6 +279,7 @@ const RegisterFormCheck = (props) => {
                     className="govuk-button"
                     data-module="govuk-button"
                     onClick={() => {
+                        setAccCr(false);
                         setAccountCreatedComplete(true);
                     }}
                 >
@@ -304,6 +306,9 @@ const mapDispatchToProps = (dispatch) => {
         setCurrentSection: (currentSection) => {
             dispatch(setCurrentSection(currentSection));
         },
+        setAccCr: (accState) => {
+            dispatch(setAccCr(accState));
+        },
     };
 };
 

components/account/registerComplete.js

@@ -1,8 +1,10 @@
 import _ from "lodash";
 import Link from "next/link";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+
+import jsonpath from "jsonpath";
 import {
     Field,
     reduxForm,
@@ -18,6 +20,10 @@ import {
     setAccountCreatedComplete,
 } from "react-redux";
 
+import { setAccCr, setLogout } from "../../store/accountDetails/action";
+
+import { getEmailAccountCheck, createAccount } from "../../actions";
+
 const RegisterComplete = (props) => {
     const {
         footerLinks,
@@ -26,13 +32,50 @@ const RegisterComplete = (props) => {
         value,
         setRegisterFormComplete,
         setAccountCreatedComplete,
+        setAccCr,
     } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
-    return (
+    const [accountCreated, setAccountCreated] = useState(false);
+
+    useEffect(() => {
+        let accountBody = props.props.props.form.accountRegisterForm.values;
+        let emailAddress =
+            props.props.props.form.accountRegisterForm.values.emailaddress1;
+        Object.assign(accountBody, {
+            "pinswg_typeofinvolvement": 846040001,
+        });
+
+        accountBody = _.omit(accountBody, ["custom_password_check"]);
+
+        let checkEmailObj = {};
+
+        switch (props.accountDetails.accCr) {
+            case "created":
+            case "exists":
+                break;
+
+            default:
+                let emailExists = getEmailAccountCheck(
+                    accountBody.emailaddress1
+                ).then((data) => {
+                    data["@odata.count"] > 0
+                        ? setAccCr("exists")
+                        : (checkEmailObj = createAccount(accountBody).then(
+                              (data) => {
+                                  //console.log(data);
+                                  setAccCr("created");
+                              }
+                          ));
+                });
+                break;
+        }
+    });
+
+    return props.accountDetails.accCr == "created" ? (
         <>
             <p className="govuk-body">We have sent you a confirmation email.</p>
 
@@ -43,18 +86,35 @@ const RegisterComplete = (props) => {
                 metus non quam mollis egestas. Integer ac leo cursus, laoreet
                 nulla sed, tempus tellus. Mauris condimentum erat arcu.
             </p>
-            <p className="govuk-body">
-                Sed imperdiet dignissim ipsum. Orci varius natoque penatibus et
-                magnis dis parturient montes, nascetur ridiculus mus. In id leo
-                in turpis aliquam venenatis ut non erat. Ut est arcu, luctus sit
-                amet pretium sed, iaculis non purus. Etiam dictum tortor commodo
-                luctus rhoncus.
-            </p>
 
             <p className="govuk-body">
-                <Link href="/">
+                <a
-                    <a className="govuk-link">Login to My Portal</a>
+                    href="/"
-                </Link>
+                    className="govuk-link"
+                    onClick={() => {
+                        setLogout(), window.localStorage.clear();
+                    }}
+                >
+                    Login to My Portal
+                </a>
+            </p>
+        </>
+    ) : (
+        <>
+            <h2 className="govuk-heading-m">
+                Please try again with a different email address
+            </h2>
+            <p className="govuk-body">
+                <a
+                    onClick={() => {
+                        setRegisterFormComplete(false),
+                            setAccountCreatedComplete(false),
+                            setAccCr("false");
+                    }}
+                    className="govuk-link"
+                >
+                    Try registering again
+                </a>
             </p>
         </>
     );
@@ -73,8 +133,11 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        setCurrentSection: (currentSection) => {
+        setAccCr: (accountCreated) => {
-            dispatch(setCurrentSection(currentSection));
+            dispatch(setAccCr(accountCreated));
+        },
+        setLogout: () => {
+            dispatch(setLogout());
         },
     };
 };

components/account/registerform.js

@@ -87,9 +87,21 @@ const RegisterForm = (props) => {
             ? "Invalid phone number"
             : undefined;
 
+    const passwordsMatch = (value, allValues) =>
+        value !== allValues.pinswg_custom_password
+            ? "Passwords don't match"
+            : undefined;
+
+    const minLength = (min) => (value) =>
+        value && value.length < min
+            ? `Must be ${min} characters or more`
+            : undefined;
+    const minLength5 = minLength(5);
+
     const [hasErrors, setHasErrors] = useState("");
 
     const onHandleSubmit = (values) => {
+        //console.log(values);
         setRegisterFormComplete(true);
     };
 
@@ -125,8 +137,8 @@ const RegisterForm = (props) => {
                                 errorMsg="Is required"
                             />
                             <Field
-                                name="email"
+                                name="emailaddress1"
-                                id="email"
+                                id="emailaddress1"
                                 component={RenderTextfield}
                                 type="email"
                                 className="govuk-input govuk-input--width-20"
@@ -134,8 +146,8 @@ const RegisterForm = (props) => {
                                 label="Email address"
                             />
                             <Field
-                                name="telephone"
+                                name="telephone1"
-                                id="telephone"
+                                id="telephone1"
                                 component={RenderTextfield}
                                 type="number"
                                 className="govuk-input govuk-input--width-20"
@@ -144,14 +156,29 @@ const RegisterForm = (props) => {
                             />
 
                             <Field
-                                name="companygroup"
+                                name="pinswg_custom_password"
-                                id="companygroup"
+                                id="pinswg_custom_password"
                                 component={RenderTextfield}
-                                type="text"
+                                type="password"
                                 className="govuk-input govuk-input--width-20"
-                                label="Company/Group"
+                                label="Password"
+                                validate={[required, minLength5]}
                                 errorMsg="Is required"
                             />
+                            <Field
+                                name="custom_password_check"
+                                id="custom_password_check"
+                                component={RenderTextfield}
+                                type="password"
+                                className="govuk-input govuk-input--width-20"
+                                label="Confirm password"
+                                validate={[
+                                    required,
+                                    passwordsMatch,
+                                    minLength5,
+                                ]}
+                                errorMsg="Passwords do not match"
+                            />
                         </fieldset>
                         <fieldset className="govuk-fieldset">
                             <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
@@ -161,8 +188,8 @@ const RegisterForm = (props) => {
                             </legend>
 
                             <Field
-                                name="addressline1"
+                                name="address1_line1"
-                                id="addressline1"
+                                id="address1_line1"
                                 component={RenderTextfield}
                                 type="text"
                                 className="govuk-input govuk-input--width-20"
@@ -171,8 +198,8 @@ const RegisterForm = (props) => {
                                 errorMsg="Is required"
                             />
                             <Field
-                                name="addressline2"
+                                name="address1_line2"
-                                id="addressline2"
+                                id="address1_line2"
                                 component={RenderTextfield}
                                 type="text"
                                 className="govuk-input govuk-input--width-20"
@@ -180,8 +207,8 @@ const RegisterForm = (props) => {
                                 errorMsg="Is required"
                             />
                             <Field
-                                name="towncity"
+                                name="address1_city"
-                                id="towncity"
+                                id="address1_city"
                                 component={RenderTextfield}
                                 type="text"
                                 className="govuk-input govuk-input--width-10"
@@ -190,8 +217,8 @@ const RegisterForm = (props) => {
                                 errorMsg="Is required"
                             />
                             <Field
-                                name="county"
+                                name="address1_county"
-                                id="county"
+                                id="address1_county"
                                 component={RenderTextfield}
                                 type="text"
                                 className="govuk-input govuk-input--width-10"
@@ -200,8 +227,8 @@ const RegisterForm = (props) => {
                                 errorMsg="Is required"
                             />
                             <Field
-                                name="postcode"
+                                name="address1_postalcode"
-                                id="postcode"
+                                id="address1_postalcode"
                                 component={RenderTextfield}
                                 type="text"
                                 className="govuk-input govuk-input--width-5"
@@ -229,7 +256,11 @@ const RegisterForm = (props) => {
                     />
                 )
             ) : (
-                <RegisterComplete />
+                <RegisterComplete
+                    props={props}
+                    setRegisterFormComplete={setRegisterFormComplete}
+                    setAccountCreatedComplete={setAccountCreatedComplete}
+                />
             )}
         </>
     );

components/header.js

@@ -27,6 +27,7 @@ const Header = (props) => {
         "/dnsapplications",
         "/dnsdetails",
         "/404",
+        "/account/register",
     ];
     const hasContactLink = [
         "/dns",
@@ -112,22 +113,20 @@ const Header = (props) => {
                                         ""
                                     ) : (
                                         <li>
-                                            <Link
+                                            <a
                                                 href={
                                                     router.locale == "cy"
                                                         ? "/allgofnodi"
                                                         : "/logout"
                                                 }
-                                            >
+                                                onClick={() => {
-                                                <a
+                                                    setLogout(),
-                                                    onClick={() => {
                                                         window.localStorage.clear();
-                                                    }}
+                                                }}
-                                                    className="govuk-header__link "
+                                                className="govuk-header__link "
-                                                >
+                                            >
-                                                    {t("common:signout-label")}
+                                                {t("common:signout-label")}
-                                                </a>
+                                            </a>
-                                            </Link>
                                         </li>
                                     )}
 

components/homepage/login.js

@@ -1,66 +1,187 @@
 import Link from "next/link";
+import { useState } from "react";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { connect } from "react-redux";
+import { Field, reduxForm } from "redux-form";
+import LoadingOverlay from "react-loading-overlay";
+import { getLogin } from "../../actions";
+import { setLoggedInUserId } from "../../store/accountDetails/action";
+import Cookies from "cookies";
 
-export default function Login() {
+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,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <div id="basicSearch-hint" className="govuk-hint ">
+                    <span className="govuk-body-m">{hint1}</span>
+
+                    <br />
+                    <span className="govuk-body-s">{hint2}</span>
+                </div>
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {error}
+                    </span>
+                )}
+                <input {...input} className={className} name={name} id={id} />
+            </div>
+        </>
+    );
+};
+const RenderPasswordfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    hint1,
+    hint2,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <div id="basicSearch-hint" className="govuk-hint ">
+                    <span className="govuk-body-m">{hint1}</span>
+                </div>
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {error}
+                    </span>
+                )}
+                <input
+                    {...input}
+                    type="password"
+                    className={className}
+                    name={name}
+                    id={id}
+                />
+            </div>
+        </>
+    );
+};
+
+let Login = (props) => {
     let { t } = useTranslation();
+    const { handleSubmit, pristine, reset, submitting, setLoggedInUserId } =
+        props;
 
     const router = useRouter();
     const { locale } = router;
+
+    const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    let spinnerState = () => {
+        showSpinnerState == true
+            ? setShowSpinnerState(false)
+            : setShowSpinnerState(true);
+    };
+
+    const onHandleSubmit = (values) => {
+        spinnerState();
+
+        getLogin(values.loginUserID, values.loginUserPassword).then((data) => {
+            setLoggedInUserId(data.value[0].contactid);
+
+            spinnerState();
+            router.replace({
+                pathname: router.locale == "cy" ? "/fymhorth" : "/myportal",
+                query: { q: data.value[0].contactid },
+                shallow: true,
+            });
+        });
+    };
+
     return (
         <div className="card" id="login-card">
-            <div className="card-body active">
+            <form onSubmit={handleSubmit(onHandleSubmit)}>
-                <h3 className="heading-small card-heading">
+                <div className="card-body active">
-                    {t("home:login-card-title")}
+                    <h3 className="heading-small card-heading">
-                </h3>
+                        {t("home:login-card-title")}
+                    </h3>
+
+                    <Field
+                        // validate={[
+                        //     required(
+                        //         t("home:casesearch-search-validation-required")
+                        //     ),
+                        //     minLength(
+                        //         t("home:casesearch-search-validation-minlength")
+                        //     ),
+                        // ]}
+                        className="govuk-input"
+                        component={RenderTextfield}
+                        id="loginUserID"
+                        name="loginUserID"
+                        type="text"
+                        aria-describedby="basicSearch-hint"
+                        hint1={t("home:login-card-id-label")}
+                        hint2={t("home:login-card-id-hint")}
+                    />
+
+                    <Field
+                        // validate={[
+                        //     required(
+                        //         t("home:casesearch-search-validation-required")
+                        //     ),
+                        //     minLength(
+                        //         t("home:casesearch-search-validation-minlength")
+                        //     ),
+                        // ]}
+                        className="govuk-input"
+                        component={RenderPasswordfield}
+                        id="loginUserPassword"
+                        name="loginUserPassword"
+                        type="password"
+                        label="Password"
+                    />
 
-                <form action="/myportal" method="POST" id="loginForm">
                     <div className="govuk-form-group">
-                        {" "}
+                        {/* <Link
-                        <label
-                            htmlFor="user_id"
-                            className="govuk-label"
-                            aria-describedby="user_id-hint"
-                        >
-                            {t("home:login-card-id-label")}
-                        </label>
-                        <div className="govuk-hint" id="user_id-hint">
-                            {t("home:login-card-id-hint")}
-                        </div>
-                        <input
-                            type="text"
-                            name="user_id"
-                            id="user_id"
-                            className="govuk-input govuk-!-width-one-half"
-                            maxLength="22"
-                            aria-describedby="user_id-hint"
-                            autoComplete="username"
-                        />
-                    </div>
-                    <div className="govuk-form-group">
-                        {" "}
-                        <label htmlFor="password" className="govuk-label">
-                            {t("home:login-card-password-label")}
-                        </label>
-                        <input
-                            type="password"
-                            name="password"
-                            id="password"
-                            className="govuk-input govuk-!-width-three-quarters"
-                            autoComplete="current-password"
-                        />
-                    </div>
-                    <div className="govuk-form-group">
-                        {/* <button
-              type="submit"
-              className="govuk-button"
-              data-module="govuk-button"
-              id="continue"
-              formnovalidate=""
-            >
-              {t("home:login-card-button")}
-            </button> */}
-                        <Link
                             href={
                                 router.locale == "cy"
                                     ? "/fymhorth"
@@ -70,23 +191,64 @@ export default function Login() {
                             <a className="govuk-button">
                                 {t("home:login-card-button")}
                             </a>
-                        </Link>
+                        </Link> */}
+                        <button type="submit" className="govuk-button">
+                            {t("home:login-card-button")}
+                        </button>
+                    </div>
+                    <div className="govuk-form-group govuk-!-margin-top-4">
+                        <p className="govuk-body-s">
+                            {t("home:login-card-register-label")}{" "}
+                            <Link href="/account/register">
+                                <a>{t("home:login-card-register-link")}</a>
+                            </Link>
+                        </p>
+                        <p className="govuk-body-s">
+                            <Link href="/">
+                                <a>{t("home:login-card-forgotten-label")} </a>
+                            </Link>
+                        </p>
                     </div>
-                </form>
-                <div className="govuk-form-group govuk-!-margin-top-4">
-                    <p className="govuk-body-s">
-                        {t("home:login-card-register-label")}{" "}
-                        <Link href="/account/register">
-                            <a>{t("home:login-card-register-link")}</a>
-                        </Link>
-                    </p>
-                    <p className="govuk-body-s">
-                        <Link href="/">
-                            <a>{t("home:login-card-forgotten-label")} </a>
-                        </Link>
-                    </p>
                 </div>
-            </div>
+            </form>
+            <LoadingOverlay
+                active={showSpinnerState}
+                spinner
+                text="Logging in"
+            />
         </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 {
+        setLoggedInUserId: (userID) => {
+            dispatch(setLoggedInUserId(userID));
+        },
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "loginForm",
+        destroyOnUnmount: false,
+    })(Login)
+);

components/loading.js

@@ -1,19 +1,20 @@
 import Head from "next/head";
-import Banner from "../components/banner";
 import Footer from "../components/footer";
 import Header from "../components/header";
+import useTranslation from "next-translate/useTranslation";
 
 export default function SkipLink(props) {
+    let { t } = useTranslation();
+
     return (
         <div>
             <Head>
-                <title>Appeals Casework Portal</title>
+                <title>{t("common:service-name")}</title>
             </Head>
 
             <div className="">
                 <Header courseName="Planning Casework Portal" />
                 <div className="govuk-width-container">
-                    <Banner />
                     <main
                         className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
                         id="main-content"
@@ -23,10 +24,12 @@ export default function SkipLink(props) {
                             <div className="govuk-grid-column-two-thirds">
                                 <noscript>
                                     <h1 className="govuk-heading-l">
-                                        Please enable javascript
+                                        {t("common:enable-js-label")}
                                     </h1>
                                 </noscript>
-                                <h1 className="govuk-heading-m">Loading...</h1>
+                                <h1 className="govuk-heading-m">
+                                    {t("common:loading-label")}...
+                                </h1>
                             </div>
                         </div>
                     </main>

components/myportal/youraccount.js

@@ -19,7 +19,7 @@ export default function YourAccount() {
                     <div>
                         <Link href="/account/personaldetails">
                             <a className="govuk-button-secondary">
-                                Edit your account details
+                                View your account details
                             </a>
                         </Link>
                     </div>

components/search/searchresults.js

@@ -55,6 +55,7 @@ const SearchResults = (props) => {
                     return (
                         <div className="govuk-summary-list__row" key={key}>
                             <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
+                                {router.pathname.indexOf("myportal")}
                                 <Link
                                     href={
                                         router.locale == "cy"

locales/cy/common.json

@@ -1,4 +1,6 @@
 {
+  "loading-label": "Llwytho",
+  "enable-js-label": "Os gwelwch yn dda galluogi javascript",
   "gov-wales-link": "https://llyw.cymru",
   "gov-wales-label": "LLYW.CYMRU",
   "service-name": "Cynllunio gwaith achos",

locales/en/common.json

@@ -1,4 +1,6 @@
 {
+  "loading-label": "Loading",
+  "enable-js-label": "Please enable javascript",
   "gov-wales-link": "https://www.gov.wales",
   "gov-wales-label": "GOV.WALES",
   "service-name": "Planning casework",

pages/account/register.js

@@ -56,7 +56,13 @@ const Home = (props) => {
                                             <h1>Create a new account</h1>
                                         ) : (
                                             <h1>
-                                                Your account has been created
+                                                {props.accountDetails.accCr !=
+                                                "false"
+                                                    ? props.accountDetails
+                                                          .accCr == "exists"
+                                                        ? "Your account has not created"
+                                                        : "Your account has been created"
+                                                    : "Checking for account.."}
                                             </h1>
                                         )}
                                         <RegisterForm

pages/api/proxy/[...route].js

@@ -9,18 +9,6 @@ const PROXY_RELAY_URL =
     "/" +
     (process.env.RELAYPATH || "dev-pedw-hc") +
     "/";
-//"https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/";
-
-// const azureHeaders = {
-//     headers: {
-//         "OData-MaxVersion": "4.0",
-//         "OData-Version": "4.0",
-//         "Accept": "application/json",
-//         "Prefer": 'odata.include-annotations="*",return=representation',
-//         "Content-Type": "application/json",
-//         "ServiceBusAuthorization": SASToken,
-//     },
-// };
 
 const getSASToken = () => {
     var m_ResourceURI =
@@ -82,7 +70,6 @@ export default async function ApiProxy(req, res) {
 
     var config = {
         method: req.method,
-        //url: PROXY_RELAY_URL + updateFormCollection + "(" + incidentId + ")",
         url: PROXY_RELAY_URL + req.query.route[0],
         headers: {
             "OData-MaxVersion": "4.0",
@@ -112,7 +99,13 @@ export default async function ApiProxy(req, res) {
     return new Promise((resolve, reject) => {
         let apiPath = req.url.split("/api/proxy/")[1];
         let hasDocument = apiPath.indexOf("/download") > 0 ? true : false;
-
+        console.log(
+            "//////////////",
+            req.url.split("/api/proxy/")[1],
+            PROXY_RELAY_URL + req.query.route[0],
+            req.method,
+            hasDocument
+        );
         axios(
             req.method == "GET"
                 ? hasDocument

pages/logout.js

@@ -10,6 +10,7 @@ import { useSelector, shallowEqual, connect } from "react-redux";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { setLogout } from "../store/accountDetails/action";
+import { useEffect } from "react";
 
 const LogOut = (props) => {
     const { footerLinks, pages, setLogout } = props;
@@ -17,7 +18,10 @@ const LogOut = (props) => {
 
     const router = useRouter();
     const { locale } = router;
-    setLogout();
+
+    useEffect(() => {
+        setLogout();
+    });
     return (
         <div>
             <Head>

pages/myportal/index.js

@@ -82,58 +82,63 @@ const Home = (props) => {
 };
 
 export const getServerSideProps = wrapper.getServerSideProps(
-    (store) =>
+    (store) => async (ctx) => {
-        async ({ query, req, res }) => {
+        const { query, req, res } = ctx;
-            //console.log("the query", query);
+        console.log("the query", query);
 
-            const token = await getSASToken();
+        const { cookies } = req;
 
-            const [
+        console.log(cookies);
-                myCases,
+        const token = await getSASToken();
-                myRepresentations,
+
-                watchedCases,
+        let loggedInUser =
-                awaitingSubmission,
+            typeof query.q == undefined ? cookies.pinsUser : query.q;
-            ] = await Promise.all([
+
-                await getMyCases(token, "f8b454ed-eded-eb11-aac7-00224800be9c"),
+        console.log("qweqe ", loggedInUser);
-                await getMyRepresentations(token),
+
-                await getWatchedCases(token),
+        const [myCases, myRepresentations, watchedCases, awaitingSubmission] =
+            await Promise.all([
+                await getMyCases(token, loggedInUser),
+                await getMyRepresentations(token, loggedInUser),
+                await getWatchedCases(token, loggedInUser),
                 await getAwaitingSubmission(token),
             ]);
 
-            const cookies = new Cookies(req, res);
+        const cookiesMaker = new Cookies(req, res);
 
-            cookies.set("pinsUser", "f8b454ed-eded-eb11-aac7-00224800be9c", {
+        cookiesMaker.set("pinsUser", query.q, {
-                httpOnly: true, // true by default
+            httpOnly: true, // true by default
-            });
+        });
-            //console.log("my cases ", myCases);
-            const [
-                myCasesDetails,
-                // myRepresentationsDetails,
-                // watchedCasesDetails,
-                // awaitingSubmissionDetails,
-            ] = await Promise.all([
-                await getDetails(token, myCases),
-                // await getDetails(myRepresentations),
-                //  await getDetails(watchedCases),
-                //  await getDetails(awaitingSubmission),
-            ]);
 
-            store.dispatch(
+        console.log(" from cookie ", cookiesMaker.get("pinsUser"));
-                setLoggedInUserId("f8b454ed-eded-eb11-aac7-00224800be9c")
+        console.log(myCases);
-            );
+
-            store.dispatch(setMyCases(myCases));
+        const [
-            store.dispatch(setMyCasesDetails(myCasesDetails));
+            myCasesDetails,
-            store.dispatch(setMyRepresentations(myRepresentations));
+            myRepresentationsDetails,
-            // store.dispatch(
+            watchedCasesDetails,
-            //     setMyRepresentationsDetails(myRepresentationsDetails)
+            // awaitingSubmissionDetails,
-            // );
+        ] = await Promise.all([
-            store.dispatch(setWatchedCases(watchedCases));
+            await getDetails(token, myCases),
-            //store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
+            await getDetails(token, myRepresentations),
-            store.dispatch(setAwaitingSubmission(awaitingSubmission));
+            await getDetails(token, watchedCases),
-            // store.dispatch(
+            //  await getDetails(awaitingSubmission),
-            //     setAwaitingSubmissionDetails(awaitingSubmissionDetails)
+        ]);
-            // );
+
-        }
+        console.log(myCasesDetails);
+
+        store.dispatch(setLoggedInUserId(loggedInUser));
+        store.dispatch(setMyCases(myCases));
+        store.dispatch(setMyCasesDetails(myCasesDetails));
+        store.dispatch(setMyRepresentations(myRepresentations));
+        store.dispatch(setMyRepresentationsDetails(myRepresentationsDetails));
+        store.dispatch(setWatchedCases(watchedCases));
+        store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
+        store.dispatch(setAwaitingSubmission(awaitingSubmission));
+        // store.dispatch(
+        //     setAwaitingSubmissionDetails(awaitingSubmissionDetails)
+        // );
+    }
 );
 
 const getFormCollection = (formtype) => {

pages/myportal/searchresults.js

@@ -20,9 +20,17 @@ import { setSearch, getSearchObj } from "../../store/search/action";
 import {
     setSearchResults,
     setSearchDetails,
+    setDocumentDetails,
+    setDocumentHistory,
     getSearchResultsObj,
 } from "../../store/searchOutput/action";
-import { getBasicSearch, getBasicSearchDetails } from "../../actions";
+import {
+    getBasicSearch,
+    getBasicSearchDetails,
+    getSearchDocumentDetails,
+    getSearchDocumentHistory,
+    getSASToken,
+} from "../../actions";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -47,6 +55,7 @@ const Home = (props) => {
                     <SearchResults
                         searchString={props.search.searchString}
                         searchResultsObj={props.searchResultsObj}
+                        myportal="true"
                     />
                 </div>
                 <Footer footerLinks={footerLinks} />
@@ -59,14 +68,38 @@ export const getServerSideProps = wrapper.getServerSideProps(
     (store) =>
         async ({ query, req, res }) => {
             console.log("query-", query);
-            // const [searchResultsObj, searchDetailsObj] = await Promise.all(
+
-            //     await getBasicSearch(query.q),
+            const token = await getSASToken();
-            //     await getBasicSearchDetails(query.d)
+
+            let searchResultsObj = await getBasicSearch(token, query.q);
+
+            searchResultsObj =
+                searchResultsObj.status == 502
+                    ? {
+                          value: [],
+                          errorCode: searchResultsObj.status,
+                          errorMsg: searchResultsObj.statusText,
+                      }
+                    : searchResultsObj;
+
+            //console.log("sssss", searchResultsObj);
+
+            const searchDetailsObj = await getSearchDetails(
+                token,
+                searchResultsObj
+            );
+
+            // const searchDocumentResultsObj = await getDocumentDetails(
+            //     token,
+            //     searchResultsObj
             // );
 
-            const searchResultsObj = await getBasicSearch(query.q);
+            // const searchDocumentHistoryObj = await getDocumentHistory(
-            const searchDetailsObj = await getSearchDetails(searchResultsObj);
+            //     token,
-            // console.log(searchDetailsObj);
+            //     searchDocumentResultsObj
+            // );
+            // console.log(searchDocumentHistoryObj);
+
             store.dispatch(setSearchResults(searchResultsObj));
             store.dispatch(setSearchDetails(searchDetailsObj));
             store.dispatch(setSearch(query.q));
@@ -82,7 +115,7 @@ const getFormCollection = (formtype) => {
     return collectionName[0];
 };
 
-const getSearchDetails = (searchResultsObj) => {
+const getSearchDetails = (token, searchResultsObj) => {
     //console.log(searchResultsObj);
 
     let detailsArr = [];
@@ -93,13 +126,15 @@ const getSearchDetails = (searchResultsObj) => {
         } else {
             detailsArr.push(
                 getBasicSearchDetails(
+                    token,
                     getFormCollection(
                         "pinswg_" +
                             searchDetail[
                                 "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                             ]
-                                .replace(/[\s\-\+\(\)\,\&\.]/g, "")
+                                .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                                 .toLowerCase()
+                                .slice(0, 39)
                     ),
                     searchDetail.ticketnumber
                 )
@@ -122,6 +157,7 @@ const mapStateToProps = (state) => {
         watchedCases: state.watchedCases,
         myRepresentations: state.myRepresentations,
         awaitingSubmission: state.awaitingSubmission,
+        accountDetails: state.accountDetails,
     };
 };
 

pages/newappeal/[appealtypes].js

@@ -258,49 +258,42 @@ let Home = (props) => {
 };
 
 export const getServerSideProps = wrapper.getServerSideProps(
-    (store) =>
+    (store) => async (ctx) => {
-        async ({ query, req, res }) => {
+        const { query, req, res } = ctx;
-            console.log("the query", query);
+        const { cookies } = req;
-            const token = await getSASToken();
-            const [
-                caseReferenceData,
-                appealTypeData,
-                mandatoryFieldsData,
-                pickListData,
-                formdata,
-            ] = await Promise.all([
-                await createCase(token, query.apt),
-                await getAppealsTypes(token),
-                await getMandatoryFields(token, query.appealtypes),
-                await getPickLists(token, query.appealtypes),
-                await getFormData(token, query.appealtypes),
-            ]);
 
-            // let updateCaseReferenceData = await updateCase(
+        console.log(cookies);
-            //     caseReferenceData.incidentid,
+        console.log("the query", query);
-            //     query.apt
+        let loggedInUser = cookies.pinsUser;
-            // );
 
-            const cookies = new Cookies(req, res);
+        const token = await getSASToken();
-            // Get a cookie
+        const [
+            caseReferenceData,
+            appealTypeData,
+            mandatoryFieldsData,
+            pickListData,
+            formdata,
+        ] = await Promise.all([
+            await createCase(token, query.apt, loggedInUser),
+            await getAppealsTypes(token),
+            await getMandatoryFields(token, query.appealtypes),
+            await getPickLists(token, query.appealtypes),
+            await getFormData(token, query.appealtypes),
+        ]);
 
-            console.log(cookies.get("pipinsUser"));
+        let caseReference = caseReferenceData;
+        let xmlStr = formdata;
+        xmlStr = formdata.value[0].formxml;
+        xmlStr = xmlStr.replace(/\\"/g, "");
 
-            let caseReference = caseReferenceData;
+        //console.log(caseReference, query.appealtypes, formdata);
-            let xmlStr = formdata;
+        store.dispatch(setLoggedInUserId(loggedInUser));
-            xmlStr = formdata.value[0].formxml;
+        store.dispatch(setAppealLPA(query.lpa));
-            xmlStr = xmlStr.replace(/\\"/g, "");
+        store.dispatch(setAppealTypeID(query.apt));
-
+        store.dispatch(setCaseReference(caseReference));
-            //console.log(caseReference, query.appealtypes, formdata);
+        store.dispatch(setForm(xmlStr, mandatoryFieldsData, pickListData));
-            store.dispatch(
+        store.dispatch(setAppealType(appealTypeData));
-                setLoggedInUserId("f8b454ed-eded-eb11-aac7-00224800be9c")
+    }
-            );
-            store.dispatch(setAppealLPA(query.lpa));
-            store.dispatch(setAppealTypeID(query.apt));
-            store.dispatch(setCaseReference(caseReference));
-            store.dispatch(setForm(xmlStr, mandatoryFieldsData, pickListData));
-            store.dispatch(setAppealType(appealTypeData));
-        }
 );
 
 const mapStateToProps = (state) => {

pages/newappeal/index.js

@@ -19,6 +19,10 @@ import { reduxForm, formValueSelector } from "redux-form";
 
 import CreateCase from "../../components/newappeal/createCase";
 import xpath from "xpath";
+import {
+    setLoggedInUserId,
+    setAccountDetails,
+} from "../../store/accountDetails/action";
 import {
     setAppealType,
     setAppealTypeTitle,
@@ -78,18 +82,25 @@ const Home = (props) => {
 };
 
 export const getServerSideProps = wrapper.getServerSideProps(
-    (store) =>
+    (store) => async (ctx) => {
-        async ({ query, req, res }) => {
+        const { req, res } = ctx;
-            const token = await getSASToken();
+        const { cookies } = req;
 
-            const [appealTypeData, lpaData, caseData] = await Promise.all([
+        console.log(cookies);
-                await getAppealsTypes(token),
-                await getLPA(token),
-            ]);
 
-            store.dispatch(setAppealType(appealTypeData));
+        let loggedInUser = cookies.pinsUser;
-            store.dispatch(setLPA(lpaData));
+
-        }
+        const token = await getSASToken();
+
+        const [appealTypeData, lpaData, caseData] = await Promise.all([
+            await getAppealsTypes(token),
+            await getLPA(token),
+        ]);
+
+        store.dispatch(setAppealType(appealTypeData));
+        store.dispatch(setLPA(lpaData));
+        store.dispatch(setLoggedInUserId(loggedInUser));
+    }
 );
 
 const mapStateToProps = (state) => {

store/accountDetails/action.js

@@ -1,7 +1,11 @@
+import actions from "redux-form/lib/actions";
+
 export const AccountDetailsDataActionTypes = {
     GETACCOUNTDETAILSDATA: "GETACCOUNTDETAILSDATA",
     SETACCOUNTDETAILSDATA: "SETACCOUNTDETAILSDATA",
     SETLOGGEDINUSER: "SETLOGGEDINUSER",
+    SETACCOUNTCREATED: "SETACCOUNTCREATED",
+    USER_LOGOUT: "USER_LOGOUT",
 };
 
 export const getAccountDetailsObj = () => (dispatch) => {
@@ -29,3 +33,10 @@ export const setLogout = () => (dispatch) => {
         type: "USER_LOGOUT",
     });
 };
+
+export const setAccCr = (accCr) => (dispatch) => {
+    return dispatch({
+        type: AccountDetailsDataActionTypes.SETACCOUNTCREATED,
+        accCr: accCr,
+    });
+};

store/accountDetails/reducer.js

@@ -3,6 +3,7 @@ import { AccountDetailsDataActionTypes } from "./action";
 const AccountDetailsDataInitialState = {
     accountDetails: {},
     loggedinUserId: "",
+    accCr: false,
 };
 
 export default function reducer(
@@ -20,6 +21,11 @@ export default function reducer(
                 ...state,
                 loggedinUserId: action.loggedinUserId,
             };
+        case AccountDetailsDataActionTypes.SETACCOUNTCREATED:
+            return {
+                ...state,
+                accCr: action.accCr,
+            };
         default:
             return state;
     }

styles/sass/welshgov/_application.scss

@@ -651,11 +651,14 @@ textarea,
         width: 20%;
     }
 }
+
 .results .govuk-summary-list__row {
     @media screen and (max-width: 900px) {
         padding: 20px 10px;
     }
-    &::last-of-type {
+}
+.results .govuk-summary-list__key {
+    &:last-of-type {
         width: 30%;
     }
 }