Merged PR 1087: phase 2 tests

Related work items: #10486, #10487, #10488, #10489

.env.local

@@ -13,11 +13,11 @@ RELAYPATH = "dev-pedw-hc"
 
 
 //Test Oauth ESNR
-//CLIENT_ID = d40b9373-96c2-4b04-8bd8-c2a2fe6444c1
+CLIENT_ID = d40b9373-96c2-4b04-8bd8-c2a2fe6444c1
-//CLIENT_SECRET = IXI8Q~D5oqsC-nrtayHHc~tUAfjQFzNiKVQ~fc2S
+CLIENT_SECRET = IXI8Q~D5oqsC-nrtayHHc~tUAfjQFzNiKVQ~fc2S
-//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"
 
 
 //Preprod Oauth WGO
@@ -63,12 +63,12 @@ SECRET = SuperSecret
 AZURE_CLIENT_ID	= $CLIENT_ID
 AZURE_TENANT_ID	= $TENANT
 AZURE_CLIENT_SECRET = $CLIENT_SECRET
-AZURE_STORAGE_ACCOUNT_NAME= "pedwdev"
+//AZURE_STORAGE_ACCOUNT_NAME= "pedwdev"
-//AZURE_STORAGE_ACCOUNT_NAME= "pedwtest"
+AZURE_STORAGE_ACCOUNT_NAME= "pedwtest"
 AZURE_STORAGE_ACCOUNT_KEY = JS3ZIXianhYhB1lZrHB+bXbdzaLlON0alCyKrFAb+jVEwr9iqo2dty92EBxwnufNFM+CSN/fKX2R+AStDn0byg==
 
-AZURE_PEDW_STORAGE_ENDPOINT = https://pedwdev.blob.core.windows.net
+//AZURE_PEDW_STORAGE_ENDPOINT = https://pedwdev.blob.core.windows.net
-//AZURE_PEDW_STORAGE_ENDPOINT = https://pedwtest.blob.core.windows.net
+AZURE_PEDW_STORAGE_ENDPOINT = https://pedwtest.blob.core.windows.net
 AZURE_PEDW_CONTAINER = "pedwapplications"
 AZURE_PEDW_QUEUE_ENDPOINT = https://$AZURE_STORAGE_ACCOUNT_NAME.queue.core.windows.net
 

actions/index.js

