POC

package-lock.json

@@ -15,6 +15,7 @@
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
         "jest-junit": "^13.0.0",
+        "mitt": "^3.0.0",
         "vue": "^3.0.0",
         "vue-plugin-load-script": "^2.1.0",
         "vue-router": "^4.0.11",
@@ -16874,6 +16875,11 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+    },
     "node_modules/mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -37798,6 +37804,11 @@
         "through2": "^2.0.0"
       }
     },
+    "mitt": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+      "integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
+    },
     "mixin-deep": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",

package.json

@@ -16,6 +16,7 @@
     "core-js": "^3.6.5",
     "http-status-codes": "^2.1.4",
     "jest-junit": "^13.0.0",
+    "mitt": "^3.0.0",
     "vue": "^3.0.0",
     "vue-plugin-load-script": "^2.1.0",
     "vue-router": "^4.0.11",

src/App.vue

@@ -1,3 +1,23 @@
 <template>
-  <router-view></router-view>
+<router-view></router-view>
 </template>
+
+<script>
+import alert from "@/ux-components/alert/alert";
+
+export default {
+    data: function(){
+      return {
+        alertEvent: 'string to change'
+      }
+    },
+    components: {
+        alert
+    },
+    created() {
+        this.emitter.on('alert', (alertData) => {
+            console.log(alertData);
+        });
+    }
+}
+</script>

src/constants/store-mutations.js

@@ -4,6 +4,7 @@ const storeMutations = {
   UPDATE_MODEL: "updateModel",
   UPDATE_STYLE: "updateStyle",
   UPDATE_VEHICLE: "updateVehicle",
+  UPDATE_LAST_PAGE: "updateLastPage",
 };
 
 export { storeMutations };

src/layouts/not-found/not-found.vue

@@ -1,3 +0,0 @@
-<template>
-  <p>Not Found .... :(</p>
-</template>

src/main.js

@@ -4,9 +4,11 @@ import App from "./App.vue";
 import router from "./router";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
+import mitt from 'mitt';
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 
 // Vue App Setup
+const emitter = mitt();
 const vueApp = createApp(App);
 
 vueApp.use(router);
@@ -14,4 +16,6 @@ vueApp.use(store);
 vueApp.use(LoadScript);
 vueApp.mixin(baseMixin);
 
+vueApp.config.globalProperties.emitter = emitter;
+
 vueApp.mount("#app");

src/mixins/base-mixin.js

@@ -7,6 +7,7 @@ import { widgetNames } from "@/constants/widget-names.js";
 export default {
   data() {
     return {
+      routedToLastKnownPage: false,
     };
   },
   methods: {
@@ -19,6 +20,9 @@ export default {
       return store.dispatch(type, payload);
     },
   },
+  mounted(){
+    console.log(this.$route.params);
+  },
   computed: {
     storeActions() {
       return storeActions;

src/router/index.js

@@ -1,18 +1,21 @@
+// Supporting files
 import { createWebHistory, createRouter } from "vue-router";
-import { storeActions } from "@/constants/store-actions.js";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
-import ComponentTest from "@/layouts/component-test/component-test.vue";
+import store from "@/store";
+import mitt from 'mitt'
 
+// Components
+import ComponentTest from "@/layouts/component-test/component-test.vue";
 import AddressPOC from "@/layouts/address-poc/address-poc.vue";
 
-import NotFound from "@/layouts/not-found/not-found.vue";
-import store from "@/store";
+
 
 const routes = [
   {
     path: "/:pathMatch(.*)*",
-    component: NotFound,
     name: "NotFound",
   },
   {
@@ -30,7 +33,7 @@ const routes = [
     beforeEnter(to, from, next) {
       // If we have no query string, or we don't have the FmgPage query string.
       if (to.query.fmgPage === undefined) {
-        RetainStructureAndGoTo404(to, next);
+        GoToLastPageFor404(next, store.getters.navigation.lastPage);
       } else {
         // If we already have our route, go to it.
         if (router.hasRoute(to.query.fmgPage)) {
@@ -50,6 +53,9 @@ const routes = [
               component: routeData[0].component,
             });
 
+            // Assign last route information
+            store.commit(storeMutations.UPDATE_LAST_PAGE, from.query.fmgPage);
+
             // Assign current query string parameters, as well as our fmgPage one.
             next({
               name: routeData[0].name,
@@ -57,11 +63,10 @@ const routes = [
             });
           })
           .catch((error) => {
-            // If we can't find the route, go to the 404 page.
-            RetainStructureAndGoTo404(to, next);
+            // If we can't find the route, go to the last known page.
+            GoToLastPageFor404(next, store.getters.navigation.lastPage);
 
-            console.log("error:");
-            console.log(error);
+            console.log("Cannot find route, navigating to last page:", error);
           });
       }
     },
@@ -153,13 +158,13 @@ function GetRouteInfoFromPageName(pageName) {
   });
 }
 
-// Go to our 404 page but retain our structure when we go there (path, queryString, hash).
-function RetainStructureAndGoTo404(to, next) {
+// Go to our last known page the user was on for a 404.
+function GoToLastPageFor404(next, lastPageName) {
+
+
   next({
-    name: "NotFound",
-    params: { pathMatch: to.path.split("/").slice(1) },
-    query: to.query,
-    hash: to.hash,
+    path: '/',
+    query: { fmgPage: lastPageName },
   });
 }
 

src/store/index.js

@@ -5,11 +5,7 @@ import createPersistedState from "vuex-persistedstate";
 import globalMethods from "@/global-methods";
 
 export default createStore({
-  plugins: [
-    createPersistedState({
-      storage: window.sessionStorage,
-    }),
-  ],
+  plugins: [createPersistedState()],
 
   // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
   //    * The CMS can reference the fields by name
@@ -58,6 +54,9 @@ export default createStore({
     },
     applicationUser: {
       experiments: null,
+      navigation: {
+        lastPage: 'vehicle-year' // our default value is the start page.
+      }
     },
   },
   // See IMPORTANT note at top of "state" declaration.
@@ -78,10 +77,14 @@ export default createStore({
     updateVehicle(state, data) {
       state.order.vehicle.carId = data.carId;
       state.order.vehicle.category = data.category;
+    },
+    updateLastPage(state, page) {
+      state.applicationUser.navigation.lastPage = page;
     }
   },
   getters: {
-    vehicle: state => state.order.vehicle
+    vehicle: state => state.order.vehicle,
+    navigation: state => state.applicationUser.navigation
   },
   actions: {
     // Vehicle API Actions