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

Merge branch 'develop' into feature/digital/SSR-254

Browse source
This commit is contained in:
Kroell 2023-03-09 11:05:28 -05:00
commit 2d73c30c4d
7 changed files with 231 additions and 205 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/constants/error-messages.js
View file

@ -32,7 +32,7 @@ const errorMessages = {
LOSS_CAUSE_REQUIRED: "Please enter loss cause", LOSS_CAUSE_REQUIRED: "Please enter loss cause",
LOSS_CITY_REQUIRED: "Please enter a city", LOSS_CITY_REQUIRED: "Please enter a city",
LOSS_STATE_REQUIRED: "Please select an option", LOSS_STATE_REQUIRED: "Please select an option",
LOSS_DATE_REQUIRED: "Please enter a loss date", LOSS_DATE_REQUIRED: "Please select a date. Format must be MM/DD/YYYY and the date must be not in the future",
DAMAGE_OPTION_REQUIRED: "Please select an option", DAMAGE_OPTION_REQUIRED: "Please select an option",
POLICYHOLDER_FIRST_NAME_REQUIRED: "Please enter the policyholder first name", POLICYHOLDER_FIRST_NAME_REQUIRED: "Please enter the policyholder first name",

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

@ -67,7 +67,7 @@
</div> </div>
</fieldset> </fieldset>
</div> </div>
<div class="row form-test-error mt-1"> <div class="row form-test-error mt-1 px-5">
<error-message <error-message
:name="formatString(groupName)" :name="formatString(groupName)"
v-if="!suppressError"></error-message> v-if="!suppressError"></error-message>

11
src/digital-components/textbox-question/textbox-question.vue
View file

@ -229,6 +229,17 @@ input[type="date"]::-webkit-calendar-picker-indicator {
color: $black; color: $black;
font-weight: 500; font-weight: 500;
} }
span{
font-weight:400;
font-size:14px;
color: #4D5151;
}
.form-test-error span{
color: #d4281c;
font-size: 0.875rem;
font-weight: 500;
}
.input-wrapper { .input-wrapper {
position: relative; position: relative;
&.has-search-icon { &.has-search-icon {

4
src/iss-components/site-header/menu-modal/menu-modal.spec.js
View file

@ -56,12 +56,12 @@ describe("menu-modal.vue", () => {
expect(icon.attributes('alt')).toBe('Your privacy choices'); expect(icon.attributes('alt')).toBe('Your privacy choices');
}); });
it("Should returnDo not sell my information text link text", async () => { it("Should return Warranty text link text", async () => {
// Act // Act
const wrapper = shallowMount(menuModal); const wrapper = shallowMount(menuModal);
// Expect // Expect
expect(wrapper.html()).toContain("Do not sell my information"); expect(wrapper.html()).toContain("Warranty");
}); });
}); });

274
src/iss-components/site-header/menu-modal/menu-modal.vue
View file

