SSR-316 and SSR-289.

Please keep in mind that prices are present but incorrect.
Also note that in cases of very short view height, tall modals appear underneath the header hamburger menu.  This is endemic to all such situations, and not specific to these cards.

src/global-methods.js

@@ -21,7 +21,7 @@ export default {
           url: cfDistroUrl + endpoint,
           data: payloadAndAnalyticsData,
           crossDomain: true,
-          responseType: {},
+          responseType: 'json',
           headers: headers,
         })
         .then((response) => {

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

@@ -24,6 +24,7 @@
     };
     export default {
         name: 'servicePackageQuestion',
+        emits: ['vapsItemsSelected'],
         props: {
             cmsWidgetName: String,
             groupName: String,
@@ -34,16 +35,10 @@
         data() {
             return {
                 servicePackageRadio: servicePackageRadio,
-                selectedPackageName: null
+                selectedPackageName: packageNames.TIER_ONE
             };
         },
         watch: {
-            availableLineItems() {
-                const store = useMainStore();
-                if (this.allGlassPartsAndSupportingItemsHavePrices(store.order.lineItems)) {
-                    this.selectDefaultPackage();
-                }
-            },
             selectedPackageName(newValue) {
                 const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
                 this.$emit('vapsItemsSelected', VapsProductsInSelectedPackage);
@@ -51,10 +46,14 @@
         },
         computed: {
             nullSafeAvailableLineItems() {
+                if (this.availableLineItems?.lineItems) {
+                    return this.availableLineItems.lineItems;
+                }
+
                 return this.availableLineItems ?? [];
             },
             servicePackageAnswers() {
-                if (!this.cmsWidgetName) return {};
+                if (!this.cmsWidgetName) return [];
                 const cmsAnswersContent = [
                     {
                         Name: 'TierOne',
@@ -84,6 +83,9 @@
                 ));
                 return modifiedAnswers;
             },
+            isRecalibrationOnOrder() {
+                return this.lineItemsContainsPartType(partTypeStrings.RECALIBRATION);
+            },
             frontWipersApplicableForTierTwo() {
                 const store = useMainStore();
                 const frontWipersAreAvailable = this.lineItemsContainsPartType(
@@ -205,50 +207,6 @@
                 });
                 return vapsPrice;
             },
-            selectDefaultPackage() {
-                const store                = useMainStore();
-                const vapsFromStore        = store.lineItems.vaps;
-                let   lowestTierForPackage = packageNames.TIER_ONE;
-                if (vapsFromStore?.length > 0) {
-                    vapsFromStore.every((vapsItem) => {
-                        let lowestTierForThisItem = this.getLowestTierForThisItem(vapsItem);
-                        if (lowestTierForThisItem === packageNames.TIER_THREE) {
-                            lowestTierForPackage = packageNames.TIER_THREE;
-                            return false;
-                        } else if (lowestTierForThisItem === packageNames.TIER_TWO) {
-                            lowestTierForPackage = packageNames.TIER_TWO;
-                            return true;
-                        } else {
-                            return true;
-                        }
-                    });
-                }
-                this.selectedPackageName = lowestTierForPackage;
-            },
-            allGlassPartsAndSupportingItemsHavePrices(lineItems) {
-                if (lineItems?.glassParts) {
-                    for (let i = 0; i < lineItems.glassParts.length; i++) {
-                        if (this.priceIsNullOrZero(lineItems.glassParts[i])) {
-                            return false;
-                        }
-                    }
-                }
-                if (lineItems?.supportingItems) {
-                    for (let i = 0; i < lineItems.supportingItems.length; i++) {
-                        if (this.priceIsNullOrZero(lineItems.supportingItems[i])) {
-                            return false;
-                        }
-                    }
-                }
-                return true;
-            },
-            priceIsNullOrZero(lineItem) {
-                return (
-                    (lineItem.kitPrice == null || lineItem.kitPrice == 0) &&
-                    (lineItem.laborAmount == null || lineItem.laborAmount == 0) &&
-                    (lineItem.sellingPrice == null || lineItem.sellingPrice == 0)
-                );
-            },
             getLowestTierForThisItem(vapsItem) {
                 let lowestTierForThisItem = null;
                 switch (vapsItem.partType) {
@@ -345,7 +303,7 @@
                 return !!glassLocationMatches.length;
             },
             getTotalLineItemPrice(lineItem) {
-                return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice
+                return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
             }
         },
         components: {

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

@@ -1,5 +1,5 @@
 <template>
-    <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
+    <baseInputButton v-bind="$props" v-model="selectedValue">
         <div class="package-label mb-4"
              :class="[this.buttonLabelSubCopy ? 'has-subheader' : '']"
              for="testradio">
@@ -26,12 +26,7 @@
                                     <textLink linkType="text"
                                               :text="getRouterLinkDisplayTextFromCopy(copy)"
                                               href="#!"
-                                              @click-event="
+                                              @click-event="textLinkEmit(copy)"
-                                            $emit('buttonEvent', {
-                                                eventName: 'openModal',
-                                                args: getRouterLinkRouteFromCopy(copy),
-                                            })
-                                        "
                                               :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
                                               aria-label="Modal window" />
                                 </span>
@@ -61,6 +56,7 @@ import {
 } from '@/helpers/cms-content-helper';
 export default {
     name: 'servicePackageRadio',
+    emits:['link-event'],
     mixins: [inputButtonWrapperMixin],
     components: {
         baseInputButton,
@@ -85,8 +81,13 @@ export default {
                     .split('- ')  //At some point we'll want a better delimiter
                     .filter((lineItem) => lineItem);    
             }
+        },
+        textLinkEmit(copy) {
+            this.$parent.$emit('link-event', {
+                args: getRouterLinkRouteFromCopy(copy)
+            });
         }
-    },
+    }
 };
 </script>
 

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

@@ -12,7 +12,7 @@
                                         groupName="ServicePackageQuestion"
                                         :availableLineItems="availableLineItems"
                                         @vapsItemsSelected="vapsItemsSelectedAction"
-                                        v-on="{ 'buttonEvent.openModal': openModalAction }"
+                                        v-on:link-event="openModalAction"
                                         validationRules="option-required"
                                         isRequired />
                 <textBlock cmsWidgetName="PriceDisclaimerWidget"
@@ -35,7 +35,7 @@
 
 <script>
     // Components
-    import baseFormMixin from '@/mixins/base-form-mixin';
+    import baseFormMixin              from '@/mixins/base-form-mixin';
     import siteHeader                 from '@/iss-components/site-header/site-header';
     import siteFooter                 from '@/iss-components/site-footer/site-footer';
     import siteSubHeader              from '@/iss-components/site-sub-header/site-sub-header';
@@ -52,12 +52,12 @@
 
     defineRule('option-required', required(errorMessages.OPTION_REQUIRED));
 
+    const store = useMainStore();
+
     export default {
         name: 'service-packages',
         mixins: [baseFormMixin],
         async beforeRouteEnter(to, from, next) {
-            const store = useMainStore();
-
             // Call APIs
             const cmsContentPromise      = fetchCmsContentForPage(to.query.issPage);
 
@@ -106,18 +106,17 @@
         },
         data() {
             return {
-                selectedVaps:       null,
+                selectedVaps:       [],
-                availableLineItems: null,
+                availableLineItems: [],
-                supportingItems:    null,
+                supportingItems:    [],
-                pricedGlassParts:   null
+                pricedGlassParts:   []
             };
         },
         methods: {
             openModalAction(modalName) {
-                this.$refs[modalName].openModal();
+                this.$refs[modalName.args].openModal();
             },
             arePagePrerequisitesValid() {
-                const store = useMainStore();
                 return (
                     store.order.serviceLocation.zipCode &&
                     store.order.serviceLocation.zipCodeCtu &&
@@ -134,8 +133,48 @@
                 this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
             },
             forwardButtonAction() {
-                //TODO: save items
+                if (!this.allGlassPartsAndItemsHavePrices()) {
+                    console.error('One or more items have no price assigned!');
+                }
+                if (this.pricedGlassParts.length > 0) {
+
+                    store.saveGlassParts(this.pricedGlassParts);
+                }
+                store.saveSupportingItems(this.supportingItems);
+                store.saveVaps(this.selectedVaps);
+
                 this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
+            },
+            allGlassPartsAndItemsHavePrices() {
+                if (this.pricedGlassParts) {
+                    for (let i = 0; i < this.pricedGlassParts.length; i++) {
+                        if (this.priceIsNullOrZero(this.pricedGlassParts[i])) {
+                            return false;
+                        }
+                    }
+                }
+                if (this.supportingItems) {
+                    for (let i = 0; i < this.supportingItems.length; i++) {
+                        if (this.priceIsNullOrZero(this.supportingItems[i])) {
+                            return false;
+                        }
+                    }
+                }
+                if (this.selectedVaps) {
+                    for (let i = 0; i < this.selectedVaps.length; i++) {
+                        if (this.priceIsNullOrZero(this.selectedVaps[i])) {
+                            return false;
+                        }
+                    }
+                }
+                return true;
+            },
+            priceIsNullOrZero(lineItem) {
+                return (
+                    (lineItem.kitPrice == null || lineItem.kitPrice == 0) &&
+                    (lineItem.laborAmount == null || lineItem.laborAmount == 0) &&
+                    (lineItem.sellingPrice == null || lineItem.sellingPrice == 0)
+                );
             }
         },
         components: {

src/router/router-constants/routing-table.js

@@ -483,11 +483,11 @@ const routingTable = function(store) {
       maps: [
         {
           scenario: navigationScenarios.CLICKED_BACK,
-          destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
+          destinationIssPageValue: issPageValues.SERVICE_LOCATION
         },
         {
           scenario: navigationScenarios.CLICKED_FORWARD,
-          destinationIssPageValue: issPageValues.SERVICE_LOCATION
+          destinationIssPageValue: issPageValues.REVIEW_PAGE
         }
       ]
     },

src/store/index.js

@@ -497,8 +497,8 @@ export const useMainStore = defineStore({
         ///WARNING
         ///TODO: this is temp test code until serviceLocation is complete.
         /// and ctu is available.  Also, EON may need to be implemented.
-        zipCodeToUse = "44902"
+        zipCodeToUse = "44902";
-        ctuToUse = "01820"
+        ctuToUse = "01820";
         let queryString =
           `ParentAccountNumber=${applicationConfig.CASH_PARENT_ACCOUNT_NUMBER}` +
             `&CTU=${ctuToUse}` +
@@ -905,7 +905,15 @@ export const useMainStore = defineStore({
         // Save new values
         this.updateCapabilityQuestionAnswers(capabilityQuestionAnswersArray);
       },
-      
+      saveGlassParts(glassParts) {
+        this.order.lineItems.glassParts = glassParts;
+      },
+      saveSupportingItems(supportingItems) {
+        this.order.lineItems.supportingItems = supportingItems;
+      },
+      saveVaps(vaps) {
+        this.order.lineItems.vaps = vaps;
+      },
       addEventToBus (event) {
         this.applicationUser.eventBus.push(event);
       },
@@ -1178,7 +1186,7 @@ export const useMainStore = defineStore({
       resetPartsAndDependencies() {
         this.resetGlassPartsState();
         this.updateSupportingItems(null);
-      },      
+      }
     },
     persist: true
 });