From 8889e5935283c52b3b19847a353fc9cda59e7461 Mon Sep 17 00:00:00 2001
From: Scott Kiener <scott.kiener@safelite.com>
Date: Thu, 17 Jul 2025 13:25:36 -0400
Subject: [PATCH] Make answers a computed

---
 .../shop-question/shop-question-popup.vue     | 59 ++++++++-----------
 1 file changed, 24 insertions(+), 35 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 b7683ba18..914721408 100644
--- a/src/layouts/service-location/shop-question/shop-question-popup.vue
+++ b/src/layouts/service-location/shop-question/shop-question-popup.vue
@@ -91,10 +91,7 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
 import {
-    getPricedMobileFeePart,
-    getPricedRecycleFeePart,
     getServiceabilityDetails,
-    getBillToAccountNumber,
     getClosestApplicableShops,
     getShopProviderData,
 } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
@@ -107,11 +104,10 @@ export default {
     data() {
         return {
             localZipCode: this.zipCodeFromParent,
-            answers: [],
             shopListButton: shopListButton,
             numberOfShopsToDisplay: 0,
-            localShopProviderData: this.shopProviderDataFromParent, // Why does parent manage this sometimes, but not all of the time A: to prevent another call to get providers on initial load
-            localSelectedProviderNumber: null, // Revisit this, maybe not too hard
+            localShopProviderData: this.shopProviderDataFromParent,
+            localSelectedProviderNumber: null,
             displayInvalidZipAlert: false, // part of big refactor of asyn calls
             displayNoShopsAlert: false, // part of big refactor of asyn calls
             zipCodeData: null,
@@ -165,6 +161,26 @@ export default {
                 !this.localSelectedProviderNumber
             );
         },
+        answers() {
+            const updatedProvidersToDisplay = this.shopProviders.slice(0, this.numberOfShopsToDisplay);
+            return updatedProvidersToDisplay.map(
+                (shopProvider) => {
+                    const streetAddress = this.toTitleCase(shopProvider.address.streetAddress);
+                    const city = this.toTitleCase(shopProvider.address.city);
+                    const state = shopProvider.address.state;
+                    const zipCode = shopProvider.address.zipCode;
+                    const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
+
+                    return {
+                        buttonLabel: city,
+                        buttonLabelSubCopy: `${distanceInMiles} mi`,
+                        buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
+                        additionalButtonData: this.additionalButtonData,
+                        value: shopProvider.providerNumber,
+                    };
+                }
+            );
+        },
     },
     methods: {
         openModal() {
@@ -197,37 +213,11 @@ export default {
                 return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
             });
         },
-        updateShopListWithNextShops(numberToGet = 3) {
+        updateShopListWithNextShops() {
             //gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED; --This needs to actually fire on initial display, can never happen here
-
-            this.updateShopAnswersFromProviderList({ extraShopsToDisplay: 3 });
+            this.numberOfShopsToDisplay += 3;
             this.pushShopsDisplayedGAEvent(this.answers);
         },
-        updateShopAnswersFromProviderList({ extraShopsToDisplay }) {
-            const indexOfLastShopToReturn = this.numberOfShopsToDisplay + extraShopsToDisplay;
-            const updatedProvidersToDisplay = this.shopProviders.slice(0, indexOfLastShopToReturn);
-            this.numberOfShopsToDisplay = updatedProvidersToDisplay.length;
-
-            const shopAnswersToDisplayFromProviderList = updatedProvidersToDisplay.map(
-                (shopProvider) => {
-                    const streetAddress = this.toTitleCase(shopProvider.address.streetAddress);
-                    const city = this.toTitleCase(shopProvider.address.city);
-                    const state = shopProvider.address.state;
-                    const zipCode = shopProvider.address.zipCode;
-                    const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
-
-                    return {
-                        buttonLabel: city,
-                        buttonLabelSubCopy: `${distanceInMiles} mi`,
-                        buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
-                        additionalButtonData: this.additionalButtonData,
-                        value: shopProvider.providerNumber,
-                    };
-                }
-            );
-
-            this.answers = shopAnswersToDisplayFromProviderList;
-        },
         pushShopsDisplayedGAEvent(nextShopListAnswers) {
             var shops = nextShopListAnswers.map((shop) => {
                 if (shop.value.length > 5 && shop.value.startsWith("00")) {
@@ -287,7 +277,6 @@ export default {
             }
         },
         updateShopsForZip() {
-            this.updateShopAnswersFromProviderList({ extraShopsToDisplay: 0 });
             if (!this.shopProviders.length) {
                 this.displayNoShopsAlert = true;
                 this.displaySeeMoreLocationsLink = false;