From 9a8bdb48bcd6d0236fd275aca368f9205747c4f3 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Thu, 28 Mar 2024 15:08:25 -0400
Subject: [PATCH] Making remove buttons work

---
 .../cart-dropdown/cart-dropdown.vue           | 153 ++++++++++++------
 1 file changed, 104 insertions(+), 49 deletions(-)

diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index a41683e5..6d094651 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="[isExpanded ? 'pb-5' : 'pb-4']">
+    <div>
         <div
             id="cart-dropdown-head"
             class="row cart-toggle flex align-items-center pt-4"
@@ -55,8 +55,7 @@
                         class="ps-4">
                         <div
                             v-for="(item, i) in servicePackageCartItems"
-                            :key="i"
-                            class="packaged-cart-item">
+                            :key="i">
                             <div class="py-1 d-flex justify-content-between align-items-center">
                                 <span>{{ item?.name ?? '' }}</span>
                                 <textLink
@@ -65,7 +64,7 @@
                                     linkType="text"
                                     text="Remove"
                                     href="javascript:void(0)"
-                                    @clickEvent="removeItem">
+                                    @clickEvent="removeItem(item.partType, true)">
                                     <template #after-text>
                                         <span class="sr-only">{{ item?.name ?? '' }}</span>
                                     </template>
@@ -76,41 +75,45 @@
                 </div>
 
                 <!-- Nonpackaged Cart Items -->
-                <!-- This will be a loop when this is implemented -->
-                <div class="non-packaged-cart-item">
+                <div
+                    id="non-packaged-cart-items"
+                    class="">
                     <div
-                        v-if="mobileFeeCartItem"
-                        id="mobile-fee"
-                        class="cart-item">
-                        <div
-                            id="mobile-fee-item"
-                            class="d-flex justify-content-between align-items-center">
-                            <span id="mobile-fee-label">{{ mobileFeeCartItem?.name ?? '' }}</span>
-                            <span id="mobile-fee-value">{{ getDisplayed(mobileFeeCartItem.subTotal) }}</span>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if="recycleFeeCartItem"
-                        id="recycle-fee"
-                        class="cart-item cart-gray">
-                        <div
-                            id="recycle-fee-item"
-                            class="d-flex justify-content-between align-items-center">
-                            <span id="recycle-fee-label">
-                                 <textLink
-                                    linkType="text"
-                                    :text="recycleFeeCartItem?.name ?? ''"
-                                    href="javascript:void(0)"
-                                    @clickEvent="openModal(recyclingModalCmsWidgetName)" />
+                        v-for="(item, i) in nonServicePackageCartItems"
+                        :key="i"
+                        class="px-5 py-1 non-packaged-cart-item"
+                        :class="i % 2 == 0 ? 'even' : ''">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span
+                                v-if="item.isRecycle"
+                                id="recycle-fee-label">
+                                <textLink
+                                   linkType="text"
+                                   :text="item?.name ?? ''"
+                                   href="javascript:void(0)"
+                                   @clickEvent="openModal(recyclingModalCmsWidgetName)" />
                             </span>
-                            <span id="recycle-fee-value">{{ getDisplayed(recycleFeeCartItem.subTotal) }}</span>
+                            <span v-else>{{ item?.name ?? '' }}</span>
+                            <span>{{ getDisplayed(item?.subTotal ?? 0, false) }}</span>
+                        </div>
+                        <div class="px-5">
+                            <textLink
+                                v-if="item.isRemovable && (!readOnly || !showAsPaid)"
+                                ref="removeLink"
+                                linkType="text"
+                                text="Remove"
+                                href="javascript:void(0)"
+                                @clickEvent="removeItem(item.partType, item.isVap)">
+                                <template #after-text>
+                                    <span class="sr-only">{{ item?.name ?? '' }}</span>
+                                </template>
+                            </textLink>
                         </div>
                     </div>
                 </div>
                 <div
                     id="cart-footer"
-                    class="cart-footer">
+                    class="cart-footer pb-5">
                     <div
                         id="cart-subtotal-and-tax"
                         class="subtotal-and-tax">
@@ -187,7 +190,7 @@ export default {
                 ...(otherParts ?? [])
             ],
             deductible: currentDeductible,
