Make answers a computed

This commit is contained in:
Scott Kiener 2025-07-17 13:25:36 -04:00
parent 10ca9ce8ba
commit 8889e59352

View file

@ -91,10 +91,7 @@ import baseMixin from "@/mixins/base-mixin.js";
import { AppointmentTypeStrings } from "@/constants/schedule-constants"; import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { import {
getPricedMobileFeePart,
getPricedRecycleFeePart,
getServiceabilityDetails, getServiceabilityDetails,
getBillToAccountNumber,
getClosestApplicableShops, getClosestApplicableShops,
getShopProviderData, getShopProviderData,
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
@ -107,11 +104,10 @@ export default {
data() { data() {
return { return {
localZipCode: this.zipCodeFromParent, localZipCode: this.zipCodeFromParent,
answers: [],
shopListButton: shopListButton, shopListButton: shopListButton,
numberOfShopsToDisplay: 0, 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 localShopProviderData: this.shopProviderDataFromParent,
localSelectedProviderNumber: null, // Revisit this, maybe not too hard localSelectedProviderNumber: null,
displayInvalidZipAlert: false, // part of big refactor of asyn calls displayInvalidZipAlert: false, // part of big refactor of asyn calls
displayNoShopsAlert: false, // part of big refactor of asyn calls displayNoShopsAlert: false, // part of big refactor of asyn calls
zipCodeData: null, zipCodeData: null,
@ -165,6 +161,26 @@ export default {
!this.localSelectedProviderNumber !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: { methods: {
openModal() { openModal() {
@ -197,37 +213,11 @@ export default {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 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 //gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED; --This needs to actually fire on initial display, can never happen here
this.numberOfShopsToDisplay += 3;
this.updateShopAnswersFromProviderList({ extraShopsToDisplay: 3 });
this.pushShopsDisplayedGAEvent(this.answers); 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) { pushShopsDisplayedGAEvent(nextShopListAnswers) {
var shops = nextShopListAnswers.map((shop) => { var shops = nextShopListAnswers.map((shop) => {
if (shop.value.length > 5 && shop.value.startsWith("00")) { if (shop.value.length > 5 && shop.value.startsWith("00")) {
@ -287,7 +277,6 @@ export default {
} }
}, },
updateShopsForZip() { updateShopsForZip() {
this.updateShopAnswersFromProviderList({ extraShopsToDisplay: 0 });
if (!this.shopProviders.length) { if (!this.shopProviders.length) {
this.displayNoShopsAlert = true; this.displayNoShopsAlert = true;
this.displaySeeMoreLocationsLink = false; this.displaySeeMoreLocationsLink = false;