{"version":3,"file":"autocomplete-93effac2.js","sources":["../../../../src/scripts/react-components/shingle-detail-masthead/autocomplete.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport {\n  COOKIE_NAMES,\n  GeolocationType,\n  getUserProfile,\n  secureStorage\n} from '../../helpers/global-storage';\nimport { personalizeAddressData } from '../../helpers/personalize';\nimport { ExtendedWindowType } from '../../helpers/global-types';\n\ntype AutocompleteProp = {\n  label: string;\n  name: string;\n  placeholder: string;\n  tooltip?: string;\n  type: string;\n  value: string;\n  setValue: React.Dispatch<\n    React.SetStateAction<{ address: string; zip: string; country: string }>\n  >;\n  error: boolean;\n  setError: React.Dispatch<React.SetStateAction<boolean>>;\n  errorLabel: string;\n  clearLabel: string;\n  countries: string[];\n};\n\nconst Autocomplete: React.FC<AutocompleteProp> = ({\n  label,\n  name,\n  placeholder,\n  tooltip,\n  type,\n  value,\n  setValue,\n  errorLabel,\n  clearLabel,\n  error,\n  setError,\n  countries\n}) => {\n  const autocompleteRef = useRef<google.maps.places.Autocomplete | null>(null);\n  const autocompleteInput = useRef(null);\n  const [touched, setTouched] = useState(false);\n  const [showClearButton, setShowClearButton] = useState(false);\n  const options = {\n    componentRestrictions: { country: countries },\n    fields: ['formatted_address', 'address_components', 'geometry'],\n    types: ['postal_code', 'route']\n  };\n\n  useEffect(() => {\n    if (autocompleteInput.current) {\n      autocompleteRef.current = new window.google.maps.places.Autocomplete(\n        autocompleteInput.current as HTMLInputElement,\n        options\n      );\n    }\n\n    if (autocompleteRef.current) {\n      autocompleteRef.current.addListener('place_changed', async function () {\n        const place = await (\n          autocompleteRef.current as google.maps.places.Autocomplete\n        ).getPlace();\n\n        const _place = place.address_components as {\n          types: string[];\n          long_name: string;\n          short_name: string;\n          geometry: object;\n        }[];\n\n        const _location = place.geometry?.location as {\n          lat: () => number;\n          lng: () => number;\n        };\n\n        const zipCode = _place.find(item => item.types.includes('postal_code'));\n        if (!zipCode) {\n          setError(true);\n          return;\n        }\n        const country = _place.find(item => item.types.includes('country'));\n        const streetNumber = _place.find(item =>\n          item.types.includes('street_number')\n        );\n        const street = _place.find(item => item.types.includes('route'));\n        const state = _place.find(item =>\n          item.types.includes('administrative_area_level_1')\n        );\n        const city = _place.find(item => item.types.includes('locality'));\n        const latitude = _location.lat();\n        const longitude = _location.lng();\n\n        let queryCountry = country?.short_name;\n        let queryZip = zipCode?.long_name?.trim();\n\n        if (queryCountry?.toUpperCase() === 'US') {\n          queryCountry = 'USA';\n        }\n\n        if (queryCountry?.toUpperCase() === 'CA') {\n          queryCountry = 'CAN';\n\n          //remove white space from postal code\n          queryZip = queryZip?.replace(/\\s/g, '');\n        }\n\n        setValue(prev => ({\n          ...prev,\n          [name]: place.formatted_address ? place.formatted_address : '',\n          zip: queryZip ? queryZip : '',\n          country: queryCountry ? queryCountry : ''\n        }));\n        if (zipCode) {\n          setError(false);\n        }\n\n        const geolocationData: GeolocationType = {\n          latitude,\n          longitude,\n          zip: zipCode?.long_name as string,\n          country: country?.short_name as string,\n          address: place.formatted_address\n        };\n\n        secureStorage.set(\n          COOKIE_NAMES.geolocation,\n          JSON.stringify(geolocationData)\n        );\n\n        (window as ExtendedWindowType).dataLayer.push({\n          event_attributes: {\n            zip_code: geolocationData.zip,\n            zip_code_country: geolocationData.country\n          },\n          event: 'zip_code',\n          event_category: 'geo info',\n          event_action: 'zip code updated'\n        });\n\n        const fullStreet = `${streetNumber?.long_name} ${street?.long_name}`;\n\n        const sitecorePersonalizeAddress = {\n          Street: fullStreet.trim(),\n          City: city?.long_name,\n          State: state?.short_name,\n          Country: country?.short_name,\n          PostalCode: zipCode?.long_name,\n          Email: getUserProfile()?.email,\n          PartitionKey: new Date().getFullYear().toString(),\n          RowKey: new Date().getTime().toString()\n        };\n\n        const { Street, City, State, Country, PostalCode } =\n          sitecorePersonalizeAddress;\n\n        if (streetNumber && Street && City && State && Country && PostalCode) {\n          personalizeAddressData(sitecorePersonalizeAddress);\n        }\n\n        (window as ExtendedWindowType).dataLayer.push({\n          event_attributes: {},\n          event: 'typeahead',\n          event_category: 'typeahead',\n          event_action: 'click',\n          event_label: 'address'\n        });\n      });\n    }\n  }, []);\n\n  useEffect(() => {\n    if (\n      autocompleteInput.current &&\n      value &&\n      value !== (autocompleteInput.current as HTMLInputElement)?.value\n    ) {\n      (autocompleteInput.current as HTMLInputElement).value = value;\n    }\n  }, [value, autocompleteInput.current]);\n\n  const handleClear = () => {\n    if (autocompleteInput.current) {\n      (autocompleteInput.current as HTMLInputElement).value = '';\n    }\n    setValue(prev => ({\n      ...prev,\n      [name]: '',\n      zip: '',\n      country: ''\n    }));\n\n    setShowClearButton(false);\n  };\n\n  const handleChange = () => {\n    if (autocompleteInput.current) {\n      const input = (autocompleteInput.current as HTMLInputElement).value;\n      if (input.length > 0) {\n        setShowClearButton(true);\n      } else {\n        setShowClearButton(false);\n      }\n    }\n  };\n\n  const handleTypeAheadViewed = () => {\n    const global = (window as ExtendedWindowType).dataLayer;\n    const viewed = {\n      event_attributes: {},\n      event: 'typeahead',\n      event_category: 'typeahead',\n      event_action: 'viewed',\n      event_label: 'address'\n    };\n    if (global.length > 0) {\n      if (global[global.length - 1].event_action !== 'viewed') {\n        global.push(viewed);\n      }\n    } else {\n      global.push(viewed);\n    }\n  };\n\n  return (\n    <div\n      className={`field field--autocomplete${tooltip ? ' field--tooltip' : ''}${\n        error ? ' field--error' : ''\n      }\n      `}\n    >\n      <div className=\"field\">\n        <label\n          className=\"field__label\"\n          htmlFor={label.trim().replace(' ', '_').toLowerCase()}\n        >\n          {label}\n          {tooltip ? (\n            <button className=\"field__tooltip\" title=\"tooltip\">\n              <div className=\"field__tooltip-box\">{tooltip}</div>\n            </button>\n          ) : null}\n        </label>\n        <input\n          className=\"field__input\"\n          type={type}\n          ref={autocompleteInput}\n          id={label.trim().replace(' ', '_').toLowerCase()}\n          name={name}\n          placeholder={placeholder}\n          onInput={() => {\n            touched && setError(true);\n          }}\n          onChange={() => {\n            touched && setError(true);\n            handleChange();\n            handleTypeAheadViewed();\n          }}\n          onBlur={() => setTouched(true)}\n        />\n\n        {(value?.length > 0 || showClearButton) && (\n          <button\n            className=\"field__input-close header__input-close\"\n            title={clearLabel || 'clear'}\n            aria-label={clearLabel || 'clear'}\n            onClick={handleClear}\n          ></button>\n        )}\n      </div>\n      {error && <span className=\"field__error-msg\">{errorLabel}</span>}\n    </div>\n  );\n};\n\nexport default Autocomplete;\n"],"names":["Autocomplete","label","name","placeholder","tooltip","type","value","setValue","errorLabel","clearLabel","error","setError","countries","autocompleteRef","useRef","autocompleteInput","touched","setTouched","useState","showClearButton","setShowClearButton","options","useEffect","place","_place","_location","_a","zipCode","item","country","streetNumber","street","state","city","latitude","longitude","queryCountry","queryZip","_b","prev","geolocationData","secureStorage","COOKIE_NAMES","sitecorePersonalizeAddress","_c","getUserProfile","Street","City","State","Country","PostalCode","personalizeAddressData","handleClear","handleChange","handleTypeAheadViewed","global","viewed","React"],"mappings":"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"}