Merge pull request #7 from Safelite/feature/Digital/SSR-39

Feature/digital/ssr 39

src/App.vue

@@ -6,7 +6,9 @@
     </transition>
   </router-view>
 </template>
+
 <style lang="scss">
   @import "./node_modules/bootstrap/scss/bootstrap";
   @import "@/styles/common-animations.scss";
+
 </style>

src/common-components/nav-button/nav-button.vue

@@ -0,0 +1,39 @@
+<template>
+    <input v-if="type == 'button'" type="button" class="nav-button" v-bind:value="text" v-on:click="navTo"/>
+    <p v-else type="" class="nav-text" v-on:click="navTo">{{text}}</p>
+</template>
+
+<script>
+    
+    export default({
+        name: "nav-button",
+        props: {
+            text: String,
+            scenario: String,
+            type: String,
+        },
+        methods: {
+            navTo(){
+                this.$router.navigate(this.scenario, this.$route)
+            }
+        }
+    })
+</script>
+
+<style lang="scss" scoped>
+    .nav-button {
+        background-color: lightgray;
+        padding: 2.5px;
+        border-radius: 5px;
+        min-width: 70px;
+        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+        font-size: 14px;
+    }
+
+    .nav-text {
+        color: blue;
+        cursor: pointer;
+        text-decoration: underline;        
+    }
+    
+</style>

src/global-methods.spec.js

@@ -0,0 +1,4 @@
+import axios from 'axios';
+import '@/global-methods.js';
+
+test.todo("Need to add some tests here");

src/layouts/error-404/error-404.vue

@@ -1,5 +1,7 @@
 <template>
+<div>
     404: Page Not Found
+</div>
 </template>
 
 <script>

src/layouts/vehicle-year/vehicle-year.vue

@@ -0,0 +1,17 @@
+<template>
+<div>
+    <div class="fade-on-route-transition">
+        <navButton type="button" text="back" :scenario="this.navigationScenarios.CLICKED_BACK"></navButton>
+        <p>Vehicle Year Placeholder</p>
+    </div>
+</div>
+</template>
+
+<script>
+    import navButton from '@/common-components/nav-button/nav-button.vue';
+
+    export default {
+        name: 'vehicle-year',
+        components: { navButton },
+    }
+</script>

src/layouts/welcome-page/welcome-page.vue

@@ -1,11 +1,21 @@
 <template>
-    <p>Welcome Page Placeholder</p>
+<div>
+    <div class="fade-on-route-transition">
+        <p>Welcome Page Placeholder</p>
+        <br />
+        <navButton type="button" text="Next" :scenario="this.navigationScenarios.CLICKED_FORWARD"></navButton>
+        <navButton text="Google" :scenario="this.navigationScenarios.CLICKED_TEST"></navButton>
+    </div>
+</div>
 </template>
 
 <script>
+    import navButton from "@/common-components/nav-button/nav-button.vue";
+
     export default {
-        name: 'welcome-page'
-    }
+    name: "welcome-page",
+    components: { navButton },
+}
 </script>
 
 <style scoped>

src/main.js

@@ -5,12 +5,14 @@ import router from './router';
 import "../node_modules/bootstrap/dist/js/bootstrap.js";
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import { useMainStore } from './store';
+import baseMixin from "@/mixins/base-mixin.js";
 
 const vueApp = createApp(App);
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 vueApp.use(pinia);
 vueApp.config.globalProperties.$store = useMainStore();
+vueApp.mixin(baseMixin);
 vueApp.use(router);
 vueApp.mount("#app");
 

src/router/index.js

@@ -1,9 +1,10 @@
 import { createWebHistory, createRouter } from "vue-router";
-import { lazyLoadComponent } from "./dynamic-routing/component-loader";
-import { endpoints } from "../constants/mock-endpoints";
+import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader";
+import { endpoints } from "@/constants/mock-endpoints";
 import globalMethods from "@/global-methods";
 import {issPageValues} from '@/router/router-constants/issPage-values';
