Rename props/data for readability
This commit is contained in:
parent
5f3c24fb8f
commit
1217d2d333
2 changed files with 34 additions and 34 deletions
|
|
@ -106,14 +106,14 @@
|
||||||
</div>
|
</div>
|
||||||
<shopQuestionPopup
|
<shopQuestionPopup
|
||||||
v-if="isShopQuestionDisplayed"
|
v-if="isShopQuestionDisplayed"
|
||||||
:preSelectedProviderNumber="selectedProvider?.providerNumber"
|
:selectedProviderNumberFromParent="selectedProvider?.providerNumber"
|
||||||
:shopProviderData="shopProviderData"
|
:shopProviderDataFromParent="shopProviderData"
|
||||||
@updated-serviceability="setServiceabilityDetails"
|
@updated-serviceability="setServiceabilityDetails"
|
||||||
@shop-selected="onShopSelected"
|
@shop-selected="onShopSelected"
|
||||||
@updated-zipcode-ctu="setZipcodeCtu"
|
@updated-zipcode-ctu="setZipcodeCtu"
|
||||||
@update-shop-provider-data="shopProviderData = $event"
|
@update-shop-provider-data="shopProviderData = $event"
|
||||||
@updated-contains-military-base="setContainsMilitaryBase"
|
@updated-contains-military-base="setContainsMilitaryBase"
|
||||||
:zipCode="zipCode"
|
:zipCodeFromParent="zipCode"
|
||||||
cmsWidgetName="YourSafeliteShopWidget" />
|
cmsWidgetName="YourSafeliteShopWidget" />
|
||||||
|
|
||||||
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
:onModalClosedCallback="onModalClosed"
|
:onModalClosedCallback="onModalClosed"
|
||||||
:footerButtonText="modalFooterText"
|
:footerButtonText="modalFooterText"
|
||||||
:footerButtonDisabled="
|
:footerButtonDisabled="
|
||||||
displayInvalidZipAlert || displayNoShopsAlert || !selectedProviderNumber
|
displayInvalidZipAlert || displayNoShopsAlert || !localSelectedProviderNumber
|
||||||
"
|
"
|
||||||
@footer-button-event="setZipCodeAndShop">
|
@footer-button-event="setZipCodeAndShop">
|
||||||
<form @submit.prevent>
|
<form @submit.prevent>
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
ref="serviceZipQuestion"
|
ref="serviceZipQuestion"
|
||||||
class="shop-question-zipcode"
|
class="shop-question-zipcode"
|
||||||
customInputId="serviceZipCode"
|
customInputId="serviceZipCode"
|
||||||
v-model="newZipCode"
|
v-model="localZipCode"
|
||||||
cmsWidgetName="ServiceZipQuestionWidget"
|
cmsWidgetName="ServiceZipQuestionWidget"
|
||||||
@search-icon-click="onSearchZip"
|
@search-icon-click="onSearchZip"
|
||||||
@keydown.enter="onSearchZip"
|
@keydown.enter="onSearchZip"
|
||||||
|
|
@ -56,9 +56,9 @@
|
||||||
:answers="answers"
|
:answers="answers"
|
||||||
groupName="chooseShop"
|
groupName="chooseShop"
|
||||||
textPosition="text-start"
|
textPosition="text-start"
|
||||||
v-model="selectedProviderNumber"
|
v-model="localSelectedProviderNumber"
|
||||||
isRequired
|
isRequired
|
||||||
:validationRules="this.selectedProviderNumber ? '' : 'option-required'" />
|
:validationRules="this.localSelectedProviderNumber ? '' : 'option-required'" />
|
||||||
<div class="show-more-shops-link">
|
<div class="show-more-shops-link">
|
||||||
<textLink
|
<textLink
|
||||||
v-if="displaySeeMoreLocationsLink"
|
v-if="displaySeeMoreLocationsLink"
|
||||||
|
|
@ -108,23 +108,23 @@ export default {
|
||||||
mixins: [baseMixin],
|
mixins: [baseMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
newZipCode: this.zipCode,
|
localZipCode: this.zipCodeFromParent,
|
||||||
answers: [],
|
answers: [],
|
||||||
shopListButton: shopListButton,
|
shopListButton: shopListButton,
|
||||||
indexOfLastShopDisplayed: 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.shopProviderDataFromParent, // 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
|
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
|
||||||
displayNoShopsAlert: false, // part of big refactor of asyn calls
|
displayNoShopsAlert: false, // part of big refactor of asyn calls
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
shopProviderData: Object,
|
shopProviderDataFromParent: Object,
|
||||||
zipCode: {
|
zipCodeFromParent: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "",
|
default: "",
|
||||||
},
|
},
|
||||||
preSelectedProviderNumber: {
|
selectedProviderNumberFromParent: {
|
||||||
type: String,
|
type: String,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
|
|
@ -222,28 +222,28 @@ export default {
|
||||||
this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, this.GaActions.MORE_LOCATIONS_CLICKED, joinedShops, true);
|
this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, this.GaActions.MORE_LOCATIONS_CLICKED, joinedShops, true);
|
||||||
},
|
},
|
||||||
onModalOpened() {
|
onModalOpened() {
|
||||||
const preSelectedIndex = this.shopProviders.findIndex(
|
const selectedProviderNumberFromParentIndex = this.shopProviders.findIndex(
|
||||||
(provider) => provider.providerNumber == this.preSelectedProviderNumber
|
(provider) => provider.providerNumber == this.selectedProviderNumberFromParent
|
||||||
);
|
);
|
||||||
|
|
||||||
if (preSelectedIndex > -1) {
|
if (selectedProviderNumberFromParentIndex > -1) {
|
||||||
this.indexOfLastShopDisplayed = Math.ceil((preSelectedIndex + 1) / 3) * 3;
|
this.indexOfLastShopDisplayed = Math.ceil((selectedProviderNumberFromParentIndex + 1) / 3) * 3;
|
||||||
} else {
|
} else {
|
||||||
this.indexOfLastShopDisplayed = 3;
|
this.indexOfLastShopDisplayed = 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.localShopProviderData = this.shopProviderData;
|
this.localShopProviderData = this.shopProviderDataFromParent;
|
||||||
this.answers = [];
|
this.answers = [];
|
||||||
this.updateShopsForZip(this.newZipCode);
|
this.updateShopsForZip(this.localZipCode);
|
||||||
this.selectedProviderNumber = this.preSelectedProviderNumber;
|
this.localSelectedProviderNumber = this.selectedProviderNumberFromParent;
|
||||||
if (
|
if (
|
||||||
(!this.selectedProviderNumber ||
|
(!this.localSelectedProviderNumber ||
|
||||||
!this.shopProviders.some(
|
!this.shopProviders.some(
|
||||||
(p) => p.providerNumber == this.selectedProviderNumber
|
(p) => p.providerNumber == this.localSelectedProviderNumber
|
||||||
)) &&
|
)) &&
|
||||||
this.shopProviders.length > 0
|
this.shopProviders.length > 0
|
||||||
) {
|
) {
|
||||||
this.selectedProviderNumber = this.shopProviders[0].providerNumber;
|
this.localSelectedProviderNumber = this.shopProviders[0].providerNumber;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closeModal() {
|
closeModal() {
|
||||||
|
|
@ -256,7 +256,7 @@ export default {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
this.resetAlerts();
|
this.resetAlerts();
|
||||||
const zipCodeData = await this.getZipCodeData(
|
const zipCodeData = await this.getZipCodeData(
|
||||||
this.newZipCode,
|
this.localZipCode,
|
||||||
"service-location"
|
"service-location"
|
||||||
);
|
);
|
||||||
if (!zipCodeData.isValid) {
|
if (!zipCodeData.isValid) {
|
||||||
|
|
@ -267,7 +267,7 @@ export default {
|
||||||
if (this.isVehicleHeavyTruck) {
|
if (this.isVehicleHeavyTruck) {
|
||||||
// check the location endpoint to verify this zip can service a heavy truck
|
// check the location endpoint to verify this zip can service a heavy truck
|
||||||
const closestShops = await getClosestApplicableShops(
|
const closestShops = await getClosestApplicableShops(
|
||||||
this.newZipCode,
|
this.localZipCode,
|
||||||
this.carId,
|
this.carId,
|
||||||
"service-location"
|
"service-location"
|
||||||
);
|
);
|
||||||
|
|
@ -278,10 +278,10 @@ export default {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
getShopProviderData(this.newZipCode).then(async (result) => {
|
getShopProviderData(this.localZipCode).then(async (result) => {
|
||||||
this.displayNoShopsAlert = false;
|
this.displayNoShopsAlert = false;
|
||||||
this.localShopProviderData = result.data;
|
this.localShopProviderData = result.data;
|
||||||
this.updateShopsForZip(this.newZipCode);
|
this.updateShopsForZip(this.localZipCode);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -299,7 +299,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectedIndex = this.shopProviders.findIndex(
|
const selectedIndex = this.shopProviders.findIndex(
|
||||||
(provider) => provider.providerNumber == this.selectedProviderNumber
|
(provider) => provider.providerNumber == this.localSelectedProviderNumber
|
||||||
);
|
);
|
||||||
|
|
||||||
// If not found, only show the first 3 shops
|
// If not found, only show the first 3 shops
|
||||||
|
|
@ -333,10 +333,10 @@ export default {
|
||||||
this.answers = mappedData;
|
this.answers = mappedData;
|
||||||
// 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
|
||||||
if (
|
if (
|
||||||
this.selectedProviderNumber &&
|
this.localSelectedProviderNumber &&
|
||||||
!this.answers.some((a) => String(a.value) === String(this.selectedProviderNumber))
|
!this.answers.some((a) => String(a.value) === String(this.localSelectedProviderNumber))
|
||||||
) {
|
) {
|
||||||
this.selectedProviderNumber = null;
|
this.localSelectedProviderNumber = null;
|
||||||
}
|
}
|
||||||
this.indexOfLastShopDisplayed = mappedData.length;
|
this.indexOfLastShopDisplayed = mappedData.length;
|
||||||
this.displayNoShopsAlert = this.answers.length === 0;
|
this.displayNoShopsAlert = this.answers.length === 0;
|
||||||
|
|
@ -351,11 +351,11 @@ export default {
|
||||||
},
|
},
|
||||||
async setZipCodeAndShop() {
|
async setZipCodeAndShop() {
|
||||||
const selectedProvider = this.shopProviders.find(
|
const selectedProvider = this.shopProviders.find(
|
||||||
(provider) => provider.providerNumber == this.selectedProviderNumber
|
(provider) => provider.providerNumber == this.localSelectedProviderNumber
|
||||||
);
|
);
|
||||||
this.resetAlerts();
|
this.resetAlerts();
|
||||||
|
|
||||||
const zipCodeData = await this.getZipCodeData(this.newZipCode, "service-location");
|
const zipCodeData = await this.getZipCodeData(this.localZipCode, "service-location");
|
||||||
|
|
||||||
if (!zipCodeData.isValid) {
|
if (!zipCodeData.isValid) {
|
||||||
this.displayInvalidZipAlert = true;
|
this.displayInvalidZipAlert = true;
|
||||||
|
|
@ -413,7 +413,7 @@ export default {
|
||||||
this.$emit("shop-selected", {
|
this.$emit("shop-selected", {
|
||||||
providerNumber: selectedProvider?.providerNumber,
|
providerNumber: selectedProvider?.providerNumber,
|
||||||
address: selectedProvider?.address,
|
address: selectedProvider?.address,
|
||||||
searchedZip: this.newZipCode,
|
searchedZip: this.localZipCode,
|
||||||
searchedState: zipCodeData.state,
|
searchedState: zipCodeData.state,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue