robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
components/case/representation/consultationAgent.js
+59 -68
View File
@@ -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">
<div className="govuk-form-group">
{typeof formObj.representationForm.values
.representationType == "undefined" &&
props.representationType != "Select..." ? (
<>
<h2 className="govuk-heading-m ">
{t(
"myrepresentations:consultation-from-an-agent-heading"
)}
</h2>
<label
className="govuk-label govuk-body-m"
htmlFor="representationType"
>
{t(
"myrepresentations:kind-of-consultation-label"
)}
</label>
<Field
name="representationType"
component={RenderPickList}
datafieldname="representationType"
optionsArr={
appellantApplicantRepresentationArr
}
/>
</>
) : (
<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") && (
<RepresentationTypeSelectorBlock
t={t}
headingText={t(
"myrepresentations:consultation-from-an-agent-heading"
)}
kindLabelText={t(
"myrepresentations:kind-of-consultation-label"
)}
isTypeSelected={isTypeConfirmed}
selectedTypeDisplay={selectedRepresentationTypeDisplay}
representationType={selectedRepresentationType}
setTypeSelectionConfirmed={setTypeSelectionConfirmed}
onRepresentationTypeChange={onRepresentationTypeChange}
onTypeSelectionConfirmed={onTypeSelectionConfirmed}
optionsArr={appellantApplicantRepresentationArr}
/>
{isTypeConfirmed && (
<>
<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
.representationType ==
{selectedRepresentationType ==
"Consultation Response"
? t(
"myrepresentations:enter-comment-label"
@@ -160,8 +153,7 @@ const ConsultationAgent = (props) => {
className="govuk-fieldset"
aria-describedby="commentBox-hint"
>
{formObj.representationForm.values
.representationType ==
{selectedRepresentationType ==
"Consultation Response" && (
<div className="govuk-form-group">
<Field
@@ -265,8 +257,7 @@ const ConsultationAgent = (props) => {
</div>
</>
)}
{typeof formObj.representationForm.values.representationType !=
"undefined" && (
{isTypeConfirmed && (
<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)
);