diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js index e1d23731..4707fff7 100644 --- a/src/constants/error-messages.js +++ b/src/constants/error-messages.js @@ -52,6 +52,7 @@ const errorMessages = Object.freeze({ POLICYHOLDER_FIRST_NAME_REQUIRED: 'First name is required.', POLICYHOLDER_LAST_NAME_REQUIRED: 'Last name is required.', ACKNOWLEDGEMENT_REQUIRED: 'You must agree to the terms to continue', + NO_SELECTION_REQUIRED: 'Please make a selection to continue', YEAR_REQUIRED: 'Vehicle year is required.', MAKE_REQUIRED: 'Vehicle make is required.', diff --git a/src/constants/provider-preference.js b/src/constants/provider-preference.js new file mode 100644 index 00000000..291aaf97 --- /dev/null +++ b/src/constants/provider-preference.js @@ -0,0 +1,6 @@ +const PROVIDER_PREFERENCE_OPTIONS = Object.freeze({ + SAFELITE: 'SafeliteOption', + TPA: 'TPAOption' +}); + +export default PROVIDER_PREFERENCE_OPTIONS; \ No newline at end of file diff --git a/src/layouts/provider-preference/provider-preference.spec.js b/src/layouts/provider-preference/provider-preference.spec.js index dbbaa178..3fdcb495 100644 --- a/src/layouts/provider-preference/provider-preference.spec.js +++ b/src/layouts/provider-preference/provider-preference.spec.js @@ -43,41 +43,37 @@ function setupMocks(mockApiResponses) { } describe('provider-preference.vue', () => { - test('Should navigate to safelite flow when safelite selected', () => { - // Arrange - const { wrapper } = setupMocks(); - - // Act - wrapper.vm.selectedProvider = 'SafeliteOption'; - wrapper.vm.forwardButtonAction(); - - // Test - expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, 'provider-preference'); - }); - - test('Should navigate to tpa flow when TPAOption selected and TPA Flow Enabled', () => { - // Arrange - const { wrapper } = setupMocks(); - - // Act - wrapper.vm.selectedProvider = 'TPAOption'; - useMainStore().issConfig.enableTPAFlow = true; - wrapper.vm.forwardButtonAction(); - - // Test - expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED, 'provider-preference'); - }); - test('Should navigate to tpa disabled route page when TPAOption selected and TPA Flow disabled', () => { // Arrange const { wrapper } = setupMocks(); // Act - wrapper.vm.selectedProvider = 'TPAOption'; useMainStore().issConfig.enableTPAFlow = false; - wrapper.vm.forwardButtonAction(); + wrapper.vm.findAnotherShopClicked(); // Test expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED, 'provider-preference'); }); + + test('Should navigate to safelite flow when navigateWithTPARecalAnswer is called with SafeliteOption', () => { + // Arrange + const { wrapper } = setupMocks(); + + // Act + wrapper.vm.navigateWithTPARecalAnswer('SafeliteOption'); + + // Test + expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, 'provider-preference'); + }); + + test('Should navigate to TPA flow when navigateWithTPARecalAnswer is called with TPAOption', () => { + // Arrange + const { wrapper } = setupMocks(); + + // Act + wrapper.vm.navigateWithTPARecalAnswer('TPAOption'); + + // Test + expect(wrapper.vm.$router.navigate).toBeCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED, 'provider-preference'); + }); }); diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue index eac2c575..95a66d96 100644 --- a/src/layouts/provider-preference/provider-preference.vue +++ b/src/layouts/provider-preference/provider-preference.vue @@ -15,76 +15,70 @@ id="sub-header" cmsWidgetName="SiteSubHeader" class="mb-0 mt-4 text-center" /> - +
+ +
+ + :isForwardButtonHidden="true" + @backClicked="navigateBack" /> - - + :noSelectionError="noSelectionError" + @buttonClick="navigateWithTPARecalAnswer"/> - - diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js index 5ddc7c30..31450a5b 100644 --- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js +++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.spec.js @@ -38,16 +38,26 @@ describe('tpa-Recal-Modal.vue', () => { test('should show error if not acknowledged', () => { const { wrapper } = setupMocks(); wrapper.vm.acknowledged = false; + wrapper.vm.tpaRecalAnswer = 'TPAOption'; wrapper.vm.footerButtonClick(); - expect(wrapper.vm.showError).toBeTruthy(); + expect(wrapper.vm.showAcknowledgementError).toBeTruthy(); }); test('should not show error if acknowledged', () => { const { wrapper } = setupMocks(); wrapper.vm.acknowledged = true; + wrapper.vm.tpaRecalAnswer = 'TPAOption'; wrapper.vm.footerButtonClick(); - expect(wrapper.vm.showError).toBeFalsy(); + expect(wrapper.vm.showAcknowledgementError).toBeFalsy(); + }); + test('should show error if no answer selected', () => { + const { wrapper } = setupMocks(); + wrapper.vm.tpaRecalAnswer = ''; + wrapper.vm.tpaRecalAnswer = undefined; + wrapper.vm.footerButtonClick(); + + expect(wrapper.vm.showNoSelectionError).toBeTruthy(); }); }); diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue index 9141b32e..2b182c9f 100644 --- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue +++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue @@ -16,11 +16,23 @@ +
-

{{ ackError }}

+

{{ errorMessage }}

@@ -42,24 +54,31 @@ import modal from '@/digital-components/modal/modal.vue'; import tpaRecalToggle from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue'; import checkBox from '@/ux-components/checkbox/checkbox.vue'; +import buttonQuestion from '@/digital-components/button-question/button-question.vue'; import globalRules from '@/constants/global-rules'; +import PROVIDER_PREFERENCE_OPTIONS from '@/constants/provider-preference'; export default { name: 'content-group-modal', components: { modal, tpaRecalToggle, - checkBox + checkBox, + buttonQuestion }, props: { cmsWidgetName: String, - ackError: String + buttonCmsWidgetName: String, + ackError: String, + noSelectionError: String }, emits: ['buttonClick'], data() { return { acknowledged: false, - showError: false, + showAcknowledgementError: false, + showNoSelectionError: false, + tpaRecalAnswer: '', rules: { optionRequired: globalRules.OPTION_REQUIRED } @@ -81,13 +100,34 @@ export default { ModalCloseButtonText() { return this.getCmsContent(this.cmsWidgetName, 'FooterText'); }, + tpaRecalQuestionText() { + return this.getCmsContent(this.buttonCmsWidgetName, 'QuestionText'); + }, + tpaRecalAnswersFromCms() { + return this.getCmsContent(this.buttonCmsWidgetName, 'Answers'); + }, + showAcknowledgementCheckbox() { + return this.tpaRecalAnswer === PROVIDER_PREFERENCE_OPTIONS.TPA; + }, isButtonDisabled() { return !this.acknowledged; + }, + errorMessage() { + if (this.showNoSelectionError) { + return this.noSelectionError; + } else if (this.showAcknowledgementError) { + return this.ackError; + } + return ''; } }, watch: { acknowledged() { - this.showError = false; + this.showAcknowledgementError = false; + }, + tpaRecalAnswer() { + this.showNoSelectionError = false; + this.showAcknowledgementError = false; } }, methods: { @@ -96,12 +136,15 @@ export default { }, footerButtonClick() { - // check if acked, if not show error - if (this.acknowledged) { + if (this.tpaRecalAnswer && (!this.showAcknowledgementCheckbox || this.acknowledged )) { this.$refs[this.ModalName]?.closeModal(); - this.$emit('buttonClick'); + this.$emit('buttonClick', this.tpaRecalAnswer); + } else if (!this.tpaRecalAnswer) { + this.showNoSelectionError = true; + this.showAcknowledgementError = false; } else { - this.showError = true; + this.showAcknowledgementError = true; + this.showNoSelectionError = false; } } } @@ -130,29 +173,16 @@ export default { } } } -} - -.form-check { - .form-check-input { - &:checked { - + label { - p { - font-weight: 400 !important; - font-size: 1rem !important; - color: $gray-600 !important; - line-height: 1.5rem; - } + .safelite-or-tpa-question { + :deep(.question-text) { + span { + font-weight: 500; } } } - p { - font-weight: 400 !important; - font-size: 1rem !important; - color: $gray-600 !important; - line-height: 1.5rem; - } } + .form-test-error { p { font-weight: 500; diff --git a/src/store/index.js b/src/store/index.js index 1d6e44b7..3441021d 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -2393,9 +2393,6 @@ export const useMainStore = defineStore({ return retPricedLineItems; }, - saveProviderPreferenceData(data) { - this.updatePageData({ page: issPageValues.PROVIDER_PREFERENCE, data }); - }, addEventToBus(event) { this.applicationUser.eventBus.push(event); },