@@ -1399,7 +1399,7 @@ export const generateAppealPDF = async (
     //formValues.append("filesList", fileList);
 
     Object.assign(formValues, {
-        "filesList": fileList.hasOwnProperty("value") ? fileList.value : [],
+        "filesList": fileList,
     });
 
     var queryUrl = "/api/file/generateappealpdf?appealType=" + appealType;

components/elements/index.js

@@ -71,13 +71,16 @@ const RenderTextfield = ({
                 )}
                 <input
                     {...input}
+                    type={custom.type}
                     className={className}
                     name={name}
                     id={id}
                     maxLength={
                         custom.hasOwnProperty("maxFieldLength")
                             ? custom.maxFieldLength
-                            : undefined
+                                ? custom.maxFieldLength
+                                : 100
+                            : 200
                     }
                 />
             </div>
@@ -212,7 +215,9 @@ const RenderMultiline = ({
                     maxLength={
                         custom.hasOwnProperty("maxFieldLength")
                             ? custom.maxFieldLength
-                            : undefined
+                                ? custom.maxFieldLength
+                                : 800
+                            : 800
                     }
                 ></textarea>
             </div>

components/newappeal/aboutyou.js

@@ -49,11 +49,6 @@ const RenderTextfield = ({
                     id={id}
                     type={type}
                     disabled={disabled ? true : false}
-                    maxLength={
-                        custom.hasOwnProperty("maxFieldLength")
-                            ? custom.maxFieldLength
-                            : undefined
-                    }
                 />
             </div>
         </>

components/newappeal/buildcheckrow.js

@@ -63,7 +63,7 @@ let BuildCheckRow = (props) => {
         const { locale } = router;
         const { appealtypes } = router.query;
 
-        let formObj = jsonpath(fieldLookup, "$['" + appealtypes + "']");
+        let formObj = jsonpath("$['" + appealtypes + "']", fieldLookup);
 
         let labelTrans =
             router.locale == "cy"

components/newappeal/buildchecksection.js

@@ -16,6 +16,7 @@ import {
     getThumbnailIconByExtension,
     bytesToSize,
 } from "../utils";
+import { generateAppealPDF } from "../../actions";
 
 let BuildCheckSection = (props) => {
     useEffect(() => {
@@ -70,6 +71,38 @@ let BuildCheckSection = (props) => {
         alert(1);
     };
 
+    let buildAppealFilesArray = [];
+    console.log("attached docs: - ", buildAppealFilesArray);
+
+    let filesUplaodObj = Object.keys(props.props.form.appealForm.values)
+        .filter(function (k) {
+            return k.indexOf("pinswg_fileUpload") == 0;
+        })
+        .reduce(function (newData, k) {
+            newData[k] = props.props.form.appealForm.values[k];
+            return newData;
+        }, {});
+
+    console.log(filesUplaodObj);
+
+    for (let key in filesUplaodObj) {
+        for (let j in filesUplaodObj[key]) {
+            buildAppealFilesArray.push({
+                "name": filesUplaodObj[key][j].name,
+                "size": filesUplaodObj[key][j].size,
+            });
+        }
+    }
+
+    console.log(buildAppealFilesArray);
+
+    let pdfObj = props.props.form.appealForm.values;
+
+    Object.assign(pdfObj, {
+        "containerID": props.props.accountDetails.containerID,
+        "casefolderID": props.appealType.caseReference.ticketnumber,
+    });
+
     return (
         <div className="govuk-grid-row" key={1222}>
             <div className="govuk-grid-column-full">
@@ -98,41 +131,30 @@ let BuildCheckSection = (props) => {
                     <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list">
                         <div className="govuk-summary-list__row" key={"9999"}>
                             <dt className="govuk-summary-list__key">
-                                {props.props.appealType.fileList.value.length >
+                                {buildAppealFilesArray.length > 0
-                                0
+                                    ? buildAppealFilesArray.map((blob, i) => (
-                                    ? props.props.appealType.fileList.value.map(
-                                          (blob, i) => (
                                           <div
                                               key={blob.name + "_" + i}
                                               className="govuk-!-margin-bottom-5 fileThumb "
                                           >
                                               <img
                                                   src={getThumbnailIconByExtension(
-                                                          blob[i].name
+                                                      blob.name
                                                   )}
-                                                      alt={blob[i].name.slice(
+                                                  alt={blob.name.slice(
-                                                          blob[i].name.indexOf(
+                                                      blob.name.indexOf("_") + 1
-                                                              "_"
-                                                          ) + 1
                                                   )}
                                                   width="50"
                                               />
 
                                               <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
-                                                      {blob[i].name.slice(
+                                                  {blob.name.slice(
-                                                          blob[i].name.indexOf(
+                                                      blob.name.indexOf("_") + 1
-                                                              "_"
-                                                          ) + 1
                                                   )}
-                                                      (
+                                                  ({bytesToSize(blob?.size)})
-                                                      {bytesToSize(
-                                                          blob[i].contentLength
-                                                      )}
-                                                      )
                                               </span>
                                           </div>
-                                          )
+                                      ))
-                                      )
                                     : ""}
                             </dt>
                             <dd className="govuk-summary-list__actions">
@@ -153,7 +175,16 @@ let BuildCheckSection = (props) => {
                     <a
                         className="govuk-button"
                         data-module="govuk-button"
-                        onClick={() => setCurrentSection(9999)}
+                        onClick={() => {
+                            setCurrentSection(9999),
+                                generateAppealPDF(
+                                    pdfObj,
+                                    props.props.accountDetails.containerID,
+                                    props.appealType.caseReference.ticketnumber,
+                                    router.query.appealtypes,
+                                    props.appealType.fileList
+                                );
+                        }}
                     >
                         {t("newappeal:submit-appeal-button")}
                     </a>

components/newappeal/buildsection.js

@@ -115,9 +115,9 @@ let BuildSection = (props) => {
 
         var dataObj = values;
 
-        for (let key in dataObj) {
+        // for (let key in dataObj) {
-            _.includes(key, "pinswg_fileUpload") == true && delete dataObj[key];
+        //     _.includes(key, "pinswg_fileUpload") == true && delete dataObj[key];
-        }
+        // }
 
         uploadFiles(
             dataObj,
@@ -177,20 +177,6 @@ let BuildSection = (props) => {
             "\n////////////////////////\n"
         );
 
-        let pdfObj = values;
-
-        Object.assign(pdfObj, {
-            "containerID": props.props.accountDetails.containerID,
-            "casefolderID": props.appealType.caseReference.ticketnumber,
-        });
-
-        generateAppealPDF(
-            pdfObj,
-            props.props.accountDetails.containerID,
-            props.appealType.caseReference.ticketnumber,
-            router.query.appealtypes,
-            props.appealType.fileList
-        ),
         props.setNewAppealProgress(
             getProgressObj(formXML, titleList, mandatoryFieldsData, props)
         );
@@ -270,6 +256,31 @@ let BuildSection = (props) => {
     const onHandleSubmit = (values) => {
         //if (currentSection == sectionCount) {
         let valuesObj = values || {};
+        let buildAppealFilesArray = [];
+        let filesUplaodObj = Object.keys(values)
+            .filter(function (k) {
+                return k.indexOf("pinswg_fileUpload") == 0;
+            })
+            .reduce(function (newData, k) {
+                newData[k] = values[k];
+                return newData;
+            }, {});
+
+        console.log(filesUplaodObj);
+
+        for (let key in filesUplaodObj) {
+            for (let j in filesUplaodObj[key]) {
+                buildAppealFilesArray.push({
+                    "name": filesUplaodObj[key][j].name,
+                    "size": filesUplaodObj[key][j].size,
+                });
+            }
+        }
+
+        console.log(buildAppealFilesArray);
+        setFilesForAppeal(buildAppealFilesArray);
+
+        // Object.assign(values, { "filesList": buildAppealFilesArray });
 
         delete valuesObj["_pinswg_appellant_value"];
         console.log("has errors:", props.invalid);

components/newappeal/createCase.js

@@ -17,38 +17,6 @@ import Aboutyou from "./aboutyou";
 import { createNewCase, createNewCaseBlob, consoleLogger } from "../../actions";
 import { FieldsTranslations } from "../elements";
 
-let CreateCase = (props) => {
-    // useEffect(() => {
-    //     window.scrollTo(0, 0);
-    // });
-
-    let { t } = useTranslation();
-
-    const router = useRouter();
-    const { locale } = router;
-
-    const { LPAData, onSubmit, handleSubmit, formData } = props;
-
-    const appealOptionsObj = _.isEmpty(props)
-        ? [{}]
-        : _.isEmpty(props.appealType)
-        ? [{}]
-        : _.isEmpty(props.appealType.appealTypeOptions)
-        ? [{}]
-        : _.isEmpty(props.appealType.appealTypeOptions.value)
-        ? [{}]
-        : props.appealType.appealTypeOptions.value;
-
-    let lpaOptionsObj = _.isEmpty(props)
-        ? [{}]
-        : _.isEmpty(props.LPAData)
-        ? [{}]
-        : _.isEmpty(props.LPAData.LPAData)
-        ? [{}]
-        : _.isEmpty(props.LPAData.LPAData)
-        ? [{}]
-        : props.LPAData.LPAData.value;
-
 const RenderLPAList = ({
     name,
     input,
@@ -57,6 +25,9 @@ let CreateCase = (props) => {
     label,
     errorMsg,
 }) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+
     return (
         <>
             <div
@@ -71,13 +42,8 @@ let CreateCase = (props) => {
                     {label}
                 </label>
                 {touched && error && (
-                        <span
+                    <span id={name + "-error"} className="govuk-error-message">
-                            id={name + "-error"}
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
                         {errorMsg}
                     </span>
                 )}
@@ -103,8 +69,7 @@ let CreateCase = (props) => {
                                           {router.locale == "cy"
                                               ? jsonpath(
                                                     '$..[?(@.value=="' +
-                                                            optionsObj[key]
+                                                        optionsObj[key].name +
-                                                                .name +
                                                         '")].value_cy',
                                                     transLookup
                                                 )
@@ -127,6 +92,8 @@ let CreateCase = (props) => {
     label,
     errorMsg,
 }) => {
+    let { t } = useTranslation();
+    const router = useRouter();
     return (
         <>
             <div
@@ -140,13 +107,8 @@ let CreateCase = (props) => {
                     {label}
                 </label>
                 {touched && error && (
-                        <span
+                    <span id={name + "-error"} className="govuk-error-message">
-                            id={name + "-error"}
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
                         {errorMsg}
                     </span>
                 )}
@@ -170,13 +132,10 @@ let CreateCase = (props) => {
                                           value={
                                               _.isEmpty(optionsObj[key])
                                                   ? ""
-                                                      : _.isEmpty(
+                                                  : _.isEmpty(optionsObj[key])
-                                                            optionsObj[key]
-                                                        )
                                                   ? ""
                                                   : _.isEmpty(
-                                                            optionsObj[key]
+                                                        optionsObj[key].value
-                                                                .value
                                                     )
                                                   ? ""
                                                   : optionsObj[key]
@@ -187,15 +146,12 @@ let CreateCase = (props) => {
                                               ? ""
                                               : _.isEmpty(optionsObj[key])
                                               ? ""
-                                                  : _.isEmpty(
+                                              : _.isEmpty(optionsObj[key].value)
-                                                        optionsObj[key].value
-                                                    )
                                               ? ""
                                               : router.locale == "cy"
                                               ? jsonpath(
                                                     '$..[?(@.value=="' +
-                                                            optionsObj[key]
+                                                        optionsObj[key].value +
-                                                                .value +
                                                         '")].value_cy',
                                                     transLookup
                                                 )
@@ -286,15 +242,13 @@ let CreateCase = (props) => {
                                     //     parseInt(options[key].split("|")[0])
                                     // }
                                     onChange={(e) => {
-                                            let docListObj =
+                                        let docListObj = custom.documentList;
-                                                custom.documentList;
                                         if (
                                             custom.requiredDocumentValue ==
                                             "Yes"
                                         ) {
                                             e.target.value != "846040000"
-                                                    ? (docListObj =
+                                                ? (docListObj = Object.assign(
-                                                          Object.assign(
                                                       docListObj,
                                                       {
                                                           ["documentCheckList_" +
@@ -303,12 +257,9 @@ let CreateCase = (props) => {
                                                       }
                                                   ))
                                                 : delete docListObj[
-                                                          "documentCheckList_" +
+                                                      "documentCheckList_" + id
-                                                              id
                                                   ];
-                                                custom.setDocumentsList(
+                                            custom.setDocumentsList(docListObj);
-                                                    docListObj
-                                                );
                                         }
                                     }}
                                 />
@@ -411,6 +362,38 @@ let CreateCase = (props) => {
     );
 }
 
+let CreateCase = (props) => {
+    // useEffect(() => {
+    //     window.scrollTo(0, 0);
+    // });
+
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { LPAData, onSubmit, handleSubmit, formData } = props;
+
+    const appealOptionsObj = _.isEmpty(props)
+        ? [{}]
+        : _.isEmpty(props.appealType)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions.value)
+        ? [{}]
+        : props.appealType.appealTypeOptions.value;
+
+    let lpaOptionsObj = _.isEmpty(props)
+        ? [{}]
+        : _.isEmpty(props.LPAData)
+        ? [{}]
+        : _.isEmpty(props.LPAData.LPAData)
+        ? [{}]
+        : _.isEmpty(props.LPAData.LPAData)
+        ? [{}]
+        : props.LPAData.LPAData.value;
+
     const required = (value) => (value ? undefined : "Required");
 
     const [formStep, setFormStep] = useState(0);

components/utils/index.js

@@ -228,8 +228,14 @@ export const getProgressObj = (
                 "totalFields": formObj[key].fieldsTotal,
                 "allFieldsComplete":
                     titleList[key].value == "Upload documents"
-                        ? _.has(props.props.appealType.fileList, "value") &&
+                        ? (_.has(props.props.appealType.fileList, "value") &&
-                          props.props.appealType.fileList.value.length > 0
+                              props.props.appealType.fileList.value.length >
+                                  0) ||
+                          (_.has(props.props.form.appealForm, "values") &&
+                              Object.keys(
+                                  props.props.form.appealForm.values
+                              ).filter((k) => k.startsWith("pinswg_fileUpload"))
+                                  .length > 0)
                         : rowCount == formObj[key].fieldsTotal,
             };
         });

package.json

@@ -71,7 +71,7 @@
         "react-quill": "^2.0.0",
         "react-redux": "^7.2.6",
         "redux": "^4.2.1",
-        "redux-form": "^8.3.9",
+        "redux-form": "^8.3.10",
         "redux-persist": "^6.0.0",
         "redux-thunk": "^2.4.2",
         "sass": "1.69",

store/appealType/reducer.js

@@ -9,7 +9,7 @@ const appealTypeDataInitialState = {
     caseReference: {},
     formComplete: "false",
     documentList: {},
-    fileList: {},
+    fileList: [],
     progress: [],
 };
 

styles/sass/welshgov/_application.scss

@@ -432,6 +432,7 @@ textarea,
     background-color: #fff;
     padding: 7px 15px;
     border: 1px solid #666666;
+    min-width: 15rem;
 
     &:focus {
         outline: 2px solid #ffdd00;