From f0d7926b1007287bd5ba9ca659a35b720156c93d Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Mon, 16 Oct 2023 08:31:16 -0400 Subject: [PATCH] Additional refactoring per tech review --- .../service-location-helper.js | 12 +++ .../mobile-location-modal-questions.vue | 8 +- .../service-location/service-location.vue | 90 +++++++++---------- .../service-zip-modal-question.vue | 9 +- .../shop-question/shop-question.vue | 68 +++++++------- 5 files changed, 86 insertions(+), 101 deletions(-) diff --git a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js index cb4c06100..26f2e6962 100644 --- a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js +++ b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js @@ -46,6 +46,18 @@ export async function getServiceabilityDetails(serviceZipCode, lineItems, pageNa return Promise.resolve(serviceabilityDetails); } +export async function getShopProviderData(serviceZipCode) { + const shopProviderData = await baseMixin.methods.dispatchStoreActionWithLogging( + storeActions.GET_PROVIDERS, + { + serviceZipCode: serviceZipCode, + }, + "service-location" + ); + + return Promise.resolve(shopProviderData); +} + export async function getAvailabilityRating( startDate, endDate, diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue index 58420ce3a..8bac8dbb4 100644 --- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue +++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue @@ -145,9 +145,6 @@ export default { alertInvalidZipWidgetName: String, customComponentId: String, validationRules: String, - onZipUpdateCallback: { - type: Function, - }, }, computed: { mobileLocationLinkPromptText() { @@ -256,10 +253,7 @@ export default { this.$emit("updated-serviceability", serviceabilityDetails.data); this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase); - if (this.onZipUpdateCallback) { - await this.onZipUpdateCallback(serviceZipCode); - } - // Update the page level model + // update the page level model this.$emit("update:modelValue", this.internalModel); this.closeModal(); diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 674c47409..b1f296a60 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -20,7 +20,7 @@ @updated-contains-military-base="setContainsMilitaryBase" linkWidgetName="ServiceZipLinkWidget" modalWidgetName="ServiceZipModalWidget" - :onZipUpdateCallback="reloadShopData" /> + /> + /> @@ -135,6 +135,7 @@ import { settleAllPromises } from "@/helpers/layout-helper"; import { getPricedMobileFeePart, getServiceabilityDetails, + getShopProviderData, } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; import { Provider } from "@/layouts/service-location/classes/provider"; @@ -180,7 +181,7 @@ export default { mobileFeePart: null, zipContainsMilitaryBase: false, zipCodeCtu: null, - providerData: null, + shopProviderData: null, }; }, async beforeRouteEnter(to, from, next) { @@ -188,7 +189,7 @@ export default { const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const serviceZipCode = store.getters.order.serviceLocation.zipCode; - const getZipCodeData = baseMixin.methods.getZipCodeData(serviceZipCode, "service-location"); + const zipCodeDataPromise = baseMixin.methods.getZipCodeData(serviceZipCode, "service-location"); const serviceabilityDetailsPromise = getServiceabilityDetails( serviceZipCode, @@ -198,7 +199,7 @@ export default { const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location"); - const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode); + const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode); // Settle promises and get results const promiseResultMap = [ @@ -206,6 +207,10 @@ export default { resultKey: "cmsContent", promise: cmsContentPromise, }, + { + resultKey: "zipCodeData", + promise: zipCodeDataPromise, + }, { resultKey: "mobileFeePart", promise: mobileFeePartPromise, @@ -215,12 +220,8 @@ export default { promise: serviceabilityDetailsPromise, }, { - resultKey: "zipCodeData", - promise: getZipCodeData, - }, - { - resultKey: "shopQuestionInitialData", - promise: shopQuestionInitialDataPromise, + resultKey: "shopProviderData", + promise: shopProviderDataPromise, }, ]; @@ -232,14 +233,9 @@ export default { vm.setData( resultMap.zipCodeData, resultMap.serviceabilityDetails, - resultMap.mobileFeePart + resultMap.mobileFeePart, + resultMap.shopProviderData ); - - // Initialize the Shop Question component - vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData); - - // Initialize the page level shop data - vm.providerData = resultMap.shopQuestionInitialData; }); }, computed: { @@ -254,7 +250,7 @@ export default { if (newValue.zipCode !== this.zipCode) { this.resetMobileLocation(); this.selectedAppointmentType = null; - this.selectedProvider = null; + this.selectedProvider = new Provider(); } this.state = newValue.state; @@ -277,20 +273,14 @@ export default { }; }, set: function (newValue) { - this.streetAddress = newValue.addressQuestions.streetAddress; - this.apartmentNumberOrBusinessName = - newValue.addressQuestions.apartmentNumberOrBusinessName; - this.city = newValue.addressQuestions.city; - this.state = newValue.addressQuestions.state; - this.zipCode = newValue.addressQuestions.zipCode; - this.isVehicleProtected = newValue.isVehicleProtected; - - if (newValue.zipCode !== this.zipCode) { - if (!this.selectedAppointmentType == "Mobile") { - this.selectedAppointmentType = null; - } - this.selectedProvider = null; + if (newValue.addressQuestions.zipCode !== this.zipCode) { + getShopProviderData(newValue.addressQuestions.zipCode).then((result) => { + this.shopProviderData = result.data; + this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber); + }); } + + this.setMobileLocation(newValue); }, }, isServiceableMobile() { @@ -355,7 +345,7 @@ export default { store.getters.payment.isInsurance !== null ); }, - setData(zipCodeData, serviceabilityDetails, mobileFeePart) { + setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) { if (zipCodeData) { this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase; this.zipCodeCtu = zipCodeData.zipCodeCtu; @@ -368,6 +358,10 @@ export default { if (mobileFeePart) { this.mobileFeePart = mobileFeePart; } + + if (shopProviderData) { + this.shopProviderData = shopProviderData; + } }, setContainsMilitaryBase(val) { if (this.zipContainsMilitaryBase !== val) { @@ -416,12 +410,18 @@ export default { this.isRecalibrationServiceableMobile = serviceabilityDetails.isRecalibrationServiceableMobile; }, + setMobileLocation(mobileLocation) { + this.streetAddress = mobileLocation.addressQuestions.streetAddress; + this.apartmentNumberOrBusinessName = + mobileLocation.addressQuestions.apartmentNumberOrBusinessName; + this.city = mobileLocation.addressQuestions.city; + this.state = mobileLocation.addressQuestions.state; + this.zipCode = mobileLocation.addressQuestions.zipCode; + this.isVehicleProtected = mobileLocation.isVehicleProtected; + }, async reloadShopData(zipCode) { await this.$refs.shopQuestion.reloadShopData(zipCode); }, - setUpdatedShopList(providerData) { - this.providerData = providerData; - }, openRecalibrationInformationModal() { this.recalibrationInformationModal.openModal(); }, @@ -497,18 +497,12 @@ export default { }, watch: { selectedAppointmentType: { - handler(newValue) { + async handler(newValue) { if (newValue === "Mobile") { - this.selectedProvider = new Provider(this.providerData.mobileProviderNumber); - } else { - this.selectedProvider = new Provider(); - } - }, - }, - providerData: { - handler(newValue) { - if (newValue === "Mobile") { - this.selectedProvider = new Provider(this.providerData.mobileProviderNumber); + getShopProviderData(this.zipCode).then(async (result) => { + this.shopProviderData = result.data; + this.selectedProvider = new Provider(this.shopProviderData.mobileProviderNumber); + }); } else { this.selectedProvider = new Provider(); } diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 34a3d23c1..35276228d 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -68,9 +68,6 @@ export default { }, linkWidgetName: String, modalWidgetName: String, - onZipUpdateCallback: { - type: Function, - }, }, computed: { serviceZipLinkText() { @@ -164,13 +161,9 @@ export default { this.$emit("updated-serviceability", serviceabilityDetails.data); this.$emit("updated-contains-military-base", zipCodeData.containsMilitaryBase); - // Update the page level model + // update the page level model this.$emit("update:modelValue", this.internalModel); - if (this.onZipUpdateCallback) { - await this.onZipUpdateCallback(serviceZipCode); - } - this.closeModal(); } } else { diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index c3f31c68d..30b39f1b0 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -63,7 +63,6 @@ export default { mixins: [baseMixin], data() { return { - shopProviders: [], shopListButton: shopListButton, answers: [], shopIndex: 0, @@ -76,6 +75,7 @@ export default { default: () => null, }, selectedAppointmentType: String, + shopProviderData: Array, cmsWidgetName: String, validationRules: String, isDisplayed: Boolean, @@ -84,6 +84,9 @@ export default { questionText() { return this.getCmsContent(this.cmsWidgetName, "QuestionText"); }, + shopProviders() { + return this.shopProviderData?.shopProviders ?? []; + }, selectedValue: { get: function () { return this.modelValue; @@ -124,22 +127,23 @@ export default { }, }, methods: { - loadInitialData(serviceZipCode) { - return this.loadData(serviceZipCode); - }, - loadData(serviceZipCode) { - return baseMixin.methods.dispatchStoreActionWithLogging( - storeActions.GET_PROVIDERS, - { - serviceZipCode: serviceZipCode, - }, - "service-location" - ); - }, - initializeComponent(shopQuestionInitialData) { - this.shopProviders = shopQuestionInitialData.shopProviders; - this.$emit("updated-shop-list", shopQuestionInitialData); - }, + // loadInitialData(serviceZipCode) { + // return this.loadData(serviceZipCode); + // }, + // loadData(serviceZipCode) { + // return getShopProviders(serviceZipCode); + // // return baseMixin.methods.dispatchStoreActionWithLogging( + // // storeActions.GET_PROVIDERS, + // // { + // // serviceZipCode: serviceZipCode, + // // }, + // // "service-location" + // // ); + // }, + // initializeComponent(shopQuestionInitialData) { + // this.shopProviders = shopQuestionInitialData.shopProviders; + // this.$emit("updated-shop-list", shopQuestionInitialData); + // }, async getNextShopsFromList(numberToGet = 3) { const shopIterator = (array, n) => { const l = array.length; @@ -199,15 +203,6 @@ export default { this.answers = []; this.shopIndex = 0; }, - async reloadShopData(serviceZipCode) { - const result = await this.loadData(serviceZipCode); - this.initializeComponent(result.data); - - this.resetAnswers(); - - await nextTick(); - await this.getNextShopsFromList(); - }, getSelectedProviderObject(providerNumber) { const provider = this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ?? @@ -239,19 +234,16 @@ export default { shopProviders: { async handler(newValue) { await nextTick(); + const selectedShopIndex = this.getSelectedProviderIndex( + newValue, + this.selectedProviderNumber + ); - if (this.selectedAppointmentType) { - const selectedShopIndex = this.getSelectedProviderIndex( - newValue, - this.selectedProviderNumber - ); - - if (selectedShopIndex >= 3) { - await this.getNextShopsFromList(selectedShopIndex + 1); - } else { - await this.getNextShopsFromList(); - await nextTick(); - } + if (selectedShopIndex >= 3) { + await this.getNextShopsFromList(selectedShopIndex + 1); + } else { + await this.getNextShopsFromList(); + await nextTick(); } }, },