jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Readability and generate answers refactor

Browse source
This commit is contained in:
Scott Kiener 2025-07-16 15:58:50 -04:00
parent 33c2401392
commit fa0d988335
1 changed files with 21 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/layouts/service-location/shop-question/shop-question-popup.vue
View file

@ -109,7 +109,7 @@ export default {
localZipCode: this.zipCodeFromParent, localZipCode: this.zipCodeFromParent,
answers: [], answers: [],
shopListButton: shopListButton, shopListButton: shopListButton,
indexOfLastShopToBeDisplayed: 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, // 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 localSelectedProviderNumber: null, // Revisit this, maybe not too hard
displayInvalidZipAlert: false, // part of big refactor of asyn calls displayInvalidZipAlert: false, // part of big refactor of asyn calls
@ -156,7 +156,7 @@ export default {
displaySeeMoreLocationsLink() { displaySeeMoreLocationsLink() {
if (!this.shopProviders.length) if (!this.shopProviders.length)
return false; return false;
return this.indexOfLastShopToBeDisplayed < this.shopProviders.length; return this.numberOfShopsToDisplay < this.shopProviders.length;
}, },
}, },
@ -175,9 +175,9 @@ export default {
); );
if (selectedProviderNumberFromParentIndex > -1) { if (selectedProviderNumberFromParentIndex > -1) {
this.indexOfLastShopToBeDisplayed = Math.ceil((selectedProviderNumberFromParentIndex + 1) / 3) * 3; this.numberOfShopsToDisplay = Math.ceil((selectedProviderNumberFromParentIndex + 1) / 3) * 3;
} else { } else {
this.indexOfLastShopToBeDisplayed = 3; this.numberOfShopsToDisplay = 3;
} }
this.updateShopsForZip(this.localZipCode); this.updateShopsForZip(this.localZipCode);
@ -187,33 +187,28 @@ export default {
updateSelectedAnswer() { updateSelectedAnswer() {
this.localSelectedProviderNumber = this.selectedProviderNumberFromParent; this.localSelectedProviderNumber = this.selectedProviderNumberFromParent;
}, },
toTitleCase(str) {
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
},
isModalFooterButtonDisabled() { isModalFooterButtonDisabled() {
return this.displayInvalidZipAlert || this.displayNoShopsAlert || !this.localSelectedProviderNumber; return this.displayInvalidZipAlert || this.displayNoShopsAlert || !this.localSelectedProviderNumber;
}, },
updateShopListWithNextShops(numberToGet = 3) { updateShopListWithNextShops(numberToGet = 3) {
//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
const nextShopListAnswers = this.getNextShopAnswersFromList(); this.updateShopAnswersFromProviderList({extraShopsToDisplay:3});
this.pushShopsDisplayedGAEvent(nextShopListAnswers); this.pushShopsDisplayedGAEvent(this.answers);
nextShopListAnswers.forEach((shop) => {
this.answers.push(shop);
});
}, },
getNextShopAnswersFromList(numberOfShopsToGet = 3) { updateShopAnswersFromProviderList({extraShopsToDisplay}) {
const toTitleCase = (str) => { const indexOfLastShopToReturn = this.numberOfShopsToDisplay + extraShopsToDisplay;
return str.replace(/\w\S*/g, function (txt) { const updatedProvidersToDisplay = this.shopProviders.slice(0, indexOfLastShopToReturn);
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); this.numberOfShopsToDisplay = updatedProvidersToDisplay.length;
});
};
const indexOfLastShopToReturn = this.indexOfLastShopToBeDisplayed + numberOfShopsToGet; const shopAnswersToDisplayFromProviderList = updatedProvidersToDisplay.map((shopProvider) => {
const nextShopProvidersFromList = this.shopProviders.slice(this.indexOfLastShopToBeDisplayed, indexOfLastShopToReturn); const streetAddress = this.toTitleCase(shopProvider.address.streetAddress);
this.indexOfLastShopToBeDisplayed = indexOfLastShopToReturn < this.shopProviders.length ? indexOfLastShopToReturn : this.shopProviders.length; const city = this.toTitleCase(shopProvider.address.city);
const nextShopAnswersFromList = nextShopProvidersFromList.map((shopProvider) => {
const streetAddress = toTitleCase(shopProvider.address.streetAddress);
const city = toTitleCase(shopProvider.address.city);
const state = shopProvider.address.state; const state = shopProvider.address.state;
const zipCode = shopProvider.address.zipCode; const zipCode = shopProvider.address.zipCode;
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2; const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
@ -227,7 +222,7 @@ export default {
}; };
}); });
return nextShopAnswersFromList; this.answers = shopAnswersToDisplayFromProviderList;
}, },
pushShopsDisplayedGAEvent(nextShopListAnswers) { pushShopsDisplayedGAEvent(nextShopListAnswers) {
var shops = nextShopListAnswers.map((shop) => { var shops = nextShopListAnswers.map((shop) => {
@ -280,7 +275,7 @@ export default {
getShopProviderData(this.localZipCode).then(async (result) => { getShopProviderData(this.localZipCode).then(async (result) => {
this.displayNoShopsAlert = false; this.displayNoShopsAlert = false;
this.localShopProviderData = result.data; this.localShopProviderData = result.data;
this.indexOfLastShopToBeDisplayed = 3; this.numberOfShopsToDisplay = 3;
this.updateShopsForZip(this.localZipCode); this.updateShopsForZip(this.localZipCode);
}); });
} }
@ -298,35 +293,11 @@ export default {
return; return;
} }
const sortedShops = this.getShopsByZip(zipCode, this.shopProviders, this.indexOfLastShopToBeDisplayed); this.updateShopAnswersFromProviderList({extraShopsToDisplay:0})
const toTitleCase = (str) => {
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
};
const mappedData = sortedShops.map((shopProvider) => {
const streetAddress = toTitleCase(shopProvider.address.streetAddress);
const city = 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 = mappedData;
if (!this.answers.some((a) => String(a.value) === String(this.localSelectedProviderNumber))) { if (!this.answers.some((a) => String(a.value) === String(this.localSelectedProviderNumber))) {
this.localSelectedProviderNumber = null; this.localSelectedProviderNumber = null;
} }
// I think we should call our new pushGA Event here with new mapped data // I think we should call our new pushGA Event here with new mapped data
this.indexOfLastShopToBeDisplayed = mappedData.length;
this.displayNoShopsAlert = this.answers.length === 0; this.displayNoShopsAlert = this.answers.length === 0;
}, },
resetModalButtonStyle() { resetModalButtonStyle() {