jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP update ISS with desktop views.

Browse source
This commit is contained in:
Bryan Mauger 2024-04-11 14:54:52 -04:00
parent ed91cfa519
commit 8b985690bb
10 changed files with 2156 additions and 1972 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/iss-components/site-footer/footer-image/footer-image.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<div class="footerImage">
<img :src="footerImageURL" />
</div>
</template>
<script>
export default {
name: "footer-image",
props: {
cmsWidgetName: String,
},
computed: {
footerImageURL() {
return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
},
},
};
</script>
<style lang="scss" scoped>
.footerImage {
display: flex;
justify-content: center;
img {
max-width: 375px;
}
}
</style>

15
src/iss-components/site-footer/site-footer.vue
View file

@ -41,14 +41,6 @@
</div> </div>
</div> </div>
</footer> </footer>
<div
v-if="footerImageURL"
id="imgCity"
class="footerImage">
<img
id="siteFooterImage"
:src="footerImageURL" />
</div>
</div> </div>
</template> </template>
@ -61,7 +53,7 @@ export default {
name: 'site-footer', name: 'site-footer',
components: { components: {
textLink, textLink,
buttonMain buttonMain,
}, },
props: { props: {
isForwardActionDisabled: Boolean, isForwardActionDisabled: Boolean,
@ -88,7 +80,10 @@ export default {
: this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText'); : this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
}, },
footerImageURL() { footerImageURL() {
return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL'); //return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
const output = this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
console.log("original image", output);
return output;
}, },
includeFooterImage() { includeFooterImage() {
const currentPageName = this.getPageNameByQueryString(); const currentPageName = this.getPageNameByQueryString();

910
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -3,442 +3,477 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit"
<div class="page-container-grouped-styles"> >
<div class="fade-on-route-transition position-relative"> <div class="container-fluid fade-on-route-transition">
<loadingModal <div class="row justify-content-center">
ref="loadingModal" <div class="col-md-6">
:textSlides="loadingText" /> <loadingModal ref="loadingModal" :textSlides="loadingText" />
<siteHeader <siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" />
ref="siteHeader" </div>
cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="pb-1 mt-4">
<h5
ref="siteSubHeader"
class="text-center text-black"
v-html="coverageStatementSubHeader">
</h5>
<div
ref="explanatoryText"
class="body-text text-center mt-2"
v-html="explanatoryText">
</div>
<div
ref="secondaryText"
class="text-center mt-4 mb-1 fw-bold text-black"
v-html="secondaryText">
</div>
<div
v-if="verifiedDeductible"
class="d-flex justify-content-center cost">
{{ deductibleForDisplay }}
</div>
<div
v-if="isQuoteDisplayed"
class="d-flex justify-content-center cost mb-0">
{{ servicePriceForDisplay }}
</div>
<div
v-if="verifiedITAC"
class="d-flex justify-content-center mb-4 deductible-text">
{{ deductibleText }}&nbsp;
<span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
</div>
<alert
v-if="verifiedITAC"
ref="verifiedITACAlert"
class="mb-5"
cmsWidgetName="VerifiedITACAlert"
:manualHeadline="verifiedItacAlertHeader"
:manualCopy="verifiedItacAlertBody"
alertClass="alert-success"
:isDismissible="false">
</alert>
<div
class="fw-bold text-black mt-5 mb-2"
v-html="nextStepsHeader">
</div>
<div
class="body-text"
v-html="nextStepsBody">
</div>
<buttonQuestion
v-if="isQuoteDisplayed"
v-model="selectedProvider"
cmsWidgetName="ServiceProviderQuestion"
:questionText="serviceProviderQuestionText"
:answers="serviceProviderQuestionAnswers"
groupName="ServiceProviderQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired">
</buttonQuestion>
<text-block
v-if="isQuoteDisplayed"
cmsWidgetName="DisclaimerWidget"
typeStyle="caption" />
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBackByVehicleQuestions"
@forwardClicked="navigateForward" />
</div>
</div>
</div>
</div>
</div>
</div> </div>
<recalModal <div class="row justify-content-center">
ref="RecalModal" <div class="col-md-6 col-xl-4">
cmsWidgetName="RecalModal" /> <h5
<contentGroupModal ref="siteSubHeader"
ref="DeductibleModal" class="text-center text-black"
cmsWidgetName="DeductibleModal" v-html="coverageStatementSubHeader"
class="deductible-modal" /> ></h5>
<div
ref="explanatoryText"
class="body-text text-center mt-2"
v-html="explanatoryText"
></div>
<div
ref="secondaryText"
class="text-center mt-4 mb-1 fw-bold text-black"
v-html="secondaryText"
></div>
<div
v-if="verifiedDeductible"
class="d-flex justify-content-center cost"
>
{{ deductibleForDisplay }}
</div>
<div
v-if="isQuoteDisplayed"
class="d-flex justify-content-center cost mb-0"
>
{{ servicePriceForDisplay }}
</div>
<div
v-if="verifiedITAC"
class="d-flex justify-content-center mb-4 deductible-text"
>
{{ deductibleText }}&nbsp;
<span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
</div>
<alert
v-if="verifiedITAC"
ref="verifiedITACAlert"
class="mb-5"
cmsWidgetName="VerifiedITACAlert"
:manualHeadline="verifiedItacAlertHeader"
:manualCopy="verifiedItacAlertBody"
alertClass="alert-success"
:isDismissible="false"
>
</alert>
<div
class="fw-bold text-black mt-5 mb-2"
v-html="nextStepsHeader"
></div>
<div class="body-text" v-html="nextStepsBody"></div>
<buttonQuestion
v-if="isQuoteDisplayed"
v-model="selectedProvider"
cmsWidgetName="ServiceProviderQuestion"
:questionText="serviceProviderQuestionText"
:answers="serviceProviderQuestionAnswers"
groupName="ServiceProviderQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired"
>
</buttonQuestion>
<text-block
v-if="isQuoteDisplayed"
cmsWidgetName="DisclaimerWidget"
typeStyle="caption"
/>
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBackByVehicleQuestions"
@forwardClicked="navigateForward"
/>
</div>
</div>
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
<contentGroupModal
ref="DeductibleModal"
cmsWidgetName="DeductibleModal"
class="deductible-modal"
/>
</Form> </Form>
</template> </template>
<script> <script>
// Import Component // Import Component
import { Form } from 'vee-validate'; import { Form } from "vee-validate";
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from "@/iss-components/site-footer/site-footer.vue";
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from "@/iss-components/site-header/site-header.vue";
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue'; import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue";
import alert from '@/ux-components/alert/alert.vue'; import alert from "@/ux-components/alert/alert.vue";
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue'; import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal.vue";
import buttonQuestion from '@/digital-components/button-question/button-question.vue'; import buttonQuestion from "@/digital-components/button-question/button-question.vue";
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue'; import loadingModal from "@/iss-components/loading-modal/loading-modal.vue";
import textBlock from '@/digital-components/text-block/text-block.vue'; import textBlock from "@/digital-components/text-block/text-block.vue";
// Import Supporting Files // Import Supporting Files
import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper.js'; import {
import settleAllPromises from '@/helpers/layout-helper.js'; fetchCmsContentForPage,
import { getDamageString } from '@/helpers/damage-helper.js'; setupModalLinks,
import { useMainStore } from '@/store/index.js'; processIfStatements,
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js'; } from "@/helpers/cms-content-helper.js";
import globalRules from '@/constants/global-rules.js'; import settleAllPromises from "@/helpers/layout-helper.js";
import baseFormMixin from '@/mixins/base-form-mixin.js'; import { getDamageString } from "@/helpers/damage-helper.js";
import navigationScenarios from '@/router/router-constants/navigation-scenarios.js'; import { useMainStore } from "@/store/index.js";
import issPageValues from '@/router/router-constants/issPage-values'; import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin.js";
import bailoutMessage from '@/constants/bailoutMessage'; import globalRules from "@/constants/global-rules.js";
import coverageStatuses from '@/constants/coverage-statuses'; import baseFormMixin from "@/mixins/base-form-mixin.js";
import widgetFields from '@/constants/cms-widget-fields.js'; import navigationScenarios from "@/router/router-constants/navigation-scenarios.js";
import getPriceOfLineItems from '@/helpers/price-calculator.js'; import issPageValues from "@/router/router-constants/issPage-values";
import { formatAmountInDollars } from '@/helpers/text-helper.js'; import bailoutMessage from "@/constants/bailoutMessage";
import coverageStatuses from "@/constants/coverage-statuses";
import widgetFields from "@/constants/cms-widget-fields.js";
import getPriceOfLineItems from "@/helpers/price-calculator.js";
import { formatAmountInDollars } from "@/helpers/text-helper.js";
const SAFELITE_PROVIDER = 'Safelite'; const SAFELITE_PROVIDER = "Safelite";
export default { export default {
name: 'coverage-statement', name: "coverage-statement",
components: { components: {
siteFooter, siteFooter,
siteHeader, siteHeader,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
recalModal, recalModal,
alert, alert,
contentGroupModal, contentGroupModal,
buttonQuestion, buttonQuestion,
loadingModal, loadingModal,
textBlock textBlock,
}, },
mixins: [baseFormMixin, vehicleQuestionsMixin], mixins: [baseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage); const cmsContentPromise = fetchCmsContentForPage(to?.query?.issPage);
const supportingItemsPromise = await useMainStore().getSupportingItems(); const supportingItemsPromise = await useMainStore().getSupportingItems();
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: "cmsContent",
promise: cmsContentPromise promise: cmsContentPromise,
}, },
{ {
resultKey: 'supportingItems', resultKey: "supportingItems",
promise: supportingItemsPromise promise: supportingItemsPromise,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
const clonedGlassParts = useMainStore().lineItems.glassParts const clonedGlassParts = useMainStore().lineItems.glassParts
? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts)) ? JSON.parse(JSON.stringify(useMainStore().lineItems.glassParts))
: []; : [];
const availableLineItems = [ const availableLineItems = [
...(resultMap.supportingItems ?? []), ...(resultMap.supportingItems ?? []),
...(clonedGlassParts ?? []) ...(clonedGlassParts ?? []),
]; ];
let hasBailedOut = false; let hasBailedOut = false;
let pricingResults = []; let pricingResults = [];
if (useMainStore().policy.policyLookupSuccessful && useMainStore().vehicle.policyVehicleId >= 0) { if (
await useMainStore().getFinalDeductible(); useMainStore().policy.policyLookupSuccessful &&
pricingResults = await useMainStore().getPriceOrderItems(availableLineItems) useMainStore().vehicle.policyVehicleId >= 0
.catch((err) => { ) {
useMainStore().setBailout(bailoutMessage.pricingResponseError( await useMainStore().getFinalDeductible();
availableLineItems.map((li) => li.partNumber), pricingResults = await useMainStore()
{ code: err.code, message: err.message, data: err.data } .getPriceOrderItems(availableLineItems)
)); .catch((err) => {
hasBailedOut = true; useMainStore().setBailout(
next(`/?issPage=${issPageValues.BAILOUT_PAGE}`); bailoutMessage.pricingResponseError(
}); availableLineItems.map((li) => li.partNumber),
} { code: err.code, message: err.message, data: err.data }
)
if (!hasBailedOut) { );
// Call the "next" function to complete the transition to this page. hasBailedOut = true;
next((vm) => { next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
vm.setCmsContent(resultMap.cmsContent); });
vm.setSupportingItems(resultMap.supportingItems);
// eslint-disable-next-line no-param-reassign
vm.setBaseServiceLineItems(pricingResults);
vm.$refs.loadingModal.showModal();
vm.initializeComponent();
if (!vm.unverified) {
useMainStore().disableKeyFields();
}
});
}
},
data() {
const { isRepair } = useMainStore().damage;
const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
return {
isRepair,
policyLookupSuccessful,
isNoComp: noCoverage ?? false,
baseServiceLineItems: [],
selectedProvider: '',
deductibleText: 'Your deductible is',
// TODO update when design team gives appropriate text
loadingText: [
'Connecting to your insurance company',
'Nearly there',
'Finishing up'
],
rules: {
selectionRequired: globalRules.OPTION_REQUIRED
},
supportingItems: null,
widget: {
subheader: 'SiteSubHeaderWidget',
verifiedItacAlert: 'VerifiedITACAlert',
explanatoryText: 'ExplanatoryTextWidget',
nextStep: 'NextStepsWidget',
serviceProviderQuestion: 'ServiceProviderQuestion'
}
};
},
computed: {
coverageStatementSubHeader() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.subheader,
widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
);
},
verifiedItacAlertHeader() {
return this.getCmsContent(
this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.HEADLINE_TEXT
);
},
verifiedItacAlertBody() {
return this.getCmsContent(
this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.BODY_TEXT
)?.replaceAll('{custom:costSavings}', this.itacCostSavingsForDisplay);
},
secondaryText() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.subheader,
widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
);
},
explanatoryText() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.explanatoryText,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
},
nextStepsHeader() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.nextStep,
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
);
},
nextStepsBody() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.nextStep,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
)?.replaceAll('{custom:damage}', this.damageText);
},
damageText() {
const damageString = getDamageString();
return damageString === 'match' ? '' : damageString;
},
deductibleValue() {
return useMainStore().order.currentDeductible;
},
deductibleForDisplay() {
return formatAmountInDollars(this.deductibleValue);
},
registerClaimSuccessful() {
return useMainStore().payment.insuranceCoverage.isVerified;
},
verifiedNoComp() {
return this.policyLookupSuccessful && this.isNoComp;
},
verifiedITAC() {
return this.policyLookupSuccessful
&& !this.isNoComp
&& this.deductibleValue > this.totalServicePrice;
},
coveredAndServicePriceAboveOrEqualDeductible() {
return !this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue;
},
verifiedDeductible() {
return useMainStore().isClaimRegistrationRequired
? this.registerClaimSuccessful
&& this.coveredAndServicePriceAboveOrEqualDeductible
&& this.deductibleValue !== null
: this.policyLookupSuccessful
&& this.coveredAndServicePriceAboveOrEqualDeductible;
},
unverified() {
return !this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp;
},
isADAS() {
const parts = useMainStore().order.lineItems.glassParts;
return parts !== null && !!parts.find((part) => part.requiresRecalibration);
},
totalServicePrice() {
return getPriceOfLineItems(this.baseServiceLineItems);
},
servicePriceForDisplay() {
return formatAmountInDollars(this.totalServicePrice);
},
itacCostSavings() {
return this.deductibleValue - this.totalServicePrice;
},
itacCostSavingsForDisplay() {
return formatAmountInDollars(this.itacCostSavings);
},
serviceProviderQuestionText() {
return this.getCmsContent(
this.widget.serviceProviderQuestion,
widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
);
},
serviceProviderQuestionAnswers() {
return this.getCmsContent(
this.widget.serviceProviderQuestion,
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
);
},
isQuoteDisplayed() {
return this.verifiedITAC || this.verifiedNoComp;
},
shouldRegisterClaim() {
return this.policyLookupSuccessful
&& useMainStore().vehicle.policyVehicleId != null
&& useMainStore().vehicle.policyVehicleId >= 0
&& useMainStore().isClaimRegistrationRequired
&& !useMainStore().isClaimAlreadyRegistered
&& (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC);
}
},
watch: {
selectedProvider() {
const buttonText = this.selectedProvider === SAFELITE_PROVIDER ? 'Continue with Safelite' : 'Safelite';
this.$refs.siteFooter.updateButtonText(buttonText);
},
nextStepsBody(newValue, oldValue) {
if (newValue !== oldValue) {
setupModalLinks(this, 'RecalModal');
setupModalLinks(this, 'DeductibleModal');
}
}
},
mounted() {
setupModalLinks(this);
},
methods: {
arePagePrerequisitesValid() {
return !!useMainStore().vehicle.carId;
},
async initializeComponent() {
useMainStore().updatePolicyITACFlag(this.verifiedITAC);
const coverageStatus = this.verifiedITAC || this.verifiedNoComp
? coverageStatuses.VERIFIED
: coverageStatuses.PENDING;
useMainStore().updateCoverageStatus(coverageStatus);
if (this.shouldRegisterClaim) {
await useMainStore().registerClaim()?.catch(() => {});
}
this.$refs.loadingModal.hideModal();
},
async navigateForward() {
if (this.unverified || this.verifiedDeductible) {
useMainStore().updateSupportingItems(this.supportingItems);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
} else if (this.verifiedITAC || this.verifiedNoComp) {
useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
if (this.selectedProvider === SAFELITE_PROVIDER) {
useMainStore().updateSupportingItems(this.supportingItems);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
} else {
useMainStore().setBailout(bailoutMessage.RequestCallback());
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
}
} else {
useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
}
},
navigateWithScenario(scenario) {
this.$router.navigate(scenario, this.$route);
},
getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
const rawText = this.getCmsContent(widgetName, widgetField);
return processIfStatements(rawText, 'custom', this.getCustomValueFromString);
},
getCustomValueFromString(str) {
switch (str) {
case 'coverageUnverified':
return this.unverified;
case 'verifiedDeductible':
return this.verifiedDeductible;
case 'verifiedITAC':
return this.verifiedITAC;
case 'verifiedNoComp':
return this.verifiedNoComp;
case 'ADASReplace':
return !this.isRepair && this.isADAS;
case 'nonADASReplace':
return !this.isRepair && !this.isADAS;
case 'nonADASRepair':
return this.isRepair;
case 'deductibleOverZero':
return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
case 'isDeductibleZero':
return this.verifiedDeductible && this.deductibleValue === 0;
default:
return null;
}
},
setSupportingItems(newSupportingItems) {
this.supportingItems = newSupportingItems;
},
setBaseServiceLineItems(lineItems) {
this.baseServiceLineItems = lineItems;
}
} }
if (!hasBailedOut) {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.setSupportingItems(resultMap.supportingItems);
// eslint-disable-next-line no-param-reassign
vm.setBaseServiceLineItems(pricingResults);
vm.$refs.loadingModal.showModal();
vm.initializeComponent();
if (!vm.unverified) {
useMainStore().disableKeyFields();
}
});
}
},
data() {
const { isRepair } = useMainStore().damage;
const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
return {
isRepair,
policyLookupSuccessful,
isNoComp: noCoverage ?? false,
baseServiceLineItems: [],
selectedProvider: "",
deductibleText: "Your deductible is",
// TODO update when design team gives appropriate text
loadingText: [
"Connecting to your insurance company",
"Nearly there",
"Finishing up",
],
rules: {
selectionRequired: globalRules.OPTION_REQUIRED,
},
supportingItems: null,
widget: {
subheader: "SiteSubHeaderWidget",
verifiedItacAlert: "VerifiedITACAlert",
explanatoryText: "ExplanatoryTextWidget",
nextStep: "NextStepsWidget",
serviceProviderQuestion: "ServiceProviderQuestion",
},
};
},
computed: {
coverageStatementSubHeader() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.subheader,
widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
);
},
verifiedItacAlertHeader() {
return this.getCmsContent(
this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.HEADLINE_TEXT
);
},
verifiedItacAlertBody() {
return this.getCmsContent(
this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.BODY_TEXT
)?.replaceAll("{custom:costSavings}", this.itacCostSavingsForDisplay);
},
secondaryText() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.subheader,
widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
);
},
explanatoryText() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.explanatoryText,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
},
nextStepsHeader() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.nextStep,
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
);
},
nextStepsBody() {
return this.getTextFromCmsWithCustomIfStatements(
this.widget.nextStep,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
)?.replaceAll("{custom:damage}", this.damageText);
},
damageText() {
const damageString = getDamageString();
return damageString === "match" ? "" : damageString;
},
deductibleValue() {
return useMainStore().order.currentDeductible;
},
deductibleForDisplay() {
return formatAmountInDollars(this.deductibleValue);
},
registerClaimSuccessful() {
return useMainStore().payment.insuranceCoverage.isVerified;
},
verifiedNoComp() {
return this.policyLookupSuccessful && this.isNoComp;
},
verifiedITAC() {
return (
this.policyLookupSuccessful &&
!this.isNoComp &&
this.deductibleValue > this.totalServicePrice
);
},
coveredAndServicePriceAboveOrEqualDeductible() {
return (
!this.verifiedNoComp && this.totalServicePrice >= this.deductibleValue
);
},
verifiedDeductible() {
return useMainStore().isClaimRegistrationRequired
? this.registerClaimSuccessful &&
this.coveredAndServicePriceAboveOrEqualDeductible &&
this.deductibleValue !== null
: this.policyLookupSuccessful &&
this.coveredAndServicePriceAboveOrEqualDeductible;
},
unverified() {
return (
!this.verifiedDeductible && !this.verifiedITAC && !this.verifiedNoComp
);
},
isADAS() {
const parts = useMainStore().order.lineItems.glassParts;
return (
parts !== null && !!parts.find((part) => part.requiresRecalibration)
);
},
totalServicePrice() {
return getPriceOfLineItems(this.baseServiceLineItems);
},
servicePriceForDisplay() {
return formatAmountInDollars(this.totalServicePrice);
},
itacCostSavings() {
return this.deductibleValue - this.totalServicePrice;
},
itacCostSavingsForDisplay() {
return formatAmountInDollars(this.itacCostSavings);
},
serviceProviderQuestionText() {
return this.getCmsContent(
this.widget.serviceProviderQuestion,
widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
);
},
serviceProviderQuestionAnswers() {
return this.getCmsContent(
this.widget.serviceProviderQuestion,
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
);
},
isQuoteDisplayed() {
return this.verifiedITAC || this.verifiedNoComp;
},
shouldRegisterClaim() {
return (
this.policyLookupSuccessful &&
useMainStore().vehicle.policyVehicleId != null &&
useMainStore().vehicle.policyVehicleId >= 0 &&
useMainStore().isClaimRegistrationRequired &&
!useMainStore().isClaimAlreadyRegistered &&
(this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)
);
},
},
watch: {
selectedProvider() {
const buttonText =
this.selectedProvider === SAFELITE_PROVIDER
? "Continue with Safelite"
: "Safelite";
this.$refs.siteFooter.updateButtonText(buttonText);
},
nextStepsBody(newValue, oldValue) {
if (newValue !== oldValue) {
setupModalLinks(this, "RecalModal");
setupModalLinks(this, "DeductibleModal");
}
},
},
mounted() {
setupModalLinks(this);
},
methods: {
arePagePrerequisitesValid() {
return !!useMainStore().vehicle.carId;
},
async initializeComponent() {
useMainStore().updatePolicyITACFlag(this.verifiedITAC);
const coverageStatus =
this.verifiedITAC || this.verifiedNoComp
? coverageStatuses.VERIFIED
: coverageStatuses.PENDING;
useMainStore().updateCoverageStatus(coverageStatus);
if (this.shouldRegisterClaim) {
await useMainStore()
.registerClaim()
?.catch(() => {});
}
this.$refs.loadingModal.hideModal();
},
async navigateForward() {
if (this.unverified || this.verifiedDeductible) {
useMainStore().updateSupportingItems(this.supportingItems);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
} else if (this.verifiedITAC || this.verifiedNoComp) {
useMainStore().updateIsSafeliteProvider(
this.selectedProvider === SAFELITE_PROVIDER
);
if (this.selectedProvider === SAFELITE_PROVIDER) {
useMainStore().updateSupportingItems(this.supportingItems);
this.navigateWithScenario(
navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE
);
} else {
useMainStore().setBailout(bailoutMessage.RequestCallback());
this.navigateWithScenario(
navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
);
}
} else {
useMainStore().setBailout(
bailoutMessage.coverageStatementInvalidState()
);
this.navigateWithScenario(
navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE
);
}
},
navigateWithScenario(scenario) {
this.$router.navigate(scenario, this.$route);
},
getTextFromCmsWithCustomIfStatements(widgetName, widgetField) {
const rawText = this.getCmsContent(widgetName, widgetField);
return processIfStatements(
rawText,
"custom",
this.getCustomValueFromString
);
},
getCustomValueFromString(str) {
switch (str) {
case "coverageUnverified":
return this.unverified;
case "verifiedDeductible":
return this.verifiedDeductible;
case "verifiedITAC":
return this.verifiedITAC;
case "verifiedNoComp":
return this.verifiedNoComp;
case "ADASReplace":
return !this.isRepair && this.isADAS;
case "nonADASReplace":
return !this.isRepair && !this.isADAS;
case "nonADASRepair":
return this.isRepair;
case "deductibleOverZero":
return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
case "isDeductibleZero":
return this.verifiedDeductible && this.deductibleValue === 0;
default:
return null;
}
},
setSupportingItems(newSupportingItems) {
this.supportingItems = newSupportingItems;
},
setBaseServiceLineItems(lineItems) {
this.baseServiceLineItems = lineItems;
},
},
}; };
</script> </script>
@ -451,26 +486,26 @@ export default {
} }
.deductible-text { .deductible-text {
line-height: 1.5rem; line-height: 1.5rem;
} }
:deep p { :deep p {
line-height: 1.5rem; line-height: 1.5rem;
font-size: 0.875rem; font-size: 0.875rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
strong { strong {
color: $black; color: $black;
} }
} }
:deep .question-text { :deep .question-text {
margin-top: 1.5rem; margin-top: 1.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.5rem; line-height: 1.5rem;
& > span { & > span {
text-align: left; text-align: left;
} }
} }
:deep .deductible-modal { :deep .deductible-modal {
@ -490,7 +525,6 @@ export default {
} }
} }
.modal { .modal {
overflow: hidden; overflow: hidden;
} }
</style> </style>

