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