diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js index 590b5c1b..5883b9d1 100644 --- a/src/layouts/order-confirmation/order-confirmation.spec.js +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -12,7 +12,8 @@ import { createTestingPinia } from '@pinia/testing'; jest.mock('@/helpers/layout-helper.js', () => jest.fn()); jest.mock('@/helpers/cms-content-helper', () => ({ - fetchCmsContentForPage: jest.fn() + fetchCmsContentForPage: jest.fn(), + processIfStatements: jest.fn() })); const wordingText = 'wording Text {custom:address}'; @@ -34,12 +35,18 @@ const headerStub = { render: () => {} }; +const vehicleBannerStub = { + render: () => {} +}; + const initialStore = { order: { schedule: { date: '2024-03-01', startTime: '09:00', - endTime: '10:00' + endTime: '10:00', + jobMinMinutes: 60, + jobMaxMinutes: 90 }, serviceLocation: { address: '123 Test Way', @@ -70,7 +77,8 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu mountOptions.global.stubs = { siteFooter: footerStub, - siteHeader: headerStub + siteHeader: headerStub, + vehicleBanner: vehicleBannerStub }; const testingPinia = createTestingPinia({ @@ -110,6 +118,16 @@ describe('OrderConfirmation.vue', () => { // Assert expect(siteHeader.exists()).toBe(true); }); + test('Should render Vehicle Banner', () => { + // Arrange + const { wrapper } = getMountedComponent(initialStore); + + // Act + const vehicleBanner = wrapper.findComponent(vehicleBannerStub); + + // Assert + expect(vehicleBanner.exists()).toBe(true); + }); test('If Advanced flow, should display Site Footer', () => { // Arrange const testStore = { @@ -215,7 +233,7 @@ describe('OrderConfirmation.vue', () => { endTime: '10:00' }, serviceLocation: { - appointmentType: 'Drop Off' + appointmentType: 'Dropoff' } } }; @@ -282,7 +300,7 @@ describe('OrderConfirmation.vue', () => { zipCode: '12345' } }, - appointmentType: 'Drop Off' + appointmentType: 'Dropoff' } } }; @@ -324,5 +342,74 @@ describe('OrderConfirmation.vue', () => { // Assert expect(testValue).toEqual('
123 Safelite Street,
Mesa, AZ 12345
'); }); + test('appointmentWordingText2 should return Mobile text in expected format', () => { + // Arrange + const testStore = { + order: { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' + }, + serviceLocation: { + address: '123 Test Way', + address2: '#1', + city: 'Mesa', + state: 'AZ', + zipCode: '12345', + appointmentType: 'Mobile' + } + } + }; + const { wrapper } = getMountedComponent(testStore); + + // Act + const testValue = wrapper.vm.appointmentWordingText2; + + // Assert + expect(testValue).toEqual(wordingText); + }); + test('appointmentWordingText2 should return Drop Off and text in expected format', () => { + // Arrange + const testStore = { + order: { + schedule: { + date: '2019-01-01', + startTime: '09:00', + endTime: '10:00' + }, + serviceLocation: { + provider: { + address: { + streetAddress: '123 Safelite Street', + city: 'Mesa', + state: 'AZ', + zipCode: '12345' + } + }, + appointmentType: 'Dropoff' + } + } + }; + const { wrapper } = getMountedComponent(testStore); + + // Act + const testValue = wrapper.vm.appointmentWordingText2; + const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); + + // Assert + expect(testValue).toEqual(expected); + }); + test('appointmentWordingText2 should return In Shop text in expected format', () => { + // Arrange + const { wrapper } = getMountedComponent(initialStore); + + // Act + const testValue = wrapper.vm.appointmentWordingText2; + const expected = wrapper.vm.getBodyText2FromCms('Test Widget'); + + // Assert + expect(testValue).toEqual(expected); + }); }); }); diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 38f2dc9e..f1bddf9e 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -26,9 +26,13 @@

{{ appointmentTimeFormatted }}

+
+
${this.providerAddress},
${this.providerCity}, ${this.providerState} ${this.providerZipCode}
`; }, appointmentWordingText() { - return this.formatWordingText(this.appointmentType); + switch (this.appointmentType) { + case AppointmentTypeStrings.MOBILE: + case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: + return this.mobileWordingText?.replaceAll( + '{custom:address}', + this.serviceLocationFullAddress + ); + case AppointmentTypeStrings.DROP_OFF: + return this.dropOffAndInShopWordingText?.replaceAll( + '{custom:address}', + this.providerFullAddress + ); + case AppointmentTypeStrings.IN_SHOP: + return this.dropOffAndInShopWordingText?.replaceAll( + '{custom:address}', + this.providerFullAddress + ); + default: + return null; + } + }, + appointmentWordingText2() { + switch (this.appointmentType) { + case AppointmentTypeStrings.MOBILE: + case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: + return this.mobileWordingText2; + case AppointmentTypeStrings.DROP_OFF: + return this.dropOffAndInShopWordingText2; + case AppointmentTypeStrings.IN_SHOP: + return this.dropOffAndInShopWordingText2?.replaceAll( + '{custom:inShopDuration}', + this.inShopAppointmentDuration + ); + default: + return null; + } + }, + mobileAppointment() { + return this.mainStore.isMobileAppointment; + }, + inShopAppointment() { + return this.mainStore.isInShopAppointment; + }, + dropOffAppointment() { + return this.mainStore.isDropOffAppointment; + }, + inShopAppointmentDuration() { + const inshopDurationTime = getDisplayTextForDurationLength( + this.mainStore.order.schedule.jobMinMinutes, + this.mainStore.order.schedule.jobMaxMinutes + ); + return inshopDurationTime; } }, mounted() { @@ -181,34 +244,29 @@ export default { }, formatAppointmentTime(appointmentType) { switch (appointmentType) { - case 'MOBILE': + case AppointmentTypeStrings.MOBILE: + case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: // eslint-disable-next-line max-len return `Between ${get12HourTimeMobileFormat(this.appointmentStartTime)} - ${get12HourTimeMobileFormat(this.appointmentEndTime)}`; - case 'DROP OFF': + case AppointmentTypeStrings.DROP_OFF: return 'Drop off before 9:30 AM'; - case 'INSHOP': + case AppointmentTypeStrings.IN_SHOP: return `at ${get12HourTimeFormat(this.appointmentStartTime)}`; default: return null; } }, - formatWordingText(appointmentType) { - switch (appointmentType) { - case 'MOBILE': - return this.mobileWordingText?.replaceAll( - '{custom:address}', - this.serviceLocationFullAddress - ); - case 'DROP OFF': - return this.dropOffAndInShopWordingText?.replaceAll( - '{custom:address}', - this.providerFullAddress - ); - case 'INSHOP': - return this.dropOffAndInShopWordingText?.replaceAll( - '{custom:address}', - this.providerFullAddress - ); + processIfStatements, + getBodyText2FromCms(cmsWidgetName) { + const body2Text = this.getCmsContent(cmsWidgetName, 'BodyText2'); + return this.processIfStatements(body2Text, 'custom', this.getCustomValueFromString); + }, + getCustomValueFromString(str) { + switch (str) { + case 'inShopAppointment': + return this.inShopAppointment; + case 'dropOffAppointment': + return this.dropOffAppointment; default: return null; } @@ -254,6 +312,7 @@ $page-side-padding: 1.5rem; .appointment-text { :deep(strong) { font-weight: $font-weight-bold; + color: $black; } } diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 8b03a875..ab362f4c 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -178,7 +178,8 @@ export default { && providerLocation.zipCode ); - const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE; + const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE + || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; const serviceLocationReqs = (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs); diff --git a/src/store/index.js b/src/store/index.js index 3c0dc489..c06022e0 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -253,6 +253,7 @@ export const useMainStore = defineStore({ isMobileAppointment: (state) => state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE || state.order.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP, isDropOffAppointment: (state) => state.order.serviceLocation.appointmentType === AppointmentTypeStrings.DROP_OFF, + isInShopAppointment: (state) => state.order.serviceLocation.appointmentType === AppointmentTypeStrings.IN_SHOP, isClaimRegistrationRequired: (state) => state.issConfig.isClaimRegistrationRequired, isClaimAlreadyRegistered: (state) => state.order.payment.insuranceCoverage.claimNumber !== null, isBailout: (state) => state.applicationUser.pageData[issPageValues.BAILOUT_PAGE] != null,