Merge branch 'develop' into feature/INSR-8081
This commit is contained in:
Katie Kroell
commit
0a6d4021b2
22 changed files with 1190 additions and 1518 deletions
BIN
src/assets/img/icons/icon-ablue-next.png
Normal file
BIN
src/assets/img/icons/icon-ablue-next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 494 B |
BIN
src/assets/img/icons/icon-ablue-previous.png
Normal file
BIN
src/assets/img/icons/icon-ablue-previous.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 510 B |
|
|
@ -52,13 +52,15 @@ 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.',
|
||||
MODEL_REQUIRED: 'Vehicle model is required.',
|
||||
STYLE_REQUIRED: 'Vehicle style is required.',
|
||||
MOBILE_LOCATION_REQUIRED: 'Please enter your service address',
|
||||
DATE_REQUIRED: 'Please select a date'
|
||||
DATE_REQUIRED: 'Please select a date',
|
||||
TIME_REQUIRED: 'Please select an appointment time.'
|
||||
});
|
||||
|
||||
export default errorMessages;
|
||||
|
|
|
|||
6
src/constants/provider-preference.js
Normal file
6
src/constants/provider-preference.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
const PROVIDER_PREFERENCE_OPTIONS = Object.freeze({
|
||||
SAFELITE: 'SafeliteOption',
|
||||
TPA: 'TPAOption'
|
||||
});
|
||||
|
||||
export default PROVIDER_PREFERENCE_OPTIONS;
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -17,6 +17,21 @@ export function convertDateToDateString(date) {
|
|||
);
|
||||
}
|
||||
|
||||
export function convertDateToTwoDigitDay(date) {
|
||||
if (date instanceof Date !== true) return null;
|
||||
return (`0${date.getDate()}`).slice(-2);
|
||||
}
|
||||
|
||||
export function convertDateToTwoDigitMonth(date) {
|
||||
if (date instanceof Date !== true) return null;
|
||||
return (`0${date.getMonth() + 1}`).slice(-2);
|
||||
}
|
||||
|
||||
export function convertDateToShortMonth(date) {
|
||||
if (date instanceof Date !== true) return null;
|
||||
return date.toLocaleString('en-US', { month: 'short' });
|
||||
}
|
||||
|
||||
export function convertDateStringToDate(dateString) {
|
||||
// dateString must be YYYY-MM-DD format
|
||||
if (typeof dateString !== 'string') return null;
|
||||
|
|
@ -51,6 +66,12 @@ export function getDisplayTextForDurationLength(durationMinimum, durationMaximum
|
|||
return `${durationText} ${unitText}`;
|
||||
}
|
||||
|
||||
export function isAfternoon(timeString) {
|
||||
if (typeof timeString !== 'string') return false;
|
||||
const hours = parseInt(timeString.split(':')[0], 10);
|
||||
return hours >= 12;
|
||||
}
|
||||
|
||||
export function militaryToTwelveHourTime(timeString) {
|
||||
// Expected input: "HH:MM"
|
||||
if (typeof timeString !== 'string') return null;
|
||||
|
|
@ -163,9 +184,11 @@ export function combineDateAndTime(date, time) {
|
|||
// Return the new date object
|
||||
return newDate;
|
||||
}
|
||||
|
||||
export function addMinutes(date, minutes) {
|
||||
return new Date(date.getTime() + minutes * 60000);
|
||||
}
|
||||
|
||||
export function shortTimeString(date) {
|
||||
// Use a ternary operator to check if the input is a valid date object
|
||||
return date instanceof Date
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
<a
|
||||
href=""
|
||||
target="_blank"
|
||||
@click="openCookiePreferences">Cookie Preferences</a>
|
||||
@click="openCookiePreferences">Cookie preferences</a>
|
||||
</div>
|
||||
<div class="footer-menu-item">
|
||||
<textLink
|
||||
|
|
|
|||
|
|
@ -1,10 +1,15 @@
|
|||
// Components
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import entryPage from '@/layouts/entry-page/entry-page.vue';
|
||||
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
// Supporting Files
|
||||
import baseMixin from '@/mixins/base-mixin';
|
||||
import { getMountOptions } from '@/helpers/unit-test-helper.js';
|
||||
import { useMainStore } from '@/store';
|
||||
import settleAllPromises from '@/helpers/layout-helper.js';
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { getMountOptions } from '@/helpers/unit-test-helper.js';
|
||||
import * as clientAuthHelper from '@/helpers/clientauth-helper';
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock('@/helpers/layout-helper.js', () => jest.fn());
|
||||
|
|
@ -15,34 +20,192 @@ jest.mock('@/helpers/cms-content-helper', () => ({
|
|||
setupModalLinks: jest.fn()
|
||||
}));
|
||||
|
||||
/** @ignore */
|
||||
function setupMocks(queryString) {
|
||||
function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) {
|
||||
const mountOptions = getMountOptions({
|
||||
router: {
|
||||
navigate: jest.fn()
|
||||
},
|
||||
route: { queryString }
|
||||
}
|
||||
});
|
||||
|
||||
const wrapper = shallowMount(
|
||||
entryPage,
|
||||
mountOptions
|
||||
);
|
||||
const testingPinia = createTestingPinia({
|
||||
initialState: {
|
||||
main: mainInitialState
|
||||
}
|
||||
});
|
||||
useMainStore(testingPinia);
|
||||
methodToRunAfterInitializingStore();
|
||||
|
||||
const apiResponses = {};
|
||||
mountOptions.global.plugins = [testingPinia];
|
||||
mountOptions.data = () => (initialData);
|
||||
|
||||
const apiResponses = { cmsContent: {} };
|
||||
|
||||
settleAllPromises.mockImplementation(() => apiResponses);
|
||||
fetchCmsContentForPage.mockImplementation(() => { });
|
||||
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
|
||||
|
||||
const wrapper = shallowMount(entryPage, mountOptions);
|
||||
wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
|
||||
wrapper.vm.setCmsContent = jest.fn();
|
||||
wrapper.vm.$router.navigateWithSpinner = jest.fn();
|
||||
wrapper.vm.navigateForward = baseMixin.methods.navigateForward;
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
||||
describe('entry-page.vue', () => {
|
||||
test('should render', () => {
|
||||
const queryString = 'policynumber="123456"';
|
||||
const { wrapper } = setupMocks(queryString);
|
||||
test('shows unauthorized message when not authorized', async () => {
|
||||
const wrapper = shallowMount(entryPage, getMountOptions());
|
||||
wrapper.setData({ unauthorized: true });
|
||||
await wrapper.vm.$nextTick();
|
||||
expect(wrapper.find('#message').isVisible()).toBe(true);
|
||||
expect(wrapper.text()).toContain('Unauthorized Access.');
|
||||
});
|
||||
describe('validateClientTagOnEntry', () => {
|
||||
let wrapper;
|
||||
beforeEach(() => {
|
||||
const mainInitialState = { issConfig: {} };
|
||||
wrapper = getMountedComponent(mainInitialState).wrapper;
|
||||
});
|
||||
|
||||
window.console.log(wrapper.vm.$route.query);
|
||||
expect(wrapper).toBeTruthy();
|
||||
it('returns unauthorized if no clienttag', async () => {
|
||||
const result = await wrapper.vm.validateClientTagOnEntry({});
|
||||
expect(result.isAuthorized).toBe(false);
|
||||
});
|
||||
|
||||
it('returns unauthorized if validateISSClientTag returns falsy', async () => {
|
||||
jest.spyOn(clientAuthHelper, 'validateISSClientTag').mockResolvedValueOnce(null);
|
||||
const result = await wrapper.vm.validateClientTagOnEntry({ clienttag: 'abc' });
|
||||
expect(result.isAuthorized).toBe(false);
|
||||
});
|
||||
|
||||
it('returns authorized and clientData if valid and not RSAToken', async () => {
|
||||
const resp = {
|
||||
active: true,
|
||||
accountName: 'Client',
|
||||
authentication: '',
|
||||
parentAccountNumber: 'P',
|
||||
styleSheet: '',
|
||||
coverageEnabled: true,
|
||||
siteType: ''
|
||||
};
|
||||
jest.spyOn(clientAuthHelper, 'validateISSClientTag').mockResolvedValueOnce(resp);
|
||||
const result = await wrapper.vm.validateClientTagOnEntry({ clienttag: 'abc' });
|
||||
expect(result.isAuthorized).toBe(true);
|
||||
expect(result.clientData).toEqual(resp);
|
||||
});
|
||||
|
||||
it('handles RSAToken with valid signature and EncParams', async () => {
|
||||
const resp = {
|
||||
active: true,
|
||||
accountName: 'Client',
|
||||
authentication: 'RSAToken EncParams',
|
||||
parentAccountNumber: 'P',
|
||||
styleSheet: '',
|
||||
coverageEnabled: true,
|
||||
siteType: ''
|
||||
};
|
||||
const decryptedData = 'foo=bar&from=yesterday';
|
||||
jest.spyOn(clientAuthHelper, 'validateISSClientTag').mockResolvedValueOnce(resp);
|
||||
jest.spyOn(clientAuthHelper, 'validateISSClientSignature').mockResolvedValueOnce({ valid: true, decryptedData });
|
||||
const result = await wrapper.vm.validateClientTagOnEntry({ clienttag: 'abc', token: 'tok', signature: 'sig' });
|
||||
expect(result.isAuthorized).toBe(true);
|
||||
expect(result.clientData).toEqual(resp);
|
||||
expect(result.decryptedParams).toEqual({ foo: 'bar', from: 'yesterday' });
|
||||
});
|
||||
|
||||
it('handles RSAToken with invalid signature', async () => {
|
||||
const resp = {
|
||||
active: true,
|
||||
accountName: 'Client',
|
||||
authentication: 'RSAToken',
|
||||
parentAccountNumber: 'P',
|
||||
styleSheet: '',
|
||||
coverageEnabled: true,
|
||||
siteType: ''
|
||||
};
|
||||
jest.spyOn(clientAuthHelper, 'validateISSClientTag').mockResolvedValueOnce(resp);
|
||||
jest.spyOn(clientAuthHelper, 'validateISSClientSignature').mockResolvedValueOnce({ valid: false });
|
||||
const result = await wrapper.vm.validateClientTagOnEntry({ clienttag: 'abc', token: 'tok', signature: 'sig' });
|
||||
expect(result.isAuthorized).toBe(false);
|
||||
});
|
||||
});
|
||||
test('populateISSConfigValues sets issConfig fields and parses clientFlags', () => {
|
||||
const mainInitialState = {
|
||||
issConfig: {}
|
||||
};
|
||||
const { wrapper } = getMountedComponent(mainInitialState);
|
||||
const data = {
|
||||
accountName: 'TestClient',
|
||||
parentAccountNumber: '12345',
|
||||
styleSheet: 'test-style',
|
||||
coverageEnabled: true,
|
||||
siteType: 'test-site',
|
||||
clientFlags: JSON.stringify({
|
||||
TPAEnabled: true,
|
||||
ClientFullName: 'Full Name',
|
||||
ClientDisplayName: 'Display Name',
|
||||
ClaimRegistrationRequired: true,
|
||||
EnableNoCompQuote: true
|
||||
})
|
||||
};
|
||||
wrapper.vm.populateISSConfigValues(data);
|
||||
const { issConfig } = wrapper.vm.mainStore;
|
||||
expect(issConfig.clientName).toBe('TestClient');
|
||||
expect(issConfig.clientFullName).toBe('Full Name');
|
||||
expect(issConfig.clientDisplayName).toBe('Display Name');
|
||||
expect(issConfig.parentAccountNumber).toBe('12345');
|
||||
expect(issConfig.styleSheet).toBe('test-style');
|
||||
expect(issConfig.isCoverageEnabled).toBe(true);
|
||||
expect(issConfig.siteType).toBe('test-site');
|
||||
expect(issConfig.enableTPAFlow).toBe(true);
|
||||
expect(issConfig.isClaimRegistrationRequired).toBe(true);
|
||||
expect(issConfig.enableNoCompQuote).toBe(true);
|
||||
});
|
||||
describe('combineClientParameters', () => {
|
||||
let wrapper;
|
||||
beforeEach(() => {
|
||||
wrapper = getMountedComponent({ issConfig: {} }).wrapper;
|
||||
});
|
||||
|
||||
it('returns correct params from config and query', () => {
|
||||
const configParams = JSON.stringify(['PolicyNbr', 'DateOfLoss', 'Unused']);
|
||||
const queryStringParams = { policynbr: '123', dateofloss: '2022-01-01', somethingelse: 'no' };
|
||||
const result = wrapper.vm.combineClientParameters(configParams, queryStringParams);
|
||||
expect(result).toEqual({ policynbr: '123', dateofloss: '2022-01-01' });
|
||||
});
|
||||
|
||||
it('returns empty object if configParams is not valid JSON', () => {
|
||||
const configParams = 'notjson';
|
||||
const queryStringParams = { policynbr: '123' };
|
||||
const result = wrapper.vm.combineClientParameters(configParams, queryStringParams);
|
||||
expect(result).toEqual({});
|
||||
});
|
||||
|
||||
it('ignores params not present in query', () => {
|
||||
const configParams = JSON.stringify(['PolicyNbr', 'MissingParam']);
|
||||
const queryStringParams = { policynbr: '123' };
|
||||
const result = wrapper.vm.combineClientParameters(configParams, queryStringParams);
|
||||
expect(result).toEqual({ policynbr: '123' });
|
||||
});
|
||||
});
|
||||
test('populates store items from params', async () => {
|
||||
const mainInitialState = {
|
||||
issConfig: { disabledFields: {} },
|
||||
order: { policy: {} }
|
||||
};
|
||||
const params = {
|
||||
policynumber: 'ABC123',
|
||||
policyzipcode: '90210',
|
||||
dateofloss: '2022-01-01',
|
||||
returnurl: 'http://success',
|
||||
returnurl2: 'http://fail'
|
||||
};
|
||||
const { wrapper } = getMountedComponent(mainInitialState);
|
||||
wrapper.vm.populateStoreItemsFromParams(params);
|
||||
expect(wrapper.vm.mainStore.order.policy.policyNumber).toBe('ABC123');
|
||||
expect(wrapper.vm.mainStore.order.policy.policyZipCode).toBe('90210');
|
||||
expect(wrapper.vm.mainStore.order.policy.dateOfLoss).toBe('2022-01-01');
|
||||
expect(wrapper.vm.mainStore.issConfig.successReturnURL).toBe('http://success');
|
||||
expect(wrapper.vm.mainStore.issConfig.failureReturnURL).toBe('http://fail');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -143,6 +143,7 @@ export default {
|
|||
},
|
||||
populateISSConfigValues(data) {
|
||||
this.mainStore.issConfig.clientName = data.accountName;
|
||||
this.mainStore.issConfig.clientFullName = data.accountName; // Defaults to use the client name.
|
||||
this.mainStore.issConfig.clientDisplayName = data.accountName; // Defaults to use the client name.
|
||||
this.mainStore.issConfig.parentAccountNumber = data.parentAccountNumber;
|
||||
this.mainStore.issConfig.styleSheet = data.styleSheet;
|
||||
|
|
@ -157,6 +158,10 @@ export default {
|
|||
this.mainStore.issConfig.enableTPAFlow = true;
|
||||
}
|
||||
|
||||
if (clientFlags.ClientFullName != null) {
|
||||
this.mainStore.issConfig.clientFullName = clientFlags.ClientFullName;
|
||||
}
|
||||
|
||||
if (clientFlags.ClientDisplayName != null) {
|
||||
this.mainStore.issConfig.clientDisplayName = clientFlags.ClientDisplayName;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,76 +15,70 @@
|
|||
id="sub-header"
|
||||
cmsWidgetName="SiteSubHeader"
|
||||
class="mb-0 mt-4 text-center" />
|
||||
<buttonQuestion
|
||||
ref="buttonQuestion"
|
||||
v-model="selectedProvider"
|
||||
class="provider-preference"
|
||||
questionText="Select an option:"
|
||||
:answers="prefAnswers"
|
||||
groupName="prefQuestions"
|
||||
buttonTypeString="providerPrefRadio"
|
||||
:validationRules="rules.optionRequired"
|
||||
isRequired />
|
||||
<div
|
||||
class="mt-4 mb-5"
|
||||
v-html="scheduleWithSafeliteText"></div>
|
||||
<buttonMain
|
||||
ref="buttonMain"
|
||||
class="full-width-button"
|
||||
variant="navigation"
|
||||
buttonText="Schedule now"
|
||||
@clickEvent="scheduleWithSafelite" />
|
||||
<div
|
||||
class="mt-5 mb-5"
|
||||
v-html="scheduleWithOtherText"></div>
|
||||
<textLink
|
||||
class="underlined-text"
|
||||
linkType="navigation"
|
||||
text="Find another shop"
|
||||
href="#"
|
||||
@clickEvent="findAnotherShopClicked" />
|
||||
<siteFooter
|
||||
:ref="SITE_FOOTER_REF_NAME"
|
||||
class="mt-5"
|
||||
class="mt-6"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="isForwardActionDisabled"
|
||||
:isForwardButtonNavigationDisabled="isForwardNavigationDisabled"
|
||||
@backClicked="navigateBack"
|
||||
@forwardClicked="forwardButtonAction" />
|
||||
:isForwardButtonHidden="true"
|
||||
@backClicked="navigateBack" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<contentGroupModal
|
||||
:ref="RECAL_MODAL_REF_NAME"
|
||||
cssModalHeadlineClass="text-center"
|
||||
cmsWidgetName="RecalModal" />
|
||||
<steeringModal
|
||||
:ref="STEERING_MODAL_REF_NAME"
|
||||
cmsWidgetName="StateSteeringModal" />
|
||||
<shopPreferenceModal
|
||||
:ref="SHOP_PREFERENCE_MODAL_REF_NAME"
|
||||
cmsWidgetName="ShopPreferenceDrawer"
|
||||
:showSteeringLink="showSteeringLink"
|
||||
@openSteering="openStateSteeringModal" />
|
||||
<tpaRecalModal
|
||||
:ref="TPA_RECAL_MODAL_REF_NAME"
|
||||
cmsWidgetName="TPARecalModal"
|
||||
buttonCmsWidgetName="TPARecalQuestion"
|
||||
:ackError="ackError"
|
||||
@buttonClick="navigateWithTPAAck" />
|
||||
:noSelectionError="noSelectionError"
|
||||
@buttonClick="navigateWithTPARecalAnswer"/>
|
||||
</Form>
|
||||
</template>
|
||||
<script>
|
||||
// Import Supporting Files
|
||||
import {
|
||||
fetchCmsContentForPage,
|
||||
setupModalLink,
|
||||
setupModalLinks
|
||||
} from '@/helpers/cms-content-helper';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import errorMessages from '@/constants/error-messages';
|
||||
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
|
||||
import issPageValues from '@/router/router-constants/issPage-values';
|
||||
import showIssLoadingModal from '@/helpers/loading-modal-helper';
|
||||
import bailoutMessage from '@/constants/bailoutMessage';
|
||||
import baseFormMixin from '@/mixins/base-form-mixin';
|
||||
import PROVIDER_PREFERENCE_OPTIONS from '@/constants/provider-preference';
|
||||
|
||||
// Import Component
|
||||
import baseFormMixin from '@/mixins/base-form-mixin';
|
||||
import { Form } from 'vee-validate';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
||||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import steeringModal from '@/layouts/provider-preference/steering-modal/steering-modal.vue';
|
||||
import shopPreferenceModal from '@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue';
|
||||
import tpaRecalModal from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue';
|
||||
import globalRules from '@/constants/global-rules';
|
||||
import bailoutMessage from '@/constants/bailoutMessage';
|
||||
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
|
||||
import showIssLoadingModal from '@/helpers/loading-modal-helper';
|
||||
import textLink from '@/ux-components/text-link/text-link.vue';
|
||||
import buttonMain from '@/ux-components/button-main/button-main.vue';
|
||||
|
||||
const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
|
||||
const RECAL_MODAL_REF_NAME = 'RecalModal';
|
||||
const STEERING_MODAL_REF_NAME = 'StateSteeringModal';
|
||||
const SHOP_PREFERENCE_MODAL_REF_NAME = 'ShopPreferenceDrawer';
|
||||
const TPA_RECAL_MODAL_REF_NAME = 'TPARecalModal';
|
||||
const SITE_FOOTER_REF_NAME = 'siteFooter';
|
||||
|
||||
|
|
@ -97,10 +91,10 @@ export default {
|
|||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form,
|
||||
buttonQuestion,
|
||||
buttonMain,
|
||||
steeringModal,
|
||||
shopPreferenceModal,
|
||||
tpaRecalModal,
|
||||
contentGroupModal
|
||||
textLink
|
||||
},
|
||||
mixins: [baseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
|
|
@ -115,85 +109,37 @@ export default {
|
|||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
|
||||
vm.showSteeringLink = !!vm.$refs[STEERING_MODAL_REF_NAME].ModalBodyText;
|
||||
if (vm.showSteeringLink) {
|
||||
// open steering modal if it has body text, the state is defined in the CMS content and doesn't
|
||||
// populate if the state is not listed in the CMS content
|
||||
if (!!vm.$refs[STEERING_MODAL_REF_NAME].ModalBodyText) {
|
||||
vm.openStateSteeringModal();
|
||||
}
|
||||
});
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedProvider: null,
|
||||
showSteeringLink: false,
|
||||
tpaAcknowledgement: false,
|
||||
rules: {
|
||||
optionRequired: globalRules.OPTION_REQUIRED
|
||||
},
|
||||
RECAL_MODAL_REF_NAME,
|
||||
providerPreferenceOptions: PROVIDER_PREFERENCE_OPTIONS,
|
||||
STEERING_MODAL_REF_NAME,
|
||||
SHOP_PREFERENCE_MODAL_REF_NAME,
|
||||
TPA_RECAL_MODAL_REF_NAME,
|
||||
SITE_FOOTER_REF_NAME
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isForwardActionDisabled() {
|
||||
return this.selectedProvider === null;
|
||||
},
|
||||
isForwardNavigationDisabled() {
|
||||
return this.selectedProvider === options.TPA && !this.tpaAcknowledgement;
|
||||
},
|
||||
prefAnswers() {
|
||||
const cmsAnswersContent = [
|
||||
{
|
||||
cmsWidgetName: options.SAFELITE
|
||||
},
|
||||
{
|
||||
cmsWidgetName: options.TPA
|
||||
}
|
||||
];
|
||||
// if cms content has not yet loaded, skip
|
||||
if (
|
||||
!this.getCmsContent(
|
||||
cmsAnswersContent[0].cmsWidgetName,
|
||||
'HeaderText'
|
||||
)
|
||||
|| this.getCmsContent(
|
||||
cmsAnswersContent[0].cmsWidgetName,
|
||||
'HeaderText'
|
||||
) === ''
|
||||
) {
|
||||
return {};
|
||||
}
|
||||
const modifiedAnswers = cmsAnswersContent.map((answer) => ({
|
||||
value: answer.cmsWidgetName,
|
||||
buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
|
||||
buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
|
||||
buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName)
|
||||
}));
|
||||
return modifiedAnswers;
|
||||
},
|
||||
ackError() {
|
||||
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
prefAnswers(newValue, oldValue) {
|
||||
if (newValue !== oldValue) {
|
||||
setupModalLink(this, RECAL_MODAL_REF_NAME);
|
||||
}
|
||||
},
|
||||
noSelectionError() {
|
||||
return errorMessages.NO_SELECTION_REQUIRED;
|
||||
},
|
||||
scheduleWithSafeliteText() {
|
||||
return this.getCmsContent('ScheduleWithSafeliteText', 'BodyText');
|
||||
},
|
||||
scheduleWithOtherText() {
|
||||
return this.getCmsContent('ScheduleWithOtherText', 'BodyText');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setupModalLinks(this);
|
||||
const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
|
||||
this.selectedProvider = pageData?.selectedProvider
|
||||
? pageData.selectedProvider
|
||||
: null;
|
||||
this.tpaAcknowledgement = pageData?.tpaAcknowledgement
|
||||
? pageData.tpaAcknowledgement
|
||||
: false;
|
||||
},
|
||||
methods: {
|
||||
getHeaderTextFromCms(cmsWidgetName) {
|
||||
|
|
@ -213,50 +159,38 @@ export default {
|
|||
return true;
|
||||
},
|
||||
navigateForward(scenario) {
|
||||
showIssLoadingModal(true);
|
||||
this.$router.navigate(scenario, this.$route);
|
||||
},
|
||||
navigateWithTPAAck() {
|
||||
this.mainStore.saveProviderPreferenceData({
|
||||
selectedProvider: this.selectedProvider,
|
||||
tpaAcknowledgement: this.tpaAcknowledgement
|
||||
});
|
||||
showIssLoadingModal(true);
|
||||
this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
|
||||
navigateWithTPARecalAnswer(answer) {
|
||||
if (answer === this.providerPreferenceOptions.TPA) {
|
||||
this.scheduleWithTPA();
|
||||
} else {
|
||||
this.scheduleWithSafelite();
|
||||
}
|
||||
},
|
||||
forwardButtonAction() {
|
||||
if (this.selectedProvider) {
|
||||
let scenario = null;
|
||||
switch (this.selectedProvider) {
|
||||
case options.SAFELITE:
|
||||
this.mainStore.updateIsSafeliteProvider(true);
|
||||
scenario =
|
||||
this.navigationScenarios
|
||||
.CLICKED_FORWARD_WITH_SAFELITE;
|
||||
break;
|
||||
case options.TPA:
|
||||
this.mainStore.updateIsSafeliteProvider(false);
|
||||
if (this.mainStore.issConfig.enableTPAFlow) {
|
||||
if (this.mainStore.hasRecalibrationPart) {
|
||||
this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
|
||||
return;
|
||||
}
|
||||
scenario =
|
||||
this.navigationScenarios
|
||||
.CLICKED_FORWARD_WITH_TPA_ENABLED;
|
||||
} else {
|
||||
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
|
||||
scenario =
|
||||
this.navigationScenarios
|
||||
.CLICKED_FORWARD_WITH_TPA_DISABLED;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
scheduleWithSafelite() {
|
||||
this.mainStore.updateIsSafeliteProvider(true);
|
||||
const scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
|
||||
this.navigateForward(scenario);
|
||||
},
|
||||
scheduleWithTPA() {
|
||||
this.mainStore.updateIsSafeliteProvider(false);
|
||||
const scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
|
||||
this.navigateForward(scenario);
|
||||
},
|
||||
findAnotherShopClicked() {
|
||||
if (this.mainStore.issConfig.enableTPAFlow) {
|
||||
if (this.mainStore.hasRecalibrationPart) {
|
||||
this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
|
||||
return;
|
||||
} else {
|
||||
this.scheduleWithTPA();
|
||||
}
|
||||
} else {
|
||||
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
|
||||
const scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
|
||||
this.navigateForward(scenario);
|
||||
this.mainStore.saveProviderPreferenceData({
|
||||
selectedProvider: this.selectedProvider,
|
||||
tpaAcknowledgement: this.tpaAcknowledgement
|
||||
});
|
||||
}
|
||||
},
|
||||
openStateSteeringModal() {
|
||||
|
|
@ -279,12 +213,11 @@ export default {
|
|||
#sub-header span {
|
||||
color: $black;
|
||||
}
|
||||
.question-text {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
& > span {
|
||||
text-align: left;
|
||||
}
|
||||
.full-width-button {
|
||||
width: 100%;
|
||||
}
|
||||
.underlined-text {
|
||||
text-decoration: underline;
|
||||
}
|
||||
:deep(.safeliteLogo) {
|
||||
background-image: url(~@/assets/img/icons/logo.svg);
|
||||
|
|
|
|||
|
|
@ -1,59 +0,0 @@
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import settleAllPromises from '@/helpers/layout-helper.js';
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
import { getMountOptions } from '@/helpers/unit-test-helper.js';
|
||||
import shopPreferenceModal from '@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue';
|
||||
|
||||
// Mock our module for promises.
|
||||
jest.mock('@/helpers/layout-helper.js', () => jest.fn());
|
||||
|
||||
// Mock fetchCmsContentForPage
|
||||
jest.mock('@/helpers/cms-content-helper', () => ({
|
||||
fetchCmsContentForPage: jest.fn(),
|
||||
setupModalLinks: jest.fn()
|
||||
}));
|
||||
|
||||
/** @ignore */
|
||||
function setupMocks(propsData) {
|
||||
const mountOptions = getMountOptions({
|
||||
router: {
|
||||
navigate: jest.fn()
|
||||
}
|
||||
});
|
||||
|
||||
mountOptions.propsData = propsData;
|
||||
|
||||
const wrapper = shallowMount(
|
||||
shopPreferenceModal,
|
||||
mountOptions
|
||||
);
|
||||
|
||||
const apiResponses = {};
|
||||
|
||||
settleAllPromises.mockImplementation(() => apiResponses);
|
||||
fetchCmsContentForPage.mockImplementation(() => { });
|
||||
|
||||
return { wrapper };
|
||||
}
|
||||
|
||||
describe('provider-preference.vue', () => {
|
||||
test('Should display state specific steering modal link when in state with steering language', async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({ showSteeringLink: true });
|
||||
|
||||
// Act
|
||||
|
||||
// Test
|
||||
expect(wrapper.vm.showSteeringLink).toBeTruthy();
|
||||
});
|
||||
|
||||
test('Should not display state specific steering modal link when not in state with steering language', async () => {
|
||||
// Arrange
|
||||
const { wrapper } = setupMocks({ showSteeringLink: false });
|
||||
|
||||
// Act
|
||||
|
||||
// Test
|
||||
expect(wrapper.vm.showSteeringLink).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
<template>
|
||||
<modal
|
||||
:ref="ModalName"
|
||||
:modalId="ModalName"
|
||||
:onModalClosedCallback="onModalClosed"
|
||||
:footerButtonText="ModalCloseButtonText"
|
||||
@footerButtonEvent="footerButtonClick">
|
||||
<h5 class="text-center mb-4">
|
||||
{{ ModalHeadline }}
|
||||
</h5>
|
||||
<div>
|
||||
<div
|
||||
class="mb-4"
|
||||
v-html="ModalBodyText"></div>
|
||||
<a
|
||||
v-if="showSteeringLink"
|
||||
class="modal-text"
|
||||
@click="openSteeringModal"
|
||||
v-html="ModalSubBodyText">
|
||||
</a>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modal from '@/digital-components/modal/modal.vue';
|
||||
import states from '@/constants/states';
|
||||
|
||||
export default {
|
||||
name: 'content-group-modal',
|
||||
components: {
|
||||
modal
|
||||
},
|
||||
props: {
|
||||
cmsWidgetName: String,
|
||||
showSteeringLink: Boolean
|
||||
},
|
||||
emits: ['openSteering'],
|
||||
data() {
|
||||
return {
|
||||
clickedSteeringLink: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ModalName() {
|
||||
return this.cmsWidgetName;
|
||||
},
|
||||
ModalHeadline() {
|
||||
return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
|
||||
},
|
||||
ModalSubheadertext() {
|
||||
return this.getCmsContent(this.cmsWidgetName, 'SubheaderText');
|
||||
},
|
||||
ModalBodyText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, 'BodyText');
|
||||
},
|
||||
ModalSubBodyText() {
|
||||
const header = this.getCmsContent(this.cmsWidgetName, 'BodyText2');
|
||||
return header.replace('{custom:state}', states[this.mainStore.order.customer.address.state]);
|
||||
},
|
||||
ModalImage() {
|
||||
return this.getCmsContent(this.cmsWidgetName, 'Image');
|
||||
},
|
||||
ModalCloseButtonText() {
|
||||
return this.getCmsContent(this.cmsWidgetName, 'FooterText');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openModal() {
|
||||
this.$refs[this.ModalName].openModal();
|
||||
},
|
||||
onModalClosed() {
|
||||
if (this.clickedSteeringLink) {
|
||||
this.$emit('openSteering');
|
||||
this.clickedSteeringLink = false;
|
||||
}
|
||||
},
|
||||
footerButtonClick() {
|
||||
this.$refs[this.ModalName].closeModal();
|
||||
},
|
||||
openSteeringModal() {
|
||||
this.clickedSteeringLink = true;
|
||||
this.$refs[this.ModalName].closeModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.modal {
|
||||
&.modal-component {
|
||||
.modal-dialog {
|
||||
.modal-content {
|
||||
.modal-body {
|
||||
.modal-sub-body {
|
||||
color: $gray-600;
|
||||
}
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,11 +16,23 @@
|
|||
<tpaRecalToggle
|
||||
class="mb-5"
|
||||
cmsWidgetName="TPARecalModalToggle" />
|
||||
<buttonQuestion
|
||||
ref="tpaRecalQuestion"
|
||||
v-model="tpaRecalAnswer"
|
||||
class="radioQuestion safelite-or-tpa-question windshield-chip-count-question mb-4"
|
||||
:cmsWidgetName="buttonCmsWidgetName"
|
||||
:questionText="tpaRecalQuestionText"
|
||||
:answers="tpaRecalAnswersFromCms"
|
||||
groupName="tpaRecalQuestion"
|
||||
buttonID="tpaRecalQuestion"
|
||||
buttonTypeString="listButtonHorizontal"
|
||||
isRequired></buttonQuestion>
|
||||
<checkBox
|
||||
v-if="showAcknowledgementCheckbox"
|
||||
ref="tpaAcknowledgement"
|
||||
v-model="acknowledged"
|
||||
class="mb-2"
|
||||
:class="showError && ' has-error'"
|
||||
:class="showAcknowledgementError && ' has-error'"
|
||||
:validationRules="rules.optionRequired"
|
||||
checkboxName="tpaAcknowledgement"
|
||||
buttonID="tpaAcknowledgement"
|
||||
|
|
@ -29,9 +41,9 @@
|
|||
:screenReaderOnlyText="ModalSubBodyText"
|
||||
isRequired />
|
||||
<div
|
||||
v-if="showError"
|
||||
v-if="showAcknowledgementError || showNoSelectionError"
|
||||
class="row form-test-error mt-1">
|
||||
<p>{{ ackError }}</p>
|
||||
<p>{{ errorMessage }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { createTestingPinia } from '@pinia/testing';
|
|||
import { shallowMount } from '@vue/test-utils';
|
||||
import { getMountOptions } from '@/helpers/unit-test-helper.js';
|
||||
import { useMainStore } from '@/store/index.js';
|
||||
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
|
||||
|
||||
// Mock fetchCmsContentForPage
|
||||
jest.mock('@/helpers/cms-content-helper', () => ({
|
||||
|
|
@ -214,7 +213,7 @@ describe('schedule-page.vue', () => {
|
|||
// Act
|
||||
const newShopTimeSlots = await wrapper.vm.getAvailableDatesMethod(
|
||||
'2023-01-01',
|
||||
'2023-01-31'
|
||||
'2023-01-15'
|
||||
);
|
||||
|
||||
// Assert
|
||||
|
|
@ -236,7 +235,7 @@ describe('schedule-page.vue', () => {
|
|||
estimatedServiceMinutesMaximum: 120
|
||||
});
|
||||
});
|
||||
test('Should call API service in days of 34 or less when getAvailableDatesMethod is called with large date ranges', async () => {
|
||||
test('Should call API service in days of 15 or less when getAvailableDatesMethod is called with large date ranges', async () => {
|
||||
// Arrange
|
||||
const { wrapper } = getShallowMountedComponent();
|
||||
wrapper.vm.selectableDatesData = {
|
||||
|
|
@ -264,7 +263,7 @@ describe('schedule-page.vue', () => {
|
|||
// 2023-01-01 --> 2023-02-05
|
||||
// 2023-02-06 --> 2023-03-12
|
||||
// 2023-03-13 --> 2023-03-31
|
||||
expect(store.getShopTimeSlots).toHaveBeenCalledTimes(3);
|
||||
expect(store.getShopTimeSlots).toHaveBeenCalledTimes(6);
|
||||
});
|
||||
});
|
||||
describe('Rendering', () => {
|
||||
|
|
@ -290,32 +289,16 @@ describe('schedule-page.vue', () => {
|
|||
// Assert
|
||||
expect(testValue).toStrictEqual('01234');
|
||||
});
|
||||
test('getDisplayTextForMilitaryTime should return the correctly formatted string', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getShallowMountedComponent();
|
||||
wrapper.vm.selectableDatesData = {
|
||||
days: []
|
||||
};
|
||||
const timeInput1 = '15:00';
|
||||
const timeInput2 = '15:30';
|
||||
|
||||
// Act
|
||||
const testOutput1 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1);
|
||||
const testOutput2 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2);
|
||||
const testOutput3 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput1, true);
|
||||
const testOutput4 = wrapper.vm.getDisplayTextForMilitaryTime(timeInput2, true);
|
||||
|
||||
// Assert
|
||||
expect(testOutput1).toBe('3:00 PM');
|
||||
expect(testOutput2).toBe('3:30 PM');
|
||||
expect(testOutput3).toBe('3 PM');
|
||||
expect(testOutput4).toBe('3:30 PM');
|
||||
});
|
||||
});
|
||||
test('forwardButtonAction should call route method navigateWithoutSaving', async () => {
|
||||
// Arrange
|
||||
const { wrapper } = getShallowMountedComponent();
|
||||
wrapper.vm.$router.navigate = jest.fn(() => ({}));
|
||||
wrapper.vm.selectedTimeSlotInfo = {
|
||||
timeSlot: {
|
||||
routeCode: 'test-id'
|
||||
}
|
||||
};
|
||||
|
||||
// Act
|
||||
await wrapper.vm.forwardButtonAction();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<Form
|
||||
ref="theForm"
|
||||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="fade-on-route-transition">
|
||||
|
|
@ -16,56 +15,27 @@
|
|||
cmsWidgetName="ScheduleSubHeaderWidget"
|
||||
secondaryTextClasses="text-center small sub-text"
|
||||
class="mt-4" />
|
||||
<template v-if="ChangeShopLink.length">
|
||||
<textBlock
|
||||
cmsWidgetName="ChangeShopLink"
|
||||
justifyText="center"
|
||||
class="mb-5 text-link-small change-shop-link"
|
||||
:marginTopSizeOverride="1" />
|
||||
</template>
|
||||
<div class="main-content-container">
|
||||
<locationAlerts
|
||||
ref="locationAlerts"
|
||||
cmsWidgetPrefix="LocationAlert-" />
|
||||
<datePicker
|
||||
ref="datePicker"
|
||||
v-model="selectedDate"
|
||||
v-model="selectedTimeSlotInfo"
|
||||
customComponentId="dateQuestion"
|
||||
selectableDatesSetting="custom"
|
||||
class="text-link-small"
|
||||
:showTimeSlotError="showDatePickerError"
|
||||
:customSelectableDatesCallback="
|
||||
getAvailableDatesMethod
|
||||
"
|
||||
validationRules="date-required"
|
||||
@dateClicked="openInshopTimeSlotsModal" />
|
||||
<timeSlotModalQuestion
|
||||
ref="timeSlotModalQuestion"
|
||||
v-model="selectedTimeSlotInfo"
|
||||
customComponentId="timeSlotModalQuestion"
|
||||
cmsWidgetName="TimeSlotModalQuestion"
|
||||
mobilePremiumCmsWidgetName="MobilePremiumTimeSlotModal"
|
||||
mobileCmsWidgetName="MobileTimeSlotModal"
|
||||
dropoffCmsWidgetName="DropOffTimeSlotModal"
|
||||
sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
|
||||
overnightDropOffCmsWidgetName="OvernightDropOffTimeSlotModal"
|
||||
:selectedDate="selectedDate"
|
||||
:appointmentType="appointmentType"
|
||||
:premiumAppointmentFee="mobilePremiumAppointmentFee"
|
||||
:timeSlotsForSelectedDate="timeSlotsForSelectedDate"
|
||||
:estimatedServiceMinutesMinimum="
|
||||
selectableDatesData.estimatedServiceMinutesMinimum
|
||||
"
|
||||
:estimatedServiceMinutesMaximum="
|
||||
selectableDatesData.estimatedServiceMinutesMaximum
|
||||
"
|
||||
validationRules="time-slot-selection-required"
|
||||
@timeSlotModalClosed="timeSlotModalClosed"
|
||||
@timeSlotSelected="forwardButtonAction" />
|
||||
@dateSelected="dateSelectedFromPicker"
|
||||
@timeSlotSelected="timeSlotSelectedFromPicker" />
|
||||
<siteFooter
|
||||
ref="navbar"
|
||||
class="mt-5"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
:isForwardButtonNavigationDisabled="!isFormValid"
|
||||
@backClicked="navigateBack"
|
||||
@forwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
|
|
@ -80,9 +50,7 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
|
|||
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
|
||||
import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
|
||||
import datePicker from '@/digital-components/date-picker/date-picker.vue';
|
||||
import timeSlotModalQuestion from '@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import textBlock from '@/digital-components/text-block/text-block.vue';
|
||||
|
||||
// Supporting files
|
||||
import {
|
||||
|
|
@ -97,27 +65,15 @@ import {
|
|||
} from '@/helpers/cms-content-helper';
|
||||
import {
|
||||
calcDaysBetweenDates,
|
||||
convertDateStringToDate,
|
||||
sumDateString
|
||||
} from '@/helpers/date-helper';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import { Form, defineRule } from 'vee-validate';
|
||||
import { Form } from 'vee-validate';
|
||||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import errorMessages from '@/constants/error-messages';
|
||||
import { required } from '@/helpers/validation-rules';
|
||||
import { useMainStore } from '@/store';
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule('date-required', required(errorMessages.DATE_REQUIRED));
|
||||
defineRule('time-slot-selection-required', (value) => {
|
||||
if (value?.timeSlot?.routeCode == null) {
|
||||
return errorMessages.DATE_REQUIRED;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// Define constants
|
||||
const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
|
||||
const TIME_SLOTS_CALL_DAYS_LIMIT = 15;
|
||||
|
||||
const getAvailableDates = async (
|
||||
startDateString,
|
||||
|
|
@ -127,13 +83,11 @@ const getAvailableDates = async (
|
|||
) => {
|
||||
const apiEndDateLimit = sumDateString(
|
||||
startDateString,
|
||||
TIME_SLOTS_CALL_DAYS_LIMIT
|
||||
TIME_SLOTS_CALL_DAYS_LIMIT - 1
|
||||
);
|
||||
const difference = calcDaysBetweenDates(startDateString, endDateString);
|
||||
const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
|
||||
const storeActionConfigs = [];
|
||||
const timeSlotsData = {};
|
||||
timeSlotsData.days = [];
|
||||
let apiStartDate = startDateString;
|
||||
let apiEndDate = endDateString;
|
||||
|
||||
|
|
@ -144,7 +98,7 @@ const getAvailableDates = async (
|
|||
apiStartDate = sumDateString(apiEndDate, 1);
|
||||
apiEndDate = sumDateString(
|
||||
apiStartDate,
|
||||
TIME_SLOTS_CALL_DAYS_LIMIT
|
||||
TIME_SLOTS_CALL_DAYS_LIMIT - 1
|
||||
);
|
||||
|
||||
if (i === apiCallsCount) {
|
||||
|
|
@ -154,11 +108,7 @@ const getAvailableDates = async (
|
|||
apiEndDate = apiEndDateLimit;
|
||||
}
|
||||
|
||||
if (
|
||||
appointmentType === AppointmentTypeStrings.MOBILE
|
||||
|| appointmentType
|
||||
=== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
|
||||
) {
|
||||
if (appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP) {
|
||||
storeActionConfig = {
|
||||
storeAction: GET_MOBILE_TIME_SLOTS,
|
||||
payload: {
|
||||
|
|
@ -232,9 +182,7 @@ export default {
|
|||
siteSubHeader,
|
||||
locationAlerts,
|
||||
datePicker,
|
||||
timeSlotModalQuestion,
|
||||
siteFooter,
|
||||
textBlock,
|
||||
// eslint-disable-next-line vue/no-reserved-component-names
|
||||
Form
|
||||
},
|
||||
|
|
@ -300,7 +248,6 @@ export default {
|
|||
resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
|
||||
resultMap.premiumFeeWithPrice
|
||||
);
|
||||
vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
|
||||
});
|
||||
},
|
||||
setup() {
|
||||
|
|
@ -312,6 +259,7 @@ export default {
|
|||
selectedDate: this.getSelectedDate(),
|
||||
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
|
||||
selectableDatesData: [],
|
||||
showDatePickerError: false,
|
||||
mobilePremiumAppointmentFee: null
|
||||
};
|
||||
},
|
||||
|
|
@ -325,38 +273,14 @@ export default {
|
|||
appointmentType() {
|
||||
return useMainStore().order.serviceLocation.appointmentType;
|
||||
},
|
||||
timeSlotsForSelectedDate() {
|
||||
if (!this.selectedDate) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
|
||||
isFormValid() {
|
||||
const hasTimeSlotSelected = this.selectedTimeSlotInfo?.timeSlot?.routeCode != null;
|
||||
return hasTimeSlotSelected;
|
||||
},
|
||||
supportingItems() {
|
||||
return useMainStore().lineItems.supportingItems;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedDate(newValue, oldValue) {
|
||||
// Clear time slot selection if date selected changes
|
||||
if (newValue !== oldValue) {
|
||||
this.selectedTimeSlotInfo = {
|
||||
timeSlot: {
|
||||
date: null,
|
||||
routeCode: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
jobMaxMinutes: null,
|
||||
jobMinMinutes: null
|
||||
},
|
||||
isPremiumAppointment: null
|
||||
};
|
||||
}
|
||||
},
|
||||
selectedTimeSlotInfo(newValue) {
|
||||
this.updateFooterButtonText(newValue);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
splitCopyOnCMSPlaceHolder,
|
||||
arePagePrerequisitesValid() {
|
||||
|
|
@ -400,9 +324,6 @@ export default {
|
|||
getServiceZipCtuCodeFromStore() {
|
||||
return this.mainStore.order.serviceLocation.zipCodeCtu;
|
||||
},
|
||||
openInshopTimeSlotsModal() {
|
||||
this.$refs.timeSlotModalQuestion.openModal();
|
||||
},
|
||||
getSelectedDate() {
|
||||
return this.mainStore.order.schedule.date;
|
||||
},
|
||||
|
|
@ -420,64 +341,21 @@ export default {
|
|||
|
||||
return selectedTimeSlotInfo;
|
||||
},
|
||||
timeSlotModalClosed() {
|
||||
// Clear the selectedDate if no timeSlot has been selected
|
||||
if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
|
||||
this.selectedDate = null;
|
||||
}
|
||||
dateSelectedFromPicker(date) {
|
||||
this.selectedDate = date;
|
||||
this.showDatePickerError = false;
|
||||
},
|
||||
updateFooterButtonText(timeSlotInfo) {
|
||||
let navbarButtonText;
|
||||
if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
|
||||
navbarButtonText = 'Continue';
|
||||
} else {
|
||||
navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(timeSlotInfo.timeSlot.date)}`;
|
||||
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
|
||||
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
|
||||
} else if (
|
||||
this.appointmentType === AppointmentTypeStrings.MOBILE
|
||||
&& !timeSlotInfo.isPremiumAppointment
|
||||
) {
|
||||
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
|
||||
timeSlotInfo.timeSlot.startTime,
|
||||
true
|
||||
)} - ${this.getDisplayTextForMilitaryTime(
|
||||
timeSlotInfo.timeSlot.endTime,
|
||||
true
|
||||
)}`;
|
||||
}
|
||||
}
|
||||
this.$refs.navbar.updateButtonText(navbarButtonText);
|
||||
},
|
||||
convertSelectedDateToShortMonthAndDay(selectedDate) {
|
||||
// This conversion ensures we don't get get GMT induced date changes
|
||||
const dateObject = convertDateStringToDate(selectedDate);
|
||||
return dateObject.toLocaleDateString('en-us', {
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
},
|
||||
getDisplayTextForMilitaryTime(
|
||||
militaryTimeInput,
|
||||
shouldTrimMinutesIfEmpty = false
|
||||
) {
|
||||
// Expected input: "HH:MM"
|
||||
let hours = parseInt(militaryTimeInput.split(':')[0], 10);
|
||||
const minutes = militaryTimeInput.split(':')[1];
|
||||
const meridianNotation = hours > 11 ? 'PM' : 'AM';
|
||||
|
||||
if (hours > 12) {
|
||||
hours -= 12;
|
||||
}
|
||||
|
||||
if (shouldTrimMinutesIfEmpty && minutes === '00') {
|
||||
return `${hours} ${meridianNotation}`;
|
||||
}
|
||||
return `${hours}:${minutes} ${meridianNotation}`;
|
||||
timeSlotSelectedFromPicker(timeSlot) {
|
||||
this.selectedTimeSlotInfo = timeSlot;
|
||||
this.showDatePickerError = false;
|
||||
},
|
||||
forwardButtonAction() {
|
||||
this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
|
||||
if (!this.isFormValid) {
|
||||
this.showDatePickerError = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD,
|
||||
this.$route
|
||||
|
|
|
|||
|
|
@ -136,7 +136,6 @@ describe('welcome-page.vue', () => {
|
|||
const state = wrapper.findComponent({ ref: 'state' });
|
||||
const glassOnlyDamage = wrapper.findComponent({ ref: 'glassOnlyDamage' });
|
||||
const phoneNumber = wrapper.findComponent({ ref: 'phoneNumber' });
|
||||
const email = wrapper.findComponent({ ref: 'email' });
|
||||
|
||||
// Assert
|
||||
expect(policyNumber.exists()).toBe(true);
|
||||
|
|
@ -146,7 +145,6 @@ describe('welcome-page.vue', () => {
|
|||
expect(state.exists()).toBe(false);
|
||||
expect(glassOnlyDamage.exists()).toBe(false);
|
||||
expect(phoneNumber.exists()).toBe(true);
|
||||
expect(email.exists()).toBe(true);
|
||||
});
|
||||
test('Policy zip field should be visible at all times', async () => {
|
||||
// Arrange
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="welcome-page-container iss-heritage-content-container-width">
|
||||
<siteSubHeader
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
class="mt-4" />
|
||||
class="form-group" />
|
||||
<textboxQuestion
|
||||
ref="policyNumber"
|
||||
v-model="welcomePageModel.policyNumber"
|
||||
|
|
@ -22,16 +22,6 @@
|
|||
disableAutoFill
|
||||
:isDisabled="isPolicyHolderDisabled"
|
||||
:validationRules="rules.policyNumber" />
|
||||
<textboxQuestion
|
||||
ref="policyZip"
|
||||
v-model="welcomePageModel.policyZipCode"
|
||||
inputId="policyZipCode"
|
||||
cmsWidgetName="PolicyZipQuestion"
|
||||
isRequired
|
||||
mask="#####"
|
||||
:isDisabled="isPolicyZipDisabled"
|
||||
:validationRules="rules.policyZip"
|
||||
class="mt-3" />
|
||||
<textboxQuestion
|
||||
ref="phoneNumber"
|
||||
v-model="welcomePageModel.phoneNumber"
|
||||
|
|
@ -41,7 +31,8 @@
|
|||
isRequired
|
||||
:mask="phoneMask"
|
||||
disableAutoFill
|
||||
class="mt-3" />
|
||||
placeholderText="###-###-####"
|
||||
class="form-group" />
|
||||
<textboxQuestion
|
||||
ref="extension"
|
||||
v-model="welcomePageModel.extension"
|
||||
|
|
@ -49,7 +40,7 @@
|
|||
cmsWidgetName="ExtensionQuestion"
|
||||
:validationRules="rules.extension"
|
||||
disableAutoFill
|
||||
class="mt-3" />
|
||||
class="form-group" />
|
||||
<textboxQuestion
|
||||
ref="dateOfLoss"
|
||||
v-model="welcomePageModel.dateOfLoss"
|
||||
|
|
@ -62,7 +53,7 @@
|
|||
:max="new Date().toJSON().slice(0, 10)"
|
||||
:min="'1972-12-01'"
|
||||
:validationRules="rules.lossDate"
|
||||
class="mt-3" />
|
||||
class="form-group" />
|
||||
<textBlock
|
||||
cmsWidgetName="DamageDateEstimateWidget"
|
||||
typeStyle="small"
|
||||
|
|
@ -77,44 +68,45 @@
|
|||
disableAutoFill
|
||||
:validationRules="rules.damageOption"
|
||||
placeHolderText="Select an option"
|
||||
class="mt-3" />
|
||||
class="form-group" />
|
||||
<textboxQuestion
|
||||
ref="policyZip"
|
||||
v-model="welcomePageModel.policyZipCode"
|
||||
inputId="policyZipCode"
|
||||
cmsWidgetName="PolicyZipQuestion"
|
||||
isRequired
|
||||
mask="#####"
|
||||
:isDisabled="isPolicyZipDisabled"
|
||||
:validationRules="rules.policyZip"
|
||||
class="form-group" />
|
||||
<dropdownQuestion
|
||||
v-if="displayDamageStateQuestion"
|
||||
id="welcomeDropdown"
|
||||
ref="state"
|
||||
v-model="welcomePageModel.damageState"
|
||||
class="mt-3"
|
||||
class="form-group"
|
||||
cmsWidgetName="DamageStateQuestion"
|
||||
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
|
||||
:options="getStates"
|
||||
:validationRules="rules.lossState"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
placeHolderText="Select an option" />
|
||||
placeHolderText="Select State" />
|
||||
<textboxQuestion
|
||||
v-if="displayDamageCityQuestion"
|
||||
ref="damageCity"
|
||||
v-model="welcomePageModel.damageCity"
|
||||
class="mt-3"
|
||||
class="form-group"
|
||||
inputId="damageCityField"
|
||||
cmsWidgetName="DamageCityQuestion"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
:validationRules="rules.lossCity" />
|
||||
<textboxQuestion
|
||||
ref="email"
|
||||
v-model="welcomePageModel.email"
|
||||
inputId="emailField"
|
||||
cmsWidgetName="EmailAddressQuestion"
|
||||
:validationRules="rules.email"
|
||||
isRequired
|
||||
disableAutoFill
|
||||
class="mt-3" />
|
||||
<buttonQuestion
|
||||
v-if="displayGlassOnlyQuestion"
|
||||
ref="glassOnlyDamage"
|
||||
v-model="welcomePageModel.isDamageGlassOnly"
|
||||
class="px-0 mt-3"
|
||||
class="px-0 form-group"
|
||||
cmsWidgetName="GlassOnlyQuestion"
|
||||
inputId="isDamageGlassOnly"
|
||||
:answers="DamageGlassOnlyOptions"
|
||||
|
|
@ -142,17 +134,9 @@
|
|||
:isDismissible="false" />
|
||||
<siteFooter
|
||||
ref="siteFooter"
|
||||
class="mt-3"
|
||||
cmsWidgetName="SiteFooterWidget"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
<textBlock
|
||||
id="requestCallbackLink"
|
||||
cmsWidgetName="HelpTextWidget"
|
||||
linkType="navigation"
|
||||
href="javascript:void(0)"
|
||||
class="mb-5 text-left"
|
||||
@clickEvent="handleHelpLinkClick" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -257,7 +241,6 @@ export default {
|
|||
duplicates: [],
|
||||
rules: {
|
||||
damageOption: 'damage-option-required',
|
||||
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
|
||||
extension: `${globalRules.EXTENSION_FORMAT}`,
|
||||
lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
|
||||
// eslint-disable-next-line max-len
|
||||
|
|
@ -302,7 +285,11 @@ export default {
|
|||
return !!this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
|
||||
},
|
||||
getStates() {
|
||||
return states;
|
||||
return Object.keys(states).reduce((acc, key) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
acc[key] = states[key].toUpperCase();
|
||||
return acc;
|
||||
}, {});
|
||||
},
|
||||
isPolicyHolderDisabled() {
|
||||
return !!this.mainStore.issConfig.disabledFields.policyNumber;
|
||||
|
|
@ -408,7 +395,6 @@ export default {
|
|||
isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
|
||||
phoneNumber: this.mainStore.order.contactInfo.homePhone,
|
||||
extension: this.mainStore.order.contactInfo.extension,
|
||||
email: this.mainStore.order.customer.emailAddress,
|
||||
isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled
|
||||
};
|
||||
},
|
||||
|
|
@ -425,7 +411,6 @@ export default {
|
|||
this.welcomePageModel.isDamageGlassOnly = response.policy.isDamageGlassOnly;
|
||||
this.welcomePageModel.phoneNumber = response.customer.homePhone;
|
||||
this.welcomePageModel.extension = response.customer.extension;
|
||||
this.welcomePageModel.email = response.customer.emailAddress;
|
||||
},
|
||||
findDamageCause(damageCause) {
|
||||
const damageCauseOptions = this.DamageCauseOptions;
|
||||
|
|
@ -481,13 +466,6 @@ export default {
|
|||
this.mainStore.order.loadedFromCookie = true;
|
||||
this.answeredContinueModal = true;
|
||||
this.$refs.continueModal.closeModal();
|
||||
},
|
||||
handleHelpLinkClick() {
|
||||
useMainStore().setBailout(bailoutMessage.RequestCallback());
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
|
||||
this.$route
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -508,6 +486,10 @@ form {
|
|||
min-height: 1px;
|
||||
padding-left: .9375rem;
|
||||
padding-right: .9375rem;
|
||||
|
||||
.form-group {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -243,6 +243,7 @@ export const getDefaultState = () => ({
|
|||
},
|
||||
issConfig: {
|
||||
clientName: 'Generic Insurance', // this is the default and will be overriden by the client's name
|
||||
clientFullName: 'Generic Insurance', // this is the default and will be overriden by the client's name or client's full name.
|
||||
clientDisplayName: 'Generic Insurance', // this is the default and will be overridden by the client's name or client display name.
|
||||
clientHeader: {},
|
||||
styleSheet: '', // Stylesheet used by the client.
|
||||
|
|
@ -2156,6 +2157,7 @@ export const useMainStore = defineStore({
|
|||
|
||||
resetISSConfigState() {
|
||||
this.issConfig.clientName = 'Generic Insurance';
|
||||
this.issConfig.clientFullName = 'Generic Insurance';
|
||||
this.issConfig.clientDisplayName = 'Generic Insurance';
|
||||
this.issConfig.clientHeader = {};
|
||||
this.issConfig.parentAccountNumber = 0;
|
||||
|
|
@ -2275,7 +2277,6 @@ export const useMainStore = defineStore({
|
|||
this.order.policy.damageState = welcomePageModel?.damageState;
|
||||
this.order.policy.damageCity = welcomePageModel?.damageCity;
|
||||
this.order.policy.isDamageGlassOnly = welcomePageModel?.isDamageGlassOnly;
|
||||
this.order.customer.emailAddress = welcomePageModel?.email;
|
||||
this.order.serviceLocation.zipCode = welcomePageModel?.policyZipCode;
|
||||
this.updatePhoneNumbers({
|
||||
home: welcomePageModel?.phoneNumber,
|
||||
|
|
@ -2369,23 +2370,23 @@ export const useMainStore = defineStore({
|
|||
|
||||
const isMobileApt = appointmentType === AppointmentTypeStrings.MOBILE
|
||||
|| appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
|
||||
|
||||
|
||||
const retPricedLineItems = await globalMethods.callHttpClient({
|
||||
method: endpoints.TaxOrderItems.method,
|
||||
endpoint: endpoints.TaxOrderItems.url,
|
||||
payload: {
|
||||
ParentAccountNumber: this.order.parentAccountNumber,
|
||||
BillToAccountNumber: this.billToAccountNumber,
|
||||
ProviderNumber: this.providerNumber,
|
||||
AppointmentType: appointmentType,
|
||||
PricedLineItems: getLineItemsFlattened(pricedLineItems),
|
||||
ServiceLocation: {
|
||||
City: isMobileApt ? serviceLocationCity : null,
|
||||
State: isMobileApt ? serviceLocationState : null,
|
||||
ZipCode: isMobileApt ? serviceLocationZipCode : null,
|
||||
},
|
||||
ServerData: lineItemServerData ? lineItemServerData : "",
|
||||
},
|
||||
ParentAccountNumber: this.order.parentAccountNumber,
|
||||
BillToAccountNumber: this.billToAccountNumber,
|
||||
ProviderNumber: this.providerNumber,
|
||||
AppointmentType: appointmentType,
|
||||
PricedLineItems: getLineItemsFlattened(pricedLineItems),
|
||||
ServiceLocation: {
|
||||
City: isMobileApt ? serviceLocationCity : null,
|
||||
State: isMobileApt ? serviceLocationState : null,
|
||||
ZipCode: isMobileApt ? serviceLocationZipCode : null
|
||||
},
|
||||
ServerData: lineItemServerData || ''
|
||||
}
|
||||
}).then((response) => {
|
||||
this.order.lineItems.serverData = response.data.serverData;
|
||||
return addTaxesToPricedLineItems(pricedLineItems, response.data.taxedLineItems);
|
||||
|
|
@ -2393,9 +2394,6 @@ export const useMainStore = defineStore({
|
|||
|
||||
return retPricedLineItems;
|
||||
},
|
||||
saveProviderPreferenceData(data) {
|
||||
this.updatePageData({ page: issPageValues.PROVIDER_PREFERENCE, data });
|
||||
},
|
||||
addEventToBus(event) {
|
||||
this.applicationUser.eventBus.push(event);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -174,6 +174,7 @@ body {
|
|||
div.textbox-question {
|
||||
label {
|
||||
span.sub-caption {
|
||||
color: #525656;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
|
@ -203,10 +204,10 @@ $heritage-btn-width: 9.0625rem; // 145px
|
|||
@include heritage-btn-variant('secondary', $white, $heritage-blue-secondary, transparent, true);
|
||||
@include heritage-btn-link('link', $blue, transparent, $heritage-blue-secondary);
|
||||
|
||||
@include heritage-btn-size('lg', 0.625rem, 1.25rem);
|
||||
@include heritage-btn-size('lg', 0.625rem, 1.25rem);
|
||||
@include heritage-btn-size('md', 7px, 15px);
|
||||
@include heritage-btn-size('sm', 3px, 6px);
|
||||
@include heritage-btn-size('xs', 1px, 5px);
|
||||
@include heritage-btn-size('sm', 3px, 6px);
|
||||
@include heritage-btn-size('xs', 1px, 5px);
|
||||
|
||||
&.btn-link {
|
||||
--bs-btn-padding-x: 0px;
|
||||
|
|
|
|||
|
|
@ -154,6 +154,7 @@ $border-radius: 0.25rem;
|
|||
$border-radius-sm: 0.2rem;
|
||||
$border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
|
||||
$border-radius-pill: 50rem;
|
||||
$border-radius-list-button: 1.375rem; // Used for list buttons
|
||||
|
||||
//Progress Bar Styling
|
||||
$progress-bar-success-color: $green;
|
||||
|
|
|
|||
Loading…
Reference in a new issue