CASH-535 - New field needed for datalayer (CashSubtotal)

src/constants/analytics.js

@@ -23,7 +23,6 @@ const GaActions = {
     SUBMITTED: "Submitted",
     DISPLAYED: "Displayed",
     CASH_QUOTE_DISPLAYED: "Cash quote displayed",
-    SERVICE_PACKAGE_PRICE: "Service package price",
     MOBILE_AVAILABLE: "mobile_available",
     SHOPS_FIRST_DISPLAYED: "shops_first_displayed",
     MORE_LOCATIONS_CLICKED: "more_locations_clicked",
@@ -43,4 +42,16 @@ const ValueToLogTypes = {
     LAST_5: "last_5",
 };
 
-export { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents, ValueToLogTypes };
+const Variables = {
+    CASH_SUBTOTAL: "cashSubTotal",
+};
+
+export {
+    analyticsPageEvents,
+    GaCategories,
+    GaActions,
+    GaLabels,
+    GaEvents,
+    ValueToLogTypes,
+    Variables,
+};

src/constants/store-mutations.js

@@ -69,6 +69,7 @@ const storeMutations = {
     UPDATE_SETTLED_TENDER_AMOUNT: "updateSettledTenderAmount",
     UPDATE_IS_RECAL_ACK_OPT_IN: "updateIsRecalAckOptIn",
     UPDATE_IS_MSR_FEE_APPLICABLE: "updateIsMSRFeeApplicable",
+    UPDATE_CASH_SUBTOTAL: "updateCashSubTotal",
 
     // EVENT BUS MUTATIONS
     ADD_EVENT_TO_BUS: "addEventToBus",

src/layouts/quote/quote.vue

@@ -789,8 +789,10 @@ export default {
             });
             this.$nextTick(() => {
                 const availablePackageNames = this.$refs.servicePackage?.servicePackageAnswers;
-                var eventLabel = "";
-                availablePackageNames?.forEach((tier) => {
+                var priceLabel = "";
+
+                if (availablePackageNames.length > 1 || availablePackageNames.length == 1) {
+                    var tier = availablePackageNames[0];
                     if (tier) {
                         let lineItemsToPrice = this.availableLineItems;
                         if (this.isRecalibrationOnOrder && this.shouldHideRecalibration) {
@@ -815,14 +817,11 @@ export default {
                             baseMixin.methods.filterOutFees(lineItemsToPrice)
                         );
                         price += this.$refs.servicePackage.getVapsPrice(tier.value);
-                        const formattedPrice = parseFloat(price).toFixed(2);
-                        eventLabel += tier.value + "_" + formattedPrice;
+                        priceLabel = price.toFixed(2);
                     }
-                    eventLabel += ",";
-                });
-                eventLabel = eventLabel.slice(0, -1);
-
-                this.pushEventToGA("quote", this.GaActions.SERVICE_PACKAGE_PRICE, eventLabel, true);
+                }
+                const subTotalLabel = this.Variables.CASH_SUBTOTAL;
+                this.pushVariableToDataLayer({ [subTotalLabel]: priceLabel });
             });
         },
         async skip(insuranceSelection, packageSelection) {

src/layouts/quote/service-package-question/service-package-question.vue

@@ -21,6 +21,8 @@ import servicePackageRadioExperiment from "@/experiment-components/service-packa
 import servicePackageRadioAfterpayExperiment from "@/experiment-components/service-package-radio-for-afterpay";
 import { partTypeStrings } from "@/constants/part-type-strings";
 import { packageNames } from "@/constants/package-names";
+import store from "@/store";
+import { storeMutations } from "@/constants/store-mutations";
 import {
     shouldFrontWipersBeAvailable,
     shouldRearWipersBeAvailable,
@@ -161,6 +163,13 @@ export default {
                     isInsuranceSelected: this.isInsuranceSelected,
                 },
             }));
+            if (availablePackages.length > 1 || availablePackages.length == 1) {
+                let price = this.getPackagePrice(availablePackages[0].packageName, {
+                    discountedPrice: false,
+                    servicePackageDiscount: false,
+                });
+                store.commit(storeMutations.UPDATE_CASH_SUBTOTAL, price?.toFixed(2));
+            }
             this.$emit("currentNumberOfPackages", modifiedAnswers.length);
             return modifiedAnswers;
         },

src/mixins/analytics-mixin.js

@@ -30,6 +30,7 @@ import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper";
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import router from "@/router/index.js";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
+import { Variables } from "../constants/analytics";
 
 export default {
     methods: {
@@ -120,6 +121,10 @@ export default {
             }
         },
 
+        async pushVariableToDataLayer(data) {
+            pushToDataLayerIfDefined(data);
+        },
+
         async pushPageViewToGA() {
             const currentPageName = getPageNameByQueryString();
             const pageViewEvent = {
@@ -770,6 +775,9 @@ export default {
         ValueToLogTypes() {
             return ValueToLogTypes;
         },
+        Variables() {
+            return Variables;
+        },
     },
 };
 

src/store/index.js

@@ -340,6 +340,9 @@ export const mutations = {
     updateIsMSRFeeApplicable(state, isMSRFeeApplicable) {
         state.order.isMSRFeeApplicable = isMSRFeeApplicable;
     },
+    updateCashSubTotal(state, cashSubTotal) {
+        state.order.cashSubTotal = cashSubTotal;
+    },
     updateCCToken(state, ccToken) {
         state.order.payment.ccToken.subscriptionId = ccToken.subscriptionId;
         state.order.payment.ccToken.expMonth = ccToken.expMonth;
@@ -2339,6 +2342,7 @@ export const actions = {
                     lockToken: order.lockToken,
                     isRecalAckOptIn: order.isRecalAckOptIn,
                     isMSRFeeApplicable: order.isMSRFeeApplicable,
+                    cashSubTotal: order.cashSubTotal,
                 },
             },
             logApiCall: true,