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

INSR-8094: Modals Part 1

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;
+                }
             }
         }
     }

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;
                     }

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>

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>

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>

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 */

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();
         }
     }
 };

src/layouts/provider-preference/steering-modal/steering-modal.vue

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

src/layouts/provider-preference/tpa-recal-modal/tpa-recal-modal.vue

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

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,

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'],

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>

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