From cbf0315c17376863b1ec474f758dc4c15735f8a8 Mon Sep 17 00:00:00 2001
From: AdamCaouetteSafelite <adam.caouette@safelite.com>
Date: Thu, 7 Aug 2025 14:09:33 -0400
Subject: [PATCH] split alerts into 2 sections so some are before the header
 and some appear after per Figma

---
 src/layouts/schedule/schedule.vue | 71 +++++++++++++++++--------------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index d91472cc5..dc65d11e5 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -5,48 +5,18 @@
         <div class="container page-container-grouped-styles">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <alert
-                        ref="alertMilitaryBaseZip"
-                        class="my-5"
-                        cmsWidgetName="AlertMilitaryBaseZipWidget"
-                        v-if="displayMilitaryZipAlert"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertMobileOnly"
-                        class="my-5"
-                        cmsWidgetName="AlertMobileOnlyWidget"
-                        v-if="displayServiceableMobileOnly"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertRecalNoMobile"
-                        class="my-5"
-                        cmsWidgetName="AlertRecalNoMobileWidget"
-                        v-if="displayRecalibrationWarning"
-                        @text-link-clicked="openModalAction"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertInshopOnly"
-                        class="my-5"
-                        cmsWidgetName="AlertInshopOnlyWidget"
-                        v-if="displayServiceableInshopOnly"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertNoShops"
-                        class="my-5"
-                        cmsWidgetName="AlertNoShopsWidget"
-                        v-if="displayNoShopsAlert"
-                        alertClass="alert-warning" />
                     <alert
                         ref="alertMobileFeeFree"
-                        class="my-5"
+                        class="mb-5"
                         cmsWidgetName="AlertMobileFeeFreeWidget"
                         v-if="showMobileFreeAlert"
                         alertClass="alert-success" />
+                    
                 </div>
             </div>
             <div class="row appointment-type">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader cmsWidgetName="ScheduleYourServiceWidget" class="my-5" />
+                    <funnelSubHeader cmsWidgetName="ScheduleYourServiceWidget" class="mb-5" />
                     <appointmentTypeQuestion
                         v-model="appointmentTypeFromAppointmentTypeQuestion"
                         v-show="isAppointmentTypeDisplayed"
@@ -62,6 +32,41 @@
                         labelBold="true" />
                 </div>
             </div>
+            <div class="row">
+                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                    <alert
+                        ref="alertMobileOnly"
+                        class="mb-5"
+                        cmsWidgetName="AlertMobileOnlyWidget"
+                        v-if="displayServiceableMobileOnly"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertRecalNoMobile"
+                        class="mb-5"
+                        cmsWidgetName="AlertRecalNoMobileWidget"
+                        v-if="displayRecalibrationWarning"
+                        @text-link-clicked="openModalAction"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertInshopOnly"
+                        class="mb-5"
+                        cmsWidgetName="AlertInshopOnlyWidget"
+                        v-if="displayServiceableInshopOnly"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertMilitaryBaseZip"
+                        class="mb-5"
+                        cmsWidgetName="AlertMilitaryBaseZipWidget"
+                        v-if="displayMilitaryZipAlert"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertNoShops"
+                        class="mb-5"
+                        cmsWidgetName="AlertNoShopsWidget"
+                        v-if="displayNoShopsAlert"
+                        alertClass="alert-warning" />
+                </div>
+            </div>
             <div
                 v-if="appointmentType && appointmentType === appointmentTypeStrings.MOBILE"
                 class="col-12 col-md-10 col-lg-8 col-xl-7">