-
+import { routingTable } from "@/router/router-constants/routing-table";
+import { useMainStore } from '@/store';
 
 const routes = [
     {
@@ -12,18 +13,13 @@ const routes = [
         async beforeEnter(to, from, next) {
             try {
 
-                let issPage = to.query.issPage;
-                
-                if(issPage === undefined)
-                {
-                    issPage = issPageValues.WELCOME_PAGE;
+                to.query.issPage = !to.query.issPage ? issPageValues.WELCOME_PAGE : to.query.issPage;
+
+                if (router.hasRoute(to.query.issPage)) {
+                    return next({ name: to.query.issPage, query: to.query, params: to.params });
                 }
 
-                if (router.hasRoute(issPage)) {
-                    return next({ name: issPage, query: to.query, params: to.params });
-                }
-
-                const routeData = await GetRouteInfoFromPageName(issPage);
+                const routeData = await GetRouteInfoFromPageName(to.query.issPage);
 
                 if(routeData[0].name.toLowerCase() === "error")
                 {
@@ -82,10 +78,16 @@ async function GetRouteInfoFromPageName(pageName) {
     });
   
     return routeData;
+};
+
+router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => {
+
+    navigate(scenario, currentRoute, false, optionalQuery, optionalParams);
+  
   }
 
 // Navigate to the next route, depending on the scenario.
-async function navigate(scenario, currentRoute, optionalQuery = {}, optionalParams = {}) {
+function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) {
     if (!scenario) {
         console.error("No scenario provided. Please review the routing table.");
         return;
@@ -93,36 +95,59 @@ async function navigate(scenario, currentRoute, optionalQuery = {}, optionalPara
 
     // Match our maps up and navigate if we have a destination.
     const matchingScenarioMap = getNavigationMap(scenario, currentRoute);
-    const destinationIssPageValue = matchingScenarioMap.destinationIssPageValue;
 
-    if (destinationIssPageValue !== undefined) {
+    if (!matchingScenarioMap){
+        console.error("No matching scenario found. Please review the routing table.");
+        return;        
+    } 
+
+    if (matchingScenarioMap.destinationIssPageValue) {
         // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our issPage one.
         router.push({
             name: "root",
             query: Object.assign(optionalQuery, {
-                issPage: destinationIssPageValue,
+                issPage: matchingScenarioMap.destinationIssPageValue,
             }),
             params: optionalParams
         });
-    } else if (matchingScenarioMap.destinationUrl !== undefined) {
+    } else if (matchingScenarioMap.destinationUrl) {
         navigateToUrl(matchingScenarioMap.destinationUrl, optionalQuery);
     }
-}
+};
+
+// Navigate to an external url.
+function navigateToUrl(url, optionalQuery = {}) {
+    // possibly show some loading screen in the future here.
+    let externalUrl = new URL(url);
+  
+    for (const queryKey in optionalQuery) {
+      externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
+    }
+    
+    window.location.assign(externalUrl);
+};
 
 // Get navigation map depending on the scenario and the current 'page' you're on.
-function getNavigationMap(scenario, currentRoute) {
+function getNavigationMap (scenario, currentRoute) {
     const issPageValue = currentRoute.query.issPage;
-    const matchedQueryValue = routingTable(store)
+    try {
+        const matchedQueryValue = routingTable(useMainStore())
         .filter(
             (item) =>
                 item.issPageValue === issPageValue &&
                 item.maps.filter((map) => map.scenario === scenario).length > 0
-        )
-        .map((m) => m.maps.filter((map) => map.scenario === scenario))[0]
-        .filter(x => x.filter === true || x.filter === undefined);
+        );
 
-    return matchedQueryValue[0];
-}
+        let maps = matchedQueryValue ? matchedQueryValue.map((m) => m.maps.filter((map) => map.scenario === scenario))[0] : undefined;
+        
+        return maps ? maps.filter(x => x.filter === true || x.filter === undefined)[0] : undefined;
+    }
+    catch (e) {
+        console.error(e);
+        return undefined;
+    }
+   
+};
 
 function GoToStartOn404(next) {
     const errorPageName = issPageValues.ERROR_404;

src/router/router-constants/navigation-scenarios.js

@@ -5,6 +5,9 @@ const navigationScenarios = {
   
     // YMMS
     SELECTED_YEAR: "SELECTED_YEAR",
+
+    // TESTING
+    CLICKED_TEST: "CLICKED_TEST"
   };
   
   export { navigationScenarios };

src/router/router-constants/routing-table.js

@@ -5,23 +5,27 @@ import { navigationScenarios } from "@/router/router-constants/navigation-scenar
 const routingTable = function(store) {
   return [
     {
-      issPageValue: issPageValues.VEHICLE_MAKE,
+      issPageValue: issPageValues.VEHICLE_YEAR,
       maps: [
         {
           scenario: navigationScenarios.CLICKED_BACK,
-          issPageValue: "WELCOME_PAGE"
+          destinationIssPageValue: issPageValues.WELCOME_PAGE
         },
       ],
     },
     {
-      issPageVlue: issPageValues.WELCOME_PAGE,
+      issPageValue: issPageValues.WELCOME_PAGE,
       maps: [
         {
           scenario: navigationScenarios.CLICKED_FORWARD,
-          issPageValue: "VEHICLE_MAKE"
+          destinationIssPageValue: issPageValues.VEHICLE_YEAR,
+        },
+        {
+          scenario: navigationScenarios.CLICKED_TEST,
+          destinationUrl: "https://www.google.com"
         }
       ]
-    }
+    },
   ];
 };