CSR-702 Add basic routing for part-questions
This commit is contained in:
parent
c400ee5a7b
commit
6a8409cd34
15 changed files with 60 additions and 38 deletions
|
|
@ -89,7 +89,7 @@ export default {
|
||||||
modelValue: [Array, String],
|
modelValue: [Array, String],
|
||||||
validationRules: String,
|
validationRules: String,
|
||||||
suppressError: Boolean,
|
suppressError: Boolean,
|
||||||
useTextForValue: Boolean
|
useTextForValue: Boolean,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
formattedGroupName() {
|
formattedGroupName() {
|
||||||
|
|
|
||||||
|
|
@ -88,7 +88,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedModel: [],
|
selectedModel: [],
|
||||||
partsQuestionsData: this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS).partsOrQuestions.filter((p) => {
|
partsQuestionsData: store.getters.pageData(fmgPageValues.PART_QUESTIONS)?.partsOrQuestions.filter((p) => {
|
||||||
if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
|
if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
|
||||||
return {
|
return {
|
||||||
glassName: p.glassName,
|
glassName: p.glassName,
|
||||||
|
|
|
||||||
|
|
@ -112,7 +112,7 @@ export default ({
|
||||||
this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
|
this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
answersToDisplay(){
|
answersToDisplay(){
|
||||||
const filteredAnswers = Array.isArray(this.answersFromCms)
|
const filteredAnswers = Array.isArray(this.answersFromCms)
|
||||||
? this.answersFromCms.filter(ans =>
|
? this.answersFromCms.filter(ans =>
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,7 @@ import { getCustomTransformValue } from "@/constants/dynamictext-mapper";
|
||||||
import { defineRule } from "vee-validate";
|
import { 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";
|
||||||
|
import store from "@/store";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "glass-part-question",
|
name: "glass-part-question",
|
||||||
|
|
@ -152,7 +153,7 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
PartDataFromApi() {
|
PartDataFromApi() {
|
||||||
return this.$store.getters.pageData(this.$route.query.fmgPage) ?? {};
|
return store.getters.pageData(this.$route.query.fmgPage) ?? {};
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
||||||
|
|
@ -63,9 +63,11 @@
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
import { Form } from "vee-validate";
|
import { Form } from "vee-validate";
|
||||||
import { storeActions } from "@/constants/store-actions";
|
import { storeActions } from "@/constants/store-actions";
|
||||||
|
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "vehicle-parts",
|
name: "vehicle-parts",
|
||||||
|
mixins: [vehicleQuestionsMixin],
|
||||||
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);
|
||||||
|
|
@ -173,19 +175,16 @@
|
||||||
methods: {
|
methods: {
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
// Check if isRepair is populated and if the pageData we need is here (Parts data)
|
// Check if isRepair is populated and if the pageData we need is here (Parts data)
|
||||||
if (
|
return store.getters.damage.isRepair != null &&
|
||||||
store.getters.damage.isRepair != null &&
|
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0;
|
||||||
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
|
|
||||||
.length !== 0
|
|
||||||
) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
},
|
},
|
||||||
backButtonAction() {
|
backButtonAction() {
|
||||||
|
console.log(this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS))
|
||||||
|
const hasPartQuestions = this.hasPartQuestions(this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS).partsOrQuestions);
|
||||||
|
const backNavigationScenario = hasPartQuestions ? this.navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS : this.navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS;
|
||||||
|
|
||||||
this.$router.navigate(
|
this.$router.navigate(
|
||||||
this.navigationScenarios.CLICKED_BACK,
|
backNavigationScenario,
|
||||||
this.$route
|
this.$route
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
10
src/mixins/vehicle-questions-mixin.js
Normal file
10
src/mixins/vehicle-questions-mixin.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
hasPartQuestions(partsOrQuestions) {
|
||||||
|
return partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
|
||||||
|
},
|
||||||
|
hasGlassLocationWithMultipleParts(partsOrQuestions) {
|
||||||
|
return partsOrQuestions.some(pq => pq.parts?.length > 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
0
src/mixins/vehicle-questions-mixin.spec.js
Normal file
0
src/mixins/vehicle-questions-mixin.spec.js
Normal file
|
|
@ -2,15 +2,17 @@ import store from "@/store";
|
||||||
import { storeActions } from "@/constants/store-actions.js";
|
import { storeActions } from "@/constants/store-actions.js";
|
||||||
import { storeMutations } from "@/constants/store-mutations.js";
|
import { storeMutations } from "@/constants/store-mutations.js";
|
||||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||||
|
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
mixins: [vehicleQuestionsMixin],
|
||||||
methods: {
|
methods: {
|
||||||
async navigateForwardWithSingleCarMatch() {
|
async navigateForwardWithSingleCarMatch() {
|
||||||
const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS);
|
const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS);
|
||||||
|
|
||||||
const partsOrQuestions = result.data.partsOrQuestions;
|
const partsOrQuestions = result.data.partsOrQuestions;
|
||||||
const hasPartsQuestions = partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
|
const hasPartsQuestions = this.hasPartQuestions(partsOrQuestions);
|
||||||
const hasGlassLocationWithMultipleParts = partsOrQuestions.some(pq => pq.parts?.length > 1);
|
const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
|
||||||
|
|
||||||
if (hasPartsQuestions) {
|
if (hasPartsQuestions) {
|
||||||
this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS, this.$route, {}, {}, result.data);
|
this.$router.navigate(this.navigationScenarios.SELECTED_VIN_WITH_PART_QUESTIONS, this.$route, {}, {}, result.data);
|
||||||
|
|
@ -23,6 +25,6 @@ export default {
|
||||||
this.$refs.loadingModal.showModal();
|
this.$refs.loadingModal.showModal();
|
||||||
navigateToHeritageFunnel();
|
navigateToHeritageFunnel();
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -173,8 +173,11 @@ async function navigate(scenario, currentRoute, optionalQuery = {}, optionalPara
|
||||||
if (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.
|
// We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our fmgPage one.
|
||||||
|
|
||||||
// Append page data to the store for the NEXT page, if any. It will be an empty object if none is provided.
|
// Update page data to the store for next page if provided. Otherwise, use existing page data or override with empty object
|
||||||
baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
|
const existingPageData = store.getters.pageData(destinationFmgPageValue) ?? {};
|
||||||
|
if (Object.keys(optionalPageData).length > 0 && Object.keys(existingPageData).length === 0) {
|
||||||
|
baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData);
|
||||||
|
}
|
||||||
|
|
||||||
// if cookie and referralNumber/Date exists OR an emailAddress has been saved
|
// if cookie and referralNumber/Date exists OR an emailAddress has been saved
|
||||||
if ((getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) || store.getters.order.customer?.emailAddress) {
|
if ((getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) || store.getters.order.customer?.emailAddress) {
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,9 @@ const navigationScenarios = {
|
||||||
SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
|
SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
|
||||||
ANSWERED_QUESTIONS_WITH_SINGLE_PART: "ANSWERED_QUESTIONS_WITH_SINGLE_PART",
|
ANSWERED_QUESTIONS_WITH_SINGLE_PART: "ANSWERED_QUESTIONS_WITH_SINGLE_PART",
|
||||||
ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS: "ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS",
|
ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS: "ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS",
|
||||||
SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY"
|
SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY",
|
||||||
|
CLICKED_BACK_WITH_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITH_PART_QUESTION_ANSWERS",
|
||||||
|
CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS: "CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS"
|
||||||
};
|
};
|
||||||
|
|
||||||
export { navigationScenarios };
|
export { navigationScenarios };
|
||||||
|
|
|
||||||
|
|
@ -82,10 +82,6 @@ const routingTable = function(store) {
|
||||||
{
|
{
|
||||||
fmgPageValue: fmgPageValues.VEHICLE_PARTS,
|
fmgPageValue: fmgPageValues.VEHICLE_PARTS,
|
||||||
maps: [
|
maps: [
|
||||||
{
|
|
||||||
scenario: navigationScenarios.CLICKED_BACK,
|
|
||||||
destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
scenario: navigationScenarios.SELECTED_PARTS,
|
scenario: navigationScenarios.SELECTED_PARTS,
|
||||||
destinationFmgPageValue: fmgPageValues.QUOTE,
|
destinationFmgPageValue: fmgPageValues.QUOTE,
|
||||||
|
|
@ -94,6 +90,14 @@ const routingTable = function(store) {
|
||||||
scenario: navigationScenarios.CLICKED_FORWARD,
|
scenario: navigationScenarios.CLICKED_FORWARD,
|
||||||
destinationFmgPageValue: fmgPageValues.REVEAL,
|
destinationFmgPageValue: fmgPageValues.REVEAL,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
scenario: navigationScenarios.CLICKED_BACK_WITH_PART_QUESTION_ANSWERS,
|
||||||
|
destinationFmgPageValue: fmgPageValues.PART_QUESTIONS,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
scenario: navigationScenarios.CLICKED_BACK_WITHOUT_PART_QUESTION_ANSWERS,
|
||||||
|
destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/se
|
||||||
import createPersistedState from "vuex-persistedstate";
|
import createPersistedState from "vuex-persistedstate";
|
||||||
import globalMethods from "@/global-methods";
|
import globalMethods from "@/global-methods";
|
||||||
import { storeActions } from "../constants/store-actions";
|
import { storeActions } from "../constants/store-actions";
|
||||||
|
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||||
|
|
||||||
// Export State
|
// Export State
|
||||||
const getDefaultState = () => {
|
const getDefaultState = () => {
|
||||||
|
|
@ -264,7 +265,10 @@ export const mutations = {
|
||||||
state.order.vehicle.registration.lastName = null;
|
state.order.vehicle.registration.lastName = null;
|
||||||
},
|
},
|
||||||
resetGlassPartsState(state) {
|
resetGlassPartsState(state) {
|
||||||
|
console.log("resetGlassPartsState")
|
||||||
state.order.lineItems.glassParts = null;
|
state.order.lineItems.glassParts = null;
|
||||||
|
state.order.damage.partQuestionAnswers = null;
|
||||||
|
state.applicationUser.pageData[fmgPageValues.PART_QUESTIONS] = null;
|
||||||
},
|
},
|
||||||
resetState(state) {
|
resetState(state) {
|
||||||
Object.assign(state, getDefaultState());
|
Object.assign(state, getDefaultState());
|
||||||
|
|
@ -701,7 +705,7 @@ export const actions = {
|
||||||
accountNumber: accountNumber?.toString()
|
accountNumber: accountNumber?.toString()
|
||||||
},
|
},
|
||||||
}).then((response) => {
|
}).then((response) => {
|
||||||
context.commit(storeMutations.RESET_STATE);
|
// context.commit(storeMutations.RESET_STATE);
|
||||||
context.commit(storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION, response.data);
|
context.commit(storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION, response.data);
|
||||||
return response;
|
return response;
|
||||||
});
|
});
|
||||||
|
|
@ -854,6 +858,7 @@ export const actions = {
|
||||||
},
|
},
|
||||||
savePartQuestionAnswers(context, partQuestionAnswersArray) {
|
savePartQuestionAnswers(context, partQuestionAnswersArray) {
|
||||||
//Save new values
|
//Save new values
|
||||||
|
// context.dispatch(storeActions.SAVE_GLASS_PARTS, null);
|
||||||
context.commit(storeMutations.UPDATE_PART_QUESTION_ANSWERS, partQuestionAnswersArray);
|
context.commit(storeMutations.UPDATE_PART_QUESTION_ANSWERS, partQuestionAnswersArray);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -92,10 +92,10 @@ export default {
|
||||||
: this.selectedValues[0];
|
: this.selectedValues[0];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
unmounted() { // needed to clear this button's selectedValues if it is removed
|
// unmounted() { // needed to clear this button's selectedValues if it is removed
|
||||||
this.checkValue = false;
|
// this.checkValue = false;
|
||||||
this.handleCheckChange();
|
// this.handleCheckChange();
|
||||||
},
|
// },
|
||||||
methods: {
|
methods: {
|
||||||
displayLoader() {
|
displayLoader() {
|
||||||
this.isLoaderDisplayed = true;
|
this.isLoaderDisplayed = true;
|
||||||
|
|
|
||||||
|
|
@ -92,10 +92,10 @@ export default {
|
||||||
: this.selectedValues[0];
|
: this.selectedValues[0];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
unmounted() { // needed to clear this button's selectedValues if it is removed
|
// unmounted() { // needed to clear this button's selectedValues if it is removed
|
||||||
this.checkValue = false;
|
// this.checkValue = false;
|
||||||
this.handleCheckChange();
|
// this.handleCheckChange();
|
||||||
},
|
// },
|
||||||
methods: {
|
methods: {
|
||||||
displayLoader() {
|
displayLoader() {
|
||||||
this.isLoaderDisplayed = true;
|
this.isLoaderDisplayed = true;
|
||||||
|
|
|
||||||
|
|
@ -110,10 +110,6 @@ export default {
|
||||||
this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
|
this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
unmounted() { // needed to clear this button's selectedValues if it is removed
|
|
||||||
this.checkValue = false;
|
|
||||||
this.handleCheckChange();
|
|
||||||
},
|
|
||||||
computed: {
|
computed: {
|
||||||
getLabelClasses() {
|
getLabelClasses() {
|
||||||
if (this.isWide) {
|
if (this.isWide) {
|
||||||
|
|
@ -185,7 +181,7 @@ export default {
|
||||||
|
|
||||||
const fieldOptions = {
|
const fieldOptions = {
|
||||||
type: inputType,
|
type: inputType,
|
||||||
checkedValue: props.value, // EX: "Single" or "Passenger"
|
// checkedValue: props.value, // EX: "Single" or "Passenger"
|
||||||
potentialInitialValue: props.selectedValues,
|
potentialInitialValue: props.selectedValues,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue