Spinner updates, refactored for back button

src/layouts/address-lookup/address-lookup.spec.js

@@ -2,6 +2,7 @@
 import addressLookup from '@/layouts/address-lookup/address-lookup.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
@@ -84,6 +85,8 @@ function setupMocks({
 
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
@@ -164,7 +167,8 @@ describe('address-lookup.vue', () => {
         });
 
         // eslint-disable-next-line max-len
-        test('if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert',
+        test(
+            'if the looking up VIN by address is not allowed in the state selected display the Vin Lookup By HomeAddress Not Allowed Alert',
             async () => {
             // Arrange
                 const mockRegistrationAddress = {
@@ -208,7 +212,8 @@ describe('address-lookup.vue', () => {
 
                 // Assert
                 expect(wrapper.findComponent({ ref: 'alertVinLookupsByHomeAddressNotAllowed' }).isVisible()).toBe(true);
-            });
+            }
+        );
 
         test('if no vehicles found, display Vin Not Found alert', async () => {
             // Arrange
@@ -251,10 +256,10 @@ describe('address-lookup.vue', () => {
             });
 
             // Act
-            await wrapper.vm.backButtonAction();
+            await wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
         });
 
         test('if the car entered matches one of the vehicles found navigate forward', async () => {
@@ -358,7 +363,8 @@ describe('address-lookup.vue', () => {
         });
 
         // eslint-disable-next-line max-len
-        test('if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page',
+        test(
+            'if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page',
             async () => {
             // Arrange
                 const mockRegistrationAddress = {

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

@@ -62,7 +62,7 @@
                                         :isDisabled="!meta.valid"
                                         :isForwardActionDisabled="!meta.valid"
                                         @ForwardClicked="forwardButtonAction"
-                                        @backClicked="backButtonAction" />
+                                        @backClicked="navigateBack" />
                                 </div>
                             </div>
                         </div>
@@ -205,11 +205,6 @@ export default {
         arePagePrerequisitesValid() {
             return useMainStore().order.vehicle.carId !== null;
         },
-
-        backButtonAction() {
-            // route to move backwards
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         attachCustomEvents() {
             this.prependActionToMethod(this, this.forwardButtonAction, () => {
                 this.pushEventToGA(

src/layouts/address-vehicles/address-vehicles.spec.js

@@ -1,4 +1,5 @@
 import addressVehicles from '@/layouts/address-vehicles/address-vehicles.vue';
+import baseMixin from '@/mixins/base-mixin';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
@@ -115,6 +116,8 @@ function setupMocks({
 
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
 
@@ -127,10 +130,10 @@ describe('address-vehicles.vue', () => {
         const { wrapper } = setupMocks({});
 
         // Act
-        await wrapper.vm.backButtonAction();
+        await wrapper.vm.navigateBack();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toBeCalled();
+        expect(wrapper.vm.$router.navigateWithSpinner).toBeCalled();
     });
 
     test('navigateForward should be called if forwardButtonAction is run', async () => {
@@ -190,7 +193,8 @@ describe('address-vehicles.vue', () => {
     });
 
     // eslint-disable-next-line max-len
-    test('Should navigate to CLICKED_FORWARD scenario if carId is different and selected glass not available for vehicle on navigateForward',
+    test(
+        'Should navigate to CLICKED_FORWARD scenario if carId is different and selected glass not available for vehicle on navigateForward',
         async () => {
         // Arrange
             const { wrapper } = setupMocks({});

src/layouts/address-vehicles/address-vehicles.vue

@@ -56,7 +56,7 @@
         ref="siteFooter"
         cmsWidgetName="SiteFooterWidget"
         :isForwardActionDisabled="!meta.valid"
-        @backClicked="backButtonAction"
+        @backClicked="navigateBack"
         @forwardClicked="forwardButtonAction" />
       </div>
     </div>
@@ -231,9 +231,6 @@ export default {
             }
             return false;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         async forwardButtonAction() {
             const vinLookup = await useMainStore()
                 .lookupVehicleByVin(this.selectedVehicle.vin)

src/layouts/capability-questions/capability-questions.vue

@@ -15,7 +15,7 @@
         :validationRules="rules.optionRequired"
         :index="currentGlassIndex"
         @forwardButtonAction="forwardButtonAction"
-        @backClick="navigateBack" />
+        @backClick="navigateBackByVehicleQuestions" />
   </Form>
 </template>
 <script>

src/layouts/contact-details/contact-details.spec.js

@@ -4,6 +4,7 @@ import { createTestingPinia } from '@pinia/testing';
 import contactDetails from '@/layouts/contact-details/contact-details.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { getRandomString, getRandomInt, getRandomBoolean } from '@/helpers/data-generation.js';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
@@ -234,16 +235,17 @@ describe('contactDetails.vue', () => {
             // Arrange
             const wrapper = shallowMount(contactDetails, getMountOptions({
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 }
             }));
+            wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
 
             // Act
-            wrapper.vm.backButtonAction();
+            wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
-            expect(wrapper.vm.$router.navigate)
+            expect(wrapper.vm.$router.navigateWithSpinner)
                 .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
         });
         test('Forward button clicked triggers navigation', () => {

src/layouts/contact-details/contact-details.vue

@@ -55,7 +55,6 @@
                         checkboxName="requestTextUpdates"
                         buttonID="requestTextUpdates"
                         :checkboxLabel="requestTextUpdatesCheckboxText" />
-
                     <textareaQuestion
                         ref="notesQuestion"
                         v-model="notesForTechnician"
@@ -66,11 +65,10 @@
                         :cmsWidgetName="widget.notesQuestion"
                         maxLength="250"
                         :inputRows="4" />
-
                     <p
                         ref="disclaimerText"
                         class="caption dark-gray mt-6">
-                    {{ textUpdateDisclaimerText }} I also agree to Safelite's
+                        {{ textUpdateDisclaimerText }} I also agree to Safelite's
                         <textLink
                             ref="privacyPolicyLink"
                             class="normal-line-height"
@@ -85,14 +83,13 @@
                             text="Terms of Use"
                             href="//www.safelite.com/terms-of-use" />.
                     </p>
-
                     <siteFooter
                         ref="siteFooter"
                         class="my-5"
                         :cmsWidgetName="widget.siteFooter"
                         :isForwardActionDisabled="!meta.valid"
                         @forwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -186,12 +183,6 @@ export default {
     },
     methods:
     {
-        /**
-         * @summary Steps to perform when back button clicked.
-         */
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         /**
          * @summary Steps to perform when forward button clicked.
          */

src/layouts/coverage-statement/coverage-statement.vue

@@ -87,7 +87,7 @@
                                 class="mt-5"
                                 cmsWidgetName="SiteFooterWidget"
                                 :isForwardActionDisabled="!meta.valid"
-                                @backClicked="navigateBack"
+                                @backClicked="navigateBackByVehicleQuestions"
                                 @forwardClicked="forwardButtonAction" />
                           </div>
                       </div>

src/layouts/duplicate-check/duplicate-check.spec.js

@@ -4,6 +4,7 @@ import { createTestingPinia } from '@pinia/testing';
 import duplicateCheck from '@/layouts/duplicate-check/duplicate-check.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
 import { getRandomString } from '@/helpers/data-generation.js';
@@ -333,16 +334,17 @@ describe('duplicateCheck.vue', () => {
             // Arrange
             const wrapper = shallowMount(duplicateCheck, getMountOptions({
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 }
             }));
+            wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
 
             // Act
-            wrapper.vm.backButtonAction();
+            wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
-            expect(wrapper.vm.$router.navigate)
+            expect(wrapper.vm.$router.navigateWithSpinner)
                 .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
         });
 

src/layouts/duplicate-check/duplicate-check.vue

@@ -33,7 +33,7 @@
                         :cmsWidgetName="widget.siteFooter"
                         :isForwardActionDisabled="!meta.valid"
                         @forwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -122,12 +122,6 @@ export default {
         }
     },
     methods: {
-        /**
-         * @summary Steps to perform when back button clicked.
-         */
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         /**
          * @summary Steps to perform when forward button clicked.
          */

src/layouts/license-plate-lookup/license-plate-lookup.spec.js

@@ -2,6 +2,7 @@
 import licensePlateLookup from '@/layouts/license-plate-lookup/license-plate-lookup.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
@@ -93,6 +94,8 @@ function setupMocks({
 
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
@@ -189,10 +192,10 @@ describe('license-plate-lookup.vue', () => {
                 undefined,
                 (c) => c(wrapper.vm)
             );
-            await wrapper.vm.backButtonAction();
+            await wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
         });
 
         test('License plate found and matches entered vehicle => navigateForwardWithSingleCarMatch', async () => {
@@ -213,7 +216,7 @@ describe('license-plate-lookup.vue', () => {
             expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
         });
 
-        // eslint-disable-next-line max-len
+        // eslint-disable-next-line max-len, function-paren-newline
         test('if a different vehicle is found than the one entered and the selected glass is not available for that vehicle, navigate back to vehicle-damage page',
             async () => {
             // Arrange

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

@@ -64,7 +64,7 @@
                                         class="mt-5"
                                         :isForwardActionDisabled="!meta.valid"
                                         cmsWidgetName="SiteFooterWidget"
-                                        @backClicked="backButtonAction"
+                                        @backClicked="navigateBack"
                                         @forwardClicked="forwardButtonAction" />
                                 </div>
                             </div>
@@ -223,10 +223,6 @@ export default {
         loadDefaultsFromStore() {
             this.customerQuestions = this.mainStore.customerData.addressQuestions.state;
         },
-        backButtonAction() {
-            // route to move backwards
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         attachCustomEvents() {
             this.prependActionToMethod(this, this.forwardButtonAction, () => {
                 this.pushEventToGA(

src/layouts/molding-questions/molding-questions.vue

@@ -16,7 +16,7 @@
       :validationRules="rules.optionRequired"
       :index="currentGlassIndex"
       @forwardButtonAction="forwardButtonAction"
-      @backClick="navigateBack" />
+      @backClick="navigateBackByVehicleQuestions" />
   </Form>
 </template>
 <script>

src/layouts/order-confirmation/order-confirmation.vue

@@ -14,7 +14,7 @@
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -56,9 +56,6 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
             forwardButtonAction() {
                 return this.navigateForward();
             },

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

@@ -14,7 +14,7 @@
             :validationRules="rules.optionRequired"
             :index="currentGlassIndex"
             @forwardButtonAction="forwardButtonAction"
-            @backClick="navigateBack" />
+            @backClick="navigateBackByVehicleQuestions" />
     </Form>
 </template>
 

src/layouts/payment-page/payment-page.vue

@@ -14,7 +14,7 @@
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -68,14 +68,9 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
-
             forwardButtonAction() {
                 this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
             },
-
             navigateForward() {
             }
         }

src/layouts/policy-endorsements/policy-endorsements.spec.js

@@ -2,6 +2,7 @@
 import policyEndorsements from '@/layouts/policy-endorsements/policy-endorsements.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios';
@@ -128,16 +129,17 @@ describe('policyEndorsements.vue', () => {
             // Arrange
             const wrapper = shallowMount(policyEndorsements, getMountOptions({
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 }
             }));
+            wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
 
             // Act
-            wrapper.vm.backButtonAction();
+            wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
-            expect(wrapper.vm.$router.navigate)
+            expect(wrapper.vm.$router.navigateWithSpinner)
                 .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
         });
         test('Forward button clicked with valid car id triggers navigation', () => {
@@ -170,7 +172,7 @@ describe('policyEndorsements.vue', () => {
             }));
 
             wrapper.setData({
-                hasValidCarId: false,
+                hasValidCarId: false
             });
 
             // Act

src/layouts/policy-endorsements/policy-endorsements.vue

@@ -48,7 +48,7 @@
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
                         @forwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -136,9 +136,6 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
             async forwardButtonAction() {
                 // TO DO: remove hard coding and update data format once service returns endorsement questions
                 if (this.educatorEndorsement) {

src/layouts/policy-holder-details/policy-holder-details.spec.js

@@ -1,7 +1,7 @@
 import policyHolderDetails from '@/layouts/policy-holder-details/policy-holder-details.vue';
 
 // Supporting files
-// Supporting files
+import baseMixin from '@/mixins/base-mixin';
 import { shallowMount } from '@vue/test-utils';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
@@ -60,6 +60,8 @@ function setupMocks() {
 
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
     wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
@@ -91,10 +93,10 @@ describe('navigation', () => {
         });
 
         // Act
-        await wrapper.vm.backButtonAction();
+        await wrapper.vm.navigateBack();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+        expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
     });
 
     test('if the car entered matches one of the vehicles found navigate forward', async () => {

src/layouts/policy-holder-details/policy-holder-details.vue

@@ -43,7 +43,7 @@
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
                         @ForwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -120,10 +120,6 @@ export default {
     },
     methods:
     {
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-
         async forwardButtonAction() {
             this.mainStore.updatePolicyHolderDetails(this.customerQuestions);
             return this.navigateForward();

src/layouts/provider-preference/provider-preference.vue

@@ -26,7 +26,7 @@
                         class="mt-5"
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="isForwardActionDisabled"
-                        @backClicked="backButtonAction"
+                        @backClicked="navigateBack"
                         @forwardClicked="forwardButtonAction" />
                 </div>
             </div>
@@ -166,9 +166,6 @@ export default {
         arePagePrerequisiteValid() {
             return true;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         navigateForward(scenario) {
             this.$router.navigate(scenario, this.$route);
         },

src/layouts/review-page/review-page.vue

@@ -83,7 +83,7 @@
                     class="mt-5"
                     cmsWidgetName="SiteFooterWidget"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
             </div>
         </div>
     </Form>
@@ -253,9 +253,6 @@ export default {
                 && customerReqs
             );
         },
-        backButtonAction() {
-            this.$router.navigate(navigationScenarios.CLICKED_BACK, this.$route);
-        },
         editVehicle() {
             this.$router.navigateWithoutSaving(
                 navigationScenarios.CLICKED_VEHICLE_EDIT,

src/layouts/schedule-page/schedule-page.vue

@@ -53,7 +53,7 @@
                     class="mt-5"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
-                    @backClicked="backButtonAction"
+                    @backClicked="navigateBack"
                     @forwardClicked="forwardButtonAction" />
             </div>
         </div>
@@ -456,9 +456,6 @@ export default {
                 }
             }
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         forwardButtonAction() {
             this.updateSupportingItems();
             this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);

src/layouts/service-location/service-location.spec.js

@@ -1,3 +1,4 @@
+import baseMixin from '@/mixins/base-mixin';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import serviceLocation from '@/layouts/service-location/service-location.vue';
@@ -18,6 +19,9 @@ function setupMocks() {
         })
     );
 
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
+
     return { wrapper };
 }
 
@@ -92,10 +96,10 @@ describe('navigation', () => {
         });
 
         // Act
-        await wrapper.vm.backButtonAction();
+        await wrapper.vm.navigateBack();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+        expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
     });
 });
 

src/layouts/service-location/service-location.vue

@@ -86,7 +86,7 @@
                     class="mt-5"
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
-                    @backClicked="backButtonAction"
+                    @backClicked="navigateBack"
                     @forwardClicked="forwardButtonAction" />
             </div>
         </div>
@@ -329,12 +329,6 @@ export default {
                 && useMainStore().order.serviceLocation.zipCode !== null
             );
         },
-        backButtonAction() {
-            /**
-             * this.navigationScenarios comes from base-mixin
-             */
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         async reloadShopData(zipCode) {
             await this.$refs.shopQuestion.reloadShopData(zipCode);
         },

src/layouts/service-packages/service-packages.vue

@@ -27,7 +27,7 @@
                     <siteFooter
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
-                        @back-clicked="backButtonAction"
+                        @backClicked="navigateBack"
                         @ForwardClicked="forwardButtonAction" />
                 </div>
             </div>
@@ -167,9 +167,6 @@ export default {
         vapsItemsSelectedAction(vapsItemsSelected) {
             this.selectedVaps = vapsItemsSelected;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         forwardButtonAction() {
             const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, vaps: this.selectedVaps };
             if (!allGlassPartsAndItemsHavePrices(parts)) {

src/layouts/tpa-confirmation/tpa-confirmation.vue

@@ -14,7 +14,7 @@
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -63,9 +63,6 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
             async forwardButtonAction() {
                 return this.navigateForward();
             },

src/layouts/tpa-search/tpa-search.spec.js

@@ -4,6 +4,7 @@ import { createTestingPinia } from '@pinia/testing';
 import tpaSearch from '@/layouts/tpa-search/tpa-search.vue';
 
 // Supporting Files
+import baseMixin from '@/mixins/base-mixin';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { useMainStore } from '@/store';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
@@ -47,6 +48,9 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
     const wrapper = shallowMount(tpaSearch, mountOptions);
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
     wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.$router.navigateWithSpinner = jest.fn();
+    wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
+
     return { wrapper };
 }
 
@@ -957,10 +961,10 @@ describe('TPA search page', () => {
             const { wrapper } = getMountedComponent();
 
             // Act
-            wrapper.vm.backButtonAction();
+            wrapper.vm.navigateBack();
 
             // Assert
-            expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalled();
         });
         describe('forwardButtonAction', () => {
             test('invokes navigate method with safelite shop scenario when selectedProviderIsSafeliteShop true', async () => {

src/layouts/tpa-search/tpa-search.vue

@@ -105,7 +105,7 @@
                         :cmsWidgetName="widget.siteFooter"
                         :isForwardActionDisabled="!meta.valid"
                         @ForwardClicked="forwardButtonAction"
-                        @backClicked="backButtonAction" />
+                        @backClicked="navigateBack" />
                 </div>
             </Form>
         </div>
@@ -337,9 +337,6 @@ export default {
             this.providers = await this.getProviderButtonData();
             this.mapZipCode = this.zipCode;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         forwardButtonAction() {
             const scenario = this.selectedProviderIsSafeliteShop
                 ? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP

src/layouts/tpa-submit/tpa-submit.vue

@@ -14,7 +14,7 @@
                     cmsWidgetName="SiteFooterWidget"
                     :isForwardActionDisabled="!meta.valid"
                     @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
+                    @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -68,14 +68,9 @@ export default {
     },
     methods:
         {
-            backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-            },
-
             forwardButtonAction() {
                 return this.navigateForward();
             },
-
             navigateForward() {
                 this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD,

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

@@ -60,7 +60,7 @@
                                 class="mt-5"
                                 cmsWidgetName="SiteFooterWidget"
                                 :isForwardActionDisabled="!meta.valid"
-                                @backClicked="backButtonAction"
+                                @backClicked="navigateBack"
                                 @forwardClicked="forwardButtonAction" />
                         </div>
                     </div>
@@ -236,12 +236,6 @@ export default {
             }
             return false;
         },
-
-        backButtonAction() {
-            // route to move backwards
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
-
         getDamageLocationsFromStore() {
             const glassSelections = [];
 
@@ -268,7 +262,6 @@ export default {
 
             return glassSelections;
         },
-
         getWindshieldOptionsFromStore() {
             const windShieldOptions = {
                 selectedWindshieldDamageType: '',
@@ -315,7 +308,6 @@ export default {
 
             return windShieldOptions;
         },
-
         getDoorSidesFromStore() {
             const doorSides = [];
             if (
@@ -332,7 +324,6 @@ export default {
 
             return doorSides;
         },
-
         getDriverSideReplaceOptionsFromStore() {
             const driverSideReplaceOptions = [];
 
@@ -344,7 +335,6 @@ export default {
 
             return driverSideReplaceOptions;
         },
-
         getPassengerSideReplaceOptionsFromStore() {
             const passengerSideReplaceOptions = [];
 
@@ -356,14 +346,12 @@ export default {
 
             return passengerSideReplaceOptions;
         },
-
         getRearReplaceOptionsFromStore() {
             const rearReplaceOptions = this.mainStore.order.damage
                 .glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
 
             return rearReplaceOptions;
         },
-
         async forwardButtonAction() {
             this.mainStore.saveVehicleDamage(
                 this.isWindshieldRepair,
@@ -403,7 +391,6 @@ export default {
 
             return null;
         },
-
         selectedGlassToReplace() {
             const selectedGlassToReplace = [];
             if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {

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

@@ -1,5 +1,6 @@
 /* eslint-env jest */
 import { mount } from '@vue/test-utils';
+import baseMixin from '@/mixins/base-mixin';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios';
 import queryStrings from '@/constants/query-strings';
 import { GaActions } from '@/constants/analytics';
@@ -56,7 +57,8 @@ function setupMocks() {
     };
 
     const mockRouter = {
-        navigate: jest.fn()
+        navigate: jest.fn(),
+        navigateWithSpinner: jest.fn()
     };
 
     const mockIsVinbyAddressPermissibleToBeFalse = {
@@ -105,7 +107,8 @@ function setupMocks() {
                         }),
                         getFooterInfoBoxHeight: jest.fn(() => 80),
                         getPageNameByQueryString: jest.fn(() => 'vehicle-lookup'),
-                        pushEventToGA: jest.fn()
+                        pushEventToGA: jest.fn(),
+                        navigateBack: baseMixin.methods.navigateBack
                     }
                 }
             ],
@@ -121,6 +124,8 @@ function setupMocks() {
         }
     });
 
+    // wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
+
     return { mockRoute, mockRouter, wrapper, mockIsVinbyAddressPermissibleToBeFalse };
 }
 
@@ -178,8 +183,8 @@ describe('vehicle-lookup.vue', () => {
         const { mockRoute, mockRouter, wrapper } = setupMocks();
 
         await wrapper.get('[data-test-id="site-footer-back-button"]').trigger('click');
-        expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+        expect(mockRouter.navigateWithSpinner).toHaveBeenCalledTimes(1);
-        expect(mockRouter.navigate)
+        expect(mockRouter.navigateWithSpinner)
             .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
     });
 
@@ -264,10 +269,10 @@ describe('vehicle-lookup.vue', () => {
     });
 
     /**
-   * To Do: Error message is not displayed when running test
+     * To Do: Error message is not displayed when running test
-   * but in reality it shows up. Need to find out
+     * but in reality it shows up. Need to find out
-   * how to write a test that verifies the error message is displayed.
+     * how to write a test that verifies the error message is displayed.
-   */
+     */
     // test.only('Error message is diplayed when no selection is made
     // and "Continue" button clicked.', async () => {
     //   const { wrapper } = setupMocks();

src/layouts/vehicle-lookup/vehicle-lookup.vue

@@ -26,7 +26,7 @@
                                         cmsWidgetName="SiteFooterWidget"
                                         :isForwardActionDisabled="isForwardActionDisabled"
                                         class="mt-5"
-                                        @backClicked="backButtonAction"
+                                        @backClicked="navigateBack"
                                         @forwardClicked="forwardButtonAction" />
                                 </div>
                             </div>
@@ -96,12 +96,6 @@ export default {
         arePagePrerequisiteValid() {
             return true;
         },
-        backButtonAction() {
-            /**
-            * this.navigationScenarios comes from base-mixin
-            */
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         forwardButtonAction() {
             switch (this.selectedVinLookupMethod) {
                 case vinLookupMethodSelections.MANUALVIN:

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

@@ -220,7 +220,7 @@ describe('vehicle-parts.vue', () => {
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 },
                 route: {
                     query: {
@@ -238,10 +238,10 @@ describe('vehicle-parts.vue', () => {
             (c) => c(wrapper.vm)
         );
 
-        wrapper.vm.navigateBack();
+        wrapper.vm.navigateBackByVehicleQuestions();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+        expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
             navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
             wrapper.vm.$route
         );
@@ -252,7 +252,7 @@ describe('vehicle-parts.vue', () => {
         const { wrapper } = setupMocks({
             mountOptionsMockData: {
                 router: {
-                    navigate: jest.fn()
+                    navigateWithSpinner: jest.fn()
                 },
                 route: {
                     query: {
@@ -270,10 +270,10 @@ describe('vehicle-parts.vue', () => {
             (c) => c(wrapper.vm)
         );
 
-        wrapper.vm.navigateBack();
+        wrapper.vm.navigateBackByVehicleQuestions();
 
         // Assert
-        expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+        expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith(
             navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS,
             wrapper.vm.$route
         );

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

@@ -49,7 +49,7 @@
                                     class="mt-5"
                                     cmsWidgetName="SiteFooterWidget"
                                     :isForwardActionDisabled="isForwardActionDisabled"
-                                    @backClicked="navigateBack"
+                                    @backClicked="navigateBackByVehicleQuestions"
                                     @ForwardClicked="forwardButtonAction" />
                                 </div>
                             </div>

src/layouts/vehicle-selection/vehicle-selection.vue

@@ -63,7 +63,7 @@
                                     cmsWidgetName="SiteFooterWidget"
                                     :isForwardActionDisabled="!meta.valid"
                                     @ForwardClicked="forwardButtonAction"
-                                    @backClicked="backButtonAction" />
+                                    @backClicked="navigateBack" />
                            </div>
                        </div>
                    </div>
@@ -181,9 +181,6 @@ export default {
         arePagePrerequisitesValid() {
             return true;
         },
-        backButtonAction() {
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         async forwardButtonAction() {
             return this.navigateForward();
         },

src/layouts/vin-lookup/vin-lookup.spec.js

@@ -2,6 +2,7 @@
 import '@testing-library/jest-dom';
 import { flushPromises } from '@vue/test-utils';
 import { render, waitFor } from '@testing-library/vue';
+import baseMixin from '@/mixins/base-mixin';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
 import errorMessages from '@/constants/error-messages';
@@ -132,7 +133,8 @@ const mockRoute = {
     }
 };
 const mockRouter = {
-    navigate: jest.fn()
+    navigate: jest.fn(),
+    navigateWithSpinner: jest.fn()
 };
 const maska = jest.fn();
 jest.mock('@/helpers/damage-helper', () => ({
@@ -147,6 +149,7 @@ const mountOptions = {
             {
                 methods: {
                     getCmsContent: jest.fn(() => ''),
+                    navigateBack: baseMixin.methods.navigateBack,
                     getFooterInfoBoxHeight: jest.fn(() => 80),
                     cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'),
                     getPageNameByQueryString: jest.fn(() => ''),
@@ -275,8 +278,8 @@ describe('vin-lookup.vue', () => {
 
             await user.click(backButton);
 
-            expect(mockRouter.navigate).toHaveBeenCalledTimes(1);
+            expect(mockRouter.navigateWithSpinner).toHaveBeenCalledTimes(1);
-            expect(mockRouter.navigate).toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
+            expect(mockRouter.navigateWithSpinner).toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, mockRoute);
         });
 
         // eslint-disable-next-line max-len

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

@@ -31,7 +31,7 @@
                                         cmsWidgetName="SiteFooterWidget"
                                         :isForwardActionDisabled="!meta.valid"
                                         class="mt-5"
-                                        @backClicked="backButtonAction"
+                                        @backClicked="navigateBack"
                                         @forwardClicked="forwardButtonAction" />
                                 </div>
                             </div>
@@ -166,12 +166,6 @@ export default {
         hasValidCarId() {
             return this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0';
         },
-        backButtonAction() {
-            /**
-             * this.navigationScenarios comes from base-mixin
-             */
-            this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
-        },
         // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
         async forwardButtonAction() {
             this.resetActiveAlert();

src/mixins/base-mixin.js

@@ -23,6 +23,11 @@ export default {
             const footerInfoBox = document.querySelector('.footer#infoBox');
             return footerInfoBox ? footerInfoBox.offsetHeight : 0;
         },
+        navigateBack(vm) {
+            const self = vm ?? this;
+
+            self.$router.navigateWithSpinner(this.navigationScenarios.CLICKED_BACK, self.$route);
+        },
         savePageDataToStore(page, data) {
             useMainStore().updatePageData({ page, data });
         },

src/mixins/vehicle-questions-mixin.js

@@ -432,7 +432,7 @@ export default {
             }
         },
 
-        navigateBack(vm) {
+        navigateBackByVehicleQuestions(vm) {
             const self = vm ?? this;
             const partsOrQuestions = (
                 self.mainStore.pageData(issPageValues.CAPABILITY_QUESTIONS)
@@ -476,7 +476,7 @@ export default {
                 backNavigationScenario = navigationScenarios.CLICKED_BACK_WITH_PART_QUESTIONS;
             }
 
-            self.$router.navigate(backNavigationScenario, self.$route);
+            self.$router.navigateWithSpinner(backNavigationScenario, self.$route);
         }
     }
 };

src/mixins/vehicle-questions-mixin.spec.js

@@ -2110,14 +2110,14 @@ describe('vehicle-questions-mixin', () => {
         });
     });
 
-    describe('navigateBack', () => {
+    describe('navigateBackByVehicleQuestions', () => {
         test('current page is coverage-statement and damage is repair => go to vehicle-damage', () => {
             // Arrange
             const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT });
             useMainStore().order.damage.isRepair = true;
 
             // Act
-            wrapper.vm.navigateBack();
+            wrapper.vm.navigateBackByVehicleQuestions();
 
             // Assert
             expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
@@ -2138,7 +2138,7 @@ describe('vehicle-questions-mixin', () => {
                 wrapper.vm.hasCapabilityQuestions = jest.fn().mockReturnValue(true);
 
                 // Act
-                wrapper.vm.navigateBack();
+                wrapper.vm.navigateBackByVehicleQuestions();
 
                 // Assert
                 expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
@@ -2157,7 +2157,7 @@ describe('vehicle-questions-mixin', () => {
             wrapper.vm.hasCapabilityQuestions = jest.fn().mockReturnValue(true);
 
             // Act
-            wrapper.vm.navigateBack();
+            wrapper.vm.navigateBackByVehicleQuestions();
 
             // Assert
             expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(

src/router/index.js

@@ -221,13 +221,21 @@ router.navigate = (
     navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
 };
 
+router.navigateWithSpinner = (
+    scenario,
+    currentRoute
+) => {
+    navigate(scenario, currentRoute, undefined, undefined, undefined, true);
+};
+
 // Navigate to the next route, depending on the scenario.
 function navigate(
     scenario,
     currentRoute,
     optionalQuery = {},
     optionalParams = {},
-    optionalPageData = {}
+    optionalPageData = {},
+    forceSpinner = false
 ) {
     if (!scenario) {
         window.console.error('No scenario provided. Please review the routing table.');
@@ -242,6 +250,10 @@ function navigate(
         return;
     }
 
+    if (forceSpinner) {
+        showIssLoadingModal(true);
+    }
+
     if (scenario === navigationScenarios.CLICKED_BACK_PREVIOUS) {
         // Update page to the prevous page in the router.
         // If we need to worry about typing this in from outside of the app,