387
src/layouts/duplicate-check/duplicate-check.vue
View file

@ -1,210 +1,235 @@
<template> <template>
<Form <Form
ref="duplicate-check-form" ref="duplicate-check-form"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit"
<div class="page-container-grouped-styles"> >
<div class="fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<siteHeader <div class="row justify-content-center">
ref="siteHeader" <div class="col-md-6">
:cmsWidgetName="widget.siteHeader" /> <siteHeader ref="siteHeader" :cmsWidgetName="widget.siteHeader" />
<div class="container-fluid px-6">
<siteSubHeader
id="sub-header"
ref="siteSubHeader"
class="mt-5 duplicate-check-subheader"
:cmsWidgetName="widget.siteSubHeader" />
<buttonQuestion
ref="buttonQuestion"
v-model="selectedAnswer"
class="duplicate-check-question"
:cmsWidgetName="widget.existingOrNewQuestion"
:questionText="questionText"
:answers="answers"
groupName="existingOrNewQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired">
</buttonQuestion>
<siteFooter
ref="siteFooter"
class="my-5"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="navigateBack" />
</div>
</div>
</div> </div>
</Form> </div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader
id="sub-header"
ref="siteSubHeader"
class="mt-5 duplicate-check-subheader"
:cmsWidgetName="widget.siteSubHeader"
/>
<buttonQuestion
ref="buttonQuestion"
v-model="selectedAnswer"
class="duplicate-check-question"
:cmsWidgetName="widget.existingOrNewQuestion"
:questionText="questionText"
:answers="answers"
groupName="existingOrNewQuestionOption"
buttonTypeString="listButton"
isRequired
:validationRules="rules.selectionRequired"
/>
<siteFooter
ref="siteFooter"
class="my-5"
:cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction"
@backClicked="navigateBack"
/>
</div>
</div>
</div>
</Form>
</template> </template>
<script> <script>
// Components // Components
import { Form } from 'vee-validate'; import { Form } from "vee-validate";
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from "@/iss-components/site-header/site-header.vue";
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from "@/iss-components/site-footer/site-footer.vue";
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
import buttonQuestion from '@/digital-components/button-question/button-question.vue'; import buttonQuestion from "@/digital-components/button-question/button-question.vue";
// Supporting files // Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js'; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from "@/mixins/base-form-mixin.js";
import { useMainStore } from '@/store/index.js'; import { useMainStore } from "@/store/index.js";
import globalRules from '@/constants/global-rules.js'; import globalRules from "@/constants/global-rules.js";
import { toTitleCase } from '@/helpers/text-helper.js'; import { toTitleCase } from "@/helpers/text-helper.js";
export default { export default {
name: 'duplicate-check', name: "duplicate-check",
components: { components: {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
buttonQuestion, buttonQuestion,
siteFooter, siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form Form,
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
const cmsContent = await fetchCmsContentForPage(to.query.issPage); const cmsContent = await fetchCmsContentForPage(to.query.issPage);
next((vm) => { next((vm) => {
vm.setCmsContent(cmsContent); vm.setCmsContent(cmsContent);
}); });
},
data() {
return {
selectedAnswer: null,
widget: {
siteHeader: "SiteHeaderWidget",
siteSubHeader: "SiteSubHeaderWidget",
existingOrNewQuestion: "ExistingOrNewQuestion",
siteFooter: "SiteFooterWidget",
},
rules: {
selectionRequired: globalRules.OPTION_REQUIRED,
},
};
},
computed: {
questionText() {
return this.getCmsContent(
this.widget.existingOrNewQuestion,
"QuestionText"
);
}, },
data() { answersFromCms() {
return { return (
selectedAnswer: null, this.getCmsContent(this.widget.existingOrNewQuestion, "Answers") ?? []
widget: { );
siteHeader: 'SiteHeaderWidget',
siteSubHeader: 'SiteSubHeaderWidget',
existingOrNewQuestion: 'ExistingOrNewQuestion',
siteFooter: 'SiteFooterWidget'
},
rules: {
selectionRequired: globalRules.OPTION_REQUIRED
}
};
}, },
computed: { getNewOrderSelectionName() {
questionText() { return this.answersFromCms?.[0]?.Name ?? "";
return this.getCmsContent(this.widget.existingOrNewQuestion, 'QuestionText');
},
answersFromCms() {
return this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? [];
},
getNewOrderSelectionName() {
return this.answersFromCms?.[0]?.Name ?? '';
},
duplicateOrders() {
const duplicateOrderText = 'Finish Existing Claim';
const orders = useMainStore().applicationUser.duplicateOrders;
return orders?.map((o) => {
const vehicle = !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
: null;
const dateOfLoss = o.responseDate == null ? '' : new Date(o.responseDate).toLocaleDateString();
const subtext = vehicle && o.responseDate
? `${vehicle}, ${dateOfLoss}`
: (vehicle ?? '').concat(dateOfLoss);
return {
Text: duplicateOrderText,
Name: o.referralNumber,
SubText: toTitleCase(subtext),
value: o
};
}) ?? [];
},
answers() {
return [...this.duplicateOrders, ...this.answersFromCms];
}
}, },
methods: { duplicateOrders() {
/** const duplicateOrderText = "Finish Existing Claim";
* @summary Steps to perform when forward button clicked. const orders = useMainStore().applicationUser.duplicateOrders;
*/ return (
async forwardButtonAction() { orders?.map((o) => {
if (this.selectedAnswer !== null && typeof this.selectedAnswer === 'object') { const vehicle =
await useMainStore().loadSession(this.selectedAnswer) !!o.vehicleYear && !!o.vehicleMake && !!o.vehicleModel
.catch(() => {}) ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
.finally(() => { : null;
this.navigateForward();
});
return;
}
const dateOfLoss =
o.responseDate == null
? ""
: new Date(o.responseDate).toLocaleDateString();
const subtext =
vehicle && o.responseDate
? `${vehicle}, ${dateOfLoss}`
: (vehicle ?? "").concat(dateOfLoss);
return {
Text: duplicateOrderText,
Name: o.referralNumber,
SubText: toTitleCase(subtext),
value: o,
};
}) ?? []
);
},
answers() {
return [...this.duplicateOrders, ...this.answersFromCms];
},
},
methods: {
/**
* @summary Steps to perform when forward button clicked.
*/
async forwardButtonAction() {
if (
this.selectedAnswer !== null &&
typeof this.selectedAnswer === "object"
) {
await useMainStore()
.loadSession(this.selectedAnswer)
.catch(() => {})
.finally(() => {
this.navigateForward(); this.navigateForward();
}, });
navigateForward() { return;
if (!this.mainStore.order.policy.policyLookupSuccessful) { }
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
this.$route
);
return;
}
const policyVehicles = useMainStore().order.policy.vehicles ?? []; this.navigateForward();
if (!this.mainStore.order.loadedFromDupeCheck) { },
if (policyVehicles.length !== 0) { navigateForward() {
this.$router.navigate( if (!this.mainStore.order.policy.policyLookupSuccessful) {
this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES, this.$router.navigate(
this.$route this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
); this.$route
} else { );
this.$router.navigate( return;
this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES, }
this.$route
);
}
return;
}
if (this.mainStore.order.vehicle.vin) { const policyVehicles = useMainStore().order.policy.vehicles ?? [];
this.$router.navigate( if (!this.mainStore.order.loadedFromDupeCheck) {
this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE, if (policyVehicles.length !== 0) {
this.$route this.$router.navigate(
); this.navigationScenarios
} else if (policyVehicles.length !== 0) { .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
this.$router.navigate( this.$route
this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE, );
this.$route } else {
); this.$router.navigate(
} else { this.navigationScenarios
this.$router.navigate( .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
this.navigationScenarios.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES, this.$route
this.$route );
);
}
} }
} return;
}
if (this.mainStore.order.vehicle.vin) {
this.$router.navigate(
this.navigationScenarios
.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE,
this.$route
);
} else if (policyVehicles.length !== 0) {
this.$router.navigate(
this.navigationScenarios
.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE,
this.$route
);
} else {
this.$router.navigate(
this.navigationScenarios
.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES,
this.$route
);
}
},
},
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.duplicate-check-subheader { .duplicate-check-subheader {
.subheader-secondary { .subheader-secondary {
margin-top: map-get($spacers, 2); margin-top: map-get($spacers, 2);
} }
p { p {
span { span {
font-size: $h6-font-size; font-size: $h6-font-size;
}
} }
}
} }
.duplicate-check-question { .duplicate-check-question {
.question-text { .question-text {
justify-content: left; justify-content: left;
display: inline-flex !important; display: inline-flex !important;
margin-top: map-get($spacers, 4); margin-top: map-get($spacers, 4);
margin-bottom: map-get($spacers, 2); margin-bottom: map-get($spacers, 2);
} }
.form-test-error{ .form-test-error {
margin-top: 0 !important; margin-top: 0 !important;
} }
} }
</style> </style>

532
src/layouts/policy-vehicles/policy-vehicles.vue
View file

@ -1,278 +1,298 @@
<template> <template>
<Form <Form
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit"
<div class="page-container-grouped-styles"> >
<div class="fade-on-route-transition position-relative"> <div class="container-fluid fade-on-route-transition">
<siteHeader <div class="row justify-content-center">
class="mb-2 header" <div class="col-md-6">
cmsWidgetName="SiteHeaderWidget" /> <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="container-fluid pb-2 px-5">
<div class="row">
<div class="col">
<div class="select-car-form rounded text-center">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-2 mb-4" />
<policyVehiclesQuestion
v-model="selectedVehicleVin"
class="px-4"
cmsWidgetName="PolicyVehiclesQuestion"
:vehicles="VehiclesForQuestions"
:validationRules="rules.optionRequired" />
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</Form> </div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="select-car-form rounded text-center">
<vehicleBanner
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-2 mb-4"
/>
<policyVehiclesQuestion
v-model="selectedVehicleVin"
cmsWidgetName="PolicyVehiclesQuestion"
:vehicles="VehiclesForQuestions"
:validationRules="rules.optionRequired"
/>
<siteFooter
ref="siteFooter"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction"
/>
</div>
</div>
</div>
</div>
</Form>
</template> </template>
<script> <script>
// Components // Components
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from "@/iss-components/site-header/site-header.vue";
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from "@/iss-components/site-footer/site-footer.vue";
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue'; import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
import policyVehiclesQuestion from '@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue'; import policyVehiclesQuestion from "@/layouts/policy-vehicles/policy-vehicles-question/policy-vehicles-question.vue";
// Supporting files // Supporting files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper.js'; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper.js";
import { Form } from 'vee-validate'; import { Form } from "vee-validate";
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from "@/mixins/base-form-mixin.js";
import vehicleSelectionOptions from '@/constants/vehicle-selection-options.js'; import vehicleSelectionOptions from "@/constants/vehicle-selection-options.js";
import endorsementOptions from '@/constants/endorsement-options.js'; import endorsementOptions from "@/constants/endorsement-options.js";
import globalRules from '@/constants/global-rules.js'; import globalRules from "@/constants/global-rules.js";
import { useMainStore } from '@/store/index.js'; import { useMainStore } from "@/store/index.js";
import bailoutMessage from '@/constants/bailoutMessage'; import bailoutMessage from "@/constants/bailoutMessage";
import { import {
deductibleForSelectedVehicle, endorsementsForSelectedVehicle, deductibleForSelectedVehicle,
noCoverageForSelectedVehicle, endorsementsForSelectedVehicle,
repairWaivedForSelectedVehicle noCoverageForSelectedVehicle,
} from '@/helpers/policy-vehicle-helper'; repairWaivedForSelectedVehicle,
} from "@/helpers/policy-vehicle-helper";
export default { export default {
name: 'policy-vehicles', name: "policy-vehicles",
components: { components: {
siteHeader, siteHeader,
siteFooter, siteFooter,
vehicleBanner, vehicleBanner,
policyVehiclesQuestion, policyVehiclesQuestion,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form Form,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
next((vm) => {
vm.setCmsContent(cmsContentPromise);
});
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
const policyVehicles = useMainStore().order.policy.vehicles;
return {
policyVehicles,
selectedVehicleVin: "",
selectedPolicyVehicle: null,
displayGeneric: true,
policyVinFound: true,
rules: {
optionRequired: globalRules.OPTION_REQUIRED,
},
};
},
computed: {
VehiclesForQuestions() {
// Map API result data, to address-vehicles data structure
const vehicles = this.policyVehicles;
const mappedData =
vehicles?.map((v) => {
const maskSymbol = "X";
const vinStart = maskSymbol.repeat(v.vin.length - 6);
const vinEnd = v.vin.substring(v.vin.length - 6);
return {
vin: v.vin,
vehicle: v,
Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
Name: v.vin,
SubText: `VIN ${vinStart}${vinEnd}`,
};
}) ?? [];
return mappedData;
}, },
mixins: [BaseFormMixin], noCoverageForSelectedVehicle() {
async beforeRouteEnter(to, from, next) { return noCoverageForSelectedVehicle(this.selectedPolicyVehicle);
const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage); },
next((vm) => { deductibleForSelectedVehicle() {
vm.setCmsContent(cmsContentPromise); return deductibleForSelectedVehicle(this.selectedPolicyVehicle);
},
endorsementsForSelectedVehicle() {
return endorsementsForSelectedVehicle(this.selectedPolicyVehicle);
},
repairWaivedForSelectedVehicle() {
return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
},
selectedVehicle() {
const vehicle = this.mainStore.lookupVehicleByVin(
this.selectedVehicleVin
);
return vehicle;
},
},
watch: {
async selectedVehicleVin(value) {
if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
// clear previously selected vehicle and image
this.mainStore.resetVehicleState();
this.displayGeneric = true;
this.selectedPolicyVehicle = null;
} else {
// get vehicle details from selected VIN
const vehicle = await this.lookupVehicleByVin(value);
// handle error in case vehicle info doesn't come back for selected VIN
if (vehicle?.error === true) {
this.mainStore.resetVehicleState();
this.displayGeneric = true;
this.selectedPolicyVehicle = null;
return;
}
if (vehicle) {
// save selected vehicle to the store
this.mainStore.updateVehicle(vehicle.data);
this.displayGeneric = false;
this.selectedPolicyVehicle = this.policyVehicles.find(
(p) => p.vin === value
);
}
}
},
},
beforeMount() {
if (this.mainStore.order.vehicle.vin) {
this.selectedVehicleVin = this.mainStore.order.vehicle.vin;
} else if (this.policyVehicles?.length === 1) {
this.selectedVehicleVin = this.policyVehicles[0]?.vin;
}
},
methods: {
backButtonAction() {
useMainStore().issConfig.disabledFields.policyNumber = true;
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
if (
this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED
) {
const vehicleLookupResponse = await this.lookupVehicleByVin(
this.selectedVehicleVin
);
const vehicle = this.policyVehicles.find(
(pv) => pv.vin === this.selectedVehicleVin
);
if (vehicleLookupResponse.error) {
if (vehicleLookupResponse.status === 404) {
this.mainStore.resetVehicleState();
useMainStore().updateVehicle({
policyVehicleId: vehicle.id,
carId: "0",
category: "",
year: vehicle.vehicleYear || "",
make: vehicle.vehicleMake || "",
model: vehicle.vehicleModel || "",
style: vehicle.vehicleStyle || "",
vin: vehicle.vin,
noCoverage: this.noCoverageForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle,
repairWaived: this.repairWaivedForSelectedVehicle,
});
this.policyVinFound = false;
return this.navigateForward();
}
this.mainStore.setBailout(
bailoutMessage.vehicleLookupError(
vehicle.vin,
vehicleLookupResponse.data
)
);
return this.navigateForward();
}
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
policyVehicleId: vehicle.id,
vin: this.selectedVehicleVin,
noCoverage: this.noCoverageForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle,
repairWaived: this.repairWaivedForSelectedVehicle,
endorsements: this.endorsementsForSelectedVehicle,
}); });
useMainStore().updateVehicle(this.vehicleFromLookup);
}
return this.navigateForward();
}, },
setup() { navigateForward() {
const mainStore = useMainStore(); if (this.mainStore.isBailout) {
return { mainStore }; this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route,
{},
{}
);
} else if (
this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED
) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
this.$route,
{},
{}
);
} else if (
this.endorsementsForSelectedVehicle?.length > 0 &&
(this.endorsementsForSelectedVehicle?.includes(
endorsementOptions.PARKING_GUARD
) ||
this.endorsementsForSelectedVehicle?.includes(
endorsementOptions.EDUCATOR
))
) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
this.$route
);
} else if (!this.policyVinFound) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
this.$route,
{},
{}
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
this.$route,
{},
{}
);
}
}, },
data() { async lookupVehicleByVin(vin) {
const policyVehicles = useMainStore().order.policy.vehicles; try {
return await useMainStore().lookupVehicleByVin(vin);
} catch (responseError) {
return { return {
policyVehicles, error: true,
selectedVehicleVin: '', status: responseError.status,
selectedPolicyVehicle: null, data: responseError.data,
displayGeneric: true,
policyVinFound: true,
rules: {
optionRequired: globalRules.OPTION_REQUIRED
}
}; };
}
}, },
computed: { },
VehiclesForQuestions() {
// Map API result data, to address-vehicles data structure
const vehicles = this.policyVehicles;
const mappedData = vehicles?.map((v) => {
const maskSymbol = 'X';
const vinStart = maskSymbol.repeat(v.vin.length - 6);
const vinEnd = v.vin.substring(v.vin.length - 6);
return {
vin: v.vin,
vehicle: v,
Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
Name: v.vin,
SubText: `VIN ${vinStart}${vinEnd}`
};
}) ?? [];
return mappedData;
},
noCoverageForSelectedVehicle() {
return noCoverageForSelectedVehicle(this.selectedPolicyVehicle);
},
deductibleForSelectedVehicle() {
return deductibleForSelectedVehicle(this.selectedPolicyVehicle);
},
endorsementsForSelectedVehicle() {
return endorsementsForSelectedVehicle(this.selectedPolicyVehicle);
},
repairWaivedForSelectedVehicle() {
return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
},
selectedVehicle() {
const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
return vehicle;
}
},
watch: {
async selectedVehicleVin(value) {
if (value === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
// clear previously selected vehicle and image
this.mainStore.resetVehicleState();
this.displayGeneric = true;
this.selectedPolicyVehicle = null;
} else {
// get vehicle details from selected VIN
const vehicle = await this.lookupVehicleByVin(value);
// handle error in case vehicle info doesn't come back for selected VIN
if (vehicle?.error === true) {
this.mainStore.resetVehicleState();
this.displayGeneric = true;
this.selectedPolicyVehicle = null;
return;
}
if (vehicle) {
// save selected vehicle to the store
this.mainStore.updateVehicle(vehicle.data);
this.displayGeneric = false;
this.selectedPolicyVehicle = this.policyVehicles.find((p) => p.vin === value);
}
}
}
},
beforeMount() {
if (this.mainStore.order.vehicle.vin) {
this.selectedVehicleVin = this.mainStore.order.vehicle.vin;
} else if (this.policyVehicles?.length === 1) {
this.selectedVehicleVin = this.policyVehicles[0]?.vin;
}
},
methods:
{
backButtonAction() {
useMainStore().issConfig.disabledFields.policyNumber = true;
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
async forwardButtonAction() {
if (this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
const vehicle = this.policyVehicles.find((pv) => pv.vin === this.selectedVehicleVin);
if (vehicleLookupResponse.error) {
if (vehicleLookupResponse.status === 404) {
this.mainStore.resetVehicleState();
useMainStore().updateVehicle({
policyVehicleId: vehicle.id,
carId: '0',
category: '',
year: vehicle.vehicleYear || '',
make: vehicle.vehicleMake || '',
model: vehicle.vehicleModel || '',
style: vehicle.vehicleStyle || '',
vin: vehicle.vin,
noCoverage: this.noCoverageForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle,
repairWaived: this.repairWaivedForSelectedVehicle
});
this.policyVinFound = false;
return this.navigateForward();
}
this.mainStore.setBailout(bailoutMessage.vehicleLookupError(vehicle.vin, vehicleLookupResponse.data));
return this.navigateForward();
}
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
policyVehicleId: vehicle.id,
vin: this.selectedVehicleVin,
noCoverage: this.noCoverageForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle,
repairWaived: this.repairWaivedForSelectedVehicle,
endorsements: this.endorsementsForSelectedVehicle
});
useMainStore().updateVehicle(this.vehicleFromLookup);
}
return this.navigateForward();
},
navigateForward() {
if (this.mainStore.isBailout) {
this.$router
.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route,
{},
{}
);
} else if (this.selectedVehicleVin === vehicleSelectionOptions.VEHICLE_NOT_LISTED) {
this.$router
.navigate(
this.navigationScenarios.CLICKED_FORWARD_NON_LISTED_VEHICLE,
this.$route,
{},
{}
);
} else if (this.endorsementsForSelectedVehicle?.length > 0
&& (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
|| this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
this.$route
);
} else if (!this.policyVinFound) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_CAR_ID_NOT_FOUND,
this.$route,
{},
{}
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_LISTED_VEHICLE,
this.$route,
{},
{}
);
}
},
async lookupVehicleByVin(vin) {
try {
return await useMainStore().lookupVehicleByVin(vin);
} catch (responseError) {
return {
error: true,
status: responseError.status,
data: responseError.data
};
}
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.header{ .header {
margin-bottom: 0rem !important; margin-bottom: 0rem !important;
} }
:deep(.form-test-error){ :deep(.form-test-error) {
text-align: left; text-align: left;
margin-top: 0rem !important; margin-top: 0rem !important;
line-height: 1.50rem; line-height: 1.5rem;
} }
</style> </style>

929
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -1,443 +1,540 @@
<template> <template>
<Form <Form
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit"
<div class="page-container-grouped-styles"> >
<div class="fade-on-route-transition position-relative"> <div class="container-fluid fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="row justify-content-center">
<div class="container-fluid pb-2"> <div class="col-md-6">
<div class="row mt-2 px-3"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="col">
<alert
v-if="shouldDisplayVehicleChangeAlert"
ref="vehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
<vehicleBanner
class="mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<damageLocationQuestion
ref="damageLocation"
v-model="selectedDamageLocations"
cmsWidgetName="DamageLocationQuestion"
groupName="DamageLocationQuestion" />
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations"
class="mb-3" />
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
<sideDoorOptions
v-show="!hasRepairReplaceConflict"
ref="sideDoorOptions"
v-model="sideDoorOptionsData"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
:selectedDamageLocations="selectedDamageLocations"
class="mb-1" />
<replaceOptionsQuestion
ref="backGlassOptions"
v-model="selectedRearReplaceOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
<site-footer
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div> </div>
</Form> </div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
v-if="shouldDisplayVehicleChangeAlert"
ref="vehicleChangeAlert"
class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false"
/>
<vehicleBanner
class="mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<damageLocationQuestion
ref="damageLocation"
v-model="selectedDamageLocations"
cmsWidgetName="DamageLocationQuestion"
groupName="DamageLocationQuestion"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations"
class="mb-3"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<sideDoorOptions
v-show="!hasRepairReplaceConflict"
ref="sideDoorOptions"
v-model="sideDoorOptionsData"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
:selectedDamageLocations="selectedDamageLocations"
class="mb-1"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<replaceOptionsQuestion
ref="backGlassOptions"
v-model="selectedRearReplaceOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="
isRearWindowDamageLocation && !hasRepairReplaceConflict
"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<site-footer
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction"
/>
</div>
</div>
</div>
</Form>
</template> </template>
<script> <script>
// Components // Components
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from "@/iss-components/site-header/site-header.vue";
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from "@/iss-components/site-footer/site-footer.vue";
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue'; import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
import sideDoorOptions from '@/layouts/vehicle-damage/side-door-options/side-door-options.vue'; import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options.vue";
import damageLocationQuestion from '@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue'; import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue";
import windshieldOptions from '@/layouts/vehicle-damage/windshield-options/windshield-options.vue'; import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options.vue";
import replaceOptionsQuestion from '@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue'; import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question.vue";
import alert from '@/ux-components/alert/alert.vue'; import alert from "@/ux-components/alert/alert.vue";
// Supporting files // Supporting files
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from "@/mixins/base-form-mixin.js";
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin'; import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from "@/helpers/layout-helper";
import { Form, defineRule } from 'vee-validate'; import { Form, defineRule } from "vee-validate";
import { required } from '@/helpers/validation-rules'; import { required } from "@/helpers/validation-rules";
import errorMessages from '@/constants/error-messages'; import errorMessages from "@/constants/error-messages";
import damageLocationsCms from '@/constants/damage-locations-cms.js'; import damageLocationsCms from "@/constants/damage-locations-cms.js";
import damageLocationsSelected from '@/constants/damage-locations-selected.js'; import damageLocationsSelected from "@/constants/damage-locations-selected.js";
import { useMainStore } from '@/store'; import { useMainStore } from "@/store";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule('replace-options-required', required(errorMessages.REPLACE_OPTIONS_REQUIRED)); defineRule(
"replace-options-required",
required(errorMessages.REPLACE_OPTIONS_REQUIRED)
);
export default { export default {
name: 'vehicle-damage', name: "vehicle-damage",
components: { components: {
siteHeader, siteHeader,
siteFooter, siteFooter,
vehicleBanner, vehicleBanner,
siteSubHeader, siteSubHeader,
sideDoorOptions, sideDoorOptions,
damageLocationQuestion, damageLocationQuestion,
windshieldOptions, windshieldOptions,
replaceOptionsQuestion, replaceOptionsQuestion,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
alert alert,
},
mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
const store = useMainStore();
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const damageOptionsPromise = store.getDamageOptions(
store.order.vehicle.carId
);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "damageOptions",
promise: damageOptionsPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
vm.$refs.sideDoorOptions.initializeComponent(
resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
);
vm.$refs.windshieldOptions.initializeComponent(
resultMap.damageOptions.windshieldOptions.availableReplacementOptions
);
vm.$refs.backGlassOptions.initializeComponent(
resultMap.damageOptions.backGlassOptions.availableReplacementOptions
);
});
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
return {
selectedDamageLocations: this.getDamageLocationsFromStore(),
sideDoorOptionsData: {
selectedDoorSides: this.getDoorSidesFromStore(),
selectedDriverSideReplaceOptions:
this.getDriverSideReplaceOptionsFromStore(),
selectedPassengerSideReplaceOptions:
this.getPassengerSideReplaceOptionsFromStore(),
},
selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(),
};
},
computed: {
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some(
(selectedDamages) =>
selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD
);
}, },
mixins: [BaseFormMixin, vehicleQuestionsMixin], isSideDoorDamageLocation() {
async beforeRouteEnter(to, from, next) { return this.selectedDamageLocations.some(
const store = useMainStore(); (selectedDamages) =>
selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR
);
},
isRearWindowDamageLocation() {
return this.selectedDamageLocations.some(
(selectedDamages) =>
selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW
);
},
isWindshieldRepair() {
return (
this.isWindshieldDamageLocation &&
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR
);
},
isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
// Call APIs return this.sideDoorOptionsData.selectedDoorSides.some(
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); (selectedDriverSide) =>
const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId); selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE
);
},
isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
// Settle promises and get results return this.sideDoorOptionsData.selectedDoorSides.some(
const promiseResultMap = [ (selectedPassengerSide) =>
{ selectedPassengerSide.toUpperCase() ===
resultKey: 'cmsContent', damageLocationsCms.PASSENGERSIDE
promise: cmsContentPromise );
}, },
{ hasRepairReplaceConflict() {
resultKey: 'damageOptions', return (
promise: damageOptionsPromise this.isWindshieldDamageLocation &&
} this.selectedDamageLocations.length > 1 &&
]; this.isWindshieldRepair
);
},
hasSplitSingleConflict() {
if (
!this.selectedDamageLocations?.includes("Windshield") ||
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR ||
!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
)
return false;
const resultMap = await settleAllPromises(promiseResultMap); return (
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedSingleWindshield) =>
selectedSingleWindshield.toUpperCase() ===
damageLocationsSelected.SINGLE.toUpperCase()
) &&
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedDriverWindshield) =>
selectedDriverWindshield.toUpperCase() ===
damageLocationsSelected.DRIVER.toUpperCase()
) ||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedPassengerWindshield) =>
selectedPassengerWindshield.toUpperCase() ===
damageLocationsSelected.PASSENGER.toUpperCase()
))
);
},
shouldDisplayVehicleChangeAlert() {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
},
},
methods: {
arePagePrerequisitesValid() {
if (useMainStore().order.vehicle.carId) {
return true;
}
return false;
},
getDamageLocationsFromStore() {
const glassSelections = [];
// Call the "next" function to complete the transition to this page. if (
next((vm) => { this.mainStore.order.damage.glassToReplace?.some(
vm.setCmsContent(resultMap.cmsContent); (glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD
vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions); ) ||
vm.$refs.sideDoorOptions.initializeComponent( this.mainStore.order.damage.isRepair
resultMap.damageOptions.driverSideOptions.availableReplacementOptions, ) {
resultMap.damageOptions.passengerSideOptions.availableReplacementOptions glassSelections.push(damageLocationsSelected.WINDSHIELD);
); }
vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions.availableReplacementOptions); if (
vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions.availableReplacementOptions); this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation === damageLocationsSelected.DRIVER ||
glass.glassLocation === damageLocationsSelected.PASSENGER
)
) {
glassSelections.push(damageLocationsSelected.SIDEDOOR);
}
if (
this.mainStore.order.damage.glassToReplace?.some(
(glass) => glass.glassLocation === damageLocationsSelected.REAR
)
) {
glassSelections.push(damageLocationsSelected.REARWINDOW);
}
return glassSelections;
},
getWindshieldOptionsFromStore() {
const windShieldOptions = {
selectedWindshieldDamageType: "",
selectedWindshieldChipCount: null,
selectedWindshieldReplaceOptions: [],
};
if (this.mainStore.order.damage.isRepair === undefined)
return windshieldOptions;
if (this.mainStore.order.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPAIR;
windShieldOptions.selectedWindshieldChipCount =
this.mainStore.order.damage.numberOfChips;
} else {
if (
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.SINGLE
)
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.SINGLE
);
}
if (
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.DRIVER
)
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.DRIVER
);
}
if (
this.mainStore.order.damage.glassToReplace?.some(
(glass) =>
glass.glassLocation === damageLocationsSelected.WINDSHIELD &&
glass.glassName === damageLocationsSelected.PASSENGER
)
) {
windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(
damageLocationsSelected.PASSENGER
);
}
}
return windShieldOptions;
},
getDoorSidesFromStore() {
const doorSides = [];
if (
this.mainStore.order.damage.glassToReplace?.some(
(glass) => glass.glassLocation === damageLocationsSelected.DRIVER
)
) {
doorSides.push(damageLocationsSelected.DRIVERSIDE);
}
if (
this.mainStore.order.damage.glassToReplace?.some(
(glass) => glass.glassLocation === damageLocationsSelected.PASSENGER
)
) {
doorSides.push(damageLocationsSelected.PASSENGERSIDE);
}
return doorSides;
},
getDriverSideReplaceOptionsFromStore() {
const driverSideReplaceOptions = [];
this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
if (glass.glassLocation === damageLocationsSelected.DRIVER) {
driverSideReplaceOptions.push(glass.glassName);
}
});
return driverSideReplaceOptions;
},
getPassengerSideReplaceOptionsFromStore() {
const passengerSideReplaceOptions = [];
this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
passengerSideReplaceOptions.push(glass.glassName);
}
});
return passengerSideReplaceOptions;
},
getRearReplaceOptionsFromStore() {
const rearReplaceOptions =
this.mainStore.order.damage.glassToReplace?.filter(
(glass) => glass.glassLocation === damageLocationsSelected.REAR
)[0]?.glassName;
return rearReplaceOptions;
},
async forwardButtonAction() {
this.mainStore.saveVehicleDamage(
this.isWindshieldRepair,
this.selectedGlassToReplace(),
this.selectedWindshieldOptions.selectedWindshieldChipCount
);
if (this.isWindshieldRepair) {
const supportingItems = await useMainStore().getSupportingItems();
useMainStore().updateSupportingItems(supportingItems.data);
}
if (this.mainStore.damage.isRepair) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
this.$route
);
} else if (this.mainStore.order.vehicle.vin) {
// If vin already exists, navigate directly to vin-lookup
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) {
// To Do: Need requirement on what to do here
window.console.error("Error on retrieving PartsOrQuestions");
this.$refs.siteFooter.removeLoader();
return null;
}
// Comes from vehicleQuestionsMixin.navigateForward()
await this.navigateForward(
partsOrQuestionsResponse.data.partsOrQuestions,
this
);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
this.$route
);
}
return null;
},
selectedGlassToReplace() {
const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach(
(wsItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.WINDSHIELD,
glassName: wsItem,
});
}
);
}
if (this.isDriverSideReplace) {
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach(
(driverItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.DRIVER,
glassName: driverItem,
});
}
);
}
if (this.isPassengerSideReplace) {
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach(
(passengerItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem,
});
}
);
}
if (this.isRearWindowDamageLocation) {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.REAR,
glassName: this.selectedRearReplaceOptions,
}); });
}
return selectedGlassToReplace;
}, },
setup() { },
const mainStore = useMainStore();
return { mainStore };
},
data() {
return {
selectedDamageLocations: this.getDamageLocationsFromStore(),
sideDoorOptionsData: {
selectedDoorSides: this.getDoorSidesFromStore(),
selectedDriverSideReplaceOptions: this.getDriverSideReplaceOptionsFromStore(),
selectedPassengerSideReplaceOptions: this.getPassengerSideReplaceOptionsFromStore()
},
selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore()
};
},
computed: {
isWindshieldDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD);
},
isSideDoorDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR);
},
isRearWindowDamageLocation() {
return this.selectedDamageLocations.some((selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW);
},
isWindshieldRepair() {
return (
this.isWindshieldDamageLocation
&& this.selectedWindshieldOptions.selectedWindshieldDamageType
=== damageLocationsSelected.REPAIR
);
},
isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this
.sideDoorOptionsData.selectedDoorSides
.some((selectedDriverSide) => selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE);
},
isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this
.sideDoorOptionsData.selectedDoorSides
.some((selectedPassengerSide) => selectedPassengerSide.toUpperCase() === damageLocationsCms.PASSENGERSIDE);
},
hasRepairReplaceConflict() {
return (
this.isWindshieldDamageLocation
&& this.selectedDamageLocations.length > 1
&& this.isWindshieldRepair
);
},
hasSplitSingleConflict() {
if (
!this.selectedDamageLocations?.includes('Windshield')
|| this.selectedWindshieldOptions.selectedWindshieldDamageType
=== damageLocationsSelected.REPAIR
|| !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
) return false;
return (
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedSingleWindshield) => (
selectedSingleWindshield.toUpperCase()
=== damageLocationsSelected.SINGLE.toUpperCase()
))
&& (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedDriverWindshield) => (
selectedDriverWindshield.toUpperCase()
=== damageLocationsSelected.DRIVER.toUpperCase()
))
|| this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedPassengerWindshield) => (
selectedPassengerWindshield.toUpperCase()
=== damageLocationsSelected.PASSENGER.toUpperCase()
)))
);
},
shouldDisplayVehicleChangeAlert() {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
}
},
methods: {
arePagePrerequisitesValid() {
if (useMainStore().order.vehicle.carId) {
return true;
}
return false;
},
getDamageLocationsFromStore() {
const glassSelections = [];
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD)
|| this.mainStore.order.damage.isRepair
) {
glassSelections.push(damageLocationsSelected.WINDSHIELD);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => (
glass.glassLocation === damageLocationsSelected.DRIVER
|| glass.glassLocation === damageLocationsSelected.PASSENGER
))
) {
glassSelections.push(damageLocationsSelected.SIDEDOOR);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.REAR)
) {
glassSelections.push(damageLocationsSelected.REARWINDOW);
}
return glassSelections;
},
getWindshieldOptionsFromStore() {
const windShieldOptions = {
selectedWindshieldDamageType: '',
selectedWindshieldChipCount: null,
selectedWindshieldReplaceOptions: []
};
if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions;
if (this.mainStore.order.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
windShieldOptions.selectedWindshieldChipCount = this.mainStore.order.damage.numberOfChips;
} else {
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => (
glass.glassLocation === damageLocationsSelected.WINDSHIELD
&& glass.glassName === damageLocationsSelected.SINGLE
))
) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => (
glass.glassLocation === damageLocationsSelected.WINDSHIELD
&& glass.glassName === damageLocationsSelected.DRIVER
))
) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => (
glass.glassLocation === damageLocationsSelected.WINDSHIELD
&& glass.glassName === damageLocationsSelected.PASSENGER
))
) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
}
}
return windShieldOptions;
},
getDoorSidesFromStore() {
const doorSides = [];
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.DRIVER)
) {
doorSides.push(damageLocationsSelected.DRIVERSIDE);
}
if (
this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.PASSENGER)
) {
doorSides.push(damageLocationsSelected.PASSENGERSIDE);
}
return doorSides;
},
getDriverSideReplaceOptionsFromStore() {
const driverSideReplaceOptions = [];
this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
if (glass.glassLocation === damageLocationsSelected.DRIVER) {
driverSideReplaceOptions.push(glass.glassName);
}
});
return driverSideReplaceOptions;
},
getPassengerSideReplaceOptionsFromStore() {
const passengerSideReplaceOptions = [];
this.mainStore.order.damage.glassToReplace?.forEach((glass) => {
if (glass.glassLocation === damageLocationsSelected.PASSENGER) {
passengerSideReplaceOptions.push(glass.glassName);
}
});
return passengerSideReplaceOptions;
},
getRearReplaceOptionsFromStore() {
const rearReplaceOptions = this.mainStore.order.damage
.glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
return rearReplaceOptions;
},
async forwardButtonAction() {
this.mainStore.saveVehicleDamage(
this.isWindshieldRepair,
this.selectedGlassToReplace(),
this.selectedWindshieldOptions.selectedWindshieldChipCount
);
if (this.isWindshieldRepair) {
const supportingItems = await useMainStore().getSupportingItems();
useMainStore().updateSupportingItems(supportingItems.data);
}
if (this.mainStore.damage.isRepair) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_REPAIR,
this.$route
);
} else if (this.mainStore.order.vehicle.vin) {
// If vin already exists, navigate directly to vin-lookup
const partsOrQuestionsResponse = await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) {
// To Do: Need requirement on what to do here
window.console.error('Error on retrieving PartsOrQuestions');
this.$refs.siteFooter.removeLoader();
return null;
}
// Comes from vehicleQuestionsMixin.navigateForward()
await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
} else {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
this.$route
);
}
return null;
},
selectedGlassToReplace() {
const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach((wsItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.WINDSHIELD,
glassName: wsItem
});
});
}
if (this.isDriverSideReplace) {
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.DRIVER,
glassName: driverItem
});
});
}
if (this.isPassengerSideReplace) {
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach((passengerItem) => {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem
});
});
}
if (this.isRearWindowDamageLocation) {
selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.REAR,
glassName: this.selectedRearReplaceOptions
});
}
return selectedGlassToReplace;
}
}
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.replace-options-question { .replace-options-question {
.two-list-card-width { .two-list-card-width {
width: 100%; width: 100%;
flex: 0 auto; flex: 0 auto;
} }
} }
</style> </style>

