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

Merge pull request #628 from Safelite/feature/CSR-702

Browse source 
Feature/csr 702
This commit is contained in:
katieoh-safelite 2022-07-26 16:09:36 -04:00 committed by GitHub
commit 32891fde42
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 282 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common-components/button-question/button-question.vue
View file

@ -89,7 +89,7 @@ export default {
modelValue: [Array, String],
validationRules: String,
suppressError: Boolean,
useTextForValue: Boolean
useTextForValue: Boolean,
},
computed: {
formattedGroupName() {

4
src/layouts/part-questions/part-questions.vue
View file

@ -88,7 +88,7 @@ export default {
data() {
return {
selectedModel: [],
partsQuestionsData: this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS).partsOrQuestions.filter((p) => {
partsQuestionsData: this.$store.getters.pageData(fmgPageValues.PART_QUESTIONS)?.partsOrQuestions.filter((p) => {
if (Array.isArray(p.partQuestions) && p.partQuestions.length > 0) {
return {
glassName: p.glassName,
@ -142,7 +142,7 @@ export default {
if (!partsLookup) { return }
const glassNameAndPartsForStore = partsLookup.data.glassNameAndPartsForStore;
const glassNameAndPartsForStore = partsLookup.data.glassNameAndParts;
// test response data for multiple parts
const hasMultipleParts = glassNameAndPartsForStore.some((glass) => glass.parts?.length > 1);

2
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -112,7 +112,7 @@ export default ({
this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
}
},
answersToDisplay(){
answersToDisplay(){
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter(ans =>
{

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

@ -49,23 +49,25 @@
</template>
<script>
// Components
import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
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 store from "@/store";
import { Form } from "vee-validate";
import { storeActions } from "@/constants/store-actions";
// Components
import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
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 store from "@/store";
import { Form } from "vee-validate";
import { storeActions } from "@/constants/store-actions";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
export default {
name: "vehicle-parts",
mixins: [vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@ -149,76 +151,80 @@ export default {
},
},
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;
}
return false;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
let isMoldingQuestions = false;
arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data)
return store.getters.damage.isRepair != null &&
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0;
},
backButtonAction() {
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;
// 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)) {
this.$router.navigate(
backNavigationScenario,
this.$route
);
},
async forwardButtonAction() {
let isMoldingQuestions = false;
const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
// 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 isMatched = this.selectedGlassPartNumbers.some(
(p) => p === currentPart.partNumber
);
const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
if (isMatched) {
this.matchedParts.push(currentPart);
// check if there are childPartQuestions (for molding-questions)
if (Array.isArray(currentPart.childPartQuestions) && currentPart.childPartQuestions.length > 0) {
isMoldingQuestions = true
}
const isMatched = this.selectedGlassPartNumbers.some(
(p) => p === currentPart.partNumber
);
if (isMatched) {
this.matchedParts.push(currentPart);
// check if there are childPartQuestions (for molding-questions)
if (Array.isArray(currentPart.childPartQuestions) && currentPart.childPartQuestions.length > 0) {
isMoldingQuestions = true
}
}
}
}
// If no parts could be matched, throw an error (isForwardActionDisabled is based off of this.matchedParts)
if (this.isForwardActionDisabled) {
this.$refs.funnelFooter.removeLoader();
throw new Error("Could not match any parts to the selected parts");
}
// If no parts could be matched, throw an error (isForwardActionDisabled is based off of this.matchedParts)
if (this.isForwardActionDisabled) {
this.$refs.funnelFooter.removeLoader();
throw new Error("Could not match any parts to the selected parts");
}
// Navigate to the next page
if (isMoldingQuestions) {
this.$router.navigate(
this.navigationScenarios.HAS_MOLDING_QUESTIONS,
this.$route,
{},
{},
this.moldingQuestionsForStore
);
}
else {
// Save parts to the store
await this.dispatchStoreAction(
storeActions.SAVE_GLASS_PARTS,
this.matchedParts,
false
);
// Navigate to the quote page
this.$router.navigate(
this.navigationScenarios.SELECTED_PARTS,
this.$route
);
}
// Navigate to the next page
if (isMoldingQuestions) {
this.$router.navigate(
this.navigationScenarios.HAS_MOLDING_QUESTIONS,
this.$route,
{},
{},
this.moldingQuestionsForStore
);
}
else {
// Save parts to the store
await this.dispatchStoreAction(
storeActions.SAVE_GLASS_PARTS,
this.matchedParts,
false
);
// Navigate to the quote page
this.$router.navigate(
this.navigationScenarios.SELECTED_PARTS,
this.$route
);
}
// TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
// TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
},
LoadInitialPartsData() {
LoadInitialPartsData() {
const partsData = this.PartsFromApi;
const alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts === null

15
src/mixins/vehicle-questions-mixin.js Normal file
View file

@ -0,0 +1,15 @@
export default {
methods: {
hasPartQuestions(partsOrQuestions) {
return partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
},
hasGlassLocationWithMultipleParts(partsOrQuestions) {
return partsOrQuestions.some(pq => pq.parts?.length > 1);
},
hasChildPartQuestions(partsOrQuestions) {
return partsOrQuestions.some(pq => {
return pq.parts?.some(part => part.childPartQuestions?.length > 0);
});
}
}
}

161
src/mixins/vehicle-questions-mixin.spec.js Normal file
View file

@ -0,0 +1,161 @@
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import { shallowMount } from "@vue/test-utils";
import { setupMocksForJsFiles, getMountOptions } from "@/helpers/unit-test-helper.js";
describe("vehicle-questions-mixin", () => {
describe("hasPartQuestions", () => {
test("has no part questions => return false", () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const hasPartQuestions = wrapper.vm.hasPartQuestions([
{
partQuestions: []
}
])
// Assert
expect(hasPartQuestions).toBe(false);
});
test("has undefined part questions => return false", () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const hasPartQuestions = wrapper.vm.hasPartQuestions([])
// Assert
expect(hasPartQuestions).toBe(false);
});
test("has part questions => return true", () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const hasPartQuestions = wrapper.vm.hasPartQuestions([
{
partQuestions: [{
testProperty: "some value"
}]
}
])
// Assert
expect(hasPartQuestions).toBe(true);
});
});
describe("hasGlassLocationWithMultipleParts", () => {
test("has one part for one glass location => return false", () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
{
glassName: "Something",
glassLocation: "somewhere",
parts: [{
partNumber: "1234567"
}]
}
])
// Assert
expect(hasGlassLocationWithMultipleParts).toBe(false);
});
test("has one part for every glass location => return false", () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
{
glassName: "Something",
glassLocation: "somewhere",
parts: [{
partNumber: "1234567"
}]
},
{
glassName: "Another glass",
glassLocation: "somewhere else",
parts: [{
partNumber: "1234568"
}]
},
{
glassName: "Special glass",
glassLocation: "Another where",
parts: [{
partNumber: "1234569"
}]
}
])
// Assert
expect(hasGlassLocationWithMultipleParts).toBe(false);
});
test("has multiple parts for one glass location => return true", () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const hasGlassLocationWithMultipleParts = wrapper.vm.hasGlassLocationWithMultipleParts([
{
glassName: "Something",
glassLocation: "somewhere",
parts: [{
partNumber: "1234567"
}]
},
{
glassName: "Another glass",
glassLocation: "somewhere else",
parts: [{
partNumber: "1234568"
}]
},
{
glassName: "Special glass",
glassLocation: "Another where",
parts: [
{
partNumber: "1234569"
},
{
partNumber: "1234560"
}
]
}
])
// Assert
expect(hasGlassLocationWithMultipleParts).toBe(true);
});
});
});
function setupMocks({}) {
const baseMixin = setupMocksForJsFiles({});
const mocks = getMountOptions({
router: {
navigate: jest.fn()
},
});
const mockVehicleQuestionComponent = {
template: '<div></div>',
mixins: [vehicleQuestionsMixin, baseMixin.baseMixin]
};
const wrapper = shallowMount(mockVehicleQuestionComponent, mocks);
return { wrapper };
}

12
src/mixins/vin-pages-mixin.js
View file

@ -2,17 +2,17 @@ import store from "@/store";
import { storeActions } from "@/constants/store-actions.js";
import { storeMutations } from "@/constants/store-mutations.js";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
export default {
mixins: [vehicleQuestionsMixin],
methods: {
async navigateForwardWithSingleCarMatch() {
const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS);
const partsOrQuestions = result.data.partsOrQuestions;
const hasPartsQuestions = partsOrQuestions.some(pq => pq.partQuestions?.length > 0);
const hasGlassLocationWithMultipleParts = partsOrQuestions.some(pq => pq.parts?.length > 1);
const hasChildPartQuestions = partsOrQuestions.some(pq => {
return pq.parts?.some(part => part.childPartQuestions?.length > 0);
});
const hasPartsQuestions = this.hasPartQuestions(partsOrQuestions);
const hasGlassLocationWithMultipleParts = this.hasGlassLocationWithMultipleParts(partsOrQuestions);
const hasChildPartQuestions = this.hasChildPartQuestions(partsOrQuestions);
// TODO - ADD CHECK FOR CAPABILITY QUESTIONS TO SEE IF NAVIGATE TO CAPABILITY-QUESTIONS
@ -30,6 +30,6 @@ export default {
this.$refs.loadingModal.showModal();
navigateToHeritageFunnel();
}
}
},
}
}

7
src/router/index.js
View file

@ -176,8 +176,11 @@ async function navigate(scenario, currentRoute, optionalQuery = {}, optionalPara
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.
// 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);
// Update page data to the store for next page if provided. Otherwise, use existing page data or override with empty object
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 ((getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) || store.getters.order.customer?.emailAddress) {

4
src/router/router-constants/navigation-scenarios.js
View file

@ -20,8 +20,10 @@ const navigationScenarios = {
SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
ANSWERED_QUESTIONS_WITH_SINGLE_PART: "ANSWERED_QUESTIONS_WITH_SINGLE_PART",
ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS: "ANSWERED_QUESTIONS_WITH_MULTIPLE_PARTS",
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",
HAS_MOLDING_QUESTIONS: "HAS_MOLDING_QUESTIONS",
SELECTED_PROVIDE_VIN_DIFFERENT_WAY: "SELECTED_PROVIDE_VIN_DIFFERENT_WAY"
};
export { navigationScenarios };

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

@ -82,10 +82,6 @@ const routingTable = function(store) {
{
fmgPageValue: fmgPageValues.VEHICLE_PARTS,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.VIN_LOOKUP,
},
{
scenario: navigationScenarios.SELECTED_PARTS,
destinationFmgPageValue: fmgPageValues.QUOTE,
@ -94,6 +90,14 @@ const routingTable = function(store) {
scenario: navigationScenarios.CLICKED_FORWARD,
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,
},
],
},
{

3
src/store/index.js
View file

@ -5,6 +5,7 @@ import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/se
import createPersistedState from "vuex-persistedstate";
import globalMethods from "@/global-methods";
import { storeActions } from "../constants/store-actions";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
// Export State
const getDefaultState = () => {
@ -265,6 +266,8 @@ export const mutations = {
},
resetGlassPartsState(state) {
state.order.lineItems.glassParts = null;
state.order.damage.partQuestionAnswers = null;
state.applicationUser.pageData[fmgPageValues.PART_QUESTIONS] = null;
},
resetState(state) {
Object.assign(state, getDefaultState());

4
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -92,10 +92,6 @@ export default {
: this.selectedValues[0];
}
},
unmounted() { // needed to clear this button's selectedValues if it is removed
this.checkValue = false;
this.handleCheckChange();
},
methods: {
displayLoader() {
this.isLoaderDisplayed = true;

4
src/ux-components/list-button/list-button.vue
View file

@ -92,10 +92,6 @@ export default {
: this.selectedValues[0];
}
},
unmounted() { // needed to clear this button's selectedValues if it is removed
this.checkValue = false;
this.handleCheckChange();
},
methods: {
displayLoader() {
this.isLoaderDisplayed = true;

4
src/ux-components/list-card/list-card.vue
View file

@ -110,10 +110,6 @@ export default {
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: {
getLabelClasses() {
if (this.isWide) {