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

WIP update files with updated ESLint settings.

Browse source
This commit is contained in:
Bryan Mauger 2024-04-15 09:22:44 -04:00
parent fa3c7711f6
commit 7e5c8fd1b6
17 changed files with 3204 additions and 3369 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package-lock.json generated
View file

@ -37,7 +37,7 @@
"@vue/vue3-jest": "^27.0.0-alpha.1", "@vue/vue3-jest": "^27.0.0-alpha.1",
"axios-mock-adapter": "^1.21.5", "axios-mock-adapter": "^1.21.5",
"babel-jest": "^27.0.6", "babel-jest": "^27.0.6",
"eslint": "8.45.0", "eslint": "^8.45.0",
"eslint-config-airbnb-base": "15.0.0", "eslint-config-airbnb-base": "15.0.0",
"eslint-import-resolver-alias": "1.1.2", "eslint-import-resolver-alias": "1.1.2",
"eslint-plugin-import": "2.26.0", "eslint-plugin-import": "2.26.0",

4
package.json
View file

@ -44,7 +44,7 @@
"@vue/vue3-jest": "^27.0.0-alpha.1", "@vue/vue3-jest": "^27.0.0-alpha.1",
"axios-mock-adapter": "^1.21.5", "axios-mock-adapter": "^1.21.5",
"babel-jest": "^27.0.6", "babel-jest": "^27.0.6",
"eslint": "8.45.0", "eslint": "^8.45.0",
"eslint-config-airbnb-base": "15.0.0", "eslint-config-airbnb-base": "15.0.0",
"eslint-import-resolver-alias": "1.1.2", "eslint-import-resolver-alias": "1.1.2",
"eslint-plugin-import": "2.26.0", "eslint-plugin-import": "2.26.0",
@ -61,4 +61,4 @@
"vitest": "^0.33.0", "vitest": "^0.33.0",
"volar-service-vetur": "latest" "volar-service-vetur": "latest"
} }
} }

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

