Readability and generate answers refactor
This commit is contained in:
parent
33c2401392
commit
fa0d988335
1 changed files with 21 additions and 50 deletions
|
|
@ -109,7 +109,7 @@ export default {
|
|||
localZipCode: this.zipCodeFromParent,
|
||||
answers: [],
|
||||
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
|
||||
localSelectedProviderNumber: null, // Revisit this, maybe not too hard
|
||||
displayInvalidZipAlert: false, // part of big refactor of asyn calls
|
||||
|
|
@ -156,7 +156,7 @@ export default {
|
|||
displaySeeMoreLocationsLink() {
|
||||
if (!this.shopProviders.length)
|
||||
return false;
|
||||
return this.indexOfLastShopToBeDisplayed < this.shopProviders.length;
|
||||
return this.numberOfShopsToDisplay < this.shopProviders.length;
|
||||
},
|
||||
|
||||
},
|
||||
|
|
@ -175,9 +175,9 @@ export default {
|
|||
);
|
||||
|
||||
if (selectedProviderNumberFromParentIndex > -1) {
|
||||
this.indexOfLastShopToBeDisplayed = Math.ceil((selectedProviderNumberFromParentIndex + 1) / 3) * 3;
|
||||
this.numberOfShopsToDisplay = Math.ceil((selectedProviderNumberFromParentIndex + 1) / 3) * 3;
|
||||
} else {
|
||||
this.indexOfLastShopToBeDisplayed = 3;
|
||||
this.numberOfShopsToDisplay = 3;
|
||||
}
|
||||
|
||||
this.updateShopsForZip(this.localZipCode);
|
||||
|
|
@ -187,33 +187,28 @@ export default {
|
|||
updateSelectedAnswer() {
|
||||
this.localSelectedProviderNumber = this.selectedProviderNumberFromParent;
|
||||
},
|
||||
toTitleCase(str) {
|
||||
return str.replace(/\w\S*/g, function (txt) {
|
||||
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
});
|
||||
},
|
||||
isModalFooterButtonDisabled() {
|
||||
return this.displayInvalidZipAlert || this.displayNoShopsAlert || !this.localSelectedProviderNumber;
|
||||
},
|
||||
updateShopListWithNextShops(numberToGet = 3) {
|
||||
//gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED; --This needs to actually fire on initial display, can never happen here
|
||||
|
||||
const nextShopListAnswers = this.getNextShopAnswersFromList();
|
||||
this.pushShopsDisplayedGAEvent(nextShopListAnswers);
|
||||
|
||||
nextShopListAnswers.forEach((shop) => {
|
||||
this.answers.push(shop);
|
||||
});
|
||||
this.updateShopAnswersFromProviderList({extraShopsToDisplay:3});
|
||||
this.pushShopsDisplayedGAEvent(this.answers);
|
||||
},
|
||||
getNextShopAnswersFromList(numberOfShopsToGet = 3) {
|
||||
const toTitleCase = (str) => {
|
||||
return str.replace(/\w\S*/g, function (txt) {
|
||||
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
});
|
||||
};
|
||||
updateShopAnswersFromProviderList({extraShopsToDisplay}) {
|
||||
const indexOfLastShopToReturn = this.numberOfShopsToDisplay + extraShopsToDisplay;
|
||||
const updatedProvidersToDisplay = this.shopProviders.slice(0, indexOfLastShopToReturn);
|
||||
this.numberOfShopsToDisplay = updatedProvidersToDisplay.length;
|
||||
|
||||
const indexOfLastShopToReturn = this.indexOfLastShopToBeDisplayed + numberOfShopsToGet;
|
||||
const nextShopProvidersFromList = this.shopProviders.slice(this.indexOfLastShopToBeDisplayed, indexOfLastShopToReturn);
|
||||
this.indexOfLastShopToBeDisplayed = indexOfLastShopToReturn < this.shopProviders.length ? indexOfLastShopToReturn : this.shopProviders.length;
|
||||
|
||||
const nextShopAnswersFromList = nextShopProvidersFromList.map((shopProvider) => {
|
||||
const streetAddress = toTitleCase(shopProvider.address.streetAddress);
|
||||
const city = toTitleCase(shopProvider.address.city);
|
||||
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;
|
||||
|
|
@ -227,7 +222,7 @@ export default {
|
|||
};
|
||||
});
|
||||
|
||||
return nextShopAnswersFromList;
|
||||
this.answers = shopAnswersToDisplayFromProviderList;
|
||||
},
|
||||
pushShopsDisplayedGAEvent(nextShopListAnswers) {
|
||||
var shops = nextShopListAnswers.map((shop) => {
|
||||
|
|
@ -280,7 +275,7 @@ export default {
|
|||
getShopProviderData(this.localZipCode).then(async (result) => {
|
||||
this.displayNoShopsAlert = false;
|
||||
this.localShopProviderData = result.data;
|
||||
this.indexOfLastShopToBeDisplayed = 3;
|
||||
this.numberOfShopsToDisplay = 3;
|
||||
this.updateShopsForZip(this.localZipCode);
|
||||
});
|
||||
}
|
||||
|
|
@ -298,35 +293,11 @@ export default {
|
|||
return;
|
||||
}
|
||||
|
||||
const sortedShops = this.getShopsByZip(zipCode, this.shopProviders, this.indexOfLastShopToBeDisplayed);
|
||||
|
||||
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;
|
||||
this.updateShopAnswersFromProviderList({extraShopsToDisplay:0})
|
||||
if (!this.answers.some((a) => String(a.value) === String(this.localSelectedProviderNumber))) {
|
||||
this.localSelectedProviderNumber = null;
|
||||
}
|
||||
// I think we should call our new pushGA Event here with new mapped data
|
||||
this.indexOfLastShopToBeDisplayed = mappedData.length;
|
||||
this.displayNoShopsAlert = this.answers.length === 0;
|
||||
},
|
||||
resetModalButtonStyle() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue