jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-98 Fix merge conflicts

Browse source
This commit is contained in:
Katie 2022-03-23 13:03:08 -04:00
commit dda0a9136b
10 changed files with 297 additions and 240 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/helpers/heritage-integration-helper.js
View file

@ -1,14 +1,13 @@
import { storeActions } from "@/constants/store-actions.js";
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 { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
import store from "@/store";
import router from "@/router";
import baseMixin from "../mixins/base-mixin";
// Saves Referral if one is available and commits referral details to state.
export async function saveOrder() {
console.log("saving order...");
const savedOrderInfo = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SAVE_ORDER);
@ -24,23 +23,14 @@ export async function saveOrder() {
updateOrCreateConceptCookie();
}
// Loads order based on referral data in cookie, also loads the referral information into state.
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() {
export async function loadOrderIfPresent() {
console.log("attempting to load referral....");
const conceptCookie = getConceptCookie();
// Do nothing if there is no cookie or no correlation id.
if (conceptCookie === null || conceptCookie.ReferralCorrelationId === null) {
console.log("No referral found");
return;
return null;
}
// Reset state if cookie says to.
@ -48,12 +38,32 @@ export async function loadReferralIfPresent() {
console.log("Resetting state...");
baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE);
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.
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() {
@ -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() {
// Create the order (or save existing order) when navigating to Heritage Funnel.
await saveOrder();
router.navigate(
navigationScenarios.MOVE_TO_HERITAGE_FUNNEL,
router.currentRoute.value,
router.navigateToExternalUrl(
externalUrls.HERITAGE_FUNNEL,
{
corid: store.state.order.referralCorrelationId,
src: "concept-funnel",
@ -115,7 +122,6 @@ export async function navigateToHeritageFunnel() {
);
}
/* Start cookie related functions */
export function getConceptCookie() {
const cookieJson = document.cookie
?.split("; ")
@ -129,7 +135,27 @@ export function getConceptCookie() {
}
}
// --------- 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) {
if (typeof properties == "object") {
@ -154,4 +180,3 @@ function deleteConceptCookie() {
}
/* End cookie related functions */

2
src/helpers/heritage-integration-helper.spec.js
View file

@ -116,7 +116,7 @@ describe("saveOrder", () => {
expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.SET_REFERRAL_INFORMATION, {
referralNumber: mockReferralNumber,
referralDate: mockReferralDate,
correlationId: mockCorrelationId
referralCorrelationId: mockCorrelationId
});
});

10
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -70,8 +70,6 @@ import alert from "@/ux-components/alert/alert";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
import { Form, defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
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 { navigateToHeritageFunnel } from "@/helpers/heritage-integration-helper";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
// DEFINE VALIDATION RULES
defineRule("replace-options-required", required(errorMessages.REPLACE_OPTIONS_REQUIRED));
@ -150,7 +151,10 @@ export default {
},
methods: {
arePagePrerequisitesValid() {
return store.getters.vehicle.carId !== null;
if(store.getters.vehicle.carId){
return true;
}
return false;
},
resetDependentState() {
store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);

5
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -84,7 +84,10 @@ export default {
);
},
arePagePrerequisitesValid() {
return store.getters.vehicle.year !== null;
if (store.getters.vehicle.year){
return true;
}
return false;
},
resetDependentState() {
// Set

5
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -85,7 +85,10 @@ export default {
);
},
arePagePrerequisitesValid() {
return store.getters.vehicle.make !== null;
if(store.getters.vehicle.make){
return true;
}
return false;
},
resetDependentState() {
// Set

393
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -1,26 +1,42 @@
<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" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" />
<div class="container-fluid prevent-squish my-5">
<div class="row">
<div class="col">
<alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
</div>
<div class="row">
<div class="col">
<alert
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
:alertHeadline="alertWidgetData.headline"
:alertCopy="alertWidgetData.copy"
:isDismissible="false"
/>
</div>
</div>
</div>
<div v-for="(item, i) in PartsForQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<div class="container-fluid">
<hr v-if="i > 0" />
</div>
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<div class="container-fluid">
<hr v-if="i > 0" />
</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>
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
</div>
<funnelFooter
ref="funnelFooter"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div>
</template>
<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 alert from "@/ux-components/alert/alert";
// Supporting Files
import {
fetchCmsContentForPage
} from "@/helpers/cms-content-helper";
import {
settleAllPromises
} from "@/helpers/layout-helper";
import {
fmgPageValues
} from "@/router/router-constants/fmgPage-values";
import {
storeMutations
} from "@/constants/store-mutations";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
export default {
name: "vehicle-parts",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results
const promiseResultMap = [{
resultKey: "cmsContent",
promise: cmsContentPromise,
}, ];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
name: "vehicle-parts",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.$refs.funnelHeader.initializeComponent(
resultMap.cmsContent.FunnelHeaderWidget
);
vm.$refs.vehicleBanner.initializeComponent(
resultMap.cmsContent.VehicleBannerWidget
);
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
// Glass Part Question dynamic component
// Glass Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) =>
vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
})
);
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) =>
vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
})
);
// Set alertData for the page alert. These use props so we don't call
// initializeComponent here.
vm.alertWidgetData = {
copy: resultMap.cmsContent.AlertWidget.BodyText,
headline: resultMap.cmsContent.AlertWidget.HeadlineText,
};
});
},
data() {
// Set alertData for the page alert. These use props so we don't call
// initializeComponent here.
vm.alertWidgetData = {
copy: resultMap.cmsContent.AlertWidget.BodyText,
headline: resultMap.cmsContent.AlertWidget.HeadlineText,
};
});
},
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 {
glassParts: {},
alertWidgetData: Object,
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;
},
components: {
glassPartQuestion,
funnelHeader,
vehicleBanner,
funnelSubHeader,
funnelFooter,
alert,
PartsFromApi() {
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
},
computed: {
PartsForQuestions() {
const partsData = this.PartsFromApi;
// Map API result data, to vehicle-parts data structure
const mappedData = partsData.partsOrQuestions.map((g) => {
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";
},
RefPrefix() {
return "partQuestion";
},
methods: {
arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data)
if (
store.getters.damage.isRepair !== null &&
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
.length !== 0
) {
return true;
}
},
methods: {
arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data)
if (
(store.getters.damage.isRepair) &&
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
.length !== 0
) {
return true;
}
return false;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
const selectedGlassPartNumbers = [];
const matchedParts = [];
return false;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
const selectedGlassPartNumbers = [];
const matchedParts = [];
// Compile all selected parts from the page.
for (let [key, value] of Object.entries(this.glassParts)) {
for (let [glassKey, glassValue] of Object.entries(value)) {
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],
};
}
});
});
});
// Compile all selected parts from the page.
for (let [key, value] of Object.entries(this.glassParts)) {
for (let [glassKey, glassValue] of Object.entries(value)) {
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
);
},
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>

