From d9b5902ea4acb3728cfa6702b982fb43a5424380 Mon Sep 17 00:00:00 2001
From: CarlNation <32103961+CarlNation@users.noreply.github.com>
Date: Mon, 26 Feb 2024 09:35:33 -0500
Subject: [PATCH] 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           |  3 +-
 src/layouts/bailout/bailout.vue | 79 +++++++++++++++++++++++++++++++++
 src/router/index.js             | 11 ++++-
 3 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/bailout/bailout.vue

diff --git a/src/global-methods.js b/src/global-methods.js
index f2821343d..6d0fc7c0c 100644
--- a/src/global-methods.js
+++ b/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);
                 }
             );
diff --git a/src/layouts/bailout/bailout.vue b/src/layouts/bailout/bailout.vue
new file mode 100644
index 000000000..bbd1670c3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 2373b6e48..1af870e72 100644
--- a/src/router/index.js
+++ b/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) {