\n
\n \n );\n};\nexport default RevenueTable;\n","import React from \"react\";\n\nconst datatableOptions = {\n paginationOptions: {\n rowsPerPageText: \"View\",\n },\n customStyle: {\n header: {\n style: {\n minHeight: \"56px\",\n },\n },\n headRow: {\n style: {\n backgroundColor: \"#005b9b\",\n borderTopLeftRadius: \"5px\",\n borderTopRightRadius: \"5px\",\n minHeight: \"45px\",\n textAlign: \"center\",\n },\n },\n headCells: {\n style: {\n color: \"#fff\",\n // borderRight: \"1px solid #fff\",\n position: \"relative\",\n justifyContent: \"center\",\n \"&::after\": {\n position: \"absolute\",\n content: \"\",\n background: \"#bbbbbb\",\n bottom: \"0\",\n right: \"0\",\n height: \"100%\",\n width: \"1.5px\",\n },\n },\n },\n rows: {\n style: {\n \"&:nth-child(odd)\": {\n backgroundColor: \"#e8e8e8\",\n },\n fontWeight: \"600\",\n borderTop: \"none\",\n \":not(:last-of-type)\": {\n borderBottomStyle: \"none\",\n },\n },\n },\n cells: {\n style: {\n \"&:(:after)\": {\n position: \"absolute\",\n content: '\"\"',\n background: \"#bbbbbb\",\n bottom: \"0\",\n right: \"0\",\n height: \"100%\",\n width: \"1.5px\",\n },\n justifyContent: \"center\",\n fontWeight: \"600\",\n position: \"relative\",\n },\n },\n },\n};\nexport default { datatableOptions };\n","import React from \"react\";\n\nconst apiUrl = {\n url: process.env.REACT_APP_API_URL,\n};\nexport default { apiUrl };\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Col, Placeholder } from \"rsuite\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faSearch,\n faPlus,\n faPen,\n faTimes,\n faUndo, faFileExcel\n} from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\nimport styled1 from \"styled-components\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport { numberFormat } from \"../../utils/index\";\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst StyledCell1 = styled1.div`\n &.low {\n background: green !important;\n }\n &.medium {\n background: orange;\n }\n &.high {\n background: red !important;\n }\n`;\n\nconst StyledCell = ({ }) => (\n \n)\n\nconst FilterComponent = ({ filterText, onFilter, onClear, prm, fetchUrl, showExport }) => (\n (typeof showExport == \"undefined\" || showExport) &&\n <>\n \n \n
\n\n | Sr | \nAmount | \nDate | \n
|---|---|---|
| {index+1 } | \n{numberFormat(payment.amount)} | \n{payment.receipt_date} | \n
No payment data available.
\n )}\n\n
\n \n );\n};\nexport default OutflowTable;\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Col, Placeholder } from \"rsuite\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faSearch,\n faPlus,\n faPen,\n faTimes,\n faUndo, faFileExcel\n} from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\nimport styled1 from \"styled-components\";\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\n\n\nconst StyledCell1 = styled1.div`\n &.low {\n background: green !important;\n }\n &.medium {\n background: orange;\n }\n &.high {\n background: red !important;\n }\n`;\n\nconst StyledCell = ({ }) => (\n \n)\n\nconst FilterComponent = ({ filterText, onFilter, onClear, prm, fetchUrl, showExport }) => (\n (typeof showExport == \"undefined\" || showExport) &&\n <>\n \n \n
\n \n );\n};\nexport default RevenueTable;\n","import { useEffect } from \"react\";\n\nconst PreventClickjacking = () => {\n useEffect(() => {\n if (window.self !== window.top) {\n document.body.innerHTML = \"Blocked due to security reasons
\";\n window.top.location = window.self.location;\n }\n }, []);\n\n return null;\n};\n\nexport default PreventClickjacking;\n","import React from \"react\";\nimport { Nav, Sidenav, Dropdown } from \"rsuite\";\nimport \"rsuite/dist/styles/rsuite-default.css\";\nimport { Link, withRouter } from \"react-router-dom\";\nimport { clientAccess, getModules } from \"./utils/index\";\n\nclass SideMenu extends React.Component {\n state = {\n openMenu: this.props.openMenu ? [this.props.openMenu] : [\"\"],\n activeKey: this.props.activeKey ? this.props.activeKey : \"1-1\",\n };\n\n renderDropdowns() {\n const url = this.props.match;\n const dropdowns = [];\n\n \n dropdowns.push(\n\n {\n this.setState({ openMenu: [openKeys[openKeys.length - 1]] });\n }}\n >\n \n \n \n \n
\n );\n }\n}\n\nexport default withRouter(SideMenu);\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Placeholder } from \"rsuite\";\nimport styles from \"../master.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faSearch, faPen, faFileExcel } from \"@fortawesome/free-solid-svg-icons\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Link } from \"react-router-dom\";\n\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear, fetchAssetsDetails }) => (\n <>\n \n {(!fetchAssetsId) && (\n \n \n {\" \"}\n
\n );\n },\n },\n ];\n\n if (fetchAssetsId) {\n delete columns[7];\n delete columns[6];\n\n }\n\n useEffect(() => {\n fetchUnits(1);\n }, []);\n\n return (\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport \"reactjs-popup/dist/index.css\";\nimport dateFormat, { masks } from \"dateformat\";\nimport Popup from \"reactjs-popup\";\nimport moment from \"moment\";\n// Date.isLeapYear = function (year) {\n// return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;\n// };\n\n// Date.getDaysInMonth = function (year, month) {\n// return [\n// 31,\n// Date.isLeapYear(year) ? 29 : 28,\n// 31,\n// 30,\n// 31,\n// 30,\n// 31,\n// 31,\n// 30,\n// 31,\n// 30,\n// 31,\n// ][month];\n// };\n\n// Date.prototype.isLeapYear = function () {\n// return Date.isLeapYear(this.getFullYear());\n// };\n\n// Date.prototype.getDaysInMonth = function () {\n// return Date.getDaysInMonth(this.getFullYear(), this.getMonth());\n// };\n\n// Date.prototype.addMonths = function (value) {\n// var n = this.getDate();\n// this.setDate(1);\n// this.setMonth(this.getMonth() + value);\n// this.setDate(Math.min(n, this.getDaysInMonth()));\n// return this;\n// };\nexport const getToDate = (fromDate, days, months, years) => {\n let toDate = moment(fromDate)\n .add(years, \"years\")\n .add(months, \"months\")\n .add(days, \"days\");\n\n // var _tempDate = new Date(fromDate);\n // _tempDate.setDate(_tempDate.getDate() + Number(days - Number(1)));\n // _tempDate.addMonths(Number(months));\n // _tempDate.setYear(_tempDate.getFullYear() + Number(years));\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n\n return moment(toDate).subtract(1, \"days\").format(\"YYYY-MM-DD\");\n};\n\nexport const PopupMessage = (props) => {\n return (\n \n {/* {props.content} */}\n \n \n ×\n \n
\n )}\n \n \n
\n \n {props.content}\n \n ×\n \n
\n )}\n \n \n
\n \n {props.content}\n\n
\n )}\n \n \n
\n {this.renderForm()}
;\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n
\n \n - \n Unit Directory\n \n
- \n
\n \n - \n Unit Detail\n \n
\n
\n \n )}\n\n \n Floor Image \n {this.state.floorImage ? (\n
\n\n {this.state.initialValues.assetCompliance.length > 0 && (\n <>\n \n {\n e.preventDefault();\n this.setState({ floorImage: null });\n }}>\n \n \n
\n ) : (\n \n {\n this.onImageChange(e, \"floor\");\n }}\n />\n \n
\n )}\n\n {this.state.floorImage && (\n <>\n {this.state.showPopupFloor === true ? (\n \n
\n ) : null}\n \n )}\n \n {\n console.log(e);\n this.setState({\n showPopupFloor: false,\n });\n this.getCroppedImage(e, \"floor\");\n }}\n >\n Crop Image\n \n
\n \n \n
\n \n \n
\n \n )}\n\n {this.state.initialValues.assetCompliance.length > 0 && (\n \n \n \n
\n
\n )}\n \n {this.props.match.params.id !== undefined ? (\n | Compliance Name | \nCompliance Answer | \n|
|---|---|---|
| {obj.name} | \n {obj.compliance_datatype == \"date\" && (\n\n | \n )}\n {obj.compliance_datatype == \"checkbox\" && (\n \n | \n )}\n
\n \n Update\n \n {\n this.checkDelete(e);\n }}\n >\n Delete\n \n \n Reset\n \n
\n ) : (\n \n \n Add\n \n \n Reset\n \n
\n )}\n \n \n \n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport Table from \"./OccupierTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faChevronRight, faPlus, faSave, faUndo } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Popup from \"reactjs-popup\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport Select from \"react-select\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass OccupierMaster extends React.Component {\n state = {\n id: undefined,\n url: `${apiUrl.apiUrl.url}/occupier/update-address-details`,\n occupierGroups: [],\n countries: [],\n states: [],\n districts: [],\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n delete: false,\n cities: [],\n correspondenceStates: [],\n correspondenceDistricts: [],\n correspondenceCities: [],\n companyName: [],\n redirect: false,\n initialValues: {\n groupId: \"\",\n companyName: \"\",\n companyCode: \"\",\n companyId: \"\",\n registeredAddress: \"\",\n registeredCountry: \"\",\n registeredState: \"\",\n registeredDistrict: \"\",\n registeredCity: \"\",\n registeredPincode: \"\",\n correspondenceAddress: \"\",\n correspondenceCountry: \"\",\n correspondenceState: \"\",\n correspondenceDistrict: \"\",\n correspondenceCity: \"\",\n correspondencePincode: \"\",\n },\n };\n groupId = \"\";\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/occupier-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n occupierGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n changeGroup = (e) => {\n let groupid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/occupier/get-group-companies/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCountry = (e) => {\n let countryid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + countryid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCorrespondenceCountry = (e) => {\n let countryid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + countryid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n correspondenceStates: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeState = (e) => {\n let stateId = e.target.value;\n console.log(stateId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/districts/state-districts/` + stateId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n districts: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCorrespondenceState = (e) => {\n let stateId = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/districts/state-districts/` + stateId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n correspondenceDistricts: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeDistrict = (e) => {\n let districtId = e.target.value;\n console.log(districtId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + districtId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n cities: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCorrespondenceDistrict = (e) => {\n let districtId = e.target.value;\n console.log(districtId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + districtId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n correspondenceCities: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCompany = (e) => {\n let groupid = e.value;\n this.state.initialValues.companyId = e.value;\n this.state.initialValues.companyName = e.label;\n //this.state.companyId = e.value;\n this.setState({})\n fetch(`${apiUrl.apiUrl.url}/occupier/get-company/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data.id, \"55\");\n this.setState({\n initialValues: data.data,\n // countries: data.registeredCountry,\n states: data.registeredStates,\n districts: data.registeredDistricts,\n cities: data.registeredCities,\n correspondenceStates: data.correspondenceStates,\n correspondenceDistricts: data.correspondenceDistricts,\n correspondenceCities: data.correspondenceCities,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n fillCorrespondenceAddress(e, values) {\n console.log(values, \"val\");\n values.correspondenceAddress = values.registeredAddress;\n this.state.correspondenceStates = this.state.states;\n this.state.correspondenceCities = this.state.cities;\n this.state.correspondenceDistricts = this.state.districts;\n values.correspondenceCountry = values.registeredCountry;\n values.correspondenceState = values.registeredState;\n values.correspondenceDistrict = values.registeredDistrict;\n values.correspondenceCity = values.registeredCity;\n values.correspondencePincode = values.registeredPincode;\n this.setState({});\n }\n\n constructor(props) {\n super(props);\n //this.state = {value: ''};\n //this.handleChange = this.handleChange.bind(this);\n //this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/occupier/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n alert(\"Sorry you cannot delete this item\");\n } else {\n // if (window.confirm(\"Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/occupier/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/occupier/create`,\n initialValues: {\n companyId: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/occupier/get-company/?id=${this.props.match.params.id}`).then((response) =>{\n let data = response.data;\n var companies = [\n { id: data.data.companyId, company_name: data.data.companyName },\n ];\n athis.setState({\n url: `${apiUrl.apiUrl.url}/occupier/update-address-details?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n states: data.registeredStates,\n districts: data.registeredDistricts,\n cities: data.registeredCities,\n correspondenceStates: data.correspondenceStates,\n correspondenceDistricts: data.correspondenceDistricts,\n correspondenceCities: data.correspondenceCities,\n companyName: companies,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/occupier/get-company/?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // var companies = [\n // { id: data.data.companyId, company_name: data.data.companyName },\n // ];\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/occupier/update-address-details?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // states: data.registeredStates,\n // districts: data.registeredDistricts,\n // cities: data.registeredCities,\n // correspondenceStates: data.correspondenceStates,\n // correspondenceDistricts: data.correspondenceDistricts,\n // correspondenceCities: data.correspondenceCities,\n // companyName: companies,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n groupId: \"\",\n companyName: \"\",\n companyCode: \"\",\n registeredAddress: \"\",\n registeredCountry: \"\",\n registeredState: \"\",\n registeredDistrict: \"\",\n registeredCity: \"\",\n registeredPincode: \"\",\n correspondenceAddress: \"\",\n correspondenceCountry: \"\",\n correspondenceState: \"\",\n correspondenceDistrict: \"\",\n correspondenceCity: \"\",\n correspondencePincode: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/occupier/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: \"Something Went Wrong\",\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Occupier Directory\n \n
- \n Occupier Address Details\n \n
\n \n
\n\n\n {/* */}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport Table from \"./OccupierCompanyTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { clientAccess } from \"../../utils/index\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Select from \"react-select\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport CreatableSelect from \"react-select/creatable\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass OccupierCompanyDetails extends React.Component {\n state = {\n id: undefined,\n occupierGroups: [],\n clientGroups: [],\n clientList: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n companyName: [],\n companyId: \"\",\n companyCode: \"\",\n companyPan: \"\",\n vendorCode: \"\",\n companyTan: \"\",\n companyType: \"\",\n groupId: \"\",\n isOpen: false,\n redirect: false,\n url: `${apiUrl.apiUrl.url}/occupier/create`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyId: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n vendorCode: \"\",\n tenantSector: \"\"\n },\n };\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n //fetch(`${apiUrl.apiUrl.url}/occupier-groups`)\n fetch(`${apiUrl.apiUrl.url}/occupier-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n occupierGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n changeGroup = (e) => {\n let groupid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/occupier/get-group-companies/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n changeCompany = (e) => {\n let groupid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/occupier/get-company/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n companyId: data.company_code,\n companyCode: data.company_code,\n companyType: data.company_type,\n companyTan: data.company_tan,\n companyPan: data.company_pan,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/occupier/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\"\n });\n\n } else {\n self.setState({\n delete: true\n });\n }\n\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/occupier/create`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyId: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupName: \"\",\n groupId: \"\",\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/occupier/get-company/?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/occupier/update?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n clientGroups: data.clientGroups,\n clientList: data.clientList,\n });\n }).catch((error)=>{\n \n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/occupier/get-company/?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/occupier/update?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // clientGroups: data.clientGroups,\n // clientList: data.clientList,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n handleChangeOccupierGroup = (newValue, actionMeta) => {\n console.group(newValue, \"Value Changed\");\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.groupEnd();\n };\n handleChangeclientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.cgroupId = newValue.value;\n this.state.initialValues.cgroupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.cgroupId = newValue;\n console.log(this.cgroupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/occupier/delete?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyId: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupName: \"\",\n groupId: \"\",\n },\n });\n };\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyId: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupName: \"\",\n groupId: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Occupier Directory\n \n
- \n Occupier Company Details\n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default OccupierContactTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faChevronRight,\n faPen,\n faPlus,\n faTimes,\n faUndo,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { clientAccess } from \"../../utils/index\";\nimport Select from \"react-select\";\nimport OccupierContactTable from \"./OccupierContactTable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass OccupierContactDetails extends React.Component {\n state = {\n clientGroups: [],\n clientList: [],\n companyId: \"\",\n isOpen: false,\n occupierGroups: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n companyName: [],\n redirect: false,\n id: undefined,\n url: `${apiUrl.apiUrl.url}/occupier/create-contact`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n };\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n //fetch(`${apiUrl.apiUrl.url}/occupier-groups`)\n fetch(`${apiUrl.apiUrl.url}/occupier-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n occupierGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n changeGroup = (e) => {\n let groupid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/occupier/get-group-companies/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n changeCompany = (e) => {\n let groupid = e.value;\n this.state.initialValues.companyId = e.value;\n this.state.initialValues.companyName = e.label;\n //this.state.companyId = e.value;\n this.setState({})\n fetch(`${apiUrl.apiUrl.url}/occupier/get-company/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data.id, \"55\");\n this.setState({\n companyId: data.data.companyId,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n checkDelete() {\n var self = this;\n self.setState({\n delete: true\n });\n\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/occupier/create-contact`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n } else {\n\n let athis= this;\n axios.get(`${apiUrl.apiUrl.url}/occupier/fetch-contact?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/occupier/update-contact?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n // occupierGroups: data.groups,\n companyName: data.companies,\n clientGroups: data.clientGroups,\n clientList: data.clientList,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/occupier/fetch-contact?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/occupier/update-contact?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // // occupierGroups: data.groups,\n // companyName: data.companies,\n // clientGroups: data.clientGroups,\n // clientList: data.clientList,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n constructor(props) {\n super(props);\n }\n handleChangeclientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.cgroupId = newValue.value;\n this.state.initialValues.cgroupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.cgroupId = newValue;\n console.log(this.cgroupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/occupier/delete-contact?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Occupier Directory\n \n
- \n Occupier Contact Details\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport Table from \"./LandlordTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faSave,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Select from \"react-select\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport \"bootstrap/js/dist/collapse.js\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LandLordMaster extends React.Component {\n state = {\n id: undefined,\n url: `${apiUrl.apiUrl.url}/landlord/update-address-details`,\n LandlordGroups: [],\n countries: [],\n states: [],\n districts: [],\n cities: [],\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n delete: false,\n correspondenceStates: [],\n correspondenceDistricts: [],\n correspondenceCities: [],\n isOpen: false,\n redirect: false,\n companyName: [],\n initialValues: {\n groupId: \"\",\n companyId: \"\",\n companyName: \"\",\n companyCode: \"\",\n registeredAddress: \"\",\n registeredCountry: \"\",\n registeredState: \"\",\n registeredDistrict: \"\",\n registeredCity: \"\",\n registeredPincode: \"\",\n correspondenceAddress: \"\",\n correspondenceCountry: \"\",\n correspondenceState: \"\",\n correspondenceDistrict: \"\",\n correspondenceCity: \"\",\n correspondencePincode: \"\",\n },\n };\n componentDidMount() {\n //fetch(`${apiUrl.apiUrl.url}/landlord-groups`)\n fetch(`${apiUrl.apiUrl.url}/landlord-group/fetch-landlord-list`, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n changeGroup = (e) => {\n let groupid = e.value;\n fetch(`${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` + groupid, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.initialValues.groupName = e.label;\n this.state.initialValues.groupId = e.label;\n this.state.initialValues.companyName = '';\n this.state.initialValues.companyId = '';\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n changeCountry = (e) => {\n let countryid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + countryid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCorrespondenceCountry = (e) => {\n let countryid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + countryid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n correspondenceStates: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeState = (e) => {\n let stateId = e.target.value;\n console.log(stateId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/districts/state-districts/` + stateId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n districts: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCorrespondenceState = (e) => {\n let stateId = e.target.value;\n console.log(stateId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/districts/state-districts/` + stateId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n correspondenceDistricts: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeDistrict = (e) => {\n let districtId = e.target.value;\n console.log(districtId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + districtId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n cities: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCorrespondenceDistrict = (e) => {\n let districtId = e.target.value;\n console.log(districtId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + districtId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n correspondenceCities: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n constructor(props) {\n super(props);\n //this.state = {value: ''};\n //this.handleChange = this.handleChange.bind(this);\n //this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n\n changeCompany = (e) => {\n console.log(e, \"ee\");\n //let groupid = e.target.value;\n let groupid = e.value;\n\n\n fetch(`${apiUrl.apiUrl.url}/landlord/get-company/?id=` + groupid, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n initialValues: data.data,\n states: data.registeredStates,\n districts: data.registeredDistricts,\n cities: data.registeredCities,\n correspondenceStates: data.correspondenceStates,\n correspondenceDistricts: data.correspondenceDistricts,\n correspondenceCities: data.correspondenceCities,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/landlord/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n alert(\"Sorry you cannot delete this item\");\n } else {\n // if (window.confirm(\"Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/landlord/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/landlord/create`,\n initialValues: {\n companyId: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n },\n });\n } else {\n let athis= this;\n axios.get(`${apiUrl.apiUrl.url}/landlord/get-company/?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n var companies = [\n { id: data.data.companyId, company_name: data.data.companyName },\n ];\n athis.setState({\n url: `${apiUrl.apiUrl.url}/landlord/update-address-details?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n states: data.registeredStates,\n districts: data.registeredDistricts,\n cities: data.registeredCities,\n correspondenceStates: data.correspondenceStates,\n correspondenceDistricts: data.correspondenceDistricts,\n correspondenceCities: data.correspondenceCities,\n companyName: companies,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/landlord/get-company/?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // var companies = [\n // { id: data.data.companyId, company_name: data.data.companyName },\n // ];\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/landlord/update-address-details?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // states: data.registeredStates,\n // districts: data.registeredDistricts,\n // cities: data.registeredCities,\n // correspondenceStates: data.correspondenceStates,\n // correspondenceDistricts: data.correspondenceDistricts,\n // correspondenceCities: data.correspondenceCities,\n // companyName: companies,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n fillCorrespondenceAddress(e, values) {\n values.correspondenceAddress = values.registeredAddress;\n this.state.correspondenceStates = this.state.states;\n this.state.correspondenceCities = this.state.cities;\n this.state.correspondenceDistricts = this.state.districts;\n values.correspondenceCountry = values.registeredCountry;\n values.correspondenceState = values.registeredState;\n values.correspondenceDistrict = values.registeredDistrict;\n values.correspondenceCity = values.registeredCity;\n values.correspondencePincode = values.registeredPincode;\n this.setState({});\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n companyId: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/landlord/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: \"Something Went Wrong\",\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Landlord Directory\n \n
- \n Landlord Address Details\n \n
\n \n
\n\n {/* */}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport Table from \"./LandlordCompanyTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport styles from \"../master.css\";\nimport { clientAccess } from \"../../utils/index\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport CreatableSelect from \"react-select/creatable\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LandlordCompanyDetails extends React.Component {\n state = {\n id: undefined,\n clientGroups: [],\n clientList: [],\n landlordGroups: [],\n landlordResidentialStatus: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n companyName: [],\n companyCode: \"\",\n companyCode: \"\",\n companyPan: \"\",\n companyTan: \"\",\n vendorCode: \"\",\n companyType: \"\",\n redirect: false,\n isOpen: false,\n groupId: \"\",\n url: `${apiUrl.apiUrl.url}/landlord/create`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n vendorCode: \"\",\n groupId: \"\",\n groupName: \"\",\n paycode:\"\",\n resStatusName:\"\",\n resStatusId: \"\",\n isVendor: \"\"\n },\n };\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n //fetch(`${apiUrl.apiUrl.url}/landlord-groups`)\n fetch(`${apiUrl.apiUrl.url}/landlord-group/fetch-landlord-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/landlord-residential-status/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landlordResidentialStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n changeGroup = (e) => {\n let groupid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` + groupid, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/landlord/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\"\n });\n\n } else {\n self.setState({\n delete: true\n });\n }\n\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/landlord/create`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n paycode:'',\n resStatusName:'',\n resStatusId: \"\",\n isVendor: \"\"\n },\n });\n } else {\n let athis=this;\n axios.get(`${apiUrl.apiUrl.url}/landlord/get-company/?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/landlord/update?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n clientGroups: data.clientGroups,\n clientList: data.clientList,\n });\n });\n // fetch(\n // `${apiUrl.apiUrl.url}/landlord/get-company/?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/landlord/update?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // clientGroups: data.clientGroups,\n // clientList: data.clientList,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\");\n // this.state.groupId = newValue.value;\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n // this.groupId = newValue.value;\n console.groupEnd();\n };\n\n handleChangeLandlordResStatus = (newValue, actionMeta) => {\n console.group(\"Value Changed\");\n // this.state.groupId = newValue.value;\n this.state.initialValues.resStatusId = newValue.value;\n this.state.initialValues.resStatusName = newValue.label;\n this.setState({});\n // this.groupId = newValue.value;\n console.groupEnd();\n };\n handleChangeclientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.cgroupId = newValue.value;\n this.state.initialValues.cgroupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.cgroupId = newValue;\n console.log(this.cgroupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/landlord/delete?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n paycode:\"\",\n isVendor: \"\"\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n paycode:\"\",\n isVendor: \"\"\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Landlord Directory\n \n
- \n Landlord Company Details\n \n
\n \n
\n\n\n \n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default LandlordContactTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport LandlordContactTable from \"./LandlordContactTable\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { clientAccess } from \"../../utils/index\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Select from \"react-select\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LandlordContactDetails extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/landlord/create-contact`,\n clientGroups: [],\n clientList: [],\n companyId: \"\",\n isOpen: false,\n landlordGroups: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n companyName: [],\n redirect: false,\n id: undefined,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n };\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n //fetch(`${apiUrl.apiUrl.url}/landlord-groups`)\n fetch(`${apiUrl.apiUrl.url}/landlord-group/fetch-landlord-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n changeGroup = (e) => {\n let groupid = e.value;\n fetch(`${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` + groupid, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.initialValues.groupName = e.label;\n this.state.initialValues.groupId = e.label;\n this.state.initialValues.companyGroup = e.value;\n\n this.state.initialValues.companyName = '';\n this.state.initialValues.companyId = '';\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n changeCompany = (e) => {\n let groupid = e.value;\n console.log(e, \"==\")\n this.state.initialValues.companyId = e.value;\n this.state.initialValues.companyName = e.label;\n //this.state.companyId = e.value;\n this.setState({})\n\n fetch(`${apiUrl.apiUrl.url}/landlord/get-company/?id=` + groupid, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n //companyId: data.id,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n self.setState({\n delete: true\n });\n\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/landlord/create-contact`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/landlord/fetch-contact?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/landlord/update-contact?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n // occupierGroups: data.groups,\n companyName: data.companies,\n clientGroups: data.clientGroups,\n clientList: data.clientList,\n });\n });\n\n\n // fetch(\n // `${apiUrl.apiUrl.url}/landlord/fetch-contact?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/landlord/update-contact?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // // occupierGroups: data.groups,\n // companyName: data.companies,\n // clientGroups: data.clientGroups,\n // clientList: data.clientList,\n // });\n // console.log(this.state.initialValues, \"iv\");\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n handleChangeclientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.cgroupId = newValue.value;\n this.state.initialValues.cgroupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n //this.cgroupId = newValue;\n //console.log(this.cgroupId, \"ddd\");\n //console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/landlord/delete-contact?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n companyName: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n companyName: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n console.log(this.state.assetNameValues);\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Landlord Directory\n \n
- \n Landlord Contact Details\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default LandlordBankTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport LandlordBankTable from \"./LandlordBankTable\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { clientAccess } from \"../../utils/index\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Select from \"react-select\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LandlordBankDetails extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/landlord/add-bank`,\n clientGroups: [],\n clientList: [],\n companyId: \"\",\n isOpen: false,\n landlordGroups: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n companyName: [],\n redirect: false,\n id: undefined,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n };\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n //fetch(`${apiUrl.apiUrl.url}/landlord-groups`)\n fetch(`${apiUrl.apiUrl.url}/landlord-group/fetch-landlord-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n changeGroup = (e) => {\n let groupid = e.value;\n fetch(`${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` + groupid, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.initialValues.groupName = e.label;\n this.state.initialValues.groupId = e.label;\n this.state.initialValues.companyGroup = e.value;\n\n this.state.initialValues.companyName = '';\n this.state.initialValues.companyId = '';\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n changeCompany = (e) => {\n let groupid = e.value;\n console.log(e, \"==\")\n this.state.initialValues.companyId = e.value;\n this.state.initialValues.companyName = e.label;\n //this.state.companyId = e.value;\n this.setState({})\n\n fetch(`${apiUrl.apiUrl.url}/landlord/get-company/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n //companyId: data.id,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n self.setState({\n delete: true\n });\n\n }\n\n componentDidUpdate() {\n\n console.log(this.props.match.params.id, \" == \", this.state.id);\n\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/landlord/add-bank`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/landlord/fetch-bank?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/landlord/update-bank?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n // occupierGroups: data.groups,\n companyName: data.companies,\n clientGroups: data.clientGroups,\n clientList: data.clientList,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/landlord/fetch-bank?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/landlord/update-bank?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // // occupierGroups: data.groups,\n // companyName: data.companies,\n // clientGroups: data.clientGroups,\n // clientList: data.clientList,\n // });\n // console.log(this.state.initialValues, \"iv\");\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n handleChangeclientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.cgroupId = newValue.value;\n this.state.initialValues.cgroupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n //this.cgroupId = newValue;\n //console.log(this.cgroupId, \"ddd\");\n //console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/landlord/delete-bank?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n companyName: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n companyName: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n console.log(this.state.assetNameValues);\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Landlord Directory\n \n
- \n Landlord Bank Details\n \n
\n \n
\n\n\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport Table from \"./LandlordTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faSave,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Select from \"react-select\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport \"bootstrap/js/dist/collapse.js\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LandLordMaster extends React.Component {\n state = {\n id: undefined,\n url: `${apiUrl.apiUrl.url}/broker/update-address-details`,\n LandlordGroups: [],\n countries: [],\n states: [],\n districts: [],\n cities: [],\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n delete: false,\n correspondenceStates: [],\n correspondenceDistricts: [],\n correspondenceCities: [],\n isOpen: false,\n redirect: false,\n companyName: [],\n initialValues: {\n groupId: \"\",\n companyId: \"\",\n companyName: \"\",\n companyCode: \"\",\n registeredAddress: \"\",\n registeredCountry: \"\",\n registeredState: \"\",\n registeredDistrict: \"\",\n registeredCity: \"\",\n registeredPincode: \"\",\n correspondenceAddress: \"\",\n correspondenceCountry: \"\",\n correspondenceState: \"\",\n correspondenceDistrict: \"\",\n correspondenceCity: \"\",\n correspondencePincode: \"\",\n },\n };\n componentDidMount() {\n //fetch(`${apiUrl.apiUrl.url}/landlord-groups`)\n fetch(`${apiUrl.apiUrl.url}/broker-group/fetch-broker-list`, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n changeGroup = (e) => {\n let groupid = e.value;\n fetch(`${apiUrl.apiUrl.url}/broker/get-group-companies/?id=` + groupid, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.initialValues.groupName = e.label;\n this.state.initialValues.groupId = e.label;\n this.state.initialValues.companyName = '';\n this.state.initialValues.companyId = '';\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n changeCountry = (e) => {\n let countryid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + countryid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCorrespondenceCountry = (e) => {\n let countryid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + countryid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n correspondenceStates: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeState = (e) => {\n let stateId = e.target.value;\n console.log(stateId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/districts/state-districts/` + stateId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n districts: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCorrespondenceState = (e) => {\n let stateId = e.target.value;\n console.log(stateId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/districts/state-districts/` + stateId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n correspondenceDistricts: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeDistrict = (e) => {\n let districtId = e.target.value;\n console.log(districtId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + districtId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n cities: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCorrespondenceDistrict = (e) => {\n let districtId = e.target.value;\n console.log(districtId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + districtId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n correspondenceCities: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n constructor(props) {\n super(props);\n //this.state = {value: ''};\n //this.handleChange = this.handleChange.bind(this);\n //this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n\n changeCompany = (e) => {\n console.log(e, \"ee\");\n //let groupid = e.target.value;\n let groupid = e.value;\n\n\n fetch(`${apiUrl.apiUrl.url}/broker/get-company/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n initialValues: data.data,\n states: data.registeredStates,\n districts: data.registeredDistricts,\n cities: data.registeredCities,\n correspondenceStates: data.correspondenceStates,\n correspondenceDistricts: data.correspondenceDistricts,\n correspondenceCities: data.correspondenceCities,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/broker/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n alert(\"Sorry you cannot delete this item\");\n } else {\n // if (window.confirm(\"Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/landlord/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/broker/create`,\n initialValues: {\n companyId: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n },\n });\n } else {\n let athis= this;\n axios.get(`${apiUrl.apiUrl.url}/broker/get-company/?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n \n var companies = [\n { id: data.data.companyId, company_name: data.data.companyName },\n ];\n athis.setState({\n url: `${apiUrl.apiUrl.url}/broker/update-address-details?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n states: data.registeredStates,\n districts: data.registeredDistricts,\n cities: data.registeredCities,\n correspondenceStates: data.correspondenceStates,\n correspondenceDistricts: data.correspondenceDistricts,\n correspondenceCities: data.correspondenceCities,\n companyName: companies,\n });\n\n }).catch((error) =>{});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/broker/get-company/?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // var companies = [\n // { id: data.data.companyId, company_name: data.data.companyName },\n // ];\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/broker/update-address-details?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // states: data.registeredStates,\n // districts: data.registeredDistricts,\n // cities: data.registeredCities,\n // correspondenceStates: data.correspondenceStates,\n // correspondenceDistricts: data.correspondenceDistricts,\n // correspondenceCities: data.correspondenceCities,\n // companyName: companies,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n fillCorrespondenceAddress(e, values) {\n values.correspondenceAddress = values.registeredAddress;\n this.state.correspondenceStates = this.state.states;\n this.state.correspondenceCities = this.state.cities;\n this.state.correspondenceDistricts = this.state.districts;\n values.correspondenceCountry = values.registeredCountry;\n values.correspondenceState = values.registeredState;\n values.correspondenceDistrict = values.registeredDistrict;\n values.correspondenceCity = values.registeredCity;\n values.correspondencePincode = values.registeredPincode;\n this.setState({});\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n companyId: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/broker/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: \"Something Went Wrong\",\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n // values.groupId = this.groupId.value;\n // alert(JSON.stringify(values, null, 2));\n console.log(values);\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/broker/update-address-details`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({\n messsagePopup: true,\n popupContent: \"Data Saved Successfully!\",\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Broker Directory\n \n
- \n Broker Address Details\n \n
\n \n
\n\n\n {/* \n
\n \n\n \n
\n \n
\n \n Broker Correspondence Address\n
\n\n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n {\n this.changeCorrespondenceCountry(e);\n handleChange(e);\n }}\n >\n \n {this.state.countries.map((obj) => (\n \n ))}\n \n
\n \n
\n \n
\n \n \n
\n \n {\n this.changeCorrespondenceState(e);\n handleChange(e);\n }}\n >\n \n {this.state.correspondenceStates.map((obj) => (\n \n ))}\n \n
\n \n
\n \n
\n \n \n
\n \n {\n this.changeCorrespondenceDistrict(e);\n handleChange(e);\n }}\n >\n \n {this.state.correspondenceDistricts.map((obj) => (\n \n ))}\n \n
\n \n
\n \n
\n \n \n
\n \n {\n handleChange(e);\n }}\n >\n \n {this.state.correspondenceCities.map((obj) => (\n \n ))}\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n
\n */}\n \n )}\n \n \n
\n \n
\n \n \n
\n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport Table from \"./LandlordCompanyTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport styles from \"../master.css\";\nimport { clientAccess } from \"../../utils/index\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport CreatableSelect from \"react-select/creatable\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LandlordCompanyDetails extends React.Component {\n state = {\n id: undefined,\n clientGroups: [],\n clientList: [],\n landlordGroups: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n companyName: [],\n companyCode: \"\",\n companyCode: \"\",\n companyPan: \"\",\n companyTan: \"\",\n vendorCode: \"\",\n companyType: \"\",\n redirect: false,\n isOpen: false,\n groupId: \"\",\n url: `${apiUrl.apiUrl.url}/broker/create`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n vendorCode: \"\",\n groupId: \"\",\n groupName: \"\",\n },\n };\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n //fetch(`${apiUrl.apiUrl.url}/landlord-groups`)\n fetch(`${apiUrl.apiUrl.url}/broker-group/fetch-broker-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n changeGroup = (e) => {\n let groupid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/broker/get-group-companies/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/broker/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\"\n });\n\n } else {\n self.setState({\n delete: true\n });\n }\n\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/broker/create`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/broker/get-company/?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/broker/update?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n clientGroups: data.clientGroups,\n clientList: data.clientList,\n });\n }).catch((error) => {});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/broker/get-company/?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/broker/update?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // clientGroups: data.clientGroups,\n // clientList: data.clientList,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\");\n // this.state.groupId = newValue.value;\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n // this.groupId = newValue.value;\n console.groupEnd();\n };\n handleChangeclientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.cgroupId = newValue.value;\n this.state.initialValues.cgroupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.cgroupId = newValue;\n console.log(this.cgroupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/broker/delete?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyName: \"\",\n companyCode: \"\",\n companyType: \"\",\n companyPan: \"\",\n companyTan: \"\",\n groupId: \"\",\n groupName: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Broker Directory\n \n
- \n Broker Company Details\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default LandlordContactTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport LandlordContactTable from \"./LandlordContactTable\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { clientAccess } from \"../../utils/index\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Select from \"react-select\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LandlordContactDetails extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/broker/create-contact`,\n clientGroups: [],\n clientList: [],\n companyId: \"\",\n isOpen: false,\n brokerGroups: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n companyName: [],\n redirect: false,\n id: undefined,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n };\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n //fetch(`${apiUrl.apiUrl.url}/broker-groups`)\n fetch(`${apiUrl.apiUrl.url}/broker-group/fetch-broker-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brokerGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n changeGroup = (e) => {\n let groupid = e.value;\n fetch(`${apiUrl.apiUrl.url}/broker/get-group-companies/?id=` + groupid, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.initialValues.groupName = e.label;\n this.state.initialValues.groupId = e.label;\n this.state.initialValues.companyGroup = e.value;\n\n this.state.initialValues.companyName = '';\n this.state.initialValues.companyId = '';\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n changeCompany = (e) => {\n let groupid = e.value;\n console.log(e, \"==\")\n this.state.initialValues.companyId = e.value;\n this.state.initialValues.companyName = e.label;\n //this.state.companyId = e.value;\n this.setState({})\n\n fetch(`${apiUrl.apiUrl.url}/broker/get-company/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n //companyId: data.id,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n self.setState({\n delete: true\n });\n\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/broker/create-contact`,\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/broker/fetch-contact?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/broker/update-contact?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n // occupierGroups: data.groups,\n companyName: data.companies,\n clientGroups: data.clientGroups,\n clientList: data.clientList,\n });\n }).catch((err) => {});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/broker/fetch-contact?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/broker/update-contact?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // // occupierGroups: data.groups,\n // companyName: data.companies,\n // clientGroups: data.clientGroups,\n // clientList: data.clientList,\n // });\n // console.log(this.state.initialValues, \"iv\");\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n handleChangeclientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.cgroupId = newValue.value;\n this.state.initialValues.cgroupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n //this.cgroupId = newValue;\n //console.log(this.cgroupId, \"ddd\");\n //console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/broker/delete-contact?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n companyName: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cgroupId: \"\",\n cgroupName: \"\",\n clientId: \"\",\n clientName: \"\",\n companyId: \"\",\n companyName: \"\",\n contactName: \"\",\n contactNumber: \"\",\n contactEmail: \"\",\n contactDepartment: \"\",\n companyGroup: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n console.log(this.state.assetNameValues);\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Broker Directory\n \n
- \n Broker Contact Details\n \n
\n \n
\n\n \n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default OccupierBrandTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport OccupierBrandTable from \"./OccupierBrandTable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { clientAccess } from \"../../utils/index\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass OccupierBrand extends React.Component {\n state = {\n LandlordGroups: [],\n clientList: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n brandCategories: [],\n brandSubCategories: [],\n isOpen: false,\n redirect: false,\n isSearchable: true,\n isClearable: true,\n url: `${apiUrl.apiUrl.url}/brand/create-brand`,\n id: undefined,\n initialValues: {\n brandCategory: \"\",\n brandCategoryName: \"\",\n subcategoryId: \"\",\n subCategoryName: \"\",\n brandName: \"\",\n },\n };\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/brand/get-brand-category`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandCategories: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n changeCategory = (newValue, values) => {\n values.brandSubCategories = \"\";\n values.subCategoryName = \"\";\n console.log(newValue, \"nv\");\n this.state.initialValues.brandCategory = newValue.value;\n this.state.initialValues.brandCategoryName = newValue.label;\n values.brandCategory = newValue.value;\n this.setState({});\n console.groupEnd();\n let groupid = newValue.value;\n fetch(`${apiUrl.apiUrl.url}/brand/get-brand-subcategory/?id=` + groupid, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandSubCategories: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeSubCategory = (newValue, values) => {\n console.log(newValue);\n this.state.initialValues.subcategoryId = newValue.value;\n this.state.initialValues.subCategoryName = newValue.label;\n values.subcategoryId = newValue.value;\n this.setState({});\n console.groupEnd();\n };\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.groupId = newValue;\n console.log(this.groupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/brand/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\"\n });\n\n } else {\n self.setState({\n delete: true\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/brand/create-brand`,\n initialValues: {\n brandCategory: \"\",\n subcategoryId: \"\",\n brandName: \"\",\n groupName: \"\",\n groupId: \"\",\n clientName: \"\",\n clientId: \"\"\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/brand/fetch-brand?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/brand/update-brand?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n brandSubCategories: data.subcategories,\n clientList: data.clientList,\n LandlordGroups: data.LandlordGroups\n });\n }).catch((error)=>{});\n \n // fetch(\n // `${apiUrl.apiUrl.url}/brand/fetch-brand?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/brand/update-brand?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // brandSubCategories: data.subcategories,\n // clientList: data.clientList,\n // LandlordGroups: data.LandlordGroups\n // });\n // console.log(this.state.initialValues, \"iv\");\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n constructor(props) {\n super(props);\n }\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/brand/delete?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n brandCategory: \"\",\n subcategoryId: \"\",\n brandName: \"\",\n groupName: \"\",\n groupId: \"\",\n clientName: \"\",\n clientId: \"\"\n },\n });\n };\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n brandCategory: \"\",\n subcategoryId: \"\",\n brandName: \"\",\n groupName: \"\",\n groupId: \"\",\n clientName: \"\",\n clientId: \"\"\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Brand Directory\n \n
- \n Brand Details\n \n
\n \n
\n\n \n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport Table from \"./ClientTable\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faChevronRight,\n faPen,\n faPlus,\n faTimes,\n faUndo,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport Select from \"react-select\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getUserRole, getUserType, clientId, clientAccess } from \"../../utils/index\";\n\nconsole.log(clientId(), \"clientId\")\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass ClientDetail extends React.Component {\n groupId = { value: \"\" };\n state = {\n url: `${apiUrl.apiUrl.url}/client/create`,\n LandlordGroups: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n redirect: false,\n id: undefined,\n unitTypes: [],\n assetTypes: [],\n unitSelected: [],\n assetSelected: [],\n modules: [],\n moduleSelected: [],\n initialValues: {\n groupId: \"\",\n clientName: \"\",\n clientCategory: getUserType(),\n clientNameId: \"\",\n groupName: \"\",\n },\n };\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/unit-detail/get-unit-types`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n unitTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/unit-detail/get-asset-types`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assetTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/module/get-all`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n modules: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/client/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\"\n });\n } else {\n self.setState({\n delete: true\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/client/create`,\n unitSelected: [],\n moduleSelected: [],\n assetSelected: [],\n initialValues: {\n groupId: \"\",\n clientName: \"\",\n clientCategory: getUserType(),\n clientNameId: \"\",\n groupName: \"\",\n },\n });\n } else {\n fetch(\n `${apiUrl.apiUrl.url}/client/fetch-client?id=${this.props.match.params.id}`\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n url: `${apiUrl.apiUrl.url}/client/update?id=${this.props.match.params.id}`,\n initialValues: data.data,\n unitSelected: data.data.unitTypes,\n moduleSelected: data.data.modules,\n assetSelected: data.data.assetTypes,\n });\n console.log(this.state.initialValues, \"iv\");\n })\n .catch((error) => {\n console.log(error);\n });\n }\n }\n }\n\n constructor(props) {\n super(props);\n }\n\n handleChangeAssetType = (newValue, actionMeta) => {\n this.state.assetSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n //this.state.initialValues.brandId.push(newValue[i].value);\n this.state.assetSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.setState({});\n };\n\n handleFileStorageChange = (newValue, actionMeta) => {\n this.state.initialValues.storageTypeId = newValue.value;\n this.state.initialValues.storageType = newValue.label;\n this.setState({});\n };\n\n handleChangeUnitType = (newValue, actionMeta) => {\n this.state.unitSelected = [];\n this.state.initialValues.unitTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n //this.state.initialValues.brandId.push(newValue[i].value);\n this.state.unitSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.setState({});\n };\n\n handleChangeModule = (newValue, actionMeta) => {\n console.log(newValue);\n this.state.moduleSelected = [];\n this.state.initialValues.moduleId = [];\n for (let i = 0; i < newValue.length; i++) {\n //this.state.initialValues.brandId.push(newValue[i].value);\n this.state.moduleSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.setState({});\n };\n\n handleTypeChange = (newValue, actionMeta) => {\n this.state.initialValues.functionTypeId = newValue.value;\n this.state.initialValues.functionTypeLable = newValue.label;\n this.setState({});\n };\n\n handleEditableChange = (newValue, actionMeta) => {\n this.state.initialValues.isLeasesEditableId = newValue.value;\n this.state.initialValues.isLeasesEditable = newValue.label;\n this.setState({});\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\");\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n groupId: \"\",\n clientName: \"\",\n clientCategory: getUserType(),\n clientNameId: \"\",\n groupName: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n unitSelected: [],\n moduleSelected: [],\n assetSelected: [],\n initialValues: {\n groupId: \"\",\n clientName: \"\",\n clientCategory: getUserType(),\n clientNameId: \"\",\n groupName: \"\",\n },\n });\n };\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/client/client-delete?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n { clientAccess() && (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Client Profile\n \n
- \n Client Profile Setup\n \n
\n \n
\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport Table from \"./ClientAccessSetupTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faPlus, faUndo, faPen, faMinus, faTimes, faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { clientAccess, clientId } from \"../../utils/index\";\nimport styles from \"../master.css\";\nimport Popup from \"reactjs-popup\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\n\n\nvar validationRules = {\n email: Yup.string().required(\"Required\"),\n mobile: Yup.string().required(\"Required\"),\n\n\n name: Yup.string().required(\"Required\"),\n};\n//console.log(clientId(), \"adas\");\nif (clientId() != 0) {\n validationRules = {\n //clientName: Yup.string().required(\"Required\"),\n //clientGroup: Yup.string().required(\"Required\"),\n //role: Yup.string().required('Required'),\n email: Yup.string().required(\"Required\"),\n mobile: Yup.string().required(\"Required\"),\n name: Yup.string().required(\"Required\"),\n };\n}\n\nconst formValidationFields = Yup.object().shape(validationRules);\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass ClientAccessSetup extends React.Component {\n state = {\n LandlordGroups: [],\n clientList: [],\n popupContent: \"\",\n messsagePopup: false,\n redirect: false,\n id: undefined,\n url: `${apiUrl.apiUrl.url}/client/create-access-setup`,\n countries: [],\n states: [],\n cityList: [],\n brandList: [],\n delete: false,\n initialValues: {\n brandId: [],\n cityId: [],\n countryId: [],\n clientId: \"\",\n clientName: \"\",\n groupId: \"\",\n groupName: \"\",\n clientGroup: \"\",\n role: \"admin\",\n roleName: \"Admin\",\n email: \"\",\n name: \"\",\n mobile: \"\",\n },\n readOnly: false,\n };\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-brand-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n };\n checkDelete() {\n var self = this;\n self.setState({\n delete: true\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/client/create-access-setup`,\n initialValues: {\n clientId: \"\",\n clientName: \"\",\n groupId: \"\",\n groupName: \"\",\n clientGroup: \"\",\n role: \"admin\",\n roleName: \"Admin\",\n email: \"\",\n name: \"\",\n mobile: \"\",\n },\n });\n } else {\n\n let athis = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/client/fetch-client-setup?id=${this.props.match.params.id}`,\n headers: headers,\n }).then(function (response) {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/client/update-access-setup?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n clientList: data.client_list,\n readOnly: true,\n });\n\n athis.state.initialValues.countryId =\n data.form_data.countryId.countryId;\n athis.state.initialValues.countryName =\n data.form_data.countryId.countryName;\n athis.state.stateSelected = data.form_data.stateId;\n athis.state.initialValues.stateId = data.form_data.stateArr;\n athis.state.citySeleted = data.form_data.cityId;\n athis.state.initialValues.cityId = data.form_data.cityArr;\n athis.state.brandSelected = data.form_data.brandId;\n athis.state.initialValues.brandId = data.form_data.brandArr;\n\n athis.state.cityList = data.form_data.cities;\n athis.state.states = data.form_data.state;\n athis.state.countries = data.form_data.countries;\n athis.state.brandList = data.form_data.brands;\n });\n\n this.setState({});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/client/fetch-client-setup?id=${this.props.match.params.id}`, { headers }\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/client/update-access-setup?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // clientList: data.client_list,\n // readOnly: true,\n // });\n\n // this.state.initialValues.countryId =\n // data.form_data.countryId.countryId;\n // this.state.initialValues.countryName =\n // data.form_data.countryId.countryName;\n // this.state.stateSelected = data.form_data.stateId;\n // this.state.initialValues.stateId = data.form_data.stateArr;\n // this.state.citySeleted = data.form_data.cityId;\n // this.state.initialValues.cityId = data.form_data.cityArr;\n // this.state.brandSelected = data.form_data.brandId;\n // this.state.initialValues.brandId = data.form_data.brandArr;\n\n // this.state.cityList = data.form_data.cities;\n // this.state.states = data.form_data.state;\n // this.state.countries = data.form_data.countries;\n // this.state.brandList = data.form_data.brands;\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n // this.setState({});\n\n }\n }\n }\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n handleRoleChange = (newValue, actionMeta) => {\n this.state.initialValues.role = newValue.value;\n this.state.initialValues.roleName = newValue.label;\n this.setState({});\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = [];\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.cityId = [];\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.cityId = [];\n this.state.initialValues.cityName = \"\";\n\n this.state.stateSelected = [];\n this.state.initialValues.stateId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.stateId.push(newValue[i].value);\n this.state.stateSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n fetch(\n `${apiUrl.apiUrl.url}/city/state-cities?stateId=` +\n this.state.initialValues.stateId,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_city\") {\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n this.state.citySeleted = [];\n this.state.initialValues.cityId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.cityId.push(newValue[i].value);\n this.state.citySeleted.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n } else if (actionMeta == \"change_brand\") {\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n }\n this.setState({});\n };\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.groupId = newValue;\n console.log(this.groupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/client/delete?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n clientId: \"\",\n clientName: \"\",\n groupId: \"\",\n groupName: \"\",\n clientGroup: \"\",\n role: \"admin\",\n roleName: \"Admin\",\n email: \"\",\n name: \"\",\n mobile: \"\",\n //countries: [],\n //states: [],\n //cityList: [],\n //brandList: [],\n stateSelected: [],\n citySeleted: [],\n brandSelected: [],\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n clientId: \"\",\n clientName: \"\",\n groupId: \"\",\n groupName: \"\",\n clientGroup: \"\",\n role: \"admin\",\n roleName: \"Admin\",\n email: \"\",\n name: \"\",\n mobile: \"\",\n //countries: [],\n //states: [],\n //cityList: [],\n //brandList: [],\n stateSelected: [],\n citySeleted: [],\n brandSelected: [],\n });\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n \n
\n - \n
- \n Masters\n \n
- \n
\n \n - \n Client Profile\n \n
- \n
\n \n - \n Client Access Setup\n \n
\n {this.renderForm()}\n
\n \n );\n }\n\n renderForm() {\n return (\n <>\n\n\n \n
\n \n \n )\n }\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n
\n );\n};\nexport default Table;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport Table from \"./ZoneTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faChevronRight, faPlus, faUndo } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass DemographicDetail extends React.Component {\n state = {\n countries: [],\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: '',\n states: [],\n zones: [],\n };\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n handleChangeZone = (newValue, actionMeta) => {\n this.zoneId = newValue.value;\n\n console.groupEnd();\n };\n\n handleChangeState = (newValue, actionMeta) => {\n //console.log(newValue);\n this.stateIds = [];\n for (let i = 0; i < newValue.length; i++) {\n this.stateIds.push(newValue[i].value);\n }\n console.groupEnd();\n };\n\n constructor(props) {\n super(props);\n }\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue, \"jj\");\n this.countryId = newValue.value;\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-zones?country_id=` + this.countryId,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n zones: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false, });\n };\n\n redirectToClose = () => {\n this.setState({\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n values.zoneId = this.zoneId;\n values.countryId = this.countryId;\n values.stateIds = this.stateIds;\n // alert(JSON.stringify(values, null, 2));\n\n console.log(values);\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/unit-detail/create-circle`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Data Saved Successfully\");\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Saved Successfully'\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n \n {(close) => (\n \n
\n
\n );\n }\n}\n\nexport default DemographicDetail;\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Placeholder } from \"rsuite\";\nimport styles from \"../master.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faSearch, faPen, faInfoCircle, faFileExcel } from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { clientId } from \"../../utils/index\";\nimport { Link } from \"react-router-dom\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport UnitTable from \"./UnitDetailTable\";\n\n\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\n\n\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n\n\n \n
\n - \n
- Masters \n
- Unit Directory \n
- \n Demographic Detail\n \n
\n \n
\n )}\n \n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n showAssetBox(record.assetId)}\n // onClick={(e) => {\n // setAssetId(record.towerId);\n // openFromParent(true);\n // }}\n >\n
\n );\n },\n },\n ];\n\n const subHeaderComponentMemo = React.useMemo(() => {\n const handleClear = () => {\n if (filterText) {\n setResetPaginationToggle(!resetPaginationToggle);\n setFilterText(\"\");\n }\n };\n\n return (\n \n
\n \n );\n};\nexport default CommercialClausesTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport TableComponent from \"./AssetDetailsTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport axios from \"axios\";\nimport { clientAccess } from \"../../utils/index\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\n\nimport { Cropper } from \"react-cropper\";\nimport \"cropperjs/dist/cropper.css\";\n\nimport { CKEditor } from \"@ckeditor/ckeditor5-react\";\nimport ClassicEditor from \"@ckeditor/ckeditor5-build-classic\";\nimport { Accordion } from \"react-bootstrap\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass AssetDetail extends React.Component {\n state = {\n LandlordGroups: [],\n clientList: [],\n showPopupAsset: false,\n showPopupTower: false,\n showPopupToc: false,\n redirect: false,\n assetTypes: [],\n assets: [],\n subAssets: [],\n countries: [],\n states: [],\n districts: [],\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n cities: [],\n assetType: \"\",\n asset: \"\",\n subAsset: \"\",\n cityId: \"\",\n url: `${apiUrl.apiUrl.url}/asset/create-tower`,\n id: undefined,\n assetImage: null,\n towerImage: null,\n tocImage: null,\n logoImage: null,\n cropperRef: React.createRef(),\n cropperTowerRef: React.createRef(),\n cropperTocRef: React.createRef(),\n cropperLogoRef: React.createRef(),\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n assetTypeId: \"\",\n region: \"\",\n assetId: \"\",\n subAssetId: \"\",\n towerName: \"\",\n latiTude: \"\",\n longiTude: \"\",\n pinCode: \"\",\n assetName: \"\",\n subAssetName: \"\",\n assetType: \"\",\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n compliance_count: \"\",\n compliance_percent: \"\",\n assetCompliance: [],\n ownershipType: \"\",\n officeArea: \"\",\n structure: \"\",\n retailsArea: \"\",\n floorPlateRange: \"\",\n assetImage: \"\",\n towerImage: \"\",\n assetDesc: \"\",\n logoImage: null,\n tocImage: null,\n remCode: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n // this.state = {\n // image: null,\n // };\n //this.cropperRef = React.createRef();\n }\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/unit-detail/get-asset-types`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assetTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n // Handle the image file change\n onImageChange = (e, type) => {\n e.preventDefault();\n const files = e.target.files;\n if (files && files.length > 0) {\n const reader = new FileReader();\n reader.onload = () => {\n if (type == \"asset\") {\n this.setState({ assetImage: reader.result, showPopupAsset: true });\n } else if (type == \"tower\") {\n this.setState({ towerImage: reader.result, showPopupTower: true });\n } else if (type == \"tocImage\") {\n this.setState({ tocImage: reader.result, showPopupToc: true });\n } else {\n this.setState({ logoImage: reader.result, showPopupLogo: true });\n }\n };\n reader.readAsDataURL(files[0]);\n }\n };\n\n removeImage = (type) => {\n if (type == \"asset\") {\n this.setState({ assetImage: '' })\n } else if (type == \"tower\") {\n this.setState({ towerImage: '' })\n } else if (type == \"tocImage\") {\n this.setState({ tocImage: '' })\n } else {\n this.setState({ logoImage: '' })\n }\n }\n\n // Handle cropping the image\n getCroppedImage = (e, type) => {\n e.preventDefault();\n let cropper, croppedCanvas, croppedImageUrl;\n if (type == \"asset\") {\n cropper = this.state.cropperRef.current.cropper;\n } else if (type == \"tower\") {\n cropper = this.state.cropperTowerRef.current.cropper;\n } else if (type == \"tocImage\") {\n cropper = this.state.cropperTocRef.current.cropper;\n } else {\n cropper = this.state.cropperLogoRef.current.cropper;\n }\n\n\n croppedCanvas = cropper.getCroppedCanvas();\n if (croppedCanvas) {\n croppedImageUrl = croppedCanvas.toDataURL();\n console.log(\"Cropped Image URL:\", croppedImageUrl);\n\n if (type == \"asset\") {\n this.setState({ assetImage: croppedImageUrl });\n } else if (type == \"tower\") {\n this.setState({ towerImage: croppedImageUrl });\n } else if (type == \"tocImage\") {\n this.setState({ tocImage: croppedImageUrl });\n } else {\n this.setState({ logoImage: croppedImageUrl });\n }\n // You can process or upload the cropped image here\n }\n };\n\n complianceList = (clientId, id) => {\n var ths = this;\n fetch(\n `${apiUrl.apiUrl.url}/compliance/get-list-asset?client_id=${clientId}&id=${id}`,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"compliance data\");\n // this.setState({\n // assetCompliance: data.data,\n // });\n ths.state.initialValues.assetCompliance = data.data;\n ths.state.compliance_count = data.count;\n ths.state.compliance_percent = data.percent_count;\n ths.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeCountry = (e) => {\n let countryid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/site/country-states/?country_id=` + countryid, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeState = (e) => {\n let stateId = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/site/state-districts?state_id=` + stateId, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n districts: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeDistrict = (e) => {\n let districtId = e.target.value;\n console.log(districtId, \"SI\");\n fetch(\n `${apiUrl.apiUrl.url}/site/district-cities?district_id=` + districtId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n cities: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getCityId(e) {\n this.state.cityId = e.target.value;\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/asset/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\",\n });\n } else {\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/asset/create-tower`,\n\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n assetTypeId: \"\",\n region: \"\",\n assetId: \"\",\n subAssetId: \"\",\n towerName: \"\",\n assetName: \"\",\n subAssetName: \"\",\n assetType: \"\",\n latiTude: \"\",\n longiTude: \"\",\n pinCode: \"\",\n assetCompliance: [],\n ownershipType: \"\",\n isCoWorking: \"\",\n efficiencyOnUsableArea: \"\",\n totalSeatUsable: \"\",\n efficiencyOnBillableArea: \"\",\n totalSeatBillable: \"\",\n officeArea: \"\",\n structure: \"\",\n retailsArea: \"\",\n floorPlateRange: \"\",\n assetImage: \"\",\n towerImage: \"\",\n assetDesc: \"\",\n logoImage: null,\n tocImage: null,\n remCode:\"\"\n },\n });\n } else {\n\n let athis = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/asset/fetch-tower?id=${this.props.match.params.id}`\n }).then(function (response) {\n let data = response.data;\n data.data[\"assetDesc\"] = data.assets[0][\"desc\"] || \"\";\n\n athis.setState({\n url: `${apiUrl.apiUrl.url}/asset/update-tower?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n subAssets: data.subAssets,\n assets: data.assets,\n countries: data.countries,\n states: data.state,\n districts: data.district,\n cities: data.cities,\n LandlordGroups: data.LandlordGroups,\n clientList: data.clientList,\n assetCompliance: [],\n });\n\n if (data.assetImage.length > 0) {\n athis.setState({ assetImage: `${apiUrl.apiUrl.url}/${data.assetImage}` });\n } else {\n athis.setState({ assetImage: null });\n }\n if (data.towerImage.length > 0) {\n athis.setState({ towerImage: `${apiUrl.apiUrl.url}/${data.towerImage}` });\n } else {\n athis.setState({ towerImage: null });\n }\n\n\n if (data.tocImage.length > 0) {\n athis.setState({ tocImage: `${apiUrl.apiUrl.url}/${data.tocImage}` });\n } else {\n athis.setState({ tocImage: null });\n }\n\n if (data.logoImage.length > 0) {\n athis.setState({ logoImage: `${apiUrl.apiUrl.url}/${data.logoImage}` });\n } else {\n athis.setState({ logoImage: null });\n }\n\n //athis.state.initialValues.assetDesc = data.assets.desc;\n athis.complianceList(data.data.clientId, data.data.assetId);\n // console.log(\"heelo\");\n //console.log(data.assets[0][\"desc\"], \"data.assets.desc\");\n //console.log(data.data);\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/asset/fetch-tower?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // data.data[\"assetDesc\"] = data.assets[0][\"desc\"] || \"\";\n\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/asset/update-tower?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // subAssets: data.subAssets,\n // assets: data.assets,\n // countries: data.countries,\n // states: data.state,\n // districts: data.district,\n // cities: data.cities,\n // LandlordGroups: data.LandlordGroups,\n // clientList: data.clientList,\n // assetCompliance: [],\n // });\n\n // if (data.assetImage.length > 0) {\n // this.setState({ assetImage: `${apiUrl.apiUrl.url}/${data.assetImage}` });\n // } else {\n // this.setState({ assetImage: null });\n // }\n // if (data.towerImage.length > 0) {\n // this.setState({ towerImage: `${apiUrl.apiUrl.url}/${data.towerImage}` });\n // } else {\n // this.setState({ towerImage: null });\n // }\n\n\n // if (data.tocImage.length > 0) {\n // this.setState({ tocImage: `${apiUrl.apiUrl.url}/${data.tocImage}` });\n // } else {\n // this.setState({ tocImage: null });\n // }\n\n // if (data.logoImage.length > 0) {\n // this.setState({ logoImage: `${apiUrl.apiUrl.url}/${data.logoImage}` });\n // } else {\n // this.setState({ logoImage: null });\n // }\n\n // //this.state.initialValues.assetDesc = data.assets.desc;\n // this.complianceList(data.data.clientId, data.data.assetId);\n // // console.log(\"heelo\");\n // console.log(data.assets[0][\"desc\"], \"data.assets.desc\");\n // console.log(data.data);\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n handleChangeAssetType = (newValue, actionMeta) => {\n console.log(newValue, \"nw\");\n this.state.initialValues.assetType = newValue.label;\n this.state.initialValues.assetTypeId = newValue.value;\n this.setState({});\n console.group(\"Value Changed\");\n this.assetType = newValue.value;\n if (!isNaN(this.assetType)) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-assets-by-filter?asset_type_id=${this.assetType}&city_id=${this.state.cityId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assets: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.state.initialValues.assetDesc = '';\n this.setState({ assetImage: null });\n this.setState({});\n }\n\n\n\n\n console.groupEnd();\n };\n\n handleChangeAsset = (newValue, actionMeta) => {\n this.state.initialValues.assetName = newValue.label;\n this.state.initialValues.assetId = newValue.value;\n this.setState({});\n console.group(\"Value Changed\");\n this.asset = newValue.value;\n if (!isNaN(this.asset)) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-sub-assets?asset_id=` +\n this.asset,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n subAssets: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n\n console.log(this.state.assets, \"asset list\", this.state.initialValues.assetId)\n\n var selectedAsset = this.state.assets.filter(item => item.id == newValue.value);\n\n if (selectedAsset.length > 0) {\n if (selectedAsset[0].image.length > 0) {\n this.setState({ assetImage: `${apiUrl.apiUrl.url}/${selectedAsset[0].image}` });\n } else {\n this.setState({ assetImage: null });\n }\n if (selectedAsset[0].toc_image.length > 0) {\n this.setState({ tocImage: `${apiUrl.apiUrl.url}/${selectedAsset[0].toc_image}` });\n } else {\n this.setState({ tocImage: null });\n }\n if (selectedAsset[0].logo_image.length > 0) {\n this.setState({ logoImage: `${apiUrl.apiUrl.url}/${selectedAsset[0].logo_image}` });\n } else {\n this.setState({ logoImage: null });\n }\n this.state.initialValues.assetDesc = selectedAsset[0].desc;\n this.setState({});\n }\n\n console.log(selectedAsset, \"selectedAsset\", selectedAsset.length)\n\n }\n\n\n console.groupEnd();\n };\n\n handleChangeSubAsset = (newValue, actionMeta) => {\n this.state.initialValues.subAssetName = newValue.label;\n this.state.initialValues.subAssetId = newValue.value;\n this.setState({});\n console.group(\"Value Changed\");\n this.subAsset = newValue.value;\n\n console.groupEnd();\n };\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/asset/delete-tower?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n redirectToClose = () => {\n this.setState({ delete: false });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n assetImage: null,\n towerImage: null,\n tocImage: \"\",\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n assetTypeId: \"\",\n region: \"\",\n assetId: \"\",\n subAssetId: \"\",\n towerName: \"\",\n assetName: \"\",\n subAssetName: \"\",\n assetType: \"\",\n latiTude: \"\",\n longiTude: \"\",\n pinCode: \"\",\n assetCompliance: [],\n ownershipType: \"\",\n isCoWorking: \"\",\n efficiencyOnUsableArea: \"\",\n totalSeatUsable: \"\",\n efficiencyOnBillableArea: \"\",\n totalSeatBillable: \"\",\n officeArea: \"\",\n structure: \"\",\n retailsArea: \"\",\n floorPlateRange: \"\",\n assetImage: \"\",\n towerImage: \"\",\n assetDesc: \"\",\n logoImage: null,\n tocImage: null,\n remCode:\"\"\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n\n assetImage: null,\n towerImage: null,\n tocImage: null,\n logoImage: null,\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n assetTypeId: \"\",\n region: \"\",\n assetId: \"\",\n subAssetId: \"\",\n towerName: \"\",\n assetName: \"\",\n subAssetName: \"\",\n assetType: \"\",\n latiTude: \"\",\n longiTude: \"\",\n pinCode: \"\",\n assetCompliance: [],\n ownershipType: \"\",\n officeArea: \"\",\n structure: \"\",\n retailsArea: \"\",\n floorPlateRange: \"\",\n assetImage: \"\",\n towerImage: \"\",\n logoImage: null,\n tocImage: null,\n assetDesc: \"\",\n remCode:\"\"\n },\n });\n };\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n\n this.complianceList(newValue.value, this.state.initialValues.assetId);\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.groupId = newValue;\n console.log(this.groupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n - \n
- Asset Unit Details
\n
\n \n
\n );\n }\n\n renderForm() {\n return (\n <>\n {this.renderForm()}
\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n
\n \n - \n Unit Directory\n \n
- \n
\n \n - \n Asset Detail\n \n
\n \n
\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default UtilityChargesTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport UtilityChargesTable from \"./UtilityChargesTable\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass UtilityCharges extends React.Component {\n state = {\n isOpen: false,\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: '',\n delete: false,\n url: `${apiUrl.apiUrl.url}/utility-charges-logic/create`,\n id: undefined,\n initialValues: {\n utility_charges_logic_name: \"\",\n effective_from: \"\",\n utility_charges_logic_formula: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/utility-charges-logic/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // if (window.confirm(\"Are You Sure You Want to Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/utility-charges-logic/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/utility-charges-logic/create`,\n initialValues: {\n utility_charges_logic_name: \"\",\n effective_from: \"\",\n utility_charges_logic_formula: \"\",\n },\n });\n } else {\n fetch(\n `${apiUrl.apiUrl.url}/utility-charges-logic/fetch-logic?id=${this.props.match.params.id}`,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n url: `${apiUrl.apiUrl.url}/utility-charges-logic/update?id=${this.props.match.params.id}`,\n initialValues: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n }\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n utility_charges_logic_name: \"\",\n effective_from: \"\",\n utility_charges_logic_formula: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n utility_charges_logic_name: \"\",\n effective_from: \"\",\n utility_charges_logic_formula: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/utility-charges-logic/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something Went Wrong',\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Deleted Successfully'\n });\n }\n });\n\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Charges Master\n \n
- \n Utility Charges\n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default OtherChargesTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport OtherChargesTable from \"./OtherChargesTable\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass OtherCharges extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/other-charges-logic/create`,\n id: undefined,\n isOpen: false,\n redirect: false,\n messsagePopup: false,\n popupContent: \"\",\n popupalertMessage: false,\n popupMessageContent: '',\n delete: false,\n initialValues: {\n other_charges_logic_name: \"\",\n effective_from: \"\",\n other_charges_logic_formula: \"\",\n },\n };\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/other-charges-logic/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // if (window.confirm(\"Are You Sure You Want to Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/other-charges-logic/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/other-charges-logic/create`,\n initialValues: {\n other_charges_logic_name: \"\",\n effective_from: \"\",\n other_charges_logic_formula: \"\",\n },\n });\n } else {\n fetch(\n `${apiUrl.apiUrl.url}/other-charges-logic/fetch-logic?id=${this.props.match.params.id}`,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n url: `${apiUrl.apiUrl.url}/other-charges-logic/update?id=${this.props.match.params.id}`,\n initialValues: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n }\n }\n\n constructor(props) {\n super(props);\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n other_charges_logic_name: \"\",\n effective_from: \"\",\n other_charges_logic_formula: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n other_charges_logic_name: \"\",\n effective_from: \"\",\n other_charges_logic_formula: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/other-charges-logic/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something Went Wrong',\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Deleted Successfully'\n });\n }\n });\n\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Charges Master\n \n
- \n Other Charges\n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default PropertyTaxLogicTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport PropertyTaxLogicTable from \"./PropertyTaxLogicTable\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass PropertyTaxLogic extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/property-tax-logic/create`,\n isOpen: false,\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: '',\n delete: false,\n id: undefined,\n initialValues: {\n property_tax_logic_formula: \"\",\n property_tax_logic_name: \"\",\n effective_from: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/property-tax-logic/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // if (window.confirm(\"Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/property-tax-logic/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/property-tax-logic/create`,\n initialValues: {\n property_tax_logic_formula: \"\",\n property_tax_logic_name: \"\",\n effective_from: \"\",\n },\n });\n } else {\n fetch(\n `${apiUrl.apiUrl.url}/property-tax-logic/fetch-logic?id=${this.props.match.params.id}`,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n url: `${apiUrl.apiUrl.url}/property-tax-logic/update?id=${this.props.match.params.id}`,\n initialValues: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n }\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n property_tax_logic_formula: \"\",\n property_tax_logic_name: \"\",\n effective_from: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n property_tax_logic_formula: \"\",\n property_tax_logic_name: \"\",\n effective_from: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/property-tax-logic/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something Went Wrong',\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Deleted Successfully'\n });\n }\n });\n\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n \n Commercial Logic Master\n \n \n
- \n Property Tax Logic\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default MarketingFundLogicTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport MarketingFundLogicTable from \"./MarketingFundLogicTable\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass MarketingFundLogic extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/marketing-fund-logic/create`,\n isOpen: false,\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: '',\n delete: false,\n id: undefined,\n initialValues: {\n marketing_fund_logic_name: \"\",\n effective_from: \"\",\n marketing_fund_logic_formula: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/marketing-fund-logic/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // if (window.confirm(\"Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/marketing-fund-logic/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/marketing-fund-logic/create`,\n initialValues: {\n marketing_fund_logic_name: \"\",\n effective_from: \"\",\n marketing_fund_logic_formula: \"\",\n },\n });\n } else {\n fetch(\n `${apiUrl.apiUrl.url}/marketing-fund-logic/fetch-logic?id=${this.props.match.params.id}`,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n url: `${apiUrl.apiUrl.url}/marketing-fund-logic/update?id=${this.props.match.params.id}`,\n initialValues: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n }\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n marketing_fund_logic_name: \"\",\n effective_from: \"\",\n marketing_fund_logic_formula: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n marketing_fund_logic_name: \"\",\n effective_from: \"\",\n marketing_fund_logic_formula: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/marketing-fund-logic/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something Went Wrong',\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Deleted Successfully'\n });\n }\n });\n\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n \n Commercial Logic Master\n \n \n
- \n Marketing Fund Logic\n \n
\n \n
\n\n\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default CamLogicTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport CamLogicTable from \"./CamLogicTable\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass CamLogic extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/cam-logic/create`,\n isOpen: false,\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: '',\n delete: false,\n id: undefined,\n initialValues: {\n cam_logic_name: \"\",\n effective_from: \"\",\n cam_logic_formula: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/cam-logic/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // if (window.confirm(\"Are You Sure You Want to Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/cam-logic/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/cam-logic/create`,\n initialValues: {\n cam_logic_name: \"\",\n effective_from: \"\",\n cam_logic_formula: \"\",\n },\n });\n } else {\n fetch(\n `${apiUrl.apiUrl.url}/cam-logic/fetch-logic?id=${this.props.match.params.id}`,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n url: `${apiUrl.apiUrl.url}/cam-logic/update?id=${this.props.match.params.id}`,\n initialValues: data.data,\n });\n console.log(this.state.initialValues, \"iv\");\n })\n .catch((error) => {\n console.log(error);\n });\n }\n }\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n cam_logic_name: \"\",\n effective_from: \"\",\n cam_logic_formula: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true, messsagePopup: false,\n initialValues: {\n cam_logic_name: \"\",\n effective_from: \"\",\n cam_logic_formula: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/cam-logic/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something Went Wrong',\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Deleted Successfully'\n });\n }\n });\n\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n \n Commercial Logic Master\n \n \n
- \n CAM Logic\n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default RentLogicTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport RentLogicTable from \"./RentLogicTable\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass RentLogic extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/rent-logic/create`,\n isOpen: false,\n redirect: false,\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n id: undefined,\n initialValues: {\n cam_logic_name: \"\",\n effective_from: \"\",\n cam_logic_formula: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/rent-logic/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\"\n });\n\n } else {\n self.setState({\n delete: true\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/rent-logic/create`,\n initialValues: {\n rent_logic_name: \"\",\n effective_from: \"\",\n rent_logic_formula: \"\",\n },\n });\n } else {\n fetch(\n `${apiUrl.apiUrl.url}/rent-logic/fetch-logic?id=${this.props.match.params.id}`,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n url: `${apiUrl.apiUrl.url}/rent-logic/update?id=${this.props.match.params.id}`,\n initialValues: data.data,\n });\n console.log(this.state.initialValues, \"iv\");\n })\n .catch((error) => {\n console.log(error);\n });\n }\n }\n }\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/rent-logic/delete?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cam_logic_name: \"\",\n effective_from: \"\",\n cam_logic_formula: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n cam_logic_name: \"\",\n effective_from: \"\",\n cam_logic_formula: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n \n Commercial Logic Master\n \n \n
- \n Rent Logic\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default RentLogicTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport CreatableSelect from \"react-select/creatable\";\nimport ComplianceTable from \"./ComplianceTable\";\nimport Select from \"react-select\";\nimport { clientAccess } from \"../../utils/index\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass ComplianceComponent extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/compliance/create`,\n isOpen: false,\n LandlordGroups: [],\n clientList: [],\n redirect: false,\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n categoryList: [],\n id: undefined,\n initialValues: {\n name: \"\",\n compliance_type: \"\",\n compliance_datatype: \"\",\n category: \"\",\n category_id: '',\n },\n };\n\n constructor(props) {\n super(props);\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/compliance/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\"\n });\n\n } else {\n self.setState({\n delete: true\n });\n }\n });\n }\n\n componentDidMount() {\n\n\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/compliance/get-compliance-category`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n categoryList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/compliance/create`,\n initialValues: {\n name: \"\",\n compliance_type: \"\",\n compliance_datatype: \"\",\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/compliance/fetch-logic?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/compliance/update?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n clientList: data.clientList,\n LandlordGroups: data.LandlordGroups\n });\n }).catch((error) =>{});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/compliance/fetch-logic?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/compliance/update?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // clientList: data.clientList,\n // LandlordGroups: data.LandlordGroups\n // });\n // console.log(this.state.initialValues, \"iv\");\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n handleChangeCategory = (newValue, actionMeta) => {\n this.state.initialValues.category = newValue.label;\n this.state.initialValues.category_id = newValue.value;\n this.setState({});\n console.group(\"Value Changed\");\n }\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n fetch(`${apiUrl.apiUrl.url}/compliance/fetch-compliance-category?clientId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n categoryList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.groupId = newValue;\n console.log(this.groupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/compliance/delete?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n name: \"\",\n compliance_type: \"\",\n compliance_datatype: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n name: \"\",\n compliance_type: \"\",\n compliance_datatype: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n \n Clauses Master\n \n \n
- \n Compliance Clauses\n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n { (clientId()==record.clientId || clientId()==1 || clientId()==null)&&\n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default CommercialClausesTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { clientAccess } from \"../../utils/index\";\nimport CommercialClausesTable from \"./CommercialClausesTable\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Select from \"react-select\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\n\nclass CommercialClauses extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/commercial-clause/create`,\n LandlordGroups: [],\n clientList: [],\n isOpen: false,\n redirect: false,\n messsagePopup: false,\n popupContent: \"\",\n popupalertMessage: false,\n popupMessageContent: '',\n delete: false,\n id: undefined,\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n clause_name: \"\",\n effective_from: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {\n\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/commercial-clause/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n console.log('you cannot delete');\n } else {\n // if (window.confirm(\"Are You Sure You Want to Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/commercial-clause/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/commercial-clause/create`,\n initialValues: {\n clause_name: \"\",\n effective_from: \"\",\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/commercial-clause/fetch-logic?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/commercial-clause/update?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n LandlordGroups: data.LandlordGroups,\n clientList: data.clientList,\n //\n });\n }).catch((err) => {});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/commercial-clause/fetch-logic?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/commercial-clause/update?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // LandlordGroups: data.LandlordGroups,\n // clientList: data.clientList,\n // //\n // });\n // console.log(this.state.initialValues);\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n clause_name: \"\",\n effective_from: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n clause_name: \"\",\n effective_from: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/commercial-clause/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something Went Wrong',\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Deleted Successfully'\n });\n }\n });\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.groupId = newValue;\n console.log(this.groupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Charges Master\n \n
- \n Commercial Clauses\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n { (clientId()==record.clientId || clientId()== 1 || clientId()==null) &&\n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default TaxationTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { clientAccess } from \"../../utils/index\";\nimport TaxationTable from \"./TaxationTable\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Select from \"react-select\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\n\nclass List extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/taxation/create`,\n LandlordGroups: [],\n clientList: [],\n rateTypes: [],\n chargeTypes: [],\n isOpen: false,\n redirect: false,\n messsagePopup: false,\n popupContent: \"\",\n popupalertMessage: false,\n popupMessageContent: '',\n delete: false,\n id: undefined,\n stateSelected: '',\n states: [],\n initialValues: {\n rateTypeId: \"\",\n rateTypeTitle: \"\",\n rate_type: \"\",\n chargeTypeId: \"\",\n chargeTypeTitle: \"\",\n charge_type: \"\",\n fromDate: \"\",\n toDate: \"\",\n rate: \"\"\n },\n };\n\n constructor(props) {\n super(props);\n\n\n }\n\n componentDidMount() {\n\n\n\n\n this.setState({\n rateTypes: [{ title: 'CGST' }, { title: 'SGST' }, { title: 'IGST' }, { title: 'TDS' }],\n });\n this.setState({\n chargeTypes: [{ title: 'RENT(Minimum Guarantee)' }, { title: 'Minimum Guarantee Rent or Revenue Share (Higher)' }, { title: 'CAM' }, { title: 'Car Parking' }, { title: \"Signage\" }, { title: '2 Wheeler Parking' }, { title: 'Marketing Fund' }, { title: 'Storage Rent' }, { title: 'Electricity – All Others' }, { title: 'HVAC – All' }, { title: 'Water – All' }, { 'title': 'Gas – All' }],\n });\n\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/1`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/commercial-clause/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n console.log('you cannot delete');\n } else {\n // if (window.confirm(\"Are You Sure You Want to Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/commercial-clause/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/taxation/create`,\n initialValues: {\n rateTypeId: \"\",\n rateTypeTitle: \"\",\n rate_type: \"\",\n chargeTypeId: \"\",\n chargeTypeTitle: \"\",\n charge_type: \"\",\n fromDate: \"\",\n toDate: \"\",\n rate: \"\",\n stateId: \"\"\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/taxation/fetch-taxation?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/taxation/update?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n LandlordGroups: data.LandlordGroups,\n clientList: data.clientList,\n stateSelected: data.data.stateSelected\n //\n });\n\n }).catch((error) => {});\n \n // fetch(\n // `${apiUrl.apiUrl.url}/taxation/fetch-taxation?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/taxation/update?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // LandlordGroups: data.LandlordGroups,\n // clientList: data.clientList,\n // stateSelected: data.data.stateSelected\n // //\n // });\n // console.log(this.state.initialValues);\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n\n\n\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n stateSelected: { 'value': '', 'label': '' },\n initialValues: {\n rateTypeId: \"\",\n rateTypeTitle: \"\",\n rate_type: \"\",\n chargeTypeId: \"\",\n chargeTypeTitle: \"\",\n charge_type: \"\",\n fromDate: \"\",\n toDate: \"\",\n rate: \"\",\n stateId: \"\"\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n stateSelected: { 'value': '', 'label': '' },\n initialValues: {\n rateTypeId: \"\",\n rateTypeTitle: \"\",\n rate_type: \"\",\n chargeTypeId: \"\",\n chargeTypeTitle: \"\",\n charge_type: \"\",\n fromDate: \"\",\n toDate: \"\",\n rate: \"\",\n stateId: \"\"\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/taxation/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something Went Wrong',\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Deleted Successfully'\n });\n }\n });\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else if (actionMeta == \"rate\") {\n this.state.initialValues.rateTypeId = newValue.value;\n this.state.initialValues.rateTypeTitle = newValue.value;\n this.state.initialValues.rate_type = newValue.value;\n this.setState({});\n } else if (actionMeta == \"charge\") {\n this.state.initialValues.chargeTypeId = newValue.value;\n this.state.initialValues.chargeTypeTitle = newValue.label;\n this.state.initialValues.charge_type = newValue.label;\n this.setState({});\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n this.setState({});\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n // this.groupId = newValue;\n // console.log(this.groupId, \"ddd\");\n // console.log(`action: ${actionMeta}`);\n // console.groupEnd();\n };\n\n\n valueChange = (newValue, actionMeta) => {\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.stateSelected = {\n value: newValue.value,\n label: newValue.label,\n };\n\n // this.state.initialValues.cityId = [];\n // this.state.initialValues.cityName = \"\";\n\n // this.state.stateSelected = [];\n // this.state.initialValues.stateId = [];\n // for (let i = 0; i < newValue.length; i++) {\n // this.state.initialValues.stateId.push(newValue[i].value);\n // this.state.stateSelected.push({\n // value: newValue[i].value,\n // label: newValue[i].label,\n // });\n // }\n\n //districtList\n }\n this.setState({});\n };\n\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Taxation Master\n \n
- \n List\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n { (clientId()==record.clientId || clientId()==1 || clientId()==null )&&\n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default LegalClausesTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { clientAccess } from \"../../utils/index\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport LegalClausesTable from \"./LegalClausesTable\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Select from \"react-select\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\n\nclass LegalClauses extends React.Component {\n state = {\n url: `${apiUrl.apiUrl.url}/legal-clause/create`,\n LandlordGroups: [],\n clientList: [],\n isOpen: false,\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: '',\n delete: false,\n id: undefined,\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n clause_name: \"\",\n effective_from: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n componentDidMount() {\n\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/legal-clause/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // if (window.confirm(\"Are You Sure You Want to Delete the item?\")) {\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/legal-clause/delete?id=${self.state.id}`,\n // }).then(function (response) {\n // if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n // } else {\n // alert(\"Data Deleted Successfully\");\n // self.setState({ redirect: true });\n // }\n // });\n // }\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/legal-clause/create`,\n initialValues: {\n clause_name: \"\",\n effective_from: \"\",\n },\n });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/legal-clause/fetch-logic?id=${this.props.match.params.id}`).then(function (response) {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/legal-clause/update?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n LandlordGroups: data.LandlordGroups,\n clientList: data.clientList,\n //\n });\n }).catch((error) => {});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/legal-clause/fetch-logic?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/legal-clause/update?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // LandlordGroups: data.LandlordGroups,\n // clientList: data.clientList,\n // //\n // });\n\n // console.log(this.state.initialValues, \"iv\");\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n clause_name: \"\",\n effective_from: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n clause_name: \"\",\n effective_from: \"\",\n },\n });\n };\n\n redirectToDelete = () => {\n this.setState({\n delete: false,\n });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/legal-clause/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something Went Wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something Went Wrong',\n });\n } else {\n // alert(\"Data Deleted Successfully\");\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Deleted Successfully'\n });\n }\n });\n\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.groupId = newValue;\n console.log(this.groupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Charges Master\n \n
- \n Legal Clauses\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Are you sure you want to delete this item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default ProductMasterTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport ProductMasterTable from \"./ProductMasterTable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { clientAccess } from \"../../utils/index\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass ProductMaster extends React.Component {\n state = {\n LandlordGroups: [],\n clientList: [],\n products: [],\n isOpen: false,\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n redirect: false,\n isSearchable: true,\n isClearable: true,\n url: `${apiUrl.apiUrl.url}/product-master/create`,\n id: undefined,\n initialValues: {\n productName: \"\",\n productId: \"\",\n remarks: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/product-master/get-all-products`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n products: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n changeProduct = (newValue, values) => {\n values.productId = \"\";\n values.productName = \"\";\n this.state.initialValues.productId = newValue.value;\n this.state.initialValues.productName = newValue.label;\n values.productId = newValue.value;\n this.setState({});\n console.groupEnd();\n };\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/product-master/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\"\n });\n\n } else {\n self.setState({\n delete: true\n });\n }\n });\n }\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.groupId = newValue;\n console.log(this.groupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/product-master/create`,\n initialValues: {\n brandCategory: \"\",\n subcategoryId: \"\",\n brandName: \"\",\n groupName: \"\",\n groupId: \"\",\n clientName: \"\",\n clientId: \"\"\n },\n });\n } else {\n \n let athis = this;\n axios.get(\n `${apiUrl.apiUrl.url}/product-master/fetch-logic?id=${this.props.match.params.id}`\n ).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/product-master/update?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n clientList: data.clientList,\n LandlordGroups: data.LandlordGroups\n });\n }).catch((error) => {});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/product-master/fetch-logic?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/product-master/update?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // clientList: data.clientList,\n // LandlordGroups: data.LandlordGroups\n\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/product-master/delete?id=${this.state.id}`,\n }).then(function (response) {\n\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n productName: \"\",\n productId: \"\",\n remarks: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n productName: \"\",\n productId: \"\",\n remarks: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Brand Directory\n \n
- \n Product Master\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {/* \n \n \n {/* \n \n Previous\n \n = numPages}\n onClick={nextPage}\n >\n Next\n \n
\n );\n}\nexport { ViewLeasePdfReader };\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter, Link } from \"react-router-dom\";\nimport axios from \"axios\";\nimport { ViewLeasePdfReader } from \"../utils/ViewLeaseDocumentViewer\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport { getUserRole, getUserType, getModules } from \"../utils/index\";\nimport {\n faUserCircle,\n faSignOutAlt,\n faKey,\n faUserAlt,\n faClock,\n faBell,\n faDownload,\n faPlus,\n faBookOpen,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport apiUrl from \"../apiUrlConstant\";\n\nif (\n typeof localStorage.getItem(\"user\") == \"undefined\" ||\n localStorage.getItem(\"user\") == null ||\n localStorage.getItem(\"user\") == \"null\"\n) {\n\n var isUserPath = window.location.pathname.includes(\"user\");\n if (window.location.pathname != \"/\" && window.location.pathname != \"/login\" && !isUserPath) {\n console.log(\"this is different url\", window.location.pathname);\n localStorage.clear();\n window.location.pathname = \"/login\";\n }\n}\n\nclass TopHeader extends React.Component {\n state = {\n userDetails: JSON.parse(localStorage.getItem(\"user\")),\n isManualOpen: false,\n };\n\n handleLogout = () => {\n localStorage.clear();\n window.location.pathname = \"/login\";\n };\n\n constructor(props) {\n super(props);\n }\n\n openModal = () => this.setState({ isManualOpen: true });\n closeModal = () => this.setState({ isManualOpen: false });\n\n\n\n componentDidMount(props) {\n var self = this;\n\n console.log(this.props.location.pathname, \"this pro\");\n var pagePath = this.props.match.path.replace(\"/\", \"\");\n //alert(pagePath + \" < == pagePath\");\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/user/check-status`,\n data: { page: pagePath, current_url: self.props.location.pathname },\n }).then(function (response) {\n if (response.data.result == \"success\") {\n self.setState({ redirect: true });\n }\n });\n }\n\n onUserManualClick = () => {\n const fileURL = apiUrl.apiUrl.url + \"/lease-report/download-user-manual\";\n let ele = document.createElement(\"a\");\n ele.href = fileURL;\n ele.target = \"_blank\";\n ele.click();\n }\n\n render() {\n let url = this.props.match;\n return (\n \n Page {pageNumber} of {numPages}\n
*/}\n\n \n {/* */}\n
\n\n \n Page {pageNumberView} of {numPages}\n
\n\n \n \n \n \n \n \n \n {/* \n \n Close\n \n */}\n \n \n
\n );\n }\n}\n\nexport default withRouter(TopHeader);\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Placeholder } from \"rsuite\";\nimport styles from \"../master.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faSearch, faPlus, faPen, faFileExcel } from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\nconst columns = [\n {\n name: \"S.No\",\n selector: \"srNo\",\n sortable: false,\n grow: 1,\n },\n {\n name: \"Asset Name\",\n selector: \"assetName\",\n sortable: false,\n grow: 3,\n },\n {\n name: \"Tower Name\",\n selector: \"towerName\",\n sortable: false,\n grow: 3,\n },\n {\n name: \"Budget Type\",\n selector: \"budgetType\",\n sortable: false,\n grow: 3,\n wrap: true,\n left: true,\n },\n {\n name: \"Budget On\",\n selector: \"budgetOn\",\n sortable: false,\n grow: 3,\n wrap: true,\n left: true,\n },\n\n {\n name: \"Total Area\",\n selector: \"totalArea\",\n sortable: false,\n grow: 3,\n wrap: true,\n left: true,\n },\n {\n name: \"Leased Area\",\n selector: \"leasedArea\",\n sortable: false,\n grow: 3,\n wrap: true,\n left: true,\n },\n {\n name: \"Vacant Area\",\n selector: \"vacantArea\",\n sortable: false,\n grow: 3,\n wrap: true,\n left: true,\n },\n {\n name: \"Budget Frequency\",\n selector: \"budgetFrequency\",\n sortable: false,\n grow: 3,\n wrap: true,\n left: true,\n },\n {\n name: \"Action\",\n grow: 1,\n // selector: \"info\",\n sortable: false,\n cell: (record) => {\n return (\n \n {/*
\n {/* \n React Select Here\n
*/}\n \n
\n \n {![\"checker\", \"user\"].includes(getUserRole()) &&\n (window.location.pathname === \"/createlease\" ||\n window.location.pathname === \"/user/alerts/alerts\" ? null :\n window.location.pathname.includes(\"/leads\") ? (\n \n Create Lead\n \n ) : getModules().includes(1) ? (\n \n Create Lease\n \n ) : null)\n }\n\n\n
\n \n {getModules().includes(1) && (\n \n
\n\n - \n
- \n \n {this.state.userDetails.profile_pic && this.state.userDetails.profile_pic.trim() !== '' ?\n
\n :{this.state.userDetails.name.match(/\\b(\\w)/g).join('')}
}\n\n Welcome\n\n \n{this.state.userDetails.name}
\n- \n
- \n \n \n My Profile\n \n \n
- \n \n \n\n Change Password\n \n \n\n { getModules().includes(1) && (\n <>\n {\n (getUserType() !== \"occupier\" && getUserType() !== \"Occupier\" && ![\"checker\", \"user\"].includes(getUserRole())) &&\n
- \n \n \n\n Close Deal\n \n \n }\n\n
- \n \n \n\n Alerts\n \n \n
- \n \n \n\n Outflow \n \n \n {(getUserType() !== \"occupier\" && getUserType() !== \"Occupier\" && ![\"checker\", \"user\"].includes(getUserRole())) && (\n
- \n \n \n\n Invoicing\n \n \n )}\n \n\n )}\n\n
- \n \n \n\n Log Out\n \n \n
\n
\n
*/}\n\n <>\n \n
\n - \n \n
![](\"/img/logo.png\"){kind=logo}
\n \n \n \n
\n - \n
- \n \n
\n {this.state.userDetails.name}\n \n - \n
- \n \n
\n My Profile\n \n \n - \n \n
\n Change Password\n \n \n {\n (getUserType() !== \"occupier\" && getUserType() !== \"Occupier\") &&\n - \n \n
\n Close Deal\n \n \n }\n\n - \n \n
\n Alerts\n \n \n - \n \n
\n Outflow \n \n \n {(getUserType() !== \"occupier\" && getUserType() !== \"Occupier\") && (\n - \n \n
\n Invoicing\n \n \n )}\n - \n \n
\n Log Out\n \n \n
\n - \n \n
\n
\n \n
\n \n
\n\n - \n
- User Manual \n
\n
\n \n \n
\n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default ProductMasterTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport BudgetMasterTable from \"./BudgetMasterTable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { clientAccess } from \"../../utils/index\";\nimport DatePicker from \"react-datepicker\";\nimport moment from \"moment\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass BudgetMaster extends React.Component {\n state = {\n LandlordGroups: [],\n clientList: [],\n assetlist: [],\n utilities: [{ from: 1, to: 2, rate: 12 }],\n products: [],\n isOpen: false,\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n redirect: false,\n isSearchable: true,\n isClearable: true,\n isDisabled: this.props.match.params.id !== undefined ? true : false,\n url: `${apiUrl.apiUrl.url}/budget/create`,\n id: undefined,\n subAssetNameValues: [],\n tower: [],\n initialValues: {\n assetName: \"\",\n assetId: \"\",\n leasedArea: \"\",\n totalArea: \"\",\n vacantArea: \"\",\n dataList: { keys: [], value: { list: [] } },\n budgetingOn: \"\",\n budgetFrequency: \"\",\n vacantArea: \"\",\n budgetType: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/budget/get-all-products`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n products: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/asset/fetch-all-assets`,\n }).then(function (response) {\n console.log(response.data, \"asset list\");\n self.setState({\n assetlist: response.data,\n });\n });\n }\n\n changeProduct = (newValue, values) => {\n values.productId = \"\";\n values.productName = \"\";\n this.state.initialValues.productId = newValue.value;\n this.state.initialValues.productName = newValue.label;\n values.productId = newValue.value;\n this.setState({});\n console.groupEnd();\n };\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/budget/check-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\",\n });\n } else {\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/budget/fetch-all-assets?id=` + newValue.value,\n }).then(function (response) {\n console.log(response.data, \"asset list\")\n self.setState({\n assetlist: response.data\n });\n\n });\n\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.groupId = newValue;\n console.log(this.groupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n leaseDateFormat = (dt) => {\n return dt;\n };\n\n addRatesRow = (ind) => {\n if (this.state.utilities === undefined) {\n this.state.utilities = [];\n }\n\n this.state.initialValues.dataList.value[ind].list.push({ month: \"\" });\n\n this.setState({});\n };\n\n removeRatesRow(element, ind) {\n //this.state.utilities.splice(element, 1);\n this.state.initialValues.dataList.value[element].list.splice(ind, 1);\n this.setState({});\n }\n\n componentDidUpdate() {\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/budget/create`,\n initialValues: {\n assetName: \"\",\n assetId: \"\",\n leasedArea: \"\",\n totalArea: \"\",\n vacantArea: \"\",\n dataList: { keys: [], value: { list: [] } },\n budgetingOn: \"\",\n budgetFrequency: \"\",\n vacantArea: \"\",\n budgetType: \"\",\n subAssetName: \"\",\n tower: \"\",\n },\n });\n } else {\n \n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/budget/fetch-logic?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/budget/update?id=${athis.props.match.params.id}`,\n initialValues: data.data,\n clientList: data.clientList,\n LandlordGroups: data.LandlordGroups,\n subAssetNameValues: data.subAssets,\n tower: data.towers,\n });\n }).catch((error) => {});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/budget/fetch-logic?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/budget/update?id=${this.props.match.params.id}`,\n // initialValues: data.data,\n // clientList: data.clientList,\n // LandlordGroups: data.LandlordGroups,\n // subAssetNameValues: data.subAssets,\n // tower: data.towers,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n changeAsset = (e) => {\n let assetId = e.value;\n this.state.initialValues.assetName = e.label;\n this.state.initialValues.assetId = e.value;\n\n //fetch(`${apiUrl.apiUrl.url}/sub-assets/asset-sub-assets/` + assetId,{headers})\n fetch(`${apiUrl.apiUrl.url}/asset/asset-sub-assets?id=` + assetId, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //let assetFromApi = Object.keys(data);\n\n this.setState({\n subAssetNameValues: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeSubAsset = (e) => {\n let subAssetId = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/asset/sub-asset-towers?id=` + subAssetId, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.initialValues.subAssetName = e.target.value;\n this.setState({\n tower: data,\n });\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getTowerDetails = (e) => {\n let towerId = e.target.value;\n let self = this;\n fetch(`${apiUrl.apiUrl.url}/asset/fetch-tower-details?id=` + towerId, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data.data.leasedArea, \"===\", data.data.totalArea, \"291\");\n self.state.initialValues.tower = towerId;\n self.state.initialValues.leasedArea = data.data.leasedArea;\n self.state.initialValues.totalArea = data.data.totalArea;\n self.state.initialValues.vacantArea =\n data.data.totalArea - data.data.leasedArea;\n self.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({});\n };\n\n handleChangeAssetName = (e) => {\n this.state.initialValues.assetName = e.label;\n this.state.initialValues.assetId = e.value;\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/asset/fetch-asset-details?id=${e.value}`,\n }).then(function (response) {\n console.log(response.data, \"response data\");\n self.state.initialValues.leasedArea = response.data.leased_area;\n self.state.initialValues.totalArea = response.data.total_area;\n self.state.initialValues.vacantArea =\n response.data.total_area - response.data.leased_area;\n self.setState({});\n });\n\n this.setState({});\n };\n\n setMonth = (index, monthInd, date) => {\n this.state.initialValues.dataList.value[index].list[monthInd][\"month\"] =\n moment(date).format(\"MMM YYYY\");\n this.setState({});\n };\n\n changeBudgetingOn = (e) => {\n var self = this;\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/budget/check-details?id=${this.state.initialValues.tower}&unit=${e.target.value}`,\n }).then(function (response) {\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: response.data.msg,\n });\n } else {\n if (ths.state.initialValues.tower != \"\" && e.target.value == \"unit\") {\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/asset/fetch-asset-units?id=${ths.state.initialValues.tower}`,\n }).then(function (response) {\n self.state.initialValues.dataList = response.data;\n self.setState({});\n });\n self.setState({});\n } else {\n self.state.initialValues.dataList = {\n keys: [0],\n value: { 0: { name: \"\", list: [{ month: \"\" }] } },\n };\n self.setState({});\n }\n }\n });\n };\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/budget/delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n assetName: \"\",\n assetId: \"\",\n leasedArea: \"\",\n totalArea: \"\",\n vacantArea: \"\",\n dataList: { keys: [], value: { list: [] } },\n budgetingOn: \"\",\n budgetFrequency: \"\",\n vacantArea: \"\",\n budgetType: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n isDisabled: this.props.match.params.id !== undefined ? true : false,\n popupContent: \"\",\n initialValues: {\n assetName: \"\",\n assetId: \"\",\n leasedArea: \"\",\n totalArea: \"\",\n vacantArea: \"\",\n dataList: { keys: [], value: { list: [] } },\n budgetingOn: \"\",\n budgetFrequency: \"\",\n vacantArea: \"\",\n budgetType: \"\",\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Budget Master\n \n
- \n Budget Master\n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n \n \n {\" \"}\n
\n );\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default ProductMasterTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport BudgetMasterTable from \"./prospectFieldMasterTable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport { clientAccess } from \"../../utils/index\";\nimport DatePicker from \"react-datepicker\";\nimport moment from \"moment\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass ProspectMaster extends React.Component {\n state = {\n categories: [],\n isOpen: false,\n popupContent: \"\",\n messsagePopup: false,\n delete: false,\n redirect: false,\n isSearchable: true,\n isClearable: true,\n isDisabled: this.props.match.params.id !== undefined ? true : false,\n url: `${apiUrl.apiUrl.url}/prospect/create-category`,\n id: undefined,\n initialValues: {\n category: \"\",\n title: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/prospect/fetch-category`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n categories: data['categories'],\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n checkDelete() {\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/prospect/check-field-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Sorry you cannot delete this item\",\n });\n } else {\n self.setState({\n delete: true,\n });\n }\n });\n }\n\n handleChangeCategory = (newValue, actionMeta) => {\n this.state.initialValues.categoryId = newValue.value;\n this.state.initialValues.categoryName = newValue.label;\n this.setState({});\n this.categoryId = newValue;\n };\n\n componentDidUpdate() {\n console.log('hihih');\n console.log(this.props.match, \"===\");\n\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n if (this.props.match.params.id === undefined) {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/create-category`,\n // initialValues: {\n // category: \"\",\n // title: \"\",\n // },\n // });\n } else {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/prospect/fetch-field?id=${this.props.match.params.id}`).then(function (response) {\n let data = response.data;\n athis.setState({\n url: `${apiUrl.apiUrl.url}/prospect/update-field?id=${athis.props.match.params.id}`,\n initialValues: data.data\n });\n\n const unitDetailsObject = athis.state.categories.find(item => item.key === data.data.category);\n\n athis.state.initialValues.categoryId = data.data.category;\n athis.state.initialValues.categoryName = unitDetailsObject.value;\n athis.setState({});\n\n }).catch(function () {});\n\n // fetch(\n // `${apiUrl.apiUrl.url}/prospect/fetch-field?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // url: `${apiUrl.apiUrl.url}/prospect/update-field?id=${this.props.match.params.id}`,\n // initialValues: data.data\n // });\n\n // console.log(this.state.categories);\n // const unitDetailsObject = this.state.categories.find(item => item.key === data.data.category);\n\n\n // this.state.initialValues.categoryId = data.data.category;\n // this.state.initialValues.categoryName = unitDetailsObject.value;\n // this.setState({});\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n }\n }\n\n\n redirectToDelete = () => {\n this.setState({ delete: false });\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/prospect/field-delete?id=${this.state.id}`,\n }).then(function (response) {\n if (!response.data.success) {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong\",\n });\n } else {\n ths.setState({\n messsagePopup: true,\n popupContent: \"Data Deleted Successfully\",\n });\n }\n });\n };\n\n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n category: \"\",\n title: \"\",\n },\n });\n };\n\n redirectAfterEdit = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n isDisabled: this.props.match.params.id !== undefined ? true : false,\n popupContent: \"\",\n initialValues: {\n category: \"\",\n title: \"\"\n },\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n \n );\n }\n\n renderForm() {\n return (\n \n {\n console.log(this.validator.allValid(), \"validation\");\n\n values.category = this.state.initialValues.categoryId;\n var self = this;\n axios({\n method: \"post\",\n url: this.state.url,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({\n messsagePopup: true,\n popupContent: \"Data Saved Successfully!\",\n url: `${apiUrl.apiUrl.url}/prospect/create-category`\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n \n {(close) => (\n \n
\n );\n }\n}\n\nexport default withRouter(ProspectMaster);\n","import React, { useState, useEffect } from \"react\";\n\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCoffee,\n faKeyboard,\n faCog,\n faEye,\n faFile,\n faFileAlt,\n faCommentDots,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n NavLink,\n useRouteMatch,\n useParams,\n Redirect,\n withRouter,\n} from \"react-router-dom\";\nimport { hasAccess, getUserType, getModules, getDashboard } from \"../utils/index\";\n\nvar isUser = \"\";\nif (hasAccess([\"user\"])) {\n isUser = \"userClass\";\n}\n\nclass BottomNav extends React.Component {\n handleLogout = () => {\n localStorage.clear();\n window.location.pathname = \"/login\";\n };\n render() {\n let url = this.props.match;\n let dashboard = getDashboard();\n //console.log(window.location.pathname.includes(\"reports\"), \"window.location.pathname.includes()\")\n return (\n <>\n \n \n\n\n );\n }\n}\n\nexport default withRouter(BottomNav);\n","import React from \"react\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCogs } from \"@fortawesome/free-solid-svg-icons\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nclass BreadcrumbsPage extends React.Component {\n constructor() {\n super();\n }\n\n render() {\n return (\n \n
\n\n\n \n
\n - \n
- \n Masters\n \n
- \n Prospect Master\n \n
- \n Prospect Master\n \n
\n \n
\n {/* \n \n
*/}\n \n )}\n \n \n \"Delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(BreadcrumbsPage);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\n// import TableComponent from \"./AssetDetailsTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport axios from \"axios\";\nimport { clientAccess } from \"../../utils/index\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport styles from \"../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass Import extends React.Component {\n state = {\n LandlordGroups: [],\n clientList: [],\n redirect: false,\n url: `${apiUrl.apiUrl.url}/import/import-data`,\n id: undefined,\n initialValues: {\n groupId: \"\",\n groupName: \"\",\n clientId: \"\",\n clientName: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/unit-detail/get-asset-types`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assetTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n handleChangeLandlordGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionMeta\", actionMeta);\n\n if (actionMeta == \"change_client_group\") {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n\n fetch(`${apiUrl.apiUrl.url}/client/client-list?groupId=` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(\"inside\", actionMeta);\n } else {\n this.state.initialValues.clientId = newValue.value;\n this.state.initialValues.clientName = newValue.label;\n }\n this.setState({});\n //this.state.initialValues.groupName = newValue.label;\n\n this.groupId = newValue;\n console.log(this.groupId, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n redirectAfterEdit = () => {\n this.setState({ redirect: true })\n }\n\n onFileChange = (event) => {\n // Update the state\n console.log(event, \"event target file\");\n this.setState({ selectedFile: event.target.files[0] });\n };\n // On file upload (click the upload button)\n onFileUpload = () => {\n // Create an object of formData\n const formData = new FormData();\n\n console.log(formData, \"formData\");\n\n if (typeof this.state.selectedFile == \"undefined\") {\n // alert(\"Please upload file to process\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: 'Please upload file to process',\n });\n return true;\n }\n\n var ths = this;\n\n // Update the formData object\n formData.append(\n \"myFile\",\n this.state.selectedFile,\n this.state.selectedFile.name\n );\n formData.append(\"type\", this.state.importType);\n // Request made to the backend api\n // Send formData object\n axios\n .post(`${apiUrl.apiUrl.url}/import/import-data`, formData)\n .then(function (response) {\n console.log(response, \"response\");\n if (response.data.success) {\n ths.setState({ redirect: true });\n ths.state.brandSelected = [];\n ths.state.leaseSelected = [];\n\n // alert(\"Form processed successfully.\");\n ths.setState({\n popupalertMessage: true,\n popupMessageContent: 'Form processed successfully.',\n });\n for (const [key, value] of Object.entries(ths.state.initialValues)) {\n ths.state.initialValues[key] = \"\";\n }\n ths.setState({\n formResponseData: {\n forecasteDetails: {\n forecast: [],\n actual: {},\n },\n },\n initialForecast: [],\n exportBtn: false,\n });\n ths.setState({});\n }\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n \n \n
\n
\n \n
\n \n {this.renderForm()}\n
\n );\n }\n\n clear(resetForm) {\n resetForm({\n values: {\n ownershipType: \"\",\n clientName: \"\",\n clientGroup: \"\",\n },\n });\n this.setState({\n initialValues: {\n groupName: \"\",\n clientName: \"\",\n },\n });\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- \n Masters\n \n
- \n Unit Directory\n \n
- \n Asset Detail\n \n
\n \n
\n )}\n \n \n );\n }\n}\n\nexport default withRouter(Import);\n","import {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n useParams,\n useLocation\n} from \"react-router-dom\";\nimport SideMenu from \"../SideMenu\";\nimport UnitDetailMaster from \"./storeDirectory/UnitDetailMaster\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport styles from \"./master.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faUserCircle,\n faSignOutAlt,\n faSitemap,\n faCog,\n faCogs,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport OccupierMaster from \"./occupier/OccupierMaster\";\nimport OccupierCompanyDetails from \"./occupier/OccupierCompanyDetails\";\nimport OccupierContactDetails from \"./occupier/OccupierContactDetails\";\nimport LandLordMaster from \"./landlordDirectory/LandLordMaster\";\nimport LandlordCompanyDetails from \"./landlordDirectory/LandlordCompanyDetails\";\nimport LandlordContactDetails from \"./landlordDirectory/LandlordContactDetails\";\nimport LandlordBankDetails from \"./landlordDirectory/LandlordBankDetails\";\nimport BrokerMaster from \"./brokerDirectory/LandLordMaster\";\nimport BrokerCompanyDetails from \"./brokerDirectory/LandlordCompanyDetails\";\nimport BrokerContactDetails from \"./brokerDirectory/LandlordContactDetails\";\n\nimport OccupierBrand from \"./brandDirectory/OccupierBrand\";\nimport ClientDetail from \"./clientDirectory/ClientProfile\";\nimport ClientAccessSetup from \"./clientDirectory/ClientAccess\";\nimport DemographicDetail from \"./storeDirectory/DemographicDetail\";\nimport AssetDetail from \"./storeDirectory/AssetDetail\";\nimport UtilityCharges from \"./chargesMaster/UtilityCharges\";\nimport OtherCharges from \"./chargesMaster/OtherCharges\";\nimport PropertyTaxLogic from \"./logicMaster/PropertyTaxLogic\";\nimport MarketingFundLogic from \"./logicMaster/MarketingFundLogic\";\nimport CamLogic from \"./logicMaster/CamLogic\";\nimport RentLogic from \"./logicMaster/RentLogic\";\nimport ComplianceComponent from \"./complianceDirectory/ComplianceComponent\";\nimport CommercialClauses from \"./clausesMaster/CommercialClauses\";\nimport TaxationMaster from \"./taxation/List\";\nimport LegalClauses from \"./clausesMaster/LegalClauses\";\nimport ProductMaster from \"./brandDirectory/ProductMaster\";\nimport TopHeader from \"../layout/TopHeader\";\nimport { isLogin } from \"../utils\";\n\nimport BudgetMaster from \"./budget/BudgetMaster\";\nimport ProspectMaster from \"./prospect/ProspectMaster\";\n\nimport { hasAccess } from \"../utils/index\";\nimport { clientAccess } from \"../utils/index\";\nimport ProtectedRoute from \"../utils/ProtectedRoute\";\nimport BreadcrumbsPage from \"./BreadcrumbsPage\";\nimport Import from \"./import/Import\";\n\nexport default function Masters() {\n let match = useRouteMatch();\n let location = useLocation();\n const parts = location.pathname.split('/');\n let urlArray = {\n 'client-profile':{'openMenu':'1', 'activeKey':'1-1'},\n 'client-access-setup':{'openMenu':'1', 'activeKey':'1-2'},\n 'asset-detail':{'openMenu':'2', 'activeKey':'2-1'},\n 'unit-detail':{'openMenu':'2', 'activeKey':'2-2'},\n 'landlord-company-details':{'openMenu':'3', 'activeKey':'3-1'},\n 'landlord':{'openMenu':'3', 'activeKey':'3-2'},\n 'landlord-contact-details':{'openMenu':'3', 'activeKey':'3-3'},\n 'landlord-bank-details':{'openMenu':'3', 'activeKey':'3-4'},\n 'occupier-company-details':{'openMenu':'4', 'activeKey':'4-1'},\n 'occupier':{'openMenu':'4', 'activeKey':'4-2'},\n 'occupier-contact-details':{'openMenu':'4', 'activeKey':'4-3'},\n 'brand-details':{'openMenu':'5', 'activeKey':'5-1'},\n 'product-master':{'openMenu':'5', 'activeKey':'5-2'},\n 'rent-logic':{'openMenu':'6', 'activeKey':'6-1'},\n 'cam-logic':{'openMenu':'6', 'activeKey':'6-2'},\n 'property-tax':{'openMenu':'6', 'activeKey':'6-3'},\n 'marketing-fund-logic':{'openMenu':'6', 'activeKey':'6-4'},\n 'utility-charges':{'openMenu':'7', 'activeKey':'7-1'},\n 'other-charges':{'openMenu':'7', 'activeKey':'7-2'},\n 'commercial-clauses':{'openMenu':'8', 'activeKey':'8-1'},\n 'legal-clauses':{'openMenu':'8', 'activeKey':'8-2'},\n 'compliance':{'openMenu':'8', 'activeKey':'8-3'},\n 'taxation':{'openMenu':'9', 'activeKey':'9-1'},\n 'broker-company-details':{'openMenu':'10', 'activeKey':'10-1'},\n 'broker':{'openMenu':'10', 'activeKey':'10-2'},\n 'broker-contact-details':{'openMenu':'10', 'activeKey':'10-3'},\n 'budget':{'openMenu':'11', 'activeKey':'11-1'},\n 'prospect':{'openMenu':'12', 'activeKey':'12-1'},\n \n };\n\n let openMenu = urlArray[parts[2]]?.openMenu ?? '1';\n //let activeKey = !urlArray[parts[2]] && !clientAccess() ? '1-2' : '1-1';\n let activeKey = urlArray[parts[2]]?.activeKey ?? (!clientAccess() ? '1-2' : '1-1');\n\n return (\n \n
\n );\n}\n","import axios from \"axios\";\n\nconst API_URL = \"http://localhost:8080/api/auth/\";\n\nclass AuthService {\n \n\n logout() {\n localStorage.removeItem(\"user\");\n }\n\n \n getCurrentUser() {\n return JSON.parse(localStorage.getItem('user'));;\n }\n}\n\nexport default new AuthService();\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faPlus, faUndo } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, Link } from \"react-router-dom\";\nimport apiUrl from \"./apiUrlConstant\";\nimport Masters from \"./masters/Masters\";\nimport * as Yup from \"yup\";\nimport AuthService from \"./AuthService\";\nimport { Alert } from \"react-bootstrap\";\n\nconst loginForm = Yup.object().shape({\n email: Yup.string().required(\"Required\"),\n password: Yup.string().required(\"Required\"),\n});\n\nclass Login extends React.Component {\n state = {\n redirect: false,\n showLoader: false,\n errorMessage: \"\",\n showAlert: false,\n setShow: false,\n };\n\n constructor(props) {\n super(props);\n }\n componentDidMount(props) {\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/user/check-status`,\n data: { page: \"login\" },\n }).then(function (response) {\n console.log(\"user login status\", response.data);\n if (response.data.result == \"success\") {\n self.setState({ redirect: true });\n }\n });\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n this.state.redirect = false;\n return \n
\n \n \n {clientAccess() && (\n \n \n )}\n {clientAccess() && (\n \n \n )}\n \n \n \n \n\n \n \n\n \n \n\n \n \n {/* \n \n\n \n */}\n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n \n \n\n \n \n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n {clientAccess() && (\n \n \n )}\n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n \n \n \n \n \n {clientAccess() && (\n \n \n )}\n {clientAccess() && (\n \n \n )}\n \n \n\n\n \n \n\n \n \n\n \n \n\n\n \n \n \n \n \n \n \n \n \n \n {clientAccess() && (\n \n \n )}\n {clientAccess() && (\n \n \n )}\n \n \n\n \n {/* \n \n
\n \n
*/}\n {clientAccess() ? \n
\n \n \n
\n
\n \n
\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n var ths = this;\n // ths.showLoader = true;\n this.setState({ showLoader: true });\n //localStorage.setItem(\"email\", values.email);\n //localStorage.setItem(\"password\", values.password);\n console.log(values, \"values\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/user/login`,\n data: values,\n }).then(function (response) {\n if (response.data.result == \"error\") {\n self.setState({\n showLoader: false,\n errorMessage: response.data.message,\n showAlert: true,\n });\n // alert(response.data.message);\n actions.setSubmitting(false);\n actions.setErrors(response.data.message);\n } else {\n self.setState({ showLoader: false });\n //localStorage.setItem('currentUser', response.data.message);\n window.localStorage.setItem(\n \"user\",\n JSON.stringify(response.data.user)\n );\n window.localStorage.setItem(\"TOKEN\", response.data.message);\n \n //window.location.pathname = \"/lease-summary\";\n window.location.pathname = \"/\"+response.data.user.dashboard;\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n
\n );\n }\n}\n\nexport default Login;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n//import { faPlus, faUndo } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, Link } from \"react-router-dom\";\nimport apiUrl from \"../apiUrlConstant\";\n//import Masters from \"../masters/Masters\";\nimport * as Yup from \"yup\";\n//import AuthService from \"../AuthService\";\nimport { Alert } from \"react-bootstrap\";\nimport { PopupMessage } from \"../utils/utils\";\n\nconst loginForm = Yup.object().shape({\n password: Yup.string().required(\"Required\"),\n cpassword: Yup.string()\n .required(\"Required\")\n .oneOf([Yup.ref(\"password\"), null], \"Passwords must match\"),\n});\n\nclass UserResetPassword extends React.Component {\n state = {\n redirect: false,\n showLoader: false,\n errorMessage: \"\",\n showAlert: false,\n setShow: false,\n messsagePopup: false,\n popupContent: \"\",\n };\n\n componentDidMount() {}\n\n constructor(props) {\n super(props);\n }\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false, popupContent: \"\" });\n };\n\n render() {\n //console.log(this.props.match,\"this.props.match.params.token\");\n\n if (this.state.redirect == true) {\n let url = this.props.match;\n //this.state.redirect = false;\n return \n \n
\n )\n }\n \n \n {\n var ths = this;\n // ths.showLoader = true;\n this.setState({ showLoader: true });\n localStorage.setItem(\"cpassword\", values.cpassword);\n localStorage.setItem(\"password\", values.password);\n console.log(this.state.showLoader);\n var self = this;\n\n //console.log(this.props.match.params.token,\"this.props.match.params.token\")\n let paramString = window.location.href.split(\"/\");\n let token = paramString[paramString.length - 1];\n values.resetToken = token;\n console.log(values, \"valuesvaluesvalues\");\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/user/reset-password`,\n data: values,\n }).then(function (response) {\n console.log(response.data, \"response.data\");\n self.setState({ showLoader: false });\n if (!response.data.result) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n self.setState({\n messsagePopup: true,\n popupContent: \"This Link is Expired. Please click on forgot password to reset password.\",\n });\n //alert(\"Data Saved Successfully\");\n } else {\n // alert(\"Data Saved Successfully\");\n // self.setState({ redirect: true });\n self.setState({\n messsagePopup: true,\n popupContent: \"Data Saved Successfully!\",\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n
\n );\n }\n}\n\nexport default UserResetPassword;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n//import { faPlus, faUndo } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, Link } from \"react-router-dom\";\nimport apiUrl from \"../apiUrlConstant\";\nimport { PopupMessage } from \"../utils/utils\";\n//import Masters from \"../masters/Masters\";\nimport * as Yup from \"yup\";\n//import AuthService from \"../AuthService\";\nimport { Alert } from \"react-bootstrap\";\n\nconst loginForm = Yup.object().shape({\n email: Yup.string().required(\"Required\"),\n});\n\nclass UserForgotPassword extends React.Component {\n state = {\n redirect: false,\n showLoader: false,\n errorMessage: \"\",\n showAlert: false,\n setShow: false,\n popupContent: \"\",\n messsagePopup: false,\n };\n\n componentDidMount() { }\n\n constructor(props) {\n super(props);\n }\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false, popupContent: \"\" });\n };\n\n render() {\n //console.log(this.props.match,\"this.props.match.params.token\");\n\n if (this.state.redirect == true) {\n let url = this.props.match;\n this.state.redirect = false;\n return \n
\n )}\n \n \n \n
\n \n \n
\n \n \n {\n var ths = this;\n // ths.showLoader = true;\n this.setState({ showLoader: true });\n\n var self = this;\n\n //console.log(this.props.match.params.token,\"this.props.match.params.token\")\n\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/user/forgot-password`,\n data: values,\n }).then(function (response) {\n if (response.data.result == \"error\") {\n self.setState({\n showLoader: false,\n errorMessage: response.data.message,\n showAlert: true,\n });\n // alert(response.data.message);\n actions.setSubmitting(false);\n actions.setErrors(response.data.message);\n } else {\n self.setState({ showLoader: false });\n // alert(\"Mail sent to Reset Password\");\n // self.setState({ redirect: true });\n self.setState({\n messsagePopup: true,\n popupContent: \"Mail sent to Reset Password\",\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n );\n }\n}\n\nexport default UserForgotPassword;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { Redirect, Link } from \"react-router-dom\";\nimport apiUrl from \"../apiUrlConstant\";\nimport * as Yup from \"yup\";\nimport { Alert } from \"react-bootstrap\";\nimport { PopupMessage } from \"../utils/utils\";\nimport TopHeader from \"../layout/TopHeader\";\nconst loginForm = Yup.object().shape({\n old_password: Yup.string().required(\"Required\"),\n password: Yup.string().required(\"Required\"),\n cpassword: Yup.string()\n .required(\"Required\")\n .oneOf([Yup.ref(\"password\"), null], \"Passwords must match\"),\n});\n\nclass UserResetPassword extends React.Component {\n state = {\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n showLoader: false,\n errorMessage: \"\",\n showAlert: false,\n setShow: false,\n showHeader: true,\n };\n\n componentDidMount() {\n if (\n typeof localStorage.getItem(\"TOKEN\") == \"undefined\" ||\n localStorage.getItem(\"TOKEN\") == null ||\n localStorage.getItem(\"TOKEN\") == \"null\"\n ) {\n this.setState({ showHeader: false });\n }\n }\n\n constructor(props) {\n super(props);\n }\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n render() {\n //console.log(this.props.match,\"this.props.match.params.token\");\n\n if (this.state.redirect == true) {\n let url = this.props.match;\n this.state.redirect = false;\n return \n \n
\n\n {/* \n
*/}\n \n )}\n \n \n \n
\n \n \n
\n \n \n {this.state.showHeader === true && {\n var ths = this;\n this.setState({ showLoader: true });\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/user/change-password`,\n data: values,\n }).then(function (response) {\n self.setState({ showLoader: false });\n if (!response.data.result) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n if (response.data.result == \"fail\") {\n actions.setErrors(response.data.errors);\n } else {\n // alert(\"Password changed successfully.\");\n // self.setState({ redirect: true });\n self.setState({\n messsagePopup: true,\n popupContent: \"Password changed successfully.\",\n });\n }\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n resetForm,\n }) => (\n <>\n
\n );\n }\n}\n\nexport default UserResetPassword;\n","import React from \"react\";\nimport { Nav, Sidenav, Dropdown, Icon } from \"rsuite\";\nimport \"rsuite/dist/styles/rsuite-default.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCoffee,\n faStore,\n faCalendarDay,\n faBuilding,\n faRupeeSign,\n faLock,\n faFileContract,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"./leaseMenu.css\";\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n withRouter,\n useParams,\n} from \"react-router-dom\";\nimport { faEllipsisH } from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../apiUrlConstant\";\n\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LeaseMenu extends React.Component {\n state = {\n openMenu: [\"1\"],\n disableOption: false,\n urlAppend: \"\",\n activeKey: \"1-1\",\n propsMenu: \",\",\n 'leaseStatus' : 0,\n 'submitText' : \"Submit Lease\"\n };\n\n constructor(props) {\n super(props);\n //console.log(this.props.openMenu);\n this.state = {\n openMenu: [this.props.openMenu],\n disableOption: false,\n urlAppend: \"\",\n activeKey: \"1-1\",\n propsActiveKey: \"1-1\",\n };\n }\n\n componentDidMount() {\n if (this.props.match.params.id === undefined) {\n this.setState({\n disableOption: true,\n });\n } else {\n this.setState({\n disableOption: false,\n urlAppend: \"/\" + this.props.match.params.id,\n });\n }\n\n if (this.props.match.params.id !== undefined) {\n fetch(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-status?id=` + this.props.match.params.id, {headers} )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseStatus: data.status,\n 'submitText' : \"Submit Lease\"\n });\n if(data.status != 0) {\n this.setState({\n 'submitText' : \"Approve Lease\"\n });\n }\n\n })\n .catch((error) => {\n console.log(error);\n });\n console.log(\"okkk\");\n } \n }\n componentDidUpdate() {\n if (this.props.openMenu != this.state.propsMenu) {\n this.setState({\n propsMenu: this.props.openMenu,\n openMenu: [this.props.openMenu],\n });\n }\n if (this.props.activeKey != this.state.propsActiveKey) {\n this.setState({\n propsActiveKey: this.props.activeKey,\n activeKey: this.props.activeKey,\n });\n }\n if (this.props.match.params.id === undefined) {\n if (this.state.disableOption == false) {\n this.setState({\n disableOption: true,\n });\n }\n } else {\n if (this.state.disableOption == true) {\n this.setState({\n disableOption: false,\n urlAppend: \"/\" + this.props.match.params.id,\n });\n }\n }\n }\n\n render() {\n // let url = this.props.match;\n //console.log(\"rendering menu\");\n return (\n \n \n \n \n
\n\n \n \n \n \n
\n\n {/* \n
*/}\n \n )}\n \n \n \n
\n \n \n
\n \n \n {\n console.log(openKeys[openKeys.length - 1]);\n this.setState({ openMenu: [openKeys[openKeys.length - 1]] });\n }}\n >\n \n \n \n \n
\n );\n }\n}\n\nexport default withRouter(LeaseMenu);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faSave,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n withRouter,\n useParams,\n} from \"react-router-dom\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { unitTypeConstant, unitStatusConstant } from \"../../constants\";\nimport { Redirect } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport Popup from \"reactjs-popup\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport Select from \"react-select\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { clientId } from \"../../utils/index\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LeaseLandlord extends React.Component {\n validator = [];\n mainFormValidator = [];\n state = {\n submitDisable: false,\n messsagePopup: false,\n popupContent: \"\",\n vendor_code: \"\",\n clientGroupName: \"\",\n clientGroupId: \"\",\n popupData: {},\n index_val: \"\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n isOpen: false,\n delete: false,\n assetId: \"\",\n tower: \"\",\n subAssetName: \"\",\n assetName: \"\",\n assetNames: [],\n subAssets: [],\n towers: [],\n floors: [],\n unitDetails: [],\n LandlordGroups: [],\n clientGroup: [],\n clientNames: [],\n redirect: false,\n landlords: [],\n landlordCount: 1,\n states: [],\n landlordAssetName: \"\",\n landlordAssetId: \"\",\n landlordSubAssetName: \"\",\n landlordSubAssetId: \"\",\n landlordTower: \"\",\n landlordFloor: \"\",\n landlordUnitNo: \"\",\n landlordUnitType: \"\",\n landlordUnitStatus: \"\",\n units: [],\n leaseId: \"\",\n costCenter: \"\",\n\n notes_1: \"\",\n totalUsableArea: 0,\n totalGrossLeasableArea: 0,\n leaseCreationDate: \"\",\n isDisabled: false,\n selectedCompanies: [],\n initialValues: {\n leaseCreationDate: \"tghj\",\n units: [],\n },\n };\n\n constructor(props) {\n super(props);\n this.getLandlordUnitNo = this.getLandlordUnitNo.bind(this);\n this.getLandlordUnitType = this.getLandlordUnitType.bind(this);\n this.getLandlordUnitStatus = this.getLandlordUnitStatus.bind(this);\n this.getLandlordownershipPercent =\n this.getLandlordownershipPercent.bind(this);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n //fetch(`${apiUrl.apiUrl.url}/client-groups`)\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientGroup: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/asset/fetch-all-assets`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assetNames: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n fetch(`${apiUrl.apiUrl.url}/states/country-states/1`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //fetch(`${apiUrl.apiUrl.url}/landlord-groups`)\n fetch(`${apiUrl.apiUrl.url}/landlord-group/fetch-landlord-list`, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n if (this.props.match.params.id !== undefined) {\n\n let athis = this;\n\n axios({\n url: `${apiUrl.apiUrl.url}/create-lease/fetch-landlord-form?id=${this.props.match.params.id}`,\n method: \"get\",\n }).then(function(res){\n let data = res.data;\n\n let obj = athis.state.clientGroup.find(\n (o) => o.id == data.clientGroup\n );\n let obj1 = athis.state.assetNames.find(\n (o) => o.id == data.assetId\n );\n\n athis.setState({\n landlords: data.landlord,\n units: data.units,\n notes_1: data.notes_1,\n leaseId: data.leaseId,\n costCenter: data.costCenter,\n leaseCreationDate: data.leaseCreationDate,\n landlordCount: data.landlord.length,\n clientNames: data.clients,\n subAssets: data.subAssets,\n towers: data.towers,\n floors: data.floors,\n tower: data.tower,\n landlordAssetName: data.assetName,\n landlordSubAssetName: data.subAssetNameValue,\n landlordSubAssetId: data.landlordSubAssetId,\n clientGroupId: data.clientGroup,\n landlordAssetId: data.assetId,\n //vendor_code: data.vendor_code,\n isDisabled: true,\n });\n for (let i = 0; i < data.landlord.length; i++) {\n let obj = athis.state.LandlordGroups.find(\n (o) => o.id == data.landlord[i].companyGroup\n );\n\n athis.state.landlords[i].companyGroupName = obj.group_name;\n }\n if (data.clientGroup) {\n athis.setState({ clientGroupName: obj.group_name });\n }\n if (data.assetId) {\n athis.setState({\n landlordAssetName: obj1.asset_name,\n });\n }\n for (let i = 0; i < data.landlord.length; i++) {\n let find = data.landlord[i].gstNumber.substring(0, 2);\n var state = athis.state.states.find((x) => x.gst_code == find);\n if (state != undefined) {\n athis.state.landlords[i].gstState = state.id;\n athis.state.landlords[i].gstStateCode = state.gst_code;\n }\n //this.state.landlords[i].vendorCode = data.landlord[i].vendorCode;\n }\n athis.setState({\n initialValues: data,\n });\n athis.setState({});\n });\n\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-landlord-form?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // let obj = this.state.clientGroup.find(\n // (o) => o.id == data.clientGroup\n // );\n // let obj1 = this.state.assetNames.find(\n // (o) => o.id == data.assetId\n // );\n\n // this.setState({\n // landlords: data.landlord,\n // units: data.units,\n // notes_1: data.notes_1,\n // leaseId: data.leaseId,\n // costCenter: data.costCenter,\n // leaseCreationDate: data.leaseCreationDate,\n // landlordCount: data.landlord.length,\n // clientNames: data.clients,\n // subAssets: data.subAssets,\n // towers: data.towers,\n // floors: data.floors,\n // tower: data.tower,\n // landlordAssetName: data.assetName,\n // landlordSubAssetName: data.subAssetNameValue,\n // landlordSubAssetId: data.landlordSubAssetId,\n // clientGroupId: data.clientGroup,\n // landlordAssetId: data.assetId,\n // //vendor_code: data.vendor_code,\n // isDisabled: true,\n // });\n // for (let i = 0; i < data.landlord.length; i++) {\n // let obj = this.state.LandlordGroups.find(\n // (o) => o.id == data.landlord[i].companyGroup\n // );\n\n // this.state.landlords[i].companyGroupName = obj.group_name;\n // }\n // if (data.clientGroup) {\n // this.setState({ clientGroupName: obj.group_name });\n // }\n // if (data.assetId) {\n // this.setState({\n // landlordAssetName: obj1.asset_name,\n // });\n // }\n // for (let i = 0; i < data.landlord.length; i++) {\n // let find = data.landlord[i].gstNumber.substring(0, 2);\n // var state = this.state.states.find((x) => x.gst_code == find);\n // if (state != undefined) {\n // this.state.landlords[i].gstState = state.id;\n // this.state.landlords[i].gstStateCode = state.gst_code;\n // }\n // //this.state.landlords[i].vendorCode = data.landlord[i].vendorCode;\n // }\n // this.setState({\n // initialValues: data,\n // });\n // this.setState({});\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n autoSelectGstState(e, i) {\n let find = e.target.value.substring(0, 2);\n var state = this.state.states.find((x) => x.gst_code == find);\n this.state.landlords[i].gstState = state.id;\n this.state.landlords[i].gstStateCode = state.gst_code;\n this.setState({});\n console.log(state, \"Ev\");\n }\n\n getTotalUsableArea() {\n let totalUsableArea = 0;\n for (let i = 0; i < this.state.units.length; i++) {\n totalUsableArea += this.state.units[i].usableArea;\n }\n return totalUsableArea.toFixed(2);\n }\n getTotalGrossleasableArea() {\n let totalGrossleasableArea = 0;\n for (let i = 0; i < this.state.units.length; i++) {\n totalGrossleasableArea += this.state.units[i].grossLeasableArea;\n }\n return totalGrossleasableArea.toFixed(2);\n }\n\n changeClientGroup(e) {\n this.state.clientGroupName = e.label;\n this.state.clientGroupId = e.value;\n this.setState({});\n console.groupEnd();\n fetch(\n `${apiUrl.apiUrl.url}/client/fetch-group-clients?id=` +\n this.state.clientGroupId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientNames: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n changeAsset = (e, i) => {\n this.state.landlordAssetName = e.label;\n this.state.landlordAssetId = e.value;\n this.setState({});\n console.groupEnd();\n this.setState({});\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-sub-assets?asset_id=` +\n this.state.landlordAssetId,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n subAssets: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeLandlordGroup = (e, i) => {\n this.state.landlords[i].companyGroupName = e.label;\n this.state.landlords[i].companyGroup = e.value;\n this.setState({});\n console.groupEnd();\n this.setState({});\n let groupid = e.value;\n fetch(`${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n var _landlords = this.state.landlords;\n\n _landlords[i].companies = data;\n this.setState({\n landlords: _landlords,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeSubAsset = (e) => {\n let subAssetId = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/asset/sub-asset-towers/?id=` + subAssetId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n // var _landlords = this.state.landlords;\n\n // _landlords[i].towers = data;\n this.setState({\n towers: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleAddUnit = (e, id, setFieldError) => {\n if (!this.validator[id].allValid()) {\n this.validator[id].getErrorMessages();\n console.log(this.validator[id].getErrorMessages());\n this.validator[id].showMessages();\n this.forceUpdate();\n return false;\n }\n console.log(this.state, \"an\");\n console.log(this.state.landlords[id], \"an\");\n let ownershipPercent = this.state.landlords[id].unit.ownershipPercent;\n var thisUnit = {\n unitNo: this.state.landlords[id].unit.unitNo,\n unitId: this.state.landlords[id].unit.unitId,\n unitType: this.state.landlords[id].unit.unitType,\n unitStatus: this.state.landlords[id].unit.unitStatus,\n ownershipPercent: this.state.landlords[id].unit.ownershipPercent,\n landlord: this.state.landlords[id].companyName,\n landlordCompanyName: this.state.landlords[id].companies.find(\n (x) => x.id == this.state.landlords[id].companyName\n ),\n landlordName: this.state.landlords[id].companyGroupName,\n assetName: this.state.landlordAssetName,\n floor: this.state.landlords[id].unit.floor,\n usableArea:\n (this.state.landlords[id].unit.usableArea * ownershipPercent) / 100,\n grossLeasableArea:\n (this.state.landlords[id].unit.grossLeasableArea * ownershipPercent) /\n 100,\n };\n var _units = this.state.units;\n console.log(thisUnit, \"MMM\");\n _units.push(thisUnit);\n\n this.setState({ units: _units });\n var _landlords = this.state.landlords;\n _landlords[id].unit.tower = \"\";\n _landlords[id].unit.assetId = \"\";\n _landlords[id].unit.subAssetName = \"\";\n _landlords[id].unit.floor = \"\";\n _landlords[id].unit.unitId = \"\";\n _landlords[id].unit.unitNo = \"\";\n _landlords[id].unit.unitType = \"\";\n _landlords[id].unit.unitStatus = \"\";\n _landlords[id].unit.usableArea = \"\";\n _landlords[id].unit.carpetArea = \"\";\n _landlords[id].unit.grossLeasableArea = \"\";\n _landlords[id].unit.ownershipPercent = \"100\";\n this.setState({\n landlords: _landlords,\n });\n console.log(this.state.units);\n };\n\n resetUnit = (e, id, setFieldError) => {\n var _landlords = this.state.landlords;\n _landlords[id].unit.tower = \"\";\n _landlords[id].unit.assetId = \"\";\n _landlords[id].unit.subAssetName = \"\";\n _landlords[id].unit.floor = \"\";\n _landlords[id].unit.unitId = \"\";\n _landlords[id].unit.unitNo = \"\";\n _landlords[id].unit.unitType = \"\";\n _landlords[id].unit.unitStatus = \"\";\n _landlords[id].unit.usableArea = \"\";\n _landlords[id].unit.carpetArea = \"\";\n _landlords[id].unit.grossLeasableArea = \"\";\n _landlords[id].unit.ownershipPercent = \"100\";\n this.setState({\n landlords: _landlords,\n });\n };\n\n handleRemoveRow = (index) => {\n this.setState({\n rows: this.state.units.slice(index, -1),\n });\n };\n\n getLandlordSubAssetName(event) {\n this.setState({\n landlordSubAssetName: event.target.value,\n });\n }\n\n getLandlordTower(e) {\n this.setState({\n landlordTower: e.target.value,\n });\n let towerId = e.target.value;\n\n fetch(`${apiUrl.apiUrl.url}/unit-detail/get-floors?tower_id=` + towerId, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n floors: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n getLandlordFloor(e, i, id) {\n console.log(e);\n this.state.landlords[i].unit.floor = e.value;\n console.groupEnd();\n this.setState({});\n this.setState({\n landlordFloor: e.value,\n });\n let floorId = e.value;\n var url = `${apiUrl.apiUrl.url}/unit-detail/get-floor-units?tower_id=${this.state.tower}&floor=${floorId}`;\n // var self = this;\n if (this.props.match.params.id !== undefined) {\n url = `${apiUrl.apiUrl.url}/unit-detail/get-floor-units?tower_id=${this.state.tower}&floor=${floorId}&lease_id=${this.props.match.params.id}`;\n }\n fetch(url, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n var _landlords = this.state.landlords;\n _landlords[i].unitDetails = data;\n this.setState({\n landlords: _landlords,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n getLandlordUnitNo(event, i) {\n var _landlords = this.state.landlords;\n _landlords[i].unit.unitNo = event.target.value;\n this.setState({\n landlords: _landlords,\n });\n }\n\n getGSTDetails(company_id, state_id, id) {\n var url = `${apiUrl.apiUrl.url}/create-lease/get-landlord-gst-details?company_id=${company_id}&state_id=${state_id}`;\n fetch(url, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data lease landlord gst\");\n this.state.landlords[id].gstNumber = data.gst;\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n getLandlordUnitStatus(event, i) {\n var _landlords = this.state.landlords;\n _landlords[i].unit.unitStatus = event.target.value;\n this.setState({\n landlords: _landlords,\n });\n }\n\n getLandlordUnitType(event, i) {\n var _landlords = this.state.landlords;\n _landlords[i].unit.unitType = event.target.value;\n this.setState({\n landlords: _landlords,\n });\n }\n\n getLandlordownershipPercent(event, i) {\n var _landlords = this.state.landlords;\n _landlords[i].unit.ownershipPercent = event.target.value;\n this.setState({\n landlords: _landlords,\n });\n }\n redirectAfterSave = () => {\n this.setState({ redirect: true, delete: false, popupContent: \"\" });\n };\n redirectToDelete = () => {\n var _units = this.state.units;\n _units.splice(this.state.index_val, 1);\n this.setState({\n units: _units,\n delete: false,\n index_val: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n handleDelete = (index) => {\n // Create a copy of the landlords array\n let _landlords = this.state.landlords;\n\n // Remove the item at the specified index\n _landlords.splice([index - 1], 1);\n\n // Update the state\n this.setState({\n landlords: _landlords,\n landlordCount: this.state.landlordCount - 1\n });\n }\n\n landlordTabs(handleChange, setFieldError) {\n var heads = [];\n for (var i = 0; i < this.state.landlordCount; i++) {\n heads.push(\n
*/}\n\n \n
\n \n
\n \n
\n \n \n
\n \n {\n console.log(i);\n var id = i.name.split(\"[\")[1].split(\"]\")[0];\n // console.log(idarray);\n this.state.landlords[id].companyGroup = e.value;\n this.changeLandlordGroup(e, id);\n }}\n options={this.state.LandlordGroups.map((item) => ({\n label: item.group_name,\n value: item.id,\n }))}\n />\n {this.validator[i].message(\n \"Landlord Group\",\n this.state.landlords[i].companyGroup,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n\n if (\n this.state.selectedCompanies.indexOf(\n e.target.value\n ) > -1\n ) {\n // alert(\"Please Select another company\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Please Select another company\",\n });\n } else {\n this.state.landlords[id].companyName =\n e.target.value;\n this.state.selectedCompanies[id] =\n this.state.landlords[id].companyName;\n }\n handleChange(e);\n // this.displayUnitDetails(e, )\n }}\n >\n \n {this.state.landlords[i].companies.map((obj) => (\n \n ))}\n \n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].gstState = e.target.value;\n var state = this.state.states.find(\n (x) => x.id == e.target.value\n );\n var _landlords = this.state.landlords;\n _landlords[id].gstStateCode = state.gst_code;\n\n this.getGSTDetails(\n _landlords[id][\"companyName\"],\n _landlords[id][\"gstState\"],\n id\n );\n\n this.setState({\n landlords: _landlords,\n });\n handleChange(e);\n }}\n >\n \n {this.state.states.map((obj) => (\n \n ))}\n \n
\n \n
\n \n
\n\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].gstNumber = e.target.value;\n handleChange(e);\n }}\n onBlur={(e) => {\n var i = e.target.getAttribute(\"param\");\n //this.autoSelectGstState(e, i);\n }}\n />\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].invoiceBy = e.target.value;\n handleChange(e);\n }}\n >\n \n \n \n \n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].vendorCode = e.target.value;\n handleChange(e);\n }}\n />\n\n\n \n
\n \n
\n\n {/* {this.state.landlords[i].companyName !== \"\" && (\n \n
\n \n
\n \n \n
\n \n {\n var id = i.name.split(\"[\")[1].split(\"]\")[0];\n this.state.landlords[id].companyGroup = e.value;\n this.changeLandlordGroup(e, id);\n }}\n options={this.state.LandlordGroups.map((item) => ({\n label: item.group_name,\n value: item.id,\n }))}\n />\n {this.validator[i].message(\n \"Landlord Group\",\n this.state.landlords[i].companyGroup,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n if (this.state.selectedCompanies.indexOf(e.target.value) > -1) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please Select another company\",\n });\n } else {\n this.state.landlords[id].companyName = e.target.value;\n this.state.selectedCompanies[id] =\n this.state.landlords[id].companyName;\n }\n handleChange(e);\n }}\n >\n \n {this.state.landlords[i].companies.map((obj) => (\n \n ))}\n \n
\n \n \n
\n \n
\n \n
\n\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].gstState = e.target.value;\n var state = this.state.states.find((x) => x.id == e.target.value);\n var _landlords = this.state.landlords;\n _landlords[id].gstStateCode = state.gst_code;\n this.getGSTDetails(\n _landlords[id][\"companyName\"],\n _landlords[id][\"gstState\"],\n id\n );\n this.setState({\n landlords: _landlords,\n });\n handleChange(e);\n }}\n >\n \n {this.state.states.map((obj) => (\n \n ))}\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].gstNumber = e.target.value;\n handleChange(e);\n }}\n onBlur={(e) => {\n var i = e.target.getAttribute(\"param\");\n }}\n />\n
\n \n \n
\n\n {this.state.landlords[i].companyName !== \"\" && (\n <>\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].invoiceBy = e.target.value;\n handleChange(e);\n }}\n >\n \n \n \n \n
\n \n
\n
\n\n \n
Unit Details
\n\n \n
\n\n \n {\n var id = i.name.split(\"[\")[1].split(\"]\")[0];\n let towerId = this.state.landlords[id].unit.tower;\n this.getLandlordFloor(e, id, towerId);\n }}\n options={this.state.floors.map((item) => ({\n label: item.floor,\n value: item.floor,\n }))}\n />\n {this.validator[i].message(\n \"Floor\",\n this.state.landlords[i].unit.floor,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n let selectedUnits = this.state.units;\n var doesExist = selectedUnits.some(\n (el) =>\n el.unitId == e.target.value &&\n this.state.landlords[id].companyName == el.landlord\n );\n if (doesExist) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please select different unit\",\n });\n return false;\n } else {\n var unit = this.state.landlords[\n id\n ].unitDetails.find((x) => x.id == e.target.value);\n var _landlords = this.state.landlords;\n _landlords[id].unit.unitId = e.target.value;\n\n if (e.target.value !== undefined) {\n _landlords[id].unit.carpetArea = unit.carpet_area;\n _landlords[id].unit.usableArea = unit.usable_area;\n _landlords[id].unit.grossLeasableArea = unit.gross_leasable_area;\n _landlords[id].unit.unitNo = unit.unit_no;\n _landlords[id].unit.unitType = unit.unit_type;\n _landlords[id].unit.unitStatus = unit.unit_status;\n this.setState({\n landlords: _landlords,\n });\n }\n }\n handleChange(e);\n }}\n >\n \n {this.state.landlords[i].unitDetails.map((obj) => (\n \n ))}\n \n {this.validator[i].message(\n \"Unit No\",\n this.state.landlords[i].unit.unitId,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitType(e, id);\n handleChange(e);\n }}\n />\n {this.validator[i].message(\n \"Unit Type\",\n this.state.landlords[i].unit.unitType,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordownershipPercent(e, id);\n handleChange(e);\n }}\n />\n {this.validator[i].message(\n \"Ownership Percent\",\n this.state.landlords[i].unit.ownershipPercent,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n handleChange(e);\n }}\n />\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n
\n \n )}\n \n {\n var a = e.target.getAttribute(\"param\");\n this.handleAddUnit(e, a, setFieldError);\n }}\n className=\"add_button\"\n >\n {/* DELETE */}\n Add Unit\n \n {\n var a = e.target.getAttribute(\"param\");\n this.resetUnit(e, a, setFieldError);\n }}\n className=\"reset_button\"\n >\n Reset\n \n
\n \n
\n )} */}\n \n
\n \n
\n Unit Details
\n\n
\n \n
\n \n \n
\n \n {\n var id = i.name.split(\"[\")[1].split(\"]\")[0];\n let towerId = this.state.landlords[id].unit.tower;\n this.getLandlordFloor(e, id, towerId);\n // this.state.landlords[id].unit.floor = e.value;\n }}\n options={this.state.floors.map((item) => ({\n label: item.floor,\n value: item.floor,\n }))}\n />\n {this.validator[i].message(\n \"Floor\",\n this.state.landlords[i].unit.floor,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n let selectedUnits = this.state.units;\n var doesExist = selectedUnits.some(\n (el) =>\n el.unitId == e.target.value &&\n this.state.landlords[id].companyName ==\n el.landlord\n );\n if (doesExist) {\n // alert(\"Please select different unit\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Please select different unit\",\n });\n return false;\n } else {\n var unit = this.state.landlords[\n id\n ].unitDetails.find((x) => x.id == e.target.value);\n var _landlords = this.state.landlords;\n _landlords[id].unit.unitId = e.target.value;\n\n if (e.target.value !== undefined) {\n _landlords[id].unit.carpetArea =\n unit.carpet_area;\n _landlords[id].unit.usableArea =\n unit.usable_area;\n _landlords[id].unit.grossLeasableArea =\n unit.gross_leasable_area;\n _landlords[id].unit.unitNo = unit.unit_no;\n _landlords[id].unit.unitType = unit.unit_type;\n\n _landlords[id].unit.unitStatus =\n unit.unit_status;\n this.setState({\n landlords: _landlords,\n });\n }\n }\n handleChange(e);\n }}\n >\n \n {this.state.landlords[i].unitDetails.map((obj) => (\n \n ))}\n \n {this.validator[i].message(\n \"Unit No\",\n this.state.landlords[i].unit.unitId,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitType(e, id);\n handleChange(e);\n }}\n />\n {this.validator[i].message(\n \"Unit Type\",\n this.state.landlords[i].unit.unitType,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordownershipPercent(e, id);\n handleChange(e);\n }}\n />\n {this.validator[i].message(\n \"Ownership Percent\",\n this.state.landlords[i].unit.ownershipPercent,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n // this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n
\n \n
\n \n
\n \n {\n var a = e.target.getAttribute(\"param\");\n this.handleAddUnit(e, a, setFieldError);\n }}\n >\n Add Unit\n \n {\n var a = e.target.getAttribute(\"param\");\n this.resetUnit(e, a, setFieldError);\n }}\n >\n Reset\n \n
\n \n \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n
\n \n {heads} \n
\n \n \n
\n {body}
\n \n {\n var unitsOwnership = {};\n var totalPercentage = 0;\n for (let i = 0; i < this.state.units.length; i++) {\n if (unitsOwnership[this.state.units[i].unitId] == undefined) {\n unitsOwnership[this.state.units[i].unitId] = Number(\n this.state.units[i].ownershipPercent\n );\n totalPercentage += this.state.units[i].ownershipPercent;\n } else {\n unitsOwnership[this.state.units[i].unitId] += Number(\n this.state.units[i].ownershipPercent\n );\n totalPercentage += this.state.units[i].ownershipPercent;\n }\n }\n\n // for (var key in unitsOwnership) {\n // if (unitsOwnership[key] < 100) {\n // // alert(\"Unit Ownership should be 100 %\");\n // this.setState({\n // popupalertMessage: true,\n // popupMessageContent: \"Unit Ownership should be 100 %\",\n // });\n // return false;\n // }\n // }\n if (totalPercentage < 100) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Unit Ownership should be 100 %\",\n });\n return false;\n }\n\n values.clientGroup = this.state.clientGroupId;\n values.assetId = this.state.landlordAssetId;\n\n if (!this.mainFormValidator.allValid()) {\n this.mainFormValidator.getErrorMessages();\n this.mainFormValidator.showMessages();\n this.forceUpdate();\n return false;\n }\n values.units = this.state.units;\n var url = `${apiUrl.apiUrl.url}/create-lease/create-lease-landlord`;\n var self = this;\n if (this.props.match.params.id !== undefined) {\n url = `${apiUrl.apiUrl.url}/create-lease/update-lease-landlord?lease_id=${this.props.match.params.id}`;\n }\n\n this.setState({ submitDisable: true });\n console.log(values);\n axios({\n method: \"post\",\n url: url,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({ submitDisable: false });\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n self.setState({ submitDisable: false });\n } else {\n //alert(\"Data Saved Successfully\");\n self.setState({\n submitDisable: false,\n messsagePopup: true,\n leaseId: response.data.id,\n\n popupContent: \"Data Saved Successfully!\",\n //submitDisable: true\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n actions,\n setFieldError,\n }) => (\n <>\n \n {(close) => (\n \n \n {(close) => (\n \n
\n );\n }\n unitPopup(unit) {\n return (\n \n
\n\n \n
\n - \n
- Create Lease \n
- Parties, Unit & Brand Details \n
- \n Landlord & Unit Details\n \n
\n \n
\n\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n {this.unitPopup(this.state.popupData)} \n \n
\n \n
\n \n
\n \n
\n - \n
- Unit Details \n
\n \"Are you sure you want to delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default withRouter(LeaseLandlord);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faGrinTongueSquint,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect } from \"react-router-dom\";\nimport { BrowserRouter as Router, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport Select from \"react-select\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LeaseOccupier extends React.Component {\n // mainFormValidator = [];\n state = {\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n companyName: [],\n vendor_code: \"\",\n tower: [],\n occupierGroups: [],\n // brandCategory: [],\n // brandSubCategories: [],\n gstStates: [],\n members:[],\n brands: [],\n brandSelected: [],\n redirect: false,\n franchiseeDetails: false,\n franchiseeGstStateCode: \"\",\n franchiseeGstState: \"\",\n selectedCompanies: [],\n initialValues: {\n leaseCreationDate: \"\",\n leaseId: \"\",\n },\n brandId: [],\n occupiers: [],\n cityList: [],\n occupierCount: 1,\n // brandCategoryName: \"\",\n // brandCategoryId: \"\",\n // brandSubCategoryName: \"\",\n // brandSubCategoryId: \"\",\n brandName: \"\",\n occupierChargeable: [\n { name: \"No\", value: \"0\" },\n { name: \"Yes\", value: \"1\" },\n ],\n occupierMaxCharge: 100,\n percentage_message: \"\",\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n componentDidMount() {\n //fetch(`${apiUrl.apiUrl.url}/occupier-groups`)\n fetch(`${apiUrl.apiUrl.url}/occupier-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n occupierGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brands: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/user/get-occupier-contacts`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n members: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n }); \n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/1`)\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n gstStates: data,\n });\n\n\n let athis = this;\n axios({\n url:`${apiUrl.apiUrl.url}/create-lease/fetch-occupier-form?id=${this.props.match.params.id}`,\n method: \"get\",\n }).then(function (response) {\n let data = response.data;\n athis.setState({\n initialValues: data,\n occupiers: data.occupier,\n occupierCount: data.occupier.length > 0 ? data.occupier.length : 1,\n // occupierCount: data.occupier.length,\n franchiseeGstState: data.franchiseeGstState,\n franchiseeGstStateCode: data.franchiseeGstStateCode,\n brandSelected: data.brandArr,\n brands: data.brands,\n brandId: data.brandId,\n cityList: data.city_list,\n });\n\n let chargeableRemaining = 0;\n\n for (let i = 0; i < data.occupier.length; i++) {\n let find = data.occupier[i].gstNumber.substring(0, 2);\n var state = athis.state.gstStates.find((x) => x.gst_code == find);\n if (\n typeof state != \"undefined\" &&\n typeof state.id != \"undefined\"\n ) {\n athis.state.occupiers[i].gstState = state.id;\n athis.state.occupiers[i].gstStateCode = state.gst_code;\n } else {\n athis.state.occupiers[i].gstState = \"\";\n athis.state.occupiers[i].gstStateCode = \"\";\n }\n\n //athis.state.occupiers[i].vendorCode = state.vendor_code;\n let obj = athis.state.occupierGroups.find(\n (o) => o.id == data.occupier[i].companyGroup\n );\n console.log(data.occupier[i].companyGroup);\n athis.state.occupiers[i].companyGroupName = obj.group_name;\n\n chargeableRemaining =\n chargeableRemaining +\n data.occupier[i].occupier_chargeable_percentage;\n }\n\n console.log(\"Available Charge: \" + chargeableRemaining);\n athis.state.occupierMaxCharge = 100 - chargeableRemaining;\n console.log(\n \"Final Available Charge: \" + athis.state.occupierMaxCharge\n );\n\n let label = data.leaseType;\n console.log(label, \"label\");\n let checkValue = label.includes(\"F\");\n let cofoCheck = label.includes(\"Cofo\");\n if (checkValue || cofoCheck) {\n athis.setState({\n franchiseeDetails: true,\n });\n } else {\n athis.setState({\n franchiseeDetails: false,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-occupier-form?id=${this.props.match.params.id}`,\n // { headers }\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // initialValues: data,\n // occupiers: data.occupier,\n // occupierCount: data.occupier.length > 0 ? data.occupier.length : 1,\n // // occupierCount: data.occupier.length,\n // franchiseeGstState: data.franchiseeGstState,\n // franchiseeGstStateCode: data.franchiseeGstStateCode,\n // brandSelected: data.brandArr,\n // brands: data.brands,\n // brandId: data.brandId,\n // cityList: data.city_list,\n // });\n\n // let chargeableRemaining = 0;\n\n // for (let i = 0; i < data.occupier.length; i++) {\n // let find = data.occupier[i].gstNumber.substring(0, 2);\n // var state = this.state.gstStates.find((x) => x.gst_code == find);\n // if (\n // typeof state != \"undefined\" &&\n // typeof state.id != \"undefined\"\n // ) {\n // this.state.occupiers[i].gstState = state.id;\n // this.state.occupiers[i].gstStateCode = state.gst_code;\n // } else {\n // this.state.occupiers[i].gstState = \"\";\n // this.state.occupiers[i].gstStateCode = \"\";\n // }\n\n // //this.state.occupiers[i].vendorCode = state.vendor_code;\n // let obj = this.state.occupierGroups.find(\n // (o) => o.id == data.occupier[i].companyGroup\n // );\n // console.log(data.occupier[i].companyGroup);\n // this.state.occupiers[i].companyGroupName = obj.group_name;\n\n // chargeableRemaining =\n // chargeableRemaining +\n // data.occupier[i].occupier_chargeable_percentage;\n // }\n\n // console.log(\"Available Charge: \" + chargeableRemaining);\n // this.state.occupierMaxCharge = 100 - chargeableRemaining;\n // console.log(\n // \"Final Available Charge: \" + this.state.occupierMaxCharge\n // );\n\n // let label = data.leaseType;\n // console.log(label, \"label\");\n // let checkValue = label.includes(\"F\");\n // let cofoCheck = label.includes(\"Cofo\");\n // if (checkValue || cofoCheck) {\n // this.setState({\n // franchiseeDetails: true,\n // });\n // } else {\n // this.setState({\n // franchiseeDetails: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n changeOccupier = (e, id) => {\n this.state.occupiers[id].companyGroupName = e.label;\n this.state.occupiers[id].companyGroup = e.value;\n console.log(this.state.occupiers[id], \"occupier details\");\n //this.getGSTDetails(_landlords[id][\"companyName\"], _landlords[id][\"gstState\"], id )\n\n this.setState({});\n console.groupEnd();\n this.setState({});\n fetch(\n `${apiUrl.apiUrl.url}/occupier/get-group-companies/?id=` +\n this.state.occupiers[id].companyGroup,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n let _occupiers = this.state.occupiers;\n _occupiers[id].companies = data;\n this.setState({\n occupiers: _occupiers,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeChargeable = (e, id) => {\n console.log(e.label + \"....\" + e.value);\n this.state.occupiers[id].is_occupier_chargeable_label = e.label;\n this.state.occupiers[id].is_occupier_chargeable = e.value;\n if (e.value == 0) {\n this.state.occupiers[id].occupier_chargeable_percentage = 0;\n }\n this.setState({});\n // console.groupEnd();\n // this.setState({});\n };\n\n checkPercentage = (id, value) => {\n let totalPercentage = 0;\n this.state.percentage_message = \"\";\n for (let i = 0; i < this.state.occupiers.length; i++) {\n totalPercentage += parseInt(\n this.state.occupiers[i].occupier_chargeable_percentage\n );\n console.log(this.state.occupiers[i].occupier_chargeable_percentage);\n }\n console.log(totalPercentage);\n if (totalPercentage > 100) {\n this.state.percentage_message =\n \"Occupier total percentage must be less then or equal to 100\";\n this.state.occupiers[id].occupier_chargeable_percentag = 0;\n this.setState({});\n }\n };\n\n changeBrandName = (e) => {\n this.state.brandSelected = [];\n this.state.brandId = [];\n for (let i = 0; i < e.length; i++) {\n this.state.brandId.push(e[i].value);\n this.state.brandSelected.push({\n value: e[i].value,\n label: e[i].label,\n });\n }\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n this.setState({});\n };\n\n autoSelectGstState(e, i) {\n if (e.target.value !== \"\") {\n let find = e.target.value.substring(0, 2);\n var state = this.state.gstStates.find((x) => x.gst_code == find);\n this.state.occupiers[i].gstState = state.id;\n this.state.occupiers[i].gstStateCode = state.gst_code;\n this.setState({});\n console.log(state, \"Ev\");\n }\n }\n\n autoSelectFranchiseeGstState(e) {\n let find = e.target.value.substring(0, 2);\n var state = this.state.gstStates.find((x) => x.gst_code == find);\n this.state.franchiseeGstState = state.id;\n this.state.franchiseeGstStateCode = state.gst_code;\n this.setState({});\n console.log(state, \"Ev\");\n }\n\n showFranchiseeDetails = (e) => {\n let index = e.nativeEvent.target.selectedIndex;\n let label = e.nativeEvent.target[index].label;\n let checkValue = label.includes(\"F\"); //label.includes(\"Franchisee\");\n let cofoCheck = label.includes(\"Cofo\");\n if (checkValue || cofoCheck) {\n this.setState({\n franchiseeDetails: true,\n });\n } else {\n this.setState({\n franchiseeDetails: false,\n });\n }\n };\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n redirectToClose = () => {\n this.setState({\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n getGSTDetails(company_id, state_id, id) {\n var url = `${apiUrl.apiUrl.url}/create-lease/get-occupier-gst-details?company_id=${company_id}&state_id=${state_id}`;\n fetch(url, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.occupiers[id].gstNumber = data.gst;\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n handleFranchiseeCityChange = (e) => {\n this.state.initialValues.franchiseeCityId = e.value;\n this.state.initialValues.franchiseeCity = e.label;\n var self = this;\n fetch(`${apiUrl.apiUrl.url}/city/city-details?city=` + e.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n self.state.initialValues.franchiseeStateId = data.stateArr.id;\n self.state.initialValues.franchiseeState = data.stateArr.state_name;\n self.state.initialValues.franchiseeDistrictId = data.districtArr.id;\n self.state.initialValues.franchiseeDistrict =\n data.districtArr.district_name;\n self.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.setState({});\n };\n\n handleDelete = (index) => {\n // Create a copy of the landlords array\n let _occupiers = this.state.occupiers;\n\n // Remove the item at the specified index\n _occupiers.splice([index - 1], 1);\n\n // Update the state\n this.setState({\n occupiers: _occupiers,\n occupierCount: this.state.occupierCount - 1\n });\n }\n\n occupierTabs(handleChange) {\n var heads = [];\n for (var i = 0; i < this.state.occupierCount; i++) {\n heads.push(\n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n\n
\n \n \n
\n\n \n {\n var id = i.name.split(\"[\")[1].split(\"]\")[0];\n this.state.occupiers[id].companyGroup = e.value;\n this.changeOccupier(e, id);\n }}\n options={this.state.occupierGroups.map((item) => ({\n label: item.group_name,\n value: item.id,\n }))}\n />\n {this.mainFormValidator.message(\n \"company Group\",\n this.state.occupiers[i].companyGroup,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n handleChange(e);\n var id = e.target.getAttribute(\"param\");\n this.state.occupiers[id].companyName = e.target.value;\n if (\n this.state.selectedCompanies.indexOf(e.target.value) > -1\n ) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please Select another company\",\n });\n } else {\n this.state.occupiers[id].companyName = e.target.value;\n this.state.selectedCompanies[id] = this.state.occupiers[id].companyName;\n }\n }}\n >\n \n {this.state.occupiers[i].companies.map((obj) => (\n \n ))}\n \n {this.mainFormValidator.message(\n \"company Name\",\n this.state.occupiers[i].companyName,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n
\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n var state = this.state.gstStates.find(\n (x) => x.id == e.target.value\n );\n var _occupiers = this.state.occupiers;\n _occupiers[id].gstStateCode = state.gst_code;\n\n this.setState({\n occupiers: _occupiers,\n });\n this.state.occupiers[id].gstState = e.target.value;\n\n this.getGSTDetails(\n _occupiers[id][\"companyName\"],\n _occupiers[id][\"gstState\"],\n id\n );\n\n this.setState({});\n handleChange(e);\n }}\n >\n \n {this.state.gstStates.map((obj) => (\n \n ))}\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n handleChange(e);\n this.state.occupiers[id].gstStateCode =\n e.target.value;\n }}\n type=\"text\"\n name={\"occupier[\" + i + \"].gstStateCode\"}\n />\n
\n \n \n
\n\n \n {\n handleChange(e);\n var id = e.target.getAttribute(\"param\");\n this.state.occupiers[id].gstNumber = e.target.value;\n }}\n onBlur={(e) => {\n var i = e.target.getAttribute(\"param\");\n }}\n />\n
\n \n \n
\n\n \n {\n let id = i.name.split(\"[\")[1].split(\"]\")[0];\n this.state.occupiers[id].is_occupier_chargeable = e.value;\n this.changeChargeable(e, id);\n }}\n options={this.state.occupierChargeable.map((item) => ({\n label: item.name,\n value: item.value,\n }))}\n />\n {this.mainFormValidator.message(\n \"company chargeable\",\n this.state.occupiers[i].is_occupier_chargeable,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n {this.state.occupiers[i].is_occupier_chargeable == 1 && (\n \n {\n handleChange(e);\n var id = e.target.getAttribute(\"param\");\n console.log(id, \"asdasd\",this.state.occupiers[id]);\n this.state.occupiers[id].member = e.target.value;\n }}\n >\n \n { typeof this.state.members[this.state.occupiers[i][\"companyName\"]] != \"undefined\" && this.state.members[this.state.occupiers[i][\"companyName\"]].map((obj) => (\n \n ))}\n \n \n
\n \n \n
\n )}\n\n \n {\n handleChange(e);\n var id = e.target.getAttribute(\"param\");\n this.state.occupiers[id].occupier_chargeable_percentage = e.target.value;\n this.checkPercentage(id, e.target.value);\n }}\n />\n {this.state.percentage_message}\n
\n \n \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n
\n \n {heads} \n
\n \n \n
\n {body}
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Parties, Unit & Brand Details \n
- \n Occupier & Brand Details\n \n
\n \n
\n\n \n )}\n \n \n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {\n if (!this.mainFormValidator.allValid()) {\n this.mainFormValidator.showMessages();\n return false;\n }\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-term?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Critical Dates \n
- \n Lease Term Details\n \n
\n \n
\n \n )}\n \n \n <>\n {\n if (!this.mainFormValidator.allValid()) {\n this.mainFormValidator.showMessages();\n return false;\n }\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-broker-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n setFieldValue\n }) => (\n
\n );\n }\n}\n\nexport default withRouter(LeaseBrokerDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport moment from \"moment\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LockInNoticePeriod extends React.Component {\n state = {\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n landlordLockInLeaseDate: \"\",\n landlordLockInRentDate: \"\",\n redirect: false,\n initialValues: {\n lockInPeriodOccupier: [],\n },\n lockInPeriodOccupier: [],\n lockInPeriodCount: 1,\n lockInPeriodLandlordStartDate: \"\",\n lockInPeriodLandlordMM: \"\",\n lockInPeriodLandlordDD: \"\",\n lockInPeriodLandlordYY: \"\",\n terminationNoticePeriodMM: \"\",\n terminationNoticePeriodDD: \"\",\n toggleLandlordForm: false,\n toggleOccupierForm: false,\n lockinPeriodLandlordEndDate: \"\",\n fullLockInPeriodFlag: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n showLandlordForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\") {\n this.setState({\n toggleLandlordForm: true,\n });\n } else {\n this.setState({\n toggleLandlordForm: false,\n });\n }\n };\n\n showOccupierForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\") {\n this.setState({\n toggleOccupierForm: true,\n });\n } else {\n this.setState({\n toggleOccupierForm: false,\n });\n }\n };\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/occupier-groups`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n occupierGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n let athis = this;\n axios({\n url: `${apiUrl.apiUrl.url}/create-lease/fetch-lease-lockin-form?id=${this.props.match.params.id}`,\n method: \"GET\",\n }).then(function(response){\n let data = response.data;\n console.log(data);\n if (data.lockInPeriodOccupier == null) {\n data.lockInPeriodOccupier = [{}];\n }\n if (data.lockInPeriodLandlordMM == 0) {\n athis.setState({ lockInPeriodLandlordMM: \"\" });\n } else {\n athis.setState({\n lockInPeriodLandlordMM: data.lockInPeriodLandlordMM,\n });\n }\n if (data.lockInPeriodLandlordYY == 0) {\n athis.setState({ lockInPeriodLandlordYY: \"\" });\n } else {\n athis.setState({\n lockInPeriodLandlordYY: data.lockInPeriodLandlordYY,\n });\n }\n if (data.lockInPeriodLandlordDD == 0) {\n athis.setState({ lockInPeriodLandlordDD: \"\" });\n } else {\n athis.setState({\n lockInPeriodLandlordDD: data.lockInPeriodLandlordDD,\n });\n }\n if (data.terminationNoticePeriodDD == 0) {\n athis.setState({ terminationNoticePeriodDD: \"\" });\n } else {\n athis.setState({\n terminationNoticePeriodDD: data.terminationNoticePeriodDD,\n });\n }\n if (data.terminationNoticePeriodMM == 0) {\n athis.setState({ terminationNoticePeriodMM: \"\" });\n } else {\n athis.setState({\n terminationNoticePeriodMM: data.terminationNoticePeriodMM,\n });\n }\n if (data.lockInApplicableForLandlord === \"yes\") {\n athis.setState({\n toggleLandlordForm: true,\n });\n } else {\n athis.setState({\n toggleLandlordForm: false,\n });\n }\n if (data.lockInApplicableForOccupier === \"yes\") {\n athis.setState({\n toggleOccupierForm: true,\n });\n } else {\n athis.setState({\n toggleOccupierForm: false,\n });\n }\n\n\n\n // for (let i = 0; i < data.lockInPeriodOccupier.length; i++) {\n // console.log(athis.state.lockInPeriodOccupier);\n // if (data.lockInPeriodOccupier[i].lockInPeriodDD == 0) {\n // athis.state.lockInPeriodOccupier[i].lockInPeriodDD = \"\";\n // } else {\n // athis.state.lockInPeriodOccupier[i].lockInPeriodDD =\n // data.lockInPeriodOccupier[i].lockInPeriodDD;\n // }\n // if (data.lockInPeriodOccupier[i].lockInPeriodMM == 0) {\n // athis.state.lockInPeriodOccupier[i].lockInPeriodMM = \"\";\n // } else {\n // athis.state.lockInPeriodOccupier[i].lockInPeriodMM =\n // data.lockInPeriodOccupier[i].lockInPeriodMM;\n // }\n // }\n athis.setState({\n initialValues: data,\n lockInPeriodOccupier: data.lockInPeriodOccupier,\n lockInPeriodCount: data.lockInPeriodOccupier.length > 0 ? data.lockInPeriodOccupier.length : 1,\n landlordLockInLeaseDate: data.leaseCommencementDate,\n landlordLockInRentDate: data.rentCommencementDate,\n landlordLockInRenewalDate: data.renewalCommencementDate,\n lockinPeriodLandlordEndDate: data.leaseExpiryDate\n });\n\n\n if (data.leaseExpiryDate == data.lockInPeriodLandlordEndDate) {\n athis.setState({\n fullLockInPeriodFlag: true,\n });\n\n athis.getDateDiff(data.lockInPeriodLandlordStartDate);\n }\n }); \n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-lockin-form?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // console.log(data);\n // if (data.lockInPeriodOccupier == null) {\n // data.lockInPeriodOccupier = [{}];\n // }\n // if (data.lockInPeriodLandlordMM == 0) {\n // this.setState({ lockInPeriodLandlordMM: \"\" });\n // } else {\n // this.setState({\n // lockInPeriodLandlordMM: data.lockInPeriodLandlordMM,\n // });\n // }\n // if (data.lockInPeriodLandlordYY == 0) {\n // this.setState({ lockInPeriodLandlordYY: \"\" });\n // } else {\n // this.setState({\n // lockInPeriodLandlordYY: data.lockInPeriodLandlordYY,\n // });\n // }\n // if (data.lockInPeriodLandlordDD == 0) {\n // this.setState({ lockInPeriodLandlordDD: \"\" });\n // } else {\n // this.setState({\n // lockInPeriodLandlordDD: data.lockInPeriodLandlordDD,\n // });\n // }\n // if (data.terminationNoticePeriodDD == 0) {\n // this.setState({ terminationNoticePeriodDD: \"\" });\n // } else {\n // this.setState({\n // terminationNoticePeriodDD: data.terminationNoticePeriodDD,\n // });\n // }\n // if (data.terminationNoticePeriodMM == 0) {\n // this.setState({ terminationNoticePeriodMM: \"\" });\n // } else {\n // this.setState({\n // terminationNoticePeriodMM: data.terminationNoticePeriodMM,\n // });\n // }\n // if (data.lockInApplicableForLandlord === \"yes\") {\n // this.setState({\n // toggleLandlordForm: true,\n // });\n // } else {\n // this.setState({\n // toggleLandlordForm: false,\n // });\n // }\n // if (data.lockInApplicableForOccupier === \"yes\") {\n // this.setState({\n // toggleOccupierForm: true,\n // });\n // } else {\n // this.setState({\n // toggleOccupierForm: false,\n // });\n // }\n\n\n\n // // for (let i = 0; i < data.lockInPeriodOccupier.length; i++) {\n // // console.log(this.state.lockInPeriodOccupier);\n // // if (data.lockInPeriodOccupier[i].lockInPeriodDD == 0) {\n // // this.state.lockInPeriodOccupier[i].lockInPeriodDD = \"\";\n // // } else {\n // // this.state.lockInPeriodOccupier[i].lockInPeriodDD =\n // // data.lockInPeriodOccupier[i].lockInPeriodDD;\n // // }\n // // if (data.lockInPeriodOccupier[i].lockInPeriodMM == 0) {\n // // this.state.lockInPeriodOccupier[i].lockInPeriodMM = \"\";\n // // } else {\n // // this.state.lockInPeriodOccupier[i].lockInPeriodMM =\n // // data.lockInPeriodOccupier[i].lockInPeriodMM;\n // // }\n // // }\n // this.setState({\n // initialValues: data,\n // lockInPeriodOccupier: data.lockInPeriodOccupier,\n // lockInPeriodCount: data.lockInPeriodOccupier.length > 0 ? data.lockInPeriodOccupier.length : 1,\n // landlordLockInLeaseDate: data.leaseCommencementDate,\n // landlordLockInRentDate: data.rentCommencementDate,\n // landlordLockInRenewalDate: data.renewalCommencementDate,\n // lockinPeriodLandlordEndDate: data.leaseExpiryDate\n // });\n\n\n // if (data.leaseExpiryDate == data.lockInPeriodLandlordEndDate) {\n // this.setState({\n // fullLockInPeriodFlag: true,\n // });\n\n // this.getDateDiff(data.lockInPeriodLandlordStartDate);\n // }\n\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n changeOccupier = (e) => {\n let groupid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/occupier/get-group-companies/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n companyName: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n changeCountry = (e) => {\n let countryid = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + countryid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n changeState = (e) => {\n let stateId = e.target.value;\n console.log(stateId, \"SI\");\n fetch(`${apiUrl.apiUrl.url}/cities/state-cities/` + stateId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n cities: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n calculateLockInEndDate(e, values) {\n console.log(values);\n values.lockInPeriodLandlordEndDate = getToDate(\n values.lockInPeriodLandlordStartDate,\n Number(this.state.lockInPeriodLandlordDD),\n Number(this.state.lockInPeriodLandlordMM),\n Number(this.state.lockInPeriodLandlordYY),\n );\n this.setState({});\n }\n\n getDateDiff = (startDate) => {\n var a = moment(this.state.lockinPeriodLandlordEndDate);\n var b = moment(startDate);\n console.log(startDate + ' ' + this.state.lockinPeriodLandlordEndDate);\n var years = a.diff(b, \"year\");\n b.add(years, \"years\");\n var months = a.diff(b, \"months\");\n b.add(months, \"months\");\n var days = a.diff(b, \"days\");\n this.setState({\n lockInPeriodLandlordYY: years,\n lockInPeriodLandlordMM: months,\n lockInPeriodLandlordDD: Number(days) + 1,\n });\n };\n\n calculateOccupierLockInEndDate(values) {\n for (let i = 0; i < values.lockInPeriodOccupier.length; i++) {\n if (isNaN(values.lockInPeriodOccupier[i].lockInPeriodDD)) {\n values.lockInPeriodOccupier[i].lockInPeriodDD = \"\";\n }\n if (isNaN(values.lockInPeriodOccupier[i].lockInPeriodMM)) {\n values.lockInPeriodOccupier[i].lockInPeriodMM = \"\";\n }\n if (isNaN(values.lockInPeriodOccupier[i].lockInPeriodYY)) {\n values.lockInPeriodOccupier[i].lockInPeriodYY = \"\";\n }\n values.lockInPeriodOccupier[i].lockInEndDate = getToDate(\n values.lockInPeriodOccupier[i].lockInFromDate,\n Number(values.lockInPeriodOccupier[i].lockInPeriodDD),\n Number(values.lockInPeriodOccupier[i].lockInPeriodMM),\n Number(values.lockInPeriodOccupier[i].lockInPeriodYY),\n );\n this.setState({});\n }\n }\n\n changeLockInPeriodLandlord(e, values) {\n console.log(\"here\", e.target.value)\n if (e.target.value == \"\") {\n this.state.lockInPeriodLandlordDD = \"\";\n this.state.lockInPeriodLandlordMM = \"\";\n this.state.lockInPeriodLandlordYY = \"\";\n }\n console.log(values);\n if (e.target.value == \"Lease Commencement Date\") {\n values.lockInPeriodLandlordStartDate = this.state.landlordLockInLeaseDate;\n } else if (e.target.value == \"Rent Commencement Date\") {\n values.lockInPeriodLandlordStartDate = this.state.landlordLockInRentDate;\n }else if (e.target.value == \"Renewal Commencement Date\") {\n values.lockInPeriodLandlordStartDate = this.state.landlordLockInRenewalDate;\n }\n\n console.log(values.lockInPeriodLandlordStartDate, \"values.lockInPeriodLandlordStartDate\", this.state.landlordLockInRenewalDate)\n\n values.lockInPeriodLandlordEndDate = getToDate(\n values.lockInPeriodLandlordStartDate,\n Number(this.state.lockInPeriodLandlordDD),\n Number(this.state.lockInPeriodLandlordMM),\n Number(this.state.lockInPeriodLandlordYY),\n );\n this.setState({});\n }\n\n changeLockInPeriodOccupier(values, id) {\n for (let i = 0; i < values.lockInPeriodOccupier.length; i++) {\n if (\n values.lockInPeriodOccupier[i].lockInPeriod == \"Lease Commencement Date\"\n ) {\n values.lockInPeriodOccupier[i].lockInFromDate =\n this.state.landlordLockInLeaseDate;\n } else if (\n values.lockInPeriodOccupier[i].lockInPeriod == \"Rent Commencement Date\"\n ) {\n values.lockInPeriodOccupier[i].lockInFromDate =\n this.state.landlordLockInRentDate;\n } else if (\n values.lockInPeriodOccupier[i].lockInPeriod == \"Renewal Commencement Date\"\n ) {\n values.lockInPeriodOccupier[i].lockInFromDate =\n this.state.landlordLockInRenewalDate;\n }\n values.lockInPeriodOccupier[i].lockInEndDate = getToDate(\n values.lockInPeriodOccupier[i].lockInFromDate,\n Number(values.lockInPeriodOccupier[i].lockInPeriodDD),\n Number(values.lockInPeriodOccupier[i].lockInPeriodMM),\n Number(values.lockInPeriodOccupier[i].lockInPeriodYY),\n );\n this.setState({});\n }\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true });\n };\n\n handleDelete = (index) => {\n // Create a copy of the landlords array\n let _occupiers = [...this.state.lockInPeriodOccupier];\n\n // Remove the item at the specified index\n _occupiers.splice(index, 1);\n\n // Update the state\n this.setState({\n lockInPeriodOccupier: _occupiers,\n lockInPeriodCount: this.state.lockInPeriodCount - 1\n });\n }\n\n lockInPeriodTabs(handleChange, values) {\n var heads = [];\n for (var i = 0; i < this.state.lockInPeriodCount; i++) {\n heads.push(\n
\n\n \n
\n - \n
- Create Lease \n
- Commercial Details \n
- \n Broker Details\n \n
\n \n
\n )}\n \n \n \n
\n {/* \n
\n \n
\n \n \n
\n \n \n
\n \n
\n {this.mainFormValidator.message(\n \"Lock In Period For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInPeriod,\n \"required\",\n { className: \"text-danger\" }\n )}\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriod =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n this.changeLockInPeriodOccupier(values, id);\n handleChange(e);\n }}\n >\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodYY =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"YY\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodMM =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"MM\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodDD =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"DD\"\n className=\"centerPlaceHolder\"\n />\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInFromDate =\n e.target.value;\n handleChange(e);\n }}\n />\n {this.mainFormValidator.message(\n \"Lock In From Date For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInFromDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInEndDate =\n e.target.value;\n handleChange(e);\n }}\n />\n {this.mainFormValidator.message(\n \"Lock In End Date For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInEndDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
*/}\n \n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriod =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n this.changeLockInPeriodOccupier(values, id);\n handleChange(e);\n }}\n >\n \n
\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodYY =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"YY\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodMM =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"MM\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodDD =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"DD\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {this.mainFormValidator.message(\n \"Lock In Period For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInPeriod,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInFromDate =\n e.target.value;\n handleChange(e);\n }}\n />\n {this.mainFormValidator.message(\n \"Lock In From Date For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInFromDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInEndDate =\n e.target.value;\n handleChange(e);\n }}\n />\n {this.mainFormValidator.message(\n \"Lock In End Date For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInEndDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n
\n \n {heads} \n
\n \n \n
\n {body}
\n \n {\n if (!this.mainFormValidator.allValid()) {\n console.log(this.mainFormValidator);\n this.mainFormValidator.showMessages();\n return false;\n }\n console.log(values, \"val\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-lockin?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Critical Dates \n
- \n Lock In & Notice Period\n \n
\n \n
\n\n {/* */}\n \n )}\n \n \n \n {(close) => (\n \n )}\n \n \n {(close) => (\n \n
\n );\n }\n\n rentalPopup(rental) {\n console.log(rental);\n if (rental.rentalLogicValue == 1 || rental.rentalLogicValue == 2) {\n return this.rentMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 3 || rental.rentalLogicValue == 4) {\n return this.rentPlusFitoutMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 5 || rental.rentalLogicValue == 6) {\n return this.pureRevenueShareMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 7 || rental.rentalLogicValue == 8) {\n return this.pureRevenueShareSalesRangeMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 9 || rental.rentalLogicValue == 10) {\n return this.pureRevenueShareProductMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 11 || rental.rentalLogicValue == 12) {\n return this.pureRevenueShareSalesRangeProductMinusCamPopup(rental);\n } else if (\n rental.rentalLogicValue == 13 ||\n rental.rentalLogicValue == 14 ||\n rental.rentalLogicValue == 15\n ) {\n return this.minimumGuaranteeRentPlusCamMinusCam(rental);\n } else if (rental.rentalLogicValue == 16 || rental.rentalLogicValue == 17) {\n return this.minimumGuaranteeRentPlusFitoutRevenueShareMinusCam(rental);\n } else if (\n rental.rentalLogicValue == 18 ||\n rental.rentalLogicValue == 19 ||\n rental.rentalLogicValue == 28\n ) {\n return this.minimumGuaranteeRentRevenueShareSalesMinusCam(rental);\n } else if (rental.rentalLogicValue == 20 || rental.rentalLogicValue == 21) {\n return this.minimumGuaranteeRentRevenueShareProductMinusCam(rental);\n } else if (rental.rentalLogicValue == 22 || rental.rentalLogicValue == 23) {\n return this.minimumGuaranteeRentRevenueShareSalesProductMinusCam(rental);\n } else if (\n rental.rentalLogicValue == 24 ||\n rental.rentalLogicValue == 25 ||\n rental.rentalLogicValue == 26 ||\n rental.rentalLogicValue == 27\n ) {\n return this.minimumGuaranteeRentOrRevenueShareMinusCam(rental);\n }\n }\n\n rentMinusCamPopup(rental) {\n if (this.state.isRentAutocalculate === false) {\n return (\n \n {\n if (this.state.rentalDetails.length == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n if (this.state.biFurcateRentVal === 0) {\n if (\n this.state.to !==\n this.state.rentalDetails[this.state.rentalDetails.length - 1]\n .toDate\n ) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please Complete the period\",\n });\n return false;\n }\n }\n values.rentalDetails = this.state.rentalDetails;\n values.isRentAutocalculate = this.state.isRentAutocalculate;\n values.isUnitBifurcate = this.state.isUnitBifurcate;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-rent-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- \n
\n \n - Commercial Details \n
- \n
\n \n - \n Basic Rental Details\n \n
\n \n
\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.rentalPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Basic Rental Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n } else {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n\n {rental.rentalUom == \"Per Seat\" && (\n <>\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n )}\n \n
\n \n \n \n
\n \n
\n {rental.rentalUom != \"Per Seat\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n\n rentPlusFitoutMinusCamPopup(rental) {\n if (this.state.isRentAutocalculate === false) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n\n pureRevenueShareMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pureRevenueShareSalesRangeMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pureRevenueShareProductMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n\n pureRevenueShareSalesRangeProductMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nRevenue Share (%) | \n
|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentPlusCamMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentPlusFitoutRevenueShareMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n\n minimumGuaranteeRentRevenueShareSalesMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n minimumGuaranteeRentRevenueShareProductMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentRevenueShareSalesProductMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nRevenue Share (%) | \n
|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentOrRevenueShareMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n}\nexport default withRouter(RentalDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport Popup from \"reactjs-popup\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { Modal } from \"react-bootstrap\";\nimport Select from \"react-select\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { leaseDateFormat } from \"../../utils/utils\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass OtherRentalDetails extends React.Component {\n countError = \"\";\n state = {\n deleteKey: \"\",\n totalGla: \"\",\n periodDurationDD: \"\",\n periodDurationYY: \"\",\n periodDurationMM: \"\",\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n productName: \"\",\n productId: \"\",\n to: \"\",\n index_val: \"\",\n delete: false,\n revalue: \"\",\n showAddBtn: false,\n isOpen: false,\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n rentalDetails: [],\n products: [],\n redirect: false,\n rentMinusCam: false,\n rentFitoutMinusCam: false,\n pureRevenueShareMinusCam: false,\n pureRevenueSalesShareMinusCam: false,\n pureRevenueProduct: false,\n pureRevenueSalesProduct: false,\n minimumGuaranteeRentPlusCam: false,\n minimumGuaranteeRentPlusFitout: false,\n minimumGuaranteeRentRevenueShareSalesRange: false,\n minimumGuaranteeRentRevenueShareProduct: false,\n minimumGuaranteeRentRevenueShareSalesRangeProduct: false,\n minimumGuaranteeRentRevenueShareMinimum: false,\n initialValues: {\n rentalLogic: {\n fromDate: \"\",\n toDate: \"\",\n rentalUom: \"\",\n rentDueDate: \"\",\n rentRate: \"\",\n rentRateTerm: \"\",\n onArea: \"\",\n rentFrequency: \"\",\n rentalLogicValue: \"\",\n rentalLogicText: \"\",\n minusCamPercent: \"\",\n revenueShareTerm: \"\",\n slabs: [],\n unit: \"\",\n },\n totalSlabs: \"\",\n },\n showMinusCam: false,\n biFurcateRentVal: 0,\n units: [],\n isUnitBifurcate: false,\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\",\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n biFurcateRent(e, values) {\n if (this.state.rentalDetails.length > 0) {\n var answer = window.confirm(\n \"This will remove all the current rental details, are you sure want to do this?\"\n );\n if (answer) {\n this.setState({\n rentalDetails: [],\n period: 1,\n showForm: true,\n showAddBtn: true,\n fromDate: values.from,\n });\n if (e.target.checked) {\n this.setState({ biFurcateRentVal: 1 });\n } else {\n this.setState({ biFurcateRentVal: 0 });\n }\n } else {\n return false;\n }\n } else {\n if (e.target.checked) {\n this.setState({ biFurcateRentVal: 1 });\n } else {\n this.setState({ biFurcateRentVal: 0 });\n }\n }\n if (this.state.isUnitBifurcate === false) {\n this.setState({ isUnitBifurcate: true });\n } else {\n this.setState({ isUnitBifurcate: false });\n }\n }\n\n handleUnitOnChange(e, values) {\n this.state.initialValues.rentalLogic.unit = e.target.value;\n this.setState({});\n if (this.state.rentalDetails.length > 0) {\n var bifurcatedArr = this.state.rentalDetails.filter(\n (unit) => unit.unit === e.target.value\n );\n if (bifurcatedArr.length > 0) {\n if (bifurcatedArr[bifurcatedArr.length - 1][\"toDate\"] === values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Values For this unit has completed the period\",\n });\n return false;\n }\n this.state.period = bifurcatedArr[bifurcatedArr.length - 1].period + 1;\n this.setState({\n fromDate: getToDate(\n bifurcatedArr[bifurcatedArr.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n toDate: \"\",\n });\n } else {\n this.state.period = 1;\n this.state.fromDate = values.from;\n this.setState({});\n }\n } else {\n this.state.period = 1;\n this.state.fromDate = values.from;\n this.setState({});\n }\n }\n\n autocalculateRent = (e, values) => {\n if (this.state.rentalDetails.length > 0) {\n var answer = window.confirm(\n \"This will remove all the current rental details, are you sure want to do this?\"\n );\n if (answer) {\n this.setState({\n rentalDetails: [],\n period: 1,\n showForm: true,\n showAddBtn: true,\n });\n if (e.target.checked) {\n this.setState({\n isRentAutocalculate: true,\n isRentCheckboxChecked: true,\n });\n } else {\n this.setState({\n isRentAutocalculate: false,\n });\n }\n } else {\n this.setState({\n isRentCheckboxChecked: false,\n isRentAutocalculate: false,\n });\n return false;\n }\n }\n if (this.state.isRentCheckboxChecked === false) {\n this.setState({ isRentCheckboxChecked: true, isRentAutocalculate: true });\n } else {\n this.setState({\n isRentCheckboxChecked: false,\n isRentAutocalculate: false,\n fromDate: values.from,\n });\n }\n };\n\n changeProduct(newValue, values, index) {\n this.state.initialValues.rentalLogic.slabs[index].product = newValue.value;\n this.state.initialValues.rentalLogic.slabs[index].productName =\n newValue.label;\n this.setState({});\n console.groupEnd();\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n editRental(index, values, key) {\n this.state.currentIndex = index;\n this.setState({ currentIndex: index });\n console.log(this.state.rentalDetails[key][index]);\n if (this.state.rentalDetails[key][index].unit !== undefined) {\n this.setState({ isUnitBifurcate: true, biFurcateRentVal: 1 });\n } else {\n this.setState({ isUnitBifurcate: false, biFurcateRentVal: 0 });\n }\n if (this.state.rentalDetails[key][index].rentalLogic !== undefined) {\n if (\n this.state.rentalDetails[key][index].rentalLogic.escalationPercent !==\n undefined\n ) {\n this.setState({\n isRentAutocalculate: true,\n isRentCheckboxChecked: true,\n });\n } else {\n this.setState({\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n });\n }\n } else {\n this.setState({\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n });\n }\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n this.state.period = this.state.rentalDetails[key][index].period;\n this.state.initialValues.totalSlabs =\n this.state.rentalDetails[key][index].slabNumber;\n if (\n this.state.rentalDetails[key][index].rentalLogicText.includes(\"Minus CAM\")\n ) {\n this.setState({\n showMinusCam: true,\n });\n } else {\n this.setState({\n showMinusCam: false,\n });\n }\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.rentalDetails[key][index].periodTermDD,\n periodTermMM: this.state.rentalDetails[key][index].periodTermMM,\n periodTermYY: this.state.rentalDetails[key][index].periodTermYY,\n });\n if (\n this.state.rentalDetails[key][index].rentalLogicValue === \"1\" ||\n this.state.rentalDetails[key][index].rentalLogicValue === \"2\" ||\n this.state.rentalDetails[key][index].rentalLogicValue === \"3\" ||\n this.state.rentalDetails[key][index].rentalLogicValue === \"4\"\n ) {\n this.setState({\n rentMinusCam: true,\n });\n } else {\n this.setState({\n rentMinusCam: false,\n });\n }\n console.log(values);\n values.rentalLogic = { ...this.state.rentalDetails[key][index] };\n values.rentalLogic.rentalLogicValue =\n this.state.rentalDetails[key][index].rentalLogicValue;\n this.state.initialValues.rentalLogic.rentalLogicValue =\n this.state.rentalDetails[key][index].rentalLogicValue;\n values.rentalLogic.rentalLogicText =\n this.state.rentalDetails[key][index].rentalLogicText;\n this.state.fromDate = this.state.rentalDetails[key][index].fromDate;\n this.state.toDate = this.state.rentalDetails[key][index].toDate;\n this.state.initialValues.rentalLogic.unit =\n this.state.rentalDetails[key][index].unit;\n this.setState({});\n }\n\n calculateRent = (values) => {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n let currentValues = values;\n let nextPeriodDateStart = currentValues.from;\n let _rentalDetails = this.state.rentalDetails;\n let currentPeriod = 0;\n var periodToDate;\n var endDate = currentValues.to;\n var escPercent = Number(currentValues.rentalLogic.escalationPercent);\n while (periodToDate !== endDate) {\n currentPeriod++;\n var periodStartDate = nextPeriodDateStart;\n periodToDate = getToDate(\n periodStartDate,\n this.state.periodDurationDD,\n this.state.periodDurationMM,\n this.state.periodDurationYY\n );\n if (\n new Date(periodToDate).getTime() > new Date(currentValues.to).getTime()\n ) {\n periodToDate = currentValues.to;\n }\n if (currentPeriod > 1) {\n currentValues.rentalLogic.rentRate = (\n Number(currentValues.rentalLogic.rentRate) *\n (Number(currentValues.rentalLogic.escalationPercent) / 100) +\n Number(currentValues.rentalLogic.rentRate)\n ).toFixed(2);\n }\n\n var rentalLogic = { ...currentValues.rentalLogic };\n var _currentValues = {\n fromDate: periodStartDate,\n toDate: periodToDate,\n rentalLogicText: this.state.initialValues.rentalLogic.rentalLogicText,\n rentalLogicValue: this.state.initialValues.rentalLogic.rentalLogicValue,\n periodDurationDD: this.state.periodDurationDD,\n periodDurationMM: this.state.periodDurationMM,\n periodDurationYY: this.state.periodDurationYY,\n periodTermDD: this.state.periodDurationDD,\n periodTermMM: this.state.periodDurationMM,\n periodTermYY: this.state.periodDurationYY,\n period: currentPeriod,\n slabs: [],\n escalationPercent: rentalLogic.escalationPercent,\n rentalUom: rentalLogic.rentalUom,\n onArea: rentalLogic.onArea,\n rentRateTerm: rentalLogic.rentRateTerm,\n rentRate: rentalLogic.rentRate,\n rentFrequency: rentalLogic.rentFrequency,\n rentDueDate: rentalLogic.rentDueDate,\n rentDueType: rentalLogic.rentDueType,\n rentDueFrequency: rentalLogic.rentDueFrequency,\n fitoutUom: rentalLogic.fitoutUom,\n fitoutOnArea: rentalLogic.fitoutOnArea,\n fitoutRate: rentalLogic.fitoutRate,\n fitoutFrequency: rentalLogic.fitoutFrequency,\n fitoutRateTerm: rentalLogic.fitoutRateTerm,\n minusCamPercent: rentalLogic.minusCamPercent,\n unit: rentalLogic.unit,\n };\n if (\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] ==\n undefined\n ) {\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] =\n [];\n }\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText].push(\n _currentValues\n );\n nextPeriodDateStart = getToDate(periodToDate, 2, 0, 0);\n }\n this.setState({ rentalDetails: _rentalDetails });\n values.rentalLogic.escalationPercent = \"\";\n values.rentalLogic.rentRate = \"\";\n this.setState({\n periodDurationDD: \"\",\n periodDurationMM: \"\",\n periodDurationYY: \"\",\n });\n };\n\n addRentalDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n\n return false;\n }\n values.rentalLogic.rentalLogicText =\n this.state.initialValues.rentalLogic.rentalLogicText;\n var rentalVal = this.state.initialValues.rentalLogic.rentalLogicValue;\n var _rentalDetails = this.state.rentalDetails;\n values.rentalLogic.period = this.state.period;\n values.rentalLogic.fromDate = this.state.fromDate;\n values.rentalLogic.toDate = this.state.toDate;\n values.rentalLogic.periodTermYY = this.state.periodTermYY;\n values.rentalLogic.periodTermMM = this.state.periodTermMM;\n values.rentalLogic.periodTermDD = this.state.periodTermDD;\n values.rentalLogic.slabs = this.state.initialValues.rentalLogic.slabs;\n values.rentalLogic.unit = this.state.initialValues.rentalLogic.unit;\n if (\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] ==\n undefined\n ) {\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] =\n [];\n }\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText].push(\n values.rentalLogic\n );\n this.setState({\n rentalDetails: _rentalDetails,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.rentalLogic.rentalLogicValue = \"\";\n _initialValues.rentalLogic.slabs = [];\n this.state.initialValues.totalSlabs = \"\";\n this.state.period++;\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.rentalDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n setFieldValue(\"rentalLogic.rentRate\", \"\");\n setFieldValue(\"rentalLogic.escalationPercent\", \"\");\n // resetForm();\n } else {\n console.log(this.state.currentIndex);\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n // values.rentalLogic.rentalLogicText =\n // this.state.initialValues.rentalLogic.rentalLogicText;\n var _rentalDetails = this.state.rentalDetails;\n values.rentalLogic.period = this.state.period;\n values.rentalLogic.fromDate = this.state.fromDate;\n values.rentalLogic.toDate = this.state.toDate;\n values.rentalLogic.periodTermYY = this.state.periodTermYY;\n values.rentalLogic.periodTermMM = this.state.periodTermMM;\n values.rentalLogic.periodTermDD = this.state.periodTermDD;\n values.rentalLogic.slabs = this.state.initialValues.rentalLogic.slabs;\n // if (\n // _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] ==\n // undefined\n // ) {\n // _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] =\n // [];\n // }\n console.log(\n _rentalDetails[values.rentalLogic.rentalLogicText][\n this.state.currentIndex\n ]\n );\n _rentalDetails[values.rentalLogic.rentalLogicText][\n this.state.currentIndex\n ] = { ...values.rentalLogic };\n\n this.setState({\n rentalDetails: _rentalDetails,\n });\n console.log(this.state.rentalDetails, this.state.currentIndex, \"pop\");\n this.state.period++;\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n var _initialValues = this.state.initialValues;\n _initialValues.rentalLogic.rentalLogicValue = \"\";\n _initialValues.rentalLogic.slabs = [];\n this.state.initialValues.totalSlabs = \"\";\n // values.rentalLogic.unit = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.rentalDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n // resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({});\n }\n };\n\n resetRentalDetails = (values, resetForm) => {\n var _initialValues = this.state.initialValues;\n _initialValues.rentalLogic.rentalLogicValue = \"\";\n _initialValues.rentalLogic.slabs = [];\n this.state.initialValues.totalSlabs = \"\";\n this.setState({\n // rentalDetails: _rentalDetails,\n rentMinusCam: false,\n rentFitoutMinusCam: false,\n pureRevenueShareMinusCam: false,\n pureRevenueSalesShareMinusCam: false,\n pureRevenueProduct: false,\n pureRevenueSalesProduct: false,\n minimumGuaranteeRentPlusCam: false,\n minimumGuaranteeRentPlusFitout: false,\n minimumGuaranteeRentRevenueShareSalesRange: false,\n minimumGuaranteeRentRevenueShareProduct: false,\n minimumGuaranteeRentRevenueShareSalesRangeProduct: false,\n minimumGuaranteeRentRevenueShareMinimum: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.rentalDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n };\n\n handleReset = () => {\n var _initialValues = this.state.initialValues;\n _initialValues.rentalLogic.rentalLogicValue = \"\";\n _initialValues.rentalLogic.slabs = [];\n this.state.initialValues.totalSlabs = \"\";\n this.setState({\n // rentalDetails: _rentalDetails,\n rentMinusCam: false,\n rentFitoutMinusCam: false,\n pureRevenueShareMinusCam: false,\n pureRevenueSalesShareMinusCam: false,\n pureRevenueProduct: false,\n pureRevenueSalesProduct: false,\n minimumGuaranteeRentPlusCam: false,\n minimumGuaranteeRentPlusFitout: false,\n minimumGuaranteeRentRevenueShareSalesRange: false,\n minimumGuaranteeRentRevenueShareProduct: false,\n minimumGuaranteeRentRevenueShareSalesRangeProduct: false,\n minimumGuaranteeRentRevenueShareMinimum: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.rentalDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n };\n\n addSlabRow = (e) => {\n this.state.initialValues.totalSlabs = e.target.value;\n if (this.state.initialValues.rentalLogic.slabs.length < e.target.value) {\n var toAppend =\n e.target.value - this.state.initialValues.rentalLogic.slabs.length;\n for (var i = 0; i < toAppend; i++) {\n this.state.initialValues.rentalLogic.slabs.push({\n from: \"\",\n to: \"\",\n percent: \"\",\n product: \"\",\n });\n }\n } else if (\n this.state.initialValues.rentalLogic.slabs.length > e.target.value\n ) {\n var toRemove =\n this.state.initialValues.rentalLogic.slabs.length - e.target.value;\n for (var i = 0; i < toRemove; i++) {\n this.state.initialValues.rentalLogic.slabs.pop({});\n }\n }\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.rentalLogic.slabs[index + 1].from =\n Number(e.target.value) + Number(1);\n this.setState({});\n }\n\n handleRentalLogicChange = (event, values) => {\n let index = event.nativeEvent.target.selectedIndex;\n let label = event.nativeEvent.target[index].label;\n this.state.initialValues.rentalLogic.rentalLogicText = label;\n this.state.initialValues.rentalLogic.rentalLogicValue = event.target.value;\n console.log(this.state.rentalDetails[label]);\n if (\n this.state.rentalDetails[label] !== undefined &&\n this.state.rentalDetails[label].length > 0 &&\n this.state.rentalDetails[label][\n this.state.rentalDetails[label].length - 1\n ].toDate == values.to\n ) {\n this.state.initialValues.rentalLogic.rentalLogicText = \"\";\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n var _rentalDetails = this.state.rentalDetails;\n if (\n _rentalDetails[label] == undefined ||\n _rentalDetails[label].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _rentalDetails[label][_rentalDetails[label].length - 1].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period = this.state.rentalDetails[label].length + 1;\n }\n\n this.setState({});\n values.rentalLogic.rentalUom = \"\";\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n\n let checkValue = label.includes(\"Minus CAM\");\n\n if (checkValue) {\n this.setState({\n showMinusCam: true,\n });\n } else {\n this.setState({\n showMinusCam: false,\n });\n }\n if (\n event.target.value === \"1\" ||\n event.target.value === \"2\" ||\n event.target.value === \"3\" ||\n event.target.value === \"4\"\n ) {\n this.setState({\n rentMinusCam: true,\n });\n } else {\n this.setState({\n rentMinusCam: false,\n });\n }\n };\n\n componentDidMount() {\n\n let athis=this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-rent-details?id=${this.props.match.params.id}`\n }).then(function(response){\n let data = response.data;\n athis.state.totalGla = data.total_gla;\n athis.state.isRentAutocalculate = data.isRentAutocalculate;\n athis.state.isUnitBifurcate = data.isUnitBifurcate;\n if (data.isRentAutocalculate) {\n athis.setState({ isRentCheckboxChecked: true });\n } else {\n athis.setState({ isRentCheckboxChecked: false });\n }\n athis.state.to = data.to;\n athis.state.fromDate = data.from;\n if (data.rentalDetails.length > 0) {\n console.log(\"11\");\n if (\n data.rentalDetails[data.rentalDetails.length - 1].toDate == data.to\n ) {\n console.log(\"12\");\n athis.setState({\n showForm: false,\n });\n }\n // let _tempDate = new Date(\n // data.rentalDetails[data.rentalDetails.length - 1].toDate\n // );\n\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // console.log(dd, mm, y);\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.rentalDetails[data.rentalDetails.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n athis.setState({\n initialValues: data,\n rentalDetails: data.rentalDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period:\n data.rentalDetails.length > 0 ? data.rentalDetails.length + 1 : 1,\n units: data.units,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-rent-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.totalGla = data.total_gla;\n // this.state.isRentAutocalculate = data.isRentAutocalculate;\n // this.state.isUnitBifurcate = data.isUnitBifurcate;\n // if (data.isRentAutocalculate) {\n // this.setState({ isRentCheckboxChecked: true });\n // } else {\n // this.setState({ isRentCheckboxChecked: false });\n // }\n // this.state.to = data.to;\n // this.state.fromDate = data.from;\n // if (data.rentalDetails.length > 0) {\n // console.log(\"11\");\n // if (\n // data.rentalDetails[data.rentalDetails.length - 1].toDate == data.to\n // ) {\n // console.log(\"12\");\n // this.setState({\n // showForm: false,\n // });\n // }\n // // let _tempDate = new Date(\n // // data.rentalDetails[data.rentalDetails.length - 1].toDate\n // // );\n\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // console.log(dd, mm, y);\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.rentalDetails[data.rentalDetails.length - 1].toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // this.setState({\n // initialValues: data,\n // rentalDetails: data.rentalDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period:\n // data.rentalDetails.length > 0 ? data.rentalDetails.length + 1 : 1,\n // units: data.units,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n\n fetch(`${apiUrl.apiUrl.url}/product-master/get-all-products`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n products: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n calculateToDate(values) {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n Number(this.state.periodTermMM),\n this.state.periodTermYY\n ),\n });\n }\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"rentalLogic.rentRate\",\n (\n Number(\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ][\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ].length - 1\n ].rentRate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"rentalLogic.escalationPercent\",\n (\n ((Number(e.target.value) -\n Number(\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ][\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ].length - 1\n ].rentRate\n )) /\n Number(\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ][\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ].length - 1\n ].rentRate\n )) *\n 100\n ).toFixed(2)\n );\n }\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _rentals = this.state.rentalDetails;\n _rentals[this.state.deleteKey].splice(this.state.index_val, 1);\n\n this.setState({\n rentalDetails: _rentals,\n showForm: true,\n });\n if (this.state.period > 1) {\n this.state.period--;\n }\n\n if (this.state.rentalDetails[this.state.deleteKey].length > 0) {\n console.log(\"11\");\n this.setState({\n fromDate: getToDate(\n this.state.rentalDetails[this.state.deleteKey][\n this.state.rentalDetails[this.state.deleteKey].length - 1\n ].toDate,\n 2,\n 0,\n 0\n ),\n });\n } else {\n this.setState({\n fromDate: this.state.revalue,\n });\n }\n this.setState({\n delete: false,\n index_val: \"\",\n revalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n {\n values.rentalDetails = { ...this.state.rentalDetails };\n values.isRentAutocalculate = this.state.isRentAutocalculate;\n values.isUnitBifurcate = this.state.isUnitBifurcate;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-other-rent-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Commercial Details \n
- \n Other Rental Details\n \n
\n \n
\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.rentalPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Rental Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n } else {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n}\nexport default withRouter(OtherRentalDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage, FieldArray } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass CamDetails extends React.Component {\n countError = \"\";\n state = {\n escalationIndex: 0,\n periodDurationDD: \"\",\n periodDurationYY: \"\",\n periodDurationMM: \"\",\n disableOnEdit: false,\n currentIndex: null,\n readOnEdit: false,\n applicableValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n revalue: \"\",\n to: \"\",\n showCamActalization: false,\n showCamCapped: false,\n showAddBtn: false,\n isOpen: false,\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n camDetails: [],\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n initialValues: {\n camLogic: {\n fromDate: \"\",\n toDate: \"\",\n camUom: \"\",\n camDueDate: \"\",\n camRate: \"\",\n camRateTerm: \"\",\n onArea: \"\",\n camFrequency: \"\",\n camLogicValue: \"\",\n camLogicText: \"\",\n rentUom: \"\",\n rentRate: \"\",\n percentageofRent: \"\",\n slabs: [],\n camActualizationPeriod: \"\",\n unit: \"\",\n },\n totalSlabs: \"\",\n },\n toggleCamForm: false,\n biFurcateRentVal: 0,\n units: [],\n isUnitBifurcate: false,\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n showCamForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\") {\n this.setState({\n toggleCamForm: true,\n });\n } else {\n this.setState({\n toggleCamForm: false,\n });\n }\n };\n\n biFurcateRent(e, values) {\n if (this.state.camDetails.length > 0) {\n var answer = window.confirm(\n \"This will remove all the current rental details, are you sure want to do this?\"\n );\n if (answer) {\n this.setState({\n camDetails: [],\n period: 1,\n showForm: true,\n showAddBtn: true,\n fromDate: values.from,\n });\n if (e.target.checked) {\n this.setState({ biFurcateRentVal: 1 });\n } else {\n this.setState({ biFurcateRentVal: 0 });\n }\n } else {\n return false;\n }\n } else {\n if (e.target.checked) {\n this.setState({ biFurcateRentVal: 1 });\n } else {\n this.setState({ biFurcateRentVal: 0 });\n }\n }\n if (this.state.isUnitBifurcate === false) {\n this.setState({ isUnitBifurcate: true });\n } else {\n this.setState({ isUnitBifurcate: false });\n }\n }\n\n autocalculateRent = (e, values) => {\n if (this.state.camDetails.length > 0) {\n var answer = window.confirm(\n \"This will remove all the current rental details, are you sure want to do this?\"\n );\n if (answer) {\n this.setState({\n camDetails: [],\n period: 1,\n showForm: true,\n showAddBtn: true,\n });\n if (e.target.checked) {\n this.setState({\n isRentAutocalculate: true,\n isRentCheckboxChecked: true,\n });\n } else {\n this.setState({\n isRentAutocalculate: false,\n });\n }\n } else {\n this.setState({\n isRentCheckboxChecked: false,\n isRentAutocalculate: false,\n });\n return false;\n }\n }\n if (this.state.isRentCheckboxChecked === false) {\n this.setState({ isRentCheckboxChecked: true, isRentAutocalculate: true });\n } else {\n this.setState({\n isRentCheckboxChecked: false,\n isRentAutocalculate: false,\n fromDate: values.from,\n });\n }\n };\n\n handleUnitOnChange(e, values) {\n this.state.initialValues.camLogic.unit = e.target.value;\n this.setState({});\n if (this.state.camDetails.length > 0) {\n var bifurcatedArr = this.state.camDetails.filter(\n (unit) => unit.unit === e.target.value\n );\n if (bifurcatedArr.length > 0) {\n if (bifurcatedArr[bifurcatedArr.length - 1][\"toDate\"] === values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Values For this unit has completed the period\",\n });\n return false;\n }\n this.state.period = bifurcatedArr[bifurcatedArr.length - 1].period + 1;\n this.setState({\n fromDate: getToDate(\n bifurcatedArr[bifurcatedArr.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n toDate: \"\",\n });\n } else {\n this.state.period = 1;\n this.state.fromDate = values.from;\n this.setState({});\n }\n } else {\n this.state.period = 1;\n this.state.fromDate = values.from;\n this.setState({});\n }\n }\n\n calculateRent = (values) => {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n let currentValues = values;\n let nextPeriodDateStart = currentValues.from;\n let _camDetails = this.state.camDetails;\n let currentPeriod = 0;\n var periodToDate;\n var endDate = currentValues.to;\n var escPercent = Number(currentValues.camLogic.escalationPercent);\n while (periodToDate !== endDate) {\n currentPeriod++;\n var periodStartDate = nextPeriodDateStart;\n periodToDate = getToDate(\n periodStartDate,\n this.state.periodDurationDD,\n this.state.periodDurationMM,\n this.state.periodDurationYY\n );\n if (\n new Date(periodToDate).getTime() > new Date(currentValues.to).getTime()\n ) {\n periodToDate = currentValues.to;\n }\n if (currentPeriod > 1) {\n currentValues.camLogic.camRate = (\n Number(currentValues.camLogic.camRate) *\n (Number(currentValues.camLogic.escalationPercent) / 100) +\n Number(currentValues.camLogic.camRate)\n ).toFixed(2);\n }\n\n var camLogic = { ...currentValues.camLogic };\n var _currentValues = {\n fromDate: periodStartDate,\n toDate: periodToDate,\n camLogicText: this.state.initialValues.camLogic.camLogicText,\n camLogicValue: this.state.initialValues.camLogic.camLogicValue,\n periodDurationDD: this.state.periodDurationDD,\n periodDurationMM: this.state.periodDurationMM,\n periodDurationYY: this.state.periodDurationYY,\n periodTermDD: this.state.periodDurationDD,\n periodTermMM: this.state.periodDurationMM,\n periodTermYY: this.state.periodDurationYY,\n period: currentPeriod,\n slabs: [],\n escalationPercent: camLogic.escalationPercent,\n camUom: camLogic.camUom,\n onArea: camLogic.onArea,\n camRateTerm: camLogic.camRateTerm,\n rentRate: camLogic.rentRate,\n camRate: camLogic.camRate,\n camFrequency: camLogic.camFrequency,\n camDueDate: camLogic.camDueDate,\n camDueType: camLogic.camDueType,\n camDueFrequency: camLogic.camDueFrequency,\n camActualization: camLogic.camActualization,\n camActualizationBasis: camLogic.camActualizationBasis,\n camActualizationPeriod: camLogic.camActualizationPeriod,\n camCapped: camLogic.camCapped,\n camCappedUom: camLogic.camCappedUom,\n camCappedRate: camLogic.camCappedRate,\n camCappedRateTerm: camLogic.camCappedRateTerm,\n minusCamPercent: camLogic.minusCamPercent,\n unit: camLogic.unit,\n };\n console.log(_currentValues);\n _camDetails.push(_currentValues);\n nextPeriodDateStart = getToDate(periodToDate, 2, 0, 0);\n }\n this.setState({ camDetails: _camDetails });\n values.camLogic.escalationPercent = \"\";\n values.camLogic.rentRate = \"\";\n this.setState({\n periodDurationDD: \"\",\n periodDurationMM: \"\",\n periodDurationYY: \"\",\n });\n };\n\n changeCamActualization(e) {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value == \"Yes\") {\n this.setState({\n showCamActalization: true,\n });\n } else {\n this.setState({\n showCamActalization: false,\n });\n }\n }\n\n changeCamCapped(e) {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value == \"Yes\") {\n this.setState({\n showCamCapped: true,\n });\n } else {\n this.setState({\n showCamCapped: false,\n });\n }\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n editCam(index, values) {\n if (this.state.camDetails[index].unit !== undefined) {\n this.setState({ isUnitBifurcate: true, biFurcateRentVal: 1 });\n } else {\n this.setState({ isUnitBifurcate: false, biFurcateRentVal: 0 });\n }\n if (this.state.camDetails[index].camLogic !== undefined) {\n if (\n this.state.camDetails[index].camLogic.escalationPercent !== undefined\n ) {\n this.setState({\n isRentAutocalculate: true,\n isRentCheckboxChecked: true,\n });\n } else {\n this.setState({\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n });\n }\n } else {\n this.setState({\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n });\n }\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n\n if (this.state.camDetails[index].camCapped == \"Yes\") {\n this.setState({ showCamCapped: true });\n } else {\n this.setState({ showCamCapped: false });\n }\n this.state.period = this.state.camDetails[index].period;\n this.state.initialValues.totalSlabs =\n this.state.camDetails[index].slabNumber;\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.camDetails[index].periodTermDD,\n periodTermMM: this.state.camDetails[index].periodTermMM,\n periodTermYY: this.state.camDetails[index].periodTermYY,\n });\n if (this.state.camDetails[index].camLogicValue === \"1\") {\n this.setState({\n camBasisRate: true,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n } else if (this.state.camDetails[index].camLogicValue === \"2\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: true,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n } else if (this.state.camDetails[index].camLogicValue === \"3\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: true,\n camBasisPercentofRent: false,\n });\n } else if (this.state.camDetails[index].camLogicValue === \"4\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: true,\n });\n } else {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n }\n values.camLogic = { ...this.state.camDetails[index] };\n this.state.fromDate = this.state.camDetails[index].fromDate;\n this.state.toDate = this.state.camDetails[index].toDate;\n if (this.state.camDetails[index].camActualization == \"Yes\") {\n this.setState({ showCamActalization: true });\n } else {\n this.setState({ showCamActalization: false });\n }\n if (this.state.camDetails[index].camCapped == \"Yes\") {\n this.setState({ showCamCapped: true });\n } else {\n this.setState({ showCamCapped: false });\n }\n this.setState({});\n }\n\n addCamDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n values.camLogic.camLogicText =\n this.state.initialValues.camLogic.camLogicText;\n var _camDetails = this.state.camDetails;\n values.camLogic.period = this.state.period;\n values.camLogic.fromDate = this.state.fromDate;\n values.camLogic.toDate = this.state.toDate;\n values.camLogic.periodTermYY = this.state.periodTermYY;\n values.camLogic.periodTermMM = this.state.periodTermMM;\n values.camLogic.periodTermDD = this.state.periodTermDD;\n values.camLogic.unit = this.state.initialValues.camLogic.unit;\n _camDetails.push(values.camLogic);\n var _initialValues = this.state.initialValues;\n // _initialValues.camLogic.camLogicValue = \"\";\n _initialValues.camLogic.slabs = [];\n this.setState({\n camDetails: _camDetails,\n // camBasisRate: false,\n // camBasisPureRevenueShare: false,\n // camBasisPureRevenueShareSalesRange: false,\n // camBasisPercentofRent: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.camDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n // resetForm();\n setFieldValue(\"camLogic.camRate\", \"\");\n setFieldValue(\"camLogic.escalationPercent\", \"\");\n this.setState({ isEdit: false, escalationIndex: this.state.period - 2 });\n } else {\n console.log(\"hiii sumeet\");\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n values.camLogic.camLogicText =\n this.state.initialValues.camLogic.camLogicText;\n var _camDetails = this.state.camDetails;\n values.camLogic.period = this.state.period;\n values.camLogic.fromDate = this.state.fromDate;\n values.camLogic.toDate = this.state.toDate;\n values.camLogic.periodTermYY = this.state.periodTermYY;\n values.camLogic.periodTermMM = this.state.periodTermMM;\n values.camLogic.periodTermDD = this.state.periodTermDD;\n // _camDetails.push(values.camLogic);\n _camDetails[this.state.currentIndex] = { ...values.camLogic };\n var _initialValues = this.state.initialValues;\n // _initialValues.camLogic.camLogicValue = \"\";\n _initialValues.camLogic.slabs = [];\n this.setState({\n camDetails: _camDetails,\n // camBasisRate: false,\n // camBasisPureRevenueShare: false,\n // camBasisPureRevenueShareSalesRange: false,\n // camBasisPercentofRent: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.camDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n // resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n console.log(this.state.camDetails[\n this.state.escalationIndex\n ].camRate);\n console.log(this.state.camDetails[\n this.state.escalationIndex\n ])\n console.log(this.state.escalationIndex)\n }\n };\n\n resetCamDetails = (values, resetForm) => {\n var _initialValues = this.state.initialValues;\n _initialValues.camLogic.camLogicValue = \"\";\n _initialValues.camLogic.slabs = [];\n this.setState({\n // camDetails: _camDetails,\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.camDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n };\n\n handleReset = () => {\n var _initialValues = this.state.initialValues;\n _initialValues.camLogic.camLogicValue = \"\";\n _initialValues.camLogic.slabs = [];\n this.setState({\n // camDetails: _camDetails,\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.camDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n };\n\n hadleCamLogicChange = (event) => {\n console.log(this.state.camDetails);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n var index1 = event.nativeEvent.target.selectedIndex;\n var text = event.nativeEvent.target[index1].label;\n this.state.initialValues.camLogic.camLogicText = text;\n this.state.initialValues.camLogic.camLogicValue = event.target.value;\n if (event.target.value === \"1\") {\n this.setState({\n camBasisRate: true,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n } else if (event.target.value === \"2\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: true,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n } else if (event.target.value === \"3\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: true,\n camBasisPercentofRent: false,\n });\n } else if (event.target.value === \"4\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: true,\n });\n } else {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n }\n };\n\n addSlabRow = (e) => {\n console.log(e.target.value, \"vv\");\n this.state.initialValues.totalSlabs = e.target.value;\n if (this.state.initialValues.camLogic.slabs.length < e.target.value) {\n var toAppend =\n e.target.value - this.state.initialValues.camLogic.slabs.length;\n for (var i = 0; i < toAppend; i++) {\n this.state.initialValues.camLogic.slabs.push({\n from: \"\",\n to: \"\",\n percent: \"\",\n });\n }\n } else if (\n this.state.initialValues.camLogic.slabs.length > e.target.value\n ) {\n var toRemove =\n this.state.initialValues.camLogic.slabs.length - e.target.value;\n for (var i = 0; i < toRemove; i++) {\n this.state.initialValues.camLogic.slabs.pop({});\n }\n }\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.camLogic.slabs[index + 1].from =\n Number(e.target.value) + Number(1);\n this.setState({});\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n componentDidMount() {\n\n let athis = this;\n axios({\n url:`${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-details?id=${this.props.match.params.id}`,\n method: \"GET\",\n }).then(function (response){\n let data = response.data;\n athis.state.fromDate = data.from;\n athis.state.to = data.to;\n athis.state.applicableValue = data.camApplicable;\n if (data.camDetails.length > 0) {\n if (data.camDetails[data.camDetails.length - 1].toDate == data.to) {\n athis.setState({\n showForm: false,\n });\n }\n // let _tempDate = new Date(\n // data.camDetails[data.camDetails.length - 1].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.camDetails[data.camDetails.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.camApplicable === \"yes\") {\n athis.setState({\n toggleCamForm: true,\n });\n } else {\n athis.setState({\n toggleCamForm: false,\n });\n }\n athis.setState({\n initialValues: data,\n units: data.units,\n camDetails: data.camDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period: data.camDetails.length > 0 ? data.camDetails.length + 1 : 1,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.fromDate = data.from;\n // this.state.to = data.to;\n // this.state.applicableValue = data.camApplicable;\n // if (data.camDetails.length > 0) {\n // if (data.camDetails[data.camDetails.length - 1].toDate == data.to) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // // let _tempDate = new Date(\n // // data.camDetails[data.camDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.camDetails[data.camDetails.length - 1].toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.camApplicable === \"yes\") {\n // this.setState({\n // toggleCamForm: true,\n // });\n // } else {\n // this.setState({\n // toggleCamForm: false,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // units: data.units,\n // camDetails: data.camDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period: data.camDetails.length > 0 ? data.camDetails.length + 1 : 1,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _cam = this.state.camDetails;\n _cam.splice(this.state.index_val, 1);\n console.log(_cam, \"new array\");\n this.setState({\n camDetails: _cam,\n showForm: true,\n });\n this.state.period--;\n if (this.state.camDetails.length > 0) {\n this.setState({\n fromDate: getToDate(\n this.state.camDetails[this.state.camDetails.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n });\n } else {\n this.setState({\n fromDate: this.state.revalue,\n });\n }\n this.setState({\n delete: false,\n index_val: \"\",\n revalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"camLogic.camRate\",\n (\n Number(\n this.state.camDetails[this.state.camDetails.length - 1].camRate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (\n this.state.period > 1 &&\n this.state.camDetails[this.state.escalationIndex].camRate !== 0\n ) {\n setFieldValue(\n \"camLogic.escalationPercent\",\n (\n ((Number(e.target.value) -\n Number(this.state.camDetails[this.state.escalationIndex].camRate)) /\n Number(\n this.state.camDetails[this.state.camDetails.length - 1].camRate\n )) *\n 100\n ).toFixed(2)\n );\n }\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n {\n values.camApplicable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n this.applicableValidator.showMessages();\n return false;\n }\n if (\n this.state.camDetails.length == 0 &&\n this.state.applicableValue !== \"no\"\n ) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n if (this.state.biFurcateRentVal === 0) {\n if (\n this.state.applicableValue == \"yes\" &&\n this.state.to !==\n this.state.camDetails[this.state.camDetails.length - 1]\n .toDate\n ) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please Complete the period\",\n });\n return false;\n }\n }\n values.camDetails = this.state.camDetails;\n values.isRentAutocalculate = this.state.isRentAutocalculate;\n values.isUnitBifurcate = this.state.isUnitBifurcate;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-cam-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Commercial Details \n
- \n CAM Details\n \n
\n \n
\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.camPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Cam Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n } else {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n\n camBasisPureRevenueSharePopup(cam) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n camBasisPureRevenueShareSalesRangePopup(cam) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n camBasisPercentofRent(cam) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(CamDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n faTrashAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n electricityBasisUnitsGridRate,\n waterBasisUnitsBoard,\n gasBasisUnitsGasBank,\n hvacBasisFlatUnitRate,\n hvacBasisBtuUnitRate,\n extraHoursChargesBasisFlatRate,\n horticultureChargesFlatRate,\n} from \"../../constants\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nimport { getToDate } from \"../../utils/utils\";\nclass Utilities extends React.Component {\n countError = \"\";\n state = {\n note_val: \"\",\n disableOnEdit: false,\n currentIndex: null,\n showFirstAddBtn: true,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupData: {},\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n from: \"\",\n to: \"\",\n isOpen: false,\n leaseTermYY: \"\",\n leaseTermMM: \"\",\n leaseTermDD: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n redirect: false,\n utilities: [],\n utilityRateUomValues: [],\n initialValues: {\n utilityLogic: {\n utilityType: \"\",\n utilityUom: \"\",\n onArea: \"\",\n invoicePeriod: \"\",\n applicableFrom: \"\",\n applicableFromDate: \"\",\n dueDate: \"\",\n dueType: \"\",\n dueFrequency: \"\",\n rates: [],\n subCategoryTypes: \"\",\n },\n },\n \n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n console.log(this.props, \"props\");\n }\n\n addRatesRow = () => {\n if (this.state.initialValues.utilityLogic.rates === undefined) {\n this.state.initialValues.utilityLogic.rates = [];\n }\n this.state.initialValues.utilityLogic.rates.push({\n from: \"\",\n to: \"\",\n rate: \"\",\n });\n if (this.state.initialValues.utilityLogic.rates.length > 0) {\n this.setState({ showFirstAddBtn: false });\n }\n this.setState({});\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.utilityLogic.rates[index + 1].from = getToDate(\n e.target.value,\n 2,\n 0,\n 0\n );\n this.setState({});\n }\n\n removeRatesRow(element) {\n this.state.initialValues.utilityLogic.rates.splice(element, 1);\n if (this.state.initialValues.utilityLogic.rates.length == 0) {\n this.setState({ showFirstAddBtn: true });\n }\n this.setState({});\n }\n\n editUtility(index, values) {\n console.log(this.state.utilities[index]);\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n\n if (this.state.utilities[index].utility.rates === undefined) {\n this.state.showFirstAddBtn = true;\n } else {\n this.state.showFirstAddBtn = false;\n }\n\n this.state.period = this.state.utilities[index].period;\n this.state.initialValues.totalSlabs =\n this.state.utilities[index].slabNumber;\n // this.loadUtilityUomValues(this.state.utilities[index].utility.utilityUom);\n if (\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ Grid Rate\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ DG\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ Solar\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ Other Sources\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ Blendid\"\n ) {\n this.setState({\n utilityRateUomValues: electricityBasisUnitsGridRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"Water Basis Units @ Board\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Water Basis Units @ Other Sources\"\n ) {\n this.setState({\n utilityRateUomValues: waterBasisUnitsBoard,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"Gas Basis Units @ Gas Bank\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Gas Basis Units @ Piped Gas Bank\"\n ) {\n this.setState({\n utilityRateUomValues: gasBasisUnitsGasBank,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"HVAC Basis Flat Unit Rate\" ||\n this.state.utilities[index].utility.utilityType === \"Other\"\n ) {\n this.setState({\n utilityRateUomValues: hvacBasisFlatUnitRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"HVAC Basis BTU Unit Rate\"\n ) {\n this.setState({\n utilityRateUomValues: hvacBasisBtuUnitRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"CAM During Fitout Period\"\n ) {\n this.setState({\n utilityRateUomValues: hvacBasisFlatUnitRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"Extra Hours Charges Basis Flat Rate\"\n ) {\n this.setState({\n utilityRateUomValues: extraHoursChargesBasisFlatRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"Horticulture Charges Flat Rate\" ||\n this.state.utilities[index].utility.utilityType ===\n \"MEP Services Flat Rate\"\n ) {\n this.setState({\n utilityRateUomValues: horticultureChargesFlatRate,\n });\n } else {\n this.setState({\n utilityRateUomValues: [],\n });\n }\n this.setState({});\n values.utilityLogic.utilityType =\n this.state.utilities[index].utility.utilityType;\n values.utilityLogic.utilityUom =\n this.state.utilities[index].utility.utilityUom;\n values.utilityLogic.onArea = this.state.utilities[index].utility.onArea;\n values.utilityLogic.invoicePeriod =\n this.state.utilities[index].utility.invoicePeriod;\n values.utilityLogic.applicableFrom =\n this.state.utilities[index].utility.applicableFrom;\n values.utilityLogic.dueDate = this.state.utilities[index].utility.dueDate;\n values.utilityLogic.dueType = this.state.utilities[index].utility.dueType;\n values.utilityLogic.dueFrequency =\n this.state.utilities[index].utility.dueFrequency;\n values.utilityLogic.applicableFromDate =\n this.state.utilities[index].utility.applicableFromDate;\n values.utilityLogic.rates = this.state.utilities[index].utility.rates;\n if (this.state.utilities[index].utility.utilityType == \"Other\") {\n console.log(\"pp\");\n values.utilityLogic.subCategoryTypes =\n this.state.utilities[index].utility.subCategoryTypes;\n }\n this.state.fromDate = this.state.utilities[index].fromDate;\n this.state.toDate = this.state.utilities[index].toDate;\n this.setState({});\n }\n\n addUtilityDetails = (values) => {\n if (this.state.currentIndex === null) {\n console.log(values);\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var _utilities = this.state.utilities;\n _utilities.push({\n utility: values.utilityLogic,\n utilityRateUomValues: this.state.utilityRateUomValues,\n });\n this.setState({\n utilities: _utilities,\n showFirstAddBtn: true,\n initialValues: {\n utilityLogic: {\n utilityType: \"\",\n utilityUom: \"\",\n invoicePeriod: \"\",\n applicableFrom: \"\",\n applicableFromDate: \"\",\n dueDate: \"\",\n dueType: \"\",\n dueFrequency: \"\",\n rates: [],\n },\n },\n });\n var _initialValues = this.state.initialValues;\n _initialValues.utilityLogic = {};\n this.validator.hideMessages();\n this.setState({});\n if (this.state.utilities.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n } else {\n console.log(\"Notnull\");\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var _utilities = this.state.utilities;\n\n console.log(values.utilityLogic);\n _utilities[this.state.currentIndex].utility = { ...values.utilityLogic };\n console.log(this.state.utilities);\n this.setState({\n utilities: _utilities,\n showFirstAddBtn: true,\n initialValues: {\n utilityLogic: {\n utilityType: \"\",\n utilityUom: \"\",\n invoicePeriod: \"\",\n applicableFrom: \"\",\n applicableFromDate: \"\",\n dueDate: \"\",\n dueType: \"\",\n dueFrequency: \"\",\n rates: [],\n },\n },\n });\n var _initialValues = this.state.initialValues;\n _initialValues.utilityLogic = {};\n this.validator.hideMessages();\n this.state.currentIndex = null;\n this.setState({});\n if (this.state.utilities.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n }\n };\n\n resetUtilityDetails = (values) => {\n this.setState({\n // utilities: _utilities,\n showFirstAddBtn: true,\n initialValues: {\n utilityLogic: {\n utilityType: \"\",\n utilityUom: \"\",\n invoicePeriod: \"\",\n applicableFrom: \"\",\n applicableFromDate: \"\",\n dueDate: \"\",\n dueType: \"\",\n dueFrequency: \"\",\n rates: [],\n },\n },\n });\n var _initialValues = this.state.initialValues;\n _initialValues.utilityLogic = {};\n this.validator.hideMessages();\n this.state.currentIndex = null;\n this.setState({});\n if (this.state.utilities.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n };\n\n loadUtilityUomValues(e) {\n if (\n e.target.value === \"Electricity Basis Units @ Grid Rate\" ||\n e.target.value === \"Electricity Basis Units @ DG\" ||\n e.target.value === \"Electricity Basis Units @ Solar\" ||\n e.target.value === \"Electricity Basis Units @ Other Sources\" ||\n e.target.value === \"Electricity Basis Units @ Blendid\"\n ) {\n this.setState({\n utilityRateUomValues: electricityBasisUnitsGridRate,\n });\n } else if (\n e.target.value === \"Water Basis Units @ Board\" ||\n e.target.value === \"Water Basis Units @ Other Sources\"\n ) {\n this.setState({\n utilityRateUomValues: waterBasisUnitsBoard,\n });\n } else if (\n e.target.value === \"Gas Basis Units @ Gas Bank\" ||\n e.target.value === \"Gas Basis Units @ Piped Gas Bank\"\n ) {\n this.setState({\n utilityRateUomValues: gasBasisUnitsGasBank,\n });\n } else if (\n e.target.value === \"HVAC Basis Flat Unit Rate\" ||\n e.target.value === \"Other\"\n ) {\n this.setState({\n utilityRateUomValues: hvacBasisFlatUnitRate,\n });\n } else if (e.target.value === \"HVAC Basis BTU Unit Rate\") {\n this.setState({\n utilityRateUomValues: hvacBasisBtuUnitRate,\n });\n } else if (e.target.value === \"CAM During Fitout Period\") {\n this.setState({\n utilityRateUomValues: hvacBasisFlatUnitRate,\n });\n } else if (e.target.value === \"Extra Hours Charges Basis Flat Rate\") {\n this.setState({\n utilityRateUomValues: extraHoursChargesBasisFlatRate,\n });\n } else if (\n e.target.value === \"Horticulture Charges Flat Rate\" ||\n e.target.value === \"MEP Services Flat Rate\"\n ) {\n this.setState({\n utilityRateUomValues: horticultureChargesFlatRate,\n });\n } else {\n this.setState({\n utilityRateUomValues: [],\n });\n }\n }\n\n componentDidMount() {\n\n let athis= this;\n axios({\n url:`${apiUrl.apiUrl.url}/create-lease/fetch-lease-utilities?id=${this.props.match.params.id}`,\n method: 'GET',\n }).then(function(response){\n let data = response.data;\n athis.state.from = data.from;\n athis.state.to = data.to;\n\n athis.setState({\n utilities: data.utilities,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n initialValues: {\n ...athis.state.initialValues, // Preserve other initial values\n notes_7: data.notes_7 || \"\", // Ensure notes_7 is updated properly\n }\n });\n\n //athis.setState({ 'note_val' : data.notes_7 });\n var initialValues = athis.state.initialValues;\n initialValues[\"notes_7\"] = data.notes_7;\n\n athis.setState({ initialValues: initialValues });\n\n console.log(initialValues, \"initialValues initialValues\");\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-utilities?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.from = data.from;\n // this.state.to = data.to;\n\n // this.setState({\n // utilities: data.utilities,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // });\n\n // //this.setState({ 'note_val' : data.notes_7 });\n // var initialValues = this.state.initialValues;\n // initialValues[\"notes_7\"] = data.notes_7;\n\n // this.setState({ initialValues: initialValues });\n\n // console.log(initialValues, \"initialValues initialValues\");\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _mf = this.state.utilities;\n _mf.splice(this.state.index_val, 1);\n console.log(_mf, \"new array\");\n this.setState({\n utilities: _mf,\n });\n this.setState({\n delete: false,\n index_val: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {/* \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
*/}\n \n
\n \n \n \n
\n \n
\n {/* \n
\n \n \n \n
\n \n
*/}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n if (this.state.utilities.length == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n values.utilities = this.state.utilities;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-utilities?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Other Charges \n
- \n Utilities\n \n
\n \n
\n\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.utilityPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Utility Details \n
\n
\n );\n }\n}\n\nexport default withRouter(Utilities);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage, FieldArray } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass MarketingFund extends React.Component {\n countError = \"\";\n state = {\n escalationIndex: 0,\n voucherTotalAmt: \"\",\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n applicableValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n to: \"\",\n showMfCapped: false,\n showAddBtn: false,\n isOpen: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n revalue: \"\",\n showForm: false,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n marketingFundDetails: [],\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n initialValues: {\n mfLogic: {\n mfLogicText: \"\",\n period: \"\",\n fromDate: \"\",\n toDate: \"\",\n mfUom: \"\",\n mfDueDate: \"\",\n mfRate: \"\",\n mfRateTerm: \"\",\n onArea: \"\",\n mfFrequency: \"\",\n mfCapped: \"\",\n mfCappedOnArea: \"\",\n rentUom: \"\",\n rentRate: \"\",\n percentageofRent: \"\",\n voucherType: \"\",\n voucherTotalAmount: \"\",\n voucherAmount: \"\",\n voucherCount: \"\",\n voucherRate: \"\",\n mfLogicText: \"\",\n slabs: [],\n },\n totalSlabs: \"\",\n },\n toggleMfForm: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n changeMfCapped(e) {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value == \"yes\") {\n this.setState({\n showMfCapped: true,\n });\n } else {\n this.setState({\n showMfCapped: false,\n });\n }\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n editMf(index, values) {\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n console.log(this.state.marketingFundDetails[index].voucherTotalAmount);\n this.state.period = this.state.marketingFundDetails[index].period;\n values.mfLogic.mfLogicText =\n this.state.marketingFundDetails[index].mfLogicText;\n this.state.initialValues.mfLogic.mfLogicText =\n this.state.marketingFundDetails[index].mfLogicText;\n this.state.initialValues.totalSlabs =\n this.state.marketingFundDetails[index].slabNumber;\n this.state.voucherTotalAmt =\n this.state.marketingFundDetails[index].voucherTotalAmount;\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.marketingFundDetails[index].periodTermDD,\n periodTermMM: this.state.marketingFundDetails[index].periodTermMM,\n periodTermYY: this.state.marketingFundDetails[index].periodTermYY,\n });\n if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis Rate\"\n ) {\n this.setState({\n marketingFundBasisRate: true,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis Pure Revenue Share\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: true,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis Pure Revenue Share Sales Range\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: true,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis % of Rent\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: true,\n marketingFundBasisVouchers: false,\n });\n } else if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis Vouchers\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: true,\n });\n } else {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n }\n values.mfLogic = { ...this.state.marketingFundDetails[index] };\n this.state.fromDate = this.state.marketingFundDetails[index].fromDate;\n this.state.toDate = this.state.marketingFundDetails[index].toDate;\n\n if (this.state.marketingFundDetails[index].mfCapped == \"Yes\") {\n this.setState({ showMfCapped: true });\n } else {\n this.setState({ showMfCapped: false });\n }\n this.setState({});\n }\n\n addMfDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n var _marketingFundDetails = this.state.marketingFundDetails;\n values.mfLogic.period = this.state.period;\n values.mfLogic.fromDate = this.state.fromDate;\n values.mfLogic.toDate = this.state.toDate;\n values.mfLogic.periodTermYY = this.state.periodTermYY;\n values.mfLogic.periodTermMM = this.state.periodTermMM;\n values.mfLogic.periodTermDD = this.state.periodTermDD;\n\n _marketingFundDetails.push(values.mfLogic);\n\n this.setState({\n marketingFundDetails: _marketingFundDetails,\n // marketingFundBasisRate: false,\n // marketingFundBasisPureRevenueShare: false,\n // marketingFundBasisPureRevenueShareSalesRange: false,\n // marketingFundBasisPercentofRent: false,\n // marketingFundBasisVouchers: false,\n });\n var _initialValues = this.state.initialValues;\n // _initialValues.mfLogic.mfLogicText = \"\";\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n _initialValues.mfLogic.slabs = [];\n _initialValues.totalSlabs = 0;\n\n this.setState({ initialValues: _initialValues });\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.marketingFundDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n setFieldValue(\"mfLogic.mfRate\", \"\");\n setFieldValue(\"mfLogic.escalationPercent\", \"\");\n this.setState({ isEdit: false, escalationIndex: this.state.period - 2 });\n } else {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n // values.mfLogic.mfLogicText = this.state.initialValues.mfLogic.mfLogicText;\n var _marketingFundDetails = this.state.marketingFundDetails;\n values.mfLogic.period = this.state.period;\n values.mfLogic.fromDate = this.state.fromDate;\n values.mfLogic.toDate = this.state.toDate;\n values.mfLogic.periodTermYY = this.state.periodTermYY;\n values.mfLogic.periodTermMM = this.state.periodTermMM;\n values.mfLogic.periodTermDD = this.state.periodTermDD;\n\n _marketingFundDetails[this.state.currentIndex] = { ...values.mfLogic };\n\n this.setState({\n marketingFundDetails: _marketingFundDetails,\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n var _initialValues = this.state.initialValues;\n // _initialValues.mfLogic.mfLogicText = \"\";\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n _initialValues.mfLogic.slabs = [];\n _initialValues.totalSlabs = 0;\n\n this.setState({ initialValues: _initialValues });\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.marketingFundDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n }\n };\n\n resetMfDetails = (values, resetForm) => {\n this.setState({\n // marketingFundDetails: _marketingFundDetails,\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n var _initialValues = this.state.initialValues;\n // _initialValues.mfLogic.mfLogicText = \"\";\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n _initialValues.mfLogic.slabs = [];\n _initialValues.totalSlabs = 0;\n\n this.setState({ initialValues: _initialValues });\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.marketingFundDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n };\n\n\n handleReset = () => {\n this.setState({\n // marketingFundDetails: _marketingFundDetails,\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n var _initialValues = this.state.initialValues;\n // _initialValues.mfLogic.mfLogicText = \"\";\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n _initialValues.mfLogic.slabs = [];\n _initialValues.totalSlabs = 0;\n\n this.setState({ initialValues: _initialValues });\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n\n if (this.state.marketingFundDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n };\n\n addSlabRow = (e) => {\n this.state.initialValues.totalSlabs = e.target.value;\n if (this.state.initialValues.mfLogic.slabs.length < e.target.value) {\n var toAppend =\n e.target.value - this.state.initialValues.mfLogic.slabs.length;\n for (var i = 0; i < toAppend; i++) {\n this.state.initialValues.mfLogic.slabs.push({\n from: \"\",\n to: \"\",\n percent: \"\",\n });\n }\n } else if (this.state.initialValues.mfLogic.slabs.length > e.target.value) {\n var toRemove =\n this.state.initialValues.mfLogic.slabs.length - e.target.value;\n for (var i = 0; i < toRemove; i++) {\n this.state.initialValues.mfLogic.slabs.pop({});\n }\n }\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.mfLogic.slabs[index + 1].from =\n Number(e.target.value) + Number(1);\n this.setState({});\n }\n\n hadleMfLogicChange = (event) => {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n var index = event.nativeEvent.target.selectedIndex;\n var text = event.nativeEvent.target[index].label;\n this.state.initialValues.mfLogic.mfLogicText = text;\n // this.state.initialValues.mfLogic.mfLogicValue = event.target.value;\n if (event.target.value === \"Marketing Fund Basis Rate\") {\n this.setState({\n marketingFundBasisRate: true,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n event.target.value === \"Marketing Fund Basis Pure Revenue Share\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: true,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n event.target.value ===\n \"Marketing Fund Basis Pure Revenue Share Sales Range\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: true,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (event.target.value === \"Marketing Fund Basis % of Rent\") {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: true,\n marketingFundBasisVouchers: false,\n });\n } else if (event.target.value === \"Marketing Fund Basis Vouchers\") {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: true,\n });\n } else {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n }\n };\n\n componentDidMount() {\n\n let athis=this;\n axios({\n url:`${apiUrl.apiUrl.url}/create-lease/fetch-lease-marketing-fund-details?id=${this.props.match.params.id}`,\n method: 'GET'\n }).then(function (response){\n let data = response.data;\n athis.state.to = data.to;\n athis.state.fromDate = data.from;\n athis.state.applicableValue = data.marketingFundApplicable;\n athis.setState({});\n if (data.marketingFundDetails.length > 0) {\n // let _tempDate = new Date(\n // data.marketingFundDetails[\n // data.marketingFundDetails.length - 1\n // ].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.marketingFundDetails[data.marketingFundDetails.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.marketingFundApplicable === \"yes\") {\n athis.setState({\n toggleMfForm: true,\n });\n } else {\n athis.setState({\n toggleMfForm: false,\n });\n }\n athis.setState({\n initialValues: data,\n marketingFundDetails: data.marketingFundDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period:\n data.marketingFundDetails.length > 0\n ? data.marketingFundDetails.length + 1\n : 1,\n });\n\n if (\n data.marketingFundDetails.length > 0 &&\n data.marketingFundDetails[data.marketingFundDetails.length - 1]\n .toDate == data.to\n ) {\n athis.setState({\n showForm: false,\n });\n } else {\n athis.setState({\n showForm: true,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-marketing-fund-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.to = data.to;\n // this.state.fromDate = data.from;\n // this.state.applicableValue = data.marketingFundApplicable;\n // this.setState({});\n // if (data.marketingFundDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.marketingFundDetails[\n // // data.marketingFundDetails.length - 1\n // // ].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.marketingFundDetails[data.marketingFundDetails.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.marketingFundApplicable === \"yes\") {\n // this.setState({\n // toggleMfForm: true,\n // });\n // } else {\n // this.setState({\n // toggleMfForm: false,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // marketingFundDetails: data.marketingFundDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period:\n // data.marketingFundDetails.length > 0\n // ? data.marketingFundDetails.length + 1\n // : 1,\n // });\n\n // if (\n // data.marketingFundDetails.length > 0 &&\n // data.marketingFundDetails[data.marketingFundDetails.length - 1]\n // .toDate == data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // } else {\n // this.setState({\n // showForm: true,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n showMfForm = (e) => {\n if (e.target.value === \"yes\") {\n this.setState(\n {\n toggleMfForm: true,\n },\n () => {\n console.log(this.state.toggleMfForm);\n }\n );\n } else {\n this.setState({\n toggleMfForm: false,\n });\n }\n };\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _mf = this.state.marketingFundDetails;\n _mf.splice(this.state.index_val, 1);\n console.log(_mf, \"new array\");\n this.setState({\n marketingFundDetails: _mf,\n showForm: true,\n });\n this.state.period--;\n if (this.state.marketingFundDetails.length > 0) {\n this.setState({\n fromDate: getToDate(\n this.state.marketingFundDetails[\n this.state.marketingFundDetails.length - 1\n ].toDate,\n 2,\n 0,\n 0\n ),\n });\n } else {\n this.setState({\n fromDate: this.state.revalue,\n });\n }\n this.setState({\n delete: false,\n index_val: \"\",\n revalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"mfLogic.mfRate\",\n (\n Number(\n this.state.marketingFundDetails[\n this.state.marketingFundDetails.length - 1\n ].mfRate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (\n this.state.period > 1 &&\n this.state.marketingFundDetails[this.state.escalationIndex].mfRate !== 0\n ) {\n setFieldValue(\n \"mfLogic.escalationPercent\",\n (\n ((Number(e.target.value) -\n Number(\n this.state.marketingFundDetails[this.state.escalationIndex].mfRate\n )) /\n Number(\n this.state.marketingFundDetails[\n this.state.marketingFundDetails.length - 1\n ].mfRate\n )) *\n 100\n ).toFixed(2)\n );\n }\n }\n\n calculateVoucherTotal(values, e, setFieldValue) {\n let amount;\n if (\n isNaN(values.mfLogic.voucherCount) !== \"\" &&\n isNaN(values.mfLogic.voucherAmount) !== \"\"\n ) {\n amount =\n Number(values.mfLogic.voucherCount) *\n Number(values.mfLogic.voucherAmount);\n this.setState({ voucherTotalAmt: amount });\n setFieldValue(\"mfLogic.voucherTotalAmount\", amount);\n } else {\n amount = \"\";\n this.setState({ voucherTotalAmt: amount });\n setFieldValue(\"mfLogic.voucherTotalAmount\", amount);\n }\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n
\n {utility.utility.utilityType == \"Other\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n {utility.utility.rates != undefined &&\n utility.utility.rates.map(function (name, index) {\n return (\n \n
\n \n \n \n
\n \n
\n );\n }, this)}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n\n\n \n
\n \n \n \n
\n \n \n {(close) => (\n \n )}\n \n \n {(close) => (\n \n
\n );\n }\n\n mfPopup(mf) {\n console.log(mf);\n if (mf.mfLogicText === \"Marketing Fund Basis Rate\") {\n return this.mfBasisRatePopup(mf);\n } else if (mf.mfLogicText === \"Marketing Fund Basis Pure Revenue Share\") {\n return this.mfBasisRatePureRevenueSharePopup(mf);\n } else if (\n mf.mfLogicText === \"Marketing Fund Basis Pure Revenue Share Sales Range\"\n ) {\n return this.mfBasisRatePureRevenueShareSalesRangePopup(mf);\n } else if (mf.mfLogicText === \"Marketing Fund Basis % of Rate\") {\n return this.mfBasisPercentOfRentPopup(mf);\n } else if (mf.mfLogicText === \"Marketing Fund Basis Vouchers\") {\n return this.mfBasisVouchersPopup(mf);\n }\n }\n\n mfBasisRatePopup(mf) {\n return (\n \n
\n \n {\n values.marketingFundApplicable = this.state.applicableValue;\n values.mfLogic.voucherTotalAmount = this.state.voucherTotalAmt;\n if (!this.applicableValidator.allValid()) {\n this.applicableValidator.showMessages();\n return false;\n }\n if (\n this.state.marketingFundDetails.length == 0 &&\n this.state.applicableValue !== \"no\"\n ) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n // if (\n // this.state.applicableValue == \"yes\" &&\n // this.state.to !==\n // this.state.marketingFundDetails[\n // this.state.marketingFundDetails.length - 1\n // ].toDate\n // ) {\n // // alert(\"Please Complete the period \");\n // this.setState({\n // popupalertMessage: true,\n // popupMessageContent: \"Please Complete the period\",\n // });\n // return false;\n // }\n values.marketingFundDetails = this.state.marketingFundDetails;\n\n console.log(values, \"sending\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-marketing-fund-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Other Charges \n
- \n Marketing Fund\n \n
\n \n
\n\n\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.mfPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Marketing Fund \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n\n mfBasisRatePureRevenueSharePopup(mf) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n mfBasisRatePureRevenueShareSalesRangePopup(mf) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n mfBasisPercentOfRentPopup(mf) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n mfBasisVouchersPopup(mf) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(MarketingFund);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage, FieldArray } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n faTrashAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nimport { pTaxActual, pTaxRate } from \"../../constants\";\nclass PropertyMuncipalTax extends React.Component {\n countError = \"\";\n state = {\n escalationIndex: 0,\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n showRatesOnarea: [],\n showFirstAddBtn: true,\n disableOnActual: false,\n applicableValue: \"\",\n propertyTaxBasisValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n revalue: \"\",\n to: \"\",\n from: \"\",\n showPtaxCapped: false,\n showAddBtn: false,\n isOpen: false,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n propertyTaxDetails: [],\n pTaxLogicValues: [],\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n initialValues: {\n pTaxLogic: {\n propertyTaxBasis: \"\",\n pTaxLogicValue: \"\",\n pTaxLogicText: \"\",\n period: \"\",\n fromDate: \"\",\n toDate: \"\",\n pTaxUom: \"\",\n pTaxDueDate: \"\",\n pTaxRate: \"\",\n pTaxRateTerm: \"\",\n onArea: \"\",\n pTaxFrequency: \"\",\n pTaxCapped: \"\",\n pTaxCappedOnArea: \"\",\n rentUom: \"\",\n rentRate: \"\",\n percentageofRent: \"\",\n voucherType: \"\",\n voucherAmount: \"\",\n slabs: [],\n rates: [],\n },\n totalSlabs: \"\",\n },\n showForm: true,\n togglepTaxForm: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n addRatesRow = () => {\n if (this.state.initialValues.pTaxLogic.rates === undefined) {\n this.state.initialValues.pTaxLogic.rates = [];\n this.state.initialValues.pTaxLogic.rates.push({\n from: \"\",\n to: \"\",\n pTaxUom: \"\",\n onArea: \"\",\n rate: \"\",\n });\n } else {\n this.state.initialValues.pTaxLogic.rates.push({\n from: \"\",\n to: \"\",\n pTaxUom: \"\",\n onArea: \"\",\n rate: \"\",\n });\n }\n if (this.state.initialValues.pTaxLogic.rates.length > 0) {\n this.setState({ showFirstAddBtn: false });\n }\n this.setState({});\n };\n\n getRatesFromForNextSlab(e, values, index) {\n this.state.initialValues.pTaxLogic.rates[index + 1].from = getToDate(\n e.target.value,\n 2,\n 0,\n 0\n );\n this.setState({});\n }\n\n showRatesOnarea(e, i) {\n let index = i;\n if (e.target.value == \"Per Sq Ft\") {\n var _showRatesOnArea = this.state.showRatesOnarea;\n _showRatesOnArea[i] = true;\n this.setState({ showRatesOnarea: _showRatesOnArea });\n } else {\n var _showRatesOnArea = this.state.showRatesOnarea;\n _showRatesOnArea[i] = false;\n this.setState({ showRatesOnarea: _showRatesOnArea });\n }\n }\n\n removeRatesRow(element) {\n this.state.initialValues.pTaxLogic.rates.splice(element, 1);\n if (this.state.initialValues.pTaxLogic.rates.length == 0) {\n this.setState({ showFirstAddBtn: true });\n }\n this.setState({});\n }\n\n getpTaxLogicValues(e) {\n if (e.target.value == \"Property Tax Basis Rate\") {\n this.setState({ pTaxLogicValues: pTaxRate, disableOnActual: false });\n } else if (e.target.value == \"Property Tax Basis Actuals\") {\n this.setState({ pTaxLogicValues: pTaxActual, disableOnActual: true });\n } else {\n this.setState({ pTaxLogicValues: [] });\n }\n }\n\n changePTaxCapped(e) {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value == \"yes\") {\n this.setState({\n showPtaxCapped: true,\n });\n } else {\n this.setState({\n showPtaxCapped: false,\n });\n }\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n editProperty(index, values) {\n this.state.currentIndex = index;\n if (\n this.state.propertyTaxDetails[index].rates !== undefined &&\n this.state.propertyTaxDetails[index].rates.length > 0\n ) {\n this.setState({ showFirstAddBtn: false });\n } else {\n this.setState({ showFirstAddBtn: true });\n }\n if (this.state.propertyTaxDetails[index].ptaxCapped == \"yes\") {\n this.setState({ showPtaxCapped: true });\n } else {\n this.setState({ showPtaxCapped: false });\n }\n // this.state.showFirstAddBtn = true;\n this.state.readOnEdit = true;\n this.state.disableOnEdit = false;\n this.state.period = this.state.propertyTaxDetails[index].period;\n this.state.initialValues.totalSlabs =\n this.state.propertyTaxDetails[index].slabNumber;\n this.state.propertyTaxBasisValue =\n this.state.propertyTaxDetails[index].propertyTaxBasis;\n if (this.state.propertyTaxBasisValue == \"Property Tax Basis Rate\") {\n this.setState({ pTaxLogicValues: pTaxRate, disableOnActual: false });\n } else if (\n this.state.propertyTaxBasisValue == \"Property Tax Basis Actuals\"\n ) {\n this.setState({ pTaxLogicValues: pTaxActual, disableOnActual: true });\n } else {\n this.setState({ pTaxLogicValues: [] });\n }\n // this.state.initialValues.pTaxLogic.pTaxLogicValue =\n // this.state.propertyTaxDetails[index].pTaxLogicValue;\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.propertyTaxDetails[index].periodTermDD,\n periodTermMM: this.state.propertyTaxDetails[index].periodTermMM,\n periodTermYY: this.state.propertyTaxDetails[index].periodTermYY,\n });\n if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"1\") {\n this.setState({\n propertyTaxBasisRate: true,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"2\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: true,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"3\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: true,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"4\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: true,\n propertyTaxBasisVouchers: false,\n });\n } else if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"5\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: true,\n });\n } else {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n }\n values.pTaxLogic = { ...this.state.propertyTaxDetails[index] };\n this.state.fromDate = this.state.propertyTaxDetails[index].fromDate;\n this.state.toDate = this.state.propertyTaxDetails[index].toDate;\n if (this.state.propertyTaxDetails[index].camActualization == \"Yes\") {\n this.setState({ showCamActalization: true });\n } else {\n this.setState({ showCamActalization: false });\n }\n if (this.state.propertyTaxDetails[index].camCapped == \"Yes\") {\n this.setState({ showCamCapped: true });\n } else {\n this.setState({ showCamCapped: false });\n }\n this.setState({});\n }\n\n addpTaxDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n values.propertyTaxPayable = this.state.applicableValue;\n values.pTaxLogic.propertyTaxBasis = this.state.propertyTaxBasisValue;\n values.pTaxLogic.pTaxLogicText =\n this.state.initialValues.pTaxLogic.pTaxLogicText;\n var _propertyTaxDetails = this.state.propertyTaxDetails;\n values.pTaxLogic.period = this.state.period;\n values.pTaxLogic.fromDate = this.state.fromDate;\n values.pTaxLogic.toDate = this.state.toDate;\n values.pTaxLogic.periodTermYY = this.state.periodTermYY;\n values.pTaxLogic.periodTermMM = this.state.periodTermMM;\n values.pTaxLogic.periodTermDD = this.state.periodTermDD;\n _propertyTaxDetails.push(values.pTaxLogic);\n var _initialValues = this.state.initialValues;\n // _initialValues.pTaxLogic.pTaxLogicValue = \"\";\n _initialValues.totalSlabs = 0;\n this.setState({\n propertyTaxDetails: _propertyTaxDetails,\n // propertyTaxBasisRate: false,\n // propertyTaxBasisPureRevenueShare: false,\n // propertyTaxBasisPureRevenueShareSalesRange: false,\n // propertyTaxBasisPercentofRent: false,\n // propertyTaxBasisVouchers: false,\n });\n this.state.initialValues.pTaxLogic.slabs = [];\n this.state.initialValues.pTaxLogic.rates = [];\n // this.state.initialValues.pTaxLogic.pTaxLogicValue = \"\";\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.propertyTaxDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n setFieldValue(\"pTaxLogic.pTaxRate\", \"\");\n setFieldValue(\"pTaxLogic.escalationPercent\", \"\");\n this.setState({ isEdit: false, escalationIndex: this.state.period - 2 });\n } else {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n values.propertyTaxPayable = this.state.applicableValue;\n values.pTaxLogic.propertyTaxBasis = this.state.propertyTaxBasisValue;\n values.pTaxLogic.pTaxLogicText =\n this.state.initialValues.pTaxLogic.pTaxLogicText;\n var _propertyTaxDetails = this.state.propertyTaxDetails;\n values.pTaxLogic.period = this.state.period;\n values.pTaxLogic.fromDate = this.state.fromDate;\n values.pTaxLogic.toDate = this.state.toDate;\n values.pTaxLogic.periodTermYY = this.state.periodTermYY;\n values.pTaxLogic.periodTermMM = this.state.periodTermMM;\n values.pTaxLogic.periodTermDD = this.state.periodTermDD;\n _propertyTaxDetails[this.state.currentIndex] = { ...values.pTaxLogic };\n var _initialValues = this.state.initialValues;\n _initialValues.pTaxLogic.pTaxLogicValue = \"\";\n _initialValues.totalSlabs = 0;\n this.setState({\n propertyTaxDetails: _propertyTaxDetails,\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n console.log(this.state.initialValues);\n this.state.initialValues.pTaxLogic.slabs = [];\n this.state.initialValues.pTaxLogic.rates = [];\n this.state.initialValues.pTaxLogic.pTaxLogicValue = \"\";\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.propertyTaxDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n }\n };\n\n resetpTaxDetails = (values, resetForm) => {\n var _initialValues = this.state.initialValues;\n _initialValues.pTaxLogic.pTaxLogicValue = \"\";\n _initialValues.totalSlabs = 0;\n this.setState({\n // propertyTaxDetails: _propertyTaxDetails,\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n console.log(this.state.initialValues);\n this.state.initialValues.pTaxLogic.slabs = [];\n this.state.initialValues.pTaxLogic.rates = [];\n this.state.initialValues.pTaxLogic.pTaxLogicValue = \"\";\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.propertyTaxDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n\n handleReset = () => {\n var _initialValues = this.state.initialValues;\n _initialValues.pTaxLogic.pTaxLogicValue = \"\";\n _initialValues.totalSlabs = 0;\n this.setState({\n // propertyTaxDetails: _propertyTaxDetails,\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n console.log(this.state.initialValues);\n this.state.initialValues.pTaxLogic.slabs = [];\n this.state.initialValues.pTaxLogic.rates = [];\n this.state.initialValues.pTaxLogic.pTaxLogicValue = \"\";\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.propertyTaxDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n addSlabRow = (e) => {\n this.state.initialValues.totalSlabs = e.target.value;\n if (this.state.initialValues.pTaxLogic.slabs.length < e.target.value) {\n var toAppend =\n e.target.value - this.state.initialValues.pTaxLogic.slabs.length;\n for (var i = 0; i < toAppend; i++) {\n this.state.initialValues.pTaxLogic.slabs.push({\n from: \"\",\n to: \"\",\n percent: \"\",\n });\n }\n } else if (\n this.state.initialValues.pTaxLogic.slabs.length > e.target.value\n ) {\n var toRemove =\n this.state.initialValues.pTaxLogic.slabs.length - e.target.value;\n for (var i = 0; i < toRemove; i++) {\n this.state.initialValues.pTaxLogic.slabs.pop({});\n }\n }\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.pTaxLogic.slabs[index + 1].from =\n Number(e.target.value) + Number(1);\n this.setState({});\n }\n\n showpTaxForm = (e) => {\n if (e.target.value === \"yes\") {\n this.setState({\n togglepTaxForm: true,\n });\n } else {\n this.setState({\n togglepTaxForm: false,\n });\n }\n };\n\n hadlepTaxLogicChange = (event) => {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n var index = event.nativeEvent.target.selectedIndex;\n var text = event.nativeEvent.target[index].label;\n this.state.initialValues.pTaxLogic.pTaxLogicText = text;\n this.state.initialValues.pTaxLogic.pTaxLogicValue = event.target.value;\n if (event.target.value === \"1\") {\n this.setState({\n propertyTaxBasisRate: true,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (event.target.value === \"2\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: true,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (event.target.value === \"3\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: true,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (event.target.value === \"4\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: true,\n propertyTaxBasisVouchers: false,\n });\n } else if (event.target.value === \"5\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: true,\n });\n } else {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n }\n };\n\n componentDidMount() {\n\n let athis=this;\n axios({\n url:`${apiUrl.apiUrl.url}/create-lease/fetch-lease-property-tax-details?id=${this.props.match.params.id}`,\n method: 'GET'\n }).then(function (response){\n let data = response.data;\n athis.state.to = data.to;\n athis.state.fromDate = data.from;\n athis.state.applicableValue = data.propertyTaxPayable;\n if (data.propertyTaxDetails.length > 0) {\n athis.setState({\n fromDate: getToDate(\n data.propertyTaxDetails[data.propertyTaxDetails.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n athis.setState({\n initialValues: data,\n propertyTaxDetails: data.propertyTaxDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period:\n data.propertyTaxDetails.length > 0\n ? data.propertyTaxDetails.length + 1\n : 1,\n });\n if (data.propertyTaxPayable == \"yes\") {\n athis.setState({\n togglepTaxForm: true,\n });\n } else {\n athis.setState({\n togglepTaxForm: false,\n });\n }\n if (\n data.propertyTaxDetails[data.propertyTaxDetails.length - 1].toDate ==\n data.to\n ) {\n athis.setState({\n showForm: false,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-property-tax-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.to = data.to;\n // this.state.fromDate = data.from;\n // this.state.applicableValue = data.propertyTaxPayable;\n // if (data.propertyTaxDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.propertyTaxDetails[data.propertyTaxDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.propertyTaxDetails[data.propertyTaxDetails.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // this.setState({\n // initialValues: data,\n // propertyTaxDetails: data.propertyTaxDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period:\n // data.propertyTaxDetails.length > 0\n // ? data.propertyTaxDetails.length + 1\n // : 1,\n // });\n // if (data.propertyTaxPayable == \"yes\") {\n // this.setState({\n // togglepTaxForm: true,\n // });\n // } else {\n // this.setState({\n // togglepTaxForm: false,\n // });\n // }\n // if (\n // data.propertyTaxDetails[data.propertyTaxDetails.length - 1].toDate ==\n // data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _pTax = this.state.propertyTaxDetails;\n _pTax.splice(this.state.index_val, 1);\n console.log(_pTax, \"new array\");\n this.setState({\n propertyTaxDetails: _pTax,\n showForm: true,\n });\n this.state.period--;\n if (this.state.propertyTaxDetails.length > 0) {\n this.setState({\n fromDate: getToDate(\n this.state.propertyTaxDetails[\n this.state.propertyTaxDetails.length - 1\n ].toDate,\n 2,\n 0,\n 0\n ),\n });\n } else {\n this.setState({\n fromDate: this.state.revalue,\n });\n }\n this.setState({\n delete: false,\n index_val: \"\",\n revalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"pTaxLogic.pTaxRate\",\n (\n Number(\n this.state.propertyTaxDetails[\n this.state.propertyTaxDetails.length - 1\n ].pTaxRate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (\n this.state.period > 1 &&\n this.state.propertyTaxDetails[this.state.escalationIndex].pTaxRate !== 0\n ) {\n setFieldValue(\n \"pTaxLogic.escalationPercent\",\n ((Number(e.target.value) -\n Number(\n this.state.propertyTaxDetails[this.state.escalationIndex].pTaxRate\n )) /\n Number(\n this.state.propertyTaxDetails[\n this.state.propertyTaxDetails.length - 1\n ].pTaxRate\n )) *\n 100\n );\n }\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n this.state.applicableValue = this.state.applicableValue;\n values.propertyTaxPayable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n console.log(this.validator);\n this.applicableValidator.showMessages();\n return false;\n }\n console.log(values);\n if (\n this.state.propertyTaxDetails.length == 0 &&\n this.state.applicableValue !== \"no\"\n ) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n // if (\n // this.state.applicableValue == \"yes\" &&\n // this.state.to !==\n // this.state.propertyTaxDetails[\n // this.state.propertyTaxDetails.length - 1\n // ].toDate\n // ) {\n // this.setState({\n // popupalertMessage: true,\n // popupMessageContent: \"Please Complete the period\",\n // });\n // // alert(\"Please Complete the period \");\n // return false;\n // }\n values.propertyTaxDetails = this.state.propertyTaxDetails;\n console.log(values.propertyTaxDetails, \"gg\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-property-tax-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Other Charges \n
- \n Property & Municipal Tax Fund\n \n
\n \n
\n\n\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.pTaxPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Property & Muncipal Tax Fund \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n\n pTaxBasisActualPopup(pTax) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pTaxBasisRatePureRevenueSharePopup(pTax) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n\n {pTax.rates != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n {pTax.rates.map(function (name, index) {\n return (\n
\n )}\n \n
\n );\n }, this)}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pTaxBasisRatePureRevenueShareSalesRangePopup(pTax) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pTaxBasisPercentOfRentPopup(pTax) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pTaxBasisVouchersPopup(pTax) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(PropertyMuncipalTax);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass ParkingStorageSignage extends React.Component {\n countError = \"\";\n state = {\n escalationChargeType: \"\",\n escalationIndex: 0,\n showCharges: false,\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n applicableValue: \"\",\n applicableValueStatic: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n keyvalue: \"\",\n leaseTermYY: \"\",\n leaseTermMM: \"\",\n leaseTermDD: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n to: \"\",\n isOpen: false,\n showAddBtn: false,\n fromDate: \"\",\n toDate: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n period: 1,\n redirect: false,\n occupiers: { count: 2, occupiers: [{ countUnits: 1 }] },\n showParking: false,\n showStorage: false,\n showSignage: false,\n parkingStorageSignage: [],\n parkingCharges: {\n parking2W: \"\",\n parking4W: \"\",\n parkingOther: \"\",\n },\n initialValues: {\n pkgLogic: {\n chargeType: \"\",\n chargeTypeText: \"\",\n period: \"\",\n fromDate: \"\",\n toDate: \"\",\n count: \"\",\n type: \"\",\n dueDate: \"\",\n rate: \"\",\n rateTerm: \"\",\n onArea: \"\",\n frequency: \"\",\n area: \"\",\n strName: \"\",\n sngName: \"\",\n location: \"\",\n },\n },\n toggleParkingForm: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n showParkingForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\" || e.target.value === \"hybrid\") {\n this.setState({\n toggleParkingForm: true,\n showCharges: false,\n });\n } else if (e.target.value === \"no\") {\n this.setState({\n toggleParkingForm: false,\n showCharges: true,\n });\n } else if (e.target.value === \"Select\") {\n this.setState({ showCharges: false });\n }\n };\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n hadleOptionChange = (event, values, setFieldValue) => {\n\n console.log(\"form change\");\n\n this.setState({ escalationChargeType: event.target.value });\n if (\n this.state.parkingStorageSignage[event.target.value] !== undefined &&\n this.state.parkingStorageSignage[event.target.value].length > 0 &&\n this.state.parkingStorageSignage[event.target.value][\n this.state.parkingStorageSignage[event.target.value].length - 1\n ].toDate == values.to\n ) {\n this.state.initialValues.pkgLogic.chargeType = \"\";\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n\n\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n var _parkingStorageSignage = this.state.parkingStorageSignage;\n if (\n _parkingStorageSignage[event.target.value] == undefined ||\n _parkingStorageSignage[event.target.value].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _parkingStorageSignage[event.target.value][\n _parkingStorageSignage[event.target.value].length - 1\n ].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period =\n this.state.parkingStorageSignage[event.target.value].length + 1;\n }\n\n this.setState({});\n\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n var index = event.nativeEvent.target.selectedIndex;\n var text = event.nativeEvent.target[index].label;\n this.state.initialValues.pkgLogic.chargeTypeText = text;\n this.state.initialValues.pkgLogic.chargeType = event.target.value;\n\n //-------chaning pkg count--------------------//\n let eventType = event.target.value.replace(/ /g, '_').toLowerCase();\n if (this.state.initialValues.additionalDetails.parkingDetails[eventType]) {\n this.state.initialValues.pkgLogic.count = this.state.initialValues.additionalDetails.parkingDetails[eventType];\n this.setState({});\n setFieldValue(\"pkgLogic.count\", this.state.initialValues.pkgLogic.count);\n }\n\n if (\n event.target.value === \"Parking 2W\" ||\n event.target.value === \"Parking 4W\" ||\n event.target.value === \"Parking Other\"\n ) {\n this.setState({\n showParking: true,\n showStorage: false,\n showSignage: false,\n });\n } else if (event.target.value === \"Storage\") {\n this.setState({\n showParking: false,\n showStorage: true,\n showSignage: false,\n });\n } else if (event.target.value === \"Signage\") {\n this.setState({\n showParking: false,\n showStorage: false,\n showSignage: true,\n });\n } else {\n this.setState({\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n }\n };\n\n editPkg(index, values, key) {\n\n console.log(this.state.parkingStorageSignage[key][index]);\n this.state.applicableValue = this.state.applicableValueStatic;\n if (this.state.applicableValue != 'no') {\n this.state.toggleParkingForm = true;\n this.state.initialValues.pkgLogic.chargeType = this.state.parkingStorageSignage[key][index].chargeType;\n }\n\n\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n this.state.period = this.state.parkingStorageSignage[key][index].period;\n\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.parkingStorageSignage[key][index].periodTermDD,\n periodTermMM: this.state.parkingStorageSignage[key][index].periodTermMM,\n periodTermYY: this.state.parkingStorageSignage[key][index].periodTermYY,\n });\n if (\n this.state.parkingStorageSignage[key][index].chargeType ===\n \"Parking 2W\" ||\n this.state.parkingStorageSignage[key][index].chargeType ===\n \"Parking 4W\" ||\n this.state.parkingStorageSignage[key][index].chargeType ===\n \"Parking Other\"\n ) {\n this.setState({\n showParking: true,\n showStorage: false,\n showSignage: false,\n });\n } else if (\n this.state.parkingStorageSignage[key][index].chargeType === \"Storage\"\n ) {\n this.setState({\n showParking: false,\n showStorage: true,\n showSignage: false,\n });\n } else if (\n this.state.parkingStorageSignage[key][index].chargeType === \"Signage\"\n ) {\n this.setState({\n showParking: false,\n showStorage: false,\n showSignage: true,\n });\n } else {\n this.setState({\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n }\n values.pkgLogic = this.state.parkingStorageSignage[key][index];\n this.state.fromDate = this.state.parkingStorageSignage[key][index].fromDate;\n this.state.toDate = this.state.parkingStorageSignage[key][index].toDate;\n\n this.setState({});\n }\n\n addDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n\n return false;\n }\n values.pkgLogic.chargeTypeText =\n this.state.initialValues.pkgLogic.chargeTypeText;\n var _parkingStorageSignage = this.state.parkingStorageSignage;\n values.pkgLogic.period = this.state.period;\n values.pkgLogic.fromDate = this.state.fromDate;\n values.pkgLogic.toDate = this.state.toDate;\n values.pkgLogic.periodTermYY = this.state.periodTermYY;\n values.pkgLogic.periodTermMM = this.state.periodTermMM;\n values.pkgLogic.periodTermDD = this.state.periodTermDD;\n if (\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType] ==\n undefined\n ) {\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType] =\n [];\n }\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType].push(\n values.pkgLogic\n );\n this.setState({\n parkingStorageSignage: _parkingStorageSignage,\n showParking: false,\n showStorage: false,\n showSignage: false,\n showAddBtn: false,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.pkgLogic.chargeType = \"\";\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n setFieldValue(\"pkgLogic.rate\", \"\");\n setFieldValue(\"pkgLogic.escalationPercent\", \"\");\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n this.mainFormValidator.hideMessages();\n // resetForm();\n // this.setState({\n // fromDate: getToDate(this.state.toDate, 2, 0, 0),\n // toDate: \"\",\n // });\n } else {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n }\n values.pkgLogic.chargeTypeText =\n this.state.initialValues.pkgLogic.chargeTypeText;\n var _parkingStorageSignage = this.state.parkingStorageSignage;\n values.pkgLogic.period = this.state.period;\n values.pkgLogic.fromDate = this.state.fromDate;\n values.pkgLogic.toDate = this.state.toDate;\n values.pkgLogic.periodTermYY = this.state.periodTermYY;\n values.pkgLogic.periodTermMM = this.state.periodTermMM;\n values.pkgLogic.periodTermDD = this.state.periodTermDD;\n if (\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType] ==\n undefined\n ) {\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType] =\n [];\n }\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType][\n this.state.currentIndex\n ] = { ...values.pkgLogic };\n this.setState({\n parkingStorageSignage: _parkingStorageSignage,\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.pkgLogic.chargeType = \"\";\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.mainFormValidator.hideMessages();\n resetForm();\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n // this.setState({\n // fromDate: getToDate(this.state.toDate, 2, 0, 0),\n // toDate: \"\",\n // });\n }\n };\n\n resetDetails = (values, resetForm) => {\n this.setState({\n // parkingStorageSignage: _parkingStorageSignage,\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.pkgLogic.chargeType = \"\";\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.mainFormValidator.hideMessages();\n resetForm();\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n handleReset = () => {\n this.setState({\n // parkingStorageSignage: _parkingStorageSignage,\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.pkgLogic.chargeType = \"\";\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.mainFormValidator.hideMessages();\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n componentDidMount() {\n let athis = this;\n axios({\n url:`${apiUrl.apiUrl.url}/create-lease/fetch-lease-pss-details?id=${this.props.match.params.id}`,\n method: 'GET'\n }).then(function (response){\n let data = response.data;\n athis.state.to = data.to;\n athis.state.fromDate = data.from;\n athis.state.applicableValue = data.chargesApplicable;\n athis.state.applicableValueStatic = data.chargesApplicable;\n if (data.parkingStorageSignage.length > 0) {\n // let _tempDate = new Date(\n // data.parkingStorageSignage[\n // data.parkingStorageSignage.length - 1\n // ].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.parkingStorageSignage[data.parkingStorageSignage.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.chargesApplicable === \"yes\") {\n athis.setState({\n toggleParkingForm: true,\n });\n } else {\n athis.setState({\n toggleParkingForm: false,\n showCharges: true,\n });\n }\n athis.setState({\n initialValues: data,\n parkingStorageSignage: data.parkingStorageSignage,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period:\n data.parkingStorageSignage.length > 0\n ? data.parkingStorageSignage.length + 1\n : 1,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-pss-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.to = data.to;\n // this.state.fromDate = data.from;\n // this.state.applicableValue = data.chargesApplicable;\n // this.state.applicableValueStatic = data.chargesApplicable;\n // if (data.parkingStorageSignage.length > 0) {\n // // let _tempDate = new Date(\n // // data.parkingStorageSignage[\n // // data.parkingStorageSignage.length - 1\n // // ].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.parkingStorageSignage[data.parkingStorageSignage.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.chargesApplicable === \"yes\") {\n // this.setState({\n // toggleParkingForm: true,\n // });\n // } else {\n // this.setState({\n // toggleParkingForm: false,\n // showCharges: true,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // parkingStorageSignage: data.parkingStorageSignage,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period:\n // data.parkingStorageSignage.length > 0\n // ? data.parkingStorageSignage.length + 1\n // : 1,\n // });\n // // if (\n // // (data.parkingStorageSignage[\n // // data.parkingStorageSignage.length - 1\n // // ].toDate = data.to)\n // // ) {\n // // this.setState({\n // // showForm: false,\n // // });\n // // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _rdd = this.state.parkingStorageSignage;\n _rdd[this.state.keyvalue].splice(this.state.index_val, 1);\n this.setState({\n parkingStorageSignage: _rdd,\n showForm: true,\n });\n this.state.period--;\n this.setState({\n delete: false,\n index_val: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n console.log(\n values.parkingStorageSignage[values.pkgLogic.chargeType][\n values.parkingStorageSignage[values.pkgLogic.chargeType].length - 1\n ].rate\n );\n console.log(values);\n setFieldValue(\n \"pkgLogic.rate\",\n (\n Number(\n values.parkingStorageSignage[values.pkgLogic.chargeType][\n values.parkingStorageSignage[values.pkgLogic.chargeType].length -\n 1\n ].rate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (\n this.state.period > 1 &&\n this.state.parkingStorageSignage[this.state.escalationChargeType][\n this.state.escalationIndex\n ].rate !== 0\n ) {\n setFieldValue(\n \"pkgLogic.escalationPercent\",\n (\n ((Number(e.target.value) -\n Number(\n this.state.parkingStorageSignage[this.state.escalationChargeType][\n this.state.escalationIndex\n ].rate\n )) /\n Number(\n this.state.parkingStorageSignage[this.state.escalationChargeType][\n this.state.parkingStorageSignage[\n this.state.escalationChargeType\n ].length - 1\n ].rate\n )) *\n 100\n ).toFixed(2)\n );\n }\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n values.chargesApplicable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n console.log(this.validator);\n this.applicableValidator.showMessages();\n return false;\n }\n\n let count = 0;\n for (var key in this.state.parkingStorageSignage) {\n if (this.state.parkingStorageSignage[key].length > 0) {\n count = 1;\n break;\n }\n }\n if (count == 0 && this.state.applicableValue !== \"no\") {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n\n var parkingStorageSignage = {\n ...this.state.parkingStorageSignage,\n };\n values.parkingStorageSignage = parkingStorageSignage;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-pss-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Other Charges \n
- \n Parking, Storage & Signage\n \n
\n \n
\n\n\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.pssPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Parking Storage & Signage Charges \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n\n storagePopup(pss) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {/* \n
\n \n \n \n
\n \n
*/}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n signagePopup(pss) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(ParkingStorageSignage);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n periodOneMileStoneNames,\n periodOtherMilestoneNames,\n periodOneLandlordMileStoneNames,\n} from \"../../constants\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nimport { hasAccess, getUserType } from \"../../utils/index\";\n\nvar periodOneMileStoneNamesArr = periodOneMileStoneNames;\n\nif (getUserType() == \"Landlord\") {\n periodOneMileStoneNamesArr = periodOneLandlordMileStoneNames;\n}\n\nclass RentDepositDetails extends React.Component {\n countError = \"\";\n state = {\n milestoneVal: \"\",\n readOnEdit: false,\n currentIndex: null,\n disableOnEdit: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n keyvalue: \"\",\n leaseCommencementDate: \"\",\n popupData: {},\n isOpen: false,\n milestoneMonths: \"RDEP Milestone # Months\",\n rdepTotalAmount: \"\",\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n milestonesCount: 1,\n milestones: [],\n milestoneNamesValues: [],\n initialValues: {\n rdepLogic: {\n milestones: [],\n period: \"\",\n rentDepositNature: \"\",\n months: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n onArea: \"\",\n milestonesCount: 0,\n totalAmount: \"\",\n rate: \"\",\n },\n },\n biFurcateLandlordCheckbox: false,\n rentDepositDetails: [],\n landlordList: [],\n landlordsPercentage: [],\n };\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n\n let athis = this;\n axios({\n url:`${apiUrl.apiUrl.url}/create-lease/fetch-lease-rent-deposit-details?id=${this.props.match.params.id}`,\n method: 'GET',\n }).then(function (response){\n let data = response.data;\n athis.state.biFurcateLandlordCheckbox = data.biFurcateLandlordCheckbox;\n athis.state.leaseCommencementDate = data.lcd;\n athis.state.landlordList = data.landlordList;\n athis.state.fromDate = data.from;\n athis.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n athis.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n athis.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n if (data.rentDepositDetails.length > 0) {\n // let _tempDate = new Date(\n // data.rentDepositDetails[data.rentDepositDetails.length - 1].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.rentDepositDetails[data.rentDepositDetails.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n\n athis.setState({\n initialValues: data,\n rentDepositDetails: data.rentDepositDetails,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n // notes_11: data.notes_11,\n period:\n data.rentDepositDetails.length > 0\n ? data.rentDepositDetails.length + 1\n : 1,\n });\n var _intialValues = athis.state.initialValues;\n // _intialValues['notes_11'] = data.notes_11;\n _intialValues.rdepLogic = {\n milestones: [\n {\n dueDate: \"\",\n milestoneName: \"\",\n amount: \"\",\n milestonePercent: \"\",\n },\n ],\n period: \"\",\n rentDepositNature: \"\",\n months: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n onArea: \"\",\n milestonesCount: 0,\n totalAmount: \"\",\n rate: \"\",\n };\n athis.setState({\n initialValues: _intialValues,\n });\n if (\n data.rentDepositDetails[data.rentDepositDetails.length - 1].toDate ==\n data.to\n ) {\n athis.setState({\n showForm: false,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-rent-deposit-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.biFurcateLandlordCheckbox = data.biFurcateLandlordCheckbox;\n // this.state.leaseCommencementDate = data.lcd;\n // this.state.landlordList = data.landlordList;\n // this.state.fromDate = data.from;\n // this.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n // this.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n // this.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n // if (data.rentDepositDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.rentDepositDetails[data.rentDepositDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.rentDepositDetails[data.rentDepositDetails.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n\n // this.setState({\n // initialValues: data,\n // rentDepositDetails: data.rentDepositDetails,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // // notes_11: data.notes_11,\n // period:\n // data.rentDepositDetails.length > 0\n // ? data.rentDepositDetails.length + 1\n // : 1,\n // });\n // var _intialValues = this.state.initialValues;\n // // _intialValues['notes_11'] = data.notes_11;\n // _intialValues.rdepLogic = {\n // milestones: [\n // {\n // dueDate: \"\",\n // milestoneName: \"\",\n // amount: \"\",\n // milestonePercent: \"\",\n // },\n // ],\n // period: \"\",\n // rentDepositNature: \"\",\n // months: \"\",\n // fromDate: \"\",\n // toDate: \"\",\n // rateUOM: \"\",\n // onArea: \"\",\n // milestonesCount: 0,\n // totalAmount: \"\",\n // rate: \"\",\n // };\n // this.setState({\n // initialValues: _intialValues,\n // });\n // if (\n // data.rentDepositDetails[data.rentDepositDetails.length - 1].toDate ==\n // data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n getDepositNature(e, values, setFieldValue) {\n if (\n this.state.rentDepositDetails[e.target.value] !== undefined &&\n this.state.rentDepositDetails[e.target.value].length > 0 &&\n this.state.rentDepositDetails[e.target.value][\n this.state.rentDepositDetails[e.target.value].length - 1\n ].toDate == values.to\n ) {\n setFieldValue(\"rdepLogic.rentDepositNature\", \"\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n var _rentDepositDetails = this.state.rentDepositDetails;\n if (\n _rentDepositDetails[e.target.value] == undefined ||\n _rentDepositDetails[e.target.value].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _rentDepositDetails[e.target.value][\n _rentDepositDetails[e.target.value].length - 1\n ].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period =\n this.state.rentDepositDetails[e.target.value].length + 1;\n }\n this.setState({});\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNamesArr,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n\n // periodOtherMilestoneNames = [];\n // periodOtherMilestoneNames.push(\n // periodOtherMilestoneNames[\n // this.state.rentDepositDetails[e.target.value][\n // this.state.rentDepositDetails[e.target.value].length - 1\n // ].milestones.length - 1\n // ]\n // );\n // this.setState({\n // milestoneNamesValues: periodOtherMilestoneNames.length\n // ? []\n // : periodOtherMilestoneNames[\n // this.state.rentDepositDetails[e.target.value][\n // this.state.rentDepositDetails[e.target.value].length - 1\n // ].milestones.length - 1\n // ],\n // });\n\n // this.state.milestoneVal =\n // `Escalation ` +\n // this.state.rentDepositDetails[e.target.value][\n // this.state.rentDepositDetails[e.target.value].length - 1\n // ].period;\n\n // this.setState({});\n }\n return true;\n }\n\n editRd(index, values, key) {\n this.state.currentIndex = index;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = true;\n this.state.period = this.state.rentDepositDetails[key][index].period;\n if (this.state.rentDepositDetails[key][index].period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNamesArr,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.rentDepositDetails[key][index].periodTermDD,\n periodTermMM: this.state.rentDepositDetails[key][index].periodTermMM,\n periodTermYY: this.state.rentDepositDetails[key][index].periodTermYY,\n });\n this.state.milestonesCount =\n this.state.rentDepositDetails[key][index].milestones.length;\n this.state.fromDate = this.state.rentDepositDetails[key][index].fromDate;\n this.state.toDate = this.state.rentDepositDetails[key][index].toDate;\n values.rdepLogic.rentDepositNature =\n this.state.rentDepositDetails[key][index].rentDepositNature;\n values.rdepLogic.months = this.state.rentDepositDetails[key][index].months;\n values.rdepLogic.rateUOM =\n this.state.rentDepositDetails[key][index].rateUOM;\n values.rdepLogic.rate = this.state.rentDepositDetails[key][index].rate;\n values.rdepLogic.totalAmount =\n this.state.rentDepositDetails[key][index].totalAmount;\n\n for (\n let i = 0;\n i < this.state.rentDepositDetails[key][index].milestones.length;\n i++\n ) {\n // if (this.state.milestones === undefined) {\n this.state.milestones[i] = {};\n values.rdepLogic.milestones[i] = {};\n this.state.milestones[i].milestoneName =\n this.state.rentDepositDetails[key][index].milestones[i].milestoneName;\n values.rdepLogic.milestones[i].milestoneName =\n this.state.rentDepositDetails[key][index].milestones[i].milestoneName;\n this.state.milestones[i].dueDate =\n this.state.rentDepositDetails[key][index].milestones[i].dueDate;\n values.rdepLogic.milestones[i].dueDate =\n this.state.rentDepositDetails[key][index].milestones[i].dueDate;\n this.state.milestones[i].milestonePercent =\n this.state.rentDepositDetails[key][index].milestones[\n i\n ].milestonePercent;\n values.rdepLogic.milestones[i].milestonePercent =\n this.state.rentDepositDetails[key][index].milestones[\n i\n ].milestonePercent;\n this.state.milestones[i].amount =\n this.state.rentDepositDetails[key][index].milestones[i].amount;\n values.rdepLogic.milestones[i].amount =\n this.state.rentDepositDetails[key][index].milestones[i].amount;\n if (\n this.state.rentDepositDetails[key][index].milestones[i].milestoneType !=\n undefined\n ) {\n this.state.milestones[i].milestoneType =\n this.state.rentDepositDetails[key][index].milestones[i].milestoneType;\n values.rdepLogic.milestones[i].milestoneType =\n this.state.rentDepositDetails[key][index].milestones[i].milestoneType;\n }\n if (\n this.state.rentDepositDetails[key][index].milestones[\n i\n ].milestoneName.includes(\"Escalation\")\n ) {\n this.state.milestones[i].milestoneQuantityType = \"RDEP Milestone %\";\n values.rdepLogic.milestones[i].milestoneQuantityType =\n \"RDEP Milestone %\";\n } else {\n this.state.milestones[i].milestoneQuantityType =\n \"RDEP Milestone # Months\";\n values.rdepLogic.milestones[i].milestoneQuantityType =\n \"RDEP Milestone # Months\";\n }\n this.setState({});\n // }\n }\n\n this.setState({});\n }\n\n addDetails = (values, resetForm) => {\n console.log(values.rdepLogic);\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n if (this.state.biFurcateLandlordCheckbox === true) {\n let count = 0;\n for (let i = 0; i < this.state.landlordList.length; i++) {\n count += Number(this.state.landlordList[i].percent);\n }\n if (count < 100) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Total landlord percentage should be 100\",\n });\n return false;\n }\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.rdepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.rdepLogic.totalAmount) {\n // alert(\n // \"Total Amount of Milestones do not match with total amount of period\"\n // );\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.rdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n for (let i = 0; i < values.rdepLogic.milestones.length; i++) {\n if (this.state.period > 1) {\n values.rdepLogic.milestones[i].milestoneType = \"RDEP Percent\";\n this.setState({});\n }\n }\n }\n // this.state.milestoneVal = `Escalation ` + values.rdepLogic.period;\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n }\n var _rentDepositDetails = this.state.rentDepositDetails;\n values.rdepLogic.period = this.state.period;\n values.rdepLogic.fromDate = this.state.fromDate;\n values.rdepLogic.toDate = this.state.toDate;\n values.rdepLogic.periodTermYY = this.state.periodTermYY;\n values.rdepLogic.periodTermMM = this.state.periodTermMM;\n values.rdepLogic.periodTermDD = this.state.periodTermDD;\n // for (let i = 0; i < this.state.landlordList; i++) {\n\n // }\n if (\n _rentDepositDetails[values.rdepLogic.rentDepositNature] == undefined\n ) {\n _rentDepositDetails[values.rdepLogic.rentDepositNature] = [];\n }\n _rentDepositDetails[values.rdepLogic.rentDepositNature].push({\n ...values.rdepLogic,\n });\n\n this.setState({\n rentDepositDetails: _rentDepositDetails,\n });\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n values.rdepLogic.totalAmount = \"\";\n this.state.milestonesCount = 1;\n this.state.milestones = [];\n values.rdepLogic.milestones = [];\n this.state.period++;\n values.rdepLogic.rate = \"\";\n values.rdepLogic.escalationPercent = '';\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNamesArr,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n\n // this.state.milestonesCount = 1;\n // resetForm();\n this.validator.hideMessages();\n // this.state.milestones = [];\n } else {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.rdepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n console.log(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.rdepLogic.totalAmount) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.rdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n\n for (let i = 0; i < values.rdepLogic.milestones.length; i++) {\n if (this.state.period > 1) {\n values.rdepLogic.milestones[i].milestoneType = \"CDEP Percent\";\n this.setState({});\n }\n }\n }\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _rentDepositDetails = this.state.rentDepositDetails;\n values.rdepLogic.period = this.state.period;\n values.rdepLogic.fromDate = this.state.fromDate;\n values.rdepLogic.toDate = this.state.toDate;\n values.rdepLogic.periodTermYY = this.state.periodTermYY;\n values.rdepLogic.periodTermMM = this.state.periodTermMM;\n values.rdepLogic.periodTermDD = this.state.periodTermDD;\n\n if (\n _rentDepositDetails[values.rdepLogic.rentDepositNature] == undefined\n ) {\n _rentDepositDetails[values.rdepLogic.rentDepositNature] = [];\n }\n _rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.currentIndex\n ] = { ...values.rdepLogic };\n\n _rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.currentIndex\n ].milestones = this.state.milestones;\n this.setState({\n rentDepositDetails: _rentDepositDetails,\n });\n\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n // this.state.fromDate = \"\";\n // this.state.toDate = \"\";\n this.state.period++;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n // this.state.milestonesCount = 1;\n // resetForm();\n this.validator.hideMessages();\n // this.state.milestones = [];\n // values.rdepLogic.rentDepositNature = \"\";\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n }\n };\n\n resetDetails = (values, resetForm) => {\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period = \"\";\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n values.rdepLogic.rentDepositNature = \"\";\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n calculateRdepAmount(values, setFieldValue) {\n if (values.rdepLogic.rateUOM == \"Flat Amount\") {\n values.rdepLogic.totalAmount =\n Number(values.rdepLogic.rate) * Number(values.rdepLogic.months);\n setFieldValue(\n \"rdepLogic.totalAmount\",\n Number(values.rdepLogic.rate) * Number(values.rdepLogic.months)\n );\n } else if (\n values.rdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.rdepLogic.onArea == \"Carpet Area\"\n ) {\n values.rdepLogic.totalAmount =\n Number(values.rdepLogic.rate) *\n Number(values.totalCarpetArea) *\n Number(values.rdepLogic.months);\n setFieldValue(\n \"rdepLogic.totalAmount\",\n Number(values.rdepLogic.rate) *\n Number(values.totalCarpetArea) *\n Number(values.rdepLogic.months)\n );\n } else if (\n values.rdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.rdepLogic.onArea == \"Usable Area\"\n ) {\n values.rdepLogic.totalAmount =\n Number(values.rdepLogic.rate) *\n Number(values.totalUsableArea) *\n Number(values.rdepLogic.months);\n setFieldValue(\n \"rdepLogic.totalAmount\",\n Number(values.rdepLogic.rate) *\n Number(values.totalUsableArea) *\n Number(values.rdepLogic.months)\n );\n } else if (\n values.rdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.rdepLogic.onArea == \"Gross Leasable Area\"\n ) {\n values.rdepLogic.totalAmount =\n Number(values.rdepLogic.rate) *\n Number(values.totalGrossLeasableArea) *\n Number(values.rdepLogic.months);\n setFieldValue(\n \"rdepLogic.totalAmount\",\n Number(values.rdepLogic.rate) *\n Number(values.totalGrossLeasableArea) *\n Number(values.rdepLogic.months)\n );\n }\n if(values.rdepLogic.totalAmount > 0){\n this.calculateEscalationPercentage(values, setFieldValue, (values.rdepLogic.totalAmount/values.rdepLogic.months));\n }\n \n\n // if (this.state.period > 1) {\n // this.calculateMilestoneAmount(1, values, 0);\n // }\n }\n\n calculateEscalationPercentage(values, setFieldValue, currentRecord) {\n if ( typeof this.state.rentDepositDetails[values.rdepLogic.rentDepositNature] != \"undefined\" && this.state.rentDepositDetails[values.rdepLogic.rentDepositNature].length > 0) {\n let count = this.state.rentDepositDetails[values.rdepLogic.rentDepositNature].length;\n let prevMonth = parseFloat(this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][count - 1]['months']);\n let prevRecord = this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][count - 1]['totalAmount']/prevMonth;\n let percent = ((currentRecord-prevRecord)/prevRecord)*100;\n setFieldValue(\n \"rdepLogic.escalationPercent\",\n (\n percent\n ).toFixed(2)\n );\n }\n }\n\n changeFieldName(e, id, values) {\n console.log(values);\n if (e.target.value == \"Due on Lease Commencement Date\") {\n this.state.milestones[id].dueDate = this.state.leaseCommencementDate;\n values.rdepLogic.milestones[id].dueDate =\n this.state.leaseCommencementDate;\n } else {\n this.state.milestones[id].dueDate = \"\";\n // values.rdepLogic.milestones[id].dueDate = \"\";\n }\n if (e.target.value.includes(\"Escalation\")) {\n this.state.milestones[id].milestoneQuantityType = \"RDEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType =\n \"RDEP Milestone # Months\";\n }\n }\n\n changeMilestonePercentName(e, id, values) {\n console.log(e.target.value);\n if (e.target.value == \"RDEP Months\") {\n this.state.milestones[id].milestoneQuantityType =\n \"RDEP Milestone # Months\";\n } else if (e.target.value == \"RDEP Percent\") {\n this.state.milestones[id].milestoneQuantityType = \"RDEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType = \"\";\n }\n\n if (e.target.value == \"RDEP Months\") {\n this.state.milestones[id].amount =\n (values.rdepLogic.totalAmount / values.rdepLogic.months) *\n Number(this.state.milestones[id].milestonePercent);\n values.rdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n } else if (e.target.value == \"Flat Amount\") {\n\n } else {\n var previousAmount = 0;\n if (\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature] ===\n undefined ||\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length == 0\n ) {\n previousAmount = 0;\n } else {\n previousAmount =\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n }\n\n var currentAmount = values.rdepLogic.totalAmount;\n\n var balanceAmount = currentAmount - previousAmount;\n this.state.milestones[id].amount =\n (balanceAmount / 100) * this.state.milestones[id].milestonePercent;\n\n values.rdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n\n this.setState({});\n }\n }\n\n calculateMilestoneAmount(e, values, id) {\n console.log(\"1\");\n if (this.state.period == \"1\") {\n if (values.rdepLogic.milestones[id].milestoneType == \"RDEP Months\") {\n this.state.milestones[id].amount =\n (values.rdepLogic.totalAmount / values.rdepLogic.months) *\n Number(this.state.milestones[id].milestonePercent);\n values.rdepLogic.milestones[id].amount =\n this.state.milestones[id].amount;\n } else {\n this.state.milestones[id].amount =\n (values.rdepLogic.totalAmount *\n Number(this.state.milestones[id].milestonePercent)) /\n 100;\n // Number(this.state.milestones[id].milestonePercent);\n values.rdepLogic.milestones[id].amount =\n this.state.milestones[id].amount;\n }\n this.setState({});\n } else {\n console.log(\"2\");\n var previousAmount =\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.rdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n\n this.state.milestones[id].amount = (balanceAmount / 100) * 100;\n values.rdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n }\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _rdd = this.state.rentDepositDetails;\n _rdd[this.state.keyvalue].splice(this.state.index_val, 1);\n this.setState({\n rentDepositDetails: _rdd,\n showForm: true,\n });\n this.state.period--;\n this.state.period--;\n this.setState({\n delete: false,\n index_val: \"\",\n keyvalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n biFurcateLandlord(e, values) {\n if (this.state.biFurcateLandlordCheckbox === true) {\n this.setState({ biFurcateLandlordCheckbox: false });\n } else {\n this.setState({ biFurcateLandlordCheckbox: true });\n }\n }\n\n calculateRentRate(e, values, setFieldValue) {\n if (e.target.value > 0 && typeof this.state.rentDepositDetails[values.rdepLogic.rentDepositNature] != \"undefined\" && this.state.rentDepositDetails[values.rdepLogic.rentDepositNature].length > 0) {\n let count = this.state.rentDepositDetails[values.rdepLogic.rentDepositNature].length;\n let prevMonth = parseFloat(this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][count - 1]['months']);\n let prevRecord = this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][count - 1]['totalAmount']/prevMonth;\n\n let reviseTotalAmt = Number(prevRecord) + Number((prevRecord * e.target.value) / 100);\n let currentMonths = parseFloat(values.rdepLogic.months);\n let newRate = 0;\n if (values.rdepLogic.rateUOM == \"Per Sq Ft\" && values.rdepLogic.onArea == \"Gross Leasable Area\") {\n newRate = (reviseTotalAmt / values.totalGrossLeasableArea)\n } else if (values.rdepLogic.rateUOM == \"Per Sq Ft\" && values.rdepLogic.onArea == \"Usable Area\") {\n newRate = (reviseTotalAmt / values.totalUsableArea)\n } else if (values.rdepLogic.rateUOM == \"Per Sq Ft\" && values.rdepLogic.onArea == \"Carpet Area\") {\n newRate = (reviseTotalAmt / values.totalCarpetArea)\n } else {\n let rateVal = reviseTotalAmt - (reviseTotalAmt - prevRecord)\n newRate = rateVal + ((rateVal * e.target.value / 100))\n }\n\n setFieldValue(\n \"rdepLogic.rate\",\n (\n newRate\n ).toFixed(2)\n );\n\n setFieldValue(\n \"rdepLogic.totalAmount\",\n (\n reviseTotalAmt * currentMonths\n ).toFixed(2)\n );\n }\n }\n\n milestoneTabs(handleChange, values) {\n var heads = [];\n for (var i = 0; i < this.state.milestonesCount; i++) {\n heads.push(\n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneName = e.target.value;\n this.changeFieldName(e, id, values);\n handleChange(e);\n }}\n >\n \n {this.state.milestoneNamesValues.map((item, i) => (\n \n ))}\n \n {this.validator.message(\n \"Milestone Name\",\n this.state.milestones[i].milestoneName,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n {this.state.period == \"1\" && (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].dueDate = e.target.value;\n handleChange(e);\n }}\n />\n {this.validator.message(\n \"Due Date\",\n this.state.milestones[i].dueDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n )}\n {this.state.milestones[i].milestoneQuantityType != '' && (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneType = e.target.value;\n this.changeMilestonePercentName(e, id, values);\n handleChange(e);\n }}\n >\n \n \n \n \n \n {this.validator.message(\n \"Milestone Type\",\n this.state.milestones[i].milestoneType,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n )}\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestonePercent = e.target.value;\n handleChange(e);\n }}\n onBlur={(e) => {\n var id = e.target.getAttribute(\"param\");\n this.calculateMilestoneAmount(e, values, id);\n }}\n />\n {/* Commented validation message */}\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].amount = e.target.value;\n handleChange(e);\n }}\n />\n {this.validator.message(\n \"RDEP Milestone Amount\",\n this.state.milestones[i].amount,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n {heads} \n \n
\n );\n }\n\n landlordPercentage(handleChange, values) {\n var body = [];\n for (var i = 0; i < this.state.landlordList.length; i++) {\n body.push(\n {body}
\n \n \n
\n );\n }\n return body;\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlordList[id].percent = e.target.value;\n this.setState({});\n handleChange(e);\n }}\n />\n
\n \n \n {(close) => (\n \n )}\n \n \n {(close) => (\n \n
\n );\n }\n rentDepositDetailPopup(rent) {\n return this.rentalDetailsPopup(rent);\n }\n rentalDetailsPopup(rent) {\n console.log(rent);\n return (\n \n
\n \n {\n console.log(this.state.landlordList);\n let count = 0;\n for (var key in this.state.rentDepositDetails) {\n count = 1;\n break;\n }\n if (count == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n var rentDepositDetails = { ...this.state.rentDepositDetails };\n values.rentDepositDetails = rentDepositDetails;\n values.biFurcateLandlordCheckbox =\n this.state.biFurcateLandlordCheckbox;\n // values.landlordList = this.state.landlordList;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-rent-deposit-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Security Deposit Details \n
- \n Rent Deposit Details\n \n
\n \n
\n {/* \n \n\n
*/}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen &&\n this.rentDepositDetailPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Rent Deposit Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default withRouter(RentDepositDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n periodOneMileStoneNames,\n periodOtherMilestoneNames,\n} from \"../../constants\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass CAMDepositDetails extends React.Component {\n countError = \"\";\n state = {\n readOnEdit: false,\n currentIndex: null,\n disableOnEdit: false,\n applicableValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n keyvalue: \"\",\n leaseCommencementDate: \"\",\n popupData: {},\n isOpen: false,\n milestoneMonths: \"CDEP Milestone # Months\",\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n milestonesCount: 1,\n milestones: [],\n milestoneNamesValues: [],\n initialValues: {\n cdepLogic: {\n milestones: [],\n period: \"\",\n camDepositNature: \"\",\n months: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n onArea: \"\",\n milestonesCount: 0,\n totalAmount: \"\",\n rate: \"\",\n },\n },\n camDepositDetails: [],\n toggleCdForm: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n showCdForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\") {\n this.setState({\n toggleCdForm: true,\n });\n } else {\n this.setState({\n toggleCdForm: false,\n });\n }\n };\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n\n let athis=this;\n axios({\n url:`${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-deposit-details?id=${this.props.match.params.id}`,\n method: \"GET\",\n }).then(function(response){\n let data = response.data;\n athis.state.applicableValue = data.camDepositApplicable;\n athis.state.fromDate = data.from;\n athis.state.leaseCommencementDate = data.lcd;\n athis.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n athis.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n athis.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n if (data.camDepositDetails.length > 0) {\n // let _tempDate = new Date(\n // data.camDepositDetails[data.camDepositDetails.length - 1].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.camDepositDetails[data.camDepositDetails.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.camDepositApplicable === \"yes\") {\n athis.setState({\n toggleCdForm: true,\n });\n } else {\n athis.setState({\n toggleCdForm: false,\n });\n }\n athis.setState({\n initialValues: data,\n camDepositDetails: data.camDepositDetails,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n notes_12: data.notes_12,\n period:\n data.camDepositDetails.length > 0\n ? data.camDepositDetails.length + 1\n : 1,\n });\n var _intialValues = athis.state.initialValues;\n _intialValues.cdepLogic = {\n milestones: [\n {\n dueDate: \"\",\n milestoneName: \"\",\n amount: \"\",\n milestonePercent: \"\",\n },\n ],\n period: \"\",\n camDepositNature: \"\",\n months: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n onArea: \"\",\n milestonesCount: 0,\n totalAmount: \"\",\n rate: \"\",\n };\n if (\n data.camDepositDetails[data.camDepositDetails.length - 1].toDate ==\n data.to\n ) {\n athis.setState({\n showForm: false,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-deposit-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.applicableValue = data.camDepositApplicable;\n // this.state.fromDate = data.from;\n // this.state.leaseCommencementDate = data.lcd;\n // this.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n // this.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n // this.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n // if (data.camDepositDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.camDepositDetails[data.camDepositDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.camDepositDetails[data.camDepositDetails.length - 1].toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.camDepositApplicable === \"yes\") {\n // this.setState({\n // toggleCdForm: true,\n // });\n // } else {\n // this.setState({\n // toggleCdForm: false,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // camDepositDetails: data.camDepositDetails,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // notes_12: data.notes_12,\n // period:\n // data.camDepositDetails.length > 0\n // ? data.camDepositDetails.length + 1\n // : 1,\n // });\n // var _intialValues = this.state.initialValues;\n // _intialValues.cdepLogic = {\n // milestones: [\n // {\n // dueDate: \"\",\n // milestoneName: \"\",\n // amount: \"\",\n // milestonePercent: \"\",\n // },\n // ],\n // period: \"\",\n // camDepositNature: \"\",\n // months: \"\",\n // fromDate: \"\",\n // toDate: \"\",\n // rateUOM: \"\",\n // onArea: \"\",\n // milestonesCount: 0,\n // totalAmount: \"\",\n // rate: \"\",\n // };\n // if (\n // data.camDepositDetails[data.camDepositDetails.length - 1].toDate ==\n // data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n getDepositNature(e, values, setFieldValue) {\n if (\n this.state.camDepositDetails[e.target.value] !== undefined &&\n this.state.camDepositDetails[e.target.value].length > 0 &&\n this.state.camDepositDetails[e.target.value][\n this.state.camDepositDetails[e.target.value].length - 1\n ].toDate == values.to\n ) {\n setFieldValue(\"rdepLogic.rentDepositNature\", \"\");\n // alert(\"Values For this type has completed the period\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n var _camDepositDetails = this.state.camDepositDetails;\n if (\n _camDepositDetails[e.target.value] == undefined ||\n _camDepositDetails[e.target.value].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _camDepositDetails[e.target.value][\n _camDepositDetails[e.target.value].length - 1\n ].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period =\n this.state.camDepositDetails[e.target.value].length + 1;\n }\n this.setState({});\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n return true;\n }\n\n editCd(index, values, key) {\n console.log(values);\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n console.log(key, index);\n console.log(this.state.camDepositDetails);\n this.state.period = this.state.camDepositDetails[key][index].period;\n if (this.state.camDepositDetails[key][index].period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.camDepositDetails[key][index].periodTermDD,\n periodTermMM: this.state.camDepositDetails[key][index].periodTermMM,\n periodTermYY: this.state.camDepositDetails[key][index].periodTermYY,\n });\n // values.rdepLogic = this.state.camDepositDetails[key][index];\n this.state.milestonesCount =\n this.state.camDepositDetails[key][index].milestones.length;\n this.state.fromDate = this.state.camDepositDetails[key][index].fromDate;\n this.state.toDate = this.state.camDepositDetails[key][index].toDate;\n values.cdepLogic.camDepositNature =\n this.state.camDepositDetails[key][index].camDepositNature;\n values.cdepLogic.months = this.state.camDepositDetails[key][index].months;\n values.cdepLogic.rateUOM = this.state.camDepositDetails[key][index].rateUOM;\n values.cdepLogic.rate = this.state.camDepositDetails[key][index].rate;\n values.cdepLogic.totalAmount =\n this.state.camDepositDetails[key][index].totalAmount;\n\n for (\n let i = 0;\n i < this.state.camDepositDetails[key][index].milestones.length;\n i++\n ) {\n // if (this.state.milestones === undefined) {\n this.state.milestones[i] = {};\n values.cdepLogic.milestones[i] = {};\n this.state.milestones[i].milestoneName =\n this.state.camDepositDetails[key][index].milestones[i].milestoneName;\n values.cdepLogic.milestones[i].milestoneName =\n this.state.camDepositDetails[key][index].milestones[i].milestoneName;\n this.state.milestones[i].dueDate =\n this.state.camDepositDetails[key][index].milestones[i].dueDate;\n values.cdepLogic.milestones[i].dueDate =\n this.state.camDepositDetails[key][index].milestones[i].dueDate;\n this.state.milestones[i].milestonePercent =\n this.state.camDepositDetails[key][index].milestones[i].milestonePercent;\n values.cdepLogic.milestones[i].milestonePercent =\n this.state.camDepositDetails[key][index].milestones[i].milestonePercent;\n this.state.milestones[i].amount =\n this.state.camDepositDetails[key][index].milestones[i].amount;\n values.cdepLogic.milestones[i].amount =\n this.state.camDepositDetails[key][index].milestones[i].amount;\n if (\n this.state.camDepositDetails[key][index].milestones[i].milestoneType !=\n undefined\n ) {\n this.state.milestones[i].milestoneType =\n this.state.camDepositDetails[key][index].milestones[i].milestoneType;\n values.cdepLogic.milestones[i].milestoneType =\n this.state.camDepositDetails[key][index].milestones[i].milestoneType;\n }\n if (\n this.state.camDepositDetails[key][index].milestones[\n i\n ].milestoneName.includes(\"Escalation\")\n ) {\n this.state.milestones[i].milestoneQuantityType = \"CDEP Milestone %\";\n values.cdepLogic.milestones[i].milestoneQuantityType =\n \"CDEP Milestone %\";\n } else {\n this.state.milestones[i].milestoneQuantityType =\n \"CDEP Milestone # Months\";\n values.cdepLogic.milestones[i].milestoneQuantityType =\n \"CDEP Milestone # Months\";\n }\n this.setState({});\n // }\n }\n\n this.setState({});\n }\n\n addDetails = (values, resetForm) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.cdepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.cdepLogic.totalAmount) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.camDepositDetails[values.cdepLogic.camDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.cdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n console.log(previousAmount, currentAmount, balanceAmount);\n for (let i = 0; i < values.cdepLogic.milestones.length; i++) {\n if (this.state.period > 1) {\n values.cdepLogic.milestones[i].milestoneType = \"CDEP Percent\";\n this.setState({});\n }\n }\n }\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _camDepositDetails = this.state.camDepositDetails;\n values.cdepLogic.period = this.state.period;\n values.cdepLogic.fromDate = this.state.fromDate;\n values.cdepLogic.toDate = this.state.toDate;\n values.cdepLogic.periodTermYY = this.state.periodTermYY;\n values.cdepLogic.periodTermMM = this.state.periodTermMM;\n values.cdepLogic.periodTermDD = this.state.periodTermDD;\n\n if (_camDepositDetails[values.cdepLogic.camDepositNature] == undefined) {\n _camDepositDetails[values.cdepLogic.camDepositNature] = [];\n }\n _camDepositDetails[values.cdepLogic.camDepositNature].push({\n ...values.cdepLogic,\n });\n this.setState({\n camDepositDetails: _camDepositDetails,\n });\n\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.period++;\n values.cdepLogic.rate = \"\";\n this.state.milestonesCount = 1;\n this.state.milestones = [];\n values.cdepLogic.milestones = [];\n values.cdepLogic.escalationPercent = '';\n values.cdepLogic.totalAmount = '';\n\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n this.validator.hideMessages();\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n // this.state.milestones = [];\n } else {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.cdepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.cdepLogic.totalAmount) {\n // alert(\n // \"Total Amount of Milestones do not match with total amount of period\"\n // );\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n\n return false;\n }\n } else {\n var previousAmount =\n this.state.camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.camDepositDetails[values.cdepLogic.camDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.cdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n console.log(previousAmount, currentAmount, balanceAmount);\n for (let i = 0; i < values.cdepLogic.milestones.length; i++) {\n if (this.state.period > 1) {\n values.cdepLogic.milestones[i].milestoneType = \"CDEP Percent\";\n this.setState({});\n }\n }\n }\n\n if (this.state.toDate > values.to) {\n // alert(\"Enter a date less than \" + values.to);\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _camDepositDetails = this.state.camDepositDetails;\n values.cdepLogic.period = this.state.period;\n values.cdepLogic.fromDate = this.state.fromDate;\n values.cdepLogic.toDate = this.state.toDate;\n values.cdepLogic.periodTermYY = this.state.periodTermYY;\n values.cdepLogic.periodTermMM = this.state.periodTermMM;\n values.cdepLogic.periodTermDD = this.state.periodTermDD;\n\n if (_camDepositDetails[values.cdepLogic.camDepositNature] == undefined) {\n _camDepositDetails[values.cdepLogic.camDepositNature] = [];\n }\n _camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.currentIndex\n ] = { ...values.cdepLogic };\n\n _camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.currentIndex\n ].milestones = this.state.milestones;\n this.setState({\n camDepositDetails: _camDepositDetails,\n });\n\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.period++;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n // this.state.milestonesCount = 1;\n // resetForm();\n this.validator.hideMessages();\n // this.state.milestones = [];\n // values.cdepLogic.camDepositNature = \"\";\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n }\n };\n\n resetDetails = (values, resetForm) => {\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period = \"\";\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n values.cdepLogic.camDepositNature = \"\";\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n calculateCdepAmount(values, setFieldValue) {\n if (values.cdepLogic.rateUOM == \"Flat Amount\") {\n values.cdepLogic.totalAmount =\n Number(values.cdepLogic.rate) * Number(values.cdepLogic.months);\n setFieldValue(\n \"cdepLogic.totalAmount\",\n Number(values.cdepLogic.rate) * Number(values.cdepLogic.months)\n );\n } else if (\n values.cdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.cdepLogic.onArea == \"Carpet Area\"\n ) {\n values.cdepLogic.totalAmount =\n Number(values.cdepLogic.rate) *\n Number(values.totalCarpetArea) *\n Number(values.cdepLogic.months);\n setFieldValue(\n \"cdepLogic.totalAmount\",\n Number(values.cdepLogic.rate) *\n Number(values.totalCarpetArea) *\n Number(values.cdepLogic.months)\n );\n } else if (\n values.cdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.cdepLogic.onArea == \"Usable Area\"\n ) {\n values.cdepLogic.totalAmount =\n Number(values.cdepLogic.rate) *\n Number(values.totalUsableArea) *\n Number(values.cdepLogic.months);\n setFieldValue(\n \"cdepLogic.totalAmount\",\n Number(values.cdepLogic.rate) *\n Number(values.totalUsableArea) *\n Number(values.cdepLogic.months)\n );\n } else if (\n values.cdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.cdepLogic.onArea == \"Gross Leasable Area\"\n ) {\n values.cdepLogic.totalAmount =\n Number(values.cdepLogic.rate) *\n Number(values.totalGrossLeasableArea) *\n Number(values.cdepLogic.months);\n setFieldValue(\n \"cdepLogic.totalAmount\",\n Number(values.cdepLogic.rate) *\n Number(values.totalGrossLeasableArea) *\n Number(values.cdepLogic.months)\n );\n }\n if (this.state.period > 1) {\n this.calculateMilestoneAmount(1, values, 0);\n }\n if(values.cdepLogic.totalAmount > 0){\n this.calculateEscalationPercentage(values, setFieldValue, (values.cdepLogic.totalAmount/values.cdepLogic.months));\n }\n }\n\n calculateEscalationPercentage(values, setFieldValue, currentRecord) {\n if ( typeof this.state.camDepositDetails[values.cdepLogic.camDepositNature] != \"undefined\" && this.state.camDepositDetails[values.cdepLogic.camDepositNature].length > 0) {\n let count = this.state.camDepositDetails[values.cdepLogic.camDepositNature].length;\n let prevMonth = parseFloat(this.state.camDepositDetails[values.cdepLogic.camDepositNature][count - 1]['months']);\n let prevRecord = this.state.camDepositDetails[values.cdepLogic.camDepositNature][count - 1]['totalAmount']/prevMonth;\n let percent = ((currentRecord-prevRecord)/prevRecord)*100;\n setFieldValue(\n \"cdepLogic.escalationPercent\",\n (\n percent\n ).toFixed(2)\n );\n }\n }\n\n changeFieldName(e, id, values) {\n console.log(values);\n if (e.target.value == \"Due on Lease Commencement Date\") {\n this.state.milestones[id].dueDate = this.state.leaseCommencementDate;\n values.cdepLogic.milestones[id].dueDate =\n this.state.leaseCommencementDate;\n } else {\n this.state.milestones[id].dueDate = \"\";\n // values.cdepLogic.milestones[id].dueDate = \"\";\n }\n if (e.target.value.includes(\"Escalation\")) {\n this.state.milestones[id].milestoneQuantityType = \"CDEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType =\n \"CDEP Milestone # Months\";\n }\n }\n\n changeMilestonePercentName(e, id, values) {\n if (e.target.value == \"CDEP Months\") {\n this.state.milestones[id].milestoneQuantityType =\n \"CDEP Milestone # Months\";\n } else if (e.target.value == \"CDEP Percent\") {\n this.state.milestones[id].milestoneQuantityType = \"CDEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType = \"\";\n }\n\n\n if (e.target.value == \"CDEP Months\") {\n this.state.milestones[id].amount =\n (values.cdepLogic.totalAmount / values.cdepLogic.months) *\n Number(this.state.milestones[id].milestonePercent);\n values.cdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n } else if (e.target.value == \"CDEP Percent\") {\n var previousAmount = 0;\n if (\n this.state.camDepositDetails[values.cdepLogic.rentDepositNature] ==\n undefined\n ) {\n previousAmount = 0;\n } else {\n previousAmount =\n this.state.camDepositDetails[values.cdepLogic.rentDepositNature][\n this.state.camDepositDetails[values.cdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n }\n\n var currentAmount = values.cdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n this.state.milestones[id].amount =\n (balanceAmount / 100) * this.state.milestones[id].milestonePercent;\n values.cdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n }\n }\n\n calculateRentRate(e, values, setFieldValue) {\n console.log(values, \"values 672 \");\n console.log(this.state.camDepositDetails, \"cam details\")\n console.log(values.cdepLogic.camDepositNature, \"values.cdepLogic.camDepositNature\")\n\n\n if (e.target.value > 0 && typeof this.state.camDepositDetails[values.cdepLogic.camDepositNature] != \"undefined\" && this.state.camDepositDetails[values.cdepLogic.camDepositNature].length > 0) {\n let count = this.state.camDepositDetails[values.cdepLogic.camDepositNature].length;\n let prevMonth = parseFloat(this.state.camDepositDetails[values.cdepLogic.camDepositNature][count - 1]['months']);\n let prevRecord = this.state.camDepositDetails[values.cdepLogic.camDepositNature][count - 1]['totalAmount']/prevMonth;\nconsole.log(this.state.camDepositDetails[values.cdepLogic.camDepositNature][count - 1], \"chekcing\")\n let reviseTotalAmt = Number(prevRecord) + Number((prevRecord * e.target.value) / 100);\n\n console.log(prevRecord, \"==\", reviseTotalAmt)\n\n console.log(values.cdepLogic, \"new values\")\n\n let currentMonths = parseFloat(values.cdepLogic.months);\n\n let newRate = 0;\n if (values.cdepLogic.rateUOM == \"Per Sq Ft\" && values.cdepLogic.onArea == \"Gross Leasable Area\") {\n newRate = (reviseTotalAmt / values.totalGrossLeasableArea)\n } else if (values.cdepLogic.rateUOM == \"Per Sq Ft\" && values.cdepLogic.onArea == \"Usable Area\") {\n newRate = (reviseTotalAmt / values.totalUsableArea)\n } else if (values.cdepLogic.rateUOM == \"Per Sq Ft\" && values.cdepLogic.onArea == \"Carpet Area\") {\n newRate = (reviseTotalAmt / values.totalCarpetArea)\n } else {\n let rateVal = reviseTotalAmt - (reviseTotalAmt - prevRecord)\n newRate = rateVal + ((rateVal * e.target.value / 100))\n }\n\n setFieldValue(\n \"cdepLogic.rate\",\n (\n newRate\n ).toFixed(2)\n );\n\n setFieldValue(\n \"cdepLogic.totalAmount\",\n (\n reviseTotalAmt * currentMonths\n ).toFixed(2)\n );\n }\n }\n\n calculateMilestoneAmount(e, values, id) {\n if (this.state.period == \"1\") {\n if (values.cdepLogic.milestones[id].milestoneType == \"CDEP Months\") {\n this.state.milestones[id].amount =\n (values.cdepLogic.totalAmount / values.cdepLogic.months) *\n Number(this.state.milestones[id].milestonePercent);\n values.cdepLogic.milestones[id].amount =\n this.state.milestones[id].amount;\n } else {\n this.state.milestones[id].amount =\n (values.cdepLogic.totalAmount *\n Number(this.state.milestones[id].milestonePercent)) /\n 100;\n values.cdepLogic.milestones[id].amount =\n this.state.milestones[id].amount;\n }\n this.setState({});\n } else {\n var previousAmount =\n this.state.camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.camDepositDetails[values.cdepLogic.camDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.cdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n this.state.milestones[id].amount = (balanceAmount / 100) * 100;\n values.cdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n }\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _cdd = this.state.camDepositDetails;\n _cdd[this.state.keyvalue].splice(this.state.index_val, 1);\n this.setState({\n camDepositDetails: _cdd,\n showForm: true,\n });\n this.state.period--;\n this.setState({\n delete: false,\n index_val: \"\",\n keyvalue: \"\",\n });\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n milestoneTabs(handleChange, values) {\n var heads = [];\n for (var i = 0; i < this.state.milestonesCount; i++) {\n heads.push(\n
\n \n
\n \n
\n \n \n \n
\n \n
\n\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | Milestone Name | \nDue Date | \nRDEP Milestone | \nRDEP Milestone Amount (Rs.) | \n
|---|---|---|---|
| {name.milestoneName} | \n\n {/* {dateFormat(name.dueDate, \"dd mmm yyyy\")}{\" \"} */}\n {leaseDateFormat(name.dueDate)}\n | \n\n {name.milestonePercent}\n {name.milestoneType == \"RDEP Months\"\n ? \" Months\"\n : \" %\"}\n | \n{name.amount} | \n
\n
\n \n {/* Milestone Name */}\n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneName = e.target.value;\n this.changeFieldName(e, id, values);\n handleChange(e);\n }}\n >\n \n {this.state.milestoneNamesValues.map((item) => (\n \n ))}\n \n {this.validator.message(\n \"Milestone Name\",\n this.state.milestones[i].milestoneName,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n {/* Due Date */}\n \n
\n\n {this.state.period == \"1\" && (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].dueDate = e.target.value;\n handleChange(e);\n }}\n />\n {this.validator.message(\n \"Due Date\",\n this.state.milestones[i].dueDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n {/* Milestone Type */}\n \n
\n )}\n\n {this.state.milestones[i].milestoneType != \"Flat Amount\" && (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneType = e.target.value;\n this.changeMilestonePercentName(e, id, values);\n handleChange(e);\n }}\n >\n \n \n \n \n \n {this.validator.message(\n \"Milestone Type\",\n this.state.milestones[i].milestoneType,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n {/* Milestone Percent or Amount */}\n \n
\n )}\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestonePercent = e.target.value;\n handleChange(e);\n }}\n onBlur={(e) => {\n var id = e.target.getAttribute(\"param\");\n this.calculateMilestoneAmount(e, values, id);\n }}\n />\n
\n \n {/* Milestone Amount */}\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].amount = e.target.value;\n handleChange(e);\n }}\n />\n
\n \n \n {heads} \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n {body}
\n \n
\n \n {\n values.camDepositApplicable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n this.applicableValidator.showMessages();\n return false;\n }\n // if (this.state.camDepositDetails.length == 0) {\n // this.mainFormValidator.showMessages(\"countError\");\n // return false;\n // }\n let count = 0;\n for (var key in this.state.camDepositDetails) {\n count = 1;\n break;\n }\n if (count == 0 && this.state.applicableValue !== \"no\") {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n var camDepositDetails = { ...this.state.camDepositDetails };\n values.camDepositDetails = camDepositDetails;\n console.log(this.state.camDepositDetails, \"pp\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-cam-deposit-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Security Deposit Details \n
- \n CAM Deposit Details\n \n
\n \n
\n {/* \n \n
*/}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen &&\n this.camDepositDetailPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Cam Deposit Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default withRouter(CAMDepositDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport {\n electricityLoadDeposit,\n airConditioingLoadDeposit,\n meterDeposit,\n gasBasisUnitsGasBank,\n storageFitoutDeposit,\n} from \"../../constants\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n periodOneMileStoneNames,\n periodOtherMilestoneNames,\n} from \"../../constants\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass OtherDepositDetails extends React.Component {\n countError = \"\";\n state = {\n odepMilestonePercent: 100,\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n applicableValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n keyvalue: \"\",\n leaseCommencementDate: \"\",\n popupData: {},\n isOpen: false,\n milestoneMonths: \"ODEP Milestone # Months\",\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n milestonesCount: 1,\n milestones: [],\n milestoneNamesValues: [],\n depositRateUomValues: [],\n initialValues: {\n odepLogic: {\n milestones: [],\n period: \"\",\n otherDepositName: \"\",\n depositNature: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n uom: \"\",\n onArea: \"\",\n milestonesCount: 0,\n onUnits: \"\",\n amount: \"\",\n rate: \"\",\n other_deposit_type: \"\",\n },\n },\n otherDepositDetails: [],\n toggleOdForm: false,\n toggleOnUnit: true,\n toggleStorage: false,\n showArea: false,\n showOnArea: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n showOdForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\") {\n this.setState({\n toggleOdForm: true,\n });\n } else {\n this.setState({\n toggleOdForm: false,\n });\n }\n };\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n\n let athis = this;\n axios({\n url:`${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-deposit-details?id=${this.props.match.params.id}`,\n method: 'GET',\n }).then(function(response){\n let data = response.data;\n\n athis.state.applicableValue = data.otherDepositApplicable;\n athis.state.fromDate = data.from;\n athis.state.leaseCommencementDate = data.lcd;\n athis.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n athis.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n athis.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n if (data.otherDepositDetails.length > 0) {\n // let _tempDate = new Date(\n // data.otherDepositDetails[data.otherDepositDetails.length - 1].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.otherDepositDetails[data.otherDepositDetails.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.otherDepositApplicable === \"yes\") {\n athis.setState({\n toggleOdForm: true,\n });\n } else {\n athis.setState({\n toggleOdForm: false,\n });\n }\n athis.setState({\n initialValues: data,\n otherDepositDetails: data.otherDepositDetails,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n notes_13: data.notes_13,\n period:\n data.otherDepositDetails.length > 0\n ? data.otherDepositDetails.length + 1\n : 1,\n });\n var _intialValues = athis.state.initialValues;\n _intialValues.odepLogic = {\n milestones: [\n {\n dueDate: \"\",\n milestoneName: \"\",\n amount: \"\",\n milestonePercent: \"\",\n },\n ],\n period: \"\",\n otherDepositName: \"\",\n depositNature: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n uom: \"\",\n onArea: \"\",\n milestonesCount: 0,\n onUnits: \"\",\n amount: \"\",\n rate: \"\",\n };\n athis.setState({\n initialValues: _intialValues,\n });\n if (\n data.otherDepositDetails[data.otherDepositDetails.length - 1]\n .toDate == data.to\n ) {\n athis.setState({\n showForm: false,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-deposit-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.applicableValue = data.otherDepositApplicable;\n // this.state.fromDate = data.from;\n // this.state.leaseCommencementDate = data.lcd;\n // this.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n // this.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n // this.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n // if (data.otherDepositDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.otherDepositDetails[data.otherDepositDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.otherDepositDetails[data.otherDepositDetails.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.otherDepositApplicable === \"yes\") {\n // this.setState({\n // toggleOdForm: true,\n // });\n // } else {\n // this.setState({\n // toggleOdForm: false,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // otherDepositDetails: data.otherDepositDetails,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // notes_13: data.notes_13,\n // period:\n // data.otherDepositDetails.length > 0\n // ? data.otherDepositDetails.length + 1\n // : 1,\n // });\n // var _intialValues = this.state.initialValues;\n // _intialValues.odepLogic = {\n // milestones: [\n // {\n // dueDate: \"\",\n // milestoneName: \"\",\n // amount: \"\",\n // milestonePercent: \"\",\n // },\n // ],\n // period: \"\",\n // otherDepositName: \"\",\n // depositNature: \"\",\n // fromDate: \"\",\n // toDate: \"\",\n // rateUOM: \"\",\n // uom: \"\",\n // onArea: \"\",\n // milestonesCount: 0,\n // onUnits: \"\",\n // amount: \"\",\n // rate: \"\",\n // };\n // this.setState({\n // initialValues: _intialValues,\n // });\n // if (\n // data.otherDepositDetails[data.otherDepositDetails.length - 1]\n // .toDate == data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n getDepositName(e, values, setFieldValue) {\n if (\n this.state.otherDepositDetails[e.target.value] !== undefined &&\n this.state.otherDepositDetails[e.target.value].length > 0 &&\n this.state.otherDepositDetails[e.target.value][\n this.state.otherDepositDetails[e.target.value].length - 1\n ].toDate == values.to\n ) {\n setFieldValue(\"odepLogic.rentDepositNature\", \"\");\n // alert(\"Values For this type has completed the period\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n if (\n e.target.value === \"Storage Deposit\" ||\n e.target.value === \"Fitout Deposit\" ||\n e.target.value === \"Other\"\n ) {\n this.setState({ toggleOnUnit: false, toggleStorage: true });\n } else {\n this.setState({ toggleOnUnit: true, toggleStorage: false });\n }\n if (e.target.value === \"Storage Deposit\") {\n this.setState({ showArea: true });\n } else {\n this.setState({ showArea: false });\n }\n if (e.target.value === \"Fitout Deposit\") {\n this.setState({ showOnArea: true });\n } else {\n this.setState({ showOnArea: false });\n }\n if (\n e.target.value === \"Electricity Load Deposit – Refundable\" ||\n e.target.value == \"Electricity Load Deposit – Non Refundable\"\n ) {\n this.setState({\n depositRateUomValues: electricityLoadDeposit,\n });\n } else if (\n e.target.value === \"GAS / PNG Connection Deposit\" ||\n e.target.value === \"GAS / PNG Meter\"\n ) {\n this.setState({\n depositRateUomValues: gasBasisUnitsGasBank,\n });\n } else if (\n e.target.value === \"Electricity Meter Deposit\" ||\n e.target.value === \"Water Meter Deposit\" ||\n e.target.value === \"Air Conditioning Meter Deposit\"\n ) {\n this.setState({\n depositRateUomValues: meterDeposit,\n });\n } else if (e.target.value === \"Air Conditioing Load Deposit\") {\n this.setState({\n depositRateUomValues: airConditioingLoadDeposit,\n });\n } else if (\n e.target.value === \"Fitout Deposit\" ||\n e.target.value === \"Other\"\n ) {\n this.setState({\n depositRateUomValues: storageFitoutDeposit,\n });\n } else if (e.target.value === \"Storage Deposit\") {\n this.setState({\n depositRateUomValues: storageFitoutDeposit,\n });\n } else {\n this.setState({\n depositRateUomValues: [],\n });\n }\n var _otherDepositDetails = this.state.otherDepositDetails;\n if (\n _otherDepositDetails[e.target.value] == undefined ||\n _otherDepositDetails[e.target.value].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _otherDepositDetails[e.target.value][\n _otherDepositDetails[e.target.value].length - 1\n ].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period =\n this.state.otherDepositDetails[e.target.value].length + 1;\n // values.odepLogic.period =\n // this.state.otherDepositDetails[e.target.value].length + 1;\n }\n this.setState({});\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n milestoneMonths: \"ODEP Milestone %\",\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n milestoneMonths: \"ODEP Milestone %\",\n });\n }\n return true;\n }\n\n editOd(index, values, key) {\n console.log(this.state.otherDepositDetails[key][index]);\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n this.state.period = this.state.otherDepositDetails[key][index].period;\n if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Storage Deposit\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Fitout Deposit\"\n ) {\n this.setState({ toggleOnUnit: false, toggleStorage: true });\n } else {\n this.setState({ toggleOnUnit: true, toggleStorage: false });\n }\n if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Storage Deposit\"\n ) {\n this.setState({ showArea: true });\n } else {\n this.setState({ showArea: false });\n }\n if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Fitout Deposit\"\n ) {\n this.setState({ showOnArea: true });\n } else {\n this.setState({ showOnArea: false });\n }\n if (this.state.otherDepositDetails[key][index].period === 1) {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.otherDepositDetails[key][index].periodTermDD,\n periodTermMM: this.state.otherDepositDetails[key][index].periodTermMM,\n periodTermYY: this.state.otherDepositDetails[key][index].periodTermYY,\n });\n this.state.milestonesCount =\n this.state.otherDepositDetails[key][index].milestones.length;\n this.state.fromDate = this.state.otherDepositDetails[key][index].fromDate;\n this.state.toDate = this.state.otherDepositDetails[key][index].toDate;\n values.odepLogic.otherDepositName =\n this.state.otherDepositDetails[key][index].otherDepositName;\n values.odepLogic.depositNature =\n this.state.otherDepositDetails[key][index].depositNature;\n values.odepLogic.months = this.state.otherDepositDetails[key][index].months;\n\n values.odepLogic.onUnits =\n this.state.otherDepositDetails[key][index].onUnits;\n values.odepLogic.amount = this.state.otherDepositDetails[key][index].amount;\n values.odepLogic.rate = this.state.otherDepositDetails[key][index].rate;\n values.odepLogic.totalAmount =\n this.state.otherDepositDetails[key][index].totalAmount;\n if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Electricity Load Deposit – Refundable\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ==\n \"Electricity Load Deposit – Non Refundable\"\n ) {\n this.setState({\n depositRateUomValues: electricityLoadDeposit,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"GAS / PNG Connection Deposit\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"GAS / PNG Meter\"\n ) {\n this.setState({\n depositRateUomValues: gasBasisUnitsGasBank,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Electricity Meter Deposit\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Water Meter Deposit\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Air Conditioning Meter Deposit\"\n ) {\n this.setState({\n depositRateUomValues: meterDeposit,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Air Conditioing Load Deposit\"\n ) {\n this.setState({\n depositRateUomValues: airConditioingLoadDeposit,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Fitout Deposit\"\n ) {\n this.setState({\n depositRateUomValues: storageFitoutDeposit,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Storage Deposit\"\n ) {\n this.setState({\n depositRateUomValues: storageFitoutDeposit,\n });\n } else {\n this.setState({\n depositRateUomValues: [],\n });\n }\n values.odepLogic.rateUOM =\n this.state.otherDepositDetails[key][index].rateUOM;\n values.odepLogic.area = this.state.otherDepositDetails[key][index].area;\n values.odepLogic.onArea = this.state.otherDepositDetails[key][index].onArea;\n values.odepLogic.monthsCount =\n this.state.otherDepositDetails[key][index].monthsCount;\n for (\n let i = 0;\n i < this.state.otherDepositDetails[key][index].milestones.length;\n i++\n ) {\n // if (this.state.milestones === undefined) {\n this.state.milestones[i] = {};\n values.odepLogic.milestones[i] = {};\n this.state.milestones[i].milestoneName =\n this.state.otherDepositDetails[key][index].milestones[i].milestoneName;\n values.odepLogic.milestones[i].milestoneName =\n this.state.otherDepositDetails[key][index].milestones[i].milestoneName;\n this.state.milestones[i].dueDate =\n this.state.otherDepositDetails[key][index].milestones[i].dueDate;\n values.odepLogic.milestones[i].dueDate =\n this.state.otherDepositDetails[key][index].milestones[i].dueDate;\n this.state.milestones[i].milestonePercent =\n this.state.otherDepositDetails[key][index].milestones[\n i\n ].milestonePercent;\n values.odepLogic.milestones[i].milestonePercent =\n this.state.otherDepositDetails[key][index].milestones[\n i\n ].milestonePercent;\n this.state.milestones[i].amount =\n this.state.otherDepositDetails[key][index].milestones[i].amount;\n values.odepLogic.milestones[i].amount =\n this.state.otherDepositDetails[key][index].milestones[i].amount;\n if (\n this.state.otherDepositDetails[key][index].milestones[\n i\n ].milestoneName.includes(\"Escalation\")\n ) {\n this.state.milestones[i].milestoneQuantityType = \"ODEP Milestone %\";\n values.odepLogic.milestones[i].milestoneQuantityType =\n \"ODEP Milestone %\";\n } else {\n this.state.milestones[i].milestoneQuantityType =\n \"ODEP Milestone # Months\";\n values.odepLogic.milestones[i].milestoneQuantityType =\n \"ODEP Milestone # Months\";\n }\n this.setState({});\n // }\n }\n\n this.setState({});\n }\n\n addDetails = (values, resetForm) => {\n if (this.state.currentIndex === null) {\n if (this.state.period > 1) {\n this.state.milestones[0].milestonePercent = 100;\n values.odepLogic.milestones[0].milestonePercent = 100;\n this.setState({});\n }\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < this.state.milestones.length; i++) {\n console.log(this.state.milestones);\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.odepLogic.amount) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.otherDepositDetails[values.odepLogic.otherDepositName]\n .length - 1\n ].amount;\n var currentAmount = values.odepLogic.amount;\n var balanceAmount = currentAmount - previousAmount;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _otherDepositDetails = this.state.otherDepositDetails;\n values.odepLogic.period = this.state.period;\n values.odepLogic.fromDate = this.state.fromDate;\n values.odepLogic.toDate = this.state.toDate;\n values.odepLogic.periodTermYY = this.state.periodTermYY;\n values.odepLogic.periodTermMM = this.state.periodTermMM;\n values.odepLogic.periodTermDD = this.state.periodTermDD;\n if (\n _otherDepositDetails[values.odepLogic.otherDepositName] == undefined\n ) {\n _otherDepositDetails[values.odepLogic.otherDepositName] = [];\n }\n _otherDepositDetails[values.odepLogic.otherDepositName].push({\n ...values.odepLogic,\n });\n this.setState({\n otherDepositDetails: _otherDepositDetails,\n });\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period++;\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n } else {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.odepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.odepLogic.amount) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.otherDepositDetails[values.odepLogic.otherDepositName]\n .length - 1\n ].amount;\n var currentAmount = values.odepLogic.amount;\n var balanceAmount = currentAmount - previousAmount;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _otherDepositDetails = this.state.otherDepositDetails;\n values.odepLogic.period = this.state.period;\n values.odepLogic.fromDate = this.state.fromDate;\n values.odepLogic.toDate = this.state.toDate;\n values.odepLogic.periodTermYY = this.state.periodTermYY;\n values.odepLogic.periodTermMM = this.state.periodTermMM;\n values.odepLogic.periodTermDD = this.state.periodTermDD;\n console.log(this.state.otherDepositDetails);\n if (\n _otherDepositDetails[values.odepLogic.otherDepositName] == undefined\n ) {\n _otherDepositDetails[values.odepLogic.otherDepositName] = [];\n }\n _otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.currentIndex\n ] = { ...values.odepLogic };\n _otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.currentIndex\n ].milestones = this.state.milestones;\n this.setState({\n otherDepositDetails: _otherDepositDetails,\n });\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period = \"\";\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n }\n };\n\n resetDetails = (values, resetForm) => {\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period = \"\";\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n };\n\n calculateDepositAmount(values) {\n if (values.odepLogic.otherDepositName === \"Storage Deposit\") {\n if (values.odepLogic.rateUOM === \"Flat rate\") {\n console.log(\"111\");\n values.odepLogic.amount =\n Number(values.odepLogic.rate) * Number(values.odepLogic.monthsCount);\n this.setState({});\n } else {\n values.odepLogic.amount =\n Number(values.odepLogic.rate) *\n Number(values.odepLogic.area) *\n Number(values.odepLogic.monthsCount);\n this.setState({});\n }\n } else if (values.odepLogic.otherDepositName === \"Fitout Deposit\") {\n console.log(\"111\");\n if (values.odepLogic.onArea === \"Carpet Area\") {\n values.odepLogic.amount =\n Number(values.odepLogic.rate) *\n values.totalCarpetArea *\n Number(values.odepLogic.monthsCount);\n this.setState({});\n } else if (values.odepLogic.onArea === \"Usable Area\") {\n values.odepLogic.amount =\n Number(values.odepLogic.rate) *\n values.totalUsableArea *\n Number(values.odepLogic.monthsCount);\n this.setState({});\n } else if (values.odepLogic.onArea === \"Gross Leasable Area\") {\n values.odepLogic.amount =\n Number(values.odepLogic.rate) *\n values.totalGrossLeasableArea *\n Number(values.odepLogic.monthsCount);\n this.setState({});\n } else {\n values.odepLogic.amount =\n values.odepLogic.rate * values.odepLogic.monthsCount;\n this.setState({});\n }\n } else if (values.odepLogic.otherDepositName === \"Other\") {\n if (values.odepLogic.rate != \"\" && values.odepLogic.monthsCount != \"\") {\n values.odepLogic.amount =\n values.odepLogic.rate * values.odepLogic.monthsCount;\n this.setState({});\n }\n } else {\n values.odepLogic.amount =\n values.odepLogic.rate * values.odepLogic.onUnits;\n this.setState({});\n }\n if (this.state.period > 1) {\n this.calculateMilestoneAmount(1, values, 0);\n }\n }\n\n changeFieldName(e, id, values) {\n if (e.target.value == \"Due on Lease Commencement Date\") {\n this.state.milestones[id].dueDate = this.state.leaseCommencementDate;\n values.odepLogic.milestones[id].dueDate =\n this.state.leaseCommencementDate;\n } else {\n this.state.milestones[id].dueDate = \"\";\n values.odepLogic.milestones[id].dueDate = \"\";\n }\n if (e.target.value.includes(\"Escalation\")) {\n this.state.milestones[id].milestoneQuantityType = \"ODEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType =\n \"ODEP Milestone # Months\";\n }\n }\n\n calculateMilestoneAmount(e, values, id) {\n if (this.state.period === 1) {\n var previousAmount = 0;\n var currentAmount = values.odepLogic.amount;\n var balanceAmount = currentAmount - previousAmount;\n console.log(previousAmount, currentAmount, balanceAmount);\n this.state.milestones[id].amount =\n (balanceAmount / 100) * this.state.milestones[id].milestonePercent;\n values.odepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n } else {\n var previousAmount =\n this.state.otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.otherDepositDetails[values.odepLogic.otherDepositName]\n .length - 1\n ].amount;\n var currentAmount = values.odepLogic.amount;\n var balanceAmount = currentAmount - previousAmount;\n this.state.milestones[id].amount = (balanceAmount / 100) * 100;\n values.odepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n }\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _odd = this.state.otherDepositDetails;\n _odd[this.state.keyvalue].splice(this.state.index_val, 1);\n this.setState({\n otherDepositDetails: _odd,\n showForm: true,\n });\n this.state.period--;\n this.setState({\n delete: false,\n index_val: \"\",\n keyvalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n milestoneTabs(handleChange, values) {\n var heads = [];\n for (var i = 0; i < this.state.milestonesCount; i++) {\n heads.push(\n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | Milestone Name | \nDue Date | \nRDEP Milestone | \nRDEP Milestone Amount (Rs.) | \n
|---|---|---|---|
| {name.milestoneName} | \n\n {/* {dateFormat(name.dueDate, \"dd mmm yyyy\")} */}\n {leaseDateFormat(name.dueDate)}\n | \n\n {name.milestonePercent}\n {name.milestoneType == \"CDEP Months\"\n ? \" Months\"\n : \" %\"}\n | \n{name.amount} | \n
\n\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneName = e.target.value;\n this.changeFieldName(e, id, values);\n handleChange(e);\n }}\n >\n \n {this.state.milestoneNamesValues.map((item, i) => (\n \n ))}\n \n {this.validator.message(\n \"Milestone Name\",\n this.state.milestones[i].milestoneName,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].dueDate = e.target.value;\n handleChange(e);\n }}\n >\n {this.validator.message(\n \"Due Date\",\n this.state.milestones[i].dueDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestonePercent = e.target.value;\n handleChange(e);\n }}\n onBlur={(e) => {\n var id = e.target.getAttribute(\"param\");\n this.calculateMilestoneAmount(e, values, id);\n }}\n />\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].amount = e.target.value;\n handleChange(e);\n }}\n />\n
\n \n \n {heads} \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n {body}
\n \n
\n \n {\n values.otherDepositApplicable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n this.applicableValidator.showMessages();\n return false;\n }\n // if (this.state.otherDepositDetails.length == 0) {\n // this.mainFormValidator.showMessages(\"countError\");\n // return false;\n // }\n let count = 0;\n for (var key in this.state.otherDepositDetails) {\n count = 1;\n break;\n }\n if (count == 0 && this.state.applicableValue !== \"no\") {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n var otherDepositDetails = { ...this.state.otherDepositDetails };\n values.otherDepositDetails = otherDepositDetails;\n console.log(values, \"gg\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-other-deposit-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Security Deposit Details \n
- \n Other Deposit Details\n \n
\n \n
\n {/* \n \n
*/}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen &&\n this.otherDepositDetailPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Other Deposit Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default withRouter(OtherDepositDetails);\n","import React, { useState } from \"react\";\nimport { Document, Page, pdfjs } from \"react-pdf\";\npdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;\n\nfunction PdfReader({ url, pageNumber }) {\n const [numPages, setNumPages] = useState(null);\n const [pageNumberView, setPageNumber] = useState(pageNumber);\n\n function onDocumentLoadSuccess({ numPages }) {\n setNumPages(numPages);\n if (pageNumberView < numPages) {\n setPageNumber(pageNumberView);\n }\n }\n function changePage(offset) {\n console.log(Number(pageNumberView) + offset);\n setPageNumber((pageNumberView) => Number(pageNumberView) + offset);\n }\n\n function previousPage() {\n changePage(-1);\n }\n\n function nextPage() {\n changePage(1);\n }\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rent.otherDepositName !== \"Storage Deposit\" &&\n rent.otherDepositName !== \"Fitout Deposit\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {rent.otherDepositName === \"Storage Deposit\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {rent.rateUOM === \"Per Sq.ft\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {rent.otherDepositName === \"Fitout Deposit\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | Milestone Name | \nDue Date | \nRDEP Milestone | \nRDEP Milestone Amount (Rs.) | \n
|---|---|---|---|
| {name.milestoneName} | \n\n {/* {dateFormat(name.dueDate, \"dd mmm yyyy\")}{\" \"} */}\n {leaseDateFormat(name.dueDate)}\n | \n{name.milestonePercent} | \n{name.amount} | \n
\n {/* \n \n \n \n \n Previous\n \n = numPages}\n onClick={nextPage}\n >\n Next\n \n
\n );\n}\nexport { PdfReader };\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { PdfReader } from \"../../utils/DocumentViewer\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass CommercialClauses extends React.Component {\n countError = \"\";\n state = {\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n leaseUploadDocumentDate: \"\",\n redirect: false,\n isOpen: false,\n pageNo: \"\",\n documentUrl: \"\",\n commercialClausesDetails: [],\n commercialClauses: [],\n uploadedDocuments: [],\n uploadedDocumentNames: [],\n currentDocument: \"\",\n popupContentType: \"pdf\",\n popupContentTypeDescription: \"\",\n initialValues: {\n commercialDetails: {\n clauseName: \"\",\n details: \"\",\n documentName: \"\",\n pageNo: \"\",\n },\n },\n };\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n constructor(props) {\n super(props);\n\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/commercial-clause/get-clauses`,{headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n commercialClauses: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n\n let athis = this;\n axios({\n url: `${apiUrl.apiUrl.url}/create-lease/fetch-lease-commercial-clauses-details?id=${this.props.match.params.id}`,\n method: \"GET\",\n }).then(function(response){\n let data = response.data;\n for (let i = 0; i < data.commercialClausesDetails.length; i++) {\n const index = athis.state.commercialClauses.findIndex(\n (x) => x.clause_name === data.commercialClausesDetails[i].clauseName\n );\n console.log(index);\n if (index > -1) {\n athis.state.commercialClauses.splice(index, 1);\n }\n }\n for (let i = 0; i < data.lease_documents.length; i++) {\n athis.state.uploadedDocumentNames.push(\n data.lease_documents[i].leaseDocumentType + \"(\"+ data.lease_documents[i].leaseUploadDocumentDate +\")\"\n );\n }\n athis.setState({\n initialValues: data,\n commercialClausesDetails: data.commercialClausesDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n notes_14: data.notes_14,\n documentUrl: data.url,\n pageNo: data.commercialClausesDetails.pageNo,\n leaseUploadDocumentDate: data.leaseUploadDocumentDate,\n uploadedDocuments: data.lease_documents,\n });\n var _intialValues = athis.state.initialValues;\n _intialValues.commercialDetails = {\n clauseName: \"\",\n details: \"\",\n documentName: \"\",\n pageNo: \"\",\n };\n\n athis.setState({\n initialValues: _intialValues,\n });\n }); \n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-commercial-clauses-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // console.log(data);\n // for (let i = 0; i < data.commercialClausesDetails.length; i++) {\n // const index = this.state.commercialClauses.findIndex(\n // (x) => x.clause_name === data.commercialClausesDetails[i].clauseName\n // );\n // console.log(index);\n // if (index > -1) {\n // this.state.commercialClauses.splice(index, 1);\n // }\n // }\n // for (let i = 0; i < data.lease_documents.length; i++) {\n // this.state.uploadedDocumentNames.push(\n // data.lease_documents[i].leaseDocumentType + \"(\"+ data.lease_documents[i].leaseUploadDocumentDate +\")\"\n // );\n // }\n // this.setState({\n // initialValues: data,\n // commercialClausesDetails: data.commercialClausesDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // notes_14: data.notes_14,\n // documentUrl: data.url,\n // pageNo: data.commercialClausesDetails.pageNo,\n // leaseUploadDocumentDate: data.leaseUploadDocumentDate,\n // uploadedDocuments: data.lease_documents,\n // });\n // var _intialValues = this.state.initialValues;\n // _intialValues.commercialDetails = {\n // clauseName: \"\",\n // details: \"\",\n // documentName: \"\",\n // pageNo: \"\",\n // };\n\n // this.setState({\n // initialValues: _intialValues,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n showDocumentDate(docType) {\n let obj = this.state.uploadedDocuments.find(\n (o) => o.leaseDocumentUrl === docType\n );\n if (obj !== undefined) {\n return leaseDateFormat(obj.leaseUploadDocumentDate);\n } else {\n return \"\";\n }\n }\n\n formatDate(date) {\n return leaseDateFormat(date);\n }\n\n addCommercialDetails = (values) => {\n //resetForm();\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n\n let docSelected = this.state.uploadedDocuments.find((obj) => obj.leaseDocumentUrl === values.commercialDetails.document )\n\n //console.log(docSelected, \"doc selected..\") \n values.commercialDetails.document = docSelected.leaseDocumentType; \n values.commercialDetails.documentUrl = docSelected.leaseDocumentUrl; \n console.log(values.commercialDetails, \"==== wel wlw\")\n\n var _commercialClausesDetails = this.state.commercialClausesDetails;\n console.log(_commercialClausesDetails, \"_commercialClausesDetails\" )\n _commercialClausesDetails.push(values.commercialDetails);\n console.log(_commercialClausesDetails, \"needed\");\n this.setState({\n commercialClausesDetails: _commercialClausesDetails,\n });\n const index = this.state.commercialClauses.findIndex(\n (x) => x.clause_name === values.commercialDetails.clauseName\n );\n console.log(index);\n if (index > -1) {\n console.log(\"inn\");\n this.state.commercialClauses.splice(index, 1);\n }\n this.setState({});\n\n return true;\n };\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false, });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return (\n \n Page {pageNumber} of {numPages}\n
*/}\n\n Page {pageNumberView} of {numPages}\n
\n\n
\n \n {\n if (this.state.commercialClausesDetails.length == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n values.commercialClausesDetails =\n this.state.commercialClausesDetails;\n console.log(values, \"gg\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-commercial-clauses-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n resetForm,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Critical Clause \n
- \n Commercial Clauses\n \n
\n \n
\n \n )}\n \n \n
\n \n {\n if (this.state.otherClausesDetails.length == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n values.otherClausesDetails = this.state.otherClausesDetails;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-other-clauses-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n resetForm,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Critical Clause \n
- \n Other Clauses\n \n
\n \n
\n\n \n \n )}\n \n \n
\n \n );\n }\n}\n\nexport default withRouter(UploadDocument);\n","import React, { useState, useEffect } from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCommentDots } from \"@fortawesome/free-solid-svg-icons\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport apiUrl from \"../apiUrlConstant\";\n\nvar headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LeaseDetailsPopup extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n IsModalOpened: this.props.IsModalOpened,\n onCloseModal: this.props.onCloseModal,\n leaseId: this.props.leaseId,\n costCenter:this.props.costCenter,\n leaseData: {},\n popupHeading: \"\",\n };\n }\n componentDidMount() {\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/lease-details-view?leaseId=${this.state.leaseId}`, \n {\n method: \"GET\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n },\n }\n ).then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseData: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n amendNumber(str) {\n return str.split(\"-\").pop();\n }\n setPopupHeading() {\n if (\n this.state.leaseData.type == \"\" ||\n this.state.leaseData.type == \"original\"\n ) {\n return \"Create Lease\";\n } else if (this.state.leaseData.type == \"amend\") {\n return \"Amend Lease\";\n } else if (this.state.leaseData.type == \"extend\") {\n return \"Extend Lease\";\n } else if (this.state.leaseData.type == \"renew\") {\n return \"Renew Lease\";\n } else if (this.state.leaseData.type == \"terminate\") {\n return \"Terminate Lease\";\n } else {\n return \"Create Lease\";\n }\n }\n render() {\n return (\n \n {\n\n this.formikProps = actions;\n\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n values.leaseDocumentUrl =\n fileUploadPath() +\n this.props.match.params.id +\n \"/\" +\n this.state.fileName;\n console.log(values);\n var self = this;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Critical Clause \n
- \n Upload Document\n \n
\n \n
\n \n )}\n \n \n
\n );\n }\n}\n\nexport default withRouter(LeaseDetailsPopup);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faUserCircle,\n faSignOutAlt,\n faFileAlt,\n faCalendarAlt,\n faClock,\n faRupeeSign,\n faChartLine,\n faVectorSquare,\n faBuilding,\n faExpandAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport TopHeader from \"../../layout/TopHeader\";\nimport { ChartPopup } from \"../../utils/utils\";\nimport { fileUploadPath } from \"../../utils/index\";\nvar ReactS3Uploader = require(\"react-s3-uploader\");\nclass AmendLeaseView extends React.Component {\n state = {\n redirect: false,\n leaseId: this.props.leaseId,\n leaseCode: this.props.leaseCode,\n costCenter: this.props.costCenter,\n\n amendMenus: this.props.amendMenus,\n amendleaseId: '',\n fileName: \"-Amend-Doc.pdf\",\n };\n style = (feature) => {\n return {\n fillColor: \"#ccc\",\n weight: 1,\n opacity: 1,\n color: \"#003970\",\n dashArray: \"2\",\n fillOpacity: 0.5,\n };\n };\n constructor(props) {\n super(props);\n }\n\n componentDidMount() {\n }\n\n onUploadError() {\n this.setState({\n messsagePopup: true,\n popupContent: \"Something Went Wrong!\"\n });\n // alert(\"Something Went Wrong\");\n }\n\n hidePopup() {\n this.props.setShow(false);\n }\n\n onUploadFinish = (e) => {\n var values = {\n leaseDocument: {\n leaseDocumentType: \"Amend Document\",\n leaseUploadDocumentDate: \"2022-05-05\",\n leaseDocumentUrl:\n fileUploadPath() +\n this.state.leaseId +\n \"/\" +\n this.state.fileName,\n },\n };\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/upload-document?lease_id=${this.state.amendleaseId}`,\n\n data: values,\n }).then(function (response) {\n console.log(response.data.data);\n if (!response.data.success) {\n } else {\n self.state.documentTable = response.data.data;\n self.setState({});\n }\n });\n this.setState({\n messsagePopup: true,\n popupContent: \"File Successfully Uploaded\"\n });\n // alert(\"File Successfully Uploaded\");\n };\n handleUpload() {\n //this.uploader.uploadFile();\n // const index = this.state.documentNames.indexOf(\n // this.state.initialValues.leaseDocumentType\n // );\n // if (index > -1) {\n // this.state.documentNames.splice(index, 1);\n // }\n // this.state.showUploadDocument = false;\n // this.setState({});\n }\n\n render() {\n return (\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n - \n
- Activity: {this.setPopupHeading()} \n
\n \n {this.state.leaseData.type == \"\" && (\n \n
\n
\n | Activity | \nCreate Lease | \n
|---|---|
| Lease Number | \n{this.state.leaseData.lease_code} | \n
| cost CEnter | \n{this.state.leaseData.cost_center} | \n
| Lease Created By | \n{this.state.leaseData.created_by} | \n
| Lease Creation Date & Time | \n{this.state.leaseData.created_at} | \n
| Lease Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Submitted Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Approval Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nCreate Lease | \n
| Lease Number | \n{this.state.leaseData.lease_code} | \n
| Lease Created By | \n{this.state.leaseData.created_by} | \n
| Lease Creation Date & Time | \n{this.state.leaseData.created_at} | \n
| Lease Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Submitted Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Approval Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nAmend Lease | \n
| Amendment No | \n\n {this.amendNumber(this.state.leaseData.lease_code)}\n | \n
| Original Lease Number | \n{this.state.leaseData.original_code} | \n
| Amended Lease No | \n{this.state.leaseData.lease_code} | \n
| Lease Amended By | \n{this.state.leaseData.created_by} | \n
| Lease Amend Date & Time | \n{this.state.leaseData.created_at} | \n
| Amended Screen {index + 1} | \n{name} | \n
| Lease Amend Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Amend Submit Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Amend Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Amend Approved Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nExtend Lease | \n
| Extension No | \n{this.state.leaseData.lease_code} | \n
| Original Lease Number | \n{this.state.leaseData.original_code} | \n
| Extended Lease No | \n{this.state.leaseData.lease_code} | \n
| Lease Extended By | \n{this.state.leaseData.created_by} | \n
| Lease Extension Date & Time | \n{this.state.leaseData.created_at} | \n
| Lease Extend Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Extend Submit Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Extend Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Extend Approved Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nRenew Lease | \n
| Renewal No | \n{this.state.leaseData.lease_code} | \n
| Original Lease Number | \n{this.state.original_code} | \n
| Renewed Lease No | \n{this.state.leaseData.lease_code} | \n
| Lease Renewed By | \n{this.state.leaseData.created_by} | \n
| Lease Renew Date & Time | \n{this.state.leaseData.created_at} | \n
| Lease Renew Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Renew Submit Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Renew Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Renew Approved Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nTerminate Lease | \n
| Original Lease Number | \n{this.state.leaseData.original_code} | \n
| Last Lease Number | \n{this.state.leaseData.lease_code} | \n
| Lease Terminated By | \n{this.state.leaseData.terminated_by} | \n
| Lease Terminate Date & Time | \n{this.state.leaseData.terminated_at} | \n
| Lease Terminate Submitted By | \n{this.state.leaseData.submitted_by} | \n
| \n Lease Terminate Submit Date & Time\n | \n{this.state.leaseData.submitted_at} | \n
| Lease Terminate Approved By | \n{this.state.leaseData.approved_by} | \n
| \n Lease Terminate Approved Date & Time\n | \n{this.state.leaseData.approved_at} | \n
\n\n\n\n {\n console.log(values, \"valuee....\");\n var self = this;\n if(! self.props.formSubmitted ) {\n self.props.setFormSubmitted(true);\n \n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/amend-lease?leaseId=${this.state.leaseId}`,\n\n data: { checkedItems: values.option },\n }).then(function (response) {\n self.props.setFormSubmitted(false);\n if (!response.data.success) {\n // alert(\"Something went wrong!!\");\n //setpopupMessageContent('Something went wrong.');\n // console.log(popupMessageContent);\n //setpopupalertMessage(true);\n } else {\n self.setState({ amendleaseId: response.data.id, fileName: response.data.id + \"-Amend-Doc.pdf\" });\n self.uploader.uploadFile();\n self.hidePopup();\n // alert(\"Details Stored successfully.\");\n // handleClose(false);\n self.props.setpopupMessageContent('Details Stored successfully.');\n self.props.setpopupalertMessage(true);\n setTimeout(function () {\n self.props.history.push(response.data.link);\n }, 2000);\n }\n });\n }\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n }) => (\n \n )}\n \n\n\n
\n );\n }\n}\n\nexport default withRouter(AmendLeaseView);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faTimes, faEye } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport Popup from \"reactjs-popup\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport TopHeader from \"../../layout/TopHeader\";\nimport { ChartPopup } from \"../../utils/utils\";\nimport { fileUploadPath } from \"../../utils/index\";\nimport Select from \"react-select\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nvar ReactS3Uploader = require(\"react-s3-uploader\");\n\nvar today = new Date(),\n date =\n today.getDate() + \"/\" + today.getMonth() + 1 + \"/\" + today.getFullYear();\n\nclass TerminateLease extends React.Component {\n state = {\n terminationEffectiveDate: new Date(),\n effectiveDate: new Date(),\n redirect: false,\n changeLandlord: false,\n delete: false,\n additionalDetails: [],\n leaseId: this.props.leaseId,\n leaseCode: this.props.leaseCode,\n costCenter: this.props.costCenter,\n fileName: \"Termination-Doc.pdf\",\n date: \"01/01/2022\",\n initialValues: {\n landlordId: [],\n },\n };\n style = (feature) => {\n return {\n fillColor: \"#ccc\",\n weight: 1,\n opacity: 1,\n color: \"#003970\",\n dashArray: \"2\",\n fillOpacity: 0.5,\n };\n };\n constructor(props) {\n super(props);\n //this.handleTypeChange = this.handleTypeChange.bind(this);\n }\n\n componentDidMount() {\n var date = new Date();\n var formatedDate = `${date.getFullYear() + 1\n }-${date.getMonth()}-${date.getDate()}`;\n this.setState({ terminationEffectiveDate: formatedDate }, () => {\n console.log(this.state.terminationEffectiveDate);\n });\n console.log(formatedDate);\n }\n\n\n // onUploadError() {\n // this.setState({\n // messsagePopup: true,\n // popupContent: \"Something Went Wrong!\",\n // });\n // console.log(\"uploading error....\");\n // // alert(\"Something Went Wrong\");\n // }\n\n hidePopup() {\n this.props.setShow(false);\n }\n\n changeLandlord = (newValue, existing) => {\n var currentMapping = this.state.currentLandlordMapping;\n currentMapping[existing]['value'] = newValue.value;\n currentMapping[existing]['label'] = newValue.label;\n this.setState({ currentLandlordMapping: currentMapping });\n // console.log(newValue, \"newValue\");\n // this.state.landloardSelected = [];\n // this.state.initialValues.landlordId = [];\n // for (let i = 0; i < newValue.length; i++) {\n // this.state.initialValues.landlordId.push(newValue[i].value);\n // this.state.landloardSelected.push({\n // value: newValue[i].value,\n // label: newValue[i].label,\n // });\n // }\n // this.setState({});\n // console.log(this.state.landloardSelected, \"this.state.landloardSelected\");\n };\n\n handleTypeChange = (e) => {\n if (e.target.value !== \"landlord_termination\") {\n this.setState({\n changeLandlord: false,\n termination_type: e.target.value,\n });\n }\n this.setState({});\n console.log(this.state.termination_type, \"termination_type\");\n\n //this.setState({ fruit: e.target.value });\n };\n\n redirectAfterSave = () => {\n this.setState({ delete: false });\n };\n\n redirectToTerminate = () => {\n var value = this.state.values;\n\n this.redirectAfterSave();\n\n var self = this;\n if (value.termination_type == \"landlord_termination\") {\n console.log(\"in if\")\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/get-lease-landloard-details?leaseId=${this.state.leaseId}`,\n // url: `${apiUrl.apiUrl.url}/lease-view/get-lease-landloard-details?leaseId=${this.state.costCenter}`,\n }).then(function (response) {\n if (response.data.success) {\n self.state.initialValues.landlordId =\n response.data.additionalDetails.landlordIds;\n self.setState({\n changeLandlord: true,\n additionalDetails: response.data.additionalDetails,\n landloardSelected: response.data.additionalDetails.currentLandlord,\n currentLandlordMapping: response.data.additionalDetails.currentLandlordMapping,\n });\n }\n });\n } else {\n console.log(\"in else\")\n this.uploader.uploadFile();\n }\n };\n\n onUploadFinish = (e) => {\n let fileName =\n fileUploadPath() +\n this.state.leaseId +\n \"/\" +\n this.state.fileName;\n var initialValuesArr = this.state.initialValues;\n initialValuesArr[\"document\"] = fileName;\n initialValuesArr[\"effectiveDate\"] = this.state.effectiveDate; //initialValuesArr[\"effectiveDate\"];\n initialValuesArr[\"termination_settlement\"] =\n initialValuesArr[\"termination_settlement\"];\n initialValuesArr[\"termination_type\"] = initialValuesArr[\"termination_type\"];\n initialValuesArr[\"remarks\"] = initialValuesArr[\"remarks\"];\n initialValuesArr[\"landlordId\"] = initialValuesArr[\"landlordId\"];\n initialValuesArr['landlordMapping'] = this.state.currentLandlordMapping;\n console.log(\"here159\")\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/terminate-lease?leaseId=${this.state.leaseId}`,\n // url: `${apiUrl.apiUrl.url}/lease-view/terminate-lease?leaseId=${this.state.CostCenter}`,\n data: initialValuesArr,\n }).then(function (response) {\n if (!response.data.success) {\n self.props.setpopupMessageContent(\"Something went wrong.\");\n self.props.setpopupalertMessage(true);\n } else {\n self.hidePopup();\n self.props.setpopupMessageContent(\"Details Stored successfully.\");\n self.props.setpopupalertMessage(true);\n setTimeout(function () {\n self.props.history.push(response.data.link);\n }, 2000);\n if (typeof initialValuesArr[\"termination_type\"] == \"undefined\" || initialValuesArr[\"termination_type\"] == \"\" || initialValuesArr[\"termination_type\"] == \"normal_termination\") {\n self.props.ths.resetCounter();\n self.props.ths.loadLeaseCountStatuswise();\n }\n }\n });\n };\n render() {\n return (\n \n {\n console.log(values, \"valuee....\");\n var self = this;\n this.state.initialValues = values;\n\n console.log(this.state.fileName, \"this.state.fileName\");\n\n\n this.setState({ delete: true, values: values });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n }) => (\n
\n \n )}\n \n\n {this.state.changeLandlord && (\n \n \"Are you sure to delete this item??\"\n \n ×\n \n
\n )}\n \n \n
\n \n {\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/update-marque-status?leaseId=${this.state.leaseId}`,\n data: this.state,\n }).then(function (response) {\n console.log(response,\"repsonse\")\n if (response.data.success) {\n self.hidePopup();\n self.props.setpopupMessageContent(\"Details Stored successfully.\");\n self.props.setpopupalertMessage(true);\n }})\n\n\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n }) => (\n \n )}\n \n\n \n\n \n {(close) => (\n \n
\n );\n }\n}\n\nexport default withRouter(MoreInfoComponent);\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { getToDate } from \"../../utils/utils\";\nimport { fileUploadPath } from \"../../utils/index\";\nimport { getUserRole } from \"../../utils/index\";\nimport {\n faSearch,\n faPen,\n faTimes,\n faEye,\n faTrashAlt,\n faSyncAlt,\n faCalendarCheck,\n faInfoCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport Popup from \"reactjs-popup\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field } from \"formik\";\nimport DataTable from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\nimport { Modal } from \"react-bootstrap\";\nimport { confirmAlert } from \"react-confirm-alert\"; // Import\nimport \"react-confirm-alert/src/react-confirm-alert.css\"; // Import css\nimport LeaseDetailsPopup from \"../../viewLease/LeaseDetailsPopup\";\nimport AmendLeaseView from \"../../createLease/submitLease/AmendLeaseView\";\nimport TerminateLease from \"../submitLease/TerminateLease\";\nimport MoreInfoComponent from \"../submitLease/MoreInfoComponent\";\nimport Dropdown from \"react-bootstrap/Dropdown\";\nimport moment from \"moment\";\nfunction removeLease(leaseId, ths, status) {\n var del_message = \"Are you sure you want to delete this draft lease.\";\n\n if (status == 3) {\n del_message = \"Are you sure you want to delete this expired lease.\";\n }\n\n confirmAlert({\n title: \"Confirm to delete\",\n message: del_message,\n buttons: [\n {\n label: \"Yes\",\n onClick: () => {\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/remove-lease`,\n data: { leaseId: leaseId },\n }).then(function (response) {\n ths.resetCounter();\n ths.loadLeaseCountStatuswise();\n });\n },\n },\n {\n label: \"No\",\n onClick: () => {\n console.log(\"cancel clicked\");\n },\n },\n ],\n });\n}\n\nvar counter = Math.round();\n\nfunction DeleteBtn(props) {\n return (\n (props.status == 0 || props.status == 3) &&\n (props.status == 0 ? (\n <>\n {/* \n \"Are you sure to delete this item??\"\n \n ×\n \n
\n )}\n \n \n
\n removeLease(props.leaseId, props.ths)}>\n \n
\n\n \n ) : (\n <>\n {/* removeLease(props.leaseId, props.ths)}>\n \n
\n \n ))\n );\n}\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n handleShow(record.leaseId)}\n className=\"tableActionnewAmend ta\"\n >\n
\n \n showExtendlBox(record.leaseId)}\n className=\"tableActionnewEdit\"\n >\n {\" \"}\n
\n \n showRenewalBox(record.leaseId)}\n className=\"tableActionnewRenew ta\"\n >\n
\n \n showTerminateBox(record.leaseId)}\n className=\"tableActionnewDelete ta\"\n >\n
\n \n {\n setLeaseId(record.leaseId);\n setpopupKey(Math.random());\n openFromParent();\n }}\n className=\"tableActionnewAmend ta\"\n >\n
\n \n {\n setLeaseId(record.leaseId);\n disputShow(record.leaseId)\n }}\n className=\"tableActionnewAmend ta\"\n >\n
\n \n showExtendlBox(record.leaseId)}\n className=\"tableActionnewEdit ta\"\n >\n
\n \n showRenewalBox(record.leaseId)}\n className=\"tableActionnewRenew ta\"\n >\n
\n \n {\n setLeaseId(record.leaseId);\n disputShow(record.leaseId)\n }}\n className=\"tableActionnewAmend ta\"\n >\n
\n \n \n {(close) => (\n \n
\n );\n};\nexport default LeaseListingTable;\n","import React, { useState, useEffect } from \"react\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n\nconst MarqueFilterComponent = ({ asset, brand, status, ths }) => {\n const [checked, setChecked] = useState(false);\n const [desputeChecked, setDesputeChecked] = useState(false);\n\n const [show, setShow] = useState(false);\n\n const handleCheckboxChange = (event) => {\n const isChecked = event.target.checked;\n setChecked(isChecked);\n console.log(isChecked, \"isChecked\");\n // Define the value to be sent in the request\n const value = isChecked ? 1 : 0;\n ths.resetMarque(value);\n ths.resetCounter();\n };\n\n const handleCheckboxDesputeChange = (event) => {\n const isChecked = event.target.checked;\n setDesputeChecked(isChecked);\n console.log(isChecked, \"isChecked\");\n\n const value = isChecked ? 1 : 0;\n ths.resetDispute(value);\n ths.resetCounter();\n };\n\n return (\n \n
\n \n
\n \n
\n \n \n \n Lease Termination \n \n \n \n \n\n \n \n Lease Extend \n \n \n {\n console.log(values, \"valuee....\");\n var self = this;\n if(! formSubmitted) {\n setFormSubmitted(true);\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/extend-lease?leaseId=${leaseId}`,\n data: values,\n }).then(function (response) {\n setFormSubmitted(false);\n if (!response.data.success) {\n // alert(\"Something went wrong!!\");\n setpopupMessageContent(\"Something went wrong.\");\n setpopupalertMessage(true);\n } else {\n // alert(\"Details Stored successfully.\");\n setpopupMessageContent(\"Details Stored successfully.\");\n setpopupalertMessage(true);\n setTimeout(function () {\n ths.props.history.push(response.data.link);\n }, 1000);\n }\n });\n }\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n }) => (\n \n )}\n \n \n \n\n \n \n Lease Renewal \n \n \n {\n console.log(values, \"valuee....\");\n var self = this;\n\n if(! formSubmitted) {\n setFormSubmitted(true);\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/renew-lease?leaseId=${leaseId}`,\n data: values,\n }).then(function (response) {\n setFormSubmitted(true);\n if (!response.data.success) {\n // alert(\"Something went wrong!!\");\n setpopupMessageContent(\"Something went wrong.\");\n setpopupalertMessage(true);\n } else {\n // alert(\"Details Stored successfully.\");\n setpopupMessageContent(\"Details Stored successfully.\");\n setpopupalertMessage(true);\n setTimeout(function () {\n ths.props.history.push(response.data.link);\n }, 1000);\n }\n });\n }\n\n \n\n \n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n }) => (\n \n )}\n \n \n \n\n \n {/* show={renewShow} onHide={handleRenewClose} */}\n \n Lease Renewal \n \n \n {\n console.log(values, \"valuee....\");\n var self = this;\n if(! formSubmitted) {\n setFormSubmitted(true);\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/renew-lease?leaseId=${leaseId}`,\n data: { checkedItems: values.option },\n }).then(function (response) {\n setFormSubmitted(false);\n if (!response.data.success) {\n // alert(\"Something went wrong!!\");\n setpopupMessageContent(\"Something went wrong.\");\n setpopupalertMessage(true);\n } else {\n // alert(\"Details Stored successfully.\");\n setpopupMessageContent(\"Details Stored successfully.\");\n setpopupalertMessage(true);\n setTimeout(function () {\n ths.props.history.push(response.data.link);\n }, 1000);\n }\n });\n }\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n }) => (\n \n )}\n \n \n \n\n \n \n \n Lease Amend\n \n \n \n \n \n\n \n \n \n Lease Details\n \n \n \n \n \n\n
\n \n {popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n};\nexport default MarqueFilterComponent;\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Placeholder } from \"rsuite\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faSearch,\n faPlus,\n faPen,\n faTimes,\n faUndo,\n faMinus,\n faEye,\n faTrashAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\n\nimport { confirmAlert } from \"react-confirm-alert\"; // Import\nimport \"react-confirm-alert/src/react-confirm-alert.css\"; // Import css\n\nfunction removeLease(leaseId, ths) {\n confirmAlert({\n title: \"Confirm to delete\",\n message: \"Are you sure you want to delete this prospect.\",\n buttons: [\n {\n label: \"Yes\",\n onClick: () => {\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/prospect/remove-prospect`,\n data: { prospectId: leaseId },\n }).then(function (response) {\n console.log(response, \"response\", ths);\n counter = Math.round();\n ths.resetCounter();\n ths.loadLeaseCountStatuswise();\n });\n },\n },\n {\n label: \"No\",\n onClick: () => {\n console.log(\"cancel clicked\");\n //this.loadLeaseCountStatuswise();\n },\n },\n ],\n });\n}\n\nvar counter = Math.round();\n\nfunction DeleteBtn(props) {\n console.log(props, \"props\");\n return (\n (props.status == 0 && props.is_dropped == 0) && (\n \n
\n \n \n \n {\" \"}\n */}\n
\n );\n }\n },\n },\n ];\n\n return (\n \n
\n );\n};\nexport default ProspectListingTable;\n","import React from \"react\";\nimport axios from \"axios\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faSearch,\n faSave,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../../masters/master.css\";\nimport Select from \"react-select\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport { Modal, Button } from \"react-bootstrap\";\n// import { PdfReader } from \"../../utils/DocumentViewer\";\nimport { ViewLeasePdfReader } from \"../../utils/ViewLeaseDocumentViewer\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\n\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\n\nconst prospectFilterForm = Yup.object().shape({\n //assetType: Yup.string().required(\"Required\"),\n //city: Yup.string().required(\"Required\"),\n //brandCategory: Yup.string().required(\"Required\"),\n assetName: Yup.string().required(\"Required\"),\n floor: Yup.string().required(\"Required\"),\n //rangeFrom: Yup.string().required(\"Required\"),\n //rangeTo: Yup.string().required(\"Required\"),\n});\n\nconst prospectValidation = Yup.object().shape({\n landlordAssetId: Yup.string().required(\"Required\"),\n //gla: Yup.string().required(\"Required\"),\n});\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nconst prospectObj = {\n project_id: \"\",\n broking_by: \"\",\n broking_type: \"\",\n broker_name: \"\",\n landlordAssetName: \"\",\n \"19_36_months\": \"\",\n address: \"\",\n agreement_type: \"\",\n automated_daily_sales_report_adsr: \"\",\n brand_name: \"\",\n cam_charges: \"\",\n cam_commencement_date: \"\",\n cam_escalation: \"\",\n cancellation_and_termination: \"\",\n carpet_area: \"\",\n confidentiality: \"\",\n delay_in_commencement_licensee: \"\",\n delay_in_scheduled_date_proposed_licensee: \"\",\n eligibility_under_laws: \"\",\n escalation_on_monthly_lease_rental: \"\",\n extension_of_term_renewal_term: \"\",\n first_month_18th_month: \"\",\n franchisee_by_party2: \"\",\n governing_law_and_jurisdiction: \"\",\n gst_and_other_taxes_surcharges_levies_etc: \"\",\n handover_date: \"\",\n ifrm_sd_amount: \"\",\n ifrm_sd_cam_deposit_escalation: \"\",\n ifrm_sd_cam_deposit_for_company_name: \"\",\n ifrm_sd_instalment_1: \"\",\n ifrm_sd_instalment_2: \"\",\n ifrm_sd_instalment_3: \"\",\n ifrm_sd_months: \"\",\n ifrm_sd_payment_schedule: \"\",\n ifrm_sd_rate: \"\",\n ifrsd_amount: \"\",\n ifrsd_months: \"\",\n ifrsd_payment_schedule: \"\",\n ifrsd_rate: \"\",\n ifrsd_rent_deposit_escalation: \"\",\n ifrsd_rent_deposit_for_company_name: \"\",\n industry_of_party2: \"\",\n instalment_1: \"\",\n instalment_2: \"\",\n instalment_3: \"\",\n insurance: \"\",\n lease_commencement_date: \"\",\n lessee: \"\",\n lessor: \"\",\n lock_in_period_for_party_2: \"\",\n loi_issue_date: \"\",\n monthly_fixed_rental_or_revenue_share: \"\",\n monthly_lease_rental_logic_basis: \"\",\n monthly_lease_rental_rent_commencement_date: \"\",\n monthly_variable_rental_revenue_share: \"\",\n nature_of_party2: \"\",\n other_charges_for_the_permitted_business: \"\",\n parking: \"\",\n party_2_details: \"\",\n party_2_kyc_details: \"\",\n payment_mechanism_charges: \"\",\n pre_fit_out_handover_requirements: \"\",\n property_tax: \"\",\n rent_free_fit_out_period_from_handover_date: \"\",\n representations_and_warranties: \"\",\n signage: \"\",\n stamp_duty_and_registration_charges: \"\",\n super_area: \"\",\n term: \"\",\n to_be_completed_by_party1: \"\",\n to_be_completed_by_party2: \"\",\n unit_details: \"\",\n utilities: \"\",\n utility_charges_commencement_date: \"\",\n validity_of_loi: \"\",\n};\n\nclass Prospect extends React.Component {\n mainFormValidator = [];\n\n state = {\n redirect: false,\n id: undefined,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n prospectFields: [],\n url: `${apiUrl.apiUrl.url}/prospect/create`,\n assetNames: [],\n unitLists: [],\n unitListSelected: [],\n unitListSelectedValue: [],\n initialValues: {},\n prospectInitialValues: prospectObj,\n isDisabled: false\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n componentDidMount() {\n this.fetchAsset();\n this.fetchProspectFields();\n }\n\n componentDidUpdate() {\n var self = this;\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/prospect/create`,\n prospectInitialValues: prospectObj,\n });\n } else {\n this.state.isDisabled = true;\n\n axios.get(`${apiUrl.apiUrl.url}/prospect/fetch-prospect?id=${this.props.match.params.id}`).then(function (response) {\n let data = response.data;\n self.setState({\n url: `${apiUrl.apiUrl.url}/prospect/update?id=${self.props.match.params.id}`,\n prospectInitialValues: data,\n });\n \n this.fetchUnits(data.project_id);\n // const unitDetails = data.unit_details && data.unit_details.trim() !== \"\" ? data.unit_details.split(\",\") : [];\n const unitDetails = data.unit_lists ? data.unit_lists : [];\n this.state.unitListSelectedValue = data.unit_details;\n this.state.unitListSelected = [];\n if(unitDetails.length > 0) {\n unitDetails.forEach((item) => {\n this.state.unitListSelected.push({\n value: item.value,\n label: item.label\n });\n });\n }\n\n self.setState({});\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/prospect/fetch-prospect?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // self.setState({\n // url: `${apiUrl.apiUrl.url}/prospect/update?id=${self.props.match.params.id}`,\n // prospectInitialValues: data,\n // });\n \n // this.fetchUnits(data.project_id);\n // // const unitDetails = data.unit_details && data.unit_details.trim() !== \"\" ? data.unit_details.split(\",\") : [];\n // const unitDetails = data.unit_lists ? data.unit_lists : [];\n // this.state.unitListSelectedValue = data.unit_details;\n // this.state.unitListSelected = [];\n // if(unitDetails.length > 0) {\n // unitDetails.forEach((item) => {\n // this.state.unitListSelected.push({\n // value: item.value,\n // label: item.label\n // });\n // });\n // }\n\n // self.setState({});\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n\n\n self.setState({});\n }\n }\n }\n\n fetchProspectFields() {\n fetch(`${apiUrl.apiUrl.url}/prospect/fetch-prospect-fields`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n prospectFields: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n changeAsset = (e, i) => {\n this.state.prospectInitialValues.landlordAssetName = e.label;\n this.state.prospectInitialValues.project_id = e.value;\n\n this.state.unitListSelected = [];\n this.fetchUnits(e.value);\n\n this.setState({});\n console.groupEnd();\n this.setState({});\n };\n\n fetchUnits = (assetId) =>{\n fetch(`${apiUrl.apiUrl.url}/asset/fetch-unit-list-by-asset-id?id=${assetId}`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n unitLists: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.setState({});\n }\n\n changeUnitAsset = (newValue) => {\n console.log(newValue);\n this.state.unitListSelected = [];\n this.state.unitListSelectedValue = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.unitListSelectedValue.push(newValue[i].value);\n this.state.unitListSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.setState({});\n };\n\n fetchAsset = () => {\n fetch(`${apiUrl.apiUrl.url}/asset/fetch-all-assets`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assetNames: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToClose = () => {\n this.setState({\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n render() {\n return (\n \n {this.renderForm()}\n
\n );\n }\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n renderForm() {\n return (\n \n \n {(close) => (\n \n {\n for (const [key, value] of Object.entries(\n this.state.prospectInitialValues\n )) {\n //this.state.prospectInitialValues[key] = \"\";\n }\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n if (!this.mainFormValidator.allValid()) {\n this.mainFormValidator.getErrorMessages();\n this.mainFormValidator.showMessages();\n //this.forceUpdate(); \n return false;\n }\n var self = this;\n values.project_id = this.state.prospectInitialValues.project_id;\n values.unit_details = Array.isArray(this.state.unitListSelectedValue) && this.state.unitListSelectedValue.length > 0 ? this.state.unitListSelectedValue.join(\", \") : \"\";\n axios({\n method: \"post\",\n //url: `${apiUrl.apiUrl.url}/prospect/create`,\n url: this.state.url,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something went wrong\");\n self.setState({\n popupalertMessage: true,\n popupMessageContent: \"Something went wrong\",\n });\n actions.setSubmitting(false);\n\n actions.setErrors(response.data);\n } else {\n for (const [key, value] of Object.entries(\n self.state.prospectInitialValues\n )) {\n self.state.prospectInitialValues[key] = \"\";\n self.setState({});\n }\n for (const [key, value] of Object.entries(\n self.state.initialValues\n )) {\n self.state.initialValues[key] = \"\";\n self.setState({});\n }\n //self.state.comparativeData = [];\n self.setState({});\n\n // self.setState({ redirect: true });\n // alert(\"Data Saved successfully.\");\n self.setState({\n messsagePopup: true,\n });\n\n self.props.history.push(\n \"/createlease/prospect/view/\" + response.data.id\n );\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n setFieldValue,\n }) => (\n
\n );\n }\n}\n\nexport default withRouter(Prospect);\n","import React from \"react\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faSearch,\n faChevronCircleDown,\n faCheck,\n faCheckCircle,\n faExclamationTriangle,\n faTimesCircle,\n faFileSignature,\n faSearchPlus,\n} from \"@fortawesome/free-solid-svg-icons\";\n// import styles from \"../../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link, useHistory } from \"react-router-dom\";\nimport LeaseListingTable from \"./LeaseListingTable\";\nimport MarqueFilterComponent from \"./MarqueFilterComponent\";\nimport ProspectListingTable from \"./ProspectListingTable\";\nimport { DropdownButton, Dropdown } from \"react-bootstrap\";\nimport Popup from \"reactjs-popup\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport \"bootstrap\";\n\nimport { hasAccess, getModules } from \"../../utils/index\";\nimport Prospect from \"../prospect/Prospect\";\n\nclass LeaseListing extends React.Component {\n state = {\n showProspect: !getModules().includes(1)?true:false,\n isDropped: false,\n redirect: false,\n popupalertMessage: false,\n limit: true,\n popupMessageContent: \"\",\n brands: [],\n assets: [],\n statusCount: {},\n selectedBrand: \"\",\n selectedAsset: \"\",\n selectedStatus: 2,\n marque:0,\n dispute:0,\n randomNum: \"\",\n activeIndex: null,\n state: \"\",\n isOpen: false,\n showMarqueComponent: true\n };\n\n constructor(props) {\n super(props);\n this.goToCreateLease = this.goToCreateLease.bind(this);\n this.goToProspect = this.goToProspect.bind(this);\n\n if (!hasAccess([\"admin\", \"maker\"])) {\n console.log(\"calingg\");\n let path = `/lease-summary`;\n this.props.history.push(path);\n }\n }\n\n componentDidMount() {\n this.loadBrands();\n this.loadAssets();\n\n // fetch(`${apiUrl.apiUrl.url}/lease-view/get-status-count`)\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // statusCount: data,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/asset/check-lease-limit`,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n limit: false,\n });\n }\n });\n this.loadLeaseCountStatuswise();\n }\n\n resetCounter = () => {\n this.setState({\n randomNum: Math.random(),\n });\n };\n\n resetMarque = (status) => {\n this.setState({ marque : status });\n }\n\n resetDispute = (status) => {\n this.setState({ dispute : status });\n }\n\n loadLeaseCountStatuswise = (brand, asset) => {\n console.log(asset, \"asset\");\n // this.setState({});\n var brandId =\n typeof brand != \"undefined\" ? brand : this.state.selectedBrand;\n var assetId =\n typeof asset != \"undefined\" ? asset : this.state.selectedAsset;\n var ths = this;\n\n axios\n .post(\n `${apiUrl.apiUrl.url}/lease-view/get-status-count?brand=` +\n brandId +\n `&stateId=${this.state.state}&asset=${assetId}`\n )\n .then(function (response) {\n console.log(response, \"response\");\n ths.setState({\n statusCount: response.data,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/lease-view/get-status-count?brand=` +\n // brandId +\n // `&stateId=${this.state.state}&asset=${assetId}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // ths.setState({\n // statusCount: data,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n this.setState({});\n };\n\n loadAssets = async () => {\n const response = await axios.get(\n `${apiUrl.apiUrl.url}/asset/fetch-all-assets`\n );\n console.log(response);\n this.state.assets = response.data;\n this.setState({});\n };\n\n loadBrands = async () => {\n const response = await axios.get(\n `${apiUrl.apiUrl.url}/brand/get-brands?page=1&per_page=100&delay=1`\n );\n this.state.brands = response.data.data;\n this.setState({});\n };\n goToCreateLease = () => {\n let path = `/createlease/lease-landlord`;\n this.props.history.push(path);\n };\n\n redirectToClose = () => {\n this.setState({\n popupalertMessage: false,\n popupMessageContent: \"\",\n // redirect:true,\n });\n };\n\n checkCreateLimit = () => {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"You have exceeded the limit\",\n });\n };\n goToProspect = () => {\n let path = `/createlease/prospect`;\n this.props.history.push(path);\n };\n render() {\n return (\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n
\n )}\n \n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n - \n
- Document \n
\n
\n \n
\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n \n {getModules().includes(1) && (\n <>\n {\n this.setState({\n selectedAsset: e.target.value,\n randomNum: Math.random(),\n });\n this.loadLeaseCountStatuswise(\n this.state.selectedBrand,\n e.target.value\n );\n }}\n >\n \n {this.state.assets.map((x) => (\n \n ))}\n \n {\n this.setState({\n selectedBrand: e.target.value,\n randomNum: Math.random(),\n });\n\n this.loadLeaseCountStatuswise(\n e.target.value,\n this.state.selectedAsset\n );\n }}\n >\n \n {this.state.brands.map((x) => (\n \n ))}\n \n \n )}\n\n {(!this.state.limit && getModules().includes(1)) && (\n \n Create Lease\n \n )}\n\n {(this.state.limit && getModules().includes(1)) && (\n \n Create Lease\n \n )}\n\n {getModules().includes(3) && (\n \n \n Prospect\n \n )}\n
\n \n {\n //this.setState({ selectedAsset: e.target.value });\n this.setState({\n selectedStatus: 6,\n randomNum: Math.random(),\n showProspect: true,\n isDropped: true,\n });\n }}\n >\n\n \n\n
\n \n )}\n\n {getModules().includes(1) && (\n <>\n \n\n {getModules().includes(3) && (\n <>\n {\n this.setState({\n selectedStatus: 5,\n randomNum: Math.random(),\n showProspect: true,\n isDropped: false,\n });\n }}\n >\n \n\n\n
\n {this.state.statusCount.prospect ? this.state.statusCount.prospect : \"0\"}
\nDraft Prospect
\n{this.state.statusCount.dropped ? this.state.statusCount.dropped : \"0\"}
\nFinal Prospect
\n{this.state.statusCount.draft ? this.state.statusCount.draft : \"0\"}
\nDraft
\n \n{this.state.statusCount.approval ? this.state.statusCount.approval : \"0\"}
\nApproval
\n \n{this.state.statusCount.active ? this.state.statusCount.active : \"0\"}
\nActive
\n \n{this.state.statusCount.expired ? this.state.statusCount.expired : \"0\"}
\nExpired
\n \n{this.state.statusCount.terminated ? this.state.statusCount.terminated : \"0\"}
\nTerminated
\n \n{this.state.statusCount.fnf ? this.state.statusCount.fnf : \"0\"}
\nF&F
\n \n \n )}\n \n\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n
\n )\n }\n \n );\n }\n}\n\nexport default withRouter(LeaseListing);\n","import React from \"react\";\nimport axios from \"axios\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faSearch,\n faSave,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../../masters/master.css\";\nimport Select from \"react-select\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport { Modal, Button } from \"react-bootstrap\";\n// import { PdfReader } from \"../../utils/DocumentViewer\";\nimport { ViewLeasePdfReader } from \"../../utils/ViewLeaseDocumentViewer\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\n\nimport { ReactMultiEmail } from \"react-multi-email\";\nimport * as Yup from \"yup\";\nimport { Loader } from \"rsuite\";\n\nconst selectStyles = {\n border: \"0\",\n background: \"#ddd\",\n};\nconst Schema = Yup.object({\n alertName: Yup.string().required(\"This field is required\"),\n alertText: Yup.string().required(\"This field is required\"),\n reportId: Yup.string().required(\"This field is required\"),\n stateName: Yup.string().required(\"This field is required\"),\n brandSelected: Yup.array().required(\"Provide at least one tag\"),\n frequencySelected: Yup.array().required(\"Provide at least one tag\"),\n});\n\nconst prospectFilterForm = Yup.object().shape({\n //assetType: Yup.string().required(\"Required\"),\n //city: Yup.string().required(\"Required\"),\n //brandCategory: Yup.string().required(\"Required\"),\n assetName: Yup.string().required(\"Required\"),\n floor: Yup.string().required(\"Required\"),\n //rangeFrom: Yup.string().required(\"Required\"),\n //rangeTo: Yup.string().required(\"Required\"),\n});\n\nconst prospectValidation = Yup.object().shape({\n landlordAssetId: Yup.string().required(\"Required\"),\n //gla: Yup.string().required(\"Required\"),\n});\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nconst prospectObj = {\n project_id: \"\",\n \"19_36_months\": \"\",\n address: \"\",\n agreement_type: \"\",\n automated_daily_sales_report_adsr: \"\",\n brand_name: \"\",\n cam_charges: \"\",\n cam_commencement_date: \"\",\n cam_escalation: \"\",\n cancellation_and_termination: \"\",\n carpet_area: \"\",\n confidentiality: \"\",\n delay_in_commencement_licensee: \"\",\n delay_in_scheduled_date_proposed_licensee: \"\",\n eligibility_under_laws: \"\",\n escalation_on_monthly_lease_rental: \"\",\n extension_of_term_renewal_term: \"\",\n first_month_18th_month: \"\",\n franchisee_by_party2: \"\",\n governing_law_and_jurisdiction: \"\",\n gst_and_other_taxes_surcharges_levies_etc: \"\",\n handover_date: \"\",\n ifrm_sd_amount: \"\",\n ifrm_sd_cam_deposit_escalation: \"\",\n ifrm_sd_cam_deposit_for_company_name: \"\",\n ifrm_sd_instalment_1: \"\",\n ifrm_sd_instalment_2: \"\",\n ifrm_sd_instalment_3: \"\",\n ifrm_sd_months: \"\",\n ifrm_sd_payment_schedule: \"\",\n ifrm_sd_rate: \"\",\n ifrsd_amount: \"\",\n ifrsd_months: \"\",\n ifrsd_payment_schedule: \"\",\n ifrsd_rate: \"\",\n ifrsd_rent_deposit_escalation: \"\",\n ifrsd_rent_deposit_for_company_name: \"\",\n industry_of_party2: \"\",\n instalment_1: \"\",\n instalment_2: \"\",\n instalment_3: \"\",\n insurance: \"\",\n lease_commencement_date: \"\",\n lessee: \"\",\n lessor: \"\",\n lock_in_period_for_party_2: \"\",\n loi_issue_date: \"\",\n monthly_fixed_rental_or_revenue_share: \"\",\n monthly_lease_rental_logic_basis: \"\",\n monthly_lease_rental_rent_commencement_date: \"\",\n monthly_variable_rental_revenue_share: \"\",\n nature_of_party2: \"\",\n other_charges_for_the_permitted_business: \"\",\n parking: \"\",\n party_2_details: \"\",\n party_2_kyc_details: \"\",\n payment_mechanism_charges: \"\",\n pre_fit_out_handover_requirements: \"\",\n property_tax: \"\",\n rent_free_fit_out_period_from_handover_date: \"\",\n representations_and_warranties: \"\",\n signage: \"\",\n stamp_duty_and_registration_charges: \"\",\n super_area: \"\",\n term: \"\",\n to_be_completed_by_party1: \"\",\n to_be_completed_by_party2: \"\",\n unit_details: \"\",\n utilities: \"\",\n utility_charges_commencement_date: \"\",\n validity_of_loi: \"\",\n status: 1,\n};\n\nclass Prospect extends React.Component {\n mainFormValidator = [];\n\n state = {\n redirect: false,\n id: undefined,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n prospectFields: [],\n url: `${apiUrl.apiUrl.url}/prospect/create`,\n assetNames: [],\n allData: [],\n isProcessing: false,\n initialValues: {},\n prospectInitialValues: prospectObj,\n taintedFields: [],\n showMailLoader: false\n };\n\n constructor(props) {\n super(props);\n this.buttonRef = React.createRef();\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n componentDidMount() {\n this.fetchProspectFields();\n // Simulate a click event when the component mounts\n if (this.buttonRef.current) {\n //this.buttonRef.current.click();\n }\n }\n\n componentDidUpdate() {\n var self = this;\n if (this.props.match.params.id != this.state.id) {\n this.state.id = this.props.match.params.id;\n\n if (this.props.match.params.id === undefined) {\n this.setState({\n url: `${apiUrl.apiUrl.url}/prospect/create`,\n prospectInitialValues: prospectObj,\n });\n } else {\n this.fetchProspect(this.props.match.params.id);\n }\n }\n }\n\n setColorLogicForFields() {\n var taintedFields = [];\n this.setState({ taintedFields: taintedFields });\n if (this.state.allData.length > 1) {\n this.state.allData.map((values, dataIndex) => {\n var taintedFieldsObj = {};\n if (dataIndex != 0) {\n for (const key in values) {\n if (values[key] != this.state.allData[dataIndex - 1][key]) {\n taintedFieldsObj[key] = true;\n } else {\n taintedFieldsObj[key] = false;\n }\n for (const key2 in values[\"additional_info\"]) {\n console.log(key2, \"ley\");\n for (const key3 in values[\"additional_info\"][key2]) {\n if (\n typeof this.state.allData[dataIndex - 1][\"additional_info\"][\n key2\n ] == \"undefined\" ||\n typeof this.state.allData[dataIndex - 1][\"additional_info\"][\n key2\n ][key3] == \"undefined\"\n ) {\n taintedFieldsObj[key3] = true;\n } else if (\n values[\"additional_info\"][key2][key3] !=\n this.state.allData[dataIndex - 1][\"additional_info\"][key2][\n key3\n ]\n ) {\n taintedFieldsObj[key3] = true;\n } else {\n taintedFieldsObj[key3] = false;\n }\n }\n }\n }\n taintedFields[dataIndex] = taintedFieldsObj;\n } else {\n for (const key in values) {\n taintedFieldsObj[key] = false;\n }\n taintedFields[dataIndex] = taintedFieldsObj;\n }\n });\n this.setState({ taintedFields: taintedFields });\n }\n }\n\n fetchProspect(id) {\n let self = this;\n axios.get(`${apiUrl.apiUrl.url}/prospect/fetch-prospect-data?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n self.setState({\n url: `${apiUrl.apiUrl.url}/prospect/update?id=${self.props.match.params.id}`,\n prospectInitialValues: data[\"current\"],\n allData: data[\"all\"],\n });\n self.setState({});\n self.setColorLogicForFields();\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/prospect/fetch-prospect-data?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // console.log(data);\n // self.setState({\n // url: `${apiUrl.apiUrl.url}/prospect/update?id=${self.props.match.params.id}`,\n // prospectInitialValues: data[\"current\"],\n // allData: data[\"all\"],\n // });\n // self.setState({});\n // self.setColorLogicForFields();\n // console.log(\"done\");\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n fetchProspectFields() {\n fetch(`${apiUrl.apiUrl.url}/prospect/fetch-prospect-fields`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n prospectFields: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n cloneProspect() {\n if (\n typeof this.props.match.params.id != \"undefined\" &&\n this.state.isProcessing == false\n ) {\n this.setState({ isProcessing: true });\n let self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/prospect/clone`,\n data: { id: this.props.match.params.id },\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n popupalertMessage: true,\n popupMessageContent: response.data.msg || \"Something went wrong\",\n });\n } else {\n self.setState({\n messsagePopup: true,\n popupContent: \"Prospect Cloned\",\n });\n }\n self.setState({ isProcessing: false, newid: response.data.id });\n });\n }\n }\n\n downloadProspect() {\n if (\n typeof this.props.match.params.id != \"undefined\" &&\n this.state.isProcessing == false\n ) {\n this.setState({ isProcessing: true });\n let self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/prospect/download`,\n data: { id: this.props.match.params.id },\n }).then(function (response) {\n console.log(response, \"response\")\n if (!response.data.success) {\n self.setState({\n popupalertMessage: true,\n popupMessageContent: response.data.msg || \"Something went wrong\",\n });\n } else {\n window.location.href = `${apiUrl.apiUrl.url + '/lease-report/download-file?path=' + response.data.filename}`;\n }\n self.setState({ isProcessing: false });\n });\n }\n }\n\n closeProspect() {\n if (\n typeof this.props.match.params.id != \"undefined\" &&\n this.state.isProcessing == false\n ) {\n this.setState({ isProcessing: true });\n let self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/prospect/close`,\n data: { id: this.props.match.params.id },\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n popupalertMessage: true,\n popupMessageContent: response.data.msg || \"Something went wrong\",\n });\n } else {\n self.setState({\n messsagePopup: true,\n popupContent: \"Prospect Finalised\",\n });\n self.fetchProspect(self.props.match.params.id);\n }\n self.setState({ isProcessing: false });\n });\n }\n }\n\n sendProspect() {\n this.setState({ isModalOpen: true });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false }, () => {\n if (typeof this.state.newid != \"undefined\") {\n this.props.history.push(\"/createlease/prospect/\" + this.state.newid);\n }\n });\n };\n\n redirectToClose = () => {\n this.setState({\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n resetForm(values) {\n this.state.initialValues = {};\n values.stateId = \"\";\n values.emails = \"\";\n this.state.initialValues.alertText = \"\";\n this.state.showMailLoader = false;\n this.setState({});\n }\n\n valueChange = (newValue, actionMeta) => {\n this.state.initialValues.alertText = newValue.target.value;\n this.setState({});\n };\n\n toCamelCase = (str) => {\n return str.toLowerCase();\n return str\n .split(/[^a-zA-Z0-9]+/) // Split on non-alphanumeric characters\n .map((word, index) => {\n if (index === 0) {\n return word.toLowerCase(); // Keep the first word in lowercase\n }\n return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); // Capitalize the first letter\n })\n .join(''); // Join the words back together\n }\n\n submitForm = (values) => {\n console.log(this.validator.allValid());\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n\n console.log(values, \"asdas\", this.state);\n\n var self = this;\n this.state.initialValues.id = this.props.match.params.id;\n if (\n typeof this.props.match.params.id != \"undefined\" &&\n this.state.isProcessing == false\n ) {\n this.setState({ showMailLoader: true });\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/prospect/send`,\n data: this.state.initialValues,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n popupalertMessage: true,\n popupMessageContent: response.data.msg || \"Something went wrong\",\n });\n } else {\n self.setState({ isModalOpen: false });\n self.setState({\n messsagePopup: true,\n popupContent: \"Prospect sent\",\n });\n }\n self.setState({ isProcessing: false, showMailLoader: false });\n self.resetForm(values);\n });\n }\n };\n\n render() {\n return (\n \n \n {(close) => (\n \n \n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n setFieldValue,\n }) => (\n \n \n \n \n \n \n \n \n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n \n {/* \n \n Close\n \n */}\n \n
\n );\n }\n}\n\nexport default withRouter(Prospect);\n","import React from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nimport \"bootstrap\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Accordion from \"react-bootstrap/Accordion\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass RentalDetails extends React.Component {\n constructor(props) {\n super(props);\n console.log(props);\n this.state = {\n rentalDetails: this.props.rentalDetails,\n waiverDetails: [],\n };\n }\n\n componentDidMount() {\n console.log(\"pp\");\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-discount-rent?id=${this.props.match.params.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({ waiverDetails: data.rentalDetails }, () => {\n console.log(this.state.waiverDetails);\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n render() {\n return (\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n
\n )}\n \n
\n \n
\n \n
\n - \n
- Send Mail \n
\n\n \n
\n )}\n \n \n
\n );\n } else if (\n rental.rentalLogicValue == 11 ||\n rental.rentalLogicValue == 12\n ) {\n return (\n \n \n {this.state.rentalDetails.map(function (rental, index) {\n if (\n rental.rentalLogicValue == 1 ||\n rental.rentalLogicValue == 2\n ) {\n var rentalUnitData = \"\";\n\n if (typeof rental.unit != \"undefined\") {\n rentalUnitData = ` - ` + rental.unit + `-`;\n }\n\n if (rental.rentDueFrequency == \"Every Month\") {\n rental.rentDueFrequency =\n rental.rentDueFrequency + \" (Advanced Rent)\";\n }\n\n if (rental.rentDueFrequency == \"Subsequent Month\") {\n rental.rentDueFrequency =\n rental.rentDueFrequency + \" (Arrears Rent)\";\n }\n\n return (\n
\n );\n } else if (\n rental.rentalLogicValue == 9 ||\n rental.rentalLogicValue == 10\n ) {\n return (\n \n
\n );\n } else if (\n rental.rentalLogicValue == 3 ||\n rental.rentalLogicValue == 4\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {rentalUnitData}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalUom == \"Per Seat\" && (\n <>\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n )}\n \n
\n \n \n \n
\n \n
\n {rental.rentalUom != \"Per Seat\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 5 ||\n rental.rentalLogicValue == 6\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 7 ||\n rental.rentalLogicValue == 8\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n {\" \"}\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \n\n Revenue Share (%)\n | \n
|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 13 ||\n rental.rentalLogicValue == 14 ||\n rental.rentalLogicValue == 15\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n } else if (\n rental.rentalLogicValue == 16 ||\n rental.rentalLogicValue == 17\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 18 ||\n rental.rentalLogicValue == 19 ||\n rental.rentalLogicValue == 28\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n );\n } else if (\n rental.rentalLogicValue == 20 ||\n rental.rentalLogicValue == 21\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 22 ||\n rental.rentalLogicValue == 23\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \n\n Revenue Share (%)\n | \n
|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 24 ||\n rental.rentalLogicValue == 25 ||\n rental.rentalLogicValue == 26 ||\n rental.rentalLogicValue == 27\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n }, this)}\n \n \n \n\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n\n {this.props.basic && (\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n \n
\n \n \n \n \n Waiver Details\n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 3 ||\n rental.rentalLogicValue == 4\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 5 ||\n rental.rentalLogicValue == 6\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 7 ||\n rental.rentalLogicValue == 8\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n {\" \"}\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n );\n } else if (\n rental.rentalLogicValue == 9 ||\n rental.rentalLogicValue == 10\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 11 ||\n rental.rentalLogicValue == 12\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \n\n Revenue Share (%)\n | \n
|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 13 ||\n rental.rentalLogicValue == 14 ||\n rental.rentalLogicValue == 15\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n } else if (\n rental.rentalLogicValue == 16 ||\n rental.rentalLogicValue == 17\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 18 ||\n rental.rentalLogicValue == 19\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n );\n } else if (\n rental.rentalLogicValue == 20 ||\n rental.rentalLogicValue == 21\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 22 ||\n rental.rentalLogicValue == 23\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \n\n Revenue Share (%)\n | \n
|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 24 ||\n rental.rentalLogicValue == 25 ||\n rental.rentalLogicValue == 26 ||\n rental.rentalLogicValue == 27\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n }, this)}\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n );\n }, this)}\n \n
\n {this.state.landlord.map(function (name, index) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | # | \nFloor | \nUnit No | \nUnit Type | \nUnit Status | \nOwnership Percent % | \nCarpet Area (sq.ft) | \nUsable Area (sq.ft) | \n\n Gross Leasable Area (sq.ft)\n | \n
|---|---|---|---|---|---|---|---|---|
| {index + 1} | \n{name.floor} | \n{name.unitNo} | \n{name.unitType} | \n{name.unitStatus} | \n{name.ownershipPercent} | \n{name.carpetArea} | \n{name.usableArea} | \n{name.grossLeasableArea} | \n
\n
\n \n );\n }\n}\nexport default withRouter(PartiesUnitDetails);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nclass OccupierBrandDetails extends React.Component {\n constructor(props) {\n super(props);\n console.log(props, \"costCenter\");\n this.state = {\n occupierBrand: this.props.occupierBrand,\n occupier: this.props.occupier,\n // vendor_code:this.props.vendor_code\n };\n }\n\n render() {\n return (\n \n
\n \n \n Total Gross Leasable Area (sq.ft):\n \n \n
\n \n
\n );\n }\n}\nexport default withRouter(OccupierBrandDetails);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass BrokerDetails extends React.Component {\n constructor(props) {\n super(props);\n console.log(\"====\", this.props.brokerDetails);\n\n this.state = {\n brokerDetails: this.props.brokerDetails,\n };\n }\n\n render() {\n return (\n \n
\n \n
\n \n
\n {this.state.occupier.map(function (name, index) {\n return (\n <>\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {/* \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
*/}\n \n
\n \n \n \n
\n \n
\n {this.state.occupierBrand.leaseType.includes(\n \"Franchisee\"\n ) && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n );\n }, this)}\n \n
\n \n \n
\n \n \n \n
\n \n
\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\nexport default withRouter(BrokerDetails);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass LeaseTermDetails extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n leaseTermDetails: this.props.leaseTermDetails,\n renewalTerms: this.props.renewalTerms,\n };\n }\n\n render() {\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n\n \n
\n \n \n \n
\n \n
\n\n \n
\n \n \n \n
\n \n
\n\n \n
\n \n \n \n
\n \n
\n\n {\n this.state.brokerDetails.brokerage_logic == \"Percentage of rent Basis\" && (\n \n
\n \n \n \n
\n \n
\n )\n }\n \n\n \n
\n \n \n \n
\n \n
\n \n \n
\n \n \n \n
\n \n
\n );\n }\n}\nexport default withRouter(LeaseTermDetails);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass LockInNoticePeriod extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n lockIn: this.props.lockIn,\n lockInOccupier: this.props.lockInOccupier,\n };\n }\n\n render() {\n return (\n \n
\n \n
\n \n
\n {this.state.renewalTerms.map(function (name, index) {\n return (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {\n this.state.leaseTermDetails.rentCommencementDate != \"0000-00-00\" && (\n \n
\n \n \n \n
\n \n
\n ) \n }\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }, this)}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\nexport default withRouter(LockInNoticePeriod);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass CamDetails extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n camDetails: this.props.camDetails,\n camDataApplicable: this.props.camDataApplicable,\n };\n }\n\n render() {\n return (\n \n
\n \n {this.state.lockIn.lockInApplicableForLandlord == \"yes\" ? (\n
\n \n
\n ) : (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n {this.state.lockIn.lockInApplicableForOccupier == \"yes\" ? (\n this.state.lockInOccupier.map(function (name, index) {\n return (\n \n
\n \n
\n \n Lock In Not Applicable for Landlord\n
\n\n
\n );\n }, this)\n ) : (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n Lock In Not Applicable for Occupier\n
\n\n
\n \n {this.state.lockIn.lockInApplicableForLandlord == \"yes\" ||\n this.state.lockIn.lockInApplicableForOccupier == \"yes\" ? (\n
\n \n
\n ) : (\n \"\"\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n Notes\n *\n \n \n {this.props.lockInNotes}\n \n
\n \n
\n \n );\n }\n}\nexport default withRouter(CamDetails);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass Utilities extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n utilities: this.props.utilities,\n };\n }\n\n render() {\n return (\n \n \n {this.state.camDataApplicable == \"yes\" ? (\n this.state.camDetails.map(function (cam, index) {\n if (cam.camLogicValue == 1) {\n return (\n
\n );\n } else if (cam.camLogicValue == 4) {\n return (\n \n
\n );\n } else if (cam.camLogicValue == 2) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {cam.period}\n {` `}\n {`-`}\n {` `}\n {cam.camLogicText}\n {` - `}\n {`( Period Term - ${\n cam.periodTermYY == \"\" ? \"0\" : cam.periodTermYY\n }Y -${\n cam.periodTermMM == \"\" ? \"0\" : cam.periodTermMM\n }M -${\n cam.periodTermDD == \"\" ? \"0\" : cam.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(cam.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(cam.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis
(\n Times Actual Cost){\" \"}\n *\n \n\n {cam.camActualizationBasis}\n \n
\n (\n Times Actual Cost){\" \"}\n *\n \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camCapped == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n } else if (cam.camLogicValue == 3) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {cam.period}\n {` `}\n {`-`}\n {` `}\n {cam.camLogicText}\n {` - `}\n {`( Period Term - ${\n cam.periodTermYY == \"\" ? \"0\" : cam.periodTermYY\n }Y -${\n cam.periodTermMM == \"\" ? \"0\" : cam.periodTermMM\n }M -${\n cam.periodTermDD == \"\" ? \"0\" : cam.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(cam.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(cam.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis
(\n Times Actual Cost){\" \"}\n *\n \n\n {cam.camActualizationBasis}\n \n
\n (\n Times Actual Cost){\" \"}\n *\n \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camCapped == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n {`Period `}\n {` `}\n {cam.period}\n {` `}\n {`-`}\n {` `}\n {cam.camLogicText}\n {` - `}\n {`( Period Term - ${\n cam.periodTermYY == \"\" ? \"0\" : cam.periodTermYY\n }Y -${\n cam.periodTermMM == \"\" ? \"0\" : cam.periodTermMM\n }M -${\n cam.periodTermDD == \"\" ? \"0\" : cam.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(cam.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(cam.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis
(\n Times Actual Cost){\" \"}\n *\n \n\n {cam.camActualizationBasis}\n \n
\n (\n Times Actual Cost){\" \"}\n *\n \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camCapped == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n }, this)\n ) : (\n \n
\n \n \n \n {`Period `}\n {` `}\n {cam.period}\n {` `}\n {`-`}\n {` `}\n {cam.camLogicText}\n {` - `}\n {`( Period Term - ${\n cam.periodTermYY == \"\" ? \"0\" : cam.periodTermYY\n }Y -${\n cam.periodTermMM == \"\" ? \"0\" : cam.periodTermMM\n }M -${\n cam.periodTermDD == \"\" ? \"0\" : cam.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(cam.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(cam.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis
\n (Times Actual Cost){\" \"}\n *\n \n\n {cam.camActualizationBasis}\n \n
\n \n (Times Actual Cost){\" \"}\n *\n \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camCapped == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n {this.state.camDataApplicable == \"yes\" && (\n \n
\n \n
\n \n CAM Not Applicable\n
\n\n
\n )}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\nexport default withRouter(Utilities);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass MarketingFund extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n mfDetails: this.props.mfDetails,\n mfDataApplicable: this.props.mfDataApplicable,\n };\n }\n\n render() {\n return (\n \n \n {this.state.utilities.map(function (utility, index) {\n return (\n \n
\n \n
\n );\n }, this)}\n \n
\n \n \n \n {utility.utility.utilityType}\n \n \n \n \n
\n \n
\n \n
\n {utility.utility.utilityType == \"Other\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n {utility.utility.rates !== undefined &&\n utility.utility.rates.map(function (name, index) {\n return (\n \n
\n \n \n \n
\n \n
\n );\n }, this)}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n );\n }\n}\nexport default withRouter(MarketingFund);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass PropertyTax extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n pTaxDetails: this.props.pTaxDetails,\n pTaxPayable: this.props.pTaxPayable,\n };\n }\n\n render() {\n return (\n \n \n {this.state.mfDataApplicable == \"yes\" ? (\n this.state.mfDetails.map(function (mf, index) {\n if (mf.mfLogicText === \"Marketing Fund Basis Rate\") {\n return (\n
\n );\n } else if (\n mf.mfLogicText === \"Marketing Fund Basis % of Rate\"\n ) {\n return (\n \n
\n );\n } else if (\n mf.mfLogicText === \"Marketing Fund Basis Pure Revenue Share\"\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {mf.period}\n {` `}\n {`-`}\n {` `}\n {mf.mfLogicText}\n {` - `}\n {`( Period Term - ${\n mf.periodTermYY == \"\" ? \"0\" : mf.periodTermYY\n }Y -${\n mf.periodTermMM == \"\" ? \"0\" : mf.periodTermMM\n }M -${\n mf.periodTermDD == \"\" ? \"0\" : mf.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(mf.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(mf.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n mf.mfLogicText ===\n \"Marketing Fund Basis Pure Revenue Share Sales Range\"\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {mf.period}\n {` `}\n {`-`}\n {` `}\n {mf.mfLogicText}\n {` - `}\n {`( Period Term - ${\n mf.periodTermYY == \"\" ? \"0\" : mf.periodTermYY\n }Y -${\n mf.periodTermMM == \"\" ? \"0\" : mf.periodTermMM\n }M -${\n mf.periodTermDD == \"\" ? \"0\" : mf.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(mf.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(mf.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n {`Period `}\n {` `}\n {mf.period}\n {` `}\n {`-`}\n {` `}\n {mf.mfLogicText}\n {` - `}\n {`( Period Term - ${\n mf.periodTermYY == \"\" ? \"0\" : mf.periodTermYY\n }Y -${\n mf.periodTermMM == \"\" ? \"0\" : mf.periodTermMM\n }M -${\n mf.periodTermDD == \"\" ? \"0\" : mf.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(mf.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(mf.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n } else if (mf.mfLogicText === \"Marketing Fund Basis Vouchers\") {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {mf.period}\n {` `}\n {`-`}\n {` `}\n {mf.mfLogicText}\n {` - `}\n {`( Period Term - ${\n mf.periodTermYY == \"\" ? \"0\" : mf.periodTermYY\n }Y -${\n mf.periodTermMM == \"\" ? \"0\" : mf.periodTermMM\n }M -${\n mf.periodTermDD == \"\" ? \"0\" : mf.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(mf.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(mf.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n }, this)\n ) : (\n \n
\n \n \n \n {`Period `}\n {` `}\n {mf.period}\n {` `}\n {`-`}\n {` `}\n {mf.mfLogicText}\n {` - `}\n {`( Period Term - ${\n mf.periodTermYY == \"\" ? \"0\" : mf.periodTermYY\n }Y -${\n mf.periodTermMM == \"\" ? \"0\" : mf.periodTermMM\n }M -${\n mf.periodTermDD == \"\" ? \"0\" : mf.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(mf.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(mf.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n {this.state.mfDataApplicable == \"yes\" && (\n \n
\n \n
\n \n Marketing Fund Not Applicable\n
\n\n
\n )}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n );\n }\n}\nexport default withRouter(PropertyTax);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass ParkingStorageSignage extends React.Component {\n constructor(props) {\n super(props);\n console.log(props);\n this.state = {\n parkingStorageSignage: this.props.parkingStorageSignage,\n parkingChargesApplicable: this.props.chargesApplicable,\n };\n }\n\n render() {\n return (\n \n \n {this.state.pTaxPayable == \"yes\" ? (\n this.state.pTaxDetails.map(function (pTax, index) {\n if (pTax.pTaxLogicValue == 1) {\n return (\n
\n );\n } else if (pTax.pTaxLogicValue == 4) {\n return (\n \n
\n );\n } else if (pTax.pTaxLogicValue == 2) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {pTax.period}\n {` `}\n {`-`}\n {` `}\n {pTax.pTaxLogicText}\n {` - `}\n {`( Period Term - ${\n pTax.periodTermYY == \"\"\n ? \"0\"\n : pTax.periodTermYY\n }Y -${\n pTax.periodTermMM == \"\"\n ? \"0\"\n : pTax.periodTermMM\n }M -${\n pTax.periodTermDD == \"\"\n ? \"0\"\n : pTax.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(pTax.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(pTax.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {pTax.pTaxLogicText !=\n \"Property Tax Basis Actual\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n {pTax.pTaxLogicText !=\n \"Property Tax Basis Actual\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {pTax.pTaxLogicText !=\n \"Property Tax Basis Actual\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {pTax.pTaxLogicText !=\n \"Property Tax Basis Actual\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n {pTax.rates !== undefined &&\n pTax.rates.map(function (name, index) {\n return (\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }, this)}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n } else if (pTax.pTaxLogicValue == 3) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {pTax.period}\n {` `}\n {`-`}\n {` `}\n {pTax.pTaxLogicText}\n {` - `}\n {`( Period Term - ${\n pTax.periodTermYY == \"\"\n ? \"0\"\n : pTax.periodTermYY\n }Y -${\n pTax.periodTermMM == \"\"\n ? \"0\"\n : pTax.periodTermMM\n }M -${\n pTax.periodTermDD == \"\"\n ? \"0\"\n : pTax.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(pTax.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(pTax.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n {`Period `}\n {` `}\n {pTax.period}\n {` `}\n {`-`}\n {` `}\n {pTax.pTaxLogicText}\n {` - `}\n {`( Period Term - ${\n pTax.periodTermYY == \"\"\n ? \"0\"\n : pTax.periodTermYY\n }Y -${\n pTax.periodTermMM == \"\"\n ? \"0\"\n : pTax.periodTermMM\n }M -${\n pTax.periodTermDD == \"\"\n ? \"0\"\n : pTax.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(pTax.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(pTax.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n } else if (pTax.pTaxLogicValue == 5) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {pTax.period}\n {` `}\n {`-`}\n {` `}\n {pTax.pTaxLogicText}\n {` - `}\n {`( Period Term - ${\n pTax.periodTermYY == \"\"\n ? \"0\"\n : pTax.periodTermYY\n }Y -${\n pTax.periodTermMM == \"\"\n ? \"0\"\n : pTax.periodTermMM\n }M -${\n pTax.periodTermDD == \"\"\n ? \"0\"\n : pTax.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(pTax.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(pTax.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n }, this)\n ) : (\n \n
\n \n \n \n {`Period `}\n {` `}\n {pTax.period}\n {` `}\n {`-`}\n {` `}\n {pTax.pTaxLogicText}\n {` - `}\n {`( Period Term - ${\n pTax.periodTermYY == \"\"\n ? \"0\"\n : pTax.periodTermYY\n }Y -${\n pTax.periodTermMM == \"\"\n ? \"0\"\n : pTax.periodTermMM\n }M -${\n pTax.periodTermDD == \"\"\n ? \"0\"\n : pTax.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(pTax.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(pTax.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n {this.state.pTaxPayable == \"yes\" && (\n \n
\n \n
\n \n Property Tax Not Applicable\n
\n\n
\n )}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\nexport default withRouter(ParkingStorageSignage);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass RentDeposit extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rentDepositDetails: this.props.rentDepositDetails,\n };\n console.log(Object.values(this.state.rentDepositDetails)[0]);\n }\n\n render() {\n return (\n \n \n {(this.state.parkingChargesApplicable == \"yes\" || this.state.parkingChargesApplicable == \"hybrid\" ) ? (\n Object.keys(this.state.parkingStorageSignage).map(function (\n key,\n index\n ) {\n return this.state.parkingStorageSignage[key].map(function (\n pss,\n index\n ) {\n if (\n this.state.parkingStorageSignage[key][index].chargeType ==\n \"Parking 2W\" ||\n this.state.parkingStorageSignage[key][index].chargeType ==\n \"Parking 4W\" ||\n this.state.parkingStorageSignage[key][index].chargeType ==\n \"Parking Other\"\n ) {\n return (\n \n {/* {this.state.parkingChargesApplicable == \"yes\" && ( */}\n
\n \n
\n );\n } else if (\n this.state.parkingStorageSignage[key][index].chargeType ==\n \"Storage\"\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {pss.period}\n {` `}\n {`-`}\n {` `}\n {pss.chargeTypeText}\n {` - `}\n {`( Period Term - ${\n pss.periodTermYY == \"\"\n ? \"0\"\n : pss.periodTermYY\n }Y -${\n pss.periodTermMM == \"\"\n ? \"0\"\n : pss.periodTermMM\n }M -${\n pss.periodTermDD == \"\"\n ? \"0\"\n : pss.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(pss.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(pss.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {\n typeof pss.freeParking != \"undefined\" && (\n \n
\n \n \n \n
\n \n
\n )\n\n }\n \n\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n this.state.parkingStorageSignage[key][index].chargeType ==\n \"Signage\"\n ) {\n return (\n \n
\n \n \n \n {`Period `}\n {` `}\n {pss.period}\n {` `}\n {`-`}\n {` `}\n {pss.chargeTypeText}\n {` - `}\n {`( Period Term - ${\n pss.periodTermYY == \"\"\n ? \"0\"\n : pss.periodTermYY\n }Y -${\n pss.periodTermMM == \"\"\n ? \"0\"\n : pss.periodTermMM\n }M -${\n pss.periodTermDD == \"\"\n ? \"0\"\n : pss.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(pss.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(pss.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n },\n this);\n },\n this)\n ) : (\n \n
\n \n \n \n {`Period `}\n {` `}\n {pss.period}\n {` `}\n {`-`}\n {` `}\n {pss.chargeTypeText}\n {` - `}\n {`( Period Term - ${\n pss.periodTermYY == \"\"\n ? \"0\"\n : pss.periodTermYY\n }Y -${\n pss.periodTermMM == \"\"\n ? \"0\"\n : pss.periodTermMM\n }M -${\n pss.periodTermDD == \"\"\n ? \"0\"\n : pss.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(pss.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(pss.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {/* )} */}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n );\n }\n}\nexport default withRouter(RentDeposit);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass CamDeposit extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n camDepositDetails: this.props.camDepositDetails,\n camDepositApplicable: this.props.camDepositApplicable,\n };\n }\n\n render() {\n return (\n \n \n {Object.keys(this.state.rentDepositDetails).map(function (\n key,\n index\n ) {\n return this.state.rentDepositDetails[key].map(function (\n rent,\n index\n ) {\n return (\n
\n );\n },\n this);\n },\n this)}\n \n \n
\n \n
\n \n \n \n {`Period `}\n {` `}\n {rent.period}\n {` `}\n {`( Period Term - ${\n rent.periodTermYY == \"\" ? \"0\" : rent.periodTermYY\n }Y -${\n rent.periodTermMM == \"\" ? \"0\" : rent.periodTermMM\n }M -${\n rent.periodTermDD == \"\" ? \"0\" : rent.periodTermDD\n }D )`}\n {` -`}\n {` `}\n {rent.rentDepositNature}\n {` - `}\n {`From ${leaseDateFormat(rent.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rent.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | \n Milestone Name\n | \nDue Date | \n\n RDEP Milestone\n | \n\n RDEP Milestone Amount (Rs.)\n | \n
|---|---|---|---|
| \n {name.milestoneName}\n | \n\n {leaseDateFormat(\n name.dueDate\n )}\n | \n\n {Math.round(\n name.milestonePercent\n )}\n {rent.milestones[index]\n .milestoneType ==\n \"RDEP Percent\"\n ? \" %\"\n : \" Months\"}\n | \n\n {Math.round(\n name.amount\n )}\n | \n
\n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n );\n }\n}\nexport default withRouter(CamDeposit);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass OtherDeposit extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n otherDepositDetails: this.props.otherDepositDetails,\n otherDepositApplicable: this.props.otherDepositApplicable,\n };\n }\n\n render() {\n return (\n \n \n {this.state.camDepositApplicable == \"yes\" ? (\n Object.keys(this.state.camDepositDetails).map(function (\n key,\n index\n ) {\n return this.state.camDepositDetails[key].map(function (\n cam,\n index\n ) {\n return (\n
\n );\n },\n this);\n },\n this)\n ) : (\n \n
\n \n
\n \n \n \n {`Period `}\n {` `}\n {cam.period}\n {` `}\n {`( Period Term - ${\n cam.periodTermYY == \"\" ? \"0\" : cam.periodTermYY\n }Y -${\n cam.periodTermMM == \"\" ? \"0\" : cam.periodTermMM\n }M -${\n cam.periodTermDD == \"\" ? \"0\" : cam.periodTermDD\n }D )`}\n {` -`}\n {` `}\n {cam.camDepositNature}\n {` - `}\n {`From ${leaseDateFormat(cam.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(cam.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | \n Milestone Name\n | \nDue Date | \n\n CDEP Milestone\n | \n\n RDEP Milestone Amount (Rs.)\n | \n
|---|---|---|---|
| \n {name.milestoneName}\n | \n\n {leaseDateFormat(\n name.dueDate\n )}\n | \n\n {Math.round(\n name.milestonePercent\n )}\n {cam.milestones[index]\n .milestoneType ==\n \"CDEP Percent\"\n ? \" %\"\n : \" Months\"}\n | \n\n {Math.round(\n name.amount\n )}\n | \n
\n
\n )}\n \n {this.state.camDepositApplicable == \"yes\" && (\n \n
\n \n
\n \n CAM Deposit Not Applicable\n
\n\n
\n )}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n );\n }\n}\nexport default withRouter(OtherDeposit);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport { Modal, Button } from \"react-bootstrap\";\n// import { PdfReader } from \"../../utils/DocumentViewer\";\nimport { ViewLeasePdfReader } from \"../../utils/ViewLeaseDocumentViewer\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass UploadDocuments extends React.Component {\n state = {\n showUploadDocument: false,\n fileName: \"\",\n documentType: \"\",\n uploadedDocuments: [],\n currentDocument: \"\",\n pageNo: 1,\n documentTable: [],\n documentNamesAfterAdd: [],\n };\n\n constructor(props) {\n super(props);\n this.state = {\n uploadedDocs: this.props.uploadedDocs,\n };\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n render() {\n return (\n \n \n {this.state.otherDepositApplicable == \"yes\" ? (\n Object.keys(this.state.otherDepositDetails).map(function (\n key,\n index1\n ) {\n return this.state.otherDepositDetails[key].map(function (\n rent,\n index\n ) {\n console.log(this.state.otherDepositDetails[key]);\n return (\n
\n );\n },\n this);\n },\n this)\n ) : (\n \n
\n \n
\n \n \n \n {`Period `}\n {` `}\n {rent.period}\n {` `}\n {`( Period Term - ${\n rent.periodTermYY == \"\"\n ? \"0\"\n : rent.periodTermYY\n }Y -${\n rent.periodTermMM == \"\"\n ? \"0\"\n : rent.periodTermMM\n }M -${\n rent.periodTermDD == \"\"\n ? \"0\"\n : rent.periodTermDD\n }D )`}\n {` -`}\n {` `}\n {rent.depositNature}\n {` - `}\n {rent.otherDepositName}\n {` `}\n {` - `}\n {`From ${leaseDateFormat(rent.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rent.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rent.otherDepositName !==\n \"Storage Deposit\" &&\n rent.otherDepositName !==\n \"Fitout Deposit\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {rent.otherDepositName ===\n \"Storage Deposit\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {rent.rateUOM === \"Per Sq.ft\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {rent.otherDepositName ===\n \"Fitout Deposit\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | \n Milestone Name\n | \nDue Date | \n\n ODEP Percent\n | \n\n RDEP Milestone Amount (Rs.)\n | \n
|---|---|---|---|
| \n {name.milestoneName}\n | \n\n {leaseDateFormat(\n name.dueDate\n )}\n | \n\n {Math.round(\n name.milestonePercent\n )}\n {\" %\"}\n | \n\n {Math.round(\n name.amount\n )}\n | \n
\n
\n )}\n \n {this.state.otherDepositApplicable == \"yes\" && (\n \n
\n \n
\n \n Other Deposit Not Applicable\n
\n\n
\n )}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\nexport default withRouter(UploadDocuments);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport { PdfReader } from \"../../utils/DocumentViewer\";\nclass CommercialClauses extends React.Component {\n state = {\n showUploadDocument: false,\n fileName: \"\",\n documentType: \"\",\n uploadedDocuments: [],\n currentDocument: \"\",\n pageNo: 1,\n documentTable: [],\n documentNamesAfterAdd: [],\n leaseDocuments: [],\n };\n\n constructor(props) {\n super(props);\n this.state = {\n commercialClauses: this.props.commercialClauses,\n leaseDocuments: this.props.leaseDocuments,\n };\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n render() {\n return (\n \n {this.state.uploadedDocs != null &&\n this.state.uploadedDocs.map(function (name, index) {\n return (\n
\n \n
\n );\n }, this)}\n \n
\n \n
\n \n
\n \n \n {/* */}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n \n \n \n \n \n {/* \n \n Close\n \n */}\n \n
\n \n
\n \n
\n \n
\n - \n
- Document \n
\n
\n \n
\n \n
\n );\n }\n}\nexport default withRouter(CommercialClauses);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport { PdfReader } from \"../../utils/DocumentViewer\";\nclass OtherClauses extends React.Component {\n state = {\n showUploadDocument: false,\n fileName: \"\",\n documentType: \"\",\n uploadedDocuments: [],\n currentDocument: \"\",\n pageNo: 1,\n documentTable: [],\n documentNamesAfterAdd: [],\n };\n\n constructor(props) {\n super(props);\n this.state = {\n otherClauses: this.props.otherClauses,\n leaseDocuments: this.props.leaseDocuments,\n };\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n render() {\n return (\n \n {this.state.commercialClauses != null &&\n this.state.commercialClauses.map(function (name, index) {\n return (\n
\n\n \n
\n );\n }, this)}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n - \n
- Document \n
\n
\n \n
\n \n
\n );\n }\n}\nexport default withRouter(OtherClauses);\n","import React, { useState } from \"react\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { BrowserRouter as Router, Link, withRouter } from \"react-router-dom\";\nimport { PdfReader } from \"../../utils/DocumentViewer\";\nimport { Modal, Button } from \"react-bootstrap\";\nclass InvoiceValidationTab extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n invoiceDetails: this.props.invoiceDetails,\n mgRateTotal: 0,\n mgAmountTotal: 0,\n netSalesTotal: 0,\n rsTotal: 0,\n rsAmountTotal: 0,\n fitoutTotal: 0,\n camTotal: 0,\n netChargeTotal: 0,\n invoiceAmountTotal: 0,\n currentDocument: \"\",\n pageNo: 1,\n };\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n render() {\n return (\n \n {this.state.otherClauses != null &&\n this.state.otherClauses.map(function (name, index) {\n return (\n
\n \n
\n );\n }, this)}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n \n \n \n \n \n {/* \n \n Close\n \n */}\n \n
\n \n
\n \n
\n \n
\n - \n
- Document \n
\n
\n \n
\n \n
\n );\n }\n}\nexport default withRouter(InvoiceValidationTab);\n","import React, { useState } from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport dateFormat, { masks } from \"dateformat\";\nclass LeaseInformation extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n leaseData: this.props.leaseData,\n };\n }\n\n amendNumber(str) {\n return str.split(\"-\").pop();\n }\n\n setPopupHeading() {\n if (\n this.state.leaseData.type == \"\" ||\n this.state.leaseData.type == \"original\"\n ) {\n return \"Create Lease\";\n } else if (this.state.leaseData.type == \"amend\") {\n return \"Amend Lease\";\n } else if (this.state.leaseData.type == \"extend\") {\n return \"Extend Lease\";\n } else if (this.state.leaseData.type == \"renew\") {\n return \"Renew Lease\";\n } else if (this.state.leaseData.type == \"terminate\") {\n return \"Terminate Lease\";\n } else {\n return \"Create Lease\";\n }\n }\n\n render() {\n return (\n \n \n {Object.keys(this.state.invoiceDetails).map((event, index) => {\n return {event} ;\n })}\n {Object.keys(this.state.invoiceDetails).map((event, index) => {\n return (\n \n {Object.keys(this.state.invoiceDetails[event]).map(\n (chargeDetails, chargeType) => {\n return (\n \n );\n })}\n \n
\n \n
\n );\n }\n )}\n \n
\n \n \n \n \n {chargeDetails}\n \n \n \n \n \n
\n \n
\n \n {Object.keys(\n this.state.invoiceDetails[event][\n chargeDetails\n ]\n ).map(\n (chargeLogic, chargeLogicindex) => {\n return (\n \n \n
\n );\n }\n )}\n
\n | Month | \n\n Charge Type\n | \n\n Charge Logic\n | \nMG Rate | \n\n MG Amount\n | \n\n Net Sales\n | \nRS % | \n\n RS Amount\n | \n\n Fitout Rent Amount\n | \n\n CAM Amount\n | \n\n Net Charge Amount\n | \n\n Invoice Amount\n | \n\n Variance\n | \n\n View Invoice\n | \n
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {event} | \n{chargeDetails} | \n{chargeLogic} | \n\n {\n this.state\n .invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"mg_rate\"]\n }\n | \n\n {\n this.state\n .invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"mg_amount\"]\n }\n | \n\n {\n this.state\n .invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"net_sales\"]\n }\n | \n\n | \n | \n {\n this.state\n .invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"fitoutRate\"]\n }\n | \n\n {\n this.state\n .invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"cam_amt\"]\n }\n | \n\n {\n this.state\n .invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"net_sales\"]\n }\n | \n\n {\n this.state\n .invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"invoice_amount\"]\n }\n | \n\n | \n | \n
| Total | \n- | \n- | \n\n {\n (this.state.mgRateTotal +=\n Number(\n this.state\n .invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"mg_rate\"]\n ))\n }\n | \n\n {\n (this.state.invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"mg_amount\"] +=\n this.state.mgAmountTotal)\n }\n | \n\n {\n (this.state.invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"net_sales\"] +=\n this.state.netSalesTotal)\n }\n | \n\n {this.state.rsTotal}\n | \n\n {this.state.rsAmountTotal}\n | \n\n {\n (this.state.invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"fitoutRate\"] +=\n this.state.fitoutTotal)\n }\n | \n\n {\n (this.state.invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"cam_amt\"] +=\n this.state.camTotal)\n }\n | \n\n {\n (this.state.invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"net_sales\"] +=\n this.state.netChargeTotal)\n }\n | \n\n {\n (this.state.invoiceDetails[\n event\n ][chargeDetails][\n chargeLogic\n ][\"invoice_amount\"] +=\n this.state.invoiceAmountTotal)\n }\n | \n\n {this.state.varianceTotal}\n | \n\n |
\n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n - \n
- Document \n
\n
\n \n
\n \n
\n );\n }\n}\nexport default withRouter(LeaseInformation);\n","import React from \"react\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nimport \"bootstrap\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport Accordion from \"react-bootstrap/Accordion\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass OtherRentalDetails extends React.Component {\n constructor(props) {\n super(props);\n console.log(props);\n this.state = {\n rentalDetails: this.props.rentalDetails,\n waiverDetails: [],\n };\n }\n\n componentDidMount() {\n console.log(\"pop\");\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-discount-rent?id=${this.props.match.params.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({ waiverDetails: data.rentalDetails }, () => {\n console.log(this.state.waiverDetails);\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n render() {\n return (\n \n
\n \n \n {this.state.leaseData.type == \"\" && (\n \n
\n
\n | Activity | \nCreate Lease | \n
|---|---|
| Lease Number | \n{this.state.leaseData.lease_code} | \n
| Lease Created By | \n{this.state.leaseData.created_by} | \n
| Lease Creation Date & Time | \n{this.state.leaseData.created_at} | \n
| Lease Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Submitted Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Approval Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nCreate Lease | \n
| Lease Number | \n{this.state.leaseData.lease_code} | \n
| Lease Number | \n{this.state.leaseData.lease_code} | \n
| Lease Created By | \n{this.state.leaseData.created_by} | \n
| Lease Creation Date & Time | \n{this.state.leaseData.created_at} | \n
| Lease Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Submitted Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Approval Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nAmend Lease | \n
| Amendment No | \n{this.amendNumber(this.state.leaseData.lease_code)} | \n
| Original Lease Number | \n{this.state.leaseData.original_code} | \n
| Amended Lease No | \n{this.state.leaseData.lease_code} | \n
| Lease Amended By | \n{this.state.leaseData.created_by} | \n
| Lease Amend Date & Time | \n{this.state.leaseData.created_at} | \n
| Amended Screens | \n{this.state.leaseData.ammen_screens} | \n
| Lease Amend Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Amend Submit Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Amend Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Amend Approved Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nExtend Lease | \n
| Extension No | \n{this.state.leaseData.lease_code} | \n
| Original Lease Number | \n{this.state.leaseData.original_code} | \n
| Extended Lease No | \n{this.state.leaseData.lease_code} | \n
| Lease Extended By | \n{this.state.leaseData.created_by} | \n
| Lease Extension Date & Time | \n{this.state.leaseData.created_at} | \n
| Lease Extend Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Extend Submit Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Extend Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Extend Approved Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nRenew Lease | \n
| Renewal No | \n{this.state.leaseData.lease_code} | \n
| Original Lease Number | \n{this.state.original_code} | \n
| Renewed Lease No | \n{this.state.leaseData.lease_code} | \n
| Lease Renewed By | \n{this.state.leaseData.created_by} | \n
| Lease Renew Date & Time | \n{this.state.leaseData.created_at} | \n
| Lease Renew Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Renew Submit Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Renew Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Renew Approved Date & Time | \n{this.state.leaseData.approved_at} | \n
| Activity | \nTerminate Lease | \n
| Original Lease Number | \n{this.state.original_code} | \n
| Last Lease Number | \n{this.state.leaseData.lease_code} | \n
| Lease Terminated By | \n{this.state.leaseData.terminated_by} | \n
| Lease Terminate Date & Time | \n{this.state.leaseData.terminated_at} | \n
| Lease Terminate Submitted By | \n{this.state.leaseData.submitted_by} | \n
| Lease Terminate Submit Date & Time | \n{this.state.leaseData.submitted_at} | \n
| Lease Terminate Approved By | \n{this.state.leaseData.approved_by} | \n
| Lease Terminate Approved Date & Time | \n{this.state.leaseData.approved_at} | \n
\n
\n \n \n {Object.keys(this.state.rentalDetails).map(function (key, index) {\n return this.state.rentalDetails[key].length > 0\n ? this.state.rentalDetails[key].map(function (rental, index) {\n if (\n rental.rentalLogicValue == 1 ||\n rental.rentalLogicValue == 2 ||\n rental.rentalLogicValue == 3 ||\n rental.rentalLogicValue == 2\n ) {\n var rentalUnitData = \"\";\n\n if (typeof rental.unit != \"undefined\") {\n rentalUnitData = ` - ` + rental.unit + `-`;\n }\n\n if (rental.rentDueFrequency == \"Every Month\") {\n rental.rentDueFrequency =\n rental.rentDueFrequency + \" (Advanced Rent)\";\n }\n\n if (rental.rentDueFrequency == \"Subsequent Month\") {\n rental.rentDueFrequency =\n rental.rentDueFrequency + \" (Arrears Rent)\";\n }\n\n return (\n \n
\n\n {this.props.basic && (\n \n
\n );\n }\n }, this)\n : [];\n }, this)}\n \n
\n \n \n \n {`Period `}\n {` `}\n {rental.period}\n {` `}\n {`-`}\n {` `}\n {rental.rentalLogicText}\n {rentalUnitData}\n {` - `}\n {`( Period Term - ${\n rental.periodTermYY == \"\"\n ? \"0 Y\"\n : rental.periodTermYY\n }Y -${\n rental.periodTermMM == \"\"\n ? \"0 Y\"\n : rental.periodTermMM\n }M -${\n rental.periodTermDD == \"\"\n ? \"0 Y\"\n : rental.periodTermDD\n }D )`}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalUom == \"Per Seat\" && (\n <>\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n )}\n \n
\n \n \n \n
\n \n
\n {rental.rentalUom != \"Per Seat\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n \n
\n \n \n \n Waiver Details\n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 3 ||\n rental.rentalLogicValue == 4\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 5 ||\n rental.rentalLogicValue == 6\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 7 ||\n rental.rentalLogicValue == 8\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n {\" \"}\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n );\n } else if (\n rental.rentalLogicValue == 9 ||\n rental.rentalLogicValue == 10\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 11 ||\n rental.rentalLogicValue == 12\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \n\n Revenue Share (%)\n | \n
|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 13 ||\n rental.rentalLogicValue == 14 ||\n rental.rentalLogicValue == 15\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n } else if (\n rental.rentalLogicValue == 16 ||\n rental.rentalLogicValue == 17\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else if (\n rental.rentalLogicValue == 18 ||\n rental.rentalLogicValue == 19\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n );\n } else if (\n rental.rentalLogicValue == 20 ||\n rental.rentalLogicValue == 21\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 22 ||\n rental.rentalLogicValue == 23\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \n\n Revenue Share (%)\n | \n
|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.percent} | \n
\n
\n \n );\n } else if (\n rental.rentalLogicValue == 24 ||\n rental.rentalLogicValue == 25 ||\n rental.rentalLogicValue == 26 ||\n rental.rentalLogicValue == 27\n ) {\n return (\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \n\n Revenue Share (%)\n | \n
|---|---|---|---|---|
| {index + 1} | \n\n {name.productName}\n | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n }, this)}\n \n
\n \n \n \n {rental.rentalLogicText}\n {` - `}\n {`From ${leaseDateFormat(rental.fromDate)}`}\n {` `}\n {`To ${leaseDateFormat(rental.toDate)}`}\n \n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\n \"Minus CAM\"\n ) && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n );\n }\n}\nexport default withRouter(OtherRentalDetails);\n","import React from \"react\";\nimport { withRouter } from \"react-router-dom\";\n\nclass LandlordCharges extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: props.data || {},\n };\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.data !== this.props.data) {\n this.setState({ data: this.props.data });\n }\n }\n\n render() {\n const { data } = this.state;\n\n if (!data || Object.keys(data).length === 0) {\n return \n
\n \n
\n \n
\n \n
\n \n \n \n
\n No Record Available
;\n }\n\n return (\n\n {Object.keys(data).map((category) => (\n
\n );\n }\n}\n\nexport default withRouter(LandlordCharges);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCaretLeft, faCaretRight } from \"@fortawesome/free-solid-svg-icons\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../apiUrlConstant\";\nimport { Redirect, withRouter } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport RentalDetails from \"./tabSection/RentalDetails\";\nimport PartiesUnitDetails from \"./tabSection/PartiesUnitDetails\";\nimport OccupierBrandDetails from \"./tabSection/OccupierBrandDetails\";\nimport BrokerDetails from \"./tabSection/BrokerDetails\";\nimport LeaseTermDetails from \"./tabSection/LeaseTermDetails\";\nimport LockInNoticePeriod from \"./tabSection/LockInNoticePeriod\";\nimport CamDetails from \"./tabSection/CamDetails\";\nimport Utilities from \"./tabSection/Utilities\";\nimport MarketingFund from \"./tabSection/MarketingFund\";\nimport PropertyTax from \"./tabSection/PropertyTax\";\nimport ParkingStorageSignage from \"./tabSection/ParkingStorageSignage\";\nimport RentDeposit from \"./tabSection/RentDeposit\";\nimport CamDeposit from \"./tabSection/CamDeposit\";\nimport OtherDeposit from \"./tabSection/OtherDeposit\";\nimport UploadDocuments from \"./tabSection/UploadDocuments\";\nimport CommercialClauses from \"./tabSection/CommercialClauses\";\nimport OtherClauses from \"./tabSection/OtherClauses\";\nimport TopHeader from \"../layout/TopHeader\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { type } from \"jquery\";\nimport InvoiceValidationTab from \"./tabSection/InvoiceValidationTab\";\nimport LeaseInformation from \"./tabSection/LeaseInformation\";\nimport OtherRentalDetails from \"./tabSection/OtherRentalDetails\";\nimport LandlordCharges from \"./tabSection/LandlordCharges\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LeaseDetails extends React.Component {\n state = {\n redirect: false,\n leaseStatus: \"\",\n initialValues: {},\n leaseCreationDate: \"\",\n leaseId: \"\",\n\n unit: [],\n landlordDetails: [],\n landlordNotes: \"\",\n occupierNotes: \"\",\n leaseTermNotes: \"\",\n lockInNotes: \"\",\n rentalNotes: \"\",\n camNotes: \"\",\n utilitiesNotes: \"\",\n mfNotes: \"\",\n parkingNotes: \"\",\n pTaxNotes: \"\",\n rdNotes: \"\",\n cdNotes: \"\",\n odNotes: \"\",\n additionalDetails: {},\n subAssetName: \"\",\n subAssetNameValue: \"\",\n assetValue: \"\",\n towerValue: \"\",\n tower: \"\",\n occupierBrand: [],\n occupier: [],\n leaseTermDetails: [],\n renewalTerms: [],\n lockIn: [],\n lockInOccupier: [],\n rentalDetails: [],\n otherRental: [],\n camDetails: [],\n utilities: [],\n mfDetails: [],\n pTaxDetails: [],\n parkingStorageSignage: [],\n rentDepositDetails: [],\n camDepositDetails: [],\n otherDepositDetails: [],\n uploadedDocs: [],\n commercialClauses: [],\n otherClauses: [],\n brokerDetails: [],\n invoiceDetails: [],\n landlordChargeDetails: [],\n leaseData: {},\n universalKeyParties: 1212,\n universalKeyOccupier: 2020,\n universalKeyBroker: 123,\n universalKeyLease: 1010,\n universalKeyLockIn: 2533,\n universalKeyRental: 1322,\n universalKeyCam: 3699,\n universalKeyUtilities: 8789,\n universalKeyMf: 6145,\n universalKeyPtax: 5225,\n universalKeyPss: 3478,\n universalKeyRd: 1879,\n universalKeyCd: 37899,\n universalKeyOd: 4978,\n universalKeyFd: 8014,\n universalKeyCc: 7056,\n universalKeyOc: 2021,\n universalKeyInvoice: 8666,\n universalKeyLeaseData: 9907,\n id: this.props.leaseId,\n\n selectedOption: this.props.selectedOption,\n showPartiesUnit: true,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showOtherRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n camDataApplicable: \"\",\n mfDataApplicable: \"\",\n parkingChargesApplicable: \"\",\n parkingCharges: {},\n camDepositApplicable: \"\",\n otherDepositApplicable: \"\",\n pTaxPayable: \"\",\n showLandlordCharges: false,\n };\n\n constructor(props) {\n super(props);\n //this.setState({ selectedOption: props.newSelection })\n //props.selectedOption(\"Rental Details\");\n //this.handleClick = this.handleClick.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n //console.log(prevProps, \"prev pros\", this.props.selectedOption);\n if (this.props.selectedOption !== prevProps.selectedOption) {\n this.setState({ selectedOption: this.props.selectedOption }, () => {\n this.showLeaseData();\n });\n }\n }\n\n componentDidMount() {\n //this.props.selectedOption(\"Rental Details\");//this.setState({ selectedOption: this.props.newSelection })\n\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/get-lease-status?leaseId=` +\n this.state.id, { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseStatus: data.status,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getLeaseId(true);\n\n // fetch(\n // `${apiUrl.apiUrl.url}/lease-view/fetch-lease-menus?leaseId=` +\n // this.state.id\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // leaseMenus: data.data,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n handleChange(event) {\n this.setState({ value: event.target.value });\n }\n\n getLeaseId(setAllDetails) {\n\n let athis= this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-landlord-form?id=${this.state.id}`).then((response)=>{\n let data = response.data;\n athis.state.universalKeyParties = Math.floor(Math.random() * 9) + 1;\n if (typeof setAllDetails == \"undefined\") {\n athis.setState({\n leaseId: data.leaseId,\n });\n } else {\n athis.setState({\n unit: data.units,\n leaseCreationDate: data.leaseCreationDate,\n leaseId: data.leaseId,\n costCenter: data.costCenter,\n subAssetName: data.subAssetName,\n tower: data.tower,\n landlordDetails: data.landlord,\n additionalDetails: data.additionalDetails,\n subAssetNameValue: data.subAssetNameValue,\n assetValue: data.assetName,\n towerValue: data.towerValue,\n landlordNotes: data.notes_1,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-landlord-form?id=${this.state.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // console.log(data);\n // this.state.universalKeyParties = Math.floor(Math.random() * 9) + 1;\n // if (typeof setAllDetails == \"undefined\") {\n // this.setState({\n // leaseId: data.leaseId,\n // });\n // } else {\n // this.setState({\n // unit: data.units,\n // leaseCreationDate: data.leaseCreationDate,\n // leaseId: data.leaseId,\n // costCenter: data.costCenter,\n // subAssetName: data.subAssetName,\n // tower: data.tower,\n // landlordDetails: data.landlord,\n // additionalDetails: data.additionalDetails,\n // subAssetNameValue: data.subAssetNameValue,\n // assetValue: data.assetName,\n // towerValue: data.towerValue,\n // landlordNotes: data.notes_1,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n showLeaseData(e) {\n var selectedVal = this.state.selectedOption;\n console.log(selectedVal);\n console.log(this.state.id);\n // typeof dropdownval !== \"undefined\" ? dropdownval : e.target.value;\n\n if (selectedVal !== \"Other Rental Details\") {\n this.setState({ showOtherRental: false });\n }\n\n if (selectedVal == \"Parties, Landlord & Unit Details\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-landlord-form?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data1\");\n this.state.universalKeyParties = Math.floor(Math.random() * 9) + 1;\n this.setState({\n leaseCreationDate: data.leaseCreationDate,\n leaseId: data.leaseId,\n\n unit: data.units,\n additionalDetails: data.additionalDetails,\n subAssetNameValue: data.subAssetNameValue,\n towerValue: data.towerValue,\n landlordNotes: data.notes_1,\n vendor_code: data.vendor_code,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: true,\n showOccupier: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showInvoice:false\n });\n } else if (selectedVal == \"Occupier & Brand Details\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-occupier-form?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyOccupier = Math.floor(Math.random() * 9) + 1;\n this.setState({\n occupierBrand: data,\n occupier: data.occupier,\n additionalDetails: data.additionalDetails,\n occupierNotes: data.notes_2,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: true,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showInvoice: false\n });\n } else if (selectedVal == \"Broker Details\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-broker-form?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyBroker = Math.floor(Math.random() * 9) + 1;\n this.setState({\n showPartiesUnit: false,\n showBrokerDetails: true,\n showOccupier: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n brokerDetails: data,\n additionalDetails: data.additionalDetails,\n showLandlordCharges: false,\n });\n // this.setState({\n // brokerDetails: data,\n // additionalDetails: data.additionalDetails,\n // });\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (selectedVal == \"Lease Term Details\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-term-form?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyLease = Math.floor(Math.random() * 9) + 1;\n this.setState({\n leaseTermDetails: data,\n renewalTerms: data.renewalTerms,\n leaseTermNotes: data.notes_3,\n additionalDetails: data.additionalDetails,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: true,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Lock In & Notice Period\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-lockin-form?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyLockIn = Math.floor(Math.random() * 9) + 1;\n this.setState({\n lockIn: data,\n lockInOccupier: data.lockInPeriodOccupier,\n additionalDetails: data.additionalDetails,\n lockInNotes: data.notes_4,\n // lockInApplicable:data.\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: true,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (\n selectedVal == \"Rental Details\" ||\n selectedVal == \"Basic Rental Details\"\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-rent-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyRental = Math.floor(Math.random() * 9) + 1;\n this.setState({\n rentalDetails: data.rentalDetails,\n additionalDetails: data.additionalDetails,\n rentalNotes: data.notes_5,\n });\n console.log(this.state.rentalDetails);\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: true,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Other Rental Details\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-other-rent-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyRental = Math.floor(Math.random() * 9) + 1;\n this.setState({\n otherRental: data.rentalDetails,\n additionalDetails: data.additionalDetails,\n rentalNotes: data.notes_16,\n });\n console.log(this.state.rentalDetails);\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showOtherRental: true,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"CAM Details\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyCam = Math.floor(Math.random() * 9) + 1;\n this.setState({\n camDetails: data.camDetails,\n camDataApplicable: data.camApplicable,\n additionalDetails: data.additionalDetails,\n camNotes: data.notes_6,\n });\n console.log(this.state.camDetails);\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: true,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Utilities\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-utilities?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyUtilities = Math.floor(Math.random() * 9) + 1;\n this.setState({\n utilities: data.utilities,\n additionalDetails: data.additionalDetails,\n utilitiesNotes: data.notes_7,\n });\n console.log(this.state.utilities);\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: true,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Marketing Fund\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-marketing-fund-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyMf = Math.floor(Math.random() * 9) + 1;\n this.setState({\n mfDetails: data.marketingFundDetails,\n mfDataApplicable: data.marketingFundApplicable,\n mfNotes: data.notes_8,\n additionalDetails: data.additionalDetails,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: true,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Property & Municipal Tax\") {\n console.log(\"hh\");\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-property-tax-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyPtax = Math.floor(Math.random() * 9) + 1;\n this.setState({\n pTaxDetails: data.propertyTaxDetails,\n pTaxPayable: data.propertyTaxPayable,\n additionalDetails: data.additionalDetails,\n pTaxNotes: data.notes_9,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: true,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Parking Storage & Signage\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-pss-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyPss = Math.floor(Math.random() * 9) + 1;\n this.setState({\n parkingStorageSignage: data.parkingStorageSignage,\n parkingChargesApplicable: data.chargesApplicable,\n additionalDetails: data.additionalDetails,\n parkingNotes: data.notes_10,\n parkingCharges: data.parkingCharges,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: true,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Rent Deposit Details\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-rent-deposit-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyRd = Math.floor(Math.random() * 9) + 1;\n this.setState({\n rentDepositDetails: data.rentDepositDetails,\n additionalDetails: data.additionalDetails,\n rdNotes: data.notes_11,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: true,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"CAM Deposit Details\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-deposit-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyCd = Math.floor(Math.random() * 9) + 1;\n this.setState({\n camDepositDetails: data.camDepositDetails,\n camDepositApplicable: data.camDepositApplicable,\n additionalDetails: data.additionalDetails,\n cdNotes: data.notes_12,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: true,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Other Deposit Details\") {\n console.log(selectedVal);\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-deposit-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyOd = Math.floor(Math.random() * 9) + 1;\n this.setState({\n otherDepositDetails: data.otherDepositDetails,\n otherDepositApplicable: data.otherDepositApplicable,\n additionalDetails: data.additionalDetails,\n odNotes: data.notes_13,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: true,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Uploaded Documents\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-document?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyFd = Math.floor(Math.random() * 9) + 1;\n this.setState({\n uploadedDocs: data.data,\n additionalDetails: data.additionalDetails,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: true,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Critical Clauses - Commercial\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-commercial-clauses-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyCc = Math.floor(Math.random() * 9) + 1;\n this.setState({\n commercialClauses: data.commercialClausesDetails,\n leaseDocuments: data.lease_documents,\n additionalDetails: data.additionalDetails,\n cdNotes:data.notes_14\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: true,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Critical Clauses - Other\") {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-clauses-details?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyOc = Math.floor(Math.random() * 9) + 1;\n this.setState({\n otherClauses: data.otherClausesDetails,\n leaseDocuments: data.lease_documents,\n additionalDetails: data.additionalDetails,\n cdNotes: data.notes_15\t\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: true,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Invoice\") {\n console.log(\"11\");\n fetch(\n `${apiUrl.apiUrl.url}/sales-input/lease-invoice-detail-view?leaseId=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyInvoice = Math.floor(Math.random() * 9) + 1;\n this.setState({\n invoiceDetails: data,\n additionalDetails: data.additionalDetails,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: true,\n showInfo: false,\n showLandlordCharges: false\n });\n } else if (selectedVal == \"Information\") {\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/lease-details-view?leaseId=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.universalKeyLeaseData = Math.floor(Math.random() * 9) + 1;\n this.setState({\n leaseData: data.data,\n });\n this.state.additionalDetails = [];\n this.state.additionalDetails.title = \"Information\";\n this.setState({});\n //{this.state.additionalDetails.title\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: true,\n showLandlordCharges: false\n });\n }else if(selectedVal == 'Landlord Charge Type'){\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/fetch-landlord-charges?id=${this.state.id}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //console.log(data);\n this.setState({\n landlordChargeDetails: data.list,\n additionalDetails: data.additionalDetails,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n showLandlordCharges: true\n });\n \n \n } else {\n this.setState({\n showPartiesUnit: false,\n showOccupier: false,\n showBrokerDetails: false,\n showLeaseTerm: false,\n showLockIn: false,\n showRental: false,\n showCam: false,\n showUtilities: false,\n showMarketingFund: false,\n showProperty: false,\n showParking: false,\n showRentDeposit: false,\n showCamDeposit: false,\n showOtherDeposit: false,\n showUploadedDocs: false,\n showCommercial: false,\n showOther: false,\n showInvoice: false,\n showInfo: false,\n });\n }\n\n if (this.props.leaseChecked != false) {\n this.props.leaseChecked(selectedVal);\n }\n }\n\n callToNextElement(e) {\n let nextindex = this.props.leaseMenus.indexOf(this.state.selectedOption);\n if (nextindex >= 0 && nextindex < this.props.leaseMenus.length - 1) {\n var nextItem = this.props.leaseMenus[nextindex + 1];\n this.setState(\n {\n selectedOption: nextItem,\n },\n () => {\n this.showLeaseData(e);\n }\n );\n\n console.log(\"new val\", this.state.nextSelection);\n this.state.nextSelection = nextItem;\n }\n }\n\n callToPreviousElement(e) {\n let nextindex = this.props.leaseMenus.indexOf(this.state.selectedOption);\n if (nextindex > 0) {\n var nextItem = this.props.leaseMenus[nextindex - 1];\n this.setState(\n {\n selectedOption: nextItem,\n },\n () => {\n this.showLeaseData(e);\n }\n );\n\n console.log(\"new val\", this.state.nextSelection);\n this.state.nextSelection = nextItem;\n }\n console.log(nextindex);\n }\n\n render() {\n return (\n \n \n \n
\n
\n ))}\n {category.toUpperCase()}
\n| Landlord Name | \nPercentage(%) | \n
|---|---|
| {item.landlord_name} | \n{item.percentage} | \n
\n
\n \n );\n }\n}\n\nexport default LeaseDetails;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronRight, faSave, faTimes } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport \"bootstrap\";\nimport LeaseDetails from \"../../viewLease/LeaseDetails\";\nimport { hasAccess, getUserType } from \"../../utils/index\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass SubmitLease extends React.Component {\n state = {\n redirect: false,\n leaseStatus: \"\",\n initialValues: {},\n leaseCreationDate: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n leaseId: \"\",\n unit: [],\n occupierBrand: [],\n occupier: [],\n leaseTermDetails: [],\n renewalTerms: [],\n lockIn: [],\n lockInOccupier: [],\n rentalDetails: [],\n camDetails: [],\n utilities: [],\n mfDetails: [],\n pTaxDetails: [],\n parkingStorageSignage: [],\n rentDepositDetails: [],\n camDepositDetails: [],\n otherDepositDetails: [],\n uploadedDocs: [],\n commercialClauses: [],\n otherClauses: [],\n universalKey: \"\",\n currentSelection: \"Parties, Landlord & Unit Details\",\n reviewedOptions: [],\n reviewedCheck: false,\n leaseMenus: [],\n history: [],\n nextSelection: \"Parties, Landlord & Unit Details\",\n counter: Math.round(),\n };\n\n constructor(props) {\n super(props);\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n componentDidMount() {\n\n let athis = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/create-lease/get-lease-status?leaseId=`+this.props.match.params.id,\n }).then(function(response) {\n let data = response.data;\n athis.setState({\n leaseStatus: data.data.status,\n });\n });\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/get-lease-status?leaseId=` +\n // this.props.match.params.id\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // leaseStatus: data.data.status,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/fetch-lease-menus?leaseId=` +\n this.props.match.params.id,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseMenus: data.data,\n history: data.history,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n leaseChecked = (val) => {\n this.setState({ currentSelection: val });\n };\n\n checkedLease = () => {\n const index = this.state.reviewedOptions.indexOf(\n this.state.currentSelection\n );\n\n if (index != -1) {\n this.state.reviewedOptions.splice(index, 1);\n } else {\n this.state.reviewedOptions.push(this.state.currentSelection);\n }\n\n console.log(this.state.reviewedOptions, \"this.state.reviewedOptions\");\n\n var nextindex = this.state.leaseMenus.indexOf(this.state.currentSelection);\n if (nextindex >= 0 && nextindex < this.state.leaseMenus.length - 1) {\n var nextItem = this.state.leaseMenus[nextindex + 1];\n //this.setState({ nextSelection: nextItem, counter: Math.round() });\n\n var that = this;\n setTimeout(() => {\n that.setState(\n {\n nextSelection: nextItem,\n },\n () => {\n //console.log(\"new callback\", this.state.nextSelection);\n //this.setState({ counter: Math.round() });\n }\n );\n\n console.log(\"new val\", that.state.nextSelection);\n\n that.state.nextSelection = nextItem;\n }, 1000);\n }\n\n this.setState({});\n };\n\n submitForApproval = () => {\n var values = {};\n this.state.leaseStatus = 2;\n values.leaseStatus = this.state.leaseStatus;\n values.leaseSummaryReviewed = 1;\n var self = this;\n axios({\n method: \"post\",\n url:\n `${apiUrl.apiUrl.url}/create-lease/update-lease-status?lease_id=` +\n this.props.match.params.id,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // alert(\"Data Saved Successfully\");\n self.setState({ messsagePopup: true });\n }\n });\n };\n\n submitForReject = () => {\n this.state.leaseStatus = 0;\n var values = {};\n values.leaseStatus = this.state.leaseStatus;\n values.leaseSummaryReviewed = 1;\n var self = this;\n axios({\n method: \"post\",\n url:\n `${apiUrl.apiUrl.url}/create-lease/update-lease-status?lease_id=` +\n this.props.match.params.id,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // alert(\"Data Saved Successfully\");\n self.setState({ messsagePopup: true });\n }\n });\n };\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n \n
\n \n {/* \n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => ( */}\n */}\n
\n \n
\n {/* )}\n \n \n
\n \n
\n \n
\n \n
\n {this.props.history.length > 0 && (\n \n Select Screen\n
\n\n \n {\n this.callToPreviousElement(e);\n }}\n />\n \n {\n this.setState(\n {\n selectedOption: e.target.value,\n },\n () => {\n this.showLeaseData(e);\n }\n );\n this.handleChange.bind(this);\n }}\n >\n \n\n {this.props.leaseMenus.map((obj) => (\n \n ))}\n \n {\n this.callToNextElement(e);\n }}\n >\n
\n \n {\n this.setState(\n {\n id: e.target.value,\n },\n () => {\n this.showLeaseData(e);\n this.getLeaseId();\n }\n );\n //this.handleChange.bind(this)\n }}\n >\n \n\n {this.props.history.map((obj) => (\n \n ))}\n \n
\n )}\n \n View History\n
\n\n
\n \n
\n \n
\n \n
\n \n \n \n {/*
\n
\n | Lease Creation Date | \n\n {dateFormat(\n this.state.leaseCreationDate,\n \"dd mmm yyyy\"\n )}\n | \n
|---|---|
| Lease Id | \n{this.state.leaseId} | \n
\n
\n \n \n \n {this.state.additionalDetails.title}\n {` (`}\n {this.state.additionalDetails.formType == \"\"\n ? \"Original\"\n : this.state.additionalDetails.formType}\n {`)`}\n \n
\n \n
\n \n {this.state.showPartiesUnit && (\n
\n \n
\n\n \n {\n this.state.leaseStatus = 1;\n values.leaseStatus = this.state.leaseStatus;\n values.leaseSummaryReviewed = 1;\n console.log(values);\n var self = this;\n axios({\n method: \"post\",\n url:\n `${apiUrl.apiUrl.url}/create-lease/update-lease-status?lease_id=` +\n this.props.match.params.id,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n // alert(\"Data Saved Successfully\");\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n
\n \n
\n\n\n \n
\n- \n
- Create Lease \n
- Submit Lease \n
- \n Submit Lease\n \n
\n
\n \n \n )}\n \n \n \n \n
\n
\n | User Name | \nRole | \n\n Action\n | \nTimeStamp | \n
|---|
\n
\n \n {\n // if (this.state.rentalDetails.length == 0) {\n // this.mainFormValidator.showMessages(\"countError\");\n // return false;\n // }\n\n // if (\n // this.state.to !==\n // this.state.rentalDetails[this.state.rentalDetails.length - 1]\n // .toDate\n // ) {\n // this.setState({\n // popupalertMessage: true,\n // popupMessageContent: \"Please Complete the period\",\n // });\n // return false;\n // }\n\n values.rentalDetails = this.state.rentalDetails;\n\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-discount-rent?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n \n )}\n \n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- \n Waiver\n \n
\n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.rentalPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Rental Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n } else {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n\n rentPlusFitoutMinusCamPopup(rental) {\n if (this.state.isRentAutocalculate === false) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n\n pureRevenueShareMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pureRevenueShareSalesRangeMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pureRevenueShareProductMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n\n pureRevenueShareSalesRangeProductMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nRevenue Share (%) | \n
|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentPlusCamMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentPlusFitoutRevenueShareMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n\n minimumGuaranteeRentRevenueShareSalesMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n minimumGuaranteeRentRevenueShareProductMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentRevenueShareSalesProductMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nRevenue Share (%) | \n
|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentOrRevenueShareMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n}\nexport default withRouter(Waiver);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage, FieldArray } from \"formik\";\n//import Table from \"./Table\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faPlus, faTrash, faUndo, faPen, faMinus, faTimes, faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { clientAccess, clientId } from \"../../utils/index\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { Tab, TabList, TabPanel, Tabs } from \"react-tabs\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass RentCharge extends React.Component {\n state = {\n popupContent: \"\",\n messsagePopup: false,\n redirect: false,\n id: undefined,\n initialValues: {\n },\n vendorList: [\n {\n id: 1,\n company_name: \"Vendor 1\",\n },\n {\n id: 2,\n company_name: \"Vendor 2\",\n }\n ],\n existingCharges: [{}],\n readOnly: false,\n percentageErr: \"\",\n };\n\n componentDidMount() {\n\n const { id } = this.props.match.params;\n\n axios.get(`${apiUrl.apiUrl.url}/landlord/lease-wise-list?id=${id}`)\n .then(response => {\n console.log(response);\n let data = response.data.data;\n\n //const vendor = data.filter(item => item.is_vendor === \"yes\").map(item => ({\n const vendor = data.map(item => ({\n value: item.id,\n label: item.company_name\n }));\n\n this.setState({\n vendorList: vendor\n });\n });\n\n \n\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-landlord-charges?id=` + id)\n .then(response => {\n const list = response.data.list;\n const landlordDetails = [\n Object.keys(list).reduce((acc, key) => {\n acc[key] = list[key].map((item) => ({\n landlord_id: item.landlord_id,\n percent: parseFloat(item.percentage).toString(),\n }));\n return acc;\n }, {}),\n ];\n\n this.setState({\n existingCharges: landlordDetails\n });\n });\n\n };\n \n redirectAfterSave = () => {\n this.setState({\n redirect: true,\n messsagePopup: false,\n delete: false,\n popupContent: \"\",\n initialValues: {\n tenant: '',\n contacts: []\n },\n });\n};\n\n componentDidUpdate() {\n }\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n \n\n render() {\n const { id } = this.props.match.params;\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n - \n
- \n Masters\n \n
- \n
\n \n - \n Create Lease\n \n
- \n
\n \n - \n Landlord Charge\n \n
\n {this.renderForm()}\n
\n \n );\n }\n\n\n renderForm() {\n\n const tabList = [\n {\n label: \"CAM\",\n value: \"cam\",\n },\n {\n label: \"RENT\",\n value: \"rent\",\n },\n // {\n // label: \"Other Rent Details\",\n // value: \"other rent details\",\n // },\n {\n label: \"Property Tax\",\n value: \"property tax\",\n },\n {\n label: \"Marketing Fund\",\n value: \"marketing fund\",\n },\n {\n label: \"Parking 2W\",\n value: \"parking 2w\",\n },\n {\n label: \"Parking 4W\",\n value: \"parking 4w\",\n },\n {\n label: \"Parking Other\",\n value: \"parking other\",\n },\n {\n label: \"Storage\",\n value: \"storage\",\n },\n {\n label: \"Signage\",\n value: \"signage\",\n },\n ];\n\n return (\n <>\n \n {\n const { id } = this.props.match.params;\n var self = this;\n axios({\n method: \"post\",\n url: apiUrl.apiUrl.url+'/create-lease/add-landlord-charges?id=' + id,\n data: values,\n }).then(function (response) {\n\n if (response.data.status == 'success') {\n \n self.setState({\n messsagePopup: true,\n popupContent: \"Detail Saved Successfully!\",\n url: `${apiUrl.apiUrl.url}/createlease/submit-lease/${id}`\n });\n\n } else {\n //self.state.percentageErr =response.data.message;\n self.state.percentageErr ='Please select the landlord and provide the respective percentage.';\n self.setState({});\n }\n });\n\n }}\n >\n {({\n values,\n errors,\n touched,\n handleChange,\n handleBlur,\n handleSubmit,\n isSubmitting\n }) => (\n \n )}\n \n \n
\n \n );\n }\n}\n\nexport default withRouter(RentCharge);\n","import {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n useParams,\n Redirect,\n} from \"react-router-dom\";\nimport LeaseMenu from \"./LeaseMenu\";\n// import UnitDetailMaster from \"./storeDirectory/UnitDetailMaster\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport styles from \"./createLease.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faUserCircle,\n faSignOutAlt,\n faKey,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport LeaseLandlord from \"./parties/LeaseLandlord\";\nimport LeaseOccupier from \"./parties/LeaseOccupier\";\nimport LeaseTermDetails from \"./criticaldates/LeaseTermDetails\";\nimport LeaseBrokerDetails from \"./parties/LeaseBrokerDetails\";\nimport LockInNoticePeriod from \"./criticaldates/LockInNoticePeriod\";\nimport RentalDetails from \"./commercialDetails/RentalDetails\";\nimport OtherRentalDetails from \"./commercialDetails/OtherRentalDetails\"\nimport CamDetails from \"./commercialDetails/CamDetails\";\nimport Utilities from \"./otherCharges/Utilities\";\nimport MarketingFund from \"./otherCharges/MarketingFund\";\nimport PropertyMuncipalTax from \"./otherCharges/Property-Muncipal-Tax\";\nimport ParkingStorageSignage from \"./otherCharges/Parking-Storage-Signage\";\nimport RentDepositDetails from \"./securityDepositDetails/RentDepositDetails\";\nimport CAMDepositDetails from \"./securityDepositDetails/CAMDepositDetails\";\nimport OtherDepositDetails from \"./securityDepositDetails/OtherDepositDetails\";\nimport CommercialClauses from \"./criticalClauses/CommercialClauses\";\nimport OtherClauses from \"./criticalClauses/OtherClauses\";\nimport UploadDocument from \"./criticalClauses/UploadDocument\";\nimport ListingForm from \"./leaseList/ListingForm\";\nimport Prospect from \"./prospect/Prospect\";\nimport ProspectDetail from \"./prospect/ProspectDetail\";\nimport TopHeader from \"../layout/TopHeader\";\nimport SubmitLease from \"./submitLease/SubmitLease\";\nimport Waiver from \"./commercialDetails/Waiver\";\nimport RentCharge from \"./chargeType/RentCharge\";\nimport { hasAccess, getUserType } from \"../utils/index\";\nexport default function CreateLease() {\n let match = useRouteMatch();\n return (\n \n
\n );\n}\n","import React from \"react\";\nimport { Nav, Sidenav, Dropdown, Icon } from \"rsuite\";\nimport \"rsuite/dist/styles/rsuite-default.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCoffee,\n faStore,\n faCalendarDay,\n faBuilding,\n faRupeeSign,\n faLock,\n faFileContract,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"./leaseMenu.css\";\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n withRouter,\n useParams,\n} from \"react-router-dom\";\nimport { faEllipsisH } from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../apiUrlConstant\";\nimport { getUserType } from \"../utils/index\";\n\nvar headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LeaseMenu extends React.Component {\n state = {\n openMenu: [\"1\"],\n disableOption: false,\n urlAppend: \"\",\n activeKey: \"1-1\",\n propsMenu: \",\",\n menus: {},\n links: {}\n };\n\n constructor(props) {\n super(props);\n this.state = {\n openMenu: [this.props.openMenu],\n disableOption: false,\n urlAppend: \"\",\n activeKey: \"1-1\",\n propsActiveKey: \"1-1\",\n menus: {},\n links: {},\n lastUrl: ''\n };\n }\n\n componentDidMount() {\n\n\n if (this.props.match.params.id === undefined) {\n this.setState({\n disableOption: true,\n });\n } else {\n this.setState({\n disableOption: false,\n urlAppend: \"/\" + this.props.match.params.id,\n });\n }\n var ths = this;\n let moduleName = this.props.moduleName.replace(\"/\", \"\");\n fetch(`${apiUrl.apiUrl.url}/lease-view/amend-lease-menus?leaseId=` + this.props.match.params.id + `&moduleName=` + moduleName, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n ths.setState({\n menus: data.data,\n links: data.links\n });\n\n })\n .catch((error) => {\n console.log(error);\n });\n\n }\n componentDidUpdate() {\n let matchFound = false;\n\n Object.entries(this.state.links).forEach(([key, value]) => {\n if (matchFound) {\n matchFound = false;\n //if(key == \"submit\")\n this.props.history.push(key);\n }\n if (key == this.props.match.url) {\n if (!value) {\n matchFound = true;\n } else {\n //this.setState({lastUrl: key });\n }\n }\n });\n if (this.props.openMenu != this.state.propsMenu) {\n this.setState({\n propsMenu: this.props.openMenu,\n openMenu: [this.props.openMenu],\n });\n }\n if (this.props.activeKey != this.state.propsActiveKey) {\n this.setState({\n propsActiveKey: this.props.activeKey,\n activeKey: this.props.activeKey,\n });\n }\n if (this.props.match.params.id === undefined) {\n if (this.state.disableOption == false) {\n this.setState({\n disableOption: true,\n });\n }\n } else {\n if (this.state.disableOption == true) {\n this.setState({\n disableOption: false,\n urlAppend: \"/\" + this.props.match.params.id,\n });\n }\n }\n }\n\n render() {\n // let url = this.props.match;\n //console.log(\"rendering menu\");\n return (\n \n
\n \n {hasAccess([\"admin\", \"maker\"]) && (\n \n \n \n\n \n \n\n \n \n\n \n \n\n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n )}\n
\n \n {\n this.setState({ openMenu: [openKeys[openKeys.length - 1]] });\n }}\n >\n \n \n \n \n
\n );\n }\n}\n\nexport default withRouter(LeaseMenu);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faSave,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n withRouter,\n useParams,\n} from \"react-router-dom\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { unitTypeConstant, unitStatusConstant } from \"../../constants\";\nimport { Redirect } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport Popup from \"reactjs-popup\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport Select from \"react-select\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { clientId } from \"../../utils/index\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LeaseLandlord extends React.Component {\n validator = [];\n mainFormValidator = [];\n state = {\n submitDisable: false,\n messsagePopup: false,\n popupContent: \"\",\n vendor_code: \"\",\n clientGroupName: \"\",\n clientGroupId: \"\",\n popupData: {},\n index_val: \"\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n isOpen: false,\n delete: false,\n assetId: \"\",\n tower: \"\",\n subAssetName: \"\",\n assetName: \"\",\n assetNames: [],\n subAssets: [],\n towers: [],\n floors: [],\n unitDetails: [],\n LandlordGroups: [],\n clientGroup: [],\n clientNames: [],\n redirect: false,\n landlords: [],\n landlordCount: 1,\n states: [],\n landlordAssetName: \"\",\n landlordAssetId: \"\",\n landlordSubAssetName: \"\",\n landlordSubAssetId: \"\",\n landlordTower: \"\",\n landlordFloor: \"\",\n landlordUnitNo: \"\",\n landlordUnitType: \"\",\n landlordUnitStatus: \"\",\n units: [],\n leaseId: \"\",\n costCenter: \"\",\n\n notes_1: \"\",\n totalUsableArea: 0,\n totalGrossLeasableArea: 0,\n leaseCreationDate: \"\",\n isDisabled: false,\n selectedCompanies: [],\n initialValues: {\n leaseCreationDate: \"tghj\",\n units: [],\n },\n };\n\n constructor(props) {\n super(props);\n this.getLandlordUnitNo = this.getLandlordUnitNo.bind(this);\n this.getLandlordUnitType = this.getLandlordUnitType.bind(this);\n this.getLandlordUnitStatus = this.getLandlordUnitStatus.bind(this);\n this.getLandlordownershipPercent =\n this.getLandlordownershipPercent.bind(this);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n //fetch(`${apiUrl.apiUrl.url}/client-groups`)\n fetch(`${apiUrl.apiUrl.url}/client-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientGroup: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/asset/fetch-all-assets`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assetNames: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n fetch(`${apiUrl.apiUrl.url}/states/country-states/1`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //fetch(`${apiUrl.apiUrl.url}/landlord-groups`)\n fetch(`${apiUrl.apiUrl.url}/landlord-group/fetch-landlord-list`, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n LandlordGroups: data,\n });\n if (this.props.match.params.id !== undefined) {\n\n let athis= this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-landlord-form?id=${this.props.match.params.id}`).then((response)=>{\n let data = response.data;\n let obj = athis.state.clientGroup.find(\n (o) => o.id == data.clientGroup\n );\n let obj1 = athis.state.assetNames.find(\n (o) => o.id == data.assetId\n );\n\n athis.setState({\n landlords: data.landlord,\n units: data.units,\n notes_1: data.notes_1,\n leaseId: data.leaseId,\n costCenter: data.costCenter,\n leaseCreationDate: data.leaseCreationDate,\n landlordCount: data.landlord.length,\n clientNames: data.clients,\n subAssets: data.subAssets,\n towers: data.towers,\n floors: data.floors,\n tower: data.tower,\n landlordAssetName: data.assetName,\n landlordSubAssetName: data.subAssetNameValue,\n landlordSubAssetId: data.landlordSubAssetId,\n clientGroupId: data.clientGroup,\n landlordAssetId: data.assetId,\n //vendor_code: data.vendor_code,\n isDisabled: true,\n });\n for (let i = 0; i < data.landlord.length; i++) {\n let obj = athis.state.LandlordGroups.find(\n (o) => o.id == data.landlord[i].companyGroup\n );\n\n athis.state.landlords[i].companyGroupName = obj.group_name;\n }\n if (data.clientGroup) {\n athis.setState({ clientGroupName: obj.group_name });\n }\n if (data.assetId) {\n athis.setState({\n landlordAssetName: obj1.asset_name,\n });\n }\n for (let i = 0; i < data.landlord.length; i++) {\n let find = data.landlord[i].gstNumber.substring(0, 2);\n var state = athis.state.states.find((x) => x.gst_code == find);\n if (state != undefined) {\n athis.state.landlords[i].gstState = state.id;\n athis.state.landlords[i].gstStateCode = state.gst_code;\n }\n //athis.state.landlords[i].vendorCode = data.landlord[i].vendorCode;\n }\n athis.setState({\n initialValues: data,\n });\n this.setState({});\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-landlord-form?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // let obj = this.state.clientGroup.find(\n // (o) => o.id == data.clientGroup\n // );\n // let obj1 = this.state.assetNames.find(\n // (o) => o.id == data.assetId\n // );\n\n // this.setState({\n // landlords: data.landlord,\n // units: data.units,\n // notes_1: data.notes_1,\n // leaseId: data.leaseId,\n // costCenter: data.costCenter,\n // leaseCreationDate: data.leaseCreationDate,\n // landlordCount: data.landlord.length,\n // clientNames: data.clients,\n // subAssets: data.subAssets,\n // towers: data.towers,\n // floors: data.floors,\n // tower: data.tower,\n // landlordAssetName: data.assetName,\n // landlordSubAssetName: data.subAssetNameValue,\n // landlordSubAssetId: data.landlordSubAssetId,\n // clientGroupId: data.clientGroup,\n // landlordAssetId: data.assetId,\n // //vendor_code: data.vendor_code,\n // isDisabled: true,\n // });\n // for (let i = 0; i < data.landlord.length; i++) {\n // let obj = this.state.LandlordGroups.find(\n // (o) => o.id == data.landlord[i].companyGroup\n // );\n\n // this.state.landlords[i].companyGroupName = obj.group_name;\n // }\n // if (data.clientGroup) {\n // this.setState({ clientGroupName: obj.group_name });\n // }\n // if (data.assetId) {\n // this.setState({\n // landlordAssetName: obj1.asset_name,\n // });\n // }\n // for (let i = 0; i < data.landlord.length; i++) {\n // let find = data.landlord[i].gstNumber.substring(0, 2);\n // var state = this.state.states.find((x) => x.gst_code == find);\n // if (state != undefined) {\n // this.state.landlords[i].gstState = state.id;\n // this.state.landlords[i].gstStateCode = state.gst_code;\n // }\n // //this.state.landlords[i].vendorCode = data.landlord[i].vendorCode;\n // }\n // this.setState({\n // initialValues: data,\n // });\n // this.setState({});\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n autoSelectGstState(e, i) {\n let find = e.target.value.substring(0, 2);\n var state = this.state.states.find((x) => x.gst_code == find);\n this.state.landlords[i].gstState = state.id;\n this.state.landlords[i].gstStateCode = state.gst_code;\n this.setState({});\n console.log(state, \"Ev\");\n }\n\n getTotalUsableArea() {\n let totalUsableArea = 0;\n for (let i = 0; i < this.state.units.length; i++) {\n totalUsableArea += this.state.units[i].usableArea;\n }\n return totalUsableArea.toFixed(2);\n }\n getTotalGrossleasableArea() {\n let totalGrossleasableArea = 0;\n for (let i = 0; i < this.state.units.length; i++) {\n totalGrossleasableArea += this.state.units[i].grossLeasableArea;\n }\n return totalGrossleasableArea.toFixed(2);\n }\n\n changeClientGroup(e) {\n this.state.clientGroupName = e.label;\n this.state.clientGroupId = e.value;\n this.setState({});\n console.groupEnd();\n fetch(\n `${apiUrl.apiUrl.url}/client/fetch-group-clients?id=` +\n this.state.clientGroupId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n clientNames: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n changeAsset = (e, i) => {\n this.state.landlordAssetName = e.label;\n this.state.landlordAssetId = e.value;\n this.setState({});\n console.groupEnd();\n this.setState({});\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-sub-assets?asset_id=` +\n this.state.landlordAssetId,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n subAssets: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeLandlordGroup = (e, i) => {\n this.state.landlords[i].companyGroupName = e.label;\n this.state.landlords[i].companyGroup = e.value;\n this.setState({});\n console.groupEnd();\n this.setState({});\n let groupid = e.value;\n fetch(`${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` + groupid, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n var _landlords = this.state.landlords;\n\n _landlords[i].companies = data;\n this.setState({\n landlords: _landlords,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeSubAsset = (e) => {\n let subAssetId = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/asset/sub-asset-towers/?id=` + subAssetId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n // var _landlords = this.state.landlords;\n\n // _landlords[i].towers = data;\n this.setState({\n towers: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleAddUnit = (e, id, setFieldError) => {\n if (!this.validator[id].allValid()) {\n this.validator[id].getErrorMessages();\n console.log(this.validator[id].getErrorMessages());\n this.validator[id].showMessages();\n this.forceUpdate();\n return false;\n }\n console.log(this.state, \"an\");\n console.log(this.state.landlords[id], \"an\");\n let ownershipPercent = this.state.landlords[id].unit.ownershipPercent;\n var thisUnit = {\n unitNo: this.state.landlords[id].unit.unitNo,\n unitId: this.state.landlords[id].unit.unitId,\n unitType: this.state.landlords[id].unit.unitType,\n unitStatus: this.state.landlords[id].unit.unitStatus,\n ownershipPercent: this.state.landlords[id].unit.ownershipPercent,\n landlord: this.state.landlords[id].companyName,\n landlordCompanyName: this.state.landlords[id].companies.find(\n (x) => x.id == this.state.landlords[id].companyName\n ),\n landlordName: this.state.landlords[id].companyGroupName,\n assetName: this.state.landlordAssetName,\n floor: this.state.landlords[id].unit.floor,\n usableArea:\n (this.state.landlords[id].unit.usableArea * ownershipPercent) / 100,\n grossLeasableArea:\n (this.state.landlords[id].unit.grossLeasableArea * ownershipPercent) /\n 100,\n };\n var _units = this.state.units;\n console.log(thisUnit, \"MMM\");\n _units.push(thisUnit);\n\n this.setState({ units: _units });\n var _landlords = this.state.landlords;\n _landlords[id].unit.tower = \"\";\n _landlords[id].unit.assetId = \"\";\n _landlords[id].unit.subAssetName = \"\";\n _landlords[id].unit.floor = \"\";\n _landlords[id].unit.unitId = \"\";\n _landlords[id].unit.unitNo = \"\";\n _landlords[id].unit.unitType = \"\";\n _landlords[id].unit.unitStatus = \"\";\n _landlords[id].unit.usableArea = \"\";\n _landlords[id].unit.carpetArea = \"\";\n _landlords[id].unit.grossLeasableArea = \"\";\n _landlords[id].unit.ownershipPercent = \"100\";\n this.setState({\n landlords: _landlords,\n });\n console.log(this.state.units);\n };\n\n resetUnit = (e, id, setFieldError) => {\n var _landlords = this.state.landlords;\n _landlords[id].unit.tower = \"\";\n _landlords[id].unit.assetId = \"\";\n _landlords[id].unit.subAssetName = \"\";\n _landlords[id].unit.floor = \"\";\n _landlords[id].unit.unitId = \"\";\n _landlords[id].unit.unitNo = \"\";\n _landlords[id].unit.unitType = \"\";\n _landlords[id].unit.unitStatus = \"\";\n _landlords[id].unit.usableArea = \"\";\n _landlords[id].unit.carpetArea = \"\";\n _landlords[id].unit.grossLeasableArea = \"\";\n _landlords[id].unit.ownershipPercent = \"100\";\n this.setState({\n landlords: _landlords,\n });\n };\n\n handleRemoveRow = (index) => {\n this.setState({\n rows: this.state.units.slice(index, -1),\n });\n };\n\n getLandlordSubAssetName(event) {\n this.setState({\n landlordSubAssetName: event.target.value,\n });\n }\n\n getLandlordTower(e) {\n this.setState({\n landlordTower: e.target.value,\n });\n let towerId = e.target.value;\n\n fetch(`${apiUrl.apiUrl.url}/unit-detail/get-floors?tower_id=` + towerId, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n floors: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n getLandlordFloor(e, i, id) {\n console.log(e);\n this.state.landlords[i].unit.floor = e.value;\n console.groupEnd();\n this.setState({});\n this.setState({\n landlordFloor: e.value,\n });\n let floorId = e.value;\n var url = `${apiUrl.apiUrl.url}/unit-detail/get-floor-units?tower_id=${this.state.tower}&floor=${floorId}`;\n // var self = this;\n if (this.props.match.params.id !== undefined) {\n url = `${apiUrl.apiUrl.url}/unit-detail/get-floor-units?tower_id=${this.state.tower}&floor=${floorId}&lease_id=${this.props.match.params.id}`;\n }\n fetch(url, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n var _landlords = this.state.landlords;\n _landlords[i].unitDetails = data;\n this.setState({\n landlords: _landlords,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n getLandlordUnitNo(event, i) {\n var _landlords = this.state.landlords;\n _landlords[i].unit.unitNo = event.target.value;\n this.setState({\n landlords: _landlords,\n });\n }\n\n getGSTDetails(company_id, state_id, id) {\n var url = `${apiUrl.apiUrl.url}/create-lease/get-landlord-gst-details?company_id=${company_id}&state_id=${state_id}`;\n fetch(url, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data lease landlord gst\");\n this.state.landlords[id].gstNumber = data.gst;\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n getLandlordUnitStatus(event, i) {\n var _landlords = this.state.landlords;\n _landlords[i].unit.unitStatus = event.target.value;\n this.setState({\n landlords: _landlords,\n });\n }\n\n getLandlordUnitType(event, i) {\n var _landlords = this.state.landlords;\n _landlords[i].unit.unitType = event.target.value;\n this.setState({\n landlords: _landlords,\n });\n }\n\n getLandlordownershipPercent(event, i) {\n var _landlords = this.state.landlords;\n _landlords[i].unit.ownershipPercent = event.target.value;\n this.setState({\n landlords: _landlords,\n });\n }\n redirectAfterSave = () => {\n this.setState({ redirect: true, delete: false, popupContent: \"\" });\n };\n redirectToDelete = () => {\n var _units = this.state.units;\n _units.splice(this.state.index_val, 1);\n this.setState({\n units: _units,\n delete: false,\n index_val: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n handleDelete = (index) => {\n // Create a copy of the landlords array\n let _landlords = this.state.landlords;\n\n // Remove the item at the specified index\n _landlords.splice([index - 1], 1);\n\n // Update the state\n this.setState({\n landlords: _landlords,\n landlordCount: this.state.landlordCount - 1\n });\n }\n\n landlordTabs(handleChange, setFieldError) {\n var heads = [];\n for (var i = 0; i < this.state.landlordCount; i++) {\n heads.push(\n <>\n \n
\n \n \n
\n\n \n {\n var id = i.name.split(\"[\")[1].split(\"]\")[0];\n this.state.landlords[id].companyGroup = e.value;\n this.changeLandlordGroup(e, id);\n }}\n options={this.state.LandlordGroups.map((item) => ({\n label: item.group_name,\n value: item.id,\n }))}\n />\n {this.validator[i].message(\n \"Landlord Group\",\n this.state.landlords[i].companyGroup,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n if (this.state.selectedCompanies.indexOf(e.target.value) > -1) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please Select another company\",\n });\n } else {\n this.state.landlords[id].companyName = e.target.value;\n this.state.selectedCompanies[id] =\n this.state.landlords[id].companyName;\n }\n handleChange(e);\n }}\n >\n \n {this.state.landlords[i].companies.map((obj) => (\n \n ))}\n \n
\n \n \n
\n\n \n
\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].gstState = e.target.value;\n var state = this.state.states.find(\n (x) => x.id == e.target.value\n );\n var _landlords = this.state.landlords;\n _landlords[id].gstStateCode = state.gst_code;\n this.getGSTDetails(\n _landlords[id][\"companyName\"],\n _landlords[id][\"gstState\"],\n id\n );\n this.setState({\n landlords: _landlords,\n });\n handleChange(e);\n }}\n >\n \n {this.state.states.map((obj) => (\n \n ))}\n \n
\n \n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].gstNumber = e.target.value;\n handleChange(e);\n }}\n onBlur={(e) => {\n var i = e.target.getAttribute(\"param\");\n }}\n />\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlords[id].invoiceBy = e.target.value;\n handleChange(e);\n }}\n >\n \n \n \n \n
\n \n
\n
\n\n {this.state.landlords[i].companyName !== \"\" && (\n <>\n\n \n
Unit Details
\n\n \n
\n\n \n {\n var id = i.name.split(\"[\")[1].split(\"]\")[0];\n let towerId = this.state.landlords[id].unit.tower;\n this.getLandlordFloor(e, id, towerId);\n }}\n options={this.state.floors.map((item) => ({\n label: item.floor,\n value: item.floor,\n }))}\n />\n {this.validator[i].message(\n \"Floor\",\n this.state.landlords[i].unit.floor,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n let selectedUnits = this.state.units;\n var doesExist = selectedUnits.some(\n (el) =>\n el.unitId == e.target.value &&\n this.state.landlords[id].companyName == el.landlord\n );\n if (doesExist) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please select different unit\",\n });\n return false;\n } else {\n var unit = this.state.landlords[id].unitDetails.find(\n (x) => x.id == e.target.value\n );\n var _landlords = this.state.landlords;\n _landlords[id].unit.unitId = e.target.value;\n\n if (e.target.value !== undefined) {\n _landlords[id].unit.carpetArea = unit.carpet_area;\n _landlords[id].unit.usableArea = unit.usable_area;\n _landlords[id].unit.grossLeasableArea =\n unit.gross_leasable_area;\n _landlords[id].unit.unitNo = unit.unit_no;\n _landlords[id].unit.unitType = unit.unit_type;\n _landlords[id].unit.unitStatus = unit.unit_status;\n this.setState({\n landlords: _landlords,\n });\n }\n }\n handleChange(e);\n }}\n >\n \n {this.state.landlords[i].unitDetails.map((obj) => (\n \n ))}\n \n {this.validator[i].message(\n \"Unit No\",\n this.state.landlords[i].unit.unitId,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitType(e, id);\n handleChange(e);\n }}\n />\n {this.validator[i].message(\n \"Unit Type\",\n this.state.landlords[i].unit.unitType,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordownershipPercent(e, id);\n handleChange(e);\n }}\n />\n {this.validator[i].message(\n \"Ownership Percent\",\n this.state.landlords[i].unit.ownershipPercent,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n handleChange(e);\n }}\n />\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.getLandlordUnitStatus(e, id);\n handleChange(e);\n }}\n />\n
\n \n
\n\n \n )}\n \n {\n var a = e.target.getAttribute(\"param\");\n this.handleAddUnit(e, a, setFieldError);\n }}\n >\n Add Unit\n \n {\n var a = e.target.getAttribute(\"param\");\n this.resetUnit(e, a, setFieldError);\n }}\n >\n Reset\n \n
\n \n \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n console.log(url, \"url\");\n let urlPath = url.split(\"/\");\n\n this.state.redirect = false;\n return (\n \n
\n \n {heads} \n
\n \n \n
\n {body}
\n \n \n {(close) => (\n \n \n {(close) => (\n \n
\n );\n }\n unitPopup(unit) {\n return (\n \n
\n \n {\n var unitsOwnership = {};\n var totalPercentage = 0;\n for (let i = 0; i < this.state.units.length; i++) {\n if (unitsOwnership[this.state.units[i].unitId] == undefined) {\n unitsOwnership[this.state.units[i].unitId] = Number(\n this.state.units[i].ownershipPercent\n );\n totalPercentage += this.state.units[i].ownershipPercent;\n } else {\n unitsOwnership[this.state.units[i].unitId] += Number(\n this.state.units[i].ownershipPercent\n );\n totalPercentage += this.state.units[i].ownershipPercent;\n }\n }\n\n // for (var key in unitsOwnership) {\n // if (unitsOwnership[key] < 100) {\n // // alert(\"Unit Ownership should be 100 %\");\n // this.setState({\n // popupalertMessage: true,\n // popupMessageContent: \"Unit Ownership should be 100 %\",\n // });\n // return false;\n // }\n // }\n if (totalPercentage < 100) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Unit Ownership should be 100 %\",\n });\n return false;\n }\n\n values.clientGroup = this.state.clientGroupId;\n values.assetId = this.state.landlordAssetId;\n\n if (!this.mainFormValidator.allValid()) {\n this.mainFormValidator.getErrorMessages();\n this.mainFormValidator.showMessages();\n this.forceUpdate();\n return false;\n }\n values.units = this.state.units;\n var url = `${apiUrl.apiUrl.url}/create-lease/create-lease-landlord`;\n var self = this;\n if (this.props.match.params.id !== undefined) {\n url = `${apiUrl.apiUrl.url}/create-lease/update-lease-landlord?lease_id=${this.props.match.params.id}`;\n }\n\n this.setState({ submitDisable: true });\n console.log(values);\n axios({\n method: \"post\",\n url: url,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({ submitDisable: false });\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n self.setState({ submitDisable: false });\n } else {\n //alert(\"Data Saved Successfully\");\n self.setState({\n submitDisable: false,\n messsagePopup: true,\n leaseId: response.data.id,\n\n popupContent: \"Data Saved Successfully!\",\n //submitDisable: true\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n actions,\n setFieldError,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Parties, Unit & Brand Details \n
- \n Landlord & Unit Details\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n {this.unitPopup(this.state.popupData)} \n \n
\n \n
\n \n
\n \n
\n - \n
- Unit Details \n
\n \"Are you sure you want to delete the item?\"\n \n ×\n \n
\n )}\n \n \n
\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default withRouter(LeaseLandlord);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faGrinTongueSquint,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect } from \"react-router-dom\";\nimport { BrowserRouter as Router, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport Select from \"react-select\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LeaseOccupier extends React.Component {\n // mainFormValidator = [];\n state = {\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n companyName: [],\n vendor_code: \"\",\n tower: [],\n occupierGroups: [],\n // brandCategory: [],\n // brandSubCategories: [],\n gstStates: [],\n members:[],\n brands: [],\n brandSelected: [],\n redirect: false,\n franchiseeDetails: false,\n franchiseeGstStateCode: \"\",\n franchiseeGstState: \"\",\n selectedCompanies: [],\n initialValues: {\n leaseCreationDate: \"\",\n leaseId: \"\",\n },\n brandId: [],\n occupiers: [],\n cityList: [],\n occupierCount: 1,\n // brandCategoryName: \"\",\n // brandCategoryId: \"\",\n // brandSubCategoryName: \"\",\n // brandSubCategoryId: \"\",\n brandName: \"\",\n occupierChargeable: [\n { name: \"No\", value: \"0\" },\n { name: \"Yes\", value: \"1\" },\n ],\n occupierMaxCharge: 100,\n percentage_message: \"\",\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n componentDidMount() {\n //fetch(`${apiUrl.apiUrl.url}/occupier-groups`)\n fetch(`${apiUrl.apiUrl.url}/occupier-group/fetch-list`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n occupierGroups: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brands: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/user/get-occupier-contacts`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n members: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n }); \n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/1`)\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n gstStates: data,\n });\n\n let athis=this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-occupier-form?id=${this.props.match.params.id}`).then((response) => {\n let data=response.data;\n athis.setState({\n initialValues: data,\n occupiers: data.occupier,\n occupierCount: data.occupier.length > 0 ? data.occupier.length : 1,\n // occupierCount: data.occupier.length,\n franchiseeGstState: data.franchiseeGstState,\n franchiseeGstStateCode: data.franchiseeGstStateCode,\n brandSelected: data.brandArr,\n brands: data.brands,\n brandId: data.brandId,\n cityList: data.city_list,\n });\n\n let chargeableRemaining = 0;\n\n for (let i = 0; i < data.occupier.length; i++) {\n let find = data.occupier[i].gstNumber.substring(0, 2);\n var state = athis.state.gstStates.find((x) => x.gst_code == find);\n if (\n typeof state != \"undefined\" &&\n typeof state.id != \"undefined\"\n ) {\n athis.state.occupiers[i].gstState = state.id;\n athis.state.occupiers[i].gstStateCode = state.gst_code;\n } else {\n athis.state.occupiers[i].gstState = \"\";\n athis.state.occupiers[i].gstStateCode = \"\";\n }\n\n //athis.state.occupiers[i].vendorCode = state.vendor_code;\n let obj = athis.state.occupierGroups.find(\n (o) => o.id == data.occupier[i].companyGroup\n );\n console.log(data.occupier[i].companyGroup);\n athis.state.occupiers[i].companyGroupName = obj.group_name;\n\n chargeableRemaining =\n chargeableRemaining +\n data.occupier[i].occupier_chargeable_percentage;\n }\n\n console.log(\"Available Charge: \" + chargeableRemaining);\n athis.state.occupierMaxCharge = 100 - chargeableRemaining;\n console.log(\n \"Final Available Charge: \" + athis.state.occupierMaxCharge\n );\n\n let label = data.leaseType;\n console.log(label, \"label\");\n let checkValue = label.includes(\"F\");\n let cofoCheck = label.includes(\"Cofo\");\n if (checkValue || cofoCheck) {\n athis.setState({\n franchiseeDetails: true,\n });\n } else {\n athis.setState({\n franchiseeDetails: false,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-occupier-form?id=${this.props.match.params.id}`,\n // { headers }\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.setState({\n // initialValues: data,\n // occupiers: data.occupier,\n // occupierCount: data.occupier.length > 0 ? data.occupier.length : 1,\n // // occupierCount: data.occupier.length,\n // franchiseeGstState: data.franchiseeGstState,\n // franchiseeGstStateCode: data.franchiseeGstStateCode,\n // brandSelected: data.brandArr,\n // brands: data.brands,\n // brandId: data.brandId,\n // cityList: data.city_list,\n // });\n\n // let chargeableRemaining = 0;\n\n // for (let i = 0; i < data.occupier.length; i++) {\n // let find = data.occupier[i].gstNumber.substring(0, 2);\n // var state = this.state.gstStates.find((x) => x.gst_code == find);\n // if (\n // typeof state != \"undefined\" &&\n // typeof state.id != \"undefined\"\n // ) {\n // this.state.occupiers[i].gstState = state.id;\n // this.state.occupiers[i].gstStateCode = state.gst_code;\n // } else {\n // this.state.occupiers[i].gstState = \"\";\n // this.state.occupiers[i].gstStateCode = \"\";\n // }\n\n // //this.state.occupiers[i].vendorCode = state.vendor_code;\n // let obj = this.state.occupierGroups.find(\n // (o) => o.id == data.occupier[i].companyGroup\n // );\n // console.log(data.occupier[i].companyGroup);\n // this.state.occupiers[i].companyGroupName = obj.group_name;\n\n // chargeableRemaining =\n // chargeableRemaining +\n // data.occupier[i].occupier_chargeable_percentage;\n // }\n\n // console.log(\"Available Charge: \" + chargeableRemaining);\n // this.state.occupierMaxCharge = 100 - chargeableRemaining;\n // console.log(\n // \"Final Available Charge: \" + this.state.occupierMaxCharge\n // );\n\n // let label = data.leaseType;\n // console.log(label, \"label\");\n // let checkValue = label.includes(\"F\");\n // let cofoCheck = label.includes(\"Cofo\");\n // if (checkValue || cofoCheck) {\n // this.setState({\n // franchiseeDetails: true,\n // });\n // } else {\n // this.setState({\n // franchiseeDetails: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n changeOccupier = (e, id) => {\n this.state.occupiers[id].companyGroupName = e.label;\n this.state.occupiers[id].companyGroup = e.value;\n console.log(this.state.occupiers[id], \"occupier details\");\n //this.getGSTDetails(_landlords[id][\"companyName\"], _landlords[id][\"gstState\"], id )\n\n this.setState({});\n console.groupEnd();\n this.setState({});\n fetch(\n `${apiUrl.apiUrl.url}/occupier/get-group-companies/?id=` +\n this.state.occupiers[id].companyGroup,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n let _occupiers = this.state.occupiers;\n _occupiers[id].companies = data;\n this.setState({\n occupiers: _occupiers,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeChargeable = (e, id) => {\n console.log(e.label + \"....\" + e.value);\n this.state.occupiers[id].is_occupier_chargeable_label = e.label;\n this.state.occupiers[id].is_occupier_chargeable = e.value;\n if (e.value == 0) {\n this.state.occupiers[id].occupier_chargeable_percentage = 0;\n }\n this.setState({});\n // console.groupEnd();\n // this.setState({});\n };\n\n checkPercentage = (id, value) => {\n let totalPercentage = 0;\n this.state.percentage_message = \"\";\n for (let i = 0; i < this.state.occupiers.length; i++) {\n totalPercentage += parseInt(\n this.state.occupiers[i].occupier_chargeable_percentage\n );\n console.log(this.state.occupiers[i].occupier_chargeable_percentage);\n }\n console.log(totalPercentage);\n if (totalPercentage > 100) {\n this.state.percentage_message =\n \"Occupier total percentage must be less then or equal to 100\";\n this.state.occupiers[id].occupier_chargeable_percentag = 0;\n this.setState({});\n }\n };\n\n changeBrandName = (e) => {\n this.state.brandSelected = [];\n this.state.brandId = [];\n for (let i = 0; i < e.length; i++) {\n this.state.brandId.push(e[i].value);\n this.state.brandSelected.push({\n value: e[i].value,\n label: e[i].label,\n });\n }\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n this.setState({});\n };\n\n autoSelectGstState(e, i) {\n if (e.target.value !== \"\") {\n let find = e.target.value.substring(0, 2);\n var state = this.state.gstStates.find((x) => x.gst_code == find);\n this.state.occupiers[i].gstState = state.id;\n this.state.occupiers[i].gstStateCode = state.gst_code;\n this.setState({});\n console.log(state, \"Ev\");\n }\n }\n\n autoSelectFranchiseeGstState(e) {\n let find = e.target.value.substring(0, 2);\n var state = this.state.gstStates.find((x) => x.gst_code == find);\n this.state.franchiseeGstState = state.id;\n this.state.franchiseeGstStateCode = state.gst_code;\n this.setState({});\n console.log(state, \"Ev\");\n }\n\n showFranchiseeDetails = (e) => {\n let index = e.nativeEvent.target.selectedIndex;\n let label = e.nativeEvent.target[index].label;\n let checkValue = label.includes(\"F\"); //label.includes(\"Franchisee\");\n let cofoCheck = label.includes(\"Cofo\");\n if (checkValue || cofoCheck) {\n this.setState({\n franchiseeDetails: true,\n });\n } else {\n this.setState({\n franchiseeDetails: false,\n });\n }\n };\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n redirectToClose = () => {\n this.setState({\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n getGSTDetails(company_id, state_id, id) {\n var url = `${apiUrl.apiUrl.url}/create-lease/get-occupier-gst-details?company_id=${company_id}&state_id=${state_id}`;\n fetch(url, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.state.occupiers[id].gstNumber = data.gst;\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n handleFranchiseeCityChange = (e) => {\n this.state.initialValues.franchiseeCityId = e.value;\n this.state.initialValues.franchiseeCity = e.label;\n var self = this;\n fetch(`${apiUrl.apiUrl.url}/city/city-details?city=` + e.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n self.state.initialValues.franchiseeStateId = data.stateArr.id;\n self.state.initialValues.franchiseeState = data.stateArr.state_name;\n self.state.initialValues.franchiseeDistrictId = data.districtArr.id;\n self.state.initialValues.franchiseeDistrict =\n data.districtArr.district_name;\n self.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.setState({});\n };\n\n handleDelete = (index) => {\n // Create a copy of the landlords array\n let _occupiers = this.state.occupiers;\n\n // Remove the item at the specified index\n _occupiers.splice([index - 1], 1);\n\n // Update the state\n this.setState({\n occupiers: _occupiers,\n occupierCount: this.state.occupierCount - 1\n });\n }\n\n occupierTabs(handleChange) {\n var heads = [];\n for (var i = 0; i < this.state.occupierCount; i++) {\n heads.push(\n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n\n
\n \n \n
\n\n \n {\n var id = i.name.split(\"[\")[1].split(\"]\")[0];\n this.state.occupiers[id].companyGroup = e.value;\n this.changeOccupier(e, id);\n }}\n options={this.state.occupierGroups.map((item) => ({\n label: item.group_name,\n value: item.id,\n }))}\n />\n {this.mainFormValidator.message(\n \"company Group\",\n this.state.occupiers[i].companyGroup,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n handleChange(e);\n var id = e.target.getAttribute(\"param\");\n this.state.occupiers[id].companyName = e.target.value;\n if (\n this.state.selectedCompanies.indexOf(e.target.value) > -1\n ) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please Select another company\",\n });\n } else {\n this.state.occupiers[id].companyName = e.target.value;\n this.state.selectedCompanies[id] = this.state.occupiers[id].companyName;\n }\n }}\n >\n \n {this.state.occupiers[i].companies.map((obj) => (\n \n ))}\n \n {this.mainFormValidator.message(\n \"company Name\",\n this.state.occupiers[i].companyName,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n
\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n var state = this.state.gstStates.find(\n (x) => x.id == e.target.value\n );\n var _occupiers = this.state.occupiers;\n _occupiers[id].gstStateCode = state.gst_code;\n\n this.setState({\n occupiers: _occupiers,\n });\n this.state.occupiers[id].gstState = e.target.value;\n\n this.getGSTDetails(\n _occupiers[id][\"companyName\"],\n _occupiers[id][\"gstState\"],\n id\n );\n\n this.setState({});\n handleChange(e);\n }}\n >\n \n {this.state.gstStates.map((obj) => (\n \n ))}\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n handleChange(e);\n this.state.occupiers[id].gstStateCode =\n e.target.value;\n }}\n type=\"text\"\n name={\"occupier[\" + i + \"].gstStateCode\"}\n />\n
\n \n \n
\n\n \n {\n handleChange(e);\n var id = e.target.getAttribute(\"param\");\n this.state.occupiers[id].gstNumber = e.target.value;\n }}\n onBlur={(e) => {\n var i = e.target.getAttribute(\"param\");\n }}\n />\n
\n \n \n
\n\n \n {\n let id = i.name.split(\"[\")[1].split(\"]\")[0];\n this.state.occupiers[id].is_occupier_chargeable = e.value;\n this.changeChargeable(e, id);\n }}\n options={this.state.occupierChargeable.map((item) => ({\n label: item.name,\n value: item.value,\n }))}\n />\n {this.mainFormValidator.message(\n \"company chargeable\",\n this.state.occupiers[i].is_occupier_chargeable,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n {this.state.occupiers[i].is_occupier_chargeable == 1 && (\n \n {\n handleChange(e);\n var id = e.target.getAttribute(\"param\");\n console.log(id, \"asdasd\",this.state.occupiers[id]);\n this.state.occupiers[id].member = e.target.value;\n }}\n >\n \n { typeof this.state.members[this.state.occupiers[i][\"companyName\"]] != \"undefined\" && this.state.members[this.state.occupiers[i][\"companyName\"]].map((obj) => (\n \n ))}\n \n \n
\n \n \n
\n )}\n\n \n {\n handleChange(e);\n var id = e.target.getAttribute(\"param\");\n this.state.occupiers[id].occupier_chargeable_percentage = e.target.value;\n this.checkPercentage(id, e.target.value);\n }}\n />\n {this.state.percentage_message}\n
\n \n \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n \n
\n \n {heads} \n
\n \n \n
\n {body}
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Parties, Unit & Brand Details \n
- \n Occupier & Brand Details\n \n
\n \n
\n\n \n )}\n \n \n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {\n if (!this.mainFormValidator.allValid()) {\n this.mainFormValidator.showMessages();\n return false;\n }\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-term?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Critical Dates \n
- \n Lease Term Details\n \n
\n \n
\n \n )}\n \n \n
\n \n {\n if (!this.mainFormValidator.allValid()) {\n this.mainFormValidator.showMessages();\n return false;\n }\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-broker-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n setFieldValue\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Parties, Unit & Brand Details \n
- \n Broker Details\n \n
\n \n
\n \n )}\n \n \n
\n {/* \n
\n \n
\n \n \n
\n \n \n
\n \n
\n {this.mainFormValidator.message(\n \"Lock In Period For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInPeriod,\n \"required\",\n { className: \"text-danger\" }\n )}\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriod =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n this.changeLockInPeriodOccupier(values, id);\n handleChange(e);\n }}\n >\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodYY =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"YY\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodMM =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"MM\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodDD =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"DD\"\n className=\"centerPlaceHolder\"\n />\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInFromDate =\n e.target.value;\n handleChange(e);\n }}\n />\n {this.mainFormValidator.message(\n \"Lock In From Date For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInFromDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInEndDate =\n e.target.value;\n handleChange(e);\n }}\n />\n {this.mainFormValidator.message(\n \"Lock In End Date For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInEndDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
*/}\n \n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriod =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n this.changeLockInPeriodOccupier(values, id);\n handleChange(e);\n }}\n >\n \n
\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodYY =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"YY\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodMM =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"MM\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInPeriodDD =\n e.target.value;\n this.calculateOccupierLockInEndDate(values);\n handleChange(e);\n }}\n onBlur={(e) => {\n this.calculateOccupierLockInEndDate(values);\n }}\n placeholder=\"DD\"\n className=\"centerPlaceHolder\"\n />\n
\n \n {this.mainFormValidator.message(\n \"Lock In Period For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInPeriod,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInFromDate =\n e.target.value;\n handleChange(e);\n }}\n />\n {this.mainFormValidator.message(\n \"Lock In From Date For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInFromDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.lockInPeriodOccupier[id].lockInEndDate =\n e.target.value;\n handleChange(e);\n }}\n />\n {this.mainFormValidator.message(\n \"Lock In End Date For Occupier\",\n this.state.lockInPeriodOccupier[i].lockInEndDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n \n
\n \n {heads} \n
\n \n \n
\n {body}
\n \n {\n if (!this.mainFormValidator.allValid()) {\n console.log(this.mainFormValidator);\n this.mainFormValidator.showMessages();\n return false;\n }\n console.log(values, \"val\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-lockin?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Critical Dates \n
- \n Lock In & Notice Period\n \n
\n \n
\n\n {/* */}\n \n )}\n \n \n \n {(close) => (\n \n )}\n \n \n {(close) => (\n \n
\n );\n }\n\n rentalPopup(rental) {\n console.log(rental);\n if (rental.rentalLogicValue == 1 || rental.rentalLogicValue == 2) {\n return this.rentMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 3 || rental.rentalLogicValue == 4) {\n return this.rentPlusFitoutMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 5 || rental.rentalLogicValue == 6) {\n return this.pureRevenueShareMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 7 || rental.rentalLogicValue == 8) {\n return this.pureRevenueShareSalesRangeMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 9 || rental.rentalLogicValue == 10) {\n return this.pureRevenueShareProductMinusCamPopup(rental);\n } else if (rental.rentalLogicValue == 11 || rental.rentalLogicValue == 12) {\n return this.pureRevenueShareSalesRangeProductMinusCamPopup(rental);\n } else if (\n rental.rentalLogicValue == 13 ||\n rental.rentalLogicValue == 14 ||\n rental.rentalLogicValue == 15\n ) {\n return this.minimumGuaranteeRentPlusCamMinusCam(rental);\n } else if (rental.rentalLogicValue == 16 || rental.rentalLogicValue == 17) {\n return this.minimumGuaranteeRentPlusFitoutRevenueShareMinusCam(rental);\n } else if (\n rental.rentalLogicValue == 18 ||\n rental.rentalLogicValue == 19 ||\n rental.rentalLogicValue == 28\n ) {\n return this.minimumGuaranteeRentRevenueShareSalesMinusCam(rental);\n } else if (rental.rentalLogicValue == 20 || rental.rentalLogicValue == 21) {\n return this.minimumGuaranteeRentRevenueShareProductMinusCam(rental);\n } else if (rental.rentalLogicValue == 22 || rental.rentalLogicValue == 23) {\n return this.minimumGuaranteeRentRevenueShareSalesProductMinusCam(rental);\n } else if (\n rental.rentalLogicValue == 24 ||\n rental.rentalLogicValue == 25 ||\n rental.rentalLogicValue == 26 ||\n rental.rentalLogicValue == 27\n ) {\n return this.minimumGuaranteeRentOrRevenueShareMinusCam(rental);\n }\n }\n\n rentMinusCamPopup(rental) {\n if (this.state.isRentAutocalculate === false) {\n return (\n \n {\n if (this.state.rentalDetails.length == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n if (this.state.biFurcateRentVal === 0) {\n if (\n this.state.to !==\n this.state.rentalDetails[this.state.rentalDetails.length - 1]\n .toDate\n ) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please Complete the period\",\n });\n return false;\n }\n }\n values.rentalDetails = this.state.rentalDetails;\n values.isRentAutocalculate = this.state.isRentAutocalculate;\n values.isUnitBifurcate = this.state.isUnitBifurcate;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-rent-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- \n
\n \n - Commercial Details \n
- \n
\n \n - \n Basic Rental Details\n \n
\n \n
\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.rentalPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Basic Rental Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n } else {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n\n {rental.rentalUom == \"Per Seat\" && (\n <>\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n )}\n \n
\n \n \n \n
\n \n
\n {rental.rentalUom != \"Per Seat\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n\n rentPlusFitoutMinusCamPopup(rental) {\n if (this.state.isRentAutocalculate === false) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n } else {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n\n pureRevenueShareMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pureRevenueShareSalesRangeMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pureRevenueShareProductMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n\n pureRevenueShareSalesRangeProductMinusCamPopup(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nRevenue Share (%) | \n
|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentPlusCamMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentPlusFitoutRevenueShareMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n\n minimumGuaranteeRentRevenueShareSalesMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n minimumGuaranteeRentRevenueShareProductMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentRevenueShareSalesProductMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nRevenue Share (%) | \n
|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.percent} | \n
\n
\n );\n }\n\n minimumGuaranteeRentOrRevenueShareMinusCam(rental) {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nProduct | \nFrom | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|---|
| {index + 1} | \n{name.productName} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n );\n }\n}\nexport default withRouter(RentalDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport Popup from \"reactjs-popup\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { Modal } from \"react-bootstrap\";\nimport Select from \"react-select\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport { leaseDateFormat } from \"../../utils/utils\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass OtherRentalDetails extends React.Component {\n countError = \"\";\n state = {\n deleteKey: \"\",\n totalGla: \"\",\n periodDurationDD: \"\",\n periodDurationYY: \"\",\n periodDurationMM: \"\",\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n productName: \"\",\n productId: \"\",\n to: \"\",\n index_val: \"\",\n delete: false,\n revalue: \"\",\n showAddBtn: false,\n isOpen: false,\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n rentalDetails: [],\n products: [],\n redirect: false,\n rentMinusCam: false,\n rentFitoutMinusCam: false,\n pureRevenueShareMinusCam: false,\n pureRevenueSalesShareMinusCam: false,\n pureRevenueProduct: false,\n pureRevenueSalesProduct: false,\n minimumGuaranteeRentPlusCam: false,\n minimumGuaranteeRentPlusFitout: false,\n minimumGuaranteeRentRevenueShareSalesRange: false,\n minimumGuaranteeRentRevenueShareProduct: false,\n minimumGuaranteeRentRevenueShareSalesRangeProduct: false,\n minimumGuaranteeRentRevenueShareMinimum: false,\n initialValues: {\n rentalLogic: {\n fromDate: \"\",\n toDate: \"\",\n rentalUom: \"\",\n rentDueDate: \"\",\n rentRate: \"\",\n rentRateTerm: \"\",\n onArea: \"\",\n rentFrequency: \"\",\n rentalLogicValue: \"\",\n rentalLogicText: \"\",\n minusCamPercent: \"\",\n revenueShareTerm: \"\",\n slabs: [],\n unit: \"\",\n },\n totalSlabs: \"\",\n },\n showMinusCam: false,\n biFurcateRentVal: 0,\n units: [],\n isUnitBifurcate: false,\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\",\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n biFurcateRent(e, values) {\n if (this.state.rentalDetails.length > 0) {\n var answer = window.confirm(\n \"This will remove all the current rental details, are you sure want to do this?\"\n );\n if (answer) {\n this.setState({\n rentalDetails: [],\n period: 1,\n showForm: true,\n showAddBtn: true,\n fromDate: values.from,\n });\n if (e.target.checked) {\n this.setState({ biFurcateRentVal: 1 });\n } else {\n this.setState({ biFurcateRentVal: 0 });\n }\n } else {\n return false;\n }\n } else {\n if (e.target.checked) {\n this.setState({ biFurcateRentVal: 1 });\n } else {\n this.setState({ biFurcateRentVal: 0 });\n }\n }\n if (this.state.isUnitBifurcate === false) {\n this.setState({ isUnitBifurcate: true });\n } else {\n this.setState({ isUnitBifurcate: false });\n }\n }\n\n handleUnitOnChange(e, values) {\n this.state.initialValues.rentalLogic.unit = e.target.value;\n this.setState({});\n if (this.state.rentalDetails.length > 0) {\n var bifurcatedArr = this.state.rentalDetails.filter(\n (unit) => unit.unit === e.target.value\n );\n if (bifurcatedArr.length > 0) {\n if (bifurcatedArr[bifurcatedArr.length - 1][\"toDate\"] === values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Values For this unit has completed the period\",\n });\n return false;\n }\n this.state.period = bifurcatedArr[bifurcatedArr.length - 1].period + 1;\n this.setState({\n fromDate: getToDate(\n bifurcatedArr[bifurcatedArr.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n toDate: \"\",\n });\n } else {\n this.state.period = 1;\n this.state.fromDate = values.from;\n this.setState({});\n }\n } else {\n this.state.period = 1;\n this.state.fromDate = values.from;\n this.setState({});\n }\n }\n\n autocalculateRent = (e, values) => {\n if (this.state.rentalDetails.length > 0) {\n var answer = window.confirm(\n \"This will remove all the current rental details, are you sure want to do this?\"\n );\n if (answer) {\n this.setState({\n rentalDetails: [],\n period: 1,\n showForm: true,\n showAddBtn: true,\n });\n if (e.target.checked) {\n this.setState({\n isRentAutocalculate: true,\n isRentCheckboxChecked: true,\n });\n } else {\n this.setState({\n isRentAutocalculate: false,\n });\n }\n } else {\n this.setState({\n isRentCheckboxChecked: false,\n isRentAutocalculate: false,\n });\n return false;\n }\n }\n if (this.state.isRentCheckboxChecked === false) {\n this.setState({ isRentCheckboxChecked: true, isRentAutocalculate: true });\n } else {\n this.setState({\n isRentCheckboxChecked: false,\n isRentAutocalculate: false,\n fromDate: values.from,\n });\n }\n };\n\n changeProduct(newValue, values, index) {\n this.state.initialValues.rentalLogic.slabs[index].product = newValue.value;\n this.state.initialValues.rentalLogic.slabs[index].productName =\n newValue.label;\n this.setState({});\n console.groupEnd();\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n editRental(index, values, key) {\n this.state.currentIndex = index;\n this.setState({ currentIndex: index });\n console.log(this.state.rentalDetails[key][index]);\n if (this.state.rentalDetails[key][index].unit !== undefined) {\n this.setState({ isUnitBifurcate: true, biFurcateRentVal: 1 });\n } else {\n this.setState({ isUnitBifurcate: false, biFurcateRentVal: 0 });\n }\n if (this.state.rentalDetails[key][index].rentalLogic !== undefined) {\n if (\n this.state.rentalDetails[key][index].rentalLogic.escalationPercent !==\n undefined\n ) {\n this.setState({\n isRentAutocalculate: true,\n isRentCheckboxChecked: true,\n });\n } else {\n this.setState({\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n });\n }\n } else {\n this.setState({\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n });\n }\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n this.state.period = this.state.rentalDetails[key][index].period;\n this.state.initialValues.totalSlabs =\n this.state.rentalDetails[key][index].slabNumber;\n if (\n this.state.rentalDetails[key][index].rentalLogicText.includes(\"Minus CAM\")\n ) {\n this.setState({\n showMinusCam: true,\n });\n } else {\n this.setState({\n showMinusCam: false,\n });\n }\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.rentalDetails[key][index].periodTermDD,\n periodTermMM: this.state.rentalDetails[key][index].periodTermMM,\n periodTermYY: this.state.rentalDetails[key][index].periodTermYY,\n });\n if (\n this.state.rentalDetails[key][index].rentalLogicValue === \"1\" ||\n this.state.rentalDetails[key][index].rentalLogicValue === \"2\" ||\n this.state.rentalDetails[key][index].rentalLogicValue === \"3\" ||\n this.state.rentalDetails[key][index].rentalLogicValue === \"4\"\n ) {\n this.setState({\n rentMinusCam: true,\n });\n } else {\n this.setState({\n rentMinusCam: false,\n });\n }\n console.log(values);\n values.rentalLogic = { ...this.state.rentalDetails[key][index] };\n values.rentalLogic.rentalLogicValue =\n this.state.rentalDetails[key][index].rentalLogicValue;\n this.state.initialValues.rentalLogic.rentalLogicValue =\n this.state.rentalDetails[key][index].rentalLogicValue;\n values.rentalLogic.rentalLogicText =\n this.state.rentalDetails[key][index].rentalLogicText;\n this.state.fromDate = this.state.rentalDetails[key][index].fromDate;\n this.state.toDate = this.state.rentalDetails[key][index].toDate;\n this.state.initialValues.rentalLogic.unit =\n this.state.rentalDetails[key][index].unit;\n this.setState({});\n }\n\n calculateRent = (values) => {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n let currentValues = values;\n let nextPeriodDateStart = currentValues.from;\n let _rentalDetails = this.state.rentalDetails;\n let currentPeriod = 0;\n var periodToDate;\n var endDate = currentValues.to;\n var escPercent = Number(currentValues.rentalLogic.escalationPercent);\n while (periodToDate !== endDate) {\n currentPeriod++;\n var periodStartDate = nextPeriodDateStart;\n periodToDate = getToDate(\n periodStartDate,\n this.state.periodDurationDD,\n this.state.periodDurationMM,\n this.state.periodDurationYY\n );\n if (\n new Date(periodToDate).getTime() > new Date(currentValues.to).getTime()\n ) {\n periodToDate = currentValues.to;\n }\n if (currentPeriod > 1) {\n currentValues.rentalLogic.rentRate = (\n Number(currentValues.rentalLogic.rentRate) *\n (Number(currentValues.rentalLogic.escalationPercent) / 100) +\n Number(currentValues.rentalLogic.rentRate)\n ).toFixed(2);\n }\n\n var rentalLogic = { ...currentValues.rentalLogic };\n var _currentValues = {\n fromDate: periodStartDate,\n toDate: periodToDate,\n rentalLogicText: this.state.initialValues.rentalLogic.rentalLogicText,\n rentalLogicValue: this.state.initialValues.rentalLogic.rentalLogicValue,\n periodDurationDD: this.state.periodDurationDD,\n periodDurationMM: this.state.periodDurationMM,\n periodDurationYY: this.state.periodDurationYY,\n periodTermDD: this.state.periodDurationDD,\n periodTermMM: this.state.periodDurationMM,\n periodTermYY: this.state.periodDurationYY,\n period: currentPeriod,\n slabs: [],\n escalationPercent: rentalLogic.escalationPercent,\n rentalUom: rentalLogic.rentalUom,\n onArea: rentalLogic.onArea,\n rentRateTerm: rentalLogic.rentRateTerm,\n rentRate: rentalLogic.rentRate,\n rentFrequency: rentalLogic.rentFrequency,\n rentDueDate: rentalLogic.rentDueDate,\n rentDueType: rentalLogic.rentDueType,\n rentDueFrequency: rentalLogic.rentDueFrequency,\n fitoutUom: rentalLogic.fitoutUom,\n fitoutOnArea: rentalLogic.fitoutOnArea,\n fitoutRate: rentalLogic.fitoutRate,\n fitoutFrequency: rentalLogic.fitoutFrequency,\n fitoutRateTerm: rentalLogic.fitoutRateTerm,\n minusCamPercent: rentalLogic.minusCamPercent,\n unit: rentalLogic.unit,\n };\n if (\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] ==\n undefined\n ) {\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] =\n [];\n }\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText].push(\n _currentValues\n );\n nextPeriodDateStart = getToDate(periodToDate, 2, 0, 0);\n }\n this.setState({ rentalDetails: _rentalDetails });\n values.rentalLogic.escalationPercent = \"\";\n values.rentalLogic.rentRate = \"\";\n this.setState({\n periodDurationDD: \"\",\n periodDurationMM: \"\",\n periodDurationYY: \"\",\n });\n };\n\n addRentalDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n\n return false;\n }\n values.rentalLogic.rentalLogicText =\n this.state.initialValues.rentalLogic.rentalLogicText;\n var rentalVal = this.state.initialValues.rentalLogic.rentalLogicValue;\n var _rentalDetails = this.state.rentalDetails;\n values.rentalLogic.period = this.state.period;\n values.rentalLogic.fromDate = this.state.fromDate;\n values.rentalLogic.toDate = this.state.toDate;\n values.rentalLogic.periodTermYY = this.state.periodTermYY;\n values.rentalLogic.periodTermMM = this.state.periodTermMM;\n values.rentalLogic.periodTermDD = this.state.periodTermDD;\n values.rentalLogic.slabs = this.state.initialValues.rentalLogic.slabs;\n values.rentalLogic.unit = this.state.initialValues.rentalLogic.unit;\n if (\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] ==\n undefined\n ) {\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] =\n [];\n }\n _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText].push(\n values.rentalLogic\n );\n this.setState({\n rentalDetails: _rentalDetails,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.rentalLogic.rentalLogicValue = \"\";\n _initialValues.rentalLogic.slabs = [];\n this.state.initialValues.totalSlabs = \"\";\n this.state.period++;\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.rentalDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n setFieldValue(\"rentalLogic.rentRate\", \"\");\n setFieldValue(\"rentalLogic.escalationPercent\", \"\");\n // resetForm();\n } else {\n console.log(this.state.currentIndex);\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n // values.rentalLogic.rentalLogicText =\n // this.state.initialValues.rentalLogic.rentalLogicText;\n var _rentalDetails = this.state.rentalDetails;\n values.rentalLogic.period = this.state.period;\n values.rentalLogic.fromDate = this.state.fromDate;\n values.rentalLogic.toDate = this.state.toDate;\n values.rentalLogic.periodTermYY = this.state.periodTermYY;\n values.rentalLogic.periodTermMM = this.state.periodTermMM;\n values.rentalLogic.periodTermDD = this.state.periodTermDD;\n values.rentalLogic.slabs = this.state.initialValues.rentalLogic.slabs;\n // if (\n // _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] ==\n // undefined\n // ) {\n // _rentalDetails[this.state.initialValues.rentalLogic.rentalLogicText] =\n // [];\n // }\n console.log(\n _rentalDetails[values.rentalLogic.rentalLogicText][\n this.state.currentIndex\n ]\n );\n _rentalDetails[values.rentalLogic.rentalLogicText][\n this.state.currentIndex\n ] = { ...values.rentalLogic };\n\n this.setState({\n rentalDetails: _rentalDetails,\n });\n console.log(this.state.rentalDetails, this.state.currentIndex, \"pop\");\n this.state.period++;\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n var _initialValues = this.state.initialValues;\n _initialValues.rentalLogic.rentalLogicValue = \"\";\n _initialValues.rentalLogic.slabs = [];\n this.state.initialValues.totalSlabs = \"\";\n // values.rentalLogic.unit = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.rentalDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n // resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({});\n }\n };\n\n resetRentalDetails = (values, resetForm) => {\n var _initialValues = this.state.initialValues;\n _initialValues.rentalLogic.rentalLogicValue = \"\";\n _initialValues.rentalLogic.slabs = [];\n this.state.initialValues.totalSlabs = \"\";\n this.setState({\n // rentalDetails: _rentalDetails,\n rentMinusCam: false,\n rentFitoutMinusCam: false,\n pureRevenueShareMinusCam: false,\n pureRevenueSalesShareMinusCam: false,\n pureRevenueProduct: false,\n pureRevenueSalesProduct: false,\n minimumGuaranteeRentPlusCam: false,\n minimumGuaranteeRentPlusFitout: false,\n minimumGuaranteeRentRevenueShareSalesRange: false,\n minimumGuaranteeRentRevenueShareProduct: false,\n minimumGuaranteeRentRevenueShareSalesRangeProduct: false,\n minimumGuaranteeRentRevenueShareMinimum: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.rentalDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n };\n\n handleReset = () => {\n var _initialValues = this.state.initialValues;\n _initialValues.rentalLogic.rentalLogicValue = \"\";\n _initialValues.rentalLogic.slabs = [];\n this.state.initialValues.totalSlabs = \"\";\n this.setState({\n // rentalDetails: _rentalDetails,\n rentMinusCam: false,\n rentFitoutMinusCam: false,\n pureRevenueShareMinusCam: false,\n pureRevenueSalesShareMinusCam: false,\n pureRevenueProduct: false,\n pureRevenueSalesProduct: false,\n minimumGuaranteeRentPlusCam: false,\n minimumGuaranteeRentPlusFitout: false,\n minimumGuaranteeRentRevenueShareSalesRange: false,\n minimumGuaranteeRentRevenueShareProduct: false,\n minimumGuaranteeRentRevenueShareSalesRangeProduct: false,\n minimumGuaranteeRentRevenueShareMinimum: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.rentalDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n };\n\n addSlabRow = (e) => {\n this.state.initialValues.totalSlabs = e.target.value;\n if (this.state.initialValues.rentalLogic.slabs.length < e.target.value) {\n var toAppend =\n e.target.value - this.state.initialValues.rentalLogic.slabs.length;\n for (var i = 0; i < toAppend; i++) {\n this.state.initialValues.rentalLogic.slabs.push({\n from: \"\",\n to: \"\",\n percent: \"\",\n product: \"\",\n });\n }\n } else if (\n this.state.initialValues.rentalLogic.slabs.length > e.target.value\n ) {\n var toRemove =\n this.state.initialValues.rentalLogic.slabs.length - e.target.value;\n for (var i = 0; i < toRemove; i++) {\n this.state.initialValues.rentalLogic.slabs.pop({});\n }\n }\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.rentalLogic.slabs[index + 1].from =\n Number(e.target.value) + Number(1);\n this.setState({});\n }\n\n handleRentalLogicChange = (event, values) => {\n let index = event.nativeEvent.target.selectedIndex;\n let label = event.nativeEvent.target[index].label;\n this.state.initialValues.rentalLogic.rentalLogicText = label;\n this.state.initialValues.rentalLogic.rentalLogicValue = event.target.value;\n console.log(this.state.rentalDetails[label]);\n if (\n this.state.rentalDetails[label] !== undefined &&\n this.state.rentalDetails[label].length > 0 &&\n this.state.rentalDetails[label][\n this.state.rentalDetails[label].length - 1\n ].toDate == values.to\n ) {\n this.state.initialValues.rentalLogic.rentalLogicText = \"\";\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n var _rentalDetails = this.state.rentalDetails;\n if (\n _rentalDetails[label] == undefined ||\n _rentalDetails[label].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _rentalDetails[label][_rentalDetails[label].length - 1].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period = this.state.rentalDetails[label].length + 1;\n }\n\n this.setState({});\n values.rentalLogic.rentalUom = \"\";\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n\n let checkValue = label.includes(\"Minus CAM\");\n\n if (checkValue) {\n this.setState({\n showMinusCam: true,\n });\n } else {\n this.setState({\n showMinusCam: false,\n });\n }\n if (\n event.target.value === \"1\" ||\n event.target.value === \"2\" ||\n event.target.value === \"3\" ||\n event.target.value === \"4\"\n ) {\n this.setState({\n rentMinusCam: true,\n });\n } else {\n this.setState({\n rentMinusCam: false,\n });\n }\n };\n\n componentDidMount() {\n let athis=this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-rent-details?id=${this.props.match.params.id}`).then((response)=>{\n let data = response.data;\n athis.state.totalGla = data.total_gla;\n athis.state.isRentAutocalculate = data.isRentAutocalculate;\n athis.state.isUnitBifurcate = data.isUnitBifurcate;\n if (data.isRentAutocalculate) {\n athis.setState({ isRentCheckboxChecked: true });\n } else {\n athis.setState({ isRentCheckboxChecked: false });\n }\n athis.state.to = data.to;\n athis.state.fromDate = data.from;\n if (data.rentalDetails.length > 0) {\n if (\n data.rentalDetails[data.rentalDetails.length - 1].toDate == data.to\n ) {\n athis.setState({\n showForm: false,\n });\n }\n\n athis.setState({\n fromDate: getToDate(\n data.rentalDetails[data.rentalDetails.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n\n athis.setState({\n initialValues: data,\n rentalDetails: data.rentalDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period:\n data.rentalDetails.length > 0 ? data.rentalDetails.length + 1 : 1,\n units: data.units,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-rent-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.totalGla = data.total_gla;\n // this.state.isRentAutocalculate = data.isRentAutocalculate;\n // this.state.isUnitBifurcate = data.isUnitBifurcate;\n // if (data.isRentAutocalculate) {\n // this.setState({ isRentCheckboxChecked: true });\n // } else {\n // this.setState({ isRentCheckboxChecked: false });\n // }\n // this.state.to = data.to;\n // this.state.fromDate = data.from;\n // if (data.rentalDetails.length > 0) {\n // console.log(\"11\");\n // if (\n // data.rentalDetails[data.rentalDetails.length - 1].toDate == data.to\n // ) {\n // console.log(\"12\");\n // this.setState({\n // showForm: false,\n // });\n // }\n // // let _tempDate = new Date(\n // // data.rentalDetails[data.rentalDetails.length - 1].toDate\n // // );\n\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // console.log(dd, mm, y);\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.rentalDetails[data.rentalDetails.length - 1].toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // this.setState({\n // initialValues: data,\n // rentalDetails: data.rentalDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period:\n // data.rentalDetails.length > 0 ? data.rentalDetails.length + 1 : 1,\n // units: data.units,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n\n fetch(`${apiUrl.apiUrl.url}/product-master/get-all-products`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n products: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n calculateToDate(values) {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n Number(this.state.periodTermMM),\n this.state.periodTermYY\n ),\n });\n }\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"rentalLogic.rentRate\",\n (\n Number(\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ][\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ].length - 1\n ].rentRate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"rentalLogic.escalationPercent\",\n (\n ((Number(e.target.value) -\n Number(\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ][\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ].length - 1\n ].rentRate\n )) /\n Number(\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ][\n this.state.rentalDetails[\n this.state.initialValues.rentalLogic.rentalLogicText\n ].length - 1\n ].rentRate\n )) *\n 100\n ).toFixed(2)\n );\n }\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _rentals = this.state.rentalDetails;\n _rentals[this.state.deleteKey].splice(this.state.index_val, 1);\n\n this.setState({\n rentalDetails: _rentals,\n showForm: true,\n });\n if (this.state.period > 1) {\n this.state.period--;\n }\n\n if (this.state.rentalDetails[this.state.deleteKey].length > 0) {\n console.log(\"11\");\n this.setState({\n fromDate: getToDate(\n this.state.rentalDetails[this.state.deleteKey][\n this.state.rentalDetails[this.state.deleteKey].length - 1\n ].toDate,\n 2,\n 0,\n 0\n ),\n });\n } else {\n this.setState({\n fromDate: this.state.revalue,\n });\n }\n this.setState({\n delete: false,\n index_val: \"\",\n revalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.escalationPercent != undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n {\n values.rentalDetails = { ...this.state.rentalDetails };\n values.isRentAutocalculate = this.state.isRentAutocalculate;\n values.isUnitBifurcate = this.state.isUnitBifurcate;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-other-rent-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Commercial Details \n
- \n Other Rental Details\n \n
\n \n
\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.rentalPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Rental Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n } else {\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n}\nexport default withRouter(OtherRentalDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage, FieldArray } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass CamDetails extends React.Component {\n countError = \"\";\n state = {\n escalationIndex: 0,\n periodDurationDD: \"\",\n periodDurationYY: \"\",\n periodDurationMM: \"\",\n disableOnEdit: false,\n currentIndex: null,\n readOnEdit: false,\n applicableValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n revalue: \"\",\n to: \"\",\n showCamActalization: false,\n showCamCapped: false,\n showAddBtn: false,\n isOpen: false,\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n camDetails: [],\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n initialValues: {\n camLogic: {\n fromDate: \"\",\n toDate: \"\",\n camUom: \"\",\n camDueDate: \"\",\n camRate: \"\",\n camRateTerm: \"\",\n onArea: \"\",\n camFrequency: \"\",\n camLogicValue: \"\",\n camLogicText: \"\",\n rentUom: \"\",\n rentRate: \"\",\n percentageofRent: \"\",\n slabs: [],\n camActualizationPeriod: \"\",\n unit: \"\",\n },\n totalSlabs: \"\",\n },\n toggleCamForm: false,\n biFurcateRentVal: 0,\n units: [],\n isUnitBifurcate: false,\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n showCamForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\") {\n this.setState({\n toggleCamForm: true,\n });\n } else {\n this.setState({\n toggleCamForm: false,\n });\n }\n };\n\n biFurcateRent(e, values) {\n if (this.state.camDetails.length > 0) {\n var answer = window.confirm(\n \"This will remove all the current rental details, are you sure want to do this?\"\n );\n if (answer) {\n this.setState({\n camDetails: [],\n period: 1,\n showForm: true,\n showAddBtn: true,\n fromDate: values.from,\n });\n if (e.target.checked) {\n this.setState({ biFurcateRentVal: 1 });\n } else {\n this.setState({ biFurcateRentVal: 0 });\n }\n } else {\n return false;\n }\n } else {\n if (e.target.checked) {\n this.setState({ biFurcateRentVal: 1 });\n } else {\n this.setState({ biFurcateRentVal: 0 });\n }\n }\n if (this.state.isUnitBifurcate === false) {\n this.setState({ isUnitBifurcate: true });\n } else {\n this.setState({ isUnitBifurcate: false });\n }\n }\n\n autocalculateRent = (e, values) => {\n if (this.state.camDetails.length > 0) {\n var answer = window.confirm(\n \"This will remove all the current rental details, are you sure want to do this?\"\n );\n if (answer) {\n this.setState({\n camDetails: [],\n period: 1,\n showForm: true,\n showAddBtn: true,\n });\n if (e.target.checked) {\n this.setState({\n isRentAutocalculate: true,\n isRentCheckboxChecked: true,\n });\n } else {\n this.setState({\n isRentAutocalculate: false,\n });\n }\n } else {\n this.setState({\n isRentCheckboxChecked: false,\n isRentAutocalculate: false,\n });\n return false;\n }\n }\n if (this.state.isRentCheckboxChecked === false) {\n this.setState({ isRentCheckboxChecked: true, isRentAutocalculate: true });\n } else {\n this.setState({\n isRentCheckboxChecked: false,\n isRentAutocalculate: false,\n fromDate: values.from,\n });\n }\n };\n\n handleUnitOnChange(e, values) {\n this.state.initialValues.camLogic.unit = e.target.value;\n this.setState({});\n if (this.state.camDetails.length > 0) {\n var bifurcatedArr = this.state.camDetails.filter(\n (unit) => unit.unit === e.target.value\n );\n if (bifurcatedArr.length > 0) {\n if (bifurcatedArr[bifurcatedArr.length - 1][\"toDate\"] === values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Values For this unit has completed the period\",\n });\n return false;\n }\n this.state.period = bifurcatedArr[bifurcatedArr.length - 1].period + 1;\n this.setState({\n fromDate: getToDate(\n bifurcatedArr[bifurcatedArr.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n toDate: \"\",\n });\n } else {\n this.state.period = 1;\n this.state.fromDate = values.from;\n this.setState({});\n }\n } else {\n this.state.period = 1;\n this.state.fromDate = values.from;\n this.setState({});\n }\n }\n\n calculateRent = (values) => {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n let currentValues = values;\n let nextPeriodDateStart = currentValues.from;\n let _camDetails = this.state.camDetails;\n let currentPeriod = 0;\n var periodToDate;\n var endDate = currentValues.to;\n var escPercent = Number(currentValues.camLogic.escalationPercent);\n while (periodToDate !== endDate) {\n currentPeriod++;\n var periodStartDate = nextPeriodDateStart;\n periodToDate = getToDate(\n periodStartDate,\n this.state.periodDurationDD,\n this.state.periodDurationMM,\n this.state.periodDurationYY\n );\n if (\n new Date(periodToDate).getTime() > new Date(currentValues.to).getTime()\n ) {\n periodToDate = currentValues.to;\n }\n if (currentPeriod > 1) {\n currentValues.camLogic.camRate = (\n Number(currentValues.camLogic.camRate) *\n (Number(currentValues.camLogic.escalationPercent) / 100) +\n Number(currentValues.camLogic.camRate)\n ).toFixed(2);\n }\n\n var camLogic = { ...currentValues.camLogic };\n var _currentValues = {\n fromDate: periodStartDate,\n toDate: periodToDate,\n camLogicText: this.state.initialValues.camLogic.camLogicText,\n camLogicValue: this.state.initialValues.camLogic.camLogicValue,\n periodDurationDD: this.state.periodDurationDD,\n periodDurationMM: this.state.periodDurationMM,\n periodDurationYY: this.state.periodDurationYY,\n periodTermDD: this.state.periodDurationDD,\n periodTermMM: this.state.periodDurationMM,\n periodTermYY: this.state.periodDurationYY,\n period: currentPeriod,\n slabs: [],\n escalationPercent: camLogic.escalationPercent,\n camUom: camLogic.camUom,\n onArea: camLogic.onArea,\n camRateTerm: camLogic.camRateTerm,\n rentRate: camLogic.rentRate,\n camRate: camLogic.camRate,\n camFrequency: camLogic.camFrequency,\n camDueDate: camLogic.camDueDate,\n camDueType: camLogic.camDueType,\n camDueFrequency: camLogic.camDueFrequency,\n camActualization: camLogic.camActualization,\n camActualizationBasis: camLogic.camActualizationBasis,\n camActualizationPeriod: camLogic.camActualizationPeriod,\n camCapped: camLogic.camCapped,\n camCappedUom: camLogic.camCappedUom,\n camCappedRate: camLogic.camCappedRate,\n camCappedRateTerm: camLogic.camCappedRateTerm,\n minusCamPercent: camLogic.minusCamPercent,\n unit: camLogic.unit,\n };\n console.log(_currentValues);\n _camDetails.push(_currentValues);\n nextPeriodDateStart = getToDate(periodToDate, 2, 0, 0);\n }\n this.setState({ camDetails: _camDetails });\n values.camLogic.escalationPercent = \"\";\n values.camLogic.rentRate = \"\";\n this.setState({\n periodDurationDD: \"\",\n periodDurationMM: \"\",\n periodDurationYY: \"\",\n });\n };\n\n changeCamActualization(e) {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value == \"Yes\") {\n this.setState({\n showCamActalization: true,\n });\n } else {\n this.setState({\n showCamActalization: false,\n });\n }\n }\n\n changeCamCapped(e) {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value == \"Yes\") {\n this.setState({\n showCamCapped: true,\n });\n } else {\n this.setState({\n showCamCapped: false,\n });\n }\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n editCam(index, values) {\n if (this.state.camDetails[index].unit !== undefined) {\n this.setState({ isUnitBifurcate: true, biFurcateRentVal: 1 });\n } else {\n this.setState({ isUnitBifurcate: false, biFurcateRentVal: 0 });\n }\n if (this.state.camDetails[index].camLogic !== undefined) {\n if (\n this.state.camDetails[index].camLogic.escalationPercent !== undefined\n ) {\n this.setState({\n isRentAutocalculate: true,\n isRentCheckboxChecked: true,\n });\n } else {\n this.setState({\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n });\n }\n } else {\n this.setState({\n isRentAutocalculate: false,\n isRentCheckboxChecked: false,\n });\n }\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n\n if (this.state.camDetails[index].camCapped == \"Yes\") {\n this.setState({ showCamCapped: true });\n } else {\n this.setState({ showCamCapped: false });\n }\n this.state.period = this.state.camDetails[index].period;\n this.state.initialValues.totalSlabs =\n this.state.camDetails[index].slabNumber;\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.camDetails[index].periodTermDD,\n periodTermMM: this.state.camDetails[index].periodTermMM,\n periodTermYY: this.state.camDetails[index].periodTermYY,\n });\n if (this.state.camDetails[index].camLogicValue === \"1\") {\n this.setState({\n camBasisRate: true,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n } else if (this.state.camDetails[index].camLogicValue === \"2\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: true,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n } else if (this.state.camDetails[index].camLogicValue === \"3\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: true,\n camBasisPercentofRent: false,\n });\n } else if (this.state.camDetails[index].camLogicValue === \"4\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: true,\n });\n } else {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n }\n values.camLogic = { ...this.state.camDetails[index] };\n this.state.fromDate = this.state.camDetails[index].fromDate;\n this.state.toDate = this.state.camDetails[index].toDate;\n if (this.state.camDetails[index].camActualization == \"Yes\") {\n this.setState({ showCamActalization: true });\n } else {\n this.setState({ showCamActalization: false });\n }\n if (this.state.camDetails[index].camCapped == \"Yes\") {\n this.setState({ showCamCapped: true });\n } else {\n this.setState({ showCamCapped: false });\n }\n this.setState({});\n }\n\n addCamDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n values.camLogic.camLogicText =\n this.state.initialValues.camLogic.camLogicText;\n var _camDetails = this.state.camDetails;\n values.camLogic.period = this.state.period;\n values.camLogic.fromDate = this.state.fromDate;\n values.camLogic.toDate = this.state.toDate;\n values.camLogic.periodTermYY = this.state.periodTermYY;\n values.camLogic.periodTermMM = this.state.periodTermMM;\n values.camLogic.periodTermDD = this.state.periodTermDD;\n values.camLogic.unit = this.state.initialValues.camLogic.unit;\n _camDetails.push(values.camLogic);\n var _initialValues = this.state.initialValues;\n // _initialValues.camLogic.camLogicValue = \"\";\n _initialValues.camLogic.slabs = [];\n this.setState({\n camDetails: _camDetails,\n // camBasisRate: false,\n // camBasisPureRevenueShare: false,\n // camBasisPureRevenueShareSalesRange: false,\n // camBasisPercentofRent: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.camDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n // resetForm();\n setFieldValue(\"camLogic.camRate\", \"\");\n setFieldValue(\"camLogic.escalationPercent\", \"\");\n this.setState({ isEdit: false, escalationIndex: this.state.period - 2 });\n } else {\n console.log(\"hiii sumeet\");\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n values.camLogic.camLogicText =\n this.state.initialValues.camLogic.camLogicText;\n var _camDetails = this.state.camDetails;\n values.camLogic.period = this.state.period;\n values.camLogic.fromDate = this.state.fromDate;\n values.camLogic.toDate = this.state.toDate;\n values.camLogic.periodTermYY = this.state.periodTermYY;\n values.camLogic.periodTermMM = this.state.periodTermMM;\n values.camLogic.periodTermDD = this.state.periodTermDD;\n // _camDetails.push(values.camLogic);\n _camDetails[this.state.currentIndex] = { ...values.camLogic };\n var _initialValues = this.state.initialValues;\n // _initialValues.camLogic.camLogicValue = \"\";\n _initialValues.camLogic.slabs = [];\n this.setState({\n camDetails: _camDetails,\n // camBasisRate: false,\n // camBasisPureRevenueShare: false,\n // camBasisPureRevenueShareSalesRange: false,\n // camBasisPercentofRent: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.camDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n // resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n console.log(this.state.camDetails[\n this.state.escalationIndex\n ].camRate);\n console.log(this.state.camDetails[\n this.state.escalationIndex\n ])\n console.log(this.state.escalationIndex)\n }\n };\n\n resetCamDetails = (values, resetForm) => {\n var _initialValues = this.state.initialValues;\n _initialValues.camLogic.camLogicValue = \"\";\n _initialValues.camLogic.slabs = [];\n this.setState({\n // camDetails: _camDetails,\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.camDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n };\n\n handleReset = () => {\n var _initialValues = this.state.initialValues;\n _initialValues.camLogic.camLogicValue = \"\";\n _initialValues.camLogic.slabs = [];\n this.setState({\n // camDetails: _camDetails,\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n this.state.period++;\n // this.state.fromDate = this.state.toDate;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.camDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n };\n\n hadleCamLogicChange = (event) => {\n console.log(this.state.camDetails);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n var index1 = event.nativeEvent.target.selectedIndex;\n var text = event.nativeEvent.target[index1].label;\n this.state.initialValues.camLogic.camLogicText = text;\n this.state.initialValues.camLogic.camLogicValue = event.target.value;\n if (event.target.value === \"1\") {\n this.setState({\n camBasisRate: true,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n } else if (event.target.value === \"2\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: true,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n } else if (event.target.value === \"3\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: true,\n camBasisPercentofRent: false,\n });\n } else if (event.target.value === \"4\") {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: true,\n });\n } else {\n this.setState({\n camBasisRate: false,\n camBasisPureRevenueShare: false,\n camBasisPureRevenueShareSalesRange: false,\n camBasisPercentofRent: false,\n });\n }\n };\n\n addSlabRow = (e) => {\n console.log(e.target.value, \"vv\");\n this.state.initialValues.totalSlabs = e.target.value;\n if (this.state.initialValues.camLogic.slabs.length < e.target.value) {\n var toAppend =\n e.target.value - this.state.initialValues.camLogic.slabs.length;\n for (var i = 0; i < toAppend; i++) {\n this.state.initialValues.camLogic.slabs.push({\n from: \"\",\n to: \"\",\n percent: \"\",\n });\n }\n } else if (\n this.state.initialValues.camLogic.slabs.length > e.target.value\n ) {\n var toRemove =\n this.state.initialValues.camLogic.slabs.length - e.target.value;\n for (var i = 0; i < toRemove; i++) {\n this.state.initialValues.camLogic.slabs.pop({});\n }\n }\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.camLogic.slabs[index + 1].from =\n Number(e.target.value) + Number(1);\n this.setState({});\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n componentDidMount() {\n\n let athis=this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-details?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.state.fromDate = data.from;\n athis.state.to = data.to;\n athis.state.applicableValue = data.camApplicable;\n if (data.camDetails.length > 0) {\n if (data.camDetails[data.camDetails.length - 1].toDate == data.to) {\n athis.setState({\n showForm: false,\n });\n }\n athis.setState({\n fromDate: getToDate(\n data.camDetails[data.camDetails.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.camApplicable === \"yes\") {\n athis.setState({\n toggleCamForm: true,\n });\n } else {\n athis.setState({\n toggleCamForm: false,\n });\n }\n athis.setState({\n initialValues: data,\n units: data.units,\n camDetails: data.camDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period: data.camDetails.length > 0 ? data.camDetails.length + 1 : 1,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.fromDate = data.from;\n // this.state.to = data.to;\n // this.state.applicableValue = data.camApplicable;\n // if (data.camDetails.length > 0) {\n // if (data.camDetails[data.camDetails.length - 1].toDate == data.to) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // // let _tempDate = new Date(\n // // data.camDetails[data.camDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.camDetails[data.camDetails.length - 1].toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.camApplicable === \"yes\") {\n // this.setState({\n // toggleCamForm: true,\n // });\n // } else {\n // this.setState({\n // toggleCamForm: false,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // units: data.units,\n // camDetails: data.camDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period: data.camDetails.length > 0 ? data.camDetails.length + 1 : 1,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _cam = this.state.camDetails;\n _cam.splice(this.state.index_val, 1);\n console.log(_cam, \"new array\");\n this.setState({\n camDetails: _cam,\n showForm: true,\n });\n this.state.period--;\n if (this.state.camDetails.length > 0) {\n this.setState({\n fromDate: getToDate(\n this.state.camDetails[this.state.camDetails.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n });\n } else {\n this.setState({\n fromDate: this.state.revalue,\n });\n }\n this.setState({\n delete: false,\n index_val: \"\",\n revalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"camLogic.camRate\",\n (\n Number(\n this.state.camDetails[this.state.camDetails.length - 1].camRate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (\n this.state.period > 1 &&\n this.state.camDetails[this.state.escalationIndex].camRate !== 0\n ) {\n setFieldValue(\n \"camLogic.escalationPercent\",\n (\n ((Number(e.target.value) -\n Number(this.state.camDetails[this.state.escalationIndex].camRate)) /\n Number(\n this.state.camDetails[this.state.camDetails.length - 1].camRate\n )) *\n 100\n ).toFixed(2)\n );\n }\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n \n
\n \n
\n {rental.rentalLogicText}
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rental.rentalLogicText.includes(\"Minus CAM\") && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n {\n values.camApplicable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n this.applicableValidator.showMessages();\n return false;\n }\n if (\n this.state.camDetails.length == 0 &&\n this.state.applicableValue !== \"no\"\n ) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n if (this.state.biFurcateRentVal === 0) {\n if (\n this.state.applicableValue == \"yes\" &&\n this.state.to !==\n this.state.camDetails[this.state.camDetails.length - 1]\n .toDate\n ) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Please Complete the period\",\n });\n return false;\n }\n }\n values.camDetails = this.state.camDetails;\n values.isRentAutocalculate = this.state.isRentAutocalculate;\n values.isUnitBifurcate = this.state.isUnitBifurcate;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-cam-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Commercial Details \n
- \n CAM Details\n \n
\n \n
\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.camPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Cam Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n } else {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n }\n\n camBasisPureRevenueSharePopup(cam) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n camBasisPureRevenueShareSalesRangePopup(cam) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n camBasisPercentofRent(cam) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(CamDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n faTrashAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n electricityBasisUnitsGridRate,\n waterBasisUnitsBoard,\n gasBasisUnitsGasBank,\n hvacBasisFlatUnitRate,\n hvacBasisBtuUnitRate,\n extraHoursChargesBasisFlatRate,\n horticultureChargesFlatRate,\n} from \"../../constants\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nimport { getToDate } from \"../../utils/utils\";\nclass Utilities extends React.Component {\n countError = \"\";\n state = {\n note_val: \"\",\n disableOnEdit: false,\n currentIndex: null,\n showFirstAddBtn: true,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupData: {},\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n from: \"\",\n to: \"\",\n isOpen: false,\n leaseTermYY: \"\",\n leaseTermMM: \"\",\n leaseTermDD: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n redirect: false,\n utilities: [],\n utilityRateUomValues: [],\n initialValues: {\n utilityLogic: {\n utilityType: \"\",\n utilityUom: \"\",\n onArea: \"\",\n invoicePeriod: \"\",\n applicableFrom: \"\",\n applicableFromDate: \"\",\n dueDate: \"\",\n dueType: \"\",\n dueFrequency: \"\",\n rates: [],\n subCategoryTypes: \"\",\n },\n },\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n console.log(this.props, \"props\");\n }\n\n addRatesRow = () => {\n if (this.state.initialValues.utilityLogic.rates === undefined) {\n this.state.initialValues.utilityLogic.rates = [];\n }\n this.state.initialValues.utilityLogic.rates.push({\n from: \"\",\n to: \"\",\n rate: \"\",\n });\n if (this.state.initialValues.utilityLogic.rates.length > 0) {\n this.setState({ showFirstAddBtn: false });\n }\n this.setState({});\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.utilityLogic.rates[index + 1].from = getToDate(\n e.target.value,\n 2,\n 0,\n 0\n );\n this.setState({});\n }\n\n removeRatesRow(element) {\n this.state.initialValues.utilityLogic.rates.splice(element, 1);\n if (this.state.initialValues.utilityLogic.rates.length == 0) {\n this.setState({ showFirstAddBtn: true });\n }\n this.setState({});\n }\n\n editUtility(index, values) {\n console.log(this.state.utilities[index]);\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n\n if (this.state.utilities[index].utility.rates === undefined) {\n this.state.showFirstAddBtn = true;\n } else {\n this.state.showFirstAddBtn = false;\n }\n\n this.state.period = this.state.utilities[index].period;\n this.state.initialValues.totalSlabs =\n this.state.utilities[index].slabNumber;\n // this.loadUtilityUomValues(this.state.utilities[index].utility.utilityUom);\n if (\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ Grid Rate\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ DG\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ Solar\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ Other Sources\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Electricity Basis Units @ Blendid\"\n ) {\n this.setState({\n utilityRateUomValues: electricityBasisUnitsGridRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"Water Basis Units @ Board\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Water Basis Units @ Other Sources\"\n ) {\n this.setState({\n utilityRateUomValues: waterBasisUnitsBoard,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"Gas Basis Units @ Gas Bank\" ||\n this.state.utilities[index].utility.utilityType ===\n \"Gas Basis Units @ Piped Gas Bank\"\n ) {\n this.setState({\n utilityRateUomValues: gasBasisUnitsGasBank,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"HVAC Basis Flat Unit Rate\" ||\n this.state.utilities[index].utility.utilityType === \"Other\"\n ) {\n this.setState({\n utilityRateUomValues: hvacBasisFlatUnitRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"HVAC Basis BTU Unit Rate\"\n ) {\n this.setState({\n utilityRateUomValues: hvacBasisBtuUnitRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"CAM During Fitout Period\"\n ) {\n this.setState({\n utilityRateUomValues: hvacBasisFlatUnitRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"Extra Hours Charges Basis Flat Rate\"\n ) {\n this.setState({\n utilityRateUomValues: extraHoursChargesBasisFlatRate,\n });\n } else if (\n this.state.utilities[index].utility.utilityType ===\n \"Horticulture Charges Flat Rate\" ||\n this.state.utilities[index].utility.utilityType ===\n \"MEP Services Flat Rate\"\n ) {\n this.setState({\n utilityRateUomValues: horticultureChargesFlatRate,\n });\n } else {\n this.setState({\n utilityRateUomValues: [],\n });\n }\n this.setState({});\n values.utilityLogic.utilityType =\n this.state.utilities[index].utility.utilityType;\n values.utilityLogic.utilityUom =\n this.state.utilities[index].utility.utilityUom;\n values.utilityLogic.onArea = this.state.utilities[index].utility.onArea;\n values.utilityLogic.invoicePeriod =\n this.state.utilities[index].utility.invoicePeriod;\n values.utilityLogic.applicableFrom =\n this.state.utilities[index].utility.applicableFrom;\n values.utilityLogic.dueDate = this.state.utilities[index].utility.dueDate;\n values.utilityLogic.dueType = this.state.utilities[index].utility.dueType;\n values.utilityLogic.dueFrequency =\n this.state.utilities[index].utility.dueFrequency;\n values.utilityLogic.applicableFromDate =\n this.state.utilities[index].utility.applicableFromDate;\n values.utilityLogic.rates = this.state.utilities[index].utility.rates;\n if (this.state.utilities[index].utility.utilityType == \"Other\") {\n console.log(\"pp\");\n values.utilityLogic.subCategoryTypes =\n this.state.utilities[index].utility.subCategoryTypes;\n }\n this.state.fromDate = this.state.utilities[index].fromDate;\n this.state.toDate = this.state.utilities[index].toDate;\n this.setState({});\n }\n\n addUtilityDetails = (values) => {\n if (this.state.currentIndex === null) {\n console.log(values);\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var _utilities = this.state.utilities;\n _utilities.push({\n utility: values.utilityLogic,\n utilityRateUomValues: this.state.utilityRateUomValues,\n });\n this.setState({\n utilities: _utilities,\n showFirstAddBtn: true,\n initialValues: {\n utilityLogic: {\n utilityType: \"\",\n utilityUom: \"\",\n invoicePeriod: \"\",\n applicableFrom: \"\",\n applicableFromDate: \"\",\n dueDate: \"\",\n dueType: \"\",\n dueFrequency: \"\",\n rates: [],\n },\n },\n });\n var _initialValues = this.state.initialValues;\n _initialValues.utilityLogic = {};\n this.validator.hideMessages();\n this.setState({});\n if (this.state.utilities.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n } else {\n console.log(\"Notnull\");\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var _utilities = this.state.utilities;\n\n console.log(values.utilityLogic);\n _utilities[this.state.currentIndex].utility = { ...values.utilityLogic };\n console.log(this.state.utilities);\n this.setState({\n utilities: _utilities,\n showFirstAddBtn: true,\n initialValues: {\n utilityLogic: {\n utilityType: \"\",\n utilityUom: \"\",\n invoicePeriod: \"\",\n applicableFrom: \"\",\n applicableFromDate: \"\",\n dueDate: \"\",\n dueType: \"\",\n dueFrequency: \"\",\n rates: [],\n },\n },\n });\n var _initialValues = this.state.initialValues;\n _initialValues.utilityLogic = {};\n this.validator.hideMessages();\n this.state.currentIndex = null;\n this.setState({});\n if (this.state.utilities.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n }\n };\n\n resetUtilityDetails = (values) => {\n this.setState({\n // utilities: _utilities,\n showFirstAddBtn: true,\n initialValues: {\n utilityLogic: {\n utilityType: \"\",\n utilityUom: \"\",\n invoicePeriod: \"\",\n applicableFrom: \"\",\n applicableFromDate: \"\",\n dueDate: \"\",\n dueType: \"\",\n dueFrequency: \"\",\n rates: [],\n },\n },\n });\n var _initialValues = this.state.initialValues;\n _initialValues.utilityLogic = {};\n this.validator.hideMessages();\n this.state.currentIndex = null;\n this.setState({});\n if (this.state.utilities.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n };\n\n loadUtilityUomValues(e) {\n if (\n e.target.value === \"Electricity Basis Units @ Grid Rate\" ||\n e.target.value === \"Electricity Basis Units @ DG\" ||\n e.target.value === \"Electricity Basis Units @ Solar\" ||\n e.target.value === \"Electricity Basis Units @ Other Sources\" ||\n e.target.value === \"Electricity Basis Units @ Blendid\"\n ) {\n this.setState({\n utilityRateUomValues: electricityBasisUnitsGridRate,\n });\n } else if (\n e.target.value === \"Water Basis Units @ Board\" ||\n e.target.value === \"Water Basis Units @ Other Sources\"\n ) {\n this.setState({\n utilityRateUomValues: waterBasisUnitsBoard,\n });\n } else if (\n e.target.value === \"Gas Basis Units @ Gas Bank\" ||\n e.target.value === \"Gas Basis Units @ Piped Gas Bank\"\n ) {\n this.setState({\n utilityRateUomValues: gasBasisUnitsGasBank,\n });\n } else if (\n e.target.value === \"HVAC Basis Flat Unit Rate\" ||\n e.target.value === \"Other\"\n ) {\n this.setState({\n utilityRateUomValues: hvacBasisFlatUnitRate,\n });\n } else if (e.target.value === \"HVAC Basis BTU Unit Rate\") {\n this.setState({\n utilityRateUomValues: hvacBasisBtuUnitRate,\n });\n } else if (e.target.value === \"CAM During Fitout Period\") {\n this.setState({\n utilityRateUomValues: hvacBasisFlatUnitRate,\n });\n } else if (e.target.value === \"Extra Hours Charges Basis Flat Rate\") {\n this.setState({\n utilityRateUomValues: extraHoursChargesBasisFlatRate,\n });\n } else if (\n e.target.value === \"Horticulture Charges Flat Rate\" ||\n e.target.value === \"MEP Services Flat Rate\"\n ) {\n this.setState({\n utilityRateUomValues: horticultureChargesFlatRate,\n });\n } else {\n this.setState({\n utilityRateUomValues: [],\n });\n }\n }\n\n componentDidMount() {\n let athis=this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-utilities?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n\n athis.state.from = data.from;\n athis.state.to = data.to;\n\n athis.setState({\n utilities: data.utilities,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n });\n\n //athis.setState({ 'note_val' : data.notes_7 });\n var initialValues = athis.state.initialValues;\n initialValues[\"notes_7\"] = data.notes_7;\n\n athis.setState({ initialValues: initialValues });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-utilities?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.from = data.from;\n // this.state.to = data.to;\n\n // this.setState({\n // utilities: data.utilities,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // });\n\n // //this.setState({ 'note_val' : data.notes_7 });\n // var initialValues = this.state.initialValues;\n // initialValues[\"notes_7\"] = data.notes_7;\n\n // this.setState({ initialValues: initialValues });\n\n // console.log(initialValues, \"initialValues initialValues\");\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _mf = this.state.utilities;\n _mf.splice(this.state.index_val, 1);\n console.log(_mf, \"new array\");\n this.setState({\n utilities: _mf,\n });\n this.setState({\n delete: false,\n index_val: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {cam.unit !== undefined && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {/* \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
*/}\n \n
\n \n \n \n
\n \n
\n {/* \n
\n \n \n \n
\n \n
*/}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n CAM Actualization Basis (* Times Actual Cost){\" \"}\n *\n \n \n {cam.camActualizationBasis}\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {cam.camActualization == \"Yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n if (this.state.utilities.length == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n values.utilities = this.state.utilities;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-utilities?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Other Charges \n
- \n Utilities\n \n
\n \n
\n\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.utilityPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Utility Details \n
\n
\n );\n }\n}\n\nexport default withRouter(Utilities);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage, FieldArray } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass MarketingFund extends React.Component {\n countError = \"\";\n state = {\n escalationIndex: 0,\n voucherTotalAmt: \"\",\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n applicableValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n to: \"\",\n showMfCapped: false,\n showAddBtn: false,\n isOpen: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n revalue: \"\",\n showForm: false,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n marketingFundDetails: [],\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n initialValues: {\n mfLogic: {\n mfLogicText: \"\",\n period: \"\",\n fromDate: \"\",\n toDate: \"\",\n mfUom: \"\",\n mfDueDate: \"\",\n mfRate: \"\",\n mfRateTerm: \"\",\n onArea: \"\",\n mfFrequency: \"\",\n mfCapped: \"\",\n mfCappedOnArea: \"\",\n rentUom: \"\",\n rentRate: \"\",\n percentageofRent: \"\",\n voucherType: \"\",\n voucherTotalAmount: \"\",\n voucherAmount: \"\",\n voucherCount: \"\",\n voucherRate: \"\",\n mfLogicText: \"\",\n slabs: [],\n },\n totalSlabs: \"\",\n },\n toggleMfForm: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n changeMfCapped(e) {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value == \"yes\") {\n this.setState({\n showMfCapped: true,\n });\n } else {\n this.setState({\n showMfCapped: false,\n });\n }\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n editMf(index, values) {\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n console.log(this.state.marketingFundDetails[index].voucherTotalAmount);\n this.state.period = this.state.marketingFundDetails[index].period;\n values.mfLogic.mfLogicText =\n this.state.marketingFundDetails[index].mfLogicText;\n this.state.initialValues.mfLogic.mfLogicText =\n this.state.marketingFundDetails[index].mfLogicText;\n this.state.initialValues.totalSlabs =\n this.state.marketingFundDetails[index].slabNumber;\n this.state.voucherTotalAmt =\n this.state.marketingFundDetails[index].voucherTotalAmount;\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.marketingFundDetails[index].periodTermDD,\n periodTermMM: this.state.marketingFundDetails[index].periodTermMM,\n periodTermYY: this.state.marketingFundDetails[index].periodTermYY,\n });\n if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis Rate\"\n ) {\n this.setState({\n marketingFundBasisRate: true,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis Pure Revenue Share\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: true,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis Pure Revenue Share Sales Range\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: true,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis % of Rent\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: true,\n marketingFundBasisVouchers: false,\n });\n } else if (\n this.state.marketingFundDetails[index].mfLogicText ===\n \"Marketing Fund Basis Vouchers\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: true,\n });\n } else {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n }\n values.mfLogic = { ...this.state.marketingFundDetails[index] };\n this.state.fromDate = this.state.marketingFundDetails[index].fromDate;\n this.state.toDate = this.state.marketingFundDetails[index].toDate;\n\n if (this.state.marketingFundDetails[index].mfCapped == \"Yes\") {\n this.setState({ showMfCapped: true });\n } else {\n this.setState({ showMfCapped: false });\n }\n this.setState({});\n }\n\n addMfDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n var _marketingFundDetails = this.state.marketingFundDetails;\n values.mfLogic.period = this.state.period;\n values.mfLogic.fromDate = this.state.fromDate;\n values.mfLogic.toDate = this.state.toDate;\n values.mfLogic.periodTermYY = this.state.periodTermYY;\n values.mfLogic.periodTermMM = this.state.periodTermMM;\n values.mfLogic.periodTermDD = this.state.periodTermDD;\n\n _marketingFundDetails.push(values.mfLogic);\n\n this.setState({\n marketingFundDetails: _marketingFundDetails,\n // marketingFundBasisRate: false,\n // marketingFundBasisPureRevenueShare: false,\n // marketingFundBasisPureRevenueShareSalesRange: false,\n // marketingFundBasisPercentofRent: false,\n // marketingFundBasisVouchers: false,\n });\n var _initialValues = this.state.initialValues;\n // _initialValues.mfLogic.mfLogicText = \"\";\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n _initialValues.mfLogic.slabs = [];\n _initialValues.totalSlabs = 0;\n\n this.setState({ initialValues: _initialValues });\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.marketingFundDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n setFieldValue(\"mfLogic.mfRate\", \"\");\n setFieldValue(\"mfLogic.escalationPercent\", \"\");\n this.setState({ isEdit: false, escalationIndex: this.state.period - 2 });\n } else {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n // values.mfLogic.mfLogicText = this.state.initialValues.mfLogic.mfLogicText;\n var _marketingFundDetails = this.state.marketingFundDetails;\n values.mfLogic.period = this.state.period;\n values.mfLogic.fromDate = this.state.fromDate;\n values.mfLogic.toDate = this.state.toDate;\n values.mfLogic.periodTermYY = this.state.periodTermYY;\n values.mfLogic.periodTermMM = this.state.periodTermMM;\n values.mfLogic.periodTermDD = this.state.periodTermDD;\n\n _marketingFundDetails[this.state.currentIndex] = { ...values.mfLogic };\n\n this.setState({\n marketingFundDetails: _marketingFundDetails,\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n var _initialValues = this.state.initialValues;\n // _initialValues.mfLogic.mfLogicText = \"\";\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n _initialValues.mfLogic.slabs = [];\n _initialValues.totalSlabs = 0;\n\n this.setState({ initialValues: _initialValues });\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.marketingFundDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n }\n };\n\n resetMfDetails = (values, resetForm) => {\n this.setState({\n // marketingFundDetails: _marketingFundDetails,\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n var _initialValues = this.state.initialValues;\n // _initialValues.mfLogic.mfLogicText = \"\";\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n _initialValues.mfLogic.slabs = [];\n _initialValues.totalSlabs = 0;\n\n this.setState({ initialValues: _initialValues });\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.marketingFundDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n };\n\n\n handleReset = () => {\n this.setState({\n // marketingFundDetails: _marketingFundDetails,\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n var _initialValues = this.state.initialValues;\n // _initialValues.mfLogic.mfLogicText = \"\";\n // this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n _initialValues.mfLogic.slabs = [];\n _initialValues.totalSlabs = 0;\n\n this.setState({ initialValues: _initialValues });\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n\n if (this.state.marketingFundDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.state.initialValues.mfLogic.mfLogicText = \"\";\n this.setState({});\n };\n\n addSlabRow = (e) => {\n this.state.initialValues.totalSlabs = e.target.value;\n if (this.state.initialValues.mfLogic.slabs.length < e.target.value) {\n var toAppend =\n e.target.value - this.state.initialValues.mfLogic.slabs.length;\n for (var i = 0; i < toAppend; i++) {\n this.state.initialValues.mfLogic.slabs.push({\n from: \"\",\n to: \"\",\n percent: \"\",\n });\n }\n } else if (this.state.initialValues.mfLogic.slabs.length > e.target.value) {\n var toRemove =\n this.state.initialValues.mfLogic.slabs.length - e.target.value;\n for (var i = 0; i < toRemove; i++) {\n this.state.initialValues.mfLogic.slabs.pop({});\n }\n }\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.mfLogic.slabs[index + 1].from =\n Number(e.target.value) + Number(1);\n this.setState({});\n }\n\n hadleMfLogicChange = (event) => {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n var index = event.nativeEvent.target.selectedIndex;\n var text = event.nativeEvent.target[index].label;\n this.state.initialValues.mfLogic.mfLogicText = text;\n // this.state.initialValues.mfLogic.mfLogicValue = event.target.value;\n if (event.target.value === \"Marketing Fund Basis Rate\") {\n this.setState({\n marketingFundBasisRate: true,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n event.target.value === \"Marketing Fund Basis Pure Revenue Share\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: true,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (\n event.target.value ===\n \"Marketing Fund Basis Pure Revenue Share Sales Range\"\n ) {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: true,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n } else if (event.target.value === \"Marketing Fund Basis % of Rent\") {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: true,\n marketingFundBasisVouchers: false,\n });\n } else if (event.target.value === \"Marketing Fund Basis Vouchers\") {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: true,\n });\n } else {\n this.setState({\n marketingFundBasisRate: false,\n marketingFundBasisPureRevenueShare: false,\n marketingFundBasisPureRevenueShareSalesRange: false,\n marketingFundBasisPercentofRent: false,\n marketingFundBasisVouchers: false,\n });\n }\n };\n\n componentDidMount() {\n\n let athis= this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-marketing-fund-details?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.state.to = data.to;\n athis.state.fromDate = data.from;\n athis.state.applicableValue = data.marketingFundApplicable;\n athis.setState({});\n if (data.marketingFundDetails.length > 0) {\n athis.setState({\n fromDate: getToDate(\n data.marketingFundDetails[data.marketingFundDetails.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.marketingFundApplicable === \"yes\") {\n athis.setState({\n toggleMfForm: true,\n });\n } else {\n athis.setState({\n toggleMfForm: false,\n });\n }\n athis.setState({\n initialValues: data,\n marketingFundDetails: data.marketingFundDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period:\n data.marketingFundDetails.length > 0\n ? data.marketingFundDetails.length + 1\n : 1,\n });\n\n if (\n data.marketingFundDetails.length > 0 &&\n data.marketingFundDetails[data.marketingFundDetails.length - 1]\n .toDate == data.to\n ) {\n athis.setState({\n showForm: false,\n });\n } else {\n athis.setState({\n showForm: true,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-marketing-fund-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.to = data.to;\n // this.state.fromDate = data.from;\n // this.state.applicableValue = data.marketingFundApplicable;\n // this.setState({});\n // if (data.marketingFundDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.marketingFundDetails[\n // // data.marketingFundDetails.length - 1\n // // ].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.marketingFundDetails[data.marketingFundDetails.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.marketingFundApplicable === \"yes\") {\n // this.setState({\n // toggleMfForm: true,\n // });\n // } else {\n // this.setState({\n // toggleMfForm: false,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // marketingFundDetails: data.marketingFundDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period:\n // data.marketingFundDetails.length > 0\n // ? data.marketingFundDetails.length + 1\n // : 1,\n // });\n\n // if (\n // data.marketingFundDetails.length > 0 &&\n // data.marketingFundDetails[data.marketingFundDetails.length - 1]\n // .toDate == data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // } else {\n // this.setState({\n // showForm: true,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n showMfForm = (e) => {\n if (e.target.value === \"yes\") {\n this.setState(\n {\n toggleMfForm: true,\n },\n () => {\n console.log(this.state.toggleMfForm);\n }\n );\n } else {\n this.setState({\n toggleMfForm: false,\n });\n }\n };\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _mf = this.state.marketingFundDetails;\n _mf.splice(this.state.index_val, 1);\n console.log(_mf, \"new array\");\n this.setState({\n marketingFundDetails: _mf,\n showForm: true,\n });\n this.state.period--;\n if (this.state.marketingFundDetails.length > 0) {\n this.setState({\n fromDate: getToDate(\n this.state.marketingFundDetails[\n this.state.marketingFundDetails.length - 1\n ].toDate,\n 2,\n 0,\n 0\n ),\n });\n } else {\n this.setState({\n fromDate: this.state.revalue,\n });\n }\n this.setState({\n delete: false,\n index_val: \"\",\n revalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"mfLogic.mfRate\",\n (\n Number(\n this.state.marketingFundDetails[\n this.state.marketingFundDetails.length - 1\n ].mfRate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (\n this.state.period > 1 &&\n this.state.marketingFundDetails[this.state.escalationIndex].mfRate !== 0\n ) {\n setFieldValue(\n \"mfLogic.escalationPercent\",\n (\n ((Number(e.target.value) -\n Number(\n this.state.marketingFundDetails[this.state.escalationIndex].mfRate\n )) /\n Number(\n this.state.marketingFundDetails[\n this.state.marketingFundDetails.length - 1\n ].mfRate\n )) *\n 100\n ).toFixed(2)\n );\n }\n }\n\n calculateVoucherTotal(values, e, setFieldValue) {\n let amount;\n if (\n isNaN(values.mfLogic.voucherCount) !== \"\" &&\n isNaN(values.mfLogic.voucherAmount) !== \"\"\n ) {\n amount =\n Number(values.mfLogic.voucherCount) *\n Number(values.mfLogic.voucherAmount);\n this.setState({ voucherTotalAmt: amount });\n setFieldValue(\"mfLogic.voucherTotalAmount\", amount);\n } else {\n amount = \"\";\n this.setState({ voucherTotalAmt: amount });\n setFieldValue(\"mfLogic.voucherTotalAmount\", amount);\n }\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n \n
\n {utility.utility.utilityType == \"Other\" && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n )}\n {utility.utility.rates != undefined &&\n utility.utility.rates.map(function (name, index) {\n return (\n \n
\n \n \n \n
\n \n
\n );\n }, this)}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n\n\n \n
\n \n \n \n
\n \n \n {(close) => (\n \n )}\n \n \n {(close) => (\n \n
\n );\n }\n\n mfPopup(mf) {\n console.log(mf);\n if (mf.mfLogicText === \"Marketing Fund Basis Rate\") {\n return this.mfBasisRatePopup(mf);\n } else if (mf.mfLogicText === \"Marketing Fund Basis Pure Revenue Share\") {\n return this.mfBasisRatePureRevenueSharePopup(mf);\n } else if (\n mf.mfLogicText === \"Marketing Fund Basis Pure Revenue Share Sales Range\"\n ) {\n return this.mfBasisRatePureRevenueShareSalesRangePopup(mf);\n } else if (mf.mfLogicText === \"Marketing Fund Basis % of Rate\") {\n return this.mfBasisPercentOfRentPopup(mf);\n } else if (mf.mfLogicText === \"Marketing Fund Basis Vouchers\") {\n return this.mfBasisVouchersPopup(mf);\n }\n }\n\n mfBasisRatePopup(mf) {\n return (\n \n
\n \n {\n values.marketingFundApplicable = this.state.applicableValue;\n values.mfLogic.voucherTotalAmount = this.state.voucherTotalAmt;\n if (!this.applicableValidator.allValid()) {\n this.applicableValidator.showMessages();\n return false;\n }\n if (\n this.state.marketingFundDetails.length == 0 &&\n this.state.applicableValue !== \"no\"\n ) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n // if (\n // this.state.applicableValue == \"yes\" &&\n // this.state.to !==\n // this.state.marketingFundDetails[\n // this.state.marketingFundDetails.length - 1\n // ].toDate\n // ) {\n // // alert(\"Please Complete the period \");\n // this.setState({\n // popupalertMessage: true,\n // popupMessageContent: \"Please Complete the period\",\n // });\n // return false;\n // }\n values.marketingFundDetails = this.state.marketingFundDetails;\n\n console.log(values, \"sending\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-marketing-fund-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Other Charges \n
- \n Marketing Fund\n \n
\n \n
\n\n\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.mfPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Marketing Fund \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n\n mfBasisRatePureRevenueSharePopup(mf) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n mfBasisRatePureRevenueShareSalesRangePopup(mf) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n mfBasisPercentOfRentPopup(mf) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n mfBasisVouchersPopup(mf) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(MarketingFund);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage, FieldArray } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n faTrashAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nimport { pTaxActual, pTaxRate } from \"../../constants\";\nclass PropertyMuncipalTax extends React.Component {\n countError = \"\";\n state = {\n escalationIndex: 0,\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n showRatesOnarea: [],\n showFirstAddBtn: true,\n disableOnActual: false,\n applicableValue: \"\",\n propertyTaxBasisValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n revalue: \"\",\n to: \"\",\n from: \"\",\n showPtaxCapped: false,\n showAddBtn: false,\n isOpen: false,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n propertyTaxDetails: [],\n pTaxLogicValues: [],\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n initialValues: {\n pTaxLogic: {\n propertyTaxBasis: \"\",\n pTaxLogicValue: \"\",\n pTaxLogicText: \"\",\n period: \"\",\n fromDate: \"\",\n toDate: \"\",\n pTaxUom: \"\",\n pTaxDueDate: \"\",\n pTaxRate: \"\",\n pTaxRateTerm: \"\",\n onArea: \"\",\n pTaxFrequency: \"\",\n pTaxCapped: \"\",\n pTaxCappedOnArea: \"\",\n rentUom: \"\",\n rentRate: \"\",\n percentageofRent: \"\",\n voucherType: \"\",\n voucherAmount: \"\",\n slabs: [],\n rates: [],\n },\n totalSlabs: \"\",\n },\n showForm: true,\n togglepTaxForm: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n addRatesRow = () => {\n if (this.state.initialValues.pTaxLogic.rates === undefined) {\n this.state.initialValues.pTaxLogic.rates = [];\n this.state.initialValues.pTaxLogic.rates.push({\n from: \"\",\n to: \"\",\n pTaxUom: \"\",\n onArea: \"\",\n rate: \"\",\n });\n } else {\n this.state.initialValues.pTaxLogic.rates.push({\n from: \"\",\n to: \"\",\n pTaxUom: \"\",\n onArea: \"\",\n rate: \"\",\n });\n }\n if (this.state.initialValues.pTaxLogic.rates.length > 0) {\n this.setState({ showFirstAddBtn: false });\n }\n this.setState({});\n };\n\n getRatesFromForNextSlab(e, values, index) {\n this.state.initialValues.pTaxLogic.rates[index + 1].from = getToDate(\n e.target.value,\n 2,\n 0,\n 0\n );\n this.setState({});\n }\n\n showRatesOnarea(e, i) {\n let index = i;\n if (e.target.value == \"Per Sq Ft\") {\n var _showRatesOnArea = this.state.showRatesOnarea;\n _showRatesOnArea[i] = true;\n this.setState({ showRatesOnarea: _showRatesOnArea });\n } else {\n var _showRatesOnArea = this.state.showRatesOnarea;\n _showRatesOnArea[i] = false;\n this.setState({ showRatesOnarea: _showRatesOnArea });\n }\n }\n\n removeRatesRow(element) {\n this.state.initialValues.pTaxLogic.rates.splice(element, 1);\n if (this.state.initialValues.pTaxLogic.rates.length == 0) {\n this.setState({ showFirstAddBtn: true });\n }\n this.setState({});\n }\n\n getpTaxLogicValues(e) {\n if (e.target.value == \"Property Tax Basis Rate\") {\n this.setState({ pTaxLogicValues: pTaxRate, disableOnActual: false });\n } else if (e.target.value == \"Property Tax Basis Actuals\") {\n this.setState({ pTaxLogicValues: pTaxActual, disableOnActual: true });\n } else {\n this.setState({ pTaxLogicValues: [] });\n }\n }\n\n changePTaxCapped(e) {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value == \"yes\") {\n this.setState({\n showPtaxCapped: true,\n });\n } else {\n this.setState({\n showPtaxCapped: false,\n });\n }\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n editProperty(index, values) {\n this.state.currentIndex = index;\n if (\n this.state.propertyTaxDetails[index].rates !== undefined &&\n this.state.propertyTaxDetails[index].rates.length > 0\n ) {\n this.setState({ showFirstAddBtn: false });\n } else {\n this.setState({ showFirstAddBtn: true });\n }\n if (this.state.propertyTaxDetails[index].ptaxCapped == \"yes\") {\n this.setState({ showPtaxCapped: true });\n } else {\n this.setState({ showPtaxCapped: false });\n }\n // this.state.showFirstAddBtn = true;\n this.state.readOnEdit = true;\n this.state.disableOnEdit = false;\n this.state.period = this.state.propertyTaxDetails[index].period;\n this.state.initialValues.totalSlabs =\n this.state.propertyTaxDetails[index].slabNumber;\n this.state.propertyTaxBasisValue =\n this.state.propertyTaxDetails[index].propertyTaxBasis;\n if (this.state.propertyTaxBasisValue == \"Property Tax Basis Rate\") {\n this.setState({ pTaxLogicValues: pTaxRate, disableOnActual: false });\n } else if (\n this.state.propertyTaxBasisValue == \"Property Tax Basis Actuals\"\n ) {\n this.setState({ pTaxLogicValues: pTaxActual, disableOnActual: true });\n } else {\n this.setState({ pTaxLogicValues: [] });\n }\n // this.state.initialValues.pTaxLogic.pTaxLogicValue =\n // this.state.propertyTaxDetails[index].pTaxLogicValue;\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.propertyTaxDetails[index].periodTermDD,\n periodTermMM: this.state.propertyTaxDetails[index].periodTermMM,\n periodTermYY: this.state.propertyTaxDetails[index].periodTermYY,\n });\n if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"1\") {\n this.setState({\n propertyTaxBasisRate: true,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"2\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: true,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"3\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: true,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"4\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: true,\n propertyTaxBasisVouchers: false,\n });\n } else if (this.state.propertyTaxDetails[index].pTaxLogicValue === \"5\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: true,\n });\n } else {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n }\n values.pTaxLogic = { ...this.state.propertyTaxDetails[index] };\n this.state.fromDate = this.state.propertyTaxDetails[index].fromDate;\n this.state.toDate = this.state.propertyTaxDetails[index].toDate;\n if (this.state.propertyTaxDetails[index].camActualization == \"Yes\") {\n this.setState({ showCamActalization: true });\n } else {\n this.setState({ showCamActalization: false });\n }\n if (this.state.propertyTaxDetails[index].camCapped == \"Yes\") {\n this.setState({ showCamCapped: true });\n } else {\n this.setState({ showCamCapped: false });\n }\n this.setState({});\n }\n\n addpTaxDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n values.propertyTaxPayable = this.state.applicableValue;\n values.pTaxLogic.propertyTaxBasis = this.state.propertyTaxBasisValue;\n values.pTaxLogic.pTaxLogicText =\n this.state.initialValues.pTaxLogic.pTaxLogicText;\n var _propertyTaxDetails = this.state.propertyTaxDetails;\n values.pTaxLogic.period = this.state.period;\n values.pTaxLogic.fromDate = this.state.fromDate;\n values.pTaxLogic.toDate = this.state.toDate;\n values.pTaxLogic.periodTermYY = this.state.periodTermYY;\n values.pTaxLogic.periodTermMM = this.state.periodTermMM;\n values.pTaxLogic.periodTermDD = this.state.periodTermDD;\n _propertyTaxDetails.push(values.pTaxLogic);\n var _initialValues = this.state.initialValues;\n // _initialValues.pTaxLogic.pTaxLogicValue = \"\";\n _initialValues.totalSlabs = 0;\n this.setState({\n propertyTaxDetails: _propertyTaxDetails,\n // propertyTaxBasisRate: false,\n // propertyTaxBasisPureRevenueShare: false,\n // propertyTaxBasisPureRevenueShareSalesRange: false,\n // propertyTaxBasisPercentofRent: false,\n // propertyTaxBasisVouchers: false,\n });\n this.state.initialValues.pTaxLogic.slabs = [];\n this.state.initialValues.pTaxLogic.rates = [];\n // this.state.initialValues.pTaxLogic.pTaxLogicValue = \"\";\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.propertyTaxDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n setFieldValue(\"pTaxLogic.pTaxRate\", \"\");\n setFieldValue(\"pTaxLogic.escalationPercent\", \"\");\n this.setState({ isEdit: false, escalationIndex: this.state.period - 2 });\n } else {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n } else if (this.state.toDate == values.to) {\n this.state.showForm = false;\n this.state.showAddBtn = false;\n }\n values.propertyTaxPayable = this.state.applicableValue;\n values.pTaxLogic.propertyTaxBasis = this.state.propertyTaxBasisValue;\n values.pTaxLogic.pTaxLogicText =\n this.state.initialValues.pTaxLogic.pTaxLogicText;\n var _propertyTaxDetails = this.state.propertyTaxDetails;\n values.pTaxLogic.period = this.state.period;\n values.pTaxLogic.fromDate = this.state.fromDate;\n values.pTaxLogic.toDate = this.state.toDate;\n values.pTaxLogic.periodTermYY = this.state.periodTermYY;\n values.pTaxLogic.periodTermMM = this.state.periodTermMM;\n values.pTaxLogic.periodTermDD = this.state.periodTermDD;\n _propertyTaxDetails[this.state.currentIndex] = { ...values.pTaxLogic };\n var _initialValues = this.state.initialValues;\n _initialValues.pTaxLogic.pTaxLogicValue = \"\";\n _initialValues.totalSlabs = 0;\n this.setState({\n propertyTaxDetails: _propertyTaxDetails,\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n console.log(this.state.initialValues);\n this.state.initialValues.pTaxLogic.slabs = [];\n this.state.initialValues.pTaxLogic.rates = [];\n this.state.initialValues.pTaxLogic.pTaxLogicValue = \"\";\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.propertyTaxDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n }\n };\n\n resetpTaxDetails = (values, resetForm) => {\n var _initialValues = this.state.initialValues;\n _initialValues.pTaxLogic.pTaxLogicValue = \"\";\n _initialValues.totalSlabs = 0;\n this.setState({\n // propertyTaxDetails: _propertyTaxDetails,\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n console.log(this.state.initialValues);\n this.state.initialValues.pTaxLogic.slabs = [];\n this.state.initialValues.pTaxLogic.rates = [];\n this.state.initialValues.pTaxLogic.pTaxLogicValue = \"\";\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.propertyTaxDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n resetForm();\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n\n handleReset = () => {\n var _initialValues = this.state.initialValues;\n _initialValues.pTaxLogic.pTaxLogicValue = \"\";\n _initialValues.totalSlabs = 0;\n this.setState({\n // propertyTaxDetails: _propertyTaxDetails,\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n console.log(this.state.initialValues);\n this.state.initialValues.pTaxLogic.slabs = [];\n this.state.initialValues.pTaxLogic.rates = [];\n this.state.initialValues.pTaxLogic.pTaxLogicValue = \"\";\n this.state.period++;\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.propertyTaxDetails.length > 0) {\n this.mainFormValidator.hideMessages();\n }\n this.state.currentIndex = null;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n addSlabRow = (e) => {\n this.state.initialValues.totalSlabs = e.target.value;\n if (this.state.initialValues.pTaxLogic.slabs.length < e.target.value) {\n var toAppend =\n e.target.value - this.state.initialValues.pTaxLogic.slabs.length;\n for (var i = 0; i < toAppend; i++) {\n this.state.initialValues.pTaxLogic.slabs.push({\n from: \"\",\n to: \"\",\n percent: \"\",\n });\n }\n } else if (\n this.state.initialValues.pTaxLogic.slabs.length > e.target.value\n ) {\n var toRemove =\n this.state.initialValues.pTaxLogic.slabs.length - e.target.value;\n for (var i = 0; i < toRemove; i++) {\n this.state.initialValues.pTaxLogic.slabs.pop({});\n }\n }\n };\n\n getFromForNextSlab(e, values, index) {\n this.state.initialValues.pTaxLogic.slabs[index + 1].from =\n Number(e.target.value) + Number(1);\n this.setState({});\n }\n\n showpTaxForm = (e) => {\n if (e.target.value === \"yes\") {\n this.setState({\n togglepTaxForm: true,\n });\n } else {\n this.setState({\n togglepTaxForm: false,\n });\n }\n };\n\n hadlepTaxLogicChange = (event) => {\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n var index = event.nativeEvent.target.selectedIndex;\n var text = event.nativeEvent.target[index].label;\n this.state.initialValues.pTaxLogic.pTaxLogicText = text;\n this.state.initialValues.pTaxLogic.pTaxLogicValue = event.target.value;\n if (event.target.value === \"1\") {\n this.setState({\n propertyTaxBasisRate: true,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (event.target.value === \"2\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: true,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (event.target.value === \"3\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: true,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n } else if (event.target.value === \"4\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: true,\n propertyTaxBasisVouchers: false,\n });\n } else if (event.target.value === \"5\") {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: true,\n });\n } else {\n this.setState({\n propertyTaxBasisRate: false,\n propertyTaxBasisPureRevenueShare: false,\n propertyTaxBasisPureRevenueShareSalesRange: false,\n propertyTaxBasisPercentofRent: false,\n propertyTaxBasisVouchers: false,\n });\n }\n };\n\n componentDidMount() {\n let athis=this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-property-tax-details?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.state.to = data.to;\n athis.state.fromDate = data.from;\n athis.state.applicableValue = data.propertyTaxPayable;\n if (data.propertyTaxDetails.length > 0) {\n // let _tempDate = new Date(\n // data.propertyTaxDetails[data.propertyTaxDetails.length - 1].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.propertyTaxDetails[data.propertyTaxDetails.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n athis.setState({\n initialValues: data,\n propertyTaxDetails: data.propertyTaxDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period:\n data.propertyTaxDetails.length > 0\n ? data.propertyTaxDetails.length + 1\n : 1,\n });\n if (data.propertyTaxPayable == \"yes\") {\n athis.setState({\n togglepTaxForm: true,\n });\n } else {\n athis.setState({\n togglepTaxForm: false,\n });\n }\n if (\n data.propertyTaxDetails[data.propertyTaxDetails.length - 1].toDate ==\n data.to\n ) {\n athis.setState({\n showForm: false,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-property-tax-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.to = data.to;\n // this.state.fromDate = data.from;\n // this.state.applicableValue = data.propertyTaxPayable;\n // if (data.propertyTaxDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.propertyTaxDetails[data.propertyTaxDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.propertyTaxDetails[data.propertyTaxDetails.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // this.setState({\n // initialValues: data,\n // propertyTaxDetails: data.propertyTaxDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period:\n // data.propertyTaxDetails.length > 0\n // ? data.propertyTaxDetails.length + 1\n // : 1,\n // });\n // if (data.propertyTaxPayable == \"yes\") {\n // this.setState({\n // togglepTaxForm: true,\n // });\n // } else {\n // this.setState({\n // togglepTaxForm: false,\n // });\n // }\n // if (\n // data.propertyTaxDetails[data.propertyTaxDetails.length - 1].toDate ==\n // data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _pTax = this.state.propertyTaxDetails;\n _pTax.splice(this.state.index_val, 1);\n console.log(_pTax, \"new array\");\n this.setState({\n propertyTaxDetails: _pTax,\n showForm: true,\n });\n this.state.period--;\n if (this.state.propertyTaxDetails.length > 0) {\n this.setState({\n fromDate: getToDate(\n this.state.propertyTaxDetails[\n this.state.propertyTaxDetails.length - 1\n ].toDate,\n 2,\n 0,\n 0\n ),\n });\n } else {\n this.setState({\n fromDate: this.state.revalue,\n });\n }\n this.setState({\n delete: false,\n index_val: \"\",\n revalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n setFieldValue(\n \"pTaxLogic.pTaxRate\",\n (\n Number(\n this.state.propertyTaxDetails[\n this.state.propertyTaxDetails.length - 1\n ].pTaxRate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (\n this.state.period > 1 &&\n this.state.propertyTaxDetails[this.state.escalationIndex].pTaxRate !== 0\n ) {\n setFieldValue(\n \"pTaxLogic.escalationPercent\",\n ((Number(e.target.value) -\n Number(\n this.state.propertyTaxDetails[this.state.escalationIndex].pTaxRate\n )) /\n Number(\n this.state.propertyTaxDetails[\n this.state.propertyTaxDetails.length - 1\n ].pTaxRate\n )) *\n 100\n );\n }\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {mf.mfCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n this.state.applicableValue = this.state.applicableValue;\n values.propertyTaxPayable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n console.log(this.validator);\n this.applicableValidator.showMessages();\n return false;\n }\n console.log(values);\n if (\n this.state.propertyTaxDetails.length == 0 &&\n this.state.applicableValue !== \"no\"\n ) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n // if (\n // this.state.applicableValue == \"yes\" &&\n // this.state.to !==\n // this.state.propertyTaxDetails[\n // this.state.propertyTaxDetails.length - 1\n // ].toDate\n // ) {\n // this.setState({\n // popupalertMessage: true,\n // popupMessageContent: \"Please Complete the period\",\n // });\n // // alert(\"Please Complete the period \");\n // return false;\n // }\n values.propertyTaxDetails = this.state.propertyTaxDetails;\n console.log(values.propertyTaxDetails, \"gg\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-property-tax-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n\n
\n \n
\n\n \n
\n - \n
- Create Lease \n
- Other Charges \n
- \n Property & Municipal Tax Fund\n \n
\n \n
\n\n\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.pTaxPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Property & Muncipal Tax Fund \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n\n pTaxBasisActualPopup(pTax) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pTaxBasisRatePureRevenueSharePopup(pTax) {\n return (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n\n {pTax.rates != undefined && (\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n {pTax.rates.map(function (name, index) {\n return (\n
\n )}\n \n
\n );\n }, this)}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pTaxBasisRatePureRevenueShareSalesRangePopup(pTax) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pTaxBasisPercentOfRentPopup(pTax) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | SLAB | \nFROM | \nTo | \nRevenue Share (%) | \n
|---|---|---|---|
| {index + 1} | \n{name.from} | \n{name.to} | \n{name.percent} | \n
\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n pTaxBasisVouchersPopup(pTax) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(PropertyMuncipalTax);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass ParkingStorageSignage extends React.Component {\n countError = \"\";\n state = {\n escalationChargeType: \"\",\n escalationIndex: 0,\n showCharges: false,\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n applicableValue: \"\",\n applicableValueStatic: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n keyvalue: \"\",\n leaseTermYY: \"\",\n leaseTermMM: \"\",\n leaseTermDD: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n to: \"\",\n isOpen: false,\n showAddBtn: false,\n fromDate: \"\",\n toDate: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n period: 1,\n redirect: false,\n occupiers: { count: 2, occupiers: [{ countUnits: 1 }] },\n showParking: false,\n showStorage: false,\n showSignage: false,\n parkingStorageSignage: [],\n parkingCharges: {\n parking2W: \"\",\n parking4W: \"\",\n parkingOther: \"\",\n },\n initialValues: {\n pkgLogic: {\n chargeType: \"\",\n chargeTypeText: \"\",\n period: \"\",\n fromDate: \"\",\n toDate: \"\",\n count: \"\",\n type: \"\",\n dueDate: \"\",\n rate: \"\",\n rateTerm: \"\",\n onArea: \"\",\n frequency: \"\",\n area: \"\",\n strName: \"\",\n sngName: \"\",\n location: \"\",\n },\n },\n toggleParkingForm: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n showParkingForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\" || e.target.value === \"hybrid\") {\n this.setState({\n toggleParkingForm: true,\n showCharges: false,\n });\n } else if (e.target.value === \"no\") {\n this.setState({\n toggleParkingForm: false,\n showCharges: true,\n });\n } else if (e.target.value === \"Select\") {\n this.setState({ showCharges: false });\n }\n };\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n hadleOptionChange = (event, values, setFieldValue) => {\n\n console.log(\"form change\");\n\n this.setState({ escalationChargeType: event.target.value });\n if (\n this.state.parkingStorageSignage[event.target.value] !== undefined &&\n this.state.parkingStorageSignage[event.target.value].length > 0 &&\n this.state.parkingStorageSignage[event.target.value][\n this.state.parkingStorageSignage[event.target.value].length - 1\n ].toDate == values.to\n ) {\n this.state.initialValues.pkgLogic.chargeType = \"\";\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n\n\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n var _parkingStorageSignage = this.state.parkingStorageSignage;\n if (\n _parkingStorageSignage[event.target.value] == undefined ||\n _parkingStorageSignage[event.target.value].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _parkingStorageSignage[event.target.value][\n _parkingStorageSignage[event.target.value].length - 1\n ].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period =\n this.state.parkingStorageSignage[event.target.value].length + 1;\n }\n\n this.setState({});\n\n if (event.target.value === \"\") {\n this.state.showAddBtn = false;\n } else {\n this.state.showAddBtn = true;\n }\n var index = event.nativeEvent.target.selectedIndex;\n var text = event.nativeEvent.target[index].label;\n this.state.initialValues.pkgLogic.chargeTypeText = text;\n this.state.initialValues.pkgLogic.chargeType = event.target.value;\n\n //-------chaning pkg count--------------------//\n let eventType = event.target.value.replace(/ /g, '_').toLowerCase();\n if (this.state.initialValues.additionalDetails.parkingDetails[eventType]) {\n this.state.initialValues.pkgLogic.count = this.state.initialValues.additionalDetails.parkingDetails[eventType];\n this.setState({});\n setFieldValue(\"pkgLogic.count\", this.state.initialValues.pkgLogic.count);\n }\n\n if (\n event.target.value === \"Parking 2W\" ||\n event.target.value === \"Parking 4W\" ||\n event.target.value === \"Parking Other\"\n ) {\n this.setState({\n showParking: true,\n showStorage: false,\n showSignage: false,\n });\n } else if (event.target.value === \"Storage\") {\n this.setState({\n showParking: false,\n showStorage: true,\n showSignage: false,\n });\n } else if (event.target.value === \"Signage\") {\n this.setState({\n showParking: false,\n showStorage: false,\n showSignage: true,\n });\n } else {\n this.setState({\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n }\n };\n\n editPkg(index, values, key) {\n\n console.log(this.state.parkingStorageSignage[key][index]);\n this.state.applicableValue = this.state.applicableValueStatic;\n if (this.state.applicableValue != 'no') {\n this.state.toggleParkingForm = true;\n this.state.initialValues.pkgLogic.chargeType = this.state.parkingStorageSignage[key][index].chargeType;\n }\n\n\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n this.state.period = this.state.parkingStorageSignage[key][index].period;\n\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.parkingStorageSignage[key][index].periodTermDD,\n periodTermMM: this.state.parkingStorageSignage[key][index].periodTermMM,\n periodTermYY: this.state.parkingStorageSignage[key][index].periodTermYY,\n });\n if (\n this.state.parkingStorageSignage[key][index].chargeType ===\n \"Parking 2W\" ||\n this.state.parkingStorageSignage[key][index].chargeType ===\n \"Parking 4W\" ||\n this.state.parkingStorageSignage[key][index].chargeType ===\n \"Parking Other\"\n ) {\n this.setState({\n showParking: true,\n showStorage: false,\n showSignage: false,\n });\n } else if (\n this.state.parkingStorageSignage[key][index].chargeType === \"Storage\"\n ) {\n this.setState({\n showParking: false,\n showStorage: true,\n showSignage: false,\n });\n } else if (\n this.state.parkingStorageSignage[key][index].chargeType === \"Signage\"\n ) {\n this.setState({\n showParking: false,\n showStorage: false,\n showSignage: true,\n });\n } else {\n this.setState({\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n }\n values.pkgLogic = this.state.parkingStorageSignage[key][index];\n this.state.fromDate = this.state.parkingStorageSignage[key][index].fromDate;\n this.state.toDate = this.state.parkingStorageSignage[key][index].toDate;\n\n this.setState({});\n }\n\n addDetails = (values, resetForm, setFieldValue) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n\n return false;\n }\n values.pkgLogic.chargeTypeText =\n this.state.initialValues.pkgLogic.chargeTypeText;\n var _parkingStorageSignage = this.state.parkingStorageSignage;\n values.pkgLogic.period = this.state.period;\n values.pkgLogic.fromDate = this.state.fromDate;\n values.pkgLogic.toDate = this.state.toDate;\n values.pkgLogic.periodTermYY = this.state.periodTermYY;\n values.pkgLogic.periodTermMM = this.state.periodTermMM;\n values.pkgLogic.periodTermDD = this.state.periodTermDD;\n if (\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType] ==\n undefined\n ) {\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType] =\n [];\n }\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType].push(\n values.pkgLogic\n );\n this.setState({\n parkingStorageSignage: _parkingStorageSignage,\n showParking: false,\n showStorage: false,\n showSignage: false,\n showAddBtn: false,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.pkgLogic.chargeType = \"\";\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n setFieldValue(\"pkgLogic.rate\", \"\");\n setFieldValue(\"pkgLogic.escalationPercent\", \"\");\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n this.mainFormValidator.hideMessages();\n // resetForm();\n // this.setState({\n // fromDate: getToDate(this.state.toDate, 2, 0, 0),\n // toDate: \"\",\n // });\n } else {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n }\n values.pkgLogic.chargeTypeText =\n this.state.initialValues.pkgLogic.chargeTypeText;\n var _parkingStorageSignage = this.state.parkingStorageSignage;\n values.pkgLogic.period = this.state.period;\n values.pkgLogic.fromDate = this.state.fromDate;\n values.pkgLogic.toDate = this.state.toDate;\n values.pkgLogic.periodTermYY = this.state.periodTermYY;\n values.pkgLogic.periodTermMM = this.state.periodTermMM;\n values.pkgLogic.periodTermDD = this.state.periodTermDD;\n if (\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType] ==\n undefined\n ) {\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType] =\n [];\n }\n _parkingStorageSignage[this.state.initialValues.pkgLogic.chargeType][\n this.state.currentIndex\n ] = { ...values.pkgLogic };\n this.setState({\n parkingStorageSignage: _parkingStorageSignage,\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.pkgLogic.chargeType = \"\";\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.mainFormValidator.hideMessages();\n resetForm();\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({ isEdit: false, escalationIndex: this.state.period - 1 });\n // this.setState({\n // fromDate: getToDate(this.state.toDate, 2, 0, 0),\n // toDate: \"\",\n // });\n }\n };\n\n resetDetails = (values, resetForm) => {\n this.setState({\n // parkingStorageSignage: _parkingStorageSignage,\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.pkgLogic.chargeType = \"\";\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.mainFormValidator.hideMessages();\n resetForm();\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n handleReset = () => {\n this.setState({\n // parkingStorageSignage: _parkingStorageSignage,\n showParking: false,\n showStorage: false,\n showSignage: false,\n });\n var _initialValues = this.state.initialValues;\n _initialValues.pkgLogic.chargeType = \"\";\n this.state.periodTermDD = \"\";\n this.state.periodTermMM = \"\";\n this.state.periodTermYY = \"\";\n this.mainFormValidator.hideMessages();\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n componentDidMount() {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-pss-details?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.state.to = data.to;\n athis.state.fromDate = data.from;\n athis.state.applicableValue = data.chargesApplicable;\n athis.state.applicableValueStatic = data.chargesApplicable;\n if (data.parkingStorageSignage.length > 0) {\n \n athis.setState({\n fromDate: getToDate(\n data.parkingStorageSignage[data.parkingStorageSignage.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.chargesApplicable === \"yes\") {\n athis.setState({\n toggleParkingForm: true,\n });\n } else {\n athis.setState({\n toggleParkingForm: false,\n showCharges: true,\n });\n }\n athis.setState({\n initialValues: data,\n parkingStorageSignage: data.parkingStorageSignage,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n period:\n data.parkingStorageSignage.length > 0\n ? data.parkingStorageSignage.length + 1\n : 1,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-pss-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.to = data.to;\n // this.state.fromDate = data.from;\n // this.state.applicableValue = data.chargesApplicable;\n // this.state.applicableValueStatic = data.chargesApplicable;\n // if (data.parkingStorageSignage.length > 0) {\n // // let _tempDate = new Date(\n // // data.parkingStorageSignage[\n // // data.parkingStorageSignage.length - 1\n // // ].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.parkingStorageSignage[data.parkingStorageSignage.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.chargesApplicable === \"yes\") {\n // this.setState({\n // toggleParkingForm: true,\n // });\n // } else {\n // this.setState({\n // toggleParkingForm: false,\n // showCharges: true,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // parkingStorageSignage: data.parkingStorageSignage,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // period:\n // data.parkingStorageSignage.length > 0\n // ? data.parkingStorageSignage.length + 1\n // : 1,\n // });\n // // if (\n // // (data.parkingStorageSignage[\n // // data.parkingStorageSignage.length - 1\n // // ].toDate = data.to)\n // // ) {\n // // this.setState({\n // // showForm: false,\n // // });\n // // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _rdd = this.state.parkingStorageSignage;\n _rdd[this.state.keyvalue].splice(this.state.index_val, 1);\n this.setState({\n parkingStorageSignage: _rdd,\n showForm: true,\n });\n this.state.period--;\n this.setState({\n delete: false,\n index_val: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n calculateRentRate(e, values, setFieldValue) {\n if (this.state.period > 1) {\n console.log(\n values.parkingStorageSignage[values.pkgLogic.chargeType][\n values.parkingStorageSignage[values.pkgLogic.chargeType].length - 1\n ].rate\n );\n console.log(values);\n setFieldValue(\n \"pkgLogic.rate\",\n (\n Number(\n values.parkingStorageSignage[values.pkgLogic.chargeType][\n values.parkingStorageSignage[values.pkgLogic.chargeType].length -\n 1\n ].rate\n ) *\n (1 + Number(e.target.value) / 100)\n ).toFixed(2)\n );\n }\n }\n\n calculateEscalationPercent(e, values, setFieldValue) {\n if (\n this.state.period > 1 &&\n this.state.parkingStorageSignage[this.state.escalationChargeType][\n this.state.escalationIndex\n ].rate !== 0\n ) {\n setFieldValue(\n \"pkgLogic.escalationPercent\",\n (\n ((Number(e.target.value) -\n Number(\n this.state.parkingStorageSignage[this.state.escalationChargeType][\n this.state.escalationIndex\n ].rate\n )) /\n Number(\n this.state.parkingStorageSignage[this.state.escalationChargeType][\n this.state.parkingStorageSignage[\n this.state.escalationChargeType\n ].length - 1\n ].rate\n )) *\n 100\n ).toFixed(2)\n );\n }\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n {pTax.ptaxCapped == \"yes\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n {\n values.chargesApplicable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n console.log(this.validator);\n this.applicableValidator.showMessages();\n return false;\n }\n\n let count = 0;\n for (var key in this.state.parkingStorageSignage) {\n if (this.state.parkingStorageSignage[key].length > 0) {\n count = 1;\n break;\n }\n }\n if (count == 0 && this.state.applicableValue !== \"no\") {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n\n var parkingStorageSignage = {\n ...this.state.parkingStorageSignage,\n };\n values.parkingStorageSignage = parkingStorageSignage;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-pss-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Other Charges \n
- \n Parking, Storage & Signage\n \n
\n \n
\n\n\n {/* */}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen && this.pssPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Parking Storage & Signage Charges \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n\n storagePopup(pss) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {/* \n
\n \n \n \n
\n \n
*/}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n\n signagePopup(pss) {\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n );\n }\n}\n\nexport default withRouter(ParkingStorageSignage);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n periodOneMileStoneNames,\n periodOtherMilestoneNames,\n periodOneLandlordMileStoneNames,\n} from \"../../constants\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nimport { hasAccess, getUserType } from \"../../utils/index\";\n\nvar periodOneMileStoneNamesArr = periodOneMileStoneNames;\n\nif (getUserType() == \"Landlord\") {\n periodOneMileStoneNamesArr = periodOneLandlordMileStoneNames;\n}\n\nclass RentDepositDetails extends React.Component {\n countError = \"\";\n state = {\n milestoneVal: \"\",\n readOnEdit: false,\n currentIndex: null,\n disableOnEdit: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n keyvalue: \"\",\n leaseCommencementDate: \"\",\n popupData: {},\n isOpen: false,\n milestoneMonths: \"RDEP Milestone # Months\",\n rdepTotalAmount: \"\",\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n milestonesCount: 1,\n milestones: [],\n milestoneNamesValues: [],\n initialValues: {\n rdepLogic: {\n milestones: [],\n period: \"\",\n rentDepositNature: \"\",\n months: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n onArea: \"\",\n milestonesCount: 0,\n totalAmount: \"\",\n rate: \"\",\n },\n },\n biFurcateLandlordCheckbox: false,\n rentDepositDetails: [],\n landlordList: [],\n landlordsPercentage: [],\n };\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-rent-deposit-details?id=${this.props.match.params.id}`).then((response) =>{\n let data = response.data;\n athis.state.biFurcateLandlordCheckbox = data.biFurcateLandlordCheckbox;\n athis.state.leaseCommencementDate = data.lcd;\n athis.state.landlordList = data.landlordList;\n athis.state.fromDate = data.from;\n athis.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n athis.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n athis.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n if (data.rentDepositDetails.length > 0) {\n // let _tempDate = new Date(\n // data.rentDepositDetails[data.rentDepositDetails.length - 1].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.rentDepositDetails[data.rentDepositDetails.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n\n athis.setState({\n initialValues: data,\n rentDepositDetails: data.rentDepositDetails,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n // notes_11: data.notes_11,\n period:\n data.rentDepositDetails.length > 0\n ? data.rentDepositDetails.length + 1\n : 1,\n });\n var _intialValues = athis.state.initialValues;\n // _intialValues['notes_11'] = data.notes_11;\n _intialValues.rdepLogic = {\n milestones: [\n {\n dueDate: \"\",\n milestoneName: \"\",\n amount: \"\",\n milestonePercent: \"\",\n },\n ],\n period: \"\",\n rentDepositNature: \"\",\n months: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n onArea: \"\",\n milestonesCount: 0,\n totalAmount: \"\",\n rate: \"\",\n };\n athis.setState({\n initialValues: _intialValues,\n });\n if (\n data.rentDepositDetails[data.rentDepositDetails.length - 1].toDate ==\n data.to\n ) {\n athis.setState({\n showForm: false,\n });\n }\n });\n\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-rent-deposit-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.biFurcateLandlordCheckbox = data.biFurcateLandlordCheckbox;\n // this.state.leaseCommencementDate = data.lcd;\n // this.state.landlordList = data.landlordList;\n // this.state.fromDate = data.from;\n // this.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n // this.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n // this.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n // if (data.rentDepositDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.rentDepositDetails[data.rentDepositDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.rentDepositDetails[data.rentDepositDetails.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n\n // this.setState({\n // initialValues: data,\n // rentDepositDetails: data.rentDepositDetails,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // // notes_11: data.notes_11,\n // period:\n // data.rentDepositDetails.length > 0\n // ? data.rentDepositDetails.length + 1\n // : 1,\n // });\n // var _intialValues = this.state.initialValues;\n // // _intialValues['notes_11'] = data.notes_11;\n // _intialValues.rdepLogic = {\n // milestones: [\n // {\n // dueDate: \"\",\n // milestoneName: \"\",\n // amount: \"\",\n // milestonePercent: \"\",\n // },\n // ],\n // period: \"\",\n // rentDepositNature: \"\",\n // months: \"\",\n // fromDate: \"\",\n // toDate: \"\",\n // rateUOM: \"\",\n // onArea: \"\",\n // milestonesCount: 0,\n // totalAmount: \"\",\n // rate: \"\",\n // };\n // this.setState({\n // initialValues: _intialValues,\n // });\n // if (\n // data.rentDepositDetails[data.rentDepositDetails.length - 1].toDate ==\n // data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n getDepositNature(e, values, setFieldValue) {\n if (\n this.state.rentDepositDetails[e.target.value] !== undefined &&\n this.state.rentDepositDetails[e.target.value].length > 0 &&\n this.state.rentDepositDetails[e.target.value][\n this.state.rentDepositDetails[e.target.value].length - 1\n ].toDate == values.to\n ) {\n setFieldValue(\"rdepLogic.rentDepositNature\", \"\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n var _rentDepositDetails = this.state.rentDepositDetails;\n if (\n _rentDepositDetails[e.target.value] == undefined ||\n _rentDepositDetails[e.target.value].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _rentDepositDetails[e.target.value][\n _rentDepositDetails[e.target.value].length - 1\n ].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period =\n this.state.rentDepositDetails[e.target.value].length + 1;\n }\n this.setState({});\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNamesArr,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n\n // periodOtherMilestoneNames = [];\n // periodOtherMilestoneNames.push(\n // periodOtherMilestoneNames[\n // this.state.rentDepositDetails[e.target.value][\n // this.state.rentDepositDetails[e.target.value].length - 1\n // ].milestones.length - 1\n // ]\n // );\n // this.setState({\n // milestoneNamesValues: periodOtherMilestoneNames.length\n // ? []\n // : periodOtherMilestoneNames[\n // this.state.rentDepositDetails[e.target.value][\n // this.state.rentDepositDetails[e.target.value].length - 1\n // ].milestones.length - 1\n // ],\n // });\n\n // this.state.milestoneVal =\n // `Escalation ` +\n // this.state.rentDepositDetails[e.target.value][\n // this.state.rentDepositDetails[e.target.value].length - 1\n // ].period;\n\n // this.setState({});\n }\n return true;\n }\n\n editRd(index, values, key) {\n this.state.currentIndex = index;\n this.state.disableOnEdit = false;\n this.state.readOnEdit = true;\n this.state.period = this.state.rentDepositDetails[key][index].period;\n if (this.state.rentDepositDetails[key][index].period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNamesArr,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.rentDepositDetails[key][index].periodTermDD,\n periodTermMM: this.state.rentDepositDetails[key][index].periodTermMM,\n periodTermYY: this.state.rentDepositDetails[key][index].periodTermYY,\n });\n this.state.milestonesCount =\n this.state.rentDepositDetails[key][index].milestones.length;\n this.state.fromDate = this.state.rentDepositDetails[key][index].fromDate;\n this.state.toDate = this.state.rentDepositDetails[key][index].toDate;\n values.rdepLogic.rentDepositNature =\n this.state.rentDepositDetails[key][index].rentDepositNature;\n values.rdepLogic.months = this.state.rentDepositDetails[key][index].months;\n values.rdepLogic.rateUOM =\n this.state.rentDepositDetails[key][index].rateUOM;\n values.rdepLogic.rate = this.state.rentDepositDetails[key][index].rate;\n values.rdepLogic.totalAmount =\n this.state.rentDepositDetails[key][index].totalAmount;\n\n for (\n let i = 0;\n i < this.state.rentDepositDetails[key][index].milestones.length;\n i++\n ) {\n // if (this.state.milestones === undefined) {\n this.state.milestones[i] = {};\n values.rdepLogic.milestones[i] = {};\n this.state.milestones[i].milestoneName =\n this.state.rentDepositDetails[key][index].milestones[i].milestoneName;\n values.rdepLogic.milestones[i].milestoneName =\n this.state.rentDepositDetails[key][index].milestones[i].milestoneName;\n this.state.milestones[i].dueDate =\n this.state.rentDepositDetails[key][index].milestones[i].dueDate;\n values.rdepLogic.milestones[i].dueDate =\n this.state.rentDepositDetails[key][index].milestones[i].dueDate;\n this.state.milestones[i].milestonePercent =\n this.state.rentDepositDetails[key][index].milestones[\n i\n ].milestonePercent;\n values.rdepLogic.milestones[i].milestonePercent =\n this.state.rentDepositDetails[key][index].milestones[\n i\n ].milestonePercent;\n this.state.milestones[i].amount =\n this.state.rentDepositDetails[key][index].milestones[i].amount;\n values.rdepLogic.milestones[i].amount =\n this.state.rentDepositDetails[key][index].milestones[i].amount;\n if (\n this.state.rentDepositDetails[key][index].milestones[i].milestoneType !=\n undefined\n ) {\n this.state.milestones[i].milestoneType =\n this.state.rentDepositDetails[key][index].milestones[i].milestoneType;\n values.rdepLogic.milestones[i].milestoneType =\n this.state.rentDepositDetails[key][index].milestones[i].milestoneType;\n }\n if (\n this.state.rentDepositDetails[key][index].milestones[\n i\n ].milestoneName.includes(\"Escalation\")\n ) {\n this.state.milestones[i].milestoneQuantityType = \"RDEP Milestone %\";\n values.rdepLogic.milestones[i].milestoneQuantityType =\n \"RDEP Milestone %\";\n } else {\n this.state.milestones[i].milestoneQuantityType =\n \"RDEP Milestone # Months\";\n values.rdepLogic.milestones[i].milestoneQuantityType =\n \"RDEP Milestone # Months\";\n }\n this.setState({});\n // }\n }\n\n this.setState({});\n }\n\n addDetails = (values, resetForm) => {\n console.log(values.rdepLogic);\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n if (this.state.biFurcateLandlordCheckbox === true) {\n let count = 0;\n for (let i = 0; i < this.state.landlordList.length; i++) {\n count += Number(this.state.landlordList[i].percent);\n }\n if (count < 100) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Total landlord percentage should be 100\",\n });\n return false;\n }\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.rdepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.rdepLogic.totalAmount) {\n // alert(\n // \"Total Amount of Milestones do not match with total amount of period\"\n // );\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.rdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n for (let i = 0; i < values.rdepLogic.milestones.length; i++) {\n if (this.state.period > 1) {\n values.rdepLogic.milestones[i].milestoneType = \"RDEP Percent\";\n this.setState({});\n }\n }\n }\n // this.state.milestoneVal = `Escalation ` + values.rdepLogic.period;\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n // alert(\"Enter a date less than \" + values.to);\n return false;\n }\n var _rentDepositDetails = this.state.rentDepositDetails;\n values.rdepLogic.period = this.state.period;\n values.rdepLogic.fromDate = this.state.fromDate;\n values.rdepLogic.toDate = this.state.toDate;\n values.rdepLogic.periodTermYY = this.state.periodTermYY;\n values.rdepLogic.periodTermMM = this.state.periodTermMM;\n values.rdepLogic.periodTermDD = this.state.periodTermDD;\n // for (let i = 0; i < this.state.landlordList; i++) {\n\n // }\n if (\n _rentDepositDetails[values.rdepLogic.rentDepositNature] == undefined\n ) {\n _rentDepositDetails[values.rdepLogic.rentDepositNature] = [];\n }\n _rentDepositDetails[values.rdepLogic.rentDepositNature].push({\n ...values.rdepLogic,\n });\n\n this.setState({\n rentDepositDetails: _rentDepositDetails,\n });\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n values.rdepLogic.totalAmount = \"\";\n this.state.milestonesCount = 1;\n this.state.milestones = [];\n values.rdepLogic.milestones = [];\n this.state.period++;\n values.rdepLogic.rate = \"\";\n values.rdepLogic.escalationPercent = '';\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNamesArr,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n\n // this.state.milestonesCount = 1;\n // resetForm();\n this.validator.hideMessages();\n // this.state.milestones = [];\n } else {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.rdepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n console.log(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.rdepLogic.totalAmount) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.rdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n\n for (let i = 0; i < values.rdepLogic.milestones.length; i++) {\n if (this.state.period > 1) {\n values.rdepLogic.milestones[i].milestoneType = \"CDEP Percent\";\n this.setState({});\n }\n }\n }\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _rentDepositDetails = this.state.rentDepositDetails;\n values.rdepLogic.period = this.state.period;\n values.rdepLogic.fromDate = this.state.fromDate;\n values.rdepLogic.toDate = this.state.toDate;\n values.rdepLogic.periodTermYY = this.state.periodTermYY;\n values.rdepLogic.periodTermMM = this.state.periodTermMM;\n values.rdepLogic.periodTermDD = this.state.periodTermDD;\n\n if (\n _rentDepositDetails[values.rdepLogic.rentDepositNature] == undefined\n ) {\n _rentDepositDetails[values.rdepLogic.rentDepositNature] = [];\n }\n _rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.currentIndex\n ] = { ...values.rdepLogic };\n\n _rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.currentIndex\n ].milestones = this.state.milestones;\n this.setState({\n rentDepositDetails: _rentDepositDetails,\n });\n\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n // this.state.fromDate = \"\";\n // this.state.toDate = \"\";\n this.state.period++;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n // this.state.milestonesCount = 1;\n // resetForm();\n this.validator.hideMessages();\n // this.state.milestones = [];\n // values.rdepLogic.rentDepositNature = \"\";\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n }\n };\n\n resetDetails = (values, resetForm) => {\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period = \"\";\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n values.rdepLogic.rentDepositNature = \"\";\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n calculateRdepAmount(values, setFieldValue) {\n if (values.rdepLogic.rateUOM == \"Flat Amount\") {\n values.rdepLogic.totalAmount =\n Number(values.rdepLogic.rate) * Number(values.rdepLogic.months);\n setFieldValue(\n \"rdepLogic.totalAmount\",\n Number(values.rdepLogic.rate) * Number(values.rdepLogic.months)\n );\n } else if (\n values.rdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.rdepLogic.onArea == \"Carpet Area\"\n ) {\n values.rdepLogic.totalAmount =\n Number(values.rdepLogic.rate) *\n Number(values.totalCarpetArea) *\n Number(values.rdepLogic.months);\n setFieldValue(\n \"rdepLogic.totalAmount\",\n Number(values.rdepLogic.rate) *\n Number(values.totalCarpetArea) *\n Number(values.rdepLogic.months)\n );\n } else if (\n values.rdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.rdepLogic.onArea == \"Usable Area\"\n ) {\n values.rdepLogic.totalAmount =\n Number(values.rdepLogic.rate) *\n Number(values.totalUsableArea) *\n Number(values.rdepLogic.months);\n setFieldValue(\n \"rdepLogic.totalAmount\",\n Number(values.rdepLogic.rate) *\n Number(values.totalUsableArea) *\n Number(values.rdepLogic.months)\n );\n } else if (\n values.rdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.rdepLogic.onArea == \"Gross Leasable Area\"\n ) {\n values.rdepLogic.totalAmount =\n Number(values.rdepLogic.rate) *\n Number(values.totalGrossLeasableArea) *\n Number(values.rdepLogic.months);\n setFieldValue(\n \"rdepLogic.totalAmount\",\n Number(values.rdepLogic.rate) *\n Number(values.totalGrossLeasableArea) *\n Number(values.rdepLogic.months)\n );\n }\n\n if(values.rdepLogic.totalAmount > 0){\n this.calculateEscalationPercentage(values, setFieldValue, (values.rdepLogic.totalAmount/values.rdepLogic.months));\n }\n\n // if (this.state.period > 1) {\n // this.calculateMilestoneAmount(1, values, 0);\n // }\n }\n\n calculateEscalationPercentage(values, setFieldValue, currentRecord) {\n if ( typeof this.state.rentDepositDetails[values.rdepLogic.rentDepositNature] != \"undefined\" && this.state.rentDepositDetails[values.rdepLogic.rentDepositNature].length > 0) {\n let count = this.state.rentDepositDetails[values.rdepLogic.rentDepositNature].length;\n let prevMonth = parseFloat(this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][count - 1]['months']);\n let prevRecord = this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][count - 1]['totalAmount']/prevMonth;\n let percent = ((currentRecord-prevRecord)/prevRecord)*100;\n setFieldValue(\n \"rdepLogic.escalationPercent\",\n (\n percent\n ).toFixed(2)\n );\n }\n }\n\n changeFieldName(e, id, values) {\n console.log(values);\n if (e.target.value == \"Due on Lease Commencement Date\") {\n this.state.milestones[id].dueDate = this.state.leaseCommencementDate;\n values.rdepLogic.milestones[id].dueDate =\n this.state.leaseCommencementDate;\n } else {\n this.state.milestones[id].dueDate = \"\";\n // values.rdepLogic.milestones[id].dueDate = \"\";\n }\n if (e.target.value.includes(\"Escalation\")) {\n this.state.milestones[id].milestoneQuantityType = \"RDEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType =\n \"RDEP Milestone # Months\";\n }\n }\n\n changeMilestonePercentName(e, id, values) {\n console.log(e.target.value);\n if (e.target.value == \"RDEP Months\") {\n this.state.milestones[id].milestoneQuantityType =\n \"RDEP Milestone # Months\";\n } else if (e.target.value == \"RDEP Percent\") {\n this.state.milestones[id].milestoneQuantityType = \"RDEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType = \"\";\n }\n\n if (e.target.value == \"RDEP Months\") {\n this.state.milestones[id].amount =\n (values.rdepLogic.totalAmount / values.rdepLogic.months) *\n Number(this.state.milestones[id].milestonePercent);\n values.rdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n } else if (e.target.value == \"Flat Amount\") {\n\n } else {\n var previousAmount = 0;\n if (\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature] ===\n undefined ||\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length == 0\n ) {\n previousAmount = 0;\n } else {\n previousAmount =\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n }\n\n var currentAmount = values.rdepLogic.totalAmount;\n\n var balanceAmount = currentAmount - previousAmount;\n this.state.milestones[id].amount =\n (balanceAmount / 100) * this.state.milestones[id].milestonePercent;\n\n values.rdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n\n this.setState({});\n }\n }\n\n calculateMilestoneAmount(e, values, id) {\n console.log(\"1\");\n if (this.state.period == \"1\") {\n if (values.rdepLogic.milestones[id].milestoneType == \"RDEP Months\") {\n this.state.milestones[id].amount =\n (values.rdepLogic.totalAmount / values.rdepLogic.months) *\n Number(this.state.milestones[id].milestonePercent);\n values.rdepLogic.milestones[id].amount =\n this.state.milestones[id].amount;\n } else {\n this.state.milestones[id].amount =\n (values.rdepLogic.totalAmount *\n Number(this.state.milestones[id].milestonePercent)) /\n 100;\n // Number(this.state.milestones[id].milestonePercent);\n values.rdepLogic.milestones[id].amount =\n this.state.milestones[id].amount;\n }\n this.setState({});\n } else {\n console.log(\"2\");\n var previousAmount =\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][\n this.state.rentDepositDetails[values.rdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.rdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n\n this.state.milestones[id].amount = (balanceAmount / 100) * 100;\n values.rdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n }\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _rdd = this.state.rentDepositDetails;\n _rdd[this.state.keyvalue].splice(this.state.index_val, 1);\n this.setState({\n rentDepositDetails: _rdd,\n showForm: true,\n });\n this.state.period--;\n this.state.period--;\n this.setState({\n delete: false,\n index_val: \"\",\n keyvalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n biFurcateLandlord(e, values) {\n if (this.state.biFurcateLandlordCheckbox === true) {\n this.setState({ biFurcateLandlordCheckbox: false });\n } else {\n this.setState({ biFurcateLandlordCheckbox: true });\n }\n }\n\n calculateRentRate(e, values, setFieldValue) {\n if (e.target.value > 0 && typeof this.state.rentDepositDetails[values.rdepLogic.rentDepositNature] != \"undefined\" && this.state.rentDepositDetails[values.rdepLogic.rentDepositNature].length > 0) {\n let count = this.state.rentDepositDetails[values.rdepLogic.rentDepositNature].length;\n //let prevRecord = this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][count - 1]['totalAmount'];\n let prevMonth = parseFloat(this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][count - 1]['months']);\n let prevRecord = this.state.rentDepositDetails[values.rdepLogic.rentDepositNature][count - 1]['totalAmount']/prevMonth;\n\n let reviseTotalAmt = Number(prevRecord) + Number((prevRecord * e.target.value) / 100);\n\n let currentMonths = parseFloat(values.rdepLogic.months);\n\n let newRate = 0;\n if (values.rdepLogic.rateUOM == \"Per Sq Ft\" && values.rdepLogic.onArea == \"Gross Leasable Area\") {\n newRate = (reviseTotalAmt / values.totalGrossLeasableArea)\n } else if (values.rdepLogic.rateUOM == \"Per Sq Ft\" && values.rdepLogic.onArea == \"Usable Area\") {\n newRate = (reviseTotalAmt / values.totalUsableArea)\n } else if (values.rdepLogic.rateUOM == \"Per Sq Ft\" && values.rdepLogic.onArea == \"Carpet Area\") {\n newRate = (reviseTotalAmt / values.totalCarpetArea)\n } else {\n let rateVal = reviseTotalAmt - (reviseTotalAmt - prevRecord)\n newRate = rateVal + ((rateVal * e.target.value / 100))\n }\n\n setFieldValue(\n \"rdepLogic.rate\",\n (\n newRate\n ).toFixed(2)\n );\n\n setFieldValue(\n \"rdepLogic.totalAmount\",\n (\n reviseTotalAmt * currentMonths\n ).toFixed(2)\n );\n }\n }\n\n milestoneTabs(handleChange, values) {\n var heads = [];\n for (var i = 0; i < this.state.milestonesCount; i++) {\n heads.push(\n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneName = e.target.value;\n this.changeFieldName(e, id, values);\n handleChange(e);\n }}\n >\n \n {this.state.milestoneNamesValues.map((item, i) => (\n \n ))}\n \n {this.validator.message(\n \"Milestone Name\",\n this.state.milestones[i].milestoneName,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n {this.state.period == \"1\" && (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].dueDate = e.target.value;\n handleChange(e);\n }}\n />\n {this.validator.message(\n \"Due Date\",\n this.state.milestones[i].dueDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n )}\n {this.state.milestones[i].milestoneQuantityType != '' && (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneType = e.target.value;\n this.changeMilestonePercentName(e, id, values);\n handleChange(e);\n }}\n >\n \n \n \n \n \n {this.validator.message(\n \"Milestone Type\",\n this.state.milestones[i].milestoneType,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n )}\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestonePercent = e.target.value;\n handleChange(e);\n }}\n onBlur={(e) => {\n var id = e.target.getAttribute(\"param\");\n this.calculateMilestoneAmount(e, values, id);\n }}\n />\n {/* Commented validation message */}\n
\n \n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].amount = e.target.value;\n handleChange(e);\n }}\n />\n {this.validator.message(\n \"RDEP Milestone Amount\",\n this.state.milestones[i].amount,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n {heads} \n \n
\n );\n }\n\n landlordPercentage(handleChange, values) {\n var body = [];\n for (var i = 0; i < this.state.landlordList.length; i++) {\n body.push(\n {body}
\n \n \n
\n );\n }\n return body;\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.landlordList[id].percent = e.target.value;\n this.setState({});\n handleChange(e);\n }}\n />\n
\n \n \n {(close) => (\n \n )}\n \n \n {(close) => (\n \n
\n );\n }\n rentDepositDetailPopup(rent) {\n return this.rentalDetailsPopup(rent);\n }\n rentalDetailsPopup(rent) {\n console.log(rent);\n return (\n \n
\n \n {\n console.log(this.state.landlordList);\n let count = 0;\n for (var key in this.state.rentDepositDetails) {\n count = 1;\n break;\n }\n if (count == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n var rentDepositDetails = { ...this.state.rentDepositDetails };\n values.rentDepositDetails = rentDepositDetails;\n values.biFurcateLandlordCheckbox =\n this.state.biFurcateLandlordCheckbox;\n // values.landlordList = this.state.landlordList;\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-rent-deposit-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Security Deposit Details \n
- \n Rent Deposit Details\n \n
\n \n
\n {/* \n \n\n
*/}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen &&\n this.rentDepositDetailPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Rent Deposit Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default withRouter(RentDepositDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n periodOneMileStoneNames,\n periodOtherMilestoneNames,\n} from \"../../constants\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass CAMDepositDetails extends React.Component {\n countError = \"\";\n state = {\n readOnEdit: false,\n currentIndex: null,\n disableOnEdit: false,\n applicableValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n keyvalue: \"\",\n leaseCommencementDate: \"\",\n popupData: {},\n isOpen: false,\n milestoneMonths: \"CDEP Milestone # Months\",\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n milestonesCount: 1,\n milestones: [],\n milestoneNamesValues: [],\n initialValues: {\n cdepLogic: {\n milestones: [],\n period: \"\",\n camDepositNature: \"\",\n months: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n onArea: \"\",\n milestonesCount: 0,\n totalAmount: \"\",\n rate: \"\",\n },\n },\n camDepositDetails: [],\n toggleCdForm: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n showCdForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\") {\n this.setState({\n toggleCdForm: true,\n });\n } else {\n this.setState({\n toggleCdForm: false,\n });\n }\n };\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-deposit-details?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n athis.state.applicableValue = data.camDepositApplicable;\n athis.state.fromDate = data.from;\n athis.state.leaseCommencementDate = data.lcd;\n athis.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n athis.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n athis.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n if (data.camDepositDetails.length > 0) {\n // let _tempDate = new Date(\n // data.camDepositDetails[data.camDepositDetails.length - 1].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.camDepositDetails[data.camDepositDetails.length - 1].toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.camDepositApplicable === \"yes\") {\n athis.setState({\n toggleCdForm: true,\n });\n } else {\n athis.setState({\n toggleCdForm: false,\n });\n }\n athis.setState({\n initialValues: data,\n camDepositDetails: data.camDepositDetails,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n notes_12: data.notes_12,\n period:\n data.camDepositDetails.length > 0\n ? data.camDepositDetails.length + 1\n : 1,\n });\n var _intialValues = athis.state.initialValues;\n _intialValues.cdepLogic = {\n milestones: [\n {\n dueDate: \"\",\n milestoneName: \"\",\n amount: \"\",\n milestonePercent: \"\",\n },\n ],\n period: \"\",\n camDepositNature: \"\",\n months: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n onArea: \"\",\n milestonesCount: 0,\n totalAmount: \"\",\n rate: \"\",\n };\n if (\n data.camDepositDetails[data.camDepositDetails.length - 1].toDate ==\n data.to\n ) {\n athis.setState({\n showForm: false,\n });\n }\n });\n\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-cam-deposit-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.applicableValue = data.camDepositApplicable;\n // this.state.fromDate = data.from;\n // this.state.leaseCommencementDate = data.lcd;\n // this.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n // this.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n // this.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n // if (data.camDepositDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.camDepositDetails[data.camDepositDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.camDepositDetails[data.camDepositDetails.length - 1].toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.camDepositApplicable === \"yes\") {\n // this.setState({\n // toggleCdForm: true,\n // });\n // } else {\n // this.setState({\n // toggleCdForm: false,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // camDepositDetails: data.camDepositDetails,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // notes_12: data.notes_12,\n // period:\n // data.camDepositDetails.length > 0\n // ? data.camDepositDetails.length + 1\n // : 1,\n // });\n // var _intialValues = this.state.initialValues;\n // _intialValues.cdepLogic = {\n // milestones: [\n // {\n // dueDate: \"\",\n // milestoneName: \"\",\n // amount: \"\",\n // milestonePercent: \"\",\n // },\n // ],\n // period: \"\",\n // camDepositNature: \"\",\n // months: \"\",\n // fromDate: \"\",\n // toDate: \"\",\n // rateUOM: \"\",\n // onArea: \"\",\n // milestonesCount: 0,\n // totalAmount: \"\",\n // rate: \"\",\n // };\n // if (\n // data.camDepositDetails[data.camDepositDetails.length - 1].toDate ==\n // data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n getDepositNature(e, values, setFieldValue) {\n if (\n this.state.camDepositDetails[e.target.value] !== undefined &&\n this.state.camDepositDetails[e.target.value].length > 0 &&\n this.state.camDepositDetails[e.target.value][\n this.state.camDepositDetails[e.target.value].length - 1\n ].toDate == values.to\n ) {\n setFieldValue(\"rdepLogic.rentDepositNature\", \"\");\n // alert(\"Values For this type has completed the period\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n var _camDepositDetails = this.state.camDepositDetails;\n if (\n _camDepositDetails[e.target.value] == undefined ||\n _camDepositDetails[e.target.value].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _camDepositDetails[e.target.value][\n _camDepositDetails[e.target.value].length - 1\n ].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period =\n this.state.camDepositDetails[e.target.value].length + 1;\n }\n this.setState({});\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n return true;\n }\n\n editCd(index, values, key) {\n console.log(values);\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n console.log(key, index);\n console.log(this.state.camDepositDetails);\n this.state.period = this.state.camDepositDetails[key][index].period;\n if (this.state.camDepositDetails[key][index].period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.camDepositDetails[key][index].periodTermDD,\n periodTermMM: this.state.camDepositDetails[key][index].periodTermMM,\n periodTermYY: this.state.camDepositDetails[key][index].periodTermYY,\n });\n // values.rdepLogic = this.state.camDepositDetails[key][index];\n this.state.milestonesCount =\n this.state.camDepositDetails[key][index].milestones.length;\n this.state.fromDate = this.state.camDepositDetails[key][index].fromDate;\n this.state.toDate = this.state.camDepositDetails[key][index].toDate;\n values.cdepLogic.camDepositNature =\n this.state.camDepositDetails[key][index].camDepositNature;\n values.cdepLogic.months = this.state.camDepositDetails[key][index].months;\n values.cdepLogic.rateUOM = this.state.camDepositDetails[key][index].rateUOM;\n values.cdepLogic.rate = this.state.camDepositDetails[key][index].rate;\n values.cdepLogic.totalAmount =\n this.state.camDepositDetails[key][index].totalAmount;\n\n for (\n let i = 0;\n i < this.state.camDepositDetails[key][index].milestones.length;\n i++\n ) {\n // if (this.state.milestones === undefined) {\n this.state.milestones[i] = {};\n values.cdepLogic.milestones[i] = {};\n this.state.milestones[i].milestoneName =\n this.state.camDepositDetails[key][index].milestones[i].milestoneName;\n values.cdepLogic.milestones[i].milestoneName =\n this.state.camDepositDetails[key][index].milestones[i].milestoneName;\n this.state.milestones[i].dueDate =\n this.state.camDepositDetails[key][index].milestones[i].dueDate;\n values.cdepLogic.milestones[i].dueDate =\n this.state.camDepositDetails[key][index].milestones[i].dueDate;\n this.state.milestones[i].milestonePercent =\n this.state.camDepositDetails[key][index].milestones[i].milestonePercent;\n values.cdepLogic.milestones[i].milestonePercent =\n this.state.camDepositDetails[key][index].milestones[i].milestonePercent;\n this.state.milestones[i].amount =\n this.state.camDepositDetails[key][index].milestones[i].amount;\n values.cdepLogic.milestones[i].amount =\n this.state.camDepositDetails[key][index].milestones[i].amount;\n if (\n this.state.camDepositDetails[key][index].milestones[i].milestoneType !=\n undefined\n ) {\n this.state.milestones[i].milestoneType =\n this.state.camDepositDetails[key][index].milestones[i].milestoneType;\n values.cdepLogic.milestones[i].milestoneType =\n this.state.camDepositDetails[key][index].milestones[i].milestoneType;\n }\n if (\n this.state.camDepositDetails[key][index].milestones[\n i\n ].milestoneName.includes(\"Escalation\")\n ) {\n this.state.milestones[i].milestoneQuantityType = \"CDEP Milestone %\";\n values.cdepLogic.milestones[i].milestoneQuantityType =\n \"CDEP Milestone %\";\n } else {\n this.state.milestones[i].milestoneQuantityType =\n \"CDEP Milestone # Months\";\n values.cdepLogic.milestones[i].milestoneQuantityType =\n \"CDEP Milestone # Months\";\n }\n this.setState({});\n // }\n }\n\n this.setState({});\n }\n\n addDetails = (values, resetForm) => {\n if (this.state.currentIndex === null) {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.cdepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.cdepLogic.totalAmount) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.camDepositDetails[values.cdepLogic.camDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.cdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n console.log(previousAmount, currentAmount, balanceAmount);\n for (let i = 0; i < values.cdepLogic.milestones.length; i++) {\n if (this.state.period > 1) {\n values.cdepLogic.milestones[i].milestoneType = \"CDEP Percent\";\n this.setState({});\n }\n }\n }\n\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _camDepositDetails = this.state.camDepositDetails;\n values.cdepLogic.period = this.state.period;\n values.cdepLogic.fromDate = this.state.fromDate;\n values.cdepLogic.toDate = this.state.toDate;\n values.cdepLogic.periodTermYY = this.state.periodTermYY;\n values.cdepLogic.periodTermMM = this.state.periodTermMM;\n values.cdepLogic.periodTermDD = this.state.periodTermDD;\n\n if (_camDepositDetails[values.cdepLogic.camDepositNature] == undefined) {\n _camDepositDetails[values.cdepLogic.camDepositNature] = [];\n }\n _camDepositDetails[values.cdepLogic.camDepositNature].push({\n ...values.cdepLogic,\n });\n this.setState({\n camDepositDetails: _camDepositDetails,\n });\n\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.period++;\n values.cdepLogic.rate = \"\";\n this.state.milestonesCount = 1;\n this.state.milestones = [];\n values.cdepLogic.milestones = [];\n values.cdepLogic.escalationPercent = '';\n values.cdepLogic.totalAmount = '';\n\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n this.validator.hideMessages();\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n // this.state.milestones = [];\n } else {\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.cdepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.cdepLogic.totalAmount) {\n // alert(\n // \"Total Amount of Milestones do not match with total amount of period\"\n // );\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n\n return false;\n }\n } else {\n var previousAmount =\n this.state.camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.camDepositDetails[values.cdepLogic.camDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.cdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n console.log(previousAmount, currentAmount, balanceAmount);\n for (let i = 0; i < values.cdepLogic.milestones.length; i++) {\n if (this.state.period > 1) {\n values.cdepLogic.milestones[i].milestoneType = \"CDEP Percent\";\n this.setState({});\n }\n }\n }\n\n if (this.state.toDate > values.to) {\n // alert(\"Enter a date less than \" + values.to);\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _camDepositDetails = this.state.camDepositDetails;\n values.cdepLogic.period = this.state.period;\n values.cdepLogic.fromDate = this.state.fromDate;\n values.cdepLogic.toDate = this.state.toDate;\n values.cdepLogic.periodTermYY = this.state.periodTermYY;\n values.cdepLogic.periodTermMM = this.state.periodTermMM;\n values.cdepLogic.periodTermDD = this.state.periodTermDD;\n\n if (_camDepositDetails[values.cdepLogic.camDepositNature] == undefined) {\n _camDepositDetails[values.cdepLogic.camDepositNature] = [];\n }\n _camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.currentIndex\n ] = { ...values.cdepLogic };\n\n _camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.currentIndex\n ].milestones = this.state.milestones;\n this.setState({\n camDepositDetails: _camDepositDetails,\n });\n\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.period++;\n this.setState({\n fromDate: getToDate(this.state.toDate, 2, 0, 0),\n toDate: \"\",\n });\n // this.state.milestonesCount = 1;\n // resetForm();\n this.validator.hideMessages();\n // this.state.milestones = [];\n // values.cdepLogic.camDepositNature = \"\";\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n }\n };\n\n resetDetails = (values, resetForm) => {\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period = \"\";\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n values.cdepLogic.camDepositNature = \"\";\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n this.setState({});\n };\n\n calculateCdepAmount(values, setFieldValue) {\n if (values.cdepLogic.rateUOM == \"Flat Amount\") {\n values.cdepLogic.totalAmount =\n Number(values.cdepLogic.rate) * Number(values.cdepLogic.months);\n setFieldValue(\n \"cdepLogic.totalAmount\",\n Number(values.cdepLogic.rate) * Number(values.cdepLogic.months)\n );\n } else if (\n values.cdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.cdepLogic.onArea == \"Carpet Area\"\n ) {\n values.cdepLogic.totalAmount =\n Number(values.cdepLogic.rate) *\n Number(values.totalCarpetArea) *\n Number(values.cdepLogic.months);\n setFieldValue(\n \"cdepLogic.totalAmount\",\n Number(values.cdepLogic.rate) *\n Number(values.totalCarpetArea) *\n Number(values.cdepLogic.months)\n );\n } else if (\n values.cdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.cdepLogic.onArea == \"Usable Area\"\n ) {\n values.cdepLogic.totalAmount =\n Number(values.cdepLogic.rate) *\n Number(values.totalUsableArea) *\n Number(values.cdepLogic.months);\n setFieldValue(\n \"cdepLogic.totalAmount\",\n Number(values.cdepLogic.rate) *\n Number(values.totalUsableArea) *\n Number(values.cdepLogic.months)\n );\n } else if (\n values.cdepLogic.rateUOM == \"Per Sq Ft\" &&\n values.cdepLogic.onArea == \"Gross Leasable Area\"\n ) {\n values.cdepLogic.totalAmount =\n Number(values.cdepLogic.rate) *\n Number(values.totalGrossLeasableArea) *\n Number(values.cdepLogic.months);\n setFieldValue(\n \"cdepLogic.totalAmount\",\n Number(values.cdepLogic.rate) *\n Number(values.totalGrossLeasableArea) *\n Number(values.cdepLogic.months)\n );\n }\n if (this.state.period > 1) {\n this.calculateMilestoneAmount(1, values, 0);\n }\n if(values.cdepLogic.totalAmount > 0){\n this.calculateEscalationPercentage(values, setFieldValue, (values.cdepLogic.totalAmount/values.cdepLogic.months));\n }\n }\n\n calculateEscalationPercentage(values, setFieldValue, currentRecord) {\n if ( typeof this.state.camDepositDetails[values.cdepLogic.camDepositNature] != \"undefined\" && this.state.camDepositDetails[values.cdepLogic.camDepositNature].length > 0) {\n let count = this.state.camDepositDetails[values.cdepLogic.camDepositNature].length;\n let prevMonth = parseFloat(this.state.camDepositDetails[values.cdepLogic.camDepositNature][count - 1]['months']);\n let prevRecord = this.state.camDepositDetails[values.cdepLogic.camDepositNature][count - 1]['totalAmount']/prevMonth;\n let percent = ((currentRecord-prevRecord)/prevRecord)*100;\n setFieldValue(\n \"cdepLogic.escalationPercent\",\n (\n percent\n ).toFixed(2)\n );\n }\n }\n\n changeFieldName(e, id, values) {\n console.log(values);\n if (e.target.value == \"Due on Lease Commencement Date\") {\n this.state.milestones[id].dueDate = this.state.leaseCommencementDate;\n values.cdepLogic.milestones[id].dueDate =\n this.state.leaseCommencementDate;\n } else {\n this.state.milestones[id].dueDate = \"\";\n // values.cdepLogic.milestones[id].dueDate = \"\";\n }\n if (e.target.value.includes(\"Escalation\")) {\n this.state.milestones[id].milestoneQuantityType = \"CDEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType =\n \"CDEP Milestone # Months\";\n }\n }\n\n changeMilestonePercentName(e, id, values) {\n if (e.target.value == \"CDEP Months\") {\n this.state.milestones[id].milestoneQuantityType =\n \"CDEP Milestone # Months\";\n } else if (e.target.value == \"CDEP Percent\") {\n this.state.milestones[id].milestoneQuantityType = \"CDEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType = \"\";\n }\n\n\n if (e.target.value == \"CDEP Months\") {\n this.state.milestones[id].amount =\n (values.cdepLogic.totalAmount / values.cdepLogic.months) *\n Number(this.state.milestones[id].milestonePercent);\n values.cdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n } else if (e.target.value == \"CDEP Percent\") {\n var previousAmount = 0;\n if (\n this.state.camDepositDetails[values.cdepLogic.rentDepositNature] ==\n undefined\n ) {\n previousAmount = 0;\n } else {\n previousAmount =\n this.state.camDepositDetails[values.cdepLogic.rentDepositNature][\n this.state.camDepositDetails[values.cdepLogic.rentDepositNature]\n .length - 1\n ].totalAmount;\n }\n\n var currentAmount = values.cdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n this.state.milestones[id].amount =\n (balanceAmount / 100) * this.state.milestones[id].milestonePercent;\n values.cdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n }\n }\n\n calculateRentRate(e, values, setFieldValue) {\n console.log(values, \"values 672 \");\n console.log(this.state.camDepositDetails, \"cam details\")\n console.log(values.cdepLogic.camDepositNature, \"values.cdepLogic.camDepositNature\")\n\n\n if (e.target.value > 0 && typeof this.state.camDepositDetails[values.cdepLogic.camDepositNature] != \"undefined\" && this.state.camDepositDetails[values.cdepLogic.camDepositNature].length > 0) {\n let count = this.state.camDepositDetails[values.cdepLogic.camDepositNature].length;\n let prevMonth = parseFloat(this.state.camDepositDetails[values.cdepLogic.camDepositNature][count - 1]['months']);\n let prevRecord = this.state.camDepositDetails[values.cdepLogic.camDepositNature][count - 1]['totalAmount']/prevMonth;\n\n let reviseTotalAmt = Number(prevRecord) + Number((prevRecord * e.target.value) / 100);\n\n let currentMonths = parseFloat(values.cdepLogic.months);\n\n let newRate = 0;\n if (values.cdepLogic.rateUOM == \"Per Sq Ft\" && values.cdepLogic.onArea == \"Gross Leasable Area\") {\n newRate = (reviseTotalAmt / values.totalGrossLeasableArea)\n } else if (values.cdepLogic.rateUOM == \"Per Sq Ft\" && values.cdepLogic.onArea == \"Usable Area\") {\n newRate = (reviseTotalAmt / values.totalUsableArea)\n } else if (values.cdepLogic.rateUOM == \"Per Sq Ft\" && values.cdepLogic.onArea == \"Carpet Area\") {\n newRate = (reviseTotalAmt / values.totalCarpetArea)\n } else {\n let rateVal = reviseTotalAmt - (reviseTotalAmt - prevRecord)\n newRate = rateVal + ((rateVal * e.target.value / 100))\n }\n\n setFieldValue(\n \"cdepLogic.rate\",\n (\n newRate\n ).toFixed(2)\n );\n\n setFieldValue(\n \"cdepLogic.totalAmount\",\n (\n reviseTotalAmt*currentMonths\n ).toFixed(2)\n );\n }\n }\n\n calculateMilestoneAmount(e, values, id) {\n if (this.state.period == \"1\") {\n if (values.cdepLogic.milestones[id].milestoneType == \"CDEP Months\") {\n this.state.milestones[id].amount =\n (values.cdepLogic.totalAmount / values.cdepLogic.months) *\n Number(this.state.milestones[id].milestonePercent);\n values.cdepLogic.milestones[id].amount =\n this.state.milestones[id].amount;\n } else {\n this.state.milestones[id].amount =\n (values.cdepLogic.totalAmount *\n Number(this.state.milestones[id].milestonePercent)) /\n 100;\n values.cdepLogic.milestones[id].amount =\n this.state.milestones[id].amount;\n }\n this.setState({});\n } else {\n var previousAmount =\n this.state.camDepositDetails[values.cdepLogic.camDepositNature][\n this.state.camDepositDetails[values.cdepLogic.camDepositNature]\n .length - 1\n ].totalAmount;\n var currentAmount = values.cdepLogic.totalAmount;\n var balanceAmount = currentAmount - previousAmount;\n this.state.milestones[id].amount = (balanceAmount / 100) * 100;\n values.cdepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n }\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _cdd = this.state.camDepositDetails;\n _cdd[this.state.keyvalue].splice(this.state.index_val, 1);\n this.setState({\n camDepositDetails: _cdd,\n showForm: true,\n });\n this.state.period--;\n this.setState({\n delete: false,\n index_val: \"\",\n keyvalue: \"\",\n });\n };\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n milestoneTabs(handleChange, values) {\n var heads = [];\n for (var i = 0; i < this.state.milestonesCount; i++) {\n heads.push(\n
\n \n
\n \n
\n \n \n \n
\n \n
\n\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | Milestone Name | \nDue Date | \nRDEP Milestone | \nRDEP Milestone Amount (Rs.) | \n
|---|---|---|---|
| {name.milestoneName} | \n\n {/* {dateFormat(name.dueDate, \"dd mmm yyyy\")}{\" \"} */}\n {leaseDateFormat(name.dueDate)}\n | \n\n {name.milestonePercent}\n {name.milestoneType == \"RDEP Months\"\n ? \" Months\"\n : \" %\"}\n | \n{name.amount} | \n
\n
\n \n {/* Milestone Name */}\n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneName = e.target.value;\n this.changeFieldName(e, id, values);\n handleChange(e);\n }}\n >\n \n {this.state.milestoneNamesValues.map((item) => (\n \n ))}\n \n {this.validator.message(\n \"Milestone Name\",\n this.state.milestones[i].milestoneName,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n {/* Due Date */}\n \n
\n\n {this.state.period == \"1\" && (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].dueDate = e.target.value;\n handleChange(e);\n }}\n />\n {this.validator.message(\n \"Due Date\",\n this.state.milestones[i].dueDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n {/* Milestone Type */}\n \n
\n )}\n\n {this.state.milestones[i].milestoneType != \"Flat Amount\" && (\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneType = e.target.value;\n this.changeMilestonePercentName(e, id, values);\n handleChange(e);\n }}\n >\n \n \n \n \n \n {this.validator.message(\n \"Milestone Type\",\n this.state.milestones[i].milestoneType,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n {/* Milestone Percent or Amount */}\n \n
\n )}\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestonePercent = e.target.value;\n handleChange(e);\n }}\n onBlur={(e) => {\n var id = e.target.getAttribute(\"param\");\n this.calculateMilestoneAmount(e, values, id);\n }}\n />\n
\n \n {/* Milestone Amount */}\n \n
\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].amount = e.target.value;\n handleChange(e);\n }}\n />\n
\n \n \n {heads} \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n {body}
\n \n
\n \n {\n values.camDepositApplicable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n this.applicableValidator.showMessages();\n return false;\n }\n // if (this.state.camDepositDetails.length == 0) {\n // this.mainFormValidator.showMessages(\"countError\");\n // return false;\n // }\n let count = 0;\n for (var key in this.state.camDepositDetails) {\n count = 1;\n break;\n }\n if (count == 0 && this.state.applicableValue !== \"no\") {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n var camDepositDetails = { ...this.state.camDepositDetails };\n values.camDepositDetails = camDepositDetails;\n console.log(this.state.camDepositDetails, \"pp\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-cam-deposit-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Security Deposit Details \n
- \n CAM Deposit Details\n \n
\n \n
\n {/* \n \n
*/}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen &&\n this.camDepositDetailPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Cam Deposit Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default withRouter(CAMDepositDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport {\n electricityLoadDeposit,\n airConditioingLoadDeposit,\n meterDeposit,\n gasBasisUnitsGasBank,\n storageFitoutDeposit,\n} from \"../../constants\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { getToDate } from \"../../utils/utils\";\nimport { Modal } from \"react-bootstrap\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n periodOneMileStoneNames,\n periodOtherMilestoneNames,\n} from \"../../constants\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\nclass OtherDepositDetails extends React.Component {\n countError = \"\";\n state = {\n odepMilestonePercent: 100,\n currentIndex: null,\n disableOnEdit: false,\n readOnEdit: false,\n applicableValue: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: \"\",\n index_val: \"\",\n delete: false,\n keyvalue: \"\",\n leaseCommencementDate: \"\",\n popupData: {},\n isOpen: false,\n milestoneMonths: \"ODEP Milestone # Months\",\n showForm: true,\n fromDate: \"\",\n toDate: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n periodTermDD: \"\",\n periodTermMM: \"\",\n periodTermYY: \"\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n period: 1,\n redirect: false,\n milestonesCount: 1,\n milestones: [],\n milestoneNamesValues: [],\n depositRateUomValues: [],\n initialValues: {\n odepLogic: {\n milestones: [],\n period: \"\",\n otherDepositName: \"\",\n depositNature: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n uom: \"\",\n onArea: \"\",\n milestonesCount: 0,\n onUnits: \"\",\n amount: \"\",\n rate: \"\",\n other_deposit_type: \"\",\n },\n },\n otherDepositDetails: [],\n toggleOdForm: false,\n toggleOnUnit: true,\n toggleStorage: false,\n showArea: false,\n showOnArea: false,\n };\n\n constructor(props) {\n super(props);\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n this.applicableValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n showOdForm = (e) => {\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n if (e.target.value === \"yes\") {\n this.setState({\n toggleOdForm: true,\n });\n } else {\n this.setState({\n toggleOdForm: false,\n });\n }\n };\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n componentDidMount() {\n\n let athis= this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-deposit-details?id=${this.props.match.params.id}`).then((response) =>{\n let data = response.data;\n athis.state.applicableValue = data.otherDepositApplicable;\n athis.state.fromDate = data.from;\n athis.state.leaseCommencementDate = data.lcd;\n athis.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n athis.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n athis.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n if (data.otherDepositDetails.length > 0) {\n // let _tempDate = new Date(\n // data.otherDepositDetails[data.otherDepositDetails.length - 1].toDate\n // );\n // _tempDate.setDate(_tempDate.getDate() + 1);\n // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // var y = _tempDate.getFullYear();\n // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // athis.state.fromDate = someFormattedDate;\n athis.setState({\n fromDate: getToDate(\n data.otherDepositDetails[data.otherDepositDetails.length - 1]\n .toDate,\n 2,\n 0,\n 0\n ),\n });\n }\n if (data.otherDepositApplicable === \"yes\") {\n athis.setState({\n toggleOdForm: true,\n });\n } else {\n athis.setState({\n toggleOdForm: false,\n });\n }\n athis.setState({\n initialValues: data,\n otherDepositDetails: data.otherDepositDetails,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n notes_13: data.notes_13,\n period:\n data.otherDepositDetails.length > 0\n ? data.otherDepositDetails.length + 1\n : 1,\n });\n var _intialValues = athis.state.initialValues;\n _intialValues.odepLogic = {\n milestones: [\n {\n dueDate: \"\",\n milestoneName: \"\",\n amount: \"\",\n milestonePercent: \"\",\n },\n ],\n period: \"\",\n otherDepositName: \"\",\n depositNature: \"\",\n fromDate: \"\",\n toDate: \"\",\n rateUOM: \"\",\n uom: \"\",\n onArea: \"\",\n milestonesCount: 0,\n onUnits: \"\",\n amount: \"\",\n rate: \"\",\n };\n athis.setState({\n initialValues: _intialValues,\n });\n if (\n data.otherDepositDetails[data.otherDepositDetails.length - 1]\n .toDate == data.to\n ) {\n athis.setState({\n showForm: false,\n });\n }\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-other-deposit-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // this.state.applicableValue = data.otherDepositApplicable;\n // this.state.fromDate = data.from;\n // this.state.leaseCommencementDate = data.lcd;\n // this.state.renewalLeaseTermYY = data.renewalLeaseTermYY;\n // this.state.renewalLeaseTermDD = data.renewalLeaseTermDD;\n // this.state.renewalLeaseTermMM = data.renewalLeaseTermMM;\n\n // if (data.otherDepositDetails.length > 0) {\n // // let _tempDate = new Date(\n // // data.otherDepositDetails[data.otherDepositDetails.length - 1].toDate\n // // );\n // // _tempDate.setDate(_tempDate.getDate() + 1);\n // // var dd = (\"0\" + _tempDate.getDate()).slice(-2);\n // // var mm = (\"0\" + (_tempDate.getMonth() + 1)).slice(-2);\n // // var y = _tempDate.getFullYear();\n // // var someFormattedDate = y + \"-\" + mm + \"-\" + dd;\n // // this.state.fromDate = someFormattedDate;\n // this.setState({\n // fromDate: getToDate(\n // data.otherDepositDetails[data.otherDepositDetails.length - 1]\n // .toDate,\n // 2,\n // 0,\n // 0\n // ),\n // });\n // }\n // if (data.otherDepositApplicable === \"yes\") {\n // this.setState({\n // toggleOdForm: true,\n // });\n // } else {\n // this.setState({\n // toggleOdForm: false,\n // });\n // }\n // this.setState({\n // initialValues: data,\n // otherDepositDetails: data.otherDepositDetails,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // notes_13: data.notes_13,\n // period:\n // data.otherDepositDetails.length > 0\n // ? data.otherDepositDetails.length + 1\n // : 1,\n // });\n // var _intialValues = this.state.initialValues;\n // _intialValues.odepLogic = {\n // milestones: [\n // {\n // dueDate: \"\",\n // milestoneName: \"\",\n // amount: \"\",\n // milestonePercent: \"\",\n // },\n // ],\n // period: \"\",\n // otherDepositName: \"\",\n // depositNature: \"\",\n // fromDate: \"\",\n // toDate: \"\",\n // rateUOM: \"\",\n // uom: \"\",\n // onArea: \"\",\n // milestonesCount: 0,\n // onUnits: \"\",\n // amount: \"\",\n // rate: \"\",\n // };\n // this.setState({\n // initialValues: _intialValues,\n // });\n // if (\n // data.otherDepositDetails[data.otherDepositDetails.length - 1]\n // .toDate == data.to\n // ) {\n // this.setState({\n // showForm: false,\n // });\n // }\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n\n calculateToDate() {\n this.setState({\n toDate: getToDate(\n this.state.fromDate,\n this.state.periodTermDD,\n this.state.periodTermMM,\n this.state.periodTermYY\n ),\n });\n }\n\n getDepositName(e, values, setFieldValue) {\n if (\n this.state.otherDepositDetails[e.target.value] !== undefined &&\n this.state.otherDepositDetails[e.target.value].length > 0 &&\n this.state.otherDepositDetails[e.target.value][\n this.state.otherDepositDetails[e.target.value].length - 1\n ].toDate == values.to\n ) {\n setFieldValue(\"odepLogic.rentDepositNature\", \"\");\n // alert(\"Values For this type has completed the period\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Values For this type has completed the period\",\n });\n return false;\n }\n if (\n e.target.value === \"Storage Deposit\" ||\n e.target.value === \"Fitout Deposit\" ||\n e.target.value === \"Other\"\n ) {\n this.setState({ toggleOnUnit: false, toggleStorage: true });\n } else {\n this.setState({ toggleOnUnit: true, toggleStorage: false });\n }\n if (e.target.value === \"Storage Deposit\") {\n this.setState({ showArea: true });\n } else {\n this.setState({ showArea: false });\n }\n if (e.target.value === \"Fitout Deposit\") {\n this.setState({ showOnArea: true });\n } else {\n this.setState({ showOnArea: false });\n }\n if (\n e.target.value === \"Electricity Load Deposit – Refundable\" ||\n e.target.value == \"Electricity Load Deposit – Non Refundable\"\n ) {\n this.setState({\n depositRateUomValues: electricityLoadDeposit,\n });\n } else if (\n e.target.value === \"GAS / PNG Connection Deposit\" ||\n e.target.value === \"GAS / PNG Meter\"\n ) {\n this.setState({\n depositRateUomValues: gasBasisUnitsGasBank,\n });\n } else if (\n e.target.value === \"Electricity Meter Deposit\" ||\n e.target.value === \"Water Meter Deposit\" ||\n e.target.value === \"Air Conditioning Meter Deposit\"\n ) {\n this.setState({\n depositRateUomValues: meterDeposit,\n });\n } else if (e.target.value === \"Air Conditioing Load Deposit\") {\n this.setState({\n depositRateUomValues: airConditioingLoadDeposit,\n });\n } else if (\n e.target.value === \"Fitout Deposit\" ||\n e.target.value === \"Other\"\n ) {\n this.setState({\n depositRateUomValues: storageFitoutDeposit,\n });\n } else if (e.target.value === \"Storage Deposit\") {\n this.setState({\n depositRateUomValues: storageFitoutDeposit,\n });\n } else {\n this.setState({\n depositRateUomValues: [],\n });\n }\n var _otherDepositDetails = this.state.otherDepositDetails;\n if (\n _otherDepositDetails[e.target.value] == undefined ||\n _otherDepositDetails[e.target.value].length == 0\n ) {\n this.state.fromDate = values.from;\n this.state.toDate = \"\";\n this.state.period = 1;\n } else {\n this.state.fromDate = getToDate(\n _otherDepositDetails[e.target.value][\n _otherDepositDetails[e.target.value].length - 1\n ].toDate,\n 2,\n 0,\n 0\n );\n this.state.toDate = \"\";\n this.state.period =\n this.state.otherDepositDetails[e.target.value].length + 1;\n // values.odepLogic.period =\n // this.state.otherDepositDetails[e.target.value].length + 1;\n }\n this.setState({});\n if (this.state.period == \"1\") {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n milestoneMonths: \"ODEP Milestone %\",\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n milestoneMonths: \"ODEP Milestone %\",\n });\n }\n return true;\n }\n\n editOd(index, values, key) {\n console.log(this.state.otherDepositDetails[key][index]);\n this.state.currentIndex = index;\n this.state.disableOnEdit = true;\n this.state.readOnEdit = true;\n this.state.period = this.state.otherDepositDetails[key][index].period;\n if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Storage Deposit\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Fitout Deposit\"\n ) {\n this.setState({ toggleOnUnit: false, toggleStorage: true });\n } else {\n this.setState({ toggleOnUnit: true, toggleStorage: false });\n }\n if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Storage Deposit\"\n ) {\n this.setState({ showArea: true });\n } else {\n this.setState({ showArea: false });\n }\n if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Fitout Deposit\"\n ) {\n this.setState({ showOnArea: true });\n } else {\n this.setState({ showOnArea: false });\n }\n if (this.state.otherDepositDetails[key][index].period === 1) {\n this.setState({\n milestoneNamesValues: periodOneMileStoneNames,\n });\n } else {\n this.setState({\n milestoneNamesValues: periodOtherMilestoneNames,\n });\n }\n this.setState({\n showForm: true,\n showAddBtn: true,\n periodTermDD: this.state.otherDepositDetails[key][index].periodTermDD,\n periodTermMM: this.state.otherDepositDetails[key][index].periodTermMM,\n periodTermYY: this.state.otherDepositDetails[key][index].periodTermYY,\n });\n this.state.milestonesCount =\n this.state.otherDepositDetails[key][index].milestones.length;\n this.state.fromDate = this.state.otherDepositDetails[key][index].fromDate;\n this.state.toDate = this.state.otherDepositDetails[key][index].toDate;\n values.odepLogic.otherDepositName =\n this.state.otherDepositDetails[key][index].otherDepositName;\n values.odepLogic.depositNature =\n this.state.otherDepositDetails[key][index].depositNature;\n values.odepLogic.months = this.state.otherDepositDetails[key][index].months;\n\n values.odepLogic.onUnits =\n this.state.otherDepositDetails[key][index].onUnits;\n values.odepLogic.amount = this.state.otherDepositDetails[key][index].amount;\n values.odepLogic.rate = this.state.otherDepositDetails[key][index].rate;\n values.odepLogic.totalAmount =\n this.state.otherDepositDetails[key][index].totalAmount;\n if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Electricity Load Deposit – Refundable\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ==\n \"Electricity Load Deposit – Non Refundable\"\n ) {\n this.setState({\n depositRateUomValues: electricityLoadDeposit,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"GAS / PNG Connection Deposit\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"GAS / PNG Meter\"\n ) {\n this.setState({\n depositRateUomValues: gasBasisUnitsGasBank,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Electricity Meter Deposit\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Water Meter Deposit\" ||\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Air Conditioning Meter Deposit\"\n ) {\n this.setState({\n depositRateUomValues: meterDeposit,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Air Conditioing Load Deposit\"\n ) {\n this.setState({\n depositRateUomValues: airConditioingLoadDeposit,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Fitout Deposit\"\n ) {\n this.setState({\n depositRateUomValues: storageFitoutDeposit,\n });\n } else if (\n this.state.otherDepositDetails[key][index].otherDepositName ===\n \"Storage Deposit\"\n ) {\n this.setState({\n depositRateUomValues: storageFitoutDeposit,\n });\n } else {\n this.setState({\n depositRateUomValues: [],\n });\n }\n values.odepLogic.rateUOM =\n this.state.otherDepositDetails[key][index].rateUOM;\n values.odepLogic.area = this.state.otherDepositDetails[key][index].area;\n values.odepLogic.onArea = this.state.otherDepositDetails[key][index].onArea;\n values.odepLogic.monthsCount =\n this.state.otherDepositDetails[key][index].monthsCount;\n for (\n let i = 0;\n i < this.state.otherDepositDetails[key][index].milestones.length;\n i++\n ) {\n // if (this.state.milestones === undefined) {\n this.state.milestones[i] = {};\n values.odepLogic.milestones[i] = {};\n this.state.milestones[i].milestoneName =\n this.state.otherDepositDetails[key][index].milestones[i].milestoneName;\n values.odepLogic.milestones[i].milestoneName =\n this.state.otherDepositDetails[key][index].milestones[i].milestoneName;\n this.state.milestones[i].dueDate =\n this.state.otherDepositDetails[key][index].milestones[i].dueDate;\n values.odepLogic.milestones[i].dueDate =\n this.state.otherDepositDetails[key][index].milestones[i].dueDate;\n this.state.milestones[i].milestonePercent =\n this.state.otherDepositDetails[key][index].milestones[\n i\n ].milestonePercent;\n values.odepLogic.milestones[i].milestonePercent =\n this.state.otherDepositDetails[key][index].milestones[\n i\n ].milestonePercent;\n this.state.milestones[i].amount =\n this.state.otherDepositDetails[key][index].milestones[i].amount;\n values.odepLogic.milestones[i].amount =\n this.state.otherDepositDetails[key][index].milestones[i].amount;\n if (\n this.state.otherDepositDetails[key][index].milestones[\n i\n ].milestoneName.includes(\"Escalation\")\n ) {\n this.state.milestones[i].milestoneQuantityType = \"ODEP Milestone %\";\n values.odepLogic.milestones[i].milestoneQuantityType =\n \"ODEP Milestone %\";\n } else {\n this.state.milestones[i].milestoneQuantityType =\n \"ODEP Milestone # Months\";\n values.odepLogic.milestones[i].milestoneQuantityType =\n \"ODEP Milestone # Months\";\n }\n this.setState({});\n // }\n }\n\n this.setState({});\n }\n\n addDetails = (values, resetForm) => {\n if (this.state.currentIndex === null) {\n if (this.state.period > 1) {\n this.state.milestones[0].milestonePercent = 100;\n values.odepLogic.milestones[0].milestonePercent = 100;\n this.setState({});\n }\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < this.state.milestones.length; i++) {\n console.log(this.state.milestones);\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.odepLogic.amount) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.otherDepositDetails[values.odepLogic.otherDepositName]\n .length - 1\n ].amount;\n var currentAmount = values.odepLogic.amount;\n var balanceAmount = currentAmount - previousAmount;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _otherDepositDetails = this.state.otherDepositDetails;\n values.odepLogic.period = this.state.period;\n values.odepLogic.fromDate = this.state.fromDate;\n values.odepLogic.toDate = this.state.toDate;\n values.odepLogic.periodTermYY = this.state.periodTermYY;\n values.odepLogic.periodTermMM = this.state.periodTermMM;\n values.odepLogic.periodTermDD = this.state.periodTermDD;\n if (\n _otherDepositDetails[values.odepLogic.otherDepositName] == undefined\n ) {\n _otherDepositDetails[values.odepLogic.otherDepositName] = [];\n }\n _otherDepositDetails[values.odepLogic.otherDepositName].push({\n ...values.odepLogic,\n });\n this.setState({\n otherDepositDetails: _otherDepositDetails,\n });\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period++;\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n } else {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n var totalMilestoneAmount = 0;\n for (let i = 0; i < values.odepLogic.milestones.length; i++) {\n totalMilestoneAmount += Number(this.state.milestones[i].amount);\n }\n if (this.state.period == \"1\") {\n if (totalMilestoneAmount != values.odepLogic.amount) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent:\n \"Total Amount of Milestones do not match with total amount of period\",\n });\n return false;\n }\n } else {\n var previousAmount =\n this.state.otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.otherDepositDetails[values.odepLogic.otherDepositName]\n .length - 1\n ].amount;\n var currentAmount = values.odepLogic.amount;\n var balanceAmount = currentAmount - previousAmount;\n }\n if (this.state.toDate > values.to) {\n this.setState({\n popupalertMessage: true,\n popupMessageContent: \"Enter a date less than \" + values.to,\n });\n return false;\n }\n var _otherDepositDetails = this.state.otherDepositDetails;\n values.odepLogic.period = this.state.period;\n values.odepLogic.fromDate = this.state.fromDate;\n values.odepLogic.toDate = this.state.toDate;\n values.odepLogic.periodTermYY = this.state.periodTermYY;\n values.odepLogic.periodTermMM = this.state.periodTermMM;\n values.odepLogic.periodTermDD = this.state.periodTermDD;\n console.log(this.state.otherDepositDetails);\n if (\n _otherDepositDetails[values.odepLogic.otherDepositName] == undefined\n ) {\n _otherDepositDetails[values.odepLogic.otherDepositName] = [];\n }\n _otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.currentIndex\n ] = { ...values.odepLogic };\n _otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.currentIndex\n ].milestones = this.state.milestones;\n this.setState({\n otherDepositDetails: _otherDepositDetails,\n });\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period = \"\";\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n }\n };\n\n resetDetails = (values, resetForm) => {\n this.state.periodTermDD = 0;\n this.state.periodTermMM = 0;\n this.state.periodTermYY = 0;\n this.state.fromDate = \"\";\n this.state.toDate = \"\";\n this.state.period = \"\";\n this.state.milestonesCount = 1;\n resetForm();\n this.validator.hideMessages();\n this.state.milestones = [];\n this.state.disableOnEdit = false;\n this.state.currentIndex = null;\n this.state.readOnEdit = false;\n };\n\n calculateDepositAmount(values) {\n if (values.odepLogic.otherDepositName === \"Storage Deposit\") {\n if (values.odepLogic.rateUOM === \"Flat rate\") {\n console.log(\"111\");\n values.odepLogic.amount =\n Number(values.odepLogic.rate) * Number(values.odepLogic.monthsCount);\n this.setState({});\n } else {\n values.odepLogic.amount =\n Number(values.odepLogic.rate) *\n Number(values.odepLogic.area) *\n Number(values.odepLogic.monthsCount);\n this.setState({});\n }\n } else if (values.odepLogic.otherDepositName === \"Fitout Deposit\") {\n console.log(\"111\");\n if (values.odepLogic.onArea === \"Carpet Area\") {\n values.odepLogic.amount =\n Number(values.odepLogic.rate) *\n values.totalCarpetArea *\n Number(values.odepLogic.monthsCount);\n this.setState({});\n } else if (values.odepLogic.onArea === \"Usable Area\") {\n values.odepLogic.amount =\n Number(values.odepLogic.rate) *\n values.totalUsableArea *\n Number(values.odepLogic.monthsCount);\n this.setState({});\n } else if (values.odepLogic.onArea === \"Gross Leasable Area\") {\n values.odepLogic.amount =\n Number(values.odepLogic.rate) *\n values.totalGrossLeasableArea *\n Number(values.odepLogic.monthsCount);\n this.setState({});\n } else {\n values.odepLogic.amount =\n values.odepLogic.rate * values.odepLogic.monthsCount;\n this.setState({});\n }\n } else if (values.odepLogic.otherDepositName === \"Other\") {\n if (values.odepLogic.rate != \"\" && values.odepLogic.monthsCount != \"\") {\n values.odepLogic.amount =\n values.odepLogic.rate * values.odepLogic.monthsCount;\n this.setState({});\n }\n } else {\n values.odepLogic.amount =\n values.odepLogic.rate * values.odepLogic.onUnits;\n this.setState({});\n }\n if (this.state.period > 1) {\n this.calculateMilestoneAmount(1, values, 0);\n }\n }\n\n changeFieldName(e, id, values) {\n if (e.target.value == \"Due on Lease Commencement Date\") {\n this.state.milestones[id].dueDate = this.state.leaseCommencementDate;\n values.odepLogic.milestones[id].dueDate =\n this.state.leaseCommencementDate;\n } else {\n this.state.milestones[id].dueDate = \"\";\n values.odepLogic.milestones[id].dueDate = \"\";\n }\n if (e.target.value.includes(\"Escalation\")) {\n this.state.milestones[id].milestoneQuantityType = \"ODEP Milestone %\";\n } else {\n this.state.milestones[id].milestoneQuantityType =\n \"ODEP Milestone # Months\";\n }\n }\n\n calculateMilestoneAmount(e, values, id) {\n if (this.state.period === 1) {\n var previousAmount = 0;\n var currentAmount = values.odepLogic.amount;\n var balanceAmount = currentAmount - previousAmount;\n console.log(previousAmount, currentAmount, balanceAmount);\n this.state.milestones[id].amount =\n (balanceAmount / 100) * this.state.milestones[id].milestonePercent;\n values.odepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n } else {\n var previousAmount =\n this.state.otherDepositDetails[values.odepLogic.otherDepositName][\n this.state.otherDepositDetails[values.odepLogic.otherDepositName]\n .length - 1\n ].amount;\n var currentAmount = values.odepLogic.amount;\n var balanceAmount = currentAmount - previousAmount;\n this.state.milestones[id].amount = (balanceAmount / 100) * 100;\n values.odepLogic.milestones[id].amount = this.state.milestones[id].amount;\n this.setState({});\n }\n }\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n redirectToDelete = () => {\n var _odd = this.state.otherDepositDetails;\n _odd[this.state.keyvalue].splice(this.state.index_val, 1);\n this.setState({\n otherDepositDetails: _odd,\n showForm: true,\n });\n this.state.period--;\n this.setState({\n delete: false,\n index_val: \"\",\n keyvalue: \"\",\n });\n };\n\n redirectToClose = () => {\n this.setState({\n delete: false,\n popupalertMessage: false,\n popupMessageContent: \"\",\n });\n };\n\n milestoneTabs(handleChange, values) {\n var heads = [];\n for (var i = 0; i < this.state.milestonesCount; i++) {\n heads.push(\n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | Milestone Name | \nDue Date | \nRDEP Milestone | \nRDEP Milestone Amount (Rs.) | \n
|---|---|---|---|
| {name.milestoneName} | \n\n {/* {dateFormat(name.dueDate, \"dd mmm yyyy\")} */}\n {leaseDateFormat(name.dueDate)}\n | \n\n {name.milestonePercent}\n {name.milestoneType == \"CDEP Months\"\n ? \" Months\"\n : \" %\"}\n | \n{name.amount} | \n
\n\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestoneName = e.target.value;\n this.changeFieldName(e, id, values);\n handleChange(e);\n }}\n >\n \n {this.state.milestoneNamesValues.map((item, i) => (\n \n ))}\n \n {this.validator.message(\n \"Milestone Name\",\n this.state.milestones[i].milestoneName,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].dueDate = e.target.value;\n handleChange(e);\n }}\n >\n {this.validator.message(\n \"Due Date\",\n this.state.milestones[i].dueDate,\n \"required\",\n { className: \"text-danger\" }\n )}\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].milestonePercent = e.target.value;\n handleChange(e);\n }}\n onBlur={(e) => {\n var id = e.target.getAttribute(\"param\");\n this.calculateMilestoneAmount(e, values, id);\n }}\n />\n
\n \n \n
\n\n \n {\n var id = e.target.getAttribute(\"param\");\n this.state.milestones[id].amount = e.target.value;\n handleChange(e);\n }}\n />\n
\n \n \n {heads} \n \n
\n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n {body}
\n \n
\n \n {\n values.otherDepositApplicable = this.state.applicableValue;\n if (!this.applicableValidator.allValid()) {\n this.applicableValidator.showMessages();\n return false;\n }\n // if (this.state.otherDepositDetails.length == 0) {\n // this.mainFormValidator.showMessages(\"countError\");\n // return false;\n // }\n let count = 0;\n for (var key in this.state.otherDepositDetails) {\n count = 1;\n break;\n }\n if (count == 0 && this.state.applicableValue !== \"no\") {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n var otherDepositDetails = { ...this.state.otherDepositDetails };\n values.otherDepositDetails = otherDepositDetails;\n console.log(values, \"gg\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-other-deposit-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n setFieldValue,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Security Deposit Details \n
- \n Other Deposit Details\n \n
\n \n
\n {/* \n \n
*/}\n \n )}\n \n \n
\n \n
\n \n \n \n \n \n \n \n {this.state.isOpen &&\n this.otherDepositDetailPopup(this.state.popupData)}\n \n \n
\n \n
\n \n
\n \n
\n - \n
- Other Deposit Details \n
\n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n
\n );\n }\n}\n\nexport default withRouter(OtherDepositDetails);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Tab, Tabs, TabList, TabPanel } from \"react-tabs\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport {\n faPlus,\n faUndo,\n faAngleUp,\n faArrowDown,\n faSave,\n faTimes,\n faPen,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport { PdfReader } from \"../../utils/DocumentViewer\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport dateFormat, { masks } from \"dateformat\";\nimport { leaseDateFormat } from \"../../utils/utils\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass CommercialClauses extends React.Component {\n countError = \"\";\n state = {\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n renewalLeaseTermDD: \"\",\n renewalLeaseTermMM: \"\",\n renewalLeaseTermYY: \"\",\n leaseTermDD: \"\",\n leaseTermMM: \"\",\n leaseTermYY: \"\",\n leaseUploadDocumentDate: \"\",\n redirect: false,\n isOpen: false,\n pageNo: \"\",\n documentUrl: \"\",\n commercialClausesDetails: [],\n commercialClauses: [],\n uploadedDocuments: [],\n uploadedDocumentNames: [],\n currentDocument: \"\",\n popupContentType: \"pdf\",\n popupContentTypeDescription: \"\",\n initialValues: {\n commercialDetails: {\n clauseName: \"\",\n details: \"\",\n documentName: \"\",\n pageNo: \"\",\n },\n },\n };\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n constructor(props) {\n super(props);\n\n this.mainFormValidator = new SimpleReactValidator({\n autoForceUpdate: this,\n messages: {\n countError: \"Validation has failed!\", // will override all messages\n },\n });\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/commercial-clause/get-clauses`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n commercialClauses: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n let athis = this;\n axios.get(`${apiUrl.apiUrl.url}/create-lease/fetch-lease-commercial-clauses-details?id=${this.props.match.params.id}`).then((response) => {\n let data = response.data;\n for (let i = 0; i < data.commercialClausesDetails.length; i++) {\n const index = athis.state.commercialClauses.findIndex(\n (x) => x.clause_name === data.commercialClausesDetails[i].clauseName\n );\n console.log(index);\n if (index > -1) {\n athis.state.commercialClauses.splice(index, 1);\n }\n }\n for (let i = 0; i < data.lease_documents.length; i++) {\n athis.state.uploadedDocumentNames.push(\n data.lease_documents[i].leaseDocumentType\n );\n }\n athis.setState({\n initialValues: data,\n commercialClausesDetails: data.commercialClausesDetails,\n renewalLeaseTermDD: data.renewalLeaseTermDD,\n renewalLeaseTermMM: data.renewalLeaseTermMM,\n renewalLeaseTermYY: data.renewalLeaseTermYY,\n leaseTermDD: data.leaseTermDD,\n leaseTermMM: data.leaseTermMM,\n leaseTermYY: data.leaseTermYY,\n notes_14: data.notes_14,\n documentUrl: data.url,\n pageNo: data.commercialClausesDetails.pageNo,\n leaseUploadDocumentDate: data.leaseUploadDocumentDate,\n uploadedDocuments: data.lease_documents,\n });\n var _intialValues = athis.state.initialValues;\n _intialValues.commercialDetails = {\n clauseName: \"\",\n details: \"\",\n documentName: \"\",\n pageNo: \"\",\n };\n\n athis.setState({\n initialValues: _intialValues,\n });\n });\n\n // fetch(\n // `${apiUrl.apiUrl.url}/create-lease/fetch-lease-commercial-clauses-details?id=${this.props.match.params.id}`\n // )\n // .then((response) => {\n // return response.json();\n // })\n // .then((data) => {\n // console.log(data);\n // for (let i = 0; i < data.commercialClausesDetails.length; i++) {\n // const index = this.state.commercialClauses.findIndex(\n // (x) => x.clause_name === data.commercialClausesDetails[i].clauseName\n // );\n // console.log(index);\n // if (index > -1) {\n // this.state.commercialClauses.splice(index, 1);\n // }\n // }\n // for (let i = 0; i < data.lease_documents.length; i++) {\n // this.state.uploadedDocumentNames.push(\n // data.lease_documents[i].leaseDocumentType\n // );\n // }\n // this.setState({\n // initialValues: data,\n // commercialClausesDetails: data.commercialClausesDetails,\n // renewalLeaseTermDD: data.renewalLeaseTermDD,\n // renewalLeaseTermMM: data.renewalLeaseTermMM,\n // renewalLeaseTermYY: data.renewalLeaseTermYY,\n // leaseTermDD: data.leaseTermDD,\n // leaseTermMM: data.leaseTermMM,\n // leaseTermYY: data.leaseTermYY,\n // notes_14: data.notes_14,\n // documentUrl: data.url,\n // pageNo: data.commercialClausesDetails.pageNo,\n // leaseUploadDocumentDate: data.leaseUploadDocumentDate,\n // uploadedDocuments: data.lease_documents,\n // });\n // var _intialValues = this.state.initialValues;\n // _intialValues.commercialDetails = {\n // clauseName: \"\",\n // details: \"\",\n // documentName: \"\",\n // pageNo: \"\",\n // };\n\n // this.setState({\n // initialValues: _intialValues,\n // });\n // })\n // .catch((error) => {\n // console.log(error);\n // });\n }\n showDocumentDate(docType) {\n let obj = this.state.uploadedDocuments.find(\n (o) => o.leaseDocumentUrl === docType\n );\n if (obj !== undefined) {\n return leaseDateFormat(obj.leaseUploadDocumentDate);\n } else {\n return \"\";\n }\n }\n\n formatDate(date) {\n return leaseDateFormat(date);\n }\n\n\n addCommercialDetails = (values) => {\n //resetForm();\n if (!this.validator.allValid()) {\n console.log(this.validator);\n this.validator.showMessages();\n return false;\n }\n\n let docSelected = this.state.uploadedDocuments.find((obj) => obj.leaseDocumentUrl === values.commercialDetails.document )\n\n //console.log(docSelected, \"doc selected..\") \n values.commercialDetails.document = docSelected.leaseDocumentType; \n values.commercialDetails.documentUrl = docSelected.leaseDocumentUrl; \n \n\n var _commercialClausesDetails = this.state.commercialClausesDetails;\n _commercialClausesDetails.push(values.commercialDetails);\n console.log(_commercialClausesDetails, \"needed\");\n this.setState({\n commercialClausesDetails: _commercialClausesDetails,\n });\n const index = this.state.commercialClauses.findIndex(\n (x) => x.clause_name === values.commercialDetails.clauseName\n );\n console.log(index);\n if (index > -1) {\n console.log(\"inn\");\n this.state.commercialClauses.splice(index, 1);\n }\n this.setState({});\n\n return true;\n };\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false, });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match.path;\n let urlPath = url.split(\"/\");\n this.state.redirect = false;\n return (\n \n {/*
\n \n
*/}\n Rent Only & Rent Minus Cam
\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n {rent.otherDepositName !== \"Storage Deposit\" &&\n rent.otherDepositName !== \"Fitout Deposit\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {rent.otherDepositName === \"Storage Deposit\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {rent.rateUOM === \"Per Sq.ft\" && (\n \n
\n \n \n \n
\n \n
\n )}\n {rent.otherDepositName === \"Fitout Deposit\" && (\n \n
\n \n \n \n
\n \n
\n )}\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n \n \n
\n
\n | Milestone Name | \nDue Date | \nRDEP Milestone | \nRDEP Milestone Amount (Rs.) | \n
|---|---|---|---|
| {name.milestoneName} | \n\n {/* {dateFormat(name.dueDate, \"dd mmm yyyy\")}{\" \"} */}\n {leaseDateFormat(name.dueDate)}\n | \n{name.milestonePercent} | \n{name.amount} | \n
\n
\n \n {\n if (this.state.commercialClausesDetails.length == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n values.commercialClausesDetails =\n this.state.commercialClausesDetails;\n console.log(values, \"gg\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-commercial-clauses-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n resetForm,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Critical Clause \n
- \n Commercial Clauses\n \n
\n \n
\n \n )}\n \n \n
\n \n {\n if (this.state.otherClausesDetails.length == 0) {\n this.mainFormValidator.showMessages(\"countError\");\n return false;\n }\n values.otherClausesDetails = this.state.otherClausesDetails;\n console.log(values, \"gg\");\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/update-lease-other-clauses-details?lease_id=${this.props.match.params.id}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n resetForm,\n }) => (\n <>\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Critical Clause \n
- \n Other Clauses\n \n
\n \n
\n\n {/* */}\n \n )}\n \n \n
\n \n \n );\n }\n}\n\nexport default withRouter(UploadDocument);\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Placeholder } from \"rsuite\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faSearch,\n faPlus,\n faPen,\n faTimes,\n faUndo,\n faMinus,\n faEye,\n faTrashAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\n\nimport { confirmAlert } from \"react-confirm-alert\"; // Import\nimport \"react-confirm-alert/src/react-confirm-alert.css\"; // Import css\n\nfunction removeLease(leaseId) {\n confirmAlert({\n title: \"Confirm to delete\",\n message: \"Are you sure you want to delete this draft lease.\",\n buttons: [\n {\n label: \"Yes\",\n onClick: () => {\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/create-lease/remove-lease`,\n data: { leaseId: leaseId },\n }).then(function (response) {\n console.log(response, \"response\");\n counter = Math.round();\n });\n },\n },\n {\n label: \"No\",\n onClick: () => {\n console.log(\"cancel clicked\");\n },\n },\n ],\n });\n}\n\nvar counter = Math.round();\n\nfunction DeleteBtn(props) {\n return (\n props.status == 0 && (\n \n {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n values.leaseDocumentUrl =\n fileUploadPath() +\n this.props.match.params.id +\n \"/\" +\n this.state.fileName;\n console.log(values);\n var self = this;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n */}\n \n )}\n \n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Critical Clause \n
- \n Upload Document\n \n
\n \n
\n {/* \n \n \n {\" \"}\n
\n );\n } else {\n return (\n \n \n \n {\" \"}\n \n
\n );\n }\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default LeaseListingTable;\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Placeholder } from \"rsuite\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faSearch,\n faPlus,\n faPen,\n faTimes,\n faUndo,\n faMinus,\n faEye,\n faTrashAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\n\nimport { confirmAlert } from \"react-confirm-alert\"; // Import\nimport \"react-confirm-alert/src/react-confirm-alert.css\"; // Import css\n\nfunction removeLease(leaseId) {\n confirmAlert({\n title: \"Confirm to delete\",\n message: \"Are you sure you want to delete this prospect.\",\n buttons: [\n {\n label: \"Yes\",\n onClick: () => {\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/prospect/remove-prospect`,\n data: { prospectId: leaseId },\n }).then(function (response) {\n console.log(response, \"response\");\n counter = Math.round();\n });\n },\n },\n {\n label: \"No\",\n onClick: () => {\n console.log(\"cancel clicked\");\n //this.loadLeaseCountStatuswise();\n },\n },\n ],\n });\n}\n\nvar counter = Math.round();\n\nfunction DeleteBtn(props) {\n return (\n (props.status == 0 && props.is_dropped == 0) && (\n \n
\n \n \n \n {\" \"}\n \n
\n );\n }\n },\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n );\n};\nexport default ProspectListingTable;\n","import React from \"react\";\nimport axios from \"axios\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faSearch,\n faSave,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../../masters/master.css\";\nimport Select from \"react-select\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport \"bootstrap\";\nimport Accordion from \"react-bootstrap/Accordion\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\n\nimport * as Yup from \"yup\";\n\nconst prospectFilterForm = Yup.object().shape({\n assetType: Yup.string().required(\"Required\"),\n city: Yup.string().required(\"Required\"),\n //brandCategory: Yup.string().required(\"Required\"),\n assetName: Yup.string().required(\"Required\"),\n //floor: Yup.string().required(\"Required\"),\n //rangeFrom: Yup.string().required(\"Required\"),\n //rangeTo: Yup.string().required(\"Required\"),\n});\n\nconst prospectValidation = Yup.object().shape({\n brand_name: Yup.string().required(\"Required\"),\n fitout_period: Yup.string().required(\"Required\"),\n notice_period: Yup.string().required(\"Required\"),\n lease_period: Yup.string().required(\"Required\"),\n lockin_period: Yup.string().required(\"Required\"),\n renewal_term: Yup.string().required(\"Required\"),\n min_guarantee: Yup.string().required(\"Required\"),\n revenue_share: Yup.string().required(\"Required\"),\n rent_deposit: Yup.string().required(\"Required\"),\n cam_deposit: Yup.string().required(\"Required\"),\n cam_rate: Yup.string().required(\"Required\"),\n marketing_fund: Yup.string().required(\"Required\"),\n property_tax: Yup.string().required(\"Required\"),\n parking: Yup.string().required(\"Required\"),\n signage: Yup.string().required(\"Required\"),\n stamp_duty_by: Yup.string().required(\"Required\"),\n exclusivity: Yup.string().required(\"Required\"),\n remarks: Yup.string().required(\"Required\"),\n});\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass Prospect extends React.Component {\n state = {\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: '',\n brandCategories: [],\n brandCategoryName: \"\",\n brandCategory: \"\",\n assetTypeList: [],\n brandCategoryList: [],\n cityList: [],\n assetList: [],\n floorList: [],\n comparativeData: [],\n initialValues: {\n assetType: \"\",\n city: \"\",\n brandCategory: \"\",\n assetName: \"\",\n floor: \"\",\n grossLeaseAreaFrom: \"\",\n grossLeaseAreaTo: \"\",\n rangeFrom: \"\",\n rangeTo: \"\",\n areaType: \"\",\n areaTypeValue: \"\"\n },\n prospectInitialValues: {\n brand_name: \"\",\n fitout_period: \"\",\n lease_period: \"\",\n lockin_period: \"\",\n min_guarantee: \"\",\n revenue_share: \"\",\n rent_deposit: \"\",\n cam_deposit: \"\",\n cam_rate: \"\",\n marketing_fund: \"\",\n property_tax: \"\",\n parking: \"\",\n signage: \"\",\n stamp_duty_by: \"\",\n exclusivity: \"\",\n remarks: \"\",\n notice_period: \"\",\n renewal_term: \"\",\n },\n };\n\n constructor(props) {\n super(props);\n }\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/prospect/fetch-asset-type`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assetTypeList: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n fetch(`${apiUrl.apiUrl.url}/prospect/fetch-cities`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n fetch(`${apiUrl.apiUrl.url}/prospect/fetch-brand-category`,{headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandCategoryList: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n changeCity = (newValue) => {\n this.state.initialValues.city = newValue.value;\n this.state.initialValues.city = newValue.label;\n this.setState({});\n this.fetchAsset();\n };\n changeAssetType = (newValue) => {\n this.state.initialValues.assetType = newValue.value;\n this.state.initialValues.assetType = newValue.label;\n this.setState({});\n this.fetchAsset();\n };\n changeBrandCategory = (newValue) => {\n this.state.initialValues.brandCategory = newValue.value;\n this.state.initialValues.brandCategory = newValue.label;\n this.setState({});\n };\n changeAsset = (newValue) => {\n this.state.initialValues.assetName = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setState({});\n this.fetchFloor();\n };\n changeAreaType = (newValue) => {\n this.state.initialValues.areaTypeValue = newValue.value;\n\n this.state.initialValues.areaType = newValue.label;\n this.setState({});\n //this.fetchFloor();\n };\n changeFloor = (newValue) => {\n console.log(\"cahnge floor\");\n this.state.initialValues.floor = newValue.value;\n this.state.initialValues.floor = newValue.label;\n this.setState({});\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n };\n\n fetchAsset = () => {\n fetch(\n `${apiUrl.apiUrl.url}/prospect/fetch-asset?asset_type=${this.state.initialValues.assetType}&search_term=&city=${this.state.initialValues.city}`,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assetList: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n fetchFloor = () => {\n fetch(\n `${apiUrl.apiUrl.url}/prospect/fetch-floor?asset=${this.state.initialValues.assetName}`,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n floorList: data.data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false, });\n };\n\n redirectToClose = () => {\n this.setState({\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n render() {\n return (\n \n
\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n var self = this;\n this.state.initialValues.grossLeaseAreaFrom = values.rangeFrom;\n this.state.initialValues.grossLeaseAreaTo = values.rangeTo;\n this.setState({});\n var prm = Object.entries(this.state.initialValues)\n .map(([key, val]) => `${key}=${val}`)\n .join(\"&\");\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/prospect/fetch-leases?${prm}`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something went wrong\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something went wrong',\n });\n actions.setSubmitting(false);\n\n actions.setErrors(response.data);\n } else {\n self.setState({ redirect: true });\n if (typeof response.data.data != \"undefined\") {\n self.state.comparativeData = response.data.data;\n } else {\n // alert(\"No Comparatives found for these criteria.\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: 'No Comparatives found for these criteria.',\n });\n self.state.comparativeData = [];\n }\n\n self.setState({});\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n \n {(close) => (\n \n {\n for (const [key, value] of Object.entries(\n this.state.prospectInitialValues\n )) {\n this.state.prospectInitialValues[key] = \"\";\n }\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n var self = this;\n values.asset_type = this.state.initialValues.assetType;\n values.city = this.state.initialValues.city;\n values.brand_category = this.state.initialValues.brandCategory;\n values.asset_name = this.state.initialValues.assetName;\n values.floor = this.state.initialValues.floor;\n values.gla_from = this.state.initialValues.grossLeaseAreaFrom;\n values.gla_to = this.state.initialValues.grossLeaseAreaTo;\n values.comparativeData = this.state.comparativeData;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/prospect/save`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n // alert(\"Something went wrong\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: 'Something went wrong',\n });\n actions.setSubmitting(false);\n\n actions.setErrors(response.data);\n } else {\n for (const [key, value] of Object.entries(\n self.state.prospectInitialValues\n )) {\n self.state.prospectInitialValues[key] = \"\";\n self.setState({});\n }\n for (const [key, value] of Object.entries(\n self.state.initialValues\n )) {\n self.state.initialValues[key] = \"\";\n self.setState({});\n }\n //self.state.comparativeData = [];\n self.setState({});\n\n // self.setState({ redirect: true });\n // alert(\"Data Saved successfully.\");\n self.setState({\n messsagePopup: true,\n });\n\n self.props.history.push(\n \"/createlease/prospect/view/\" + response.data.id\n );\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n
\n );\n }\n}\n\nexport default withRouter(Prospect); \n","import React from \"react\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faSearch,\n faChevronCircleDown,\n faCheck,\n faCheckCircle,\n faExclamationTriangle,\n faTimesCircle,\n faFileSignature,\n faSearchPlus,\n} from \"@fortawesome/free-solid-svg-icons\";\n// import styles from \"../../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link, useHistory } from \"react-router-dom\";\nimport LeaseListingTable from \"./LeaseListingTable\";\nimport ProspectListingTable from './ProspectListingTable';\nimport { DropdownButton, Dropdown } from \"react-bootstrap\";\nimport \"bootstrap\";\n\nimport { hasAccess } from \"../../utils/index\";\nimport Prospect from \"../prospect/Prospect\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LeaseListing extends React.Component {\n state = {\n showProspect: false,\n isDropped: false,\n redirect: false,\n brands: [],\n assets: [],\n statusCount: {},\n selectedBrand: \"\",\n selectedAsset: \"\",\n selectedStatus: 2,\n randomNum: \"\",\n activeIndex: null,\n state: \"\"\n };\n\n constructor(props) {\n super(props);\n this.goToCreateLease = this.goToCreateLease.bind(this);\n this.goToProspect = this.goToProspect.bind(this);\n\n //let match = useRouteMatch();\nconsole.log(props,\"props\")\n if (!hasAccess([\"admin\"])) {\n console.log(\"calingg\");\n let path = `/lease-summary`;\n this.props.history.push(path);\n }\n }\n\n componentDidMount() {\n this.loadBrands();\n this.loadAssets();\n\n fetch(`${apiUrl.apiUrl.url}/lease-view/get-status-count`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n statusCount: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.loadLeaseCountStatuswise();\n }\n\n loadLeaseCountStatuswise = (brand,asset) => {\n console.log(asset, \"asset\");\n // this.setState({});\n var brandId = typeof brand != \"undefined\" ? brand : this.state.selectedBrand;\n var assetId = typeof asset != \"undefined\" ? asset : this.state.selectedAsset;\n var ths = this;\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-status-count?brand=` +\n brandId +\n `&stateId=${this.state.state}&asset=${assetId}`, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n ths.setState({\n statusCount: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.setState({});\n }\n\n\n loadAssets = async () => {\n const response = await axios.get(`${apiUrl.apiUrl.url}/assets`);\n console.log(response);\n this.state.assets = response.data;\n this.setState({});\n };\n\n loadBrands = async () => {\n const response = await axios.get(\n `${apiUrl.apiUrl.url}/brand/get-brands?page=1&per_page=100&delay=1`\n );\n this.state.brands = response.data.data;\n this.setState({});\n };\n goToCreateLease = () => {\n let path = `/${this.props.match.path}/lease-landlord`;\n this.props.history.push(path);\n };\n goToProspect = () => {\n let path = `/${this.props.match.path}/prospect`;\n this.props.history.push(path);\n };\n render() {\n return (\n \n \n
\n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n
\n )}\n \n \n {this.renderForm()}\n
\n \n );\n }\n\n renderForm() {\n return (\n \n {\n //this.setState({ selectedAsset: e.target.value });\n this.setState({\n selectedStatus: 1,\n randomNum: Math.random(),\n });\n }}\n >\n
\n \n {\n //this.setState({ selectedAsset: e.target.value });\n this.setState({\n selectedStatus: 0,\n randomNum: Math.random() \n });\n }}\n >\n
\n \n
\n \n
\n \n \n Create Lease\n \n
\n \n \n
\n \n
\n \n {\n this.setState({\n selectedAsset: e.target.value,\n randomNum: Math.random(),\n });\n this.loadLeaseCountStatuswise( this.state.selectedBrand , e.target.value);\n }}\n >\n \n {this.state.assets.map((x) => (\n \n ))}\n \n
\n \n
\n \n {\n this.setState({\n selectedBrand: e.target.value,\n randomNum: Math.random(),\n });\n\n this.loadLeaseCountStatuswise( e.target.value , this.state.selectedAsset)\n\n }}\n >\n \n {this.state.brands.map((x) => (\n \n ))}\n \n
\n \n {\n //this.setState({ selectedAsset: e.target.value });\n this.setState({\n selectedStatus: 6,\n randomNum: Math.random(),\n showProspect: true,\n isDropped: true\n });\n }}\n >\n
\n \n {\n //this.setState({ selectedAsset: e.target.value });\n\n // this.setState({\n // selectedStatus: 5,\n // randomNum: Math.random(),\n // });\n this.setState({\n selectedStatus: 5,\n randomNum: Math.random(),\n showProspect: true,\n isDropped: false\n })\n \n\n }}\n >\n
\n \n
\n \n
\n \n \n
\n \n
\n {this.state.statusCount.prospect}
\n\n
\n Draft Prospect
\n\n
\n \n
\n \n \n
\n \n
\n {this.state.statusCount.dropped}
\n\n
\n Final Prospect
\n\n
\n \n
\n \n \n
\n \n
\n {this.state.statusCount.draft}
\n\n
\n Draft
\n\n
\n \n
\n \n \n
\n \n
\n {this.state.statusCount.approval}
\n\n
\n Approval
\n\n
\n \n \n
\n \n \n
\n \n
\n {this.state.statusCount.active}
\n\n
\n Active
\n\n
\n \n \n
\n \n \n
\n \n
\n {this.state.statusCount.expired}
\n\n
\n Expired
\n\n
\n \n \n \n \n\n { this.state.showProspect ? \n
\n \n \n
\n \n
\n {this.state.statusCount.terminated}
\n\n
\n Terminated
\n\n \n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n \n \n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n
\n );\n }\n}\n\nexport default withRouter(ProspectDetail);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCheck, faChevronRight, faSave, faTimes } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport \"react-tabs/style/react-tabs.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport \"bootstrap\";\nimport LeaseDetails from \"../../viewLease/LeaseDetails\";\nimport { hasAccess, getUserType } from \"../../utils/index\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass SubmitLease extends React.Component {\n state = {\n redirect: false,\n leaseStatus: \"\",\n initialValues: {},\n leaseCreationDate: \"\",\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n leaseId: \"\",\n unit: [],\n occupierBrand: [],\n occupier: [],\n leaseTermDetails: [],\n renewalTerms: [],\n lockIn: [],\n lockInOccupier: [],\n rentalDetails: [],\n camDetails: [],\n utilities: [],\n mfDetails: [],\n pTaxDetails: [],\n parkingStorageSignage: [],\n rentDepositDetails: [],\n camDepositDetails: [],\n otherDepositDetails: [],\n uploadedDocs: [],\n commercialClauses: [],\n otherClauses: [],\n universalKey: \"\",\n currentSelection: \"Parties, Landlord & Unit Details\",\n reviewedOptions: [],\n reviewedCheck: false,\n leaseMenus: [],\n history: [],\n nextSelection: \"Parties, Landlord & Unit Details\",\n counter: Math.round(),\n };\n\n constructor(props) {\n super(props);\n\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n componentDidMount() {\n fetch(\n `${apiUrl.apiUrl.url}/create-lease/get-lease-status?leaseId=` +\n this.props.match.params.id,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseStatus: data.data.status,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/fetch-lease-menus?leaseId=` +this.props.match.params.id,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseMenus: data.data,\n history: data.history,\n nextSelection: data.data[0],\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n\n leaseChecked = (val) => {\n this.setState({ currentSelection: val });\n };\n\n checkedLease = () => {\n const index = this.state.reviewedOptions.indexOf(\n this.state.currentSelection\n );\n console.log(index);\n if (index != -1) {\n this.state.reviewedOptions.splice(index, 1);\n } else {\n this.state.reviewedOptions.push(this.state.currentSelection);\n }\n\n var nextindex = this.state.leaseMenus.indexOf(this.state.currentSelection);\n if (nextindex >= 0 && nextindex < this.state.leaseMenus.length - 1) {\n var nextItem = this.state.leaseMenus[nextindex + 1];\n //this.setState({ nextSelection: nextItem, counter: Math.round() });\n\n this.setState(\n {\n nextSelection: nextItem,\n },\n () => {\n //console.log(\"new callback\", this.state.nextSelection);\n //this.setState({ counter: Math.round() });\n }\n );\n\n console.log(\"new val\", this.state.nextSelection);\n this.state.nextSelection = nextItem;\n }\n\n this.setState({});\n };\n\n submitForApproval = () => {\n var values = {};\n this.state.leaseStatus = 2;\n values.leaseStatus = this.state.leaseStatus;\n values.leaseSummaryReviewed = 1;\n var self = this;\n axios({\n method: \"post\",\n url:\n `${apiUrl.apiUrl.url}/create-lease/update-lease-status?lease_id=` +\n this.props.match.params.id,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // alert(\"Data Saved Successfully\");\n self.setState({ messsagePopup: true });\n }\n });\n };\n\n submitForReject = () => {\n this.state.leaseStatus = 0;\n var values = {};\n values.leaseStatus = this.state.leaseStatus;\n values.leaseSummaryReviewed = 1;\n var self = this;\n axios({\n method: \"post\",\n url:\n `${apiUrl.apiUrl.url}/create-lease/update-lease-status?lease_id=` +\n this.props.match.params.id,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n } else {\n // alert(\"Data Saved Successfully\");\n self.setState({ messsagePopup: true });\n }\n });\n };\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false, });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n \n
\n )}\n \n \n
\n )}\n \n \n
\n\n \n {\n this.state.leaseStatus = 1;\n values.leaseStatus = this.state.leaseStatus;\n values.leaseSummaryReviewed = 1;\n console.log(values);\n var self = this;\n axios({\n method: \"post\",\n url:\n `${apiUrl.apiUrl.url}/create-lease/update-lease-status?lease_id=` +\n this.props.match.params.id,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n // alert(\"Data Saved Successfully\");\n self.setState({ messsagePopup: true });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n
\n \n
\n\n\n \n
\n - \n
- Create Lease \n
- Submit Lease \n
- \n Submit Lease\n \n
\n
\n \n \n )}\n \n \n \n \n
\n
\n | User Name | \nRole | \n\n Action\n | \nTimeStamp | \n
|---|
\n
\n \n
\n - \n
- \n Masters\n \n
- \n
\n \n - \n Create Lease\n \n
- \n
\n \n - \n Landlord Charge\n \n
\n {this.renderForm()}\n
\n \n );\n }\n\n\n renderForm() {\n\n const tabList = [\n {\n label: \"CAM\",\n value: \"cam\",\n },\n {\n label: \"RENT\",\n value: \"rent\",\n },\n // {\n // label: \"Other Rent Details\",\n // value: \"other rent details\",\n // },\n {\n label: \"Property Tax\",\n value: \"property tax\",\n },\n {\n label: \"Marketing Fund\",\n value: \"marketing fund\",\n },\n {\n label: \"Parking 2W\",\n value: \"parking 2w\",\n },\n {\n label: \"Parking 4W\",\n value: \"parking 4w\",\n },\n {\n label: \"Parking Other\",\n value: \"parking other\",\n },\n {\n label: \"Storage\",\n value: \"storage\",\n },\n {\n label: \"Signage\",\n value: \"signage\",\n },\n ];\n\n return (\n <>\n \n {\n this.setState({percentageErr : \"\"});\n const { id } = this.props.match.params;\n var self = this;\n axios({\n method: \"post\",\n url: apiUrl.apiUrl.url+'/create-lease/add-landlord-charges?id=' + id,\n data: values,\n }).then(function (response) {\n\n if (response.data.status == 'success') {\n \n self.setState({\n messsagePopup: true,\n popupContent: \"Detail Saved Successfully!\",\n url: `${apiUrl.apiUrl.url}/amendlease/submit-lease/${id}`\n });\n\n } else {\n //self.state.percentageErr =response.data.message;\n self.state.percentageErr ='Please select the landlord and provide the respective percentage.';\n self.setState({});\n }\n });\n\n }}\n >\n {({\n values,\n errors,\n touched,\n handleChange,\n handleBlur,\n handleSubmit,\n isSubmitting\n }) => (\n \n )}\n \n \n
\n \n );\n }\n}\n\nexport default withRouter(RentCharge);\n","import {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n useParams, Redirect\n} from \"react-router-dom\";\nimport LeaseMenu from \"./LeaseMenu\";\n// import UnitDetailMaster from \"./storeDirectory/UnitDetailMaster\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport styles from \"./createLease.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faUserCircle,\n faSignOutAlt,\n faKey,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport LeaseLandlord from \"./parties/LeaseLandlord\";\nimport LeaseOccupier from \"./parties/LeaseOccupier\";\nimport LeaseTermDetails from \"./criticaldates/LeaseTermDetails\";\nimport LeaseBrokerDetails from \"./parties/LeaseBrokerDetails\";\nimport LockInNoticePeriod from \"./criticaldates/LockInNoticePeriod\";\nimport RentalDetails from \"./commercialDetails/RentalDetails\";\nimport OtherRentalDetails from \"./commercialDetails/OtherRentalDetails\"\nimport CamDetails from \"./commercialDetails/CamDetails\";\nimport Utilities from \"./otherCharges/Utilities\";\nimport MarketingFund from \"./otherCharges/MarketingFund\";\nimport PropertyMuncipalTax from \"./otherCharges/Property-Muncipal-Tax\";\nimport ParkingStorageSignage from \"./otherCharges/Parking-Storage-Signage\";\nimport RentDepositDetails from \"./securityDepositDetails/RentDepositDetails\";\nimport CAMDepositDetails from \"./securityDepositDetails/CAMDepositDetails\";\nimport OtherDepositDetails from \"./securityDepositDetails/OtherDepositDetails\";\nimport CommercialClauses from \"./criticalClauses/CommercialClauses\";\nimport OtherClauses from \"./criticalClauses/OtherClauses\";\nimport UploadDocument from \"./criticalClauses/UploadDocument\";\nimport ListingForm from \"./leaseList/ListingForm\";\nimport Prospect from \"./prospect/Prospect\";\nimport ProspectDetail from \"./prospect/ProspectDetail\";\nimport TopHeader from \"../layout/TopHeader\";\nimport SubmitLease from \"./submitLease/SubmitLease\";\nimport RentCharge from \"./chargeType/RentCharge\";\n\n\n\n\n\nexport default function CreateLease() {\n let match = useRouteMatch();\n\n return (\n \n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faCommentDots } from \"@fortawesome/free-solid-svg-icons\";\nimport { BrowserRouter as Router, withRouter } from \"react-router-dom\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport apiUrl from \"../apiUrlConstant\";\nimport Select from \"react-select\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\nconst labels = [];\n\nconst formHeaders = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nexport const chartOneOptions = {\n chart: {\n title: \"Sales View Report\",\n },\n legend: { position: \"right\" },\n};\n\nexport const chartRentOptions = {\n chart: {\n title: \"Lease Rent Trend\",\n },\n legend: { position: \"right\" },\n};\n\nclass LeaseGraphPopup extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n IsModalOpened: this.props.IsModalOpened,\n onCloseModal: this.props.onCloseModal,\n leaseId: this.props.leaseId,\n fySelected: [],\n leaseData: {},\n fianancialYears: [],\n popupHeading: \"\",\n chartOneData: [\n // [\n // \"Months\",\n // \"2022-23\",\n // ],\n // [\"Mon\", 37.8, 80.8, 41.8],\n // [2, 30.9, 69.5, 32.4],\n ],\n\n chartRentData: [],\n };\n }\n componentDidMount() {\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-financial-years?leaseId=${this.state.leaseId}`,\n {\n method: \"GET\",\n headers: formHeaders, // Correct way to pass headers\n }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(data, \"data\");\n this.setState({\n leaseData: data.data,\n fianancialYears: data.fianancialYears,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.loadLeaseRentData();\n this.fetchSalesData();\n }\n amendNumber(str) {\n return str.split(\"-\").pop();\n }\n\n loadLeaseSalesData(newValue) {\n var ths = this;\n this.state.fySelected = [];\n this.state.fyArr = [];\n console.log(newValue, \"newValue\");\n for (let i = 0; i < newValue.length; i++) {\n this.state.fyArr.push(newValue[i].value);\n this.state.fySelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.setState({});\n this.fetchSalesData();\n }\n\n fetchSalesData() {\n var ths = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/get-lease-sales-data-for-graph?leaseId=${this.state.leaseId}`,\n data: { leaseId: this.state.leaseId, year: this.state.fyArr },\n }).then(function (response) {\n if(typeof response.data.data != \"undefined\") {\n ths.setState({ chartOneData: response.data.data });\n }\n });\n }\n\n loadLeaseRentData(str) {\n var ths = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/get-lease-rent-data-for-graph?leaseId=${this.state.leaseId}`,\n data: { leaseId: this.state.leaseId, year: str },\n }).then(function (response) {\n console.log(response, \"response rent\");\n\n ths.setState({ chartRentData: response.data.data });\n });\n }\n\n setPopupHeading() {\n // if (\n // this.state.leaseData.type == \"\" ||\n // this.state.leaseData.type == \"original\"\n // ) {\n // return \"Create Lease\";\n // } else if (this.state.leaseData.type == \"amend\") {\n // return \"Amend Lease\";\n // } else if (this.state.leaseData.type == \"extend\") {\n // return \"Extend Lease\";\n // } else if (this.state.leaseData.type == \"renew\") {\n // return \"Renew Lease\";\n // } else if (this.state.leaseData.type == \"terminate\") {\n // return \"Terminate Lease\";\n // } else {\n // return \"Create Lease\";\n // }\n }\n render() {\n return (\n \n
\n \n {/* with more routes\n that build on the /topics URL path. You can think of the\n 2nd here as an \"index\" page for all topics, or\n the page that is shown when no topic is selected */}\n \n\n \n \n\n \n \n\n \n \n\n \n \n\n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n\n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n
\n Masters
*/}\n\n {/* The Topics page has its own\n
\n \n \n );\n }\n}\n\nexport default withRouter(LeaseGraphPopup);\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Placeholder } from \"rsuite\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faSearch,\n faPlus,\n faPen,\n faTimes,\n faUndo,\n faChartBar,\n faEye,\n faInfoCircle,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\nimport LeaseDetailsPopup from \"../LeaseDetailsPopup\";\nimport LeaseGraphPopup from \"../LeaseGraphPopup\";\nimport { getUserRole } from \"../../utils/index\";\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n - \n
- Lease Details: {this.setPopupHeading()} \n
\n
\n \n
\n \n
\n \n
\n \n {\n this.loadLeaseRentData(e.target.value);\n }}\n >\n \n {this.state.fianancialYears.map((x) => (\n \n ))}\n \n \n {this.state.chartRentData.length > 0 ? (\n
\n \n
\n \n {\n console.log(e, \"e ka value\");\n //this.valueChange(e, \"change_brand\");\n this.loadLeaseSalesData(e);\n }}\n value={this.state.fySelected}\n options={this.state.fianancialYears.map((item) => ({\n label: item.value,\n value: item.value,\n }))}\n />\n \n {this.state.chartOneData.length > 0 ? (\n
\n \n \n \n {\" \"}\n \n {\n setLeaseId(record.leaseId);\n setpopupKey(Math.random());\n openFromParent();\n }}\n >\n {\n setLeaseId(record.leaseId);\n setpopupKey(Math.random());\n setGraphOpen(true);\n }}\n >\n
\n );\n },\n },\n ];\n\n return (\n <>\n \n
\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n\n <>\n \n
\n \n {\n this.setState({\n selectedAsset: e.target.value,\n randomNum: Math.random(),\n });\n this.loadLeaseCountStatuswise(\n this.state.selectedBrand,\n e.target.value\n );\n }}\n >\n \n {this.state.assets.map((x) => (\n \n ))}\n \n {\n this.setState({\n selectedBrand: e.target.value,\n });\n\n this.setState({ randomNum: Math.random() });\n\n this.loadLeaseCountStatuswise(\n e.target.value,\n this.state.selectedAsset\n );\n }}\n >\n \n {this.state.brands.map((x) => (\n \n ))}\n \n
\n \n {/* {\n //this.setState({ selectedAsset: e.target.value });\n this.setState({\n selectedStatus: 6,\n randomNum: Math.random(),\n showProspect: true,\n isDropped: true,\n });\n }}\n >\n\n \n\n
\n \n
*/}\n \n
\n \n
\n \n {\n this.setState({\n selectedAsset: e.target.value,\n randomNum: Math.random(),\n });\n this.loadLeaseCountStatuswise(\n this.state.selectedBrand,\n e.target.value\n );\n }}\n >\n \n {this.state.assets.map((x) => (\n \n ))}\n \n
\n \n
\n \n {\n this.setState({\n selectedBrand: e.target.value,\n });\n\n this.setState({ randomNum: Math.random() });\n\n this.loadLeaseCountStatuswise(\n e.target.value,\n this.state.selectedAsset\n );\n }}\n >\n \n {this.state.brands.map((x) => (\n \n ))}\n \n
\n \n {\n this.setState({\n selectedStatus: 5,\n randomNum: Math.random(),\n showProspect: true,\n isDropped: false,\n });\n }}\n >\n \n\n\n
\n {this.state.statusCount.prospect ? this.state.statusCount.prospect : \"0\"}
\nProspect
\n{this.state.statusCount.dropped ? this.state.statusCount.dropped : \"0\"}
\nDropped
\n{this.state.statusCount.draft ? this.state.statusCount.draft : \"0\"}
\nDraft
\n \n{this.state.statusCount.approval ? this.state.statusCount.approval : \"0\"}
\nApproval
\n \n{this.state.statusCount.active ? this.state.statusCount.active : \"0\"}
\nActive
\n \n{this.state.statusCount.expired ? this.state.statusCount.expired : \"0\"}
\nExpired
\n \n{this.state.statusCount.terminated ? this.state.statusCount.terminated : \"0\"}
\nTerminated
\n \n{this.state.statusCount.fnf ? this.state.statusCount.fnf : \"0\"}
\nF&F
\n \n \n \n {/*\n
\n \n
\n - \n
- View Lease \n
- \n Lease Details\n \n
\n
\n );\n}\n","import React from \"react\";\nimport { Nav, Sidenav, Dropdown, Icon } from \"rsuite\";\nimport \"rsuite/dist/styles/rsuite-default.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCoffee,\n faUser,\n faList,\n faKey,\n faHouseUser,\n faCog,\n faRupeeSign,\n faAtom,\n faCopyright,\n faFileContract,\n faChartLine,\n faFileAlt,\n faShieldAlt,\n faTable,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../SideMenu.css\";\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n withRouter,\n useParams,\n} from \"react-router-dom\";\nimport { getUserType } from \"../utils/index\";\n\nvar revenueReportText = \"Revenue Report\";\nif (getUserType() == \"Occupier\" || getUserType() == \"occupier\") {\n revenueReportText = \"Expense Report\";\n}\n\nclass ReportsSideMenu extends React.Component {\n constructor(props) {\n super(props);\n }\n\n state = {\n openMenu: this.props.openMenu ? [this.props.openMenu] : [\"\"],\n activeKey: this.props.activeKey ? this.props.activeKey : \"1-1\",\n };\n render() {\n let url = this.props.match;\n return (\n \n {/* with more routes\n that build on the /topics URL path. You can think of the\n 2nd here as an \"index\" page for all topics, or\n the page that is shown when no topic is selected */}\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n
\n Masters
*/}\n\n {/* The Topics page has its own\n {\n console.log(openKeys[openKeys.length - 1],\"==================\");\n this.setState({ openMenu: [openKeys[openKeys.length - 1]] });\n }}\n >\n \n \n \n \n
\n );\n }\n}\n\nexport default withRouter(ReportsSideMenu);\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Col, Placeholder } from \"rsuite\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faSearch,\n faPlus,\n faPen,\n faTimes,\n faUndo, faFileExcel\n} from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\n// let columns = [\n// {\n// name: \"S.No\",\n// selector: \"srNo\",\n// sortable: false,\n// grow: 1,\n// },\n\n// {\n// name: \"City\",\n// selector: \"city\",\n// sortable: false,\n// grow: 3,\n// },\n// {\n// name: \"Asset Name\",\n// selector: \"assetName\",\n// sortable: false,\n// grow: 3,\n// },\n// {\n// name: \"Brand Name\",\n// selector: \"brandName\",\n// sortable: false,\n// grow: 3,\n// },\n// {\n// name: \"Lease Status\",\n// selector: \"leaseStatus\",\n// sortable: false,\n// grow: 3,\n// },\n// {\n// name: \"Lease Number\",\n// selector: \"leaseCode\",\n// sortable: false,\n// grow: 3,\n// }, \n// {\n// name: \"Gross Leasable Area\",\n// selector: \"gross_leasable_area\",\n// sortable: false,\n// grow: 3,\n// },\n// {\n// name: \"Lease Expiry Date\",\n// selector: \"led\",\n// sortable: false,\n// grow: 3,\n// },\n// {\n// name: \"Renewal Option\",\n// selector: \"renewal_option\",\n// sortable: false,\n// grow: 3,\n// },\n// {\n// name: \"Renewal Notice\",\n// selector: \"renewal_notice\",\n// sortable: false,\n// grow: 3,\n// } \n// ];\n\n//let columns = columns;\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear, prm, fetchUrl, DownloadFile }) => (\n <>\n {/* */}\n \n {/* */}\n \n);\n\n\n\nconst LeaseDocumentTable = ({ asset, brand, formConfig, expiry_report, columns, expiry_lockin_report, fetchUrl }) => {\n\n if (typeof formConfig == \"undefined\") {\n formConfig = {\n 'page': 0, 'per_page': 10\n };\n }\n\n const [filterText, setFilterText] = React.useState(\"\");\n const [resetPaginationToggle, setResetPaginationToggle] =\n React.useState(false);\n\n const [data, setData] = useState([]);\n const [loading, setLoading] = useState(false);\n const [totalRows, setTotalRows] = useState(0);\n const [perPage, setPerPage] = useState(10);\n\n\n React.useEffect(() => {\n fetchLeaseData(1);\n }, [filterText]);\n\n const subHeaderComponentMemo = React.useMemo(() => {\n const handleClear = () => {\n if (filterText) {\n setResetPaginationToggle(!resetPaginationToggle);\n setFilterText(\"\");\n }\n };\n\n\n var prm = Object.entries(formConfig).map(([key, val]) => `${key}=${val}`).join('&');\n return (\n \n
\n \n );\n};\nexport default LeaseDocumentTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport axios from \"axios\";\nimport LeaseDocumentTable from \"./LeaseDocumentTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPen,\n faPlus,\n faEye,\n faTimes,\n faUndo,\n} from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass ReportsColumnSelectionView extends React.Component {\n groupId = { value: \"\" };\n state = {\n url: `${apiUrl.apiUrl.url}/lease-report`,\n gridColumns: [],\n myArray: [],\n checkedItems: new Map(),\n };\n\n componentDidMount() {\n var ths = this;\n if (this.props.loadedColumns.length == 0) {\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-report/get-report-columns`,\n data: { reportType: this.props.report },\n }).then(function (response) {\n console.log(response.data, \"response\");\n ths.setState({ gridColumns: response.data });\n ths.props.setLoadedColumns(response.data);\n console.table(response.data)\n });\n } else {\n this.setState({ gridColumns: this.props.loadedColumns });\n }\n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n setInputState(columns) {\n this.setState({ gridColumns: columns });\n }\n\n handleChange(event) {\n var isChecked = event.target.checked;\n var item = event.target.value;\n var myArray = this.state.gridColumns;\n var objIndex = myArray.findIndex((obj) => obj.name == item);\n myArray[objIndex].visible = isChecked;\n this.setState({ gridColumns: myArray, myArray: myArray });\n }\n handleSubmit(event) {\n console.log(this.state);\n event.preventDefault();\n }\n\n handleOnDragEnd = (e) => {\n console.log(e);\n if (!e.destination) return;\n const items = Array.from(this.state.gridColumns);\n const [reorderedItem] = items.splice(e.source.index, 1);\n items.splice(e.destination.index, 0, reorderedItem);\n this.setState({ gridColumns: items });\n };\n\n setFrmValues(type) {\n //console.log(this.state.gridColumns, \"this.state.gridColumns\");\n var finalColumnList = [];\n this.state.gridColumns.map(\n\n\n\n (item) => {\n if (item.visible) {\n finalColumnList.push(item);\n }\n });\n\n if (typeof type != \"undefined\") {\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-report/save-report-columns`,\n data: {\n reportType: this.props.report,\n finalColumnList: finalColumnList,\n },\n }).then(function (response) {\n console.log(response.data, \"response\");\n // ths.setState({ gridColumns: response.data });\n // ths.props.setLoadedColumns(response.data);\n });\n }\n\n // console.log(finalColumnList,'final column list');\n this.props.setColumns(finalColumnList);\n this.props.setLoadedColumns(this.state.gridColumns);\n this.props.handleClose(false);\n }\n\n render() {\n return (\n \n {this.renderForm()}\n
\n \n );\n }\n\n renderForm() {\n // NewData=[{grow: 1,id: 1,name: \"Created at\",selector: \"created at\",sortable: false,visible: true},{grow: 1,id: 2,name: \"Approved date\",selector: \"Approved Date\",sortable: false,visible: true}]\n return (\n\n \n \n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n\n resetForm,\n }) => (\n \n
\n );\n }\n}\n\nexport default withRouter(ReportsColumnSelectionView);\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Col, Placeholder } from \"rsuite\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faSearch,\n faPlus,\n faPen,\n faTimes,\n faCog, faFileExcel\n} from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport ReportsColumnSelectionView from \"./ReportsColumnSelectionView\";\nimport { Link } from \"react-router-dom\";\nimport { Modal, Button } from \"react-bootstrap\";\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\n\n\n\n\n\nconst FilterComponent = ({ filterText, onFilter, onClear, prm, handleGrid, DownloadFile, columnsList }) => (\n <>\n\n \n\n {/* */}\n \n {/* */}\n \n);\n\nconst LeaseListingTable = ({ asset, brand, formConfig, expiry_report, columns, expiry_lockin_report, report_type }) => {\n\n\n if (typeof formConfig == \"undefined\") {\n formConfig = {\n 'page': 0, 'per_page': 10\n };\n }\n\n //columns = columns;\n\n if (typeof expiry_report == \"undefined\") {\n var expiry_report = false;\n }\n\n if (typeof expiry_lockin_report == \"undefined\") {\n var expiry_lockin_report = false;\n }\n\n const [filterText, setFilterText] = React.useState(\"\");\n const [resetPaginationToggle, setResetPaginationToggle] =\n React.useState(false);\n\n const [data, setData] = useState([]);\n const [loading, setLoading] = useState(false);\n const [totalRows, setTotalRows] = useState(0);\n const [perPage, setPerPage] = useState(10);\n\n //);\n\n const [columnsList, setColumns] = useState(columns);\n const [loadedColumns, setLoadedColumns] = useState([]);\n\n const [show, setShow] = useState(false);\n //const [handleClose, setHide] = useState(true);\n\n\n React.useEffect(() => {\n fetchLeaseData(1);\n }, [filterText]);\n\n const subHeaderComponentMemo = React.useMemo(() => {\n const handleClear = () => {\n if (filterText) {\n setResetPaginationToggle(!resetPaginationToggle);\n setFilterText(\"\");\n }\n };\n\n if (typeof expiry_report != \"undefined\" && expiry_report == \"true\") {\n formConfig['expiry_report'] = 'true';\n }\n\n if (typeof expiry_lockin_report != \"undefined\" && expiry_lockin_report == \"true\") {\n formConfig['expiry_lockin_report'] = 'true';\n }\n\n var prm = Object.entries(formConfig).map(([key, val]) => `${key}=${val}`).join('&');\n\n return (\n \n \n
\n )}\n \n
\n\n \n {columns.map(function(d, idx){\n return ({d.name} )\n })}\n
\n \n */}\n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Report\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Locking Expiry Report\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Expiry Report\n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n
\n \n {record.unit_no.map((anObjectMapped, index) => {\n return
\n );\n }\n },\n },\n {\n name: \"Gross Leasable Area\",\n selector: \"gross_leasable_area\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Cost Center\",\n selector: \"costCenter\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Model Type\",\n selector: \"modelType\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Document Type\",\n selector: \"leaseDocumentType\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Document Date\",\n selector: \"leaseUploadDocumentDate\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Action\",\n grow: 2,\n // selector: \"info\",\n sortable: false,\n cell: (record) => {\n if (\n typeof record.documentUrl == \"undefined\" ||\n record.documentUrl == null || record.documentUrl === \"\"\n ) {\n return \"-\";\n } else {\n return (\n {anObjectMapped}
;\n })}\n \n {\n <>\n \n \n {\" \"}\n
\n );\n }\n },\n },\n {\n name: \"Storage Link\",\n grow: 2, //leaseUploadDocumenURL\n cell: (record) => {\n if (\n typeof record.leaseUploadDocumenURL == \"undefined\" ||\n record.leaseUploadDocumenURL == null || record.leaseUploadDocumenURL === \"\"\n ) {\n return \"-\";\n } else {\n return (\n \n {\n <>\n\n \n {\" \"}\n View\n \n\n {/* href={`${record.documentUrl}`} */}\n \n }\n
\n );\n }\n },\n }\n ],\n };\n\n componentDidMount() {\n this.initialiseAllData();\n \n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n }\n\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n initialiseAllData = () => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-view/get-lease-document-type`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseDocumentTypeList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n\n this.state.initialValues.brandId = \"\";\n this.state.initialValues.brandName = \"\";\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n //brandName\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-all-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-all-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_number\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-all-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n // this.state.initialValues.leaseId = newValue.value;\n // this.state.initialValues.leaseValue = newValue.label;\n this.state.leaseSelected = [];\n if (newValue.length == 0) {\n this.state.initialValues.leaseId = \"\";\n console.log(\"going to set\");\n //this.setState({});\n }\n if (typeof newValue[0] == \"undefined\") {\n this.state.initialValues.leaseId = \"\";\n this.setState({})\n } else if (newValue.length == 1 && newValue[0].value == 0) {\n this.state.initialValues.leaseId = [];\n\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(\n \"\" + this.state.leaseList[i].id\n );\n }\n }\n } else {\n this.state.initialValues.leaseId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(\"\" + newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n this.setState({});\n } else if (actionMeta == \"change_document_type\") {\n //\n this.state.initialValues.leaseDocumentTypeId = newValue.value;\n this.state.initialValues.leaseDocumentTypeId = newValue.label;\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-all-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Documentation Report\n \n
\n \n
\n \n )}\n \n \n
\n \n\n );\n }\n}\n\nexport default withRouter(LeaseDocumentation);\n","import React from \"react\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faPen,\n faTimes,\n faSearch,\n faChevronCircleDown,\n faCheck,\n faCheckCircle,\n faExclamationTriangle,\n faTimesCircle,\n faFileSignature,\n} from \"@fortawesome/free-solid-svg-icons\";\n// import styles from \"../../master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport LeaseListingTable from \"./LeaseListingTable\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LeaseListing extends React.Component {\n state = {\n redirect: false,\n brands: [],\n assets: [],\n statusCount: {},\n selectedBrand: \"\",\n selectedAsset: \"\",\n };\n\n constructor(props) {\n super(props);\n\n\n }\n componentDidMount() {\n this.loadBrands();\n this.loadAssets();\n \n fetch(`${apiUrl.apiUrl.url}/lease-view/get-status-count`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n statusCount: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n loadAssets = async () => {\n const response = await axios.get(`${apiUrl.apiUrl.url}/assets`);\n console.log(response);\n this.state.assets = response.data;\n this.setState({});\n };\n\n loadBrands = async () => {\n const response = await axios.get(\n `${apiUrl.apiUrl.url}/brand/get-brands?page=1&per_page=100&delay=1`\n );\n this.state.brands = response.data.data;\n this.setState({});\n };\n render() {\n\n return (\n \n \n \n \n \n \n \n \n {/* \n \n Close\n \n */}\n \n
\n \n
\n \n
\n \n
\n - \n
- Document \n
\n
\n \n
\n \n {this.renderForm()}\n
\n \n );\n }\n\n renderForm() {\n return (\n \n
\n );\n }\n}\n\nexport default withRouter(LeaseListing);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport Table from \"./LeaseListingTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faChevronRight,\n faEye,\n faPen,\n faPlus,\n faSave,\n faTimes,\n faUndo,\n} from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\n//import Select from \"react-select\";\n\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType, fileUploadPath } from \"../../utils/index\";\n\nimport ReactMultiSelectCheckboxes from \"react-multiselect-checkboxes\";\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n leaseId: Yup.string().required(\"Required\"),\n financialYear: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n //stateId: Yup.string().required(\"Required\"),\n //districtId: Yup.string().required(\"Required\"),\n //cityId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // brandId: Yup.number().required(\"Required\"),\n leaseId: Yup.string().required(\"Required\"),\n financialYear: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n // stateId: Yup.string().required(\"Required\"),\n // districtId: Yup.string().required(\"Required\"),\n // cityId: Yup.string().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({\n leaseId: Yup.string().required(\"Required\"),\n financialYear: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n });\n}\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// leaseId: Yup.string().required(\"Required\"),\n// financialYear: Yup.string().required(\"Required\"),\n// dataUomId: Yup.string().required(\"Required\"),\n// });\n\nconst uploadFromFrm = Yup.object().shape({\n myfile: Yup.string().required(\"Required\"),\n});\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nlet financialYear = [];\n// var i = 0; let currentYear = new Date().getFullYear();\n\n// financialYear.push({ id: (currentYear + 1) , value: (currentYear ) + \"-\" + (currentYear + 1) })\n\n// for (; i <= 10; i++) {\n\n// financialYear.push({ id: currentYear , value: (currentYear - 1) + \"-\" + currentYear });\n// --currentYear;\n// }\n\nclass LeaseReportSalesForecast extends React.Component {\n groupId = { value: \"\" };\n state = {\n brandSelected: [],\n countries: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n redirect: false,\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: '',\n states: [],\n leaseCommencementMonth: \"\",\n exportBtn: false,\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n financialYear: financialYear,\n leaseList: [],\n\n formResponseData: {\n forecasteDetails: {\n forecast: [],\n actual: {},\n },\n },\n initialForecast: {},\n leaseTypes: [],\n initialValues: {\n brandId: [],\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n\n financialYear: \"\",\n dataUomId: \"Per Month\",\n dataUOMName: \"Per Month\",\n modelValue: 'All',\n modelId: 'All',\n assetTypeId: \"\",\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n }\n\n initialiseAllData = () => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n\n\n\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n\n\n\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n this.state.initialValues.leaseId = newValue.value;\n this.state.initialValues.leaseValue = newValue.label;\n\n if (newValue.label != \"ALL\" && newValue.label != \"\") {\n this.state.leaseList.forEach((item) => {\n if (newValue.value == item.id) {\n this.state.initialValues.assetId = item.asset_id;\n this.state.initialValues.assetName = item.asset_name;\n\n this.setMasterPreValues(item.asset_id);\n }\n });\n }\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-financial-years?leaseId=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n financialYear: data.fianancialYears,\n leaseCommencementMonth: data.lease_commencement_month,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?sales-report=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?sales-report=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_uom\") {\n //change_lease_month\n this.state.initialValues.dataUomId = newValue.value;\n this.state.initialValues.dataUOMName = newValue.label;\n\n console.log(this.state.initialValues, \"initial valuyes\");\n } else if (actionMeta == \"change_financial_year\") {\n //change_lease_month\n this.state.initialValues.financialYearId = newValue.value;\n this.state.initialValues.financialYear = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n onFileChange = (event) => {\n // Update the state\n this.setState({ selectedFile: event.target.files[0] });\n };\n // On file upload (click the upload button)\n onFileUpload = () => {\n // Create an object of formData\n const formData = new FormData();\n\n console.log(formData, \"formData\");\n\n if (typeof this.state.selectedFile == \"undefined\") {\n // alert(\"Please upload file to process\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: 'Please upload file to process',\n });\n return true;\n }\n\n var ths = this;\n\n // Update the formData object\n formData.append(\n \"myFile\",\n this.state.selectedFile,\n this.state.selectedFile.name\n );\n formData.append(\"dateAsOn\", this.state.initialValues.dateAsOn);\n formData.append(\"leaseId\", this.state.initialForecast.leaseId);\n formData.append(\"type\", \"forecast\");\n // Request made to the backend api\n // Send formData object\n axios\n .post(`${apiUrl.apiUrl.url}/sales-input/import-forecast`, formData)\n .then(function (response) {\n console.log(response, \"response\");\n if (response.data.success) {\n ths.setState({ redirect: true });\n ths.state.brandSelected = [];\n ths.state.leaseSelected = [];\n\n // alert(\"Form processed successfully.\");\n ths.setState({\n popupalertMessage: true,\n popupMessageContent: 'Form processed successfully.',\n });\n for (const [key, value] of Object.entries(ths.state.initialValues)) {\n ths.state.initialValues[key] = \"\";\n }\n ths.setState({\n formResponseData: {\n forecasteDetails: {\n forecast: [],\n actual: {},\n },\n },\n initialForecast: [],\n exportBtn: false,\n });\n ths.setState({});\n }\n });\n };\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false, });\n };\n\n\n redirectToClose = () => {\n this.setState({\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n \n
\n \n\n
\n \n
\n \n {\n this.setState({ selectedAsset: e.target.value });\n }}\n >\n \n {this.state.assets.map((x) => (\n \n ))}\n \n
\n \n
\n \n {\n this.setState({ selectedBrand: e.target.value });\n }}\n >\n \n {this.state.brands.map((x) => (\n \n ))}\n \n
\n \n
\n \n
\n \n
\n \n \n \n
\n
\n \n \n
\n {this.state.statusCount.prospect}
\n\n
\n \n \n \n
\n
\n \n \n
\n {this.state.statusCount.dropped}
\n\n
\n \n \n \n
\n
\n \n \n
\n {this.state.statusCount.draft}
\n\n
\n \n \n \n
\n
\n \n \n
\n {this.state.statusCount.approval}
\n\n
\n \n \n \n
\n
\n \n \n
\n {this.state.statusCount.active}
\n\n
\n \n \n \n
\n
\n \n \n
\n {this.state.statusCount.expired}
\n\n
\n \n \n \n
\n
\n \n \n
\n {this.state.statusCount.terminated}
\n\n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Report - Sales Input - Forecast\n \n
\n \n
\n\n <>\n {/* */}\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n
\n )}\n \n {this.state.exportBtn && (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n console.log(\"hii\");\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.formResponseData.forecasteDetails.actual = [];\n this.setState({ exportBtn: false });\n this.setState({});\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.initialiseAllData();\n }}\n onSubmit={(values, actions) => {\n values.groupId = this.state.initialValues.groupId;\n\n var brand_id = this.state.initialValues.brandId;\n var asset_id = this.state.initialValues.assetId;\n var form_config = this.state.initialValues;\n\n form_config.expiry_status = true;\n\n var counter = this.state.counter + 1;\n console.log(counter, \"counter\");\n this.setState({ counter: counter });\n\n this.setState({ selectedBrand: brand_id });\n this.setState({ selectedAsset: asset_id });\n this.setState({ formConfig: form_config });\n var prm = Object.entries(form_config)\n .map(([key, val]) => `${key}=${val}`)\n .join(\"&\");\n this.state.formResponseData = [];\n\n fetch(`${apiUrl.apiUrl.url}/sales-input/fetch-sales-input?` + prm, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //this.setState({ });\n this.setState({\n formResponseData: data,\n initialForecast: data.forecasteDetails,\n });\n\n this.state.initialForecast.leaseId = data.lease_id;\n this.state.initialForecast.year = data.year;\n\n this.setState({\n exportBtn: true,\n exportUrl:\n `${apiUrl.apiUrl.url}/sales-input/fetch-sales-input?export=true&reportType=actual&` +\n prm,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n form_config = undefined;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n {\n this.setState({\n //formResponseData: data,\n initialForecast: this.state.formResponseData.forecasteDetails,\n });\n }}\n onSubmit={(values, actions) => {\n console.log(\"form submitting..\", values);\n var self = this;\n var formPostData = {};\n\n formPostData[\"leaseId\"] = this.state.initialForecast.leaseId;\n formPostData[\"year\"] = this.state.initialForecast.year;\n formPostData[\"forecasteDetails\"] = values.actual;\n\n console.log(formPostData, \":formPostData\");\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/sales-input/create-input-sales`,\n data: formPostData,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n // alert(\"Data Saved Successfully\");\n //self.setState({ redirect: true });\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Saved Successfully'\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n handleReset,\n\n isSubmitting,\n }) => (\n {\n values.leaseDocumentUrl =\n fileUploadPath() +\n this.props.match.params.id +\n \"/\" +\n this.state.fileName;\n console.log(values);\n var self = this;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n \n )}\n \n )}\n\n {/*
\n );\n }\n}\n\nexport default withRouter(LeaseReportSalesActual);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport Table from \"./LeaseListingTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPen,\n faPlus,\n faSave,\n faTimes,\n faUndo,\n faFileExcel,\n faEye,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\n//import Select from \"react-select\";\n\nimport styled from \"styled-components\";\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType } from \"../../utils/index\";\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n leaseId: Yup.number().required(\"Required\"),\n financialYear: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n //stateId: Yup.string().required(\"Required\"),\n //districtId: Yup.string().required(\"Required\"),\n //cityId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // brandId: Yup.number().required(\"Required\"),\n leaseId: Yup.number().required(\"Required\"),\n financialYear: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n // stateId: Yup.string().required(\"Required\"),\n // districtId: Yup.string().required(\"Required\"),\n // cityId: Yup.string().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({\n leaseId: Yup.number().required(\"Required\"),\n financialYear: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n });\n}\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// leaseId: Yup.array().required(\"Required\"),\n// financialYear: Yup.string().required(\"Required\"),\n// dataUomId: Yup.string().required(\"Required\"),\n// });\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n//const [selectedValue, setSelectedValue] = useState([]);\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nlet financialYear = [];\n// var i = 0; let currentYear = new Date().getFullYear();\n// financialYear.push({ id: (currentYear + 1) , value: (currentYear ) + \"-\" + (currentYear + 1) })\n// for (; i <= 10; i++) {\n// financialYear.push({ id: currentYear , value: (currentYear - 1) + \"-\" + currentYear });\n// --currentYear;\n// }\n\nvar tableCounter = 0;\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LeaseReportSalesView extends React.Component {\n groupId = { value: \"\" };\n state = {\n brandSelected: [],\n exportUrl: \"\",\n landloardList: [],\n occupierList: [],\n selectedValue: [],\n setSelectedValue: [],\n leaseSelected: [],\n countries: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n financialYear: [],\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n redirect: false,\n states: [],\n count: 0,\n\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n\n leaseList: [],\n formResponseData: [],\n formResponseData1: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: {},\n leaseTypes: [],\n initialValues: {\n brandId: [],\n countryId: \"\",\n landloardName: \"\",\n landloardId: \"\",\n OccupierName: \"\",\n occupierId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n financialYear: \"\",\n dataUomId: \"Per Month\",\n dataUOMName: \"Per Month\",\n modelValue: 'All',\n modelId: 'All',\n assetTypeId: \"\"\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n \n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n }\n\n initialiseAllData=() => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.label;\n this.state.initialValues.modelValue = newValue.value;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n\n //brandName\n // this.state.leaseSelected = [];\n // this.state.initialValues.leaseId = [];\n // for (let i = 0; i < newValue.length; i++) {\n // this.state.initialValues.leaseId.push(newValue[i].value);\n // this.state.leaseSelected.push({\n // value: newValue[i].value,\n // label: newValue[i].label,\n // });\n // }\n\n console.log(\"aclliningng\", newValue);\n\n this.state.initialValues.leaseId = [];\n this.state.leaseSelected = [];\n\n if (typeof newValue[0] == \"undefined\") {\n this.state.initialValues.leaseId = \"\";\n this.setState({})\n } else if (newValue.length == 1 && newValue[0].value == 0) {\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(this.state.leaseList[i].id);\n }\n }\n } else {\n console.log(\"in else\");\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n\n // for (let i = 0; i < newValue.length; i++) {\n // this.state.initialValues.leaseId.push(newValue[i].value);\n // this.state.leaseSelected.push({\n // value: newValue[i].value,\n // label: newValue[i].label,\n // });\n // }\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-financial-years?leaseId=` +\n this.state.initialValues.leaseId, { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n financialYear: data.fianancialYears,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n //brandName\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_uom\") {\n //change_lease_month\n this.state.initialValues.dataUomId = newValue.value;\n this.state.initialValues.dataUOMName = newValue.label;\n\n console.log(this.state.initialValues, \"initial valuyes\");\n } else if (actionMeta == \"change_financial_year\") {\n //change_lease_month\n this.state.initialValues.financialYearId = newValue.value;\n this.state.initialValues.financialYear = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Report - Sales Input - Actual\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \n \n {(close) => (\n \n
\n )}\n \n\n {this.state.exportBtn && (\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Report - Sales View\n \n
\n \n
\n\n\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.state.formResponseData.length > 0 && (\n \n \n \n \n )}\n\n
\n \n );\n }\n}\n\nexport default withRouter(LeaseReportSalesView);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport Table from \"./LeaseListingTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport styled from \"styled-components\";\nimport {\n faPen,\n faPlus,\n faSave,\n faTimes,\n faUndo,\n faFileExcel,\n faEye,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\n//import Select from \"react-select\";\n\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType } from \"../../utils/index\";\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n //stateId: Yup.string().required(\"Required\"),\n //districtId: Yup.string().required(\"Required\"),\n //cityId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // brandId: Yup.number().required(\"Required\"),\n leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n // stateId: Yup.string().required(\"Required\"),\n // districtId: Yup.string().required(\"Required\"),\n // cityId: Yup.string().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({\n leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n });\n}\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// leaseId: Yup.array().required(\"Required\"),\n// financialYearOne: Yup.string().required(\"Required\"),\n// financialYearTwo: Yup.string().required(\"Required\"),\n// dataUomId: Yup.string().required(\"Required\"),\n// });\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n//const [selectedValue, setSelectedValue] = useState([]);\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nlet financialYear = [];\n// var i = 0; let currentYear = new Date().getFullYear();\n// financialYear.push({ id: (currentYear + 1) , value: (currentYear ) + \"-\" + (currentYear + 1) })\n// for (; i <= 10; i++) {\n// financialYear.push({ id: currentYear , value: (currentYear - 1) + \"-\" + currentYear });\n// --currentYear;\n// }\n\nvar tableCounter = 0;\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LeaseReportSalesComparison extends React.Component {\n groupId = { value: \"\" };\n state = {\n brandSelected: [],\n selectedValue: [],\n setSelectedValue: [],\n leaseSelected: [],\n landloardList: [],\n occupierList: [],\n countries: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n financialYear: [],\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n redirect: false,\n states: [],\n\n\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n\n leaseList: [],\n formResponseData: [],\n formResponseData1: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: {},\n leaseTypes: [],\n initialValues: {\n brandId: [],\n countryId: \"\",\n stateId: \"\",\n landloardName: \"\",\n landloardId: \"\",\n OccupierName: \"\",\n occupierId: \"\",\n districtId: \"\",\n cityId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n financialYear: \"\",\n dataUomId: \"Per Month\",\n dataUOMName: \"Per Month\",\n financialYearOne: \"Period 1\",\n financialYearTwo: \"Period 2\",\n modelValue: 'All',\n modelId: 'All',\n assetTypeId: \"\"\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n \n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n }\n\n initialiseAllData=() => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n this.state.initialValues.leaseId = [];\n this.state.leaseSelected = [];\n\n if (typeof newValue[0] == \"undefined\") {\n this.state.initialValues.leaseId = \"\";\n this.setState({})\n } else if (newValue.length == 1 && newValue[0].value == 0) {\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(this.state.leaseList[i].id);\n }\n }\n } else {\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(newValue[i].value);\n this.state.selectedValue.push(newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n // for (let i = 0; i < newValue.length; i++) {\n // this.state.initialValues.leaseId.push(newValue[i].value);\n // this.state.selectedValue.push(newValue[i].value);\n // this.state.leaseSelected.push({\n // value: newValue[i].value,\n // label: newValue[i].label,\n // });\n // }\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-financial-years?leaseId=` +\n this.state.initialValues.leaseId, { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n financialYear: data.fianancialYears,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n this.state.leaseSelected = [];\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_uom\") {\n //change_lease_month\n this.state.initialValues.dataUomId = newValue.value;\n this.state.initialValues.dataUOMName = newValue.label;\n\n console.log(this.state.initialValues, \"initial valuyes\");\n } else if (actionMeta == \"change_financial_yearone\") {\n //change_lease_month\n this.state.initialValues.financialYearIdOne = newValue.value;\n this.state.initialValues.financialYearOne = newValue.label;\n } else if (actionMeta == \"change_financial_yeartwo\") {\n //change_lease_month\n this.state.initialValues.financialYearIdTwo = newValue.value;\n this.state.initialValues.financialYearTwo = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n \n \n
\n
\n | S.No | \nAsset Name | \nBrand Name / Occupier Name | \nLease Id | \nGross Leasable Area | \nCost Center | \nPeriod | \nGross Sale | \nNet Sale | \nGross Sale | \nNet Sale | \nGross Sale | \nNet Sale | \n|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Forecast | \nActual | \nVariance | \n|||||||||||
| {anObjectMapped.leaseName == '-' ? \"-\" : '#'} | \n {/*{rowIndex + index+1} | */}\n{anObjectMapped.assetName} | \n{anObjectMapped.brandName} | \n{anObjectMapped.leaseName} | \n{anObjectMapped.grossLeasebleArea} | \n{anObjectMapped.costCenter} | \n{rowData.periodFull} | \n\n {\n anObjectMapped.forecast[rowIndex]\n .forecast_gross_sale\n }\n | \n\n\n {\n anObjectMapped.forecast[rowIndex]\n .forecast_net_sale\n }\n | \n\n\n {\n anObjectMapped.actual[rowIndex]\n .actual_gross_sale\n }\n | \n\n {\n anObjectMapped.actual[rowIndex]\n .actual_net_sale\n }\n | \n\n\n {\n anObjectMapped.variance[rowIndex]\n .variance_gross_sale\n }\n | \n\n {\n anObjectMapped.variance[rowIndex]\n .variance_net_sale\n }\n | \n
| Nothing to show..... | \n
\n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Report - Sales Comparison\n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.state.formResponseData.length > 0 && (\n \n \n \n \n )}\n
\n \n );\n }\n}\n\nexport default withRouter(LeaseReportSalesComparison);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport LeaseDocumentTable from \"./LeaseDocumentTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPen,\n faPlus,\n faEye,\n faTimes,\n faUndo,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType } from \"../../utils/index\";\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // brandId: Yup.number().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({});\n}\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// });\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass LeaseSecurityDeposit extends React.Component {\n groupId = { value: \"\" };\n state = {\n url: `${apiUrl.apiUrl.url}/lease-report`,\n LandlordGroups: [],\n landloardList: [],\n occupierList: [],\n countries: [],\n districtList: [],\n\n cityList: [],\n brandCatList: [],\n brandList: [],\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n leaseList: [],\n leaseDocumentTypeList: [],\n brandSelected: [],\n leaseSelected: [],\n redirect: false,\n states: [],\n zones: [],\n redirect: false,\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n leaseMonths: monthsArr,\n formConfig: {},\n leaseTypes: [],\n initialValues: {\n brandId: \"\",\n countryId: \"\",\n stateId: \"\",\n landloardName: \"\",\n landloardId: \"\",\n OccupierName: \"\",\n occupierId: \"\",\n districtId: \"\",\n cityId: \"\",\n brandCatId: \"\",\n securityDepositName: \"\",\n leaseId: [],\n modelValue: 'All',\n modelId: 'All',\n assetTypeId: \"\",\n },\n gridColumns: [\n {\n name: \"S.No\",\n selector: \"srNo\",\n sortable: false,\n grow: 1,\n },\n {\n name: \"Asset Name\",\n selector: \"assetName\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Brand Name / Occupier Name\",\n selector: \"brandName\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Lease Id\",\n selector: \"leaseCode\",\n sortable: false,\n grow: 3,\n wrap: true,\n width: 300,\n //grow: 5,\n },\n {\n name: \"Unit No\",\n selector: \"unit_no\",\n sortable: false,\n grow: 3,\n wrap: true,\n cell: (record) => {\n if (typeof record.unit_no == \"undefined\" || record.unit_no == null) {\n return \"-\";\n } else {\n return (\n \n \n \n
\n
\n | S.No | \nAsset Name | \nBrand Name / Occupier Name | \nLease Id | \nGross Leasable Area | \nCost Center | \nPeriod | \nGross Sale | \nNet Sale | \nGross Sale | \nNet Sale | \nGross Sale | \nNet Sale | \n
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| \n Period 1 (\n {this.state.initialValues.financialYearIdOne})\n | \n\n Period 2 (\n {this.state.initialValues.financialYearIdTwo})\n | \nDifference (Period 2- Period 1) | \n||||||||||
| {anObjectMapped.leaseName == '-' ? 'TOtal' : '#'} | \n{anObjectMapped.assetName} | \n{anObjectMapped.brandName} | \n{anObjectMapped.leaseName} | \n{anObjectMapped.grossLeasebleArea} | \n{anObjectMapped.costCenter} | \n{rowData.periodFull} | \n\n {\n anObjectMapped.periodOne[rowIndex]\n .actual_gross_sale\n }\n | \n\n {\n anObjectMapped.periodOne[rowIndex]\n .actual_net_sale\n }\n | \n\n\n {\n anObjectMapped.periodTwo[rowIndex]\n .actual_gross_sale\n }\n | \n\n {\n anObjectMapped.periodTwo[rowIndex]\n .actual_net_sale\n }\n | \n\n\n {\n anObjectMapped.variance[rowIndex]\n .variance_gross_sale\n }\n | \n\n {\n anObjectMapped.variance[rowIndex]\n .variance_net_sale\n }\n | \n
| Nothing to show..... | \n
\n {record.unit_no.map((anObjectMapped, index) => {\n return
\n );\n }\n },\n },\n {\n name: \"Gross Leasable Area\",\n selector: \"gross_leasable_area\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Landlord\",\n selector: \"landlord_name\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Cost Center\",\n selector: \"costCenter\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n\n {\n name: \"Model Type\",\n selector: \"modelType\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Security Deposit Name\",\n selector: \"securityDepositName\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Milestone name\",\n selector: \"milestone_name\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Milestone Amt\",\n selector: \"milestone_amount\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n {\n name: \"Milestone Due Date\",\n selector: \"milestone_due_date\",\n sortable: false,\n grow: 3,\n wrap: true,\n },\n ],\n };\n\n componentDidMount() {\n this.initialiseAllData();\n \n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n }\n\n initialiseAllData = () => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-view/fetch-deposit-type`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseDocumentTypeList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n\n this.state.initialValues.brandId = \"\";\n this.state.initialValues.brandName = \"\";\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n //brandName\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&all=true&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_asset_type\") {\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_number\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n this.state.initialValues.leaseId = [];\n this.state.leaseSelected = [];\n if (typeof newValue[0] == \"undefined\") {\n this.state.initialValues.leaseId = \"\";\n this.setState({})\n } else if (newValue.length == 1 && newValue[0].value == 0) {\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(this.state.leaseList[i].id);\n }\n }\n } else {\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n } else if (actionMeta == \"change_document_type\") {\n //\n this.state.initialValues.securityDepositName = newValue.value;\n this.state.initialValues.securityDepositName = newValue.label;\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return {anObjectMapped}
;\n })}\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Security Deposit\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Report - Input Security Deposit\n \n
\n \n
\n\n \n )}\n \n\n \n \n
\n )}\n \n\n {this.state.exportBtn && (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Lease Report - Input Security - Comparison\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n\n \n \n
\n )}\n \n\n {/* \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"}\n {getUserType() == \"Occupier\" ? \"Expense\" : \"Revenue\"}\n \n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )\n }\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.leaseSelected = [];\n this.state.initialValues.chargeTypeSelected = [];\n this.state.chargeTypeSelected = [];\n this.state.financialYearOne = \"\";\n this.state.financialYearTwo = \"\";\n this.state.counter = Math.random();\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n values.groupId = this.state.initialValues.groupId;\n\n var brand_id = this.state.initialValues.brandId;\n var asset_id = this.state.initialValues.assetId;\n var form_config = this.state.initialValues;\n\n form_config.expiry_status = true;\n\n var counter = this.state.counter + 1;\n console.log(counter, \"counter\", form_config);\n\n this.setState({ selectedBrand: brand_id });\n this.setState({ selectedAsset: asset_id });\n this.setState({ formConfig: form_config });\n var prm = Object.entries(form_config)\n .map(([key, val]) => `${key}=${val}`)\n .join(\"&\");\n this.state.formResponseData = [];\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n fetch(\n `${apiUrl.apiUrl.url}/expense-report/fetch-revenue-details?` + prm,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //this.setState({ });\n tableCounter = 0;\n this.setState({\n formResponseData: data.data,\n monthsArr: data.monthsArr,\n });\n this.setState({ counter: counter });\n this.setState({\n exportUrl:\n `${apiUrl.apiUrl.url}/expense-report/fetch-revenue-details?export=true&` +\n prm,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n form_config = undefined;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n
\n );\n }\n}\n\nexport default withRouter(ExpenseReport);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport styled from \"styled-components\";\nimport { faUndo, faEye, faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport RevenueTable from \"./RevenueTable\";\nimport axios from \"axios\";\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType } from \"../../utils/index\";\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n\n //stateId: Yup.string().required(\"Required\"),\n //districtId: Yup.string().required(\"Required\"),\n //cityId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // brandId: Yup.number().required(\"Required\"),\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n\n // stateId: Yup.string().required(\"Required\"),\n // districtId: Yup.string().required(\"Required\"),\n // cityId: Yup.string().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n });\n}\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n//const [selectedValue, setSelectedValue] = useState([]);\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nlet financialYear = [];\n// var i = 0; let currentYear = new Date().getFullYear();\n// financialYear.push({ id: (currentYear + 1) , value: (currentYear ) + \"-\" + (currentYear + 1) })\n// for (; i <= 10; i++) {\n// financialYear.push({ id: currentYear , value: (currentYear - 1) + \"-\" + currentYear });\n// --currentYear;\n// }\n\nvar tableCounter = 0;\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass MgWithRevenueReport extends React.Component {\n groupId = { value: \"\" };\n state = {\n chargeTypeSelected: [],\n brandSelected: [],\n landloardList: [],\n occupierList: [],\n selectedValue: [],\n setSelectedValue: [],\n leaseSelected: [],\n countries: [],\n monthsArr: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n financialYear: [],\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n redirect: false,\n states: [],\n landloardCompanyList: [],\n financialYearOne: \"\",\n financialYearTwo: \"\",\n\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n\n leaseList: [],\n formResponseData: [],\n formResponseData1: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: {},\n leaseType: \"\",\n leaseTypes: [],\n initialValues: {\n brandId: [],\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n landloardName: \"\",\n landloardId: \"\",\n OccupierName: \"\",\n occupierId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n chargeTypeSelected: [],\n financialYear: \"\",\n chargeType: \"\",\n financialYearOne: \"Period 1\",\n financialYearTwo: \"Period 2\",\n landloardCompanyName: \"\",\n landloardCompanyId: \"\",\n leaseType: \"\",\n modelValue: 'All',\n modelId: 'All',\n assetTypeId: \"\",\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n\n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n initialiseAllData = () => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n\n this.state.leaseSelected = [];\n if (newValue.length == 0) {\n this.state.initialValues.leaseId = \"\";\n } else {\n this.state.initialValues.leaseId = [];\n }\n if (newValue.length > 0 && newValue[0].value == 0) {\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(this.state.leaseList[i].id);\n }\n }\n } else {\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(newValue[i].value);\n this.state.selectedValue.push(newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName = \"\";\n this.state.initialValues.assetId = \"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName = \"\";\n this.state.initialValues.assetId = \"\";\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.getAssetsListByBrand();\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName = \"\";\n this.state.initialValues.assetId = \"\";\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-revenue-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId +\n \"&leaseType=\" + this.state.leaseType + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_charge_type\") {\n this.state.initialValues.chargeTypeSelected = [];\n this.state.chargeTypeSelected = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.chargeTypeSelected.push(newValue[i].value);\n this.state.chargeTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n } else if (actionMeta == \"change_financial_yearone\") {\n //change_lease_month\n this.state.initialValues.financialYearIdOne = newValue.value;\n this.state.initialValues.financialYearOne = newValue.label;\n } else if (actionMeta == \"change_financial_yeartwo\") {\n //change_lease_month\n this.state.initialValues.financialYearIdTwo = newValue.value;\n this.state.initialValues.financialYearTwo = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard_company\") {\n this.state.initialValues.landloardCompanyId = newValue.value;\n this.state.initialValues.landloardCompanyName = newValue.label;\n } else if (actionMeta == \"lease_type\") {\n this.state.initialValues.leaseType = newValue;\n this.state.leaseType = newValue.label;\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-revenue-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId +\n \"&leaseType=\" + newValue.label + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n\n //\n fetch(\n `${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardCompanyList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n formatDate = (date) => {\n var d = new Date(date),\n month = \"\" + (d.getMonth() + 1),\n day = \"\" + d.getDate(),\n year = d.getFullYear();\n\n if (month.length < 2) month = \"0\" + month;\n if (day.length < 2) day = \"0\" + day;\n\n return [year, month, day].join(\"-\");\n };\n\n handleCalenderOnBlur = () => {\n this.state.initialValues.financialYearOne = this.formatDate(\n this.state.financialYearOne\n );\n this.state.initialValues.financialYearTwo = this.formatDate(\n this.state.financialYearTwo\n );\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"}\n {getUserType() == \"Occupier\" ? \"Expense\" : \"Revenue\"}\n \n \n
\n \n
\n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.leaseSelected = [];\n this.state.initialValues.chargeTypeSelected = [];\n this.state.chargeTypeSelected = [];\n this.state.financialYearOne = \"\";\n this.state.financialYearTwo = \"\";\n this.state.counter = Math.random();\n this.setState({});\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.initialiseAllData();\n\n }}\n onSubmit={(values, actions) => {\n if (!this.validator.allValid()) {\n this.validator.showMessages();\n return false;\n }\n values.groupId = this.state.initialValues.groupId;\n\n var brand_id = this.state.initialValues.brandId;\n var asset_id = this.state.initialValues.assetId;\n var form_config = this.state.initialValues;\n\n form_config.expiry_status = true;\n\n var counter = this.state.counter + 1;\n console.log(counter, \"counter\", form_config);\n\n this.setState({ selectedBrand: brand_id });\n this.setState({ selectedAsset: asset_id });\n this.setState({ formConfig: form_config });\n var prm = Object.entries(form_config)\n .map(([key, val]) => `${key}=${val}`)\n .join(\"&\");\n this.state.formResponseData = [];\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n this.setState({ counter: counter });\n this.setState({\n exportUrl:\n `${apiUrl.apiUrl.url}/expense-report/fetch-revenue-details?export=true&` +\n prm,\n });\n /*\n fetch(\n `${apiUrl.apiUrl.url}/expense-report/fetch-revenue-details?` + prm,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //this.setState({ });\n tableCounter = 0;\n this.setState({\n formResponseData: data.data,\n monthsArr: data.monthsArr,\n });\n this.setState({ counter: counter });\n this.setState({\n exportUrl:\n `${apiUrl.apiUrl.url}/expense-report/fetch-revenue-details?export=true&` +\n prm,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n */\n\n form_config = undefined;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n
\n );\n }\n}\n\nexport default withRouter(MgWithRevenueReport);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport styled from \"styled-components\";\nimport { faUndo, faEye, faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport RevenueTable from \"./RevenueTable\";\nimport axios from \"axios\";\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType } from \"../../utils/index\";\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n\n //stateId: Yup.string().required(\"Required\"),\n //districtId: Yup.string().required(\"Required\"),\n //cityId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // brandId: Yup.number().required(\"Required\"),\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n\n // stateId: Yup.string().required(\"Required\"),\n // districtId: Yup.string().required(\"Required\"),\n // cityId: Yup.string().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n });\n}\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n//const [selectedValue, setSelectedValue] = useState([]);\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nlet financialYear = [];\n// var i = 0; let currentYear = new Date().getFullYear();\n// financialYear.push({ id: (currentYear + 1) , value: (currentYear ) + \"-\" + (currentYear + 1) })\n// for (; i <= 10; i++) {\n// financialYear.push({ id: currentYear , value: (currentYear - 1) + \"-\" + currentYear });\n// --currentYear;\n// }\n\nvar tableCounter = 0;\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass RevenueReport extends React.Component {\n groupId = { value: \"\" };\n state = {\n chargeTypeSelected: [],\n brandSelected: [],\n landloardList: [],\n occupierList: [],\n selectedValue: [],\n setSelectedValue: [],\n leaseSelected: [],\n countries: [],\n monthsArr: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n financialYear: [],\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n redirect: false,\n states: [],\n landloardCompanyList: [],\n financialYearOne: \"\",\n financialYearTwo: \"\",\n\n\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n\n leaseList: [],\n formResponseData: [],\n formResponseData1: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: {},\n leaseType: \"\",\n leaseTypes: [],\n initialValues: {\n brandId: [],\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n landloardName: \"\",\n landloardId: \"\",\n OccupierName: \"\",\n occupierId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n chargeTypeSelected: [],\n financialYear: \"\",\n chargeType: \"\",\n financialYearOne: \"Period 1\",\n financialYearTwo: \"Period 2\",\n landloardCompanyName: \"\",\n landloardCompanyId: \"\",\n leaseType: \"\",\n modelValue: 'All',\n modelId: 'All',\n assetTypeId: \"\"\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n \n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n initialiseAllData = () => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n\n this.state.leaseSelected = [];\n if (newValue.length == 0) {\n this.state.initialValues.leaseId = \"\";\n } else {\n this.state.initialValues.leaseId = [];\n }\n if (newValue.length > 0 && newValue[0].value == 0) {\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(this.state.leaseList[i].id);\n }\n }\n } else {\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(newValue[i].value);\n this.state.selectedValue.push(newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-revenue-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId +\n \"&leaseType=\" + this.state.leaseType + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_charge_type\") {\n this.state.initialValues.chargeTypeSelected = [];\n this.state.chargeTypeSelected = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.chargeTypeSelected.push(newValue[i].value);\n this.state.chargeTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n } else if (actionMeta == \"change_financial_yearone\") {\n //change_lease_month\n this.state.initialValues.financialYearIdOne = newValue.value;\n this.state.initialValues.financialYearOne = newValue.label;\n } else if (actionMeta == \"change_financial_yeartwo\") {\n //change_lease_month\n this.state.initialValues.financialYearIdTwo = newValue.value;\n this.state.initialValues.financialYearTwo = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard_company\") {\n this.state.initialValues.landloardCompanyId = newValue.value;\n this.state.initialValues.landloardCompanyName = newValue.label;\n } else if (actionMeta == \"lease_type\") {\n this.state.initialValues.leaseType = newValue;\n this.state.leaseType = newValue.label;\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-revenue-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId +\n \"&leaseType=\" + newValue.label + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n\n //\n fetch(\n `${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardCompanyList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n formatDate = (date) => {\n var d = new Date(date),\n month = \"\" + (d.getMonth() + 1),\n day = \"\" + d.getDate(),\n year = d.getFullYear();\n\n if (month.length < 2) month = \"0\" + month;\n if (day.length < 2) day = \"0\" + day;\n\n return [year, month, day].join(\"-\");\n };\n\n handleCalenderOnBlur = () => {\n this.state.initialValues.financialYearOne = this.formatDate(\n this.state.financialYearOne\n );\n this.state.initialValues.financialYearTwo = this.formatDate(\n this.state.financialYearTwo\n );\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"} MG Revenue\n \n \n
\n \n
\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"} Lockin\n {getUserType() == \"Occupier\" ? \" Expense\" : \" Revenue\"}\n \n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"} MG Higher Than Revenue\n \n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"}\n {getUserType() == \"Occupier\" ? \"Escalation\" : \"Escalation\"}\n \n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Leasing Tracker\n \n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Compliance Report\n \n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Franchisee Report\n \n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Clauses Report\n \n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n this.state.brandSelected = [];\n this.state.leaseSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.formResponseData = [];\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n values.groupId = this.state.initialValues.groupId;\n\n var brand_id = this.state.initialValues.brandId;\n var asset_id = this.state.initialValues.assetId;\n var form_config = this.state.initialValues;\n\n form_config.expiry_status = true;\n\n var counter = this.state.counter + 1;\n //form_config['export'] = 'true';\n console.log(counter, \"counter\", form_config);\n this.setState({ counter: counter });\n\n this.setState({ selectedBrand: brand_id });\n this.setState({ selectedAsset: asset_id });\n this.setState({ formConfig: form_config });\n var prm = Object.entries(form_config)\n .map(([key, val]) => `${key}=${val}`)\n .join(\"&\");\n this.state.formResponseData = [];\n //FetchSalesDetailView\n fetch(`${apiUrl.apiUrl.url}/sales-input/fetch-sales-detail-view?` + prm, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //this.setState({ });\n tableCounter = 0;\n\n console.log(data, \"datata\");\n\n this.setState({\n formResponseData: data.data,\n tableColumns: data.columns,\n colKeys: data.col_keys,\n //initialForecast:data.forecasteDetails\n });\n\n //var prm = Object.entries(form_config).map(([key, val]) => `${key}=${val}`).join('&');\n //this.state.exportUrl = `${apiUrl.apiUrl.url}/sales-input/fetch-sales-view?export=true&` + prm;\n\n this.setState({\n exportUrl:\n `${apiUrl.apiUrl.url}/sales-input/fetch-sales-detail-view?export=true&` +\n prm,\n });\n\n //this.state.initialForecast.year = data.year\n })\n .catch((error) => {\n console.log(error);\n });\n\n form_config = undefined;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n
\n );\n }\n}\n\nexport default withRouter(LeaseReportSalesView);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\n//import Table from \"./Table\";\nimport axios from \"axios\";\nimport Table from \"./LeaseListingTable\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport styled from \"styled-components\";\nimport {\n faPen,\n faPlus,\n faSave,\n faTimes,\n faUndo,\n faFileExcel,\n faEye,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\n//import Select from \"react-select\";\n\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType } from \"../../utils/index\";\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n //stateId: Yup.string().required(\"Required\"),\n //districtId: Yup.string().required(\"Required\"),\n //cityId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // brandId: Yup.number().required(\"Required\"),\n leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n // stateId: Yup.string().required(\"Required\"),\n // districtId: Yup.string().required(\"Required\"),\n // cityId: Yup.string().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({\n leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n });\n}\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// leaseId: Yup.array().required(\"Required\"),\n// financialYearOne: Yup.string().required(\"Required\"),\n// financialYearTwo: Yup.string().required(\"Required\"),\n// dataUomId: Yup.string().required(\"Required\"),\n// });\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n//const [selectedValue, setSelectedValue] = useState([]);\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nlet financialYear = [];\n// var i = 0; let currentYear = new Date().getFullYear();\n// financialYear.push({ id: (currentYear + 1) , value: (currentYear ) + \"-\" + (currentYear + 1) })\n// for (; i <= 10; i++) {\n// financialYear.push({ id: currentYear , value: (currentYear - 1) + \"-\" + currentYear });\n// --currentYear;\n// }\n\nvar tableCounter = 0;\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass LeaseReportSalesComparison extends React.Component {\n groupId = { value: \"\" };\n state = {\n brandSelected: [],\n selectedValue: [],\n setSelectedValue: [],\n leaseSelected: [],\n landloardList: [],\n occupierList: [],\n countries: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n financialYear: [],\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n redirect: false,\n states: [],\n\n\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n\n leaseList: [],\n tableColumns: [],\n formResponseData: [],\n formResponseData1: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: {},\n leaseTypes: [],\n initialValues: {\n brandId: [],\n countryId: \"\",\n countryName: \"\",\n stateId: \"\",\n districtId: \"\",\n landloardName: \"\",\n landloardId: \"\",\n OccupierName: \"\",\n occupierId: \"\",\n cityId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n financialYear: \"\",\n dataUomId: \"Per Month\",\n dataUOMName: \"Per Month\",\n financialYearOne: \"Period 1\",\n financialYearTwo: \"Period 2\",\n modelValue: 'All',\n modelId: 'All',\n assetTypeId: \"\",\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n \n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n }\n\n initialiseAllData = () => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n this.state.initialValues.leaseId = [];\n this.state.leaseSelected = [];\n\n if (typeof newValue[0] == \"undefined\") {\n this.state.initialValues.leaseId = \"\";\n this.setState({})\n } else if (newValue.length == 1 && newValue[0].value == 0) {\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(this.state.leaseList[i].id);\n }\n }\n } else {\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(newValue[i].value);\n this.state.selectedValue.push(newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-financial-years?leaseId=` +\n this.state.initialValues.leaseId, { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n financialYear: data.fianancialYears,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetTypes();\n\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n this.state.leaseSelected = [];\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_uom\") {\n //change_lease_month\n this.state.initialValues.dataUomId = newValue.value;\n this.state.initialValues.dataUOMName = newValue.label;\n\n console.log(this.state.initialValues, \"initial valuyes\");\n } else if (actionMeta == \"change_financial_yearone\") {\n //change_lease_month\n this.state.initialValues.financialYearIdOne = newValue.value;\n this.state.initialValues.financialYearOne = newValue.label;\n } else if (actionMeta == \"change_financial_yeartwo\") {\n //change_lease_month\n this.state.initialValues.financialYearIdTwo = newValue.value;\n this.state.initialValues.financialYearTwo = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n\n\n \n
\n - \n
- Reports \n
- \n Sale View - Lease\n \n
\n \n
\n )}\n \n\n \n
\n \n
\n \n
\n \n {this.state.formResponseData.length > 0 && (\n \n \n \n \n )}\n\n
\n \n \n \n
\n
\n\n | {i} | \n );\n })\n }\n|||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {i['sr_no']} | \n{i['assetName']} | \n{i['brandName']} | \n{i['leaseName']} | \n{i['grossLeasebleArea']} | \n{i['type']} | \n{i['fy']} | \n{i['Apr'] || 0} | \n{i['May'] || 0} | \n{i['Jun'] || 0} | \n{i['Jul'] || 0} | \n{i['Aug'] || 0} | \n{i['Sep'] || 0} | \n{i['Oct'] || 0} | \n{i['Nov'] || 0} | \n{i['Dec'] || 0} | \n{i['Jan'] || 0} | \n{i['Feb'] || 0} | \n{i['Mar'] || 0} | \n{i['total'] || 0} | \n
| Nothing to show..... | \n
\n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Sales View - Portfolio\n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {/*
\n \n );\n }\n}\n\nexport default withRouter(LeaseReportSalesComparison);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faEye, faUndo, faDownload, faFileExcel, faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport ReactTooltip from \"react-tooltip\";\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nlet colors = [\n \"#b8ebfe\",\n \"#259ebd\",\n \"#4091c8\",\n \"#98cd34\",\n \"#b56ee8\",\n \"#7fd9bf\",\n \"#ffb494\",\n \"#fed794\",\n \"#ca3763\",\n];\n\nclass StackingPlan extends React.Component {\n groupId = { value: \"\" };\n\n state = {\n toggleToActualSize: false,\n tenantNames: [],\n maxGla: \"\",\n stackingPlanData: {},\n selectedTowerId: \"\",\n url: `${apiUrl.apiUrl.url}/lease-report`,\n LandlordGroups: [],\n subAssetNameValues: [],\n tower: [],\n\n landloardList: [],\n occupierList: [],\n countries: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n leaseList: [],\n leaseDocumentTypeList: [],\n brandSelected: [],\n leaseSelected: [],\n redirect: false,\n states: [],\n zones: [],\n redirect: false,\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n currentDocument: \"\",\n pageNo: 1,\n initialValues: {\n brandId: \"\",\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n brandCatId: \"\",\n landloardName: \"\",\n landloardId: \"\",\n OccupierName: \"\",\n occupierId: \"\",\n leaseDocumentTypeId: \"All\",\n leaseId: \"\",\n leaseNumber: \"\",\n subAssetName: \"\",\n tower: \"\",\n assetTypeId: \"\",\n\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n }\n\n initialiseAllData=()=>{\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-view/get-lease-document-type`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseDocumentTypeList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeAsset = (e) => {\n let assetId = e.value;\n //fetch(`${apiUrl.apiUrl.url}/sub-assets/asset-sub-assets/` + assetId,{headers})\n fetch(`${apiUrl.apiUrl.url}/asset/asset-sub-assets?id=` + assetId, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //let assetFromApi = Object.keys(data);\n\n this.setState({\n subAssetNameValues: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n changeSubAsset = (e) => {\n let subAssetId = e.target.value;\n fetch(`${apiUrl.apiUrl.url}/asset/sub-asset-towers?id=` + subAssetId, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n tower: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n\n this.state.initialValues.brandId = \"\";\n this.state.initialValues.brandName = \"\";\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n //brandName\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n \n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_number\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n // this.state.initialValues.leaseId = newValue.value;\n // this.state.initialValues.leaseValue = newValue.label;\n this.state.leaseSelected = [];\n if (newValue.length == 0) {\n this.state.initialValues.leaseId = \"\";\n console.log(\"going to set\");\n //this.setState({});\n }\n if (typeof newValue[0] == \"undefined\") {\n this.state.initialValues.leaseId = \"\";\n this.setState({});\n } else if (newValue.length == 1 && newValue[0].value == 0) {\n this.state.initialValues.leaseId = [];\n\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(\n \"\" + this.state.leaseList[i].id\n );\n }\n }\n } else {\n this.state.initialValues.leaseId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(\"\" + newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n this.setState({});\n } else if (actionMeta == \"change_document_type\") {\n //\n this.state.initialValues.leaseDocumentTypeId = newValue.value;\n this.state.initialValues.leaseDocumentTypeId = newValue.label;\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n };\n\n getColour = () => Math.floor(Math.random() * 16777215).toString(16);\n\n toggelToActualSize(e) {\n console.log(e.target.checked, \"val\");\n this.setState({ toggleToActualSize: e.target.checked });\n }\n\n downloadStack = () => {\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url + '/rent-calculation/get-stacking-plan?towerId=' + this.state.selectedTowerId + '&export=true&sendLink=true'}`,\n data: {}\n }).then(function (response) {\n window.location.href = `${apiUrl.apiUrl.url + '/lease-report/download-file?path=' + response.data}`;\n });\n }\n\n createLi(k, v, key) {\n let colorCode;\n let _width = (this.state.stackingPlanData[key][k].gla / this.state.maxGla) * 100;\n // if(! this.state.toggleToActualSize){\n // _width = 350;\n // }\n\n if (\n this.state.tenantNames[this.state.stackingPlanData[key][k].tenant_name] ==\n undefined\n ) {\n colorCode = \"#\" + this.getColour();\n let _tenantNames = this.state.tenantNames;\n _tenantNames[this.state.stackingPlanData[key][k].tenant_name] = colorCode;\n this.setState({ tenantNames: _tenantNames });\n } else {\n colorCode =\n this.state.tenantNames[this.state.stackingPlanData[key][k].tenant_name];\n }\n\n let rentString = \"₹: \" + this.state.stackingPlanData[key][k].rent + \" psf\";\n\n if (this.state.stackingPlanData[key][k].unit_status === \"Vacant\") {\n rentString = \"\";\n }\n\n return (\n */}\n
*/}\n \n
\n {/* \n {this.state.formResponseData.length > 0 && (\n \n \n \n \n )}\n
\n \n \n \n
\n
\n\n | {i} | \n );\n })\n }\n||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {i['sr_no']} | \n{i['assetName']} | \n{i['brandName']} | \n{i['leaseName']} | \n{i['grossLeasebleArea']} | \n{i['costCenter']} | \n\n{i['type']} | \n{i['fy']} | \n{i['Apr'] || 0} | \n{i['May'] || 0} | \n{i['Jun'] || 0} | \n{i['Jul'] || 0} | \n{i['Aug'] || 0} | \n{i['Sep'] || 0} | \n{i['Oct'] || 0} | \n{i['Nov'] || 0} | \n{i['Dec'] || 0} | \n{i['Jan'] || 0} | \n{i['Feb'] || 0} | \n{i['Mar'] || 0} | \n{i['total'] || 0} | \n
| Nothing to show..... | \n
\" +\n \"\" +\n this.state.stackingPlanData[key][k].gla +\n \" sq.ft\"\n }\n data-iscapture=\"true\"\n className={this.state.toggleToActualSize ? 'unit1' : 'unit1 minWidthLi'}\n style={{\n width: this.state.toggleToActualSize ? _width + \"%\" : \"350px\",\n // minWidth:_width + \"px\",\n backgroundColor:\n this.state.stackingPlanData[key][k].unit_status === \"Vacant\"\n ? \"#dedede\"\n : colorCode,\n }}\n >\n {this.state.stackingPlanData[key][k].unit_status === \"Vacant\" ? \"Vacant\" : this.state.stackingPlanData[key][k].tenant_name\n .split(\" \")\n .slice(0, 2)\n .join(\" \")}{\" \"}\n {\n this.state.stackingPlanData[key][k].unit_status !== \"Vacant\" && ( ₹: {this.state.stackingPlanData[key][k].rent} psf)\n }\n ( {this.state.stackingPlanData[key][k].gla} sft)\n \n );\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return
\n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Stacking Plan\n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n \n \n\n \n\n
\n\n \n\n
\n \n );\n }\n}\n\nexport default withRouter(StackingPlan);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport styled from \"styled-components\";\nimport { faUndo, faEye, faDownload, faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport axios from \"axios\";\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport RevenueTable from \"./RevenueTable\";\n\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType, fileUploadPath } from \"../../utils/index\";\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n\n //stateId: Yup.string().required(\"Required\"),\n //districtId: Yup.string().required(\"Required\"),\n //cityId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // brandId: Yup.number().required(\"Required\"),\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n\n // stateId: Yup.string().required(\"Required\"),\n // districtId: Yup.string().required(\"Required\"),\n // cityId: Yup.string().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n });\n}\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n//const [selectedValue, setSelectedValue] = useState([]);\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nlet financialYear = [];\n// var i = 0; let currentYear = new Date().getFullYear();\n// financialYear.push({ id: (currentYear + 1) , value: (currentYear ) + \"-\" + (currentYear + 1) })\n// for (; i <= 10; i++) {\n// financialYear.push({ id: currentYear , value: (currentYear - 1) + \"-\" + currentYear });\n// --currentYear;\n// }\n\nconst uploadFromFrm = Yup.object().shape({\n myfile: Yup.string().required(\"Required\"),\n});\n\n\nvar tableCounter = 0;\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass ChargeReceiptUpload extends React.Component {\n groupId = { value: \"\" };\n state = {\n exportBtn: false,\n selectedFile: '',\n chargeTypeSelected: [],\n brandSelected: [],\n landloardList: [],\n occupierList: [],\n selectedValue: [],\n setSelectedValue: [],\n leaseSelected: [],\n countries: [],\n monthsArr: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n financialYear: [],\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n redirect: false,\n states: [],\n landloardCompanyList: [],\n financialYearOne: \"\",\n financialYearTwo: \"\",\n\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n\n leaseList: [],\n formResponseData: [],\n formResponseData1: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: {},\n leaseType: \"\",\n leaseTypes: [],\n initialValues: {\n brandId: [],\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n landloardName: \"\",\n landloardId: \"\",\n OccupierName: \"\",\n occupierId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n chargeTypeSelected: [],\n financialYear: \"\",\n chargeType: \"\",\n financialYearOne: \"Period 1\",\n financialYearTwo: \"Period 2\",\n landloardCompanyName: \"\",\n landloardCompanyId: \"\",\n leaseType: \"\",\n modelValue: 'All',\n modelId: 'All',\n assetTypeId: \"\",\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n \n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n initialiseAllData = () => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value,\n {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value)\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n\n this.state.leaseSelected = [];\n if (newValue.length == 0) {\n this.state.initialValues.leaseId = \"\";\n } else {\n this.state.initialValues.leaseId = [];\n }\n if (newValue.length > 0 && newValue[0].value == 0) {\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(this.state.leaseList[i].id);\n }\n }\n } else {\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(newValue[i].value);\n this.state.selectedValue.push(newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-revenue-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId +\n \"&leaseType=\" + this.state.leaseType + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_charge_type\") {\n this.state.initialValues.chargeTypeSelected = [];\n this.state.chargeTypeSelected = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.chargeTypeSelected.push(newValue[i].value);\n this.state.chargeTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n } else if (actionMeta == \"change_financial_yearone\") {\n //change_lease_month\n this.state.initialValues.financialYearIdOne = newValue.value;\n this.state.initialValues.financialYearOne = newValue.label;\n } else if (actionMeta == \"change_financial_yeartwo\") {\n //change_lease_month\n this.state.initialValues.financialYearIdTwo = newValue.value;\n this.state.initialValues.financialYearTwo = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard_company\") {\n this.state.initialValues.landloardCompanyId = newValue.value;\n this.state.initialValues.landloardCompanyName = newValue.label;\n } else if (actionMeta == \"lease_type\") {\n this.state.initialValues.leaseType = newValue;\n this.state.leaseType = newValue.label;\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-revenue-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId +\n \"&leaseType=\" + newValue.label + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n\n //\n fetch(\n `${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardCompanyList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n onFileChange = (event) => {\n // Update the state\n this.setState({ selectedFile: event.target.files[0] });\n };\n\n cancelForm = () => {\n this.setState({ exportBtn: false });\n }\n\n onFileUpload = () => {\n // Create an object of formData\n const formData = new FormData();\n\n console.log(formData, \"formData\", this.state.selectedFile);\n\n if (typeof this.state.selectedFile == \"undefined\" || typeof this.state.selectedFile.name == \"undefined\") {\n alert(\"Please upload file to process\");\n return true;\n }\n\n var ths = this;\n\n // Update the formData object\n formData.append(\n \"myFile\",\n this.state.selectedFile,\n this.state.selectedFile.name\n );\n\n //formData.append(\"dateAsOn\", this.state.initialValues.dateAsOn);\n\n // Request made to the backend api\n // Send formData object\n axios\n .post(`${apiUrl.apiUrl.url}/charge-receipt/upload`, formData)\n .then(function (response) {\n console.log(response, \"response\");\n if (response.data.success) {\n alert(\"Form processed successfully.\");\n ths.setState({ exportBtn: false });\n }\n });\n };\n\n formatDate = (date) => {\n var d = new Date(date),\n month = \"\" + (d.getMonth() + 1),\n day = \"\" + d.getDate(),\n year = d.getFullYear();\n\n if (month.length < 2) month = \"0\" + month;\n if (day.length < 2) day = \"0\" + day;\n\n return [year, month, day].join(\"-\");\n };\n\n handleCalenderOnBlur = () => {\n this.state.initialValues.financialYearOne = this.formatDate(\n this.state.financialYearOne\n );\n this.state.initialValues.financialYearTwo = this.formatDate(\n this.state.financialYearTwo\n );\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n \n\n
\n - \n {Object.keys(this.state.stackingPlanData).map(function (key) {\n return
- {key} ;\n })}\n
\n {Object.keys(this.state.stackingPlanData).map(\n (key, value) => (\n
\n - \n
\n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"} Rent Receipt Upload\n \n \n
\n \n
\n \n )}\n \n {this.state.exportBtn && (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"} Rent Receipt Upload\n \n \n
\n \n
\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Finance \n
- \n \n Input File\n \n \n
\n \n
\n \n )}\n \n {this.state.exportBtn && (\n \n
\n );\n};\n\nexport default DynamicForm;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport styled from \"styled-components\";\nimport { faUndo, faEye, faDownload, faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { Modal } from \"react-bootstrap\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport axios from \"axios\";\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport RevenueTable from \"./RevenueTable\";\n\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType, fileUploadPath } from \"../../utils/index\";\nimport PaymentUploadForm from \"./PaymentUploadForm\"\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n\n //stateId: Yup.string().required(\"Required\"),\n //districtId: Yup.string().required(\"Required\"),\n //cityId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // brandId: Yup.number().required(\"Required\"),\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n\n // stateId: Yup.string().required(\"Required\"),\n // districtId: Yup.string().required(\"Required\"),\n // cityId: Yup.string().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({\n // leaseId: Yup.number().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n });\n}\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n//const [selectedValue, setSelectedValue] = useState([]);\n\nconst modalStyle = {\n maxHeight: '80vh', // Set a max height for the modal\n overflowY: 'auto', // Enable vertical scrolling\n overflowX: 'hidden', // Hide horizontal scrolling if necessary\n padding: '20px', // Add some padding\n backgroundColor: 'white', // Background color for the modal\n borderRadius: '8px', // Rounded corners for the modal\n boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)', // Add shadow for depth\n position: 'relative', // Position relative for inner content\n zIndex: 1000, // Ensure it appears above other content\n};\n\nconst overlayStyle = {\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n backgroundColor: 'rgba(0, 0, 0, 0.5)', // Dark overlay\n zIndex: 999, // Under the modal but above other content\n};\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nlet financialYear = [];\n// var i = 0; let currentYear = new Date().getFullYear();\n// financialYear.push({ id: (currentYear + 1) , value: (currentYear ) + \"-\" + (currentYear + 1) })\n// for (; i <= 10; i++) {\n// financialYear.push({ id: currentYear , value: (currentYear - 1) + \"-\" + currentYear });\n// --currentYear;\n// }\n\nconst uploadFromFrm = Yup.object().shape({\n myfile: Yup.string().required(\"Required\"),\n});\n\n\nvar tableCounter = 0;\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass FinancePayment extends React.Component {\n groupId = { value: \"\" };\n state = {\n exportBtn: false,\n counter : 0,\n viewModal: false,\n columns:[],\n formData :[],\n updalodData: [],\n selectedFile: '',\n chargeTypeSelected: [],\n brandSelected: [],\n landloardList: [],\n occupierList: [],\n selectedValue: [],\n setSelectedValue: [],\n leaseSelected: [],\n countries: [],\n monthsArr: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n financialYear: [],\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n redirect: false,\n states: [],\n landloardCompanyList: [],\n financialYearOne: \"\",\n financialYearTwo: \"\",\n\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n\n leaseList: [],\n formResponseData: [],\n formResponseData1: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: {},\n leaseType: \"\",\n leaseTypes: [],\n initialValues: {\n brandId: [],\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n landloardName: \"\",\n landloardId: \"\",\n OccupierName: \"\",\n occupierId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n chargeTypeSelected: [],\n financialYear: \"\",\n chargeType: \"\",\n financialYearOne: \"Period 1\",\n financialYearTwo: \"Period 2\",\n landloardCompanyName: \"\",\n landloardCompanyId: \"\",\n leaseType: \"\",\n modelValue: 'All',\n modelId: 'All',\n assetTypeId: \"\",\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n \n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n initialiseAllData = () => {\n fetch(`${apiUrl.apiUrl.url}/countries`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-occupier-landloard`, {\n headers,\n })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardList: data.landloardList,\n occupierList: data.occupierList,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, {headers}\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n\n this.state.leaseSelected = [];\n if (newValue.length == 0) {\n this.state.initialValues.leaseId = \"\";\n } else {\n this.state.initialValues.leaseId = [];\n }\n if (newValue.length > 0 && newValue[0].value == 0) {\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(this.state.leaseList[i].id);\n }\n }\n } else {\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(newValue[i].value);\n this.state.selectedValue.push(newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_type\") {\n\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-revenue-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId +\n \"&leaseType=\" + this.state.leaseType + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_charge_type\") {\n this.state.initialValues.chargeTypeSelected = [];\n this.state.chargeTypeSelected = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.chargeTypeSelected.push(newValue[i].value);\n this.state.chargeTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n } else if (actionMeta == \"change_financial_yearone\") {\n //change_lease_month\n this.state.initialValues.financialYearIdOne = newValue.value;\n this.state.initialValues.financialYearOne = newValue.label;\n } else if (actionMeta == \"change_financial_yeartwo\") {\n //change_lease_month\n this.state.initialValues.financialYearIdTwo = newValue.value;\n this.state.initialValues.financialYearTwo = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else if (actionMeta == \"change_occupier\") {\n //brandName\n this.state.initialValues.occupierId = newValue.value;\n this.state.initialValues.occupierName = newValue.label;\n } else if (actionMeta == \"change_landloard_company\") {\n this.state.initialValues.landloardCompanyId = newValue.value;\n this.state.initialValues.landloardCompanyName = newValue.label;\n } else if (actionMeta == \"lease_type\") {\n this.state.initialValues.leaseType = newValue;\n this.state.leaseType = newValue.label;\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-revenue-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId +\n \"&leaseType=\" + newValue.label + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_landloard\") {\n //brandName\n this.state.initialValues.landloardId = newValue.value;\n this.state.initialValues.landloardName = newValue.label;\n\n //\n fetch(\n `${apiUrl.apiUrl.url}/landlord/get-group-companies/?id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n landloardCompanyList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?all=true&brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n onFileChange = (event) => {\n // Update the state\n this.setState({ selectedFile: event.target.files[0] });\n };\n\n cancelForm = () => {\n this.setState({ exportBtn: false });\n }\n\n onFileUpload = () => {\n // Create an object of formData\n const formData = new FormData();\n\n console.log(formData, \"formData\", this.state.selectedFile);\n\n if (typeof this.state.selectedFile == \"undefined\" || typeof this.state.selectedFile.name == \"undefined\") {\n alert(\"Please upload file to process\");\n return true;\n }\n\n var ths = this;\n\n // Update the formData object\n formData.append(\n \"myFile\",\n this.state.selectedFile,\n this.state.selectedFile.name\n );\n\n console.log(this.state.formConfig.financialYearOne,'Year');\n\n //formData.append(\"dateAsOn\", this.state.initialValues.dateAsOn);\n\n // Request made to the backend api\n // Send formData object\n axios\n .post(`${apiUrl.apiUrl.url}/finance-report/payment-upload?date=${this.state.formConfig.financialYearOne}`, formData)\n .then(function (response) {\n console.log(response, \"response\");\n if (response.data.success) {\n alert(\"Form processed successfully.\");\n ths.setState({ exportBtn: false });\n }\n });\n };\n\n formatDate = (date) => {\n var d = new Date(date),\n month = \"\" + (d.getMonth() + 1),\n day = \"\" + d.getDate(),\n year = d.getFullYear();\n\n if (month.length < 2) month = \"0\" + month;\n if (day.length < 2) day = \"0\" + day;\n\n return [year, month, day].join(\"-\");\n };\n\n handleCalenderOnBlur = () => {\n this.state.initialValues.financialYearOne = this.formatDate(\n this.state.financialYearOne\n );\n this.state.initialValues.financialYearTwo = this.formatDate(\n this.state.financialYearTwo\n );\n };\n\n handleModalClose = () => {\n this.setState({ viewModal : false });\n }\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n \n \n
\n \n
\n | \n \n {column.label}\n \n | \n ))}\n
|---|
| \n {column.editable ? (\n {row[column.key] || \"\"} \n )}\n | \n ))}\n
\n
\n \n \n
\n {textContent}
\n\n
\n \n \n \n
\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Finance \n
- \n \n Payment File\n \n \n
\n \n
\n \n )}\n \n\n {\n this.state.viewModal && (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Finance \n
- \n \n Payment Reconciliation\n \n \n
\n \n
\n \n )}\n \n {this.state.exportBtn && (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"}\n Outflow\n \n \n
\n \n
\n\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.exportBtn = false;\n this.state.formResponseData.forecasteDetails.forecast = [];\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n values.groupId = this.state.initialValues.groupId;\n\n var brand_id = this.state.initialValues.brandId;\n var asset_id = this.state.initialValues.assetId;\n var form_config = this.state.initialValues;\n\n form_config.expiry_status = true;\n\n var counter = this.state.counter + 1;\n console.log(counter, \"counter\");\n this.setState({ counter: counter });\n\n this.setState({ selectedBrand: brand_id });\n this.setState({ selectedAsset: asset_id });\n this.setState({ formConfig: form_config });\n var prm = Object.entries(form_config)\n .map(([key, val]) => `${key}=${val}`)\n .join(\"&\");\n this.state.formResponseData = [];\n\n fetch(`${apiUrl.apiUrl.url}/voucher/fetch-voucher-input?` + prm, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //this.setState({ });\n this.setState({\n formResponseData: data,\n initialForecast: data.forecasteDetails,\n });\n\n this.state.initialForecast.leaseId = data.lease_id;\n this.state.initialForecast.year = data.year;\n\n this.setState({\n exportBtn: true,\n exportUrl:\n `${apiUrl.apiUrl.url}/voucher/fetch-voucher-input?export=true&reportType=forecast&` +\n prm,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n form_config = undefined;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n {\n this.setState({\n //formResponseData: data,\n initialForecast: this.state.formResponseData.forecasteDetails,\n });\n }}\n onSubmit={(values, actions) => {\n console.log(\"form submitting..\", values);\n var self = this;\n var formPostData = {};\n\n formPostData[\"leaseId\"] = this.state.initialForecast.leaseId;\n formPostData[\"year\"] = this.state.initialForecast.year;\n formPostData[\"forecasteDetails\"] = values.forecast;\n\n console.log(formPostData, \":formPostData\");\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/voucher/create-input-sales`,\n data: formPostData,\n }).then(function (response) {\n if (!response.data.success) {\n actions.setSubmitting(false);\n actions.setErrors(response.data);\n } else {\n // alert(\"Data Saved Successfully\");\n //self.setState({ redirect: true });\n self.setState({\n messsagePopup: true,\n popupContent: 'Data Saved Successfully'\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n {\n values.leaseDocumentUrl =\n fileUploadPath() +\n this.props.match.params.id +\n \"/\" +\n this.state.fileName;\n console.log(values);\n var self = this;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n \n )}\n \n )}\n
\n );\n }\n}\n\nexport default withRouter(LeaseVoucherForecast);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport axios from \"axios\";\nimport DatePicker from \"react-datepicker\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faChevronRight,\n faEye,\n faPen,\n faPlus,\n faSave,\n faTimes,\n faUndo,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Popup from \"reactjs-popup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport SimpleReactValidator from \"simple-react-validator\";\n//import Select from \"react-select\";\n\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType, fileUploadPath } from \"../../utils/index\";\n\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n // assetId: Yup.string().required(\"Required\"),\n leaseId: Yup.string().required(\"Required\"),\n //financialYear: Yup.string().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n financialYearTwo: Yup.string().required(\"Required\"),\n\n dataUomId: Yup.string().required(\"Required\"),\n //stateId: Yup.string().required(\"Required\"),\n //districtId: Yup.string().required(\"Required\"),\n //cityId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n // fbrandId: Yup.number().required(\"Required\"),\n leaseId: Yup.string().required(\"Required\"),\n ///financialYear: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n // stateId: Yup.string().required(\"Required\"),\n // districtId: Yup.string().required(\"Required\"),\n // cityId: Yup.string().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({\n leaseId: Yup.string().required(\"Required\"),\n //financialYear: Yup.string().required(\"Required\"),\n dataUomId: Yup.string().required(\"Required\"),\n });\n}\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// leaseId: Yup.string().required(\"Required\"),\n// financialYear: Yup.string().required(\"Required\"),\n// dataUomId: Yup.string().required(\"Required\"),\n// });\n\nconst uploadFromFrm = Yup.object().shape({\n myfile: Yup.string().required(\"Required\"),\n});\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nlet financialYear = [];\n// var i = 0; let currentYear = new Date().getFullYear();\n// financialYear.push({ id: (currentYear + 1) , value: (currentYear ) + \"-\" + (currentYear + 1) })\n// for (; i <= 10; i++) {\n// financialYear.push({ id: currentYear , value: (currentYear - 1) + \"-\" + currentYear });\n// --currentYear;\n// }\n\nclass LeaseGiftVoucherActual extends React.Component {\n groupId = { value: \"\" };\n state = {\n brandSelected: [],\n countries: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n financialYear: [],\n exportBtn: false,\n assetsList: [],\n assetTypeList: [],\n assetTypeSelected: [],\n leaseTypes: [],\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n popupalertMessage: false,\n popupMessageContent: '',\n states: [],\n financialYearOne: \"\",\n financialYearTwo: \"\",\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n\n leaseList: [],\n formResponseData: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: {},\n initialValues: {\n brandId: [],\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n assetTypeId: \"\",\n financialYear: \"\",\n dataUomId: \"Per Month\",\n dataUOMName: \"Per Month\",\n modelValue: 'All',\n modelId: 'All'\n },\n };\n\n componentDidMount() {\n this.initialiseAllData();\n \n }\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n }\n\n initialiseAllData = () => {\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/fetch-lease-types`, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n\n\n this.getAssetsList(\"\", \"\", true);\n this.getAssetTypes();\n }\n\n getAssetTypes = () => {\n let self = this;\n axios({\n method: 'GET',\n url: `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-with-filters?city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}\n `,\n headers: headers\n }).then((response) => {\n self.setState({\n assetTypeList: response.data\n });\n });\n }\n\n getAssetsListByAssetType = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-asset-types-asset-lists?asset_type_ids=\n ${this.state.initialValues.assetTypeId}&city_id=${this.state.initialValues.cityId}&brand_ids=${this.state.initialValues.brandId}`,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n formatDate = (date) => {\n var d = new Date(date),\n month = \"\" + (d.getMonth() + 1),\n day = \"\" + d.getDate(),\n year = d.getFullYear();\n\n if (month.length < 2) month = \"0\" + month;\n if (day.length < 2) day = \"0\" + day;\n\n return [year, month, day].join(\"-\");\n };\n\n handleCalenderOnBlur = () => {\n this.state.initialValues.financialYearOne = this.formatDate(\n this.state.financialYearOne\n );\n this.state.initialValues.financialYearTwo = this.formatDate(\n this.state.financialYearTwo\n );\n };\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_type\") {\n this.state.initialValues.modelId = newValue.value;\n this.state.initialValues.modelValue = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n this.state.initialValues.leaseId = newValue.value;\n this.state.initialValues.leaseValue = newValue.label;\n\n this.state.leaseList.forEach((item) => {\n if (newValue.value == item.id) {\n this.state.initialValues.assetId = item.asset_id;\n this.state.initialValues.assetName = item.asset_name;\n\n this.setMasterPreValues(item.asset_id);\n }\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-financial-years?leaseId=` +\n newValue.value, { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n financialYear: data.fianancialYears,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n\n // unset asset type and asset name\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.getAssetTypes();\n\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n\n // unset asset type and asset name\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n this.state.assetsList = [];\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.getAssetsListByBrand();\n this.getAssetTypes();\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_type\") {\n this.state.initialValues.assetName =\"\";\n this.state.initialValues.assetId =\"\";\n this.state.assetTypeSelected = [];\n this.state.initialValues.assetTypeId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.assetTypeId.push(newValue[i].value);\n this.state.assetTypeSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n\n this.getAssetsListByAssetType();\n\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = \"\";\n this.state.initialValues.leaseId = \"\";\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_uom\") {\n //change_lease_month\n this.state.initialValues.dataUomId = newValue.value;\n this.state.initialValues.dataUOMName = newValue.label;\n\n console.log(this.state.initialValues, \"initial valuyes\");\n } else if (actionMeta == \"change_financial_year\") {\n //change_lease_month\n this.state.initialValues.financialYearId = newValue.value;\n this.state.initialValues.financialYear = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId + \"&modelType=\" + this.state.initialValues.modelId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, {headers})\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n onFileChange = (event) => {\n // Update the state\n this.setState({ selectedFile: event.target.files[0] });\n };\n // On file upload (click the upload button)\n onFileUpload = () => {\n // Create an object of formData\n const formData = new FormData();\n\n console.log(formData, \"formData\");\n\n if (typeof this.state.selectedFile == \"undefined\") {\n // alert(\"Please upload file to process\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: 'Please upload file to process',\n });\n return true;\n }\n\n var ths = this;\n\n // Update the formData object\n formData.append(\n \"myFile\",\n this.state.selectedFile,\n this.state.selectedFile.name\n );\n formData.append(\"dateAsOn\", this.state.initialValues.dateAsOn);\n formData.append(\"leaseId\", this.state.initialForecast.leaseId);\n formData.append(\"type\", \"actual\");\n\n // Request made to the backend api\n // Send formData object\n axios\n .post(`${apiUrl.apiUrl.url}/voucher/import-forecast`, formData)\n .then(function (response) {\n console.log(response, \"response\");\n if (response.data.success) {\n ths.setState({ redirect: true });\n ths.state.brandSelected = [];\n ths.state.leaseSelected = [];\n\n // alert(\"Form processed successfully.\");\n ths.setState({\n popupalertMessage: true,\n popupMessageContent: 'Form processed successfully.',\n });\n for (const [key, value] of Object.entries(ths.state.initialValues)) {\n ths.state.initialValues[key] = \"\";\n }\n ths.setState({\n formResponseData: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: [],\n exportBtn: false,\n });\n ths.setState({});\n }\n });\n };\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false, });\n };\n\n redirectToClose = () => {\n this.setState({\n popupalertMessage: false,\n popupMessageContent: '',\n });\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n
\n\n\n \n
\n - \n
- Reports \n
- \n Vouchers - Forecast\n \n
\n \n \n {(close) => (\n \n
\n )}\n \n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n
\n )}\n \n {this.state.exportBtn && (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Vouchers - Actual\n \n
\n \n
\n \n )}\n \n \n \n \n {(close) => (\n \n
\n )}\n \n\n {this.state.exportBtn && (\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n Vouchers - Comparison View\n \n
\n \n
\n \n )}\n \n\n \n {this.state.formResponseData.length > 0 && (\n \n \n \n \n )}\n\n
\n \n );\n }\n}\n\nexport default withRouter(LeaseGiftVoucherView);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faTimes,faEye } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport Popup from \"reactjs-popup\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport TopHeader from \"../../layout/TopHeader\";\nimport { ChartPopup } from \"../../utils/utils\";\nimport { fileUploadPath } from \"../../utils/index\";\nimport Select from \"react-select\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nvar ReactS3Uploader = require(\"react-s3-uploader\");\n\nvar today = new Date(),\n date =\n today.getDate() + \"/\" + today.getMonth() + 1 + \"/\" + today.getFullYear();\n\nclass VoucherMailConfirmationComponent extends React.Component {\n state = {\n //terminationEffectiveDate: new Date(),\n //effectiveDate: new Date(),\n messageToShow: \"\",\n redirect: false,\n changeLandlord: false,\n delete: false,\n additionalDetails: [],\n leaseId: this.props.leaseId,\n voucherId: this.props.voucherId,\n leaseCode: this.props.leaseCode,\n costCenter:this.props.costCenter,\n fileName: \"Activation-Doc.pdf\",\n date: \"\",\n fileAdded: {},\n activationStatus: '',\n initialValues: {\n landlordId: [],\n },\n };\n style = (feature) => {\n return {\n fillColor: \"#ccc\",\n weight: 1,\n opacity: 1,\n color: \"#003970\",\n dashArray: \"2\",\n fillOpacity: 0.5,\n };\n };\n constructor(props) {\n super(props);\n //this.handleTypeChange = this.handleTypeChange.bind(this);\n }\n\n componentDidMount() {\n var date = new Date();\n var formatedDate = `${\n date.getFullYear() + 1\n }-${date.getMonth()}-${date.getDate()}`;\n this.setState({ terminationEffectiveDate: formatedDate }, () => {\n console.log(this.state.terminationEffectiveDate);\n });\n console.log(formatedDate);\n this.setState({ activationStatus: this.props.mailConfirmationStatus });\n }\n\n\n // onUploadError() {\n // this.setState({\n // messsagePopup: true,\n // popupContent: \"Something Went Wrong!\",\n // });\n // console.log(\"uploading error....\");\n // // alert(\"Something Went Wrong\");\n // }\n\n hidePopup() {\n this.props.setMailActivation(false);\n }\n\n changeLandlord = (newValue, existing) => {\n var currentMapping = this.state.currentLandlordMapping; \n currentMapping[existing]['value'] = newValue.value;\n currentMapping[existing]['label'] = newValue.label;\n this.setState({ currentLandlordMapping: currentMapping });\n };\n\n \n redirectAfterSave = () => {\n this.setState({ delete: false });\n };\n\n redirectToTerminate = () => {\n var value = this.state.values;\n\n this.redirectAfterSave();\n\n var self = this;\n if (value.termination_type == \"landlord_termination\") {\n console.log(\"in if\")\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/lease-view/get-lease-landloard-details?leaseId=${this.state.leaseId}`,\n // url: `${apiUrl.apiUrl.url}/lease-view/get-lease-landloard-details?leaseId=${this.state.costCenter}`,\n }).then(function (response) {\n if (response.data.success) {\n self.state.initialValues.landlordId =\n response.data.additionalDetails.landlordIds;\n self.setState({\n changeLandlord: true,\n additionalDetails: response.data.additionalDetails,\n landloardSelected: response.data.additionalDetails.currentLandlord,\n currentLandlordMapping: response.data.additionalDetails.currentLandlordMapping,\n });\n }\n });\n } else {\n console.log(\"in else\")\n this.uploader.uploadFile();\n }\n };\n\n onUploadStart = (file, next) => {\n console.log(file, \"pre process\");\n this.state.fileAdded = file;\n next(file);\n }\n\n onUploadFinish = (e) => {\n //${this.state.voucherId}\n let fileName =\n fileUploadPath() +\n this.state.voucherId +\n \"/\" +\n this.state.fileName;\n var initialValuesArr = this.state.initialValues;\n initialValuesArr[\"document\"] = fileName;\n console.log(fileName, \"fileName\")\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/voucher/mail-activation?voucherId=${this.state.voucherId}`,\n data: initialValuesArr,\n }).then(function (response) {\n console.log(response, \"response\");\n if (!response.data.success) {\n self.props.setpopupMessageContent(\"Something went wrong.\");\n self.props.setpopupalertMessage(true);\n } else {\n self.hidePopup();\n self.props.setpopupMessageContent(\"Details Stored successfully.\");\n self.props.setpopupalertMessage(true);\n //self.props.setkeyCounter(Math.round());\n self.props.ths.setState({ counter : Math.random() });\n //self.props.ths.setState({});\n }\n });\n };\n render() {\n return (\n \n \n \n
\n
\n | S.No | */}\nAsset Name | \nBrand Name / Occupier Name | \nLease Id | \n {/*Gross Leasable Area | */}\nCost Center | \nPeriod | \n {/*Gross Sale | */}\nVoucher | \n {/*Gross Sale | */}\nVoucher | \n {/*Gross Sale | */}\nVoucher | \n
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Lease | \nActual | \nVariance | \n||||||||||
| { anObjectMapped.leaseName == '-' ? \"-\" : rowIndex+1} | */}\n {/*{tableCounter} | */}\n{anObjectMapped.assetName} | \n{anObjectMapped.brandName} | \n{anObjectMapped.leaseName} | \n {/*{anObjectMapped.grossLeasebleArea} | */}\n{anObjectMapped.costCenter} | \n{rowData.periodFull} | \n\n {\n anObjectMapped.forecast[rowIndex]\n .forecast_net_sale\n }\n | \n\n\n\n {\n anObjectMapped.actual[rowIndex]\n .actual_net_sale\n }\n | \n\n\n\n {\n anObjectMapped.variance[rowIndex]\n .variance_net_sale\n }\n | \n||
| Nothing to show..... | \n
\n {\n console.log(values, \"valuee....\");\n var self = this;\n this.state.initialValues = values;\n\n if(typeof values.activationStatus == \"undefined\" && this.state.activationStatus == '') {\n this.setState({ messageToShow: \"Please select activation status\", delete: true });\n return false;\n }\n\n this.setState({ values: values });\n this.uploader.uploadFile();\n\n if(typeof this.state.fileAdded.name == \"undefined\" ) {\n this.setState({ messageToShow: \"Please select file\", delete: true });\n return false;\n }\n\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n }) => (\n \n )}\n \n\n \n {(close) => (\n \n
\n );\n }\n}\n\nexport default withRouter(VoucherMailConfirmationComponent);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faTimes,faEye } from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport Popup from \"reactjs-popup\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport TopHeader from \"../../layout/TopHeader\";\nimport { ChartPopup } from \"../../utils/utils\";\nimport { fileUploadPath } from \"../../utils/index\";\nimport Select from \"react-select\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { getToDate } from \"../../utils/utils\";\nvar ReactS3Uploader = require(\"react-s3-uploader\");\n\nvar today = new Date(),\n date =\n today.getDate() + \"/\" + today.getMonth() + 1 + \"/\" + today.getFullYear();\n\nclass VoucherGcConfirmationComponent extends React.Component {\n state = {\n //terminationEffectiveDate: new Date(),\n //effectiveDate: new Date(),\n messageToShow: \"\",\n redirect: false,\n changeLandlord: false,\n delete: false,\n additionalDetails: [],\n leaseId: this.props.leaseId,\n voucherId: this.props.voucherId,\n leaseCode: this.props.leaseCode,\n costCenter:this.props.costCenter,\n fileName: \"Activation-Doc.pdf\",\n date: \"\",\n fileAdded: {},\n activationDate: this.props.gcStartDate,\n gcEndDate: this.props.gcEndDate,\n initialValues: {\n landlordId: [],\n },\n };\n style = (feature) => {\n return {\n fillColor: \"#ccc\",\n weight: 1,\n opacity: 1,\n color: \"#003970\",\n dashArray: \"2\",\n fillOpacity: 0.5,\n };\n };\n constructor(props) {\n super(props);\n \n //console.log(props, \"props\");\n //this.handleTypeChange = this.handleTypeChange.bind(this);\n }\n\n componentDidMount() {\n var date = new Date();\n var formatedDate = `${\n date.getFullYear() + 1\n }-${date.getMonth()}-${date.getDate()}`;\n this.setState({ terminationEffectiveDate: formatedDate }, () => {\n console.log(this.state.terminationEffectiveDate);\n });\n console.log(this.props, \"props checking\")\n //this.state.activationDate = this.props.gcStartDate;\n //this.state.gcEndDate = this.props.gcEndDate;\n this.setState({});\n console.log(formatedDate);\n }\n\n\n hidePopup() {\n console.log(this.props, \"thisparet\"); \n this.props.setGcActivation(false);\n }\n\n handleTypeChange = (e) => {\n if (e.target.value !== \"landlord_termination\") {\n this.setState({\n changeLandlord: false,\n termination_type: e.target.value,\n });\n }\n this.setState({});\n console.log(this.state.termination_type, \"termination_type\");\n\n //this.setState({ fruit: e.target.value });\n };\n\n redirectAfterSave = () => {\n this.setState({ delete: false });\n };\n\n\n render() {\n return (\n \n {this.state.messageToShow}\n \n ×\n \n
\n )}\n \n \n
\n \n {\n\n if(typeof this.state.activationDate == \"undefined\" || this.state.activationDate == '' || this.state.activationDate == '0000-00-00') {\n this.setState({ messageToShow: \"Please select activation date\", delete: true });\n return false;\n }\n\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/voucher/gc-activation?voucherId=${this.state.voucherId}`,\n data: { 'start': this.state.activationDate, 'end' : this.state.gcEndDate },\n }).then(function (response) {\n if (!response.data.success) {\n self.props.setpopupMessageContent(\"Something went wrong.\");\n self.props.setpopupalertMessage(true);\n } else {\n //self.props.ths.state.counter = Math.random();\n self.props.setkeyCounter(Math.random());\n self.hidePopup();\n self.props.setpopupMessageContent(\"Details Stored successfully.\");\n self.props.setpopupalertMessage(true);\n \n self.props.ths.setState({ counter : Math.random() }); \n //console.log(self.props.ths.state, \"state heckng\", Math.round())\n //self.props.ths.state({});\n } \n });\n \n\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n resetForm,\n }) => (\n \n )}\n \n\n \n {(close) => (\n \n
\n );\n }\n}\n\nexport default withRouter(VoucherGcConfirmationComponent);\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport { Col, Placeholder } from \"rsuite\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faSearch,\n faPlus,\n faPen,\n faTimes,\n faEye,\n faEnvelopeOpenText,\n faCheckCircle, faTrashAlt,\n faUndo, faCog, faFileExcel\n} from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\nimport styled1 from \"styled-components\";\nimport VoucherMailConfirmationComponent from \"./VoucherMailConfirmationComponent\";\nimport VoucherGcConfirmationComponent from \"./VoucherGcConfirmationComponent\";\nimport { Modal } from \"react-bootstrap\";\nimport { confirmAlert } from \"react-confirm-alert\"; // Import\nimport \"react-confirm-alert/src/react-confirm-alert.css\"; // Import css\nimport { ViewLeasePdfReader } from \"../../utils/ViewLeaseDocumentViewer\";\nimport Popup from \"reactjs-popup\";\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\n\n\nconst StyledCell1 = styled1.div`\n &.low {\n background: green !important;\n }\n &.medium {\n background: orange;\n }\n &.high {\n background: red !important;\n }\n`;\n\nconst StyledCell = ({ }) => (\n \n)\nfunction removeVoucher(id) {\n confirmAlert({\n title: \"Confirm to delete\",\n message: \"Are you sure you want to delete this item ?.\",\n buttons: [\n {\n label: \"Yes\",\n onClick: () => {\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/voucher/delete?id=` + id,\n data: { \"id\": id },\n }).then(function (response) {\n window.location.href = window.location.href;\n });\n },\n },\n {\n label: \"No\",\n onClick: () => {\n console.log(\"cancel clicked\");\n\n },\n },\n ],\n });\n}\nfunction DeleteBtn(props) {\n return (\n // (props.status == 0 && props.is_dropped == 0) && (\n \n {this.state.messageToShow}\n \n ×\n \n
\n )}\n \n \n
\n \n {record.mail_confirmation == 1 ? 'Yes' : 'No'}\n
\n )\n }\n },\n\n {\n name: \"Action\",\n grow: 4,\n sortable: false,\n cell: (record) => {\n return (\n \n {\n\n (record.mail_confirmation == 1 || record.mail_confirmation == 'Yes') &&\n \n {\n e.preventDefault();\n setCurrentDocument(record.documentUrl);\n setIsOpen(1);\n }} >\n {\" \"}\n \n \n
\n );\n },\n },\n ];\n\n // subHeaderComponent={subHeaderComponentMemo}\n return (\n <>\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n
\n \n
\n - \n
- Document \n
\n
\n \n
\n \n {popupMessageContent}\n \n ×Close\n \n
\n )}\n \n
\n \n\n );\n};\nexport default RevenueTable;\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport axios from \"axios\";\nimport { faChevronRight, faSearch } from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType } from \"../../utils/index\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport GiftVoucherTable from \"./GiftVoucherTable\";\n//import { Chart } from \"react-google-charts\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// });\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({ id, type, name, handleClick, isChecked, attr }) => {\n return (\n \n
\n \n \n \n Mail Activation \n \n \n \n \n\n \n \n GC Activation \n \n \n \n \n
\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n\n\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- Gift Vouchers \n
- \n \n Gift Vouchers\n \n \n
\n \n
\n\n {/* \n \n
*/}\n \n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n CAM - Actual\n \n
\n \n
\n \n )}\n \n \n \n \n {(close) => (\n \n
\n )}\n \n\n {this.state.exportBtn && (\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n CAM - Comparison View\n \n
\n \n
\n \n )}\n \n\n \n {this.state.formResponseData.length > 0 && (\n \n \n \n \n )}\n\n
\n \n );\n }\n}\n\nexport default withRouter(LeaseGiftVoucherView);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport styled from \"styled-components\";\nimport { faUndo, faEye, faChevronRight } from \"@fortawesome/free-solid-svg-icons\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport CreatableSelect from \"react-select/creatable\";\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\n\nimport Table from \"./CloseDealTable\";\n\nimport * as Yup from \"yup\";\nimport { type } from \"jquery\";\nimport { getUserType } from \"../../utils/index\";\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nvar tableCounter = 0;\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\nclass AcquisitionReport extends React.Component {\n groupId = { value: \"\" };\n state = {\n assetsList: [],\n asset_type: [],\n redirect: false,\n id: undefined,\n counter: 0,\n initialValues: {\n asset_type: \"\",\n asset_name: \"\",\n },\n gridColumns: [],\n };\n\n componentDidMount() { }\n\n\n componentDidUpdate() { }\n\n constructor(props) {\n super(props);\n this.validator = new SimpleReactValidator({\n autoForceUpdate: this,\n });\n\n }\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/close-deal/fetch-deal-details?asset_type=` +\n this.state.initialValues.asset_type +\n `&asset_name=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n asset_name: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n // -----------------------------------\n getAssetsListByAsset = (asset_type) => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/close-deal/get-asset-list?asset_type=` +\n asset_type,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n // --------------------------------------------\n\n valueChange = (newValue, actionMeta) => {\n console.log(\"newVa calling..\", newValue, \"meta\", actionMeta);\n if (actionMeta == \"change_type\") {\n this.state.initialValues.asset_type = newValue.target.value;\n\n this.setState({});\n this.getAssetsListByAsset(newValue.target.value);\n\n }\n else if (actionMeta == \"change_asset_name\") {\n\n this.state.initialValues.asset_name = newValue.value;\n this.state.initialValues.asset_name = newValue.label;\n this.setState({});\n }\n }\n\n handleChangeAsset = (newValue, actionMeta) => {\n this.state.initialValues.assetName = newValue.label;\n this.state.initialValues.assetId = newValue.value;\n this.setState({});\n console.group(\"Value Changed\");\n this.asset = newValue.value;\n if (!isNaN(this.asset)) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-sub-assets?asset_id=` +\n this.asset,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n subAssets: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n console.log(this.asset, \"ddd\");\n\n console.groupEnd();\n };\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n \n \n
\n
\n | S.No | */}\nAsset Name | \nBrand Name / Occupier Name | \nLease Id | \nGross Leasable Area | \nCost Center | \nPeriod | \n {/*Gross Sale | */}\nCAM | \n {/*Gross Sale | */}\nCAM | \n {/*Gross Sale | */}\nCAM | \n
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Lease | \nActual | \nVariance | \n||||||||||
| { anObjectMapped.leaseName == '-' ? \"-\" : rowIndex+1} | */}\n {/*{tableCounter} | */}\n{anObjectMapped.assetName} | \n{anObjectMapped.brandName} | \n{anObjectMapped.leaseName} | \n{anObjectMapped.grossLeasebleArea} | \n{anObjectMapped.costCenter} | \n{rowData.periodFull} | \n\n {\n anObjectMapped.forecast[rowIndex]\n .forecast_net_sale\n }\n | \n\n\n\n {\n anObjectMapped.actual[rowIndex]\n .actual_net_sale\n }\n | \n\n\n\n {\n anObjectMapped.variance[rowIndex]\n .variance_net_sale\n }\n | \n||
| Nothing to show..... | \n
\n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"}\n Acquisition\n \n \n
\n \n
\n\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"}\n Valuation\n \n \n
\n \n
\n \n )}\n \n\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Reports \n
- \n \n Lease Report -{\" \"}\n Asset Management\n \n \n
\n \n
\n \n )}\n \n\n \n
\n );\n}\n","import myData from \"./states_india.json\";\nvar statesData = myData;\n \n export default { statesData };","import React, { Component } from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faUserCircle,\n faSignOutAlt,\n faFileAlt,\n faCalendarAlt,\n faClock,\n faRupeeSign,\n faChartLine,\n faVectorSquare,\n faBuilding,\n faExpandAlt,\n faMapMarkerAlt,\n faRetweet,\n faTrashRestore,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport CreatableSelect from \"react-select/creatable\";\nimport SearchField from \"react-search-field\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport apiUrl from \"../apiUrlConstant\";\nimport statesData from \"../geojson\";\nimport Masters from \"../masters/Masters\";\nimport \"leaflet/dist/leaflet.css\";\nimport * as L from \"leaflet\";\nimport styles from \"../masters/master.css\";\nimport Select from \"react-select\";\n//import { Map } from 'react-leaflet'\nimport TopHeader from \"../layout/TopHeader\";\nimport { MapContainer, TileLayer, Marker, Popup, GeoJSON } from \"react-leaflet\";\nimport markerIconPng from \"leaflet/dist/images/marker-icon.png\";\nimport { Icon, latLng } from \"leaflet\";\nimport { Header } from \"rsuite\";\nimport Chart from \"react-google-charts\";\nimport { ChartPopup } from \"../utils/utils\";\nclass LeaseSummary extends React.Component {\n state = {\n redirect: false,\n rightSideData: [],\n mapData: [],\n barChartData: [[\"City\", \"Lease Count\"]],\n lineChartData: [],\n center: [20.59, 78.96],\n counter: 0,\n zoomLevel: 4,\n stateName: \"India\",\n stateId: \"\",\n brands: [],\n brandCategoryName: \"Select Brand\",\n brandCategory: \"\",\n pinCode: \"\",\n enlargeChart: false,\n chartData: \"\",\n chartkey: \"\",\n pinCounter: 0\n };\n style = (feature) => {\n return {\n fillColor: \"#ccc\",\n weight: 1,\n opacity: 1,\n color: \"#003970\",\n dashArray: \"2\",\n fillOpacity: 0.5,\n };\n };\n constructor(props) {\n super(props);\n this.onEachFeature = this.onEachFeature.bind(this);\n }\n loadBrands = async () => {\n const response = await axios.get(\n `${apiUrl.apiUrl.url}/brand/get-brands?page=1&per_page=100&delay=1`\n );\n this.state.brands = response.data.data;\n this.setState({});\n };\n\n changeCategory = (newValue) => {\n this.state.brandCategory = newValue.value;\n this.state.brandCategoryName = newValue.label;\n\n this.filterPage();\n\n console.groupEnd();\n };\n changePin = (newValue) => {\n this.state.pinCode = newValue.target.value;\n const pincodes = this.state.pinCode.split(\",\");\n let access = true;\n for (let i in pincodes) {\n if (pincodes[i].trim().length != 6 && pincodes[i].trim().length > 0) {\n access = false;\n }\n }\n console.log(this.state.pinCode, \"this.state.pinCode\")\n console.log(access);\n if (access) {\n this.filterPage();\n }\n\n console.groupEnd();\n };\n\n filterPage = () => {\n var ths = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/lease-report/get-state-wise-summary?state_id=${this.state.stateId}&brandId=${this.state.brandCategory}&pinCode=${this.state.pinCode}`, //\n }).then(function (response) {\n if (response.data.success) {\n var counter = ths.state.counter + 1;\n ths.setState({\n rightSideData: response.data.data,\n mapData: response.data.data.mapData,\n });\n\n console.log(response.data.data, \"response.data.data\");\n ths.renderCharts(ths);\n }\n });\n\n this.setState({});\n };\n\n componentDidMount() {\n this.loadBrands();\n var self = this;\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/lease-report/get-state-wise-summary`, //?state_id=${this.state.id}\n }).then(function (response) {\n if (response.data.success) {\n self.setState({\n rightSideData: response.data.data,\n mapData: response.data.data.mapData,\n });\n }\n });\n\n this.renderCharts(self);\n }\n\n resetPage = () => {\n var counter = this.state.counter + 1;\n this.setState(\n {\n stateId: \"\",\n pinCode: \"\",\n brandCategory: \"\",\n brandCategoryName: \"Select Brand\",\n zoomLevel: 4,\n counter: counter,\n center: [20.59, 78.96],\n stateName: \"India\",\n pinCounter: Math.random()\n },\n () => {\n this.filterPage();\n }\n );\n\n var ths = this;\n // axios({\n // method: \"get\",\n // url: `${apiUrl.apiUrl.url}/lease-report/get-state-wise-summary?state_id=&brandId=${ths.state.brandCategory}`,\n // }).then(function (response) {\n // if (response.data.success) {\n // var counter = ths.state.counter + 1;\n // ths.setState({\n // rightSideData: response.data.data,\n // zoomLevel: 4,\n // counter: counter, // Math.round()\n // });\n // }\n // });\n };\n\n renderCharts = (self) => {\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/sales-input/get-state-wise-lease-count?state_id=${self.state.stateId}&brandId=${self.state.brandCategory}&pinCode=${this.state.pinCode}`,\n }).then(function (response) {\n console.log(response.data, \"cahrt data\");\n self.setState({\n barChartData: response.data.barChartData,\n lineChartData: response.data.lineChartData,\n });\n });\n };\n\n onEachFeature(feature, layer) {\n var ths = this;\n layer.on(\"click\", function (e) {\n console.log(e.target.feature, \"e.target.feature.properties\");\n ths.setState({\n stateName: e.target.feature.properties.st_nm,\n stateId: e.target.feature.properties.state_code,\n });\n\n ths.renderCharts(ths);\n axios({\n method: \"get\",\n url: `${apiUrl.apiUrl.url}/lease-report/get-state-wise-summary?state_id=${e.target.feature.properties.state_code}&brandId=${ths.state.brandCategory}`,\n }).then(function (response) {\n if (response.data.success) {\n var counter = ths.state.counter + 1;\n ths.setState({\n rightSideData: response.data.data,\n mapData: response.data.data.mapData,\n center: [\n response.data.stateData.latitude,\n response.data.stateData.longitude,\n ],\n zoomLevel: response.data.stateData.zoom_level,\n counter: counter, // Math.round()\n });\n }\n });\n });\n }\n\n render() {\n return (\n \n
\n \n {(getUserRole() != \"checker\" || true) && (\n <>\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n\n \n \n\n \n \n \n \n\n\n \n \n\n\n \n \n \n \n \n \n \n \n\n\n\n\n \n \n \n \n\n \n \n {/* \n */}\n\n\n {/* gift vouchers */}\n {/* \n */}\n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n \n \n \n\n \n\n\n \n {/* \n\n\n \n \n )}\n
\n \n
*/}\n \n
\n \n \n
\n
\n \n
\n \n
\n {/* \n\n
\n \n {\n this.changeCategory(e);\n }}\n options={this.state.brands.map((item) => ({\n label: item.brandName,\n value: item.brandId,\n }))}\n />\n {\n this.changePin(e);\n }}\n //value={this.state.pinCode}\n isSearchable=\"true\"\n name=\"pinCode\"\n classNames=\"basic-single\"\n key={this.state.pinCounter}\n />\n \n
\n\n \n {/*
\n \n
*/}\n\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {\n this.changeCategory(e);\n }}\n options={this.state.brands.map((item) => ({\n label: item.brandName,\n value: item.brandId,\n }))}\n />\n
\n \n
\n \n {\n this.changePin(e);\n }}\n isSearchable=\"true\"\n name=\"pinCode\"\n classNames=\"basic-single\"\n value={{\n label: this.state.brandCategoryName,\n value: this.state.brandCategory,\n }}\n />\n
\n \n \n {\" \"}\n Portfolio Analytics{\" \"}\n \n
\n \n
\n \n
\n \n Portfolio: {this.state.stateName}\n
\n\n \n \n {item.towerName} \n \n );\n })}\n \n {/*
\n \n
\n Loading Chart
}\n data={this.state.barChartData}\n options={{\n title: \"\",\n chartArea: { width: \"80%\" },\n legend: { position: \"top\", alignment: \"center\" },\n hAxis: {\n title: \" States\",\n minValue: 0,\n },\n vAxis: {\n title: \"Total Leases\",\n },\n }}\n legendToggle\n />\n \n
\n \n \n
\n
\n ![\"total_lease\"](\"/images/icons/total_lease.svg\")
Total Leases
\n {this.state.rightSideData.total_lease}
\n\n \n\n
\n
\n ![\"assets\"](\"/images/icons/assets.svg\")
# of Assets
\n {this.state.rightSideData.total_assets}
\n\n
\n
\n ![\"gla\"](\"/images/icons/gla.svg\")
Total GLA (Chargeable) (sq.ft)
\n {this.state.rightSideData.gross_area}
\n\n
\n
\n \n Total Carpet (sq.ft)
\n {this.state.rightSideData.carpet_area}
\n\n
\n
\n ![\"Wale\"](\"/images/icons/wale.svg\")
WALE (Months)
\n {this.state.rightSideData.wale_months}
\n\n
\n
\n WALOE (Months)
\n {this.state.rightSideData.waloe_months}
\n\n \n
\n
\n ![\"lease_expire\"](\"/images/icons/lease_expire.svg\")
Lease Expiring In 3 Months
\n {this.state.rightSideData.lease_expire_3_months}
\n \n\n
\n \n {\n this.setState({\n chartkey: Math.random(),\n enlargeChart: true,\n chartData: (\n Loading Chart
}\n data={this.state.barChartData}\n options={{\n title: \"\",\n chartArea: { width: \"80%\" },\n legend: {\n position: \"top\",\n alignment: \"center\",\n },\n hAxis: {\n title: \"Total Leases\",\n minValue: 0,\n },\n vAxis: {\n title: \"States\",\n },\n }}\n legendToggle\n />\n ),\n });\n }}\n >\n Total Leases State Wise
\n */}\n {/*
\n */}\n {/* \n
*/}\n {/* \n
\n \n
\n \n
\n \n {\n this.changeCategory(e);\n }}\n options={this.state.brands.map((item) => ({\n label: item.brandName,\n value: item.brandId,\n }))}\n />\n
\n \n
\n \n {\n this.changePin(e);\n }}\n isSearchable=\"true\"\n name=\"pinCode\"\n classNames=\"basic-single\"\n // value={{\n // label: this.state.brandCategoryName,\n // value: this.state.brandCategory,\n // }}\n />\n
\n \n \n {\" \"}\n Portfolio Analytics{\" \"}\n \n
\n */}\n {/*
\n \n\n
\n \n Loading Chart
}\n data={this.state.barChartData}\n options={{\n title: \"Total Leases State Wise\",\n chartArea: { width: \"80%\" },\n legend: { position: \"top\", alignment: \"center\" },\n hAxis: {\n title: \" States\",\n minValue: 0,\n },\n vAxis: {\n title: \"Total Leases\",\n },\n }}\n legendToggle\n />\n \n
\n \n \n
\n \n
\n \n \n
\n {this.state.rightSideData.total_lease}
\nTotal Leases
\n\n
\n \n
\n \n
\n \n
\n {this.state.rightSideData.total_assets}
\n# of Assets
\n\n
\n \n
\n \n
\n \n
\n {this.state.rightSideData.gross_area}
\nTotal GLA (Chargeable) (sq.ft)
\n\n
\n \n
\n \n
\n \n
\n {this.state.rightSideData.carpet_area}
\nTotal Carpet (sq.ft)
\n\n
\n \n
\n \n
\n \n
\n {this.state.rightSideData.wale_months}
\nWALE (Months)
\n\n
\n \n
\n \n
\n \n
\n {this.state.rightSideData.waloe_months}
\nWALOE (Months)
\n\n
\n \n
\n \n
\n \n
\n \n \n {this.state.rightSideData.lease_expire_3_months}\n
\n Lease Expiring In 3 Months\n \n
\n
\n \n
\n \n
\n \n
\n {this.state.rightSideData.avg_monthly_sale}
\nAvg Monthly Sales ()
\n\n
\n \n
\n \n
\n \n
\n {this.state.rightSideData.avg_monthly_mg}
\nAvg Monthly MG
\n\n
\n \n
\n \n
\n \n
\n {this.state.rightSideData.avg_monthly_mg}
\nAvg Net Sales
\n\n
\n \n \n
\n \n {\n this.setState({\n chartkey: Math.random(),\n enlargeChart: true,\n chartData: (\n Loading Chart
}\n data={this.state.barChartData}\n options={{\n title: \"Total Leases State Wise\",\n chartArea: { width: \"80%\" },\n legend: {\n position: \"top\",\n alignment: \"center\",\n },\n hAxis: {\n title: \"Total Leases\",\n minValue: 0,\n },\n vAxis: {\n title: \"States\",\n },\n }}\n legendToggle\n />\n ),\n });\n }}\n >\n \n {\n this.setState({ enlargeChart: true });\n }}\n width={\"100%\"}\n height={300}\n chartType=\"LineChart\"\n loader={ {\n this.setState({\n chartkey: Math.random(),\n enlargeChart: true,\n chartData: (\n {\n this.setState({ enlargeChart: true });\n }}\n width={\"100%\"}\n height={300}\n chartType=\"LineChart\"\n loader={
\n Loading Chart
}\n data={this.state.lineChartData}\n options={{\n hAxis: {\n title: \"Months\",\n },\n vAxis: {\n title: \"Rate / GLA\",\n },\n backgroundColor: \"#005b9b\",\n colors: [\"#fff\", \"#fff\"],\n }}\n />\n Loading Chart
}\n data={this.state.lineChartData}\n options={{\n hAxis: {\n title: \"Months\",\n },\n vAxis: {\n title: \"Rate / GLA\",\n },\n backgroundColor: \"#005b9b\",\n colors: [\"#fff\", \"#fff\"],\n }}\n />\n ),\n });\n }}\n >\n Enlarge Chart\n \n \n
*/}\n {/* */}\n {/* */}\n \n \n \n
\n
\n Total Leases
\n {this.state.rightSideData.total_lease}
\n\n \n\n
\n
\n # of Assets
\n {this.state.rightSideData.total_assets}
\n\n
\n
\n Total GLA (sq.ft)
\n {this.state.rightSideData.gross_area}
\n\n
\n
\n WALE (Months)
\n {this.state.rightSideData.wale_months}
\n\n
\n
\n WALE (Months)
\n {this.state.rightSideData.waloe_months}
\n\n \n
\n
\n Lease Expiring In 3 Months
\n {this.state.rightSideData.lease_expire_3_months}
\n \n\n
\n );\n }\n\n renderForm() {\n return (\n \n {this.renderForm()}\n
\n \n \n {(close) => (\n \n\n {\n console.log(nextValues, \"asdasdasd\");\n }}\n onReset={(values, actions) => {\n this.setState({\n //formResponseData: data,\n formResponseData: this.state.formResponseData,\n });\n }}\n onSubmit={(values, actions) => {\n var self = this;\n\n values[\"leaseId\"] = this.state.invoiceOtherData.leaseId;\n values[\"month\"] = this.state.invoiceOtherData.date;\n\n if (\n this.state.totalInvoiceAmount !=\n this.state.invoiceOtherData.total_amt.net_charge_amount\n ) {\n // alert(\"please settle invoice amount\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: 'please settle invoice amount',\n });\n return false;\n } else {\n this.uploader.uploadFile();\n values.filename =\n fileUploadPath() +\n this.state.invoiceOtherData.leaseId +\n \"/\" +\n this.state.fileName;\n values.chargeTypeSelected =\n this.state.initialValues.chargeTypeSelected;\n this.setState({ submitFormData: values });\n\n this.state.brandSelected = [];\n this.state.leaseSelected = [];\n this.state.securityDepositIds = [];\n\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.setState({});\n }\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n handleReset,\n\n isSubmitting,\n }) => (\n \n )}\n \n
\n );\n }\n}\n\nexport default withRouter(InvoiceValidation);\n","import React from \"react\";\nimport { Nav, Sidenav, Dropdown, Icon } from \"rsuite\";\nimport \"rsuite/dist/styles/rsuite-default.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faCoffee,\n faUser,\n faList,\n faKey,\n faHouseUser,\n faCog,\n faRupeeSign,\n faAtom,\n faCopyright,\n faFileContract,\n faChartLine,\n faFileAlt,\n faShieldAlt,\n faTable,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../SideMenu.css\";\nimport {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n withRouter,\n useParams,\n} from \"react-router-dom\";\nimport { getUserType } from \"../utils/index\";\n\nvar revenueReportText = \"Revenue Report\";\nif(getUserType() == \"Occupier\") {\n revenueReportText = \"Expense Report\";\n}\n\nclass ReportsSideMenu extends React.Component {\n state = {\n openMenu: [\"\"],\n activeKey: \"1-1\",\n };\n constructor(props) {\n super(props);\n }\n render() {\n let url = this.props.match;\n console.log(this.props.location.pathname);\n return (\n \n
\n {/* \n
\n - \n
- Home \n
- \n Invoice Validation\n \n
*/}\n {\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.leaseSelected = [];\n this.state.initialValues.chargeTypeSelected = \"\";\n this.state.chargeTypeSelected = \"\";\n this.state.financialYearOne = \"\";\n this.state.financialYearTwo = \"\";\n\n var counter = this.state.counter + 1;\n this.setState({\n formResponseData: [],\n oldInvoiceData: [],\n invoiceOtherData: [],\n tableTOShow: \"\",\n tableHeadingText: \"\"\n });\n\n\n\n this.setState({\n currentDocument: \"\",\n });\n\n this.setState({\n totalInvoiceAmount: \"\",\n });\n this.setState({ fileName: \"\" });\n this.setState({ counter: counter });\n\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n values.groupId = this.state.initialValues.groupId;\n\n var brand_id = this.state.initialValues.brandId;\n var asset_id = this.state.initialValues.assetId;\n var form_config = this.state.initialValues;\n\n form_config.expiry_status = true;\n\n var counter = this.state.counter + 1;\n console.log(counter, \"counter\", form_config);\n\n this.setState({ selectedBrand: brand_id });\n this.setState({ selectedAsset: asset_id });\n this.setState({ formConfig: form_config });\n var prm = Object.entries(form_config)\n .map(([key, val]) => `${key}=${val}`)\n .join(\"&\");\n this.state.formResponseData = [];\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n fetch(\n `${apiUrl.apiUrl.url}/sales-input/fetch-invoice-details?` + prm,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //this.setState({ });\n\n var tableHeading = \"\";\n if (\"Marketing Fund Tax\" == this.state.initialValues.chargeTypeSelected) {\n tableHeading = \"MF\";\n } else if (\"Property Tax\" == this.state.initialValues.chargeTypeSelected) {\n tableHeading = \"P TAX\";\n } else if (\"Parking 2W\" == this.state.initialValues.chargeTypeSelected || \"Parking 4W\" == this.state.initialValues.chargeTypeSelected || \"Parking Other\" == this.state.initialValues.chargeTypeSelected) {\n tableHeading = \"Utility\";\n } else if (\"Storage\" == this.state.initialValues.chargeTypeSelected) {\n tableHeading = \"Charge\";\n }\n\n\n\n\n tableCounter = 0;\n this.setState({\n formResponseData: data.data,\n oldInvoiceData: data.oldInvoiceData,\n invoiceOtherData: data.otherDetails,\n tableTOShow: this.state.initialValues.chargeTypeSelected,\n tableHeadingText: tableHeading\n });\n\n\n\n this.setState({\n currentDocument: data.otherDetails.document_url,\n });\n\n this.setState({\n totalInvoiceAmount: data.otherDetails.total_amt.invoiceAmount,\n });\n this.setState({ fileName: data.otherDetails.fileName });\n this.setState({ counter: counter });\n this.setState({\n exportUrl:\n `${apiUrl.apiUrl.url}/sales-input/fetch-revenue-details?export=true&` +\n prm,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n form_config = undefined;\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n resetForm,\n\n isSubmitting,\n }) => (\n <>\n
*/}\n < PopupMessage\n open={this.state.messsagePopup}\n content={this.state.popupContent}\n redirectAfterSave={this.redirectAfterSave}\n />\n \n \n
\n \n )\n }\n \n {/* \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {\n console.log(openKeys[openKeys.length - 1]);\n this.setState({ openMenu: [openKeys[openKeys.length - 1]] });\n }}\n >\n \n \n \n \n
\n );\n }\n}\n\nexport default withRouter(ReportsSideMenu);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport styled from \"styled-components\";\nimport axios from \"axios\";\nimport {\n faEye,\n faPen,\n faPlus,\n faTimes,\n faFileExcel,\n faUndo,\n faChevronRight,\n} from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType, fileUploadPath } from \"../utils/index\";\nimport { PopupMessage } from \"../utils/utils\";\nimport Popup from \"reactjs-popup\";\n//import { Chart } from \"react-google-charts\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({\n id,\n type,\n name,\n handleClick,\n isChecked,\n attr,\n occupierId,\n netAmt,\n invoiceId,\n amtBeforeTax\n}) => {\n return (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n <>\n \n
\n\n \n
\n - \n
- Invoicing \n
- Transaction \n
- \n Generate Invoicesss\n \n
\n \n
\n \n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {\n this.setState({\n selectedStatus: \"generate\",\n randomNum: Math.random(),\n });\n\n this.getInvoicesList(\"generate\");\n }}\n >\n
\n\n Generated Invoices ({this.state.countList.generated})
\nDraft Invoices ({this.state.countList.draftCount})
\n \nApproved Invoices ({this.state.countList.approveCount})
\n \n\nApplied Invoices ({this.state.countList.applyCount})
\n \n\nCancelled Invoices ({this.state.countList.cancelCount}){\" \"}
\n \n \n\n\n \n \n {\" \"}\n \n
\n );\n },\n });\n }\n\n self.state.columns = cols;\n self.tableCounter = Math.round();\n self.state.invoiceItemList = {};\n\n self.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n processInvoiceItems = (status) => {\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/transaction/get-invoice-data`,\n data: {\n list: this.state.invoiceList,\n processType: status,\n period: this.state.initialValues.financialYearOne,\n frequency: this.state.initialValues.frequencySelected,\n },\n }).then(function (response) {\n if (!response.data.success) {\n //actions.setSubmitting(false);\n //actions.setErrors(response.data);\n } else {\n console.log(\"in else\", response);\n self.state.formResponseData = [];\n self.state.invoiceList = response.data.lists;\n self.state.datatableList = response.data.lists;\n self.tableCounter = Math.round();\n self.state.invoiceItemList = {};\n\n self.setState({});\n }\n });\n };\n\n approveInvoice = () => {\n this.processInvoiceItems(1);\n };\n\n applyInvoice = () => {\n this.processInvoiceItems(2);\n };\n\n cancelInvoice = () => {\n this.processInvoiceItems(3);\n };\n\n rejectInvoice = () => {\n this.processInvoiceItems(0);\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n // handleSelectAll = e => {\n // setIsCheckAll(!isCheckAll);\n // setIsCheck(list.map(li => li.id));\n // if (isCheckAll) {\n // setIsCheck([]);\n // }\n // };\n\n handleClick = (e) => {\n const { id, checked } = e.target;\n console.log(\"okok\", id, checked, e.target.dataset, \"str\", e, \"==\");\n var invoiceListObj = this.state.invoiceList;\n var invoiceItemList = this.state.invoiceItemList;\n if (typeof invoiceListObj[id] == \"undefined\") {\n invoiceListObj[id] = {};\n }\n\n if (typeof invoiceListObj[id][[e.target.dataset.attr]] == \"undefined\") {\n invoiceListObj[id][[e.target.dataset.attr]] = {};\n }\n\n console.log(e.target.dataset, \"e.target.dataset.netAmt\");\n\n var uniqueKey =\n id + \"-\" + e.target.dataset.attr + \"-\" + e.target.dataset.occupierid;\n\n if (checked) {\n invoiceListObj[id][e.target.dataset.attr][e.target.dataset.occupierid] = {\n amt: e.target.dataset.netamt,\n invoiceId: e.target.dataset.invoiceid,\n };\n\n invoiceItemList[uniqueKey] = true;\n } else {\n delete invoiceListObj[id][e.target.dataset.attr][\n e.target.dataset.occupierid\n ];\n delete invoiceItemList[uniqueKey];\n }\n\n this.state.invoiceList = invoiceListObj;\n this.state.invoiceItemList = invoiceItemList;\n\n console.log(this.state.invoiceList, \"final list\", invoiceItemList);\n\n this.setState({});\n\n // this.setIsCheck([...isCheck, id]);\n // if (!checked) {\n // this.setIsCheck(isCheck.filter(item => item !== id));\n // }\n };\n redirectAfterSave = () => {\n this.setState({\n messsagePopup: false,\n popupMessageContent: \"\",\n });\n };\n\n sendInvoiceList = () => {\n //console.log(\"send list\", this.state.invoiceList);\n var data = JSON.stringify(this.state.invoiceList);\n var self = this;\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/transaction/send-invoice`,\n data: { list: data },\n }).then(function (response) {\n if (!response.data.success) {\n //actions.setSubmitting(false);\n //actions.setErrors(response.data);\n } else {\n self.setState({ messsagePopup: true, popupContent: response.data.msg });\n setTimeout(function () {\n self.state.formResponseData = [];\n self.getInvoicesList(self.state.selectedStatus);\n self.setState({});\n });\n }\n });\n };\n\n generateInvoice = () => {\n console.log(this.state.invoiceList, \"ohh \");\n var self = this;\n\n if (JSON.stringify(this.state.invoiceItemList) === JSON.stringify({})) {\n self.setState({\n messsagePopup: true,\n popupContent: \"Please Select Item to proceed.\",\n });\n return false;\n }\n\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/transaction/generate-invoice`,\n data: {\n list: this.state.invoiceList,\n companyId: this.state.initialValues.companyId,\n period: this.state.initialValues.financialYearOne,\n frequency: this.state.initialValues.frequencySelected,\n chargeType: this.state.initialValues.chargeTypeSelected,\n },\n }).then(function (response) {\n if (!response.data.success) {\n //actions.setSubmitting(false);\n //actions.setErrors(response.data);\n } else {\n self.setState({\n messsagePopup: true,\n popupContent: \"Data Saved Successfully\",\n });\n setTimeout(function () {\n self.state.formResponseData = [];\n self.getInvoicesList(self.state.selectedStatus);\n self.setState({});\n });\n }\n });\n };\n\n selectAll = () => this.selectAllCheckboxes(true);\n\n selectAllCheckboxes = (isSelected) => {\n Object.keys(this.state.formResponseData).forEach((checkbox) => {\n // BONUS: Can you explain why we pass updater function to setState instead of an object?\n this.setState((prevState) => ({\n checkboxes: {\n ...prevState.checkboxes,\n [checkbox]: isSelected,\n },\n }));\n\n this.state.formResponseData[checkbox][\n this.state.formResponseData[checkbox][\"invoice_id\"]\n ] = isSelected;\n });\n this.setState({});\n };\n\n render() {\n if (this.state.redirect == true) {\n let url = this.props.match;\n\n this.state.redirect = false;\n return \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n const handlePerRowsChange = async (newPerPage, page) => { };\n\n const handlePageChange = (page) => {\n this.setState({ pageNo: page }, () => {\n this.processInvoiceItems(this.state.selectedStatus);\n });\n };\n\n const handleRowSelected = (state) => {\n console.log(state.selectedRows.length);\n console.log(state.selectedRows);\n\n var invoiceListObj = {};\n if (state.selectedRows.length > 0) {\n state.selectedRows.forEach(function (items) {\n let leaseId = items[\"invoice_id\"];\n let pId = items[\"invoice_id\"];\n\n if (typeof invoiceListObj[leaseId] == \"undefined\") {\n invoiceListObj[leaseId] = {};\n }\n\n invoiceListObj[leaseId][pId] = true;\n });\n\n this.state.showStatusOption = true;\n } else {\n this.state.showStatusOption = false;\n }\n\n this.state.invoiceList = invoiceListObj;\n this.setState({});\n };\n\n return (\n <>\n \n
\n\n \n
\n - \n
- Transactions \n
- Print & Send Invoices \n
- \n Print Invoice\n \n
\n \n
\n \n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n
\n )}\n \n );\n }\n}\n\nexport default withRouter(LeaseExpiryReport);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport axios from \"axios\";\nimport {\n faChevronRight,\n faEye,\n faPen,\n faPlus,\n faTimes,\n faUndo,\n} from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType, fileUploadPath } from \"../utils/index\";\nimport { PopupMessage } from \"../utils/utils\";\nimport Popup from \"reactjs-popup\";\n//import { Chart } from \"react-google-charts\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\n\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({ id, type, name, handleClick, isChecked, attr, occupierId, netAmt, invoiceId }) => {\n return (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.counter = Math.random();\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n this.setState({ selectedStatus: \"generate\" });\n this.getInvoicesList(\"generate\")\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n \n {(close) => (\n \n\n {\n this.setState({\n selectedStatus: \"approve\",\n randomNum: Math.random()\n })\n this.getInvoicesList('approve');\n }}\n >\n
\n\n \n
\n\n\n \n
\n - \n
- Invoicing \n
- Transaction \n
- \n Generate Invoice\n \n
\n \n
\n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {\n this.setState({\n selectedStatus: \"draft\",\n randomNum: Math.random()\n })\n\n this.getInvoicesList('draft');\n }}\n >\n
\n \n {\n this.setState({\n selectedStatus: 'generate',\n randomNum: Math.random()\n })\n\n this.getInvoicesList('generate');\n }}\n >\n
\n\n \n
\n \n
\n \n \n\n \n
\n \n\n
\n \n
\n Generated Invoices ({this.state.countList.generated})
\n\n
\n \n
\n \n \n\n \n
\n \n\n
\n \n
\n Draft Invoices ({this.state.countList.draftCount})
\n\n
\n \n
\n \n \n\n \n
\n \n\n
\n \n
\n Approved Invoices ({this.state.countList.approveCount})
\n\n
\n \n\n \n
\n \n \n\n \n
\n \n\n
\n \n
\n Applied Invoices ({this.state.countList.applyCount})
\n\n
\n \n\n \n \n\n \n
\n \n \n\n \n
\n \n\n
\n \n
\n Cancelled Invoices ({this.state.countList.cancelCount})
\n\n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.counter = Math.random();\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n var self = this;\n //this.state.initialValues.financialYearOne = this.state.financialYearOne;\n var prm = Object.entries(this.state.initialValues)\n .map(([key, val]) => `${key}=${val}`)\n .join(\"&\");\n\n prm += \"&requestType=approve\";\n\n var tableCounter, counter = 0;\n console.log(this.state.initialValues, \"this.state.initialValues\");\n\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n fetch(\n `${apiUrl.apiUrl.url}/sales-input/fetch-invoice-data?` + prm,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //this.setState({ });\n console.log(data, \"data\");\n\n // var tableHeading = \"\";\n // if(\"Marketing Fund Tax\" == this.state.initialValues.chargeTypeSelected) {\n // tableHeading = \"MF\";\n // }else if(\"Property Tax\" == this.state.initialValues.chargeTypeSelected) {\n // tableHeading = \"P TAX\";\n // }else if(\"Parking 2W\" == this.state.initialValues.chargeTypeSelected || \"Parking 4W\" == this.state.initialValues.chargeTypeSelected || \"Parking Other\" == this.state.initialValues.chargeTypeSelected ) {\n // tableHeading = \"Utility\";\n // }else if(\"Storage\" == this.state.initialValues.chargeTypeSelected) {\n // tableHeading = \"Charge\";\n // }\n\n\n\n\n tableCounter = 0;\n this.setState({\n formResponseData: data.data,\n invoiceOtherData: data.otherDetails,\n });\n\n\n\n // this.setState({\n // currentDocument: data.otherDetails.document_url,\n // });\n\n // this.setState({\n // totalInvoiceAmount: data.otherDetails.total_amt.invoiceAmount,\n // });\n // this.setState({ fileName: data.otherDetails.fileName });\n // this.setState({ counter: counter });\n // this.setState({\n // exportUrl:\n // `${apiUrl.apiUrl.url}/sales-input/fetch-revenue-details?export=true&` +\n // prm,\n // });\n })\n .catch((error) => {\n console.log(error);\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n \n {(close) => (\n \n\n {\n console.log(nextValues, \"asdasdasd\");\n }}\n onReset={(values, actions) => {\n this.setState({\n //formResponseData: data,\n formResponseData: this.state.formResponseData,\n });\n }}\n onSubmit={(values, actions) => {\n var self = this;\n\n values[\"leaseId\"] = this.state.invoiceOtherData.leaseId;\n values[\"month\"] = this.state.invoiceOtherData.date;\n\n if (\n this.state.totalInvoiceAmount !=\n this.state.invoiceOtherData.total_amt.net_charge_amount\n ) {\n // alert(\"please settle invoice amount\");\n this.setState({\n popupalertMessage: true,\n popupMessageContent: 'please settle invoice amount',\n });\n return false;\n } else {\n this.uploader.uploadFile();\n values.filename =\n fileUploadPath() +\n this.state.invoiceOtherData.leaseId +\n \"/\" +\n this.state.fileName;\n values.chargeTypeSelected =\n this.state.initialValues.chargeTypeSelected;\n this.setState({ submitFormData: values });\n\n this.state.brandSelected = [];\n this.state.leaseSelected = [];\n this.state.securityDepositIds = [];\n\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.setState({});\n }\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n handleReset,\n\n isSubmitting,\n }) => (\n \n )}\n \n\n\n
\n );\n }\n}\n\nexport default withRouter(LeaseExpiryReport);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport axios from \"axios\";\nimport {\n faChevronRight,\n faEye,\n faPen,\n faPlus,\n faTimes,\n faUndo,\n} from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType, fileUploadPath } from \"../utils/index\";\nimport { PopupMessage } from \"../utils/utils\";\nimport Popup from \"reactjs-popup\";\n//import { Chart } from \"react-google-charts\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// });\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({ id, type, name, handleClick, isChecked, attr }) => {\n return (\n \n
\n\n\n \n
\n - \n
- Invoicing \n
- Transaction \n
- \n Approve Invoices\n \n
\n \n
\n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n return (\n \n {\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.counter = Math.random();\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n var self = this;\n //this.state.initialValues.financialYearOne = this.state.financialYearOne;\n var prm = Object.entries(this.state.initialValues)\n .map(([key, val]) => `${key}=${val}`)\n .join(\"&\");\n\n prm += \"&requestType=apply\";\n\n var tableCounter ,counter = 0;\n console.log(this.state.initialValues,\"this.state.initialValues\");\n \n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n fetch(\n `${apiUrl.apiUrl.url}/sales-input/fetch-invoice-data?` + prm,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n //this.setState({ });\n console.log(data,\"data\");\n\n // var tableHeading = \"\";\n // if(\"Marketing Fund Tax\" == this.state.initialValues.chargeTypeSelected) {\n // tableHeading = \"MF\";\n // }else if(\"Property Tax\" == this.state.initialValues.chargeTypeSelected) {\n // tableHeading = \"P TAX\";\n // }else if(\"Parking 2W\" == this.state.initialValues.chargeTypeSelected || \"Parking 4W\" == this.state.initialValues.chargeTypeSelected || \"Parking Other\" == this.state.initialValues.chargeTypeSelected ) {\n // tableHeading = \"Utility\";\n // }else if(\"Storage\" == this.state.initialValues.chargeTypeSelected) {\n // tableHeading = \"Charge\";\n // }\n\n\n\n\n tableCounter = 0;\n this.setState({\n formResponseData: data.data,\n invoiceOtherData: data.otherDetails,\n });\n\n\n\n // this.setState({\n // currentDocument: data.otherDetails.document_url,\n // });\n\n // this.setState({\n // totalInvoiceAmount: data.otherDetails.total_amt.invoiceAmount,\n // });\n // this.setState({ fileName: data.otherDetails.fileName });\n // this.setState({ counter: counter });\n // this.setState({\n // exportUrl:\n // `${apiUrl.apiUrl.url}/sales-input/fetch-revenue-details?export=true&` +\n // prm,\n // });\n })\n .catch((error) => {\n console.log(error);\n });\n }} \n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n \n {(close) => (\n \n\n {\n console.log(nextValues, \"asdasdasd\");\n }}\n onReset={(values, actions) => {\n this.setState({\n //formResponseData: data,\n formResponseData: this.state.formResponseData,\n });\n }}\n onSubmit={(values, actions) => {\n var self = this;\n\n values[\"leaseId\"] = this.state.invoiceOtherData.leaseId;\n values[\"month\"] = this.state.invoiceOtherData.date;\n\n if (\n this.state.totalInvoiceAmount !=\n this.state.invoiceOtherData.total_amt.net_charge_amount\n ) {\n // alert(\"please settle invoice amount\");\n this.setState({\n popupalertMessage:true,\n popupMessageContent:'please settle invoice amount' ,\n });\n return false;\n } else {\n this.uploader.uploadFile();\n values.filename =\n fileUploadPath() +\n this.state.invoiceOtherData.leaseId +\n \"/\" +\n this.state.fileName;\n values.chargeTypeSelected =\n this.state.initialValues.chargeTypeSelected;\n this.setState({ submitFormData: values });\n\n this.state.brandSelected = [];\n this.state.leaseSelected = [];\n this.state.securityDepositIds = [];\n\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.setState({});\n }\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n handleReset,\n\n isSubmitting,\n }) => (\n \n )}\n \n\n\n
\n );\n }\n}\n\nexport default withRouter(LeaseExpiryReport);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport axios from \"axios\";\nimport { faChevronRight, faSearch } from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport SimpleReactValidator from \"simple-react-validator\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType } from \"../../utils/index\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\n//import { Chart } from \"react-google-charts\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\nconst formValidation = Yup.object().shape({\n occupierId: Yup.string().required(\"Required\"),\n chargeAmount: Yup.string().required(\"Required\"),\n chargeDescription: Yup.string().required(\"Required\"),\n financialYearOne: Yup.string().required(\"Required\"),\n});\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({ id, type, name, handleClick, isChecked, attr }) => {\n return (\n \n
\n\n\n \n
\n- \n
- Invoicing \n
- Transaction \n
- \n Apply Invoices\n \n
\n \n
\n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n const handlePerRowsChange = async (newPerPage, page) => { };\n\n const handlePageChange = (page) => {\n this.setState({ pageNo: page }, () => {\n this.getDebitList(this.state.selectedStatus);\n });\n };\n\n const columns = [\n {\n name: \"Sr No\",\n //selector: row => row.lease_id,\n cell: (row, index) => index + 1,\n },\n {\n name: \"Lease ID\",\n selector: (row) => row.leaseName,\n wrap: true,\n },\n {\n name: \"Asset Name\",\n selector: (row) => row.assetName,\n wrap: true,\n },\n {\n name: \"Occupier Name\",\n selector: (row) => row.occupierName,\n wrap: true,\n },\n {\n name: \"Brand Name\",\n selector: (row) => row.brandName,\n wrap: true,\n },\n {\n name: 'HSN/SAC Code',\n selector: (row) => row.hsnCode\n },\n {\n name: \"Debit Number\",\n selector: (row) => row.debitNumber,\n sortable: true,\n wrap: true,\n },\n {\n name: \"Charge Period\",\n selector: (row) => row.debitPeriod,\n },\n {\n name: \"Charge Type\",\n selector: (row) => row.chargeType,\n wrap: true,\n },\n {\n name: \"Charge Base Amount\",\n selector: (row) => row.chargeAmount,\n },\n {\n name: \"GST Rate\",\n selector: (row) => row.gst_rate,\n },\n {\n name: \"GST Amount\",\n selector: (row) => row.gross_amt,\n },\n {\n name: \"TDS Rate\",\n selector: (row) => row.tds_rate,\n },\n {\n name: \"TDS Amount\",\n selector: (row) => row.tds_amt,\n },\n {\n name: \"Net Amount\",\n selector: (row) => row.net_amt,\n },\n ];\n\n const handleRowSelected = (state) => {\n console.log(state.selectedRows.length);\n console.log(state.selectedRows);\n\n var invoiceListObj = {};\n if (state.selectedRows.length > 0) {\n state.selectedRows.forEach(function (items) {\n let leaseId = items[\"lease_id\"];\n let pId = items[\"debitId\"];\n\n if (typeof invoiceListObj[leaseId] == \"undefined\") {\n invoiceListObj[leaseId] = {};\n }\n\n invoiceListObj[leaseId][pId] = true;\n });\n\n this.state.showStatusOption = true;\n } else {\n this.state.showStatusOption = false;\n }\n\n this.state.invoiceList = invoiceListObj;\n this.setState({});\n };\n\n return (\n <>\n \n
\n\n \n
\n - \n
- Invoicing \n
- Transaction \n
- \n \n DEBIT – CREDIT NOTES \\ DEBIT NOTES\n \n \n
\n \n
\n \n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {\n this.setState({\n selectedStatus: 0,\n randomNum: Math.random(),\n tableCounter: Math.random(),\n pageNo: 1,\n });\n this.getDebitList(0);\n }}\n >\n
\n\n \n Draft Debit Note (\n {this.state.notesCount[0] ? this.state.notesCount[0] : 0}\n )\n
\n\n Approved Debit Note (\n {this.state.notesCount[1] ? this.state.notesCount[1] : 0})\n
\n \n\n\n Applied Debit Note (\n {this.state.notesCount[2] ? this.state.notesCount[2] : 0})\n
\n \n\n\n Cancelled Debit Note (\n {this.state.notesCount[3] ? this.state.notesCount[3] : 0})\n
\n \n \n\n\n {this.state.showStatusOption > 0 && this.state.selectedStatus == 0 && (\n
\n \n\n );\n }\n}\n\nexport default withRouter(DebitComponent);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport axios from \"axios\";\nimport { faChevronRight, faSearch } from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType } from \"../../utils/index\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport SimpleReactValidator from \"simple-react-validator\";\n//import { Chart } from \"react-google-charts\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// });\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({ id, type, name, handleClick, isChecked, attr }) => {\n return (\n \n
\n )}\n\n {this.state.showStatusOption > 0 && this.state.selectedStatus == 1 && (\n \n \n \n
\n \n
\n )}\n \n \n \n
\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n const handlePerRowsChange = async (newPerPage, page) => { };\n\n const handlePageChange = (page) => {\n console.log(\"Page: \" + page);\n this.getDebitList(this.state.selectedStatus, page);\n };\n\n const columns = [\n {\n name: \"Sr No\",\n //selector: row => row.lease_id,\n cell: (row, index) => index + 1,\n },\n {\n name: \"Lease ID\",\n selector: (row) => row.leaseName,\n },\n {\n name: \"Asset Name\",\n selector: (row) => row.assetName,\n wrap: true,\n },\n {\n name: \"Occupier Name\",\n selector: (row) => row.occupierName,\n wrap: true,\n },\n {\n name: \"Brand Name\",\n selector: (row) => row.brandName,\n wrap: true,\n },\n\n {\n name: 'HSN/SAC Code',\n selector: (row) => row.hsnCode\n },\n {\n name: \"Credit Number\",\n selector: (row) => row.debitNumber,\n wrap: true,\n sortable: true,\n },\n {\n name: \"Charge Period\",\n selector: (row) => row.debitPeriod,\n },\n {\n name: \"Charge Type\",\n selector: (row) => row.chargeType,\n wrap: true,\n },\n {\n name: \"Charge Base Amount\",\n selector: (row) => row.chargeAmount,\n wrap: true,\n },\n {\n name: \"GST Rate\",\n selector: (row) => row.gst_rate,\n },\n {\n name: \"GST Amount\",\n selector: (row) => row.gross_amt,\n },\n {\n name: \"TDS Rate\",\n selector: (row) => row.tds_rate,\n },\n {\n name: \"TDS Amount\",\n selector: (row) => row.tds_amt,\n },\n {\n name: \"Net Amount\",\n selector: (row) => row.net_amt,\n },\n ];\n\n const handleRowSelected = (state) => {\n //setSelectedRows(state.selectedRows);\n console.log(state.selectedRows);\n //console.log(state.selectedRows[0]->)\n //this.state.selectedRows=state.selectedRows;\n //this.setState({});\n //console.log(this.state.selectedRows);\n\n console.log(state.selectedRows.length);\n\n var invoiceListObj = {};\n if (state.selectedRows.length > 0) {\n state.selectedRows.forEach(function (items) {\n console.log(items[\"debitId\"] + \"...\" + items[\"lease_id\"]);\n let leaseId = items[\"lease_id\"];\n let pId = items[\"debitId\"];\n\n if (typeof invoiceListObj[leaseId] == \"undefined\") {\n invoiceListObj[leaseId] = {};\n }\n\n invoiceListObj[leaseId][pId] = true;\n });\n\n this.state.showStatusOption = true;\n } else {\n this.state.showStatusOption = false;\n }\n\n this.state.invoiceList = invoiceListObj;\n this.setState({});\n\n console.log(this.state.invoiceList);\n console.log(this.state.invoiceList.length);\n };\n\n return (\n <>\n \n
\n\n \n
\n - \n
- Invoicings \n
- Transaction \n
- \n \n CREDIT – CREDIT NOTES \\ CREDIT NOTES\n \n \n
\n \n
\n \n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {\n this.setState({\n selectedStatus: 0,\n randomNum: Math.random(),\n pageNo: 1,\n });\n this.getDebitList(0, 1);\n }}\n >\n
\n\n \n Draft Credit Note {\"\"}\n ({this.state.notesCount[0] ? this.state.notesCount[0] : 0})\n
\n\n Approved Credit Note {\"\"}\n ({this.state.notesCount[1] ? this.state.notesCount[1] : 0})\n
\n \n\n\n Applied Credit Note {\"\"}\n ({this.state.notesCount[2] ? this.state.notesCount[2] : 0})\n
\n \n\n\n Cancelled Credit Note {\"\"}\n ({this.state.notesCount[3] ? this.state.notesCount[3] : 0})\n
\n \n \n\n\n \n \n
\n )}\n\n {this.state.showStatusOption && this.state.selectedStatus == 1 && (\n \n \n \n
\n )}\n \n );\n }\n}\n\nexport default withRouter(CreditComponent);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport axios from \"axios\";\nimport { faChevronRight, faSearch } from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType } from \"../../utils/index\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport SimpleReactValidator from \"simple-react-validator\";\n//import { Chart } from \"react-google-charts\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// });\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({ id, type, name, handleClick, isChecked, attr }) => {\n return (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n const handlePerRowsChange = async (newPerPage, page) => { };\n\n const handlePageChange = (page) => {\n this.setState({ pageNo: page }, () => {\n this.getDebitList(this.state.selectedStatus);\n });\n };\n\n const columns = [\n {\n name: \"Sr No\",\n //selector: row => row.lease_id,\n cell: (row, index) => index + 1,\n },\n {\n name: \"Lease ID\",\n selector: (row) => row.leaseName,\n wrap: true,\n },\n {\n name: \"Asset Name\",\n selector: (row) => row.assetName,\n wrap: true,\n },\n {\n name: \"Occupier Name\",\n selector: (row) => row.occupierName,\n wrap: true,\n },\n {\n name: \"Brand Name\",\n selector: (row) => row.brandName,\n wrap: true,\n },\n {\n name: \"Charge Type\",\n selector: (row) => row.chargeType,\n wrap: true,\n sortable: true,\n },\n {\n name: \"Receipt Date\",\n selector: (row) => row.transactionDate,\n },\n {\n name: \"Receipt Mode\",\n selector: (row) => row.receiptMode,\n },\n {\n name: \"Payment Instrument No\",\n selector: (row) => row.paymentInstrumentNo,\n wrap: true,\n },\n {\n name: \"Adjusted Open Invoice\",\n selector: (row) => row.open_invoice,\n },\n {\n name: \"Adjusted Invoice Number\",\n wrap: true,\n selector: (row) => row.invoice_number,\n },\n {\n name: \"Receipt Amount\",\n selector: (row) => row.chargeAmount,\n },\n {\n name: \"Receipt Number\",\n selector: (row) => row.transactionNumber,\n wrap: true,\n },\n ];\n\n const handleRowSelected = (state) => {\n console.log(state.selectedRows.length);\n console.log(state.selectedRows);\n\n var invoiceListObj = {};\n if (state.selectedRows.length > 0) {\n state.selectedRows.forEach(function (items) {\n let leaseId = items[\"lease_id\"];\n let pId = items[\"transactionId\"];\n\n if (typeof invoiceListObj[leaseId] == \"undefined\") {\n invoiceListObj[leaseId] = {};\n }\n\n invoiceListObj[leaseId][pId] = true;\n });\n\n this.state.showStatusOption = true;\n } else {\n this.state.showStatusOption = false;\n }\n\n this.state.invoiceList = invoiceListObj;\n this.setState({});\n };\n\n return (\n \n {\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.counter = Math.random();\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n var self = this;\n\n if (!this.validator.allValid()) {\n this.validator.getErrorMessages();\n this.validator.showMessages();\n return false;\n }\n\n console.log(values, \"values\");\n values.financialYearOne = this.state.financialYearOne;\n values.applyOpenInvoice = this.state.initialValues.applyOpenInvoice;\n values.openInvoiceNumber =\n this.state.initialValues.openInvoiceNumberId;\n values.receiptMode = this.state.initialValues.receiptMode;\n values.adjustmentLogic = this.state.initialValues.adjustmentLogic;\n values.transaction_type = \"general\";\n\n if (\n this.state.initialValues.applyOpenInvoiceSelected == \"Yes\" &&\n this.state.initialValues.openInvoiceAmt != values.chargeAmount &&\n values.chargeAmount != 0\n ) {\n self.setState({\n messsagePopup: true,\n popupContent:\n \"Receipt Charge Amount must be same as selected invoice amount\t\t\t\t\t\t\t\t\",\n });\n return false;\n }\n\n axios({\n method: \"post\",\n url: `${apiUrl.apiUrl.url}/transaction/generate-general-receipt`,\n data: values,\n }).then(function (response) {\n if (!response.data.success) {\n self.setState({\n messsagePopup: true,\n popupContent: response.data.msg,\n });\n setTimeout(function () {\n self.setState({});\n });\n } else {\n self.setState({\n messsagePopup: true,\n popupContent: \"Data Saved Successfully\",\n });\n\n self.getDebitList(self.state.selectedStatus);\n self.state.chargeTypeSelected = \"\";\n self.state.financialYearOne = \"\";\n self.state.initialValues = {\n chargeTypeSelected: \"\",\n frequencySelected: \"\",\n chartType: \"\",\n landloardName: \"\",\n landloardId: \"\",\n subAssetName: \"\",\n subAssetId: \"\",\n companyName: \"\",\n companyId: \"\",\n cityName: \"\",\n cityId: \"\",\n occupierName: \"\",\n occupierId: \"\",\n companyPan: \"\",\n leaseCode: \"\",\n leaseId: \"\",\n chargeAmount: \"\",\n chargeDescription: \"\",\n receiptModeSelected: \"\",\n receiptMode: \"\",\n paymentInstrumentNo: \"\",\n applyOpenInvoiceSelected: \"\",\n applyOpenInvoice: \"\",\n openInvoiceNumberSelected: \"\",\n openInvoiceAmt: 0,\n openInvoiceNumber: \"\",\n financialInstitutionName: \"\",\n branchName: \"\",\n invoiceDescription: \"\",\n adjustmentLogic: \"\",\n };\n\n setTimeout(function () {\n self.setState({});\n });\n }\n });\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n <>\n\n \n {(close) => (\n \n\n {\n this.setState({\n selectedStatus: 1,\n randomNum: Math.random(),\n tableCounter: Math.random(),\n pageNo: 1,\n });\n this.getDebitList(1);\n }}\n >\n
\n\n \n
\n\n \n
\n - \n
- TRANSACTIONS \n
- RECEIPTS \n
- \n GENERAL RECEIPTS\n \n
\n \n
\n \n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {\n this.setState({\n selectedStatus: 0,\n randomNum: Math.random(),\n tableCounter: Math.random(),\n pageNo: 1,\n });\n this.getDebitList(0);\n }}\n >\n
\n\n \n Draft Receipts (\n {this.state.notesCount[0] ? this.state.notesCount[0] : 0})\n
\n\n Approved Receipts (\n {this.state.notesCount[1] ? this.state.notesCount[1] : 0})\n
\n\n Applied Receipts (\n {this.state.notesCount[2] ? this.state.notesCount[2] : 0})\n
\n \n\n\n Cancelled Receipts (\n {this.state.notesCount[3] ? this.state.notesCount[3] : 0})\n
\n \n \n\n\n \n \n
\n )}\n\n {this.state.showStatusOption > 0 && this.state.selectedStatus == 1 && (\n \n \n \n
\n )}\n \n );\n }\n}\n\nexport default withRouter(GeneralComponent);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport axios from \"axios\";\nimport { faChevronRight, faSearch } from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType } from \"../../utils/index\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport SimpleReactValidator from \"simple-react-validator\";\n//import { Chart } from \"react-google-charts\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// });\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({ id, type, name, handleClick, isChecked, attr }) => {\n return (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n const handlePerRowsChange = async (newPerPage, page) => { };\n\n const handlePageChange = (page) => {\n this.setState({ pageNo: page }, () => {\n this.getDebitList(this.state.selectedStatus);\n });\n };\n\n const columns = [\n {\n name: \"Sr No\",\n //selector: row => row.lease_id,\n cell: (row, index) => index + 1,\n },\n {\n name: \"Lease ID\",\n selector: (row) => row.leaseName,\n wrap: true,\n },\n {\n name: \"Asset Name\",\n selector: (row) => row.assetName,\n wrap: true,\n },\n {\n name: \"Occupier Name\",\n selector: (row) => row.occupierName,\n wrap: true,\n },\n {\n name: \"Brand Name\",\n selector: (row) => row.brandName,\n wrap: true,\n },\n {\n name: \"Charge Type\",\n selector: (row) => row.chargeType,\n wrap: true,\n sortable: true,\n },\n {\n name: \"Receipt Date\",\n selector: (row) => row.transactionDate,\n },\n {\n name: \"Receipt Mode\",\n selector: (row) => row.receiptMode,\n wrap: true,\n },\n {\n name: \"Payment Instrument No\",\n selector: (row) => row.paymentInstrumentNo,\n wrap: true,\n },\n {\n name: \"Receipt Amount\",\n selector: (row) => row.chargeAmount,\n wrap: true,\n },\n {\n name: \"Receipt Number\",\n selector: (row) => row.receipt_number,\n wrap: true,\n },\n ];\n\n const handleRowSelected = (state) => {\n console.log(state.selectedRows.length);\n console.log(state.selectedRows);\n\n var invoiceListObj = {};\n if (state.selectedRows.length > 0) {\n state.selectedRows.forEach(function (items) {\n let leaseId = items[\"lease_id\"];\n let pId = items[\"transactionId\"];\n\n if (typeof invoiceListObj[leaseId] == \"undefined\") {\n invoiceListObj[leaseId] = {};\n }\n\n invoiceListObj[leaseId][pId] = true;\n });\n\n this.state.showStatusOption = true;\n } else {\n this.state.showStatusOption = false;\n }\n\n this.state.invoiceList = invoiceListObj;\n this.setState({});\n };\n\n return (\n <>\n \n
\n\n \n
\n - \n
- TRANSACTIONS \n
- RECEIPTS \n
- \n DEPOSIT RECEIPTS\n \n
\n \n
\n \n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n {\n this.setState({\n selectedStatus: 0,\n randomNum: Math.random(),\n tableCounter: Math.random(),\n pageNo: 1,\n });\n this.getDebitList(0);\n }}\n >\n
\n\n \n Draft Receipts (\n {this.state.notesCount[0] ? this.state.notesCount[0] : 0})\n
\n\n Approved Receipts (\n {this.state.notesCount[1] ? this.state.notesCount[1] : 0})\n
\n \n\n\n Applied Receipts (\n {this.state.notesCount[2] ? this.state.notesCount[2] : 0})\n
\n \n\n\n Cancelled Receipts (\n {this.state.notesCount[3] ? this.state.notesCount[3] : 0})\n
\n \n \n\n\n\n \n \n
\n )}\n\n {this.state.showStatusOption > 0 && this.state.selectedStatus == 1 && (\n \n \n \n
\n )}\n \n );\n }\n}\n\nexport default withRouter(CreditComponent);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport axios from \"axios\";\nimport { faChevronRight, faSearch } from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType } from \"../../utils/index\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport SimpleReactValidator from \"simple-react-validator\";\n//import { Chart } from \"react-google-charts\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// });\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({ id, type, name, handleClick, isChecked, attr }) => {\n return (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n const handlePerRowsChange = async (newPerPage, page) => { };\n\n const handlePageChange = (page) => {\n this.setState({ pageNo: page }, () => {\n this.getDebitList(this.state.selectedStatus);\n });\n };\n\n const columns = [\n {\n name: \"Sr No\",\n //selector: row => row.lease_id,\n cell: (row, index) => index + 1,\n },\n {\n name: \"Lease ID\",\n selector: (row) => row.leaseName,\n wrap: true,\n },\n {\n name: \"Asset Name\",\n selector: (row) => row.assetName,\n wrap: true,\n },\n {\n name: \"Occupier Name\",\n selector: (row) => row.occupierName,\n wrap: true,\n },\n {\n name: \"Landlord Name\",\n selector: (row) => row.landlordName,\n wrap: true,\n },\n {\n name: \"Brand Name\",\n selector: (row) => row.brandName,\n wrap: true,\n },\n {\n name: \"Charge Type\",\n selector: (row) => row.chargeType,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Charge Period\",\n selector: (row) => row.chargePeriod,\n wrap: true,\n sortable: true,\n },\n {\n name: \"Document Type\",\n selector: (row) => row.documentType,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Document Date\",\n selector: (row) => row.documentDate,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Document Number\",\n selector: (row) => row.documentNumber,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Document Description\",\n selector: (row) => row.documentDesc,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Document Amount\",\n selector: (row) => row.amt,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Balance\",\n selector: (row) => row.bal,\n wrap: true,\n sortable: true,\n },\n ];\n\n const handleRowSelected = (state) => {\n console.log(state.selectedRows.length);\n console.log(state.selectedRows);\n\n var invoiceListObj = {};\n if (state.selectedRows.length > 0) {\n state.selectedRows.forEach(function (items) {\n let leaseId = items[\"lease_id\"];\n let pId = items[\"transactionId\"];\n\n if (typeof invoiceListObj[leaseId] == \"undefined\") {\n invoiceListObj[leaseId] = {};\n }\n\n invoiceListObj[leaseId][pId] = true;\n });\n\n this.state.showStatusOption = true;\n } else {\n this.state.showStatusOption = false;\n }\n\n this.state.invoiceList = invoiceListObj;\n this.setState({});\n };\n\n return (\n <>\n \n
\n\n \n
\n - \n
- TRANSACTIONS \n
- LEDGERS \n
- \n GENERAL LEDGERS\n \n
\n \n
\n \n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n
\n )}\n \n );\n }\n}\n\nexport default withRouter(GeneralComponent);\n","import React from \"react\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport DatePicker from \"react-datepicker\";\nimport \"react-datepicker/dist/react-datepicker.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport axios from \"axios\";\nimport { faChevronRight, faSearch } from \"@fortawesome/free-solid-svg-icons\";\n//import axios from \"axios\";\nimport \"bootstrap/dist/css/bootstrap.css\";\n//import styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\n//import CreatableSelect from \"react-select/creatable\";\nimport { Redirect, withRouter, Link } from \"react-router-dom\";\nimport Select from \"react-select\";\nimport * as Yup from \"yup\";\nimport { getUserType } from \"../../utils/index\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Popup from \"reactjs-popup\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport SimpleReactValidator from \"simple-react-validator\";\n//import { Chart } from \"react-google-charts\";\nimport {\n Chart as ChartJS,\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend,\n} from \"chart.js\";\nimport { Line, Bar } from \"react-chartjs-2\";\nimport { Chart } from \"react-google-charts\";\nimport { counter } from \"@fortawesome/fontawesome-svg-core\";\nChartJS.register(\n LineController,\n CategoryScale,\n LinearScale,\n PointElement,\n LineElement,\n BarElement,\n Title,\n Tooltip,\n Legend\n);\n\n// const reportFilterForm = Yup.object().shape({\n// countryId: Yup.string().required(\"Required\"),\n// stateId: Yup.string().required(\"Required\"),\n// districtId: Yup.string().required(\"Required\"),\n// cityId: Yup.string().required(\"Required\"),\n// });\nconst labels = [\n \"Expiring in 3 Months\",\n \"Expiring in 6 Months\",\n \"Expiring in 9 Months\",\n \"Expiring in 12 Months\",\n \"Expiring in over 12 Months\",\n];\n\nconst Checkbox = ({ id, type, name, handleClick, isChecked, attr }) => {\n return (\n \n {this.renderForm()}\n
\n );\n }\n\n renderForm() {\n const handlePerRowsChange = async (newPerPage, page) => { };\n\n const handlePageChange = (page) => {\n this.setState({ pageNo: page }, () => {\n this.getDebitList(this.state.selectedStatus);\n });\n };\n\n const columns = [\n {\n name: \"Sr No\",\n //selector: row => row.lease_id,\n cell: (row, index) => index + 1,\n },\n {\n name: \"Lease ID\",\n selector: (row) => row.leaseName,\n wrap: true,\n },\n {\n name: \"Asset Name\",\n selector: (row) => row.assetName,\n wrap: true,\n },\n {\n name: \"Occupier Name\",\n selector: (row) => row.occupierName,\n wrap: true,\n },\n {\n name: \"Landlord Name\",\n selector: (row) => row.landlordName,\n wrap: true,\n },\n {\n name: \"Brand Name\",\n selector: (row) => row.brandName,\n wrap: true,\n },\n {\n name: \"Charge Type\",\n selector: (row) => row.chargeType,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Charge Period\",\n selector: (row) => row.chargeType,\n wrap: true,\n sortable: true,\n },\n {\n name: \"Document Type\",\n selector: (row) => row.documentType,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Document Date\",\n selector: (row) => row.documentDate,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Document Number\",\n selector: (row) => row.documentNumber,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Document Description\",\n selector: (row) => row.documentDesc,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Document Amount\",\n selector: (row) => row.amt,\n wrap: true,\n sortable: true,\n },\n\n {\n name: \"Balance\",\n selector: (row) => row.bal,\n wrap: true,\n sortable: true,\n },\n ];\n\n const handleRowSelected = (state) => {\n console.log(state.selectedRows.length);\n console.log(state.selectedRows);\n\n var invoiceListObj = {};\n if (state.selectedRows.length > 0) {\n state.selectedRows.forEach(function (items) {\n let leaseId = items[\"lease_id\"];\n let pId = items[\"transactionId\"];\n\n if (typeof invoiceListObj[leaseId] == \"undefined\") {\n invoiceListObj[leaseId] = {};\n }\n\n invoiceListObj[leaseId][pId] = true;\n });\n\n this.state.showStatusOption = true;\n } else {\n this.state.showStatusOption = false;\n }\n\n this.state.invoiceList = invoiceListObj;\n this.setState({});\n };\n\n return (\n <>\n \n
\n\n \n
\n - \n
- TRANSACTIONS \n
- LEDGERS \n
- \n DEPOSIT LEDGERS\n \n
\n \n
\n \n )}\n \n\n \n {this.state.popupMessageContent}\n \n ×\n \n
\n )}\n \n \n \n
\n )}\n \n );\n }\n}\n\nexport default withRouter(DepositComponent);\n","import {\n BrowserRouter as Router,\n Switch,\n Route,\n Link,\n useRouteMatch,\n useParams,\n} from \"react-router-dom\";\n\nimport SideMenu from \"./SideMenu\";\n// import UnitDetailMaster from \"./storeDirectory/UnitDetailMaster\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faUserCircle,\n faSignOutAlt,\n faFileAlt,\n} from \"@fortawesome/free-solid-svg-icons\";\n\nimport GenerateTransaction from \"./GenerateTransaction\";\nimport InvoicePrint from \"./InvoicePrint\";\nimport InvoiceSend from \"./InvoiceSend\";\nimport ApproveTransaction from \"./ApproveTransaction\";\nimport ApplyTransaction from \"./ApplyTransaction\";\nimport DebitComponent from \"./debit/DebitComponent\";\nimport CreditComponent from \"./credit/CreditComponent\";\nimport GeneralComponent from \"./receipt/General\";\nimport ReceiptDeposit from \"./receipt/Deposit\";\n\n\nimport GeneralLedgerComponent from \"./ledger/General\";\nimport DepositLedgerComponent from \"./ledger/Deposit\";\nimport TopHeader from \"../layout/TopHeader\";\n\nimport { getUserRole } from \"../utils/index\";\n\nexport default function ViewLease() {\n let match = useRouteMatch();\n\n let reportArr = [\n ];\n\n return (\n \n
\n );\n}\n","import React, { useState, useEffect } from \"react\";\nimport axios from \"axios\";\nimport styled from \"styled-components\";\nimport styles from \"../../masters/master.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faSearch, faPlus, faPen } from \"@fortawesome/free-solid-svg-icons\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport DataTable, {\n createTheme,\n defaultThemes,\n} from \"react-data-table-component\";\nimport datatableOptions from \"../../layout/datatableConstants\";\nimport { Link } from \"react-router-dom\";\nlet columns,\n columnsExpiry = [\n {\n name: \"S.No\",\n selector: \"srNo\",\n sortable: false,\n grow: 1,\n },\n {\n name: \"Asset Name\",\n selector: \"assetName\",\n sortable: false,\n grow: 3,\n },\n {\n name: \"Brand\",\n selector: \"brandName\",\n sortable: false,\n grow: 3,\n },\n {\n name: \"Lease Number\",\n selector: \"leaseCode\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Unit Number\",\n selector: \"unit_no\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Gross Leasable Area (sq.ft)\",\n selector: \"gross_leasable_area\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Lease Term\",\n selector: \"leaseTerm\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Lease Commencement Date\",\n selector: \"lcd\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Lease Expiry Date\",\n selector: \"led\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Renewal Option\",\n selector: \"renewal_option\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Renewal Notice Due On\",\n selector: \"renewal_notice_due\",\n grow: 2,\n sortable: false,\n },\n ];\n\nlet columnsLockIn = [\n {\n name: \"S.No\",\n selector: \"srNo\",\n sortable: false,\n grow: 1,\n },\n {\n name: \"Asset Name\",\n selector: \"assetName\",\n sortable: false,\n grow: 3,\n },\n {\n name: \"Brand\",\n selector: \"brandName\",\n sortable: false,\n grow: 3,\n },\n {\n name: \"Lease Number\",\n selector: \"leaseCode\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Unit Number\",\n selector: \"unit_no\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Gross Leasable Area (sq.ft)\",\n selector: \"gross_leasable_area\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Lease Term\",\n selector: \"leaseTerm\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Lock-In Start Date\",\n selector: \"llsd\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Lock-In End Date\",\n selector: \"lled\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Termination Notice Period\",\n selector: \"lease_expiry_np\",\n grow: 2,\n sortable: false,\n },\n];\n\nlet columnsRent = [\n {\n name: \"S.No\",\n selector: \"srNo\",\n sortable: false,\n grow: 1,\n },\n {\n name: \"Asset Name\",\n selector: \"assetName\",\n sortable: false,\n grow: 3,\n },\n {\n name: \"Brand\",\n selector: \"brandName\",\n sortable: false,\n grow: 3,\n },\n {\n name: \"Lease Number\",\n selector: \"leaseCode\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Unit Number\",\n selector: \"unit_no\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Gross Leasable Area (sq.ft)\",\n selector: \"gross_leasable_area\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Lease Term\",\n selector: \"leaseTerm\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Current Rent Logic\",\n selector: \"old_logic\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"Current Rent\",\n selector: \"old_rent\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"New Rent Logic\",\n selector: \"new_logic\",\n grow: 2,\n sortable: false,\n },\n {\n name: \"New Rent\",\n selector: \"new_rent\",\n grow: 2,\n sortable: false,\n },\n];\n\nconst TextField = styled.input`\n height: 32px;\n width: 200px;\n border-radius: 3px;\n border-top-left-radius: 5px;\n border-bottom-left-radius: 5px;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border: 1px solid #e5e5e5;\n padding: 0 32px 0 16px;\n\n &:hover {\n cursor: pointer;\n }\n`;\n\nconst ClearButton = styled.button`\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n border-top-right-radius: 5px;\n border-bottom-right-radius: 5px;\n columns={columns}\n height: 34px;\n width: 32px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color:#003970;\n`;\n\nconst FilterComponent = ({ filterText, onFilter, onClear }) => (\n <>\n \n
\n \n {(getUserRole() != \"checker\") && (\n <>\n \n\n \n \n\n \n \n\n \n \n\n\n \n \n\n \n \n\n\n \n \n\n \n \n\n \n \n\n \n \n\n \n {/* \n\n\n \n \n )}\n
\n \n
*/}\n \n
\n \n \n
\n
\n \n
\n \n
\n );\n};\nexport default AlertsTable;\n","import React from \"react\";\nimport \"bootstrap/dist/css/bootstrap.css\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faPlus,\n faUndo,\n faEye,\n faPen,\n faTimes,\n} from \"@fortawesome/free-solid-svg-icons\";\nimport styles from \"../../masters/master.css\";\nimport apiUrl from \"../../apiUrlConstant\";\nimport { withRouter, Link } from \"react-router-dom\";\nimport AlertsTable from \"./AlertsTable\";\nimport TopHeader from \"../../layout/TopHeader\";\nimport BottomNav from \"../../layout/BottomNav\";\nimport Dropdown from \"react-bootstrap/Dropdown\";\nimport { Formik, Form, Field, ErrorMessage } from \"formik\";\nimport { Modal, Button } from \"react-bootstrap\";\nimport DatePicker from \"react-datepicker\";\nimport { ReactMultiEmail } from \"react-multi-email\";\nimport axios from \"axios\";\nimport * as Yup from \"yup\";\nimport { PopupMessage } from \"../../utils/utils\";\nimport Select, {\n components,\n MultiValueGenericProps,\n MultiValueProps,\n OnChangeValue,\n Props,\n} from \"react-select\";\nimport { getUserType } from \"../../utils/index\";\nconst selectStyles = {\n border: \"0\",\n background: \"#ddd\",\n};\nif (getUserType() == \"Landlord\") {\n var reportFilterForm = Yup.object().shape({\n //assetId: Yup.string().required(\"Required\"),\n });\n} else if (getUserType() == \"Occupier\") {\n var reportFilterForm = Yup.object().shape({\n //brandId: Yup.number().required(\"Required\"),\n });\n} else {\n var reportFilterForm = Yup.object().shape({});\n}\n\nlet monthsArr = [];\nvar i = 0;\nfor (; i <= 12; i++) {\n monthsArr.push({ id: i, value: i });\n}\n\nvar tableCounter = 0;\nconst headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n};\n\nclass Alerts extends React.Component {\n state = {\n dropdownValue: \"Select Months\",\n isOpen: false,\n frequency: \"\",\n leaseData: \"LEASE EXPIRY\",\n counter: Math.random(),\n brandSelected: [],\n selectedValue: [],\n setSelectedValue: [],\n leaseSelected: [],\n countries: [],\n monthsArr: [],\n districtList: [],\n cityList: [],\n brandCatList: [],\n brandList: [],\n financialYear: [],\n assetsList: [],\n redirect: false,\n messsagePopup: false,\n popupContent: \"Data Saved Successfully!\",\n states: [],\n assetTypes: [],\n assets: [],\n subAssets: [],\n countries: [],\n states: [],\n districts: [],\n cities: [],\n assetType: \"\",\n asset: \"\",\n subAsset: \"\",\n cityId: \"\",\n url: `${apiUrl.apiUrl.url}/user-alert/create-alert`,\n additionParams: \"\",\n financialYearOne: \"\",\n financialYearTwo: \"\",\n\n id: undefined,\n selectedBrand: \"\",\n counter: 0,\n selectedAsset: \"\",\n\n leaseList: [],\n formResponseData: [],\n formResponseData1: {\n forecasteDetails: {\n forecast: [],\n actual: [],\n },\n },\n initialForecast: {},\n initialValues: {\n brandId: [],\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n brandCatId: \"\",\n brandName: [],\n leaseId: \"\",\n chargeTypeSelected: [],\n financialYear: \"\",\n chargeType: \"\",\n financialYearOne: \"Period 1\",\n financialYearTwo: \"Period 2\",\n //assetId: \"\",\n },\n initialValuesAlertSettings: {\n assetTypeId: \"\",\n assetId: \"\",\n subAssetId: \"\",\n towerName: \"\",\n assetName: \"\",\n subAssetName: \"\",\n assetType: \"\",\n countryId: \"\",\n stateId: \"\",\n districtId: \"\",\n cityId: \"\",\n frequencySelected: [],\n },\n };\n\n openModal = () => this.setState({ isOpen: true });\n closeModal = () => this.setState({ isOpen: false });\n setValue(e) {\n this.setState({ dropdownValue: e });\n }\n\n getAssetsList = (input, e, cust) => {\n if (\n (typeof e != \"undefined\" && e.action == \"input-change\") ||\n cust === true\n ) {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n this.state.initialValues.cityId +\n `&assetName=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n }\n };\n\n setMasterPreValues = (input) => {\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-select-asset-details?assetId=` +\n input,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data.countries,\n districtList: data.district,\n states: data.state,\n cityList: data.cities,\n });\n this.state.initialValues.stateId = data.data.stateId.stateId;\n this.state.initialValues.state_name = data.data.stateId.state_name;\n this.state.initialValues.cityId = data.data.cityId.cityId;\n this.state.initialValues.cityName = data.data.cityId.cityName;\n this.state.initialValues.districtId = data.data.districtId.districtId;\n this.state.initialValues.districtName =\n data.data.districtId.districtName;\n this.state.initialValues.countryId = data.data.countryId.countryId;\n this.state.initialValues.countryName = data.data.countryId.countryName;\n this.state.initialValues.brandId = [];\n if (\n this.state.initialValues.brandId.length == 0 ||\n this.state.initialValues.brandId == \"\"\n ) {\n this.state.initialValues.brandCatId = data.data.catId;\n this.state.initialValues.brandCatName = data.data.cat_name;\n this.state.brandList = data.brandList;\n this.state.brandSelected = [\n { value: data.data.brandId, label: data.data.brand_name },\n ];\n // this.state.initialValues.brandId = [data.data.brandId];\n }\n this.setState({});\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n valueChange = (newValue, actionMeta) => {\n //newValue.value = newValue.target.value;\n //newValue.label = newValue.target.value;\n\n if (actionMeta == \"change_state\") {\n this.state.initialValues.stateId = newValue.value;\n this.state.initialValues.state_name = newValue.label;\n\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n this.state.initialValues.assetId = \"\";\n this.state.initialValues.assetName = \"\";\n\n fetch(\n `${apiUrl.apiUrl.url}/district/state-districts?state_id=` +\n newValue.value, { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n districtList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n //districtList\n } else if (actionMeta == \"change_district\") {\n this.state.initialValues.districtId = newValue.value;\n this.state.initialValues.districtName = newValue.label;\n\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/cities/district-cities/` + newValue.value, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n cityList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_number\") {\n //change_document_type\n\n this.state.leaseSelected = [];\n if (newValue.length == 0) {\n this.state.initialValues.leaseId = \"\";\n } else {\n this.state.initialValues.leaseId = [];\n }\n if (newValue.length > 0 && newValue[0].value == 0) {\n this.state.leaseSelected.push({\n value: newValue[0].value,\n label: newValue[0].label,\n });\n\n for (let i = 0; i < this.state.leaseList.length; i++) {\n if (this.state.leaseList[i].id != 0) {\n this.state.initialValues.leaseId.push(this.state.leaseList[i].id);\n }\n }\n } else {\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.leaseId.push(newValue[i].value);\n this.state.selectedValue.push(newValue[i].value);\n this.state.leaseSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n }\n this.setState({});\n\n //console.log(\"setting new leases\", this.state.leaseSelected);\n } else if (actionMeta == \"brand_category\") {\n this.state.initialValues.brandCatId = newValue.value;\n this.state.initialValues.brandCatName = newValue.label;\n this.state.initialValues.brandId = [];\n this.state.initialValues.brandName = [];\n //get-brand-subcategory/?id=\n fetch(\n `${apiUrl.apiUrl.url}/brand/get-brand-by-category?alert=true&cat_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [\"0\"];\n this.state.brandSelected.push({ value: 0, label: \"All\" });\n\n for (let i = 0; i < data.length; i++) {\n this.state.initialValues.brandId.push(data[i].id);\n }\n\n console.log(\n this.state.initialValues.brandId,\n \"this.state.initialValues.brandId\"\n );\n this.setState({});\n\n this.getAssetsListByBrand();\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_city\") {\n //brandName\n this.state.initialValues.cityId = newValue.value;\n this.state.initialValues.cityName = newValue.label;\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-all-assets?city_id=` +\n newValue.value,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_lease_status\") {\n //brandName\n this.state.initialValues.LeaseStatusId = newValue.value;\n this.state.initialValues.LeaseStatusName = newValue.label;\n } else if (actionMeta == \"change_brand\") {\n this.state.brandSelected = [];\n this.state.initialValues.brandId = [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.brandId.push(newValue[i].value);\n this.state.brandSelected.push({\n value: newValue[i].value,\n label: newValue[i].label,\n });\n }\n this.getAssetsListByBrand();\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n\n console.log(this.state.initialValues, \"this.state.initialValues\");\n } else if (actionMeta == \"change_asset_name\") {\n //change_lease_month\n this.state.initialValues.assetId = newValue.value;\n this.state.initialValues.assetName = newValue.label;\n this.setMasterPreValues(newValue.value);\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n\n this.state.initialValues.leaseValue = [];\n this.state.initialValues.leaseId = [];\n })\n .catch((error) => {\n console.log(error);\n });\n } else if (actionMeta == \"change_charge_type\") {\n //change_lease_month\n //this.state.initialValues.chargeType = newValue.value;\n //this.state.initialValues.dataUOMName = newValue.label;\n\n console.log(this.state.initialValues, \"initial valuyes\");\n this.state.initialValues.chargeTypeSelected = [];\n //this.state.leaseSelected= [];\n for (let i = 0; i < newValue.length; i++) {\n this.state.initialValues.chargeTypeSelected.push(newValue[i].value);\n //this.state.selectedValue.push(newValue[i].value);\n //this.state.leaseSelected.push({ 'value' : newValue[i].value, 'label': newValue[i].label });\n }\n } else if (actionMeta == \"change_financial_yearone\") {\n //change_lease_month\n this.state.initialValues.financialYearIdOne = newValue.value;\n this.state.initialValues.financialYearOne = newValue.label;\n } else if (actionMeta == \"change_financial_yeartwo\") {\n //change_lease_month\n this.state.initialValues.financialYearIdTwo = newValue.value;\n this.state.initialValues.financialYearTwo = newValue.label;\n } else if (actionMeta == \"change_lease_month\") {\n //change_lease_month\n this.state.initialValues.leaseMonthId = newValue.value;\n this.state.initialValues.leaseMonthId = newValue.label;\n } else {\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n }\n this.setState({});\n };\n\n BrandList() {\n const list = this.state.brandSelected;\n const listItems = list.map((number) => number.label + \",\");\n return ;\n }\n\n getAssetsListByBrand = () => {\n var headers = {\n \"Content-Type\": \"application/json\",\n Authorization: \"Bearer \" + localStorage.getItem(\"TOKEN\"),\n };\n\n fetch(\n `${apiUrl.apiUrl.url}/unit-detail/get-brand-asset-list?brandId=` +\n this.state.initialValues.brandId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n assetsList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(\n `${apiUrl.apiUrl.url}/lease-view/get-lease-list?brand=` +\n this.state.initialValues.brandId +\n \"&asset=\" +\n this.state.initialValues.assetId +\n \"&brandCategory=\" +\n this.state.initialValues.brandCatId,\n { headers }\n )\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n leaseList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeCountry = (newValue, actionMeta) => {\n console.log(newValue.value, \"jj\");\n this.countryId = newValue.value;\n newValue.label = newValue.label;\n\n if (newValue.value == \"\") {\n console.log(\"country value empty\");\n this.state.states = [];\n }\n\n this.state.initialValues.countryId = newValue.value;\n this.state.initialValues.countryName = newValue.label;\n\n this.state.initialValues.stateId = \"\";\n this.state.initialValues.stateName = \"\";\n this.state.initialValues.districtId = \"\";\n this.state.initialValues.districtName = \"\";\n this.state.initialValues.cityId = \"\";\n this.state.initialValues.cityName = \"\";\n\n fetch(`${apiUrl.apiUrl.url}/states/country-states/` + this.countryId, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n states: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n };\n\n handleChangeClientGroup = (newValue, actionMeta) => {\n console.group(\"Value Changed\", newValue, \"actionmeta\", actionMeta);\n this.state.initialValues.groupId = newValue.value;\n this.state.initialValues.groupName = newValue.label;\n this.setState({});\n console.log(newValue, \"ddd\");\n console.log(`action: ${actionMeta}`);\n console.groupEnd();\n };\n\n formatDate = (date) => {\n var d = new Date(date),\n month = \"\" + (d.getMonth() + 1),\n day = \"\" + d.getDate(),\n year = d.getFullYear();\n\n if (month.length < 2) month = \"0\" + month;\n if (day.length < 2) day = \"0\" + day;\n\n return [year, month, day].join(\"-\");\n };\n\n handleCalenderOnBlur = () => {\n this.state.initialValues.financialYearOne = this.formatDate(\n this.state.financialYearOne\n );\n this.state.initialValues.financialYearTwo = this.formatDate(\n this.state.financialYearTwo\n );\n };\n\n componentDidMount() {\n fetch(`${apiUrl.apiUrl.url}/unit-detail/get-asset-types`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n assetTypes: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/countries`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n countries: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/brand/get-all-brands`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n this.setState({\n brandList: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n fetch(`${apiUrl.apiUrl.url}/lease-report/get-lease-status`, { headers })\n .then((response) => {\n return response.json();\n })\n .then((data) => {\n console.log(\"data\", data);\n this.setState({\n leaseStatus: data,\n });\n })\n .catch((error) => {\n console.log(error);\n });\n\n this.getAssetsList(\"\", \"\", true);\n }\n\n frequencyChange(e) {\n console.log(e, \"eee\");\n this.state.frequencySelected = [];\n this.state.initialValuesAlertSettings.freqId = [];\n for (let i = 0; i < e.length; i++) {\n this.state.initialValuesAlertSettings.freqId.push(e[i].value);\n this.state.frequencySelected.push({\n value: e[i].value,\n label: e[i].label,\n });\n }\n this.setState({});\n }\n\n constructor(props) {\n super(props);\n }\n\n getLeaseExpiry(e) {\n this.setState({\n leaseData: e.target.outerText,\n counter: Math.random(),\n });\n }\n redirectAfterSave = () => {\n this.setState({ redirect: true, messsagePopup: false });\n };\n\n render() {\n return this.renderForm();\n }\n\n renderForm() {\n return (\n \n {\n this.state.brandSelected = [];\n for (const [key, value] of Object.entries(\n this.state.initialValues\n )) {\n this.state.initialValues[key] = \"\";\n }\n this.state.leaseSelected = [];\n this.state.initialValues.chargeTypeSelected = [];\n this.state.chargeTypeSelected = [];\n this.state.financialYearOne = \"\";\n this.state.financialYearTwo = \"\";\n this.state.counter = Math.random();\n this.setState({});\n }}\n onSubmit={(values, actions) => {\n values.groupId = this.state.initialValues.groupId;\n\n var brand_id = this.state.initialValues.brandId;\n var asset_id = this.state.initialValues.assetId;\n var lease_id = this.state.initialValues.leaseId;\n\n this.state.additionParams = `brandId=${brand_id}&assetId=${asset_id}&leaseId=${lease_id}`;\n this.setState({});\n\n this.setState({ counter: Math.random() });\n\n console.log(\"lease ids\", lease_id, this.state.additionParams);\n }}\n >\n {({\n values,\n\n errors,\n\n touched,\n\n handleChange,\n\n handleBlur,\n\n handleSubmit,\n\n isSubmitting,\n }) => (\n
\n