Merged PR 2261: added in text and ui redesign for rep type selection

added in text and ui redesign for rep type selection

Related work items: #22574

.env.local

@@ -272,3 +272,5 @@ SHOWSIPS = true
 
 ALLOWED_IPS=::1,203.0.113.42,198.51.100.17
 UPLOAD_BATCH_COUNT = 5
+
+NRWDOMAIN = rdbmedia.co.uk

components/case/representation/consultationAgent.js

@@ -2,22 +2,22 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
     RenderCondtionalRadioList,
-    RenderPickList,
     RenderRichMultiline,
-    shouldDisableButton,
+    shouldDisableButton
 } from "./representationElements";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 
 import { useDropzone } from "react-dropzone";
 import {
     setRepresentationCapacity,
     setRepresentationSubmit,
-    setFilesForRepresentations,
+    setFilesForRepresentations
 } from "../../../store/currentView/action";
 
 const ConsultationAgent = (props) => {
@@ -36,9 +36,23 @@ const ConsultationAgent = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     if (JSON.stringify(formObj) != "{}") {
         setRepFileName(formObj.representationForm.values);
 
@@ -63,63 +77,43 @@ const ConsultationAgent = (props) => {
         ));
         const required = (value) => (value ? undefined : "Required");
 
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
+
+        const selectedRepresentationTypeDisplay =
+            router.locale == "cy"
+                ? selectedRepresentationType == "Questionnaire"
+                    ? "Holiadur"
+                    : selectedRepresentationType == "Statement"
+                      ? "Datganiad"
+                      : selectedRepresentationType == "Final comments"
+                        ? "Sylwadau terfynol"
+                        : selectedRepresentationType
+                : selectedRepresentationType;
+
         return (
             <>
-                <div className="govuk-grid-row">
+                <RepresentationTypeSelectorBlock
-                    <div className="govuk-form-group">
+                    t={t}
-                        {typeof formObj.representationForm.values
+                    headingText={t(
-                            .representationType == "undefined" &&
-                        props.representationType != "Select..." ? (
-                            <>
-                                <h2 className="govuk-heading-m ">
-                                    {t(
                         "myrepresentations:consultation-from-an-agent-heading"
                     )}
-                                </h2>
+                    kindLabelText={t(
-
-                                <label
-                                    className="govuk-label govuk-body-m"
-                                    htmlFor="representationType"
-                                >
-                                    {t(
                         "myrepresentations:kind-of-consultation-label"
                     )}
-                                </label>
+                    isTypeSelected={isTypeConfirmed}
-
+                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
-                                <Field
+                    representationType={selectedRepresentationType}
-                                    name="representationType"
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
-                                    component={RenderPickList}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
-                                    datafieldname="representationType"
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
-                                    optionsArr={
+                    optionsArr={appellantApplicantRepresentationArr}
-                                        appellantApplicantRepresentationArr
-                                    }
                 />
-                            </>
+                {isTypeConfirmed && (
-                        ) : (
-                            <label className="govuk-label govuk-body-m">
-                                {t("myrepresentations:representation-type")}:{" "}
-                                {router.locale == "cy"
-                                    ? formObj.representationForm.values
-                                          .representationType == "Questionnaire"
-                                        ? "Holiadur"
-                                        : formObj.representationForm.values
-                                              .representationType == "Statement"
-                                        ? "Datganiad"
-                                        : formObj.representationForm.values
-                                              .representationType ==
-                                          "Final comments"
-                                        ? "Sylwadau terfynol"
-                                        : formObj.representationForm.values
-                                              .representationType
-                                    : formObj.representationForm.values
-                                          .representationType}
-                            </label>
-                        )}
-                    </div>
-                </div>
-                {(typeof props.representationType != "undefined" ||
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
                     <>
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
@@ -146,8 +140,7 @@ const ConsultationAgent = (props) => {
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
                                 <p className="govuk-body">
-                                    {formObj.representationForm.values
+                                    {selectedRepresentationType ==
-                                        .representationType ==
                                     "Consultation Response"
                                         ? t(
                                               "myrepresentations:enter-comment-label"
@@ -160,8 +153,7 @@ const ConsultationAgent = (props) => {
                                     className="govuk-fieldset"
                                     aria-describedby="commentBox-hint"
                                 >
-                                    {formObj.representationForm.values
+                                    {selectedRepresentationType ==
-                                        .representationType ==
                                         "Consultation Response" && (
                                         <div className="govuk-form-group">
                                             <Field
@@ -265,8 +257,7 @@ const ConsultationAgent = (props) => {
                         </div>
                     </>
                 )}
-                {typeof formObj.representationForm.values.representationType !=
+                {isTypeConfirmed && (
-                    "undefined" && (
                     <div className="govuk-grid-row">
                         <div className="govuk-button-group">
                             <button
@@ -275,7 +266,7 @@ const ConsultationAgent = (props) => {
                                 data-module="govuk-button"
                                 disabled={shouldDisableButton({
                                     props,
-                                    formObj,
+                                    formObj
                                 })}
                             >
                                 {t("common:continue-button")}
@@ -349,7 +340,7 @@ const mapDispatchToProps = (dispatch) => ({
 
     setFilesForRepresentations: (fileList) => {
         dispatch(setFilesForRepresentations(fileList));
-    },
+    }
 });
 
 export default connect(
@@ -359,6 +350,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(ConsultationAgent)
 );

components/case/representation/consultationAppellant.js

@@ -2,21 +2,21 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
-    RenderPickList,
     RenderRichMultiline,
-    shouldDisableButton,
+    shouldDisableButton
 } from "./representationElements";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 
 import { useDropzone } from "react-dropzone";
 import {
     setRepresentationCapacity,
     setRepresentationSubmit,
-    setFilesForRepresentations,
+    setFilesForRepresentations
 } from "../../../store/currentView/action";
 
 const ConsultationAppellant = (props) => {
@@ -35,9 +35,23 @@ const ConsultationAppellant = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     console.log(JSON.stringify(formObj) == "{}" ? "empty" : "value");
 
     if (JSON.stringify(formObj) != "{}") {
@@ -62,66 +76,47 @@ const ConsultationAppellant = (props) => {
                 index === self.findIndex((t) => t.name === value.name)
         );
 
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
+
+        const selectedRepresentationTypeDisplay =
+            router.locale == "cy"
+                ? selectedRepresentationType == "Questionnaire"
+                    ? "Holiadur"
+                    : selectedRepresentationType == "Statement"
+                      ? "Datganiad"
+                      : selectedRepresentationType == "Final comments"
+                        ? "Sylwadau terfynol"
+                        : selectedRepresentationType
+                : selectedRepresentationType;
+
         return (
             <>
-                <div className="govuk-grid-row">
+                <RepresentationTypeSelectorBlock
-                    <div className="govuk-form-group">
+                    t={t}
-                        {typeof formObj.representationForm.values
+                    headingText={t(
-                            .representationType == "undefined" &&
-                        props.representationType != "Select..." ? (
-                            <>
-                                <h2 className="govuk-heading-m ">
-                                    {t(
                         "myrepresentations:consultation-from-an-appellant-heading"
                     )}
-                                </h2>
+                    kindLabelText={t(
-                                <label
-                                    className="govuk-label govuk-body-m"
-                                    htmlFor="representationType"
-                                >
-                                    {t(
                         "myrepresentations:kind-of-consultation-label"
                     )}
-                                </label>
+                    isTypeSelected={isTypeConfirmed}
-                                <Field
+                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
-                                    name="representationType"
+                    representationType={selectedRepresentationType}
-                                    component={RenderPickList}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
-                                    datafieldname="representationType"
+                    onRepresentationTypeChange={onRepresentationTypeChange}
-                                    optionsArr={
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
-                                        appellantApplicantRepresentationArr
+                    optionsArr={appellantApplicantRepresentationArr}
-                                    }
                 />
-                            </>
+                {isTypeConfirmed && (
-                        ) : (
-                            <label className="govuk-label govuk-body-m">
-                                {t("myrepresentations:representation-type")}:{" "}
-                                {router.locale == "cy"
-                                    ? formObj.representationForm.values
-                                          .representationType == "Questionnaire"
-                                        ? "Holiadur"
-                                        : formObj.representationForm.values
-                                              .representationType == "Statement"
-                                        ? "Datganiad"
-                                        : formObj.representationForm.values
-                                              .representationType ==
-                                          "Final comments"
-                                        ? "Sylwadau terfynol"
-                                        : formObj.representationForm.values
-                                              .representationType
-                                    : formObj.representationForm.values
-                                          .representationType}
-                            </label>
-                        )}
-                    </div>
-                </div>
-                {(typeof props.representationType != "undefined" ||
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
                     <div className="govuk-grid-row">
                         <div className="govuk-form-group">
                             <p className="govuk-body">
-                                {formObj.representationForm.values
+                                {selectedRepresentationType ==
-                                    .representationType ==
                                 "Consultation Response"
                                     ? t("myrepresentations:enter-comment-label")
                                     : t(
@@ -132,8 +127,7 @@ const ConsultationAppellant = (props) => {
                                 className="govuk-fieldset"
                                 aria-describedby="commentBox-hint"
                             >
-                                {formObj.representationForm.values
+                                {selectedRepresentationType ==
-                                    .representationType ==
                                     "Consultation Response" && (
                                     <div className="govuk-form-group">
                                         <Field
@@ -233,8 +227,7 @@ const ConsultationAppellant = (props) => {
                     </div>
                 )}
 
-                {typeof formObj.representationForm.values.representationType !=
+                {isTypeConfirmed && (
-                    "undefined" && (
                     <div className="govuk-grid-row">
                         <div className="govuk-button-group">
                             <button
@@ -243,7 +236,7 @@ const ConsultationAppellant = (props) => {
                                 data-module="govuk-button"
                                 disabled={shouldDisableButton({
                                     props,
-                                    formObj,
+                                    formObj
                                 })}
                             >
                                 {t("common:continue-button")}
@@ -253,7 +246,6 @@ const ConsultationAppellant = (props) => {
                                 onClick={() => {
                                     setRepresentationCapacity();
                                     props.updateField(
-                                        "representationForm",
                                         "representationType",
                                         ""
                                     );
@@ -321,7 +313,7 @@ const mapDispatchToProps = (dispatch) => {
 
         setFilesForRepresentations: (fileList) => {
             dispatch(setFilesForRepresentations(fileList));
-        },
+        }
     };
 };
 
@@ -332,6 +324,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(ConsultationAppellant)
 );

components/case/representation/consultationInterestedPartyPerson.js

@@ -2,22 +2,22 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
     RenderCondtionalRadioList,
-    RenderPickList,
     RenderRichMultiline,
-    shouldDisableButton,
+    shouldDisableButton
 } from "./representationElements";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 
 import { useDropzone } from "react-dropzone";
 import {
     setRepresentationCapacity,
     setRepresentationSubmit,
-    setFilesForRepresentations,
+    setFilesForRepresentations
 } from "../../../store/currentView/action";
 
 const ConsultationInterestedPartyPerson = (props) => {
@@ -35,11 +35,25 @@ const ConsultationInterestedPartyPerson = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const required = (value) => (value ? undefined : "Required");
 
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        props.currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     if (JSON.stringify(formObj) != "{}") {
         setRepFileName(formObj.representationForm.values);
 
@@ -62,67 +76,46 @@ const ConsultationInterestedPartyPerson = (props) => {
                 {file.path} - {file.size} bytes
             </li>
         ));
+
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
+
+        const selectedRepresentationTypeDisplay =
+            router.locale == "cy"
+                ? selectedRepresentationType == "Questionnaire"
+                    ? "Holiadur"
+                    : selectedRepresentationType == "Statement"
+                      ? "Datganiad"
+                      : selectedRepresentationType == "Final comments"
+                        ? "Sylwadau terfynol"
+                        : selectedRepresentationType
+                : selectedRepresentationType;
+
         return (
             <>
-                <div className="govuk-grid-row">
+                <RepresentationTypeSelectorBlock
-                    <div className="govuk-form-group">
+                    t={t}
-                        {typeof formObj.representationForm.values
+                    headingText={t(
-                            .representationType == "undefined" &&
-                        props.representationType != "Select..." ? (
-                            <>
-                                <h2 className="govuk-heading-m ">
-                                    {t(
                         "myrepresentations:consultation-from-an-interested-person-heading"
                     )}
-                                </h2>
+                    kindLabelText={t(
-
-                                <label
-                                    className="govuk-label govuk-body-m"
-                                    htmlFor="representationType"
-                                >
-                                    {t(
                         "myrepresentations:kind-of-consultation-label"
                     )}
-                                </label>
+                    isTypeSelected={isTypeConfirmed}
-
+                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
-                                <Field
+                    representationType={selectedRepresentationType}
-                                    name="representationType"
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
-                                    component={RenderPickList}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
-                                    datafieldname="representationType"
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
+                    optionsArr={interestedPersonRepresentationArr}
                     validate={[required]}
-                                    optionsArr={
+                    errorMsg={t("myrepresentations:select-an-option-label")}
-                                        interestedPersonRepresentationArr
-                                    }
-                                    errorMsg={t(
-                                        "myrepresentations:select-an-option-label"
-                                    )}
                 />
-                            </>
+                {isTypeConfirmed && (
-                        ) : (
-                            <label className="govuk-label govuk-body-m">
-                                {t("myrepresentations:representation-type")}:{" "}
-                                {router.locale == "cy"
-                                    ? formObj.representationForm.values
-                                          .representationType == "Questionnaire"
-                                        ? "Holiadur"
-                                        : formObj.representationForm.values
-                                              .representationType == "Statement"
-                                        ? "Datganiad"
-                                        : formObj.representationForm.values
-                                              .representationType ==
-                                          "Final comments"
-                                        ? "Sylwadau terfynol"
-                                        : formObj.representationForm.values
-                                              .representationType
-                                    : formObj.representationForm.values
-                                          .representationType}
-                            </label>
-                        )}
-                    </div>
-                </div>
-                {(typeof props.representationType != "undefined" ||
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
                     <>
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
@@ -134,7 +127,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                                         t(
                                             "myrepresentations:questionnaire-yes"
                                         ),
-                                        t("myrepresentations:questionnaire-no"),
+                                        t("myrepresentations:questionnaire-no")
                                     ]}
                                     id="representationOnBehalfOf"
                                     className="govuk-radios__input"
@@ -154,8 +147,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
                                 <p className="govuk-body">
-                                    {formObj.representationForm.values
+                                    {selectedRepresentationType ==
-                                        .representationType ==
                                     "Consultation Response"
                                         ? t(
                                               "myrepresentations:enter-comment-label"
@@ -169,8 +161,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                                     aria-describedby="commentBox-hint"
                                 >
                                     {" "}
-                                    {formObj.representationForm.values
+                                    {selectedRepresentationType ==
-                                        .representationType ==
                                         "Consultation Response" && (
                                         <div className="govuk-form-group">
                                             <Field
@@ -274,8 +265,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                         </div>
                     </>
                 )}
-                {typeof formObj.representationForm.values.representationType !=
+                {isTypeConfirmed && (
-                    "undefined" && (
                     <div className="govuk-grid-row">
                         <div className="govuk-button-group">
                             <button
@@ -284,7 +274,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                                 data-module="govuk-button"
                                 disabled={shouldDisableButton({
                                     props,
-                                    formObj,
+                                    formObj
                                 })}
                             >
                                 {t("common:continue-button")}
@@ -363,7 +353,7 @@ const mapDispatchToProps = (dispatch) => ({
         dispatch(change(form, field, newValue)),
     setFilesForRepresentations: (fileList) => {
         dispatch(setFilesForRepresentations(fileList));
-    },
+    }
 });
 
 export default connect(
@@ -373,6 +363,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(ConsultationInterestedPartyPerson)
 );

components/case/representation/elements/RepresentationTypeSelectorBlock.js

@@ -1,17 +1,131 @@
 import { Field } from "redux-form";
+import router from "next/router";
+import Link from "next/link";
 
-import { RenderPickList } from "../representationElements";
+const getRepresentationTypeHint = (option, t) => {
+    const map = {
+        "Statement": t("myrepresentations:rep-type-statement-hint"),
+        "Final comments": t("myrepresentations:rep-type-final-comments-hint"),
+        "Questionnaire": t("myrepresentations:rep-type-questionnaire-hint"),
+        "Consultation Response": t(
+            "myrepresentations:rep-type-consultation-hint"
+        ),
+        "Local Impact Report": t("myrepresentations:rep-type-lir-hint"),
+        "Marine Impact Report": t("myrepresentations:rep-type-mir-hint")
+    };
 
+    return map[option] || "";
+};
+
+const getRepresentationTypeLabel = (option) => {
+    if (router.locale !== "cy") {
+        return option;
+    }
+
+    if (option === "Questionnaire") {
+        return "Holiadur";
+    }
+
+    if (option === "Statement") {
+        return "Datganiad";
+    }
+
+    if (option === "Final comments") {
+        return "Sylwadau terfynol";
+    }
+
+    return option;
+};
+
+const RenderRepresentationTypeRadioList = ({
+    name,
+    optionsArr,
+    errorMsg,
+    onRepresentationTypeChange,
+    input,
+    meta: { touched, error }
+}) => {
+    return (
+        <div
+            className={
+                touched && error
+                    ? "govuk-form-group govuk-form-group--error"
+                    : "govuk-form-group"
+            }
+        >
+            {touched && error && (
+                <span id={`${name}-error`} className="govuk-error-message">
+                    <span className="govuk-visually-hidden">Error:</span>{" "}
+                    {errorMsg}
+                </span>
+            )}
+
+            <div className="govuk-radios govuk-radios--small">
+                {optionsArr.map((option, index) => {
+                    const optionId = `${name}_${index}`;
+                    const hintId = `${optionId}-hint`;
+
+                    return (
+                        <div className="govuk-radios__item representation-type-option">
+                            <input
+                                className="govuk-radios__input"
+                                id={optionId}
+                                name={input.name}
+                                type="radio"
+                                value={option.value}
+                                checked={input.value === option.value}
+                                onChange={() => input.onChange(option.value)}
+                                aria-describedby={
+                                    option.hint ? hintId : undefined
+                                }
+                            />
+
+                            <label
+                                className="govuk-label govuk-radios__label  govuk-!-font-weight-bold "
+                                htmlFor={optionId}
+                            >
+                                {option.label}
+
+                                {option.hint && (
+                                    <div
+                                        id={hintId}
+                                        className="govuk-hint govuk-!-margin-top-2"
+                                    >
+                                        {option.hint}
+                                    </div>
+                                )}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
 const RepresentationTypeSelectorBlock = ({
     t,
     headingText,
     kindLabelText,
     isTypeSelected,
     selectedTypeDisplay,
+    representationType,
+    setTypeSelectionConfirmed,
+    onRepresentationTypeChange,
+    onTypeSelectionConfirmed,
     optionsArr,
     validate,
     errorMsg
 }) => {
+    const enhancedOptions = (optionsArr || [])
+        .filter((option) => option && option !== "Select...")
+        .map((option) => ({
+            value: option,
+            label: getRepresentationTypeLabel(option),
+            hint: getRepresentationTypeHint(option, t)
+        }));
+
+    const hasSelectableOptions = enhancedOptions.length > 0;
+
     return (
         <div className="govuk-grid-row">
             <div className="govuk-form-group">
@@ -20,20 +134,59 @@ const RepresentationTypeSelectorBlock = ({
                         <h2 className="govuk-heading-m ">{headingText}</h2>
 
                         <label
-                            className="govuk-label govuk-body-m"
+                            className="govuk-label govuk-body-m govuk-!-margin-bottom-2"
                             htmlFor="representationType"
                         >
                             {kindLabelText}
                         </label>
 
+                        {hasSelectableOptions ? (
+                            <>
                                 <Field
                                     name="representationType"
-                            component={RenderPickList}
+                                    component={
-                            datafieldname="representationType"
+                                        RenderRepresentationTypeRadioList
+                                    }
+                                    onRepresentationTypeChange={
+                                        onRepresentationTypeChange
+                                    }
                                     validate={validate}
-                            optionsArr={optionsArr}
+                                    optionsArr={enhancedOptions}
                                     errorMsg={errorMsg}
                                 />
+
+                                <button
+                                    type="button"
+                                    className="govuk-button"
+                                    data-module="govuk-button"
+                                    disabled={!representationType}
+                                    onClick={() => {
+                                        if (representationType) {
+                                            setTypeSelectionConfirmed(true);
+                                            onTypeSelectionConfirmed &&
+                                                onTypeSelectionConfirmed(
+                                                    representationType
+                                                );
+                                        }
+                                    }}
+                                >
+                                    {t("common:continue-button")}
+                                </button>
+                            </>
+                        ) : (
+                            <>
+                                <p className="govuk-body">
+                                    {t(
+                                        "myrepresentations:representation-type-unavailable-label"
+                                    )}
+                                </p>
+                                <Link className="govuk-link" href="/">
+                                    {t(
+                                        "myrepresentations:return-home-link-label"
+                                    )}
+                                </Link>
+                            </>
+                        )}
                     </>
                 ) : (
                     <label className="govuk-label govuk-body-m">
@@ -42,6 +195,35 @@ const RepresentationTypeSelectorBlock = ({
                     </label>
                 )}
             </div>
+            <style jsx>{`
+                .representation-type-radio-item {
+                    display: flex !important;
+                    flex-direction: column !important;
+                    align-items: flex-start;
+                    width: 100%;
+                }
+
+                .representation-type-radio-choice {
+                    display: block;
+                    width: 100%;
+                }
+
+                .representation-type-radio-hint {
+                    display: block;
+                    clear: both;
+                    margin-left: 40px;
+                    margin-top: 4px;
+                    margin-bottom: 8px;
+                    width: calc(100% - 40px);
+                }
+
+                @media (max-width: 640px) {
+                    .representation-type-radio-hint {
+                        margin-left: 34px;
+                        margin-top: 2px;
+                    }
+                }
+            `}</style>
         </div>
     );
 };

components/case/representation/index.js

@@ -58,6 +58,10 @@ let MakeRepresentation = (props) => {
 
     const [savingStatus, setSavingStatus] = useState(false);
     const [finaliseAppealProcess, setFinaliseAppealProcess] = useState(false);
+    const [representationTypeConfirmed, setRepresentationTypeConfirmed] =
+        useState(
+            !!props?.currentView?.caseReference?.repDetails?.representationType
+        );
 
     //const [questionnaireCount, setQuestionnaireCount] = useState(0);
 
@@ -586,7 +590,10 @@ let MakeRepresentation = (props) => {
             updateRepresentation,
             setSavingStatus,
             savingStatus,
-            setCurrentReference
+            setCurrentReference,
+            onRepresentationTypeChange: () =>
+                setRepresentationTypeConfirmed(false),
+            onTypeSelectionConfirmed: () => setRepresentationTypeConfirmed(true)
         };
 
         const { controlKey } = resolveRepresentationControlKey({
@@ -1108,7 +1115,7 @@ let MakeRepresentation = (props) => {
 
     const isQuestionnaire =
         formObj?.representationForm?.values?.representationType ===
-        "Questionnaire";
+            "Questionnaire" && representationTypeConfirmed;
 
     const appealIsConsultation = appealType === 846040002;
     const appealIsLocalImpact =

components/case/representation/representationAgent.js

@@ -2,7 +2,7 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
@@ -36,10 +36,24 @@ const RepAgent = (props) => {
         updateRepresentation,
         setSavingStatus,
         savingStatus,
-        setFilesForRepresentations
+        setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     if (JSON.stringify(formObj) != "{}") {
         setRepFileName(formObj.representationForm.values);
 
@@ -64,23 +78,23 @@ const RepAgent = (props) => {
         ));
         const required = (value) => (value ? undefined : "Required");
 
-        const hasTypeSelectionInline =
+        const selectedRepresentationType =
-            typeof formObj.representationForm.values.representationType ==
+            formObj?.representationForm?.values?.representationType ||
-                "undefined" && props.representationType != "Select...";
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
 
         const selectedRepresentationTypeDisplay =
             router.locale == "cy"
-                ? formObj.representationForm.values.representationType ==
+                ? selectedRepresentationType == "Questionnaire"
-                  "Questionnaire"
                     ? "Holiadur"
-                    : formObj.representationForm.values.representationType ==
+                    : selectedRepresentationType == "Statement"
-                        "Statement"
                       ? "Datganiad"
-                      : formObj.representationForm.values.representationType ==
+                      : selectedRepresentationType == "Final comments"
-                          "Final comments"
                         ? "Sylwadau terfynol"
-                        : formObj.representationForm.values.representationType
+                        : selectedRepresentationType
-                : formObj.representationForm.values.representationType;
+                : selectedRepresentationType;
 
         const handleSaveExit = () => {
             let valuesObj = props.props.props.form[props.form].values || {};
@@ -98,13 +112,15 @@ const RepAgent = (props) => {
                         "myrepresentations:representation-from-an-agent-heading"
                     )}
                     kindLabelText={t("myrepresentations:kind-of-rep-label")}
-                    isTypeSelected={!hasTypeSelectionInline}
+                    isTypeSelected={isTypeConfirmed}
                     selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                    representationType={selectedRepresentationType}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
                     optionsArr={appellantApplicantRepresentationArr}
                 />
-                {(typeof props.representationType != "undefined" ||
+                {isTypeConfirmed && (
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
                     <>
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
@@ -227,8 +243,7 @@ const RepAgent = (props) => {
                         </div>
                     </>
                 )}
-                {typeof formObj.representationForm.values.representationType !=
+                {isTypeConfirmed && (
-                    "undefined" && (
                     <RepresentationActionButtons
                         t={t}
                         locale={router.locale}

components/case/representation/representationAppellant.js

@@ -2,12 +2,11 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
-    RenderPickList,
     RenderRichMultiline,
     shouldDisableButton
 } from "./representationElements";
@@ -36,10 +35,24 @@ const RepAppellant = (props) => {
         updateRepresentation,
         setSavingStatus,
         savingStatus,
-        setFilesForRepresentations
+        setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     console.log(JSON.stringify(formObj) == "{}" ? "empty" : "value");
 
     if (JSON.stringify(formObj) != "{}") {
@@ -64,23 +77,23 @@ const RepAppellant = (props) => {
                 index === self.findIndex((t) => t.name === value.name)
         );
 
-        const hasTypeSelectionInline =
+        const selectedRepresentationType =
-            typeof formObj.representationForm.values.representationType ==
+            formObj?.representationForm?.values?.representationType ||
-                "undefined" && props.representationType != "Select...";
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
 
         const selectedRepresentationTypeDisplay =
             router.locale == "cy"
-                ? formObj.representationForm.values.representationType ==
+                ? selectedRepresentationType == "Questionnaire"
-                  "Questionnaire"
                     ? "Holiadur"
-                    : formObj.representationForm.values.representationType ==
+                    : selectedRepresentationType == "Statement"
-                        "Statement"
                       ? "Datganiad"
-                      : formObj.representationForm.values.representationType ==
+                      : selectedRepresentationType == "Final comments"
-                          "Final comments"
                         ? "Sylwadau terfynol"
-                        : formObj.representationForm.values.representationType
+                        : selectedRepresentationType
-                : formObj.representationForm.values.representationType;
+                : selectedRepresentationType;
 
         const handleSaveExit = () => {
             let valuesObj = props.props.props.form[props.form].values || {};
@@ -98,13 +111,15 @@ const RepAppellant = (props) => {
                         "myrepresentations:representation-from-an-appellant-heading"
                     )}
                     kindLabelText={t("myrepresentations:kind-of-rep-label")}
-                    isTypeSelected={!hasTypeSelectionInline}
+                    isTypeSelected={isTypeConfirmed}
                     selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                    representationType={selectedRepresentationType}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
                     optionsArr={appellantApplicantRepresentationArr}
                 />
-                {(typeof props.representationType != "undefined" ||
+                {isTypeConfirmed && (
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
                     <div className="govuk-grid-row">
                         <div className="govuk-form-group">
                             <p className="govuk-body">
@@ -220,8 +235,7 @@ const RepAppellant = (props) => {
                     </div>
                 )}
 
-                {typeof formObj.representationForm.values.representationType !=
+                {isTypeConfirmed && (
-                    "undefined" && (
                     <RepresentationActionButtons
                         t={t}
                         locale={router.locale}

components/case/representation/representationInterestedPartyPerson.js

@@ -2,7 +2,7 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
@@ -35,12 +35,26 @@ const RepInterestedPartyPerson = (props) => {
         updateRepresentation,
         setSavingStatus,
         savingStatus,
-        setFilesForRepresentations
+        setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const required = (value) => (value ? undefined : "Required");
 
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        props.currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     if (JSON.stringify(formObj) != "{}") {
         setRepFileName(formObj.representationForm.values);
 
@@ -64,23 +78,23 @@ const RepInterestedPartyPerson = (props) => {
             </li>
         ));
 
-        const hasTypeSelectionInline =
+        const selectedRepresentationType =
-            typeof formObj.representationForm.values.representationType ==
+            formObj?.representationForm?.values?.representationType ||
-                "undefined" && props.representationType != "Select...";
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
 
         const selectedRepresentationTypeDisplay =
             router.locale == "cy"
-                ? formObj.representationForm.values.representationType ==
+                ? selectedRepresentationType == "Questionnaire"
-                  "Questionnaire"
                     ? "Holiadur"
-                    : formObj.representationForm.values.representationType ==
+                    : selectedRepresentationType == "Statement"
-                        "Statement"
                       ? "Datganiad"
-                      : formObj.representationForm.values.representationType ==
+                      : selectedRepresentationType == "Final comments"
-                          "Final comments"
                         ? "Sylwadau terfynol"
-                        : formObj.representationForm.values.representationType
+                        : selectedRepresentationType
-                : formObj.representationForm.values.representationType;
+                : selectedRepresentationType;
 
         const handleSaveExit = () => {
             let valuesObj = props.props.props.form[props.form].values || {};
@@ -98,15 +112,17 @@ const RepInterestedPartyPerson = (props) => {
                         "myrepresentations:consultation-from-an-interested-person-heading"
                     )}
                     kindLabelText={t("myrepresentations:kind-of-rep-label")}
-                    isTypeSelected={!hasTypeSelectionInline}
+                    isTypeSelected={isTypeConfirmed}
                     selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                    representationType={selectedRepresentationType}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
                     optionsArr={interestedPersonRepresentationArr}
                     validate={[required]}
                     errorMsg={t("myrepresentations:select-an-option-label")}
                 />
-                {(typeof props.representationType != "undefined" ||
+                {isTypeConfirmed && (
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
                     <>
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
@@ -213,8 +229,7 @@ const RepInterestedPartyPerson = (props) => {
                         </div>
                     </>
                 )}
-                {typeof formObj.representationForm.values.representationType !=
+                {isTypeConfirmed && (
-                    "undefined" && (
                     <RepresentationActionButtons
                         t={t}
                         locale={router.locale}

components/case/representation/representationLPA.js

@@ -10,9 +10,9 @@ import { useState, useEffect } from "react";
 import {
     FileUploadField,
     RenderMultiline,
-    RenderPickList,
+    shouldDisableButton
-    shouldDisableButton,
 } from "./representationElements";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement";
 import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78";
 import Enforcement_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_enforcement";
@@ -23,7 +23,7 @@ import {
     setRepresentationSubmit,
     setFilesForRepresentations,
     setCurrentPage,
-    setCurrentReference,
+    setCurrentReference
 } from "../../../store/currentView/action";
 
 let RepLPA = (props) => {
@@ -49,6 +49,8 @@ let RepLPA = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
@@ -59,6 +61,36 @@ let RepLPA = (props) => {
     ));
     const required = (value) => (value ? undefined : "Required");
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
+    const selectedRepresentationType =
+        formObj?.representationForm?.values?.representationType ||
+        props.representationType;
+
+    const isTypeConfirmed =
+        !!selectedRepresentationType && typeSelectionConfirmed;
+
+    const selectedRepresentationTypeDisplay =
+        router.locale == "cy"
+            ? selectedRepresentationType == "Questionnaire"
+                ? "Holiadur"
+                : selectedRepresentationType == "Statement"
+                  ? "Datganiad"
+                  : selectedRepresentationType == "Final comments"
+                    ? "Sylwadau terfynol"
+                    : selectedRepresentationType
+            : selectedRepresentationType;
+
     const whichQuestionnaire = () => {
         {
             switch (currentView.caseReference.appealType) {
@@ -183,7 +215,7 @@ let RepLPA = (props) => {
             currentView.caseReference.currentReference +
             '")]',
         json: setCaseDetailsObj,
-        eval: true,
+        eval: true
     });
 
     let setCaseResultssObj = router.query.hasOwnProperty("state")
@@ -202,7 +234,7 @@ let RepLPA = (props) => {
             currentView.caseReference.currentReference +
             '")]',
         json: setCaseResultssObj,
-        eval: true,
+        eval: true
     });
     resultsObj = resultsObj[0];
 
@@ -225,62 +257,26 @@ let RepLPA = (props) => {
 
     return (
         <>
-            <div className="govuk-grid-row">
+            <RepresentationTypeSelectorBlock
-                <div className="govuk-form-group">
+                t={t}
-                    {!_.has(
+                headingText={t(
-                        formObj["representationForm"],
-                        ["values", "representationType"] ||
-                            typeof props.currentView.caseReference.repDetails !=
-                                "undefined"
-                    ) ? (
-                        <>
-                            <label
-                                className="govuk-label govuk-body-m"
-                                htmlFor="representationType"
-                            >
-                                {t(
                     "myrepresentations:representation-from-an-lpa-heading"
                 )}
-                            </label>
+                kindLabelText={t("myrepresentations:kind-of-rep-label")}
-                            <Field
+                isTypeSelected={isTypeConfirmed}
-                                id="representationType"
+                selectedTypeDisplay={selectedRepresentationTypeDisplay}
-                                name="representationType"
+                representationType={selectedRepresentationType}
-                                component={RenderPickList}
+                setTypeSelectionConfirmed={setTypeSelectionConfirmed}
-                                datafieldname="representationType"
+                onRepresentationTypeChange={onRepresentationTypeChange}
+                onTypeSelectionConfirmed={onTypeSelectionConfirmed}
                 optionsArr={appellantApplicantRepresentationArr}
+                validate={[required]}
+                errorMsg={t("myrepresentations:select-an-option-label")}
             />
-                        </>
-                    ) : (
-                        <label className="govuk-label govuk-body-m">
-                            {t("myrepresentations:representation-type")}:{" "}
-                            {router.locale == "cy"
-                                ? formObj.representationForm.values
-                                      .representationType == "Questionnaire"
-                                    ? "Holiadur"
-                                    : formObj.representationForm.values
-                                          .representationType == "Statement"
-                                    ? "Datganiad"
-                                    : formObj.representationForm.values
-                                          .representationType ==
-                                      "Final comments"
-                                    ? "Sylwadau terfynol"
-                                    : formObj.representationForm.values
-                                          .representationType
-                                : formObj.representationForm.values
-                                      .representationType}
-                        </label>
-                    )}
-                </div>
-            </div>
             <div className="govuk-grid-row">
                 <div className="govuk-form-group">
-                    {(_.has(formObj["representationForm"], [
+                    {isTypeConfirmed &&
-                        "values",
+                        (selectedRepresentationType != "Questionnaire" ? (
-                        "representationType",
-                    ]) ||
-                        typeof props.representationType != "undefined") &&
-                        (props.representationType != "Questionnaire" &&
-                        props.representationType != "Select..." ? (
                             <>
                                 <p className="govuk-body">
                                     {t("myrepresentations:enter-comment-label")}
@@ -354,7 +350,8 @@ let RepLPA = (props) => {
                                                 "myrepresentations:add-files-label"
                                             )}
                                             ticketnumber={
-                                                props.currentView.caseReference.ticketnumber
+                                                props.currentView.caseReference
+                                                    .ticketnumber
                                             }
                                             hint={"sdsd"}
                                             fileList={
@@ -401,9 +398,8 @@ let RepLPA = (props) => {
             </div>
             <div className="govuk-grid-row">
                 <div className="govuk-button-group">
-                    {(typeof props.representationType != "undefined" ||
+                    {isTypeConfirmed &&
-                        _.has(formObj, "values", "representationType")) &&
+                        selectedRepresentationType == "Questionnaire" && (
-                        props.representationType == "Questionnaire" && (
                             <>
                                 {showQuestionnaireSection <
                                     questionnaireCount && (
@@ -443,14 +439,14 @@ let RepLPA = (props) => {
                                             //     top: 0,
                                             //     behavior: "smooth",
                                             // });
-                                            setRepFileName(
+                                            (setRepFileName(
                                                 props.formObj[
                                                     "representationForm"
                                                 ].values
                                             ),
                                                 setShowQuestionnaireSection(
                                                     showQuestionnaireSection - 1
-                                                );
+                                                ));
                                         }}
                                         className="govuk-link"
                                     >
@@ -503,9 +499,8 @@ let RepLPA = (props) => {
                                 )}
                             </>
                         )}{" "}
-                    {(typeof props.representationType != "undefined" ||
+                    {isTypeConfirmed &&
-                        _.has(formObj, "values", "representationType")) &&
+                        selectedRepresentationType != "Questionnaire" && (
-                        props.representationType != "Questionnaire" && (
                             <>
                                 <button
                                     type="submit"
@@ -513,7 +508,7 @@ let RepLPA = (props) => {
                                     data-module="govuk-button"
                                     disabled={shouldDisableButton({
                                         props,
-                                        formObj,
+                                        formObj
                                     })}
                                     onClick={() => {
                                         let valuesObj =
@@ -612,7 +607,7 @@ RepLPA = connect((state) => {
 
     return {
         procedureType,
-        representationType,
+        representationType
     };
 })(RepLPA);
 
@@ -625,7 +620,7 @@ const mapDispatchToProps = (dispatch) => ({
     },
     setCurrentReference: (currentReference) => {
         dispatch(setCurrentReference(currentReference));
-    },
+    }
 });
 
 const mapStateToProps = (state, props) => {
@@ -641,8 +636,7 @@ const mapStateToProps = (state, props) => {
                 ],
             "firstname":
                 props.props.props.accountDetails.accountDetails.firstname,
-            "lastname":
+            "lastname": props.props.props.accountDetails.accountDetails.lastname
-                props.props.props.accountDetails.accountDetails.lastname,
         }
     );
     return {
@@ -653,7 +647,7 @@ const mapStateToProps = (state, props) => {
         currentView: state.currentView,
         myRepresentations: state.myRepresentations,
         watchedCases: state.watchedCases,
-        initialValues: initialValuesTemp,
+        initialValues: initialValuesTemp
     };
 };
 
@@ -664,6 +658,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(RepLPA)
 );

locales/cy/myrepresentations.json

@@ -21,6 +21,11 @@
     "consultation-from-an-interested-person-heading": "Ymateb i'r ymgynghoriad gan Barti/Person â Diddordeb",
     "kind-of-rep-label": "Pa fath o sylw ydych chi'n ei wneud?",
     "kind-of-consultation-label": "Pa fath o ymateb i'r ymgynghoriad ydych chi'n ei wneud?",
+    "rep-type-statement-hint": "Gall Partïon â Diddordeb gyflwyno eu sylwadau ar yr apêl / cais erbyn y dyddiad cau o 4 wythnos. Dyma'ch cyfle i wneud sylwadau ar yr apêl / cais a'r dogfennau a gyflwynwyd gan yr apelydd / ymgeisydd.",
+    "rep-type-final-comments-hint": "Gall pob parti gyflwyno Sylwadau Terfynol ar yr apêl / cais erbyn y dyddiad cau o 6 wythnos. Rhaid i'ch Sylwadau Terfynol ymateb i'r Datganiad a'r Sylwadau a gyflwynwyd gan yr Awdurdod Cynllunio Lleol a Phartïon â Diddordeb ar gyfer y dyddiad cau o 4 wythnos yn unig. Ni all eich Sylwadau Terfynol gyflwyno deunydd newydd na chyflwyno dadleuon y dylid bod wedi'u cynnwys yn eich Datganiad cynharach. Os gwnewch hynny, ni fydd eich sylwadau'n cael eu derbyn a byddant yn cael eu hanwybyddu.",
+    "rep-type-questionnaire-hint": "Mae holiadur ar gyfer Awdurdodau Cynllunio Lleol i ddarparu'r wybodaeth achos ofynnol.",
+    "rep-type-consultation-hint": "Gall Partïon â Diddordeb gyflwyno eu sylwadau ar y cais erbyn y dyddiad cau o 5 wythnos. Dyma'ch cyfle i wneud sylwadau ar y cais a'r dogfennau a gyflwynwyd gan yr ymgeisydd.",
+    "rep-type-lir-hint": "Dylai'r LIR nodi asesiad yr ACLl o effeithiau tebygol y datblygiad arfaethedig ar yr ardal leol. NI ddylai'r LIR gynnwys tystiolaeth newydd oni bai ei fod yn cael ei nodi'n glir felly ac ni ddylai ailadrodd sylwadau a ddarparwyd eisoes oni bai bod angen hynny er mwyn eglurder. Rhaid cyflwyno'r LIR o fewn yr amserlen statudol.",
     "enter-comment-label": "Gallwch roi eich cynrychioliad yn y gofod a ddarparwyd neu atodi dogfen ar wahân.",
     "consultation-comment-label": "Gallwch atodi'ch dogfennau sy'n gysylltiedig â'ch ymateb i'r ymgynghoriad.",
     "comments-set-out-label": "Mae fy sylwadau wedi'u nodi yn",
@@ -256,6 +261,8 @@
     "rep-period-notice-label": "Aeth y dyddiad dyledus ar gyfer y sylw hwn heibio. Ni allwch gyflwyno'r wybodaeth a ddarparwyd gennych mwyach.",
     "representation-onbehalfof-hint": " e.e. \"Perchnogion Rhifau 1-5 Stryd Fawr\", neu \"Mr a Mrs Smith\" neu \"ysgutorion ystâd Mr Evans\"",
     "representation-onbehalfof-label": "Rhowch enw'r cwmni/grŵp/sefydliad",
+    "representation-type-unavailable-label": "Nid oes unrhyw fathau o sylwadau ar gael ar gyfer yr achos hwn ar hyn o bryd.",
+    "return-home-link-label": "Dychwelyd i'r hafan",
     "docsoffline-reps-label": "Oherwydd gwaith cynnal a chadw system, ni allwn dderbyn sylwadau ar hyn o bryd. Rhowch gynnig arall arni yn nes ymlaen.",
     "return-to-myportal-link": "Dychwelyd i Fy Mhorth"
 }

locales/en/myrepresentations.json

@@ -20,7 +20,13 @@
     "representation-from-an-interested-person-heading": "Representation from an Interested Party/Person",
     "consultation-from-an-interested-person-heading": "Consultation response from an Interested Party/Person",
     "kind-of-rep-label": "What kind of representation are you making?",
-    "kind-of-consultation-label": "What kind of consultation respone are you making?",
+    "kind-of-consultation-label": "What kind of consultation response are you making?",
+    "rep-type-statement-hint": "Interested Parties may submit their representation on the appeal / application by the 4 week deadline. This is your opportunity to make comments on the appeal / application and documents submitted by the appellant / applicant.",
+    "rep-type-final-comments-hint": "All parties may submit Final Comments on the appeal / application by the 6 week deadline. Your Final Comments must respond to the Statement and Representations submitted by the Local Planning Authority and Interested Parties for the 4 week deadline only. Your Final Comments cannot introduce new material or put forward arguments that should have been included in your earlier Statement. If you do, your comments will not be accepted and will be disregarded.",
+    "rep-type-questionnaire-hint": "A questionnaire is for Local Planning Authorities to provide the required case information.",
+    "rep-type-consultation-hint": "Interested Parties may submit their representation on the application by the 5 week deadline. This is your opportunity to make comments on the application and documents submitted by the applicant.",
+    "rep-type-lir-hint": "The LIR should set out the LPA’s assessment of the likely impacts of the proposed development on the local area. The LIR should NOT include new evidence unless clearly identifies as such and should not repeat representations already provided unless necessary for clarity. The LIR must be submitted within the statutory timescale.",
+    "rep-type-mir-hint": "A Marine Impact Report sets out marine and coastal impacts where relevant.",
     "enter-comment-label": "You can enter your representation in the space provided or attach a separate document.",
     "consultation-comment-label": "You can attach your documents related to your consultation response.",
     "comments-set-out-label": "My comments are set out in",
@@ -256,6 +262,8 @@
     "rep-period-notice-label": "The due date for this representation passed. You can no longer submit the information you have provided.",
     "representation-onbehalfof-hint": "e.g. \"Owners of Numbers 1-5 High Street\", or \"Mr and Mrs Smith\" or \"The executors of Mr Evans' estate\"",
     "representation-onbehalfof-label": "Enter the name of the company/group/organisation",
+    "representation-type-unavailable-label": "There are no representation types available for this case at the moment.",
+    "return-home-link-label": "Return to home page",
     "docsoffline-reps-label": "Due to system maintenance, we are unable to accept representations at this time. Please try again later.",
     "return-to-myportal-link": "Return to My Portal"
 }