Merge pull request #201 from Safelite/feature/CSR-231
Latest updates to POC for CSR-231
This commit is contained in:
Leah Schumann
GitHub
commit
112072b450
1 changed files with 168 additions and 51 deletions
|
|
@ -7,18 +7,79 @@
|
|||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<label for="autocomplete">Home address</label>
|
||||
<input
|
||||
ref="autocomplete"
|
||||
id="autocomplete"
|
||||
placeholder="Search"
|
||||
class="form-control search-location"
|
||||
onfocus="value = ''"
|
||||
type="text"
|
||||
/>
|
||||
<label for="autocomplete">Street address</label>
|
||||
<input ref="autocomplete"
|
||||
id="autocomplete"
|
||||
placeholder="Search"
|
||||
class="form-control search-location"
|
||||
type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
<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" />
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="zip">Zip</label>
|
||||
<input ref="zip"
|
||||
id="zip"
|
||||
class="form-control"
|
||||
type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
</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" />
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -28,21 +89,29 @@ export default {
|
|||
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;
|
||||
//AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo - localhost:8080
|
||||
//AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w
|
||||
this.$loadScript(
|
||||
"https://maps.googleapis.com/maps/api/js?key=AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w&libraries=places"
|
||||
)
|
||||
|
||||
//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, do something
|
||||
|
||||
// Script is loaded, initialize the autocomplete textbox
|
||||
self.autocomplete = new window.google.maps.places.Autocomplete(
|
||||
self.$refs.autocomplete,
|
||||
{
|
||||
|
|
@ -52,53 +121,101 @@ export default {
|
|||
}
|
||||
);
|
||||
|
||||
self.autocomplete.addListener("place_changed", () => {
|
||||
let place = self.autocomplete.getPlace();
|
||||
let address1 = "";
|
||||
let postcode = "";
|
||||
self.autocomplete.addListener('place_changed', fillInAddress);
|
||||
|
||||
addressField1.onblur = function() {
|
||||
var hover = document.querySelector(".pac-container .pac-item:hover");
|
||||
|
||||
let input = document.getElementById("autocomplete");
|
||||
// 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");
|
||||
|
||||
for (const component of place.address_components) {
|
||||
const componentType = component.types[0];
|
||||
city.value = "";
|
||||
state.value = "";
|
||||
zip.value = "";
|
||||
|
||||
switch (componentType) {
|
||||
case "street_number": {
|
||||
address1 = `${component.long_name} ${address1}`;
|
||||
break;
|
||||
}
|
||||
self.displayVerificationWarning = false;
|
||||
self.displayNoMatchWarning = true;
|
||||
}
|
||||
|
||||
case "route": {
|
||||
address1 += component.short_name;
|
||||
break;
|
||||
}
|
||||
case "locality":
|
||||
address1 += ", " + component.long_name;
|
||||
break;
|
||||
case "administrative_area_level_1": {
|
||||
address1 += ", " + component.short_name;
|
||||
break;
|
||||
}
|
||||
case "postal_code": {
|
||||
postcode = `${component.long_name}${postcode}`;
|
||||
break;
|
||||
}
|
||||
|
||||
case "postal_code_suffix": {
|
||||
postcode = `${postcode}-${component.long_name}`;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
let addressField1 = document.querySelector("#autocomplete");
|
||||
addressField1.value = address1 + " " + postcode;
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue