INSR-8123: Update some more modals

- Remove modalPosition related code now that all modals are centered
- Allow parent components to set text of the close link
- Updates styling for specific modals so that they match their
  Heritage counterparts

src/constants/component-variants.js

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

src/digital-components/modal/modal.vue

@@ -11,10 +11,7 @@
             'hidden.bs.modal': onModalClosed,
             'shown.bs.modal': onModalOpened
         }">
-        <div class="modal-dialog"
+        <div class="modal-dialog">
-            :class="{
-                'modal-dialog-centered': modalPosition === modalPositions.center
-            }">
             <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,
+            resetForm
-            modalPositions
         };
     },
     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 {

src/iss-components/contact-details-drawer/contact-details-drawer.vue

@@ -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>

src/iss-components/continue-modal/continue-modal.vue

@@ -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>

src/iss-components/loading-modal/loading-modal.vue

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

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

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

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

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

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

@@ -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>

src/layouts/tpa-submit/tpa-submit.vue

@@ -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 }}
+                            {{ recalModalContent.subHeaderText }}
-</div>
+                        </div>
                         <img
-class="recal-modal-image"
+                            class="recal-modal-image"
-:src="recalModalContent.image" />
+                            :src="recalModalContent.image" />
                         <div
-class="recal-modal-body"
+                            class="recal-modal-body"
-v-html="recalModalContent.bodyText"></div>
+                            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%);
+                }
+            }
         }
     }
 }

src/layouts/welcome-page/welcome-page.vue

@@ -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);
                 }
             }
         },