WIP

src/fmg-components/cart/cart.vue

@@ -11,21 +11,17 @@
                 </div>
             </div>
             <div class="price-table">
-                <div class="service-type">
+                <div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
-                    <textBlock :cmsWidgetName="packageNameWidget" />
+                    <textBlock :cmsWidgetName="packageNameWidget" /><span>{{packagePrice}}</span>
-                    <span>$300</span>
                 </div>
-                <div class="small vaps">
+                <div class="vaps">
-                    <span>Wiper blades</span><span><a href="#">Remove</a></span>
+                    <span>Wiper blades</span><span><a href="#">Remove</a></span><span v-if="!packageWithVAPS">$10</span>
                 </div>
-                <div class="small vaps">
+                <div class="vaps">
-                    <span>Rain defense</span><span><a href="#">Remove</a></span>
+                    <span>Rain defense</span><span><a href="#">Remove</a></span><span v-if="!packageWithVAPS">$10</span>
                 </div>
                 <div v-if="hasRecycleLineItem"><span>{{recycleLabel}}</span><span>{{recycleFee}}</span></div>
                 <div class="service-type"><span>Mobile service</span><span>$10</span></div>
-                <div class="align-items-center">
-                    <span>Rain Defense</span><a href="#">Remove</a><span>$10</span>
-                </div>
                 <div class="sub-total"><span>Subtotal</span><span>$320</span></div>
                 <div class="sales-tax"><span>Sales tax</span><span>$1</span></div>
                 <div class="amount-due"><span>Amount due</span><span>$321</span></div>
@@ -36,6 +32,7 @@
 
 <script>
 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 {
     getHighestFullySatisfiedTier,
@@ -56,6 +53,7 @@ export default {
         return {
             isActive: false,
             availableVaps: [],
+            packageWithVAPS: false,
         };
     },
     methods: {
@@ -66,6 +64,32 @@ export default {
             const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
             this.availableVaps = vapsFromApi;
         },
+        getPackagePriceString(packageName) {
+            const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
+            return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat;
+        },
+        getPackagePrice(packageName) {
+            let priceFloat = this.isInsuranceSelected
+                ? 0
+                : baseMixin.methods.getTierOnePackagePrice(
+                      baseMixin.methods.filterOutFees(this.nullSafeAvailableLineItems)
+                  );
+
+            priceFloat += this.getVapsPrice(packageName);
+
+            return priceFloat;
+        },
+        getVapsPrice(packageName) {
+            const vapsItems = this.getVapsLineItemsForSelectedPackage(packageName);
+
+            let price = 0;
+
+            vapsItems.forEach((item) => {
+                price += baseMixin.methods.getTotalLineItemPrice(item);
+            });
+
+            return price;
+        },
     },
     computed: {
         packageNameWidget() {
@@ -92,6 +116,9 @@ export default {
                 this.vaps
             );
         },
+        packagePrice() {
+            return "$450";
+        },
         glassToReplace() {
             return this.damage.glassToReplace;
         },
@@ -151,6 +178,9 @@ export default {
             display: flex;
             justify-content: space-between;
             padding: 0.5rem 1.5rem;
+            &:nth-child(odd) {
+                background-color: #f5f5f5;
+            }
             &:nth-last-child(-n + 3) {
                 background-color: #e3f2ea;
             }
@@ -159,13 +189,10 @@ export default {
                 color: #ffffff;
             }
         }
-        .vaps {
-            padding-left: 2.5rem;
-        }
         .package-type,
         .service-type,
         .vaps {
-            background-color: #f5f5f5;
+            //background-color: #f5f5f5;
             align-items: center;
         }
         .sub-total,
@@ -177,11 +204,18 @@ export default {
             border-top: 1px solid #0c7e47;
         }
         .service-type {
+            // background-color: #f5f5f5;
             .text-block {
                 background: transparent;
                 margin-top: 0;
                 padding: 0;
             }
+            &.packageWithVAPS {
+                ~ .vaps {
+                    background-color: #f5f5f5;
+                    padding-left: 2.5rem;
+                }
+            }
         }
     }
     .vin-toggle {

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

@@ -89,6 +89,7 @@ export default {
                 buttonAuxillaryCopy: this.getPackagePriceString(answer.Name),
                 buttonFooterCopy: this.getFooterTextFromCms(answer.SubWidgetName),
             }));
+            console.log("avialable packages is", modifiedAnswers)
             return modifiedAnswers;
         },
         isRecalibrationOnOrder() {

src/mixins/base-mixin.js

@@ -72,6 +72,7 @@ export default {
                     lineItem.partType != partTypeStrings.RAIN_DEFENSE
                 );
             });
+            console.log("step one", lineItemsToPrice);
             let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
             return totalPrice;
         },
@@ -93,7 +94,9 @@ export default {
                         lineItem.childParts
                     );
                 }
+                console.log("step two, lineItem name: ", lineItem.partNumber, " / totalPrice: ", totalPrice);
             });
+            console.log("step three", totalPrice);
             return totalPrice;
         },
         getTotalLineItemPrice(lineItem) {