Merge pull request #1161 from Safelite/feature/richardson/INSR-7951

updates for mobile first popup

src/constants/experiments.js

@@ -19,9 +19,18 @@ const experimentSettings = Object.freeze({
     ISS_ENABLE_ADYEN_V1: 'ISS_Enable_Adyen_V1'
 });
 
+const experimentTest = Object.freeze({
+    ISS_MOBILE_FIRST_POPUP_V3: 'ISS_Mobile_First_Popup_V3'
+});
+
+const experimentVariation = Object.freeze({
+    ISS_MOBILE_FIRST_CONTROL_V3: 'NoShowMobileFirstPopUp_V3_CONTROL',
+    ISS_MOBILE_FIRST_TEST_V3: 'YesShowMobileFirstPopUp_V3_TEST'
+});
+
 const experimentTriggers = Object.freeze({
     SITE_ENTRY: 'SiteEntry',
     PAGE_ENTRY: 'PageEntry'
 });
 
-export { experimentUniverses, experimentSettings, experimentTriggers };
+export { experimentUniverses, experimentSettings, experimentTest, experimentVariation, experimentTriggers };

src/helpers/service-location-helper.js

@@ -73,6 +73,21 @@ export async function getZipCodeData(zipCode) {
     return await processZipCodeResults(useMainStore().validateZip({ zip: zipCode }));
 }
 
+export function isServiceableMobileWithData(isGlassServiceableMobile, isRecalibrationServiceableMobile) {
+    const isBigTruck = useMainStore().order.serviceLocation.isBigTruck;
+    if (isBigTruck) {
+        return false;
+    }
+
+    if (isRecalibrationServiceableMobile === true || isRecalibrationServiceableMobile === false) {
+        return (
+            isGlassServiceableMobile
+            && isRecalibrationServiceableMobile
+        );
+    }
+    return !!isGlassServiceableMobile;
+}
+
 export function mapTimeSlot(timeSlot, timeOfDay) {
     return {
         ...timeSlot,

src/layouts/schedule-page/schedule-page.vue

@@ -77,7 +77,7 @@ import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import suggestTimeslotModal from '@/layouts/schedule-page/suggest-timeslot-modal/suggest-timeslot-modal.vue';
 
 // Supporting files
-import { experimentSettings, experimentUniverses } from '@/constants/experiments';
+import { experimentSettings, experimentTest, experimentVariation, experimentUniverses } from '@/constants/experiments';
 import {
     AppointmentTypeStrings,
     GET_MOBILE_TIME_SLOTS,
@@ -99,6 +99,7 @@ import {
     getPricedMobileFeePart,
     getMobileZipCodeData,
     getZipCodeData,
+    isServiceableMobileWithData,
     mapTimeSlot
 } from '@/helpers/service-location-helper';
 import { Form } from 'vee-validate';
@@ -337,7 +338,7 @@ export default {
                 mobileProviderNumber: resultMap.providers?.mobileProviderNumber,
                 serviceabilityDetails: resultMap.serviceabilityDetails,
                 zipCode: initialServiceLocationObj.zipCode
-            }
+            };
             
             vm.setCmsContent(resultMap.cmsContent);
             vm.$refs.serviceLocation.initializeComponent(serviceLocationData);
@@ -492,13 +493,18 @@ export default {
             );
         },
         async checkMobileFirstExperience(mobileFirstObject = {}) {
+            const mobileFirstExperimentVariation = this.getExperimentVariationNameByTestName(experimentTest.ISS_MOBILE_FIRST_POPUP_V3);
+            const isMobileFirstTestVariation = mobileFirstExperimentVariation === experimentVariation.ISS_MOBILE_FIRST_TEST_V3;
             const showMobileFirst = this.getSettingValue(experimentSettings.ISS_MOBILE_FIRST_SHOW_FIRST_MOBILE_APPOINTMENT);
             if (showMobileFirst) {
                 const pmMobileDaysLimit = this.getSettingValue(experimentSettings.ISS_MOBILE_FIRST_MAX_PM_MOBILE_DAYS);
                 const mobileDaysLimit = this.getSettingValue(experimentSettings.ISS_MOBILE_FIRST_MAX_MOBILE_DAYS);
                 const hasSelectedDate = !!this.getSelectedDate();
-                const isServicableMobile = mobileFirstObject.serviceabilityDetails?.isGlassServiceableMobile;
-                if (!hasSelectedDate && isServicableMobile && mobileFirstObject.mobileProviderNumber && mobileFirstObject.zipCode) {
+                const isServiceableMobile = isServiceableMobileWithData(
+                    mobileFirstObject.serviceabilityDetails?.isGlassServiceableMobile ?? null,
+                    mobileFirstObject.serviceabilityDetails?.isRecalibrationServiceableMobile ?? null
+                );
+                if (!hasSelectedDate && isServiceableMobile && mobileFirstObject.mobileProviderNumber && mobileFirstObject.zipCode) {
                     const todayDateObject = new Date();
                     const todayDateString = convertDateToDateString(todayDateObject);
                     const calendarViewDirection = 'future';
@@ -624,7 +630,11 @@ export default {
                             this.mainStore.logMobileFirstExperimentExposure();
                         }
 
-                        this.$refs[SUGGEST_TIMESLOT_MODAL_REF_NAME].openModal(timeSlotForAutoSelectionMobile);
+                        if (isMobileFirstTestVariation) {
+                            this.$refs[SUGGEST_TIMESLOT_MODAL_REF_NAME].openModal(timeSlotForAutoSelectionMobile);
+                        } else {
+                            console.log('In Control group or experiment not found, skip showing popup');
+                        }                        
                     }                    
                 }
             }

src/layouts/schedule-page/service-location/service-location.vue

@@ -252,7 +252,7 @@ export default {
                 return false;
             }
 
-            if (this.isRecalibrationServiceableMobile !== null) {
+            if (this.isRecalibrationServiceableMobile === true || this.isRecalibrationServiceableMobile === false) {
                 return (
                     this.isGlassServiceableMobile
                     && this.isRecalibrationServiceableMobile

src/mixins/experiment-mixin.js

@@ -12,6 +12,17 @@ export default {
             const experiment = useMainStore().applicationUser.experiments.find((e) => e.universeName === experimentName);
             return experiment ? experiment : null;
         },
+        getExperimentByTestName(testName) {
+            const experiment = useMainStore().applicationUser.experiments.find((experiment) => experiment.testName === testName);
+            return experiment ? experiment : null;
+        },
+        getExperimentVariationNameByTestName(testName) {
+            const experimentByTestName = this.getExperimentByTestName(testName);
+            if (!experimentByTestName) {
+                return null;
+            }
+            return experimentByTestName.variationName;
+        },
         getSettingValue(settingName) {
             return this.hasSetting(settingName)
                 ? useMainStore().experimentSettings[settingName]

src/store/index.js

@@ -2795,7 +2795,6 @@ export const useMainStore = defineStore({
             );
         },
 
-
         updateContactInfo(contactInfo) {
             this.order.customer.firstName = contactInfo?.firstName ?? this.order.customer.firstName;
             this.order.customer.lastName = contactInfo?.lastName ?? this.order.customer.lastName;
@@ -3087,7 +3086,7 @@ export const useMainStore = defineStore({
             });
             return response.data;
         },
-
+        
         hasSubmittedOrder() {
             return window.sessionStorage.getItem(webStorageConstants.SUBMITTED_ORDER) !== null;
         },