Merge pull request #1129 from Safelite/feature/kroell/service-packages-defects
Service Packages defects
This commit is contained in:
commit
993613aca3
4 changed files with 72 additions and 18 deletions
|
|
@ -366,6 +366,7 @@ export default {
|
|||
removeVap(partType) {
|
||||
const newVaps = useMainStore().lineItems.vaps?.filter((vap) => vap?.partType !== partType) ?? [];
|
||||
useMainStore().updateVaps(newVaps);
|
||||
useMainStore().updateServicePackage(null);
|
||||
},
|
||||
getCmsContentForVapsType(vapsPartType) {
|
||||
const vapsItemDescriptions = this.getCmsContent(
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import servicePackageRadio from '@/layouts/service-packages/service-package-ques
|
|||
import partTypeStrings from '@/constants/part-type-strings';
|
||||
import { useMainStore } from '@/store';
|
||||
import { getPriceOfLineItem } from '@/helpers/price-calculator';
|
||||
import { shallowRef } from 'vue';
|
||||
|
||||
const glassLocations = damageLocationsSelected;
|
||||
|
||||
|
|
@ -31,8 +32,6 @@ const packageNames = {
|
|||
TIER_THREE: 'TierThree'
|
||||
};
|
||||
|
||||
const store = useMainStore();
|
||||
|
||||
export default {
|
||||
name: 'service-package-question',
|
||||
components: {
|
||||
|
|
@ -48,10 +47,14 @@ export default {
|
|||
default: () => []
|
||||
}
|
||||
},
|
||||
emits: ['vapsItemsSelected'],
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
return { mainStore };
|
||||
},
|
||||
emits: ['vapsItemsSelected', 'packageSelected'],
|
||||
data() {
|
||||
return {
|
||||
servicePackageRadio,
|
||||
servicePackageRadio: shallowRef(servicePackageRadio),
|
||||
selectedPackageName: '',
|
||||
questionText: 'Select an option:'
|
||||
};
|
||||
|
|
@ -97,7 +100,7 @@ export default {
|
|||
return modifiedAnswers;
|
||||
},
|
||||
isRecalibrationOnOrder() {
|
||||
return this.lineItemsContainsPartType(partTypeStrings.RECALIBRATION);
|
||||
return this.mainStore.hasRecalibrationPart;
|
||||
},
|
||||
frontWipersApplicableForTierTwo() {
|
||||
const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
|
||||
|
|
@ -147,7 +150,11 @@ export default {
|
|||
selectedPackageName(newValue) {
|
||||
const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
|
||||
this.$emit('vapsItemsSelected', VapsProductsInSelectedPackage);
|
||||
}
|
||||
this.$emit('packageSelected', newValue);
|
||||
},
|
||||
availableLineItems() {
|
||||
this.preselectPackage();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
processIfStatements,
|
||||
|
|
@ -262,8 +269,19 @@ export default {
|
|||
},
|
||||
glassToReplaceContainsGlassLocation(glassLocation) {
|
||||
const glassLocationMatches =
|
||||
store.order.damage.glassToReplace?.filter((glassToReplace) => glassToReplace.glassLocation === glassLocation) ?? [];
|
||||
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 = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -278,6 +296,7 @@ export default {
|
|||
|
||||
@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;
|
||||
|
|
|
|||
|
|
@ -10,11 +10,13 @@
|
|||
</div>
|
||||
<div class="iss-heritage-container-width">
|
||||
<div class="service-packages-container">
|
||||
<siteSubHeader
|
||||
class="subheader mt-5"
|
||||
justification="center"
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
issContainingPage="service-packages" />
|
||||
<h5
|
||||
class="sub-header"
|
||||
v-html="servicePackagesSubHeader"></h5>
|
||||
<div
|
||||
class="mb-4 text-center"
|
||||
v-html="secondaryText">
|
||||
</div>
|
||||
<servicePackageQuestion
|
||||
ref="servicePackage"
|
||||
cmsWidgetName="ServicePackage"
|
||||
|
|
@ -23,6 +25,7 @@
|
|||
:validationRules="rules.optionRequired"
|
||||
isRequired
|
||||
@vapsItemsSelected="vapsItemsSelectedAction"
|
||||
@packageSelected="packageSelectedAction"
|
||||
@link-event="openModalAction" />
|
||||
<div class="d-flex justify-content-center mt-8 mb-4">
|
||||
<buttonMain
|
||||
|
|
@ -55,10 +58,6 @@
|
|||
<contentGroupModal
|
||||
ref="RearWiperModal"
|
||||
cmsWidgetName="RearWiperModal" />
|
||||
<contentGroupModal
|
||||
ref="RecalModal"
|
||||
cssModalHeadlineClass="text-start"
|
||||
cmsWidgetName="RecalModal" />
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
|
@ -89,7 +88,6 @@ export default {
|
|||
components: {
|
||||
siteHeader,
|
||||
siteFooter,
|
||||
siteSubHeader,
|
||||
Form,
|
||||
servicePackageQuestion,
|
||||
loadingModal,
|
||||
|
|
@ -166,6 +164,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
selectedVaps: [],
|
||||
selectedPackageTier: '',
|
||||
availableLineItems: [],
|
||||
loadingText: [
|
||||
'Finding shops near you',
|
||||
|
|
@ -182,6 +181,20 @@ export default {
|
|||
computed: {
|
||||
PriceDisclaimerText() {
|
||||
return this.getCmsContent('PriceDisclaimerWidget', 'Text');
|
||||
},
|
||||
vehicleMake() {
|
||||
return (store.order.vehicle.make ?? '').toUpperCase();
|
||||
},
|
||||
vehicleModel() {
|
||||
return (store.order.vehicle.model ?? '').toUpperCase();
|
||||
},
|
||||
servicePackagesSubHeader() {
|
||||
return this.getCmsContent('SiteSubHeaderWidget', 'SubHeaderText')
|
||||
.replace('{custom:vehicleMake}', this.vehicleMake)
|
||||
.replace('{custom:vehicleModel}', this.vehicleModel);
|
||||
},
|
||||
secondaryText() {
|
||||
return this.getCmsContent('SiteSubHeaderWidget', 'SecondaryText');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -204,6 +217,9 @@ export default {
|
|||
vapsItemsSelectedAction(vapsItemsSelected) {
|
||||
this.selectedVaps = vapsItemsSelected;
|
||||
},
|
||||
packageSelectedAction(packageTier) {
|
||||
this.selectedPackageTier = packageTier;
|
||||
},
|
||||
forwardButtonAction() {
|
||||
const parts = {
|
||||
vaps: this.selectedVaps
|
||||
|
|
@ -212,6 +228,7 @@ export default {
|
|||
window.console.error('One or more items have no price assigned!');
|
||||
}
|
||||
store.updateVaps(this.selectedVaps);
|
||||
store.updateServicePackage(this.selectedPackageTier);
|
||||
|
||||
const scenario = store.isMobileAppointment
|
||||
? this.navigationScenarios.CLICKED_FORWARD_MOBILE
|
||||
|
|
@ -244,7 +261,7 @@ export default {
|
|||
padding-left: .9375rem;
|
||||
padding-right: .9375rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin: 1.5rem auto;
|
||||
:deep(.subheader-primary) {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -274,4 +291,10 @@ export default {
|
|||
.back-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.sub-header {
|
||||
text-align: center;
|
||||
color: $black;
|
||||
line-height: 2rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@ export const getDefaultState = () => ({
|
|||
vaps: null,
|
||||
serverData: null
|
||||
},
|
||||
servicePackage: null,
|
||||
insuranceCoverage: {
|
||||
coverageStatus: coverageStatuses.PENDING,
|
||||
coverageType: coverageType.NONE,
|
||||
|
|
@ -1940,6 +1941,10 @@ export const useMainStore = defineStore({
|
|||
this.order.lineItems.vaps = partsData;
|
||||
},
|
||||
|
||||
updateServicePackage(packageName) {
|
||||
this.order.servicePackage = packageName;
|
||||
},
|
||||
|
||||
updateMobileFee(fee) {
|
||||
const isMobileFeeHidden = getExperimentSettingValue(this.experimentSettings, experimentSettings.ISS_FEATURE_TOGGLE_IS_MOBILE_FEE_HIDDEN) === 'true';
|
||||
// Mobile Fee is only added for NO COMP or ITAC and is NOT hidden
|
||||
|
|
@ -2024,6 +2029,7 @@ export const useMainStore = defineStore({
|
|||
|
||||
this.updateSupportingItems(null);
|
||||
this.updateVaps(null);
|
||||
this.updateServicePackage(null);
|
||||
},
|
||||
|
||||
updateVehicleCoverage(coverage) {
|
||||
|
|
@ -2068,6 +2074,7 @@ export const useMainStore = defineStore({
|
|||
this.order.loadedFromDupeCheck = null;
|
||||
this.order.loadedSessionClearedPreviousData = null;
|
||||
this.order.availableVaps = null;
|
||||
this.order.servicePackage = null;
|
||||
this.order.carrierPhoneNumber = null;
|
||||
this.order.customerPortalLoginToken = null;
|
||||
this.order.loadedFromCookie = false;
|
||||
|
|
@ -2353,6 +2360,7 @@ export const useMainStore = defineStore({
|
|||
this.updateCapabilityQuestionAnswers(null);
|
||||
this.updateSupportingItems(null);
|
||||
this.updateVaps(null);
|
||||
this.updateServicePackage(null);
|
||||
|
||||
this.updatePageData({ page: issPageValues.VEHICLE_PARTS, data: null });
|
||||
this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null });
|
||||
|
|
@ -2821,17 +2829,20 @@ export const useMainStore = defineStore({
|
|||
this.resetRegistrationState();
|
||||
this.resetGlassPartsState();
|
||||
this.updateVaps(null);
|
||||
this.updateServicePackage(null);
|
||||
},
|
||||
|
||||
resetDamageAndDependencies() {
|
||||
this.resetDamageState();
|
||||
this.resetGlassPartsState();
|
||||
this.updateVaps(null);
|
||||
this.updateServicePackage(null);
|
||||
},
|
||||
|
||||
resetPartsAndDependencies() {
|
||||
this.resetGlassPartsState();
|
||||
this.updateVaps(null);
|
||||
this.updateServicePackage(null);
|
||||
|
||||
this.resetServiceLocationAndDependencies();
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue