diff --git a/src/constants/cart-item-types.js b/src/constants/cart-item-types.js index 7db2ac312..546a3b6e7 100644 --- a/src/constants/cart-item-types.js +++ b/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", diff --git a/src/constants/part-type-strings.js b/src/constants/part-type-strings.js index fd1f4e781..aa56d1ed2 100644 --- a/src/constants/part-type-strings.js +++ b/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", diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index 461c94a59..6d709edeb 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -3,25 +3,22 @@
+ :class="[isExpanded ? 'expanded' : '']" + @click="toggleIsExpanded()">
{{ amountDueText }}{{ currencyFormatter.format(amountDue) }}
-
+
{{ currencyFormatter.format(packagePrice) }}
-
+
{{ cartItem.name }}
- {{ cartItem.name }} + :key="i" + class="non-packaged-cart-item" + :class="[ + i % 2 == 0 ? 'even' : 'odd', + cartItem.isRemovable ? 'removable-cart-item' : '', + ]"> + {{ cartItem.name }} - {{ currencyFormatter.format(cartItem.subTotal) }} -
- - -
- {{ currencyFormatter.format(recycleFeeCartItem.subTotal) }} + {{ currencyFormatter.format(cartItem.subTotal) }}
-
- {{ mobileFeeCartItem.name }}{{ currencyFormatter.format(mobileFeeCartItem.subTotal) }} -
- -
- {{ premiumAppointmentDiscountCartItem.name }} - - {{ - currencyFormatter.format(premiumAppointmentDiscountCartItem.subTotal) - }} -
-
@@ -133,8 +106,7 @@ export default { }, data() { return { - isActive: false, - packageWithVAPS: false, + isExpanded: 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) { - this.isActive = !this.isActive; + toggleIsExpanded() { + 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; diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 8e5ad18d6..c8ef38b3e 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -27,7 +27,6 @@ :allowItemRemoval="true" v-model="lineItems" servicePackageOptionsCmsName="ServicePackageTitle" - @cart-remove="cartRemove" recyclingModalCmsWidgetName="RecycleModal" />
diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 8c85cf815..38b0daefb 100644 --- a/src/mixins/base-mixin.js +++ b/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") ); });