diff --git a/jest.config.js b/jest.config.js index 28c5557cb..c712c24da 100644 --- a/jest.config.js +++ b/jest.config.js @@ -26,7 +26,7 @@ module.exports = { testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { global: { - statements: 78, + statements: 77, // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90 }, }, diff --git a/src/layouts/schedule/constants/schedule-constants.js b/src/constants/schedule-constants.js similarity index 100% rename from src/layouts/schedule/constants/schedule-constants.js rename to src/constants/schedule-constants.js diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index df23d8e65..939caf922 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -61,6 +61,7 @@ const storeMutations = { RESET_SERVICE_LOCATION_APPOINTMENT_TYPE: "resetServiceLocationAppointmentType", RESET_SERVICE_LOCATION_PROVIDER: "resetServiceLocationProvider", RESET_SERVICE_LOCATION_MOBILE_ADDRESS: "resetServiceLocationMobileAddress", + RESET_SCHEDULE: "resetSchedule", // OTHER MUTATIONS UPDATE_PAGE_DATA: "updatePageData", diff --git a/src/digital-components/text-block/text-block.spec.js b/src/digital-components/text-block/text-block.spec.js index 89b2fdf36..c9825f36f 100644 --- a/src/digital-components/text-block/text-block.spec.js +++ b/src/digital-components/text-block/text-block.spec.js @@ -1,7 +1,7 @@ import { shallowMount } from "@vue/test-utils"; import TextBlock from "./text-block"; -describe("modal.vue", () => { +describe("text-block.vue", () => { it("Should display 'Text' when 'Text' is defined in the CMS", async () => { // Act const wrapper = shallowMount(TextBlock, { diff --git a/src/digital-components/text-block/text-block.vue b/src/digital-components/text-block/text-block.vue index 2deb126e5..d8ed9ad54 100644 --- a/src/digital-components/text-block/text-block.vue +++ b/src/digital-components/text-block/text-block.vue @@ -1,11 +1,43 @@ diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index b4927894f..f4ae0be6d 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -1,6 +1,6 @@ import { storeActions } from "@/constants/store-actions.js"; import store from "@/store"; -import { dynamicStrings } from "../constants/dynamic-strings"; +import { dynamicStrings } from "@/constants/dynamic-strings"; export function fetchCmsContentForPage(fmgPage) { return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => { @@ -284,7 +284,7 @@ function getIfStatementRegexExpression() { ////////////////////////////////////////// export function doesCopyContainRouterLink(copy) { - return copy.includes(this.dynamicStrings.ROUTER_LINK); + return copy.includes(dynamicStrings.ROUTER_LINK); } export function doesCopyContainTextLink(copy) { diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue index d45732217..de1fa9999 100644 --- a/src/layouts/address-vehicles/address-vehicles.vue +++ b/src/layouts/address-vehicles/address-vehicles.vue @@ -20,19 +20,12 @@ validationRules="vehicle-required" v-model="selectedVehicleVin" :isCarIdDifferent="isCarIdDifferent" /> -
- - - {{ getRouterLinkDisplayTextFromCopy(copy) }} - - - +
+
diff --git a/src/layouts/schedule/location-alerts/location-alerts.vue b/src/layouts/schedule/location-alerts/location-alerts.vue index 0f8c7b46d..66f26e263 100644 --- a/src/layouts/schedule/location-alerts/location-alerts.vue +++ b/src/layouts/schedule/location-alerts/location-alerts.vue @@ -36,8 +36,12 @@ export default { }, }, methods: { - loadInitialData(zipCodeCtu) { - return getAlertReasons(zipCodeCtu); + loadInitialData(serviceLocationCtu, providerCtu) { + let ctuToUse = serviceLocationCtu; + if (providerCtu) { + ctuToUse = providerCtu; + } + return getAlertReasons(ctuToUse); }, initializeComponent(initialData) { this.alertReasons = initialData; diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index e5282203e..8abd2ca5b 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -4,20 +4,13 @@ -
- - - {{ getRouterLinkDisplayTextFromCopy(copy) }} - - - -
+ { + if (result.data) { + return baseMixin.methods.dispatchStoreAction( + storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, + { + availableLineItems: [result.data], + }, + false + ); + } else { + return result.data; + } + }); + const alertReasonsPromise = locationAlerts.methods.loadInitialData( - store.getters.order.serviceLocation.zipCodeCtu + store.getters.order.serviceLocation.zipCodeCtu, + store.getters.order.serviceLocation.provider?.address?.zipCtu ); // Settle promises and get results const promiseResultMap = [ @@ -169,12 +165,8 @@ export default { promise: datePickerInitialDataPromise, }, { - resultKey: "premiumFee", - promise: premiumFeePromise, - }, - { - resultKey: "pricingResults", - promise: pricingPromise, + resultKey: "premiumFeeWithPrice", + promise: premiumFeeWithPricePromise, }, ]; @@ -186,9 +178,10 @@ export default { vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData); vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons); vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse; - if (resultMap.premiumFee) { - vm.mobilePremiumAppointmentFee = resultMap.pricingResults[0]; - } + vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice + ? resultMap.premiumFeeWithPrice[0] + : null; + vm.updateFooterButtonText(vm.selectedTimeSlotData); }); }, computed: { @@ -203,11 +196,11 @@ export default { return this.$store.getters.order.serviceLocation.appointmentType; }, timeSlotsForSelectedDate() { - if (this.selectedDate === null) { + if (!this.selectedDate) { return null; } return this.selectableDatesData.days?.find( - (selectableDate) => selectableDate.dateString === this.selectedDate.dateString + (selectableDate) => selectableDate.date === this.selectedDate ); }, appointmentDateAndTime() { @@ -217,10 +210,9 @@ export default { const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId( this.selectedTimeSlotData.id ); - if (timeSlotSelectedObject) { return { - date: this.selectedDate.dateString, + date: this.selectedDate, startTime: timeSlotSelectedObject.startTime, endTime: timeSlotSelectedObject.endTime, routeCode: this.selectedTimeSlotData.id, @@ -237,9 +229,22 @@ export default { splitCopyOnCMSPlaceHolder, getRouterLinkRouteFromCopy, getRouterLinkDisplayTextFromCopy, + processIfStatements, arePagePrerequisitesValid() { - return true; - // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE? + const serviceLocation = store.getters.order.serviceLocation; + const serviceLocationPreReqs = + serviceLocation.zipCode && + serviceLocation.zipCodeCtu && + serviceLocation.appointmentType && + (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE || + serviceLocation.provider.providerNumber); + const paymentInfo = store.getters.payment.isInsurance !== null; + const supportingItems = store.getters.lineItems.supportingItems !== null; + const damageInfo = + store.getters.order.damage.isRepair || + (store.getters.order.lineItems?.glassParts != null && + store.getters.order.lineItems.glassParts.length > 0); + return serviceLocationPreReqs && paymentInfo && supportingItems && damageInfo; }, async getAvailableDatesMethod(startDate, endDate) { const newShopTimeSlots = await getAvailableDates( @@ -262,7 +267,7 @@ export default { }, getTimeSlotObjectFromTimeSlotId(timeSlotId) { const timeSlots = this.selectableDatesData.days.find( - (selectableDate) => selectableDate.dateString === this.selectedDate.dateString + (selectableDate) => selectableDate.date === this.selectedDate ).timeSlots; return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId); }, @@ -312,7 +317,7 @@ export default { }, convertSelectedDateToShortMonthAndDay(selectedDate) { // This conversion ensures we don't get get GMT induced date changes - const dateObject = new Date(`${selectedDate.dateString}T00:00:00`); + const dateObject = new Date(`${selectedDate}T00:00:00`); // Ex: April 25 return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" }); }, @@ -333,7 +338,8 @@ export default { backButtonAction() { this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route); }, - async forwardButtonAction() { + forwardButtonAction() { + this.updateSupportingItems(); this.dispatchStoreAction( this.storeActions.SAVE_SCHEDULE, this.appointmentDateAndTime, @@ -341,6 +347,51 @@ export default { ); navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal }); }, + + updateSupportingItems() { + const supportingItems = store.getters.lineItems.supportingItems; + + // if we have a premium fee(early bird), then save/update supporting items + if ( + this.appointmentType === AppointmentTypeStrings.MOBILE && + this.selectedTimeSlotData?.isPremiumAppointment + ) { + const earlyBirdIndex = supportingItems.findIndex( + (item) => item.partNumber == PREMIUM_FEE_PART_TYPE + ); + + if (earlyBirdIndex >= 0) { + supportingItems[earlyBirdIndex].laborAmount = + this.mobilePremiumAppointmentFee.laborAmount; + supportingItems[earlyBirdIndex].selingPrice = + this.mobilePremiumAppointmentFee.selingPrice; + supportingItems[earlyBirdIndex].kitPrice = + this.mobilePremiumAppointmentFee.kitPrice; + } else { + supportingItems.push(this.mobilePremiumAppointmentFee); + } + + this.dispatchStoreAction( + this.storeActions.SAVE_SUPPORTING_ITEMS, + supportingItems, + false + ); + } else { + // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added + const removeEarlyBirdIndex = supportingItems.findIndex( + (item) => item.partNumber == PREMIUM_FEE_PART_TYPE + ); + + if (removeEarlyBirdIndex >= 0) { + supportingItems.splice(removeEarlyBirdIndex, 1); + this.dispatchStoreAction( + this.storeActions.SAVE_SUPPORTING_ITEMS, + supportingItems, + false + ); + } + } + }, }, watch: { selectedDate(newValue, oldValue) { @@ -352,7 +403,7 @@ export default { }; } }, - selectedTimeSlotData() { + selectedTimeSlotData(newValue) { this.updateFooterButtonText(this.selectedTimeSlotData); }, }, @@ -365,6 +416,7 @@ export default { datePicker, locationAlerts, timeSlotModalQuestion, + textBlock, }, }; diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue index 62d052941..7e9b5a279 100644 --- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue +++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue @@ -53,7 +53,7 @@ import { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE, -} from "../constants/schedule-constants"; +} from "@/constants/schedule-constants"; // Validation for the modal button defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED)); @@ -78,13 +78,14 @@ export default { }, data() { return { - selectedTimeSlotId: null, + selectedTimeSlotId: this.modelValue.id, timeSlotModalListButton: timeSlotModalListButton, }; }, setup(props) { const { handleChange } = useField("time-slot-modal-question", props.validationRules); - + // Run validation on component load + handleChange(props.modelValue.id); return { handleChange, }; @@ -92,6 +93,11 @@ export default { watch: { modelValue() { // Run component validation that is used at parent level + if (this.modelValue.isPremiumAppointment) { + this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id); + } else { + this.selectedTimeSlotId = this.modelValue.id; + } this.handleChange(this.modelValue.id); }, availableTimeSlots(newValue) { @@ -162,7 +168,7 @@ export default { } // This conversion ensures we don't get get GMT induced date changes - const dateObject = new Date(`${this.dateAndTimeSlotData.dateString}T00:00:00`); + const dateObject = new Date(`${this.dateAndTimeSlotData.date}T00:00:00`); // Ex: Tuesday, April 22 return dateObject.toLocaleDateString("en-us", { weekday: "long", @@ -203,12 +209,6 @@ export default { }, // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used onModalClosed() { - // Reset component state to parent's state - if (this.modelValue.isPremiumAppointment) { - this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id); - } else { - this.selectedTimeSlotId = this.modelValue.id; - } this.$emit("time-slot-modal-closed"); }, // Expected input: "HH:MM" diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 252eac529..8f63e5df7 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -138,7 +138,7 @@ export default { data() { return { streetAddress: this.getServiceAddressFromStore(), - apartmentNumberOrBusinessName: "", + apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(), city: this.getServiceCityFromStore(), state: this.getServiceStateFromStore(), zipCode: this.getServiceZipCodeFromStore(), @@ -339,6 +339,9 @@ export default { getServiceAddressFromStore() { return store.getters.order.serviceLocation.address; }, + getServiceAddress2FromStore() { + return store.getters.order.serviceLocation.address2; + }, getServiceCityFromStore() { return store.getters.order.serviceLocation.city; }, @@ -394,6 +397,7 @@ export default { city: this.selectedProvider?.address?.city, state: this.selectedProvider?.address?.state, zip: this.selectedProvider?.address?.zipCode, + zipCtu: this.selectedProvider?.address?.zipCodeCtu, }, }, }, diff --git a/src/store/index.js b/src/store/index.js index 312f4f997..952b2f5e4 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -11,6 +11,7 @@ import { damageLocationsSelected } from "@/constants/damage-locations-selected"; import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper.js"; import { deepEqual } from "@/layouts/service-location/helpers/object-helper/object-helper.js"; +import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants"; // Export State const getDefaultState = () => { @@ -333,6 +334,24 @@ export const mutations = { state.applicationUser.pageData[fmgPageValues.MOLDING_QUESTIONS] = null; state.applicationUser.pageData[fmgPageValues.CAPABILITY_QUESTIONS] = null; }, + resetSchedule(state) { + state.order.schedule.date = null; + state.order.schedule.startTime = null; + state.order.schedule.endTime = null; + state.order.schedule.routeCode = null; + state.order.schedule.jobMaxMinutes = null; + + //early bird fee used on schedule page also needs reset when schedule is reset + const supportingItems = state.order.lineItems.supportingItems; + const removeEarlyBirdIndex = supportingItems.findIndex( + (item) => item.partNumber == PREMIUM_FEE_PART_TYPE + ); + + if (removeEarlyBirdIndex >= 0) { + supportingItems.splice(removeEarlyBirdIndex, 1); + state.order.lineItems.supportingItems = supportingItems; + } + }, resetState(state) { Object.assign(state, getDefaultState()); }, @@ -1197,7 +1216,6 @@ export const actions = { method: endpoints.GetShopTimeSlots.method, endpoint: endpoints.GetShopTimeSlots.url, payload: payload, - logApiCall: false, }); }, @@ -1249,7 +1267,6 @@ export const actions = { method: endpoints.GetMobileTimeSlots.method, endpoint: endpoints.GetMobileTimeSlots.url, payload: payload, - logApiCall: false, }); }, @@ -1344,6 +1361,7 @@ export const actions = { city: order.serviceLocation.provider?.address?.city, state: order.serviceLocation.provider?.address?.state, zip: order.serviceLocation.provider?.address?.zip, + zipCtu: order.serviceLocation.provider?.address?.zipCtu, }, }, }, @@ -1391,7 +1409,7 @@ export const actions = { }, }) .then( - (response) => { + async (response) => { // Flatten location and name properties response.data.order.damage?.glassToReplace?.map((glass) => { glass.glassLocation = glass.location; @@ -1405,10 +1423,13 @@ export const actions = { if (context.state.order.eon && context.state.order.eon != response.data.eon) { context.commit(storeMutations.RESET_STATE); } + context.commit( storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION, response.data ); + + await validateAppointment(context, response.data.order); return response; }, (error) => { @@ -1801,7 +1822,6 @@ export const actions = { `&${availableLineItemsFormattedForRequest}`; const lineItemServerData = context.getters.order.lineItems.serverData; - if (lineItemServerData) { queryString += `&ServerData=${encodeURIComponent(lineItemServerData)}`; } @@ -2040,3 +2060,117 @@ function convertGlassPieceToBackEndCompatibleFormat(glassPieces) { }; }); } + +// This function will verify schedule info is still valid. +// check to see if we have an appointment date on the order object. +// if so, make sure it's not in the past. if in the past, clear schedule info in store. +// if date not in past, then call schedule service to verify appointment is still available. +async function validateAppointment(context, order) { + if (!order.schedule?.date) { + return; + } + + // Date string with slashes is parsed as local time, not UTC. Our date has dashes, '-'. + // If you put any kind of time stamp on the date string with dashes, then it IS parsed as local time. + var aptDate = new Date(order.schedule.date + "T00:00:00"); + var curDate = new Date(); + + // if appointment date is in the past, clear schedule + if (aptDate.getTime() < curDate.getTime()) { + context.commit(storeMutations.RESET_SCHEDULE); + return; + } + + // create date range to pass to the schedule service to see if our appointment is still available. + var endRange = new Date(aptDate); + endRange.setDate(aptDate.getDate() + 1); + + var endDay = "" + endRange.getDate(); + var endMonth = "" + (endRange.getMonth() + 1); // 0 based so add 1 + const endYear = endRange.getFullYear(); + + if (endMonth.length < 2) { + endMonth = "0" + endMonth; + } + if (endDay.length < 2) { + endDay = "0" + endDay; + } + + const endDate = [endYear, endMonth, endDay].join("-"); + + let newTimeSlotsResponse; + if (order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE) { + newTimeSlotsResponse = await context.dispatch( + storeActions.GET_MOBILE_TIME_SLOTS, + { + startDate: order.schedule.date, + endDate: endDate, + }, + false + ); + + if (newTimeSlotsResponse?.data.days?.length === 0) { + context.commit(storeMutations.RESET_SCHEDULE); + return; + } + + var mobileRouteCodeFound = false; + // if early bird fee is in supporting items then need to check the timeslot to see if offer premium is also still available + if ( + order.lineItem?.supportingItems?.findIndex( + (item) => item.partNumber == PREMIUM_FEE_PART_TYPE + ) + ) { + newTimeSlotsResponse.data.days?.forEach((day) => { + day.timeSlots.forEach((ts) => { + if (ts.id === order.schedule.routeCode && ts.offerPremium) { + mobileRouteCodeFound = true; + } + }); + }); + } else { + newTimeSlotsResponse.data.days?.forEach((day) => { + day.timeSlots.forEach((ts) => { + if (ts.id === order.schedule.routeCode) { + mobileRouteCodeFound = true; + } + }); + }); + } + + if (!mobileRouteCodeFound) { + context.commit(storeMutations.RESET_SCHEDULE); + return; + } + } else { + newTimeSlotsResponse = await context.dispatch( + storeActions.GET_SHOP_TIME_SLOTS, + { + startDate: order.schedule.date, + endDate: endDate, + shopAppointmentType: order.serviceLocation.appointmentType, + providerNumber: order.serviceLocation.provider.providerNumber, + }, + false + ); + + if (newTimeSlotsResponse?.data.days?.length === 0) { + context.commit(storeMutations.RESET_SCHEDULE); + return; + } + + var routeCodeFound = false; + newTimeSlotsResponse.data.days?.forEach((day) => { + day.timeSlots.forEach((ts) => { + if (ts.id === order.schedule.routeCode) { + routeCodeFound = true; + } + }); + }); + + if (!routeCodeFound) { + context.commit(storeMutations.RESET_SCHEDULE); + return; + } + } +} diff --git a/src/ux-components/alert/alert.spec.js b/src/ux-components/alert/alert.spec.js index 1f5d0fcc8..9d8112189 100644 --- a/src/ux-components/alert/alert.spec.js +++ b/src/ux-components/alert/alert.spec.js @@ -15,7 +15,6 @@ describe("alert.vue", () => { }, }) ); - const wrapperDiv = wrapper.find("div"); // Assert @@ -49,7 +48,7 @@ describe("alert.vue", () => { expect(wrapper.vm.alertCopy).toBe("testCopy"); }); - it("Should container a tag if the manualCopy contains a {routerLink: testName, testLink} placeholder", () => { + it("Should container a tag if the manualCopy contains a {routerLink: testName, testLink} placeholder", () => { // Arrange & Act const wrapper = shallowMount( alert, @@ -58,11 +57,12 @@ describe("alert.vue", () => { manualHeadline: "testHeader", manualCopy: "testCopy with a {routerLink: testName, testLink} inside of it", }, - stubs: ["router-link"], + stubs: ["textBlock"], }) ); + // Assert - expect(wrapper.find("router-link").exists()).toBe(true); + expect(wrapper.html()).toEqual(expect.stringContaining("text-block-stub")); }); it("Should contain 'n+1'

tags if the body copy has 'n'

tags", () => { diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index c5899b440..c7e4aca30 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -14,17 +14,11 @@ v-if="!doesCopyContainRouterLink(paragraph) && !doesCopyContainTextLink(paragraph)" v-html="paragraph">

-