Merge pull request #1236 from Safelite/feature/jzimmerman/INSR-9782

INSR-9782: Refactored front end entry-page loading and session initialization.

src/layouts/entry-page/entry-page.vue

@@ -15,6 +15,7 @@ import { useMainStore } from '@/store';
 import showIssLoadingModal from '@/helpers/loading-modal-helper';
 import applicationConfig from '@/constants/application-config';
 import { toPossessive } from '@/helpers/text-helper';
+import analyticsMixin from '@/mixins/analytics-mixin';
 
 export default {
     name: 'entry-page',
@@ -36,7 +37,6 @@ export default {
     async mounted() {
         try {
             const queryStringParams = this.parseQueryParms();
-
             const { isAuthorized, clientData, decryptedParams } = await this.validateClientTagOnEntry(queryStringParams);
 
             this.unauthorized = !isAuthorized;
@@ -46,7 +46,11 @@ export default {
                 return;
             }
 
+            // Populate all the ISS Config values from the service call returns.
             this.populateISSConfigValues(clientData);
+            
+            // Session should only be created / validated on successful client tag validation to avoid unnecessary sessions for unauthorized users.
+            await analyticsMixin.methods.validateSession();
 
             try {
                 // Check cookie
@@ -143,7 +147,7 @@ export default {
                         isAuthorized = true;
                     }
 
-                    if (isAuthorized) {
+                    if (isAuthorized) {                         
                         clientData = resp;
                     }
                 }

src/mixins/analytics-mixin.js

@@ -558,9 +558,9 @@ export default {
             const clientTag = store.issConfig.clientTag;
             const siteType = store.issConfig.siteType;
 
-
             const payload = {
                 clientTag,
+                siteType: siteType,
                 deviceId,
                 referrer,
                 sessionId: sid,

src/router/index.js

@@ -35,30 +35,6 @@ const routes = [
                 return await GoToAccessIsDenied(next);
             }
 
-            // This is a quick fix for a prod issue.... better fix will come later.
-            // This and experiment call for entry-page probably need to be called directly in the mounted
-            // secion of the entry-page. Can be here for every other page.
-            if (issPageToUse === issPageValues.ENTRY_PAGE )
-            {
-                const store = useMainStore();
-                const queryStringParams = parseQueryParms(to.query);
-
-                if (queryStringParams.clienttag) {
-                    store.issConfig.clientTag = queryStringParams.clienttag;
-                }
-            }
-
-            await analyticsMixin.methods.validateSession();
-
-            // Do not run these for the main entry page - as it is not part of the user flow.
-            if (issPageToUse !== issPageValues.ENTRY_PAGE && issPageToUse !== issPageValues.BAILOUT_PAGE) {
-                try {
-                    await runExperiments(issPageToUse);
-                } catch (error) {
-                    console.error('Failed to run experiments during route navigation.', error);
-                }
-            }
-
             // Intercept all navigation if a submitted order exists in storage
             if (useMainStore().hasSubmittedOrder()) {
                 if (to.query.issPage !== issPageValues.ENTRY_PAGE) {
@@ -97,15 +73,36 @@ const routes = [
 
             var routeData = [];
 
-            try {
+            // Only load the routes if we are not on entry-page (this page is the default route and should always be valid)
-                routeData = await GetRouteInfoFromPageName(issPageToUse);
+            // or the access-denied page (which is an error page)
-            }
+            const shouldGetRouteInfo = (issPageToUse !== issPageValues.ENTRY_PAGE && issPageToUse !== issPageValues.ACCESS_DENIED);
-            catch ( error ) {
-                window.top.location = '/static/error/index.html';
-            }
 
-            if (routeData[0].name.toLowerCase() === 'error') {
+            if (shouldGetRouteInfo) {
-                throw new Error('Page not found!');
+                try {
+                    routeData = await GetRouteInfoFromPageName(issPageToUse);
+                }
+                catch ( error ) {
+                    window.top.location = '/static/error/index.html';
+                    return null;
+                }
+
+                if (routeData[0].name.toLowerCase() === 'error') {
+                    throw new Error('Page not found!');
+                }
+            }
+            else {
+                try {
+                    // Manually create the page route.
+                    routeData.push({
+                        path: '/',
+                        name: issPageToUse,
+                        component: lazyLoadComponent(issPageToUse)
+                    });
+                }
+                catch ( error ) {
+                    window.top.location = '/static/error/index.html';
+                    return null;
+                }
             }
 
             // Add our dynamic route.
@@ -190,14 +187,32 @@ router.afterEach(async (to, from) => {
         store.clearSaveSessionPromise();
     }
 
-    const skipSaveSession = !!router.options.history.state[routerParams.SKIP_SAVE_SESSION];
+    // Do not run base page logic (GA logging, session logging etc..) on the entry page or access denied page.
-    if (from.name !== undefined && !skipSaveSession && !store.hasSubmittedOrder()) {
+    const shouldRunPageLogic = (to.query.issPage !== issPageValues.ENTRY_PAGE && to.query.issPage !== issPageValues.ACCESS_DENIED);
-        await saveSession({ bailoutOnError: from.name === issPageValues.ENTRY_PAGE});
+
-    }
+    if (shouldRunPageLogic) {
+        // Do not run experiments for the bailout page.
+        const shouldRunExperiments = (to.query.issPage !== issPageValues.BAILOUT_PAGE);
+
+        await analyticsMixin.methods.validateSession();
+        
+        const skipSaveSession = !!router.options.history.state[routerParams.SKIP_SAVE_SESSION];
+        if (from.name !== undefined && !skipSaveSession && !store.hasSubmittedOrder()) {
+            await saveSession({ bailoutOnError: from.name === issPageValues.ENTRY_PAGE});
+        }
 
-    if (to.query.issPage !== issPageValues.ENTRY_PAGE) {
         document.title = routerTitles[to.query.issPage] || 'Safelite Solutions®';
 
+        if (shouldRunExperiments) {
+            try {
+                // Run experiments for page.
+                await runExperiments(to.query.issPage);
+
+            } catch (error) {
+                console.error('Failed to run experiments during route navigation.', error);
+            }
+        }
+
         // digital consumer logging
         analyticsMixin.methods.logDigitalConsumer();
 

src/store/index.js

@@ -2635,10 +2635,10 @@ export const useMainStore = defineStore({
             this.logExperimentIfExists(issPage, experimentUniverses.ISS_FEATURETOGGLE_AREFEES_OVERRIDDEN);
         },
         async initializeSession({ userId, clientTag, siteType, sessionId, userAgent, referrer }) {
-            //TODO: Add SubType passing ... that is also missing.
             const payload = {
                 applicationName: applicationConfig.APPLICATION_NAME,
-                clientTag: clientTag,                
+                clientTag: clientTag,
+                subType: siteType,
                 userId,
                 deviceId: userId,
                 sessionId,
@@ -2946,7 +2946,9 @@ export const useMainStore = defineStore({
         async validateClientTag(clientTag) {
             return globalMethods.callHttpClient({
                 method: endpoints.ValidateClientTag.method,
-                endpoint: `${endpoints.ValidateClientTag.url}/${clientTag}`
+                endpoint: `${endpoints.ValidateClientTag.url}/${clientTag}`,
+                logApiCall: false,
+                bailoutOnError: false
             });
         },
 
@@ -2960,7 +2962,9 @@ export const useMainStore = defineStore({
             return await globalMethods.callHttpClient({
                 method: endpoints.ValidateClientSignature.method,
                 endpoint: endpoints.ValidateClientSignature.url,
-                payload
+                payload,
+                logApiCall: false,
+                bailoutOnError: false
             });
         },