-
-
-
+ class="subheader" />
-
-
+
+ {{ scheduleRecalText }}
+ {{ appointmentQuestionText }}
+
+
+
-
-
+
+
+
+
+
+ {{ mobileZipError }}
+
+
+
@@ -118,44 +138,31 @@
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
-import { required } from '@/helpers/validation-rules';
import errorMessages from '@/constants/error-messages';
import { useMainStore } from '@/store';
import {
getPricedMobileFeePart,
getServiceabilityDetails,
- getZipCodeData
+ getZipCodeData,
+ getMobileZipCodeData
} from '@/helpers/service-location-helper';
+import { toTitleCase } from '@/helpers/text-helper.js';
+import { getAvailabilityRating } from '@/helpers/service-location-helper';
// Import Component
import alert from '@/ux-components/alert/alert.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
import appointmentTypeQuestion from '@/layouts/service-location/appointment-type-question/appointment-type-question.vue';
import baseFormMixin from '@/mixins/base-form-mixin';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
-import mobileLocationModalQuestions from '@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue';
import { Form, defineRule } from 'vee-validate';
-import shopQuestion from '@/layouts/service-location/shop-question/shop-question.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
-import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';
+import shopAddress from '@/layouts/service-location/shop-address/shop-address.vue';
+import serviceZipQuestion from '@/layouts/service-location/service-zip-question/service-zip-question.vue';
+import widgetFields from '@/constants/cms-widget-fields';
-// DEFINE VALIDATION RULES
-defineRule('mobile-location-required', (value) => {
- if (
- value.addressQuestions.streetAddress === ''
- || value.addressQuestions.city === ''
- || value.addressQuestions.state === ''
- || value.addressQuestions.zipCode === ''
- || value.isVehicleProtected == null
- ) {
- return errorMessages.MOBILE_LOCATION_REQUIRED;
- }
- return true;
-});
-defineRule('selection-required', required(errorMessages.OPTION_REQUIRED));
-
-const SHOP_QUESTION_REF_NAME = 'shopQuestion';
const RECAL_MODAL_REF_NAME = 'RecalModal';
const SITE_FOOTER_REF_NAME = 'siteFooter';
@@ -163,16 +170,16 @@ export default {
name: 'service-location',
components: {
alert,
+ textBlock,
appointmentTypeQuestion,
contentGroupModal,
- mobileLocationModalQuestions,
siteFooter,
siteHeader,
siteSubHeader,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
- serviceZipModalQuestion,
- shopQuestion
+ shopAddress,
+ serviceZipQuestion
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
@@ -182,8 +189,8 @@ export default {
const zipCodeData = getZipCodeData(serviceZipCode);
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode);
- const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode);
const getGlassFeesPromise = useMainStore().getGlassFees();
+ const providersPromise = useMainStore().getProviders(serviceZipCode);
// Settle promises and get results
const promiseResultMap = [
@@ -203,13 +210,13 @@ export default {
resultKey: 'serviceabilityDetails',
promise: serviceabilityDetailsPromise
},
- {
- resultKey: 'shopQuestionInitialData',
- promise: shopQuestionInitialDataPromise
- },
{
resultKey: 'zipCodeData',
promise: zipCodeData
+ },
+ {
+ resultKey: 'providers',
+ promise: providersPromise
}
];
@@ -221,10 +228,9 @@ export default {
resultMap.zipCodeData,
resultMap.serviceabilityDetails,
resultMap.mobileFeePart,
- resultMap.shopQuestionInitialData?.mobileProviderNumber,
- resultMap.glassFees
+ resultMap.glassFees,
+ resultMap.providers
);
- vm.$refs[SHOP_QUESTION_REF_NAME].initializeComponent(resultMap.shopQuestionInitialData);
});
},
setup() {
@@ -238,7 +244,6 @@ export default {
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
- isVehicleProtected: this.getIsVehicleProtectedFromStore(),
isGlassServiceableInshop: null,
isRecalibrationServiceableInshop: null,
isGlassServiceableMobile: null,
@@ -249,9 +254,13 @@ export default {
mobileProviderNumber: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null,
- SHOP_QUESTION_REF_NAME,
+ mobileZipCode: '',
+ mobileZipError: '',
+ militaryBaseWarningExpanded: false,
+ availabilityRating: null,
RECAL_MODAL_REF_NAME,
- SITE_FOOTER_REF_NAME
+ SITE_FOOTER_REF_NAME,
+ errorMessages
};
},
computed: {
@@ -264,61 +273,6 @@ export default {
answersFromCms() {
return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers');
},
- serviceZipCodeQuestion: {
- get() {
- return {
- state: this.state,
- zipCode: this.zipCode
- };
- },
- set(newValue) {
- if (newValue.zipCode !== this.zipCode) {
- this.resetMobileLocation();
- this.selectedAppointmentType = null;
- this.selectedProvider = null;
- }
-
- this.state = newValue.state;
- this.zipCode = newValue.zipCode;
-
- // eslint-disable-next-line vue/valid-next-tick
- this.$nextTick();
- }
- },
- mobileLocationQuestions: {
- get() {
- return {
- addressQuestions: {
- streetAddress: this.streetAddress,
- streetAddress2: this.streetAddress2,
- city: this.city,
- state: this.state,
- zipCode: this.zipCode
- },
- isVehicleProtected: this.isVehicleProtected
- };
- },
- set(newValue) {
- this.streetAddress = newValue.addressQuestions.streetAddress;
- this.streetAddress2 = newValue.addressQuestions.streetAddress2;
- this.city = newValue.addressQuestions.city;
- this.state = newValue.addressQuestions.state;
- this.zipCode = newValue.addressQuestions.zipCode;
- this.isVehicleProtected = newValue.isVehicleProtected;
-
- if (newValue.zipCode !== this.zipCode) {
- if (
- !(
- this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
- || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
- )
- ) {
- this.selectedAppointmentType = null;
- }
- this.selectedProvider = null;
- }
- }
- },
isServiceableMobile() {
if (this.isRecalibrationServiceableMobile !== null) {
return (
@@ -338,22 +292,14 @@ export default {
return this.isGlassServiceableInshop;
},
- isShopQuestionDisplayed() {
+ isInshop() {
return (
this.selectedAppointmentType === 'Inshop'
|| this.selectedAppointmentType === 'Dropoff'
);
},
- isAppointmentTypeDisplayed() {
- return this.zipCode && !this.displayNoShopsAlert;
- },
- isMobileLocationDisplayed() {
- return (
- this.selectedAppointmentType
- === AppointmentTypeStrings.MOBILE
- || this.selectedAppointmentType
- === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
- );
+ isMobile() {
+ return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
},
requiresInshopRecalibration() {
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
@@ -375,15 +321,17 @@ export default {
displayRecalibrationWarning() {
return this.requiresInshopRecalibration;
},
+ displayLowAvailabilityInshop() {
+ return this.availabilityRating === 'low' && this.isInshop;
+ },
displayServiceableInshopOnly() {
- return (
- !this.displayRecalibrationWarning
- && this.isServiceableInshop
- && !this.isServiceableMobile
- );
+ return !this.isServiceableMobile && this.isServiceableInshop && !this.displayRecalibrationWarning;
},
displayServiceableMobileOnly() {
- return this.isServiceableMobile && !this.isServiceableInshop;
+ return this.isServiceableMobile && this.recalibrationRequired && !this.isServiceableInshop;
+ },
+ displayMobileFeeDisclaimer() {
+ return this.mainStore.isNoComp || this.mainStore.isITAC;
},
navigateBackScenario() {
const { isNoComp, isITAC } = useMainStore();
@@ -393,6 +341,38 @@ export default {
},
isBigTruck() {
return this.mainStore.order.vehicle.isBigTruck;
+ },
+ mobileZipPlaceholder() {
+ return this.getCmsContent('MobileZipPlaceHolderWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+ },
+ militaryBaseWarningLinkText() {
+ return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.HEADLINE_TEXT);
+ },
+ militaryBaseWarningText() {
+ return this.getCmsContent('AlertMilitaryBaseZipWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
+ },
+ appointmentQuestionText() {
+ return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+ },
+ scheduleRecalText() {
+ if(this.requiresInshopRecalibration) {
+ return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+ } else {
+ return this.getCmsContent('WhereWouldYouLikeServiceWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+ }
+ },
+ inShopOnlyCopy() {
+ let content = this.getCmsContent('AlertInshopOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
+ content = content.replace('{custom:city}', toTitleCase(this.city));
+ return content;
+ },
+ mobileOnlyCopy() {
+ let content = this.getCmsContent('AlertMobileOnlyWidget', widgetFields.ALERT_WIDGET.BODY_TEXT);
+ content = content.replace('{custom:city}', toTitleCase(this.city));
+ return content;
+ },
+ recalibrationRequired() {
+ return this.mainStore.hasRecalibrationPart;
}
},
methods: {
@@ -401,13 +381,10 @@ export default {
useMainStore().order.serviceLocation.zipCode !== null
);
},
- async reloadShopData(zipCode) {
- await this.$refs[SHOP_QUESTION_REF_NAME].reloadShopData(zipCode);
- },
async forwardButtonAction() {
let provider = this.selectedProvider;
this.mainStore.updateMobileFee(null);
- if (this.isMobileLocationDisplayed) {
+ if (this.isMobile) {
if (this.mainStore.isNoComp || this.mainStore.isITAC) {
this.mainStore.updateMobileFee(this.mobileFeePart);
}
@@ -432,7 +409,6 @@ export default {
zipCode: this.zipCode,
zipCodeCtu: this.zipCodeCtu,
appointmentType: this.selectedAppointmentType,
- isVehicleProtected: this.isVehicleProtected,
provider
});
@@ -466,9 +442,6 @@ export default {
|| useMainStore().order.customer.address.zipCode
);
},
- getIsVehicleProtectedFromStore() {
- return useMainStore().order.serviceLocation.isVehicleProtected;
- },
getSelectedAppointmentType() {
return useMainStore().order.serviceLocation.appointmentType;
},
@@ -482,12 +455,13 @@ export default {
zipCodeData,
serviceabilityDetails,
mobileFeePart,
- mobileProviderNumber,
- glassFees
+ glassFees,
+ providers
) {
if (zipCodeData) {
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
this.zipCodeCtu = zipCodeData.zipCodeCtu;
+ this.city = zipCodeData.city;
}
if (serviceabilityDetails) {
@@ -498,8 +472,24 @@ export default {
this.mobileFeePart = mobileFeePart;
}
- if (mobileProviderNumber) {
- this.setMobileProviderNumber(mobileProviderNumber);
+ if (providers) {
+ this.setMobileProviderNumber(providers.mobileProviderNumber);
+ let foundMatch = false;
+ if(this.selectedProvider && this.selectedProvider.providerNumber) {
+ const matchedProvider = providers.shopProviders.find(
+ (provider) => provider.providerNumber === this.selectedProvider.providerNumber
+ );
+ if (matchedProvider) {
+ foundMatch = true;
+ this.selectedProvider = matchedProvider;
+ }
+ }
+ if(providers.shopProviders.length > 0 && !foundMatch) {
+ this.selectedProvider = providers.shopProviders[0];
+ }
+ else if(providers.shopProviders.length === 0) {
+ this.selectedProvider = null;
+ }
}
if (glassFees) {
@@ -521,13 +511,6 @@ export default {
setMobileProviderNumber(providerNumber) {
this.mobileProviderNumber = providerNumber;
},
- resetMobileLocation() {
- this.streetAddress = '';
- this.streetAddress2 = '';
- this.city = '';
-
- this.isVehicleProtected = null;
- },
setServiceabilityDetails(serviceabilityDetails) {
this.isGlassServiceableInshop =
serviceabilityDetails.isGlassServiceableInshop;
@@ -537,14 +520,94 @@ export default {
serviceabilityDetails.isGlassServiceableMobile;
this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile;
+ if (!this.isServiceableMobile) {
+ this.selectedAppointmentType = AppointmentTypeStrings.IN_SHOP;
+ }
+ },
+ async updateMobileZip() {
+ this.mobileZipError = '';
+
+ const zipCodeData = await getMobileZipCodeData(this.mobileZipCode);
+
+ if (!zipCodeData.isValid) {
+ this.mobileZipError = errorMessages.INVALID_ZIP;
+ } else if (!zipCodeData.isServiceable) {
+ this.mobileZipError = errorMessages.NO_SERVICE_IN_AREA(toTitleCase(zipCodeData.city));
+ } else {
+ this.city = zipCodeData.city;
+ this.zipCode = this.mobileZipCode;
+ this.setCtuForMobile(zipCodeData.zipCodeCtu);
+ this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
+
+ const serviceabilityDetailsPromise = getServiceabilityDetails(this.mobileZipCode);
+ serviceabilityDetailsPromise.then((result) => {
+ const details = result.data;
+ if (details) {
+ this.setServiceabilityDetails(details);
+ }
+ });
+
+ const providersPromise = useMainStore().getProviders(this.mobileZipCode);
+ providersPromise.then((result) => {
+ const providers = result.data;
+ if (providers) {
+ this.setMobileProviderNumber(providers.mobileProviderNumber);
+ if(providers.shopProviders.length > 0) {
+ this.selectedProvider = providers.shopProviders[0];
+ }
+ else {
+ this.selectedProvider = null;
+ }
+ }
+ });
+ }
+ },
+ async handleInShopZipUpdated(newZip) {
+ this.zipCode = newZip;
+ const zipCodeData = await getZipCodeData(this.zipCode);
+ this.city = zipCodeData.city;
+ this.setCtuForMobile(zipCodeData.zipCodeCtu);
+ this.setContainsMilitaryBase(zipCodeData.containsMilitaryBase);
+
+ const serviceabilityDetailsPromise = getServiceabilityDetails(this.zipCode);
+ serviceabilityDetailsPromise.then((result) => {
+ const details = result.data;
+ if (details) {
+ this.setServiceabilityDetails(details);
+ }
+ });
+ }
+ },
+ watch: {
+ mobileZipCode(newZip) {
+ if(newZip !== '') {
+ this.updateMobileZip();
+ }
+ },
+ selectedAppointmentType() {
+ this.mobileZipCode = '';
+ if(this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP && this.selectedProvider) {
+ const startDate = new Date();
+ const endDate = new Date();
+ endDate.setDate(startDate.getDate() + 6);
+ const formattedStartDate = startDate.toISOString().split('T')[0];
+ const formattedEndDate = endDate.toISOString().split('T')[0];
+ getAvailabilityRating(
+ formattedStartDate,
+ formattedEndDate,
+ AppointmentTypeStrings.IN_SHOP,
+ this.selectedProvider ? this.selectedProvider.providerNumber : null
+ ).then((rating) => {
+ this.availabilityRating = rating;
+ });
+ }
}
}
};
-
diff --git a/src/layouts/service-location/shop-address/shop-address.vue b/src/layouts/service-location/shop-address/shop-address.vue
new file mode 100644
index 00000000..02f1c9d5
--- /dev/null
+++ b/src/layouts/service-location/shop-address/shop-address.vue
@@ -0,0 +1,411 @@
+
+
+
+
+
+
+ {{ displayedShopName }}
+ {{ modelValue.distanceInMiles?.toFixed(2) }} mi
+
+
{{ getProviderAddress(modelValue) }}
+
+ {{ getProviderCityZipState(modelValue) }}
+
+
+
+ {{ `No shops found within 100 miles of ${internalZipcode}` }}
+
+
+
+
+
+
+
+
+ {{ serviceZipPrompt }}
+
+
+
+ {{ errorMessage }}
+
+
+
+
+
+
+
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
deleted file mode 100644
index fdbbdd79..00000000
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ /dev/null
@@ -1,294 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap b/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
index 42ed6d08..7eeae7cd 100644
--- a/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
+++ b/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
@@ -2,24 +2,20 @@
exports[`tpa-submit returns the initial data 1`] = `
Object {
- "companyName": "Frederick Jones",
- "customValueMap": Object {
- "glassShop": "Frederick Jones",
+ "modalPositions": Object {
+ "center": "center",
+ "edge": "edge",
},
"sections": Array [],
"widget": Object {
- "damageLocations": "DamageLocationsWidget",
+ "alertIncomplete": "AlertIncompleteWidget",
+ "alertRecalWarning": "AlertRecalWarningWidget",
+ "contactDetails": "ContactDetailsSectionWidget",
+ "editShopLinkText": "EditShopLinkTextWidget",
"footer": "SiteFooterWidget",
"orderDetails": "OrderDetailsContent",
- "serviceSummary": "ServiceSummaryContent",
"siteHeader": "SiteHeaderWidget",
"siteSubHeader": "SiteSubHeaderWidget",
- "subheader": Object {
- "contactInfo": "ContactDetailsSubTitle",
- "damage": "DamageSubTitle",
- "shop": "PreferredShopSubTitle",
- "vehicle": "VehicleSubTitle",
- },
},
}
`;
diff --git a/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap b/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap
index 3b814991..842c5af2 100644
--- a/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap
+++ b/src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap
@@ -3,12 +3,18 @@
exports[`contact-details-drawer snapshot matches returns the initial data 1`] = `
Object {
"emailAddress": "fred.tay@gmail.com",
+ "extension": null,
"firstName": "Frederick",
"isModalOpened": false,
"lastName": "Taylor",
+ "modalPositions": Object {
+ "center": "center",
+ "edge": "edge",
+ },
"phoneNumber": "606-009-2943",
"rules": Object {
"emailAddress": "email-required|email-address-format",
+ "extension": "extension-format",
"firstName": "first-name-required",
"lastName": "last-name-required",
"phoneNumber": "phone-number-required|phone-number-format",
@@ -16,6 +22,7 @@ Object {
"widget": Object {
"drawerFooter": "ContactDetailsDrawerFooterWidget",
"emailQuestion": "EmailQuestionWidget",
+ "extensionQuestion": "ExtensionQuestionWidget",
"firstNameQuestion": "FirstNameQuestionWidget",
"lastNameQuestion": "LastNameQuestionWidget",
"phoneNumberQuestion": "PhoneNumberQuestionWidget",
diff --git a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js
index 9c579dbc..901effe9 100644
--- a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js
+++ b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js
@@ -65,15 +65,16 @@ describe('contact-details-drawer', () => {
describe('method', () => {
describe('saveContactDetails', () => {
test.each([
- ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909'],
- [null, 'Jones', 's.jones@gmail.com', '724-996-0909'],
- ['Sarah', null, 's.jones@gmail.com', '724-996-0909'],
- ['Sarah', 'Jones', null, '724-996-0909'],
- ['Sarah', 'Jones', 's.jones@gmail.com', null]
+ ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'],
+ [null, 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'],
+ ['Sarah', null, 's.jones@gmail.com', '724-996-0909', '12345'],
+ ['Sarah', 'Jones', null, '724-996-0909', '12345'],
+ ['Sarah', 'Jones', 's.jones@gmail.com', null, '12345'],
+ ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909', null],
])(
- 'when first name data "%p", last name "%p", email "%p", and phone number "%p", updateContactInfo called with expected',
- (firstName, lastName, emailAddress, phoneNumber) => {
+ 'when first name data "%p", last name "%p", email "%p", phone number "%p", and extension "%p", updateContactInfo called with expected',
+ (firstName, lastName, emailAddress, phoneNumber, extension) => {
// Arrange
const mainInitialState = {
order: {
@@ -81,12 +82,13 @@ describe('contact-details-drawer', () => {
firstName: 'Frederick',
lastName: 'Taylor',
emailAddress: 'fred.tay@gmail.com',
- servicePhone: '606-009-2943'
+ servicePhone: '606-009-2943',
+ extension: '11111'
}
}
};
const initialData = {
- firstName, lastName, emailAddress, phoneNumber
+ firstName, lastName, emailAddress, phoneNumber, extension
};
const { wrapper } = getMountedComponent(mainInitialState, initialData);
@@ -98,7 +100,7 @@ describe('contact-details-drawer', () => {
expect(useMainStore().updateContactInfo).toBeCalledTimes(1);
expect(useMainStore().updateContactInfo).toBeCalledWith({ firstName, lastName, emailAddress });
expect(useMainStore().updatePhoneNumbers).toBeCalledTimes(1);
- expect(useMainStore().updatePhoneNumbers).toBeCalledWith({ home: phoneNumber, service: phoneNumber });
+ expect(useMainStore().updatePhoneNumbers).toBeCalledWith({ home: phoneNumber, service: phoneNumber, extension: extension });
}
);
});
diff --git a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
index 334ba86a..9c94782a 100644
--- a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
+++ b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue
@@ -1,6 +1,7 @@
-
-
+
+
+
+
+
@@ -51,10 +60,11 @@ import modal from '@/digital-components/modal/modal.vue';
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
// Supporting Files
-import { useMainStore } from '@/store/index.js';
+import { useMainStore } from '@/store';
import globalRules from '@/constants/global-rules.js';
import MaskaFormattedMasks from '@/constants/maska-masks';
import widgetFields from '@/constants/cms-widget-fields.js';
+import { modalPositions } from '@/constants/component-variants';
export default {
name: 'contact-details-drawer',
@@ -67,27 +77,32 @@ export default {
const { firstName,
lastName,
emailAddress,
- servicePhone } = useMainStore().contactInfo;
+ servicePhone,
+ extension } = useMainStore().contactInfo;
return {
isModalOpened: false,
firstName,
lastName,
emailAddress,
phoneNumber: servicePhone,
+ extension: extension,
widget: {
title: 'ContactDetailsDrawerHeaderWidget',
firstNameQuestion: 'FirstNameQuestionWidget',
lastNameQuestion: 'LastNameQuestionWidget',
emailQuestion: 'EmailQuestionWidget',
phoneNumberQuestion: 'PhoneNumberQuestionWidget',
+ extensionQuestion: 'ExtensionQuestionWidget',
drawerFooter: 'ContactDetailsDrawerFooterWidget'
},
rules: {
firstName: globalRules.FIRST_NAME_REQUIRED,
lastName: globalRules.LAST_NAME_REQUIRED,
emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
- phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
- }
+ phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
+ extension: `${globalRules.EXTENSION_FORMAT}`
+ },
+ modalPositions
};
},
computed: {
@@ -121,10 +136,11 @@ export default {
lastName: this.lastName,
emailAddress: this.emailAddress
};
- useMainStore().updateContactInfo(contactInfo);
- useMainStore().updatePhoneNumbers({
+ this.mainStore.updateContactInfo(contactInfo);
+ this.mainStore.updatePhoneNumbers({
home: this.phoneNumber,
- service: this.phoneNumber
+ service: this.phoneNumber,
+ extension: this.extension
});
this.$emit('update-contact-details');
},
@@ -132,11 +148,13 @@ export default {
const { firstName,
lastName,
emailAddress,
- servicePhone } = useMainStore().contactInfo;
+ servicePhone,
+ extension } = this.mainStore.contactInfo;
this.firstName = firstName;
this.lastName = lastName;
this.emailAddress = emailAddress;
this.phoneNumber = servicePhone;
+ this.extension = extension;
},
openModal() {
this.modal.openModal();
@@ -155,5 +173,14 @@ export default {
font-size: $h5-font-size;
font-weight: $font-weight-normal !important;
}
+ .textbox-question {
+ margin-bottom: 1.25rem;
+ :deep(label:has(b)) {
+ font-weight: $font-weight-normal;
+ b {
+ font-weight: 600;
+ }
+ }
+ }
}
diff --git a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
index eda7c873..cf0b7b1f 100644
--- a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
+++ b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
@@ -18,7 +18,7 @@ describe('deductible-box', () => {
it('renders the correct deductible label', () => {
const labelElement = wrapper.find('#deductibleLabel');
- expect(labelElement.text()).toBe('Deductible');
+ expect(labelElement.text()).toBe('Deductible:');
});
it('has the correct id', () => {
@@ -26,12 +26,8 @@ describe('deductible-box', () => {
});
it('has the correct classes', () => {
- expect(wrapper.classes().length).toBe(5);
+ expect(wrapper.classes().length).toBe(1);
expect(wrapper.classes()).toContain('deductible-box');
- expect(wrapper.classes()).toContain('d-flex');
- expect(wrapper.classes()).toContain('justify-content-between');
- expect(wrapper.classes()).toContain('align-items-center');
- expect(wrapper.classes()).toContain('py-2');
});
it.each([
['', ''],
diff --git a/src/layouts/tpa-submit/deductible-box/deductible-box.vue b/src/layouts/tpa-submit/deductible-box/deductible-box.vue
index 756f7da0..797cd941 100644
--- a/src/layouts/tpa-submit/deductible-box/deductible-box.vue
+++ b/src/layouts/tpa-submit/deductible-box/deductible-box.vue
@@ -1,17 +1,9 @@
-
- Deductible
-
-
- {{ value }}
-
+ class="deductible-box">
+
Deductible:
+
{{ value }}
@@ -28,12 +20,17 @@ export default {
diff --git a/src/layouts/tpa-submit/review-block/review-block.spec.js b/src/layouts/tpa-submit/review-block/review-block.spec.js
index 82f3c4e5..f7f6d514 100644
--- a/src/layouts/tpa-submit/review-block/review-block.spec.js
+++ b/src/layouts/tpa-submit/review-block/review-block.spec.js
@@ -20,12 +20,12 @@ describe('ReviewBlock.vue', () => {
});
it('renders the correct number of lines', () => {
- const lineElements = wrapper.findAll('.review-block__body--line');
+ const lineElements = wrapper.findAll('.review-body p');
expect(lineElements.length).toBe(lines.length);
});
it('renders the correct line text', () => {
- const lineElements = wrapper.findAll('.review-block__body--line');
+ const lineElements = wrapper.findAll('.review-body p');
lines.forEach((line, index) => {
expect(lineElements.at(index).text()).toBe(line);
});
diff --git a/src/layouts/tpa-submit/review-block/review-block.vue b/src/layouts/tpa-submit/review-block/review-block.vue
index 4f5af710..63e6efa4 100644
--- a/src/layouts/tpa-submit/review-block/review-block.vue
+++ b/src/layouts/tpa-submit/review-block/review-block.vue
@@ -1,29 +1,28 @@
-
-
-
-
- {{ screenReaderOnlyText }}
-
-
-
-
+
+
+
+
+ {{ screenReaderOnlyText }}
+
+
@@ -36,14 +35,13 @@ export default {
props: {
customHeaderText: String,
editScreenReaderTextCmsWidgetName: String,
- lines: Array
+ lines: Array,
+ editLinkText: {
+ type: String,
+ default: 'Edit'
+ },
},
emits: ['click-edit'],
- data() {
- return {
- editLinkText: 'Edit'
- };
- },
methods: {
editClicked() {
this.$emit('click-edit');
@@ -59,12 +57,16 @@ export default {
}
.review-block__header {
color: $black;
+ font-weight: $font-weight-bold;
+ margin-bottom: .625rem;
}
- .review-block__body--line {
- color: $gray-600;
+
+ .review-body {
+ margin-bottom: .625rem
}
+
.link {
- text-underline-offset: 1px;
+ font-weight: $font-weight-normal
}
}
diff --git a/src/layouts/tpa-submit/tpa-submit.spec.js b/src/layouts/tpa-submit/tpa-submit.spec.js
index 7dd6920b..ab42d2f5 100644
--- a/src/layouts/tpa-submit/tpa-submit.spec.js
+++ b/src/layouts/tpa-submit/tpa-submit.spec.js
@@ -18,7 +18,15 @@ import coverageStatuses from '@/constants/coverage-statuses';
jest.mock('@/helpers/cms-content-helper', () => ({
fetchCmsContentForPage: jest.fn(),
doesCopyContainRouterLink: jest.fn(),
- getStringWithCustomValues: jest.fn(),
+ getStringWithCustomValues: jest.fn((str, customValueMap) => {
+ let newString = str ?? '';
+ if (customValueMap != null) {
+ Object.keys(customValueMap).forEach((key) => {
+ newString = newString.replaceAll(`{custom:${key}}`, customValueMap[key]);
+ });
+ }
+ return newString;
+ }),
processIfStatements: jest.fn()
}));
@@ -129,11 +137,7 @@ describe('tpa-submit', () => {
// Assert
expect(subHeader.exists()).toBeTruthy();
- expect(subHeader.props().justifyText).toBe('center');
- expect(subHeader.props().marginTopSizeOverride).toBe(4);
- expect(subHeader.classes()).toContain('text-color--black');
- expect(subHeader.classes()).toContain('fs-5');
- expect(subHeader.classes()).toContain('tpa-submit__title--line-height');
+ expect(subHeader.classes()).toContain('tpa-submit-title');
});
test('sub header body one', () => {
// Arrange
@@ -144,34 +148,6 @@ describe('tpa-submit', () => {
// Assert
expect(subHeaderBodyOne.exists()).toBeTruthy();
- expect(subHeaderBodyOne.classes()).toContain('small');
- expect(subHeaderBodyOne.classes()).toContain('text-color--darker-gray');
- });
- test('sub header body two', () => {
- // Arrange
- const wrapper = shallowMount(tpaSubmit, getMountOptions());
-
- // Act
- const subHeaderBodyTwo = wrapper.findComponent({ ref: 'tpaSubmitSubHeaderBodyTwo' });
-
- // Assert
- expect(subHeaderBodyTwo.exists()).toBeTruthy();
- expect(subHeaderBodyTwo.classes()).toContain('mb-4');
- expect(subHeaderBodyTwo.classes()).toContain('small');
- expect(subHeaderBodyTwo.classes()).toContain('text-color--darker-gray');
- });
- test('main button one', () => {
- // Arrange
- const wrapper = shallowMount(tpaSubmit, getMountOptions());
-
- // Act
- const mainButton = wrapper.findComponent({ ref: 'buttonMainOne' });
-
- // Assert
- expect(mainButton.exists()).toBeTruthy();
- expect(mainButton.props().variant).toBe('success');
- expect(mainButton.classes()).toContain('w-100');
- expect(mainButton.classes()).toContain('mb-5');
});
test('service summary section', () => {
// Arrange
@@ -183,21 +159,6 @@ describe('tpa-submit', () => {
// Assert
expect(serviceSummarySection.exists()).toBeTruthy();
});
- test('service summary title', () => {
- // Arrange
- const wrapper = shallowMount(tpaSubmit, getMountOptions());
-
- // Act
- const serviceSummaryTitle = wrapper.findComponent({ ref: 'tpaSubmitServiceSummaryTitle' });
-
- // Assert
- expect(serviceSummaryTitle.exists()).toBeTruthy();
- expect(serviceSummaryTitle.props().marginTopSizeOverride).toBe(4);
- expect(serviceSummaryTitle.classes()).toContain('fw-bold');
- expect(serviceSummaryTitle.classes()).toContain('fs-1');
- expect(serviceSummaryTitle.classes()).toContain('lh-lg');
- expect(serviceSummaryTitle.classes()).toContain('text-color--black');
- });
describe('review blocks', () => {
const title1 = 'Section 1';
const title2 = 'Another Section';
@@ -253,24 +214,8 @@ describe('tpa-submit', () => {
// Assert
expect(submitOrderDetailsTitle.exists()).toBeTruthy();
- expect(submitOrderDetailsTitle.props().marginTopSizeOverride).toBe(4);
expect(submitOrderDetailsTitle.classes()).toContain('fw-bold');
- expect(submitOrderDetailsTitle.classes()).toContain('text-color--black');
- });
- test('submit order details body', () => {
- // Arrange
- const wrapper = shallowMount(tpaSubmit, getMountOptions());
-
- // Act
- const submitOrderDetailsTitle = wrapper.findComponent({ ref: 'tpaSubmitOrderDetailsBody' });
-
- // Assert
- expect(submitOrderDetailsTitle.exists()).toBeTruthy();
- expect(submitOrderDetailsTitle.props().marginTopSizeOverride).toBe(4);
- expect(submitOrderDetailsTitle.classes()).toContain('mb-4');
- expect(submitOrderDetailsTitle.classes()).toContain('px-4');
- expect(submitOrderDetailsTitle.classes()).toContain('small');
- expect(submitOrderDetailsTitle.classes()).toContain('text-color--darker-gray');
+ expect(submitOrderDetailsTitle.classes()).toContain('order-details-title');
});
test('deductible box', () => {
// Arrange
@@ -306,7 +251,7 @@ describe('tpa-submit', () => {
});
});
describe('before route enter', () => {
- test('produces 4 sections', async () => {
+ test('produces 2 sections', async () => {
// Arrange
const { wrapper } = getMountedComponent();
expect(wrapper.vm.sections.length).toBe(0);
@@ -320,65 +265,13 @@ describe('tpa-submit', () => {
);
// Assert
- expect(wrapper.vm.sections.length).toBe(4);
- });
- test.each([
- ['2004', 'Honda', 'Civic', '2004 Honda Civic'],
- [null, 'Honda', 'Civic', 'Honda Civic'],
- ['2004', '', 'Civic', '2004 Civic'],
- ['2004', 'Honda', null, '2004 Honda'],
- ['2004', null, undefined, '2004'],
- [null, null, null, '']
- ])(
- 'when store vehicle has year %p, make %p, and model %p, has line %p',
- async (year, make, model, line) => {
- // Arrange
- const initialStore = {
- order: {
- vehicle: { year, make, model }
- }
- };
- const { wrapper } = getMountedComponent(initialStore);
- const vehicleSectionIndex = 0;
- const expectedLines = [line];
-
- // Act
- await tpaSubmit.beforeRouteEnter.call(
- wrapper.vm,
- { query: { issPage: 'tpa-submit' } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- // Assert
- const vehicleSection = wrapper.vm.sections[vehicleSectionIndex];
- expect(vehicleSection.lines).toStrictEqual(expectedLines);
- }
- );
- test('damage section lines equal result from getDamageDisplayContent', async () => {
- // Arrange
- const { wrapper } = getMountedComponent();
- const damageSectionIndex = 1;
- const expectedLines = ['hi', 'potato', 'vehicle 3'];
- getDamageDisplayContent.mockImplementationOnce(() => expectedLines);
-
- // Act
- await tpaSubmit.beforeRouteEnter.call(
- wrapper.vm,
- { query: { issPage: 'tpa-submit' } },
- undefined,
- (c) => c(wrapper.vm)
- );
-
- // Assert
- const damageSection = wrapper.vm.sections[damageSectionIndex];
- expect(damageSection.lines).toEqual(expectedLines);
+ expect(wrapper.vm.sections.length).toBe(2);
});
describe('preferred shop section', () => {
- test('has three lines', async () => {
+ test('has two lines', async () => {
// Arrange
const { wrapper } = getMountedComponent();
- const preferredShopSectionIndex = 2;
+ const preferredShopSectionIndex = 0;
// Act
await tpaSubmit.beforeRouteEnter.call(
@@ -390,15 +283,15 @@ describe('tpa-submit', () => {
// Assert
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
- expect(preferredShopSection.lines.length).toBe(3);
+ expect(preferredShopSection.lines.length).toBe(2);
});
- test('first line is value returned from toTitleCase method', async () => {
+ test('title is value returned from toTitleCase method', async () => {
// Arrange
const initialData = { companyName: 'some value' };
const { wrapper } = getMountedComponent({}, initialData);
const expectedName = 'some expected name';
toTitleCase.mockImplementationOnce(() => expectedName);
- const preferredShopSectionIndex = 2;
+ const preferredShopSectionIndex = 0;
// Act
await tpaSubmit.beforeRouteEnter.call(
@@ -410,9 +303,9 @@ describe('tpa-submit', () => {
// Assert
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
- expect(preferredShopSection.lines[0]).toBe(expectedName);
+ expect(preferredShopSection.title).toBe(expectedName);
});
- test('second line is expected and formatAddress called', async () => {
+ test('first line is expected and formatAddress called', async () => {
// Arrange
const address = {
streetAddress: '123 South Ln',
@@ -430,7 +323,7 @@ describe('tpa-submit', () => {
const { wrapper } = getMountedComponent(initialStore);
const line = 'some returned line';
formatAddress.mockImplementationOnce(() => line);
- const preferredShopSectionIndex = 2;
+ const preferredShopSectionIndex = 0;
// Act
await tpaSubmit.beforeRouteEnter.call(
@@ -442,7 +335,7 @@ describe('tpa-submit', () => {
// Assert
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
- expect(preferredShopSection.lines[1]).toBe(line);
+ expect(preferredShopSection.lines[0]).toBe(line);
expect(formatAddress).toHaveBeenCalledTimes(1);
expect(formatAddress).toHaveBeenCalledWith(
address.streetAddress,
@@ -452,7 +345,7 @@ describe('tpa-submit', () => {
address.zipCode
);
});
- test('third line is expected and toDisplayPhoneNumber called', async () => {
+ test('second line is expected and toDisplayPhoneNumber called', async () => {
// Arrange
const phoneNumber = '9998887777';
const initialStore = {
@@ -465,7 +358,7 @@ describe('tpa-submit', () => {
const { wrapper } = getMountedComponent(initialStore);
const expectedLine = 'returned from to display phone num';
toDisplayPhoneNumber.mockImplementationOnce(() => expectedLine);
- const preferredShopSectionIndex = 2;
+ const preferredShopSectionIndex = 0;
// Act
await tpaSubmit.beforeRouteEnter.call(
@@ -477,7 +370,7 @@ describe('tpa-submit', () => {
// Assert
const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
- expect(preferredShopSection.lines[2]).toBe(expectedLine);
+ expect(preferredShopSection.lines[1]).toBe(expectedLine);
expect(toDisplayPhoneNumber).toHaveBeenCalledWith(phoneNumber);
});
});
@@ -487,8 +380,14 @@ describe('tpa-submit', () => {
const lastName = 'Eddison';
const emailAddress = 'myname@gmail.com';
const servicePhone = '0001112222';
+ const providerCompanyName = 'Some Provider LLC';
const initialStore = {
order: {
+ serviceLocation: {
+ provider: {
+ companyName: providerCompanyName
+ }
+ },
contactInfo: {
firstName,
lastName,
@@ -498,11 +397,11 @@ describe('tpa-submit', () => {
}
};
const { wrapper } = getMountedComponent(initialStore);
- const expectedLine1 = 'Jones Eddison';
- const expectedLine2 = emailAddress;
- const expectedLine3 = 'some value returned';
- toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedLine3 : ''));
- const contactInfoSectionIndex = 3;
+ const expectedEmail = emailAddress;
+ const expectedPhone = 'some value returned';
+ toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedPhone : ''));
+ const contactInfoSectionIndex = 1;
+ wrapper.vm.getCmsContent.mockImplementation(() => '{custom:contactPhone} or {custom:contactEmail}');
// Act
await tpaSubmit.beforeRouteEnter.call(
@@ -511,12 +410,59 @@ describe('tpa-submit', () => {
undefined,
(c) => c(wrapper.vm)
);
+ wrapper.vm.setSections();
// Assert
const contactInfoSection = wrapper.vm.sections[contactInfoSectionIndex];
- expect(contactInfoSection.lines[0]).toBe(expectedLine1);
- expect(contactInfoSection.lines[1]).toBe(expectedLine2);
- expect(contactInfoSection.lines[2]).toBe(expectedLine3);
+ expect(contactInfoSection.lines[0]).toContain(expectedEmail);
+ expect(contactInfoSection.lines[0]).toContain(expectedPhone);
+ expect(toDisplayPhoneNumber).toHaveBeenCalledWith(servicePhone);
+ });
+ test('contact info section has expected content with extension', async () => {
+ // Arrange
+ const firstName = 'Jones';
+ const lastName = 'Eddison';
+ const emailAddress = 'myname@gmail.com';
+ const servicePhone = '0001112222';
+ const extension = '12345';
+ const providerCompanyName = 'Some Provider LLC';
+ const initialStore = {
+ order: {
+ serviceLocation: {
+ provider: {
+ companyName: providerCompanyName
+ }
+ },
+ contactInfo: {
+ firstName,
+ lastName,
+ emailAddress,
+ servicePhone,
+ extension
+ }
+ }
+ };
+ const { wrapper } = getMountedComponent(initialStore);
+ const expectedEmail = emailAddress;
+ const expectedPhone = 'some value returned';
+ toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedPhone : ''));
+ const contactInfoSectionIndex = 1;
+ wrapper.vm.getCmsContent.mockImplementation(() => '{custom:contactPhone} or {custom:contactEmail}');
+
+ // Act
+ await tpaSubmit.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { issPage: 'tpa-submit' } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+ wrapper.vm.setSections();
+
+ // Assert
+ const contactInfoSection = wrapper.vm.sections[contactInfoSectionIndex];
+ expect(contactInfoSection.lines[0]).toContain(expectedEmail);
+ expect(contactInfoSection.lines[0]).toContain(expectedPhone);
+ expect(contactInfoSection.lines[0]).toContain(`Ext. ${extension}`);
expect(toDisplayPhoneNumber).toHaveBeenCalledWith(servicePhone);
});
});
@@ -524,7 +470,6 @@ describe('tpa-submit', () => {
test.each([
['subHeaderTitle', 'SiteSubHeaderWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT, 'site sub header'],
['subHeaderBodyOne', 'SiteSubHeaderWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT, 'sub header body one'],
- ['serviceSummaryText', 'ServiceSummaryContent', widgetFields.TEXT_BLOCK_WIDGET.TEXT, 'service summary text'],
['orderDetailsTitle', 'OrderDetailsContent', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT, 'order details title'],
['forwardButtonText', 'SiteFooterWidget', widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT, 'forward button text']
])('computed %p returns expected value', (computedName, widgetLabel, fieldLabel, expected) => {
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 181fa0aa..85a85d52 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -13,53 +13,52 @@