441
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -1,244 +1,251 @@
<template> <template>
<Form <Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
ref="theForm" <div class="container-fluid fade-on-route-transition">
@submit="onSubmit" <div class="row justify-content-center">
@invalidSubmit="onInvalidSubmit"> <div class="col-md-6">
<div class="page-container-grouped-styles"> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<div class="select-car">
<div class="container-fluid pb-2">
<div class="row px-3">
<div class="col">
<div class="select-car-form rounded">
<vehicleBanner
ref="vehicleBanner"
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader
ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget" />
<div class="prevent-squish my-5">
<div class="row">
<div class="col">
<alert
id="vehicle-parts-alert"
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false" />
</div>
</div>
</div>
<div
v-for="(item, i) in PartsOrQuestions"
:key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="selectedGlassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBackByVehicleQuestions"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</Form> </div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
ref="vehicleBanner"
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false"
/>
<siteSubHeader
ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
id="vehicle-parts-alert"
class="mt-3 mb-3"
alertClass="alert-warning"
cmsWidgetName="AlertWidget"
:isDismissible="false"
/>
<div v-for="(item, i) in PartsOrQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" />
<glassPartQuestion
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="
selectedGlassParts[item.glassLocation + '-' + item.glassName]
"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData"
/>
</div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBackByVehicleQuestions"
@ForwardClicked="forwardButtonAction"
/>
</div>
</div>
</div>
</Form>
</template> </template>
<script> <script>
// Components // Components
import glassPartQuestion from '@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue'; import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue";
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from "@/iss-components/site-header/site-header.vue";
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue'; import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue";
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from "@/iss-components/site-footer/site-footer.vue";
import alert from '@/ux-components/alert/alert.vue'; import alert from "@/ux-components/alert/alert.vue";
// Supporting Files // Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import settleAllPromises from '@/helpers/layout-helper'; import settleAllPromises from "@/helpers/layout-helper";
import issPageValues from '@/router/router-constants/issPage-values'; import issPageValues from "@/router/router-constants/issPage-values";
import { Form } from 'vee-validate'; import { Form } from "vee-validate";
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin'; import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
import BaseFormMixin from '@/mixins/base-form-mixin.js'; import BaseFormMixin from "@/mixins/base-form-mixin.js";
import { useMainStore } from '@/store'; import { useMainStore } from "@/store";
export default { export default {
name: 'vehicle-parts', name: "vehicle-parts",
components: { components: {
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
glassPartQuestion, glassPartQuestion,
siteHeader, siteHeader,
vehicleBanner, vehicleBanner,
siteSubHeader, siteSubHeader,
siteFooter, siteFooter,
alert alert,
},
mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
// Glass Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) =>
vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
})
);
});
},
data() {
return {
selectedGlassParts: {},
alertWidgetData: Object,
alreadyPopulatedPartsData: [],
};
},
computed: {
isForwardActionDisabled() {
return (
this.selectedGlassPartNumbers?.length !==
this.PartsFromApi.partsOrQuestions?.length
);
}, },
mixins: [BaseFormMixin, vehicleQuestionsMixin], selectedGlassPartNumbers() {
async beforeRouteEnter(to, from, next) { // Compile all selected parts from the page.
// Call APIs const numberArray = [];
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); // eslint-disable-next-line no-restricted-syntax
// Settle promises and get results for (const glassPart of Object.values(this.selectedGlassParts)) {
const promiseResultMap = [ if (glassPart?.partNumber) {
{ numberArray.push(glassPart.partNumber);
resultKey: 'cmsContent',
promise: cmsContentPromise
}
];
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
// Glass Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) =>
vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget
}));
});
},
data() {
return {
selectedGlassParts: {},
alertWidgetData: Object,
alreadyPopulatedPartsData: []
};
},
computed: {
isForwardActionDisabled() {
return this.selectedGlassPartNumbers?.length !== this.PartsFromApi.partsOrQuestions?.length;
},
selectedGlassPartNumbers() {
// Compile all selected parts from the page.
const numberArray = [];
// eslint-disable-next-line no-restricted-syntax
for (const glassPart of Object.values(this.selectedGlassParts)) {
if (glassPart?.partNumber) {
numberArray.push(glassPart.partNumber);
}
}
return numberArray;
},
PartsOrQuestions() {
const partsData = this.PartsFromApi;
// Map API result data, to vehicle-parts data structure
const mappedData = partsData.partsOrQuestions?.map((g) => ({
glassName: g.glassName,
glassLocation: g.glassLocation,
colorAnswers: g.parts?.reduce((arr, p) => {
arr.push({
ColorAnswerText: p.color,
FeatureAnswers: [
{
FeatureAnswerText:
p.description === '' ? p.color : p.description,
PartNumber: p.partNumber
}
]
});
return arr;
}, [])
}));
return mappedData;
},
PartsFromApi() {
return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
},
RefPrefix() {
return 'partQuestion';
} }
}
return numberArray;
}, },
mounted() { PartsOrQuestions() {
this.LoadInitialPartsData(); const partsData = this.PartsFromApi;
// Map API result data, to vehicle-parts data structure
const mappedData = partsData.partsOrQuestions?.map((g) => ({
glassName: g.glassName,
glassLocation: g.glassLocation,
colorAnswers: g.parts?.reduce((arr, p) => {
arr.push({
ColorAnswerText: p.color,
FeatureAnswers: [
{
FeatureAnswerText:
p.description === "" ? p.color : p.description,
PartNumber: p.partNumber,
},
],
});
return arr;
}, []),
}));
return mappedData;
}, },
methods: {
arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data)
return (
useMainStore().damage.isRepair != null
&& useMainStore().pageData(issPageValues.VEHICLE_PARTS)
&& Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS)).length !== 0
);
},
async forwardButtonAction() {
const matchedParts = [];
// Match them to the parts from the API. PartsFromApi() {
// eslint-disable-next-line no-restricted-syntax return this.mainStore.pageData(issPageValues.VEHICLE_PARTS);
for (const [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) { },
// eslint-disable-next-line no-restricted-syntax
for (const [partKey, partValue] of Object.entries(value.parts)) {
const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey];
const isMatched = this.selectedGlassPartNumbers.some((p) => p === currentPart.partNumber); RefPrefix() {
return "partQuestion";
},
},
mounted() {
this.LoadInitialPartsData();
},
methods: {
arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data)
return (
useMainStore().damage.isRepair != null &&
useMainStore().pageData(issPageValues.VEHICLE_PARTS) &&
Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS))
.length !== 0
);
},
async forwardButtonAction() {
const matchedParts = [];
if (isMatched) { // Match them to the parts from the API.
matchedParts.push({ // eslint-disable-next-line no-restricted-syntax
glassLocation: value.glassLocation, for (const [key, value] of Object.entries(
glassName: value.glassName, this.PartsFromApi.partsOrQuestions
parts: [currentPart] )) {
}); // eslint-disable-next-line no-restricted-syntax
} for (const [partKey, partValue] of Object.entries(value.parts)) {
} const currentPart =
} this.PartsFromApi.partsOrQuestions[key].parts[partKey];
// If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
if (this.isForwardActionDisabled) {
this.$refs.siteFooter.removeLoader();
throw new Error('Could not match any parts to the selected parts');
}
this.navigateForward(matchedParts, null); const isMatched = this.selectedGlassPartNumbers.some(
}, (p) => p === currentPart.partNumber
);
LoadInitialPartsData() { if (isMatched) {
const partsData = this.PartsFromApi; matchedParts.push({
this.alreadyPopulatedPartsData = this.mainStore.lineItems.glassParts === null glassLocation: value.glassLocation,
? [] glassName: value.glassName,
: this.mainStore.lineItems.glassParts; parts: [currentPart],
partsData.partsOrQuestions.map((g) => {
// If the part is already populated, use the value from the store and populate the v-model.
Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
const { partNumber } = this.alreadyPopulatedPartsData[key];
g.parts.forEach((p) => {
if (p.partNumber === partNumber) {
this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
}
});
});
}); });
}
} }
} }
// If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
if (this.isForwardActionDisabled) {
this.$refs.siteFooter.removeLoader();
throw new Error("Could not match any parts to the selected parts");
}
this.navigateForward(matchedParts, null);
},
LoadInitialPartsData() {
const partsData = this.PartsFromApi;
this.alreadyPopulatedPartsData =
this.mainStore.lineItems.glassParts === null
? []
: this.mainStore.lineItems.glassParts;
partsData.partsOrQuestions.map((g) => {
// If the part is already populated, use the value from the store and populate the v-model.
Object.keys(this.alreadyPopulatedPartsData).forEach((key) => {
const { partNumber } = this.alreadyPopulatedPartsData[key];
g.parts.forEach((p) => {
if (p.partNumber === partNumber) {
this.selectedGlassParts[`${g.glassLocation}-${g.glassName}`] = p;
}
});
});
});
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#vehicle-parts-alert { #vehicle-parts-alert {
.alert-heading { .alert-heading {
margin-top: 0.25rem !important; margin-top: 0.25rem !important;
} }
} }
</style> </style>