@ -3,19 +3,19 @@
<img :src="footerImageURL" /> <img :src="footerImageURL" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "footer-image", name: 'footer-image',
props: { props: {
cmsWidgetName: String, cmsWidgetName: String
}, },
computed: { computed: {
footerImageURL() { footerImageURL() {
return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL'); return this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.footerImage { .footerImage {

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

@ -1,47 +1,50 @@
<template> <template>
<div> <div>
<footer <footer
id="infoBox" id="infoBox"
class="footer container-fluid g-5 my-5 px-0"> class="footer container-fluid g-5 my-5 px-0">
<div <div
class="row d-flex vw-100 mx-0" class="row d-flex vw-100 mx-0"
:class="[ :class="[
isStackedVertically isStackedVertically
? 'flex-column align-items-stretch' ? 'flex-column align-items-stretch'
: 'flex-row-reverse align-items-center' : 'flex-row-reverse align-items-center',
]"> ]">
<div <div
id="stacked" id="stacked"
class="col button-col d-flex px-0"> class="col button-col d-flex px-0">
<buttonMain <buttonMain
v-if="!isForwardButtonHidden" v-if="!isForwardButtonHidden"
ref="buttonMain" ref="buttonMain"
isPrimary isPrimary
:buttonText="buttonText" :buttonText="buttonText"
loaderColor="white" loaderColor="white"
:class="(disableForwardAction || isForwardActionDisabled) && 'form-test-invalid'" :class="
:aria-disabled="isForwardActionDisabled" (disableForwardAction || isForwardActionDisabled) &&
:isDisabled="isForwardActionDisabled" 'form-test-invalid'
data-bs-target="#footerModal" "
data-bs-dismiss="modal" :aria-disabled="isForwardActionDisabled"
data-test-id="site-footer-main-button" :isDisabled="isForwardActionDisabled"
@clickEvent="buttonClick" /> data-bs-target="#footerModal"
</div> data-bs-dismiss="modal"
<div data-test-id="site-footer-main-button"
v-if="!isBackButtonHidden" @clickEvent="buttonClick" />
class="col-auto link-col py-1 px-0 text-break"> </div>
<textLink <div
linkType="navigation" v-if="!isBackButtonHidden"
:text="backLink" class="col-auto link-col py-1 px-0 text-break">
href="javascript:void(0)" <textLink
data-bs-target="#footerModal" linkType="navigation"
data-bs-dismiss="modal" :text="backLink"
data-test-id="site-footer-back-button" href="javascript:void(0)"
@clickEvent="linkClick" /> data-bs-target="#footerModal"
</div> data-bs-dismiss="modal"
</div> data-test-id="site-footer-back-button"
</footer> @clickEvent="linkClick" />
</div> </div>
</div>
</footer>
</div>
</template> </template>
<script> <script>
@ -53,7 +56,7 @@ export default {
name: 'site-footer', name: 'site-footer',
components: { components: {
textLink, textLink,
buttonMain, buttonMain
}, },
props: { props: {
isForwardActionDisabled: Boolean, isForwardActionDisabled: Boolean,
@ -80,18 +83,20 @@ 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'); const output = this.getCmsContent(this.cmsWidgetName, 'FooterImageURL');
console.log("original image", output); console.log('original image', output);
return output; return output;
}, },
includeFooterImage() { includeFooterImage() {
const currentPageName = this.getPageNameByQueryString(); const currentPageName = this.getPageNameByQueryString();
return (currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE); return currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE;
} }
}, },
mounted() { mounted() {
this.paddingHeight = this.includeFooterImage ? this.getFooterInfoBoxHeight() + 16 : this.getFooterInfoBoxHeight() + 24; this.paddingHeight = this.includeFooterImage
? this.getFooterInfoBoxHeight() + 16
: this.getFooterInfoBoxHeight() + 24;
this.$nextTick(() => { this.$nextTick(() => {
window.addEventListener('resize', this.onResize); window.addEventListener('resize', this.onResize);
}); });
@ -133,63 +138,60 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.footer { .footer {
display: flex;
overflow: visible;
a {
display: flex; display: flex;
overflow: visible; justify-content: center;
a { }
display: flex; .col,
justify-content: center; .col-auto,
} .col button {
width: 100%;
}
@media only screen and (min-width: 340px) {
.col, .col,
.col-auto, .col-auto,
.col button { .col button {
width: 100%; width: auto;
justify-content: flex-end;
} }
@media only screen and (min-width: 340px) { .btn-primary {
.col, width: auto;
.col-auto,
.col button {
width: auto;
justify-content: flex-end;
}
.btn-primary {
width: auto;
}
a {
display: flex;
justify-content: flex-start;
}
} }
a {
display: flex;
justify-content: flex-start;
}
}
& > .container-fluid { & > .container-fluid {
overflow-x: visible; // needed to fix hidden footer on some iphones overflow-x: visible; // needed to fix hidden footer on some iphones
}
div.flex-column {
.btn-primary {
width: 100%;
justify-content: center;
} }
div.flex-column { div.link-col {
.btn-primary { display: flex;
width: 100%; justify-content: center;
justify-content: center; margin-top: 1.25rem;
}
div.link-col {
display: flex;
justify-content: center;
margin-top: 1.25rem;
}
} }
}
} }
.footerImage .footerImage {
{ text-align: center;
text-align: center; position: sticky;
position: sticky;
} }
@media only screen and (max-width: 340px) { @media only screen and (max-width: 340px) {
.footerImage .footerImage {
{ bottom: 78px;
bottom: 78px; }
}
} }
#siteFooterImage #siteFooterImage {
{ width: 100%;
width: 100%;
} }
</style> </style>

237
src/layouts/contact-details/contact-details.vue
View file

@ -3,12 +3,13 @@
ref="contact-details-form" ref="contact-details-form"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
<siteHeader ref="siteHeader" :cmsWidgetName="widget.siteHeader" /> <siteHeader
ref="siteHeader"
:cmsWidgetName="widget.siteHeader" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -17,8 +18,7 @@
id="sub-header" id="sub-header"
ref="siteSubHeader" ref="siteSubHeader"
class="mt-5" class="mt-5"
:cmsWidgetName="widget.siteSubHeader" :cmsWidgetName="widget.siteSubHeader" />
/>
<textboxQuestion <textboxQuestion
ref="firstNameQuestion" ref="firstNameQuestion"
v-model="firstName" v-model="firstName"
@ -26,8 +26,7 @@
inputId="firstName" inputId="firstName"
:cmsWidgetName="widget.firstNameQuestion" :cmsWidgetName="widget.firstNameQuestion"
isRequired isRequired
:validationRules="rules.firstName" :validationRules="rules.firstName" />
/>
<textboxQuestion <textboxQuestion
ref="lastNameQuestion" ref="lastNameQuestion"
v-model="lastName" v-model="lastName"
@ -35,8 +34,7 @@
inputId="lastName" inputId="lastName"
:cmsWidgetName="widget.lastNameQuestion" :cmsWidgetName="widget.lastNameQuestion"
isRequired isRequired
:validationRules="rules.lastName" :validationRules="rules.lastName" />
/>
<textboxQuestion <textboxQuestion
ref="emailQuestion" ref="emailQuestion"
v-model="emailAddress" v-model="emailAddress"
@ -44,8 +42,7 @@
inputId="emailAddress" inputId="emailAddress"
:cmsWidgetName="widget.emailQuestion" :cmsWidgetName="widget.emailQuestion"
isRequired isRequired
:validationRules="rules.emailAddress" :validationRules="rules.emailAddress" />
/>
<textboxQuestion <textboxQuestion
ref="phoneNumberQuestion" ref="phoneNumberQuestion"
v-model="phoneNumber" v-model="phoneNumber"
@ -54,8 +51,7 @@
:cmsWidgetName="widget.phoneNumberQuestion" :cmsWidgetName="widget.phoneNumberQuestion"
isRequired isRequired
:mask="phoneMask" :mask="phoneMask"
:validationRules="rules.phoneNumber" :validationRules="rules.phoneNumber" />
/>
<checkbox <checkbox
ref="requestTextUpdatesCheckbox" ref="requestTextUpdatesCheckbox"
v-model="requestTextUpdates" v-model="requestTextUpdates"
@ -63,8 +59,7 @@
class="mt-3" class="mt-3"
checkboxName="requestTextUpdates" checkboxName="requestTextUpdates"
buttonID="requestTextUpdates" buttonID="requestTextUpdates"
:checkboxLabel="requestTextUpdatesCheckboxText" :checkboxLabel="requestTextUpdatesCheckboxText" />
/>
<textareaQuestion <textareaQuestion
ref="notesQuestion" ref="notesQuestion"
v-model="notesForTechnician" v-model="notesForTechnician"
@ -74,25 +69,24 @@
:isRequired="false" :isRequired="false"
:cmsWidgetName="widget.notesQuestion" :cmsWidgetName="widget.notesQuestion"
maxLength="250" maxLength="250"
:inputRows="4" :inputRows="4" />
/> <p
<p ref="disclaimerText" class="caption dark-gray mt-6"> ref="disclaimerText"
class="caption dark-gray mt-6">
{{ textUpdateDisclaimerText }} I also agree to Safelite's {{ textUpdateDisclaimerText }} I also agree to Safelite's
<textLink <textLink
ref="privacyPolicyLink" ref="privacyPolicyLink"
class="normal-line-height" class="normal-line-height"
linkType="text" linkType="text"
text="Privacy Policy" text="Privacy Policy"
href="//www.safelite.com/privacy-center" href="//www.safelite.com/privacy-center" />
/>
and and
<textLink <textLink
ref="termsOfUseLink" ref="termsOfUseLink"
class="normal-line-height" class="normal-line-height"
linkType="text" linkType="text"
text="Terms of Use" text="Terms of Use"
href="//www.safelite.com/terms-of-use" href="//www.safelite.com/terms-of-use" />.
/>.
</p> </p>
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
@ -100,8 +94,7 @@
:cmsWidgetName="widget.siteFooter" :cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction"
@backClicked="navigateBack" @backClicked="navigateBack" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -109,117 +102,117 @@
</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 siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue"; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import textboxQuestion from "@/digital-components/textbox-question/textbox-question.vue"; import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
import checkbox from "@/ux-components/checkbox/checkbox.vue"; import checkbox from '@/ux-components/checkbox/checkbox.vue';
import textareaQuestion from "@/digital-components/textarea-question/textarea-question.vue"; import textareaQuestion from '@/digital-components/textarea-question/textarea-question.vue';
import textLink from "@/ux-components/text-link/text-link.vue"; import textLink from '@/ux-components/text-link/text-link.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 { 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 MaskaFormattedMasks from "@/constants/maska-masks"; import MaskaFormattedMasks from '@/constants/maska-masks';
export default { export default {
name: "contact-details", name: 'contact-details',
components: { components: {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
textboxQuestion, textboxQuestion,
checkbox, checkbox,
textareaQuestion, textareaQuestion,
siteFooter, siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
textLink, textLink
}, },
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() { data() {
const { const {
firstName, firstName,
lastName, lastName,
emailAddress, emailAddress,
phoneNumber, phoneNumber,
requestTextUpdates, requestTextUpdates,
notesForTechnician, notesForTechnician
} = useMainStore().contactInfo; } = useMainStore().contactInfo;
return { return {
firstName, firstName,
lastName, lastName,
emailAddress, emailAddress,
phoneNumber, phoneNumber,
requestTextUpdates, requestTextUpdates,
notesForTechnician, notesForTechnician,
widget: { widget: {
siteHeader: "SiteHeaderWidget", siteHeader: 'SiteHeaderWidget',
siteSubHeader: "SiteSubHeaderWidget", siteSubHeader: 'SiteSubHeaderWidget',
firstNameQuestion: "FirstNameQuestionWidget", firstNameQuestion: 'FirstNameQuestionWidget',
lastNameQuestion: "LastNameQuestionWidget", lastNameQuestion: 'LastNameQuestionWidget',
emailQuestion: "EmailQuestionWidget", emailQuestion: 'EmailQuestionWidget',
phoneNumberQuestion: "PhoneNumberQuestionWidget", phoneNumberQuestion: 'PhoneNumberQuestionWidget',
requestTextUpdates: "TextContentWidget", requestTextUpdates: 'TextContentWidget',
notesQuestion: "NotesQuestionWidget", notesQuestion: 'NotesQuestionWidget',
disclaimer: "TextUpdateDisclaimerWidget", disclaimer: 'TextUpdateDisclaimerWidget',
siteFooter: "SiteFooterWidget", siteFooter: 'SiteFooterWidget'
}, },
rules: { rules: {
firstName: globalRules.FIRST_NAME_REQUIRED, firstName: globalRules.FIRST_NAME_REQUIRED,
lastName: globalRules.LAST_NAME_REQUIRED, lastName: globalRules.LAST_NAME_REQUIRED,
emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`, emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`, phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
}, }
}; };
}, },
computed: { computed: {
/** /**
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox. * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/ */
requestTextUpdatesCheckboxText() { requestTextUpdatesCheckboxText() {
return `${this.getCmsContent(this.widget.requestTextUpdates, "Text")}*`; return `${this.getCmsContent(this.widget.requestTextUpdates, 'Text')}*`;
},
/**
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/
textUpdateDisclaimerText() {
return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
}
}, },
/** methods: {
* @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/
textUpdateDisclaimerText() {
return `*${this.getCmsContent(this.widget.disclaimer, "Text")}`;
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
},
},
methods: {
/** /**
* @summary Steps to perform when forward button clicked. * @summary Steps to perform when forward button clicked.
*/ */
forwardButtonAction() { forwardButtonAction() {
const contactInfo = { const contactInfo = {
firstName: this.firstName, firstName: this.firstName,
lastName: this.lastName, lastName: this.lastName,
emailAddress: this.emailAddress, emailAddress: this.emailAddress,
phoneNumber: this.phoneNumber, phoneNumber: this.phoneNumber,
requestTextUpdates: this.requestTextUpdates, requestTextUpdates: this.requestTextUpdates,
notesForTechnician: this.notesForTechnician, notesForTechnician: this.notesForTechnician
}; };
useMainStore().updateContactInfo(contactInfo); useMainStore().updateContactInfo(contactInfo);
const scenario = const scenario =
useMainStore().order.serviceLocation.IsSafeliteProvider === false useMainStore().order.serviceLocation.IsSafeliteProvider === false
? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP ? this.navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
: this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP; : this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE_SHOP;
this.$router.navigate(scenario, this.$route); this.$router.navigate(scenario, this.$route);
}, }
}, }
}; };
</script> </script>

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

@ -3,13 +3,16 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
<loadingModal ref="loadingModal" :textSlides="loadingText" /> <loadingModal
<siteHeader ref="siteHeader" cmsWidgetName="SiteHeaderWidget" /> ref="loadingModal"
:textSlides="loadingText" />
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-center pt-5"> <div class="row justify-content-center pt-5">
@ -17,34 +20,28 @@
<h5 <h5
ref="siteSubHeader" ref="siteSubHeader"
class="text-center text-black" class="text-center text-black"
v-html="coverageStatementSubHeader" v-html="coverageStatementSubHeader"></h5>
></h5>
<div <div
ref="explanatoryText" ref="explanatoryText"
class="body-text text-center mt-2" class="body-text text-center mt-2"
v-html="explanatoryText" v-html="explanatoryText"></div>
></div>
<div <div
ref="secondaryText" ref="secondaryText"
class="text-center mt-4 mb-1 fw-bold text-black" class="text-center mt-4 mb-1 fw-bold text-black"
v-html="secondaryText" v-html="secondaryText"></div>
></div>
<div <div
v-if="verifiedDeductible" v-if="verifiedDeductible"
class="d-flex justify-content-center cost" class="d-flex justify-content-center cost">
>
{{ deductibleForDisplay }} {{ deductibleForDisplay }}
</div> </div>
<div <div
v-if="isQuoteDisplayed" v-if="isQuoteDisplayed"
class="d-flex justify-content-center cost mb-0" class="d-flex justify-content-center cost mb-0">
>
{{ servicePriceForDisplay }} {{ servicePriceForDisplay }}
</div> </div>
<div <div
v-if="verifiedITAC" v-if="verifiedITAC"
class="d-flex justify-content-center mb-4 deductible-text" class="d-flex justify-content-center mb-4 deductible-text">
>
{{ deductibleText }}&nbsp; {{ deductibleText }}&nbsp;
<span class="text-success fw-bold">{{ deductibleForDisplay }}</span> <span class="text-success fw-bold">{{ deductibleForDisplay }}</span>
</div> </div>
@ -56,14 +53,14 @@
:manualHeadline="verifiedItacAlertHeader" :manualHeadline="verifiedItacAlertHeader"
:manualCopy="verifiedItacAlertBody" :manualCopy="verifiedItacAlertBody"
alertClass="alert-success" alertClass="alert-success"
:isDismissible="false" :isDismissible="false">
>
</alert> </alert>
<div <div
class="fw-bold text-black mt-5 mb-2" class="fw-bold text-black mt-5 mb-2"
v-html="nextStepsHeader" v-html="nextStepsHeader"></div>
></div> <div
<div class="body-text" v-html="nextStepsBody"></div> class="body-text"
v-html="nextStepsBody"></div>
<buttonQuestion <buttonQuestion
v-if="isQuoteDisplayed" v-if="isQuoteDisplayed"
v-model="selectedProvider" v-model="selectedProvider"
@ -73,407 +70,393 @@
groupName="ServiceProviderQuestionOption" groupName="ServiceProviderQuestionOption"
buttonTypeString="listButton" buttonTypeString="listButton"
isRequired isRequired
:validationRules="rules.selectionRequired" :validationRules="rules.selectionRequired">
>
</buttonQuestion> </buttonQuestion>
<text-block <text-block
v-if="isQuoteDisplayed" v-if="isQuoteDisplayed"
cmsWidgetName="DisclaimerWidget" cmsWidgetName="DisclaimerWidget"
typeStyle="caption" typeStyle="caption" />
/>
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
class="mt-5" class="mt-5"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@backClicked="navigateBackByVehicleQuestions" @backClicked="navigateBackByVehicleQuestions"
@forwardClicked="navigateForward" @forwardClicked="navigateForward" />
/>
</div> </div>
</div> </div>
</div> </div>
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" /> <recalModal
ref="RecalModal"
cmsWidgetName="RecalModal" />
<contentGroupModal <contentGroupModal
ref="DeductibleModal" ref="DeductibleModal"
cmsWidgetName="DeductibleModal" cmsWidgetName="DeductibleModal"
class="deductible-modal" 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 { import {
fetchCmsContentForPage, fetchCmsContentForPage,
setupModalLinks, setupModalLinks,
processIfStatements, processIfStatements
} from "@/helpers/cms-content-helper.js"; } from '@/helpers/cms-content-helper.js';
import settleAllPromises from "@/helpers/layout-helper.js"; import settleAllPromises from '@/helpers/layout-helper.js';
import { getDamageString } from "@/helpers/damage-helper.js"; import { getDamageString } from '@/helpers/damage-helper.js';
import { useMainStore } from "@/store/index.js"; import { useMainStore } from '@/store/index.js';
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin.js"; import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
import globalRules from "@/constants/global-rules.js"; import globalRules from '@/constants/global-rules.js';
import baseFormMixin from "@/mixins/base-form-mixin.js"; import baseFormMixin from '@/mixins/base-form-mixin.js';
import navigationScenarios from "@/router/router-constants/navigation-scenarios.js"; import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
import issPageValues from "@/router/router-constants/issPage-values"; import issPageValues from '@/router/router-constants/issPage-values';
import bailoutMessage from "@/constants/bailoutMessage"; import bailoutMessage from '@/constants/bailoutMessage';
import coverageStatuses from "@/constants/coverage-statuses"; import coverageStatuses from '@/constants/coverage-statuses';
import widgetFields from "@/constants/cms-widget-fields.js"; import widgetFields from '@/constants/cms-widget-fields.js';
import getPriceOfLineItems from "@/helpers/price-calculator.js"; import getPriceOfLineItems from '@/helpers/price-calculator.js';
import { formatAmountInDollars } from "@/helpers/text-helper.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 ( if (
useMainStore().policy.policyLookupSuccessful && useMainStore().policy.policyLookupSuccessful
useMainStore().vehicle.policyVehicleId >= 0 && useMainStore().vehicle.policyVehicleId >= 0
) { ) {
await useMainStore().getFinalDeductible(); await useMainStore().getFinalDeductible();
pricingResults = await useMainStore() pricingResults = await useMainStore()
.getPriceOrderItems(availableLineItems) .getPriceOrderItems(availableLineItems)
.catch((err) => { .catch((err) => {
useMainStore().setBailout( useMainStore().setBailout(bailoutMessage.pricingResponseError(
bailoutMessage.pricingResponseError( availableLineItems.map((li) => li.partNumber),
availableLineItems.map((li) => li.partNumber), { code: err.code, message: err.message, data: err.data }
{ code: err.code, message: err.message, data: err.data } ));
) hasBailedOut = true;
); next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
hasBailedOut = true; });
next(`/?issPage=${issPageValues.BAILOUT_PAGE}`); }
});
} if (!hasBailedOut) {
// Call the "next" function to complete the transition to this page.
if (!hasBailedOut) { next((vm) => {
// Call the "next" function to complete the transition to this page. vm.setCmsContent(resultMap.cmsContent);
next((vm) => { vm.setSupportingItems(resultMap.supportingItems);
vm.setCmsContent(resultMap.cmsContent); // eslint-disable-next-line no-param-reassign
vm.setSupportingItems(resultMap.supportingItems); vm.setBaseServiceLineItems(pricingResults);
// eslint-disable-next-line no-param-reassign vm.$refs.loadingModal.showModal();
vm.setBaseServiceLineItems(pricingResults); vm.initializeComponent();
vm.$refs.loadingModal.showModal(); if (!vm.unverified) {
vm.initializeComponent(); useMainStore().disableKeyFields();
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() { data() {
return this.getCmsContent( const { isRepair } = useMainStore().damage;
this.widget.verifiedItacAlert, const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
widgetFields.ALERT_WIDGET.HEADLINE_TEXT 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'
}
};
}, },
verifiedItacAlertBody() { computed: {
return this.getCmsContent( coverageStatementSubHeader() {
this.widget.verifiedItacAlert, return this.getTextFromCmsWithCustomIfStatements(
widgetFields.ALERT_WIDGET.BODY_TEXT this.widget.subheader,
)?.replaceAll("{custom:costSavings}", this.itacCostSavingsForDisplay); 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)
);
}
}, },
secondaryText() { watch: {
return this.getTextFromCmsWithCustomIfStatements( selectedProvider() {
this.widget.subheader, const buttonText =
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 this.selectedProvider === SAFELITE_PROVIDER
? "Continue with Safelite" ? 'Continue with Safelite'
: "Safelite"; : 'Safelite';
this.$refs.siteFooter.updateButtonText(buttonText); this.$refs.siteFooter.updateButtonText(buttonText);
}, },
nextStepsBody(newValue, oldValue) { nextStepsBody(newValue, oldValue) {
if (newValue !== oldValue) { if (newValue !== oldValue) {
setupModalLinks(this, "RecalModal"); setupModalLinks(this, 'RecalModal');
setupModalLinks(this, "DeductibleModal"); 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) { mounted() {
this.$router.navigate(scenario, this.$route); setupModalLinks(this);
}, },
getTextFromCmsWithCustomIfStatements(widgetName, widgetField) { methods: {
const rawText = this.getCmsContent(widgetName, widgetField); arePagePrerequisitesValid() {
return processIfStatements( return !!useMainStore().vehicle.carId;
rawText, },
"custom", async initializeComponent() {
this.getCustomValueFromString useMainStore().updatePolicyITACFlag(this.verifiedITAC);
); const coverageStatus =
}, this.verifiedITAC || this.verifiedNoComp
getCustomValueFromString(str) { ? coverageStatuses.VERIFIED
switch (str) { : coverageStatuses.PENDING;
case "coverageUnverified": useMainStore().updateCoverageStatus(coverageStatus);
return this.unverified; if (this.shouldRegisterClaim) {
case "verifiedDeductible": await useMainStore()
return this.verifiedDeductible; .registerClaim()
case "verifiedITAC": ?.catch(() => {});
return this.verifiedITAC; }
case "verifiedNoComp": this.$refs.loadingModal.hideModal();
return this.verifiedNoComp; },
case "ADASReplace": async navigateForward() {
return !this.isRepair && this.isADAS; if (this.unverified || this.verifiedDeductible) {
case "nonADASReplace": useMainStore().updateSupportingItems(this.supportingItems);
return !this.isRepair && !this.isADAS; this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
case "nonADASRepair": } else if (this.verifiedITAC || this.verifiedNoComp) {
return this.isRepair; useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
case "deductibleOverZero": if (this.selectedProvider === SAFELITE_PROVIDER) {
return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative? useMainStore().updateSupportingItems(this.supportingItems);
case "isDeductibleZero": this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
return this.verifiedDeductible && this.deductibleValue === 0; } else {
default: useMainStore().setBailout(bailoutMessage.RequestCallback());
return null; this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
} }
}, } else {
setSupportingItems(newSupportingItems) { useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
this.supportingItems = newSupportingItems; this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
}, }
setBaseServiceLineItems(lineItems) { },
this.baseServiceLineItems = lineItems; 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>

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

@ -3,12 +3,13 @@
ref="duplicate-check-form" ref="duplicate-check-form"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
<siteHeader ref="siteHeader" :cmsWidgetName="widget.siteHeader" /> <siteHeader
ref="siteHeader"
:cmsWidgetName="widget.siteHeader" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -17,8 +18,7 @@
id="sub-header" id="sub-header"
ref="siteSubHeader" ref="siteSubHeader"
class="mt-5 duplicate-check-subheader" class="mt-5 duplicate-check-subheader"
:cmsWidgetName="widget.siteSubHeader" :cmsWidgetName="widget.siteSubHeader" />
/>
<buttonQuestion <buttonQuestion
ref="buttonQuestion" ref="buttonQuestion"
v-model="selectedAnswer" v-model="selectedAnswer"
@ -29,16 +29,14 @@
groupName="existingOrNewQuestionOption" groupName="existingOrNewQuestionOption"
buttonTypeString="listButton" buttonTypeString="listButton"
isRequired isRequired
:validationRules="rules.selectionRequired" :validationRules="rules.selectionRequired" />
/>
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
class="my-5" class="my-5"
:cmsWidgetName="widget.siteFooter" :cmsWidgetName="widget.siteFooter"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction"
@backClicked="navigateBack" @backClicked="navigateBack" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -47,166 +45,166 @@
<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"
);
}, },
answersFromCms() { data() {
return ( return {
this.getCmsContent(this.widget.existingOrNewQuestion, "Answers") ?? [] selectedAnswer: null,
); widget: {
siteHeader: 'SiteHeaderWidget',
siteSubHeader: 'SiteSubHeaderWidget',
existingOrNewQuestion: 'ExistingOrNewQuestion',
siteFooter: 'SiteFooterWidget'
},
rules: {
selectionRequired: globalRules.OPTION_REQUIRED
}
};
}, },
getNewOrderSelectionName() { computed: {
return this.answersFromCms?.[0]?.Name ?? ""; questionText() {
}, return this.getCmsContent(
duplicateOrders() { this.widget.existingOrNewQuestion,
const duplicateOrderText = "Finish Existing Claim"; 'QuestionText'
const orders = useMainStore().applicationUser.duplicateOrders; );
return ( },
orders?.map((o) => { answersFromCms() {
const vehicle = 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
? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}` ? `${o.vehicleYear} ${o.vehicleMake} ${o.vehicleModel}`
: null; : null;
const dateOfLoss = const dateOfLoss =
o.responseDate == null o.responseDate == null
? "" ? ''
: new Date(o.responseDate).toLocaleDateString(); : new Date(o.responseDate).toLocaleDateString();
const subtext = const subtext =
vehicle && o.responseDate vehicle && o.responseDate
? `${vehicle}, ${dateOfLoss}` ? `${vehicle}, ${dateOfLoss}`
: (vehicle ?? "").concat(dateOfLoss); : (vehicle ?? '').concat(dateOfLoss);
return { return {
Text: duplicateOrderText, Text: duplicateOrderText,
Name: o.referralNumber, Name: o.referralNumber,
SubText: toTitleCase(subtext), SubText: toTitleCase(subtext),
value: o, value: o
}; };
}) ?? [] }) ?? []
); );
},
answers() {
return [...this.duplicateOrders, ...this.answersFromCms];
}
}, },
answers() { methods: {
return [...this.duplicateOrders, ...this.answersFromCms];
},
},
methods: {
/** /**
* @summary Steps to perform when forward button clicked. * @summary Steps to perform when forward button clicked.
*/ */
async forwardButtonAction() { async forwardButtonAction() {
if ( if (
this.selectedAnswer !== null && this.selectedAnswer !== null
typeof this.selectedAnswer === "object" && typeof this.selectedAnswer === 'object'
) { ) {
await useMainStore() await useMainStore()
.loadSession(this.selectedAnswer) .loadSession(this.selectedAnswer)
.catch(() => {}) .catch(() => {})
.finally(() => { .finally(() => {
this.navigateForward();
});
return;
}
this.navigateForward(); this.navigateForward();
}); },
return; navigateForward() {
} if (!this.mainStore.order.policy.policyLookupSuccessful) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED,
this.$route
);
return;
}
this.navigateForward(); const policyVehicles = useMainStore().order.policy.vehicles ?? [];
}, if (!this.mainStore.order.loadedFromDupeCheck) {
navigateForward() { if (policyVehicles.length !== 0) {
if (!this.mainStore.order.policy.policyLookupSuccessful) { this.$router.navigate(
this.$router.navigate( this.navigationScenarios
this.navigationScenarios.CLICKED_FORWARD_POLICY_UNVERIFIED, .CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES,
this.$route this.$route
); );
return; } else {
} this.$router.navigate(
this.navigationScenarios
.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES,
this.$route
);
}
return;
}
const policyVehicles = useMainStore().order.policy.vehicles ?? []; if (this.mainStore.order.vehicle.vin) {
if (!this.mainStore.order.loadedFromDupeCheck) { this.$router.navigate(
if (policyVehicles.length !== 0) { this.navigationScenarios
this.$router.navigate( .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_POLICY_VEHICLE,
this.navigationScenarios this.$route
.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES, );
this.$route } else if (policyVehicles.length !== 0) {
); this.$router.navigate(
} else { this.navigationScenarios
this.$router.navigate( .CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NON_POLICY_VEHICLE,
this.navigationScenarios this.$route
.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES, );
this.$route } else {
); this.$router.navigate(
this.navigationScenarios
.CLICKED_FORWARD_LOADED_DUPLICATE_WITH_NO_POLICY_VEHICLES,
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>

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

@ -3,35 +3,33 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
<siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" /> <siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<div class="select-car-form rounded text-center"> <div class="select-car-form rounded text-center">
<vehicleBanner <vehicleBanner
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric" :displayGenericVehicleImage="displayGeneric"
class="mt-2 mb-4" class="mt-2 mb-4" />
/> <policyVehiclesQuestion
<policyVehiclesQuestion v-model="selectedVehicleVin"
v-model="selectedVehicleVin" cmsWidgetName="PolicyVehiclesQuestion"
cmsWidgetName="PolicyVehiclesQuestion" :vehicles="VehiclesForQuestions"
:vehicles="VehiclesForQuestions" :validationRules="rules.optionRequired" />
:validationRules="rules.optionRequired" <siteFooter
/> ref="siteFooter"
<siteFooter cmsWidgetName="SiteFooterWidget"
ref="siteFooter" :isForwardActionDisabled="!meta.valid"
cmsWidgetName="SiteFooterWidget" @ForwardClicked="forwardButtonAction"
:isForwardActionDisabled="!meta.valid" @backClicked="backButtonAction" />
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction"
/>
</div> </div>
</div> </div>
</div> </div>
@ -40,250 +38,236 @@
</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, deductibleForSelectedVehicle,
endorsementsForSelectedVehicle, endorsementsForSelectedVehicle,
noCoverageForSelectedVehicle, noCoverageForSelectedVehicle,
repairWaivedForSelectedVehicle, repairWaivedForSelectedVehicle
} from "@/helpers/policy-vehicle-helper"; } 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;
}, },
noCoverageForSelectedVehicle() { mixins: [BaseFormMixin],
return noCoverageForSelectedVehicle(this.selectedPolicyVehicle); async beforeRouteEnter(to, from, next) {
}, const cmsContentPromise = await fetchCmsContentForPage(to.query.issPage);
deductibleForSelectedVehicle() { next((vm) => {
return deductibleForSelectedVehicle(this.selectedPolicyVehicle); vm.setCmsContent(cmsContentPromise);
},
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() { setup() {
if (this.mainStore.isBailout) { const mainStore = useMainStore();
this.$router.navigate( return { mainStore };
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) { data() {
try { const policyVehicles = useMainStore().order.policy.vehicles;
return await useMainStore().lookupVehicleByVin(vin);
} catch (responseError) {
return { return {
error: true, policyVehicles,
status: responseError.status, selectedVehicleVin: '',
data: responseError.data, 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;
},
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>

363
src/layouts/provider-preference/provider-preference.vue
View file

@ -1,9 +1,14 @@
<template> <template>
<Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> <Form
ref="theForm"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
<siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" /> <siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -11,8 +16,7 @@
<siteSubHeader <siteSubHeader
id="sub-header" id="sub-header"
cmsWidgetName="SiteSubHeader" cmsWidgetName="SiteSubHeader"
class="mb-5 mt-4" class="mb-5 mt-4" />
/>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -25,219 +29,214 @@
groupName="prefQuestions" groupName="prefQuestions"
buttonTypeString="providerPrefRadio" buttonTypeString="providerPrefRadio"
:validationRules="rules.optionRequired" :validationRules="rules.optionRequired"
isRequired isRequired />
/>
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
class="mt-5" class="mt-5"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled" :isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBack" @backClicked="navigateBack"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction" />
/>
</div> </div>
</div> </div>
<recalModal ref="recalModal" cmsWidgetName="RecalModal" /> <recalModal
ref="recalModal"
cmsWidgetName="RecalModal" />
<steeringModal <steeringModal
ref="StateSteeringModal" ref="StateSteeringModal"
cmsWidgetName="StateSteeringModal" cmsWidgetName="StateSteeringModal" />
/>
<shopPreferenceModal <shopPreferenceModal
ref="ShopPreferenceDrawer" ref="ShopPreferenceDrawer"
cmsWidgetName="ShopPreferenceDrawer" cmsWidgetName="ShopPreferenceDrawer"
:showSteeringLink="showSteeringLink" :showSteeringLink="showSteeringLink"
@openSteering="openStateSteeringModal" @openSteering="openStateSteeringModal" />
/>
<tpaRecalModal <tpaRecalModal
ref="TPARecalModal" ref="TPARecalModal"
cmsWidgetName="TPARecalModal" cmsWidgetName="TPARecalModal"
:ackError="ackError" :ackError="ackError"
@buttonClick="navigateWithTPAAck" @buttonClick="navigateWithTPAAck" />
/>
</div> </div>
</Form> </Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
import { import {
fetchCmsContentForPage, fetchCmsContentForPage,
setupModalLinks, setupModalLinks
} from "@/helpers/cms-content-helper"; } from '@/helpers/cms-content-helper';
import settleAllPromises from "@/helpers/layout-helper"; import settleAllPromises from '@/helpers/layout-helper';
import errorMessages from "@/constants/error-messages"; import errorMessages from '@/constants/error-messages';
import buttonQuestion from "@/digital-components/button-question/button-question.vue"; import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import issPageValues from "@/router/router-constants/issPage-values"; import issPageValues from '@/router/router-constants/issPage-values';
// Import Component // Import Component
import baseFormMixin from "@/mixins/base-form-mixin"; import baseFormMixin from '@/mixins/base-form-mixin';
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 siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue"; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-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 steeringModal from "@/layouts/provider-preference/steering-modal/steering-modal.vue"; import steeringModal from '@/layouts/provider-preference/steering-modal/steering-modal.vue';
import shopPreferenceModal from "@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue"; import shopPreferenceModal from '@/layouts/provider-preference/shop-preference-modal/shop-preference-modal.vue';
import tpaRecalModal from "@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue"; import tpaRecalModal from '@/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue';
import globalRules from "@/constants/global-rules"; import globalRules from '@/constants/global-rules';
import bailoutCode from "@/constants/bailoutCode"; import bailoutCode from '@/constants/bailoutCode';
import bailoutMessage from "@/constants/bailoutMessage"; import bailoutMessage from '@/constants/bailoutMessage';
const options = { SAFELITE: "SafeliteOption", TPA: "TPAOption" }; const options = { SAFELITE: 'SafeliteOption', TPA: 'TPAOption' };
export default { export default {
name: "provider-preference", name: 'provider-preference',
components: { components: {
siteFooter, siteFooter,
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
buttonQuestion, buttonQuestion,
recalModal, recalModal,
steeringModal, steeringModal,
shopPreferenceModal, shopPreferenceModal,
tpaRecalModal, tpaRecalModal
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.showSteeringLink = !!vm.$refs.StateSteeringModal.ModalBodyText;
if (vm.showSteeringLink) {
vm.$refs.StateSteeringModal.openModal();
}
});
},
data() {
return {
selectedProvider: null,
showSteeringLink: false,
tpaAcknowledgement: false,
rules: {
optionRequired: globalRules.OPTION_REQUIRED,
},
};
},
computed: {
isForwardActionDisabled() {
return this.selectedProvider === null;
}, },
prefAnswers() { mixins: [baseFormMixin],
const cmsAnswersContent = [ async beforeRouteEnter(to, from, next) {
{ const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
cmsWidgetName: options.SAFELITE, // Settle promises and get results
}, const promiseResultMap = [
{ {
cmsWidgetName: options.TPA, resultKey: 'cmsContent',
}, promise: cmsContentPromise
]; }
// if cms content has not yet loaded, skip ];
if ( const resultMap = await settleAllPromises(promiseResultMap);
!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") || next((vm) => {
this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") === vm.setCmsContent(resultMap.cmsContent);
""
) { vm.showSteeringLink = !!vm.$refs.StateSteeringModal.ModalBodyText;
return {}; if (vm.showSteeringLink) {
} vm.$refs.StateSteeringModal.openModal();
const modifiedAnswers = cmsAnswersContent.map((answer) => ({
value: answer.cmsWidgetName,
buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName),
}));
return modifiedAnswers;
},
ackError() {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
},
},
mounted() {
setupModalLinks(this);
const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
this.selectedProvider = pageData?.selectedProvider
? pageData.selectedProvider
: null;
this.tpaAcknowledgement = pageData?.tpaAcknowledgement
? pageData.tpaAcknowledgement
: false;
},
methods: {
getHeaderTextFromCms(cmsWidgetName) {
const headerText = this.getCmsContent(cmsWidgetName, "HeaderText");
return headerText?.replace(
"{custom:SafeliteLogo}",
"<span class='safeliteLogo'></span>"
);
},
getSubheaderTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, "SubheaderText");
},
getBodyTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, "BodyText");
},
arePagePrerequisiteValid() {
return true;
},
navigateForward(scenario) {
this.$router.navigate(scenario, this.$route);
},
navigateWithTPAAck() {
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement,
});
this.navigateForward(
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED
);
},
forwardButtonAction() {
if (this.selectedProvider) {
let scenario = null;
switch (this.selectedProvider) {
case options.SAFELITE:
this.mainStore.updateIsSafeliteProvider(true);
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
break;
case options.TPA:
this.mainStore.updateIsSafeliteProvider(false);
if (this.mainStore.issConfig.enableTPAFlow) {
if (this.mainStore.hasRecalibrationPart) {
this.$refs.TPARecalModal.openModal();
this.$refs.siteFooter.removeLoader();
return;
}
scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
} else {
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
} }
break;
default:
}
this.navigateForward(scenario);
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement,
}); });
}
}, },
openStateSteeringModal() { data() {
this.$refs.StateSteeringModal.openModal(); return {
selectedProvider: null,
showSteeringLink: false,
tpaAcknowledgement: false,
rules: {
optionRequired: globalRules.OPTION_REQUIRED
}
};
}, },
}, computed: {
isForwardActionDisabled() {
return this.selectedProvider === null;
},
prefAnswers() {
const cmsAnswersContent = [
{
cmsWidgetName: options.SAFELITE
},
{
cmsWidgetName: options.TPA
}
];
// if cms content has not yet loaded, skip
if (
!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
|| this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
=== ''
) {
return {};
}
const modifiedAnswers = cmsAnswersContent.map((answer) => ({
value: answer.cmsWidgetName,
buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName)
}));
return modifiedAnswers;
},
ackError() {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
}
},
mounted() {
setupModalLinks(this);
const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
this.selectedProvider = pageData?.selectedProvider
? pageData.selectedProvider
: null;
this.tpaAcknowledgement = pageData?.tpaAcknowledgement
? pageData.tpaAcknowledgement
: false;
},
methods: {
getHeaderTextFromCms(cmsWidgetName) {
const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
return headerText?.replace(
'{custom:SafeliteLogo}',
"<span class='safeliteLogo'></span>"
);
},
getSubheaderTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, 'SubheaderText');
},
getBodyTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, 'BodyText');
},
arePagePrerequisiteValid() {
return true;
},
navigateForward(scenario) {
this.$router.navigate(scenario, this.$route);
},
navigateWithTPAAck() {
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement
});
this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
},
forwardButtonAction() {
if (this.selectedProvider) {
let scenario = null;
switch (this.selectedProvider) {
case options.SAFELITE:
this.mainStore.updateIsSafeliteProvider(true);
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
break;
case options.TPA:
this.mainStore.updateIsSafeliteProvider(false);
if (this.mainStore.issConfig.enableTPAFlow) {
if (this.mainStore.hasRecalibrationPart) {
this.$refs.TPARecalModal.openModal();
this.$refs.siteFooter.removeLoader();
return;
}
scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
} else {
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
}
break;
default:
}
this.navigateForward(scenario);
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement
});
}
},
openStateSteeringModal() {
this.$refs.StateSteeringModal.openModal();
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

745
src/layouts/schedule-page/schedule-page.vue
View file

@ -3,12 +3,13 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
<siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" /> <siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -16,21 +17,18 @@
<siteSubHeader <siteSubHeader
cmsWidgetName="ScheduleSubHeaderWidget" cmsWidgetName="ScheduleSubHeaderWidget"
subTextClasses="text-center small sub-text" subTextClasses="text-center small sub-text"
class="mt-4" class="mt-4" />
/>
<template v-if="ChangeShopLink.length"> <template v-if="ChangeShopLink.length">
<textBlock <textBlock
cmsWidgetName="ChangeShopLink" cmsWidgetName="ChangeShopLink"
justifyText="center" justifyText="center"
class="mb-3 text-link-small" class="mb-3 text-link-small"
:marginTopSizeOverride="1" :marginTopSizeOverride="1" />
/>
</template> </template>
<div class="main-content-container"> <div class="main-content-container">
<locationAlerts <locationAlerts
ref="locationAlerts" ref="locationAlerts"
cmsWidgetPrefix="LocationAlert-" cmsWidgetPrefix="LocationAlert-" />
/>
<datePicker <datePicker
ref="datePicker" ref="datePicker"
v-model="selectedDate" v-model="selectedDate"
@ -39,8 +37,7 @@
class="text-link-small" class="text-link-small"
:customSelectableDatesCallback="getAvailableDatesMethod" :customSelectableDatesCallback="getAvailableDatesMethod"
validationRules="date-required" validationRules="date-required"
@dateClicked="openInshopTimeSlotsModal" @dateClicked="openInshopTimeSlotsModal" />
/>
<timeSlotModalQuestion <timeSlotModalQuestion
ref="timeSlotModalQuestion" ref="timeSlotModalQuestion"
v-model="selectedTimeSlotInfo" v-model="selectedTimeSlotInfo"
@ -62,16 +59,14 @@
selectableDatesData.estimatedServiceMinutesMaximum selectableDatesData.estimatedServiceMinutesMaximum
" "
validationRules="time-slot-selection-required" validationRules="time-slot-selection-required"
@timeSlotModalClosed="timeSlotModalClosed" @timeSlotModalClosed="timeSlotModalClosed" />
/>
<siteFooter <siteFooter
ref="navbar" ref="navbar"
class="mt-5" class="mt-5"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack" @backClicked="navigateBack"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -80,419 +75,407 @@
</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 siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue"; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import locationAlerts from "@/layouts/schedule-page/location-alerts/location-alerts.vue"; import locationAlerts from '@/layouts/schedule-page/location-alerts/location-alerts.vue';
import datePicker from "@/digital-components/date-picker/date-picker.vue"; import datePicker from '@/digital-components/date-picker/date-picker.vue';
import timeSlotModalQuestion from "@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue"; import timeSlotModalQuestion from '@/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue';
import siteFooter from "@/iss-components/site-footer/site-footer.vue"; import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import textBlock from "@/digital-components/text-block/text-block.vue"; import textBlock from '@/digital-components/text-block/text-block.vue';
// Supporting files // Supporting files
import { import {
AppointmentTypeStrings, AppointmentTypeStrings,
GET_MOBILE_TIME_SLOTS, GET_MOBILE_TIME_SLOTS,
GET_SHOP_TIME_SLOTS, GET_SHOP_TIME_SLOTS,
PREMIUM_FEE_PART_TYPE, PREMIUM_FEE_PART_TYPE
} from "@/constants/schedule-constants.js"; } from '@/constants/schedule-constants.js';
import { import {
fetchCmsContentForPage, fetchCmsContentForPage,
splitCopyOnCMSPlaceHolder, splitCopyOnCMSPlaceHolder
} from "@/helpers/cms-content-helper"; } from '@/helpers/cms-content-helper';
import { import {
calcDaysBetweenDates, calcDaysBetweenDates,
convertDateStringToDate, convertDateStringToDate,
sumDateString, sumDateString
} from "@/helpers/date-helper"; } from '@/helpers/date-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 BaseFormMixin from "@/mixins/base-form-mixin.js"; import BaseFormMixin from '@/mixins/base-form-mixin.js';
import errorMessages from "@/constants/error-messages"; import errorMessages from '@/constants/error-messages';
import { required } from "@/helpers/validation-rules"; import { required } from '@/helpers/validation-rules';
import { useMainStore } from "@/store"; import { useMainStore } from '@/store';
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("date-required", required(errorMessages.DATE_REQUIRED)); defineRule('date-required', required(errorMessages.DATE_REQUIRED));
defineRule("time-slot-selection-required", (value) => { defineRule('time-slot-selection-required', (value) => {
if (value?.timeSlot?.routeCode == null) { if (value?.timeSlot?.routeCode == null) {
return errorMessages.DATE_REQUIRED; return errorMessages.DATE_REQUIRED;
} }
return true; return true;
}); });
// Define constants // Define constants
const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work) const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
const getAvailableDates = async ( const getAvailableDates = async (
startDateString,
endDateString,
appointmentType,
providerNumber
) => {
const apiEndDateLimit = sumDateString(
startDateString, startDateString,
TIME_SLOTS_CALL_DAYS_LIMIT endDateString,
); appointmentType,
const difference = calcDaysBetweenDates(startDateString, endDateString); providerNumber
const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT); ) => {
const storeActionConfigs = []; const apiEndDateLimit = sumDateString(
const timeSlotsData = {}; startDateString,
timeSlotsData.days = []; TIME_SLOTS_CALL_DAYS_LIMIT
let apiStartDate = startDateString; );
let apiEndDate = endDateString; const difference = calcDaysBetweenDates(startDateString, endDateString);
const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
const storeActionConfigs = [];
const timeSlotsData = {};
timeSlotsData.days = [];
let apiStartDate = startDateString;
let apiEndDate = endDateString;
for (let i = 1; i <= apiCallsCount; i++) { for (let i = 1; i <= apiCallsCount; i++) {
let storeActionConfig; let storeActionConfig;
if (i > 1) { if (i > 1) {
apiStartDate = sumDateString(apiEndDate, 1); apiStartDate = sumDateString(apiEndDate, 1);
apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT); apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
if (i === apiCallsCount) { if (i === apiCallsCount) {
apiEndDate = endDateString; apiEndDate = endDateString;
} }
} else if (apiEndDate > apiEndDateLimit) { } else if (apiEndDate > apiEndDateLimit) {
apiEndDate = apiEndDateLimit; apiEndDate = apiEndDateLimit;
}
if (
appointmentType === AppointmentTypeStrings.MOBILE ||
appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
) {
storeActionConfig = {
storeAction: GET_MOBILE_TIME_SLOTS,
payload: {
startDate: apiStartDate,
endDate: apiEndDate,
},
};
} else {
storeActionConfig = {
storeAction: GET_SHOP_TIME_SLOTS,
payload: {
startDate: apiStartDate,
endDate: apiEndDate,
shopAppointmentType: appointmentType,
providerNumber,
},
};
}
if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
}
const timeSlotsResponsesData = {
days: [],
};
function compareDayStrings(a, b) {
if (a.date < b.date) return -1;
if (a.date > b.date) return 1;
return 0;
}
const makeParallelCalls = async () => {
await Promise.all(
storeActionConfigs.map(async (storeAction) => {
let timeSlotsResponse = null;
if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
timeSlotsResponse = await useMainStore().getShopTimeSlots(
storeAction.payload.startDate,
storeAction.payload.endDate,
storeAction.payload.shopAppointmentType,
storeAction.payload.providerNumber
);
} else {
timeSlotsResponse = await useMainStore().getMobileTimeSlots(
storeAction.payload.startDate,
storeAction.payload.endDate
);
} }
timeSlotsResponsesData.estimatedServiceMinutesMinimum = if (
timeSlotsResponse.data.estimatedServiceMinutesMinimum; appointmentType === AppointmentTypeStrings.MOBILE
timeSlotsResponsesData.estimatedServiceMinutesMaximum = || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
timeSlotsResponse.data.estimatedServiceMinutesMaximum; ) {
timeSlotsResponsesData.days = [ storeActionConfig = {
...timeSlotsResponsesData.days, storeAction: GET_MOBILE_TIME_SLOTS,
...timeSlotsResponse.data.days, payload: {
]; startDate: apiStartDate,
}) endDate: apiEndDate
); }
}; };
} else {
storeActionConfig = {
storeAction: GET_SHOP_TIME_SLOTS,
payload: {
startDate: apiStartDate,
endDate: apiEndDate,
shopAppointmentType: appointmentType,
providerNumber
}
};
}
if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
}
return makeParallelCalls().then(() => { const timeSlotsResponsesData = {
days: []
};
function compareDayStrings(a, b) {
if (a.date < b.date) return -1;
if (a.date > b.date) return 1;
return 0;
}
const makeParallelCalls = async () => {
await Promise.all(storeActionConfigs.map(async (storeAction) => {
let timeSlotsResponse = null;
if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
timeSlotsResponse = await useMainStore().getShopTimeSlots(
storeAction.payload.startDate,
storeAction.payload.endDate,
storeAction.payload.shopAppointmentType,
storeAction.payload.providerNumber
);
} else {
timeSlotsResponse = await useMainStore().getMobileTimeSlots(
storeAction.payload.startDate,
storeAction.payload.endDate
);
}
timeSlotsResponsesData.estimatedServiceMinutesMinimum =
timeSlotsResponse.data.estimatedServiceMinutesMinimum;
timeSlotsResponsesData.estimatedServiceMinutesMaximum =
timeSlotsResponse.data.estimatedServiceMinutesMaximum;
timeSlotsResponsesData.days = [
...timeSlotsResponsesData.days,
...timeSlotsResponse.data.days
];
}));
};
return makeParallelCalls().then(() => {
// sort days chronologically // sort days chronologically
timeSlotsResponsesData.days.sort(compareDayStrings); timeSlotsResponsesData.days.sort(compareDayStrings);
return timeSlotsResponsesData; return timeSlotsResponsesData;
}); });
}; };
export default { export default {
name: "schedule-page", name: 'schedule-page',
components: { components: {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
locationAlerts, locationAlerts,
datePicker, datePicker,
timeSlotModalQuestion, timeSlotModalQuestion,
siteFooter, siteFooter,
textBlock, textBlock,
// 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) {
// Call APIs // Call APIs
let preSelectedDate = await useMainStore().order.schedule.date; let preSelectedDate = await useMainStore().order.schedule.date;
if (!preSelectedDate || preSelectedDate.startTime === null) { if (!preSelectedDate || preSelectedDate.startTime === null) {
preSelectedDate = null; preSelectedDate = null;
} }
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const datePickerInitialDataPromise = const datePickerInitialDataPromise =
await datePicker.methods.loadInitialData({ await datePicker.methods.loadInitialData({
selectableDatesSetting: "custom", selectableDatesSetting: 'custom',
initialViewRowsToShow: 5, initialViewRowsToShow: 5,
customSelectableDatesCallback: getAvailableDates, customSelectableDatesCallback: getAvailableDates,
preSelectedDate, preSelectedDate
}); });
const premiumFeePromise = useMainStore().getMobilePremiumFee(); const premiumFeePromise = useMainStore().getMobilePremiumFee();
const premiumFeeWithPricePromise = premiumFeePromise.then((result) => { const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
if (result.data) { if (result.data) {
return useMainStore().priceOrderItemsAndSaveServerData(result.data); return useMainStore().priceOrderItemsAndSaveServerData(result.data);
} }
return result.data; return result.data;
}); });
const alertReasonsPromise = locationAlerts.methods.loadInitialData( const alertReasonsPromise = locationAlerts.methods.loadInitialData(
useMainStore().order.serviceLocation.zipCodeCtu, useMainStore().order.serviceLocation.zipCodeCtu,
useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu useMainStore().order.serviceLocation.provider?.address?.zipCodeCtu
); );
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, },
{ {
resultKey: "alertReasons", resultKey: 'alertReasons',
promise: alertReasonsPromise, promise: alertReasonsPromise
}, },
{ {
resultKey: "datePickerInitialData", resultKey: 'datePickerInitialData',
promise: datePickerInitialDataPromise, promise: datePickerInitialDataPromise
}, },
{ {
resultKey: "premiumFeeWithPrice", resultKey: 'premiumFeeWithPrice',
promise: premiumFeeWithPricePromise, promise: premiumFeeWithPricePromise
}, }
]; ];
// use resultMap to populate layout content. // use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData); vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons); vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
vm.setData( vm.setData(
resultMap.datePickerInitialData.initialShopTimeSlotsResponse, resultMap.datePickerInitialData.initialShopTimeSlotsResponse,
resultMap.premiumFeeWithPrice resultMap.premiumFeeWithPrice
); );
vm.updateFooterButtonText(vm.selectedTimeSlotInfo); vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
}); });
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
return {
selectedDate: this.getSelectedDate(),
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
selectableDatesData: [],
mobilePremiumAppointmentFee: null,
};
},
computed: {
ChangeShopLinkText() {
return this.getCmsContent("ChangeShopLink", "Text");
}, },
ChangeShopLink() { setup() {
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText); const mainStore = useMainStore();
return { mainStore };
}, },
appointmentType() { data() {
return useMainStore().order.serviceLocation.appointmentType; return {
}, selectedDate: this.getSelectedDate(),
timeSlotsForSelectedDate() { selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
if (!this.selectedDate) { selectableDatesData: [],
return null; mobilePremiumAppointmentFee: null
}
return this.selectableDatesData.days?.find(
(selectableDate) => selectableDate.date === this.selectedDate
);
},
supportingItems() {
return useMainStore().lineItems.supportingItems;
},
},
watch: {
selectedDate(newValue, oldValue) {
// Clear time slot selection if date selected changes
if (newValue !== oldValue) {
this.selectedTimeSlotInfo = {
timeSlot: {
date: null,
routeCode: null,
startTime: null,
endTime: null,
jobMaxMinutes: null,
jobMinMinutes: null,
},
isPremiumAppointment: null,
}; };
}
}, },
selectedTimeSlotInfo(newValue) { computed: {
this.updateFooterButtonText(newValue); ChangeShopLinkText() {
}, return this.getCmsContent('ChangeShopLink', 'Text');
}, },
methods: { ChangeShopLink() {
splitCopyOnCMSPlaceHolder, return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
arePagePrerequisitesValid() { },
const { serviceLocation } = useMainStore().order; appointmentType() {
const serviceLocationPreReqs = return useMainStore().order.serviceLocation.appointmentType;
serviceLocation.zipCode && },
serviceLocation.zipCodeCtu && timeSlotsForSelectedDate() {
serviceLocation.appointmentType && if (!this.selectedDate) {
(serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE || return null;
serviceLocation.appointmentType === }
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP ||
serviceLocation.provider.providerNumber);
const supportingItems = this.supportingItems !== null;
const damageInfo =
useMainStore().order.damage.isRepair ||
(useMainStore().order.lineItems?.glassParts != null &&
useMainStore().order.lineItems.glassParts.length > 0);
return serviceLocationPreReqs && supportingItems && damageInfo; return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
},
supportingItems() {
return useMainStore().lineItems.supportingItems;
}
}, },
setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) { watch: {
this.selectableDatesData = initialShopTimeSlotsResponse; selectedDate(newValue, oldValue) {
this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse // Clear time slot selection if date selected changes
? premiumFeeWithPriceResponse[0] if (newValue !== oldValue) {
: null; this.selectedTimeSlotInfo = {
timeSlot: {
date: null,
routeCode: null,
startTime: null,
endTime: null,
jobMaxMinutes: null,
jobMinMinutes: null
},
isPremiumAppointment: null
};
}
},
selectedTimeSlotInfo(newValue) {
this.updateFooterButtonText(newValue);
}
}, },
async getAvailableDatesMethod(startDate, endDate) { methods: {
const newShopTimeSlots = await getAvailableDates( splitCopyOnCMSPlaceHolder,
startDate, arePagePrerequisitesValid() {
endDate, const { serviceLocation } = useMainStore().order;
this.appointmentType, const serviceLocationPreReqs =
this.mainStore.order.serviceLocation.provider.providerNumber serviceLocation.zipCode
); && serviceLocation.zipCodeCtu
// ADD API CALL RESULTS TO EXISTING DATE DATA && serviceLocation.appointmentType
this.selectableDatesData.days = this.selectableDatesData.days.concat( && (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
newShopTimeSlots.days || serviceLocation.appointmentType
); === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
return newShopTimeSlots; || serviceLocation.provider.providerNumber);
}, const supportingItems = this.supportingItems !== null;
getAvailableDates, const damageInfo =
getServiceZipCtuCodeFromStore() { useMainStore().order.damage.isRepair
return this.mainStore.order.serviceLocation.zipCodeCtu; || (useMainStore().order.lineItems?.glassParts != null
}, && useMainStore().order.lineItems.glassParts.length > 0);
openInshopTimeSlotsModal() {
this.$refs.timeSlotModalQuestion.openModal(); return serviceLocationPreReqs && supportingItems && damageInfo;
}, },
getSelectedDate() { setData(initialShopTimeSlotsResponse, premiumFeeWithPriceResponse) {
return this.mainStore.order.schedule.date; this.selectableDatesData = initialShopTimeSlotsResponse;
}, this.mobilePremiumAppointmentFee = premiumFeeWithPriceResponse
getSelectedTimeSlotInfo() { ? premiumFeeWithPriceResponse[0]
const isPremiumAppointment = : null;
},
async getAvailableDatesMethod(startDate, endDate) {
const newShopTimeSlots = await getAvailableDates(
startDate,
endDate,
this.appointmentType,
this.mainStore.order.serviceLocation.provider.providerNumber
);
// ADD API CALL RESULTS TO EXISTING DATE DATA
this.selectableDatesData.days = this.selectableDatesData.days.concat(newShopTimeSlots.days);
return newShopTimeSlots;
},
getAvailableDates,
getServiceZipCtuCodeFromStore() {
return this.mainStore.order.serviceLocation.zipCodeCtu;
},
openInshopTimeSlotsModal() {
this.$refs.timeSlotModalQuestion.openModal();
},
getSelectedDate() {
return this.mainStore.order.schedule.date;
},
getSelectedTimeSlotInfo() {
const isPremiumAppointment =
!!( !!(
this.supportingItems?.filter( this.supportingItems?.filter((lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE) ?? []
(lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
) ?? []
).length > 0; ).length > 0;
const selectedTimeSlotInfo = { const selectedTimeSlotInfo = {
timeSlot: this.mainStore.order.schedule, timeSlot: this.mainStore.order.schedule,
isPremiumAppointment, isPremiumAppointment
}; };
return selectedTimeSlotInfo; return selectedTimeSlotInfo;
}, },
timeSlotModalClosed() { timeSlotModalClosed() {
// Clear the selectedDate if no timeSlot has been selected // Clear the selectedDate if no timeSlot has been selected
if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) { if (this.selectedTimeSlotInfo.timeSlot.routeCode == null) {
this.selectedDate = null; this.selectedDate = null;
} }
}, },
updateFooterButtonText(timeSlotInfo) { updateFooterButtonText(timeSlotInfo) {
let navbarButtonText; let navbarButtonText;
if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) { if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
navbarButtonText = "Continue"; navbarButtonText = 'Continue';
} else { } else {
navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay( navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(timeSlotInfo.timeSlot.date)}`;
timeSlotInfo.timeSlot.date if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
)}`; navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) { } else if (
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime( this.appointmentType === AppointmentTypeStrings.MOBILE
timeSlotInfo.timeSlot.startTime && !timeSlotInfo.isPremiumAppointment
)}`; ) {
} else if ( navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
this.appointmentType === AppointmentTypeStrings.MOBILE && timeSlotInfo.timeSlot.startTime,
!timeSlotInfo.isPremiumAppointment true
)} - ${this.getDisplayTextForMilitaryTime(
timeSlotInfo.timeSlot.endTime,
true
)}`;
}
}
this.$refs.navbar.updateButtonText(navbarButtonText);
},
convertSelectedDateToShortMonthAndDay(selectedDate) {
// This conversion ensures we don't get get GMT induced date changes
const dateObject = convertDateStringToDate(selectedDate);
return dateObject.toLocaleDateString('en-us', {
month: 'short',
day: 'numeric'
});
},
getDisplayTextForMilitaryTime(
militaryTimeInput,
shouldTrimMinutesIfEmpty = false
) { ) {
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime( // Expected input: "HH:MM"
timeSlotInfo.timeSlot.startTime, let hours = parseInt(militaryTimeInput.split(':')[0], 10);
true const minutes = militaryTimeInput.split(':')[1];
)} - ${this.getDisplayTextForMilitaryTime( const meridianNotation = hours > 11 ? 'PM' : 'AM';
timeSlotInfo.timeSlot.endTime,
true if (hours > 12) {
)}`; hours -= 12;
}
if (shouldTrimMinutesIfEmpty && minutes === '00') {
return `${hours} ${meridianNotation}`;
}
return `${hours}:${minutes} ${meridianNotation}`;
},
forwardButtonAction() {
this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
} }
} }
this.$refs.navbar.updateButtonText(navbarButtonText);
},
convertSelectedDateToShortMonthAndDay(selectedDate) {
// This conversion ensures we don't get get GMT induced date changes
const dateObject = convertDateStringToDate(selectedDate);
return dateObject.toLocaleDateString("en-us", {
month: "short",
day: "numeric",
});
},
getDisplayTextForMilitaryTime(
militaryTimeInput,
shouldTrimMinutesIfEmpty = false
) {
// Expected input: "HH:MM"
let hours = parseInt(militaryTimeInput.split(":")[0], 10);
const minutes = militaryTimeInput.split(":")[1];
const meridianNotation = hours > 11 ? "PM" : "AM";
if (hours > 12) {
hours -= 12;
}
if (shouldTrimMinutesIfEmpty && minutes === "00") {
return `${hours} ${meridianNotation}`;
}
return `${hours}:${minutes} ${meridianNotation}`;
},
forwardButtonAction() {
this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
},
}; };
</script> </script>

762
src/layouts/service-location/service-location.vue
View file

@ -3,12 +3,13 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
<siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" /> <siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -16,8 +17,7 @@
<siteSubHeader <siteSubHeader
id="sub-header" id="sub-header"
cmsWidgetName="SiteSubHeader" cmsWidgetName="SiteSubHeader"
class="mb-5 mt-4" class="mb-5 mt-4" />
/>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -28,44 +28,38 @@
modalWidgetName="ServiceZipModalWidget" modalWidgetName="ServiceZipModalWidget"
:onZipUpdateCallback="reloadShopData" :onZipUpdateCallback="reloadShopData"
@updatedServiceability="setServiceabilityDetails" @updatedServiceability="setServiceabilityDetails"
@updatedContainsMilitaryBase="setContainsMilitaryBase" @updatedContainsMilitaryBase="setContainsMilitaryBase" />
/>
<alert <alert
v-if="displayMilitaryZipAlert" v-if="displayMilitaryZipAlert"
ref="alertMilitaryBaseZip" ref="alertMilitaryBaseZip"
class="my-5" class="my-5"
cmsWidgetName="AlertMilitaryBaseZipWidget" cmsWidgetName="AlertMilitaryBaseZipWidget"
alertClass="alert-warning" alertClass="alert-warning" />
/>
<alert <alert
v-if="displayServiceableMobileOnly" v-if="displayServiceableMobileOnly"
ref="alertMobileOnly" ref="alertMobileOnly"
class="my-5" class="my-5"
cmsWidgetName="AlertMobileOnlyWidget" cmsWidgetName="AlertMobileOnlyWidget"
alertClass="alert-warning" alertClass="alert-warning" />
/>
<alert <alert
v-if="displayRecalibrationWarning" v-if="displayRecalibrationWarning"
ref="alertRecalNoMobile" ref="alertRecalNoMobile"
class="my-5" class="my-5"
cmsWidgetName="AlertRecalNoMobileWidget" cmsWidgetName="AlertRecalNoMobileWidget"
alertClass="alert-warning" alertClass="alert-warning"
@text-link-clicked="openModalAction" @text-link-clicked="openModalAction" />
/>
<alert <alert
v-if="displayServiceableInshopOnly" v-if="displayServiceableInshopOnly"
ref="alertInshopOnly" ref="alertInshopOnly"
class="my-5" class="my-5"
cmsWidgetName="AlertInshopOnlyWidget" cmsWidgetName="AlertInshopOnlyWidget"
alertClass="alert-warning" alertClass="alert-warning" />
/>
<alert <alert
v-if="displayNoShopsAlert" v-if="displayNoShopsAlert"
ref="alertNoShops" ref="alertNoShops"
class="my-5" class="my-5"
cmsWidgetName="AlertNoShopsWidget" cmsWidgetName="AlertNoShopsWidget"
alertClass="alert-warning" alertClass="alert-warning" />
/>
<appointmentTypeQuestion <appointmentTypeQuestion
v-show="isAppointmentTypeDisplayed" v-show="isAppointmentTypeDisplayed"
ref="appointmentTypeQuestion" ref="appointmentTypeQuestion"
@ -75,8 +69,7 @@
:isDisplayed="isAppointmentTypeDisplayed" :isDisplayed="isAppointmentTypeDisplayed"
groupName="appointmentTypeQuestion" groupName="appointmentTypeQuestion"
cmsWidgetName="AppointmentTypeQuestionWidget" cmsWidgetName="AppointmentTypeQuestionWidget"
validationRules="option-required" validationRules="option-required" />
/>
<mobileLocationModalQuestions <mobileLocationModalQuestions
v-if="isMobileLocationDisplayed" v-if="isMobileLocationDisplayed"
ref="mobileLocationQuestions" ref="mobileLocationQuestions"
@ -89,8 +82,7 @@
:onZipUpdateCallback="reloadShopData" :onZipUpdateCallback="reloadShopData"
@updated-mobile-fee-part="setMobileFeePart" @updated-mobile-fee-part="setMobileFeePart"
@updated-serviceability="setServiceabilityDetails" @updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase" @updated-contains-military-base="setContainsMilitaryBase" />
/>
<shopQuestion <shopQuestion
v-show="isShopQuestionDisplayed" v-show="isShopQuestionDisplayed"
ref="shopQuestion" ref="shopQuestion"
@ -98,10 +90,11 @@
:selectedAppointmentType="selectedAppointmentType" :selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed" :isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" cmsWidgetName="ShopQuestionWidget"
@updatedMobileProviderNumber="setMobileProviderNumber" @updatedMobileProviderNumber="setMobileProviderNumber" />
/> <contentGroupModal
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" /> ref="RecalModal"
</div> cmsWidgetName="RecalModal" />
</div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
@ -111,8 +104,7 @@
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid || displayNoShopsAlert" :isForwardActionDisabled="!meta.valid || displayNoShopsAlert"
@backClicked="navigateBack" @backClicked="navigateBack"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -120,395 +112,393 @@
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
import { AppointmentTypeStrings } from "@/constants/schedule-constants.js"; import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
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 { required } from "@/helpers/validation-rules"; import { required } from '@/helpers/validation-rules';
import errorMessages from "@/constants/error-messages"; import errorMessages from '@/constants/error-messages';
import { useMainStore } from "@/store"; import { useMainStore } from '@/store';
import { import {
getPricedMobileFeePart, getPricedMobileFeePart,
getServiceabilityDetails, getServiceabilityDetails,
getZipCodeData, getZipCodeData
} from "@/helpers/service-location-helper"; } from '@/helpers/service-location-helper';
// Import Component // Import Component
import alert from "@/ux-components/alert/alert.vue"; import alert from '@/ux-components/alert/alert.vue';
import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question.vue"; import appointmentTypeQuestion from '@/layouts/service-location/appointment-type-question/appointment-type-question.vue';
import baseFormMixin from "@/mixins/base-form-mixin"; import baseFormMixin from '@/mixins/base-form-mixin';
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 mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue"; import mobileLocationModalQuestions from '@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue';
import { Form, defineRule } from "vee-validate"; import { Form, defineRule } from 'vee-validate';
import shopQuestion from "@/layouts/service-location/shop-question/shop-question.vue"; import shopQuestion from '@/layouts/service-location/shop-question/shop-question.vue';
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 siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue"; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue"; import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("mobile-location-required", (value) => { defineRule('mobile-location-required', (value) => {
if ( if (
value.addressQuestions.streetAddress === "" || value.addressQuestions.streetAddress === ''
value.addressQuestions.city === "" || || value.addressQuestions.city === ''
value.addressQuestions.state === "" || || value.addressQuestions.state === ''
value.addressQuestions.zipCode === "" || || value.addressQuestions.zipCode === ''
value.isVehicleProtected == null || value.isVehicleProtected == null
) { ) {
return errorMessages.MOBILE_LOCATION_REQUIRED; return errorMessages.MOBILE_LOCATION_REQUIRED;
} }
return true; return true;
}); });
defineRule("selection-required", required(errorMessages.OPTION_REQUIRED)); defineRule('selection-required', required(errorMessages.OPTION_REQUIRED));
export default { export default {
name: "service-location", name: 'service-location',
components: { components: {
alert, alert,
appointmentTypeQuestion, appointmentTypeQuestion,
contentGroupModal, contentGroupModal,
mobileLocationModalQuestions, mobileLocationModalQuestions,
siteFooter, siteFooter,
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
serviceZipModalQuestion, serviceZipModalQuestion,
shopQuestion, shopQuestion
}, },
mixins: [baseFormMixin], mixins: [baseFormMixin],
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 serviceZipCode = const serviceZipCode =
useMainStore().order.serviceLocation.zipCode || useMainStore().order.serviceLocation.zipCode
useMainStore().order.customer.address.zipCode; || useMainStore().order.customer.address.zipCode;
const zipCodeData = getZipCodeData(serviceZipCode); const zipCodeData = getZipCodeData(serviceZipCode);
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode); const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
const serviceabilityDetailsPromise = const serviceabilityDetailsPromise =
getServiceabilityDetails(serviceZipCode); getServiceabilityDetails(serviceZipCode);
const shopQuestionInitialDataPromise = const shopQuestionInitialDataPromise =
shopQuestion.methods.loadInitialData(serviceZipCode); shopQuestion.methods.loadInitialData(serviceZipCode);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, },
{ {
resultKey: "mobileFeePart", resultKey: 'mobileFeePart',
promise: mobileFeePartPromise, promise: mobileFeePartPromise
}, },
{ {
resultKey: "serviceabilityDetails", resultKey: 'serviceabilityDetails',
promise: serviceabilityDetailsPromise, promise: serviceabilityDetailsPromise
}, },
{ {
resultKey: "shopQuestionInitialData", resultKey: 'shopQuestionInitialData',
promise: shopQuestionInitialDataPromise, promise: shopQuestionInitialDataPromise
}, },
{ {
resultKey: "zipCodeData", resultKey: 'zipCodeData',
promise: zipCodeData, promise: zipCodeData
}, }
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.setData( vm.setData(
resultMap.zipCodeData, resultMap.zipCodeData,
resultMap.serviceabilityDetails, resultMap.serviceabilityDetails,
resultMap.mobileFeePart, resultMap.mobileFeePart,
resultMap.shopQuestionInitialData?.mobileProviderNumber resultMap.shopQuestionInitialData?.mobileProviderNumber
); );
vm.$refs.shopQuestion.initializeComponent( vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
resultMap.shopQuestionInitialData });
);
});
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
return {
streetAddress: this.getServiceAddressFromStore(),
streetAddress2: this.getServiceAddress2FromStore(),
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
isVehicleProtected: this.getIsVehicleProtectedFromStore(),
isGlassServiceableInshop: null,
isRecalibrationServiceableInshop: null,
isGlassServiceableMobile: null,
isRecalibrationServiceableMobile: null,
selectedAppointmentType: this.getSelectedAppointmentType(),
selectedProvider: this.getSelectedProvider(),
mobileFeePart: null,
mobileProviderNumber: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null,
};
},
computed: {
questionText() {
return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
}, },
answersFromCms() { setup() {
return this.getCmsContent("ServiceTypeQuestionWidget", "Answers"); const mainStore = useMainStore();
return { mainStore };
}, },
serviceZipCodeQuestion: { data() {
get() {
return { return {
state: this.state, streetAddress: this.getServiceAddressFromStore(),
zipCode: this.zipCode, streetAddress2: this.getServiceAddress2FromStore(),
city: this.getServiceCityFromStore(),
state: this.getServiceStateFromStore(),
zipCode: this.getServiceZipCodeFromStore(),
isVehicleProtected: this.getIsVehicleProtectedFromStore(),
isGlassServiceableInshop: null,
isRecalibrationServiceableInshop: null,
isGlassServiceableMobile: null,
isRecalibrationServiceableMobile: null,
selectedAppointmentType: this.getSelectedAppointmentType(),
selectedProvider: this.getSelectedProvider(),
mobileFeePart: null,
mobileProviderNumber: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null
}; };
}, },
set(newValue) { computed: {
if (newValue.zipCode !== this.zipCode) { questionText() {
this.resetMobileLocation(); return this.getCmsContent('ServiceTypeQuestionWidget', 'QuestionText');
this.selectedAppointmentType = null; },
this.selectedProvider = null; answersFromCms() {
return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers');
},
serviceZipCodeQuestion: {
get() {
return {
state: this.state,
zipCode: this.zipCode
};
},
set(newValue) {
if (newValue.zipCode !== this.zipCode) {
this.resetMobileLocation();
this.selectedAppointmentType = null;
this.selectedProvider = null;
}
this.state = newValue.state;
this.zipCode = newValue.zipCode;
// eslint-disable-next-line vue/valid-next-tick
this.$nextTick();
}
},
mobileLocationQuestions: {
get() {
return {
addressQuestions: {
streetAddress: this.streetAddress,
streetAddress2: this.streetAddress2,
city: this.city,
state: this.state,
zipCode: this.zipCode
},
isVehicleProtected: this.isVehicleProtected
};
},
set(newValue) {
this.streetAddress = newValue.addressQuestions.streetAddress;
this.streetAddress2 = newValue.addressQuestions.streetAddress2;
this.city = newValue.addressQuestions.city;
this.state = newValue.addressQuestions.state;
this.zipCode = newValue.addressQuestions.zipCode;
this.isVehicleProtected = newValue.isVehicleProtected;
if (newValue.zipCode !== this.zipCode) {
if (
!(
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|| this.selectedAppointmentType
=== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
)
) {
this.selectedAppointmentType = null;
}
this.selectedProvider = null;
}
}
},
isServiceableMobile() {
if (this.isRecalibrationServiceableMobile !== null) {
return (
this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile
);
}
return this.isGlassServiceableMobile;
},
isServiceableInshop() {
if (this.isRecalibrationServiceableInshop !== null) {
return (
this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop
);
}
return this.isGlassServiceableInshop;
},
isShopQuestionDisplayed() {
return (
this.selectedAppointmentType === 'Inshop'
|| this.selectedAppointmentType === 'Dropoff'
);
},
isAppointmentTypeDisplayed() {
return this.zipCode && !this.displayNoShopsAlert;
},
isMobileLocationDisplayed() {
return (
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
|| this.selectedAppointmentType
=== AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
);
},
requiresInshopRecalibration() {
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
return (
this.isServiceableInshop
&& this.isGlassServiceableMobile
&& this.isRecalibrationServiceableMobile === false
);
},
displayMilitaryZipAlert() {
return this.zipContainsMilitaryBase && this.isServiceableMobile;
},
displayNoShopsAlert() {
return !this.isServiceableInshop && !this.isServiceableMobile;
},
displayRecalibrationWarning() {
return this.requiresInshopRecalibration;
},
displayServiceableInshopOnly() {
return (
!this.displayRecalibrationWarning
&& this.isServiceableInshop
&& !this.isServiceableMobile
);
},
displayServiceableMobileOnly() {
return this.isServiceableMobile && !this.isServiceableInshop;
} }
},
methods: {
arePagePrerequisitesValid() {
return (
useMainStore().lineItems.supportingItems !== null
&& useMainStore().order.serviceLocation.zipCode !== null
);
},
async reloadShopData(zipCode) {
await this.$refs.shopQuestion.reloadShopData(zipCode);
},
async forwardButtonAction() {
let provider = this.selectedProvider;
this.mainStore.updateMobileFee(null);
if (this.isMobileLocationDisplayed) {
if (this.mainStore.isNoComp || this.mainStore.isITAC) {
this.mainStore.updateMobileFee(this.mobileFeePart);
}
this.state = newValue.state; provider = {
this.zipCode = newValue.zipCode; providerNumber: this.mobileProviderNumber,
address: {
streetAddress: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null
}
};
}
// eslint-disable-next-line vue/valid-next-tick this.mainStore.saveServiceLocation({
this.$nextTick(); address: this.streetAddress,
}, address2: this.streetAddress2,
}, city: this.city,
mobileLocationQuestions: { state: this.state,
get() { zipCode: this.zipCode,
return { zipCodeCtu: this.zipCodeCtu,
addressQuestions: { appointmentType: this.selectedAppointmentType,
streetAddress: this.streetAddress, isVehicleProtected: this.isVehicleProtected,
streetAddress2: this.streetAddress2, provider
city: this.city, });
state: this.state,
zipCode: this.zipCode,
},
isVehicleProtected: this.isVehicleProtected,
};
},
set(newValue) {
this.streetAddress = newValue.addressQuestions.streetAddress;
this.streetAddress2 = newValue.addressQuestions.streetAddress2;
this.city = newValue.addressQuestions.city;
this.state = newValue.addressQuestions.state;
this.zipCode = newValue.addressQuestions.zipCode;
this.isVehicleProtected = newValue.isVehicleProtected;
if (newValue.zipCode !== this.zipCode) { this.$router.navigate(
if ( this.navigationScenarios.CLICKED_FORWARD,
!( this.$route
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE || );
this.selectedAppointmentType === },
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP openModalAction(modalName) {
) this.$refs[modalName].openModal();
) { },
this.selectedAppointmentType = null; resetDependentState() {},
} getServiceAddressFromStore() {
this.selectedProvider = null; return useMainStore().order.serviceLocation.address;
} },
}, getServiceAddress2FromStore() {
}, return useMainStore().order.serviceLocation.address2;
isServiceableMobile() { },
if (this.isRecalibrationServiceableMobile !== null) { getServiceCityFromStore() {
return ( return useMainStore().order.serviceLocation.city;
this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile },
); getServiceStateFromStore() {
} return (
return this.isGlassServiceableMobile; useMainStore().order.serviceLocation.state
}, || useMainStore().order.customer.address.state
isServiceableInshop() { );
if (this.isRecalibrationServiceableInshop !== null) { },
return ( getServiceZipCodeFromStore() {
this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop return (
); useMainStore().order.serviceLocation.zipCode
} || useMainStore().order.customer.address.zipCode
);
},
getIsVehicleProtectedFromStore() {
return useMainStore().order.serviceLocation.isVehicleProtected;
},
getSelectedAppointmentType() {
return useMainStore().order.serviceLocation.appointmentType;
},
getSelectedProvider() {
return useMainStore().order.serviceLocation.provider;
},
setData(
zipCodeData,
serviceabilityDetails,
mobileFeePart,
mobileProviderNumber
) {
if (zipCodeData) {
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
this.zipCodeCtu = zipCodeData.zipCodeCtu;
}
return this.isGlassServiceableInshop; if (serviceabilityDetails) {
}, this.setServiceabilityDetails(serviceabilityDetails);
isShopQuestionDisplayed() { }
return (
this.selectedAppointmentType === "Inshop" ||
this.selectedAppointmentType === "Dropoff"
);
},
isAppointmentTypeDisplayed() {
return this.zipCode && !this.displayNoShopsAlert;
},
isMobileLocationDisplayed() {
return (
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE ||
this.selectedAppointmentType ===
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
);
},
requiresInshopRecalibration() {
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
return (
this.isServiceableInshop &&
this.isGlassServiceableMobile &&
this.isRecalibrationServiceableMobile === false
);
},
displayMilitaryZipAlert() {
return this.zipContainsMilitaryBase && this.isServiceableMobile;
},
displayNoShopsAlert() {
return !this.isServiceableInshop && !this.isServiceableMobile;
},
displayRecalibrationWarning() {
return this.requiresInshopRecalibration;
},
displayServiceableInshopOnly() {
return (
!this.displayRecalibrationWarning &&
this.isServiceableInshop &&
!this.isServiceableMobile
);
},
displayServiceableMobileOnly() {
return this.isServiceableMobile && !this.isServiceableInshop;
},
},
methods: {
arePagePrerequisitesValid() {
return (
useMainStore().lineItems.supportingItems !== null &&
useMainStore().order.serviceLocation.zipCode !== null
);
},
async reloadShopData(zipCode) {
await this.$refs.shopQuestion.reloadShopData(zipCode);
},
async forwardButtonAction() {
let provider = this.selectedProvider;
this.mainStore.updateMobileFee(null);
if (this.isMobileLocationDisplayed) {
if (this.mainStore.isNoComp || this.mainStore.isITAC) {
this.mainStore.updateMobileFee(this.mobileFeePart);
}
provider = { if (mobileFeePart) {
providerNumber: this.mobileProviderNumber, this.mobileFeePart = mobileFeePart;
address: { }
streetAddress: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null,
},
};
}
this.mainStore.saveServiceLocation({ if (mobileProviderNumber) {
address: this.streetAddress, this.setMobileProviderNumber(mobileProviderNumber);
address2: this.streetAddress2, }
city: this.city, },
state: this.state, setContainsMilitaryBase(val) {
zipCode: this.zipCode, if (this.zipContainsMilitaryBase !== val) {
zipCodeCtu: this.zipCodeCtu, this.zipContainsMilitaryBase = val;
appointmentType: this.selectedAppointmentType, }
isVehicleProtected: this.isVehicleProtected, },
provider, setMobileFeePart(mobileFeePart) {
}); this.mobileFeePart = mobileFeePart;
},
setMobileProviderNumber(providerNumber) {
this.mobileProviderNumber = providerNumber;
},
resetMobileLocation() {
this.streetAddress = '';
this.streetAddress2 = '';
this.city = '';
this.$router.navigate( this.isVehicleProtected = null;
this.navigationScenarios.CLICKED_FORWARD, },
this.$route setServiceabilityDetails(serviceabilityDetails) {
); this.isGlassServiceableInshop =
},
openModalAction(modalName) {
this.$refs[modalName].openModal();
},
resetDependentState() {},
getServiceAddressFromStore() {
return useMainStore().order.serviceLocation.address;
},
getServiceAddress2FromStore() {
return useMainStore().order.serviceLocation.address2;
},
getServiceCityFromStore() {
return useMainStore().order.serviceLocation.city;
},
getServiceStateFromStore() {
return (
useMainStore().order.serviceLocation.state ||
useMainStore().order.customer.address.state
);
},
getServiceZipCodeFromStore() {
return (
useMainStore().order.serviceLocation.zipCode ||
useMainStore().order.customer.address.zipCode
);
},
getIsVehicleProtectedFromStore() {
return useMainStore().order.serviceLocation.isVehicleProtected;
},
getSelectedAppointmentType() {
return useMainStore().order.serviceLocation.appointmentType;
},
getSelectedProvider() {
return useMainStore().order.serviceLocation.provider;
},
setData(
zipCodeData,
serviceabilityDetails,
mobileFeePart,
mobileProviderNumber
) {
if (zipCodeData) {
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
this.zipCodeCtu = zipCodeData.zipCodeCtu;
}
if (serviceabilityDetails) {
this.setServiceabilityDetails(serviceabilityDetails);
}
if (mobileFeePart) {
this.mobileFeePart = mobileFeePart;
}
if (mobileProviderNumber) {
this.setMobileProviderNumber(mobileProviderNumber);
}
},
setContainsMilitaryBase(val) {
if (this.zipContainsMilitaryBase !== val) {
this.zipContainsMilitaryBase = val;
}
},
setMobileFeePart(mobileFeePart) {
this.mobileFeePart = mobileFeePart;
},
setMobileProviderNumber(providerNumber) {
this.mobileProviderNumber = providerNumber;
},
resetMobileLocation() {
this.streetAddress = "";
this.streetAddress2 = "";
this.city = "";
this.isVehicleProtected = null;
},
setServiceabilityDetails(serviceabilityDetails) {
this.isGlassServiceableInshop =
serviceabilityDetails.isGlassServiceableInshop; serviceabilityDetails.isGlassServiceableInshop;
this.isRecalibrationServiceableInshop = this.isRecalibrationServiceableInshop =
serviceabilityDetails.isRecalibrationServiceableInshop; serviceabilityDetails.isRecalibrationServiceableInshop;
this.isGlassServiceableMobile = this.isGlassServiceableMobile =
serviceabilityDetails.isGlassServiceableMobile; serviceabilityDetails.isGlassServiceableMobile;
this.isRecalibrationServiceableMobile = this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile; serviceabilityDetails.isRecalibrationServiceableMobile;
}, }
}, }
}; };
</script> </script>

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

