From 32d90ba74dc08b8db566b9a5a7b05c4754c37447 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 14 Apr 2023 07:44:17 -0400
Subject: [PATCH] WIP

---
 .../shop-list-button/shop-list-button.vue     |  62 ++++++++-
 .../shop-question/shop-question.vue           | 120 +++++++-----------
 src/store/index.js                            |   2 +-
 3 files changed, 102 insertions(+), 82 deletions(-)

diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index 898194951..2fa1b1392 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -8,10 +8,14 @@
             class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
             <div class="row-one">
                 <span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span>
-                <span class="m-0 button-label-sub-copy" :class="textPosition">{{ buttonLabelSubCopy }}</span>
-                <div class="availability-indicator" :class="availability === 'high' ? 'green' : 'red'">
-                    <span class="m-0 button-auxillary-copy" >{{ buttonAuxillaryCopy }}</span>
-                </div> 
+                <span class="m-0 button-label-sub-copy" :class="textPosition">{{
+                    buttonLabelSubCopy
+                }}</span>
+                <div
+                    class="availability-indicator"
+                    :class="availability === 'high' ? 'green' : 'red'">
+                    <span class="m-0 button-auxillary-copy">{{ buttonAuxillaryCopy }}</span>
+                </div>
             </div>
             <span
                 v-if="buttonBodyCopy"
@@ -118,4 +122,54 @@ export default {
         }
     }
 }
+.button-content {
+    .row-one {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.25rem !important;
+
+        .button-label-copy {
+            flex-grow: 0;
+            line-height: 1.5rem;
+            font-weight: 500;
+        }
+
+        .button-label-sub-copy {
+            flex-grow: 1;
+            line-height: 1.25rem !important;
+            font-weight: 400;
+            font-size: 0.75rem;
+            color: #727676;
+            padding-left: 0.25rem;
+        }
+
+        .availability-indicator {
+            display: none;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0.125rem 1.5rem;
+            gap: 0.25rem;
+            background: #e3f2ea;
+            border-radius: 4.5rem;
+
+            .button-auxillary-copy {
+                justify-content: right;
+                line-height: 1.25rem !important;
+                font-weight: 400;
+                font-size: 0.75rem;
+            }
+
+            .green {
+                color: #006a36;
+                background: #e3f2ea;
+            }
+
+            .red {
+                color: #ac160b;
+                background: #e3f2ea;
+            }
+        }
+    }
+}
 </style>
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index c8066eb2f..5d6eaba7f 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -12,7 +12,6 @@
                 buttonTypeString="shopListButton"
                 :buttonTypeObject="shopListButton"
                 class="radioQuestion"
-                isOverflowScrollable
                 :questionText="questionText"
                 :answers="answers"
                 groupName="ChooseShop"
@@ -21,6 +20,7 @@
                 isRequired />
             <textLink
                 ref="showMoreShopsLink"
+                class="show-more-shops-link"
                 id="showMoreShopsId"
                 cmsWidgetName="ShowMoreShopsLinkWidget"
                 linkType="text"
@@ -45,7 +45,7 @@ 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';
+import textLink from "@/ux-components/text-link/text-link";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
 
@@ -108,16 +108,16 @@ export default {
             });
             return result.data;
         },
-        shopIterator(array, n){
-            let l = array.length; 
+        shopIterator(array, n) {
+            let l = array.length;
             return () => {
                 var end = this.shopIndex + n;
                 var part = array.slice(this.shopIndex, end);
                 this.shopIndex = end < l ? end : this.shopIndex.length - 1;
                 return part;
-            };  
+            };
         },
-        getNextShopsFromList() {
+        async getNextShopsFromList() {
             const nextShop = this.shopIterator(this.shops, 3);
 
             // Map API result data
@@ -134,12 +134,18 @@ export default {
             if (this.answers.length === 0) {
                 this.answers = mappedData;
             } else {
-                mappedData.forEach(shop => {
+                mappedData.forEach((shop) => {
                     this.answers.push(shop);
-                })
+                });
             }
-            
-        }
+
+            await this.$nextTick();
+            window.scrollTo(0,document.body.scrollHeight);
+
+            // const shopQuestion = document.getElementsByClassName("shop-question")[0];
+
+            // shopQuestion.scrollIntoView({ behavior: "smooth", block: "end", inline: "end"});
+        },
     },
     watch: {
         serviceZipCode: {
@@ -154,78 +160,38 @@ export default {
 <style lang="scss">
 .shop-question {
     margin-top: 1rem !important;
+    text-align: center !important;
+    //height: fit-content !important;
 
-    .question-text {
-        margin-top: 0.5rem !important;
-    }
-
-    .button-content {
-        .row-one {
-            display: flex;
-            align-items: center;
-            margin-bottom: 0.25rem !important;
-
-            .button-label-copy {
-                flex-grow: 0; 
-                line-height: 1.5rem;
-                font-weight: 500;       
-            }
-
-            .button-label-sub-copy {
-                flex-grow: 1;           
-                line-height: 1.25rem !important;
-                font-weight: 400;      
-                font-size: 0.75rem;
-                color: #727676;
-                padding-left: 0.25rem;
-            }
-
-            .availability-indicator {
-                display: none;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                padding: 0.125rem 1.5rem;
-                gap: 0.25rem;
-                background: #E3F2EA;
-                border-radius: 4.5rem;
-
-                .button-auxillary-copy {
-                    justify-content: right;
-                    line-height: 1.25rem !important;
-                    font-weight: 400;      
-                    font-size: 0.75rem;
-                }
-
-                .green {
-                    color: #006A36;
-                    background: #E3F2EA;
-                }
-
-                .red {
-                    color: #AC160B;
-                    background: #E3F2EA;
-                }
-
-
-            }
-
+    .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: 60vh; //calc(100vh - 274px);
-
-    //     // .overflow-scroll {
-    //     //     // Height will be determined by overall height of content above list
-    //     //     height: calc(100% - 314px);
-    //     //     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;
diff --git a/src/store/index.js b/src/store/index.js
index 2fafa9214..6cef110ec 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -941,7 +941,7 @@ export const actions = {
         return globalMethods.callMockHttpClient({
             method: endpoints.GetProviderLocations.method,
             //TODO: Remove Mocky Endpoints
-            endpoint: "https://run.mocky.io/v3/062bfed7-29a7-4001-b5e8-6135ec10494f",
+            endpoint: "https://run.mocky.io/v3/abf2fa63-8287-4e46-b169-f5bec65c8dff",
         });
     },