Merge pull request #131 from Safelite/feature/CSR-231

Feature/csr 231

jest.config.js

@@ -12,6 +12,7 @@ module.exports = {
     "!src/router/**/*.js",
     "!src/helpers/unit-test-helper.js",
     "!src/layouts/component-test/component-test.vue",
+    "!src/layouts/address-poc/address-poc.vue"
   ], //! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {

package.json

@@ -17,6 +17,7 @@
     "http-status-codes": "^2.1.4",
     "jest-junit": "^13.0.0",
     "vue": "^3.0.0",
+    "vue-plugin-load-script": "^2.1.0",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",
     "vuex-persistedstate": "^4.1.0"

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

@@ -0,0 +1,102 @@
+<template>
+  <div class="container-fluid container-shadow p-2 rounded-3">
+    <div class="row my-3">
+      <div class="col">
+        <vehicleBanner
+          vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
+        />
+      </div>
+    </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" />
+      </div>
+    </div>          
+  </div>  
+</template>
+
+<script>
+
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+export default {
+  name: "App",
+  components: {
+    vehicleBanner
+    //FormField
+    //VueGoogleAutocomplete 
+  },
+
+  mounted() {
+    let self = this;
+
+    this.$loadScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo&libraries=places")
+      .then(() => {
+        // Script is loaded, do something
+        self.autocomplete = new window.google.maps.places.Autocomplete(
+          (self.$refs.autocomplete),
+          { 
+            componentRestrictions: { country: ["us"] },
+            fields: ["address_components"],
+            types: ['address'] 
+          }
+        );
+
+        self.autocomplete.addListener('place_changed', () => {
+          let place = self.autocomplete.getPlace();
+          let address1 = "";
+          let postcode = "";
+
+          let input = document.getElementById("autocomplete");
+
+          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":
+                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;
+          }      
+        }); 
+      })
+      .catch(() => {
+        // Failed to fetch script
+        console.log("Unable to load Google Places API script")
+      });
+  },
+
+};
+
+</script>

src/main.js

@@ -1,4 +1,5 @@
 import { createApp } from "vue";
+import LoadScript from "vue-plugin-load-script";
 import App from "./App.vue";
 import router from "./router";
 import store from "@/store";
@@ -10,7 +11,7 @@ const vueApp = createApp(App);
 
 vueApp.use(router);
 vueApp.use(store);
-
+vueApp.use(LoadScript);
 vueApp.mixin(baseMixin);
 
 vueApp.mount("#app");

src/router/index.js

@@ -3,6 +3,10 @@ import { storeActions } from "@/constants/store-actions.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import ComponentTest from "@/layouts/component-test/component-test.vue";
+
+import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
+import AddressPOC from "@/layouts/address-poc/address-poc.vue";
+
 import NotFound from "@/layouts/not-found/not-found.vue";
 import store from "@/store";
 
@@ -17,6 +21,16 @@ const routes = [
     name: "ComponentTest",
     component: ComponentTest,
   },
+  {
+    path: "/loader-demo", // This is a temporary route for testing.
+    name: "LoaderDemo",
+    component: LoaderDemo,
+  },
+  {
+    path: "/address-poc", // This is a temporary route for testing.
+    name: "AddressPOC",
+    component: AddressPOC,
+  },
   {
     path: "/",
     beforeEnter(to, from, next) {