CSR-98 Fix merge conflicts
This commit is contained in:
commit
dda0a9136b
10 changed files with 297 additions and 240 deletions
|
|
@ -1,14 +1,13 @@
|
||||||
import { storeActions } from "@/constants/store-actions.js";
|
import { storeActions } from "@/constants/store-actions.js";
|
||||||
import { cookieNames } from "@/constants/cookie-names";
|
import { cookieNames } from "@/constants/cookie-names";
|
||||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
import { externalUrls } from "@/router/router-constants/externalUrl-values";
|
||||||
import { applicationConfig } from "@/constants/application-config";
|
import { applicationConfig } from "@/constants/application-config";
|
||||||
|
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
|
||||||
|
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
import baseMixin from "../mixins/base-mixin";
|
import baseMixin from "../mixins/base-mixin";
|
||||||
|
|
||||||
|
|
||||||
// Saves Referral if one is available and commits referral details to state.
|
|
||||||
export async function saveOrder() {
|
export async function saveOrder() {
|
||||||
console.log("saving order...");
|
console.log("saving order...");
|
||||||
const savedOrderInfo = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SAVE_ORDER);
|
const savedOrderInfo = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SAVE_ORDER);
|
||||||
|
|
@ -24,23 +23,14 @@ export async function saveOrder() {
|
||||||
updateOrCreateConceptCookie();
|
updateOrCreateConceptCookie();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Loads order based on referral data in cookie, also loads the referral information into state.
|
export async function loadOrderIfPresent() {
|
||||||
export async function loadOrder(referralNumber, referralDate, correlationId) {
|
|
||||||
console.log("loading order...", referralNumber, referralDate, correlationId);
|
|
||||||
await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOAD_ORDER,
|
|
||||||
{ referralNumber: referralNumber.toString(), referralDate: referralDate, correlationId: correlationId }
|
|
||||||
, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Read info from heritage funnel and reset state or load referral
|
|
||||||
export async function loadReferralIfPresent() {
|
|
||||||
console.log("attempting to load referral....");
|
console.log("attempting to load referral....");
|
||||||
const conceptCookie = getConceptCookie();
|
const conceptCookie = getConceptCookie();
|
||||||
|
|
||||||
// Do nothing if there is no cookie or no correlation id.
|
// Do nothing if there is no cookie or no correlation id.
|
||||||
if (conceptCookie === null || conceptCookie.ReferralCorrelationId === null) {
|
if (conceptCookie === null || conceptCookie.ReferralCorrelationId === null) {
|
||||||
console.log("No referral found");
|
console.log("No referral found");
|
||||||
return;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset state if cookie says to.
|
// Reset state if cookie says to.
|
||||||
|
|
@ -48,12 +38,32 @@ export async function loadReferralIfPresent() {
|
||||||
console.log("Resetting state...");
|
console.log("Resetting state...");
|
||||||
baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE);
|
baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE);
|
||||||
deleteConceptCookie();
|
deleteConceptCookie();
|
||||||
return;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("calling load order from loadReferralIfPresent()...");
|
console.log("calling load order from loadOrderIfPresent()...");
|
||||||
|
|
||||||
// Load referral if there is a cookie, and it doesn't indicate it needs a state reset.
|
// Load referral if there is a cookie, and it doesn't indicate it needs a state reset.
|
||||||
await loadOrder(conceptCookie.ReferralNumber, conceptCookie.ReferralDate, conceptCookie.ReferralCorrelationId);
|
return (await loadOrder(conceptCookie.ReferralNumber, conceptCookie.ReferralDate, conceptCookie.ReferralCorrelationId)).data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getPageToRouteExistingOrderTo() {
|
||||||
|
const vehicleMakeComponent = (await lazyLoadComponent('vehicle-make')()).default;
|
||||||
|
const vehicleModelComponent = (await lazyLoadComponent('vehicle-model')()).default;
|
||||||
|
const vehicleStyleComponent = (await lazyLoadComponent('vehicle-style')()).default;
|
||||||
|
const vehicleDamageComponent = (await lazyLoadComponent('vehicle-damage')()).default;
|
||||||
|
|
||||||
|
if (!vehicleMakeComponent.methods.arePagePrerequisitesValid()) {
|
||||||
|
return "vehicle-year";
|
||||||
|
} else if (!vehicleModelComponent.methods.arePagePrerequisitesValid()) {
|
||||||
|
return "vehicle-make";
|
||||||
|
} else if (!vehicleStyleComponent.methods.arePagePrerequisitesValid()) {
|
||||||
|
return "vehicle-model";
|
||||||
|
} else if (!vehicleDamageComponent.methods.arePagePrerequisitesValid()) {
|
||||||
|
return "vehicle-style";
|
||||||
|
}else {
|
||||||
|
return "vehicle-damage";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function updateOrCreateConceptCookie() {
|
export function updateOrCreateConceptCookie() {
|
||||||
|
|
@ -96,16 +106,13 @@ export function isConceptSessionStillActive() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Navigate to Heritage Funnel with the proper URL format.
|
|
||||||
// Will Save the referral if there is one in state, or create a new one if one is not in state.
|
|
||||||
export async function navigateToHeritageFunnel() {
|
export async function navigateToHeritageFunnel() {
|
||||||
|
|
||||||
// Create the order (or save existing order) when navigating to Heritage Funnel.
|
// Create the order (or save existing order) when navigating to Heritage Funnel.
|
||||||
await saveOrder();
|
await saveOrder();
|
||||||
|
|
||||||
router.navigate(
|
router.navigateToExternalUrl(
|
||||||
navigationScenarios.MOVE_TO_HERITAGE_FUNNEL,
|
externalUrls.HERITAGE_FUNNEL,
|
||||||
router.currentRoute.value,
|
|
||||||
{
|
{
|
||||||
corid: store.state.order.referralCorrelationId,
|
corid: store.state.order.referralCorrelationId,
|
||||||
src: "concept-funnel",
|
src: "concept-funnel",
|
||||||
|
|
@ -115,7 +122,6 @@ export async function navigateToHeritageFunnel() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Start cookie related functions */
|
|
||||||
export function getConceptCookie() {
|
export function getConceptCookie() {
|
||||||
const cookieJson = document.cookie
|
const cookieJson = document.cookie
|
||||||
?.split("; ")
|
?.split("; ")
|
||||||
|
|
@ -129,7 +135,27 @@ export function getConceptCookie() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// --------- PRIVATE FUNCTIONS ---------
|
// --------- PRIVATE FUNCTIONS ---------
|
||||||
|
async function loadOrder(referralNumber, referralDate, referralCorrelationId) {
|
||||||
|
console.log("loading order...", referralNumber, referralDate, referralCorrelationId);
|
||||||
|
try {
|
||||||
|
|
||||||
|
const response = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOAD_ORDER,
|
||||||
|
{
|
||||||
|
referralNumber: referralNumber.toString(),
|
||||||
|
referralDate: referralDate,
|
||||||
|
referralCorrelationId: referralCorrelationId
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
return response;
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.log("error loading order:", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function setConceptCookieProperties(properties) {
|
function setConceptCookieProperties(properties) {
|
||||||
if (typeof properties == "object") {
|
if (typeof properties == "object") {
|
||||||
|
|
@ -154,4 +180,3 @@ function deleteConceptCookie() {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* End cookie related functions */
|
|
||||||
|
|
|
||||||
|
|
@ -116,7 +116,7 @@ describe("saveOrder", () => {
|
||||||
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.SET_REFERRAL_INFORMATION, {
|
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.SET_REFERRAL_INFORMATION, {
|
||||||
referralNumber: mockReferralNumber,
|
referralNumber: mockReferralNumber,
|
||||||
referralDate: mockReferralDate,
|
referralDate: mockReferralDate,
|
||||||
correlationId: mockCorrelationId
|
referralCorrelationId: mockCorrelationId
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -70,8 +70,6 @@ import alert from "@/ux-components/alert/alert";
|
||||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||||
import { storeActions } from "@/constants/store-actions";
|
import { storeActions } from "@/constants/store-actions";
|
||||||
import store from "@/store";
|
|
||||||
import baseMixin from "@/mixins/base-mixin";
|
|
||||||
import { Form, defineRule } from "vee-validate";
|
import { Form, defineRule } from "vee-validate";
|
||||||
import { required } from "@/helpers/validation-rules";
|
import { required } from "@/helpers/validation-rules";
|
||||||
import { errorMessages } from "@/constants/error-messages";
|
import { errorMessages } from "@/constants/error-messages";
|
||||||
|
|
@ -79,6 +77,9 @@ import { damageLocationsCms } from "@/constants/damage-locations-cms.js";
|
||||||
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
|
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
|
||||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration-helper";
|
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration-helper";
|
||||||
|
|
||||||
|
import store from "@/store";
|
||||||
|
import baseMixin from "@/mixins/base-mixin";
|
||||||
|
|
||||||
// DEFINE VALIDATION RULES
|
// DEFINE VALIDATION RULES
|
||||||
defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
|
defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
|
||||||
|
|
||||||
|
|
@ -150,7 +151,10 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
return store.getters.vehicle.carId !== null;
|
if(store.getters.vehicle.carId){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
},
|
},
|
||||||
resetDependentState() {
|
resetDependentState() {
|
||||||
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
|
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
|
||||||
|
|
|
||||||
|
|
@ -84,7 +84,10 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
return store.getters.vehicle.year !== null;
|
if (store.getters.vehicle.year){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
},
|
},
|
||||||
resetDependentState() {
|
resetDependentState() {
|
||||||
// Set
|
// Set
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,10 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
return store.getters.vehicle.make !== null;
|
if(store.getters.vehicle.make){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
},
|
},
|
||||||
resetDependentState() {
|
resetDependentState() {
|
||||||
// Set
|
// Set
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,42 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
|
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
|
||||||
<funnelHeader ref="funnelHeader" />
|
<funnelHeader ref="funnelHeader" />
|
||||||
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
|
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
|
||||||
<funnelSubHeader ref="funnelSubHeader" />
|
<funnelSubHeader ref="funnelSubHeader" />
|
||||||
<div class="container-fluid prevent-squish my-5">
|
<div class="container-fluid prevent-squish my-5">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
|
<alert
|
||||||
</div>
|
class="rounded border-0 shadow-sm"
|
||||||
|
alertClass="alert-warning"
|
||||||
|
:alertHeadline="alertWidgetData.headline"
|
||||||
|
:alertCopy="alertWidgetData.copy"
|
||||||
|
:isDismissible="false"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-for="(item, i) in PartsForQuestions" :key="i">
|
<div v-for="(item, i) in PartsForQuestions" :key="i">
|
||||||
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
|
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<hr v-if="i > 0" />
|
<hr v-if="i > 0" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<glassPartQuestion :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
|
<glassPartQuestion
|
||||||
|
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
|
||||||
|
v-model="glassParts[item.glassLocation + '-' + item.glassName]"
|
||||||
|
:glassLocation="item.glassLocation"
|
||||||
|
:glassName="item.glassName"
|
||||||
|
:colorAnswers="item.colorAnswers"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
|
<funnelFooter
|
||||||
</div>
|
ref="funnelFooter"
|
||||||
|
@back-clicked="backButtonAction"
|
||||||
|
@ForwardClicked="forwardButtonAction"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -32,199 +48,196 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
|
||||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||||
import alert from "@/ux-components/alert/alert";
|
import alert from "@/ux-components/alert/alert";
|
||||||
// Supporting Files
|
// Supporting Files
|
||||||
import {
|
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||||
fetchCmsContentForPage
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||||
} from "@/helpers/cms-content-helper";
|
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||||
import {
|
import { storeMutations } from "@/constants/store-mutations";
|
||||||
settleAllPromises
|
|
||||||
} from "@/helpers/layout-helper";
|
|
||||||
import {
|
|
||||||
fmgPageValues
|
|
||||||
} from "@/router/router-constants/fmgPage-values";
|
|
||||||
import {
|
|
||||||
storeMutations
|
|
||||||
} from "@/constants/store-mutations";
|
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "vehicle-parts",
|
name: "vehicle-parts",
|
||||||
async beforeRouteEnter(to, from, next) {
|
async beforeRouteEnter(to, from, next) {
|
||||||
// Call APIs
|
// Call APIs
|
||||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||||
// Settle promises and get results
|
// Settle promises and get results
|
||||||
const promiseResultMap = [{
|
const promiseResultMap = [
|
||||||
resultKey: "cmsContent",
|
{
|
||||||
promise: cmsContentPromise,
|
resultKey: "cmsContent",
|
||||||
}, ];
|
promise: cmsContentPromise,
|
||||||
const resultMap = await settleAllPromises(promiseResultMap);
|
},
|
||||||
// Call the "next" function to complete the transition to this page.
|
];
|
||||||
next((vm) => {
|
const resultMap = await settleAllPromises(promiseResultMap);
|
||||||
vm.$refs.funnelHeader.initializeComponent(
|
// Call the "next" function to complete the transition to this page.
|
||||||
resultMap.cmsContent.FunnelHeaderWidget
|
next((vm) => {
|
||||||
);
|
vm.$refs.funnelHeader.initializeComponent(
|
||||||
vm.$refs.vehicleBanner.initializeComponent(
|
resultMap.cmsContent.FunnelHeaderWidget
|
||||||
resultMap.cmsContent.VehicleBannerWidget
|
);
|
||||||
);
|
vm.$refs.vehicleBanner.initializeComponent(
|
||||||
vm.$refs.funnelSubHeader.initializeComponent(
|
resultMap.cmsContent.VehicleBannerWidget
|
||||||
resultMap.cmsContent.FunnelSubHeaderWidget
|
);
|
||||||
);
|
vm.$refs.funnelSubHeader.initializeComponent(
|
||||||
vm.$refs.funnelFooter.initializeComponent(
|
resultMap.cmsContent.FunnelSubHeaderWidget
|
||||||
resultMap.cmsContent.FunnelFooterWidget
|
);
|
||||||
);
|
vm.$refs.funnelFooter.initializeComponent(
|
||||||
|
resultMap.cmsContent.FunnelFooterWidget
|
||||||
|
);
|
||||||
|
|
||||||
// Glass Part Question dynamic component
|
// Glass Part Question dynamic component
|
||||||
|
|
||||||
Object.keys(vm.$refs)
|
Object.keys(vm.$refs)
|
||||||
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
|
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
|
||||||
.forEach((c) =>
|
.forEach((c) =>
|
||||||
vm.$refs[c][0].initializeComponent({
|
vm.$refs[c][0].initializeComponent({
|
||||||
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
|
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
|
||||||
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
|
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
// Set alertData for the page alert. These use props so we don't call
|
// Set alertData for the page alert. These use props so we don't call
|
||||||
// initializeComponent here.
|
// initializeComponent here.
|
||||||
vm.alertWidgetData = {
|
vm.alertWidgetData = {
|
||||||
copy: resultMap.cmsContent.AlertWidget.BodyText,
|
copy: resultMap.cmsContent.AlertWidget.BodyText,
|
||||||
headline: resultMap.cmsContent.AlertWidget.HeadlineText,
|
headline: resultMap.cmsContent.AlertWidget.HeadlineText,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
return {
|
||||||
|
glassParts: {},
|
||||||
|
alertWidgetData: Object,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
glassPartQuestion,
|
||||||
|
funnelHeader,
|
||||||
|
vehicleBanner,
|
||||||
|
funnelSubHeader,
|
||||||
|
funnelFooter,
|
||||||
|
alert,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
PartsForQuestions() {
|
||||||
|
const partsData = this.PartsFromApi;
|
||||||
|
|
||||||
|
// Map API result data, to vehicle-parts data structure
|
||||||
|
const mappedData = partsData.partsOrQuestions.map((g) => {
|
||||||
return {
|
return {
|
||||||
glassParts: {},
|
glassName: g.glassName,
|
||||||
alertWidgetData: Object,
|
glassLocation: g.glassLocation,
|
||||||
|
colorAnswers: g.parts.reduce((arr, p) => {
|
||||||
|
arr.push({
|
||||||
|
ColorAnswerText: p.color,
|
||||||
|
FeatureAnswers: [
|
||||||
|
{
|
||||||
|
FeatureAnswerText:
|
||||||
|
p.description === "" ? p.color : p.description,
|
||||||
|
PartNumber: p.partNumber,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
return arr;
|
||||||
|
}, []),
|
||||||
};
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return mappedData;
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
glassPartQuestion,
|
PartsFromApi() {
|
||||||
funnelHeader,
|
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
|
||||||
vehicleBanner,
|
|
||||||
funnelSubHeader,
|
|
||||||
funnelFooter,
|
|
||||||
alert,
|
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
PartsForQuestions() {
|
|
||||||
const partsData = this.PartsFromApi;
|
|
||||||
|
|
||||||
// Map API result data, to vehicle-parts data structure
|
RefPrefix() {
|
||||||
const mappedData = partsData.partsOrQuestions.map((g) => {
|
return "partQuestion";
|
||||||
|
|
||||||
return {
|
|
||||||
glassName: g.glassName,
|
|
||||||
glassLocation: g.glassLocation,
|
|
||||||
colorAnswers: g.parts.reduce((arr, p) => {
|
|
||||||
arr.push({
|
|
||||||
ColorAnswerText: p.color,
|
|
||||||
FeatureAnswers: [{
|
|
||||||
FeatureAnswerText: p.description === "" ? p.color : p.description,
|
|
||||||
PartNumber: p.partNumber,
|
|
||||||
}, ],
|
|
||||||
});
|
|
||||||
return arr;
|
|
||||||
}, []),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return mappedData;
|
|
||||||
},
|
|
||||||
|
|
||||||
PartsFromApi() {
|
|
||||||
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
|
|
||||||
},
|
|
||||||
|
|
||||||
RefPrefix() {
|
|
||||||
return "partQuestion";
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
methods: {
|
},
|
||||||
arePagePrerequisitesValid() {
|
methods: {
|
||||||
// Check if isRepair is populated and if the pageData we need is here (Parts data)
|
arePagePrerequisitesValid() {
|
||||||
if (
|
// Check if isRepair is populated and if the pageData we need is here (Parts data)
|
||||||
store.getters.damage.isRepair !== null &&
|
if (
|
||||||
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
|
(store.getters.damage.isRepair) &&
|
||||||
.length !== 0
|
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
|
||||||
) {
|
.length !== 0
|
||||||
return true;
|
) {
|
||||||
}
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
backButtonAction() {
|
backButtonAction() {
|
||||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||||
},
|
},
|
||||||
forwardButtonAction() {
|
forwardButtonAction() {
|
||||||
const selectedGlassPartNumbers = [];
|
const selectedGlassPartNumbers = [];
|
||||||
const matchedParts = [];
|
const matchedParts = [];
|
||||||
|
|
||||||
// Compile all selected parts from the page.
|
// Compile all selected parts from the page.
|
||||||
for (let [key, value] of Object.entries(this.glassParts)) {
|
for (let [key, value] of Object.entries(this.glassParts)) {
|
||||||
for (let [glassKey, glassValue] of Object.entries(value)) {
|
for (let [glassKey, glassValue] of Object.entries(value)) {
|
||||||
selectedGlassPartNumbers.push(glassValue[0]);
|
selectedGlassPartNumbers.push(glassValue[0]);
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Match them to the parts from the API.
|
|
||||||
for (let [key, value] of Object.entries(
|
|
||||||
this.PartsFromApi.partsOrQuestions
|
|
||||||
)) {
|
|
||||||
for (let [partKey, partValue] of Object.entries(value.parts)) {
|
|
||||||
const currentPart =
|
|
||||||
this.PartsFromApi.partsOrQuestions[key].parts[partKey];
|
|
||||||
const isMatched = selectedGlassPartNumbers.some(
|
|
||||||
(p) => p === currentPart.partNumber
|
|
||||||
);
|
|
||||||
|
|
||||||
if (isMatched) {
|
|
||||||
matchedParts.push(currentPart);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If no parts could be matched, throw an error.
|
|
||||||
if (matchedParts.length === 0) {
|
|
||||||
throw new Error("Could not match any parts to the selected parts");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Save parts to the store.
|
|
||||||
store.commit(storeMutations.UPDATE_PARTS, matchedParts);
|
|
||||||
|
|
||||||
// Navigate to the next page.
|
|
||||||
this.$router.navigateAfterSave(
|
|
||||||
this.navigationScenarios.SELECTED_PARTS,
|
|
||||||
this.$route
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
resetDependentState() {
|
|
||||||
// Nothing additional to reset here: The page save is already fully resetting all the line-items on the order
|
|
||||||
},
|
|
||||||
|
|
||||||
LoadInitialPartsData() {
|
|
||||||
const partsData = this.PartsFromApi;
|
|
||||||
const alreadyPopulatedPartsData =
|
|
||||||
this.$store.getters.lineItems.glassParts === null ? {} :
|
|
||||||
this.$store.getters.lineItems.glassParts;
|
|
||||||
|
|
||||||
partsData.partsOrQuestions.map((g) => {
|
|
||||||
// If the part is already populated, use the value from the store and populate the v-model.
|
|
||||||
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
|
|
||||||
const partNumber = alreadyPopulatedPartsData[key].partNumber;
|
|
||||||
g.parts.forEach((p) => {
|
|
||||||
if (p.partNumber === partNumber) {
|
|
||||||
this.glassParts[g.glassLocation + "-" + g.glassName] = {
|
|
||||||
[g.glassLocation]: [partNumber],
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Match them to the parts from the API.
|
||||||
|
for (let [key, value] of Object.entries(
|
||||||
|
this.PartsFromApi.partsOrQuestions
|
||||||
|
)) {
|
||||||
|
for (let [partKey, partValue] of Object.entries(value.parts)) {
|
||||||
|
const currentPart =
|
||||||
|
this.PartsFromApi.partsOrQuestions[key].parts[partKey];
|
||||||
|
const isMatched = selectedGlassPartNumbers.some(
|
||||||
|
(p) => p === currentPart.partNumber
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isMatched) {
|
||||||
|
matchedParts.push(currentPart);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// If no parts could be matched, throw an error.
|
||||||
|
if (matchedParts.length === 0) {
|
||||||
|
throw new Error("Could not match any parts to the selected parts");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save parts to the store.
|
||||||
|
store.commit(storeMutations.UPDATE_PARTS, matchedParts);
|
||||||
|
|
||||||
|
// Navigate to the next page.
|
||||||
|
this.$router.navigateAfterSave(
|
||||||
|
this.navigationScenarios.SELECTED_PARTS,
|
||||||
|
this.$route
|
||||||
|
);
|
||||||
},
|
},
|
||||||
mounted(){
|
|
||||||
this.LoadInitialPartsData();
|
resetDependentState() {
|
||||||
}
|
// Nothing additional to reset here: The page save is already fully resetting all the line-items on the order
|
||||||
|
},
|
||||||
|
|
||||||
|
LoadInitialPartsData() {
|
||||||
|
const partsData = this.PartsFromApi;
|
||||||
|
const alreadyPopulatedPartsData =
|
||||||
|
this.$store.getters.lineItems.glassParts === null
|
||||||
|
? {}
|
||||||
|
: this.$store.getters.lineItems.glassParts;
|
||||||
|
|
||||||
|
partsData.partsOrQuestions.map((g) => {
|
||||||
|
// If the part is already populated, use the value from the store and populate the v-model.
|
||||||
|
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
|
||||||
|
const partNumber = alreadyPopulatedPartsData[key].partNumber;
|
||||||
|
g.parts.forEach((p) => {
|
||||||
|
if (p.partNumber === partNumber) {
|
||||||
|
this.glassParts[g.glassLocation + "-" + g.glassName] = {
|
||||||
|
[g.glassLocation]: [partNumber],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.LoadInitialPartsData();
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -96,7 +96,10 @@ export default {
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
return store.getters.vehicle.model !== null;
|
if(store.getters.vehicle.model){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
},
|
},
|
||||||
resetDependentState() {
|
resetDependentState() {
|
||||||
// Invokes
|
// Invokes
|
||||||
|
|
|
||||||
|
|
@ -35,8 +35,7 @@ const routes = [
|
||||||
} else {
|
} else {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
// Check our 'Session' is still good.
|
// Check our 'Session' is still good. If not, reset state and go back to the start.
|
||||||
// If not, reset state and go back to the start.
|
|
||||||
if (!integrationHelper.isConceptSessionStillActive()) {
|
if (!integrationHelper.isConceptSessionStillActive()) {
|
||||||
baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE);
|
baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE);
|
||||||
await GoToFunnelStartOn404(next);
|
await GoToFunnelStartOn404(next);
|
||||||
|
|
@ -47,7 +46,14 @@ const routes = [
|
||||||
|
|
||||||
// On entering the concept funnel "fresh", read cookie information, decide what to do next.
|
// On entering the concept funnel "fresh", read cookie information, decide what to do next.
|
||||||
if (from.redirectedFrom === undefined) {
|
if (from.redirectedFrom === undefined) {
|
||||||
await integrationHelper.loadReferralIfPresent();
|
await integrationHelper.loadOrderIfPresent();
|
||||||
|
|
||||||
|
const pageToRedirectTo = await integrationHelper.getPageToRouteExistingOrderTo();
|
||||||
|
|
||||||
|
// Assign our fmgPage so it will load normally like the other pages.
|
||||||
|
to.query.fmgPage = pageToRedirectTo;
|
||||||
|
|
||||||
|
console.log("Page to redirect to: ", pageToRedirectTo);
|
||||||
}
|
}
|
||||||
|
|
||||||
// If we already have our route, go to it.
|
// If we already have our route, go to it.
|
||||||
|
|
@ -117,6 +123,10 @@ router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optional
|
||||||
navigate(scenario, currentRoute, true, optionalQuery, optionalParams, optionalPageData);
|
navigate(scenario, currentRoute, true, optionalQuery, optionalParams, optionalPageData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
router.navigateToExternalUrl = (url, optionalQuery = {}) => {
|
||||||
|
navigateToUrl(url, optionalQuery);
|
||||||
|
}
|
||||||
|
|
||||||
// PRIVATE FUNCTIONS
|
// PRIVATE FUNCTIONS
|
||||||
|
|
||||||
// Navigate to the next route, depending on the scenario.
|
// Navigate to the next route, depending on the scenario.
|
||||||
|
|
|
||||||
|
|
@ -58,10 +58,6 @@ const routingTable = [
|
||||||
scenario: navigationScenarios.CLICKED_BACK,
|
scenario: navigationScenarios.CLICKED_BACK,
|
||||||
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
scenario: navigationScenarios.MOVE_TO_HERITAGE_FUNNEL,
|
|
||||||
destinationUrl: applicationConfig.HERITAGE_FUNNEL,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
|
scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
|
||||||
destinationFmgPageValue: fmgPageValues.REVEAL
|
destinationFmgPageValue: fmgPageValues.REVEAL
|
||||||
|
|
|
||||||
|
|
@ -150,17 +150,17 @@ export const mutations = {
|
||||||
setLoadOrderInformation(state, orderInformation) {
|
setLoadOrderInformation(state, orderInformation) {
|
||||||
state.order.referralNumber = orderInformation.referralNumber;
|
state.order.referralNumber = orderInformation.referralNumber;
|
||||||
state.order.referralDate = orderInformation.referralDate;
|
state.order.referralDate = orderInformation.referralDate;
|
||||||
state.order.referralCorrelationId = orderInformation.correlationId;
|
state.order.referralCorrelationId = orderInformation.referralCorrelationId;
|
||||||
state.order.vehicle = {
|
state.order.vehicle = {
|
||||||
year: orderInformation.vehicle.year,
|
year: orderInformation.vehicle?.year,
|
||||||
make: orderInformation.vehicle.make,
|
make: orderInformation.vehicle?.make,
|
||||||
model: orderInformation.vehicle.model,
|
model: orderInformation.vehicle?.model,
|
||||||
style: orderInformation.vehicle.style,
|
style: orderInformation.vehicle?.style,
|
||||||
carId: orderInformation.vehicle.carId,
|
carId: orderInformation.vehicle?.carId,
|
||||||
category: orderInformation.vehicle.category,
|
category: orderInformation.vehicle?.category,
|
||||||
imageUrl: orderInformation.vehicle.imageUrl,
|
imageUrl: orderInformation.vehicle?.imageUrl,
|
||||||
imageVifNumber: orderInformation.vehicle.imageVifNumber,
|
imageVifNumber: orderInformation.vehicle?.imageVifNumber,
|
||||||
imageColor: orderInformation.vehicle.imageVifColor
|
imageColor: orderInformation.vehicle?.imageVifColor
|
||||||
};
|
};
|
||||||
state.order.damage.glassToReplace = orderInformation.glassToReplace;
|
state.order.damage.glassToReplace = orderInformation.glassToReplace;
|
||||||
state.order.damage.isRepair = orderInformation.isRepair;
|
state.order.damage.isRepair = orderInformation.isRepair;
|
||||||
|
|
@ -357,14 +357,14 @@ export const actions = {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
loadOrder(context, {referralNumber, referralDate, correlationId}) {
|
loadOrder(context, {referralNumber, referralDate, referralCorrelationId}) {
|
||||||
return globalMethods.callHttpClient({
|
return globalMethods.callHttpClient({
|
||||||
method: endpoints.LoadOrder.method,
|
method: endpoints.LoadOrder.method,
|
||||||
endpoint: endpoints.LoadOrder.url,
|
endpoint: endpoints.LoadOrder.url,
|
||||||
payload: {
|
payload: {
|
||||||
referralNumber: referralNumber,
|
referralNumber: referralNumber,
|
||||||
referralDate: referralDate,
|
referralDate: referralDate,
|
||||||
correlationId: correlationId
|
referralCorrelationId: referralCorrelationId
|
||||||
},
|
},
|
||||||
}).then( (response) => {
|
}).then( (response) => {
|
||||||
context.commit(storeMutations.SET_LOAD_CONCEPT_SESSION_INFO, response.data);
|
context.commit(storeMutations.SET_LOAD_CONCEPT_SESSION_INFO, response.data);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue