jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/develop' into feature/digital/SSR-1081

Browse source
This commit is contained in:
Matt Caimi 2024-03-05 15:00:37 -05:00
commit 71b337097e
4 changed files with 180 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
src/layouts/order-confirmation/order-confirmation.spec.js
View file

@ -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('<br/>123 Safelite Street,<br/> Mesa, AZ 12345<br/>');
});
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);
});
});
});

109
src/layouts/order-confirmation/order-confirmation.vue
View file

@ -26,9 +26,13 @@
<p>{{ appointmentTimeFormatted }}</p>
</div>
<div
class="appointment-text text-center text-color--black lh-base"
class="appointment-text text-center lh-base"
v-html="appointmentWordingText">
</div>
<div
class="appointment-text text-center lh-base mt-2"
v-html="appointmentWordingText2">
</div>
</div>
<siteFooter
v-if="carrierUrl"
@ -49,13 +53,15 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
// Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from '@/store';
import { get12HourTimeFormat, get12HourTimeMobileFormat, convertDateStringToDate } from '@/helpers/date-helper.js';
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',
@ -100,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;
@ -128,9 +134,15 @@ export default {
mobileWordingText() {
return this.getCmsContent('MobileWordingWidget', 'BodyText');
},
mobileWordingText2() {
return this.getCmsContent('MobileWordingWidget', 'BodyText2');
},
dropOffAndInShopWordingText() {
return this.getCmsContent('DropOffAndInShopWordingWidget', 'BodyText');
},
dropOffAndInShopWordingText2() {
return this.getBodyText2FromCms('DropOffAndInShopWordingWidget');
},
serviceLocationAddress() {
return this.mainStore.order.serviceLocation.address;
},
@ -167,7 +179,58 @@ export default {
return `<br/>${this.providerAddress},<br/> ${this.providerCity}, ${this.providerState} ${this.providerZipCode}<br/>`;
},
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;
}
}
</style>

3
src/layouts/payment-method/payment-method.vue
View file

@ -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);

4
src/store/index.js
View file

@ -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,
@ -964,7 +965,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({
@ -973,7 +973,7 @@ export const useMainStore = defineStore({
payload: {
carId,
damageType: isRepair ? 'Repair' : 'Replace',
parentAccountNumber,
parentAccountNumber: applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
parts: glassParts ?? [],
numberOfRepairChips: isRepair ? numberOfChips : 0
}