@ -3,8 +3,7 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
@ -13,520 +12,458 @@
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<alert <alert
v-if="shouldDisplayVehicleChangeAlert" v-if="shouldDisplayVehicleChangeAlert"
ref="vehicleChangeAlert" ref="vehicleChangeAlert"
class="mt-5 mb-0" class="mt-5 mb-0"
cmsWidgetName="VehicleChangeAlert" cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning" alertClass="alert-warning"
:isDismissible="false" :isDismissible="false" />
/> <vehicleBanner
<vehicleBanner class="mb-4"
class="mb-4" cmsWidgetName="VehicleBannerWidget"
cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
:displayGenericVehicleImage="false" <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
/> </div>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> </div>
</div> <div class="row justify-content-center">
</div> <div class="col-md-6">
<div class="row justify-content-center"> <damageLocationQuestion
<div class="col-md-6"> ref="damageLocation"
<damageLocationQuestion v-model="selectedDamageLocations"
ref="damageLocation" cmsWidgetName="DamageLocationQuestion"
v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
cmsWidgetName="DamageLocationQuestion" </div>
groupName="DamageLocationQuestion" </div>
/> <div class="row justify-content-center">
</div> <div class="col-md-6 col-xl-4">
</div> <windshieldOptions
<div class="row justify-content-center"> ref="windshieldOptions"
<div class="col-md-6 col-xl-4"> v-model="selectedWindshieldOptions"
<windshieldOptions :hasRepairReplaceConflict="hasRepairReplaceConflict"
ref="windshieldOptions" :hasSplitSingleConflict="hasSplitSingleConflict"
v-model="selectedWindshieldOptions" :selectedDamageLocations="selectedDamageLocations"
:hasRepairReplaceConflict="hasRepairReplaceConflict" class="mb-3" />
:hasSplitSingleConflict="hasSplitSingleConflict" </div>
:selectedDamageLocations="selectedDamageLocations" </div>
class="mb-3" <div class="row justify-content-center">
/> <div class="col-md-6 col-xl-4">
</div> <alert
</div> v-if="hasRepairReplaceConflict"
<div class="row justify-content-center"> class="my-5"
<div class="col-md-6 col-xl-4"> cmsWidgetName="HasReplacementConflict"
<alert alertClass="alert-danger"
v-if="hasRepairReplaceConflict" :isDismissible="false" />
class="my-5" </div>
cmsWidgetName="HasReplacementConflict" </div>
alertClass="alert-danger" <div class="row justify-content-center">
:isDismissible="false" <div class="col-md-6 col-xl-4">
/> <sideDoorOptions
</div> v-show="!hasRepairReplaceConflict"
</div> ref="sideDoorOptions"
<div class="row justify-content-center"> v-model="sideDoorOptionsData"
<div class="col-md-6 col-xl-4"> cmsWidgetName="SideDoorSideQuestion"
<sideDoorOptions groupName="SideDoorSideQuestion"
v-show="!hasRepairReplaceConflict" :selectedDamageLocations="selectedDamageLocations"
ref="sideDoorOptions" class="mb-1" />
v-model="sideDoorOptionsData" </div>
cmsWidgetName="SideDoorSideQuestion" </div>
groupName="SideDoorSideQuestion" <div class="row justify-content-center">
:selectedDamageLocations="selectedDamageLocations" <div class="col-md-6 col-xl-4">
class="mb-1" <replaceOptionsQuestion
/> ref="backGlassOptions"
</div> v-model="selectedRearReplaceOptions"
</div> cmsWidgetName="RearReplaceOptionsQuestion"
<div class="row justify-content-center"> :isAvailable="
<div class="col-md-6 col-xl-4"> isRearWindowDamageLocation && !hasRepairReplaceConflict
<replaceOptionsQuestion "
ref="backGlassOptions" groupName="BackGlassReplaceOptionsQuestion"
v-model="selectedRearReplaceOptions" validationRules="replace-options-required" />
cmsWidgetName="RearReplaceOptionsQuestion" </div>
:isAvailable=" </div>
isRearWindowDamageLocation && !hasRepairReplaceConflict <div class="row justify-content-center">
" <div class="col-md-6 col-xl-4">
groupName="BackGlassReplaceOptionsQuestion" <site-footer
validationRules="replace-options-required" ref="siteFooter"
/> class="mt-5"
</div> cmsWidgetName="SiteFooterWidget"
</div> :isForwardActionDisabled="!meta.valid"
<div class="row justify-content-center"> @backClicked="navigateBack"
<div class="col-md-6 col-xl-4"> @forwardClicked="forwardButtonAction" />
<site-footer </div>
ref="siteFooter" </div>
class="mt-5" </div>
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction"
/>
</div>
</div>
</div>
</Form> </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( defineRule(
"replace-options-required", 'replace-options-required',
required(errorMessages.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
);
}, },
isSideDoorDamageLocation() { mixins: [BaseFormMixin, vehicleQuestionsMixin],
return this.selectedDamageLocations.some( async beforeRouteEnter(to, from, next) {
(selectedDamages) => const store = useMainStore();
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( // Call APIs
(selectedDriverSide) => const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
);
},
isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some( // Settle promises and get results
(selectedPassengerSide) => const promiseResultMap = [
selectedPassengerSide.toUpperCase() === {
damageLocationsCms.PASSENGERSIDE resultKey: 'cmsContent',
); promise: cmsContentPromise
}, },
hasRepairReplaceConflict() { {
return ( resultKey: 'damageOptions',
this.isWindshieldDamageLocation && promise: damageOptionsPromise
this.selectedDamageLocations.length > 1 && }
this.isWindshieldRepair ];
);
},
hasSplitSingleConflict() {
if (
!this.selectedDamageLocations?.includes("Windshield") ||
this.selectedWindshieldOptions.selectedWindshieldDamageType ===
damageLocationsSelected.REPAIR ||
!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
)
return false;
return ( const resultMap = await settleAllPromises(promiseResultMap);
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 ( // Call the "next" function to complete the transition to this page.
this.mainStore.order.damage.glassToReplace?.some( next((vm) => {
(glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD vm.setCmsContent(resultMap.cmsContent);
) || vm.$refs.damageLocation.initializeComponent(resultMap.damageOptions);
this.mainStore.order.damage.isRepair vm.$refs.sideDoorOptions.initializeComponent(
) { resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
glassSelections.push(damageLocationsSelected.WINDSHIELD); resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
} );
if ( vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions.availableReplacementOptions);
this.mainStore.order.damage.glassToReplace?.some( vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions.availableReplacementOptions);
(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>

166
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -1,5 +1,7 @@
<template> <template>
<Form @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> <Form
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
@ -12,25 +14,21 @@
<VehicleBanner <VehicleBanner
class="mt-2 mb-4" class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" :displayGenericVehicleImage="false" />
/>
<SiteSubHeader <SiteSubHeader
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="mt-5 mb-2" class="mt-5 mb-2" />
/>
<VinLookupMethods <VinLookupMethods
ref="VinLookupMethods" ref="VinLookupMethods"
v-model="selectedVinLookupMethod" v-model="selectedVinLookupMethod"
cmsWidgetName="VINLookupMethod" cmsWidgetName="VINLookupMethod"
groupName="VinLookupMethods" groupName="VinLookupMethods" />
/>
<SiteFooter <SiteFooter
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled" :isForwardActionDisabled="isForwardActionDisabled"
class="mt-5" class="mt-5"
@backClicked="navigateBack" @backClicked="navigateBack"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -39,88 +37,88 @@
</template> </template>
<script> <script>
// Import Supporting Files // Import 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 { Form } from "vee-validate"; import { Form } from 'vee-validate';
import BaseFormMixin from "@/mixins/base-form-mixin"; import BaseFormMixin from '@/mixins/base-form-mixin';
import vinLookupMethodSelections from "@/constants/vin-lookup-methods"; import vinLookupMethodSelections from '@/constants/vin-lookup-methods';
// Import Component // Import Component
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 SiteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue"; import SiteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import VehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue"; import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import VinLookupMethods from "@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue"; import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue';
export default { export default {
name: "vehicle-lookup", name: 'vehicle-lookup',
components: { components: {
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
SiteFooter, SiteFooter,
SiteHeader, SiteHeader,
SiteSubHeader, SiteSubHeader,
VehicleBanner, VehicleBanner,
VinLookupMethods, VinLookupMethods
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.VinLookupMethods.initializeComponent();
});
},
data() {
return {
selectedVinLookupMethod: null,
};
},
computed: {
isForwardActionDisabled() {
return this.selectedVinLookupMethod === null;
}, },
}, mixins: [BaseFormMixin],
methods: { async beforeRouteEnter(to, from, next) {
arePagePrerequisiteValid() { const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
return true;
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.VinLookupMethods.initializeComponent();
});
}, },
forwardButtonAction() { data() {
switch (this.selectedVinLookupMethod) { return {
case vinLookupMethodSelections.MANUALVIN: selectedVinLookupMethod: null
this.$router.navigate( };
this.navigationScenarios.SELECTED_MANUAL_VIN,
this.$route
);
break;
case vinLookupMethodSelections.LICENSEPLATE:
this.$router.navigate(
this.navigationScenarios.SELECTED_LICENSE_PLATE,
this.$route
);
break;
case vinLookupMethodSelections.HOMEADDRESS:
this.$router.navigate(
this.navigationScenarios.SELECTED_HOME_ADDRESS,
this.$route
);
break;
default:
break;
}
}, },
resetDependentState() {}, computed: {
}, isForwardActionDisabled() {
return this.selectedVinLookupMethod === null;
}
},
methods: {
arePagePrerequisiteValid() {
return true;
},
forwardButtonAction() {
switch (this.selectedVinLookupMethod) {
case vinLookupMethodSelections.MANUALVIN:
this.$router.navigate(
this.navigationScenarios.SELECTED_MANUAL_VIN,
this.$route
);
break;
case vinLookupMethodSelections.LICENSEPLATE:
this.$router.navigate(
this.navigationScenarios.SELECTED_LICENSE_PLATE,
this.$route
);
break;
case vinLookupMethodSelections.HOMEADDRESS:
this.$router.navigate(
this.navigationScenarios.SELECTED_HOME_ADDRESS,
this.$route
);
break;
default:
break;
}
},
resetDependentState() {}
}
}; };
</script> </script>

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

@ -1,5 +1,8 @@
<template> <template>
<Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit"> <Form
ref="theForm"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
@ -12,12 +15,10 @@
ref="vehicleBanner" ref="vehicleBanner"
class="mt-2 mb-4" class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" :displayGenericVehicleImage="false" />
/>
<siteSubHeader <siteSubHeader
ref="siteSubHeader" ref="siteSubHeader"
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget" />
/>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -27,9 +28,10 @@
class="mt-3 mb-3" class="mt-3 mb-3"
alertClass="alert-warning" alertClass="alert-warning"
cmsWidgetName="AlertWidget" cmsWidgetName="AlertWidget"
:isDismissible="false" :isDismissible="false" />
/> <div
<div v-for="(item, i) in PartsOrQuestions" :key="i"> v-for="(item, i) in PartsOrQuestions"
:key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) --> <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<hr v-if="i > 0" /> <hr v-if="i > 0" />
<glassPartQuestion <glassPartQuestion
@ -40,8 +42,7 @@
:glassLocation="item.glassLocation" :glassLocation="item.glassLocation"
:glassName="item.glassName" :glassName="item.glassName"
:colorAnswers="item.colorAnswers" :colorAnswers="item.colorAnswers"
:alreadyPopulatedPartsData="alreadyPopulatedPartsData" :alreadyPopulatedPartsData="alreadyPopulatedPartsData" />
/>
</div> </div>
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
@ -49,8 +50,7 @@
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled" :isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBackByVehicleQuestions" @backClicked="navigateBackByVehicleQuestions"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -59,187 +59,182 @@
<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], 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);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, }
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
// Glass Part Question dynamic component // Glass Part Question dynamic component
Object.keys(vm.$refs) Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined) .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) => .forEach((c) =>
vm.$refs[c][0].initializeComponent({ vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget, ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget, FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget
}) }));
); });
});
},
data() {
return {
selectedGlassParts: {},
alertWidgetData: Object,
alreadyPopulatedPartsData: [],
};
},
computed: {
isForwardActionDisabled() {
return (
this.selectedGlassPartNumbers?.length !==
this.PartsFromApi.partsOrQuestions?.length
);
}, },
selectedGlassPartNumbers() { data() {
// Compile all selected parts from the page. return {
const numberArray = []; selectedGlassParts: {},
// eslint-disable-next-line no-restricted-syntax alertWidgetData: Object,
for (const glassPart of Object.values(this.selectedGlassParts)) { alreadyPopulatedPartsData: []
if (glassPart?.partNumber) { };
numberArray.push(glassPart.partNumber); },
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;
}, },
PartsOrQuestions() { mounted() {
const partsData = this.PartsFromApi; this.LoadInitialPartsData();
// 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 = [];
PartsFromApi() { // Match them to the parts from the API.
return this.mainStore.pageData(issPageValues.VEHICLE_PARTS); // eslint-disable-next-line no-restricted-syntax
}, for (const [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
// eslint-disable-next-line no-restricted-syntax
RefPrefix() { for (const [partKey, partValue] of Object.entries(value.parts)) {
return "partQuestion"; const currentPart =
},
},
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 = [];
// Match them to the parts from the API.
// eslint-disable-next-line no-restricted-syntax
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]; this.PartsFromApi.partsOrQuestions[key].parts[partKey];
const isMatched = this.selectedGlassPartNumbers.some( const isMatched = this.selectedGlassPartNumbers.some((p) => p === currentPart.partNumber);
(p) => p === currentPart.partNumber
);
if (isMatched) { if (isMatched) {
matchedParts.push({ matchedParts.push({
glassLocation: value.glassLocation, glassLocation: value.glassLocation,
glassName: value.glassName, glassName: value.glassName,
parts: [currentPart], parts: [currentPart]
}); });
} }
} }
}
// 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;
} }
}); // 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>

