WIP - Cart Styling

src/fmg-components/cart/cart.vue

@@ -46,13 +46,30 @@
 
                 <!-- Fees -->
                 <div v-if="recycleFeeCartItem">
-                    <span>{{ recycleFeeCartItem.name }}</span
-                    ><span>{{ currencyFormatter.format(recycleFeeCartItem.subTotal) }}</span>
+                    <textLink
+                        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(PREMIUM_FEE_PART_TYPE, 'supportingItems')" />
+                    <span>{{ currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal) }}</span>
+                    
+                </div>
+                <!-- promos here -->
 
                 <!-- Sub total, sales tax, total columns -->
                 <div class="sub-total">
@@ -86,6 +103,7 @@ import { getHighestFullySatisfiedTier, getPackageContents } from "@/helpers/serv
 
 // Constants
 import { partTypeStrings } from "@/constants/part-type-strings";
+import { PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
 import { cartItemCategories } from "@/constants/cart-item-categories";
 import { cartItemTypes } from "@/constants/cart-item-types";
 
@@ -216,6 +234,10 @@ export default {
                     cartItems.push(cartItem);
                 });
 
+                if (this.premiumAppointmentDiscountCartItem) {
+                    cartItems.push(this.premiumAppointmentDiscountCartItem);
+                }
+
                 return cartItems;
             },
         },
@@ -294,7 +316,7 @@ 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 +492,8 @@ export default {
                     lineItems: [],
                 };
 
-                //recycleFeeLineItem.cartItemType = cartItem.cartItemType;
-                //cartItem.lineItems.push(recycleFeeLineItem);
+                recycleFeeLineItem.cartItemType = cartItem.cartItemType;
+                cartItem.lineItems.push(recycleFeeLineItem);
 
                 cartItem.subTotal +=
                     (recycleFeeLineItem.kitPrice ?? 0) +
@@ -552,6 +574,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.partNumber == PREMIUM_FEE_PART_TYPE
+            );
+
+            if (premiumAppointmentDiscountLineItem) {
+                cartItem = {
+                    name: this.premiumAppointmentDiscountCartItemName,
+                    category: cartItemCategories.SUPPORTING_ITEMS,
+                    cartItemType: PREMIUM_FEE_PART_TYPE,
+                    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");
         },
@@ -625,7 +681,7 @@ export default {
         div {
             display: flex;
             justify-content: space-between;
-            padding: 0.5rem 1.5rem;
+            padding: 0.5rem 1.5rem;   
             &:nth-child(odd) {
                 background-color: #f5f5f5;
             }
@@ -643,7 +699,7 @@ export default {
             align-items: center;
             span {
                 display: flex;
-                width: 33.33333%;
+                font-size: 0.875rem;
                 &:nth-child(2) {
                     justify-content: flex-end;
                 }

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

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