311 lines
13 KiB
Vue
311 lines
13 KiB
Vue
<template>
|
|
<buttonQuestion
|
|
ref="buttonQuestion"
|
|
v-model="selectedPackageName"
|
|
class="service-package-question"
|
|
:answers="servicePackageAnswers"
|
|
:groupName="groupName"
|
|
:questionText="questionText"
|
|
:questionTextClasses="['service-package-question-text']"
|
|
buttonTypeString="servicePackageRadio"
|
|
:buttonTypeObject="servicePackageRadio"
|
|
:validationRules="validationRules"
|
|
:isRequired="isRequired"
|
|
:isHorizontalLayout="true" />
|
|
</template>
|
|
|
|
<script>
|
|
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
|
import { processIfStatements } from '@/helpers/cms-content-helper';
|
|
import damageLocationsSelected from '@/constants/damage-locations-selected';
|
|
import servicePackageRadio from '@/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue';
|
|
import partTypeStrings from '@/constants/part-type-strings';
|
|
import { useMainStore } from '@/store';
|
|
import { getPriceOfLineItem } from '@/helpers/price-calculator';
|
|
import { shallowRef } from 'vue';
|
|
import { containsRecalParts } from '@/helpers/recal-helper';
|
|
|
|
const glassLocations = damageLocationsSelected;
|
|
|
|
const packageNames = {
|
|
TIER_ONE: 'TierOne',
|
|
TIER_TWO: 'TierTwo',
|
|
TIER_THREE: 'TierThree'
|
|
};
|
|
|
|
export default {
|
|
name: 'service-package-question',
|
|
components: {
|
|
buttonQuestion
|
|
},
|
|
props: {
|
|
cmsWidgetName: String,
|
|
groupName: String,
|
|
validationRules: String,
|
|
isRequired: Boolean,
|
|
availableLineItems: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
setup() {
|
|
const mainStore = useMainStore();
|
|
return { mainStore };
|
|
},
|
|
emits: ['vapsItemsSelected', 'packageSelected'],
|
|
data() {
|
|
return {
|
|
servicePackageRadio: shallowRef(servicePackageRadio),
|
|
selectedPackageName: '',
|
|
questionText: 'Select an option:'
|
|
};
|
|
},
|
|
computed: {
|
|
nullSafeAvailableLineItems() {
|
|
if (this.availableLineItems?.lineItems) {
|
|
return this.availableLineItems.lineItems;
|
|
}
|
|
return this.availableLineItems ?? [];
|
|
},
|
|
servicePackageAnswers() {
|
|
if (!this.cmsWidgetName) return [];
|
|
const cmsAnswersContent = [];
|
|
if (this.shouldDisplayTierTwoPackage) {
|
|
cmsAnswersContent.push({
|
|
Name: 'TierTwo',
|
|
cmsWidgetName: 'StandardServicePackage'
|
|
});
|
|
}
|
|
cmsAnswersContent.push({
|
|
Name: 'TierThree',
|
|
cmsWidgetName: 'PremiumServicePackage'
|
|
});
|
|
cmsAnswersContent.push({
|
|
Name: 'TierOne',
|
|
cmsWidgetName: 'EconomyServicePackage'
|
|
});
|
|
// if cms content has not yet loaded, skip
|
|
if (!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
|
|
|| this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') === '') {
|
|
return {};
|
|
}
|
|
const modifiedAnswers = cmsAnswersContent.map((answer) => ({
|
|
value: answer.Name,
|
|
buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
|
|
buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
|
|
buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName),
|
|
buttonAuxiliaryCopy: this.getPackagePriceString(answer.Name),
|
|
buttonFooterCopy: this.getFooterTextFromCms(answer.cmsWidgetName)
|
|
}
|
|
));
|
|
return modifiedAnswers;
|
|
},
|
|
isRecalibrationOnOrder() {
|
|
return this.mainStore.hasRecalibrationPart && containsRecalParts(this.mainStore.order.lineItems);
|
|
},
|
|
frontWipersApplicableForTierTwo() {
|
|
const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
|
|
const glassToReplaceContainsWindshield = this.glassToReplaceContainsGlassLocation(glassLocations.WINDSHIELD);
|
|
|
|
if (frontWipersAreAvailable && (useMainStore().order.damage.isRepair || glassToReplaceContainsWindshield)) {
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
},
|
|
rearWiperApplicableForTierTwo() {
|
|
const rearWiperIsAvailable = this.lineItemsContainsPartType(partTypeStrings.REAR_WIPER);
|
|
return (
|
|
this.glassToReplaceContainsGlassLocation(glassLocations.REAR)
|
|
&& rearWiperIsAvailable
|
|
);
|
|
},
|
|
frontWipersApplicableForTierThree() {
|
|
const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
|
|
return frontWipersAreAvailable;
|
|
},
|
|
rearWiperApplicableForTierThree() {
|
|
const rearWiperIsAvailable = this.lineItemsContainsPartType(partTypeStrings.REAR_WIPER);
|
|
const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
|
|
return (
|
|
rearWiperIsAvailable
|
|
&& (this.glassToReplaceContainsGlassLocation(glassLocations.REAR)
|
|
|| !frontWipersAreAvailable)
|
|
);
|
|
},
|
|
rainDefenseApplicableForTierThree() {
|
|
if (
|
|
this.rearWiperApplicableForTierTwo
|
|
&& !this.frontWipersApplicableForTierTwo
|
|
&& this.frontWipersApplicableForTierThree
|
|
) {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
shouldDisplayTierTwoPackage() {
|
|
return this.frontWipersApplicableForTierTwo || this.rearWiperApplicableForTierTwo;
|
|
}
|
|
},
|
|
watch: {
|
|
selectedPackageName(newValue) {
|
|
const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
|
|
this.$emit('vapsItemsSelected', VapsProductsInSelectedPackage);
|
|
this.$emit('packageSelected', newValue);
|
|
},
|
|
availableLineItems() {
|
|
this.preselectPackage();
|
|
},
|
|
},
|
|
methods: {
|
|
processIfStatements,
|
|
getHeaderTextFromCms(cmsWidgetName) {
|
|
return this.getCmsContent(cmsWidgetName, 'HeaderText');
|
|
},
|
|
getSubheaderTextFromCms(cmsWidgetName) {
|
|
return this.getCmsContent(cmsWidgetName, 'SubheaderText');
|
|
},
|
|
getBodyTextFromCms(cmsWidgetName) {
|
|
const bodyText = this.getCmsContent(cmsWidgetName, 'BodyText');
|
|
return this.processIfStatements(bodyText, 'custom', this.getCustomValueFromString);
|
|
},
|
|
getFooterTextFromCms(cmsWidgetName) {
|
|
const footerText = this.getCmsContent(cmsWidgetName, 'FooterText');
|
|
return this.processIfStatements(footerText, 'custom', this.getCustomValueFromString);
|
|
},
|
|
getPackagePriceString(packageName) {
|
|
const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
|
|
return `+$${formattedPriceFloat}*`;
|
|
},
|
|
getPackagePrice(packageName) {
|
|
let priceFloat = 0;
|
|
if (packageName === packageNames.TIER_TWO) {
|
|
priceFloat += this.getTierTwoPackageVapsPrice();
|
|
} else if (packageName === packageNames.TIER_THREE) {
|
|
priceFloat += this.getTierThreePackageVapsPrice();
|
|
}
|
|
return priceFloat;
|
|
},
|
|
getTierTwoPackageVapsPrice() {
|
|
let vapsPrice = 0;
|
|
const priceFrontWipers = this.frontWipersApplicableForTierTwo;
|
|
const priceRearWipers = this.rearWiperApplicableForTierTwo;
|
|
this.nullSafeAvailableLineItems.forEach((item) => {
|
|
if (
|
|
(priceFrontWipers
|
|
&& item.partType.toUpperCase() === partTypeStrings.FRONT_WIPER)
|
|
|| (priceRearWipers && item.partType.toUpperCase() === partTypeStrings.REAR_WIPER)
|
|
) {
|
|
vapsPrice += getPriceOfLineItem(item);
|
|
}
|
|
});
|
|
return vapsPrice;
|
|
},
|
|
getTierThreePackageVapsPrice() {
|
|
let vapsPrice = 0;
|
|
const priceFrontWipers = this.frontWipersApplicableForTierThree;
|
|
const priceRearWipers = this.rearWiperApplicableForTierThree;
|
|
const priceRainDefense = this.rainDefenseApplicableForTierThree;
|
|
this.nullSafeAvailableLineItems.forEach((item) => {
|
|
if (
|
|
(priceFrontWipers
|
|
&& item.partType.toUpperCase() === partTypeStrings.FRONT_WIPER)
|
|
|| (priceRearWipers
|
|
&& item.partType.toUpperCase() === partTypeStrings.REAR_WIPER)
|
|
|| (priceRainDefense
|
|
&& item.partType.toUpperCase() === partTypeStrings.RAIN_DEFENSE)
|
|
) {
|
|
vapsPrice += getPriceOfLineItem(item);
|
|
}
|
|
});
|
|
return vapsPrice;
|
|
},
|
|
getVapsLineItemsForSelectedPackage(packageName) {
|
|
const vapsLineItemsForSelectedPackage = [];
|
|
if (packageName === packageNames.TIER_TWO) {
|
|
if (this.frontWipersApplicableForTierTwo) {
|
|
vapsLineItemsForSelectedPackage.push(...this.getLineItemsContainingPartType(partTypeStrings.FRONT_WIPER));
|
|
}
|
|
if (this.rearWiperApplicableForTierTwo) {
|
|
vapsLineItemsForSelectedPackage.push(...this.getLineItemsContainingPartType(partTypeStrings.REAR_WIPER));
|
|
}
|
|
} else if (packageName === packageNames.TIER_THREE) {
|
|
if (this.frontWipersApplicableForTierThree) {
|
|
vapsLineItemsForSelectedPackage.push(...this.getLineItemsContainingPartType(partTypeStrings.FRONT_WIPER));
|
|
}
|
|
if (this.rearWiperApplicableForTierThree) {
|
|
vapsLineItemsForSelectedPackage.push(...this.getLineItemsContainingPartType(partTypeStrings.REAR_WIPER));
|
|
}
|
|
if (this.rainDefenseApplicableForTierThree) {
|
|
vapsLineItemsForSelectedPackage.push(...this.getLineItemsContainingPartType(partTypeStrings.RAIN_DEFENSE));
|
|
}
|
|
}
|
|
return vapsLineItemsForSelectedPackage;
|
|
},
|
|
getCustomValueFromString(str) {
|
|
switch (str) {
|
|
case 'isRecalibrationOnOrder':
|
|
return this.isRecalibrationOnOrder;
|
|
case 'frontWipersApplicableForTierTwo':
|
|
return this.frontWipersApplicableForTierTwo;
|
|
case 'rearWiperApplicableForTierTwo':
|
|
return this.rearWiperApplicableForTierTwo;
|
|
case 'frontWipersApplicableForTierThree':
|
|
return this.frontWipersApplicableForTierThree;
|
|
case 'rearWiperApplicableForTierThree':
|
|
return this.rearWiperApplicableForTierThree;
|
|
case 'rainDefenseApplicableForTierThree':
|
|
return this.rainDefenseApplicableForTierThree;
|
|
default:
|
|
return null;
|
|
}
|
|
},
|
|
getLineItemsContainingPartType(partType) {
|
|
const partTypeMatches = this.nullSafeAvailableLineItems.filter((lineItem) => lineItem.partType.toUpperCase() === partType);
|
|
return partTypeMatches;
|
|
},
|
|
lineItemsContainsPartType(partType) {
|
|
const partTypeMatches = this.getLineItemsContainingPartType(partType);
|
|
return !!partTypeMatches.length;
|
|
},
|
|
glassToReplaceContainsGlassLocation(glassLocation) {
|
|
const glassLocationMatches =
|
|
this.mainStore.order.damage.glassToReplace?.filter((glassToReplace) => glassToReplace.glassLocation === glassLocation) ?? [];
|
|
return !!glassLocationMatches.length;
|
|
},
|
|
preselectPackage() {
|
|
const savedPackage = this.mainStore.order.servicePackage;
|
|
|
|
if (savedPackage && this.servicePackageAnswers.some((answer) => answer.value === savedPackage)) {
|
|
this.selectedPackageName = savedPackage;
|
|
return;
|
|
}
|
|
else {
|
|
this.selectedPackageName = '';
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.service-package-question-text {
|
|
font-weight: 500;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@include media-breakpoint-up(md) {
|
|
:deep(.package-main) {
|
|
justify-content: center;
|
|
padding: 0 1.5rem 0 1.5rem;
|
|
.package-wrapper:nth-child(2) {
|
|
margin-left: 0.5rem;
|
|
}
|
|
.package-wrapper:nth-child(3) {
|
|
margin-right: 0;
|
|
margin-left: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|