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?

`; thisScript.insertAdjacentHTML('afterend', html); const form = document.getElementById('pv-form'); form.addEventListener('submit', onSubmit); 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/58ab361014549`; const options = { method: "GET", headers: { "Content-Type": "application/json", }, }; const apiRes = await fetch(url, options); const response = await apiRes.json(); console.log(response); return response; } 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 = {}; 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(); if (!valuationsData.hasPermission) { console.log('no permission'); limitReachedMessage(); return undefined; } 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/58ab361014549?${query}`; const options = { method: "GET", headers: { "Content-Type": "application/json", }, }; console.log(params); const apiRes = await fetch(url, options); if (apiRes.status !== 200) { return { success: false, }; } const homeValueData = await apiRes.json(); 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/58ab361014549?${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); const homeValuationRecord = homeValueData.homeValuation; console.log('homevalue data', homeValuationRecord); home_valuation_id = homeValuationRecord.home_valuation_id; if (homeValueData.success === false) { showNotFoundForm(); return undefined; } modal.querySelector('#rc_home_value').style.display = 'flex'; // Plunk 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() { place = searchBox.getPlace(); console.log(place); address = place.address_components; city = getComponent(address, "locality").long_name; state = getComponent(address, "administrative_area_level_1").short_name; zipcode = getComponent(address, "postal_code").long_name; addressObj = { addressLineOne: place.name, aptNum: "", city: city, state: state, zipcode: zipcode, }; console.log(place); console.log(addressObj); //TODO remove }); setTimeout(function() { const inputContainer = document.querySelector('.pv-input-container'); const pacContainer = document.querySelector('.pac-container') inputContainer.append(pacContainer) }, 1000) } 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(); if (Object.keys(addressObj).length === 0) return; // 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-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/58ab361014549`; 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 = ''; const response = await fetch(url, options); const data = await response.json(); console.log(data); if (data.type == 'error') { //load json data from server and output message output = '

' + response.text + '

'; } 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; 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() { // check if has market insights let market_insights = await this.getMarketInsights(); console.log(market_insights); 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}` } function limitReachedMessage() { 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; }

One step closer to getting your free valuation!

Select Your Purpose

Unlock your market insights now

Thank You