diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index 831317e8..fa6f17c3 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -385,17 +385,10 @@ export default { {}, { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } ); - } else if (useMainStore().issConfig.enableTPAFlow) { - this.$router.navigate( - navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED, - this.$route, - {}, - { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } - ); } else { - this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.TPANotEnabled()); + this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.RequestCallback()); this.$router.navigate( - navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED, + navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP, this.$route, {}, { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue index 871f8ba7..0f834cbc 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue +++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue @@ -117,7 +117,7 @@ export default { span { &.small { - font-size: 0.75rem; + font-size: $font-size-xsm; color: $gray-550; } } diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js index 87630d13..6d671280 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.spec.js @@ -1,13 +1,14 @@ import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; - +import widgetFields from '@/constants/cms-widget-fields.js'; import paymentMethodQuestion from '@/layouts/payment-method/payment-method-question/payment-method-question.vue'; +import baseMixin from '@/mixins/base-mixin'; let cmsContent; const mockCmsContent = { - QuestionText: 'Choose a payment option', - Answers: [ + [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose a payment option', + [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: [ { Name: 'NameA', Text: 'TextA', @@ -39,6 +40,7 @@ function setupMocks(customMountOptions) { const mockMixin = { methods: { + ...baseMixin.methods, getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent[cmsFieldName]) } }; diff --git a/src/layouts/payment-method/payment-method-question/payment-method-question.vue b/src/layouts/payment-method/payment-method-question/payment-method-question.vue index f793e3ea..d8376879 100644 --- a/src/layouts/payment-method/payment-method-question/payment-method-question.vue +++ b/src/layouts/payment-method/payment-method-question/payment-method-question.vue @@ -49,7 +49,7 @@ export default { return this.getCmsContent(this.cmsWidgetName, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT); }, paymentMethodAnswerData() { - const cmsData = this.getAnswersNullSafe(this.cmsWidgetName); + const cmsData = this.getInputQuestionWidgetAnswersNullSafe(this.cmsWidgetName); return cmsData.map((answer) => ({ buttonLabel: answer.Text, @@ -59,17 +59,6 @@ export default { buttonImage: answer.AnswerImageUrl })); } - }, - methods: { - getAnswersNullSafe(widgetName) { - const rawData = this.getCmsContent(widgetName, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS); - - if (!rawData) { - return []; - } - - return rawData; - } } }; diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index 57e425f3..10ebc609 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -53,14 +53,10 @@ import { useMainStore } from '@/store'; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import paymentMethods from '@/constants/payment-method-constants'; import globalRules from '@/constants/global-rules'; -import { Form, defineRule } from 'vee-validate'; +import { Form } from 'vee-validate'; -import { required } from '@/helpers/validation-rules'; -import errorMessages from '@/constants/error-messages'; import { AppointmentTypeStrings } from '@/constants/schedule-constants'; -defineRule(globalRules.OPTION_REQUIRED, required(errorMessages.OPTION_REQUIRED)); - export default { name: 'payment-method', components: { @@ -210,9 +206,6 @@ export default { this.$refs.siteFooter.updateButtonText(newValue); }, async forwardButtonAction() { - // Multiple paths based on payment - console.log('forward button hit...'); - await useMainStore().savePaymentMethodChoice(this.paymentMethod); } } diff --git a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js index 5e369a72..1d5ec7b7 100644 --- a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js +++ b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js @@ -7,6 +7,7 @@ import { useMainStore } from '@/store'; import { shallowMount } from '@vue/test-utils'; import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { getDamageDisplayContent } from '@/helpers/damage-review-content-generator.js'; +import baseMixin from '@/mixins/base-mixin'; jest.mock('@/helpers/damage-review-content-generator.js', () => ({ getDamageDisplayContent: jest.fn(), @@ -16,6 +17,7 @@ jest.mock('@/helpers/damage-review-content-generator.js', () => ({ let cmsContent; const mockMixin = { methods: { + ...baseMixin.methods, getCmsContent: jest.fn((widgetName, cmsFieldName) => cmsContent?.[widgetName]?.[cmsFieldName] ?? '') } }; diff --git a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue index ac93b4bf..532035b5 100644 --- a/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue +++ b/src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue @@ -33,20 +33,14 @@ export default { }, driverSideDamageAnswers() { const answerContent = getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers); - return this.getAnswersNullSafe(answerContent?.SubWidgetName); + return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName); }, passengerSideDamageAnswers() { const answerContent = getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers); - return this.getAnswersNullSafe(answerContent?.SubWidgetName); + return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName); }, locationAnswers() { - return this.getAnswersNullSafe(this.damageLocationsWidgetName); - } - }, - methods: { - getAnswersNullSafe(widgetName) { - const rawAnswers = this.getCmsContent(widgetName, 'Answers'); - return rawAnswers || []; + return this.getInputQuestionWidgetAnswersNullSafe(this.damageLocationsWidgetName); } } }; diff --git a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue index db4e13cb..b66f4c8a 100644 --- a/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue +++ b/src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue @@ -38,6 +38,8 @@ inputId="phoneNumber" :cmsWidgetName="widget.phoneNumberQuestion" isRequired + mask="###-###-####" + disableAutoFill :validationRules="rules.phoneNumber" /> diff --git a/src/layouts/tpa-submit/tpa-submit.spec.js b/src/layouts/tpa-submit/tpa-submit.spec.js index 53ad8b54..aaadc048 100644 --- a/src/layouts/tpa-submit/tpa-submit.spec.js +++ b/src/layouts/tpa-submit/tpa-submit.spec.js @@ -11,6 +11,7 @@ import settleAllPromises from '@/helpers/layout-helper.js'; import widgetFields from '@/constants/cms-widget-fields.js'; import { toTitleCase, formatAddress, toDisplayPhoneNumber } from '@/helpers/text-helper.js'; import { getDamageDisplayContent } from '@/helpers/damage-review-content-generator.js'; +import baseMixin from '@/mixins/base-mixin'; // Mock fetchCmsContentForPage jest.mock('@/helpers/cms-content-helper', () => ({ @@ -35,6 +36,12 @@ jest.mock('@/helpers/damage-review-content-generator.js', () => ({ // Mock our module for promises. jest.mock('@/helpers/layout-helper.js', () => jest.fn()); +const mockMixin = { + methods: { + ...baseMixin.methods + } +}; + function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) { const mountOptions = getMountOptions({ router: { @@ -52,6 +59,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu mountOptions.global.plugins = [testingPinia]; mountOptions.data = () => (initialData); + mountOptions.mixins = [mockMixin]; const apiResponses = { cmsContent: {} }; @@ -775,14 +783,14 @@ describe('tpa-submit', () => { [[], []], [undefined, []], [null, []] - ])('getAnswersNullSafe', (rawAnswers, expected) => { + ])('getInputQuestionWidgetAnswersNullSafe', (rawAnswers, expected) => { // Arrange const widgetName = 'WidgetName'; const { wrapper } = getMountedComponent(); wrapper.vm.getCmsContent = jest.fn().mockImplementationOnce(() => rawAnswers); // Act - const result = wrapper.vm.getAnswersNullSafe(widgetName); + const result = wrapper.vm.getInputQuestionWidgetAnswersNullSafe(widgetName); // Assert expect(result).toEqual(expected); diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue index 2d061854..590a4645 100644 --- a/src/layouts/tpa-submit/tpa-submit.vue +++ b/src/layouts/tpa-submit/tpa-submit.vue @@ -208,15 +208,15 @@ export default { return [line]; }, locationAnswers() { - return this.getAnswersNullSafe(this.widget.damageLocations); + return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations); }, driverSideDamageAnswers() { const answerContent = getLocationAnswer(damageLocationsSelected.DRIVER, this.locationAnswers); - return this.getAnswersNullSafe(answerContent?.SubWidgetName); + return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName); }, passengerSideDamageAnswers() { const answerContent = getLocationAnswer(damageLocationsSelected.PASSENGER, this.locationAnswers); - return this.getAnswersNullSafe(answerContent?.SubWidgetName); + return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName); }, getDamageLines() { const { glassToReplace, isRepair } = useMainStore().order.damage; @@ -285,10 +285,6 @@ export default { return null; } }, - getAnswersNullSafe(widgetName) { - const rawAnswers = this.getCmsContent(widgetName, 'Answers'); - return rawAnswers || []; - }, openContactDetailsModal() { this.$refs.contactDetailsDrawer.openModal(); } diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index 49e1e936..957cc6a1 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -5,6 +5,7 @@ import vehicleCategories from '@/constants/vehicle-categories.js'; import queryStrings from '@/constants/query-strings'; import dynamicStrings from '@/constants/dynamic-strings'; import routerParams from '@/router/router-constants/router-params'; +import widgetFields from '@/constants/cms-widget-fields.js'; export default { data() { @@ -19,6 +20,10 @@ export default { getCmsContent(widgetName, fieldName) { return this.$root.cmsContentByWidget?.[widgetName]?.[fieldName] ? this.$root.cmsContentByWidget[widgetName][fieldName] : ''; }, + getInputQuestionWidgetAnswersNullSafe(widgetName) { + const rawAnswers = this.getCmsContent(widgetName, widgetFields.INPUT_QUESTION_WIDGET.ANSWERS); + return rawAnswers || []; + }, getFooterInfoBoxHeight() { const footerInfoBox = document.querySelector('.footer#infoBox'); return footerInfoBox ? footerInfoBox.offsetHeight : 0; diff --git a/src/mixins/base-mixin.spec.js b/src/mixins/base-mixin.spec.js index 30f2ff0c..53f7f880 100644 --- a/src/mixins/base-mixin.spec.js +++ b/src/mixins/base-mixin.spec.js @@ -1,5 +1,6 @@ import baseMixin from '@/mixins/base-mixin'; import { shallowMount } from '@vue/test-utils'; +import widgetFields from '@/constants/cms-widget-fields.js'; describe('base-mixin', () => { it('should set and get cms content', () => { @@ -20,4 +21,63 @@ describe('base-mixin', () => { const localThis = { cmsWidgetName: 'testWidget' }; expect(baseMixin.computed.cssClassNameForCmsWidget.call(localThis)).toBe('widget-name-testWidget'); }); + + it('getInputQuestionWidgetAnswersNullSafe returns an empty array when the input question widget has no answers', () => { + // Arrange + const widgetName = 'inputQuestionWidget'; + const wrapper = shallowMount(baseMixin, { + propsData: { + cmsContentByWidget: {} + } + }); + const cmsContent = { + [widgetName]: { + [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose an option', + [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: [] + } + }; + wrapper.componentVM.setCmsContent(cmsContent); + + // Act + const answers = wrapper.componentVM.getInputQuestionWidgetAnswersNullSafe(widgetName); + + // Assert + expect(answers).not.toBeNull(); // Check that answers is not null + expect(Array.isArray(answers)).toBeTruthy(); // Check that answers is an array + expect(answers).toHaveLength(0); // Check that answers is empty + }); + + it('getInputQuestionWidgetAnswersNullSafe returns a non-empty array when the input question widget has answers', () => { + // Arrange + const widgetName = 'inputQuestionWidget'; + const wrapper = shallowMount(baseMixin, { + propsData: { + cmsContentByWidget: {} + } + }); + const cmsContent = { + [widgetName]: { + [widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT]: 'Choose an option', + [widgetFields.INPUT_QUESTION_WIDGET.ANSWERS]: [ + { + Name: 'NameA', + Text: 'TextA' + }, + { + Name: 'NameB', + Text: 'TextB' + } + ] + } + }; + wrapper.componentVM.setCmsContent(cmsContent); + + // Act + const answers = wrapper.componentVM.getInputQuestionWidgetAnswersNullSafe(widgetName); + + // Assert + expect(answers).not.toBeNull(); // Check that answers is not null + expect(Array.isArray(answers)).toBeTruthy(); // Check that answers is an array + expect(answers).not.toHaveLength(0); // Check that answers is not empty + }); }); diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 03860dee..0badb2e7 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -509,11 +509,7 @@ const routingTable = () => [ destinationIssPageValue: issPageValues.SERVICE_LOCATION }, { - scenario: navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED, - destinationIssPageValue: issPageValues.TPA_SEARCH - }, - { - scenario: navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED, + scenario: navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP, destinationIssPageValue: issPageValues.BAILOUT_PAGE }, {