reps questionnaire progress panel

This commit is contained in:
2023-10-24 08:37:22 +01:00
parent 798ba01ea6
commit c4fcb6fa56
8 changed files with 509 additions and 1271 deletions
@@ -41,29 +41,28 @@ const RepAgent = (props) => {
const required = (value) => (value ? undefined : "Required");
return (
<div id="rep-appellant">
<div className="govuk-grid-column-full">
<div className="govuk-grid-row">
<h2 className="govuk-heading-m ">
Representation from an Agent
</h2>
<>
<div className="govuk-grid-row">
<h2 className="govuk-heading-m ">
Representation from an Agent
</h2>
<div className="govuk-form-group">
<label
className="govuk-label govuk-body-m"
htmlFor="representationType"
>
What kind of representation are you making?
</label>
<Field
name="representationType"
component={RenderPickList}
datafieldname="representationType"
optionsArr={appellantApplicantRepresentationArr}
/>
</div>
<div className="govuk-form-group">
<label
className="govuk-label govuk-body-m"
htmlFor="representationType"
>
What kind of representation are you making?
</label>
<Field
name="representationType"
component={RenderPickList}
datafieldname="representationType"
optionsArr={appellantApplicantRepresentationArr}
/>
</div>
{/* <div className="govuk-grid-row">
</div>
{/* <div className="govuk-grid-row">
<div className="govuk-form-group">
<Field
className="govuk-input govuk-!-width-three-quarters"
@@ -77,121 +76,119 @@ const RepAgent = (props) => {
/>
</div>
</div> */}
<div className="govuk-grid-row">
<div className="govuk-form-group">
<Field
name="representationOnBehalfOf"
datafieldname="representationOnBehalfOf"
// label="In what capacity do you wish to make representations on this case?"
options={["Yes", "No"]}
id="representationOnBehalfOf"
className="govuk-radios__input"
errorMsg={t("newappeal:select-an-option-label")}
component={RenderCondtionalRadioList}
validate={[required]}
legend={
"Are you acting on behalf of a company, group or organisation?"
}
/>
</div>
<div className="govuk-grid-row">
<div className="govuk-form-group">
<Field
name="representationOnBehalfOf"
datafieldname="representationOnBehalfOf"
// label="In what capacity do you wish to make representations on this case?"
options={["Yes", "No"]}
id="representationOnBehalfOf"
className="govuk-radios__input"
errorMsg={t("newappeal:select-an-option-label")}
component={RenderCondtionalRadioList}
validate={[required]}
legend={
"Are you acting on behalf of a company, group or organisation?"
}
/>
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-form-group">
<p className="govuk-body">
You can enter your comments in the space provided or
attach a separate document.
</p>
<fieldset
className="govuk-fieldset"
aria-describedby="commentBox-hint"
>
<div id="commentBox-hint" className="govuk-hint">
My comments are set out in:
</div>
<div className="govuk-form-group">
<Field
name="representationComments"
id="representationComments"
component={RenderRichMultiline}
type="text"
rows="5"
className="govuk-textarea govuk-input--width-30"
aria-describedby={props.name + "-hint"}
/>
<p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
Please note that all representations may be
published in line with our Publishing
Policy. Should your representation include
any sensitive information or potentially
defamatory information, it may be redacted
before publishing. If it contains racist,
libellous or offensive content it will be
returned to you and you will be asked to
provide an amended version.{" "}
<a href="https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html">
https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html
</a>
</p>
</div>
<div className="govuk-grid-row">
<div className="govuk-form-group">
<p className="govuk-body">
You can enter your comments in the space provided or
attach a separate document.
</p>
<fieldset
className="govuk-fieldset"
aria-describedby="commentBox-hint"
>
<div id="commentBox-hint" className="govuk-hint">
My comments are set out in:
</div>
<div className="govuk-form-group">
<Field
name="representationComments"
id="representationComments"
component={RenderRichMultiline}
type="text"
rows="5"
className="govuk-textarea govuk-input--width-30"
aria-describedby={props.name + "-hint"}
/>
<p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
Please note that all representations may be
published in line with our Publishing Policy.
Should your representation include any sensitive
information or potentially defamatory
information, it may be redacted before
publishing. If it contains racist, libellous or
offensive content it will be returned to you and
you will be asked to provide an amended version.{" "}
<a href="https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html">
https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html
</a>
</p>
</div>
<div className="govuk-form-group govuk-!-margin-bottom-9">
<FileUploadField
name={"representationDocuments"}
label={"Add your files"}
ticketnumber={props.props.caseReference}
hint={"sdsd"}
fileList={[]}
setFilesForRepresentation={[]}
containerID={
props.props.props.accountDetails.containerID
}
/>
</div>
{props.currentView.caseReference.hasOwnProperty(
"repDetails"
) &&
props.currentView.caseReference.repDetails.filesList
.length > 0 ? (
<div className="govuk-form-group govuk-!-margin-bottom-9">
<FileUploadField
name={"representationDocuments"}
label={"Add your files"}
ticketnumber={props.props.caseReference}
hint={"sdsd"}
fileList={[]}
setFilesForRepresentation={[]}
containerID={
props.props.props.accountDetails
.containerID
}
/>
</div>
{props.currentView.caseReference.hasOwnProperty(
"repDetails"
) &&
props.currentView.caseReference.repDetails.filesList
.length > 0 ? (
<div className="govuk-form-group govuk-!-margin-bottom-9">
{props.currentView.caseReference.repDetails.filesList.map(
(blob, i) => (
<div
key={blob.name + "_" + i}
className="govuk-!-margin-bottom-5 fileThumb "
>
<img
src={getThumbnailIconByExtension(
blob.name
)}
alt={blob.name}
width="50"
/>
{props.currentView.caseReference.repDetails.filesList.map(
(blob, i) => (
<div
key={blob.name + "_" + i}
className="govuk-!-margin-bottom-5 fileThumb "
>
<img
src={getThumbnailIconByExtension(
blob.name
)}
alt={blob.name}
width="50"
/>
<span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
{blob.name} (
{bytesToSize(blob.size)})
</span>
</div>
)
)}
</div>
) : (
""
)}
</fieldset>
</div>{" "}
</div>
<div className="govuk-grid-row">
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
{/* <a
<span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
{blob.name} (
{bytesToSize(blob.size)})
</span>
</div>
)
)}
</div>
) : (
""
)}
</fieldset>
</div>{" "}
</div>
<div className="govuk-grid-row">
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
{/* <a
onClick={() => {
setRepresentationSubmit(true);
}}
@@ -199,18 +196,17 @@ const RepAgent = (props) => {
>
Continue ww
</a> */}
<a
onClick={() => {
setRepresentationCapacity();
}}
className="govuk-link"
>
Back
</a>
</div>
<a
onClick={() => {
setRepresentationCapacity();
}}
className="govuk-link"
>
Back
</a>
</div>
</div>
</div>
</>
);
};