var thisScript = document.currentScript; ! function() { const modal = null; var script = document.createElement("script"); // create a script DOM node script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB5aKUxlSqIedNX9UV_LQmF0j0BHHvfxbQ&libraries=drawing&libraries=places"; // set its src to the provided URL script.onreadystatechange = plunkInit; script.onload = plunkInit; document.head.appendChild( script ); // add it to the end of the head section of the page (could change 'head' to 'body' to add it to the end of the body section instead) }(); function plunkInit() { const modal = null; insertHTML() initializeSearchBox() }; function insertHTML() { let html = `
How much is your home worth right now?

Please choose an address from the suggestions.

Home Valuation Logo

One step closer to getting your free valuation!

×

Select Your Purpose

×

$

Unlock your market insights now

You are just one step away from getting the Market Insights for your home at .

Please press the confirm button bellow and we will shoot that right over to you.

Your personal information is strictly confidential and will not be shared with any outside organization. By submitting this form with your telephone number, you authorize us and our authorized representatives to contact you even if your name is on the federal "Do Not Call" list.

Home Valuation Logo
`; thisScript.insertAdjacentHTML('afterend', html); const form = document.getElementById('pv-form'); form.addEventListener('submit', onSubmit); const addressInput = document.getElementById('pv-address'); if (addressInput) { addressInput.addEventListener('input', function() { setAddressError(false); // Editing the text after picking a suggestion invalidates it -- // otherwise you could select one address, type over it, and get // a valuation for the one you replaced. // // Compared against the value Google itself wrote, because // assigning input.value programmatically does not fire 'input'; // only the user's own typing reaches this. if (addressInput.value !== selectedAddressText) { addressObj = {}; } }); } const leadForm = document.getElementById('lead-form'); leadForm.addEventListener('submit', getLeadData); const marketForm = document.getElementById('pv-cta-form'); marketForm.addEventListener('submit', onMarketInsightsSubmit); modal = document.querySelector("#pv-valuation"); const closeButtons = document.querySelectorAll(".close-button"); closeButtons.forEach((button) => { button.addEventListener("click", toggleModal); }); window.addEventListener("click", windowOnClick); function toggleModal() { const currentModal = document.querySelector(".pv-modal.show-modal"); currentModal.classList.remove("show-modal"); } function windowOnClick(event) { const currentModal = document.querySelector(".pv-modal.show-modal"); if (event.target === currentModal) { toggleModal(); } } } async function trackUsage() { // call to /plunkvaluation/has-permission/{uid} const url = `https://idxapps.com/api/plunkvaluation/has-permission/7ea5b1580e16e`; const options = { method: "GET", headers: { "Content-Type": "application/json", }, }; // Returns null on any failure rather than throwing. A 500 here renders // an HTML error page, and calling .json() on that rejects -- which used // to abort getPlunkHomeValue() before it ever reached the valuation // call, leaving the modal on the skeleton with no error anywhere. try { const apiRes = await fetch(url, options); if (!apiRes.ok) { console.error('HomeValuation: permission check responded ' + apiRes.status); return null; } return await apiRes.json(); } catch (err) { console.error('HomeValuation: permission check failed', err); return null; } } async function successValuation() { const url = `https://idxaddons.com/src/Plunk/Tracking.php?user_id=$id$&success=1`; const options = { method: "POST", headers: { "Content-Type": "application/json", }, }; const apiRes = await fetch(url, options); const response = await apiRes.json(); return response; } function phoneFormat(input) { //returns (###) ###-#### input = input.replace(/\D/g, ''); var size = input.length; if (size > 0) { input = "(" + input } if (size > 3) { input = input.slice(0, 4) + ") " + input.slice(4, 11) } if (size > 6) { input = input.slice(0, 9) + "-" + input.slice(9) } return input; } // Using all caps with the address string values will help with validation let addressObj = {}; // The input value at the moment a suggestion was accepted, so typing over it // can be told apart from Google writing it. let selectedAddressText = ""; let valuationsData = {}; let home_valuation_id = null; // Fetch real home value data from the API using the address in addressObj const getPlunkHomeValue = async (addressObj) => { valuationsData = await trackUsage(); // trackUsage() returns null when its own call failed, so treat an // unknown permission state as a service error rather than assuming // permission -- and never return undefined, which the caller would // dereference. if (!valuationsData) { return { success: false, reason: 'error' }; } if (!valuationsData.hasPermission) { console.log('no permission'); limitReachedMessage(); return { success: false, reason: 'limit' }; } const params = { address: addressObj.addressLineOne, cityName: addressObj.city, stateAbrv: addressObj.state, zipcode: addressObj.zipcode, first_name: addressObj.first_name, last_name: addressObj.last_name, email: addressObj.email, phone: addressObj.phone, interest: addressObj.interest, } const query = Object.keys(params).map(key => { return `${key}=${encodeURIComponent(params[key])}`; }).join('&'); // TODO replace .test for .com console.log(query) const url = `https://idxapps.com/api/plunkvaluation/7ea5b1580e16e?${query}`; const options = { method: "GET", headers: { // Accept matters: without it Laravel renders an HTML error page // for a 500, which .json() below cannot parse. "Accept": "application/json", "Content-Type": "application/json", }, }; let apiRes; try { apiRes = await fetch(url, options); } catch (err) { console.error('HomeValuation: valuation request failed', err); return { success: false, reason: 'error' }; } // A server fault is not the same as "we have no data for this address", // and telling the visitor their address is unknown when the service is // down sends them chasing the wrong problem. if (!apiRes.ok) { console.error('HomeValuation: valuation responded ' + apiRes.status); return { success: false, reason: 'error' }; } let homeValueData; try { homeValueData = await apiRes.json(); } catch (err) { console.error('HomeValuation: valuation returned an unreadable body', err); return { success: false, reason: 'error' }; } if (homeValueData && homeValueData.success === false) { homeValueData.reason = 'no_data'; } console.log(homeValueData); sendToGHL(query, homeValueData); return homeValueData; }; const sendToGHL = async (query, homeValueData) => { let homeValueRecord = homeValueData.homeValuation || {}; let price = homeValueRecord.valuation_dollars || 0; query += `&valuation_dollars=${price}`; // Send data to GHL const url = `https://idxapps.com/api/plunk-send-ghl/7ea5b1580e16e?${query}`; const options = { method: "GET", headers: { "Content-Type": "application/json", }, }; try { const apiRes = await fetch(url, options); const responseData = await apiRes.json(); if (!responseData.success) { console.log(responseData.message); return { success: false, message: responseData.message }; } else { console.log(responseData.message); // Additional processing for successful response return { success: true, message: responseData.message }; } } catch (error) { console.error("Error:", error); return { success: false, error: error.message }; } }; const renderHomeValue = async (addressObj) => { // Get real Home Value data from Plunk's API modal.querySelector('#rc_home_value').style.display = 'none'; let homeValueData = await getPlunkHomeValue(addressObj); // Check BEFORE dereferencing. This used to read .homeValuation and then // .home_valuation_id off it two lines before testing success, so any // failure threw a TypeError, showNotFoundForm() was unreachable, and the // modal sat on the loading skeleton forever. if (!homeValueData || homeValueData.success === false) { if (homeValueData && homeValueData.reason === 'error') { showServiceErrorForm(); } else if (homeValueData && homeValueData.reason === 'limit') { // limitReachedMessage() has already painted. } else { showNotFoundForm(); } return undefined; } const homeValuationRecord = homeValueData.homeValuation; if (!homeValuationRecord) { showNotFoundForm(); return undefined; } home_valuation_id = homeValuationRecord.home_valuation_id ?? null; modal.querySelector('#rc_home_value').style.display = 'flex'; // Home Valuation AI home value component if (homeValuationRecord) { const widget = document.querySelector('.plunk-component'); const priceDiv = widget.querySelector('#valuationPrice'); const price = homeValuationRecord.valuation; const priceNumber = Number(price); // Convert to number const priceFormatted = priceNumber.toLocaleString('en-US', { currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 }); priceDiv.textContent = priceFormatted; plunkFillData(); modal.querySelector('.pv-skeleton-wrapper').style.display = "none"; modal.querySelector('#market-insights-container').classList.add('market-insights-expanded'); } }; function plunkFillData() { modal.querySelector('#pv-address').textContent = addressObj.addressLineOne; modal.querySelector('#pv-address-2').textContent = addressObj.addressLineOne; modal.querySelector('#pv-city').textContent = addressObj.city; modal.querySelector('#pv-state').textContent = ', ' + addressObj.state; } function initializeSearchBox() { input = document.querySelector('#pv-address'); options = { types: ["address"] }, searchBox = new google.maps.places.Autocomplete(input, options); searchBox.setComponentRestrictions({ "country": "us" }); searchBox.setFields(['address_components', 'name']); //Important searchBox.addListener('place_changed', function() { // Nothing in here may throw. Google dispatches this listener itself // and swallows exceptions, so a single bad read used to leave // addressObj empty and make the Go button silently inert. try { place = searchBox.getPlace(); // Submitting without picking a suggestion still fires this, but // getPlace() then returns a stub carrying only the typed text. address = (place && place.address_components) || []; // Not every address has a locality. New York boroughs come back // as sublocality, unincorporated areas as a county-level // component -- and previously any of those threw on .long_name. city = componentValue(address, ["locality", "sublocality", "sublocality_level_1", "administrative_area_level_3", "neighborhood" ]); state = componentValue(address, ["administrative_area_level_1"], "short_name"); zipcode = componentValue(address, ["postal_code"]); const line = (place && place.name) ? place.name : ""; // A street with no house number ("Santana Row, San Jose, CA") // comes back with no postal_code, so require a state plus // either a city or a zip rather than demanding all three. if (line && state && (city || zipcode)) { addressObj = { addressLineOne: line, aptNum: "", city: city, state: state, zipcode: zipcode, }; selectedAddressText = input ? input.value : ""; setAddressError(false); } else { // Deliberately left empty rather than half-populated: the // valuation lookup needs a real address, and a partial one // would fail further in with a worse message. addressObj = {}; } } catch (err) { addressObj = {}; console.error('HomeValuation: could not read the selected place', err); } }); setTimeout(function() { const inputContainer = document.querySelector('.pv-input-container'); const pacContainer = document.querySelector('.pac-container'); // append(null) would insert a literal "null" text node into the // form -- an in-flow child that shifts the absolutely positioned // search icon off the input. if (inputContainer && pacContainer) { inputContainer.append(pacContainer); } }, 1000) } // First matching component, or '' -- never undefined, so callers can't blow // up reading a property off a miss. function componentValue(components, types, key) { key = key || "long_name"; for (let i = 0; i < types.length; i++) { const match = getComponent(components || [], types[i]); if (match && match[key]) { return match[key]; } } return ""; } function setAddressError(show) { const error = document.querySelector('#pv-address-error'); if (error) { error.style.display = show ? 'block' : 'none'; } } function validatePhone(number) { const regex = /^\(\d{3}\) \d{3}-\d{4}$/; return regex.test(number); } function validateEmail(email) { const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return regex.test(email); } function getLeadData(e) { e.preventDefault(); const form = document.getElementById('lead-form'); const formData = new FormData(form); for (const pair of formData.entries()) { if (pair[0] === 'phone') { const input = document.querySelector("[name='phone']"); if (!validatePhone(pair[1])) { input.parentElement.parentElement.querySelector("p").style.display = "block"; input.style.border = "1px solid red"; return; } input.parentElement.parentElement.querySelector("p").style.display = "none"; input.style.border = ""; } if (pair[0] === 'email') { const input = document.querySelector("[name='email']"); if (!validateEmail(pair[1])) { input.parentElement.parentElement.querySelector("p").style.display = "block"; input.style.border = "1px solid red"; return; } input.parentElement.parentElement.querySelector("p").style.display = "none"; input.style.border = ""; } addressObj[pair[0]] = pair[1]; } document.querySelector("#pv-lead-modal").classList.toggle("show-modal"); document.querySelector("#pv-valuation").classList.toggle("show-modal"); renderHomeValue(addressObj); } function getComponent(array, search) { return array.find(function(component) { return component.types.includes(search); }) } function onSubmit(event) { event.preventDefault(); // Used to be a bare `return`. With no error element and no `required` // on the input, pressing Go with an unresolved address produced nothing // at all -- no modal, no message, no native validation bubble. if (Object.keys(addressObj).length === 0) { setAddressError(true); const input = document.querySelector('#pv-address'); if (input) input.focus(); return; } setAddressError(false); // Reset all the values modal.querySelector('#pv-address').textContent = addressObj.addressLineOne; modal.querySelector('#pv-city').textContent = addressObj.city; modal.querySelector('#pv-state').textContent = ' ' + addressObj.state; modal.querySelector('#rc_home_value').style.display = 'block'; modal.querySelector('.pv-skeleton-wrapper').style.display = "flex"; modal.querySelector('#market-insights-container').classList.remove('market-insights-expanded'); modal.querySelector('#pv-no-results').style.display = 'none'; modal.querySelector('#pv-service-error').style.display = 'none'; modal.querySelector('#pv-thank-you').style.display = 'none'; if (document.querySelector("#pv-tel") != null) { document.querySelector("#pv-tel").value = ""; //clear phone } if (document.querySelector("#pv-email") != null) { document.querySelector("#pv-email").value = ""; //clear email } // Show modal at the end document.querySelector("#pv-lead-modal").classList.toggle("show-modal"); } async function onMarketInsightsSubmit(event) { event.preventDefault(); modal.querySelector('#pv-cta-button').classList.add('is-loading'); let phone = addressObj.phone; let email = addressObj.email; console.log('email', email); console.log('phone', phone); const url = `https://idxapps.com/api/plunkvaluation/send/7ea5b1580e16e`; console.log(url); const marketInsightData = { phone, email, home_valuation_id: home_valuation_id, } console.log(marketInsightData); const options = { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(marketInsightData) }; let output = ''; let data = null; // Unchecked before: a 500 returns an HTML page, .json() rejects, and the // Confirm button stays stuck in its loading state with nothing shown. try { const response = await fetch(url, options); if (response.ok) { data = await response.json(); } else { console.error('HomeValuation: market insights responded ' + response.status); } } catch (err) { console.error('HomeValuation: market insights request failed', err); } if (!data || data.type == 'error') { //load json data from server and output message modal.querySelector('#pv-cta-button').classList.remove('is-loading'); output = '
Sorry, we could not send that just now. Please try again in a moment.
'; } else { modal.querySelector('#pv-thank-you').style.display = 'flex'; modal.querySelector('#pv-cta-button').classList.remove('is-loading'); modal.querySelector('#market-insights-container').classList.remove('market-insights-expanded'); modal.querySelector('#rc_home_value').style.display = 'none'; modal.querySelector('.pv-skeleton-wrapper').style.display = "none"; modal.querySelector('#pv-address').textContent = ''; modal.querySelector('#pv-city').textContent = ''; modal.querySelector('#pv-state').textContent = ''; modal.querySelector('#pv-thankyou-address').textContent = addressObj.addressLineOne; } const alertDiv = document.querySelector("#sms_results") alertDiv.innerHTML = output; // firstChild is null whenever output stayed empty (the success path), // which threw and skipped everything after this. if (alertDiv.firstChild && alertDiv.firstChild.classList) { alertDiv.firstChild.classList.add('show'); } modal.querySelector('#pv-cta-button').classList.remove('is-loading'); setTimeout(function() { alertDiv.firstChild.classList.remove('show'); }, 3000); } async function showNotFoundForm() { // Was `await this.getMarketInsights()` -- `this` is not the object that // holds it, and the result was only logged. It also delayed the panel by // a whole round trip, so the skeleton kept spinning for no reason. modal.querySelector('#pv-service-error').style.display = 'none'; modal.querySelector('#pv-no-results').style.display = 'flex'; modal.querySelector('.pv-callToAction-wrapper').style.display = 'none'; modal.querySelector('#rc_home_value').style.display = 'none'; modal.querySelector('.pv-skeleton-wrapper').style.display = "none"; modal.querySelector('#pv-address').textContent = ''; modal.querySelector('#pv-city').textContent = ''; modal.querySelector('#pv-state').textContent = ''; let address = addressObj.addressLineOne; modal.querySelector('#address-no-value').textContent = `${address}` } // The valuation could not be completed for a reason that is ours, not the // address's. Kept distinct from #pv-no-results so an outage does not tell // the visitor their home does not exist. function showServiceErrorForm() { modal.querySelector('#pv-service-error').style.display = 'flex'; modal.querySelector('#pv-no-results').style.display = 'none'; modal.querySelector('.pv-callToAction-wrapper').style.display = 'none'; modal.querySelector('#rc_home_value').style.display = 'none'; modal.querySelector('.pv-skeleton-wrapper').style.display = "none"; modal.querySelector('#pv-address').textContent = ''; modal.querySelector('#pv-city').textContent = ''; modal.querySelector('#pv-state').textContent = ''; } function limitReachedMessage() { modal.querySelector('#pv-service-error').style.display = 'none'; modal.querySelector('#pv-limit').style.display = 'flex'; modal.querySelector('#pv-no-results').style.display = 'none'; modal.querySelector('.pv-callToAction-wrapper').style.display = 'none'; modal.querySelector('#rc_home_value').style.display = 'none'; modal.querySelector('.pv-skeleton-wrapper').style.display = "none"; modal.querySelector('#pv-address').textContent = ''; modal.querySelector('#pv-city').textContent = ''; modal.querySelector('#pv-state').textContent = ''; } async function getMarketInsights() { let zipCode = addressObj.zipcode; const market_insights_url = `https://idxapps.com/api/marketInsights/${zipCode}`; const response = await fetch(market_insights_url); if (response.status !== 200) { return null; } const marketInsights = await response.json(); return marketInsights; }