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

Merged PR 393: base flow for representations

Browse Source 
base flow for representations

Related work items: #5281
This commit is contained in:
Robert Bond
2021-08-09 09:18:30 +00:00
parent f9f36bd065 b3fe6bf5f5
commit aa0ccef280
31 changed files with 2494 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/breadcrumbs.js
+20
View File
@@ -177,6 +177,26 @@ const Breadcrumbs = (props) => {
) : ( ) : (
"" ""
)} )}
{router.pathname == "/representation" ? (
<>
<li className="govuk-breadcrumbs__list-item">
<Link href="/myportal">
<a className="govuk-breadcrumbs__link">
My Portal
</a>
</Link>
</li>
<li className="govuk-breadcrumbs__list-item">
Make representation for:{" "}
{
props.props.currentView.caseReference
.currentReference
}
</li>
</>
) : (
""
)}
{router.pathname == "/account/personaldetails" ? ( {router.pathname == "/account/personaldetails" ? (
<> <>
<li className="govuk-breadcrumbs__list-item"> <li className="govuk-breadcrumbs__list-item">
components/case.js
+2
View File
@@ -26,6 +26,8 @@ const CaseSummary = (props) => {
awaitingSubmission={props.awaitingSubmission} awaitingSubmission={props.awaitingSubmission}
caseReference={props.caseReference} caseReference={props.caseReference}
currentType={props.currentType} currentType={props.currentType}
searchResultsObj={props.searchResultsObj}
searchString={props.searchString}
/> />
<Documents /> <Documents />
</div> </div>
components/case/representation/index copy.js
+212
View File
@@ -0,0 +1,212 @@
import Link from "next/link";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import _ from "lodash";
import { Field, FieldArray, reduxForm, formValueSelector } from "redux-form";
import { connect } from "react-redux";
import { useDropzone } from "react-dropzone";
import { setRepresentationCapacity } from "../../../store/currentView/action";
import RepCapacitySelection from "./representationCapacitySelection";
import RepDetails from "./representationDetails";
import RepAppellant from "./representationAppellant";
import RepAgent from "./representationAgent";
import RepInterestedPartyPerson from "./representationInterestedPartyPerson";
import RepLandOwner from "./representationLandowner";
import {
RenderPickList,
RenderRadioList,
RenderTextfield,
} from "./representationElements";
let MakeRepresentation = (props) => {
let { t } = useTranslation();
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const [clearRepForm, setClearRepForm] = useState(false);
const router = useRouter();
const { locale } = router;
const {
caseReference,
myCases,
myRepresentations,
watchedCases,
awaitingSubmission,
searchResultsObj,
currentType,
currentView,
setRepresentationCapacity,
} = props;
const formObj = props.props.form;
let setCaseQueryObj = props[currentType];
var casesObj = {};
currentType == "searchResultsObj"
? (casesObj = jsonpath.query(
setCaseQueryObj,
'$..[?(@.title=="' + caseReference + '")]'
))
: (casesObj = jsonpath.query(
setCaseQueryObj,
'$..[?(@.reference=="' + caseReference + '")]'
));
casesObj = Object.assign({}, ...casesObj);
const capacityOptionsArr = [
"Appellant",
"Agent",
"Interested Party/Person",
"Land Owner",
];
const appellantApplicantRepresentationArr = [
"Other",
"Statement",
"Statement of common ground",
"Written statement of evidence",
];
const interestedPersonRepresentationArr = [
"Interested Party/Person correspondence",
];
const landOwnerRepresentationArr = [
"Other",
"Statement",
"Written statement of evidence",
];
const repCapacityType = () => {
currentView.representationCapacity == false
? false
: _.isEmpty(formObj["representationForm"])
? false
: _.isEmpty(formObj["representationForm"].values)
? false
: _.isEmpty(
formObj["representationForm"].values.representationCapacity
)
? setRepresentationCapacity(false)
: setRepresentationCapacity(
formObj["representationForm"].values.representationCapacity
.replace(/[\s\-\+\(\)\,\/]/g, "")
.toLowerCase()
);
return currentView.representationCapacity;
};
const whichControl = () => {
repCapacityType();
switch (currentView.representationCapacity) {
case false:
return (
<RepCapacitySelection
formObj={formObj}
capacityOptionsArr={capacityOptionsArr}
currentType={currentType}
casesObj={casesObj}
setRepresentationCapacity={setRepresentationCapacity}
/>
);
break;
case "appellant":
setRepresentationCapacity("appellant");
return (
<RepAppellant
formObj={formObj}
appellantApplicantRepresentationArr={
appellantApplicantRepresentationArr
}
setRepresentationCapacity={setRepresentationCapacity}
/>
);
break;
case "agent":
setRepresentationCapacity("agent");
return (
<RepAgent
formObj={formObj}
appellantApplicantRepresentationArr={
appellantApplicantRepresentationArr
}
setRepresentationCapacity={setRepresentationCapacity}
/>
);
break;
case "interestedpartyperson":
setRepresentationCapacity("interestedpartyperson");
return (
<RepInterestedPartyPerson
formObj={formObj}
interestedPersonRepresentationArr={
interestedPersonRepresentationArr
}
setRepresentationCapacity={setRepresentationCapacity}
/>
);
break;
case "landowner":
setRepresentationCapacity("landowner");
return (
<RepLandOwner
formObj={formObj}
landOwnerRepresentationArr={landOwnerRepresentationArr}
setRepresentationCapacity={setRepresentationCapacity}
/>
);
break;
default:
return (
<RepCapacitySelection
formObj={formObj}
capacityOptionsArr={capacityOptionsArr}
currentType={currentType}
casesObj={casesObj}
setRepresentationCapacity={setRepresentationCapacity}
/>
);
}
};
return (
<div>
{whichControl()} - {props.firstValue}
</div>
);
};
const mapStateToProps = (state) => {
return {
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
currentView: state.currentView,
//form: state.form,
};
};
const mapDispatchToProps = (dispatch) => {
return {
setRepresentationCapacity: (representationCapacity) => {
dispatch(setRepresentationCapacity(representationCapacity));
},
};
};
const selector = formValueSelector("representationForm");
export default connect(
mapStateToProps,
mapDispatchToProps
)(
reduxForm({
form: "representationForm",
destroyOnUnmount: false,
})(MakeRepresentation)
);
components/case/representation/index.js
+299
View File
@@ -0,0 +1,299 @@
import Link from "next/link";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import jsonpath from "jsonpath";
import _ from "lodash";
import {
Field,
FieldArray,
reduxForm,
formValueSelector,
reset,
} from "redux-form";
import { connect } from "react-redux";
import { useDropzone } from "react-dropzone";
import {
setRepresentationCapacity,
setRepresentationSubmit,
setSubmitBack,
setRepresentationSubmitConfirmation,
} from "../../../store/currentView/action";
import RepCapacitySelection from "./representationCapacitySelection";
import RepDetails from "./representationDetails";
import RepAppellant from "./representationAppellant";
import RepAgent from "./representationAgent";
import RepInterestedPartyPerson from "./representationInterestedPartyPerson";
import RepLandOwner from "./representationLandowner";
import RepCompleteSubmit from "./representationCompleteSubmit";
import {
RenderPickList,
RenderRadioList,
RenderTextfield,
} from "./representationElements";
let MakeRepresentation = (props) => {
let { t } = useTranslation();
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const [clearRepForm, setClearRepForm] = useState(false);
const router = useRouter();
const { locale } = router;
const {
caseReference,
myCases,
myRepresentations,
watchedCases,
awaitingSubmission,
searchResultsObj,
currentType,
currentView,
setRepresentationCapacity,
setRepresentationSubmit,
setSubmitBack,
handleSubmit,
setRepresentationSubmitConfirmation,
} = props;
const formObj = props.props.form;
let setCaseQueryObj = props[currentType];
var casesObj = {};
currentType == "searchResultsObj"
? (casesObj = jsonpath.query(
setCaseQueryObj,
'$..[?(@.title=="' + caseReference + '")]'
))
: (casesObj = jsonpath.query(
setCaseQueryObj,
'$..[?(@.reference=="' + caseReference + '")]'
));
casesObj = Object.assign({}, ...casesObj);
const capacityOptionsArr = [
"Appellant",
"Agent",
"Interested Party/Person",
"Land Owner",
];
const appellantApplicantRepresentationArr = [
"Other",
"Statement",
"Statement of common ground",
"Written statement of evidence",
];
const interestedPersonRepresentationArr = [
"Interested Party/Person correspondence",
];
const landOwnerRepresentationArr = [
"Other",
"Statement",
"Written statement of evidence",
];
const repCapacityType = () => {
return _.isEmpty(formObj["representationForm"])
? false
: _.isEmpty(formObj["representationForm"].values)
? false
: _.isEmpty(
formObj["representationForm"].values.representationCapacity
)
? false
: formObj["representationForm"].values.representationCapacity
.replace(/[\s\-\+\(\)\,\/]/g, "")
.toLowerCase();
};
const whichControl = () => {
switch (currentView.representationCapacity) {
case false:
return (
<RepCapacitySelection
formObj={formObj}
capacityOptionsArr={capacityOptionsArr}
currentType={currentType}
casesObj={casesObj}
setRepresentationCapacity={setRepresentationCapacity}
setRepresentationSubmit={setRepresentationSubmit}
onHandleSubmit={onHandleSubmit}
currentView={currentView}
setSubmitBack={setSubmitBack}
/>
);
break;
case "appellant":
//setRepresentationCapacity("appellant");
return (
<RepAppellant
formObj={formObj}
appellantApplicantRepresentationArr={
appellantApplicantRepresentationArr
}
setRepresentationCapacity={setRepresentationCapacity}
setRepresentationSubmit={setRepresentationSubmit}
onHandleSubmit={onHandleSubmit}
currentView={currentView}
setSubmitBack={setSubmitBack}
/>
);
break;
case "agent":
//setRepresentationCapacity("agent");
return (
<RepAgent
formObj={formObj}
appellantApplicantRepresentationArr={
appellantApplicantRepresentationArr
}
setRepresentationCapacity={setRepresentationCapacity}
setRepresentationSubmit={setRepresentationSubmit}
onHandleSubmit={onHandleSubmit}
currentView={currentView}
setSubmitBack={setSubmitBack}
/>
);
break;
case "interestedpartyperson":
// setRepresentationCapacity("interestedpartyperson");
return (
<RepInterestedPartyPerson
formObj={formObj}
interestedPersonRepresentationArr={
interestedPersonRepresentationArr
}
setRepresentationCapacity={setRepresentationCapacity}
setRepresentationSubmit={setRepresentationSubmit}
onHandleSubmit={onHandleSubmit}
currentView={currentView}
setSubmitBack={setSubmitBack}
/>
);
break;
case "landowner":
//setRepresentationCapacity("landowner");
return (
<RepLandOwner
formObj={formObj}
landOwnerRepresentationArr={landOwnerRepresentationArr}
setRepresentationCapacity={setRepresentationCapacity}
onHandleSubmit={onHandleSubmit}
setRepresentationSubmit={setRepresentationSubmit}
currentView={currentView}
setSubmitBack={setSubmitBack}
/>
);
break;
default:
return (
<RepCapacitySelection
formObj={formObj}
capacityOptionsArr={capacityOptionsArr}
currentType={currentType}
casesObj={casesObj}
setRepresentationCapacity={setRepresentationCapacity}
setRepresentationSubmit={setRepresentationSubmit}
currentView={currentView}
setSubmitBack={setSubmitBack}
/>
);
}
};
const onHandleSubmit = (values) => {
console.log(
values.representationCapacity,
currentView.representationCapacity
);
// console.log(_.isEmpty(currentView.representationCapacity));
// console.log(
// values.representationCapacity
// .replace(/[\s\-\+\(\)\,\/]/g, "")
// .toLowerCase() == currentView.representationCapacity
// );
_.isEmpty(currentView.representationCapacity)
? setRepresentationCapacity(
values.representationCapacity
.replace(/[\s\-\+\(\)\,\/]/g, "")
.toLowerCase()
)
: setRepresentationSubmit(true);
};
const repForm = props.props.form;
return (
<div>
{repForm["representationForm.submitSucceeded"] == true ? (
<RepCompleteSubmit
formObj={formObj}
capacityOptionsArr={capacityOptionsArr}
currentType={currentType}
casesObj={casesObj}
setRepresentationCapacity={setRepresentationCapacity}
setRepresentationSubmit={setRepresentationSubmit}
currentView={currentView}
setSubmitBack={setSubmitBack}
setRepresentationSubmitConfirmation={
setRepresentationSubmitConfirmation
}
/>
) : (
<form onSubmit={handleSubmit(onHandleSubmit)}>
{whichControl()}
</form>
)}
{console.log("is submitted", currentView.representationSubmit)}
</div>
);
};
const mapStateToProps = (state) => {
return {
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
currentView: state.currentView,
//form: state.form,
};
};
const mapDispatchToProps = (dispatch) => {
return {
setRepresentationCapacity: (representationCapacity) => {
dispatch(setRepresentationCapacity(representationCapacity));
dispatch(reset("representationForm"));
},
setRepresentationSubmit: (representationSubmit) => {
dispatch(setRepresentationSubmit(representationSubmit));
},
setSubmitBack: () => {
dispatch(setRepresentationSubmit(false));
},
setRepresentationSubmitConfirmation: () => {
dispatch(setRepresentationSubmitConfirmation(true));
},
};
};
const selector = formValueSelector("representationForm");
export default connect(
mapStateToProps,
mapDispatchToProps
)(
reduxForm({
form: "representationForm",
destroyOnUnmount: false,
})(MakeRepresentation)
);
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;
components/case/representation/representationAppellant.js
+238
View File
@@ -0,0 +1,238 @@
import Link from "next/link";
import { connect } from "react-redux";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { Field, reduxForm, reset } from "redux-form";
import {
RenderPickList,
RenderTextfield,
RenderRadioList,
RenderMultiline,
} from "./representationElements";
import { useDropzone } from "react-dropzone";
import {
setRepresentationCapacity,
setRepresentationSubmit,
} from "../../../store/currentView/action";
const RepAppellant = (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 - appellantApplicant
</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">
{currentView.representationCapacity}
<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 RepAppellant;
components/case/representation/representationCapacitySelection.js
+88
View File
@@ -0,0 +1,88 @@
import Link from "next/link";
import { connect } from "react-redux";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import {
Field,
reduxForm,
formValueSelector,
handleSubmit,
reset,
} from "redux-form";
import {
RenderPickList,
RenderTextfield,
RenderRadioList,
RenderMultiline,
} from "./representationElements";
import { useDropzone } from "react-dropzone";
import RepDetails from "./representationDetails";
import { setRepresentationCapacity } from "../../../store/currentView/action";
let RepCapacitySelection = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const {
formObj,
capacityOptionsArr,
currentType,
casesObj,
validate,
handleSubmit,
} = props;
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const files = acceptedFiles.map((file) => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
const required = (value) => (value ? undefined : "Required");
return (
<>
<RepDetails
formObj={formObj}
currentType={currentType}
casesObj={casesObj}
/>{" "}
<div id="rep-details" className="vo_hiddens">
<div className="govuk-grid-column-full">
<div className="govuk-grid-row">
<h2 className="govuk-heading-m ">
Your details - {props.firstValue}
</h2>
<Field
name="representationCapacity"
datafieldname="representationCapacity"
label="In what capacity do you wish to make representations on this case?"
options={capacityOptionsArr}
id="representationCapacity"
className="govuk-radios__input"
errorMsg="Select an option"
component={RenderRadioList}
validate={[required]}
/>
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
Continue
</button>
</div>
</div>
</div>
</div>
</>
);
};
export default RepCapacitySelection;
components/case/representation/representationComplete.js
+76
View File
@@ -0,0 +1,76 @@
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,
setSubmitBack,
} from "../../../store/currentView/action";
import { useDropzone } from "react-dropzone";
const RepComplete = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const {
formObj,
appellantApplicantRepresentationArr,
setRepresentationCapacity,
setRepresentationSubmit,
currentView,
setSubmitBack,
setRepresentationSubmitConfirmation,
} = 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 ">
Submission of Representation
</h2>
<p>
Thank you for submitting your representation(s) using
the Appeals Casework Portal.
</p>
<p>
Please remember that any supporting documentation needs
to be received by us within the appropriate deadline for
the case. Anything you send to us must be clearly marked
with the case reference number and the site address
(including the postcode, where known).
</p>
<p>
You will shortly receive confirmation to the email
address you have provided.
</p>
</div>
<div className="govuk-grid-row">
<div className="govuk-button-group">
<Link href="/myportal">
<a className="govuk-button">Continue</a>
</Link>
</div>
</div>
</div>
</div>
);
};
export default RepComplete;
components/case/representation/representationCompleteSubmit.js
+122
View File
@@ -0,0 +1,122 @@
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,
setSubmitBack,
setRepresentationSubmitConfirmation,
} from "../../../store/currentView/action";
import { useDropzone } from "react-dropzone";
import RepComplete from "./representationComplete";
const RepCompleteSubmit = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const {
formObj,
appellantApplicantRepresentationArr,
setRepresentationCapacity,
setRepresentationSubmit,
currentView,
setSubmitBack,
setRepresentationSubmitConfirmation,
} = props;
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const files = acceptedFiles.map((file) => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
return (
<>
{currentView.representationSubmitConfirmation == true ? (
<RepComplete />
) : (
<div id="rep-appellant">
<div className="govuk-grid-column-full">
<div className="govuk-grid-row">
<h2 className="govuk-heading-m ">Submit</h2>
<p>
The gathering and subsequent processing of the
personal data supplied by you in this form, is
in accordance with the terms of our registration
under the Data Protection Act 2018.
</p>
<p>
The Planning Inspectorate takes its data
protection responsibilities for the information
you provide us with very seriously. To find out
more about how we use and manage your personal
data, please go to our privacy notice.
</p>
<p>
I confirm that all sections of this form have
been fully completed and that the details are
correct to the best of my knowledge.
</p>
<div className="govuk-form-group">
<label
className="govuk-label govuk-body-m"
htmlFor="representationType"
>
I confirm I have read the above.
</label>
{/* <Field
name="representationType"
component={RenderPickList}
datafieldname="representationType"
optionsArr={appellantApplicantRepresentationArr}
/> */}
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
onClick={() =>
setRepresentationSubmitConfirmation()
}
>
Continue
</button>
{/* <a
onClick={() => {
setRepresentationSubmit(false);
}}
className="govuk-button"
>
Continue
</a> */}
<a
onClick={() => setSubmitBack()}
className="govuk-link"
>
Back
</a>
</div>
</div>
</div>
</div>
)}
</>
);
};
export default RepCompleteSubmit;
components/case/representation/representationDetails.js
+84
View File
@@ -0,0 +1,84 @@
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 } from "./representationElements";
const RepDetails = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { currentType, casesObj } = props;
return (
<>
{" "}
<div className="govuk-grid-column-full">
<div id="rep-sumamry" className="govuk-grid-row">
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
Make a representation
</h1>
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
Appeal Reference
</dt>
<dd className="govuk-summary-list__value">
{currentType == "searchResultsObj"
? casesObj.title
: casesObj.reference}
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t("case:summary-applicant-label")}
</dt>
<dd className="govuk-summary-list__value">
{casesObj.appellantApplicant || ""}
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t("case:summary-agent-label")}
</dt>
<dd className="govuk-summary-list__value">
Mr A Agent
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t("case:summary-site-address-label")}
</dt>
<dd className="govuk-summary-list__value">
{casesObj.address1 || ""}
<br />
{casesObj.town || ""}
<br />
{casesObj.postcode || ""}
</dd>
</div>
</dl>
</div>
<div className="govuk-grid-row">
<p className="govuk-body">
This form enables you to submit comments on a case to
The Planning Inspectorate.{" "}
</p>
<p className="govuk-body">
Please note that comments from interested parties need
to be made within the timetable. This can be found on
the previous &lsquo;Case Summary&lsquo; page. Comments
submitted after this date may be considered invalid and
returned to the sender.
</p>
</div>
</div>
</>
);
};
export default RepDetails;
components/case/representation/representationElements.js
+194
View File
@@ -0,0 +1,194 @@
import { Field, reduxForm } from "redux-form";
import router from "next/router";
import React, { useState } from "react";
export const RenderRadioList = ({
datafieldname,
name,
label,
id,
errorMsg,
options,
input: { onChange, value },
meta: { touched, error },
...custom
}) => {
const required = (value) => (value ? undefined : "Required");
return (
<>
<div
className={
touched && error
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group "
}
>
<fieldset
className="govuk-fieldset"
aria-describedby={name + "-hint"}
>
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
<label
className="govuk-fieldset__heading govuk-body-m"
id={id + "_label"}
>
{label}
</label>
</legend>
{touched && error && (
<span
id={id + "-error"}
className="govuk-error-message"
>
<span className="govuk-visually-hidden">
Error:
</span>{" "}
{errorMsg}
</span>
)}
<div className="govuk-radios govuk-radios--small">
{Object.keys(options).map((key, index) => (
<div
className="govuk-radios__item"
data-children-count={key}
key={key}
>
<Field
id={id + "_" + index}
name={id}
component="input"
type="radio"
className="govuk-radios__input"
value={options[key]}
/>
<label
className="govuk-label govuk-radios__label"
htmlFor={id + "_" + index}
>
{options[key]}
</label>
</div>
))}
</div>
</fieldset>
</div>
</>
);
};
export const RenderPickList = ({
datafieldname,
name,
label,
input,
optionsArr,
meta: { touched, errorStr },
}) => {
return (
<div>
<select {...input} className="govuk-select " id={name} name={name}>
<option>Select...</option>
{Object.keys(optionsArr).map((key, index) => {
return (
<option key={key} value={optionsArr[key]}>
{optionsArr[key]}
</option>
);
})}
</select>
{touched && errorStr && <span>{errorStr}</span>}
</div>
);
};
export const RenderTextfield = ({
id,
rows,
datafieldname,
name,
label,
input,
errorMsg,
type,
className,
meta: { touched, error },
...custom
}) => {
return (
<>
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
{label}
</label>
{touched && error && (
<span id={id + "-error"} className="govuk-error-message">
<span className="govuk-visually-hidden">Error:</span>{" "}
{errorMsg}
</span>
)}
<input
{...input}
className={className}
name={name}
id={id}
type={type}
/>
</>
);
};
export const RenderMultiline = ({
id,
className,
rows,
datafieldname,
name,
label,
input,
meta: { touched, error },
...custom
}) => {
return (
<>
<textarea
{...input}
id={id}
name={name}
rows={rows}
className={className}
></textarea>
</>
);
};
export function MultiLinefield(props) {
const { name, label } = props;
return (
<div className="govuk-form-group">
<h1 className="govuk-label-wrapper">
<label className="govuk-label" htmlFor={props.name}>
{props.label}
</label>
</h1>
<div
id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14"
>
Do not include personal or financial information, like your
National Insurance number or credit card details.
</div>
<Field
name={props.name}
id={props.name}
component={RenderMultiline}
type="text"
rows="5"
className="govuk-textarea govuk-input--width-30"
aria-describedby={props.name + "-hint"}
/>
</div>
);
}
components/case/representation/representationInterestedPartyPerson.js
+323
View File
@@ -0,0 +1,323 @@
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 { useDropzone } from "react-dropzone";
const RepInterestedPartyPerson = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const {
formObj,
interestedPersonRepresentationArr,
setRepresentationCapacity,
setRepresentationSubmit,
} = 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-interested">
<div className="govuk-grid-column-full">
<div className="govuk-grid-row">
<h2 className="govuk-heading-m ">
Representation - interested
</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={interestedPersonRepresentationArr}
/>
</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 className="govuk-grid-row">
<div className="govuk-form-group">
<fieldset
className="govuk-fieldset"
aria-describedby="contact-hint"
>
<legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
<label
className="govuk-fieldset__heading govuk-body-m"
id="representationCapacity_label"
>
Are you acting on behalf of a company,
group or organisation?
</label>
</legend>
<div id="contact-hint" className="govuk-hint">
e.g. &lsquo;Owners of Numbers 1-5 High
Street&lsquo;, or &lsquo;Mr and Mrs
Smith&lsquo; or &lsquo;The executors of Mr
Evans&lsquo; estate&lsquo;
</div>
<div
className="govuk-radios govuk-radios--conditional"
data-module="govuk-radios"
>
<div className="govuk-radios__item">
<input
className="govuk-radios__input"
id="contact"
name="contact"
type="radio"
value="email"
data-aria-controls="conditional-contact"
/>
<label
className="govuk-label govuk-radios__label"
htmlFor="contact"
>
Yes
</label>
</div>
<div
className="govuk-radios__conditional govuk-radios__conditional--hidden"
id="conditional-contact"
>
<div className="govuk-form-group">
<label
className="govuk-label"
htmlFor="contact-by-email"
>
Enter the name of the
company/group/organisation *
</label>
<input
className="govuk-input govuk-!-width-one-third"
id="contact-by-email"
name="contact-by-email"
type="email"
spellCheck="false"
autoComplete="email"
/>
</div>
</div>
<div className="govuk-radios__item">
<input
className="govuk-radios__input"
id="contact-2"
name="contact"
type="radio"
value="phone"
data-aria-controls="conditional-contact-2"
/>
<label
className="govuk-label govuk-radios__label"
htmlFor="contact-2"
>
No
</label>
</div>
</div>
</fieldset>
</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">
<Link href="/representation">
<a
onClick={() => {
setRepresentationSubmit(false);
}}
className="govuk-button"
>
Continue
</a>
</Link>
<a
onClick={() => {
setRepresentationCapacity(false);
}}
className="govuk-link"
>
Back
</a>
</div>
</div>
</div>
</div>
</div>
);
};
export default RepInterestedPartyPerson;
components/case/representation/representationLandowner.js
+230
View File
@@ -0,0 +1,230 @@
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 { useDropzone } from "react-dropzone";
import {
setRepresentationCapacity,
setRepresentationSubmit,
} from "../../../store/currentView/action";
const RepLandOwner = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const {
formObj,
landOwnerRepresentationArr,
setRepresentationCapacity,
setRepresentationSubmit,
} = props;
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const files = acceptedFiles.map((file) => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
return (
<div id="landowner">
<div className="govuk-grid-column-full">
<div className="govuk-grid-row">
<h2 className="govuk-heading-m ">
Representation - landowner
</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={landOwnerRepresentationArr}
/>
</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">
<Link href="/representation">
<a
onClick={() => {
setRepresentationSubmit(false);
}}
className="govuk-button"
>
Continue
</a>
</Link>
<a
onClick={() => {
setRepresentationCapacity(false);
}}
className="govuk-link"
>
Back
</a>
</div>
</div>
</div>
</div>
);
};
export default RepLandOwner;
components/case/summary.js
+38 -29
View File
@@ -15,15 +15,22 @@ const CaseSummary = (props) => {
myRepresentations, myRepresentations,
watchedCases, watchedCases,
awaitingSubmission, awaitingSubmission,
searchResultsObj,
currentType, currentType,
} = props; } = props;
let setCaseQueryObj = props[currentType]; let setCaseQueryObj = props[currentType];
var casesObj = {};
var casesObj = jsonpath.query( currentType == "searchResultsObj"
setCaseQueryObj, ? (casesObj = jsonpath.query(
'$..[?(@.reference=="' + caseReference + '")]' setCaseQueryObj,
); '$..[?(@.title=="' + caseReference + '")]'
))
: (casesObj = jsonpath.query(
setCaseQueryObj,
'$..[?(@.reference=="' + caseReference + '")]'
));
casesObj = Object.assign({}, ...casesObj); casesObj = Object.assign({}, ...casesObj);
@@ -32,7 +39,10 @@ const CaseSummary = (props) => {
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-full"> <div className="govuk-grid-column-full">
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7"> <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
Reference: {casesObj.reference} Reference:{" "}
{currentType == "searchResultsObj"
? casesObj.title
: casesObj.reference}
</h1> </h1>
<dl className="govuk-summary-list govuk-!-margin-bottom-9"> <dl className="govuk-summary-list govuk-!-margin-bottom-9">
@@ -41,7 +51,7 @@ const CaseSummary = (props) => {
{t("case:summary-applicant-label")} {t("case:summary-applicant-label")}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{casesObj.appellantApplicant} {casesObj.appellantApplicant || ""}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -57,12 +67,12 @@ const CaseSummary = (props) => {
{t("case:summary-site-address-label")} {t("case:summary-site-address-label")}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{casesObj.address1} {casesObj.address1 || ""}
<br /> <br />
{casesObj.town} {casesObj.town || ""}
<br /> <br />
{casesObj.postcode} {casesObj.postcode || ""}
</dd> </dd>
</div> </div>
</dl> </dl>
@@ -71,7 +81,7 @@ const CaseSummary = (props) => {
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-full"> <div className="govuk-grid-column-full">
<div className="govuk-button-group"> <div className="govuk-button-group">
<Link href="/advancedsearch"> <Link href="/representation">
<a className="govuk-button"> <a className="govuk-button">
{t("case:summary-make-representation-label")} {t("case:summary-make-representation-label")}
</a> </a>
@@ -110,7 +120,7 @@ const CaseSummary = (props) => {
{t("case:summary-lpa-label")} {t("case:summary-lpa-label")}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{casesObj.lpaname} {casesObj.lpaname || ""}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -120,7 +130,8 @@ const CaseSummary = (props) => {
)} )}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{casesObj.caseDetails.caseSummary} {casesObj.caseDetails.caseSummary ||
""}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -131,7 +142,8 @@ const CaseSummary = (props) => {
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{" "} {" "}
{casesObj.caseDetails.caseOfficer} {casesObj.caseDetails.caseOfficer ||
""}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -139,7 +151,8 @@ const CaseSummary = (props) => {
{t("case:summary-procedure-label")} {t("case:summary-procedure-label")}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{casesObj.caseDetails.procedure} {casesObj.caseDetails.procedure ||
""}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -147,11 +160,9 @@ const CaseSummary = (props) => {
{t("case:summary-status-label")} {t("case:summary-status-label")}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{ {casesObj[
casesObj[ "statuscode@OData.Community.Display.V1.FormattedValue"
"statuscode@OData.Community.Display.V1.FormattedValue" ] || ""}
]
}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -159,14 +170,13 @@ const CaseSummary = (props) => {
{t("case:summary-decision-label")} {t("case:summary-decision-label")}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{casesObj.caseDetails.decision} {casesObj.caseDetails.decision ||
""}
<br /> <br />
<Link href="/"> <Link href="/">
<a> <a>
{ {casesObj.caseDetails
casesObj.caseDetails .outcome_document || ""}
.outcome_document
}
</a> </a>
</Link> </Link>
</dd> </dd>
@@ -178,10 +188,8 @@ const CaseSummary = (props) => {
)} )}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{ {casesObj.caseDetails
casesObj.caseDetails .caseLinkStatus || ""}
.caseLinkStatus
}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -191,7 +199,8 @@ const CaseSummary = (props) => {
)} )}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{casesObj.caseDetails.linkedCases} {casesObj.caseDetails.linkedCases ||
""}
</dd> </dd>
</div> </div>
</dl> </dl>
components/header.js
+6 -7
View File
@@ -9,6 +9,7 @@ const Header = (props) => {
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
const { setLogout } = props; const { setLogout } = props;
const noSignoutLink = ["/", "/logout"];
return ( return (
<header <header
@@ -98,9 +99,8 @@ const Header = (props) => {
</div> </div>
<div className="content"> <div className="content">
<ul> <ul>
{router.pathname == "/logout" ? ( {noSignoutLink.includes(router.pathname) ==
"" true ? (
) : router.pathname == "/" ? (
"" ""
) : ( ) : (
<li> <li>
@@ -157,8 +157,9 @@ const Header = (props) => {
</div> </div>
</div> </div>
<div className="fullNav"> <div className="fullNav">
{router.pathname != "/" || {noSignoutLink.includes(router.pathname) == true ? (
router.pathname != "/logout" ? ( ""
) : (
<Link href="/logout"> <Link href="/logout">
<a <a
onClick={() => { onClick={() => {
@@ -169,8 +170,6 @@ const Header = (props) => {
{t("common:signout-label")} {t("common:signout-label")}
</a> </a>
</Link> </Link>
) : (
""
)} )}
<Link <Link
components/myportal/topthree.js
+7 -1
View File
@@ -20,7 +20,13 @@ const TopThree = (props) => {
<div className="cardModuleDetails"> <div className="cardModuleDetails">
<div className="cardModuleReference"> <div className="cardModuleReference">
<b>Case reference:</b>{" "} <b>Case reference:</b>{" "}
<Link href="/case"> <Link
href={
topThreeType == "awaitingSubmission"
? "/representation"
: "/case"
}
>
<a <a
data-id={i} data-id={i}
onClick={() => { onClick={() => {
components/myportal/viewall.js
+32 -7
View File
@@ -1,9 +1,13 @@
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { setCurrentReference } from "../../store/currentView/action";
import { connect } from "react-redux";
const ViewAllResults = (props) => {
const { searchString, searchResultsObj, currentView, setCurrentReference } =
props;
export default function ViewAllResults(props) {
const { searchString, searchResultsObj, currentView } = props;
let { t } = useTranslation(); let { t } = useTranslation();
const router = useRouter(); const router = useRouter();
@@ -18,7 +22,15 @@ export default function ViewAllResults(props) {
<div className="govuk-summary-list__row" key={key}> <div className="govuk-summary-list__row" key={key}>
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2"> <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<Link href="/case"> <Link href="/case">
<a> <a
onClick={() => {
setCurrentReference({
"currentReference":
resultsArr[index].reference,
"currentType": currentView.viewKey,
});
}}
>
<span className="results-visually-hidden"> <span className="results-visually-hidden">
Case Reference: Case Reference:
</span> </span>
@@ -102,12 +114,25 @@ export default function ViewAllResults(props) {
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="govuk-grid-column-full"> <div className="govuk-grid-column-full">
<div className="govuk-button-group"> <div className="govuk-button-group">
<Link href="/myportal"> <a
<a className="govuk-button">Back</a> onClick={() => router.back()}
</Link> className="govuk-button"
>
Back
</a>
</div> </div>
</div> </div>
</div> </div>
</> </>
); );
} };
const mapDispatchToProps = (dispatch) => {
return {
setCurrentReference: (currentReference) => {
dispatch(setCurrentReference(currentReference));
},
};
};
export default connect(null, mapDispatchToProps)(ViewAllResults);
components/newappeal/createCase.js
+45 -10
View File
@@ -157,17 +157,52 @@ let CreateCase = (props) => {
return ( return (
<option <option
key={key} key={key}
value={optionsObj[ value={
key _.isEmpty(
].Label.LocalizedLabels[0].Label.replace( optionsObj[key].Label
/[\s\-\+\(\)\,]/g, )
"" ? ""
).toLowerCase()} : _.isEmpty(
> optionsObj[key]
{ .Label
optionsObj[key].Label .LocalizedLabels
.LocalizedLabels[0].Label )
? ""
: _.isEmpty(
optionsObj[key]
.Label
.LocalizedLabels[0]
.Label
)
? ""
: optionsObj[
key
].Label.LocalizedLabels[0].Label.replace(
/[\s\-\+\(\)\,]/g,
""
).toLowerCase()
} }
>
{_.isEmpty(optionsObj[key])
? ""
: _.isEmpty(
optionsObj[key].Label
)
? ""
: _.isEmpty(
optionsObj[key].Label
.LocalizedLabels
)
? ""
: _.isEmpty(
optionsObj[key].Label
.LocalizedLabels[0]
.Label
)
? ""
: optionsObj[key].Label
.LocalizedLabels[0]
.Label}
</option> </option>
); );
})} })}
components/representation.js
+38
View File
@@ -0,0 +1,38 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { useContext } from "react";
import useTranslation from "next-translate/useTranslation";
import Summary from "./case/representation";
const CaseSummary = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<main
className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
id="main-content"
role="main"
>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<Summary
myCases={props.myCases}
myRepresentations={props.myRepresentations}
watchedCases={props.watchedCases}
awaitingSubmission={props.awaitingSubmission}
caseReference={props.caseReference}
currentType={props.currentType}
searchResultsObj={props.searchResultsObj}
searchString={props.searchString}
props={props.props}
/>
</div>
</div>
</main>
);
};
export default CaseSummary;
components/search/searchresults.js
+27 -8
View File
@@ -1,15 +1,17 @@
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { setCurrentReference } from "../../store/currentView/action";
import { connect } from "react-redux";
export default function SearchResults(props) { const SearchResults = (props) => {
const { searchString, searchResultsObj } = props; const { searchString, searchResultsObj, setCurrentReference } = props;
let { t } = useTranslation(); let { t } = useTranslation();
const router = useRouter(); const router = useRouter();
const { locale } = router; const { locale } = router;
var resultsArr = props.searchResultsObj.searchResultsObj.value || [{}]; var resultsArr = searchResultsObj.value || [{}];
const resultRow = Object.keys(resultsArr).map((key, index) => { const resultRow = Object.keys(resultsArr).map((key, index) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2"> <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
@@ -58,9 +60,7 @@ export default function SearchResults(props) {
</h1> </h1>
<p className="govuk-body"> <p className="govuk-body">
{t("search:searchresults-count-label", { {t("search:searchresults-count-label", {
count: props.searchResultsObj.searchResultsObj[ count: searchResultsObj["@odata.count"].toString(),
"@odata.count"
].toString(),
})} })}
. You searched for <em>&quot;{searchString}&quot;</em> . You searched for <em>&quot;{searchString}&quot;</em>
</p> </p>
@@ -91,7 +91,16 @@ export default function SearchResults(props) {
<div className="govuk-summary-list__row" key={key}> <div className="govuk-summary-list__row" key={key}>
<dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2"> <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-!-padding-left-2">
<Link href="/case"> <Link href="/case">
<a> <a
onClick={() => {
setCurrentReference({
"currentReference":
item.title,
"currentType":
"searchResultsObj",
});
}}
>
<span className="results-visually-hidden"> <span className="results-visually-hidden">
Case Reference: Case Reference:
</span> </span>
@@ -151,4 +160,14 @@ export default function SearchResults(props) {
</div> </div>
</div> </div>
); );
} };
const mapDispatchToProps = (dispatch) => {
return {
setCurrentReference: (currentReference) => {
dispatch(setCurrentReference(currentReference));
},
};
};
export default connect(null, mapDispatchToProps)(SearchResults);
components/searchresults.js
+1 -1
View File
@@ -22,7 +22,7 @@ export default function Search(props) {
<div className="govuk-grid-column-full"> <div className="govuk-grid-column-full">
<SearchResults <SearchResults
searchString={searchString} searchString={searchString}
searchResultsObj={searchResultsObj} searchResultsObj={searchResultsObj.searchResultsObj}
/> />
</div> </div>
</div> </div>
i18n.json
+3
View File
@@ -29,6 +29,9 @@
"/case": [ "/case": [
"case" "case"
], ],
"/representation": [
"case"
],
"/newappeal": [ "/newappeal": [
"newappeal" "newappeal"
], ],
package.json
+1
View File
@@ -32,6 +32,7 @@
"react-cookie-consent": "^6.2.4", "react-cookie-consent": "^6.2.4",
"react-datepicker": "^4.1.1", "react-datepicker": "^4.1.1",
"react-dom": "17.0.2", "react-dom": "17.0.2",
"react-dropzone": "^11.3.4",
"react-redux": "^7.2.4", "react-redux": "^7.2.4",
"react-xml-parser": "^1.1.8", "react-xml-parser": "^1.1.8",
"redux-devtools-extension": "^2.13.9", "redux-devtools-extension": "^2.13.9",
pages/case.js
+3
View File
@@ -38,6 +38,9 @@ const Home = (props) => {
<Breadcrumbs slug={appealtypes} props={props} /> <Breadcrumbs slug={appealtypes} props={props} />
<Case <Case
myCases={props.myCases.myCases} myCases={props.myCases.myCases}
searchResultsObj={
props.searchResultsObj.searchResultsObj
}
myRepresentations={ myRepresentations={
props.myRepresentations.myRepresentations props.myRepresentations.myRepresentations
} }
pages/myportal/index.js
+5
View File
@@ -70,6 +70,11 @@ export const getServerSideProps = wrapper.getServerSideProps(
async ({ query, req, res }) => { async ({ query, req, res }) => {
//console.log("the query", query); //console.log("the query", query);
res.setHeader(
"Cache-Control",
"public, s-maxage=604800, stale-while-revalidate"
);
const [ const [
myCases, myCases,
myRepresentations, myRepresentations,
pages/newappeal/index.js
+4
View File
@@ -75,6 +75,10 @@ const Home = (props) => {
export const getServerSideProps = wrapper.getServerSideProps( export const getServerSideProps = wrapper.getServerSideProps(
(store) => (store) =>
async ({ query, req, res }) => { async ({ query, req, res }) => {
res.setHeader(
"Cache-Control",
"public, s-maxage=604800, stale-while-revalidate"
);
const [appealTypeData, lpaData] = await Promise.all([ const [appealTypeData, lpaData] = await Promise.all([
await getAppealsTypes(), await getAppealsTypes(),
await getLPA(), await getLPA(),
pages/representation.js
+83
View File
@@ -0,0 +1,83 @@
import _ from "lodash";
import Head from "next/head";
import Header from "../components/header";
import Banner from "../components/banner";
import CookieBanner from "../components/cookieBanner";
import Breadcrumbs from "../components/breadcrumbs";
import CaseSummary from "../components/case";
import Footer from "../components/footer";
import Errorpage from "../components/errorpage";
import styles from "../styles/Home.module.css";
import { useSelector, shallowEqual, connect } from "react-redux";
import { wrapper } from "../store/store";
import Cookies from "cookies";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import Case from "../components/representation";
const Home = (props) => {
const { footerLinks, pages } = props;
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
const { appealtypes } = router.query;
return (
<div>
<Head>
<title>
{t("case:page-title")} - {t("common:service-name")}
</title>
</Head>
<div id="page_wrapper">
<CookieBanner />
<Header courseName={t("common:service-name")} />
<div className="govuk-width-container">
<Banner />
<Breadcrumbs slug={appealtypes} props={props} />
<Case
myCases={props.myCases.myCases}
searchResultsObj={
props.searchResultsObj.searchResultsObj
}
myRepresentations={
props.myRepresentations.myRepresentations
}
watchedCases={props.watchedCases.watchedCases}
awaitingSubmission={
props.awaitingSubmission.awaitingSubmission
}
caseReference={
props.currentView.caseReference.currentReference
}
currentType={
props.currentView.caseReference.currentType
}
props={props}
/>
</div>
<Footer footerLinks={footerLinks} />
</div>
</div>
);
};
const mapStateToProps = (state) => {
//console.log(state);
return {
currentView: state.currentView,
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
form: state.form,
myCases: state.myCases,
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
};
};
export default connect(mapStateToProps)(Home);
pages/searchresults.js
+8
View File
@@ -65,8 +65,16 @@ export const getServerSideProps = wrapper.getServerSideProps(
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
return { return {
currentView: state.currentView,
search: state.search, search: state.search,
searchResultsObj: state.searchResultsObj, searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
form: state.form,
myCases: state.myCases,
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
}; };
}; };
store/currentView/action.js
+33
View File
@@ -2,6 +2,9 @@ export const currentViewActionTypes = {
GETCURRENTVIEW: "GETCURRENTVIEW", GETCURRENTVIEW: "GETCURRENTVIEW",
SETCURRENTVIEW: "SETCURRENTVIEW", SETCURRENTVIEW: "SETCURRENTVIEW",
SETCURRENTREFERENCE: "SETCURRENTREFERENCE", SETCURRENTREFERENCE: "SETCURRENTREFERENCE",
SETREPRESENTATIONCAPACITY: "SETREPRESENTATIONCAPACITY",
SETREPRESENTATIONSUBMIT: "SETREPRESENTATIONSUBMIT",
SETREPRESENTATIONSUBMITCONFIRMATION: "SETREPRESENTATIONSUBMITCONFIRMATION",
}; };
export const getCurrentViewObj = () => (dispatch) => { export const getCurrentViewObj = () => (dispatch) => {
@@ -23,3 +26,33 @@ export const setCurrentReference = (caseReference) => (dispatch) => {
caseReference: caseReference, caseReference: caseReference,
}); });
}; };
export const setRepresentationCapacity =
(representationCapacity) => (dispatch) => {
return dispatch({
type: currentViewActionTypes.SETREPRESENTATIONCAPACITY,
representationCapacity: representationCapacity,
});
};
export const setRepresentationSubmit = (representationSubmit) => (dispatch) => {
return dispatch({
type: currentViewActionTypes.SETREPRESENTATIONSUBMIT,
representationSubmit: representationSubmit,
});
};
export const setSubmitBack = (representationSubmit) => (dispatch) => {
return dispatch({
type: currentViewActionTypes.SETREPRESENTATIONSUBMIT,
representationSubmit: representationSubmit,
});
};
export const setRepresentationSubmitConfirmation =
(representationSubmitConfirmation) => (dispatch) => {
return dispatch({
type: currentViewActionTypes.SETREPRESENTATIONSUBMITCONFIRMATION,
representationSubmitConfirmation: representationSubmitConfirmation,
});
};
store/currentView/reducer.js
+14
View File
@@ -3,6 +3,9 @@ import { currentViewActionTypes } from "./action";
const currentViewInitialState = { const currentViewInitialState = {
currentView: {}, currentView: {},
caseReference: {}, caseReference: {},
representationCapacity: {},
representationSubmit: null,
representationSubmitConfirmation: {},
}; };
export default function reducer(state = currentViewInitialState, action) { export default function reducer(state = currentViewInitialState, action) {
@@ -17,6 +20,17 @@ export default function reducer(state = currentViewInitialState, action) {
...state, ...state,
caseReference: action.caseReference, caseReference: action.caseReference,
}; };
case currentViewActionTypes.SETREPRESENTATIONCAPACITY:
return {
...state,
representationCapacity: action.representationCapacity,
};
case currentViewActionTypes.SETREPRESENTATIONSUBMITCONFIRMATION:
return {
...state,
representationSubmitConfirmation:
action.representationSubmitConfirmation,
};
default: default:
return state; return state;
} }
styles/sass/welshgov/_application.scss
+22
View File
@@ -46,6 +46,10 @@ a {
} }
} }
.govuk-checkboxes__conditional--hidden {
display: none;
}
.govuk-button { .govuk-button {
background-color: $red; background-color: $red;
@@ -654,3 +658,21 @@ ul#sharePageLinks.active {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eat%3C/title%3E%3Cpath d=%22M9.6,8.2a1.61,1.61,0,0,0-1.3.6,2.11,2.11,0,0,0-.5,1.3,1.75,1.75,0,0,0,.4,1.2,1.46,1.46,0,0,0,1.3.7,1.38,1.38,0,0,0,1.1-.6,2.39,2.39,0,0,0,.5-1.4,2,2,0,0,0-.6-1.5A2.39,2.39,0,0,0,9.6,8.2Z%22 style=%22fill:%23111%22/%3E%3Cpath d=%22M0,0V20H20V0ZM15.4,12.5l-.4.7H11.5l-.2-.6a2.73,2.73,0,0,1-1.9.8h0a2.66,2.66,0,0,1-2.2-1.1A3.46,3.46,0,0,1,7.2,8,2.87,2.87,0,0,1,9.4,7a3.55,3.55,0,0,1,1,.2c.2.1.5.2.6.4V6.8h1.5v5.3h1.6a5.75,5.75,0,0,0,.5-2.6,4,4,0,0,0-1.3-3A4.44,4.44,0,0,0,9.9,5.2,4.76,4.76,0,0,0,6.5,6.6,5.55,5.55,0,0,0,5.3,9.9a4.84,4.84,0,0,0,1.3,3.4A4.48,4.48,0,0,0,10,14.8h.2V16H10a5.62,5.62,0,0,1-4.4-1.9A6.26,6.26,0,0,1,4,9.9,5.91,5.91,0,0,1,9.9,4H10a6.56,6.56,0,0,1,4.4,1.7A5.46,5.46,0,0,1,16,9.5,8,8,0,0,1,15.4,12.5Z%22 style=%22fill:%23111%22/%3E%3C/svg%3E "); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eat%3C/title%3E%3Cpath d=%22M9.6,8.2a1.61,1.61,0,0,0-1.3.6,2.11,2.11,0,0,0-.5,1.3,1.75,1.75,0,0,0,.4,1.2,1.46,1.46,0,0,0,1.3.7,1.38,1.38,0,0,0,1.1-.6,2.39,2.39,0,0,0,.5-1.4,2,2,0,0,0-.6-1.5A2.39,2.39,0,0,0,9.6,8.2Z%22 style=%22fill:%23111%22/%3E%3Cpath d=%22M0,0V20H20V0ZM15.4,12.5l-.4.7H11.5l-.2-.6a2.73,2.73,0,0,1-1.9.8h0a2.66,2.66,0,0,1-2.2-1.1A3.46,3.46,0,0,1,7.2,8,2.87,2.87,0,0,1,9.4,7a3.55,3.55,0,0,1,1,.2c.2.1.5.2.6.4V6.8h1.5v5.3h1.6a5.75,5.75,0,0,0,.5-2.6,4,4,0,0,0-1.3-3A4.44,4.44,0,0,0,9.9,5.2,4.76,4.76,0,0,0,6.5,6.6,5.55,5.55,0,0,0,5.3,9.9a4.84,4.84,0,0,0,1.3,3.4A4.48,4.48,0,0,0,10,14.8h.2V16H10a5.62,5.62,0,0,1-4.4-1.9A6.26,6.26,0,0,1,4,9.9,5.91,5.91,0,0,1,9.9,4H10a6.56,6.56,0,0,1,4.4,1.7A5.46,5.46,0,0,1,16,9.5,8,8,0,0,1,15.4,12.5Z%22 style=%22fill:%23111%22/%3E%3C/svg%3E ");
background-repeat: no-repeat; background-repeat: no-repeat;
} }
//dropzone
.dropzone {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border-width: 2px;
border-radius: 2px;
border-color: #eeeeee;
border-style: dashed;
background-color: #fafafa;
color: #bdbdbd;
outline: none;
transition: border 0.24s ease-in-out;
}