288
src/layouts/vehicle-selection/vehicle-selection.vue
View file

@ -3,12 +3,13 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
<siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" /> <siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -17,8 +18,7 @@
cmsWidgetName="SiteSubHeaderWidget" cmsWidgetName="SiteSubHeaderWidget"
class="siteSubHeader" class="siteSubHeader"
justification="center" justification="center"
darkGraySubText darkGraySubText />
/>
<vehicleQuestion <vehicleQuestion
ref="vehicleYearQuestion" ref="vehicleYearQuestion"
@ -27,8 +27,7 @@
cmsWidgetName="VehicleYearQuestion" cmsWidgetName="VehicleYearQuestion"
:updateValues="updateYearValues" :updateValues="updateYearValues"
validationRules="year-required" validationRules="year-required"
inputId="yearQuestionField" inputId="yearQuestionField" />
/>
<vehicleQuestion <vehicleQuestion
ref="vehicleMakeQuestion" ref="vehicleMakeQuestion"
v-model="selectedMake" v-model="selectedMake"
@ -36,8 +35,7 @@
cmsWidgetName="VehicleMakeQuestion" cmsWidgetName="VehicleMakeQuestion"
:updateValues="updateMakeValues" :updateValues="updateMakeValues"
validationRules="make-required" validationRules="make-required"
inputId="makeQuestionField" inputId="makeQuestionField" />
/>
<vehicleQuestion <vehicleQuestion
ref="vehicleModelQuestion" ref="vehicleModelQuestion"
v-model="selectedModel" v-model="selectedModel"
@ -45,8 +43,7 @@
cmsWidgetName="VehicleModelQuestion" cmsWidgetName="VehicleModelQuestion"
:updateValues="updateModelValues" :updateValues="updateModelValues"
validationRules="model-required" validationRules="model-required"
inputId="modelQuestionField" inputId="modelQuestionField" />
/>
<vehicleQuestion <vehicleQuestion
ref="vehicleStyleQuestion" ref="vehicleStyleQuestion"
v-model="selectedStyle" v-model="selectedStyle"
@ -54,15 +51,13 @@
cmsWidgetName="VehicleStyleQuestion" cmsWidgetName="VehicleStyleQuestion"
:updateValues="updateStyleValues" :updateValues="updateStyleValues"
validationRules="style-required" validationRules="style-required"
inputId="styleQuestionField" inputId="styleQuestionField" />
/>
<vehicleBanner <vehicleBanner
ref="banner" ref="banner"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric" :displayGenericVehicleImage="displayGeneric"
class="mt-5 mb-3" class="mt-5 mb-3" />
/>
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
@ -70,8 +65,7 @@
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
@backClicked="navigateBack" @backClicked="navigateBack" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -80,154 +74,154 @@
<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 siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue"; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue"; import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import vehicleQuestion from "@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue"; import vehicleQuestion from '@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue';
import { useMainStore } from "@/store"; import { useMainStore } from '@/store';
// Supporting files // Supporting files
import baseFormMixin from "@/mixins/base-form-mixin.js"; import baseFormMixin from '@/mixins/base-form-mixin.js';
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';
// define validation rules // define validation rules
defineRule("year-required", required(errorMessages.YEAR_REQUIRED)); defineRule('year-required', required(errorMessages.YEAR_REQUIRED));
defineRule("make-required", required(errorMessages.MAKE_REQUIRED)); defineRule('make-required', required(errorMessages.MAKE_REQUIRED));
defineRule("model-required", required(errorMessages.MODEL_REQUIRED)); defineRule('model-required', required(errorMessages.MODEL_REQUIRED));
defineRule("style-required", required(errorMessages.STYLE_REQUIRED)); defineRule('style-required', required(errorMessages.STYLE_REQUIRED));
export default { export default {
name: "vehicle-selection", name: 'vehicle-selection',
components: { components: {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
vehicleBanner, vehicleBanner,
siteFooter, siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
vehicleQuestion, vehicleQuestion
}, },
mixins: [baseFormMixin], mixins: [baseFormMixin],
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);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, }
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
}); });
},
props: {
cmsWidgetName: String,
validationRules: String,
},
data() {
const { year, make, model, style } = useMainStore().order.vehicle;
return {
selectedYear: year,
selectedMake: make,
selectedModel: model,
selectedStyle: style,
};
},
computed: {
displayGeneric() {
return !this.selectedStyle;
}, },
}, props: {
cmsWidgetName: String,
watch: { validationRules: String
selectedYear(value) {
this.mainStore.updateVehicleYear(value);
this.$refs.vehicleMakeQuestion.clearValues();
if (value) {
this.$refs.vehicleMakeQuestion.getNewValues();
}
}, },
selectedMake(value) { data() {
this.mainStore.updateVehicleMake(value); const { year, make, model, style } = useMainStore().order.vehicle;
this.$refs.vehicleModelQuestion.clearValues(); return {
if (value) { selectedYear: year,
this.$refs.vehicleModelQuestion.getNewValues(); selectedMake: make,
} selectedModel: model,
selectedStyle: style
};
}, },
selectedModel(value) { computed: {
this.mainStore.updateVehicleModel(value); displayGeneric() {
this.$refs.vehicleStyleQuestion.clearValues(); return !this.selectedStyle;
if (value) {
this.$refs.vehicleStyleQuestion.getNewValues();
}
},
selectedStyle(value) {
this.mainStore.updateVehicleStyle(value);
this.mainStore.setVehicle();
},
},
mounted() {
this.$refs.vehicleYearQuestion.getNewValues();
if (this.selectedYear) {
this.$refs.vehicleMakeQuestion.getNewValues();
}
if (this.selectedMake) {
this.$refs.vehicleModelQuestion.getNewValues();
}
if (this.selectedModel) {
this.$refs.vehicleStyleQuestion.getNewValues();
}
},
methods: {
arePagePrerequisitesValid() {
return true;
},
async forwardButtonAction() {
return this.navigateForward();
},
navigateForward() {
this.mainStore.setVehicle().then(() => {
if (this.mainStore.isBailout) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
return;
} }
},
this.$router.navigate( watch: {
this.navigationScenarios.CLICKED_FORWARD, selectedYear(value) {
this.$route this.mainStore.updateVehicleYear(value);
); this.$refs.vehicleMakeQuestion.clearValues();
}); if (value) {
this.$refs.vehicleMakeQuestion.getNewValues();
}
},
selectedMake(value) {
this.mainStore.updateVehicleMake(value);
this.$refs.vehicleModelQuestion.clearValues();
if (value) {
this.$refs.vehicleModelQuestion.getNewValues();
}
},
selectedModel(value) {
this.mainStore.updateVehicleModel(value);
this.$refs.vehicleStyleQuestion.clearValues();
if (value) {
this.$refs.vehicleStyleQuestion.getNewValues();
}
},
selectedStyle(value) {
this.mainStore.updateVehicleStyle(value);
this.mainStore.setVehicle();
}
}, },
async updateYearValues() { mounted() {
return useMainStore().getVehicleYears(); this.$refs.vehicleYearQuestion.getNewValues();
if (this.selectedYear) {
this.$refs.vehicleMakeQuestion.getNewValues();
}
if (this.selectedMake) {
this.$refs.vehicleModelQuestion.getNewValues();
}
if (this.selectedModel) {
this.$refs.vehicleStyleQuestion.getNewValues();
}
}, },
async updateMakeValues() { methods: {
return this.mainStore.getVehicleMakes(); arePagePrerequisitesValid() {
}, return true;
async updateModelValues() { },
return this.mainStore.getVehicleModels(); async forwardButtonAction() {
}, return this.navigateForward();
async updateStyleValues() { },
return this.mainStore.getVehicleStyles();
}, navigateForward() {
}, this.mainStore.setVehicle().then(() => {
if (this.mainStore.isBailout) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
return;
}
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
});
},
async updateYearValues() {
return useMainStore().getVehicleYears();
},
async updateMakeValues() {
return this.mainStore.getVehicleMakes();
},
async updateModelValues() {
return this.mainStore.getVehicleModels();
},
async updateStyleValues() {
return this.mainStore.getVehicleStyles();
}
}
}; };
</script> </script>

