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",

2
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",

16
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 {

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

@ -1,25 +1,28 @@
<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="
(disableForwardAction || isForwardActionDisabled) &&
'form-test-invalid'
"
:aria-disabled="isForwardActionDisabled" :aria-disabled="isForwardActionDisabled"
:isDisabled="isForwardActionDisabled" :isDisabled="isForwardActionDisabled"
data-bs-target="#footerModal" data-bs-target="#footerModal"
@ -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);
}); });
@ -175,21 +180,18 @@ export default {
} }
} }
} }
.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>

109
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,24 +102,24 @@
</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,
@ -136,7 +129,7 @@ export default {
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) {
@ -153,7 +146,7 @@ export default {
emailAddress, emailAddress,
phoneNumber, phoneNumber,
requestTextUpdates, requestTextUpdates,
notesForTechnician, notesForTechnician
} = useMainStore().contactInfo; } = useMainStore().contactInfo;
return { return {
firstName, firstName,
@ -163,23 +156,23 @@ export default {
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: {
@ -187,17 +180,17 @@ export default {
* @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. * @returns {string} Returns the CMS text associated with the "get text updates" checkbox.
*/ */
textUpdateDisclaimerText() { textUpdateDisclaimerText() {
return `*${this.getCmsContent(this.widget.disclaimer, "Text")}`; return `*${this.getCmsContent(this.widget.disclaimer, 'Text')}`;
}, },
phoneMask() { phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER; return MaskaFormattedMasks.PHONE_NUMBER;
}, }
}, },
methods: { methods: {
/** /**
@ -210,7 +203,7 @@ export default {
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 =
@ -218,8 +211,8 @@ export default {
? 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>

245
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,69 +70,67 @@
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,
@ -146,7 +141,7 @@ export default {
contentGroupModal, contentGroupModal,
buttonQuestion, buttonQuestion,
loadingModal, loadingModal,
textBlock, textBlock
}, },
mixins: [baseFormMixin, vehicleQuestionsMixin], mixins: [baseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -157,13 +152,13 @@ export default {
// 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);
@ -172,25 +167,23 @@ export default {
: []; : [];
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; hasBailedOut = true;
next(`/?issPage=${issPageValues.BAILOUT_PAGE}`); next(`/?issPage=${issPageValues.BAILOUT_PAGE}`);
}); });
@ -219,25 +212,25 @@ export default {
policyLookupSuccessful, policyLookupSuccessful,
isNoComp: noCoverage ?? false, isNoComp: noCoverage ?? false,
baseServiceLineItems: [], baseServiceLineItems: [],
selectedProvider: "", selectedProvider: '',
deductibleText: "Your deductible is", deductibleText: 'Your deductible is',
// TODO update when design team gives appropriate text // TODO update when design team gives appropriate text
loadingText: [ loadingText: [
"Connecting to your insurance company", 'Connecting to your insurance company',
"Nearly there", 'Nearly there',
"Finishing up", 'Finishing up'
], ],
rules: { rules: {
selectionRequired: globalRules.OPTION_REQUIRED, selectionRequired: globalRules.OPTION_REQUIRED
}, },
supportingItems: null, supportingItems: null,
widget: { widget: {
subheader: "SiteSubHeaderWidget", subheader: 'SiteSubHeaderWidget',
verifiedItacAlert: "VerifiedITACAlert", verifiedItacAlert: 'VerifiedITACAlert',
explanatoryText: "ExplanatoryTextWidget", explanatoryText: 'ExplanatoryTextWidget',
nextStep: "NextStepsWidget", nextStep: 'NextStepsWidget',
serviceProviderQuestion: "ServiceProviderQuestion", serviceProviderQuestion: 'ServiceProviderQuestion'
}, }
}; };
}, },
computed: { computed: {
@ -257,7 +250,7 @@ export default {
return this.getCmsContent( return this.getCmsContent(
this.widget.verifiedItacAlert, this.widget.verifiedItacAlert,
widgetFields.ALERT_WIDGET.BODY_TEXT widgetFields.ALERT_WIDGET.BODY_TEXT
)?.replaceAll("{custom:costSavings}", this.itacCostSavingsForDisplay); )?.replaceAll('{custom:costSavings}', this.itacCostSavingsForDisplay);
}, },
secondaryText() { secondaryText() {
return this.getTextFromCmsWithCustomIfStatements( return this.getTextFromCmsWithCustomIfStatements(
@ -281,11 +274,11 @@ export default {
return this.getTextFromCmsWithCustomIfStatements( return this.getTextFromCmsWithCustomIfStatements(
this.widget.nextStep, this.widget.nextStep,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
)?.replaceAll("{custom:damage}", this.damageText); )?.replaceAll('{custom:damage}', this.damageText);
}, },
damageText() { damageText() {
const damageString = getDamageString(); const damageString = getDamageString();
return damageString === "match" ? "" : damageString; return damageString === 'match' ? '' : damageString;
}, },
deductibleValue() { deductibleValue() {
return useMainStore().order.currentDeductible; return useMainStore().order.currentDeductible;
@ -301,9 +294,9 @@ export default {
}, },
verifiedITAC() { verifiedITAC() {
return ( return (
this.policyLookupSuccessful && this.policyLookupSuccessful
!this.isNoComp && && !this.isNoComp
this.deductibleValue > this.totalServicePrice && this.deductibleValue > this.totalServicePrice
); );
}, },
coveredAndServicePriceAboveOrEqualDeductible() { coveredAndServicePriceAboveOrEqualDeductible() {
@ -313,11 +306,11 @@ export default {
}, },
verifiedDeductible() { verifiedDeductible() {
return useMainStore().isClaimRegistrationRequired return useMainStore().isClaimRegistrationRequired
? this.registerClaimSuccessful && ? this.registerClaimSuccessful
this.coveredAndServicePriceAboveOrEqualDeductible && && this.coveredAndServicePriceAboveOrEqualDeductible
this.deductibleValue !== null && this.deductibleValue !== null
: this.policyLookupSuccessful && : this.policyLookupSuccessful
this.coveredAndServicePriceAboveOrEqualDeductible; && this.coveredAndServicePriceAboveOrEqualDeductible;
}, },
unverified() { unverified() {
return ( return (
@ -359,29 +352,29 @@ export default {
}, },
shouldRegisterClaim() { shouldRegisterClaim() {
return ( return (
this.policyLookupSuccessful && this.policyLookupSuccessful
useMainStore().vehicle.policyVehicleId != null && && useMainStore().vehicle.policyVehicleId != null
useMainStore().vehicle.policyVehicleId >= 0 && && useMainStore().vehicle.policyVehicleId >= 0
useMainStore().isClaimRegistrationRequired && && useMainStore().isClaimRegistrationRequired
!useMainStore().isClaimAlreadyRegistered && && !useMainStore().isClaimAlreadyRegistered
(this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC) && (this.coveredAndServicePriceAboveOrEqualDeductible || this.verifiedITAC)
); );
}, }
}, },
watch: { watch: {
selectedProvider() { selectedProvider() {
const buttonText = 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() { mounted() {
setupModalLinks(this); setupModalLinks(this);
@ -409,27 +402,17 @@ export default {
useMainStore().updateSupportingItems(this.supportingItems); useMainStore().updateSupportingItems(this.supportingItems);
this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD); this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
} else if (this.verifiedITAC || this.verifiedNoComp) { } else if (this.verifiedITAC || this.verifiedNoComp) {
useMainStore().updateIsSafeliteProvider( useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
this.selectedProvider === SAFELITE_PROVIDER
);
if (this.selectedProvider === SAFELITE_PROVIDER) { if (this.selectedProvider === SAFELITE_PROVIDER) {
useMainStore().updateSupportingItems(this.supportingItems); useMainStore().updateSupportingItems(this.supportingItems);
this.navigateWithScenario( this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE
);
} else { } else {
useMainStore().setBailout(bailoutMessage.RequestCallback()); useMainStore().setBailout(bailoutMessage.RequestCallback());
this.navigateWithScenario( this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP
);
} }
} else { } else {
useMainStore().setBailout( useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
bailoutMessage.coverageStatementInvalidState() this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
);
this.navigateWithScenario(
navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE
);
} }
}, },
navigateWithScenario(scenario) { navigateWithScenario(scenario) {
@ -439,29 +422,29 @@ export default {
const rawText = this.getCmsContent(widgetName, widgetField); const rawText = this.getCmsContent(widgetName, widgetField);
return processIfStatements( return processIfStatements(
rawText, rawText,
"custom", 'custom',
this.getCustomValueFromString this.getCustomValueFromString
); );
}, },
getCustomValueFromString(str) { getCustomValueFromString(str) {
switch (str) { switch (str) {
case "coverageUnverified": case 'coverageUnverified':
return this.unverified; return this.unverified;
case "verifiedDeductible": case 'verifiedDeductible':
return this.verifiedDeductible; return this.verifiedDeductible;
case "verifiedITAC": case 'verifiedITAC':
return this.verifiedITAC; return this.verifiedITAC;
case "verifiedNoComp": case 'verifiedNoComp':
return this.verifiedNoComp; return this.verifiedNoComp;
case "ADASReplace": case 'ADASReplace':
return !this.isRepair && this.isADAS; return !this.isRepair && this.isADAS;
case "nonADASReplace": case 'nonADASReplace':
return !this.isRepair && !this.isADAS; return !this.isRepair && !this.isADAS;
case "nonADASRepair": case 'nonADASRepair':
return this.isRepair; return this.isRepair;
case "deductibleOverZero": case 'deductibleOverZero':
return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative? return this.verifiedDeductible && this.deductibleValue !== 0; // TODO what if deductible is negative?
case "isDeductibleZero": case 'isDeductibleZero':
return this.verifiedDeductible && this.deductibleValue === 0; return this.verifiedDeductible && this.deductibleValue === 0;
default: default:
return null; return null;
@ -472,8 +455,8 @@ export default {
}, },
setBaseServiceLineItems(lineItems) { setBaseServiceLineItems(lineItems) {
this.baseServiceLineItems = lineItems; this.baseServiceLineItems = lineItems;
}, }
}, }
}; };
</script> </script>

76
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,28 +45,28 @@
<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) {
@ -82,33 +80,33 @@ export default {
return { return {
selectedAnswer: null, selectedAnswer: null,
widget: { widget: {
siteHeader: "SiteHeaderWidget", siteHeader: 'SiteHeaderWidget',
siteSubHeader: "SiteSubHeaderWidget", siteSubHeader: 'SiteSubHeaderWidget',
existingOrNewQuestion: "ExistingOrNewQuestion", existingOrNewQuestion: 'ExistingOrNewQuestion',
siteFooter: "SiteFooterWidget", siteFooter: 'SiteFooterWidget'
}, },
rules: { rules: {
selectionRequired: globalRules.OPTION_REQUIRED, selectionRequired: globalRules.OPTION_REQUIRED
}, }
}; };
}, },
computed: { computed: {
questionText() { questionText() {
return this.getCmsContent( return this.getCmsContent(
this.widget.existingOrNewQuestion, this.widget.existingOrNewQuestion,
"QuestionText" 'QuestionText'
); );
}, },
answersFromCms() { answersFromCms() {
return ( return (
this.getCmsContent(this.widget.existingOrNewQuestion, "Answers") ?? [] this.getCmsContent(this.widget.existingOrNewQuestion, 'Answers') ?? []
); );
}, },
getNewOrderSelectionName() { getNewOrderSelectionName() {
return this.answersFromCms?.[0]?.Name ?? ""; return this.answersFromCms?.[0]?.Name ?? '';
}, },
duplicateOrders() { duplicateOrders() {
const duplicateOrderText = "Finish Existing Claim"; const duplicateOrderText = 'Finish Existing Claim';
const orders = useMainStore().applicationUser.duplicateOrders; const orders = useMainStore().applicationUser.duplicateOrders;
return ( return (
orders?.map((o) => { orders?.map((o) => {
@ -119,25 +117,25 @@ export default {
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() { answers() {
return [...this.duplicateOrders, ...this.answersFromCms]; return [...this.duplicateOrders, ...this.answersFromCms];
}, }
}, },
methods: { methods: {
/** /**
@ -145,8 +143,8 @@ export default {
*/ */
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)
@ -205,8 +203,8 @@ export default {
this.$route this.$route
); );
} }
}, }
}, }
}; };
</script> </script>

