Fixed merge conflicts, renamed 'zip' to 'zipCode' where applicable for consistency

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,7 +57,7 @@ export default {
 		const fieldOptions = {
 			type: "text",
 			value: props.modelValue,
-			initialValue: props.modelValue,
+			initialValue: (props.modelValue && props.modelValue.length > 0) ? props.modelValue : "",
 		};
 
 		const {

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

@@ -4,6 +4,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"
@@ -35,7 +36,7 @@
 					<div class="service-zip-field" v-if="showServiceZipField" aria-live="polite">
 						<div class="row my-4">
 							<div class="col">
-							<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZip" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
+								<textboxQuestion cmsWidgetName="ServiceZipQuestionWidget" v-model="serviceZipCode" ref="serviceZip" inputId="7add1b26df344f2caf1678de5797803f" aria-haspopup="" mask="#####" disableAutoFill validationRules="service-zip-required|service-zip-format" />
 							</div>
 						</div>
 					</div>
@@ -47,7 +48,7 @@
 					@ForwardClicked="forwardButtonAction"
 					:isForwardActionDisabled="!meta.valid"
 				/>
-			
+			</div>	
 		</div>
 	</Form>
 </template>
@@ -110,13 +111,13 @@ export default {
 					streetAddress: this.getRegistrationAddressFromStore(),
 					city: this.getRegistrationCityFromStore(),
 					state: this.getRegistrationStateFromStore(),
-					zip: this.getRegistrationZipFromStore(),
+					zipCode: this.getRegistrationZipFromStore(),
 				},
 				firstName: this.getRegistrationFirstNameFromStore(),
 				lastName: this.getRegistrationLastNameFromStore(),
 				emailAddress: this.getEmailFromStore(),
 			}, 
-			serviceZip: this.getServiceZipFromStore(),
+			serviceZipCode: this.getServiceZipFromStore(),
 			displayNonServiceableZipAlert: false,
 			displayVinNotFoundAlert: false,
 			displayMatchedDifferentVehicleAlert: false,
@@ -174,7 +175,7 @@ export default {
 			const vinLookup = await this.lookupVin(
 				this.customerQuestions.lastName, 
 				this.customerQuestions.addressQuestions.streetAddress, 
-				this.customerQuestions.addressQuestions.zip, 
+				this.customerQuestions.addressQuestions.zipCode, 
 				this.customerQuestions.addressQuestions.state
 			);
 
@@ -186,7 +187,7 @@ export default {
 			}
 			
 			// Validate if the original or service zip provided is serviceable
-			const zipValidation = this.serviceZip ? await this.validateZip(this.serviceZip) : await this.validateZip(this.customerQuestions.addressQuestions.zip);
+			const zipValidation = this.serviceZipCode ? await this.validateZip(this.serviceZipCode) : await this.validateZip(this.customerQuestions.addressQuestions.zipCode);
 			this.isZipServicable = zipValidation.data.isServiceable;
 			if (!this.isZipServicable) {
 				this.displayNonServiceableZipAlert = true;
@@ -304,18 +305,18 @@ export default {
 			store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, this.customerQuestions.addressQuestions.streetAddress);
 			store.commit(storeMutations.UPDATE_REGISTRATION_CITY, this.customerQuestions.addressQuestions.city);
 			store.commit(storeMutations.UPDATE_REGISTRATION_STATE, this.customerQuestions.addressQuestions.state);
-			store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zip);
+			store.commit(storeMutations.UPDATE_REGISTRATION_ZIP_CODE, this.customerQuestions.addressQuestions.zipCode);
 			store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, this.customerQuestions.firstName);
 			store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, this.customerQuestions.lastName);
