save package to store / pre-select

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;
 
@@ -44,16 +45,16 @@ export default {
         availableLineItems: {
             type: Array,
             default: () => []
-        }
+        },
     },
     setup() {
         const mainStore = useMainStore();
         return { mainStore };
     },
-    emits: ['vapsItemsSelected'],
+    emits: ['vapsItemsSelected', 'packageSelected', 'update:modelValue'],
     data() {
         return {
-            servicePackageRadio,
+            servicePackageRadio: shallowRef(servicePackageRadio),
             selectedPackageName: '',
             questionText: 'Select an option:'
         };
@@ -149,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,
@@ -266,6 +271,12 @@ export default {
             const glassLocationMatches =
                 this.mainStore.order.damage.glassToReplace?.filter((glassToReplace) => glassToReplace.glassLocation === glassLocation) ?? [];
             return !!glassLocationMatches.length;
+        },
+        preselectPackage() {
+            if (this.mainStore.order.servicePackage) {
+                this.selectedPackageName = this.mainStore.order.servicePackage;
+                return;
+            }
         }
     }
 };

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

@@ -27,6 +27,7 @@
                         :validationRules="rules.optionRequired"
                         isRequired
                         @vapsItemsSelected="vapsItemsSelectedAction"
+                        @packageSelected="packageSelectedAction"
                         @link-event="openModalAction" />
                     <div class="d-flex justify-content-center mt-8 mb-4">
                         <buttonMain
@@ -165,6 +166,7 @@ export default {
     data() {
         return {
             selectedVaps: [],
+            selectedPackageTier: '',
             availableLineItems: [],
             loadingText: [
                 'Finding shops near you',
@@ -217,6 +219,9 @@ export default {
         vapsItemsSelectedAction(vapsItemsSelected) {
             this.selectedVaps = vapsItemsSelected;
         },
+        packageSelectedAction(packageTier) {
+            this.selectedPackageTier = packageTier;
+        },
         forwardButtonAction() {
             const parts = {
                 vaps: this.selectedVaps
@@ -225,6 +230,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

src/store/index.js

@@ -155,6 +155,7 @@ export const getDefaultState = () => ({
             vaps: null,
             serverData: null
         },
+        servicePackage: null,
         insuranceCoverage: {
             coverageStatus: coverageStatuses.PENDING,
             coverageType: coverageType.NONE,
@@ -1948,6 +1949,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