Finishing touches on code
This commit is contained in:
parent
fc753e4253
commit
5fb68798a1
7 changed files with 100 additions and 129 deletions
|
|
@ -3,6 +3,12 @@ const widgetFields = Object.freeze({
|
|||
NAME: 'Name',
|
||||
ANSWERS: 'Answers'
|
||||
},
|
||||
SUB_HEADER_WIDGET: {
|
||||
NAME: 'Name',
|
||||
SUB_HEADER_TEXT: 'SubHeaderText',
|
||||
SECONDARY_TEXT: 'SecondaryText',
|
||||
BACK_BUTTON_ACCESSIBLE_TEXT: 'BackButtonAccessibleText'
|
||||
},
|
||||
INPUT_QUESTION_WIDGET: {
|
||||
NAME: 'Name',
|
||||
QUESTION_TEXT: 'QuestionText',
|
||||
|
|
|
|||
|
|
@ -61,14 +61,15 @@ function hasMatchingReplacementOption(vehicleDamageOptions, selectedGlassToRepla
|
|||
export async function isGlassAvailableForCarId(carId) {
|
||||
const mainStore = useMainStore();
|
||||
|
||||
try {
|
||||
const vehicleDamageOptionsResponse = await mainStore.getDamageOptions(carId);
|
||||
const selectedGlassToReplace = mainStore.damage.glassToReplace;
|
||||
// try {
|
||||
// const vehicleDamageOptionsResponse = await mainStore.getDamageOptions(carId);
|
||||
// const selectedGlassToReplace = mainStore.damage.glassToReplace;
|
||||
|
||||
return hasMatchingReplacementOption(vehicleDamageOptionsResponse.data, selectedGlassToReplace);
|
||||
} catch (error) {
|
||||
return false;
|
||||
}
|
||||
// return hasMatchingReplacementOption(vehicleDamageOptionsResponse.data, selectedGlassToReplace);
|
||||
// } catch (error) {
|
||||
// return false;
|
||||
// }
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -9,18 +9,12 @@
|
|||
cmsWidgetName="SiteHeaderWidget" />
|
||||
<div class="main-content-container">
|
||||
<siteSubHeader
|
||||
v-if="isTpaEnabled"
|
||||
cmsWidgetName="SiteSubHeaderWidget"
|
||||
:cmsWidgetName="subHeaderCmsWidgetName"
|
||||
:contentProperty="subHeaderContentProperty"
|
||||
:stripRteStyle="stripRteStyle"
|
||||
:subContentProperty="subContentProperty"
|
||||
class="sub-header-content"
|
||||
justification="left" />
|
||||
<siteSubHeader
|
||||
v-else
|
||||
cmsWidgetName="ContentGroupNoTPAWidget"
|
||||
class="sub-header-content"
|
||||
contentProperty="HeaderText"
|
||||
justification="left"
|
||||
:stripRteStyle="true"
|
||||
subContentProperty="BodyText" />
|
||||
<textboxQuestion
|
||||
ref="firstName"
|
||||
v-model="bailoutPageModel.firstName"
|
||||
|
|
@ -77,6 +71,8 @@ import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
|||
import globalRules from '@/constants/global-rules';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import { useMainStore } from '@/store';
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
import routerParams from '@/router/router-constants/router-params';
|
||||
|
||||
export default {
|
||||
name: 'bailout-page',
|
||||
|
|
@ -91,7 +87,6 @@ export default {
|
|||
mixins: [BaseFormMixin],
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
console.log('bailout b4 route enter');
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
|
|
@ -102,24 +97,26 @@ export default {
|
|||
];
|
||||
// use resultMap to populate layout content.
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
console.log('about to enter next');
|
||||
console.log(JSON.stringify(resultMap.cmsContent));
|
||||
|
||||
const pageData = useMainStore().pageData(to.query.issPage);
|
||||
next((vm) => {
|
||||
console.log('in next');
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
console.log('end of next');
|
||||
vm.setNotSeeingPreferShop(pageData[routerParams.NOT_SEEING_PREFERRED_SHOP]);
|
||||
});
|
||||
console.log('end of before route enter');
|
||||
},
|
||||
setup() {
|
||||
console.log('bailout setup');
|
||||
const mainStore = useMainStore();
|
||||
return { mainStore };
|
||||
},
|
||||
data() {
|
||||
console.log('bailout data');
|
||||
return {
|
||||
notSeeingPreferredShop: false,
|
||||
bailoutPageModel: this.getBailoutPageModelFromStore(),
|
||||
widget: {
|
||||
defaultSiteHeader: 'SiteSubHeaderWidget',
|
||||
noTpa: 'ContentGroupNoTPAWidget',
|
||||
notSeeingPreferredShop: 'ContentGroupNotSeeingPreferredShop'
|
||||
},
|
||||
rules: {
|
||||
firstName: globalRules.FIRST_NAME_REQUIRED,
|
||||
lastName: globalRules.LAST_NAME_REQUIRED,
|
||||
|
|
@ -129,8 +126,31 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
subHeaderCmsWidgetName() {
|
||||
if (!this.isTpaEnabled) {
|
||||
return this.widget.noTpa;
|
||||
}
|
||||
if (this.notSeeingPreferredShop) {
|
||||
return this.widget.notSeeingPreferredShop;
|
||||
}
|
||||
return this.widget.defaultSiteHeader;
|
||||
},
|
||||
subHeaderContentProperty() {
|
||||
if (!this.isTpaEnabled || this.notSeeingPreferredShop) {
|
||||
return widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT;
|
||||
}
|
||||
return widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT;
|
||||
},
|
||||
subContentProperty() {
|
||||
if (!this.isTpaEnabled || this.notSeeingPreferredShop) {
|
||||
return widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT;
|
||||
}
|
||||
return widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT;
|
||||
},
|
||||
stripRteStyle() {
|
||||
return !this.isTpaEnabled || this.notSeeingPreferredShop;
|
||||
},
|
||||
isTpaEnabled() {
|
||||
console.log(`Is TPA enabled: ${this.mainStore.issConfig.enableTPAFlow}`);
|
||||
return this.mainStore.issConfig.enableTPAFlow;
|
||||
}
|
||||
},
|
||||
|
|
@ -158,6 +178,9 @@ export default {
|
|||
phoneNumber: this.mainStore.order.customer.phoneNumber,
|
||||
email: this.mainStore.order.customer.emailAddress
|
||||
};
|
||||
},
|
||||
setNotSeeingPreferShop(value) {
|
||||
this.notSeeingPreferredShop = value ?? false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
class="text-center mt-5 mb-0 text-black w-100 search-question">
|
||||
{{ tpaSearchQuestionLabel }}
|
||||
</label>
|
||||
<!-- TODO make this label for appropriate text box -->
|
||||
<label
|
||||
ref="searchInstructions"
|
||||
for="tpaSearchQuestionField"
|
||||
|
|
@ -118,6 +117,7 @@ import { useMainStore } from '@/store';
|
|||
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
||||
import globalRules from '@/constants/global-rules.js';
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
import routerParams from '@/router/router-constants/router-params';
|
||||
|
||||
export default {
|
||||
name: 'tpa-search',
|
||||
|
|
@ -143,75 +143,37 @@ export default {
|
|||
];
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
console.log(JSON.stringify(resultMap.cmsContent));
|
||||
// const tpaProviders = await useMainStore().getTpaProviders(zipCode, radiusOptions[0]).then(async providers => {
|
||||
// if (providers?.length === 0 ?? true) {
|
||||
// return useMainStore().getTpaProviders(zipCode, radiusOptions[1]).then(result => {
|
||||
// if (providers?.length === 0 ?? true) {
|
||||
// return useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// });
|
||||
const radiusOptions = [25, 50, 100];
|
||||
const { zipCode } = useMainStore().order.customer.address;
|
||||
|
||||
// get providers by zipCode and radius[0]
|
||||
// if no providers, get providers by zipCode and radius[1]
|
||||
// if no providers, get providers by zipCode and radius[2]
|
||||
const tpaProvidersRadius25 = await useMainStore().getTpaProviders(zipCode, radiusOptions[0]);
|
||||
const tpaProvidersRadius50 = await useMainStore().getTpaProviders(zipCode, radiusOptions[1]);
|
||||
const tpaProvidersRadius100 = await useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
|
||||
let radius = '25 miles';
|
||||
|
||||
let providers = tpaProvidersRadius25;
|
||||
if ((tpaProvidersRadius25?.data ?? []).length === 0) {
|
||||
radius = '50 miles';
|
||||
providers = tpaProvidersRadius50;
|
||||
if ((tpaProvidersRadius50?.data ?? []).length === 0) {
|
||||
radius = '100 miles';
|
||||
providers = tpaProvidersRadius100;
|
||||
}
|
||||
}
|
||||
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
// vm.setFilter(radius);
|
||||
// vm.setProviders(providers);
|
||||
vm.setFilter(radius);
|
||||
vm.setProviders(providers);
|
||||
});
|
||||
},
|
||||
async setup() {
|
||||
// TODO get TPA shops within radius of zipcode for account
|
||||
// Set initialFilter to value associated with the minimum distance required to return
|
||||
// at least one shop
|
||||
|
||||
// const radiusOptions = [25, 50, 100];
|
||||
// const { zipCode } = useMainStore().order.customer.address;
|
||||
|
||||
// const tpaProvidersRadius25 = useMainStore().getTpaProviders(zipCode, radiusOptions[0]);
|
||||
// const tpaProvidersRadius50 = useMainStore().getTpaProviders(zipCode, radiusOptions[1]);
|
||||
// const tpaProvidersRadius100 = useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
|
||||
// let radius = '25 miles';
|
||||
// const providers = await tpaProvidersRadius25.then((result25) => {
|
||||
// if ((result25?.data ?? []).length === 0) {
|
||||
// radius = '50 miles';
|
||||
// console.log(`radius 50: ${radius}`);
|
||||
// return tpaProvidersRadius50.then((result50) => {
|
||||
// console.log(`result 50: ${JSON.stringify(result50)}`);
|
||||
// if ((result50?.data ?? []).length === 0) {
|
||||
// radius = '100 miles';
|
||||
// console.log(`radius 100: ${radius}`);
|
||||
// return tpaProvidersRadius100;
|
||||
// }
|
||||
// return result50;
|
||||
// });
|
||||
// }
|
||||
// return result25;
|
||||
// });
|
||||
|
||||
// console.log(`providers: ${JSON.stringify(providers)}`);
|
||||
|
||||
// const filter = radius;
|
||||
// return { filter, providers, zipCode };
|
||||
const initialFilter = '25 miles';
|
||||
return { initialFilter };
|
||||
},
|
||||
data() {
|
||||
// const defaultRadius = 25;
|
||||
// TODO should we default to this or policy.policyZipCode instead?
|
||||
const { zipCode } = useMainStore().order.customer.address;
|
||||
// const providers = useMainStore().getTpaProviders(this.zipCode, defaultRadius)?.data ?? [];
|
||||
return {
|
||||
// TODO should we default to this or policy.policyZipCode instead?
|
||||
zipCode,
|
||||
filter: this.initialFilter,
|
||||
providers: [],
|
||||
// selectedProviderNumber: providers.length === 1
|
||||
// ? providers[0].value
|
||||
// : '',
|
||||
selectedProviderNumber: '',
|
||||
widget: {
|
||||
siteHeader: 'SiteHeaderWidget',
|
||||
|
|
@ -285,35 +247,33 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
filter() {
|
||||
console.log('filter changed');
|
||||
this.providers = this.getProviders();
|
||||
async filter() {
|
||||
// TODO right now this results in getProviders being called once more than it needs to be
|
||||
this.providers = await this.getProviders();
|
||||
},
|
||||
providers() {
|
||||
console.log('providers changed');
|
||||
if (this.providers?.length === 1 ?? false) {
|
||||
console.log('one provider');
|
||||
this.selectedProviderNumber = this.providers[0].value;
|
||||
}
|
||||
this.selectedProviderNumber = this.providers?.length === 1 ?? false
|
||||
? this.providers[0].value
|
||||
: '';
|
||||
}
|
||||
},
|
||||
methods:
|
||||
{
|
||||
getProviders() {
|
||||
return useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles)?.data ?? [];
|
||||
async getProviders() {
|
||||
const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);
|
||||
return getTpaProvidersResult?.data ?? [];
|
||||
},
|
||||
doNotSeeMyShopLinkClick() {
|
||||
// TODO text on the bailout page should be based on have not seen my shop
|
||||
// TODO pass data along with navigation
|
||||
console.log('to the bailout page');
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.CLICKED_DO_NOT_SEE_MY_SHOP_LINK,
|
||||
this.$route
|
||||
this.$route,
|
||||
{},
|
||||
{},
|
||||
{ [routerParams.NOT_SEEING_PREFERRED_SHOP]: true }
|
||||
);
|
||||
},
|
||||
searchClick() {
|
||||
console.log('valid search');
|
||||
this.providers = this.getProviders();
|
||||
async searchClick() {
|
||||
this.providers = await this.getProviders();
|
||||
},
|
||||
backButtonAction() {
|
||||
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
|
|
|
|||
|
|
@ -220,6 +220,7 @@ export default {
|
|||
}
|
||||
|
||||
// navigate back to vehicle-damage
|
||||
console.log(`glass available: ${isSelectedGlassAvailableForVehicle}`);
|
||||
if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {
|
||||
this.mainStore.updateVehicle(this.vehicleFromLookup);
|
||||
this.mainStore.resetDamageState();
|
||||
|
|
|
|||
|
|
@ -22,22 +22,18 @@ const routes = [
|
|||
path: '/',
|
||||
name: 'root',
|
||||
async beforeEnter(to, from, next) {
|
||||
console.log('beforeEnter');
|
||||
try {
|
||||
console.log('in try');
|
||||
const issPageToUse = !to.query.issPage ? issPageValues.WELCOME_PAGE : to.query.issPage;
|
||||
|
||||
if ((issPageToUse === issPageValues.ACCESS_DENIED
|
||||
|| (issPageToUse !== issPageValues.ENTRY_PAGE && !useMainStore().issConfig.parentAccountNumber))
|
||||
&& process.env.VUE_APP_CURRENT_ENVIRONMENT !== 'Localhost'
|
||||
) {
|
||||
console.log('go to access is denied');
|
||||
return await GoToAccessIsDenied(next);
|
||||
}
|
||||
|
||||
// Do not run these for the main entry page - as it is not part of the user flow.
|
||||
if (issPageToUse !== issPageValues.ENTRY_PAGE) {
|
||||
console.log('not entry page');
|
||||
if (analyticsMixin.methods.noSession()) {
|
||||
await analyticsMixin.methods.initSession();
|
||||
} else {
|
||||
|
|
@ -49,7 +45,6 @@ const routes = [
|
|||
|
||||
// If the saved session has timed out, clear the session, execute 404 logic.
|
||||
if (getISSCookie() !== null && !isSavedSessionStillActive()) {
|
||||
console.log('go to start on 404');
|
||||
// await baseMixin.methods.dispatchStoreAction(storeActions.RESET_STATE);
|
||||
await GoToStartOn404(next);
|
||||
}
|
||||
|
|
@ -57,9 +52,7 @@ const routes = [
|
|||
// Process ISS cookie.
|
||||
updateOrCreateISSCookie();
|
||||
|
||||
// TODO check prerequisite stuff in here
|
||||
if (router.hasRoute(issPageToUse)) {
|
||||
console.log('has route');
|
||||
// Since our route is already in scope, we can grab the component and call the arePagePrerequisitesValid function.
|
||||
let component = router.getRoutes().filter((x) => x.name === issPageToUse)[0].components;
|
||||
|
||||
|
|
@ -69,17 +62,16 @@ const routes = [
|
|||
}
|
||||
|
||||
if (!arePagePrerequisitesValid(component)) {
|
||||
console.log('prereqs not valid');
|
||||
await GoToStartOn404(next);
|
||||
}
|
||||
console.log('next 1');
|
||||
console.log(`to: ${JSON.stringify(to)}`);
|
||||
// console.log(`from: ${JSON.stringify(from)}`);
|
||||
return next({ name: issPageToUse, query: to.query, params: to.params });
|
||||
}
|
||||
|
||||
const routeData = await GetRouteInfoFromPageName(issPageToUse);
|
||||
|
||||
if (routeData[0].name.toLowerCase() === 'error') {
|
||||
console.log('page not found');
|
||||
throw new Error('Page not found!');
|
||||
}
|
||||
|
||||
|
|
@ -98,22 +90,18 @@ const routes = [
|
|||
.components.default();
|
||||
|
||||
if (!arePagePrerequisitesValid(nextComponent)) {
|
||||
console.log('prereqs not valid');
|
||||
const tempMsgCopy = 'Pre Requisites failed, need to handle. Default is Welcome Page.';
|
||||
const tempMsgHeadline = `${issPageToUse}: pre-req failed...`;
|
||||
await GoToStartOn404(next, tempMsgCopy, tempMsgHeadline);
|
||||
}
|
||||
|
||||
console.log('next 2');
|
||||
// Assign current query string parameters, as well as our issPage one.
|
||||
next({
|
||||
name: routeData[0].name,
|
||||
query: Object.assign(to.query, { issPage: routeData[0].name }),
|
||||
params: to.params
|
||||
});
|
||||
console.log('end try');
|
||||
} catch (error) {
|
||||
console.log('in error');
|
||||
window.console.warn(error);
|
||||
await GoToStartOn404(next);
|
||||
}
|
||||
|
|
@ -132,7 +120,6 @@ const router = createRouter({
|
|||
});
|
||||
|
||||
router.afterEach(async (to, from) => {
|
||||
console.log('afterEach');
|
||||
/*eslint-disable-line*/
|
||||
const store = useMainStore();
|
||||
// Update lastPageVisited in the store
|
||||
|
|
@ -159,7 +146,6 @@ router.afterEach(async (to, from) => {
|
|||
// Push experiments to Data Layer
|
||||
analyticsMixin.methods.pushExperimentsToDataLayer();
|
||||
}
|
||||
console.log('end after each');
|
||||
});
|
||||
|
||||
router.navigateWithoutSaving = (
|
||||
|
|
@ -169,7 +155,8 @@ router.navigateWithoutSaving = (
|
|||
optionalParams = {},
|
||||
optionalPageData = {}
|
||||
) => {
|
||||
navigate(scenario, currentRoute, false, optionalQuery, optionalParams, optionalPageData);
|
||||
// TODO does not save session
|
||||
navigate(scenario, currentRoute, optionalQuery, optionalParams, optionalPageData);
|
||||
};
|
||||
|
||||
// Get route information by page name.
|
||||
|
|
@ -210,7 +197,6 @@ router.overrideNavigation = (
|
|||
optionalParams,
|
||||
optionalPageData
|
||||
);
|
||||
console.log('next 3');
|
||||
next();
|
||||
};
|
||||
|
||||
|
|
@ -232,7 +218,6 @@ function navigate(
|
|||
optionalParams = {},
|
||||
optionalPageData = {}
|
||||
) {
|
||||
console.log('entering navigate');
|
||||
/*eslint-disable-line*/
|
||||
if (!scenario) {
|
||||
window.console.error('No scenario provided. Please review the routing table.');
|
||||
|
|
@ -247,15 +232,12 @@ function navigate(
|
|||
return;
|
||||
}
|
||||
|
||||
console.log('entering navigate');
|
||||
if (scenario === navigationScenarios.CLICKED_BACK_PREVIOUS) {
|
||||
// Update page to the prevous page in the router.
|
||||
// If we need to worry about typing this in from outside of the app,
|
||||
// we'll need to pre check history.length or if there is a previous page stored in state.
|
||||
router.go(-1);
|
||||
} else if (matchingScenarioMap.destinationIssPageValue) {
|
||||
console.log(matchingScenarioMap);
|
||||
console.log('else if 1');
|
||||
// Update page data to the store for next page if provided. Otherwise, keep existing page data or set to empty object
|
||||
const existingPageDataForPage = useMainStore().pageData(matchingScenarioMap.destinationIssPageValue);
|
||||
baseMixin.methods.savePageDataToStore(
|
||||
|
|
@ -267,16 +249,15 @@ function navigate(
|
|||
|
||||
// We're always pushing the same path, just changing query strings.
|
||||
// Make sure our optional query strings get combined with our issPage one.
|
||||
console.log(`optional params: ${JSON.stringify(optionalParams)}`);
|
||||
router.push({
|
||||
name: 'root',
|
||||
query: Object.assign(optionalQuery, {
|
||||
issPage: matchingScenarioMap.destinationIssPageValue
|
||||
}),
|
||||
params: optionalParams
|
||||
params: optionalParams // TODO I don't think this actually works
|
||||
});
|
||||
} else if (matchingScenarioMap.destinationUrl) {
|
||||
console.log(matchingScenarioMap.destinationUrl);
|
||||
console.log('else if 2');
|
||||
navigateToUrl(matchingScenarioMap.destinationUrl, optionalQuery);
|
||||
}
|
||||
}
|
||||
|
|
@ -317,7 +298,6 @@ async function GoToAccessIsDenied(next) {
|
|||
component: lazyLoadComponent(errorPageName)
|
||||
});
|
||||
|
||||
console.log('next 4');
|
||||
next({
|
||||
name: errorPageName,
|
||||
query: { issPage: errorPageName }
|
||||
|
|
@ -340,7 +320,6 @@ async function GoToStartOn404(next, msgCopy = null, msgHeadline = null) {
|
|||
type: globalEventTypes.Danger
|
||||
});
|
||||
|
||||
console.log('next 5');
|
||||
next({
|
||||
name: errorPageName,
|
||||
query: { issPage: errorPageName }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
const routerParams = Object.freeze({
|
||||
DISPLAY_VEHICLE_CHANGE_ALERT: 'displayVehicleChangeAlert',
|
||||
SAVE_SESSION_SYNCHRONOUS: 'saveSessionSynchronous'
|
||||
SAVE_SESSION_SYNCHRONOUS: 'saveSessionSynchronous',
|
||||
NOT_SEEING_PREFERRED_SHOP: 'notSeeingPreferredShop'
|
||||
});
|
||||
|
||||
export default routerParams;
|
||||
|
|
|
|||
Loading…
Reference in a new issue