1const ContactUsObject = () => { 2 let obj = {}; 3 4 /** 5 * Monitor for the popup. 6 * 7 * @param {object} event The event. 8 */ 9 obj.monitorPopup = function (event) { 10 let close_popup = typeof event === "undefined"; 11 let shouldClose = false; 12 13 if (close_popup) { 14 shouldClose = true; 15 } else if (event?.target) { 16 const isClickOnCloseButton = event.target.closest('.close-form'); 17 18 shouldClose = isClickOnCloseButton; 19 } 20 21 if (shouldClose) { 22 document.querySelector('.contact-form-popup').classList.remove('contact-form-popup--visible'); 23 document.removeEventListener('click', obj.monitorPopup); 24 } 25 } 26 27 /** 28 * Reset form. 29 */ 30 obj.resetForm = function(form){ 31 const agentNumberContainers = document.querySelectorAll('.show-agent-number'); 32 agentNumberContainers.forEach(container => { 33 container.classList.remove('visible'); 34 }); 35 const error_fields = document.querySelectorAll('.form-group.has-error') 36 error_fields.forEach((element, index) => { 37 element.classList.remove('has-error') 38 element.querySelector('.form-group__helper').innerHTML = ''; 39 }); 40 41 const reset_field_values = [ 42 'first_name', 43 'phone_2', 44 'email', 45 'counter_offer_price', 46 'custom_contact_topic', 47 ] 48 49 for (const field_name of reset_field_values) { 50 const field_elem = form.querySelector('#' + field_name); 51 field_elem.value = ''; 52 field_elem.dispatchEvent(new Event('change')) 53 } 54 55 form.querySelectorAll('.form-fields').forEach(elem => { 56 elem.style.removeProperty('display') 57 }) 58 59 const generic_helper = form.querySelector('.generic-helper'); 60 generic_helper.innerHTML = '' 61 generic_helper.classList.remove('enquiry-completed') 62 generic_helper.classList.remove('enquiry-failed') 63 form.querySelector('.close-btn')?.parentNode.remove(); 64 form.querySelector('.form-title').innerHTML = form.getAttribute('data-title') 65 form.querySelector('#counter_offer_price').closest('.form-group').classList.add('hidden') 66 form.querySelector('#counter_offer_price').classList.remove('required-field') 67 document.querySelector('.dummy-form')?.remove() 68 69 const privacyMessage = form.querySelector(".privacyPolicy_message"); 70 if (privacyMessage) { 71 privacyMessage.classList.add("hidden"); 72 } 73 74 form.dispatchEvent(new Event('form:reset')) 75 } 76 77 /** 78 * Track phone button. 79 */ 80 81 obj.eventAgentTel = function () { 82 const agent_mobile_phones = document.querySelectorAll( 83 ".agent-phone-btn:not(.agent-phone-btn--active)" 84 ); 85 agent_mobile_phones.forEach((_btn) => { 86 _btn.classList.add("agent-phone-btn--active"); 87 _btn.addEventListener("click", function (e) { 88 e.preventDefault(); 89 const phone_number = _btn.getAttribute("data-tel"); 90 window.location.href = "tel:" + phone_number; 91 }); 92 }); 93 }; 94 95 /** 96 * Reset the agent tel element. 97 * 98 * @param {object} btn The btn element. 99 */ 100 obj.resetAgentTel = function(btn){ 101 if (btn?.classList.contains('agent-phone-btn--visible')) { 102 btn.querySelector('.agent-phone-btn__label').innerHTML = btn.getAttribute('data-label') 103 btn.classList.remove('agent-phone-btn--visible') 104 return; 105 } 106 } 107 108 /** 109 * Prepare to show the contact us form. 110 */ 111 obj.prepareForm = function (item_obj){ 112 const parent = item_obj.closest('.property-item') 113 const agent_id = parent.getAttribute('data-agent-id') 114 const property_type = parent.getAttribute('data-property-type') 115 const property_ref = parent.getAttribute('data-ref') 116 const original_ref = parent.getAttribute('data-original-ref') 117 const property_id = parent.getAttribute('id') 118 const agent_name = parent.getAttribute('data-agent') 119 const agent_logo = parent.getAttribute('data-agent-logo') 120 const agent_phone = parent.getAttribute('data-agent-phone') 121 const sale_rent = parent.getAttribute('data-sale-rent-raw') 122 123 const popup = document.querySelector('.contact-form-popup') 124 const form = document.querySelector('.contact-form-popup form') 125 const form_id = 'enquiry-form-' + parent.id 126 127 popup.classList.add('contact-form-popup--visible') 128 popup.dispatchEvent(new CustomEvent('contact-form:visible')) 129 // If its the same form just show the form and dont change data. 130 if (form.id === form_id) { 131 setTimeout(() => { 132 document.addEventListener('click', obj.monitorPopup) 133 }, 0); 134 return; 135 } 136 137 obj.resetForm(form); 138 139 const agent_img_elm = form.querySelector('.form-agent-info__inner__logo') 140 const agent_name_elm = form.querySelector('.form-agent-info__inner__name') 141 const agent_phone_btn_elm = form.querySelector('.agent-phone-btn'); 142 const agent_phone_btn_label = form.querySelector('.agent-phone-btn__label'); 143 const agent_number_container = form.querySelector('.show-agent-number-container'); 144 145 obj.resetAgentTel(agent_phone_btn_elm) 146 form.id = form_id 147 if (agent_logo || agent_name) { 148 form.querySelector('.form-agent-info')?.classList.remove('hidden') 149 form.querySelector('.form-agent-info__inner')?.classList.remove('hidden') 150 agent_img_elm.innerHTML = `<img src="${agent_logo}" class="form-agent-info__inner__logo__img"/>` 151 agent_name_elm.innerHTML = `${agent_name}` 152 } else { 153 form.querySelector('.form-agent-info')?.classList.add('hidden') 154 form.querySelector('.form-agent-info__inner')?.classList.add('hidden') 155 agent_img_elm.innerHTML = '' 156 agent_name_elm.innerHTML = '' 157 } 158 if (!agent_logo) { 159 form.querySelector('.form-agent-info__inner')?.classList.add('justify-center','text-center') 160 form.querySelector('.form-agent-info__inner__logo')?.classList.add('hidden') 161 } else { 162 form.querySelector('.form-agent-info__inner')?.classList.remove('justify-center','text-center') 163 form.querySelector('.form-agent-info__inner__logo')?.classList.remove('hidden'); 164 } 165 166 if (agent_phone) { 167 agent_number_container.classList.remove('hidden') 168 agent_phone_btn_elm?.setAttribute('data-tel', agent_phone) 169 agent_phone_btn_elm?.setAttribute('property-id', property_id) 170 agent_phone_btn_label.innerHTML = agent_phone 171 } else { 172 agent_number_container.classList.add('hidden') 173 agent_phone_btn_elm?.setAttribute('data-tel', '') 174 agent_phone_btn_elm?.setAttribute('property-id', '') 175 agent_phone_btn_label.innerHTML = '' 176 } 177 178 obj.eventAgentTel() 179 180 const hidden_fields_html = ` 181 <input type="hidden" name="options[website_url]" value="${window.location.href}"> 182 <input type="hidden" name="options[extra][form_name]" value="Property - Book a viewing"> 183 <input type="hidden" name="options[custom_property_ref]" value="${property_ref}"> 184 <input type="hidden" name="options[custom_property_original_ref]" value="${original_ref}"> 185 <input type="hidden" name="options[source]" value="agent"> 186 <input type="hidden" name="options[agent]" value="${agent_id}"> 187 <input type="hidden" name="options[extra][property_id]" value="${property_id}"> 188 <input type="hidden" name="options[buy_rent]" value="${sale_rent}"> 189 <input type="hidden" name="options[enquiry_type]" value="${property_type}">` 190 form.querySelector('.hidden-fields').innerHTML = hidden_fields_html 191 192 setTimeout(() => { 193 document.addEventListener('click', obj.monitorPopup) 194 }, 0); 195 } 196 /** 197 * Prepare the contact us button actions. 198 */ 199 obj.prepare = function(){ 200 const contact_us_btn = document.querySelectorAll('.contact-us-btn:not(.contact-us-btn--ready)')
201 contact_us_btn.forEach(btn => { 202 btn.classList.add('contact-us-btn--ready') 203 btn.addEventListener('click', function(e){ 204 e.preventDefault(); 205 e.stopPropagation(); 206 obj.prepareForm(btn) 207 const shadowNavbar = document.querySelector('.menu-section__nav--static'); 208 if (shadowNavbar) { 209 shadowNavbar.classList.add('no--shadow'); 210 } 211 }) 212 }); 213 214 const form = document.querySelector('.contact-form-popup form'); 215 216 const close_popup_form = document.querySelector('.close-form'); 217 close_popup_form.addEventListener('click', function() { 218 obj.resetForm(form); 219 setTimeout(() => { 220 document.removeEventListener('click', obj.monitorPopup); 221 }, 0); 222 const shadowNavbar = document.querySelector('.menu-section__nav--static'); 223 if (shadowNavbar) { 224 shadowNavbar.classList.remove('no--shadow'); 225 } 226 }) 227 228 let event_data = {}; 229 230 const trackContactFormEvents = (event_data = {}, event_type = 'view') => { 231 if (typeof TealiumTracker !== 'undefined') { 232 const tealium_object = new TealiumTracker(); 233 tealium_object.trackEvent(event_data, event_type); 234 } 235 } 236 237 const submit_btn = form.querySelector('#submit-btn:not(.submit-event-ready)') 238 if (submit_btn !== null) { 239 submit_btn.classList.add('submit-event-ready') 240 submit_btn.addEventListener('click', function(e) { 241 e.preventDefault(); 242 const form = submit_btn.closest("form"); 243 const privacyCheckbox = form.querySelector(".privacyPolicy_cb"); 244 const privacyMessage = form.querySelector(".privacyPolicy_message"); 245 if (!privacyCheckbox.checked) { 246 privacyMessage.classList.remove("hidden"); 247 // Frontend validation for required fields 248 form.querySelectorAll(".required-field").forEach( 249 (field) => { 250 if (!field.value.trim()) { 251 const parent = field.closest(".form-group"); 252 if (!parent) return; 253 let helper_html = "Este campo no se puede dejar vacÃo"; 254 if (field.dataset?.error) { 255 helper_html +='<div class="pt-2 text-red-600">' +field.dataset.error +"</div>"; 256 } 257 parent.classList.add("has-error"); 258 const helper_field = parent.querySelector(".form-group__helper",); 259 if (helper_field) { 260 if (field.dataset?.helper) { 261 helper_field.innerHTML ='<div class="pt-2 text-red-600">' + field.dataset.helper + "</div>"; 262 } else { 263 helper_field.innerHTML = '<div class="pt-2 text-red-600">' + helper_html + "</div>";; 264 } 265 } 266 } 267 }, 268 ); 269 270 submit_btn.classList.add("pointer-events-none"); 271 setTimeout(() => { 272 submit_btn.classList.remove("pointer-events-none"); 273 }, 300); 274 275 return false; 276 } 277 278 privacyMessage.classList.add("hidden"); 279 280 if (typeof TealiumTracker !== 'undefined') { 281 let property_id = form.getAttribute('id'); 282 property_id = property_id.split('enquiry-form-')[1]; 283 284 const property = document.querySelector('a.property-item[id="' + property_id + '"]'); 285 286 const sale_rent = property.dataset.saleRentRaw; 287 const sale_rent_mapping = { 288 'for_sale': 'compra', 289 'for_rent': 'alquiler' 290 }; 291 292 const form_selected_option = form.querySelector('.contact-topic-list .qcf-radio-list__item--selected')?.dataset.value; 293 294 event_data = { 295 "page_subcategory1": "contactar con el anunciante", 296 "page_subcategory2": sale_rent_mapping[s
296ale_rent] || '', 297 "events": "lead_F2", 298 "event_category": "formulario contacta", 299 "event_action": "click en boton", 300 "event_label": "contactar", 301 "prod_category": property.dataset.category || '', 302 "prod_id": property.dataset.ref || '', 303 "prod_id_agregator": '', 304 "prod_rooms": property.dataset.rooms || '', 305 "prod_bathrooms": property.dataset.bathrooms || '', 306 "prod_type": property.dataset.subcategory || '', 307 "prod_surface": property.dataset.surface || '', 308 "prod_status": property.dataset.status || '', 309 "prod_floor": property.dataset.floor || '', 310 "prod_state": property.dataset.state || '', 311 "prod_pvp_price": property.dataset.pvpPrice || '', 312 "prod_pvp_sale": property.dataset.pvpSale || '', 313 "prod_energy_cert": property.dataset.energyCert || '', 314 "prod_owner": property.dataset.agent || '', 315 "prod_publication_status": property.dataset.websiteStatus || '', 316 "prod_publication_date": property.dataset.publicationDate || '', 317 "prod_characteristics": property.dataset.characteristics || '', 318 "prod_otherfilters": property.dataset.otherFilters || '', 319 "form_selected_option": form_selected_option, 320 } 321 322 trackContactFormEvents(event_data, 'link'); 323 } 324 325 form.addEventListener('form:hidden', function(e){ 326 if (form.querySelector('.close-btn') === null) { 327 form.insertAdjacentHTML("beforeend", `<div class="px-5 pb-5"><button class="min-w-[150px] btn btn-primary w-full btn-pill font-semibold close-btn" type="submit">Volver al anuncio</button></div>`) 328 329 document.querySelector('.close-btn').addEventListener('click', function(e){ 330 e.preventDefault(); 331 document.querySelector('.close-form').click() 332 }) 333 } 334 }) 335 submit_lead_form({obj: submit_btn, form_id: form.id, form_options: contact_form_options}) 336 }) 337 } 338 339 form.addEventListener('submit', (event) => { 340 const { form_response } = event.detail; 341 const isValidResponse = form_response.status !== false; 342 343 if (Object.keys(event_data).length > 0 && typeof TealiumTracker !== 'undefined') { 344 event_data.page_subcategory1 = isValidResponse ? 'formulario enviado' : 'formulario no enviado'; 345 event_data.event_label = 'contactar'; 346 event_data.events = 'pageview, prodView'; 347 348 ['form_selected_option', 'event_category', 'event_action'].forEach(key => { 349 delete event_data[key]; 350 }); 351 352 trackContactFormEvents(event_data); 353 } 354 }); 355 356 const form_add_comment_elem = form.querySelector('.form-add-comment:not(.form-add-comment-event-ready)') 357 if (form_add_comment_elem !== null) { 358 form_add_comment_elem.classList.add('form-add-comment-event-ready') 359 form_add_comment_elem.addEventListener('click', function(){ 360 const form_message_elem = form.querySelector('.form-message') 361 if (form_message_elem !== null) { 362 form_message_elem.classList.toggle('hidden') 363 } 364 }) 365 } 366 367 const form_contact_reason = form.querySelector('.contact-reason .qcf-select:not(.contact-reason--ready)') 368 if (form_contact_reason !== null) { 369 form_contact_reason.classList.add('contact-reason--ready') 370 form_contact_reason.addEventListener('qcf:open', function(){ 371 const elem_sale_rent = form.querySelector('input[name="options[buy_rent]"]').value 372 const first_item = form_contact_reason.querySelector('.qcf-field-group__content__list__item[data-value="Solicitar información del inmueble y f
372inanciación"]') 373 if (elem_sale_rent !== 'for_sale') { 374 first_item.style.display = 'none' 375 } else { 376 first_item.style.display = 'flex' 377 } 378 }) 379 380 form_contact_reason.querySelector('input').addEventListener('change', function(){ 381 const contact_us_description = document.querySelector('.contact_us_description') 382 const contact_us_description_alt = document.querySelector('.contact_us_description_alt') 383 if (this.value === 'Solicitar información del inmueble y financiación') { 384 contact_us_description.classList.add('hidden') 385 contact_us_description_alt.classList.remove('hidden') 386 } else if (this.value === 'Solicitar información del inmueble') { 387 contact_us_description.classList.remove('hidden') 388 contact_us_description_alt.classList.add('hidden') 389 } else { 390 contact_us_description.classList.add('hidden') 391 contact_us_description_alt.classList.add('hidden') 392 } 393 }) 394 } 395 396 obj.eventAgentTel(); 397 398 QoetixCustomFields.eventActions(); 399 } 400 401 return obj; 402} 403 404const ContactUs = ContactUsObject(); 405 406document.addEventListener('DOMContentLoaded', function(){ 407 ContactUs.prepare() 408})
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.