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

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

@ -81,15 +81,15 @@
cmsWidgetName="DisclaimerWidget" cmsWidgetName="DisclaimerWidget"
typeStyle="caption" typeStyle="caption"
/> />
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBackByVehicleQuestions"
@forwardClicked="navigateForward"
/>
</div> </div>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBackByVehicleQuestions"
@forwardClicked="navigateForward"
/>
</div> </div>
</div> </div>
<recalModal ref="RecalModal" cmsWidgetName="RecalModal" /> <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />

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

@ -1,238 +1,263 @@
<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">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader
id="sub-header"
cmsWidgetName="SiteSubHeader"
class="mb-5 mt-4" />
<buttonQuestion
ref="buttonQuestion"
v-model="selectedProvider"
questionText="Select an option:"
:answers="prefAnswers"
groupName="prefQuestions"
buttonTypeString="providerPrefRadio"
:validationRules="rules.optionRequired"
isRequired
class="mx-5" />
<div class="px-5">
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div> </div>
<recalModal </div>
ref="recalModal" <div class="row justify-content-center">
cmsWidgetName="RecalModal" /> <div class="col-md-6 col-xl-4">
<steeringModal <siteSubHeader
ref="StateSteeringModal" id="sub-header"
cmsWidgetName="StateSteeringModal" /> cmsWidgetName="SiteSubHeader"
<shopPreferenceModal class="mb-5 mt-4"
ref="ShopPreferenceDrawer" />
cmsWidgetName="ShopPreferenceDrawer" </div>
:showSteeringLink="showSteeringLink" </div>
@openSteering="openStateSteeringModal" /> <div class="row justify-content-center">
<tpaRecalModal <div class="col-md-6 col-xl-4">
ref="TPARecalModal" <buttonQuestion
cmsWidgetName="TPARecalModal" ref="buttonQuestion"
:ackError="ackError" v-model="selectedProvider"
@buttonClick="navigateWithTPAAck" /> questionText="Select an option:"
</Form> :answers="prefAnswers"
groupName="prefQuestions"
buttonTypeString="providerPrefRadio"
:validationRules="rules.optionRequired"
isRequired
/>
<siteFooter
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction"
/>
</div>
</div>
<recalModal ref="recalModal" cmsWidgetName="RecalModal" />
<steeringModal
ref="StateSteeringModal"
cmsWidgetName="StateSteeringModal"
/>
<shopPreferenceModal
ref="ShopPreferenceDrawer"
cmsWidgetName="ShopPreferenceDrawer"
:showSteeringLink="showSteeringLink"
@openSteering="openStateSteeringModal"
/>
<tpaRecalModal
ref="TPARecalModal"
cmsWidgetName="TPARecalModal"
:ackError="ackError"
@buttonClick="navigateWithTPAAck"
/>
</div>
</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,
siteHeader, siteHeader,
siteSubHeader, siteSubHeader,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
buttonQuestion, buttonQuestion,
recalModal, recalModal,
steeringModal, steeringModal,
shopPreferenceModal, shopPreferenceModal,
tpaRecalModal tpaRecalModal,
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.showSteeringLink = !!vm.$refs.StateSteeringModal.ModalBodyText;
if (vm.showSteeringLink) {
vm.$refs.StateSteeringModal.openModal();
}
});
},
data() {
return {
selectedProvider: null,
showSteeringLink: false,
tpaAcknowledgement: false,
rules: {
optionRequired: globalRules.OPTION_REQUIRED,
},
};
},
computed: {
isForwardActionDisabled() {
return this.selectedProvider === null;
}, },
mixins: [baseFormMixin], prefAnswers() {
async beforeRouteEnter(to, from, next) { const cmsAnswersContent = [
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); {
// Settle promises and get results cmsWidgetName: options.SAFELITE,
const promiseResultMap = [ },
{ {
resultKey: 'cmsContent', cmsWidgetName: options.TPA,
promise: cmsContentPromise },
} ];
]; // if cms content has not yet loaded, skip
const resultMap = await settleAllPromises(promiseResultMap); if (
next((vm) => { !this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") ||
vm.setCmsContent(resultMap.cmsContent); this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, "HeaderText") ===
""
vm.showSteeringLink = !!vm.$refs.StateSteeringModal.ModalBodyText; ) {
if (vm.showSteeringLink) { return {};
vm.$refs.StateSteeringModal.openModal(); }
const modifiedAnswers = cmsAnswersContent.map((answer) => ({
value: answer.cmsWidgetName,
buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName),
}));
return modifiedAnswers;
},
ackError() {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
},
},
mounted() {
setupModalLinks(this);
const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
this.selectedProvider = pageData?.selectedProvider
? pageData.selectedProvider
: null;
this.tpaAcknowledgement = pageData?.tpaAcknowledgement
? pageData.tpaAcknowledgement
: false;
},
methods: {
getHeaderTextFromCms(cmsWidgetName) {
const headerText = this.getCmsContent(cmsWidgetName, "HeaderText");
return headerText?.replace(
"{custom:SafeliteLogo}",
"<span class='safeliteLogo'></span>"
);
},
getSubheaderTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, "SubheaderText");
},
getBodyTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, "BodyText");
},
arePagePrerequisiteValid() {
return true;
},
navigateForward(scenario) {
this.$router.navigate(scenario, this.$route);
},
navigateWithTPAAck() {
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement,
});
this.navigateForward(
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED
);
},
forwardButtonAction() {
if (this.selectedProvider) {
let scenario = null;
switch (this.selectedProvider) {
case options.SAFELITE:
this.mainStore.updateIsSafeliteProvider(true);
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
break;
case options.TPA:
this.mainStore.updateIsSafeliteProvider(false);
if (this.mainStore.issConfig.enableTPAFlow) {
if (this.mainStore.hasRecalibrationPart) {
this.$refs.TPARecalModal.openModal();
this.$refs.siteFooter.removeLoader();
return;
}
scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
} else {
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
scenario =
this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
} }
break;
default:
}
this.navigateForward(scenario);
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement,
}); });
}
}, },
data() { openStateSteeringModal() {
return { this.$refs.StateSteeringModal.openModal();
selectedProvider: null,
showSteeringLink: false,
tpaAcknowledgement: false,
rules: {
optionRequired: globalRules.OPTION_REQUIRED
}
};
}, },
computed: { },
isForwardActionDisabled() {
return this.selectedProvider === null;
},
prefAnswers() {
const cmsAnswersContent = [
{
cmsWidgetName: options.SAFELITE
},
{
cmsWidgetName: options.TPA
}
];
// if cms content has not yet loaded, skip
if (!this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText')
|| this.getCmsContent(cmsAnswersContent[0].cmsWidgetName, 'HeaderText') === '') {
return {};
}
const modifiedAnswers = cmsAnswersContent.map((answer) => ({
value: answer.cmsWidgetName,
buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
buttonLabelSubCopy: this.getSubheaderTextFromCms(answer.cmsWidgetName),
buttonBodyCopy: this.getBodyTextFromCms(answer.cmsWidgetName)
}));
return modifiedAnswers;
},
ackError() {
return errorMessages.ACKNOWLEDGEMENT_REQUIRED;
}
},
mounted() {
setupModalLinks(this);
const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
this.selectedProvider = pageData?.selectedProvider ? pageData.selectedProvider : null;
this.tpaAcknowledgement = pageData?.tpaAcknowledgement ? pageData.tpaAcknowledgement : false;
},
methods: {
getHeaderTextFromCms(cmsWidgetName) {
const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
return headerText?.replace('{custom:SafeliteLogo}', "<span class='safeliteLogo'></span>");
},
getSubheaderTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, 'SubheaderText');
},
getBodyTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, 'BodyText');
},
arePagePrerequisiteValid() {
return true;
},
navigateForward(scenario) {
this.$router.navigate(scenario, this.$route);
},
navigateWithTPAAck() {
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement
});
this.navigateForward(this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED);
},
forwardButtonAction() {
if (this.selectedProvider) {
let scenario = null;
switch (this.selectedProvider) {
case options.SAFELITE:
this.mainStore.updateIsSafeliteProvider(true);
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE;
break;
case options.TPA:
this.mainStore.updateIsSafeliteProvider(false);
if (this.mainStore.issConfig.enableTPAFlow) {
if (this.mainStore.hasRecalibrationPart) {
this.$refs.TPARecalModal.openModal();
this.$refs.siteFooter.removeLoader();
return;
}
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED;
} else {
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
scenario = this.navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED;
}
break;
default:
}
this.navigateForward(scenario);
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement
});
}
},
openStateSteeringModal() {
this.$refs.StateSteeringModal.openModal();
}
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
#sub-header span { #sub-header span {
color: $black; color: $black;
} }
.question-text { .question-text {
margin-top: 0; margin-top: 0;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
& > span { & > span {
text-align: left; text-align: left;
} }
} }
:deep(.safeliteLogo) { :deep(.safeliteLogo) {
background-image: url(~@/assets/img/icons/safelite-logo.svg); background-image: url(~@/assets/img/icons/safelite-logo.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 4.5rem; background-size: 4.5rem;
margin: 0 0.25rem 0 0.25rem; margin: 0 0.25rem 0 0.25rem;
padding: 0 2.5rem 0 2.5rem; padding: 0 2.5rem 0 2.5rem;
} }
</style> </style>

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

File diff suppressed because it is too large Load diff

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;