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

base flow for representations

Browse Source
This commit is contained in:
robbond
2021-08-09 10:16:54 +01:00
parent f9f36bd065
commit b3fe6bf5f5
31 changed files with 2494 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/case/representation/representationAgent.js
+235
View File
@@ -0,0 +1,235 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { Field, reduxForm } from "redux-form";
import {
RenderPickList,
RenderTextfield,
RenderRadioList,
RenderMultiline,
} from "./representationElements";
import {
setRepresentationCapacity,
setRepresentationSubmit,
} from "../../../store/currentView/action";
import { useDropzone } from "react-dropzone";
const RepAgent = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const {
formObj,
appellantApplicantRepresentationArr,
setRepresentationCapacity,
setRepresentationSubmit,
currentView,
} = props;
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const files = acceptedFiles.map((file) => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
return (
<div id="rep-appellant">
<div className="govuk-grid-column-full">
<div className="govuk-grid-row">
<h2 className="govuk-heading-m ">Representation - 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>
<div className="govuk-grid-row">
<div className="govuk-form-group">
<Field
className="govuk-input govuk-!-width-three-quarters"
id="representationDescription"
name="representationDescription"
value="email"
data-aria-controls="representationDescription"
type="text"
component={RenderTextfield}
label="Description of representation"
/>
</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-checkboxes"
data-module="govuk-checkboxes"
>
<div className="govuk-checkboxes__item">
<Field
className="govuk-checkboxes__input"
id="commentBox"
name="commentBox"
value="email"
data-aria-controls="commentBox"
type="checkbox"
component={RenderTextfield}
/>
<label
className="govuk-label govuk-checkboxes__label"
htmlFor="commentBox"
>
the box below{" "}
</label>
</div>
<div
className={
_.isEmpty(formObj["representationForm"])
? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
: _.isEmpty(
formObj["representationForm"]
.values
)
? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
: _.isEmpty(
formObj["representationForm"]
.values.commentBox
)
? formObj["representationForm"]
.values.commentBox == false
? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
: "govuk-checkboxes__conditional"
: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
}
id="conditional-commentBox"
>
<div className="govuk-form-group">
<Field
name="representationComments"
id="representationComments"
component={RenderMultiline}
type="text"
rows="5"
className="govuk-textarea govuk-input--width-30"
aria-describedby={
props.name + "-hint"
}
/>
</div>
</div>
<div className="govuk-checkboxes__item">
<Field
className="govuk-checkboxes__input"
id="documentBox"
name="documentBox"
value="email"
data-aria-controls="documentBox"
type="checkbox"
component={RenderTextfield}
/>
<label
className="govuk-label govuk-checkboxes__label"
htmlFor="documentBox"
>
separate documents
</label>
</div>
<div
className={
_.isEmpty(formObj["representationForm"])
? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
: _.isEmpty(
formObj["representationForm"]
.values
)
? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
: _.isEmpty(
formObj["representationForm"]
.values.documentBox
)
? formObj["representationForm"]
.values.documentBox == false
? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
: "govuk-checkboxes__conditional"
: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
}
id="conditional-documentBox"
>
<div className="govuk-form-group">
<section className="container">
<div
{...getRootProps({
className: "dropzone",
})}
>
<input {...getInputProps()} />
<p>
Drag and drop files here or
click to select files
</p>
</div>
<aside>
<h4>Files</h4>
<ul>{files}</ul>
</aside>
</section>
</div>
</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(false);
}}
className="govuk-button"
>
Continue
</a> */}
<a
onClick={() => {
setRepresentationCapacity("false");
}}
className="govuk-link"
>
Back
</a>
</div>
</div>
</div>
</div>
);
};
export default RepAgent;