Merge pull request #1380 from Safelite/feature/CSR-1383-add-product-tiles

CSR-1383: update cart to enable remove from cart functionality

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");
             });
         },

src/fmg-components/cart/cart.vue

@@ -19,7 +19,12 @@
                     :key="i"
                     :class="[this.displayedPackageLineItems ? 'vaps' : '']">
                     <span>{{ lineItem.name }}</span>
-                    <span><a href="#">Remove</a></span>
+                    <textLink
+                        ref="removeLink"
+                        linkType="text"
+                        text="showMoreShopsLinkText"
+                        href="#!"
+                        @click-event="removeItem(lineItem)" />
                 </div>
                 <hr style="background: red" />
                 <div
@@ -27,7 +32,12 @@
                     :key="i"
                     :class="[this.displayedNonPackageLineItems ? 'vaps' : '']">
                     <span>{{ lineItem.name }}</span>
-                    <span><a href="#">Remove</a></span>
+                    <textLink
+                        ref="removeLink"
+                        linkType="text"
+                        text="showMoreShopsLinkText"
+                        href="#!"
+                        @click-event="removeItem(lineItem)" />
                     <span>{{ lineItem.price }}</span>
                 </div>
                 <div v-if="hasRecycleLineItem">
@@ -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,
     },
 };
 </script>

src/layouts/payment-method/payment-method.vue

@@ -17,9 +17,10 @@
 
                     <cart
                         :damage="damageInfo"
-                        :orderLineItems="orderLineItems"
+                        :storeLineItems="storeLineItems"
                         :availableLineItems="cartItems"
-                        servicePackageOptionsCmsName="ServicePackageTitle" />
+                        servicePackageOptionsCmsName="ServicePackageTitle"
+                        @cart-remove="cartRemove" />
 
                     <div>
                         <alert
@@ -32,7 +33,7 @@
                     </div>
 
                     <add-vaps-modal-buttons
-                        :cart="cartItems"
+                        :cartItems="cartItems"
                         :wiperItems="availableWipers"
                         :rainDefenseItem="availableRainDefense"
                         vapsTilesCmsName="VapsProductTiles" />
@@ -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;
         },
     },