{"version":3,"file":"city-listing-masthead-a0a0fbac.js","sources":["../../../../src/scripts/modules/city-listing-masthead.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport { MASTHEAD_EVENTS } from '../coveo/modules/contractor-listing/helpers';\nimport {\n  getAddressFromGeolocation,\n  getStoredGeolocationCountryAndZip,\n  updateGeolocationDataProperties\n} from '../helpers/geolocation';\nimport { GeolocationType } from '../helpers/global-storage';\nimport { ExtendedWindowType } from '../helpers/global-types';\n\nclass CityListingMasthead extends Component {\n  private validated: boolean;\n  private validatedAddress: string;\n  private locationData: GeolocationType | null;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.validated = false;\n    this.validatedAddress = '';\n    this.locationData = null;\n\n    this.initAutocomplete();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      addressForm: this.el.querySelector<HTMLFormElement>(\n        '.city-listing-masthead__address-form'\n      ),\n      addressInput: this.el.querySelector<HTMLInputElement>(\n        '.city-listing-masthead__address .field__input'\n      ),\n      addressSubmit: this.el.querySelector<HTMLButtonElement>(\n        '.city-listing-masthead__submit-address'\n      )\n    };\n  }\n\n  addListeners() {\n    (this.dom.addressForm as HTMLFormElement)?.addEventListener(\n      'submit',\n      this.handleAddressSubmit.bind(this)\n    );\n\n    (this.dom.addressInput as HTMLInputElement)?.addEventListener(\n      'input',\n      this.handleInputChange.bind(this)\n    );\n\n    window.addEventListener(\n      MASTHEAD_EVENTS.changeTab,\n      this.handleTabChange.bind(this)\n    );\n  }\n\n  handleInputChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n\n    (window as ExtendedWindowType).dataLayer.push({\n      event: 'typeahead',\n      event_category: 'typeahead',\n      event_action: 'viewed',\n      event_label: 'address'\n    });\n\n    if (input.value.length < 1) {\n      this.validated = false;\n    } else {\n      if (input.value === this.validatedAddress) {\n        this.validated = true;\n      } else {\n        this.validated = false;\n      }\n    }\n\n    this.toggleSubmitButton();\n  }\n\n  handleTabChange(e: CustomEventInit) {\n    const tab = e.detail.tab;\n    (window as ExtendedWindowType).dataLayer.push({\n      event_attributes: {\n        zip_code: getStoredGeolocationCountryAndZip()?.zip\n          ? getStoredGeolocationCountryAndZip()?.zip\n          : null,\n        element_text: tab\n      },\n      event: 'custom_click',\n      event_category: 'find a contractor',\n      event_label: '',\n      event_group: 'tabs'\n    });\n  }\n\n  toggleSubmitButton() {\n    if (this.validated) {\n      (this.dom.addressSubmit as HTMLButtonElement).disabled = false;\n    } else {\n      (this.dom.addressSubmit as HTMLButtonElement).disabled = true;\n    }\n  }\n\n  fillInAddress(autocomplete: google.maps.places.Autocomplete) {\n    // Get the place details from the autocomplete object.\n    const place = autocomplete.getPlace();\n\n    //get the zip from the address\n    const zip = place.address_components?.find(component => {\n      return component.types.includes('postal_code');\n    })?.long_name;\n\n    //get the country from the address\n    const country = place.address_components?.find(component => {\n      return component.types.includes('country');\n    })?.short_name;\n\n    //get latitude and longitude from the address\n\n    const latitude = place.geometry?.location?.lat();\n    const longitude = place.geometry?.location?.lng();\n\n    this.locationData = {\n      zip: zip as string,\n      country: country as string,\n      latitude,\n      longitude,\n      address: place.formatted_address\n    };\n\n    if (place.geometry) {\n      this.validated = true;\n      this.validatedAddress = (this.dom.addressInput as HTMLInputElement)\n        ?.value as string;\n    } else {\n      this.validated = false;\n    }\n\n    (window as ExtendedWindowType).dataLayer.push({\n      event: 'typeahead',\n      event_category: 'typeahead',\n      event_action: 'click',\n      event_label: 'address'\n    });\n    this.toggleSubmitButton();\n  }\n\n  initAutocomplete() {\n    if (window.google?.maps) {\n      this.initMapsAutocomplete();\n    } else {\n      const maxAttempts = 20;\n      let attempts = 0;\n      const interval = setInterval(() => {\n        attempts++;\n        if (window.google?.maps) {\n          this.initMapsAutocomplete();\n          clearInterval(interval);\n        } else if (attempts >= maxAttempts) {\n          clearInterval(interval);\n        }\n      }, 500);\n    }\n  }\n\n  initMapsAutocomplete() {\n    const addressField = this.dom.addressInput as HTMLInputElement;\n\n    const autocomplete = new window.google.maps.places.Autocomplete(\n      addressField,\n      {\n        componentRestrictions: { country: ['us', 'ca'] },\n        fields: ['formatted_address', 'address_components', 'geometry'],\n        types: ['postal_code', 'route']\n      }\n    );\n\n    // When the user selects an address from the drop-down, populate the\n    // address fields in the form.\n    autocomplete.addListener(\n      'place_changed',\n      this.fillInAddress.bind(this, autocomplete)\n    );\n\n    if (this.el.dataset.autoFillAddress) {\n      const address = getAddressFromGeolocation();\n      if (address) {\n        (this.dom.addressInput as HTMLInputElement).value = address;\n        this.validated = true;\n        this.validatedAddress = address;\n        this.toggleSubmitButton();\n      }\n    }\n  }\n\n  handleAddressSubmit(e: Event) {\n    e.preventDefault();\n\n    if (this.validated) {\n      const url = this.el.dataset.url as string;\n      if (this.locationData) updateGeolocationDataProperties(this.locationData);\n      window.location.href = `${url}${\n        (this.dom.addressInput as HTMLInputElement)?.value\n      }`;\n    }\n  }\n}\n\nexport default CityListingMasthead;\n"],"names":["CityListingMasthead","Component","el","__publicField","_a","_b","MASTHEAD_EVENTS","e","input","tab","getStoredGeolocationCountryAndZip","autocomplete","place","zip","component","country","_d","_c","latitude","_f","_e","longitude","_h","_g","_i","attempts","interval","addressField","address","getAddressFromGeolocation","url","updateGeolocationDataProperties"],"mappings":"wZAUA,MAAMA,UAA4BC,CAAU,CAK1C,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EALFC,EAAA,kBACAA,EAAA,yBACAA,EAAA,qBAIN,KAAK,UAAY,GACjB,KAAK,iBAAmB,GACxB,KAAK,aAAe,KAEpB,KAAK,iBAAiB,CACxB,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,YAAa,KAAK,GAAG,cACnB,sCACF,EACA,aAAc,KAAK,GAAG,cACpB,+CACF,EACA,cAAe,KAAK,GAAG,cACrB,wCACF,CAAA,CAEJ,CAEA,cAAe,UACZC,EAAA,KAAK,IAAI,cAAT,MAAAA,EAA0C,iBACzC,SACA,KAAK,oBAAoB,KAAK,IAAI,IAGnCC,EAAA,KAAK,IAAI,eAAT,MAAAA,EAA4C,iBAC3C,QACA,KAAK,kBAAkB,KAAK,IAAI,GAG3B,OAAA,iBACLC,EAAgB,UAChB,KAAK,gBAAgB,KAAK,IAAI,CAAA,CAElC,CAEA,kBAAkBC,EAAU,CAC1B,MAAMC,EAAQD,EAAE,OAEf,OAA8B,UAAU,KAAK,CAC5C,MAAO,YACP,eAAgB,YAChB,aAAc,SACd,YAAa,SAAA,CACd,EAEGC,EAAM,MAAM,OAAS,EACvB,KAAK,UAAY,GAEbA,EAAM,QAAU,KAAK,iBACvB,KAAK,UAAY,GAEjB,KAAK,UAAY,GAIrB,KAAK,mBAAmB,CAC1B,CAEA,gBAAgBD,EAAoB,SAC5B,MAAAE,EAAMF,EAAE,OAAO,IACpB,OAA8B,UAAU,KAAK,CAC5C,iBAAkB,CAChB,UAAUH,EAAAM,EAAkC,IAAlC,MAAAN,EAAqC,KAC3CC,EAAAK,MAAA,YAAAL,EAAqC,IACrC,KACJ,aAAcI,CAChB,EACA,MAAO,eACP,eAAgB,oBAChB,YAAa,GACb,YAAa,MAAA,CACd,CACH,CAEA,oBAAqB,CACf,KAAK,UACN,KAAK,IAAI,cAAoC,SAAW,GAExD,KAAK,IAAI,cAAoC,SAAW,EAE7D,CAEA,cAAcE,EAA+C,uBAErD,MAAAC,EAAQD,EAAa,WAGrBE,GAAMR,GAAAD,EAAAQ,EAAM,qBAAN,YAAAR,EAA0B,KAAkBU,GAC/CA,EAAU,MAAM,SAAS,aAAa,KADnC,YAAAT,EAER,UAGEU,GAAUC,GAAAC,EAAAL,EAAM,qBAAN,YAAAK,EAA0B,KAAkBH,GACnDA,EAAU,MAAM,SAAS,SAAS,KAD3B,YAAAE,EAEZ,WAIEE,GAAWC,GAAAC,EAAAR,EAAM,WAAN,YAAAQ,EAAgB,WAAhB,YAAAD,EAA0B,MACrCE,GAAYC,GAAAC,EAAAX,EAAM,WAAN,YAAAW,EAAgB,WAAhB,YAAAD,EAA0B,MAE5C,KAAK,aAAe,CAClB,IAAAT,EACA,QAAAE,EACA,SAAAG,EACA,UAAAG,EACA,QAAST,EAAM,iBAAA,EAGbA,EAAM,UACR,KAAK,UAAY,GACZ,KAAA,kBAAoBY,EAAA,KAAK,IAAI,eAAT,YAAAA,EACrB,OAEJ,KAAK,UAAY,GAGlB,OAA8B,UAAU,KAAK,CAC5C,MAAO,YACP,eAAgB,YAChB,aAAc,QACd,YAAa,SAAA,CACd,EACD,KAAK,mBAAmB,CAC1B,CAEA,kBAAmB,OACb,IAAApB,EAAA,OAAO,SAAP,MAAAA,EAAe,KACjB,KAAK,qBAAqB,MACrB,CAEL,IAAIqB,EAAW,EACT,MAAAC,EAAW,YAAY,IAAM,OACjCD,KACIrB,EAAA,OAAO,SAAP,MAAAA,EAAe,MACjB,KAAK,qBAAqB,EAC1B,cAAcsB,CAAQ,GACbD,GAAY,IACrB,cAAcC,CAAQ,GAEvB,GAAG,EAEV,CAEA,sBAAuB,CACf,MAAAC,EAAe,KAAK,IAAI,aAExBhB,EAAe,IAAI,OAAO,OAAO,KAAK,OAAO,aACjDgB,EACA,CACE,sBAAuB,CAAE,QAAS,CAAC,KAAM,IAAI,CAAE,EAC/C,OAAQ,CAAC,oBAAqB,qBAAsB,UAAU,EAC9D,MAAO,CAAC,cAAe,OAAO,CAChC,CAAA,EAUE,GALShB,EAAA,YACX,gBACA,KAAK,cAAc,KAAK,KAAMA,CAAY,CAAA,EAGxC,KAAK,GAAG,QAAQ,gBAAiB,CACnC,MAAMiB,EAAUC,IACZD,IACD,KAAK,IAAI,aAAkC,MAAQA,EACpD,KAAK,UAAY,GACjB,KAAK,iBAAmBA,EACxB,KAAK,mBAAmB,GAG9B,CAEA,oBAAoBrB,EAAU,OAG5B,GAFAA,EAAE,eAAe,EAEb,KAAK,UAAW,CACZ,MAAAuB,EAAM,KAAK,GAAG,QAAQ,IACxB,KAAK,cAAcC,EAAgC,KAAK,YAAY,EACxE,OAAO,SAAS,KAAO,GAAGD,KACvB1B,EAAA,KAAK,IAAI,eAAT,YAAAA,EAA4C,QAGnD,CACF"}