Merge pull request #1120 from Safelite/feature/kroell/INSR-8094

INSR-8094: Modals Part 1
2026-02-27 12:10:43 -05:00 · 2026-02-27 12:10:43 -05:00 · 7bb192999c
commit 7bb192999c
parent 6e10869016 bf93a57dce
13 changed files with 325 additions and 198 deletions
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@ -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;
+                }
            }
        }
    }
--- a/src/iss-components/content-group-modal/content-group-modal.vue
+++ b/src/iss-components/content-group-modal/content-group-modal.vue
@ -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;
                    }
--- a/src/iss-components/recal-modal/recal-modal.vue
+++ b/src/iss-components/recal-modal/recal-modal.vue
@ -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>
--- a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
+++ b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
@ -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>
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@ -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>
--- a/src/layouts/provider-preference/provider-preference.spec.js
+++ b/src/layouts/provider-preference/provider-preference.spec.js
@ -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 */
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@ -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();
        }
    }
 };
--- a/src/layouts/provider-preference/steering-modal/steering-modal.vue
+++ b/src/layouts/provider-preference/steering-modal/steering-modal.vue
@ -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%;
        }
    }
 }
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue
@ -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>
--- a/src/layouts/schedule-page/service-location/service-location.spec.js
+++ b/src/layouts/schedule-page/service-location/service-location.spec.js
@ -124,7 +124,7 @@ const mountOptions = {
            alert: true,
            textBlock: true,
            appointmentTypeQuestion: true,
-            contentGroupModal: true,
+            recalModal: true,
            siteFooter: true,
            siteHeader: true,
            siteSubHeader: true,
--- a/src/layouts/schedule-page/service-location/service-location.vue
+++ b/src/layouts/schedule-page/service-location/service-location.vue
@ -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'],
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@ -57,7 +57,7 @@
                cmsWidgetName="RearWiperModal" />
            <contentGroupModal
                ref="RecalModal"
-                cssModalHeadlineClass="text-center"
+                cssModalHeadlineClass="text-start"
                cmsWidgetName="RecalModal" />
        </div>
    </Form>
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@ -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