775
src/layouts/welcome-page/welcome-page.vue
View file

@ -1,412 +1,413 @@
<template> <template>
<Form <Form
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit"
<div class="page-container-grouped-styles welcome"> >
<div class="fade-on-route-transition position-relative"> <div class="container-fluid fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="row justify-content-center">
<siteSubHeader <div class="col-md-6">
cmsWidgetName="SiteSubHeaderWidget" <siteHeader cmsWidgetName="SiteHeaderWidget" />
class="mt-4" />
<div class="container-fluid px-5">
<div class="row mt-5">
<div class="col">
<textboxQuestion
ref="policyNumber"
v-model="welcomePageModel.policyNumber"
inputId="policyNumberField"
cmsWidgetName="PolicyNumberQuestion"
isRequired
disableAutoFill
:isDisabled="isPolicyHolderDisabled"
:validationRules="rules.policyNumber" />
</div>
</div>
<div
class="row mt-4">
<div class="col">
<textboxQuestion
ref="policyZip"
v-model="welcomePageModel.policyZipCode"
inputId="policyZipCode"
cmsWidgetName="PolicyZipQuestion"
isRequired
mask="#####"
:isDisabled="isPolicyZipDisabled"
:validationRules="rules.policyZip" />
</div>
</div>
<div class="row mt-4">
<div class="col">
<textboxQuestion
ref="dateOfLoss"
v-model="welcomePageModel.dateOfLoss"
type="date"
cmsWidgetName="DateOfLossQuestion"
inputId="dateOfLossField"
isRequired
:isDisabled="isDateOfLossDisabled"
disableAutoFill
:max="new Date().toJSON().slice(0, 10)"
:min="'1972-12-01'"
:validationRules="rules.lossDate" />
</div>
</div>
<div class="row px-4">
<div class="col px-0">
<textBlock
cmsWidgetName="DamageDateEstimateWidget"
typeStyle="small"
class="mt-2" />
</div>
</div>
<div class="row mt-4">
<div class="col">
<dropdownQuestion
id="welcomeDropdown"
ref="damageCause"
v-model="welcomePageModel.damageCause"
cmsWidgetName="DamageCauseQuestion"
inputId="damageCauseQuestionField"
:options="DamageCauseOptions"
disableAutoFill
:validationRules="rules.damageOption"
placeHolderText="Select an option" />
</div>
</div>
<div class="row mt-4">
<div class="col">
<textboxQuestion
ref="phoneNumber"
v-model="welcomePageModel.phoneNumber"
inputId="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion"
:validationRules="rules.phoneNumber"
isRequired
:mask="phoneMask"
disableAutoFill />
</div>
</div>
<div class="row mt-4">
<div class="col">
<textboxQuestion
ref="email"
v-model="welcomePageModel.email"
inputId="emailField"
cmsWidgetName="EmailAddressQuestion"
:validationRules="rules.email"
isRequired
disableAutoFill />
</div>
</div>
<div class="row">
<div class="col">
<textboxQuestion
v-if="displayDamageCityQuestion"
ref="damageCity"
v-model="welcomePageModel.damageCity"
class="mt-4"
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion"
isRequired
disableAutoFill
:validationRules="rules.lossCity" />
</div>
</div>
<div class="row">
<div class="col">
<dropdownQuestion
v-if="displayDamageStateQuestion"
id="welcomeDropdown"
ref="state"
v-model="welcomePageModel.damageState"
class="mt-4"
cmsWidgetName="DamageStateQuestion"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="getStates"
:validationRules="rules.lossState"
isRequired
disableAutoFill
placeHolderText="Select an option" />
</div>
</div>
<div class="row mb-3">
<buttonQuestion
v-if="displayGlassOnlyQuestion"
ref="glassOnlyDamage"
v-model="welcomePageModel.isDamageGlassOnly"
class="px-0 mt-4"
cmsWidgetName="GlassOnlyQuestion"
inputId="isDamageGlassOnly"
:answers="DamageGlassOnlyOptions"
:questionText="DamageGlassOnlyQuestion"
groupName="glassOnlyDamageOption"
buttonTypeString="listButtonHorizontal"
:validationRules="rules.damageOption"
isRequired
isSmallQuestionLabelText
disableAutoFill />
</div>
<div
id="welcomeFooter"
class="row position-sticky top-100">
<div class="col">
<alert
v-if="displayInvalidZipAlert"
ref="alertInvalidZip"
class="my-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
:isDismissible="false" />
<siteFooter
ref="siteFooter"
class="mt-3"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div> </div>
</Form> </div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4" />
<textboxQuestion
ref="policyNumber"
v-model="welcomePageModel.policyNumber"
inputId="policyNumberField"
cmsWidgetName="PolicyNumberQuestion"
isRequired
disableAutoFill
:isDisabled="isPolicyHolderDisabled"
:validationRules="rules.policyNumber"
/>
<textboxQuestion
ref="policyZip"
v-model="welcomePageModel.policyZipCode"
inputId="policyZipCode"
cmsWidgetName="PolicyZipQuestion"
isRequired
mask="#####"
:isDisabled="isPolicyZipDisabled"
:validationRules="rules.policyZip"
/>
<textboxQuestion
ref="dateOfLoss"
v-model="welcomePageModel.dateOfLoss"
type="date"
cmsWidgetName="DateOfLossQuestion"
inputId="dateOfLossField"
isRequired
:isDisabled="isDateOfLossDisabled"
disableAutoFill
:max="new Date().toJSON().slice(0, 10)"
:min="'1972-12-01'"
:validationRules="rules.lossDate"
/>
<textBlock
cmsWidgetName="DamageDateEstimateWidget"
typeStyle="small"
class="mt-2"
/>
<dropdownQuestion
id="welcomeDropdown"
ref="damageCause"
v-model="welcomePageModel.damageCause"
cmsWidgetName="DamageCauseQuestion"
inputId="damageCauseQuestionField"
:options="DamageCauseOptions"
disableAutoFill
:validationRules="rules.damageOption"
placeHolderText="Select an option"
/>
<textboxQuestion
ref="phoneNumber"
v-model="welcomePageModel.phoneNumber"
inputId="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion"
:validationRules="rules.phoneNumber"
isRequired
:mask="phoneMask"
disableAutoFill
/>
<textboxQuestion
ref="email"
v-model="welcomePageModel.email"
inputId="emailField"
cmsWidgetName="EmailAddressQuestion"
:validationRules="rules.email"
isRequired
disableAutoFill
/>
<textboxQuestion
v-if="displayDamageCityQuestion"
ref="damageCity"
v-model="welcomePageModel.damageCity"
class="mt-4"
inputId="damageCityField"
cmsWidgetName="DamageCityQuestion"
isRequired
disableAutoFill
:validationRules="rules.lossCity"
/>
<dropdownQuestion
v-if="displayDamageStateQuestion"
id="welcomeDropdown"
ref="state"
v-model="welcomePageModel.damageState"
class="mt-4"
cmsWidgetName="DamageStateQuestion"
inputId="8fdf9dc2e13e430eb57529499dceb3eb"
:options="getStates"
:validationRules="rules.lossState"
isRequired
disableAutoFill
placeHolderText="Select an option"
/>
<buttonQuestion
v-if="displayGlassOnlyQuestion"
ref="glassOnlyDamage"
v-model="welcomePageModel.isDamageGlassOnly"
class="px-0 mt-4"
cmsWidgetName="GlassOnlyQuestion"
inputId="isDamageGlassOnly"
:answers="DamageGlassOnlyOptions"
:questionText="DamageGlassOnlyQuestion"
groupName="glassOnlyDamageOption"
buttonTypeString="listButtonHorizontal"
:validationRules="rules.damageOption"
isRequired
isSmallQuestionLabelText
disableAutoFill
/>
<div id="welcomeFooter" class="row">
<alert
v-if="displayInvalidZipAlert"
ref="alertInvalidZip"
class="my-4"
cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger"
:isDismissible="false"
/>
<siteFooter
ref="siteFooter"
class="mt-3"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction"
/>
</div>
</div>
</div>
<footerImage
cmsWidgetName="SiteFooterWidget" />
</div>
</Form>
</template> </template>
<script> <script>
// Components // Components
import { Form, defineRule } from 'vee-validate'; import { Form, defineRule } from "vee-validate";
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from "@/iss-components/site-header/site-header.vue";
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from "@/iss-components/site-footer/site-footer.vue";
import alert from '@/ux-components/alert/alert.vue'; import alert from "@/ux-components/alert/alert.vue";
import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue'; import textboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
import buttonQuestion from '@/digital-components/button-question/button-question.vue'; import buttonQuestion from "@/digital-components/button-question/button-question.vue";
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue'; import dropdownQuestion from "@/digital-components/dropdown-question/dropdown-question.vue";
import textBlock from '@/digital-components/text-block/text-block.vue'; import textBlock from "@/digital-components/text-block/text-block.vue";
import footerImage from "@/iss-components/site-footer/footer-image/footer-image.vue";
// Supporting files // Supporting files
import { fetchCmsContentForPage, fetchGlobalCmsContent, updateCmsSiteHeader } from '@/helpers/cms-content-helper'; import {
import settleAllPromises from '@/helpers/layout-helper'; fetchCmsContentForPage,
import { required } from '@/helpers/validation-rules'; fetchGlobalCmsContent,
import errorMessages from '@/constants/error-messages'; updateCmsSiteHeader,
import BaseFormMixin from '@/mixins/base-form-mixin.js'; } from "@/helpers/cms-content-helper";
import { useMainStore } from '@/store'; import settleAllPromises from "@/helpers/layout-helper";
import states from '@/constants/states'; import { required } from "@/helpers/validation-rules";
import globalRules from '@/constants/global-rules'; import errorMessages from "@/constants/error-messages";
import routerParams from '@/router/router-constants/router-params'; import BaseFormMixin from "@/mixins/base-form-mixin.js";
import MaskaFormattedMasks from '@/constants/maska-masks'; import { useMainStore } from "@/store";
import states from "@/constants/states";
import globalRules from "@/constants/global-rules";
import routerParams from "@/router/router-constants/router-params";
import MaskaFormattedMasks from "@/constants/maska-masks";
// define validation rules // define validation rules
defineRule('damage-option-required', required(errorMessages.DAMAGE_OPTION_REQUIRED)); defineRule(
"damage-option-required",
required(errorMessages.DAMAGE_OPTION_REQUIRED)
);
export default { export default {
name: 'welcome-page', name: "welcome-page",
components: { components: {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
alert, footerImage,
buttonQuestion, alert,
textboxQuestion, buttonQuestion,
dropdownQuestion, textboxQuestion,
siteFooter, dropdownQuestion,
textBlock, siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names textBlock,
Form // eslint-disable-next-line vue/no-reserved-component-names
Form,
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const cmsGlobalSiteHeaderContentPromise =
fetchGlobalCmsContent("iss-siteheader");
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "globalSiteHeaderCmsContent",
promise: cmsGlobalSiteHeaderContentPromise,
},
];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent);
vm.setCmsContent(resultMap.cmsContent);
});
},
setup() {
const mainStore = useMainStore();
// Set order account number from the issConfig.
mainStore.order.accountNumber = mainStore.issConfig.parentAccountNumber;
return { mainStore };
},
data() {
return {
welcomePageModel: this.getWelcomePageModelFromStore(),
displayInvalidZipAlert: false,
duplicates: [],
rules: {
damageOption: "damage-option-required",
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
// eslint-disable-next-line max-len
lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`,
lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
},
};
},
computed: {
DamageCauseOptions() {
const damageCauseAnswers = this.getCmsContent(
"DamageCauseQuestion",
"Answers"
);
const damageCauseAnswersObj = {};
if (damageCauseAnswers) {
// eslint-disable-next-line no-restricted-syntax
for (const answer of Object.values(damageCauseAnswers)) {
if (answer?.Name) {
damageCauseAnswersObj[answer.Name] = answer.Name;
}
}
}
return damageCauseAnswersObj;
}, },
mixins: [BaseFormMixin], DamageGlassOnlyOptions() {
async beforeRouteEnter(to, from, next) { return this.getCmsContent("GlassOnlyQuestion", "Answers");
// Call APIs },
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); DamageGlassOnlyQuestion() {
const cmsGlobalSiteHeaderContentPromise = fetchGlobalCmsContent('iss-siteheader'); return this.getCmsContent("GlassOnlyQuestion", "QuestionText");
},
// Settle promises and get results displayDamageCityQuestion() {
const promiseResultMap = [ return !!this.getCmsContent("DamageCityQuestion", "QuestionText");
{ },
resultKey: 'cmsContent', displayDamageStateQuestion() {
promise: cmsContentPromise return !!this.getCmsContent("DamageStateQuestion", "QuestionText");
}, },
{ displayGlassOnlyQuestion() {
resultKey: 'globalSiteHeaderCmsContent', return !!this.getCmsContent("GlassOnlyQuestion", "QuestionText");
promise: cmsGlobalSiteHeaderContentPromise },
} getStates() {
]; return states;
},
// use resultMap to populate layout content. isPolicyHolderDisabled() {
const resultMap = await settleAllPromises(promiseResultMap); return !!this.mainStore.issConfig.disabledFields.policyNumber;
next((vm) => { },
updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent); isPolicyZipDisabled() {
vm.setCmsContent(resultMap.cmsContent); return !!this.mainStore.issConfig.disabledFields.policyZipCode;
},
isDateOfLossDisabled() {
return !!this.mainStore.issConfig.disabledFields.dateOfLoss;
},
isCoverageEnabled() {
return this.mainStore.issConfig.isCoverageEnabled;
},
maxCoverageLookupAttemptsReached() {
return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
},
},
methods: {
async forwardButtonAction() {
await this.mainStore
.validateZip({ zip: this.welcomePageModel.policyZipCode })
.then(async (zipInfo) => {
if (zipInfo?.data?.isValid === true) {
this.mainStore.updatePolicyData(this.welcomePageModel);
await this.mainStore
.getDuplicateReferrals()
.then(
() => {},
() => {}
)
.finally(async () => {
if (
this.isCoverageEnabled &&
!this.maxCoverageLookupAttemptsReached
) {
await this.mainStore.getCoveragePolicyInfo()?.then(
() => {},
() => {}
);
} else {
this.mainStore.order.policy.policyLookupSuccessful = false;
}
this.navigateForward();
});
} else {
this.displayInvalidZipAlert = true;
this.$refs.siteFooter.removeLoader();
}
}); });
}, },
setup() { navigateForward() {
const mainStore = useMainStore(); if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
this.$router.navigate(
// Set order account number from the issConfig. this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
mainStore.order.accountNumber = mainStore.issConfig.parentAccountNumber; this.$route,
{},
return { mainStore }; { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
}, );
data() { } else if (this.mainStore.policy.policyLookupSuccessful) {
return { if (this.mainStore.order.policy.vehicles?.length > 0 ?? false) {
welcomePageModel: this.getWelcomePageModelFromStore(), // navigate to policy-vehicles page
displayInvalidZipAlert: false, this.$router.navigate(
duplicates: [], this.navigationScenarios
rules: { .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
damageOption: 'damage-option-required', this.$route,
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`, {},
lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`, { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
// eslint-disable-next-line max-len );
lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`, } else {
lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`, // navigate to vehicle-selection page (manual entry)
policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`, this.$router.navigate(
policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`, this.navigationScenarios
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}` .CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
} this.$route,
}; {},
}, { [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
computed: { );
DamageCauseOptions() {
const damageCauseAnswers = this.getCmsContent('DamageCauseQuestion', 'Answers');
const damageCauseAnswersObj = {};
if (damageCauseAnswers) {
// eslint-disable-next-line no-restricted-syntax
for (const answer of Object.values(damageCauseAnswers)) {
if (answer?.Name) {
damageCauseAnswersObj[answer.Name] = answer.Name;
}
}
}
return damageCauseAnswersObj;
},
DamageGlassOnlyOptions() {
return this.getCmsContent('GlassOnlyQuestion', 'Answers');
},
DamageGlassOnlyQuestion() {
return this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
},
displayDamageCityQuestion() {
return !!this.getCmsContent('DamageCityQuestion', 'QuestionText');
},
displayDamageStateQuestion() {
return !!this.getCmsContent('DamageStateQuestion', 'QuestionText');
},
displayGlassOnlyQuestion() {
return !!this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
},
getStates() {
return states;
},
isPolicyHolderDisabled() {
return !!this.mainStore.issConfig.disabledFields.policyNumber;
},
isPolicyZipDisabled() {
return !!this.mainStore.issConfig.disabledFields.policyZipCode;
},
isDateOfLossDisabled() {
return !!this.mainStore.issConfig.disabledFields.dateOfLoss;
},
isCoverageEnabled() {
return this.mainStore.issConfig.isCoverageEnabled;
},
maxCoverageLookupAttemptsReached() {
return this.mainStore.applicationUser.coverageLookupAttempts >= 11;
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
} }
} else {
// if policy lookup is unsuccessful, navigate to policy-holder-details page
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
this.$route,
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
);
}
}, },
methods: { getWelcomePageModelFromStore() {
async forwardButtonAction() { return {
await this.mainStore.validateZip({ zip: this.welcomePageModel.policyZipCode }) policyNumber: this.mainStore.order.policy.policyNumber,
.then(async (zipInfo) => { policyZipCode: this.mainStore.order.policy.policyZipCode,
if (zipInfo?.data?.isValid === true) { dateOfLoss: this.mainStore.order.policy.dateOfLoss,
this.mainStore.updatePolicyData(this.welcomePageModel); damageCause: this.mainStore.order.policy.damageCause,
await this.mainStore.getDuplicateReferrals() damageState: this.mainStore.order.policy.damageState,
.then(() => {}, () => {}) damageCity: this.mainStore.order.policy.damageCity,
.finally(async () => { isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
if (this.isCoverageEnabled && !this.maxCoverageLookupAttemptsReached) { phoneNumber: this.mainStore.order.customer.phoneNumber,
await this.mainStore.getCoveragePolicyInfo()?.then(() => {}, () => {}); email: this.mainStore.order.customer.emailAddress,
} else { isPolicyNumberDisabled:
this.mainStore.order.policy.policyLookupSuccessful = false; this.mainStore.order.policy.isPolicyNumberDisabled,
} };
this.navigateForward(); },
}); },
} else {
this.displayInvalidZipAlert = true;
this.$refs.siteFooter.removeLoader();
}
});
},
navigateForward() {
if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES,
this.$route,
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
);
} else if (this.mainStore.policy.policyLookupSuccessful) {
if (this.mainStore.order.policy.vehicles?.length > 0 ?? false) {
// navigate to policy-vehicles page
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
this.$route,
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
);
} else {
// navigate to vehicle-selection page (manual entry)
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
this.$route,
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
);
}
} else {
// if policy lookup is unsuccessful, navigate to policy-holder-details page
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
this.$route,
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true }
);
}
},
getWelcomePageModelFromStore() {
return {
policyNumber: this.mainStore.order.policy.policyNumber,
policyZipCode: this.mainStore.order.policy.policyZipCode,
dateOfLoss: this.mainStore.order.policy.dateOfLoss,
damageCause: this.mainStore.order.policy.damageCause,
damageState: this.mainStore.order.policy.damageState,
damageCity: this.mainStore.order.policy.damageCity,
isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly,
phoneNumber: this.mainStore.order.customer.phoneNumber,
email: this.mainStore.order.customer.emailAddress,
isPolicyNumberDisabled: this.mainStore.order.policy.isPolicyNumberDisabled
};
}
}
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.page-container-grouped-styles.welcome { .container-fluid {
height: auto; height: 100dvh;
} }
@-moz-document url-prefix() { @-moz-document url-prefix() {
// Temporary solution that prevents the Continue button from being hidden in Firefox // Temporary solution that prevents the Continue button from being hidden in Firefox
#welcomeFooter { #welcomeFooter {
position: static !important; position: static !important;
} }
// Fixes Firefox styling defect for placeholder text in dropdown fields // Fixes Firefox styling defect for placeholder text in dropdown fields
#welcomeDropdown { #welcomeDropdown {
.form-select { .form-select {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
}
} }
}
} }
</style> </style>

