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

Merge branch 'develop' into feature/humphries/INSR-7760

Browse source
This commit is contained in:
Alex Humphries 2026-02-27 17:14:33 -05:00
commit 6503b45c8d
19 changed files with 368 additions and 204 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,7 @@ const errorMessages = Object.freeze({
PASSENGER_SIDE_OPTIONS_REQUIRED: 'Please select window',
WINDSHIELD_DAMAGE_TYPE_REQUIRED: 'Please select windshield damage',
WINDSHIELD_CHIP_COUNT_REQUIRED: 'Please select chip(s)',
WINDSHIELD_REPLACE_OPTIONS_REQUIRED: 'Please select windshield part',
WINDSHIELD_REPLACE_OPTIONS_REQUIRED: 'Select all windshield parts that need to be replaced',
REPLACE_OPTIONS_REQUIRED: 'Please select rear window type',
STREET_ADDRESS_REQUIRED: 'Street Address is required.',
CITY_REQUIRED: 'City is required.',

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

@ -13,20 +13,20 @@
}">
<div class="modal-dialog"
:class="{
'modal-dialog-edge': modalPosition === modalPositions.edge,
'modal-dialog-centered': modalPosition === modalPositions.center
}">
<div
class="modal-content"
role="dialog"
aria-modal="true">
<div class="modal-header mb-2 mt-2">
<div class="modal-header">
<span
v-if="headerText"
class="modal-title d-flex justify-content-center pb-0 w-100"
class="modal-title d-flex pb-0 w-100"
:innerHTML="headerText">
</span>
<button
v-if="displayCloseButton"
ref="closeButton"
type="button"
class="btn-close"
@ -34,22 +34,30 @@
@mousedown="closeModal"
@keypress.space="closeModal"></button>
</div>
<div class="modal-body ps-5 pe-5 pb-5 pt-1">
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer px-5 py-4">
<div class="modal-footer">
<buttonMain
v-if="displayFooterButton"
id="modalbtn"
ref="modalButtonMain"
:variant="buttonVariant"
class="w-100"
:buttonText="footerButtonText"
pushToGA
:variant="buttonVariant"
:class="[
(isButtonDisabled || isFooterButtonDisabled) &&
'form-test-invalid'
]"
@clickEvent="validateAndEmit" />
<textLink
v-if="displayCloseLink"
class="mt-4 mb-0"
linkType="text"
text="Close window"
href="#!"
@click="closeModal" />
</div>
</div>
</div>
@ -61,11 +69,13 @@ 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 {
name: 'modal',
components: {
ButtonMain
ButtonMain,
textLink
},
props: {
modalId: String,
@ -84,11 +94,23 @@ export default {
},
modalPosition: {
type: String,
default: modalPositions.edge
default: modalPositions.center
},
allowInvalidSubmit: {
type: Boolean,
default: false
},
displayFooterButton: {
type: Boolean,
default: true
},
displayCloseButton: {
type: Boolean,
default: true
},
displayCloseLink: {
type: Boolean,
default: false
}
},
emits: ['footer-button-event', 'isModalOpened'],
@ -159,8 +181,11 @@ export default {
@import "@/styles/ux-variables-svg-strings.scss";
.modal {
top: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
h5,
strong,
.subheader-text {
@ -178,10 +203,11 @@ export default {
}
.modal-title {
font-weight: 500;
font-weight: 400;
font-size: 1.25rem;
line-height: 2rem;
color: $black;
padding-left: 1.5rem;
}
}
.modal-footer {
@ -190,7 +216,7 @@ export default {
bottom: 0;
z-index: 5;
border-radius: 0;
background-color: $gray-100;
justify-content: center;
> .navigation-link {
color: $black;
@ -205,10 +231,18 @@ export default {
&.modal-component {
.modal-dialog {
display: flex;
max-width: 47.9375rem;
max-width: 37.5rem;
min-height: auto;
.modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
border: 1px solid;
border-radius: 5px;
overflow: auto;
}
.modal-content {
margin: 1.5rem auto 0 auto;
.modal-body {
padding: 0 1.5rem 0 1.5rem;
.col {
max-width: 100%;
}
@ -217,6 +251,11 @@ export default {
}
ul {
margin-bottom: 0;
padding-left: 20px;
}
li {
margin-bottom: 0.5rem;
line-height: 22px;
}
p {
&:last-child {
@ -233,51 +272,29 @@ export default {
}
}
}
&.modal-dialog-edge {
min-height: 100%;
margin: 0 auto;
align-items: flex-end;
@include media-breakpoint-up(md) {
align-items: inherit;
width: 23.5rem;
position: absolute;
top: 0;
right: 0;
transform: translate(100%);
}
.modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
border-radius: 1.5rem 1.5rem 0 0;
@include media-breakpoint-up(md) {
box-shadow: none;
border-radius: 0;
margin: 0 auto;
}
}
}
&.modal-dialog-centered {
.modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
border-radius: 1.5rem;
border: 1px solid;
border-radius: 5px;
overflow: auto;
}
.modal-header {
justify-content: center;
}
}
}
&.show .modal-dialog {
&.modal-dialog-edge {
@include media-breakpoint-up(md) {
transform: translateY(0);
}
}
}
.modal-footer {
border-top: none;
padding: 10px 1.5rem 1.5rem 1.5rem;
button {
margin: 0;
background-color: $white;
color: $blue;
border-color: $blue;
font-weight: 400;
&:hover {
background-color: #167cac;
color: $white;
}
}
}
}

10
src/iss-components/content-group-modal/content-group-modal.vue
View file

@ -6,14 +6,14 @@
@footerButtonEvent="footerButtonClick">
<img
:src="ModalImage"
class="mw-100 d-flex mx-auto mb-4"
class="mw-100 d-flex"
alt="" />
<h5
class="mb-4"
class="header-text"
:class="cssModalHeadlineClass"
v-html="ModalHeadline"></h5>
<p
class="fw-bold mb-2 subheader-text"
class="fw-bold subheader-text"
v-html="ModalSubheadertext"></p>
<p
class="mb-0"
@ -79,6 +79,10 @@ export default {
.modal-dialog {
.modal-content {
.modal-body {
.header-text {
margin-top: 2rem;
margin-bottom: 0.5rem;
}
.modal-sub-body {
color: $gray-600;
}

95
src/iss-components/recal-modal/recal-modal.vue Normal file
View file

@ -0,0 +1,95 @@
<template>
<div class="recal-modal-container">
<modal
ref="recalModal"
:footerButtonText="modalCloseButtonText"
@footerButtonEvent="footerButtonClick">
<h5
class="header-text"
v-html="modalHeaderText"></h5>
<img
:src="modalImage"
class="mw-100 d-flex"
alt="" />
<div v-html="modalBodyText" class="recal-modal-body"></div>
</modal>
</div>
</template>
<script>
import modal from '@/digital-components/modal/modal.vue';
export default {
name: 'recal-modal',
components: {
modal
},
props: {
cmsWidgetName: {
type: String,
default: 'RecalModal'
}
},
computed: {
modalBodyText() {
return this.getCmsContent(this.cmsWidgetName, 'BodyText').replaceAll('{custom:vehicleMake}', this.vehicleMake);
},
modalHeaderText() {
return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
},
modalImage() {
return this.getCmsContent(this.cmsWidgetName, 'Image');
},
modalCloseButtonText() {
return this.getCmsContent(this.cmsWidgetName, 'FooterText');
},
vehicleMake() {
return this.mainStore.order.vehicle.make.toUpperCase();
}
},
methods: {
openModal() {
this.$refs.recalModal.openModal();
},
footerButtonClick() {
this.$refs.recalModal.closeModal();
},
}
};
</script>
<style lang="scss" scoped>
:deep(.modal) {
&.modal-component {
.modal-dialog {
.modal-content {
.modal-body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
}
.modal-footer {
button {
&:hover {
background-color: $white;
color: #167cac;
}
}
}
}
.recal-modal-body {
padding: 10px 0 10px 0;
p:first-child {
margin-bottom: 10px;
}
p {
strong {
font-weight: 600;
color: $black;
}
}
}
}
</style>

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

@ -21,9 +21,9 @@
'form-test-invalid': (disableForwardAction || isForwardActionDisabled),
'hide-button': isForwardButtonHidden
}"
:aria-disabled="disableForwardAction || isForwardActionDisabled"
:isDisabled="disableForwardAction || isForwardActionDisabled"
:isDisabled="disableForwardAction || isForwardActionDisabled || isForwardButtonHidden"
data-test-id="site-footer-main-button"
buttonType="submit"
@clickEvent="buttonClick" />
</div>
<div

34
src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
View file

@ -6,18 +6,25 @@
<modal
ref="cancelClaimModal"
:headerText="modalHeaderText"
:footerButtonText="modalFooterText"
buttonVariant="link"
@isModalOpened="setModalStatus"
@footerButtonEvent="cancelClaimConfirmation">
:displayFooterButton="false">
<div v-html="modalBodyText"></div>
<buttonMain
id="btnContinueReferral"
variant="success"
:buttonText="modalBodyText2"
class="mt-4 w-100"
class="mt-5 w-100"
@clickEvent="returnToClaim">
</buttonMain>
<div class="text-center mt-5">
<textLink
class="cancel-link"
linkType="text"
text="No, I want to cancel"
href="#!"
@clickEvent="cancelClaimConfirmation">
</textLink>
</div>
</modal>
</div>
</transition>
@ -26,12 +33,14 @@
<script>
import modal from '@/digital-components/modal/modal.vue';
import ButtonMain from '@/ux-components/button-main/button-main.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
export default {
name: 'cancel-claim-modal',
components: {
ButtonMain,
modal
modal,
textLink
},
emits: ['cancel-claim-confirmation', 'return-to-claim'],
data() {
@ -74,5 +83,18 @@ export default {
</script>
<style lang="scss" scoped>
:deep(.modal) {
.modal-title {
margin-top: 1rem;
}
.cancel-link {
text-decoration: underline;
}
.modal-footer {
padding-bottom: 1rem;
}
.modal-body {
color: #4d4e53;
}
}
</style>

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

@ -10,7 +10,7 @@
cmsWidgetName="SiteHeaderWidget" />
</div>
<div class="iss-heritage-container-width">
<div v-if="!isPageLoading"
<div v-show="!isPageLoading"
class="coverage-statement-container iss-heritage-content-container-width">
<h5
ref="siteSubHeader"
@ -101,9 +101,8 @@
</div>
</div>
</div>
<contentGroupModal
<recalModal
:ref="RECAL_MODAL_REF_NAME"
cssModalHeadlineClass="text-center"
cmsWidgetName="RecalModal" />
<cancelClaimModal
:ref="CANCEL_CLAIM_REF_NAME"
@ -116,13 +115,14 @@
// Import Component
import { Form } from 'vee-validate';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import cancelClaimModal from '@/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import textLink from '@/ux-components/text-link/text-link.vue';
import buttonMain from '@/ux-components/button-main/button-main.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import afterpayModalBanner from '@/layouts/coverage-statement/afterpay-modal-banner/afterpay-modal-banner.vue';
import recalModal from '@/iss-components/recal-modal/recal-modal.vue';
// Import Supporting Files
import {
fetchCmsContentForPage,
@ -152,13 +152,13 @@ export default {
components: {
siteHeader,
Form,
contentGroupModal,
buttonMain,
textBlock,
textLink,
siteFooter,
cancelClaimModal,
afterpayModalBanner
afterpayModalBanner,
recalModal
},
mixins: [baseFormMixin, vehicleQuestionsMixin],
async beforeRouteEnter(to, from, next) {
@ -622,8 +622,4 @@ export default {
}
}
}
.modal {
overflow: hidden;
}
</style>

5
src/layouts/provider-preference/provider-preference.spec.js
View file

@ -2,7 +2,7 @@ import ProviderPreference from '@/layouts/provider-preference/provider-preferenc
import { shallowMount } from '@vue/test-utils';
import settleAllPromises from '@/helpers/layout-helper.js';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
import { getMountOptions } from '@/helpers/unit-test-helper.js';
import { useMainStore } from '@/store';
import navigationScenarios from '@/router/router-constants/navigation-scenarios';
@ -13,7 +13,8 @@ jest.mock('@/helpers/layout-helper.js', () => jest.fn());
// Mock fetchCmsContentForPage
jest.mock('@/helpers/cms-content-helper', () => ({
fetchCmsContentForPage: jest.fn(),
setupModalLinks: jest.fn()
setupModalLinks: jest.fn(),
processIfStatements: jest.fn()
}));
/** @ignore */

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

@ -58,11 +58,11 @@
// Import Supporting Files
import {
fetchCmsContentForPage,
processIfStatements,
setupModalLinks
} from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
import errorMessages from '@/constants/error-messages';
import buttonQuestion from '@/digital-components/button-question/button-question.vue';
import showIssLoadingModal from '@/helpers/loading-modal-helper';
import bailoutMessage from '@/constants/bailoutMessage';
import baseFormMixin from '@/mixins/base-form-mixin';
@ -133,26 +133,14 @@ export default {
return this.getCmsContent('ScheduleWithSafeliteText', 'BodyText');
},
scheduleWithOtherText() {
return this.getCmsContent('ScheduleWithOtherText', 'BodyText');
const text = this.getCmsContent('ScheduleWithOtherText', 'BodyText');
return processIfStatements(text, 'custom', this.getStateSpecificText);
}
},
mounted() {
setupModalLinks(this);
},
methods: {
getHeaderTextFromCms(cmsWidgetName) {
const headerText = this.getCmsContent(cmsWidgetName, 'HeaderText');
return headerText?.replace(
'{custom:SafeliteLogo}',
"<span class='safeliteLogo'></span>"
);
},
getSubheaderTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, 'SubheaderText');
},
getBodyTextFromCms(cmsWidgetName) {
return this.getCmsContent(cmsWidgetName, 'BodyText');
},
arePagePrerequisiteValid() {
return true;
},
@ -191,6 +179,9 @@ export default {
},
openStateSteeringModal() {
this.$refs[STEERING_MODAL_REF_NAME].openModal();
},
getStateSpecificText(value) {
return this.mainStore.order.customer.address.state?.toLowerCase() === value?.toLowerCase();
}
}
};

62
src/layouts/provider-preference/steering-modal/steering-modal.vue
View file

@ -1,21 +1,24 @@
<template>
<modal
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
@footerButtonEvent="footerButtonClick">
<h5 class="text-center mb-4">
{{ ModalHeadline }}
</h5>
<div>
<div
class="mb-4"
v-html="ModalBodyText"></div>
<div
v-if="ModalSubBodyText"
v-html="ModalSubBodyText"></div>
</div>
</modal>
<div class="steering-modal-container">
<modal
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
@footerButtonEvent="footerButtonClick">
<h5 class="text-center mb-4 headline-text">
{{ ModalHeadline }}
</h5>
<div>
<div
class="mb-4"
v-html="ModalBodyText"></div>
<div
class="mb-4"
v-if="ModalSubBodyText"
v-html="ModalSubBodyText"></div>
</div>
</modal>
</div>
</template>
<script>
@ -74,24 +77,13 @@ export default {
</script>
<style lang="scss" scoped>
.modal {
&.modal-component {
.modal-dialog {
.modal-content {
.modal-body {
.modal-sub-body {
color: $gray-600;
}
ul {
margin-bottom: 0;
}
p {
&:last-child {
margin-bottom: 0;
}
}
}
}
:deep(.modal) {
.modal-footer {
justify-content: center;
button {
background-color: #167cac;
color: $white;
width: 71%;
}
}
}

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

@ -1,53 +1,58 @@
<template>
<modal
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
:isButtonDisabled="isButtonDisabled"
@footerButtonEvent="footerButtonClick">
<div class="form-test-invalid">
<h5 class="text-center mb-4">
{{ ModalHeadline }}
</h5>
<div>
<div
class="mb-4"
v-html="ModalBodyText"></div>
<tpaRecalToggle
class="mb-5"
cmsWidgetName="TPARecalModalToggle" />
<buttonQuestion
ref="tpaRecalQuestion"
v-model="tpaRecalAnswer"
class="radioQuestion safelite-or-tpa-question windshield-chip-count-question mb-4"
:cmsWidgetName="buttonCmsWidgetName"
:questionText="tpaRecalQuestionText"
:answers="tpaRecalAnswersFromCms"
groupName="tpaRecalQuestion"
buttonID="tpaRecalQuestion"
buttonTypeString="listButtonHorizontal"
isRequired></buttonQuestion>
<checkBox
v-if="showAcknowledgementCheckbox"
ref="tpaAcknowledgement"
v-model="acknowledged"
class="mb-2"
:class="showAcknowledgementError && ' has-error'"
:validationRules="rules.optionRequired"
checkboxName="tpaAcknowledgement"
buttonID="tpaAcknowledgement"
:tabIndex="0"
:checkboxLabel="ModalSubBodyText"
:screenReaderOnlyText="ModalSubBodyText"
isRequired />
<div
v-if="showAcknowledgementError || showNoSelectionError"
class="row form-test-error mt-1">
<p>{{ errorMessage }}</p>
<div class="tpa-recal-modal-container">
<modal
:ref="ModalName"
:modalId="ModalName"
:footerButtonText="ModalCloseButtonText"
:isButtonDisabled="isButtonDisabled"
@footerButtonEvent="footerButtonClick"
:displayCloseButton="false"
:displayCloseLink="true">
<div class="form-test-invalid">
<h5 class="text-center mb-4">
{{ ModalHeadline }}
</h5>
<div>
<div
class="mb-4"
v-html="ModalBodyText"></div>
<tpaRecalToggle
class="mb-5"
cmsWidgetName="TPARecalModalToggle" />
<buttonQuestion
ref="tpaRecalQuestion"
v-model="tpaRecalAnswer"
class="tpa-recal-question"
:cmsWidgetName="buttonCmsWidgetName"
:questionText="tpaRecalQuestionText"
:answers="tpaRecalAnswersFromCms"
groupName="tpaRecalQuestion"
buttonID="tpaRecalQuestion"
buttonTypeString="listButtonHorizontal"
isRequired>
</buttonQuestion>
<checkBox
v-if="showAcknowledgementCheckbox"
ref="tpaAcknowledgement"
v-model="acknowledged"
class="mb-2 mt-4"
:class="showAcknowledgementError && ' has-error'"
:validationRules="rules.optionRequired"
checkboxName="tpaAcknowledgement"
buttonID="tpaAcknowledgement"
:tabIndex="0"
:checkboxLabel="ModalSubBodyText"
:screenReaderOnlyText="ModalSubBodyText"
isRequired />
<div
v-if="showAcknowledgementError || showNoSelectionError"
class="row form-test-error mt-1">
<p>{{ errorMessage }}</p>
</div>
</div>
</div>
</div>
</modal>
</modal>
</div>
</template>
<script>
@ -152,39 +157,44 @@ export default {
</script>
<style lang="scss" scoped>
.modal {
&.modal-component {
.modal-dialog {
.modal-content {
.modal-body {
.modal-sub-body {
color: $gray-600;
}
ul {
margin-bottom: 0;
}
p {
&:last-child {
margin-bottom: 0;
}
margin-bottom: .5rem;
}
}
:deep(.modal) {
.modal-body {
color: #4d4e53;
}
.modal-footer {
padding-top: 22px;
button {
background-color: $green;
color: $white;
font-weight: $font-weight-bold;
}
}
.tpa-recal-question > div:first-of-type {
margin-bottom: 20px;
}
.button-question {
fieldset {
box-shadow: 0px 2px 5px -5px rgba(0, 0, 0, 0.25);
}
}
.list-button-horizontal {
&.selected {
input {
background-color: $background-color-selected;
}
}
}
.safelite-or-tpa-question {
:deep(.question-text) {
span {
.form-check {
p {
font-size: 1rem;
}
.form-check-input:checked {
+ label p {
font-size: 1rem;
color: #4d4e53;
font-weight: 500;
}
}
}
}
.form-test-error {
p {
font-weight: 500;
}
}
</style>

2
src/layouts/schedule-page/service-location/service-location.spec.js
View file

@ -124,7 +124,7 @@ const mountOptions = {
alert: true,
textBlock: true,
appointmentTypeQuestion: true,
contentGroupModal: true,
recalModal: true,
siteFooter: true,
siteHeader: true,
siteSubHeader: true,

9
src/layouts/schedule-page/service-location/service-location.vue
View file

@ -117,9 +117,8 @@
cmsWidgetName="MobileFeeDisclaimerWidget"
typeStyle="disclaimer" />
</div>
<contentGroupModal
<recalModal
:ref="RECAL_MODAL_REF_NAME"
cssModalHeadlineClass="text-center"
cmsWidgetName="RecalModal" />
</div>
</template>
@ -140,10 +139,10 @@ import alert from '@/ux-components/alert/alert.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import appointmentTypeQuestion from '@/layouts/schedule-page/service-location/appointment-type-question/appointment-type-question.vue';
import baseFormMixin from '@/mixins/base-form-mixin';
import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import shopAddress from '@/layouts/schedule-page/service-location/shop-address/shop-address.vue';
import serviceZipQuestion from '@/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue';
import widgetFields from '@/constants/cms-widget-fields';
import recalModal from '@/iss-components/recal-modal/recal-modal.vue';
const RECAL_MODAL_REF_NAME = 'RecalModal';
@ -153,9 +152,9 @@ export default {
alert,
textBlock,
appointmentTypeQuestion,
contentGroupModal,
shopAddress,
serviceZipQuestion
serviceZipQuestion,
recalModal
},
mixins: [baseFormMixin],
emits: ['appointment-type-changed', 'city-updated', 'clear-mobile-data', 'in-shop-zip-updated', 'mobile-zip-updated', 'provider-changed'],

2
src/layouts/service-packages/service-packages.vue
View file

@ -57,7 +57,7 @@
cmsWidgetName="RearWiperModal" />
<contentGroupModal
ref="RecalModal"
cssModalHeadlineClass="text-center"
cssModalHeadlineClass="text-start"
cmsWidgetName="RecalModal" />
</div>
</Form>

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

@ -46,7 +46,8 @@
class="my-5"
cmsWidgetName="HasReplacementConflict"
alertClass="alert-danger"
:isDismissible="false" />
:isDismissible="false"
:isCollapsible="true" />
</div>
</div>
<div class="justify-content-center">

3
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -34,7 +34,8 @@
class="mt-5"
cmsWidgetName="SplitSingleConflict"
alertClass="alert-danger"
:isDismissible="false" />
:isDismissible="false"
:isCollapsible="true" />
</div>
</template>

2
src/styles/ux-variables.scss
View file

@ -221,7 +221,7 @@ $alert-red-color: $red;
//Modal animation
// This affects all [Bootstrap] modals
$modal-fade-transform: translate(0, 100%);
$modal-fade-transform: translate(0, -25%);
$modal-backdrop-opacity: 0;
//Disable default !important behavior

33
src/ux-components/button-main/button-main.spec.js
View file

@ -192,4 +192,37 @@ describe('buttonMain.vue', () => {
// Expect
expect(spy).not.toHaveBeenCalled();
});
describe('Button Types', () => {
it('Should set button type to submit', async () => {
// Act
const wrapper = shallowMount(
buttonMain,
setupMocks({
propsData: {
buttonType: 'submit'
}
})
);
// Assert
const button = wrapper.find('button');
// Expect
expect(button.attributes('type')).toEqual('submit');
});
it('Should default button type to button', async () => {
// Act
const wrapper = shallowMount(
buttonMain,
setupMocks()
);
// Assert
const button = wrapper.find('button');
// Expect
expect(button.attributes('type')).toEqual('button');
});
});
});

4
src/ux-components/button-main/button-main.vue
View file

@ -3,6 +3,7 @@
:aria-disabled="isDisabled"
class="btn d-flex align-items-center justify-content-center delay"
:class="[getVariant, `btn-${size}`, canOverride ? 'btn-override' : '']"
:type="buttonType"
@click="clicked">
<span class="m-0">{{ buttonText }}</span>
</button>
@ -22,7 +23,8 @@ export default {
isOutline: Boolean,
pushToGA: Boolean,
canOverride: { type: Boolean, required: false, default: true },
preventDefaultOnClick: { type: Boolean, required: false, default: false }
preventDefaultOnClick: { type: Boolean, required: false, default: false },
buttonType: { type: String, required: false, default: 'button', validator: (val) => ['button', 'submit', 'reset'].includes(val) }
},
emits: ['click-event'],
computed: {