commit before stash

src/layouts/service-location/service-location.vue

@@ -5,17 +5,11 @@
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
-            <div class="fade-on-route-transition position-relative">
             <siteHeader cmsWidgetName="SiteHeaderWidget" />
             <siteSubHeader
-                    id="sub-header"
                 cmsWidgetName="SiteSubHeaderWidget"
                 class="mt-5" />
-                <div class="select-car">
+            <div class="main-content-container">
-                    <div class="container-fluid pb-2">
-                        <div class="row px-3">
-                            <div class="col">
-                                <div class="select-car-form rounded">
                 <serviceZipModalQuestion
                     ref="serviceZipCodeQuestion"
                     v-model="serviceZipCodeQuestion"
@@ -28,6 +22,12 @@
                     class="my-5"
                     cmsWidgetName="AlertMilitaryBaseZipWidget"
                     alertClass="alert-warning" />
+                <alert
+                    v-if="displayServiceableMobileOnly"
+                    ref="alertMobileOnly"
+                    class="my-5"
+                    cmsWidgetName="AlertMobileOnlyWidget"
+                    alertClass="alert-warning" />
                 <buttonQuestion
                     v-model="selectedAppointmentType"
                     cmsWidgetName="ServiceTypeQuestionWidget"
@@ -37,7 +37,6 @@
                     isRequired
                     validationRules="selection-required"
                     class="service-location-button-question mb-1" />
-                                        <div class="select-car">
                 <siteFooter
                     ref="siteFooter"
                     class="mt-5"
@@ -47,12 +46,6 @@
                     @forwardClicked="forwardButtonAction" />
             </div>
         </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
     </Form>
 </template>
 <script>
@@ -164,8 +157,18 @@ export default {
             }
             return this.isGlassServiceableMobile;
         },
+        isServiceableInshop() {
+            if (this.isRecalibrationServiceableInshop !== null) {
+                return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
+            }
+
+            return this.isGlassServiceableInshop;
+        },
         displayMilitaryZipAlert() {
             return this.zipContainsMilitaryBase && this.isServiceableMobile;
+        },
+        displayServiceableMobileOnly() {
+            return this.isServiceableMobile && !this.isServiceableInshop;
         }
     },
     methods: {
@@ -214,18 +217,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$page-side-padding: 1.5rem;
 
 .page-container-grouped-styles {
     overflow: auto;
-}
+
-.modal-open {
+    .main-content-container {
-    .page-container-grouped-styles {
+        padding: 0 1.5rem !important;
-        overflow: hidden;
     }
 }
-#sub-header span {
+
-    color: $black;
-}
 .question-text {
     & > span {
         line-height: 1.5rem;
@@ -239,7 +240,6 @@ export default {
         line-height: 1.250rem;
     }
 }
-
 .choose-option{
     .button-question >div {
         &:first-of-type {