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

Merge pull request #968 from Safelite/feature/richardson/INSR-7740

Browse source 
Global Header and Footer updates
This commit is contained in:
brich1212safe 2025-12-03 10:39:07 -05:00 committed by GitHub
commit e3f8610c10
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 581 additions and 415 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.js
View file

@ -23,7 +23,7 @@ module.exports = {
'implicit-arrow-linebreak': ['off'],
'comma-dangle': ['error', 'never'],
indent: ['error', 4, { SwitchCase: 1 }],
'max-len': ['error', { code: 140 }],
'max-len': ['error', { code: 160 }],
'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
'vue/html-indent': 'off',
'vue/html-closing-bracket-newline': ['error', {

2
package-lock.json generated
View file

@ -67,7 +67,7 @@
"typescript-eslint": "^8.11.0",
"vite": "^6.4.1",
"vitest": "^3.2.4",
"volar-service-vetur": "*",
"volar-service-vetur": "latest",
"wait-on": "^8.0.2"
}
},

13
src/App.vue
View file

@ -7,6 +7,7 @@
<!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
<component :is="Component" />
</transition>
<footerMenu />
</router-view>
<loadingModal
:showLoader="shouldShowLoader"
@ -17,10 +18,12 @@
<script>
import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
import footerMenu from '@/iss-components/footer-menu/footer-menu.vue';
export default {
name: 'app',
components: {
footerMenu,
loadingModal
},
setup() {
@ -45,15 +48,15 @@ window.onerror = (msg, url, line, col, error) => {
// Note that col & error are new to the HTML 5 spec and may not be
// supported in every browser. It worked for me in Chrome.
global.$logger.logError(msg, {
url: url,
line: line,
column: col ?? "",
error: error ?? "",
url,
line,
column: col ?? '',
error: error ?? ''
});
// If you return true, then error alerts (like in older versions of
// Internet Explorer) will be suppressed.
var suppressErrorAlert = true;
const suppressErrorAlert = true;
return suppressErrorAlert;
};
</script>

26
src/assets/img/powered-by-safelite-solutions.svg Normal file
View file

@ -0,0 +1,26 @@
<svg width="165" height="15" viewBox="0 0 165 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4668_1909)">
<path d="M9.45033 4.77209C9.29949 4.77209 9.17707 4.64967 9.17707 4.49883V4.20808C9.17707 3.42765 8.68083 2.77839 7.62933 2.77839C6.46196 2.77839 5.93512 3.60473 5.93512 4.19934C5.93512 6.81826 14.815 5.53722 14.815 10.3837C14.815 13.206 12.2135 14.4695 7.42383 14.4695C2.92489 14.4695 0.413086 13.4858 0.413086 10.7379V10.5477C0.413086 10.3969 0.535507 10.2744 0.686346 10.2744H5.39515C5.54599 10.2744 5.66841 10.3969 5.66841 10.5477V10.8406C5.66841 11.973 6.39856 12.3818 7.45007 12.3818C8.56059 12.3818 9.2033 11.5752 9.2033 10.8494C9.2033 8.23046 0.67323 9.53118 0.675416 4.8333C0.675416 2.15973 2.92489 0.692871 7.51128 0.692871C12.0758 0.692871 14.1132 1.85149 14.251 4.48353C14.2597 4.64311 14.1351 4.77646 13.9777 4.77646L9.45033 4.77209Z" fill="#DB0020"/>
<path d="M29.8398 3.41653C29.8398 1.54088 30.9875 0.845703 34.4044 0.845703C35.0383 0.845703 35.8013 0.874122 36.503 0.928774C36.6451 0.939705 36.7544 1.05994 36.7544 1.20203V2.35628C36.7544 2.51805 36.6167 2.64266 36.4549 2.62954C36.3063 2.61643 36.1445 2.61205 35.9324 2.61205C35.3313 2.61205 34.7585 2.80224 34.7585 3.27225V4.60138C34.7585 4.75222 34.8809 4.87464 35.0318 4.87464H36.479C36.6298 4.87464 36.7522 4.99706 36.7522 5.1479V6.7022C36.7522 6.85304 36.6298 6.97546 36.479 6.97546H35.0318C34.8809 6.97546 34.7585 7.09788 34.7585 7.24872V13.9971C34.7585 14.148 34.6361 14.2704 34.4853 14.2704H30.1153C29.9644 14.2704 29.842 14.148 29.842 13.9971L29.8398 3.41653Z" fill="#DB0020"/>
<path d="M42.1607 10.1038C42.0098 10.1038 41.8874 10.2262 41.8874 10.3771V11.586C41.8874 12.5938 42.5432 12.8539 43.2275 12.8539C44.0407 12.8539 44.5479 12.3358 44.6135 11.2275C44.6222 11.0832 44.7424 10.9717 44.8867 10.9717H48.7561C48.92 10.9717 49.0446 11.1138 49.0293 11.2756C48.8348 13.3589 47.1406 14.5153 43.2537 14.5153C38.499 14.5153 36.9688 13.16 36.9688 9.58135C36.9688 5.98525 38.8269 4.62988 43.2537 4.62988C47.1887 4.62988 49.1824 5.74041 49.1824 9.14632V9.82837C49.1824 9.97921 49.0599 10.1016 48.9091 10.1016L42.1607 10.1038ZM44.5916 7.73193C44.5916 6.74163 44.2637 6.2913 43.2253 6.2913C42.2131 6.2913 41.8852 6.74163 41.8852 7.73193V8.12542C41.8852 8.27626 42.0077 8.39868 42.1585 8.39868H44.3162C44.467 8.39868 44.5894 8.27626 44.5894 8.12542L44.5916 7.73193Z" fill="#DB0020"/>
<path d="M51.2066 0.413086H55.5766C55.7274 0.413086 55.8498 0.535507 55.8498 0.686346L55.8476 13.9974C55.8476 14.1482 55.7252 14.2706 55.5744 14.2706H51.2044C51.0536 14.2706 50.9312 14.1482 50.9312 13.9974L50.9333 0.686346C50.9312 0.535507 51.0558 0.413086 51.2066 0.413086Z" fill="#DB0020"/>
<path d="M58.2503 4.85082H62.6203C62.7711 4.85082 62.8935 4.97324 62.8935 5.12408V13.9952C62.8935 14.146 62.7711 14.2684 62.6203 14.2684H58.2503C58.0995 14.2684 57.9771 14.146 57.9771 13.9952V5.12408C57.9771 4.97324 58.0995 4.85082 58.2503 4.85082ZM58.2503 0.413086H62.6203C62.7711 0.413086 62.8935 0.535507 62.8935 0.686346V3.0014C62.8935 3.15224 62.7711 3.27466 62.6203 3.27466H58.2503C58.0995 3.27466 57.9771 3.15224 57.9771 3.0014V0.686346C57.9771 0.535507 58.0995 0.413086 58.2503 0.413086Z" fill="#DB0020"/>
<path d="M77.6363 10.1038C77.4854 10.1038 77.363 10.2262 77.363 10.3771V11.586C77.363 12.5938 78.0188 12.8539 78.7031 12.8539C79.5163 12.8539 80.0235 12.3358 80.089 11.2275C80.0978 11.0832 80.218 10.9717 80.3623 10.9717H84.2317C84.3934 10.9717 84.5202 11.1138 84.5049 11.2756C84.3104 13.3589 82.6162 14.5153 78.7293 14.5153C73.9746 14.5153 72.4443 13.16 72.4443 9.58135C72.4443 5.98525 74.3025 4.62988 78.7293 4.62988C82.6642 4.62988 84.6579 5.74041 84.6579 9.14632V9.82837C84.6579 9.97921 84.5355 10.1016 84.3847 10.1016L77.6363 10.1038ZM80.0672 7.73193C80.0672 6.74163 79.7393 6.2913 78.7009 6.2913C77.6909 6.2913 77.363 6.74163 77.363 7.73193V8.12542C77.363 8.27626 77.4854 8.39868 77.6363 8.39868H79.7939C79.9448 8.39868 80.0672 8.27626 80.0672 8.12542V7.73193Z" fill="#DB0020"/>
<path d="M28.0737 7.63574C28.0627 5.20045 25.6624 4.62988 22.2259 4.62988C20.0726 4.62988 16.8329 5.06273 16.5837 7.48927C16.5662 7.65104 16.6951 7.79095 16.8569 7.79095H20.5754C20.7153 7.79095 20.8312 7.68383 20.8465 7.54392C20.9361 6.7154 21.3755 6.28912 22.2237 6.28912C23.0697 6.28912 23.4698 6.58424 23.4698 7.15699V7.99863C23.4698 8.13635 23.3692 8.25221 23.2337 8.2697C23.0107 8.30031 22.6784 8.33966 22.0335 8.43366L20.0945 8.72878C16.9509 9.19878 15.9956 10.0142 15.9956 11.7499C15.9956 13.3654 17.1433 14.5131 20.0945 14.5131C21.5001 14.5131 22.7571 14.0869 23.3452 13.3261C23.3802 13.2802 23.4523 13.2911 23.4676 13.3458C23.5245 13.5403 23.6316 13.8945 23.7037 14.089C23.7452 14.1962 23.848 14.2683 23.9617 14.2683H27.7982C27.9491 14.2683 28.0715 14.1459 28.0715 13.995L28.0737 7.63574ZM21.9527 12.6637C21.216 12.6637 20.7503 12.0145 20.7503 11.3892C20.7503 10.764 21.0433 10.3661 21.7625 10.1738C22.2303 10.0492 22.8184 9.95517 23.1725 9.90707C23.3365 9.88303 23.4851 10.012 23.4851 10.1781V11.1203C23.4829 12.1434 23.0435 12.6637 21.9527 12.6637Z" fill="#DB0020"/>
<path d="M70.1795 6.97546H71.572C71.7229 6.97546 71.8453 6.85304 71.8453 6.7022V5.1479C71.8453 4.99706 71.7229 4.87464 71.572 4.87464H70.1773C70.0265 4.87464 69.904 4.75222 69.904 4.60138L69.8844 0.694857V0.620531C69.8844 0.506855 69.7926 0.415039 69.6789 0.415039C69.6483 0.415039 69.622 0.421597 69.5958 0.432528C69.5914 0.434714 69.5849 0.4369 69.5849 0.4369L65.2608 3.00335C65.0662 3.10829 64.9875 3.13233 64.9875 3.27661V11.9772C64.9875 14.0605 66.1615 14.3753 69.1673 14.3753C69.9106 14.3753 70.7654 14.3469 71.5917 14.2901C71.736 14.2791 71.8453 14.1589 71.8453 14.0168V12.7117C71.8453 12.5609 71.7229 12.4385 71.572 12.4385H71.0802C70.2888 12.4385 69.9062 12.2483 69.9062 11.7083V7.24872C69.904 7.09788 70.0265 6.97546 70.1795 6.97546Z" fill="#DB0020"/>
<path d="M90.1211 12.8885L91.4218 11.3101C92.1388 12.0927 93.0002 12.425 93.6494 12.425C94.3927 12.425 94.7097 12.0534 94.7097 11.6293C94.7097 11.1112 94.3774 10.886 93.3171 10.5275C91.8853 10.0356 90.4512 9.36014 90.4512 7.50198C90.4512 5.93675 91.7913 4.75627 93.5423 4.73003C94.7753 4.7038 95.9033 5.18037 96.8061 5.94986L95.5601 7.56756C94.7512 6.93141 94.1675 6.67783 93.6363 6.67783C93.092 6.67783 92.7597 6.95546 92.7597 7.40798C92.7466 7.85831 93.092 8.09878 94.1129 8.49664C95.7721 9.13279 97.0444 9.55689 97.0444 11.3757C97.0444 13.5902 95.1469 14.3859 93.5817 14.3859C92.3749 14.3881 91.1289 13.9225 90.1211 12.8885Z" fill="black"/>
<path d="M97.9341 9.55945C97.9341 6.71973 99.9234 4.71729 102.789 4.71729C105.601 4.71729 107.632 6.66727 107.632 9.55945C107.632 12.4385 105.603 14.3885 102.789 14.3885C99.9234 14.3885 97.9341 12.3992 97.9341 9.55945ZM105.31 9.55945C105.31 7.99421 104.25 6.7875 102.789 6.7875C101.303 6.7875 100.256 8.02045 100.256 9.55945C100.256 11.0984 101.303 12.3314 102.789 12.3314C104.247 12.3314 105.31 11.1247 105.31 9.55945Z" fill="black"/>
<path d="M108.996 4.8501H111.265V12.2915H115.178V14.2677H108.996V4.8501Z" fill="black"/>
<path d="M115.788 10.3415V4.8501H118.015V10.2104C118.015 11.3646 118.573 12.3199 119.674 12.3199C120.656 12.3199 121.373 11.5504 121.373 10.2104V4.8501H123.588V10.3415C123.588 12.7965 122.182 14.388 119.674 14.388C117.353 14.388 115.788 12.9539 115.788 10.3415Z" fill="black"/>
<path d="M127.354 6.82631H124.899V4.8501H132.076V6.82631H129.608V14.2677H127.352V6.82631H127.354Z" fill="black"/>
<path d="M133.537 4.8501H135.806V14.2677H133.537V4.8501Z" fill="black"/>
<path d="M137.225 9.55945C137.225 6.71973 139.214 4.71729 142.08 4.71729C144.891 4.71729 146.922 6.66727 146.922 9.55945C146.922 12.4385 144.893 14.3885 142.08 14.3885C139.214 14.3885 137.225 12.3992 137.225 9.55945ZM144.6 9.55945C144.6 7.99421 143.54 6.7875 142.08 6.7875C140.593 6.7875 139.546 8.02045 139.546 9.55945C139.546 11.0984 140.593 12.3314 142.08 12.3314C143.538 12.3314 144.6 11.1247 144.6 9.55945Z" fill="black"/>
<path d="M148.288 4.8501H150.424L154.178 10.6607L154.204 10.6476V4.8501H156.392V14.2677H154.191L150.503 8.61671H150.477V14.2677H148.288V4.8501Z" fill="black"/>
<path d="M157.494 12.8885L158.795 11.3101C159.512 12.0927 160.373 12.425 161.022 12.425C161.765 12.425 162.082 12.0534 162.082 11.6293C162.082 11.1112 161.75 10.886 160.69 10.5275C159.258 10.0356 157.824 9.36014 157.824 7.50198C157.824 5.93675 159.164 4.75627 160.915 4.73003C162.148 4.7038 163.276 5.18037 164.179 5.94986L162.933 7.56756C162.124 6.93141 161.54 6.67783 161.009 6.67783C160.465 6.67783 160.135 6.95546 160.135 7.40798C160.122 7.85831 160.467 8.09878 161.488 8.49664C163.147 9.13279 164.419 9.55689 164.419 11.3757C164.419 13.5902 162.522 14.3859 160.957 14.3859C159.748 14.3881 158.502 13.9225 157.494 12.8885Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_4668_1909">
<rect width="165" height="14.9096" fill="white"/>
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8.6 KiB

143
src/iss-components/footer-menu/footer-menu.vue Normal file
View file

@ -0,0 +1,143 @@
<template>
<div class="footer-menu-container">
<div class="footer-menu-wrapper">
<div class="footer-menu-image-container">
<div class="footer-menu-image">
<img
:src="require('@/assets/img/powered-by-safelite-solutions.svg')"
alt="Powered by Safelite Solutions" />
</div>
</div>
<div class="footer-menu-items-container">
<!-- Footer menu items go here -->
<div class="footer-menu-item">
&copy; {{ new Date().getFullYear() }} Safelite Group
</div>
<div class="footer-menu-item">
<textLink
linkType="newWindowLink"
text="Terms of service"
href="//www.safelite.com/terms-of-use"
target="_blank" />
</div>
<div class="footer-menu-item">
<textLink
linkType="newWindowLink"
text="Your privacy choices"
href="//www.safelite.com/privacy-center"
target="_blank">
<template #after-text>
<img
class="ccpa-icon"
src="~@/assets/img/icons/ccpa-icon.svg"
alt="Your privacy choices" />
</template>
</textLink>
</div>
<div class="footer-menu-item">
Cookie Preferences
</div>
<div class="footer-menu-item">
<textLink
linkType="newWindowLink"
text="Notice at collection"
href="https://www.safelite.com/ccpa-privacy-policy"
target="_blank" />
</div>
</div>
</div>
</div>
</template>
<script>
import textLink from '@/ux-components/text-link/text-link.vue';
export default {
name: 'footer-menu',
components: {
textLink
}
};
</script>
<style lang="scss" scoped>
.footer-menu-container {
display: flex;
border-top: solid 0.125rem #d3d3d3;
@include media-breakpoint-up(xs) {
padding: 1rem 0 1.25rem 0; // Heritage 1.250rem 0
flex-direction: column;
justify-content: center;
align-items: center;
}
@include media-breakpoint-up(xl) {
padding: 3rem 0;
.footer-menu-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
}
.footer-menu-items-container {
@include media-breakpoint-up(xs) {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 1.25rem;
.footer-menu-item:not(:first-child) {
margin-top: 0.75rem;
}
}
@include media-breakpoint-up(xl) {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 0;
.footer-menu-item {
margin-top: 0;
margin-right: 1.75rem;
&:not(:first-child) {
margin-top: 0;
}
&:last-child {
margin-right: 5rem;
}
}
}
.footer-menu-item {
display: flex;
text-align: center;
font-size: 0.875rem;
.ccpa-icon {
width: 2.0625rem;
height: 1rem;
margin-left: 0.5rem;
}
a {
color: #525656;
text-decoration: none;
line-height: 1.56;
font-weight: 400;
padding: 0;
&:hover {
text-decoration: underline;
}
}
}
}
}
</style>

40
src/iss-components/site-footer/footer-image/footer-image.vue
View file

@ -1,40 +0,0 @@
<template>
<div class="footerImage">
<img
:src="footerImageURL"
alt="" />
</div>
</template>
<script>
import widgetFields from '@/constants/cms-widget-fields.js';
export default {
name: 'footer-image',
data() {
return {
widget: {
footer: 'SiteFooterWidget'
}
};
},
computed: {
footerImageURL() {
return this.getCmsContent(
this.widget.footer,
widgetFields.FOOTER_WIDGET.FOOTER_IMAGE_URL
);
}
}
};
</script>
<style lang="scss" scoped>
.footerImage {
display: flex;
justify-content: center;
margin-top: auto;
img {
max-width: 23.4375rem;
}
}
</style>

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

@ -49,7 +49,6 @@
<script>
import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
import issPageValues from '@/router/router-constants/issPage-values';
export default {
name: 'site-footer',
@ -80,29 +79,10 @@ export default {
return this.customButtontext
? this.customButtontext
: this.getCmsContent(this.cmsWidgetName, 'ForwardButtonText');
},
footerImageURL() {
const output = this.getCmsContent(
this.cmsWidgetName,
'FooterImageURL'
);
return output;
},
includeFooterImage() {
const currentPageName = this.getPageNameByQueryString();
return currentPageName.toLowerCase() === issPageValues.WELCOME_PAGE;
}
},
mounted() {
this.paddingHeight = this.includeFooterImage
? this.getFooterInfoBoxHeight() + 16
: this.getFooterInfoBoxHeight() + 24;
this.$nextTick(() => {
window.addEventListener('resize', this.onResize);
});
},
beforeUnmount() {
window.removeEventListener('resize', this.onResize);
this.paddingHeight = this.getFooterInfoBoxHeight() + 24;
},
unmounted() {
document.onkeydown = null;
@ -180,18 +160,4 @@ export default {
}
}
}
.footerImage {
text-align: center;
position: sticky;
}
@media only screen and (max-width: 340px) {
.footerImage {
bottom: 78px;
}
}
#siteFooterImage {
width: 100%;
}
</style>

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

@ -1,14 +1,13 @@
<template>
<div>
<div
class="site-header d-flex justify-content-center align-items-center flex-column py-2"
:style="logoBackgroundStyle">
<div
class="site-header-container"
:style="logoBackgroundStyle">
<div class="site-header iss-heritage-container-width">
<img
id="siteHeaderImage"
class="img-fluid"
:src="imageSrc"
:alt="altText" />
<menuModal />
</div>
<alert
v-if="displayGlobalAlert"
@ -22,7 +21,6 @@
</template>
<script>
import menuModal from '@/iss-components/site-header/menu-modal/menu-modal.vue';
import alert from '@/ux-components/alert/alert.vue';
import { useMainStore } from '@/store';
import eventBus from '@/helpers/event-bus/event-bus';
@ -31,7 +29,6 @@ import { globalEvents } from '@/constants/events';
export default {
name: 'site-header',
components: {
menuModal,
alert
},
props: {
@ -130,15 +127,32 @@ export default {
</script>
<style lang="scss" scoped>
.site-header {
height: 56px;
position: relative;
@include media-breakpoint-down(md) {
margin: 0 -.75rem;
.site-header-container {
width: 100%;
margin: 0;
@include media-breakpoint-up(xs) {
padding: 0.750rem 0.9375rem 1rem 0.9375rem;
}
@include media-breakpoint-up(md) {
padding: 1rem 0 1.25rem 0;
}
.site-header {
@include media-breakpoint-down(md) {
margin: 0 -.75rem;
}
}
}
#siteHeaderImage {
width: auto;
height: 2.5rem;
@include media-breakpoint-up(xs) {
height: 2.625rem; // 42px no padding in image
}
@include media-breakpoint-up(md) {
height: 4rem; // 64px no padding in image
}
}
</style>

23
src/iss-components/site-sub-header/site-sub-header.vue
View file

@ -1,10 +1,10 @@
<template>
<div>
<div
class="subheader-primary d-flex align-items-center justify-content-center overflow-hidden">
class="subheader-primary d-flex overflow-hidden">
<h5
class="text-center fw-normal mb-0 subheader-primary"
:class="headerColor">
:class="[justifySubheaderSubText, headerColor]"
class="fw-normal mb-0 subheader-primary">
<span>
{{ content }}
</span>
@ -49,6 +49,7 @@ export default {
hasBackButton: Boolean,
issContainingPage: String,
justification: String,
justificationSubText: String,
stripRteStyle: Boolean,
subContentProperty: String,
subHeaderClasses: String,
@ -108,6 +109,11 @@ export default {
? 'justify-content-left'
: 'justify-content-center';
},
justifySubheaderSubText() {
return this.justificationSubText?.toLowerCase() === 'center'
? 'justify-content-center'
: 'justify-content-left';
},
alternateFormatting() {
// override for service-packages unique style
if (this.issContainingPage?.toLowerCase() === 'service-packages') {
@ -147,6 +153,12 @@ h5 {
span {
color: $black;
}
&.justify-content-center {
text-align: center;
}
&.justify-content-left {
text-align: left;
}
}
p {
margin: 0;
@ -167,7 +179,10 @@ p {
.subheader-secondary {
p {
font-size: .875rem;
margin-bottom: 1.25rem;
color: #525656;
font-size: 1rem;
line-height: 1.56;
&.justify-content-center {
text-align: center;
}

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

@ -5,27 +5,25 @@
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition coverage-statement">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition coverage-statement">
<div class="justify-content-center">
<siteHeader
ref="siteHeader"
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center pt-5">
<div class="col-md-6 col-xl-4">
<div class="iss-heritage-container-width">
<div class="coverage-statement-container iss-heritage-content-container-width">
<h5
ref="siteSubHeader"
class="sub-header text-center text-black"
class="sub-header text-black mt-4"
v-html="coverageStatementSubHeader"></h5>
<div
ref="explanatoryText"
class="body-text text-center mt-2"
class="body-text mt-2"
v-html="explanatoryText"></div>
<div
ref="secondaryText"
class="text-center mt-4 mb-1 fw-bold text-black"
class="mt-4 mb-1 fw-bold text-black"
v-html="secondaryText"></div>
<div
v-if="isDeductibleVisible"
@ -100,6 +98,7 @@
@returnToClaim="continueClaim" />
</Form>
</template>
<script>
// Import Component
import { Form } from 'vee-validate';
@ -498,6 +497,15 @@ export default {
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.coverage-statement-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.coverage-statement {
.cost {
color: $green;
@ -511,7 +519,7 @@ export default {
.sub-header {
line-height: 2rem;
}
:deep ol {
:deep(ol) {
padding: 0;
padding-left: 1.125rem;
padding-right: 1.125rem;
@ -522,7 +530,7 @@ export default {
margin-bottom: .5rem;
}
}
:deep p {
:deep(p) {
line-height: 1.5rem;
font-size: 0.875rem;
margin-bottom: 0.5rem;
@ -530,11 +538,11 @@ export default {
color: $black;
}
}
:deep .body-text {
:deep(.body-text) {
font-size: 0.875rem;
line-height: 1.5rem;
}
:deep .question-text {
:deep(.question-text) {
margin-top: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1rem;
@ -554,7 +562,7 @@ export default {
}
}
:deep .deductible-modal {
:deep(.deductible-modal) {
p {
margin-bottom: 0 !important;
}

29
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -4,21 +4,15 @@
v-slot="{ meta }"
@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">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<div class="iss-heritage-container-width">
<div class="license-plate-lookup-container iss-heritage-content-container-width">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mb-5"
class="mt-4"
subHeaderMarginClasses="mt-1" />
<alert
v-if="displayVinNotFoundAlert"
@ -105,7 +99,6 @@ import vinPagesMixin from '@/mixins/vin-pages-mixin';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-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 textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import alert from '@/ux-components/alert/alert.vue';
@ -125,7 +118,6 @@ export default {
siteFooter,
siteHeader,
siteSubHeader,
vehicleBanner,
textboxQuestion,
dropdownQuestion,
alert
@ -354,6 +346,15 @@ export default {
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.license-plate-lookup-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
#license-plate-question-wrapper .form-test-error {
/**
Override extra margin-bottom in the error message in TextboxQuestion

46
src/layouts/policy-endorsements/policy-endorsements.vue
View file

@ -82,7 +82,7 @@ export default {
siteFooter,
buttonQuestion,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
Form
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
@ -92,8 +92,8 @@ export default {
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise,
},
promise: cmsContentPromise
}
];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
@ -113,11 +113,11 @@ export default {
schoolPropertyAnswer: '',
parkingLotAnswer: '',
hasValidCarId:
this.mainStore.vehicle.carId &&
this.mainStore.vehicle.carId !== '0',
this.mainStore.vehicle.carId
&& this.mainStore.vehicle.carId !== '0',
rules: {
selectionRequired: globalRules.OPTION_REQUIRED,
},
selectionRequired: globalRules.OPTION_REQUIRED
}
};
},
computed: {
@ -135,18 +135,14 @@ export default {
},
educatorEndorsement() {
return (
useMainStore().order.policy.endorsements?.includes(
endorsementOptions.EDUCATOR
) ?? false
useMainStore().order.policy.endorsements?.includes(endorsementOptions.EDUCATOR) ?? false
);
},
parkingGuardEndorsement() {
return (
useMainStore().order.policy.endorsements?.includes(
endorsementOptions.PARKING_GUARD
) ?? false
useMainStore().order.policy.endorsements?.includes(endorsementOptions.PARKING_GUARD) ?? false
);
},
}
},
methods: {
async forwardButtonAction() {
@ -156,7 +152,7 @@ export default {
questionNum: 1,
endorsementName: endorsementOptions.EDUCATOR,
questionText: this.schoolPropertyQuestionText,
selectedAnswer: this.schoolPropertyAnswer,
selectedAnswer: this.schoolPropertyAnswer
});
}
if (this.parkingGuardEndorsement) {
@ -164,14 +160,12 @@ export default {
questionNum: 2,
endorsementName: endorsementOptions.PARKING_GUARD,
questionText: this.parkingLotQuestionText,
selectedAnswer: this.parkingLotAnswer,
selectedAnswer: this.parkingLotAnswer
});
}
// save answers to store as order.policy.endorsementQuestionAnswers
useMainStore().saveEndorsementQuestionAnswers(
this.questionAnswersArray
);
useMainStore().saveEndorsementQuestionAnswers(this.questionAnswersArray);
return this.navigateForward();
},
@ -188,24 +182,24 @@ export default {
this.$route
);
}
},
},
}
}
};
</script>
<style lang="scss" scoped>
:deep .subheader-primary {
:deep(.subheader-primary) {
margin-bottom: map-get($spacers, 2);
}
:deep .subheader-secondary {
:deep(.subheader-secondary) {
p {
font-size: $h6-font-size;
line-height: map-get($spacers, 5);
}
}
:deep .subheader-secondary.justify-content-center {
:deep(.subheader-secondary.justify-content-center) {
p {
text-align: left;
}
@ -215,7 +209,7 @@ export default {
margin-bottom: map-get($spacers, 5);
}
:deep .question-text {
:deep(.question-text) {
& > span {
text-align: left;
line-height: map-get($spacers, 5);
@ -223,7 +217,7 @@ export default {
margin-bottom: map-get($spacers, 2);
}
:deep div.question-text.d-flex {
:deep(div.question-text.d-flex) {
margin-top: map-get($spacers, 4);
}
</style>

30
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -4,17 +4,16 @@
v-slot="{ meta }"
@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 mb-5">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="iss-heritage-container-width">
<div class="policy-holder-details-container iss-heritage-content-container-width">
<siteSubHeader
id="sub-header"
cmsWidgetName="SiteSubHeaderWidget" />
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4" />
<addressQuestions
id="address-questions-wrapper"
ref="addressQuestions"
@ -161,14 +160,13 @@ export default {
</script>
<style lang="scss" scoped>
#sub-header p {
font-size: 16px;
line-height: 26px;
color: #4d5151;
}
#address-questions-wrapper {
margin-top: 24px;
.iss-heritage-container-width {
.policy-holder-details-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
#address-questions-wrapper .alert.heading {

174
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -4,20 +4,15 @@
v-slot="{ meta }"
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div
class="container-fluid fade-on-route-transition replace-options-question">
<div class="row justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition replace-options-question">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<vehicleBanner
class="mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<div class="iss-heritage-container-width">
<div class="vehicle-damage-container iss-heritage-content-container-width">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4" />
<alert
v-if="shouldDisplayVehicleChangeAlert"
ref="vehicleChangeAlert"
@ -25,71 +20,71 @@
cmsWidgetName="VehicleChangeAlert"
alertClass="alert-warning"
:isDismissible="false" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<damageLocationQuestion
ref="damageLocation"
v-model="selectedDamageLocations"
cmsWidgetName="DamageLocationQuestion"
groupName="DamageLocationQuestion" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<sideDoorOptions
v-show="!hasRepairReplaceConflict"
ref="sideDoorOptions"
v-model="sideDoorOptionsData"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
:selectedDamageLocations="selectedDamageLocations" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<replaceOptionsQuestion
ref="backGlassOptions"
v-model="selectedRearReplaceOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="
isRearWindowDamageLocation &&
!hasRepairReplaceConflict
"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<site-footer
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
<div class="justify-content-center">
<div class="vehicle-damage-question-container">
<damageLocationQuestion
ref="damageLocation"
v-model="selectedDamageLocations"
cmsWidgetName="DamageLocationQuestion"
groupName="DamageLocationQuestion" />
</div>
</div>
<div class="justify-content-center">
<div class="vehicle-damage-question-container">
<windshieldOptions
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations" />
</div>
</div>
<div class="justify-content-center">
<div class="vehicle-damage-question-container">
<alert
v-if="hasRepairReplaceConflict"
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
</div>
</div>
<div class="justify-content-center">
<div class="vehicle-damage-question-container">
<sideDoorOptions
v-show="!hasRepairReplaceConflict"
ref="sideDoorOptions"
v-model="sideDoorOptionsData"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
:selectedDamageLocations="selectedDamageLocations" />
</div>
</div>
<div class="justify-content-center">
<div class="vehicle-damage-question-container">
<replaceOptionsQuestion
ref="backGlassOptions"
v-model="selectedRearReplaceOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="
isRearWindowDamageLocation &&
!hasRepairReplaceConflict
"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" />
</div>
</div>
<div class="justify-content-center">
<div class="vehicle-damage-question-container">
<site-footer
ref="siteFooter"
class="mt-5"
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</div>
</div>
@ -100,7 +95,6 @@
// Components
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.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 damageLocationQuestion from '@/layouts/vehicle-damage/damage-location-question/damage-location-question.vue';
@ -133,7 +127,6 @@ export default {
components: {
siteHeader,
siteFooter,
vehicleBanner,
siteSubHeader,
sideDoorOptions,
damageLocationQuestion,
@ -500,18 +493,21 @@ export default {
</script>
<style lang="scss">
.replace-options-question {
.row {
margin-top: 0;
.col-12 {
margin: 0 0 .5rem 0;
&:last-child {
margin-bottom: 0;
}
.iss-heritage-container-width {
.vehicle-damage-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
.question-text {
margin-top: 0; //would need deep is changed to scoped. Was already not scoped.
}
}
}
.replace-options-question {
.question-text {
margin: 0;
span {
padding: 1rem 0;
text-align: center;

71
src/layouts/vehicle-lookup/vehicle-lookup.vue
View file

@ -1,41 +1,34 @@
<template>
<Form
@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">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
@submit="onSubmit"
@invalidSubmit="onInvalidSubmit">
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="select-car-form rounded">
<VehicleBanner
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<SiteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mb-2"
subHeaderMarginClasses="mt-1" />
<VinLookupMethods
ref="VinLookupMethods"
v-model="selectedVinLookupMethod"
cmsWidgetName="VINLookupMethod"
groupName="VinLookupMethods" />
<SiteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
class="mt-5"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
<div class="iss-heritage-container-width">
<div class="vehicle-lookup-container iss-heritage-content-container-width">
<SiteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4"
subHeaderMarginClasses="mt-1" />
<VinLookupMethods
ref="VinLookupMethods"
v-model="selectedVinLookupMethod"
cmsWidgetName="VINLookupMethod"
groupName="VinLookupMethods" />
<SiteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="isForwardActionDisabled"
class="mt-5"
@backClicked="navigateBack"
@forwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
// Import Supporting Files
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
@ -46,9 +39,8 @@ import vinLookupMethodSelections from '@/constants/vin-lookup-methods';
// Import Component
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 VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import VinLookupMethods from '@/layouts/vehicle-lookup/vin-lookup-methods/vin-lookup-methods.vue';
export default {
@ -57,9 +49,8 @@ export default {
// eslint-disable-next-line vue/no-reserved-component-names
Form,
SiteFooter,
SiteHeader,
siteHeader,
SiteSubHeader,
VehicleBanner,
VinLookupMethods
},
mixins: [BaseFormMixin],
@ -123,3 +114,15 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.vehicle-lookup-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
</style>

169
src/layouts/vehicle-selection/vehicle-selection.vue
View file

@ -4,22 +4,16 @@
v-slot="{ meta }"
@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">
<siteHeader
class="mb-2 header"
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="iss-heritage-container-width">
<div class="vehicle-selection-container iss-heritage-content-container-width">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="siteSubHeader"
justification="center"
class="mt-4"
darkGraySubText />
<vehicleQuestion
ref="vehicleYearQuestion"
v-model="selectedYear"
@ -52,14 +46,9 @@
:updateValues="updateStyleValues"
validationRules="style-required"
inputId="styleQuestionField" />
<vehicleBanner
ref="banner"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="displayGeneric"
class="mt-5 mb-3" />
<alert
ref="AlertNoService"
v-if="displayNoServiceAlert"
ref="AlertNoService"
class="mt-5"
cmsWidgetName="AlertVehicleSelection"
alertClass="alert-danger"
@ -82,7 +71,6 @@
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import vehicleQuestion from '@/layouts/vehicle-selection/vehicle-question/vehicle-question.vue';
import alert from '@/ux-components/alert/alert.vue';
import { useMainStore } from '@/store';
@ -107,7 +95,6 @@ export default {
components: {
siteHeader,
siteSubHeader,
vehicleBanner,
siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
@ -150,9 +137,6 @@ export default {
};
},
computed: {
displayGeneric() {
return !this.selectedStyle;
}
},
watch: {
selectedYear(value) {
@ -188,7 +172,7 @@ export default {
this.selectedModel,
this.selectedStyle
).then((result) => {
this.displayNoServiceAlert = !result.data.canSafeliteService;
this.displayNoServiceAlert = !result.data.canSafeliteService;
});
}
},
@ -210,7 +194,7 @@ export default {
this.selectedModel,
this.selectedStyle
).then((result) => {
this.displayNoServiceAlert = !result.data.canSafeliteService;
this.displayNoServiceAlert = !result.data.canSafeliteService;
});
}
},
@ -223,94 +207,101 @@ export default {
},
navigateForward() {
this.mainStore.setVehicle().then(() => {
if (this.mainStore.isBailout) {
this.mainStore.setVehicle().then(
() => {
if (this.mainStore.isBailout) {
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
return;
}
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
(error) => {
// eslint-disable-next-line max-len
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, this.mainStore.vehicle.model, this.mainStore.vehicle.style, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
return;
}
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
(error) => {
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, this.mainStore.vehicle.model, this.mainStore.vehicle.style, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
});
);
},
async updateYearValues() {
return this.mainStore.getVehicleYears().then((response) => {
return response;
},
(error) => {
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(null, null, null, null, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
});
return this.mainStore.getVehicleYears().then(
(response) => response,
(error) => {
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(null, null, null, null, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
}
);
},
async updateMakeValues() {
return this.mainStore.getVehicleMakes().then((response) => {
return response;
},
(error) => {
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, null, null, null, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
});
return this.mainStore.getVehicleMakes().then(
(response) => response,
(error) => {
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, null, null, null, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
}
);
},
async updateModelValues() {
return this.mainStore.getVehicleModels().then((response) => {
return response;
},
(error) => {
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, null, null, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
});
return this.mainStore.getVehicleModels().then(
(response) => response,
(error) => {
// eslint-disable-next-line max-len
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, null, null, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
}
);
},
async updateStyleValues() {
return this.mainStore.getVehicleStyles().then((response) => {
return response;
},
(error) => {
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, this.mainStore.vehicle.model, null, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
});
return this.mainStore.getVehicleStyles().then(
(response) => response,
(error) => {
// eslint-disable-next-line max-len
this.mainStore.setBailout(bailoutMessage.vehicleYMMSLookupError(this.mainStore.vehicle.year, this.mainStore.vehicle.make, this.mainStore.vehicle.model, null, error));
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
this.$route
);
}
);
},
resetAlert() {
this.displayNoServiceAlert = false;
}
}
}
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.vehicle-selection-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.select-car-form {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.siteSubHeader {
margin-top: 1.5rem;
}
.subheader-secondary {
margin-top: 0.5rem;
padding: 0px;
}
</style>

34
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -4,21 +4,16 @@
v-slot="{ meta }"
@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">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="iss-heritage-container-width">
<div class="vin-lookup-container iss-heritage-content-container-width">
<div class="select-car-form rounded">
<vehicleBanner
class="mt-2 mb-4"
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="!carIdIsValid" />
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4"
subHeaderMarginClasses="mt-1" />
<vinLookupAlerts
class="mt-5"
@ -42,6 +37,7 @@
</div>
</Form>
</template>
<script>
// Import Supporting Files
import { computed } from 'vue';
@ -59,7 +55,6 @@ import { Form } from 'vee-validate';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-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 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 vinQuestion from '@/layouts/vin-lookup/vin-question/vin-question.vue';
@ -73,7 +68,6 @@ export default {
siteSubHeader,
// eslint-disable-next-line vue/no-reserved-component-names
Form,
vehicleBanner,
vinLocationInformation,
vinLookupAlerts,
vinQuestion
@ -149,9 +143,6 @@ export default {
return `!X!X!X!X!X!X!X!X!X!X!X${lastSixChars}`;
}
return '*****************';
},
carIdIsValid() {
return this.hasValidCarId();
}
},
watch: {
@ -311,3 +302,14 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.iss-heritage-container-width {
.vin-lookup-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
</style>

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

@ -4,14 +4,12 @@
v-slot="{ meta }"
@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">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="fade-on-route-transition">
<div class="justify-content-center">
<siteHeader cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<div class="iss-heritage-container-width">
<div class="welcome-page-container iss-heritage-content-container-width">
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
class="mt-4" />
@ -23,8 +21,7 @@
isRequired
disableAutoFill
:isDisabled="isPolicyHolderDisabled"
:validationRules="rules.policyNumber"
class="mt-5" />
:validationRules="rules.policyNumber" />
<textboxQuestion
ref="policyZip"
v-model="welcomePageModel.policyZipCode"
@ -144,9 +141,6 @@
</div>
</div>
</div>
<!-- Footer image component must have parent (usually container-fluid)
set to display: flex and height 100dvh or height 100% -->
<footerImage />
</div>
</Form>
</template>
@ -163,7 +157,6 @@ import textboxQuestion from '@/digital-components/textbox-question/textbox-quest
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import dropdownQuestion from '@/digital-components/dropdown-question/dropdown-question.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import footerImage from '@/iss-components/site-footer/footer-image/footer-image.vue';
// Supporting files
import {
@ -196,7 +189,6 @@ export default {
components: {
siteHeader,
siteSubHeader,
footerImage,
alert,
buttonQuestion,
continueModal,
@ -482,13 +474,22 @@ export default {
<style lang="scss" scoped>
form {
height: 100dvh;
.container-fluid {
display: flex;
flex-direction: column;
height: 100%;
}
}
.iss-heritage-container-width {
.welcome-page-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
@-moz-document url-prefix() {
// Temporary solution that prevents the Continue button from being hidden in Firefox
#welcomeFooter {

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

@ -127,6 +127,51 @@ body {
}
}
#app {
display: flex;
flex-direction: column;
height: 100dvh;
>form {
flex: 1 0 auto;
}
>.footer-menu-container {
flex: 0 0 auto;
}
@include media-breakpoint-up(xs) {
overflow: auto;
}
.iss-heritage-container-width {
margin-left: auto;
margin-right: auto;
@include media-breakpoint-up(xs) {
width: 100%;
}
@include media-breakpoint-up(md) {
width: 46.25rem; // 740px
}
@include media-breakpoint-up(xl) {
width: 63.75rem; // 1020px
}
}
.iss-heritage-content-container-width {
@include media-breakpoint-up(xs) {
width: 100%;
}
@include media-breakpoint-up(md) {
width: 58.33333333%;
}
}
}
:root {
--iss-loader-color: white;
}