CSR-2193 submittedOrder issue

CSR-2193 the getter in the vuex store does not seem to return the submittedOrder data.  Possibly related to caching due to the recent upgrade to vuex.  Not 100% certain.  So just moved the submittedOrder logic out of the store and into the basemix.

src/constants/query-strings.js

@@ -36,6 +36,7 @@ const queryStrings = {
     VIN_SELECTION: "vinselection",
     SERVICE_PACKAGE: "servicepackage",
     NUMBER_OF_CHIPS: "numberofchips",
+    LOG: "log",
 };
 
 export { queryStrings };

src/helpers/date-helper.js

@@ -8,6 +8,10 @@ export function getDateDifferenceInDays(startDate, endDate) {
     return Math.round(difference / (1000 * 3600 * 24));
 }
 export function get12HourTimeFormat(time) {
+    if (!time) {
+        return null;
+    }
+    
     // Check correct time format and split into components
     time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)?$/) || [time];
 
@@ -20,8 +24,12 @@ export function get12HourTimeFormat(time) {
     return time.join(""); // return adjusted time or original string
 }
 export function get12HourTimeMobileFormat(time) {
+    if (!time) {
+        return null;
+    }
+
     // Check correct time format and split into components
-    time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)?$/) || [time];
+    time = time?.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)?$/) || [time];
 
     if (time.length > 1) {
         // If time format correct

src/helpers/heritage-integration/navigation-helper.js

@@ -107,8 +107,12 @@ export async function getImplicitNavigation(toRoute) {
 */
 
 export async function navigateToHeritageFunnel({ shouldSaveSession, pageNameToLog }) {
-    console.log(new Date() + " navigateToHeritageFunnel: " + JSON.stringify(applicationConfig));
+    const log = getQuerystringParameter(queryStrings.LOG);
-    console.log(new Date() + " navigateToHeritageFunnel: " + applicationConfig.HERITAGE_FUNNEL);
+    if (eval(log)) {
+        console.log(new Date() + " applicationConfig: " + JSON.stringify(applicationConfig));
+        console.log(new Date() + " navigateToHeritageFunnel: " + applicationConfig.HERITAGE_FUNNEL);
+    }
+
     // Create the order (or save existing order) when navigating to Heritage Funnel.
     if (shouldSaveSession) {
         await saveSession({ pageNameToLog: pageNameToLog, shouldAwaitSaveSessionQueue: true });

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

@@ -34,11 +34,16 @@ import {
 import store from "@/store";
 import { serviceType } from "@/constants/service-type";
 import { applicationConfig } from "@/constants/application-config.js";
+import baseMixin from "@/mixins/base-mixin.js";
+
 export default {
     name: "add-to-calendar",
     components: {
         calendarModalQuestion,
     },
+    mounted() {
+        this.submittedOrder = baseMixin.methods.getSubmittedOrder();
+    },
     props: {
         mobileWidgetName: String,
         inShopWidgetName: String,
@@ -56,6 +61,7 @@ export default {
     data() {
         return {
             selectedCalendarOption: null,
+            submittedOrder: null,
         };
     },
     computed: {
@@ -110,10 +116,10 @@ export default {
             return this.getCmsContent(this.sameDayDropOffWidgetName, "BodyText");
         },
         UniqueId() {
-            return store.getters.submittedOrder.referralNumber?.toString();
+            return this.submittedOrder?.referralNumber?.toString();
         },
         ServiceType() {
-            const isRepair = store.getters.submittedOrder.damage.isRepair;
+            const isRepair = this.submittedOrder?.damage.isRepair;
             const funnelHasRecalibrationPart = store.getters.isRecalibrationOnSubmittedOrder;
             if (!isRepair) {
                 if (funnelHasRecalibrationPart) {
@@ -125,7 +131,7 @@ export default {
             return serviceType.REPAIR;
         },
         RouteCode() {
-            return store.getters.submittedOrder.schedule.routeCode;
+            return this.submittedOrder?.schedule.routeCode;
         },
         Appointment() {
             var subject = "";

src/layouts/confirmation/confirmation.vue

@@ -114,11 +114,13 @@ export default {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
+        var submittedOrder = baseMixin.methods.getSubmittedOrder();
+
         const wipersPromise = baseMixin.methods.dispatchStoreActionWithLogging(
             storeActions.GET_WIPERS,
             {
-                serviceZipCode: store.getters.submittedOrder.serviceLocation.zipCode,
+                serviceZipCode: submittedOrder.serviceLocation.zipCode,
-                carId: store.getters.submittedOrder.vehicle.carId,
+                carId: submittedOrder.vehicle.carId,
             },
             "confirmation"
         );
@@ -147,24 +149,26 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
         const availableVaps = [resultMap.rainDefense, ...resultMap.wipers];
-        const lineItemsFromSubmittedOrder = deepClone(store.getters.submittedOrder.lineItems);
+        const lineItemsFromSubmittedOrder = deepClone(submittedOrder.lineItems);
 
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.lineItems = lineItemsFromSubmittedOrder;
             vm.vaps = availableVaps;
+            vm.submittedOrder = submittedOrder;
         });
     },
     data() {
         return {
             lineItems: [],
             vaps: [],
+            submittedOrder: null,
         };
     },
     computed: {
         ShowCart() {
-            if (this.isPia && store.getters.submittedOrder.settledTenderAmount == 0) {
+            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;
@@ -179,7 +183,7 @@ export default {
             return this.getCmsContent("ScheduleConfirmationWidget", "Image");
         },
         CustomerPortalLoginToken() {
-            return store.getters.submittedOrder.customerPortalLoginToken;
+            return this.submittedOrder?.customerPortalLoginToken;
         },
         ConfirmationEmailText() {
             return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
@@ -189,16 +193,16 @@ export default {
                 ?.replaceAll(">", ">");
         },
         ScheduleDate() {
-            return store.getters.submittedOrder.schedule.date;
+            return this.submittedOrder?.schedule.date;
         },
         AppointmentType() {
-            return store.getters.submittedOrder.serviceLocation.appointmentType;
+            return this.submittedOrder?.serviceLocation.appointmentType;
         },
         ScheduleStartTime() {
-            return store.getters.submittedOrder.schedule.startTime;
+            return this.submittedOrder?.schedule.startTime;
         },
         ScheduleEndTime() {
-            return store.getters.submittedOrder.schedule.endTime;
+            return this.submittedOrder?.schedule.endTime;
         },
         InShopWordingText() {
             return this.getCmsContent("InShopWordingWidget", "BodyText");
@@ -210,31 +214,31 @@ export default {
             return this.getCmsContent("DropOffWordingWidget", "BodyText");
         },
         ServiceLocationAddress() {
-            return store.getters.submittedOrder.serviceLocation.address;
+            return this.submittedOrder?.serviceLocation.address;
         },
         ServiceLocationAddress2() {
-            return store.getters.submittedOrder.serviceLocation.address2;
+            return this.submittedOrder?.serviceLocation.address2;
         },
         ServiceLocationCity() {
-            return store.getters.submittedOrder.serviceLocation.city;
+            return this.submittedOrder?.serviceLocation.city;
         },
         ServiceLocationState() {
-            return store.getters.submittedOrder.serviceLocation.state;
+            return this.submittedOrder?.serviceLocation.state;
         },
         ServiceLocationZipCode() {
-            return store.getters.submittedOrder.serviceLocation.zipCode;
+            return this.submittedOrder?.serviceLocation.zipCode;
         },
         ProviderAddress() {
-            return store.getters.submittedOrder.serviceLocation.provider.address.streetAddress;
+            return this.submittedOrder?.serviceLocation.provider.address.streetAddress;
         },
         ProviderCity() {
-            return store.getters.submittedOrder.serviceLocation.provider.address.city;
+            return this.submittedOrder?.serviceLocation.provider.address.city;
         },
         ProviderState() {
-            return store.getters.submittedOrder.serviceLocation.provider.address.state;
+            return this.submittedOrder?.serviceLocation.provider.address.state;
         },
         ProviderZipCode() {
-            return store.getters.submittedOrder.serviceLocation.provider.address.zipCode;
+            return this.submittedOrder?.serviceLocation.provider.address.zipCode;
         },
         AppointmentWordingText() {
             if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
@@ -268,7 +272,7 @@ export default {
             // This conversion ensures we don't get get GMT induced date changes
             const dateObject = convertDateStringToDate(this.ScheduleDate);
             // Ex: Tuesday, April 22
-            return dateObject.toLocaleDateString("en-us", {
+            return dateObject?.toLocaleDateString("en-us", {
                 weekday: "long",
                 month: "long",
                 day: "numeric",
@@ -286,19 +290,19 @@ export default {
             }
         },
         vehicleBannerImageUrl() {
-            return store.getters.submittedOrder?.vehicle.imageUrl;
+            return this.submittedOrder?.vehicle.imageUrl;
         },
         damageInfo() {
-            return store.getters.submittedOrder.damage;
+            return this.submittedOrder?.damage;
         },
         isInsurance() {
-            return store.getters.submittedOrder.payment.isInsurance;
+            return this.submittedOrder?.payment.isInsurance;
         },
         isNoComp() {
-            return store.getters.submittedOrder.policy.isNoComp;
+            return this.submittedOrder?.policy.isNoComp;
         },
         isItac() {
-            return store.getters.submittedOrder.policy.isItac;
+            return this.submittedOrder?.policy.isItac;
         },
         hasVapsInCart() {
             if (this.lineItems?.vaps?.length > 0) {
@@ -311,30 +315,30 @@ export default {
             if (this.isNoComp || this.isItac) {
                 return coverageStatus.NOCOMP;
             } else {
-                return store.getters.submittedOrder.payment.insuranceCoverage.coverageStatus;
+                return this.submittedOrder?.payment.insuranceCoverage.coverageStatus;
             }
         },
         currentDeductible() {
-            return store.getters.submittedOrder.policy.currentDeductible;
+            return this.submittedOrder?.policy.currentDeductible;
         },
         insuranceCompanyName() {
-            return store.getters.submittedOrder.policy.insuranceCompanyName;
+            return this.submittedOrder?.policy.insuranceCompanyName;
         },
         isPia() {
-            return store.getters.submittedOrder?.payment.isPia;
+            return this.submittedOrder?.payment.isPia;
         },
         AppointmentDuration() {
-            const durationMaximum = store.getters.submittedOrder?.schedule?.jobMaxMinutes;
+            const durationMaximum = this.submittedOrder?.schedule?.jobMaxMinutes;
-            const durationMinimum = store.getters.submittedOrder?.schedule?.jobMinMinutes;
+            const durationMinimum = this.submittedOrder?.schedule?.jobMinMinutes;
             const durationLengthString = "Duration: ";
             if (
-                store.getters.submittedOrder?.schedule?.routeCode.includes(
+                this.submittedOrder?.schedule?.routeCode.includes(
                     RouteCodeFlags.ALL_DAY_DROP_OFF
                 )
             ) {
                 return durationLengthString.concat("All Day");
             } else if (
-                store.getters.submittedOrder?.schedule?.routeCode.includes(
+                this.submittedOrder?.schedule?.routeCode.includes(
                     RouteCodeFlags.OVERNIGHT_DROP_OFF
                 )
             ) {
@@ -348,7 +352,7 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
-            if (store.getters.hasSubmittedOrder) {
+            if (baseMixin.methods.hasSubmittedOrder()) {
                 return true;
             }
 

src/layouts/payment-method/payment-method.vue

@@ -305,6 +305,8 @@ export default {
         lineItems.vaps = lineItems.vaps ?? [];
         lineItems.vaps.push(...vapsToAddToCart);
 
+        var submittedOrder = baseMixin.methods.getSubmittedOrder();
+
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
@@ -337,6 +339,8 @@ export default {
                     validateAlerts[0].shouldAutoFade
                 );
             }
+
+            vm.submittedOrder = submittedOrder;
         });
     },
     data() {
@@ -347,6 +351,7 @@ export default {
             inactivePromos: this.getInactivePromosFromStore(),
             isRecalAckOptIn: this.getIsRecalAckOptInFromStore(),
             forwardClicked: false, // this prevents the pia disclaimer from showing when switching to insurance and nav forward
+            submittedOrder: null,
         };
     },
     methods: {
@@ -565,7 +570,7 @@ export default {
             );
         },
         hasSubmittedOrder() {
-            return this.$store.getters.hasSubmittedOrder;
+            return baseMixin.methods.hasSubmittedOrder();
         },
         openModal(modalName) {
             this.$refs[modalName].openModal();
@@ -590,17 +595,17 @@ export default {
         },
         isInsurance() {
             return this.hasSubmittedOrder()
-                ? this.$store.getters.submittedOrder.payment.isInsurance
+                ? this.submittedOrder?.payment.isInsurance
                 : this.$store.getters.payment.isInsurance;
         },
         isNoComp() {
             return this.hasSubmittedOrder()
-                ? this.$store.getters.submittedOrder.policy.isNoComp
+                ? this.submittedOrder?.policy.isNoComp
                 : this.$store.getters.policy.isNoComp;
         },
         isItac() {
             return this.hasSubmittedOrder()
-                ? this.$store.getters.submittedOrder.policy.isItac
+                ? this.submittedOrder?.policy.isItac
                 : this.$store.getters.policy.isItac;
         },
         hasVapsInCart() {
@@ -615,13 +620,13 @@ export default {
                 return coverageStatus.NOCOMP;
             } else {
                 return this.hasSubmittedOrder()
-                    ? this.$store.getters.submittedOrder.payment.insuranceCoverage.coverageStatus
+                    ? this.submittedOrder?.payment.insuranceCoverage.coverageStatus
                     : this.$store.getters.payment.insuranceCoverage.coverageStatus;
             }
         },
         currentDeductible() {
             return this.hasSubmittedOrder()
-                ? this.$store.getters.submittedOrder.policy.currentDeductible
+                ? this.submittedOrder?.policy.currentDeductible
                 : this.$store.getters.policy.currentDeductible;
         },
         insuranceCompanyName() {

src/mixins/analytics-mixin.js

@@ -37,9 +37,11 @@ export default {
             const currentPageName = getPageNameByQueryString();
             await this.validateSession();
 
+            var submittedOrder = baseMixin.methods.getSubmittedOrder();
+
             const refSequenceNum =
                 store.getters.order.referralSequenceNumber ||
-                store.getters.submittedOrder?.referralSequenceNumber;
+                submittedOrder?.referralSequenceNumber;
 
             var payload = {
                 userId: getUserIdValue(),
@@ -125,8 +127,9 @@ export default {
             const isDefined = (x) => x !== null && x !== undefined;
 
             // Get correct order object
-            const hasSubmittedOrder = store.getters.hasSubmittedOrder;
+            const hasSubmittedOrder = baseMixin.methods.hasSubmittedOrder();
-            const order = hasSubmittedOrder ? store.getters.submittedOrder : store.getters.order;
+            var submittedOrder = baseMixin.methods.getSubmittedOrder();
+            const order = hasSubmittedOrder ? submittedOrder : store.getters.order;
 
             // Begin assembling payload for data layer
             const payload = {};

src/mixins/base-mixin.js

@@ -160,8 +160,8 @@ export default {
                 );
             }
 
-            const order = store.getters.hasSubmittedOrder
+            const order = this.hasSubmittedOrder()
-                ? store.getters.submittedOrder
+                ? this.getSubmittedOrder()
                 : store.getters.order;
 
             if (
@@ -218,6 +218,12 @@ export default {
                 return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
             }
         },
+        getSubmittedOrder() {
+            return JSON.parse(window.sessionStorage.getItem("submittedOrder"));
+        },
+        hasSubmittedOrder() { 
+            return window.sessionStorage.getItem("submittedOrder") !== null;
+        },
     },
     computed: {
         storeActions() {

src/router/index.js

@@ -63,7 +63,7 @@ const routes = [
                 }
 
                 // Intercept all navigation if a submitted order exists in storage
-                if (store.getters.hasSubmittedOrder) {
+                if (window.sessionStorage.getItem("submittedOrder") !== null) {
                     if (to.query.fmgPage !== funnelStartPageName) {
                         to.query.fmgPage = fmgPageValues.CONFIRMATION;
                     }
@@ -406,6 +406,7 @@ async function navigate(
         const zip = getQuerystringParameter(queryStrings.ZIP_CODE);
         const promo = getQuerystringParameter(queryStrings.PROMO);
         const pageError = getQuerystringParameter(queryStrings.PAGE_ERROR);
+        const log = getQuerystringParameter(queryStrings.LOG);
 
         if (
             hasZip &&
@@ -425,6 +426,10 @@ async function navigate(
             queryStringsObject[queryStrings.PAGE_ERROR] = pageError;
         }
 
+        if (log) {
+            queryStringsObject[queryStrings.LOG] = log;
+        }
+
         router.push({
             name: "root",
             query: Object.assign(optionalQuery, queryStringsObject),

src/store/index.js

@@ -883,8 +883,6 @@ export const getters = {
             .filter((x) => !!x.isActive)
             .map((x) => x.settings)
             .reduce((r, c) => Object.assign(r, c), {}) ?? {},
-    submittedOrder: (state) => JSON.parse(window.sessionStorage.getItem("submittedOrder")),
-    hasSubmittedOrder: (state) => window.sessionStorage.getItem("submittedOrder") !== null,
     isVerifiedAndDeductibleZeroConfirmed: (state) => {
         // used as a CMS variable on /payment-method, needed for FunnelSubHeaderWidget on cart pages
         if (
@@ -2798,7 +2796,7 @@ export const actions = {
     },
 
     createSubmittedOrder(context) {
-        if (context.getters.hasSubmittedOrder) {
+        if (window.sessionStorage.getItem("submittedOrder") !== null) {
             return;
         }