diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index fb06197d..f5c9a221 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -33,7 +33,7 @@ loaderColor="white" :buttonText="footerButtonText" @click-event="validateAndEmit" - :class="isFooterButtonDisabled && 'form-test-invalid'" /> + :class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'" /> @@ -57,6 +57,7 @@ export default { onModalClosedCallback: { type: Function, }, + isButtonDisabled: Boolean }, setup(props) { const modalId = props.modalId ? props.modalId : `modal-${crypto.randomUUID()}`; @@ -80,7 +81,7 @@ export default { } }, resetButtonStyle() { - this.$refs.modalButtonMain.resetButtonStyle(); + this.$refs.modalButtonMain?.resetButtonStyle(); }, onModalOpened() { this.onModalOpenedCallback?.(); diff --git a/src/layouts/entry-page/entry-page.vue b/src/layouts/entry-page/entry-page.vue index 4f06bb03..6154f950 100644 --- a/src/layouts/entry-page/entry-page.vue +++ b/src/layouts/entry-page/entry-page.vue @@ -19,6 +19,7 @@ setup() { const mainStore = useMainStore(); mainStore.resetISSConfigState(); + mainStore.resetPageFields(); return { mainStore }; }, mounted() { diff --git a/src/layouts/provider-preference/provider-preference.spec.js b/src/layouts/provider-preference/provider-preference.spec.js index a2140519..9c84a066 100644 --- a/src/layouts/provider-preference/provider-preference.spec.js +++ b/src/layouts/provider-preference/provider-preference.spec.js @@ -6,7 +6,6 @@ import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-h import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { useMainStore } from "@/store"; import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; -import { nextTick } from "vue"; // Mock our module for promises. jest.mock("@/helpers/layout-helper.js", () => ({ diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue index 130738fe..954cede7 100644 --- a/src/layouts/provider-preference/provider-preference.vue +++ b/src/layouts/provider-preference/provider-preference.vue @@ -1,8 +1,5 @@ + + diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js new file mode 100644 index 00000000..869356ae --- /dev/null +++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.spec.js @@ -0,0 +1,85 @@ +/* eslint-env jest */ +import { render } from '@testing-library/vue'; +import userEvent from '@testing-library/user-event'; +import '@testing-library/jest-dom'; +import { issPageValues } from '@/router/router-constants/issPage-values'; +import { queryStrings } from '@/constants/query-strings'; +import { GaActions } from "@/constants/analytics"; +import tpaRecalToggle from './tpa-recal-toggle.vue'; + +const mockText = Object.freeze({ + HEADER: 'Mock Header', + BODY: 'Mock Body', +}); +const mockRoute = { + query: { + issPage: issPageValues.PROVIDER_PREFERENCE, + }, +}; +const mockRouter = { + navigate: jest.fn(), +}; + +const mountOptions = { + global: { + propsData: { + cmsWidgetName: "MockWidgetName", + }, + mixins: [ + { + methods: { + getCmsContent: jest.fn((cmsWidgetName, fieldName) => { + if (cmsWidgetName === 'MockWidgetName') { + if (fieldName === 'HeaderText') { + return mockText.HEADER; + } + + if (fieldName === 'BodyText') { + return mockText.BODY; + } + } + + return ''; + }), + pushEventToGA: jest.fn() + }, + computed: { + GaActions() { + return GaActions; + }, + queryStrings() { + return queryStrings; + }, + } + }, + ], + mocks: { + $route: mockRoute, + $router: mockRouter, + }, + }, +}; + +describe('more details section', () => { + test('should NOT be displayed on the screen as a default.', () => { + const { container } = render(tpaRecalToggle, mountOptions); + + const moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper'); + + expect(moreDetailsSection).not.toBeVisible(); + }); + + test('should toggle when arrow clicked', async () => { + const user = userEvent.setup(); + const { container } = render(tpaRecalToggle, mountOptions); + const toggleLink = container.querySelector('#moreDetails');; + + await user.click(toggleLink); + let moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper'); + expect(moreDetailsSection).toBeVisible(); + + await user.click(toggleLink); + moreDetailsSection = container.querySelector('#tpa-recal-detail-wrapper'); + expect(moreDetailsSection).not.toBeVisible(); + }); +}); diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue new file mode 100644 index 00000000..c524fcf6 --- /dev/null +++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue @@ -0,0 +1,111 @@ + + + + \ No newline at end of file diff --git a/src/layouts/vin-lookup/vin-lookup.spec.js b/src/layouts/vin-lookup/vin-lookup.spec.js index 894ac297..35ae1377 100644 --- a/src/layouts/vin-lookup/vin-lookup.spec.js +++ b/src/layouts/vin-lookup/vin-lookup.spec.js @@ -26,6 +26,14 @@ const lookupVehicleByVin = { }, }, }; +const lookupVehicleByVinError = { + methodName: 'lookupVehicleByVin', + mockResponse: { + data: { + error: true, + }, + }, +}; const getPartsOrQuestions = { methodName: 'getPartsOrQuestions', mockResponse: null, @@ -457,6 +465,34 @@ describe('vin-lookup.vue', () => { ); }); }); + + test("Selected vehicle VIN do not match vehicles (CarIDs) in our system then navigate forward to bailout page.", async () => { + //Arrange + const user = userEvent.setup(); + lookupVehicleByVin.mockResponse.data.error = true; + + jest.spyOn(VinLookupComponent.methods, lookupVehicleByVin.methodName) + .mockResolvedValue(lookupVehicleByVinError.mockResponse); + + mountOptions.data = () => ({ + needToLookupVehicle: true, + bailout: true, + vin: mockValidVin, + }); + + const { container } = render(VinLookupComponent, mountOptions); + const continueButton = container.querySelector(continueButtonQuerySelector); + await user.click(continueButton); + + await flushPromises(); + await waitFor(() => { + expect(mockRouter.navigate).toHaveBeenCalledTimes(1); + expect(mockRouter.navigate).toHaveBeenCalledWith( + navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT, + mockRoute + ); + }); + }); }); }); }); diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 58356d9c..72c16127 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -71,6 +71,7 @@ export default { vin: this.getVinFromStore(), forwardButtonCarStyle:"", vinPopulatedOnPageLoad: this.getVinFromStore()?.length > 0, + bailout: false, }; }, provide() { @@ -147,10 +148,15 @@ export default { // Temp solution to turn on 'disabled' style on the Continue button // because the form itself actually passes its client-side validation. // SSR-189 Scenario #4. - this.$refs.siteFooter.disableForwardButton(); - return; + this.$refs.siteFooter.enableForwardAction(); + this.bailout=true } + if(this.bailout){ + return this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT, + this.$route); + } // Add vin bcs the response from the service doesn't contain vin this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin }); } diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index f57b253b..997886bb 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -141,6 +141,10 @@ const routingTable = function(store) { { scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS, destinationIssPageValue: issPageValues.COVERAGE_STATEMENT + }, + { + scenario: navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT, + destinationIssPageValue: issPageValues.BAILOUT_PAGE } ] }, diff --git a/src/store/index.js b/src/store/index.js index 25463efb..9f7dd2cc 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1223,7 +1223,29 @@ export const useMainStore = defineStore({ this.resetGlassPartsState(); this.resetSupportingItemsState(); this.resetVapsState(); + }, + + resetPageFields() + { + + this.order.policy.policyNumber = null; + this.order.policy.dateOfLoss = null; + this.order.policy.damageCause = null; + this.order.policy.damageCity = null; + this.order.policy.damageState = null; + this.order.customer.phoneNumber = null; + this.order.customer.emailAddress = null; + this.order.customer.firstName = null; + this.order.customer.lastName = null; + this.order.customer.address.city = null; + this.order.customer.address.state = null; + this.order.customer.address.zipCode = null; + this.order.customer.address.streetAddress = null; + this.order.customer.address.streetAddress2 = null; + this.resetVehicleState(); + this.resetDamageState(); } + }, persist: true }); diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue index cbc1120c..7427730f 100644 --- a/src/ux-components/checkbox/checkbox.vue +++ b/src/ux-components/checkbox/checkbox.vue @@ -8,9 +8,12 @@ :name="checkboxName" :id="buttonID" :tabindex="tabIndex" - :aria-required="isRequired" /> + :aria-required="isRequired" + @change="handleCheckChange" + :ref="checkboxName" + /> @@ -28,6 +31,11 @@ export default { isRequired: Boolean, hasError: Boolean, }, + methods: { + handleCheckChange() { + this.$emit("update:modelValue", this.$refs[this.checkboxName].checked); + }, + }, };