+
+
+
+
+
VIN Lookup Placeholder Page
+
+
+
+
+
+
+
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js
index d46841b6a..8fdd6dd8d 100644
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@@ -1,4 +1,5 @@
import store from "@/store";
+import router from "@/router";
import { storeActions } from "@/constants/store-actions.js";
import { storeMutations } from "@/constants/store-mutations.js";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
@@ -20,6 +21,39 @@ export default {
},
savePageDataToStore(page, data){
store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data });
+ },
+ async saveOrder() {
+ var savedOrderInfo = (await this.dispatchNonBlockingStoreAction(storeActions.SAVE_ORDER)).data;
+ store.commit(storeMutations.UPDATE_REFERRAL_NUMBER, savedOrderInfo.referralNumber);
+ store.commit(storeMutations.UPDATE_REFERRAL_DATE, savedOrderInfo.referralDate);
+ store.commit(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, savedOrderInfo.referralCorrelationId);
+ },
+ getCookieValue(cookieName) {
+ return document.cookie
+ ?.split("; ")
+ ?.find(row => row.startsWith(`${cookieName}=`))
+ ?.split("=")[1];
+ },
+ setCookieValue(cookieName, cookieValue) {
+ document.cookie = `${cookieName}=${cookieValue}`;
+ },
+ deleteCookie(cookieName) {
+ document.cookie = `${cookieName}=; Max-Age=0; path=/; domain=${location.hostname}`;
+ },
+ navigateToHeritageFunnel() {
+ var referralCorrelationId = store.getters.referralCorrelationId;
+
+ router.navigate(
+ navigationScenarios.MOVE_TO_HERITAGE_FUNNEL,
+ router.currentRoute.value,
+ {
+ corid: referralCorrelationId,
+ src: "concept-funnel",
+ // TODO CSR-98 REMOVE THIS
+ cns: "all",
+ experiments: "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true"
+ }
+ );
}
},
computed: {
diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js
index da684af1b..e1599a319 100644
--- a/src/mixins/base-mixin.spec.js
+++ b/src/mixins/base-mixin.spec.js
@@ -79,6 +79,8 @@ describe("baseMixin.js", () => {
});
});
+
+
function getMixInInstance({ isDispatchSuccess = true }) {
// Mock Store
const storeDispatch = jest.fn();
diff --git a/src/router/index.js b/src/router/index.js
index 3d182ba37..c0ce384b1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import { routerParameterKeys } from '@/router/router-constants/router-parameter-
import baseMixin from "@/mixins/base-mixin";
import eventBus from "@/helpers/event-bus/event-bus";
import store from "@/store";
+import { cookieNames } from "@/constants/cookie-names";
// Components
import ComponentTest from "@/layouts/component-test/component-test.vue";
@@ -51,6 +52,12 @@ const routes = [
path: "/",
name: "root",
async beforeEnter(to, from, next) {
+ // TODO CSR-98 Also triggers on refresh... should it though?
+ // Entering the concept funnel
+ if (from.redirectedFrom === undefined) {
+ handleInfoFromHeritageFunnel();
+ }
+
// If we have no query string, or we don't have the FmgPage query string.
if (to.query.fmgPage === undefined) {
await GoToFunnelStartOn404(next);
@@ -58,7 +65,6 @@ const routes = [
try {
// 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;
@@ -133,10 +139,14 @@ function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {},
return;
}
+ // // here?? CSR-98
+ // baseMixin.methods.saveOrder();
+
// Match our maps up and navigate if we have a destination.
const matchingScenarioMap = getNavigationMap(scenario, currentRoute);
+ const destinationFmgPageValue = matchingScenarioMap.destinationFmgPageValue;
- if (matchingScenarioMap.destinationFmgPageValue !== undefined) {
+ 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
@@ -147,17 +157,23 @@ function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {},
}
// 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(matchingScenarioMap.destinationFmgPageValue, optionalPageData);
+ baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
+
+ baseMixin.methods.saveOrder();
router.push({
name: "root",
query: Object.assign(optionalQuery, {
- fmgPage: matchingScenarioMap.destinationFmgPageValue,
+ fmgPage: destinationFmgPageValue,
}),
params: Object.assign(optionalParams, {[routerParameterKeys.FROM_ROUTER_NAVIGATE]: true})
});
} else if (matchingScenarioMap.destinationUrl !== undefined) {
- navigateToUrl(matchingScenarioMap.destinationUrl);
+ if (matchingScenarioMap.shouldNavigateToHeritageFunnel) {
+ baseMixin.methods.saveOrder();
+ }
+
+ navigateToUrl(matchingScenarioMap.destinationUrl, optionalQuery);
}
}
@@ -178,9 +194,15 @@ function getNavigationMap(scenario, currentRoute) {
//---------------------------------------------------------- Private Functions ----------------------------------------------------------
// Navigate to an external url.
-function navigateToUrl(url) {
+function navigateToUrl(url, optionalQuery) {
// possibly show some loading screen in the future here.
- window.location.assign(url);
+ var externalUrl = new URL(url);
+
+ for (const queryKey in optionalQuery) {
+ externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
+ }
+
+ window.location.assign(externalUrl);
}
// Get route information by page name.
@@ -237,4 +259,20 @@ function resetDependentState(component) {
return component.default.methods.resetDependentState();
}
+// Read info from heritage funnel and reset state or load referral
+function handleInfoFromHeritageFunnel() {
+ var orderInfoJson = baseMixin.methods.getCookieValue(cookieNames.ORDER_INFO);
+ var orderInfo = orderInfoJson == null ? null : JSON.parse(orderInfoJson);
+
+ if (orderInfo?.ShouldResetState) {
+ store.dispatch(storeActions.RESET_STATE);
+ }
+ else if (orderInfo != null) {
+ // should load referral here
+ }
+
+ // Delete cookie once state is loaded or reset
+ baseMixin.methods.deleteCookie(cookieNames.ORDER_INFO);
+}
+
export default router;
\ No newline at end of file
diff --git a/src/router/router-constants/externalUrl-values.js b/src/router/router-constants/externalUrl-values.js
new file mode 100644
index 000000000..7e9931f6e
--- /dev/null
+++ b/src/router/router-constants/externalUrl-values.js
@@ -0,0 +1,5 @@
+const externalUrls = {
+ HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
+};
+
+export { externalUrls };
\ No newline at end of file
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index 770c1f7b6..b648ae047 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -4,9 +4,10 @@ const fmgPageValues = {
VEHICLE_MODEL: "vehicle-model",
VEHICLE_STYLE: "vehicle-style",
VEHICLE_DAMAGE: "vehicle-damage",
+ VIN_LOOKUP: "vin-lookup",
VEHICLE_PARTS: "vehicle-parts",
PART_QUESTIONS: "part-questions",
REVEAL : "reveal",
};
-export { fmgPageValues };
\ No newline at end of file
+export { fmgPageValues };
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 9fd1c6311..972944d80 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -4,10 +4,12 @@ const navigationScenarios = {
SELECTED_MAKE: "SELECTED_MAKE",
SELECTED_STYLE: "SELECTED_STYLE",
CLICKED_BACK: "CLICKED_BACK",
+ CLICKED_FORWARD: "CLICKED_FORWARD",
SELECTED_PARTS: "SELECTED_PARTS",
SELECTED_DAMAGE_WITH_SINGLE_PART: "SELECTED_DAMAGE_WITH_SINGLE_PART",
SELECTED_DAMAGE_WITH_MULTIPLE_PARTS: "SELECTED_DAMAGE_WITH_MULTIPLE_PARTS",
- SELECTED_DAMAGE_WITH_PART_QUESTIONS: "SELECTED_DAMAGE_WITH_PART_QUESTIONS"
+ SELECTED_DAMAGE_WITH_PART_QUESTIONS: "SELECTED_DAMAGE_WITH_PART_QUESTIONS",
+ MOVE_TO_HERITAGE_FUNNEL: "MOVE_TO_HERITAGE_FUNNEL",
};
export { navigationScenarios };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index c9dc7ba4d..8fc8ad013 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -1,4 +1,5 @@
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+import { externalUrls } from "@/router/router-constants/externalUrl-values";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
const routingTable = [
@@ -57,9 +58,14 @@ const routingTable = [
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
},
+ {
+ scenario: navigationScenarios.MOVE_TO_HERITAGE_FUNNEL,
+ destinationUrl: externalUrls.HERITAGE_FUNNEL,
+ shouldNavigateToHeritageFunnel: true
+ },
{
scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
- destinationFmgPageValue: fmgPageValues.REVEAL,
+ destinationFmgPageValue: fmgPageValues.REVEAL
},
{
scenario: navigationScenarios.SELECTED_DAMAGE_WITH_MULTIPLE_PARTS,
@@ -80,10 +86,27 @@ const routingTable = [
},
{
scenario: navigationScenarios.SELECTED_PARTS,
+ destinationFmgPageValue: fmgPageValues.QUOTE,
+ },
+ {
+ scenario: navigationScenarios.CLICKED_FORWARD,
destinationFmgPageValue: fmgPageValues.REVEAL,
},
],
},
+ {
+ fmgPageValue: fmgPageValues.REVEAL,
+ maps: [
+ {
+ scenario: navigationScenarios.CLICKED_BACK,
+ destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+ },
+ {
+ scenario: navigationScenarios.SELECTED_PARTS,
+ destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
+ },
+ ],
+ },
];
export { routingTable };
diff --git a/src/store/index.js b/src/store/index.js
index a00f550be..f453aa340 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -7,34 +7,41 @@ import globalMethods from "@/global-methods";
// Export State
-export const state = {
- order: {
- vehicle: {
- year: null,
- make: null,
- model: null,
- style: null,
- carId: null,
- category: null,
- imageUrl: null,
- imageVifNumber: null,
- imageColor: null,
+const getDefaultState = () => {
+ return {
+ order: {
+ vehicle: {
+ year: null,
+ make: null,
+ model: null,
+ style: null,
+ carId: null,
+ category: null,
+ imageUrl: null,
+ imageVifNumber: null,
+ imageColor: null,
+ },
+ damage: {
+ isRepair: null,
+ numberOfChips: null,
+ glassToReplace: null,
+ },
+ lineItems:{
+ glassParts: null,
+ otherParts: null
+ },
+ referralNumber: null,
+ referralDate: null,
+ referralCorrelationId: null,
},
- damage: {
- isRepair: null,
- numberOfChips: null,
- glassToReplace: null,
+ applicationUser: {
+ eventBus: [],
+ pageData: {}
},
- lineItems:{
- glassParts: {},
- otherParts: {}
- }
- },
- applicationUser: {
- eventBus: [],
- pageData: {}
- },
-}
+ }
+};
+
+export const state = getDefaultState();
// Export Mutations
export const mutations = {
@@ -81,6 +88,15 @@ export const mutations = {
updatePageData(state, pageData){
state.applicationUser.pageData[pageData.page] = pageData.data;
},
+ updateReferralCorrelationId(state, referralCorrelationId) {
+ state.order.referralCorrelationId = referralCorrelationId;
+ },
+ updateReferralNumber(state, referralNumber) {
+ state.order.referralNumber = referralNumber;
+ },
+ updateReferralDate(state, referralDate) {
+ state.order.referralDate = referralDate;
+ },
// EVENT BUS MUTATIONS
addEventToBus(state, event) {
@@ -120,6 +136,9 @@ export const mutations = {
resetPartsState(state) {
state.order.lineItems.glassParts = null;
state.order.lineItems.otherParts = null;
+ },
+ resetState(state) {
+ Object.assign(state, getDefaultState());
}
}
@@ -137,6 +156,9 @@ export const getters = {
eventBus: (state) => state.applicationUser.eventBus,
damage: (state) => state.order.damage,
lineItems: (state) => state.order.lineItems,
+ referralNumber: (state) => state.order.referralNumber,
+ referralDate: (state) => state.order.referralDate,
+ referralCorrelationId: (state) => state.order.referralCorrelationId,
pageData: (state) => (page) => {
return state.applicationUser.pageData[page];
}
@@ -230,6 +252,9 @@ export const actions = {
resetPartsAndDependencies(context) {
context.commit(storeMutations.RESET_PARTS_STATE);
},
+ resetState(context) {
+ context.commit(storeMutations.RESET_STATE);
+ },
// Content API Actions
getRouteInfo(context, { pageName }) {
@@ -274,7 +299,31 @@ export const actions = {
vin: vin
},
});
- }
+ },
+
+ // Order API Actions
+ saveOrder(context) {
+ const vehicle = context.getters.vehicle;
+ const damage = context.getters.damage;
+
+ return globalMethods.callHttpClient({
+ method: endpoints.SaveOrder.method,
+ endpoint: endpoints.SaveOrder.url,
+ payload: {
+ vehicle: {
+ carId: vehicle.carId,
+ year: vehicle.year,
+ make: vehicle.make,
+ model: vehicle.model,
+ style: vehicle.style,
+ },
+ numberOfChips: damage.numberOfChips,
+ glassToReplace: damage.glassToReplace,
+ referralNumber: context.getters.referralNumber,
+ referralDate: context.getters.referralDate
+ },
+ });
+ },
}
export default createStore({
diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss
index 561b05b76..8425a3021 100644
--- a/src/styles/common-styles.scss
+++ b/src/styles/common-styles.scss
@@ -35,4 +35,3 @@ body {
overflow: hidden;
}
}
-// Hide horizontal scrollbar
diff --git a/vue.config.js b/vue.config.js
index 316656ed1..704ca0907 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,7 @@
process.env.VUE_APP_CONSUMER_API_GATEWAY =
"https://consumerapidev.safelite.com";
+process.env.VUE_APP_HERITAGE_FUNNEL =
+ "http://localhost:38000/default.aspx";
module.exports = {
outputDir: "dist/fmg",
@@ -19,4 +21,7 @@ module.exports = {
},
},
},
+ configureWebpack: {
+ devtool: 'source-map'
+ },
};
diff --git a/vue.release.config.js b/vue.release.config.js
index 43fffb47f..3c281dc78 100644
--- a/vue.release.config.js
+++ b/vue.release.config.js
@@ -1,4 +1,5 @@
process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__";
+process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__";
module.exports = {
outputDir: "dist/fmg",