WIP

src/fmg-components/cart/cart.vue

@@ -12,35 +12,32 @@
             </div>
             <div class="price-table">
                 <div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
-                    <textBlock :cmsWidgetName="packageNameWidget" /><span>{{
+                    <textBlock :cmsWidgetName="servicePackageTitleWidget" /><span>{{
                         currencyFormatter.format(packagePrice)
                     }}</span>
                 </div>
                 <div
-                    v-for="(lineItem, i) in cartItems"
+                    v-for="(cartItem, i) in packageCartItems"
                     :key="i"
-                    :class="[this.displayedPackageLineItems ? 'vaps' : '']">
+                    :class="[this.packageCartItems ? 'vaps' : '']">
-                    <span>{{ lineItem.name }}</span>
+                    <span>{{ cartItem.name }}</span>
                     <textLink
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
                         href="#!"
-                        @click-event="removeItem(lineItem)" />
+                        @click-event="removeItem(cartItem)" />
                 </div>
                 <hr style="background: red" />
-                <div
+                <div v-for="(cartItem, i) in nonpackageCartItems" :key="i">
-                    v-for="(lineItem, i) in displayedNonPackageLineItems"
+                    <span>{{ cartItem.name }}</span>
-                    :key="i"
-                    :class="[this.displayedNonPackageLineItems ? 'vaps' : '']">
-                    <span>{{ lineItem.name }}</span>
                     <textLink
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
                         href="#!"
-                        @click-event="removeItem(lineItem)" />
+                        @click-event="removeItem(cartItem)" />
-                    <span>{{ lineItem.price }}</span>
+                    <span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
                 </div>
                 <div v-if="hasRecycleLineItem">
                     <span>{{ recycleLabel }}</span
@@ -73,6 +70,7 @@ import textLink from "@/ux-components/text-link/text-link";
 import textBlock from "@/digital-components/text-block/text-block";
 import { LineItemUtilities } from "@/store";
 
+
 export default {
     name: "modal",
     props: {
@@ -80,7 +78,6 @@ export default {
         damage: Object,
         servicePackageOptionsCmsName: String,
         availableLineItems: Object,
-        lineItems: Object,
     },
     data() {
         return {
@@ -90,7 +87,7 @@ export default {
                 style: "currency",
                 currency: "USD",
             }),
-            lineItemUtilities: new LineItemUtilities(),
+            lineItemUtilities: new LineItemUtilities(),    
         };
     },
     methods: {
@@ -98,23 +95,20 @@ export default {
             this.isActive = !this.isActive;
         },
         getVapsPrice(packageName) {
-            const vapsItems = this.getVapsLineItemsForSelectedPackage(packageName);
+            const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
 
-            let price = 0;
+            let subTotal = 0;
 
             vapsItems.forEach((item) => {
-                price += baseMixin.methods.getTotalLineItemPrice(item);
+                subTotal += item.subTotal; //    baseMixin.methods.getTotalLineItemPrice(item);
             });
 
-            return price;
+            return subTotal;
         },
-        getAmountDue() {
+        removeItem(cartItem) {
-            return baseMixin.methods.getDisplayAmountDue(this.storeLineItems);
+            this.lineItems[cartItem.category] = this.lineItems[cartItem.category].filter(lineItem => lineItem.partType != cartItem.cartItemType);
         },
-        removeItem(item) {
+        getVapsCartItemsForSelectedPackage(packageName) {
-            this.$emit("cart-remove", item);
-        },
-        getVapsLineItemsForSelectedPackage(packageName) {
             const packageContentTypes = getPackageContents(
                 this.glassToReplace,
                 this.availableLineItems,
@@ -122,19 +116,73 @@ export default {
                 packageName
             );
 
-            let vapsLineItemsForSelectedPackage = [];
+            let vapsCartItemsForSelectedPackage = [];
 
-            packageContentTypes.forEach((vapType) => {
+            this.cartItems.forEach((cartItem) => {
-                vapsLineItemsForSelectedPackage.push(
+                packageContentTypes.forEach((vapType) => {
-                    ...findLineItemsWithPartType(vapType, this.availableLineItems)
+                    if (vapType == cartItem.cartItemType) {
-                );
+                        vapsCartItemsForSelectedPackage.push(cartItem);
-            });
+                    }
+                })
+            })
 
-            return vapsLineItemsForSelectedPackage;
+            return vapsCartItemsForSelectedPackage;
         },
+        getCmsContentForVapsType(vapsType) {
+            const vapsItemDescriptions = this.getCmsContent(
+                "VapsItemDescriptions",
+                "Answers"
+            );
+
+            if (!vapsItemDescriptions) {
+                return "";
+            }
+
+            const vapsTypeName = vapsItemDescriptions.find(
+                (entry) => entry.Name === vapsType
+            );
+
+            return vapsTypeName.Text;
+        }
     },
     computed: {
-        packageNameWidget() {
+        lineItems: {
+            get: function () {
+                return this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        cartItems: {
+            get: function () {
+                let cartItems = [];
+
+                if (this.frontWipersCartItem) {
+                    cartItems.push(this.frontWipersCartItem);
+                }
+
+                if (this.rearWipersCartItem) {
+                    cartItems.push(this.rearWipersCartItem);
+                }
+
+                if (this.rainDefenseCartItem) {
+                    cartItems.push(this.rainDefenseCartItem);
+                }
+
+                if (this.glassPartsCartItem) {
+                    cartItems.push(this.glassPartsCartItem);
+                }
+
+                if (this.supportingItemsCartItem) {
+                    cartItems.push(this.supportingItemsCartItem);
+                }
+
+                return cartItems;
+            },
+            set: function (newValue) {},
+        },
+        servicePackageTitleWidget() {
             const servicePackageNames = this.getCmsContent(
                 this.servicePackageOptionsCmsName,
                 "Answers"
@@ -171,35 +219,36 @@ export default {
 
             return packagePrice;
         },
-        allLineItems() {
+        vaps() {
-            return this.lineItemUtilities.getArrayOfAllLineItems(this.lineItems);
+            const vaps = this.lineItems?.vaps;
-        },
+            return vaps?.length > 0 ? vaps : [];
-        flattenedLineItems() {
-            return this.lineItemUtilities.getFlattenedArrayOfLineItemsWithChildParts(
-                this.allLineItems
-            );
         },
         frontWipersCartItem() {
             let cartItem = null;
-            let frontWipers = this.vaps.filter(
+
+            const frontWiperLineItems = this.vaps.filter(
                 (vapsLineItem) => vapsLineItem.partType == "FRONT WIPER"
             );
-            if (frontWipers.length > 0) {
+
+            if (frontWiperLineItems.length > 0) {
                 cartItem = {
-                    name: "Front Wipers", // TODO: Get from CMS
+                    name: this.getCmsContentForVapsType("FRONT WIPER"), //"Front Wipers", // TODO: Get from CMS
-                    partNumber: "Multiple",
+                    category: "vaps",
-                    partType: "Multiple", // TODO: Get from CMS
+                    cartItemType: "FRONT WIPER",
-                    laborAmount: 0,
+                    subTotal: 0,
-                    sellingPrice: 0,
-                    kitPrice: 0,
                     salesTax: 0,
+                    lineItems: [],
                 };
 
-                frontWipers.forEach((lineItem) => {
+                frontWiperLineItems.forEach((lineItem) => {
-                    cartItem.kitPrice += lineItem.kitPrice ?? 0;
+                    cartItem.lineItems.push(lineItem);
-                    cartItem.laborAmount += lineItem.laborAmount ?? 0;
+
-                    cartItem.sellingPrice += lineItem.sellingPrice ?? 0;
+                    cartItem.subTotal += 
-                    cartItem.salesTax += lineItem.salesTax ?? 0;
+                        (lineItem.kitPrice ?? 0) +
+                        (lineItem.laborAmount ?? 0) +
+                        (lineItem.sellingPrice ?? 0);
+
+                    cartItem.salesTax += lineItem.salesTax ?? 0; 
                 });
             }
 
@@ -208,124 +257,152 @@ export default {
         rearWipersCartItem() {
             let cartItem = null;
 
-            let rearWipers = this.vaps.filter(
+            const rearWiperLineItems = this.vaps.filter(
                 (vapsLineItem) => vapsLineItem.partType == "REAR WIPER"
             );
-            if (rearWipers.length > 0) {
+
+            if (rearWiperLineItems.length > 0) {
                 cartItem = {
-                    name: "Rear Wipers", // TODO: Get from CMS
+                    name: this.getCmsContentForVapsType("REAR WIPER"), // TODO: Get from CMS
-                    partNumber: "Multiple",
+                    category: "vaps",
-                    partType: "Multiple", // TODO: Get from CMS
+                    cartItemType: "REAR WIPER",
-                    laborAmount: 0,
+                    subTotal: 0,
-                    sellingPrice: 0,
-                    kitPrice: 0,
                     salesTax: 0,
+                    lineItems: [],
                 };
 
-                rearWipers.forEach((lineItem) => {
+                rearWiperLineItems.forEach((lineItem) => {
-                    cartItem.kitPrice += lineItem.kitPrice ?? 0;
+                    cartItem.lineItems.push(lineItem);
-                    cartItem.laborAmount += lineItem.laborAmount ?? 0;
+
-                    cartItem.sellingPrice += lineItem.sellingPrice ?? 0;
+                    cartItem.subTotal += 
-                    cartItem.salesTax += lineItem.salesTax ?? 0;
+                        (lineItem.kitPrice ?? 0) +
+                        (lineItem.laborAmount ?? 0) +
+                        (lineItem.sellingPrice ?? 0);
+
+                    cartItem.salesTax += lineItem.salesTax ?? 0; 
                 });
             }
 
             return cartItem;
         },
-        cartItems: {
+        rainDefenseCartItem() {
-            get: function () {
+            let cartItem = null;
-                const cartItems = [];
 
-                if (this.frontWipersCartItem) {
+            const rainDefenseLineItems = this.vaps.filter(
-                    cartItems.push(this.frontWipersCartItem);
+                (vapsLineItem) => vapsLineItem.partType == "RAIN DEFENSE"
-                }
+            );
 
-                if (this.rearWipersCartItem) {
+            if (rainDefenseLineItems.length > 0) {
-                    cartItems.push(this.rearWipersCartItem);
+                cartItem = {
-                }
+                    name: this.getCmsContentForVapsType("RAIN DEFENSE"), // TODO: Get from CMS
+                    category: "vaps",
+                    cartItemType: "RAIN DEFENSE",
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
 
-                const otherVapsLineItems = this.vaps.filter(
+                rainDefenseLineItems.forEach((lineItem) => {
-                    (vapsLineItem) =>
+                    cartItem.lineItems.push(lineItem);
-                        vapsLineItem.partType != "FRONT WIPER" &&
+
-                        vapsLineItem.partType != "REAR WIPER"
+                    cartItem.subTotal += 
-                );
+                        (lineItem.kitPrice ?? 0) +
-                otherVapsLineItems.forEach((lineItem) => {
+                        (lineItem.laborAmount ?? 0) +
-                    const cartItem = lineItem;
+                        (lineItem.sellingPrice ?? 0);
-                    cartItems.push(cartItem);
+
+                    cartItem.salesTax += lineItem.salesTax ?? 0; 
                 });
+            }
 
-                console.log(this.lineItems);
+            return cartItem;
-                console.log(this.lineItems.glassParts);
-
-                const glassPartsLineItems =
-                    this.lineItemUtilities.getFlattenedArrayOfLineItemsWithChildParts(
-                        this.lineItems.glassParts
-                    );
-
-                console.log(this.glassPartsLineItems);
-                glassPartsLineItems.forEach((lineItem) => {
-                    const cartItem = lineItem;
-                    cartItems.push(cartItem);
-                });
-
-                console.log(cartItems);
-                
-                return cartItems;
-            },
-            set: function (newValue) {},
         },
-        packageLineItems() {
+        glassPartsCartItem() {
-            const packageLineItems = [];
+            let cartItem = null;
-            return packageLineItems;
+
+            const flattenedGlassPartsLineItems = this.lineItemUtilities.getFlattenedArrayOfLineItemsWithChildParts(
+                this.lineItems.glassParts);
+
+            if (flattenedGlassPartsLineItems.length > 0) {
+                cartItem = {
+                    name: "Glass Parts", // TODO: Get from CMS
+                    category: "glassParts",
+                    cartItemType: "GLASS PARTS",
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                flattenedGlassPartsLineItems.forEach((lineItem) => {
+                    cartItem.lineItems.push(lineItem);
+
+                    cartItem.subTotal += 
+                        (lineItem.kitPrice ?? 0) +
+                        (lineItem.laborAmount ?? 0) +
+                        (lineItem.sellingPrice ?? 0);
+
+                    cartItem.salesTax += lineItem.salesTax ?? 0; 
+                });
+            }
+
+            return cartItem;
         },
-        displayedNonPackageLineItems() {
+        supportingItemsCartItem() {
-            const displayedNonPackageLineItems = [];
+            let cartItem = null;
-            const possibleLineItems = [...this.vaps, ...this.supportingItems];
-            possibleLineItems?.forEach((item) => {
-                let price = item.sellingPrice + item.kitPrice + item.laborAmount;
 
-                const isAllowed = this.allowableLineItems?.findIndex((lineItem) => {
+            if (this.supportingItems.length > 0) {
-                    return lineItem.partType === item.partType;
+                cartItem = {
+                    name: "Supporting Items", // TODO: Get from CMS
+                    category: "supportingItems",
+                    cartItemType: "SUPPORTING ITEMS",
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                this.supportingItems.forEach((lineItem) => {
+                    cartItem.lineItems.push(lineItem);
+
+                    cartItem.subTotal += 
+                        (lineItem.kitPrice ?? 0) +
+                        (lineItem.laborAmount ?? 0) +
+                        (lineItem.sellingPrice ?? 0);
+
+                    cartItem.salesTax += lineItem.salesTax ?? 0; 
                 });
+            }
 
-                const indexFound = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
+            return cartItem;
-                    return packageLineItem.partType === item.partType;
+        },
-                });
+        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");
+            }
 
-                const isInPackage = this.displayedPackageLineItems?.findIndex((packageLineItem) => {
+            return [];
-                    return packageLineItem.partType === item.partType;
+        },
-                });
+        nonpackageCartItems() {
+            if (this.packageLevel == "TierOne" && this.rainDefenseCartItem) {
+                return this.cartItems.filter(cartItem => cartItem.cartItemType == "RAIN DEFENSE");
+            }
 
-                if (isInPackage === -1 && isAllowed > -1) {
+            return [];
-                    const nonPackageLineItem = {
-                        name: item.partType,
-                        price: "$" + parseFloat(price).toFixed(2),
-                        partType: item.partType,
-                        isRemovable: item.isRemovable,
-                    };
-
-                    displayedNonPackageLineItems.push(nonPackageLineItem);
-                }
-            });
-
-            return displayedNonPackageLineItems;
         },
         glassToReplace() {
             if (!this.damage) {
                 return;
             }
+
             return this.damage.glassToReplace;
         },
         isRepair() {
             if (!this.damage) {
                 return;
             }
+
             return this.damage.isRepair;
         },
-        vaps() {
-            const vaps = this.lineItems?.vaps;
-            return vaps?.length > 0 ? vaps : [];
-        },
         supportingItems() {
             const supportingItems = this.lineItems?.supportingItems;
             return supportingItems?.length > 0 ? supportingItems : [];
@@ -351,19 +428,17 @@ export default {
         subTotal() {
             let subTotal = 0;
 
-            this.cartItems.forEach((lineItem) => {
+            this.cartItems.forEach((cartItem) => {
-                subTotal +=
+                subTotal += cartItem.subTotal;
-                    (lineItem.kitPrice ?? 0) +
-                    (lineItem.laborAmount ?? 0) +
-                    (lineItem.sellingPrice ?? 0);
             });
 
             return subTotal;
         },
         salesTax() {
             let salesTax = 0;
-            this.cartItems.forEach((lineItem) => {
+            this.cartItems.forEach((cartItem) => {
-                salesTax += lineItem.salesTax ?? 0;
+                console.log(cartItem.salesTax)
+                salesTax += cartItem.salesTax ?? 0;
             });
 
             return salesTax;

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

@@ -27,7 +27,7 @@
                     <cart
                         :damage="damageInfo"
                         :availableLineItems="availableLineItems"
-                        :lineItems="lineItems"
+                        v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         @cart-remove="cartRemove" />
 
@@ -90,6 +90,7 @@ import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+import { deepClone } from "@/helpers/object-helper";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
@@ -137,7 +138,7 @@ export default {
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
-
+        console.log(resultMap.cmsContent)
         const glassParts = store.getters.order.lineItems.glassParts ?? [];
 
         const availableLineItems = [
@@ -147,6 +148,7 @@ export default {
             ...glassParts,
         ];
 
+        const lineItems = store.getters.order.lineItems;
         const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
             storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
             {
@@ -164,7 +166,7 @@ export default {
                 appointmentType: store.getters.order.serviceLocation.appointmentType,
                 serviceLocationState: store.getters.order.serviceLocation.state,
                 serviceLocationZipCode: store.getters.order.serviceLocation.zipCode,
-                pricedAvailableLineItems: pricingResults,
+                pricedAvailableLineItems: availableLineItems,
             },
             "payment-method",
             false
@@ -174,13 +176,12 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.availableLineItems = taxingResults;
-            vm.lineItems = store.getters.order.lineItems;
+            vm.lineItems = deepClone(lineItems);
         });
     },
     data() {
         return {
             lineItems: [],
-            taxedLineItems: [], // temporary, for use by cart.vue
             availableLineItems: [],
             paymentMethodInternalModel: this.getPaymentMethodFromStore(),
             displayPiaAlert: this.getPiaAlert(),
@@ -258,18 +259,6 @@ export default {
                 return paymentMethods.LATER;
             }
         },
-        cartRemove(item) {
-            const matchedIndices = [];
-            this.cartItems.forEach((cartItem, i) => {
-                if (cartItem.partType === item.partType) {
-                    // console.log("adding this to matchedIndices: ", i);
-                    matchedIndices.push(i);
-                }
-            });
-            this.cartItems = this.cartItems.filter((cartItem, index) => {
-                return cartItem.partType !== item.partType;
-            });
-        },
         backButtonAction() {
             this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
@@ -367,7 +356,7 @@ export default {
         customCtaCopy(newValue) {
             this.$refs.navbar.updateButtonText(newValue);
         },
-    },
+     },
     components: {
         funnelHeader,
         navbar,

src/store/index.js

@@ -2598,7 +2598,7 @@ function getFlattenedArrayOfLineItemsWithChildParts(lineItems) {
             ];
         }
     });
-    console.log(flattenedArray);
+
     return flattenedArray;
 }