Merge pull request #1325 from Safelite/feature/CSR-1418.02

Feature/csr 1418.02

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

@@ -26,7 +26,7 @@
                 {{ value }}
             </option>
         </select>
-        <div v-show="errorMessage" class="row mt-2 form-test-error">
+        <div v-show="errorMessage && this.disableValidation" class="row mt-2 form-test-error">
             <span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span>
         </div>
     </div>
@@ -56,6 +56,11 @@ export default {
             required: false,
             default: false,
         },
+        disableValidationIfElementDisabled: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
     },
     setup(props) {
         const uuid = uuidv4();
@@ -110,6 +115,9 @@ export default {
                 this.$emit("update:modelValue", newValue);
             },
         },
+        disableValidation() {
+            return this.disableValidationIfElementDisabled ? !this.isDisabled : true;
+        },
     },
     watch: {
         selectedOption(newValue) {

src/layouts/vehicle/vehicle-question/vehicle-question.vue

@@ -1,5 +1,9 @@
 <template>
-    <dropdownQuestion disableAutoFill v-model="selectedValue" :valueAsKey="true" />
+    <dropdownQuestion
+        disableAutoFill
+        v-model="selectedValue"
+        :valueAsKey="true"
+        :disableValidationIfElementDisabled="true" />
 </template>
 
 <script>

src/layouts/vehicle/vehicle.vue

@@ -112,17 +112,17 @@ export default {
             selectedMake: this.selectedMakefromStore(),
             selectedModel: this.selectedModelfromStore(),
             selectedStyle: this.selectedStylefromStore(),
-            carId: null,
+            carId: this.getCarIdFromStore(),
             category: null,
-            imageUrl: null,
+            imageUrl: this.getImagefromStore(),
             imageVifNumber: null,
             imageVifColor: null,
             yearOptions: [],
             makeOptions: [],
             modelOptions: [],
             styleOptions: [],
-            displayGeneric: this.displayGenericFromStore(),
+            //flag to check getVehicle action in progress
-            unmatchedVehicleIcon: false,
+            vehicleInProgress: false,
         };
     },
 
@@ -242,6 +242,9 @@ export default {
                 }
             } else {
                 this.makeOptions = [];
+                this.selectedMake = null;
+                this.selectedModel = null;
+                this.selectedStyle = null;
             }
         },
         async selectedMake(make) {
@@ -255,6 +258,8 @@ export default {
                 }
             } else {
                 this.modelOptions = [];
+                this.selectedModel = null;
+                this.selectedStyle = null;
             }
         },
         async selectedModel(model) {
@@ -271,32 +276,41 @@ export default {
                 }
             } else {
                 this.styleOptions = [];
+                this.selectedStyle = null;
             }
         },
         async selectedStyle(style) {
             if (style) {
+                this.vehicleInProgress = true;
                 const result = await this.getVehicle(
                     this.selectedYear,
                     this.selectedMake,
                     this.selectedModel,
                     style
                 );
+                this.vehicleInProgress = false;
                 this.carId = result?.data.carId;
                 this.category = result?.data.category;
                 this.imageUrl = result?.data.imageUrl;
                 this.imageVifNumber = result?.data.imageVifNumber;
                 this.imageVifColor = result?.data.imageVifColor;
-                if (this.imageUrl == null) {
-                    this.displayGeneric = false;
-                    this.unmatchedVehicleIcon = true;
-                } else this.unmatchedVehicleIcon = false;
             } else {
                 this.imageUrl = null;
-                this.displayGeneric = true;
             }
         },
     },
-
+    computed: {
+        unmatchedVehicleIcon() {
+            if (this.imageUrl == null) return true;
+            else return false;
+        },
+        displayGeneric() {
+            if (!this.selectedStyle) return true;
+            else if (this.vehicleInProgress) return true;
+            else if (this.imageUrl == null && this.carId !== null) return false;
+            else return true;
+        },
+    },
     methods: {
         getVehicle(year, make, model, style) {
             return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, {
@@ -306,15 +320,6 @@ export default {
                 style: style,
             });
         },
-        displayGenericFromStore() {
-            if (store.getters.vehicle.imageUrl !== null) return false;
-            else if (
-                store.getters.vehicle.imageUrl === null &&
-                store.getters.vehicle.carId !== null
-            )
-                return false;
-            else return true;
-        },
         arePagePrerequisitesValid() {
             return true;
         },
@@ -377,6 +382,12 @@ export default {
                 model: model,
             });
         },
+        getImagefromStore() {
+            return store.getters.vehicle.imageUrl;
+        },
+        getCarIdFromStore() {
+            return store.getters.vehicle.carId;
+        },
     },
 
     components: {