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

Merge pull request #1130 from Safelite/feature/humphries/INSR-8123

Browse source 
INSR-8123: Update some more modals
This commit is contained in:
AHumphriesSL 2026-03-05 10:32:40 -05:00 committed by GitHub
commit a03478cd3e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 224 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/constants/component-variants.js
View file

@ -9,7 +9,3 @@ export const dropdownVariants = Object.freeze({
primary: 'primary',
compact: 'compact'
});
export const modalPositions = Object.freeze({
center: 'center',
edge: 'edge'
});

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

@ -11,10 +11,7 @@
'hidden.bs.modal': onModalClosed,
'shown.bs.modal': onModalOpened
}">
<div class="modal-dialog"
:class="{
'modal-dialog-centered': modalPosition === modalPositions.center
}">
<div class="modal-dialog">
<div
class="modal-content"
role="dialog"
@ -55,7 +52,7 @@
v-if="displayCloseLink"
class="mt-4 mb-0"
linkType="text"
text="Close window"
:text="closeLinkText"
href="#!"
@click="closeModal" />
</div>
@ -68,7 +65,6 @@
import ButtonMain from '@/ux-components/button-main/button-main.vue';
import { Modal } from 'bootstrap';
import { useForm } from 'vee-validate';
import { modalPositions } from '@/constants/component-variants';
import textLink from '@/ux-components/text-link/text-link.vue';
export default {
@ -92,10 +88,6 @@ export default {
type: String,
default: 'success'
},
modalPosition: {
type: String,
default: modalPositions.center
},
allowInvalidSubmit: {
type: Boolean,
default: false
@ -111,6 +103,10 @@ export default {
displayCloseLink: {
type: Boolean,
default: false
},
closeLinkText: {
type: String,
default: 'Close window'
}
},
emits: ['footer-button-event', 'isModalOpened'],
@ -127,8 +123,7 @@ export default {
modalId,
meta,
validate,
resetForm,
modalPositions
resetForm
};
},
computed: {
@ -186,6 +181,7 @@ export default {
right: 0;
bottom: 0;
left: 0;
padding-right: 1rem;
h5,
strong,
.subheader-text {
@ -231,7 +227,8 @@ export default {
&.modal-component {
.modal-dialog {
display: flex;
max-width: 37.5rem;
width: 37.5rem;
max-width: unset;
min-height: auto;
.modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
@ -240,7 +237,7 @@ export default {
overflow: auto;
}
.modal-content {
margin: 1.5rem auto 0 auto;
margin: 0 auto;
.modal-body {
padding: 0 1.5rem 0 1.5rem;
.col {
@ -272,18 +269,10 @@ export default {
}
}
}
&.modal-dialog-centered {
.modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
border: 1px solid;
border-radius: 5px;
overflow: auto;
}
}
}
.modal-footer {
border-top: none;
padding: 10px 1.5rem 1.5rem 1.5rem;
padding: .625rem 1.5rem 1.5rem 1.5rem;
button {
margin: 0;
@ -303,6 +292,15 @@ export default {
transition: opacity 0.25s linear;
}
}
@include media-breakpoint-down(md) {
&.modal-component {
.modal-dialog {
width: auto;
max-width: unset;
margin: .625rem;
}
}
}
}
body {
.modal-backdrop {

4
src/iss-components/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap
View file

@ -8,10 +8,6 @@ Object {
"firstName": "Frederick",
"isModalOpened": false,
"lastName": "Taylor",
"modalPositions": Object {
"center": "center",
"edge": "edge",
},
"phoneNumber": "606-009-2943",
"rules": Object {
"emailAddress": "email-required|email-address-format",

63
src/iss-components/contact-details-drawer/contact-details-drawer.vue
View file

@ -1,15 +1,16 @@
<template>
<modal
:ref="modalName"
:modalPosition="modalPositions.center"
:headerText="headerText"
:footerButtonText="footerButtonText"
:onModalClosedCallback="resetFormValues"
:displayCloseLink="true"
:closeLinkText="closeLinkText"
class="contact-details-drawer"
@isModalOpened="setModalStatus"
@footerButtonEvent="clickFooterButtonEvent">
<template v-if="isModalOpened">
<span class="name-section-label">{{ nameSectionLabel }}</span>
<div class="name-section-label">{{ nameSectionLabel }}</div>
<div class="row form-group">
<textboxQuestion
class="col-lg-6"
@ -71,7 +72,6 @@ import { useMainStore } from '@/store';
import globalRules from '@/constants/global-rules.js';
import MaskaFormattedMasks from '@/constants/maska-masks';
import widgetFields from '@/constants/cms-widget-fields.js';
import { modalPositions } from '@/constants/component-variants';
export default {
name: 'contact-details-drawer',
@ -109,7 +109,6 @@ export default {
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
extension: `${globalRules.EXTENSION_FORMAT}`
},
modalPositions,
detailsSaved: false
};
},
@ -132,6 +131,9 @@ export default {
nameSectionLabel() {
return this.getCmsContent(this.widget.firstNameQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
},
closeLinkText() {
return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.BACK_BUTTON_TEXT);
}
},
methods: {
setModalStatus(isOpened) {
@ -203,5 +205,58 @@ export default {
margin-top: .625rem;
}
}
:deep(.modal-dialog) {
.modal-content {
padding: 1.25rem 1.25rem 0;
.modal-header {
padding: 0;
.modal-title {
padding: 0;
font-size: 1rem;
}
}
.modal-body {
padding: 0;
overflow: hidden;
}
.modal-footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
padding: 0rem;
button {
background-color: $heritage-blue-primary;
color: $white;
font-weight: 600;
width: 10.75rem;
margin-bottom: 1.25rem;
&:hover {
background-color: #00559e;
}
}
a {
margin: .5rem 0 0;
font-weight: $font-weight-normal;
}
@include media-breakpoint-down(lg) {
align-items: center;
flex-direction: column;
button {
width: 100%;
}
}
}
}
}
}
</style>

70
src/iss-components/continue-modal/continue-modal.vue
View file

@ -8,18 +8,23 @@
:headerText="modalHeaderText"
:footerButtonText="modalFooterText"
buttonVariant="primary"
:displayCloseButton="false"
@isModalOpened="setModalStatus"
@footerButtonEvent="startNewReferral">
<p class="mb-2 subheader-text text-center">
<p class="continue-subheader">
{{ modalSubHeaderText }}
</p>
<buttonMain
id="btnContinueReferral"
variant="success"
class="mt-2 w-100"
class="continue-btn w-100"
:buttonText="modalBodyText"
@click-event="continueReferral">
</buttonMain>
<div class="or-container">
<hr/>
<span>or</span>
</div>
</modal>
</div>
</transition>
@ -58,7 +63,7 @@ export default {
},
modalSubHeaderText() {
return this.getCmsContent('ContinueReferralModalWidget', 'SubheaderText')
.replaceAll('{custom:mmFound}', this.getMakeModelString);
.replaceAll('{custom:mmFound}', this.getMakeModelString.toUpperCase());
}
},
methods: {
@ -82,5 +87,64 @@ export default {
</script>
<style lang="scss" scoped>
.continue-modal-container {
.continue-subheader {
margin-bottom: 1.25rem;
}
.continue-btn {
background-color: #098649;
}
.or-container {
position: relative;
hr {
margin: 1.875rem 0 1.25rem;
}
span {
position: absolute;
top: -0.75rem;
left: 50%;
margin-left: -1.625rem;
padding: 0 1.125rem;
background-color: white;
}
}
:deep(.modal) {
.modal-dialog {
.modal-content {
.modal-header {
padding: 1.25rem 1rem .625rem;
.modal-title {
padding: 0;
}
}
.modal-body {
padding: 0rem 1rem;
}
.modal-footer {
padding: 0rem 1rem 1rem;
button {
background-color: $heritage-blue-primary;
color: $white;
font-weight: 600;
margin-bottom: 1.25rem;
&:hover {
background-color: #00559e;
}
}
}
}
@include media-breakpoint-down(md) {
margin: 1.625rem 1rem 0;
}
}
}
}
</style>

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

@ -124,13 +124,7 @@ export default {
justify-content: flex-start;
align-items: center;
flex-direction: column;
@include media-breakpoint-up(xs) {
padding-top: 5rem;
}
@include media-breakpoint-up(md) {
padding-top: 7rem;
}
padding: 2rem;
.modal-loader-content-container {
min-width: 15rem; // 240px

6
src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
View file

@ -9,7 +9,7 @@
:displayCloseButton="false"
:displayCloseLink="true">
<div class="form-test-invalid">
<h5 class="text-center mb-4">
<h5>
{{ ModalHeadline }}
</h5>
<div>
@ -158,6 +158,10 @@ export default {
<style lang="scss" scoped>
:deep(.modal) {
h5 {
font-size: 1.625rem;
margin-bottom: .625rem;
}
.modal-body {
color: #4d4e53;
}

1
src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -15,7 +15,6 @@
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
:footerButtonText="modalFooterText"
:modalPosition="'center'"
@footerButtonEvent="setZipCode">
<serviceZipQuestion
ref="serviceZipCodeQuestion"

38
src/layouts/schedule-page/service-location/shop-address/shop-address.vue
View file

@ -43,7 +43,8 @@
:headerText="modalHeaderText"
:onModalOpenedCallback="onModalOpened"
:footerButtonText="modalFooterText"
:modalPosition="modalPositions.center"
:closeLinkText="modalCloseText"
:displayCloseLink="true"
:allowInvalidSubmit="true"
@footerButtonEvent="updateSelectedProvider">
<googleMap
@ -88,6 +89,7 @@
class="d-inline-flex mt-0"
role="alert">{{ errorMessage }}</span>
</div>
<hr />
</modal>
</div>
</transition>
@ -111,7 +113,7 @@ import { toTitleCase } from '@/helpers/text-helper.js';
import { markRaw } from 'vue';
import { useMainStore } from '@/store';
import widgetFields from '@/constants/cms-widget-fields';
import { dropdownVariants, modalPositions } from '@/constants/component-variants';
import { dropdownVariants } from '@/constants/component-variants';
import errorMessages from '@/constants/error-messages';
import { defineRule } from 'vee-validate';
import { required } from '@/helpers/validation-rules';
@ -155,7 +157,6 @@ export default {
shopListButton: markRaw(shopListButton),
searchRadiusInMiles: '25',
nearbyShops: [],
modalPositions,
dropdownVariants,
renderServiceZip: true,
errorMessage: '',
@ -182,6 +183,9 @@ export default {
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT);
},
modalCloseText() {
return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
},
modalName() {
return this.modalWidgetName;
},
@ -411,5 +415,33 @@ export default {
margin-bottom: 1.25rem;
}
}
:deep(.modal-dialog) {
.modal-content {
hr {
margin: 1.375rem 0;
}
.modal-footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
button {
background-color: $green;
color: $white;
font-weight: 600;
width: 10.75rem;
&:hover {
background-color: darken($green, 10%);
}
}
a {
margin: .5rem 0 0;
}
}
}
}
}
</style>

4
src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
View file

@ -2,10 +2,6 @@
exports[`tpa-submit returns the initial data 1`] = `
Object {
"modalPositions": Object {
"center": "center",
"edge": "edge",
},
"sections": Array [],
"widget": Object {
"alertIncomplete": "AlertIncompleteWidget",

46
src/layouts/tpa-submit/tpa-submit.vue
View file

@ -35,19 +35,18 @@
<modal
ref="recalModal"
class="recal-modal"
:modalPosition="modalPositions.center"
:headerText="recalModalContent.headerText"
:footerButtonText="recalModalContent.footerButtonText"
@footerButtonEvent="closeRecalModal">
<div class="recal-modal-subheader">
{{ recalModalContent.subHeaderText }}
</div>
{{ recalModalContent.subHeaderText }}
</div>
<img
class="recal-modal-image"
:src="recalModalContent.image" />
class="recal-modal-image"
:src="recalModalContent.image" />
<div
class="recal-modal-body"
v-html="recalModalContent.bodyText"></div>
class="recal-modal-body"
v-html="recalModalContent.bodyText"></div>
</modal>
<hr />
<div id="serviceSummarySection">
@ -122,7 +121,6 @@ import {
import { submitWorkOrder } from '@/helpers/order-helper.js';
import bailoutMessage from '@/constants/bailoutMessage';
import submitType from '@/constants/submit-type';
import { modalPositions } from '@/constants/component-variants';
const VERIFYING_COVERAGE = 'Verifying coverage';
@ -159,8 +157,7 @@ export default {
alertRecalWarning: 'AlertRecalWarningWidget',
editShopLinkText: 'EditShopLinkTextWidget',
contactDetails: 'ContactDetailsSectionWidget'
},
modalPositions
}
};
},
computed: {
@ -345,7 +342,7 @@ export default {
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.iss-heritage-container-width {
.tpa-submit-container {
position: relative;
@ -392,7 +389,7 @@ export default {
margin-bottom: .625rem;
}
.modal.recal-modal .modal-dialog {
:deep(.modal.recal-modal .modal-dialog) {
.modal-header {
justify-content: start;
margin: 0rem;
@ -403,6 +400,7 @@ export default {
line-height: 1.25rem;
text-align: start;
justify-content: start;
padding-left: 0rem;
}
.btn-close {
display: none;
@ -419,7 +417,29 @@ export default {
color: $black;
}
.recal-modal-image {
margin: 1.25rem 0rem
width: 100%;
height: auto;
margin: 1.25rem 0rem;
@include media-breakpoint-up(sm) {
width: 16.5rem;
}
@include media-breakpoint-up(md) {
width: 23.5rem;
}
}
.modal-footer {
padding-top: 0;
button {
background-color: $green;
color: $white;
font-weight: 600;
&:hover {
background-color: darken($green, 10%);
}
}
}
}
}

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

@ -425,6 +425,8 @@ export default {
async loadReferralFromCookie() {
const issCookie = getISSCookie();
if (issCookie) {
this.$refs.continueModal.closeModal();
showIssLoadingModal(true);
const cookieReferral = {
referralNumber: issCookie.ReferralNumber,
responseDate: issCookie.ReferralDate,
@ -446,7 +448,7 @@ export default {
console.error(`Error on loading session from cookie ${error}`);
this.startNewReferral();
} finally {
this.$refs.continueModal.closeModal();
showIssLoadingModal(false);
}
}
},