diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js new file mode 100644 index 000000000..504a55c46 --- /dev/null +++ b/src/constants/endpoints.js @@ -0,0 +1,8 @@ +const endpoints = { + GetRouteInfoEndpoint: { + url: '/content/api/v1/content/RouteInfo', + method: 'POST' + } +} + +export { endpoints } \ No newline at end of file diff --git a/src/constants/storeActions.js b/src/constants/storeActions.js new file mode 100644 index 000000000..e358e4dab --- /dev/null +++ b/src/constants/storeActions.js @@ -0,0 +1,5 @@ +const storeActions = { + GET_ROUTE_INFO_ACTION: "getRouteInfo", +} + +export { storeActions } \ No newline at end of file diff --git a/src/global-methods.js b/src/global-methods.js index ddd6f072e..45f291eb0 100644 --- a/src/global-methods.js +++ b/src/global-methods.js @@ -1,60 +1,30 @@ -import axios from 'axios'; -import { StatusCodes } from 'http-status-codes'; +import axios from "axios"; export default { - callHttpClient({ - method, - endpoint, - payload, - responseType = {}, - ignoreErrors = false - }) { - return new Promise((resolve, reject) => { - // Grab our accessToken from Okta. - const accessToken = this.getBearerTokenForStorage(); + callHttpClient({ method, endpoint, payload, responseType = {} }) { + return new Promise((resolve, reject) => { - // Merge payload with analytics data - const payloadAndAnalyticsData = Object.assign({}, payload, { - AppName: "Agency Advantage Dashboard" - }); + const apiGatewayUrl = "https://consumerapidev.safelite.com"; // TODO: Some environment variable + const payloadAndAnalyticsData = Object.assign({}, payload, {AppName: "FixMyGlass",}); - axios({ - method: method, - url: endpoint, - //data: payloadAndAnalyticsData, - crossdomain: true, - responseType: responseType - // headers: { - // Authorization: `Bearer ${accessToken}` - // } - }) - .then(function(response) { - if (response.data.isSuccess || (response.status == 200)) { - resolve(response); - } else { - reject(response); - } - }, error => { - let statusCode = error.response.status; - let message = 'Sorry, something happened on our end. Please try again'; - if (!ignoreErrors) { - switch (statusCode) { - case StatusCodes.UNAUTHORIZED: - this.createPromiseRejection("Unauthorized, routing back to login page.", error.response, reject, true, false); - break; - case StatusCodes.BAD_REQUEST: - this.createPromiseRejection(error.response.data, error.response, reject, true, false); - break; - } - } - }); - }) - }, - getBearerTokenForStorage() { - try { - return JSON.parse(localStorage.getItem('okta-token-storage')).accessToken.accessToken; - } catch (error) { - return ''; + axios({ + method: method, + url: `${apiGatewayUrl}${endpoint}`, + data: payloadAndAnalyticsData, + crossDomain: true, + responseType: responseType, + }).then( + function (response) { + if (response.data.isSuccess || response.status == 200) { + resolve(response); + } else { + reject(response); + } + }, + (error) => { + let statusCode = error.response.status; } - } -} \ No newline at end of file + ); + }); + }, +}; diff --git a/src/layouts/home/home.vue b/src/layouts/home/home.vue index 5a474c738..0ea31a658 100644 --- a/src/layouts/home/home.vue +++ b/src/layouts/home/home.vue @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/src/main.js b/src/main.js index 0ab4dc394..2cbd42c11 100644 --- a/src/main.js +++ b/src/main.js @@ -2,11 +2,19 @@ import { createApp } from "vue"; import App from "./App.vue"; import router from './router'; import store from '@/store'; - +import baseMixin from "@/mixins/baseMixin.js"; //Bootstrap JavaScript import "../node_modules/bootstrap/dist/js/bootstrap.js"; //Get Bootstrap and Custom Styles import "./assets/scss/custom.scss"; -createApp(App).use(router).use(store).mount("#app"); +// Vue App Setup +const vueApp = createApp(App); + +vueApp.use(router); +vueApp.use(store); + +vueApp.mixin(baseMixin); + +vueApp.mount("#app"); diff --git a/src/mixins/baseMixin.js b/src/mixins/baseMixin.js new file mode 100644 index 000000000..a64e5e190 --- /dev/null +++ b/src/mixins/baseMixin.js @@ -0,0 +1,22 @@ +import { storeActions } from "@/constants/storeActions.js"; + +export default { + methods: { + dispatchBlockingStoreAction(type, payload) { + // globalMethods.showWaitingModal(true); + + return this.dispatchNonBlockingStoreAction(type, payload) + .finally(() => { + // globalMethods.showWaitingModal(false); + });; + }, + dispatchNonBlockingStoreAction(type, payload) { + return this.$store.dispatch(type, payload); + }, + }, + computed: { + storeActions() { + return storeActions; + }, + }, +} \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 2f8795001..1426e6551 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,7 +1,8 @@ import { createWebHistory, createRouter } from "vue-router"; -import { getRouteData } from "@/router/dynamic-routing/route-compile.js"; +import { storeActions } from "@/constants/storeActions.js"; import NotFound from "@/layouts/notFound/notFound.vue"; import Home from "@/layouts/home/home.vue"; +import store from "@/store"; const routes = [ { @@ -12,12 +13,12 @@ const routes = [ { path: "/", Name: "Home", - component: Home + component: Home, }, ]; const router = createRouter({ - history: createWebHistory('/fmg/'), + history: createWebHistory("/fmg/"), routes, }); @@ -26,18 +27,18 @@ router.beforeEach(async (to, from, next) => { }); async function GoToDynamicRoute(to, next) { - let doesRouteResolve = router.resolve(to.path).matched.length > 0; - console.log("Does route resolve?" + " " + (doesRouteResolve ? "Yes" : "No")); - if (!doesRouteResolve) { - let routeData = await getRouteData(to.path).catch((exp) => { - console.log(exp); - next({ name: "NotFound" }); // Go to 404. - }); + store + .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { relativeUrl: to.path }) + .then((response) => { + console.log(response); + }); + let routeData = []; + // Add our dynamic route. router.addRoute({ path: routeData[0].path, diff --git a/src/store/index.js b/src/store/index.js index 423914f0d..aa638fb86 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,81 +1,104 @@ -import { createStore } from 'vuex'; -import createPersistedState from 'vuex-persistedstate'; -import axios from 'axios'; -import globalMethods from '../global-methods' -import router from '@/router'; +import { createStore } from "vuex"; +import { endpoints } from "@/constants/endpoints.js"; +import createPersistedState from "vuex-persistedstate"; +import axios from "axios"; +import globalMethods from "@/global-methods"; +import router from "@/router"; export default createStore({ - plugins: [createPersistedState({ - storage: window.sessionStorage, - })], - state: { - makes: [], - models: [], - styles: [], - year: '', - make: '', - model: '', - style: '', - slideTransition: 'none', - carImg: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg", - blurImg: true + plugins: [ + createPersistedState({ + storage: window.sessionStorage, + }), + ], + state: { + makes: [], + models: [], + styles: [], + year: "", + make: "", + model: "", + style: "", + slideTransition: "none", + carImg: + "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg", + blurImg: true, + }, + mutations: { + updateYear(state, data) { + state.year = data.year; + state.makes = data.makes; + state.slideTransition = "slide"; }, - mutations: { - updateYear(state, data){ - state.year = data.year; - state.makes = data.makes; - state.slideTransition = 'slide' - }, - updateMake(state, data){ - state.make = data.make; - state.models = data.models.data.Result; - state.slideTransition = 'slide'; - }, - updateModel(state, data){ - state.model = data.model; - state.styles = data.styles.data.Result; - state.slideTransition = 'slide'; - }, - updateStyle(state, data){ - state.style = data.style; - state.carImg = "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"; - state.blurImg = false; - state.slideTransition = 'slide'; - }, - removeStyle(state) { - state.style = ''; - state.blurImg = true; - state.carImg = 'https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg' - } + updateMake(state, data) { + state.make = data.make; + state.models = data.models.data.Result; + state.slideTransition = "slide"; }, - actions: { - async selectYear(context, year){ - let makes = []; - await globalMethods.callHttpClient({ - method: 'GET', - endpoint: `https://mockey.qa.sagaws.net/service/makes/year=${year}`, - payload: {}, - }) - .then(function (response) { - makes = response.data.Result; - }); - context.commit('updateYear', {year, makes}); - router.push(`/select-make?year=${year}`); + updateModel(state, data) { + state.model = data.model; + state.styles = data.styles.data.Result; + state.slideTransition = "slide"; + }, + updateStyle(state, data) { + state.style = data.style; + state.carImg = + "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"; + state.blurImg = false; + state.slideTransition = "slide"; + }, + removeStyle(state) { + state.style = ""; + state.blurImg = true; + state.carImg = + "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg"; + }, + }, + actions: { + async selectYear(context, year) { + let makes = []; + await globalMethods + .callHttpClient({ + method: "GET", + endpoint: `https://mockey.qa.sagaws.net/service/makes/year=${year}`, + payload: {}, + }) + .then(function (response) { + makes = response.data.Result; + }); + context.commit("updateYear", { year, makes }); + router.push(`/select-make?year=${year}`); + }, + async selectMake({ commit, state }, make) { + const models = await axios.get( + `https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}` + ); + commit("updateMake", { make, models }); + router.push(`/select-model?year=${state.year}&make=${make}`); + }, + async selectModel({ commit, state }, model) { + const styles = await axios.get( + `https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}` + ); + commit("updateModel", { model, styles }); + router.push( + `/select-style?year=${state.year}&make=${state.make}&model=${model}` + ); + }, + selectStyle({ commit, state }, style) { + commit("updateStyle", { style }); + router.push( + `/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}` + ); + }, + getRouteInfo(context, { relativeUrl }) { + return globalMethods.callHttpClient({ + method: endpoints.GetRouteInfoEndpoint.method, + endpoint: endpoints.GetRouteInfoEndpoint.url, + payload: { + relativeUrl: relativeUrl, }, - async selectMake({commit, state}, make){ - const models = await axios.get(`https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`); - commit('updateMake', {make, models}); - router.push(`/select-model?year=${state.year}&make=${make}`); - }, - async selectModel({commit, state}, model){ - const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`); - commit('updateModel', {model, styles}); - router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`); - }, - selectStyle({commit, state}, style){ - commit('updateStyle', {style}); - router.push(`/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`); - } - } - -}) + }); + }, + }, +});