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 @@
+
@@ -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);
},