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

Service Packages defects

src/iss-components/cart-dropdown/cart-dropdown.vue

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

src/layouts/service-packages/service-package-question/service-package-question.vue

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

src/layouts/service-packages/service-packages.vue

@@ -10,11 +10,13 @@
             </div>
             <div class="iss-heritage-container-width">
                 <div class="service-packages-container">
-                    <siteSubHeader
+                    <h5
-                        class="subheader mt-5"
+                        class="sub-header"
-                        justification="center"
+                        v-html="servicePackagesSubHeader"></h5>
-                        cmsWidgetName="SiteSubHeaderWidget"
+                    <div
-                        issContainingPage="service-packages" />
+                        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>

src/store/index.js

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