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
This commit is contained in:
Robert Bond
2026-04-21 04:59:01 +00:00
parent 37a81522d5
commit 05d83822f2
12 changed files with 572 additions and 355 deletions
@@ -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 =
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 +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" ||
typeof formObj.representationForm.values
.representationType != "undefined") && (
{isTypeConfirmed && (
<>
<div className="govuk-grid-row">
<div className="govuk-form-group">
@@ -227,8 +243,7 @@ const RepAgent = (props) => {
</div>
</>
)}
{typeof formObj.representationForm.values.representationType !=
"undefined" && (
{isTypeConfirmed && (
<RepresentationActionButtons
t={t}
locale={router.locale}