From 02e6fdb335f2133b2a14f4760c2d765714b1e65e Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 3 Mar 2022 09:28:11 -0500
Subject: [PATCH] Now dynamically retrieving the alert headers and text from
 CMS, also now retrieving Places API key from env variables

---
 azure-pipelines.yml                           |  1 +
 .../dropdown-question/dropdown-question.vue   |  4 ++-
 src/constants/application-config.js           |  1 +
 src/layouts/address-lookup/address-lookup.vue |  5 +++
 .../address-questions/address-questions.vue   | 36 ++++++++++++-------
 .../customer-questions/customer-questions.vue |  7 ++--
 vue.config.js                                 |  3 ++
 vue.release.config.js                         |  1 +
 8 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index a358168d4..ba2e359dc 100644
--- a/azure-pipelines.yml
+++ b/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)
\ No newline at end of file
diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index 8a29eb873..49b8d2b00 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/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>
 
diff --git a/src/constants/application-config.js b/src/constants/application-config.js
index 4b80d25d1..9c90aadbc 100644
--- a/src/constants/application-config.js
+++ b/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 };
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 924d6836b..097d35c0e 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/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(){
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 16b030928..1abd46980 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/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."
-        alertCopy="We've selected the closest location match. Please revise as needed."
+        :alertHeadline="alertHeadlineVerificationWarning"
+        :alertCopy="alertCopyVerificationWarning"
         v-bind:isDismissible="false"
     />
-    <alert v-show="displayNoMatchWarning"
+    <alert ref="alertNoMatchWarning" v-show="displayNoMatchWarning"
         alertClass="alert-warning"
-        alertHeadline="Please verify your address."
-        alertCopy="We were unable to find a location match. Please re-enter your street address."
+        :alertHeadline="alertHeadlineNoMatchWarning"
+        :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 = "AIzaSyBji_2ApAj2vE_XNGyV-LaUEKrmuElpJ1w"; // Dev and above
+        let apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
+        // 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;
                         }
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
index ee63ce763..d0c767242 100644
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/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: {
diff --git a/vue.config.js b/vue.config.js
index 316656ed1..25494f865 100644
--- a/vue.config.js
+++ b/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",
diff --git a/vue.release.config.js b/vue.release.config.js
index 43fffb47f..0c470ffe4 100644
--- a/vue.release.config.js
+++ b/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",