418 lines
15 KiB
Vue
418 lines
15 KiB
Vue
<template>
|
|
<Form
|
|
ref="tpaSubmitFormRef"
|
|
v-slot="{ meta }"
|
|
class="tpa-submit"
|
|
@submit="onSubmit"
|
|
@invalidSubmit="onInvalidSubmit">
|
|
<div class="container-fluid fade-on-route-transition">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 px-0 px-md-2">
|
|
<siteHeader
|
|
ref="siteHeader"
|
|
:cmsWidgetName="widget.siteHeader" />
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 col-xl-4">
|
|
<vehicleBanner
|
|
ref="vehicleBanner"
|
|
:cmsWidgetName="widget.vehicleBanner"
|
|
:displayGenericVehicleImage="false"
|
|
class="mt-5" />
|
|
<!-- TODO fix styling -->
|
|
<textBlock
|
|
ref="subHeaderTitle"
|
|
:customText="subHeaderTitle"
|
|
justifyText="center"
|
|
:marginTopSizeOverride="4"
|
|
class="text-color--black fs-5 tpa-submit__title--line-height" />
|
|
<textBlock
|
|
id="tpaSubmitSubHeaderBodyOne"
|
|
ref="tpaSubmitSubHeaderBodyOne"
|
|
:customText="subHeaderBodyOne"
|
|
class="small text-color--darker-gray" />
|
|
<textBlock
|
|
id="tpaSubmitSubHeaderBodyTwo"
|
|
ref="tpaSubmitSubHeaderBodyTwo"
|
|
:customText="subHeaderBodyTwo"
|
|
class="mb-4 small text-color--darker-gray" />
|
|
<buttonMain
|
|
ref="buttonMainOne"
|
|
isPrimary
|
|
:buttonText="forwardButtonText"
|
|
loaderColor="white"
|
|
class="w-100 mb-5"
|
|
@clickEvent="forwardButtonAction" />
|
|
<hr class="mb-0" />
|
|
<div id="serviceSummarySection">
|
|
<textBlock
|
|
id="tpaSubmitServiceSummaryTitle"
|
|
ref="tpaSubmitServiceSummaryTitle"
|
|
:customText="serviceSummaryText"
|
|
:marginTopSizeOverride="4"
|
|
class="fw-bold fs-1 lh-lg text-color--black" />
|
|
<div class="px-4 my-3">
|
|
<div
|
|
v-for="(section, index) in sections"
|
|
:key="section.title">
|
|
<hr
|
|
v-if="index !== 0"
|
|
class="my-3" />
|
|
<reviewBlock
|
|
:id="'review-block-' + index"
|
|
:customHeaderText="section.title"
|
|
:lines="section.lines"
|
|
@clickEdit="() => section.onClickEdit()" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="mb-0" />
|
|
<div
|
|
id="submitOrderDetailsSection"
|
|
ref="submitOrderDetailsSection">
|
|
<textBlock
|
|
id="tpaSubmitOrderDetailsTitle"
|
|
ref="tpaSubmitOrderDetailsTitle"
|
|
:customText="orderDetailsTitle"
|
|
:marginTopSizeOverride="4"
|
|
class="fw-bold text-color--black" />
|
|
<textBlock
|
|
id="tpaSubmitOrderDetailsBody"
|
|
ref="tpaSubmitOrderDetailsBody"
|
|
:customText="orderDetailsBody"
|
|
:marginTopSizeOverride="4"
|
|
class="mb-4 px-4 small text-color--darker-gray" />
|
|
<deductibleBox
|
|
ref="deductibleBox"
|
|
class="px-3"
|
|
:value="deductibleBoxValue" />
|
|
</div>
|
|
<siteFooter
|
|
ref="siteFooter"
|
|
class="mt-5"
|
|
:cmsWidgetName="widget.footer"
|
|
:isForwardActionDisabled="!meta.valid"
|
|
@backClicked="navigateBack"
|
|
@forwardClicked="forwardButtonAction" />
|
|
</div>
|
|
</div>
|
|
<contactDetailsDrawer
|
|
ref="contactDetailsDrawer"
|
|
@updateContactDetails="setSections" />
|
|
</div>
|
|
</Form>
|
|
</template>
|
|
<script>
|
|
// Components
|
|
import siteHeader from '@/iss-components/site-header/site-header.vue';
|
|
import buttonMain from '@/ux-components/button-main/button-main.vue';
|
|
import textBlock from '@/digital-components/text-block/text-block.vue';
|
|
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
|
|
import reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
|
|
import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
|
|
import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue';
|
|
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
|
|
|
// Supporting files
|
|
import {
|
|
fetchCmsContentForPage,
|
|
processIfStatements,
|
|
getStringWithCustomValues
|
|
} from '@/helpers/cms-content-helper.js';
|
|
import { Form } from 'vee-validate';
|
|
import BaseFormMixin from '@/mixins/base-form-mixin.js';
|
|
import widgetFields from '@/constants/cms-widget-fields.js';
|
|
import { useMainStore } from '@/store';
|
|
import {
|
|
toTitleCase,
|
|
toDisplayPhoneNumber,
|
|
formatAddress,
|
|
formatAmountInDollars
|
|
} from '@/helpers/text-helper.js';
|
|
import {
|
|
getDamageDisplayContent,
|
|
getLocationAnswer
|
|
} from '@/helpers/damage-review-content-generator.js';
|
|
import damageLocationsSelected from '@/constants/damage-locations-selected.js';
|
|
import { submitWorkOrder } from '@/helpers/order-helper.js';
|
|
import bailoutMessage from '@/constants/bailoutMessage';
|
|
|
|
const VERIFYING_COVERAGE = 'Verifying coverage';
|
|
|
|
export default {
|
|
name: 'tpa-submit',
|
|
components: {
|
|
siteHeader,
|
|
vehicleBanner,
|
|
textBlock,
|
|
buttonMain,
|
|
reviewBlock,
|
|
deductibleBox,
|
|
siteFooter,
|
|
contactDetailsDrawer,
|
|
// eslint-disable-next-line vue/no-reserved-component-names
|
|
Form
|
|
},
|
|
mixins: [BaseFormMixin],
|
|
async beforeRouteEnter(to, from, next) {
|
|
const cmsContent = await fetchCmsContentForPage(to.query.issPage);
|
|
next((vm) => {
|
|
vm.setCmsContent(cmsContent);
|
|
vm.setSections();
|
|
});
|
|
},
|
|
data() {
|
|
const { companyName } = useMainStore().order.serviceLocation.provider;
|
|
return {
|
|
sections: [],
|
|
widget: {
|
|
siteHeader: 'SiteHeaderWidget',
|
|
siteSubHeader: 'SiteSubHeaderWidget',
|
|
serviceSummary: 'ServiceSummaryContent',
|
|
vehicleBanner: 'VehicleBannerWidget',
|
|
subheader: {
|
|
vehicle: 'VehicleSubTitle',
|
|
damage: 'DamageSubTitle',
|
|
shop: 'PreferredShopSubTitle',
|
|
contactInfo: 'ContactDetailsSubTitle'
|
|
},
|
|
damageLocations: 'DamageLocationsWidget',
|
|
orderDetails: 'OrderDetailsContent',
|
|
footer: 'SiteFooterWidget'
|
|
},
|
|
companyName,
|
|
customValueMap: {
|
|
glassShop: companyName
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
subHeaderTitle() {
|
|
return this.getCmsContent(
|
|
this.widget.siteSubHeader,
|
|
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
|
|
);
|
|
},
|
|
subHeaderBodyOne() {
|
|
return this.getCmsContent(
|
|
this.widget.siteSubHeader,
|
|
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
|
|
);
|
|
},
|
|
subHeaderBodyTwo() {
|
|
const cmsContent = this.getCmsContent(
|
|
this.widget.siteSubHeader,
|
|
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
|
|
);
|
|
return getStringWithCustomValues(cmsContent, this.customValueMap);
|
|
},
|
|
serviceSummaryText() {
|
|
return this.getCmsContent(
|
|
this.widget.serviceSummary,
|
|
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
|
);
|
|
},
|
|
orderDetailsTitle() {
|
|
return this.getCmsContent(
|
|
this.widget.orderDetails,
|
|
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
|
|
);
|
|
},
|
|
orderDetailsBody() {
|
|
const orderDetailsBodyText = this.getCmsContent(
|
|
this.widget.orderDetails,
|
|
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
|
|
);
|
|
return processIfStatements(
|
|
orderDetailsBodyText,
|
|
'custom',
|
|
this.getCustomValueFromString
|
|
);
|
|
},
|
|
forwardButtonText() {
|
|
return this.getCmsContent(
|
|
this.widget.footer,
|
|
widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT
|
|
);
|
|
},
|
|
isVerified() {
|
|
return useMainStore().isVerified;
|
|
},
|
|
currentDeductible() {
|
|
return useMainStore().order.currentDeductible;
|
|
},
|
|
deductibleBoxValue() {
|
|
return this.isVerified
|
|
? formatAmountInDollars(this.currentDeductible)
|
|
: VERIFYING_COVERAGE;
|
|
},
|
|
getVehicleLines() {
|
|
const { year, make, model } = useMainStore().order.vehicle;
|
|
const line = [year, make, model]
|
|
.filter((v) => v != null && v !== '')
|
|
.join(' ');
|
|
return [line];
|
|
},
|
|
locationAnswers() {
|
|
return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations);
|
|
},
|
|
driverSideDamageAnswers() {
|
|
const answerContent = getLocationAnswer(
|
|
damageLocationsSelected.DRIVER,
|
|
this.locationAnswers
|
|
);
|
|
return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
|
|
},
|
|
passengerSideDamageAnswers() {
|
|
const answerContent = getLocationAnswer(
|
|
damageLocationsSelected.PASSENGER,
|
|
this.locationAnswers
|
|
);
|
|
return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
|
|
},
|
|
getDamageLines() {
|
|
const { glassToReplace, isRepair } = useMainStore().order.damage;
|
|
return getDamageDisplayContent(
|
|
this.locationAnswers,
|
|
this.driverSideDamageAnswers,
|
|
this.passengerSideDamageAnswers,
|
|
glassToReplace,
|
|
isRepair
|
|
);
|
|
},
|
|
getPreferredShopLines() {
|
|
const { phoneNumber, address } =
|
|
useMainStore().order.serviceLocation.provider;
|
|
const { streetAddress, city, state, zipCode } = address;
|
|
const displayAddress = formatAddress(
|
|
streetAddress,
|
|
null,
|
|
city,
|
|
state,
|
|
zipCode
|
|
);
|
|
const displayPhoneNumber = toDisplayPhoneNumber(phoneNumber);
|
|
return [
|
|
toTitleCase(this.companyName ?? ''),
|
|
displayAddress,
|
|
displayPhoneNumber
|
|
];
|
|
},
|
|
getContactInfoLines() {
|
|
const { firstName, lastName, emailAddress, servicePhone } =
|
|
useMainStore().contactInfo;
|
|
return [
|
|
`${firstName} ${lastName}`,
|
|
emailAddress ?? '',
|
|
toDisplayPhoneNumber(servicePhone)
|
|
];
|
|
}
|
|
},
|
|
methods: {
|
|
setSections() {
|
|
const vehicleScenario = useMainStore().isPolicyVehicle
|
|
? this.navigationScenarios.EDIT_POLICY_VEHICLE
|
|
: this.navigationScenarios.EDIT_VEHICLE;
|
|
this.sections = [
|
|
this.getSection(
|
|
this.widget.subheader.vehicle,
|
|
this.getVehicleLines,
|
|
() => this.navigate(vehicleScenario)
|
|
),
|
|
// eslint-disable-next-line max-len
|
|
this.getSection(
|
|
this.widget.subheader.damage,
|
|
this.getDamageLines,
|
|
() => this.navigate(this.navigationScenarios.EDIT_DAMAGE)
|
|
),
|
|
// eslint-disable-next-line max-len
|
|
this.getSection(
|
|
this.widget.subheader.shop,
|
|
this.getPreferredShopLines,
|
|
() =>
|
|
this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
|
|
),
|
|
// eslint-disable-next-line max-len
|
|
this.getSection(
|
|
this.widget.subheader.contactInfo,
|
|
this.getContactInfoLines,
|
|
this.openContactDetailsModal
|
|
)
|
|
];
|
|
},
|
|
getSection(widgetName, lines, onClick) {
|
|
return {
|
|
title: this.getCmsContent(
|
|
widgetName,
|
|
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
|
),
|
|
lines,
|
|
onClickEdit: onClick
|
|
};
|
|
},
|
|
async forwardButtonAction() {
|
|
try {
|
|
await submitWorkOrder({
|
|
pageNameToLog: 'tpa-submit',
|
|
submitAfterSave: true
|
|
}).then(() => {
|
|
this.navigate(this.navigationScenarios.CLICKED_FORWARD);
|
|
}).catch((submitError) => {
|
|
useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data));
|
|
this.navigate(
|
|
this.navigationScenarios.SAVE_SESSION_FAILED,
|
|
this.$route,
|
|
{ query: { issPage: this.issPageValues.TPA_SUBMIT } }
|
|
);
|
|
});
|
|
} catch (error) {
|
|
console.error(`error: response from submit work order:${error.message}`);
|
|
}
|
|
},
|
|
navigate(scenario) {
|
|
this.$router.navigate(scenario, this.$route);
|
|
},
|
|
getCustomValueFromString(str) {
|
|
switch (str) {
|
|
case 'deductibleAboveZero':
|
|
return this.isVerified && this.currentDeductible !== 0;
|
|
case 'zeroDeductible':
|
|
return this.isVerified && this.currentDeductible === 0;
|
|
case 'verifyingCoverage':
|
|
return !this.isVerified;
|
|
default:
|
|
return null;
|
|
}
|
|
},
|
|
openContactDetailsModal() {
|
|
this.$refs.contactDetailsDrawer.openModal();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.tpa-submit {
|
|
#tpaSubmitOrderDetailsBody {
|
|
p {
|
|
font-size: .875rem;
|
|
}
|
|
}
|
|
.tpa-submit__title--line-height {
|
|
line-height: map-get($spacers, 6);
|
|
}
|
|
|
|
.text-color--darker-gray {
|
|
color: $darker-gray;
|
|
}
|
|
|
|
.text-color--black {
|
|
color: $black;
|
|
}
|
|
|
|
hr {
|
|
opacity: 1;
|
|
color: $gray-350;
|
|
}
|
|
}
|
|
</style>
|