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/representationLPA.js
+69 -75
View File
@@ -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 (
<>
<RepresentationTypeSelectorBlock
t={t}
headingText={t(
"myrepresentations:representation-from-an-lpa-heading"
)}
kindLabelText={t("myrepresentations:kind-of-rep-label")}
isTypeSelected={isTypeConfirmed}
selectedTypeDisplay={selectedRepresentationTypeDisplay}
representationType={selectedRepresentationType}
setTypeSelectionConfirmed={setTypeSelectionConfirmed}
onRepresentationTypeChange={onRepresentationTypeChange}
onTypeSelectionConfirmed={onTypeSelectionConfirmed}
optionsArr={appellantApplicantRepresentationArr}
validate={[required]}
errorMsg={t("myrepresentations:select-an-option-label")}
/>
<div className="govuk-grid-row">
<div className="govuk-form-group">
{!_.has(
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>
<Field
id="representationType"
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>
<div className="govuk-grid-row">
<div className="govuk-form-group">
{(_.has(formObj["representationForm"], [
"values",
"representationType",
]) ||
typeof props.representationType != "undefined") &&
(props.representationType != "Questionnaire" &&
props.representationType != "Select..." ? (
{isTypeConfirmed &&
(selectedRepresentationType != "Questionnaire" ? (
<>
<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" ||
_.has(formObj, "values", "representationType")) &&
props.representationType == "Questionnaire" && (
{isTypeConfirmed &&
selectedRepresentationType == "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" ||
_.has(formObj, "values", "representationType")) &&
props.representationType != "Questionnaire" && (
{isTypeConfirmed &&
selectedRepresentationType != "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":
props.props.props.accountDetails.accountDetails.lastname,
"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)
);