Merge pull request #2392 from Safelite/feature/CASH-462

CASH-462 | Experiment refactor - add submittedState logic

src/constants/session-storage.js

@@ -0,0 +1,3 @@
+export const sessionStorageKeyConstants = {
+    SUBMITTED_STATE: "submittedState",
+};

src/constants/store-actions.js

@@ -109,9 +109,9 @@ const storeActions = {
     SAVE_IS_RECAL_ACK_OPT_IN: "saveIsRecalAckOptIn",
     SAVE_IS_MSR_FEE_APPLICABLE: "saveIsMSRFeeApplicable",
 
-    CREATE_SUBMITTED_ORDER: "createSubmittedOrder",
+    CREATE_SUBMITTED_STATE: "createSubmittedState",
-    RESET_SUBMITTED_ORDER: "resetSubmittedOrder",
+    RESET_SUBMITTED_STATE: "resetSubmittedState",
-    ADD_DONATION_TO_SUBMITTED_ORDER: "addDonationToSubmittedOrder",
+    ADD_DONATION_TO_SUBMITTED_STATE: "addDonationToSubmittedState",
     RESET_EXTERNAL_PARAMETER_STATE: "resetExternalParameterState",
     UPDATE_EXTERNAL_PARAMETER_MMS: "updateExternalParameterMMS",
 

src/helpers/experiment-helper.js

@@ -0,0 +1,20 @@
+export function getExperimentSettingsFromExperimentList(experimentList) {
+    return (
+        experimentList
+            .filter((x) => !!x.isActive)
+            .map((x) => x.settings)
+            .reduce((r, c) => Object.assign(r, c), {}) ?? {}
+    );
+}
+
+export function getSettingValue(settingName, experimentSettings) {
+    return hasSetting(settingName, experimentSettings) ? experimentSettings[settingName] : null;
+}
+
+export function hasSettingEqualTo(settingName, settingValue, experimentSettings) {
+    return experimentSettings[settingName] == settingValue;
+}
+
+export function hasSetting(settingName, experimentSettings) {
+    return Object.hasOwn(experimentSettings, settingName);
+}

src/layouts/confirmation/add-to-calendar/add-to-calendar.vue

@@ -115,7 +115,7 @@ export default {
         },
         ServiceType() {
             const isRepair = this.getSubmittedOrder()?.damage.isRepair;
-            const funnelHasRecalibrationPart = store.getters.isRecalibrationOnSubmittedOrder;
+            const funnelHasRecalibrationPart = store.getters.isRecalibrationOnSubmittedState;
             if (!isRepair) {
                 if (funnelHasRecalibrationPart) {
                     return serviceType.REPLACEMENT_AND_RECALIBRATION;

src/layouts/confirmation/confirmation.vue

@@ -65,7 +65,7 @@
                                 :isNoComp="isNoComp"
                                 :isMSRFeeApplicable="isMSRFeeApplicable" />
 
-                            <div class="mt-3" v-if="DisplayFosterLove">
+                            <div class="mt-3" v-if="shouldDisplayFosterLove">
                                 <donationBlock
                                     cmsWidgetName="DonationWidget"
                                     v-model="donationAmount"
@@ -116,8 +116,6 @@ import { coverageStatus } from "@/constants/insurance";
 import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
 import { experimentSettings } from "@/constants/experiments";
 import experimentMixin from "@/mixins/experiment-mixin.js";
-import { partTypeStrings } from "@/constants/part-type-strings";
-import { containsLineItemWithPartType } from "@/helpers/service-package-helper";
 import { containsRecalParts } from "@/helpers/recal-helper.js";
 import donationBlock from "@/experiment-components/donation-block.vue";
 import { partNumberStrings } from "@/constants/part-number-strings";
@@ -125,7 +123,16 @@ import { partNumberStrings } from "@/constants/part-number-strings";
 export default {
     name: "confirmation",
     async beforeRouteEnter(to, from, next) {
+        // Experiments
         const hasRecalPriceRemoveExperiment = await store.getters.shouldHideRecalibration;
+        let applicationUser = baseMixin.methods.hasSubmittedApplicationUser()
+            ? baseMixin.methods.getSubmittedApplicationUser()
+            : store.getters.applicationUser;
+        let hasFosterLoveExperiment = experimentMixin.methods.hasSettingEqualTo(
+            experimentSettings.FOSTER_LOVE,
+            "true",
+            applicationUser.experiments
+        );
 
         // send part question data to SPS API for logging
         const orderFromStore = await deepClone(store.getters.order);
@@ -164,7 +171,7 @@ export default {
         }
 
         // Create order
-        await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER); // This nulls the Store order
+        await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_STATE); // This nulls the Store order
 
         // Call APIs
         const submittedOrder = baseMixin.methods.getSubmittedOrder();
@@ -213,7 +220,6 @@ export default {
             if (isNoComp || isItac) {
                 return false;
             }
-
             return hasRecalPriceRemoveExperiment && isRecalibrationOnOrder;
         };
 
@@ -229,6 +235,7 @@ export default {
             vm.vaps = availableVaps;
             vm.submittedOrder = submittedOrder;
             vm.shouldHideRecalibration = shouldHideRecalibration();
+            vm.shouldDisplayFosterLove = hasFosterLoveExperiment;
             vm.donationAmount = donationAmount;
         });
     },
@@ -238,28 +245,20 @@ export default {
             vaps: [],
             submittedOrder: null,
             shouldHideRecalibration: null,
+            shouldDisplayFosterLove: null,
             donationAmount: 0,
             showDonationSuccess: null,
             showDonationError: null,
         };
     },
     computed: {
-        DisplayFosterLove() {
-            return experimentMixin.methods.hasSettingEqualTo(
-                experimentSettings.FOSTER_LOVE,
-                "true"
-            );
-        },
         isRecalibrationOnOrder() {
             return containsRecalParts(this?.lineItems);
         },
         ShowCart() {
             if (this.isPia && this.submittedOrder?.settledTenderAmount == 0) {
-                // settleTenderAmount always shows 0 via localhost or dev.
-                // Temporarily set return true to see cart in localhost or dev environment
                 return false;
             }
-
             return true;
         },
         ScheduleConfirmationText() {
@@ -537,7 +536,7 @@ export default {
                 this.showDonationSuccess = true;
                 this.showDonationError = false;
                 await baseMixin.methods.dispatchStoreAction(
-                    storeActions.ADD_DONATION_TO_SUBMITTED_ORDER,
+                    storeActions.ADD_DONATION_TO_SUBMITTED_STATE,
                     parseInt(this.donationAmount),
                     false
                 );

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

@@ -192,7 +192,7 @@ export default {
             }
 
             this.$refs.loadingModal.isModalVisible = false;
-            await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER);
+            await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_STATE);
             this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
         },
     },

