Files
pedwfrontend/components/pdftemplates/enforcement_pdf.js
T
2025-02-07 12:44:49 +00:00

1829 lines
85 KiB
JavaScript

import {
Document,
Image,
Page,
StyleSheet,
Text,
View,
Font,
} from "@react-pdf/renderer";
import Html from "react-pdf-html";
import { getFormCollectionByID, bytesToSize } from "../../components/utils";
import transLookupCY from "../../locales/cy/myrepresentations.json";
import transLookupEN from "../../locales/en/myrepresentations.json";
const getTrans = (locale, key) => {
let jsonQuery = `$.${key}`;
let jsonObj = locale == "cy" ? transLookupCY : transLookupEN;
//console.log(locale, jsonObj[key]);
return jsonObj[key];
};
const styles = StyleSheet.create({
page: {
backgroundColor: "white",
padding: 20,
fontSize: 16,
paddingBottom: 50,
},
header: {
fontSize: 25,
fontFamily: "Helvetica",
flexDirection: "row",
justifyContent: "space-between",
},
subHeader: {
fontSize: 20,
},
logoImage: { width: "200pt" },
questionBullet: { width: "5%", fontSize: 12 },
questionText: { width: "30%", fontSize: 12 },
questionTextMid: { width: "75%", fontSize: 12, marginRight: 10 },
questionTextWide: { width: "95%", fontSize: 12, marginBottom: 5 },
questionAnswer: {
color: "#757575",
width: "65%",
fontSize: 12,
padding: 5,
border: 1,
borderColor: "#eee",
paddingLeft: 10,
backgroundColor: "white",
},
questionAnswerSmall: {
color: "#757575",
width: "300",
fontSize: 12,
padding: 5,
border: 1,
borderColor: "#eee",
paddingLeft: 10,
paddingRight: 10,
backgroundColor: "white",
marginRight: 10,
},
questionAnswerSmaller: {
color: "#757575",
width: "90",
fontSize: 12,
padding: 5,
border: 1,
borderColor: "#eee",
paddingLeft: 10,
backgroundColor: "white",
},
questionAnswerMid: {
color: "#757575",
width: "20%",
fontSize: 12,
padding: 5,
border: 1,
borderColor: "#eee",
paddingLeft: 10,
backgroundColor: "white",
},
questionAnswerWide: {
color: "#757575",
width: "100%",
fontSize: 12,
border: 1,
borderColor: "#eee",
backgroundColor: "white",
padding: 5,
},
questionAnswerFull: {
color: "#757575",
width: "100%",
fontSize: 10,
padding: 5,
border: 1,
borderColor: "#eee",
backgroundColor: "white",
},
sectionContainer: {
backgroundColor: "#F8F8F8",
padding: 10,
marginTop: 20,
fontSize: 15,
},
pageNumber: {
position: "absolute",
fontSize: 12,
bottom: 20,
left: 0,
right: 0,
textAlign: "center",
color: "grey",
},
richArea: {
fontSize: 12,
flexDirection: "column",
},
});
export const EnforcementQuestionnaire_pdf = ({ docProps }) => {
//console.log(docProps);
function formatDates(dateObj) {
var dateObj = new Date(dateObj);
var dd = String(dateObj.getDate()).padStart(2, "0");
var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
var yyyy = dateObj.getFullYear();
return dd + "/" + mm + "/" + yyyy;
}
let values = docProps;
let appealTypeValue = getFormCollectionByID(values.appealType);
//console.log("//////////////////////\n docpropseeeee:".docProps);
//console.log("sdffhjdhjdjdgkj: ", values.procedureType);
Font.registerHyphenationCallback((word) => [word]);
function CleanHTML(htmlStr) {
let cleanStr =
typeof htmlStr === "string"
? htmlStr.replace(
/<p><br><\/p>|<p class=\"ql-align-justify\"><br><\/p>/g,
""
)
: "";
return cleanStr;
}
return (
<Document>
<Page size="A4" style={styles.page} wrap>
<View style={{ padding: 20 }}>
<View style={styles.header}>
<View>
<Text
style={{
width: "60%",
fontFamily: "Helvetica-Bold",
}}
>
{getTrans(
docProps.locale,
"lpa-questionnaire-heading"
)}
</Text>
<View>
<Text
style={{
width: "60%",
fontSize: 15,
marginTop: 20,
fontFamily: "Helvetica-Bold",
}}
>
{getTrans(
docProps.locale,
"lpa-questionnaire-subheading-enf"
)}
</Text>
</View>
</View>
<Image
style={styles.logoImage}
src="public/assets/images/pedw_logo.png"
alt="PEDW Logo"
/>
</View>
<View>
<Text style={{ marginTop: 10, fontSize: 14 }}>
{getTrans(docProps.locale, "s78-heading-para-two")}
</Text>
</View>
<View style={styles.section}>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text style={{ fontSize: 14 }}>
{getTrans(
docProps.locale,
"section-heading-zero"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>1.</Text>
<Text style={styles.questionText}>
{getTrans(
docProps.locale,
"s78-section-question-1"
)}
:
</Text>
<Text style={styles.questionAnswer}>
{values.caseRef}
</Text>
</View>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>2.</Text>
<Text style={styles.questionText}>
{getTrans(
docProps.locale,
"s78-section-question-2"
)}
:
</Text>
<Text style={styles.questionAnswer}>
{values.pinswg_lpareference}
</Text>
</View>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>3.</Text>
<Text style={styles.questionText}>
{getTrans(
docProps.locale,
"enf-section-question-3"
)}
</Text>
<Text style={styles.questionAnswer}>
{values.siteAddress}
</Text>
</View>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>4.</Text>
<Text style={styles.questionText}>
{getTrans(
docProps.locale,
"s78-section-question-4"
)}
</Text>
<Text style={styles.questionAnswer}>
{appealTypeValue.value}
</Text>
</View>
</View>
</View>
<View>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text style={{ fontSize: 14 }}>
{getTrans(
docProps.locale,
"s78-section-heading-one"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
5.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-4"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.procedureType}
</Text>
</View>
{values.procedureType !=
"Written representations" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.procedureTypeEvidence
)}
</Html>
</View>
)}
</View>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>6.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-5"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.enterToView}
</Text>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
7.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-6"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.enterNeighbouringLandToViewSite}
</Text>
</View>
{values.enterNeighbouringLandToViewSite ==
"Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={{ fontSize: 12 }}>
{CleanHTML(
values.enterNeighbouringLandToViewSiteEvidence
)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
8.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-7"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{
values.enterNeighbouringLandAccessRequired
}
</Text>
</View>
{values.enterNeighbouringLandAccessRequired !=
"Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.enterNeighbouringLandAccessRequiredEvidence
)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
9.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-8"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.healthAndSafetyIssues}
</Text>
</View>
{values.healthAndSafetyIssues == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.healthAndSafetyIssuesEvidence
)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
10.
</Text>
<Text style={styles.questionTextWide}>
{getTrans(
docProps.locale,
"enf-section-question-9"
)}
</Text>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(values.LPAcontactDetails)}
</Html>
</View>
</View>
</View>
</View>
<View>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text style={{ fontSize: 14 }}>
{getTrans(
docProps.locale,
"enf-section-heading-two"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
11.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-10"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.feePaid}
</Text>
</View>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
12.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-11"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.feeExempt}
</Text>
</View>
{values.feeExempt == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.feeExemptEvidence
)}
</Html>
</View>
)}
</View>
</View>
</View>
<View>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text style={{ fontSize: 14 }}>
{getTrans(
docProps.locale,
"enf-section-heading-three"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>13.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-12"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.previousGrantedCerts}
</Text>
</View>
{values.previousGrantedCerts == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.previousGrantedCertsEvidence
)}
</Html>
</View>
)}
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>14.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-13"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.stopNoticeServed}
</Text>
</View>
{values.stopNoticeServed == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.stopNoticeServedEvidence
)}
</Html>
</View>
)}
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>15.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-14"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.relatedCases}
</Text>
</View>
{values.relatedCases == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(values.relatedCasesEvidence)}
</Html>
</View>
)}
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>16.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-15"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.previousEnforcement}
</Text>
</View>
{values.previousEnforcement == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.previousEnforcementEvidence
)}
</Html>
</View>
)}
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>17.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-16"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.subjectArticle4}
</Text>
</View>
{values.subjectArticle4 == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.subjectArticle4Evidence
)}
</Html>
</View>
)}
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>18.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-17"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.previousPDRRestriction}
</Text>
</View>
{values.previousPDRRestriction == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.previousPDRRestrictionEvidence
)}
</Html>
</View>
)}
</View>
</View>
<View>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text style={{ fontSize: 14 }}>
{getTrans(
docProps.locale,
"enf-section-heading-four"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
19.
</Text>
<Text style={styles.questionTextWide}>
{getTrans(
docProps.locale,
"enf-section-question-18"
)}
</Text>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(values.LPAldpAndMap)}
</Html>
</View>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
20.
</Text>
<Text style={styles.questionTextWide}>
{getTrans(
docProps.locale,
"enf-section-question-19"
)}
</Text>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(values.LPAlocalGuidance)}
</Html>
</View>
</View>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>21.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-20"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.LPAintentionToSubmitFullStatement}
</Text>
</View>
</View>
</View>
<View>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text style={{ fontSize: 14 }}>
{getTrans(
docProps.locale,
"enf-section-heading-five"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>22.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-21"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.AONB}
</Text>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
23.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-22"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.ROW}
</Text>
</View>
{values.ROW == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(values.ROWEvidence)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
24.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-23"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.conservationArea}{" "}
</Text>
</View>
{values.conservationArea == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.conservationAreaEvidence
)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
25.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-24"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.affectListedBuilding}
</Text>
</View>
{values.affectListedBuilding == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.affectListedBuildingEvidence
)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
26.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-25"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.TPO}
</Text>
</View>
{values.TPO == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(values.TPOEvidence)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
27.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-26"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.natureConservationSite}
</Text>
</View>
{values.natureConservationSite == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.natureConservationSiteEvidence
)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
28.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-27"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.protectedSpecies}
</Text>
</View>
{values.protectedSpecies == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.protectedSpeciesEvidence
)}
</Html>
</View>
)}
</View>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>29.</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-28"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.gypsyTravellerInvolvment}
</Text>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
30.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-29"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.floodingIssue}
</Text>
</View>
{values.floodingIssue == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.floodingIssueEvidence
)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
31.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-30"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.governmentDepartmentComments}
</Text>
</View>
{values.governmentDepartmentComments ==
"Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.governmentDepartmentCommentsEvidence
)}
</Html>
</View>
)}
</View>
</View>
</View>
<View>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text style={{ fontSize: 14 }}>
{getTrans(
docProps.locale,
"enf-section-heading-six"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>32.</Text>
<Text style={styles.questionTextWide}>
{getTrans(
docProps.locale,
"enf-section-question-31"
)}
</Text>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
a)
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-31a"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{
values.developmentCarriedOutInAccordance
}
</Text>
</View>
{values.developmentCarriedOutInAccordance ==
"Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.developmentCarriedOutInAccordanceEvidence
)}
</Html>
</View>
)}
</View>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>b)</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-31b"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.developmentNotTakePlaceBiodiversity}
</Text>
</View>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>c)</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-31c"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.developmentNotTakePlaceBroadband}
</Text>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
33.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-32"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.developmentAnyOtherConditions}
</Text>
</View>
{values.developmentAnyOtherConditions ==
"Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.developmentAnyOtherConditionsEvidence
)}
</Html>
</View>
)}
</View>
</View>
</View>
<View>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text style={{ fontSize: 14 }}>
{getTrans(
docProps.locale,
"s78-section-heading-five-sub"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
34.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-33"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.copyOfEnforcementNotice}
</Text>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.copyOfEnforcementNoticeEvidence
)}
</Html>
</View>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
35.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-34"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.enforcementNoticePlan}
</Text>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.enforcementNoticePlanEvidence
)}
</Html>
</View>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
36.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-35"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.listOfNotifiedOfEnforcement}
</Text>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.listOfNotifiedOfEnforcementEvidence
)}
</Html>
</View>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
37.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-36"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{
values.copyOfLetterOfAppealNotification
}
</Text>
</View>
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.copyOfLetterOfAppealNotificationEvidence
)}
</Html>
</View>
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
38.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-37"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.lpaEIAOS}
</Text>
</View>
{values.lpaEIAOS == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(values.lpaEIAOSEvidence)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
39.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-38"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.detailsOfOtherAppeals}
</Text>
</View>
{values.detailsOfOtherAppeals == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.detailsOfOtherAppealsEvidence
)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
40.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-39"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.detailsOfPreviousAppeals}
</Text>
</View>
{values.detailsOfPreviousAppeals == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.detailsOfPreviousAppealsEvidence
)}
</Html>
</View>
)}
</View>
<View
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionBullet}>
41.
</Text>
<Text style={styles.questionTextMid}>
{getTrans(
docProps.locale,
"enf-section-question-40"
)}
</Text>
<Text style={styles.questionAnswerMid}>
{values.otherRelevantInformation}
</Text>
</View>
{values.otherRelevantInformation == "Yes" && (
<View style={styles.questionAnswerWide}>
<Html style={styles.richArea}>
{CleanHTML(
values.otherRelevantInformationEvidence
)}
</Html>
</View>
)}
</View>
</View>
</View>
<View>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text>
{getTrans(
docProps.locale,
"enf-section-heading-eight"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
}}
>
<View
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
}}
>
<Text
style={{ width: "15%", fontSize: 12 }}
>
{getTrans(
docProps.locale,
"enf-section-question-signed"
)}
</Text>
<Text
style={{
color: "#757575",
width:
docProps.locale == "cy"
? "290"
: "310",
fontSize: 12,
padding: 5,
border: 1,
borderColor: "#eee",
backgroundColor: "white",
paddingRight: 10,
}}
wrap={true}
>
{values.caseOfficer}
</Text>
</View>
<View
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
}}
>
<Text
style={{
width:
docProps.locale == "cy"
? "60"
: "40",
fontSize: 12,
marginLeft: 10,
}}
>
{getTrans(
docProps.locale,
"enf-section-question-date"
)}
</Text>
<Text style={styles.questionAnswerSmaller}>
{formatDates(values.signedDate)}
</Text>
</View>
</View>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
alignItems: "center",
}}
>
<Text style={{ width: "18%", fontSize: 12 }}>
{getTrans(
docProps.locale,
"enf-section-question-onbehalf"
)}
</Text>
<Text style={styles.questionAnswerWide}>
{values.onBehalfOfLPA}
</Text>
</View>
</View>
<View>
<View
style={{
marginTop: 10,
fontFamily: "Helvetica-Bold",
}}
>
<Text style={{ fontSize: 14 }}>
{getTrans(
docProps.locale,
"lpa-list-supporting-documents-heading"
)}
</Text>
</View>
<View style={styles.sectionContainer}>
<View
wrap={false}
style={{
flexDirection: "column",
marginBottom: 10,
}}
>
<View
wrap={false}
style={{
flexDirection: "row",
marginBottom: 10,
}}
>
<Text style={styles.questionTextWide}>
{getTrans(
docProps.locale,
"lpa-list-supporting-documents-list"
)}
</Text>
</View>
<View
style={[
styles.questionAnswerFull,
{ flexDirection: "column" },
]}
>
{values.hasOwnProperty("filesList") &&
values.filesList.map(function (p) {
return (
<View
key={p.name}
style={{
flexDirection:
"row",
marginBottom: 4,
}}
>
<Text
styles={
styles.questionAnswer
}
>
{p.name} -{" "}
{bytesToSize(
p.size ||
p.contentLength
)}{" "}
{"\n"}
</Text>
</View>
);
})}
</View>
</View>
</View>
</View>
</View>
</View>
<Text
style={styles.pageNumber}
render={({ pageNumber, totalPages }) =>
`${pageNumber} / ${totalPages}`
}
fixed
/>
<View
fixed
style={{
position: "absolute",
top: 20,
left: 20,
bottom: 20,
right: 20,
border: 1,
borderColor: "#eee",
padding: 20,
paddingTop: 30,
height: "100%",
}}
></View>
</Page>
</Document>
);
};