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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user