INSR-8882: Events added to payment page and order confirmation page

src/constants/analytics.js

@@ -1,3 +1,6 @@
+import packageNames from "./package-names";
+import { paymentMethods } from "./payment-method-constants";
+
 const analyticsPageEvents = Object.freeze({
     ENTRY: 'ENTRY',
     EVENT: 'EVENT'
@@ -40,4 +43,18 @@ const ValueToLogTypes = Object.freeze({
     LAST_5: 'last_5'
 });
 
-export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes };
+const analyticsPaymentTypeMap = new Map([
+    [paymentMethods.AFTERPAY, 'after_pay'],
+    [paymentMethods.CREDIT_CARD, 'credit_card'],
+    [paymentMethods.PAY_AT_TIME_OF_SERVICE, 'pay_at_service'],
+    [paymentMethods.PAYPAL, 'pay_pal'],
+    [paymentMethods.APPLEPAY, 'apple_pay'],
+])
+
+const analyticsServicePackageMap = new Map([
+    [packageNames.TIER_ONE, 'basic'],
+    [packageNames.TIER_TWO, 'essentials'],
+    [packageNames.TIER_THREE, 'essentialsplus']
+])
+
+export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes, analyticsPaymentTypeMap, analyticsServicePackageMap };

src/layouts/order-confirmation/order-confirmation.vue

@@ -55,7 +55,7 @@
                             :isRepair="isRepair" />
                     </div>
                     <div 
-                        v-if="displayWipers"
+                        v-if="hasWipers"
                         class="wiper-details confirmation-section">
                         <span class="wipers-title">{{ wipersTitle }}</span>
                         <span
@@ -64,7 +64,7 @@
                             class="wipers-body">{{ description }}</span>
                     </div>
                     <div 
-                        v-if="displayRainRepel"
+                        v-if="hasRainRepel"
                         class="rain-repel-details confirmation-section">
                         <span class="rain-repel-title">{{ rainRepelTitle }}</span>
                         <span class="rain-repel-body">{{ rainRepelBody }}</span>
@@ -135,6 +135,10 @@ import widgetFields from '@/constants/cms-widget-fields.js';
 import { getGlassList } from '@/helpers/damage-helper';
 import partTypeStrings from '@/constants/part-type-strings';
 import coverageType from '@/constants/coverage-type';
