WIP

src/fmg-components/cart/cart.vue

@@ -14,11 +14,14 @@
                 <div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
                     <textBlock :cmsWidgetName="packageNameWidget" /><span>{{ packagePrice }}</span>
                 </div>
-                <div class="vaps" v-for="(lineItem, i) in displayedPackageLineItems" :key="i">
+                <div v-for="(lineItem, i) in displayedPackageLineItems" :key="i"
+                :class="[this.displayedPackageLineItems ? 'vaps' : '']">
                     <span>{{ lineItem.name }}</span>
                     <span><a href="#">Remove</a></span>
                 </div>
-                <div class="vaps" v-for="(lineItem, i) in displayedNonPackageLineItems" :key="i">
+                <hr style="background: red;">
+                <div v-for="(lineItem, i) in displayedNonPackageLineItems" :key="i"
+                :class="[this.displayedNonPackageLineItems ? 'vaps' : '']">
                     <span>{{ lineItem.name }}</span>
                     <span><a href="#">Remove</a></span>
                     <span>{{ lineItem.price }}</span>
@@ -56,8 +59,9 @@ export default {
         headerCmsWidgetName: String,
         servicePackageOptionsCmsName: String,
         damage: Object,
-        storeLineItems: Object,
+        orderLineItems: Object,
         availableLineItems: Object,
+        allowableCartItems: Object,
     },
     data() {
         return {
@@ -137,7 +141,6 @@ export default {
                 (entry) => entry.Name === this.packageLevel
             );
 
-            console.log("WidgetName", currentPackage);
             return currentPackage.SubWidgetName;
         },
         packageLevel() {
@@ -160,13 +163,14 @@ export default {
         displayedPackageLineItems() {
             const displayedPackageLineItems = [];
             const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel);
-
+            //TO DO Could we get the same list from this.orderLineItems?
             packageLineItems?.forEach((item) => {
                 let price = item.sellingPrice + item.kitPrice + item.laborAmount;
                 const packageLineItem = {
                     name: item.partType,
                     price: "$" + parseFloat(price).toFixed(2),
                     partType: item.partType,
+                    isRemovable: item.isRemovable,
                 };
                 displayedPackageLineItems.push(packageLineItem);
             });
@@ -175,17 +179,27 @@ export default {
         },
         displayedNonPackageLineItems() {
             const displayedNonPackageLineItems = [];
-
+            const possibleLineItems = [
-            this.availableLineItems?.forEach((item) => {
+                ...this.orderLineItems.vaps,
+                ...this.orderLineItems.supportingItems,
+                ];
+            possibleLineItems?.forEach((item) => {
                 let price = item.sellingPrice + item.kitPrice + item.laborAmount;
+                const isAllowed = this.allowableLineItems?.findIndex((lineItem) => {
+                    return lineItem.partType === item.partType;
+                });
                 const indexFound = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
                     return packageLineItem.partType === item.partType;
                 });
-                if (indexFound === -1) {
+                const isInPackage = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
+                    return packageLineItem.partType === item.partType;
+                });
+                if (isInPackage === -1 && isAllowed > -1) {
                     const nonPackageLineItem = {
                         name: item.partType,
                         price: "$" + parseFloat(price).toFixed(2),
                         partType: item.partType,
+                        isRemovable: item.isRemovable,
                     };
                     displayedNonPackageLineItems.push(nonPackageLineItem);
                 }
@@ -199,7 +213,7 @@ export default {
             return this.damage.isRepair;
         },
         vaps() {
-            return this.storeLineItems?.vaps;
+            return this.orderLineItems?.vaps;
         },
         recycleLabel() {
             return "Recycling";

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

@@ -15,9 +15,10 @@
                 <div>
                     <cart
                         :damage="damageInfo"
-                        :storeLineItems="storeLineItems"
+                        :orderLineItems="orderLineItems"
                         :availableLineItems="availableLineItems"
-                        servicePackageOptionsCmsName="ServicePackageTitle" />
+                        servicePackageOptionsCmsName="ServicePackageTitle"
+                        :allowableCartItems="ALLOWABLE_CART_ITEMS" />
 
                     <vehicleReview
                         cmsWidgetName="VehicleReviewWidget"
@@ -89,6 +90,25 @@ import { applicationConfig } from "@/constants/application-config";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
+const ALLOWABLE_CART_ITEMS = [
+    {
+        partType: "FRONT WIPER",
+        isRemovable: true,
+    },
+    {
+        partType: "REAR WIPER",
+        isRemovable: true,
+    },
+    {
+        partType: "RAIN DEFENSE",
+        isRemovable: true,
+    },
+    {
+        partType: "RECYCLE FEE",
+        isRemovable: false,
+    }
+]
+
 export default {
     name: "paymentMethod",
     async beforeRouteEnter(to, from, next) {
@@ -131,7 +151,7 @@ export default {
             ...resultMap.wipers,
             ...clonedGlassParts,
         ];
-
+        console.log("Available Line Items", availableLineItems);
         const pricingResults = await baseMixin.methods.dispatchStoreAction(
             storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
             {
@@ -257,7 +277,7 @@ export default {
         damageInfo() {
             return this.$store.getters.damage;
         },
-        storeLineItems() {
+        orderLineItems() {
             return this.$store.getters.lineItems;
         },
         serviceLocationInfo() {

src/router/index.js

@@ -33,7 +33,7 @@ import paymentMethod from "@/layouts/payment-method/payment-method";
 const routes = [
     {
         path: "/payment-method", // This is a temporary route for testing.
-        name: "payment-method",
+        name: "root",
         component: paymentMethod,
     },
     {