Merge pull request #397 from Safelite/feature/CSR-240

CSR-240 | Implement Transition via div wrapper

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/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
@@ -85,6 +86,7 @@
           @ForwardClicked="forwardButtonAction"
         />
       </div>
+    </div>
   </Form>
 </template>
 

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
@@ -57,6 +58,58 @@
             />
           </div>
         </div>
+        <alert
+          class="my-3"
+          :manualHeadline="MatchedDifferentVehicleAlertHeader"
+          :manualCopy="MatchedDifferentVehicleAlertBody"
+          v-model="customAlertData"
+          v-if="matchedDifferentVehicle"
+          alertClass="alert-danger"
+        />
+        <alert
+          class="my-3"
+          v-model="customAlertData"
+          v-if="noMatchAlert"
+          alertClass="alert-warning"
+          cmsWidgetName="NoMatchAlertWidget"
+        />
+        <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="foundWindshieldAlert"
+          alertClass="alert-warning"
+          cmsWidgetName="FoundWindshieldAlert"
+        />
+        <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-warning"
+          cmsWidgetName="PerfectMatchNewVinAlert"
+        />
+        <funnelFooter
+          cmsWidgetName="FunnelFooterWidget"
+          ref="funnelFooter"
+          :isForwardActionDisabled="!meta.valid"
+          @back-clicked="backButtonAction"
+          @ForwardClicked="forwardButtonAction"
+        />
+      </div>
       <alert
         class="my-3"
         :manualHeadline="MatchedDifferentVehicleAlertHeader"

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;