WIP

src/fmg-components/cart/cart.vue

@@ -6,7 +6,7 @@
                 :class="[isActive ? 'active' : '']"
                 @click="toggleClass()">
                 <div class="col d-flex justify-content-between">
-                    <span class="label">Amount Due</span
+                    <span class="label">{{ amountDueText }}</span
                     ><span class="label amount-due">{{ currencyFormatter.format(amountDue) }}</span>
                 </div>
             </div>
@@ -16,6 +16,8 @@
                         currencyFormatter.format(packagePrice)
                     }}</span>
                 </div>
+
+                <!-- Packaged Cart Items -->
                 <div
                     v-for="(cartItem, i) in packageCartItems"
                     :key="i"
@@ -28,6 +30,8 @@
                         href="#!"
                         @click-event="removeItem(cartItem)" />
                 </div>
+
+                <!-- Nonpackaged Cart Items -->
                 <hr style="background: red" />
                 <div v-for="(cartItem, i) in nonpackageCartItems" :key="i">
                     <span>{{ cartItem.name }}</span>
@@ -39,20 +43,31 @@
                         @click-event="removeItem(cartItem)" />
                     <span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
                 </div>
-                <div v-if="hasRecycleLineItem">
+
-                    <span>{{ recycleLabel }}</span
+                <!-- Fees -->
-                    ><span>{{ recycleFee }}</span>
+                <div v-if="recycleFeeCartItem">
+                    <span>{{ recycleFeeCartItem.name }}</span
+                    ><span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
                 </div>
+                <div v-if="mobileFeeCartItem">
+                    <span>{{ mobileFeeCartItem.name }}</span
+                    ><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
+                </div>
+
                 <!-- Sub total, sales tax, total columns -->
                 <div class="sub-total">
-                    <span>Subtotal</span><span>{{ currencyFormatter.format(subTotal) }}</span>
+                    <span>{{ subtotalText }}</span
+                    ><span>{{ currencyFormatter.format(subTotal) }}</span>
                 </div>
                 <div class="sales-tax">
-                    <span>Sales tax</span><span>{{ currencyFormatter.format(salesTax) }}</span>
+                    <span>{{ salesTaxText }}</span
+                    ><span>{{ currencyFormatter.format(salesTax) }}</span>
                 </div>
                 <div class="amount-due">
-                    <span>Amount due</span><span>{{ currencyFormatter.format(amountDue) }}</span>
+                    <span>{{ amountDueText }}</span
+                    ><span>{{ currencyFormatter.format(amountDue) }}</span>
                 </div>
+
             </div>
         </div>
     </div>
@@ -62,14 +77,13 @@
 import baseMixin from "@/mixins/base-mixin.js";
 import {
     getHighestFullySatisfiedTier,
-    containsLineItemWithPartType,
     getPackageContents,
-    findLineItemsWithPartType,
 } from "@/helpers/service-package-helper";
+
 import textLink from "@/ux-components/text-link/text-link";
 import textBlock from "@/digital-components/text-block/text-block";
 import { LineItemUtilities } from "@/store";
-
+import { deepClone } from "@/helpers/object-helper";
 
 export default {
     name: "modal",
@@ -87,6 +101,7 @@ export default {
                 style: "currency",
                 currency: "USD",
             }),
+            lineItems: deepClone(this.modelValue),
             lineItemUtilities: new LineItemUtilities(),
         };
     },
