Merge pull request #1129 from Safelite/feature/kroell/service-packages-defects

Service Packages defects
This commit is contained in:
katiekroell 2026-03-04 10:13:33 -05:00 committed by GitHub
commit 993613aca3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 72 additions and 18 deletions

View file

@ -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(

View file

@ -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;

View file

@ -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>

View file

@ -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();
},