-			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZip);			
+			store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP_CODE, this.serviceZipCode);			
 			store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.customerQuestions.emailAddress);
 		},
 		
 	},
 	computed: {
 		AlertNonServiceableZipHeader(){
-			const zip = this.serviceZip ? this.serviceZip : this.customerQuestions.addressQuestions.zip;
+			const zipCode = this.serviceZipCode ? this.serviceZipCode : this.customerQuestions.addressQuestions.zipCode;
-			const text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zip);
+			const text = this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", zipCode);
 			return text;
 		},
 		AlertNonServiceableZipBody(){
@@ -340,24 +341,24 @@ export default {
 	watch: {
 		customerQuestions: {		
 			handler(newValue) {
-				// if they modify one of the lookup fields (address, city, state, zip, or lastName), then modify the button text back to “Get my personalized quote”
+				// if they modify one of the lookup fields (address, city, state, zipCode, or lastName), then modify the button text back to “Get my personalized quote”
 				this.$refs.funnelFooter.updateButtonText(this.getCmsContent("FunnelFooterWidget", "ForwardButtonText"));
 				this.showServiceZipField = false;
 				this.resetWarningsAndErrors();
 			},
 			deep: true
 		},
-		serviceZip: {
+		serviceZipCode: {
 			handler(newValue) {
-				// if they modify the service zip, then hide the error message”
+				// if they modify the service zip code, then hide the error message”
 				this.displayNonServiceableZipAlert = false;
 			},
 		},
 		showServiceZipField: {
 			handler(newValue) {
-				// if the Service Zip field is ever hidden, clear out it's value
+				// if the Service Zip Code field is ever hidden, clear out it's value
 				if (!newValue) {
-					this.serviceZip = "";
+					this.serviceZipCode = "";
 				}			
 			},			
 		}

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

@@ -17,7 +17,7 @@
 				<dropdownQuestion cmsWidgetName="StateQuestionWidget" v-model="addressModel.state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" disableAutoFill validationRules="state-required" />
 			</div>
 			<div class="col">
-				<textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-required|zip-format"/>
+				<textboxQuestion cmsWidgetName="ZipQuestionWidget" v-model="addressModel.zipCode" ref="zipCode" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" mask="#####" disableAutoFill validationRules="zip-code-required|zip-code-format"/>
 			</div>
 		</div>
 	</transition>		
@@ -48,8 +48,8 @@ import { errorMessages } from "@/constants/error-messages";
 defineRule("street-address-required", required(errorMessages.STREET_ADDRESS_REQUIRED));
 defineRule("city-required", required(errorMessages.CITY_REQUIRED));
 defineRule("state-required", required(errorMessages.STATE_REQUIRED));
-defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("zip-code-required", required(errorMessages.ZIP_REQUIRED));
-defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
+defineRule("zip-code-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
 
 export default ({
 	name: "address-questions",
@@ -61,7 +61,7 @@ export default ({
 				streetAddress: "",
 				city: "",
 				state: "",
-				zip: "",            
+				zipCode: "",            
 			}),
 		},
 		validationRules: String,       
@@ -150,7 +150,7 @@ export default ({
 			if (this.addressModel.streetAddress !== null & 
 				this.addressModel.city !== null & 
 				this.addressModel.state !== null & 
-				this.addressModel.zip !== null) {
+				this.addressModel.zipCode !== null) {
 
 				this.showAddressFields = true;				
 			}
@@ -196,7 +196,7 @@ export default ({
 							else {
 								self.addressModel.city = "";
 								self.addressModel.state = "";
-								self.addressModel.zip = "";      
+								self.addressModel.zipCode = "";      
 								self.showAddressFields = true;
 								self.displayVerificationWarning = false;
 								self.displayNoMatchWarning = true;
@@ -234,7 +234,7 @@ export default ({
 										break;
 									}
 									case "postal_code": {
-										self.addressModel.zip = component.long_name;
+										self.addressModel.zipCode = component.long_name;
 										break;
 									}
 

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

@@ -43,7 +43,7 @@ export default ({
 						streetAddress: "",
 						city: "",
 						state: "",
-						zip: "",
+						zipCode: "",
 					},
 					firstName: "",
 					lastName: "",

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

@@ -1,33 +1,91 @@
 <template>
-<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+  <Form
-    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+    @submit="onSubmit"
+    @invalid-submit="onInvalidSubmit"
+    ref="theForm"
+    v-slot="{ meta }"
+  >
+    <div
+      class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5"
+    >
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+      <vehicleBanner
+        cmsWidgetName="VehicleBannerWidget"
+        :displayGenericVehicleImage="false"
+      />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <div class="fade-on-route-transition sub-container make-tall">
         <div class="row my-2">
           <div class="col">
-                <textboxQuestion cmsWidgetName="LicensePlateNumber" v-model="licensePlate" isRequired inputId="license_plate" validationRules="license-plate-required" />
+            <textboxQuestion
+              cmsWidgetName="LicensePlateNumber"
+              v-model="licensePlate"
+              isRequired
+              inputId="license_plate"
+              validationRules="license-plate-required"
+            />
           </div>
         </div>
         <div class="row my-2">
           <div class="col">
-                <textboxQuestion cmsWidgetName="RegistrationZip" v-model="registrationZip" inputId="zip" mask="#####" validationRules="zip-required" />
+            <textboxQuestion
+              cmsWidgetName="RegistrationZip"
+              v-model="registrationZip"
+              inputId="zip"
+              mask="#####"
+              validationRules="zip-required"
+            />
           </div>
         </div>
         <div class="row my-2">
           <div class="col">
-                <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" validationRules="email-address-required|email-address-format" />
+            <textboxQuestion
+              cmsWidgetName="EmailAddress"
+              v-model="email"
+              inputId="email"
+              validationRules="email-address-required|email-address-format"
+            />
           </div>
         </div>
-        <alert class="my-3" :manualHeadline="NoServiceZipHeader" :manualCopy="NoServiceZipBody" v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent" alertClass="alert-danger" />
+        <alert
+          class="my-3"
+          :manualHeadline="NoServiceZipHeader"
+          :manualCopy="NoServiceZipBody"
+          v-if="!isRegistrationZipServicable && isVinValid && !isCarIdDifferent"
+          alertClass="alert-danger"
+        />
         <div class="row my-2">
           <div class="col">
-                <textboxQuestion v-if="!isRegistrationZipServicable" cmsWidgetName="ServiceZip" v-model="serviceZip" inputId="serviceZip" validationRules="zip-required" />
+            <textboxQuestion
+              v-if="!isRegistrationZipServicable"
+              cmsWidgetName="ServiceZip"
+              v-model="serviceZip"
+              inputId="serviceZip"
+              validationRules="zip-required"
+            />
           </div>
         </div>
-        <alert class="my-3" cmsWidgetName="NoMatchAlertWidget" v-if="!isVinValid" alertClass="alert-danger" />
+        <alert
-        <alert class="my-3" :manualHeadline="MatchedDifferentVehicleAlertHeader" :manualCopy="MatchedDifferentVehicleAlertBody" v-if="isCarIdDifferent" alertClass="alert-warning" />
+          class="my-3"
-        <funnelFooter ref="funnelFooter" cmsWidgetName="FunnelFooterWidget" :isForwardActionDisabled="!meta.valid" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
+          cmsWidgetName="NoMatchAlertWidget"
+          v-if="!isVinValid"
+          alertClass="alert-danger"
+        />
+        <alert
+          class="my-3"
+          :manualHeadline="MatchedDifferentVehicleAlertHeader"
+          :manualCopy="MatchedDifferentVehicleAlertBody"
+          v-if="isCarIdDifferent"
+          alertClass="alert-warning"
+        />
+        <funnelFooter
+          ref="funnelFooter"
+          cmsWidgetName="FunnelFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          @back-clicked="backButtonAction"
+          @ForwardClicked="forwardButtonAction"
+        />
+      </div>
     </div>
   </Form>
 </template>
@@ -100,10 +158,12 @@ export default {
     const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
     // Settle promises and get results
-        const promiseResultMap = [{
+    const promiseResultMap = [
+      {
         resultKey: "cmsContent",
         promise: cmsContentPromise,
-        }, ];
+      },
+    ];
 
     const resultMap = await settleAllPromises(promiseResultMap);
 
@@ -112,9 +172,6 @@ export default {
       vm.setCmsContent(resultMap.cmsContent);
     });
   },
-    props: {
-        validationRules: String,
-    },
   data() {
     return {
       isRegistrationZipServicable: true,
@@ -343,5 +400,5 @@ export default {
         alert,
         funnelFooter,
     },
-};
+}
 </script>

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

@@ -3,11 +3,13 @@
     <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>
 
 <script>

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">
@@ -32,6 +33,7 @@
       </div>
       <funnelFooter cmsWidgetName="FunnelFooterWidget" ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
     </div>
+</div>
 </template>
 
 <script>

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,8 +144,8 @@ export const mutations = {
   updateRegistrationAddress(state, registrationAddress){
     state.order.vehicle.registration.address = registrationAddress;
   },
-  updateServiceLocationZipCode(state, serviceLocationZipCode){
+  updateServiceLocationZipCode(state, serviceLocationZip){
-    state.order.serviceLocation.zipCode = serviceLocationZipCode;
+    state.order.serviceLocation.zipCode = serviceLocationZip;
   },
   updateRegistrationCity(state, registrationCity){
     state.order.vehicle.registration.city = registrationCity;

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;