diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 4dabb09a..7ab57e82 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -127,6 +127,7 @@ export default { isOverflowScrollable: Boolean, isWide: Boolean, isCashOrInsurance: Boolean, + isHorizontalLayout: Boolean, modelValue: [Array, Number, String], value: [Number, String], validationRules: String, @@ -211,7 +212,10 @@ export default { classes = 'ui-radio d-flex'; break; case 'servicePackageRadio': - classes = 'package-main'; + classes = 'package-main d-flex flex-column'; + if (this.isHorizontalLayout) { + classes += ' flex-md-row gap-3'; + } break; case 'providerPrefRadio': classes = 'option-main'; @@ -231,6 +235,9 @@ export default { break; case 'servicePackageRadio': classes = 'package-wrapper'; + if (this.isHorizontalLayout) { + classes += ' flex-grow-0 flex-shrink-0'; + } break; case 'providerPrefRadio': classes = 'option-wrapper'; @@ -325,6 +332,12 @@ export default { diff --git a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue index 3a035bf4..5951d611 100644 --- a/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue +++ b/src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue @@ -7,18 +7,24 @@ :class="[buttonLabelSubCopy ? 'has-subheader' : '']" for="testradio">
-
-

- +

+
+

+ +

+

+

+
+
-

-

-

+
    @@ -53,10 +59,16 @@
    + class="package-footer fw-bold caption mt-4 mr-3" + v-html="buttonFooterCopy"> +
+
+ +
@@ -111,6 +123,7 @@ export default { diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 42c4ed6b..db8ae50d 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -5,6 +5,7 @@ import routerParams from '@/router/router-constants/router-params'; import { useMainStore } from '@/store'; import vehicleCategories from '@/constants/vehicle-categories'; import VehicleDamageComponent from '@/layouts/vehicle-damage/vehicle-damage.vue'; +import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin'; const mockRoute = { params: {} @@ -12,6 +13,16 @@ const mockRoute = { const mockRouter = { navigate: jest.fn() }; +jest.mock('@/mixins/vehicle-questions-mixin', () => ({ + methods: { + navigateForward: jest.fn(), + getPartsOrQuestions: jest.fn(() => Promise.resolve({ + data: { + partsOrQuestions: [] + } + })) + } +})); const mountOptions = { global: { mixins: [ @@ -91,6 +102,43 @@ describe('vehicle-damage.vue', () => { expect(mockRouter.navigate) .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_REPAIR, mockRoute); }); + test('When damage selected is a replace but not windshield, navigate forward from vehicle-questions-mixin', async () => { + mountOptions.global.plugins = [createTestingPinia({ + initialState: { + main: { + order: { + damage: { + isRepair: false, + glassToReplace: [{ glassLocation: 'Rear', glassName: 'Stationary' }] + } + } + } + } + })]; + const wrapper = mount(VehicleDamageComponent, mountOptions); + const siteFooterWrapper = wrapper.getComponent({ ref: 'siteFooter' }); + + useMainStore().getSupportingItems = jest.fn().mockImplementation(() => Promise.resolve({ + data: { data: [ + { + description: null, + partNumber: 'SUPPLIES-REPAIR', + partType: 'REPAIR FEE' + }, + { + description: null, + partNumber: 'WSREPAIR', + partType: 'REPAIR FEE' + } + ] } + })); + + siteFooterWrapper.vm.$emit('forwardClicked'); + + await flushPromises(); + expect(vehicleQuestionsMixin.methods.getPartsOrQuestions).toHaveBeenCalledTimes(1); + expect(vehicleQuestionsMixin.methods.navigateForward).toHaveBeenCalledTimes(1); + }); test('Error in getPartsOrQuestions call => bailout true and navigate forward with CLICKED_FORWARD_WITH_BAILOUT scenario', async () => { mountOptions.global.plugins = [createTestingPinia({ initialState: { @@ -115,7 +163,7 @@ describe('vehicle-damage.vue', () => { const partsQuestionsErrorResponse = { error: 'Error getting parts' }; - useMainStore().getPartsOrQuestions = jest.fn().mockImplementation(() => ( + vehicleQuestionsMixin.methods.getPartsOrQuestions.mockImplementation(() => ( partsQuestionsErrorResponse )); siteFooterWrapper.vm.$emit('forwardClicked'); diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 265ad56a..b486f90e 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -216,6 +216,13 @@ export default { === damageLocationsSelected.REPAIR ); }, + isWindshieldReplace() { + return ( + this.isWindshieldDamageLocation + && this.selectedWindshieldOptions.selectedWindshieldDamageType + === damageLocationsSelected.REPLACE + ); + }, isDriverSideReplace() { if (!this.isSideDoorDamageLocation) return false; @@ -418,8 +425,8 @@ export default { this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR, this.$route ); - } else if (this.mainStore.order.vehicle.vin) { - // If vin already exists, navigate directly to vin-lookup + } else if (this.mainStore.order.vehicle.vin || !this.isWindshieldReplace) { + // If vin already exists or not replacing windshield, get parts/questions and navigate forward const partsOrQuestionsResponse = await this.getPartsOrQuestions(); if (partsOrQuestionsResponse.error) { diff --git a/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue b/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue index 633dc865..fa5868aa 100644 --- a/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue +++ b/src/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue @@ -62,7 +62,8 @@ export default { const answers = this.getCmsContent(this.cmsWidgetName, 'Answers'); if (Array.isArray(answers)) { if (!isVinbyAddressPermissible) { - answers.splice(answers.indexOf(vinLookupMethodSelections.HOMEADDRESS), 1); + const homeAddressIndex = answers.findIndex(answer => answer.Name === vinLookupMethodSelections.HOMEADDRESS); + answers.splice(homeAddressIndex, 1); } this.answersFromCms = answers; } diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js index e05f2298..909bf57c 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.spec.js +++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js @@ -212,6 +212,7 @@ describe('vehicle-parts.vue', () => { test('User had part questions > navigateBack triggers a router.navigateWithoutSaving change with correct scenario', async () => { // Arrange + useMainStore().damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }]; const { wrapper } = setupMocks({ mountOptionsMockData: { router: { @@ -244,6 +245,7 @@ describe('vehicle-parts.vue', () => { test('User did not have part questions > navigateBack triggers a router.navigate change with correct scenario', async () => { // Arrange + useMainStore().damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }]; const { wrapper } = setupMocks({ mountOptionsMockData: { router: { diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index 66bc41a9..3bb0d637 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -14,8 +14,6 @@ - + { afterEach(() => { jest.clearAllMocks(); + useMainStore().order = getDefaultState().order; }); describe('hasPartQuestions', () => { @@ -2181,19 +2182,83 @@ describe('vehicle-questions-mixin', () => { }); describe('navigateBackByVehicleQuestions', () => { - test('current page is coverage-statement and damage is repair => go to vehicle-damage', () => { - // Arrange - const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT }); - useMainStore().order.damage.isRepair = true; + describe('current page is coverage-statement', () => { + test('damage is repair => go to vehicle-damage', () => { + // Arrange + const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT }); + useMainStore().order.damage.isRepair = true; - // Act - wrapper.vm.navigateBackByVehicleQuestions(); + // Act + wrapper.vm.navigateBackByVehicleQuestions(); - // Assert - expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith( - navigationScenarios.CLICKED_BACK_WITH_REPAIR, - { query: { issPage: issPageValues.COVERAGE_STATEMENT } } - ); + // Assert + expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith( + navigationScenarios.CLICKED_BACK_WITH_REPAIR, + { query: { issPage: issPageValues.COVERAGE_STATEMENT } } + ); + }); + test('damage is replace but not windshield => go to vehicle-damage', () => { + // Arrange + const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT }); + useMainStore().order.damage.isRepair = false; + useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }]; + + // Act + wrapper.vm.navigateBackByVehicleQuestions(); + + // Assert + expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith( + navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS, + { query: { issPage: issPageValues.COVERAGE_STATEMENT } } + ); + }); + test('damage is replace and includes windshield, we have vin => go to vehicle-damage', () => { + // Arrange + const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT }); + useMainStore().order.damage.isRepair = false; + useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }]; + useMainStore().order.vehicle.vin = '5NMS3CADXLH233004'; + + // Act + wrapper.vm.navigateBackByVehicleQuestions(); + + // Assert + expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith( + navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS, + { query: { issPage: issPageValues.COVERAGE_STATEMENT } } + ); + }); + test('damage is replace and includes windshield => go to vehicle-lookup', () => { + // Arrange + const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT }); + useMainStore().order.damage.isRepair = false; + useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }]; + + // Act + wrapper.vm.navigateBackByVehicleQuestions(); + + // Assert + expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith( + navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS, + { query: { issPage: issPageValues.COVERAGE_STATEMENT } } + ); + }); + test('damage is replace and includes windshield but there are parts to choose => go to vehicle-parts', () => { + // Arrange + const { wrapper } = setupMocks({ issPage: issPageValues.COVERAGE_STATEMENT }); + useMainStore().order.damage.isRepair = false; + useMainStore().order.damage.glassToReplace = [{ glassLocation: 'Rear', glassName: 'Stationary' }, { glassLocation: 'Windshield', glassName: 'Single' }]; + wrapper.vm.hasGlassLocationWithMultipleParts = jest.fn().mockReturnValue(true); + + // Act + wrapper.vm.navigateBackByVehicleQuestions(); + + // Assert + expect(wrapper.vm.$router.navigateWithSpinner).toHaveBeenCalledWith( + navigationScenarios.CLICKED_BACK_WITH_MULTIPLE_PARTS_TO_CHOOSE, + { query: { issPage: issPageValues.COVERAGE_STATEMENT } } + ); + }); }); test( diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index 6f17494d..d6fba845 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -61,6 +61,7 @@ const navigationScenarios = Object.freeze({ CLICKED_BACK_WITH_MOLDING_QUESTIONS: 'CLICKED_BACK_WITH_MOLDING_QUESTIONS', CLICKED_BACK_WITH_CAPABILITY_QUESTIONS: 'CLICKED_BACK_WITH_CAPABILITY_QUESTIONS', CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: 'CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS', + CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS: 'CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS', CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: 'CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS', // Schedule diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index c3075d3f..eec16cf3 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -536,6 +536,10 @@ const routingTable = () => [ scenario: navigationScenarios.CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS, destinationIssPageValue: issPageValues.VEHICLE_DAMAGE }, + { + scenario: navigationScenarios.CLICKED_BACK_WITH_SKIP_VIN_AND_NO_MORE_QUESTIONS, + destinationIssPageValue: issPageValues.VEHICLE_DAMAGE + }, { scenario: navigationScenarios.CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS, destinationIssPageValue: issPageValues.VEHICLE_LOOKUP diff --git a/src/store/index.js b/src/store/index.js index 676fadb7..34d77533 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -2457,7 +2457,7 @@ export const useMainStore = defineStore({ // populate initial state populateInitialState(forceReset) { if (!sessionStorage.getItem(storeId) || forceReset) { - this.$state = state; + this.$state = getDefaultState(); } }, diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index a6323194..0e0ea2be 100644 --- a/src/ux-components/alert/alert.vue +++ b/src/ux-components/alert/alert.vue @@ -355,7 +355,7 @@ export default { border-top-color: $alert-red-color; } svg { - fill: $red-600; + fill: $alert-red-color; width: 1rem; height: 1rem; }