From acc533e42c2d22637362fd78b8a14eaca127def1 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 30 Oct 2023 07:15:56 -0400
Subject: [PATCH] Fixing the commits to the wrong branch

---
 ...-categories.js => cart-item-categories.js} |   4 +-
 src/constants/part-type-strings.js            |   2 +
 src/fmg-components/cart/cart.vue              | 227 +++++++++++-------
 src/layouts/payment-method/payment-method.vue |   4 +-
 4 files changed, 142 insertions(+), 95 deletions(-)
 rename src/constants/{cart-categories.js => cart-item-categories.js} (65%)

diff --git a/src/constants/cart-categories.js b/src/constants/cart-item-categories.js
similarity index 65%
rename from src/constants/cart-categories.js
rename to src/constants/cart-item-categories.js
index ed2f5a81a..509cc626b 100644
--- a/src/constants/cart-categories.js
+++ b/src/constants/cart-item-categories.js
@@ -1,8 +1,8 @@
-const cartCategories = {
+const cartItemCategories = {
     VAPS: "vaps",
     GLASS_PARTS: "glassParts",
     SUPPORTING_ITEMS: "supportingItems",
     PROMOS: "promos",
 };
 
-export { cartCategories };
+export { cartItemCategories };
diff --git a/src/constants/part-type-strings.js b/src/constants/part-type-strings.js
index 2dfab2071..50d92832c 100644
--- a/src/constants/part-type-strings.js
+++ b/src/constants/part-type-strings.js
@@ -3,6 +3,8 @@ const partTypeStrings = {
     REAR_WIPER: "REAR WIPER",
     RAIN_DEFENSE: "RAIN DEFENSE",
     RECALIBRATION: "RECALIBRATION",
+    RECYCLE_FEE: "RECYCLE FEE",
+    MOBILE_FEE: "MOBILE FEE",
 };
 
 export { partTypeStrings };
diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index 5a2ea7a70..c48f48582 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="cart">
-        <div class="container-fluid px-0">
+        <div class="px-0">
             <div
                 class="row vin-toggle flex align-items-center"
                 :class="[isActive ? 'active' : '']"
@@ -28,7 +28,7 @@
                         linkType="text"
                         :text="removeLinkText"
                         href="#!"
-                        @click-event="removeItem(cartItem)" />
+                        @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
                 </div>
 
                 <!-- Nonpackaged Cart Items -->
@@ -40,7 +40,7 @@
                         linkType="text"
                         :text="removeLinkText"
                         href="#!"
-                        @click-event="removeItem(cartItem)" />
+                        @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
                     <span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
                 </div>
 
@@ -79,7 +79,10 @@ import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/serv
 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";
+import { partTypeStrings } from "@/constants/part-type-strings";
+import { cartItemCategories } from "@/constants/cart-item-categories";
+import { cartItemTypes } from "@/constants/cart-item-types";
 
 export default {
     name: "cart",
@@ -97,6 +100,7 @@ export default {
                 style: "currency",
                 currency: "USD",
             }),
+            lineItems: deepClone(this.modelValue),
             lineItemUtilities: new LineItemUtilities(),
         };
     },
@@ -115,15 +119,6 @@ export default {
 
             return subTotal;
         },