5
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -96,7 +96,10 @@ export default {
);
},
arePagePrerequisitesValid() {
return store.getters.vehicle.model !== null;
if(store.getters.vehicle.model){
return true;
}
return false;
},
resetDependentState() {
// Invokes

16
src/router/index.js
View file

@ -35,8 +35,7 @@ const routes = [
} else {
try {
// Check our 'Session' is still good.
// If not, reset state and go back to the start.
// Check our 'Session' is still good. If not, reset state and go back to the start.
if (!integrationHelper.isConceptSessionStillActive()) {
baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE);
await GoToFunnelStartOn404(next);
@ -47,7 +46,14 @@ const routes = [
// On entering the concept funnel "fresh", read cookie information, decide what to do next.
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.
@ -117,6 +123,10 @@ router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optional
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.

4
src/router/router-constants/routing-table.js
View file

@ -58,10 +58,6 @@ const routingTable = [
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE,
},
{
scenario: navigationScenarios.MOVE_TO_HERITAGE_FUNNEL,
destinationUrl: applicationConfig.HERITAGE_FUNNEL,
},
{
scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART,
destinationFmgPageValue: fmgPageValues.REVEAL

24
src/store/index.js
View file

@ -150,17 +150,17 @@ export const mutations = {
setLoadOrderInformation(state, orderInformation) {
state.order.referralNumber = orderInformation.referralNumber;
state.order.referralDate = orderInformation.referralDate;
state.order.referralCorrelationId = orderInformation.correlationId;
state.order.referralCorrelationId = orderInformation.referralCorrelationId;
state.order.vehicle = {
year: orderInformation.vehicle.year,
make: orderInformation.vehicle.make,
model: orderInformation.vehicle.model,
style: orderInformation.vehicle.style,
carId: orderInformation.vehicle.carId,
category: orderInformation.vehicle.category,
imageUrl: orderInformation.vehicle.imageUrl,
imageVifNumber: orderInformation.vehicle.imageVifNumber,
imageColor: orderInformation.vehicle.imageVifColor
year: orderInformation.vehicle?.year,
make: orderInformation.vehicle?.make,
model: orderInformation.vehicle?.model,
style: orderInformation.vehicle?.style,
carId: orderInformation.vehicle?.carId,
category: orderInformation.vehicle?.category,
imageUrl: orderInformation.vehicle?.imageUrl,
imageVifNumber: orderInformation.vehicle?.imageVifNumber,
imageColor: orderInformation.vehicle?.imageVifColor
};
state.order.damage.glassToReplace = orderInformation.glassToReplace;
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({
method: endpoints.LoadOrder.method,
endpoint: endpoints.LoadOrder.url,
payload: {
referralNumber: referralNumber,
referralDate: referralDate,
correlationId: correlationId
referralCorrelationId: referralCorrelationId
},
}).then( (response) => {
context.commit(storeMutations.SET_LOAD_CONCEPT_SESSION_INFO, response.data);