src/layouts/payment/payment.vue

@@ -683,7 +683,7 @@ export default {
                     submitAfterSave: true,
                 });
 
-                await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER);
+                await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_STATE);
                 window.location = applicationConfig.CONFIRMATION_URL;
             } catch (error) {
                 console.log("error: response from submit work order(payment pg):" + error.message);

src/layouts/schedule/schedule.spec.js

@@ -7,7 +7,6 @@ import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import store from "@/store";
 import router from "@/router";
 import baseMixin from "../../mixins/base-mixin";
-import { experimentSettings } from "../../constants/experiments";
 
 // Mock basemixin
 jest.mock("@/mixins/base-mixin.js", () => ({
@@ -147,6 +146,9 @@ beforeEach(() => {
     jest.restoreAllMocks();
     jest.clearAllMocks();
     store.getters = {
+        applicationUser: {
+            experiments: [],
+        },
         order: {
             schedule: {
                 date: "2019-01-01",

src/layouts/service-location/service-location.spec.js

@@ -174,6 +174,7 @@ const mockMixin = {
 
 beforeEach(() => {
     store.getters = {
+        applicationUser: { experiments: [] },
         lineItems: {
             supportingItems: [
                 {

src/layouts/service-zip/service-zip.spec.js

@@ -173,9 +173,14 @@ function resetMockStoreData() {
     };
 }
 
+const applicationUser = {
+    experiments: [],
+};
+
 function applyMockStoreDataToGetters() {
     store.getters = {
         experimentSettings: mockExperimentSettings,
+        applicationUser: applicationUser,
         order: mockStoreData,
         damage: mockStoreData.damage,
         payment: mockStoreData.payment,

src/layouts/vehicle/vehicle.vue

@@ -448,7 +448,7 @@ export default {
             this.displayNoServiceAlert = false;
         },
         async forwardButtonAction() {
-            await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_ORDER);
+            await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_STATE);
             this.dispatchStoreAction(
                 storeActions.SAVE_VEHICLE,
                 {

src/mixins/analytics-mixin.js

@@ -337,7 +337,7 @@ export default {
 
             // Recalibration
             if (hasSubmittedOrder) {
-                payload.isRecalibrationOnOrder = store.getters.isRecalibrationOnSubmittedOrder;
+                payload.isRecalibrationOnOrder = store.getters.isRecalibrationOnSubmittedState;
             } else {
                 payload.isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
             }

src/mixins/analytics-mixin.spec.js

@@ -425,7 +425,7 @@ describe("analyticsMixin.js", () => {
                 workOrderId: "222222222222",
             };
             store.getters.isRecalibrationOnOrder = true;
-            store.getters.isRecalibrationOnSubmittedOrder = false;
+            store.getters.isRecalibrationOnSubmittedState = false;
         });
 
         test("Pushes to data layer if nominal", () => {

src/mixins/base-mixin.js

@@ -1,6 +1,7 @@
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions.js";
 import { storeMutations } from "@/constants/store-mutations.js";
+import { sessionStorageKeyConstants } from "@/constants/session-storage.js";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import { vehicleCategories } from "@/constants/vehicle-categories.js";
 import { routerParams } from "@/router/router-constants/router-params";
@@ -198,10 +199,26 @@ export default {
             }
         },
         getSubmittedOrder() {
-            return JSON.parse(window.sessionStorage.getItem("submittedOrder"));
+            return JSON.parse(
+                window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE)
+            )?.order;
         },
         hasSubmittedOrder() {
-            return window.sessionStorage.getItem("submittedOrder") !== null;
+            const submittedState = window.sessionStorage.getItem(
+                sessionStorageKeyConstants.SUBMITTED_STATE
+            );
+            return submittedState !== null && submittedState.order !== null;
+        },
+        getSubmittedApplicationUser() {
+            return JSON.parse(
+                window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE)
+            )?.applicationUser;
+        },
+        hasSubmittedApplicationUser() {
+            const submittedState = window.sessionStorage.getItem(
+                sessionStorageKeyConstants.SUBMITTED_STATE
+            );
+            return submittedState !== null && submittedState.applicationUser !== null;
         },
     },
     computed: {

src/mixins/experiment-mixin.js

@@ -1,17 +1,36 @@
 import store from "@/store";
+import * as experimentHelper from "../helpers/experiment-helper";
+
+/*
+    This is a wrapper around experiment-helper.js methods that allows an override
+      to provide a custom list of experiments. At the time of implementation this
+      was necessary for checking submittedState for experiments
+*/
 
 export default {
     methods: {
-        hasSettingEqualTo(settingName, settingValue) {
+        hasSettingEqualTo(
-            return store.getters.experimentSettings[settingName] == settingValue;
+            settingName,
+            settingValue,
+            experimentList = store.getters.applicationUser.experiments
+        ) {
+            const experimentSettings =
+                experimentHelper.getExperimentSettingsFromExperimentList(experimentList);
+            return experimentHelper.hasSettingEqualTo(
+                settingName,
+                settingValue,
+                experimentSettings
+            );
         },
-        hasSetting(settingName) {
+        hasSetting(settingName, experimentList = store.getters.applicationUser.experiments) {
-            return Object.hasOwn(store.getters.experimentSettings, settingName);
+            const experimentSettings =
+                experimentHelper.getExperimentSettingsFromExperimentList(experimentList);
+            return experimentHelper.hasSetting(settingName, experimentSettings);
         },
-        getSettingValue(settingName) {
+        getSettingValue(settingName, experimentList = store.getters.applicationUser.experiments) {
-            return this.hasSetting(settingName)
+            const experimentSettings =
-                ? store.getters.experimentSettings[settingName]
+                experimentHelper.getExperimentSettingsFromExperimentList(experimentList);
-                : null;
+            return experimentHelper.getSettingValue(settingName, experimentSettings);
         },
     },
 };

src/mixins/experiment-mixin.spec.js

@@ -135,6 +135,15 @@ function setupMocks({ experimentSettings }) {
 
     store.getters = {
         experimentSettings: experimentSettings ?? testExperimentSettings,
+        applicationUser: {
+            experiments: [
+                {
+                    isActive: true,
+                    isExposed: true,
+                    settings: experimentSettings ?? testExperimentSettings,
+                },
+            ],
+        },
     };
 
     const mockComponent = {

src/router/index.js

@@ -2,6 +2,7 @@
 import { createWebHistory, createRouter } from "vue-router";
 import { storeActions } from "@/constants/store-actions";
 import { storeMutations } from "../constants/store-mutations";
+import { sessionStorageKeyConstants } from "@/constants/session-storage.js";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
 import { routingTable } from "@/router/router-constants/routing-table.js";
 import { globalEvents, globalEventTypes } from "@/constants/events";
@@ -93,10 +94,15 @@ const routes = [
                 log(" --to.query.fmgPage ", to.query?.fmgPage);
 
                 // Intercept all navigation if a submitted order exists in storage
-                if (window.sessionStorage.getItem("submittedOrder") !== null) {
+                if (
+                    window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !==
+                    null
+                ) {
                     if (to.query.fmgPage !== funnelStartPageName) {
                         to.query.fmgPage = fmgPageValues.CONFIRMATION;
-                        log(" --has submittedOrder go to confirmation");
+                        log(
+                            ` --has ${sessionStorageKeyConstants.SUBMITTED_STATE} go to confirmation`
+                        );
                     }
                 }
                 // On entering the funnel "fresh", read cookie information, decide what to do next.

src/store/index.js

@@ -1,6 +1,7 @@
 import { createStore } from "vuex";
 import { endpoints } from "@/constants/endpoints.js";
 import { storeMutations } from "@/constants/store-mutations";
+import { sessionStorageKeyConstants } from "@/constants/session-storage.js";
 import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/session-helper";
 import createPersistedState from "vuex-persistedstate";
 import globalMethods from "@/global-methods";
@@ -20,6 +21,10 @@ import {
 } from "@/constants/schedule-constants";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
 import { deepClone } from "@/helpers/object-helper";
+import {
+    getExperimentSettingsFromExperimentList,
+    hasSettingEqualTo,
+} from "../helpers/experiment-helper";
 import { queryStrings } from "@/constants/query-strings";
 import { partTypeStrings } from "@/constants/part-type-strings";
 import {
@@ -822,8 +827,10 @@ export const getters = {
     },
     coverageIsVerified: (state) => {
         let order;
-        if (window.sessionStorage.getItem("submittedOrder") !== null) {
+        if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
-            order = JSON.parse(window.sessionStorage.getItem("submittedOrder"));
+            order = JSON.parse(
+                window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE)
+            ).order;
         } else {
             order = state.order;
         }
@@ -850,31 +857,34 @@ export const getters = {
     isRecalibrationOnOrder: (state) => {
         return getHasRecalibrationPart(state);
     },
-    isRecalibrationOnSubmittedOrder: (state) => {
+    isRecalibrationOnSubmittedState: (state) => {
-        if (window.sessionStorage.getItem("submittedOrder") !== null) {
+        if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
             return getHasRecalibrationPart({
-                order: JSON.parse(window.sessionStorage.getItem("submittedOrder")),
+                order: JSON.parse(
+                    window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE)
+                ).order,
             });
         }
-
         return false;
     },
     shouldHideRecalibration: (state) => {
-        var order;
+        if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
-        if (window.sessionStorage.getItem("submittedOrder") !== null) {
+            state = JSON.parse(
-            order = JSON.parse(window.sessionStorage.getItem("submittedOrder"));
+                window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE)
-        } else {
+            );
-            order = state.order;
         }
-
+        let order = state.order;
+        let applicationUser = state.applicationUser;
         if (order.payment.isInsurance) {
             return false;
         }
 
         return (
-            experimentMixin.methods
+            hasSettingEqualTo(
-                .getSettingValue(experimentSettings.RECAL_PRICE_REMOVE)
+                experimentSettings.RECAL_PRICE_REMOVE,
-                ?.toLowerCase() === "true" && getters.isRecalibrationOnOrder(state)
+                "true",
+                getExperimentSettingsFromExperimentList(applicationUser.experiments)
+            ) && getters.isRecalibrationOnOrder(state)
         );
     },
     areRearWipersOnOrder: (state) => {
@@ -974,10 +984,7 @@ export const getters = {
         };
     },
     experimentSettings: (state) =>
-        state.applicationUser.experiments
+        getExperimentSettingsFromExperimentList(state.applicationUser.experiments),
-            .filter((x) => !!x.isActive)
-            .map((x) => x.settings)
-            .reduce((r, c) => Object.assign(r, c), {}) ?? {},
 
     isVerifiedAndDeductibleZeroConfirmed: (state) => {
         // used in CMS on /payment-method in Header Sub Text, for FunnelSubHeaderWidget on cart pages
@@ -3257,19 +3264,25 @@ export const actions = {
         return false;
     },
 
-    createSubmittedOrder(context) {
+    createSubmittedState(context) {
-        if (window.sessionStorage.getItem("submittedOrder") !== null) {
+        if (window.sessionStorage.getItem(sessionStorageKeyConstants.SUBMITTED_STATE) !== null) {
             return;
         }
 
         // create a submitted order object from vuex.
-        const submittedOrder = context.state.order;
+        const submittedState = {
+            order: context.state.order,
+            applicationUser: context.state.applicationUser,
+        };
 
         const experiments = context.state.applicationUser.experiments;
         const affiliateCookies = context.state.applicationUser.affiliateCookies;
 
         // set to local storage
-        window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder));
+        window.sessionStorage.setItem(
+            sessionStorageKeyConstants.SUBMITTED_STATE,
+            JSON.stringify(submittedState)
+        );
         window.sessionStorage.setItem("createNewSessionForHeritage", true);
 
         // clear vuex
@@ -3288,10 +3301,11 @@ export const actions = {
         context.commit(storeMutations.UPDATE_AFFILIATE_COOKIES, affiliateCookies);
     },
 
-    addDonationToSubmittedOrder(context, donationAmount) {
+    addDonationToSubmittedState(context, donationAmount) {
         console.log("running addDonationToSubmittedOrder()... donationAmount: ", donationAmount);
 
         const submittedOrder = deepClone(baseMixin.methods.getSubmittedOrder());
+        const submittedApplicationUser = deepClone(baseMixin.methods.getSubmittedApplicationUser());
 
         if (donationAmount > 0) {
             console.log(
@@ -3320,13 +3334,21 @@ export const actions = {
             });
             submittedOrder.lineItems.supportingItems = nonDonationItems;
         }
+
+        const submittedState = {
+            order: submittedOrder,
+            applicationUser: submittedApplicationUser,
+        };
         // set to local storage
-        window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder));
+        window.sessionStorage.setItem(
+            sessionStorageKeyConstants.SUBMITTED_STATE,
+            JSON.stringify(submittedState)
+        );
     },
 
-    resetSubmittedOrder(context) {
+    resetSubmittedState(context) {
         // clear from local storage
-        window.sessionStorage.removeItem("submittedOrder");
+        window.sessionStorage.removeItem(sessionStorageKeyConstants.SUBMITTED_STATE);
     },
     resetExternalParameterState(context) {
         if (context.getters.isExternalParameter) {