Merge branch 'develop' into feature/CSR-1392

This commit is contained in:
CarlNation 2023-11-09 08:52:07 -05:00
commit cf4a50f67f
5 changed files with 59 additions and 75 deletions

View file

@ -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",

View file

@ -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",

View file

@ -3,25 +3,22 @@
<div class="px-0">
<div
class="row vin-toggle flex align-items-center"
:class="[isActive ? 'active' : '']"
@click="toggleClass()">
:class="[isExpanded ? 'expanded' : '']"
@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
v-for="(cartItem, i) in packageCartItems"
:key="i"
:class="[this.packageCartItems ? 'vaps' : '']">
<div v-for="(cartItem, i) in packageCartItems" :key="i" class="packaged-cart-item">
<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">
<span>{{ cartItem.name }}</span>
:key="i"
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,
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;

View file

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

View file

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