Merge remote-tracking branch 'origin/develop' into feature/skiener/CSR-1452

src/constants/cart-item-types.js

@@ -7,6 +7,7 @@ const cartItemTypes = {
     RECYCLE_FEE: "RECYCLE FEE",
     MOBILE_FEE: "MOBILE FEE",
     PROMOS: "PROMOS",
+    EARLY_BIRD: "EARLY BIRD",
 };
 
 export { cartItemTypes };

src/constants/part-type-strings.js

@@ -5,6 +5,8 @@ const partTypeStrings = {
     RECALIBRATION: "RECALIBRATION",
     RECYCLE_FEE: "RECYCLE FEE",
     MOBILE_FEE: "MOBILE FEE",
+    REPAIR_FEE: "REPAIR FEE",
+    EARLY_BIRD: "EARLY BIRD",
 };
 
 export { partTypeStrings };

src/fmg-components/cart/cart.spec.js

@@ -268,7 +268,7 @@ describe("cart.vue", () => {
                         kitPrice: 0,
                         laborAmount: 34.98,
                         partNumber: "MOBILE FEE",
-                        partType: "REPLACE FEE",
+                        partType: "MOBILE FEE",
                         salesTax: 2.62,
                         sellingPrice: 0,
                     },

src/fmg-components/cart/cart.vue

@@ -33,7 +33,10 @@
 
                 <!-- Nonpackaged Cart Items -->
                 <hr style="background: red" />
-                <div v-for="(cartItem, i) in nonpackageCartItems" :key="i">
+                <div
+                    class="premium-appt-cart-item"
+                    v-for="(cartItem, i) in nonpackageCartItems"
+                    :key="i">
                     <span>{{ cartItem.name }}</span>
                     <textLink
                         ref="removeLink"
@@ -46,14 +49,37 @@
 
                 <!-- Fees -->
                 <div v-if="recycleFeeCartItem">
-                    <span>{{ recycleFeeCartItem.name }}</span
+                    <textLink
-                    ><span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
+                        linkType="text"
+                        :text="recycleFeeCartItem.name"
+                        href="#!"
+                        @click-event="openModal(recyclingModal)" />
+                    <span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
                 </div>
                 <div v-if="mobileFeeCartItem">
                     <span>{{ mobileFeeCartItem.name }}</span
                     ><span>{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }}</span>
                 </div>
 
+                <div v-if="premiumAppointmentDiscountCartItem">
+                    <span>{{ premiumAppointmentDiscountCartItem.name }}</span>
+                    <textLink
+                        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">
                     <span>{{ subtotalText }}</span
@@ -216,6 +242,10 @@ export default {
                     cartItems.push(cartItem);
                 });
 
+                if (this.premiumAppointmentDiscountCartItem) {
+                    cartItems.push(this.premiumAppointmentDiscountCartItem);
+                }
+
                 return cartItems;
             },
         },
