Merged latest from develop

src/constants/store-actions.js

@@ -61,6 +61,7 @@ const storeActions = {
     SAVE_VEHICLE_DAMAGE: "saveVehicleDamage",
     SAVE_VIN_LOOKUP: "saveVinLookup",
     SAVE_SERVICE_LOCATION: "saveServiceLocation",
+    SAVE_SCHEDULE: "saveSchedule",
     SAVE_EMAIL: "saveEmail",
     SAVE_REGISTRATION_LICENSE_PLATE_LOOKUP: "saveRegistrationLicensePlateLookup",
     SAVE_VIN: "saveVin",

src/constants/store-mutations.js

@@ -33,6 +33,7 @@ const storeMutations = {
     UPDATE_REGISTRATION: "updateRegistration",
 
     UPDATE_SERVICE_LOCATION: "updateServiceLocation",
+    UPDATE_SCHEDULE: "updateSchedule",
 
     UPDATE_CUSTOMER_EMAIL_ADDRESS: "updateCustomerEmailAddress",
 

src/digital-components/text-block/text-block.vue

@@ -1,7 +1,7 @@
 <template>
     <div
-        class="text-block w-100 mt-2"
+        class="text-block w-100"
-        :class="[justifyText, typeStyle, fontWeight]"
+        :class="[justifyText, typeStyle, fontWeight, margin]"
         v-html="this.TextBlockCopy"></div>
 </template>
 
@@ -11,6 +11,11 @@ export default {
     props: {
         customText: String, // used to allow the insert of token values into textblock
         justifyText: String, // left, right, center
+        margin: {
+            // bootstrap margin to apply to the block.
+            type: String,
+            default: "mt-2",
+        },
         typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
         fontWeight: String, // bold=500, default is 400
         cmsWidgetName: String,

src/layouts/review/review.spec.js

@@ -0,0 +1,3 @@
+describe("Review Page", () => {
+    test.todo("Add more tests as specific functionality is added.");
+});

src/layouts/review/review.vue

@@ -0,0 +1,102 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+        <!-- When customer-details is added: v-slot="{ meta }" -->
+        <div class="page-container-grouped-styles">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <vehicleBanner
+                cmsWidgetName="VehicleBannerWidget"
+                :displayGenericVehicleImage="false" />
+
+            <textBlock
+                :customText="subHeaderTitle"
+                typeStyle="h5"
+                justifyText="text-center"
+                margin="mt-1"
+                class="dark-header" />
+            <textBlock
+                :customText="subHeaderBody"
+                typeStyle="body"
+                justifyText="left"
+                margin="mt-0 mb-2" />
+
+            <buttonMain
+                ref="buttonMain"
+                isPrimary
+                :buttonText="forwardButtonText"
+                loaderColor="white"
+                @click-event="forwardButtonAction" />
+
+            <funnelFooter
+                cmsWidgetName="FunnelFooterWidget"
+                @back-clicked="backButtonAction"
+                @ForwardClicked="forwardButtonAction" />
+        </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
+import buttonMain from "@/ux-components/button-main/button-main";
+import textBlock from "@/digital-components/text-block/text-block";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+export default {
+    name: "review",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            return true;
+        },
+        backButtonAction() {},
+        forwardButtonAction() {},
+    },
+    computed: {
+        subHeaderTitle() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
+        },
+        subHeaderBody() {
+            return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
+        },
+        forwardButtonText() {
+            return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        vehicleBanner,
+        buttonMain,
+        textBlock,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.dark-header {
+    color: $black;
+}
+</style>

src/layouts/schedule/schedule.vue

@@ -174,7 +174,19 @@ export default {
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
-        forwardButtonAction() {
+        async forwardButtonAction() {
+            //TODO: replace properties with real values once they are available
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_SCHEDULE,
+                {
+                    date: "2023-07-04T00:00:00",
+                    startTime: "2023-07-04T12:00:00",
+                    endTime: "2023-07-04T17:00:00",
+                    routeCode: "03341-01820-S-B*20232*11 AM",
+                },
+                false
+            );
+
             navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
         },
     },

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

@@ -388,10 +388,12 @@ export default {
                     isVehicleProtected: this.isVehicleProtected,
                     provider: {
                         providerNumber: this.selectedProvider?.providerNumber,
-                        address: this.selectedProvider?.address?.streetAddress,
+                        address: {
-                        city: this.selectedProvider?.address?.city,
+                            streetAddress: this.selectedProvider?.address?.streetAddress,
-                        state: this.selectedProvider?.address?.state,
+                            city: this.selectedProvider?.address?.city,
-                        zip: this.selectedProvider?.address?.zipCode,
+                            state: this.selectedProvider?.address?.state,
+                            zip: this.selectedProvider?.address?.zipCode,
+                        },
                     },
                 },
                 false

src/layouts/service-location/shop-question/shop-question.vue

@@ -45,7 +45,7 @@ import textLink from "@/ux-components/text-link/text-link";
 import { storeActions } from "@/constants/store-actions.js";
 
 // Supporting files
-import { defineRule, useField } from "vee-validate";
+import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
@@ -216,7 +216,7 @@ export default {
                 if (this.selectedAppointmentType) {
                     const selectedShopIndex = this.getSelectedProviderIndex(
                         newValue,
-                        this.modelValue
+                        this.modelValue.providerNumber
                     );
 
                     if (selectedShopIndex >= 3) {

src/router/index.js

@@ -31,6 +31,7 @@ import { applicationConfig } from "../constants/application-config";
 // Components
 import datePicker from "@/digital-components/date-picker/date-picker.vue";
 import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
+import review from "@/layouts/review/review";
 
 const routes = [
     {
@@ -43,6 +44,11 @@ const routes = [
         name: "date-picker",
         component: datePicker,
     },
+    {
+        path: "/review", // This is a temporary route for testing.
+        name: "review",
+        component: review,
+    },
     {
         path: "/",
         name: "root",

src/store/index.js

@@ -46,10 +46,12 @@ const getDefaultState = () => {
                 appointmentType: null,
                 provider: {
                     providerNumber: null,
-                    address: null,
+                    address: {
-                    city: null,
+                        streetAddress: null,
-                    state: null,
+                        city: null,
-                    zip: null,
+                        state: null,
+                        zip: null,
+                    },
                 },
             },
             customer: {
@@ -77,6 +79,12 @@ const getDefaultState = () => {
                 },
                 parentAccountNumber: 0,
             },
+            schedule: {
+                date: null,
+                startTime: null,
+                endTime: null,
+                routeCode: null,
+            },
             referralNumber: null,
             referralDate: null,
             referralCorrelationId: null,
@@ -244,10 +252,22 @@ export const mutations = {
         if (serviceLocationInfo.provider) {
             state.order.serviceLocation.provider.providerNumber =
                 serviceLocationInfo.provider?.providerNumber;
-            state.order.serviceLocation.provider.address = serviceLocationInfo.provider?.address;
+            state.order.serviceLocation.provider.address.streetAddress =
-            state.order.serviceLocation.provider.city = serviceLocationInfo.provider?.city;
+                serviceLocationInfo.provider?.address?.streetAddress;
-            state.order.serviceLocation.provider.state = serviceLocationInfo.provider?.state;
+            state.order.serviceLocation.provider.address.city =
-            state.order.serviceLocation.provider.zip = serviceLocationInfo.provider?.zip;
+                serviceLocationInfo.provider?.address?.city;
+            state.order.serviceLocation.provider.address.state =
+                serviceLocationInfo.provider?.address?.state;
+            state.order.serviceLocation.provider.address.zip =
+                serviceLocationInfo.provider?.address?.zip;
+        }
+    },
+    updateSchedule(state, scheduleInfo) {
+        if (scheduleInfo) {
+            state.order.schedule.date = scheduleInfo.date;
+            state.order.schedule.startTime = scheduleInfo.startTime;
+            state.order.schedule.endTime = scheduleInfo.endTime;
+            state.order.schedule.routeCode = scheduleInfo.routeCode;
         }
     },
 
@@ -394,14 +414,14 @@ export const mutations = {
 
         state.order.serviceLocation.provider.providerNumber =
             sessionInformation.order.serviceLocation.provider?.providerNumber;
-        state.order.serviceLocation.provider.address =
+        state.order.serviceLocation.provider.address.streetAddress =
-            sessionInformation.order.serviceLocation.provider?.address;
+            sessionInformation.order.serviceLocation.provider?.address?.streetAddress;
-        state.order.serviceLocation.provider.city =
+        state.order.serviceLocation.provider.address.city =
-            sessionInformation.order.serviceLocation.provider?.city;
+            sessionInformation.order.serviceLocation.provider?.address?.city;
-        state.order.serviceLocation.provider.state =
+        state.order.serviceLocation.provider.address.state =
-            sessionInformation.order.serviceLocation.provider?.state;
+            sessionInformation.order.serviceLocation.provider?.address?.state;
-        state.order.serviceLocation.provider.zip =
+        state.order.serviceLocation.provider.address.zip =
-            sessionInformation.order.serviceLocation.provider?.zip;
+            sessionInformation.order.serviceLocation.provider?.address?.zip;
 
         state.order.payment.isInsurance = sessionInformation.order.payment.isInsurance;
         state.order.payment.insuranceCoverage.isVerified =
@@ -415,6 +435,11 @@ export const mutations = {
         state.applicationUser.crmCustomerId = sessionInformation.applicationUser.crmCustomerId;
         state.applicationUser.pageData = sessionInformation.applicationUser.pageData;
         state.applicationUser.lastPage = sessionInformation.applicationUser.lastPage;
+
+        state.order.schedule.date = sessionInformation.order.schedule?.date;
+        state.order.schedule.startTime = sessionInformation.order.schedule?.startTime;
+        state.order.schedule.endTime = sessionInformation.order.schedule?.endTime;
+        state.order.schedule.routeCode = sessionInformation.order.schedule?.routeCode;
     },
     updateExperiments(state, experiments) {
         state.applicationUser.experiments = experiments;
@@ -1166,12 +1191,21 @@ export const actions = {
                         isVehicleProtected: order.serviceLocation.isVehicleProtected,
                         provider: {
                             providerNumber: order.serviceLocation.provider?.providerNumber,
-                            address: order.serviceLocation.provider?.address,
+                            address: {
-                            city: order.serviceLocation.provider?.city,
+                                streetAddress:
-                            state: order.serviceLocation.provider?.state,
+                                    order.serviceLocation.provider?.address?.streetAddress,
-                            zip: order.serviceLocation.provider?.zip,
+                                city: order.serviceLocation.provider?.address?.city,
+                                state: order.serviceLocation.provider?.address?.state,
+                                zip: order.serviceLocation.provider?.address?.zip,
+                            },
                         },
                     },
+                    schedule: {
+                        date: order.schedule?.date,
+                        startTime: order.schedule?.startTime,
+                        endTime: order.schedule?.endTime,
+                        routeCode: order.schedule?.routeCode,
+                    },
                     existingPromoCode: null,
                     referralCorrelationId: order.referralCorrelationId,
                     referralDate: order.referralDate,
@@ -1615,6 +1649,9 @@ export const actions = {
         return availableLineItems;
     },
     // Misc order actions
+    saveSchedule(context, scheduleInfo) {
+        context.commit(storeMutations.UPDATE_SCHEDULE, scheduleInfo);
+    },
     saveServiceLocation(context, serviceLocationInfo) {
         context.commit(storeMutations.UPDATE_SERVICE_LOCATION, serviceLocationInfo);
     },