Merge branch 'release/2025.03.27' into feature/CASH-152-ajc

src/experiment-components/donation-block.vue

@@ -12,7 +12,8 @@
                 </div>
                 <div>
                     <p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
-                    <p class="caption mb-0" v-html="DonationBodyText"></p>
+                    <span class="caption mb-0" v-html="DonationBodyText"></span>
+                    &nbsp;
                     <textLink
                         linkType="newWindowLink"
                         text="Learn more"
@@ -75,7 +76,7 @@
             </div>
             <div class="row">
                 <div class="col-12">
-                    <p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
+                    <p class="mt-0 mb-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
                 </div>
             </div>
         </form>

src/fmg-components/address-questions/address-questions.vue

@@ -124,10 +124,6 @@ export default {
             type: Boolean,
             default: false,
         },
-        isAddressFieldFocused: {
-            type: Boolean,
-            default: true,
-        },
     },
     data() {
         return {
@@ -229,9 +225,6 @@ export default {
             ).then(() => {
                 // When loaded, trigger the setup
                 this.initializeAutocomplete();
-                if (this.isAddressFieldFocused) {
-                    this.addressField1.focus();
-                }
             });
         },
         initializeAutocomplete() {

src/layouts/address-lookup/address-lookup.vue

@@ -19,8 +19,7 @@
                         ref="customerQuestions"
                         v-model="customerQuestions"
                         :validationRules="EmailOrSmsValidationRules"
-                        :isEmailOptional="IsEmailOptional"
+                        :isEmailOptional="IsEmailOptional" />
-                        :isAddressFieldFocused="IsAddressFieldFocused" />
                     <alert
                         ref="alertVinNotFound"
                         v-if="displayVinNotFoundAlert"
@@ -465,9 +464,6 @@ export default {
                 .replaceAll("{custom:vinYmmFound}", vinYmmFound)
                 .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
         },
-        IsAddressFieldFocused() {
-            return false;
-        },
     },
     watch: {
         customerQuestions: {

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -1,9 +1,6 @@
 <template>
     <div class="customer-questions">
-        <addressQuestions
+        <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
-            ref="addressQuestions"
-            v-model="customerModel.addressQuestions"
-            :isAddressFieldFocused="isAddressFieldFocused" />
         <div class="row mb-4">
             <div class="col">
                 <textboxQuestion
@@ -90,11 +87,6 @@ export default {
         },
         validationRules: String,
         isEmailOptional: Boolean,
-        isAddressFieldFocused: {
-            required: false,
-            type: Boolean,
-            default: true,
-        },
     },
     computed: {
         customerModel: {

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>