Now dynamically retrieving the alert headers and text from CMS, also now retrieving Places API key from env variables

azure-pipelines.yml

@@ -77,4 +77,5 @@ stages:
                         region: us-east-1
                     appDeployVariables:
                       __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
+                      __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                     cfDistributionId: $(cfDistributionId)

src/common-components/dropdown-question/dropdown-question.vue

@@ -12,7 +12,9 @@
         {{ value }}       
       </option>
     </select>
-    <p class="mt-1 mb-0">There has been an error!</p>
+    <p class="mt-2 form-test-error" v-if="!suppressError">
+      There has been an error!
+    </p>
   </div>    
 </template>
 

src/constants/application-config.js

@@ -1,5 +1,6 @@
 const applicationConfig = {
   CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY,
+  GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
 };
 
 export { applicationConfig };

src/layouts/address-lookup/address-lookup.vue

@@ -53,6 +53,11 @@ export default {
           vm.$refs.funnelFooter.initializeComponent(
             resultMap.cmsContent.FunnelFooterWidget
           );
+          vm.$refs.customerQuestions.initializeComponent([
+              resultMap.cmsContent.AlertVerificationWarningWidget,
+              resultMap.cmsContent.AlertNoMatchWarningWidget
+            ]
+          );
       });
   },
   data(){

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -7,7 +7,7 @@
         </div>
     </form>
     <transition name="fade" mode="out-in">
-        <div class="side-doors" v-if="showAddressFields" aria-live="polite">
+        <div class="address-fields" v-if="showAddressFields" aria-live="polite">
             <form>
                 <div class="row my-4">
                     <div class="col">
@@ -25,16 +25,16 @@
             </form>
         </div>
     </transition> 
-    <alert v-show="displayVerificationWarning"
+    <alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
         alertClass="alert-warning"
-        alertHeadline="Please verify your address."
+        :alertHeadline="alertHeadlineVerificationWarning"
-        alertCopy="We've selected the closest location match. Please revise as needed."
+        :alertCopy="alertCopyVerificationWarning"
         v-bind:isDismissible="false"
     />
-    <alert v-show="displayNoMatchWarning"
+    <alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
         alertClass="alert-warning"
-        alertHeadline="Please verify your address."
+        :alertHeadline="alertHeadlineNoMatchWarning"
-        alertCopy="We were unable to find a location match. Please re-enter your street address."
+        :alertCopy="alertCopyNoMatchWarning"
         v-bind:isDismissible="false"
     />
 </template>
@@ -43,6 +43,7 @@
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
 import alert from "@/ux-components/alert/alert";
+import { applicationConfig } from "@/constants/application-config.js";
 //import store from "@/store";
 
 export default ({
@@ -108,15 +109,24 @@ export default ({
                 'WV': 'West Virginia',
                 'WI': 'Wisconsin',
                 'WY': 'Wyoming',            
-            } 
+            },
+            alertHeadlineVerificationWarning: "",
+            alertCopyVerificationWarning: "",
+            alertHeadlineNoMatchWarning: "",
+            alertCopyNoMatchWarning: "",
         }
     },
     props: {
 
     },
     methods: {
-        initializeComponent(cmsContent, damageOptions){
+        initializeComponent(cmsContent) {
+          // assign alert texts to this component
+          this.alertHeadlineVerificationWarning = cmsContent[0].HeadlineText;
+          this.alertCopyVerificationWarning = cmsContent[0].BodyText;
 
+          this.alertHeadlineNoMatchWarning = cmsContent[1].HeadlineText;
+          this.alertCopyNoMatchWarning = cmsContent[1].BodyText;
         }
     },
     computed: {
@@ -127,8 +137,10 @@ export default ({
         let addressField1 = document.getElementById("autocomplete");
         let self = this;
 
-        let apiKey = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
+        let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
-        //let apiKey = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
+        // Lets keep these here for the moment for easy reference. Actual value comes from env variable.
+        //"AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"; // localhost:8080
+        //"AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
 
         this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`)
             .then(() => {
@@ -168,7 +180,7 @@ export default ({
                             self.city = "";
                             self.state = "";
                             self.zip = "";      
-
+                            self.showAddressFields = true;
                             self.displayVerificationWarning = false;
                             self.displayNoMatchWarning = true;
                         }

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -1,5 +1,5 @@
 <template>
-    <addressQuestions />
+    <addressQuestions ref="addressQuestions"/>
     <div class="row my-4">
       <div class="col">
         <textboxQuestion v-model="firstName" ref="firstName" inputId="firstName" labelText="First name" />
@@ -33,8 +33,9 @@ export default ({
         }
     },
     methods: {
-        initializeComponent(cmsContent, damageOptions){
+        initializeComponent(cmsContent){
-
+          // pass alert texts to addressQuestions component
+          this.$refs.addressQuestions.initializeComponent(cmsContent);
         }
     },
     computed: {

vue.config.js

@@ -1,6 +1,9 @@
 process.env.VUE_APP_CONSUMER_API_GATEWAY =
   "https://consumerapidev.safelite.com";
 
+process.env.VUE_APP_GOOGLE_PLACES_API_KEY = 
+  "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo"
+
 module.exports = {
   outputDir: "dist/fmg",
   publicPath: "/fmg",

vue.release.config.js

@@ -1,4 +1,5 @@
 process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__";
+process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__";
 
 module.exports = {
   outputDir: "dist/fmg",