INSR-8884: Some payment-method events

src/constants/analytics.js

@@ -57,4 +57,10 @@ const analyticsServicePackageMap = new Map([
     [packageNames.TIER_THREE, 'essentialsplus']
 ]);
 
-export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes, analyticsPaymentTypeMap, analyticsServicePackageMap };
+const analyticsVapsModalMap = new Map([
+    ['FrontWiperModal', 'wiper'],
+    ['RearWiperModal', 'wiper'],
+    ['RainDefenseModal', 'raindefense'],
+]);
+
+export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes, analyticsPaymentTypeMap, analyticsServicePackageMap, analyticsVapsModalMap };

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -42,7 +42,7 @@
                     linkType="text"
                     text="Remove"
                     href="javascript:void(0)"
-                    @clickEvent="removeVap(item.partType)">
+                    @clickEvent="removeVap(item.partType, item?.name ?? '')">
                     <template #after-text>
                         <span class="sr-only">{{ item?.name ?? '' }}</span>
                     </template>
@@ -367,8 +367,15 @@ export default {
                 ?.filter((vapsLineItem) => vapsLineItem.partType === partType) ?? [];
             return this.getCartItem(label, lineItems, cartItemType.VAP, partType);
         },
-        removeVap(partType) {
+        removeVap(partType, partName) {
             const newVaps = useMainStore().lineItems.vaps?.filter((vap) => vap?.partType !== partType) ?? [];
+            if (partType === partTypeStrings.FRONT_WIPER) {
+                this.pushEventToGA('Removed From Cart', 'Product - Front Wiper', 'Safelite advanced', true);
+            } else if (partType === partTypeStrings.REAR_WIPER) {
+                this.pushEventToGA('Removed From Cart', 'Product - Rear Wiper', 'Safelite advanced', true);
+            } else {
+                this.pushEventToGA('Removed From Cart', `Product - Other - ${partName}`, 'none', true);
+            }
             useMainStore().updateVaps(newVaps);
             useMainStore().updateServicePackage(null);
         },

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

@@ -156,6 +156,7 @@ import { getCartTotal } from '@/helpers/cart-helper';
 import { formatAmountInDollars } from '@/helpers/text-helper';
 import widgetFields from '@/constants/cms-widget-fields';
 import MaskaFormattedMasks from '@/constants/maska-masks';
+import { containsRecalParts } from '@/helpers/recal-helper';
 
 export default {
     name: 'payment-method',
@@ -197,6 +198,9 @@ export default {
             vm.updateFooterButtonText(vm.customCallToActionButtonCopy);
         });
     },
+    mounted() {
+        this.handleAnalyticsEvents();
+    },
     data() {
         return {
             paymentMethod: null,
@@ -499,6 +503,27 @@ export default {
         },
         closeContactDetailsWithoutSaving() {
             this.smsOptIn = 'No';
+        },
+        handleAnalyticsEvents() {
+            const mobileOrInshop = this.mainStore.isMobileAppointment ? 'mobile' : 'in_shop';
+            const verifiedOrNotVerified = this.mainStore.isVerified ? 'verified' : 'not_verified';
+            const repairOrReplace = this.mainStore.isRepair ? 'repair' : 'replace';
+            this.pushEventToGA('order_summary', 'safelite', `${mobileOrInshop}_${repairOrReplace}_${verifiedOrNotVerified}`, true);
+
+            if (containsRecalParts(this.mainStore.lineItems)) {
+                let coverageType = '';
+                if (this.mainStore.isITAC) {
+                    coverageType = 'ITAC';
+                } else if (this.mainStore.isNoComp) {
+                    coverageType = 'no_comp';
+                } else if (this.mainStore.isVerified) {
+                    coverageType = 'verified';
+                } else {
+                    coverageType = 'unverified';
+                }
+                const recalibrationType = this.mainStore.lineItems.glassParts?.find((part) => part.requiresRecalibration)?.recalibrationType;
+                this.pushEventToGA(`recalibration_added_${coverageType}`, this.mainStore.vehicle.carId, `recal_type_${recalibrationType}`.replace(/ /g, '_').toLowerCase(), true);
+            }
         }
     }
 };

src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue

@@ -115,7 +115,8 @@ export default {
         },
         textLinkEmit(copy) {
             this.$parent.$emit('link-event', {
-                args: getRouterLinkRouteFromCopy(copy)
+                route: getRouterLinkRouteFromCopy(copy),
+                packageName: this.value
             });
         }
     }

src/layouts/service-packages/service-packages.vue

@@ -80,6 +80,7 @@ import servicePackageQuestion from '@/layouts/service-packages/service-package-q
 import issPageValues from '@/router/router-constants/issPage-values';
 import bailoutMessage from '@/constants/bailoutMessage';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
+import { analyticsServicePackageMap, analyticsVapsModalMap } from '@/constants/analytics';
 
 const store = useMainStore();
 
@@ -204,8 +205,11 @@ export default {
         }
     },
     methods: {
-        openModalAction(modalName) {
+        openModalAction(eventData) {
-            this.$refs[modalName.args].openModal();
+            this.$refs[eventData.route].openModal();
+            const packageName = analyticsServicePackageMap.get(eventData.packageName);
+            const modalName = analyticsVapsModalMap.get(eventData.route);
+            this.pushEventToGA('service_package', 'modal_displayed', `${packageName}_${modalName}_modal_displayed`, true);
         },
         arePagePrerequisitesValid() {
             return (
@@ -236,6 +240,9 @@ export default {
             store.updateVaps(this.selectedVaps);
             store.updateServicePackage(this.selectedPackageTier);
             
+            const packageName = analyticsServicePackageMap.get(this.selectedPackageTier);
+            this.pushEventToGA('service_package', 'attached_a_package', packageName, true);
+
             const scenario = store.isMobileAppointment
                 ? this.navigationScenarios.CLICKED_FORWARD_MOBILE
                 : this.navigationScenarios.CLICKED_FORWARD_INSHOP;