CSR-1855

CSR-1855 route to a bailout page when an api call returns a 500.  500 errors cause the current page to hang.

src/global-methods.js

@@ -51,6 +51,7 @@ export default {
                 },
                 (error) => {
                     console.error(error);
+                    console.log("Error calling: " + endpoint + " payload: " + JSON.stringify(payload));
 
                     if (logApiCall) {
                         analyticsMixIn.methods.pushEventToGA(
@@ -61,7 +62,7 @@ export default {
                         );
                     }
 
-                    //router.navigateError();
+                    router.navigateError();
                     return reject(error.response);
                 }
             );

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) {