From 66b464cf3a7d41429b4154ae59bdba7cd96cd918 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Wed, 16 Jul 2025 13:37:10 -0400
Subject: [PATCH] Refactor of get more shops button

---
 .../shop-question/shop-question-popup.vue     | 67 ++++++++-----------
 1 file changed, 27 insertions(+), 40 deletions(-)

diff --git a/src/layouts/service-location/shop-question/shop-question-popup.vue b/src/layouts/service-location/shop-question/shop-question-popup.vue
index 00254ff5b..8da621b86 100644
--- a/src/layouts/service-location/shop-question/shop-question-popup.vue
+++ b/src/layouts/service-location/shop-question/shop-question-popup.vue
@@ -68,7 +68,7 @@
                     linkType="text"
                     :text="showMoreShopsLinkText"
                     href="#!"
-                    @click-event="getNextShopsFromList(3)"
+                    @click-event="updateShopListWithNextShops()"
                     :aria-label="showMoreShopsLinkText" />
             </div>
         </div>
@@ -111,7 +111,7 @@ export default {
             newZipCode: this.zipCode,
             answers: [],
             shopListButton: shopListButton,
-            shopIndex: 0,
+            indexOfLastShopDisplayed: 0,
             localShopProviderData: this.shopProviderData, // Why does parent manage this sometimes, but not all of the time A: to prevent another call to get providers on initial load
             selectedProviderNumber: null, // Revisit this, maybe not too hard
             displayInvalidZipAlert: false, // part of big refactor of asyn calls
@@ -158,7 +158,7 @@ export default {
         displaySeeMoreLocationsLink() {
             if (!this.shopProviders.length)
                 return false;
-            return this.shopIndex < this.shopProviders.length;
+            return this.indexOfLastShopDisplayed < this.shopProviders.length;
         },
         
     },
@@ -166,29 +166,28 @@ export default {
         openModal() {
             this.$refs.shopQuestionModal.openModal();
         },
-        async getNextShopsFromList(numberToGet = 3) {
-            const logFirstShopsDisplayed = this.shopIndex == 0;
+        updateShopListWithNextShops(numberToGet = 3) {
+            //gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED; --This needs to actually fire on initial display, can never happen here
 
-            const shopIterator = (array, n) => {
-                const l = array.length;
-                return () => {
-                    const end = this.shopIndex + n;
-                    const part = array.slice(this.shopIndex, end);
-                    this.shopIndex = end < l ? end : this.shopProviders.length;
-                    return part;
-                };
-            };
+            const nextShopListAnswers = this.getNextShopAnswersFromList();
+            this.pushShopsDisplayedGAEvent(nextShopListAnswers);
 
+            nextShopListAnswers.forEach((shop) => {
+                this.answers.push(shop);
+            });
+        },
+        getNextShopAnswersFromList(numberOfShopsToGet = 3) {
             const toTitleCase = (str) => {
                 return str.replace(/\w\S*/g, function (txt) {
                     return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
                 });
             };
 
-            const nextShop = shopIterator(this.shopProviders, numberToGet);
+            const indexOfLastShopToReturn = this.indexOfLastShopDisplayed + numberOfShopsToGet;
+            const nextShopProvidersFromList = this.shopProviders.slice(this.indexOfLastShopDisplayed, indexOfLastShopToReturn);
+            this.indexOfLastShopDisplayed = indexOfLastShopToReturn < this.shopProviders.length ? indexOfLastShopToReturn : this.shopProviders.length;
 
-            // Map API result data
-            const mappedData = nextShop().map((shopProvider) => {
+            const nextShopAnswersFromList = nextShopProvidersFromList.map((shopProvider) => {
                 const streetAddress = toTitleCase(shopProvider.address.streetAddress);
                 const city = toTitleCase(shopProvider.address.city);
                 const state = shopProvider.address.state;
@@ -204,12 +203,10 @@ export default {
                 };
             });
 
-            var gaAction = this.GaActions.MORE_LOCATIONS_CLICKED;
-            if (logFirstShopsDisplayed) {
-                gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED;
-            }
-
-            var shops = mappedData.map((shop) => {
+            return nextShopAnswersFromList;
+        },
+        pushShopsDisplayedGAEvent(nextShopListAnswers) {
+            var shops = nextShopListAnswers.map((shop) => {
                 if (shop.value.length > 5 && shop.value.startsWith("00")) {
                     return shop.value.substring(1);
                 } else {
@@ -222,18 +219,7 @@ export default {
                 joinedShops = "no-shops";
             }
 
-            this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, gaAction, joinedShops, true);
-
-
-            if (this.answers.length === 0) {
-                this.answers = mappedData;
-            } else {
-                mappedData.forEach((shop) => {
-                    this.answers.push(shop);
-                });
-            }
-
-            this.scrollToPageBottom();
+            this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, this.GaActions.MORE_LOCATIONS_CLICKED, joinedShops, true);
         },
         onModalOpened() {
             const preSelectedIndex = this.shopProviders.findIndex(
@@ -241,9 +227,9 @@ export default {
             );
 
             if (preSelectedIndex > -1) {
-                this.shopIndex = Math.ceil((preSelectedIndex + 1) / 3) * 3;
+                this.indexOfLastShopDisplayed = Math.ceil((preSelectedIndex + 1) / 3) * 3;
             } else {
-                this.shopIndex = 3;
+                this.indexOfLastShopDisplayed = 3;
             }
 
             this.localShopProviderData = this.shopProviderData;
@@ -317,10 +303,10 @@ export default {
 
             // If not found, only show the first 3 shops
             if (selectedIndex === -1) {
-                this.shopIndex = 3;
+                this.indexOfLastShopDisplayed = 3;
             }
 
-            const sortedShops = this.getShopsByZip(zipCode, this.shopProviders, this.shopIndex);
+            const sortedShops = this.getShopsByZip(zipCode, this.shopProviders, this.indexOfLastShopDisplayed);
 
             const toTitleCase = (str) => {
                 return str.replace(/\w\S*/g, function (txt) {
@@ -344,13 +330,14 @@ export default {
                 };
             });
             this.answers = mappedData;
+            // I think we should call our new pushGA Event here with new mapped data
             if (
                 this.selectedProviderNumber &&
                 !this.answers.some((a) => String(a.value) === String(this.selectedProviderNumber))
             ) {
                 this.selectedProviderNumber = null;
             }
-            this.shopIndex = mappedData.length;
+            this.indexOfLastShopDisplayed = mappedData.length;
             this.displayNoShopsAlert = this.answers.length === 0;
         },
         resetModalButtonStyle() {