- {{ 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")
);
});