Merge pull request #1056 from Safelite/feature/richardson/INSR-7777

vin lookup updates

src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue

@@ -3,15 +3,20 @@
     id="vin-lookup-alerts-wrapper"
     :class="wrapperCssClass">
     <vehicleNotFoundAlert
-      v-if="isVehicleNotFoundVisible" />
+      v-if="isVehicleNotFoundVisible"
+      class="mt-5" />
     <twoIdenticalYMMVehicleAlert
-      v-if="isTwoIdenticalYMMVehicleFoundVisible" />
+      v-if="isTwoIdenticalYMMVehicleFoundVisible"
+      class="mt-5" />
     <vehicleNotMatchedAlert
-      v-else-if="isVehicleNotMatchedVisible" />
+      v-else-if="isVehicleNotMatchedVisible"
+      class="mt-5" />
     <perfectMatchAlert
-      v-else-if="isPerfectMatchVisible" />
+      v-else-if="isPerfectMatchVisible"
+      class="mt-5" />
     <noServiceAlert
-      v-else-if="isNoServiceVisible" />
+      v-else-if="isNoServiceVisible"
+      class="mt-5" />
   </div>
 </template>
 <script>
@@ -66,3 +71,9 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+div.alert {
+    margin-bottom: 0;
+}
+</style>

src/layouts/vin-lookup/vin-lookup.vue

@@ -13,13 +13,12 @@
                     <div class="select-car-form rounded">
                         <siteSubHeader
                             cmsWidgetName="SiteSubHeaderWidget"
-                            class="mt-4"
+                            class="mt-4" />
-                            subHeaderMarginClasses="mt-1" />
                         <vinLookupAlerts
-                            class="mt-5"
                             :activeAlertType="activeVehicleLookupAlertType" />
                         <vinQuestion
                             v-model="vin"
+                            class="mt-4"
                             :mask="vinMask"
                             :isDisabled="vinPopulatedOnPageLoad"
                             textPosition="left" />
@@ -48,6 +47,7 @@ import { isGlassAvailableForCarId } from '@/helpers/damage-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import routerParams from '@/router/router-constants/router-params';
 import { useMainStore } from '@/store';
+import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
@@ -140,7 +140,9 @@ export default {
             // TODO: Side effects in computed.
             if (this.vinPopulatedOnPageLoad) {
                 // TODO: Modify to remove side effects in computed
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                 this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.PERFECT_MATCH;
+                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                 this.needToLookupVehicle = false;
                 const lastSixChars = this.vin.substring(11, this.vin.length);
                 return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
@@ -174,6 +176,7 @@ export default {
             this.resetActiveAlert();
             // Temp solution to reset the 'disabled' style on the Continue button
             this.$refs.siteFooter.enableForwardAction();
+            showIssLoadingModal(true);
 
             if (this.needToLookupVehicle) {
                 const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
@@ -186,6 +189,7 @@ export default {
                     //  because the form itself actually passes its client-side validation.
                     //  SSR-189 Scenario #4.
                     this.$refs.siteFooter.enableForwardAction();
+                    showIssLoadingModal(false);
                     return;
                 }
 
@@ -193,6 +197,7 @@ export default {
                     this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NO_SERVICE;
                     this.resetVehicleFromLookup();
                     this.$refs.siteFooter.disableForwardButton();
+                    showIssLoadingModal(false);
                     return;
                 }
 
@@ -220,8 +225,8 @@ export default {
                     `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
                 this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
                 this.needToLookupVehicle = false;
-
+                showIssLoadingModal(false);
-                return null;
+                return;
             }
 
             let isSelectedGlassAvailableForVehicle = true;
@@ -242,7 +247,7 @@ export default {
                 );
 
                 // navigate() doesn't stop the processing flow
-                return null;
+                return;
             }
 
             // save vehicle to store if it hasn't already been saved
@@ -255,7 +260,7 @@ export default {
                     this.navigationScenarios.CORRECTED_VIN_FROM_POLICY_VEHICLE,
                     this.$route
                 );
-                return null;
+                return;
             }
 
             const partsOrQuestionsResponse = await this.getPartsOrQuestions();