From a34e594832f5a74dae2c9a14508e9ee6de49d1b2 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Thu, 2 May 2024 08:53:11 -0400
Subject: [PATCH] Checkpoint

---
 .../textbox-question/textbox-question.vue     | 26 +-----
 .../address-questions/address-questions.vue   | 41 ++++-----
 src/layouts/address-lookup/address-lookup.vue |  3 +-
 .../customer-questions/customer-questions.vue | 92 ++++++++-----------
 4 files changed, 59 insertions(+), 103 deletions(-)

diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 23858f074..c514a0f81 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -45,8 +45,7 @@
                 @blur="handleChange"
                 :maxlength="maxLength ? maxLength : '999'"
                 @focus="$emit('focus', $event.target.value)"
-                @keydown="keyDownHandler"
-                @animationstart="checkAnimation" />
+                @keydown="keyDownHandler" />
             <button
                 v-if="includeSearchIcon"
                 type="submit"
@@ -131,7 +130,6 @@ export default {
             default: false,
             isRequired: false,
         },
-        autofilled: Boolean
     },
     setup(props) {
         const uuid = uuidv4();
@@ -176,30 +174,10 @@ export default {
     },
     methods: {
         focusSearchInput() {
-            //Focus cursor in input when search icon is clicked
+            // Focus cursor in input when search icon is clicked
             const field = document.querySelector("input");
             field.focus();
         },
-        checkAnimation(e) {
-            // if(e.animationName == "onAutoFillStart")
-            // {
-            //     console.log("onAutoFillStart")
-            //     //this.autofilled = true;
-            // }
-            if(e.animationName == "onAutoFillSelected")
-            {
-                //console.log("onAutoFillSelected")
-                this.$emit("autofilled", { inputId: this.inputId, autofilled: true});
-                
-            }
-            else if(e.animationName == "onAutoFillCancel")
-            {
-                //console.log("onAutoFillCancel")
-                this.$emit("autofilled", { inputId: this.inputId, autofilled: false});
-                
-            }
-
-        },       
         async imageChanged(e) {
             let file = e.target.files[0];
 
diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue
index 50dc649f4..839981b27 100644
--- a/src/fmg-components/address-questions/address-questions.vue
+++ b/src/fmg-components/address-questions/address-questions.vue
@@ -12,8 +12,7 @@
                     aria-haspopup=""
                     hasIcon
                     validationRules="street-address-required"
-                    @keydown.enter.prevent                  
-                    />
+                    @keydown.enter.prevent />
             </div>
         </div>
         <transition name="fade" mode="out-in">
@@ -26,8 +25,7 @@
                         customInputId="apartmentNumberOrBusinessName"
                         cmsWidgetName="ApartmentNumberOrBusinessNameQuestionWidget"
                         v-model="addressModel.apartmentNumberOrBusinessName"
-                        ref="apartmentNumberOrBusinessName" 
-                        />
+                        ref="apartmentNumberOrBusinessName" />
                 </div>
             </div>
         </transition>
@@ -39,8 +37,7 @@
                         cmsWidgetName="CityQuestionWidget"
                         v-model="addressModel.city"
                         ref="city"
-                        validationRules="city-required" 
-                        />
+                        validationRules="city-required" />
                 </div>
             </div>
         </transition>
@@ -53,8 +50,7 @@
                         v-model="addressModel.state"
                         ref="state"
                         :options="stateOptions"
-                        validationRules="state-required" 
-                        />
+                        validationRules="state-required" />
                 </div>
                 <div class="col">
                     <textboxQuestion
@@ -63,8 +59,7 @@
                         v-model="addressModel.zipCode"
                         ref="zipCode"
                         mask="#####"
-                        validationRules="zip-code-required|zip-code-format" 
-                        />
+                        validationRules="zip-code-required|zip-code-format" />
                 </div>
             </div>
         </transition>
@@ -124,7 +119,6 @@ export default {
             type: Boolean,
             default: false,
         },
-        //autofilled: Boolean,
     },
     data() {
         return {
@@ -228,13 +222,6 @@ export default {
                 this.initializeAutocomplete();
             });
         },
-        setAutofilled(value) {
-            console.log(value)
-            if (value.autofilled) {
-                this.showAddressFields = true;
-            }
-            this.$emit("autofilled", value);
-        },
         initializeAutocomplete() {
             // Initialize the Google Places Autocomplete
             this.autocomplete = new window.google.maps.places.Autocomplete(this.addressField1, {
@@ -264,6 +251,11 @@ export default {
 
                 // Unfortunately this is the only place we can set the autocomplete attribute without the
                 // Google Places object resetting it to "off" which does nothing to prevent browser autofill
+                //this.addressField1.setAttribute("autocomplete", "do-not-autofill");
+            });
+
+            // When the user starts entering text into Street Address textbox disable autofill
+            this.addressField1.addEventListener("input", (e) => {
                 this.addressField1.setAttribute("autocomplete", "do-not-autofill");
             });
 
@@ -411,6 +403,15 @@ export default {
         if (!this.showAddressFields) {
             this.loadGooglePlacesAutocompleteScript();
         }
+
+        const element = document.getElementsByClassName("address-questions")[0];
+        element.addEventListener("change", (e) => {
+            const inputs = element.querySelectorAll("input:-internal-autofill-selected");
+            this.showAddressFields = inputs.length > 0;
+            // if (this.showAddressFields) {
+            //     this.unloadAutocomplete();
+            // }
+        });
     },
     unmounted() {
         this.unloadAutocomplete();
@@ -448,10 +449,8 @@ export default {
                     );
                 }
             },
+            deep: true,
         },
-        autofilled(value) {
-            console.log(value)
-        }
     },
     components: {
         textboxQuestion,
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 807bdc5ce..68a9e001c 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -5,7 +5,7 @@
         ref="theForm"
         v-slot="{ meta }"
         autocomplete="off">
-        <div class="container-fluid page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles" id="address-lookup">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -25,7 +25,6 @@
                         v-model="customerQuestions"
                         :validationRules="EmailValidationRules"
                         :isEmailOptional="IsEmailOptional" />
-
                     <alert
                         ref="alertVinNotFound"
                         v-if="displayVinNotFoundAlert"
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
index 49ebf9258..906875751 100644
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue
@@ -1,43 +1,42 @@
 <template>
-    <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
-    <div class="row mb-4">
-        <div class="col">
-            <textboxQuestion
-                cmsWidgetName="FirstNameQuestionWidget"
-                v-model="customerModel.firstName"
-                ref="firstName"
-                customInputId="firstName"
-                validationRules="first-name-required"
-                @autofilled="setAutofilled"/>
+    <div class="customer-questions">
+        <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
+        <div class="row mb-4">
+            <div class="col">
+                <textboxQuestion
+                    cmsWidgetName="FirstNameQuestionWidget"
+                    v-model="customerModel.firstName"
+                    ref="firstName"
+                    customInputId="firstName"
+                    validationRules="first-name-required" />
+            </div>
         </div>
-    </div>
-    <div class="row mb-4">
-        <div class="col">
-            <textboxQuestion
-                cmsWidgetName="LastNameQuestionWidget"
-                v-model="customerModel.lastName"
-                ref="lastName"
-                customInputId="lastName"
-                validationRules="last-name-required" 
-                @autofilled="setAutofilled"/>
+        <div class="row mb-4">
+            <div class="col">
+                <textboxQuestion
+                    cmsWidgetName="LastNameQuestionWidget"
+                    v-model="customerModel.lastName"
+                    ref="lastName"
+                    customInputId="lastName"
+                    validationRules="last-name-required" />
+            </div>
         </div>
-    </div>
-    <div class="row mt-4">
-        <div class="col">
-            <textboxQuestion
-                cmsWidgetName="EmailAddressQuestionWidget"
-                v-model="customerModel.emailAddress"
-                ref="emailAddress"
-                customInputId="emailAddress"
-                :isRequired="!isEmailOptional"
-                :validationRules="validationRules"
-                :addOptionalText="isEmailOptional"
-                :autofilled="autofilled" />
+        <div class="row mt-4">
+            <div class="col">
+                <textboxQuestion
+                    cmsWidgetName="EmailAddressQuestionWidget"
+                    v-model="customerModel.emailAddress"
+                    ref="emailAddress"
+                    customInputId="emailAddress"
+                    :isRequired="!isEmailOptional"
+                    :validationRules="validationRules"
+                    :addOptionalText="isEmailOptional" />
+            </div>
         </div>
-    </div>
-    <div class="row mb-0">
-        <div class="col">
-            <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
+        <div class="row mb-0">
+            <div class="col">
+                <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
+            </div>
         </div>
     </div>
 </template>
@@ -86,25 +85,6 @@ export default {
         validationRules: String,
         isEmailOptional: Boolean,
     },
-    data() {
-        return {
-            autofilled: false,
-        }
-    },
-    methods: {
-        setAutofilled(value) {
-            console.log(value)
-            if (value.autofilled === true) {
-                this.autofilled = true;
-                console.log("autofilled")
-            }
-            else {
-                this.autofilled = false;
-                console.log("not autofilled")
-            }
-            
-        }
-    },
     computed: {
         customerModel: {
             get: function () {
@@ -114,7 +94,7 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
-        autofilled(value) {}    },
+    },
     components: {
         addressQuestions,
         textboxQuestion,