116
src/layouts/policy-vehicles/policy-vehicles.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,21 +18,18 @@
<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 <siteFooter
ref="siteFooter" ref="siteFooter"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" @backClicked="backButtonAction" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -40,35 +38,35 @@
</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], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -85,13 +83,13 @@ export default {
const policyVehicles = useMainStore().order.policy.vehicles; const policyVehicles = useMainStore().order.policy.vehicles;
return { return {
policyVehicles, policyVehicles,
selectedVehicleVin: "", selectedVehicleVin: '',
selectedPolicyVehicle: null, selectedPolicyVehicle: null,
displayGeneric: true, displayGeneric: true,
policyVinFound: true, policyVinFound: true,
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED, optionRequired: globalRules.OPTION_REQUIRED
}, }
}; };
}, },
computed: { computed: {
@ -100,7 +98,7 @@ export default {
const vehicles = this.policyVehicles; const vehicles = this.policyVehicles;
const mappedData = const mappedData =
vehicles?.map((v) => { vehicles?.map((v) => {
const maskSymbol = "X"; const maskSymbol = 'X';
const vinStart = maskSymbol.repeat(v.vin.length - 6); const vinStart = maskSymbol.repeat(v.vin.length - 6);
const vinEnd = v.vin.substring(v.vin.length - 6); const vinEnd = v.vin.substring(v.vin.length - 6);
return { return {
@ -108,7 +106,7 @@ export default {
vehicle: v, vehicle: v,
Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`, Text: `${v.vehicleYear} ${v.vehicleMake} ${v.vehicleModel}`,
Name: v.vin, Name: v.vin,
SubText: `VIN ${vinStart}${vinEnd}`, SubText: `VIN ${vinStart}${vinEnd}`
}; };
}) ?? []; }) ?? [];
return mappedData; return mappedData;
@ -126,11 +124,9 @@ export default {
return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle); return repairWaivedForSelectedVehicle(this.selectedPolicyVehicle);
}, },
selectedVehicle() { selectedVehicle() {
const vehicle = this.mainStore.lookupVehicleByVin( const vehicle = this.mainStore.lookupVehicleByVin(this.selectedVehicleVin);
this.selectedVehicleVin
);
return vehicle; return vehicle;
}, }
}, },
watch: { watch: {
async selectedVehicleVin(value) { async selectedVehicleVin(value) {
@ -154,12 +150,10 @@ export default {
// save selected vehicle to the store // save selected vehicle to the store
this.mainStore.updateVehicle(vehicle.data); this.mainStore.updateVehicle(vehicle.data);
this.displayGeneric = false; this.displayGeneric = false;
this.selectedPolicyVehicle = this.policyVehicles.find( this.selectedPolicyVehicle = this.policyVehicles.find((p) => p.vin === value);
(p) => p.vin === value }
);
} }
} }
},
}, },
beforeMount() { beforeMount() {
if (this.mainStore.order.vehicle.vin) { if (this.mainStore.order.vehicle.vin) {
@ -177,39 +171,33 @@ export default {
if ( if (
this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED this.selectedVehicleVin !== vehicleSelectionOptions.VEHICLE_NOT_LISTED
) { ) {
const vehicleLookupResponse = await this.lookupVehicleByVin( const vehicleLookupResponse = await this.lookupVehicleByVin(this.selectedVehicleVin);
this.selectedVehicleVin const vehicle = this.policyVehicles.find((pv) => pv.vin === this.selectedVehicleVin);
);
const vehicle = this.policyVehicles.find(
(pv) => pv.vin === this.selectedVehicleVin
);
if (vehicleLookupResponse.error) { if (vehicleLookupResponse.error) {
if (vehicleLookupResponse.status === 404) { if (vehicleLookupResponse.status === 404) {
this.mainStore.resetVehicleState(); this.mainStore.resetVehicleState();
useMainStore().updateVehicle({ useMainStore().updateVehicle({
policyVehicleId: vehicle.id, policyVehicleId: vehicle.id,
carId: "0", carId: '0',
category: "", category: '',
year: vehicle.vehicleYear || "", year: vehicle.vehicleYear || '',
make: vehicle.vehicleMake || "", make: vehicle.vehicleMake || '',
model: vehicle.vehicleModel || "", model: vehicle.vehicleModel || '',
style: vehicle.vehicleStyle || "", style: vehicle.vehicleStyle || '',
vin: vehicle.vin, vin: vehicle.vin,
noCoverage: this.noCoverageForSelectedVehicle, noCoverage: this.noCoverageForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle, deductible: this.deductibleForSelectedVehicle,
repairWaived: this.repairWaivedForSelectedVehicle, repairWaived: this.repairWaivedForSelectedVehicle
}); });
this.policyVinFound = false; this.policyVinFound = false;
return this.navigateForward(); return this.navigateForward();
} }
this.mainStore.setBailout( this.mainStore.setBailout(bailoutMessage.vehicleLookupError(
bailoutMessage.vehicleLookupError(
vehicle.vin, vehicle.vin,
vehicleLookupResponse.data vehicleLookupResponse.data
) ));
);
return this.navigateForward(); return this.navigateForward();
} }
@ -219,7 +207,7 @@ export default {
noCoverage: this.noCoverageForSelectedVehicle, noCoverage: this.noCoverageForSelectedVehicle,
deductible: this.deductibleForSelectedVehicle, deductible: this.deductibleForSelectedVehicle,
repairWaived: this.repairWaivedForSelectedVehicle, repairWaived: this.repairWaivedForSelectedVehicle,
endorsements: this.endorsementsForSelectedVehicle, endorsements: this.endorsementsForSelectedVehicle
}); });
useMainStore().updateVehicle(this.vehicleFromLookup); useMainStore().updateVehicle(this.vehicleFromLookup);
@ -244,13 +232,9 @@ export default {
{} {}
); );
} else if ( } else if (
this.endorsementsForSelectedVehicle?.length > 0 && this.endorsementsForSelectedVehicle?.length > 0
(this.endorsementsForSelectedVehicle?.includes( && (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
endorsementOptions.PARKING_GUARD || this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))
) ||
this.endorsementsForSelectedVehicle?.includes(
endorsementOptions.EDUCATOR
))
) { ) {
this.$router.navigate( this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS, this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
@ -279,11 +263,11 @@ export default {
return { return {
error: true, error: true,
status: responseError.status, status: responseError.status,
data: responseError.data, data: responseError.data
}; };
} }
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

119
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,35 +29,32 @@
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>
@ -61,31 +62,31 @@
// 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,
@ -97,7 +98,7 @@ export default {
recalModal, recalModal,
steeringModal, steeringModal,
shopPreferenceModal, shopPreferenceModal,
tpaRecalModal, tpaRecalModal
}, },
mixins: [baseFormMixin], mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -105,9 +106,9 @@ export default {
// 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);
next((vm) => { next((vm) => {
@ -125,8 +126,8 @@ export default {
showSteeringLink: false, showSteeringLink: false,
tpaAcknowledgement: false, tpaAcknowledgement: false,
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED, optionRequired: globalRules.OPTION_REQUIRED
}, }
}; };
}, },
computed: { computed: {
@ -136,17 +137,17 @@ export default {
prefAnswers() { prefAnswers() {
const cmsAnswersContent = [ const cmsAnswersContent = [
{ {
cmsWidgetName: options.SAFELITE, cmsWidgetName: options.SAFELITE
}, },
{ {
cmsWidgetName: options.TPA, cmsWidgetName: options.TPA
}, }
]; ];
// if cms content has not yet loaded, skip // if cms content has not yet loaded, skip
if ( if (
!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") || !this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") === || this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
"" === ''
) { ) {
return {}; return {};
} }
@ -154,13 +155,13 @@ export default {
value: answer.cmsWidgetName, value: answer.cmsWidgetName,
buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName), buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName), buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName), buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName)
})); }));
return modifiedAnswers; return modifiedAnswers;
}, },
ackError() { ackError() {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED; return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
}, }
}, },
mounted() { mounted() {
setupModalLinks(this); setupModalLinks(this);
@ -174,17 +175,17 @@ export default {
}, },
methods: { methods: {
getHeaderTextFromCms(cmsWidgetName) { getHeaderTextFromCms(cmsWidgetName) {
const headerText = this.getCmsContent(cmsWidgetName, "HeaderText"); const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
return headerText?.replace( return headerText?.replace(
"{custom:SafeliteLogo}", '{custom:SafeliteLogo}',
"<span class='safeliteLogo'></span>" "<span class='safeliteLogo'></span>"
); );
}, },
getSubheaderTextFromCms(cmsWidgetName) { getSubheaderTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, "SubheaderText"); return this.getCmsContent(cmsWidgetName, 'SubheaderText');
}, },
getBodyTextFromCms(cmsWidgetName) { getBodyTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, "BodyText"); return this.getCmsContent(cmsWidgetName, 'BodyText');
}, },
arePagePrerequisiteValid() { arePagePrerequisiteValid() {
return true; return true;
@ -195,11 +196,9 @@ export default {
navigateWithTPAAck() { navigateWithTPAAck() {
this.mainStore.saveProviderPreferenceData({ this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider, selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement, tpaAcknowledgement: this.tpaAcknowledgement
}); });
this.navigateForward( this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED
);
}, },
forwardButtonAction() { forwardButtonAction() {
if (this.selectedProvider) { if (this.selectedProvider) {
@ -230,14 +229,14 @@ export default {
this.navigateForward(scenario); this.navigateForward(scenario);
this.mainStore.saveProviderPreferenceData({ this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider, selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement, tpaAcknowledgement: this.tpaAcknowledgement
}); });
} }
}, },
openStateSteeringModal() { openStateSteeringModal() {
this.$refs.StateSteeringModal.openModal(); this.$refs.StateSteeringModal.openModal();
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

193
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,40 +75,40 @@
</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;
} }
@ -156,15 +151,15 @@ const getAvailableDates = async (
} }
if ( if (
appointmentType === AppointmentTypeStrings.MOBILE || appointmentType === AppointmentTypeStrings.MOBILE
appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP || appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
) { ) {
storeActionConfig = { storeActionConfig = {
storeAction: GET_MOBILE_TIME_SLOTS, storeAction: GET_MOBILE_TIME_SLOTS,
payload: { payload: {
startDate: apiStartDate, startDate: apiStartDate,
endDate: apiEndDate, endDate: apiEndDate
}, }
}; };
} else { } else {
storeActionConfig = { storeActionConfig = {
@ -173,15 +168,15 @@ const getAvailableDates = async (
startDate: apiStartDate, startDate: apiStartDate,
endDate: apiEndDate, endDate: apiEndDate,
shopAppointmentType: appointmentType, shopAppointmentType: appointmentType,
providerNumber, providerNumber
}, }
}; };
} }
if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig); if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
} }
const timeSlotsResponsesData = { const timeSlotsResponsesData = {
days: [], days: []
}; };
function compareDayStrings(a, b) { function compareDayStrings(a, b) {
@ -191,8 +186,7 @@ const getAvailableDates = async (
} }
const makeParallelCalls = async () => { const makeParallelCalls = async () => {
await Promise.all( await Promise.all(storeActionConfigs.map(async (storeAction) => {
storeActionConfigs.map(async (storeAction) => {
let timeSlotsResponse = null; let timeSlotsResponse = null;
if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) { if (storeAction.storeAction === GET_SHOP_TIME_SLOTS) {
timeSlotsResponse = await useMainStore().getShopTimeSlots( timeSlotsResponse = await useMainStore().getShopTimeSlots(
@ -214,10 +208,9 @@ const getAvailableDates = async (
timeSlotsResponse.data.estimatedServiceMinutesMaximum; timeSlotsResponse.data.estimatedServiceMinutesMaximum;
timeSlotsResponsesData.days = [ timeSlotsResponsesData.days = [
...timeSlotsResponsesData.days, ...timeSlotsResponsesData.days,
...timeSlotsResponse.data.days, ...timeSlotsResponse.data.days
]; ];
}) }));
);
}; };
return makeParallelCalls().then(() => { return makeParallelCalls().then(() => {
@ -228,7 +221,7 @@ const getAvailableDates = async (
}; };
export default { export default {
name: "schedule-page", name: 'schedule-page',
components: { components: {
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
@ -238,7 +231,7 @@ export default {
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) {
@ -252,10 +245,10 @@ export default {
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();
@ -275,21 +268,21 @@ export default {
// 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.
@ -314,12 +307,12 @@ export default {
selectedDate: this.getSelectedDate(), selectedDate: this.getSelectedDate(),
selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(), selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
selectableDatesData: [], selectableDatesData: [],
mobilePremiumAppointmentFee: null, mobilePremiumAppointmentFee: null
}; };
}, },
computed: { computed: {
ChangeShopLinkText() { ChangeShopLinkText() {
return this.getCmsContent("ChangeShopLink", "Text"); return this.getCmsContent('ChangeShopLink', 'Text');
}, },
ChangeShopLink() { ChangeShopLink() {
return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText); return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
@ -332,13 +325,11 @@ export default {
return null; return null;
} }
return this.selectableDatesData.days?.find( return this.selectableDatesData.days?.find((selectableDate) => selectableDate.date === this.selectedDate);
(selectableDate) => selectableDate.date === this.selectedDate
);
}, },
supportingItems() { supportingItems() {
return useMainStore().lineItems.supportingItems; return useMainStore().lineItems.supportingItems;
}, }
}, },
watch: { watch: {
selectedDate(newValue, oldValue) { selectedDate(newValue, oldValue) {
@ -351,33 +342,33 @@ export default {
startTime: null, startTime: null,
endTime: null, endTime: null,
jobMaxMinutes: null, jobMaxMinutes: null,
jobMinMinutes: null, jobMinMinutes: null
}, },
isPremiumAppointment: null, isPremiumAppointment: null
}; };
} }
}, },
selectedTimeSlotInfo(newValue) { selectedTimeSlotInfo(newValue) {
this.updateFooterButtonText(newValue); this.updateFooterButtonText(newValue);
}, }
}, },
methods: { methods: {
splitCopyOnCMSPlaceHolder, splitCopyOnCMSPlaceHolder,
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
const { serviceLocation } = useMainStore().order; const { serviceLocation } = useMainStore().order;
const serviceLocationPreReqs = const serviceLocationPreReqs =
serviceLocation.zipCode && serviceLocation.zipCode
serviceLocation.zipCodeCtu && && serviceLocation.zipCodeCtu
serviceLocation.appointmentType && && serviceLocation.appointmentType
(serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE || && (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE
serviceLocation.appointmentType === || serviceLocation.appointmentType
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP || === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
serviceLocation.provider.providerNumber); || serviceLocation.provider.providerNumber);
const supportingItems = this.supportingItems !== null; const supportingItems = this.supportingItems !== null;
const damageInfo = const damageInfo =
useMainStore().order.damage.isRepair || useMainStore().order.damage.isRepair
(useMainStore().order.lineItems?.glassParts != null && || (useMainStore().order.lineItems?.glassParts != null
useMainStore().order.lineItems.glassParts.length > 0); && useMainStore().order.lineItems.glassParts.length > 0);
return serviceLocationPreReqs && supportingItems && damageInfo; return serviceLocationPreReqs && supportingItems && damageInfo;
}, },
@ -395,9 +386,7 @@ export default {
this.mainStore.order.serviceLocation.provider.providerNumber this.mainStore.order.serviceLocation.provider.providerNumber
); );
// ADD API CALL RESULTS TO EXISTING DATE DATA // ADD API CALL RESULTS TO EXISTING DATE DATA
this.selectableDatesData.days = this.selectableDatesData.days.concat( this.selectableDatesData.days = this.selectableDatesData.days.concat(newShopTimeSlots.days);
newShopTimeSlots.days
);
return newShopTimeSlots; return newShopTimeSlots;
}, },
getAvailableDates, getAvailableDates,
@ -413,14 +402,12 @@ export default {
getSelectedTimeSlotInfo() { getSelectedTimeSlotInfo() {
const isPremiumAppointment = 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;
@ -434,18 +421,14 @@ export default {
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) { if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime( navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(timeSlotInfo.timeSlot.startTime)}`;
timeSlotInfo.timeSlot.startTime
)}`;
} else if ( } else if (
this.appointmentType === AppointmentTypeStrings.MOBILE && this.appointmentType === AppointmentTypeStrings.MOBILE
!timeSlotInfo.isPremiumAppointment && !timeSlotInfo.isPremiumAppointment
) { ) {
navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime( navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
timeSlotInfo.timeSlot.startTime, timeSlotInfo.timeSlot.startTime,
@ -461,9 +444,9 @@ export default {
convertSelectedDateToShortMonthAndDay(selectedDate) { convertSelectedDateToShortMonthAndDay(selectedDate) {
// This conversion ensures we don't get get GMT induced date changes // This conversion ensures we don't get get GMT induced date changes
const dateObject = convertDateStringToDate(selectedDate); const dateObject = convertDateStringToDate(selectedDate);
return dateObject.toLocaleDateString("en-us", { return dateObject.toLocaleDateString('en-us', {
month: "short", month: 'short',
day: "numeric", day: 'numeric'
}); });
}, },
getDisplayTextForMilitaryTime( getDisplayTextForMilitaryTime(
@ -471,15 +454,15 @@ export default {
shouldTrimMinutesIfEmpty = false shouldTrimMinutesIfEmpty = false
) { ) {
// Expected input: "HH:MM" // Expected input: "HH:MM"
let hours = parseInt(militaryTimeInput.split(":")[0], 10); let hours = parseInt(militaryTimeInput.split(':')[0], 10);
const minutes = militaryTimeInput.split(":")[1]; const minutes = militaryTimeInput.split(':')[1];
const meridianNotation = hours > 11 ? "PM" : "AM"; const meridianNotation = hours > 11 ? 'PM' : 'AM';
if (hours > 12) { if (hours > 12) {
hours -= 12; hours -= 12;
} }
if (shouldTrimMinutesIfEmpty && minutes === "00") { if (shouldTrimMinutesIfEmpty && minutes === '00') {
return `${hours} ${meridianNotation}`; return `${hours} ${meridianNotation}`;
} }
return `${hours}:${minutes} ${meridianNotation}`; return `${hours}:${minutes} ${meridianNotation}`;
@ -491,8 +474,8 @@ export default {
this.navigationScenarios.CLICKED_FORWARD, this.navigationScenarios.CLICKED_FORWARD,
this.$route this.$route
); );
}, }
}, }
}; };
</script> </script>

204
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,9 +90,10 @@
:selectedAppointmentType="selectedAppointmentType" :selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed" :isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" cmsWidgetName="ShopQuestionWidget"
@updatedMobileProviderNumber="setMobileProviderNumber" @updatedMobileProviderNumber="setMobileProviderNumber" />
/> <contentGroupModal
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" /> ref="RecalModal"
cmsWidgetName="RecalModal" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -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,47 +112,47 @@
</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,
@ -172,7 +164,7 @@ export default {
// 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) {
@ -180,8 +172,8 @@ export default {
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);
@ -193,25 +185,25 @@ export default {
// 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);
@ -223,9 +215,7 @@ export default {
resultMap.mobileFeePart, resultMap.mobileFeePart,
resultMap.shopQuestionInitialData?.mobileProviderNumber resultMap.shopQuestionInitialData?.mobileProviderNumber
); );
vm.$refs.shopQuestion.initializeComponent( vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData);
resultMap.shopQuestionInitialData
);
}); });
}, },
setup() { setup() {
@ -249,21 +239,21 @@ export default {
mobileFeePart: null, mobileFeePart: null,
mobileProviderNumber: null, mobileProviderNumber: null,
zipContainsMilitaryBase: false, zipContainsMilitaryBase: false,
zipCodeCtu: null, zipCodeCtu: null
}; };
}, },
computed: { computed: {
questionText() { questionText() {
return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText"); return this.getCmsContent('ServiceTypeQuestionWidget', 'QuestionText');
}, },
answersFromCms() { answersFromCms() {
return this.getCmsContent("ServiceTypeQuestionWidget", "Answers"); return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers');
}, },
serviceZipCodeQuestion: { serviceZipCodeQuestion: {
get() { get() {
return { return {
state: this.state, state: this.state,
zipCode: this.zipCode, zipCode: this.zipCode
}; };
}, },
set(newValue) { set(newValue) {
@ -278,7 +268,7 @@ export default {
// eslint-disable-next-line vue/valid-next-tick // eslint-disable-next-line vue/valid-next-tick
this.$nextTick(); this.$nextTick();
}, }
}, },
mobileLocationQuestions: { mobileLocationQuestions: {
get() { get() {
@ -288,9 +278,9 @@ export default {
streetAddress2: this.streetAddress2, streetAddress2: this.streetAddress2,
city: this.city, city: this.city,
state: this.state, state: this.state,
zipCode: this.zipCode, zipCode: this.zipCode
}, },
isVehicleProtected: this.isVehicleProtected, isVehicleProtected: this.isVehicleProtected
}; };
}, },
set(newValue) { set(newValue) {
@ -304,16 +294,16 @@ export default {
if (newValue.zipCode !== this.zipCode) { if (newValue.zipCode !== this.zipCode) {
if ( if (
!( !(
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
this.selectedAppointmentType === || this.selectedAppointmentType
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
) )
) { ) {
this.selectedAppointmentType = null; this.selectedAppointmentType = null;
} }
this.selectedProvider = null; this.selectedProvider = null;
} }
}, }
}, },
isServiceableMobile() { isServiceableMobile() {
if (this.isRecalibrationServiceableMobile !== null) { if (this.isRecalibrationServiceableMobile !== null) {
@ -334,8 +324,8 @@ export default {
}, },
isShopQuestionDisplayed() { isShopQuestionDisplayed() {
return ( return (
this.selectedAppointmentType === "Inshop" || this.selectedAppointmentType === 'Inshop'
this.selectedAppointmentType === "Dropoff" || this.selectedAppointmentType === 'Dropoff'
); );
}, },
isAppointmentTypeDisplayed() { isAppointmentTypeDisplayed() {
@ -343,17 +333,17 @@ export default {
}, },
isMobileLocationDisplayed() { isMobileLocationDisplayed() {
return ( return (
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
this.selectedAppointmentType === || this.selectedAppointmentType
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
); );
}, },
requiresInshopRecalibration() { requiresInshopRecalibration() {
// Specifically check for isRecalibrationServiceableMobile === false, not null or true. // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
return ( return (
this.isServiceableInshop && this.isServiceableInshop
this.isGlassServiceableMobile && && this.isGlassServiceableMobile
this.isRecalibrationServiceableMobile === false && this.isRecalibrationServiceableMobile === false
); );
}, },
displayMilitaryZipAlert() { displayMilitaryZipAlert() {
@ -367,20 +357,20 @@ export default {
}, },
displayServiceableInshopOnly() { displayServiceableInshopOnly() {
return ( return (
!this.displayRecalibrationWarning && !this.displayRecalibrationWarning
this.isServiceableInshop && && this.isServiceableInshop
!this.isServiceableMobile && !this.isServiceableMobile
); );
}, },
displayServiceableMobileOnly() { displayServiceableMobileOnly() {
return this.isServiceableMobile && !this.isServiceableInshop; return this.isServiceableMobile && !this.isServiceableInshop;
}, }
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
return ( return (
useMainStore().lineItems.supportingItems !== null && useMainStore().lineItems.supportingItems !== null
useMainStore().order.serviceLocation.zipCode !== null && useMainStore().order.serviceLocation.zipCode !== null
); );
}, },
async reloadShopData(zipCode) { async reloadShopData(zipCode) {
@ -401,8 +391,8 @@ export default {
city: null, city: null,
state: null, state: null,
zipCode: null, zipCode: null,
zipCodeCtu: null, zipCodeCtu: null
}, }
}; };
} }
@ -415,7 +405,7 @@ export default {
zipCodeCtu: this.zipCodeCtu, zipCodeCtu: this.zipCodeCtu,
appointmentType: this.selectedAppointmentType, appointmentType: this.selectedAppointmentType,
isVehicleProtected: this.isVehicleProtected, isVehicleProtected: this.isVehicleProtected,
provider, provider
}); });
this.$router.navigate( this.$router.navigate(
@ -438,14 +428,14 @@ export default {
}, },
getServiceStateFromStore() { getServiceStateFromStore() {
return ( return (
useMainStore().order.serviceLocation.state || useMainStore().order.serviceLocation.state
useMainStore().order.customer.address.state || useMainStore().order.customer.address.state
); );
}, },
getServiceZipCodeFromStore() { getServiceZipCodeFromStore() {
return ( return (
useMainStore().order.serviceLocation.zipCode || useMainStore().order.serviceLocation.zipCode
useMainStore().order.customer.address.zipCode || useMainStore().order.customer.address.zipCode
); );
}, },
getIsVehicleProtectedFromStore() { getIsVehicleProtectedFromStore() {
@ -492,9 +482,9 @@ export default {
this.mobileProviderNumber = providerNumber; this.mobileProviderNumber = providerNumber;
}, },
resetMobileLocation() { resetMobileLocation() {
this.streetAddress = ""; this.streetAddress = '';
this.streetAddress2 = ""; this.streetAddress2 = '';
this.city = ""; this.city = '';
this.isVehicleProtected = null; this.isVehicleProtected = null;
}, },
@ -507,8 +497,8 @@ export default {
serviceabilityDetails.isGlassServiceableMobile; serviceabilityDetails.isGlassServiceableMobile;
this.isRecalibrationServiceableMobile = this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile; serviceabilityDetails.isRecalibrationServiceableMobile;
}, }
}, }
}; };
</script> </script>

283
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">
@ -19,13 +18,11 @@
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" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
</div> </div>
</div> </div>
@ -35,8 +32,7 @@
ref="damageLocation" ref="damageLocation"
v-model="selectedDamageLocations" v-model="selectedDamageLocations"
cmsWidgetName="DamageLocationQuestion" cmsWidgetName="DamageLocationQuestion"
groupName="DamageLocationQuestion" groupName="DamageLocationQuestion" />
/>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -47,8 +43,7 @@
:hasRepairReplaceConflict="hasRepairReplaceConflict" :hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict" :hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations" :selectedDamageLocations="selectedDamageLocations"
class="mb-3" class="mb-3" />
/>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -58,8 +53,7 @@
class="my-5" class="my-5"
cmsWidgetName="HasReplacementConflict" cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger" alertClass="alert-danger"
:isDismissible="false" :isDismissible="false" />
/>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -71,8 +65,7 @@
cmsWidgetName="SideDoorSideQuestion" cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion" groupName="SideDoorSideQuestion"
:selectedDamageLocations="selectedDamageLocations" :selectedDamageLocations="selectedDamageLocations"
class="mb-1" class="mb-1" />
/>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -85,8 +78,7 @@
isRearWindowDamageLocation && !hasRepairReplaceConflict isRearWindowDamageLocation && !hasRepairReplaceConflict
" "
groupName="BackGlassReplaceOptionsQuestion" groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" validationRules="replace-options-required" />
/>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -97,8 +89,7 @@
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack" @backClicked="navigateBack"
@forwardClicked="forwardButtonAction" @forwardClicked="forwardButtonAction" />
/>
</div> </div>
</div> </div>
</div> </div>
@ -107,36 +98,36 @@
<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,
@ -149,7 +140,7 @@ export default {
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], mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -157,20 +148,18 @@ export default {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const damageOptionsPromise = store.getDamageOptions( const damageOptionsPromise = store.getDamageOptions(store.order.vehicle.carId);
store.order.vehicle.carId
);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: "cmsContent", resultKey: 'cmsContent',
promise: cmsContentPromise, promise: cmsContentPromise
}, },
{ {
resultKey: "damageOptions", resultKey: 'damageOptions',
promise: damageOptionsPromise, promise: damageOptionsPromise
}, }
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -183,12 +172,8 @@ export default {
resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.driverSideOptions.availableReplacementOptions,
resultMap.damageOptions.passengerSideOptions.availableReplacementOptions resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
); );
vm.$refs.windshieldOptions.initializeComponent( vm.$refs.windshieldOptions.initializeComponent(resultMap.damageOptions.windshieldOptions.availableReplacementOptions);
resultMap.damageOptions.windshieldOptions.availableReplacementOptions vm.$refs.backGlassOptions.initializeComponent(resultMap.damageOptions.backGlassOptions.availableReplacementOptions);
);
vm.$refs.backGlassOptions.initializeComponent(
resultMap.damageOptions.backGlassOptions.availableReplacementOptions
);
}); });
}, },
setup() { setup() {
@ -204,92 +189,75 @@ export default {
selectedDriverSideReplaceOptions: selectedDriverSideReplaceOptions:
this.getDriverSideReplaceOptionsFromStore(), this.getDriverSideReplaceOptionsFromStore(),
selectedPassengerSideReplaceOptions: selectedPassengerSideReplaceOptions:
this.getPassengerSideReplaceOptionsFromStore(), this.getPassengerSideReplaceOptionsFromStore()
}, },
selectedWindshieldOptions: this.getWindshieldOptionsFromStore(), selectedWindshieldOptions: this.getWindshieldOptionsFromStore(),
selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore(), selectedRearReplaceOptions: this.getRearReplaceOptionsFromStore()
}; };
}, },
computed: { computed: {
isWindshieldDamageLocation() { isWindshieldDamageLocation() {
return this.selectedDamageLocations.some( return this.selectedDamageLocations.some((selectedDamages) =>
(selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD);
selectedDamages.toUpperCase() === damageLocationsCms.WINDSHIELD
);
}, },
isSideDoorDamageLocation() { isSideDoorDamageLocation() {
return this.selectedDamageLocations.some( return this.selectedDamageLocations.some((selectedDamages) =>
(selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR);
selectedDamages.toUpperCase() === damageLocationsCms.SIDEDOOR
);
}, },
isRearWindowDamageLocation() { isRearWindowDamageLocation() {
return this.selectedDamageLocations.some( return this.selectedDamageLocations.some((selectedDamages) =>
(selectedDamages) => selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW);
selectedDamages.toUpperCase() === damageLocationsCms.REARWINDOW
);
}, },
isWindshieldRepair() { isWindshieldRepair() {
return ( return (
this.isWindshieldDamageLocation && this.isWindshieldDamageLocation
this.selectedWindshieldOptions.selectedWindshieldDamageType === && this.selectedWindshieldOptions.selectedWindshieldDamageType
damageLocationsSelected.REPAIR === damageLocationsSelected.REPAIR
); );
}, },
isDriverSideReplace() { isDriverSideReplace() {
if (!this.isSideDoorDamageLocation) return false; if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some( return this.sideDoorOptionsData.selectedDoorSides.some((selectedDriverSide) =>
(selectedDriverSide) => selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE);
selectedDriverSide.toUpperCase() === damageLocationsCms.DRIVERSIDE
);
}, },
isPassengerSideReplace() { isPassengerSideReplace() {
if (!this.isSideDoorDamageLocation) return false; if (!this.isSideDoorDamageLocation) return false;
return this.sideDoorOptionsData.selectedDoorSides.some( return this.sideDoorOptionsData.selectedDoorSides.some((selectedPassengerSide) =>
(selectedPassengerSide) => selectedPassengerSide.toUpperCase()
selectedPassengerSide.toUpperCase() === === damageLocationsCms.PASSENGERSIDE);
damageLocationsCms.PASSENGERSIDE
);
}, },
hasRepairReplaceConflict() { hasRepairReplaceConflict() {
return ( return (
this.isWindshieldDamageLocation && this.isWindshieldDamageLocation
this.selectedDamageLocations.length > 1 && && this.selectedDamageLocations.length > 1
this.isWindshieldRepair && this.isWindshieldRepair
); );
}, },
hasSplitSingleConflict() { hasSplitSingleConflict() {
if ( if (
!this.selectedDamageLocations?.includes("Windshield") || !this.selectedDamageLocations?.includes('Windshield')
this.selectedWindshieldOptions.selectedWindshieldDamageType === || this.selectedWindshieldOptions.selectedWindshieldDamageType
damageLocationsSelected.REPAIR || === damageLocationsSelected.REPAIR
!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions || !this.selectedWindshieldOptions.selectedWindshieldReplaceOptions
) ) return false;
return false;
return ( return (
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some( this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedSingleWindshield) =>
(selectedSingleWindshield) => selectedSingleWindshield.toUpperCase()
selectedSingleWindshield.toUpperCase() === === damageLocationsSelected.SINGLE.toUpperCase())
damageLocationsSelected.SINGLE.toUpperCase() && (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedDriverWindshield) =>
) && selectedDriverWindshield.toUpperCase()
(this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some( === damageLocationsSelected.DRIVER.toUpperCase())
(selectedDriverWindshield) => || this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some((selectedPassengerWindshield) =>
selectedDriverWindshield.toUpperCase() === selectedPassengerWindshield.toUpperCase()
damageLocationsSelected.DRIVER.toUpperCase() === damageLocationsSelected.PASSENGER.toUpperCase()))
) ||
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions?.some(
(selectedPassengerWindshield) =>
selectedPassengerWindshield.toUpperCase() ===
damageLocationsSelected.PASSENGER.toUpperCase()
))
); );
}, },
shouldDisplayVehicleChangeAlert() { shouldDisplayVehicleChangeAlert() {
return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]; return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT];
}, }
}, },
methods: { methods: {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
@ -302,27 +270,21 @@ export default {
const glassSelections = []; const glassSelections = [];
if ( if (
this.mainStore.order.damage.glassToReplace?.some( this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD)
(glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD || this.mainStore.order.damage.isRepair
) ||
this.mainStore.order.damage.isRepair
) { ) {
glassSelections.push(damageLocationsSelected.WINDSHIELD); glassSelections.push(damageLocationsSelected.WINDSHIELD);
} }
if ( if (
this.mainStore.order.damage.glassToReplace?.some( this.mainStore.order.damage.glassToReplace?.some((glass) =>
(glass) => glass.glassLocation === damageLocationsSelected.DRIVER
glass.glassLocation === damageLocationsSelected.DRIVER || || glass.glassLocation === damageLocationsSelected.PASSENGER)
glass.glassLocation === damageLocationsSelected.PASSENGER
)
) { ) {
glassSelections.push(damageLocationsSelected.SIDEDOOR); glassSelections.push(damageLocationsSelected.SIDEDOOR);
} }
if ( if (
this.mainStore.order.damage.glassToReplace?.some( this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.REAR)
(glass) => glass.glassLocation === damageLocationsSelected.REAR
)
) { ) {
glassSelections.push(damageLocationsSelected.REARWINDOW); glassSelections.push(damageLocationsSelected.REARWINDOW);
} }
@ -331,13 +293,12 @@ export default {
}, },
getWindshieldOptionsFromStore() { getWindshieldOptionsFromStore() {
const windShieldOptions = { const windShieldOptions = {
selectedWindshieldDamageType: "", selectedWindshieldDamageType: '',
selectedWindshieldChipCount: null, selectedWindshieldChipCount: null,
selectedWindshieldReplaceOptions: [], selectedWindshieldReplaceOptions: []
}; };
if (this.mainStore.order.damage.isRepair === undefined) if (this.mainStore.order.damage.isRepair === undefined) return windshieldOptions;
return windshieldOptions;
if (this.mainStore.order.damage.isRepair) { if (this.mainStore.order.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType = windShieldOptions.selectedWindshieldDamageType =
@ -346,45 +307,33 @@ export default {
this.mainStore.order.damage.numberOfChips; this.mainStore.order.damage.numberOfChips;
} else { } else {
if ( if (
this.mainStore.order.damage.glassToReplace?.some( this.mainStore.order.damage.glassToReplace?.some((glass) =>
(glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD
glass.glassLocation === damageLocationsSelected.WINDSHIELD && && glass.glassName === damageLocationsSelected.SINGLE)
glass.glassName === damageLocationsSelected.SINGLE
)
) { ) {
windShieldOptions.selectedWindshieldDamageType = windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE; damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push( windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.SINGLE);
damageLocationsSelected.SINGLE
);
} }
if ( if (
this.mainStore.order.damage.glassToReplace?.some( this.mainStore.order.damage.glassToReplace?.some((glass) =>
(glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD
glass.glassLocation === damageLocationsSelected.WINDSHIELD && && glass.glassName === damageLocationsSelected.DRIVER)
glass.glassName === damageLocationsSelected.DRIVER
)
) { ) {
windShieldOptions.selectedWindshieldDamageType = windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE; damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push( windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.DRIVER);
damageLocationsSelected.DRIVER
);
} }
if ( if (
this.mainStore.order.damage.glassToReplace?.some( this.mainStore.order.damage.glassToReplace?.some((glass) =>
(glass) => glass.glassLocation === damageLocationsSelected.WINDSHIELD
glass.glassLocation === damageLocationsSelected.WINDSHIELD && && glass.glassName === damageLocationsSelected.PASSENGER)
glass.glassName === damageLocationsSelected.PASSENGER
)
) { ) {
windShieldOptions.selectedWindshieldDamageType = windShieldOptions.selectedWindshieldDamageType =
damageLocationsSelected.REPLACE; damageLocationsSelected.REPLACE;
windShieldOptions.selectedWindshieldReplaceOptions.push( windShieldOptions.selectedWindshieldReplaceOptions.push(damageLocationsSelected.PASSENGER);
damageLocationsSelected.PASSENGER
);
} }
} }
@ -393,17 +342,13 @@ export default {
getDoorSidesFromStore() { getDoorSidesFromStore() {
const doorSides = []; const doorSides = [];
if ( if (
this.mainStore.order.damage.glassToReplace?.some( this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.DRIVER)
(glass) => glass.glassLocation === damageLocationsSelected.DRIVER
)
) { ) {
doorSides.push(damageLocationsSelected.DRIVERSIDE); doorSides.push(damageLocationsSelected.DRIVERSIDE);
} }
if ( if (
this.mainStore.order.damage.glassToReplace?.some( this.mainStore.order.damage.glassToReplace?.some((glass) => glass.glassLocation === damageLocationsSelected.PASSENGER)
(glass) => glass.glassLocation === damageLocationsSelected.PASSENGER
)
) { ) {
doorSides.push(damageLocationsSelected.PASSENGERSIDE); doorSides.push(damageLocationsSelected.PASSENGERSIDE);
} }
@ -434,9 +379,7 @@ export default {
}, },
getRearReplaceOptionsFromStore() { getRearReplaceOptionsFromStore() {
const rearReplaceOptions = const rearReplaceOptions =
this.mainStore.order.damage.glassToReplace?.filter( this.mainStore.order.damage.glassToReplace?.filter((glass) => glass.glassLocation === damageLocationsSelected.REAR)[0]?.glassName;
(glass) => glass.glassLocation === damageLocationsSelected.REAR
)[0]?.glassName;
return rearReplaceOptions; return rearReplaceOptions;
}, },
@ -463,7 +406,7 @@ export default {
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;
} }
@ -485,48 +428,42 @@ export default {
selectedGlassToReplace() { selectedGlassToReplace() {
const selectedGlassToReplace = []; const selectedGlassToReplace = [];
if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) { if (this.isWindshieldDamageLocation && !this.isWindshieldRepair) {
this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach( this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.forEach((wsItem) => {
(wsItem) => {
selectedGlassToReplace.push({ selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.WINDSHIELD, glassLocation: damageLocationsSelected.WINDSHIELD,
glassName: wsItem, glassName: wsItem
});
}); });
}
);
} }
if (this.isDriverSideReplace) { if (this.isDriverSideReplace) {
this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach( this.sideDoorOptionsData.selectedDriverSideReplaceOptions.forEach((driverItem) => {
(driverItem) => {
selectedGlassToReplace.push({ selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.DRIVER, glassLocation: damageLocationsSelected.DRIVER,
glassName: driverItem, glassName: driverItem
});
}); });
}
);
} }
if (this.isPassengerSideReplace) { if (this.isPassengerSideReplace) {
this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach( this.sideDoorOptionsData.selectedPassengerSideReplaceOptions.forEach((passengerItem) => {
(passengerItem) => {
selectedGlassToReplace.push({ selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.PASSENGER, glassLocation: damageLocationsSelected.PASSENGER,
glassName: passengerItem, glassName: passengerItem
});
}); });
}
);
} }
if (this.isRearWindowDamageLocation) { if (this.isRearWindowDamageLocation) {
selectedGlassToReplace.push({ selectedGlassToReplace.push({
glassLocation: damageLocationsSelected.REAR, glassLocation: damageLocationsSelected.REAR,
glassName: this.selectedRearReplaceOptions, glassName: this.selectedRearReplaceOptions
}); });
} }
return selectedGlassToReplace; return selectedGlassToReplace;
}, }
}, }
}; };
</script> </script>

54
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,21 +37,21 @@
</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,
@ -61,7 +59,7 @@ export default {
SiteHeader, SiteHeader,
SiteSubHeader, SiteSubHeader,
VehicleBanner, VehicleBanner,
VinLookupMethods, VinLookupMethods
}, },
mixins: [BaseFormMixin], mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -70,9 +68,9 @@ export default {
// 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);
@ -84,13 +82,13 @@ export default {
}, },
data() { data() {
return { return {
selectedVinLookupMethod: null, selectedVinLookupMethod: null
}; };
}, },
computed: { computed: {
isForwardActionDisabled() { isForwardActionDisabled() {
return this.selectedVinLookupMethod === null; return this.selectedVinLookupMethod === null;
}, }
}, },
methods: { methods: {
arePagePrerequisiteValid() { arePagePrerequisiteValid() {
@ -120,7 +118,7 @@ export default {
break; break;
} }
}, },
resetDependentState() {}, resetDependentState() {}
}, }
}; };
</script> </script>

107
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,24 +59,24 @@
<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,
@ -85,7 +85,7 @@ export default {
vehicleBanner, vehicleBanner,
siteSubHeader, siteSubHeader,
siteFooter, siteFooter,
alert, alert
}, },
mixins: [BaseFormMixin, vehicleQuestionsMixin], mixins: [BaseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -94,9 +94,9 @@ export default {
// 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.
@ -109,23 +109,22 @@ export default {
.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() { data() {
return { return {
selectedGlassParts: {}, selectedGlassParts: {},
alertWidgetData: Object, alertWidgetData: Object,
alreadyPopulatedPartsData: [], alreadyPopulatedPartsData: []
}; };
}, },
computed: { computed: {
isForwardActionDisabled() { isForwardActionDisabled() {
return ( return (
this.selectedGlassPartNumbers?.length !== this.selectedGlassPartNumbers?.length
this.PartsFromApi.partsOrQuestions?.length !== this.PartsFromApi.partsOrQuestions?.length
); );
}, },
selectedGlassPartNumbers() { selectedGlassPartNumbers() {
@ -152,13 +151,13 @@ export default {
FeatureAnswers: [ FeatureAnswers: [
{ {
FeatureAnswerText: FeatureAnswerText:
p.description === "" ? p.color : p.description, p.description === '' ? p.color : p.description,
PartNumber: p.partNumber, PartNumber: p.partNumber
}, }
], ]
}); });
return arr; return arr;
}, []), }, [])
})); }));
return mappedData; return mappedData;
@ -169,8 +168,8 @@ export default {
}, },
RefPrefix() { RefPrefix() {
return "partQuestion"; return 'partQuestion';
}, }
}, },
mounted() { mounted() {
this.LoadInitialPartsData(); this.LoadInitialPartsData();
@ -179,9 +178,9 @@ export default {
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data) // Check if isRepair is populated and if the pageData we need is here (Parts data)
return ( return (
useMainStore().damage.isRepair != null && useMainStore().damage.isRepair != null
useMainStore().pageData(issPageValues.VEHICLE_PARTS) && && useMainStore().pageData(issPageValues.VEHICLE_PARTS)
Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS)) && Object.keys(useMainStore().pageData(issPageValues.VEHICLE_PARTS))
.length !== 0 .length !== 0
); );
}, },
@ -190,23 +189,19 @@ export default {
// Match them to the parts from the API. // Match them to the parts from the API.
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
for (const [key, value] of Object.entries( for (const [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) {
this.PartsFromApi.partsOrQuestions
)) {
// eslint-disable-next-line no-restricted-syntax // eslint-disable-next-line no-restricted-syntax
for (const [partKey, partValue] of Object.entries(value.parts)) { for (const [partKey, partValue] of Object.entries(value.parts)) {
const currentPart = 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]
}); });
} }
} }
@ -214,7 +209,7 @@ export default {
// If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts) // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
if (this.isForwardActionDisabled) { if (this.isForwardActionDisabled) {
this.$refs.siteFooter.removeLoader(); this.$refs.siteFooter.removeLoader();
throw new Error("Could not match any parts to the selected parts"); throw new Error('Could not match any parts to the selected parts');
} }
this.navigateForward(matchedParts, null); this.navigateForward(matchedParts, null);
@ -238,8 +233,8 @@ export default {
}); });
}); });
}); });
}, }
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

82
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,29 +74,29 @@
<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,
@ -110,7 +104,7 @@ export default {
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],
@ -121,9 +115,9 @@ export default {
// 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);
@ -135,7 +129,7 @@ export default {
}, },
props: { props: {
cmsWidgetName: String, cmsWidgetName: String,
validationRules: String, validationRules: String
}, },
data() { data() {
const { year, make, model, style } = useMainStore().order.vehicle; const { year, make, model, style } = useMainStore().order.vehicle;
@ -143,13 +137,13 @@ export default {
selectedYear: year, selectedYear: year,
selectedMake: make, selectedMake: make,
selectedModel: model, selectedModel: model,
selectedStyle: style, selectedStyle: style
}; };
}, },
computed: { computed: {
displayGeneric() { displayGeneric() {
return !this.selectedStyle; return !this.selectedStyle;
}, }
}, },
watch: { watch: {
@ -177,7 +171,7 @@ export default {
selectedStyle(value) { selectedStyle(value) {
this.mainStore.updateVehicleStyle(value); this.mainStore.updateVehicleStyle(value);
this.mainStore.setVehicle(); this.mainStore.setVehicle();
}, }
}, },
mounted() { mounted() {
this.$refs.vehicleYearQuestion.getNewValues(); this.$refs.vehicleYearQuestion.getNewValues();
@ -226,8 +220,8 @@ export default {
}, },
async updateStyleValues() { async updateStyleValues() {
return this.mainStore.getVehicleStyles(); return this.mainStore.getVehicleStyles();
}, }
}, }
}; };
</script> </script>

111
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,30 +42,30 @@
</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,
@ -80,12 +75,12 @@ export default {
vehicleBanner, vehicleBanner,
vinLocationInformation, vinLocationInformation,
vinLookupAlerts, vinLookupAlerts,
vinQuestion, vinQuestion
}, },
mixins: [baseFormMixin, vehicleQuestionsMixin], mixins: [baseFormMixin, vehicleQuestionsMixin],
provide() { provide() {
return { return {
vehicleFromLookup: computed(() => this.vehicleFromLookup), vehicleFromLookup: computed(() => this.vehicleFromLookup)
}; };
}, },
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -94,9 +89,9 @@ export default {
// 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);
@ -121,16 +116,16 @@ export default {
vehicleFromLookup: null, vehicleFromLookup: null,
vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(), vinWithNonMatchingCarId: vin?.length > 0 && !this.hasValidCarId(),
vin, vin,
forwardButtonCarStyle: "", forwardButtonCarStyle: '',
vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId(), vinPopulatedOnPageLoad: vin?.length > 0 && this.hasValidCarId()
}; };
}, },
computed: { computed: {
isCarIdDifferentFromTheStore() { isCarIdDifferentFromTheStore() {
return ( return (
this.vehicleFromLookup !== null && this.vehicleFromLookup !== null
this.hasValidCarId() && && this.hasValidCarId()
this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
); );
}, },
isTwoIdenticalYMMVehicleFound() { isTwoIdenticalYMMVehicleFound() {
@ -151,21 +146,19 @@ export default {
const lastSixChars = this.vin.substring(11, this.vin.length); const lastSixChars = this.vin.substring(11, this.vin.length);
return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`; return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
} }
return "*****************"; return '*****************';
}, },
carIdIsValid() { carIdIsValid() {
return this.hasValidCarId(); return this.hasValidCarId();
}, }
}, },
watch: { watch: {
vin() { vin() {
this.resetActiveAlert(); this.resetActiveAlert();
this.$refs.siteFooter.enableForwardAction(); this.$refs.siteFooter.enableForwardAction();
this.needToLookupVehicle = true; this.needToLookupVehicle = true;
this.$refs.siteFooter.updateButtonText( this.$refs.siteFooter.updateButtonText(this.getCmsContent('SiteFooterWidget', 'ForwardButtonText'));
this.getCmsContent("SiteFooterWidget", "ForwardButtonText") }
);
},
}, },
methods: { methods: {
arePagePrerequisiteValid() { arePagePrerequisiteValid() {
@ -176,7 +169,7 @@ export default {
}, },
hasValidCarId() { hasValidCarId() {
return ( return (
this.mainStore.vehicle.carId && this.mainStore.vehicle.carId !== "0" 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 // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
@ -204,7 +197,7 @@ export default {
// Add vin bcs the response from the service doesn't contain vin // Add vin bcs the response from the service doesn't contain vin
this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, {
vin: this.vin, vin: this.vin
}); });
} }
@ -221,9 +214,7 @@ export default {
const vehicleYearMakeModelStyle = 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;
@ -233,15 +224,13 @@ export default {
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();
@ -272,7 +261,7 @@ export default {
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;
} }
@ -291,8 +280,8 @@ export default {
} catch (responseError) { } catch (responseError) {
return { return {
error: { error: {
status: responseError.status, status: responseError.status
}, }
}; };
} }
}, },
@ -302,7 +291,7 @@ export default {
resetVehicleFromLookup() { resetVehicleFromLookup() {
this.vehicleFromLookup = null; this.vehicleFromLookup = null;
}, },
resetDependentState() {}, resetDependentState() {}
}, }
}; };
</script> </script>

