reps wip
This commit is contained in:
@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import jsonpath from "jsonpath";
|
||||
import _ from "lodash";
|
||||
import _, { property } from "lodash";
|
||||
import {
|
||||
Field,
|
||||
FieldArray,
|
||||
@@ -28,6 +28,12 @@ import RepInterestedPartyPerson from "./representationInterestedPartyPerson";
|
||||
import RepLandOwner from "./representationLandowner";
|
||||
import RepCompleteSubmit from "./representationCompleteSubmit";
|
||||
import { useSession, signIn, signOut } from "next-auth/react";
|
||||
import {
|
||||
updateCase,
|
||||
patchCase,
|
||||
uploadRepFiles,
|
||||
sendEmail,
|
||||
} from "../../../actions";
|
||||
|
||||
import {
|
||||
RenderPickList,
|
||||
@@ -76,6 +82,18 @@ let MakeRepresentation = (props) => {
|
||||
|
||||
casesObj = Object.assign({}, ...casesObj);
|
||||
|
||||
var detailsObj = {};
|
||||
|
||||
currentType == "searchResultsObj"
|
||||
? (casesObj = jsonpath.query(
|
||||
setCaseQueryObj,
|
||||
'$..[?(@.title=="' + caseReference + '")]'
|
||||
))
|
||||
: (casesObj = jsonpath.query(
|
||||
setCaseQueryObj,
|
||||
'$..[?(@.reference=="' + caseReference + '")]'
|
||||
));
|
||||
|
||||
const capacityOptionsArr = [
|
||||
"Appellant",
|
||||
"Agent",
|
||||
@@ -129,6 +147,7 @@ let MakeRepresentation = (props) => {
|
||||
currentView={currentView}
|
||||
setSubmitBack={setSubmitBack}
|
||||
props={props}
|
||||
caseReference={caseReference}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -214,31 +233,159 @@ let MakeRepresentation = (props) => {
|
||||
}
|
||||
};
|
||||
|
||||
const updateRepresentation = async (
|
||||
values,
|
||||
sendSavedEmail,
|
||||
useSaveStatus
|
||||
) => {
|
||||
let incidentId = props.appealType.caseReference.incidentid;
|
||||
let updateBody = values || {};
|
||||
|
||||
// "pinswg_name": "2022-11-29-IP-REP_BOND_1",
|
||||
|
||||
const repDate = new Date();
|
||||
|
||||
let day = repDate.getDate();
|
||||
let month = repDate.getMonth() + 1;
|
||||
let year = repDate.getFullYear();
|
||||
|
||||
const repType = "";
|
||||
switch (values.representationCapacity) {
|
||||
case "Appellant":
|
||||
repType = "APPELLANT";
|
||||
break;
|
||||
case "Agent":
|
||||
repType = "AGENT";
|
||||
break;
|
||||
case "Interested Party/Person":
|
||||
repType = "IP";
|
||||
break;
|
||||
case "Land Owner":
|
||||
repType = "LO";
|
||||
break;
|
||||
|
||||
default:
|
||||
// code block
|
||||
}
|
||||
|
||||
Object.assign(updateBody, {
|
||||
"pinswg_name":
|
||||
year +
|
||||
"-" +
|
||||
month +
|
||||
"-" +
|
||||
day +
|
||||
"-" +
|
||||
repType +
|
||||
"-REP" +
|
||||
"_" +
|
||||
props.props.accountDetails.accountDetails.lastname,
|
||||
"containerID": props.props.accountDetails.containerID,
|
||||
});
|
||||
|
||||
updateBody = JSON.stringify(updateBody);
|
||||
updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
|
||||
updateBody = updateBody.replace(/:"No"/gm, `:false`);
|
||||
updateBody = JSON.parse(updateBody);
|
||||
|
||||
Object.keys(updateBody).forEach((key) => {
|
||||
if (updateBody[key] === null) {
|
||||
delete updateBody[key];
|
||||
}
|
||||
if (key.indexOf("_") == 0) {
|
||||
delete updateBody[key];
|
||||
}
|
||||
});
|
||||
|
||||
//console.log(updateBody);
|
||||
|
||||
window.alert(`form is :\n\n${JSON.stringify(updateBody, null, 2)}`);
|
||||
|
||||
const reference = "PEDW-PARTIAL-REP";
|
||||
const templateId = "021b0a7b-df00-41f1-b94e-c269bee98c75";
|
||||
const emailAddress = props.props.accountDetails.loggedinUserEmail;
|
||||
const personalisation = {
|
||||
"caseReference": props.caseReference,
|
||||
"emailAddress": props.props.accountDetails.loggedinUserEmail,
|
||||
"returnLink": "",
|
||||
"linkExpiry": 10 * 60,
|
||||
};
|
||||
props.currentView.representationSubmit == "true" &&
|
||||
(sendSavedEmail == true &&
|
||||
sendEmail(templateId, emailAddress, personalisation, reference),
|
||||
useSaveStatus &&
|
||||
router.replace(
|
||||
router.locale != "en"
|
||||
? router.locale + "/myportal"
|
||||
: "/myportal"
|
||||
));
|
||||
};
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
// console.log(
|
||||
// values,
|
||||
// values.representationCapacity,
|
||||
// currentView.representationCapacity
|
||||
// );
|
||||
currentView.representationSubmit != true
|
||||
? // console.log(
|
||||
// values,
|
||||
// values.representationCapacity,
|
||||
// currentView.representationCapacity
|
||||
// );
|
||||
|
||||
// console.log(_.isEmpty(currentView.representationCapacity));
|
||||
// console.log(
|
||||
// values.representationCapacity
|
||||
// .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
|
||||
// .toLowerCase() == currentView.representationCapacity
|
||||
// );
|
||||
// console.log(_.isEmpty(currentView.representationCapacity));
|
||||
// console.log(
|
||||
// values.representationCapacity
|
||||
// .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
|
||||
// .toLowerCase() == currentView.representationCapacity
|
||||
// );
|
||||
|
||||
_.isEmpty(currentView.representationCapacity)
|
||||
? setRepresentationCapacity(
|
||||
values.representationCapacity
|
||||
.replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
|
||||
.toLowerCase()
|
||||
)
|
||||
: setRepresentationSubmit("true");
|
||||
_.isEmpty(currentView.representationCapacity)
|
||||
? setRepresentationCapacity(
|
||||
values.representationCapacity
|
||||
.replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
|
||||
.toLowerCase()
|
||||
)
|
||||
: setRepresentationSubmit(true)
|
||||
: currentView.representationSubmit == true &&
|
||||
(console.log("capacity", currentView.representationCapacity),
|
||||
console.log("has errors:", props.invalid),
|
||||
props.invalid == false &&
|
||||
updateRepresentation(values, false, false),
|
||||
uploadRepresentationFiles(values),
|
||||
setRepresentationSubmitConfirmation(true));
|
||||
|
||||
window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
|
||||
};
|
||||
|
||||
const uploadRepresentationFiles = (values) => {
|
||||
// get filelists from values object
|
||||
let fileListObj = _.filter(values, function (v, key) {
|
||||
return _.includes(key, "representationDocuments");
|
||||
});
|
||||
|
||||
console.log(fileListObj);
|
||||
|
||||
console.log(
|
||||
"\n////////////////////////\n upload files:",
|
||||
values.containerID
|
||||
);
|
||||
|
||||
var dataObj = values;
|
||||
|
||||
for (let key in dataObj) {
|
||||
_.includes(key, "representationDocuments") == true &&
|
||||
delete dataObj[key];
|
||||
}
|
||||
|
||||
uploadRepFiles(
|
||||
dataObj,
|
||||
fileListObj,
|
||||
values.containerID,
|
||||
props.caseReference
|
||||
).then((data) => {
|
||||
//console.log("hello", data);
|
||||
|
||||
return data;
|
||||
});
|
||||
};
|
||||
|
||||
const repForm = props.props.form;
|
||||
|
||||
// console.log(
|
||||
@@ -312,7 +459,7 @@ const mapStateToProps = (state) => {
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
setRepresentationCapacity: (representationCapacity) => {
|
||||
dispatch(reset("representationForm"));
|
||||
//dispatch(reset("representationForm"));
|
||||
dispatch(setRepresentationCapacity(representationCapacity));
|
||||
},
|
||||
setRepresentationSubmit: (representationSubmit) => {
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
RenderTextfield,
|
||||
RenderRadioList,
|
||||
RenderMultiline,
|
||||
RenderCondtionalRadioList,
|
||||
} from "./representationElements";
|
||||
import {
|
||||
setRepresentationCapacity,
|
||||
@@ -32,12 +33,15 @@ const RepAgent = (props) => {
|
||||
{file.path} - {file.size} bytes
|
||||
</li>
|
||||
));
|
||||
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 - agent</h2>
|
||||
<h2 className="govuk-heading-m ">
|
||||
Representation from an Agent
|
||||
</h2>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
<label
|
||||
@@ -54,7 +58,7 @@ const RepAgent = (props) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
{/* <div className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<Field
|
||||
className="govuk-input govuk-!-width-three-quarters"
|
||||
@@ -67,6 +71,24 @@ const RepAgent = (props) => {
|
||||
label="Description of representation"
|
||||
/>
|
||||
</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>
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
|
||||
@@ -39,6 +39,9 @@ const RepAppellant = (props) => {
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<h2 className="govuk-heading-m ">
|
||||
Representation for an Appellant
|
||||
</h2>
|
||||
<label
|
||||
className="govuk-label govuk-body-m"
|
||||
htmlFor="representationType"
|
||||
@@ -53,7 +56,7 @@ const RepAppellant = (props) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
{/* <div className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<Field
|
||||
className="govuk-input govuk-!-width-three-quarters"
|
||||
@@ -66,7 +69,7 @@ const RepAppellant = (props) => {
|
||||
label="Description of representation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<p className="govuk-body">
|
||||
|
||||
@@ -47,6 +47,8 @@ let RepCapacitySelection = (props) => {
|
||||
formObj={formObj}
|
||||
currentType={currentType}
|
||||
casesObj={casesObj}
|
||||
caseReference={props.props.caseReference}
|
||||
searchResultsObj={props.props.searchResultsObj}
|
||||
/>{" "}
|
||||
<div id="rep-details" className="vo_hiddens">
|
||||
<div className="govuk-grid-column-full">
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
} from "../../../store/currentView/action";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import RepComplete from "./representationComplete";
|
||||
import _ from "lodash";
|
||||
|
||||
const RepCompleteSubmit = (props) => {
|
||||
let { t } = useTranslation();
|
||||
@@ -38,6 +39,8 @@ const RepCompleteSubmit = (props) => {
|
||||
</li>
|
||||
));
|
||||
|
||||
const repFormData = formObj.representationForm.values;
|
||||
|
||||
return (
|
||||
<>
|
||||
{currentView.representationSubmitConfirmation == true ? (
|
||||
@@ -47,6 +50,174 @@ const RepCompleteSubmit = (props) => {
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-grid-row govuk-body">
|
||||
<h1 className="govuk-heading-m ">Submit</h1>
|
||||
<dl className="govuk-summary-list ">
|
||||
<h2 className="govuk-heading-m govuk-!-margin-top-9">
|
||||
Your representation:
|
||||
</h2>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:representation-representation-type"
|
||||
)}
|
||||
</dt>
|
||||
|
||||
<dd className="govuk-summary-list__value">
|
||||
{repFormData.representationType}
|
||||
</dd>
|
||||
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setSubmitBack();
|
||||
}}
|
||||
>
|
||||
{t("newappeal:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
{/* {FieldsTranslations(
|
||||
rows[0].value
|
||||
)} */}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
{_.has(
|
||||
repFormData,
|
||||
"representationOnBehalfOf"
|
||||
) && (
|
||||
<>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:representation-onbehalfof"
|
||||
)}
|
||||
</dt>
|
||||
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
repFormData.representationOnBehalfOf
|
||||
}
|
||||
</dd>
|
||||
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setSubmitBack();
|
||||
}}
|
||||
>
|
||||
{t(
|
||||
"newappeal:change-link-label"
|
||||
)}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
{/* {FieldsTranslations(
|
||||
rows[0].value
|
||||
)} */}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
{repFormData.representationOnBehalfOf ==
|
||||
"Yes" && (
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t(
|
||||
"case:representation-onbehalfof-details"
|
||||
)}
|
||||
</dt>
|
||||
|
||||
<dd className="govuk-summary-list__value">
|
||||
{
|
||||
repFormData.representationOnBehalfOf_details
|
||||
}
|
||||
</dd>
|
||||
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setSubmitBack();
|
||||
}}
|
||||
>
|
||||
{t(
|
||||
"newappeal:change-link-label"
|
||||
)}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
{/* {FieldsTranslations(
|
||||
rows[0].value
|
||||
)} */}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:representation-comments")}
|
||||
</dt>
|
||||
|
||||
<dd className="govuk-summary-list__value">
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: repFormData.representationComments,
|
||||
}}
|
||||
/>
|
||||
</dd>
|
||||
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setSubmitBack();
|
||||
}}
|
||||
>
|
||||
{t("newappeal:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
{/* {FieldsTranslations(
|
||||
rows[0].value
|
||||
)} */}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
<div className="govuk-summary-list__row">
|
||||
<dt className="govuk-summary-list__key">
|
||||
{t("case:representation-files")}
|
||||
</dt>
|
||||
|
||||
<dd className="govuk-summary-list__value">
|
||||
files
|
||||
</dd>
|
||||
|
||||
<dd className="govuk-summary-list__actions">
|
||||
<a
|
||||
className="govuk-link"
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setSubmitBack();
|
||||
}}
|
||||
>
|
||||
{t("newappeal:change-link-label")}
|
||||
<span className="govuk-visually-hidden">
|
||||
{" "}
|
||||
{/* {FieldsTranslations(
|
||||
rows[0].value
|
||||
)} */}
|
||||
</span>
|
||||
</a>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p>
|
||||
The gathering and subsequent processing of the
|
||||
personal data supplied by you in this form, is
|
||||
@@ -90,7 +261,8 @@ const RepCompleteSubmit = (props) => {
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
onClick={() =>
|
||||
setRepresentationSubmitConfirmation()
|
||||
//setRepresentationSubmitConfirmation()
|
||||
setRepresentationSubmit(true)
|
||||
}
|
||||
>
|
||||
Continue
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { Field, reduxForm } from "redux-form";
|
||||
import { RenderPickList, RenderTextfield } from "./representationElements";
|
||||
import jsonpath from "jsonpath";
|
||||
|
||||
const RepDetails = (props) => {
|
||||
let { t } = useTranslation();
|
||||
@@ -10,7 +11,18 @@ const RepDetails = (props) => {
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { currentType, casesObj } = props;
|
||||
const { currentType, casesObj, caseReference } = props;
|
||||
|
||||
let setCaseDetailsObj = props.searchResultsObj.searchDetailsObj;
|
||||
|
||||
var detailsObj = {};
|
||||
|
||||
detailsObj = jsonpath.query(
|
||||
setCaseDetailsObj,
|
||||
'$..[?(@.pinswg_name=="' + caseReference + '")]'
|
||||
);
|
||||
|
||||
detailsObj = detailsObj[0];
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -24,6 +36,9 @@ const RepDetails = (props) => {
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{casesObj.appellantApplicant || ""}
|
||||
{detailsObj[
|
||||
"_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
|
||||
] || "not entered"}
|
||||
</dd>
|
||||
</div>
|
||||
{/* <div className="govuk-summary-list__row">
|
||||
@@ -39,12 +54,36 @@ const RepDetails = (props) => {
|
||||
{t("case:summary-site-address-label")}
|
||||
</dt>
|
||||
<dd className="govuk-summary-list__value">
|
||||
{casesObj.address1 || ""}
|
||||
<br />
|
||||
{casesObj.town || ""}
|
||||
|
||||
<br />
|
||||
{casesObj.postcode || ""}
|
||||
{_.has(detailsObj, "pinswg_siteaddressline1")
|
||||
? detailsObj.pinswg_siteaddressline1
|
||||
: ""}
|
||||
{_.has(detailsObj, "pinswg_siteaddressline1") &&
|
||||
detailsObj.pinswg_siteaddressline1 !=
|
||||
null && <br />}
|
||||
{_.has(detailsObj, "pinswg_siteaddressline2")
|
||||
? detailsObj.pinswg_siteaddressline2
|
||||
: ""}
|
||||
{_.has(detailsObj, "pinswg_siteaddressline2") &&
|
||||
detailsObj.pinswg_siteaddressline2 !=
|
||||
null && <br />}
|
||||
{_.has(detailsObj, "pinswg_siteaddresstown")
|
||||
? detailsObj.pinswg_siteaddresstown
|
||||
: ""}
|
||||
{_.has(detailsObj, "pinswg_siteaddresstown") &&
|
||||
detailsObj.pinswg_siteaddresstown !=
|
||||
null && <br />}
|
||||
{_.has(detailsObj, "pinswg_siteaddresscounty")
|
||||
? detailsObj.pinswg_siteaddresscounty
|
||||
: ""}
|
||||
{_.has(
|
||||
detailsObj,
|
||||
"pinswg_siteaddresscounty"
|
||||
) &&
|
||||
detailsObj.pinswg_siteaddresscounty !=
|
||||
null && <br />}
|
||||
{_.has(detailsObj, "pinswg_siteaddresspostcode")
|
||||
? detailsObj.pinswg_siteaddresspostcode
|
||||
: ""}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
@@ -84,29 +84,176 @@ export const RenderRadioList = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const RenderCondtionalRadioList = ({
|
||||
datafieldname,
|
||||
legend,
|
||||
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={id + "-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>
|
||||
)}
|
||||
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
|
||||
<label
|
||||
className="govuk-fieldset__heading govuk-body-m"
|
||||
id="representationCapacity_label"
|
||||
>
|
||||
{legend}
|
||||
</label>
|
||||
</legend>
|
||||
|
||||
<div id={id + "-hint"} className="govuk-hint">
|
||||
e.g. ‘Owners of Numbers 1-5 High Street‘, or
|
||||
‘Mr and Mrs Smith‘ or ‘The executors
|
||||
of Mr Evans‘ estate‘
|
||||
</div>
|
||||
<div className="govuk-radios">
|
||||
{Object.keys(options).map((key, index) => (
|
||||
<div key={key} className="govuk-!-margin-bottom-3">
|
||||
<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]}
|
||||
validate={[required]}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-radios__label"
|
||||
htmlFor={id + "_" + index}
|
||||
>
|
||||
{options[key]}
|
||||
</label>
|
||||
</div>
|
||||
{value == "Yes" && options[key] == "Yes" && (
|
||||
<div
|
||||
className="govuk-radios__conditional "
|
||||
id={"conditional-" + id}
|
||||
>
|
||||
<div
|
||||
className="govuk-form-group"
|
||||
key={"yes_group_" + key}
|
||||
>
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor={id + "_details"}
|
||||
>
|
||||
Enter the name of the
|
||||
company/group/organisation *
|
||||
</label>
|
||||
<Field
|
||||
className="govuk-input govuk-!-width-one-half"
|
||||
id={id + "_details"}
|
||||
name={id + "_details"}
|
||||
component="input"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const RenderPickList = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
optionsArr,
|
||||
meta: { touched, errorStr },
|
||||
meta: { touched, error },
|
||||
errorMsg,
|
||||
}) => {
|
||||
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>
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<label className="govuk-label" htmlFor="sort">
|
||||
{label}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span
|
||||
id="passport-issued-error"
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">Error:</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{touched && errorStr && <span>{errorStr}</span>}
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -123,6 +270,8 @@ export const RenderTextfield = ({
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<>
|
||||
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
|
||||
@@ -140,6 +289,7 @@ export const RenderTextfield = ({
|
||||
name={name}
|
||||
id={id}
|
||||
type={type}
|
||||
validate={[required]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
@@ -219,6 +369,7 @@ export function MultiLinefield(props) {
|
||||
component={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
validate={[required]}
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
/>
|
||||
@@ -448,15 +599,9 @@ export const RenderFileUpload = (field) => {
|
||||
onDrop={(filesToUpload, e) => {
|
||||
const renamedAcceptedFiles = filesToUpload.map(
|
||||
(file) =>
|
||||
new File(
|
||||
[file],
|
||||
`${getDocumentType(field.documentTypeCode)}_${
|
||||
file.name
|
||||
}`,
|
||||
{
|
||||
type: file.type,
|
||||
}
|
||||
)
|
||||
new File([file], `${file.name}`, {
|
||||
type: file.type,
|
||||
})
|
||||
);
|
||||
field.input.onChange(renamedAcceptedFiles);
|
||||
}}
|
||||
@@ -561,3 +706,25 @@ export const RenderFileUpload = (field) => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function FileUploadField(props) {
|
||||
return (
|
||||
<>
|
||||
<h2 className="govuk-heading-s">{props.label} </h2>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderFileUpload}
|
||||
className="govuk-input govuk-input--width-20"
|
||||
//validate={[required]}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
ticketnumber={props.ticketnumber}
|
||||
hint={props.hint}
|
||||
fileList={props.fileList}
|
||||
setFilesForAppeal={props.setFilesForAppeal}
|
||||
containerID={props.containerID}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,8 +5,9 @@ import { Field, reduxForm } from "redux-form";
|
||||
import {
|
||||
RenderPickList,
|
||||
RenderTextfield,
|
||||
RenderRadioList,
|
||||
RenderCondtionalRadioList,
|
||||
RenderMultiline,
|
||||
FileUploadField,
|
||||
} from "./representationElements";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
|
||||
@@ -21,6 +22,8 @@ const RepInterestedPartyPerson = (props) => {
|
||||
setRepresentationCapacity,
|
||||
setRepresentationSubmit,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
|
||||
const files = acceptedFiles.map((file) => (
|
||||
<li key={file.path}>
|
||||
@@ -32,7 +35,7 @@ const RepInterestedPartyPerson = (props) => {
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-grid-row">
|
||||
<h2 className="govuk-heading-m ">
|
||||
Representation - interested
|
||||
Representation from an Interested Party/Person
|
||||
</h2>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
@@ -46,262 +49,84 @@ const RepInterestedPartyPerson = (props) => {
|
||||
name="representationType"
|
||||
component={RenderPickList}
|
||||
datafieldname="representationType"
|
||||
validate={[required]}
|
||||
optionsArr={interestedPersonRepresentationArr}
|
||||
errorMsg={t("newappeal:select-an-option-label")}
|
||||
/>
|
||||
</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"
|
||||
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">
|
||||
<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. ‘Owners of Numbers 1-5 High
|
||||
Street‘, or ‘Mr and Mrs
|
||||
Smith‘ or ‘The executors of Mr
|
||||
Evans‘ estate‘
|
||||
</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">
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
{/* <Link href="/representation">
|
||||
</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={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
/>
|
||||
</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>
|
||||
</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> */}
|
||||
{/* <Link href="/representation">
|
||||
<a
|
||||
onClick={() => {
|
||||
setRepresentationSubmit(true);
|
||||
@@ -311,15 +136,15 @@ const RepInterestedPartyPerson = (props) => {
|
||||
Continue
|
||||
</a>
|
||||
</Link> */}
|
||||
<a
|
||||
onClick={() => {
|
||||
setRepresentationCapacity();
|
||||
}}
|
||||
className="govuk-link"
|
||||
>
|
||||
Back
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
onClick={() => {
|
||||
setRepresentationCapacity();
|
||||
//setRepresentationSubmit(true);
|
||||
}}
|
||||
className="govuk-link"
|
||||
>
|
||||
Back
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -37,7 +37,7 @@ const RepLandOwner = (props) => {
|
||||
<div className="govuk-grid-column-full">
|
||||
<div className="govuk-grid-row">
|
||||
<h2 className="govuk-heading-m ">
|
||||
Representation - landowner
|
||||
Representation for a Land owner
|
||||
</h2>
|
||||
|
||||
<div className="govuk-form-group">
|
||||
@@ -55,7 +55,7 @@ const RepLandOwner = (props) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="govuk-grid-row">
|
||||
{/* <div className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<Field
|
||||
className="govuk-input govuk-!-width-three-quarters"
|
||||
@@ -68,7 +68,7 @@ const RepLandOwner = (props) => {
|
||||
label="Description of representation"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
<p className="govuk-body">
|
||||
|
||||
Reference in New Issue
Block a user