From 9ddc157ed3616d69e273dc409dbb11805b87527a Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Mon, 4 Mar 2024 15:38:08 -0500 Subject: [PATCH 1/7] display service duration --- .../order-confirmation/order-confirmation.vue | 94 +++++++++++++++---- 1 file changed, 74 insertions(+), 20 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 38f2dc9e..775630ef 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -29,6 +29,10 @@ class="appointment-text text-center text-color--black lh-base" v-html="appointmentWordingText"> +
+
${this.providerAddress},
${this.providerCity}, ${this.providerState} ${this.providerZipCode}
`; }, appointmentWordingText() { - return this.formatWordingText(this.appointmentType); + switch (this.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 + ); + default: + return null; + } + }, + appointmentWordingText2() { + switch (this.appointmentType) { + case 'MOBILE': + return this.mobileWordingText2; + case 'DROP OFF': + return this.dropOffAndInShopWordingText2; + case 'INSHOP': + return this.dropOffAndInShopWordingText2?.replaceAll( + '{custom:inShopDuration}', + this.inShopAppointmentDuration + ); + default: + return null; + } + }, + mobileAppointment() { + return this.mainStore.order.serviceLocation.appointmentType.toUpperCase() === 'MOBILE'; + }, + inShopAppointment() { + return this.mainStore.order.serviceLocation.appointmentType.toUpperCase() === 'INSHOP'; + }, + dropOffAppointment() { + return this.mainStore.order.serviceLocation.appointmentType.toUpperCase() === 'DROP OFF'; + }, + inShopAppointmentDuration() { + const inshopDurationTime = getDisplayTextForDurationLength( + this.mainStore.order.schedule.jobMinMinutes, + this.mainStore.order.schedule.jobMaxMinutes + ); + return inshopDurationTime; } }, mounted() { @@ -192,23 +252,17 @@ export 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; } From 7651441115e2f08cd49e8eee4accb4dc7eb027af Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Mon, 4 Mar 2024 15:42:00 -0500 Subject: [PATCH 2/7] style fix --- src/layouts/order-confirmation/order-confirmation.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 775630ef..4b299b07 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -26,11 +26,11 @@

{{ appointmentTimeFormatted }}

@@ -308,6 +308,7 @@ $page-side-padding: 1.5rem; .appointment-text { :deep(strong) { font-weight: $font-weight-bold; + color: $black; } } From cf850358ae8b2591a37f5d4bb6bd053094482ff2 Mon Sep 17 00:00:00 2001 From: Michaela Brydon Date: Tue, 5 Mar 2024 10:44:35 -0500 Subject: [PATCH 3/7] Reverting problematic change --- src/store/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/store/index.js b/src/store/index.js index 3ba028ec..5017c884 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -950,7 +950,6 @@ export const useMainStore = defineStore({ const { glassParts } = this.lineItems; const { carId } = this.vehicle; const { isRepair, numberOfChips } = this.damage; - const { parentAccountNumber } = this.issConfig; return globalMethods .callHttpClient({ @@ -959,7 +958,7 @@ export const useMainStore = defineStore({ payload: { carId, damageType: isRepair ? 'Repair' : 'Replace', - parentAccountNumber, + parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER, parts: glassParts ?? [], numberOfRepairChips: isRepair ? numberOfChips : 0 } From 844d1b0215ab3cc5a7f13f2e8cddde0f32d095e3 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Tue, 5 Mar 2024 11:22:00 -0500 Subject: [PATCH 4/7] unit tests --- .../order-confirmation.spec.js | 110 +++++++++++++++++- .../order-confirmation/order-confirmation.vue | 2 +- 2 files changed, 108 insertions(+), 4 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js index 590b5c1b..1984ef04 100644 --- a/src/layouts/order-confirmation/order-confirmation.spec.js +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -12,10 +12,18 @@ 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}'; +const inShopDuration = '60-90 minutes'; +jest.mock('@/helpers/date-helper', () => ({ + getDisplayTextForDurationLength: jest.fn().mockImplementation(() => inShopDuration), + convertDateStringToDate: jest.fn(), + get12HourTimeFormat: jest.fn() +})); + const mockMixin = { methods: { getCmsContent: jest.fn().mockImplementation(() => wordingText), @@ -34,12 +42,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 +84,8 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu mountOptions.global.stubs = { siteFooter: footerStub, - siteHeader: headerStub + siteHeader: headerStub, + vehicleBanner: vehicleBannerStub }; const testingPinia = createTestingPinia({ @@ -110,6 +125,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 = { @@ -324,5 +349,84 @@ 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: 'Drop Off' + } + } + }; + 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); + }); + test('inShopAppointmentDuration should return appointment length', () => { + // Arrange + const { wrapper } = getMountedComponent(initialStore); + + // Act + const testValue = wrapper.vm.inShopAppointmentDuration; + + // Assert + expect(testValue).toEqual(inShopDuration); + }); }); }); diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 4b299b07..25911e24 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -120,7 +120,7 @@ export default { // This conversion ensures we don't get get GMT induced date changes const dateObject = convertDateStringToDate(this.appointmentDate); // Ex: Tuesday, April 22 - return dateObject.toLocaleDateString('en-us', { + return dateObject?.toLocaleDateString('en-us', { weekday: 'long', month: 'long', day: 'numeric' From ddb49a8e7ce2fb85d06ed74dd7669b9119d68b91 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Tue, 5 Mar 2024 13:26:12 -0500 Subject: [PATCH 5/7] final fixes --- .../order-confirmation.spec.js | 17 ----------------- .../order-confirmation/order-confirmation.vue | 2 +- 2 files changed, 1 insertion(+), 18 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js index 1984ef04..d53eacbd 100644 --- a/src/layouts/order-confirmation/order-confirmation.spec.js +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -17,13 +17,6 @@ jest.mock('@/helpers/cms-content-helper', () => ({ })); const wordingText = 'wording Text {custom:address}'; -const inShopDuration = '60-90 minutes'; -jest.mock('@/helpers/date-helper', () => ({ - getDisplayTextForDurationLength: jest.fn().mockImplementation(() => inShopDuration), - convertDateStringToDate: jest.fn(), - get12HourTimeFormat: jest.fn() -})); - const mockMixin = { methods: { getCmsContent: jest.fn().mockImplementation(() => wordingText), @@ -418,15 +411,5 @@ describe('OrderConfirmation.vue', () => { // Assert expect(testValue).toEqual(expected); }); - test('inShopAppointmentDuration should return appointment length', () => { - // Arrange - const { wrapper } = getMountedComponent(initialStore); - - // Act - const testValue = wrapper.vm.inShopAppointmentDuration; - - // Assert - expect(testValue).toEqual(inShopDuration); - }); }); }); diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 25911e24..4b299b07 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -120,7 +120,7 @@ export default { // This conversion ensures we don't get get GMT induced date changes const dateObject = convertDateStringToDate(this.appointmentDate); // Ex: Tuesday, April 22 - return dateObject?.toLocaleDateString('en-us', { + return dateObject.toLocaleDateString('en-us', { weekday: 'long', month: 'long', day: 'numeric' From a1b66955220c44c7bc272d858cc644d8db4ab272 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Tue, 5 Mar 2024 14:05:00 -0500 Subject: [PATCH 6/7] PR feedback refactoring, unit test fixes --- .../order-confirmation.spec.js | 6 ++--- .../order-confirmation/order-confirmation.vue | 27 ++++++++++--------- src/store/index.js | 1 + 3 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.spec.js b/src/layouts/order-confirmation/order-confirmation.spec.js index d53eacbd..5883b9d1 100644 --- a/src/layouts/order-confirmation/order-confirmation.spec.js +++ b/src/layouts/order-confirmation/order-confirmation.spec.js @@ -233,7 +233,7 @@ describe('OrderConfirmation.vue', () => { endTime: '10:00' }, serviceLocation: { - appointmentType: 'Drop Off' + appointmentType: 'Dropoff' } } }; @@ -300,7 +300,7 @@ describe('OrderConfirmation.vue', () => { zipCode: '12345' } }, - appointmentType: 'Drop Off' + appointmentType: 'Dropoff' } } }; @@ -387,7 +387,7 @@ describe('OrderConfirmation.vue', () => { zipCode: '12345' } }, - appointmentType: 'Drop Off' + appointmentType: 'Dropoff' } } }; diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 4b299b07..d6c7b2d2 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -61,6 +61,7 @@ import { useMainStore } from '@/store'; import { get12HourTimeFormat, get12HourTimeMobileFormat, convertDateStringToDate, getDisplayTextForDurationLength } from '@/helpers/date-helper.js'; import { toTitleCase } from '@/helpers/text-helper.js'; +import { AppointmentTypeStrings } from '@/constants/schedule-constants'; export default { name: 'order-confirmation', @@ -105,7 +106,7 @@ export default { return this.getCmsContent('OrderConfirmationContent', 'Image'); }, appointmentType() { - return this.mainStore.order.serviceLocation.appointmentType.toUpperCase(); + return this.mainStore.order.serviceLocation.appointmentType; }, appointmentDate() { return this.mainStore.order.schedule.date; @@ -179,17 +180,17 @@ export default { }, appointmentWordingText() { switch (this.appointmentType) { - case 'MOBILE': + case AppointmentTypeStrings.MOBILE || AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: return this.mobileWordingText?.replaceAll( '{custom:address}', this.serviceLocationFullAddress ); - case 'DROP OFF': + case AppointmentTypeStrings.DROP_OFF: return this.dropOffAndInShopWordingText?.replaceAll( '{custom:address}', this.providerFullAddress ); - case 'INSHOP': + case AppointmentTypeStrings.IN_SHOP: return this.dropOffAndInShopWordingText?.replaceAll( '{custom:address}', this.providerFullAddress @@ -200,11 +201,11 @@ export default { }, appointmentWordingText2() { switch (this.appointmentType) { - case 'MOBILE': + case AppointmentTypeStrings.MOBILE || AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: return this.mobileWordingText2; - case 'DROP OFF': + case AppointmentTypeStrings.DROP_OFF: return this.dropOffAndInShopWordingText2; - case 'INSHOP': + case AppointmentTypeStrings.IN_SHOP: return this.dropOffAndInShopWordingText2?.replaceAll( '{custom:inShopDuration}', this.inShopAppointmentDuration @@ -214,13 +215,13 @@ export default { } }, mobileAppointment() { - return this.mainStore.order.serviceLocation.appointmentType.toUpperCase() === 'MOBILE'; + return useMainStore().getters.isMobileAppointment; }, inShopAppointment() { - return this.mainStore.order.serviceLocation.appointmentType.toUpperCase() === 'INSHOP'; + return useMainStore().getters.isInShopAppointment; }, dropOffAppointment() { - return this.mainStore.order.serviceLocation.appointmentType.toUpperCase() === 'DROP OFF'; + return useMainStore().getters.isDropOffAppointment; }, inShopAppointmentDuration() { const inshopDurationTime = getDisplayTextForDurationLength( @@ -241,12 +242,12 @@ export default { }, formatAppointmentTime(appointmentType) { switch (appointmentType) { - case 'MOBILE': + case AppointmentTypeStrings.MOBILE || 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; diff --git a/src/store/index.js b/src/store/index.js index 5017c884..e34a7fcd 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -237,6 +237,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, From 018e27679afb67706f3cf004621667b526b1a1a6 Mon Sep 17 00:00:00 2001 From: Katie Kroell Date: Tue, 5 Mar 2024 14:22:12 -0500 Subject: [PATCH 7/7] logic/prereq updates --- .../order-confirmation/order-confirmation.vue | 15 +++++++++------ src/layouts/payment-method/payment-method.vue | 3 ++- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index d6c7b2d2..f1bddf9e 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -180,7 +180,8 @@ export default { }, appointmentWordingText() { switch (this.appointmentType) { - case AppointmentTypeStrings.MOBILE || AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: + case AppointmentTypeStrings.MOBILE: + case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: return this.mobileWordingText?.replaceAll( '{custom:address}', this.serviceLocationFullAddress @@ -201,7 +202,8 @@ export default { }, appointmentWordingText2() { switch (this.appointmentType) { - case AppointmentTypeStrings.MOBILE || AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: + case AppointmentTypeStrings.MOBILE: + case AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: return this.mobileWordingText2; case AppointmentTypeStrings.DROP_OFF: return this.dropOffAndInShopWordingText2; @@ -215,13 +217,13 @@ export default { } }, mobileAppointment() { - return useMainStore().getters.isMobileAppointment; + return this.mainStore.isMobileAppointment; }, inShopAppointment() { - return useMainStore().getters.isInShopAppointment; + return this.mainStore.isInShopAppointment; }, dropOffAppointment() { - return useMainStore().getters.isDropOffAppointment; + return this.mainStore.isDropOffAppointment; }, inShopAppointmentDuration() { const inshopDurationTime = getDisplayTextForDurationLength( @@ -242,7 +244,8 @@ export default { }, formatAppointmentTime(appointmentType) { switch (appointmentType) { - case AppointmentTypeStrings.MOBILE || AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP: + 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 AppointmentTypeStrings.DROP_OFF: 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);