549 lines
25 KiB
JavaScript
549 lines
25 KiB
JavaScript
import _ from "lodash";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import { useRouter } from "next/router";
|
|
import { useState } from "react";
|
|
import { useDropzone } from "react-dropzone";
|
|
import { connect } from "react-redux";
|
|
import RepComplete from "./representationComplete";
|
|
import RepLPAQuestionnaireCheck_enforcement from "./representationQuestionnairesCheck/representationLPAQuestionnaireCheck_enforcement";
|
|
import RepLPAQuestionnaireCheck_s78 from "./representationQuestionnairesCheck/representationLPAQuestionnaireCheck_s78";
|
|
import Link from "next/link";
|
|
import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
|
|
|
|
const RepCompleteSubmit = (props) => {
|
|
let { t } = useTranslation();
|
|
const [confirmSections, setConfirmSections] = useState(false);
|
|
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
const {
|
|
formObj,
|
|
appellantApplicantRepresentationArr,
|
|
setRepresentationCapacity,
|
|
setRepresentationSubmit,
|
|
currentView,
|
|
setSubmitBack,
|
|
setRepresentationSubmitConfirmation,
|
|
setRepresentationMessageSent,
|
|
setRepresentationReset,
|
|
setShowQuestionnaireSection,
|
|
} = props;
|
|
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
|
|
const files = acceptedFiles.map((file) => (
|
|
<li key={file.path}>
|
|
{file.path} - {file.size} bytes
|
|
</li>
|
|
));
|
|
|
|
const repFormData = formObj.representationForm.values;
|
|
|
|
//const repDate = new Date();
|
|
|
|
// let day = repDate.getDate();
|
|
// let month = repDate.getMonth() + 1;
|
|
// let year = repDate.getFullYear();
|
|
|
|
// let repType = "";
|
|
// switch (repFormData.representationCapacity) {
|
|
// case t("myrepresentations:capacity-options-arr-appellant"):
|
|
// repType = "APP";
|
|
// break;
|
|
// case t("myrepresentations:capacity-options-arr-agent"):
|
|
// repType = "AGENT";
|
|
// break;
|
|
// case t("myrepresentations:capacity-options-arr-interested"):
|
|
// repType = "IP";
|
|
// break;
|
|
// case "Land Owner":
|
|
// repType = "LO";
|
|
// break;
|
|
// case "lpa":
|
|
// repType = "LPA";
|
|
// break;
|
|
|
|
// default:
|
|
// // code block
|
|
// }
|
|
|
|
// Object.assign(repFormData, {
|
|
// "repfile_name": repFormData.hasOwnProperty("repfile_name")
|
|
// ? repFormData.repfile_name
|
|
// : year +
|
|
// "-" +
|
|
// month +
|
|
// "-" +
|
|
// day +
|
|
// "-" +
|
|
// repDate.getHours() +
|
|
// repDate.getMinutes() +
|
|
// repDate.getSeconds() +
|
|
// "_" +
|
|
// repType +
|
|
// "_" +
|
|
// props.props.props.accountDetails.accountDetails.lastname +
|
|
// "_" +
|
|
// props.props.props.accountDetails.accountDetails.firstname,
|
|
// "pinswg_name": props.props.currentView.caseReference.currentReference,
|
|
// "containerID": props.props.props.accountDetails.containerID,
|
|
// "appealType": props.props.currentView.caseReference.appealType,
|
|
// "incidentID": props.props.currentView.caseReference.incidentid,
|
|
// "caseRef": props.props.currentView.caseReference.currentReference,
|
|
// });
|
|
|
|
console.log("///////// repFormData:", repFormData);
|
|
|
|
const whichQuestionnaireCheck = () => {
|
|
{
|
|
switch (currentView.caseReference.appealType) {
|
|
case 846040000:
|
|
case 846040001:
|
|
case 846040006:
|
|
case 846040025:
|
|
case 846040004:
|
|
case 846040018:
|
|
case 846040003:
|
|
case 846040009:
|
|
case 846040008:
|
|
case 846040017:
|
|
return (
|
|
<RepLPAQuestionnaireCheck_s78
|
|
props={props}
|
|
formObj={formObj}
|
|
setSubmitBack={setSubmitBack}
|
|
setShowQuestionnaireSection={
|
|
setShowQuestionnaireSection
|
|
}
|
|
setRepresentationSubmit={setRepresentationSubmit}
|
|
/>
|
|
);
|
|
break;
|
|
case 846040005:
|
|
case 846040006:
|
|
case 846040007:
|
|
return (
|
|
<RepLPAQuestionnaireCheck_enforcement
|
|
props={props}
|
|
formObj={formObj}
|
|
setSubmitBack={setSubmitBack}
|
|
setShowQuestionnaireSection={
|
|
setShowQuestionnaireSection
|
|
}
|
|
setRepresentationSubmit={setRepresentationSubmit}
|
|
/>
|
|
);
|
|
break;
|
|
default:
|
|
return <></>;
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
let buildAppealFilesArray = [];
|
|
|
|
let filesUploadObj = props.currentView.fileList;
|
|
|
|
// formObj.representationForm.values.representationDocuments;
|
|
|
|
for (let key in filesUploadObj) {
|
|
typeof filesUploadObj[key].name != "undefined" &&
|
|
buildAppealFilesArray.push({
|
|
"name": filesUploadObj[key].name,
|
|
"size": filesUploadObj[key].contentLength,
|
|
});
|
|
}
|
|
|
|
console.log(
|
|
buildAppealFilesArray,
|
|
formObj.representationForm.values.filesList
|
|
);
|
|
|
|
// buildAppealFilesArray = formObj.representationForm.values.hasOwnProperty(
|
|
// "filesList"
|
|
// )
|
|
// ? formObj.representationForm.values.filesList
|
|
// : [];
|
|
|
|
let arrUniq = [
|
|
...new Map(buildAppealFilesArray.map((v) => [v.name, v])).values(),
|
|
];
|
|
|
|
buildAppealFilesArray = buildAppealFilesArray.filter(function (el) {
|
|
return el != null;
|
|
});
|
|
|
|
// const arrUniq = buildAppealFilesArray.filter(
|
|
// (obj1, i, arr) => arr.findIndex((obj2) => obj2.name === obj1.name) === i
|
|
// );
|
|
|
|
//arrUniq = arrUniq.concat(filesUploadObj);
|
|
|
|
function removeNullObjects(arr) {
|
|
if (arr.length === 0) {
|
|
return arr;
|
|
}
|
|
return arr.filter((obj) => obj !== null);
|
|
}
|
|
function removeEmptyObjects(arr) {
|
|
if (arr.length === 0) {
|
|
return arr;
|
|
}
|
|
return arr.filter(
|
|
(obj) =>
|
|
obj && typeof obj === "object" && Object.keys(obj).length > 0
|
|
);
|
|
}
|
|
arrUniq = removeNullObjects(arrUniq);
|
|
arrUniq = removeEmptyObjects(arrUniq);
|
|
|
|
Object.assign(formObj.representationForm.values, {
|
|
"filesList": arrUniq,
|
|
});
|
|
|
|
let filterFiles = [];
|
|
return (
|
|
<>
|
|
{currentView.representationSubmitConfirmation == true ? (
|
|
<RepComplete
|
|
repFormData={repFormData}
|
|
props={props}
|
|
setRepresentationMessageSent={setRepresentationMessageSent}
|
|
setRepresentationReset={setRepresentationReset}
|
|
/>
|
|
) : (
|
|
<div id="rep-appellant">
|
|
<div className="govuk-grid-column-full">
|
|
<div className="govuk-grid-row govuk-body">
|
|
<h1 className="govuk-heading-m ">
|
|
{" "}
|
|
{t(
|
|
"myrepresentations:rep-check-submit-heading"
|
|
)}
|
|
</h1>
|
|
<dl className="govuk-summary-list ">
|
|
<h2 className="govuk-heading-m govuk-!-margin-top-9">
|
|
{t(
|
|
"myrepresentations:rep-check-your-rep-heading"
|
|
)}
|
|
</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">
|
|
{router.locale == "cy"
|
|
? repFormData.representationType ==
|
|
"Questionnaire"
|
|
? "Holiadur"
|
|
: repFormData.representationType ==
|
|
"Statement"
|
|
? "Datganiad"
|
|
: repFormData.representationType ==
|
|
"Final comments"
|
|
? "Sylwadau terfynol"
|
|
: repFormData.representationType
|
|
: repFormData.representationType}
|
|
</dd>
|
|
|
|
<dd className="govuk-summary-list__actions">
|
|
<a
|
|
className="govuk-link"
|
|
href="#"
|
|
onClick={() => {
|
|
setSubmitBack();
|
|
}}
|
|
>
|
|
{t("common: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(
|
|
"common: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(
|
|
"common: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
|
|
className="multiline-elipsis"
|
|
dangerouslySetInnerHTML={{
|
|
__html: repFormData.representationComments,
|
|
}}
|
|
/>
|
|
</dd>
|
|
|
|
<dd className="govuk-summary-list__actions">
|
|
<a
|
|
className="govuk-link"
|
|
href="#"
|
|
onClick={() => {
|
|
setSubmitBack();
|
|
}}
|
|
>
|
|
{t("common: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">
|
|
{arrUniq.length > 0
|
|
? arrUniq.map((blob, i) => (
|
|
<div
|
|
key={blob.name + "_" + i}
|
|
className="govuk-!-margin-bottom-5 fileThumb "
|
|
>
|
|
<img
|
|
src={getThumbnailIconByExtension(
|
|
blob.name
|
|
)}
|
|
alt={blob.name}
|
|
width="50"
|
|
/>
|
|
|
|
<span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
|
|
{blob.name} (
|
|
{bytesToSize(
|
|
blob.size
|
|
)}
|
|
)
|
|
</span>
|
|
</div>
|
|
))
|
|
: ""}
|
|
</dd>
|
|
|
|
<dd className="govuk-summary-list__actions">
|
|
<a
|
|
className="govuk-link"
|
|
href="#"
|
|
onClick={() => {
|
|
setSubmitBack();
|
|
}}
|
|
>
|
|
{t("common:change-link-label")}
|
|
<span className="govuk-visually-hidden">
|
|
{" "}
|
|
{/* {FieldsTranslations(
|
|
rows[0].value
|
|
)} */}
|
|
</span>
|
|
</a>
|
|
</dd>
|
|
</div>
|
|
{repFormData.representationType ==
|
|
"Questionnaire"
|
|
? whichQuestionnaireCheck()
|
|
: ""}
|
|
</dl>
|
|
<p>
|
|
{t(
|
|
"myrepresentations:rep-check-tandc-para-one"
|
|
)}
|
|
</p>
|
|
|
|
<p>
|
|
{t(
|
|
"myrepresentations:rep-check-tandc-para-two"
|
|
)}{" "}
|
|
<Link href={t("common:footer-privacy-link")}>
|
|
{t(
|
|
"common:footer-privacy-notice-link-label"
|
|
)}
|
|
</Link>
|
|
.
|
|
</p>
|
|
|
|
<p>
|
|
{t(
|
|
"myrepresentations:rep-check-tandc-para-three"
|
|
)}
|
|
</p>
|
|
|
|
<div className="govuk-form-group">
|
|
<div className="govuk-checkboxes govuk-checkboxes--small">
|
|
<div className="govuk-checkboxes__item">
|
|
<input
|
|
name="pinswg_checkconfirmation"
|
|
id="pinswg_checkconfirmation"
|
|
type="checkbox"
|
|
className="govuk-checkboxes__input"
|
|
value=""
|
|
onChange={(e) => {
|
|
setConfirmSections(
|
|
!confirmSections
|
|
);
|
|
}}
|
|
/>
|
|
<label
|
|
className="govuk-label govuk-checkboxes__label"
|
|
htmlFor="pinswg_checkconfirmation"
|
|
>
|
|
{t(
|
|
"myrepresentations:rep-check-tandc-para-four"
|
|
)}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <Field
|
|
name="representationType"
|
|
component={RenderPickList}
|
|
datafieldname="representationType"
|
|
optionsArr={appellantApplicantRepresentationArr}
|
|
/> */}
|
|
</div>
|
|
</div>
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-button-group">
|
|
<button
|
|
disabled={confirmSections ? false : true}
|
|
type="submit"
|
|
className="govuk-button"
|
|
data-module="govuk-button"
|
|
onClick={() => {
|
|
setRepresentationSubmitConfirmation(
|
|
true
|
|
);
|
|
setRepresentationSubmit(true);
|
|
}}
|
|
>
|
|
{t("common:continue-button")}
|
|
</button>
|
|
{/* <a
|
|
onClick={() => {
|
|
setRepresentationSubmit(false);
|
|
}}
|
|
className="govuk-button"
|
|
>
|
|
{t("common:continue-button")}
|
|
</a> */}
|
|
|
|
<a
|
|
onClick={() => setSubmitBack()}
|
|
className="govuk-link"
|
|
>
|
|
{t("case:summary-back-button-label")}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
search: state.search,
|
|
searchResultsObj: state.searchResultsObj,
|
|
formData: state.formData,
|
|
appealType: state.appealType,
|
|
currentView: state.currentView,
|
|
myRepresentations: state.myRepresentations,
|
|
initialValues: state.currentView.caseReference.repDetails,
|
|
accountDetails: state.accountDetails,
|
|
//form: state.form,
|
|
};
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {};
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(RepCompleteSubmit);
|