102
src/styles/common-styles.scss
View file

@ -1,35 +1,52 @@
// Common/Global Styles // Common/Global Styles
// Use this file for global styles that don't or won't have their own stylesheet // Use this file for global styles that don't or won't have their own stylesheet
html, body {
height: 100%;
}
body { body {
font-size: 16px; font-size: 16px;
background-color: #fff; background-color: #fff;
color: #4D5151; color: #4d5151;
.container-fluid { .container-fluid {
max-width: 576px; //Remove once desktop app is complete
&.container-shadow {
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15); //Use instead of Bootstrap's helper
}
&.make-tall {
height: 100vh;
display: flex;
flex-direction: column;
}
.prevent-squish { .prevent-squish {
overflow-x: unset; overflow-x: unset;
} }
&.page-container-grouped-styles {
overflow: hidden;
display: flex;
flex-direction: column;
}
// Set max-width on columns to prevent overly-wide
// components on extra wide screens.
.col-md-6 {
max-width: 472px;
@include media-breakpoint-up(xl) {
max-width: 708px;
}
.col {
max-width: 236px;
&.one-list-card-width {
max-width: 472px;
@include media-breakpoint-up(xl) {
max-width: 66.6666666%;
}
}
}
}
.col-xl-4 {
max-width: 472px;
.col {
max-width: 100%;
}
}
//END set max-width on columns
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.container, .container,
.container-fluid { .container-fluid {
overflow: hidden; overflow-x: hidden;
} }
.sub-container { .sub-container {
@ -38,7 +55,6 @@ body {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden;
} }
} }
@ -50,50 +66,12 @@ body {
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
} }
}
.pac-container { .modal-open {
z-index: 10000 !important; .container-fluid {
} &.page-container-grouped-styles {
.page-container-grouped-styles {
@extend .container-fluid, .shadow, .p-0, .position-relative, .make-tall;
}
//Footer modal backdrop adjustments for positioning
.modal-backdrop {
left: 50%;
transform: translateX(-50%);
max-width: 576px;
&.show {
opacity: 0.4;
}
}
// Scroll page when modal isn't open
.fade-on-route-transition {
height: calc(100% - 10px);
overflow: auto;
}
// Prevent scroll when modal is open
&.modal-open {
div.page-container-grouped-styles {
overflow: hidden;
}
.fade-on-route-transition {
overflow: hidden; overflow: hidden;
height: auto;
} }
} }
}
.modal-text {
display: inline;
color: $blue;
cursor: pointer;
border: none;
font-size: 14px;
line-height: 24px;
font-weight: 500;
}
}

9
src/styles/ux-variables.scss
View file

@ -180,13 +180,12 @@ $spacers: (
//Line Height //Line Height
//Grid breakpoints //Bootstrap Grid Breakpoints - Use these breakpoints only
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
sm: 576px, md: 768px,
md: 838px, xl: 1200px,
lg: 1074px, xxl: 1440px,
xl: 1416px,
); );
//Shadow //Shadow