Merge branch 'develop' into feature/CSR-520

azure-pipelines.yml

@@ -121,4 +121,7 @@ stages:
                       __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                       __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
                       __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                    indexDeployVariables:
+                      __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
+                      __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
                     cfDistributionId: $(cfDistributionId)

src/App.vue

@@ -1,5 +1,9 @@
 <template>
-  <router-view></router-view>
+  <router-view v-slot="{ Component }">
+    <transition :duration="{ enter: 800, leave: 300 }" name="route-fade" mode="out-in">
+      <component :is="Component" />
+    </transition>
+  </router-view>
 </template>
 
 <style lang="scss">

src/common-components/button-question/button-question.vue

@@ -162,7 +162,7 @@ export default {
 
 <style lang="scss" scoped>
 .button-question-overflow {
-  height: calc(100vh - 266px);
+  height: calc(100vh - 274px);
 
   .overflow-scroll {
     // Height will be determined by overall height of content above list

src/common-components/textbox-question/textbox-question.vue

@@ -57,8 +57,13 @@ export default {
 		const fieldOptions = {
 			type: "text",
 			value: props.modelValue,
+			potentialInitialValue: props.modelValue,
 		};
 
+		if (props.modelValue && props.modelValue.length > 0) {
+      fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
+    }
+
 		const {
 			errorMessage,
 			handleBlur,

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

@@ -9,6 +9,7 @@
 			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
 			<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
 			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
+			<div class="fade-on-route-transition sub-container make-tall">
 				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 				<alert ref="alertVinNotFound" v-show="displayVinNotFoundAlert"
 					class="my-3"
@@ -52,7 +53,7 @@
 					@ForwardClicked="forwardButtonAction"
 					:isForwardActionDisabled="!meta.valid"
 				/>
-			
+			</div>	
 		</div>
 	</Form>
 </template>

src/layouts/estimate/estimate.vue

@@ -9,9 +9,9 @@
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <div class="fade-on-route-transition sub-container make-tall">
         <buttonQuestion
           cmsWidgetName="VinLookupMethod"
-        class="button-question-overflow"
           :questionText="questionText"
           :answers="answersFromCms"
           groupName="vinLookupMethodOption"
@@ -20,7 +20,6 @@
           isRequired
           validationRules="option-required"
         />
-
         <funnel-footer
           cmsWidgetName="FunnelFooterWidget"
           :isForwardActionDisabled="!meta.valid"
@@ -29,6 +28,7 @@
           @ForwardClicked="forwardButtonAction"
         />
       </div>
+    </div>
   </Form>
 </template>
 

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

@@ -14,6 +14,7 @@
         :displayGenericVehicleImage="false"
       />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <div class="fade-on-route-transition sub-container make-tall">
         <div class="row my-2">
           <div class="col">
             <textboxQuestion
@@ -34,14 +35,6 @@
               mask="#####"
               validationRules="zip-required"
             />
-          <textboxQuestion
-            cmsWidgetName="RegistrationZip"
-            v-model="registrationZip"
-            isRequired
-            inputId="zip"
-            mask="#####"
-            validationRules="zip-required"
-          />
           </div>
         </div>
         <div class="row my-2">
@@ -52,13 +45,6 @@
               inputId="email"
               validationRules="email-address-required|email-address-format"
             />
-          <textboxQuestion
-            cmsWidgetName="EmailAddress"
-            v-model="email"
-            isRequired
-            inputId="email"
-            validationRules="email-address-required|email-address-format"
-          />
           </div>
         </div>
         <alert
@@ -100,6 +86,7 @@
           @ForwardClicked="forwardButtonAction"
         />
       </div>
+    </div>
   </Form>
 </template>
 
@@ -113,20 +100,38 @@ import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 
 // Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import {
-import { settleAllPromises } from "@/helpers/layout-helper";
+    fetchCmsContentForPage
+} from "@/helpers/cms-content-helper";
+import {
+    settleAllPromises
+} from "@/helpers/layout-helper";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
-import { storeActions } from "@/constants/store-actions";
+import {
-import { storeMutations } from "@/constants/store-mutations";
+    storeActions
-import { errorMessages } from "@/constants/error-messages";
+} from "@/constants/store-actions";
+import {
+    storeMutations
+} from "@/constants/store-mutations";
+import {
+    errorMessages
+} from "@/constants/error-messages";
 import {
     getDamageString,
     isGlassAvailableForCarId,
 } from "@/helpers/damage-helper";
-import { required, regex } from "@/helpers/validation-rules";
+import {
-import { Form, defineRule } from "vee-validate";
+    required,
-import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+    regex
+} from "@/helpers/validation-rules";
+import {
+    Form,
+    defineRule
+} from "vee-validate";
+import {
+    navigateAfterSaveToHeritageFunnel
+} from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
 defineRule(
@@ -167,9 +172,6 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
-  props: {
-    validationRules: String,
-  },
   data() {
     return {
       isRegistrationZipServicable: true,
@@ -259,16 +261,16 @@ export default {
         getEmailFromStore() {
             return store.getters.order.customer.emailAddress;
         },
-    getServiceZipFromStore(){
+        getServiceZipFromStore() {
             return store.getters.order.serviceLocation.zipCode
         },
         backButtonAction() {
             this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {
-      const zipValidation = this.serviceZip
+            const zipValidation = this.serviceZip ?
-        ? await this.validateZip(this.serviceZip)
+                await this.validateZip(this.serviceZip) :
-        : await this.validateZip(this.registrationZip);
+                await this.validateZip(this.registrationZip);
             if (!zipValidation.data.isServiceable) {
                 this.$refs.funnelFooter.removeLoader();
                 this.isVinValid = true;
@@ -313,13 +315,9 @@ export default {
             );
 
             const partsData = await baseMixin.methods.dispatchStoreAction(
-        this.storeActions.GET_PARTS_OR_QUESTIONS,
+                this.storeActions.GET_PARTS_OR_QUESTIONS, {
-        {
                     carId: vinLookup.data.vehicle.carId,
-          glassArray:
+                    glassArray: this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle ? [] : store.getters.damage.glassToReplace,
-            this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle
-              ? []
-              : store.getters.damage.glassToReplace,
                     zipCode: this.serviceZip ? this.serviceZip : this.registrationZip,
                     vin: vinLookup.data.vin,
                 },
@@ -331,9 +329,9 @@ export default {
             if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
                 this.$router.navigateAfterSave(
                     this.navigationScenarios.CLICKED_FORWARD,
-          this.$route,
+                    this.$route, {}, {
-          {},
+                        displayVehicleChangeAlert: true
-          { displayVehicleChangeAlert: true },
+                    },
                     partsData.data
                 );
                 return;
@@ -349,8 +347,10 @@ export default {
         },
         lookupVin(plate, state) {
             return baseMixin.methods.dispatchStoreAction(
-        storeActions.LOOKUP_VIN_BY_PLATE,
+                storeActions.LOOKUP_VIN_BY_PLATE, {
-        { licensePlate: plate, licenseState: state }
+                    licensePlate: plate,
+                    licenseState: state
+                }
             );
         },
         updateCustomerInfo(vin, vehicleInfo, registrationState) {
@@ -363,11 +363,11 @@ export default {
             store.commit(storeMutations.UPDATE_MODEL, vehicleInfo.model);
             store.commit(storeMutations.UPDATE_STYLE, vehicleInfo.style);
             store.commit(storeMutations.UPDATE_CAR_ID, vehicleInfo.carId);
-      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY,vehicleInfo.category);
+            store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, vehicleInfo.category);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL,vehicleInfo.imageUrl);
+            store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, vehicleInfo.imageUrl);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER,vehicleInfo.imageVifNumber);
+            store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, vehicleInfo.imageVifNumber);
-      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR,vehicleInfo.imageColor);
+            store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, vehicleInfo.imageColor);
-      store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE,this.licensePlate);
+            store.commit(storeMutations.UPDATE_REGISTRATION_LICENSE_PLATE, this.licensePlate);
             store.commit(storeMutations.UPDATE_REGISTRATION_STATE, registrationState);
             store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.registrationZip);
             store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip);
@@ -400,5 +400,5 @@ export default {
         alert,
         funnelFooter,
     },
-};
+}
 </script>

src/layouts/part-questions/part-questions.vue

@@ -3,10 +3,12 @@
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+    <div class="fade-on-route-transition sub-container make-tall">
         <h1>Part Questions Page Placeholder</h1>
         <funnel-footer
                 cmsWidgetName="FunnelFooterWidget" @back-clicked="backButtonAction"
         />
+    </div>
 </div>
 </template>
 

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

@@ -9,6 +9,7 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+        <div class="fade-on-route-transition sub-container make-tall">
           <alert
             ref="vehicleChangeAlert"
             class="mt-5 mb-0"
@@ -61,6 +62,7 @@
             @ForwardClicked="forwardButtonAction"
           />
         </div>
+      </div>
     </Form>
 </template>
 

src/layouts/vehicle-make/vehicle-make.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative make-tall">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -10,10 +10,12 @@
             backButtonAccessibleText="Change Vehicle Year"
             @click-event="backButtonAction"
         />
+        <div class="fade-on-route-transition">
           <makeQuestion v-model="selectedMake" ref="makeQuestion" cmsWidgetName="VehicleMakeQuestion" />
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>

src/layouts/vehicle-model/vehicle-model.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -10,10 +10,12 @@
           backButtonAccessibleText="Change Vehicle Make"
           @click-event="backButtonAction"
         />
+        <div class="fade-on-route-transition">
           <modelQuestion v-model="selectedModel" ref="modelQuestion" cmsWidgetName="VehicleModelQuestion" />
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>

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

@@ -3,6 +3,7 @@
     <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
     <vehicleBanner ref="vehicleBanner" cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
     <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
+    <div class="fade-on-route-transition sub-container make-tall">
       <div class="container-fluid prevent-squish my-5">
         <div class="row">
           <div class="col">
@@ -31,6 +32,7 @@
         />
       </div>
       <funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+    </div>
 </div>
 </template>
 

src/layouts/vehicle-style/vehicle-style.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
@@ -10,10 +10,12 @@
           backButtonAccessibleText="Change Vehicle Model"
           @click-event="backButtonAction"
         />
+        <div class="fade-on-route-transition">
           <styleQuestion v-model="selectedStyle" ref="styleQuestion" cmsWidgetName="VehicleStyleQuestion" />
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>

src/layouts/vehicle-year/vehicle-year.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0 position-relative">
+  <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
     <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" displayGenericVehicleImage />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-        <yearQuestion v-model="selectedYear" ref="yearQuestion" cmsWidgetName="VehicleYearQuestion" />
+        <div class="fade-on-route-transition">
+          <yearQuestion 
+            class="fade-on-route-transition"
+            v-model="selectedYear" 
+            ref="yearQuestion" 
+            cmsWidgetName="VehicleYearQuestion" 
+          />
+        </div>
       </div>
     </div>
   </div>

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

@@ -14,6 +14,7 @@
         :displayGenericVehicleImage="false"
       />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <div class="fade-on-route-transition sub-container make-tall">
         <div class="row my-2">
           <div class="col">
             <textboxQuestion
@@ -109,6 +110,44 @@
           @ForwardClicked="forwardButtonAction"
         />
       </div>
+      <alert
+        class="my-3"
+        :manualHeadline="MatchedDifferentVehicleAlertHeader"
+        :manualCopy="MatchedDifferentVehicleAlertBody"
+        v-model="customAlertData"
+        v-if="isCarIdDifferent"
+        alertClass="alert-danger"
+      />
+      <alert
+        class="my-3"
+        :manualHeadline="NoServiceZipHeader"
+        :manualCopy="NoServiceZipBody"
+        v-model="customAlertData"
+        v-if="noServiceZip"
+        alertClass="alert-warning"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="vinNotFound"
+        alertClass="alert-warning"
+        cmsWidgetName="VinNotFound"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="perfectMatchNewVinAlert"
+        alertClass="alert-success"
+        cmsWidgetName="PerfectMatchNewVinAlert"
+      />
+      <funnelFooter
+        cmsWidgetName="FunnelFooterWidget"
+        ref="funnelFooter"
+        :isForwardActionDisabled="!meta.valid"
+        @back-clicked="backButtonAction"
+        @ForwardClicked="forwardButtonAction"
+      />
+    </div>
   </Form>
 </template>
 
@@ -175,44 +214,39 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
-  props: {
-    validationRules: String,
-  },
   data() {
     return {
-      matchedDifferentVehicle: false,
+      isCarIdDifferent: false,
-      noMatchAlert: false,
       noServiceZip: false,
-      vinFound: false,
-      vinFoundReadOnly: false,
-      foundWindshieldAlert: false,
       vinNotFound: false,
-      perfectMatchNewVinAlert: false,
       vin: this.getVinFromStore(),
       zip: this.getZipFromStore(),
       email: this.getEmailFromStore(),
       customAlertData: {},
-      isCarIdDifferent: false,
       previouslyEnteredCarId: '',
       invalidZip: '',
+      vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0,
     };
   },
   computed: {
+    perfectMatchNewVinAlert() {
+      return this.vinPopulatedOnPageLoad && this.vin === this.getVinFromStore();
+    },
     MatchedDifferentVehicleAlertHeader(){
-      let text = this.getCmsContent("MatchedDifferentVehicle",
+      const text = this.getCmsContent("MatchedDifferentVehicle",
       "HeadlineText").replaceAll("{custom:damage}", getDamageString());
 
       return text;
     },
     MatchedDifferentVehicleAlertBody(){
-      let text = this.getCmsContent("MatchedDifferentVehicle",
+      const text = this.getCmsContent("MatchedDifferentVehicle",
         "BodyText").replaceAll("{custom:damage}", getDamageString()).replaceAll("{custom:vinlookupYear}", this.customAlertData?.vehicleInfo?.year).replaceAll("{custom:vinlookupMake}", this.customAlertData?.vehicleInfo?.make).replaceAll("{custom:vinlookupModel}",
         this.customAlertData?.vehicleInfo?.model);
 
       return text;
     },
     NoServiceZipHeader(){
-      let text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip);
+      const text = this.getCmsContent("NoServiceZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.invalidZip);
 
       return text;
     },
@@ -288,7 +322,7 @@ export default {
         this.isVinValid = true;
         this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleLookup.data.carId);
         this.$refs.funnelFooter.removeLoader();
-        this.matchedDifferentVehicle = true;
+        this.isCarIdDifferent = true;
         return;
       }
       this.updateStore(vehicleLookup.data);

src/router/router-constants/routing-table.js

@@ -102,19 +102,11 @@ const routingTable = [
     maps: [
       {
         scenario: navigationScenarios.CLICKED_BACK,
-        destinationFmgPageValue: fmgPageValues.REVEAL,
+        destinationFmgPageValue: fmgPageValues.ESTIMATE,
-      },
-      {
-        scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
-        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
-      },
-      {
-        scenario: navigationScenarios.VIN_LOOKUP,
-        destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
       },
       {
         scenario: navigationScenarios.CLICKED_FORWARD,
-        destinationFmgPageValue: fmgPageValues.ESTIMATE,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
       }
     ],
   },

src/store/index.js

@@ -144,17 +144,17 @@ export const mutations = {
   updateRegistrationAddress(state, registrationAddress){
     state.order.vehicle.registration.address = registrationAddress;
   },
-  updateServiceLocationZipCode(state, serviceLocationZipCode){
+  updateServiceLocationZip(state, serviceLocationZip){
-    state.order.serviceLocation.zipCode = serviceLocationZipCode;
+    state.order.vehicle.registration.zip = serviceLocationZip;
   },
   updateRegistrationCity(state, serviceCity){
-    state.order.serviceLocation.city = serviceCity;
+    state.order.vehicle.registration.city = serviceCity;
   },
   updateRegistrationFirstName(state, firstName){
-    state.order.serviceLocation.firstName = firstName;
+    state.order.vehicle.registration.firstName = firstName;
   },
   updateRegistrationLastName(state, lastName){
-    state.order.serviceLocation.lastName = lastName;
+    state.order.vehicle.registration.lastName = lastName;
   },
   updateCustomerEmailAddress(state, customerEmailAddress){
     state.order.customer.emailAddress = customerEmailAddress;

src/styles/common-animations.scss

@@ -10,3 +10,21 @@
 .fade-leave-to {
     opacity: 0;
 }
+
+.route-fade-enter-active .fade-on-route-transition {
+    transition: opacity 0.8s ease;
+}
+
+.route-fade-leave-active .fade-on-route-transition {
+    transition: opacity 0.3s ease; 
+}
+
+.route-fade-enter-from .fade-on-route-transition,
+.route-fade-leave-to .fade-on-route-transition {
+    /*
+  	Hack around a Chrome 96 bug in handling nested opacity transitions.
+    This is not needed in other browsers or Chrome 99+ where the bug
+    has been fixed.
+  */
+    opacity: 0.001;
+}

src/styles/common-styles.scss

@@ -26,6 +26,15 @@ body {
     overflow-x: hidden;
   }
 
+  .sub-container{
+    &.make-tall {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
   .sr-only {
     position: absolute;
     left: -10000px;