Merge pull request #2354 from Safelite/feature/CASH-185v2

CASH-185

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