diff --git a/src/constants/experiments.js b/src/constants/experiments.js index 6a2796da9..f358fc89f 100644 --- a/src/constants/experiments.js +++ b/src/constants/experiments.js @@ -4,6 +4,7 @@ const experimentUniverses = { MSR: "MSR", IGQ_SkipQuote: "NextGen_IGQSkipToInsurance", AFTERPAY_BREAKOUT_DISPLAY: "AfterpayBreakoutDisplay", + MOBILE_FIRST_APPOINTMENT: "MobileFirstAppointment", }; const experimentSettings = { @@ -28,6 +29,10 @@ const experimentSettings = { DISPLAY_AFTERPAY_BREAKOUT_DISPLAY: "Display_AfterpayBreakoutDisplay", AFTERPAY_EXTENDED_PAY_OPTION_THRESHOLD: "AfterPayExtendedPayOptionThreshold", DYNAMO_LOGGING: "DynamoLogging", + SHOW_MOBILE_FIRST_APPT: "ShowMobileFirstAppt", + SHOW_PM_MOBILE_DAYS: "Show_PMmobileDays", + SHOW_NO_PM_MOBILE_DAYS: "Show_NoPMmobileDays", + SHOW_NO_MOBILE_AVAILABLE_DAYS: "Show_NoMobileAvailableDays", }; const experimentTriggers = { diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 9167c03b3..867e73c75 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -14,6 +14,7 @@
+
@@ -576,9 +577,6 @@ export default { isInsuranceContinueButtonText() { return this.getCmsContent("isInsuranceContinueButtonText", "Text"); }, - lineItemsCloneForWatcher() { - return Object.assign({}, this.lineItems); - }, isRecalibrationOnOrder() { return store.getters.isRecalibrationOnOrder; }, @@ -854,31 +852,9 @@ export default { await this.forwardButtonAction(); } }, - }, - watch: { - lineItemsCloneForWatcher: { - handler(newValue, oldValue) { - if ( - !oldValue || - oldValue.length == 0 || - !oldValue.vaps || - !newValue || - newValue.length == 0 - ) { - return; - } - if (oldValue.promos.length < newValue.promos.length) { - const oldPromoCodes = oldValue.promos.map( - (promoObject) => promoObject.promoCode - ); - const newlyActivatedPromoCodes = newValue.promos.filter( - (newPromo) => !oldPromoCodes.includes(newPromo.promoCode) - ); - const alert = createPromoSuccessAlert(newlyActivatedPromoCodes[0].promoCode); - this.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade); - } - }, - deep: true, + promoAdded(lineItems) { + const alert = createPromoSuccessAlert(lineItems.promos[0].promoCode); + this.$refs.funnelHeader.pushGlobalAlert(alert, alert.shouldAutoFade); }, }, components: { diff --git a/src/layouts/schedule/mobile-first-modal/mobile-first-modal.vue b/src/layouts/schedule/mobile-first-modal/mobile-first-modal.vue new file mode 100644 index 000000000..2dbde3bd9 --- /dev/null +++ b/src/layouts/schedule/mobile-first-modal/mobile-first-modal.vue @@ -0,0 +1,222 @@ + + + + diff --git a/src/layouts/schedule/schedule-june-2025.vue b/src/layouts/schedule/schedule-june-2025.vue deleted file mode 100644 index 0464b2914..000000000 --- a/src/layouts/schedule/schedule-june-2025.vue +++ /dev/null @@ -1,782 +0,0 @@ - - - - - - - - - - - diff --git a/src/layouts/schedule/schedule.specDISABLED.js b/src/layouts/schedule/schedule.specDISABLED.js deleted file mode 100644 index 9d25152c8..000000000 --- a/src/layouts/schedule/schedule.specDISABLED.js +++ /dev/null @@ -1,616 +0,0 @@ -// Components -import schedule from "@/layouts/schedule/schedule.vue"; - -// Supporting Files -import { shallowMount } from "@vue/test-utils"; -import { getMountOptions } from "@/helpers/unit-test-helper.js"; -import store from "@/store"; -import router from "@/router"; -import baseMixin from "../../mixins/base-mixin"; - -// Mock basemixin -jest.mock("@/mixins/base-mixin.js", () => ({ - methods: { - dispatchStoreAction: jest.fn().mockImplementation((storeAction) => { - if (storeAction === "getShopTimeSlots" || storeAction === "getMobileTimeSlots") { - return { - data: { - estimatedServiceMinutesMinimum: 90, - estimatedServiceMinutesMaximum: 120, - days: [ - { - date: "2023-12-01", - timeSlots: [ - { - id: "06747-01820-S-B*20424*7 AM", - startTime: "07:00", - endTime: "08:00", - offerPremium: false, - }, - ], - }, - ], - }, - }; - } - if (storeAction === "getMobilePremiumFee") { - return Promise.resolve({ - data: { - partNumber: "EARLY BIRD", - description: null, - partType: "EARLY BIRD", - laborAmount: 0, - sellingPrice: 14.99, - kitPrice: 0, - }, - }); - } - if (storeAction === "priceOrderItemsAndSaveServerData") { - return Promise.resolve([ - { - partNumber: "EARLY BIRD", - description: null, - partType: "EARLY BIRD", - laborAmount: 0, - sellingPrice: 14.99, - kitPrice: 0, - }, - ]); - } - if (storeAction === "saveSupportingItemsSuppressingStateResetting") { - return Promise.resolve([ - { - partNumber: "EARLY BIRD", - description: null, - partType: "EARLY BIRD", - laborAmount: 0, - sellingPrice: 14.99, - kitPrice: 0, - }, - ]); - } - }), - dispatchStoreActionWithLogging: jest.fn().mockImplementation((storeAction) => { - if (storeAction === "getShopTimeSlots" || storeAction === "getMobileTimeSlots") { - return { - data: { - estimatedServiceMinutesMinimum: 90, - estimatedServiceMinutesMaximum: 120, - days: [ - { - date: "2023-12-01", - timeSlots: [ - { - id: "06747-01820-S-B*20424*7 AM", - startTime: "07:00", - endTime: "08:00", - offerPremium: false, - }, - ], - }, - ], - }, - }; - } - if (storeAction === "getMobilePremiumFee") { - return Promise.resolve({ - data: { - partNumber: "EARLY BIRD", - description: null, - partType: "EARLY BIRD", - laborAmount: 0, - sellingPrice: 14.99, - kitPrice: 0, - }, - }); - } - if (storeAction === "priceOrderItemsAndSaveServerData") { - return Promise.resolve([ - { - partNumber: "EARLY BIRD", - description: null, - partType: "EARLY BIRD", - laborAmount: 0, - sellingPrice: 14.99, - kitPrice: 0, - }, - ]); - } - if (storeAction === "saveSupportingItemsSuppressingStateResetting") { - return Promise.resolve([ - { - partNumber: "EARLY BIRD", - description: null, - partType: "EARLY BIRD", - laborAmount: 0, - sellingPrice: 14.99, - kitPrice: 0, - }, - ]); - } - }), - filterOutCertainPartTypesOrNumbers: jest.fn(), - hasSubmittedOrder: jest.fn(), - getTotalPriceOfAllLineItemsAndChildParts: jest.fn(), - getTotalLineItemPrice: jest.fn(), - }, -})); - -// Mock fetchCmsContentForPage -jest.mock("@/helpers/cms-content-helper", () => ({ - fetchCmsContentForPage: () => Promise.resolve("content"), - splitCopyOnCMSPlaceHolder: jest.fn(() => ["A", "B"]), -})); - -beforeEach(() => { - jest.restoreAllMocks(); - jest.clearAllMocks(); - store.getters = { - applicationUser: { - experiments: [], - }, - order: { - schedule: { - date: "2019-01-01", - startTime: "09:00", - endTime: "10:00", - routeCode: "000", - }, - lineItems: { - glassParts: [ - { - partNumber: "ABC123", - }, - ], - supportingItems: [], - }, - serviceLocation: { - appointmentType: "Inshop", - zipCode: "12345", - zipCodeCtu: "01234", - provider: { - providerNumber: "123", - }, - }, - damage: { - isRepair: false, - }, - referralNumber: "1234567", - policy: { - policyNumber: "123", - }, - }, - payment: { - isInsurance: true, - }, - lineItems: { - glassParts: [], - supportingItems: [], - }, - experimentSettings: {}, - vehicle: { - carId: "123", - }, - }; -}); -afterEach(() => { - store.getters = {}; - jest.restoreAllMocks(); - jest.clearAllMocks(); -}); - -describe("schedule.vue...", () => { - describe("initial load", () => { - test("should pass arePagePrerequisitesValid with a mobile CASH order and no providerNumber", () => { - // Arrange - const { wrapper } = setupMocks({}); - store.getters.order.serviceLocation.appointmentType = "Mobile"; - store.getters.order.serviceLocation.provider.policyNumber = null; - store.getters.payment.isInsurance = false; - - // Act - const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); - - // Assert - expect(arePagePrerequisitesValid).toBe(true); - }); - - test("should pass arePagePrerequisitesValid with an inshop order and providerNumber", () => { - // Arrange - const { wrapper } = setupMocks({}); - - // Act - const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); - - // Assert - expect(arePagePrerequisitesValid).toBe(true); - }); - - test("should fail arePagePrerequisitesValid with a replace with no glass parts", async () => { - // Arrange - const { wrapper } = setupMocks({}); - store.getters.order.lineItems.glassParts = []; - - // Act - const arePagePrerequisitesValid2 = await wrapper.vm.arePagePrerequisitesValid(); - - // Assert - expect(arePagePrerequisitesValid2).toBe(false); - }); - - test("should fail arePagePrerequisitesValid without isInsurance", () => { - // Arrange - const { wrapper } = setupMocks({}); - store.getters.payment.isInsurance = null; - - // Act - const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); - - // Assert - expect(arePagePrerequisitesValid).toBe(false); - }); - - test("should return timeslots when getMoreScheduleData is called", async () => { - // Arrange - const { wrapper } = setupMocks({}); - wrapper.vm.selectableDatesInshop = { - days: [], - }; - wrapper.vm.selectableDatesMobile = { - days: [], - }; - - // Act - const newShopTimeSlots = await wrapper.vm.getMoreScheduleData( - "2023-01-01", - "2023-01-31" - ); - - // Assert - expect(newShopTimeSlots).toStrictEqual({ - inshopTimeSlotsData: { - days: [ - { - date: "2023-12-01", - timeSlots: [ - { - endTime: "08:00", - id: "06747-01820-S-B*20424*7 AM", - offerPremium: false, - startTime: "07:00", - }, - ], - }, - ], - estimatedServiceMinutesMinimum: 90, - estimatedServiceMinutesMaximum: 120, - }, - mobileTimeSlotsData: { - days: [ - { - date: "2023-12-01", - timeSlots: [ - { - endTime: "08:00", - id: "06747-01820-S-B*20424*7 AM", - offerPremium: false, - startTime: "07:00", - }, - ], - }, - ], - estimatedServiceMinutesMinimum: 90, - estimatedServiceMinutesMaximum: 120, - }, - }); - }); - - test("should call API service in day ranges of 34 or less when getMoreScheduleData is called with large date ranges", async () => { - // Arrange - const { wrapper } = setupMocks({}); - wrapper.vm.selectableDatesInshop = { - days: [], - }; - wrapper.vm.selectableDatesMobile = { - days: [], - }; - - // Act - await wrapper.vm.getMoreScheduleData.call( - wrapper.vm, - "2023-01-01", - "2023-03-31", - "Inshop", - "123" - ); - - // Assert - expect(baseMixin.methods.dispatchStoreActionWithLogging).toHaveBeenCalledTimes(6); - expect(baseMixin.methods.dispatchStoreActionWithLogging).toHaveBeenCalledWith( - "getShopTimeSlots", - expect.anything(), - expect.anything(), - expect.anything() - ); - }); - - describe("beforeRouteEnter function... ", () => { - // TODO: restore this test (temporarily removed it until CASH-845 is in QA then looping back) - xtest("should call next() and call all functions within next", async () => { - // Arrange - const { wrapper } = setupMocks({}); - wrapper.vm.selectableDatesInshop = { - days: [], - }; - wrapper.vm.updateFooterButtonText = jest.fn(); - wrapper.vm.setDisplayWaitList = jest.fn(); - const nextFunction = jest.fn((c) => { - c(wrapper.vm); - }); - - // Act - await schedule.beforeRouteEnter.call( - wrapper.vm, - { query: { fmgPage: "schedule" } }, - undefined, - nextFunction - ); - - // Assert - expect(nextFunction).toHaveBeenCalled(); - expect(wrapper.vm.setCmsContent).toHaveBeenCalledWith("content"); - expect(wrapper.vm.$refs.datePicker.initializeComponent).toHaveBeenCalledWith( - expect.objectContaining({ - calendarViewDirection: "future", - }) - ); - expect(wrapper.vm.$refs.locationAlerts.initializeComponent).toHaveBeenCalled(); - expect(wrapper.vm.selectableDatesInshop).toStrictEqual( - expect.objectContaining({ - days: expect.any(Array), - estimatedServiceMinutesMaximum: expect.any(Number), - estimatedServiceMinutesMinimum: expect.any(Number), - }) - ); - expect(wrapper.vm.mobilePremiumAppointmentFee).toStrictEqual( - expect.objectContaining({ - partNumber: expect.any(String), - }) - ); - expect(wrapper.vm.updateFooterButtonText).toHaveBeenCalled(); - expect(wrapper.vm.setDisplayWaitList).toHaveBeenCalled(); - }); - }); - - describe("computed properties...", () => { - test("timeSlotsForSelectedDate should return timeslots if selected date is available", () => { - // Arrange - const { wrapper } = setupMocks({}); - wrapper.vm.selectableDatesInshop = { - days: [ - { - date: "2022-11-11", - timeSlots: [ - { - id: "1820I-01820-M-I*20425*AM", - startTime: "08:00", - endTime: "12:00", - offerPremium: true, - }, - { - id: "1820I-01820-M-I*20425*PM", - startTime: "12:00", - endTime: "17:00", - offerPremium: false, - }, - ], - }, - ], - }; - wrapper.setData({ - selectedDate: "2022-11-11", - }); - - // Act - const testValue = wrapper.vm.timeSlotsForSelectedDate; - - // Assert - expect(testValue).toStrictEqual( - expect.objectContaining({ - date: "2022-11-11", - }) - ); - }); - - test("timeSlotsForSelectedDate should be null if no date has been selected", () => { - // Arrange - const { wrapper } = setupMocks({}); - wrapper.vm.selectableDatesInshop = { - days: [ - { - date: "2022-11-11", - timeSlots: [ - { - id: "1820I-01820-M-I*20425*AM", - startTime: "08:00", - endTime: "12:00", - offerPremium: true, - }, - { - id: "1820I-01820-M-I*20425*PM", - startTime: "12:00", - endTime: "17:00", - offerPremium: false, - }, - ], - }, - ], - }; - wrapper.setData({ - selectedDate: undefined, - }); - - // Act - const testValue = wrapper.vm.timeSlotsForSelectedDate; - - // Assert - expect(testValue).toBe(null); - }); - }); - }); - - describe("schedule page methods...", () => { - test("getServiceZipCtuCodeFromStore should return zipCodeCtu", () => { - // Arrange - const { wrapper } = setupMocks({}); - wrapper.vm.selectableDatesInshop = { - days: [], - }; - - // Act - const testValue = wrapper.vm.getServiceZipCtuCodeFromStore(); - - // Assert - expect(testValue).toStrictEqual("01234"); - }); - - test("getDisplayTextForMilitaryTime should return the correctly formatted string", () => { - // Arrange - const { wrapper } = setupMocks({}); - wrapper.vm.selectableDatesInshop = { - days: [], - }; - const timeInput1 = "15:00"; - const timeInput2 = "15:30"; - - // Act - const testOutput1 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1); - const testOutput2 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2); - const testOutput3 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1, true); - const testOutput4 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2, true); - - // Assert - expect(testOutput1).toBe("3:00 PM"); - expect(testOutput2).toBe("3:30 PM"); - expect(testOutput3).toBe("3 PM"); - expect(testOutput4).toBe("3:30 PM"); - }); - - test("Clicking back should fire correct navigation", () => { - // Arrange - const { wrapper } = setupMocks({}); - wrapper.vm.selectableDatesInshop = { - days: [], - }; - wrapper.vm.$router.navigateWithoutSaving = jest.fn(); - - // Act - wrapper.vm.backButtonAction(); - - // Assert - expect(wrapper.vm.$router.navigateWithoutSaving).toBeCalledWith( - "CLICKED_BACK", - "schedule" - ); - }); - }); - - // TODO: restore this test (temporarily removed it until CASH-845 is in QA then looping back) - xtest("forwardButtonAction should call route method navigateWithoutSaving", async () => { - // Arrange - const { wrapper } = setupMocks({}); - wrapper.vm.dispatchStoreAction = jest.fn(() => { - return { - data: [], - }; - }); - wrapper.vm.$router.navigateWithSaving = jest.fn(() => { - return {}; - }); - - // Act - await wrapper.vm.forwardButtonAction(); - - // Assert - expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled(); - }); - - test("for Inshop appts, updateSupportingItems should call store action to save supporting items WITHOUT the EARLY BIRD supporting item", async () => { - // Arrange - store.getters.order.serviceLocation.appointmentType = "Inshop"; - store.getters.lineItems.supportingItems = [ - { - partNumber: "EARLY BIRD", - description: null, - partType: "EARLY BIRD", - laborAmount: 0, - sellingPrice: 0, - kitPrice: 0, - }, - ]; - const { wrapper } = setupMocks({}); - wrapper.vm.dispatchStoreAction = jest.fn(() => { - return { - data: [], - }; - }); - wrapper.vm.mobilePremiumAppointmentFee = 14.99; - wrapper.setData({ - selectedTimeSlot: { - date: "2019-01-01", - startTime: "09:00", - endTime: "10:00", - routeCode: null, - isPremiumAppointment: true, - }, - }); - - // Act - await wrapper.vm.updateSupportingItems(); - - // Assert - expect(wrapper.vm.dispatchStoreAction).toBeCalledWith( - "saveSupportingItemsSuppressingStateResetting", - expect.not.arrayContaining([ - expect.objectContaining({ - partType: "EARLY BIRD", - }), - ]), - expect.anything() - ); - }); -}); - -const mockCmsContent = {}; - -function setupMocks({ customMountOptions }) { - const mountOptions = getMountOptions({ - ...customMountOptions, - route: { name: "schedule" }, - }); - - mountOptions.global.mocks["$store"] = store; - mountOptions.global.mocks["$router"] = router; - mountOptions["attachTo"] = document.body; - mountOptions.mixins = [ - { - methods: { - getCmsContent: jest.fn().mockImplementation((widgetName, fieldName) => { - if (mockCmsContent[widgetName] && mockCmsContent[widgetName][fieldName]) - return mockCmsContent[widgetName][fieldName]; - }), - }, - }, - ]; - mountOptions.global.mocks.pageName = "schedule"; - - const wrapper = shallowMount(schedule, mountOptions); - - wrapper.vm.setCmsContent = jest.fn(); - wrapper.vm.$refs.datePicker.initializeComponent = jest.fn(); - wrapper.vm.$refs.datePicker.loadInitialData = jest.fn(); - wrapper.vm.$refs.locationAlerts.initializeComponent = jest.fn(); - wrapper.vm.$refs.navbar.updateButtonText = jest.fn(); - - return { wrapper }; -} diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue index 716c819e2..a7f2b4d6e 100644 --- a/src/layouts/schedule/schedule.vue +++ b/src/layouts/schedule/schedule.vue @@ -2,7 +2,13 @@
-
+ +
{ @@ -460,111 +472,47 @@ export default { }; }, async beforeRouteEnter(to, from, next) { - const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo( - experimentSettings.PRICING_BY_DAY, - "true" - ); - const showPricingByDay = !store.getters.payment.isInsurance && isPricingByDayExperiment; + const serviceZipCode = store.getters.order.serviceLocation.zipCode; - // Get pricingByDayBasePrice needed for Pricing By Day - const lineItems = deepClone(store.getters.order.lineItems); - const isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder; - const shouldHideRecalibration = - experimentMixin.methods.hasSettingEqualTo( - experimentSettings.RECAL_PRICE_REMOVE, - "true" - ) && isRecalibrationOnOrder; - const glassParts = - isRecalibrationOnOrder && shouldHideRecalibration - ? getItemsWithoutRecalParts(lineItems.glassParts) - : (lineItems.glassParts ?? []); - const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers( - lineItems.supportingItems, - { - partNumbersToRemove: [ - partNumberStrings.RECYCLE_FEE, - partNumberStrings.PRICING_BY_DAY_UPCHARGE, - ], - } - ); - const lineItemsToBePriced = { - glassParts: glassParts, - supportingItems: supportingItemsWithoutFees, - vaps: lineItems.vaps ?? [], - promos: lineItems.promos ?? [], - }; - const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false - const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote - const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown); - let includePricingByDayUpcharge = false; - let appointmentType = store.getters.order.serviceLocation.appointmentType; - - // Check to see if date should be pre-selected - let scheduleFromStore = await store.getters.order.schedule; - let preSelectedDate; - - if (scheduleFromStore.date && scheduleFromStore.date.length > 0) { - preSelectedDate = scheduleFromStore.date; - - if (appointmentType === AppointmentTypeStrings.MOBILE) { - preSelectedDate += "-mobile"; - } - - // Check to see if pre-selected date should have pricing by day upcharge - if (showPricingByDay) { - // is this preSelectedDate a higher priced pricingByDay day? - const dayIndex = convertDateStringToDate(scheduleFromStore?.date).getDay(); - const dayObject = DAYS_OF_WEEK[dayIndex]; - if (dayObject.isPricingByDayUpchargeDay) { - includePricingByDayUpcharge = true; - } - } - } - - // Set up promises const cmsContentPromise = fetchCmsContentForPage(to.name); - const alertReasonsPromise = locationAlerts.methods.loadInitialData( store.getters.order.serviceLocation.zipCodeCtu, store.getters.order.serviceLocation.provider?.address?.zipCodeCtu ); - - const serviceZipCode = store.getters.order.serviceLocation.zipCode; - const zipCodeDataPromise = getZipCodeData(serviceZipCode, to.name); const serviceabilityDetailsPromise = getServiceabilityDetails( serviceZipCode, null, - to.name + "schedule" + ); + let zipCodeData; + const zipCodeDataPromise = getZipCodeData(serviceZipCode, to.name); + let shopProviderData; + const shopProviderDataPromise = getShopProviderData(serviceZipCode, to.name); + const zipCodeDataAndShopProviderDataPromise = Promise.all([ + zipCodeDataPromise, + shopProviderDataPromise, + ]); + const mobileFeePartPromise = zipCodeDataAndShopProviderDataPromise.then( + ([zipCodeDataResult, shopProviderDataResult]) => { + zipCodeData = zipCodeDataResult; + shopProviderData = shopProviderDataResult; + return baseMixin.methods.dispatchStoreActionWithLogging( + storeActions.GET_MOBILE_FEE_PART, + { + serviceZipCode: serviceZipCode, + serviceZipCodeCtu: zipCodeData.zipCodeCtu, + mobileProviderNumber: shopProviderData.data.mobileProviderNumber, + }, + to.name, + false + ); + } ); - const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, to.name); - const shopProviderData = await getShopProviderData(serviceZipCode, to.name); - const providerNumber = shopProviderData?.data?.shopProviders[0]?.providerNumber; - - // Get pricingByDayUpcharge needed for Pricing By Day - const pricingByDayUpchargePartPromise = showPricingByDay - ? getPricingByDayPartWithPrice() - : null; - const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging( storeActions.GET_MOBILE_PREMIUM_FEE, null, to.name ); - const premiumFeeWithPricePromise = premiumFeePromise.then((result) => { - if (result.data) { - return baseMixin.methods.dispatchStoreActionWithLogging( - storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, - { - availableLineItems: [result.data], - }, - to.name, - false - ); - } else { - return result.data; - } - }); - // Settle promises and get results const promiseResultMap = [ { @@ -575,18 +523,6 @@ export default { resultKey: "alertReasons", promise: alertReasonsPromise, }, - { - resultKey: "pricingByDayUpchargePart", - promise: pricingByDayUpchargePartPromise, - }, - { - resultKey: "premiumFeeWithPrice", - promise: premiumFeeWithPricePromise, - }, - { - resultKey: "zipCodeData", - promise: zipCodeDataPromise, - }, { resultKey: "mobileFeePart", promise: mobileFeePartPromise, @@ -595,39 +531,70 @@ export default { resultKey: "serviceabilityDetails", promise: serviceabilityDetailsPromise, }, + { + resultKey: "premiumFee", + promise: premiumFeePromise, + }, ]; - const resultMap = await settleAllPromises(promiseResultMap); + const itemsToPrice = []; + if (resultMap.mobileFeePart) { + itemsToPrice.push(resultMap.mobileFeePart); + } + if (resultMap.premiumFee) { + itemsToPrice.push(resultMap.premiumFee); + } - // add pricing by day data - const pricingByDayUpcharge = - showPricingByDay && resultMap.pricingByDayUpchargePart - ? await baseMixin.methods.getTotalLineItemPrice( - resultMap.pricingByDayUpchargePart, - false - ) - : null; + let pricedMobileFeePart = null; + let pricedPremiumFee = null; + + if (itemsToPrice.length) { + const pricedItems = await baseMixin.methods.dispatchStoreActionWithLogging( + storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA, + { + availableLineItems: itemsToPrice, + }, + to.name, + false + ); + pricedMobileFeePart = pricedItems.find( + (item) => item.partNumber === resultMap.mobileFeePart.partNumber + ); + pricedPremiumFee = pricedItems.find( + (item) => item.partNumber === resultMap.premiumFee.partNumber + ); + } + + let appointmentType = store.getters.order.serviceLocation.appointmentType; + // Check to see if date should be pre-selected + let scheduleFromStore = await store.getters.order.schedule; + let preSelectedDate; + if (scheduleFromStore.date && scheduleFromStore.date.length > 0) { + preSelectedDate = scheduleFromStore.date; + + if (appointmentType === AppointmentTypeStrings.MOBILE) { + preSelectedDate += "-mobile"; + } + } // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons); - vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice - ? resultMap.premiumFeeWithPrice[0] - : null; + vm.mobilePremiumAppointmentFee = pricedPremiumFee; vm.updateFooterButtonText(vm.selectedTimeSlotInfo); - vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart; - vm.includePricingByDayUpcharge = includePricingByDayUpcharge; - vm.isPricingByDayExperiment = isPricingByDayExperiment; - vm.pricingByDayBasePrice = pricingByDayBasePrice; - vm.pricingByDayUpcharge = pricingByDayUpcharge; - vm.showPricingByDay = showPricingByDay; + vm.pricingByDayUpchargeLineItem = null; // Pricing By Day Upcharge Line Item is not used in this version + vm.includePricingByDayUpcharge = false; // Pricing By Day Upcharge is not used in this version + vm.isPricingByDayExperiment = false; // Pricing By Day Experiment is not used in this version + vm.pricingByDayBasePrice = null; // Pricing By Day Base Price is not used in this version + vm.pricingByDayUpcharge = null; // Pricing By Day Upcharge is not used in this version + vm.showPricingByDay = false; // Pricing By Day is not used in this version vm.preSelectedDate = preSelectedDate; vm.appointmentType = appointmentType; - vm.setData( - resultMap.zipCodeData, + vm.setDataOnLoad( + zipCodeData, resultMap.serviceabilityDetails, - resultMap.mobileFeePart, + pricedMobileFeePart, shopProviderData.data ); vm.initializeDatePicker(); @@ -890,6 +857,9 @@ export default { ) ); }, + isMobileFirstModalOpen() { + return this.isMobileSelected ? this.$refs.mobileFirstModal?.getIsModalOpen() : false; + }, }, methods: { splitCopyOnCMSPlaceHolder, @@ -966,7 +936,7 @@ export default { } }, - setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) { + setDataOnLoad(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) { if (zipCodeData) { this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase; this.zipCodeCtu = zipCodeData.zipCodeCtu; @@ -1178,6 +1148,7 @@ export default { this.resetWaitlist(); this.preSelectedDate = null; this.shopProviderData = shopQuestionPopUpData.shopProviderData; + const oldProvider = this.selectedProvider; const selectedProvider = this.shopProviderData.shopProviders.find((shopProvider) => { return shopProvider.providerNumber === shopQuestionPopUpData.selectedProviderNumber; }); @@ -1189,7 +1160,12 @@ export default { selectedProvider ); } else { - this.updateSelectedProvider(selectedProvider); + const didProviderNumberChange = + oldProvider?.providerNumber !== selectedProvider.providerNumber; + if (didProviderNumberChange) { + this.updateSelectedProvider(selectedProvider); + this.initializeDatePicker(); + } } }, async getMoreScheduleData(startDate, endDate) { @@ -1211,12 +1187,16 @@ export default { moreShopTimeSlots.mobileTimeSlotsData.days ); + this.showMobileFirstModal(); + return moreShopTimeSlots; }, async initializeDatePicker() { this.selectedDate = null; + const includeMobileTimeSlots = this.isServiceableMobile; + const includeInshopTimeSlots = this.isServiceableInshop || this.isServiceableDropoff; const datePickerInitialData = await this.$refs.datePicker.loadInitialData({ // setup config options for date-picker selectableDatesSetting: "custom", @@ -1225,8 +1205,8 @@ export default { preSelectedDate: this.preSelectedDate, providerNumber: this.selectedProvider?.providerNumber, zipCode: this.zipCode, - includeMobileTimeSlots: this.isServiceableMobile, - includeInshopTimeSlots: this.isServiceableInshop || this.isServiceableDropoff, + includeMobileTimeSlots: includeMobileTimeSlots, + includeInshopTimeSlots: includeInshopTimeSlots, }); datePickerInitialData.pricingByDayBasePrice = this.pricingByDayBasePrice; datePickerInitialData.pricingByDayUpcharge = this.pricingByDayUpcharge; @@ -1242,8 +1222,8 @@ export default { } else { // if no date is preselected on load, make sure there are some dates available if ( - this.selectableDatesInshop.days.length < 1 || - this.selectableDatesMobile.days.length < 1 + (includeInshopTimeSlots && this.selectableDatesInshop.days.length < 1) || + (includeMobileTimeSlots && this.selectableDatesMobile.days.length < 1) ) { await this.$nextTick(); await this.$refs.datePicker.showAnotherMonth(); @@ -1667,15 +1647,9 @@ export default { this.selectedProvider = new Provider(); this.updateSelectedProvider(); }, - updateSelectedProvider(newProvider) { - if (newProvider) { - const didProviderNumberChange = - this.selectedProvider.providerNumber !== newProvider.providerNumber; - this.selectedProvider = newProvider; - - if (didProviderNumberChange) { - this.initializeDatePicker(); - } + updateSelectedProvider(newShopProvider) { + if (newShopProvider) { + this.selectedProvider = newShopProvider; } else if (this.appointmentType === this.appointmentTypeStrings.MOBILE) { this.selectedProvider = { providerNumber: this.shopProviderData.mobileProviderNumber.toString(), @@ -1742,6 +1716,7 @@ export default { } this.appointmentType = AppointmentTypeStrings.MOBILE; this.updateSelectedProvider(); + this.showMobileFirstModal(); } else if (newAppointmentType) { if (this.appointmentType != AppointmentTypeStrings.MOBILE) { // Clear last shop selected if appointment type was changed in any manner other than from Mobile @@ -1755,7 +1730,6 @@ export default { } else { this.appointmentType = AppointmentTypeStrings.IN_SHOP_OR_DROP_OFF; } - // make sure a selectedProvider exists this.updateSelectedProvider(this.lastSelectedInshopOrDropoffProvider); } else { @@ -1767,6 +1741,113 @@ export default { setSelectedDateToFirstAvailable() { this.selectedDate = this.getFirstAvailableDate(); }, + showMobileFirstModal() { + if (this.appointmentType == AppointmentTypeStrings.MOBILE) { + const isShowMobileFirstAppt = experimentMixin.methods.hasSettingEqualTo( + experimentSettings.SHOW_MOBILE_FIRST_APPT, + "true" + ); + const pmMobileDays = experimentMixin.methods.getSettingValue( + experimentSettings.SHOW_PM_MOBILE_DAYS + ); + const noPMMobileDays = experimentMixin.methods.getSettingValue( + experimentSettings.SHOW_NO_PM_MOBILE_DAYS + ); + const noMobileAvailableDays = experimentMixin.methods.getSettingValue( + experimentSettings.SHOW_NO_MOBILE_AVAILABLE_DAYS + ); + + let preSelectedMobileAppointment = null; + const todaysDate = getTodayDate(); + let firstMobilePMAppt = this.getFirstAvailableMobileApptByTOD("PM"); + if (!firstMobilePMAppt) { + return; + } + let firstMobilePMDate = firstMobilePMAppt ? firstMobilePMAppt.date : null; + let numberOfDaysToFirstMobilePMDate = + (new Date(firstMobilePMDate) - todaysDate) / (1000 * 60 * 60 * 24); + + const shouldExposeMobileFirstAppointment = () => { + return ( + firstMobilePMDate && + numberOfDaysToFirstMobilePMDate <= noMobileAvailableDays + ); + }; + + if (shouldExposeMobileFirstAppointment()) { + const mobileFirstExperiment = store.getters.applicationUser.experiments.find( + (e) => e.universeName === experimentUniverses.MOBILE_FIRST_APPOINTMENT + ); + const hasExposedMobileFirst = mobileFirstExperiment?.isExposed; + + if (!hasExposedMobileFirst && mobileFirstExperiment) { + baseMixin.methods.dispatchStoreActionWithLogging( + storeActions.LOG_EXPERIMENT_EXPOSURE_AND_UPDATE_STORE, + { + userId: getUserIdValue(), + deviceId: getDeviceIdValue(), + sessionKey: getSessionKeyValue(), + pageName: "schedule", + experiment: mobileFirstExperiment, + }, + "schedule", + false + ); + } + + if (isShowMobileFirstAppt) { + if (firstMobilePMDate && numberOfDaysToFirstMobilePMDate <= pmMobileDays) { + preSelectedMobileAppointment = firstMobilePMAppt; + } else if ( + firstMobilePMDate && + numberOfDaysToFirstMobilePMDate >= noPMMobileDays + ) { + let firstMobileAMAppt = this.getFirstAvailableMobileApptByTOD("AM"); + preSelectedMobileAppointment = firstMobileAMAppt + ? firstMobileAMAppt + : null; + !preSelectedMobileAppointment && + (preSelectedMobileAppointment = firstMobilePMAppt); + } + + this.$refs.mobileFirstModal.setSelectedAppointment( + preSelectedMobileAppointment + ); + this.$refs.mobileFirstModal.openModal(); + } + } + } + }, + getFirstAvailableMobileApptByTOD(timeOfDay) { + if (!this.selectableDatesMobile?.days?.length) { + return null; + } else { + for (const dateObj of this.selectableDatesMobile.days) { + let matchingTimeSlot = { + estimatedServiceMinutes: { + minimum: this.estimatedServiceMinutesMinimum, + maximum: this.estimatedServiceMinutesMaximum, + }, + timeSlot: null, + date: null, + }; + const isMatchingApptDay = dateObj.timeSlots.some( + (slot) => + slot.id.includes(timeOfDay) && + (matchingTimeSlot.timeSlot = slot) && + (matchingTimeSlot.date = dateObj.date) + ); + if (isMatchingApptDay && matchingTimeSlot) { + return matchingTimeSlot; + } + } + return null; + } + }, + updateTimeSlotandNavigateForward(timeSlotObj) { + this.updateTimeSlot(timeSlotObj); + this.forwardButtonAction(); + }, }, watch: { appointmentTypeFromAppointmentTypeQuestion: { @@ -1811,6 +1892,7 @@ export default { locationAlerts, textBlock, timeSlotQuestion, + mobileFirstModal, alert, serviceZipModalQuestion, @@ -1834,6 +1916,9 @@ export default { margin-bottom: 0.25rem; } } + &.hidden-background { + display: none; + } } .alert.alert-warning { .alert-heading { diff --git a/src/mixins/analytics-mixin.js b/src/mixins/analytics-mixin.js index d6b25b8dc..d52ce93b6 100644 --- a/src/mixins/analytics-mixin.js +++ b/src/mixins/analytics-mixin.js @@ -280,6 +280,8 @@ export default { sessionData.insuranceCo = order?.policy?.insuranceCompanyName; sessionData.deductible = order?.policy?.currentDeductible; sessionData.isVerified = order?.payment?.insuranceCoverage?.isVerified ?? false; + sessionData.coverageStatus = order?.payment?.insuranceCoverage?.coverageStatus; + sessionData.coverageSubStatus = order?.payment?.insuranceCoverage?.coverageSubStatus; sessionData.isNoComp = order?.policy?.isNoComp; sessionData.isItac = order?.policy?.isItac; sessionData.subTotalPrice = getSubTotal(order?.lineItems); @@ -469,7 +471,7 @@ export default { } // Cash Quote or Cash Price Sub Total - payload.cashPriceSubTotal = store.getters.order?.cashPriceSubTotal ?? ""; + payload.cashPriceSubTotal = order?.cashPriceSubTotal ?? ""; //unverified (in scenarios we don’t display the price) if ( diff --git a/src/store/index.js b/src/store/index.js index 475076c86..6bccc5969 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -59,6 +59,7 @@ import { } from "@/helpers/recal-helper"; import { externalParameterStatus } from "@/constants/external-parameters"; import { experimentSettings } from "@/constants/experiments"; +import { addPricesToLineItems } from "@/helpers/pricing-helper"; // Export State const getDefaultState = () => { @@ -1636,6 +1637,8 @@ export const actions = { insuranceCo, deductible, isVerified, + coverageStatus, + coverageSubStatus, isNoComp, isItac, subTotalPrice, @@ -1659,6 +1662,8 @@ export const actions = { hasVin: hasVin, cashOrInsuranceAccountType: cashOrInsuranceAccountType, isVerified: isVerified, + coverageStatus: coverageStatus, + coverageSubStatus: coverageSubStatus, damageType: damageType, productType: productType, eon: eon, @@ -3063,8 +3068,14 @@ export const actions = { pageNameToLog, } ) { + const arrayOfLineItems = [ + ...(pricedLineItems.glassParts ?? []), + ...(pricedLineItems.promos ?? []), + ...(pricedLineItems.supportingItems ?? []), + ...(pricedLineItems.vaps ?? []), + ]; const flattenedLineItemsWithChildParts = - getFlattenedArrayOfLineItemsWithChildParts(pricedLineItems); + getFlattenedArrayOfLineItemsWithChildParts(arrayOfLineItems); const lineItemsWithOnlyPriceInfo = flattenedLineItemsWithChildParts.map((lineItem) => ({ partNumber: lineItem.partNumber, @@ -3113,8 +3124,12 @@ export const actions = { }); context.commit(storeMutations.UPDATE_LINE_ITEMS_SERVER_DATA, response.data.serverData); - - pricedLineItems = addTaxesToPricedLineItems(pricedLineItems, response.data.taxedLineItems); + Object.keys(pricedLineItems).forEach((key) => { + pricedLineItems[key] = addTaxesToPricedLineItems( + pricedLineItems[key] ?? [], + response.data.taxedLineItems + ); + }); return pricedLineItems; }, @@ -3796,26 +3811,6 @@ function convertGlassPieceNamingFromApi(glassArray) { return glassArray; } -function addPricesToLineItems(lineItems, pricingLineItems) { - lineItems.forEach((lineItem) => { - const lineItemIndex = pricingLineItems.findIndex( - (pricingLineItem) => pricingLineItem.partNumber === lineItem.partNumber - ); - - if (lineItem.childParts) { - addPricesToLineItems(lineItem.childParts, pricingLineItems); - } - - const pricedLineItem = pricingLineItems.splice(lineItemIndex, 1)[0]; - lineItem.laborAmount = pricedLineItem.laborAmount; - lineItem.sellingPrice = pricedLineItem.sellingPrice; - lineItem.kitPrice = pricedLineItem.kitPrice; - lineItem.salesTax = pricedLineItem.salesTax; - }); - - return lineItems; -} - function addTaxesToPricedLineItems(pricedLineItems, taxingLineItems = []) { pricedLineItems.forEach((pricedLineItem) => { const lineItemIndex = taxingLineItems.findIndex( diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index c0a69a112..0c275ad51 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -123,14 +123,15 @@ $body-color: $gray-600; //Fonts $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif; -$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", - monospace; +$font-family-monospace: + UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; // stylelint-enable value-keyword-case $font-family-base: $font-family-sans-serif; $font-family-code: $font-family-monospace; $font-size-base: 1rem; // Assumes the browser default, typically `16px` $font-size-12: $font-size-base * 0.75; // 12px +$font-size-14: $font-size-base * 0.875; // 14px $font-size-20: $font-size-base * 1.25; // 20px //Custom Font size (extra small)