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" linkType="text"
:text="showMoreShopsLinkText" :text="showMoreShopsLinkText"
href="#!" href="#!"
@click-event="getNextShopsFromList(3)" @click-event="updateShopListWithNextShops()"
:aria-label="showMoreShopsLinkText" /> :aria-label="showMoreShopsLinkText" />
</div> </div>
</div> </div>
@ -111,7 +111,7 @@ export default {
newZipCode: this.zipCode, newZipCode: this.zipCode,
answers: [], answers: [],
shopListButton: shopListButton, 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 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 selectedProviderNumber: 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
@ -158,7 +158,7 @@ export default {
displaySeeMoreLocationsLink() { displaySeeMoreLocationsLink() {
if (!this.shopProviders.length) if (!this.shopProviders.length)
return false; return false;
return this.shopIndex < this.shopProviders.length; return this.indexOfLastShopDisplayed < this.shopProviders.length;
}, },
}, },
@ -166,29 +166,28 @@ export default {
openModal() { openModal() {
this.$refs.shopQuestionModal.openModal(); this.$refs.shopQuestionModal.openModal();
}, },
async getNextShopsFromList(numberToGet = 3) { updateShopListWithNextShops(numberToGet = 3) {
const logFirstShopsDisplayed = this.shopIndex == 0; //gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED; --This needs to actually fire on initial display, can never happen here
const shopIterator = (array, n) => { const nextShopListAnswers = this.getNextShopAnswersFromList();
const l = array.length; this.pushShopsDisplayedGAEvent(nextShopListAnswers);
return () => {
const end = this.shopIndex + n;
const part = array.slice(this.shopIndex, end);
this.shopIndex = end < l ? end : this.shopProviders.length;
return part;
};
};
nextShopListAnswers.forEach((shop) => {
this.answers.push(shop);
});
},
getNextShopAnswersFromList(numberOfShopsToGet = 3) {
const toTitleCase = (str) => { const toTitleCase = (str) => {
return str.replace(/\w\S*/g, function (txt) { return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); 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 nextShopAnswersFromList = nextShopProvidersFromList.map((shopProvider) => {
const mappedData = nextShop().map((shopProvider) => {
const streetAddress = toTitleCase(shopProvider.address.streetAddress); const streetAddress = toTitleCase(shopProvider.address.streetAddress);
const city = toTitleCase(shopProvider.address.city); const city = toTitleCase(shopProvider.address.city);
const state = shopProvider.address.state; const state = shopProvider.address.state;
@ -204,12 +203,10 @@ export default {
}; };
}); });
var gaAction = this.GaActions.MORE_LOCATIONS_CLICKED; return nextShopAnswersFromList;
if (logFirstShopsDisplayed) { },
gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED; pushShopsDisplayedGAEvent(nextShopListAnswers) {
} var shops = nextShopListAnswers.map((shop) => {
var shops = mappedData.map((shop) => {
if (shop.value.length > 5 && shop.value.startsWith("00")) { if (shop.value.length > 5 && shop.value.startsWith("00")) {
return shop.value.substring(1); return shop.value.substring(1);
} else { } else {
@ -222,18 +219,7 @@ export default {
joinedShops = "no-shops"; joinedShops = "no-shops";
} }
this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, gaAction, joinedShops, true); this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, this.GaActions.MORE_LOCATIONS_CLICKED, joinedShops, true);
if (this.answers.length === 0) {
this.answers = mappedData;
} else {
mappedData.forEach((shop) => {
this.answers.push(shop);
});
}
this.scrollToPageBottom();
}, },
onModalOpened() { onModalOpened() {
const preSelectedIndex = this.shopProviders.findIndex( const preSelectedIndex = this.shopProviders.findIndex(
@ -241,9 +227,9 @@ export default {
); );
if (preSelectedIndex > -1) { if (preSelectedIndex > -1) {
this.shopIndex = Math.ceil((preSelectedIndex + 1) / 3) * 3; this.indexOfLastShopDisplayed = Math.ceil((preSelectedIndex + 1) / 3) * 3;
} else { } else {
this.shopIndex = 3; this.indexOfLastShopDisplayed = 3;
} }
this.localShopProviderData = this.shopProviderData; this.localShopProviderData = this.shopProviderData;
@ -317,10 +303,10 @@ export default {
// If not found, only show the first 3 shops // If not found, only show the first 3 shops
if (selectedIndex === -1) { 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) => { const toTitleCase = (str) => {
return str.replace(/\w\S*/g, function (txt) { return str.replace(/\w\S*/g, function (txt) {
@ -344,13 +330,14 @@ export default {
}; };
}); });
this.answers = mappedData; this.answers = mappedData;
// I think we should call our new pushGA Event here with new mapped data
if ( if (
this.selectedProviderNumber && this.selectedProviderNumber &&
!this.answers.some((a) => String(a.value) === String(this.selectedProviderNumber)) !this.answers.some((a) => String(a.value) === String(this.selectedProviderNumber))
) { ) {
this.selectedProviderNumber = null; this.selectedProviderNumber = null;
} }
this.shopIndex = mappedData.length; this.indexOfLastShopDisplayed = mappedData.length;
this.displayNoShopsAlert = this.answers.length === 0; this.displayNoShopsAlert = this.answers.length === 0;
}, },
resetModalButtonStyle() { resetModalButtonStyle() {