WIP

src/fmg-components/cart/cart.vue

@@ -13,6 +13,7 @@
             <div class="price-table">
                 <div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
                     <textBlock :cmsWidgetName="packageNameWidget" /><span>{{packagePrice}}</span>
+                    {{listOfVaps}}
                 </div>
                 <div class="vaps">
                     <span>Wiper blades</span><span><a href="#">Remove</a></span><span v-if="!packageWithVAPS">$10</span>
@@ -34,9 +35,12 @@
 import cart from "@/fmg-components/cart/cart";
 import baseMixin from "@/mixins/base-mixin.js";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import { packageNames } from "@/constants/package-names";
 import {
     getHighestFullySatisfiedTier,
     containsLineItemWithPartType,
+    getPackageContents,
+    findLineItemsWithPartType,
 } from "@/helpers/service-package-helper";
 import reviewBlock from "@/layouts/review/review-block/review-block";
 import textBlock from "@/digital-components/text-block/text-block";
@@ -54,6 +58,7 @@ export default {
             isActive: false,
             availableVaps: [],
             packageWithVAPS: false,
+            // packageLevel: "",
         };
     },
     methods: {
@@ -90,6 +95,24 @@ export default {
 
             return price;
         },
+        getVapsLineItemsForSelectedPackage(packageName) {
+            const packageContentTypes = getPackageContents(
+                this.glassToReplace,
+                this.nullSafeAvailableLineItems,
+                this.isRepair,
+                packageName
+            );
+
+            let vapsLineItemsForSelectedPackage = [];
+
+            packageContentTypes.forEach((vapType) => {
+                vapsLineItemsForSelectedPackage.push(
+                    ...findLineItemsWithPartType(vapType, this.nullSafeAvailableLineItems)
+                );
+            });
+
+            return vapsLineItemsForSelectedPackage;
+        },
     },
     computed: {
         packageNameWidget() {
@@ -109,15 +132,27 @@ export default {
             return currentPackage.SubWidgetName;
         },
         packageLevel() {
-            return getHighestFullySatisfiedTier(
+            const tier = getHighestFullySatisfiedTier(
                 this.glassToReplace,
                 this.availableLineItems,
                 this.isRepair,
                 this.vaps
             );
+            return tier;
         },
         packagePrice() {
-            return "$450";
+            let packagePriceString;
+            if (this.packageLevel.length > 0) {
+                packagePriceString = this.getPackagePriceString(this.packageLevel);
+            }
+            return packagePriceString;
+            // return (packagePriceString.length > 0) ? packagePriceString : "Test String";
+        },
+        listOfVaps() {
+            console.log("VAPS:", this.vaps);
+            const vaps = this.getVapsLineItemsForSelectedPackage(packageNames.TIER_ONE);
+            console.log("VAPS 2", vaps);
+            return vaps;
         },
         glassToReplace() {
             return this.damage.glassToReplace;
@@ -147,7 +182,10 @@ export default {
             } else {
                 return false;
             }
-        }
+        },
+        nullSafeAvailableLineItems() {
+            return this.availableLineItems ?? [];
+        },
     },
     components: {
         textBlock,

src/helpers/service-package-helper.js

@@ -223,6 +223,7 @@ export function getHighestFullySatisfiedTier(glassToReplace, availableLineItems,
             highestSatisfiedPackage = packages[i].packageName;
         }
     }
+    console.log(highestSatisfiedPackage);
 
     return highestSatisfiedPackage;
 }