277 lines
No EOL
10 KiB
JavaScript
277 lines
No EOL
10 KiB
JavaScript
// Supporting files
|
|
import { createWebHistory, createRouter } from "vue-router";
|
|
import { storeActions } from "@/constants/store-actions";
|
|
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
|
|
import { routingTable } from "@/router/router-constants/routing-table.js";
|
|
import { globalEvents, globalEventTypes } from "@/constants/events";
|
|
import { queryStrings } from "@/constants/query-strings";
|
|
import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
|
|
|
|
// Heritage integration
|
|
import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
|
|
import { updateOrCreateFunnelCookie, getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
|
|
import { loadOrderIfPresent, saveOrder } from "@/helpers/heritage-integration/order-helper";
|
|
import { getPageToRouteExistingOrderTo, navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
|
|
|
import baseMixin from "@/mixins/base-mixin";
|
|
import eventBus from "@/helpers/event-bus/event-bus";
|
|
import store from "@/store";
|
|
import analyticsMixin from "@/mixins/analytics-mixin";
|
|
|
|
// Components
|
|
import ComponentTest from "@/layouts/component-test/component-test.vue";
|
|
import FormTest from "@/layouts/form-test/form-test.vue";
|
|
|
|
|
|
const routes = [
|
|
{
|
|
path: "/component-test", // This is a temporary route for testing.
|
|
name: "ComponentTest",
|
|
component: ComponentTest,
|
|
},
|
|
{
|
|
path: "/form-test", // This is a temporary route for testing.
|
|
name: "FormTest",
|
|
component: FormTest,
|
|
},
|
|
{
|
|
path: "/",
|
|
name: "root",
|
|
async beforeEnter(to, from, next) {
|
|
// If we have no query string, or we don't have the FmgPage query string.
|
|
try {
|
|
// If the saved session has timed out, clear the session, execute 404 logic.
|
|
if (getFunnelCookie() !== null && !isSavedSessionStillActive()) {
|
|
await GoToFunnelStartOn404(next);
|
|
}
|
|
|
|
// On entering the funnel "fresh", read cookie information, decide what to do next.
|
|
if (from.redirectedFrom === undefined) {
|
|
const loadOrderResponse = await loadOrderIfPresent();
|
|
const pageToRedirectTo = await getPageToRouteExistingOrderTo(to, loadOrderResponse);
|
|
|
|
// If getPageToRouteExistingOrderTo determines that the return user needs to
|
|
// go back to heritage funnel, send them there and stop our current navigation.
|
|
if (pageToRedirectTo === 'heritage') {
|
|
await navigateToHeritageFunnel();
|
|
return next(false);
|
|
}
|
|
|
|
|
|
// Assign our fmgPage so it will load normally like the other pages.
|
|
to.query.fmgPage = pageToRedirectTo;
|
|
}
|
|
|
|
// Process funnel cookie.
|
|
updateOrCreateFunnelCookie();
|
|
|
|
// If we already have our route, go to it.
|
|
if (router.hasRoute(to.query.fmgPage)) {
|
|
// Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function.
|
|
let component = router.getRoutes().filter((x) => x.name === to.query.fmgPage)[0].components;
|
|
|
|
// If the component hasn't been loaded fully, load it before we check prerequisites.
|
|
if (component.default.methods === undefined) {
|
|
component = await component.default();
|
|
}
|
|
|
|
if (!arePagePrerequisitesValid(component)) {
|
|
await GoToFunnelStartOn404(next);
|
|
}
|
|
|
|
return next({ name: to.query.fmgPage, query: to.query, params: to.params });
|
|
}
|
|
|
|
// Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
|
|
const routeData = await GetRouteInfoFromPageName(to.query.fmgPage);
|
|
|
|
// Add our dynamic route.
|
|
router.addRoute({
|
|
path: routeData[0].path, // Always the same path, because we control it with query strings.
|
|
name: routeData[0].name,
|
|
component: routeData[0].component,
|
|
});
|
|
|
|
// Call the next components arePagePrerequisitesValid method before load.
|
|
// If it returns false, use the 404 logic.
|
|
const nextComponent = await router.getRoutes().filter((x) => x.name === routeData[0].name)[0].components.default();
|
|
|
|
if (!arePagePrerequisitesValid(nextComponent)) {
|
|
await GoToFunnelStartOn404(next);
|
|
}
|
|
|
|
// Assign current query string parameters, as well as our fmgPage one.
|
|
next({
|
|
name: routeData[0].name,
|
|
query: Object.assign(to.query, { fmgPage: routeData[0].name }),
|
|
params: to.params
|
|
});
|
|
} catch (error) {
|
|
console.log(error);
|
|
|
|
// If we don't have a route, go to our 404 page.
|
|
await GoToFunnelStartOn404(next);
|
|
}
|
|
},
|
|
},
|
|
];
|
|
|
|
const router = createRouter({
|
|
history: createWebHistory("/fmg/"),
|
|
routes,
|
|
});
|
|
|
|
//---------------------------------------------------------- Router Functions ----------------------------------------------------------
|
|
|
|
router.afterEach(async (to, from) => {
|
|
// Push page view to GA
|
|
analyticsMixin.methods.pushPageViewToGA(to.query[queryStrings.FMG_PAGE]);
|
|
const assignedExperiments = await baseMixin.methods.dispatchStoreAction(storeActions.GET_EXPERIMENTS_BY_USER_FOR_GA, { userId: getDeviceIdValue() });
|
|
analyticsMixin.methods.pushExperimentsToDataLayer(assignedExperiments);
|
|
});
|
|
|
|
router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
|
|
navigate(scenario, currentRoute, false, optionalQuery, optionalParams, optionalPageData);
|
|
}
|
|
|
|
router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => {
|
|
navigate(scenario, currentRoute, true, optionalQuery, optionalParams, optionalPageData);
|
|
}
|
|
|
|
router.navigateToExternalUrl = (url, optionalQuery = {}) => {
|
|
navigateToUrl(url, optionalQuery);
|
|
}
|
|
|
|
// PRIVATE FUNCTIONS
|
|
|
|
// Navigate to the next route, depending on the scenario.
|
|
async function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) {
|
|
if (!scenario) {
|
|
console.error("No scenario provided. Please review the routing table.");
|
|
return;
|
|
}
|
|
|
|
// Match our maps up and navigate if we have a destination.
|
|
const matchingScenarioMap = getNavigationMap(scenario, currentRoute);
|
|
const destinationFmgPageValue = matchingScenarioMap.destinationFmgPageValue;
|
|
|
|
if (destinationFmgPageValue !== undefined) {
|
|
// We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
|
|
|
|
// If we need to do invalidation
|
|
const currentComponent = currentRoute.matched[0].components;
|
|
|
|
if (invalidateOnSave) {
|
|
resetDependentState(currentComponent);
|
|
}
|
|
|
|
// Append page data to the store for the NEXT page, if any. It will be an empty object if none is provided.
|
|
baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
|
|
|
|
// if cookie and referralNumber/Date exists
|
|
if (getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) {
|
|
await saveOrder();
|
|
}
|
|
|
|
router.push({
|
|
name: "root",
|
|
query: Object.assign(optionalQuery, {
|
|
fmgPage: destinationFmgPageValue,
|
|
}),
|
|
params: optionalParams
|
|
});
|
|
} else if (matchingScenarioMap.destinationUrl !== undefined) {
|
|
navigateToUrl(matchingScenarioMap.destinationUrl, optionalQuery);
|
|
}
|
|
}
|
|
|
|
// Get navigation map depending on the scenario and the current 'page' you're on.
|
|
function getNavigationMap(scenario, currentRoute) {
|
|
const fmgPageValue = currentRoute.query.fmgPage;
|
|
const matchedQueryValue = routingTable
|
|
.filter(
|
|
(item) =>
|
|
item.fmgPageValue === fmgPageValue &&
|
|
item.maps.filter((map) => map.scenario === scenario).length > 0
|
|
)
|
|
.map((m) => m.maps.filter((map) => map.scenario === scenario));
|
|
|
|
return matchedQueryValue[0][0];
|
|
}
|
|
|
|
//---------------------------------------------------------- Private Functions ----------------------------------------------------------
|
|
|
|
// Navigate to an external url.
|
|
function navigateToUrl(url, optionalQuery = {}) {
|
|
// possibly show some loading screen in the future here.
|
|
var externalUrl = new URL(url);
|
|
|
|
for (const queryKey in optionalQuery) {
|
|
externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
|
|
}
|
|
|
|
/////////////////////////////////////////////////////
|
|
// TEMP CODE FOR TESTING WITH SPECIFIC EXPERIMENTS //
|
|
/////////////////////////////////////////////////////
|
|
if (externalUrl.search.indexOf("corid=") != -1)
|
|
externalUrl.search = externalUrl.search + '&experiments=CollectEmailOnQuote=CollectEmailOnQuote_V1=YesCollectEmail_TEST1=true,RemoveServiceAreaPage=ServAreaRemoval_V7=ServAreaNoRemove_V7_TEST=true,VINeducationV2=VINeducation_V2=NoShowVINmodalV2_CONTROL=true,ServicePackages=ServicePackages_V1=NoShowPackages_CONTROL=true,PhotoUploadRedesign=PhotoUploadRedesign_V1=CurrentPhotoUpload_CONTROL=true,ScheduleDetailsServiceType=ScheduleBeforeServiceType_V1=ServTypeThenSched_CONTROL=true';
|
|
///////////// END TEMP CODE /////////////////////////
|
|
|
|
window.location.assign(externalUrl);
|
|
}
|
|
|
|
// Get route information by page name.
|
|
// This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
|
|
async function GetRouteInfoFromPageName(pageName) {
|
|
const response = await store.dispatch(storeActions.GET_ROUTE_INFO_ACTION, {
|
|
pageName: pageName,
|
|
});
|
|
const jsonFromResponse = JSON.parse(response.data.Result);
|
|
let routeData = [];
|
|
|
|
// Add our route data and return our array.
|
|
Object.keys(jsonFromResponse).forEach((key) => {
|
|
routeData.push({
|
|
path: "/",
|
|
name: `${key}`,
|
|
component: lazyLoadComponent(jsonFromResponse[key].LayoutName),
|
|
});
|
|
});
|
|
|
|
return routeData;
|
|
}
|
|
|
|
// Go to our start page on a 404.
|
|
async function GoToFunnelStartOn404(next) {
|
|
const apiResponse = await store.dispatch(storeActions.GET_HOMEPAGE_NAME);
|
|
const homepageName = apiResponse.data.Result;
|
|
|
|
// Put item on the bus
|
|
eventBus.addEventToBus(
|
|
globalEvents.Categories.GLOBAL_ALERT,
|
|
globalEvents.SubCategories.PAGE_NOT_FOUND,
|
|
{
|
|
isDismissible: true,
|
|
messageCopy: "You can get a quote by starting on this page.",
|
|
messageHeadline: "We're sorry, something went wrong.",
|
|
type: globalEventTypes.Danger,
|
|
}
|
|
);
|
|
|
|
next({
|
|
path: "/",
|
|
query: { fmgPage: homepageName },
|
|
});
|
|
}
|
|
|
|
// Checks arePagePrerequisitesValid on the component passed in.
|
|
function arePagePrerequisitesValid(component) {
|
|
return component.default.methods.arePagePrerequisitesValid();
|
|
}
|
|
|
|
// Reset dependant state on route change.
|
|
function resetDependentState(component) {
|
|
return component.default.methods.resetDependentState();
|
|
}
|
|
|
|
export default router; |