@@ -294,7 +324,11 @@ export default {
             const nonpackageCartItems = [];
 
             this.cartItems.forEach((cartItem) => {
-                if (cartItem == this.recycleFeeCartItem || cartItem == this.mobileFeeCartItem) {
+                if (
+                    cartItem == this.recycleFeeCartItem ||
+                    cartItem == this.mobileFeeCartItem ||
+                    cartItem == this.premiumAppointmentDiscountCartItem
+                ) {
                     return;
                 }
 
@@ -470,8 +504,8 @@ export default {
                     lineItems: [],
                 };
 
-                //recycleFeeLineItem.cartItemType = cartItem.cartItemType;
+                recycleFeeLineItem.cartItemType = cartItem.cartItemType;
-                //cartItem.lineItems.push(recycleFeeLineItem);
+                cartItem.lineItems.push(recycleFeeLineItem);
 
                 cartItem.subTotal +=
                     (recycleFeeLineItem.kitPrice ?? 0) +
@@ -490,7 +524,7 @@ export default {
             let cartItem = null;
 
             const mobileFeeLineItem = this.supportingItems.find(
-                (lineItem) => lineItem.partNumber == partTypeStrings.MOBILE_FEE
+                (lineItem) => lineItem.partType == partTypeStrings.MOBILE_FEE
             );
 
             if (mobileFeeLineItem) {
@@ -520,10 +554,11 @@ export default {
         otherSupportingItemsCartItem() {
             let cartItem = null;
 
-            const otherSupportingItemsLineItems = this.supportingItems.filter(
+            let otherSupportingItemsLineItems = baseMixin.methods.filterOutFees(
-                (lineItem) =>
+                this.supportingItems
-                    lineItem.partNumber != partTypeStrings.MOBILE_FEE &&
+            );
-                    lineItem.partNumber != partTypeStrings.RECYCLE_FEE
+            otherSupportingItemsLineItems = otherSupportingItemsLineItems.filter(
+                (lineItem) => lineItem.partType != partTypeStrings.EARLY_BIRD
             );
 
             if (otherSupportingItemsLineItems.length > 0) {
@@ -552,6 +587,40 @@ export default {
 
             return cartItem;
         },
+        premiumAppointmentDiscountCartItemName() {
+            return "Early bird appointment"; // TODO: get from CMS
+        },
+        premiumAppointmentDiscountCartItem() {
+            let cartItem = null;
+
+            const premiumAppointmentDiscountLineItem = this.supportingItems.find(
+                (lineItem) => lineItem.partType == partTypeStrings.EARLY_BIRD
+            );
+
+            if (premiumAppointmentDiscountLineItem) {
+                cartItem = {
+                    name: this.premiumAppointmentDiscountCartItemName,
+                    category: cartItemCategories.SUPPORTING_ITEMS,
+                    cartItemType: cartItemTypes.EARLY_BIRD,
+                    isDisplayed: true,
+                    subTotal: 0,
+                    salesTax: 0,
+                    lineItems: [],
+                };
+
+                premiumAppointmentDiscountLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(premiumAppointmentDiscountLineItem);
+
+                cartItem.subTotal +=
+                    (premiumAppointmentDiscountLineItem.kitPrice ?? 0) +
+                    (premiumAppointmentDiscountLineItem.laborAmount ?? 0) +
+                    (premiumAppointmentDiscountLineItem.sellingPrice ?? 0);
+
+                cartItem.salesTax += premiumAppointmentDiscountLineItem.salesTax ?? 0;
+            }
+
+            return cartItem;
+        },
         removeLinkText() {
             return this.getCmsContent("RemoveCartItemTextWidget", "Text");
         },
@@ -643,7 +712,7 @@ export default {
             align-items: center;
             span {
                 display: flex;
-                width: 33.33333%;
+                font-size: 0.875rem;
                 &:nth-child(2) {
                     justify-content: flex-end;
                 }
@@ -673,6 +742,17 @@ 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;
+            }
+        }
     }
     .vin-toggle {
         &:after {

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

@@ -13,10 +13,7 @@
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
 
-                    <funnelSubHeader
+                    <funnelSubHeader class="mb-5 mt-4" cmsWidgetName="FunnelSubHeaderWidget" />
-                        class="mb-5 mt-4"
-                        cmsWidgetName="FunnelSubHeaderWidget"
-                        leftAlignHeader />
 
                     <p v-if="isPiaDisabled" class="fw-normal no-pia-disclaimer">
                         <span>{{ noPiaDisclaimer }}</span>
@@ -31,6 +28,8 @@
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         @cart-remove="cartRemove" />
 
+                    <hr />
+
                     <div>
                         <alert
                             ref="piaErrorAlert"

src/mixins/base-mixin.js

@@ -135,7 +135,7 @@ export default {
         getAmountDue(lineItems) {
             var amountDue = 0;
             if (lineItems.glassParts) {
-                amountDue = this.getTotalPriceOfAllLineItemsAndChildParts(
+                amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
                     lineItems.glassParts,
                     true
                 );
@@ -149,7 +149,7 @@ export default {
             if (lineItems.vaps) {
                 amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.vaps, true);
             }
-            return amountDue;
+            return ((amountDue * 100) / 100).toFixed(2);
         },
         scrollToPageTop() {
             const container = document.getElementsByClassName("page-container-grouped-styles")[0];