142
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,72 +113,70 @@
: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,
@ -198,25 +188,25 @@ export default {
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.
@ -240,7 +230,7 @@ export default {
displayInvalidZipAlert: false, displayInvalidZipAlert: false,
duplicates: [], duplicates: [],
rules: { rules: {
damageOption: "damage-option-required", damageOption: 'damage-option-required',
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`, email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`, lossCity: `${globalRules.DATE_OF_LOSS_CITY_REQUIRED}|${globalRules.DATE_OF_LOSS_CITY_FORMAT}`,
// eslint-disable-next-line max-len // eslint-disable-next-line max-len
@ -248,15 +238,15 @@ export default {
lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`, lossState: `${globalRules.DATE_OF_LOSS_STATE_REQUIRED}`,
policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`, policyNumber: `${globalRules.POLICY_NUMBER_REQUIRED}|${globalRules.POLICY_NUMBER_FORMAT}`,
policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`, policyZip: `${globalRules.POLICY_ZIP_REQUIRED}|${globalRules.POLICY_ZIP_FORMAT}`,
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`, phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
}, }
}; };
}, },
computed: { computed: {
DamageCauseOptions() { DamageCauseOptions() {
const damageCauseAnswers = this.getCmsContent( const damageCauseAnswers = this.getCmsContent(
"DamageCauseQuestion", 'DamageCauseQuestion',
"Answers" 'Answers'
); );
const damageCauseAnswersObj = {}; const damageCauseAnswersObj = {};
if (damageCauseAnswers) { if (damageCauseAnswers) {
@ -270,19 +260,19 @@ export default {
return damageCauseAnswersObj; return damageCauseAnswersObj;
}, },
DamageGlassOnlyOptions() { DamageGlassOnlyOptions() {
return this.getCmsContent("GlassOnlyQuestion", "Answers"); return this.getCmsContent('GlassOnlyQuestion', 'Answers');
}, },
DamageGlassOnlyQuestion() { DamageGlassOnlyQuestion() {
return this.getCmsContent("GlassOnlyQuestion", "QuestionText"); return this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
}, },
displayDamageCityQuestion() { displayDamageCityQuestion() {
return !!this.getCmsContent("DamageCityQuestion", "QuestionText"); return !!this.getCmsContent('DamageCityQuestion', 'QuestionText');
}, },
displayDamageStateQuestion() { displayDamageStateQuestion() {
return !!this.getCmsContent("DamageStateQuestion", "QuestionText"); return !!this.getCmsContent('DamageStateQuestion', 'QuestionText');
}, },
displayGlassOnlyQuestion() { displayGlassOnlyQuestion() {
return !!this.getCmsContent("GlassOnlyQuestion", "QuestionText"); return !!this.getCmsContent('GlassOnlyQuestion', 'QuestionText');
}, },
getStates() { getStates() {
return states; return states;
@ -304,7 +294,7 @@ export default {
}, },
phoneMask() { phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER; return MaskaFormattedMasks.PHONE_NUMBER;
}, }
}, },
methods: { methods: {
async forwardButtonAction() { async forwardButtonAction() {
@ -321,8 +311,8 @@ export default {
) )
.finally(async () => { .finally(async () => {
if ( if (
this.isCoverageEnabled && this.isCoverageEnabled
!this.maxCoverageLookupAttemptsReached && !this.maxCoverageLookupAttemptsReached
) { ) {
await this.mainStore.getCoveragePolicyInfo()?.then( await this.mainStore.getCoveragePolicyInfo()?.then(
() => {}, () => {},
@ -389,10 +379,10 @@ export default {
phoneNumber: this.mainStore.order.customer.phoneNumber, phoneNumber: this.mainStore.order.customer.phoneNumber,
email: this.mainStore.order.customer.emailAddress, email: this.mainStore.order.customer.emailAddress,
isPolicyNumberDisabled: isPolicyNumberDisabled:
this.mainStore.order.policy.isPolicyNumberDisabled, this.mainStore.order.policy.isPolicyNumberDisabled
}; };
}, }
}, }
}; };
</script> </script>