473
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -3,8 +3,7 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
@ -17,19 +16,16 @@
<vehicleBanner <vehicleBanner
class="mt-2 mb-4" class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget" cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="!carIdIsValid" :displayGenericVehicleImage="!carIdIsValid" />
/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<vinLookupAlerts <vinLookupAlerts
class="mt-5" class="mt-5"
:activeAlertType="activeVehicleLookupAlertType" :activeAlertType="activeVehicleLookupAlertType" />
/>
<vinQuestion <vinQuestion
v-model="vin" v-model="vin"
:mask="vinMask" :mask="vinMask"
:isDisabled="vinPopulatedOnPageLoad" :isDisabled="vinPopulatedOnPageLoad"
textPosition="left" textPosition="left" />
/>
<vinLocationInformation /> <vinLocationInformation />
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
@ -37,8 +33,7 @@
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
class="mt-5" class="mt-5"
@backClicked="navigateBack" @backClicked="navigateBack"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -47,262 +42,256 @@
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
import { computed } from "vue"; import { computed } from 'vue';
import vehicleLookupAlertTypes from "@/constants/vehicle-lookup-alert-types"; import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { isGlassAvailableForCarId } from "@/helpers/damage-helper"; import { isGlassAvailableForCarId } from '@/helpers/damage-helper';
import settleAllPromises from "@/helpers/layout-helper"; import settleAllPromises from '@/helpers/layout-helper';
import routerParams from "@/router/router-constants/router-params"; import routerParams from '@/router/router-constants/router-params';
import { useMainStore } from "@/store"; import { useMainStore } from '@/store';
// Import Component // Import Component
import baseFormMixin from "@/mixins/base-form-mixin"; import baseFormMixin from '@/mixins/base-form-mixin';
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin"; import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
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 siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue"; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from "@/iss-components/vehicle-banner/vehicle-banner.vue"; import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import vinLocationInformation from "@/layouts/vin-lookup/vin-location-information/vin-location-information.vue"; import vinLocationInformation from '@/layouts/vin-lookup/vin-location-information/vin-location-information.vue';
import vinLookupAlerts from "@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue"; import vinLookupAlerts from '@/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue';
import vinQuestion from "@/layouts/vin-lookup/vin-question/vin-question.vue"; import vinQuestion from '@/layouts/vin-lookup/vin-question/vin-question.vue';
import bailoutCode from "@/constants/bailoutCode"; import bailoutCode from '@/constants/bailoutCode';
import bailoutMessage from "@/constants/bailoutMessage"; import bailoutMessage from '@/constants/bailoutMessage';
export default { export default {
name: "vin-lookup", name: 'vin-lookup',
components: { components: {
siteFooter, siteFooter,
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
vehicleBanner, vehicleBanner,
vinLocationInformation, vinLocationInformation,
vinLookupAlerts, vinLookupAlerts,
vinQuestion, vinQuestion
},
mixins: [baseFormMixin, vehicleQuestionsMixin],
provide() {
return {
vehicleFromLookup: computed(() => this.vehicleFromLookup),
};
},
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
setup() {
const mainStore = useMainStore();
return { mainStore };
},
data() {
const vin = this.getVinFromStore();
return {
activeVehicleLookupAlertType:
vin?.length > 0 && !this.hasValidCarId()
? vehicleLookupAlertTypes.NOT_FOUND
: null,
needToLookupVehicle: true,
vehicleFromLookup: null,
vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(),
vin,
forwardButtonCarStyle: "",
vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId(),
};
},
computed: {
isCarIdDifferentFromTheStore() {
return (
this.vehicleFromLookup !== null &&
this.hasValidCarId() &&
this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
);
}, },
isTwoIdenticalYMMVehicleFound() { mixins: [baseFormMixin, vehicleQuestionsMixin],
if (this.vehicleFromLookup === null) { provide() {
return false; return {
} vehicleFromLookup: computed(() => this.vehicleFromLookup)
const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`; };
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
}, },
vinMask() { async beforeRouteEnter(to, from, next) {
// TODO: Side effects in computed. const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
if (this.vinPopulatedOnPageLoad) {
// TODO: Modify to remove side effects in computed
this.activeVehicleLookupAlertType =
vehicleLookupAlertTypes.PERFECT_MATCH;
this.needToLookupVehicle = false;
const lastSixChars = this.vin.substring(11, this.vin.length);
return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
}
return "*****************";
},
carIdIsValid() {
return this.hasValidCarId();
},
},
watch: {
vin() {
this.resetActiveAlert();
this.$refs.siteFooter.enableForwardAction();
this.needToLookupVehicle = true;
this.$refs.siteFooter.updateButtonText(
this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
);
},
},
methods: {
arePagePrerequisiteValid() {
return true;
},
getVinFromStore() {
return this.mainStore.vehicle.vin;
},
hasValidCarId() {
return (
this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== "0"
);
},
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
async forwardButtonAction() {
this.resetActiveAlert();
// Temp solution to reset the 'disabled' style on the Continue button
this.$refs.siteFooter.enableForwardAction();
if (this.needToLookupVehicle) { // Settle promises and get results
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin); const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}
];
if (vehicleLookupResponse.error) { const resultMap = await settleAllPromises(promiseResultMap);
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
this.mainStore.setBailout(bailoutMessage.vehicleNotFound(this.vin));
this.resetVehicleFromLookup();
this.$refs.siteFooter.removeLoader();
// Temp solution to turn on 'disabled' style on the Continue button
// because the form itself actually passes its client-side validation.
// SSR-189 Scenario #4.
this.$refs.siteFooter.enableForwardAction();
return;
}
this.mainStore.resetBailout(); next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
// Add vin bcs the response from the service doesn't contain vin
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
vin: this.vin,
}); });
} },
setup() {
const mainStore = useMainStore();
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) { return { mainStore };
if (this.isTwoIdenticalYMMVehicleFound) { },
this.activeVehicleLookupAlertType = data() {
vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED; const vin = this.getVinFromStore();
this.forwardButtonCarStyle = this.vehicleFromLookup.style; return {
} else { activeVehicleLookupAlertType:
this.activeVehicleLookupAlertType = vin?.length > 0 && !this.hasValidCarId()
vehicleLookupAlertTypes.NOT_MATCHED; ? vehicleLookupAlertTypes.NOT_FOUND
: null,
needToLookupVehicle: true,
vehicleFromLookup: null,
vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(),
vin,
forwardButtonCarStyle: '',
vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId()
};
},
computed: {
isCarIdDifferentFromTheStore() {
return (
this.vehicleFromLookup !== null
&& this.hasValidCarId()
&& this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
);
},
isTwoIdenticalYMMVehicleFound() {
if (this.vehicleFromLookup === null) {
return false;
}
const vinYmmFound = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
const vinYmmExpected = `${this.mainStore.order.vehicle.year} ${this.mainStore.order.vehicle.make} ${this.mainStore.order.vehicle.model}`;
return vinYmmFound.toLowerCase() === vinYmmExpected.toLowerCase();
},
vinMask() {
// TODO: Side effects in computed.
if (this.vinPopulatedOnPageLoad) {
// TODO: Modify to remove side effects in computed
this.activeVehicleLookupAlertType =
vehicleLookupAlertTypes.PERFECT_MATCH;
this.needToLookupVehicle = false;
const lastSixChars = this.vin.substring(11, this.vin.length);
return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
}
return '*****************';
},
carIdIsValid() {
return this.hasValidCarId();
} }
},
watch: {
vin() {
this.resetActiveAlert();
this.$refs.siteFooter.enableForwardAction();
this.needToLookupVehicle = true;
this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
}
},
methods: {
arePagePrerequisiteValid() {
return true;
},
getVinFromStore() {
return this.mainStore.vehicle.vin;
},
hasValidCarId() {
return (
this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== '0'
);
},
// NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
async forwardButtonAction() {
this.resetActiveAlert();
// Temp solution to reset the 'disabled' style on the Continue button
this.$refs.siteFooter.enableForwardAction();
const vehicleYearMakeModelStyle = if (this.needToLookupVehicle) {
const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);
if (vehicleLookupResponse.error) {
this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
this.mainStore.setBailout(bailoutMessage.vehicleNotFound(this.vin));
this.resetVehicleFromLookup();
this.$refs.siteFooter.removeLoader();
// Temp solution to turn on 'disabled' style on the Continue button
// because the form itself actually passes its client-side validation.
// SSR-189 Scenario #4.
this.$refs.siteFooter.enableForwardAction();
return;
}
this.mainStore.resetBailout();
// Add vin bcs the response from the service doesn't contain vin
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
vin: this.vin
});
}
if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {
if (this.isTwoIdenticalYMMVehicleFound) {
this.activeVehicleLookupAlertType =
vehicleLookupAlertTypes.TWO_IDENTICAL_YMM_MATCHED;
this.forwardButtonCarStyle = this.vehicleFromLookup.style;
} else {
this.activeVehicleLookupAlertType =
vehicleLookupAlertTypes.NOT_MATCHED;
}
const vehicleYearMakeModelStyle =
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
`${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`; `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
this.$refs.siteFooter.updateButtonText( this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
`Continue with ${vehicleYearMakeModelStyle}` this.$refs.siteFooter.removeLoader();
);
this.$refs.siteFooter.removeLoader();
this.needToLookupVehicle = false; this.needToLookupVehicle = false;
return null; return null;
} }
let isSelectedGlassAvailableForVehicle = true; let isSelectedGlassAvailableForVehicle = true;
if (this.isCarIdDifferentFromTheStore) { if (this.isCarIdDifferentFromTheStore) {
isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId( isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(this.vehicleFromLookup.carId);
this.vehicleFromLookup.carId }
);
}
// navigate back to vehicle-damage // navigate back to vehicle-damage
if ( if (
this.isCarIdDifferentFromTheStore && this.isCarIdDifferentFromTheStore
!isSelectedGlassAvailableForVehicle && !isSelectedGlassAvailableForVehicle
) { ) {
this.mainStore.updateVehicle(this.vehicleFromLookup); this.mainStore.updateVehicle(this.vehicleFromLookup);
this.mainStore.resetDamageState(); this.mainStore.resetDamageState();
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS, this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
this.$route, this.$route,
{}, {},
{ [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true } { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
); );
// navigate() doesn't stop the processing flow // navigate() doesn't stop the processing flow
return null; return null;
} }
// save vehicle to store if it hasn't already been saved // save vehicle to store if it hasn't already been saved
if (!this.vinPopulatedOnPageLoad) { if (!this.vinPopulatedOnPageLoad) {
this.mainStore.updateVehicle(this.vehicleFromLookup); this.mainStore.updateVehicle(this.vehicleFromLookup);
} }
if (this.vinWithNonMatchingCarId) { if (this.vinWithNonMatchingCarId) {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.CORRECTED_VIN_FROM_POLICY_VEHICLE, this.navigationScenarios.CORRECTED_VIN_FROM_POLICY_VEHICLE,
this.$route this.$route
); );
return null; return null;
} }
const partsOrQuestionsResponse = await this.getPartsOrQuestions(); const partsOrQuestionsResponse = await this.getPartsOrQuestions();
if (partsOrQuestionsResponse.error) { if (partsOrQuestionsResponse.error) {
// To Do: Need requirement on what to do here // To Do: Need requirement on what to do here
window.console.error("Error on retrieving PartsOrQuestions"); window.console.error('Error on retrieving PartsOrQuestions');
this.$refs.siteFooter.removeLoader(); this.$refs.siteFooter.removeLoader();
return null; return null;
} }
// Comes from vehicleQuestionsMixin.navigateForward() // Comes from vehicleQuestionsMixin.navigateForward()
await this.navigateForward( await this.navigateForward(
partsOrQuestionsResponse.data.partsOrQuestions, partsOrQuestionsResponse.data.partsOrQuestions,
this this
); );
return null; return null;
}, },
async lookupVehicleByVin(vin) { async lookupVehicleByVin(vin) {
try { try {
return await this.mainStore.lookupVehicleByVin(vin); return await this.mainStore.lookupVehicleByVin(vin);
} catch (responseError) { } catch (responseError) {
return { return {
error: { error: {
status: responseError.status, status: responseError.status
}, }
}; };
} }
}, },
resetActiveAlert() { resetActiveAlert() {
this.activeVehicleLookupAlertType = null; this.activeVehicleLookupAlertType = null;
}, },
resetVehicleFromLookup() { resetVehicleFromLookup() {
this.vehicleFromLookup = null; this.vehicleFromLookup = null;
}, },
resetDependentState() {}, resetDependentState() {}
}, }
}; };
</script> </script>

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

