Merge remote-tracking branch 'origin/develop' into feature/CSR-550

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

@@ -297,8 +297,10 @@ export default {
 				// if multiple cars were found
 				let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId);  
 				if (matchingCars.length === 1) {
-					// and one and only of them matches the car id entered
 					this.$refs.loadingModal.showModal();
+
+					// and one and only of them matches the car id entered
+					const matchingCar = matchingCars[0];					
 					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
 					navigateAfterSaveToHeritageFunnel(this.$route);
 				} else {

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

@@ -175,7 +175,7 @@ export default ({
 					);
 
 					// Standard place_changed event handling
-					autocomplete.addListener('place_changed', fillInAddress);
+					const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress);
 
 					// Wrapping the addressField1 element in the Google Address Autocomplete object 
 					// will cause "autocomplete='off'" which Chrome completely ignores. This event
@@ -225,7 +225,6 @@ export default ({
 						}
 
 						if (place && place.address_components) {
-							self.addressModel.streetAddress= "";
 							self.showAddressFields = true;
 
 							for (const component of place.address_components) {
@@ -262,7 +261,15 @@ export default ({
 						else {
 							self.displayVerificationWarning = true;
 							self.displayNoMatchWarning = false;
-						}       
+						}
+						
+						// after showing the address fields, disable the address autocomplete
+						window.google.maps.event.removeListener(autocompleteListener);
+						window.google.maps.event.clearInstanceListeners(autocomplete);
+						addressField1.onchange = null;
+						const pacContainer = document.querySelector(".pac-container");
+						pacContainer.remove();
+
 					}
 				})
 				.catch(() => {

src/styles/common-error-styles.scss

@@ -3,6 +3,7 @@ html {
     &.list-button,
     &.list-card,
     &.list-card.list-button {
+      border: none;
       color: $red;
       input[type=checkbox]:focus + label,
       input[type=radio]:focus + label {
@@ -13,10 +14,11 @@ html {
       }
       &:hover {
         box-shadow: 0px 0px 0px 4px $red-200;
-        border-radius: 10px;
+        border-radius: .5rem;
       }
       label {
         border: 1px solid $red;
+        border-radius: .5rem;
       }
       label:hover {
         box-shadow: 0px 0px 0px 4px $red-200;
@@ -51,12 +53,21 @@ html {
     }
     &.textbox-question,
     &.dropdown-question {
+      input:hover {
+        box-shadow: 0px 0px 0px 4px $red-200;
+        border-radius: .5rem;
+        border: 1px solid $red;
+      }
+      input:focus {
+        box-shadow: 0 0 0 2.5px $red;
+      }
       p {
         color: $red;
       }
       input,
       select {
-        border: 1px solid $red;
+        border: 1px solid transparent;
+        box-shadow: 0 0 0 1px $red;
         &:focus {
           border: 1px solid transparent;
         }
@@ -131,7 +142,6 @@ html {
     &.btn.btn-primary:hover,
     &.btn.btn-primary:focus,
     &.btn.btn-primary:focus-visible {
-      color: $gray !important;
       background: $gray-200;
       box-shadow: none;
     }