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)
);
components/case/representation/consultationAppellant.js
+59 -67
View File
@@ -2,21 +2,21 @@ 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,
shouldDisableButton
} from "./representationElements";
import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
import { useDropzone } from "react-dropzone";
import {
setRepresentationCapacity,
setRepresentationSubmit,
setFilesForRepresentations,
setFilesForRepresentations
} from "../../../store/currentView/action";
const ConsultationAppellant = (props) => {
@@ -35,9 +35,23 @@ const ConsultationAppellant = (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]);
console.log(JSON.stringify(formObj) == "{}" ? "empty" : "value");
if (JSON.stringify(formObj) != "{}") {
@@ -62,66 +76,47 @@ const ConsultationAppellant = (props) => {
index === self.findIndex((t) => t.name === value.name)
);
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-appellant-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-appellant-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">
<p className="govuk-body">
{formObj.representationForm.values
.representationType ==
{selectedRepresentationType ==
"Consultation Response"
? t("myrepresentations:enter-comment-label")
: t(
@@ -132,8 +127,7 @@ const ConsultationAppellant = (props) => {
className="govuk-fieldset"
aria-describedby="commentBox-hint"
>
{formObj.representationForm.values
.representationType ==
{selectedRepresentationType ==
"Consultation Response" && (
<div className="govuk-form-group">
<Field
@@ -233,8 +227,7 @@ const ConsultationAppellant = (props) => {
</div>
)}
{typeof formObj.representationForm.values.representationType !=
"undefined" && (
{isTypeConfirmed && (
<div className="govuk-grid-row">
<div className="govuk-button-group">
<button
@@ -243,7 +236,7 @@ const ConsultationAppellant = (props) => {
data-module="govuk-button"
disabled={shouldDisableButton({
props,
formObj,
formObj
})}
>
{t("common:continue-button")}
@@ -253,7 +246,6 @@ const ConsultationAppellant = (props) => {
onClick={() => {
setRepresentationCapacity();
props.updateField(
"representationForm",
"representationType",
""
);
@@ -321,7 +313,7 @@ const mapDispatchToProps = (dispatch) => {
setFilesForRepresentations: (fileList) => {
dispatch(setFilesForRepresentations(fileList));
},
}
};
};
@@ -332,6 +324,6 @@ export default connect(
reduxForm({
form: "representationForm",
enableReinitialize: true,
destroyOnUnmount: false,
destroyOnUnmount: false
})(ConsultationAppellant)
);
components/case/representation/consultationInterestedPartyPerson.js
+63 -73
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 ConsultationInterestedPartyPerson = (props) => {
@@ -35,11 +35,25 @@ const ConsultationInterestedPartyPerson = (props) => {
setSavingStatus,
savingStatus,
setFilesForRepresentations,
onRepresentationTypeChange,
onTypeSelectionConfirmed
} = props;
const required = (value) => (value ? undefined : "Required");
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const persistedRepresentationType =
props.currentView?.caseReference?.repDetails?.representationType;
const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
!!persistedRepresentationType
);
useEffect(() => {
if (persistedRepresentationType) {
setTypeSelectionConfirmed(true);
}
}, [persistedRepresentationType]);
if (JSON.stringify(formObj) != "{}") {
setRepFileName(formObj.representationForm.values);
@@ -62,67 +76,46 @@ const ConsultationInterestedPartyPerson = (props) => {
{file.path} - {file.size} bytes
</li>
));
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-interested-person-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"
validate={[required]}
optionsArr={
interestedPersonRepresentationArr
}
errorMsg={t(
"myrepresentations:select-an-option-label"
)}
/>
</>
) : (
<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-interested-person-heading"
)}
kindLabelText={t(
"myrepresentations:kind-of-consultation-label"
)}
isTypeSelected={isTypeConfirmed}
selectedTypeDisplay={selectedRepresentationTypeDisplay}
representationType={selectedRepresentationType}
setTypeSelectionConfirmed={setTypeSelectionConfirmed}
onRepresentationTypeChange={onRepresentationTypeChange}
onTypeSelectionConfirmed={onTypeSelectionConfirmed}
optionsArr={interestedPersonRepresentationArr}
validate={[required]}
errorMsg={t("myrepresentations:select-an-option-label")}
/>
{isTypeConfirmed && (
<>
<div className="govuk-grid-row">
<div className="govuk-form-group">
@@ -134,7 +127,7 @@ const ConsultationInterestedPartyPerson = (props) => {
t(
"myrepresentations:questionnaire-yes"
),
t("myrepresentations:questionnaire-no"),
t("myrepresentations:questionnaire-no")
]}
id="representationOnBehalfOf"
className="govuk-radios__input"
@@ -154,8 +147,7 @@ const ConsultationInterestedPartyPerson = (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"
@@ -169,8 +161,7 @@ const ConsultationInterestedPartyPerson = (props) => {
aria-describedby="commentBox-hint"
>
{" "}
{formObj.representationForm.values
.representationType ==
{selectedRepresentationType ==
"Consultation Response" && (
<div className="govuk-form-group">
<Field
@@ -274,8 +265,7 @@ const ConsultationInterestedPartyPerson = (props) => {
</div>
</>
)}
{typeof formObj.representationForm.values.representationType !=
"undefined" && (
{isTypeConfirmed && (
<div className="govuk-grid-row">
<div className="govuk-button-group">
<button
@@ -284,7 +274,7 @@ const ConsultationInterestedPartyPerson = (props) => {
data-module="govuk-button"
disabled={shouldDisableButton({
props,
formObj,
formObj
})}
>
{t("common:continue-button")}
@@ -363,7 +353,7 @@ const mapDispatchToProps = (dispatch) => ({
dispatch(change(form, field, newValue)),
setFilesForRepresentations: (fileList) => {
dispatch(setFilesForRepresentations(fileList));
},
}
});
export default connect(
@@ -373,6 +363,6 @@ export default connect(
reduxForm({
form: "representationForm",
enableReinitialize: true,
destroyOnUnmount: false,
destroyOnUnmount: false
})(ConsultationInterestedPartyPerson)
);
components/case/representation/elements/RepresentationTypeSelectorBlock.js
+192 -10
View File
@@ -1,17 +1,131 @@
import { Field } from "redux-form";
import router from "next/router";
import Link from "next/link";
import { RenderPickList } from "../representationElements";
const getRepresentationTypeHint = (option, t) => {
const map = {
"Statement": t("myrepresentations:rep-type-statement-hint"),
"Final comments": t("myrepresentations:rep-type-final-comments-hint"),
"Questionnaire": t("myrepresentations:rep-type-questionnaire-hint"),
"Consultation Response": t(
"myrepresentations:rep-type-consultation-hint"
),
"Local Impact Report": t("myrepresentations:rep-type-lir-hint"),
"Marine Impact Report": t("myrepresentations:rep-type-mir-hint")
};
return map[option] || "";
};
const getRepresentationTypeLabel = (option) => {
if (router.locale !== "cy") {
return option;
}
if (option === "Questionnaire") {
return "Holiadur";
}
if (option === "Statement") {
return "Datganiad";
}
if (option === "Final comments") {
return "Sylwadau terfynol";
}
return option;
};
const RenderRepresentationTypeRadioList = ({
name,
optionsArr,
errorMsg,
onRepresentationTypeChange,
input,
meta: { touched, error }
}) => {
return (
<div
className={
touched && error
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group"
}
>
{touched && error && (
<span id={`${name}-error`} className="govuk-error-message">
<span className="govuk-visually-hidden">Error:</span>{" "}
{errorMsg}
</span>
)}
<div className="govuk-radios govuk-radios--small">
{optionsArr.map((option, index) => {
const optionId = `${name}_${index}`;
const hintId = `${optionId}-hint`;
return (
<div className="govuk-radios__item representation-type-option">
<input
className="govuk-radios__input"
id={optionId}
name={input.name}
type="radio"
value={option.value}
checked={input.value === option.value}
onChange={() => input.onChange(option.value)}
aria-describedby={
option.hint ? hintId : undefined
}
/>
<label
className="govuk-label govuk-radios__label govuk-!-font-weight-bold "
htmlFor={optionId}
>
{option.label}
{option.hint && (
<div
id={hintId}
className="govuk-hint govuk-!-margin-top-2"
>
{option.hint}
</div>
)}
</label>
</div>
);
})}
</div>
</div>
);
};
const RepresentationTypeSelectorBlock = ({
t,
headingText,
kindLabelText,
isTypeSelected,
selectedTypeDisplay,
representationType,
setTypeSelectionConfirmed,
onRepresentationTypeChange,
onTypeSelectionConfirmed,
optionsArr,
validate,
errorMsg
}) => {
const enhancedOptions = (optionsArr || [])
.filter((option) => option && option !== "Select...")
.map((option) => ({
value: option,
label: getRepresentationTypeLabel(option),
hint: getRepresentationTypeHint(option, t)
}));
const hasSelectableOptions = enhancedOptions.length > 0;
return (
<div className="govuk-grid-row">
<div className="govuk-form-group">
@@ -20,20 +134,59 @@ const RepresentationTypeSelectorBlock = ({
<h2 className="govuk-heading-m ">{headingText}</h2>
<label
className="govuk-label govuk-body-m"
className="govuk-label govuk-body-m govuk-!-margin-bottom-2"
htmlFor="representationType"
>
{kindLabelText}
</label>
<Field
name="representationType"
component={RenderPickList}
datafieldname="representationType"
validate={validate}
optionsArr={optionsArr}
errorMsg={errorMsg}
/>
{hasSelectableOptions ? (
<>
<Field
name="representationType"
component={
RenderRepresentationTypeRadioList
}
onRepresentationTypeChange={
onRepresentationTypeChange
}
validate={validate}
optionsArr={enhancedOptions}
errorMsg={errorMsg}
/>
<button
type="button"
className="govuk-button"
data-module="govuk-button"
disabled={!representationType}
onClick={() => {
if (representationType) {
setTypeSelectionConfirmed(true);
onTypeSelectionConfirmed &&
onTypeSelectionConfirmed(
representationType
);
}
}}
>
{t("common:continue-button")}
</button>
</>
) : (
<>
<p className="govuk-body">
{t(
"myrepresentations:representation-type-unavailable-label"
)}
</p>
<Link className="govuk-link" href="/">
{t(
"myrepresentations:return-home-link-label"
)}
</Link>
</>
)}
</>
) : (
<label className="govuk-label govuk-body-m">
@@ -42,6 +195,35 @@ const RepresentationTypeSelectorBlock = ({
</label>
)}
</div>
<style jsx>{`
.representation-type-radio-item {
display: flex !important;
flex-direction: column !important;
align-items: flex-start;
width: 100%;
}
.representation-type-radio-choice {
display: block;
width: 100%;
}
.representation-type-radio-hint {
display: block;
clear: both;
margin-left: 40px;
margin-top: 4px;
margin-bottom: 8px;
width: calc(100% - 40px);
}
@media (max-width: 640px) {
.representation-type-radio-hint {
margin-left: 34px;
margin-top: 2px;
}
}
`}</style>
</div>
);
};
components/case/representation/index.js
+9 -2
View File
@@ -58,6 +58,10 @@ let MakeRepresentation = (props) => {
const [savingStatus, setSavingStatus] = useState(false);
const [finaliseAppealProcess, setFinaliseAppealProcess] = useState(false);
const [representationTypeConfirmed, setRepresentationTypeConfirmed] =
useState(
!!props?.currentView?.caseReference?.repDetails?.representationType
);
//const [questionnaireCount, setQuestionnaireCount] = useState(0);
@@ -586,7 +590,10 @@ let MakeRepresentation = (props) => {
updateRepresentation,
setSavingStatus,
savingStatus,
setCurrentReference
setCurrentReference,
onRepresentationTypeChange: () =>
setRepresentationTypeConfirmed(false),
onTypeSelectionConfirmed: () => setRepresentationTypeConfirmed(true)
};
const { controlKey } = resolveRepresentationControlKey({
@@ -1108,7 +1115,7 @@ let MakeRepresentation = (props) => {
const isQuestionnaire =
formObj?.representationForm?.values?.representationType ===
"Questionnaire";
"Questionnaire" && representationTypeConfirmed;
const appealIsConsultation = appealType === 846040002;
const appealIsLocalImpact =
components/case/representation/representationAgent.js
+34 -19
View File
@@ -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}
components/case/representation/representationAppellant.js
+34 -20
View File
@@ -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}
components/case/representation/representationInterestedPartyPerson.js
+34 -19
View File
@@ -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 {
@@ -35,12 +35,26 @@ const RepInterestedPartyPerson = (props) => {
updateRepresentation,
setSavingStatus,
savingStatus,
setFilesForRepresentations
setFilesForRepresentations,
onRepresentationTypeChange,
onTypeSelectionConfirmed
} = props;
const required = (value) => (value ? undefined : "Required");
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const persistedRepresentationType =
props.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 RepInterestedPartyPerson = (props) => {
</li>
));
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,15 +112,17 @@ const RepInterestedPartyPerson = (props) => {
"myrepresentations:consultation-from-an-interested-person-heading"
)}
kindLabelText={t("myrepresentations:kind-of-rep-label")}
isTypeSelected={!hasTypeSelectionInline}
isTypeSelected={isTypeConfirmed}
selectedTypeDisplay={selectedRepresentationTypeDisplay}
representationType={selectedRepresentationType}
setTypeSelectionConfirmed={setTypeSelectionConfirmed}
onRepresentationTypeChange={onRepresentationTypeChange}
onTypeSelectionConfirmed={onTypeSelectionConfirmed}
optionsArr={interestedPersonRepresentationArr}
validate={[required]}
errorMsg={t("myrepresentations:select-an-option-label")}
/>
{(typeof props.representationType != "undefined" ||
typeof formObj.representationForm.values
.representationType != "undefined") && (
{isTypeConfirmed && (
<>
<div className="govuk-grid-row">
<div className="govuk-form-group">
@@ -213,8 +229,7 @@ const RepInterestedPartyPerson = (props) => {
</div>
</>
)}
{typeof formObj.representationForm.values.representationType !=
"undefined" && (
{isTypeConfirmed && (
<RepresentationActionButtons
t={t}
locale={router.locale}
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)
);