CSR-507 | Implement vehicleChangeAlert on vehicle-damage

Alert fires when vehicle is changed and does not contain the glass previously selected

src/helpers/unit-test-helper.js

@@ -7,6 +7,7 @@ import { cookieNames } from "@/constants/cookie-names";
 import { Form } from "vee-validate";
 import baseMixin from "@/mixins/base-mixin";
 import { getCookieDomainValue } from "@/helpers/heritage-integration/cookie-helper";
+import { routerParams } from "@/router/router-constants/router-params";
 
 // Common methods
 export function getMountOptions(mockData) {
@@ -35,6 +36,7 @@ export function getMountOptions(mockData) {
   mocks.navigationScenarios = navigationScenarios;
   mocks.vehicleCategories = vehicleCategories;
   mocks.fmgPageValues = fmgPageValues;
+  mocks.routerParams = routerParams;
 
   // Mock $store and $router when accessing this.$store/$router
   mocks.$store = mockData.store;

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -17,6 +17,7 @@ import { storeMutations } from "@/constants/store-mutations";
 import store from "@/store";
 import { validate } from "vee-validate";
 import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
+import { routerParams } from "@/router/router-constants/router-params";
 
 // Mock our module for promises.
 jest.mock("@/helpers/layout-helper.js", () => ({
@@ -703,6 +704,57 @@ describe("vehicle-damage.vue", () => {
   });
 });
 
+describe("vehicle-damage.vue", () => {
+  test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => {
+    // Arrange & Act
+    const { wrapper } = setupMocks({
+      mountOptionsMockData: {
+        route: {
+          params: {
+            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true
+          }
+        }
+      }
+    });
+    // Assert
+    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(true);
+  })
+});
+
+describe("vehicle-damage.vue", () => {
+  test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => {
+    // Arrange & Act
+    const { wrapper } = setupMocks({
+      mountOptionsMockData: {
+        route: {
+          params: {
+            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
+          }
+        }
+      }
+    });
+    // Assert
+    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
+  })
+});
+
+describe("vehicle-damage.vue", () => {
+  test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => {
+    // Arrange & Act
+    const { wrapper } = setupMocks({
+      mountOptionsMockData: {
+        route: {
+          params: {
+            [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: undefined
+          }
+        }
+      }
+    });
+    // Assert
+    expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false);
+  })
+});
+
 // THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE
 //    BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST
 // 
@@ -734,32 +786,41 @@ describe("vehicle-damage.vue", () => {
 });
 
 
