Move VAPs api responsibility to subcomponent

src/layouts/review/review-sections/service-package-review/service-package-review.vue

@@ -11,6 +11,9 @@ import {
     getHighestFullySatisfiedTier,
     containsLineItemWithPartType,
 } from "@/helpers/service-package-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
 
 export default {
     name: "service-package-review",
@@ -18,14 +21,39 @@ export default {
         servicePackageOptionsCmsName: String,
         defaultPackageItemsCmsName: String,
         vapsItemsCmsName: String,
-        availableVaps: Array,
         lineItems: Object,
         damage: Object,
     },
     data() {
-        return {};
+        return {
+            availableVaps: [],
+        };
     },
     methods: {
+        loadInitialData() {
+            const wipersPromise = baseMixin.methods.dispatchStoreAction(storeActions.GET_WIPERS);
+            const rainDefensePromise = baseMixin.methods.dispatchStoreAction(
+                storeActions.GET_RAIN_DEFENSE
+            );
+
+            const promiseResultMap = [
+                {
+                    resultKey: "wipers",
+                    promise: wipersPromise,
+                },
+                {
+                    resultKey: "rainDefense",
+                    promise: rainDefensePromise,
+                },
+            ];
+
+            return settleAllPromises(promiseResultMap);
+        },
+        initializeComponent(apiResponses) {
+            const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
+
+            this.availableVaps = vapsFromApi;
+        },
         editClicked() {
             this.$emit("edit-clicked");
         },

src/layouts/review/review.vue

@@ -55,11 +55,11 @@
                 <hr class="my-0" />
 
                 <servicePackageReview
+                    ref="servicePackageReview"
                     servicePackageOptionsCmsName="ServicePackageTitle"
                     defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
                     vapsItemsCmsName="VapsItemDescriptions"
                     :damage="damageInfo"
-                    :availableVaps="availableVaps"
                     :lineItems="lineItems"
                     @edit-clicked="editServicePackage" />
             </div>
@@ -103,6 +103,8 @@ export default {
             storeActions.GET_RAIN_DEFENSE
         );
 
+        const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();
+
         // Settle promises and get results
         const promiseResultMap = [
             {
@@ -110,12 +112,8 @@ export default {
                 promise: cmsContentPromise,
             },
             {
-                resultKey: "wipers",
-                promise: wipersPromise,
-            },
-            {
-                resultKey: "rainDefense",
-                promise: rainDefensePromise,
+                resultKey: "servicePackageData",
+                promise: servicePackageInitialDataPromise,
             },
         ];
 
@@ -124,15 +122,11 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
 
-            vm.availableWipers = resultMap.wipers;
-            vm.availableRainDefense = [resultMap.rainDefense];
+            vm.$refs.servicePackageReview.initializeComponent(resultMap.servicePackageData);
         });
     },
     data() {
-        return {
-            availableWipers: null,
-            availableRainDefense: null,
-        };
+        return {};
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -175,9 +169,6 @@ export default {
         damageInfo() {
             return this.$store.getters.damage;
         },
-        availableVaps() {
-            return [...(this.availableWipers ?? []), ...(this.availableRainDefense ?? [])];
-        },
         lineItems() {
             return this.$store.getters.lineItems;
         },