@ -1,155 +1,166 @@
<template> <template>
<div class="menu-modal-container"> <div class="menu-modal-container">
<button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)"> <button class="menu-button" type="button" :class="[isActive ? 'active' : '']" data-bs-toggle="modal" data-bs-target="#footerModal" aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div> <div class="bar1"></div>
<div class="bar2"></div> <div class="bar2"></div>
<div class="bar3"></div> <div class="bar3"></div>
</button> </button>
</div> </div>
<!-- Modal --> <!-- Modal -->
<div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`"> <div class="modal menu-modal fade" data-bs-backdrop="false" id="footerModal" tabindex="-1" aria-labelledby="footerModalLabel" aria-hidden="true" v-on="{ 'show.bs.modal' : show, 'hide.bs.modal' : hide }" :style="`height: calc(100% - ${currentFooterAndHeaderHeight}px);`">
<div class="menu-modal-container"> <div class="menu-modal-container">
<button <button
class="menu-button" class="menu-button"
type="button" type="button"
:class="[isActive ? 'active' : '']" :class="[isActive ? 'active' : '']"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#footerModal" data-bs-target="#footerModal"
aria-label="Hamburger Menu (modal window)"> aria-label="Hamburger Menu (modal window)">
<div class="bar1"></div> <div class="bar1"></div>
<div class="bar2"></div> <div class="bar2"></div>
<div class="bar3"></div> <div class="bar3"></div>
</button> </button>
</div>
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header visually-hidden">
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
</div>
<div class="modal-body d-flex flex-column">
<textLink linkType="navigation" text="Terms of use" href="https://www.safelite.com/terms-of-use" target="_blank" />
<textLink
linkType="navigation"
text="Your privacy choices"
href="//www.safelite.com/privacy-center"
target="_blank"
>
<template v-slot:after-text>
<img
class="ccpa-icon"
src="~@/assets/img/icons/ccpa-icon.svg"
alt="Your privacy choices"
data-id="ccpa-icon"
/>
</template>
</textLink>
<textLink linkType="navigation" text="Do not sell my information" href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html" target="_blank" />
</div>
<div class="modal-footer d-flex justify-content-start">
&copy; {{new Date().getFullYear()}} Safelite Group
</div>
</div>
</div>
</div> </div>
</template> <div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header visually-hidden">
<h5 class="modal-title" id="footerModalLabel">Footer Navigation</h5>
</div>
<div class="modal-body d-flex flex-column">
<textLink
linkType="navigation"
text="Terms of use"
href="//www.safelite.com/terms-of-use"
target="_blank" />
<textLink
linkType="navigation"
text="Your privacy choices"
href="//www.safelite.com/privacy-center"
target="_blank">
<template v-slot:after-text>
<img
class="ccpa-icon"
data-id="ccpa-icon"
src="~@/assets/img/icons/ccpa-icon.svg"
alt="Your privacy choices" />
</template>
</textLink>
<textLink
linkType="navigation"
text="Warranty"
href="//www.safelite.com/national-lifetime-warranty"
target="_blank" />
<textLink
linkType="navigation"
text="Notice at collection"
href="https://privacyportal-cdn.onetrust.com/dsarwebform/d3b95a93-e22e-4d4d-a806-482052406557/9e371601-eae3-4338-9430-b90b9036022b.html"
target="_blank" />
</div>
<div class="modal-footer d-flex justify-content-start">
&copy; {{new Date().getFullYear()}} Safelite Group
</div>
</div>
</div>
</div>
</template>
<script> <script>
import textLink from "@/ux-components/text-link/text-link"; import textLink from "@/ux-components/text-link/text-link";
export default { export default {
name: 'menuModal', name: 'menuModal',
data() { data() {
return { return {
isActive: false, isActive: false,
currentFooterAndHeaderHeight: 0, currentFooterAndHeaderHeight: 0,
}; };
}, },
methods: { methods: {
show() { show() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72; this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
this.isActive = true; this.isActive = true;
document.querySelector('.page-container-grouped-styles').scrollTo({ document.querySelector('.page-container-grouped-styles').scrollTo({
top: 0, behavior: 'smooth' top: 0, behavior: 'smooth'
}); });
}, },
hide() { hide() {
var self = this; var self = this;
self.isActive = false; self.isActive = false;
}, },
}, },
components: { components: {
textLink, textLink,
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.menu-modal-container { .menu-modal-container {
position: absolute; position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem; padding: 1.47rem 1rem 1.47rem 1.47rem;
right: 0; right: 0;
button { button {
border: none; border: none;
&.menu-button { &.menu-button {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
border-radius: 50%; border-radius: 50%;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2); box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);
background-color: $white; background-color: $white;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0;//Required to prevent 'squish' on iPhone padding: 0;//Required to prevent 'squish' on iPhone
z-index: 1050; z-index: 1050;
.bar1, .bar1,
.bar2, .bar2,
.bar3 { .bar3 {
width: 14px; width: 14px;
height: 2px; height: 2px;
background-color: $blue; background-color: $blue;
margin: 1px 0; margin: 1px 0;
transition: 0.25s; transition: 0.25s;
}
&.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px);
}
&.active .bar2 {opacity: 0;}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px);
}
} }
&.active .bar1 {
transform: rotate(-45deg) translate(-3px, 3px);
}
&.active .bar2 {opacity: 0;}
&.active .bar3 {
transform: rotate(45deg) translate(-3px, -3px);
}
}
} }
} }
.modal { .modal {
&.menu-modal { &.menu-modal {
max-width: 576px; max-width: 576px;
left: auto; left: auto;
height: calc(100% - 72px); height: calc(100% - 72px);
top: 72px; top: 72px;
border-top: 1px solid $gray-300; border-top: 1px solid $gray-300;
overflow-x: visible; overflow-x: visible;
overflow-y: visible; overflow-y: visible;
.modal-body { .modal-body {
padding: 2rem; padding: 2rem;
.ccpa-icon { .ccpa-icon {
width: 2.0625rem; width: 2.0625rem;
height: 1rem; height: 1rem;
margin-left: 0.5rem; margin-left: 0.5rem;
}
} }
} .modal-fullscreen {
.modal-fullscreen { width: 100vw;
width: 100vw; max-width: 576px;
max-width: 576px; }
} .navigation-link {
.navigation-link { margin-bottom: 1.5rem;
margin-bottom: 1.5rem; }
} .modal-footer {
.modal-footer { border-top: none;
border-top: none; padding: 2rem;
padding: 2rem; }
} .menu-modal-container {
.menu-modal-container {
position: absolute; position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem; padding: 1.47rem 1rem 1.47rem 1.47rem;
right: .5rem; right: .5rem;
@ -164,6 +175,7 @@
background-color: $white; background-color: $white;
position: relative; position: relative;
right: -.5rem; right: -.5rem;
top: .5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -191,7 +203,7 @@
} }
} }
} }
//.modal-backdrop styles are in common-styles.scss //.modal-backdrop styles are in common-styles.scss
} }
} }
</style> </style>

135
src/iss-components/site-header/site-header.vue
View file

@ -5,13 +5,13 @@
<menuModal/> <menuModal/>
</div> </div>
<alert <alert
v-if="displayGlobalAlert" v-if="displayGlobalAlert"
class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0" class="position-absolute rounded-0 w-100 border-0 shadow-sm start-0"
cmsWidgetName="GlobalAlert" cmsWidgetName="GlobalAlert"
:manualHeadline="globalAlertMessage.messageHeadline" :manualHeadline="globalAlertMessage.messageHeadline"
:manualCopy="globalAlertMessage.messageCopy" :manualCopy="globalAlertMessage.messageCopy"
:alertClass="globalAlertMessage.type" :alertClass="globalAlertMessage.type"
v-bind:isDismissible="globalAlertMessage.isDismissible" /> v-bind:isDismissible="globalAlertMessage.isDismissible" />
</div> </div>
</template> </template>
@ -21,60 +21,60 @@ import alert from "@/ux-components/alert/alert";
import eventBus from "@/helpers/event-bus/event-bus"; import eventBus from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events"; import { globalEvents } from "@/constants/events";
export default({ export default({
name: "siteHeader", name: "siteHeader",
data() { data() {
return {
displayGlobalAlert: false,
globalAlertMessage: {
isDismissible: false,
messageCopy: "",
messageHeadline: "",
type: "",
},
headerAnswers: null
};
},
props: {
cmsWidgetName: String,
},
computed: {
imageSrc()
{
return this.headerAnswers ? this.headerAnswers.AnswerImageUrl : "";
},
altText()
{
return this.headerAnswers ? this.headerAnswers.AltText : "";
},
logoBackgroundStyle() {
return { return {
displayGlobalAlert: false, "background-color": this.headerAnswers ? this.headerAnswers.HexCode : "#FFFFFF"
globalAlertMessage: {
isDismissible: false,
messageCopy: "",
messageHeadline: "",
type: "",
},
headerAnswers: null
}; };
}, },
props: { },
cmsWidgetName: String, mounted() {
}, const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
computed: { this.headerAnswers = Array.isArray(answers)
imageSrc() ? answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0]
{ : null;
return this.headerAnswers ? this.headerAnswers.AnswerImageUrl : "";
},
altText()
{
return this.headerAnswers ? this.headerAnswers.AltText : "";
},
logoBackgroundStyle() {
return {
"background-color": this.headerAnswers ? this.headerAnswers.HexCode : "#FFFFFF"
};
},
},
mounted() {
const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
this.headerAnswers = Array.isArray(answers)
? answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0]
: null;
// Check if alert event is on the bus // Check if alert event is on the bus
const alertEvent = eventBus.readAndPopEventFromBus( const alertEvent = eventBus.readAndPopEventFromBus(
globalEvents.Categories.GLOBAL_ALERT, globalEvents.Categories.GLOBAL_ALERT,
globalEvents.SubCategories.PAGE_NOT_FOUND globalEvents.SubCategories.PAGE_NOT_FOUND
); );
// If alert event is on the bus, then display the alert // If alert event is on the bus, then display the alert
if (alertEvent !== undefined) { if (alertEvent !== undefined) {
this.displayGlobalAlert = true; this.displayGlobalAlert = true;
this.globalAlertMessage = alertEvent; this.globalAlertMessage = alertEvent;
} }
//load client customization overrides //load client customization overrides
const clientOverrideClass = this.mainStore.issConfig.styleSheet.trim(); const clientOverrideClass = this.mainStore.issConfig.styleSheet.trim();
if(clientOverrideClass if(clientOverrideClass
&& clientOverrideClass != "" && clientOverrideClass != ""
&& !document.getElementsByTagName("body")[0].className.split(" ").includes(clientOverrideClass)) && !document.getElementsByTagName("body")[0].className.split(" ").includes(clientOverrideClass))
{ {
document.getElementsByTagName("body")[0].className += " " + clientOverrideClass; document.getElementsByTagName("body")[0].className += " " + clientOverrideClass;
} }
@ -84,15 +84,18 @@ import { globalEvents } from "@/constants/events";
alert alert
}, },
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.alert { .site-header {
left: 0; height: 72px;
top: 72px; }
} .alert {
left: 0;
top: 72px;
}
#siteHeaderImage { #siteHeaderImage {
height: 2.5rem; height: 2.5rem;
} }
</style> </style>

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

@ -48,7 +48,7 @@
inputId="damageCauseQuestionField" inputId="damageCauseQuestionField"
:options="DamageCauseOptions" :options="DamageCauseOptions"
disableAutoFill disableAutoFill
validationRules="loss-cause-required" validationRules="damage-option-required"
placeHolderText="Select an option" placeHolderText="Select an option"
/> />
</div> </div>
@ -159,7 +159,7 @@
defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED)); defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED)); defineRule("loss-state-required", required(errorMessages.LOSS_STATE_REQUIRED));
defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED)); defineRule("loss-city-required", required(errorMessages.LOSS_CITY_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_REQUIRED)); defineRule("phone-number-required", required(errorMessages.PHONE_NUMBER_FORMAT));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED)); defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED)); defineRule("damage-option-required", required(errorMessages.DAMAGE_OPTION_REQUIRED));