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

Making remove buttons work

Browse source
This commit is contained in:
Michaela Brydon 2024-03-28 15:08:25 -04:00
parent 8f8b255694
commit 9a8bdb48bc
1 changed files with 104 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
src/iss-components/cart-dropdown/cart-dropdown.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="[isExpanded ? 'pb-5' : 'pb-4']">
<div>
<div
id="cart-dropdown-head"
class="row cart-toggle flex align-items-center pt-4"
@ -55,8 +55,7 @@
class="ps-4">
<div
v-for="(item, i) in servicePackageCartItems"
:key="i"
class="packaged-cart-item">
:key="i">
<div class="py-1 d-flex justify-content-between align-items-center">
<span>{{ item?.name ?? '' }}</span>
<textLink
@ -65,7 +64,7 @@
linkType="text"
text="Remove"
href="javascript:void(0)"
@clickEvent="removeItem">
@clickEvent="removeItem(item.partType, true)">
<template #after-text>
<span class="sr-only">{{ item?.name ?? '' }}</span>
</template>
@ -76,41 +75,45 @@
</div>
<!-- Nonpackaged Cart Items -->
<!-- This will be a loop when this is implemented -->
<div class="non-packaged-cart-item">
<div
id="non-packaged-cart-items"
class="">
<div
v-if="mobileFeeCartItem"
id="mobile-fee"
class="cart-item">
<div
id="mobile-fee-item"
class="d-flex justify-content-between align-items-center">
<span id="mobile-fee-label">{{ mobileFeeCartItem?.name ?? '' }}</span>
<span id="mobile-fee-value">{{ getDisplayed(mobileFeeCartItem.subTotal) }}</span>
</div>
</div>
<div
v-if="recycleFeeCartItem"
id="recycle-fee"
class="cart-item cart-gray">
<div
id="recycle-fee-item"
class="d-flex justify-content-between align-items-center">
<span id="recycle-fee-label">
<textLink
linkType="text"
:text="recycleFeeCartItem?.name ?? ''"
href="javascript:void(0)"
@clickEvent="openModal(recyclingModalCmsWidgetName)" />
v-for="(item, i) in nonServicePackageCartItems"
:key="i"
class="px-5 py-1 non-packaged-cart-item"
:class="i % 2 == 0 ? 'even' : ''">
<div class="d-flex justify-content-between align-items-center">
<span
v-if="item.isRecycle"
id="recycle-fee-label">
<textLink
linkType="text"
:text="item?.name ?? ''"
href="javascript:void(0)"
@clickEvent="openModal(recyclingModalCmsWidgetName)" />
</span>
<span id="recycle-fee-value">{{ getDisplayed(recycleFeeCartItem.subTotal) }}</span>
<span v-else>{{ item?.name ?? '' }}</span>
<span>{{ getDisplayed(item?.subTotal ?? 0, false) }}</span>
</div>
<div class="px-5">
<textLink
v-if="item.isRemovable && (!readOnly || !showAsPaid)"
ref="removeLink"
linkType="text"
text="Remove"
href="javascript:void(0)"
@clickEvent="removeItem(item.partType, item.isVap)">
<template #after-text>
<span class="sr-only">{{ item?.name ?? '' }}</span>
</template>
</textLink>
</div>
</div>
</div>
<div
id="cart-footer"
class="cart-footer">
class="cart-footer pb-5">
<div
id="cart-subtotal-and-tax"
class="subtotal-and-tax">
@ -187,7 +190,7 @@ export default {
...(otherParts ?? [])
],
deductible: currentDeductible,
isExpanded: false,
isExpanded: true, // false,
widget: {
amountDue: 'AmountDueTextWidget',
deductible: 'DeductibleWidget',
@ -216,7 +219,11 @@ export default {
const basePrice = this.showDeductibleLineItem
? this.deductible
: this.baseServicePrice;
return basePrice + this.packagePrice;
const nonPackageCartItemsPrice = this.nonServicePackageCartItems.reduce(
(accumulator, cartItem) => accumulator + cartItem.subTotal,
0
);
return basePrice + nonPackageCartItemsPrice + this.packagePrice;
},
salesTax() {
return 0; // TODO
@ -242,25 +249,50 @@ export default {
this.vapsInOrder
);
},
servicePackageCartItems() {
const packageContentTypes = getPackageContents(
partTypesInServicePackage() {
return getPackageContents(
this.glassToReplace,
this.availableLineItems,
this.isRepair,
this.servicePackageTier
) ?? [];
},
servicePackageCartItems() {
const items = [];
if (packageContentTypes.includes(partTypeStrings.FRONT_WIPER) ?? this.frontWipersCartItem) {
if (this.partTypesInServicePackage.includes(partTypeStrings.FRONT_WIPER) ?? this.frontWipersCartItem) {
items.push(this.frontWipersCartItem);
}
if (packageContentTypes.includes(partTypeStrings.REAR_WIPER) ?? this.rearWipersCartItem) {
if (this.partTypesInServicePackage.includes(partTypeStrings.REAR_WIPER) ?? this.rearWipersCartItem) {
items.push(this.rearWipersCartItem);
}
if (packageContentTypes.includes(partTypeStrings.RAIN_DEFENSE) ?? this.rainDefenseCartItem) {
if (this.partTypesInServicePackage.includes(partTypeStrings.RAIN_DEFENSE) ?? this.rainDefenseCartItem) {
items.push(this.rainDefenseCartItem);
}
return items;
},
nonServicePackageCartItems() {
const vapsLineItemsNotInPackage = this.vapsInOrder.filter((vap) => !this.partTypesInServicePackage.includes(vap.partType));
const vapsCartItemsNotInPackage = vapsLineItemsNotInPackage.map((lineItem) => {
switch (lineItem.partType) {
case partTypeStrings.FRONT_WIPER:
return this.frontWipersCartItem;
case partTypeStrings.REAR_WIPER:
return this.rearWipersCartItem;
case partTypeStrings.RAIN_DEFENSE:
return this.rainDefenseCartItem;
default:
return null;
}
});
const items = vapsCartItemsNotInPackage.filter((item) => item != null);
if (this.recycleFeeCartItem) {
items.push(this.recycleFeeCartItem);
}
if (this.mobileFeeCartItem) {
items.push(this.mobileFeeCartItem);
}
return items;
},
frontWipersCartItem() {
return this.getCartItemForVapsPart(partTypeStrings.FRONT_WIPER);
},
@ -271,7 +303,8 @@ export default {
return this.getCartItemForVapsPart(partTypeStrings.RAIN_DEFENSE);
},
packagePrice() {
return getPriceOfLineItems(this.vapsInOrder);
const vapsInPackage = this.vapsInOrder.filter((vap) => this.partTypesInServicePackage.includes(vap.partType));
return getPriceOfLineItems(vapsInPackage);
},
amountDueLabel() {
return this.getCmsContent(this.widget.amountDue, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
@ -310,7 +343,11 @@ export default {
return recycleFeeLineItem
? this.getCartItem(
this.getCmsContent(this.widget.recycleFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
[recycleFeeLineItem]
[recycleFeeLineItem],
false,
partTypeStrings.REPLACE_FEE, // TODO this is because of the awkwardness
false,
true
)
: null;
},
@ -319,7 +356,11 @@ export default {
return mobileFeeLineItem
? this.getCartItem(
this.getCmsContent(this.widget.mobileFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
[mobileFeeLineItem]
[mobileFeeLineItem],
false,
partTypeStrings.MOBILE_FEE,
false,
false
)
: null;
}
@ -331,22 +372,26 @@ export default {
toggleIsExpanded() {
this.isExpanded = !this.isExpanded;
},
getDisplayed(amount) {
return this.isUnverified && this.showDeductibleLineItem
getDisplayed(amount, canBeVerifyingCoverage = true) {
return canBeVerifyingCoverage && this.isUnverified && this.showDeductibleLineItem
? VERIFYING_COVERAGE
: formatAmountInDollars(amount);
},
getCartItem(label, lineItems) {
getCartItem(label, lineItems, isRemovable, partType, isVap, isRecycle) {
let cartItem = null;
if (lineItems && lineItems.length > 0) {
cartItem = {
name: label,
partType,
subTotal: getPriceOfLineItems(lineItems),
salesTax: lineItems.reduce(
(accumulator, lineItem) => accumulator + lineItem.salesTax,
0
)
),
isRemovable,
isVap,
isRecycle
};
}
@ -356,10 +401,14 @@ export default {
const label = this.getCmsContentForVapsType(partType);
const lineItems = this.vapsInOrder
?.filter((vapsLineItem) => vapsLineItem.partType === partType);
return this.getCartItem(label, lineItems);
return this.getCartItem(label, lineItems, true, partType, true, false);
},
removeItem() {
// TODO in later ticket
removeItem(partType, isVap) {
if (isVap) {
this.vapsInOrder = this.vapsInOrder.filter((vap) => vap.partType !== partType);
useMainStore().updateVaps(this.vapsInOrder);
}
// NOTE Currently only vaps can be removed
},
getCmsContentForVapsType(vapsType) {
const vapsItemDescriptions = this.getCmsContent(
@ -416,6 +465,12 @@ export default {
text-underline-offset: auto !important;
}
.non-packaged-cart-item {
&.even {
background-color: $gray-100;
}
}
.cart-item {
padding: 0.25rem 1.5rem;
}