@@ -106,7 +121,12 @@ export default {
             return subTotal;
         },
         removeItem(cartItem) {
-            this.lineItems[cartItem.category] = this.lineItems[cartItem.category].filter(lineItem => lineItem.partType != cartItem.cartItemType);
+            cartItem.lineItemIds.forEach((lineItemIdToDelete) => {
+                console.log(lineItemIdToDelete)
+                this.lineItems[cartItem.category] = this.lineItems[cartItem.category].filter(lineItem => lineItem.id != lineItemIdToDelete);
+            });
+
+            this.$emit("update:modelValue", this.lineItems);
         },
         getVapsCartItemsForSelectedPackage(packageName) {
             const packageContentTypes = getPackageContents(
@@ -123,37 +143,24 @@ export default {
                     if (vapType == cartItem.cartItemType) {
                         vapsCartItemsForSelectedPackage.push(cartItem);
                     }
-                })
+                });
-            })
+            });
 
             return vapsCartItemsForSelectedPackage;
         },
         getCmsContentForVapsType(vapsType) {
-            const vapsItemDescriptions = this.getCmsContent(
+            const vapsItemDescriptions = this.getCmsContent("VapsItemDescriptions", "Answers");
-                "VapsItemDescriptions",
-                "Answers"
-            );
 
             if (!vapsItemDescriptions) {
                 return "";
             }
 
-            const vapsTypeName = vapsItemDescriptions.find(
+            const vapsTypeName = vapsItemDescriptions.find((entry) => entry.Name === vapsType);
-                (entry) => entry.Name === vapsType
-            );
 
             return vapsTypeName.Text;
-        }
+        },
     },
     computed: {
-        lineItems: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
-            },
-        },
         cartItems: {
             get: function () {
                 let cartItems = [];
@@ -178,9 +185,18 @@ export default {
                     cartItems.push(this.supportingItemsCartItem);
                 }
 
+                if (this.recycleFeeCartItem) {
+                    cartItems.push(this.recycleFeeCartItem);
+                }
+
+                if (this.mobileFeeCartItem) {
+                    cartItems.push(this.mobileFeeCartItem);
+                }
+
                 return cartItems;
             },
-            set: function (newValue) {},
+            set: function (newValue) {
+            },
         },
         servicePackageTitleWidget() {
             const servicePackageNames = this.getCmsContent(
@@ -223,6 +239,34 @@ export default {
             const vaps = this.lineItems?.vaps;
             return vaps?.length > 0 ? vaps : [];
         },
+        // Cart Items
+        packageCartItems() {
+            if (this.packageLevel == "TierThree") {
+                return this.cartItems.filter((cartItem) => cartItem.category == "vaps");
+            } else if (this.packageLevel == "TierTwo") {
+                return this.cartItems.filter(
+                    (cartItem) =>
+                        cartItem.cartItemType == "FRONT WIPER" ||
+                        cartItem.cartItemType == "REAR WIPER"
+                );
+            }
+
+            return [];
+        },
+        nonpackageCartItems() {
+            const nonpackageCartItems = [];
+            if (this.rainDefenseCartItem && this.packageLevel == "TierOne") {
+                nonpackageCartItems.push(this.rainDefenseCartItem);
+            }
+
+
+
+            // if (this.packageLevel == "TierOne" && this.rainDefenseCartItem) {
+            //     return this.cartItems.filter((cartItem) => cartItem.cartItemType == "RAIN DEFENSE");
+            // }
+
+            return nonpackageCartItems;
+        },
         frontWipersCartItem() {
             let cartItem = null;
 
@@ -237,11 +281,11 @@ export default {
                     cartItemType: "FRONT WIPER",
                     subTotal: 0,
                     salesTax: 0,
-                    lineItems: [],
+                    lineItemIds: [],
                 };
 
                 frontWiperLineItems.forEach((lineItem) => {
-                    cartItem.lineItems.push(lineItem);
+                    cartItem.lineItemIds.push(lineItem.id);
 
                     cartItem.subTotal +=
                         (lineItem.kitPrice ?? 0) +
@@ -288,11 +332,11 @@ export default {
         rainDefenseCartItem() {
             let cartItem = null;
 
-            const rainDefenseLineItems = this.vaps.filter(
+            const rainDefenseLineItem = this.vaps.find(
                 (vapsLineItem) => vapsLineItem.partType == "RAIN DEFENSE"
             );
 
-            if (rainDefenseLineItems.length > 0) {
+            if (rainDefenseLineItem) {
                 cartItem = {
                     name: this.getCmsContentForVapsType("RAIN DEFENSE"), // TODO: Get from CMS
                     category: "vaps",
@@ -302,16 +346,14 @@ export default {
                     lineItems: [],
                 };
 
-                rainDefenseLineItems.forEach((lineItem) => {
+                cartItem.lineItems.push(rainDefenseLineItem);
-                    cartItem.lineItems.push(lineItem);
 
-                    cartItem.subTotal += 
+                cartItem.subTotal +=
-                        (lineItem.kitPrice ?? 0) +
+                    (rainDefenseLineItem.kitPrice ?? 0) +
-                        (lineItem.laborAmount ?? 0) +
+                    (rainDefenseLineItem.laborAmount ?? 0) +
-                        (lineItem.sellingPrice ?? 0);
+                    (rainDefenseLineItem.sellingPrice ?? 0);
 
-                    cartItem.salesTax += lineItem.salesTax ?? 0; 
+                cartItem.salesTax += rainDefenseLineItem.salesTax ?? 0;
-                });
             }
 
             return cartItem;
@@ -319,8 +361,10 @@ export default {
         glassPartsCartItem() {
             let cartItem = null;
 
-            const flattenedGlassPartsLineItems = this.lineItemUtilities.getFlattenedArrayOfLineItemsWithChildParts(
+            const flattenedGlassPartsLineItems =
-                this.lineItems.glassParts);
+                this.lineItemUtilities.getFlattenedArrayOfLineItemsWithChildParts(
+                    this.lineItems.glassParts
+                );
 
             if (flattenedGlassPartsLineItems.length > 0) {
                 cartItem = {
@@ -373,21 +417,63 @@ export default {
 
             return cartItem;
         },
-        packageCartItems() {
+        recycleFeeCartItem() {
-            if (this.packageLevel == "TierThree") {
+            let cartItem = null;
-                return this.cartItems.filter(cartItem => cartItem.category == "vaps");
+
-            } else if (this.packageLevel == "TierTwo") {
+            const recycleFeeLineItem = this.supportingItems.find(
-                return this.cartItems.filter(cartItem => cartItem.cartItemType == "FRONT WIPER" || cartItem.cartItemType == "REAR WIPER");
+                (lineItem) => lineItem.partNumber.includes("RECYCLE FEE")
+            );
+
+            if (recycleFeeLineItem) {
+                cartItem = {
+                    name: this.getCmsContent("RecycleFeeTextWidget", "Text"), // TODO: Get from CMS
+                    category: "supportingItems",
+                    cartItemType: "SUPPORTING ITEMS",
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                cartItem.lineItems.push(recycleFeeLineItem);
+
+                cartItem.subTotal +=
+                    (recycleFeeLineItem.kitPrice ?? 0) +
+                    (recycleFeeLineItem.laborAmount ?? 0) +
+                    (recycleFeeLineItem.sellingPrice ?? 0);
+
+                cartItem.salesTax += recycleFeeLineItem.salesTax ?? 0;
             }
 
-            return [];
+            return cartItem;
         },
-        nonpackageCartItems() {
+        mobileFeeCartItem() {
-            if (this.packageLevel == "TierOne" && this.rainDefenseCartItem) {
+            let cartItem = null;
-                return this.cartItems.filter(cartItem => cartItem.cartItemType == "RAIN DEFENSE");
+
+            const mobileFeeLineItem = this.supportingItems.find(
+                (lineItem) => lineItem.partNumber.includes("MOBILE FEE")
+            );
+
+            if (mobileFeeLineItem) {
+                cartItem = {
+                    name: this.getCmsContent("MobileServiceTextWidget", "Text"), // TODO: Get from CMS
+                    category: "supportingItems",
+                    cartItemType: "SUPPORTING ITEMS",
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                cartItem.lineItems.push(mobileFeeLineItem);
+
+                cartItem.subTotal +=
+                    (mobileFeeLineItem.kitPrice ?? 0) +
+                    (mobileFeeLineItem.laborAmount ?? 0) +
+                    (mobileFeeLineItem.sellingPrice ?? 0);
+
+                cartItem.salesTax += mobileFeeLineItem.salesTax ?? 0;
             }
 
-            return [];
+            return cartItem;
         },
         glassToReplace() {
             if (!this.damage) {
@@ -408,22 +494,22 @@ export default {
             return supportingItems?.length > 0 ? supportingItems : [];
         },
         removeLinkText() {
-            return "Remove"; // TODO: get from CMS
+            return this.getCmsContent("RemoveCartItemTextWidget", "Text");
         },
-        recycleLabel() {
+        recycleFeeText() {
-            return "Recycling";
+            return this.getCmsContent("RecycleFeeTextWidget", "Text");
+        },
+        salesTaxText() {
+            return this.getCmsContent("SalesTaxTextWidget", "Text");
         },
         recycleFee() {
             return "$35.00";
         },
-        hasRecycleLineItem() {
+        amountDueText() {
-            //TO DO
+            return this.getCmsContent("AmountDueTextWidget", "Text");
-            // if (this.lineItems.supportingItems[0].partNumber === "RECYCLE FEE") {
+        },
-            //     return true;
+        subtotalText() {
-            // } else {
+            return this.getCmsContent("SubtotalTextWidget", "Text");
-            //     return false;
-            // }
-            return true;
         },
         subTotal() {
             let subTotal = 0;
@@ -437,7 +523,6 @@ export default {
         salesTax() {
             let salesTax = 0;
             this.cartItems.forEach((cartItem) => {
-                console.log(cartItem.salesTax)
                 salesTax += cartItem.salesTax ?? 0;
             });
 
@@ -447,6 +532,14 @@ export default {
             return this.subTotal + this.salesTax;
         },
     },
+    watch: {
+        modelValue: {
+            handler(newValue) {
+                console.log(newValue)
+                this.lineItems = deepClone(newValue);
+            }
+        }
+    },
     components: {
         textBlock,
         textLink,

src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-modal-buttons.vue

@@ -156,6 +156,13 @@ export default {
             return answers;
         },
     },
+    watch: {
+        modelValue: {
+            handler(newValue) {
+                console.log(newValue)
+            }
+        }
+    },
     components: {
         buttonQuestion,
         contentGroupModal,

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

@@ -138,7 +138,7 @@ export default {
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
-        console.log(resultMap.cmsContent)
+
         const glassParts = store.getters.order.lineItems.glassParts ?? [];
 
         const availableLineItems = [
@@ -149,7 +149,8 @@ export default {
         ];
 
         const lineItems = store.getters.order.lineItems;
-        const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
+        
+        await baseMixin.methods.dispatchStoreActionWithLogging(
             storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
             {
                 availableLineItems: availableLineItems,
@@ -176,6 +177,7 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.availableLineItems = taxingResults;
+            console.log(lineItems)
             vm.lineItems = deepClone(lineItems);
         });
     },
@@ -356,7 +358,11 @@ export default {
         customCtaCopy(newValue) {
             this.$refs.navbar.updateButtonText(newValue);
         },
-     },
+        // modelValue(newValue) {
+        //     this.lineItems = newValue;
+        //     console.log(newValue)
+        // }
+    },
     components: {
         funnelHeader,
         navbar,