-        removeItem(cartItem) {
-            cartItem.lineItemIds.forEach((lineItemIdToDelete) => {
-                this.lineItems[cartItem.category] = this.lineItems[cartItem.category].filter(
-                    (lineItem) => lineItem.partType != cartItem.cartItemType
-                );
-            });
-
-            this.$emit("update:modelValue", this.lineItems);
-        },
         getVapsCartItemsForSelectedPackage(packageName) {
             const packageContentTypes = getPackageContents(
                 this.glassToReplace,
@@ -134,6 +129,8 @@ export default {
 
             let vapsCartItemsForSelectedPackage = [];
 
+            console.log(this.cartItems);
+            console.log(packageContentTypes);
             this.cartItems.forEach((cartItem) => {
                 packageContentTypes.forEach((vapType) => {
                     if (vapType == cartItem.cartItemType) {
@@ -155,11 +152,22 @@ export default {
 
             return vapsTypeName.Text;
         },
+        removeItem(cartItemType, category) {
+            console.log(
+                this.lineItems[category].filter(
+                    (lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
+                )
+            );
+            this.lineItems[category] = this.lineItems[category].filter(
+                (lineItemsToKeep) => lineItemsToKeep.cartItemType != cartItemType
+            );
+
+            //console.log(`lineItemToDelete: ${lineItemIdToDelete}`)
+
+            this.$emit("update:modelValue", this.lineItems);
+        },
     },
     computed: {
-        lineItems() {
-            return this.modelValue;
-        },
         cartItems: {
             get: function () {
                 let cartItems = [];
@@ -194,7 +202,6 @@ export default {
 
                 return cartItems;
             },
-            set: function (newValue) {},
         },
         servicePackageTitleWidget() {
             const servicePackageNames = this.getCmsContent(
@@ -233,51 +240,75 @@ export default {
 
             return packagePrice;
         },
+        isRepair() {
+            if (!this.damage) {
+                return;
+            }
+
+            return this.damage.isRepair;
+        },
+        glassToReplace() {
+            if (!this.damage) {
+                return;
+            }
+
+            return this.damage.glassToReplace;
+        },
         vaps() {
             const vaps = this.lineItems?.vaps;
             return vaps?.length > 0 ? vaps : [];
         },
+        supportingItems() {
+            const supportingItems = this.lineItems?.supportingItems;
+            return supportingItems?.length > 0 ? supportingItems : [];
+        },
         // 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 [];
+            return this.getVapsCartItemsForSelectedPackage(this.packageLevel);
         },
         nonpackageCartItems() {
             const nonpackageCartItems = [];
-            if (this.rainDefenseCartItem && this.packageLevel == "TierOne") {
-                nonpackageCartItems.push(this.rainDefenseCartItem);
-            }
+
+            console.log("packageCartItems");
+
+            this.cartItems.forEach((cartItem) => {
+                if (cartItem == this.recycleFeeCartItem || cartItem == this.mobileFeeCartItem) {
+                    return;
+                }
+
+                if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
+                    if (cartItem.isDisplayed) {
+                        nonpackageCartItems.push(cartItem);
+                    }
+                }
+            });
 
             return nonpackageCartItems;
         },
+        frontWiperCartItemName() {
+            return this.getCmsContentForVapsType(partTypeStrings.FRONT_WIPER);
+        },
         frontWipersCartItem() {
             let cartItem = null;
 
             const frontWiperLineItems = this.vaps.filter(
-                (vapsLineItem) => vapsLineItem.partType == "FRONT WIPER"
+                (vapsLineItem) => vapsLineItem.partType == partTypeStrings.FRONT_WIPER
             );
 
             if (frontWiperLineItems.length > 0) {
                 cartItem = {
-                    name: this.getCmsContentForVapsType("FRONT WIPER"), //"Front Wipers", // TODO: Get from CMS
-                    category: "vaps-front-wiper",
-                    cartItemType: "FRONT WIPER",
+                    name: this.frontWiperCartItemName,
+                    category: cartItemCategories.VAPS,
+                    cartItemType: cartItemTypes.FRONT_WIPER,
+                    isDisplayed: true,
                     subTotal: 0,
                     salesTax: 0,
-                    lineItemIds: [],
+                    lineItems: [],
                 };
 
                 frontWiperLineItems.forEach((lineItem) => {
-                    cartItem.lineItemIds.push(lineItem.id);
+                    lineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(lineItem);
 
                     cartItem.subTotal +=
                         (lineItem.kitPrice ?? 0) +
@@ -290,25 +321,30 @@ export default {
 
             return cartItem;
         },
+        rearWiperCartItemName() {
+            return this.getCmsContentForVapsType(partTypeStrings.REAR_WIPER);
+        },
         rearWipersCartItem() {
             let cartItem = null;
 
             const rearWiperLineItems = this.vaps.filter(
-                (vapsLineItem) => vapsLineItem.partType == "REAR WIPER"
+                (vapsLineItem) => vapsLineItem.partType == partTypeStrings.REAR_WIPER
             );
 
             if (rearWiperLineItems.length > 0) {
                 cartItem = {
-                    name: this.getCmsContentForVapsType("REAR WIPER"), // TODO: Get from CMS
-                    category: "vaps-rear-wiper",
-                    cartItemType: "REAR WIPER",
+                    name: this.rearWiperCartItemName,
+                    category: cartItemCategories.VAPS,
+                    cartItemType: cartItemTypes.REAR_WIPER,
+                    isDisplayed: true,
                     subTotal: 0,
                     salesTax: 0,
-                    lineItemIds: [],
+                    lineItems: [],
                 };
 
                 rearWiperLineItems.forEach((lineItem) => {
-                    cartItem.lineItemIds.push(lineItem.id);
+                    lineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(lineItem);
 
                     cartItem.subTotal +=
                         (lineItem.kitPrice ?? 0) +
@@ -321,24 +357,29 @@ export default {
 
             return cartItem;
         },
+        rainDefenseCartItemName() {
+            return this.getCmsContentForVapsType(partTypeStrings.RAIN_DEFENSE);
+        },
         rainDefenseCartItem() {
             let cartItem = null;
 
             const rainDefenseLineItem = this.vaps.find(
-                (vapsLineItem) => vapsLineItem.partType == "RAIN DEFENSE"
+                (vapsLineItem) => vapsLineItem.partType == partTypeStrings.RAIN_DEFENSE
             );
 
             if (rainDefenseLineItem) {
                 cartItem = {
-                    name: this.getCmsContentForVapsType("RAIN DEFENSE"), // TODO: Get from CMS
-                    category: "vaps",
-                    cartItemType: "RAIN DEFENSE",
+                    name: this.getCmsContentForVapsType(partTypeStrings.RAIN_DEFENSE),
+                    category: cartItemCategories.VAPS,
+                    cartItemType: cartItemTypes.RAIN_DEFENSE,
+                    isDisplayed: true,
                     subTotal: 0,
                     salesTax: 0,
-                    lineItemIds: [],
+                    lineItems: [],
                 };
 
-                cartItem.lineItemIds.push(rainDefenseLineItem.id);
+                rainDefenseLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(rainDefenseLineItem);
 
                 cartItem.subTotal +=
                     (rainDefenseLineItem.kitPrice ?? 0) +
@@ -360,16 +401,18 @@ export default {
 
             if (flattenedGlassPartsLineItems.length > 0) {
                 cartItem = {
-                    name: "Glass Parts", // TODO: Get from CMS
-                    category: "glassParts",
-                    cartItemType: "GLASS PARTS",
+                    name: null,
+                    category: cartItemCategories.GLASS_PARTS,
+                    cartItemType: cartItemTypes.GLASS_PARTS,
+                    isDisplayed: false,
                     subTotal: 0,
                     salesTax: 0,
-                    lineItemIds: [],
+                    lineItems: [],
                 };
 
                 flattenedGlassPartsLineItems.forEach((lineItem) => {
-                    cartItem.lineItemIds.push(lineItem.id);
+                    lineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(lineItem);
 
                     cartItem.subTotal +=
                         (lineItem.kitPrice ?? 0) +
@@ -387,16 +430,18 @@ export default {
 
             if (this.supportingItems.length > 0) {
                 cartItem = {
-                    name: "Supporting Items", // TODO: Get from CMS
-                    category: "supportingItems",
-                    cartItemType: "SUPPORTING ITEMS",
+                    name: null,
+                    category: cartItemCategories.SUPPORTING_ITEMS,
+                    cartItemType: cartItemTypes.SUPPORTING_ITEMS,
+                    isDisplayed: false,
                     subTotal: 0,
                     salesTax: 0,
-                    lineItemIds: [],
+                    lineItems: [],
                 };
 
                 this.supportingItems.forEach((lineItem) => {
-                    cartItem.lineItemIds.push(lineItem.id);
+                    lineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(lineItem);
 
                     cartItem.subTotal +=
                         (lineItem.kitPrice ?? 0) +
@@ -409,24 +454,29 @@ export default {
 
             return cartItem;
         },
+        recycleFeeCartItemName() {
+            return this.getCmsContent("RecycleFeeTextWidget", "Text");
+        },
         recycleFeeCartItem() {
             let cartItem = null;
 
-            const recycleFeeLineItem = this.supportingItems.find((lineItem) =>
-                lineItem.partNumber.includes("RECYCLE FEE")
+            const recycleFeeLineItem = this.supportingItems.find(
+                (supportingItem) => supportingItem.partNumber == partTypeStrings.RECYCLE_FEE
             );
 
             if (recycleFeeLineItem) {
                 cartItem = {
-                    name: this.getCmsContent("RecycleFeeTextWidget", "Text"), // TODO: Get from CMS
-                    category: "supportingItems",
-                    cartItemType: "SUPPORTING ITEMS",
+                    name: this.recycleFeeCartItemName,
+                    category: cartItemCategories.SUPPORTING_ITEMS,
+                    cartItemType: cartItemTypes.RECYCLE_FEE,
+                    isDisplayed: true,
                     subTotal: 0,
                     salesTax: 0,
-                    lineItemIds: [],
+                    lineItems: [],
                 };
 
-                cartItem.lineItemIds.push(recycleFeeLineItem.id);
+                recycleFeeLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(recycleFeeLineItem);
 
                 cartItem.subTotal +=
                     (recycleFeeLineItem.kitPrice ?? 0) +
@@ -438,24 +488,29 @@ export default {
 
             return cartItem;
         },
+        mobileFeeCartItemName() {
+            return this.getCmsContent("MobileServiceTextWidget", "Text");
+        },
         mobileFeeCartItem() {
             let cartItem = null;
 
-            const mobileFeeLineItem = this.supportingItems.find((lineItem) =>
-                lineItem.partNumber.includes("MOBILE FEE")
+            const mobileFeeLineItem = this.supportingItems.find(
+                (lineItem) => lineItem.partNumber == partTypeStrings.MOBILE_FEE
             );
 
             if (mobileFeeLineItem) {
                 cartItem = {
-                    name: this.getCmsContent("MobileServiceTextWidget", "Text"), // TODO: Get from CMS
-                    category: "supportingItems",
-                    cartItemType: "SUPPORTING ITEMS",
+                    name: this.mobileFeeCartItemName,
+                    category: cartItemCategories.SUPPORTING_ITEMS,
+                    cartItemType: cartItemTypes.MOBILE_FEE,
+                    isDisplayed: true,
                     subTotal: 0,
                     salesTax: 0,
-                    lineItemIds: [],
+                    lineItems: [],
                 };
 
-                cartItem.lineItemIds.push(mobileFeeLineItem.id);
+                mobileFeeLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(mobileFeeLineItem);
 
                 cartItem.subTotal +=
                     (mobileFeeLineItem.kitPrice ?? 0) +
@@ -467,24 +522,6 @@ export default {
 
             return cartItem;
         },
-        glassToReplace() {
-            if (!this.damage) {
-                return;
-            }
-
-            return this.damage.glassToReplace;
-        },
-        isRepair() {
-            if (!this.damage) {
-                return;
-            }
-
-            return this.damage.isRepair;
-        },
-        supportingItems() {
-            const supportingItems = this.lineItems?.supportingItems;
-            return supportingItems?.length > 0 ? supportingItems : [];
-        },
         removeLinkText() {
             return this.getCmsContent("RemoveCartItemTextWidget", "Text");
         },
@@ -521,6 +558,14 @@ export default {
             return this.subTotal + this.salesTax;
         },
     },
+    watch: {
+        modelValue: {
+            handler(newValue) {
+                this.lineItems = deepClone(newValue);
+            },
+            deep: true,
+        },
+    },
     components: {
         textBlock,
         textLink,
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 9b9a74784..65e9c9f32 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -27,7 +27,7 @@
                     <cart
                         :damage="damageInfo"
                         :availableLineItems="availableLineItems"
-                        v-model="cartLineItems"
+                        v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         @cart-remove="cartRemove" />
 
@@ -42,7 +42,7 @@
                     </div>
 
                     <add-vaps-modal-buttons
-                        v-model="cartLineItems"
+                        v-model="lineItems"
                         :availableLineItems="availableLineItems"
                         vapsTilesCmsName="VapsProductTiles" />