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(
+                                          <div
-                                          (blob, i) => (
+                                              key={blob.name + "_" + i}
-                                              <div
+                                              className="govuk-!-margin-bottom-5 fileThumb "
-                                                  key={blob.name + "_" + i}
+                                          >
-                                                  className="govuk-!-margin-bottom-5 fileThumb "
+                                              <img
-                                              >
+                                                  src={getThumbnailIconByExtension(
-                                                  <img
+                                                      blob.name
-                                                      src={getThumbnailIconByExtension(
+                                                  )}
-                                                          blob[i].name
+                                                  alt={blob.name.slice(
-                                                      )}
+                                                      blob.name.indexOf("_") + 1
-                                                      alt={blob[i].name.slice(
+                                                  )}
-                                                          blob[i].name.indexOf(
+                                                  width="50"
-                                                              "_"
+                                              />
-                                                          ) + 1
-                                                      )}
-                                                      width="50"
-                                                  />
 
-                                                  <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
+                                              <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)})
-                                                      )}
+                                              </span>
-                                                      (
+                                          </div>
-                                                      {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,23 +177,9 @@ let BuildSection = (props) => {
             "\n////////////////////////\n"
         );
 
-        let pdfObj = values;
+        props.setNewAppealProgress(
-
+            getProgressObj(formXML, titleList, mandatoryFieldsData, props)
-        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)
-            );
 
         let appTypeCollection = getFormCollectionByID(
             props.appealType.appealTypeID
@@ -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,6 +17,351 @@ import Aboutyou from "./aboutyou";
 import { createNewCase, createNewCaseBlob, consoleLogger } from "../../actions";
 import { FieldsTranslations } from "../elements";
 
+const RenderLPAList = ({
+    name,
+    input,
+    optionsObj,
+    meta: { touched, error },
+    label,
+    errorMsg,
+}) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                {" "}
+                <label className="govuk-label" htmlFor="lpatypes">
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={name + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {errorMsg}
+                    </span>
+                )}
+                <div>
+                    <select
+                        {...input}
+                        className="govuk-select govuk-input--error"
+                        id="lpatypes"
+                        name="lpatypes"
+                        //onChange={(e) => props.onChangeSelectLPA(e)}
+                    >
+                        <option value="" disabled defaultValue>
+                            {t("common:drop-down-select")}
+                        </option>
+                        {_.isEmpty(optionsObj)
+                            ? ""
+                            : Object.keys(optionsObj).map((key, index) => {
+                                  return (
+                                      <option
+                                          key={key}
+                                          value={optionsObj[key].accountid}
+                                      >
+                                          {router.locale == "cy"
+                                              ? jsonpath(
+                                                    '$..[?(@.value=="' +
+                                                        optionsObj[key].name +
+                                                        '")].value_cy',
+                                                    transLookup
+                                                )
+                                              : optionsObj[key].name}
+                                      </option>
+                                  );
+                              })}
+                    </select>
+                </div>
+            </div>
+        </>
+    );
+};
+
+const RenderAppealTypeList = ({
+    name,
+    input,
+    optionsObj,
+    meta: { touched, error },
+    label,
+    errorMsg,
+}) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label" htmlFor="appealTypes">
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={name + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {errorMsg}
+                    </span>
+                )}
+                <div>
+                    <select
+                        {...input}
+                        className="govuk-select"
+                        id="appealTypes"
+                        name={name}
+                        //onChange={(e) => props.onChangeSelectAppealType(e)}
+                    >
+                        <option value="" disabled defaultValue>
+                            {t("common:drop-down-select")}
+                        </option>
+                        {_.isEmpty(optionsObj)
+                            ? ""
+                            : Object.keys(optionsObj).map((key, index) => {
+                                  return (
+                                      <option
+                                          key={key}
+                                          value={
+                                              _.isEmpty(optionsObj[key])
+                                                  ? ""
+                                                  : _.isEmpty(optionsObj[key])
+                                                  ? ""
+                                                  : _.isEmpty(
+                                                        optionsObj[key].value
+                                                    )
+                                                  ? ""
+                                                  : optionsObj[key]
+                                                        .attributevalue
+                                          }
+                                      >
+                                          {_.isEmpty(optionsObj[key])
+                                              ? ""
+                                              : _.isEmpty(optionsObj[key])
+                                              ? ""
+                                              : _.isEmpty(optionsObj[key].value)
+                                              ? ""
+                                              : router.locale == "cy"
+                                              ? jsonpath(
+                                                    '$..[?(@.value=="' +
+                                                        optionsObj[key].value +
+                                                        '")].value_cy',
+                                                    transLookup
+                                                )
+                                              : optionsObj[key].value}
+                                      </option>
+                                  );
+                              })}
+                    </select>
+                </div>
+            </div>
+        </>
+    );
+};
+
+const RenderRadio = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    let { t } = useTranslation();
+    const required = (value) => (value ? undefined : "Required");
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    aria-describedby={datafieldname + "-hint"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading govuk-body-m"
+                            id={id + "_label"}
+                        >
+                            {label}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div
+                        className={
+                            custom.inline == false
+                                ? "govuk-radios govuk-radios--small"
+                                : "govuk-radios govuk-radios--inline govuk-radios--small"
+                        }
+                    >
+                        {" "}
+                        {custom.hint != undefined && (
+                            <div className="govuk-hint">{custom.hint}</div>
+                        )}
+                        {Object.keys(options).map((key, index) => (
+                            <div
+                                className="govuk-radios__item"
+                                data-children-count={key}
+                                key={key}
+                            >
+                                <Field
+                                    id={id + "_" + index}
+                                    name={id}
+                                    component="input"
+                                    type="radio"
+                                    hint={custom.hint}
+                                    className="govuk-radios__input"
+                                    value={options[key].split("|")[0]}
+                                    validate={[required]}
+                                    // checked={
+                                    //     value ==
+                                    //     parseInt(options[key].split("|")[0])
+                                    // }
+                                    onChange={(e) => {
+                                        let docListObj = custom.documentList;
+                                        if (
+                                            custom.requiredDocumentValue ==
+                                            "Yes"
+                                        ) {
+                                            e.target.value != "846040000"
+                                                ? (docListObj = Object.assign(
+                                                      docListObj,
+                                                      {
+                                                          ["documentCheckList_" +
+                                                          id]:
+                                                              custom.requiredDocumentLabel,
+                                                      }
+                                                  ))
+                                                : delete docListObj[
+                                                      "documentCheckList_" + id
+                                                  ];
+                                            custom.setDocumentsList(docListObj);
+                                        }
+                                    }}
+                                />
+                                <label
+                                    className="govuk-label govuk-radios__label"
+                                    htmlFor={id + "_" + index}
+                                >
+                                    {t(options[key].split("|")[1])}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </fieldset>
+            </div>
+        </>
+    );
+};
+
+function Radiofield(props) {
+    const {
+        name,
+        label,
+        datafieldname,
+        parentField,
+        form,
+        formProps,
+        parentFieldShowOnValue,
+        validation,
+    } = props;
+
+    const router = useRouter();
+    const required = (value) => (value ? undefined : "Required");
+    // console.log(props.options);
+
+    const fieldOptions = props.options
+        .slice(1, props.options.length - 1)
+        .split(",");
+
+    //parentFieldShowOnValue
+    var showIfHasParentShowValue = parentField != false;
+    //debugger;
+    // parentField != false &&
+    // !_.isEmpty(formProps[form]) &&
+    // _.has(formProps[form].values, parentField) &&
+    // parentFieldShowOnValue.indexOf(
+    //     formProps[form].values[parentField].toString()
+    // ) > -1;
+
+    (showIfHasParentShowValue == parentField) != false &&
+        showIfHasParentShowValue;
+
+    // console.log(
+    //     datafieldname,
+    //     showIfHasParentShowValue,
+    //     formProps[form].values[parentField]
+    // );
+
+    return (
+        <>
+            {parentField != false ? (
+                showIfHasParentShowValue && (
+                    <Field
+                        name={name}
+                        datafieldname={datafieldname}
+                        label={label}
+                        options={fieldOptions}
+                        id={name}
+                        validate={[required]}
+                        errorMsg={t("newappeal:select-an-option-label")}
+                        component={RenderRadio}
+                        inline={props.inline}
+                        hint={props.hint}
+                        //validate={eval(validation)}
+                        requiredDocumentLabel={props.requiredDocumentLabel}
+                        requiredDocumentValue={props.requiredDocumentValue}
+                        setDocumentsList={props.setDocumentsList}
+                        documentList={props.documentList}
+                    />
+                )
+            ) : (
+                <Field
+                    name={name}
+                    datafieldname={datafieldname}
+                    label={label}
+                    options={fieldOptions}
+                    id={name}
+                    validate={[required]}
+                    errorMsg={t("newappeal:select-an-option-label")}
+                    component={RenderRadio}
+                    inline={props.inline}
+                    hint={props.hint}
+                    //validate={eval(validation)}
+                    requiredDocumentLabel={props.requiredDocumentLabel}
+                    requiredDocumentValue={props.requiredDocumentValue}
+                    setDocumentsList={props.setDocumentsList}
+                    documentList={props.documentList}
+                />
+            )}
+        </>
+    );
+}
+
 let CreateCase = (props) => {
     // useEffect(() => {
     //     window.scrollTo(0, 0);
@@ -49,368 +394,6 @@ let CreateCase = (props) => {
         ? [{}]
         : props.LPAData.LPAData.value;
 
-    const RenderLPAList = ({
-        name,
-        input,
-        optionsObj,
-        meta: { touched, error },
-        label,
-        errorMsg,
-    }) => {
-        return (
-            <>
-                <div
-                    className={
-                        touched && error
-                            ? "govuk-form-group govuk-form-group--error"
-                            : "govuk-form-group "
-                    }
-                >
-                    {" "}
-                    <label className="govuk-label" htmlFor="lpatypes">
-                        {label}
-                    </label>
-                    {touched && error && (
-                        <span
-                            id={name + "-error"}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
-                            {errorMsg}
-                        </span>
-                    )}
-                    <div>
-                        <select
-                            {...input}
-                            className="govuk-select govuk-input--error"
-                            id="lpatypes"
-                            name="lpatypes"
-                            //onChange={(e) => props.onChangeSelectLPA(e)}
-                        >
-                            <option value="" disabled defaultValue>
-                                {t("common:drop-down-select")}
-                            </option>
-                            {_.isEmpty(optionsObj)
-                                ? ""
-                                : Object.keys(optionsObj).map((key, index) => {
-                                      return (
-                                          <option
-                                              key={key}
-                                              value={optionsObj[key].accountid}
-                                          >
-                                              {router.locale == "cy"
-                                                  ? jsonpath(
-                                                        '$..[?(@.value=="' +
-                                                            optionsObj[key]
-                                                                .name +
-                                                            '")].value_cy',
-                                                        transLookup
-                                                    )
-                                                  : optionsObj[key].name}
-                                          </option>
-                                      );
-                                  })}
-                        </select>
-                    </div>
-                </div>
-            </>
-        );
-    };
-
-    const RenderAppealTypeList = ({
-        name,
-        input,
-        optionsObj,
-        meta: { touched, error },
-        label,
-        errorMsg,
-    }) => {
-        return (
-            <>
-                <div
-                    className={
-                        touched && error
-                            ? "govuk-form-group govuk-form-group--error"
-                            : "govuk-form-group "
-                    }
-                >
-                    <label className="govuk-label" htmlFor="appealTypes">
-                        {label}
-                    </label>
-                    {touched && error && (
-                        <span
-                            id={name + "-error"}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
-                            {errorMsg}
-                        </span>
-                    )}
-                    <div>
-                        <select
-                            {...input}
-                            className="govuk-select"
-                            id="appealTypes"
-                            name={name}
-                            //onChange={(e) => props.onChangeSelectAppealType(e)}
-                        >
-                            <option value="" disabled defaultValue>
-                                {t("common:drop-down-select")}
-                            </option>
-                            {_.isEmpty(optionsObj)
-                                ? ""
-                                : Object.keys(optionsObj).map((key, index) => {
-                                      return (
-                                          <option
-                                              key={key}
-                                              value={
-                                                  _.isEmpty(optionsObj[key])
-                                                      ? ""
-                                                      : _.isEmpty(
-                                                            optionsObj[key]
-                                                        )
-                                                      ? ""
-                                                      : _.isEmpty(
-                                                            optionsObj[key]
-                                                                .value
-                                                        )
-                                                      ? ""
-                                                      : optionsObj[key]
-                                                            .attributevalue
-                                              }
-                                          >
-                                              {_.isEmpty(optionsObj[key])
-                                                  ? ""
-                                                  : _.isEmpty(optionsObj[key])
-                                                  ? ""
-                                                  : _.isEmpty(
-                                                        optionsObj[key].value
-                                                    )
-                                                  ? ""
-                                                  : router.locale == "cy"
-                                                  ? jsonpath(
-                                                        '$..[?(@.value=="' +
-                                                            optionsObj[key]
-                                                                .value +
-                                                            '")].value_cy',
-                                                        transLookup
-                                                    )
-                                                  : optionsObj[key].value}
-                                          </option>
-                                      );
-                                  })}
-                        </select>
-                    </div>
-                </div>
-            </>
-        );
-    };
-
-    const RenderRadio = ({
-        datafieldname,
-        name,
-        label,
-        id,
-        errorMsg,
-        options,
-        input: { onChange, value },
-        meta: { touched, error },
-        ...custom
-    }) => {
-        let { t } = useTranslation();
-        const required = (value) => (value ? undefined : "Required");
-        return (
-            <>
-                <div
-                    className={
-                        touched && error
-                            ? "govuk-form-group govuk-form-group--error"
-                            : "govuk-form-group "
-                    }
-                >
-                    <fieldset
-                        className="govuk-fieldset"
-                        aria-describedby={datafieldname + "-hint"}
-                    >
-                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                            <label
-                                className="govuk-fieldset__heading govuk-body-m"
-                                id={id + "_label"}
-                            >
-                                {label}
-                            </label>
-                        </legend>
-                        {touched && error && (
-                            <span
-                                id={id + "-error"}
-                                className="govuk-error-message"
-                            >
-                                <span className="govuk-visually-hidden">
-                                    Error:
-                                </span>{" "}
-                                {errorMsg}
-                            </span>
-                        )}
-                        <div
-                            className={
-                                custom.inline == false
-                                    ? "govuk-radios govuk-radios--small"
-                                    : "govuk-radios govuk-radios--inline govuk-radios--small"
-                            }
-                        >
-                            {" "}
-                            {custom.hint != undefined && (
-                                <div className="govuk-hint">{custom.hint}</div>
-                            )}
-                            {Object.keys(options).map((key, index) => (
-                                <div
-                                    className="govuk-radios__item"
-                                    data-children-count={key}
-                                    key={key}
-                                >
-                                    <Field
-                                        id={id + "_" + index}
-                                        name={id}
-                                        component="input"
-                                        type="radio"
-                                        hint={custom.hint}
-                                        className="govuk-radios__input"
-                                        value={options[key].split("|")[0]}
-                                        validate={[required]}
-                                        // checked={
-                                        //     value ==
-                                        //     parseInt(options[key].split("|")[0])
-                                        // }
-                                        onChange={(e) => {
-                                            let docListObj =
-                                                custom.documentList;
-                                            if (
-                                                custom.requiredDocumentValue ==
-                                                "Yes"
-                                            ) {
-                                                e.target.value != "846040000"
-                                                    ? (docListObj =
-                                                          Object.assign(
-                                                              docListObj,
-                                                              {
-                                                                  ["documentCheckList_" +
-                                                                  id]:
-                                                                      custom.requiredDocumentLabel,
-                                                              }
-                                                          ))
-                                                    : delete docListObj[
-                                                          "documentCheckList_" +
-                                                              id
-                                                      ];
-                                                custom.setDocumentsList(
-                                                    docListObj
-                                                );
-                                            }
-                                        }}
-                                    />
-                                    <label
-                                        className="govuk-label govuk-radios__label"
-                                        htmlFor={id + "_" + index}
-                                    >
-                                        {t(options[key].split("|")[1])}
-                                    </label>
-                                </div>
-                            ))}
-                        </div>
-                    </fieldset>
-                </div>
-            </>
-        );
-    };
-
-    function Radiofield(props) {
-        const {
-            name,
-            label,
-            datafieldname,
-            parentField,
-            form,
-            formProps,
-            parentFieldShowOnValue,
-            validation,
-        } = props;
-
-        const router = useRouter();
-        const required = (value) => (value ? undefined : "Required");
-        // console.log(props.options);
-
-        const fieldOptions = props.options
-            .slice(1, props.options.length - 1)
-            .split(",");
-
-        //parentFieldShowOnValue
-        var showIfHasParentShowValue = parentField != false;
-        //debugger;
-        // parentField != false &&
-        // !_.isEmpty(formProps[form]) &&
-        // _.has(formProps[form].values, parentField) &&
-        // parentFieldShowOnValue.indexOf(
-        //     formProps[form].values[parentField].toString()
-        // ) > -1;
-
-        (showIfHasParentShowValue == parentField) != false &&
-            showIfHasParentShowValue;
-
-        // console.log(
-        //     datafieldname,
-        //     showIfHasParentShowValue,
-        //     formProps[form].values[parentField]
-        // );
-
-        return (
-            <>
-                {parentField != false ? (
-                    showIfHasParentShowValue && (
-                        <Field
-                            name={name}
-                            datafieldname={datafieldname}
-                            label={label}
-                            options={fieldOptions}
-                            id={name}
-                            validate={[required]}
-                            errorMsg={t("newappeal:select-an-option-label")}
-                            component={RenderRadio}
-                            inline={props.inline}
-                            hint={props.hint}
-                            //validate={eval(validation)}
-                            requiredDocumentLabel={props.requiredDocumentLabel}
-                            requiredDocumentValue={props.requiredDocumentValue}
-                            setDocumentsList={props.setDocumentsList}
-                            documentList={props.documentList}
-                        />
-                    )
-                ) : (
-                    <Field
-                        name={name}
-                        datafieldname={datafieldname}
-                        label={label}
-                        options={fieldOptions}
-                        id={name}
-                        validate={[required]}
-                        errorMsg={t("newappeal:select-an-option-label")}
-                        component={RenderRadio}
-                        inline={props.inline}
-                        hint={props.hint}
-                        //validate={eval(validation)}
-                        requiredDocumentLabel={props.requiredDocumentLabel}
-                        requiredDocumentValue={props.requiredDocumentValue}
-                        setDocumentsList={props.setDocumentsList}
-                        documentList={props.documentList}
-                    />
-                )}
-            </>
-        );
-    }
-
     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;