@ -3,8 +3,7 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit" @invalidSubmit="onInvalidSubmit">
>
<div class="container-fluid fade-on-route-transition"> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2"> <div class="col-md-6 px-0 px-md-2">
@ -13,7 +12,9 @@
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-4" /> <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4" />
<textboxQuestion <textboxQuestion
ref="policyNumber" ref="policyNumber"
v-model="welcomePageModel.policyNumber" v-model="welcomePageModel.policyNumber"
@ -22,8 +23,7 @@
isRequired isRequired
disableAutoFill disableAutoFill
:isDisabled="isPolicyHolderDisabled" :isDisabled="isPolicyHolderDisabled"
:validationRules="rules.policyNumber" :validationRules="rules.policyNumber" />
/>
<textboxQuestion <textboxQuestion
ref="policyZip" ref="policyZip"
v-model="welcomePageModel.policyZipCode" v-model="welcomePageModel.policyZipCode"
@ -32,8 +32,7 @@
isRequired isRequired
mask="#####" mask="#####"
:isDisabled="isPolicyZipDisabled" :isDisabled="isPolicyZipDisabled"
:validationRules="rules.policyZip" :validationRules="rules.policyZip" />
/>
<textboxQuestion <textboxQuestion
ref="dateOfLoss" ref="dateOfLoss"
v-model="welcomePageModel.dateOfLoss" v-model="welcomePageModel.dateOfLoss"
@ -45,13 +44,11 @@
disableAutoFill disableAutoFill
:max="new Date().toJSON().slice(0, 10)" :max="new Date().toJSON().slice(0, 10)"
:min="'1972-12-01'" :min="'1972-12-01'"
:validationRules="rules.lossDate" :validationRules="rules.lossDate" />
/>
<textBlock <textBlock
cmsWidgetName="DamageDateEstimateWidget" cmsWidgetName="DamageDateEstimateWidget"
typeStyle="small" typeStyle="small"
class="mt-2" class="mt-2" />
/>
<dropdownQuestion <dropdownQuestion
id="welcomeDropdown" id="welcomeDropdown"
ref="damageCause" ref="damageCause"
@ -61,8 +58,7 @@
:options="DamageCauseOptions" :options="DamageCauseOptions"
disableAutoFill disableAutoFill
:validationRules="rules.damageOption" :validationRules="rules.damageOption"
placeHolderText="Select an option" placeHolderText="Select an option" />
/>
<textboxQuestion <textboxQuestion
ref="phoneNumber" ref="phoneNumber"
v-model="welcomePageModel.phoneNumber" v-model="welcomePageModel.phoneNumber"
@ -71,8 +67,7 @@
:validationRules="rules.phoneNumber" :validationRules="rules.phoneNumber"
isRequired isRequired
:mask="phoneMask" :mask="phoneMask"
disableAutoFill disableAutoFill />
/>
<textboxQuestion <textboxQuestion
ref="email" ref="email"
v-model="welcomePageModel.email" v-model="welcomePageModel.email"
@ -80,8 +75,7 @@
cmsWidgetName="EmailAddressQuestion" cmsWidgetName="EmailAddressQuestion"
:validationRules="rules.email" :validationRules="rules.email"
isRequired isRequired
disableAutoFill disableAutoFill />
/>
<textboxQuestion <textboxQuestion
v-if="displayDamageCityQuestion" v-if="displayDamageCityQuestion"
ref="damageCity" ref="damageCity"
@ -91,8 +85,7 @@
cmsWidgetName="DamageCityQuestion" cmsWidgetName="DamageCityQuestion"
isRequired isRequired
disableAutoFill disableAutoFill
:validationRules="rules.lossCity" :validationRules="rules.lossCity" />
/>
<dropdownQuestion <dropdownQuestion
v-if="displayDamageStateQuestion" v-if="displayDamageStateQuestion"
id="welcomeDropdown" id="welcomeDropdown"
@ -105,8 +98,7 @@
:validationRules="rules.lossState" :validationRules="rules.lossState"
isRequired isRequired
disableAutoFill disableAutoFill
placeHolderText="Select an option" placeHolderText="Select an option" />
/>
<buttonQuestion <buttonQuestion
v-if="displayGlassOnlyQuestion" v-if="displayGlassOnlyQuestion"
ref="glassOnlyDamage" ref="glassOnlyDamage"
@ -121,289 +113,287 @@
:validationRules="rules.damageOption" :validationRules="rules.damageOption"
isRequired isRequired
isSmallQuestionLabelText isSmallQuestionLabelText
disableAutoFill disableAutoFill />
/> <div
<div id="welcomeFooter" class="row"> id="welcomeFooter"
class="row">
<alert <alert
v-if="displayInvalidZipAlert" v-if="displayInvalidZipAlert"
ref="alertInvalidZip" ref="alertInvalidZip"
class="my-4" class="my-4"
cmsWidgetName="AlertInvalidZipWidget" cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger" alertClass="alert-danger"
:isDismissible="false" :isDismissible="false" />
/>
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
class="mt-3" class="mt-3"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction" />
/>
</div> </div>
</div> </div>
</div> </div>
<!-- Footer image component must have parent (usually container-fluid) <!-- Footer image component must have parent (usually container-fluid)
set to display: flex and height 100dvh or height 100% --> set to display: flex and height 100dvh or height 100% -->
<footerImage <footerImage cmsWidgetName="SiteFooterWidget" />
cmsWidgetName="SiteFooterWidget" />
</div> </div>
</Form> </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"; import footerImage from '@/iss-components/site-footer/footer-image/footer-image.vue';
// Supporting files // Supporting files
import { import {
fetchCmsContentForPage, fetchCmsContentForPage,
fetchGlobalCmsContent, fetchGlobalCmsContent,
updateCmsSiteHeader, updateCmsSiteHeader
} from "@/helpers/cms-content-helper"; } from '@/helpers/cms-content-helper';
import settleAllPromises from "@/helpers/layout-helper"; import settleAllPromises from '@/helpers/layout-helper';
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 BaseFormMixin from "@/mixins/base-form-mixin.js"; import BaseFormMixin from '@/mixins/base-form-mixin.js';
import { useMainStore } from "@/store"; import { useMainStore } from '@/store';
import states from "@/constants/states"; import states from '@/constants/states';
import globalRules from "@/constants/global-rules"; import globalRules from '@/constants/global-rules';
import routerParams from "@/router/router-constants/router-params"; import routerParams from '@/router/router-constants/router-params';
import MaskaFormattedMasks from "@/constants/maska-masks"; import MaskaFormattedMasks from '@/constants/maska-masks';
// define validation rules // define validation rules
defineRule( defineRule(
"damage-option-required", 'damage-option-required',
required(errorMessages.DAMAGE_OPTION_REQUIRED) required(errorMessages.DAMAGE_OPTION_REQUIRED)
); );
export default { export default {
name: "welcome-page", name: 'welcome-page',
components: { components: {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
footerImage, footerImage,
alert, alert,
buttonQuestion, buttonQuestion,
textboxQuestion, textboxQuestion,
dropdownQuestion, dropdownQuestion,
siteFooter, siteFooter,
textBlock, textBlock,
// 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) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const cmsGlobalSiteHeaderContentPromise = const cmsGlobalSiteHeaderContentPromise =
fetchGlobalCmsContent("iss-siteheader"); fetchGlobalCmsContent('iss-siteheader');
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, },
{ {
resultKey: "globalSiteHeaderCmsContent", resultKey: 'globalSiteHeaderCmsContent',
promise: cmsGlobalSiteHeaderContentPromise, promise: cmsGlobalSiteHeaderContentPromise
}, }
]; ];
// use resultMap to populate layout content. // use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => { next((vm) => {
updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent); updateCmsSiteHeader(resultMap.globalSiteHeaderCmsContent);
vm.setCmsContent(resultMap.cmsContent); 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;
},
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;
},
},
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();
}
}); });
}, },
navigateForward() { setup() {
if (this.mainStore.applicationUser.duplicateOrders?.length > 0 ?? false) { const mainStore = useMainStore();
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_DUPLICATES, // Set order account number from the issConfig.
this.$route, mainStore.order.accountNumber = mainStore.issConfig.parentAccountNumber;
{},
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } return { mainStore };
); },
} else if (this.mainStore.policy.policyLookupSuccessful) { data() {
if (this.mainStore.order.policy.vehicles?.length > 0 ?? false) { return {
// navigate to policy-vehicles page welcomePageModel: this.getWelcomePageModelFromStore(),
this.$router.navigate( displayInvalidZipAlert: false,
this.navigationScenarios duplicates: [],
.CLICKED_FORWARD_POLICY_VERIFIED_WITH_VEHICLES, rules: {
this.$route, damageOption: 'damage-option-required',
{}, email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
{ [routerParams.SAVE_SESSION_SYNCHRONOUS]: true } lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
); // eslint-disable-next-line max-len
} else { lossDate: `${globalRules.DATE_OF_LOSS_REQUIRED}|${globalRules.DATE_OF_LOSS_NOT_TEN_YEARS_PAST}|${globalRules.DATE_OF_LOSS_NOT_FUTURE}`,
// navigate to vehicle-selection page (manual entry) lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
this.$router.navigate( policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
this.navigationScenarios policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
.CLICKED_FORWARD_POLICY_VERIFIED_NO_VEHICLES, phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
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 }
);
}
}, },
getWelcomePageModelFromStore() { methods: {
return { async forwardButtonAction() {
policyNumber: this.mainStore.order.policy.policyNumber, await this.mainStore
policyZipCode: this.mainStore.order.policy.policyZipCode, .validateZip({ zip: this.welcomePageModel.policyZipCode })
dateOfLoss: this.mainStore.order.policy.dateOfLoss, .then(async (zipInfo) => {
damageCause: this.mainStore.order.policy.damageCause, if (zipInfo?.data?.isValid === true) {
damageState: this.mainStore.order.policy.damageState, this.mainStore.updatePolicyData(this.welcomePageModel);
damageCity: this.mainStore.order.policy.damageCity, await this.mainStore
isDamageGlassOnly: this.mainStore.order.policy.isDamageGlassOnly, .getDuplicateReferrals()
phoneNumber: this.mainStore.order.customer.phoneNumber, .then(
email: this.mainStore.order.customer.emailAddress, () => {},
isPolicyNumberDisabled: () => {}
this.mainStore.order.policy.isPolicyNumberDisabled, )
}; .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();
}
});
},
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" scoped> <style lang="scss" scoped>
form { form {
height: 100dvh; height: 100dvh;
.container-fluid { .container-fluid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
} }
} }
@-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