diff --git a/package-lock.json b/package-lock.json index 0ab28ced..109308ce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,7 @@ "@vue/vue3-jest": "^27.0.0-alpha.1", "axios-mock-adapter": "^1.21.5", "babel-jest": "^27.0.6", - "eslint": "8.45.0", + "eslint": "^8.45.0", "eslint-config-airbnb-base": "15.0.0", "eslint-import-resolver-alias": "1.1.2", "eslint-plugin-import": "2.26.0", diff --git a/package.json b/package.json index 82ca9450..f246df9c 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "@vue/vue3-jest": "^27.0.0-alpha.1", "axios-mock-adapter": "^1.21.5", "babel-jest": "^27.0.6", - "eslint": "8.45.0", + "eslint": "^8.45.0", "eslint-config-airbnb-base": "15.0.0", "eslint-import-resolver-alias": "1.1.2", "eslint-plugin-import": "2.26.0", @@ -61,4 +61,4 @@ "vitest": "^0.33.0", "volar-service-vetur": "latest" } -} \ No newline at end of file +} diff --git a/src/constants/cms-widget-fields.js b/src/constants/cms-widget-fields.js index f8fd23fe..763b7597 100644 --- a/src/constants/cms-widget-fields.js +++ b/src/constants/cms-widget-fields.js @@ -37,8 +37,8 @@ const widgetFields = Object.freeze({ NAME: 'Name', BACK_BUTTON_TEXT: 'BackButtonText', FORWARD_BUTTON_TEXT: 'ForwardButtonText', - FOOTER_IMAGE: 'FooterImage', - ALT_TEXT: 'AltText' + ALT_TEXT: 'AltText', + FOOTER_IMAGE_URL: 'FooterImageURL' } }); diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 93da3c9d..066b06a2 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -1,13 +1,18 @@ @@ -92,16 +96,16 @@ export default { listCard, ErrorMessage, radio, - providerPrefRadio + providerPrefRadio, }, props: { buttonTypeString: { type: String, - default: 'listButton' + default: 'listButton', }, buttonTypeObject: { type: Object, - default: null + default: null, }, isMultiSelect: Boolean, groupName: String, @@ -109,16 +113,16 @@ export default { answers: Array, textPosition: { type: String, - default: 'text-center' + default: 'text-center', }, selectingInitiatesLoad: Boolean, loaderColor: { type: String, - default: 'blue' + default: 'blue', }, loaderPosition: { type: String, - default: 'right' + default: 'right', }, isRequired: Boolean, isOverflowScrollable: Boolean, @@ -133,7 +137,7 @@ export default { additionalButtonData: Object, additionalButtonStyling: String, isSmallQuestionText: Boolean, - isSmallQuestionLabelText: Boolean + isSmallQuestionLabelText: Boolean, }, emits: ['update:modelValue'], setup(props) { @@ -142,11 +146,18 @@ export default { const fieldOptions = { value: modelValue, - initialValue: null + initialValue: null, }; - const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } = - useField(props.groupName, props.validationRules, fieldOptions); + const { + errorMessage, + handleBlur, + handleChange, + meta, + validate, + errors, + resetField, + } = useField(props.groupName, props.validationRules, fieldOptions); return { errorMessage, @@ -155,12 +166,12 @@ export default { validate, meta, errors, - resetField + resetField, }; }, data() { return { - lastValuePushedToGa: null + lastValuePushedToGa: null, }; }, computed: { @@ -169,8 +180,8 @@ export default { const baseClasses = this.isOverflowScrollable ? 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0' : this.buttonTypeString === 'listCard' - ? 'w-100' - : ''; + ? 'w-100' + : ''; const SmallQuestionTextClass = this.isSmallQuestionText ? `${baseClasses}small-question-text` @@ -191,7 +202,8 @@ export default { classes = 'd-flex flex-row p-0'; break; case 'listCard': - classes = 'row g-2 justify-content-center'; + classes = + 'row g-2 g-md-5 justify-content-center mb-1 flex-nowrap'; if (this.isWide) { classes += ' flex-column'; } @@ -226,25 +238,50 @@ export default { break; default: } + // Determine number of buttons and add class accordingly. + // This is to accommodate unique spacing per design specs. + if ( + this.buttonTypeString === 'listCard' && + this.buttonsInfo.length > 2 + ) { + classes += ' two-list-card-width'; + } + + if ( + this.buttonTypeString === 'listCard' && + this.buttonsInfo.length === 1 + ) { + classes += ' one-list-card-width'; + } return classes; }, buttonsInfo() { - return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({ - buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, - altText: answer.altText ?? (answer.Name ? answer.Name : answer), - buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText, - buttonBodyCopy: answer.buttonBodyCopy ?? answer.buttonBodyCopy, - buttonAuxiliaryCopy: answer.buttonAuxiliaryCopy ?? answer.buttonAuxiliaryCopy, - buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy, - buttonImage: answer.buttonImage ?? answer.AnswerImageUrl, - buttonImageId: answer.buttonImageId ?? answer.ImageId, - groupName: this.formatString(this.groupName), - value: - answer.value - ?? (this.useTextForValue && answer.Text ? answer.Text : answer.Name) - ?? (typeof answer !== 'object' ? answer : null) - })); + return (Array.isArray(this.answers) ? this.answers : [])?.map( + (answer) => ({ + buttonLabel: answer.buttonLabel ?? answer.Text ?? answer, + altText: + answer.altText ?? (answer.Name ? answer.Name : answer), + buttonLabelSubCopy: + answer.buttonLabelSubCopy ?? answer.SubText, + buttonBodyCopy: + answer.buttonBodyCopy ?? answer.buttonBodyCopy, + buttonAuxiliaryCopy: + answer.buttonAuxiliaryCopy ?? + answer.buttonAuxiliaryCopy, + buttonFooterCopy: + answer.buttonFooterCopy ?? answer.buttonFooterCopy, + buttonImage: answer.buttonImage ?? answer.AnswerImageUrl, + buttonImageId: answer.buttonImageId ?? answer.ImageId, + groupName: this.formatString(this.groupName), + value: + answer.value ?? + (this.useTextForValue && answer.Text + ? answer.Text + : answer.Name) ?? + (typeof answer !== 'object' ? answer : null), + }) + ); }, selectedValues: { get() { @@ -252,24 +289,25 @@ export default { }, set(selectedAnswers) { this.$emit('update:modelValue', selectedAnswers); - } - } + }, + }, }, watch: { modelValue(newValue) { this.resetField({ - value: newValue + value: newValue, }); - } + }, }, beforeMount() { if (this.buttonTypeObject) { - this.$options.components[this.buttonTypeString] = this.buttonTypeObject; + this.$options.components[this.buttonTypeString] = + this.buttonTypeObject; } }, beforeUnmount() { this.resetField({ - value: '' + value: '', }); }, methods: { @@ -278,8 +316,8 @@ export default { }, setLastValuePushedToGa(lastValuePushedToGa) { this.lastValuePushedToGa = lastValuePushedToGa; - } - } + }, + }, }; @@ -325,17 +363,17 @@ export default { .small-question-label-text { &.question-text { span { - text-align: left; - margin: 0 0 0.25rem 0; - } - } - &.question-text { - margin: 0; - } - &fieldset { - .ui-radio { - margin: 0; - } - } + text-align: left; + margin: 0 0 0.25rem 0; + } + } + &.question-text { + margin: 0; + } + &fieldset { + .ui-radio { + margin: 0; + } + } } diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index bd7d5796..6a01ca00 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -6,7 +6,10 @@ tabindex="-1" aria-labelledby="ModalComponentLabel" aria-hidden="true" - v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"> + v-on="{ + 'hidden.bs.modal': onModalClosed, + 'shown.bs.modal': onModalOpened, + }">
@@ -33,7 +36,10 @@ class="w-100" loaderColor="white" :buttonText="footerButtonText" - :class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'" + :class=" + (isButtonDisabled || isFooterButtonDisabled) && + 'form-test-invalid' + " @clickEvent="validateAndEmit" />
@@ -50,23 +56,25 @@ export default { // eslint-disable-next-line vue/multi-word-component-names name: 'modal', components: { - modalButtonMain + modalButtonMain, }, props: { modalId: String, headerText: String, footerButtonText: String, onModalOpenedCallback: { - type: Function + type: Function, }, onModalClosedCallback: { - type: Function + type: Function, }, - isButtonDisabled: Boolean + isButtonDisabled: Boolean, }, emits: ['footer-button-event', 'isModalOpened'], setup(props) { - const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`; + const modalId = props.modalId + ? props.modalId + : `modal-${crypto.randomUUID()}`; const { meta, validate, resetForm } = useForm(); @@ -75,7 +83,7 @@ export default { modalId, meta, validate, - resetForm + resetForm, }; }, computed: { @@ -84,7 +92,7 @@ export default { return !this.meta.valid; } return !this.meta.dirty || !this.meta.valid; - } + }, }, methods: { async validateAndEmit() { @@ -106,38 +114,34 @@ export default { this.onModalClosedCallback?.(); }, openModal() { - const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId)); + const modal = Modal.getOrCreateInstance( + document.getElementById(this.modalId) + ); modal?.show(); this.$emit('isModalOpened', true); }, closeModal() { - const modal = Modal.getInstance(document.getElementById(this.modalId)); + const modal = Modal.getInstance( + document.getElementById(this.modalId) + ); modal?.hide(); this.$emit('isModalOpened', false); - } - } + }, + }, }; - diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue index e695f422..9f5430be 100644 --- a/src/iss-components/site-footer/site-footer.vue +++ b/src/iss-components/site-footer/site-footer.vue @@ -1,25 +1,24 @@ @@ -61,21 +52,21 @@ export default { name: 'site-footer', components: { textLink, - buttonMain + buttonMain, }, props: { isForwardActionDisabled: Boolean, isBackButtonHidden: { type: Boolean, default: false }, isForwardButtonHidden: { type: Boolean, default: false }, cmsWidgetName: String, - isStackedVertically: { type: Boolean, default: false } + isStackedVertically: { type: Boolean, default: false }, }, emits: ['backClicked', 'forwardClicked'], data() { return { paddingHeight: 0, customButtontext: '', - disableForwardAction: false + disableForwardAction: false, }; }, computed: { @@ -88,15 +79,21 @@ export default { : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText'); }, footerImageURL() { - return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL'); + const output = this.getCmsContent( + this.cmsWidgetName, + 'FooterImageURL' + ); + return output; }, includeFooterImage() { const currentPageName = this.getPageNameByQueryString(); - return (currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE); - } + return currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE; + }, }, mounted() { - this.paddingHeight = this.includeFooterImage ? this.getFooterInfoBoxHeight() + 16 : this.getFooterInfoBoxHeight() + 24; + this.paddingHeight = this.includeFooterImage + ? this.getFooterInfoBoxHeight() + 16 + : this.getFooterInfoBoxHeight() + 24; this.$nextTick(() => { window.addEventListener('resize', this.onResize); }); @@ -131,8 +128,8 @@ export default { }, enableForwardAction() { this.disableForwardAction = false; - } - } + }, + }, }; @@ -180,21 +177,18 @@ export default { } } } -.footerImage -{ +.footerImage { text-align: center; position: sticky; } @media only screen and (max-width: 340px) { - .footerImage - { + .footerImage { bottom: 78px; } } -#siteFooterImage -{ +#siteFooterImage { width: 100%; } diff --git a/src/iss-components/site-header/menu-modal/menu-modal.spec.js b/src/iss-components/site-header/menu-modal/menu-modal.spec.js index d265b3bd..fc34f46f 100644 --- a/src/iss-components/site-header/menu-modal/menu-modal.spec.js +++ b/src/iss-components/site-header/menu-modal/menu-modal.spec.js @@ -24,12 +24,12 @@ describe('menu-modal.vue', () => { expect(modalFooter.text()).toContain('Safelite Group'); }); - it('Should return Terms of service text link text', async () => { + it('Should return Terms of use text link text', async () => { // Act const wrapper = shallowMount(menuModal); // Expect - expect(wrapper.html()).toContain('Terms of service'); + expect(wrapper.html()).toContain('Terms of use'); }); it('Should return "Your privacy choices" text link text', async () => { @@ -40,22 +40,6 @@ describe('menu-modal.vue', () => { expect(wrapper.html()).toContain('Your privacy choices'); }); - test('Icon for link to "Privacy Policies" page is displayed with the correct alternate text', () => { - // NOTE: We need a way to target a specific component so we can be sure that - // an icon is coming from a specific component. - // That requires an additional prop in the component. Will hold off on adding the prop - // until there is more clarity on how we handle shared components. - // For now the test is below is the best we can do. - - // Arrange - const wrapper = mount(menuModal); - - // Expect - const icon = wrapper.find('[data-id="ccpa-icon"]'); - expect(icon.isVisible()).toBe(true); - expect(icon.attributes('alt')).toBe('Your privacy choices'); - }); - it('Should return Warranty text link text', async () => { // Act const wrapper = shallowMount(menuModal); diff --git a/src/iss-components/site-header/menu-modal/menu-modal.vue b/src/iss-components/site-header/menu-modal/menu-modal.vue index ddeee120..cc506b49 100644 --- a/src/iss-components/site-header/menu-modal/menu-modal.vue +++ b/src/iss-components/site-header/menu-modal/menu-modal.vue @@ -5,7 +5,21 @@ type="button" :class="[isActive ? 'active' : '']" aria-label="Hamburger Menu (modal window)" - @click="toggle()"> + @click="toggleModal"> +
+
+
+ +
+
+ -
-
-
- -
diff --git a/src/layouts/bailout-page/bailout-page.vue b/src/layouts/bailout-page/bailout-page.vue index 131665fe..5708df4a 100644 --- a/src/layouts/bailout-page/bailout-page.vue +++ b/src/layouts/bailout-page/bailout-page.vue @@ -4,60 +4,66 @@ v-slot="{ meta }" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -
- -
- - - - - - +
+
+
+ +
+
+
+
+ + + + + + +
@@ -90,7 +96,7 @@ export default { siteFooter, textboxQuestion, // eslint-disable-next-line vue/no-reserved-component-names - Form + Form, }, mixins: [BaseFormMixin], async beforeRouteEnter(to, from, next) { @@ -100,8 +106,8 @@ export default { const promiseResultMap = [ { resultKey: 'cmsContent', - promise: cmsContentPromise - } + promise: cmsContentPromise, + }, ]; // use resultMap to populate layout content. const resultMap = await settleAllPromises(promiseResultMap); @@ -121,14 +127,14 @@ export default { widget: { defaultSiteHeader: 'SiteSubHeaderWidget', noTpa: 'ContentGroupNoTPAWidget', - notSeeingPreferredShop: 'ContentGroupNotSeeingPreferredShop' + notSeeingPreferredShop: 'ContentGroupNotSeeingPreferredShop', }, rules: { firstName: globalRules.FIRST_NAME_REQUIRED, lastName: globalRules.LAST_NAME_REQUIRED, phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`, - email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}` - } + email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`, + }, }; }, computed: { @@ -179,13 +185,16 @@ export default { }, phoneMask() { return MaskaFormattedMasks.PHONE_NUMBER; - } + }, }, methods: { backButtonAction() { // route to move backwards this.mainStore.resetBailout(); - this.$router.navigate(this.navigationScenarios.CLICKED_BACK_PREVIOUS, this.$route); + this.$router.navigate( + this.navigationScenarios.CLICKED_BACK_PREVIOUS, + this.$route + ); }, forwardButtonAction() { this.mainStore.setBailoutContactInfo(this.bailoutPageModel); @@ -201,10 +210,10 @@ export default { firstName: useMainStore().order.customer.firstName, lastName: useMainStore().order.customer.lastName, phoneNumber: useMainStore().order.customer.phoneNumber, - email: useMainStore().order.customer.emailAddress + email: useMainStore().order.customer.emailAddress, }; - } - } + }, + }, }; diff --git a/src/layouts/capability-questions/capability-questions.vue b/src/layouts/capability-questions/capability-questions.vue index bfa557f0..c47b4e35 100644 --- a/src/layouts/capability-questions/capability-questions.vue +++ b/src/layouts/capability-questions/capability-questions.vue @@ -1,22 +1,22 @@ diff --git a/src/layouts/contact-confirmation/contact-confirmation.vue b/src/layouts/contact-confirmation/contact-confirmation.vue index a95f172f..95d3ada2 100644 --- a/src/layouts/contact-confirmation/contact-confirmation.vue +++ b/src/layouts/contact-confirmation/contact-confirmation.vue @@ -1,11 +1,17 @@ @@ -23,7 +29,7 @@ export default { name: 'contact-confirmation', components: { siteHeader, - siteSubHeader + siteSubHeader, }, async beforeRouteEnter(to, from, next) { // Call APIs @@ -32,8 +38,8 @@ export default { const promiseResultMap = [ { resultKey: 'cmsContent', - promise: cmsContentPromise - } + promise: cmsContentPromise, + }, ]; // use resultMap to populate layout content. const resultMap = await settleAllPromises(promiseResultMap); @@ -47,13 +53,15 @@ export default { return { mainStore }; }, data() { - const contactConfirmationData = useMainStore().pageData(issPageValues.CONTACT_CONFIRMATION); + const contactConfirmationData = useMainStore().pageData( + issPageValues.CONTACT_CONFIRMATION + ); return { - contactConfirmationModel: contactConfirmationData + contactConfirmationModel: contactConfirmationData, }; }, computed: {}, - methods: {} + methods: {}, }; diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue index ceec1259..c3daca4f 100644 --- a/src/layouts/contact-details/contact-details.vue +++ b/src/layouts/contact-details/contact-details.vue @@ -4,12 +4,16 @@ v-slot="{ meta }" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -
-
- -
+
+
+
+ +
+
+
+
-

- {{ textUpdateDisclaimerText }} I also agree to Safelite's +

+ {{ textUpdateDisclaimerText }} I also agree to + Safelite's @@ -230,5 +241,4 @@ export default { .normal-line-height { line-height: normal; } - diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index 3b22f42d..bc479ba1 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -1,111 +1,99 @@ diff --git a/src/layouts/duplicate-check/duplicate-check.vue b/src/layouts/duplicate-check/duplicate-check.vue index bac463f0..d341a69e 100644 --- a/src/layouts/duplicate-check/duplicate-check.vue +++ b/src/layouts/duplicate-check/duplicate-check.vue @@ -4,12 +4,16 @@ v-slot="{ meta }" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -

-
- -
+
+
+
+ +
+
+
+
- + :validationRules="rules.selectionRequired" /> { - const vehicle = !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel - ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}` - : null; + const orders = useMainStore().applicationUser.duplicateOrders; + return ( + orders?.map((o) => { + const vehicle = + !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel + ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}` + : null; - const dateOfLoss = o.responseDate == null ? '' : new Date(o.responseDate).toLocaleDateString(); - const subtext = vehicle && o.responseDate - ? `${vehicle}, ${dateOfLoss}` - : (vehicle ?? '').concat(dateOfLoss); + const dateOfLoss = + o.responseDate == null + ? '' + : new Date(o.responseDate).toLocaleDateString(); + const subtext = + vehicle && o.responseDate + ? `${vehicle}, ${dateOfLoss}` + : (vehicle ?? '').concat(dateOfLoss); - return { - Text: duplicateOrderText, - Name: o.referralNumber, - SubText: toTitleCase(subtext), - value: o.correlationId - }; - }) ?? []; + return { + Text: duplicateOrderText, + Name: o.referralNumber, + SubText: toTitleCase(subtext), + value: o.correlationId, + }; + }) ?? [] + ); }, answers() { return [...this.duplicateOrders, ...this.answersFromCms]; - } + }, }, methods: { /** @@ -132,9 +150,13 @@ export default { */ async forwardButtonAction() { if (this.selectedAnswer !== null) { - const selectedReferral = this.mainStore.applicationUser.duplicateOrders.find((o) => o.correlationId === this.selectedAnswer); + const selectedReferral = + this.mainStore.applicationUser.duplicateOrders.find( + (o) => o.correlationId === this.selectedAnswer + ); if (selectedReferral) { - await this.mainStore.loadSession(selectedReferral) + await this.mainStore + .loadSession(selectedReferral) .catch(() => {}) .finally(() => { this.navigateForward(); @@ -142,7 +164,6 @@ export default { return; } } - this.navigateForward(); }, navigateForward() { @@ -158,12 +179,14 @@ export default { if (!this.mainStore.order.loadedFromDupeCheck) { if (policyVehicles.length !== 0) { this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES, + this.navigationScenarios + .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES, this.$route ); } else { this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES, + this.navigationScenarios + .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES, this.$route ); } @@ -172,22 +195,25 @@ export default { if (this.mainStore.order.vehicle.vin) { this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE, + this.navigationScenarios + .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE, this.$route ); } else if (policyVehicles.length !== 0) { this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE, + this.navigationScenarios + .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE, this.$route ); } else { this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES, + this.navigationScenarios + .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES, this.$route ); } - } - } + }, + }, }; @@ -209,9 +235,8 @@ export default { margin-top: map-get($spacers, 4); margin-bottom: map-get($spacers, 2); } - .form-test-error{ + .form-test-error { margin-top: 0 !important; } } - diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 3128d9e9..a58830d5 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -4,72 +4,70 @@ v-slot="{ meta }" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -
-
- -
-
-
-
-
- - - - - - - - -
-
-
-
+
+
+
+ +
+
+
+
+ + + + + + + +
@@ -83,7 +81,10 @@ import { useMainStore } from '@/store'; import errorMessages from '@/constants/error-messages'; import { required } from '@/helpers/validation-rules'; import { defineRule, Form } from 'vee-validate'; -import { getDamageString, isGlassAvailableForCarId } from '@/helpers/damage-helper.js'; +import { + getDamageString, + isGlassAvailableForCarId, +} from '@/helpers/damage-helper.js'; import routerParams from '@/router/router-constants/router-params.js'; import states from '@/constants/states'; @@ -100,7 +101,10 @@ import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-qu import alert from '@/ux-components/alert/alert.vue'; // Define Validation Rules -defineRule('license-plate-required', required(errorMessages.LICENSE_PLATE_REQUIRED)); +defineRule( + 'license-plate-required', + required(errorMessages.LICENSE_PLATE_REQUIRED) +); defineRule('state-required', required(errorMessages.STATE_REQUIRED)); export default { @@ -114,7 +118,7 @@ export default { vehicleBanner, textboxQuestion, dropdownQuestion, - alert + alert, }, mixins: [baseFormMixin, vinPagesMixin], async beforeRouteEnter(to, from, next) { @@ -125,8 +129,8 @@ export default { const promiseResultMap = [ { resultKey: 'cmsContent', - promise: cmsContentPromise - } + promise: cmsContentPromise, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -149,7 +153,7 @@ export default { isCarIdDifferent: false, customAlertData: {}, isSelectedGlassAvailableForVehicle: true, - forwardButtonCarStyle: '' + forwardButtonCarStyle: '', }; }, computed: { @@ -163,10 +167,12 @@ export default { const vinYmmFound = // eslint-disable-next-line max-len `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; - const vinYmmExpected = - `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; + const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; - return this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText') + return this.getCmsContent( + 'AlertMatchedDifferentVehicleWidget', + 'BodyText' + ) .replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:vinYmmFound}', vinYmmFound) .replaceAll('{custom:vinYmmExpected}', vinYmmExpected); @@ -185,7 +191,10 @@ export default { // eslint-disable-next-line max-len `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model} ${this.mainStore.order.vehicle.style}`; - return this.getCmsContent('AlertMatchedTwoIdenticalYMMVehicleWidget', 'BodyText') + return this.getCmsContent( + 'AlertMatchedTwoIdenticalYMMVehicleWidget', + 'BodyText' + ) .replaceAll('{custom:damage}', getDamageString()) .replaceAll('{custom:vinYmmsFound}', vinYmmsFound) .replaceAll('{custom:vinYmmsExpected}', vinYmmsExpected); @@ -194,23 +203,26 @@ export default { const vinYmmFound = // eslint-disable-next-line max-len `${this.customAlertData?.vehicleInfo?.year} ${this.customAlertData?.vehicleInfo?.make} ${this.customAlertData?.vehicleInfo?.model}`; - const vinYmmExpected = - `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; - return (vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase()); + const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`; + return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase(); }, stateOptions: { get() { return states; - } - } + }, + }, }, watch: { licensePlate() { - this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')); + this.$refs.siteFooter.updateButtonText( + this.getCmsContent('SiteFooterWidget', 'ForwardButtonText') + ); }, registrationZipCode() { - this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')); - } + this.$refs.siteFooter.updateButtonText( + this.getCmsContent('SiteFooterWidget', 'ForwardButtonText') + ); + }, }, mounted() { this.attachCustomEvents(); @@ -221,7 +233,8 @@ export default { return useMainStore().order.vehicle.carId !== null; }, loadDefaultsFromStore() { - this.customerQuestions = this.mainStore.customerData.addressQuestions.state; + this.customerQuestions = + this.mainStore.customerData.addressQuestions.state; }, attachCustomEvents() { this.prependActionToMethod(this, this.forwardButtonAction, () => { @@ -238,14 +251,17 @@ export default { this.resetWarningsAndErrors(); // Lookup VIN - const vinLookupResponse = await useMainStore().lookupVinByPlate(this.licensePlate, this.licenseState); + const vinLookupResponse = await useMainStore().lookupVinByPlate( + this.licensePlate, + this.licenseState + ); // Settle promises and get results const promiseResultMap = [ { resultKey: 'vinLookupResponse', - promise: vinLookupResponse - } + promise: vinLookupResponse, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -265,8 +281,8 @@ export default { vehicleFromLookup.carId !== useMainStore().order.vehicle.carId; // Handle changing car if ( - this.isCarIdDifferent - && vehicleFromLookup.carId !== this.previouslyEnteredCarId + this.isCarIdDifferent && + vehicleFromLookup.carId !== this.previouslyEnteredCarId ) { // Display Alert this.previouslyEnteredCarId = vehicleFromLookup.carId; @@ -279,24 +295,30 @@ export default { this.displayMatchedDifferentVehicleAlert = true; } - this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleFromLookup.carId); + this.isSelectedGlassAvailableForVehicle = + await isGlassAvailableForCarId(vehicleFromLookup.carId); // Update button "Continue with..." this.$refs.siteFooter // eslint-disable-next-line max-len - .updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`); + .updateButtonText( + `Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}` + ); return this.$refs.siteFooter.removeLoader(); } // Save vehicle, license plate, and registration information await useMainStore().saveRegistrationLicensePlateLookup( { - isSelectedGlassAvailableForVehicle: this.isSelectedGlassAvailableForVehicle, - vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { vin: vinLookupResponse.data.vin }), + isSelectedGlassAvailableForVehicle: + this.isSelectedGlassAvailableForVehicle, + vehicleInfo: Object.assign(vinLookupResponse.data.vehicle, { + vin: vinLookupResponse.data.vin, + }), registrationInfo: { licensePlate: this.licensePlate, - state: this.licenseState - } + state: this.licenseState, + }, }, false ); @@ -307,7 +329,10 @@ export default { // If a different vehicle is found than the one entered and the selected glass is // not available for that vehicle then navigate back to "vehicle-damage" // display vehicle changed alert on that page. - if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) { + if ( + this.isCarIdDifferent && + !this.isSelectedGlassAvailableForVehicle + ) { this.$router.navigate( this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.$route, @@ -321,8 +346,8 @@ export default { resetWarningsAndErrors() { this.displayVinNotFoundAlert = false; this.displayMatchedDifferentVehicleAlert = false; - } - } + }, + }, }; diff --git a/src/layouts/molding-questions/molding-questions.vue b/src/layouts/molding-questions/molding-questions.vue index db7a7243..4926db11 100644 --- a/src/layouts/molding-questions/molding-questions.vue +++ b/src/layouts/molding-questions/molding-questions.vue @@ -1,23 +1,23 @@ diff --git a/src/layouts/order-confirmation/order-confirmation.vue b/src/layouts/order-confirmation/order-confirmation.vue index 88b85dc8..d1a8bf0b 100644 --- a/src/layouts/order-confirmation/order-confirmation.vue +++ b/src/layouts/order-confirmation/order-confirmation.vue @@ -32,7 +32,9 @@ overnightDropOffWidgetName="AddToCalendar_OvernightDropOff" allDayDropOffWidgetName="AddToCalendar_AllDayDropOff" sameDayDropOffWidgetName="AddToCalendar_SameDayDropOff" - :serviceLocationFullAddress="serviceLocationFullAddress" + :serviceLocationFullAddress=" + serviceLocationFullAddress + " :providerFullAddress="providerFullAddress" :appointmentType="appointmentType" :scheduleDate="appointmentDate" @@ -40,12 +42,10 @@ :scheduleEndTime="appointmentEndTime" />
-
+ v-html="appointmentWordingText">
-
+ v-html="appointmentWordingText2">
@@ -84,15 +84,20 @@ import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-c import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue'; // Supporting files -import { fetchCmsContentForPage, processIfStatements } 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, +import { + get12HourTimeFormat, get12HourTimeMobileFormat, convertDateStringToDate, - getDisplayTextForDurationLength } from '@/helpers/date-helper.js'; + getDisplayTextForDurationLength, +} from '@/helpers/date-helper.js'; import { toTitleCase } from '@/helpers/text-helper.js'; import { AppointmentTypeStrings } from '@/constants/schedule-constants'; import applicationConfig from '@/constants/application-config'; @@ -106,7 +111,7 @@ export default { vehicleBanner, siteFooter, addToCalendar, - cartDropdown + cartDropdown, }, mixins: [BaseFormMixin], async beforeRouteEnter(to, from, next) { @@ -118,10 +123,9 @@ export default { const promiseResultMap = [ { resultKey: 'cmsContent', - promise: cmsContentPromise - } + promise: cmsContentPromise, + }, ]; - // use resultMap to populate layout content. const resultMap = await settleAllPromises(promiseResultMap); @@ -142,9 +146,18 @@ export default { return this.mainStore.issConfig.successReturnURL; }, confirmationEmailText() { - return this.getCmsContent('EmailConfirmationWordingWidget', 'BodyText') - ?.replaceAll('{custom:CUSTOMER_PORTAL_URL}', applicationConfig.CUSTOMER_PORTAL_URL) - ?.replaceAll('{custom:CUSTOMER_PORTAL_LOGIN_TOKEN}', this.submittedOrder.customerPortalLoginToken) + return this.getCmsContent( + 'EmailConfirmationWordingWidget', + 'BodyText' + ) + ?.replaceAll( + '{custom:CUSTOMER_PORTAL_URL}', + applicationConfig.CUSTOMER_PORTAL_URL + ) + ?.replaceAll( + '{custom:CUSTOMER_PORTAL_LOGIN_TOKEN}', + this.submittedOrder.customerPortalLoginToken + ) ?.replaceAll('<', '<') ?.replaceAll('>', '>'); }, @@ -173,11 +186,13 @@ export default { return dateObject.toLocaleDateString('en-us', { weekday: 'long', month: 'long', - day: 'numeric' + day: 'numeric', }); }, appointmentTimeFormatted() { - const formattedTime = this.formatAppointmentTime(this.appointmentType); + const formattedTime = this.formatAppointmentTime( + this.appointmentType + ); return formattedTime; }, mobileWordingText() { @@ -187,7 +202,10 @@ export default { return this.getCmsContent('MobileWordingWidget', 'BodyText2'); }, dropOffAndInShopWordingText() { - return this.getCmsContent('DropOffAndInShopWordingWidget', 'BodyText'); + return this.getCmsContent( + 'DropOffAndInShopWordingWidget', + 'BodyText' + ); }, dropOffAndInShopWordingText2() { return this.getBodyText2FromCms('DropOffAndInShopWordingWidget'); @@ -209,13 +227,24 @@ export default { }, serviceLocationFullAddress() { // eslint-disable-next-line max-len - return `${this.serviceLocationAddress}, ${this.serviceLocationAddress2 ? `${this.serviceLocationAddress2},` : ''}
${this.serviceLocationCity}, ${this.serviceLocationState} ${this.serviceLocationZipCode}`; + return `${this.serviceLocationAddress}, ${ + this.serviceLocationAddress2 + ? `${this.serviceLocationAddress2},` + : '' + }
${this.serviceLocationCity}, ${this.serviceLocationState} ${ + this.serviceLocationZipCode + }`; }, providerAddress() { - return toTitleCase(this.submittedOrder.serviceLocation.provider.address.streetAddress); + return toTitleCase( + this.submittedOrder.serviceLocation.provider.address + .streetAddress + ); }, providerCity() { - return toTitleCase(this.submittedOrder.serviceLocation.provider.address.city); + return toTitleCase( + this.submittedOrder.serviceLocation.provider.address.city + ); }, providerState() { return this.submittedOrder.serviceLocation.provider.address.state; @@ -225,7 +254,9 @@ export default { }, providerFullAddress() { // eslint-disable-next-line max-len - return this.submittedOrder.serviceLocation?.provider?.address ? `${this.providerAddress},
${this.providerCity}, ${this.providerState} ${this.providerZipCode}` : ''; + return this.submittedOrder.serviceLocation?.provider?.address + ? `${this.providerAddress},
${this.providerCity}, ${this.providerState} ${this.providerZipCode}` + : ''; }, appointmentWordingText() { switch (this.appointmentType) { @@ -266,14 +297,24 @@ export default { } }, mobileAppointment() { - return this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE - || this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; + return ( + this.submittedOrder.serviceLocation.appointmentType === + AppointmentTypeStrings.MOBILE || + this.submittedOrder.serviceLocation.appointmentType === + AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP + ); }, inShopAppointment() { - return this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.IN_SHOP; + return ( + this.submittedOrder.serviceLocation.appointmentType === + AppointmentTypeStrings.IN_SHOP + ); }, dropOffAppointment() { - return this.submittedOrder.serviceLocation.appointmentType === AppointmentTypeStrings.DROP_OFF; + return ( + this.submittedOrder.serviceLocation.appointmentType === + AppointmentTypeStrings.DROP_OFF + ); }, inShopAppointmentDuration() { const inshopDurationTime = getDisplayTextForDurationLength( @@ -287,11 +328,13 @@ export default { }, selectedVaps() { return this.submittedOrder.lineItems.vaps; - } + }, }, mounted() { if (this.carrierUrl) { - this.$refs.siteFooter.updateButtonText(`Go back to ${this.carrierName}`); + this.$refs.siteFooter.updateButtonText( + `Go back to ${this.carrierName}` + ); } }, methods: { @@ -304,57 +347,62 @@ export default { // Service Location const { serviceLocation } = useMainStore().order; const mobileReqs = !!( - serviceLocation.address - && serviceLocation.city - && serviceLocation.state - && serviceLocation.zipCode + serviceLocation.address && + serviceLocation.city && + serviceLocation.state && + serviceLocation.zipCode ); const providerLocation = serviceLocation.provider.address; const dropOffInShopReqs = !!( - providerLocation.streetAddress - && providerLocation.city - && providerLocation.state - && providerLocation.zipCode + providerLocation.streetAddress && + providerLocation.city && + providerLocation.state && + providerLocation.zipCode ); - const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE - || serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; + const isMobile = + serviceLocation.appointmentType === + AppointmentTypeStrings.MOBILE || + serviceLocation.appointmentType === + AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; const serviceLocationReqs = (isMobile && mobileReqs) || (!isMobile && dropOffInShopReqs); // Insurance - const isInsuranceSet = useMainStore().order.payment.isInsurance !== null; + const isInsuranceSet = + useMainStore().order.payment.isInsurance !== null; // Schedule const { schedule } = useMainStore().order; const scheduleReqs = !!( - schedule.date - && schedule.startTime - && schedule.endTime - && schedule.jobMaxMinutes - && schedule.jobMinMinutes + schedule.date && + schedule.startTime && + schedule.endTime && + schedule.jobMaxMinutes && + schedule.jobMinMinutes ); // Contact Info const { contactInfo } = useMainStore().order; const contactInfoReqs = !!( - contactInfo.firstName - && contactInfo.lastName - && contactInfo.servicePhone - && contactInfo.emailAddress + contactInfo.firstName && + contactInfo.lastName && + contactInfo.servicePhone && + contactInfo.emailAddress ); // Payment - const paymentMethodReqs = useMainStore().order.payment.isPayInAdvance === false; + const paymentMethodReqs = + useMainStore().order.payment.isPayInAdvance === false; return ( - serviceLocationReqs - && isInsuranceSet - && scheduleReqs - && contactInfoReqs - && paymentMethodReqs + serviceLocationReqs && + isInsuranceSet && + scheduleReqs && + contactInfoReqs && + paymentMethodReqs ); }, forwardButtonAction() { @@ -365,11 +413,15 @@ export default { 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)}`; + return `Between ${get12HourTimeMobileFormat( + this.appointmentStartTime + )} - ${get12HourTimeMobileFormat(this.appointmentEndTime)}`; case AppointmentTypeStrings.DROP_OFF: return 'Drop off before 9:30 AM'; case AppointmentTypeStrings.IN_SHOP: - return `at ${get12HourTimeFormat(this.appointmentStartTime)}`; + return `at ${get12HourTimeFormat( + this.appointmentStartTime + )}`; default: return null; } @@ -377,7 +429,11 @@ export default { processIfStatements, getBodyText2FromCms(cmsWidgetName) { const body2Text = this.getCmsContent(cmsWidgetName, 'BodyText2'); - return this.processIfStatements(body2Text, 'custom', this.getCustomValueFromString); + return this.processIfStatements( + body2Text, + 'custom', + this.getCustomValueFromString + ); }, getCustomValueFromString(str) { switch (str) { @@ -388,8 +444,8 @@ export default { default: return null; } - } - } + }, + }, }; diff --git a/src/layouts/policy-holder-details/policy-holder-details.vue b/src/layouts/policy-holder-details/policy-holder-details.vue index b1418757..5e9fff1e 100644 --- a/src/layouts/policy-holder-details/policy-holder-details.vue +++ b/src/layouts/policy-holder-details/policy-holder-details.vue @@ -4,39 +4,39 @@ v-slot="{ meta }" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -
-
- -
-
-
- - - - -
-
+
+
+
+ +
+
+
+
+ + + + @@ -164,14 +164,14 @@ export default { #sub-header p { font-size: 16px; line-height: 26px; - color: #4D5151; + color: #4d5151; } #address-questions-wrapper { margin-top: 24px; } -#address-questions-wrapper .alert.heading { +#address-questions-wrapper .alert.heading { line-height: 24px; } diff --git a/src/layouts/policy-vehicles/policy-vehicles.vue b/src/layouts/policy-vehicles/policy-vehicles.vue index ae63de7e..b23ee186 100644 --- a/src/layouts/policy-vehicles/policy-vehicles.vue +++ b/src/layouts/policy-vehicles/policy-vehicles.vue @@ -4,35 +4,32 @@ v-slot="{ meta }" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -
-
- -
-
-
-
-
- - - -
-
-
+
+
+
+ +
+
+
+
+
+ + +
@@ -55,9 +52,10 @@ import globalRules from '@/constants/global-rules.js'; import { useMainStore } from '@/store/index.js'; import bailoutMessage from '@/constants/bailoutMessage'; import { - deductibleForSelectedVehicle, endorsementsForSelectedVehicle, + deductibleForSelectedVehicle, + endorsementsForSelectedVehicle, noCoverageForSelectedVehicle, - repairWaivedForSelectedVehicle + repairWaivedForSelectedVehicle, } from '@/helpers/policy-vehicle-helper'; export default { @@ -68,11 +66,13 @@ export default { vehicleBanner, policyVehiclesQuestion, // eslint-disable-next-line vue/no-reserved-component-names - Form + Form, }, mixins: [BaseFormMixin], async beforeRouteEnter(to, from, next) { - const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage); + const cmsContentPromise = await fetchCmsContentForPage( + to.query.issPage + ); next((vm) => { vm.setCmsContent(cmsContentPromise); }); @@ -90,26 +90,27 @@ export default { displayGeneric: true, policyVinFound: true, rules: { - optionRequired: globalRules.OPTION_REQUIRED - } + optionRequired: globalRules.OPTION_REQUIRED, + }, }; }, computed: { VehiclesForQuestions() { // Map API result data, to address-vehicles data structure const vehicles = this.policyVehicles; - const mappedData = vehicles?.map((v) => { - const maskSymbol = 'X'; - const vinStart = maskSymbol.repeat(v.vin.length - 6); - const vinEnd = v.vin.substring(v.vin.length - 6); - return { - vin: v.vin, - vehicle: v, - Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`, - Name: v.vin, - SubText: `VIN ${vinStart}${vinEnd}` - }; - }) ?? []; + const mappedData = + vehicles?.map((v) => { + const maskSymbol = 'X'; + const vinStart = maskSymbol.repeat(v.vin.length - 6); + const vinEnd = v.vin.substring(v.vin.length - 6); + return { + vin: v.vin, + vehicle: v, + Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`, + Name: v.vin, + SubText: `VIN ${vinStart}${vinEnd}`, + }; + }) ?? []; return mappedData; }, noCoverageForSelectedVehicle() { @@ -125,9 +126,11 @@ export default { return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle); }, selectedVehicle() { - const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin); + const vehicle = this.mainStore.lookupVehicleByVin( + this.selectedVehicleVin + ); return vehicle; - } + }, }, watch: { async selectedVehicleVin(value) { @@ -151,10 +154,12 @@ export default { // save selected vehicle to the store this.mainStore.updateVehicle(vehicle.data); this.displayGeneric = false; - this.selectedPolicyVehicle = this.policyVehicles.find((p) => p.vin === value); + this.selectedPolicyVehicle = this.policyVehicles.find( + (p) => p.vin === value + ); } } - } + }, }, beforeMount() { if (this.mainStore.order.vehicle.vin) { @@ -163,116 +168,141 @@ export default { this.selectedVehicleVin = this.policyVehicles[0]?.vin; } }, - methods: - { - backButtonAction() { - useMainStore().issConfig.disabledFields.policyNumber = true; - this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); - }, - async forwardButtonAction() { - if (this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED) { - const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin); - const vehicle = this.policyVehicles.find((pv) => pv.vin === this.selectedVehicleVin); + methods: { + backButtonAction() { + useMainStore().issConfig.disabledFields.policyNumber = true; + this.$router.navigate( + this.navigationScenarios.CLICKED_BACK, + this.$route + ); + }, + async forwardButtonAction() { + if ( + this.selectedVehicleVin !== + vehicleSelectionOptions.VEHICLE_NOT_LISTED + ) { + const vehicleLookupResponse = await this.lookupVehicleByVin( + this.selectedVehicleVin + ); + const vehicle = this.policyVehicles.find( + (pv) => pv.vin === this.selectedVehicleVin + ); - if (vehicleLookupResponse.error) { - if (vehicleLookupResponse.status === 404) { - this.mainStore.resetVehicleState(); - useMainStore().updateVehicle({ - policyVehicleId: vehicle.id, - carId: '0', - category: '', - year: vehicle.vehicleYear || '', - make: vehicle.vehicleMake || '', - model: vehicle.vehicleModel || '', - style: vehicle.vehicleStyle || '', - vin: vehicle.vin, - noCoverage: this.noCoverageForSelectedVehicle, - deductible: this.deductibleForSelectedVehicle, - repairWaived: this.repairWaivedForSelectedVehicle - - }); - this.policyVinFound = false; - return this.navigateForward(); - } - - this.mainStore.setBailout(bailoutMessage.vehicleLookupError(vehicle.vin, vehicleLookupResponse.data)); + if (vehicleLookupResponse.error) { + if (vehicleLookupResponse.status === 404) { + this.mainStore.resetVehicleState(); + useMainStore().updateVehicle({ + policyVehicleId: vehicle.id, + carId: '0', + category: '', + year: vehicle.vehicleYear || '', + make: vehicle.vehicleMake || '', + model: vehicle.vehicleModel || '', + style: vehicle.vehicleStyle || '', + vin: vehicle.vin, + noCoverage: this.noCoverageForSelectedVehicle, + deductible: this.deductibleForSelectedVehicle, + repairWaived: this.repairWaivedForSelectedVehicle, + }); + this.policyVinFound = false; return this.navigateForward(); } - this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { + this.mainStore.setBailout( + bailoutMessage.vehicleLookupError( + vehicle.vin, + vehicleLookupResponse.data + ) + ); + return this.navigateForward(); + } + + this.vehicleFromLookup = Object.assign( + vehicleLookupResponse.data, + { policyVehicleId: vehicle.id, vin: this.selectedVehicleVin, noCoverage: this.noCoverageForSelectedVehicle, deductible: this.deductibleForSelectedVehicle, repairWaived: this.repairWaivedForSelectedVehicle, - endorsements: this.endorsementsForSelectedVehicle - }); + endorsements: this.endorsementsForSelectedVehicle, + } + ); - useMainStore().updateVehicle(this.vehicleFromLookup); - } - return this.navigateForward(); - }, - navigateForward() { - if (this.mainStore.isBailout) { - this.$router - .navigate( - this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT, - this.$route, - {}, - {} - ); - } else if (this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED) { - this.$router - .navigate( - this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE, - this.$route, - {}, - {} - ); - } else if (this.endorsementsForSelectedVehicle?.length > 0 - && (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD) - || this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))) { - this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS, - this.$route - ); - } else if (!this.policyVinFound) { - this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND, - this.$route, - {}, - {} - ); - } else { - this.$router.navigate( - this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE, - this.$route, - {}, - {} - ); - } - }, - async lookupVehicleByVin(vin) { - try { - return await useMainStore().lookupVehicleByVin(vin); - } catch (responseError) { - return { - error: true, - status: responseError.status, - data: responseError.data - }; - } + useMainStore().updateVehicle(this.vehicleFromLookup); } - } + return this.navigateForward(); + }, + navigateForward() { + if (this.mainStore.isBailout) { + this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT, + this.$route, + {}, + {} + ); + } else if ( + this.selectedVehicleVin === + vehicleSelectionOptions.VEHICLE_NOT_LISTED + ) { + this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE, + this.$route, + {}, + {} + ); + } else if ( + this.endorsementsForSelectedVehicle?.length > 0 && + (this.endorsementsForSelectedVehicle?.includes( + endorsementOptions.PARKING_GUARD + ) || + this.endorsementsForSelectedVehicle?.includes( + endorsementOptions.EDUCATOR + )) + ) { + this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS, + this.$route + ); + } else if (!this.policyVinFound) { + this.$router.navigate( + this.navigationScenarios + .CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND, + this.$route, + {}, + {} + ); + } else { + this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE, + this.$route, + {}, + {} + ); + } + }, + async lookupVehicleByVin(vin) { + try { + return await useMainStore().lookupVehicleByVin(vin); + } catch (responseError) { + return { + error: true, + status: responseError.status, + data: responseError.data, + }; + } + }, + }, }; + diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue index 47fff987..36fe6f46 100644 --- a/src/layouts/provider-preference/provider-preference.vue +++ b/src/layouts/provider-preference/provider-preference.vue @@ -1,26 +1,32 @@ diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue index 35dab39e..ea181224 100644 --- a/src/layouts/service-packages/service-packages.vue +++ b/src/layouts/service-packages/service-packages.vue @@ -4,14 +4,18 @@ v-slot="{ meta }" @submit="onSubmit" @invalid-submit="onInvalidSubmit"> -
-
- - -
+
+
+
+ +
+
+
+
+
+ + + + +
- - - - - @@ -81,7 +81,7 @@ export default { Form, servicePackageQuestion, loadingModal, - contentGroupModal + contentGroupModal, }, mixins: [baseFormMixin], async beforeRouteEnter(to, from, next) { @@ -94,20 +94,20 @@ export default { const promiseResultMap = [ { resultKey: 'cmsContent', - promise: cmsContentPromise + promise: cmsContentPromise, }, { resultKey: 'wipers', - promise: wipersPromise + promise: wipersPromise, }, { resultKey: 'rainDefense', - promise: rainDefensePromise + promise: rainDefensePromise, }, { resultKey: 'supportingItems', - promise: supportingItemsPromise - } + promise: supportingItemsPromise, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -118,11 +118,12 @@ export default { resultMap.rainDefense, ...resultMap.supportingItems, ...resultMap.wipers, - ...clonedGlassParts + ...clonedGlassParts, ]; let hasBailedOut = false; - const pricingResults = await store.getPriceOrderItems(availableLineItems) + const pricingResults = await store + .getPriceOrderItems(availableLineItems) .catch((err) => { useMainStore().setBailout( bailoutMessage.pricingResponseError( @@ -155,17 +156,17 @@ export default { 'Looking for dates', 'Searching for times', 'Nearly there', - 'Finishing up' + 'Finishing up', ], rules: { - optionRequired: globalRules.OPTION_REQUIRED - } + optionRequired: globalRules.OPTION_REQUIRED, + }, }; }, computed: { PriceDisclaimerText() { return this.getCmsContent('PriceDisclaimerWidget', 'Text'); - } + }, }, methods: { openModalAction(modalName) { @@ -173,11 +174,11 @@ export default { }, arePagePrerequisitesValid() { return ( - store.order.serviceLocation.zipCode - && store.order.serviceLocation.zipCodeCtu - && (store.order.damage.isRepair - || (store.order.lineItems?.glassParts != null - && store.order.lineItems.glassParts.length > 0)) + store.order.serviceLocation.zipCode && + store.order.serviceLocation.zipCodeCtu && + (store.order.damage.isRepair || + (store.order.lineItems?.glassParts != null && + store.order.lineItems.glassParts.length > 0)) ); }, vapsItemsSelectedAction(vapsItemsSelected) { @@ -187,10 +188,12 @@ export default { const parts = { glassParts: this.pricedGlassParts, supportingItems: this.supportingItems, - vaps: this.selectedVaps + vaps: this.selectedVaps, }; if (!allGlassPartsAndItemsHavePrices(parts)) { - window.console.error('One or more items have no price assigned!'); + window.console.error( + 'One or more items have no price assigned!' + ); } if (this.pricedGlassParts.length > 0) { store.updateGlassParts(this.pricedGlassParts); @@ -198,15 +201,18 @@ export default { store.updateSupportingItems(this.supportingItems); store.updateVaps(this.selectedVaps); - this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route); - } - } + this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD, + this.$route + ); + }, + }, }; diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue index 661d68d7..efba00b9 100644 --- a/src/layouts/tpa-search/tpa-search.vue +++ b/src/layouts/tpa-search/tpa-search.vue @@ -1,112 +1,120 @@ @@ -138,7 +146,7 @@ const radiusFilterPairs = [ { radius: 15, filter: '15 miles' }, { radius: 25, filter: '25 miles' }, { radius: 50, filter: '50 miles' }, - { radius: 100, filter: '100 miles' } + { radius: 100, filter: '100 miles' }, ]; function convertRadiusFilterToInteger(filter) { @@ -194,11 +202,12 @@ export default { googleMap, siteFooter, // eslint-disable-next-line vue/no-reserved-component-names - Form + Form, }, mixins: [BaseFormMixin], async beforeRouteEnter(to, from, next) { - const { zipCode, filter, providers, providerNumber } = await getInitialSearchData(); + const { zipCode, filter, providers, providerNumber } = + await getInitialSearchData(); const cmsContent = await fetchCmsContentForPage(to.query.issPage); next(async (vm) => { @@ -216,7 +225,7 @@ export default { selectedProviderNumber: '', reloadingProviders: false, additionalButtonData: { - displayAvailabilityIndicators: false + displayAvailabilityIndicators: false, }, widget: { siteHeader: 'SiteHeaderWidget', @@ -225,22 +234,23 @@ export default { filterByQuestion: 'FilterByQuestion', noNetworkShopsAlert: 'NoNetworkShopsAlertWidget', shopNotListedLink: 'ShopNotListedLink', - siteFooter: 'SiteFooterWidget' + siteFooter: 'SiteFooterWidget', }, rules: { zipCode: `${globalRules.ZIP_CODE_REQUIRED}|${globalRules.ZIP_CODE_SEARCH_FORMAT}`, filter: globalRules.OPTION_REQUIRED, // TODO do we even need this? - provider: globalRules.OPTION_REQUIRED + provider: globalRules.OPTION_REQUIRED, }, - shopListButton: shallowRef(shopListButton) + shopListButton: shallowRef(shopListButton), }; }, computed: { filterOptions() { - const filterByAnswers = this.getCmsContent( - this.widget.filterByQuestion, - widgetFields.INPUT_QUESTION_WIDGET.ANSWERS - ) ?? []; + const filterByAnswers = + this.getCmsContent( + this.widget.filterByQuestion, + widgetFields.INPUT_QUESTION_WIDGET.ANSWERS + ) ?? []; const filterByAnswersObj = {}; [...filterByAnswers].forEach((answer) => { filterByAnswersObj[answer.Name] = answer.Name; @@ -275,14 +285,26 @@ export default { )?.replaceAll('{custom:radiusInMiles}', this.radiusInMiles); }, providerAddresses() { - return this.providers?.map((provider) => this.getProviderAddress(provider)) ?? []; + return ( + this.providers?.map((provider) => + this.getProviderAddress(provider) + ) ?? [] + ); }, providerButtonData() { - return this.providers?.map((provider) => this.getShopButtonDataFromProvider(provider)) ?? []; + return ( + this.providers?.map((provider) => + this.getShopButtonDataFromProvider(provider) + ) ?? [] + ); }, selectedProviderIsSafeliteShop() { - return this.providers?.find((p) => p.providerNumber === this.selectedProviderNumber)?.isSafeliteShop ?? false; - } + return ( + this.providers?.find( + (p) => p.providerNumber === this.selectedProviderNumber + )?.isSafeliteShop ?? false + ); + }, }, watch: { async filter() { @@ -295,13 +317,16 @@ export default { }, providers(newProviders) { if (this.dataLoaded) { - this.selectedProviderNumber = newProviders?.length === 1 ?? false - ? newProviders[0]?.providerNumber ?? '' - : ''; + this.selectedProviderNumber = + newProviders?.length === 1 ?? false + ? newProviders[0]?.providerNumber ?? '' + : ''; } }, selectedProviderNumber(newNumber) { - const provider = this.providers?.find((p) => p.providerNumber === newNumber); + const provider = this.providers?.find( + (p) => p.providerNumber === newNumber + ); if (provider && this.dataLoaded) { useMainStore().updateServiceLocation({ searchFilter: this.filter, @@ -313,14 +338,14 @@ export default { city: provider.address?.city, state: provider.address?.state, zipCode: provider.address?.zipCode, - zipCodeCtu: provider.address?.zipCodeCtu + zipCodeCtu: provider.address?.zipCodeCtu, }, companyName: provider?.companyName, - phoneNumber: provider?.phoneNumber - } + phoneNumber: provider?.phoneNumber, + }, }); } - } + }, }, beforeUpdate() { if (!this.dataLoaded) { @@ -355,12 +380,16 @@ export default { } const addressLine1 = toTitleCase(provider?.address?.streetAddress); - const joinString = addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : ''; + const joinString = + addressLine1.length > 0 && addressLine2.length > 0 ? ', ' : ''; return [addressLine1, addressLine2].join(joinString); }, async getProviderButtonData() { this.reloadingProviders = true; - const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles); + const getTpaProvidersResult = await useMainStore().getTpaProviders( + this.zipCode, + this.radiusInMiles + ); this.reloadingProviders = false; return getTpaProvidersResult?.data?.shopProviders ?? []; }, @@ -381,7 +410,8 @@ export default { } const scenario = this.selectedProviderIsSafeliteShop ? this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP - : this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP; + : this.navigationScenarios + .CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP; this.$router.navigate(scenario, this.$route); }, getCustomValueFromString(str) { @@ -394,25 +424,27 @@ export default { }, getShopButtonDataFromProvider(provider) { const cellNumber = toDisplayPhoneNumber(provider?.phoneNumber); - const distance = provider?.distanceInMiles !== null && !Number.isNaN(parseFloat(provider?.distanceInMiles)) - ? +provider.distanceInMiles.toFixed(1) - : null; + const distance = + provider?.distanceInMiles !== null && + !Number.isNaN(parseFloat(provider?.distanceInMiles)) + ? +provider.distanceInMiles.toFixed(1) + : null; return { buttonLabel: provider?.companyName ?? '', - buttonLabelSubCopy: distance === null - ? '' - : `${distance} mi`, - buttonBodyCopy: `${this.getProviderAddress(provider)}
${cellNumber ?? ''}`, - value: provider?.providerNumber ?? '' + buttonLabelSubCopy: distance === null ? '' : `${distance} mi`, + buttonBodyCopy: `${this.getProviderAddress(provider)}
${ + cellNumber ?? '' + }`, + value: provider?.providerNumber ?? '', }; - } - } + }, + }, }; diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue index fda79826..373dfe07 100644 --- a/src/layouts/tpa-submit/tpa-submit.vue +++ b/src/layouts/tpa-submit/tpa-submit.vue @@ -5,17 +5,22 @@ class="tpa-submit" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -
-
- -
+
+
+
+ +
+
+
+
+ class="mt-5" /> + -
+
this.navigate(vehicleScenario)), - // eslint-disable-next-line max-len - this.getSection(this.widget.subheader.damage, this.getDamageLines, () => this.navigate(this.navigationScenarios.EDIT_DAMAGE)), - // eslint-disable-next-line max-len - this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)), - // eslint-disable-next-line max-len - this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.openContactDetailsModal) - ]; - }, - getSection(widgetName, lines, onClick) { - return { - title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT), - lines, - onClickEdit: onClick - }; - }, - forwardButtonAction() { - this.navigate(this.navigationScenarios.CLICKED_FORWARD); - }, - navigate(scenario) { - this.$router.navigate(scenario, this.$route); - }, - getCustomValueFromString(str) { - switch (str) { - case 'deductibleAboveZero': - return this.isVerified && this.currentDeductible !== 0; - case 'zeroDeductible': - return this.isVerified && this.currentDeductible === 0; - case 'verifyingCoverage': - return !this.isVerified; - default: - return null; - } - }, - openContactDetailsModal() { - this.$refs.contactDetailsDrawer.openModal(); + methods: { + setSections() { + const vehicleScenario = useMainStore().isPolicyVehicle + ? this.navigationScenarios.EDIT_POLICY_VEHICLE + : this.navigationScenarios.EDIT_VEHICLE; + this.sections = [ + this.getSection( + this.widget.subheader.vehicle, + this.getVehicleLines, + () => this.navigate(vehicleScenario) + ), + // eslint-disable-next-line max-len + this.getSection( + this.widget.subheader.damage, + this.getDamageLines, + () => this.navigate(this.navigationScenarios.EDIT_DAMAGE) + ), + // eslint-disable-next-line max-len + this.getSection( + this.widget.subheader.shop, + this.getPreferredShopLines, + () => + this.navigate( + this.navigationScenarios.EDIT_PREFERRED_SHOP + ) + ), + // eslint-disable-next-line max-len + this.getSection( + this.widget.subheader.contactInfo, + this.getContactInfoLines, + this.openContactDetailsModal + ), + ]; + }, + getSection(widgetName, lines, onClick) { + return { + title: this.getCmsContent( + widgetName, + widgetFields.TEXT_BLOCK_WIDGET.TEXT + ), + lines, + onClickEdit: onClick, + }; + }, + forwardButtonAction() { + this.navigate(this.navigationScenarios.CLICKED_FORWARD); + }, + navigate(scenario) { + this.$router.navigate(scenario, this.$route); + }, + getCustomValueFromString(str) { + switch (str) { + case 'deductibleAboveZero': + return this.isVerified && this.currentDeductible !== 0; + case 'zeroDeductible': + return this.isVerified && this.currentDeductible === 0; + case 'verifyingCoverage': + return !this.isVerified; + default: + return null; } - } + }, + openContactDetailsModal() { + this.$refs.contactDetailsDrawer.openModal(); + }, + }, }; diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 2771b30e..e2e541ae 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -4,66 +4,94 @@ v-slot="{ meta }" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> -
-
- -
-
-
- - - - - - - - - -
-
+
+
+
+ +
+
+
+
+ + + +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
@@ -95,7 +123,10 @@ import damageLocationsSelected from '@/constants/damage-locations-selected.js'; import { useMainStore } from '@/store'; // DEFINE VALIDATION RULES -defineRule('replace-options-required', required(errorMessages.REPLACE_OPTIONS_REQUIRED)); +defineRule( + 'replace-options-required', + required(errorMessages.REPLACE_OPTIONS_REQUIRED) +); export default { name: 'vehicle-damage', @@ -111,7 +142,7 @@ export default { replaceOptionsQuestion, // eslint-disable-next-line vue/no-reserved-component-names Form, - alert + alert, }, mixins: [BaseFormMixin, vehicleQuestionsMixin], async beforeRouteEnter(to, from, next) { @@ -119,18 +150,20 @@ export default { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); - const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId); + const damageOptionsPromise = store.getDamageOptions( + store.order.vehicle.carId + ); // Settle promises and get results const promiseResultMap = [ { resultKey: 'cmsContent', - promise: cmsContentPromise + promise: cmsContentPromise, }, { resultKey: 'damageOptions', - promise: damageOptionsPromise - } + promise: damageOptionsPromise, + }, ]; const resultMap = await settleAllPromises(promiseResultMap); @@ -138,13 +171,23 @@ export default { // Call the "next" function to complete the transition to this page. next((vm) => { vm.setCmsContent(resultMap.cmsContent); - vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions); - vm.$refs.sideDoorOptions.initializeComponent( - resultMap.damageOptions.driverSideOptions.availableReplacementOptions, - resultMap.damageOptions.passengerSideOptions.availableReplacementOptions + vm.$refs.damageLocation.initializeComponent( + resultMap.damageOptions + ); + vm.$refs.sideDoorOptions.initializeComponent( + resultMap.damageOptions.driverSideOptions + .availableReplacementOptions, + resultMap.damageOptions.passengerSideOptions + .availableReplacementOptions + ); + vm.$refs.windshieldOptions.initializeComponent( + resultMap.damageOptions.windshieldOptions + .availableReplacementOptions + ); + vm.$refs.backGlassOptions.initializeComponent( + resultMap.damageOptions.backGlassOptions + .availableReplacementOptions ); - vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions.availableReplacementOptions); - vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions.availableReplacementOptions); }); }, setup() { @@ -157,77 +200,101 @@ export default { selectedDamageLocations: this.getDamageLocationsFromStore(), sideDoorOptionsData: { selectedDoorSides: this.getDoorSidesFromStore(), - selectedDriverSideReplaceOptions: this.getDriverSideReplaceOptionsFromStore(), - selectedPassengerSideReplaceOptions: this.getPassengerSideReplaceOptionsFromStore() + selectedDriverSideReplaceOptions: + this.getDriverSideReplaceOptionsFromStore(), + selectedPassengerSideReplaceOptions: + this.getPassengerSideReplaceOptionsFromStore(), }, selectedWindshieldOptions: this.getWindshieldOptionsFromStore(), - selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore() + selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(), }; }, computed: { isWindshieldDamageLocation() { - return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD); + return this.selectedDamageLocations.some( + (selectedDamages) => + selectedDamages.toUpperCase() === + damageLocationsCms.WINDSHIELD + ); }, isSideDoorDamageLocation() { - return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR); + return this.selectedDamageLocations.some( + (selectedDamages) => + selectedDamages.toUpperCase() === + damageLocationsCms.SIDEDOOR + ); }, isRearWindowDamageLocation() { - return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW); + return this.selectedDamageLocations.some( + (selectedDamages) => + selectedDamages.toUpperCase() === + damageLocationsCms.REARWINDOW + ); }, isWindshieldRepair() { return ( - this.isWindshieldDamageLocation - && this.selectedWindshieldOptions.selectedWindshieldDamageType - === damageLocationsSelected.REPAIR + this.isWindshieldDamageLocation && + this.selectedWindshieldOptions.selectedWindshieldDamageType === + damageLocationsSelected.REPAIR ); }, isDriverSideReplace() { if (!this.isSideDoorDamageLocation) return false; - return this - .sideDoorOptionsData.selectedDoorSides - .some((selectedDriverSide) => selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE); + return this.sideDoorOptionsData.selectedDoorSides.some( + (selectedDriverSide) => + selectedDriverSide.toUpperCase() === + damageLocationsCms.DRIVERSIDE + ); }, isPassengerSideReplace() { if (!this.isSideDoorDamageLocation) return false; - return this - .sideDoorOptionsData.selectedDoorSides - .some((selectedPassengerSide) => selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE); + return this.sideDoorOptionsData.selectedDoorSides.some( + (selectedPassengerSide) => + selectedPassengerSide.toUpperCase() === + damageLocationsCms.PASSENGERSIDE + ); }, hasRepairReplaceConflict() { return ( - this.isWindshieldDamageLocation - && this.selectedDamageLocations.length > 1 - && this.isWindshieldRepair + this.isWindshieldDamageLocation && + this.selectedDamageLocations.length > 1 && + this.isWindshieldRepair ); }, hasSplitSingleConflict() { if ( - !this.selectedDamageLocations?.includes('Windshield') - || this.selectedWindshieldOptions.selectedWindshieldDamageType - === damageLocationsSelected.REPAIR - || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions - ) return false; + !this.selectedDamageLocations?.includes('Windshield') || + this.selectedWindshieldOptions.selectedWindshieldDamageType === + damageLocationsSelected.REPAIR || + !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions + ) + return false; return ( - this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedSingleWindshield) => ( - selectedSingleWindshield.toUpperCase() - === damageLocationsSelected.SINGLE.toUpperCase() - )) - && (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedDriverWindshield) => ( - selectedDriverWindshield.toUpperCase() - === damageLocationsSelected.DRIVER.toUpperCase() - )) - || this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedPassengerWindshield) => ( - selectedPassengerWindshield.toUpperCase() - === damageLocationsSelected.PASSENGER.toUpperCase() - ))) + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some( + (selectedSingleWindshield) => + selectedSingleWindshield.toUpperCase() === + damageLocationsSelected.SINGLE.toUpperCase() + ) && + (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some( + (selectedDriverWindshield) => + selectedDriverWindshield.toUpperCase() === + damageLocationsSelected.DRIVER.toUpperCase() + ) || + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some( + (selectedPassengerWindshield) => + selectedPassengerWindshield.toUpperCase() === + damageLocationsSelected.PASSENGER.toUpperCase() + )) ); }, shouldDisplayVehicleChangeAlert() { - return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]; - } + return this.$route.params[ + this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT + ]; + }, }, methods: { arePagePrerequisitesValid() { @@ -240,22 +307,32 @@ export default { const glassSelections = []; if ( - this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD) - || this.mainStore.order.damage.isRepair + this.mainStore.order.damage.glassToReplace?.some( + (glass) => + glass.glassLocation === + damageLocationsSelected.WINDSHIELD + ) || + this.mainStore.order.damage.isRepair ) { glassSelections.push(damageLocationsSelected.WINDSHIELD); } if ( - this.mainStore.order.damage.glassToReplace?.some((glass) => ( - glass.glassLocation === damageLocationsSelected.DRIVER - || glass.glassLocation === damageLocationsSelected.PASSENGER - )) + this.mainStore.order.damage.glassToReplace?.some( + (glass) => + glass.glassLocation === + damageLocationsSelected.DRIVER || + glass.glassLocation === + damageLocationsSelected.PASSENGER + ) ) { glassSelections.push(damageLocationsSelected.SIDEDOOR); } if ( - this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.REAR) + this.mainStore.order.damage.glassToReplace?.some( + (glass) => + glass.glassLocation === damageLocationsSelected.REAR + ) ) { glassSelections.push(damageLocationsSelected.REARWINDOW); } @@ -266,43 +343,62 @@ export default { const windShieldOptions = { selectedWindshieldDamageType: '', selectedWindshieldChipCount: null, - selectedWindshieldReplaceOptions: [] + selectedWindshieldReplaceOptions: [], }; - if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions; + if (this.mainStore.order.damage.isRepair === undefined) + return windshieldOptions; if (this.mainStore.order.damage.isRepair) { - windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR; - windShieldOptions.selectedWindshieldChipCount = this.mainStore.order.damage.numberOfChips; + windShieldOptions.selectedWindshieldDamageType = + damageLocationsSelected.REPAIR; + windShieldOptions.selectedWindshieldChipCount = + this.mainStore.order.damage.numberOfChips; } else { if ( - this.mainStore.order.damage.glassToReplace?.some((glass) => ( - glass.glassLocation === damageLocationsSelected.WINDSHIELD - && glass.glassName === damageLocationsSelected.SINGLE - )) + this.mainStore.order.damage.glassToReplace?.some( + (glass) => + glass.glassLocation === + damageLocationsSelected.WINDSHIELD && + glass.glassName === damageLocationsSelected.SINGLE + ) ) { - windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE; - windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE); + windShieldOptions.selectedWindshieldDamageType = + damageLocationsSelected.REPLACE; + windShieldOptions.selectedWindshieldReplaceOptions.push( + damageLocationsSelected.SINGLE + ); } if ( - this.mainStore.order.damage.glassToReplace?.some((glass) => ( - glass.glassLocation === damageLocationsSelected.WINDSHIELD - && glass.glassName === damageLocationsSelected.DRIVER - )) + this.mainStore.order.damage.glassToReplace?.some( + (glass) => + glass.glassLocation === + damageLocationsSelected.WINDSHIELD && + glass.glassName === damageLocationsSelected.DRIVER + ) ) { - windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE; - windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER); + windShieldOptions.selectedWindshieldDamageType = + damageLocationsSelected.REPLACE; + windShieldOptions.selectedWindshieldReplaceOptions.push( + damageLocationsSelected.DRIVER + ); } if ( - this.mainStore.order.damage.glassToReplace?.some((glass) => ( - glass.glassLocation === damageLocationsSelected.WINDSHIELD - && glass.glassName === damageLocationsSelected.PASSENGER - )) + this.mainStore.order.damage.glassToReplace?.some( + (glass) => + glass.glassLocation === + damageLocationsSelected.WINDSHIELD && + glass.glassName === + damageLocationsSelected.PASSENGER + ) ) { - windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE; - windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER); + windShieldOptions.selectedWindshieldDamageType = + damageLocationsSelected.REPLACE; + windShieldOptions.selectedWindshieldReplaceOptions.push( + damageLocationsSelected.PASSENGER + ); } } @@ -311,13 +407,20 @@ export default { getDoorSidesFromStore() { const doorSides = []; if ( - this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.DRIVER) + this.mainStore.order.damage.glassToReplace?.some( + (glass) => + glass.glassLocation === damageLocationsSelected.DRIVER + ) ) { doorSides.push(damageLocationsSelected.DRIVERSIDE); } if ( - this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.PASSENGER) + this.mainStore.order.damage.glassToReplace?.some( + (glass) => + glass.glassLocation === + damageLocationsSelected.PASSENGER + ) ) { doorSides.push(damageLocationsSelected.PASSENGERSIDE); } @@ -347,8 +450,11 @@ export default { return passengerSideReplaceOptions; }, getRearReplaceOptionsFromStore() { - const rearReplaceOptions = this.mainStore.order.damage - .glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName; + const rearReplaceOptions = + this.mainStore.order.damage.glassToReplace?.filter( + (glass) => + glass.glassLocation === damageLocationsSelected.REAR + )[0]?.glassName; return rearReplaceOptions; }, @@ -360,7 +466,8 @@ export default { ); if (this.isWindshieldRepair) { - const supportingItems = await useMainStore().getSupportingItems(); + const supportingItems = + await useMainStore().getSupportingItems(); useMainStore().updateSupportingItems(supportingItems.data); } @@ -372,16 +479,22 @@ export default { } else if (this.mainStore.order.vehicle.vin) { // If vin already exists, navigate directly to vin-lookup - const partsOrQuestionsResponse = await this.getPartsOrQuestions(); + const partsOrQuestionsResponse = + await this.getPartsOrQuestions(); if (partsOrQuestionsResponse.error) { // To Do: Need requirement on what to do here - window.console.error('Error on retrieving PartsOrQuestions'); + window.console.error( + 'Error on retrieving PartsOrQuestions' + ); this.$refs.siteFooter.removeLoader(); return null; } // Comes from vehicleQuestionsMixin.navigateForward() - await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this); + await this.navigateForward( + partsOrQuestionsResponse.data.partsOrQuestions, + this + ); } else { this.$router.navigate( this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, @@ -394,42 +507,48 @@ export default { selectedGlassToReplace() { const selectedGlassToReplace = []; if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) { - this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach((wsItem) => { - selectedGlassToReplace.push({ - glassLocation: damageLocationsSelected.WINDSHIELD, - glassName: wsItem - }); - }); + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach( + (wsItem) => { + selectedGlassToReplace.push({ + glassLocation: damageLocationsSelected.WINDSHIELD, + glassName: wsItem, + }); + } + ); } if (this.isDriverSideReplace) { - this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => { - selectedGlassToReplace.push({ - glassLocation: damageLocationsSelected.DRIVER, - glassName: driverItem - }); - }); + this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach( + (driverItem) => { + selectedGlassToReplace.push({ + glassLocation: damageLocationsSelected.DRIVER, + glassName: driverItem, + }); + } + ); } if (this.isPassengerSideReplace) { - this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach((passengerItem) => { - selectedGlassToReplace.push({ - glassLocation: damageLocationsSelected.PASSENGER, - glassName: passengerItem - }); - }); + this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach( + (passengerItem) => { + selectedGlassToReplace.push({ + glassLocation: damageLocationsSelected.PASSENGER, + glassName: passengerItem, + }); + } + ); } if (this.isRearWindowDamageLocation) { selectedGlassToReplace.push({ glassLocation: damageLocationsSelected.REAR, - glassName: this.selectedRearReplaceOptions + glassName: this.selectedRearReplaceOptions, }); } return selectedGlassToReplace; - } - } + }, + }, }; diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue index 23278486..df4004c7 100644 --- a/src/layouts/vehicle-lookup/vehicle-lookup.vue +++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue @@ -1,36 +1,32 @@