CASH-185

CASH-185 added success message to display when user clicks checkbox

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>