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

Merge pull request #655 from Safelite/SSR-1201-style-updates-iss

Browse source 
SSR-1201 style updates.
This commit is contained in:
bmauger 2024-04-29 16:17:44 -04:00 committed by GitHub
commit a66a8e1f05
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 108 additions and 212 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
src/digital-components/button-question/button-question.vue
View file

@ -61,7 +61,9 @@
:setLastValuePushedToGa="setLastValuePushedToGa"
:suppressError="suppressError" />
<!-- For nested questions -->
<transition name="fade" mode="out-in">
<transition
name="fade"
mode="out-in">
<div
v-if="
typeof selectedValues == 'string' &&
@ -74,7 +76,9 @@
</div>
</fieldset>
</div>
<div v-if="!suppressError" class="row form-test-error mt-1">
<div
v-if="!suppressError"
class="row form-test-error mt-1">
<error-message :name="formatString(groupName)"></error-message>
</div>
</div>
@ -96,16 +100,16 @@ export default {
listCard,
ErrorMessage,
radio,
providerPrefRadio,
providerPrefRadio
},
props: {
buttonTypeString: {
type: String,
default: 'listButton',
default: 'listButton'
},
buttonTypeObject: {
type: Object,
default: null,
default: null
},
isMultiSelect: Boolean,
groupName: String,
@ -113,16 +117,16 @@ export default {
answers: Array,
textPosition: {
type: String,
default: 'text-center',
default: 'text-center'
},
selectingInitiatesLoad: Boolean,
loaderColor: {
type: String,
default: 'blue',
default: 'blue'
},
loaderPosition: {
type: String,
default: 'right',
default: 'right'
},
isRequired: Boolean,
isOverflowScrollable: Boolean,
@ -137,7 +141,7 @@ export default {
additionalButtonData: Object,
additionalButtonStyling: String,
isSmallQuestionText: Boolean,
isSmallQuestionLabelText: Boolean,
isSmallQuestionLabelText: Boolean
},
emits: ['update:modelValue'],
setup(props) {
@ -146,7 +150,7 @@ export default {
const fieldOptions = {
value: modelValue,
initialValue: null,
initialValue: null
};
const {
@ -156,7 +160,7 @@ export default {
meta,
validate,
errors,
resetField,
resetField
} = useField(props.groupName, props.validationRules, fieldOptions);
return {
@ -166,12 +170,12 @@ export default {
validate,
meta,
errors,
resetField,
resetField
};
},
data() {
return {
lastValuePushedToGa: null,
lastValuePushedToGa: null
};
},
computed: {
@ -180,8 +184,8 @@ export default {
const baseClasses = this.isOverflowScrollable
? 'container-fluid overflow-scroll position-absolute px-5 pt-1 py-0'
: this.buttonTypeString === 'listCard'
? 'w-100'
: '';
? 'w-100'
: '';
const SmallQuestionTextClass = this.isSmallQuestionText
? `${baseClasses}small-question-text`
@ -241,15 +245,15 @@ export default {
// Determine number of buttons and add class accordingly.
// This is to accommodate unique spacing per design specs.
if (
this.buttonTypeString === 'listCard' &&
this.buttonsInfo.length > 2
this.buttonTypeString === 'listCard'
&& this.buttonsInfo.length > 2
) {
classes += ' two-list-card-width';
}
if (
this.buttonTypeString === 'listCard' &&
this.buttonsInfo.length === 1
this.buttonTypeString === 'listCard'
&& this.buttonsInfo.length === 1
) {
classes += ' one-list-card-width';
}
@ -257,31 +261,29 @@ export default {
return classes;
},
buttonsInfo() {
return (Array.isArray(this.answers) ? this.answers : [])?.map(
(answer) => ({
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
altText:
return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
altText:
answer.altText ?? (answer.Name ? answer.Name : answer),
buttonLabelSubCopy:
buttonLabelSubCopy:
answer.buttonLabelSubCopy ?? answer.SubText,
buttonBodyCopy:
buttonBodyCopy:
answer.buttonBodyCopy ?? answer.buttonBodyCopy,
buttonAuxiliaryCopy:
answer.buttonAuxiliaryCopy ??
answer.buttonAuxiliaryCopy,
buttonFooterCopy:
buttonAuxiliaryCopy:
answer.buttonAuxiliaryCopy
?? answer.buttonAuxiliaryCopy,
buttonFooterCopy:
answer.buttonFooterCopy ?? answer.buttonFooterCopy,
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
buttonImageId: answer.buttonImageId ?? answer.ImageId,
groupName: this.formatString(this.groupName),
value:
answer.value ??
(this.useTextForValue && answer.Text
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
buttonImageId: answer.buttonImageId ?? answer.ImageId,
groupName: this.formatString(this.groupName),
value:
answer.value
?? (this.useTextForValue && answer.Text
? answer.Text
: answer.Name) ??
(typeof answer !== 'object' ? answer : null),
})
);
: answer.Name)
?? (typeof answer !== 'object' ? answer : null)
}));
},
selectedValues: {
get() {
@ -289,15 +291,15 @@ export default {
},
set(selectedAnswers) {
this.$emit('update:modelValue', selectedAnswers);
},
},
}
}
},
watch: {
modelValue(newValue) {
this.resetField({
value: newValue,
value: newValue
});
},
}
},
beforeMount() {
if (this.buttonTypeObject) {
@ -307,7 +309,7 @@ export default {
},
beforeUnmount() {
this.resetField({
value: '',
value: ''
});
},
methods: {
@ -316,8 +318,8 @@ export default {
},
setLastValuePushedToGa(lastValuePushedToGa) {
this.lastValuePushedToGa = lastValuePushedToGa;
},
},
}
}
};
</script>
@ -338,7 +340,7 @@ export default {
line-height: 1.625rem;
& > span {
text-align: center;
text-align: left;
}
}

10
src/digital-components/modal/modal.vue
View file

@ -27,7 +27,7 @@
@mousedown="closeModal"
@keypress.space="closeModal"></button>
</div>
<div class="modal-body ps-5 pe-5 pb-5 pt-0">
<div class="modal-body ps-5 pe-5 pb-5 pt-1">
<slot></slot>
</div>
<div class="modal-footer px-5 py-4">
@ -121,17 +121,13 @@ export default {
this.onModalClosedCallback?.();
},
openModal() {
const modal = Modal.getOrCreateInstance(
document.getElementById(this.modalId)
);
const modal = Modal.getOrCreateInstance(document.getElementById(this.modalId));
modal?.show();
this.isOpen = true;
this.$emit('isModalOpened', true);
},
closeModal() {
const modal = Modal.getInstance(
document.getElementById(this.modalId)
);
const modal = Modal.getInstance(document.getElementById(this.modalId));
modal?.hide();
this.isOpen = false;
this.$emit('isModalOpened', false);

99
src/iss-components/loading-modal/loading-modal.vue
View file

@ -159,105 +159,6 @@ export default {
margin: 0 175px;
transform: translateX(180px);
}
@keyframes slide-in {
0% {
transform: translateX(180px);
}
11% {
transform: translateX(-80px);
}
22% {
transform: translateX(-80px);
}
33% {
transform: translateX(-600px);
}
44% {
transform: translateX(-600px);
}
55% {
transform: translateX(-1110px);
}
66% {
transform: translateX(-1110px);
}
77% {
transform: translateX(-1600px);
}
88% {
transform: translateX(-1600px);
}
100% {
transform: translateX(-2050px);
}
}
.dot-1 {
animation: blinking-elipsis 0.75s linear infinite;
@keyframes blinking-elipsis {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
.dot-2 {
animation: blinking-elipsis-2 0.75s linear infinite;
@keyframes blinking-elipsis-2 {
0% {
opacity: 0;
}
21% {
opacity: 0;
}
22% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
.dot-3 {
animation: blinking-elipsis-3 0.75s linear infinite;
@keyframes blinking-elipsis-3 {
0% {
opacity: 0;
}
43% {
opacity: 0;
}
44% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
}
}
}
</style>

26
src/layouts/bailout-page/bailout-page.vue
View file

@ -20,11 +20,12 @@
:contentProperty="subHeaderContentProperty"
:stripRteStyle="stripRteStyle"
:subContentProperty="subContentProperty"
class="sub-header-content"
class="sub-header-content mt-2 mb-5"
justification="left" />
<textboxQuestion
ref="firstName"
v-model="bailoutPageModel.firstName"
class="mb-3"
inputId="firstNameField"
cmsWidgetName="FirstNameQuestion"
isRequired
@ -33,6 +34,7 @@
<textboxQuestion
ref="lastName"
v-model="bailoutPageModel.lastName"
class="mb-3"
inputId="lastNameField"
cmsWidgetName="LastNameQuestion"
isRequired
@ -41,6 +43,7 @@
<textboxQuestion
ref="phoneNumber"
v-model="bailoutPageModel.phoneNumber"
class="mb-3"
inputId="phoneNumberField"
cmsWidgetName="PhoneNumberQuestion"
isRequired
@ -50,6 +53,7 @@
<textboxQuestion
ref="emailAddress"
v-model="bailoutPageModel.email"
class="mb-3"
inputId="emailAddressField"
cmsWidgetName="EmailAddressQuestion"
isRequired
@ -96,7 +100,7 @@ export default {
siteFooter,
textboxQuestion,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
Form
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -106,8 +110,8 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
promise: cmsContentPromise
}
];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
@ -127,14 +131,14 @@ export default {
widget: {
defaultSiteHeader: 'SiteSubHeaderWidget',
noTpa: 'ContentGroupNoTPAWidget',
notSeeingPreferredShop: 'ContentGroupNotSeeingPreferredShop',
notSeeingPreferredShop: 'ContentGroupNotSeeingPreferredShop'
},
rules: {
firstName: globalRules.FIRST_NAME_REQUIRED,
lastName: globalRules.LAST_NAME_REQUIRED,
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
},
email: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`
}
};
},
computed: {
@ -185,7 +189,7 @@ export default {
},
phoneMask() {
return MaskaFormattedMasks.PHONE_NUMBER;
},
}
},
methods: {
backButtonAction() {
@ -210,10 +214,10 @@ export default {
firstName: useMainStore().order.customer.firstName,
lastName: useMainStore().order.customer.lastName,
phoneNumber: useMainStore().order.customer.phoneNumber,
email: useMainStore().order.customer.emailAddress,
email: useMainStore().order.customer.emailAddress
};
},
},
}
}
};
</script>

20
src/layouts/contact-confirmation/contact-confirmation.vue
View file

@ -29,7 +29,7 @@ export default {
name: 'contact-confirmation',
components: {
siteHeader,
siteSubHeader,
siteSubHeader
},
async beforeRouteEnter(to, from, next) {
// Call APIs
@ -38,8 +38,8 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
promise: cmsContentPromise
}
];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
@ -53,18 +53,20 @@ export default {
return { mainStore };
},
data() {
const contactConfirmationData = useMainStore().pageData(
issPageValues.CONTACT_CONFIRMATION
);
const contactConfirmationData = useMainStore().pageData(issPageValues.CONTACT_CONFIRMATION);
return {
contactConfirmationModel: contactConfirmationData,
contactConfirmationModel: contactConfirmationData
};
},
computed: {},
methods: {},
methods: {}
};
</script>
<style lang="scss">
@import '@/styles/bailout-common.scss';
.sub-header-content {
h5 {
margin-bottom: 1rem;
}
}
</style>

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

@ -192,16 +192,10 @@ export default {
});
}
const loadingText = [
'Connecting to your insurance company',
'Nearly there',
'Finishing up'
];
if (!hasBailedOut) {
// Call the "next" function to complete the transition to this page.
next((vm) => {
showIssLoadingModal(true, true, loadingText);
showIssLoadingModal(true);
vm.setCmsContent(resultMap.cmsContent);
vm.setSupportingItems(resultMap.supportingItems);
// eslint-disable-next-line no-param-reassign

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

@ -1,5 +1,8 @@
<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="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
@ -13,7 +16,7 @@
<siteSubHeader
id="sub-header"
cmsWidgetName="SiteSubHeader"
class="mb-5 mt-4" />
class="mb-0 mt-4" />
</div>
</div>
<div class="row justify-content-center">
@ -36,7 +39,9 @@
@forwardClicked="forwardButtonAction" />
</div>
</div>
<recalModal ref="recalModal" cmsWidgetName="RecalModal" />
<recalModal
ref="recalModal"
cmsWidgetName="RecalModal" />
<steeringModal
ref="StateSteeringModal"
cmsWidgetName="StateSteeringModal" />
@ -57,7 +62,7 @@
// Import Supporting Files
import {
fetchCmsContentForPage,
setupModalLinks,
setupModalLinks
} from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import errorMessages from '@/constants/error-messages';
@ -93,7 +98,7 @@ export default {
recalModal,
steeringModal,
shopPreferenceModal,
tpaRecalModal,
tpaRecalModal
},
mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -102,8 +107,8 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
promise: cmsContentPromise
}
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
@ -121,8 +126,8 @@ export default {
showSteeringLink: false,
tpaAcknowledgement: false,
rules: {
optionRequired: globalRules.OPTION_REQUIRED,
},
optionRequired: globalRules.OPTION_REQUIRED
}
};
},
computed: {
@ -132,19 +137,19 @@ export default {
prefAnswers() {
const cmsAnswersContent = [
{
cmsWidgetName: options.SAFELITE,
cmsWidgetName: options.SAFELITE
},
{
cmsWidgetName: options.TPA,
},
cmsWidgetName: options.TPA
}
];
// if cms content has not yet loaded, skip
if (
!this.getCmsContent(
cmsAnswersContent[0].cmsWidgetName,
'HeaderText'
) ||
this.getCmsContent(
)
|| this.getCmsContent(
cmsAnswersContent[0].cmsWidgetName,
'HeaderText'
) === ''
@ -154,22 +159,18 @@ export default {
const modifiedAnswers = cmsAnswersContent.map((answer) => ({
value: answer.cmsWidgetName,
buttonLabel: this.getHeaderTextFromCms(answer.cmsWidgetName),
buttonLabelSubCopy: this.getSubheaderTextFromCms(
answer.cmsWidgetName
),
buttonBodyCopy: this.getBodyTextFromCms(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
);
const pageData = this.mainStore.pageData(issPageValues.PROVIDER_PREFERENCE);
this.selectedProvider = pageData?.selectedProvider
? pageData.selectedProvider
: null;
@ -200,11 +201,9 @@ export default {
navigateWithTPAAck() {
this.mainStore.saveProviderPreferenceData({
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() {
if (this.selectedProvider) {
@ -228,9 +227,7 @@ export default {
this.navigationScenarios
.CLICKED_FORWARD_WITH_TPA_ENABLED;
} else {
this.mainStore.setBailout(
bailoutMessage.TPANotEnabled()
);
this.mainStore.setBailout(bailoutMessage.TPANotEnabled());
scenario =
this.navigationScenarios
.CLICKED_FORWARD_WITH_TPA_DISABLED;
@ -241,14 +238,14 @@ export default {
this.navigateForward(scenario);
this.mainStore.saveProviderPreferenceData({
selectedProvider: this.selectedProvider,
tpaAcknowledgement: this.tpaAcknowledgement,
tpaAcknowledgement: this.tpaAcknowledgement
});
}
},
openStateSteeringModal() {
this.$refs.StateSteeringModal.openModal();
},
},
}
}
};
</script>
<style lang="scss" scoped>