\n )\n }\n\n const renderButtons = () => {\n if (readOnly) {\n return\n }\n\n const submitVehicle = isSubmitting ? \"Submitting...\" : submitCTAText\n\n const is_filled = ['vin', 'make', 'model', 'year', 'style', 'history', 'mileage']\n .find(a => !automobileDetailsState[a] && automobileDetailsState[a] != 0) == null\n\n return (\n \n onSubmitClick(automobileDetailsState, automobilePurchasePriceState)}\n >{submitVehicle}\n Cancel\n
\n )\n }\n\n const _onAutomobileDetailsUpdate = (automobileDetails) => {\n setAutomobileDetails(automobileDetails)\n onAutomobileDetailsUpdate(automobileDetails)\n }\n\n const _onAutomobilePurchasePriceUpdate = (automobilePurchasePrice) => {\n setAutomobilePurchasePrice(automobilePurchasePrice)\n onAutomobilePurchasePriceUpdate(automobilePurchasePrice)\n }\n\n const renderBody = () => {\n return (\n <>\n \n
\n
\n
\n
\n Automobile Details\n
\n
{errorText}
\n
\n {renderCloseIcon()}\n
\n
\n
\n
\n {renderBody()}\n \n
\n
\n
\n
\n {top}\n
\n
\n {finalMiddle()}\n
\n
\n {finalBottom()}\n
\n
\n
\n
\n {Common.dollar_format(total_downpayment || 0)} \n ({dpPercent}%)\n
)\n }\n\n const displayRequestedDownpayment = () => {\n if (!Object.keys(requestedDeal)) {\n return\n }\n\n const net_trade_in_value = requestedDeal['net-trade-in-value'] || 0;\n const cash_downpayment_amount = requestedDeal['cash-downpayment'] || 0;\n const total_downpayment = net_trade_in_value + cash_downpayment_amount;\n\n return `Submitted at ${Common.dollar_format(total_downpayment || 0)}`\n }\n\n const displayPti = () => {\n const pti = financialStats?.pti ? financialStats.pti : '--'\n let display_pti = pti\n\n if (display_pti === \"No Data\") {\n display_pti = '--'\n }\n\n return display_pti\n }\n\n const displayPtiMonthly = () => {\n if (app_status === \"PENDING_PRE_APPROVAL\") {\n return \"-- / month\"\n }\n\n const monthly_pti = (financialStats && financialStats['pti-monthly']) ? financialStats['pti-monthly'] : '--'\n\n let display_pti_monthly = `${monthly_pti} / month`\n\n if (monthly_pti === \"Insufficient Data\") {\n display_pti_monthly = monthly_pti\n } else if (display_pti_monthly === \"No Data\" || monthly_pti.includes('NaN')) {\n display_pti_monthly = ''\n }\n\n return display_pti_monthly\n }\n\n const displayLoanDuration = () => {\n if (!loanTerm['loan-duration']) {\n return \"-- months\"\n }\n\n return `${convertToMonths(loanTerm['loan-duration'])} months`\n }\n\n const displayMonthlyPayment = () => {\n if (app_status === \"PENDING_PRE_APPROVAL\") {\n return '--'\n }\n\n return `${Common.dollar_format(loanTerm['monthly-payment'] || 0)}`\n }\n\n const displayRate = () => {\n if (app_status === \"PENDING_PRE_APPROVAL\") {\n return '--'\n }\n\n return (\n {loanTerm['APR']}% \n
)\n }\n\n const displayBaseRate =() => {\n if (app_status === \"PENDING_PRE_APPROVAL\") {\n return ''\n }\n\n if (!loanTerm['loan-rate']) {\n return \"-- cust rate\"\n }\n\n return `${loanTerm['loan-rate']}% cust rate`\n }\n\n return(\n
\n \n \n \n \n \n \n
\n
\n { primary_button }\n { gps ? delete_button : '' }\n
\n )\n }\n\n const renderInitLoader = () => {\n return (\n \n
\n
\n
\n
\n \n
\n
\n Loading, Please wait...\n \n
\n
\n
\n
\n { renderHeader() }\n
\n
\n
\n onChangeEsn(event)} disabled={disable_input} />\n
\n
\n { renderButtons() }\n { renderConfirmRemoveModal() }\n {/* { renderConfirmReplaceModal() } */}\n
\n
\n { renderMessage() }\n
\n {initialLoader ? renderInitLoader() : renderGpsBody()}\n
\n )\n }\n\n const renderHeader = () => {\n return (\n \n
\n { renderBackButtons() }\n
\n
\n
\n
\n
\n
Error Replacing GPS
\n
\n
We couldn't find a device with this ESN. Try entering another ESN.\n
\n
\n
\n
Unable to connect GPS
\n
\n
GPS device is already attached to a loan. Try attaching a different GPS device.\n
\n
\n
We couldn't find a device with this ESN. Try entering another ESN.\n
\n \n Still need help? {contact_text}\n
\n ) : ''\n\n return (\n \n
\n
\n
\n
Can't Reach Device!
\n
\n
\n
\n {contact_message}\n
\n
\n
\n
Error Removing Device!
\n
\n
\n Something went wrong removing the GPS device, please try again.\n
\n
\n
\n
\n The device is now connected.\n
\n
\n
\n
\n
\n
\n \n Remove GPS\n
\n
setShowConfirmRemoveModal(false)}>\n
\n
\n Are you sure you would like to remove this device?\n
\n
\n \n \n
\n
\n //
\n //
\n // Replace GPS\n //
\n //
setShowConfirmReplaceModal(false)}>\n //
\n //
\n // Are you sure you want to replace GPS ESN {current_gps['esn']} with GPS ESN {esn}?\n //
\n //
\n // \n // \n //
\n //
\n
\n
\n
{ location.href = `/loan_applications/${props.lbid}` }} className=\"border-gray-300 px-3 py-1 cursor-pointer text-xs text-gray-370 font-normal rounded-lg border-2 transition-all hover:bg-gray-200 hover:text-gray-400\">Go to Application
\n
\n
\n
{ location.href = `/dealers/${props.dealer_id}/loans` }} className=\"border-gray-300 px-3 py-1 cursor-pointer text-xs text-gray-370 font-normal rounded-lg border-2 transition-all hover:bg-gray-200 hover:text-gray-400\">Go to App List
\n
\n
\n
\n { renderGps() }\n
\n )\n }\n return (\n \n
\n { renderGps() }\n
\n
\n $\n onChangePurchasePrice(event, 'trade_in_allowance')} onBlur={() => onBlurMoney('trade_in_allowance')}\n onKeyDown={(e) => onKeyDown(e)} />\n
\n )\n\n if (addingVin) {\n first_line = (\n \n )\n }\n\n return (\n setModalOpen(false)}>\n \n
\n
\n
\n \n Trade-In Calculator\n \n setModalOpen(false)}>\n
\n
\n
\n
\n
\n {first_line}\n
\n
\n $\n onChangePurchasePrice(event, 'trade_in_loan_balance')} onBlur={() => onBlurMoney('trade_in_loan_balance')}\n onKeyDown={(e) => onKeyDown(e)}\n />\n
\n
\n
\n $\n onChangePurchasePrice(event, 'net_trade_in_value')} onKeyDown={(e) => onKeyDown(e)} />\n
\n
\n
\n
\n \n
\n
\n
\n
setModalOpen(false) : () => setModalOpen(true)}>Trade-in value
\n
\n
\n
\n
\n $\n handleTradeInModal()} onFocus={() => handleTradeInModal()} />\n
\n
\n {renderModal()}\n
\n
\n {title}\n
\n
\n {compareTitle}\n $ \n {NumberFormatter.withComma(comVal)}\n
\n
\n
\n
\n
\n \n {props.titleText}\n \n props.toggleFunction(false)}>\n
\n
\n
\n
\n
\n \n
\n
\n Calculating Frontend Limit...\n
\n )\n }\n\n return (\n \n setFrontendLTVModal(true)} clickable={true} />\n \n {ltvData['frontend_ltv_limit'] ? `Frontend Limit: $ ${NumberFormatter.formatMoney(frontendLimit(ltvData), true)}` : \"\"}\n
\n )\n }\n\n return(\n
\n Frontend Costs\n {renderFrontendTotalError()}\n
\n
\n
\n \n }\n value={purchase_price['purchase_price']}\n onChange={(event) => onChangeValue(event, 'purchase_price', false)}\n onBlur={(e) => onBlurMoney(e, 'purchase_price')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n top={true}\n disabled={readOnly}\n />\n onChangeValue(event, 'sales_tax', false)}\n onBlur={(e) => onBlurMoney(e, 'sales_tax')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n \n }\n value={purchase_price['cash_downpayment']}\n onChange={(event) => onChangeValue(event, 'cash_downpayment', false)}\n onBlur={(e) => onBlurMoney(e, 'cash_downpayment')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n \n \n onChangeValue(event, 'rebate', false)}\n onBlur={(e) => onBlurMoney(e, 'rebate')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n onChangeValue(event, 'license_registration_fees', false)}\n onBlur={(e) => onBlurMoney(e, 'license_registration_fees')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n onChangeValue(event, 'doc_fees', false)}\n onBlur={(e) => onBlurMoney(e, 'doc_fees')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n \n } \n value={getTotalOtherChargesFrontend()}\n onChange={(e) => onChangeOtherCharges(e, false)}\n onBlur={(e) => onChangeOtherCharges(e, true)}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n \n
\n
\n
\n removeOtherCharge(index)}>\n
\n )\n if (readOnly) {\n close_view = null\n }\n return (\n \n
\n onChangeOtherCharges(event, 'description', index)}\n onBlur={() => {}} onKeyDown={(e) => onKeyDown(e, dispatches)} />\n {close_view}\n
\n
\n
\n $\n onChangeOtherCharges(event, 'amount', index)}\n onBlur={() => formatOtherCharge(index)} onKeyDown={(e) => onKeyDown(e, dispatches)} />\n
\n
\n
\n
\n Backend Costs\n {renderAddOtherCharges()}\n
\n
\n
\n \n }\n value={purchase_price['extended_warranty']}\n onChange={(event) => onChangeValue(event, 'extended_warranty')}\n onBlur={(e) => onBlurMoney(e, 'extended_warranty')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n top={true}\n disabled={readOnly}\n />\n \n }\n value={purchase_price['tire_protection']}\n onChange={(event) => onChangeValue(event, 'tire_protection')}\n onBlur={(e) => onBlurMoney(e, 'tire_protection')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n \n }\n value={purchase_price['accid_disability_insurance']}\n onChange={(event) => onChangeValue(event, 'accid_disability_insurance')}\n onBlur={(e) => onBlurMoney(e, 'accid_disability_insurance')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n \n }\n value={purchase_price['credit_life_insurance']}\n onChange={(event) => onChangeValue(event, 'credit_life_insurance')}\n onBlur={(e) => onBlurMoney(e, 'credit_life_insurance')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n \n }\n value={purchase_price['gap_insurance_dealer']}\n onChange={(event) => onChangeValue(event, 'gap_insurance_dealer')}\n onBlur={(e) => onBlurMoney(e, 'gap_insurance_dealer')}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n required={true}\n disabled={readOnly}\n />\n
\n\n {renderOtherCharges()}\n\n
\n
\n
\n
\n Lendbuzz GAP Waiver {gapText}\n
\n
\n
\n
Lendbuzz GAP Waiver\n
\n
\n setConfirmGapModalToggle(true)}>\n
\n
\n
\n
\n
\n
\n \n Are you sure you want to remove GAP Waiver?\n \n setConfirmGapModalToggle(false)}>\n
\n
\n
\n
\n
\n GAP Waiver ensures that your loan is paid off in case of a total loss, in the event that the amount you owe at the time of the total loss is higher than your car's value as determined by your insurance company.\n
\n
\n
\n \n \n
\n
\n
Lendbuzz Costs
\n
\n
\n \n \n \n \n \n {renderConfirmationModal()}\n {renderGAPWaiver()}\n \n
\n
\n
\n {renderLastUpdated()}\n
)\n}\n\nexport default DealHistory\n","import React, { useContext } from 'react';\nimport DealStructureContext from '../DealStructureContext.js.jsx';\nimport DSDollarInput from '../modules/DSDollarInput.js.jsx';\nimport DSInputBox from '../modules/DSInputBox.js';\nimport HeaderContext from '../HeaderContext.jsx';\nimport { convertToMonths } from '../DealStructureHelpers.jsx'\nimport { updateForm } from '../../../actions/DealerDealStructureActions.js.jsx'\nimport NumberFormatter from '../../../number_formatter.js';\nimport DealHistory from \"./DealHistory\"\n\nconst LoanSummary = () => {\n const { form, calculated, calculatorLoader, dispatch, readOnly, onKeyDown, currentUser } = useContext(DealStructureContext)\n const HeaderContextRef = useContext(HeaderContext)\n const loan_term = _.clone(form['loan_term'])\n const calculated_loan_term = calculated ? loan_term : {}\n const dispatches = { 'dealStructure': dispatch, 'dealHeader': HeaderContextRef.dispatch }\n\n const onChangeLoanDuration = (event) => {\n const value = event.target.value\n\n loan_term.loan_duration = value\n\n let updated_form = _.clone(form)\n updated_form.loan_term = loan_term\n updateForm(dispatches, updated_form)\n }\n\n const onChangeUpcharge = (event) => {\n const value = event.target.value\n\n loan_term.dealer_boost = value\n\n let updated_form = _.clone(form)\n updated_form.loan_term = loan_term\n updateForm(dispatches, updated_form)\n }\n\n const createDealerBoostOptions = () => {\n const allowed_dealer_boosts = form?.allowed_dealer_boosts\n const dealer_boost = loan_term?.dealer_boost\n\n if (allowed_dealer_boosts && allowed_dealer_boosts.length) {\n return allowed_dealer_boosts.map(boost => {\n return [Common.percentage_format(boost, 2), boost]\n })\n } else {\n return [[Common.percentage_format(dealer_boost, 2), dealer_boost]]\n }\n }\n\n const createLoanTermOptions = () => {\n const default_loan_durations = [\n ['36 Months', '3-year'],\n ['48 Months', '4-year'],\n ['60 Months', '5-year']\n ]\n\n const allowed_loan_durations = form?.allowed_loan_durations\n if (allowed_loan_durations.length) {\n return allowed_loan_durations.map(term => {\n return [`${convertToMonths(term)} months`, `${term}-year`]\n })\n } else {\n return default_loan_durations\n }\n }\n\n const allowedLoanDurations = () => {\n const durations = createLoanTermOptions()\n const loan_duration_exist = durations.find(d => d[1] === loan_term['loan_duration'])\n if (loan_duration_exist || !loan_term['loan_duration']) {\n return durations\n }\n\n const l_duration = loan_term['loan_duration'] || \"\"\n const year = l_duration.split('-')[0]\n if (!year) {\n return\n }\n\n const months = Number(year) * 12\n\n return [...durations, [`${months} months`, loan_term['loan_duration']]]\n }\n\n const percFormat = (number) => {\n if (!number && number != 0) {\n return false\n }\n\n number = parseFloat(number).toFixed(2)\n\n return `${number.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")}`;\n }\n\n const calculatorInputClass = () => {\n return calculatorLoader ? \"text-gray-350\" : \"\"\n }\n\n const renderInterestFields = () => {\n if (!currentUser.dealer_id) {\n return ''\n }\n\n return (<>\n \n onChangeUpcharge(event)}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n type='selectTwoCol'\n options={createDealerBoostOptions()}\n disableEmptyOption\n disabled={loan_term['dealer_boost_locked'] || readOnly}\n />\n )\n }\n\n const generateMonthlyPaymentTitle = () => {\n if (loan_term?.loan_due_date) {\n const dueDate = Common.getDate(loan_term?.loan_due_date, {format: \"fancy\"})\n return `Monthly Payment (1st payment due ${dueDate})`\n }\n return \"Monthly Payment\"\n }\n\n return(\n
Loan Summary
\n
\n
\n \n \n {renderInterestFields()}\n \n onChangeLoanDuration(event)}\n onKeyDown={(e) => onKeyDown(e, dispatches)}\n type='selectTwoCol'\n options={allowedLoanDurations()}\n disableEmptyOption\n disabled={readOnly}\n />\n
\n
\n
\n
\n \n {props.data}\n setErrorModalTrigger(true)} clickable />\n \n {props.label}\n \n
)\n}\n\nexport default HeaderBox\n","import React, { useContext, useState, useEffect } from 'react';\nimport HeaderContext from '../HeaderContext.jsx';\nimport lb_fetch from '../../../helpers/Request.js';\nimport Automobile from '../../../models/Automobile.js';\nimport ErrorIcon from '../../modules/BasicElements/ErrorIcon.js';\nimport AssetGrade from '../AssetGrade.jsx';\nimport NumberFormatter from '../../../number_formatter.js';\nimport { validateVIN } from '../DealStructureHelpers.jsx';\nimport DSInputBox from '../modules/DSInputBox.js.jsx';\nimport DSDollarInput from '../modules/DSDollarInput.js';\nimport { CompactDollarInput } from '../../modules/BasicElements/DollarInput.js.jsx';\nimport { flashInput } from '../../../Animations.js';\nimport { useIsMount } from '../../helpers/useIsMount.js.jsx';\n\nconst AutomobileModal = (props) => {\n const { dispatch, automobileDetails, automobilePurchasePrice } = useContext(HeaderContext)\n const [vinChanged, setVinChanged] = useState(false)\n const [noNadaVehicle, setNoNadaVehicle] = useState(false)\n const [nadaVehicles, setNadaVehicles] = useState(null)\n const [readOnly, setReadOnly] = useState(false)\n const [nadaModal, setNadaModal] = useState(false)\n const [vehicleLoader, setVehicleLoader] = useState(false)\n const [styles, setStyles] = useState([])\n const [models, setModels] = useState([])\n const [makes, setMakes] = useState([])\n\n const historyOptions = [['', ''], ['New', 'new'], ['Used', 'used'], ['Pre-owned', 'pre-owned']]\n const currentModelYear = (new Date).getFullYear() + 2\n const years = _.range(1990, currentModelYear)\n const vinInputRef = React.createRef()\n\n const isMount = useIsMount()\n\n useEffect(() => {\n if (!isMount && nadaVehicles) {\n updateFieldsAfterNadaPull()\n }\n }, [nadaVehicles])\n\n async function updateFieldsAfterNadaPull() {\n if (nadaVehicles && nadaVehicles.length == 1) {\n await setCarDetails(0)\n return\n }\n\n showNadaModal(true)\n setStyles(nadaVehicles.map(v => [v['style'], v['uid']]))\n }\n\n const updateAutomobileDetails = (data) => {\n const payload = {\n type: 'UPDATE_AUTOMOBILE_DETAILS',\n data: data\n }\n dispatch(payload)\n }\n\n const updateAutomobilePurchasePrice = (data) => {\n const payload = {\n type: 'UPDATE_AUTOMOBILE_PURCHASE_PRICE',\n data: data\n }\n dispatch(payload)\n }\n\n const updateAutomobile = (value, field) => {\n let extraFields = {}\n\n if (field == 'vin') {\n setVinChanged(true)\n }\n\n if (field == 'history' && value != \"new\") {\n extraFields = { 'msrp_value': 0 }\n }\n\n updateAutomobileDetails({ [field]: value, ...extraFields })\n return automobileDetails\n }\n\n const updatePurchasePrice = (field, value, format) => {\n let purchase_price = { ...automobilePurchasePrice }\n purchase_price[field] = value\n\n if (format) {\n purchase_price[field] = NumberFormatter.formatMoney(value || 0, true)\n }\n\n updateAutomobilePurchasePrice(purchase_price)\n }\n\n const onChangePurchasePrice = (e, field, format) => {\n updatePurchasePrice(field, e.target.value, format)\n }\n\n const onBlurPurchasePrice = (e, field) => {\n updatePurchasePrice(field, e.target.value, true)\n }\n\n const autofillVehicle = (e) => {\n let stripped_vin = e.target.value.replace(/\\s+/g, '')\n updateAutomobile(stripped_vin, 'vin')\n\n const validation_results = validateVIN(stripped_vin)\n\n if (vinChanged && validation_results.valid) {\n pullNadaVehicles(stripped_vin);\n setVinChanged(false);\n }\n }\n\n async function setCarDetails(i) {\n let localVehicle = nadaVehicles[i] || {};\n\n showNadaModal(false);\n\n let automobile = updateAutomobile(localVehicle.year, \"year\")\n automobile = updateAutomobile(localVehicle.make, \"make\")\n automobile = updateAutomobile(localVehicle.model, \"model\")\n automobile = updateAutomobile(localVehicle.style, \"style\")\n automobile = updateAutomobile(localVehicle.uid, \"nada_uid\")\n automobile = updateAutomobile(localVehicle.asset_grade, \"asset_grade\")\n\n const current_year = (new Date).getFullYear()\n if (localVehicle['year'] - current_year < 0) {\n updateAutomobile('used', \"history\")\n } else {\n updateAutomobile('new', \"history\")\n }\n\n flashInput('automobile_year')\n flashInput('automobile_make')\n flashInput('automobile_model')\n flashInput('automobile_style')\n flashInput('automobile_history')\n flashInput('automobile_asset_grade')\n setReadOnly(true)\n };\n\n const showNadaModal = (toggle) => {\n setNadaModal(toggle)\n return nadaModal\n }\n\n async function pullNadaVehicles(vin) {\n setVehicleLoader(true)\n\n const url = '/pull_nada_trims';\n const req_data = {\n 'loan_application': {\n 'automobile': {\n 'vin': vin\n }\n }\n };\n setNadaVehicles(null)\n\n let res = null\n try {\n res = await lb_fetch(url, { body: req_data })\n } catch (error) {\n console.log('error in VehicleInformation#pullNadaVehicles');\n console.log(error);\n return\n }\n finally {\n setVehicleLoader(false)\n }\n\n if (!res.ok) {\n return\n }\n\n const data = await res.json()\n\n if (!data || !data['data'] || !data['data'].length) {\n setNoNadaVehicle(true)\n return\n }\n\n const vehicles = data['data'].map((v) => {\n return {\n make: v['make'],\n model: v['model'],\n year: v['modelyear'],\n style: v['body'],\n uid: v['uid'],\n asset_grade: v.lendbuzz_asset_grade,\n }\n })\n\n setNoNadaVehicle(false)\n setNadaVehicles(vehicles)\n }\n\n const _changeMileage = (e) => {\n let value = e.target.value\n let number = parseInt(value.replace(/\\D/g, ''));\n\n updateAutomobile((number || value), \"mileage\")\n }\n\n const _onBlurMileage = (e) => {\n let value = e.target.value\n value = NumberFormatter.formatMoney(value || 0)\n updateAutomobile(value, \"mileage\")\n }\n\n const onClickClear = (field) => {\n if (automobileDetails[field]) {\n return\n }\n\n updateAutomobile('', field)\n }\n\n async function _changeMake(e) {\n const value = e.target.value;\n\n updateAutomobile(value, 'make')\n updateAutomobile('', 'model')\n updateAutomobile('', 'style')\n setModels([])\n setStyles([])\n\n let res = null\n const automobile = _.clone(automobileDetails) || {}\n\n try {\n res = await Automobile.models(automobile['year'], value)\n } catch (error) {\n console.log('error in ajax call in VehicleInformation#_changeMake');\n console.log(error);\n return\n }\n\n const res_models = res.Models || [];\n const newModels = res_models.map(m => m['model_name'])\n setModels(newModels)\n }\n\n async function _changeModel(e) {\n const value = e.target.value;\n updateAutomobile(value, 'model')\n\n let res = null\n const automobile = _.clone(automobileDetails) || {}\n\n try {\n res = await Automobile.styles(automobile.year, automobile.make, value)\n } catch (error) {\n console.log('error in ajax call VehicleInformation#_changeModel');\n console.log(error);\n return\n }\n\n const res_styles = res['Trims'] || []\n const newStyles = res_styles.map(s => s['model_trim'])\n setStyles(newStyles)\n }\n\n async function _changeYear(e) {\n const value = e.target.value;\n\n updateAutomobile(value, 'year')\n\n let res = null\n try {\n res = await Automobile.makes(value)\n } catch (error) {\n console.log('error in ajax call in VehicleInformation#_changeYear');\n console.log(error);\n return\n }\n\n const res_makes = res.Makes || []\n const newMakes = res_makes.map(m => m['make_display'])\n\n if (!newMakes.includes('Land Rover')) {\n newMakes.push('Land Rover')\n }\n setMakes(newMakes)\n }\n\n const onChangeWholesale = (value) => {\n const amount = NumberFormatter.parseMoney(value)\n\n updateAutomobile(amount, 'wholesale_value')\n }\n\n const onChangeMSRP = (value) => {\n const amount = NumberFormatter.parseMoney(value)\n\n updateAutomobile(amount, 'msrp_value')\n }\n\n const focusVin = () => {\n try {\n vinInputRef.current.click()\n vinInputRef.current.focus()\n } catch (error) {\n console.log('vin cant be focused');\n }\n }\n\n const renderVin = () => {\n const errors = {}\n const warnings = {}\n const automobile = _.clone(automobileDetails) || {}\n\n let pull_icon = (\n pullNadaVehicles(automobile['vin'])}>\n \n \n
\n )\n let vehicleLoader_text = \"\"\n let disabledClass = \"\"\n\n if (vehicleLoader || !automobile['vin']) {\n pull_icon = \"\"\n }\n\n if (vehicleLoader) {\n vehicleLoader_text = \"Fetching car information...\"\n }\n\n // NOTE: submitVehicleLoading is reflecting both submitVehicleLoading and readOnly states since both are disabled states for the fields\n if (props.submitVehicleLoading) {\n disabledClass = \"bg-gray-150\"\n }\n\n return (\n \n
VIN
\n
\n
\n updateAutomobile(e.target.value, 'vin')}\n onBlur={(e) => autofillVehicle(e)}\n autoComplete=\"chrome-off\"\n disabled={props.submitVehicleLoading}\n />\n
\n\n
\n \n {pull_icon}\n
\n
\n
{errors['automobile_vin']}
\n
{warnings['automobile_vin']}
\n
{vehicleLoader_text}
\n
setCarDetails(index)}>\n
\n {vehicle['year']} {vehicle['make']} {vehicle['model']}\n
\n
\n {vehicle['style']}\n
\n
\n
\n {vehicles_view}\n
\n
\n
Suggested vehicles for VIN {automobile.vin}
\n {modal_body}\n
\n
\n
![](\"/images/loading2.gif\")
\n
\n
\n
Deal Structure
\n
\n onChangePurchasePrice(e, 'purchase_price', false)}\n onBlur={(e) => onBlurPurchasePrice(e, 'purchase_price')}\n disabled={props.submitVehicleLoading}\n />\n onChangePurchasePrice(e, 'sales_tax', false)}\n onBlur={(e) => onBlurPurchasePrice(e, 'sales_tax')}\n disabled={props.submitVehicleLoading}\n />\n onChangePurchasePrice(e, 'cash_downpayment', false)}\n onBlur={(e) => onBlurPurchasePrice(e, 'cash_downpayment')}\n disabled={props.submitVehicleLoading}\n />\n onChangePurchasePrice(e, 'rebate', false)}\n onBlur={(e) => onBlurPurchasePrice(e, 'rebate')}\n disabled={props.submitVehicleLoading}\n />\n
\n
\n onChangeMSRP(e.target.value)}\n onClick={() => onClickClear('msrp_value')}\n disabled={props.submitVehicleLoading}\n />\n
)\n }\n\n let nadaNada = \"\"\n\n if ((!nadaVehicles || !nadaVehicles.length) && noNadaVehicle) {\n nadaNada = (No vehicle found for this VIN)\n }\n\n let disabledClass = \"\"\n\n if (props.submitVehicleLoading) {\n disabledClass = \"bg-gray-150\"\n }\n\n return (\n \n
Vehicle Information {nadaNada}
\n
\n
\n
focusVin()}>\n {renderVin()}\n
\n
\n
\n
\n
\n updateAutomobile(e.target.value, 'history')}\n errorKey='automobile_history'\n options={historyOptions}\n disabled={props.submitVehicleLoading}\n />\n
\n {msrpInput}\n
\n onChangeWholesale(e.target.value)}\n onClick={() => onClickClear('wholesale_value')}\n disabled={props.submitVehicleLoading}\n />\n
\n
\n
\n
\n
\n {yearInput}\n
\n
\n {makeInput}\n
\n
\n {modelInput}\n
\n
\n {renderAssetGrade()}\n
\n
\n
\n
\n {renderStyles()}\n
\n
\n onClickClear('mileage')}\n disabled={props.submitVehicleLoading}\n />\n
\n
\n
\n {renderPurchasePriceFields()}\n {renderNadaVehiclesModal()}\n
\n
\n
\n
\n
\n
\n Automobile Details\n
\n
{error}
\n
\n {closeIcon}\n
\n
\n
\n
\n {renderButtons()}\n
\n \n \n
\n )\n }\n\n const renderChange = () => {\n if (read_only) return null\n\n return (\n \n setErrorModalTrigger(true)} clickable />\n \n )\n }\n\n const renderAssetGrade = () => {\n const { asset_grade } = form || {}\n const { make, model } = form?.automobile || {}\n\n return \n }\n\n return (\n \n
\n \n {props.data}\n {renderChange()}\n \n {props.label}\n \n {renderAutomobileModal()}\n
\n
\n {renderAssetGrade()}\n
\n
\n \n AIRA™ Deal Risk\n \n
\n )\n\n return (\n \n )\n}\n\nexport default AiraBox\n","import AiraBox from \"./AiraBox\";\n\nexport default AiraBox","import React, { useContext, useEffect, useMemo } from 'react';\nimport NumberFormatter from '../../../number_formatter.js';\nimport HeaderContext from '../HeaderContext.jsx';\nimport HeaderBox from './HeaderBox.jsx';\nimport AutomobileHeaderBox from './AutomobileHeaderBox.jsx';\nimport { downpaymentPercentage } from '../DealStructureHelpers.jsx';\nimport DealStructureValidations from '../helpers/Validations.js';\nimport lb_fetch from '../../../helpers/Request.js';\nimport { useIsMount } from '../../helpers/useIsMount.js.jsx';\nimport { _ } from 'numeral';\nimport AiraBox from './AiraBox';\n\nconst DealHeader = ({ airaScore, airaTimestamp, hasTransactions, renderMinimalDealHeader = false }) => {\n const { form, total_downpayment, loader, calculated, dispatch, pti, ptiThreshold, ptiLoader, loanId, showValidations } = useContext(HeaderContext)\n\n let automobile, downpayment_percentage, vin, loan_term\n const isMount = useIsMount()\n\n useEffect(() => {\n if (isMount) {\n calculatePTIRequest()\n }\n }, []);\n\n if (form) {\n automobile = form?.['automobile']\n downpayment_percentage = downpaymentPercentage(NumberFormatter.parseMoney(form?.['purchase_price']?.['purchase_price']), NumberFormatter.parseMoney(total_downpayment))\n vin = automobile['vin']\n loan_term = form?.['loan_term']\n }\n\n const validations = useMemo(() => {\n return new DealStructureValidations(form)\n }, [form])\n\n const downpayment_errors = validations.errors('total_downpayment')\n const frontend_total_errors = validations.errors('frontend_total')\n const backend_total_errors = validations.errors('backend_total')\n const ltv_errors = validations.errors('ltv')\n\n const all_ltv_errors = () => {\n const all_ltv_errors = {\n status: true,\n message: []\n }\n\n if (!frontend_total_errors.status) {\n all_ltv_errors.status = false\n all_ltv_errors.message.push(frontend_total_errors.message)\n }\n if (!backend_total_errors.status) {\n all_ltv_errors.status = false\n all_ltv_errors.message.push(backend_total_errors.message)\n }\n if (!ltv_errors.status) {\n all_ltv_errors.status = false\n all_ltv_errors.message.push(ltv_errors.message)\n }\n\n all_ltv_errors.message = all_ltv_errors.message.map((elem, idx) => {\n return {elem}\n })\n\n return all_ltv_errors\n }\n\n const ltv = () => {\n const ltv_data = form?.pre_approval_dynamic_rules_check\n\n if (ltv_data) {\n return `${Common.percentage_format(ltv_data?.ltv, 1)}`\n } else {\n return \"No data\"\n }\n }\n\n const custName = () => {\n if (form) {\n return `${form['person']['first_name']} ${form['person']['last_name']}`\n }\n return null\n }\n\n const totalDownpaymentAndPercentage = () => {\n if (form) {\n return `${Common.dollar_format(total_downpayment, { ceil: true })} (${Common.percentage_format(downpayment_percentage, 1)})`\n }\n return null\n }\n\n const perMonth = () => {\n const monthly_payment = form?.['loan_term']?.['monthly_payment']\n\n if (loader) {\n return \"Calc...\"\n } else if (!calculated) {\n return \"---\"\n } else {\n return `${Common.dollar_format(monthly_payment, { ceil: true })}`\n }\n }\n\n const ptiDisplay = () => {\n if (ptiLoader) {\n return \"Calc...\"\n }\n\n if (typeof (pti) == 'number') {\n return `${parseFloat(pti * 100).toFixed(1)} %`\n }\n\n return '--'\n }\n\n const ptiError = () => {\n if (!pti || !ptiThreshold) {\n return { status: true }\n }\n\n const pti_thresold_percent = Common.percentage_format(parseFloat(ptiThreshold) * 100, 1)\n\n if (pti > ptiThreshold) {\n return {\n status: false,\n message: `PTI cannot exceed ${pti_thresold_percent}`\n }\n }\n }\n\n const calculatePTIRequest = async () => {\n dispatch({\n type: 'PTI_LOADER',\n status: true\n })\n const url = `/loan_applications/${form['lbid']}/deal_structure/calculate_pti`\n let res\n try {\n res = await lb_fetch(url, { method: 'POST' })\n } catch (error) {\n console.log('error in calculatePTIRequest');\n console.log(error);\n return\n }\n finally {\n dispatch({\n type: 'PTI_LOADER',\n status: false\n })\n }\n\n if (!res.ok) {\n console.log('error in response, calculatePTIRequest');\n console.log(res);\n return\n }\n\n const data = await res.json()\n\n const pti_info = data['data']['data']['stats'] || {}\n\n dispatch({\n type: 'UPDATE_PTI',\n pti: pti_info['PTI'],\n threshold: pti_info['pti-threshold']\n })\n }\n\n return (\n \n
\n
\n
\n
\n {!renderMinimalDealHeader &&\n <>\n
\n
\n
\n
\n
\n
\n \n }\n
\n
\n
\n
\n handleClick('deal_structure_back_to_app_dashboard', `/loan_applications/${props.lbid}`)} text={Back to Application} />\n {renderApplistButton()}\n
\n
\n handleClick(null, `/loan_applications/${props.lbid}/view_terms.pdf`, true)} text={ Print Offer} />\n
\n
\n
\n \n \n \n
\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n
\n
\n
Buyer Information
\n {this.renderFull()}\n
\n
\n this.onChangeSubmittedEmail(e)}\n onBlur={() => this.onBlurSubmittedEmail()}\n errorKey=\"submitted_email\"\n required={true}\n placeholder=\"Enter email address\"\n disabled={emailLoader}\n footerMessage={emailLoader ? 'Verifying Email.....' : null}\n autoFocus\n />\n\n this.onChangeSubmittedPhone(e)}\n onBlur={() => this.onBlurSubmittedPhone()}\n errorKey=\"submitted_phone\"\n required={true}\n placeholder=\"Enter phone number\"\n isNumber={true}\n />\n
\n\n
\n
this.onChangePersonField(e, 'first_name')}\n onBlur={(e) => this.onBlurPersonField('first_name', e.target.value)}\n errorKey=\"person_first_name\"\n required={true}\n placeholder=\"First Name\"\n tooltipText={tooltip_text}\n />\n\n this.onChangePersonField(e, 'middle_name')}\n onBlur={(e) =>\n this.onBlurPersonField('middle_name', e.target.value)\n }\n errorKey=\"person_middle_name\"\n placeholder=\"Middle Name\"\n />\n this.onChangePersonField(e, 'last_name')}\n onBlur={(e) => this.onBlurPersonField('last_name', e.target.value)}\n errorKey=\"person_last_name\"\n required={true}\n placeholder=\"Last Name\"\n tooltipText={tooltip_text}\n />\n this.onChangePersonField(e, 'dob')}\n onBlur={(e) => this.onBlurPersonField('dob', e.target.value)}\n errorKey=\"person_dob\"\n required={true}\n placeholder=\"MM/DD/YYYY\"\n type=\"date\"\n />\n \n \n
\n
this.onChangeSSN(e)}\n onBlur={(e) => this.onBlurPersonField('ssn', e.target.value)}\n />\n \n
this.toggleSSN(e)}\n />\n \n \n No SSN\n \n
\n \n
\n {errors['person_ssn']}\n
\n
\n {warnings['person_ssn']}\n
\n
\n this.onChangePersonField(e, 'citizenship_status')}\n onBlur={(e) =>\n this.onBlurPersonField('citizenship_status', e.target.value)\n }\n errorKey=\"person_citizenship_status\"\n type=\"select\"\n options={citizenship_status_options}\n required={true}\n data-testid=\"b2bapp-page-buyer-citizenship-status\"\n />\n {this.renderNationalityInput()}\n {this.renderVisaTypeInput()}\n
\n \n )\n }\n\n renderNationalityInput() {\n const loan_application = this.state.loanApplication || {}\n const person = loan_application['person'] || {}\n\n if (['Non-Resident', 'Resident (Green-card holder)'].includes(person['citizenship_status'])) {\n return (\n this.onChangePersonField(e, 'passport_issuing_country')}\n onBlur={(e) => this.onBlurPersonField('passport_issuing_country', e.target.value)}\n errorKey=\"person_passport_issuing_country\"\n type=\"select\"\n options={this.props.countryOptions || []}\n required={true}\n />\n )\n }\n\n return null\n }\n\n renderVisaTypeInput() {\n const loan_application = this.state.loanApplication || {}\n const person = loan_application['person'] || {}\n\n if (person['citizenship_status'] == \"Non-Resident\") {\n return (\n this.onChangePersonField(e, 'visa_type')}\n onBlur={(e) => this.onBlurPersonField('visa_type', e.target.value)}\n errorKey=\"person_visa_type\"\n type=\"select\"\n options={this.props.visaTypes || []}\n />\n )\n }\n\n return null\n }\n\n renderContinueButton() {\n if (this.state.submittedEmail && this.state.submittedEmail.length > 0) {\n return (\n \n Continue \n )\n } else {\n return (\n \n Continue without \n )\n }\n }\n}\n\nexport default BuyerInformation\n","import React, { createRef } from 'react'\nimport B2BInputBox from '../modules/B2BInputBox.js'\nimport GoogleAutocomplete from '../../modules/GoogleAutocomplete.js'\nimport { GoogleSuggestedAddress } from './index.js'\n\ninterface ErrorKeys {\n address1ErrorKey?: string\n cityErrorKey?: string\n stateErrorKey?: string\n zipErrorKey?: string\n}\n\ninterface AddressDataTestIds {\n address1TestId?: string\n cityTestId?: string\n stateTestId?: string\n zipTestId?: string\n}\n\ninterface AddressHandlers {\n onChangeAddress1: (e: React.ChangeEvent) => void\n onChangeCity: (e: React.ChangeEvent) => void\n onChangeState: (e: React.ChangeEvent) => void\n onChangeZipcode: (e: React.ChangeEvent) => void\n onBlurAddress1: (e: React.FocusEvent) => void\n onBlurCity: (e: React.FocusEvent) => void\n onBlurState: (e: React.FocusEvent) => void\n onBlurZipcode: (e: React.FocusEvent) => void\n}\n\nexport interface AddressValues {\n address_1: string\n city: string\n state: string\n zipcode: string\n}\n\ninterface GoogleAPI {\n isGoogleAPIBroken: boolean\n onSelectGoogleSuggestedAddress: (\n googleAddress: GoogleSuggestedAddress,\n index: number,\n ) => void\n handleGoogleBrokenAPI: React.Dispatch>\n}\n\ninterface AddressProps\n extends AddressValues,\n GoogleAPI,\n ErrorKeys,\n AddressDataTestIds,\n AddressHandlers {\n required: boolean\n usStates: string[]\n title: string | JSX.Element\n}\n\nconst Address = (props: AddressProps) => {\n const address1Ref = createRef()\n\n return (\n <>\n {props.title}
\n \n
\n {props.isGoogleAPIBroken ? (\n \n ) : (\n \n \n \n )}\n
\n
\n
\n
\n
\n
\n Add Previous Residential\n Address\n \n \n
\n
\n
\n
\n this.onChangePosition(event, 'company')}\n onBlur={() => DealerApplicationActions.saveForm(false)}\n errorKey=\"position_0_company\"\n placeholder=\"Enter Company Name\"\n />\n
\n
\n this.onChangePosition(event, 'employment_status')}\n onBlur={() => DealerApplicationActions.saveForm(false)}\n errorKey=\"position_0_employment_status\"\n type=\"select\"\n options={this.state.employmentStatusOptions}\n />\n
\n
\n
\n
\n this.onChangePosition(event, 'title')}\n onBlur={() => DealerApplicationActions.saveForm(false)}\n errorKey=\"position_0_title\"\n />\n
\n
\n this.onChangePosition(event, 'start_date')}\n onBlur={() => DealerApplicationActions.saveForm(false)}\n errorKey=\"position_0_start_date\"\n type=\"date\"\n />\n
\n
\n\n
\n this.onChangeFinancial(event, 'income_type_1')}\n onBlur={this.onBlurPOI.bind(this)}\n errorKey=\"financial_income_type_1\"\n type=\"select\"\n options={this.incomeOptions}\n required={true}\n />\n
\n\n
\n this.onChangeIncome(event, 'weekly', '1')}\n onBlur={(e) => this.onBlurIncome(e, 'weekly', '1')}\n onClick={() => this.onClickIncome('weekly', '1')}\n required={true}\n inputSide=\"left\"\n />\n this.onChangeIncome(event, 'monthly', '1')}\n onClick={() => this.onClickIncome('monthly', '1')}\n onBlur={(e) => this.onBlurIncome(e, 'monthly', '1')}\n required={true}\n left={true}\n inputSide=\"left\"\n />\n this.onChangeIncome(event, 'annual', '1')}\n onClick={() => this.onClickIncome('annual', '1')}\n onBlur={(e) => this.onBlurIncome(e, 'annual', '1')}\n required={true}\n left={true}\n inputSide=\"left\"\n error={errors.financial_income_1}\n />\n
\n\n {this.renderSecondIncome()}\n
\n
\n
\n this.onChangeFinancial(event, 'income_type_2')}\n onBlur={() => DealerApplicationActions.saveForm(false)}\n errorKey=\"financial_income_type_2\"\n type=\"select\"\n options={this.incomeOptions}\n />\n
\n\n
\n
\n
Weekly Income
\n
$\n
this.onChangeIncome(event, 'weekly', '2')}\n onBlur={() => DealerApplicationActions.saveForm(false)} />\n
\n
\n
Monthly Income
\n
$\n
this.onChangeIncome(event, 'monthly', '2')}\n onBlur={() => DealerApplicationActions.saveForm(false)} />\n
\n
\n
Annual Income
\n
$\n
this.onChangeIncome(event, 'annual', '2')}\n onBlur={() => DealerApplicationActions.saveForm(false)} />\n
\n
\n
{item.name}
;\n }\n\n _renderUniversityMenu(items, value, style) {\n return ;\n }\n\n render() {\n let loan_application = this.state.loanApplication || {}\n let educations = loan_application.educations || []\n let education = educations[0] || {}\n\n\n const degree_status_options = University.degreeStatuses.map(status => {\n const label = status.split('_').map(s => _.capitalize(s)).join(' ');\n return [label, status]\n });\n\n const fields_required = DealerApplicationStore.anyEducationPresent()\n\n return (\n \n
\n
Education
\n
Only required for students\n
\n
\n
\n
\n \n
\n
\n this.onChangeEducation(event, 'email')}\n onBlur={(event) => this.onBlurEducation(event, 'email')}\n errorKey=\"educations_0_email\"\n required={fields_required}\n />\n
\n
\n
\n
\n this.onChangeEducation(event, 'degree')}\n onBlur={(event) => this.onBlurEducation(event, 'degree')}\n errorKey=\"educations_0_degree\"\n type=\"select\"\n options={University.HIGHEST_EDUCATION_OPTIONS}\n required={fields_required}\n />\n
\n
\n this.onChangeEducation(event, 'status')}\n onBlur={(event) => this.onBlurEducation(event, 'status')}\n errorKey=\"educations_0_status\"\n type=\"select\"\n options={degree_status_options}\n required={fields_required}\n />\n
\n
\n
\n
\n this.onChangeEducation(event, 'start_date')}\n onBlur={(event) => this.onBlurEducation(event, 'start_date')}\n errorKey=\"educations_0_start_date\"\n type=\"date\"\n required={fields_required}\n />\n
\n
\n this.onChangeEducation(event, 'end_date')}\n onBlur={(event) => this.onBlurEducation(event, 'end_date')}\n errorKey=\"educations_0_end_date\"\n type=\"date\"\n required={fields_required}\n />\n
\n
\n
\n
\n this.onChangeMSRP(e.target.value)}\n onBlur={(e) => this.onBlurCarField(e.target.value, 'msrp_value')}\n onClick={() => this.onClickClear('msrp_value')}\n inputSide=\"left\"\n />\n
\n )\n }\n\n return (\n \n
Vehicle Information
\n
\n
\n \n {this.renderVin()}\n
\n \n \n this.updateAutomobile(e.target.value, 'history')\n }\n onBlur={(e) => this.onBlurCarField(e.target.value, 'history')}\n options={this.historyOptions}\n errorKey=\"automobile_history\"\n />\n
\n {msrp_input}\n this.onChangeWholesale(e.target.value)}\n onBlur={(e) =>\n this.onBlurCarField(e.target.value, 'wholesale_value')\n }\n onClick={() => this.onClickClear('wholesale_value')}\n />\n \n
\n
{yearInput}
\n
{makeInput}
\n
{modelInput}
\n
{this.renderAssetGrade()}
\n
{this.renderStyles()}
\n
\n this.onClickClear('mileage')}\n errorKey=\"automobile_mileage\"\n />\n
\n
\n
\n
\n this.updateAutomobile(e.target.value, 'vin')}\n onBlur={this.autofillVehicle.bind(this)}\n autoComplete=\"chrome-off\"\n />\n
\n\n
\n \n {pull_icon}\n
\n
\n {errors['automobile_vin']}\n
\n \n {warnings['automobile_vin']}\n
\n \n {vehicleLoader_text}\n
\n \n )\n }\n\n renderStyles() {\n let style = this.state.loanApplication.automobile.style\n return (\n this.onBlurCarField(e.target.value, 'style')}\n errorKey=\"automobile_style\"\n />\n )\n }\n\n renderCarField(args) {\n // args should be an object with keys name, value, list, data, onChange, readOnly\n return (\n this.onBlurCarField(e.target.value, args.name)}\n required=\"required\"\n errorKey={`automobile_${args.name}`}\n type=\"datalist\"\n />\n )\n }\n\n renderNadaVehiclesModal() {\n const nadaModal = this.state.nadaModal\n const vehicleLoader = this.state.vehicleLoader\n const nadaVehicles = this.state.nadaVehicles || []\n\n if (!nadaModal || !nadaVehicles.length) {\n // Don't need the modal unless there's more than one option for trim\n return ''\n }\n\n const vehicles_view = nadaVehicles.map((vehicle, index) => {\n return (\n this.setCarDetails(index)}\n >\n \n {vehicle['year']} {vehicle['make']} {vehicle['model']}\n
\n {vehicle['style']}
\n \n )\n })\n\n var vehicles_body = (\n \n
\n
Choose a vehicle
\n
this.showNadaModal(false)}\n >\n \n\n
\n {vehicles_view}\n \n
\n
this.tradeModal(true)}>Trade-in value
\n
\n
\n
\n $\n this.tradeModal(true)} onFocus={() => this.tradeModal(true)} />\n
\n {this.renderModal()}\n
\n
\n {t_title_view}\n
\n
\n
\n $\n this.onClickPurchasePrice('trade_in_allowance')}\n onChange={(event) => this.onChangePurchasePrice(event, 'trade_in_allowance')} onBlur={() => this.calculateNetTrade()} />\n
\n
\n
\n
\n
\n
\n \n Trade-In Calculator\n \n
\n
\n
\n
\n
\n
\n {first_line}\n
\n
this.onChangePurchasePrice(event, 'trade_in_loan_balance')}\n onBlur={() => this.calculateNetTrade()}\n onClick={() => this.onClickPurchasePrice('trade_in_loan_balance')}\n />\n \n \n
\n
\n \n
\n
\n
\n
\n {this.renderFrontendCharges()}\n
\n {this.renderLoanTerm()}\n
\n
\n {this.renderBackendCharges()}\n
\n
\n {this.renderCreditPrograms()}\n
\n {this.renderInfo()}\n
\n
Deal Information - Front End
\n
\n
\n this.onChangePurchasePrice(event, 'purchase_price')}\n onBlur={() => this.onBlurMoney('purchase_price')}\n onClick={() => this.onClickMoney('purchase_price')}\n required={true}\n errorKey={'purchase_price_purchase_price'}\n top={true}\n />\n this.onChangePurchasePrice(event, 'sales_tax')}\n onBlur={() => this.onBlurMoney('sales_tax')}\n onClick={() => this.onClickMoney('sales_tax')}\n required={true}\n errorKey={'purchase_price_sales_tax'}\n />\n this.onChangePurchasePrice(event, 'license_registration_fees')}\n onBlur={() => this.onBlurMoney('license_registration_fees')}\n onClick={() => this.onClickMoney('license_registration_fees')}\n required={true}\n errorKey={'purchase_price_license_registration_fees'}\n />\n this.onChangePurchasePrice(event, 'doc_fees')}\n onBlur={() => this.onBlurMoney('doc_fees')}\n onClick={() => this.onClickMoney('doc_fees')}\n required={true}\n errorKey={'purchase_price_doc_fees'}\n />\n\n this.onChangePurchasePrice(event, 'cash_downpayment')}\n onBlur={() => this.onBlurMoney('cash_downpayment')}\n onClick={() => this.onClickMoney('cash_downpayment')}\n required={true}\n errorKey={'purchase_price_cash_downpayment'}\n left={true}\n />\n \n \n this.onChangePurchasePrice(event, 'rebate')}\n onBlur={() => this.onBlurMoney('rebate')}\n onClick={() => this.onClickMoney('rebate')}\n required={true}\n errorKey={'purchase_price_rebate'}\n />\n this.onChangePurchasePrice(event, 'total_charges_frontend')}\n onBlur={() => this.onBlurMoney('total_charges_frontend')}\n onClick={() => this.onClickMoney('total_charges_frontend')}\n required={true}\n errorKey={'purchase_price_total_charges_frontend'}\n />\n \n
\n
\n
\n
\n
Deal Information - Back End
\n
\n
\n this.onChangePurchasePrice(event, 'extended_warranty')}\n onBlur={() => this.onBlurMoney('extended_warranty')}\n onClick={() => this.onClickMoney('extended_warranty')}\n required={true}\n errorKey={'purchase_price_extended_warranty'}\n top={true}\n />\n this.onChangePurchasePrice(event, 'gap_insurance_dealer')}\n onBlur={() => this.onBlurMoney('gap_insurance_dealer')}\n onClick={() => this.onClickMoney('gap_insurance_dealer')}\n required={true}\n errorKey={'purchase_price_gap_insurance_dealer'}\n />\n this.onChangePurchasePrice(event, 'tire_protection')}\n onBlur={() => this.onBlurMoney('tire_protection')}\n onClick={() => this.onClickMoney('tire_protection')}\n required={true}\n errorKey={'purchase_price_tire_protection'}\n />\n this.onChangePurchasePrice(event, 'accid_disability_insurance')}\n onBlur={() => this.onBlurMoney('accid_disability_insurance')}\n onClick={() => this.onClickMoney('accid_disability_insurance')}\n required={true}\n errorKey={'purchase_price_accid_disability_insurance'}\n />\n this.onChangePurchasePrice(event, 'credit_life_insurance')}\n onBlur={() => this.onBlurMoney('credit_life_insurance')}\n onClick={() => this.onClickMoney('credit_life_insurance')}\n required={true}\n errorKey={'purchase_price_credit_life_insurance'}\n />\n\n
\n\n {this.renderOtherCharges()}\n\n
\n
\n
\n this.onBlurLoanTerm('loan_duration')}\n onChange={(event) => this.onChangeTerm(event, 'loan_duration')}\n required={true}\n type=\"select\"\n options={term_options}\n errorKey=\"loan_term_loan_duration\"\n />\n
\n )\n }\n\n renderCreditPrograms() {\n const credit_programs = [\n {\n title: 'Standard',\n description: 'For most applicants. Automated and optimized credit using applicant info, income.',\n key: 'standard'\n },\n {\n title: 'Equity Deal Program',\n description: 'For applicants without income history but good downpayment capacity.',\n key: 'equity_deal'\n },\n {\n title: 'New Arrival Program',\n description: 'For applicants entering the US within the last three months. I-94 verification required.',\n key: 'new_arrival'\n }\n ]\n\n const credit_programs_view = credit_programs.map((c, index) => {\n return this.renderCreditProgramBox(c, index)\n })\n\n return (\n \n
\n Application Information\n Apply for a specific credit program\n
\n
\n {credit_programs_view}\n
\n
this.onChangeProgram(key)} key={index}>\n
{title}
\n
{description}
\n
\n
\n
\n Estimated Monthly Payments (10% APR)\n
\n
\n $ {this.monthlyPayment() || ' --'}\n
\n
\n
\n
\n Net Financed (Amount)\n
\n
\n $ {NumberFormatter.formatMoney(this.netFinancedAmount(), true)}\n
\n
\n
\n
\n
this.onChangeOtherCharge(event, index, 'description')}\n onBlur={() => this.saveForm()} />\n
\n this.removeCharge(index)}>\n
\n
\n
\n
\n
$\n
this.onChangeOtherCharge(event, index, 'amount')}\n onClick={() => this.onClickOtherChargeAmount(index)}\n onBlur={() => this.formatOtherCharge(index)} />\n
\n \n
\n
\n
{this.state.errors['purchase_price_other_charge_' + index]}
\n
{this.state.warnings['purchase_price_other_charge_' + index]}
\n
\n
\n
\n
\n {this.renderFull()}\n {this.renderLoader()}\n {this.renderValidatingModal()}\n
\n
\n
\n \n
\n
\n \n
\n
\n
Credit Inquiry Consent
\n
\n This will not affect your client’s credit score. By submitting this\n application you certify that your client has instructed you to click\n the I Agree button below. Your client understands that by allowing\n you to click on the I Agree button immediately following this notice\n they are providing written consent to Lendbuzz under the Fair Credit\n Reporting Act to obtain information from their credit profile or\n other information from Experian. Your client authorizes Lendbuzz to\n obain such information solely to prequalify them for credit optoins.\n
\n
\n
this.toggleConsent('credit_inquiry_consent')}\n />\n \n this.toggleConsent('credit_inquiry_consent')}\n >\n I agree to the Credit Inquiry Consent.\n \n
\n \n
\n
\n
this.toggleConsent('terms_consent')}\n />\n \n this.toggleConsent('terms_consent')}\n >\n Client agrees to the above documents.\n \n
\n \n
\n
{submit_button}
\n
\n
\n
\n
\n
\n \n
\n
Submitting...\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
Verifying Application...\n
\n
\n
\n
\n
\n
\n
\n
You're all set!
\n
We will review your application as soon as possible.
\n Feel free to
contact us with any questions.
\n
\n
\n
\n {step_view}\n
\n );\n }\n\n renderLoader() {\n return (\n \n \n
\n Loading, Please Wait...\n \n \n )\n }\n}\n\n\nexport default DealerSignup;\n","import React from 'react'\n\nclass CareerCard extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n let jobCards = this.props.jobs.map(\n (job, i) =>\n \n \n \n
\n
\n - {job.categories.location}
\n - {job.categories.team}
\n - {job.categories.commitment}
\n
\n
\n
{this.props.team}
\n
\n
\n Open roles\n \n \n
\n \n {this.state.loader ? : listings}\n
\n \n )\n }\n}\n\nexport default Career;","export let CarouselData =[\n {\n photo: 'careers__quote--maria.jpg',\n text: \"Not only do I get to help amazing customers every day, but I've grown and learned so much since I started working here. Joining Lendbuzz has helped me take my career to the next level, all while helping people from all over the world.\",\n team: 'Collections',\n employee: 'Maria'\n },\n {\n photo: 'careers__quote--alex.jpg',\n text: \"It's exciting to be part of such an ambitious, fast-growing company. The people here are fun, dedicated, and passionate about building a long-lasting, impactful company.\",\n team: 'Strategy',\n employee: 'Alex'\n },\n {\n photo: 'careers__quote--pranjal.jpg',\n text: 'If I can describe Lendbuzz, it is a blend of awesome smart people, great culture and diversity. Everyone is ready to help, are very humble and reachable. I really love to work here and there is always something new to learn everyday. Autonomy and transparency is core to Lendbuzz.',\n team: 'Engineering',\n employee: 'Pranjal'\n },\n {\n photo: 'careers__quote--noelle.jpg',\n text: 'I am proud to work for such a diverse company that is devoted to financial opportunity for everyone. Joining the workforce during a pandemic was intimidating, but my colleagues at Lendbuzz made me feel so welcomed. Everyone is always willing to lend a hand.',\n team: 'Operations',\n employee: 'Noelle'\n },\n {\n photo: 'careers__quote--anthony.jpg',\n text: 'I joined Lendbuzz because I wanted to join a company that was providing a cutting edge solution to a real problem. I hear from finance managers and dealership owners every day that tell me their business is growing thanks to us.',\n team: 'Dealership Rep',\n employee: 'Anthony'\n },\n {\n photo: 'careers__quote--wai-kin.jpg',\n text: 'I joined Lendbuzz because I am obsessed with the technology that we develop and the idea to revolutionize the auto loan finance industry. As an immigrant myself, I have been through the same struggles and challenges when applying for a loan. And I love that Lendbuzz offers a solution for the people with the same background and sets them up for success in the future.',\n team: 'Sales',\n employee: 'Wai Kin'\n },\n {\n photo: 'careers__quote--gaurang.jpg',\n text: 'I joined Lendbuzz because it is a perfect blend of a fast growing company and the warmth of a family. The support I got from my colleagues and teammates made me more eager to achieve my goals. The best part is that every opinion matters and the managers and the teammates have helped me not only evolve but also significantly improve my skills, leading towards a steady increase in personal growth.',\n team: 'Machine Learning',\n employee: 'Gaurang'\n },\n]\n","import React from 'react'\nimport {CarouselData} from '../data/CarouselData'\nimport Loader from './Loader.js'\nimport PictureTag from './PictureTag.js';\nclass Carousel extends React.Component {\n constructor(props){\n super(props);\n this.state = {\n currentindex: 0,\n visible: \"none\",\n loader: true\n };\n this.goToPrevious = this.goToPrevious.bind(this)\n this.goToNext = this.goToNext.bind(this)\n }\n\n goToPrevious() {\n let current = this.state.currentindex\n let sizeOfArray= CarouselData.length - 1\n let previous = null\n current == 0 ? (previous = sizeOfArray) : (previous = current - 1)\n this.setState({\n currentindex: previous,\n visible: 'none',\n loader: true\n })\n }\n\n goToNext() {\n let current = this.state.currentindex\n let sizeOfArray= CarouselData.length - 1\n let next = null\n current == sizeOfArray ? (next = 0) : (next = current + 1)\n this.setState({\n currentindex: next,\n visible: 'none',\n loader: true\n })\n }\n\n whileLoad(){\n this.setState({\n visible: \"block\",\n loader: false\n })\n }\n\n render() {\n return (\n\n \n
\n \n
\n\n
\n
\n
this.goToPrevious()}>\n
\n
\n
\n
this.whileLoad()} />\n \n
this.goToNext()}>\n
\n
\n
\n\n
\n
“
\n
\n
\n {CarouselData[this.state.currentindex].text}\n
\n
\n
{CarouselData[this.state.currentindex].employee}
\n
{CarouselData[this.state.currentindex].team}
\n
\n
\n
\n
\n
\n
{month}
\n
{Common.dollar_format(balance) || \"--\"}
\n
\n
\n {loader ? renderBalanceLoader() : renderBalance()}\n
\n
\n {loader ? renderLoader() : renderSummary()}\n
\n
\n {search()}\n \n {renderFilter()}\n \n
\n )\n }\n\n const search = () => {\n return (\n \n
setSearchKeyword(e.target.value)} onKeyDown={(e) => onKeyDown(e)} placeholder=\"Enter Loan ID...\" />\n
\n
\n Filter: {text}\n \n
\n )\n }\n\n const renderLoader = (num=10) => {\n let rows = []\n for (var i = 0; i < num; i++) {\n rows.push(renderLoaderRow(i))\n }\n\n return rows\n }\n\n const renderLoaderRow = (index) => {\n return (\n \n | \n \n | \n \n \n | \n \n \n | \n \n \n | \n \n \n | \n
\n )\n }\n\n const renderTableRow = (transaction) => {\n const color_scheme = {\n 'PAID': 'bg-green-400 text-white',\n 'CANCELLED': 'bg-gray-200 text-gray-350',\n 'WITHDRAWN': 'bg-red-100 text-warning'\n }\n\n const status = transaction['status']\n const badge_color = color_scheme[status] || 'border-2 border-dark'\n\n return (\n \n | \n {status}\n | \n {Common.dollar_format(transaction['amount'])} | \n {transaction['loan_id']} | \n {transaction['description'] || \"--\"} | \n {transaction['notes'] || \"--\"} | \n
\n )\n }\n\n const renderTableRows = () => {\n let transaction_rows = transactions.map((transaction) => {\n return renderTableRow(transaction)\n })\n\n return transaction_rows\n }\n\n const footer = () => {\n if (!loader && !totalTransactions) {\n return null\n }\n return (\n setPage(page + 1)} previousPage={() => setPage(page - 1)} type=\"Transactions\" />\n )\n }\n\n const renderNotFound = () => {\n if (!loader && !totalTransactions) {\n return (\n \n No transactions found\n
\n )\n }\n }\n\n const header_list = ['Status', 'Amount', 'Loan ID', 'Description', 'Notes']\n\n return (\n \n
\n \n
\n
\n {mainHeader()}\n
\n \n {loader ? renderLoader() : renderTableRows()}\n \n \n {renderNotFound()}\n
\n {footer()}\n
\n
\n
{title} cannot be empty
\n }\n\n if (error) {\n return {error}
\n }\n\n return null\n }, [value, required, error, title])\n\n const renderHelperMessage = useMemo(() => {\n if (!helperMessage) return null\n\n return {helperMessage}
\n }, [helperMessage])\n\n if (type === 'checkbox') {\n return (\n \n onChange(e)} />\n \n \n {renderErrorView}\n
\n \n )\n }\n\n if (field === 'phone') {\n return (\n \n onChange(e.target.value || \"\")} onBlur={(e) => onBlur(e.target.value || \"\")} />\n \n {renderErrorView || renderHelperMessage}\n \n )\n }\n\n return (\n \n onChange(e.target.value || \"\")} onBlur={(e) => onBlur(e.target.value || \"\")} disabled={disabled} />\n \n {renderErrorView || renderHelperMessage}\n \n )\n}\n\nexport default FormField\n","import React, { useState, useMemo, useCallback, useEffect } from 'react';\nimport LBModal from '../modules/LBModal.js.jsx';\nimport lb_fetch from '../../helpers/Request.js';\nimport DealerHelper from '../../helpers/DealerHelper.js';\nimport FormField from './FormField.jsx';\n\nconst DealerUser = ({\n reload,\n onClickAway: propsOnClickAway,\n visible,\n type = 'create',\n user = null,\n}) => {\n const [firstname, setFirstname] = useState(null)\n const [lastname, setLastname] = useState(null)\n const [email, setEmail] = useState(null)\n const [phone, setPhone] = useState(null)\n const [userRoles, setUserRoles] = useState([])\n const [emailError, setEmailError] = useState(null)\n const [phoneError, setPhoneError] = useState(null)\n const [error, setError] = useState(null)\n const [loading, setLoading] = useState(false)\n\n // only the roles that are used\n const allRoles = Object.freeze({\n \"Owner\": 1,\n \"Manage Users\": 2,\n \"GPS Technician\": 5\n })\n\n const isOwner = (user?.roles || []).includes(allRoles.Owner)\n const isGpsTech = (user?.roles || []).includes(allRoles['GPS Technician'])\n\n const formatPhone = (phoneInput) => {\n if (!phoneInput) return\n\n // unformat phone input\n phoneInput = Common.unformat_phone_number(phoneInput.trim())\n\n // complete phone number -> return\n if (phoneInput.length === 10) {\n return Common.format_phone_number(phoneInput)\n }\n\n return phoneInput\n }\n\n const handleSetUserRoles = useCallback((event) => {\n const { value, checked } = event.target\n\n if (checked) {\n setUserRoles([parseInt(value)])\n return\n }\n\n setUserRoles([])\n }, [])\n\n useEffect(() => {\n if (!user || type === 'create') {\n return\n }\n\n const {\n firstname,\n lastname,\n email,\n phone,\n roles = [],\n } = user\n\n setFirstname(firstname)\n setLastname(lastname)\n setEmail(email)\n setPhone(formatPhone(phone))\n setUserRoles(roles)\n }, [user, type])\n\n const disabled = useCallback(() => {\n if (loading) {\n return true\n }\n\n let non_empty_fields = [firstname, lastname, email]\n for (let value of non_empty_fields) {\n if (!value) {\n return true\n }\n }\n\n let email_errors = validateEmail()\n if (email_errors && email_errors['error']) {\n return true\n }\n\n let phone_errors = validatePhone()\n if (phone_errors && phone_errors['error']) {\n return true\n }\n\n return false\n }, [email, firstname, lastname, loading, phone, validateEmail, validatePhone])\n\n const onChangeEmail = (value) => {\n setEmailError(null)\n setEmail(value)\n }\n\n const onBlurEmail = (value) => {\n setEmailError(null)\n setEmail(value)\n let email_errors = validateEmail()\n setEmailError(email_errors?.text)\n }\n\n const onChangePhone = (value) => {\n setPhoneError(null)\n setPhone(formatPhone(value))\n }\n\n const onBlurPhoneChange = (value) => {\n setPhoneError(null)\n setPhone(formatPhone(value))\n let phone_errors = validatePhone()\n setPhoneError(phone_errors['text'])\n }\n\n const validateEmail = useCallback(() => {\n const response = {\n 'error': false,\n 'text': null\n }\n\n if (!email) {\n return response\n }\n\n const pattern = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|\"(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21\\x23-\\x5b\\x5d-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x21-\\x5a\\x53-\\x7f]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0e-\\x7f])+)\\])$/\n const result = pattern.test(email) // false if pattern invalid\n if (!result) {\n response['text'] = \"Email is invalid\"\n response['error'] = true\n }\n return response\n }, [email])\n\n const validatePhone = useCallback(() => {\n const response = {\n 'error': false,\n 'text': null\n }\n\n if (!phone) {\n return response\n }\n\n const _phone = Common.unformat_phone_number(phone)\n\n const pattern = /^[0-9\\b]+$/;\n const result = pattern.test(_phone); // false if pattern invalid\n if (!result) {\n response['text'] = \"Phone should contains only digits\"\n response['error'] = true\n }\n else if (result && _phone && _phone.length != 10) {\n response['text'] = \"Phone should be 10 digits\"\n response['error'] = true\n }\n return response\n }, [phone])\n\n const createUser = useCallback(async () => {\n setEmailError(null)\n setError(null)\n\n if (disabled()) {\n return\n }\n\n setLoading(true)\n\n const url = `/dealers/create_dealer_user`\n\n const _phone = Common.unformat_phone_number(phone)\n\n const sendData = {\n firstname,\n lastname,\n email,\n phone: _phone,\n roles: userRoles\n }\n\n let res = null\n\n try {\n res = await lb_fetch(url, { method: 'post', body: sendData })\n } catch (error) {\n setError('Something went wrong, Contact Us')\n setLoading(false)\n console.log('error in DealerUser#createDealerUser');\n console.log(error);\n return\n }\n\n if (!res.ok) {\n setLoading(false)\n console.log(\"error in res of DealerUser#createDealerUser\")\n console.log(res)\n return\n }\n\n let data = await res.json()\n data = data['data'] || {}\n let lb_errors = data['errors'] || []\n let invalid_email_string = 'invalid. Please provide a correct email'\n let email_exist_string = 'email Value is not unique within data'\n const epdErrorString = 'Email/Phone'\n let email_error = null\n let reg_error = null\n\n lb_errors.forEach((error_string) => {\n if (error_string.includes(invalid_email_string)) {\n email_error = 'invalid email'\n return\n } else if (error_string.includes(email_exist_string)) {\n email_error = 'User already exist'\n return\n } else if (error_string.includes(epdErrorString)) {\n reg_error = error_string\n return\n } else if (error_string) {\n reg_error = 'Something went wrong, Contact Us'\n return\n }\n })\n\n setLoading(false)\n if (email_error) {\n setEmailError(email_error)\n return\n }\n else if (reg_error) {\n setError(reg_error)\n return\n }\n\n onClickAway()\n reload()\n }, [\n firstname,\n lastname,\n email,\n phone,\n userRoles,\n disabled,\n onClickAway,\n reload\n ])\n\n const updateUser = useCallback(async () => {\n setEmailError(null)\n setError(null)\n\n if (disabled()) {\n return\n }\n\n setLoading(true)\n\n let url = `/dealers/update_dealer_user`\n\n const _phone = Common.unformat_phone_number(phone)\n\n const sendData = {\n firstname,\n lastname,\n email,\n phone: _phone,\n roles: userRoles,\n user: user?.id\n }\n\n let res = null\n\n try {\n res = await lb_fetch(url, { method: 'post', body: sendData })\n } catch (error) {\n setError('Something went wrong, Contact Us')\n console.log('error in EditDealerUser#EditDealerUser');\n setLoading(false)\n console.log(error);\n return\n }\n\n if (!res.ok) {\n setLoading(false)\n console.log(\"error in res of EditDealerUser#EditDealerUser\")\n console.log(res)\n return\n }\n\n let data = await res.json()\n data = data['data'] || {}\n let lb_errors = data['errors'] || []\n let reg_error = null\n\n setLoading(false)\n lb_errors.forEach((error_string) => {\n if (error_string.includes('Email/Phone')) {\n reg_error = error_string\n } else if (error_string) {\n reg_error = 'Something went wrong, Contact Us'\n }\n })\n\n if (reg_error) {\n setError(reg_error)\n return\n }\n\n onClickAway()\n reload(user?.id)\n }, [\n disabled,\n email,\n firstname,\n lastname,\n onClickAway,\n phone,\n reload,\n user?.id,\n userRoles\n ])\n\n const onClickAway = useCallback(() => {\n setFirstname(null)\n setLastname(null)\n setEmail(null)\n setPhone(null)\n setUserRoles([])\n setEmailError(null)\n setPhoneError(null)\n setError(null)\n setLoading(false)\n propsOnClickAway()\n }, [propsOnClickAway])\n\n // Render\n\n const renderRoles = useMemo(() => {\n if (type === 'edit' && isGpsTech) {\n return null\n }\n\n return Object.keys(allRoles).map(role => {\n const id = allRoles[role]\n const isChecked = userRoles.includes(parseInt(id))\n\n // dont show owner role\n if (role === 'Owner') return\n\n // dont show GPS tech when editing\n if (type === 'edit' && role === 'GPS Technician') return\n\n return (\n \n \n
\n )\n })\n }, [userRoles, type, allRoles, handleSetUserRoles, isGpsTech, isOwner])\n\n const renderTag = useMemo(() => {\n if (!isOwner && !isGpsTech) {\n return null\n }\n\n let tagTitle = ''\n\n if (isGpsTech) {\n\t\t\ttagTitle = 'GPS Technician'\n }\n\n if (isOwner) {\n tagTitle = 'Owner'\n }\n\n return (\n \n {tagTitle}\n
\n )\n }, [isOwner, isGpsTech])\n\n const renderCtaButton = useMemo(() => {\n const disableButton = disabled()\n\n if (type === 'create') {\n return \n }\n\n if (type === 'edit') {\n return \n }\n\n if (loading) {\n return \n }\n }, [type, loading, disabled, createUser, updateUser])\n\n const renderUserModal = () => {\n let error_view = (\n {error}
\n )\n\n const editUser = user ? user : {}\n\n let editEmailField = null\n if (type === 'create') {\n editEmailField = (\n \n )\n }\n\n let phoneHelperMessage = ''\n if (type === 'edit' && !!user?.submittedphone) {\n phoneHelperMessage = (\n <>\n \n Submitted with {Common.format_phone_number(user?.submittedphone)}\n \n )\n }\n\n let userEmail = ''\n if (type === 'edit') {\n userEmail = {user?.email}
\n }\n\n const title = type === 'create' ? 'New User Information' : DealerHelper.getName(editUser) || \"User Information\"\n\n return (\n \n \n
\n
\n
\n {title}\n {renderTag}\n
\n {userEmail}\n
{error ? error_view : \"\"}
\n
\n
\n
\n
\n \n \n {editEmailField}\n \n {renderRoles}\n
\n\n
\n {renderCtaButton}\n
\n
\n {renderUserModal()}\n
\n );\n};\n\n\nexport default DealerUser\n","import React, { useState, useEffect } from 'react';\nimport DealerHelper from '../../helpers/DealerHelper.js';\nimport lb_fetch from '../../helpers/Request.js';\nimport Error from '../error/index.js';\nimport { useIsMount } from '../helpers/useIsMount.js.jsx';\nimport Pagination from '../modules/Pagination.js.jsx';\nimport DealerUser from './DealerUser.jsx';\nimport BasicTable from '../modules/BasicTable.js.jsx';\n\nconst UserManagement = () => {\n\n const isMount = useIsMount();\n const [users, setUsers] = useState([])\n const [loader, setLoader] = useState(false)\n const [searchKeyword, setSearchKeyword] = useState(\"\")\n const [createModal, setCreateModal] = useState(false)\n const [editUser, setEditUser] = useState(null)\n const [newUserLoader, setNewUserLoader] = useState(false)\n const [editUserLoader, setEditUserLoader] = useState(null)\n\n const allRoles = Object.freeze({\n \"Owner\": 1,\n \"Manage Users\": 2,\n \"GPS Technician\": 5\n })\n\n useEffect(() => {\n if (isMount) {\n getDealerUsers()\n }\n }, [])\n\n const getDealerUsers = async (loader_type='normal', user_id=null) => {\n if (loader_type == 'new') {\n setNewUserLoader(true)\n }\n else if (loader_type == 'edit') {\n setEditUserLoader(user_id)\n }\n else {\n setLoader(true)\n }\n let url = `/dealers/get_all_users`\n let res = null\n\n try {\n res = await lb_fetch(url, {method: 'post'})\n } catch (error) {\n Error.popup('Error', 'Something went wrong, Contact US')\n console.log('error in UserManagement#getDealerUsers');\n console.log(error);\n return\n }\n\n if (!res.ok) {\n Error.popup('Error', 'Something went wrong, Contact US')\n console.log('error in UserManagement#getDealerUsers');\n return\n }\n\n let data = await res.json()\n let users = data['data']\n setUsers(users)\n if (loader_type == 'new') {\n setNewUserLoader(false)\n }\n else if (loader_type == 'edit') {\n setEditUserLoader(null)\n }\n else {\n setLoader(false)\n }\n }\n\n const getUsersData = () => {\n let search_keyword_array = searchKeyword.trim().split(' ').filter(s => s).map(s => s.toLowerCase())\n if (!search_keyword_array.length) {\n return users\n }\n let users_data = users.filter(u => search_keyword_array.some(s => (u['firstname'] || \"\").toLowerCase().includes(s)) ||\n search_keyword_array.some(s => (u['lastname'] || \"\").toLowerCase().includes(s)) ||\n search_keyword_array.some(s => (u['email'] || \"\").toLowerCase().includes(s)) ||\n search_keyword_array.some(s => (u['phone'] || \"\").toLowerCase().includes(s)))\n return users_data\n }\n\n const user_data = getUsersData()\n\n // Render functions\n\n const renderTag = (userRoles) => {\n if (userRoles.includes(allRoles['GPS Technician'])) {\n return (\n\t\t\t\tGPS Technician\n )\n }\n\n if (userRoles.includes(allRoles.Owner)) {\n return (\n Owner\n )\n }\n }\n\n const renderTableRow = (user) => {\n const { id, roles, email, phone } = user\n\n const manage_user_view = (\n \n )\n\n const hasManageUsers = roles.includes(allRoles['Manage Users'])\n\n const dealerName = DealerHelper.getName(user) || (\n (No Name)
\n )\n\n return (\n \n | \n \n {dealerName}\n \n {renderTag(roles)}\n \n \n | \n {email} | \n {phone || \"--\"} | \n {hasManageUsers ? manage_user_view : \"\"} | \n setEditUser(user)} data-testid=\"dealer-user-settings-edit-user-link\">Edit | \n
\n )\n }\n\n const mainHeader = () => {\n return (\n \n {search()}\n
\n \n
\n
\n
setSearchKeyword(e.target.value)} placeholder=\"Search...\" />\n
\n
\n | \n No users\n | \n
\n )\n }\n\n return user_rows\n }\n\n const renderLoader = (num=10) => {\n let rows = []\n for (var i = 0; i < num; i++) {\n rows.push(renderLoaderRow(i))\n }\n\n return rows\n }\n\n const renderLoaderRow = (index) => {\n return (\n \n | \n \n | \n \n \n | \n \n \n | \n \n \n | \n \n \n | \n
\n )\n }\n\n const header_list = ['Name', 'Email', 'Phone', \"Manage Users\", '']\n\n return (\n \n
\n {mainHeader()}\n
\n \n {loader ? renderLoader() : renderTableRows()}\n \n \n {\n user_data.length ? (\n
\n ) : null\n }\n
\n\n
setCreateModal(false)} reload={() => getDealerUsers('new')} type='create' />\n setEditUser(null)} user={editUser} reload={(id) => getDealerUsers('edit', id)} type='edit' />\n Access Denied, Contact your dealership owner
\n )\n }\n else {\n return (\n Not found
\n )\n }\n }\n\n return (\n \n {header()}\n
\n {mainView()}\n
\n
\n {status_message}\n
\n )\n}\n\nexport default PlaidStatusMessages","import React, { useContext } from 'react'\nimport { PlaidContext } from './plaid/PlaidContext'\n\nconst WelcomeHeader = () => {\n const { customerName, vehicle } = useContext(PlaidContext)\n\n const welcome_param = 'welcome=true'\n if (!location.search.includes(welcome_param)) return null\n\n const header_text = 'Welcome to Lendbuzz.'\n\n return (\n \n
\n
\n {header_text}\n
\n
\n {customerName}, we need your help completing the loan application for a {vehicle}.\n
\n
\n
{title}
\n\n let body = content\n if (isModal) body = content.replace(/h3/g, 'h4')\n const renderBody = () => ({ __html: body })\n\n return (<>\n { header }\n \n )\n}\n\nexport default ConsentDocument\n","import React, { useContext } from 'react'\nimport { PlaidContext } from './PlaidContext'\nimport LBModal from '../../modules/LBModal.js'\nimport ConsentDocument from '../../consents/ConsentDocument.jsx'\nimport consentDocs from '../../../../../db/data/ConsentDocs.json'\n\nconst CommsConsentModal = () => {\n const { commsModalTarget, setCommsModalTarget } = useContext(PlaidContext)\n\n if (!commsModalTarget) return null\n\n const {[ commsModalTarget ]: { title }} = consentDocs\n\n const handleClose = () => {\n setCommsModalTarget()\n }\n\n return (\n \n \n
\n
\n \n
\n
\n \n
\n
\n \n Using 256-bit Encryption\n
\n )\n\n // TODO: redo CommTypes prompt text (when accounts.length)\n let button_text = `Connect ${financialPullingBankAccounts.length ? 'Another' : 'Your'} Bank`\n if (loadingPlaidLink) button_text = 'Please wait, Loading....'\n\n const icon_class = loadingPlaidLink ? \"fa-spinner fa-spin\" : 'fa-plus'\n\n const renderConsentIndicator = () => {\n if (hasCommunicationsConsent) return null\n\n const commsDisclosureLink = Paperless Agreement\n const creditReportPolicyLink = Credit Report Policy\n const termsOfServiceLink = Terms of Service\n const privacyPolicyLink = Privacy Policy\n const stateSpecificDisclosuresLink = State-Specific Disclosures\n \n if (isDealer) return (\n \n If applicant is connecting their bank using this browser, please ensure they read the {commsDisclosureLink} (and\n understand that we will communicate with them about their loan by electronic means only), as well as\n the {creditReportPolicyLink}, {termsOfServiceLink}, {privacyPolicyLink}, and {stateSpecificDisclosuresLink}\n
\n )\n\n return (\n \n By clicking \"Connect your bank,\" you certify that you understand you will\n not receive documents in the mail and have read and agree to\n the {commsDisclosureLink}, {creditReportPolicyLink}, {termsOfServiceLink}, {privacyPolicyLink},\n and {stateSpecificDisclosuresLink}. You also opt in to receive automated text messages\n on your account from us.\n
\n )\n }\n\n const handleOpenPlaidLink = async (regularOrHighlighted = 'Regular') => {\n if (loadingPlaidLink)\n return null\n \n if (!hasCommunicationsConsent) await setUserConsents()\n\n sendAnalytics(`Connect Bank Options - Click - ${regularOrHighlighted} ${button_text}`)\n openPlaidLink()\n } \n // NOTE: the event logging for this is in plaid_heap - the logging function wraps the existing openPlaidLink call,\n // which should be replaced with this one when that's merged\n\n const renderPlaidButton = plaidDataIsValid\n ? (\n \n handleOpenPlaidLink()}>\n {button_text}\n \n
\n )\n : (\n \n )\n\n const renderSendToClientButton = (\n <>\n sendAnalytics('Connect Bank Options - Click - Send to client')}\n >\n Send to client\n \n \n \n \n )\n\n const render_connect_buttons = isDealer\n ? (\n \n
\n {renderPlaidButton}\n
\n
\n {renderSendToClientButton}\n
\n
\n {render_connect_buttons}\n {renderConsentIndicator()}\n
\n )\n}\n\nexport default PlaidConnectionPrompt\n","import React, { useContext, useEffect } from 'react'\nimport { useIsMount } from '../../helpers/useIsMount.js.jsx'\nimport FinanceConnector from './FinanceConnector'\nimport { PlaidContext } from './PlaidContext.jsx'\nimport { BankAccountHeader, BankAccountIntroText } from '../BankAccountIntro.jsx'\nimport PlaidStatusMessages from './PlaidStatusMessages.jsx'\nimport WelcomeHeader from '../WelcomeHeader.jsx'\nimport CommsConsentModal from './CommsConsentModal.jsx'\nimport BankAccountChooser from './BankAccountChooser.jsx'\nimport PlaidConnectionPrompt from './PlaidConnectionPrompt.jsx'\n\nconst BankAccountConnection = () => {\n const {\n lbid,\n isReadonly,\n refreshPageState,\n plaidDataIsValid,\n sendAnalytics\n } = useContext(PlaidContext)\n const isMount = useIsMount()\n\n useEffect(() => {\n if (isMount) {\n FinanceConnector.subscribe(lbid, () => refreshPageState())\n // ws connection takes time, manuall polling until connection is success\n refreshPageState()\n }\n }, [lbid])\n\n // const showRefreshMessage = check_for_ws_connection() NOTE: see PlaidStatusMessage\n\n const render_next_button = () => (\n \n )\n\n return (\n \n
\n
\n \n \n
\n \n
\n
\n \n \n \n {!isReadonly && }\n \n
\n {plaidDataIsValid && render_next_button()}\n
\n {children}\n
\n )\n}\n\nexport default HeaderText\n","import React from 'react'\n\nconst BodyText = ({ children }) => {\n return (\n \n {children}\n
\n )\n}\n\nexport default BodyText\n","import React from 'react'\n\nconst GeneralButton = ({ onClick, id = '', disabled = false, children = null }) => {\n return (\n \n
\n \n { children }\n
\n \n \n Unlock your best rate now\n \n Connect your bank account \n that you deposit your income into for the best rates and fastest approval.\n \n
\n )\n }\n\n const renderConnectButton = () => {\n let display_text = 'Connect your bank'\n let display_icon = \n\n if (loadingPlaidLink) {\n display_text = 'Loading...'\n display_icon = null\n }\n\n return (\n \n {display_icon}\n {display_text}\n \n )\n }\n\n const openCommsModal = (target) => (e) => {\n sendAnalytics(`Dealer Applicant Connect Bank - Click - ${e.target.innerText}`, { showAuthError: hasAuthError })\n setCommsModalTarget(target)\n }\n\n const renderLegalText = () => {\n const commsDisclosureLink = Paperless Agreement\n const creditReportPolicyLink = Credit Report Policy\n const termsOfServiceLink = Terms of Service\n const privacyPolicyLink = Privacy Policy\n const stateSpecificDisclosuresLink = State-Specific Disclosures\n\n return (\n \n By clicking \"Connect your bank\" you certify that you understand you will not receive documents in the mail and have read and agree to the\n {commsDisclosureLink}, {creditReportPolicyLink}, {termsOfServiceLink}, {privacyPolicyLink} \n and {stateSpecificDisclosuresLink}.\n You also opt-in to receive automated text messages on your account from us.\n \n
\n )\n }\n\n return (\n \n \n {renderText()}\n {renderNoAuthIndication()}\n {renderConnectButton()}\n {renderLegalText()}\n
\n )\n}\n\nexport default ConnectBankPage\n","import React, { useContext, useEffect } from 'react'\nimport { PlaidContext } from '../PlaidContext'\nimport HeaderText from './NewPlaidFlowComponents/HeaderText'\nimport BodyText from './NewPlaidFlowComponents/BodyText'\nimport GeneralButton from './NewPlaidFlowComponents/GeneralButton'\nimport { getCustomerFirstName, getDealershipName, getVehicle } from '../PlaidHelper'\n\nconst WelcomePage = ({ show, nextPage }) => {\n const { loanApplication, sendAnalytics } = useContext(PlaidContext)\n\n useEffect(() => {\n if (show) {\n sendAnalytics('Dealer Applicant Plaid Welcome - View - Page')\n }\n }, [show])\n\n if (!show) return null\n\n const handleGetStartedClicked = () => {\n sendAnalytics('Dealer Applicant Plaid Welcome - Click - Get Started')\n nextPage()\n }\n\n const renderWelcomeText = () => {\n const vehicle = getVehicle(loanApplication) || 'car'\n const customerFirstName = getCustomerFirstName(loanApplication) || null\n const dealershipName = getDealershipName(loanApplication) || 'your dealership'\n\n let headerText = 'Hi!'\n\n if (customerFirstName)\n headerText = `Hi, ${customerFirstName}!`\n\n return (\n \n {headerText}
Let's get your new car\n Your loan application has been submitted at {dealershipName}.\n \n Get the best rates and fastest approval on your {vehicle} \n by verifying your bank account information.\n \n
\n )\n }\n\n const renderGetStartedButton = () => {\n return (\n \n Get started\n \n )\n }\n\n return (\n \n {renderWelcomeText()}\n {renderGetStartedButton()}\n
\n )\n}\n\nexport default WelcomePage\n","import React, { useContext, useEffect } from 'react'\nimport { PlaidContext } from '../../PlaidContext'\n\nconst ErrorNotification = () => {\n const {\n loanApplicationErrors,\n sendAnalytics\n } = useContext(PlaidContext)\n\n useEffect(() => {\n if (loanApplicationErrors && loanApplicationErrors.length)\n sendAnalytics('Dealer Applicant Plaid Welcome - Errors', { errors: loanApplicationErrors })\n }, [loanApplicationErrors])\n\n if (!loanApplicationErrors.length)\n return null\n\n const renderErrorList = () => {\n const errorsView = loanApplicationErrors.map((e, i) => {\n return (\n {e}
\n )\n })\n\n return errorsView\n }\n\n return (\n \n
\n
Errors:
\n {renderErrorList()}\n \n
\n
\n {renderBankConnectingAnimation()}\n It may take a few minutes to connect to your bank.\n Please stay on this page.\n
\n
\n \n {children}\n \n
\n )\n}\n\nexport default TextButton","import React, { useContext, useEffect } from 'react'\nimport BodyText from './NewPlaidFlowComponents/BodyText'\nimport HeaderText from './NewPlaidFlowComponents/HeaderText'\nimport GeneralButton from './NewPlaidFlowComponents/GeneralButton'\nimport TextButton from './NewPlaidFlowComponents/TextButton'\nimport BankAccountChooser from '../BankAccountChooser'\nimport { PlaidContext } from '../PlaidContext'\n\nconst ConfirmedBankAccounts = ({\n show,\n nextPage,\n isLandingPage\n}) => {\n const {\n hasCommunicationsConsent,\n setUserConsents,\n openPlaidLink,\n loadingPlaidLink,\n sendAnalytics,\n financialPullingData\n } = useContext(PlaidContext)\n\n useEffect(() => {\n if (show) {\n sendAnalytics('Dealer Applicant Bank Selection - View - Page', { headline: getHeaderText(), itemId: getLastBankItemId() })\n }\n }, [show])\n\n if (!show) return null\n\n const getLastBankItemId = () => {\n const lastItemIndex = financialPullingData.length - 1\n\n return financialPullingData[lastItemIndex]?.item_id\n }\n\n const getHeaderText = () => {\n if (isLandingPage) return 'Bank connections'\n\n return 'Almost done!'\n }\n\n const handleContinueClicked = () => {\n sendAnalytics('Dealer Applicant Bank Selection - Click - Continue', { headline: getHeaderText() })\n nextPage()\n }\n\n const handleConnectAnotherBankClicked = async () => {\n if (!hasCommunicationsConsent) await setUserConsents()\n\n sendAnalytics('Dealer Applicant Bank Selection- Click - Connect another bank', { headline: getHeaderText() })\n openPlaidLink()\n }\n\n const renderText = () => {\n return (\n \n {getHeaderText()}\n Our secure AI technology is unlocking your best rate by verifying your income within the following bank account(s).\n Please select the account you want to use to pay off your future vehicle loan.\n
\n )\n }\n\n const renderContinueButton = () => {\n return (\n \n Continue\n \n )\n }\n\n const renderConnectAnotherBankButton = () => {\n let display_text = 'Connect another bank'\n let display_icon = \n\n if (loadingPlaidLink) {\n display_text = 'Loading...'\n display_icon = null\n }\n\n return (\n \n {display_icon}\n {display_text}\n \n )\n }\n\n return (\n \n {renderText()}\n \n {renderContinueButton()}\n {renderConnectAnotherBankButton()}\n
\n )\n}\n\nexport default ConfirmedBankAccounts\n","import React, { useContext, useEffect } from 'react'\nimport { PlaidContext } from '../PlaidContext'\nimport HeaderText from './NewPlaidFlowComponents/HeaderText'\nimport BodyText from './NewPlaidFlowComponents/BodyText'\nimport TextButton from './NewPlaidFlowComponents/TextButton'\nimport { getDealershipName } from '../PlaidHelper'\nimport GeneralButton from './NewPlaidFlowComponents/GeneralButton'\n\nconst ThankYouPage = ({\n show,\n prevPage,\n setBankAccountHeadline\n}) => {\n const {\n loanApplication,\n hasTransactions,\n sendAnalytics,\n lbid\n } = useContext(PlaidContext)\n\n useEffect(() => {\n if (show) {\n sendAnalytics('Dealer Applicant Thank You - View - Page', { bankStatementCalloutShown: !hasTransactions })\n }\n }, [show])\n\n if (!show) return null\n\n const handleReturnTextClicked = () => {\n sendAnalytics('Dealer Applicant Thank You - Click - Return to Bank Account Selection', { bankStatementCalloutShown: !hasTransactions })\n prevPage()\n setBankAccountHeadline(\"INITIAL\")\n }\n\n const handleUploadDocsClicked = () => {\n sendAnalytics('Dealer Applicant Thank You - Click - Upload Documents', { bankStatementCalloutShown: !hasTransactions })\n window.location = (`/loan_applications/${lbid}/documents/edit`)\n }\n\n const renderThankYouText = () => {\n const dealershipName = getDealershipName(loanApplication)\n\n return (\n \n Thank you!\n Your dealer at {dealershipName} will discuss next steps with you.\n
\n )\n }\n\n const renderReturnTextButton = () => {\n return (\n \n \n Return to Bank Account Selection\n \n
\n )\n }\n\n const renderBankStatementText = () => {\n if (hasTransactions) return null\n\n return (\n Please have your bank statements available.\n )\n }\n\n const renderUploadDocsButton = () => {\n if (!hasTransactions) return null\n\n return (\n \n Upload Documents\n \n )\n }\n\n return (\n \n {renderThankYouText()}\n {renderBankStatementText()}\n {renderReturnTextButton()}\n {renderUploadDocsButton()}\n
\n )\n}\n\nexport default ThankYouPage\n","import React, { useState, useEffect, useContext } from 'react'\nimport { PlaidContext } from '../PlaidContext'\nimport ConnectBankPage from './ConnectBankPage'\nimport WelcomePage from './WelcomePage'\nimport ErrorNotification from './NewPlaidFlowComponents/ErrorNotification.jsx'\nimport LoadingPage from './LoadingPage.jsx'\nimport ConfirmedBankAccounts from './ConfirmedBankAccounts'\nimport ThankYouPage from './ThankYouPage'\nimport { useIsMount } from '../../../helpers/useIsMount.js.jsx'\nimport FinanceConnector from '../FinanceConnector.js'\n\nconst PlaidAccountConnection = () => {\n const {\n lbid,\n refreshPageState,\n financialPullingBankAccounts,\n financialDataQueue,\n financialPullingData,\n gettingNewBank,\n hasAuth\n } = useContext(PlaidContext)\n\n const hasPlaid = !!financialPullingData.length\n const hasBankAccounts = !!financialPullingBankAccounts.length\n const landingPageType = hasBankAccounts ? 'CONFIRMED_BANK_ACCOUNTS' : 'WELCOME'\n const [showPageType, setShowPageType] = useState(landingPageType)\n // bankAccountHeadline = the ConfirmedBankAccounts page can be a landing page - \"INITIAL\"\n // or it can be an \"Almost done!\" page - which the user sees after a successful bank connection - \"DONE\"\n // when the loading page is shown this state turns to \"LOADING\" - as a flag for turning to \"DONE\" after\n const [bankAccountHeadline, setBankAccountHeadline] = useState(\"INITIAL\") \n\n const isMount = useIsMount()\n const isLoading = gettingNewBank || financialDataQueue\n\n useEffect(() => {\n if (isLoading) {\n setBankAccountHeadline(\"LOADING\")\n return\n }\n\n if (bankAccountHeadline === 'LOADING' && !isLoading && hasAuth) {\n setBankAccountHeadline(\"DONE\")\n }\n }, [financialDataQueue, gettingNewBank, bankAccountHeadline])\n\n useEffect(() => {\n if (showPageType === 'CONNECT_BANK' && hasPlaid && hasAuth) {\n setShowPageType(\"CONFIRMED_BANK_ACCOUNTS\")\n }\n }, [financialPullingData, showPageType, hasAuth])\n\n useEffect(() => {\n if (isMount) {\n FinanceConnector.subscribe(lbid, () => refreshPageState())\n // ws connection takes time, manuall polling until connection is success\n refreshPageState()\n }\n }, [lbid])\n\n if (isLoading) {\n return (\n \n )\n }\n\n return (\n \n \n \n setShowPageType(\"CONNECT_BANK\")} />\n \n setShowPageType('THANK_YOU')}\n isLandingPage={bankAccountHeadline !== 'DONE'} />\n setShowPageType('CONFIRMED_BANK_ACCOUNTS')}\n setBankAccountHeadline={setBankAccountHeadline} />\n
\n \n )\n}\n\nexport default PlaidAccountConnection\n","import React from 'react'\nimport { PlaidProvider } from '../PlaidContext.jsx'\nimport PlaidAccountConnection from './PlaidAccountConnection.jsx'\n\nconst NewPlaidFlow = (props) => {\n\n return (\n \n \n \n )\n}\n\nexport default NewPlaidFlow\n","import React, { useState, useEffect } from 'react';\nimport ButtonBar from './ButtonBar'\nimport lb_fetch from '../../helpers/Request.js';\nimport LBModal from '../modules/LBModal.js'\nimport { useIsMount } from '../helpers/useIsMount.js.jsx'\n\nconst DealerInfoPage = (props) => {\n const [dealer, setDealer] = useState({})\n const [usStates, setUsStates] = useState([])\n const [readOnly, setReadOnly] = useState(true)\n const [pageLoader, setPageLoader] = useState(false)\n const [loading, setLoading] = useState(false)\n const [feedbackModal, setFeedbackModal] = useState(false)\n const [feedbackInfo, setFeedbackInfo] = useState({})\n const isMount = useIsMount()\n\n const onChange = (e, field) => {\n const value = e.target.value\n dealer[field] = value\n setDealer({...dealer})\n }\n\n useEffect(() => {\n if (isMount) {\n setPageLoader(true)\n getDealer().then(() => setPageLoader(false)).catch(() => setPageLoader(false))\n }\n })\n\n const getDealer = async () => {\n let res = null\n const url = `/loan_applications/dealer_info/v1`\n\n try {\n res = await lb_fetch(url, { body: { id: props.lbid } })\n } catch (error) {\n console.log('error loading page');\n console.log(error);\n return\n }\n\n if (!res.ok) {\n return\n }\n\n const data = await res.json()\n setDealer(data['dealer'])\n setReadOnly(data['read_only'])\n setUsStates(data['us_states'])\n }\n\n const saveDealer = async () => {\n setLoading(true)\n\n let res = null\n const url = `/loan_applications/save_dealer_info/v1`\n\n try {\n res = await lb_fetch(url, {method: 'post', body: {loan_application: {dealer}, id: props.lbid}})\n } catch (error) {\n console.log('error in saveDealerInfo');\n console.log(error);\n setFeedbackModal(true)\n setFeedbackInfo({ status: 'error', title: 'Failed Saving Dealer', description: 'Please refresh the page and try again' })\n return null\n } finally {\n setLoading(false)\n }\n\n if (res.status == 403) {\n setFeedbackModal(true)\n setFeedbackInfo({ status: 'error', title: 'Failed Saving Dealer', description: \"You don't have access to change dealer information, Please Contact Us\" })\n return\n }\n else if (!res.ok) {\n console.log(\"Something went wrong, please contact us\")\n console.log(`Status: ${res.status}, ${res.statusText}`)\n setFeedbackModal(true)\n setFeedbackInfo({ status: 'error', title: 'Failed Saving Dealer', description: 'Please refresh the page and try again' })\n return\n }\n\n let data = await res.json()\n\n if (data) {\n setFeedbackModal(true)\n setFeedbackInfo({ status: 'success', title: 'Saved Successfully', description: 'Dealer information saved' })\n return\n }\n\n setFeedbackModal(true)\n setFeedbackInfo({ status: 'error', title: 'Failed Saving Dealer', description: 'Please refresh the page and try again' })\n }\n\n const renderFormField = (field, title, required=false, type='text') => {\n let disabledClasses = \"\"\n if (readOnly) {\n disabledClasses = \"text-gray-380\"\n }\n return (\n \n onChange(e, field)}/>\n \n \n )\n }\n\n const renderStateOptions = () => {\n let us_states = usStates || []\n let state_options = us_states.map((us_state, index) => {\n return (\n \n )\n })\n\n return state_options\n }\n\n\n const renderRepInformation = () => {\n return (\n <>\n \n \n {renderButton()}\n
\n \n )\n }\n\n const renderButton = () => {\n if (readOnly) {\n return null\n }\n\n let submitText = \"Save\"\n\n if (loading) {\n submitText = \"Loading...\"\n }\n\n const is_empty = ['name', 'phone', 'address_1', 'address_2', 'city', 'state', 'zip'].find(f => dealer[f]) == null\n\n return (\n \n
)\n }\n\n const renderFeedbackModal = () => {\n const feedback_info = feedbackInfo || {}\n let feedbackBg = \"bg-green-100\"\n let feedbackFontColor = \"text-green-500\"\n let feedbackIcon = ()\n\n if (feedback_info['status'] == \"error\") {\n feedbackBg= \"bg-red-100\"\n feedbackFontColor = \"text-gray-380\"\n feedbackIcon = null\n }\n\n return( setFeedbackModal(false)}>\n \n
\n
\n
\n \n Notifications\n \n setFeedbackModal(false)}>\n
\n
\n
\n
\n
\n
{feedback_info['title']}
\n
\n {feedbackIcon}\n {feedback_info['description']}\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n Loading Dealer Information, Please Wait...\n \n
\n
\n
\n
\n
\n \n { pageLoader ? renderPageLoader() : renderCardBody() }\n
\n \n
\n
\n {slot.name.toLowerCase()}\n
\n
\n IN REVIEW
\n \n \n }\n if (status === \"REJECTED\") {\n _statusTagView = <>\n REJECTED
\n \n \n }\n if (status === \"VERIFIED\") {\n _statusTagView = <>\n VERIFIED
\n \n \n }\n\n return \n {_statusTagView}\n
\n}\n\nexport default StatusTag\n","import React, { useMemo, useState, useContext } from 'react'\nimport FileLink from '../../modules/BasicElements/FileLink'\nimport Icon from '../../modules/BasicElements/Icon'\nimport Button from '../../modules/BasicElements/Button'\nimport StatusTag from './StatusTag'\n\nimport DocumentsContext from '../DocumentsContext'\n\n\n\nconst DocumentLinkPlaceholder = () => {\n return \n\n \n}\n\nconst DocumentLink = ({ document, status, lbid, children }) => {\n const { actions: { deleteDocument } } = useContext(DocumentsContext)\n const [isPreviewing, setIsPreviewing] = useState(false)\n const [isConfirmationOpen, setConfirmationOpen] = useState(false)\n\n if (document.status === \"UPLOADING\") {\n return \n }\n\n const togglePreview = () => {\n setIsPreviewing(!isPreviewing)\n } \n\n const backgroundColor = useMemo(()=> {\n if(status == \"REJECTED\") return \"bg-red-100\"\n else if (status == \"VERIFIED\") return \"bg-green-200\"\n else return \"bg-gray-175\"\n }, [status])\n\n const deleteConfirmation = \n Are you sure you want to delete this file?\n \n deleteDocument(document.id)}\n >\n Yes, delete this file\n \n \n
\n \n\n const source = `/loan_applications/${lbid}/documents/get_document/${document.id}`\n\n // this should be improved to accurately reflect the correct filetypes, hotfix for only pdf for now.\n const documentFileType = document.user_filename.split('.').slice(-1)[0]\n const isImageType = documentFileType !== 'pdf'\n const filePreview = isImageType ? (\n \n ) : (\n \n No preview available for non-image files\n \n )\n\n return (\n \n
\n \n \n setConfirmationOpen(true)} />\n {children}\n
\n {isConfirmationOpen && deleteConfirmation}\n {isPreviewing && filePreview}\n
\n
{displayName} \n {hasAddFilesButton &&
}\n
\n {renderTitleView()}\n {renderNoteView()}\n {getSlotDocuments(slot.id).map(doc => (\n \n ))}\n
\n )\n}\n\nexport default FilledSlot\n","import DocumentSlot from \"./DocumentSlot.jsx\";\n\nexport default DocumentSlot\n","import React from 'react'\nimport EmptySlot from './EmptySlot'\nimport FilledSlot from './FilledSlot'\nimport { parseSlotName } from '../../DocumentsContext'\n\nconst DocumentSlot = ({ slot, title }) => {\n const slotTitle = title ? title : slot.name\n const displayTitle = parseSlotName(slotTitle)\n\n const renderSlot = () => {\n if (slot.documents.length === 0) return \n \n return \n }\n\n return renderSlot()\n}\n\nexport default DocumentSlot\n","import React, { useContext, useCallback } from 'react'\nimport DocumentsContext from '../../DocumentsContext'\n\nimport UploadButton from '../../UploadButton'\nimport Button from '../../../modules/BasicElements/Button'\n\nimport PrimaryStageContext from '../../PrimaryStageContext'\n\nconst EmptyGroup = ({ groupId, title, slots }) => {\n const isPrimary = useContext(PrimaryStageContext)\n const {\n state: { lbid }, actions: { setUploadGroup }, helpers: { isBankGroup }\n } = useContext(DocumentsContext)\n const isRecourse = slots[0].collection_type.toLowerCase() === 'recourse agreement'\n\n const renderDownloadTemplateButton = useCallback(() => (\n \n ), [lbid])\n\n const renderButtons = useCallback(() => {\n if (!isRecourse) {\n return (\n setUploadGroup(groupId)}\n >\n Upload\n \n )\n }\n\n return (\n \n {renderDownloadTemplateButton()}\n setUploadGroup(groupId)}\n >\n Upload\n \n
\n )\n }, [groupId, isRecourse, renderDownloadTemplateButton, isPrimary, setUploadGroup])\n\n const renderTitle = () => {\n if (!isRecourse) return title\n\n return (\n <>\n {title}\n \n Please download, sign, and upload\n \n \n )\n }\n\n return (\n <>\n \n {renderTitle()}\n
\n {renderButtons()}\n \n )\n}\n\nexport default EmptyGroup\n","import React, { useContext } from 'react'\n\nimport UploadButton from '../../UploadButton'\nimport DocumentsContext, { VERIFICATION_STATUSES } from '../../DocumentsContext'\nimport FilledSlot from '../DocumentSlot/FilledSlot'\n\nconst FilledGroup = ({ lbid, title, groupId, slots }) => {\n const {\n helpers: { hasDocuments, isLockedStatus },\n actions: { setUploadGroup }\n } = useContext(DocumentsContext)\n\n const hasSingleSlot = slots.length === 1\n\n const filledSlots = slots.filter(slot => hasDocuments(slot.id))\n const slotSections = filledSlots.map(slot =>\n \n )\n\n const renderAdditionalDocumentsLink = () => {\n const satisfiedSlots = slots.filter(slot => isLockedStatus(slot.verification_status))\n const hasVerified = satisfiedSlots.some(slot =>\n slot.verification_status === VERIFICATION_STATUSES.VERIFIED\n )\n\n const isGroupLocked = satisfiedSlots.length === 0 || hasVerified\n if (isGroupLocked) return null\n\n const additionalUploadButton = hasSingleSlot\n ? Add Document\n : (\n \n )\n\n return (\n \n \n Additional Documents\n {\"(optional)\"}\n \n {additionalUploadButton}\n
\n )\n }\n\n const renderTitleView = () => {\n if (!hasSingleSlot) {\n return (\n \n {title}\n \n )\n }\n\n const isRejected = slots[0].verification_status === VERIFICATION_STATUSES.REJECTED\n const isVerified = slots[0].verification_status === VERIFICATION_STATUSES.VERIFIED\n const isLocked = isRejected || isVerified\n\n return (\n \n {title}\n {!isLocked && \n Add file\n }\n \n )\n }\n\n return (\n \n {renderTitleView()}\n {slotSections}\n {renderAdditionalDocumentsLink()}\n
\n )\n}\n\nexport default FilledGroup\n","import DocumentGroup from \"./DocumentGroup\"\n\nexport default DocumentGroup\n","import React, { useContext } from 'react'\n\nimport DocumentSlot from '../DocumentSlot'\nimport EmptyGroup from './EmptyGroup'\nimport FilledGroup from './FilledGroup'\n\nimport DocumentsContext, { parseGroupTitle } from '../../DocumentsContext'\n\nconst hasMultipleRequiredSlots = (slots) => {\n return slots.filter(slot => slot.required).length > 1\n}\n\nconst DocumentGroup = ({ groupId, title }) => {\n const { helpers: { groupHasDocuments, getGroupSlots } } = useContext(DocumentsContext)\n const displayTitle = parseGroupTitle(title)\n\n const slots = getGroupSlots(groupId)\n\n const hasDocuments = groupHasDocuments(groupId)\n\n const singleRequiredView = hasDocuments\n ? \n : \n\n const multiRequiredView = (\n \n
{displayTitle}
\n {slots.map(slot => (\n
\n ))}\n
\n {groups.map(({ id, name }) => (\n \n ))}\n
\n )\n}\n\nexport default DocumentGroupList\n","import React from 'react'\n\nconst Section = ({ className, ...props }) => {\n return (\n \n )\n}\n\nexport default Section\n","import React, { useContext, useMemo } from 'react'\n\nimport DocumentGroupList from '../DocumentGroupList'\nimport DocumentsContext from '../DocumentsContext/DocumentsContext.jsx'\nimport Section from '../../modules/BasicElements/Section.jsx'\nimport Icon from '../../modules/BasicElements/Icon'\n\nimport PrimaryStageContext from '../PrimaryStageContext'\n\nconst verifiedIfRequired = (slot) => {\n if (slot.required) return slot.verification_status === \"VERIFIED\"\n return true\n}\n\n\nconst isGroupVerified = (group) => {\n const { collection_slots: slots } = group\n const requiredSlotsVerified = slots.every(slot => verifiedIfRequired(slot))\n\n const groupRequiredVerified = slots[0].group_level_required\n ? slots.some(slot => slot.verification_status === \"VERIFIED\")\n : true\n\n return requiredSlotsVerified && groupRequiredVerified\n}\n\n\nconst DocumentStage = ({ stage }) => {\n const { key, title, description } = stage\n\n const { state: { groups } } = useContext(DocumentsContext)\n const isPrimary = useContext(PrimaryStageContext)\n\n const stageGroups = useMemo(() =>\n groups.filter(group => group.stage === key)\n , [groups, key])\n\n const isStageVerified = useMemo(() => {\n // other stage is never 'verified'\n if (key === \"OTHER\") return false\n\n return stageGroups.every(stage => isGroupVerified(stage))\n }, [stageGroups, key])\n\n const stageHeaderClass = \"text-3xl font-header\" \n\n if (stageGroups.length < 1) {\n return (\n \n \n {title}\n
\n No documents required at this point
\n \n )\n }\n\n return (\n \n \n {title}\n {isStageVerified &&\n \n Verified\n \n }\n
\n {description}
\n \n \n )\n}\n\nexport default DocumentStage\n","import React, { useContext } from 'react'\n\nimport DocumentsContext from '../DocumentsContext'\nimport DocumentStage from './DocumentStage'\n\nimport PrimaryStageContext from '../PrimaryStageContext'\n\nconst STAGES = [\n {\n title: 'Approval documents',\n key: \"APPROVAL\",\n description: 'These are required in order to request or send a loan contract'\n },\n {\n title: 'Funding documents',\n key: \"FINANCING\",\n description: 'These documents are required in order to request funding',\n secondaryDescription: 'We don’t need these documents quite yet but you can upload them if you like',\n },\n {\n title: 'Other documents',\n key: \"OTHER\",\n description: 'Have any other files you want to add?'\n },\n]\n\nconst DocumentStages = () => {\n \n const { state: { primary } } = useContext(DocumentsContext)\n\n let stageArray = STAGES\n if(primary === \"FINANCING\") {\n stageArray = [STAGES[1], STAGES[0], STAGES[2]]\n }\n\n return (\n {\n stageArray.map((stage, index) => (\n
\n \n \n ))}\n
\n
{displayValue}
\n {renderCheckMark(context, selected)}\n