-            isExpanded: false,
+            isExpanded: true, // false,
             widget: {
                 amountDue: 'AmountDueTextWidget',
                 deductible: 'DeductibleWidget',
@@ -216,7 +219,11 @@ export default {
             const basePrice = this.showDeductibleLineItem
                 ? this.deductible
                 : this.baseServicePrice;
-            return basePrice + this.packagePrice;
+            const nonPackageCartItemsPrice = this.nonServicePackageCartItems.reduce(
+                (accumulator, cartItem) => accumulator + cartItem.subTotal,
+                0
+            );
+            return basePrice + nonPackageCartItemsPrice + this.packagePrice;
         },
         salesTax() {
             return 0; // TODO
@@ -242,25 +249,50 @@ export default {
                 this.vapsInOrder
             );
         },
-        servicePackageCartItems() {
-            const packageContentTypes = getPackageContents(
+        partTypesInServicePackage() {
+            return getPackageContents(
                 this.glassToReplace,
                 this.availableLineItems,
                 this.isRepair,
                 this.servicePackageTier
             ) ?? [];
+        },
+        servicePackageCartItems() {
             const items = [];
-            if (packageContentTypes.includes(partTypeStrings.FRONT_WIPER) ?? this.frontWipersCartItem) {
+            if (this.partTypesInServicePackage.includes(partTypeStrings.FRONT_WIPER) ?? this.frontWipersCartItem) {
                 items.push(this.frontWipersCartItem);
             }
-            if (packageContentTypes.includes(partTypeStrings.REAR_WIPER) ?? this.rearWipersCartItem) {
+            if (this.partTypesInServicePackage.includes(partTypeStrings.REAR_WIPER) ?? this.rearWipersCartItem) {
                 items.push(this.rearWipersCartItem);
             }
-            if (packageContentTypes.includes(partTypeStrings.RAIN_DEFENSE) ?? this.rainDefenseCartItem) {
+            if (this.partTypesInServicePackage.includes(partTypeStrings.RAIN_DEFENSE) ?? this.rainDefenseCartItem) {
                 items.push(this.rainDefenseCartItem);
             }
             return items;
         },
+        nonServicePackageCartItems() {
+            const vapsLineItemsNotInPackage = this.vapsInOrder.filter((vap) => !this.partTypesInServicePackage.includes(vap.partType));
+            const vapsCartItemsNotInPackage = vapsLineItemsNotInPackage.map((lineItem) => {
+                switch (lineItem.partType) {
+                    case partTypeStrings.FRONT_WIPER:
+                        return this.frontWipersCartItem;
+                    case partTypeStrings.REAR_WIPER:
+                        return this.rearWipersCartItem;
+                    case partTypeStrings.RAIN_DEFENSE:
+                        return this.rainDefenseCartItem;
+                    default:
+                        return null;
+                }
+            });
+            const items = vapsCartItemsNotInPackage.filter((item) => item != null);
+            if (this.recycleFeeCartItem) {
+                items.push(this.recycleFeeCartItem);
+            }
+            if (this.mobileFeeCartItem) {
+                items.push(this.mobileFeeCartItem);
+            }
+            return items;
+        },
         frontWipersCartItem() {
             return this.getCartItemForVapsPart(partTypeStrings.FRONT_WIPER);
         },
@@ -271,7 +303,8 @@ export default {
             return this.getCartItemForVapsPart(partTypeStrings.RAIN_DEFENSE);
         },
         packagePrice() {
-            return getPriceOfLineItems(this.vapsInOrder);
+            const vapsInPackage = this.vapsInOrder.filter((vap) => this.partTypesInServicePackage.includes(vap.partType));
+            return getPriceOfLineItems(vapsInPackage);
         },
         amountDueLabel() {
             return this.getCmsContent(this.widget.amountDue, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
@@ -310,7 +343,11 @@ export default {
             return recycleFeeLineItem
                 ? this.getCartItem(
                     this.getCmsContent(this.widget.recycleFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
-                    [recycleFeeLineItem]
+                    [recycleFeeLineItem],
+                    false,
+                    partTypeStrings.REPLACE_FEE, // TODO this is because of the awkwardness
+                    false,
+                    true
                 )
                 : null;
         },
@@ -319,7 +356,11 @@ export default {
             return mobileFeeLineItem
                 ? this.getCartItem(
                     this.getCmsContent(this.widget.mobileFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
-                    [mobileFeeLineItem]
+                    [mobileFeeLineItem],
+                    false,
+                    partTypeStrings.MOBILE_FEE,
+                    false,
+                    false
                 )
                 : null;
         }
@@ -331,22 +372,26 @@ export default {
         toggleIsExpanded() {
             this.isExpanded = !this.isExpanded;
         },
-        getDisplayed(amount) {
-            return this.isUnverified && this.showDeductibleLineItem
+        getDisplayed(amount, canBeVerifyingCoverage = true) {
+            return canBeVerifyingCoverage && this.isUnverified && this.showDeductibleLineItem
                 ? VERIFYING_COVERAGE
                 : formatAmountInDollars(amount);
         },
-        getCartItem(label, lineItems) {
+        getCartItem(label, lineItems, isRemovable, partType, isVap, isRecycle) {
             let cartItem = null;
 
             if (lineItems && lineItems.length > 0) {
                 cartItem = {
                     name: label,
+                    partType,
                     subTotal: getPriceOfLineItems(lineItems),
                     salesTax: lineItems.reduce(
                         (accumulator, lineItem) => accumulator + lineItem.salesTax,
                         0
-                    )
+                    ),
+                    isRemovable,
+                    isVap,
+                    isRecycle
                 };
             }
 
@@ -356,10 +401,14 @@ export default {
             const label = this.getCmsContentForVapsType(partType);
             const lineItems = this.vapsInOrder
                 ?.filter((vapsLineItem) => vapsLineItem.partType === partType);
-            return this.getCartItem(label, lineItems);
+            return this.getCartItem(label, lineItems, true, partType, true, false);
         },
-        removeItem() {
-            // TODO in later ticket
+        removeItem(partType, isVap) {
+            if (isVap) {
+                this.vapsInOrder = this.vapsInOrder.filter((vap) => vap.partType !== partType);
+                useMainStore().updateVaps(this.vapsInOrder);
+            }
+            // NOTE Currently only vaps can be removed
         },
         getCmsContentForVapsType(vapsType) {
             const vapsItemDescriptions = this.getCmsContent(
@@ -416,6 +465,12 @@ export default {
         text-underline-offset: auto !important;
     }
 
+    .non-packaged-cart-item {
+        &.even {
+            background-color: $gray-100;
+        }
+    }
+
     .cart-item {
         padding: 0.25rem 1.5rem;
     }