Merge pull request #1770 from Safelite/feature/CSR-1855

CSR-1855

src/global-methods.js

@@ -61,7 +61,7 @@ export default {
                         );
                     }
 
-                    //router.navigateError();
+                    router.navigateError();
                     return reject(error.response);
                 }
             );

src/global-methods.spec.js

@@ -1,6 +1,7 @@
 import globalMethods from "@/global-methods";
 import axios from "axios";
 import analyticsMixIn from "@/mixins/analytics-mixin";
+import router from "@/router";
 
 //Mock external dependencies
 jest.mock("axios");
@@ -29,6 +30,7 @@ it("Global Methods - Call Http Client - Should Reject Promise", () => {
         isError: true,
     });
     analyticsMixIn.methods.pushEventToGA = jest.fn();
+    router.navigateError = jest.fn();
 
     //Act
     globalMethods.callHttpClient(httpArgs).catch((err) => {

src/layouts/bailout/bailout.spec.js

@@ -0,0 +1,48 @@
+// Components
+import bailout from "@/layouts/bailout/bailout.vue";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+    fetchCmsContentForPage: jest.fn(),
+}));
+
+describe("bailout.vue", () => {
+    test("arePagePrerequisitesValid should be true ", async () => {
+        //Arrange
+        const { wrapper } = setupMocks();
+
+        //Act
+        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+        //Assert
+        expect(arePagePrerequisitesValid).toBe(true);
+    });
+});
+
+function setupMocks() {
+    const mountOptions = getMountOptions({});
+
+    //Mock props
+    const mockMixin = {
+        methods: {
+            getCmsContent: jest.fn(),
+        },
+    };
+
+    mountOptions.mixins = [mockMixin];
+    const wrapper = shallowMount(bailout, mountOptions);
+
+    wrapper.vm.setCmsContent = jest.fn();
+    wrapper.vm.backButtonAction = jest.fn();
+
+    return { wrapper };
+}

src/layouts/bailout/bailout.vue

@@ -0,0 +1,79 @@
+<template>
+    <Form>
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        isForwardActionDisabled="true"
+                        isSubmitHidden="true"
+                        @back-clicked="backButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "bailout",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {
+            this.$router.go(-1);
+        },
+    },
+    components: {
+        funnelHeader,
+        navbar,
+        vehicleBanner,
+        funnelSubHeader,
+        loadingModal,
+    },
+};
+</script>

src/router/index.js

@@ -32,8 +32,14 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
 import { shouldStripPromoQueryString } from "@/helpers/promotions-helper";
+import bailout from "@/layouts/bailout/bailout";
 
 const routes = [
+    {
+        path: "/bailout",
+        name: "bailout",
+        component: bailout,
+    },
     {
         path: "/",
         name: "root",
@@ -436,7 +442,10 @@ async function DisplayPageError() {
     );
 
     baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
-    location.reload();
+    router.push({
+        path: "/",
+        query: { fmgPage: "bailout" },
+    });
 }
 
 function isExistingFmgPageName(pageName) {