Revamp of non-packaged cart-items to display all of them in the loop instead of making separate cart item markup for fees etc

src/fmg-components/cart/cart.vue

@@ -18,10 +18,7 @@
                 </div>
 
                 <!-- Packaged Cart Items -->
-                <div
+                <div v-for="(cartItem, i) in packageCartItems" :key="i" class="packaged-cart-item">
-                    v-for="(cartItem, i) in packageCartItems"
-                    :key="i"
-                    :class="[this.packageCartItems ? 'vaps' : '']">
                     <span>{{ cartItem.name }}</span>
                     <textLink
                         v-if="allowItemRemoval"
@@ -33,55 +30,30 @@
                 </div>
 
                 <!-- Nonpackaged Cart Items -->
-                <hr style="background: red" />
                 <div
-                    class="premium-appt-cart-item"
                     v-for="(cartItem, i) in nonpackageCartItems"
-                    :key="i">
+                    :key="i"
-                    <span>{{ cartItem.name }}</span>
+                    class="non-packaged-cart-item"
+                    :class="[
+                        i % 2 == 0 ? 'even' : 'odd',
+                        cartItem.isRemovable ? 'removable-cart-item' : '',
+                    ]">
+                    <span v-if="cartItem != recycleFeeCartItem">{{ cartItem.name }}</span>
                     <textLink
-                        v-if="allowItemRemoval"
+                        v-if="allowItemRemoval && cartItem.isRemovable"
                         ref="removeLink"
                         linkType="text"
                         :text="removeLinkText"
                         href="#!"
                         @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
-                    <span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
-                </div>
-
-                <!-- Fees -->
-                <div v-if="recycleFeeCartItem">
                     <textLink
+                        v-else-if="cartItem == recycleFeeCartItem"
                         linkType="text"
                         :text="recycleFeeCartItem.name"
                         href="#!"
                         @click-event="openModal(recyclingModalCmsWidgetName)" />
-                    <span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
+                    <span>{{ currencyFormatter.format(cartItem.subTotal) }}</span>
                 </div>
-                <div v-if="mobileFeeCartItem">
-                    <span>{{ mobileFeeCartItem.name }}</span
-                    ><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
-                </div>
-
-                <div v-if="premiumAppointmentDiscountCartItem" class="premium-appt-cart-item">
-                    <span>{{ premiumAppointmentDiscountCartItem.name }}</span>
-                    <textLink
-                        v-if="allowItemRemoval"
-                        ref="removeLink"
-                        linkType="text"
-                        :text="removeLinkText"
-                        href="#!"
-                        @click-event="
-                            removeItem(
-                                premiumAppointmentDiscountCartItem.cartItemType,
-                                'supportingItems'
-                            )
-                        " />
-                    <span>{{
-                        currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal)
-                    }}</span>
-                </div>
-                <!-- promos here -->
 
                 <!-- Sub total, sales tax, total columns -->
                 <div class="sub-total">
@@ -336,13 +308,13 @@ export default {
             const nonpackageCartItems = [];
 
             this.cartItems.forEach((cartItem) => {
-                if (
+                // if (
-                    cartItem == this.recycleFeeCartItem ||
+                //     cartItem == this.recycleFeeCartItem ||
-                    cartItem == this.mobileFeeCartItem ||
+                //     cartItem == this.mobileFeeCartItem ||
-                    cartItem == this.premiumAppointmentDiscountCartItem
+                //     cartItem == this.premiumAppointmentDiscountCartItem
-                ) {
+                // ) {
-                    return;
+                //     return;
-                }
+                // }
 
                 if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
                     if (cartItem.isDisplayed) {
@@ -441,6 +413,7 @@ export default {
                     category: cartItemCategories.VAPS,
                     cartItemType: cartItemTypes.RAIN_DEFENSE,
                     isDisplayed: true,
+                    isRemovable: true,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -469,6 +442,7 @@ export default {
                         category: cartItemCategories.GLASS_PARTS,
                         cartItemType: cartItemTypes.GLASS_PARTS,
                         isDisplayed: false,
+                        isRemovable: false,
                         subTotal:
                             (lineItem.kitPrice ?? 0) +
                             (lineItem.laborAmount ?? 0) +
@@ -511,6 +485,7 @@ export default {
                     category: cartItemCategories.SUPPORTING_ITEMS,
                     cartItemType: cartItemTypes.RECYCLE_FEE,
                     isDisplayed: true,
+                    isRemovable: false,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -545,6 +520,7 @@ export default {
                     category: cartItemCategories.SUPPORTING_ITEMS,
                     cartItemType: cartItemTypes.MOBILE_FEE,
                     isDisplayed: true,
+                    isRemovable: false,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -579,6 +555,7 @@ export default {
                     category: cartItemCategories.SUPPORTING_ITEMS,
                     cartItemType: cartItemTypes.SUPPORTING_ITEMS,
                     isDisplayed: false,
+                    isRemovable: false,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -714,9 +691,9 @@ export default {
             display: flex;
             justify-content: space-between;
             padding: 0.5rem 1.5rem;
-            &:nth-child(odd) {
+            // &:nth-child(odd) {
-                background-color: #f5f5f5;
+            //     background-color: #f5f5f5;
-            }
+            // }
             &:nth-last-child(-n + 3) {
                 background-color: #e3f2ea;
             }
@@ -725,7 +702,12 @@ export default {
                 color: #ffffff;
             }
         }
-        .vaps {
+        .service-type {
+            background-color: #f5f5f5;
+            //padding-left: 2.5rem;
+            align-items: center;
+        }
+        .packaged-cart-item {
             background-color: #f5f5f5;
             padding-left: 2.5rem;
             align-items: center;
@@ -743,6 +725,28 @@ export default {
                 font-size: 0.875rem;
             }
         }
+        .non-packaged-cart-item {
+            &.odd {
+                background: var(--neutrals-gray-100, #f4f4f4);
+            }
+        }
+        .non-packaged-cart-item {
+            &.even {
+                background-color: var(--neutrals-white, #fff);
+            }
+        }
+        // Custom order/wrap for removable nonpackaged Cart Items
+        .removable-cart-item {
+            flex-wrap: wrap;
+            span {
+                display: flex;
+                justify-content: space-between;
+            }
+            a {
+                order: 3;
+                margin-right: 100%;
+            }
+        }
         .package-type,
         .service-type {
             //background-color: #f5f5f5;
@@ -764,18 +768,6 @@ export default {
                 padding: 0;
             }
         }
-        // Custom order/wrap for nonpackaged Cart Items
-        .premium-appt-cart-item {
-            flex-wrap: wrap;
-            span {
-                display: flex;
-                justify-content: space-between;
-            }
-            a {
-                order: 3;
-                margin-right: 100%;
-            }
-        }
     }
     .vin-toggle {
         &:after {

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

@@ -27,7 +27,6 @@
                         :allowItemRemoval="true"
                         v-model="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
-                        @cart-remove="cartRemove"
                         recyclingModalCmsWidgetName="RecycleModal" />
 
                     <hr />