jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revamp of non-packaged cart-items to display all of them in the loop instead of making separate cart item markup for fees etc

Browse source
This commit is contained in:
Leah Schumann 2023-11-07 11:22:51 -05:00
parent 613518a4ef
commit 794150b33d
2 changed files with 54 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
src/fmg-components/cart/cart.vue
View file

@ -18,10 +18,7 @@
</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"
@ -33,55 +30,30 @@
</div>
<!-- Nonpackaged Cart Items -->
<hr style="background: red" />
<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">
@ -336,13 +308,13 @@ export default {
const nonpackageCartItems = [];
this.cartItems.forEach((cartItem) => {
if (
cartItem == this.recycleFeeCartItem ||
cartItem == this.mobileFeeCartItem ||
cartItem == this.premiumAppointmentDiscountCartItem
) {
return;
}
// if (
// cartItem == this.recycleFeeCartItem ||
// cartItem == this.mobileFeeCartItem ||
// cartItem == this.premiumAppointmentDiscountCartItem
// ) {
// return;
// }
if (!this.packageCartItems.find((packageCartItem) => packageCartItem == cartItem)) {
if (cartItem.isDisplayed) {
@ -441,6 +413,7 @@ export default {
category: cartItemCategories.VAPS,
cartItemType: cartItemTypes.RAIN_DEFENSE,
isDisplayed: true,
isRemovable: true,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -469,6 +442,7 @@ export default {
category: cartItemCategories.GLASS_PARTS,
cartItemType: cartItemTypes.GLASS_PARTS,
isDisplayed: false,
isRemovable: false,
subTotal:
(lineItem.kitPrice ?? 0) +
(lineItem.laborAmount ?? 0) +
@ -511,6 +485,7 @@ export default {
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.RECYCLE_FEE,
isDisplayed: true,
isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -545,6 +520,7 @@ export default {
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.MOBILE_FEE,
isDisplayed: true,
isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -579,6 +555,7 @@ export default {
category: cartItemCategories.SUPPORTING_ITEMS,
cartItemType: cartItemTypes.SUPPORTING_ITEMS,
isDisplayed: false,
isRemovable: false,
subTotal: 0,
salesTax: 0,
lineItems: [],
@ -714,9 +691,9 @@ export default {
display: flex;
justify-content: space-between;
padding: 0.5rem 1.5rem;
&:nth-child(odd) {
background-color: #f5f5f5;
}
// &:nth-child(odd) {
// background-color: #f5f5f5;
// }
&:nth-last-child(-n + 3) {
background-color: #e3f2ea;
}
@ -725,7 +702,12 @@ export default {
color: #ffffff;
}
}
.vaps {
.service-type {
background-color: #f5f5f5;
//padding-left: 2.5rem;
align-items: center;
}
.packaged-cart-item {
background-color: #f5f5f5;
padding-left: 2.5rem;
align-items: center;
@ -743,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;
@ -764,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 {

1
src/layouts/payment-method/payment-method.vue
View file

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