![\"money\"](\"/money.svg\")
\n ) : (\n ![\"house\"](\"/house.svg\")
\n ),\n [purpose]\n )\n\n const displayAddress = useMemo(() => {\n // Return TBD if both address and county are empty\n if (isEmpty(address) && isEmpty(county)) {\n return 'TBD'\n }\n\n // Return address if it exists, otherwise format county and state\n return isEmpty(address)\n ? `${com.removeCountySuffix(county)}, ${com.convertStateToAbbr(state)}`\n : address\n }, [address, county, state])\n\n useEffect(() => {\n let isMounted = true\n\n const fetchData = async () => {\n updateTaskStatus()\n addTaskStatusUpdateListener((e) => {\n if (isMounted) {\n const taskDataLength = e.detail\n setTaskCount(taskDataLength)\n }\n })\n\n try {\n const { Method } = await CheckSignInMethod({\n CustomerID: sessionStorage.getItem('cid'),\n Email: application.borrower.email,\n })\n if (isMounted) setMethod(Method)\n\n const { CompanyName } = await checkCustomerInfo({\n 'X-CustomerId': com.getCustomerId(),\n })\n if (isMounted) setCompanyName(CompanyName)\n } catch (error) {\n console.error('Error fetching data:', error)\n }\n }\n\n fetchData()\n\n return () => {\n isMounted = false\n removeTaskStatusUpdateListener((e) => {\n const taskDataLength = e.detail\n setTaskCount(taskDataLength)\n })\n }\n }, [application.borrower.email])\n\n function progressIndicator(isCoBorrower = false, fullName) {\n if (isCoBorrower && !hasCoBorrower) {\n return <>\n }\n\n const completedsteps = isCoBorrower ? application.coborrower.completedsteps : application.borrower.completedsteps\n const isNewBorrower = every(completedsteps, (step) => step === false)\n\n if (isNewBorrower) {\n const isValidName = fullName && !isEmpty(fullName.trim())\n if (!isValidName) {\n return <>\n }\n return (\n \n null}\n strokeColor=\"#325CEB\"\n trailColor=\"#BDCBFB\"\n />\n
\n )\n }\n\n let totalSteps = 0\n if (application.hascoborrower !== 'remote') {\n totalSteps += 1 // personal info\n totalSteps += 1 // current residence\n totalSteps += 1 // property\n }\n totalSteps += 1 // employment\n totalSteps += 1 // other income\n totalSteps += 1 // assets\n totalSteps += 1 // credit check\n totalSteps += 1 // liabilities\n totalSteps += 1 // declarations\n totalSteps += 1 // finances\n\n const {\n yourinfo,\n residence,\n property,\n employment,\n otherincome,\n assets,\n creditcheck,\n liabilities,\n propertymoney,\n finances,\n } = completedsteps\n\n let completedSteps = 0\n if (application.hascoborrower !== 'remote') {\n if (yourinfo) completedSteps += 1\n if (residence) completedSteps += 1\n if (property) completedSteps += 1\n }\n if (employment) completedSteps += 1\n if (otherincome) completedSteps += 1\n if (assets) completedSteps += 1\n if (creditcheck) completedSteps += 1\n if (liabilities) completedSteps += 1\n if (propertymoney) completedSteps += 1\n if (finances) completedSteps += 1\n\n const percent = Math.round((completedSteps / totalSteps) * 100)\n\n return percent === 100 ? (\n NEW
\n \n null}\n strokeColor=\"#325CEB\"\n trailColor=\"#BDCBFB\"\n />\n
\n )\n }\n\n const highlightSection = (section) => {\n switch (section) {\n case 'overview':\n return step === com.stageToNumberApplication.overview\n case 'applicant':\n return step >= com.stageToNumberApplication.applicant && step < com.stageToNumberApplication.coborrower\n case 'coborrower':\n return step >= com.stageToNumberApplication.coborrower && step < com.stageToNumberApplication.overview\n case 'rates':\n return step === com.stageToNumberApplication.rates\n case 'prequalletter':\n return step === com.stageToNumberApplication.prequalletter\n case 'documents':\n return step === com.stageToNumberApplication.documents\n case 'tasks':\n return step === com.stageToNumberApplication.tasks\n default:\n return false\n }\n }\n\n return (\n {percent}%
\n \n \n {purposeImage}\n
\n \n\n \n {\n window.open('/application/myloans', '_self')\n }}\n >\n
\n\n \n
\n\n {companyName}
\n \n \n \n OVERVIEW\n
\n {displayAddress}
\n \n {camelToTitleCase(loanCurrentStatus)}\n
\n \n {/* Application */}\n \n CLOSING\n
\n \n \n \n \n\n \n
\n\n {/* Processing */}\n \n
\n 1
\n \n APPLICATION\n
\n \n \n \n {borrowerFullName}\n \n {progressIndicator(false, borrowerFullName)}\n \n \n \n {hasCoBorrower && !isEmpty(trim(coBorrowerFullName)) ? coBorrowerFullName : '+ Co-borrower'}\n \n {progressIndicator(true, coBorrowerFullName)}\n \n {/* \n Credit report\n \n Rates\n \n {customerId !== 'serenityhomeloans' && (\n \n Pre-qual letter\n {isPrequalLetterNew && (\n \n New\n \n )}\n \n )}\n
\n \n
\n\n {/* Closing */}\n \n
\n 2
\n \n PROCESSING\n
\n \n {/* \n Escrow info\n \n Documents\n \n \n Tasks\n {taskCount > 0 && (\n \n {taskCount}\n \n )}\n \n
\n \n {\n if (!isClosingActive) {\n e.preventDefault()\n }\n }}\n style={{ cursor: isClosingActive ? 'pointer' : 'not-allowed' }}\n >\n \n 3\n
\n \n \n
\n \n )\n}\n\nexport default NewSideBarApplication\n","import React, { Component } from 'react'\nimport Navbar from 'react-bootstrap/Navbar'\nimport Nav from 'react-bootstrap/Nav'\nimport NavDropdown from 'react-bootstrap/NavDropdown'\nimport Button from 'react-bootstrap/Button'\nimport { LinkContainer } from 'react-router-bootstrap'\nimport { Link, withRouter } from \"react-router-dom\"\nimport { HashLink } from \"react-router-hash-link\"\nimport * as com from \"../Common.js\"\nimport '../App.css'\nimport './Landing.css'\nimport Auth from \"../Auth\"\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport { Dropdown, Drawer, Space } from 'antd'\nimport { DownOutlined, SmileOutlined } from '@ant-design/icons'\nimport { connect } from \"react-redux\"\nimport {\n LeftOutlined\n} from '@ant-design/icons'\nimport { CheckSignInMethod } from '../newContent/api/api'\nimport NewSidebarApplication from '../newContent/page/newSideBarApplication'\nimport { matchPath } from \"react-router\"\n\nclass LandingMenu extends Component {\n constructor(props) {\n super(props)\n let sess = window.sessionStorage.getItem(\"ZeitroA\")\n this.state = {\n noactivesession: (null == sess || sess.length === 0),\n redirect: \"\",\n showAuth: false,\n logo: '/logo.png',\n companyName: 'Zeitro',\n openMenu: false,\n method: ''\n }\n this.timerId = null\n window.sessionStorage.setItem(\"step\", 0)\n\n this.public = \"ml-2 mr-2 pt-4 mb-3 py-0\"\n this.private = \"mt-1 mb-1 py-0 my-0\"\n }\n ontimer = () => {\n let sess = window.sessionStorage.getItem(\"ZeitroA\")\n let notalive = (null == sess || sess.length === 0)\n\n if (this.state.noactivesession !== notalive) {\n this.setState({ noactivesession: notalive })\n } else {\n if (window.location.pathname === \"/\") {\n this.setState({ showAuth: true })\n window.document.dispatchEvent(new Event('reauthenticate'), \"\")\n }\n }\n this.timerId = setTimeout(this.ontimer, 1000)\n }\n\n loadLoanOfficer = () => {\n let token = com.getUserToken()\n\n fetch('/borrower/getloanofficer', {\n method: 'GET',\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\"\n }\n }).then(\n response => {\n if (response.status !== 200) {\n console.log('Looks like there was a problem. Status Code: ' +\n response.status)\n return\n }\n response.json().then(js => {\n if (js.Status !== \"OK\") {\n console.log(\"Error: \" + js.Status)\n } else {\n this.setState({ logo: js.Image, companyName: js.Name })\n }\n })\n }\n )\n .catch(function (err) {\n console.log('Fetch Error :', err)\n })\n }\n\n componentDidMount() {\n this.timerId = setTimeout(this.ontimer, 1000)\n document.getElementById('')\n //style=\"background-color: rgb(50, 194, 77); color: rgb(255, 255, 255); fill: rgb(50, 194, 77);\"\n\n let searchparams = new URLSearchParams(window.location.search)\n let customerid = searchparams.get(\"customerid\")\n if (!customerid) {\n customerid = com.getCustomerId()\n }\n\n\n if (customerid === \"individualcustomers\") {\n this.loadLoanOfficer()\n } else {\n fetch('/data/companycustomization', {\n headers: {\n 'X-CustomerId': customerid || 'zeitro',\n }\n })\n .then(async response => {\n if (!response.ok) {\n return\n }\n response.json().then(json => {\n this.setState({ companyName: json.CompanyName })\n let customization = JSON.parse(json.Customization)\n if (Object.keys(customization).includes('primaryColor')) {\n this.setState({ logo: `data:image/png;base64, ${customization.icon}` })\n }\n })\n })\n }\n this.getMethod()\n\n }\n\n componentWillUnmount() {\n if (this.timerId)\n clearTimeout(this.timerId)\n this.timerId = null\n }\n getMethod = async () => {\n try {\n const { Method } = await CheckSignInMethod({\n CustomerID: sessionStorage.getItem('cid'),\n Email: this.props.application.borrower.email\n ,\n\n })\n this.setState({ method: Method })\n\n } catch (error) {\n\n }\n }\n renderNav = () => {\n\n let path = this.props.location\n let inapp = false\n if (path.pathname.indexOf('/application/') >= 0 || path.pathname.indexOf('/application/') >= 0) {\n inapp = true\n }\n\n if (this.state.noactivesession)\n return (\n \n \n \n
\n \n
\n {firstName.charAt(0)}
\n \n \n \n \n \n
\n \n {borrowerFullName}\n
\n \n {email}\n
\n \n \n \n \n \n \n \n
\n )\n else\n return (\n \n {!inapp ?\n \n \n \n : \"\"}\n {!inapp ?\n \n \n : \"\"}\n\n
\n )\n }\n question = () => {\n document.getElementById(\"alterra-chat-button\").click()\n }\n render = () => {\n let path = this.props.location\n let inapp = false\n if (path.pathname.indexOf('/app/') >= 0 || path.pathname.indexOf('/application/') >= 0 || path.pathname === \"/preapp\") {\n inapp = true\n }\n return (\n \n \n \n\n {inapp ? \n :\n \n 
\n \n }\n \n\n\n \n {this.state.showAuth ?
\n )\n }\n};\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n progress: state.progress,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n})\n\nexport class PrequalHeader extends Component {\n constructor(props) {\n super(props)\n let sess = window.sessionStorage.getItem(\"ZeitroA\")\n this.state = {\n noactivesession: (null == sess || sess.length === 0),\n redirect: \"\",\n showAuth: false,\n logo: '/logo.png',\n companyName: '',\n customerid: \"\",\n loname: \"\",\n lophone: \"\",\n loemail: \"\",\n }\n this.timerId = null\n window.sessionStorage.setItem(\"step\", 0)\n\n this.public = \"ml-2 mr-2 pt-4 mb-3 py-0\"\n this.private = \"mt-1 mb-1 py-0 my-0\"\n }\n ontimer = () => {\n let sess = window.sessionStorage.getItem(\"ZeitroA\")\n let notalive = (null == sess || sess.length === 0)\n\n if (this.state.noactivesession !== notalive) {\n this.setState({ noactivesession: notalive })\n } else {\n if (window.location.pathname === \"/\") {\n this.setState({ showAuth: true })\n window.document.dispatchEvent(new Event('reauthenticate'), \"\")\n }\n }\n this.timerId = setTimeout(this.ontimer, 1000)\n }\n\n loadLoanOfficer = (loid) => {\n fetch(\"/data/getindividualcustomerprofilebyid/\" + loid, {\n method: \"GET\",\n headers: {\n Cache: \"no-cache\",\n },\n })\n .then((response) => {\n if (response.status !== 200) {\n console.log(\n \"Looks like there was a problem. Status Code: \" + response.status\n )\n return\n }\n response.json().then((js) => {\n this.setState({ companyName: js.FirstName + \" \" + js.LastName, logo: js.Image })\n\n sessionStorage.setItem(\"paths\", JSON.stringify({\n website: js.Domain,\n login: js.LoginPath,\n }))\n })\n })\n .catch(function (err) {\n console.log(\"Fetch Error /individualcustomers/getprofilebyid/:-S\", err)\n })\n };\n getLoadLoanOfficer = () => {\n let token = com.getUserToken()\n\n fetch('/borrower/getloanofficer', {\n method: 'GET',\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\",\n \"X-Borrower\": this.props.borrowerid\n }\n }).then(\n response => {\n if (response.status !== 200) {\n console.log('Looks like there was a problem. Status Code: ' +\n response.status)\n window.document.dispatchEvent(new Event('reauthenticate'), \"\")\n\n return\n }\n // Examine the text in the response\n response.json().then(js => {\n\n if (js.Status !== \"OK\") {\n console.log(\"Error: \" + js.Status)\n } else {\n this.setState({ loname: js.Name, lophone: js.Phone, loemail: js.Email })\n }\n })\n }\n )\n .catch(function (err) {\n console.log('Fetch Error :', err)\n })\n }\n componentDidMount() {\n this.getLoadLoanOfficer()\n this.timerId = setTimeout(this.ontimer, 1000)\n document.getElementById('')\n\n let searchparams = new URLSearchParams(window.location.search)\n let customerid = searchparams.get(\"customerid\")\n if (this.props.customerid) {\n customerid = this.props.customerid\n }\n let loid = searchparams.get(\"loid\")\n if (!customerid) {\n customerid = com.getCustomerId()\n }\n this.setState({ customerid: customerid })\n if (this.props.setid) {\n sessionStorage.setItem(\"cid\", customerid)\n if (loid !== null) {\n sessionStorage.setItem(\"loid\", loid)\n }\n }\n if (customerid === null) {\n customerid = sessionStorage.getItem(\"cid\")\n }\n if (loid === null) {\n loid = sessionStorage.getItem(\"loid\")\n }\n if (customerid === \"individualcustomers\") {\n this.loadLoanOfficer(loid)\n } else {\n fetch('/data/companycustomization', {\n headers: {\n 'X-CustomerId': customerid,\n }\n })\n .then(async response => {\n if (!response.ok) {\n return\n }\n response.json().then(json => {\n this.setState({ companyName: json.CompanyName })\n let customization = JSON.parse(json.Customization)\n sessionStorage.setItem(\"paths\", JSON.stringify(json.Paths))\n if (Object.keys(customization).includes('primaryColor')) {\n this.setState({ logo: `data:image/png;base64, ${customization.icon}` })\n }\n })\n })\n }\n }\n\n componentWillUnmount() {\n if (this.timerId)\n clearTimeout(this.timerId)\n this.timerId = null\n }\n\n renderNav = () => {\n\n let path = this.props.location\n let inapp = false\n if (path.pathname.indexOf('/app/') >= 0 || path.pathname.indexOf('/application/') >= 0) {\n inapp = true\n }\n\n if (this.state.noactivesession)\n return (\n {this.state.companyName}
\n \n \n \n \n \n \n \n
\n )\n else\n return (\n \n {!inapp ?\n \n \n \n : \"\"}\n {!inapp ?\n \n \n : \"\"}\n\n
\n )\n }\n question = () => {\n document.getElementById(\"alterra-chat-button\").click()\n }\n\n onCloseMenu = () => {\n this.setState({\n openMenu: false\n })\n }\n render = () => {\n let paths = sessionStorage.getItem(\"paths\")\n let redirectSite = \"/\"\n if (paths !== null) {\n redirectSite = JSON.parse(paths)[\"website\"]\n }\n let asklogin = sessionStorage.getItem(\"ZeitroA\") === null\n let isNewApplication = window.location.pathname === '/services/preapp' || window.location.pathname === '/services/preapp/personalinfo'\n let isEmailverification = window.location.pathname === '/services/preapp/emailverification'\n let isPrequal = false\n try {\n if (this.props.application.property.purpose === \"purchase\" && !this.props.application.property.hascontract) {\n isPrequal = true\n }\n } catch (error) {\n\n }\n let propertyType = {\n 'singlefamilydetached': 'Single Family',\n 'singlefamilyattached': 'Townhouse',\n 'twotofourfamily': 'Multi-family',\n 'condominium': 'Condo',\n 'mobilehome': 'Mobile home',\n }\n let navRight = () => {\n if (isNewApplication) {\n return (\n \n
\n
\n \n ),\n key: '0',\n },\n {\n type: 'divider',\n },\n {\n label: (\n {this.props.application.borrower.firstname.charAt(0)}
\n \n
\n {this.props.application.borrower.firstname} {this.props.application.borrower.lastname}
\n {this.props.application.borrower.email}
\n this.props.history.go(-1)}>
\n ![](\"/images/gmccLogo.png\"/)
:{this.state.companyName}}:{this.state.companyName}} \n {isHardMoneyLoan ? <>\n My Loans\n {\n serialnumber && <>\n ![](\"/images/right-arrow.svg\")
\n Loan {serialnumber}\n \n }\n {\n pageGroupName && <>\n \n {pageGroupName}\n \n }\n : \n
\n )\n }\n {asklogin ? \n Loan {serialnumber}\n \n }\n {\n pageGroupName && <>\n \n {pageGroupName}\n \n }\n : \n \n \n
}\n {navText()}
\n this.setState({\n placement: 'left',\n openMenu: !this.state.openMenu \n })}\n >\n 
\n
\n \n {this.props.application.borrower.firstname.charAt(0)}
\n Already have an account?
\n window.location.href=\"/services/signin?customerid=\" + this.state.customerid}\n style={{cursor:\"pointer\",color: \"white\", backgroundColor:\"#325CEB\", padding:\"5px 20px\",borderRadius:\"4px\", marginLeft:\"10px\"}}>\n Sign in\n
\n \n Quick View\n
\n )} */}\n {this.state.showAuth ? \n
\n \n
\n \n {\n applicationInfo.map((ele, index) => {\n return (\n Loan officer:
\n {this.state.loname}
\n {this.state.lophone}
\n {this.state.loemail}
\n\n\n \n
\n )\n })\n }\n {ele.label}:
\n {ele.value}
\n ![](\"/images/gmccLogo.png\")
: {this.state.companyName}}\n \n ![\"\"](\"/eho.png\")
\n \n \n
\n \n
\n \n \n
\n
\n )\n }\n}","import React, { Component } from \"react\";\nimport '@fortawesome/fontawesome-free/css/fontawesome.min.css'\nimport PropTypes from 'prop-types'\n\n\nexport default class HomeButton extends Component {\n\n static contextTypes = {\n router: PropTypes.object\n }\n constructor(props) {\n super(props);\n this.df_stl = \"btn btn-info btn-circle btn-xl\"\n this.state = {\n stl: this.df_stl,\n redirect: \"\"\n };\n } \n\n click = () => {\n // this does not reload the page\n window.location.hash=\"\"\n window.scrollTo(0,0);\n }\n\n listenScrollEvent = e => {\n if (window.pageYOffset < 500) {\n this.setState({stl: this.df_stl + \" d-none\"})\n } else {\n this.setState({stl: this.df_stl})\n }\n }\n \n componentDidMount() {\n window.addEventListener('scroll', this.listenScrollEvent)\n this.listenScrollEvent()\n }\n componentWillUnmount() {\n window.removeEventListener('scroll', this.listenScrollEvent)\n }\n\n render() {\n return (\n \n \n {this.state.showFailure ? \n this.setState({showFailure: false})} dismissible>\n Zeitro \n : \n \"\" }\n\n{this.state.show ? \n this.setState({show: false})} dismissible>\n Zeitro \n : \n \"\" }\n\n
\n \n {this.state.message}\n
\n\n You have successfully subscribed to the Zeitro newsletter\n
\n\n
\n \n \n \n ![\"twitter\"](\"/twitter.png\")
\n
\n \n \n ![\"instagram\"](\"/pinterest.png\")
\n
\n \n \n ![\"linkedin\"](\"/linkedin.png\")
\n
\n \n \n ![\"facebook\"](\"/facebook.png\")
\n
\n \n RESOURCES
\n \n \n \n \nCOMPANY
\n \n \n \n \nCONTACT US
\n \n340 E Middlefield Rd
Mountain View, CA 94043
\n \n Mountain View, CA 94043
SUBSCRIBE TO LATEST NEWS
\n\n
\n \n \n \n {this.state.redirect}\n
\n )\n }\n}","import React, { Component } from 'react'\nimport 'awesome-steps/dist/style.css'\nimport './App.css'\n\nimport Steps from 'awesome-steps'\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport { LinkContainer } from 'react-router-bootstrap'\nimport { HashLink } from \"react-router-hash-link\"\nimport LandingMenu from './Landing/LandingMenu'\nimport LandingCopyright from './Landing/LandingCopyright'\nimport Button from 'react-bootstrap/Button'\nimport HomeButton from \"./Landing/HomeButton.js\"\nimport { Link } from 'react-router-dom'\nconst tagLines = [\n\n \"Digital mortgage broker that shops on your behalf\",\n \"Save thousands of dollars on your mortgage. Let us find you the best deal!\",\n \"We'll take care of your mortgage loan from the beginning to the end.\",\n \"Mortgage loan made simple. On your timeline. On your terms. For you!\",\n \"Taking mortgage loans into the 21st century with modern technology.\"\n]\n\nclass ArrowDown extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n\n redirect: \"\",\n hidden: true,\n };\n }\n\n click = () => {\n // this does not reload the page\n window.location.hash = \"\"\n window.scrollTo(0, 0);\n }\n\n listenScrollEvent = e => {\n\n if (window.pageYOffset > 10) {\n if (!this.state.hidden)\n this.setState({ hidden: true })\n } else {\n if (this.state.hidden)\n this.setState({ hidden: false })\n }\n }\n componentDidMount() {\n window.addEventListener('scroll', this.listenScrollEvent)\n }\n componentWillUnmount() {\n window.removeEventListener('scroll', this.listenScrollEvent)\n }\n render() {\n return (\n \n\n
\n )\n }\n}\n\nexport default class LandingPage extends Component {\n\n render = () => {\n return (\n \n
\n\n \n \n
\n \n
\n \n
\n\n \n {this.state.tagline}\n
\n\n Whether you need to buy or refinance a home, we’ll help you through the process,\n from finding the best deal to closing.\n
Fully online, hassle and spam-free.\n
\n Fully online, hassle and spam-free.\n
\n {this.renderButton()}\n
\n \n Currently serving California.\n
\n \n ![\"Your](\"/hobbit.png\")
\n
\n \n \n \n
\n\n \n \n
\n \n
\n
\n\n\n {/*\n You get the best deal from thousands of options
\n \n\nStraightforward experience with you in the driver seat.
\n No sales pressure. Your timeline. Your choices. Your savings.
\n \n \n No sales pressure. Your timeline. Your choices. Your savings.
\n \n \n
\n \n \n
\n \n
\n {item(\"Real rates, not teasers\", \"Don't waste your time on appointments and phone calls. Get real rates online from 1,000+ loan programs.\")}\n\n {item(\"Transparent fees\", \"We disclose estimates of all costs and fees of the loan products offered to you right away. You compare apples to apples. No surprises at the end of the process.\")}\n\n {item(\"Your loan officer works for you\", \"Whenever you have a question, or need help, a dedicated loan officer is there for you. Use online chat anytime, or schedule a call at your convenience.\")}\n\n \n
\n
\n*/}\n You’re in control
\n \nChoose the right balance between monthly payments, upfront cost, and total cost over the life time of your loan
\n \n \n \n
\n
\n You’re in control
\n \n\n\n\n
\n \n
\n Real rates, not teasers
\n Don't waste your time on appointments and phone calls. Get real rates online from 1,000+ of loan programs.\n\n
\n Transparent fees
\n\nWe disclose estimates of costs and fees of the loan products offered to you immediately. You compare apples to apples. No surprises at the end of the process.\n\n
\n\n Your loan officer works for you
\n\nWhenever you have a question, or need help, a dedicated loan officer is there for you. Use online chat anytime, or schedule a call at your convenience.\n\n \n
\n
\n Use Zeitro Mortgage Tools
\n\n\n
\n \n Whether you're buying or refinancing, we provide you with the set of tools to research your next loan before your commit to applying.\n \n
\n
\n \n\n \n
\n \n 
\n \n
\n
\n\n We care about your privacy
\n\n\n
\n \n Zeitro is dedicated to securing your data from the moment we collect it. Once your information reaches our platform, we will shield it from any potential threats. Most importantly, your data will never be sold.\n
\n \n \n \n \n
\n \n\n
\n \n
\n\n
\n\n Pay less, be happy!
\n \n\n \n
\n )\n }\n}","import React, { Component } from 'react'\nimport '../App.css'\n\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport LandingMenu from './LandingMenu'\nimport LandingCopyright from './LandingCopyright'\n\nclass FirstPage extends Component {\n render = () => {\n return (\n \n \n
\n\n \n
\n \n ![\"\"](\"/bochen.jpg\")
\n ![\"\"](\"/dan.jpg\")
\n \n
\n \n ![\"\"](\"/yingjie.png\")
\n\n ![\"\"](\"/igor.jpg\")
\n \n
\n \n ![\"\"](\"/valya.jpg\")
\n \n\n ![\"\"](\"/atul.jpg\")
\n \n
\n \n ![\"\"](\"/anabelle.jpg\")
\n \n
\n \n\n
\n )\n }\n}\n\nexport default class LandingAbout extends Component {\n\n render = () => {\n return (\n OUR
\nSTORY
\n\n The name “Zeitro” is derived from the German word “Zeitgeist,” literally meaning “spirit of the age.” Or more precisely, a driving characteristic of the time. And the zeitgeist of the 21st century has to be technology’s impact on our everyday lives. Think video tutorials, online shopping and banking, rideshare apps, or even GPS navigation systems.\n
\n \n\n Automated software and data-driven technology have done much to simplify what used to be overly complicated and time consuming—exactly what Zeitro aims to do for the mortgage acquisition process.\n
\n \n\n Since its establishment, the mortgage industry has been dominated by a complicated documentation system. And little has changed in the decades since. Acquiring a mortgage may still be one of the most significant financial milestones, but modern homeowners’ priorities have evolved. We want a personalized, fast, and uncomplicated system that operates with borrowers’ interests at the forefront.\n
\n \n\n Zeitro has reimagined the mortgage industry within the context of 21st century technology and to accommodate 21st century needs. Utilizing artificial intelligence and data analytics, our system connects borrowers, lenders, and other stakeholders within a virtual ecosystem.
\n \n Our mission is to simplify the mortgage acquisition process for borrowers by identifying the best mortgage for their needs and supporting them through closing the loan.\n
\n \n MEET
\nOUR TEAM
\n \n\n Bochen Wang
\nFOUNDER | CHIEF EXECUTIVE
\n\n Former Investment Analyst at Rosefinch Investment\n
\n \n M.S in Business Analytics\n
\n \n \n \n Daniel Trepanier
\nCOFOUNDER | EXECUTIVE CHAIRMAN
\n\n Director of SCU’s MS in Business Analytics Program\n\n
\n \n Former President and CEO at Xambala and Quake Technologies\n\n
\n\n \n \n\n Yingjie Yu
\nCOFOUNDER | STAFF DATA SCIENTIST
\n\n Former Data Scientist at Alibaba Inc.\n
\n \n M.S in Business Analytics\n
\n \n \n \n Igor Plotnikov
\nVP OF ENGINEERING
\n\n Co-founder of uRoam and MI Secure (acquired by F5 Networks and Cisco Systems)\n
\n \n Ph.D. in Physics\n
\n\n \n \n \n\n Valentyn Kamyshenko
\nCHIEF TECHNOLOGY OFFICER
\n\n Former Chief Architect at Xambala Inc. and Tech Lead at Cisco.\n
\n \n Ph.D. in Theoretical Physics\n
\n \n \n \n Atul Vijaykar
\nVP OF BUSINESS DEVELOPMENT\t, FINANCE AND ADMINISTRATION\n
\n\n Former Director of Market Development at Intel
\n \n Consulted for multiple start-ups\n
\n\n \n \n \n Anabelle Little
\nDIRECTOR OF LOAN OPERATIONS
\n\n 20 years of experience in Home Loan Underwriting.\n
\n \n NMLS #307748\n
\n \n\n
\n\n \n\n \n
\n )\n }\n}","\r\nimport \"./LoanRateTitle.css\";\r\nexport default function LoanRateTitle({ title }) {\r\n return (\r\n <>\r\n {title}
\r\n \r\n );\r\n}","import { useState, useRef, useEffect } from 'react';\nimport { \n Tabs,\n DatePicker,\n Button,\n Checkbox,\n Tooltip,\n Select,\n Form, \n Input,\n InputNumber,\n Slider,\n Col, \n Row \n} from 'antd';\nimport { connect } from 'react-redux'\nimport * as act from \"../../Store/actions\"\nimport * as com from \"../../Common\"\nimport {\n QuestionCircleFilled\n} from '@ant-design/icons';\nimport \"./LoanRateCalculator.css\";\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n progress: state.progress,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateHardMoneyLoanAttribute: (t, verb) => {\n dispatch(act.UpdateHardMoneyLoanAttribute(t, verb));\n },\n changeMainPropertyAttribute: (t, verb) => {\n dispatch(act.ChangeMainPropertyAttribute(t, verb));\n },\n changeMainPropertyPurpose: (val) => {\n dispatch(act.ChangeMainPropertyPurpose(val));\n },\n updateProduct: (v, verb) => {\n dispatch(act.UpdateProduct(v, verb))\n},\n});\n\nexport default function LoanRateCalculator(props) {\n const [active, setActive] = useState('1')\n const [rehabLoan, setRehabLoan] = useState(false)\n const [propertyCounty, setPropertyCounty] = useState('')\n const [form] = Form.useForm();\n const autoCompleteRef = useRef();\n const inputRef = useRef();\n useEffect(()=>{\n props.updateProduct(\"hardmoneyloan\", \"mortgageapplied\");\n props.changeMainPropertyPurpose(\"purchase\")\n props.updateHardMoneyLoanAttribute(780, \"estimatedfico\")\n props.updateHardMoneyLoanAttribute(12, \"mortgagetermmonths\")\n props.changeMainPropertyAttribute(\"1000000\", \"salesprice\")\n props.updateHardMoneyLoanAttribute(\"700000\", \"initialloanamount\")\n }, [])\n const tabsOnChange = (key) => {\n setActive(key);\n form.setFieldsValue({\n propertyType: 'singlefamilydetached',\n })\n };\n const handleloanTerm = (value) => {\n console.log(`selected ${value}`);\n };\n const rehabLoanOnChange = (e) => {\n setRehabLoan(e.target.checked);\n };\n const inputFormatter = (value) => {\n return `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n }\n const inputParser = (value) => {\n return value.replace(/\\\\s?|(,*)/g, '')\n }\n const onFinish = (values) => {\n console.log(\"city\", values.city)\n console.log(\"state\", values.state)\n let r = {...props.application.hardmoneyloan.refinancedetails}\n props.changeMainPropertyAttribute(values.propertyType, \"propertytype\")\n // props.changeMainPropertyAttribute(values.purchasePrice, \"salesprice\")\n props.changeMainPropertyAttribute(values.address, \"address\")\n props.changeMainPropertyAttribute(values.state, \"state\")\n props.changeMainPropertyAttribute(values.city, \"city\")\n props.changeMainPropertyAttribute(propertyCounty, \"county\")\n props.changeMainPropertyAttribute(values.zipCode, \"zipcode\")\n props.updateHardMoneyLoanAttribute(values.closingDate, \"targetclosingdate\")\n \n props.updateHardMoneyLoanAttribute(com.safeParseInt(values.loanTerm), \"mortgagetermmonths\")\n props.updateHardMoneyLoanAttribute(rehabLoan, \"rehabloan\")\n props.updateHardMoneyLoanAttribute(rehabLoan?String(values.rehabLoanAmount): \"\", \"rehabloanamount\")\n props.updateHardMoneyLoanAttribute(active === \"3\"?String(values.projectedAfterRepair) : rehabLoan?String(values.projectedAfterRepair):\"\", \"projectedafterrepairvalue\")\n props.updateHardMoneyLoanAttribute(values.flipped, \"timesofflippingaproperty\")\n props.updateHardMoneyLoanAttribute(values.purchased, \"timesofpurchasingarentalproperty\")\n props.updateHardMoneyLoanAttribute(values.FICO, \"estimatedfico\")\n switch (active) {\n case \"1\":\n props.changeMainPropertyPurpose(\"purchaserehab\")\n props.changeMainPropertyAttribute(values.purchasePrice, \"salesprice\")\n props.updateHardMoneyLoanAttribute(String(values.loanAmount), \"initialadvancerequested\")\n if (rehabLoan) {\n props.updateHardMoneyLoanAttribute(String(com.safeParseInt(values.loanAmount) + com.safeParseInt(values.rehabLoanAmount)), \"initialloanamount\")\n } else {\n props.updateHardMoneyLoanAttribute(String(values.loanAmount), \"initialloanamount\")\n }\n break;\n case \"2\":\n props.changeMainPropertyPurpose(\"refinance\")\n r[\"estimatedCurrentValue\"] = String(values.purchasePrice)\n r[\"existingLoanAmount\"] = String(values.existingLoanAmount)\n props.updateHardMoneyLoanAttribute(r, \"refinancedetails\")\n props.updateHardMoneyLoanAttribute(String(values.loanAmount), \"initialloanamount\")\n props.updateHardMoneyLoanAttribute(String(values.loanAmount), \"refinanceloanamount\")\n break;\n case \"3\":\n props.changeMainPropertyPurpose(\"construction\")\n props.updateHardMoneyLoanAttribute(\"groundup\", \"loantype\")\n props.updateHardMoneyLoanAttribute(String(values.loanAmount), \"initialloanamount\")\n props.updateHardMoneyLoanAttribute(String(values.loanAmount), \"constructionloanamount\")\n break;\n case \"4\":\n props.changeMainPropertyPurpose(\"cashoutrefinance\")\n r[\"estimatedCurrentValue\"] = String(values.purchasePrice)\n r[\"existingLoanAmount\"] = String(values.existingLoanAmount)\n props.updateHardMoneyLoanAttribute(r, \"refinancedetails\")\n props.updateHardMoneyLoanAttribute(String(values.loanAmount), \"initialloanamount\")\n props.updateHardMoneyLoanAttribute(String(values.loanAmount), \"refinanceloanamount\")\n default:\n break;\n }\n props.updateHardMoneyLoanAttribute(String(values.constructionBudget), \"constructionbudget\")\n props.setShowResult(true)\n }\n const formInitial = {\n propertyType: 'singlefamilydetached',\n constructionType: 'singlefamilydetached',\n purchasePrice: '1000000',\n address: '',\n city: '',\n state: '',\n zipCode: '',\n closingDate: '',\n existingLoanAmount: '',\n loanAmount: '700000',\n loanTerm: '12',\n rehabLoanAmount: '',\n constructionBudget: '',\n projectedAfterRepair: '',\n flipped: 0,\n purchased: 0,\n FICO: 780\n }\n const items = [\n {\n key: '1',\n label: `Purchase`\n },\n {\n key: '2',\n label: `Rate term refi`\n },\n {\n key: '4',\n label: 'Cash out refi'\n },\n {\n key: '3',\n label: `Construction`\n },\n ];\n const PropertyTypeOptions = \n [\n {\n value: 'singlefamilydetached',\n label: 'Single family residence'\n },\n {\n value: 'twotofourfamily',\n label: '2-4 unit family'\n },\n {\n value: 'mixeduse',\n label: 'Mixed Use(50%+ residential)'\n },\n {\n value: 'multistory',\n label: 'Multi family (5+ units)',\n },\n ]\n const constructionType = [\n {\n value: 'singlefamilydetached',\n label: 'Single family residence'\n }\n ]\n const loanTermOptions = [\n {\n value: '3',\n label: '3 Months'\n },\n {\n value: '6',\n label: '6 Months'\n },\n {\n value: '9',\n label: '9 Months'\n },\n {\n value: '12',\n label: '12 Months'\n },\n {\n value: '24',\n label: '24 Months'\n },\n {\n value: '36',\n label: '36 Months'\n },\n {\n value: '48',\n label: '48 Months'\n },\n {\n value: '60',\n label: '60 Months'\n }\n ]\n const googleOptions = {\n componentRestrictions: { country: \"us\"},\n fields: [\"address_components\", \"formatted_address\"]\n };\n useEffect(() => {\n autoCompleteRef.current = new window.google.maps.places.Autocomplete(\n inputRef.current,\n googleOptions\n );\n autoCompleteRef.current.addListener(\"place_changed\", async function () {\n const place = await autoCompleteRef.current.getPlace();\n const address = `${place.address_components.find(item =>item.types.includes(\"street_number\")).short_name} ${place.address_components.find(item =>item.types.includes(\"route\")).short_name}, ${place.address_components.find(item =>item.types.includes(\"country\")).short_name}`\n const county = place.address_components.find(item => item.types.includes(\"administrative_area_level_2\")).long_name\n setPropertyCounty(county)\n form.setFieldsValue({\n address: address,\n city: place.formatted_address.split(',')[1],\n state: place.address_components.find(item =>item.types.includes(\"administrative_area_level_1\")).short_name,\n zipCode: place.address_components.find(item => item.types.includes(\"postal_code\")).long_name\n });\n console.log(\"county\", county)\n });\n }, []);\n return (\n \n
\n );\n}\n\nLoanRateCalculator = connect(mapStateToProps, mapDispatchToProps)(LoanRateCalculator);\n","import ReactInputVerificationCode from \"react-input-verification-code\";\n\nimport \"./CodeVerification.css\";\n\n\nconst CodeVerification = (props) => (\n \n \n \n {\n (active === '1' || active === '2') && \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n {\n active === '3' && (\n \n \n \n \n \n \n
\n )\n }\n \n {\n active === '1' && (\n \n \n \n )\n }\n {\n (active === '2' || active === '4') && (\n \n \n \n )\n }\n \n \n \n \n \n \n
\n {\n active === '1' && (\n \n \n \n \n \n \n \n \n \n \n )\n }\n
\n )\n }\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n 1000\n \n
\n \n
\n \n \n */}\n
\n Add a rehab loan?
\n {/* \n \n */}\n
\n \n In the last 3 years, how many times have you...
\n {/* \n
\n);\n\nexport default CodeVerification;\n","import { useState } from 'react'\nimport { Col, Form, Row } from \"react-bootstrap\"\nimport \"../../App.css\"\nimport \"./CheckGroup.css\"\n\n\nexport default function SecondaryButton(props) {\n const { type, value, data, onChangeSelect, style, fixedWidth, mode, className } = props\n const [setCheckValue] = useState([])\n\n const achange = ev => {\n // multi select\n if (type === 'checkbox') {\n const chooseArr = value.map(res => res.value)\n setCheckValue(chooseArr)\n if (chooseArr.includes(ev.value)) {\n let result = chooseArr.findIndex(item => {\n return item === ev.value\n })\n value.splice(result, 1)\n } else {\n value.push({ label: ev.label, value: ev.value })\n }\n onChangeSelect(value)\n } else {\n // single select\n onChangeSelect(ev.value)\n }\n }\n\n let clsname = typeof className === \"undefined\" ? \"\" : className\n if (props.direction === \"horizontal\") {\n clsname = \"check-group-wrap \" + clsname\n }\n if (typeof fixedWidth !== \"undefined\") {\n if (mode === 'flex') {\n return (\n \n \n
\n \n ))}\n {ele.label}
\n \n \n
\n \n ))}\n {ele.label}
\n \n {type === 'checkbox' ? (\n data.map(ele => (\n
\n )\n}\n\nexport function CheckGroupWithImage(props) {\n const { type, value, data, onChangeSelect, style, className } = props\n const [setCheckValue] = useState([])\n\n const achange = ev => {\n // multi-select\n if (type === 'checkbox') {\n const chooseArr = value.map(res => res.value)\n setCheckValue(chooseArr)\n if (chooseArr.includes(ev.value)) {\n let result = chooseArr.findIndex(item => {\n return item === ev.value\n })\n value.splice(result, 1)\n } else {\n value.push({ label: ev.label, value: ev.value })\n }\n onChangeSelect(value)\n } else {\n // single-select\n onChangeSelect(ev.value)\n }\n }\n\n let clsname = \"\"\n if (typeof className !== \"undefined\") {\n clsname = className\n } else {\n if (props.direction === \"horizontal\") {\n clsname = \"check-group-wrap\"\n }\n }\n return (\n e.value === ele.value) ? '1px solid #325CEB' : '' }} onClick={() => achange(ele)}>\n
\n ))\n ) : (\n data.map(ele => (\n \n \n
\n e.value === ele.value) ? '' : '#6E6E70' }}>{ele.label}
\n achange(ele)}>\n
\n ))\n )\n }\n \n \n
\n {ele.tag && ele.tag !== '' && ele.tag}\n {ele.label}
\n \n {type === 'checkbox' ? (\n data.map(ele => (\n achange(ele)}\n >\n \n {ele.label}\n
\n \n \n ))\n )\n }\n \n )\n}\n","\n\nimport * as progress from '../Defs/progressdefs'\n\n\n\nexport function UpdateChangeProgress(t, n) {\n return { type: progress.CHANGE_PROGRESS, payload: t, stage: n };\n}\nexport function UpdateChangeProgressType(n) {\n return { type: progress.CHANGE_PROGRESS_TYPE, stage: n };\n}\n\nexport function UpdateChangeProgressLastVisited(t, n) {\n return { type: progress.CHANGE_PROGRESS_LASTVISITED, payload: t };\n}\nexport function UpdateChangeLastTouch(t) {\n return { type: progress.CHANGE_PROGRESS_LASTTOUCH, payload: t };\n}\nexport function UpdateChangeVisitedStage(verb) {\n return { type: progress.CHANGE_PROGRESS_VISITED, verb: verb };\n}\nexport function UpdateChangeProgressStep(step) {\n return { type: progress.CHANGE_PROGRESS_STEP, payload: step }\n}\n","import React from 'react'\nimport { runStatsigAutoCapture } from '@statsig/web-analytics';\nimport { useStatsigClient } from \"@statsig/react-bindings/src\";\n\nexport const updateStatsigUser = async (client, email, customerid) => {\n try {\n if (!client) {\n return;\n }\n const context = client.getContext();\n const currentUser = context.user;\n const derivedFields = context.values.derived_fields;\n\n const userInfo = {\n ...currentUser,\n userID: email,\n customIDs: {\n IP: derivedFields.ip,\n customerID: customerid,\n },\n email: email,\n custom: {\n customerid: customerid,\n ip: derivedFields.ip,\n country: derivedFields.country,\n email: email,\n }\n }\n sessionStorage.setItem('statsig_user_info', JSON.stringify(userInfo));\n\n await client.updateUserAsync(userInfo);\n runStatsigAutoCapture(client);\n // if (newContext.user.email === email) {\n // runStatsigAutoCapture(client);\n // console.log('Auto capture reinitialized');\n // return true;\n // } else {\n // console.warn('Update may not have taken effect');\n // return false;\n // }\n } catch (error) {\n console.log(\"statsig error\", error)\n }\n}\n\nexport const withStatsig = (WrappedComponent) => {\n return function WithStatsigWrapper(props) {\n const { client } = useStatsigClient();\n return e.value === ele.value) ? '1px solid #325CEB' : '' }} onClick={() => achange(ele)}>\n
\n ))\n ) : (\n data.map(ele => (\n e.value === ele.value) ? '#325CEB' : '', opacity: props.hideCircle ? 0 : 1 }}>
\n e.value === ele.value) ? '' : 'color:#6E6E70',color:value=== value.some(e => e.value === ele.value) ? '' : ' #6e6e70' }}>{ele.label}
\n \n
\n \n \n
\n \n\n \n
\n )\n }\n\n const showPastLoans = () => {\n if (!this.state.showPastLoansModal) {\n return \"\"\n }\n let propertyType = {\n 'singlefamilydetached': 'Single Family',\n 'singlefamilyattached': 'Townhouse',\n 'twotofourfamily': 'Multi-family',\n 'condominium': 'Condo'\n }\n let filterValue = (val) => {\n return val && val !== '' ? val : '--'\n }\n const data = []\n for (let loan of this.state.pastLoans) {\n let lasttouch = new Date(loan.state.progress.lasttouch)\n let isPrequal = loan.state.application.property.purpose === \"purchase\" && !loan.state.application.property.hascontract\n if (loan.state.application.property.purpose === null) {\n data.push({\n value: loan.loanid,\n label: ![](\"/images/warningSignYellow.png\")
\n \n
\n })\n } else {\n data.push({\n value: loan.loanid,\n label: (\n Loan purpose unselected
\n \n
\n )\n })\n }\n }\n\n\n return (\n \n
\n {com.capitalize(loan.state.application.property.purpose)} {!isPrequal ? \" | Application\" : \" | Pre-qualification\"}
\n {filterValue(propertyType[loan.state.application.property.propertytype]) + \", \" + filterValue(loan.state.application.property.county) + \", \" + filterValue(loan.state.application.property.state)}
\n Last edit at {lasttouch.toLocaleDateString()}
\n We noticed that you have {this.state.pastLoans.length} existing applications. Would you like to use the information from one of them for this application?
\n You can edit your information any time during the application process.
\n \n {\n this.setState({ selectedLoanId: e })\n }}\n value={this.state.selectedLoanId}\n mode=\"flex\"\n type='radio'\n direction=\"horizontal\"\n fixedWidth=\"280px\" />\n
\n \n )\n }\n\n if (this.state.showResult && this.state.verified) {\n return (\n \n ![](\"/images/emailSuccess.png\")
\n
\n )\n }\n\n if (this.props.mode === \"simple\") {\n return (\n \n Succeed!
\n \n
\n\n Your account has been verified.
\n Continue to your application.
\n\n \n {showPastLoans()}\n
\n )\n }\n\n return (\n \n\n\n ![](\"/images/saveProgress.png\")
\n
\n )\n }\n}\n\nexport default withStatsig(connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(EmailVerification))\n","\r\nimport { useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux'\r\nimport { withRouter, Link } from \"react-router-dom\";\r\nimport * as act from \"../../Store/actions\"\r\nimport * as com from \"../../Common\"\r\nimport { Button, Col, Row, Tooltip, Input } from 'antd';\r\nimport EmailVerification from '../../Application/EmailVerification';\r\nimport \"./loanRateResult.css\";\r\nimport {\r\n QuestionCircleFilled\r\n} from '@ant-design/icons';\r\nimport { totalmem } from 'os';\r\n\r\nconst eligibleCities = [\"Fremont\", \"Newark\", \"Union City\", \"Pleasanton\", \"Dublin\", \"Livermore\", \"San Ramon\", \"Danville\"]\r\nconst eligibleCounties = [\"Santa Clara County\", \"San Mateo County\"]\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n application: state.application,\r\n progress: state.progress,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n changeMainPropertyAttribute: (t, verb) => {\r\n dispatch(act.ChangeMainPropertyAttribute(t, verb))\r\n },\r\n changeBorrowerInfo: (event, verb) => {\r\n dispatch(act.ChangeBorrowerInfo(event, \"borrower\", verb))\r\n },\r\n updateChangeApplication: (application) => {\r\n dispatch(act.updateApplication(application))\r\n },\r\n});\r\n\r\nexport function CalcHardMoneyLoanRate(props) {\r\n// to get max loan amount:\r\n// if it's a purchase loan (+rehab)，the max loan amount is the lesser of 85% LTV or 70% LTARV. \r\n// if it's a rate-term refi loan, the max loan amount is the lesser of 70% LTV or 70% LTARV. \r\n// If it's a cash-out refi loan, the max is the lesser of 65% LTV or 65% LTARV.\r\n\r\n let result = {\r\n unqualified: false,\r\n unqualifiedReason: \"\", \r\n floorRate: 0,\r\n point: 0,\r\n monthlyPayment: 0,\r\n closingCost: 0,\r\n maxLoanAmount: 0,\r\n\r\n }\r\n const {\r\n property,\r\n hardmoneyloan,\r\n } = props.application;\r\n\r\n let propertyType = property.propertytype\r\n let propertyCounty = property.county\r\n let propertyCity = property.city.trim()\r\n let rehabAdded = hardmoneyloan.rehabloan\r\n let scre = hardmoneyloan.estimatedfico\r\n let borrowerExperience = hardmoneyloan.timesofflippingaproperty + hardmoneyloan.timesofpurchasingarentalproperty\r\n let loanTermMonths = hardmoneyloan.mortgagetermmonths\r\n let loanamount = \"\"\r\n let maxLoanAmount = \"\"\r\n let loanAmountLimit = \"\"\r\n let totalLoanAmount = \"\"\r\n let ltv = 0\r\n let ltarv = 0\r\n let ltc\r\n let floorRate = 8.99\r\n let point = 1\r\n let maxLTV = 0\r\n let maxLTARV = 0\r\n let maxLTC = 0\r\n let minFICO = 0\r\n let minExp = 3\r\n let minTermMonths = 3\r\n let dayOneEquity = 0\r\n let cashoutAmount = 0\r\n let cashoutPercentage = 0\r\n\r\n\r\n //find min of purPrice * maxltv, cost * maxltc, arv * maxltarv\r\n const calcMaxLoanAmount = (purPrice, cost, arv ,maxltv, maxltc, maxltarv) => {\r\n let maxLoanAmount = 0\r\n let purPriceMax = purPrice * maxltv\r\n let costMax = cost * maxltc\r\n let arvMax = arv * maxltarv\r\n if (!rehabAdded) {\r\n arvMax = purPriceMax\r\n costMax = purPriceMax\r\n }\r\n console.log(\"purPriceMax: \" + purPrice+ \"*\" + maxltv + \"=\"+purPriceMax)\r\n console.log(\"costMax: \" + cost+ \"*\" + maxltc + \"=\"+costMax)\r\n console.log(\"arvMax: \" + arv+ \"*\" + maxltarv + \"=\"+arvMax)\r\n console.log(\"maxLoanAmount: \" + Math.min(purPriceMax, costMax, arvMax))\r\n\r\n maxLoanAmount = Math.min(purPriceMax, costMax, arvMax)\r\n return maxLoanAmount\r\n }\r\n\r\n\r\n let salesPrice = com.safeParseInt(property.salesprice)\r\n let purpose = property.purpose\r\n let initialAdvance = com.safeParseInt(hardmoneyloan.initialadvancerequested)\r\n let rehabLoanAmount = com.safeParseInt(hardmoneyloan.rehabloanamount)\r\n let projectAfterRepairValue = com.safeParseInt(hardmoneyloan.projectedafterrepairvalue)\r\n let estimatedCurrentValue = com.safeParseInt(hardmoneyloan.refinancedetails.estimatedCurrentValue)\r\n let constructionBudget = com.safeParseInt(hardmoneyloan.constructionbudget)\r\n let constructionLoanAmount = com.safeParseInt(hardmoneyloan.constructionloanamount)\r\n let refinanceLoanAmount = com.safeParseInt(hardmoneyloan.refinanceloanamount)\r\n let existingLoanAmount = com.safeParseInt(hardmoneyloan.refinancedetails.existingLoanAmount)\r\n\r\n if (salesPrice===\"\") {\r\n ltv = 0\r\n } else {\r\n switch (purpose) {\r\n case \"purchaserehab\":\r\n loanAmountLimit = 5000000\r\n point = 1\r\n maxLTV = 80\r\n maxLTARV = 70\r\n maxLTC = 85\r\n minFICO = 650\r\n minExp = 3\r\n minTermMonths = 3\r\n\r\n loanamount = initialAdvance\r\n dayOneEquity = salesPrice - loanamount\r\n ltv = 100 * loanamount / salesPrice\r\n if (rehabAdded) {\r\n totalLoanAmount = loanamount + rehabLoanAmount\r\n ltarv = 100 * rehabLoanAmount / projectAfterRepairValue\r\n } else {\r\n totalLoanAmount = loanamount\r\n ltarv = ltv\r\n }\r\n ltc = 100 * totalLoanAmount / (salesPrice + rehabLoanAmount)\r\n maxLoanAmount = calcMaxLoanAmount(salesPrice, salesPrice + rehabLoanAmount, projectAfterRepairValue, 0.80, 0.85, 0.7)\r\n if (maxLoanAmount > loanAmountLimit) {\r\n maxLoanAmount = loanAmountLimit\r\n }\r\n if(totalLoanAmount > maxLoanAmount) {\r\n totalLoanAmount = maxLoanAmount\r\n if (rehabAdded) {\r\n dayOneEquity = salesPrice - (maxLoanAmount - rehabLoanAmount)\r\n ltv = 100 * (maxLoanAmount - rehabLoanAmount) / salesPrice\r\n ltarv = 100 * maxLoanAmount / projectAfterRepairValue\r\n } else{\r\n dayOneEquity = salesPrice - maxLoanAmount\r\n ltv = 100 * maxLoanAmount / salesPrice\r\n ltarv = ltv\r\n }\r\n ltc = 100 * maxLoanAmount / (salesPrice + rehabLoanAmount)\r\n }\r\n break;\r\n case \"refinance\":\r\n loanamount = refinanceLoanAmount\r\n loanAmountLimit = 2000000\r\n totalLoanAmount = loanamount\r\n point = 1.5\r\n maxLTV = 70\r\n maxLTARV = 70\r\n maxLTC = 70\r\n minFICO = 700\r\n minExp = 3\r\n minTermMonths = 3\r\n dayOneEquity = estimatedCurrentValue - loanamount\r\n ltv = 100 * loanamount / estimatedCurrentValue\r\n ltarv = 100 * totalLoanAmount / estimatedCurrentValue\r\n ltc = 100 * totalLoanAmount / estimatedCurrentValue\r\n maxLoanAmount = calcMaxLoanAmount(estimatedCurrentValue, estimatedCurrentValue, estimatedCurrentValue, 0.7, 0.7, 0.7)\r\n if (maxLoanAmount > loanAmountLimit) {\r\n maxLoanAmount = loanAmountLimit\r\n }\r\n if(totalLoanAmount > maxLoanAmount) {\r\n totalLoanAmount = maxLoanAmount\r\n dayOneEquity = estimatedCurrentValue - maxLoanAmount\r\n ltv = 100 * maxLoanAmount / estimatedCurrentValue\r\n ltarv = 100 * maxLoanAmount / estimatedCurrentValue\r\n ltc = 100 * maxLoanAmount / estimatedCurrentValue\r\n }\r\n break;\r\n case \"cashoutrefinance\":\r\n loanamount = refinanceLoanAmount\r\n loanAmountLimit = 2000000\r\n totalLoanAmount = loanamount\r\n point = 1.5\r\n maxLTV = 65\r\n maxLTARV = 65\r\n maxLTC = 65\r\n minFICO = 700\r\n minExp = 10\r\n minTermMonths = 3\r\n dayOneEquity = estimatedCurrentValue - loanamount\r\n cashoutAmount = loanamount - existingLoanAmount\r\n cashoutPercentage = 100* cashoutAmount / estimatedCurrentValue\r\n ltv = 100 * loanamount / estimatedCurrentValue\r\n ltarv = 100 * totalLoanAmount / estimatedCurrentValue\r\n ltc = 100 * totalLoanAmount / estimatedCurrentValue\r\n maxLoanAmount = calcMaxLoanAmount(estimatedCurrentValue, estimatedCurrentValue, estimatedCurrentValue, 0.65, 0.65, 0.65)\r\n if (maxLoanAmount > loanAmountLimit) {\r\n maxLoanAmount = loanAmountLimit\r\n }\r\n if(totalLoanAmount > maxLoanAmount) {\r\n totalLoanAmount = maxLoanAmount\r\n dayOneEquity = estimatedCurrentValue - maxLoanAmount\r\n cashoutAmount = maxLoanAmount - existingLoanAmount\r\n cashoutPercentage = 100* cashoutAmount / estimatedCurrentValue\r\n ltv = 100 * maxLoanAmount / estimatedCurrentValue\r\n ltarv = 100 * maxLoanAmount / estimatedCurrentValue\r\n ltc = 100 * maxLoanAmount / estimatedCurrentValue\r\n }\r\n break;\r\n case \"construction\":\r\n loanamount = constructionLoanAmount\r\n loanAmountLimit = 5000000\r\n totalLoanAmount = loanamount\r\n point = 2\r\n maxLTV = 70\r\n maxLTARV = 70\r\n maxLTC = 85\r\n minFICO = 700\r\n minExp = 20\r\n minTermMonths = 3\r\n dayOneEquity = constructionBudget - loanamount\r\n ltv = 100 * totalLoanAmount / constructionBudget\r\n ltarv = 100 * totalLoanAmount / projectAfterRepairValue\r\n ltc = 100 * totalLoanAmount / constructionBudget\r\n maxLoanAmount = calcMaxLoanAmount(constructionBudget, constructionBudget, projectAfterRepairValue, 0.7, 0.85, 0.7)\r\n if (maxLoanAmount > loanAmountLimit) {\r\n maxLoanAmount = loanAmountLimit\r\n }\r\n if(totalLoanAmount > maxLoanAmount) {\r\n totalLoanAmount = maxLoanAmount\r\n dayOneEquity = constructionBudget - maxLoanAmount\r\n ltv = 100 * maxLoanAmount / constructionBudget\r\n ltarv = 100 * maxLoanAmount / projectAfterRepairValue\r\n ltc = 100 * maxLoanAmount / constructionBudget\r\n }\r\n break;\r\n }\r\n\r\n }\r\n\r\n console.log(\"******start parsing rate-point-cost********\")\r\n // check lending area \r\n if (!eligibleCities.includes(propertyCity) && !eligibleCounties.includes(propertyCounty)) {\r\n console.log(\"not in lending area\")\r\n result.unqualified = true\r\n result.unqualifiedReason = \"The subject property address is not in the lending area of this program.\"\r\n }\r\n // check multifamily or mixeduse, rates for these are subject to pre-approval\r\n if (propertyType === \"multifamily\" || propertyType === \"mixeduse\") {\r\n console.log(\"is multifamily or mixeduse, need pre-approval\")\r\n result.unqualified = true\r\n result.unqualifiedReason = \"Program's rate and cost is subject to pre-approval for multifamily or mixed used property, please procced to the applicaton and discuss it with your loan officer.\"\r\n }\r\n\r\n // check loan amount limit\r\n if (totalLoanAmount > loanAmountLimit) {\r\n console.log(\"loan amount exceed: \" + loanAmountLimit)\r\n result.unqualified = true\r\n result.unqualifiedReason = \"The maximum loan amount is $\"+ loanAmountLimit/1000000 + \"M, while your current is $\"+ totalLoanAmount + \".\"\r\n }\r\n\r\n // check fico score above minFICO\r\n if (scre < minFICO) {\r\n console.log(\"fico score below minFICO: \" + minFICO)\r\n result.unqualified = true\r\n result.unqualifiedReason = \"The minimum FICO score is \"+ minFICO +\", whereas the FICO score you have provided is \" + scre\r\n }\r\n\r\n // check borrower experience above minExp\r\n if (borrowerExperience < minExp) {\r\n console.log(\"borrower experience below minExp: \" + minExp)\r\n result.unqualified = true\r\n result.unqualifiedReason = \"The program requires a minimum total experience of \"+ minExp + \" for the last 3 years, whereas the number of experience you have provided is \" + borrowerExperience\r\n }\r\n\r\n // make sure purchase price entered is valid\r\n if (property.salesprice === \"\" || property.salesprice == 0) {\r\n console.log(\"purchase price is empty or zero\")\r\n result.unqualified = true\r\n result.unqualifiedReason = \"Please enter a valid purchase price/as-is-value, can't be empty or zero\"\r\n }\r\n\r\n // make sure projected after repair value is entered valid if rehab added\r\n if (rehabAdded && (hardmoneyloan.projectedafterrepairvalue === \"\" || hardmoneyloan.projectedafterrepairvalue === 0)) {\r\n console.log(\"projected after repair value is empty or zero\")\r\n result.unqualified = true\r\n result.unqualifiedReason = \"Please enter a valid projected after repair value, can't be empty or zero\"\r\n }\r\n\r\n // console.log(\"ltarv > 70, rate and cost is subject to pre-approval\")\r\n // result.unqualified = true\r\n // result.unqualifiedReason = \"For single family residence and loan to after repair value is above 70%, rate and cost is subject to pre-approval. Please procced to the applicaton and discuss it with your loan officer.\"\r\n\r\n switch (purpose) {\r\n case \"purchaserehab\":\r\n floorRate = 9\r\n console.log(\"in purchase rehab, init floorRate: \" + floorRate)\r\n break;\r\n case \"refinance\":\r\n floorRate = 10\r\n console.log(\"in refi, init floorRate: \" + floorRate)\r\n break;\r\n case \"cashoutrefinance\":\r\n floorRate = 10\r\n console.log(\"in cashout, init floorRate: \" + floorRate)\r\n break;\r\n case \"construction\":\r\n floorRate = 12\r\n console.log(\"in construct, init floorRate: \" + floorRate)\r\n break;\r\n }\r\n\r\n switch (ltarv) {\r\n case ltarv <= 55:\r\n floorRate = floorRate\r\n console.log(\"ltarv <= 55, nothing added\")\r\n break;\r\n case ltarv > 55 && ltarv <= 60:\r\n floorRate += 0.25\r\n console.log(\"ltarv > 55 && ltarv <= 60, rate +0.25\")\r\n break;\r\n case ltarv > 60 && ltarv <= 65:\r\n floorRate += 0.5\r\n console.log(\"ltarv > 60 && ltarv <= 65, rate +0.5\")\r\n break;\r\n case ltarv > 65 && ltarv <= 70:\r\n floorRate += 0.75\r\n console.log(\"ltarv > 65 && ltarv <= 70, rate +0.75\")\r\n break;\r\n case ltarv > 70 && ltarv <= 80:\r\n floorRate += 9\r\n console.log(\"ltarv > 70 && ltarv <= 80, rate is 9\")\r\n }\r\n\r\n\r\n // } else {\r\n // console.log(\"ltarv > 65, rate and cost is subject to pre-approval\")\r\n // result.unqualified = true\r\n // result.unqualifiedReason = \"For 2-4 unit residential property and loan to after repair value is above 65%, rate and cost is subject to pre-approval. Please procced to the applicaton and discuss it with your loan officer.\"\r\n // }\r\n // }\r\n\r\n // rate adjustment when day one equity is less than 85k\r\n if (dayOneEquity <= 85000) {\r\n console.log(\"dayOneEquity <= 85000, rate +0.25\")\r\n floorRate += 0.25\r\n }\r\n\r\n // rate adjustment based on cashout percentage\r\n if (cashoutPercentage>=1.5 && cashoutPercentage <=5) {\r\n console.log(\"cashoutPercentage>=1.5 && cashoutPercentage <=5, rate +0.125\")\r\n floorRate += 0.125\r\n }\r\n if (cashoutPercentage>5) {\r\n console.log(\"cashoutPercentage>5, rate +0.5\")\r\n floorRate += 0.5\r\n }\r\n\r\n // rate adjustment based on ltv\r\n if (ltv > 60 && ltv <= 70){\r\n console.log(\"in ltv 60-70, rate +0.5\")\r\n floorRate += 0.5\r\n }\r\n else if (ltv > 70 && ltv <= maxLTV){\r\n console.log(\"in ltv 70-ceiling, rate +1\")\r\n floorRate += 1\r\n }\r\n\r\n // rate and point adjustment based on fico score\r\n if (scre >= minFICO) {\r\n if ( scre >= 700 && scre <= 719) {\r\n console.log(\"in scre 700-719, rate +0.25\")\r\n floorRate += 0.25\r\n }\r\n if ( scre >=680 && scre <= 699) {\r\n console.log(\"in scre 680-699, rate +0.5, point +0.5\")\r\n floorRate += 0.5\r\n point += 0.5\r\n }\r\n if ( scre >= 650 && scre <= 679) {\r\n console.log(\"in scre 650-679, rate +0.75, point +1\")\r\n floorRate += 0.75\r\n point += 1\r\n }\r\n } \r\n\r\n\r\n //rate adjustment based on borrower experience\r\n if (borrowerExperience >= 10 && borrowerExperience <= 20) {\r\n console.log(\"in experience 10-20, rate +0.25\")\r\n floorRate += 0.25\r\n }\r\n if (borrowerExperience >= 3 && borrowerExperience < 10) {\r\n console.log(\"in experience 3-10, rate +0.5\")\r\n floorRate += 0.5\r\n }\r\n \r\n // rate and point adjustment based on loan term\r\n if (com.safeParseInt(loanTermMonths) > 12){\r\n console.log(\"in term > 12, rate +0.5, point +0.5\")\r\n floorRate += 0.5\r\n point += 0.5\r\n }\r\n // addtional fee based on loan amount\r\n let extraFee = 0\r\n if (totalLoanAmount >= 85000 && totalLoanAmount <= 125000) {\r\n extraFee = 1000\r\n console.log(\"in loan amount 85000-125000, have $\" + extraFee + \" as extra fee\")\r\n }\r\n console.log(\"check type!!!!!!\", propertyType)\r\n // rate and point adjustment based on property type\r\n switch (propertyType) {\r\n case \"singlefamilydetached\":\r\n break;\r\n case \"mixeduse\":\r\n console.log(\"property type is mixeduse, rate +2, point +1\")\r\n floorRate += 2\r\n point += 1\r\n break;\r\n case \"multistory\":\r\n console.log(\"property type is commercial, rate +3, point +1\")\r\n floorRate += 3\r\n point += 1\r\n break;\r\n case \"twotofourunit\":\r\n console.log(\"property type is 2-4 unit, rate +1, point +0.25\")\r\n floorRate += 0.25\r\n break;\r\n case \"commercial\":\r\n console.log(\"property type is commercial, rate +3, point +1\")\r\n floorRate += 3\r\n point += 1\r\n break;\r\n }\r\n console.log(\"final total loan amount: \" + totalLoanAmount)\r\n // calc final monthly payment and closing cost\r\n let mp = Math.round(0.01*(floorRate)*com.safeParseInt(totalLoanAmount)/com.safeParseInt(props.application.hardmoneyloan.mortgagetermmonths))\r\n let cc = Math.round(com.safeParseInt(totalLoanAmount) * point * 0.01 + extraFee)\r\n\r\n\r\n console.log(\"******end parsing rate-point-cost********\")\r\n console.log(\"ltarv: \" + ltarv)\r\n console.log(\"ltc: \" + ltc)\r\n console.log(\"ltarv: \" + ltarv)\r\n console.log(\"final total loan amount: \" + totalLoanAmount)\r\n console.log(\"final max loan amount: \" + maxLoanAmount)\r\n\r\n result.floorRate = floorRate\r\n result.point = point\r\n\r\n result.monthlyPayment = mp\r\n result.closingCost = cc\r\n result.maxLoanAmount = maxLoanAmount\r\n return result\r\n}\r\n\r\nconst LoanRateResult = (props) => {\r\n const [showSignup, setShowSignup] = useState(false)\r\n const [showEmailVerification, setShowEmailVerification] = useState(false)\r\n const [rate, setRate] = useState(\"\")\r\n const [maxLoanAmount, setMaxLoanAmount] = useState(\"\")\r\n const [monthlyPayment, setMonthlyPayment] = useState(\"\")\r\n const [closingCost, setClosingCost] = useState(\"\")\r\n const [unqualified, setUnqualified] = useState(false)\r\n const [unqualifiedReason, setUnqualifiedReason] = useState(\"\")\r\n\r\n const cardList = [\r\n {\r\n title: 'Interest Rate',\r\n value: rate\r\n },\r\n {\r\n title: 'Maximum Loan amount',\r\n value: maxLoanAmount\r\n },\r\n {\r\n title: 'Monthly Payment',\r\n value: monthlyPayment\r\n },\r\n {\r\n title: 'Closing Cost',\r\n value: closingCost\r\n }\r\n ]\r\n\r\n useEffect(()=>{\r\n let result = CalcHardMoneyLoanRate(props)\r\n setRate(result.floorRate.toFixed(3) + \"%\")\r\n setMonthlyPayment(\"$\" + com.commaize(result.monthlyPayment))\r\n setClosingCost(\"$\" + com.commaize(result.closingCost))\r\n setUnqualified(result.unqualified)\r\n setUnqualifiedReason(result.unqualifiedReason)\r\n setMaxLoanAmount(\"$\"+ com.commaize(result.maxLoanAmount))\r\n console.log(\"on props update\")\r\n }, [props.application])\r\n\r\n const back = (type) => {\r\n if (type === 1) {\r\n setShowEmailVerification(false)\r\n }\r\n }\r\n\r\n const signup = () => {\r\n if (showEmailVerification) {\r\n return (\r\n Check your email
\n {/* Please enter the 4 digit code sent to {this.props.application.borrower.email}
*/}\n {\n this.props.application.borrower.email && (\n \n
\n )\n }\n We sent a code to {this.props.application.borrower.email} { this.editEmail(1) }}>Edit
\n Enter the code to log in your account
\n \n {(this.state.verifingCode || this.state.sendingCode) ? {\n this.setState({ code: e })\n if (e.length === 4) {\n this.verifycodeAndCheckPastLoans(e)\n }\n }} />}\n\n
\n {(this.state.showResult && !this.state.verified) && showErrorMeesage()}\n Didn’t receive the email? {\n this.sendcode()\n }}>Resend
\n {showPastLoans()}\n \r\n back(type)} />\r\n
\r\n )\r\n }\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n const showUnqualified = () => {\r\n return Create Account
\r\n To explore your best loan option and get connected with our experienced loan officers
\r\n Already have an account? Log in
\r\n \r\n \r\n
\r\n }\r\n\r\n return (\r\n Sorry, we are unable to offer a loan based on the input provided. This is due to:
\r\n {unqualifiedReason}
\r\n \r\n {showSignup ? signup() :
\r\n );\r\n}\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(LoanRateResult))\r\n","import { useState, useEffect } from 'react';\r\nimport { Col, Row } from 'antd';\r\nimport LoanRateTitle from './LoanRateTitle.js';\r\nimport LoanRateCalculator from './LoanRateCalculator';\r\nimport LoanRateResult from './LoanRateResult';\r\nimport { useParams } from 'react-router-dom';\r\n\r\nexport default function LoanRate() {\r\n\r\n const { customerid } = useParams();\r\n const [showResult, setShowResult] = useState(false);\r\n useEffect(()=>{\r\n sessionStorage.setItem(\"cid\", customerid)\r\n }, [])\r\n\r\n return (\r\n \r\n \r\n {\r\n !props.showResult ? cardList.map((item, index) =>\r\n
\r\n
}\r\n \r\n Fill in the table on the left and click Calculate to see your rates
\r\n {item.title}
\r\n ---
\r\n \r\n )\r\n :\r\n (\r\n unqualified ? showUnqualified() :\r\n cardList.map((item, index) => \r\n {item.title}
\r\n {item.value}
\r\n \r\n )\r\n )\r\n }\r\n To obtain an accurate rate tailored to your specific situation, simply sign up below.
\r\n Our experienced loan officers will promptly reach out to assist you in finding the best rate available.
\r\n \r\n Already have an account? Login
\r\n {/* Privacy Statement
*/}\r\n \r\n \r\n
\r\n
\r\n );\r\n}","import React from 'react';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport './App.css';\nexport default function Copyright() {\n return (\n \n
\n
\n )\n};","import React from 'react';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport './App.css';\nimport LandingMenu from \"./Landing/LandingMenu.js\"\n\nimport Copyright from \"./Copyright.js\"\nexport default function Error404() {\n // THIS IS A HACK. I DON'T KNOW HOW TO SOLVE THIS RIGHT!!!\n // something to do with the wrong nesting\n if ( (window.location.pathname === \"/\" && window.location.hash.length > 0) || window.location.pathname === \"/resources/faq\") {\n window.location = window.location.href\n return (\n \n )\n } else {\n return (\n \n
© 2021 Zeitro. All rights reserved.
\n \n
\n )\n }\n}\n","import \"./ScrollBar.css\"\nimport \"./public.css\"\nimport React, { useState, useEffect } from 'react';\nimport Slider from 'rc-slider';\nimport 'rc-slider/assets/index.css';\nimport { commaize } from \"../../Common\";\n\nconst wipeoffComma = (e) => {\n return Number(e.replace(/,/g, \"\"))\n}\n\nexport default function ScrollBar(props) {\n const { max, min, step, initVal, scrollChangeValue, noSign, hideSlider } = props;\n \n useEffect(() => {\n setMaxValue(max);\n setMinValue(min > max ? max : min);\n setStepValue(step);\n setInitValue(initVal);\n setInputValue(initVal);\n }, [initVal, max, min, step])\n\n const [initValue, setInitValue] = useState(1)\n const [inputValue, setInputValue] = useState(1)\n const [maxValue, setMaxValue] = useState(3000000)\n const [minValue, setMinValue] = useState(0)\n const [stepValue, setStepValue] = useState(null)\n\n const initValueChange = (e) => {\n setInitValue(e)\n setInputValue(commaize(e))\n scrollChangeValue(e)\n }\n\n const inputChange = (e) => {\n let n = Number(e.target.value.replace(/[^\\d.-]/g, ''))\n if (n > maxValue) {\n setInitValue(maxValue)\n scrollChangeValue(maxValue)\n setInputValue(maxValue)\n } else {\n setInitValue(n)\n scrollChangeValue(n)\n setInputValue(n)\n }\n }\n\n return (\n \n \n \n\n
\n\n \n
\n \n
\n Error 404.
\nPage Not Found.
\n\n The application is still under construction. Please be patient!\n
\n \n\n\n
\n \n ![\"Your](\"/home.svg\")
\n
\n \n \n
\n )\n}\n\nexport function ScrollBarPercentage(props) {\n const { max, min, step, initVal, scrollChangeValue, percentageOf } = props;\n\n useEffect(() => {\n setMaxValue(max);\n setMinValue(min);\n setStepValue(step);\n setInitValue(initVal);\n setInputValue(initVal);\n setPercentageOfValue(percentageOf);\n // if (typeof percentageOf !== \"undefined\") {\n // setDollarValue(percentageOf * initVal * 0.01)\n // }\n }, [initVal, max, min, step, percentageOf])\n\n useEffect(() => {\n if (typeof percentageOf !== \"undefined\") {\n setDollarValue(percentageOf * initVal * 0.01)\n }\n }, [percentageOf])\n\n const [initValue, setInitValue] = useState(1)\n const [inputValue, setInputValue] = useState(1)\n const [maxValue, setMaxValue] = useState(3000000)\n const [minValue, setMinValue] = useState(0)\n const [stepValue, setStepValue] = useState(null)\n const [percentageOfValue, setPercentageOfValue] = useState(0)\n const [dollarValue, setDollarValue] = useState(typeof percentageOf !== \"undefined\" ? percentageOf * initVal * 0.01 : 0)\n const hasDollarInput = typeof percentageOf !== \"undefined\"\n \n const initValueChange = (e) => {\n let val = e\n if (e>maxValue) {\n val = maxValue\n }\n setInitValue(val)\n setInputValue(val)\n scrollChangeValue(val)\n if (hasDollarInput) {\n setDollarValue(0.01 * val * percentageOfValue)\n }\n }\n\n const inputChange = (e) => {\n let n = Number(e.target.value.replace(/[^\\d.-]/g, ''))\n if (n > maxValue) {\n setInitValue(maxValue)\n scrollChangeValue(maxValue)\n setInputValue(maxValue)\n if (hasDollarInput) {\n setDollarValue(0.01 * maxValue * percentageOfValue)\n }\n } else {\n setInitValue(n)\n scrollChangeValue(n)\n setInputValue(n)\n if (hasDollarInput) {\n setDollarValue(0.01 * n * percentageOfValue)\n }\n }\n }\n\n const inputChangePercentageOf = (e) => {\n let val = Number(e.target.value.replace(/[^\\d.-]/g, ''))\n let n = (val/percentageOf) * 100 \n if (n > maxValue) {\n setDollarValue(0.01 * maxValue * percentageOfValue)\n setInitValue(maxValue)\n scrollChangeValue(maxValue)\n setInputValue(maxValue)\n } else {\n setDollarValue(val)\n setInitValue(n)\n scrollChangeValue(n)\n setInputValue(n)\n }\n }\n\n \n\n return (\n {noSign !== true ? \"$\" : \"\"}
\n \n {!hideSlider &&\n
\n )\n}\n\nexport function InputWithPercentage(props){\n const { max, min, step, initVal, inputChangePercentage, percentageOf } = props;\n\n useEffect(() => {\n setMaxValue(max);\n setMinValue(min);\n setStepValue(step);\n setInitValue(initVal);\n setInputValue(initVal);\n setPercentageOfValue(percentageOf);\n // if (typeof percentageOf !== \"undefined\") {\n // setDollarValue(percentageOf * initVal * 0.01)\n // }\n }, [initVal, max, min, step, percentageOf])\n\n useEffect(() => {\n initValueChange(initVal)\n }, [initVal])\n\n useEffect(() => {\n if (typeof percentageOf !== \"undefined\") {\n setDollarValue(percentageOf * initVal * 0.01)\n }\n }, [percentageOf])\n\n const [initValue, setInitValue] = useState(1)\n const [inputValue, setInputValue] = useState(1)\n const [maxValue, setMaxValue] = useState(3000000)\n const [minValue, setMinValue] = useState(0)\n const [stepValue, setStepValue] = useState(null)\n const [percentageOfValue, setPercentageOfValue] = useState(0)\n const [dollarValue, setDollarValue] = useState(typeof percentageOf !== \"undefined\" ? percentageOf * initVal * 0.01 : 0)\n const hasDollarInput = typeof percentageOf !== \"undefined\"\n \n const initValueChange = (val) => {\n inputChangePercentage(val)\n }\n const inputChangePercentageOf = (e) => {\n let val = Number(e.target.value.replace(/[^\\d.-]/g, ''))\n let n = (val/percentageOf) * 100 \n if (n > maxValue) {\n setDollarValue(0.01 * maxValue * percentageOfValue)\n setInitValue(maxValue)\n inputChangePercentage(maxValue)\n setInputValue(maxValue)\n } else {\n setDollarValue(val)\n setInitValue(n)\n inputChangePercentage(n)\n setInputValue(n)\n }\n }\n\n \n\n return (\n %
\n \n {hasDollarInput && <>\n /
\n $
\n \n }\n\n \n {/*
\n )\n}\n","import React from 'react'\nimport Helmet from 'react-helmet'\nimport { connect } from 'react-redux'\nimport { withRouter, Link } from 'react-router-dom'\nimport { Select, Spin } from 'antd'\nimport smartlookClient from 'smartlook-client'\nimport './PreApp.css'\nimport * as st from '../State'\nimport * as act from '../Store/actions'\nimport { UpdateChangeProgressType, UpdateChangeLastTouch } from '../Store/progress'\nimport { PrequalHeader } from '../Landing/LandingMenu.js'\nimport 'pure-react-carousel/dist/react-carousel.es.css'\nimport { Button, Col, Container, Row, Form } from 'react-bootstrap'\nimport CheckGroup, { CheckGroupWithImage } from '../Common/components/CheckGroup'\nimport ScrollBar from '../Common/components/ScrollBar'\nimport EmailVerification from '../Application/EmailVerification'\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n progress: state.progress,\n property: state.application.property,\n borrower: state.borrower,\n hidden: false,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateApplication: (t) => {\n dispatch(act.updateApplication(t))\n },\n updateChangeLastTouch: (t) => {\n dispatch(UpdateChangeLastTouch(t))\n },\n updateChangeProgressType: (step, stage) => {\n dispatch(UpdateChangeProgressType(step, stage))\n },\n updateSelectField: (input, verb) => {\n dispatch(act.UpdateSelectField(input, verb))\n },\n changeReviewedLoans: (value) => {\n dispatch(act.ChangeReviewedLoans(value))\n },\n changeMainPropertyPurpose: (val) => {\n dispatch(act.ChangeMainPropertyPurpose(val))\n },\n changeMainPropertyAttribute: (t, verb) => {\n dispatch(act.ChangeMainPropertyAttribute(t, verb))\n },\n changeMainPropertyAppraisal: (event) => {\n dispatch(act.ChangeMainPropertyAppraisal(event))\n },\n changeMainPropertySalesPrice: (event) => {\n dispatch(act.ChangeMainPropertySalesPrice(event))\n },\n changeBorrowerInfo: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event.target.value, who, verb))\n },\n changeBorrowerInfoByValue: (val, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(val, who, verb))\n },\n clearBorrowerGift: () => {\n dispatch(act.ClearBorrowerGift())\n },\n clearBorrowerInsurance: () => {\n dispatch(act.ClearBorrowerInsurance())\n },\n})\n\nexport default class PreApp extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n loading: false,\n purpose: '',\n ownorrent: '',\n showHasContract: false,\n showHousePrice: false,\n focusedIndex: null, // Index of the currently focused component\n hasLO: '',\n loanofficers: [],\n selectedLOId: '',\n open: false,\n }\n\n const searchparams = new URLSearchParams(window.location.search)\n this.customerid = searchparams.get('customerid')\n this.loid = searchparams.get('loid')\n this.fromMarketplace = searchparams.get('marketplace') === 'true' ? true : false\n this.componentRefs = [] // Array to store the refs of each component\n\n fetch('/auth/getlos', {\n method: 'POST',\n body: JSON.stringify({\n CustomerID: this.customerid,\n }),\n headers: { 'Content-Type': 'application/json' },\n })\n .then((response) => {\n if (response.status !== 200) {\n console.warn('/auth/getlos:Looks like there was a problem. Status Code: ' + response.status)\n return\n }\n\n // Examine the text in the response\n response.json().then((js) => {\n if (js.Status !== 'OK') {\n } else {\n const los = js.LoanOfficers.map(\n ({ FirstName, LastName, Email, ID }) => ({\n ID,\n FirstName,\n LastName,\n Email,\n })\n )\n this.setState({ loanofficers: los })\n }\n })\n })\n .catch((err) => {\n console.error('Fetch Error :', err)\n })\n }\n\n componentDidMount() {\n // Add message event listener\n window.addEventListener('message', this.handleMessage)\n \n window.document.addEventListener('checkwalkback', this.onTouch)\n smartlookClient.init('d837cbb6bdd09c2c425261ab6ab338c05aac8ef0')\n smartlookClient.record({\n emails: true,\n forms: true,\n numbers: true,\n ips: true,\n })\n this.setFocus(0)\n if (this.props.property.salesprice === '') {\n this.props.changeMainPropertySalesPrice(500000)\n this.props.changeMainPropertyAppraisal(500000)\n }\n\n const hasLoid = sessionStorage.getItem('loid')\n const hasLO = sessionStorage.getItem('hasLO')\n this.setState({\n hasLO,\n selectedLOId: hasLoid ? hasLoid : '',\n })\n }\n\n componentWillUnmount() {\n // Remove message event listener\n window.removeEventListener('message', this.handleMessage)\n \n window.document.removeEventListener('checkwalkback', this.onTouch)\n }\n\n // Add message handler\n handleMessage = (event) => {\n // Verify the origin for security\n // Replace 'http://localhost:3001' with your marketplace domain\n // if (event.origin !== 'http://localhost:3001') {\n // return\n // }\n\n // Handle the message\n if (event.data.type === 'SET_SESSION_STORAGE') {\n try {\n console.log('SET_SESSION_STORAGE', event.data.key, event.data.value)\n \n const s = JSON.parse(event.data.value)\n\n this.props.updateApplication(s.borrowerState.application)\n sessionStorage.setItem(\"borrowerExists\", s.borrowerExists)\n\n // Optionally send confirmation back to parent window\n event.source.postMessage({\n type: 'STORAGE_SET_CONFIRMATION',\n key: event.data.key\n }, event.origin)\n } catch (error) {\n console.error('Error setting session storage:', error)\n // Optionally send error back to parent window\n event.source.postMessage({\n type: 'STORAGE_SET_ERROR',\n key: event.data.key,\n error: error.message\n }, event.origin)\n }\n }\n }\n\n setFocus(index) {\n // Update the focusedIndex state and scroll to the component\n this.setState({ index }, () => {\n // const { top, height } = this.componentRefs[index].getBoundingClientRect();\n const { innerWidth } = window\n // const scrollPosition = innerHeight / 2;\n\n // const centerY = top + height / 2;\n // const scrollY = window.innerHeight / 3 +( index - 1) * 400;\n let scrollY = 0\n if (innerWidth < 450) {\n switch (index) {\n case 0:\n scrollY = 0\n break\n case 1:\n scrollY = 400\n break\n case 2:\n scrollY = 800\n break\n case 3:\n scrollY = 1000\n break\n default:\n break\n }\n } else {\n switch (index) {\n case 0:\n scrollY = 0\n break\n case 1:\n scrollY = 200\n break\n case 2:\n scrollY = 600\n break\n case 3:\n scrollY = 1000\n break\n default:\n break\n }\n }\n window.scrollTo({\n top: scrollY,\n behavior: 'smooth',\n })\n })\n }\n\n onTouch = () => {\n const d = new Date()\n this.props.updateChangeLastTouch(d.toUTCString())\n }\n\n render = () => {\n let nextPage =\n '/services/preapp/emailverification?customerid=' +\n this.customerid +\n '&loid=' +\n this.state.selectedLOId\n\n if (sessionStorage.getItem('ZeitroA') !== null) {\n nextPage = '/application/interview/main/applicant'\n }\n\n const companyName = sessionStorage.getItem('companyName')\n const helmet = companyName ? companyName : 'Mortgage Service'\n\n const showSelectLO = () => {\n if (this.loid !== null) {\n return false\n }\n return this.state.purpose !== ''\n }\n\n const showPrice = () => {\n if (this.customerid === 'individualcustomers' || this.loid !== null) {\n return this.state.purpose !== ''\n } else {\n const { hasLO, selectedLOId } = this.state\n return (hasLO === 'no' || (hasLO === 'yes' && selectedLOId !== ''))\n }\n }\n\n const changePurpose = (e) => {\n this.onTouch()\n this.props.updateSelectField(new st.ChosenLoan(), 'selectedloan')\n this.props.changeReviewedLoans(0)\n if (e === 'purchase') {\n this.props.changeMainPropertyPurpose('purchase')\n this.props.changeMainPropertyAttribute(true, 'hascontract')\n // if change from purpose, clear gifts/insurance\n this.props.clearBorrowerGift()\n this.props.clearBorrowerInsurance()\n } else if (e === 'refinance') {\n this.props.changeMainPropertyPurpose('refinance')\n this.props.changeMainPropertyAttribute(false, 'hascontract')\n } else if (e === 'cashout') {\n this.props.changeMainPropertyPurpose(st.POL_Cashoutrefinance)\n this.props.changeMainPropertyAttribute(false, 'hascontract')\n }\n this.setState({ purpose: e })\n this.setFocus(1)\n }\n\n const onAppraisal = (e) => {\n this.props.changeMainPropertyAppraisal(e)\n this.props.changeMainPropertySalesPrice(e)\n }\n\n const getClsName = () => {\n if (this.state.purpose === '') {\n return ''\n }\n return 'h-1000'\n }\n\n const { appraisal } = this.props.property\n const { purpose } = this.props.application.property\n\n return (\n %
\n */}\n {hasDollarInput && \n
}\n $
\n \n {Math.round(inputValue*100)/100}%
\n \n \n {helmet + ' - What brings you here today?'} \n \n\n \n (this.componentRefs[0] = ref)}\n className=\"preappSection1 \"\n >\n \n
\n \n
\n \n
\n
\n\n {showSelectLO() && (\n (this.componentRefs[2] = ref)}>\n \n
\n {this.state.hasLO === 'yes' && (\n \n
\n )}\n
\n )}\n\n {showPrice() && (\n \n Do you currently have a loan officer?\n
\n \n {\n this.setState({ hasLO: e })\n sessionStorage.setItem('hasLO', e)\n if (e === 'no') {\n sessionStorage.removeItem('loid')\n this.setState({ selectedLOId: '' })\n }\n }}\n value={this.state.hasLO}\n type=\"radio\"\n direction=\"horizontal\"\n style={{ width: '100%' }}\n />\n
\n \n \n Please select your loan officer\n
\n \n {\n this.setState({ selectedLOId: v })\n sessionStorage.setItem('loid', v)\n }}\n >\n {this.state.loanofficers\n .filter((lo) => !lo.Email.includes( 'noreply'))\n .map((lo) => (\n \n ))}\n \n
\n \n (this.componentRefs[3] = ref)}>\n \n ![\"preappHouse\"](\"/images/preappHouse.png\")
\n \n
\n \n
\n
\n )}\n \n \n )\n }\n}\n\nPreApp = withRouter(connect(mapStateToProps, mapDispatchToProps)(PreApp))\n\nexport class PreAppEmailVerification extends React.Component {\n constructor(props) {\n super(props)\n\n this.state = {\n loading: false,\n showVerification: false,\n validated: false,\n }\n\n const searchparams = new URLSearchParams(window.location.search)\n\n this.customerid = searchparams.get('customerid')\n this.loid = searchparams.get('loid')\n this.emailref = React.createRef()\n }\n\n onTouch = () => {\n const d = new Date()\n this.props.updateChangeLastTouch(d.toUTCString())\n }\n\n render = () => {\n const companyName = sessionStorage.getItem('companyName')\n const helmet = companyName ? companyName : 'Mortgage Service'\n\n const changeBorrowerInfo = (who, verb) => {\n return (event) => {\n this.onTouch()\n this.props.changeBorrowerInfo(event, who, verb)\n }\n }\n\n const handleSubmit = (event) => {\n event.preventDefault()\n const form = event.currentTarget\n // console.log(form.checkValidity())\n if (form.checkValidity() === false) {\n event.stopPropagation()\n this.setState({ validated: true })\n return\n }\n this.setState({ showVerification: true })\n this.setState({ validated: true })\n }\n\n const back = (type) => {\n if (type === 1) {\n this.setState({ showVerification: false })\n }\n }\n\n const { firstname, lastname, email } = this.props.application.borrower\n\n return (\n \n What’s your estimated home value?\n
\n \n
\n \n \n \n \n \n {helmet + ' - Email Verification'} \n \n\n \n {!this.state.showVerification ? (\n \n \n
\n
\n \n \n Save your progress\n
\n \n \n Continue\n \n
\n \n Already have an account?\n \n (window.location.href = '/services/signin?customerid=' + this.customerid)\n }\n >\n Sign in\n \n
\n \n \n \n ) : (\n <>\n \n
\n\n\n );\n}\n","import React, { Component } from \"react\";\nimport Toast from 'react-bootstrap/Toast'\n\nimport * as com from './Common';\n\nconst deepcopy = require('deepcopy');\n\nexport default class Notifications extends Component{\n\n constructor(props){\n super(props)\n this.inteval = undefined\n this.state = {\n notifications: []\n }\n }\n\n componentDidMount = () => {\n this.getNotifications()\n this.inteval = setInterval(this.getNotifications, 30 * 1000)\n }\n\n componentWillUnmount = () => {\n clearInterval(this.inteval)\n }\n\n getNotifications = () =>{\n let token = sessionStorage.getItem(\"ZeitroA\")\n fetch(`/borrower/getnotifications`, {\n method: 'GET',\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\"\n }\n }).then(response => {\n if (response.status !== 200) {\n console.log('Looks like there was a problem. Status Code: ' + response.status);\n return;\n }\n response.json().then(js => {\n if(js.Notifications != null && js.Notifications.length !== 0){\n this.setState({notifications: []}, () => this.setState({notifications: js.Notifications}))\n }\n })\n })\n }\n\n handleNotificationClose = (notification, i) => {\n let body = {\n NotificationId: notification.id,\n Closed: new Date()\n }\n let token = sessionStorage.getItem(\"ZeitroA\")\n fetch('/borrower/archivenotification', {\n method: 'POST',\n body: JSON.stringify(body),\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\"\n }\n }).then(response => {\n if (response.status !== 200) {\n console.log('Looks like there was a problem. Status Code: ' + response.status);\n return;\n } else {\n let stateCopy = deepcopy(this.state)\n stateCopy.notifications.splice(i, 1)\n this.setState({notifications: stateCopy.notifications})\n }\n })\n }\n\n\n render() {\n let closeNotification = (notification, i) => {\n return e => this.handleNotificationClose(notification, i)\n }\n \n return(\n F.A.Q.
\n\n\n\n\n
\n\n Documents required vary from loan to loan, but generally the following are required, often for up to two years back:\n
\n\n \n What is the difference between a fixed-rate loan and an adjustable-rate loan?
\n With a fixed-rate mortgage, the interest rate stays the same during the life of the loan. With an adjustable-rate mortgage (ARM), the interest changes periodically, typically in relation to an index. While the monthly payments that you make with a fixed-rate mortgage are relatively stable, payments on an ARM loan will likely change. There are advantages and disadvantages to each type of mortgage, and the best way to select a loan product is by talking to us.\n
\n \n What documents will be required to close a loan?\n With a fixed-rate mortgage, the interest rate stays the same during the life of the loan. With an adjustable-rate mortgage (ARM), the interest changes periodically, typically in relation to an index. While the monthly payments that you make with a fixed-rate mortgage are relatively stable, payments on an ARM loan will likely change. There are advantages and disadvantages to each type of mortgage, and the best way to select a loan product is by talking to us.\n
\n\n Documents required vary from loan to loan, but generally the following are required, often for up to two years back:\n
- \n
- statements of income such as W-2’s, pay stubs, financial statements \n
- bank statements \n
- a list of any assets that you own \n
- rental or mortgage history \n
- employment history and current information \n
- personal identification, including Green Card if applicable \n
- purchase contract \n
- Other pertinent items such as: Bankruptcy Discharge Notice or Divorce Decree\n loan application \n
\n How do I know how much house I can afford?
\n Generally speaking, you can purchase a home with a value of two or three times your annual household income. However, the amount that you can borrow will also depend upon your employment history, credit history, current savings and debts, and the amount of down payment you are willing to make. You may also be able to take advantage of special loan programs for first time buyers to purchase a home with a higher value. Give us a call, and we can help you determine exactly how much you can afford.\n
\n \n Generally speaking, you can purchase a home with a value of two or three times your annual household income. However, the amount that you can borrow will also depend upon your employment history, credit history, current savings and debts, and the amount of down payment you are willing to make. You may also be able to take advantage of special loan programs for first time buyers to purchase a home with a higher value. Give us a call, and we can help you determine exactly how much you can afford.\n
\n What is a rate lock?
\n A rate lock is a contractual agreement between the lender and buyer. There are four components to a rate lock: loan program, interest rate, points, and the length of the lock.\n
\n\n \n A rate lock is a contractual agreement between the lender and buyer. There are four components to a rate lock: loan program, interest rate, points, and the length of the lock.\n
\n {this.state.notifications.length !== 0 &&\n this.state.notifications.map((n, i) =>(\n \n \n 
\n \n {n.text} \n \n ))\n }\n
\n )\n }\n}","import React, { Component } from 'react';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport './App.css';\nimport { withRouter } from \"react-router-dom\";\nimport {UpdateChangeProgressType} from \"./Store/progress\"\nimport { connect } from 'react-redux'\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n progress: state.progress,\n hidden: false,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateChangeProgressType: (step, stage) => {\n dispatch(UpdateChangeProgressType(step, stage))\n }, \n});\n\nexport default class Glossary extends Component {\n\n componentDidMount() {\n this.props.updateChangeProgressType(\"glossary\")\n }\n render = () => {\n return (\n Read me
\n\n
\n\n )\n }\n}\n\nGlossary = withRouter(connect(mapStateToProps, mapDispatchToProps)(Glossary))","import React, {Component} from 'react';\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport * as com from \"./Common.js\"\nimport './App.css';\nimport { getCurrentState } from './Store'\nimport { Spinner } from 'react-bootstrap';\nimport { connect } from 'react-redux'\n\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n\n});\n\n\nclass LogoutPage extends Component {\n\n componentDidMount = () => {\n let logoutpath = com.redirectPublicWebsite()\n if (com.getCustomerId() === \"individualcustomers\") {\n logoutpath = sessionStorage.getItem(\"logoutpath\")\n } \n if (window.location.href.includes(\"localhost\")) {\n logoutpath=\"http://localhost:3000/services/signin?customerid=zeitro\"\n }\n // getCurrentState()\n window.setTimeout( () => {\n window.sessionStorage.removeItem(\"ZeitroA\")\n window.sessionStorage.removeItem(\"state\") \n window.sessionStorage.removeItem(\"originalstate\") \n window.sessionStorage.removeItem(\"f1003\") \n window.sessionStorage.removeItem(\"newcustomer\") \n\n window.location.href = window.location.href = logoutpath\n }, 500 ) \n }\n render = () => {\n\n return (\n\n LOAN DICTIONARY
\n\n\n 1-9 \n A-C \n D-F \n G-I \n J-L \n M-O \n P-R \n S-T \n U-Z\n
\n\n\n
\n 1-9
\n\n 10/15/30-Year Fixed Mortgage – A fixed-rate home loan with terms lasting 10, 15, or 30 years, depending on which option you choose. The most common loan term is a 30-year fixed rate mortgage.\n
\n \n 203k Loan – An FHA loan where financing goes toward buying a house and needed home improvements.\n
\n \n 3/1 ARM – An adjustable-rate mortgage where the mortgage rate is fixed for the first three years of the loan. Mortgage rates adjust annually after the third year.\n
\n \n 5/1 ARM – An adjustable-rate mortgage that has a fixed mortgage rate for the first five years of the loan term. After, the mortgage rate adjusts annually for the remainder of the loan.\n
\n \n 80/10/10, 80/15/5 – See Piggyback Loan.\n
\n \n 100% Loan – A loan where no down payment is required. VA and USDA loans are examples of 100% loans.\n
\n\n A-C
\n\n\n Abstract of title –\nA written history of all the transactions related to the title for a specific tract of land. An abstract of title covers the period from the original source of title (often the original land grant from the United States government to an individual) to the present time and summarizes all subsequent documents that have been recorded against that tract.\n
\n\n \n Adjustable-Rate Mortgage – Also known as an ARM, adjustable-rate mortgages have a variable interest rate. This means that the mortgage rate will be fixed for a set amount of time, then adjust on a regular basis for the remainder of the loan.\n
\n \n Alt-A Mortgage – A loan that falls somewhere in between “prime” and “subprime” in terms of risk. Alt-A homebuyers generally have higher loan-to-value (LTV) ratios, less income documentation, average credit scores, and additional properties.\n
\n \n Amortization – The way a loan is paid off one month at a time. With a mortgage, the principal amount paid each month increases, while the interest paid decreases. In other words, at the beginning of the loan, most of your payment is interest. At the end, the payment is mostly principal.\n
\n\n \n Annual Percentage Rate (APR) – This is the rate that shows the true cost of borrowing. It factors in the interest rate of your loan, plus all the costs associated with obtaining the loan. Comparing APRs from various lenders is a useful way to see whose offer is best.\n
\n Appraisal – An evaluation of a home to determine its value.\n
\n Assumption – When one person or party takes on (assumes) an existing mortgage.\n
\n Balloon Mortgage – A mortgage loan with lower monthly payments and a large sum due at the end of the loan period, as opposed to higher monthly payments with no money due at the end of the loan term.\n
\n Blanket Mortgage – A mortgage used to purchase more than one property. These are commonly used for buying multiple pieces of land to develop, or for purchasing existing properties with the intent to rent.\n
\n Bridge Loan – A temporary loan used to “bridge” the time gap when financing is needed but funds are not yet available. These are commonly used when a homeowner wants to buy a new property but first needs to sell their current property.\n
\n Buy-Down – A buy-down is when you pay your lender a premium in order to lower your mortgage rate.\n
\n Caps – With ARMs, a cap is a limit to how much your mortgage rate can change. This protects homeowners from experiencing a sudden spike in mortgage payments.\n
\n Cash-Out Refinance – A refinance loan where the homeowner takes equity out of their home in the form of cash.\n
\n\n Certificate of Reasonable Value (CRV) – After the VA home appraisal, the VA determines the value of the home with a CRV. This value affects the size of the loan a VA homebuyer will be able to secure.\n
\n\n Closing – The last step of the homebuying process. This is where you sign your loan documents, release funds from escrow, and receive the keys to your new house.\n
\n\n Closing Costs – All the fees associated with the loan and purchasing the property. For instance, loan origination, title, escrow, appraisal, recording, and upfront mortgage insurance are all closing costs. Most closing costs are paid out-of-pocket at closing unless the seller has agreed to pay them for you.\n
\n\n Conforming Loan – A mortgage that conforms to the standards set by Fannie Mae and Freddie Mac, sometimes referred to as a conventional loan.\n
\n\n Construction Loan – A short-term loan used to secure funding to build a home. These generally have higher interest rates and are often refinanced once the home is completed.\n
\n\n Contingency – This is basically an “out” that is written into your purchase contract. If conditions of the contingency are not met, you can back out of the transaction and keep your earnest money.\n Example: An inspection contingency is common. If the inspection is not to your standards, then you can cancel your offer with no penalty.\n
\n\n Conventional Mortgage – A mortgage loan that isn’t guaranteed or insured by the government. Also, referred to as a conforming loan.\n
\n\n Credit Report – A summary of all your debts. Your creditors, balances, available credit, any late payments, and a number of other factors are listed on your credit report. Lenders review your credit report when considering you for a loan. You are eligible for one free credit report a year from AnnualCreditReport.com by law.\n
\n\n Credit Score – Your credit history and risk assessment expressed by a number. The three major credit bureaus — Experian, Equifax, and Transunion — have proprietary algorithms to determine your number. The lenders uses your middle score for qualification.\n Example: Your scores from each bureau are 680, 690, and 700. The lender will use 690.\n
\n D-F
\n\nDebt-to-Income (DTI) Ratio – The percentage of your expenses compared to your gross income. The front-end ratio (or front ratio) is your proposed housing payment compared to your income. Your back-end ratio (or back ratio) is all your monthly debt payments, plus proposed housing payment compared to your income.\n Example: Your income before taxes is $5,000 per month, and your future house payment is $1,600 per month. You have a student loan payment of $100, a car payment of $200, and a credit card payment of $50. Your DTI is 39%. Your front-end ratio is 32% ($1,600 / $5,000) and your back-end ratio is 39% ($1,950 / $5,000). Another way of expressing your DTI is 32/39.\n
\n Deed-in-Lieu of Foreclosure – The property is deeded to the lender in order to avoid foreclosure proceedings.\n
\n\n Deed Of Trust – The deed of trust acts as your loan’s security and is stored in public records. The deed of trust is often signed at closing.\n
\n\n Delinquency – When you don’t make a monthly payment on your mortgage. Continued delinquency can potentially lead to foreclosure.\n
\n\n Dependent– Who is a Dependent? A dependent is a person whom the borrower supports financially. In most cases, the dependent is a member of the mortgage applicant's household, with certain exceptions, such as a college student living on campus but being fully supported by his parents. In many cases, an applicant can use the number of dependents listed on the most recent tax return as a guideline when filling out a mortgage application.\n When you’re claiming a dependent who is a child, there are further requirements:\n
\n - \n
- The child has to have lived with you for at least half of the year. \n
- The child has to be related to you as a son, daughter, stepchild, foster child, brother, sister, stepbrother, stepsister, or a descendant of any of those. \n
- The child must be 18 or younger at the end of the year, or under 24 if a student. To be a student, the child must have attended school full-time during at least five months of the year. The five months don’t have to be in a row. \n
- The child must be younger than you (or your spouse, if married filing jointly), unless the child is disabled. \n
Discount Point – This is similar to an origination point, but is only allowed to be charged if it’s used to lower your interest rate.\n
\n\n Down Payment – The amount you pay toward the purchase price of your home.\n
\n\n Earnest Money – This is the money you pay upfront to show the seller you are serious, or “earnest” about buying their home. The money is held by the escrow company and is applied toward down payment and/or closing costs when the transaction closes. Usually earnest money is between 1% and 3% of the purchase price. You can lose your earnest money, but only by backing out of the purchase contract without the appropriate contingency.\n
\n\n Escrow – The company that holds and accepts money from all parties involved in the transaction, then distributes it appropriately at closing. You often sign final loan paperwork at the escrow office.\n
\n\n Fannie Mae – The Federal National Mortgage Association, often called Fannie Mae, is a federal corporation that backs mortgages such as Conventional 97 and HomeReady.\n
\n\n Freddie Mac – The Federal Home Loan Mortgage Corporation, or Freddie Mac, is a government enterprise that backs mortgages, like the Home Possible Advantage.\n
\n\n FHA Loan – A mortgage backed by the Federal Housing Administration. FHA loans were created to help lower income homebuyers afford homes.\n
\n\n First Mortgage – The primary mortgage on a home. Usually this term is only used when a borrower also has a second mortgage.\n
\n\n Fixed-rate Mortgage – A loan where the interest rate remains the same for the life of the mortgage.\n
\n\n Float – What happens before you lock your interest rate. When you float your interest rate, you actively watch interest rate fluctuations and wait for a time to lock. If you float your rate, your future monthly mortgage payment could go up if rates go up. Also see Lock.\n
\n\n Foreclosure – When someone fails to make mortgage payments, banks sell the property elsewhere. This legal process from start to finish is called foreclosure.
\n\n\n G-I
\n\nGift Money – The money you receive from an eligible source (family member, non-profit, etc.) to apply to use as a down payment. You can use gift money on any type of loan, but each loan has its own restrictions.\n
\n\n Good Faith Estimate (GFE) – This is a document you should receive within 3 days of applying for a loan. It details the fees associated with the mortgage. Take this document with you at loan closing to make sure the fees didn’t change dramatically. For a sample GFE, see our downloadable mortgage forms page.\n
\n\n\n HARP Loan – A refinance program that helps homeowners with negative equity in their home. The program expired Dec. 31, 2018.\n
\n\n\n\n Hazard Insurance – See Homeowner’s Insurance.\n
\n\n\n\n Homeowners Association (HOA) – The organization that creates and maintains the bylaws and rules for a specific housing development, such as a Planned Unit Development (PUD) or condominium project. Homeowners within the community must pay dues to the HOA, usually monthly or yearly.\n
\n\n\n\n Homeowners Insurance – The insurance policy that insures the home being purchased in the case of fire or other hazards.\n
\n\n\n\n HOA/HOA Dues – See Homeowners Association.\n
\n\n\n\n Home Equity – The total value of the property minus the amount currently owed. A $400,000 home with $300,000 remaining on the mortgage has earned $100,000 in home equity.\n
\n\n\n\n Home Equity Line of Credit (HELOC) – A mortgage loan that is backed by the current equity in your home. Essentially, you can take money out of your home equity, but will need to repay it plus interest.\n
\n\n\n\n HUD/HUD1 – You receive this document when you sign final loan paperwork at escrow. It breaks down all the fees associated with the loan and tells you the final dollar amount you need to pay to close the loan.\n
\n\n\n\n Impound Account – An account set up by a mortgage company to hold your tax and insurance payments.\n\n\n\n
\n\n\n\n Index – Rate averages that determine the interest rate of an ARM after the initial fixed period. See also ARM and Margin.\n\n\n\n
\n\n\n\n Interest-Only Mortgage – A mortgage where the homebuyer only pays interest and not principal for a fixed term (usually around 5 years). When paying the principal is added, the monthly payment will increase, sometimes significantly.\n\n\n\n
\n\n\n\n Investment Property – Property you own but don’t occupy, instead renting it out to generate income or preparing it to sell.\n\n
\n\n J-L
\n\n\n\n\nJumbo Loan – A loan that exceeds the conforming limits set by Freddie Mac and Fannie Mae, so not backed by the government. Rather, private banks issue and approve jumbo loans.\n\n\n\n
\n\n\n\n Lender Credit – A credit given to the homebuyer from the lender in exchange for accepting a higher mortgage rate.\n\n\n\n
\n\n\n\n Lender-Paid Mortgage Insurance – Mortgage insurance that is covered by the lender in exchange for a higher mortgage rate.\n\n\n\n
\n\n\n\n Letter of Explanation – A document that provides the mortgage underwriter with extra information they may need for the mortgage to get approved.\n\n\n\n
\n\n\n\n Lien – The bank’s claim on a property until the debt (aka the mortgage loan) is paid off.\n\n\n\n
\n\n\n\n Loan Officer – Act as the liaison between the homebuyer and the bank to ensure completion of the loan.\n\n\n\n
\n\n\n\n Loan Originator – Another term for a loan officer.\n\n\n\n
\n\n\n\n Loan Processor – The person who prepares and organizes the necessary files for the mortgage.\n\n\n\n
\n\n\n\n Loan-to-Value (LTV) Ratio – The percentage of your loan amount compared to the home’s value and/or purchase price.\n\n\n\n Example: If you put 5% down on a $200,000 home, then your loan amount is $190,000 and your LTV is 95%.\n\n
\n\n\n\n Lock – The act of securing an interest rate on a loan. After a lock, future rate fluctuations in the market won’t affect the interest rate on your loan. See also Float.\n\n\n
\n M-O
\n\n\n\n\nMargin – The amount of extra interest the lender charges when an ARM starts adjusting. The margin and the index are added to determine the rate you pay when the ARM’s fixed period ends.\n\n\n\n
\n\n\n\n Mortgage – A loan on a property for which the payments will retire the debt at the end of the loan term.\n\n\n\n
\n\n\n\n Mortgage Banker/Mortgage Lender – Unlike a mortgage broker, this company actually lends the money for a mortgage loan, as well as takes the borrower’s application and processes the loan. See Mortgage Broker.\n\n\n\n
\n\n\n\n Mortgage Broker – A company or individual that takes a loan application then selects a bank to fund the loan. The broker sends the loan to a bank, and the bank lends the money. The bank pays the mortgage broker for sending the loan.\n\n\n\n
\n\n\n\n Mortgage Discount Points – Homebuyers can lower their mortgage rate at closing by paying mortgage discount points.\n\n\n\n
\n\n\n\n Mortgage Insurance – Loan insurance is required on most mortgages that don’t have a large enough down payment. VA loans do not require mortgage insurance, since they are backed by the VA. In some cases, mortgage insurance can be removed from the loan once a specific equity is earned.\n\n\n\n
\n\n\n\n Mortgage Payment – The monthly payment you make on your home loan, which includes principal, interest, taxes, and insurance. See PITI.\n\n\n\n
\n\n\n\n Mortgage Principal – The total amount to be paid on your home, not including interest.\n\n\n\n
\n\n\n\n Mortgage Rate – The interest rate for your home loan.\n\n\n\n
\n\n\n\n Mortgage Rate Lock – Choosing a mortgage rate and locking it in so it won’t change. See Lock.\n\n\n\n
\n\n\n\n Mortgage Term – The length, or life, of the mortgage. Common loan terms are 15 or 30 years.\n\n\n\n
\n\n\n\n Mortgage Underwriter – Someone who works for the lender that decides whether your home loan is approved.\n\n\n\n
\n\n\n\n Origination Point – The fee you pay the lender for approving the loan. A point is equal to 1% of the loan amount and is paid at closing with your other closing costs. It may also be paid by the seller if it’s negotiated into the purchase contract.\n
\n\n\n P-R
\n\n\n\n\nPre-approval – This occurs after you submit a mortgage application and lets you know exactly how large a loan you qualify for.\n\n\n\n
\n\n\n\n Pre-qualification – The first step in the mortgage process where you supply information on your income, credit score, and debt to get a general idea of how large a loan you could qualify for.\n\n\n\n
\n\n\n\n P&I – The principle and interest payment on a home loan not including taxes, insurance, or HOA dues (if applicable).\n\n\n\n
\n\n\n\n Piggyback Loan – When a borrower opens a first and second mortgage simultaneously when buying a home, usually to avoid private mortgage insurance. See 80/10/10.\n\n\n\nExample: You buy a home for $200,000. You open a first mortgage for $160,000 and a second mortgage for $20,000, and put $20,000 down. Since your first mortgage is at 80% loan-to-value, you don’t need mortgage insurance.\n\n
\n\n\n\n PITI – This represents the homebuyer’s entire monthly payment. It stands for principal, interest, taxes, and insurance.\n\n\n\n
\n\n\n\n Prepayment Penalty – The penalty a borrower must pay if the loan is paid off within a short period of time. FHA, VA, USDA, and conventional mortgages typically do not have a prepayment penalty.\n\n\n\n
\n\n\n\n Private Mortgage Insurance (PMI) – The insurance policy that covers your mortgage lender in case you default on the loan. You pay for this policy monthly whenever you put less than 20% down on a conventional mortgage.\n\n\n\n
\n\n\n\n Processing – The loan processor puts your loan file together so that it is complete prior to the underwriting process. See Underwriting.\n\n\n\n
\n\n\n\n Reverse Mortgage – A loan where you can tap into your home equity without adding to monthly payments. You must be 62 years old or older to be eligible.\n\n\n
\n S-T\n
\n\n\n\n\nSecond Mortgage – A lien that is second priority to a first mortgage on a home. Second mortgages usually have higher interest rates, since they are higher-risk loans. They are often used to help the borrower avoid private mortgage insurance. See Piggyback Loan.\n\n\n\n
\n\n\n\n Short Sale – In lieu of a foreclosure the homeowner sells their home for less than the amount left on the mortgage.\n\n\n\n
\n\n\n\n Stated Income Mortgage – A mortgage loan where you don’t have to supply your income information.\n\n\n\n
\n\n\n\n Streamline Refinance – A refinance that requires less documentation than other refinance options. You cannot take out cash with a streamline refinance. See Cash-out Refinance.\n\n\n\n
\n\n\n\n Term – The length of the loan, expressed in years or months.\n\n\n\n
\n\n\n\n Title & Title Insurance – The title is the document that shows ownership history, the outstanding debts that are tied to the property, and current ownership. Title insurance protects you and the lender against any previous owner who claims rights to the property.\n
\n\n\n\n Truth in Lending (TIL) – You should receive this document within 3 days of applying for the loan. It tells you the loan’s APR, whether it has a prepayment penalty, and the loan terms, among others. For a sample TIL, see our downloadable mortgage forms page.\n
\n\n\n U-Z
\n\n\n\n\nUnderwriting – The process of verifying that the borrower’s documentation adheres to a specific loan program’s guidelines.\n
\n\n\n\n USDA Loan – The US Department of Agriculture (USDA) loan, or Rural Housing Mortgage, is a loan with no down payment requirement. Eligible homes are restricted to rural areas and income limits.\n
\n\n\n\n VA Mortgage – The Veterans Affairs mortgage is a no-money down, low interest rate loan available only to veterans and active-duty military members. The loan is backed by the VA and does not require mortgage insurance.\n\n\n\n
\n\n\n\n Zero-down Mortgage – A mortgage that doesn’t require a down payment at closing.\n\n
\n \n
\n\n )\n }\n}\n\n\n\n\nexport default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(LogoutPage)","import * as com from '../../Common'\n\n// Step types\nconst APPLICATION_STEP_TYPES = {\n PERSONAL: 'Personal',\n SUBJECT_PROPERTY: 'Subject property',\n INCOME: 'Income',\n FINANCE: 'Finance',\n DECLARATIONS: 'Declarations',\n}\n\n// Menu items\nconst STEP_MENU_ITEMS = {\n YOUR_INFO: 'Your info',\n CURRENT_RESIDENCE: 'Current residence',\n EMPLOYMENT: 'Employment',\n OTHER_INCOME: 'Other income',\n ASSETS: 'Assets',\n CREDIT_CHECK: 'Real estate',\n LIABILITIES: 'Liabilities',\n PROPERTY_MONEY: 'Property & money',\n FINANCES: 'Finances',\n}\n\n// Applicant step IDs\nexport const APPLICANT_STEP_IDS = {\n PERSONAL: 1,\n YOUR_INFO: com.stageToNumberApplication.applicant,\n CURRENT_RESIDENCE: com.stageToNumberApplication.residence,\n SUBJECT_PROPERTY: com.stageToNumberApplication.property,\n INCOME: 4.5,\n EMPLOYMENT: com.stageToNumberApplication.income,\n OTHER_INCOME: com.stageToNumberApplication.income + 1,\n FINANCE: 6.5,\n ASSETS: com.stageToNumberApplication.assets,\n CREDIT_CHECK: com.stageToNumberApplication.creditcheck,\n LIABILITIES: com.stageToNumberApplication.liabilities,\n DECLARATIONS: 9.5,\n PROPERTY_MONEY: com.stageToNumberApplication.propertymoney,\n FINANCES: com.stageToNumberApplication.finances,\n}\n\n// Co-borrower step IDs\nexport const CO_BORROWER_STEP_IDS = {\n PERSONAL: 11.5,\n YOUR_INFO: com.stageToNumberApplication.coborrower,\n CURRENT_RESIDENCE: com.stageToNumberApplication.coborrower + 1,\n SUBJECT_PROPERTY: com.stageToNumberApplication.coborrower + 2,\n INCOME: 14.5,\n EMPLOYMENT: com.stageToNumberApplication.coborrower + 3,\n OTHER_INCOME: com.stageToNumberApplication.coborrower + 4,\n FINANCE: 16.5,\n ASSETS: com.stageToNumberApplication.coborrower + 5,\n CREDIT_CHECK: com.stageToNumberApplication.coborrower + 6,\n LIABILITIES: com.stageToNumberApplication.coborrower + 7,\n DECLARATIONS: 19.5,\n PROPERTY_MONEY: com.stageToNumberApplication.coborrower + 8,\n FINANCES: com.stageToNumberApplication.coborrower + 9,\n}\n\n// Base paths\nconst INTERVIEW_BASE_PATH = '/application/interview/main'\n\n// Applicant flow steps\nexport const APPLICANT_FLOW_STEPS = [\n {\n type: APPLICATION_STEP_TYPES.PERSONAL,\n id: APPLICANT_STEP_IDS.PERSONAL,\n path: `${INTERVIEW_BASE_PATH}/applicant`,\n list: [\n {\n menu: STEP_MENU_ITEMS.YOUR_INFO,\n path: `${INTERVIEW_BASE_PATH}/applicant`,\n id: APPLICANT_STEP_IDS.YOUR_INFO,\n },\n {\n menu: STEP_MENU_ITEMS.CURRENT_RESIDENCE,\n path: `${INTERVIEW_BASE_PATH}/residence`,\n id: APPLICANT_STEP_IDS.CURRENT_RESIDENCE,\n },\n ],\n },\n {\n type: APPLICATION_STEP_TYPES.SUBJECT_PROPERTY,\n path: `${INTERVIEW_BASE_PATH}/property`,\n id: APPLICANT_STEP_IDS.SUBJECT_PROPERTY,\n },\n {\n type: APPLICATION_STEP_TYPES.INCOME,\n path: `${INTERVIEW_BASE_PATH}/income`,\n id: APPLICANT_STEP_IDS.INCOME,\n list: [\n {\n menu: STEP_MENU_ITEMS.EMPLOYMENT,\n path: `${INTERVIEW_BASE_PATH}/income`,\n id: APPLICANT_STEP_IDS.EMPLOYMENT,\n },\n {\n menu: STEP_MENU_ITEMS.OTHER_INCOME,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.income + 1}`,\n id: APPLICANT_STEP_IDS.OTHER_INCOME,\n },\n ],\n },\n {\n type: APPLICATION_STEP_TYPES.FINANCE,\n path: `${INTERVIEW_BASE_PATH}/assets`,\n id: APPLICANT_STEP_IDS.FINANCE,\n list: [\n {\n menu: STEP_MENU_ITEMS.ASSETS,\n path: `${INTERVIEW_BASE_PATH}/assets`,\n id: APPLICANT_STEP_IDS.ASSETS,\n },\n {\n menu: STEP_MENU_ITEMS.CREDIT_CHECK,\n path: `${INTERVIEW_BASE_PATH}/creditcheck`,\n id: APPLICANT_STEP_IDS.CREDIT_CHECK,\n },\n {\n menu: STEP_MENU_ITEMS.LIABILITIES,\n path: `${INTERVIEW_BASE_PATH}/liabilities`,\n id: APPLICANT_STEP_IDS.LIABILITIES,\n },\n ],\n },\n {\n type: APPLICATION_STEP_TYPES.DECLARATIONS,\n path: `${INTERVIEW_BASE_PATH}/propertymoney`,\n id: APPLICANT_STEP_IDS.DECLARATIONS,\n list: [\n {\n menu: STEP_MENU_ITEMS.PROPERTY_MONEY,\n path: `${INTERVIEW_BASE_PATH}/propertymoney`,\n id: APPLICANT_STEP_IDS.PROPERTY_MONEY,\n },\n {\n menu: STEP_MENU_ITEMS.FINANCES,\n path: `${INTERVIEW_BASE_PATH}/finances`,\n id: APPLICANT_STEP_IDS.FINANCES,\n },\n ],\n },\n]\n\n// Co-borrower flow steps\nexport const CO_BORROWER_FLOW_STEPS = [\n {\n type: APPLICATION_STEP_TYPES.PERSONAL,\n id: CO_BORROWER_STEP_IDS.PERSONAL,\n path: `${INTERVIEW_BASE_PATH}/coborrower`,\n list: [\n {\n menu: STEP_MENU_ITEMS.YOUR_INFO,\n path: `${INTERVIEW_BASE_PATH}/coborrower`,\n id: CO_BORROWER_STEP_IDS.YOUR_INFO,\n },\n {\n menu: STEP_MENU_ITEMS.CURRENT_RESIDENCE,\n path: `${INTERVIEW_BASE_PATH}/${\n com.stageToNumberApplication.coborrower + 1\n }`,\n id: CO_BORROWER_STEP_IDS.CURRENT_RESIDENCE,\n },\n ],\n },\n {\n type: APPLICATION_STEP_TYPES.SUBJECT_PROPERTY,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 2}`,\n id: CO_BORROWER_STEP_IDS.SUBJECT_PROPERTY,\n },\n {\n type: APPLICATION_STEP_TYPES.INCOME,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 3}`,\n id: CO_BORROWER_STEP_IDS.INCOME,\n list: [\n {\n menu: STEP_MENU_ITEMS.EMPLOYMENT,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 3}`,\n id: CO_BORROWER_STEP_IDS.EMPLOYMENT,\n },\n {\n menu: STEP_MENU_ITEMS.OTHER_INCOME,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 4}`,\n id: CO_BORROWER_STEP_IDS.OTHER_INCOME,\n },\n ],\n },\n {\n type: APPLICATION_STEP_TYPES.FINANCE,\n path: `${INTERVIEW_BASE_PATH}/${\n com.stageToNumberApplication.coborrower + 5\n }`,\n id: CO_BORROWER_STEP_IDS.FINANCE,\n list: [\n {\n menu: STEP_MENU_ITEMS.ASSETS,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 5}`,\n id: CO_BORROWER_STEP_IDS.ASSETS,\n },\n {\n menu: STEP_MENU_ITEMS.CREDIT_CHECK,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 6}`,\n id: CO_BORROWER_STEP_IDS.CREDIT_CHECK,\n },\n {\n menu: STEP_MENU_ITEMS.LIABILITIES,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 7}`,\n id: CO_BORROWER_STEP_IDS.LIABILITIES,\n },\n ],\n },\n {\n type: APPLICATION_STEP_TYPES.DECLARATIONS,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 8}`,\n id: CO_BORROWER_STEP_IDS.DECLARATIONS,\n list: [\n {\n menu: STEP_MENU_ITEMS.PROPERTY_MONEY,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 8}`,\n id: CO_BORROWER_STEP_IDS.PROPERTY_MONEY,\n },\n {\n menu: STEP_MENU_ITEMS.FINANCES,\n path: `${INTERVIEW_BASE_PATH}/${com.stageToNumberApplication.coborrower + 9}`,\n id: CO_BORROWER_STEP_IDS.FINANCES,\n },\n ],\n },\n]\n","import { useCallback, useMemo, useState } from 'react'\nimport { useSelector } from 'react-redux'\nimport { Link } from 'react-router-dom'\nimport * as com from '../../Common'\nimport { APPLICANT_FLOW_STEPS, APPLICANT_STEP_IDS, CO_BORROWER_STEP_IDS, CO_BORROWER_FLOW_STEPS } from '../constants/sidebar'\n\nfunction StepApplication(props) {\n const progress = useSelector((state) => state.progress)\n const application = useSelector((state) => state.application)\n\n const step = useMemo(() => progress.interview.step, [progress])\n const isCoborrower = useMemo(() => step >= com.stageToNumberApplication.coborrower, [step])\n const stepIDs = useMemo(() => {\n if (isCoborrower) {\n return CO_BORROWER_STEP_IDS\n }\n return APPLICANT_STEP_IDS\n }, [isCoborrower])\n\n const flowSteps = useMemo(() => {\n if (isCoborrower) {\n return CO_BORROWER_FLOW_STEPS\n }\n return APPLICANT_FLOW_STEPS\n }, [isCoborrower])\n /*\n * Get the parent node ID corresponding to the step\n */\n const getParentNodeId = useCallback((step) => {\n const parentSteps = [\n {\n id: stepIDs.PERSONAL,\n nextId: stepIDs.SUBJECT_PROPERTY,\n },\n {\n id: stepIDs.SUBJECT_PROPERTY,\n nextId: stepIDs.INCOME,\n },\n {\n id: stepIDs.INCOME,\n nextId: stepIDs.FINANCE,\n },\n {\n id: stepIDs.FINANCE,\n nextId: stepIDs.DECLARATIONS,\n },\n {\n id: stepIDs.DECLARATIONS,\n nextId: Number.MAX_SAFE_INTEGER,\n },\n ]\n\n for (const { id, nextId } of parentSteps) {\n if (step > id && step < nextId) {\n return id\n }\n }\n\n return stepIDs.PERSONAL\n }, [stepIDs.DECLARATIONS, stepIDs.FINANCE, stepIDs.INCOME, stepIDs.PERSONAL, stepIDs.SUBJECT_PROPERTY])\n\n const [subMenuVisibility, setSubMenuVisibility] = useState(() => {\n if (step === stepIDs.SUBJECT_PROPERTY) {\n return {\n [stepIDs.PERSONAL]: false,\n [stepIDs.SUBJECT_PROPERTY]: false,\n [stepIDs.INCOME]: false,\n [stepIDs.FINANCE]: false,\n [stepIDs.DECLARATIONS]: false,\n }\n }\n const parentNodeId = getParentNodeId(step)\n const initialState = {\n [stepIDs.PERSONAL]: false,\n [stepIDs.SUBJECT_PROPERTY]: false,\n [stepIDs.INCOME]: false,\n [stepIDs.FINANCE]: false,\n [stepIDs.DECLARATIONS]: false,\n [parentNodeId]: true,\n }\n return initialState\n })\n\n const isStepCompleted = useCallback(\n (stepKey) => {\n if (isCoborrower) {\n const { [stepKey]: stepValue } = application.coborrower.completedsteps\n if (!stepValue) return false\n } else {\n const { [stepKey]: stepValue } = application.borrower.completedsteps\n if (!stepValue) return false\n }\n\n return true\n },\n [application.borrower.completedsteps, application.coborrower.completedsteps, isCoborrower]\n )\n\n const handleParentClick = useCallback((e, id) => {\n e.preventDefault()\n setSubMenuVisibility((prev) => ({ ...prev, [id]: !prev[id] }))\n }, [])\n\n const isYourInfoCompleted = useMemo(() => isStepCompleted('yourinfo'), [isStepCompleted])\n const isResidenceCompleted = useMemo(() => isStepCompleted('residence'), [isStepCompleted])\n const isPropertyCompleted = useMemo(() => isStepCompleted('property', false), [isStepCompleted])\n const isEmploymentCompleted = useMemo(() => isStepCompleted('employment'), [isStepCompleted])\n const isOtherIncomeCompleted = useMemo(() => isStepCompleted('otherincome'), [isStepCompleted])\n const isAssetsCompleted = useMemo(() => isStepCompleted('assets', false), [isStepCompleted])\n const isCreditCheckCompleted = useMemo(() => isStepCompleted('creditcheck', false), [isStepCompleted])\n const isLiabilitiesCompleted = useMemo(() => isStepCompleted('liabilities', false), [isStepCompleted])\n const isPropertyMoneyCompleted = useMemo(() => isStepCompleted('propertymoney', false), [isStepCompleted])\n const isFinancesCompleted = useMemo(() => isStepCompleted('finances', false), [isStepCompleted])\n\n const getStepStatus = useCallback((id, completedStates) => {\n const allCompleted = completedStates.every((state) => state)\n const someCompleted = completedStates.some((state) => state)\n\n if (allCompleted) {\n return {\n icon: (\n \n
\n ),\n textColor: '#2E605A',\n }\n }\n if (someCompleted) {\n return {\n icon: (\n \n \n
\n ),\n textColor: '#222222',\n }\n }\n return {\n icon: ,\n textColor: '#586570',\n }\n }, [])\n\n const StepCircleIcon = useCallback(\n ({ id }) => {\n const stepStatusMap = {\n [stepIDs.PERSONAL]: [isYourInfoCompleted, isResidenceCompleted],\n [stepIDs.SUBJECT_PROPERTY]: [isPropertyCompleted],\n [stepIDs.INCOME]: [isEmploymentCompleted, isOtherIncomeCompleted],\n [stepIDs.FINANCE]: [isAssetsCompleted, isCreditCheckCompleted, isLiabilitiesCompleted],\n [stepIDs.DECLARATIONS]: [isPropertyMoneyCompleted, isFinancesCompleted],\n }\n\n const { icon } = getStepStatus(id, stepStatusMap[id] || [])\n return icon\n },\n [\n stepIDs.PERSONAL,\n stepIDs.SUBJECT_PROPERTY,\n stepIDs.INCOME,\n stepIDs.FINANCE,\n stepIDs.DECLARATIONS,\n isYourInfoCompleted,\n isResidenceCompleted,\n isPropertyCompleted,\n isEmploymentCompleted,\n isOtherIncomeCompleted,\n isAssetsCompleted,\n isCreditCheckCompleted,\n isLiabilitiesCompleted,\n isPropertyMoneyCompleted,\n isFinancesCompleted,\n getStepStatus,\n ]\n )\n\n const stepTextColor = useCallback(\n (id) => {\n const stepStatusMap = {\n [stepIDs.PERSONAL]: [isYourInfoCompleted, isResidenceCompleted],\n [stepIDs.SUBJECT_PROPERTY]: [isPropertyCompleted],\n [stepIDs.INCOME]: [isEmploymentCompleted, isOtherIncomeCompleted],\n [stepIDs.FINANCE]: [isAssetsCompleted, isCreditCheckCompleted, isLiabilitiesCompleted],\n [stepIDs.DECLARATIONS]: [isPropertyMoneyCompleted, isFinancesCompleted],\n }\n\n const { textColor } = getStepStatus(id, stepStatusMap[id] || [])\n return textColor\n },\n [\n stepIDs.PERSONAL,\n stepIDs.SUBJECT_PROPERTY,\n stepIDs.INCOME,\n stepIDs.FINANCE,\n stepIDs.DECLARATIONS,\n isYourInfoCompleted,\n isResidenceCompleted,\n isPropertyCompleted,\n isEmploymentCompleted,\n isOtherIncomeCompleted,\n isAssetsCompleted,\n isCreditCheckCompleted,\n isLiabilitiesCompleted,\n isPropertyMoneyCompleted,\n isFinancesCompleted,\n getStepStatus,\n ]\n )\n\n const menuTextStyle = useCallback(\n (id) => {\n const yourInfo = isCoborrower ? com.stageToNumberApplication.coborrower : com.stageToNumberApplication.applicant\n const currentResidence = isCoborrower ? com.stageToNumberApplication.coborrower + 1 : com.stageToNumberApplication.applicant + 1\n const property = isCoborrower ? com.stageToNumberApplication.coborrower + 2 : com.stageToNumberApplication.property\n const employment = isCoborrower ? com.stageToNumberApplication.coborrower + 3 : com.stageToNumberApplication.income\n const otherIncome = isCoborrower ? com.stageToNumberApplication.coborrower + 4 : com.stageToNumberApplication.income + 1\n const assets = isCoborrower ? com.stageToNumberApplication.coborrower + 5 : com.stageToNumberApplication.assets\n const creditCheck = isCoborrower ? com.stageToNumberApplication.coborrower + 6 : com.stageToNumberApplication.creditcheck\n const liabilities = isCoborrower ? com.stageToNumberApplication.coborrower + 7 : com.stageToNumberApplication.liabilities\n const propertyMoney = isCoborrower ? com.stageToNumberApplication.coborrower + 8 : com.stageToNumberApplication.propertymoney\n const finances = isCoborrower ? com.stageToNumberApplication.coborrower + 9 : com.stageToNumberApplication.finances\n\n const completedStepMap = {\n [stepIDs.YOUR_INFO]: step === yourInfo,\n [stepIDs.CURRENT_RESIDENCE]: step === currentResidence,\n [stepIDs.PROPERTY]: step === property,\n [stepIDs.EMPLOYMENT]: step === employment,\n [stepIDs.OTHER_INCOME]: step === otherIncome,\n [stepIDs.ASSETS]: step === assets,\n [stepIDs.CREDIT_CHECK]: step === creditCheck,\n [stepIDs.LIABILITIES]: step === liabilities,\n [stepIDs.PROPERTY_MONEY]: step === propertyMoney,\n [stepIDs.FINANCES]: step === finances,\n }\n\n return completedStepMap[id]\n ? { color: '#325CEB', fontWeight: 500 }\n : { color: '#586570', fontWeight: 400 }\n },\n [\n isCoborrower,\n step,\n stepIDs.ASSETS,\n stepIDs.CURRENT_RESIDENCE,\n stepIDs.EMPLOYMENT,\n stepIDs.FINANCES,\n stepIDs.LIABILITIES,\n stepIDs.CREDIT_CHECK,\n stepIDs.OTHER_INCOME,\n stepIDs.PROPERTY,\n stepIDs.PROPERTY_MONEY,\n stepIDs.YOUR_INFO,\n ]\n )\n\n return (\n \n {flowSteps.map((item, index) => {\n const isSubjectPropertyActive = item.id === stepIDs.SUBJECT_PROPERTY && step === stepIDs.SUBJECT_PROPERTY\n return (\n
\n )\n}\n\nexport default StepApplication\n","import React, { Component } from \"react\";\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport '../App.css';\n\nimport Spinner from 'react-bootstrap/Spinner'\nimport { connect } from 'react-redux'\nimport Modal from 'react-bootstrap/Modal'\nimport Button from 'react-bootstrap/Button'\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport * as com from '../Common'\nimport { Input, Space, Table, Tag, ConfigProvider, Tooltip, Spin } from 'antd';\nimport { DownloadOutlined, DeleteOutlined } from \"@ant-design/icons\";\nimport \"./Documents.css\"\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n});\nclass DocumentManager extends Component {\n\n dateSortFunction = (a, b, order, dataField) => {\n if (a === '') {\n a = '01/01/1000'\n }\n if (b === '') {\n b = '01/01/1000'\n }\n if (a === '01/01/1000' && b === '01/01/1000') {\n b = '01/02/1000'\n }\n let at = new Date(a)\n at = at.getTime()\n let bt = new Date(b)\n bt = bt.getTime()\n\n\n if (order === 'asc') {\n return (at - bt) < 0 ? -1 : 1\n } else {\n return (at - bt) < 0 ? 1 : -1\n }\n }\n\n constructor(props) {\n super(props);\n this.state = {\n documents: [],\n url: \"\",\n download: \"\",\n show: false,\n modalTitle: \"\",\n index: 0,\n id: 0,\n loadingIds: [],\n }\n this.aref = React.createRef();\n this.download = this.download.bind(this);\n this.columns = [\n {\n dataField: 'progress',\n text: '',\n },\n {\n dataField: 'document',\n text: 'Document:',\n sort: true,\n classes: 'divlink',\n events: {\n onClick: (e, column, columnIndex, row, rowIndex) => {\n this.download(row.id, row.index)\n },\n }\n },\n {\n dataField: 'comment',\n text: 'Comment:',\n sort: true\n }, {\n dataField: 'forwhom',\n text: 'For Whom:',\n sort: true\n }, {\n dataField: 'created',\n text: 'Created',\n sortFunc: this.dateSortFunction,\n sort: true\n }, {\n /*\n dataField: 'delete',\n text: 'Delete',\n classes: 'divlink',\n events: {\n onClick: (e, column, columnIndex, row, rowIndex) => {\n\n this.onShow(row.index)\n },\n }\n }, { */\n dataField: 'id',\n text: 'id',\n hidden: true,\n }, {\n dataField: 'index',\n text: 'index',\n hidden: true,\n },\n ];\n }\n componentDidMount() {\n this.reload()\n }\n\n forWhomDecoded = (_forwhom) => {\n let forwhom = \"\"\n if (_forwhom === \"joint\" && this.props.application.hascoborrower === \"alone\") {\n _forwhom = \"borrower\"\n }\n try {\n switch (_forwhom) {\n case 'borrower':\n forwhom = this.props.application.borrower.firstname + \" \" +\n this.props.application.borrower.lastname\n break\n case 'coborrower':\n forwhom = this.props.application.coborrower.firstname + \" \" +\n this.props.application.coborrower.lastname\n break;\n case 'joint':\n forwhom = this.props.application.borrower.firstname + \" \" +\n this.props.application.borrower.lastname + \" and \" + this.props.application.coborrower.firstname + \" \" +\n this.props.application.coborrower.lastname\n break;\n default:\n forwhom = _forwhom\n break;\n }\n } catch (x) {\n forwhom = _forwhom\n }\n return forwhom\n }\n\n documentsJSON = (document, index) => {\n return {\n progress: \n
\n )\n })}\n \n
\n {subMenuVisibility[item.id] && (\n \n item.id !== stepIDs.SUBJECT_PROPERTY && handleParentClick(e, item.id)}\n style={{ color: isSubjectPropertyActive && !isPropertyCompleted ? '#325CEB' : stepTextColor(item.id) }}\n >\n {item.type}\n \n
\n \n {item.list.map((subItem, subIndex) => (\n
\n )}\n \n \n {subItem.menu}\n \n
\n ))}\n \n \n \n Do you really want to delete {this.state.modalTitle}? \n \n \n This operation is irreversible. The document will be deleted.\n \n \n \n
\n \n \n \n
\n )\n }\n}\nexport default connect(mapStateToProps, mapDispatchToProps)(DocumentManager)\n","import React, { useState, useLayoutEffect, useRef } from 'react';\r\nimport { Modal, Pagination, Button, Image, Row, Col, Select, Dropdown } from 'antd';\r\nimport { MinusOutlined, PlusOutlined } from '@ant-design/icons';\r\nimport { Document, Page, pdfjs } from 'react-pdf';\r\nimport './PreviewModal.css';\r\n\r\nexport default function PreviewModal(props) {\r\n pdfjs.GlobalWorkerOptions.workerSrc =\r\n `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;\r\n const {\r\n mode, open, data, docmentList, file, numPages, width, scale, change, moveFile,\r\n handleDocument, onCancel, handleZoom,\r\n loadSuccess\r\n } = props;\r\n const [pageWidth, setPageWidth] = useState(0)\r\n const [selectCategory, setSelectCategory] = useState(undefined)\r\n const [selectType, setSelectType] = useState(undefined)\r\n const containerRef = useRef(null)\r\n const [currentPage, setCurrentPage] = useState(1)\r\n const isManualChange = useRef(false);\r\n useLayoutEffect (() => {\r\n if (open) {\r\n setCurrentPage(1)\r\n if (mode === 'move') {\r\n setSelectCategory(undefined)\r\n setSelectType(undefined)\r\n }\r\n const handleResize = () => {\r\n if (containerRef.current) {\r\n setPageWidth(containerRef.current.offsetWidth - 8)\r\n }\r\n }\r\n setTimeout(handleResize, 0)\r\n window.addEventListener('resize', handleResize)\r\n return () => {\r\n window.removeEventListener('resize', handleResize)\r\n }\r\n }\r\n }, [open, mode])\r\n\r\n const previewCancel = () => {\r\n onCancel()\r\n }\r\n\r\n const onDocumentLoadSuccess = (page) => {\r\n loadSuccess(page)\r\n }\r\n\r\n const previewDownload = () => {\r\n const modifiedPdfBlob = new Blob([file], { type: 'application/pdf' })\r\n const downloadLink = document.createElement('a')\r\n downloadLink.href = URL.createObjectURL(modifiedPdfBlob)\r\n downloadLink.download = data?.FileName\r\n downloadLink.click()\r\n }\r\n const onChangePage = (page, pageSize) => {\r\n isManualChange.current = true\r\n setCurrentPage(page)\r\n const pdfTargetElement = document.querySelector(`#pdfPage-${page}`)\r\n\r\n if (pdfTargetElement) {\r\n containerRef.current.scrollTo({\r\n top: pdfTargetElement.offsetTop,\r\n behavior: 'smooth',\r\n })\r\n }\r\n\r\n setTimeout(() => {\r\n isManualChange.current = false\r\n }, 500)\r\n }\r\n\r\n const handleScroll = () => {\r\n if (isManualChange.current) return\r\n\r\n const containerHeight = containerRef.current.offsetHeight\r\n const anchors = document.querySelectorAll('.pdf-anchor')\r\n\r\n let closestPage = currentPage\r\n let minDistance = Infinity\r\n\r\n anchors.forEach(anchor => {\r\n const { top } = anchor.getBoundingClientRect()\r\n const distance = Math.abs(top - containerHeight / 2)\r\n\r\n if (distance < minDistance) {\r\n minDistance = distance;\r\n closestPage = parseInt(anchor.id.split('-')[1])\r\n }\r\n })\r\n\r\n if (closestPage !== currentPage) {\r\n setCurrentPage(closestPage)\r\n }\r\n }\r\n\r\n const changeZoom = (type) => {\r\n if (type === 'add') {\r\n handleZoom(+(Math.min(scale + 0.1, 3).toFixed(1)));\r\n } else {\r\n handleZoom(+(Math.max(scale - 0.1, 0.5).toFixed(1)));\r\n }\r\n }\r\n\r\n const removeFileExtension = (fileName) => {\r\n return fileName && fileName.replace(/\\.[^/.]+$/, \"\")\r\n }\r\n \r\n const arrayBufferToBlob = (buffer, type) => {\r\n return new Blob([buffer], { type })\r\n }\r\n\r\n const createImageURLFromBase64 = (arrayBuffer, type) => {\r\n const blob = arrayBufferToBlob(arrayBuffer, type)\r\n return URL.createObjectURL(blob)\r\n }\r\n\r\n const changeFile = (type) => {\r\n setCurrentPage(1)\r\n if (type === 'prev' && data && data?.num !== 1) {\r\n change(data?.num - 1)\r\n } else if (type === 'next' && data && data?.num !== data?.total) {\r\n change(data?.num + 1)\r\n }\r\n }\r\n\r\n const handleDoc = (e) => {\r\n handleDocument(e.key)\r\n }\r\n\r\n const dropdownItems = [\r\n {\r\n label: 'Download',\r\n key: 'download',\r\n icon: \n
\n
\n\n 
,\r\n },\r\n {\r\n type: 'divider',\r\n },\r\n {\r\n label: 'Reupload',\r\n key: 'upload',\r\n icon: 
,\r\n }\r\n ]\r\n\r\n const categoryOptions = [\r\n {\r\n label: 'Identification',\r\n value: 'identification'\r\n },\r\n {\r\n label: 'Income',\r\n value: 'income'\r\n },\r\n {\r\n label: 'Assets & debts',\r\n value: 'assets'\r\n },\r\n {\r\n label: 'Property',\r\n value: 'property'\r\n },\r\n {\r\n label: 'Miscellaneous',\r\n value: 'miscellaneous'\r\n },\r\n // {\r\n // label: 'Process documents',\r\n // value: 'internalDocuments'\r\n // }\r\n ]\r\n\r\n const getCategoryOptions = () => {\r\n const filtered = categoryOptions.filter(option => {\r\n const category = docmentList.find(doc => doc.type === option.value)\r\n return category && category.list.length > 0\r\n })\r\n return filtered\r\n }\r\n\r\n const getTypeOptions = () => {\r\n const selectedDocument = docmentList.find(item => item.type === selectCategory)\r\n const options = selectedDocument ? selectedDocument.list.map(doc => ({ label: doc.TaskName, value: doc.ID })) : []\r\n return options\r\n }\r\n\r\n const changeCategory = (value) => {\r\n setSelectType(undefined)\r\n setSelectCategory(value)\r\n }\r\n\r\n const changeType = (value) => {\r\n setSelectType(value)\r\n }\r\n\r\n const changeMove = () => {\r\n moveFile(selectType)\r\n }\r\n\r\n const computedWidth = mode === 'preview' ? width : pageWidth\r\n\r\n return (\r\n <>\r\n Document review
\r\n \r\n
\r\n {mode === 'move' &&
\r\n UNCATEGORIZED
}\r\n 
changeFile('prev')}/>\r\n 
changeFile('next')}/>\r\n
\r\n changeFile('prev')}/>\r\n File {data?.num} / {data?.total}
\r\n \r\n \r\n
\r\n {removeFileExtension(data?.FileName)}
\r\n changeFile('next')}/>\r\n \r\n {\r\n mode === 'move' ? (\r\n handleDoc(e)}}\r\n placement=\"bottomRight\"\r\n trigger={['click']}\r\n >\r\n 
\r\n \r\n ) :
\r\n \r\n \r\n ) : \r\n
\r\n \r\n \r\n {data?.MimeType === \"application/pdf\" ? (\r\n \r\n {Array.from(new Array(numPages), (el, index) => (\r\n \r\n
\r\n ))}\r\n \r\n ) : (\r\n \r\n
\r\n \r\n {mode === 'move' && (\r\n \r\n
\r\n \r\n
\r\n \r\n changeZoom('min')} />\r\n
\r\n {Math.round(scale * 100)}%
\r\n \r\n changeZoom('add')} />\r\n
\r\n \r\n \r\n Confirm\r\n \r\n
\r\n \r\n )\r\n }\r\n \r\n
\r\n \r\n
\r\n Document category
\r\n \r\n
\r\n Document title
\r\n \r\n {'UNcategorized Documents'.toUpperCase()}\r\n
\r\n ),\r\n width: '30%',\r\n ellipsis: true,\r\n render: (_, record) => (\r\n {record.FileName}
\r\n \r\n ),\r\n },\r\n {\r\n title: '',\r\n width: '20%',\r\n },\r\n {\r\n title: (\r\n \r\n Last update\r\n \r\n ),\r\n dataIndex: 'Updated',\r\n key: 'Updated',\r\n width: '15%',\r\n sorter: (a, b) => new Date(a.Updated) - new Date(b.Updated),\r\n render: (text) => (\r\n \r\n {text ? dayjs(text).format('MM/DD/YYYY') : '-'}\r\n \r\n ),\r\n },\r\n {\r\n title: (\r\n \r\n Status\r\n \r\n ),\r\n dataIndex: 'ExtraInfo',\r\n key: 'ExtraInfo',\r\n width: '20%',\r\n sorter: (a, b) =>\r\n a.ExtraInfo.status.localeCompare(b.ExtraInfo.status),\r\n render: (_, record) => {\r\n const { status } = record.ExtraInfo\r\n return status === 'processing' ? (\r\n \r\n
\r\n ) : (\r\n \r\n viewAll()}\r\n >\r\n View all\r\n
\r\n \r\n moveDoc(record, index, 'move')}\r\n >\r\n {mapViewText(record.ExtraInfo.status)}\r\n
\r\n \r\n ![more](\"/images/document-more.svg\")
\r\n
\r\n \r\n \r\n ),\r\n },\r\n ]\r\n\r\n const messageList = (record) => {\r\n const resubmission = record.OperationRecord.ResubmissionRequest\r\n const filterResubmission = resubmission ? resubmission.filter((item) => item.Description !== '') : []\r\n\r\n if (record.Status === 'resubmit' && filterResubmission.length > 0) {\r\n return (\r\n \r\n \r\n
\r\n )\r\n } else if (record.Description !== '') {\r\n return (\r\n \r\n Message from LO:\r\n
\r\n {filterResubmission.map((item, index) => (\r\n \r\n \r\n {item.Deadline}\r\n \r\n {item.Description}\r\n
\r\n ))}\r\n \r\n
\r\n )\r\n }\r\n }\r\n\r\n const previewFile = (record) => {\r\n if (record.Documents.length > 0) {\r\n previewDoc(record, record.Documents[0], 0, 'preview')\r\n }\r\n }\r\n\r\n const columnsData = (type) => {\r\n const documentColumns = [\r\n {\r\n title: (\r\n \r\n Message from LO:\r\n
\r\n \r\n {record.Description}\r\n
\r\n \r\n \r\n {getLabelByValue(\r\n categoryOptions,\r\n type\r\n ).toUpperCase()}\r\n \r\n
\r\n ),\r\n width: '30%',\r\n ellipsis: true,\r\n render: (_, record) => {\r\n const isVisible = visiblePopover === record.ID\r\n const reUploadMsg =\r\n record.Status === 'resubmit' &&\r\n record.OperationRecord.ResubmissionRequest &&\r\n record.OperationRecord.ResubmissionRequest.filter(\r\n (item) => item.Description !== ''\r\n ).length > 0\r\n const initualMsg = record.Description !== ''\r\n return (\r\n \r\n \r\n previewFile(record)}\r\n >\r\n {record.TaskName}\r\n
\r\n \r\n {(reUploadMsg || initualMsg) && (\r\n \r\n {!documentList\r\n .find((item) => item.type === type)\r\n .list.some((doc) => doc.TaskName !== '') && (\r\n specialUpload(type)}\r\n src=\"/images/upload-document.svg\"\r\n alt='upload'\r\n />\r\n )}\r\n item.type === type\r\n ).open\r\n ? 'up'\r\n : 'down'\r\n }\r\n onClick={() => handleExpand(type)}\r\n src=\"/images/document-collapse.svg\"\r\n alt='collapse'\r\n />\r\n
\r\n ),\r\n dataIndex: '',\r\n key: '',\r\n fixed: 'right',\r\n width: 160,\r\n render: (_, record, index) => (\r\n \r\n actionDoc(record)}\r\n >\r\n {mapViewText(record.Status)}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n ),\r\n },\r\n ]\r\n return documentColumns\r\n }\r\n\r\n const previewDoc = (data, record, index, type) => {\r\n setTask(data)\r\n setPreviewMode(type)\r\n setHandleRecord({\r\n ...record,\r\n taskName: data.TaskName,\r\n num: index + 1,\r\n total: data.Documents.length,\r\n })\r\n downloadAll(record.ID, 'preview', record.FileName)\r\n }\r\n\r\n const viewAll = () => {\r\n setPreviewMode('move')\r\n let record = uncategorizedDoc[0]\r\n setHandleRecord({\r\n ...record,\r\n num: 1,\r\n total: uncategorizedDoc.length,\r\n })\r\n downloadAll(record.ID, 'move', record.FileName)\r\n }\r\n\r\n const moveDoc = (record, index, type) => {\r\n setPreviewMode(type)\r\n setHandleRecord({\r\n ...record,\r\n num: index + 1,\r\n total: uncategorizedDoc.length,\r\n })\r\n downloadAll(record.ID, type, record.FileName)\r\n }\r\n\r\n const expandedRowRender = (data) => {\r\n const nestedColumns = [\r\n {\r\n title: '',\r\n dataIndex: 'FileName',\r\n key: 'FileName',\r\n ellipsis: true,\r\n render: (_, record, index) => (\r\n \r\n \r\n previewDoc(data, record, index, 'preview')}\r\n >\r\n {removeFileExtension(record.FileName)}\r\n
\r\n \r\n \r\n
\r\n \r\n ),\r\n },\r\n ]\r\n\r\n return (\r\n \r\n downloadAll(record.ID, 'single', record.FileName)}\r\n >\r\n
\r\n \r\n Last update:{' '}\r\n {record.Uploaded ? dayjs(record.Uploaded).format('MM/DD/YYYY') : '-'}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {\r\n if (record.TaskName === '') {\r\n return 'hidden-document'\r\n } else if (\r\n record.Status === 'resubmit'\r\n ) {\r\n return 'resubmit-document'\r\n } else if (\r\n isApproachingDeadline(\r\n record.Deadline\r\n )\r\n ) {\r\n return 'overdue-document'\r\n } else {\r\n return ''\r\n }\r\n }}\r\n expandable={{\r\n defaultExpandedRowKeys:\r\n defaultExpandedRowKeys,\r\n expandedRowRender,\r\n rowExpandable: (record) =>\r\n record.Documents.length > 0,\r\n expandIcon: ({\r\n expanded,\r\n onExpand,\r\n record,\r\n }) =>\r\n record.Documents.length ===\r\n 0 ? null : expanded ? (\r\n \r\n onExpand(\r\n record,\r\n e\r\n )\r\n }\r\n alt=\"collapse\"\r\n />\r\n ) : (\r\n \r\n onExpand(\r\n record,\r\n e\r\n )\r\n }\r\n alt=\"expand\"\r\n />\r\n ),\r\n }}\r\n />\r\n
\r\n ) : !selectedSwitch &&\r\n searchKeyword === '' &&\r\n selectedCategory.length === 0 ? (\r\n \r\n \r\n Documents\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Upload documents\r\n
\r\n \r\n {uncategorizedDoc.length > 0 &&\r\n selectedCategory.length === 0 && (\r\n \r\n
\r\n )}\r\n {documentList.map((item) => {\r\n const defaultExpandedRowKeys = item.list\r\n .filter((record) => record.TaskName === '')\r\n .map((record) => record.ID)\r\n\r\n return item.list.length > 0 ? (\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n }\r\n\r\n const bulkupload = () => {\r\n let token = sessionStorage.getItem('ZeitroA')\r\n const formData = new FormData()\r\n fileList.forEach((item) => {\r\n formData.append(`upload`, item.originFileObj)\r\n })\r\n setSaveLoading(true)\r\n fetch('/docs/bulkuploaddocuments', {\r\n cache: 'no-cache',\r\n method: 'POST',\r\n body: formData,\r\n headers: {\r\n Authorization: 'Bearer ' + token,\r\n Cache: 'no-cache',\r\n },\r\n })\r\n .then((response) => {\r\n setSaveLoading(false)\r\n if (response.status !== 200) {\r\n message.error('Something went wrong, please try later')\r\n return\r\n }\r\n taskCancel()\r\n getdocuments()\r\n })\r\n .catch((error) => {\r\n setSaveLoading(false)\r\n message.error('Something went wrong, please try later')\r\n })\r\n }\r\n\r\n const sendEmailRequest = () => {\r\n let token = sessionStorage.getItem('ZeitroA')\r\n fetch('/docs/notifyloaboutuploadeddocuments', {\r\n cache: 'no-cache',\r\n method: 'GET',\r\n headers: {\r\n Authorization: 'Bearer ' + token,\r\n Cache: 'no-cache',\r\n },\r\n })\r\n }\r\n\r\n const uploadDocuments = () => {\r\n let token = sessionStorage.getItem('ZeitroA')\r\n const formData = new FormData()\r\n fileList.forEach((item) => {\r\n formData.append(`upload`, item.originFileObj)\r\n })\r\n setSaveLoading(true)\r\n let api =\r\n uploadMode === 'single'\r\n ? '/docs/uploaddocumentsforrequest'\r\n : '/docs/reuploaddocumentsforrequest'\r\n fetch(api, {\r\n cache: 'no-cache',\r\n method: 'POST',\r\n body: formData,\r\n headers: {\r\n Authorization: 'Bearer ' + token,\r\n Cache: 'no-cache',\r\n 'X-TASKID': currentDoc.ID,\r\n 'X-LOAN': '',\r\n },\r\n })\r\n .then((response) => {\r\n setSaveLoading(false)\r\n if (response.status !== 200) {\r\n message.error('Something went wrong, please try later')\r\n return\r\n }\r\n // Call sendEmailRequest after 10 minutes\r\n setTimeout(() => {\r\n sendEmailRequest()\r\n }, 10 * 1000)\r\n // }, 10 * 60 * 1000);\r\n\r\n taskCancel()\r\n getdocuments()\r\n })\r\n .catch((error) => {\r\n console.log(error)\r\n setSaveLoading(false)\r\n message.error('Something went wrong, please try later')\r\n })\r\n }\r\n\r\n const base64ToArrayBuffer = (base64) => {\r\n const binaryString = atob(base64)\r\n const len = binaryString.length\r\n const bytes = new Uint8Array(len)\r\n for (let i = 0; i < len; i++) {\r\n bytes[i] = binaryString.charCodeAt(i)\r\n }\r\n return bytes.buffer\r\n }\r\n\r\n const downloadAll = (id, type, name) => {\r\n const token = sessionStorage.getItem('ZeitroA')\r\n fetch('/docs/downloaddocuments', {\r\n method: 'POST',\r\n body: JSON.stringify({\r\n LoanID: '',\r\n TaskID: type === 'all' ? id : 0,\r\n DocID: type !== 'all' ? id : 0,\r\n }),\r\n headers: {\r\n Authorization: 'Bearer ' + token,\r\n Cache: 'no-cache',\r\n },\r\n })\r\n .then(async (response) => {\r\n if (response.status !== 200) {\r\n return\r\n }\r\n await response.json().then((js) => {\r\n const files = js.Documents\r\n if (type === 'preview' || type === 'move') {\r\n const file = base64ToArrayBuffer(files[0].Content)\r\n setFile(file)\r\n setScale(1)\r\n setShowPreviewModal(true)\r\n } else if (files.length === 0) {\r\n } else if (files.length === 1) {\r\n const file = base64ToArrayBuffer(files[0].Content)\r\n const modifiedPdfBlob = new Blob([file], {\r\n type: 'application/pdf',\r\n })\r\n const downloadLink = document.createElement('a')\r\n downloadLink.href = URL.createObjectURL(modifiedPdfBlob)\r\n downloadLink.download = files[0].Name\r\n downloadLink.click()\r\n } else {\r\n const filename = `${name}.zip`\r\n const zip = new JSZip()\r\n const filesFolder = zip.folder(`${name}`)\r\n for (let i = 0; i < files.length; i++) {\r\n const { Name, Content } = files[i]\r\n filesFolder.file(Name, Content, { base64: true })\r\n }\r\n zip.generateAsync({ type: 'blob' }).then((blob) =>\r\n saveAs(blob, filename)\r\n )\r\n }\r\n })\r\n })\r\n .catch(() => {})\r\n }\r\n\r\n const documentSave = () => {\r\n // statsig log\r\n const fileListAmount = fileList.length\r\n const fileListName = fileList.map((item) => item.name)\r\n client?.logEvent(\"documents_uploaded_by_borrower\", fileListAmount, {\r\n eventName: \"documentsUploadedByBorrower\",\r\n startTime: new Date,\r\n timestamp: Date.now(),\r\n fileListAmount: fileListAmount,\r\n fileListName: fileListName,\r\n entrance: \"applicationDocuments\",\r\n pageUrl: window.location.href,\r\n })\r\n if (uploadMode === 'single' || uploadMode === 'reupload') {\r\n uploadDocuments()\r\n } else if (uploadMode === 'multiple') {\r\n bulkupload()\r\n } else {\r\n }\r\n }\r\n\r\n const taskCancel = () => {\r\n setShowDocumentModal(false)\r\n setFileList([])\r\n form.resetFields()\r\n }\r\n\r\n const onDocumentLoadSuccess = ({ numPages }) => {\r\n setPageNumber(1)\r\n setNumPages(numPages)\r\n }\r\n\r\n const handleZoom = (val) => {\r\n setScale(val)\r\n }\r\n\r\n const onChangePage = (page, pageSize) => {\r\n setPageNumber(page)\r\n }\r\n\r\n const previewCancel = () => {\r\n setPageNumber(1)\r\n setNumPages(1)\r\n setHandleForm('')\r\n setShowPreviewModal(false)\r\n }\r\n\r\n const moveFile = (taskID) => {\r\n let token = sessionStorage.getItem('ZeitroA')\r\n let data = {\r\n TaskID: taskID,\r\n DocID: handleRecord.ID,\r\n }\r\n const matchedDocument = uncategorizedDoc.find(\r\n (item) => item.ID === handleRecord.ID\r\n )\r\n if (!matchedDocument) {\r\n message.error(\r\n \"The current document's status has changed. Please close the window and try again.\"\r\n )\r\n } else {\r\n fetch('/docs/movedoc', {\r\n method: 'POST',\r\n body: JSON.stringify(data),\r\n headers: {\r\n Authorization: 'Bearer ' + token,\r\n Cache: 'no-cache',\r\n 'Content-Type': 'application/json',\r\n },\r\n })\r\n .then((response) => {\r\n if (response.status !== 200) {\r\n message.error('Something went wrong, please try later')\r\n return\r\n }\r\n if (response.status === 200) {\r\n setShowPreviewModal(false)\r\n getdocuments()\r\n }\r\n })\r\n .catch((err) => {\r\n message.error('Something went wrong, please try later')\r\n })\r\n }\r\n }\r\n\r\n const changeFile = (num) => {\r\n if (previewMode === 'move') {\r\n let record = uncategorizedDoc[num - 1]\r\n setHandleRecord({\r\n ...record,\r\n num: num,\r\n total: uncategorizedDoc.length,\r\n })\r\n downloadAll(record.ID, 'move', record.FileName)\r\n } else {\r\n let data = task\r\n let record = data.Documents[num - 1]\r\n setHandleRecord({\r\n ...record,\r\n taskName: data.TaskName,\r\n num: num,\r\n total: data.Documents.length,\r\n })\r\n downloadAll(record.ID, 'preview', record.FileName)\r\n }\r\n }\r\n\r\n const handleDocument = (type) => {\r\n setHandleForm('')\r\n if (type === 'upload') {\r\n setHandleForm('move')\r\n setUploadMode('multiple')\r\n setShowDocumentModal(true)\r\n } else {\r\n downloadAll(handleRecord.ID, 'single', handleRecord.FileName)\r\n }\r\n }\r\n\r\n const footer = [\r\n ,\r\n \r\n {contextHolder}\r\n {showCurrentTasks()}\r\n\r\n \r\n {showCreateNewTasks()}\r\n \r\n\r\n handleZoom(val)}\r\n handlePage={(page, pageSize) => onChangePage(page, pageSize)}\r\n loadSuccess={(page) => onDocumentLoadSuccess(page)}\r\n />\r\n
\r\n )\r\n}\r\n\r\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(DocumentChecklist))\r\n","import React, { useState, useEffect, useRef, useContext } from 'react';\r\nimport 'bootstrap/dist/css/bootstrap.min.css';\r\nimport './DocumentSidebar.css';\r\nimport { connect } from 'react-redux'\r\nconst mapStateToProps = (state) => {\r\n return {\r\n progress: state.progress,\r\n application: state.application,\r\n property: state.application.property,\r\n borrower: state.application.borrower\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n \r\n});\r\n\r\n\r\nexport default function DocumentSidebar ({changeMenu}) {\r\n const [menuExpand, setMenuExpand] = useState(true)\r\n const [currentCategory, setCurrentCategory] = useState(true)\r\n const categoryOptions = [\r\n {\r\n label: 'Identification',\r\n value: 'identification'\r\n },\r\n {\r\n label: 'Income',\r\n value: 'income'\r\n },\r\n {\r\n label: 'Assets & debts',\r\n value: 'assets'\r\n },\r\n {\r\n label: 'Property',\r\n value: 'property'\r\n },\r\n {\r\n label: 'Miscellaneous',\r\n value: 'miscellaneous'\r\n },\r\n // {\r\n // label: 'Process documents',\r\n // value: 'internalDocuments'\r\n // }\r\n ]\r\n const selectCategory = (item) => {\r\n setCurrentCategory(item.value)\r\n changeMenu(item.value)\r\n }\r\n let clickMenu = () => {\r\n setMenuExpand(!menuExpand)\r\n }\r\n return (\r\n \r\n
\r\n );\r\n}\r\nDocumentSidebar = connect(mapStateToProps, mapDispatchToProps)(DocumentSidebar)","import React, { Component } from \"react\";\r\nimport \"./Dropzone.css\";\r\n\r\nclass Dropzone extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { hightlight: false };\r\n this.fileInputRef = React.createRef();\r\n\r\n this.openFileDialog = this.openFileDialog.bind(this);\r\n this.onFilesAdded = this.onFilesAdded.bind(this);\r\n this.onDragOver = this.onDragOver.bind(this);\r\n this.onDragLeave = this.onDragLeave.bind(this);\r\n this.onDrop = this.onDrop.bind(this);\r\n }\r\n\r\n openFileDialog() {\r\n if (this.props.disabled) return;\r\n this.fileInputRef.current.click();\r\n }\r\n\r\n onFilesAdded(evt) {\r\n if (this.props.disabled) return;\r\n const files = evt.target.files;\r\n if (this.props.onFilesAdded) {\r\n const array = this.fileListToArray(files);\r\n this.props.onFilesAdded(array);\r\n }\r\n }\r\n\r\n onDragOver(event) {\r\n event.preventDefault();\r\n if (this.props.disabed) return;\r\n this.setState({ hightlight: true });\r\n }\r\n\r\n onDragLeave(event) {\r\n this.setState({ hightlight: false });\r\n }\r\n\r\n onDrop(event) {\r\n event.preventDefault();\r\n if (this.props.disabed) return;\r\n const files = event.dataTransfer.files;\r\n if (this.props.onFilesAdded) {\r\n const array = this.fileListToArray(files);\r\n this.props.onFilesAdded(array);\r\n }\r\n this.setState({ hightlight: false });\r\n }\r\n\r\n fileListToArray(list) {\r\n const array = [];\r\n for (var i = 0; i < list.length; i++) {\r\n array.push(list.item(i));\r\n }\r\n return array;\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n Documents\r\n ![](\"/images/menuExpandIcon.svg\")
\r\n
\r\n \r\n \r\n {\r\n categoryOptions.map(item => (\r\n
\r\n selectCategory(item)}>{item.label}
\r\n ))\r\n }\r\n \r\n 0) && (this.props.progress < 100)) ? \"border\" : \"\"}/> \r\n\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default Progress;\r\n","import React, { Component } from \"react\";\r\nimport '../App.css';\r\nimport Button from 'react-bootstrap/Button'\r\nimport Row from 'react-bootstrap/Row'\r\nimport Col from 'react-bootstrap/Col'\r\nimport Form from 'react-bootstrap/Form'\r\nimport Container from 'react-bootstrap/Container'\r\nimport Spinner from 'react-bootstrap/Spinner'\r\nimport Dropzone from \"./Dropzone\";\r\nimport { connect } from 'react-redux'\r\nimport \"./Upload.css\";\r\nimport Progress from \"./Progress\";\r\nconst defBanner = `Please drag the documents from your computer, drop them into the circle, and click Upload. All your documents will be validated.`\r\nconst loadingBanner = \r\n\r\n \r\n
\r\n );\r\n }\r\n }\r\n\r\n\r\n uploadFiles() {\r\n this.setState({ uploadProgress: {}, uploading: true });\r\n this.setState({ banner: loadingBanner });\r\n \r\n let token = sessionStorage.getItem(\"ZeitroA\");\r\n \r\n const uploadFile = async (file, comment, forwhom, taskid, id) => {\r\n const formData = new FormData();\r\n formData.append(\"upload\", file);\r\n \r\n const response = await fetch(\"/docs/upload\", {\r\n cache: 'no-cache',\r\n method: 'POST',\r\n body: formData,\r\n headers: {\r\n Authorization: \"Bearer \" + token,\r\n Cache: \"no-cache\",\r\n \"X-Comment\": comment,\r\n \"X-ForWhom\": forwhom,\r\n \"X-Taskid\": taskid,\r\n \"X-Id\": id,\r\n },\r\n });\r\n if (response.status !== 200) {\r\n return Promise.reject('Upload failed')\r\n }\r\n return await response.json()\r\n };\r\n \r\n const uploadPromises = this.state.files.map(file => {\r\n let comment = (\"undefined\" === typeof this.props.taskid) ? this.comments[file.name] : this.props.name;\r\n let forwhom = (\"undefined\" === typeof this.props.taskid) ? this.state.forwhom : this.props.forwhom;\r\n let taskid = (\"undefined\" === typeof this.props.taskid) ? this.state.taskid : this.props.taskid;\r\n let id = (\"undefined\" === typeof this.props.taskid) ? 0 : this.props.id;\r\n \r\n return uploadFile(file, comment, forwhom, taskid, id);\r\n });\r\n \r\n Promise.all(uploadPromises)\r\n .then(results => {\r\n this.setState({ successfullUploaded: true, uploading: false });\r\n this.setState({ banner: loadMore });\r\n if (this.props.onUploaded) {\r\n this.props.onUploaded();\r\n }\r\n })\r\n .catch(error => {\r\n this.setState({ successfullUploaded: false, uploading: false });\r\n alert(\"Upload error! Please try again\");\r\n this.setState({ banner: defBanner });\r\n });\r\n }\r\n \r\n\r\n onClear = e => {\r\n this.setState({ files: [], successfullUploaded: false })\r\n }\r\n\r\n renderActions() {\r\n if (this.state.successfullUploaded) {\r\n return (\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n );\r\n }\r\n }\r\n isValidated() {\r\n if (!this.form.current.reportValidity()) {\r\n this.setState({ validated: true })\r\n return false\r\n };\r\n return true;\r\n }\r\n handleSubmit = (event) => {\r\n\r\n if (this.form.current.reportValidity() === false) {\r\n event.preventDefault();\r\n this.setState({ validated: true })\r\n return false\r\n }\r\n event.preventDefault();\r\n this.setState({ validated: false })\r\n event.stopPropagation();\r\n if (this.state.successfullUploaded) {\r\n this.setState({ files: [], successfullUploaded: false });\r\n this.setState({ banner: defBanner })\r\n } else {\r\n this.uploadFiles()\r\n }\r\n return false\r\n }\r\n changeForWhom = (e) => {\r\n this.setState({ forwhom: e.target.value })\r\n }\r\n render() {\r\n let updateFilename = (name) => {\r\n return event => {\r\n return this.comments[name] = event.target.value\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n\r\n );\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Upload)\r\n","import React, { useState, useEffect, useRef, useContext } from 'react';\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport \"../App.css\";\nimport { Tabs } from \"antd\";\nimport DocumentManager from \"./DocumentManager\";\nimport DocumentChecklist from \"./DocumentChecklist\";\nimport DocumentSidebar from \"./DocumentSidebar\";\nimport Upload from \"./Upload\";\nimport {\n UpdateChangeProgress,\n UpdateChangeProgressType,\n} from \"../Store/progress\";\nimport { connect } from \"react-redux\";\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n progress: state.progress,\n hascoborrower: state.application.hascoborrower,\n borrower: state.borrower,\n };\n};\n\nconst mapDispatchToProps = (dispatch) => ({\n updateChangeProgress: (step, stage) => {\n dispatch(UpdateChangeProgress(step, stage));\n },\n updateChangeProgressType: (step, stage) => {\n dispatch(UpdateChangeProgressType(step, stage));\n },\n});\nexport default function Documents(props) {\n const [selectMenu, setSelectMenu] = useState('')\n const items = [\n {\n key: \"1\",\n label: `My Documents`,\n children: \n {/*
\n )\n\n}\nDocuments = connect(mapStateToProps, mapDispatchToProps)(Documents);\n","\nimport React, { useEffect, useState, useCallback, useRef } from 'react';\nimport { connect } from 'react-redux'\nimport { Document, Page, pdfjs } from 'react-pdf';\nimport { PDFDocument, rgb } from 'pdf-lib';\nimport { CloseOutlined } from \"@ant-design/icons\";\nimport { Button, Form, Checkbox, Input, Modal, Spin } from 'antd';\nimport moment from 'moment';\nimport { useHistory } from \"react-router-dom\"\nimport { saveAs } from 'file-saver';\nimport './HardMoneyLoan/PDFPreview.css';\nimport './HardMoneyLoan/TextLayer.css';\n// import \"react-pdf/dist/esm/Page/TextLayer.css\";\n\nexport function blobToURL(blob) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = function () {\n const base64data = reader.result;\n resolve(base64data);\n };\n });\n}\n\nconst mapStateToProps = (state) => {\n return {\n hasCoBorrower: state.application.hascoborrower === \"withcoborrower\",\n }\n}\n\n// Directly copied from form_marks.go\nconst signCoordinates = {\n \"page2\": {\n \"borrower.signature\": { Left: 149.938012, Top: 699.655642, Right: 448.457415, Bottom: 724.989162 },\n \"borrower.signature.date\": { Left: 492.877884, Top: 700.794918, Right: 576.247894, Bottom: 724.431574 },\n \"coborrower.signature\": { Left: 149.194504, Top: 740.631587, Right: 447.174893, Bottom: 764.115037 },\n \"coborrower.signature.date\": { Left: 494.044096, Top: 739.106156, Right: 575.960673, Bottom: 764.784832 },\n },\n \"page6\": {\n \"borrower.signature\": { Left: 154.992455, Top: 692.501348, Right: 412.125321, Bottom: 712.885257 },\n \"borrower.signature.date\": { Left: 455.208178, Top: 690.486024, Right: 592.914131, Bottom: 712.987128 },\n \"coborrower.signature\": { Left: 169.909857, Top: 737.242870, Right: 421.305854, Bottom: 758.380672 },\n \"coborrower.signature.date\": { Left: 465.925736, Top: 734.865661, Right: 585.810826, Bottom: 758.224112 },\n },\n \"page7\": {\n \"borrower.signature\": { Left: 150.868699, Top: 690.059578, Right: 414.187342, Bottom: 713.687426 },\n \"borrower.signature.date\": { Left: 456.687334, Top: 685.539165, Right: 547.043647, Bottom: 710.956520 },\n \"coborrower.signature.date\": { Left: 465.536239, Top: 726.710112, Right: 553.345275, Bottom: 756.527421 },\n \"coborrower.signature\": { Left: 169.022238, Top: 732.849779, Right: 423.397619, Bottom: 759.467932 },\n },\n \"page8\": {\n \"borrower.signature\": { Left: 156.361317, Top: 679.203119, Right: 409.458129, Bottom: 702.315068 },\n \"borrower.signature.date\": { Left: 454.912180, Top: 678.029100, Right: 587.751260, Bottom: 700.909247 },\n \"coborrower.signature\": { Left: 175.000186, Top: 723.278574, Right: 424.748534, Bottom: 748.862620 },\n \"coborrower.signature.date\": { Left: 468.006864, Top: 719.840562, Right: 590.132241, Bottom: 746.434448 },\n },\n \"page9\": {\n \"borrower.signature\": { Left: 152.011897, Top: 463.909080, Right: 407.620574, Bottom: 487.300107 },\n \"borrower.signature.date\": { Left: 452.712552, Top: 463.862488, Right: 588.684658, Bottom: 485.761183 },\n \"coborrower.signature\": { Left: 168.497061, Top: 512.377038, Right: 421.376242, Bottom: 534.365661 },\n \"coborrower.signature.date\": { Left: 463.001602, Top: 508.093347, Right: 601.608988, Bottom: 532.818064 },\n },\n}\nconst PT_PX_RATIO = 1.46\n\nlet cosignMarks = [\n {\n page: 1,\n signid: \"page2cosignature\",\n pageName: \"page2\",\n type: 'signature',\n key: \"coborrower.signature\",\n style: {\n }\n },\n {\n page: 1,\n signid: \"page2cosignature\",\n pageName: \"page2\",\n type: 'date',\n key: \"coborrower.signature.date\",\n style: {\n }\n },\n {\n page: 5,\n signid: \"page6cosignature\",\n pageName: \"page6\",\n type: 'signature',\n key: \"coborrower.signature\",\n style: {\n top: 0,\n left: 0,\n }\n },\n {\n page: 5,\n signid: \"page6cosignature\",\n pageName: \"page6\",\n type: 'date',\n key: \"coborrower.signature.date\",\n style: {\n top: 0,\n left: 0,\n }\n },\n {\n page: 6,\n signid: \"page7cosignature\",\n pageName: \"page7\",\n type: 'signature',\n key: \"coborrower.signature\",\n style: {\n top: 0,\n left: 0,\n }\n },\n {\n page: 6,\n signid: \"page7cosignature\",\n pageName: \"page7\",\n type: 'date',\n key: \"coborrower.signature.date\",\n style: {\n top: 0,\n left: 0,\n }\n },\n {\n page: 7,\n signid: \"page8cosignature\",\n pageName: \"page8\",\n type: 'signature',\n key: \"coborrower.signature\",\n style: {\n top: 0,\n left: 0,\n }\n },\n {\n page: 7,\n signid: \"page8cosignature\",\n pageName: \"page8\",\n type: 'date',\n key: \"coborrower.signature.date\",\n style: {\n top: 0,\n left: 0,\n }\n },\n {\n page: 8,\n signid: \"page9cosignature\",\n pageName: \"page9\",\n type: 'signature',\n key: \"coborrower.signature\",\n style: {\n top: 0,\n left: 0,\n }\n },\n {\n page: 8,\n signid: \"page9cosignature\",\n pageName: \"page9\",\n type: 'date',\n key: \"coborrower.signature.date\",\n style: {\n top: 0,\n left: 0,\n }\n }\n]\n\n\n\nfunction PDFPreview(props) {\n pdfjs.GlobalWorkerOptions.workerSrc =\n `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;\n const history = useHistory()\n const pageRefs = useRef({});\n // const [pdf, setPdf] = useState('');\n const [numPages, setNumPages] = useState(null);\n const [showSignPad, setShowSignPad] = useState(false)\n const [currentSignature, setCurrentSignature] = useState('')\n const [currentSignId, setCurrentSignId] = useState('')\n const [loading, setLoading] = useState(false)\n const [isModalOpen, setIsModalOpen] = useState(false)\n const [signItems, setSignItems] = useState({})\n const { pdf, fileName, signMarks, visible, onClose } = props\n const documentRef = useRef(null);\n const [submitLoading, setSubmitLoading] = useState(false)\n const containerRef = useRef(null)\n const WIDTH = 900\n const [form] = Form.useForm()\n\n const onPageLoadSuccess = (page) => {\n };\n\n /*To Prevent right click on screen*/\n document.addEventListener(\"contextmenu\", (event) => {\n event.preventDefault();\n });\n\n function insertSignature() {\n const foundList = signMarks.filter(x => x.signid === currentSignId)\n let newSignItems = JSON.parse(JSON.stringify(signItems))\n for (const { pageName, key, type } of foundList) {\n if (type === 'signature') {\n newSignItems[pageName][key] = form.getFieldValue(\"signature\")\n } else if (type === 'date') {\n newSignItems[pageName][key] = moment().format(\"MM/DD/YYYY\")\n }\n }\n console.log(newSignItems)\n setSignItems(newSignItems)\n setCurrentSignId(\"\")\n setShowSignPad(false)\n }\n\n /*When document gets loaded successfully*/\n function onDocumentLoadSuccess({ numPages }) {\n setNumPages(numPages);\n }\n\n function verifySignItems(signItems) {\n for (const pageName in signItems) {\n for (const key in signItems[pageName]) {\n if (!signItems[pageName][key]) return [pageName, key]\n }\n }\n return true\n }\n\n function hasNextSign() {\n const verifyResult = verifySignItems(signItems)\n return Array.isArray(verifyResult)\n }\n\n function scrollNextSign() {\n const verifyResult = verifySignItems(signItems)\n if (Array.isArray(verifyResult)) {\n const [pageName, key] = verifyResult\n let found = signMarks.find(x => x.pageName === pageName && key === key)\n if (found && containerRef.current && pageRefs.current) {\n let pageOffset = pageRefs.current[found.page]?.offsetTop || 0\n containerRef.current.scrollTop = found.style.top + pageOffset - 50\n }\n return\n }\n }\n const onSubmit = async () => {\n setSubmitLoading(true)\n const pdfDoc = await PDFDocument.load(pdf);\n // const fontBytes = await fetch(\"../../fonts/Smooch-Regular.ttf\").then((res) => res.arrayBuffer())\n // pdfDoc.registerFontkit(fontkit)\n\n const font = await pdfDoc.embedFont('Helvetica')\n signMarks.forEach(signMark => {\n const page = pdfDoc.getPage(signMark.page - 1)\n const scale = page.getWidth() / 900\n const textSize = signMark.type === 'signature' ? 26 : 14\n const { left, top, width, height } = signMark.style\n const textHeight = font.heightAtSize(textSize)\n const text = signItems[signMark.pageName][signMark.key]\n const textY = page.getHeight() - (top * scale + (height * scale + textHeight) / 2)\n // page.drawRectangle({ \n // x: left * scale, \n // y: page.getHeight() - (top * scale) - (height * scale), \n // width: width * scale, \n // height: height * scale, \n // borderColor: rgb(1, 1, 1), \n // fill: false, \n // })\n page.drawText(text, {\n x: left * scale,\n y: textY,\n font,\n size: textSize,\n color: rgb(0, 0, 139 / 255),\n })\n })\n\n const modifiedPdfBytes = await pdfDoc.save()\n const modifiedPdfBlob = new Blob([modifiedPdfBytes], { type: 'application/pdf' })\n const downloadLink = document.createElement('a')\n downloadLink.href = URL.createObjectURL(modifiedPdfBlob)\n downloadLink.download = fileName\n downloadLink.click()\n setSubmitLoading(false)\n props.onSubmit(modifiedPdfBlob)\n }\n\n function openSignPad(signid) {\n setCurrentSignId(signid)\n setShowSignPad(true)\n }\n\n useEffect(() => {\n if (visible) {\n document.body.style.overflow = 'hidden';\n } else {\n document.body.style.overflow = 'unset';\n }\n }, [visible])\n\n\n useEffect(async () => {\n setLoading(true)\n // if (props.hasCoBorrower) {\n // signMarks = [\n // ...signMarks,\n // ...cosignMarks,\n // ]\n // }\n\n let initSignItems = {}\n for (const { pageName, key, type } of signMarks) {\n if (!(pageName in initSignItems)) {\n initSignItems[pageName] = {}\n }\n if (!(key in initSignItems[pageName])) {\n initSignItems[pageName][key] = ''\n }\n }\n console.log(signMarks, initSignItems)\n setSignItems(initSignItems)\n // let token = sessionStorage.getItem(\"ZeitroA\")\n\n // const existingPdfBytes = await fetch('/borrower/hardmoneyloan/previewyeeleeform', {\n // method: 'GET',\n // headers: {\n // Authorization: \"Bearer \" + token,\n // Cache: \"no-cache\"\n // },\n // }).then(res => res.arrayBuffer()).catch(function (err) {\n // console.log('Fetch Error :-S', err);\n // });\n // const blob = new Blob([new Uint8Array(existingPdfBytes)]);\n\n // const URL = await blobToURL(blob);\n // setPdf(URL);\n setLoading(false)\n }, []);\n const PDFComponent = () => {\n return (\n \n \n
\n \n \n {\n setShowSignPad(false)\n setCurrentSignId(\"\")\n }}\n >Cancel\n \n \n \n \n
\n \n By using the electronic signature feature on this website, you agree to the legal validity and binding nature of your electronic signature on the loan application forms. The company reserves the right to implement authentication measures to verify the identity of the applicant when using electronic signatures.\nYou can withdraw consent by notifying the company in writing, but this may affect your loan application.We will retain electronic signature records as required by law.\nYou can request a copy of your signed documents.The company may update these terms. Continued use of electronic signatures implies acceptance of any changes.By using our electronic signature feature, you confirm your understanding and acceptance of these terms.
\n \n \n\n return (\n <>\n\n \n {!loading ? PDFComponent(): \n\n {renderSignPad()}\n
\n \n );\n}\n\nexport default PDFPreview = connect(mapStateToProps)(PDFPreview);\n","import React, { Component } from 'react'\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport './App.css'\nimport { Redirect } from 'react-router-dom'\nimport {\n UpdateChangeProgressLastVisited,\n UpdateChangeProgressType,\n} from './Store/progress'\nimport { saveState } from './Store/index'\nimport { withRouter } from 'react-router-dom'\nimport { connect } from 'react-redux'\nimport * as com from './Common'\nimport dayjs from 'dayjs'\nimport {\n Modal,\n Button,\n Row,\n Col,\n Skeleton,\n Upload,\n message,\n Popconfirm,\n Collapse,\n Progress,\n} from 'antd'\nimport { UploadOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons'\nimport PDFPreview from './Application/PDFPreview'\nimport './Tasks.css'\n\nconst { Dragger } = Upload\n\nconst mapStateToProps = (state) => {\n return {\n progress: state.progress,\n application: state.application,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateChangeProgressLastVisited: (step) => {\n dispatch(UpdateChangeProgressLastVisited(step))\n },\n updateChangeProgressType: (step, stage) => {\n dispatch(UpdateChangeProgressType(step, stage))\n },\n})\nclass Tasks extends Component {\n constructor(props) {\n super(props)\n\n this.state = {\n documents: [],\n url: '',\n download: '',\n redirect: '',\n show: false,\n modalTitle: '',\n index: 0,\n id: 0,\n taskid: '',\n forwhom: '',\n loading: false,\n submitLoading: false,\n uploadLoading: false,\n showclosed: false,\n expandedRowKeys: [],\n showUploadModal: false,\n docID: '',\n uploadFileList: [],\n pdfVisible: false,\n pdfFile: '',\n fileName: '',\n signMarks: [],\n activeKeys: [],\n }\n\n this.aref = React.createRef()\n }\n\n componentDidMount() {\n this.props.updateChangeProgressType('tasks')\n const now = new Date()\n const snow = now.toUTCString()\n this.props.updateChangeProgressLastVisited(snow)\n saveState()\n this.reload()\n }\n\n mergeTasks = (list) => {\n const updatedTaskList = []\n const tasksByType = {}\n list.forEach((task) => {\n if (!(task.TaskType in tasksByType)) {\n tasksByType[task.TaskType] = []\n }\n tasksByType[task.TaskType].push(task)\n })\n for (const taskType in tasksByType) {\n const tasks = tasksByType[taskType]\n\n tasks.sort((a, b) => b.ID - a.ID)\n\n for (let i = 0; i < tasks.length; i++) {\n const currentTask = tasks[i]\n const mergedTask = { ...currentTask }\n\n if (taskType === 'action') {\n for (let j = i + 1; j < tasks.length; j++) {\n const nextTask = tasks[j]\n mergedTask.Items.push(...nextTask.Items)\n }\n } else {\n for (let j = i + 1; j < tasks.length; j++) {\n const nextTask = tasks[j]\n mergedTask.Documents.push(...nextTask.Documents)\n }\n }\n updatedTaskList.push(mergedTask)\n i = tasks.length\n }\n }\n return updatedTaskList\n }\n\n reload = () => {\n this.setState({ loading: true })\n\n const token = sessionStorage.getItem('ZeitroA')\n fetch('/auth/tasks', {\n method: 'GET',\n headers: {\n Authorization: 'Bearer ' + token,\n Cache: 'no-cache',\n },\n })\n .then((response) => {\n if (response.status !== 200) {\n console.warn('Looks like there was a problem. Status Code: ' + response.status)\n window.document.dispatchEvent(\n new Event('reauthenticate'),\n ''\n )\n this.setState({ loading: false })\n return\n }\n // Examine the text in the response\n response.json().then((js) => {\n if (js.Status !== 'OK') {\n console.warn('Error: ' + js.Text)\n window.document.dispatchEvent(\n new Event('reauthenticate'),\n ''\n )\n } else {\n const data = js.Tasks\n const filterData = data.filter((item) => item.TaskType !== 'upload')\n const tasks = filterData.length > 0 ? this.mergeTasks(filterData) : []\n const taskTypes = ['action', 'sign']\n const missingTaskTypes = taskTypes.filter(\n (type) =>\n !tasks.some((task) => task.TaskType === type)\n )\n missingTaskTypes.forEach((type) => {\n tasks.push({\n Created: '',\n Deadline: '',\n Documents: [],\n ForWhom: '',\n ID: '',\n Items: [],\n Status: 'open',\n TaskID: 'other',\n TaskType: type,\n name: `New ${type} Task`,\n })\n })\n\n const docs = tasks.map((s) => {\n let dd = com.timeGoToJS(s.Created)\n const dt = new Date(dd)\n dd = com.timeGoToJS(s.Deadline)\n const deadline = new Date(dd)\n return {\n rand: Math.random(),\n id: s.ID,\n name: s.TaskName,\n created: dt.toLocaleString('en-US'),\n status: s.Status,\n forwhom: s.ForWhom,\n tasktype: s.TaskType,\n taskid: s.TaskID,\n deadline: deadline,\n documents: s.Documents,\n items: s.Items,\n }\n })\n this.rawdocs = docs\n this.loaddocs(docs, this.state.showclosed)\n }\n this.setState({ loading: false })\n })\n })\n .catch((err) => {\n this.setState({ loading: false })\n console.error('Fetch Error :', err)\n })\n }\n\n loaddocs = (docs, showclosed) => {\n if (!showclosed) {\n // let newdocs = []\n // docs.forEach( doc => {\n // if(doc.status !== \"open\")\n // return\n // newdocs.push(doc)\n // } )\n // docs = newdocs\n }\n this.setState({ documents: docs })\n }\n\n forWhomDecoded = (_forwhom) => {\n const { borrower, coborrower } = this.props.application\n\n let forwhom = ''\n if (_forwhom === 'joint' && coborrower.firstname === '' && coborrower.lastname === '') {\n _forwhom = 'borrower'\n }\n\n try {\n switch (_forwhom) {\n case 'borrower':\n forwhom = borrower.firstname + ' ' + borrower.lastname\n break\n case 'coborrower':\n forwhom = coborrower.firstname + ' ' + coborrower.lastname\n break\n case 'joint':\n forwhom = borrower.firstname + ' ' + borrower.lastname + ' and ' + coborrower.firstname + ' ' + coborrower.lastname\n break\n default:\n forwhom = _forwhom\n break\n }\n } catch (x) {\n forwhom = _forwhom\n }\n\n return forwhom\n }\n\n showSign = (index) => {\n const { taskid, id } = this.state.documents[index]\n this.setState({\n redirect: (\n \n
\n Please follow the instruction to provide your signatures and then click Submit.
\n \n \n {hasNextSign() ? 'Next' : 'Submit'}\n \n
\n \n \n \n Required actions({documents.length})\n \n {record.status !== 'closed' && record.tasktype === 'action'\n ? record.items.length > 0\n : record.documents.length > 0 && (\n this.submitTask(record)}\n >\n {record.tasktype === 'action' ? 'Mark as done' : 'Submit'}\n \n )}\n
\n \n {record.tasktype !== 'sign'\n ? documents.map((item) => (\n \n this.showUpload(item)}\n />\n )}\n {record.status === 'closed' && item.Data && (\n
\n ))\n : documents.map((item) => (\n \n
\n {record.tasktype === 'upload' &&\n item.Uploaded === '' && (\n \n
\n {record.status !== 'closed' &&\n item.Data && (\n \n {this.documentName(record, item)}\n
\n {record.tasktype === 'upload' &&\n item.Uploaded === '' && (\n Not upload\n )}\n \n this.deleteDoc(item.ID)}\n okText=\"Yes\"\n cancelText=\"No\"\n >\n
\n )}\n \n
\n \n
\n \n {item.FileName}.\n {this.fileType(item.MimeType)}\n
\n \n {this.convertBytes(\n this.base64ToFile(\n item.Data,\n item.FileName,\n item.MimeType\n ).size\n )}\n
\n \n
\n \n \n
\n )}\n \n
\n ))}\n \n \n )\n }\n\n mapType = (type) => {\n const map = {\n upload: 'Document upload',\n sign: 'Document sign',\n action: 'Customized task',\n }\n return map[type]\n }\n\n noTasks = (item) => {\n if (item.tasktype === 'action') {\n return item.items.length === 0\n } else {\n return item.documents.length === 0\n }\n }\n\n changeCollapse = (e) => {\n this.setState({ activeKeys: e })\n }\n\n customHeader = (item) => {\n let percent = 0\n let completed = 0\n if (item.tasktype === 'upload') {\n completed = item.documents.filter((file) => file.Data).length\n percent = (completed / item.documents.length) * 100\n } else {\n if (item.tasktype === 'action') {\n completed = item.status === 'closed' ? item.items.length : 0\n } else {\n completed = item.status === 'closed' ? item.documents.length : 0\n }\n percent = item.status === 'closed' ? 100 : 0\n }\n\n return (\n \n {this.documentName(record, item)}\n
\n \n {dayjs(item.DueDate).format('MM/DD/YYYY')}\n
\n \n \n this.signature(item)\n }\n >\n Sign\n \n )}\n
\n \n
\n {item.Uploaded === '' && (\n \n \n Latest update on{' '}\n {this.noTasks(item) ? (\n --\n ) : (\n dayjs(item.deadline).format('MM/DD/YYYY')\n )}\n
\n {this.mapType(item.tasktype)}
\n \n (\n \n {completed}\n \n )}\n />\n \n {this.noTasks(item) ? (\n No tasks\n ) : (\n `${completed} / ${ item.tasktype === 'action' ? item.items.length : item.documents.length } COMPLETED`\n )}\n \n
\n \n )\n }\n render() {\n const documentTotal = () => {\n let totalLength = 0\n if (this.state.documents.length > 0) {\n this.state.documents.map(this.documentsJSON).forEach((task) => {\n if (task.tasktype === 'action') {\n totalLength += task.items.length\n } else {\n totalLength += task.documents.length\n }\n })\n }\n return totalLength\n }\n\n const showTaskTable = () => {\n return (\n \n
\n )\n }\n\n const draggerProps = {\n name: 'file',\n className: 'file-upload',\n // maxCount: 1,\n fileList: this.state.uploadFileList,\n showUploadList: false,\n onChange: (info) => {\n const { status } = info.file\n if (status !== 'uploading') {\n console.log(info.file, info.fileList)\n }\n if (status === 'done') {\n console.log(info.file.name)\n } else if (status === 'error') {\n console.log(`${info.file.name} file upload failed.`)\n }\n const fileList = [...info.fileList]\n this.setState({ uploadFileList: fileList })\n },\n onDrop: (e) => {\n console.log('Dropped files', e.dataTransfer.files)\n },\n beforeUpload: (file) => {\n const allowedFileTypes = [\n 'image/jpeg',\n 'image/png',\n 'application/pdf',\n ]\n const fileType = file.type\n const isAllowed = allowedFileTypes.includes(fileType)\n if (!isAllowed) {\n message.warning('You can only upload image and PDF files.')\n return Upload.LIST_IGNORE\n }\n return false\n },\n }\n\n return (\n \n (\n \n
\n \n {this.expandedContent(item)}\n
\n \n ))}\n \n \n {this.state.redirect}\n \n Cancel\n ,\n \n Add files\n ,\n ]}\n >\n {' '}\n \n
\n \n Upload files | {this.state.modalTitle}\n
\n \n \n \n
\n \n \n \n
\n \n Drag & Drop or{' '}\n \n Choose File\n {' '}\n to upload\n
\n \n \n {this.state.uploadFileList.map((item, index) => (\n
\n
\n \n\n \n
\n \n ))}\n \n
\n \n
\n \n {item.name}\n
\n \n {this.convertBytes(\n item.size\n )}\n
\n \n \n this.handleDelete(index)\n }\n />\n
\n \n \n {documentTotal()} Task\n \n
\n \n \n {this.state.documents.length === 0 ? (\n
\n )}\n \n )\n }\n}\n\nexport default withRouter(connect(mapStateToProps, mapDispatchToProps)(Tasks))\n","import React, { Component } from \"react\";\nimport Calendar from \"react-calendar\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport InputGroup from \"react-bootstrap/InputGroup\";\nimport Form from \"react-bootstrap/Form\";\n\nimport \"./App.css\";\nimport \"./Calendar.css\";\nexport default class DateOfBirth extends Component {\n constructor(props) {\n super(props);\n this.state = {\n show: false,\n max: false,\n };\n let now = new Date();\n //now.setFullYear(now.getFullYear() - 18)\n this.max = now;\n if (this.props.maxdate) this.max = this.props.maxdate;\n this.ref = React.createRef();\n if (this.props.onRef) {\n this.props.onRef(this.ref);\n }\n }\n componentDidMount() {}\n\n componentWillUnmount() {}\n\n onChange = (e) => {\n this.props.onChange(e);\n };\n show = (e) => {};\n hide = (e) => {\n this.setState({ show: false });\n };\n press = (e) => {\n this.setState({ show: true });\n };\n setCustomValidity(what) {\n if (this.ref.current) this.ref.current.setCustomValidity(what);\n }\n setFocus() {\n if (this.ref.current) this.ref.current.setFocus();\n }\n container = (event) => {\n event.preventDefault();\n event.stopPropagation();\n };\n dateSelected = (e) => {\n let v =\n (\"0\" + (e.getMonth() + 1)).slice(-2) +\n \"/\" +\n (\"0\" + e.getDate()).slice(-2) +\n \"/\" +\n e.getFullYear();\n\n this.props.onChange({ target: { value: v } });\n this.setState({ show: false });\n };\n seed = () => {\n if (this.props.value === \"\") {\n return new Date();\n } else {\n let n = new Date(this.props.value);\n let old = new Date(1960, 0, 1);\n if (n < old) return old;\n return n;\n }\n };\n renderCalendar = () => {\n return (\n \n There are currently no outstanding tasks\n
\n ) : (\n {showTaskTable()}
\n )}\n \n
\n \n \n );\n };\n\n render() {\n return (\n \n \n \n
)\n}\nexport const tooltipWhite = (title, text, placement, cls, nocomma, size) => {\n if (\"undefined\" === typeof placement)\n placement = \"bottom\"\n let cla = \"pb-2\"\n\n if (\"undefined\" !== typeof cls) {\n cla = cls\n }\n let last = \"\"\n if (typeof title === \"object\") {\n } else {\n let split = title.split(' ')\n if (split.length > 1) {\n last = split[split.length - 1]\n title = split.slice(0, split.length - 1).join(' ')\n }\n }\n return (\n {title} {last}{nocomma ? '' : ':'}
\n \n \n \n
)\n}\nexport const tooltipFlat = (title, text, placement, cls, nocomma, noquestion) => {\n if (\"undefined\" === typeof placement)\n placement = \"bottom\"\n let cla = \"pb-2\"\n let question = \n if (noquestion === false)\n question = \"\"\n if (\"undefined\" !== typeof cls) {\n cla = cls\n }\n let last = \"\"\n if (typeof title === \"object\") {\n } else {\n let split = title.split(' ')\n if (split.length > 1) {\n last = split[split.length - 1]\n title = split.slice(0, split.length - 1).join(' ')\n }\n }\n return (\n \n {title} {last}{\n size ? : \n }{nocomma ? '' : ':'}
\n \n \n \n {code} \n \n
)\n }\n\n if (old < nw) {\n let text = Monthly payment higher by {\"$\" + (nw - old).toFixed(2)} \n return (\n \n \n {code} \n \n
)\n }\n\n let text = Monthly payment lower by {\"$\" + (old - nw).toFixed(2)} !\n\n return (\n \n \n {code} \n \n
)\n}\n\nexport const MonhtlyChangeBP = (old, nw, breakEven, code) => {\n\n if (Math.round(old - nw) === 0) {\n let text = No improvement\n return (\n \n \n {code} \n \n
)\n }\n let be = \"\"\n if (breakEven !== -1) {\n be = Break even in {breakEven} months
\n }\n if (old < nw) {\n let text = Monthly payment higher by {\"$\" + (nw - old).toFixed(2)} \n return (\n \n \n {code} \n \n
)\n }\n\n let text = Monthly payment lower by {\"$\" + (old - nw).toFixed(2)} ! {be}\n\n return (\n \n \n {code} \n \n
)\n}\n\nexport const Tips = ({ content, title, placement, color, style, className }) => {\n const getSrc = () => {\n if (color === \"white\") {\n return \"/images/questionMarkWhite.png\"\n } else if (color === \"blue\") {\n return \"/images/questionMarkBlue.png\"\n }\n return \"/images/questionMark.svg\"\n }\n\n return (\n\n <>\n \n ![](\"/images/tooltipBulb.png\")
\n INSIGHTS\n
\n {title !== \"\" ? \n INSIGHTS\n \n {title}\n
: \"\"}\n \n {content}\n
\n \n } key={color} color=\"#fff\">\n \n \n \n
\n )\n}\n","import React, {Component, useState, useEffect} from \"react\";\nimport * as com from \"../Common.js\";\nimport Form from \"react-bootstrap/Form\";\nimport {Col, Row, Select} from \"antd\";\nimport {InputGroup} from \"react-bootstrap\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport \"../App.css\";\nvar parser = require(\"parse-address\");\n\nexport default class AddressAutocomplete extends Component {\n constructor(props) {\n super(props);\n this.ref = React.createRef();\n this.state = {\n value: props.defaultValue,\n };\n }\n\n onValidate = (adr) => {\n if (!this.props.onCompletion) {\n this.ref.current.setCustomValidity(\"\");\n let parsed = parser.parseLocation(adr);\n if (parsed != null) {\n let busted = false;\n if (parsed.number === undefined) {\n busted = true;\n this.ref.current.setCustomValidity(\"Need to specify house number\");\n }\n if (parsed.zip === undefined) {\n busted = true;\n this.ref.current.setCustomValidity(\"Need to specify zip code\");\n }\n if (!busted) this.ref.current.setCustomValidity(\"\");\n console.log(\"parsed addr\", JSON.stringify(parsed));\n }\n }\n };\n onChange = (e) => {\n e.preventDefault();\n let adr = e.target.value;\n this.onValidate(adr);\n\n this.props.onChange(e);\n };\n onBlur = (e) => {\n let adr = e.target.value;\n this.onValidate(adr);\n if (this.props.onBlur != null) {\n this.props.onBlur(e);\n }\n };\n componentDidMount() {\n if (window.google == null) return;\n this.autocomplete = new window.google.maps.places.Autocomplete(document.getElementById(this.props.id), {\n types: [\"address\"],\n componentRestrictions: {country: \"us\"},\n });\n\n this.autocomplete.addListener(\"place_changed\", this.handlePlaceSelect);\n this.onValidate(this.props.defaultValue);\n }\n handlePlaceSelect = () => {\n let addressObject = this.autocomplete.getPlace();\n let address = addressObject.address_components;\n\n if (\"undefined\" === typeof address) return;\n\n let num = com.getSubaddress(address, \"street_number\", \"long_name\");\n let str = com.getSubaddress(address, \"route\", \"long_name\");\n\n if (this.props.onCompletion) {\n let straddr = `${num} ${str}`;\n this.ref.current.value = straddr;\n this.onValidate(address);\n //this.props.onChange({target: {value: straddr}})\n this.props.onCompletion(address);\n } else {\n let city = com.getSubaddress(address, \"locality\", \"long_name\");\n let state = com.getSubaddress(address, \"administrative_area_level_1\", \"short_name\");\n let zip = com.getSubaddress(address, \"postal_code\", \"long_name\");\n let zips = com.getSubaddress(address, \"postal_code_suffix\", \"short_name\");\n //let country = com.getSubaddress(address, \"country\", \"long_name\")\n\n if (zips !== \"\") zip = zip + \"-\" + zips;\n\n let straddr = `${num} ${str}, ${city}, ${state} ${zip}`;\n this.onValidate(straddr);\n this.props.onChange({target: {value: straddr}});\n }\n };\n render = () => {\n return (\n \n \n {\n setAddressLine(e.target.value);\n onAddressLineChange(e.target.value);\n }}\n placeholder={placeholder ? placeholder : \"Enter the address\"}\n goodfeedback=\"\"\n badfeedback=\"Please provide your street address.\"\n onCompletion={(e) => onStreetAddressCompletion(e)}\n size=\"md\"\n />\n \n
\n \n {\n setAddressState(e);\n onStateChange(e);\n }}>\n {getStates()}\n \n \n {\n setAddressCounty(e);\n onCountyChange(e);\n }}\n value={addressCounty || \"County\"}>\n {getCounties()}\n \n \n \n {\n setAddressCity(e.target.value);\n onCityChange(e.target.value);\n }}\n value={addressCity}\n placeholder={cityPlaceholder ? cityPlaceholder : \"City\"}\n />\n \n \n \n {\n setAddressZip(e.target.value);\n onZipChange(e.target.value);\n }}\n value={addressZip}\n placeholder={zipPlaceholder ? zipPlaceholder : \"Zip code\"}\n />\n \n \n
\n
\n );\n};\n","import { EventEmitter } from 'events';\r\nconst eventBus = new EventEmitter();\r\nexport default eventBus;","import { isEmpty } from 'lodash'\nimport * as com from '../Common'\n\n/**\n * Get states from loan limits\n * @param {*} loanLimits\n * @returns\n */\nexport const getStates = (loanLimits) => {\n const options = []\n options.push({ value: '', label: 'Select state' })\n\n // Handle cases where loanLimits is undefined, null or empty\n if (isEmpty(loanLimits)) {\n return options\n }\n\n const keys = Object.keys(loanLimits)\n keys.forEach((x) => {\n options.push({ value: com.capitalize(x), label: com.capitalize(x) })\n })\n\n return options\n}\n\n/**\n * Get counties from loan limits with a given state\n * @param {*} loanLimits\n * @param {*} state\n * @returns\n */\nexport const getCounties = (loanLimits, state) => {\n const options = []\n options.push({ value: '', label: 'Select county' })\n\n // Handle cases where loanLimits or state is undefined, null or empty\n if (isEmpty(loanLimits) || isEmpty(state)) {\n return options\n }\n\n const stateData = loanLimits[state.toUpperCase()]\n if (!isEmpty(stateData)) {\n const keys = Object.keys(stateData)\n keys.forEach((x) => {\n options.push({ value: com.capitalize(x), label: com.capitalize(x) })\n })\n }\n\n return options\n}\n","import React, { Component } from 'react'\nimport { connect } from 'react-redux'\nimport { Checkbox, DatePicker, Input, InputNumber, Select, Switch } from 'antd'\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport Form from 'react-bootstrap/Form'\nimport Modal from 'react-bootstrap/Modal'\nimport Button from 'react-bootstrap/Button'\nimport dayjs from 'dayjs'\nimport { isEmpty } from 'lodash'\nimport './ApplicationInterview.css'\nimport '../BorrowerApplication.css'\nimport DateOfBirth from '../DateOfBirth'\nimport * as act from '../Store/actions'\nimport * as st from '../State'\nimport * as com from '../Common'\nimport { UpdateChangeProgress, UpdateChangeLastTouch } from '../Store/progress'\nimport { updateLeadSource } from '../Store/accountinfo'\nimport { Tips } from '../Common/Tooltip'\nimport InputGroupComponent from '../Common/InputGroup'\nimport AddressAutocomplete from '../Common/AddressAutocomplete'\nimport CheckGroup from '../Common/components/CheckGroup'\nimport eventBus from '../Bus'\nimport { getStates, getCounties } from '../Tools/Address'\n\nconst PHONE_NUMBER_PLACEHOLDER = '(000)-000-0000'\n\nconst visas = [\n st.VT_A_1,\n st.VT_E_1,\n st.VT_E_2,\n st.VT_E_3,\n st.VT_F_1,\n st.VT_G_1,\n st.VT_G_2,\n st.VT_G_3,\n st.VT_G_4,\n st.VT_H_1B,\n st.VT_H_4,\n st.VT_L_1,\n st.VT_L_2,\n st.VT_O_1,\n st.VT_O_2,\n st.VT_O_3,\n st.VT_P_1,\n st.VT_P_2,\n st.VT_P_3,\n st.VT_P_4,\n st.VT_TN,\n]\n\nclass PhoneInput extends Component {\n constructor(props) {\n super(props)\n this.state = {\n displayValue: props.value === PHONE_NUMBER_PLACEHOLDER ? '' : props.value\n }\n }\n\n componentDidUpdate(prevProps) {\n if (prevProps.value !== this.props.value) {\n this.setState({\n displayValue: this.props.value === PHONE_NUMBER_PLACEHOLDER ? '' : this.props.value\n })\n }\n }\n\n handleChange = (e) => {\n const { onChange } = this.props\n // limit input length to 14 characters (format like: (123)-456-7890)\n const newValue = e.target.value.slice(0, 14)\n // update internal display value\n this.setState({ displayValue: newValue })\n // trigger external onChange\n onChange({\n target: {\n value: newValue || PHONE_NUMBER_PLACEHOLDER\n }\n })\n }\n\n render() {\n const { type, phoneRef, onDelete, onTypeChange, showDelete = true } = this.props\n const { displayValue } = this.state\n const isEmpty = !displayValue\n\n const availableTypes = this.props.availableTypes || ['home', 'mobile', 'work'];\n return (\n \n
\n )\n }\n}\n\nconst mapStateToProps = (state) => {\n // Helper function to determine occupation status based on employment and self-employment flags\n const getOccupation = (employed, selfemployed) => {\n if (employed !== 'employed') return 'unemployed'\n return selfemployed ? 'selfemployed' : 'employed'\n }\n\n return {\n application: state.application,\n accountInfo: state.accountInfo,\n hascoborrower: state.application.hascoborrower,\n property: state.application.property,\n cohabiting: state.application.cohabiting,\n financingsameproperty: state.application.financingsameproperty,\n borroweroccupation: getOccupation(\n state.application.borrower.occupation.hasoccupation,\n state.application.borrower.occupation.selfemployed\n ),\n coborroweroccupation:\n 'co' +\n getOccupation(\n state.application.coborrower.occupation.hasoccupation,\n state.application.coborrower.occupation.selfemployed\n ),\n progress: state.progress,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateLeadSource: (t) => {\n dispatch(updateLeadSource(t))\n },\n changeBorrowerInfoByValue: (val, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(val, who, verb))\n },\n changePhoneInfo: (input, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(input, who, verb))\n },\n updateSameProperty: (event) => {\n dispatch(act.UpdateSameProperty(event.target.checked))\n },\n updateCurrentResidence: (event) => {\n dispatch(act.UpdateCurrentResidence(event.target.value))\n },\n updateCoborrower: (event) => {\n dispatch(act.UpdateHasCoborrower(event.target.value))\n },\n updateCohabiting: (event) => {\n dispatch(act.UpdateCohabiting(event.target.checked))\n },\n changeMainProperty: (value, verb) => {\n dispatch(act.ChangeMainProperty(value, verb))\n },\n changeMainPropertyPurpose: (event) => {\n dispatch(act.ChangeMainPropertyPurpose(event.target.value))\n },\n changeMainPropertyAppraisal: (event) => {\n dispatch(act.ChangeMainPropertyAppraisal(event.target.value))\n },\n changeMainPropertyAttribute: (t, verb) => {\n dispatch(act.ChangeMainPropertyAttribute(t, verb))\n },\n updateBorrowerAttribute: (who, value, verb) => {\n dispatch(act.UpdateBorrowerAttribute(who, value, verb))\n },\n changeMainPropertySalesPrice: (event) => {\n dispatch(act.ChangeMainPropertySalesPrice(event.target.value))\n },\n addPreviousAddress: (event, who) => {\n dispatch(act.AddPreviousAddress(event.target.value, who))\n },\n updatePreviousAddress: (event, who, verb, n) => {\n dispatch(act.UpdatePreviousAddress(event.target.value, who, verb, n))\n },\n removePreviousAddress: (event, who, n) => {\n dispatch(act.RemovePreviousAddress(event.target.value, who, n))\n },\n clearPreviousAddress: (event, who) => {\n dispatch(act.ClearPreviousAddress(event.target.value, who))\n },\n changeOccupationInfo: (event, who, verb) => {\n dispatch(act.ChangeOccupationInfo(event.target.value, who, verb))\n },\n changeOccupationCheck: (check, who, verb) => {\n dispatch(act.ChangeOccupationInfo(check, who, verb))\n },\n changeBorrowerInfo: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event.target.value, who, verb))\n },\n updateApplicationAttribute: (input, verb) => {\n dispatch(act.UpdateApplicationAttribute(input, verb))\n },\n updateApplicationCheck: (event, verb) => {\n dispatch(act.UpdateApplicationAttribute(event.target.checked, verb))\n },\n changeMainPropertyPropertyType: (event) => {\n dispatch(act.ChangeMainPropertyPropertyType(event.target.value))\n },\n updateChangeProgress: (step, stage) => {\n dispatch(UpdateChangeProgress(step, stage))\n },\n addRemoteCoborrower: (i) => {\n dispatch(act.AddRemoteCoborrower(i))\n },\n changeMainPropertyRefinanceAttribute: (value, verb) => {\n dispatch(act.ChangeMainPropertyRefinanceAttribute(value, verb))\n },\n updateSelectField: (input, verb) => {\n dispatch(act.UpdateSelectField(input, verb))\n },\n changeReviewedLoans: (value) => {\n dispatch(act.ChangeReviewedLoans(value))\n },\n changeMainPropertyOccupancy: (event) => {\n dispatch(act.ChangeMainPropertyOccupancy(event.target.value))\n },\n clearBorrowerGift: () => {\n dispatch(act.ClearBorrowerGift())\n },\n clearBorrowerInsurance: () => {\n dispatch(act.ClearBorrowerInsurance())\n },\n addBorrowerOwnedProperty: (t) => {\n dispatch(act.AddBorrowerOwnedProperty(t))\n },\n prependOwnedProperty: (t) => {\n dispatch(act.PrependOwnedProperty(t))\n },\n prependBorrowerOwnedProperty: () => {\n dispatch(act.PrependBorrowerOwnedProperty())\n },\n prependCoborrowerOwnedProperty: () => {\n dispatch(act.PrependCoborrowerOwnedProperty())\n },\n changeOwnedProperty: (t, i, v) => {\n dispatch(act.ChangeOwnedProperty(t, i, v))\n },\n changeBorrowerOwnedProperty: (t, i, v) => {\n dispatch(act.ChangeBorrowerOwnedProperty(t, i, v))\n },\n changeCoborrowerOwnedProperty: (t, i, v) => {\n dispatch(act.ChangeCoborrowerOwnedProperty(t, i, v))\n },\n removeOwnedProperty: (i) => {\n dispatch(act.RemoveOwnedProperty(i))\n },\n removeBorrowerOwnedProperty: (i) => {\n dispatch(act.RemoveBorrowerOwnedProperty(i))\n },\n removeCoborrowerOwnedProperty: (i) => {\n dispatch(act.RemoveCoborrowerOwnedProperty(i))\n },\n clearBorrowerOwnedProperty: (t) => {\n dispatch(act.ClearBorrowerOwnedProperty(t))\n },\n updateChangeLastTouch: (t) => {\n dispatch(UpdateChangeLastTouch(t))\n },\n updateExpenses: (event, who, verb) => {\n dispatch(act.UpdateExpenses(event, who, verb))\n },\n changeBorrowerCheck: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event.target.checked, who, verb))\n },\n})\n\nclass Applicant extends Component {\n constructor(props) {\n super(props)\n\n this.form = React.createRef()\n this.cform = React.createRef()\n\n this.state = {\n selectedalone: props.hascoborrower ? '' : 'selected',\n withcoborrower: props.hascoborrower ? 'selected' : '',\n show: false,\n email: '',\n isValidEmail: true,\n showSelf: false,\n showCashout: false,\n qualify: '',\n additional: '',\n residence: '',\n validated: false,\n loanLimits: {},\n sameAddress: false,\n }\n\n this.radiocoborrower = React.createRef()\n this.homePhoneRef = React.createRef()\n this.mobilePhoneRef = React.createRef()\n this.workPhoneRef = React.createRef()\n this.dob = React.createRef()\n\n if (sessionStorage.getItem('ZeitroA') !== null) {\n const { firstname, lastname } = this.props.application.borrower\n if (firstname === '' && lastname === '') {\n this.getName()\n }\n }\n\n if (this.props.application.firsttimebuyer === null) {\n this.props.updateApplicationAttribute(false, 'firsttimebuyer')\n }\n }\n\n onRef = (ref) => {\n this.dob = ref\n }\n\n getName = async () => {\n try {\n const token = sessionStorage.getItem('ZeitroA')\n const response = await fetch('/auth/getprofile', {\n method: 'GET',\n headers: {\n Authorization: 'Bearer ' + token,\n Cache: 'no-cache',\n 'X-Borrower': this.props.borrowerid,\n },\n })\n\n if (response.status !== 200) {\n console.warn('Looks like there was a problem. Status Code: ' + response.status)\n return\n }\n\n const js = await response.json()\n\n if (js.Status !== 'OK') {\n console.error('Error: ' + js.Text)\n return\n }\n\n // Update borrower info\n this.props.changeBorrowerInfo(\n { target: { value: js.FirstName } },\n 'borrower',\n 'firstname'\n )\n this.props.changeBorrowerInfo(\n { target: { value: js.LastName } },\n 'borrower',\n 'lastname'\n )\n this.props.changeBorrowerInfo(\n { target: { value: js.Email } },\n 'borrower',\n 'email'\n )\n\n } catch (err) {\n console.error('Fetch Error:', err)\n }\n }\n\n updateBorrower = async () => {\n try {\n const token = sessionStorage.getItem('ZeitroA')\n const bo = this.props.application.borrower\n const cb = this.props.application.coborrower\n\n const response = await fetch('/auth/updateborrower', {\n body: JSON.stringify({\n Email: bo.email,\n FirstName: bo.firstname,\n MiddleName: bo.middlename,\n LastName: bo.lastname,\n CoborrowerFirstName: cb.firstname,\n CoborrowerMiddleName: cb.middlename,\n CoborrowerLastName: cb.lastname,\n CoborrowerEmail: cb.email,\n CoborrowerPhone: cb.homephone,\n }),\n method: 'POST',\n headers: {\n Authorization: 'Bearer ' + token,\n Cache: 'no-cache',\n 'X-Borrower': this.props.borrowerid,\n },\n })\n\n if (response.status !== 200) {\n console.warn('Looks like there was a problem. Status Code: ' + response.status)\n return\n }\n } catch (err) {\n console.error('Fetch Error:', err)\n }\n }\n\n updateYears = (value) => {\n com.touch()\n\n const { who } = this.props\n const { previousaddresses } = this.props.application[who]\n\n if (value !== '' && parseInt(value) < 2 && previousaddresses.length === 0) {\n this.props.addPreviousAddress(\n { target: { value: 0 } },\n who\n )\n this.props.changeBorrowerInfo(\n { target: { value: '0' } },\n who,\n 'presentaddressmonths'\n )\n }\n\n if (value !== '' && parseInt(value) >= 2 && previousaddresses.length !== 0) {\n this.props.clearPreviousAddress(\n { target: { value: 0 } },\n who\n )\n }\n\n this.props.changeBorrowerInfo(\n { target: { value } },\n who,\n 'presentaddressyears'\n )\n }\n\n updateMonths = (value) => {\n com.touch()\n\n this.props.changeBorrowerInfo(\n { target: { value } },\n this.props.who,\n 'presentaddressmonths'\n )\n }\n\n componentDidMount() {\n if (this.props.application.hascoborrower === null) {\n this.updateCoborrower({ target: { value: st.HC_Alone } })\n }\n\n this.completion()\n this.setState({ sameAddress: this.hasSameAddress() })\n\n const inputs = document.querySelectorAll('input')\n // Iterate over each input\n inputs.forEach(function (input) {\n // Set autocomplete attribute to off or new-password\n input.setAttribute('autocomplete', 'off')\n if (input.type === 'password') {\n input.setAttribute('autocomplete', 'new-password')\n }\n })\n }\n\n componentDidUpdate() {\n this.completion()\n }\n\n completion = () => {\n const formElements = this.form.current.elements\n if (formElements.length === 0) {\n sessionStorage.setItem('progressValue', 100)\n return\n }\n\n let totalCount = 0\n let fillNum = 0\n for (let i = 0; i < formElements.length; i++) {\n const element = formElements[i]\n if (element.type !== 'button') {\n totalCount++\n if (!isEmpty(element.value)) {\n fillNum++\n }\n }\n }\n\n const progressValue = Math.round((fillNum / totalCount) * 100)\n sessionStorage.setItem('progressValue', progressValue)\n }\n\n hasSameAddress = () => {\n const application = this.props.application\n const borrower = application.borrower\n const coBorrower = application.coborrower\n\n return (\n borrower.presentaddressstreet === coBorrower.presentaddressstreet &&\n borrower.presentaddressstate === coBorrower.presentaddressstate &&\n borrower.presentaddresscounty === coBorrower.presentaddresscounty &&\n borrower.presentaddresscity === coBorrower.presentaddresscity &&\n borrower.presentaddresszip === coBorrower.presentaddresszip\n )\n }\n\n isValidated() {\n if (!this.form.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n\n return true\n }\n\n onFinish = () => {\n const { who } = this.props\n const { hascoborrower } = this.props.application\n const { completedsteps } = this.props.application[who] || {}\n\n if (who === com.coborrower && hascoborrower !== 'withcoborrower') {\n return\n }\n\n if (!completedsteps?.yourinfo) {\n // Mark the step as completed\n this.props.changeBorrowerInfo(\n {\n target: {\n value: { ...completedsteps, yourinfo: true },\n },\n },\n who,\n 'completedsteps'\n )\n }\n }\n\n handleSubmit = (e) => {\n const { who } = this.props\n const { homephone, mobilephone, workphone } = this.props.application[who]\n const phones = [\n { value: homephone, ref: this.homePhoneRef },\n { value: mobilephone, ref: this.mobilePhoneRef },\n { value: workphone, ref: this.workPhoneRef }\n ]\n\n // Check all existing phone numbers\n let isValid = true\n phones.forEach(({ value, ref }) => {\n if (ref.current) {\n if (value && value.length !== 14) {\n ref.current.setCustomValidity('Incorrect phone number format.')\n isValid = false\n } else if (value) {\n ref.current.setCustomValidity('')\n }\n }\n })\n\n if (!isValid) {\n this.setState({ validated: true })\n return false\n }\n\n if (this.form.current.reportValidity() === false) {\n e.preventDefault()\n this.setState({ validated: true })\n return false\n }\n\n const { hascoborrower } = this.props.application\n if (hascoborrower === 'withcoborrower') {\n if (this.cform.current.reportValidity() === false) {\n e.preventDefault()\n e.stopPropagation()\n this.setState({ validated: true })\n return false\n }\n }\n\n const { purpose } = this.props.property\n if (purpose !== st.POL_Purchase && this.props.financingsameproperty) {\n this.props.changeBorrowerInfo(\n { target: { value: st.O_Own } },\n com.borrower,\n 'presentaddressownership'\n )\n }\n\n this.updateBorrower()\n\n return true\n }\n\n chooseBorrower = (event) => {\n com.touch()\n this.radioself.current.checked = true\n this.updateCoborrower({ target: { value: st.HC_Alone } }) // this is a hack\n }\n\n chooseCoborrower = (event) => {\n com.touch()\n this.radiocoborrower.current.checked = true\n this.updateCoborrower({ target: { value: st.HC_Withcoborrower } }) // this is a hack\n }\n\n updateCoborrower = (event) => {\n com.touch()\n\n const eventTargetId = event.target.id\n if (eventTargetId === 'multiple') {\n if (this.props.application.remotecoborrowers.length === 0)\n this.props.addRemoteCoborrower()\n }\n if (eventTargetId === 'withcoborrower') {\n this.updateMarried({ target: { value: 'true' } })\n }\n if (eventTargetId === 'alone') {\n this.updateMarried({ target: { value: 'false' } })\n }\n\n this.props.updateCoborrower(event)\n }\n\n updateCohabiting = (e) => {\n com.touch()\n this.props.updateCohabiting({\n target: { checked: e.target.value === 'true' },\n })\n }\n\n updateMarried = (e) => {\n com.touch()\n this.props.updateApplicationAttribute(\n e.target.value === 'true',\n st.MS_Married\n )\n }\n\n changeMainPropertyAppraisal = (e) => {\n com.touch()\n\n const { purpose } = this.props.property\n if (purpose !== st.POL_Purchase && this.props.financingsameproperty) {\n this.props.changeBorrowerInfo(e, com.borrower, 'marketvalue')\n }\n\n this.props.changeMainPropertyAppraisal(e)\n }\n\n onMarried = (e) => {\n com.touch()\n\n const isCurrentlyCohabiting = this.props.application.cohabiting\n this.props.updateCohabiting({ target: { checked: !isCurrentlyCohabiting } })\n this.props.updateApplicationAttribute(!isCurrentlyCohabiting, st.MS_Married)\n }\n\n updateCoborrowerAssetsUsed = (e) => {\n com.touch()\n\n if (e.target.checked) {\n this.radiocoborrower.current.checked = true\n this.updateCoborrower({ target: { value: 'withcoborrower' } }) // this is a hack\n }\n\n this.props.updateApplicationCheck(e, 'assetsofotherpersonused')\n }\n\n updateCoborrowerLiabilitiesUsed = (e) => {\n com.touch()\n\n if (e.target.checked) {\n this.radiocoborrower.current.checked = true\n this.updateCoborrower({ target: { value: st.HC_Withcoborrower } }) // this is a hack\n }\n\n this.props.updateApplicationCheck(e, 'liabilitiesofotherpersonrequired')\n }\n\n figureOut = () => {\n this.setState({ show: true })\n }\n handleClose = () => {\n this.setState({ show: false })\n }\n handleSelfClose = () => {\n this.setState({ showSelf: false })\n }\n selfEmployedAsessment = () => {\n this.setState({ showSelf: true })\n }\n qualifyForCashout = () => {\n this.setState({ showCashout: true })\n }\n handleCloseCashout = () => {\n this.setState({ showCashout: false })\n }\n\n changeMainPropertyPurpose = (e) => {\n com.touch()\n\n this.props.updateSelectField(new st.ChosenLoan(), 'selectedloan')\n this.props.changeReviewedLoans(0)\n\n if (e.target.value === 'cashoutrefinance') {\n this.setState({ showCashout: true })\n }\n\n if (this.props.property.purpose !== 'purchase') {\n // if change from purpose, clear gifts/insurance\n this.props.clearBorrowerGift()\n this.props.clearBorrowerInsurance()\n }\n\n this.props.changeMainPropertyPurpose(e)\n }\n\n render() {\n const schangeBorrowerInfo = (who, verb) => {\n return event => {\n com.touch()\n this.props.changeBorrowerInfo(\n {\n target: {\n value: event == null ? '' : event,\n },\n },\n who,\n verb\n )\n }\n }\n\n const changeBorrowerInfo = (who, verb) => {\n return event => {\n com.touch()\n this.props.changeBorrowerInfo(event, who, verb)\n }\n }\n\n const changeCoBorrower = (who, verb) => {\n return event => {\n com.touch()\n this.props.changeBorrowerInfo(event, who, verb)\n this.updateCoborrower({\n target: { value: st.HC_Withcoborrower }\n })\n const { hascoborrower, cohabiting } = this.props.application\n if (hascoborrower === st.HC_Withcoborrower && cohabiting === null) {\n this.props.updateCohabiting({\n target: { checked: true },\n })\n }\n }\n }\n\n const handleChangePhoneNumber = (who, verb) => {\n return event => {\n com.touch()\n if (this.homePhoneRef.current) {\n this.homePhoneRef.current.setCustomValidity('')\n }\n if (this.mobilePhoneRef.current) {\n this.mobilePhoneRef.current.setCustomValidity('')\n }\n if (this.workPhoneRef.current) {\n this.workPhoneRef.current.setCustomValidity('')\n }\n const phone = com.fixPhoneInput(event.target.value)\n return this.props.changePhoneInfo(phone, who, verb)\n }\n }\n\n const onQualify = (e) => {\n this.setState({ qualify: e.target.value })\n }\n\n const onAdditional = (e) => {\n this.setState({ additional: e.target.value })\n }\n\n const defDate = new Date()\n defDate.setFullYear(defDate.getFullYear() + 10)\n\n const changeExpiration = (event, who) => {\n com.touch()\n this.expiration.current.setCustomValidity('')\n const date = com.fixDateInput(event.target.value)\n return this.props.changePhoneInfo(date, who, 'visaexpiration')\n }\n\n const Citizenship = (citizenship, visa, visaexpiration) => {\n const isAlien = citizenship === 'alien'\n\n return (\n <>\n \n
\n \n {showDelete && (\n \n Please enter a valid phone number.\n \n
\n \n onDelete(type)}\n >\n Delete\n \n
\n )}\n \n {\n if (!/[0-9-()\\s]/.test(e.key)) {\n e.preventDefault()\n }\n }}\n />\n \n \n {availableTypes.map(phoneType => (\n \n {phoneType.charAt(0).toUpperCase() + phoneType.slice(1)}\n \n ))}\n \n
\n \n \n US Citizen \n Permanent Resident Alien \n Non-Permanent Resident Alien \n \n
\n \n \n {massage(visas, who).map(\n (value, index) => {value} \n )}\n \n
\n \n {\n return (\n current &&\n current.valueOf() < dayjs().startOf('day').valueOf()\n )\n }}\n name=\"dateofbirth\"\n style={{ width: '100%' }}\n onRef={(ref) => { this.expiration = ref }}\n required\n size=\"sm\"\n placeholder=\"MM/DD/YYYY\"\n format=\"MM/DD/YYYY\"\n value={visaexpiration ? dayjs(visaexpiration, 'MM/DD/YYYY') : ''}\n onChange={(e) => {\n changeExpiration(\n {\n target: {\n value: dayjs(e).format('MM/DD/YYYY'),\n },\n },\n who\n )\n }}\n />\n
\n \n { this.expiration = ref }}\n required={citizenship === 'alien' ? true : false}\n placeholder=\"MM/DD/YYYY\"\n name=\"expiration\"\n type=\"text\"\n value={visaexpiration}\n onChange={(e) => {changeExpiration(e, who)}}\n negativefeedback=\"Visa should be valid for at least 90 days.\"\n pattern=\"^(01|02|03|04|05|06|07|08|09|10|11|12)\\/[0-9]{2,2}\\/[1-9][0-9]{3,3}$\"\n />\n
\n \n \n \n \n Do you qualify for cash out refinance?\n \n \n \n \n \n \n \n \n\n \n \n \n When you need to apply with a coborrower:\n \n \n \n \n \n \n \n \n \n\n \n \n Are you self employed? \n \n \n \n \n \n \n \n\n
\n }\n />\n \n \n The borrower must be on the property title for at least 6 months in order to qualify for cash out refinance.\n
\n \n Have you been on the title for more than 6 months?\n
\n \n
\n {qualify === 'yes6month' && (\n \n Yes! Please continue filling out the application\n
\n )}\n {qualify === 'no6month' && (\n \n Does the following apply to you?\n
\n )}\n - \n
- You acquired the property through inheritance, divorce, separation or dissolution of domestic partnership. \n
- Purchased the property using all cash. \n
- Property was under an LLC or under a Trust for a minimum of six months. \n
\n
\n {additional === 'yesapplies' && (\n \n Yes! Please continue filling out the application\n
\n )}\n {additional === 'doesnotapply' && (\n \n Sorry, you can't apply for a cash out loan at this point in time.\n
\n )}\n You only qualify for self employed status if you own 25% of your company or more.
\n {' '}Otherwise you are a salaried employee for the purpose of obtaining a loan.
\n \n
\n \n Please provide your marital status\n
\n \n \n \n \n We hate spam just as much as you do. You won't receive any unwanted calls or texts from us.\n
\n \n \n \n\n {com.getCustomerId() === 'ratedna' && (\n \n \n \n \n Do you qualify for cash out refinance?\n \n \n \n \n \n \n \n \n\n \n \n \n When you need to apply with a coborrower:\n \n \n \n \n \n \n The INCOME or ASSETS of a person other than the Borrower (including the Borrower's spouse) will be used as a basis for loan qualification\n \n \n
\n or\n \n \n
\n \n \n \n \n \n \n\n \n \n Are you self employed? \n \n \n \n \n \n \n \n\n \n\n \n \n Email \n {\n const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/\n if (emailRegex.test(e.target.value)) {\n this.setState({ isValidEmail: true })\n } else {\n this.setState({ isValidEmail: false })\n this.props.changeBorrowerInfo(\n { target: { value: '' } },\n 'coborrower',\n 'email'\n )\n }\n }}\n placeholder=\"Enter your co-applicant's email address\"\n value={email}\n onChange={changeCoBorrower('coborrower', 'email')}\n />\n {!isValidEmail && (\n \n \n
\n\n \n \n \n *Date of birth\n \n\n {\n this.props.changeBorrowerInfoByValue(\n e ? dayjs(new Date(e)).format('MM/DD/YYYY') : '',\n 'coborrower',\n 'dateofbirth'\n )\n }}\n />\n \n \n {Citizenship(citizenship, visa, visaexpiration)}\n
\n \n \n \n *Marital status\n \n If you are in a domestic partnership, single or divorced, select Unmarried\n
\n }\n />\n \n \n The borrower must be on the property title for at least 6 months in order to qualify for cash out refinance.\n
\n \n Have you been on the title for more than 6 months?\n
\n \n
\n {qualify === 'yes6month' && (\n \n Yes! Please continue filling out the application\n
\n )}\n {qualify === 'no6month' && (\n \n Does the following apply to you?\n
\n )}\n - \n
- You acquired the property through inheritance, divorce, separation or dissolution of domestic partnership. \n
- Purchased the property using all cash. \n
- Property was under an LLC or under a Trust for a minimum of six months. \n
\n
\n {additional === 'yesapplies' && (\n \n Yes! Please continue filling out the application{' '}\n
\n )}\n {additional === 'doesnotapply' && (\n \n Sorry, you can't apply for a cash out loan at this point in time.\n
\n )}\n \n Applicants should complete this form as \"Borrower\" or \"Additional Borrower,\" as applicable.\n
\n \n Additional Borrower information must also be provided (and the appropriate box checked) when\n
\n You only qualify for self employed status if you own 25% of your company or more.
\n {' '}Otherwise you are a salaried employee for the purpose of obtaining a loan.
\n \n please enter your co-applicant's vaild email address\n
\n )}\n \n
\n \n We hate spam just as much as you do. You won't receive any unwanted calls or texts from us.\n
\n \n \n \n \n )}\n \n \n )\n }\n\n return null\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps, null, {\n forwardRef: true,\n})(Applicant)\n\nexport class Residence extends Component {\n constructor(props) {\n super(props)\n\n this.formRef = React.createRef()\n\n const borrowerStreet = this.props.application.borrower.presentaddressstreet\n const coBorrowerStreet = this.props.application.coborrower.presentaddressstreet\n this.state = {\n validated: false,\n loanLimits: {},\n tabAvtive: 0,\n sameAddress: borrowerStreet === coBorrowerStreet,\n errMsg: false,\n }\n\n this.fetchLoanLimits()\n }\n\n componentDidMount() {\n this.completion('application')\n this.setState({ sameAddress: this.hasSameAddress() })\n const { who } = this.props\n const { presentaddressmonths } = this.props.application[who]\n if (presentaddressmonths === '') {\n this.props.changeBorrowerInfoByValue(\n '0',\n who,\n 'presentaddressmonths'\n )\n }\n }\n\n componentDidUpdate() {\n this.completion('application')\n }\n\n completion = (stateKey) => {\n const { who } = this.props\n const keysToFilter = [\n `${who}.presentaddressstreet`,\n `${who}.presentaddressstate`,\n `${who}.presentaddresscounty`,\n `${who}.presentaddresscity`,\n `${who}.presentaddresszip`,\n `${who}.presentaddressownership`,\n `${who}.presentaddressyears`,\n ]\n\n const { presentaddressyears } = this.props[stateKey][who]\n if (presentaddressyears !== '' && parseInt(presentaddressyears) < 2) {\n keysToFilter.push(`${who}.presentaddressmonths`)\n }\n\n const filteredObj = keysToFilter.reduce((obj, key) => {\n if (key.includes('.')) {\n const nestedKeys = key.split('.')\n\n let value = this.props[stateKey]\n let nestedKeyString = ''\n for (let i = 0; i < nestedKeys.length - 1; i++) {\n const nestedKey = nestedKeys[i]\n\n if (value.hasOwnProperty(nestedKey)) {\n value = value[nestedKey]\n nestedKeyString += nestedKey + '.'\n } else {\n value = undefined\n break\n }\n }\n\n const lastNestedKey = nestedKeys[nestedKeys.length - 1]\n if (value !== undefined && value.hasOwnProperty(lastNestedKey)) {\n obj[nestedKeyString + lastNestedKey] = value[lastNestedKey]\n }\n } else if (this.props[stateKey].hasOwnProperty(key)) {\n obj[key] = this.props[stateKey][key]\n }\n\n return obj\n }, {})\n\n const emptyNum = Object.keys(filteredObj).filter((key) => {\n const value = filteredObj[key]\n return value === '' || value === null || value === undefined\n }).length\n\n const progressValue = Math.round(\n ((keysToFilter.length - emptyNum) / keysToFilter.length) * 100\n )\n\n sessionStorage.setItem('progressValue', progressValue)\n }\n\n hasSameAddress = () => {\n const { borrower, coborrower } = this.props.application\n return (\n borrower.presentaddressstreet === coborrower.presentaddressstreet &&\n borrower.presentaddressstate === coborrower.presentaddressstate &&\n borrower.presentaddresscounty === coborrower.presentaddresscounty &&\n borrower.presentaddresscity === coborrower.presentaddresscity &&\n borrower.presentaddresszip === coborrower.presentaddresszip\n )\n }\n\n isValidated() {\n if (!this.formRef.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n\n return true\n }\n\n fetchLoanLimits = async () => {\n try {\n const response = await fetch('/data/loanlimits')\n if (!response.ok) {\n throw Error(response.statusText)\n }\n const data = await response.json()\n this.setState({ loanLimits: data })\n } catch (err) {\n console.error(err)\n }\n }\n\n onStreetAddressCompletion = (address, who) => {\n const num = com.getSubaddress(address, 'street_number', 'long_name')\n const city = com.getSubaddress(address, 'locality', 'long_name')\n const zip = com.getSubaddress(address, 'postal_code', 'long_name')\n const county = com.getSubaddress(address, 'administrative_area_level_2', 'long_name')\n const longstate = com.getSubaddress(address, 'administrative_area_level_1', 'long_name')\n\n this.props.changePhoneInfo(city, who, 'presentaddresscity')\n this.props.changePhoneInfo(longstate, who, 'presentaddressstate')\n this.props.changePhoneInfo(zip, who, 'presentaddresszip')\n this.props.changePhoneInfo(county, who, 'presentaddresscounty')\n\n const short = com.getSubaddress(address, 'route', 'short_name')\n const stradd = num + ' ' + short\n this.props.changeBorrowerInfo(\n { target: { value: stradd } },\n who,\n 'presentaddressstreet'\n )\n\n const { presentaddressownership, ownedproperties } = this.props.application[who]\n if (presentaddressownership === st.O_Own && ownedproperties.length >= 1) {\n const changeOwnedProperty = who === com.borrower ? this.props.changeBorrowerOwnedProperty : this.props.changeCoborrowerOwnedProperty\n changeOwnedProperty(stradd, 0, 'address')\n changeOwnedProperty(longstate, 0, 'state')\n changeOwnedProperty(county, 0, 'county')\n changeOwnedProperty(city, 0, 'city')\n changeOwnedProperty(zip, 0, 'zipcode')\n }\n\n const { presentaddressstreet, presentaddressstate, presentaddresszip } = this.props.application.coborrower\n if (who === com.borrower && presentaddressstreet === '' && presentaddressstate === '' && presentaddresszip === '') {\n this.props.changePhoneInfo(city, com.coborrower, 'presentaddresscity')\n this.props.changePhoneInfo(longstate, com.coborrower, 'presentaddressstate')\n this.props.changePhoneInfo(zip, com.coborrower, 'presentaddresszip')\n this.props.changePhoneInfo(county, com.coborrower, 'presentaddresscounty')\n this.props.changePhoneInfo(stradd, com.coborrower, 'presentaddressstreet')\n }\n }\n\n updateMonths = (value) => {\n com.touch()\n\n this.props.changeBorrowerInfo(\n { target: { value } },\n this.props.who,\n 'presentaddressmonths'\n )\n }\n\n updateYears = (value) => {\n com.touch()\n\n const { who } = this.props\n const { previousaddresses } = this.props.application[who]\n if (value !== '' && parseInt(value) < 2 && previousaddresses.length === 0) {\n this.props.addPreviousAddress(\n { target: { value: 0 } },\n who\n )\n this.props.changeBorrowerInfo(\n { target: { value: '0' } },\n who,\n 'presentaddressmonths'\n )\n }\n\n if (value !== '' && parseInt(value) >= 2 && previousaddresses.length !== 0) {\n this.props.clearPreviousAddress(\n { target: { value: 0 } },\n who\n )\n }\n\n this.props.changeBorrowerInfo(\n { target: { value } },\n who,\n 'presentaddressyears'\n )\n }\n\n onFinish = () => {\n const { who } = this.props\n const { completedsteps } = this.props.application[who] || {}\n\n if (!completedsteps?.residence) {\n // Mark the step as completed\n this.props.changeBorrowerInfo(\n {\n target: {\n value: { ...completedsteps, residence: true },\n },\n },\n who,\n 'completedsteps'\n )\n }\n }\n\n handleSubmit = (e) => {\n const { who } = this.props\n const { presentaddressstreet } = this.props.application[who]\n\n // There is no need to validate the address for the co-borrower\n if (who === 'borrower' && presentaddressstreet === '') {\n this.setState({ errMsg: true }, () => {\n // Scroll to the address section\n const addressSection = document.querySelector('#Address')\n if (addressSection) {\n addressSection.scrollIntoView({ behavior: 'smooth' })\n }\n })\n return false\n }\n\n return true\n }\n\n handlePrevious = () => {\n return true\n }\n\n changeTab = (tab) => {\n this.setState(\n { tabAvtive: tab, who: tab === 0 ? com.borrower : com.coborrower },\n () => {\n this.completion('application')\n eventBus.emit('changeProgressValue')\n }\n )\n }\n\n displayPreviousAddress = (address, index) => {\n const { who } = this.props\n\n const achangeAddressInfo = (who, verb) => {\n return (event) =>\n this.props.updatePreviousAddress(\n { target: { value: event } },\n who,\n verb,\n index\n )\n }\n\n const changeAddressInfo = (who, verb) => {\n return (event) => {this.props.updatePreviousAddress({ target: { value: verb === 'state' ? event : event.target.value } }, who, verb, index)}\n }\n\n const onPreviousStreetAddressCompletion = (address) => {\n const city = com.getSubaddress(address, 'locality', 'long_name')\n const state = com.getSubaddress(address, 'administrative_area_level_1', 'long_name')\n const county = com.getSubaddress(address, 'administrative_area_level_2', 'long_name')\n\n let zip = com.getSubaddress(address, 'postal_code', 'long_name')\n const zips = com.getSubaddress(address, 'postal_code_suffix', 'short_name')\n if (zips !== '') zip = zip + '-' + zips\n\n const num = com.getSubaddress(address, 'street_number', 'long_name')\n const short = com.getSubaddress(address, 'route', 'short_name')\n const stradd = num + ' ' + short\n\n this.props.updatePreviousAddress(\n { target: { value: stradd } },\n who,\n 'street',\n index\n )\n this.props.updatePreviousAddress(\n { target: { value: city } },\n who,\n 'city',\n index\n )\n this.props.updatePreviousAddress(\n { target: { value: county } },\n who,\n 'county',\n index\n )\n this.props.updatePreviousAddress(\n { target: { value: state } },\n who,\n 'state',\n index\n )\n this.props.updatePreviousAddress(\n { target: { value: zip } },\n who,\n 'zip',\n index\n )\n }\n\n return (\n \n
\n )\n }\n\n displayPreviousAddresses = () => {\n const { who, application } = this.props\n const { presentaddressyears, previousaddresses } = application[who]\n\n if (!presentaddressyears) return <>\n\n if (who === com.borrower && parseInt(presentaddressyears) < 2)\n return previousaddresses.map(this.displayPreviousAddress)\n\n if (who === com.coborrower) {\n const { cohabiting } = application\n const borrowerYears = parseInt(application.borrower.presentaddressyears)\n const coborrowerYears = parseInt(presentaddressyears)\n if (cohabiting) {\n if (borrowerYears < 2)\n return previousaddresses.map(this.displayPreviousAddress)\n } else {\n if (coborrowerYears < 2)\n return previousaddresses.map(this.displayPreviousAddress)\n }\n }\n\n return <>\n }\n\n render() {\n const onAddressChange = (e) => {\n com.touch()\n return this.props.changeBorrowerInfo(e, who, 'presentaddressstreet')\n }\n const onUnitChange = (e) => {\n com.touch()\n return this.props.changeBorrowerInfo(e, who, 'presentaddressunit')\n }\n\n const setLoanState = (v) => {\n this.props.changePhoneInfo(v, who, 'presentaddressstate')\n }\n\n const setLoanCounty = (v) => {\n this.props.changePhoneInfo(v, who, 'presentaddresscounty')\n }\n\n const setLoanCity = (v) => {\n this.props.changePhoneInfo(v, who, 'presentaddresscity')\n }\n\n const setZip = (v) => {\n v = v.replace(/\\D/g, '')\n this.props.changePhoneInfo(v, who, 'presentaddresszip')\n }\n\n const onChangeCheckbox = (e) => {\n this.setState({ sameAddress: e.target.checked })\n if (e.target.checked) {\n const {\n presentaddressstreet,\n presentaddressstate,\n presentaddresscounty,\n presentaddresscity,\n presentaddresszip,\n } = this.props.application.borrower\n\n this.props.changeBorrowerInfo(\n {\n target: {\n value: presentaddressstreet,\n },\n },\n com.coborrower,\n 'presentaddressstreet'\n )\n setLoanState(presentaddressstate, com.coborrower)\n setLoanCounty(presentaddresscounty, com.coborrower)\n setLoanCity(presentaddresscity, com.coborrower)\n setZip(presentaddresszip, com.coborrower)\n } else {\n this.props.removeCoborrowerOwnedProperty(0)\n const { presentaddressownership } = this.props.application.coborrower\n if (presentaddressownership === st.O_Own) {\n this.props.prependCoborrowerOwnedProperty()\n }\n }\n }\n\n const { who } = this.props\n const { sameAddress, validated } = this.state\n\n const {\n presentaddressstreet,\n presentaddressunit,\n presentaddressstate,\n presentaddresscounty,\n presentaddresscity,\n presentaddresszip,\n presentaddressmonths,\n presentaddressyears,\n samemailingaddress,\n mailingaddressstreet,\n mailingaddressunit,\n mailingaddresscounty,\n mailingaddresscity,\n mailingaddressstate,\n mailingaddresszip,\n } = this.props.application[who]\n\n const handleSameMailingAddress = (checked) => {\n com.touch()\n this.props.changeBorrowerCheck(\n { target: { checked } },\n who,\n 'samemailingaddress'\n )\n }\n\n const handleMailingAddressChange = (e) => {\n com.touch()\n return this.props.changeBorrowerInfo(e, who, 'mailingaddressstreet')\n }\n const handleMailingUnitChange = (e) => {\n com.touch()\n return this.props.changeBorrowerInfo(e, who, 'mailingaddressunit')\n }\n const handleMailingStateChange = (v) => {\n this.props.changePhoneInfo(v, who, 'mailingaddressstate')\n }\n\n const handleMailingCountyChange = (v) => {\n this.props.changePhoneInfo(v, who, 'mailingaddresscounty')\n }\n\n const handleMailingCityChange = (v) => {\n this.props.changePhoneInfo(v, who, 'mailingaddresscity')\n }\n\n const handleMailingZipChange = (v) => {\n v = v.replace(/\\D/g, '')\n this.props.changePhoneInfo(v, who, 'mailingaddresszip')\n }\n\n const onMailingAddressCompletion = (address) => {\n const { who } = this.props\n const num = com.getSubaddress(address, 'street_number', 'long_name')\n const city = com.getSubaddress(address, 'locality', 'long_name')\n const zip = com.getSubaddress(address, 'postal_code', 'long_name')\n const county = com.getSubaddress(address, 'administrative_area_level_2', 'long_name')\n const longstate = com.getSubaddress(address, 'administrative_area_level_1', 'long_name')\n\n this.props.changePhoneInfo(city, who, 'mailingaddresscity')\n this.props.changePhoneInfo(longstate, who, 'mailingaddressstate')\n this.props.changePhoneInfo(zip, who, 'mailingaddresszip')\n this.props.changePhoneInfo(county, who, 'mailingaddresscounty')\n\n const short = com.getSubaddress(address, 'route', 'short_name')\n const stradd = num + ' ' + short\n\n this.props.changeBorrowerInfo(\n { target: { value: stradd } },\n who,\n 'mailingaddressstreet'\n )\n }\n\n return (\n \n \n \n \n \n {getStates(this.state.loanLimits).map((x, index) => (\n \n {x.label}\n \n ))}\n \n \n \n \n \n Please provide the city.\n \n \n \n \n \n Please provide the ZIP code.\n \n \n \n \n \n 
No PO Box addresses are accepted\n \n \n \n \n \n Years \n \n \n \n \n \n Months \n \n \n Please provide months.\n \n \n \n \n \n Ownership \n \n \n \n {address.ownership === st.O_Rent && (\n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}\n parser={(value) => value.replace(/\\$\\s?|(,*)/g, '')}\n onChange={achangeAddressInfo(who, 'rent')}\n size=\"large\"\n />\n \n )}\n \n \n
\n
\n No PO Box addresses are accepted\n
\n \n \n \n \n \n \n
\n \n Monthly rent\n
\n \n \n
\n {!(sameAddress && who === com.coborrower) && (\n \n
\n\n {this.displayPreviousAddresses()}\n\n \n handleSameMailingAddress(e.target.checked)}\n checked={samemailingaddress}\n >\n \n Mailing Address is same as my current address\n \n \n\n {!samemailingaddress && (\n
\n {!samemailingaddress && (\n \n
\n )}\n
\n )\n }\n}\n\nResidence = connect(mapStateToProps, mapDispatchToProps, null, {\n forwardRef: true,\n})(Residence)\n","import React, { Component } from \"react\"\nimport { InputNumber, Select } from \"antd\"\nimport 'bootstrap/dist/css/bootstrap.min.css'\n\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport Form from 'react-bootstrap/Form'\nimport * as com from \"../Common.js\"\nimport { Tips } from \"../Common/Tooltip\"\nimport { connect } from 'react-redux'\nimport * as act from \"../Store/actions\"\nimport CheckGroup from '../Common/components/CheckGroup'\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n borrower: state.application.borrower.declarations,\n coborrower: state.application.coborrower.declarations,\n hascoborrower: state.application.hascoborrower,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n changeDeclaration: (event, who, verb) => {\n dispatch(act.ChangeDeclaration(event.target.value, who, verb))\n },\n changeBorrowerInfo: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event, who, verb))\n },\n})\n\nclass Declarations extends Component {\n constructor(props) {\n super(props)\n\n this.form = React.createRef()\n\n this.state = {\n validated: false\n }\n\n this.isValidated = this.isValidated.bind(this)\n this.form = React.createRef()\n }\n\n componentDidMount() { }\n\n componentWillUnmount() { }\n\n onFinish = () => {\n const { who } = this.props\n const { completedsteps } = this.props.application[who] || {}\n\n if (!completedsteps?.propertymoney) {\n this.props.changeBorrowerInfo(\n { ...completedsteps, propertymoney: true },\n who,\n 'completedsteps'\n )\n }\n }\n\n isValidated() {\n if (!this.form.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n return true\n }\n\n render = () => {\n const achangeDeclaration = (verb, who) => {\n return ((event) => {\n const e = {\n target: {\n value: event\n }\n }\n com.touch()\n this.props.changeDeclaration(e, who, verb)\n }\n )\n }\n\n const { who, borrower, coborrower } = this.props\n const { purpose } = this.props.application.property\n\n const occupyAsPrimary = who === com.borrower ? borrower.occupyasprimary : coborrower.occupyasprimary\n const ownershipInterest = who === com.borrower ? borrower.ownershipinterest : coborrower.ownershipinterest\n const propertyOwned = who === com.borrower ? borrower.propertyowned : coborrower.propertyowned\n const familyRelationship = who === com.borrower ? borrower.familyrelationship : coborrower.familyrelationship\n const titleHeld = who === com.borrower ? borrower.titleheld : coborrower.titleheld\n const downPaymentBorrowed = who === com.borrower ? borrower.downpaymentborrowed : coborrower.downpaymentborrowed\n const moneyBorrowed = who === com.borrower ? borrower.moneyborrowed : coborrower.moneyborrowed\n const applyingOnAnother = who === com.borrower ? borrower.applyingonanother : coborrower.applyingonanother\n const applyingNewCredit = who === com.borrower ? borrower.applyingnewcredit : coborrower.applyingnewcredit\n const cleanEnergyLien = who === com.borrower ? borrower.cleanenergylien : coborrower.cleanenergylien\n\n const yesnooptions = [\n { value: 'yes', label: 'Yes' },\n { value: 'no', label: 'No' },\n ]\n\n return (\n \n Personal\n /\n Current Residence\n
\n {who === com.coborrower && (\n \n \n \n Co-borrower has the same address as the primary borrower.\n \n \n
\n )}\n {!(sameAddress && who === com.coborrower) && (\n \n \n \n \n
\n )}\n \n \n \n \n setLoanState(e)}\n >\n {getStates(this.state.loanLimits).map((x, index) => (\n \n {x.label}\n \n ))}\n \n \n \n \n setLoanCounty(e)}\n value={presentaddresscounty}\n >\n {getCounties(this.state.loanLimits, presentaddressstate).map((x, index) => (\n \n {x.label}\n \n ))}\n \n \n \n \n setLoanCity(e.target.value)}\n value={presentaddresscity}\n placeholder=\"City\"\n />\n \n \n \n setZip(e.target.value)}\n value={presentaddresszip}\n placeholder=\"Zip Code\"\n />\n \n \n
\n \n
\n
\n )}\n No PO Box addresses are accepted\n *How long at current address? \n {presentaddressyears !== '' && parseInt(presentaddressyears) < 2 ? (\n \n {this.updateYears(e.target.value)}}\n />\n \n {this.updateMonths(e.target.value > 11 ? 11 : e.target.value)}}\n />\n \n
\n ) : (\n \n {this.updateYears(e.target.value)}}\n />\n \n
\n )}\n
\n \n \n *What's your mailing address \n handleMailingAddressChange(e)}\n goodfeedback=\"\"\n badfeedback=\"Please provide your mailing address.\"\n onCompletion={onMailingAddressCompletion}\n placeholder=\"Street address\"\n />\n \n handleMailingUnitChange(e)}\n />\n \n \n \n handleMailingStateChange(e)}\n >\n {getStates(this.state.loanLimits).map((x, index) => (\n \n {x.label}\n \n ))}\n \n \n \n \n handleMailingCountyChange(e)}\n >\n {getCounties(this.state.loanLimits, mailingaddressstate).map((x, index) => (\n \n {x.label}\n \n ))}\n \n \n \n \n handleMailingCityChange(e.target.value)}\n />\n \n \n \n handleMailingZipChange(e.target.value)}\n />\n \n \n
\n
\n )}\n \n No PO Box addresses are accepted\n \n \n \n Will you occupy the property as your primary residence?\n \n \n \n {\n const e = { target: { value: event } }\n if (event === 'no') {\n this.props.changeDeclaration(e, who, 'ownershipinterest')\n }\n this.props.changeDeclaration(e, who, 'occupyasprimary')\n }}\n type=\"radio\"\n direction=\"horizontal\"\n />\n \n \n
\n \n \n
\n {occupyAsPrimary !== 'yes' ? '' :\n \n \n \n Have you had an ownership interest in another property in the last three years?\n \n \n \n {\n if (occupyAsPrimary === 'no') return\n const e = { target: { value: event } }\n com.touch()\n this.props.changeDeclaration(e, who, 'ownershipinterest')\n }}\n type=\"radio\"\n direction=\"horizontal\"\n />\n \n \n
\n \n \n
\n }\n {occupyAsPrimary === 'yes' &&\n \n \n How did you hold title to the home? \n \n \n
\n
\n \n \n }\n {purpose === \"purchase\" &&\n \n Declarations\n /\n Property and your money for this loan\n
\n\n \n \n \n \n What type of property did you own?\n \n Select FHA Second Home only if your mortgage is an FHA one, and your property was qualified as FHA secondary for this mortgage\n
}\n />\n \n \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 connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Applicant)\n","import React, { Component } from \"react\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport InputGroup from \"react-bootstrap/InputGroup\";\nimport Form from \"react-bootstrap/Form\";\nimport \"./App.css\";\n\nconst timedelta = 200;\n\nexport default class NumericalInput extends Component {\n constructor(props) {\n super(props);\n this.state = {\n noarrow: this.props.noarrow ? this.props.noarrow : false,\n value: this.props.defaultValue,\n minimum: this.props.min,\n maximum: this.props.max,\n step: this.props.step,\n size: this.props.size,\n };\n if (typeof this.state.minimum === \"undefined\") this.state.minimum = 0;\n if (typeof this.state.size === \"undefined\") this.state.size = \"sm\";\n if (typeof this.state.step === \"undefined\") this.state.step = 100;\n this.intervalid = 0;\n this.intervaldirecton = 0;\n\n this.ref = React.createRef();\n }\n componentDidMount() {\n if (this.props.onValid) {\n this.props.onValid(this.ref.current.validity.valid);\n }\n }\n\n componentWillUnmount() {}\n decommaizeNumeric = (v) => {\n let n = v.replace(/[^0-9-]/g, \"\");\n if (n === \"\") return n;\n return parseInt(n);\n };\n commaize = (v) => {\n if (null === v || typeof v === \"undefined\") {\n if (typeof this.state.minimum !== \"undefined\")\n return this.state.minimum.toString();\n return \"\";\n }\n\n v = v.toString();\n let input = v.replace(/[^0-9-]/g, \"\");\n\n if (input === \"\") {\n return \"\";\n }\n\n input = parseInt(input);\n input = input.toString();\n let output = \"\";\n for (;;) {\n if (input.length <= 3) {\n output = input + output;\n break;\n }\n let right = input.substr(-3);\n let left = input.substr(0, input.length - 3);\n input = left;\n output = \",\" + right + output;\n }\n return output;\n };\n onChange = (e) => {\n let v = e.target.value;\n e.target.value = this.commaize(v);\n let value = this.decommaizeNumeric(v).toString();\n\n this.props.onChange({ target: { value: value } });\n if (this.props.onValid) {\n this.props.onValid(this.ref.current.validity.valid);\n }\n };\n onBlur = (e) => {\n if (this.props.onValid) {\n this.props.onValid(this.ref.current.validity.valid);\n }\n\n let v = this.decommaizeNumeric(e.target.value);\n if (isNaN(v) || e.target.value === \"\") {\n v = \"\";\n if (\"undefined\" !== typeof this.props.onBlur)\n this.props.onBlur({ target: { value: \"\" } });\n return;\n }\n\n v = this.limit(v).toString();\n\n e.target.value = this.commaize(v);\n let value = this.decommaizeNumeric(v);\n\n if (!this.props.onBlur) return;\n\n this.props.onBlur({ target: { value: value } });\n };\n limit = (v) => {\n if (typeof this.state.minimum !== \"undefined\" && v < this.state.minimum)\n v = this.state.minimum;\n if (typeof this.state.maximum !== \"undefined\" && v > this.state.maximum)\n v = this.state.maximum;\n return v;\n };\n up = (e) => {\n let fs = window.document.getElementsByTagName(\"fieldset\");\n\n if (fs.length > 0 && fs[0].disabled) return;\n\n let val = this.limit(\n this.decommaizeNumeric(this.ref.current.value) + this.state.step\n );\n this.ref.current.value = this.commaize(val);\n\n if (this.ref.current.value === \"\") {\n if (typeof this.state.minimum !== \"undefined\")\n this.ref.current.value = this.state.minimum;\n else this.ref.current.value = 0;\n }\n this.props.onChange({ target: { value: val.toString() } });\n };\n down = (e) => {\n let fs = window.document.getElementsByTagName(\"fieldset\");\n if (fs.length > 0 && fs[0].disabled) return;\n\n let val = this.limit(\n this.decommaizeNumeric(this.ref.current.value) - this.state.step\n );\n this.ref.current.value = this.commaize(val);\n if (this.ref.current.value === \"\") {\n if (typeof this.state.maximum !== \"undefined\")\n this.ref.current.value = this.state.maximum;\n else this.ref.current.value = 0;\n }\n\n this.props.onChange({ target: { value: val.toString() } });\n };\n downUp = (e) => {\n this.intervalid = window.setInterval(this.up, timedelta);\n };\n upUp = (e) => {\n window.clearInterval(this.intervalid);\n };\n downDown = (e) => {\n this.intervalid = window.setInterval(this.down, timedelta);\n };\n upDown = (e) => {\n window.clearInterval(this.intervalid);\n };\n render() {\n let toexpand = {};\n if (\"undefined\" !== typeof this.props.defaultValue) {\n toexpand[\"defaultValue\"] = this.commaize(this.props.defaultValue);\n }\n if (\"undefined\" !== typeof this.props.value) {\n toexpand[\"value\"] = this.commaize(this.props.value);\n }\n const childClassName = `${this.props.className} react-numeric-input w-100`\n return (\n \n \n
\n \n \n \n \n \n \n \n
\n \n this.setState({ show: false })}\n >\n \n \n Please specify asset allocation in your portfolio:\n \n \n \n \n \n \n \n Stocks:\n \n \n \n \n %\n \n \n \n \n Please provide the name of the bank/credit union.\n \n \n \n \n \n \n Bonds:\n \n \n \n \n %\n \n \n \n \n Please provide the name of the bank/credit union.\n \n \n \n \n \n \n Cash:\n \n
\n\n {' '}\n {this.state.cash.toFixed(2)}%\n \n \n \n
\n \n
\n \n \n \n \n \n\n this.setState({ show: true })}\n required\n className=\"zeitro-radio obutton text-left pr-3\"\n variant=\"outline-primary\"\n >\n
\n )\n }\n}\n\nconnect(mapStateToPropsA, mapDispatchToPropsA, null, {\n forwardRef: true,\n})(Allocation)\n\nconst mapStateToProps = (state) => {\n return {\n finances: state.application.borrower.finances,\n application: state.application,\n borrower: state.application.borrower.declarations,\n coborrower: state.application.coborrower.declarations,\n hascoborrower: state.application.hascoborrower,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateJointly: (event) => {\n dispatch(act.UpdateJointly(event.target.checked))\n },\n updateFinances: (event, who, verb) => {\n dispatch(act.UpdateFinances(event.target.value, who, verb))\n },\n clearBorrowerBankAccounts: (index, who) => {\n dispatch(act.ClearBorrowerBankAccounts(index, who))\n },\n addBorrowerBankAccount: (i, who) => {\n dispatch(act.AddBorrowerBankAccount(i, who))\n },\n clearBorrowerBrokerAccounts: (index, who) => {\n dispatch(act.ClearBorrowerBrokerAccounts(index, who))\n },\n addBorrowerBrokerAccount: (i, who) => {\n dispatch(act.AddBorrowerBrokerAccount(i, who))\n },\n removeBorrowerBrokerAccount: (index, who) => {\n dispatch(act.RemoveBorrowerBrokerAccount(index, who))\n },\n changeBorrowerBrokerName: (event, index, who) => {\n dispatch(act.ChangeBorrowerBrokerName(event.target.value, index, who))\n },\n changeBorrowerBrokerAccount: (event, index, who) => {\n dispatch(\n act.ChangeBorrowerBrokerAccount(event.target.value, index, who)\n )\n },\n changeBorrowerBrokerBalance: (event, index, who) => {\n dispatch(\n act.ChangeBorrowerBrokerBalance(event.target.value, index, who)\n )\n },\n changeBorrowerBrokerAttribution: (event, index, who) => {\n dispatch(\n act.ChangeBorrowerBrokerAttribution(event.target.value, index, who)\n )\n },\n changeBorrowerBrokerTaxStatus: (event, index, who) => {\n dispatch(\n act.ChangeBorrowerBrokerTaxStatus(event.target.value, index, who)\n )\n },\n changeBorrowerBrokerAllocation: (value, index, who) => {\n dispatch(act.ChangeBorrowerBrokerAllocation(value, index, who))\n },\n changeDeclaration: (event, who, verb) => {\n dispatch(act.ChangeDeclaration(event, who, verb))\n },\n changeBorrowerInfo: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event, who, verb))\n },\n updateEqualOpportunity: (value, who, verb) => {\n dispatch(act.UpdateEqualOpportunity(value, who, verb))\n },\n updateEqualOpportunitySub: (value, who, section, verb) => {\n dispatch(act.UpdateEqualOpportunitySub(value, who, section, verb))\n },\n})\n\nclass Finances extends Component {\n constructor(props) {\n super(props)\n\n this.formRef = React.createRef()\n\n this.state = {\n validated: false,\n totalAssets: 0,\n }\n\n this.isValidated = this.isValidated.bind(this)\n\n const { who } = this.props\n const { brokerages, accounts } = this.props.application.assetsandliabilities\n if (typeof brokerages === undefined)\n this.props.application.assetsandliabilities.brokerages = []\n\n if (accounts === null) {\n this.props.clearBorrowerBankAccounts(0, who)\n }\n\n if (brokerages === null) {\n this.props.clearBorrowerBrokerAccounts(0, who)\n }\n\n const { currentStatus, hascoborrower } = this.props.application\n // Change button text \"Next\" button to \"Submit\"\n if (currentStatus === 'ApplicationStarted') {\n const { who } = this.props\n const { completedsteps } = this.props.application[who]\n // Omit finances from completed steps because it is not set yet\n const shouldSubmit = every(omit(completedsteps, ['finances']), (step) => step === true)\n if (shouldSubmit) {\n if (who === com.borrower) {\n if (hascoborrower !== 'withcoborrower') {\n this.props.changeContinueButtonText('Submit')\n } else {\n const coborrowerCompleted = every(this.props.application[com.coborrower].completedsteps, (step) => step === true)\n if (coborrowerCompleted) {\n this.props.changeContinueButtonText('Submit')\n }\n }\n }\n if (who === com.coborrower) {\n const borrowerCompleted = every(this.props.application[com.borrower].completedsteps, (step) => step === true)\n if (borrowerCompleted) {\n this.props.changeContinueButtonText('Submit')\n }\n }\n }\n }\n }\n\n recalcAssets = () => {\n //setTimeout( () => this.setState({totalAssets: this.calculateAssets()}), 100)\n this.calculateAssets()\n }\n\n componentDidMount() {\n this.recalcAssets()\n setTimeout(() => {\n this.completion()\n }, 100)\n }\n\n componentDidUpdate(prevProps) {\n this.completion()\n }\n\n componentWillUnmount() { }\n\n onFinish = () => {\n const { who } = this.props\n const { completedsteps } = this.props.application[who] || {}\n\n if (!completedsteps?.finances) {\n this.props.changeBorrowerInfo(\n { ...completedsteps, finances: true },\n who,\n 'completedsteps'\n )\n }\n }\n\n isValidated() {\n if (!this.form.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n\n return true\n }\n\n completion = () => {\n const form = this.props.self.current\n const formElements = form?.elements\n if (formElements && formElements.length !== 0) {\n let totalCount = 2\n let fillNum = 2\n for (let i = 0; i < formElements.length; i++) {\n const element = formElements[i]\n if (\n element.type !== 'button' &&\n element.type !== 'fieldset' &&\n element.type !== 'submit'\n ) {\n totalCount++\n if (!isEmpty(element.value)) {\n fillNum++\n }\n }\n }\n\n // Define declaration fields to check\n const declarationFields = [\n 'comakeronnote',\n 'judgements',\n 'delinquentondebt',\n 'lawsuit',\n 'conveyedtitle',\n 'loanforeclosure',\n 'propertyforeclosure',\n 'loansinforebearance',\n 'bancrupt'\n ]\n\n // Create borrower declarations object using field list\n const borrowerDeclarations = declarationFields.reduce((acc, field) => {\n acc[field] = this.props.borrower[field]\n return acc\n }, {})\n\n // Create co-borrower declarations if needed\n const coborrowerDeclarations = this.props.hascoborrower !== 'alone'\n ? declarationFields.reduce((acc, field) => {\n acc[`co${field.charAt(0).toUpperCase()}${field.slice(1)}`] = this.props.coborrower[field]\n return acc\n }, {})\n : {}\n\n // Merge declarations\n const mergedObj = { ...borrowerDeclarations, ...coborrowerDeclarations }\n\n const emptyNum = Object.keys(mergedObj).filter((key) => {\n const value = mergedObj[key]\n return value === '' || value === null || value === undefined\n }).length\n totalCount = totalCount + Object.keys(mergedObj).length\n fillNum = fillNum + Object.keys(mergedObj).length - emptyNum\n const progressValue = Math.round((fillNum / totalCount) * 100)\n sessionStorage.setItem('progressValue', progressValue)\n }\n }\n\n processBrokerages = (val, index) => {\n if (null === val) return ''\n\n const { bankname, account, key, balance, attribution, isretirement } = val\n return this.generateBrokerAccount(\n index,\n bankname,\n account,\n balance,\n attribution,\n isretirement,\n key\n )\n }\n\n generateBrokerAccount = (index, brokername, account, balance, attribution, isretirement, key) => {\n index = parseInt(index)\n\n const { who } = this.props\n\n const removeBorrowerBrokerAccount = (event) => {\n com.touch()\n this.props.removeBorrowerBrokerAccount(index, who)\n }\n const updateBroker = (event) => {\n com.touch()\n this.props.changeBorrowerBrokerName(event, index, who)\n }\n const updateAccount = (event) => {\n com.touch()\n this.props.changeBorrowerBrokerAccount(event, index, who)\n }\n const changeBorrowerBrokerBalance = (event) => {\n com.touch()\n this.props.changeBorrowerBrokerBalance(event, index, who)\n }\n const addBorrowerBrokerAccount = (event) => {\n com.touch()\n return this.props.addBorrowerBrokerAccount(event, who)\n }\n\n const changeAttribution = (event) => {\n com.touch()\n this.props.changeBorrowerBrokerAttribution(\n event,\n index,\n who\n )\n }\n const changeTaxStatus = (event) => {\n com.touch()\n const val = event.target.checked\n this.props.changeBorrowerBrokerTaxStatus(\n { target: { value: val } },\n index,\n who\n )\n }\n\n const amountName = () => {\n return isretirement ? (\n \n
\n \n \n \n \n Institution\n \n \n Please provide the name of the bank/credit union.\n \n \n \n \n \n Account\n \n \n Please provide account number.\n \n \n \n \n {amountName()}\n \n Please provide account balance.\n \n \n \n \n \n
\n \n {hascoborrower === 'withcoborrower' && married && (\n \n \n changeBorrowerBrokerBalance(\n e.target.value < 1 ? { target: { value: 1 } } : e\n )\n }\n />\n
\n \n \n
\n \n \n Check if this is a retirement account{' '}\n \n If this is a retirement account (401K, IRA, SEP, Keogh, Annuities) choose Retirement, and specify only the vested account. Otherwise, choose Regular.\n
\n }\n placement=\"bottom\"\n title=\"Retirement\"\n />\n Ownership
\n \n \n {\n this.props.changeDeclaration(e.target.checked, who, 'chapter7')\n }}\n >\n chapter7\n \n \n \n \n {\n this.props.changeDeclaration(e.target.checked, who, 'chapter11')\n }}\n >\n chapter11\n \n \n \n \n {\n this.props.changeDeclaration(e.target.checked, who, 'chapter12')\n }}\n >\n chapter12\n \n \n \n \n {\n this.props.changeDeclaration(e.target.checked, who, 'chapter13')\n }}\n >\n chapter13\n \n \n \n \n )}\n\n \n \n \n Did you (or your deceased spouse) ever serve, or are you currently serving, in the United States Armed Forces?\n \n \n \n \n \n
\n \n \n
\n {servearmedforces === 'yes' && (\n <>\n \n \n Currently serving on active duty with projected expiration date of service/tour\n \n \n \n {militaryservice.currentlyserving && (\n <>\n \n {\n com.touch();\n const m = { ...militaryservice };\n m.projectedexpirationdate = date ? date.format('MM/DD/YYYY') : '';\n this.props.changeDeclaration(m, who, 'militaryservice');\n }}\n style={{ \n height: '36px'\n }}\n />\n \n \n \n )}\n \n \n Currently retired, discharged, or separated from service\n \n \n \n \n \n Only period of service was as a non-activated member of the Reserve or National Guard\n \n \n \n \n \n Surviving spouse\n \n \n \n \n )}\n\n \n Ethnicity \n \n \n \n \n I do not wish to provide this information\n \n \n \n\n \n Sex \n \n \n \n \n I do not wish to provide this information\n \n \n \n\n \n Race \n \n \n \n \n I do not wish to provide this information\n \n \n \n\n {race.notfurnished ? <> :\n <>\n \n \n \n \n {race.pacific && (\n <>\n \n \n \n \n \n )}\n \n \n {race.americanindian && (\n \n \n )}\n \n \n {race.asian && (\n <>\n \n \n \n \n \n \n \n )}\n \n }\n
\n )\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps, null, {\n forwardRef: true,\n})(Finances)\n\nconst mapStateToPropsStocks = (state) => {\n return {\n finances: state.application.borrower.finances,\n application: state.application,\n borrower: state.application.borrower.declarations,\n coborrower: state.application.coborrower.declarations,\n hascoborrower: state.application.hascoborrower,\n }\n}\n\nconst mapDispatchToPropsStocks = (dispatch) => ({\n updateFinances: (event, who, verb) => {\n dispatch(act.UpdateFinances(event.target.value, who, verb))\n },\n addBorrowerOtherAsset: (event, who) => {\n dispatch(act.AddBorrowerOtherAsset(event, who))\n },\n removeBorrowerOtherAsset: (event, index, who) => {\n dispatch(act.RemoveBorrowerOtherAsset(index, who))\n },\n clearBorrowerOtherAssets: (event, who) => {\n dispatch(act.ClearBorrowerOtherAssets(event, who))\n },\n changeBorrowerOtherAssetName: (event, index, who) => {\n dispatch(\n act.ChangeBorrowerOtherAssetName(event.target.value, index, who)\n )\n },\n changeBorrowerOtherAssetValue: (event, index, who) => {\n dispatch(act.ChangeBorrowerOtherAssetValue(event, index, who))\n },\n changeBorrowerOtherAssetAttribution: (event, index) => {\n dispatch(\n act.ChangeBorrowerOtherAssetAttribution(event.target.value, index)\n )\n },\n changeBorrowerOtherAsset: (value, verb, index) => {\n dispatch(act.ChangeBorrowerOtherAsset(value, verb, index))\n },\n changeBorrowerInsuranceValue: (event, index, verb) => {\n dispatch(\n act.ChangeBorrowerInsuranceValue(event.target.value, index, verb)\n )\n },\n clearBorrowerInsurance: () => {\n dispatch(act.ClearBorrowerInsurance())\n },\n removeBorrowerInsurance: (index) => {\n dispatch(act.RemoveBorrowerInsurance(index))\n },\n addBorrowerInsurance: () => {\n dispatch(act.AddBorrowerInsurance())\n },\n addBorrowerGift: () => {\n dispatch(act.AddBorrowerGift())\n },\n removeBorrowerGift: (index) => {\n dispatch(act.RemoveBorrowerGift(index))\n },\n clearBorrowerGift: () => {\n dispatch(act.ClearBorrowerGift())\n },\n updateBorrowerGift: (value, verb, index) => {\n dispatch(act.UpdateBorrowerGift(value, verb, index))\n },\n changeBorrowerInfo: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event, who, verb))\n },\n removeBorrowerBankAccount: (index, who) => {\n dispatch(act.RemoveBorrowerBankAccount(index, who))\n },\n changeBorrowerBankName: (event, index, who) => {\n dispatch(act.ChangeBorrowerBankName(event.target.value, index, who))\n },\n changeBorrowerBankAccount: (event, index, who) => {\n dispatch(act.ChangeBorrowerBankAccount(event.target.value, index, who))\n },\n changeBorrowerBankBalance: (event, index, who) => {\n dispatch(act.ChangeBorrowerBankBalance(event, index, who))\n },\n addBorrowerBankAccount: (i, who) => {\n dispatch(act.AddBorrowerBankAccount(i, who))\n },\n changeBorrowerBankAttribution: (event, index, who) => {\n dispatch(\n act.ChangeBorrowerBankAttribution(event.target.value, index, who)\n )\n },\n changeBorrowerBankAccountType: (event, index, who) => {\n dispatch(\n act.ChangeBorrowerBankAccountType(event.target.value, index, who)\n )\n },\n clearBorrowerBankAccounts: (index, who) => {\n dispatch(act.ClearBorrowerBankAccounts(index, who))\n },\n})\n\nexport class MoreFinances extends Component {\n constructor(props) {\n super(props)\n\n this.state = {\n validated: false,\n totalAssets: 0,\n }\n\n this.isValidated = this.isValidated.bind(this)\n this.form = React.createRef()\n this.formRef = React.createRef()\n }\n\n recalcAssets = () => {\n setTimeout(\n () => this.setState({ totalAssets: this.calculateAssets() }),\n 100\n )\n }\n\n componentDidMount() {\n this.recalcAssets()\n\n const { gifts, otherassets } = this.props.application.assetsandliabilities\n if (gifts === null) {\n this.props.clearBorrowerGift()\n }\n if (null === otherassets) {\n this.props.clearBorrowerOtherAssets(0, this.props.who)\n }\n setTimeout(() => {\n this.completion()\n }, 100)\n }\n\n componentDidUpdate(prevProps) {\n this.completion()\n }\n\n componentWillUnmount() {}\n\n completion = () => {\n const form = this.props.self.current\n const formElements = form?.elements\n if (formElements && formElements.length !== 0) {\n let totalCount = 2\n let fillNum = 2\n for (let i = 0; i < formElements.length; i++) {\n const element = formElements[i]\n if (!['button', 'fieldset', 'submit'].includes(element.type)) {\n totalCount++\n if (!isEmpty(element.value)) {\n fillNum++\n }\n }\n }\n const progressValue = Math.round((fillNum / totalCount) * 100)\n sessionStorage.setItem('progressValue', progressValue)\n }\n }\n\n onFinish = () => {\n const { who } = this.props\n const { completedsteps } = this.props.application[who] || {}\n\n if (!completedsteps?.assets) {\n this.props.changeBorrowerInfo(\n { ...completedsteps, assets: true },\n who,\n 'completedsteps'\n )\n }\n }\n\n isValidated() {\n if (!this.form.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n\n return true\n }\n\n updateInsurance = (e) => {\n com.touch()\n\n const val = e.target.value === 'true'\n this.props.updateFinances(\n { target: { value: val } },\n this.props.who,\n 'havelifeinsurance'\n )\n }\n\n calculateAssets = getassets.bind(this)\n\n processInsurance = (val, index) => {\n if (null === val) return ''\n\n const { issuer, netvalue, facevalue, key, attribution } = val\n\n return this.renderInsurance(\n index,\n issuer,\n netvalue,\n facevalue,\n attribution,\n key\n )\n }\n\n renderInsurance(index, issuer, netvalue, facevalue, attribution, key) {\n index = parseInt(index)\n\n const changeBorrowerInsuranceValue = (verb) => {\n return (event) => {\n com.touch()\n this.props.changeBorrowerInsuranceValue(event, index, verb)\n }\n }\n\n const removeBorrowerInsurance = (event) => {\n com.touch()\n this.props.removeBorrowerInsurance(index)\n }\n const addBorrowerInsurance = (event) => {\n com.touch()\n this.props.addBorrowerInsurance()\n }\n\n const { lifeinsurance } = this.props.application.assetsandliabilities\n const { hascoborrower, married } = this.props.application\n\n const borrowerName = `${this.props.application.borrower.firstname} ${this.props.application.borrower.lastname}`\n const coborrowerName = `${this.props.application.coborrower.firstname} ${this.props.application.coborrower.lastname}`\n\n return (\n \n Declarations\n /\n Finances\n
\n\n {declaration(\n 'Are you a co-signer or guarantor on any debt or loan that is not disclosed on this application?',\n 'comakeronnote'\n )}\n {declaration(\n 'Are there any outstanding judgments against you?',\n 'judgements'\n )}\n {declaration(\n 'Are you currently delinquent or in default on a Federal debt?',\n 'delinquentondebt'\n )}\n {declaration(\n 'Are you a party to a lawsuit in which you potentially have any personal financial liability?',\n 'lawsuit'\n )}\n {declaration(\n 'Have you conveyed title to any property in lieu of foreclosure in the past 7 years?',\n 'conveyedtitle'\n )}\n {declaration(\n 'Within the past 7 years, have you completed a pre-foreclosure sale or short sale? whereby the property was sold to a third party and the Lender agreed to accept less than the outstanding mortgage balance due?',\n 'loanforeclosure'\n )}\n {declaration(\n 'Have you had property foreclosed upon in the last 7 years?',\n 'propertyforeclosure'\n )}\n {declaration(\n 'Do you currently have any loans in forebearance?',\n 'loansinforebearance'\n )}\n {declaration(\n 'Have you been declared bankrupt within the past 7 years?',\n 'bancrupt'\n )}\n\n {bancrupt === 'yes' && (\n <>\n \n please Identify the type(s) of bankruptcy:\n
\n Expiration date
\n \n
\n {ethnicity === 'hispanic' && (\n \n \n \n \n \n \n \n \n \n
\n )}\n \n Check one or more
\n Check one or more
\n Check one or more
\n \n \n \n \n \n Issuer:\n \n \n Please provide issuer.\n \n \n \n \n \n Net Value:\n \n \n Please provide your annual income.\n \n \n \n \n \n Face Value:\n \n \n Please provide your annual income.\n \n \n \n {hascoborrower === 'withcoborrower' && married && (\n \n Ownership\n \n \n \n \n \n \n \n \n \n \n )}\n \n \n \n \n \n {' '}\n \n \n \n
\n
\n )\n }\n\n processGifts = (val, index) => {\n const { assettype, deposited, source, attribution, value, key } = val\n return this.renderGifts(index, assettype, deposited, source, attribution, value, key)\n }\n\n renderGifts = (index, assettype, deposited, source, attribution, value, key) => {\n const removeGift = (e) => {\n this.props.removeBorrowerGift(index)\n }\n const addGift = (e) => {\n this.props.addBorrowerGift()\n }\n const achangeGiftValue = (verb) => {\n return (e) => {\n this.props.updateBorrowerGift(e, verb, index)\n }\n }\n const changeGiftAmount = (e) => {\n this.props.updateBorrowerGift(e < 1 ? 1 : e, 'value', index)\n }\n\n const getSourceDescription = () => {\n const { gifts } = this.props.application.assetsandliabilities\n const t = gifts[index].source\n if (t === 'Other') return 'Source'\n\n let help = ''\n com.fundssourcetype.forEach((st) => {\n if (t === st[0]) {\n help = st[2]\n }\n })\n\n if (help === '') return 'Source'\n\n return (\n <>\n Source\n \n
\n )\n }\n\n processAssets = (val, index) => {\n const { description, value, attribution, key } = val\n return this.listOtherAssets(index, description, value, attribution, key)\n }\n\n addOtherAssets = (e) => {\n com.touch()\n const val = e.target.value === 'true'\n if (!val) {\n this.props.clearBorrowerOtherAssets(0, this.props.who)\n } else {\n this.props.addBorrowerOtherAsset(0, this.props.who)\n }\n }\n\n listOtherAssets = (index, description, value, attribution, key) => {\n index = parseInt(index)\n const addBorrowerOtherAsset = (event) => {\n com.touch()\n this.props.addBorrowerOtherAsset(event, this.props.who)\n }\n const removeBorrowerOtherAsset = (event) => {\n com.touch()\n this.props.removeBorrowerOtherAsset(event, index, this.props.who)\n }\n\n const changeBorrowerOtherAssetValue = (event) => {\n com.touch()\n this.props.changeBorrowerOtherAssetValue(\n event,\n index,\n this.props.who\n )\n }\n\n const changeBorrowerOtherAssetAttribution = (event) => {\n com.touch()\n this.props.changeBorrowerOtherAssetAttribution(event, index)\n }\n\n const otherAssetSelect = (event) => {\n com.touch()\n this.props.changeBorrowerOtherAsset(event, 'assettype', index)\n\n let description = ''\n com.otherassetsandcredits.forEach((st) => {\n if (event === st[0]) {\n description = st[1]\n }\n })\n\n if (event === 'Other') {\n this.props.changeBorrowerOtherAsset('', 'description', index)\n } else {\n this.props.changeBorrowerOtherAsset(\n description,\n 'description',\n index\n )\n }\n\n getCurrentState()\n }\n\n const getDescription = () => {\n const { otherassets } = this.props.application.assetsandliabilities\n const t = otherassets[index].assettype\n if (t === 'Other') return 'Asset or Credit Type'\n\n let help = ''\n com.otherassetsandcredits.forEach((st) => {\n if (t === st[0]) {\n help = st[2]\n }\n })\n\n if (help === '') return 'Asset or Credit Type'\n\n return \n \n \n \n \n Asset type\n \n \n \n \n Is deposited?\n \n \n \n \n \n \n {getSourceDescription()}\n \n \n \n \n \n Market value\n \n \n Please provide gift value.\n \n \n \n {hascoborrower === 'withcoborrower' && married && (\n \n Ownership\n \n \n \n\n \n {' '}\n \n
\n
\n \n \n Cash Gift \n Gift of Equity \n Grant \n \n
\n \n changeDeposited(e)}\n >\n Deposited \n Not Deposited \n \n
\n \n { changeGiftSource(e) }}\n style={{ width: '100%', height: 44 }}\n value={gifts[index].sourcedescription || gifts[index].source}\n >\n {com.fundssourcetype.map(\n (st, index) => {\n let desc = st[1]\n if ('' === desc) {\n desc = com.unCamelCase(st[0])\n }\n return (\n {desc} \n )\n }\n )}\n \n
\n \n changeGiftAmount(e)}\n value={gifts[index].value}\n />\n
\n \n changeAttribution({ target: { value: e } })}\n >\n {borrowerName} \n {coborrowerName} \n Joint \n \n
\n \n )}\n \n
\n )\n }\n\n generateAccount = (index, bankname, account, balance, attribution, accounttype, key) => {\n index = parseInt(index)\n\n const removeBorrowerBankAccount = (event) => {\n com.touch()\n this.props.removeBorrowerBankAccount(index, this.props.who)\n }\n const updateBank = (event) => {\n com.touch()\n this.props.changeBorrowerBankName(event, index, this.props.who)\n }\n const updateAccount = (event) => {\n com.touch()\n this.props.changeBorrowerBankAccount(event, index, this.props.who)\n }\n const changeBorrowerBankBalance = (event) => {\n com.touch()\n this.props.changeBorrowerBankBalance(event, index, this.props.who)\n }\n\n const addBorrowerBankAccount = (event) => {\n com.touch()\n return this.props.addBorrowerBankAccount(event, this.props.who)\n }\n\n const changeAttribution = (event) => {\n com.touch()\n this.props.changeBorrowerBankAttribution(\n event,\n index,\n this.props.who\n )\n }\n\n const onSelect = (e) => {\n com.touch()\n this.props.changeBorrowerBankAccountType(\n { target: { value: e } },\n index,\n this.props.who\n )\n }\n\n let at = undefined\n com.bankaccounttypes.forEach((x) => {\n if (x[0] === accounttype) at = x[1]\n })\n\n if (undefined !== at) accounttype = at\n\n const { hascoborrower, married } = this.props.application\n const { accounts } = this.props.application.assetsandliabilities\n\n return (\n \n \n \n \n \n {getDescription()}\n \n \n \n \n \n Value\n \n \n Please provide your middle name.\n \n \n \n {hascoborrower === 'withcoborrower' && married && (\n \n Ownership\n \n \n \n \n \n \n \n \n \n \n )}\n \n \n \n {' '}\n \n
\n
\n \n otherAssetSelect(e)}\n >\n {com.otherassetsandcredits.map(\n (st, index) => {\n return (\n \n {st[1]}\n \n )\n }\n )}\n \n
\n \n \n changeBorrowerOtherAssetValue(e < 1 ? 1 : e)\n }\n onBlur={this.recalcAssets}\n />\n
\n \n
\n )\n }\n\n process = (val, index) => {\n const { bankname, account, key, balance, attribution, accounttype } = val\n return this.generateAccount(index, bankname, account, balance, attribution, accounttype, key)\n }\n\n render() {\n const yesnooptions = [\n { value: 'yes', label: 'Yes' },\n { value: 'no', label: 'No' },\n ]\n\n const { who } = this.props\n const { accounts, gifts, otherassets } = this.props.application.assetsandliabilities\n\n return (\n \n \n \n \n \n Institution\n \n \n Please provide the name of the bank/credit union.\n \n \n \n \n \n Account type\n \n \n \n \n \n Account number\n \n \n Please provide account number.\n \n \n \n \n \n Balance\n \n \n Please provide account balance.\n \n \n \n {hascoborrower === 'withcoborrower' && married && (\n \n Ownership\n \n \n \n \n \n \n \n \n \n \n )}\n \n \n \n {' '}\n \n
\n
\n \n onSelect(e)}\n style={{ height: 44, width: '100%' }}\n value={accounts[index].accounttype}\n >\n {com.bankaccounttypes.map(\n (st, index) => {\n return (\n \n {st[1]}\n \n )\n }\n )}\n \n
\n \n
\n \n \n \n \n \n Would you like to add any financial accounts to your application?\n \n This is only necessary for{' '}asset depletion mortgages, and to ensure you have enough reserves for certain loans.\n
\n }\n placement=\"bottom\"\n title=\"Asset depletion only\"\n />\n \n \n \n Finance\n /\n Assets\n
\n - \n {filteredSuggestions.map((suggestion, index) => {\n let className\n\n // Flag the active suggestion with a class\n if (index === activeSuggestion) {\n className = \"suggestion-active\"\n }\n\n return (\n
\n
\n )\n }\n }\n\n return (\n <>\n\n \n
\n )\n }\n}\n\nexport function calculateEmploymentIncome(app, who) {\n // Get employment info for this person\n const employment = app[who].occupation\n\n // Helper function to calculate monthly income based on payment type\n const calculateMonthlyIncome = (amount, period, hoursPerWeek = null) => {\n const value = parseFloat(amount)\n if (isNaN(value)) return 0\n\n switch (period) {\n case 'monthly':\n return value\n case 'yearly':\n return value / 12\n case 'hourly':\n if (hoursPerWeek === null) return 0\n const hours = parseFloat(hoursPerWeek)\n return isNaN(hours) ? 0 : (value * hours * 52) / 12\n default:\n return 0\n }\n }\n\n // Helper to calculate income from employment object\n const calculateEmploymentIncome = (emp) => {\n if (emp.selfemployed) {\n return calculateMonthlyIncome(emp.incomeorloss, emp.incomeorlossperiod)\n }\n\n // Sum up all income types for regular employment\n const incomeTypes = ['base', 'commissions', 'overtime', 'bonuses', 'military', 'other']\n return incomeTypes.reduce((total, type) => {\n const period = emp.income[type + 'monthly']\n const amount = emp.income[type]\n const hours = type === 'base' ? emp.income[type + 'hoursperweek'] : null\n return total + calculateMonthlyIncome(amount, period, hours)\n }, 0)\n }\n\n let totalIncome = 0\n\n // Only calculate if person is employed\n if (employment.hasoccupation === 'employed') {\n // Add primary employment income\n totalIncome += calculateEmploymentIncome(employment)\n\n // Add other current employment income\n if (app[who].otheroccupations) {\n totalIncome += app[who].otheroccupations.reduce((sum, otherEmp) => {\n return sum + calculateEmploymentIncome(otherEmp)\n }, 0)\n }\n }\n\n return totalIncome\n}\n\nexport function calculateDividendIncome(app, who) {\n let income = 0\n if (app[who].income.hasdividends) {\n let dividends = parseFloat(app[who].income.dividends)\n if (!isNaN(dividends)) {\n switch (app[who].income.dividendsmonthly) {\n case 'monthly': {\n income += dividends\n break\n }\n case 'yearly': {\n income += dividends / 12\n break\n }\n default:\n break\n }\n }\n }\n\n return income\n}\n\nexport function calculateOtherIncome(app, who) {\n let income = 0\n if (app[who].income.otherincome !== null && app[who].income.otherincome.length > 0) {\n app[who].income.otherincome.forEach((inc) => {\n const v = parseFloat(inc.amount)\n if (isNaN(v)) return\n switch (inc.period) {\n case 'monthly': {\n income += v\n break\n }\n case 'yearly': {\n income += v / 12\n break\n }\n default:\n break\n }\n })\n }\n\n return income\n}\n\nexport function calculateIncomeWho(app, who) {\n let income = calculateEmploymentIncome(app, who)\n income += calculateDividendIncome(app, who)\n // income += calculateOtherIncome(app, who)\n\n return income\n}\n\nconst mapStateToPropsDetails = (state) => {\n return {\n application: state.application,\n }\n}\n\nconst mapDispatchToPropsDetails = (dispatch) => ({\n changeNonQMInfo: (event, who, verb) => {\n dispatch(act.ChangeNonQMInfo(event, who, verb))\n },\n updateProduct: (v, verb) => {\n dispatch(act.UpdateProduct(v, verb))\n },\n setBorrowerHasAdditionalIncome: (value, who) => {\n dispatch(act.SetBorrowerHasAdditionalIncome(value, who))\n },\n updateIncomeMonthly: (event, who, verb) => {\n dispatch(act.UpdateIncomeMonthly(event.target.value, who, verb))\n },\n addBorrowerAdditionalIncome: (t, who) => {\n dispatch(act.AddBorrowerAdditionalIncome(t, who))\n },\n removeBorrowerAdditionalIncome: (t, who) => {\n dispatch(act.RemoveBorrowerAdditionalIncome(t, who))\n },\n clearBorrowerAdditionalIncome: (who) => {\n dispatch(act.ClearBorrowerAdditionalIncome(who))\n },\n updateBorrowerAdditionalIncome: (event, who, verb, n) => {\n dispatch(\n act.UpdateBorrowerAdditionalIncome(event.target.value, who, verb, n)\n )\n },\n changeIncomeCheck: (checked, who, verb) => {\n dispatch(act.UpdateIncomeMonthly(checked, who, verb))\n },\n changeCurrentOccupationCheck: (event, who, verb) => {\n dispatch(act.ChangeOccupationInfo(!event.target.checked, who, verb))\n },\n changeCurrentOccupation: (event, who, verb) => {\n dispatch(act.ChangeOccupationInfo(event, who, verb))\n },\n changeOccupationInfo: (event, who, verb) => {\n dispatch(act.ChangeOccupationInfo(event.target.value, who, verb))\n },\n changePhoneInfo: (phone, who, verb) => {\n dispatch(act.ChangeOccupationInfo(phone, who, verb))\n },\n changeOccupationCheck: (event, who, verb) => {\n dispatch(act.ChangeOccupationInfo(event.target.checked, who, verb))\n },\n addAdditionaOccupation: (event, who) => {\n dispatch(act.AddAdditionaOccupation(event, who))\n },\n removeAdditionalOccupation: (event, who, i) => {\n dispatch(act.RemoveAdditionalOccupation(event.target.value, who, i))\n },\n clearAdditionalOccupations: (event, who) => {\n dispatch(act.ClearAdditionalOccupations(event, who))\n },\n changePastOccupationInfo: (event, who, verb, index) => {\n dispatch(\n act.ChangePastOccupationInfo(event.target.value, who, verb, index)\n )\n },\n changePastOccupationDate: (date, who, verb, index) => {\n dispatch(act.ChangePastOccupationInfo(date, who, verb, index))\n },\n changePastOccupationPhone: (phone, who, verb, index) => {\n dispatch(act.ChangePastOccupationInfo(phone, who, verb, index))\n },\n changePastOccupationCheck: (event, who, verb, index) => {\n dispatch(\n act.ChangePastOccupationInfo(event.target.checked, who, verb, index)\n )\n },\n addBorrowerOtherOccupation: (who) => {\n dispatch(act.AddBorrowerOtherOccupation(who))\n },\n removeBorrowerOtherOccupation: (who, index) => {\n dispatch(act.RemoveBorrowerOtherOccupation(who, index))\n },\n clearBorrowerOtherOccupations: (who) => {\n dispatch(act.ClearBorrowerOtherOccupations(who))\n },\n changeBorrowerOtherOccupationValue: (t, i, who, verb) => {\n dispatch(act.ChangeBorrowerOtherOccupationValue(t, i, who, verb))\n },\n changeBorrowerOtherOccupationIncome: (t, i, who, verb) => {\n dispatch(act.ChangeBorrowerOtherOccupationIncome(t, i, who, verb))\n },\n changeMainProperty: (t, verb) => {\n dispatch(act.ChangeMainProperty(t, verb))\n },\n updateIncomeAtttribute: (t, who, verb) => {\n dispatch(act.UpdateIncomeAtttribute(t, who, verb))\n },\n changeBorrowerInfo: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event, who, verb))\n },\n changeDeclaration: (event, who, verb) => {\n dispatch(act.ChangeDeclaration(event, who, verb));\n },\n})\n\nconst getEmploymentType = (app, who) => {\n const e = app[who].occupation.hasoccupation\n const s = app[who].occupation.selfemployed\n\n if (e === 'employed' && s) {\n return 'selfemployed'\n } else if (e === 'employed' && !s) {\n return 'employed'\n }\n\n return e\n}\n\nexport default class Income extends Component {\n constructor(props) {\n super(props)\n\n this.form = React.createRef()\n\n const { who } = this.props\n const { firstname, lastname } = this.props.application[who]\n this.state = {\n isNonQMCustomer: null,\n validated: false,\n showSelf: false,\n isbasevalid: false,\n iscomissionvalid: false,\n isovertimevalid: false,\n isbonusesvalid: false,\n ismilitaryvalid: false,\n isothervalid: false,\n isdividendsvalid: false,\n employmentType: '',\n tabAvtive: 0,\n isotherJob: false,\n showEmploymentModal: false,\n showPreviousEmploymentModal: false,\n who: com.borrower,\n tabs: [\n {\n tab: who === com.borrower ? 'Primary' : 'Co-borrower',\n value: `${firstname} ${lastname}`,\n },\n ],\n isEdit: false,\n hasborrowerTab: true,\n editIndex: -1,\n selfemployed: false,\n employername: '',\n positiontitle: '',\n phone: '',\n yearsatlineofwork: '',\n monthsatlineofwork: '',\n from: '',\n employeraddress: '',\n income: {\n basemonthly: '',\n basehoursperweek: '',\n base: 0,\n overtimemonthly: '',\n overtime: 0,\n bonusesmonthly: '',\n bonuses: 0,\n commissionsmonthly: '',\n commissions: 0,\n militarymonthly: '',\n military: 0,\n othermonthly: '',\n other: 0,\n },\n previousoccupation: {\n employername: '',\n from: '',\n to: '',\n employeraddress: '',\n positiontitle: '',\n income: '',\n incomeperiod: '',\n selfemployed: false,\n employedbyagent: false,\n },\n employedbyagent: false,\n percentownership: '',\n incomeorlossperiod: '',\n incomeorloss: '',\n selfincomedoc: '',\n employed2years: 'false',\n showNoticeModal: false,\n }\n\n this.refsfrom1 = React.createRef()\n this.refsto1 = React.createRef()\n this.refsfrom = []\n this.refsto = []\n\n const { previousoccupations, otheroccupations } = this.props.application[who]\n if (previousoccupations !== null) {\n for (let i = 0; i < previousoccupations.length; i++) {\n this.refsfrom.push(React.createRef())\n this.refsto.push(React.createRef())\n }\n }\n\n this.crefsfrom = []\n if (otheroccupations !== null) {\n for (let i = 0; i < otheroccupations.length; i++) {\n this.crefsfrom.push(React.createRef())\n }\n }\n\n this.isValidated = this.isValidated.bind(this)\n }\n\n getIsNonQMCustomer = () => {\n const token = sessionStorage.getItem('ZeitroA')\n fetch('/borrower/getaccountconfig', {\n method: 'GET',\n headers: {\n Authorization: 'Bearer ' + token,\n },\n }).then((response) => {\n if (response.status !== 200) {\n this.setState({ isNonQMCustomer: false })\n return\n }\n response.json().then((data) => {\n this.setState({ isNonQMCustomer: data.isNonQMCustomer })\n })\n })\n }\n\n componentDidMount() {\n this.getIsNonQMCustomer()\n\n let prevOccupations = this.props.application[this.props.who].previousoccupations\n if (prevOccupations !== null && prevOccupations.length > 0) {\n this.setState({ employed2years: 'true' })\n }\n\n this.setState({\n employmentType: getEmploymentType(\n this.props.application,\n this.props.who\n ),\n })\n\n const { firstname, lastname } = this.props.application.coborrower\n if (this.personalCoborrower()) {\n this.setState((prevState) => ({\n tabs: [\n ...prevState.tabs,\n {\n tab: 'Co-borrower',\n value: `${firstname} ${lastname}`,\n },\n ],\n }))\n }\n\n this.loadExpenses()\n this.completion()\n\n const { who } = this.state\n const { income, otheroccupations, otherincome } = this.props.application[who]\n if (income.hasdividends === null) {\n this.props.updateIncomeAtttribute(false, who, 'hasdividends')\n }\n if (otheroccupations === null) {\n this.props.clearBorrowerOtherOccupations(who)\n }\n if (otherincome === null) {\n this.props.clearBorrowerAdditionalIncome(who)\n }\n }\n\n componentDidUpdate() {\n this.completion()\n }\n\n personalCoborrower = () => {\n const { hascoborrower, married } = this.props.application\n return (\n hascoborrower === 'withcoborrower' ||\n (hascoborrower === 'multiple' && married)\n )\n }\n\n completion = () => {\n const form = this.props.self.current\n const formElements = form?.elements\n if (formElements && formElements.length !== 0) {\n let totalCount = 5\n let fillNum = 5\n if (isEmpty(this.state.employmentType)) {\n fillNum = 4\n }\n for (let i = 0; i < formElements.length; i++) {\n const element = formElements[i]\n if (!['button', 'fieldset', 'submit'].includes(element.type)) {\n totalCount++\n if (!isEmpty(element.value)) {\n fillNum++\n }\n }\n }\n const progressValue = Math.round((fillNum / totalCount) * 100)\n sessionStorage.setItem('progressValue', progressValue)\n }\n }\n\n loadExpenses = () => {\n const token = sessionStorage.getItem('ZeitroA')\n\n fetch('/data/getexpences', {\n method: 'POST',\n headers: {\n Authorization: 'Bearer ' + token,\n Cache: 'no-cache',\n 'Content-Type': 'application/json',\n 'X-Borrower': this.props.borrowerid,\n },\n })\n .then((response) => {\n if (response.status !== 200) {\n console.warn('Bad response, should not happen')\n return\n }\n response.json().then((fees) => {\n const ex = new FutureExpenses()\n ex.otherfinancing = fees.otherfinancing\n ex.homeownersinsurance = fees.hazardinsurance\n ex.realestatetaxes = fees.realestatetaxes\n ex.hoa = fees.dues\n ex.floodinsurance = fees.other\n this.props.changeMainProperty(ex, 'expenses')\n })\n })\n .catch((err) => {\n this.setState({ loading: false })\n alert('Network error')\n })\n }\n\n componentWillUnmount() {}\n\n isValidated() {\n if (!this.form.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n\n return true\n }\n\n onBaseAmountValid = (val) => {\n this.setState({ isbasevalid: val })\n }\n onComissionsAmountValid = (val) => {\n this.setState({ iscomissionvalid: val })\n }\n onOvertimeAmountValid = (val) => {\n this.setState({ isovertimevalid: val })\n }\n onBonusesAmountValid = (val) => {\n this.setState({ isbonusesvalid: val })\n }\n onMilitaryAmountValid = (val) => {\n this.setState({ ismilitaryvalid: val })\n }\n onOtherAmountValid = (val) => {\n this.setState({ isothervalid: val })\n }\n onDividendsValid = (val) => {\n this.setState({ isdividendsvalid: val })\n }\n\n canShowDividends = () => {\n const { who } = this.props\n const { hasoccupation } = this.props.application[who].occupation\n\n if (hasoccupation === null)\n return false\n\n if (hasoccupation !== 'employed')\n return true\n\n const { isbasevalid, iscomissionvalid, isbonusesvalid, isovertimevalid } = this.state\n const { hasbonuses } = this.props.application[who].income\n if (isbasevalid && hasbonuses === false)\n return true\n\n if (isbasevalid && hasbonuses === true && iscomissionvalid && isovertimevalid && isbonusesvalid)\n return true\n\n return false\n }\n\n PreviousEmploymentForm = () => {\n const achangePastOccupationDate = (event, who, verb) => {\n com.touch()\n\n this.setState({\n previousoccupation: {\n ...this.state.previousoccupation,\n [verb]: event ? dayjs(dayjs(event).format('MM/DD/YYYY')) : null,\n },\n })\n }\n\n const changePastOccupationCheck = (verb) => {\n return (event) => {\n com.touch()\n\n const { employmentType } = this.state\n if (\n event.target.checked &&\n verb === 'selfemployed' &&\n employmentType !== 'unemployed' &&\n employmentType !== 'retired'\n ) {\n this.setState({ showSelf: true, currentJob: false })\n }\n\n this.setState({\n previousoccupation: {\n ...this.state.previousoccupation,\n [verb]: event.target.checked,\n },\n })\n }\n }\n\n const { who } = this.props\n const { previousoccupation, employmentType } = this.state\n\n return (\n \n {/* Dollar Sign and Input Field Group */}\n \n Yearly \n Monthly \n \n
\n \n $\n
\n\n {/* Divider */}\n \n\n {/* Period Select */}\n \n \n \n \n \n *Are you the business owner or self-employed?\n \n {\n com.touch()\n\n if (e === 'yes' && employmentType !== 'unemployed' && employmentType !== 'retired') {\n this.setState({ showSelf: true, currentJob: false })\n }\n\n this.setState({\n previousoccupation: {\n ...previousoccupation,\n selfemployed: e === 'yes',\n },\n })\n }}\n value={previousoccupation.selfemployed ? 'yes' : 'no'}\n type=\"radio\"\n direction=\"horizontal\"\n required={true}\n />\n \n \n \n \n \n \n Employer\n \n {\n this.setState({\n previousoccupation: {\n ...previousoccupation,\n employername: e.target.value,\n },\n })\n }}\n />\n \n Provide employer.\n \n \n \n {\n this.setState({\n previousoccupation: {\n ...previousoccupation,\n positiontitle: e.target.value,\n },\n })\n }}\n />\n \n \n \n {\n this.setState({\n previousoccupation: {\n ...previousoccupation,\n employeraddress: e.target.value,\n },\n })\n }}\n pattern=\"^[0-9]+\\s[\\p{L}\\p{N} !:,&()'?#+\\/@-]+$\"\n placeholder=\"Enter employer address\"\n goodfeedback=\"\"\n badfeedback=\"Please provide address.\"\n />\n \n \n \n \n \n Start date\n \n \n \n \n \n End date\n \n \n achangePastOccupationDate(\n e,\n who,\n 'to'\n )\n }\n />\n \n \n \n \n Total income\n \n {\n const inputValue = e.target.value\n if (inputValue.length > 0) {\n this.setState({\n previousoccupation: {\n ...previousoccupation,\n income: inputValue,\n },\n })\n } else {\n this.setState({\n previousoccupation: {\n ...previousoccupation,\n income: 0,\n },\n })\n }\n }}\n onPeriodChange={(period) => {\n this.setState({\n previousoccupation: {\n ...previousoccupation,\n incomeperiod: period,\n }\n })\n }}\n required\n />\n \n \n \n \n \n \n \n \n \n
\n
\n )\n }\n\n EmploymentForm = () => {\n const ondocs = (e) => {\n this.setState({ selfincomedoc: e.target.value })\n }\n\n let key = null\n\n const {\n income,\n employername,\n positiontitle,\n phone,\n from,\n employeraddress,\n selfemployed,\n percentownership,\n incomeorlossperiod,\n incomeorloss,\n selfincomedoc,\n employedbyagent,\n } = this.state\n\n const IncomeType = (commissions) => {\n return (\n \n \n achangePastOccupationDate(\n e,\n who,\n 'from'\n )\n }\n />\n
\n \n \n \n {commissions === 'base' ? '*' : ''}\n {com.capitalize(commissions)}\n \n
\n \n \n {\n this.setState({\n income: {\n ...income,\n [commissions]: e,\n },\n })\n }}\n />\n {\n this.setState({\n income: {\n ...income,\n [commissions + 'monthly']: e,\n },\n })\n }}\n >\n Monthly \n Yearly \n \n \n
\n \n \n {income[commissions + 'monthly'] === 'hourly' && (\n \n \n Hours Per Week:\n \n\n {\n this.setState({\n income: {\n ...income,\n [commissions + 'hoursperweek']: e.target.value,\n },\n })\n }}\n />\n\n \n Please provide overtime income.\n \n \n )}\n
\n \n )\n }\n\n return (\n \n \n \n \n \n *Employer\n \n {\n this.setState({\n employername: e.target.value,\n })\n }}\n />\n \n Provide employer.\n \n \n \n \n {\n this.setState({\n positiontitle: e.target.value,\n })\n }}\n />\n \n
\n \n \n \n \n \n *Phone number\n \n Specify the HR/Personnel or hiring manager phone number to verify employment.\n
\n }\n />\n \n \n {\n this.setState({\n from: date ? dayjs(date.format('MM/DD/YYYY')) : null\n })\n }}\n />\n
\n \n \n \n {IncomeType('base')}\n {IncomeType('commissions')}\n
\n \n
\n \n \n {IncomeType('overtime')}\n {IncomeType('bonuses')}\n
\n \n
\n \n \n {IncomeType('military')}\n {IncomeType('other')}\n
\n \n
\n
\n )}\n {selfemployed === true && (\n <>\n \n {\n if (e.target.value > 100) {\n this.setState({\n percentownership: 100,\n })\n } else {\n this.setState({\n percentownership:\n e.target.value.replaceAll(\n '.',\n ''\n ),\n })\n }\n }}\n pattern=\"^[0-9.]+$\"\n value={percentownership}\n />\n
\n \n {\n this.setState({\n incomeorlossperiod: e,\n })\n }}\n >\n \n Monthly\n \n \n Yearly\n \n \n
\n \n \n \n {\n this.setState({\n incomeorloss:\n e.target.value,\n })\n }}\n />\n
\n \n $\n
\n \n \n \n \n \n Schedule C\n \n \n \n Schedule F\n \n \n \n 1065 Partnership Return\n \n \n \n 1120S for S Corp\n \n \n \n 1120 for C Corp\n \n \n \n
\n ) : (\n \n \n \n \n \n W2/Paystubs\n \n \n \n Schedule K1\n \n \n \n
\n )}\n \n )}\n \n \n \n \n Period: \n \n Monthly \n Yearly \n \n \n \n \n \n {showDescription()}\n \n \n \n {' '}\n {com.othersouresofincome.map(\n (st) => (\n \n {st[1]}\n \n )\n )}\n \n \n Please describe the source of\n income.\n \n \n \n \n \n \n Amount\n \n \n Please provide income.\n \n \n \n \n \n \n {' '}\n \n \n \n
\n
\n )\n }\n\n render = () => {\n const { who } = this.props\n const { employername, positiontitle, phone, from, employeraddress, income } = this.props.application[who].occupation\n const fieldOccupation = employername === '' || positiontitle === '' || phone === '' || from === '' || employeraddress === '' || income.base === ''\n\n const changeEmploymentTypes = (e, who) => {\n this.setState({ employmentType: e })\n com.touch()\n\n switch (e) {\n case 'employed':\n this.props.changeCurrentOccupation(e, who, 'hasoccupation')\n this.props.changeCurrentOccupationCheck(\n { target: { checked: true } },\n who,\n 'selfemployed'\n )\n setTimeout(() => {\n if (fieldOccupation) {\n this.editEmployment(0)\n }\n }, 200)\n break\n case 'selfemployed':\n this.props.changeCurrentOccupation(\n 'employed',\n who,\n 'hasoccupation'\n )\n this.props.changeCurrentOccupationCheck(\n { target: { checked: false } },\n who,\n 'selfemployed'\n )\n this.setState({ showSelf: true })\n break\n case 'unemployed':\n case 'retired':\n this.props.changeCurrentOccupationCheck(\n { target: { checked: true } },\n who,\n 'selfemployed'\n )\n this.props.changeCurrentOccupation(e, who, 'hasoccupation')\n break\n default:\n break\n }\n }\n\n const getPreviousOccupation = (who) => {\n const previousOccupations = this.props.application[who]?.previousoccupations\n if (!previousOccupations || !previousOccupations[0]) {\n return {\n employername: '',\n from: '',\n to: '',\n positiontitle: '',\n income: '',\n incomeperiod: ''\n }\n }\n return previousOccupations[0]\n }\n\n const changePreviousJob = (e) => {\n this.setState({ employed2years: e })\n if (e === 'true') {\n addAdditionaOccupation(e, who)\n const { employername, from, to, positiontitle, income, incomeperiod } = getPreviousOccupation(who)\n setTimeout(() => {\n const fieldOccupation =\n employername === '' ||\n from === '' ||\n to === '' ||\n positiontitle === '' ||\n income === '' ||\n incomeperiod === ''\n\n if (fieldOccupation) {\n editPreviousEmployment(0)\n }\n }, 200)\n } else {\n clearAdditionalOccupations(e, who)\n }\n }\n\n const addAdditionaOccupation = (event, who) => {\n com.touch()\n const reffrom = React.createRef()\n const refto = React.createRef()\n this.refsfrom.push(reffrom)\n this.refsto.push(refto)\n return this.props.addAdditionaOccupation(event, who)\n }\n\n const clearAdditionalOccupations = (event, who) => {\n com.touch()\n return this.props.clearAdditionalOccupations(event, who)\n }\n\n const formatAmount = (value) => {\n return value ? Number(value).toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, }) : '--'\n }\n\n const formatTaxes = (value) => {\n const obj = {\n schedulec: 'Schedule C',\n schedulef: 'Schedule F',\n f1065: '1065 Partnership Return',\n f1120S: '1120S for S Corp',\n f1120: '1120 for C Corp',\n w2paystub: 'W2/Paystubs',\n schedulek1: 'Schedule K1',\n }\n\n return obj[value]\n }\n\n const getEmploymentList = () => {\n const { otheroccupations, occupation } = this.props.application[this.props.who]\n const otherOccupations = otheroccupations && otheroccupations.length > 0 ? otheroccupations : []\n const occupations = [\n ...[occupation],\n ...otherOccupations,\n ]\n\n return occupations.map((obj) => [\n {\n label: 'Employer',\n value: obj.employername ? obj.employername : '--',\n show: true,\n },\n {\n label: 'Position/Title',\n value: obj.positiontitle ? obj.positiontitle : '--',\n show: true,\n },\n {\n label: 'Address',\n value: obj.employeraddress ? obj.employeraddress : '--',\n span: 12,\n show: true,\n },\n {\n label: 'Date',\n value: obj.from ? `${obj.from} - Present` : '--',\n span: 12,\n show: true,\n },\n {\n label: 'Base',\n value: formatAmount(obj.income.base),\n show: !obj.selfemployed,\n monthly: obj.income.basemonthly,\n },\n {\n label: 'Commission',\n value: obj.income.commissions ? formatAmount(obj.income.commissions) : '--',\n show: !obj.selfemployed,\n monthly: obj.income.commissionsmonthly,\n },\n {\n label: 'Overtime',\n value: obj.income.overtime ? formatAmount(obj.income.overtime) : '--',\n show: !obj.selfemployed,\n monthly: obj.income.overtimemonthly,\n },\n {\n label: 'Bonus',\n value: obj.income.bonuses ? formatAmount(obj.income.bonuses) : '--',\n show: !obj.selfemployed,\n monthly: obj.income.bonusesmonthly,\n },\n {\n label: 'Military',\n value: obj.income.military ? formatAmount(obj.income.military) : '--',\n show: !obj.selfemployed,\n monthly: obj.income.militarymonthly,\n },\n {\n label: 'Other',\n value: obj.income.other ? formatAmount(obj.income.other) : '--',\n show: !obj.selfemployed,\n monthly: obj.income.othermonthly,\n },\n {\n label: 'Ownership share',\n value:\n obj.percentownership !== ''\n ? obj.percentownership + '%'\n : '--',\n show: obj.selfemployed,\n },\n {\n label: 'Income or Loss',\n value: obj.incomeorloss\n ? `${formatAmount(obj.incomeorloss)}(${obj.incomeorlossperiod})`\n : '--',\n show: obj.selfemployed,\n },\n {\n label: parseInt(obj.percentownership) >= 25 ? 'Taxes' : 'Document income',\n value: obj.selfincomedoc ? formatTaxes(obj.selfincomedoc) : '--',\n show: obj.selfemployed,\n },\n ])\n }\n\n const editEmployment = (index) => {\n const isotherJob = index !== 0\n\n const { otheroccupations, occupation } = this.props.application[this.props.who]\n\n let employment = ''\n if (isotherJob) {\n employment = otheroccupations[index - 1]\n } else {\n employment = occupation\n }\n\n const {\n selfemployed,\n employername,\n positiontitle,\n phone,\n yearsatlineofwork,\n monthsatlineofwork,\n from,\n employeraddress,\n income: {\n basemonthly,\n basehoursperweek,\n base,\n overtimemonthly,\n overtime,\n bonusesmonthly,\n bonuses,\n commissionsmonthly,\n commissions,\n militarymonthly,\n military,\n othermonthly,\n other,\n },\n employedbyagent,\n percentownership,\n incomeorlossperiod,\n incomeorloss,\n selfincomedoc,\n } = employment\n\n this.setState({\n employedbyagent,\n editIndex: index,\n validated: false,\n isEdit: true,\n isotherJob,\n showEmploymentModal: true,\n selfemployed,\n employername,\n positiontitle,\n phone,\n yearsatlineofwork,\n monthsatlineofwork,\n from,\n employeraddress,\n income: {\n basemonthly,\n basehoursperweek,\n base: base === '' ? 0 : base,\n overtimemonthly,\n overtime: overtime === '' ? 0 : overtime,\n bonusesmonthly,\n bonuses: bonuses === '' ? 0 : bonuses,\n commissionsmonthly,\n commissions: commissions === '' ? 0 : commissions,\n militarymonthly,\n military: military === '' ? 0 : military,\n othermonthly,\n other: other === '' ? 0 : other,\n },\n\n percentownership,\n incomeorlossperiod,\n incomeorloss,\n selfincomedoc,\n })\n }\n const handleSetPrimary = (index) => {\n const { who } = this.props\n const { occupation, otheroccupations } = this.props.application[who]\n \n const newPrimaryData = otheroccupations[index - 1]\n const oldPrimaryData = occupation\n \n Object.entries(newPrimaryData).forEach(([key, value]) => {\n if (key === 'income') {\n Object.entries(value).forEach(([incomeKey, incomeValue]) => {\n this.props.updateIncomeMonthly(\n { target: { value: incomeValue } },\n who,\n incomeKey\n )\n })\n } else {\n this.props.changeOccupationInfo(\n { target: { value } },\n who,\n key\n )\n }\n })\n \n Object.entries(oldPrimaryData).forEach(([key, value]) => {\n if (key === 'income') {\n Object.entries(value).forEach(([incomeKey, incomeValue]) => {\n this.props.changeBorrowerOtherOccupationIncome(\n incomeValue,\n index - 1,\n who,\n incomeKey\n )\n })\n } else {\n this.props.changeBorrowerOtherOccupationValue(\n value,\n index - 1,\n who,\n key\n )\n }\n })\n }\n const deleteEmployment = (index) => {\n return this.props.removeBorrowerOtherOccupation(who, index - 1)\n }\n\n const addCurrentOccupation = () => {\n const reffrom = React.createRef()\n this.crefsfrom.push(reffrom)\n return this.props.addBorrowerOtherOccupation(who)\n }\n\n const addEmployment = () => {\n this.setState({\n editIndex: -1,\n validated: false,\n isEdit: false,\n isotherJob: true,\n showEmploymentModal: true,\n selfemployed: false,\n employername: '',\n positiontitle: '',\n phone: '',\n yearsatlineofwork: '',\n monthsatlineofwork: '',\n from: '',\n employeraddress: '',\n income: {\n basemonthly: '',\n basehoursperweek: '',\n base: 0,\n overtimemonthly: '',\n overtime: 0,\n bonusesmonthly: '',\n bonuses: 0,\n commissionsmonthly: '',\n commissions: 0,\n militarymonthly: '',\n military: 0,\n othermonthly: '',\n other: 0,\n },\n employedbyagent: false,\n percentownership: '',\n incomeorlossperiod: '',\n incomeorloss: '',\n selfincomedoc: '',\n })\n }\n\n const previousEmployed = () => {\n const { previousoccupations } = this.props.application[this.props.who]\n\n return previousoccupations.map((obj) => [\n {\n label: 'Employer',\n value: obj.employername ? obj.employername : '--',\n },\n {\n label: 'Position/Title',\n value: obj.positiontitle ? obj.positiontitle : '--',\n },\n {\n label: 'Address',\n value: obj.employeraddress ? obj.employeraddress : '--',\n span: 12,\n },\n {\n label: 'Dates',\n value: `${obj.from} - ${obj.to}`,\n },\n {\n label: 'Total income',\n value: `${formatAmount(obj.income)}/${obj.incomeperiod ? obj.incomeperiod : 'yearly'}`,\n },\n ])\n }\n\n const addPreviousEmployment = () => {\n this.setState({\n isEdit: false,\n validated: false,\n showPreviousEmploymentModal: true,\n previousoccupation: {\n employername: '',\n from: '',\n to: '',\n employeraddress: '',\n positiontitle: '',\n income: '',\n incomeperiod: '',\n selfemployed: false,\n employedbyagent: false,\n },\n })\n }\n\n const deletePreviousEmployment = (event, index) => {\n this.props.removeAdditionalOccupation(event, who, index)\n }\n\n const editPreviousEmployment = (index) => {\n const { who } = this.props\n const {\n employername,\n from,\n to,\n employeraddress,\n positiontitle,\n income,\n incomeperiod,\n selfemployed,\n employedbyagent,\n } = this.props.application[who].previousoccupations[index]\n\n this.setState({\n isEdit: true,\n validated: false,\n editIndex: index,\n showPreviousEmploymentModal: true,\n previousoccupation: {\n employername,\n from: from === '' ? null : dayjs(from),\n to: to === '' ? null : dayjs(to),\n employeraddress,\n positiontitle,\n income,\n incomeperiod,\n selfemployed,\n employedbyagent,\n },\n })\n }\n\n const employmentModal = () => {\n const creditCheckContinue = () => {\n const {\n selfemployed,\n employername,\n positiontitle,\n phone,\n yearsatlineofwork,\n monthsatlineofwork,\n from,\n employeraddress,\n percentownership,\n selfincomedoc,\n income,\n incomeorlossperiod,\n incomeorloss,\n } = this.state\n\n const formatDateForRedux = (date) => {\n if (!date) return ''\n if (dayjs.isDayjs(date)) return date.format('MM/DD/YYYY')\n return date\n }\n\n const employmentData = {\n selfemployed,\n employername,\n positiontitle,\n phone,\n yearsatlineofwork,\n monthsatlineofwork,\n percentownership,\n from: formatDateForRedux(from),\n employeraddress,\n selfincomedoc,\n incomeorlossperiod,\n incomeorloss,\n }\n\n const incomeData = {\n basemonthly: income.basemonthly,\n basehoursperweek: income.basehoursperweek,\n base: income.base,\n overtimemonthly: income.overtimemonthly,\n overtime: income.overtime,\n bonusesmonthly: income.bonusesmonthly,\n bonuses: income.bonuses,\n commissionsmonthly: income.commissionsmonthly,\n commissions: income.commissions,\n militarymonthly: income.militarymonthly,\n military: income.military,\n othermonthly: income.othermonthly,\n other: income.other,\n }\n\n const { who } = this.props\n const { otheroccupations } = this.props.application[who]\n\n let index = 0\n if (this.state.isEdit) {\n if (this.state.editIndex !== 0) {\n index = this.state.editIndex - 1\n }\n } else {\n addCurrentOccupation()\n index = otheroccupations ? otheroccupations.length : 0\n }\n\n if (this.state.editIndex !== 0) {\n Object.entries(employmentData).forEach(([key, value]) => {\n this.props.changeBorrowerOtherOccupationValue(\n value,\n index,\n who,\n key\n )\n })\n Object.entries(incomeData).forEach(([key, value]) => {\n this.props.changeBorrowerOtherOccupationIncome(\n value,\n index,\n who,\n key\n )\n })\n this.props.changeBorrowerOtherOccupationValue(\n this.state.employedbyagent,\n index,\n who,\n 'employedbyagent'\n )\n } else {\n Object.entries(employmentData).forEach(([key, value]) => {\n this.props.changeOccupationInfo(\n { target: { value } },\n who,\n key\n )\n })\n Object.entries(incomeData).forEach(([key, value]) => {\n this.props.updateIncomeMonthly(\n { target: { value } },\n who,\n key\n )\n })\n this.props.changeOccupationCheck(\n { target: { checked: this.state.employedbyagent } },\n who,\n 'employedbyagent'\n )\n }\n this.setState({ showEmploymentModal: false })\n }\n\n const submitEmployment = (e) => {\n e.preventDefault()\n e.stopPropagation()\n if (this.form.current.reportValidity() === false) {\n this.setState({ validated: true })\n return false\n }\n creditCheckContinue()\n }\n\n const closeModal = () => {\n this.setState({ showEmploymentModal: false })\n\n const { who } = this.props\n const { employername, positiontitle, phone, from } = this.props.application[who].occupation\n const fieldOccupation = employername === '' || positiontitle === '' || phone === '' || from === ''\n if (this.state.editIndex === 0 && fieldOccupation) {\n changeEmploymentTypes('unemployed', who)\n }\n }\n\n const { selfemployed } = this.state\n\n return (\n \n
\n\n \n
\n \n \n
\n \n Notice\n \n \n \n this.setState({ showNoticeModal: false })}\n >\n Skip\n \n \n
\n \n )}\n Employments
\n {getEmploymentList().map((employment, index) => (\n \n
\n \n ))}\n {occupation.hasoccupation === 'employed' && (\n <>\n \n \n {employment.map(\n (form, formIndex) =>\n form.show && (\n \n \n {form.value}{' '}\n \n {form.monthly === 'yearly' ? '/year' : form.monthly === 'monthly' ? '/month' : ''}\n \n
\n \n )\n )}\n \n \n
\n \n
\n \n ![employment](\"/images/employmentIcon.png\")
\n
\n \n Employment {index + 1}\n \n \n \n {index === 0 && (\n
\n \n Primary employment\n
\n )}\n {index === 0 && (\n \n Primary employment\n
\n )}\n \n {form.label}:\n
\n \n handleSetPrimary(index)}>Set as primary \n
\n \n editEmployment(index)}>Edit \n {index !== 0 && (\n deleteEmployment(index)}>Remove \n )}\n
\n \n Add employment\n
\n \n \n Total monthly income: {formatAmount(calculateIncomeWho(this.props.application, who))}\n
\n \n )}\n \n Previous employments
\n {previousEmployed().map(\n (employment, index) => (\n \n
\n )\n )}\n \n \n {employment.map((form, formIndex) => (\n \n
\n
\n \n
\n \n
\n \n \n
\n \n Employment {index + 1}\n \n \n \n {form.label} :\n
\n \n {form.value}\n
\n \n )\n )}\n \n
\n \n editPreviousEmployment(index)}>Edit \n\n deletePreviousEmployment(e, index)}>Remove \n
\n \n Add employment\n
\n \n \n
\n )\n }\n\n if (this.state.isNonQMCustomer === null) {\n return (\n \n \n \n Which income documentation would you like to submit for loan qualification?\n \n \n this.props.changeNonQMInfo(\n value,\n who,\n 'nonqmincometype'\n )\n }\n value={nonqm.nonqmincometype}\n required\n >\n VOE \n \n Debt Service Coverage Ratio (DSCR)\n \n \n 1 year personal bank statement\n \n \n 2 years personal bank statement\n \n \n 1 year business bank statement\n \n \n 2 years business bank statement\n \n \n 1 year Form 1099\n \n \n 2 years Form 1099\n \n \n 1 year profit and loss\n \n \n 2 years profit and loss\n \n \n Asset depletion\n \n \n \n
\n \n \n \n What is your estimated income?\n \n
\n \n \n \n this.props.changeNonQMInfo(\n e,\n who,\n 'nonqmincomeamount'\n )\n }\n />\n {\n this.props.changeNonQMInfo(\n e,\n who,\n 'nonqmincomeperiod'\n )\n }}\n >\n Monthly \n Yearly \n \n \n
\n \n \n
\n )\n }\n\n return (\n \n
\n )\n }\n}\n\nIncome = connect(mapStateToPropsDetails, mapDispatchToPropsDetails, null, {\n forwardRef: true,\n})(Income)\n\nexport class OtherIncome extends Component {\n constructor(props) {\n super(props)\n\n this.formRef = React.createRef()\n this.form = React.createRef()\n\n const { who } = this.props\n const { firstname, lastname } = this.props.application[who]\n this.state = {\n tabAvtive: 0,\n showEmploymentModal: false,\n incometype: '',\n description: '',\n amount: '',\n who: com.borrower,\n isEdit: false,\n editIndex: -1,\n validated: false,\n hasborrowerTab: true,\n tabs: [\n {\n tab: who === com.borrower ? 'Primary' : 'Co-borrower',\n value: `${firstname} ${lastname}`,\n },\n ],\n }\n }\n\n componentDidMount() {\n sessionStorage.setItem('progressValue', 100)\n if (this.personalCoborrower()) {\n const { firstname, lastname } = this.props.application.coborrower\n this.setState((prevState) => ({\n tabs: [\n ...prevState.tabs,\n {\n tab: 'Co-borrower',\n value: `${firstname} ${lastname}`,\n },\n ],\n }))\n }\n }\n\n componentDidUpdate() {}\n\n componentWillUnmount() {}\n\n personalCoborrower = () => {\n const { hascoborrower, married } = this.props.application\n return (\n hascoborrower === 'withcoborrower' ||\n (hascoborrower === 'multiple' && married)\n )\n }\n\n canShowDividends = () => {\n const { occupation, income } = this.props.application[this.props.who]\n if (occupation.hasoccupation === null) return false\n if (occupation.hasoccupation !== 'employed') return true\n\n const {\n isbasevalid,\n iscomissionvalid,\n isovertimevalid,\n isbonusesvalid,\n } = this.state\n\n if (isbasevalid && income.hasbonuses === false) return true\n\n if (isbasevalid && income.hasbonuses === true && iscomissionvalid && isovertimevalid && isbonusesvalid)\n return true\n\n return false\n }\n\n canShowOtherIncome = () => {\n if (!this.canShowDividends()) return false\n\n const { hasdividends } = this.props.application[this.props.who].income\n if (hasdividends === null) return false\n if (hasdividends === false) return true\n\n if (hasdividends === true && this.state.isdividendsvalid) return true\n\n return false\n }\n\n addOtherSources = (e) => {\n com.touch()\n\n const { who } = this.props\n if (e !== 'true') {\n this.props.clearBorrowerAdditionalIncome(who)\n } else {\n setTimeout(() => {\n const { amount, description, incometype } = this.props.application[who].income.otherincome[0]\n this.setState({\n isEdit: true,\n validated: false,\n editIndex: 0,\n amount,\n description,\n incometype,\n showEmploymentModal: true,\n })\n }, 200)\n\n this.props.addBorrowerAdditionalIncome(0, who)\n }\n }\n\n processOtherIncome = (val, index) => {\n if (null === val) return ''\n\n const { description, monthlyamount, key } = val\n return this.extraIncome(index, description, monthlyamount, key)\n }\n\n addMoreSources = () => {\n com.touch()\n this.props.addBorrowerAdditionalIncome(0, this.props.who)\n }\n\n onFinish = () => {\n const { who } = this.props\n const { completedsteps } = this.props.application[who] || {}\n\n if (!completedsteps?.otherincome) {\n this.props.changeBorrowerInfo(\n { ...completedsteps, otherincome: true },\n who,\n 'completedsteps'\n )\n }\n }\n\n handleSubmit = (e) => {\n return true\n }\n\n handlePrevious = () => {\n return true\n }\n\n changeTab = (tab) => {\n this.setState(\n { tabAvtive: tab, who: tab === 0 ? com.borrower : com.coborrower },\n () => { eventBus.emit('changeProgressValue') }\n )\n }\n\n render() {\n const formatAmount = (value) => {\n return value ? Number(value).toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, }) : '--'\n }\n\n const getEmploymentList = () => {\n const { otherincome } = this.props.application[this.props.who].income\n const otherIncome = otherincome ? otherincome : []\n return otherIncome.map((obj) => [\n {\n // label: 'Employer',\n label: 'Amount',\n value: formatAmount(obj.amount) + '(monthly)',\n },\n {\n label: 'Income type',\n value: obj.description ? obj.description : 'Other',\n },\n // {\n // label: 'Additional info',\n // value: obj.description ? obj.description : '--',\n // span: 12\n // }\n ])\n }\n\n const editEmployment = (index) => {\n const { amount, description, incometype } = this.props.application[this.props.who].income.otherincome[index]\n\n this.setState({\n isEdit: true,\n validated: false,\n editIndex: index,\n amount,\n description,\n incometype,\n showEmploymentModal: true,\n })\n }\n\n const deleteEmployment = (index) => {\n this.props.removeBorrowerAdditionalIncome(index, this.props.who)\n }\n\n const addEmployment = () => {\n this.setState({\n isEdit: false,\n validated: false,\n amount: '',\n description: '',\n incometype: '',\n showEmploymentModal: true,\n })\n }\n\n const onSelectAdditionalIncome = (value) => {\n com.touch()\n\n let description = ''\n com.othersouresofincome.forEach((x) => {\n if (x[0] === value) {\n description = x[1]\n }\n })\n if (value === 'Other') description = ''\n this.setState({ incometype: value, description: description })\n }\n\n const employmentModal = () => {\n const creditCheckContinue = () => {\n const { who } = this.props\n\n let index = 0\n if (this.state.isEdit) {\n index = this.state.editIndex\n } else {\n this.addMoreSources()\n const { otherincome } = this.props.application[who].income\n index = otherincome.length\n }\n\n this.props.updateBorrowerAdditionalIncome(\n { target: { value: this.state.amount } },\n who,\n 'amount',\n index\n )\n this.props.updateBorrowerAdditionalIncome(\n { target: { value: this.state.incometype } },\n who,\n 'incometype',\n index\n )\n this.props.updateBorrowerAdditionalIncome(\n { target: { value: this.state.description } },\n who,\n 'description',\n index\n )\n this.setState({ showEmploymentModal: false })\n }\n\n const submitIncome = (e) => {\n e.preventDefault()\n e.stopPropagation()\n if (this.state.amount === '') {\n this.setState({ validated: true })\n return false\n }\n creditCheckContinue()\n }\n\n return (\n \n Income\n /\n Employment\n
\n {employmentModal()}\n {PreviousEmploymentModal()}\n\n {this.state.isNonQMCustomer && (\n \n \n \n Can you provide full documentation of your\n income for the past two years, including tax\n returns and W-2 forms?{' '}\n \n \n \n
\n )}\n\n {displayNonQM()}\n {displayConventional()}\n \n Full documentation typically includes:\n
\n\n - \n
- \n Tax returns for the past 2 years\n \n
- \n W-2 forms for the past 2 years\n \n
- Recent pay stubs \n
\n Conventional loans usually require full documentation to verify your income.\n
\n\n \n Non-QM (Non-Qualified Mortgage) loans may be an option if you can't provide full documentation. These loans are designed for:\n
\n - \n
- \n Those with non-traditional income sources\n \n
- \n Borrowers with unique financial situations\n \n
\n Your answer helps us guide you to the most appropriate loan type for your situation.\n
\n \n }\n placement=\"top\"\n title=\"Income Documentation Explanation\"\n />\n \n {\n if (e === 'true') {\n this.props.updateProduct(\n 'conventional',\n 'mortgageapplied'\n )\n } else {\n this.props.updateProduct(\n 'nonqm',\n 'mortgageapplied'\n )\n }\n }}\n value={\n this.props.application.product\n .mortgageapplied !== 'nonqm'\n ? 'true'\n : 'false'\n }\n type=\"radio\"\n direction=\"horizontal\"\n />\n
\n \n
\n )\n }\n}\n\nOtherIncome = connect(mapStateToPropsDetails, mapDispatchToPropsDetails, null, {\n forwardRef: true,\n})(OtherIncome)\n","import React, { Component } from \"react\"\nimport 'bootstrap/dist/css/bootstrap.min.css'\n\nimport Form from 'react-bootstrap/Form'\nimport Col from 'react-bootstrap/Col'\nimport { Row } from \"react-bootstrap\"\nimport { connect } from 'react-redux'\nimport * as act from \"../Store/actions\"\nimport * as com from \"../Common.js\"\nimport CheckGroup from \"../Common/components/CheckGroup\"\nimport { isEmpty } from 'lodash'\nimport { Select } from \"antd\"\nimport { DollarInput } from \"../Common/components/DollarInput\"\n\nexport function getTotalExpenses(who) {\n const getExpence = (value, monthly) => {\n value = parseFloat(value)\n if (monthly === \"monthly\")\n return value\n else\n return value / 12\n }\n\n const { purpose } = this.props.application.property\n const { presentaddressownership, expenses } = this.props.application[who]\n\n let total = 0\n if (purpose === \"purchase\" && presentaddressownership === \"rent\") {\n total += getExpence(expenses.currentrent, expenses.currentrentperiod)\n }\n\n if ((presentaddressownership === \"own\" && purpose === \"purchase\") || purpose !== \"purchase\") {\n total += getExpence(expenses.currentfirstmortgage, expenses.currentfirstmortgageperiod)\n total += getExpence(expenses.currentotherfinancing, expenses.currentotherfinancingperiod)\n total += getExpence(expenses.currenthazardinsurance, expenses.currenthazardinsuranceperiod)\n total += getExpence(expenses.currentmortgageinsurance, expenses.currentmortgageinsuranceperiod)\n total += getExpence(expenses.currentrealestatetaxes, expenses.currentrealestatetaxesperiod)\n total += getExpence(expenses.currentdues, expenses.currentduesperiod)\n total += getExpence(expenses.currentother, expenses.currentotherperiod)\n }\n\n return com.commaizeFloat(total.toFixed(2))\n}\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n hascoborrower: state.application.hascoborrower,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n changeBorrowerInfoByValue: (val, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(val, who, verb))\n },\n updateExpenses: (event, who, verb) => {\n dispatch(act.UpdateExpenses(event.target.value, who, verb))\n },\n addAlimony: (event, who) => {\n dispatch(act.AddAlimony(event, who))\n },\n removeAlimony: (i, who) => {\n dispatch(act.RemoveAlimony(i, who))\n },\n clearAlimonies: (event, who) => {\n dispatch(act.ClearAlimonies(event, who))\n },\n changeAlimony: (event, i, who) => {\n dispatch(act.ChangeAlimony(event, i, who))\n },\n changeAlimonyField: (value, verb, who, i) => {\n dispatch(act.ChangeAlimonyField(value, verb, who, i))\n },\n changePaymentType: (event, i, who) => {\n dispatch(act.ChangePaymentType(event.target.value, i, who))\n },\n})\n\nclass Expenses extends Component {\n constructor(props) {\n super(props)\n\n this.state = {\n validated: false,\n }\n\n this.isValidated = this.isValidated.bind(this)\n\n const { who } = this.props\n const { otherloans, borrower, coborrower } = this.props.application\n const { loans } = this.props.application.assetsandliabilities\n const { currentfirstmortgage, currentotherfinancing } = this.props.application[who].expenses\n\n // see if you need to seed the defaults for\n let firstmortgage = 0\n let otherfinancing = 0\n\n if (who === com.borrower) {\n if (loans !== null) {\n for (let index = 0; index < loans.length; index++) {\n const loan = loans[index]\n // don't want to do this for a coborrower until we see it\n //if( (loan.attribution & 1) === 0)\n // continue\n if (!loan.creditloantype) continue\n if (loan.creditloantype.toLowerCase().indexOf(\"mortgage\") >= 0) {\n if (loan.forsubjectproperty === true) {\n if (firstmortgage === 0)\n firstmortgage += parseInt(loan.monthlypayment)\n else\n otherfinancing += parseInt(loan.monthlypayment)\n }\n } else {\n if (loan.creditloantype.toLowerCase().indexOf(\"homeequity\") >= 0 ||\n loan.creditloantype.toLowerCase().indexOf(\"realestate\") >= 0) {\n if (loan.forsubjectproperty === true)\n otherfinancing += parseInt(loan.monthlypayment)\n }\n }\n }\n }\n\n for (let i = 0; (otherloans != null) && (i < otherloans.length); i++) {\n const loan = otherloans[i]\n if (loan.forsubjectproperty === true && loan.satisfiedupon === \"withproceeds\") {\n if (firstmortgage === 0)\n firstmortgage += parseInt(loan.monthlypayment)\n else\n otherfinancing += parseInt(loan.monthlypayment)\n }\n }\n\n setTimeout(() => {\n if (currentfirstmortgage === \"\") {\n this.props.updateExpenses({ target: { value: firstmortgage.toString() } }, com.borrower, \"currentfirstmortgage\")\n this.props.updateExpenses({ target: { value: \"monthly\" } }, com.borrower, \"currentfirstmortgageperiod\")\n if (currentotherfinancing === \"\") {\n this.props.updateExpenses({ target: { value: otherfinancing.toString() } }, com.borrower, \"currentotherfinancing\")\n this.props.updateExpenses({ target: { value: \"monthly\" } }, com.borrower, \"currentotherfinancingperiod\")\n }\n }\n }, 100)\n }\n\n if (null === borrower.finances.alimony) {\n this.props.clearAlimonies(\"\", \"borrower\")\n }\n if (null === coborrower.finances.alimony) {\n this.props.clearAlimonies(\"\", \"coborrower\")\n }\n }\n\n componentDidMount() {\n this.completion()\n }\n\n componentDidUpdate() {\n this.completion()\n }\n\n componentWillUnmount() { }\n\n completion = () => {\n const form = this.props.self.current\n const formElements = form?.elements\n if (formElements && formElements.length === 0) {\n sessionStorage.setItem(\"progressValue\", 100)\n return\n }\n if (formElements && formElements.length !== 0) {\n let totalCount = 0\n let fillNum = 0\n for (let i = 0; i < formElements.length; i++) {\n const element = formElements[i]\n if (element.type !== 'button' && element.type !== 'fieldset' && element.type !== 'submit') {\n totalCount++\n if (!isEmpty(element.value)) {\n fillNum++\n }\n }\n }\n const progressValue = Math.round((fillNum / totalCount) * 100)\n sessionStorage.setItem(\"progressValue\", progressValue)\n }\n }\n\n isValidated() {\n if (!this.form.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n return true\n }\n\n showCoborrower = () => {\n if (this.props.hascoborrower === \"withcoborrower\" && this.props.application.married)\n return true\n if (this.props.hascoborrower === \"multiple\" && this.props.application.married)\n return true\n return false\n }\n\n totalExpenses = getTotalExpenses.bind(this)\n\n getHeader = () => {\n const { hascoborrower, married } = this.props.application\n\n if (hascoborrower === \"alone\") {\n return \"Expenses\"\n }\n\n if (hascoborrower === \"withcoborrower\" && !married) {\n const { firstname, lastname } = this.props.application[this.props.who]\n return (\n \n Income\n /\n Other income\n
\n\n {employmentModal()}\n\n \n \n \n {firstname + ' ' + lastname}\n \n 's Expenses\n
\n )\n }\n\n return \"Expenses\"\n }\n\n handleSubmit = e => {\n if (this.props.application[this.props.who].presentaddressownership == null) return false\n return true\n }\n\n processAlimonies = (val, index) => {\n if (null === val)\n return \"\"\n\n const { amount, owedto, whatisit, lessthan10, monthslefttopay, key } = val\n\n return this.generateAlimony(index, amount, owedto, lessthan10, whatisit, monthslefttopay, key)\n }\n\n generateAlimony = (index, amount, owedto, lessthan10, whatisit, monthslefttopay, key) => {\n index = parseInt(index)\n const removeAlimony = (event) => {\n com.touch()\n this.props.removeAlimony(index, this.props.who)\n }\n const changeAlimony = (event) => {\n com.touch()\n this.props.changeAlimony(event, this.props.who, index)\n }\n const addAlimony = (event) => {\n com.touch()\n return this.props.addAlimony(event, this.props.who)\n }\n const updateWhat = (event) => {\n com.touch()\n this.props.changePaymentType(event, this.props.who, index)\n }\n\n const { alimony } = this.props.application[this.props.who].finances\n\n return (\n \n \n
\n \n \n \n Payment type \n \n \n \n Monthly amount \n \n Please provide the name of the bank/credit union.\n \n \n \n
\n \n
\n
\n )\n }\n\n render() {\n const { who } = this.props\n\n const clearAlimony = (event) => {\n com.touch()\n this.props.clearAlimonies(event, who)\n }\n\n const addAlimony = (event) => {\n com.touch()\n return this.props.addAlimony(event, who)\n }\n\n const { alimony } = this.props.application[this.props.who].finances\n\n return (\n \n { updateWhat({ target: { value: e } }) }}\n >\n \n \n \n \n \n \n
\n \n { changeAlimony(e) }}\n pattern=\"^[a-zA-Z0-9 !-:,&()'?#+/@]+$\"\n />\n
\n \n
\n )\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Expenses)\n","import React, { Component } from 'react'\nimport 'bootstrap/dist/css/bootstrap.min.css'\n\nimport * as com from '../Common.js'\nimport Form from 'react-bootstrap/Form'\nimport NumericalInput from '../NumericalInput'\nimport { InputNumber, Select } from 'antd'\nimport Alert from 'react-bootstrap/Alert'\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport Button from 'react-bootstrap/Button'\nimport Modal from 'react-bootstrap/Modal'\nimport AddressAutocomplete from '../Common/AddressAutocomplete'\nimport { connect } from 'react-redux'\nimport * as act from '../Store/actions'\nimport * as st from '../State'\nimport InputGroup from 'react-bootstrap/InputGroup'\nimport Steps from 'awesome-steps'\nimport { getTotalExpenses } from './Expenses'\nimport 'awesome-steps/dist/style.css'\nimport { Tips } from '../Common/Tooltip'\nimport CheckGroup from '../Common/components/CheckGroup'\nimport { isEmpty } from 'lodash'\nimport { getCurrentState } from '../Store'\nimport { DollarInput } from '../Common/components/DollarInput.js'\nimport { getStates, getCounties } from '../Tools/Address.js'\nimport { isMortgageLoan } from '../Tools/Loan.js'\n\nvar parser = require('parse-address')\n\nclass PropertyModal extends Component {\n constructor(props) {\n super(props)\n\n const { propertyIndex, ownedproperties } = props\n const property = propertyIndex < ownedproperties.length ? ownedproperties[propertyIndex] : {}\n\n this.state = {\n loanLimits: {},\n validated: false,\n property: property,\n }\n\n this.form = React.createRef()\n }\n\n componentDidMount() {\n this.fetchLoanLimits()\n }\n\n componentDidUpdate(prevProps) {\n const { propertyIndex, ownedproperties } = this.props\n if (prevProps.ownedproperties !== ownedproperties || prevProps.propertyIndex !== propertyIndex) {\n const property = propertyIndex < ownedproperties.length ? ownedproperties[propertyIndex] : {}\n this.setState({ property })\n }\n }\n\n fetchLoanLimits = async () => {\n try {\n const response = await fetch('/data/loanlimits')\n if (!response.ok) {\n throw Error(response.statusText)\n }\n const data = await response.json()\n this.setState({ loanLimits: data })\n } catch (err) {\n console.error(err)\n }\n }\n\n onStreetAddressCompletion = (address, index, changeOwnedProperty) => {\n const num = com.getSubaddress(address, 'street_number', 'long_name')\n const city = com.getSubaddress(address, 'locality', 'long_name')\n const state = com.getSubaddress(address, 'administrative_area_level_1', 'long_name')\n const county = com.getSubaddress(address, 'administrative_area_level_2', 'long_name')\n let zip = com.getSubaddress(address, 'postal_code', 'long_name')\n const zips = com.getSubaddress(address, 'postal_code_suffix', 'short_name')\n if (zips !== '') zip = zip + '-' + zips\n\n const short = com.getSubaddress(address, 'route', 'short_name')\n const stradd = num + ' ' + short\n\n changeOwnedProperty(stradd, index, 'address')\n changeOwnedProperty(city, index, 'city')\n changeOwnedProperty(state, index, 'state')\n changeOwnedProperty(county, index, 'county')\n changeOwnedProperty(zip, index, 'zipcode')\n }\n\n handleSubmit = (e) => {\n e.preventDefault()\n e.stopPropagation()\n if (this.form.current.reportValidity() === false) {\n this.setState({ validated: true })\n return false\n }\n this.props.onSubmit(this.state.formData)\n }\n\n handleInputChange = (field, value) => {\n const { index, who, onPropertyChange } = this.props\n this.setState((prevState) => ({ [field]: value }))\n onPropertyChange({ [field]: value }, index, who)\n }\n\n onHaveMortgateForProperty = (e) => {\n const { propertyIndex, changeOwnedProperty } = this.props\n const checked = e.target.checked\n\n if (checked) {\n changeOwnedProperty([], propertyIndex, 'loans')\n } else {\n const additionalLoan = JSON.parse(new st.loan().toJson())\n additionalLoan.creditloantype = 'ConventionalRealEstateMortgage'\n additionalLoan.key = Math.random().toString()\n changeOwnedProperty([additionalLoan], propertyIndex, 'loans')\n }\n }\n\n mortgageLoanForm = (property, propertyIndex, loanIndex, changeOwnedProperty) => {\n const loan = !isEmpty(property.loans) && loanIndex < property.loans.length ? property.loans[loanIndex] : {}\n if (isEmpty(loan)) return <>\n\n const handleFieldChange = (field, value) => {\n const updatedLoans = [...property.loans]\n updatedLoans[loanIndex][field] = value\n changeOwnedProperty(updatedLoans, propertyIndex, 'loans')\n }\n\n return (\n {this.getHeader()}
\n \n \n Do you have any additional expenses, including alimony, child support, separate maintenance, and job-related expenses? \n {\n if (e === \"true\") {\n addAlimony()\n } else {\n clearAlimony()\n }\n }}\n value={\n (null != alimony && alimony.length > 0) ? \"true\" : \"false\"\n }\n type='radio'\n direction=\"horizontal\" />\n\n \n
\n \n {alimony != null && alimony.map(this.processAlimonies)}\n
\n \n
\n )\n }\n\n render() {\n const { show, onHide, propertyIndex, ownership, changeOwnedProperty } = this.props\n const { loanLimits, validated, property } = this.state\n\n const isAdditional = ownership === st.O_Own ? propertyIndex > 0 : true\n\n return (\n \n {/* Header Section */}\n
\n \n ![\"bank\"](\"/images/mortgage-loan-icon.svg\")
\n \n Add mortgage loan\n \n
\n\n {/* Form Section */}\n \n \n Add mortgage loan\n \n \n \n Type \n \n \n Lender \n handleFieldChange('name', e.target.value)}\n />\n \n \n\n \n Account number \n handleFieldChange('accountnumber', e.target.value)}\n />\n \n Mo. payment \n handleFieldChange('monthlypayment', e)}\n />\n \n \n\n \n Unpaid balance \n handleFieldChange('remainingbalance', e)}\n />\n \n Paid off at/before closing? \n \n \n \n\n \n Credit limit (optional) \n handleFieldChange('creditlimit', e)}\n />\n \n \n
\n \n \n {isAdditional ? 'Additional property you own' : 'Property you own'}\n \n
\n \n \n \n \n Payment type \n \n \n \n Monthly amount \n \n Please provide the name of the bank/credit union.\n \n \n \n \n \n
\n
\n )\n }\n\n getIcon = (index) => {\n const loans = this.getFilteredLoans()\n\n const a = loans[index]\n const creditLoanType = a.creditloantype.toLowerCase()\n const mapit = () =>\n creditLoanType.indexOf('mortgage') >= 0\n ? '1'\n : creditLoanType.indexOf('homeequity') >= 0 || creditLoanType.indexOf('realestate') >= 0\n ? '2'\n : creditLoanType.indexOf('education') >= 0\n ? '3'\n : creditLoanType.indexOf('auto') >= 0\n ? '4'\n : creditLoanType.indexOf('card') >= 0 || creditLoanType.indexOf('charge') >= 0\n ? '5'\n : creditLoanType.indexOf('medical') >= 0\n ? '6'\n : creditLoanType.indexOf('collection') >= 0\n ? '7'\n : '8'\n\n switch (mapit(a)) {\n case '1':\n return \n case '2':\n return \n case '3':\n return \n case '4':\n return \n case '5':\n return \n case '6':\n return \n case '7':\n return \n default:\n return ''\n }\n }\n\n getSubjAddress = () => {\n const { address, purpose } = this.props.application.property\n if (address === '') {\n if (purpose !== st.POL_Purchase) {\n return \"the property you're refinancing\"\n } else {\n return \"the property you're purchasing\"\n }\n }\n return address\n }\n\n getFlag = (correction) => {\n if (correction === 'paidbybusiness')\n return \n\n if (correction === 'alreadyclosed')\n return \n if (correction === 'wrongperson')\n return \n if (correction === 'other')\n return \n if (correction === 'duplicate')\n return \n return ''\n }\n\n renderLoan = (\n index,\n name,\n address,\n accountnumber,\n monthlypayment,\n remainingbalance,\n monthslefttopay,\n satisfiedupon,\n key,\n margin\n ) => {\n index = parseInt(index)\n const loans = this.getFilteredLoans()\n\n const isHELOC = () => {\n const loan = loans[index]\n return com.isHeloc(loan)\n }\n const handleClose = (e) => {\n const newshow = { ...this.state.show }\n newshow[index] = false\n this.setState({ show: newshow })\n }\n const showCorrect = (e) => {\n const newshow = { ...this.state.show }\n newshow[index] = true\n this.setState({ show: newshow })\n }\n\n const isPrimary = (trr) => {\n const { purpose } = this.props.application.property\n if (\n purpose !== st.POL_Purchase &&\n (loans[index].forsubjectproperty === true || (trr && loans[index].forsubjectproperty == null))\n ) {\n // see if there is already a loan to refinance\n let alreadyRefinanced = false\n for (let i = 0; i < index; i++) {\n const loan = loans[i]\n\n if (\n loan.forsubjectproperty &&\n (loan.satisfiedupon === 'withproceeds' || (trr && loan.satisfiedupon == null))\n ) {\n alreadyRefinanced = true\n break\n }\n }\n if (alreadyRefinanced) {\n return false\n }\n return true\n }\n return false\n }\n\n const changeBorrowerLoanSatisfiedUpon = (event) => {\n com.touch()\n\n const { purpose } = this.props.application.property\n if (isMortgage() && purpose === st.POL_Refinance && event.target.value === 'withproceeds') {\n // see if there is already a loan to refinance\n let alreadyRefinanced = false\n for (let i = 0; i < index; i++) {\n const loan = loans[i]\n if (loan.forsubjectproperty === true && loan.satisfiedupon === 'withproceeds') {\n alreadyRefinanced = true\n break\n }\n }\n if (alreadyRefinanced) {\n this.setState({ observedIndex: index, showWarning: true })\n return\n }\n }\n this.props.changeBorrowerLoanSatisfiedUpon(\n event,\n this.getUnfilteredIndex(index),\n this.props.who\n )\n }\n\n const changeExplanation = (e) => {\n com.touch()\n this.props.changeBorrowerLoanExplanation(\n e,\n this.getUnfilteredIndex(index),\n this.props.who\n )\n }\n\n const correctionChecked = (e) => {\n com.touch()\n this.props.changeBorrowerLoanCorrection(\n e,\n this.getUnfilteredIndex(index),\n this.props.who\n )\n }\n\n const changeBorrowerLoanForSubject = (e) => {\n com.touch()\n const val = e.target.value === 'true'\n\n this.props.changeBorrowerLoanForSubject(\n val,\n this.getUnfilteredIndex(index),\n this.props.who\n )\n if (isPrimary(val)) {\n this.props.changeBorrowerLoanSatisfiedUpon(\n { target: { value: 'withproceeds' } },\n this.getUnfilteredIndex(index),\n this.props.who\n )\n }\n this.getBalancePayment()\n }\n\n const changeBorrowerLoanForPrimary = (e) => {\n com.touch()\n const val = e.target.value === 'true'\n\n this.props.changeBorrowerLoan(\n val,\n this.getUnfilteredIndex(index),\n 'forprimaryresidence'\n )\n }\n\n const displayOwnership = () => {\n const borrowerName = `${this.props.application.borrower.firstname} ${this.props.application.borrower.lastname}`\n const coBorrowerName = `${this.props.application.coborrower.firstname} ${this.props.application.coborrower.lastname}`\n switch (loans[index].attribution) {\n case 1:\n return borrowerName\n case 2:\n return coBorrowerName\n case 3:\n return 'Joint'\n default:\n return 'Unknown'\n }\n }\n\n const onMonthlyChange = (e) => {\n com.touch()\n this.props.changeBorrowerLoanMonthly(\n e,\n this.getUnfilteredIndex(index),\n this.props.who\n )\n }\n\n const displayMonthly = () => {\n const loans = this.getFilteredLoans()\n\n const liability = loans[index]\n const userinput = liability.monthlydefinedbycustomer\n\n if (userinput) {\n return (\n \n { updateWhat({ target: { value: e } }) }}\n >\n Alimony \n Child Support \n Separate Maintenance \n Job Related Expenses \n Other \n \n
\n \n { changeAlimony(e) }}\n pattern=\"^[a-zA-Z0-9 !-:,&()'?#+/@]+$\"\n />\n
\n \n \n \n \n Please make your choice.\n \n \n
\n )\n }\n\n const canPayoffWithLoanProceeds = () => {\n const { purpose } = this.props.application.property\n const loans = this.getFilteredLoans()\n\n if (purpose === st.POL_Cashoutrefinance)\n return true\n if (purpose === st.POL_Purchase)\n return false\n\n if (isHELOC()) {\n if (purpose === st.POL_Refinance && false === loans[index].partoforiginalpurchase)\n return false\n }\n\n // refinance /cashout left\n if (loans[index].forsubjectproperty === true) return true\n if (loans[index].partoforiginalpurchase) return true\n return false\n }\n\n const paidOff = () => {\n return (\n \n Will you\n pay the balance before this transaction?\n
\n - \n
- \n Are you refinancing this loan? Answer \"Yes, I'm refinancing this loan\"\n \n
- Are you paying the loan back? For example, you're selling your previous residence. Answer: \"Yes, I'm it paying it off myself \". \n
- Closing some credit card balances can also be helpful in lowering your debt payments, and improving your odds of getting qualified for a new loan. \n
- Answer No, if you're keeping the loan as is \n
\n \n \n \n Please make your choice.\n \n \n
\n )\n }\n\n return ''\n }\n\n const changePropertyAddress = (event) => {\n com.touch()\n this.props.changeBorrowerLoan(\n event.target.value,\n this.getUnfilteredIndex(index),\n 'propertyaddress'\n )\n }\n\n const isMortgage = () => {\n const creditLoanType = loans[index].creditloantype.toLowerCase()\n return (\n creditLoanType.indexOf('mortgage') >= 0 ||\n creditLoanType.indexOf('homeequity') >= 0 ||\n creditLoanType.indexOf('realestate') >= 0\n )\n }\n\n const correction = loans[index].correction\n\n let crossed = ''\n if (['wrongperson', 'alreadyclosed', 'other', 'duplicate'].includes(correction))\n crossed = ' crisscrossed'\n if (correction === 'paidbybusiness' || correction === 'alreadyclosed')\n crossed = ' greencrisscrossed'\n\n let mt5 = ' mt-4'\n if (index === 0) mt5 = ''\n\n const onRateChange = (e) => {\n com.touch()\n this.props.changeBorrowerLoanRate(\n e,\n this.getUnfilteredIndex(index),\n this.props.who\n )\n }\n\n const changePartOfOriginal = (e) => {\n const r = e.target.value === 'true'\n this.props.changeBorrowerLoan(\n r,\n this.getUnfilteredIndex(index),\n 'partoforiginalpurchase'\n )\n }\n\n const showAddress = () => {\n if (!isMortgage()) return false\n\n const { purpose } = this.props.application.property\n const { financingsameproperty } = this.props.application\n if (\n purpose !== st.POL_Purchase &&\n false === loans[index].forsubjectproperty &&\n financingsameproperty\n )\n return true\n\n if (purpose === st.POL_Purchase && false === loans[index].forprimaryresidence)\n return true\n\n if (\n purpose !== st.POL_Purchase &&\n false === financingsameproperty &&\n false === loans[index].forprimaryresidence\n )\n return true\n\n return false\n }\n\n const showBalancePaidOff = () => {\n if (isMortgage()) {\n const { forsubjectproperty, forprimaryresidence } = loans[index]\n if (forsubjectproperty == null && forprimaryresidence == null)\n return false\n\n const { purpose } = this.props.application.property\n if (purpose !== st.POL_Purchase && forsubjectproperty)\n return false\n\n return true\n }\n return true\n }\n\n let style = {}\n if (loans[index].forsubjectproperty === true && crossed === '') {\n style = {\n backgroundImage: 'url(\"/housemoney.png\")',\n position: 'relative',\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'bottom 0px right 50px',\n backgroundSize: 'auto 100%',\n }\n }\n\n const theRest = () => {\n const ital = 'ml-3 font-weight-light'\n switch (loans[index].correction) {\n case 'duplicate':\n return (\n \n {paidOff()}\n
\n \n This entry is a duplicate, and won't be counted\n against your debt\n
\n )\n case 'wrongperson':\n return (\n \n This entry does not belong to you, and won't be\n counted against your debt\n
\n )\n case 'alreadyclosed':\n return (\n \n This loan is already closed, and won't be counted\n against your debt\n
\n )\n case 'paidbybusiness':\n return (\n \n This loan is paid by business, and won't be counted\n against your debt\n
\n )\n case 'other':\n return (\n \n This loan won't be counted against your debt\n
\n )\n default:\n break\n }\n\n if (crossed !== '') return ''\n\n const showQuestionForPrimary = () => {\n if (this.props.application.property.purpose === st.POL_Purchase)\n return ''\n // only refinance\n if (false !== loans[index].forsubjectproperty) return ''\n if (false !== this.props.application.financingsameproperty)\n return ''\n\n return askPrimary()\n }\n\n const askPrimary = () => {\n return (\n \n \n \n Is this a loan for {com.getPrimaryAddress(this.props.who, this.props.application)}?\n \n
\n
\n )\n }\n\n const { purpose } = this.props.application.property\n const { forsubjectproperty, rate, propertyaddress, partoforiginalpurchase } = loans[index]\n\n return (\n \n
\n \n \n \n Yes, it is\n \n
\n \n \n No, it isn't\n \n
\n \n {purpose !== st.POL_Purchase && isMortgage() && (\n \n \n Is this a loan for {this.getSubjAddress()}?\n \n
\n )}\n\n {showQuestionForPrimary()}\n\n {forsubjectproperty === true && purpose !== st.POL_Purchase && !isHELOC() && isPrimary() && (\n \n \n \n {' '}\n What is your current rate?{' '}\n \n\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 (!margin) {\n mt5 = ''\n }\n\n const toggleShow = () => {\n const expand = this.state.expand\n expand[index] = !expand[index]\n this.setState({ expand })\n\n var content = document.getElementById('card' + index)\n if (!expand[index]) {\n content.style.maxHeight = '0px'\n } else {\n content.style.maxHeight = 2 * content.scrollHeight + 'px'\n }\n }\n\n const askAboutDuplicate =\n !margin &&\n loans[index].correction === 'duplicate' &&\n this.state.stepsandsubsteps[index].dupresolved == null\n\n const askDupe = () => {\n if (index === 0) return 'should not see this'\n\n const onDupe = (e) => {\n const val = e.target.value === 'true'\n const stepsandsubsteps = this.state.stepsandsubsteps\n stepsandsubsteps[index].dupresolved = val\n this.setState({ stepsandsubsteps })\n\n if (!val) {\n com.touch()\n this.props.changeBorrowerLoanCorrection(\n { target: { value: 'none' } },\n this.getUnfilteredIndex(index),\n this.props.who\n )\n setTimeout(() => {\n let stepsandsubsteps = this.recalcStepper()\n this.setState({ stepsandsubsteps })\n }, 1000)\n }\n }\n\n const { dupresolved } = this.state.stepsandsubsteps[index]\n\n return (\n \n
\n \n \n \n Yes, it is\n \n
\n \n \n No, it isn't\n \n
\n \n \n Please provide description.\n \n
\n \n {showAddress() && (\n
\n\n {forsubjectproperty === true && isHELOC() && purpose === st.POL_Refinance && (\n \n Was\n this HELOC a part of the original purchase?\n
\n \n
\n \n \n \n Yes, it was\n \n
\n \n \n No, it wasn't\n \n
\n \n \n \n \n
\n )\n }\n\n const switchCashout = () => {\n this.setState({ showWarning: false })\n this.props.changeBorrowerLoanSatisfiedUpon(\n { target: { value: 'withproceeds' } },\n this.state.observedIndex,\n this.props.who\n )\n this.props.changeMainPropertyPurpose({\n target: { value: st.POL_Cashoutrefinance },\n })\n }\n\n const originalPurchase = () => {\n this.setState({ showWarning: false })\n\n this.props.changeBorrowerLoanSatisfiedUpon(\n { target: { value: 'withproceeds' } },\n this.state.observedIndex,\n this.props.who\n )\n this.props.changeBorrowerLoan(\n true,\n this.getUnfilteredIndex(index),\n 'partoforiginalpurchase'\n )\n }\n\n return (\n \n This entry looks like a duplicate of the previous one:{' '}\n {loans[index - 1].name}, acc.{' '}\n {loans[index - 1].accountnumber}, balance: $\n {com.commaizeFloat(loans[index - 1].remainingbalance)}\n
\n Could you please confirm?\n
\n \n Could you please confirm?\n
Tell us more about these loans
\n\n You indicated that you'd like to refinance more than one loan.\n
\n This is possible within the limits of rate/term refinance only if these loans were obtained together as a part of a purchase transaction.
\n Otherwise, we can switch to a cash out refinance. Your rates might be higher. Note, that you can always go back and change your choice.
\n \n Does this liability need a correction?
\n\n {this.getIcon(index)}\n {com.unCamelCase(loans[index].creditloantype)}\n {this.getFlag(correction)}\n
\n \n {margin && (\n \n \n
\n {displayOwnership()}\n \n\n {loans[index].currentratingtype !== 'AsAgreed' && (\n
\n
\n Lender:
\n {loans[index].name}
\n \n Account number:
\n {loans[index].accountnumber}
\n \n\n Balance:
\n \n ${com.commaize(loans[index].remainingbalance)}\n
\n \n Mo. Payment:
\n {displayMonthly()}
\n \n\n Mo. left:
\n \n {Number.isInteger(parseInt(loans[index].monthslefttopay)) ? loans[index].monthslefttopay : 'N/A'}\n
\n \n\n \n {displayOwnership()}\n \n\n {loans[index].currentratingtype !== 'AsAgreed' && (\n
\n {com.unCamelCase(loans[index].currentratingtype)}\n
\n \n )}\n \n {askAboutDuplicate ? (\n askDupe()\n ) : (\n
\n )}\n \n \n )\n }\n\n checkForPrimary = (index) => {\n if (this.props.application.property.purpose !== st.POL_Purchase)\n return true\n\n const loans = this.getFilteredLoans()\n\n if (loans[index].forprimaryresidence === true) return true\n\n const adr = loans[index].propertyaddress\n\n const parsed = parser.parseLocation(adr)\n const subj = parser.parseLocation(this.getSubjAddress())\n if (adr === '') return true\n\n const ret =\n parsed.city.toLowerCase() === subj.city.toLowerCase() &&\n parsed.number.toLowerCase() === subj.number.toLowerCase() &&\n parsed.state.toLowerCase() === subj.state.toLowerCase() &&\n parsed.street.toLowerCase() === subj.street.toLowerCase()\n\n return !ret\n }\n\n checkForSubject = (index) => {\n if (this.props.application.property.purpose === st.POL_Purchase)\n return true\n\n const loans = this.getFilteredLoans()\n\n if (loans[index].forsubjectproperty === true) return true\n\n const adr = loans[index].propertyaddress\n\n const parsed = parser.parseLocation(adr)\n const subj = parser.parseLocation(this.getSubjAddress())\n if (adr === '') return true\n\n const ret =\n parsed.city.toLowerCase() === subj.city.toLowerCase() &&\n parsed.number.toLowerCase() === subj.number.toLowerCase() &&\n parsed.state.toLowerCase() === subj.state.toLowerCase() &&\n parsed.street.toLowerCase() === subj.street.toLowerCase()\n\n return !ret\n }\n\n renderLoanStep = (\n index,\n name,\n address,\n accountnumber,\n monthlypayment,\n remainingbalance,\n monthslefttopay,\n satisfiedupon,\n key\n ) => {\n index = parseInt(index)\n const loans = this.getFilteredLoans()\n\n const { loansreviewed } = this.props.application.assetsandliabilities\n\n const click = () => {\n if (index >= loansreviewed)\n return\n\n this.props.changeReviewedLoans(index)\n }\n\n const onBack = (e) => {\n this.props.changeReviewedLoans(loansreviewed - 1)\n this.setState({ status: 'process' })\n this.props.clearValidate()\n document.getElementById('card' + (index - 1)).scrollIntoView({ behavior: 'smooth' })\n }\n\n const onDone = (e) => {\n // if (this.props.checkValidate(e)) {\n if (!this.checkForSubject(index)) {\n alert(\"The address provided is for the property that you're refinancing!\")\n this.setState({ status: 'error' })\n return false\n }\n if (!this.checkForPrimary(index)) {\n alert(\"The address provided is for the property that you're purchasing!\")\n this.setState({ status: 'error' })\n return false\n }\n this.setState({ status: 'process' })\n this.props.changeReviewedLoans(loansreviewed + 1)\n }\n\n let grayifneeded = ''\n if (index > loansreviewed)\n grayifneeded = 'graytext'\n\n const correction = loans[index].correction\n const dd = (\n \n \n \n This record needs correction\n \n Click on this link if\n
\n }\n placement=\"right\"\n title=\"Correct my mortgage loans\"\n />\n \n \n \n {askAboutDuplicate ? askDupe() : theRest()}\n - \n
- \n This loan does not belong to you\n \n
- \n It has been paid in full\n \n
- \n The debt has been paid by business\n \n
- \n This is a duplicate entry (happens quite often!)\n {' '}\n
\n {index === loansreviewed ? (\n \n
\n )}\n
\n )\n\n const tt = ''\n const dup = loans[index].correction === 'duplicate'\n\n return (\n \n \n
\n \n \n This record looks good to me\n \n \n
\n
\n ) : (\n \n {this.getIcon(index)}\n {com.unCamelCase(loans[index].creditloantype)}\n {this.getFlag(correction)}\n
\n \n \n \n
\n \n
\n )\n }\n\n renderStepper = () => {\n const { loansreviewed, loans } = this.props.application.assetsandliabilities\n const { stepsandsubsteps } = this.state\n if (stepsandsubsteps.length === 0) return ''\n\n const current = loansreviewed == null ? 0 : loansreviewed\n const inx = stepsandsubsteps[current].steps\n const ss = stepsandsubsteps[current].substeps\n\n return (\n \n \n
\n \n {loans.filter(this.filterNonDuplicates).filter(isMortgageLoan).map(this.processSteps)}\n \n
\n )\n }\n\n renderCore = () => {\n const filteredLoans = this.getFilteredLoans()\n if (filteredLoans == null) {\n return ''\n }\n\n const { loans, loansreviewed } = this.props.application.assetsandliabilities\n if (loans !== null && loans.length === 1 && loans[0].name === 'Estimated') {\n if (loansreviewed === 0) {\n this.props.changeReviewedLoans(1)\n }\n return ''\n }\n\n if (loansreviewed == null || loansreviewed < filteredLoans.length) {\n return this.renderStepper()\n } else {\n return (\n \n Please review your existing mortgages and mark the ones that are already paid off or invalid by clicking on the Needs Correction link\n
\n \n {loans && loans.filter(this.filterNonDuplicates).filter(isMortgageLoan).map(this.process)}\n
\n )\n }\n }\n\n onStreetAddressCompletion = (address, index, who) => {\n const num = com.getSubaddress(address, 'street_number', 'long_name')\n const city = com.getSubaddress(address, 'locality', 'long_name')\n const zip = com.getSubaddress(address, 'postal_code', 'long_name')\n const county = com.getSubaddress(address, 'administrative_area_level_2', 'long_name')\n const longstate = com.getSubaddress(address, 'administrative_area_level_1', 'long_name')\n const short = com.getSubaddress(address, 'route', 'short_name')\n const stradd = num + ' ' + short\n\n const changeOwnedProperty = who === com.borrower ? this.props.changeBorrowerOwnedProperty : this.props.changeCoborrowerOwnedProperty\n changeOwnedProperty(stradd, index, 'address')\n changeOwnedProperty(longstate, index, 'state')\n changeOwnedProperty(county, index, 'county')\n changeOwnedProperty(city, index, 'city')\n changeOwnedProperty(zip, index, 'zipcode')\n }\n\n addOtherProperties = (e, who) => {\n com.touch()\n\n const val = e === 'true'\n const { presentaddressownership, ownedproperties } = this.props.application[who]\n const addOwnedProperty = who === com.borrower ? this.props.addBorrowerOwnedProperty : this.props.addCoborrowerOwnedProperty\n const removeOwnedProperty = who === com.borrower ? this.props.removeBorrowerOwnedProperty : this.props.removeCoborrowerOwnedProperty\n const clearOwnedProperty = who === com.borrower ? this.props.clearBorrowerOwnedProperty : this.props.clearCoborrowerOwnedProperty\n const changeOwnedProperty = who === com.borrower ? this.props.changeBorrowerOwnedProperty : this.props.changeCoborrowerOwnedProperty\n\n if (val) {\n if (ownedproperties.length > 1) return\n addOwnedProperty()\n const additionalLoan = JSON.parse(new st.loan().toJson())\n additionalLoan.creditloantype = 'ConventionalRealEstateMortgage'\n additionalLoan.key = Math.random().toString()\n const index = presentaddressownership === st.O_Own ? 1 : 0\n changeOwnedProperty([additionalLoan], index, 'loans')\n this.setState({ showPropertyModal: true, currentPropertyIndex: index })\n } else {\n if (presentaddressownership === st.O_Own) {\n for (let i = 1; i < ownedproperties.length; i++) {\n removeOwnedProperty(i)\n }\n } else {\n clearOwnedProperty()\n }\n }\n }\n\n processAdditionalRealEstate = (val, index, who) => {\n if (null === val) return <>\n\n const {\n ownedproperties,\n presentaddressstreet,\n presentaddressstate,\n presentaddresscity,\n presentaddresszip,\n } = this.props.application[who]\n\n const {\n address = presentaddressstreet,\n city = presentaddresscity,\n state = presentaddressstate,\n zipcode = presentaddresszip,\n marketvalue,\n status,\n occupancy,\n insurancemaintenancetaxes,\n } = ownedproperties[index]\n\n const editProperty = (index) => {\n this.setState({ showPropertyModal: true, currentPropertyIndex: index })\n }\n\n const getStatusText = (value) => {\n const statusOptions = [\n { value: 'sold', label: 'Sold' },\n { value: 'pending', label: 'Pending Sale' },\n { value: 'retained', label: 'Retained' },\n ]\n const option = statusOptions.find(item => item.value === value)\n return option ? option.label : 'N/A'\n }\n\n const getOccupancyText = (value) => {\n const occupancyOptions = [\n { value: 'principal', label: 'Primary Residence' },\n { value: 'secondhome', label: 'Second Home' },\n { value: 'investment', label: 'Investment' },\n { value: 'other', label: 'Other' },\n ]\n const option = occupancyOptions.find(item => item.value === value)\n return option ? option.label : 'N/A'\n }\n\n const headerText = () => {\n return [address, city, state, zipcode].filter(Boolean).join(', ')\n }\n\n const { loans } = this.props.application[who].ownedproperties[index]\n\n const getCreditLoanTypeText = (value) => {\n const creditLoanTypeOptions = [\n { value: 'ConventionalRealEstateMortgage', label: 'Conventional real estate mortgage' },\n { value: 'FHARealEstateMortgage', label: 'FHA real estate mortgage' },\n { value: 'VeteransAdministrationRealEstateMortgage', label: 'Veterans administration real estate mortgage' },\n { value: 'USDA-RD', label: 'USDA-RD' },\n { value: 'Other', label: 'Other' },\n ]\n const option = creditLoanTypeOptions.find(item => item.value === value)\n return option ? option.label : 'N/A'\n }\n\n const paidOffAtClosing = (value) => {\n if (value === 'yes') {\n return 'Yes'\n } else if (value === 'no') {\n return 'No'\n }\n return ''\n }\n\n return (\n \n
\n \n )\n }\n\n isPreapproval = () => {\n const { hascontract, purpose } = this.props.application.property\n return false === hascontract && purpose === 'purchase'\n }\n\n getExpensesQuestions = (who) => {\n const { presentaddressownership, ownedproperties } = this.props.application[who]\n\n const currentProperty = presentaddressownership !== st.O_Own ? null : !isEmpty(ownedproperties) ? ownedproperties[0] : null\n const additionalProperties = isEmpty(ownedproperties) ? [] : presentaddressownership === st.O_Own ? ownedproperties.slice(1) : ownedproperties\n\n const addOwnedProperty = who === com.borrower ? this.props.addBorrowerOwnedProperty : this.props.addCoborrowerOwnedProperty\n const clearOwnedProperty = who === com.borrower ? this.props.clearBorrowerOwnedProperty : this.props.clearCoborrowerOwnedProperty\n const changeOwnedProperty = who === com.borrower ? this.props.changeBorrowerOwnedProperty : this.props.changeCoborrowerOwnedProperty\n\n const hasAdditionalProperties = () => {\n if (isEmpty(ownedproperties)) {\n return false\n }\n if (presentaddressownership === st.O_Own) {\n return ownedproperties.length > 1\n } else {\n return ownedproperties.length > 0\n }\n }\n\n const {\n presentaddressstreet,\n presentaddressunit,\n presentaddressstate,\n presentaddresscounty,\n presentaddresscity,\n presentaddresszip,\n } = this.props.application[who]\n\n return (\n \n {/* Header Section */}\n
\n {/* Content Section */}\n \n
\n \n ![\"property\"](\"/images/property-icon.svg\")
\n \n {headerText()}\n
\n \n \n
\n editProperty(index)}>\n Edit\n
\n \n {/* Property Info Section */}\n
\n \n
\n\n {/* Divider */}\n {loans.length > 0 && }\n\n {/* Mortgage Loans Section */}\n {loans.length > 0 && (\n Property info
\n \n
\n \n
\n Property value
\n {`$${com.commaize(marketvalue)}`}
\n \n
\n Status
\n {getStatusText(status)}
\n \n
\n Intended occupancy
\n {getOccupancyText(occupancy)}
\n \n
\n Monthly Insurance,Taxes, Association Dues, etc
\n {`$${com.commaize(insurancemaintenancetaxes)}`}
\n \n
\n )}\n Mortgage loans on this property
\n \n {loans.map(loan => (\n
\n \n {/* Title */}\n \n
\n
\n ))}\n \n {getCreditLoanTypeText(loan.creditloantype)}\n
\n Lender
\n {loan.name}
\n \n Account number
\n {loan.accountnumber || ''}
\n \n Unpaid balance
\n \n {loan.remainingbalance ? `$ ${com.commaize(loan.remainingbalance)}` : ''}\n
\n \n Mo. payment
\n \n {loan.monthlypayment ? `$${com.commaize(loan.monthlypayment)}` : ''}\n
\n \n Paid off at/before closing
\n {paidOffAtClosing(loan.paidoffatclosing)}
\n \n Credit limit (optional)
\n \n {loan.creditlimit ? `$${com.commaize(loan.creditlimit)}` : ''}\n
\n \n \n \n \n \n *How much is your monthly rent payment?\n \n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}\n parser={(value) => value.replace(/\\$\\s?|(,*)/g, '')}\n onChange={(e) =>\n this.props.updateExpenses(\n { target: { value: e } },\n who,\n 'currentrent'\n )\n }\n size=\"large\"\n placeholder=\"----\"\n />\n \n Please enter your monthly rent payment!\n \n \n \n
\n )}\n\n \n \n \n \n Do you currently own any additional properties?\n \n \n this.addOtherProperties(e, who)}\n value={hasAdditionalProperties() ? 'true' : 'false'}\n type=\"radio\"\n direction=\"horizontal\"\n />\n \n \n
\n\n {\n addOwnedProperty()\n const additionalLoan = JSON.parse(new st.loan().toJson())\n additionalLoan.creditloantype = 'ConventionalRealEstateMortgage'\n additionalLoan.key = Math.random().toString()\n changeOwnedProperty([additionalLoan], ownedproperties.length, 'loans')\n this.setState({ showPropertyModal: true, currentPropertyIndex: ownedproperties.length })\n }}\n >\n Add\n
\n )}\n \n )\n }\n\n renderAdditionalExpenses = () => {\n return this.getExpensesQuestions(this.props.who)\n }\n\n renderExpenses = () => {\n const { who } = this.props\n\n const clearAlimony = (event) => {\n com.touch()\n this.props.clearAlimonies(event, who)\n }\n\n const addAlimony = (event) => {\n com.touch()\n return this.props.addAlimony(event, who)\n }\n\n const { alimony } = this.props.application[who].finances\n\n return (\n <>\n \n \n \n \n *What is your current housing situation?\n \n \n {\n clearOwnedProperty()\n this.props.changeBorrowerInfoByValue(e, who, 'presentaddressownership')\n if (e === st.O_Own) {\n addOwnedProperty()\n changeOwnedProperty(presentaddressstreet, 0, 'address')\n changeOwnedProperty(presentaddressunit, 0, 'unit')\n changeOwnedProperty(presentaddresscity, 0, 'city')\n changeOwnedProperty(presentaddressstate, 0, 'state')\n changeOwnedProperty(presentaddresscounty, 0, 'county')\n changeOwnedProperty(presentaddresszip, 0, 'zipcode')\n const additionalLoan = JSON.parse(new st.loan().toJson())\n additionalLoan.creditloantype = 'ConventionalRealEstateMortgage'\n additionalLoan.key = Math.random().toString()\n additionalLoan.address = changeOwnedProperty([additionalLoan], 0, 'loans')\n this.setState({ showPropertyModal: true, currentPropertyIndex: 0 })\n }\n }}\n value={presentaddressownership}\n type=\"radio\"\n direction=\"horizontal\"\n />\n \n Please select your current housing situation!\n \n \n
\n\n \n {currentProperty && this.processAdditionalRealEstate(currentProperty, 0, who)}\n
\n\n {presentaddressownership === st.O_Rent && (\n \n {!isEmpty(additionalProperties) && additionalProperties.map((property, index) => {\n // +1 because the first property is current property\n const propertyIndex = presentaddressownership === st.O_Own ? index + 1 : index\n return this.processAdditionalRealEstate(property, propertyIndex, who)\n })}\n
\n {hasAdditionalProperties() && (\n \n this.setState({ showPropertyModal: false })}\n ownership={presentaddressownership}\n ownedproperties={ownedproperties}\n propertyIndex={currentPropertyIndex}\n changeOwnedProperty={\n who === com.borrower ? this.props.changeBorrowerOwnedProperty : this.props.changeCoborrowerOwnedProperty\n }\n onSubmit={(formData) => {\n this.setState({ showPropertyModal: false })\n }}\n />\n\n {!isEmpty(warnings) && borrowerid && warnings.map((warning, index) => (\n \n {warning}\n \n ))}\n\n {loadingcr ? (\n
\n )\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps, null, {\n forwardRef: true,\n})(Liabilities)\n","import React, {useEffect, useState} from \"react\";\nimport {connect} from \"react-redux\";\nimport {Alert, Button, Modal, Row, Col} from \"antd\";\nimport * as act from \"../../Store/actions\"\nimport \"./MyRates.css\";\nimport * as com from \"../../Common\"\nimport {CheckCircleOutlined, CheckCircleFilled} from \"@ant-design/icons\"\n\nconst mapStateToProps = (state) => {\n return {\n property: state.application.property,\n application: state.application,\n progress: state.progress,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateSelectField: (input, verb) => {\n dispatch(act.UpdateSelectField(input, verb))\n },\n updateApplicationAttribute: (input, verb) => {\n dispatch(act.UpdateApplicationAttribute(input, verb))\n },\n updateExpenses: (event, who, verb) => {\n dispatch(act.UpdateExpenses(event.target.value, who, verb))\n },\n})\n\nfunction MyRates(props) {\n const [notifyingLO, setNotifyingLO] = useState(false)\n const [remindingLO, setRemindingLO] = useState(false)\n const [showReminderSentModal, setShowReminderSentModal] = useState(false)\n\n useEffect(() => {\n props.changeContinueButtonText(\"Declarations\")\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n const contactLO = () => {\n setRemindingLO(true)\n const token = sessionStorage.getItem(\"ZeitroA\")\n const tosend = JSON.stringify({ notification: \"productselectionstarted\" })\n fetch('/borrower/notifylo', {\n method: 'POST',\n body: tosend,\n headers: {\n 'Content-Type': 'application/json',\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\"\n },\n }).then(\n response => {\n if (response.status !== 200) {\n console.log('Looks like there was a problem. Status Code: ' +\n response.status)\n return;\n }\n setRemindingLO(false)\n setShowReminderSentModal(true)\n }\n ).catch((err) => {\n setRemindingLO(false)\n console.log('Fetch Error :', err);\n });\n }\n\n const showAlert = () => {\n const selectedLoan = props.application.selection.selectedloan\n if (selectedLoan.hash !== \"\") {\n return \n Finance\n /\n Liabilities\n
\n \n
\n ) : (\n \n
\n \n {this.renderCore()}\n {this.renderAdditionalExpenses()}\n {this.renderExpenses()}\n
\n )}\n\n {message}\n \n
\n }\n const loSelection = props.application.selection.loSelectedLoans\n if (loSelection.length === 0) {\n return \n ![\"checkEmail\"](\"/images/checkEmail.png\")
\n
\n \n \n
\n You've selected a rate!
\n Your loan officer will review your application and get in touch about what comes next.
\n \n
\n }\n\n return (\n \n ![\"maganifier\"](\"/images/maganifier.png\")
\n
\n \n \n
\n Your officer is working on your rates
\n Your Loan Officer is reviewing your documents and you will be notified by email when this page is updated with your rate.
\n \n \n \n \n
\n }\n className=\"mt-2\"\n type=\"info\"\n closable\n />\n \n )\n }\n\n const chooseRate = (loan) => {\n props.updateSelectField(loan, \"selectedloan\")\n\n const { futuremortgageinsurance } = props.application.borrower.expenses\n if ((futuremortgageinsurance === '' || futuremortgageinsurance === '0') && loan.pmi !== 0) {\n const insurance = (parseFloat(loan.monthly_payment) * loan.pmi).toFixed(2)\n\n props.updateExpenses({ target: { value: \"monthly\" } }, \"borrower\", \"futuremortgageinsuranceperiod\")\n props.updateExpenses({ target: { value: insurance } }, \"borrower\", \"futuremortgageinsurance\")\n } else {\n if (loan.pmi === 0) {\n props.updateExpenses({ target: { value: 0 } }, \"borrower\", \"futuremortgageinsurance\")\n }\n }\n\n notifyLO(loan)\n }\n\n const notifyLO = (rate) => {\n setNotifyingLO(true)\n const token = sessionStorage.getItem(\"ZeitroA\")\n const tosend = JSON.stringify({\n base_rate: String(rate.base_rate),\n apr: String(rate.APR),\n monthly_payment: String(rate.monthly_payment),\n closing_cost: String(rate.closing_cost),\n points: String(rate.points),\n amortization: String(rate.amortization),\n term: String(rate.Term),\n mtype: String(rate.Mtype),\n loansize: String(rate.loansize),\n downpayment: String(rate.downpayment),\n })\n fetch('/borrower/notifyloaboutchosenrate', {\n method: 'POST',\n body: tosend,\n headers: {\n 'Content-Type': 'application/json',\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\"\n },\n }).then(\n response => {\n if (response.status !== 200) {\n console.log('Looks like there was a problem. Status Code: ' +\n response.status)\n setNotifyingLO(false)\n return;\n } else {\n setNotifyingLO(false)\n alert(\"Your loan officer has been notified! They will be in contact with you shortly to discuss your application and provide further guidance.\")\n }\n }\n ).catch((err) => {\n setNotifyingLO(false)\n console.log(err)\n });\n }\n\n const getLTV = () => {\n const { purpose, salesprice, appraisal } = props.property\n const { loanbalance } = props.application\n const { downpayment, paydown } = props.application.selection\n if (purpose === \"purchase\") {\n return Math.floor(100 * (parseFloat(salesprice)-parseFloat(downpayment)) / parseFloat(salesprice))\n } else {\n return Math.ceil(100 * (parseFloat(appraisal)-parseFloat(paydown)-com.safeParseInt(loanbalance)) / parseFloat(appraisal))\n }\n }\n\n const displayLoSelectedRateCard = (rate, i) => {\n const isSelected = rate.hash === props.application.selection.selectedloan.hash\n\n const getDownpayment = () => {\n if (rate.purpose === \"purchase\") {\n return \"$\"+com.commaize(rate.downpayment)+\"/\"+getLTV()+\"%\"\n } else if (rate.purpose === \"cashoutrefinance\") {\n return \"$\"+com.commaize(rate.cashout)+\"/\"+getLTV()+\"%\"\n } else {\n return \"$\"+com.commaize(rate.paydown)+\"/\"+getLTV()+\"%\"\n }\n }\n\n const getDownpaymentTitle = () => {\n if (rate.purpose === \"purchase\") {\n return \"Down payment/LTV\"\n } else if (rate.purpose === \"cashoutrefinance\") {\n return \"Cash out/LTV\"\n } else {\n return \"Paydown principal/LTV\"\n }\n }\n\n const getAmortization = (value) => {\n switch (value) {\n case 'arm56':\n return 'ARM 5/6'\n case 'arm76':\n return 'ARM 7/6'\n case 'arm106':\n return 'ARM 10/6'\n default:\n return 'Fixed'\n }\n }\n\n return (\n \n Your loan officer has chosen {loSelection.length} rates for you!
\n \n
\n )\n }\n\n return (\n \n
\n \n
\n {isSelected ? (\n \n ![\"rates\"](\"/images/rates.png\")
\n
\n \n My Rate {i+1}
\n \n
\n ) : (\n \n )}\n \n
\n \n \n
\n \n
\n Term, type
\n {rate.Term}, {getAmortization(rate.amortization)}
\n \n
\n Loan size
\n ${com.commaize(rate.loansize)}
\n \n
\n {getDownpaymentTitle()}
\n {getDownpayment()}
\n \n
\n \n
\n Rate/APR
\n {rate.base_rate}%/{rate.APR}%
\n \n
\n Mo. payment
\n ${com.commaize(rate.monthly_payment)}
\n \n
\n Est. closing costs
\n ${com.commaize(rate.closing_cost)}
\n \n
\n Points
\n {rate.points}%
\n \n {isSelected ? (\n
\n \n
\n ) : (\n \n )}\n \n
\n \n \n setShowReminderSentModal(false)}>\n OK\n \n ]}>\n \n
\n )\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MyRates)\n","import React from \"react\";\n\ninterface PDFViewerProps {\n src: string;\n fileName: string;\n}\n\nconst PDFViewer: React.FCMy Rates
\n {showAlert()}\n \n {props.application.selection.loSelectedLoans.map((rate, i) => displayLoSelectedRateCard(rate, i))}\n
\n Your loan officer has received a reminder to choose your rates. You will receive an email notification once your rates have been selected.
\n\n
\n );\n};\n\nexport default PDFViewer;\n","/**\n * Format a number to a USD currency string\n * @param number - The number to format\n * @returns The formatted currency string\n */\nexport const USDollarCurrencyLocale = new Intl.NumberFormat(\"en-US\", {\n maximumFractionDigits: 0,\n style: \"currency\",\n currency: \"USD\",\n});\n\n/**\n * Check if an email is valid\n * @param email - The email to check\n * @returns true if the email is valid, false otherwise\n */\nexport const isEmailValid = (email: string) => {\n return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\n};\n","import { Col, Row, Typography } from \"antd\";\nimport { USDollarCurrencyLocale } from \"./utils\";\nimport moment from \"moment\";\n\nimport \"./ClickablePrequalLetterDisplay.css\";\n\nconst { Text } = Typography;\n\ninterface ClickablePrequalLetterDisplayProps {\n purchasePrice: number;\n expirationDate: string;\n active: boolean;\n onClick: () => void;\n}\n\nconst ClickablePrequalLetterDisplay = (\n props: ClickablePrequalLetterDisplayProps\n) => {\n return (\n ![\"Prequal](\"/images/pdf-icon-blue.svg\"){kind=icon}
\n \n \n Pre-qual letter \n
\n );\n};\n","import { Row, Button, Typography } from \"antd\";\nimport \"./NoPrequalLetters.css\";\nconst { Paragraph } = Typography;\n\nexport const NoPrequalLetters = (props: { message?: string }) => {\n const message =\n props.message || \"Your officer is working on your Pre-qual letter.\";\n\n return (\n \n \n
\n \n {message} \n
\n \n \n
\n
\n );\n};\n","import React, { useEffect, useState } from \"react\";\nimport { Button, Input, message, Modal, Select } from \"antd\";\nimport { isEmailValid } from \"./utils\";\nimport \"./SharePreQualLetterModal.css\";\nimport { useSelector } from \"react-redux\";\n\ninterface ShareModalProps {\n visible: boolean;\n onClose: () => void;\n}\n\nexport const SharePreQualLetterModal = (props: ShareModalProps) => {\n const { visible, onClose } = props;\n const [selectedEmails, setSelectedEmails] = useState([]);\n const [emailInput, setEmailInput] = useState(\"\");\n const [emailSuggestions, setEmailSuggestions] = useState([]);\n const application = useSelector((state) => (state as any).application);\n const state = useSelector((state) => state);\n\n\n useEffect(() => {\n if (application?.brokerinfo?.email) {\n const suggestions = [\n {\n label: application.brokerinfo.loanofficername,\n value: application.brokerinfo.email,\n },\n ];\n setEmailSuggestions(suggestions);\n }\n }, []);\n\n const handleEmailChange = (value) => {\n console.log(\"value\", value);\n setSelectedEmails(value);\n };\n\n const handleSend = () => {\n if (selectedEmails.length === 0) {\n message.warning(\"Please select at least one email.\");\n return;\n }\n console.log(\"Emails to send:\", selectedEmails);\n // TODO: Send emails\n\n message.success(\"Emails sent successfully!\");\n setSelectedEmails([]);\n onClose();\n };\n\n return (\n \n \n (option.value + option.label)\n .toLowerCase()\n .includes(input.toLowerCase())\n }\n options={emailSuggestions}\n optionRender={(option) => (\n
\n \n );\n};\n","import React, {\n useState,\n useEffect,\n useImperativeHandle,\n forwardRef,\n} from \"react\";\nimport { sortBy } from \"lodash\";\nimport moment from \"moment\";\nimport { Space, message, Row, Button, Typography, Col, Skeleton } from \"antd\";\n\nimport * as com from \"../../Common.js\";\n\nimport PDFViewer from \"./PDFViewer\";\nimport ClickablePrequalLetterDisplay from \"./ClickablePrequalLetterDisplay\";\nimport { PrequalLetterHeader } from \"./PrequalLetterHeader\";\nimport { NoPrequalLetters } from \"./NoPrequalLetters\";\nimport { SharePreQualLetterModal } from \"./SharePreQualLetterModal\";\nimport \"./PrequalLetterHistory.css\";\n\nconst { Text } = Typography;\n\n// Define the structure of the data\ninterface PreQualLetter {\n serialID: string;\n issueDate: string;\n loanAmount: string;\n expirationDate: string;\n}\n\nconst PreQualLetterHistory = forwardRef((props, ref) => {\n let token = com.getUserToken();\n const paths = window.location.pathname.split(\"/\");\n const loanID = paths[paths.length - 1];\n\n const [data, setData] = useState{`${option.label} (${option.value})`}
\n )}\n dropdownRender={(menu) => (\n <>\n {menu}\n \n {\n // stop propagation to prevent the email addresses input from being cleared\n console.log(\"event\", e);\n e.stopPropagation();\n setEmailInput(e.target.value);\n }}\n onKeyDown={(e) => {\n if (e.key === \"Backspace\") {\n // Prevent backspace from deleting the last selected email\n e.stopPropagation();\n }\n }}\n />\n {\n if (\n emailInput &&\n isEmailValid(emailInput) &&\n !selectedEmails.includes(emailInput)\n ) {\n setSelectedEmails([...selectedEmails, emailInput]);\n setEmailInput(\"\");\n } else {\n message.warning(\"Please enter a valid and unique email.\");\n }\n }}\n >\n Add Email\n \n
\n \n )}\n />\n \n
\n );\n});\nexport default PreQualLetterHistory;\n","import React, { Component, useRef, useEffect, useState } from \"react\";\nimport \"../App.css\";\nimport * as com from \"../Common\";\nimport { Slider, Handles, Tracks, Rail, Ticks } from \"react-compound-slider\";\n\n\nfunction Tick({ tick, count, maxval }) {\n return (\n \n {data.length === 0 &&
\n )}\n \n \n \n \n \n \n \n \n ![\"Share\"](\"/images/document-share-blue.svg\")
\n Share\n \n \n \n \n Pre-qual letter history \n \n
\n\n \n
\n \n \n \n \n \n
\n
\n )}\n \n Share\n \n \n {data.map((dataRow, index) => {\n return (\n {\n getPDFContent(dataRow.serialID);\n setCurrentLetterIndex(index);\n }}\n active={\n dataRow.serialID ===\n data[currentLetterIndex].serialID\n }\n />\n );\n })}\n
\n \n \n 1000000 ? \"font_rotate\" : \"\"}\n style={{\n position: \"absolute\",\n marginTop: 22,\n fontSize: 10,\n textAlign: \"center\",\n marginLeft: `${-(100 / count) / 2}%`,\n width: `${100 / count}%`,\n left: `${tick.percent}%`,\n }}\n >\n {com.commaize(tick.value)}\n
\n \n );\n}\n\nconst RADIUS = 10;\nexport function Handle({ handle: { id, value, percent }, getHandleProps }) {\n const myInput = useRef();\n useEffect(() => {\n // Update the document title using the browser API\n\n let knobCtx = myInput.current.getContext(\"2d\");\n let color2 = \"rgba(0,48,116,1)\";\n let color1 = \"#E9F2FF\";\n let r = RADIUS;\n knobCtx.save();\n knobCtx.setTransform();\n knobCtx.fillStyle = color2;\n knobCtx.beginPath();\n knobCtx.arc(r, r, r, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.fillStyle = color1;\n knobCtx.beginPath();\n knobCtx.arc(r, r, r - 1, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.fillStyle = color2;\n knobCtx.beginPath();\n knobCtx.arc(r, r, r / 4 + 1, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.globalCompositeOperation = \"destination-out\";\n knobCtx.beginPath();\n knobCtx.arc(r, r, r / 4, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.restore();\n }, []);\n\n return (\n \n {value}\n
\n */}\n \n );\n}\n\nfunction Track({ source, target, getTrackProps }) {\n return (\n \n \n \n\n \n {({ getRailProps }) => (\n \n \n {({ handles, getHandleProps }) => (\n \n \n {({ tracks, getTrackProps }) => (\n \n {this.props.domain[1] !== 0 ? (\n \n {({ ticks }) => (\n \n ) : (\n \"\"\n )}\n \n
\n );\n }\n}\n\nfunction AffordabilityTick({ tick, count, maxval }) {\n return (\n \n {handles.map((handle) => (\n
\n )}\n \n {tracks.map(({ id, source, target }) => (\n
\n )}\n \n {ticks.map((tick) => (\n
\n )}\n \n 1000000 ? \"font_rotate\" : \"\"}\n style={{\n position: \"absolute\",\n marginTop: 18,\n fontSize: '0.75rem',\n color: '#6E6E72',\n textAlign: \"center\",\n marginLeft: `${-(100 / count) / 2}%`,\n width: `${100 / count}%`,\n left: `${tick.percent}%`,\n }}\n >\n {com.commaize(tick.value)}\n
\n \n );\n}\n\nexport function AffordabilityHandle({ handle: { id, value, percent }, getHandleProps, domain }) {\n const myInput = useRef();\n const [num, setNum] = useState()\n let splitVal1 = Math.ceil(0.74 * domain[1])\n let splitVal2 = Math.ceil(0.88 * domain[1])\n useEffect(() => {\n // Update the document title using the browser API\n if (myInput.current) {\n let knobCtx = myInput.current.getContext(\"2d\");\n let color2 = \"rgba(0,48,116,1)\";\n let color1 = \"#E9F2FF\";\n let r = RADIUS;\n if (knobCtx) {\n knobCtx.save();\n knobCtx.setTransform();\n knobCtx.fillStyle = color2;\n knobCtx.beginPath();\n knobCtx.arc(r, r, r, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.fillStyle = color1;\n knobCtx.beginPath();\n knobCtx.arc(r, r, r - 1, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.fillStyle = color2;\n knobCtx.beginPath();\n knobCtx.arc(r, r, r / 4 + 1, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.globalCompositeOperation = \"destination-out\";\n knobCtx.beginPath();\n knobCtx.arc(r, r, r / 4, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.restore();\n }\n }\n\n if (value <= splitVal1) {\n setNum('Affordable')\n } else if ((value <= splitVal2) && (value > splitVal1)) {\n setNum('Moderate')\n } else {\n setNum('Aggressive')\n }\n }, [value]);\n\n return (\n =93) ? '-18px' : '0px', color: value <= splitVal1 ? '#00BE63' : ((value <= splitVal2) && (value > splitVal1)) ? ' #FFAA29' : '#FF2929', fontFamily: 'Roboto', fontWeight: 'bold', fontSize: 11, marginTop: (id === '$$-0') ? -18 : 10 }}>\n {num}\n
\n \n {/* \n \n \n\n \n {({ getRailProps }) => (\n \n \n {({ handles, getHandleProps }) => (\n \n \n {({ tracks, getTrackProps }) => (\n \n {this.props.domain[1] !== 0 ? (\n \n {({ ticks }) => (\n \n ) : (\n \"\"\n )}\n \n
\n );\n }\n}\n\nexport function HandleSimple({\n handle: { id, value, percent },\n getHandleProps,\n}) {\n const myInput = useRef();\n let r = 8;\n useEffect(() => {\n let knobCtx = myInput.current.getContext(\"2d\");\n let color2 = \"rgb(64, 100, 215)\";\n let color1 = \"rgb(64, 100, 215)\";\n let r = 8;\n knobCtx.save();\n knobCtx.setTransform();\n knobCtx.fillStyle = color2;\n knobCtx.beginPath();\n knobCtx.arc(r, r, r, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.fillStyle = color1;\n knobCtx.beginPath();\n knobCtx.arc(r, r, r - 1, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.fillStyle = color2;\n knobCtx.beginPath();\n knobCtx.arc(r, r, r / 4 + 1, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.globalCompositeOperation = \"destination-out\";\n knobCtx.beginPath();\n knobCtx.arc(r, r, r / 4, 0, Math.PI * 2);\n knobCtx.fill();\n knobCtx.restore();\n }, []);\n\n return (\n \n {handles.map((handle) => (\n
\n )}\n \n {tracks.map(({ id, source, target }) => (\n
\n )}\n \n {ticks.map((tick) => (\n
\n )}\n \n {value}\n
\n */}\n \n );\n}\nfunction TrackSimple({ source, target, getTrackProps }) {\n return (\n \n \n \n\n \n {({ getRailProps }) => (\n \n \n {({ handles, getHandleProps }) => (\n \n \n {({ tracks, getTrackProps }) => (\n \n \n
\n );\n }\n}\n","import React, { Component } from \"react\";\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport './App.css';\n\nconst timedelta = 200\n\nexport default class UpDown extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n }\n if(typeof this.state.minimum === \"undefined\")\n this.state.minimum = 0\n if(typeof this.state.step === \"undefined\")\n this.state.step = 100 \n this.intervalid = 0\n this.intervaldirecton = 0\n this.pressed = false\n }\n up = e => {\n let fs = window.document.getElementsByTagName(\"fieldset\")\n if (fs.length > 0 && fs[0].disabled)\n return \n this.props.onUp() \n }\n down = e => {\n let fs = window.document.getElementsByTagName(\"fieldset\")\n if (fs.length > 0 && fs[0].disabled)\n return \n this.props.onDown() \n }\n downUp = e => {\n let fs = window.document.getElementsByTagName(\"fieldset\")\n if (fs.length > 0 && fs[0].disabled)\n return \n this.intervalid = window.setInterval(this.up, timedelta)\n this.pressed = true\n }\n upUp = e => {\n window.clearInterval(this.intervalid)\n let fs = window.document.getElementsByTagName(\"fieldset\")\n if (fs.length > 0 && fs[0].disabled)\n return \n if(this.pressed)\n this.props.onDone()\n this.pressed = false\n }\n downDown = e => {\n let fs = window.document.getElementsByTagName(\"fieldset\")\n if (fs.length > 0 && fs[0].disabled)\n return \n this.intervalid = window.setInterval(this.down, timedelta)\n this.pressed = true\n }\n upDown = e => {\n window.clearInterval(this.intervalid)\n let fs = window.document.getElementsByTagName(\"fieldset\")\n if (fs.length > 0 && fs[0].disabled)\n return \n if(this.pressed)\n this.props.onDone()\n this.pressed = false\n\n }\n render() {\n return (\n \n {handles.map((handle) => (\n
\n )}\n \n {tracks.map(({ id, source, target }) => (\n
\n )}\n \n \n \n \n \n \n \n
\n )\n }\n}\n\n","import React, { Component } from \"react\"\n\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport '../App.css'\nimport { Checkbox, Radio } from \"antd\"\n\nexport default class Multiselect extends Component {\n constructor(props) {\n super(props)\n this.ref = React.createRef()\n this.state = {\n value: props.defaultValue,\n\n }\n }\n onChange = (e) => {\n let selectedValues = []\n if(typeof this.props.radio !== \"undefined\" ) {\n\n if(e.target.checked) { \n for(let i = 0; i < this.props.options.length; i++) {\n if (this.props.options[i].id === e.target.id) {\n selectedValues.push(this.props.options[i])\n }\n }\n }\n } else {\n\n if(e.target.checked) {\n selectedValues = this.props.selectedValues\n for(let i = 0; i < this.props.options.length; i++) {\n if (this.props.options[i].id === e.target.id) {\n selectedValues.push(this.props.options[i])\n }\n }\n } else {\n for(let i = 0; i < this.props.selectedValues.length; i++) {\n if (this.props.selectedValues[i].id !== e.target.id) {\n selectedValues.push(this.props.selectedValues[i])\n } \n }\n }\n\n }\n\n this.props.onSelect(selectedValues)\n }\n componentDidMount() {\n\n }\n componentDidUpdate(prevProps) {\n\n }\n\n display = (opt, index) => {\n\n let isChecked = () => {\n\n let id = this.props.options[index].id\n let checked = false\n for (let i = 0; i < this.props.selectedValues.length; i++) {\n if (this.props.selectedValues[i].id === id)\n checked = true\n }\n return checked\n }\n\n let typ = \"checkbox\"\n let name = opt.id\n let callback = this.onChange\n if (typeof this.props.radio !== \"undefined\") {\n typ = \"radio\"\n name = this.props.name\n }\n\n let humanname = opt.name\n if (this.props.optionsmap != null && this.props.optionsmap[humanname])\n humanname = this.props.optionsmap[humanname]\n return {humanname}
\n \n \n {this.props.options.map(this.display)}\n
\n\n )\n }\n}","import React, { Component } from \"react\";\nimport 'bootstrap/dist/css/bootstrap.min.css';\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport { service } from '../State'\nimport Container from 'react-bootstrap/Container'\nimport { connect } from 'react-redux'\nimport * as act from \"../Store/actions\"\nimport * as com from \"../Common.js\"\nimport { tooltipFlat } from '../Common/Tooltip'\nimport { withRouter } from \"react-router-dom\";\nimport Tabs from 'react-bootstrap/Tabs'\nimport Tab from 'react-bootstrap/Tab'\nimport { pointsExplained } from './ProductPicker'\nconst mapStateToProps = (state) => {\n return {\n hascoborrower: state.application.hascoborrower,\n cohabiting: state.application.cohabiting,\n application: state.application,\n property: state.application.property,\n selection: state.application.selection,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n\n changeBorrowerInfo: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event.target.value, who, verb))\n },\n changeBorrowerInfoCheck: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event.target.checked, who, verb))\n },\n changePhoneInfo: (input, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(input, who, verb))\n },\n\n updatePreviousAddress: (event, who, verb, n) => {\n dispatch(act.UpdatePreviousAddress(event.target.value, who, verb, n))\n },\n addPreviousAddress: (event, who) => {\n dispatch(act.AddPreviousAddress(event.target.value, who,))\n },\n removePreviousAddress: (event, who, n) => {\n dispatch(act.RemovePreviousAddress(event.target.value, who, n))\n },\n clearPreviousAddress: (event, who) => {\n dispatch(act.ClearPreviousAddress(event.target.value, who))\n },\n changeMainProperty: (value, verb) => {\n dispatch(act.ChangeMainProperty(value, verb))\n },\n changeMainPropertyUnits: (event) => {\n dispatch(act.ChangeMainPropertyUnits(event.target.value))\n },\n changeMainPropertyYearBuilt: (event) => {\n dispatch(act.ChangeMainPropertyYearBuilt(event.target.value))\n },\n changeMainPropertyRefinanceYearAcquired: (event) => {\n dispatch(act.ChangeMainPropertyRefinanceYearAcquired(event))\n },\n changeMainPropertyRefinanceOriginalCost: (event) => {\n dispatch(act.ChangeMainPropertyRefinanceOriginalCost(event))\n },\n updateApplicationAttribute: (input, verb) => {\n dispatch(act.UpdateApplicationAttribute(input, verb))\n },\n updateSelectField: (input, verb) => {\n dispatch(act.UpdateSelectField(input, verb))\n },\n addSelectedLoanPrepaid: (service, chargename, period) => {\n dispatch(act.AddSelectedLoanPrepaid(service, chargename, period))\n },\n updatePaymentPeriod: (name, service, period) => {\n dispatch(act.UpdatePaymentPeriod(name, service, period))\n },\n updatePaymentAmount: (name, service, amount) => {\n dispatch(act.UpdatePaymentAmount(name, service, amount))\n },\n updatePrepaidDefault: (name, service, period, prepaidperiods, amount) => {\n dispatch(act.UpdatePrepaidDefault(name, service, period, prepaidperiods, amount))\n },\n addSelectedLoanEstimatedClosingCosts: (cc) => {\n dispatch(act.AddSelectedLoanEstimatedClosingCosts(cc))\n },\n\n\n});\n\n\nclass LoanEstimate extends Component {\n constructor(props) {\n super(props)\n this.state = {\n ltv: 0,\n\n cltv: 0,\n hcltv: 0,\n\n }\n\n this.card = this.props.card\n\n //updatePrepaidDefault: (name, period, prepaidperiods, amount)\n let rate = this.props.card.base_rate / 100 / 360 * this.getLoanSize()\n let name = \"Prepaid Interest\"\n let service = \"prepaids\"\n let days = this.props.card.prepaiddays\n if (\"undefined\" === typeof days)\n days = 15\n if (\"undefined\" !== typeof this.card.lockstatus) {\n if (!this.hasPrepaidInterest()) {\n\n this.props.addSelectedLoanEstimatedClosingCosts(this.props.application.selection.estimatedclosingcosts)\n\n this.props.addSelectedLoanPrepaid(service, name, \"daily\")\n\n this.props.updatePaymentPeriod(name, service, days)\n\n this.props.updatePaymentAmount(name, service, rate)\n } else {\n this.props.updatePrepaidDefault(name, service, \"daily\", days, rate)\n\n }\n } else {\n this.props.updatePrepaidDefault(name, service, \"daily\", days, rate)\n\n }\n }\n componentDidMount() {\n\n }\n hasPrepaidInterest = () => {\n let cc = this.props.application.selection.estimatedclosingcosts\n if (null != this.card.estimatedclosingcosts)\n cc = this.card.estimatedclosingcosts\n\n let ret = false\n Object.keys(cc.prepaids).forEach(function (key) {\n\n if (cc.prepaids[key].paymentname === \"Prepaid Interest\" && cc.prepaids[key].amount !== 0) {\n ret = true\n }\n });\n return ret\n }\n\n\n canShopFor = () => {\n\n let cc = this.props.application.selection.estimatedclosingcosts\n if (null != this.card.estimatedclosingcosts)\n cc = this.card.estimatedclosingcosts\n\n let total = 0\n Object.keys(cc.canshopservices).forEach(function (key) {\n total += parseFloat(cc.canshopservices[key].estimateamount)\n });\n this.canShopForFee = total\n let process = (key, index) => {\n return \n \n
\n {Object.keys(cc.canshopservices).map(process)}\n \n
\n )\n\n }\n\n cantShopFor = () => {\n let cc = this.props.application.selection.estimatedclosingcosts\n\n if (null != this.card.estimatedclosingcosts)\n cc = this.card.estimatedclosingcosts\n\n if (this.card.FHAMIP != null) {\n\n let addFha = () => {\n let found = false\n\n cc.cannotshopservices.forEach(key => {\n if (key.servicename === com.upfrontMI) {\n key.estimateamount = this.card.FHAMIP.upfrontMIP\n found = true\n }\n })\n if (!found) {\n let s = new service()\n s.servicename = com.upfrontMI\n s.estimateamount = this.card.FHAMIP.upfrontMIP\n cc.cannotshopservices.push(s)\n }\n }\n\n addFha()\n\n } else {\n\n for (let i = 0; i < cc.cannotshopservices.length; i++) {\n if (cc.cannotshopservices[i].servicename === com.upfrontMI) {\n cc.cannotshopservices = cc.cannotshopservices.splice(i, 1)\n break\n }\n }\n\n }\n\n let total = 0\n Object.keys(cc.cannotshopservices).forEach(function (key) {\n total += parseFloat(cc.cannotshopservices[key].estimateamount)\n });\n this.cantShopForFee = total\n\n let process = (key, index) => {\n\n return \n \n
\n {Object.keys(cc.cannotshopservices).map(process)}\n \n
\n )\n }\n totalLoanCost = () => {\n return (\n \n \n
\n\n \n
\n )\n\n }\n otherTotal = () => {\n return (\n \n \n
\n\n \n
\n )\n }\n\n totalClosing = () => {\n\n let DI = this.cantShopForFee + this.canShopForFee + this.originationFees + this.taxFees + this.prepaidFees + this.initialEscrowAtClosingFee +\n this.otherFees\n\n let lender_credit = this.card.closing_cost < 0 ? -this.card.closing_cost : 0\n\n this.totalclosingcosts = DI + lender_credit\n\n if (this.props.card.lender_credit <= 0) {\n this.totalclosingcosts = DI + this.props.card.lender_credit\n } else {\n this.totalclosingcosts = DI\n }\n let remaining_credits = 0\n if (this.totalclosingcosts < 0) {\n remaining_credits = this.totalclosingcosts\n this.totalclosingcosts = 0\n }\n\n return (\n \n \n
\n \n
\n {this.props.card.lender_credit > 0 ?\n \"\" :\n \n
\n }\n {remaining_credits < 0 ?\n \n
\n\n : \"\"}\n \n
\n )\n }\n\n taxes = () => {\n let cc = this.props.application.selection.estimatedclosingcosts\n\n if (null != this.card.estimatedclosingcosts)\n cc = this.card.estimatedclosingcosts\n let total = parseFloat(cc.recordingandgovernmentfees) + parseFloat(cc.transfertax)\n this.taxFees = total\n\n return (\n \n \n
\n \n
\n \n
\n\n\n \n
\n )\n }\n\n originationCharges = () => {\n let lender_fee = parseFloat(this.props.card.lender_fee)\n //let broker_fee = Math.floor(0.01 * parseFloat(this.props.application.selection.loansize))\n let broker_fee = parseFloat(this.props.card.lender_credit)\n if (broker_fee > 0)\n this.originationFees = lender_fee + broker_fee\n else\n this.originationFees = lender_fee\n return (\n \n \n
\n \n
\n {broker_fee > 0 ?\n \n
: \"\"}\n \n
\n )\n }\n prepaids = () => {\n let cc\n if (\"undefined\" !== typeof this.card.lockstatus) {\n cc = this.props.application.selection.selectedloan.estimatedclosingcosts\n } else {\n cc = this.props.application.selection.estimatedclosingcosts\n }\n\n let total = 0\n Object.keys(cc.prepaids).forEach(function (key) {\n total += Math.ceil(parseFloat(cc.prepaids[key].amount) * parseFloat(cc.prepaids[key].prepaidperiods))\n });\n\n this.prepaidFees = total\n\n let displayPrepaid = (item, index) => {\n return (\n \n {item.prepaidperiods} {item.period === \"daily\" ? \"days\" : \"months\"} at ${com.commaizeFloat(item.amount.toFixed(2))}
}\n \n \n \n
\n {cc.prepaids.map(displayPrepaid)}\n\n \n
\n )\n }\n initialescrowatclosing = () => {\n let cc = this.props.application.selection.estimatedclosingcosts\n if (\"undefined\" !== typeof this.card.estimatedclosingcosts)\n cc = this.card.estimatedclosingcosts\n\n\n let total = 0\n Object.keys(cc.initialescrowpaymentsatclosing).forEach(function (key) {\n total += parseFloat(cc.initialescrowpaymentsatclosing[key].amount) * parseFloat(cc.initialescrowpaymentsatclosing[key].prepaidperiods)\n });\n\n\n this.initialEscrowAtClosingFee = total\n\n let displayPrepaid = (item, index) => {\n\n return (\n \n {item.prepaidperiods} months at ${com.commaizeFloat(item.amount)}
}\n \n \n \n
\n {cc.initialescrowpaymentsatclosing.map(displayPrepaid)}\n\n \n
\n )\n }\n other = () => {\n let cc = this.props.application.selection.estimatedclosingcosts\n if (\"undefined\" !== typeof this.card.estimatedclosingcosts)\n cc = this.card.estimatedclosingcosts\n\n let total = 0\n Object.keys(cc.othercosts).forEach(function (key) {\n total += parseFloat(cc.othercosts[key].estimateamount)\n });\n this.otherFees = total\n let process = (key, index) => {\n\n return \n \n
\n {Object.keys(cc.othercosts).map(process)}\n \n
\n )\n }\n cashtoclose = () => {\n let cc = this.props.application.selection.estimatedclosingcosts\n if (\"undefined\" !== typeof this.card.estimatedclosingcosts)\n cc = this.card.estimatedclosingcosts\n let getDownpayment = () => {\n\n if (\"undefined\" === typeof this.props.card.downpayment) {\n let customerfunds = 0\n\n switch (this.props.property.purpose) {\n case \"purchase\":\n customerfunds = this.props.selection.downpayment\n break;\n case \"refinance\":\n customerfunds = this.props.selection.paydown\n break;\n case \"cashoutrefinance\":\n customerfunds = this.props.selection.cashout\n break;\n default:\n alert(\"should not see this!\")\n break;\n }\n return customerfunds\n }\n\n return this.props.card.downpayment + this.props.card.paydown\n }\n this.finalCashToClose = this.totalclosingcosts + parseFloat(cc.closingcostsfinanced) + getDownpayment() +\n parseFloat(cc.deposit) + parseFloat(cc.fundsforborrower) + parseFloat(cc.sellerscredits)\n + parseFloat(cc.adjustmentsothercredits)\n\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 getLoanSize = () => {\n let card = this.props.card\n if (\"undefined\" !== typeof (card.loansize))\n return parseFloat(card.loansize)\n\n return parseFloat(this.props.application.selection.loansize)\n }\n render = () => {\n return \n \n
\n \n
\n
\n }\n}\nclass LoanDetails extends Component {\n constructor(props) {\n super(props)\n this.state = {\n ltv: 0,\n cltv: 0,\n hcltv: 0,\n\n }\n // calculate the set of tasks\n this.yearstohold = Math.min(parseInt(this.props.application.keepinghousefor), parseInt(this.props.card.Term))\n if (isNaN(this.yearstohold))\n this.yearstohold = 7\n this.card = this.props.card\n }\n\n\n getClosingCosts = (card) => {\n let cc = card.closing_cost\n if (cc < 0)\n cc = 0\n return cc\n }\n\n displaySelectedCard = () => {\n let card = this.props.card\n\n let getType = () => {\n\n if (card.amortization === \"fixed\" || card.MortgageAmortization === \"fixed\")\n return \"Fixed rate\"\n\n return \"ARM \" + card.Arm.fixedperiod + \"/1\"\n }\n let getLoanSize = () => {\n if (\"undefined\" !== typeof (card.loansize))\n return parseFloat(card.loansize)\n\n return parseFloat(this.props.application.selection.loansize)\n }\n let loansize = parseInt(getLoanSize())\n let interest10 = com.getClosedInterestPaid(0.01 * card.base_rate, loansize, card.Term, this.yearstohold)\n let interesttotal = com.getClosedInterestPaid(0.01 * card.base_rate, loansize, card.Term, card.Term)\n let purposeOfLoan = () => {\n switch (this.props.application.property.purpose) {\n case \"purchase\": {\n return \"Purchase\"\n }\n case \"refinance\": {\n return \"Refinance to improve rate or term\"\n }\n case \"cashoutrefinance\": {\n return \"Cash out refinance\"\n }\n default: return \"Unknown\"\n }\n }\n\n\n let getPaydown = () => {\n let cc = this.props.application.selection\n if (null !== cc.selectedloan)\n cc = cc.selectedloan\n switch (this.props.application.property.purpose) {\n case \"purchase\":\n return Closing costs are what you pay for points, fees and services to close your loan.
\n \n\n These are only initial estimates!
\n
\n \n These are only initial estimates!
The amounts shown on your official Loan Estimate may differ.
\n Please refer to our FAQ for information on Loan Estimate.\n
\n Downpayment
${com.commaizeFloat(cc.downpayment.toFixed(2))}
\n\n case \"refinance\":\n return ${com.commaizeFloat(cc.downpayment.toFixed(2))}
Paydown principal
${com.commaizeFloat(cc.paydown.toFixed(2))}
\n\n case \"cashoutrefinance\":\n return ${com.commaizeFloat(cc.paydown.toFixed(2))}
Cash out
${com.commaizeFloat(cc.cashout.toFixed(2))}
\n default:\n alert(\"should not see this!\")\n return 0\n }\n }\n let getPMINeed = () => {\n let pmi = card.PMICost\n if (\"undefined\" !== typeof card.pmi) {\n pmi = card.pmi\n }\n return pmi\n }\n let getPMI = () => {\n let pmi = card.PMICost\n if (\"undefined\" !== typeof card.pmi) {\n pmi = card.pmi\n }\n if (0 === pmi)\n return \"Not required\"\n\n return ${com.commaizeFloat(pmi)} \n }\n let getCurrentRate = () => {\n let rate = 0\n let loans = this.props.application.assetsandliabilities.loans\n for (let i = 0; i < loans.length; i++) {\n let cc = loans[i]\n\n if (cc.forsubjectproperty && this.props.application.property.purpose !== \"purchase\") {\n rate = cc.rate\n }\n\n }\n return rate\n }\n let getAppraisal = () => {\n return parseFloat(this.props.application.property.appraisal)\n }\n let getLenderCredit = () => {\n if (card.closing_cost > 0)\n return 0\n return - parseFloat(card.closing_cost)\n }\n let getCurrentProgram = () => {\n switch (this.props.application.property.refinance.currentprogram) {\n case \"fixed\": return \"Fixed rate\"\n case \"arm\": return \"ARM\"\n case \"baloon\": return \"Baloon\"\n case \"heloc\": return \"HELOC\"\n case \"negativeamortization\": return \"Negative Amortization\"\n case \"interestonly\": return \"Interest Only\"\n case \"noloan\": return \"No current loan\"\n default: return \"No current loan specified\"\n }\n }\n let getPrepaidInterest = () => {\n return card.prepaid_interest\n }\n return ${com.commaizeFloat(cc.cashout.toFixed(2))}
\n \n\n \n
\n {purposeOfLoan()}\n \n
\n ${com.commaizeFloat(getLoanSize().toFixed(2))}\n \n
\n ${com.commaizeFloat(getAppraisal().toFixed(2))}\n \n {\n this.props.application.property.purpose === \"purchase\" ?\n
${com.commaize(this.props.application.property.salesprice)}\n : \"\"\n }\n
\n {\n (this.props.application.property.purpose !== \"purchase\") ?\n \n
\n : \"\"\n }\n \n
\n\n \n
\n {card.Term} years\n \n
\n {card.base_rate}%\n \n
\n {card.APR}%\n \n
\n ${com.commaizeFloat(card.monthly_payment.toFixed(2))}\n \n
\n ${com.commaizeFloat((this.getClosingCosts(card)).toFixed(2))}\n \n\n
\n \n\n
{this.yearstohold} years:
\n ${com.commaizeFloat(interest10.toFixed(2))}\n \n
loan life:
\n ${com.commaizeFloat(interesttotal.toFixed(2))}\n \n\n
\n ${com.commaizeFloat(getPrepaidInterest())}\n \n\n
\n {com.capitalize(card.Mtype.replace('_', ' ').toLowerCase().replace('fha', 'FHA'))}\n \n
\n {card.points.toFixed(3)}\n \n\n
\n \n
\n ${com.commaizeFloat(getLenderCredit().toFixed(2))} \n \n {card.lender_fee ?\n
\n ${com.commaizeFloat(card.lender_fee.toFixed(2))}\n :
\n {card.min_months_reserves} months\n \n\n
\n ${com.commaizeFloat(card.prepaid_interest.toFixed(2))} \n \n\n
\n {card.lockDay} days\n \n
\n\n \n\n {getPMINeed() !== 0 ?\n
\n {getPMI()} \n : \"\"}\n {card.FHAMIP != null ?\n\n
\n {card.FHAMIP.upfrontMIP} \n : \"\"}\n {card.FHAMIP != null ?\n
\n {card.FHAMIP.monthlyMIP} \n \n\n : \"\"}\n
\n \n
\n\n }\n render() {\n\n return (\n \n {purposeOfLoan()}\n \n
\n ${com.commaizeFloat(getLoanSize().toFixed(2))}\n \n
\n ${com.commaizeFloat(getAppraisal().toFixed(2))}\n \n {\n this.props.application.property.purpose === \"purchase\" ?\n
${com.commaize(this.props.application.property.salesprice)}\n : \"\"\n }\n
\n {card.Term} years\n \n
\n {card.base_rate}%\n \n
\n {card.APR}%\n \n
\n ${com.commaizeFloat(card.monthly_payment.toFixed(2))}\n \n
\n ${com.commaizeFloat((this.getClosingCosts(card)).toFixed(2))}\n \n\n
{this.yearstohold} years:
\n ${com.commaizeFloat(interest10.toFixed(2))}\n \n
loan life:
\n ${com.commaizeFloat(interesttotal.toFixed(2))}\n \n\n
\n ${com.commaizeFloat(getPrepaidInterest())}\n \n\n
\n {com.capitalize(card.Mtype.replace('_', ' ').toLowerCase().replace('fha', 'FHA'))}\n \n
\n {card.points.toFixed(3)}\n \n\n
\n ${com.commaizeFloat(getLenderCredit().toFixed(2))} \n \n {card.lender_fee ?\n
\n ${com.commaizeFloat(card.lender_fee.toFixed(2))}\n :
\n {card.min_months_reserves} months\n \n\n
\n ${com.commaizeFloat(card.prepaid_interest.toFixed(2))} \n \n\n
\n {card.lockDay} days\n \n
\n {getPMI()} \n : \"\"}\n {card.FHAMIP != null ?\n\n
\n {card.FHAMIP.upfrontMIP} \n : \"\"}\n {card.FHAMIP != null ?\n
\n {card.FHAMIP.monthlyMIP} \n \n\n : \"\"}\n
\n\n \n
\n\n\n
\n )\n }\n}\nLoanDetails = withRouter(connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(LoanDetails))\nLoanEstimate = withRouter(connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(LoanEstimate))\nclass Details extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n }\n }\n componentDidMount() {\n\n }\n\n componentWillUnmount() { }\n\n\n handleSubmit = e => {\n return true\n }\n\n\n render() {\n\n return (\n {com.capitalize(x)}
\n}\n\nfunction getMonthlyPayment(rate, loansize, termmonths) {\n let monthlyrate = rate / 12.0\n let expn = Math.pow(1 + monthlyrate, termmonths)\n return monthlyrate*loansize*expn/(expn - 1)\n}\nfunction getClosedInterestPaid(rate, loansize, termmonths, spanmonths) {\n\n let monthlyrate = rate / 12.0\n let expn = Math.pow(1 + monthlyrate, termmonths)\n let payment = loansize * monthlyrate * expn / (expn - 1)\n payment = (Math.round(payment * 100) / 100)\n\n let accumulatedinterest = (loansize * monthlyrate - payment) *\n (Math.pow(1 + monthlyrate, spanmonths) - 1) / monthlyrate +\n spanmonths * payment\n return accumulatedinterest\n}\n\nclass AmortizationChart extends Component {\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n getSeries = () => { \n let series = []\n Object.keys(this.props.selection).forEach(key => {\n let s = {}\n s.type = \"line\"\n let t = \"\"\n if (this.props.selection[key][0].Rate.Arm == null) {\n t = \"Fixed\"\n } else {\n t = \"ARM\" + this.props.selection[key][0].Rate.Arm.fixedperiod + \"/\" + this.props.selection[key][0].Rate.Arm.adjustmentperiod\n }\n\n s.name = com.capitalize(this.props.selection[key][0].Lender) + \", \" + com.capitalize(this.props.selection[key][0].Rate.Mtype.replace('_', ' ') ) + \", \" + this.props.selection[key][0].Rate.Term + \"y \" + t\n let data = []\n let termmonths = 12 * this.props.selection[key][0].Rate.Term\n let pmiaccumulated = 0\n for (let i = 1; i <= termmonths; i++) {\n var end = new Date() \n end.setMonth(end.getMonth() + i);\n \n let interest = getClosedInterestPaid(this.props.selection[key][0].Rate.base_rate / 100.0, this.props.selection[key].loansize, termmonths, i)\n\n let cumulative = this.props.selection[key][0].Rate.closing_cost + interest\n\n let total = getMonthlyPayment(this.props.selection[key][0].Rate.base_rate / 100.0, this.props.selection[key].loansize, termmonths) * i\n let paidprincipal = total - interest\n\n if(this.props.selection[key][0].Rate.FHAMIP != null) {\n cumulative += i*this.props.selection[key][0].Rate.FHAMIP.monthlyMIP + this.props.selection[key][0].Rate.FHAMIP.upfrontMIP\n }\n if(this.props.selection[key][0].Rate.PMICost) {\n if( (this.props.selection[key].loansize - paidprincipal)/this.props.appraisal > 0.8 )\n pmiaccumulated += this.props.selection[key][0].Rate.PMICost\n else {\n\n }\n cumulative += pmiaccumulated\n }\n data.push( [end, cumulative])\n }\n\n s.data = data\n series.push(s)\n\n })\n return series\n }\n\n dateRange = () => {\n var dates = []\n\n for (var i = 1; i <= this.props.maxyears*12; i++) {\n var end = new Date()\n end.setMonth(end.getMonth() + i);\n dates.push(end)\n } \n return dates;\n }\n render() {\n let series = this.getSeries()\n\n return (\n \n {\n return \"$\" + com.commaizeFloat(Math.round(value));\n },\n },\n x: {\n formatter: function (value) {\n let d = new Date(value)\n return d.toLocaleDateString('en-us', { year: 'numeric', month: 'long' });\n },\n }\n },\n legend: {\n show: false,\n position: \"top\",\n },\n toolbar: {\n show: true,\n autoSelected: 'zoom'\n }, \n stroke: {\n curve: \"straight\",\n width: 2\n },\n \n xaxis: {\n type: \"datetime\",\n //categories: this.dateRange(),\n //tickAmount: 10,\n /*\n labels: {\n datetimeFormatter: {\n year: 'yyyy',\n month: 'MMM yy', \n }\n } \n \n labels: {\n formatter: function (value, timestamp, opts) {\n return opts.dateFormatter(new Date(timestamp), \"yyyy\");\n },\n }, */\n },\n yaxis: {\n labels: {\n formatter: (value) => {\n return \"$\" + com.commaizeFloat(Math.round(value));\n },\n },\n },\n }}\n series={series}\n // width=\"700\"\n />\n
\n );\n }\n}\nclass Comparison extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n properties: [],\n maxyears: 30\n }\n\n }\n recalculate = () => {\n let props = this.props\n let lenders = [x => x, Lender:
]\n let properties = []\n let index=0\n Object.keys(props.selection).forEach(key => {\n lenders.push({com.capitalize(props.selection[key][0].Lender)}
)\n index += 1\n })\n properties.push(lenders)\n\n let loansizes = [floatize, \"Loan Size:\"]\n Object.keys(props.selection).forEach(key => {\n loansizes.push(props.selection[key].loansize)\n })\n properties.push(loansizes)\n\n switch (props.application.property.purpose) {\n case \"purchase\": {\n let downpayment = [floatize, \"Downpayment:\"]\n Object.keys(props.selection).forEach(key => {\n downpayment.push(props.selection[key].downpayment)\n })\n properties.push(downpayment)\n break;\n }\n case \"refinance\": {\n let paydown = [floatize, \"Pay down:\"]\n Object.keys(props.selection).forEach(key => {\n paydown.push(props.selection[key].paydown)\n })\n properties.push(paydown)\n break;\n }\n case \"cashoutrefinance\": {\n let cashout = [floatize, \"Cash out:\"]\n Object.keys(props.selection).forEach(key => {\n cashout.push(props.selection[key].cashout)\n })\n properties.push(cashout)\n\n break;\n }\n default:\n alert(\"should not see this!\")\n break;\n }\n let name = [lendername, \"Type:\"]\n Object.keys(props.selection).forEach(key => {\n name.push(props.selection[key][0].Rate.Mtype)\n })\n properties.push(name)\n\n let term = [x => { return x + \" years\" }, \"Term:\"]\n Object.keys(props.selection).forEach(key => {\n term.push(props.selection[key][0].Rate.Term)\n })\n properties.push(term)\n\n let amor = [x => { return x }, \"Amortization:\"]\n Object.keys(props.selection).forEach(key => {\n if (props.selection[key][0].Rate.Arm == null) {\n amor.push(\"Fixed\")\n } else {\n amor.push(\"ARM\" + props.selection[key][0].Rate.Arm.fixedperiod + \"/\" + props.selection[key][0].Rate.Arm.adjustmentperiod)\n }\n })\n properties.push(amor)\n\n let mopayment = [floatize, \"Mo. Payment:\"]\n Object.keys(props.selection).forEach(key => {\n mopayment.push(props.selection[key][0].Rate.monthly_payment)\n })\n properties.push(mopayment)\n\n let baserate = [percent, \"Base Rate:\"]\n Object.keys(props.selection).forEach(key => {\n baserate.push(props.selection[key][0].Rate.base_rate)\n })\n properties.push(baserate)\n\n let apr = [percent, \"APR:\"]\n Object.keys(props.selection).forEach(key => {\n apr.push(props.selection[key][0].Rate.APR)\n })\n properties.push(apr)\n\n let cc = [floatize, \"Closing Cost:\"]\n Object.keys(props.selection).forEach(key => {\n cc.push(props.selection[key][0].Rate.closing_cost >= 0 ? Math.ceil(props.selection[key][0].Rate.closing_cost) : 0)\n })\n properties.push(cc)\n\n let lc = [floatize, \"Remaining Credits:\"]\n Object.keys(props.selection).forEach(key => {\n lc.push(props.selection[key][0].Rate.closing_cost < 0 ? -Math.ceil(props.selection[key][0].Rate.closing_cost) : 0)\n })\n properties.push(lc)\n\n let cash2close = [floatize, \"Cash to close:\"]\n switch (props.application.property.purpose) {\n case \"purchase\": {\n Object.keys(props.selection).forEach(key => {\n let c2c = props.selection[key].downpayment\n c2c += (props.selection[key][0].Rate.closing_cost >= 0 ? Math.ceil(props.selection[key][0].Rate.closing_cost) : 0)\n // add FHA stuff! \n cash2close.push(c2c)\n })\n properties.push(cash2close)\n break;\n }\n case \"refinance\": {\n Object.keys(props.selection).forEach(key => {\n let c2c = props.selection[key].paydown\n c2c += (props.selection[key][0].Rate.closing_cost >= 0 ? Math.ceil(props.selection[key][0].Rate.closing_cost) : 0)\n // add FHA stuff! \n cash2close.push(c2c)\n })\n properties.push(cash2close)\n break;\n }\n case \"cashoutrefinance\": {\n Object.keys(props.selection).forEach(key => {\n let c2c = Math.min(0, props.selection[key][0].Rate.closing_cost)\n // add FHA stuff! \n cash2close.push(c2c)\n })\n // skip this for cashout for now\n // this.state.properties.push(cash2close) \n break;\n }\n default:\n alert(\"should not see this!\")\n break;\n }\n\n\n let tc = [floatize, \"Total Cost Over Term:\"]\n Object.keys(props.selection).forEach(key => {\n let c = Math.ceil(props.selection[key][0].Rate.closing_cost +\n com.getClosedInterestPaid(0.01 * props.selection[key][0].Rate.base_rate, props.selection[key].loansize,\n props.selection[key][0].Rate.Term, props.selection[key][0].Rate.Term))\n\n tc.push(c)\n })\n properties.push(tc)\n\n let yearstohold = parseInt(this.props.application.keepinghousefor)\n let llc = [floatize, \"Cost over \" + yearstohold + \" years :\"]\n Object.keys(props.selection).forEach(key => {\n let c = Math.ceil(props.selection[key][0].Rate.closing_cost +\n com.getClosedInterestPaid(0.01 * props.selection[key][0].Rate.base_rate, props.selection[key].loansize,\n props.selection[key][0].Rate.Term, Math.min(yearstohold, props.selection[key][0].Rate.Term)))\n\n llc.push(c)\n })\n properties.push(llc)\n\n let mm = [floatize, \"Reserves required:\"]\n Object.keys(props.selection).forEach(key => {\n mm.push(props.selection[key][0].Rate.min_months_reserves * props.selection[key][0].Rate.monthly_payment)\n })\n properties.push(mm)\n let haspmi = false\n let pm = [x => { return x }, \"Needs PMI?\"]\n Object.keys(props.selection).forEach(key => {\n pm.push(props.selection[key][0].Rate.PMICost === 0 ? \"no\" : \"yes\")\n if(props.selection[key][0].Rate.PMICost !== 0) { \n haspmi = true\n }\n })\n properties.push(pm)\n\n if(haspmi) {\n let pm = [floatize, \"Mortgage insurance:\"]\n Object.keys(props.selection).forEach(key => {\n pm.push(props.selection[key][0].Rate.PMICost )\n })\n properties.push(pm)\n\n }\n let hasfha = false\n Object.keys(props.selection).forEach(key => {\n if(props.selection[key][0].Rate.FHAMIP != null ) {\n hasfha = true\n }\n })\n if(hasfha) {\n let prepi = [floatize, \"FHA mo. premium:\"]\n Object.keys(props.selection).forEach(key => {\n if( props.selection[key][0].Rate.FHAMIP != null )\n prepi.push(props.selection[key][0].Rate.FHAMIP.monthlyMIP)\n else\n prepi.push(0)\n\n })\n properties.push(prepi) \n\n let ini = [floatize, \"FHA upfront payment:\"]\n Object.keys(props.selection).forEach(key => {\n if( props.selection[key][0].Rate.FHAMIP != null )\n ini.push(props.selection[key][0].Rate.FHAMIP.upfrontMIP)\n else\n ini.push(0)\n\n })\n properties.push(ini) \n }\n\n let prepi = [floatize, \"Prepaid Interest:\"]\n Object.keys(props.selection).forEach(key => {\n prepi.push(props.selection[key][0].Rate.prepaid_interest)\n })\n properties.push(prepi)\n\n let fingerclass = \"fas fa-hand-point-right mx-1\"\n let choose = [(x) => x, <>Choose this loan ]\n Object.keys(props.selection).forEach(key => {\n let oncheckbox = (e) => {\n props.callselect(key)\n }\n let ch =\n \n
\n )\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(Comparison)\n\n","import React from 'react';\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport Form from 'react-bootstrap/Form'\nimport Button from 'react-bootstrap/Button'\nimport Container from 'react-bootstrap/Container'\nimport Modal from 'react-bootstrap/Modal'\nimport HorizontalSlider from '../Common/HorizontalSlider'\nimport ScrollBar from '../Common/components/ScrollBar';\nimport Dropdown from 'react-bootstrap/Dropdown'\nimport UpDown from '../UpDown'\nimport { isMobileOnly } from 'react-device-detect';\nimport { Redirect } from 'react-router-dom'\nimport { ChosenLoan, LoanProduct, service, fees } from '../State'\nimport * as com from \"../Common.js\"\nimport 'react-credit-cards/es/styles-compiled.css';\nimport Multiselect from '../Common/Multiselect';\nimport { connect } from 'react-redux'\nimport { MonhtlyChangeBP } from '../Common/Tooltip'\nimport { Skeleton, Alert } from 'antd';\nimport { tooltip, tooltipFlat, Tips } from '../Common/Tooltip'\nimport Details from './Details'\nimport Comparison from './Comparison'\nimport * as act from \"../Store/actions\"\nimport { getCurrentState } from '../Store'\nimport { Link } from 'react-router-dom'\nimport * as st from \"../State\"\n\nconst lender2icon = {\n NewFi: '/newfi.png',\n RocketPro: '/rocketpro.png',\n FinanceOfAmerica: '/fomo.png',\n Plaza: '/plaza.png',\n Caliber: '/caliber.png',\n HomePoint: '/homepoint.png',\n HomePointDelegated: '/homepoint.png',\n Amwest: '/amwest.png',\n PreferredRate: '/preferredrate.png',\n Flagstar: '/flagstar.png',\n AmeriHome: '/amerihome.png',\n Chase: '/chase.png',\n Fairway: '/fairway.png',\n PennyMac: '/pennymac.png',\n PRMG: '/prmg.png',\n ResiCentral: '/resicentral.png',\n Sprout: '/sprout.png',\n USBank: '/usbank.png',\n FifthThirdBank: '/53bank.png',\n Provident: '/provident.png',\n LoanDepot: '/loandepot.png',\n DivineMortgage: '/divinemortgage.png',\n WholesaleMortgageBankers: '/wmb.png',\n LoanStore: '/loanstore.png',\n NewWaveLending: '/newwavelending.png'\n}\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n property: state.application.property,\n selection: state.application.selection,\n borrower: state.borrower,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n changeBorrowerInfo: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event.target.value, who, verb))\n },\n changeBorrowerInfoCheck: (event, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(event.target.checked, who, verb))\n },\n changePhoneInfo: (input, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(input, who, verb))\n },\n updateSelectField: (input, verb) => {\n dispatch(act.UpdateSelectField(input, verb))\n },\n updateApplicationAttribute: (input, verb) => {\n dispatch(act.UpdateApplicationAttribute(input, verb))\n },\n changeMainPropertyUnits: (input) => {\n dispatch(act.ChangeMainPropertyUnits(input))\n },\n updateExpenses: (event, who, verb) => {\n dispatch(act.UpdateExpenses(event.target.value, who, verb))\n },\n updatePrepaidDefault: (name, period, prepaidperiods, amount) => {\n dispatch(act.UpdatePrepaidDefault(name, period, prepaidperiods, amount))\n },\n});\n\nvar hash = require('object-hash');\n\n\n\nconst sorts = {\n selectbyrate: \"Base Rate\",\n selectbyapr: \"Best APR\",\n //selectbymonthlypayment: \"Smallest Monthly Payment\",\n selectbyclosingcosts: \"Smallest Upfront costs\",\n\n}\n\nconst typeoptions = [\n { name: 'ARM 5', id: \"arm51\", cliff: 5 },\n { name: 'ARM 7', id: \"arm71\", cliff: 7 },\n { name: 'ARM 10', id: \"arm101\", cliff: 10 },\n { name: 'Fixed', id: \"fixed\", cliff: 0 }]\n\nconst termoptions = [\n { name: '30 year', id: \"year30\", years: 30 },\n { name: '25 year', id: \"year25\", years: 25 },\n { name: '20 year', id: \"year20\", years: 20 },\n { name: '15 year', id: \"year15\", years: 15 },\n { name: '10 year', id: \"year10\", years: 10 }]\n\nexport const pointsExplained = \n \n\n \n {\n display(this.state.properties)\n }\n
\n \n
\n
\n Mortgage points are percentage of the loan that you pay to the lender for a lower monthly rate.\n
\nconst customstyle = {\n multiselectContainer: { // To change css for multiselect (Width,height,etc..)\n\n fontSize: '14px',\n },\n searchBox: { // To change search box element look\n fontSize: '.875rem',\n minHeight: 'calc(1.5em + .5rem + 2px)',\n padding: '.25rem .5rem',\n marginBottom: '0px !important',\n\n },\n inputField: { // To change input field position or margin\n margin: '0px'\n },\n chips: { // To change css chips(Selected options)\n background: 'rgba(0,48,116,1)',\n marginBottom: '2px !important',\n fontSize: '12px',\n padding: '2px 10px',\n },\n optionContainer: { // To change css for option container \n fontSize: '12px',\n }\n}\n\nexport const getFees = function (loanid) {\n let token = sessionStorage.getItem(\"ZeitroA\")\n this.setState({ loading: true })\n fetch('/data/getFees', {\n method: 'POST',\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\",\n \"Content-Type\": \"application/json\",\n \"X-Borrower\": this.props.borrowerid,\n },\n }).then(\n response => {\n if (response.status !== 200) {\n alert(\"Sorry, an internal error occurred. Please contact your loan officer for assistance.\")\n this.setState({\n loading: false\n })\n return;\n }\n response.json().then(_fees => {\n\n let f = new fees(_fees)\n f.cannotshopservices = _fees.cannotshopservices\n f.canshopservices = _fees.canshopservices\n f.closingcostsfinanced = _fees.closingcostsfinanced\n f.deposit = _fees.deposit\n f.downpayment = _fees.downpayment\n f.fundsforborrower = _fees.fundsforborrower\n f.initialescrowpaymentsatclosing = _fees.initialescrowpaymentsatclosing\n f.othercosts = _fees.othercosts\n f.prepaids = _fees.prepaids\n f.recordingandgovernmentfees = _fees.recordingandgovernmentfees\n f.transfertax = _fees.transfertax\n f.sellerscredits = _fees.sellerscredits\n f.adjustmentsothercredits = _fees.adjustmentsothercredits\n\n this.props.updateSelectField(f, \"estimatedclosingcosts\")\n getCurrentState()\n setTimeout(() => this.getDTI(loanid), 3000)\n })\n }\n\n ).catch((err) => {\n\n this.setState({ loading: false })\n alert(\"Network error\")\n });\n}\nexport const getDTI = function (loanid) {\n let token = sessionStorage.getItem(\"ZeitroA\")\n this.setState({ loading: true })\n console.log(loanid)\n fetch('/data/getPreDTI', {\n method: 'POST',\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\",\n \"Content-Type\": \"application/json\",\n \"X-Borrower\": this.props.borrowerid,\n \"X-Loan\": typeof loanid === \"undefined\" ? \"\" : loanid,\n },\n\n }).then(\n response => {\n if (response.status !== 200) {\n alert(\"Some internal error occurred. Please try again later.\")\n this.setState({\n loading: false\n })\n return;\n }\n response.json().then(pr => {\n this.setState({ loading: false })\n\n if (typeof pr[\"Error\"] !== \"undefined\") {\n console.log(pr.Error)\n alert(\"Sorry, but we are unable to provide rates right now. Please contact contact@zeitro.com for help.\")\n } else {\n this.loaded = true\n this.fees = pr.dtiData[0].fees\n this.fico = pr.fico\n this.zeitro_fee = pr.zeitro_fee\n this.prepaid_interest_days = pr.prepaid_interest_days\n //this.props.updateSelectField(this.zeitro_fee.default, \"ourfee\")\n this.props.updateSelectField(this.prepaid_interest_days, \"prepaiddays\")\n\n this.productReload(pr)\n }\n })\n }\n\n ).catch((err) => {\n\n this.setState({ loading: false })\n alert(\"Network error\")\n });\n}\nexport const getCitizenship = function () {\n let status = this.props.application.borrower.citizenship\n if (status === \"citizen\") {\n return [\"US_CITIZENS\", \"\"]\n }\n if (status === \"permanent\") {\n return [\"PERMANENT_RESIDENT_ALIEN\", \"\"]\n }\n return [\"NON_PERMANENT_RESIDENT_ALIEN\", this.props.application.borrower.visa.replace('-', '_')]\n\n}\nexport const getOccupancy = function () {\n switch (this.props.application.property.occupancy) {\n case \"principal\":\n return \"PRIMARY\"\n case \"secondhome\":\n return \"SECOND_HOME\"\n case \"investment\":\n return \"INVESTMENT\"\n default:\n alert(\"wrong occupancy\")\n return \"PRIMARY\"\n }\n}\nexport const getPropertyType = function () {\n let remap = {\n condominiumdetached: \"CONDOMINIUM_DETACHED\",\n condominium: \"CONDOMINIUM_ATTACHED\",\n pudattached: \"PUD_ATTACHED\",\n puddetached: \"PUD_DETACHED\",\n singlefamilyattached: \"SINGLE_FAMILY_ATTACHED\",\n singlefamilydetached: \"SINGLE_FAMILY_DETACHED\",\n twotofourfamily: \"TWO_TO_FOUR_FAMILY\",\n manufacturedhome: \"MANUFACTURED_HOME\"\n }\n let out = remap[this.props.application.property.propertytype]\n if (this.props.application.property.isManufacturedHome === true) {\n out = \"MANUFACTURED_HOME\"\n }\n return out\n}\n\nexport const productReload = function (predti) {\n if (null == this.loaded)\n return\n // this one needs work\n let firstTimeHomeBuyer = (this.props.application.firsttimehomebuyer)\n let [citizenship, visa] = this.getCitizenship()\n\n let request = {\n state: this.props.application.property.state,\n county: this.props.application.property.county,\n purpose: com.Purpose2Calculator(this.props.property.purpose),\n loanAmount: com.safeParseInt(this.state.loansize),\n appraisal: this.props.application.property.appraisal, \n estimatedClosingCosts: this.fees,\n firstTimeHomeBuyer: firstTimeHomeBuyer,\n units: this.props.application.property.propertytype === \"twotofourfamily\" ? com.safeParseInt(this.props.application.property.units) : 1,\n occupancy: this.getOccupancy(), // propagated\n property: this.getPropertyType(),\n selfemployed: this.props.application.borrower.occupation.selfemployed,\n citizenship: citizenship,\n visaType: visa,\n preDTI: predti,\n property: this.props.application.property.propertytype,\n }\n\n let token = sessionStorage.getItem(\"ZeitroA\")\n this.setState({ loading: true })\n fetch('/data/getproducts', {\n method: 'POST',\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\",\n \"Content-Type\": \"application/json\",\n \"X-Borrower\": this.props.borrowerid,\n },\n body: JSON.stringify(request)\n }).then(\n response => {\n if (response.status !== 200) {\n\n this.setState({\n loading: false, errorText: Conversely, negative points are lender credits that can be used by you to lower your closing costs, or be put into an impound account to pay your insurance and taxes.
Lender credits are paid to you in exchange for a higher interest rate{pr.status}:{pr.message}
\n break;\n case \"1\":\n msg =Unfortunately, it looks like your FICO score is too low to qualify for a loan.
\n break\n case \"2\":\n msg =Unfortunately, your debt to income ratio is too high to qualify for a loan.
\n You may want to consider paying off some debts.
\n break\n case \"3\":\n msg = Unfortunately, your loan amount to property value ratio is too high to qualify for a loan.
\n You may want to consider taking a smaller loan. Use the slider in the top left corner to investigate.
\n break\n case \"4\":\n msg = Unfortunately, your income is too low to qualify for a loan of this size.
\n break\n case \"5\":\n msg =Unfortunately, we could not find a loan product for your particular situation. You may want to consider taking a smaller loan. Use the slider in the top left corner to investigate.
\n break\n case \"6\":\n msg =Unfortunately, your property is not qualified for a loan.
\n break\n\n }\n */\n let showDetails = () => {\n if (pr == null) return \"\"\n if (\"undefined\" !== typeof this.props.borrowerid) {\n let out = []\n let reasons = pr[\"ineligible_reasons\"]\n if (reasons == null) return \"\"\n for (const [key, value] of Object.entries(reasons)) {\n let entry ={com.capitalize(key)}
\n out.push( {entry}
)\n if (value.LenderLevelReason !== \"\")\n out.push({value.LenderLevelReason}
)\n else {\n let preasons = value.ProductLevelReasons\n /* eslint-disable-next-line no-unused-vars */\n for (const [key, value] of Object.entries(preasons)) {\n out.push({value.ProductName}: {value.IneligibleReason}
)\n }\n }\n\n }\n return out\n } else\n return \"\"\n\n }\n msg = Matching engine could not find a suitable loan. Reason:
{pr[\"message\"]}
{showDetails()}
\n this.setState({\n loading: false, errorText: msg, errorCode: pr[\"status code\"],\n products: [], topProducts: []\n })\n if (this.failedProduct != null)\n this.failedProduct()\n return\n }\n if (this.askedForAssistance()) {\n products = this.filterForAssistance(products)\n }\n this.processProducts(products)\n this.setState({ loading: false })\n })\n }\n\n ).catch((err) => {\n\n this.setState({ loading: false })\n this.setState({\n loading: false, errorText: {\"Network Error\"}
,\n products: [], topProducts: []\n })\n if (this.failedProduct != null)\n this.failedProduct()\n });\n}\nexport const getLTV = function () {\n let ltv = com.safeParseInt(this.state.loansize) * 100 / com.safeParseInt(this.props.application.property.appraisal)\n let cltv = (com.safeParseInt(this.state.loansize) + com.safeParseInt(this.cltv)) * 100 / com.safeParseInt(this.props.application.property.appraisal)\n let hcltv = (com.safeParseInt(this.state.loansize) + com.safeParseInt(this.hcltv)) * 100 / com.safeParseInt(this.props.application.property.appraisal)\n return [ltv, cltv, hcltv]\n}\n\nexport class ProductPicker extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n typeselected: [],\n termselected: [],\n yearstohold: 7,\n\n minclosingcost: 0,\n maxclosingcost: 100000,\n lowclosingcost: 0,\n highclosingcost: 0,\n\n loansize: 0,\n topProducts: [],\n loading: false,\n weightclosing: this.props.selection.weightclosing,\n weighttotalcost: this.props.selection.weighttotalcost,\n weightmonthly: this.props.selection.ƒTriangggweightmonthly,\n showSelf: false,\n ltv: 60.0,\n cltv: 0,\n fico: 720,\n income: 18000.0,\n occupancy: \"PRIMARY\",\n property: \"SINGLE_FAMILY_DETACHED\",\n errorText: \"\",\n downpayment: 30000,\n defdownpayment: 30000,\n viewkey: 0,\n paydown: 0,\n cashout: 30000,\n redirect: \"\",\n positionbyemail: {},\n statusloaded: false,\n showHelp: true,\n showMore: true,\n show: false,\n detailedCard: null,\n lenders: [],\n selectedlenders: [],\n selectedmaxreserves: -1,\n maxreserves: -1,\n showPriceChanged: false,\n selectedImage: null,\n needsAdjustment: false,\n comparisonSelections: {},\n showComparison: false,\n mincashout: 0,\n dtiSpreadsheetLoading: false,\n }\n this.hcltv = null\n this.cltv = null\n this.timer = 0\n this.lenders = []\n this.changeshown = false\n this.oldmaxupfrontcost = this.props.selection.maxupfrontcost\n if (isNaN(this.oldmaxupfrontcost))\n this.oldmaxupfrontcost = null\n this.howmany2display = 5\n if (this.props.borrowerid)\n this.howmany2display *= 3\n\n switch (this.props.property.purpose) {\n case \"purchase\":\n\n if (this.props.selection.selectedloan.hash !== \"\") {\n this.state.loansize = this.props.selection.selectedloan.loansize\n this.state.downpayment = this.state.defdownpayment = com.safeParseInt(this.props.property.salesprice) - this.state.loansize\n this.props.updateSelectField(this.state.downpayment, \"downpayment\")\n } else {\n // if first time arriving this page\n console.log(this.props.selection.downpayment)\n if (this.props.selection.downpayment === 0) {\n this.state.downpayment = com.safeParseInt(this.props.property.salesprice) * 0.2\n this.state.defdownpayment = com.safeParseInt(this.props.property.salesprice) * 0.2\n this.state.loansize = com.safeParseInt(this.props.property.salesprice) * 0.8\n this.props.updateSelectField(com.safeParseInt(this.props.property.salesprice) * 0.2, \"downpayment\")\n this.props.updateSelectField(com.safeParseInt(this.props.property.salesprice) * 0.8, \"loansize\")\n\n } else {\n this.state.downpayment = com.safeParseInt(this.props.selection.downpayment)\n this.state.defdownpayment = com.safeParseInt(this.props.selection.downpayment)\n this.state.loansize = com.safeParseInt(this.props.property.salesprice) - com.safeParseInt(this.state.downpayment)\n }\n }\n break;\n case \"refinance\":\n\n if (this.props.selection.selectedloan.hash !== \"\") {\n this.state.loansize = this.props.selection.selectedloan.loansize\n this.state.downpayment = this.state.defdownpayment = com.safeParseInt(this.props.application.loanbalance) - this.state.loansize\n this.props.updateSelectField(this.state.downpayment, \"paydown\")\n\n } else {\n this.state.downpayment = com.safeParseInt(this.props.selection.paydown)\n this.state.defdownpayment = com.safeParseInt(this.props.selection.paydown)\n this.state.loansize = com.safeParseInt(this.props.application.loanbalance) - com.safeParseInt(this.props.selection.paydown)\n }\n break;\n case \"cashoutrefinance\":\n\n this.state.lmincashout = this.props.selection.selectedloan.min\n if (this.props.selection.selectedloan.hash !== \"\") {\n this.state.loansize = this.props.selection.selectedloan.loansize\n this.state.downpayment = this.state.defdownpayment = this.state.loansize - com.safeParseInt(this.props.application.loanbalance)\n if (this.state.downpayment <= 0) {\n this.state.downpayment = this.state.defdownpayment = 30000\n }\n this.props.updateSelectField(this.state.downpayment, \"cashout\")\n } else {\n this.state.downpayment = com.safeParseInt(this.props.selection.cashout)\n this.state.defdownpayment = com.safeParseInt(this.props.selection.cashout)\n this.state.loansize = com.safeParseInt(this.props.application.loanbalance) + com.safeParseInt(this.props.selection.cashout)\n }\n break;\n default:\n alert(\"should not see this!\")\n break;\n }\n\n this.props.updateSelectField(this.state.loansize.toString(), \"loansize\")\n this.downloadDTIspreadsheetRef = React.createRef();\n\n termoptions.forEach(term => {\n if (this.props.selection.loanterms.includes(term.id))\n this.state.termselected.push(term)\n })\n if (this.state.termselected.length === 0)\n this.state.termselected = [termoptions[0]]\n\n\n typeoptions.forEach(typ => {\n if (this.props.selection.loanamortizations.includes(typ.id))\n this.state.typeselected.push(typ)\n\n })\n if (this.state.typeselected.length === 0)\n this.state.typeselected = typeoptions\n this.cull = (a) => a\n this.selectsort(this.props.selection.sortby)\n\n this.width = 250\n\n this.height = Math.floor((this.width / 2) * Math.tan(3.14 / 3.0))\n if (this.props.property.salesprice === \"\") {\n this.state.redirect =Minimum cashout size is ${com.commaizeFloat(this.props.selection.mincashout)}.\n
\n
Please increase the cashout size
\n There are no qualifying loan products that fit your filters.\n
\n
Move the range sliders, change the term/amortization selections, or
\n \n |
\n
\n )\n }\n removeSelection(hash) {\n let comparisonSelections = this.state.comparisonSelections\n delete comparisonSelections[hash]\n\n this.setState({ comparisonSelections })\n }\n selectLoan(hash) {\n let ob = this.referi[hash][0]\n let loan = new ChosenLoan()\n loan.hash = hash\n\n loan.APR = ob.Rate.APR\n if (ob.Rate.Arm !== null)\n loan.Arm = ob.Rate.Arm\n loan.amortization = ob.Rate.MortgageAmortization\n loan.Mtype = ob.Rate.Mtype\n loan.Term = ob.Rate.Term\n loan.base_rate = ob.Rate.base_rate\n loan.closing_cost = ob.Rate.closing_cost\n loan.features = ob.Rate.features\n loan.high_cost_mortgage = ob.Rate.high_cost_mortgage\n loan.lender_credit = ob.Rate.lender_credit\n loan.lender_fee = ob.Rate.lender_fee\n loan.lockDay = ob.Rate.lockDay\n loan.min_months_reserves = ob.Rate.min_months_reserves\n loan.monthly_payment = ob.Rate.monthly_payment\n loan.prepaid_interest = ob.Rate.prepaid_interest\n loan.points = ob.Rate.points\n loan.pmi = ob.Rate.PMICost\n loan.FHAMIP = ob.Rate.FHAMIP\n loan.DTI = ob.Rate.DTI\n loan.matchingproducts = []\n loan.loansize = this.state.loansize\n loan.purpose = this.props.property.purpose\n loan.ourfee = this.zeitro_fee\n loan.prepaiddays = this.prepaid_interest_days\n \n if(ob.Rate.max_cashout != null) {\n loan.maxcashout = ob.Rate.max_cashout\n }\n // preserve edits if they were already made\n if (this.props.selection.selectedloan != null && this.props.selection.selectedloan.estimatedclosingcosts != null) {\n loan.estimatedclosingcosts = this.props.selection.selectedloan.estimatedclosingcosts\n } else {\n loan.estimatedclosingcosts = this.props.selection.estimatedclosingcosts\n }\n let cc = loan.estimatedclosingcosts\n if (loan.FHAMIP != null) {\n\n let addFha = () => {\n let found = false\n\n cc.cannotshopservices.forEach(key => {\n if (key.servicename === com.upfrontMI) {\n key.estimateamount = loan.FHAMIP.upfrontMIP\n found = true\n }\n })\n if (!found) {\n let s = new service()\n s.servicename = com.upfrontMI\n s.estimateamount = loan.FHAMIP.upfrontMIP\n cc.cannotshopservices.push(s)\n }\n }\n addFha()\n } else {\n\n for (let i = 0; i < cc.cannotshopservices.length; i++) {\n if (cc.cannotshopservices[i].servicename === com.upfrontMI) {\n cc.cannotshopservices = cc.cannotshopservices.splice(i, 1)\n break\n }\n }\n }\n\n switch (this.props.property.purpose) {\n case \"purchase\":\n loan.downpayment = this.state.downpayment\n break;\n case \"refinance\":\n loan.paydown = this.state.downpayment\n break;\n case \"cashoutrefinance\":\n loan.cashout = this.state.downpayment\n break;\n default:\n break;\n }\n\n loan.aus = ob.Aus\n\n this.referi[hash].forEach(\n pr => {\n let l = new LoanProduct()\n\n l.Lender = pr.Lender\n l.Name = pr.Name\n l.lenderinfo = pr.LenderInfo\n l.aus = pr.Aus\n loan.matchingproducts.push(l)\n }\n )\n // loan.lender = lender2lender[loan.matchingproducts[0].Lender ]\n\n this.props.updateSelectField(loan, \"selectedloan\")\n\n if ((\"\" === this.props.application.borrower.expenses.futuremortgageinsurance ||\n \"0\" === this.props.application.borrower.expenses.futuremortgageinsurance\n ) &&\n 0 !== loan.pmi) {\n let insurance = (parseFloat(loan.monthly_payment) * loan.pmi).toFixed(2)\n\n this.props.updateExpenses({ target: { value: \"monthly\" } },\n \"borrower\", \"futuremortgageinsuranceperiod\")\n this.props.updateExpenses({ target: { value: insurance } },\n \"borrower\", \"futuremortgageinsurance\")\n } else {\n if (0 === loan.pmi) {\n this.props.updateExpenses({ target: { value: 0 } },\n \"borrower\", \"futuremortgageinsurance\")\n }\n }\n\n this.getSelectedIcon(loan)\n }\n selectCard = card => {\n com.touch()\n this.selectLoan(card.hash)\n }\n\n getOldInterestRate = () => {\n\n if (this.props.application.property.purpose !== st.POL_Refinance)\n return\n // just scan all the loans for rate\n // first regular loans from credit report\n let rate = 0\n for (let i = 0; i < this.props.application.assetsandliabilities.loans.length; i++) {\n if (this.props.application.assetsandliabilities.loans[i].forsubjectproperty &&\n this.props.application.assetsandliabilities.loans[i].satisfiedupon === \"withproceeds\") {\n rate = this.props.application.assetsandliabilities.loans[i].rate\n }\n }\n\n if (0 === rate) {\n if (this.props.application.otherliens !== null) {\n for (let i = 0; i < this.props.application.otherliens.length; i++) {\n if (this.props.application.otherliens[i].satisfiedupon === \"withproceeds\") {\n rate = this.props.application.otherliens[i].rate\n }\n }\n }\n }\n return rate\n }\n displayCard = (card, index) => {\n\n let currentMonthly = com.getMonthlyValue(this.props.application.borrower.expenses.currentfirstmortgage,\n this.props.application.borrower.expenses.currentfirstmortgageperiod)\n let mostyle = {}\n if (card.monthly_payment > parseFloat(currentMonthly)) {\n mostyle = { color: '#c33' }\n } else {\n mostyle = { color: '#393' }\n }\n let showSavings = () => {\n\n if (this.props.property.purpose !== \"refinance\")\n return \"\"\n if (card.monthly_payment > parseFloat(currentMonthly)) {\n return \n }\n return \n }\n\n if (this.props.selection.selectedloan !== null && (this.props.selection.selectedloan.hash === card.hash))\n return \"\"\n let getName = () => {\n if (this.props.borrowerid && this.referi && this.referi[card.hash] != null) {\n let r = this.referi[card.hash][0]\n return r[\"Lender\"] + \", \" + r[\"Name\"]\n }\n return com.capitalize(card.Mtype.replace('_', ' ').toLowerCase().replace('fha', 'FHA'))\n }\n let getType = () => {\n let tp = \"\"\n if (card.Arm == null )\n tp = \"Fixed rate\"\n else\n tp = \"ARM \" + card.Arm.fixedperiod + \"/6\"\n return tp\n }\n\n let selectCard = e => { return this.selectCard(card) }\n let fingerclass = \"fas fa-hand-point-left mr-1\"\n if (index === 0)\n fingerclass += \" fingerclass\"\n let points = com.commaizeFloat((card.points * com.safeParseInt(this.state.loansize) / 100).toFixed(2))\n let moPayment = () => {\n let payment = card.monthly_payment\n if (card.PMICost !== 0) {\n payment = payment + card.PMICost\n } else if (card.FHAMIP != null) {\n payment = payment + card.FHAMIP.monthlyMIP\n }\n payment = com.commaizeFloat(payment.toFixed(2))\n return payment\n }\n let src = \"\"\n // if (this.referi != null && this.referi && this.referi[card.hash] != null) {\n // let lender = this.referi[card.hash][0]\n // src = this.props.borrowerid ? lender2icon[lender.Lender] : \"/loan.png\"\n // }\n let oncheckbox = (e) => {\n let ch = e.target.checked\n let ar = this.state.comparisonSelections\n if (ar[card.hash] != null)\n delete ar[card.hash]\n\n if (ch) {\n ar[card.hash] = this.referi[card.hash]\n ar[card.hash].loansize = this.state.loansize\n ar[card.hash].paydown = this.props.selection.paydown\n ar[card.hash].downpayment = this.props.selection.downpayment\n ar[card.hash].cashout = this.props.selection.cashout\n }\n this.setState({ comparisonSelections: ar })\n }\n\n\n let getBreakPoint = (loan) => {\n let interestRate = this.getOldInterestRate()\n\n function getClosedInterestPaid(rate, loansize, termmonths, spanmonths) {\n\n let monthlyrate = rate / 12.0\n let expn = Math.pow(1 + monthlyrate, termmonths)\n let payment = loansize * monthlyrate * expn / (expn - 1)\n payment = (Math.round(payment * 100) / 100)\n\n let accumulatedinterest = (loansize * monthlyrate - payment) *\n (Math.pow(1 + monthlyrate, spanmonths) - 1) / monthlyrate +\n spanmonths * payment\n return accumulatedinterest\n }\n\n let breakPoint = -1\n if (parseFloat(interestRate) <= loan.base_rate) {\n return breakPoint\n }\n\n for (let i = 1; i <= loan.Term * 12; i++) {\n let accumulatedOld = getClosedInterestPaid(parseFloat(interestRate) / 100, this.state.loansize, loan.Term * 12, i)\n let accumulatedNew = getClosedInterestPaid(loan.base_rate / 100, this.state.loansize, loan.Term * 12, i)\n\n accumulatedNew += loan.closing_cost\n if (accumulatedNew < accumulatedOld) {\n breakPoint = i\n break\n }\n }\n return breakPoint\n }\n\n return (\n , {getType()}, {card.Term} years
}\n \n Rate / APR
\n {card.base_rate}% / {card.APR}%
\n \n Mo. Payment
\n {this.props.property.purpose === \"refinance\" ? MonhtlyChangeBP(currentMonthly, card.monthly_payment, getBreakPoint(card),\n ${moPayment()}{showSavings()}\n ) : ${moPayment()}} \n Estimated Closing Cost
\n ${com.commaizeFloat((this.getClosingCosts(card)).toFixed(2))}\n \n Points
\n {com.commaizeFloat(card.points.toFixed(3))}%{card.points <= 0 ? \"\" : /${points}}
\n \n \n |
\n |
\n |
\n |
\n
\n }\n let refirate = () => {\n let onUpRefirate = () => {\n let newd = this.state.downpayment + 1\n if (newd > com.safeParseInt(this.props.application.loanbalance))\n newd = com.safeParseInt(this.props.application.loanbalance)\n this.setState({ downpayment: newd })\n }\n return Adjust downpayment:
\n \n { e.key === 'Enter' && e.preventDefault(); }} className=\"d-block\" style={{ width: '110px !important' }} type=\"text\" size=\"10\"\n pattern=\"^[0-9,]+$\"\n onChange={this.onDownpaymentInput} required={false}\n value={com.commaize(this.state.downpayment)} />\n \n ({getPercent()}%)
\n */}\n \n |
\n |
\n |
\n\n
\n }\n let cashout = () => {\n let onUpCashout = () => {\n let newd = this.state.downpayment + 1\n\n if (newd > this.props.property.appraisal - com.safeParseInt(this.props.application.loanbalance))\n newd = this.props.property.appraisal - com.safeParseInt(this.props.application.loanbalance)\n this.setState({ downpayment: newd })\n }\n return Adjust loan amount:
\n \n |
\n |
\n |
\n\n
\n }\n\n switch (this.props.property.purpose) {\n case \"purchase\":\n return (\n Adjust cash out
\n \n \n
\n
\n )\n case \"refinance\":\n return (\n {purchase()}
\n \n \n this.onDownpaymentInput({target:{value: e}})} step={1000} min={0} max={com.safeParseInt(this.props.application.loanbalance)} initVal={this.state.defdownpayment} />\n {/*
\n
\n )\n case \"cashoutrefinance\":\n return (\n {refirate()}
\n \n \n
\n
\n )\n default:\n alert(\"should not see this!\")\n return \"\";\n }\n }\n getClosingCosts = (card) => {\n\n let cc = card.closing_cost\n\n if (cc < 0)\n cc = 0\n return cc\n }\n getRemainintLenderCredits = (card) => {\n\n let cc = card.closing_cost\n\n if (cc > 0)\n cc = 0\n return -cc\n }\n onCCInput = e => {\n\n let val = com.decommaizeNumeric(e.target.value.toString())\n this.setState({ highclosingcost: val })\n if (val < this.state.minclosingcost || val > this.state.maxclosingcost)\n return\n // eslint-disable-next-line react/no-direct-mutation-state\n this.state.highclosingcost = val\n this.oldmaxupfrontcost = val\n clearTimeout(this.timer)\n this.timer = setTimeout(() => this.processProducts(this.rawproducts), 400)\n //\n }\n\n\n getDownpayment = (card) => {\n switch (this.props.property.purpose) {\n case \"purchase\":\n return card.downpayment\n case \"refinance\":\n return card.paydown\n case \"cashoutrefinance\":\n return 0\n default:\n return 0;\n }\n\n }\n deleteSelection = () => {\n com.touch()\n this.props.updateSelectField(new ChosenLoan(), \"selectedloan\")\n }\n displaySelectedCard = () => {\n if (this.props.selection.selectedloan === null || this.props.selection.selectedloan.hash === \"\") {\n return \"\"\n }\n\n let card = this.props.selection.selectedloan\n let currentMonthly = com.getMonthlyValue(this.props.application.borrower.expenses.currentfirstmortgage,\n this.props.application.borrower.expenses.currentfirstmortgageperiod)\n let mostyle = {}\n if (card.monthly_payment > parseFloat(currentMonthly)) {\n mostyle = { color: '#c33' }\n } else {\n mostyle = { color: '#393' }\n }\n let showSavings = () => {\n if (this.props.property.purpose !== \"refinance\")\n return \"\"\n if (card.monthly_payment > parseFloat(currentMonthly)) {\n return \n }\n return \n }\n let getName = () => {\n if (this.props.borrowerid && this.referi && this.referi[card.hash] != null) {\n let r = this.referi[card.hash]\n if (r !== undefined && r[0] !== undefined)\n return com.capitalize(r[0][\"Lender\"]) + \", \" + r[0][\"Name\"]\n }\n return com.capitalize(card.Mtype.replace('_', ' ').toLowerCase().replace('fha', 'FHA'))\n }\n let getType = (card) => {\n if (null == card)\n return \"\"\n if (card.Arm == null || card.amortization === \"fixed\")\n return \"Fixed rate\"\n return \"ARM \" + card.Arm.fixedperiod + \"/6\"\n }\n let loansize = com.safeParseInt(card.loansize)\n\n\n let points = com.commaizeFloat((card.points * com.safeParseInt(card.loansize) / 100).toFixed(2))\n let moPayment = () => {\n\n let payment = card.monthly_payment\n if (card.pmi !== 0) {\n payment = payment + card.pmi\n } else if (card.FHAMIP != null) {\n payment = payment + card.FHAMIP.monthlyMIP\n }\n payment = com.commaizeFloat(payment.toFixed(2))\n return payment\n }\n\n let getBreakPoint = (loan) => {\n let interestRate = this.getOldInterestRate()\n\n function getClosedInterestPaid(rate, loansize, termmonths, spanmonths) {\n\n let monthlyrate = rate / 12.0\n let expn = Math.pow(1 + monthlyrate, termmonths)\n let payment = loansize * monthlyrate * expn / (expn - 1)\n payment = (Math.round(payment * 100) / 100)\n\n let accumulatedinterest = (loansize * monthlyrate - payment) *\n (Math.pow(1 + monthlyrate, spanmonths) - 1) / monthlyrate +\n spanmonths * payment\n return accumulatedinterest\n }\n\n let breakPoint = -1\n if (parseFloat(interestRate) <= loan.base_rate) {\n return breakPoint\n }\n\n for (let i = 1; i <= loan.Term * 12; i++) {\n let accumulatedOld = getClosedInterestPaid(parseFloat(interestRate) / 100, loan.loansize, loan.Term * 12, i)\n let accumulatedNew = getClosedInterestPaid(loan.base_rate / 100, loan.loansize, loan.Term * 12, i)\n\n accumulatedNew += loan.closing_cost\n if (accumulatedNew < accumulatedOld) {\n breakPoint = i\n break\n }\n }\n return breakPoint\n }\n let image = this.state.selectedImage\n let onHidePriceChanged = () => {\n this.setState({ showPriceChanged: false })\n }\n let useSuggestion = () => {\n this.props.updateSelectField(this.state.suggestedLoan, \"selectedloan\")\n this.getSelectedIcon(this.state.suggestedLoan)\n this.setState({ showPriceChanged: false })\n }\n\n let oncheckbox = (e) => {\n let ch = e.target.checked\n let ar = this.state.comparisonSelections\n if (ar[card.hash] != null)\n delete ar[card.hash]\n\n if (ch) {\n ar[card.hash] = this.referi[card.hash]\n ar[card.hash].loansize = card.loansize\n ar[card.hash].paydown = card.paydown\n ar[card.hash].downpayment = card.downpayment\n ar[card.hash].cashout = card.cashout\n }\n this.setState({ comparisonSelections: ar })\n }\n let st = {}\n try {\n if (this.state.suggestedLoan.closing_cost > this.props.application.selection.selectedloan.closing_cost) {\n st = { color: '#633' }\n } else {\n if (this.state.suggestedLoan.closing_cost < this.props.application.selection.selectedloan.closing_cost) {\n st = { color: '#363' }\n }\n }\n } catch (x) {\n\n }\n\n return {cashout()}
\n \n\n \n \n The closing cost of your selected loan has changed! \n \n \n {this.state.suggestedLoan != null ?\n \n \n \n
\n \n \n\n \n |
\n \n
\n \n\n
\n \n
\n \n\n
\n\n }\n checkStatus = () => {\n let token = sessionStorage.getItem(\"ZeitroA\")\n if (this.props.application.remotecoborrowers.length > 0) {\n this.setState({ statusloaded: false })\n fetch('/data/coborrowerstatus', {\n method: 'GET',\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\",\n \"X-Borrower\": this.props.borrowerid,\n }\n }).then(\n response => {\n if (response.status !== 200) {\n //alert('Looks like there was a problem. Status Code: ' +\n // response.status);\n //window.document.dispatchEvent(new Event('reauthenticate'), \"\");\n\n return;\n }\n // Examine the text in the response\n response.json().then(js => {\n let positionbyemail = {}\n let proc = (a, i) => {\n let email = a.Email\n let position = a.Position\n positionbyemail[email] = position\n }\n js.map(proc)\n this.setState({ positionbyemail: positionbyemail, statusloaded: true })\n });\n }\n ).catch((err) => {\n console.log('Fetch Error :', err);\n });\n\n }\n }\n\n renderRemoteCoborrowers = (rb, i) => {\n let getStatus = () => {\n let status = \"Invited\"\n if (rb.email in this.state.positionbyemail) {\n let pos = this.state.positionbyemail[rb.email]\n\n status = com.positionToStatus(pos)\n }\n return status\n }\n if (this.state.positionbyemail[rb.email] >= com.prefillLimit)\n return \n else {\n clearTimeout(this.timer)\n this.timer = setTimeout(this.checkStatus, 30000)\n return (\n \n |
\n |
\n\n\n |
\n |
\n {this.state.suggestedLoan.base_rate !== this.props.application.selection.selectedloan.base_rate ?\n |
\n : \"\"\n }\n |
\n |
\n {this.state.suggestedLoan.closing_cost >= 0 ?\n |
\n :\n |
\n }\n {this.state.suggestedLoan.closing_cost !== this.props.application.selection.selectedloan.closing_cost ?\n (this.props.application.selection.selectedloan.closing_cost >= 0 ?\n |
:\n |
\n )\n : \"\"\n }\n\n
\n : \"\"\n }\n CHOSEN RATE
\n {getName()}\n {this.props.borrowerid ? \"\" :
\n \n , {getType(card)}, {card.Term} years
}\n Rate / APR
\n {card.base_rate}% / {card.APR}%\n \n Mo. Payment
\n {this.props.property.purpose === \"refinance\" ? MonhtlyChangeBP(currentMonthly, card.monthly_payment, getBreakPoint(card),\n ${moPayment()}{showSavings()}\n ) : ${moPayment()}}\n \n Closing Cost
\n ${com.commaizeFloat((this.getClosingCosts(card)).toFixed(2))}\n \n\n Points
\n {com.commaizeFloat(card.points.toFixed(3))}%{card.points <= 0 ? \"\" : /${points}}\n \n \n \n \n First Name:
\n \n \n \n Last Name:
\n \n \n \n Email:
\n \n \n \n Status:
\n \n \n\n \n
\n )\n }\n }\n\n waiting = (num) => {\n\n return (\n \n
{rb.firstname}
\n \n
{rb.lastname}
\n \n
{rb.email}
\n \n
{getStatus()}
\n \n
\n )\n }\n\n CustomToggle = React.forwardRef(({ children, onClick }, ref) => (\n \n Product selector\n
\n\n
\n {\n (num === 1) ?
\n {this.props.application.remotecoborrowers.map(this.renderRemoteCoborrowers)}\n\n Look like your coborrower has not filled enough of their application to allow product selection:
\n : Look like some of your coborrowers have not filled enough of their application to allow product selection:
\n }
\n \n ));\n\n contactLO = () => {\n this.setState({showContactModal: true})\n\n let token = sessionStorage.getItem(\"ZeitroA\")\n fetch('/borrower/contactloaboutrates', {\n method: 'GET',\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\",\n \"X-Borrower\": this.props.borrowerid,\n }\n }).then(\n response => {\n if (response.status !== 200) {\n console.log(response)\n return;\n }\n return\n }\n ).catch((err) => {\n console.log('Fetch Error :', err);\n });\n\n }\n showSortButton = () => {\n return (\n \n \n
\n )\n }\n displayFilters = () => {\n return \n \n \n Sort by\n \n\n \n {Object.keys(sorts).map(k => {\n return (\n \n {sorts[k]}\n )\n })}\n \n \n \n \n Filter\n \n\n \n \n \n
\n \n {this.displayFilters()}\n
\n \n \n
\n */}\n |
}\n placement=\"right\"\n title=\"\"\n /> \n \n\n \n {this.printDownpayment()}\n
\n {/*\n Limit mo. payment range:
${com.commaize(this.state.lowpayment)} - ${com.commaize(this.state.highpayment)}
\n ${com.commaize(this.state.lowpayment)} - ${com.commaize(this.state.highpayment)}
By moving this slider, you select your trade off between low closing costs and best rate
\n Set it all the way to the left to find the best rate product with the lowest closing costs
\n If you want to buy down a better rate, move the slider to the right
\n \n |
\n \n
\n
: \"\"}\n\n \n\n
\n\n \n {this.state.selectedmaxreserves} mo.
\n\n\n Amortization\n
\n Loan Terms
\n Lenders\n
\n \n ![\"\"](\"/logo.svg\")
|
\n\n
\n }\n\n let notready = 0\n let remotes = this.props.application.remotecoborrowers\n\n for (let i = 0; i < remotes.length; i++) {\n let pos = this.state.positionbyemail[remotes[i].email]\n if (pos < com.prefillLimit)\n notready += 1\n }\n if (notready > 0) {\n return \n {this.waiting(notready)}\n
\n }\n }\n\n return (\n ![\"\"](\"/jackhammer.png\")
Loan Drill Down\n
Loan ComparisonMy Rates
\n \n {showPrequalLetterHistory ? (\n
\n )\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps, null, {\n forwardRef: true,\n})(PrequalLetter)\n","import { Button, Form, Input, Popconfirm, Table, Select } from \"antd\"\nimport { MinusCircleOutlined } from \"@ant-design/icons\"\nimport React, { useContext, useEffect, useRef, useState } from \"react\"\nimport * as act from \"../Store/actions\"\nimport * as com from \"../Common.js\"\nimport * as st from \"../State.js\"\nimport \"../App.css\"\nimport { connect } from \"react-redux\"\n\nconst mapStateToProps = (state) => {\n return {\n assetsandliabilities: state.application.assetsandliabilities,\n application: state.application,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n changeOwnedProperty: (t, i, v) => {\n dispatch(act.ChangeOwnedProperty(t, i, v))\n },\n changeBorrowerOwnedProperty: (t, i, v) => {\n dispatch(act.ChangeBorrowerOwnedProperty(t, i, v))\n },\n changeCoborrowerOwnedProperty: (t, i, v) => {\n dispatch(act.ChangeCoborrowerOwnedProperty(t, i, v))\n },\n changeMainProperty: (value, verb) => {\n dispatch(act.ChangeMainProperty(value, verb))\n },\n})\n\nconst EditableContext = React.createContext(null)\n\nconst EditableRow = ({ index, ...props }) => {\n const [form] = Form.useForm()\n return (\n \n )\n}\n\nconst EditableCell = ({\n title,\n type,\n options,\n children,\n dataIndex,\n record,\n handleSave,\n ...restProps\n}) => {\n const [editing, setEditing] = useState(false)\n const inputRef = useRef(null)\n const form = useContext(EditableContext)\n useEffect(() => {\n if (editing) {\n inputRef.current.focus()\n }\n }, [editing])\n const toggleEdit = () => {\n setEditing(!editing)\n form.setFieldsValue({\n [dataIndex]: record[dataIndex],\n })\n }\n const save = async () => {\n try {\n const values = await form.validateFields()\n toggleEdit()\n handleSave({\n ...record,\n ...values,\n })\n } catch (errInfo) {\n console.log(\"Save failed:\", errInfo)\n }\n }\n let childNode = children\n if (type === \"operation\") {\n return \n \n We are checking if you qualify for a prequalification letter.\n \n
\n ) : (\n \n
\n )}\n \n {text}\n
\n )\n }\n return \n {dataSource.length > 0 && (\n \"editable-row\"}\n bordered\n dataSource={dataSource}\n columns={columns}\n pagination={false}\n scroll={{ x: 1000 }}\n />\n )}\n \n
\n )\n}\n\nexport const OwnedPropertyMortgagesTable = connect(\n mapStateToProps,\n mapDispatchToProps,\n null,\n { forwardRef: true }\n)(PropertyMortgages);\n","import { Button, Form, Input, Popconfirm, Table, Select } from \"antd\";\r\nimport { MinusCircleOutlined } from \"@ant-design/icons\";\r\nimport React, { useContext, useEffect, useRef, useState } from \"react\";\r\nimport { commaize } from \"../../Common\";\r\n\r\n\r\n\r\nconst EditableContext = React.createContext(null);\r\nconst EditableRow = ({ index, ...props }) => {\r\n const [form] = Form.useForm();\r\n return (\r\n \r\n );\r\n};\r\nconst EditableCell = ({\r\n title,\r\n type,\r\n options,\r\n children,\r\n dataIndex,\r\n record,\r\n handleSave,\r\n ...restProps\r\n}) => {\r\n const [editing, setEditing] = useState(false);\r\n const inputRef = useRef(null);\r\n const form = useContext(EditableContext);\r\n useEffect(() => {\r\n if (editing) {\r\n inputRef.current.focus();\r\n }\r\n }, [editing]);\r\n const toggleEdit = () => {\r\n setEditing(!editing);\r\n form.setFieldsValue({\r\n [dataIndex]: record[dataIndex],\r\n });\r\n };\r\n const save = async () => {\r\n try {\r\n const values = await form.validateFields();\r\n toggleEdit();\r\n handleSave({\r\n ...record,\r\n ...values,\r\n });\r\n } catch (errInfo) {\r\n console.log(\"Save failed:\", errInfo);\r\n }\r\n };\r\n let childNode = children;\r\n if (type === \"operation\") {\r\n return \r\n \"editable-row\"}\r\n bordered\r\n dataSource={dataSource}\r\n columns={columns}\r\n pagination={false}\r\n />\r\n \r\n
\r\n );\r\n};\r\nexport default EditableTable;","import React, { Component } from \"react\"\nimport '../App.css'\nimport Col from 'react-bootstrap/Col'\nimport Row from 'react-bootstrap/Row'\nimport Form from 'react-bootstrap/Form'\nimport { connect } from 'react-redux'\nimport * as act from \"../Store/actions\"\nimport * as com from \"../Common.js\"\nimport * as st from \"../State\"\nimport { InputNumber, Select } from \"antd\"\nimport { DollarInput } from \"../Common/components/DollarInput\"\n\nconst mapStateToProps = (state) => {\n return {\n property: state.application.property,\n application: state.application,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateSameProperty: (event) => {\n dispatch(act.UpdateSameProperty(event.target.checked))\n },\n changeMainProperty: (value, verb) => {\n dispatch(act.ChangeMainProperty(value, verb))\n },\n changeMainPropertyAddress: (event) => {\n dispatch(act.ChangeMainPropertyAddress(event.target.value))\n },\n changeMainPropertySalesPrice: (event) => {\n console.log(event)\n dispatch(act.ChangeMainPropertySalesPrice(event))\n },\n changeMainPropertyAppraisal: (event) => {\n dispatch(act.ChangeMainPropertyAppraisal(event))\n },\n})\n\n\nexport class PrequalProperty extends Component {\n constructor(props) {\n super(props)\n\n this.form = React.createRef()\n\n this.state = {\n loanLimits: {},\n }\n\n fetch(\"/data/loanlimits\")\n .then((res) => {\n if (!res.ok) {\n console.warn('Looks like there was a problem. Status Code: ', res.status);\n return\n }\n return res.json()\n })\n .then((res) => {\n this.setState({ loanLimits: res })\n })\n .catch((err) => {\n console.error(err)\n })\n\n this.lastcompletion = 0\n }\n\n isoccupancyHidden = () => {\n return this.props.application.financingsameproperty && (this.props.application.property.purpose !== st.POL_Purchase)\n }\n\n lookupAddress = (providedAddress) => {\n const now = Date.now()\n\n if (now - this.lastcompletion < 500)\n return\n\n let addr = this.props.application.property.address\n if (typeof providedAddress !== \"undefined\") {\n addr = providedAddress\n }\n\n if (this.isoccupancyHidden()) {\n addr = this.sameaddress()\n this.props.changeMainPropertyAddress({ target: { value: addr } })\n\n }\n\n if (\"\" === addr)\n return\n\n const GOOGLE_MAPS_API_KEY = 'AIzaSyBQFO5uQtyZ5EsbTsNEK7HOhEA00KS3le8'\n const GEOCODE_API_URL = 'https://maps.googleapis.com/maps/api/geocode/json'\n const target = encodeURI(`${GEOCODE_API_URL}?address=${addr}&key=${GOOGLE_MAPS_API_KEY}`)\n\n fetch(target, {\n method: 'GET',\n }).then(\n response => {\n if (response.status !== 200) {\n console.warn(`Looks like there was a problem. Status Code: ${response.status}`)\n return\n }\n // Examine the text in the response\n response.json().then(js => {\n if (js.status === \"OK\") {\n this.onStreetAddressCompletion(js.results[0].address_components)\n }\n })\n }\n ).catch((err) => {\n console.warn('Fetch Error :', err)\n })\n }\n\n onStreetAddressCompletion = address => {\n this.lastcompletion = Date.now()\n\n if (\"undefined\" !== typeof this.timer)\n clearTimeout(this.timer)\n\n const num = com.getSubaddress(address, \"street_number\", \"long_name\")\n const city = com.getSubaddress(address, \"locality\", \"long_name\")\n const zip = com.getSubaddress(address, \"postal_code\", \"long_name\")\n const street = com.getSubaddress(address, \"route\", \"short_name\")\n const county = com.getSubaddress(address, \"administrative_area_level_2\", \"long_name\")\n const longstate = com.getSubaddress(address, \"administrative_area_level_1\", \"long_name\")\n\n if (county !== \"\")\n this.props.changeMainProperty(county, \"county\")\n\n this.props.changeMainProperty(longstate, \"state\")\n this.props.changeMainProperty(city, \"city\")\n this.props.changeMainProperty(zip, \"zipcode\")\n\n const addr = [\n num,\n street,\n city,\n com.getSubaddress(address, \"administrative_area_level_1\", \"short_name\"),\n zip\n ].join(\" \").replace(\" ,\", \",\")\n\n if (num !== \"\")\n this.props.changeMainPropertyAddress({ target: { value: addr } })\n\n let sfx = \"\"\n let short = com.getSubaddress(address, \"route\", \"short_name\")\n let shorts = short.split(' ')\n\n if (com.streetsuffixes.includes(shorts[shorts.length - 1].toUpperCase())) {\n sfx = shorts.pop()\n\n if (typeof com.streetTypeAbbreviations[sfx.toLowerCase()] !== \"undefined\")\n sfx = com.streetTypeAbbreviations[sfx.toLowerCase()].toUpperCase()\n\n short = shorts.join(' ')\n }\n\n const s = shorts[0].toUpperCase()\n\n if (com.prefixes.includes(s)) {\n shorts = short.split(' ')\n short = shorts.slice(1, shorts.length).join(' ')\n }\n\n this.props.changeMainPropertyAddress({ target: { value: addr } })\n }\n\n updateRefinanceAddressWithResidencyAddress = () => {\n const { borrower, property } = this.props.application\n if (property.address === \"\") {\n this.props.changeMainProperty(borrower.presentaddressstreet, \"address\")\n this.lookupAddress(borrower.presentaddressstreet)\n }\n }\n\n lookupProperty = (num, prefix, short, sfx, city, zip) => {\n const body = {\n number: num,\n prefix: prefix,\n street: short,\n suffix: sfx,\n city: city,\n zip: zip\n }\n\n const token = sessionStorage.getItem(\"ZeitroA\")\n this.props.changeMainProperty(false, \"lookupsuccessful\")\n fetch('/borrower/findproperty', {\n method: 'POST',\n headers: {\n Cache: \"no-cache\",\n Authorization: \"Bearer \" + token,\n 'Content-Type': 'application/json',\n \"X-Borrower\": this.props.borrowerid,\n },\n body: JSON.stringify(body)\n }).then(\n response => {\n if (response.status !== 200) {\n alert('Looks like there was a problem. Status Code: ', response.status)\n window.document.dispatchEvent(new Event('reauthenticate'), \"\")\n return\n }\n\n // Examine the text in the response\n response.json().then(js => {\n const { yearbuilt, lookupsuccessful } = this.props.property\n if (yearbuilt === \"\" && js.Yearbuilt !== \"\" && !lookupsuccessful) {\n this.props.changeMainPropertyYearBuilt({ target: { value: js.Yearbuilt } })\n this.props.changeMainPropertyUnits({ target: { value: js.Units } })\n this.props.changeMainProperty(true, \"lookupsuccessful\")\n if (this.props.application.property.purpose !== st.POL_Purchase) {\n const dt = js.Lastsale\n const dat = dt.split('T')[0].split('-')\n const d = parseInt(dat[0])\n this.props.changeMainPropertyRefinanceYearAcquired({ target: { value: d } })\n const cost = js.Lastsaleprice.toString()\n this.props.changeMainPropertyRefinanceOriginalCost({ target: { value: cost } })\n }\n }\n })\n }\n ).catch((err) => {\n console.error('Fetch Error :', err)\n })\n }\n\n componentDidMount() {\n if (this.props.application.financingsameproperty === null) {\n this.props.updateSameProperty({ target: { checked: true } })\n this.updateRefinanceAddressWithResidencyAddress()\n }\n this.completion('property')\n }\n\n componentDidUpdate() {\n this.completion('property')\n }\n\n componentWillUnmount() {}\n\n completion = (stateKey) => {\n const keysToFilter = ['state', 'county']\n const { propertytype, occupancy } = this.props[stateKey]\n if (propertytype === \"twotofourfamily\") {\n keysToFilter.push('units')\n }\n if (occupancy === \"investment\" || (occupancy === \"principal\" && this.props.application[stateKey].propertytype === \"twotofourfamily\")) {\n keysToFilter.push('purchase.expectedgrossmonthlyrentalincome')\n }\n\n const filteredObj = keysToFilter.reduce((obj, key) => {\n if (key.includes('.')) {\n const nestedKeys = key.split('.')\n let value = this.props[stateKey]\n\n for (const nestedKey of nestedKeys) {\n if (value.hasOwnProperty(nestedKey)) {\n value = value[nestedKey]\n } else {\n value = undefined\n break\n }\n }\n\n if (value !== undefined) {\n obj[nestedKeys[nestedKeys.length - 1]] = value\n }\n } else if (this.props[stateKey].hasOwnProperty(key)) {\n obj[key] = this.props[stateKey][key]\n }\n\n return obj\n }, {})\n\n const emptyNum = Object.keys(filteredObj).filter((key) => {\n const value = filteredObj[key]\n return value === '' || value === null || value === undefined\n }).length\n const progressValue = Math.round(((keysToFilter.length - emptyNum) / keysToFilter.length) * 100)\n sessionStorage.setItem(\"progressValue\", progressValue)\n }\n\n isValidated() {\n if (!this.form.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n return true\n }\n\n render() {\n const changeMainPropertyExpectedRentalIncome = e => {\n com.touch()\n this.props.changeMainProperty(e, \"purchase|expectedgrossmonthlyrentalincome\")\n }\n\n const achangeMainPropertyState = e => {\n // this.stateref.current.setCustomValidity(\"\")\n this.props.changeMainProperty(e, \"state\")\n }\n\n const changeMainPropertyCounty = e => {\n // this.countyref.current.setCustomValidity(\"\")\n this.props.changeMainProperty(e, \"county\")\n }\n\n const getStates = () => {\n const options = []\n const keys = Object.keys(this.state.loanLimits)\n options.push()\n keys.forEach((x) => {\n options.push()\n })\n return options\n }\n\n const getCounties = () => {\n const options = []\n options.push()\n if (this.state.loanLimits[this.props.property.state.toUpperCase()]) {\n const keys = Object.keys(this.state.loanLimits[this.props.property.state.toUpperCase()])\n keys.forEach((x) => {\n options.push()\n })\n }\n return options\n }\n\n const onBudget = e => {\n com.touch()\n this.props.changeMainPropertySalesPrice(e)\n this.props.changeMainPropertyAppraisal(e)\n }\n\n const { state, county, salesprice, occupancy, purchase } = this.props.property\n const { propertytype } = this.props.application.property\n\n return (\n \n \n \n State \n \n \n
\n \n \n County \n \n \n
\n \n \n What is your maximum purchase price? \n \n \n
\n \n
\n
\n )\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true })(PrequalProperty)\n","import React, { Component } from \"react\"\nimport { connect } from 'react-redux'\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport { Input, InputNumber, Select, Skeleton, Drawer } from 'antd'\nimport Col from 'react-bootstrap/Col'\nimport Row from 'react-bootstrap/Row'\nimport Form from 'react-bootstrap/Form'\nimport { isEmpty, some } from 'lodash'\nimport NumericalInput from '../NumericalInput'\nimport * as act from \"../Store/actions\"\nimport * as st from \"../State\"\nimport * as com from \"../Common.js\"\nimport { Tips } from '../Common/Tooltip'\nimport CheckGroup, { CheckGroupWithImage } from \"../Common/components/CheckGroup\"\nimport AddressAutocomplete from '../Common/AddressAutocomplete'\nimport InputGroup from 'react-bootstrap/InputGroup'\nimport { DollarInput } from \"../Common/components/DollarInput\"\nimport Multiselect from '../Common/Multiselect'\nimport { OwnedPropertyMortgagesTable } from \"./tables\"\nimport EditableTable from \"../Common/components/tables\"\nimport PrequalProperty from \"./PrequalProperty\"\nimport { getStates, getCounties } from '../Tools/Address'\nimport { isMortgageLoan, calculateBalancesAndPayments } from \"../Tools/Loan\"\nimport { isNumericOrNumericString } from \"../Tools/String\"\n\nconst customstyle = {\n multiselectContainer: { // To change css for multiselect (Width,height,etc..)\n fontSize: '14px',\n },\n searchBox: { // To change search box element look\n fontSize: '.875rem',\n minHeight: 'calc(1.5em + .5rem + 2px)',\n padding: '.25rem .5rem',\n marginBottom: '0px !important',\n },\n inputField: { // To change input field position or margin\n margin: '0px'\n },\n chips: { // To change css chips(Selected options)\n background: 'rgba(0,48,116,1)',\n marginBottom: '2px !important',\n fontSize: '12px',\n padding: '2px 10px',\n },\n optionContainer: { // To change css for option container\n fontSize: '12px',\n }\n}\n\nconst mapStateToProps = (state) => {\n return {\n property: state.application.property,\n application: state.application,\n }\n}\n\nconst mapDispatchToProps = (dispatch) => ({\n updateSelectField: (input, verb) => {\n dispatch(act.UpdateSelectField(input, verb))\n },\n updateSameProperty: (event) => {\n dispatch(act.UpdateSameProperty(event.target.checked))\n },\n changeMainPropertyAttribute: (t, verb) => {\n dispatch(act.ChangeMainPropertyAttribute(t, verb))\n },\n changeMainPropertyDescription: (event) => {\n dispatch(act.ChangeMainPropertyDescription(event.target.value))\n },\n changeMainPropertyAddress: (event) => {\n dispatch(act.ChangeMainPropertyAddress(event.target.value))\n },\n changeMainPropertyOccupancy: (event) => {\n dispatch(act.ChangeMainPropertyOccupancy(event.target.value))\n },\n changeMainPropertyPurpose: (event) => {\n dispatch(act.ChangeMainPropertyPurpose(event.target.value))\n },\n changeMainPropertyUnits: (event) => {\n dispatch(act.ChangeMainPropertyUnits(event.target.value))\n },\n changeMainPropertyYearBuilt: (event) => {\n dispatch(act.ChangeMainPropertyYearBuilt(event.target.value))\n },\n changeMainPropertyInWhatName: (event) => {\n dispatch(act.ChangeMainPropertyInWhatName(event.target.value))\n },\n changeMainPropertyEstateHeldIn: (event) => {\n dispatch(act.ChangeMainPropertyEstateHeldIn(event.target.value))\n },\n changeMainPropertyInWhatManner: (event) => {\n dispatch(act.ChangeMainPropertyInWhatManner(event.target.value))\n },\n changeMainPropertySources: (event) => {\n dispatch(act.ChangeMainPropertySources(event.target.value))\n },\n changeMainPropertyRefinanceYearAcquired: (event) => {\n\n dispatch(act.ChangeMainPropertyRefinanceYearAcquired(event.target.value))\n },\n changeMainPropertyRefinanceOriginalCost: (event) => {\n dispatch(act.ChangeMainPropertyRefinanceOriginalCost(event.target.value))\n },\n changeMainPropertyRefinancePurpose: (event) => {\n dispatch(act.ChangeMainPropertyRefinancePurpose(event.target.value))\n },\n changeMainPropertyRefinanceImprovementsDesc: (event) => {\n dispatch(act.ChangeMainPropertyRefinanceImprovementsDesc(event.target.value))\n },\n changeMainPropertyRefinanceExistingLiens: (event) => {\n dispatch(act.ChangeMainPropertyRefinanceExistingLiens(event.target.value))\n },\n changeMainPropertyRefinanceImprovementsStatus: (event) => {\n dispatch(act.ChangeMainPropertyRefinanceImprovementsStatus(event.target.value))\n },\n changeMainPropertyRefinanceCost: (event) => {\n dispatch(act.ChangeMainPropertyRefinanceCost(event.target.value))\n },\n changeMainPropertyConstructionYearAcquired: (event) => {\n dispatch(act.ChangeMainPropertyConstructionYearAcquired(event.target.value))\n },\n changeMainPropertyConstructionOriginalCost: (event) => {\n dispatch(act.ChangeMainPropertyConstructionOriginalCost(event.target.value))\n },\n changeMainPropertyConstructionExistingLiens: (event) => {\n dispatch(act.ChangeMainPropertyConstructionExistingLiens(event.target.value))\n },\n changeMainPropertyConstructionPresentValue: (event) => {\n dispatch(act.ChangeMainPropertyConstructionPresentValue(event.target.value))\n },\n changeMainPropertyConstructionCostOfImprovements: (event) => {\n dispatch(act.ChangeMainPropertyConstructionCostOfImprovements(event.target.value))\n },\n changeMainPropertyExpirationDate: (event) => {\n dispatch(act.ChangeMainPropertyExpirationDate(event.target.value))\n },\n changeMainPropertyPropertyType: (event) => {\n dispatch(act.ChangeMainPropertyPropertyType(event.target.value))\n },\n changeMainProperty: (value, verb) => {\n dispatch(act.ChangeMainProperty(value, verb))\n },\n changeMobileHomeInfo: (value, verb) => {\n dispatch(act.ChangeMobileHomeInfo(value, verb))\n },\n changeMainPropertySalesPrice: (event) => {\n dispatch(act.ChangeMainPropertySalesPrice(event))\n },\n changeMainPropertyAppraisal: (event) => {\n dispatch(act.ChangeMainPropertyAppraisal(event))\n },\n prependBorrowerOwnedProperty: () => {\n dispatch(act.PrependBorrowerOwnedProperty())\n },\n changeOwnedProperty: (t, i, v) => {\n dispatch(act.ChangeOwnedProperty(t, i, v))\n },\n removeBorrowerOwnedProperty: (i) => {\n dispatch(act.RemoveBorrowerOwnedProperty(i))\n },\n changeBorrowerInfo: (input, who, verb) => {\n dispatch(act.ChangeBorrowerInfo(input, who, verb))\n },\n updateApplicationAttribute: (event, verb) => {\n dispatch(act.UpdateApplicationAttribute(event.target.value, verb))\n },\n addNewMortgageLoan: () => {\n dispatch(act.AddNewMortgageLoan())\n },\n removeNewMortgageLoan: (index) => {\n dispatch(act.RemoveNewMortgageLoan(index))\n },\n clearNewMortgageLoans: () => {\n dispatch(act.ClearNewMortgageLoans())\n },\n updateNewMortgageLoanAttribute: (value, index, verb) => {\n dispatch(act.UpdateNewMortgageLoanAttribute(value, index, verb))\n },\n})\n\nclass Property extends Component {\n constructor(props) {\n super(props)\n\n const { loanbalance } = this.props.application\n\n this.state = {\n validated: false,\n innerWidth: 0,\n isMobileHomeOnly: false,\n propertyTypesLoading: true,\n loanLimits: {},\n useEstimated: false,\n mortgageLoans: [],\n loanbalance,\n isDrawerVisible: false\n }\n\n this.lastcompletion = 0\n\n this.isValidated = this.isValidated.bind(this)\n this.countyref = React.createRef()\n this.stateref = React.createRef()\n }\n\n componentDidMount() {\n this.fetchLoanLimits()\n this.getCompanyConfig()\n\n this.setState({ innerWidth: window.innerWidth })\n\n const { financingsameproperty, assetsandliabilities } = this.props.application\n const { isManufacturedHome, isMixedUse, purpose } = this.props.application.property\n const { units, salesprice } = this.props.property\n\n if (financingsameproperty === true) {\n if (purpose === st.POL_Refinance || purpose === st.POL_Cashoutrefinance) {\n this.props.changeMainPropertyOccupancy({ target: { value: \"principal\" } })\n }\n this.updateRefinanceAddressWithResidencyAddress()\n }\n if (financingsameproperty === null) {\n this.props.updateSameProperty({ target: { checked: true } })\n this.updateRefinanceAddressWithResidencyAddress()\n }\n\n if (isManufacturedHome === null) {\n this.props.changeMainProperty(false, \"isManufacturedHome\")\n }\n if (isMixedUse === null) {\n this.props.changeMainProperty(false, \"isMixedUse\")\n }\n if (units === \"\") {\n this.props.changeMainPropertyUnits({ target: { value: \"2\" } })\n }\n if (salesprice === \"\") {\n this.props.changeMainPropertySalesPrice(500000)\n this.props.changeMainPropertyAppraisal(500000)\n }\n\n if (!isEmpty(assetsandliabilities.loans)) {\n const mortgageLoans = assetsandliabilities.loans.filter((loan) => loan.correction !== 'duplicate').filter(isMortgageLoan)\n this.setState({ mortgageLoans })\n if (mortgageLoans.length === 1 && mortgageLoans[0].name === 'Estimated') {\n this.setState({ useEstimated: true })\n if (this.state.loanbalance === '') {\n this.updateLoanBalance('0')\n this.setState({ loanbalance: '0' })\n }\n }\n }\n\n this.completion('property')\n\n window.addEventListener('resize', () => {\n this.setState({\n innerWidth: window.innerWidth\n })\n })\n }\n\n updateLoanBalance = (val) => {\n this.props.updateApplicationAttribute({ target: { value: val } }, 'loanbalance')\n }\n\n fetchLoanLimits = async () => {\n try {\n const response = await fetch('/data/loanlimits')\n if (!response.ok) {\n throw Error(response.statusText)\n }\n const data = await response.json()\n this.setState({ loanLimits: data })\n } catch (err) {\n console.error(err)\n }\n }\n\n updateRefinanceAddressWithResidencyAddress = (initial = true) => {\n const { who } = this.props\n const { borrower, coborrower, property } = this.props.application\n const presentAddressStreet = who === com.borrower ? borrower.presentaddressstreet : coborrower.presentaddressstreet\n if (property.address === \"\" || !initial) {\n this.props.changeMainProperty(presentAddressStreet, \"address\")\n this.lookupAddress(presentAddressStreet)\n }\n }\n sameaddress = () => {\n const { who } = this.props\n const addr = com.formatAddress(this.props.application[who])\n return addr\n }\n lookupAddress = (providedAddress) => {\n const now = Date.now()\n\n if (now - this.lastcompletion < 500)\n return\n\n let addr = this.props.application.property.address\n if (typeof providedAddress !== \"undefined\") {\n addr = providedAddress\n }\n if (this.isOccupancyHidden()) {\n addr = this.sameaddress()\n this.props.changeMainPropertyAddress({ target: { value: addr } })\n }\n\n if (\"\" === addr)\n return\n\n const GOOGLE_MAPS_API_KEY = 'AIzaSyBQFO5uQtyZ5EsbTsNEK7HOhEA00KS3le8'\n const GEOCODE_API_URL = 'https://maps.googleapis.com/maps/api/geocode/json'\n const target = encodeURI(`${GEOCODE_API_URL}?address=${addr}&key=${GOOGLE_MAPS_API_KEY}`)\n\n fetch(target, {\n method: 'GET',\n }).then(\n response => {\n if (response.status !== 200) {\n console.warn(`Looks like there was a problem. Status Code: ${response.status}`)\n return\n }\n\n // Examine the text in the response\n response.json().then(js => {\n if (js.status === \"OK\") {\n this.onStreetAddressCompletion(js.results[0].address_components)\n }\n })\n }\n ).catch((err) => {\n console.error('Fetch Error :', err)\n })\n }\n\n isOccupancyHidden = () => {\n return this.props.application.financingsameproperty && (this.props.application.property.purpose !== st.POL_Purchase)\n }\n\n componentDidUpdate() {\n this.completion('property')\n }\n\n componentWillUnmount() {}\n\n completion = (stateKey) => {\n const keysToFilter = ['occupancy', 'propertytype'];\n const filteredObj = keysToFilter.reduce((obj, key) => {\n if (key.includes('.')) {\n const nestedKeys = key.split('.')\n\n let value = this.props[stateKey]\n for (const nestedKey of nestedKeys) {\n if (value.hasOwnProperty(nestedKey)) {\n value = value[nestedKey]\n } else {\n value = undefined\n break\n }\n }\n\n if (value !== undefined) {\n obj[nestedKeys[nestedKeys.length - 1]] = value\n }\n } else if (this.props[stateKey].hasOwnProperty(key)) {\n obj[key] = this.props[stateKey][key]\n }\n\n return obj\n }, {})\n\n const emptyNum = Object.keys(filteredObj).filter((key) => {\n const value = filteredObj[key];\n return value === '' || value === null || value === undefined;\n }).length;\n const progressValue = Math.round(((keysToFilter.length - emptyNum) / keysToFilter.length) * 100);\n sessionStorage.setItem(\"progressValue\", progressValue);\n }\n\n checkDollarInputs = (purpose, loanbalance) => {\n const { appraisal, salesprice } = this.props.property\n const isAppraisalValid = isNumericOrNumericString(appraisal) && appraisal !== '0'\n if (purpose === st.POL_Purchase && !isAppraisalValid) {\n return 'You need to provide the estimated home value.'\n }\n\n const { hascontract } = this.props.application.property\n const isSalesPriceValid = isNumericOrNumericString(salesprice) && salesprice !== '0'\n if (purpose === st.POL_Purchase && hascontract && !isSalesPriceValid) {\n return 'You need to provide the purchase price.'\n }\n\n const { needMortgageBalance } = this.needsToAskMortgageBalance(purpose, this.state.mortgageLoans)\n const isLoanBalanceValid = isNumericOrNumericString(loanbalance) && loanbalance !== '0'\n if (needMortgageBalance && !isLoanBalanceValid) {\n return 'You need to provide the current mortgage balance on the subject property.'\n }\n\n const { downpayment, paydown, cashout } = this.props.application.selection\n const isDownpaymentValid = isNumericOrNumericString(downpayment) && downpayment !== '0'\n if (purpose === st.POL_Purchase && !isDownpaymentValid) {\n return 'You need to provide the downpayment amount.'\n }\n const isPaydownValid = isNumericOrNumericString(paydown) && paydown !== '0'\n if (purpose === st.POL_Refinance && !isPaydownValid) {\n return 'You need to provide the paydown amount.'\n }\n const isCashoutValid = isNumericOrNumericString(cashout) && cashout !== '0'\n if (purpose === st.POL_Cashoutrefinance && !isCashoutValid) {\n return 'You need to provide the cashout amount.'\n }\n }\n\n handleSubmit = () => {\n const { otherliens } = this.props.application\n const { purpose } = this.props.application.property\n const { loans, propertyownedfreeandclear } = this.props.application.assetsandliabilities\n const { loanbalance } = this.state\n\n const error = this.checkDollarInputs(purpose, loanbalance)\n if (error) {\n alert(error)\n return false\n }\n\n const [totalmortgage, mortgagebalance, cashout] = calculateBalancesAndPayments(purpose, loans, otherliens)\n\n if (purpose === st.POL_Cashoutrefinance) {\n this.props.updateSelectField(cashout, 'mincashout')\n }\n\n if (purpose === st.POL_Refinance && totalmortgage === 0 && true === propertyownedfreeandclear) {\n alert(\"You can't refinance the property that you own free and clear!\")\n return false\n }\n\n if (!isEmpty(loans) && loans[0].name !== 'Estimated') {\n this.updateLoanBalance(mortgagebalance)\n\n if (purpose === st.POL_Refinance) {\n const { paydown } = this.props.application.selection\n this.props.updateSelectField(com.safeParseInt(mortgagebalance) - com.safeParseInt(paydown), 'loansize')\n }\n if (purpose === st.POL_Cashoutrefinance) {\n const { cashout } = this.props.application.selection\n this.props.updateSelectField(com.safeParseInt(mortgagebalance) + com.safeParseInt(cashout), 'loansize')\n }\n } else {\n if (purpose === st.POL_Refinance) {\n if (propertyownedfreeandclear === false || propertyownedfreeandclear === null) {\n const { loanbalance } = this.props.application\n if (loanbalance === '0') {\n alert('The current loan balance on the subject property cannot be 0, if you do not own the property free and clear.')\n return false\n }\n }\n const { paydown } = this.props.application.selection\n const value = Math.max(0, com.safeParseInt(loanbalance) - com.safeParseInt(paydown))\n this.props.updateSelectField(value, 'loansize')\n }\n if (purpose === st.POL_Cashoutrefinance) {\n const { cashout } = this.props.application.selection\n const value = com.safeParseInt(loanbalance) + com.safeParseInt(cashout)\n this.props.updateSelectField(value, 'loansize')\n }\n this.updateLoanBalance(loanbalance)\n }\n\n return true\n }\n\n onFinish = () => {\n const { who } = this.props\n const { completedsteps } = this.props.application[who] || {}\n\n if (!completedsteps?.property) {\n this.props.changeBorrowerInfo(\n { ...completedsteps, property: true },\n who,\n 'completedsteps'\n )\n }\n }\n\n isValidated() {\n if (!this.form.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n\n return true\n }\n\n getWidth = () => {\n const innerWidth = this.state.innerWidth\n if (innerWidth < 1301 && innerWidth > 1041) {\n return 50\n } else {\n return '100%'\n }\n }\n\n changeMainPropertyPropertyType = e => {\n com.touch()\n\n const { who, financingsameproperty } = this.props\n const { purpose } = this.props.property\n if (purpose !== st.POL_Purchase && financingsameproperty)\n this.props.changeBorrowerInfo(e, who, \"propertytype\")\n\n this.props.changeMainPropertyPropertyType(e)\n }\n\n lookupProperty = (num, prefix, short, sfx, city, zip) => {\n const body = {\n number: num,\n prefix: prefix,\n street: short,\n suffix: sfx,\n city: city,\n zip: zip\n }\n\n const token = sessionStorage.getItem(\"ZeitroA\")\n this.props.changeMainProperty(false, \"lookupsuccessful\")\n fetch('/borrower/findproperty', {\n method: 'POST',\n headers: {\n Cache: \"no-cache\",\n Authorization: \"Bearer \" + token,\n 'Content-Type': 'application/json',\n \"X-Borrower\": this.props.borrowerid,\n },\n body: JSON.stringify(body)\n }).then(\n response => {\n if (response.status !== 200) {\n alert(`Looks like there was a problem. Status Code: ${response.status}`)\n window.document.dispatchEvent(new Event('reauthenticate'), \"\")\n return\n }\n\n // Examine the text in the response\n response.json().then(js => {\n if (this.props.property.yearbuilt === \"\" && js.Yearbuilt !== \"\" && !this.props.property.lookupsuccessful) {\n this.props.changeMainPropertyYearBuilt({ target: { value: js.Yearbuilt } })\n this.props.changeMainPropertyUnits({ target: { value: js.Units } })\n this.props.changeMainProperty(true, \"lookupsuccessful\")\n if (this.props.application.property.purpose !== st.POL_Purchase) {\n const dt = js.Lastsale\n const dat = dt.split('T')[0].split('-')\n const d = parseInt(dat[0])\n this.props.changeMainPropertyRefinanceYearAcquired({ target: { value: d } })\n const cost = js.Lastsaleprice.toString()\n this.props.changeMainPropertyRefinanceOriginalCost({ target: { value: cost } })\n }\n }\n })\n }\n ).catch((err) => {\n console.error('Fetch Error :', err)\n })\n }\n\n changeMainPropertyAddress = e => {\n //this.onStreetAddressCompletion(address)\n const address = e.target.value\n if (address === \"\") {\n this.props.changeMainProperty(false, \"lookupsuccessful\")\n }\n\n this.props.changeMainPropertyAddress(e)\n }\n\n propertyKnown = () => {\n return !(this.props.property.purpose === st.POL_Purchase && false === this.props.application.property.hascontract)\n }\n\n getCompanyConfig =() => {\n const token = sessionStorage.getItem(\"ZeitroA\")\n fetch('/borrower/get_company_config', {\n method: 'GET',\n headers: {\n Authorization: \"Bearer \" + token,\n Cache: \"no-cache\",\n \"X-Borrower\": this.props.borrowerid,\n }\n }).then(\n response => {\n if (response.status !== 200) {\n return;\n }\n response.json().then(js => {\n if (js.status !== \"OK\") {\n return;\n }\n\n this.setState({\n isMobileHomeOnly: js.configurations.isMobileHomeOnly,\n propertyTypesLoading: false,\n });\n });\n }\n ).catch((err) => {\n console.error('Fetch company config error :', err);\n })\n }\n\n onAddressBlur = (e) => {\n this.timer = setTimeout(this.lookupAddress, 200)\n }\n\n onStreetAddressCompletion = (address, forMobileHome = false) => {\n this.lastcompletion = Date.now()\n\n if (\"undefined\" !== typeof this.timer)\n clearTimeout(this.timer)\n\n const num = com.getSubaddress(address, \"street_number\", \"long_name\")\n const city = com.getSubaddress(address, \"locality\", \"long_name\")\n const zip = com.getSubaddress(address, \"postal_code\", \"long_name\")\n const street = com.getSubaddress(address, \"route\", \"short_name\")\n const county = com.getSubaddress(address, \"administrative_area_level_2\", \"long_name\")\n const longstate = com.getSubaddress(address, \"administrative_area_level_1\", \"long_name\")\n\n\n\n if (!forMobileHome) {\n if (county !== \"\")\n this.props.changeMainProperty(county, \"county\")\n this.props.changeMainProperty(longstate, \"state\")\n this.props.changeMainProperty(city, \"city\")\n this.props.changeMainProperty(zip, \"zipcode\")\n }\n\n const addr = [\n num,\n street,\n city,\n com.getSubaddress(address, \"administrative_area_level_1\", \"short_name\"),\n zip\n ].join(\" \").replace(\" ,\", \",\")\n\n if (num !== \"\") {\n if (forMobileHome) {\n this.props.changeMobileHomeInfo(addr, \"parkAddress\")\n return\n } else {\n this.props.changeMainPropertyAddress({ target: { value: addr } })\n }\n }\n\n this.props.changeMainPropertyAddress({ target: { value: addr } })\n }\n\n processAdditionalNewMortgages = (val, index) => {\n const { creditor, lientype, monthlyamount, loanamount, creditlimit, key } = val\n\n const changeNewLoanAttr1 = (verb) => {\n return (event) => {\n com.touch()\n this.props.updateNewMortgageLoanAttribute(event, index, verb)\n }\n }\n const changeNewLoanAttr = (verb) => {\n return (event) => {\n com.touch()\n this.props.updateNewMortgageLoanAttribute(event.target.value, index, verb)\n }\n }\n const changeNewLoanAttrs = (verb) => {\n return (event) => {\n com.touch()\n this.props.updateNewMortgageLoanAttribute(event, index, verb)\n }\n }\n const removeNewMortgageLoan = (e) => {\n com.touch()\n this.props.removeNewMortgageLoan(index)\n }\n\n const { newloans } = this.props.application.assetsandliabilities\n\n return (\n \n achangeMainPropertyState(e)}\n value={state}>\n {getStates()}\n \n
\n \n changeMainPropertyCounty(e)}\n value={county}>\n {getCounties()}\n \n
\n \n { onBudget(e) }}\n >\n
\n \n \n Expected monthly gross rental income/month \n \n Please provide monthly gross rental income.\n \n \n
\n : \"\"}\n \n \n changeMainPropertyExpectedRentalIncome(e)}\n value={purchase.expectedgrossmonthlyrentalincome}\n />\n
\n \n \n \n \n \n Creditor\n \n \n \n \n \n Lien type\n \n \n \n \n \n Monthly amount\n \n \n \n \n \n Loan amount\n \n \n \n \n \n Credit limit Input 0 if N/A
} />\n \n \n \n First lien \n Subordinate lien \n \n
\n \n
\n \n
\n \n
\n \n \n \n \n \n Important! Your credit report contains home loans, but none of them are checked to be for your current residence. Double check the loans above. If your mortgages for current residence are missing in the credit report, please specify them.\n
\n ),\n MISSING_SUBJECT_PROPERTY: (\n \n Important! Your credit report contains home loans, but none of them are checked to be for the property being refinanced. Double check the loans above. If your mortgages for subject property are missing in the credit report, please specify them.\n
\n ),\n CANNOT_REFINANCE_FREE_CLEAR: (\n \n Important! You can't refinance a property that is owned free and clear.{' '}\n
\n )\n }\n\n if (purpose === st.POL_Purchase) {\n if (!useEstimated && hasMortgages && !hasprimary && !propertyownedfreeandclear) {\n return WARNING_MESSAGES.MISSING_PRIMARY_RESIDENCE\n }\n return ''\n }\n\n if (useEstimated && propertyownedfreeandclear && purpose === st.POL_Refinance) {\n return WARNING_MESSAGES.CANNOT_REFINANCE_FREE_CLEAR\n }\n\n if (!useEstimated) {\n if (hasMortgages && !hassubject && !propertyownedfreeandclear) {\n return WARNING_MESSAGES.MISSING_SUBJECT_PROPERTY\n }\n\n if (purpose === st.POL_Refinance) {\n return WARNING_MESSAGES.CANNOT_REFINANCE_FREE_CLEAR\n }\n }\n\n return ''\n }\n\n needsToAskMortgageBalance = (purpose, mortgageLoans) => {\n // if (isEmpty(mortgageLoans) || loansreviewed < mortgageLoans.length) return <>\n\n const { presentaddressownership } = this.props.application[this.props.who]\n if (purpose === st.POL_Purchase && presentaddressownership !== st.O_Own) {\n return <>\n }\n\n let hasMortgages = false\n let hassubject = false\n let hasprimary = false\n for (let index = 0; index < mortgageLoans.length; index++) {\n const loan = mortgageLoans[index]\n const creditLoanType = loan.creditloantype.toLowerCase()\n if (some(['mortgage', 'homeequity', 'realestate'], keyword => creditLoanType.includes(keyword))) {\n hasMortgages = true\n if (loan.forsubjectproperty) {\n if (loan.remainingbalance !== '')\n hassubject = true\n }\n if (loan.forprimaryresidence) {\n if (loan.remainingbalance !== '')\n hasprimary = true\n }\n }\n }\n\n const needMortgageBalance = purpose !== st.POL_Purchase && !hassubject\n\n return { needMortgageBalance, hasMortgages, hassubject, hasprimary }\n }\n\n presentFreeAndClear = () => {\n const { purpose } = this.props.application.property\n const { mortgageLoans, loanbalance } = this.state\n const { needMortgageBalance, hasMortgages, hassubject } = this.needsToAskMortgageBalance(purpose, mortgageLoans)\n\n return needMortgageBalance && (\n <>\n = 768 ? { height: 400, overflow: 'auto' } : undefined}>\n A first time home buyer is someone who meets any of the following conditions:\n
\n )\n render = () => {\n const changeMainPropertyUnits = e => {\n com.touch()\n this.props.changeMainPropertyUnits(e)\n }\n\n const changeOccupancy = e => {\n com.touch()\n this.props.changeMainProperty(e, \"occupancy\")\n }\n\n const changePropertyType = e => {\n com.touch()\n if (e === 'twotofourfamily') {\n this.props.changeMainPropertyUnits({ target: { value: \"2\" } })\n }\n if (e === \"mobilehome\") {\n this.props.changeMainProperty(true, \"isManufacturedHome\")\n } else {\n this.props.changeMainProperty(false, \"isManufacturedHome\")\n }\n this.props.changeMainProperty(e, \"propertytype\")\n }\n\n const saveHomeLoanDebts = e => {\n this.props.changeMobileHomeInfo(e, \"debtsToBePaid\")\n }\n\n const changeFirstTimeHomeBuyer = (e) => {\n com.touch()\n this.props.updateApplicationAttribute({ target: { value: e === 'yes' } }, 'firsttimebuyer')\n }\n\n const { firsttimebuyer, financingsameproperty } = this.props.application\n const {\n purpose,\n occupancy,\n propertytype,\n hascontract,\n isMixedUse,\n qualifiesForFHAsecondary,\n status,\n insurancemaintenancetaxes,\n netrentalincome\n } = this.props.application.property\n const {\n mobilehomeparkfullname,\n parkAddress,\n leasedSpaceRentAmount,\n widthft,\n widthinch,\n year,\n space,\n mobilehomedescription,\n mobilehometype,\n mobilehomelocation,\n originalpurchaseprice,\n manufacturerMake,\n manufacturerModel,\n cashOutRequested,\n debtsToBePaid\n } = this.props.property.mobilehomeinfo\n\n const { appraisal, salesprice, address, state, county, city, zipcode, mobilehomeinfo } = this.props.property\n const { downpayment, paydown, cashout } = this.props.application.selection\n const { newloans } = this.props.application.assetsandliabilities\n\n const isPreapproval = hascontract === false && purpose === st.POL_Purchase\n const isPurchase = this.props.property.purpose === st.POL_Purchase\n const isRefinance = this.props.property.purpose === st.POL_Refinance\n const isCashoutRefinance = this.props.property.purpose === st.POL_Cashoutrefinance\n\n const purposeLabel = () => {\n if (purpose === st.POL_Purchase) {\n return 'What is your down payment amount?'\n }\n return purpose === st.POL_Refinance ? 'What is the amount of your principal paydown?' : 'What is your cashout amount?'\n }\n\n return (\n - \n
- An individual who has not owned a principal residence for three years. If you've owned a home but your spouse has not, then you can purchase a place together as first-time homebuyers. \n
- A single parent who has only owned a home with a former spouse while married. \n
- A displaced homemaker who has only owned with a spouse. \n
- An individual who has only owned a principal residence not permanently affixed to a permanent foundation in accordance with applicable regulations. \n
- An individual who has only owned a property that was not in compliance with state, local, or model building codes—and that cannot be brought into compliance for less than the cost of constructing a permanent structure. \n
\n\n \n \n \n Are you a first-time homebuyer?\n {this.state.innerWidth < 768 ? (\n <>\n 
this.toggleDrawer(true)} />\n this.toggleDrawer(false)}\n open={this.state.isDrawerVisible}\n height=\"90vh\"\n className=\"mobile-tips-drawer\"\n zIndex=\"1999\"\n title={null}\n closable={false}\n >\n \n \n \n
\n\n Manufactured home
,\n image: \"/images/mobilehome.png\",\n width: 38,\n height: 38,\n }\n ] : [\n {\n value: 'singlefamilydetached',\n label: this.toggleDrawer(true)} />\n \n
\n \n \n ) : (\n \n
\n this.toggleDrawer(false)}>![](\"/images/drawer-close.svg\")
\n What is first time buyer?
\n \n {this.renderFirstTimeBuyerContent()}\n
\n \n \n How do you plan to use the property? \n \n
\n\n \n \n \n What is your expected property type?\n \n
\n ) : (\n \n ![\"mobilehome\"](\"/images/mobilehome.png\")
\n
\n \n \n
\n Manufactured Home:
\n A manufactured home is a prefabricated structure, built in a factory on a permanently attached chassis before being transported to site, used as a permanent or temporary residence.
\n \n
\n )}\n placement=\"bottom\"\n title=\"What are property types?\"\n />\n \n {this.state.propertyTypesLoading ? \n ![\"singlefamily\"](\"/images/singleFamily2.png\")
\n
\n \n \n
\n Single Family Residence:
\n A single dwelling unit that has no shared property and is built on its own parcel of land.
\n \n ![\"condo\"](\"/images/condo2.png\")
\n
\n \n \n
\n Condo
\n A housing or residential complex in which there are separate units, with each unit being owned by an individual.
\n \n ![\"multifamily\"](\"/images/multiFamily2.png\")
\n
\n \n \n
\n Multi-Family (2 to 4 Unit):
\n A single building that's divided to accommodate more than one family living separately.
\n \n \n
\n \n \n
\n Manufactured Home:
\n A manufactured home is a prefabricated structure, built in a factory on a permanently attached chassis before being transported to site, used as a permanent or temporary residence.
\n Single family
,\n image: '/images/singleFamily2.png',\n width: 38,\n height: 38,\n },\n {\n value: 'singlefamilyattached',\n label: Townhouse
,\n image: \"/images/townhouse2.png\",\n width: 38,\n height: 38,\n },\n {\n value: 'twotofourfamily',\n label: Multi-family
,\n image: \"/images/multiFamily2.png\",\n width: 47,\n height: 47,\n },\n {\n value: 'condominium',\n label: 'Condo',\n image: \"/images/condo2.png\",\n width: 38,\n height: 38,\n },\n {\n value: 'mobilehome',\n label: Manufactured home
,\n image: \"/images/mobilehome.png\",\n width: 38,\n height: 38,\n }\n ]}\n onChangeSelect={changePropertyType}\n value={propertytype}\n type='radio'\n hideCircle={true}\n direction=\"horizontal\" />\n )}\n \n \n\n {propertytype === \"twotofourfamily\" &&\n \n changeMainPropertyUnits({ target: { value: e } })}\n value={this.props.property.units}\n className=\"w-100\"\n style={{ height: 44 }}\n >\n 1 \n 2 \n 3 \n 4 \n \n
\n \n \n \n What is the full name of the manufactured home park? \n this.props.changeMobileHomeInfo(e.target.value, \"mobilehomeparkfullname\")}\n />\n \n Please provide the full name of the manufactured home park\n \n \n \n
\n \n \n this.onStreetAddressCompletion(e, true)}\n placeholder=\"Address starting with the house number\"\n required={true}\n name={\"parkAddress\"}\n defaultValue={parkAddress}\n onChange={e => this.props.changeMobileHomeInfo(e.target.value, \"parkAddress\")}\n pattern=\"^[0-9]+\\s[\\p{L}\\p{N} !:,&()'?#+\\/@-]+$\"\n goodfeedback=\"\"\n badfeedback=\"Please provide address of the manufactured home park\"\n />\n \n \n
\n \n \n \n What is the monthly space rent for the manufactured home park?\n \n {\n this.props.changeMobileHomeInfo(e.toString(), \"leasedSpaceRentAmount\")\n }}\n defaultValue={leasedSpaceRentAmount}>\n \n \n \n
\n \n \n Width of the manufactured home \n \n \n \n Length of the manufactured home \n \n \n
\n \n \n What year is the manufactured home built? \n \n \n \n Space number in the manufactured home park \n this.props.changeMobileHomeInfo(e.target.value, \"space\")}\n />\n \n Please provide the space # of the manufactured home in park\n \n \n \n
\n \n \n Condition of manufactured home \n \n \n \n Type of manufactured home \n \n \n
\n \n \n Location of manufactured home \n \n \n {!isPurchase && (\n \n Original purchase price \n {\n this.props.changeMobileHomeInfo(e.toString(), \"originalpurchaseprice\")\n }}\n defaultValue={originalpurchaseprice}\n />\n \n Please provide the orinial purchase price\n \n \n \n )}\n
\n \n \n Manufacturer make \n this.props.changeMobileHomeInfo(e.target.value, \"manufacturerMake\")}\n />\n \n \n \n Manufacturer model \n this.props.changeMobileHomeInfo(e.target.value, \"manufacturerModel\")}\n />\n \n \n
\n\n {isCashoutRefinance && (\n \n \n \n Cash out requested\n \n {\n this.props.changeMobileHomeInfo(e.toString(), \"cashOutRequested\")\n }}\n defaultValue={cashOutRequested}\n />\n \n Please provide the cash out requested\n \n \n \n
\n )}\n\n {!isPurchase && (\n \n
\n )}\n
\n }\n\n {purpose === st.POL_Purchase && (\n <>\n \n
\n \n this.props.changeMobileHomeInfo(e.target.value, \"widthft\")}\n suffix=\"ft\"\n size=\"large\"\n />\n
\n \n this.props.changeMobileHomeInfo(e.target.value, \"widthinch\")}\n suffix=\"inch\"\n size=\"large\"\n />\n
\n \n
\n\n \n this.props.changeMobileHomeInfo(e.target.value, \"lengthft\")}\n suffix=\"ft\"\n size=\"large\"\n />\n
\n \n this.props.changeMobileHomeInfo(e.target.value, \"lengthinch\")}\n suffix=\"inch\"\n size=\"large\"\n />\n
\n \n {\n if (e.target.value.length > 4) {\n this.props.changeMobileHomeInfo(e.target.value.slice(0, 4), \"year\")\n } else {\n this.props.changeMobileHomeInfo(e.target.value, \"year\")\n }\n }}\n size=\"large\"\n />\n
\n \n this.props.changeMobileHomeInfo(e, \"mobilehomedescription\")}\n value={mobilehomedescription}\n >\n New \n Used \n Repo \n \n
\n \n this.props.changeMobileHomeInfo(e, \"mobilehometype\")}\n className=\"w-100\"\n style={{ height: 44 }} value={mobilehometype}\n >\n Single Wide \n Double Wide \n Triple Wide \n \n
\n \n this.props.changeMobileHomeInfo(e, \"mobilehomelocation\")}\n className=\"w-100\"\n style={{ height: 44 }} value={mobilehomelocation}>\n Park \n Land/home \n Co-op park \n Shared park \n \n
\n If you don't have a property address yet, you'll receive a prequalification letter that demonstrates your borrowing potential to sellers and real estate agents. This letter can be used to strengthen your offers when you do find a property you want to pursue.
\n And when you have a specific property address, you can come back and get personalized interest rates based on your chosen property. At that point, you can formally apply for the loan and proceed with the purchase process.
\n }\n placement=\"top\"\n title=\"What if I don't know the property address yet?\"\n />\n \n this.props.changeMainProperty(e, \"status\")}\n />\n
\n Property status
\n \n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}\n parser={(value) => value.replace(/\\$\\s?|(,*)/g, '')}\n onChange={e => this.props.changeMainProperty(e, \"insurancemaintenancetaxes\")}\n size=\"large\"\n />\n
\n\n {(occupancy === \"investment\" || propertytype === \"twotofourfamily\") && (\n \n Monthly insurance, taxes, association dues, etc.\n
\n \n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}\n parser={(value) => value.replace(/\\$\\s?|(,*)/g, '')}\n onChange={e => this.props.changeMainProperty(e, \"netrentalincome\")}\n size=\"large\"\n />\n
\n )}\n \n Expected Monthly Rental Income\n
\n \n
\n \n \n
\n \n \n \n\n \n Purpose of Refinance: \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Improvements: \n \n \n \n \n \n \n \n Their Cost: \n \n Please provide cost of improvements.\n \n \n }\n \n \n {purpose === \"other\" &&\n \n \n Please write an explanation: \n \n Please provide your estimated liabilities.\n \n \n \n \n }\n \n \n Describe Improvements: \n \n Please provide your estimated liabilities.\n \n \n \n \n
\n )\n }\n\n onSelect = e => {\n const ar = []\n const adj = []\n\n e.forEach(x => {\n if (x.id !== \"Other\") {\n ar.push(x.id)\n adj.push(x)\n } else {\n const other = \" \" + this.other\n ar.push(other)\n adj.push({ id: other, name: other })\n }\n\n })\n\n const out = ar.join(\",\")\n this.selected = adj\n com.touch()\n this.props.changeMainPropertySources({ target: { value: out } })\n }\n\n parseSources = v => {\n const s = []\n if (v === \"\") {\n return s\n }\n\n const ar = v.split(',')\n ar.forEach(x => {\n if (options.includes(x)) {\n s.push({ id: x, name: x })\n } else {\n if (x === '') return\n s.push({ id: \"Other\", name: \"Other\" })\n }\n })\n\n return s\n }\n\n parseBareSources = v => {\n const s = []\n if (v === \"\") return s\n const ar = v.split(',')\n ar.forEach(x => {\n s.push({ id: x, name: x })\n })\n return s\n }\n\n getOther = () => {\n const ar = this.props.property.sources.split(',')\n let o = \"\"\n ar.forEach(x => {\n if (x === \"\") return\n if (!options.includes(x)) {\n o = x.slice(1, x.length)\n o = o.replaceAll(';', ',')\n\n }\n })\n\n return o\n }\n\n render = () => {\n const aupdateTransaction = (verb) => {\n return e => {\n const event = {\n target: {\n value: e\n }\n }\n com.touch()\n this.props.updateTransaction(event, verb)\n }\n }\n\n const updateTransaction = (verb) => {\n return e => {\n com.touch()\n this.props.updateTransaction(e, verb)\n }\n }\n\n const onSelect = e => {\n com.touch()\n this.props.changeMainPropertyInWhatManner({ target: { value: e } })\n }\n\n\n const changeMainPropertyInWhatName = e => {\n com.touch()\n this.props.changeMainPropertyInWhatName(e)\n }\n\n const hasOther = () => {\n const ar = this.props.property.sources.split(',')\n\n let has = false\n ar.forEach(x => {\n if (x === '') return\n\n if (!options.includes(x)) {\n has = true\n }\n })\n\n return has\n }\n\n const changeOther = e => {\n const ar = []\n const adj = []\n\n this.selected.forEach(x => {\n if (!options.includes(x.id)) {\n const r = \" \" + e.target.value.replaceAll(',', ';')\n ar.push(r)\n adj.push({ id: r, name: r })\n } else {\n ar.push(x.id,)\n adj.push({ id: x.id, name: x.name })\n }\n })\n\n const out = ar.join(\",\")\n this.selected = adj\n\n com.touch()\n this.other = e.target.value\n this.props.changeMainPropertySources({ target: { value: out } })\n\n }\n\n const { purpose, inwhatmanner, inwhatname, sources } = this.props.property\n const { cashdepositedby, depositamount } = this.props.application.transaction\n\n this.parseSources(sources)\n\n return (\n Cash Out Refinance Loan Details:
\n \n \n \n Please specify in what name the title will be held.\n \n \n \n \n \n Manner in which title will be held\n \n There are several ways that people can take title to a property. Some of the common forms are:\n
\n }\n placement=\"bottom\"\n />\n \n \n Transactions\n
\n \n \n \n \n Title will be held in what name(s)\n \n Specify the names of individual, or individuals, or legal entities that will hold the title. For example, husband and wife in case of joint tenancy.\n
\n }\n placement=\"bottom\"\n />\n \n Borrower must be on the title
\n - \n
- Joint Tenancy: Each person has an undivided interest in the property. \n
- Tenants in Common: Indicates the percentage of ownership in the property. It is not an undivided interest as in Joint Tenancy; for example, one party may own 30% and another party may own 70%. \n
- Sole and Separate: Allows an individual to have 100% title to the property. A single or unmarried person may have this type of title. \n
\n { onSelect(e) }}\n >\n {com.mannerthetitleheld.map((st) => (\n {st} \n ))}\n \n
\n \n \n \n \n {(purpose === \"cashoutrefinance\") && this.renderRefinance()}\n {purpose === \"purchase\" &&\n \n Provide name of the escrow or title company.\n \n\n \n \n \n Amount \n \n Please provide the deposit amount.\n \n \n \n \n
\n }\n \n \n )\n }\n}\n\nMoreProperty = connect(mapStateToPropsMore, mapDispatchToPropsMore, null, { forwardRef: true })(MoreProperty)\n\nexport class DetailProperty extends Component {\n constructor(props) {\n super(props)\n\n this.form = React.createRef()\n\n this.state = {\n loanLimits: {}\n }\n\n this.lastcompletion = 0\n\n fetch(\"/data/loanlimits\")\n .then((res) => {\n if (!res.ok) {\n console.warn(`Looks like there was a problem. Status Code: ${res.status}`)\n return\n }\n return res.json()\n })\n .then((res) => {\n this.setState({ loanLimits: res })\n })\n .catch((err) => {\n console.error(err)\n })\n }\n\n updateRefinanceAddressWithResidencyAddress = () => {\n const { who } = this.props\n const { borrower, coborrower, property } = this.props.application\n const presentAddressStreet = who === com.borrower ? borrower.presentaddressstreet : coborrower.presentaddressstreet\n if (property.address === \"\") {\n this.props.changeMainProperty(presentAddressStreet, \"address\")\n this.lookupAddress(presentAddressStreet)\n }\n }\n\n componentDidMount() {\n const { financingsameproperty, property } = this.props.application\n if (financingsameproperty === true) {\n if (property.purpose === 'refinance' || property.purpose === 'cashoutrefinance') {\n this.props.changeMainPropertyOccupancy({ target: { value: \"principal\" } })\n }\n\n this.updateRefinanceAddressWithResidencyAddress()\n }\n if (financingsameproperty === null) {\n this.props.updateSameProperty({ target: { checked: true } })\n this.updateRefinanceAddressWithResidencyAddress()\n }\n this.completion('property')\n }\n\n componentDidUpdate() {\n this.completion('property')\n }\n\n componentWillUnmount() { }\n\n completion = (stateKey) => {\n const keysToFilter = ['address', 'appraisal', 'salesprice', 'isManufacturedHome']\n const { propertytype, occupancy } = this.props[stateKey]\n if (propertytype === \"twotofourfamily\") {\n keysToFilter.push('units')\n }\n if (occupancy === \"principal\") {\n keysToFilter.push('isMixedUse')\n }\n if (occupancy === \"investment\" || (occupancy === \"principal\" && this.props.application[stateKey].propertytype === \"twotofourfamily\")) {\n keysToFilter.push('purchase.expectedgrossmonthlyrentalincome')\n }\n const filteredObj = keysToFilter.reduce((obj, key) => {\n if (key.includes('.')) {\n const nestedKeys = key.split('.')\n let value = this.props[stateKey]\n\n for (const nestedKey of nestedKeys) {\n if (value.hasOwnProperty(nestedKey)) {\n value = value[nestedKey]\n } else {\n value = undefined\n break\n }\n }\n\n if (value !== undefined) {\n obj[nestedKeys[nestedKeys.length - 1]] = value\n }\n } else if (this.props[stateKey].hasOwnProperty(key)) {\n obj[key] = this.props[stateKey][key]\n }\n\n return obj\n }, {})\n\n const emptyNum = Object.keys(filteredObj).filter((key) => {\n const value = filteredObj[key]\n return value === '' || value === null || value === undefined\n }).length\n const progressValue = Math.round(((keysToFilter.length - emptyNum) / keysToFilter.length) * 100)\n sessionStorage.setItem(\"progressValue\", progressValue)\n }\n\n isValidated() {\n if (!this.form.current.reportValidity()) {\n this.setState({ validated: true })\n return false\n }\n return true\n }\n\n onAddressBlur = (e) => {\n this.timer = setTimeout(this.lookupAddress, 200)\n }\n\n isoccupancyHidden = () => {\n return this.props.application.financingsameproperty && (this.props.application.property.purpose !== st.POL_Purchase)\n }\n\n sameaddress = () => {\n const { who } = this.props\n const addr = com.formatAddress(this.props.application[who])\n return addr\n }\n\n changeMainPropertyAddress = e => {\n //this.onStreetAddressCompletion(address)\n const address = e.target.value\n if (address === \"\") {\n this.props.changeMainProperty(false, \"lookupsuccessful\")\n }\n\n this.props.changeMainPropertyAddress(e)\n }\n\n\n lookupAddress = (providedAddress) => {\n const now = Date.now()\n\n if (now - this.lastcompletion < 500)\n return\n\n let addr = this.props.application.property.address\n if (typeof providedAddress !== \"undefined\") {\n addr = providedAddress\n }\n if (this.isoccupancyHidden()) {\n addr = this.sameaddress()\n this.props.changeMainPropertyAddress({ target: { value: addr } })\n\n }\n\n if (\"\" === addr)\n return\n\n const GOOGLE_MAPS_API_KEY = 'AIzaSyBQFO5uQtyZ5EsbTsNEK7HOhEA00KS3le8'\n const GEOCODE_API_URL = 'https://maps.googleapis.com/maps/api/geocode/json'\n const target = encodeURI(`${GEOCODE_API_URL}?address=${addr}&key=${GOOGLE_MAPS_API_KEY}`)\n\n fetch(target, {\n method: 'GET',\n }).then(\n response => {\n if (response.status !== 200) {\n console.warn(`Looks like there was a problem. Status Code: ${response.status}`)\n return\n }\n\n // Examine the text in the response\n response.json().then(js => {\n if (js.status === \"OK\") {\n this.onStreetAddressCompletion(js.results[0].address_components)\n }\n })\n }\n ).catch((err) => {\n console.error('Fetch Error :', err)\n })\n }\n\n onStreetAddressCompletion = (address, forMobileHome = false) => {\n this.lastcompletion = Date.now()\n\n if (\"undefined\" !== typeof this.timer)\n clearTimeout(this.timer)\n\n const num = com.getSubaddress(address, \"street_number\", \"long_name\")\n const city = com.getSubaddress(address, \"locality\", \"long_name\")\n const zip = com.getSubaddress(address, \"postal_code\", \"long_name\")\n const street = com.getSubaddress(address, \"route\", \"short_name\")\n const county = com.getSubaddress(address, \"administrative_area_level_2\", \"long_name\")\n const longstate = com.getSubaddress(address, \"administrative_area_level_1\", \"long_name\")\n\n if (county !== \"\")\n this.props.changeMainProperty(county, \"county\")\n\n this.props.changeMainProperty(longstate, \"state\")\n this.props.changeMainProperty(city, \"city\")\n this.props.changeMainProperty(zip, \"zipcode\")\n\n const addr = [\n num,\n street,\n city,\n com.getSubaddress(address, \"administrative_area_level_1\", \"short_name\"),\n zip\n ].join(\" \").replace(\" ,\", \",\")\n\n if (num !== \"\") {\n if (forMobileHome) {\n this.props.changeMobileHomeInfo(addr, \"parkAddress\")\n return\n } else {\n this.props.changeMainPropertyAddress({ target: { value: addr } })\n }\n }\n\n let sfx = \"\"\n let short = com.getSubaddress(address, \"route\", \"short_name\")\n let shorts = short.split(' ')\n\n if (com.streetsuffixes.includes(shorts[shorts.length - 1].toUpperCase())) {\n sfx = shorts.pop()\n\n if (typeof com.streetTypeAbbreviations[sfx.toLowerCase()] !== \"undefined\")\n sfx = com.streetTypeAbbreviations[sfx.toLowerCase()].toUpperCase()\n\n short = shorts.join(' ')\n }\n\n const s = shorts[0].toUpperCase()\n if (com.prefixes.includes(s)) {\n shorts = short.split(' ')\n short = shorts.slice(1, shorts.length).join(' ')\n }\n\n this.props.changeMainPropertyAddress({ target: { value: addr } })\n }\n\n getStates = () => {\n const options = []\n const keys = Object.keys(this.state.loanLimits)\n options.push()\n keys.forEach((x) => {\n options.push()\n })\n return options\n }\n\n getCounties = () => {\n const options = []\n options.push()\n const st = this.props.property.state\n try {\n if (this.state.loanLimits[st.toUpperCase()]) {\n const keys = Object.keys(this.state.loanLimits[st.toUpperCase()])\n keys.forEach((x) => {\n options.push()\n })\n }\n } catch (error) {\n console.error(error)\n }\n\n return options\n }\n\n render() {\n const changeMainPropertyUnits = e => {\n com.touch()\n this.props.changeMainPropertyUnits(e)\n }\n const onAppraisal = e => {\n com.touch()\n this.props.changeMainPropertyAppraisal(e)\n }\n const onSalesPrice = e => {\n com.touch()\n this.props.changeMainPropertySalesPrice(e)\n }\n\n const {\n status,\n insurancemaintenancetaxes,\n occupancy,\n propertytype,\n netrentalincome,\n hascontract,\n purpose,\n isMixedUse,\n qualifiesForFHAsecondary,\n } = this.props.application.property\n\n const displayOwnedProperty = () => {\n return \n Cash deposit towards purchase \n \n \n Held by\n \n Write the name of the escrow or title company to whom you made the earnest money deposit check that was submitted along with your offer.
If not sure, write \"I don't know yet\"\n
\n }\n />\n \n If not sure, write \"I don't know yet\"\n
\n
\n \n
\n }\n\n if (!hascontract && purpose === \"purchase\") {\n return \n this.props.changeMainProperty(e, \"status\")}\n />\n\n
\n \n Property status\n
\n \n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}\n parser={(value) => value.replace(/\\$\\s?|(,*)/g, '')}\n onChange={e => this.props.changeMainProperty(e, \"insurancemaintenancetaxes\")}\n size=\"large\"\n />\n
\n\n {(occupancy === \"investment\" || propertytype === \"twotofourfamily\") && \n Monthly insurance, taxes, association dues, etc.\n
\n \n `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}\n parser={(value) => value.replace(/\\$\\s?|(,*)/g, '')}\n onChange={e => this.props.changeMainProperty(e, \"netrentalincome\")}\n size=\"large\"\n />\n
}\n \n Expected Monthly Rental Income\n
\n \n
\n \n \n \n \n Are you refinancing your primary residence?\n \n {\n com.touch()\n const out = e === \"yes\"\n this.props.updateSameProperty({ target: { checked: out } })\n if (out) {\n this.props.changeMainPropertyOccupancy({ target: { value: \"principal\" } })\n this.updateRefinanceAddressWithResidencyAddress()\n }\n }}\n value={financingsameproperty === true ? \"yes\" : \"no\"}\n type='radio'\n direction=\"horizontal\" />\n \n \n
:\n \n \n What's the address of the property you are going to refinance? \n \n \n
\n }\n\n\n {propertytype === \"twotofourfamily\" &&\n \n \n \n What is the number of units?\n \n \n Please provide number of units.\n \n \n \n
}\n\n\n {this.props.property.occupancy === \"principal\" &&\n \n \n \n Will you use any part of this property for business?\n \n {\n com.touch()\n let value = e === \"yes\"\n this.props.changeMainProperty(value, \"isMixedUse\")\n }}\n value={isMixedUse === true ? \"yes\" : \"no\"}\n type='radio'\n direction=\"horizontal\" />\n \n \n
\n }\n {\n occupancy === \"secondhome\" &&\n \n \n \n Do you intend to use the second home for work related purposes?\n \n This is only important for FHA loans that have a separate category of FHA second home.\n If you apply for FHA loan, you'll have to provide documentation that proves that your workplace\n is within 100 miles from your second home. For applying non-FHA loans, please select No.\n
\n }\n placement=\"top\"\n title=\"FHA loans only\"\n />\n \n \n Subject property\n /\n Detail\n
\n {\n (this.props.property.purpose === st.POL_Refinance || this.props.property.purpose === st.POL_Cashoutrefinance) ?\n \n \n \n What's the address of the property you are going to purchase? \n \n \n
\n
\n }\n\n {\n financingsameproperty === false && \n changeMainPropertyUnits({ target: { value: e } })}\n value={units}\n className=\"w-100\" style={{ height: 44 }}>\n \n \n \n \n \n
\n \n onAppraisal(e)} />\n
\n \n {(this.props.property.purpose === st.POL_Purchase && true === hascontract) &&\n \n onSalesPrice(e)} />\n
\n }\n \n {\n this.props.updateSelectField(com.safeParseInt(e), purpose === st.POL_Purchase ? \"downpayment\" : (purpose === st.POL_Refinance ? \"paydown\" : \"cashout\"))\n if (purpose === st.POL_Purchase) {\n this.props.updateSelectField(com.safeParseInt(salesprice) - com.safeParseInt(e), \"loansize\")\n }\n }}\n />\n
\n \n \n ) : (\n \n )\n }\n\n stepStyle = (status) => ({\n display: 'flex',\n alignItems: 'center',\n height: '32px',\n padding: '0 12px',\n borderRadius: '8px',\n fontSize: '12px',\n fontWeight: 600,\n whiteSpace: 'nowrap',\n border: status === 'completed' ? '1px solid #325CEB' : '1px solid #D9D9D9',\n background: status === 'completed' ? '#E0E7FF' : '#FFFFFF',\n color: status === 'completed' ? '#325CEB' : '#222222',\n })\n\n render() {\n const { purpose, salesprice, hascontract, appraisal } = this.props.application.property\n const { mortgageapplied } = this.props.application.product\n const { initialloanamount, refinanceloanamount } = this.props.application.hardmoneyloan\n const { downpayment, paydown, cashout, loansize } = this.props.application.selection\n const { base_rate, APR, monthly_payment, closing_cost, points } = this.props.application.selection.selectedloan\n\n const isHardMoneyLoan = mortgageapplied === st.TOM_Hardmoneyloan\n\n const priceValue = purpose === st.POL_Purchase && hascontract ? salesprice : appraisal\n const paymentValue = purpose === st.POL_Purchase ? downpayment : purpose === st.POL_Refinance ? paydown : cashout\n\n const purposeText = () => {\n if (!purpose) return 'Loan Application'\n if (purpose === 'cashoutrefinance') return 'Cashout'\n if (isHardMoneyLoan) return 'Hard Money Loan'\n return `Home ${purpose.charAt(0).toUpperCase()}${purpose.slice(1)}`\n }\n\n const formatRateAndAPR = () => {\n const isValidRate = isNumber(base_rate)\n const isValidAPR = isNumber(APR)\n\n if (!isValidRate && !isValidAPR) return '---'\n if (!isValidRate) return `---/${APR}%`\n if (!isValidAPR) return `${base_rate}%/---`\n return `${base_rate}%/${APR}%`\n }\n\n const showMainStages = () => {\n const stages = [\n { number: 1, title: 'Application', completed: false },\n { number: 2, title: 'Processing', completed: false },\n { number: 3, title: 'Closing', completed: false }\n ]\n\n const stageNum = com.CurrentStage[this.state.currentStage]\n if (stageNum === 3) return stages.map(stage => ({ ...stage, completed: true }))\n if (stageNum > 3) return stages\n return stages.map(stage => ({\n ...stage,\n completed: stage.number <= stageNum - 1\n }))\n }\n\n const lasttouch = new Date(this.props.progress.lasttouch)\n\n const SummaryItem = ({ label, value }) => (\n \n
\n )\n\n const priceLabel = () => {\n if (purpose === st.POL_Purchase && hascontract) {\n return 'Purchase price'\n }\n return 'Estimated home value'\n }\n\n const paymentLabel = () => {\n if (purpose === st.POL_Purchase) {\n return 'Down payment'\n }\n return purpose === st.POL_Refinance ? 'Principal paydown' : 'Cash out'\n }\n\n return (\n \n {label}\n
\n \n {value}\n
\n \n \n
\n\n \n
\n\n \n \n Overview\n \n
\n \n \n
\n \n \n {this.purposeImage()}\n
\n \n \n {purposeText().toUpperCase()}\n \n \n {this.state.address}\n \n \n Last updated on{' '}\n {lasttouch.toLocaleDateString()}\n \n
\n \n \n Loan tracker\n \n\n
\n \n \n Main stage\n
\n \n {showMainStages().map((step, index) => (\n \n
\n )}\n \n ))}\n \n \n {step.completed ? (\n
\n {index < showMainStages().length - 1 && (\n \n step.title === this.state.currentStage)}\n items={showMainStages().map(step => ({\n title: step.title,\n status: step.completed ? 'finish' : \n step.title === this.state.currentStage ? 'process' : \n 'wait',\n }))}\n style={{\n marginBottom: '20px'\n }}\n />\n
\n \n \n Current status\n \n \n {camelToTitleCase(this.state.currentStatus)}\n
\n \n \n \n \n\n \n \n Loan summary\n \n
\n\n {/* \n \n
\n\n \n\n \n
\n
\n \n \n Next step\n \n
\n \n \n \n Add property details\n \n
\n \n \n Let us know the address of the property you are going to purchase\n \n \n Finalize your mortgage application by entering the address of the property you wish to purchase. This step is essential for calculating your rate and moving forward.\n \n
\n \n {label} \n \n {\n const value = this.formatSSN(e.target.value)\n this.updateSSN(who, value)\n this.setState({\n [who === com.borrower ? 'borrowerSSN' : 'coborrowerSSN']: value,\n changeTips: true,\n showCheckCredit: true,\n showFico: false,\n showCheckMsg: false,\n })\n if (this.checkStatus() === 'success') {\n this.setState({ showStatusInfo: false })\n }\n }}\n value={ssn}\n placeholder=\"\"\n />\n {/* \n ![]()
this.setState({ showSSN: !this.state.showSSN })} src='/images/eye-icon.svg' />\n */}\n \n SSN must be 9 digits\n \n \n
\n )\n }\n\n contactLO = () => {\n this.setState({ showContactModal: true })\n\n const token = sessionStorage.getItem('ZeitroA')\n fetch('/borrower/contactloaboutcreditpull', {\n method: 'GET',\n headers: {\n Authorization: 'Bearer ' + token,\n Cache: 'no-cache',\n 'X-Borrower': this.props.borrowerid,\n },\n })\n .then((response) => {\n if (response.status !== 200) {\n console.warn(response)\n return\n }\n })\n .catch((err) => {\n console.error('Fetch Error :', err)\n })\n }\n\n updateEstimatedPayment = (e, who) => {\n this.props.clearBorrowerLoans([], who)\n const c = { ...this.state.estimatedLoan }\n c.monthlypayment = e\n this.setState({ estimatedLoan: c })\n this.props.copyBorrowerLoan(c, who)\n }\n\n creditCheckContinue = () => {\n this.getCreditReport()\n }\n\n checkBtnDisabled = () => {\n if (this.state.pullCredit === 'true') {\n return false\n } else if (\n this.state.pullCredit === 'false' &&\n this.props.application.scre &&\n this.props.application.scre !== 0\n ) {\n return false\n }\n return true\n }\n\n showCredit = () => {\n this.setState({ showCreditModal: true })\n }\n\n softPullIcon = () => {\n return Recommend
\n }\n\n handleLoanBalance = (e) => {\n this.props.updateApplicationAttribute(e.target.value, 'loanbalance')\n }\n\n render() {\n const getContactModal = () => {\n return (\n \n \n \n \n {\n this.setState({ scre: e })\n }}\n />\n\n {showCheckMsg && (\n \n \n \n \n {\n if (value === '') {\n return '$ '\n }\n return `$ ${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n }}\n parser={(value) => {\n if (value === '$ ') {\n return 0\n }\n return value.replace(/\\$\\s?|(,*)/g, '')\n }}\n min={0}\n max={1000000}\n precision={0}\n value={debt}\n onChange={(e) => {\n this.setState({ debt: e })\n }}\n />\n {showCheckMsg && (\n \n
\n )\n }\n\n const { who } = this.props\n const { max, step } = this.props.progress.interview\n const { borrower, coborrower } = this.props.application\n const {\n originalBorrowerSSN,\n originalCoborrowerSSN,\n automatedCreditPull,\n showContactModal,\n showStatusInfo,\n errorMessages,\n confirm,\n showCheckCredit,\n showFico,\n changeTips,\n pullCredit,\n } = this.state\n const name =\n who === com.borrower\n ? assembleFullName(\n borrower.firstname,\n borrower.middlename,\n borrower.lastname\n )\n : assembleFullName(\n coborrower.firstname,\n coborrower.middlename,\n coborrower.lastname\n )\n const originalSSN = who === com.borrower ? originalBorrowerSSN : originalCoborrowerSSN\n const suffix = who === com.borrower ? borrower.suffix : coborrower.suffix\n\n return (\n \n What is your estimated FICO score?\n
\n \n Please enter your FICO score\n
\n )}\n \n What is your estimated monthly debt payment?\n
\n \n Please enter your monthly debt payment\n
\n )}\n \n {showContactModal && getContactModal()}\n {this.checkStatus() === 'fail' && showStatusInfo && (\n
\n \n )}\n {this.enterSSN()}\n {!automatedCreditPull ? (\n displayEstimatedFicoAndDebt()\n ) : (\n \n \n Continue by entering your estimated FICO score, or Re-entering your SSN to redo the credit check\n
\n \n \n \n Potential Error Cause:\n {' '}\n
\n )}\n \n
\n \n Sorry, we were unable to pull your credit report.\n
\n this.contactLO()}>\n Contact my loan officer\n
\n \n Your SSN:{' '}\n {originalSSN}\n
\n {errorMessages.length > 0 && (\n \n {errorMessages[0]}\n
\n \n \n \n this.setState({\n confirm: e.target.checked,\n })\n }\n label=\"*I confirm the above information is correct.\"\n />\n \n )}\n {showCheckCredit && !showFico && (\n <>\n {changeTips && this.checkStatus() !== 'none' && (\n \n We noticed that you have changed your SSN, Do you want to redo Soft Credit Check, or enter your estimated FICO score ? *** This may affect the relevance of your credit record in our system\n
\n )}\n \n Please cross check that the following information is correct\n
\n \n
\n {this.checkStatus() === 'success' && showStatusInfo && (\n \n Name:\n \n {name}\n \n
\n \n Suffix:\n \n {suffix}\n \n
\n \n \n Current address:\n \n \n {com.formatAddress(who === com.borrower ? borrower : coborrower)}\n \n
\n \n ![\"congratulation\"](\"/images/congratulation2.png\")
\n
\n )}\n {max === step && this.checkStatus() === 'none' && (\n \n \n Congratulations\n
\n \n Your soft pull is successful!\n
\n \n \n \n \n {\n if (e === 'true') {\n this.setState({ scre: 0 })\n this.props.changeContinueButtonText('Check Credit')\n }\n if (e === 'false') {\n this.props.changeContinueButtonText('Next step')\n }\n this.setState({ pullCredit: e, showCheckMsg: false })\n }}\n value={pullCredit}\n type=\"radio\"\n direction=\"horizontal\"\n />\n {pullCredit === 'true' && (\n \n *By clicking check credit, I understand{' '} {com.getCompanyName()} has the permission to use your SSN do a soft pull.\n
\n )}\n \n {this.state.pullCredit === 'false' &&\n displayEstimatedFicoAndDebt()}\n \n \n )}\n {!showCheckCredit && showFico && displayEstimatedFicoAndDebt()}\n \n )}\n \n )\n }\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps, null, {\n forwardRef: true,\n})(SSN)\n","import React, { Component } from \"react\"\nimport { Card, Space, Typography } from 'antd'\nimport { PhoneOutlined, MailOutlined } from '@ant-design/icons'\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport Row from 'react-bootstrap/Row'\nimport Col from 'react-bootstrap/Col'\nimport { connect } from 'react-redux'\nimport './Closing.css'\nimport { assembleFullName } from '../Tools/String'\n\nconst { Text, Link } = Typography\n\nconst mapStateToProps = (state) => {\n return {\n application: state.application,\n }\n}\n\nclass Closing extends Component {\n constructor(props) {\n super(props)\n this.form = React.createRef()\n this.state = {\n officer: null,\n }\n }\n\n componentDidMount() {\n this.getLoanOfficerInfo()\n }\n\n getLoanOfficerInfo = async () => {\n try {\n const token = sessionStorage.getItem('ZeitroA')\n const response = await fetch('/borrower/getloanofficerinfo', {\n method: 'GET',\n headers: {\n Authorization: 'Bearer ' + token,\n },\n })\n\n if (response.status !== 200) {\n console.warn('Get loan officer info failed: ', response.status)\n return\n }\n\n const data = await response.json()\n this.setState({ officer: data.Profile })\n } catch (error) {\n console.error('Error fetching loan officer info:', error)\n }\n }\n\n render() {\n const { officer } = this.state\n const { FirstName, MiddleName, LastName, Phone, Email, CompanyName } = officer || {}\n const fullName = assembleFullName(FirstName, MiddleName, LastName)\n\n return (\n \n I would like to check my credit by\n
\n \n \n
\n\n {/* Congratulations Section */}\n \n
\n\n {/* Main Message */}\n \n
\n\n {/* Contact Section */}\n \n
\n\n {/* Contact Cards */}\n {officer && (\n
\n )\n }\n}\n\nexport default connect(mapStateToProps)(Closing)\n","import 'bootstrap/dist/css/bootstrap.min.css'\nimport React, { Component } from 'react'\nimport smartlookClient from 'smartlook-client'\n\nimport { message, Modal, Spin, FloatButton, Card, Space, Typography, Button as AntdButton } from 'antd'\nimport { CustomerServiceOutlined, CloseOutlined, PhoneOutlined, MailOutlined } from '@ant-design/icons'\nimport { Spinner } from 'react-bootstrap'\nimport Button from 'react-bootstrap/Button'\nimport Col from 'react-bootstrap/Col'\nimport Form from 'react-bootstrap/Form'\nimport Row from 'react-bootstrap/Row'\nimport { connect } from 'react-redux'\nimport { withRouter } from 'react-router-dom'\nimport { updateTaskStatus } from '../AppEvents'\nimport * as com from '../Common.js'\nimport Docs from '../Documents/Documents'\nimport NewSidebarApplication from '../newContent/page/newSideBarApplication'\nimport StepApplication from '../newContent/page/stepApplication'\nimport { getCurrentState } from '../Store'\nimport * as act from '../Store/actions'\nimport { UpdateChangeLastTouch, UpdateChangeProgress, UpdateChangeVisitedStage } from '../Store/progress'\nimport Tasks from '../Tasks'\nimport Applicant, { Residence } from './Applicant'\nimport Declarations from './Declarations'\nimport Email from './Email'\nimport EmailVerification from './EmailVerification'\n// import Expenses from './Expenses'\nimport Finances, { MoreFinances } from './Finances'\nimport Income, { OtherIncome } from './Income'\nimport Liabilities from './Liabilities'\nimport MyRates from './MyRates/MyRates'\nimport PrequalLetter from './PrequalLetter'\nimport Property from './Property'\nimport Overview from './Overview'\nimport SSN from './SSN'\n// import CreditReport from './CreditReport'\n// import Escrow from './Escrow'\nimport Closing from './Closing'\nimport { assembleFullName } from '../Tools/String'\nimport { calculateBalancesAndPayments } from '../Tools/Loan'\nimport { withStatsig } from \"../statsig/statsigMethod\"\n\nconst { Text, Link } = Typography\n\nconst LoanOfficerPanel = ({ showLoanOfficerPanel, officer, toggleLoanOfficerPanel, step, hascoborrower }) => {\n const { FirstName, MiddleName, LastName, Phone, Email, CompanyName } = officer || {}\n const fullName = assembleFullName(FirstName, MiddleName, LastName)\n const isCoBorrowerStep = step === com.stageToNumberApplication.coborrower && hascoborrower !== 'withcoborrower'\n\n return (\n <>\n {!showLoanOfficerPanel && (\n \n Closing\n
\n \n 🎉 Congratulations!
\nYour Loan is complete on our end.
\n \n\n All your loan conditions and documents have been completed. Your loan officer will contact you soon with the next steps and inform you when to expect your final closing documents at escrow.\n
\n \nContact
\n\n If you have any questions in the meantime, please don't hesitate to contact your loan officer, or escrow agent directly.\n
\n \n\n \n \n \n LOAN OFFICER\n \n\n \n \n {fullName}\n \n {CompanyName} \n \n\n \n \n {Phone} \n \n\n \n {Email} \n \n \n \n \n
\n )}\n \n this.setState({ showSubmitModal: false })}>\n Cancel\n \n \n Submit\n \n
\n ] : undefined}\n >\n {isMobile ? (\n <>\n Submit your application?
\n \n Once you submit, your loan officer will review it and reach out with next steps.\n
\n \n ) : (\n <>\n What's the next step?
\n\n Your loan officer will review your application and keep you updated on any progress or any further tasks. Once your submission is complete, feel free to:{' '}\n
\n- \n
- Check out your personalized rates by selecting \"Continue\" \n
- Fill out declarations \n
- Move ahead with uploading the required documents \n
\n Don't hesitate to reach out if you have any questions or concerns!\n
\n \n )}\n \n )\n }\n\n /*\n * Determine if we should show bottom navigation bar\n */\n shouldShowBottomNavigation = () => {\n const { step } = this.props.progress.interview\n return step >= com.stageToNumberApplication.applicant && step < com.stageToNumberApplication.overview\n }\n\n /*\n * Determine if we should show step application sidebar\n */\n shouldShowStepApplication = () => {\n const { step } = this.props.progress.interview\n const { hascoborrower } = this.props.application\n if (step === com.stageToNumberApplication.coborrower && hascoborrower !== 'withcoborrower') {\n return false\n }\n return step >= com.stageToNumberApplication.applicant && step < com.stageToNumberApplication.overview\n }\n\n toggleLoanOfficerPanel = (visible) => {\n this.setState({\n showLoanOfficerPanel: typeof visible === 'boolean' ? visible : !this.state.showLoanOfficerPanel\n })\n }\n\n\n render = () => {\n const { fromiframe, smallScreen, location } = this.props\n const { loading, showSubmitModal, validated, currentPane, showLoanOfficerPanel, officer } = this.state\n const { status, hascoborrower } = this.props.application\n const { interview, lasttouch } = this.props.progress\n\n const isChecked = sessionStorage.getItem('edit') === 'true'\n\n const onEdit = (e) => {\n sessionStorage.setItem('edit', e.target.checked)\n this.forceUpdate()\n }\n\n return (\n\n \n This concludes the application process. Your loan officer has been alerted and will be in touch shortly to guide you through the next steps.\n
\n \n \n \n \n \n
{' '}\n
\n )}\n \n \n \n {window.innerWidth >= 768 && (\n \n {this.shouldShowStepApplication() && (\n
\n )}\n\n {/* contact loan officer button */}\n \r\n
,\r\n View my application\r\n ]\r\n },\r\n {\r\n name: 'Processing',\r\n operate: []\r\n },\r\n {\r\n name: 'Underwriting',\r\n operate: []\r\n },\r\n {\r\n name: 'Approved',\r\n operate: []\r\n },\r\n {\r\n name: 'Closing',\r\n operate: []\r\n },\r\n {\r\n name: 'Funded',\r\n operate: []\r\n },\r\n ]\r\n\r\n useEffect(() => {\r\n getFormSignStatus()\r\n }, [])\r\n\r\n const getFormSignStatus = () => {\r\n let token = sessionStorage.getItem(\"ZeitroA\")\r\n fetch('/borrower/hardmoneyloan/getformsignstatus', {\r\n method: 'GET',\r\n headers: {\r\n Authorization: \"Bearer \" + token,\r\n Cache: \"no-cache\"\r\n },\r\n }).then(\r\n response => {\r\n if (response.status !== 200) {\r\n console.log('Looks like there was a problem. Status Code: ' +\r\n response.status);\r\n return;\r\n }\r\n response.json().then(js => {\r\n if (js.Status !== \"OK\"){\r\n console.log(\"Error getting formsign status: \",js.message)\r\n return\r\n }\r\n setSignStatus(js.SignStatus)\r\n })\r\n }\r\n )\r\n .catch(function (err) {\r\n console.log('Fetch Error :-S', err);\r\n });\r\n }\r\n\r\n function emailSignRequest() {\r\n setSendingSignRequest(true)\r\n let token = sessionStorage.getItem(\"ZeitroA\")\r\n fetch('/borrower/hardmoneyloan/sendpasscodeandinvitecosigner', {\r\n cache: 'no-cache',\r\n method: 'POST',\r\n body: JSON.stringify({\r\n borrowerEmail: props.application.borrower.email.toLowerCase(),\r\n coborrowerEmail: props.application.coborrower.email.toLowerCase(),\r\n borrowerFirstName: props.application.borrower.firstname,\r\n borrowerLastName: props.application.borrower.lastname,\r\n coborrowerFirstName: props.application.coborrower.firstname,\r\n coborrowerLastName: props.application.coborrower.lastname,\r\n }),\r\n headers: {\r\n Authorization: \"Bearer \" + token,\r\n Cache: \"no-cache\"\r\n },\r\n }).then(res => {\r\n if (res.status !== 200) {\r\n alert(\"Looks like there was a problem. Status Code: \" + res.status +\", please try again later or contact your loan officer for assistance.\")\r\n setSendingSignRequest(false)\r\n return;\r\n }\r\n res.json().then(js => {\r\n setPasscode(js.Code)\r\n setSendingSignRequest(false)\r\n setShowResendConfirmModal(false)\r\n setShowRequestConfirmModal(true)\r\n return\r\n })\r\n })\r\n \r\n }\r\n\r\n const renderRequestConfirmModal = () =>\r\n {signStatus===\"cosigned\"?\"Co-borrower signature received\":signStatus===\"primarysigned\"?\"Co-borrower signature requested\":\"\"}
\r\n {signStatus!==\"cosigned\" && signStatus === \"primarysigned\" ? setShowResendConfirmModal(true)}>Resend:null}\r\n \r\n setCodeConsent(e.target.checked)}>I understand that I need to share the verificatin code with my co-borrower \r\n
\r\n \r\n\r\n const calcLoanAmount = () => {\r\n let lm = \"\"\r\n if (props.property.purpose === \"purchase\") {\r\n lm = props.hardmoney.initialloanamount\r\n }\r\n if (props.property.purpose === \"purchaserehab\"){\r\n lm = props.hardmoney.initialloanamount\r\n }\r\n if (props.property.purpose === \"refinance\") {\r\n lm = props.hardmoney.refinanceloanamount\r\n }\r\n if (props.property.purpose === \"construction\") {\r\n lm = props.hardmoney.constructionloanamount\r\n }\r\n return lm\r\n }\r\n const getLoanAmount = () => {\r\n let lm = calcLoanAmount()\r\n if (lm !== \"\") {\r\n return \"$\" + com.commaize(lm)\r\n }\r\n return \"-\"\r\n }\r\n const getAsIsValue = () => {\r\n if (props.property.purpose === \"purchaserehab\" && props.property.salesprice !== \"\") {\r\n return \"$\" + com.commaize(props.property.salesprice)\r\n }\r\n if (props.property.purpose !== \"purchaserehab\") {\r\n return \"$\" + com.commaize(props.hardmoney.refinancedetails.estimatedCurrentValue)\r\n }\r\n return \"-\"\r\n }\r\n const getLTV = () => {\r\n if (props.property.purpose === \"purchaserehab\" && props.property.salesprice !== \"\") {\r\n let sp = com.safeParseInt(props.property.salesprice)\r\n let lm = com.safeParseInt(calcLoanAmount())\r\n return Math.round(100 * lm / sp) + \"%\"\r\n }\r\n if (props.property.purpose !== \"purchaserehab\") {\r\n let sp = com.safeParseInt(props.hardmoney.refinancedetails.estimatedCurrentValue)\r\n let lm = com.safeParseInt(calcLoanAmount())\r\n return Math.round(100 * lm / sp) + \"%\"\r\n }\r\n return \"-\"\r\n }\r\n\r\n let rateResult = CalcHardMoneyLoanRate(props)\r\n\r\n const sendMail = () => {\r\n setLoading(true)\r\n let id = com.getUserId()\r\n let token = com.getUserToken()\r\n\r\n fetch('/borrower/sendmail', {\r\n method: 'POST',\r\n body: JSON.stringify({ id: parseInt(id), body: \"\" + contactMessage + \"\" }),\r\n headers: {\r\n 'Content-Type': 'application/json',\r\n Authorization: \"Bearer \" + token,\r\n Cache: \"no-cache\"\r\n },\r\n }).then(\r\n response => {\r\n if (response.status !== 200) {\r\n setLoading(false)\r\n setShowContact(false)\r\n messageApi.open({\r\n type: 'error',\r\n content: 'Looks like there was a problem sending email. Please try later.',\r\n });\r\n return;\r\n }\r\n response.json().then(js => {\r\n if (js.Status !== \"OK\") {\r\n console.log(js.Error)\r\n setLoading(false)\r\n setShowContact(false)\r\n messageApi.open({\r\n type: 'error',\r\n content: 'Looks like there was a problem sending email. Please try later.',\r\n });\r\n } else {\r\n setLoading(false)\r\n setShowContact(false)\r\n messageApi.open({\r\n type: 'success',\r\n content: 'Your message has been sent.',\r\n });\r\n }\r\n\r\n });\r\n }\r\n )\r\n .catch(function (err) {\r\n setLoading(false)\r\n console.log('Fetch Error :', err);\r\n });\r\n }\r\n\r\n return (\r\n \r\n ![](\"/images/sendingEmail.png\"/)
\r\n
\r\n Co-borrower signature requested
\r\n \r\n {`We have sent a signature request email to your co-borrower, ${props.application.coborrower.firstname +\" \"+ props.application.coborrower.lastname} [${props.application.coborrower.email}].`}
\r\nPlease securely share the 4-digit verification code below with your co-borrower, so they can access the application form.
\r\n\r\n {passcode}\r\n
\r\n This code is used to ensure the security of your sensitive data. You can also find this verification code in your email.
\r\nOnce all signatures are received, the application will be submitted automatically.
\r\n\r\n {contextHolder}\r\n setShowContact(false)}\r\n footer={[\r\n ,\r\n ,\r\n ]} >\r\n
\r\n