Merge 'develop' into feature/digital/SSR-254

src/iss-components/questions-page-layout/questions-page-layout.vue

@@ -2,9 +2,9 @@
     <div :class="`page-container-grouped-styles questions-page`">
         <loadingModal ref="loadingModal" />
         <siteHeader cmsWidgetName="SiteHeaderWidget" />
+        <div class="fade-on-route-transition sub-container overflow-scroll">
         <vehicleBanner class="mb-3" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
         <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
-        <div class="fade-on-route-transition sub-container overflow-scroll">
             <alert
                 ref="alertFewMoreQuestions"
                 cmsWidgetName="alertWidget"
@@ -96,7 +96,7 @@ export default {
 
 <style lang="scss">
  .overflow-scroll {
-        height: calc(100% - 368px);
+        height: calc(100% - 180px);
         overflow-x: hidden !important;
  }
 .questions-page {

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

@@ -7,13 +7,13 @@
         autocomplete="off">
         <div class="page-container-grouped-styles">
             <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
-            <vehicleBanner
-                class="mb-3"
-                cmsWidgetName="VehicleBannerWidget"
-                ref="vehicleBanner"
-                :displayGenericVehicleImage="false" />
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
             <div class="fade-on-route-transition sub-container overflow-scroll px-5">
+                <vehicleBanner
+                    class="mb-3"
+                    cmsWidgetName="VehicleBannerWidget"
+                    ref="vehicleBanner"
+                    :displayGenericVehicleImage="false" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
                 <alert
                     ref="alertVinNotFound"
                     v-if="displayVinNotFoundAlert"
@@ -350,7 +350,7 @@ export default {
 <style lang="scss">
 
 .overflow-scroll {
-    height: calc(100% - 368px);   
+    height: calc(100% - 180px);   
     overflow-X: hidden !important;
 
 }

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -5,12 +5,12 @@
       v-slot="{ meta }">
     <div class="page-container-grouped-styles">
       <siteHeader cms-widget-name="SiteHeaderWidget" />
-      <vehicleBanner
-        class="mb-3"
-        cms-widget-name="VehicleBannerWidget"
-        :display-generic-vehicle-image="false" />
-      <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container overflow-scroll mt-5 px-5">
+        <vehicleBanner
+            class="mb-3"
+            cms-widget-name="VehicleBannerWidget"
+            :display-generic-vehicle-image="false" />
+        <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
         <alert
           ref="alertVinNotFound"
           v-if="displayVinNotFoundAlert"
@@ -315,7 +315,7 @@ export default {
 <style>
 
  .overflow-scroll {
-        height: calc(100% - 392px);
+        height: calc(100% - 220px);
         overflow-x: hidden !important;
  }
 #license-plate-question-wrapper .form-test-error {

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -2,11 +2,6 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <div class="page-container-grouped-styles vehicle-damage">
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
-            <vehicleBanner
-                class="mb-3"
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container overflow-scroll">
                 <alert
                     ref="vehicleChangeAlert"
@@ -15,6 +10,11 @@
                     cmsWidgetName="VehicleChangeAlert"
                     alertClass="alert-warning"
                     :isDismissible="false" />
+                <vehicleBanner
+                    class="mb-3"
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+                <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
                 <damageLocationQuestion
                     ref="damageLocation"
                     cmsWidgetName="DamageLocationQuestion"
@@ -475,7 +475,7 @@ export default {
 <style lang="scss">
 
 .overflow-scroll {
-    height: calc(100% - 368px);   
+    height: calc(100% - 180px);
     overflow-X: hidden !important;
 }
 </style>

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -7,15 +7,15 @@
       <SiteHeader
         cms-widget-name="SiteHeaderWidget"
       />
-      <VehicleBanner
-        class="mb-3"
-        cms-widget-name="VehicleBannerWidget"
-        :display-generic-vehicle-image="false"
-      />
-      <SiteSubHeader
-        cms-widget-name="SiteSubHeaderWidget"
-      />
       <div class="fade-on-route-transition sub-container  overflow-scroll container gx-0">
+        <VehicleBanner
+            class="mb-3"
+            cms-widget-name="VehicleBannerWidget"
+            :display-generic-vehicle-image="false"
+        />
+        <SiteSubHeader
+            cms-widget-name="SiteSubHeaderWidget"
+        />
         <VinLookupMethods
           v-model="selectedVinLookupMethod"
           cms-widget-name="VINLookupMethod"
@@ -120,7 +120,7 @@ export default {
 <style lang="scss">
 
 .overflow-scroll {
-    height: calc(100% - 368px);   
+    height: calc(100% - 180px);   
     overflow-X: hidden !important;
 }
 </style>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -2,13 +2,13 @@
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <div class="page-container-grouped-styles vehicle-parts">
             <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
-            <vehicleBanner
-                class="mb-3"
-                ref="vehicleBanner"
-                cmsWidgetName="VehicleBannerWidget"
-                :displayGenericVehicleImage="false" />
-            <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
             <div class="fade-on-route-transition sub-container overflow-scroll px-5">
+                <vehicleBanner
+                    class="mb-3"
+                    ref="vehicleBanner"
+                    cmsWidgetName="VehicleBannerWidget"
+                    :displayGenericVehicleImage="false" />
+                <siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
                 <div class="prevent-squish my-5">
                     <div class="row">
                         <div class="col">
@@ -223,7 +223,7 @@ export default {
 </script>
 <style lang="scss">
  .overflow-scroll {
-        height: calc(100% - 368px);
+        height: calc(100% - 180px);
         overflow-x: hidden !important;
  }
  </style>

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

@@ -1,26 +1,26 @@
 <template>
-  <Form
+    <Form
     @submit="onSubmit"
     @invalidSubmit="onInvalidSubmit"
     v-slot="{ meta }"
-  >
+    >
     <div class="page-container-grouped-styles ">
-      <siteHeader
+        <siteHeader
         cmsWidgetName="SiteHeaderWidget"
-      />
+        />
-      <vehicleBanner
+        <div class="px-4  overflow-scroll ">
-        class="mb-3"
+            <div class="fade-on-route-transition sub-container px-2 mt-5">
-        cmsWidgetName="VehicleBannerWidget"
+                <vehicleBanner
-        :displayGenericVehicleImage="false"
+                class="mb-3"
-      />
+                cmsWidgetName="VehicleBannerWidget"
-      <siteSubHeader
+                :displayGenericVehicleImage="false"
-        cmsWidgetName="SiteSubHeaderWidget"
+                />
-      />
+                <siteSubHeader
-      <div class="px-4  overflow-scroll ">
+                cmsWidgetName="SiteSubHeaderWidget"
-        <div class="fade-on-route-transition sub-container px-2 mt-5">
+                />
-          <vinLookupAlerts
+                <vinLookupAlerts
-            :activeAlertType="activeVehicleLookupAlertType"
+                :activeAlertType="activeVehicleLookupAlertType"
-          />
+                />
 
           <vinQuestion
             v-model="vin"
@@ -28,19 +28,19 @@
             :isDisabled="vinPopulatedOnPageLoad"
           />
 
-          <vinLocationInformation />
+                <vinLocationInformation />
 
-          <siteFooter
+                <siteFooter
-            cmsWidgetName="SiteFooterWidget"
+                cmsWidgetName="SiteFooterWidget"
-            :isForwardActionDisabled="!meta.valid"
+                :isForwardActionDisabled="!meta.valid"
-            @backClicked="backButtonAction"
+                @backClicked="backButtonAction"
-            @forwardClicked="forwardButtonAction"
+                @forwardClicked="forwardButtonAction"
-            ref="siteFooter"
+                ref="siteFooter"
-          />
+                />
+            </div>
         </div>
-      </div>
     </div>
-  </Form>
+</Form>
 </template>
 <script>
 // Import Supporting Files
@@ -65,20 +65,20 @@ import vinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
 import vinQuestion from './vin-question/vin-question.vue';
 
 export default {
-  name: 'vin-lookup',
+    name: 'vin-lookup',
-  mixins: [baseFormMixin, vehicleQuestionsMixin],
+    mixins: [baseFormMixin, vehicleQuestionsMixin],
-  components: {
+    components: {
-    siteFooter,
+        siteFooter,
-    siteHeader,
+        siteHeader,
-    siteSubHeader,
+        siteSubHeader,
-    Form,
+        Form,
-    vehicleBanner,
+        vehicleBanner,
-    vinLocationInformation,
+        vinLocationInformation,
-    vinLookupAlerts,
+        vinLookupAlerts,
-    vinQuestion,
+        vinQuestion,
-  },
+    },
-  setup() {
+    setup() {
-    const mainStore = useMainStore();
+        const mainStore = useMainStore();
 
     return { mainStore };
   },
@@ -100,15 +100,15 @@ export default {
   async beforeRouteEnter(to, from, next) {
     const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
 
-    // Settle promises and get results
+        // Settle promises and get results
-    const promiseResultMap = [
+        const promiseResultMap = [
-      {
+            {
-        resultKey: 'cmsContent',
+                resultKey: 'cmsContent',
-        promise: cmsContentPromise,
+                promise: cmsContentPromise,
-      },
+            },
-    ];
+        ];
 
-    const resultMap = await settleAllPromises(promiseResultMap);
+        const resultMap = await settleAllPromises(promiseResultMap);
 
     next((vm) => {
       vm.setCmsContent(resultMap.cmsContent);
@@ -156,23 +156,23 @@ export default {
       // Temp solution to reset the 'disabled' style on the Continue button
       this.$refs.siteFooter.enableForwardAction();
 
-      if (this.needToLookupVehicle) {
+            if (this.needToLookupVehicle) {
-        const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
+                const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
 
-        if (vehicleLookupResponse.error) {
+                if (vehicleLookupResponse.error) {
-          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
+                    this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
-          this.resetVehicleFromLookup();
+                    this.resetVehicleFromLookup();
-          this.$refs.siteFooter.removeLoader();
+                    this.$refs.siteFooter.removeLoader();
-          // Temp solution to turn on 'disabled' style on the Continue button
+                    // Temp solution to turn on 'disabled' style on the Continue button
-          //  because the form itself actually passes its client-side validation.
+                    //  because the form itself actually passes its client-side validation.
-          //  SSR-189 Scenario #4.
+                    //  SSR-189 Scenario #4.
-          this.$refs.siteFooter.disableForwardButton();
+                    this.$refs.siteFooter.disableForwardButton();
-          return;
+                    return;
-        }
+                }
 
-        // Add vin bcs the response from the service doesn't contain vin
+                // Add vin bcs the response from the service doesn't contain vin
-        this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
+                this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });
-      }
+            }
 
       if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
         if(this.isTwoIdenticalYMMVehicleFound){
@@ -187,30 +187,30 @@ export default {
         this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
         this.$refs.siteFooter.removeLoader();
 
-        this.needToLookupVehicle = false;
+                this.needToLookupVehicle = false;
 
-        return;
+                return;
-      }
+            }
 
-      let isSelectedGlassAvailableForVehicle = true;
+            let isSelectedGlassAvailableForVehicle = true;
-      if (this.isCarIdDifferentFromTheStore) {
+            if (this.isCarIdDifferentFromTheStore) {
-        isSelectedGlassAvailableForVehicle =
+                isSelectedGlassAvailableForVehicle =
-          await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
+                await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
-      }
+            }
 
-      // navigate back to vehicle-damage
+            // navigate back to vehicle-damage
-      if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
+            if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
-        this.mainStore.updateVehicle(this.vehicleFromLookup);
+                this.mainStore.updateVehicle(this.vehicleFromLookup);
-        this.$router.navigate(
+                this.$router.navigate(
-          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
+                    this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
-          this.$route,
+                    this.$route,
-          {},
+                    {},
-          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
+                    { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
-        );
+                );
 
-        // navigate() doesn't stop the processing flow
+                // navigate() doesn't stop the processing flow
-        return;
+                return;
-      }
+            }
 
       // save vehicle to store if it hasn't already been saved
       if (!this.vinPopulatedOnPageLoad) {
@@ -225,57 +225,57 @@ export default {
         return;
       }
 
-      // Comes from vehicleQuestionsMixin.navigateForward()
+            // Comes from vehicleQuestionsMixin.navigateForward()
-      await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
+            await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
-    },
+        },
-    async getPartsOrQuestions() {
+        async getPartsOrQuestions() {
-      try {
+            try {
-        const response = await this.mainStore.getPartsOrQuestions();
+                const response = await this.mainStore.getPartsOrQuestions();
 
-        return response;
+                return response;
-      } catch (responseError) {
+            } catch (responseError) {
-        return {
+                return {
-          error: {
+                    error: {
-            status: responseError.status,
+                        status: responseError.status,
-          },
+                    },
-        };
+                };
-      }
+            }
+        },
+        async lookupVehicleByVin(vin) {
+            try {
+                return await this.mainStore.lookupVehicleByVin(vin);
+            }
+            catch (responseError) {
+                return {
+                    error: {
+                        status: responseError.status,
+                    },
+                };
+            }
+        },
+        resetActiveAlert() {
+            this.activeVehicleLookupAlertType = null;
+        },
+        resetVehicleFromLookup() {
+            this.vehicleFromLookup = null;
+        },
+        resetDependentState() {},
     },
-    async lookupVehicleByVin(vin) {
+    watch: {
-      try {
+        vin() {
-        return await this.mainStore.lookupVehicleByVin(vin);
+            this.resetActiveAlert();
-      }
+            this.$refs.siteFooter.enableForwardAction();
-      catch (responseError) {
+            this.needToLookupVehicle = true;
-        return {
+            this.$refs.siteFooter.updateButtonText(
-          error: {
+                this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
-            status: responseError.status,
+            );
-          },
+        }
-        };
-      }
     },
-    resetActiveAlert() {
-      this.activeVehicleLookupAlertType = null;
-    },
-    resetVehicleFromLookup() {
-      this.vehicleFromLookup = null;
-    },
-    resetDependentState() {},
-  },
-  watch: {
-    vin() {
-      this.resetActiveAlert();
-      this.$refs.siteFooter.enableForwardAction();
-      this.needToLookupVehicle = true;
-      this.$refs.siteFooter.updateButtonText(
-        this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
-      );
-    }
-  },
 };
 </script>
 <style>
 .overflow-scroll {
-    height: calc(100% - 368px);   
+    height: calc(100% - 180px);
     overflow-X: hidden !important;
 }