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

Refactor of get more shops button

Browse source
This commit is contained in:
Scott Kiener 2025-07-16 13:37:10 -04:00
parent fab08bd179
commit 66b464cf3a
1 changed files with 27 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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() {