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

WIP desktop updates.

Browse source
This commit is contained in:
Bryan Mauger 2024-04-11 16:25:15 -04:00
parent 8b985690bb
commit 4fb644398a
4 changed files with 768 additions and 676 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -81,7 +81,6 @@
cmsWidgetName="DisclaimerWidget" cmsWidgetName="DisclaimerWidget"
typeStyle="caption" typeStyle="caption"
/> />
</div>
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
class="mt-5" class="mt-5"
@ -92,6 +91,7 @@
/> />
</div> </div>
</div> </div>
</div>
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" /> <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />
<contentGroupModal <contentGroupModal
ref="DeductibleModal" ref="DeductibleModal"

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

@ -1,15 +1,22 @@
<template> <template>
<Form <Form ref="theForm" @submit="onSubmit" @invalidSubmit="onInvalidSubmit">
ref="theForm" <div class="container-fluid fade-on-route-transition">
@submit="onSubmit" <div class="row justify-content-center">
@invalidSubmit="onInvalidSubmit"> <div class="col-md-6">
<div class="page-container-grouped-styles"> <siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
<div class="fade-on-route-transition position-relative"> </div>
<siteHeader cmsWidgetName="SiteHeaderWidget" /> </div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<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 class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<buttonQuestion <buttonQuestion
ref="buttonQuestion" ref="buttonQuestion"
v-model="selectedProvider" v-model="selectedProvider"
@ -19,62 +26,66 @@
buttonTypeString="providerPrefRadio" buttonTypeString="providerPrefRadio"
:validationRules="rules.optionRequired" :validationRules="rules.optionRequired"
isRequired isRequired
class="mx-5" /> />
<div class="px-5">
<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>
</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>
</Form> </Form>
</template> </template>
<script> <script>
// Import Supporting Files // Import Supporting Files
import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper'; import {
import settleAllPromises from '@/helpers/layout-helper'; fetchCmsContentForPage,
import errorMessages from '@/constants/error-messages'; setupModalLinks,
import buttonQuestion from '@/digital-components/button-question/button-question.vue'; } from "@/helpers/cms-content-helper";
import issPageValues from '@/router/router-constants/issPage-values'; import settleAllPromises from "@/helpers/layout-helper";
import errorMessages from "@/constants/error-messages";
import buttonQuestion from "@/digital-components/button-question/button-question.vue";
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,
@ -86,7 +97,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) {
@ -94,9 +105,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) => {
@ -114,8 +125,8 @@ export default {
showSteeringLink: false, showSteeringLink: false,
tpaAcknowledgement: false, tpaAcknowledgement: false,
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED optionRequired: globalRules.OPTION_REQUIRED,
} },
}; };
}, },
computed: { computed: {
@ -125,45 +136,55 @@ 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 (!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') if (
|| this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') === '') { !this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") ||
this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") ===
""
) {
return {}; return {};
} }
const modifiedAnswers = cmsAnswersContent.map((answer) => ({ const modifiedAnswers = cmsAnswersContent.map((answer) => ({
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);
const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE); const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
this.selectedProvider = pageData?.selectedProvider ? pageData.selectedProvider : null; this.selectedProvider = pageData?.selectedProvider
this.tpaAcknowledgement = pageData?.tpaAcknowledgement ? pageData.tpaAcknowledgement : false; ? pageData.selectedProvider
: null;
this.tpaAcknowledgement = pageData?.tpaAcknowledgement
? pageData.tpaAcknowledgement
: false;
}, },
methods: { methods: {
getHeaderTextFromCms(cmsWidgetName) { getHeaderTextFromCms(cmsWidgetName) {
const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText'); const headerText = this.getCmsContent(cmsWidgetName, "HeaderText");
return headerText?.replace('{custom:SafeliteLogo}', "<span class='safeliteLogo'></span>"); return headerText?.replace(
"{custom:SafeliteLogo}",
"<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;
@ -174,9 +195,11 @@ 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.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED); this.navigateForward(
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED
);
}, },
forwardButtonAction() { forwardButtonAction() {
if (this.selectedProvider) { if (this.selectedProvider) {
@ -194,10 +217,12 @@ export default {
this.$refs.siteFooter.removeLoader(); this.$refs.siteFooter.removeLoader();
return; return;
} }
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED; scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
} else { } else {
this.mainStore.setBailout(bailoutMessage.TPANotEnabled()); this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED; scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
} }
break; break;
default: default:
@ -205,14 +230,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>

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

@ -3,51 +3,69 @@
ref="theForm" ref="theForm"
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit"
<div class="page-container-grouped-styles"> >
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <div class="container-fluid fade-on-route-transition">
<div class="row justify-content-center">
<div class="col-md-6">
<siteHeader class="mb-2 header" cmsWidgetName="SiteHeaderWidget" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<siteSubHeader <siteSubHeader
cmsWidgetName="SiteSubHeaderWidget" id="sub-header"
class="mt-5" /> cmsWidgetName="SiteSubHeader"
<div class="main-content-container"> class="mb-5 mt-4"
/>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<serviceZipModalQuestion <serviceZipModalQuestion
ref="serviceZipCodeQuestion" ref="serviceZipCodeQuestion"
v-model="serviceZipCodeQuestion" v-model="serviceZipCodeQuestion"
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"
@ -57,7 +75,8 @@
: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"
@ -70,7 +89,8 @@
: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"
@ -78,60 +98,65 @@
:selectedAppointmentType="selectedAppointmentType" :selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed" :isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" cmsWidgetName="ShopQuestionWidget"
@updatedMobileProviderNumber="setMobileProviderNumber" /> @updatedMobileProviderNumber="setMobileProviderNumber"
<contentGroupModal />
ref="RecalModal" <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
cmsWidgetName="RecalModal" />
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
class="mt-5" class="mt-5"
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>
</Form> </Form>
</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 { getPricedMobileFeePart, getServiceabilityDetails, getZipCodeData } from '@/helpers/service-location-helper'; import {
getPricedMobileFeePart,
getServiceabilityDetails,
getZipCodeData,
} 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,
@ -143,42 +168,46 @@ 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) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
const serviceZipCode = useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode; const serviceZipCode =
useMainStore().order.serviceLocation.zipCode ||
useMainStore().order.customer.address.zipCode;
const zipCodeData = getZipCodeData(serviceZipCode); const zipCodeData = getZipCodeData(serviceZipCode);
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode); const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode); const serviceabilityDetailsPromise =
const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode); getServiceabilityDetails(serviceZipCode);
const shopQuestionInitialDataPromise =
shopQuestion.methods.loadInitialData(serviceZipCode);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
{ {
resultKey: 'cmsContent', resultKey: "cmsContent",
promise: cmsContentPromise promise: cmsContentPromise,
}, },
{ {
resultKey: 'mobileFeePart', resultKey: "mobileFeePart",
promise: mobileFeePartPromise promise: mobileFeePartPromise,
}, },
{ {
resultKey: 'serviceabilityDetails', resultKey: "serviceabilityDetails",
promise: serviceabilityDetailsPromise promise: serviceabilityDetailsPromise,
}, },
{ {
resultKey: 'shopQuestionInitialData', resultKey: "shopQuestionInitialData",
promise: shopQuestionInitialDataPromise promise: shopQuestionInitialDataPromise,
}, },
{ {
resultKey: 'zipCodeData', resultKey: "zipCodeData",
promise: zipCodeData promise: zipCodeData,
} },
]; ];
const resultMap = await settleAllPromises(promiseResultMap); const resultMap = await settleAllPromises(promiseResultMap);
@ -190,7 +219,9 @@ export default {
resultMap.mobileFeePart, resultMap.mobileFeePart,
resultMap.shopQuestionInitialData?.mobileProviderNumber resultMap.shopQuestionInitialData?.mobileProviderNumber
); );
vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData); vm.$refs.shopQuestion.initializeComponent(
resultMap.shopQuestionInitialData
);
}); });
}, },
setup() { setup() {
@ -214,21 +245,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) {
@ -243,7 +274,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() {
@ -253,9 +284,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) {
@ -267,46 +298,58 @@ export default {
this.isVehicleProtected = newValue.isVehicleProtected; this.isVehicleProtected = newValue.isVehicleProtected;
if (newValue.zipCode !== this.zipCode) { if (newValue.zipCode !== this.zipCode) {
if (!(this.selectedAppointmentType === AppointmentTypeStrings.MOBILE if (
|| this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)) { !(
this.selectedAppointmentType === AppointmentTypeStrings.MOBILE ||
this.selectedAppointmentType ===
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) {
return this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile; return (
this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile
);
} }
return this.isGlassServiceableMobile; return this.isGlassServiceableMobile;
}, },
isServiceableInshop() { isServiceableInshop() {
if (this.isRecalibrationServiceableInshop !== null) { if (this.isRecalibrationServiceableInshop !== null) {
return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop; return (
this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop
);
} }
return this.isGlassServiceableInshop; return this.isGlassServiceableInshop;
}, },
isShopQuestionDisplayed() { isShopQuestionDisplayed() {
return ( return (
this.selectedAppointmentType === 'Inshop' this.selectedAppointmentType === "Inshop" ||
|| this.selectedAppointmentType === 'Dropoff' this.selectedAppointmentType === "Dropoff"
); );
}, },
isAppointmentTypeDisplayed() { isAppointmentTypeDisplayed() {
return this.zipCode && !this.displayNoShopsAlert; return this.zipCode && !this.displayNoShopsAlert;
}, },
isMobileLocationDisplayed() { isMobileLocationDisplayed() {
return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE return (
|| this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP; this.selectedAppointmentType === AppointmentTypeStrings.MOBILE ||
this.selectedAppointmentType ===
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() {
@ -320,20 +363,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) {
@ -354,8 +397,8 @@ export default {
city: null, city: null,
state: null, state: null,
zipCode: null, zipCode: null,
zipCodeCtu: null zipCodeCtu: null,
} },
}; };
} }
@ -368,17 +411,18 @@ 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.navigationScenarios.CLICKED_FORWARD, this.$route); this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
}, },
openModalAction(modalName) { openModalAction(modalName) {
this.$refs[modalName].openModal(); this.$refs[modalName].openModal();
}, },
resetDependentState() { resetDependentState() {},
},
getServiceAddressFromStore() { getServiceAddressFromStore() {
return useMainStore().order.serviceLocation.address; return useMainStore().order.serviceLocation.address;
}, },
@ -389,10 +433,16 @@ export default {
return useMainStore().order.serviceLocation.city; return useMainStore().order.serviceLocation.city;
}, },
getServiceStateFromStore() { getServiceStateFromStore() {
return useMainStore().order.serviceLocation.state || useMainStore().order.customer.address.state; return (
useMainStore().order.serviceLocation.state ||
useMainStore().order.customer.address.state
);
}, },
getServiceZipCodeFromStore() { getServiceZipCodeFromStore() {
return useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode; return (
useMainStore().order.serviceLocation.zipCode ||
useMainStore().order.customer.address.zipCode
);
}, },
getIsVehicleProtectedFromStore() { getIsVehicleProtectedFromStore() {
return useMainStore().order.serviceLocation.isVehicleProtected; return useMainStore().order.serviceLocation.isVehicleProtected;
@ -403,7 +453,12 @@ export default {
getSelectedProvider() { getSelectedProvider() {
return useMainStore().order.serviceLocation.provider; return useMainStore().order.serviceLocation.provider;
}, },
setData(zipCodeData, serviceabilityDetails, mobileFeePart, mobileProviderNumber) { setData(
zipCodeData,
serviceabilityDetails,
mobileFeePart,
mobileProviderNumber
) {
if (zipCodeData) { if (zipCodeData) {
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase; this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
this.zipCodeCtu = zipCodeData.zipCodeCtu; this.zipCodeCtu = zipCodeData.zipCodeCtu;
@ -433,19 +488,23 @@ 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;
}, },
setServiceabilityDetails(serviceabilityDetails) { setServiceabilityDetails(serviceabilityDetails) {
this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop; this.isGlassServiceableInshop =
this.isRecalibrationServiceableInshop = serviceabilityDetails.isRecalibrationServiceableInshop; serviceabilityDetails.isGlassServiceableInshop;
this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile; this.isRecalibrationServiceableInshop =
this.isRecalibrationServiceableMobile = serviceabilityDetails.isRecalibrationServiceableMobile; serviceabilityDetails.isRecalibrationServiceableInshop;
} this.isGlassServiceableMobile =
} serviceabilityDetails.isGlassServiceableMobile;
this.isRecalibrationServiceableMobile =
serviceabilityDetails.isRecalibrationServiceableMobile;
},
},
}; };
</script> </script>
@ -469,21 +528,21 @@ $page-side-padding: 1.5rem;
&:first-of-type { &:first-of-type {
line-height: 1.5rem; line-height: 1.5rem;
} }
&:not(:nth-of-type(1)){ &:not(:nth-of-type(1)) {
line-height: 1.250rem; line-height: 1.25rem;
} }
} }
.choose-option{ .choose-option {
.button-question >div { .button-question > div {
&:first-of-type { &:first-of-type {
margin-bottom: 0.95rem; margin-bottom: 0.95rem;
line-height: 1.500rem; line-height: 1.5rem;
} }
} }
} }
.button-question{ .button-question {
.row.form-test-error{ .row.form-test-error {
line-height:1.500rem; line-height: 1.5rem;
padding-left: 0rem !important; padding-left: 0rem !important;
} }
} }
@ -494,7 +553,6 @@ $page-side-padding: 1.5rem;
span { span {
text-align: center; text-align: center;
} }
} }
} }
</style> </style>

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

@ -32,6 +32,15 @@ body {
} }
} }
} }
.shop-question {
.col {
max-width: 472px;
@include media-breakpoint-up(xl) {
max-width: 66.6666666%;
margin: 0 auto;
}
}
}
} }
.col-xl-4 { .col-xl-4 {
max-width: 472px; max-width: 472px;