Stage order info to submittedOrder on page load

src/constants/store-actions.js

@@ -91,6 +91,9 @@ const storeActions = {
     SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
     SAVE_CCTOKEN: "saveCCToken",
     SAVE_PAYPAL_TOKEN: "savePaypalToken",
+
+    CREATE_SUBMITTED_ORDER: "createSubmittedOrder",
+    RESET_SUBMITTED_ORDER: "resetSubmittedOrder",
 };
 
 export { storeActions };

src/layouts/confirmation/confirmation.vue

@@ -57,6 +57,8 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
 //Supporting files
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import { settleAllPromises } from "@/helpers/layout-helper";
@@ -70,6 +72,8 @@ import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-h
 export default {
     name: "confirmation",
     async beforeRouteEnter(to, from, next) {
+        await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER);
+
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
@@ -95,7 +99,7 @@ export default {
             return this.getCmsContent("ScheduleConfirmationWidget", "Image");
         },
         CustomerPortalLoginToken() {
-            return store.getters.order.customerPortalLoginToken;
+            return store.getters.submittedOrder.customerPortalLoginToken;
         },
         ConfirmationEmailText() {
             return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
@@ -105,16 +109,16 @@ export default {
                 ?.replaceAll(">", ">");
         },
         ScheduleDate() {
-            return store.getters.order.schedule.date;
+            return store.getters.submittedOrder.schedule.date;
         },
         AppointmentType() {
-            return store.getters.order.serviceLocation.appointmentType;
+            return store.getters.submittedOrder.serviceLocation.appointmentType;
         },
         ScheduleStartTime() {
-            return store.getters.order.schedule.startTime;
+            return store.getters.submittedOrder.schedule.startTime;
         },
         ScheduleEndTime() {
-            return store.getters.order.schedule.endTime;
+            return store.getters.submittedOrder.schedule.endTime;
         },
         InShopWordingText() {
             return this.getCmsContent("InShopWordingWidget", "BodyText");
@@ -126,31 +130,31 @@ export default {
             return this.getCmsContent("DropOffWordingWidget", "BodyText");
         },
         ServiceLocationAddress() {
-            return store.getters.order.serviceLocation.address;
+            return store.getters.submittedOrder.serviceLocation.address;
         },
         ServiceLocationAddress2() {
-            return store.getters.order.serviceLocation.address2;
+            return store.getters.submittedOrder.serviceLocation.address2;
         },
         ServiceLocationCity() {
-            return store.getters.order.serviceLocation.city;
+            return store.getters.submittedOrder.serviceLocation.city;
         },
         ServiceLocationState() {
-            return store.getters.order.serviceLocation.state;
+            return store.getters.submittedOrder.serviceLocation.state;
         },
         ServiceLocationZipCode() {
-            return store.getters.order.serviceLocation.zipCode;
+            return store.getters.submittedOrder.serviceLocation.zipCode;
         },
         ProviderAddress() {
-            return store.getters.order.serviceLocation.provider.address.streetAddress;
+            return store.getters.submittedOrder.serviceLocation.provider.address.streetAddress;
         },
         ProviderCity() {
-            return store.getters.order.serviceLocation.provider.address.city;
+            return store.getters.submittedOrder.serviceLocation.provider.address.city;
         },
         ProviderState() {
-            return store.getters.order.serviceLocation.provider.address.state;
+            return store.getters.submittedOrder.serviceLocation.provider.address.state;
         },
         ProviderZipCode() {
-            return store.getters.order.serviceLocation.provider.address.zipCode;
+            return store.getters.submittedOrder.serviceLocation.provider.address.zipCode;
         },
         AppointmentWordingText() {
             if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {

src/store/index.js

@@ -691,6 +691,8 @@ export const getters = {
             .filter((x) => !!x.isActive)
             .map((x) => x.settings)
             .reduce((r, c) => Object.assign(r, c), {}) ?? {},
+    submittedOrder: (state) => JSON.parse(window.localStorage.getItem("submittedOrder")),
+    hasSubmittedOrder: (state) => window.localStorage.getItem("submittedOrder") !== null,
 };
 
 function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) {
@@ -2441,6 +2443,26 @@ export const actions = {
 
         return false;
     },
+
+    createSubmittedOrder(context) {
+        if (context.getters.hasSubmittedOrder) {
+            return;
+        }
+
+        // create a submitted order object from vuex.
+        const submittedOrder = context.state.order;
+
+        // set to local storage
+        window.localStorage.setItem("submittedOrder", JSON.stringify(submittedOrder));
+
+        // clear vuex
+        context.commit(storeMutations.RESET_STATE);
+    },
+
+    resetSubmittedOrder(context) {
+        // clear from local storage
+        window.localStorage.removeItem("submittedOrder");
+    },
 };
 
 export default createStore({