Refactor logic for redirect

src/common-components/funnel-footer/funnel-footer.vue

@@ -22,13 +22,13 @@
             isPrimary
             :buttonText="buttonText"
             loaderColor="white"
-            :class="isDisabled && 'form-test-invalid'"
+            :class="isForwardActionDisabled && 'form-test-invalid'"
-            :aria-disabled="isDisabled"
+            :aria-disabled="isForwardActionDisabled"
-            :isDisabled="isDisabled"
+            :isDisabled="isForwardActionDisabled"
             @click-event="buttonClick"
           />
         </div>
-        <div class="col-auto link-col py-1 text-break">
+        <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
           <textLink
           linkType="navigation"
           :text="backLink"
@@ -48,8 +48,10 @@ import buttonMain from "@/ux-components/button-main/button-main";
 export default {
   name: "funnelFooter",
   props: {
-    isDisabled: Boolean,
+    isForwardActionDisabled: Boolean,
+    isBackButtonHidden: {type: Boolean, default: false},
     cmsWidgetName: String,
+
   },
   components: {
     textLink,

src/global-methods.js

@@ -5,7 +5,11 @@ import httpStatusCodes from "http-status-codes";
 export default {
   callHttpClient({ method, endpoint, payload }) {
     return new Promise((resolve, reject) => {
-      const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
+      var apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
+
+      if(endpoint.includes("order")){
+        apiGatewayUrl = 'https://localhost:44346';
+      }
 
       const payloadAndAnalyticsData = Object.assign({}, payload, {
         AppName: "FixMyGlass",

src/helpers/heritage-integration/navigation-helper.js

@@ -2,6 +2,7 @@ import { queryStrings } from "@/constants/query-strings";
 import { externalUrls } from "@/router/router-constants/externalUrl-values";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { saveOrder } from "@/helpers/heritage-integration/order-helper.js";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import store from "@/store";
 import router from "@/router";
 
@@ -12,45 +13,24 @@ import router from "@/router";
 */
 export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHeritageOrder = false) {
 
+    // If navigating to a specific page, and that page is not part of the vin pages.
+    // Return that page, so that it can navigate like normal.
+    if (toRoute.query[queryStrings.FMG_PAGE] !== undefined && !isVinRelatedPage(toRoute)) {
+        return overrideYmmsDirectionIfNeeded(toRoute, toRoute.query[queryStrings.FMG_PAGE]);
+    }
+
     // If the user is coming in via the Safelite.Com CTA
     if (toRoute.query[queryStrings.START_TYPE] === 'fmg') {
-
         // If they have an existing order, return 'heritage' for the page name.
         if (existingHeritageOrder) {
             return 'heritage';
         }
     }
 
+    // If this is not a direct link to a page using fmgPage, get the latest page.
+    const latestPageRoute = await getLatestPageForRedirection();
 
-    // If this is a non-CTA navigation, determine where to send the user based on page prerequisites.
+    return latestPageRoute;
-    // This also works if a user has a 'fmg' start_type query string but no current order.
-    // That shouldn't happen, but it's possible.
-    const vehicleMakeComponent = (await lazyLoadComponent('vehicle-make')()).default;
-    const vehicleModelComponent = (await lazyLoadComponent('vehicle-model')()).default;
-    const vehicleStyleComponent = (await lazyLoadComponent('vehicle-style')()).default;
-    const vehicleDamageComponent = (await lazyLoadComponent('vehicle-damage')()).default;
-
-
-    if (!vehicleMakeComponent.methods.arePagePrerequisitesValid()) {
-        return "vehicle-year";
-    } else if (!vehicleModelComponent.methods.arePagePrerequisitesValid()) {
-        return "vehicle-make";
-    } else if (!vehicleStyleComponent.methods.arePagePrerequisitesValid()) {
-        return "vehicle-model";
-    } else if (!vehicleDamageComponent.methods.arePagePrerequisitesValid()) {
-        return "vehicle-style";
-    } else if (store.getters.damage.isRepair == null || !store.getters.vehicle.carId) {
-        return 'vehicle-damage'
-    } else {
-        if (store.getters.vehicle.vin) {
-            return 'vehicle-damage';
-            //return "vin-lookup"; (uncomment)
-        } else {
-            return 'vehicle-damage';
-            //return "estimate" (uncomment)
-        }
-    }
-
 }
 
 /*
@@ -66,6 +46,63 @@ export async function navigateToHeritageFunnel() {
         {
             corid: store.getters.order.referralCorrelationId,
             src: "concept-funnel",
+            experiments: "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true"
         }
     );
 }
+
+async function getLatestPageForRedirection() {
+    // If this is a non-CTA navigation, determine where to send the user based on page prerequisites.
+    // This also works if a user has a 'fmg' start_type query string but no current order.
+    // That shouldn't happen, but it's possible.
+    const vehicleMakeComponent = (await lazyLoadComponent('vehicle-make')()).default;
+    const vehicleModelComponent = (await lazyLoadComponent('vehicle-model')()).default;
+    const vehicleStyleComponent = (await lazyLoadComponent('vehicle-style')()).default;
+    const vehicleDamageComponent = (await lazyLoadComponent('vehicle-damage')()).default;
+
+
+    if (!vehicleMakeComponent.methods.arePagePrerequisitesValid()) {
+        return fmgPageValues.VEHICLE_YEAR;
+    } else if (!vehicleModelComponent.methods.arePagePrerequisitesValid()) {
+        return fmgPageValues.VEHICLE_MAKE;
+    } else if (!vehicleStyleComponent.methods.arePagePrerequisitesValid()) {
+        return fmgPageValues.VEHICLE_MODEL;
+    } else if (!vehicleDamageComponent.methods.arePagePrerequisitesValid()) {
+        return fmgPageValues.VEHICLE_STYLE;
+    } else if (store.getters.damage.isRepair == null || !store.getters.vehicle.carId) {
+        return fmgPageValues.VEHICLE_DAMAGE;
+    } else {
+        if (store.getters.vehicle.vin) {
+            return fmgPageValues.VIN_LOOKUP;
+        } else {
+            return fmgPageValues.ESTIMATE;
+        }
+    }
+}
+
+function overrideYmmsDirectionIfNeeded(toRoute, defaultPageValue) {
+    if (store.getters.payment.insuranceCoverage.isVerified) {
+        switch (toRoute.query[queryStrings.FMG_PAGE]) {
+            case fmgPageValues.VEHICLE_YEAR:
+            case fmgPageValues.VEHICLE_MAKE:
+            case fmgPageValues.VEHICLE_MODEL:
+            case fmgPageValues.VEHICLE_STYLE:
+                {
+                    return fmgPageValues.VEHICLE_DAMAGE;
+                }
+            default: {
+                return defaultPageValue;
+            }
+        }
+    } else {
+        return defaultPageValue;
+    }
+}
+
+function isVinRelatedPage(toRoute) {
+    return toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.VIN_LOOKUP ||
+        toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.LICENSE_PLATE_LOOKUP ||
+        toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.ADDRESS_LOOKUP ||
+        toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.ADDRESS_VEHICLES ||
+        toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.ESTIMATE;
+}

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

@@ -12,7 +12,7 @@
 			<customerQuestions ref="customerQuestions" v-model="customerQuestions" />
 			<funnel-footer
 				ref="funnelFooter"
-				:isDisabled="!meta.valid"
+				:isForwardActionDisabled="!meta.valid"
 			/>
 		</div>
 	</Form>

src/layouts/form-test/form-test.vue

@@ -44,7 +44,7 @@
             />
             <funnel-footer
               ref="funnelFooter"
-              :isDisabled="!meta.valid"
+              :isForwardActionDisabled="!meta.valid"
               @back-clicked="backButtonAction"
               @ForwardClicked="forwardButtonAction"
             />

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

@@ -50,7 +50,7 @@
       <funnelFooter
         ref="funnelFooter"
         cmsWidgetName="FunnelFooterWidget"
-        :isDisabled="!meta.valid"
+        :isForwardActionDisabled="!meta.valid"
         @back-clicked="backButtonAction"
         @ForwardClicked="forwardButtonAction"
       />

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

@@ -47,7 +47,8 @@
           />
           <funnel-footer
             cmsWidgetName="FunnelFooterWidget"
-            :isDisabled="!meta.valid"
+            :isForwardActionDisabled="!meta.valid"
+            :isBackButtonHidden=shouldHideBackButton
             @back-clicked="backButtonAction"
             @ForwardClicked="forwardButtonAction"
           />
@@ -145,9 +146,11 @@ export default {
       }
       return false;
     },
+
     resetDependentState() {
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
+
     backButtonAction() {
       // route to move backwards
       this.$router.navigate(
@@ -155,6 +158,7 @@ export default {
         this.$route
       );
     },
+
     getDamageLocationsFromStore() {
       var glassSelections = [];
 
@@ -275,13 +279,20 @@ export default {
     },
 
     navigateForward(partsData){
-      // CSR-98 TEMP
+
+      // Temporary easter egg to navigate to heritage funnel.
       const vehicleYearsToShowHeritageFunnel = [ 2001, 2002, 2010 ];
       if (vehicleYearsToShowHeritageFunnel.includes(store.getters.vehicle.year)) {
         navigateToHeritageFunnel();
         return;
       }
 
+      // If vin already exists, navigate directly to vin-lookup
+      if(this.$store.getters.vehicle.vin){
+        this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route);
+        return;
+      }
+
       //found problem questions
       if (partsData.data.partsOrQuestions.some(pq => pq.partQuestions != null && pq.partQuestions.length > 0)){
         this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS, this.$route, {}, {}, partsData.data);
@@ -398,6 +409,9 @@ export default {
         })
         );
     },
+    shouldHideBackButton(){
+      return this.$store.getters.payment.insuranceCoverage.isVerified;
+    }
   },
 
   components: {

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

@@ -1,17 +1,10 @@
 <template>
-  <div class="container-fluid shadow rounded-3 px-5 position-relative make-tall">
+<div class="container-fluid shadow rounded-3 px-5 position-relative make-tall">
     <funnelHeader ref="funnelHeader" />
     <vehicleBanner ref="vehicleBanner" />
     <funnelSubHeader ref="funnelSubHeader" />
-    <vinInformation
+    <vinInformation class="mb-5" />
-      class="mb-5"
+    <funnel-footer ref="funnelFooter" :isForwardActionDisabled=true @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
-    />
-    <funnel-footer
-      ref="funnelFooter"
-      :isDisabled="!meta.valid"
-      @back-clicked="backButtonAction"
-      @ForwardClicked="forwardButtonAction"
-    />
 </div>
 </template>
 
@@ -25,14 +18,24 @@ import textboxQuestion from "@/common-components/textbox-question/textbox-questi
 import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
 
 export default {
-  name: "vin-lookup",
+    name: "vin-lookup",
-  components: {
+    components: {
-    funnelHeader,
+        funnelHeader,
-    vehicleBanner,
+        vehicleBanner,
-    funnelSubHeader,
+        funnelSubHeader,
-    vinInformation,
+        vinInformation,
-    funnelFooter,
+        funnelFooter,
-  },
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {
+            if (this.$store.getters.vehicle.vin) {
+                this.$router.navigate(this.navigationScenarios.CLICKED_BACK_WITH_VIN, this.$route)
+            }
+        }
+    }
 };
 </script>
 

src/router/index.js

@@ -7,9 +7,9 @@ import { globalEvents, globalEventTypes } from "@/constants/events";
 
 // Heritage integration
 import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
-import { updateOrCreateFunnelCookie,getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
+import { updateOrCreateFunnelCookie, getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
 import { loadOrderIfPresent, saveOrder } from "@/helpers/heritage-integration/order-helper";
-import { getPageToRouteExistingOrderTo, navigateToHeritageFunnel} from "@/helpers/heritage-integration/navigation-helper";
+import { getPageToRouteExistingOrderTo, navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 import baseMixin from "@/mixins/base-mixin";
 import eventBus from "@/helpers/event-bus/event-bus";
@@ -35,84 +35,79 @@ const routes = [
     name: "root",
     async beforeEnter(to, from, next) {
       // If we have no query string, or we don't have the FmgPage query string.
-      if (to.query.fmgPage === undefined) {
+      try {
-        await GoToFunnelStartOn404(next);
-      } else {
-        try {
 
-          // If the saved session has timed out, clear the session, execute 404 logic.
+        // If the saved session has timed out, clear the session, execute 404 logic.
-          if (getFunnelCookie() !== null && !isSavedSessionStillActive()) {
+        if (getFunnelCookie() !== null && !isSavedSessionStillActive()) {
-            await GoToFunnelStartOn404(next);
-          }
-
-          
-
-          // On entering the funnel "fresh", read cookie information, decide what to do next.
-          if (from.redirectedFrom === undefined) {
-            const loadOrderResponse = await loadOrderIfPresent();
-            const pageToRedirectTo = await getPageToRouteExistingOrderTo(to, loadOrderResponse);
-
-            // If getPageToRouteExistingOrderTo determines that the return user needs to
-            // go back to heritage funnel, send them there and stop our current navigation.
-            if (pageToRedirectTo === 'heritage') {
-              await navigateToHeritageFunnel();
-              return next(false);
-            }
-
-            // Assign our fmgPage so it will load normally like the other pages.
-            to.query.fmgPage = pageToRedirectTo;
-          }
-
-          // Process funnel cookie.
-          updateOrCreateFunnelCookie();
-
-          // If we already have our route, go to it.
-          if (router.hasRoute(to.query.fmgPage)) {
-            // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
-            let component = router.getRoutes().filter((x) => x.name === to.query.fmgPage)[0].components;
-
-            // If the component hasn't been loaded fully, load it before we check prerequisites.
-            if (component.default.methods === undefined) {
-              component = await component.default();
-            }
-
-            if (!arePagePrerequisitesValid(component)) {
-              await GoToFunnelStartOn404(next);
-            }
-
-            return next({ name: to.query.fmgPage, query: to.query, params: to.params });
-          }
-
-          // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
-          const routeData = await GetRouteInfoFromPageName(to.query.fmgPage);
-
-          // Add our dynamic route.
-          router.addRoute({
-            path: routeData[0].path, // Always the same path, because we control it with query strings.
-            name: routeData[0].name,
-            component: routeData[0].component,
-          });
-
-          // Call the next components arePagePrerequisitesValid method before load.
-          // If it returns false, use the 404 logic.
-          const nextComponent = await router.getRoutes().filter((x) => x.name === routeData[0].name)[0].components.default();
-
-          if (!arePagePrerequisitesValid(nextComponent)) {
-            await GoToFunnelStartOn404(next);
-          }
-
-          // Assign current query string parameters, as well as our fmgPage one.
-          next({
-            name: routeData[0].name,
-            query: Object.assign(to.query, { fmgPage: routeData[0].name }),
-            params: to.params
-          });
-        } catch (error) {
-          console.log(error);
-
-          // If we don't have a route, go to our 404 page.
           await GoToFunnelStartOn404(next);
         }
+
+        // On entering the funnel "fresh", read cookie information, decide what to do next.
+        if (from.redirectedFrom === undefined) {
+          const loadOrderResponse = await loadOrderIfPresent();
+          const pageToRedirectTo = await getPageToRouteExistingOrderTo(to, loadOrderResponse);
+
+          // If getPageToRouteExistingOrderTo determines that the return user needs to
+          // go back to heritage funnel, send them there and stop our current navigation.
+          if (pageToRedirectTo === 'heritage') {
+            await navigateToHeritageFunnel();
+            return next(false);
+          }
+
+
+          // Assign our fmgPage so it will load normally like the other pages.
+          to.query.fmgPage = pageToRedirectTo;
+        }
+
+        // Process funnel cookie.
+        updateOrCreateFunnelCookie();
+
+        // If we already have our route, go to it.
+        if (router.hasRoute(to.query.fmgPage)) {
+          // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
+          let component = router.getRoutes().filter((x) => x.name === to.query.fmgPage)[0].components;
+
+          // If the component hasn't been loaded fully, load it before we check prerequisites.
+          if (component.default.methods === undefined) {
+            component = await component.default();
+          }
+
+          if (!arePagePrerequisitesValid(component)) {
+            await GoToFunnelStartOn404(next);
+          }
+
+          return next({ name: to.query.fmgPage, query: to.query, params: to.params });
+        }
+
+        // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
+        const routeData = await GetRouteInfoFromPageName(to.query.fmgPage);
+
+        // Add our dynamic route.
+        router.addRoute({
+          path: routeData[0].path, // Always the same path, because we control it with query strings.
+          name: routeData[0].name,
+          component: routeData[0].component,
+        });
+
+        // Call the next components arePagePrerequisitesValid method before load.
+        // If it returns false, use the 404 logic.
+        const nextComponent = await router.getRoutes().filter((x) => x.name === routeData[0].name)[0].components.default();
+
+        if (!arePagePrerequisitesValid(nextComponent)) {
+          await GoToFunnelStartOn404(next);
+        }
+
+        // Assign current query string parameters, as well as our fmgPage one.
+        next({
+          name: routeData[0].name,
+          query: Object.assign(to.query, { fmgPage: routeData[0].name }),
+          params: to.params
+        });
+      } catch (error) {
+        console.log(error);
+
+        // If we don't have a route, go to our 404 page.
+        await GoToFunnelStartOn404(next);
       }
     },
   },

src/router/router-constants/fmgPage-values.js

@@ -11,6 +11,7 @@ const fmgPageValues = {
   LICENSE_PLATE_LOOKUP: "license-plate-lookup",
   REVEAL: "reveal",
   ESTIMATE: "estimate",
+  ADDRESS_VEHICLES: "address-vehicles",
 };
 
 export { fmgPageValues };

src/router/router-constants/navigation-scenarios.js

@@ -4,7 +4,9 @@ const navigationScenarios = {
   SELECTED_MAKE: "SELECTED_MAKE",
   SELECTED_STYLE: "SELECTED_STYLE",
   CLICKED_BACK: "CLICKED_BACK",
+  CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",
   CLICKED_FORWARD: "CLICKED_FORWARD",
+  CLICKED_FORWARD_WITH_VIN: "CLICKED_FORWARD_WITH_VIN",
   SELECTED_PARTS: "SELECTED_PARTS",
   SELECTED_DAMAGE_WITH_SINGLE_PART: "SELECTED_DAMAGE_WITH_SINGLE_PART",
   SELECTED_DAMAGE_WITH_MULTIPLE_PARTS: "SELECTED_DAMAGE_WITH_MULTIPLE_PARTS",

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

@@ -1,6 +1,5 @@
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
-import { applicationConfig } from "@/constants/application-config";
 
 const routingTable = [
   {
@@ -58,6 +57,10 @@ const routingTable = [
         scenario: navigationScenarios.CLICKED_BACK,
         destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
       },
+      {
+        scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN,
+        destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+      },
       {
         scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
         destinationFmgPageValue: fmgPageValues.REVEAL
@@ -109,6 +112,10 @@ const routingTable = [
         scenario: navigationScenarios.CLICKED_BACK,
         destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
       },
+      {
+        scenario: navigationScenarios.CLICKED_BACK_WITH_VIN,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },
       {
         scenario: navigationScenarios.VIN_LOOKUP,
         destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,

src/store/index.js

@@ -45,6 +45,12 @@ const getDefaultState = () => {
         glassParts: null,
         otherParts: null
       },
+      payment:{
+        isInsurance: null,
+        insuranceCoverage: {
+          isVerified: null
+        }
+      },
       referralNumber: null,
       referralDate: null,
       referralCorrelationId: null,
@@ -120,6 +126,12 @@ export const mutations = {
   updateParentAcctNumber(state, parentAcctNumber) {
     state.order.parentAccountNumber = parentAcctNumber;
   },
+  updateIsInsurance(state, isInsurance) {
+    state.order.payment.isInsurance = isInsurance;
+  },
+  updateInsuranceVerifiedStatus(state, isVerified) {
+    state.order.payment.insuranceCoverage.isVerified = isVerified;
+  },
 
 
   // EVENT BUS MUTATIONS
@@ -176,6 +188,7 @@ export const mutations = {
     state.order.referralNumber = orderInformation.referralNumber;
     state.order.referralDate = orderInformation.referralDate;
     state.order.referralCorrelationId = orderInformation.referralCorrelationId;
+
     state.order.vehicle = Object.assign(state.order.vehicle, {
       year: orderInformation.vehicle?.year,
       make: orderInformation.vehicle?.make,
@@ -187,12 +200,17 @@ export const mutations = {
       imageVifNumber: orderInformation.vehicle?.imageVifNumber,
       imageColor: orderInformation.vehicle?.imageVifColor
     });
+
     state.order.damage.glassToReplace = orderInformation.glassToReplace;
     state.order.damage.isRepair = orderInformation.isRepair;
     state.order.damage.numberOfChips = orderInformation.numberOfChips;
+
     state.order.lineItems.glassParts = orderInformation.parts;
     state.order.parentAccountNumber = orderInformation.parentAccountNumber;
     state.order.serviceLocation.zipCode = orderInformation.zipCode;
+
+    state.order.payment.isInsurance = orderInformation.IsInsuranceOrder;
+    state.order.payment.insuranceCoverage.isVerified = orderInformation?.insuranceInfo.coverageVerified;
   }
 }
 
@@ -210,11 +228,10 @@ export const getters = {
   eventBus: (state) => state.applicationUser.eventBus,
   damage: (state) => state.order.damage,
   lineItems: (state) => state.order.lineItems,
-  pageData: (state) => (page) => {
+  pageData: (state) => (page) => { return state.applicationUser.pageData[page]; },
-    return state.applicationUser.pageData[page];
-  },
   applicationUser: (state) => state.applicationUser,
   order: (state) => state.order,
+  payment: (state) => state.order.payment,
 }
 
 // Export Actions

src/ux-components/button-main/button-main.spec.js

@@ -22,7 +22,7 @@ describe("buttonMain.vue", () => {
     // Act
     const wrapper = shallowMount(buttonMain, {
       propsData: {
-        isDisabled: true,
+        isForwardActionDisabled: true,
       },
     });