Merge branch 'develop' into feature/CSR-1392

src/constants/cart-item-types.js

@@ -5,6 +5,7 @@ const cartItemTypes = {
     GLASS_PARTS: "GLASS PARTS",
     RAIN_DEFENSE: "RAIN DEFENSE",
     RECYCLE_FEE: "RECYCLE FEE",
+    REPLACE_FEE: "REPLACE FEE",
     MOBILE_FEE: "MOBILE FEE",
     PROMOS: "PROMOS",
     EARLY_BIRD: "EARLY BIRD",

src/constants/part-type-strings.js

@@ -3,6 +3,7 @@ const partTypeStrings = {
     REAR_WIPER: "REAR WIPER",
     RAIN_DEFENSE: "RAIN DEFENSE",
     RECALIBRATION: "RECALIBRATION",
+    REPLACE_FEE: "REPLACE FEE",
     RECYCLE_FEE: "RECYCLE FEE",
     MOBILE_FEE: "MOBILE FEE",
     REPAIR_FEE: "REPAIR FEE",

src/fmg-components/cart/cart.vue

@@ -3,25 +3,22 @@
         <div class="px-0">
             <div
                 class="row vin-toggle flex align-items-center"
-                :class="[isActive ? 'active' : '']"
+                :class="[isExpanded ? 'expanded' : '']"
-                @click="toggleClass()">
+                @click="toggleIsExpanded()">
                 <div class="col d-flex justify-content-between">
                     <span class="label">{{ amountDueText }}</span
                     ><span class="label amount-due">{{ currencyFormatter.format(amountDue) }}</span>
                 </div>
             </div>
             <div class="price-table">
-                <div class="service-type" :class="{ packageWithVAPS: packageWithVAPS }">
+                <div class="service-type">
                     <textBlock :cmsWidgetName="servicePackageTitleWidget" /><span>{{
                         currencyFormatter.format(packagePrice)
                     }}</span>
                 </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"
@@ -34,53 +31,29 @@
 
                 <!-- Nonpackaged Cart Items -->
                 <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">
@@ -133,8 +106,7 @@ export default {
     },
     data() {
         return {
-            isActive: false,
+            isExpanded: false,
-            packageWithVAPS: false,
             currencyFormatter: new Intl.NumberFormat("en-US", {
                 style: "currency",
                 currency: "USD",
@@ -146,8 +118,8 @@ export default {
         openModal(modalName) {
             this.$refs[modalName].openModal();
         },
-        toggleClass: function (event) {
+        toggleIsExpanded() {
-            this.isActive = !this.isActive;
+            this.isExpanded = !this.isExpanded;
         },
         getVapsPrice(packageName) {
             const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
@@ -260,6 +232,9 @@ export default {
                         salesTax: promoLineItem.salesTax,
                     };
 
+                    promoLineItem.cartItemType = cartItem.cartItemType;
+                    cartItem.lineItems.push(promoLineItem);
+
                     cartItems.push(cartItem);
                 });
 
@@ -345,14 +320,6 @@ export default {
             const nonpackageCartItems = [];
 
             this.cartItems.forEach((cartItem) => {
-                if (
-                    cartItem == this.recycleFeeCartItem ||
-                    cartItem == this.mobileFeeCartItem ||
-                    cartItem == this.premiumAppointmentDiscountCartItem
-                ) {
-                    return;
-                }
-
                 if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
                     if (cartItem.isDisplayed) {
                         nonpackageCartItems.push(cartItem);
@@ -450,6 +417,7 @@ export default {
                     category: cartItemCategories.VAPS,
                     cartItemType: cartItemTypes.RAIN_DEFENSE,
                     isDisplayed: true,
+                    isRemovable: true,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -478,6 +446,7 @@ export default {
                         category: cartItemCategories.GLASS_PARTS,
                         cartItemType: cartItemTypes.GLASS_PARTS,
                         isDisplayed: false,
+                        isRemovable: false,
                         subTotal:
                             (lineItem.kitPrice ?? 0) +
                             (lineItem.laborAmount ?? 0) +
@@ -511,15 +480,16 @@ export default {
             let cartItem = null;
 
             const recycleFeeLineItem = this.supportingItems.find(
-                (supportingItem) => supportingItem.partNumber == partTypeStrings.RECYCLE_FEE
+                (supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
             );
 
             if (recycleFeeLineItem) {
                 cartItem = {
                     name: this.recycleFeeCartItemName,
                     category: cartItemCategories.SUPPORTING_ITEMS,
-                    cartItemType: cartItemTypes.RECYCLE_FEE,
+                    cartItemType: cartItemTypes.REPLACE_FEE,
                     isDisplayed: true,
+                    isRemovable: false,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -554,6 +524,7 @@ export default {
                     category: cartItemCategories.SUPPORTING_ITEMS,
                     cartItemType: cartItemTypes.MOBILE_FEE,
                     isDisplayed: true,
+                    isRemovable: false,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -588,6 +559,7 @@ export default {
                     category: cartItemCategories.SUPPORTING_ITEMS,
                     cartItemType: cartItemTypes.SUPPORTING_ITEMS,
                     isDisplayed: false,
+                    isRemovable: false,
                     subTotal: 0,
                     salesTax: 0,
                     lineItems: [],
@@ -723,9 +695,6 @@ export default {
             display: flex;
             justify-content: space-between;
             padding: 0.5rem 1.5rem;
-            &:nth-child(odd) {
-                background-color: #f5f5f5;
-            }
             &:nth-last-child(-n + 3) {
                 background-color: #e3f2ea;
             }
@@ -734,7 +703,11 @@ export default {
                 color: #ffffff;
             }
         }
-        .vaps {
+        .service-type {
+            background-color: #f5f5f5;
+            align-items: center;
+        }
+        .packaged-cart-item {
             background-color: #f5f5f5;
             padding-left: 2.5rem;
             align-items: center;
@@ -752,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;
@@ -773,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 {
@@ -801,10 +784,10 @@ export default {
             margin: 1rem 0 1rem 1rem;
             cursor: pointer;
         }
-        &.active:after {
+        &.expanded:after {
             transform: rotate(180deg);
         }
-        &.active + .price-table {
+        &.expanded + .price-table {
             max-height: 650px;
             transition: all 350ms ease-in;
             overflow: hidden;

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

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

src/mixins/base-mixin.js

@@ -95,7 +95,7 @@ export default {
         filterOutFees(lineItems) {
             const filteredLineItems = lineItems.filter((item) => {
                 return (
-                    !item.partType.includes("FEE") ||
+                    (!item.partType.includes("FEE") && !item.partType.includes("EARLY BIRD")) ||
                     (item.partType === "REPAIR FEE" && item.partNumber != "SUPPLIES-REPAIR")
                 );
             });