Merge branch 'develop' into feature/CSR-591

src/common-components/loading-modal/loading-modal.vue

@@ -1,9 +1,9 @@
 <template>
-  <div v-show="isModalVisible" class="loading-modal-backdrop">
+  <div v-if="isModalVisible" class="loading-modal-backdrop">
     <div class="loading-modal">
       <section class="loading-modal-body">
         <div class="modal-icon-container text-center">
-            <img class="" alt="Loading" src="@/assets/img/FMGTransitionAnimation.svg">
+            <img alt="Loading" src="@/assets/img/FMGTransitionAnimation.svg">
         </div>
        </section>
     </div>

src/helpers/damage-helper.js

@@ -4,10 +4,17 @@ import { storeActions } from "@/constants/store-actions";
 
 export function getDamageString() {
     const damageLocations = store.getters.damage.glassToReplace;
+    const isRepair = store.getters.damage.isRepair;
+
     let returnString;
     if (!damageLocations) {
       return;
     }
+    // If it's a repair it's always a windshield.
+    if(isRepair){
+      return "windshield"
+    }
+
     if (damageLocations.length > 1) {
       returnString = "match"
     } else {

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

@@ -372,13 +372,14 @@ export default {
 			return text;
 		},
 		AlertMatchedDifferentVehicleBody(){
-			let content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText");
-			content = content.replaceAll("{custom:glassText}", getDamageString());
-			const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-			const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;   
 
-			content = content.replaceAll("{custom:vinYmmFound}", vinYmmFound); 
+			const vinYmmFound = `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`;
-			content = content.replaceAll("{custom:vinYmmExpected}", vinYmmExpected); 			
+			const vinYmmExpected = `${store.getters.vehicle.year} ${store.getters.vehicle.make} ${store.getters.vehicle.model}`;
+
+			const content = this.getCmsContent("AlertMatchedDifferentVehicleWidget", "BodyText")
+				.replaceAll("{custom:glassText}", getDamageString())
+				.replaceAll("{custom:vinYmmFound}", vinYmmFound)
+				.replaceAll("{custom:vinYmmExpected}", vinYmmExpected);			
 
 			return content;
 		},		

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;
     }