DigitalConsumer.FixMyGlass/src/layouts/address-poc/address-poc.vue

<template>
  <div class="container-fluid container-shadow p-2 rounded-3">
    <div class="row my-3">
      <div class="col">
        <vehicleBanner ref="vehicleBanner"  :displayGenericVehicleImage=true />
      </div>
    </div>
    <form>
      <div class="row my-4">
        <div class="col">
          <label for="autocomplete">Street address</label>
          <input ref="autocomplete" 
              id="autocomplete"
              placeholder="Search" 
              class="form-control search-location"
              type="text" 
              autocomplete="off" />
        </div>
      </div>
    </form>
    <form>
      <div v-show="showAddressFields" class="row my-4">
        <div class="col">
          <label for="city">City</label>
          <input ref="city" 
              id="city"
              class="form-control"
              type="text" 
              autocomplete="off" />
        </div>
      </div>
    </form> 
    <form>
      <div v-show="showAddressFields" class="row my-4">
        <div class="col-6">
          <label for="state">State</label>
          <input ref="state" 
              id="state"
              class="form-control"
              type="text" 
              autocomplete="off" />
        </div>
        <div class="col-6">
          <label for="zip">Zip</label>
          <input ref="zip" 
              id="zip"
              class="form-control"
              type="text" 
              autocomplete="off" />
        </div>      
      </div> 
    </form>
    <div v-show="displayVerificationWarning" class="row my-4">
      <div class="col">
        <span style="color: red;">An accurate match may not have have been located. Please verify your address before continuing</span>
      </div>
    </div>
    <div v-show="displayNoMatchWarning" class="row my-4">
      <div class="col">
        <span style="color: red;">An accurate match could not be located. Please re-enter your street address before continuing</span>
      </div>
    </div>      
    <div class="row my-4">
      <div class="col">
        <label for="firstName">First name</label>
        <input ref="firstName" 
            id="firstName"
            class="form-control"
            type="text" 
            autocomplete="off" />
      </div>
    </div> 
    <div class="row my-4">
      <div class="col">
        <label for="lastName">Last name</label>
        <input ref="lastName" 
            id="lastName"
            class="form-control"
            type="text" 
            autocomplete="off" />
      </div>
    </div>
    <div class="row my-4">
      <div class="col">
        <label for="email">Email address</label>
        <input ref="email" 
            id="email"
            class="form-control"
            type="text" 
            autocomplete="off" />
      </div>
    </div>            
  </div>

</template>

<script>
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
export default {
  name: "App",
  components: {
    vehicleBanner,
  },
  data() {
    return {
      showAddressFields: false,
      displayVerificationWarning: false,
      displayNoMatchWarning: false    
    };
  },
  mounted() {
    this.$refs.vehicleBanner.initializeComponent({
      GenericVehicleImage:
        "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
    });

    let addressField1 = document.getElementById("autocomplete");
    let self = this;

    //let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
    let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above

    this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
      .then(() => {

        // Script is loaded, initialize the autocomplete textbox
        self.autocomplete = new window.google.maps.places.Autocomplete(
          self.$refs.autocomplete,
          {
            componentRestrictions: { country: ["us"] },
            fields: ["address_components"],
            types: ["address"],
          }
        );

        self.autocomplete.addListener('place_changed', fillInAddress);
        
        addressField1.onblur = function() {
            var hover = document.querySelector(".pac-container .pac-item:hover");

            // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
            if (hover === null) {
                var item = document.querySelector(".pac-container .pac-item");
                if (item != null) {
                  var firstResult = item.textContent;
                  var geocoder = new window.google.maps.Geocoder();
                  geocoder.geocode({
                      address: firstResult
                  }, function (results, status) {
                      if (status === window.google.maps.GeocoderStatus.OK) {
                          fillInAddress(results[0]);
                          self.displayVerificationWarning = true;
                          self.displayNoMatchWarning = false;
                      }
                  });
                }
                else {
                  let city = document.querySelector("#city");
                  let state = document.querySelector("#state");
                  let zip = document.querySelector("#zip");   

                  city.value = "";
                  state.value = "";
                  zip.value = "";      

                  self.displayVerificationWarning = false;
                  self.displayNoMatchWarning = true;
                }

                
            }
        };

        function fillInAddress(place) {
          if (!place) {
              place = self.autocomplete.getPlace();
          }

          if (place && place.address_components) {
            let address1 = "";
            let city = document.querySelector("#city");
            let state = document.querySelector("#state");
            let zip = document.querySelector("#zip");
            self.showAddressFields = true;

            for (const component of place.address_components) {
              const componentType = component.types[0];

              switch (componentType) {
                case "street_number": {
                  address1 = `${component.long_name} ${address1}`;
                  break;
                }

                case "route": {
                  address1 += component.short_name;
                  break;
                }
                case "locality": {
                  city.value = component.long_name;
                  break;
                }
                case "administrative_area_level_1": {
                  state.value = component.short_name;
                  break;
                }
                case "postal_code": {
                  zip.value = component.long_name;
                  break;
                }

              }

              addressField1.value = address1;
              self.displayVerificationWarning = false;
              self.displayNoMatchWarning = false;
            }   
          } 
          else {
            self.displayVerificationWarning = true;
            self.displayNoMatchWarning = false;
          }       
        }
      })
      .catch(() => {
        // Failed to fetch script
        console.log("Unable to load Google Places API script");
      });


  },
};
</script>