WIP Order Cart.

src/fmg-components/cart/cart.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="cart">
-        <h5 class="pb-5 mb-4">Submit payment information</h5>
-        <div class="container-fluid pe-0">
+        <div class="container-fluid px-0">
             <div
                 class="row vin-toggle flex align-items-center"
                 :class="[isActive ? 'active' : '']"
@@ -12,7 +11,10 @@
                 </div>
             </div>
             <div class="price-table">
-                <div class="service-type"><span>Premium service</span><span>$300</span></div>
+                <div class="service-type">
+                    <textBlock :cmsWidgetName="packageNameWidget" />
+                    <span>$300</span>
+                </div>
                 <div class="small vaps">
                     <span>Wiper blades</span><span><a href="#">Remove</a></span>
                 </div>
@@ -34,23 +36,82 @@
 
 <script>
 import cart from "@/fmg-components/cart/cart";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import {
+    getHighestFullySatisfiedTier,
+    containsLineItemWithPartType,
+} from "@/helpers/service-package-helper";
+import reviewBlock from "@/layouts/review/review-block/review-block";
+import textBlock from "@/digital-components/text-block/text-block";
 
 export default {
     name: "modal",
+    props: {
+        headerCmsWidgetName: String,
+        servicePackageOptionsCmsName: String,
+        damage: Object,
+        lineItems: Object,
+    },
     data() {
         return {
             isActive: false,
+            availableVaps: [],
         };
     },
     methods: {
         toggleClass: function (event) {
             this.isActive = !this.isActive;
         },
+        initializeComponent(apiResponses) {
+            const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
+
+            this.availableVaps = vapsFromApi;
+        },
     },
     computed: {
-        lineItems() {
-            return this.$store.getters.lineItems;
+        packageNameWidget() {
+            const servicePackageNames = this.getCmsContent(
+                this.servicePackageOptionsCmsName,
+                "Answers"
+            );
+
+            if (!servicePackageNames) {
+                return "";
+            }
+
+            const currentPackage = servicePackageNames.find(
+                (entry) => entry.Name === this.packageLevel
+            );
+
+            return currentPackage.SubWidgetName;
         },
+        packageLevel() {
+            return getHighestFullySatisfiedTier(
+                this.glassToReplace,
+                this.availableLineItems,
+                this.isRepair,
+                this.vaps
+            );
+        },
+        glassToReplace() {
+            return this.damage.glassToReplace;
+        },
+        isRepair() {
+            return this.damage.isRepair;
+        },
+        vaps() {
+            return this.lineItems?.vaps;
+        },
+        availableLineItems() {
+            return [
+                ...(this.lineItems?.glassParts ?? []),
+                ...(this.lineItems?.supportingItems ?? []),
+                ...this.availableVaps,
+            ];
+        },
+    },
+    components: {
+        textBlock,
     },
 };
 </script>
@@ -93,6 +154,7 @@ export default {
         .service-type,
         .vaps {
             background-color: #f5f5f5;
+            align-items: center;
         }
         .sub-total,
         .sales-tax,
@@ -102,6 +164,13 @@ export default {
         .sub-total {
             border-top: 1px solid #0c7e47;
         }
+        .service-type {
+            .text-block {
+                background: transparent;
+                margin-top: 0;
+                padding: 0;
+            }
+        }
     }
     .vin-toggle {
         &:after {

src/helpers/service-package-helper.js

@@ -210,6 +210,7 @@ export function getHighestRequiredTier(glassToReplace, availableLineItems, isRep
 
 export function getHighestFullySatisfiedTier(glassToReplace, availableLineItems, isRepair, vaps) {
     const packages = getAvailablePackages(glassToReplace, availableLineItems, isRepair);
+    console.log(glassToReplace);
     let highestSatisfiedPackage = packageNames.TIER_ONE;
 
     for (let i = 0; i < packages.length; i++) {

src/layouts/payment-method/payment-method.vue

@@ -12,9 +12,12 @@
                 cmsWidgetName="FunnelSubHeaderWidget" />
 
             <div class="fade-on-route-transition sub-container make-tall">
-
                 <div>
-                    <cart/>
+                    <cart
+                        :damage="damageInfo"
+                        :lineItems="lineItems"
+                        servicePackageOptionsCmsName="ServicePackageTitle" />
+
                     <vehicleReview
                         cmsWidgetName="VehicleReviewWidget"
                         :vehicle="vehicleInfo"
@@ -30,14 +33,14 @@
 
                     <hr class="my-0" />
 
-                    <servicePackageReview
+                    <!-- <servicePackageReview
                         ref="servicePackageReview"
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
                         vapsItemsCmsName="VapsItemDescriptions"
                         :damage="damageInfo"
                         :lineItems="lineItems"
-                        @edit-clicked="editServicePackage" />
+                        @edit-clicked="editServicePackage" /> -->
 
                     <hr class="my-0" />
 
@@ -266,7 +269,7 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
-        servicePackageReview,
+        // servicePackageReview,
         serviceLocationReview,
         vehicleReview,
         damageReview,