Setup navigation from schedule to customer-details.

src/constants/store-actions.js

@@ -83,6 +83,7 @@ const storeActions = {
     SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:
         "saveSupportingItemsSuppressingStateResetting",
     SAVE_VAPS: "saveVaps",
+    SAVE_CUSTOMER_DETAILS: "saveCustomerDetails",
 };
 
 export { storeActions };

src/constants/store-mutations.js

@@ -37,6 +37,9 @@ const storeMutations = {
 
     UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress",
 
+    //CUSTOMER MUTATIONS
+    UPDATE_CUSTOMER_DETAILS: "updateCustomerDetails",
+
     // ORDER MUTATIONS
     UPDATE_REFERRAL_NUMBER: "updateReferralNumber",
     UPDATE_REFERRAL_DATE: "updateReferralDate",

src/digital-components/phonenumber-question/phonenumber-question.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="phonenumber-question d-flex flex-column">
         <textboxQuestion
-            type="tel"
+            type="text"
             :max-length="12"
             v-model="selectedValue"
             :isRequired="isRequired"
@@ -33,44 +33,6 @@ export default {
         centerErrorMessage: Boolean,
         modelValue: String,
     },
-    setup(props) {
-        const inputId = !props.customInputId ? `input-${crypto.randomUUID()}` : props.customInputId;
-
-        const propsClone = Object.assign({}, props);
-        const modelValue = propsClone.modelValue;
-        let initialValue;
-
-        switch (typeof modelValue) {
-            case "number":
-                initialValue = modelValue;
-                break;
-            default:
-                initialValue = modelValue && modelValue.length > 0 ? modelValue : "";
-                break;
-        }
-
-        const fieldOptions = {
-            type: "text",
-            value: modelValue,
-            initialValue: initialValue,
-        };
-
-        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
-            inputId,
-            props.validationRules,
-            fieldOptions
-        );
-
-        return {
-            inputId,
-            errorMessage,
-            handleBlur,
-            handleChange,
-            validate,
-            meta,
-            errors,
-        };
-    },
     data() {
         return {
             phoneNumber: "",

src/layouts/customer-details/customer-details.vue

@@ -67,6 +67,7 @@ import { routerParams } from "@/router/router-constants/router-params";
 import { required, regex } from "@/helpers/validation-rules";
 import { Form, defineRule } from "vee-validate";
 import { useField, validate } from "vee-validate";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
 defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
@@ -117,6 +118,23 @@ export default {
             return this.getCmsContent("TextAreaContentWidget", "QuestionText");
         },
     },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            this.updateSupportingItems();
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_CUSTOMER_DETAILS,
+                //this.appointmentDateAndTime,
+                false
+            );
+            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
+        },
+    },
     components: {
         funnelHeader,
         funnelSubHeader,

src/layouts/schedule/schedule.vue

@@ -335,7 +335,10 @@ export default {
                 this.appointmentDateAndTime,
                 false
             );
-            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_FORWARD_WITH_CUSTOMER_DETAILS,
+                this.$route
+            );
         },
 
         updateSupportingItems() {

src/router/index.js

@@ -27,6 +27,7 @@ import store from "@/store";
 import analyticsMixin from "@/mixins/analytics-mixin";
 import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
+//import customerDetails from "@/layouts/customer-details/customer-details";
 
 import review from "@/layouts/review/review";
 const routes = [
@@ -35,6 +36,11 @@ const routes = [
         name: "review",
         component: review,
     },
+    // {
+    //     path: "/customer-details", // This is a temporary route for testing.
+    //     name: "customer-details",
+    //     component: customerDetails,
+    // },
     {
         path: "/",
         name: "root",

src/router/router-constants/fmgPage-values.js

@@ -17,6 +17,7 @@ const fmgPageValues = {
     SERVICE_LOCATION: "service-location",
     HERITAGE: "heritage",
     SCHEDULE: "schedule",
+    CUSTOMER_DETAILS: "customer-details",
     REVIEW: "review",
 };
 

src/router/router-constants/navigation-scenarios.js

@@ -49,6 +49,9 @@ const navigationScenarios = {
     // Scheduling
     SELECTED_LOCATION: "SELECTED_LOCATION",
 
+    //Customer details
+    CLICKED_FORWARD_WITH_CUSTOMER_DETAILS: "CLICKED_FORWARD_WITH_CUSTOMER_DETAILS",
+
     // Review
     CLICKED_VEHICLE_EDIT: "CLICKED_VEHICLE_EDIT",
     CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT",

src/router/router-constants/routing-table.js

@@ -433,6 +433,23 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_BACK,
                     destinationFmgPageValue: fmgPageValues.SERVICE_LOCATION,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD_WITH_CUSTOMER_DETAILS,
+                    destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
+                },
+            ],
+        },
+        {
+            fmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationFmgPageValue: fmgPageValues.SCHEDULE,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+                },
             ],
         },
         {
@@ -446,6 +463,10 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_DAMAGE_EDIT,
                     destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
+                },
             ],
         },
     ];

src/store/index.js

@@ -266,6 +266,16 @@ export const mutations = {
             state.order.schedule.jobMaxMinutes = scheduleInfo.jobMaxMinutes;
         }
     },
+    updateCustomerDetails(state, detailsInfo) {
+        if (detailsInfo) {
+            state.order.customerDetails.firstName = detailsInfo.firstName;
+            state.order.customerDetails.lastName = detailsInfo.lastName;
+            state.order.customerDetails.email = detailsInfo.email;
+            state.order.customerDetails.telephone = detailsInfo.telephone;
+            state.order.customerDetails.textUpdates = detailsInfo.textUpdates;
+            state.order.customerDetails.techNotes = detailsInfo.techNotes;
+        }
+    },
 
     // applicationUser MUTATIONS
     updateSaveSessionPromise(state, saveSessionPromise) {
@@ -1849,6 +1859,10 @@ export const actions = {
         context.commit(storeMutations.UPDATE_SCHEDULE, scheduleInfo);
     },
 
+    saveDetails(context, scheduleInfo) {
+        context.commit(storeMutations.UPDATE_DETAILS, scheduleInfo);
+    },
+
     saveServiceZipCodeInfo(context, serviceZipCodeInfo) {
         if (
             context.state.order.serviceLocation &&