+import { analyticsPaymentTypeMap, analyticsServicePackageMap } from '@/constants/analytics';
+import { containsRecalParts } from '@/helpers/recal-helper';
+import issPageValues from '@/router/router-constants/issPage-values';
+import { getCartTotal } from '@/helpers/cart-helper';
 
 export default {
     name: 'order-confirmation',
@@ -199,6 +203,7 @@ export default {
             hasRecalibrationPart,
             referralNumber: referralNumber?.toString(),
             isNoComp: this.submittedOrder.insuranceCoverage.coverageType === coverageType.NO_COMP,
+            isITAC: this.submittedOrder.insuranceCoverage.coverageType === coverageType.ITAC,
             widgets: {
                 siteHeader: 'SiteHeaderWidget',
                 emailConfirmation: 'EmailConfirmationWordingWidget',
@@ -418,10 +423,16 @@ export default {
             // Temporarily set return true to see cart in localhost or dev environment
             return false;
         },
-        displayWipers() {
+        hasWipers() {
             const hasWiperPart = this.submittedOrder.lineItems.vaps.some((part) => part.partType.toLowerCase().includes('wiper'));
             return hasWiperPart;
         },
+        hasFrontWiper() {
+            return this.submittedOrder.lineItems.vaps.some((part) => part.partType === partTypeStrings.FRONT_WIPER);
+        },
+        hasRearWiper() {
+            return this.submittedOrder.lineItems.vaps.some((part) => part.partType === partTypeStrings.REAR_WIPER);
+        },
         wipersTitle() {
             return this.getCmsContent(
                 this.widgets.wipersText,
@@ -431,13 +442,10 @@ export default {
         wipersBody() {
             const wiperTypesOnOrder = [];
 
-            const hasFrontWiper = this.submittedOrder.lineItems.vaps.some((part) => part.partType === partTypeStrings.FRONT_WIPER);
+            if (this.hasFrontWiper) {
-            const hasRearWiper = this.submittedOrder.lineItems.vaps.some((part) => part.partType === partTypeStrings.REAR_WIPER);
-
-            if (hasFrontWiper) {
                 wiperTypesOnOrder.push(partTypeStrings.FRONT_WIPER);
             }
-            if (hasRearWiper) {
+            if (this.hasRearWiper) {
                 wiperTypesOnOrder.push(partTypeStrings.REAR_WIPER);
             }
 
@@ -447,7 +455,7 @@ export default {
 
             return wiperDescriptions;
         },
-        displayRainRepel() {
+        hasRainRepel() {
             return this.submittedOrder.lineItems.vaps.some((part) => part.partType === partTypeStrings.RAIN_DEFENSE);
         },
         rainRepelTitle() {
@@ -508,6 +516,10 @@ export default {
         if (this.carrierUrl) {
             this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`);
         }
+
+        const isFirstLoad = this.mainStore.pageData(issPageValues.ORDER_CONFIRMATION)?.isFirstLoad ?? true;
+        this.savePageDataToStore(issPageValues.ORDER_CONFIRMATION, { isFirstLoad: false });
+        this.handleAnalyticsEvents(isFirstLoad);
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -611,6 +623,72 @@ export default {
 
             const vapsTypeDescription = vapsItemDescriptions?.find((entry) => entry?.Name === vapsPartType);
             return vapsTypeDescription?.Text ?? '';
+        },
+        handleAnalyticsEvents(isFirstLoad) {
+            const mobileOrInshop = this.submittedOrder.isMobileAppointment ? 'mobile' : 'in_shop';
+            const verifiedOrNotVerified = this.submittedOrder.isVerified ? 'verified' : 'not_verified';
+            const repairOrReplace = this.submittedOrder.isRepair ? 'repair' : 'replace';            
+            this.pushEventToGA('confirmation', 'safelite', `${mobileOrInshop}_${repairOrReplace}_${verifiedOrNotVerified}`, true);
+
+            if (this.payment.isPayInAdvance) {
+                const paymentMethodForAnalytics = analyticsPaymentTypeMap.get(this.payment.paymentMethod);
+                this.pushEventToGA('payment_page', 'pia_successful', paymentMethodForAnalytics, true);
+            }
+
+            if (this.submittedOrder.servicePackage) {
+                const servicePackageForAnalytics = analyticsServicePackageMap.get(this.submittedOrder.servicePackage);
+                this.pushEventToGA('service_package', 'package_purchased', servicePackageForAnalytics, true);
+            }
+
+            if (containsRecalParts(this.submittedOrder.lineItems)) {
+                let coverageType = '';
+                if (this.isITAC) {
+                    coverageType = 'ITAC';
+                } else if (this.isNoComp) {
+                    coverageType = 'no_comp';
+                } else if (this.submittedOrder.isVerified) {
+                    coverageType = 'verified';
+                } else {
+                    coverageType = 'unverified';
+                }
+                const recalibrationType = this.submittedOrder.lineItems.glassParts.find((part) => part.requiresRecalibration).recalibrationType;
+                this.pushEventToGA(`recalibration_scheduled_${coverageType}`, this.vehicle.carId, `recal_type_${recalibrationType}`.replace(/ /g, '_').toLowerCase(), true);
+            }
+
+            const ymms = `${this.vehicle.year}_${this.vehicle.make}_${this.vehicle.model}_${this.vehicle.style}`;
+            if (isFirstLoad && getCartTotal(this.submittedOrder) > 0) {
+                this.pushEventToGA('total_price', getCartTotal(this.submittedOrder).toString(), ymms, true);
+            }
+
+            this.pushEventToGA('rain_defense', this.hasRainRepel ? 'purchased' : 'no_purchase', ymms, true);
+
+            // TODO: Check if we're coming from SFA and add relevant events
+            // eslint-disable-next-line
+            if (false) {
+                this.pushEventToGA('visitor_info_confirmation', 'referring_site', 'SFA', null);
+            }
+            else {
+                this.pushEventToGA('visitor_info_confirmation', 'referring_site', 'ClientSite', true);
+            }
+
+            this.pushEventToGA('visitor_info_confirmation', 'client_name', this.mainStore.accountNameForEvents, true);
+
+            const wiperAction = this.hasWipers ? 'purchased' : 'no_purchase';
+
+            let wiperLabel = this.wipersBody.join('_').toLowerCase().replace('<br />', '').replace(/beam/g, '').replace(/blades/g, '').trim().replace(/ /g, '_');
+            if (wiperLabel.indexOf('front') < 0 && wiperLabel.indexOf('rear') < 0) {
+                wiperLabel = 'none_none';
+            } else {
+                if (wiperLabel.indexOf('front') < 0) {
+                    wiperLabel = 'front_none_' + wiperLabel;
+                }
+                if (wiperLabel.indexOf('rear') < 0) {
+                    wiperLabel = wiperLabel + '_rear_none';
+                }
+            }
+            wiperLabel = wiperLabel.replace(/__/g, '_');
+            
+            this.pushEventToGA('wipers', wiperAction, wiperLabel, true);
         }
     }
 };

src/layouts/payment-page-adyen/payment-page-adyen.vue

@@ -75,6 +75,7 @@ import { mapAdyenToIssPaymentMethod, mapIssToAdyenPaymentMethod } from '@/helper
 import { createAdyenCheckout } from "@/helpers/adyen-helper";
 import { Dropin } from "@adyen/adyen-web/auto";
 import applicationConfig from '@/constants/application-config';
+import { analyticsPaymentTypeMap } from '@/constants/analytics';
 
 export default {
     name: 'payment-page-adyen',
@@ -118,6 +119,7 @@ export default {
     },
     mounted() {
         showIssLoadingModal(true);
+        this.pushEventToGA('payment_page', 'Mode', 'Adyen', true);
         this.initializeAdyen().finally(() => {
             showIssLoadingModal(false);
         });
@@ -353,6 +355,8 @@ export default {
         },
         async paymentFailedPayLater() {
             this.showIssLoadingModal(true);
+            const paymentMethod = analyticsPaymentTypeMap.get(this.piaType);
+            this.pushEventToGA('transaction_declined_displayed', 'save_your_appointment_clicked', `${paymentMethod}_declined`, true);
             this.mainStore.savePaymentMethodChoice(paymentMethods.PAY_AT_TIME_OF_SERVICE);
             await submitWorkOrder({ submitType: submitType.SAFELITE });
             this.$router.navigate(
@@ -523,6 +527,8 @@ export default {
             const paymentMethodFromSession = adyenResponse?.paymentMethod;
 
             const paymentMethod = mapAdyenToIssPaymentMethod(paymentMethodFromSession);
+            const paymentMethodForAnalytics = analyticsPaymentTypeMap.get(paymentMethod);
+            this.pushEventToGA('PIA', 'Pay Today', paymentMethodForAnalytics, true, null, 0);
             
             this.mainStore.savePaymentMethodChoice(paymentMethod);
 
@@ -544,6 +550,10 @@ export default {
 
                 await global.$logger.logError(stringToLog);
 
+                const paymentMethodForAnalytics = analyticsPaymentTypeMap.get(this.piaType);
+                this.pushEventToGA('transaction_declined_displayed', `${paymentMethodForAnalytics}_declined`, true, true, null, 0);
+                this.pushEventToGA('payment_page', 'pia_failed', paymentMethodForAnalytics, true, null, result?.resultCode);
+
                 this.hasPaymentFailureError = true;
             }
 
@@ -556,6 +566,9 @@ export default {
                 const stringToLog = `ADYEN ERROR. Name = ${error?.name}. Details = ${error?.message}.`;
 
                 await global.$logger.logError(stringToLog);
+                const paymentMethodForAnalytics = analyticsPaymentTypeMap.get(this.piaType);
+                this.pushEventToGA('transaction_declined_displayed', `${paymentMethodForAnalytics}_declined`, true, true, null, 0);
+                this.pushEventToGA('payment_page', 'pia_error', paymentMethodForAnalytics, true, null, error?.name);
 
                 this.hasPaymentFailureError = true;
             }

src/layouts/payment-return-adyen/payment-return-adyen.vue

@@ -18,6 +18,7 @@ import navigationScenarios from '@/router/router-constants/navigation-scenarios'
 import submitType from '@/constants/submit-type';
 import showIssLoadingModal from '@/helpers/loading-modal-helper';
 import { paymentMethods } from '@/constants/payment-method-constants';
+import { analyticsPaymentTypeMap } from '@/constants/analytics';
 
 export default {
     name: 'payment-return-adyen',
@@ -58,6 +59,8 @@ export default {
             const sessionInfo = await getSessionInfo(sessionId, result.sessionResult);
 
             const paymentMethod = mapAdyenToIssPaymentMethod(sessionInfo?.paymentMethod);
+            const paymentMethodForAnalytics = analyticsPaymentTypeMap.get(paymentMethod);
+            this.pushEventToGA('PIA', 'Pay Today', paymentMethodForAnalytics, true, null, 0);
             const amountDue = getCartTotal(store.order);
             const ccToken = generateCcToken(sessionInfo);
             if (paymentMethod === paymentMethods.AFTERPAY) {
@@ -95,6 +98,11 @@ export default {
             }
         );
     },
+    computed: {
+        piaType() {
+            return this.mainStore.payment.paymentMethod;
+        }
+    },
     methods: {
         finalizeAdyenPayment(sessionId, redirectResult) {
             return new Promise((resolve, reject) => {
@@ -111,6 +119,10 @@ export default {
                                 const stringToLog = `ADYEN PAYMENT NOT AUTHORIZED. Code = ${result?.resultCode}. Id = ${sessionId}`;
 
                                 global.$logger.logError(stringToLog);
+
+                                const paymentMethodForAnalytics = analyticsPaymentTypeMap.get(this.piaType);
+                                this.pushEventToGA('transaction_declined_displayed', `${paymentMethodForAnalytics}_declined`, true, true, null, 0);
+                                this.pushEventToGA('payment_page', 'pia_failed', paymentMethodForAnalytics, true, null, result?.resultCode);
                             }
 
                             reject({
@@ -123,6 +135,10 @@ export default {
                                 const stringToLog = `ADYEN ERROR. Name = ${error?.name}. Details = ${error?.message}.`;
 
                                 global.$logger.logError(stringToLog);
+
+                                const paymentMethodForAnalytics = analyticsPaymentTypeMap.get(this.piaType);
+                                this.pushEventToGA('transaction_declined_displayed', `${paymentMethodForAnalytics}_declined`, true, true, null, 0);
+                                this.pushEventToGA('payment_page', 'pia_error', paymentMethodForAnalytics, true, null, error?.name);
                             }
 
                             reject({