Merge pull request #2817 from Safelite/feature/CASH-1448

Feature/cash 1448

src/digital-components/modal/modal.vue

@@ -2,7 +2,7 @@
     <!-- Modal -->
     <div
         class="modal fade modal-component"
-        :class="modalId"
+        :class="[modalId, { 'recall-show': isRecal }]"
         v-on="{ 'hidden.bs.modal': onModalClosed, 'shown.bs.modal': onModalOpened }"
         :data-bs-backdrop="backdropSetting"
         :id="modalId"
@@ -11,7 +11,7 @@
         @keypress.enter="onEnter"
         aria-hidden="true">
         <!--Close modal when clicking other than close button-->
-        <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-dialog" :class="{ 'modal-dialog-centered': !isRecal }">
             <div class="modal-content">
                 <div class="modal-header mb-0 mt-6">
                     <label
@@ -71,6 +71,10 @@ export default {
         onModalClosedCallback: {
             type: Function,
         },
+        isRecal: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup() {
         const uuid = uuidv4();
@@ -195,6 +199,19 @@ export default {
         background-color: $white;
     }
     &.modal-component {
+        &.recall-show {
+            .modal-dialog {
+                transform: translateX(-50%);
+                left: 50%;
+                right: auto;
+                width: auto;
+                max-width: 600px;
+                @include media-breakpoint-up(md) {
+                    top: 10%;
+                }
+            }
+        }
+
         .modal-dialog {
             max-width: 767px;
             margin: 0 auto;

src/fmg-components/content-group-modal/content-group-modal.vue

@@ -3,7 +3,8 @@
         :ref="ModalName"
         :modalId="ModalName"
         :footerButtonText="ModalCloseButtonText"
-        @footer-button-event="footerButtonClick">
+        @footer-button-event="footerButtonClick"
+        :isRecal="isRecal">
         <div :class="[isRecal ? 'recal-modal' : '']">
             <img :src="ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
             <h5 class="mb-4" v-html="ModalHeadline"></h5>

src/layouts/payment-method/payment-method.vue

@@ -106,7 +106,8 @@
                     <contentGroupModal
                         ref="RecalModal"
                         cmsWidgetName="RecalModal"
-                        class="recal-modal" />
+                        class="recal-modal"
+                        isRecal />
                 </div>
             </div>
         </div>
@@ -932,15 +933,22 @@ export default {
         :deep(.modal-body) {
             display: flex;
             flex-direction: column;
+            overflow: visible !important;
+
+            p.subheader-text {
+                color: $red;
+                order: 1 !important;
+                margin-top: -2.25rem;
+            }
             h5 {
-                text-align: center;
-                order: 1;
+                text-align: left !important;
+                order: 2 !important;
             }
             p {
-                order: 3;
+                order: 4;
             }
             img {
-                order: 2;
+                order: 3 !important;
             }
         }
     }

src/layouts/quote/quote.vue

@@ -71,7 +71,7 @@
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
                     <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
-                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" isRecal />
+                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"