Clean up all unused code, move display to computed
The only functionality changes here were: displaySeeMoreLocationsLink() and using the v-if on schedule page instead of inside component
This commit is contained in:
parent
2839081866
commit
28c83fbb89
2 changed files with 11 additions and 60 deletions
|
|
@ -105,7 +105,7 @@
|
||||||
class="ps-4 pe-4 mt-4" />
|
class="ps-4 pe-4 mt-4" />
|
||||||
</div>
|
</div>
|
||||||
<shopQuestionPopup
|
<shopQuestionPopup
|
||||||
modalWidgetName="ShopQuestionPopupWidget"
|
v-if="isShopQuestionDisplayed"
|
||||||
:appointmentType="appointmentType"
|
:appointmentType="appointmentType"
|
||||||
:modelValue="{
|
:modelValue="{
|
||||||
zipCode: zipCode,
|
zipCode: zipCode,
|
||||||
|
|
@ -113,7 +113,6 @@
|
||||||
}"
|
}"
|
||||||
:preSelectedProviderNumber="selectedProvider?.providerNumber"
|
:preSelectedProviderNumber="selectedProvider?.providerNumber"
|
||||||
:shopProviderData="shopProviderData"
|
:shopProviderData="shopProviderData"
|
||||||
:isServiceableInshop="isServiceableInshop"
|
|
||||||
@updated-serviceability="setServiceabilityDetails"
|
@updated-serviceability="setServiceabilityDetails"
|
||||||
@shop-selected="onShopSelected"
|
@shop-selected="onShopSelected"
|
||||||
@update:modelValue="onShopModelUpdated"
|
@update:modelValue="onShopModelUpdated"
|
||||||
|
|
@ -121,7 +120,6 @@
|
||||||
@update-shop-provider-data="shopProviderData = $event"
|
@update-shop-provider-data="shopProviderData = $event"
|
||||||
@updated-contains-military-base="setContainsMilitaryBase"
|
@updated-contains-military-base="setContainsMilitaryBase"
|
||||||
:zipCode="zipCode"
|
:zipCode="zipCode"
|
||||||
:isDisplayed="isShopQuestionDisplayed"
|
|
||||||
cmsWidgetName="YourSafeliteShopWidget" />
|
cmsWidgetName="YourSafeliteShopWidget" />
|
||||||
|
|
||||||
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<transition name="fade" mode="out-in">
|
<transition name="fade" mode="out-in">
|
||||||
<div v-if="isDisplayed" class="shop-question" aria-live="polite">
|
<div class="shop-question" aria-live="polite">
|
||||||
<div class="modal-link">
|
<div class="modal-link">
|
||||||
<text-link
|
<text-link
|
||||||
linkType="text"
|
linkType="text"
|
||||||
|
|
@ -84,7 +84,6 @@ import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-que
|
||||||
import buttonQuestion from "@/digital-components/button-question/button-question.vue";
|
import buttonQuestion from "@/digital-components/button-question/button-question.vue";
|
||||||
import alert from "@/ux-components/alert/alert.vue";
|
import alert from "@/ux-components/alert/alert.vue";
|
||||||
import shopListButton from "./shop-list-button/shop-list-button";
|
import shopListButton from "./shop-list-button/shop-list-button";
|
||||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
|
||||||
|
|
||||||
// Supporting files
|
// Supporting files
|
||||||
import { defineRule } from "vee-validate";
|
import { defineRule } from "vee-validate";
|
||||||
|
|
@ -106,32 +105,26 @@ import {
|
||||||
getBillToAccountNumber,
|
getBillToAccountNumber,
|
||||||
getClosestApplicableShops,
|
getClosestApplicableShops,
|
||||||
getShopProviderData,
|
getShopProviderData,
|
||||||
getZipCodeData,
|
|
||||||
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
|
||||||
|
|
||||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||||
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "shop-question-popup",
|
name: "shop-question-popup",
|
||||||
mixins: [baseMixin],
|
mixins: [baseMixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isShopQuestionDisplayed: true,
|
|
||||||
internalModel: this.copyModel(this.modelValue),
|
internalModel: this.copyModel(this.modelValue),
|
||||||
answers: [],
|
answers: [],
|
||||||
shopListButton: shopListButton,
|
shopListButton: shopListButton,
|
||||||
shopIndex: 0,
|
shopIndex: 0,
|
||||||
displaySeeMoreLocationsLink: false,
|
|
||||||
serviceZipCodeTextInputId: "",
|
serviceZipCodeTextInputId: "",
|
||||||
localShopProviderData: this.shopProviderData,
|
localShopProviderData: this.shopProviderData,
|
||||||
selectedProviderNumber: null,
|
selectedProviderNumber: null,
|
||||||
isLoadingShops: false,
|
isLoadingShops: false,
|
||||||
lastSearchedZip: "",
|
lastSearchedZip: "",
|
||||||
lastSuccessfulZip: "",
|
lastSuccessfulZip: "",
|
||||||
hasLoadedShopData: false,
|
|
||||||
displayInvalidZipAlert: false,
|
displayInvalidZipAlert: false,
|
||||||
areShopsAvialable: true,
|
|
||||||
displayNoShopsAlert: false,
|
displayNoShopsAlert: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -145,15 +138,6 @@ export default {
|
||||||
zipCode: "",
|
zipCode: "",
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
isDisplayed: Boolean,
|
|
||||||
modelWidgetName: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
isServiceableInshop: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
zipCode: {
|
zipCode: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "",
|
default: "",
|
||||||
|
|
@ -167,24 +151,18 @@ export default {
|
||||||
shopQuestionLinkText() {
|
shopQuestionLinkText() {
|
||||||
return this.getCmsContent("ChangeMyLocationLinkWidget", "Text");
|
return this.getCmsContent("ChangeMyLocationLinkWidget", "Text");
|
||||||
},
|
},
|
||||||
modalName() {
|
|
||||||
return this.modelWidgetName;
|
|
||||||
},
|
|
||||||
modalHeaderText() {
|
modalHeaderText() {
|
||||||
return this.getCmsContent("ShopQuestionWidget", "QuestionText");
|
return this.getCmsContent("ShopQuestionWidget", "QuestionText");
|
||||||
},
|
},
|
||||||
selectShopText() {
|
|
||||||
return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
|
|
||||||
},
|
|
||||||
modal() {
|
|
||||||
return this.$refs.shopQuestionModal;
|
|
||||||
},
|
|
||||||
shopProviders() {
|
shopProviders() {
|
||||||
return this.localShopProviderData?.shopProviders ?? [];
|
return this.localShopProviderData?.shopProviders ?? [];
|
||||||
},
|
},
|
||||||
modalFooterText() {
|
modalFooterText() {
|
||||||
return this.getCmsContent("SaveLocationWidget", "Text");
|
return this.getCmsContent("SaveLocationWidget", "Text");
|
||||||
},
|
},
|
||||||
|
modal() {
|
||||||
|
return this.$refs.shopQuestionModal;
|
||||||
|
},
|
||||||
selectedValue: {
|
selectedValue: {
|
||||||
get: function () {
|
get: function () {
|
||||||
return this.modelValue;
|
return this.modelValue;
|
||||||
|
|
@ -206,6 +184,11 @@ export default {
|
||||||
shopAppointmentType: this.appointmentType,
|
shopAppointmentType: this.appointmentType,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
displaySeeMoreLocationsLink() {
|
||||||
|
if (!this.shopProviders.length)
|
||||||
|
return false;
|
||||||
|
return this.shopIndex < this.shopProviders.length;
|
||||||
|
},
|
||||||
showMoreShopsLinkText() {
|
showMoreShopsLinkText() {
|
||||||
return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
|
return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
|
||||||
},
|
},
|
||||||
|
|
@ -223,13 +206,6 @@ export default {
|
||||||
}
|
}
|
||||||
this.$refs.shopQuestionModal.openModal();
|
this.$refs.shopQuestionModal.openModal();
|
||||||
},
|
},
|
||||||
getSelectedProviderObject(providerNumber) {
|
|
||||||
const provider =
|
|
||||||
this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ??
|
|
||||||
new Provider();
|
|
||||||
|
|
||||||
return provider;
|
|
||||||
},
|
|
||||||
async getNextShopsFromList(numberToGet = 3) {
|
async getNextShopsFromList(numberToGet = 3) {
|
||||||
const logFirstShopsDisplayed = this.shopIndex == 0;
|
const logFirstShopsDisplayed = this.shopIndex == 0;
|
||||||
|
|
||||||
|
|
@ -303,35 +279,14 @@ export default {
|
||||||
|
|
||||||
await nextTick();
|
await nextTick();
|
||||||
|
|
||||||
if (this.shopIndex == this.shopProviders.length) {
|
|
||||||
this.displaySeeMoreLocationsLink = false;
|
|
||||||
} else {
|
|
||||||
this.displaySeeMoreLocationsLink = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
await nextTick();
|
|
||||||
|
|
||||||
this.scrollToPageBottom();
|
this.scrollToPageBottom();
|
||||||
},
|
},
|
||||||
async handleUpdate(selectedShopIndex = null) {
|
|
||||||
this.resetAnswers();
|
|
||||||
if (selectedShopIndex >= 3) {
|
|
||||||
await this.getNextShopsFromList(selectedShopIndex + 1);
|
|
||||||
} else {
|
|
||||||
await this.getNextShopsFromList();
|
|
||||||
await nextTick();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
copyModel(modelToCopy) {
|
copyModel(modelToCopy) {
|
||||||
return {
|
return {
|
||||||
state: modelToCopy.state,
|
state: modelToCopy.state,
|
||||||
zipCode: modelToCopy.zipCode,
|
zipCode: modelToCopy.zipCode,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
resetAnswers() {
|
|
||||||
this.answers = [];
|
|
||||||
this.shopIndex = 0;
|
|
||||||
},
|
|
||||||
onModalOpened() {
|
onModalOpened() {
|
||||||
const preSelectedIndex = this.shopProviders.findIndex(
|
const preSelectedIndex = this.shopProviders.findIndex(
|
||||||
(provider) => provider.providerNumber == this.preSelectedProviderNumber
|
(provider) => provider.providerNumber == this.preSelectedProviderNumber
|
||||||
|
|
@ -419,7 +374,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async updateShopsForZip(zipCode) {
|
updateShopsForZip(zipCode) {
|
||||||
if (!this.appointmentType) {
|
if (!this.appointmentType) {
|
||||||
this.answers = [];
|
this.answers = [];
|
||||||
this.isLoadingShops = false;
|
this.isLoadingShops = false;
|
||||||
|
|
@ -492,7 +447,6 @@ export default {
|
||||||
this.selectedProviderNumber = null;
|
this.selectedProviderNumber = null;
|
||||||
}
|
}
|
||||||
this.shopIndex = mappedData.length;
|
this.shopIndex = mappedData.length;
|
||||||
this.displaySeeMoreLocationsLink = this.shopIndex < this.shopProviders.length;
|
|
||||||
if (mappedData.length > 0) {
|
if (mappedData.length > 0) {
|
||||||
this.lastSuccessfulZip = zipCode;
|
this.lastSuccessfulZip = zipCode;
|
||||||
}
|
}
|
||||||
|
|
@ -613,7 +567,6 @@ export default {
|
||||||
immediate: true,
|
immediate: true,
|
||||||
handler(newVal) {
|
handler(newVal) {
|
||||||
this.localShopProviderData = newVal;
|
this.localShopProviderData = newVal;
|
||||||
this.hasLoadedShopData = true;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue