From c47914338569052240e38a06a581c842d392bad9 Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Fri, 6 Oct 2023 10:13:37 -0400 Subject: [PATCH] CSR-1383: update cart to enable remove from cart functionality --- .../add-vaps-modal-buttons.vue | 10 +++--- src/fmg-components/cart/cart.vue | 28 +++++++++++---- src/layouts/payment-method/payment-method.vue | 35 +++++++++++++++---- 3 files changed, 55 insertions(+), 18 deletions(-) diff --git a/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue b/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue index 67ec8861b..0a6faa72f 100644 --- a/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue +++ b/src/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons.vue @@ -20,7 +20,7 @@ import addVapsButton from "./add-vaps-button/add-vaps-button"; export default { name: "add-vaps-modal-buttons", props: { - cart: Object, + cartItems: Object, rainDefenseItem: Object, wiperItems: Object, vapsTilesCmsName: String, @@ -43,14 +43,14 @@ export default { return this.showAddRainDefense || this.showAddWipers; }, showAddRainDefense() { - // if it's not found in the cart - return !this.cart.some((vap) => { + // if not found in the cart + return !this.cartItems.some((vap) => { return vap.partType === "RAIN DEFENSE"; }); }, showAddWipers() { - // if it's not found in the cart - return !this.cart.some((vap) => { + // if not found in the cart + return !this.cartItems.some((vap) => { return vap.partType.includes(" WIPER"); }); }, diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue index 2384eb917..6225010e4 100644 --- a/src/fmg-components/cart/cart.vue +++ b/src/fmg-components/cart/cart.vue @@ -19,7 +19,12 @@ :key="i" :class="[this.displayedPackageLineItems ? 'vaps' : '']"> {{ lineItem.name }} - Remove +
{{ lineItem.name }} - Remove + {{ lineItem.price }}
@@ -55,6 +65,7 @@ import { findLineItemsWithPartType, } from "@/helpers/service-package-helper"; import reviewBlock from "@/layouts/review/review-block/review-block"; +import textLink from "@/ux-components/text-link/text-link"; import textBlock from "@/digital-components/text-block/text-block"; export default { @@ -63,7 +74,7 @@ export default { headerCmsWidgetName: String, servicePackageOptionsCmsName: String, damage: Object, - orderLineItems: Object, + storeLineItems: Object, availableLineItems: Object, allowableCartItems: Object, }, @@ -110,7 +121,9 @@ export default { return price; }, - //START HERE + removeItem(item) { + this.$emit("cart-remove", item); + }, getVapsLineItemsForSelectedPackage(packageName) { const packageContentTypes = getPackageContents( this.glassToReplace, @@ -167,7 +180,7 @@ export default { displayedPackageLineItems() { const displayedPackageLineItems = []; const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel); - //TO DO Could we get the same list from this.orderLineItems? + //TO DO Could we get the same list from this.storeLineItems? packageLineItems?.forEach((item) => { let price = item.sellingPrice + item.kitPrice + item.laborAmount; const packageLineItem = { @@ -220,11 +233,11 @@ export default { return this.damage.isRepair; }, vaps() { - const vaps = this.orderLineItems?.vaps; + const vaps = this.storeLineItems?.vaps; return vaps?.length > 0 ? vaps : []; }, supportingItems() { - const supportingItems = this.orderLineItems?.supportingItems; + const supportingItems = this.storeLineItems?.supportingItems; return supportingItems?.length > 0 ? supportingItems : []; }, recycleLabel() { @@ -248,6 +261,7 @@ export default { }, components: { textBlock, + textLink, }, }; diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index a8003128b..385436cda 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -17,9 +17,10 @@ + servicePackageOptionsCmsName="ServicePackageTitle" + @cart-remove="cartRemove" />
@@ -163,15 +164,20 @@ export default { "payment-method", false ); + const storeLineItems = store.getters.lineItems; + const cartItems = [ + ...storeLineItems.glassParts, + ...storeLineItems.supportingItems, + ...storeLineItems.vaps, + ]; // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); - vm.pricedGlassParts = clonedGlassParts; - vm.supportingItems = resultMap.supportingItems; vm.availableLineItems = pricingResults; vm.availableWipers = resultMap.wipers; vm.availableRainDefense = resultMap.rainDefense; + vm.cartItems = cartItems; }); }, data() { @@ -195,6 +201,22 @@ export default { vapsItemsSelectedAction(vapsItemsSelected) { this.cartItems = vapsItemsSelected; }, + // TODO (as part of CSR-1384) enable adding to the cart + // vapsItemsSelectedAction(vapsItemsSelected) { + // this.cartItems = vapsItemsSelected; + // }, + cartRemove(item) { + const matchedIndices = []; + this.cartItems.forEach((cartItem, i) => { + if (cartItem.partType === item.partType) { + console.log("adding this to matchedIndices: ", i); + matchedIndices.push(i); + } + }); + this.cartItems = this.cartItems.filter((cartItem, index) => { + return cartItem.partType !== item.partType; + }); + }, backButtonAction() { this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false); this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route); @@ -245,7 +267,8 @@ export default { damageInfo() { return this.$store.getters.damage; }, - orderLineItems() { + storeLineItems() { + // console.log("storeLineItems, aka lineItems from store: ", this.$store.getters.lineItems) return this.$store.getters.lineItems; }, },