WIP

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

@@ -66,8 +66,10 @@
                 modalWidgetName="MobileLocationModalWidget" />
             <shopQuestion
                 ref="shopQuestion"
+                v-show="selectedAppointmentType === 'Dropoff' || selectedAppointmentType === 'Inshop'"
                 :isDropoff="isDropoff"
                 :serviceZipCode="zipCode"
+                :selectedAppointmentType="selectedAppointmentType"
                 cmsWidgetName="ShopQuestionWidget" />
             <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
             <funnel-footer

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

@@ -33,19 +33,20 @@
 </template>
 
 <script>
+
+// Components
 import alert from "@/ux-components/alert/alert";
 import buttonQuestion from "@/digital-components/button-question/button-question";
 import shopListButton from "./shop-list-button/shop-list-button";
+import textLink from "@/ux-components/text-link/text-link";
 
 import { storeActions } from "@/constants/store-actions.js";
-import store from "@/store";
 
 // Supporting files
 import { defineRule } from "vee-validate";
 import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
-import textLink from "@/ux-components/text-link/text-link";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
@@ -65,6 +66,7 @@ export default {
         modelValue: String,
         isDropoff: Boolean,
         serviceZipCode: String,
+        selectedAppointmentType: String,
         cmsWidgetName: String,
         validationRules: String,
     },
@@ -140,11 +142,10 @@ export default {
             }
 
             await this.$nextTick();
-            window.scrollTo(0, document.body.scrollHeight);
+            
-
+            const container = document.getElementsByClassName("page-container-grouped-styles")[0];
-            // const shopQuestion = document.getElementsByClassName("shop-question")[0];
+            
-
+            container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });
-            // shopQuestion.scrollIntoView({ behavior: "smooth", block: "end", inline: "end"});
         },
     },
     watch: {
@@ -153,6 +154,15 @@ export default {
                 this.shops = await this.updateShopList();
             },
         },
+        selectedAppointmentType: {
+            async handler() {
+                await this.$nextTick();
+                
+                const container = document.getElementsByClassName("page-container-grouped-styles")[0];
+                console.log(container.scrollHeight + 200)
+                container.scrollTo({ top: container.scrollHeight, left: 0, behavior: "smooth" });               
+            }
+        }
     },
 };
 </script>
@@ -161,37 +171,15 @@ export default {
 .shop-question {
     margin-top: 1rem !important;
     text-align: center !important;
-    //height: fit-content !important;
 
     .button-question {
         .question-text {
             margin-top: 0.5rem !important;
         }
 
-        // .button-question-overflow {
-        //     height: 100% !important;
-
-        //     .overflow-scroll {
-        //         // Height will be determined by overall height of content above list
-        //         height: max-content !important;
-        //         overflow-x: hidden !important;
-        //         -webkit-overflow-scrolling: touch;
-        //     }
-        // }
     }
 }
 
-// .button-question-overflow {
-//     height: fit-content(100%) !important;
-
-//     .overflow-scroll {
-//         // Height will be determined by overall height of content above list
-//         height: inherit !important;
-//         overflow-x: scroll !important;
-//         -webkit-overflow-scrolling: touch;
-//     }
-// }
-
 .drop-off-alert {
     .alert-heading {
         text-align: left;
@@ -203,4 +191,5 @@ export default {
     padding-left: 1.5rem !important;
     padding-right: 0.5rem !important;
 }
+
 </style>