Merge branch 'develop' into feature/CSR-1392
This commit is contained in:
commit
cf4a50f67f
5 changed files with 59 additions and 75 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@
|
|||
:allowItemRemoval="true"
|
||||
v-model="lineItems"
|
||||
servicePackageOptionsCmsName="ServicePackageTitle"
|
||||
@cart-remove="cartRemove"
|
||||
recyclingModalCmsWidgetName="RecycleModal" />
|
||||
|
||||
<hr class="my-5" />
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue