CSR-762 Fix merge conflicts

This commit is contained in:
Katie 2022-10-27 13:24:15 -04:00
commit 396cd86677
3 changed files with 84 additions and 81 deletions

View file

@ -225,7 +225,6 @@ export default {
} }
return windShieldOptions; return windShieldOptions;
}, },
getDoorSidesFromStore() { getDoorSidesFromStore() {

View file

@ -76,14 +76,17 @@ export default {
computed: { computed: {
tintValidationRules() { tintValidationRules() {
const validationRuleName = `${this.location}-${this.name}-tint-required`; const validationRuleName = `${this.location}-${this.name}-tint-required`;
defineRule( defineRule(
validationRuleName, validationRuleName,
required(errorMessages.OPTION_REQUIRED) required(errorMessages.OPTION_REQUIRED)
); );
return validationRuleName; return validationRuleName;
}, },
partValidationRules() { partValidationRules() {
const validationRuleName = `${this.location}-${this.name}-part-required`; const validationRuleName = `${this.location}-${this.name}-part-required`;
defineRule( defineRule(
validationRuleName, validationRuleName,
required(errorMessages.OPTION_REQUIRED) required(errorMessages.OPTION_REQUIRED)

View file

@ -1,52 +1,45 @@
<template> <template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"> <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<div class="page-container-grouped-styles vehicle-parts"> <div class="page-container-grouped-styles vehicle-parts">
<loadingModal ref="loadingModal"/> <loadingModal ref="loadingModal" />
<funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" /> <funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
<vehicleBanner <vehicleBanner
ref="vehicleBanner" ref="vehicleBanner"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" :displayGenericVehicleImage="false" />
/> <funnelSubHeader ref="funnelSubHeader" cmsWidgetName="FunnelSubHeaderWidget" />
<funnelSubHeader <div class="fade-on-route-transition sub-container make-tall">
ref="funnelSubHeader" <div class="prevent-squish my-5">
cmsWidgetName="FunnelSubHeaderWidget" <div class="row">
/> <div class="col">
<div class="fade-on-route-transition sub-container make-tall"> <alert
<div class="prevent-squish my-5"> class="rounded border-0 shadow-sm"
<div class="row"> alertClass="alert-warning"
<div class="col"> cmsWidgetName="AlertWidget"
<alert :isDismissible="false" />
class="rounded border-0 shadow-sm" </div>
alertClass="alert-warning" </div>
cmsWidgetName="AlertWidget" </div>
:isDismissible="false" <div v-for="(item, i) in PartsOrQuestions" :key="i">
/> <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.location}-${item.name}`"
v-model="selectedGlassParts[item.location + '-' + item.name]"
:location="item.location"
:name="item.name"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
</div>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="isForwardActionDisabled"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div> </div>
</div>
</div> </div>
<div v-for="(item, i) in PartsOrQuestions" :key="i"> </Form>
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.location}-${item.name}`"
v-model="selectedGlassParts[item.location + '-' + item.name]"
:location="item.location"
:name="item.name"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData"
/>
</div>
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
ref="funnelFooter"
:isForwardActionDisabled="isForwardActionDisabled"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div>
</div>
</Form>
</template> </template>
<script> <script>
@ -57,7 +50,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
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";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue'; import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
// Supporting Files // Supporting Files
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";
@ -74,25 +67,25 @@ export default {
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", resultKey: "cmsContent",
promise: cmsContentPromise, promise: cmsContentPromise,
}, },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
// 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,
}) })
); );
}); });
}, },
data() { data() {
@ -108,11 +101,13 @@ export default {
this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length this.selectedGlassPartNumbers.length !== this.PartsFromApi.partsOrQuestions.length
); );
}, },
selectedGlassPartNumbers () { selectedGlassPartNumbers() {
// Compile all selected parts from the page. // Compile all selected parts from the page.
const numberArray = []; const numberArray = [];
for (let glassPart of Object.values(this.selectedGlassParts)) { for (let glassPart of Object.values(this.selectedGlassParts)) {
if (glassPart?.partNumber) { numberArray.push(glassPart.partNumber) } if (glassPart?.partNumber) {
numberArray.push(glassPart.partNumber);
}
} }
return numberArray; return numberArray;
}, },
@ -129,7 +124,8 @@ export default {
ColorAnswerText: p.color, ColorAnswerText: p.color,
FeatureAnswers: [ FeatureAnswers: [
{ {
FeatureAnswerText: p.description === "" ? p.color : p.description, FeatureAnswerText:
p.description === "" ? p.color : p.description,
PartNumber: p.partNumber, PartNumber: p.partNumber,
}, },
], ],
@ -153,16 +149,17 @@ export default {
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)
return store.getters.damage.isRepair != null && store.getters.pageData(fmgPageValues.VEHICLE_PARTS) && return (
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0; store.getters.damage.isRepair != null &&
store.getters.pageData(fmgPageValues.VEHICLE_PARTS) &&
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS)).length !== 0
);
}, },
async forwardButtonAction() { async forwardButtonAction() {
const matchedParts = []; const matchedParts = [];
// Match them to the parts from the API. // Match them to the parts from the API.
for (let [key, value] of Object.entries( for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
this.PartsFromApi.partsOrQuestions
)) {
for (let [partKey, partValue] of Object.entries(value.parts)) { for (let [partKey, partValue] of Object.entries(value.parts)) {
const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey]; const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
@ -174,7 +171,7 @@ export default {
matchedParts.push({ matchedParts.push({
location: value.location, location: value.location,
name: value.name, name: value.name,
parts: [currentPart] parts: [currentPart],
}); });
} }
} }
@ -185,7 +182,11 @@ export default {
throw new Error("Could not match any parts to the selected parts"); throw new Error("Could not match any parts to the selected parts");
} }
await this.dispatchStoreAction(this.storeActions.RESET_MOLDING_AND_CAPABILITY_QUESTIONS_IF_NEEDED, matchedParts, false); await this.dispatchStoreAction(
this.storeActions.RESET_MOLDING_AND_CAPABILITY_QUESTIONS_IF_NEEDED,
matchedParts,
false
);
// Navigate to the next page // Navigate to the next page
this.navigateForward(matchedParts); this.navigateForward(matchedParts);
@ -195,18 +196,18 @@ export default {
const partsData = this.PartsFromApi; const partsData = this.PartsFromApi;
this.alreadyPopulatedPartsData = this.alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts === null this.$store.getters.lineItems.glassParts === null
? [] ? []
: this.$store.getters.lineItems.glassParts; : this.$store.getters.lineItems.glassParts;
partsData.partsOrQuestions.map((g) => { partsData.partsOrQuestions.map((g) => {
// If the part is already populated, use the value from the store and populate the v-model. // If the part is already populated, use the value from the store and populate the v-model.
Object.keys(this.alreadyPopulatedPartsData).forEach((key) => { Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
const partNumber = this.alreadyPopulatedPartsData[key].partNumber; const partNumber = this.alreadyPopulatedPartsData[key].partNumber;
g.parts.forEach((p) => { g.parts.forEach((p) => {
if (p.partNumber === partNumber) { if (p.partNumber === partNumber) {
this.selectedGlassParts[g.location + "-" + g.name] = p; this.selectedGlassParts[g.location + "-" + g.name] = p;
} }
}); });
}); });
}); });
}, },