-function setupMocks({
-  pageHeaderWidgetHeaderText = {},
-  mountOptionsMockData = {
+function setupMocks({pageHeaderWidgetHeaderText, mountOptionsMockData}) {
+  var pageHeaderWidgetHeaderTextDefault = {};
+  var mountOptionsMockDataDefault = {
     router: {
       navigate: jest.fn(),
     },
+    route: {
+      params: {
+        [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false
+      }
+    },
     store: {
       getters: {
         vehicle: {},
-        payment: { insuranceCoverage: { isVerified: false } },
+        payment: {
+          insuranceCoverage: {
+            isVerified: false
+          }
+        },
       },
     },
-  },
-}) {
+  };
+  // Combine parameters with default values
+  pageHeaderWidgetHeaderText = Object.assign(pageHeaderWidgetHeaderTextDefault, pageHeaderWidgetHeaderText);
+  mountOptionsMockData = Object.assign(mountOptionsMockDataDefault, mountOptionsMockData);
   //Mock api responses
   baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
   const apiResponses = {
     cmsContent: {
       FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
       VehicleBannerWidget: {
-        GenericVehicleImage:
-          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+        GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
       },
       FunnelHeaderWidget: {
-        LogoImage:
-          "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+        LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
       },
     },
     damageOptions: {

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

@@ -9,50 +9,57 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
         <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
         <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-          <damageLocationQuestion
-            ref="damageLocation"
-            cmsWidgetName="DamageLocationQuestion"
-            v-model="selectedDamageLocations"
-            groupName="DamageLocationQuestion"
-          />
-          <windshieldOptions
-            ref="windshieldOptions"
-            v-model="selectedWindshieldOptions"
-            :hasRepairReplaceConflict="hasRepairReplaceConflict"
-            :hasSplitSingleConflict="hasSplitSingleConflict"
-            :selectedDamageLocations="selectedDamageLocations"
-          />
-          <alert
-            class="my-3"
-            cmsWidgetName="HasReplacementConflict"
-            v-show="hasRepairReplaceConflict"
-            alertClass="alert-danger"
-            :isDismissible="false"
-          />
-          <sideDoorOptions
-            ref="sideDoorOptions"
-            cmsWidgetName="SideDoorSideQuestion"
-            groupName="SideDoorSideQuestion"
-            v-model="sideDoorOptionsData"
-            v-show="!hasRepairReplaceConflict"
-            :selectedDamageLocations="selectedDamageLocations"
-          />
-          <replaceOptionsQuestion
-            ref="backGlassOptions"
-            cmsWidgetName="RearReplaceOptionsQuestion"
-            :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
-            v-model="selectedRearReplaceOptions"
-            groupName="BackGlassReplaceOptionsQuestion"
-            validationRules="replace-options-required"
-            isRequired
-          />
-          <funnel-footer
-            cmsWidgetName="FunnelFooterWidget"
-            :isForwardActionDisabled="!meta.valid"
-            :isBackButtonHidden=shouldHideBackButton
-            @back-clicked="backButtonAction"
-            @ForwardClicked="forwardButtonAction"
-          />
+        <alert
+          ref="vehicleChangeAlert"
+          class="mt-5 mb-0"
+          cmsWidgetName="VehicleChangeAlert"
+          v-show="shouldDisplayVehicleChangeAlert"
+          alertClass="alert-warning"
+          :isDismissible="false"
+        />
+        <damageLocationQuestion
+          ref="damageLocation"
+          cmsWidgetName="DamageLocationQuestion"
+          v-model="selectedDamageLocations"
+          groupName="DamageLocationQuestion"
+        />
+        <windshieldOptions
+          ref="windshieldOptions"
+          v-model="selectedWindshieldOptions"
+          :hasRepairReplaceConflict="hasRepairReplaceConflict"
+          :hasSplitSingleConflict="hasSplitSingleConflict"
+          :selectedDamageLocations="selectedDamageLocations"
+        />
+        <alert
+          class="my-3"
+          cmsWidgetName="HasReplacementConflict"
+          v-show="hasRepairReplaceConflict"
+          alertClass="alert-danger"
+          :isDismissible="false"
+        />
+        <sideDoorOptions
+          ref="sideDoorOptions"
+          cmsWidgetName="SideDoorSideQuestion"
+          groupName="SideDoorSideQuestion"
+          v-model="sideDoorOptionsData"
+          v-show="!hasRepairReplaceConflict"
+          :selectedDamageLocations="selectedDamageLocations"
+        />
+        <replaceOptionsQuestion
+          ref="backGlassOptions"
+          cmsWidgetName="RearReplaceOptionsQuestion"
+          :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
+          v-model="selectedRearReplaceOptions"
+          groupName="BackGlassReplaceOptionsQuestion"
+          validationRules="replace-options-required"
+        />
+        <funnel-footer
+          cmsWidgetName="FunnelFooterWidget"
+          :isForwardActionDisabled="!meta.valid"
+          :isBackButtonHidden=shouldHideBackButton
+          @back-clicked="backButtonAction"
+          @ForwardClicked="forwardButtonAction"
+        />
       </div>
     </Form>
 </template>
@@ -410,6 +417,9 @@ export default {
         })
         );
     },
+    shouldDisplayVehicleChangeAlert() {
+      return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
+    },
     shouldHideBackButton(){
       return this.$store.getters.payment.insuranceCoverage.isVerified;
     }

src/mixins/base-mixin.js

@@ -3,6 +3,7 @@ import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import { vehicleCategories } from "@/constants/vehicle-categories.js";
+import { routerParams } from "@/router/router-constants/router-params";
 
 export default {
   data() {
@@ -54,6 +55,9 @@ export default {
     vehicleCategories() {
       return vehicleCategories;
     },
+    routerParams() {
+      return routerParams;
+    }
   },
 };
 

src/router/router-constants/router-params.js

@@ -0,0 +1,5 @@
+const routerParams = {
+    DISPLAY_VEHICLE_CHANGE_ALERT: "displayVehicleChangeAlert"
+  };
+  
+  export { routerParams };