CSR-1384: updates for cart work, using lineItems instead of cartItems

src/fmg-components/cart/cart.vue

@@ -54,47 +54,34 @@
 </template>
 
 <script>
-import cart from "@/fmg-components/cart/cart";
 import baseMixin from "@/mixins/base-mixin.js";
-import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import { packageNames } from "@/constants/package-names";
 import {
     getHighestFullySatisfiedTier,
     containsLineItemWithPartType,
     getPackageContents,
     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 {
     name: "modal",
     props: {
-        headerCmsWidgetName: String,
-        servicePackageOptionsCmsName: String,
         damage: Object,
-        storeLineItems: Object,
+        servicePackageOptionsCmsName: String,
         availableLineItems: Object,
-        allowableCartItems: Object,
+        lineItems: Object,
     },
     data() {
         return {
             isActive: false,
-            //availableVaps: [], TO DO Do we need this?
             packageWithVAPS: false,
-            // packageLevel: "",
         };
     },
     methods: {
         toggleClass: function (event) {
             this.isActive = !this.isActive;
         },
-        initializeComponent(apiResponses) {
-            //TO DO Do we need this?
-            // const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
-            // this.availableVaps = vapsFromApi;
-        },
         getPackagePriceString(packageName) {
             const formattedPriceFloat = parseFloat(this.getPackagePrice(packageName)).toFixed(2);
             return (this.isInsuranceSelected ? "As little as $" : "$") + formattedPriceFloat;
@@ -103,7 +90,7 @@ export default {
             let priceFloat = this.isInsuranceSelected
                 ? 0
                 : baseMixin.methods.getTierOnePackagePrice(
-                      baseMixin.methods.filterOutFees(this.nullSafeAvailableLineItems)
+                      baseMixin.methods.filterOutFees(this.availableLineItems)
                   );
 
             priceFloat += this.getVapsPrice(packageName);
@@ -127,7 +114,7 @@ export default {
         getVapsLineItemsForSelectedPackage(packageName) {
             const packageContentTypes = getPackageContents(
                 this.glassToReplace,
-                this.nullSafeAvailableLineItems,
+                this.availableLineItems,
                 this.isRepair,
                 packageName
             );
@@ -136,10 +123,9 @@ export default {
 
             packageContentTypes.forEach((vapType) => {
                 vapsLineItemsForSelectedPackage.push(
-                    ...findLineItemsWithPartType(vapType, this.nullSafeAvailableLineItems)
+                    ...findLineItemsWithPartType(vapType, this.availableLineItems)
                 );
             });
-            // console.log("VapsLineItems:", vapsLineItemsForSelectedPackage);
             return vapsLineItemsForSelectedPackage;
         },
     },
@@ -180,7 +166,7 @@ export default {
         displayedPackageLineItems() {
             const displayedPackageLineItems = [];
             const packageLineItems = this.getVapsLineItemsForSelectedPackage(this.packageLevel);
-            //TO DO Could we get the same list from this.storeLineItems?
+            // TODO Determine if we could get the same list from this.lineItems?
             packageLineItems?.forEach((item) => {
                 let price = item.sellingPrice + item.kitPrice + item.laborAmount;
                 const packageLineItem = {
@@ -191,7 +177,6 @@ export default {
                 };
                 displayedPackageLineItems.push(packageLineItem);
             });
-            // console.log("What displayedPackageLineItems is", packageLineItems);
             return displayedPackageLineItems;
         },
         displayedNonPackageLineItems() {
@@ -236,11 +221,11 @@ export default {
             return this.damage.isRepair;
         },
         vaps() {
-            const vaps = this.storeLineItems?.vaps;
+            const vaps = this.lineItems?.vaps;
             return vaps?.length > 0 ? vaps : [];
         },
         supportingItems() {
-            const supportingItems = this.storeLineItems?.supportingItems;
+            const supportingItems = this.lineItems?.supportingItems;
             return supportingItems?.length > 0 ? supportingItems : [];
         },
         recycleLabel() {
@@ -258,9 +243,6 @@ export default {
             // }
             return true;
         },
-        nullSafeAvailableLineItems() {
-            return this.availableLineItems ?? [];
-        },
     },
     components: {
         textBlock,

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

@@ -17,8 +17,8 @@
 
                     <cart
                         :damage="damageInfo"
-                        :storeLineItems="storeLineItems"
-                        :availableLineItems="cartItems"
+                        :availableLineItems="availableLineItems || []"
+                        :lineItems="lineItems"
                         servicePackageOptionsCmsName="ServicePackageTitle"
                         @cart-remove="cartRemove" />
 
@@ -34,9 +34,10 @@
 
                     <add-vaps-modal-buttons
                         :cartItems="cartItems"
-                        :wiperItems="availableWipers"
-                        :rainDefenseItem="availableRainDefense"
-                        vapsTilesCmsName="VapsProductTiles" />
+                        :wiperItems="availableWipers || []"
+                        :rainDefenseItem="availableRainDefense || {}"
+                        vapsTilesCmsName="VapsProductTiles"
+                        v-on="{ 'buttonEvent.openModal': openModalAction }" />
 
                     <div>
                         <button v-on:click="ccdPayment">
@@ -76,6 +77,8 @@
                                 alt="Afterpay" />
                         </button>
                     </div>
+                    <button @click="openModalAction('RainDefenseModal')">OPEN MODAL</button>
+                    <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
@@ -96,6 +99,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import cart from "@/fmg-components/cart/cart";
 import addVapsModalButtons from "@/fmg-components/add-vaps-modal-buttons/add-vaps-modal-buttons";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
 import alert from "@/ux-components/alert/alert";
 
@@ -156,6 +160,8 @@ export default {
             ...resultMap.wipers,
             ...clonedGlassParts,
         ];
+
+        // TODO - DO WE NEED TO GET PRICINGRESULTS HERE? SEEMS TO BE THE SAME AS availableLineItems
         const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
             storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
             {
@@ -164,30 +170,33 @@ export default {
             "payment-method",
             false
         );
-        const storeLineItems = store.getters.lineItems;
+        const lineItems = store.getters.lineItems;
+
         const cartItems = [
             ...clonedGlassParts,
-            ...storeLineItems.supportingItems,
-            ...storeLineItems.vaps,
+            ...lineItems.supportingItems,
+            ...lineItems.vaps,
         ];
 
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
+            vm.availableWipers = resultMap.wipers; // TOBEREMOVED BY AJC IN CSR-1384
+            vm.availableRainDefense = resultMap.rainDefense; // TOBEREMOVED BY AJC IN CSR-1384
+            vm.cartItems = cartItems; // TOBEREMOVED BY AJC IN CSR-1384
+
             vm.setCmsContent(resultMap.cmsContent);
             vm.availableLineItems = pricingResults;
-            vm.availableWipers = resultMap.wipers;
-            vm.availableRainDefense = resultMap.rainDefense;
-            vm.cartItems = cartItems;
+            vm.lineItems = lineItems;
         });
     },
     data() {
         return {
-            cartItems: [],
-            availableWipers: null,
-            availableRainDefense: null,
+            cartItems: [], // TOBEREMOVED BY AJC IN CSR-1384
+            availableWipers: null, // TOBEREMOVED BY AJC IN CSR-1384
+            availableRainDefense: null, // TOBEREMOVED BY AJC IN CSR-1384
+
+            lineItems: null,
             availableLineItems: null,
-            supportingItems: null,
-            pricedGlassParts: null,
             displayPaypalAlert: this.getPaypalAlert(),
         };
     },
@@ -195,6 +204,9 @@ export default {
         arePagePrerequisitesValid() {
             return true;
         },
+        openModalAction(modalName) {
+            this.$refs[modalName].openModal();
+        },
         getPaypalAlert() {
             return store.getters.order.payment.piaErrorCode ? true : false;
         },
@@ -209,7 +221,7 @@ export default {
             const matchedIndices = [];
             this.cartItems.forEach((cartItem, i) => {
                 if (cartItem.partType === item.partType) {
-                    console.log("adding this to matchedIndices: ", i);
+                    // console.log("adding this to matchedIndices: ", i);
                     matchedIndices.push(i);
                 }
             });
@@ -265,6 +277,7 @@ export default {
     },
     computed: {
         damageInfo() {
+            // console.log("this.$store.getters.damage ", this.$store.getters.damage)
             return this.$store.getters.damage;
         },
         storeLineItems() {
@@ -281,6 +294,7 @@ export default {
         cart,
         alert,
         addVapsModalButtons,
+        contentGroupModal,
     },
 };
 </script>