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

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 =
-            typeof formObj.representationForm.values.representationType ==
-                "undefined" && props.representationType != "Select...";
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
 
         const selectedRepresentationTypeDisplay =
             router.locale == "cy"
-                ? formObj.representationForm.values.representationType ==
-                  "Questionnaire"
+                ? selectedRepresentationType == "Questionnaire"
                     ? "Holiadur"
-                    : formObj.representationForm.values.representationType ==
-                        "Statement"
+                    : selectedRepresentationType == "Statement"
                       ? "Datganiad"
-                      : formObj.representationForm.values.representationType ==
-                          "Final comments"
+                      : selectedRepresentationType == "Final comments"
                         ? "Sylwadau terfynol"
-                        : formObj.representationForm.values.representationType
-                : formObj.representationForm.values.representationType;
+                        : selectedRepresentationType
+                : 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" ||
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
+                {isTypeConfirmed && (
                     <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 !=
-                    "undefined" && (
+                {isTypeConfirmed && (
                     <RepresentationActionButtons
                         t={t}
                         locale={router.locale}