From c3538ce36e3ed9c2c3cd7e8cab7bb63a37ab7365 Mon Sep 17 00:00:00 2001
From: Johnny shultz <John.Shultz@safelite.com>
Date: Fri, 14 Mar 2025 16:13:21 -0400
Subject: [PATCH 1/2] CASH-185

CASH-185 added success message to display when user clicks checkbox
---
 .../time-slot-modal-question.vue              | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
index 40c3926ba..20b9322cb 100644
--- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
+++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
@@ -39,6 +39,13 @@
                     v-model="waitListRequested"
                     @click="waitListChecked" />
             </div>
+            <div v-if="waitListRequested"
+            class="mt-5 rounded waitlist-success"
+            ref="waitlistSuccessMessage"
+            >
+                <img :src="WaitListSuccessImage" class="success-image"/>
+                <span v-html="WaitListSuccessText" class="success-text"></span>
+            </div>
             <div
                 class="mt-5 mb-2 supplemental-information"
                 v-if="supplementalInformationBlock"
@@ -359,6 +366,12 @@ export default {
         displayWaitListFeature() {
             return this.displayWaitList;
         },
+        WaitListSuccessImage(){
+            return this.getCmsContent("WaitListSuccessWidget", "Image");
+        },
+        WaitListSuccessText(){
+            return this.getCmsContent("WaitListSuccessWidget", "BodyText");
+        },
     },
     methods: {
         openModal() {
@@ -528,11 +541,24 @@ export default {
         waitListChecked(event) {
             this.$emit("waitListRequested-emitted", event.target.checked);
         },
+        scrollToSuccessMessage() {
+            const successMessageElement = this.$refs.waitlistSuccessMessage;
+            if (successMessageElement) {
+                successMessageElement.scrollIntoView({ behavior: 'smooth' });
+            }
+        },
     },
     unmounted() {
         if (this.isModalOpened) this.closeModal();
     },
     watch: {
+        waitListRequested(newVal) {
+            if (newVal) {
+                this.$nextTick(() => {
+                    this.scrollToSuccessMessage();
+                });
+            }
+        },
         modelValue: {
             handler(newValue) {
                 this.handleChange(newValue);
@@ -583,10 +609,40 @@ export default {
         margin-bottom: -8px;
         .ui-checkbox {
             padding-left: 0px;
+            input{
+                border-radius: 4px;
+                box-shadow: 0px 1px 4px 0px #00000033;
+            }
         }
         .form-check-input {
             margin-left: 0px;
         }
     }
+    .waitlist-success {
+        background-color: #ECF5E9;
+        display: flex;
+        align-items: flex-start;
+        border: 1px solid #0C7E47;
+        border-radius: 5px;
+        font-size: $h5-font-size;
+        padding: 12px 16px;
+        margin-bottom: -8px;
+        height: 78px;
+        width:326px;
+        .success-text{
+            margin-left:8px;
+                strong{
+                    
+                    font-weight: 600;
+                    letter-spacing: 0%;
+                }
+        }
+        .success-image{
+            margin-top: 4.5px;
+            width: 16px;
+            height: 16px;
+            color:#0C7E47
+        }
+    }
 }
 </style>

From b15bf1be6f0ee2e0036010f83170e9ab90f9b790 Mon Sep 17 00:00:00 2001
From: Johnny shultz <John.Shultz@safelite.com>
Date: Fri, 14 Mar 2025 16:30:09 -0400
Subject: [PATCH 2/2] CASH-185

CASH-185 formatting
---
 .../time-slot-modal-question.vue              | 41 +++++++++----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
index 20b9322cb..c6d08069c 100644
--- a/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
+++ b/src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue
@@ -39,11 +39,11 @@
                     v-model="waitListRequested"
                     @click="waitListChecked" />
             </div>
-            <div v-if="waitListRequested"
-            class="mt-5 rounded waitlist-success"
-            ref="waitlistSuccessMessage"
-            >
-                <img :src="WaitListSuccessImage" class="success-image"/>
+            <div
+                v-if="waitListRequested"
+                class="mt-5 rounded waitlist-success"
+                ref="waitlistSuccessMessage">
+                <img :src="WaitListSuccessImage" class="success-image" />
                 <span v-html="WaitListSuccessText" class="success-text"></span>
             </div>
             <div
@@ -366,10 +366,10 @@ export default {
         displayWaitListFeature() {
             return this.displayWaitList;
         },
-        WaitListSuccessImage(){
+        WaitListSuccessImage() {
             return this.getCmsContent("WaitListSuccessWidget", "Image");
         },
-        WaitListSuccessText(){
+        WaitListSuccessText() {
             return this.getCmsContent("WaitListSuccessWidget", "BodyText");
         },
     },
@@ -544,7 +544,7 @@ export default {
         scrollToSuccessMessage() {
             const successMessageElement = this.$refs.waitlistSuccessMessage;
             if (successMessageElement) {
-                successMessageElement.scrollIntoView({ behavior: 'smooth' });
+                successMessageElement.scrollIntoView({ behavior: "smooth" });
             }
         },
     },
@@ -609,7 +609,7 @@ export default {
         margin-bottom: -8px;
         .ui-checkbox {
             padding-left: 0px;
-            input{
+            input {
                 border-radius: 4px;
                 box-shadow: 0px 1px 4px 0px #00000033;
             }
@@ -619,29 +619,28 @@ export default {
         }
     }
     .waitlist-success {
-        background-color: #ECF5E9;
+        background-color: #ecf5e9;
         display: flex;
         align-items: flex-start;
-        border: 1px solid #0C7E47;
+        border: 1px solid #0c7e47;
         border-radius: 5px;
         font-size: $h5-font-size;
         padding: 12px 16px;
         margin-bottom: -8px;
         height: 78px;
-        width:326px;
-        .success-text{
-            margin-left:8px;
-                strong{
-                    
-                    font-weight: 600;
-                    letter-spacing: 0%;
-                }
+        width: 326px;
+        .success-text {
+            margin-left: 8px;
+            strong {
+                font-weight: 600;
+                letter-spacing: 0%;
+            }
         }
-        .success-image{
+        .success-image {
             margin-top: 4.5px;
             width: 16px;
             height: 16px;
-            color:#0C7E47
+            color: #0c7e47;
         }
     }
 }