From 19e419cd80f961a64be2c0b75540c8e5e9118649 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 21 Sep 2023 08:49:01 -0400 Subject: [PATCH 1/4] WIP --- .../appointment-type-question.vue | 4 +- .../service-location-helper.js | 15 +++++++ .../mobile-location-modal-questions.vue | 3 +- .../service-location/service-location.vue | 41 +++++++++++++++---- .../shop-question/shop-question.vue | 29 ++++++++++--- src/store/index.js | 1 + 6 files changed, 77 insertions(+), 16 deletions(-) diff --git a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue index 732382b1a..1653724f9 100644 --- a/src/layouts/service-location/appointment-type-question/appointment-type-question.vue +++ b/src/layouts/service-location/appointment-type-question/appointment-type-question.vue @@ -8,7 +8,7 @@ :answers="answersToDisplay" :groupName="groupName" buttonTypeString="listCard" - v-model="selectedValues" + v-model="selectedValue" :suppressError="suppressError" :validationRules="validationRules" isRequired /> @@ -55,7 +55,7 @@ export default { }) : []; }, - selectedValues: { + selectedValue: { get: function () { return this.modelValue; }, 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 19758bd07..39631496b 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 @@ -71,3 +71,18 @@ export async function getAvailabilityRating( return Promise.resolve(shopStatus); } + +// export function getMobileProvider(mobileProviderNumber) { +// const provider = { +// providerNumber: mobileProviderNumber, +// address: { +// streetAddress1: null, +// streetAddress2: null, +// city: null, +// state: null, +// zipCode: null, +// zipCodeCtu: null, +// }, +// }; +// return provider; +// } 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 0fef11cb1..8dbdf5c08 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 @@ -306,9 +306,10 @@ export default { margin-top: 0em; } -#mobileLocationLinkPromptId { +.update-mobile-location-text-link { white-space: pre-line; } + .text-black { color: $black; } diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 9fca2f77e..dbe7fc257 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -31,7 +31,7 @@ class="my-5" cmsWidgetName="AlertRecalNoMobileWidget" v-if="displayRecalibrationWarning" - @text-link-clicked="openModalAction" + @text-link-clicked="openRecalibrationInformationModal" alertClass="alert-warning" /> - + { @@ -195,16 +198,28 @@ export default { async reloadShopData(serviceZipCode) { const result = await this.loadData(serviceZipCode); this.initializeComponent(result.data); - + console.log("reloadShopData"); this.resetAnswers(); await nextTick(); await this.getNextShopsFromList(); }, getSelectedProviderObject(providerNumber) { - const provider = this.shopProviders?.find( - (provider) => provider.providerNumber == providerNumber - ); + const defaultProvider = { + providerNumber: null, + address: { + streetAddress1: null, + streetAddress2: null, + city: null, + state: null, + zipCode: null, + zipCodeCtu: null, + }, + }; + + const provider = + this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ?? + defaultProvider; return provider; }, @@ -223,7 +238,9 @@ export default { await nextTick(); - this.selectedProviderNumber = null; + if (newValue !== "Mobile") { + this.selectedProviderNumber = -1; + } await nextTick(); diff --git a/src/store/index.js b/src/store/index.js index cc8dc0b39..303475904 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1280,6 +1280,7 @@ export const actions = { ? convertGlassPieceToBackEndCompatibleFormat(order.damage.glassToReplace) : []; var payload = { + zipCode: order.serviceLocation.provider.zipCode, providerNumber: providerNumber, startDate: startDate, endDate: endDate, From 7d5565fccf07c89b8a2964d74244a1ef7d83f826 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 6 Oct 2023 08:26:19 -0400 Subject: [PATCH 2/4] Mobile provider number setting on service-location page --- .../service-location-helper.js | 37 +++++++++++------- .../service-location/service-location.vue | 29 ++++++++------ .../shop-question/shop-question.vue | 39 +++++-------------- 3 files changed, 50 insertions(+), 55 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 39631496b..1eb3aa8d3 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 @@ -1,5 +1,4 @@ import { storeActions } from "@/constants/store-actions"; -import store from "@/store"; import baseMixin from "@/mixins/base-mixin.js"; export async function getPricedMobileFeePart(serviceZipCode) { @@ -72,17 +71,25 @@ export async function getAvailabilityRating( return Promise.resolve(shopStatus); } -// export function getMobileProvider(mobileProviderNumber) { -// const provider = { -// providerNumber: mobileProviderNumber, -// address: { -// streetAddress1: null, -// streetAddress2: null, -// city: null, -// state: null, -// zipCode: null, -// zipCodeCtu: null, -// }, -// }; -// return provider; -// } +export class Provider { + constructor(providerNumber = null, address = null) { + this.providerNumber = providerNumber; + this.address = address ?? new ProviderAddress(); + } +} + +export class ProviderAddress { + constructor( + streetAddress = null, + city = null, + state = null, + zipCode = null, + zipCodeCtu = null + ) { + this.streetAddress = streetAddress; + this.city = city; + this.state = state; + this.zipCode = zipCode; + this.zipCodeCtu = zipCodeCtu; + } +} diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index dbe7fc257..cde35109f 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -110,6 +110,7 @@ import { settleAllPromises } from "@/helpers/layout-helper"; import { getPricedMobileFeePart, getServiceabilityDetails, + Provider, } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; import store from "@/store"; @@ -150,7 +151,7 @@ export default { mobileFeePart: null, zipContainsMilitaryBase: false, zipCodeCtu: null, - providerData: [], + providerData: null, }; }, async beforeRouteEnter(to, from, next) { @@ -200,7 +201,12 @@ export default { resultMap.serviceabilityDetails, resultMap.mobileFeePart ); + + // Initialize the Shop Question component vm.$refs.shopQuestion.initializeComponent(resultMap.shopQuestionInitialData); + + // Initialize the page level shop data + vm.providerData = resultMap.shopQuestionInitialData; }); }, computed: { @@ -422,18 +428,19 @@ export default { selectedAppointmentType: { handler(newValue) { if (newValue === "Mobile") { - this.selectedProvider = this.defaultProvider; - this.selectedProvider.providerNumber = this.providerData.mobileProviderNumber; + this.selectedProvider = new Provider(this.providerData.mobileProviderNumber); + } else { + this.selectedProvider = new Provider(); } }, - providerData: { - handler(newValue) { - if (newValue === "Mobile") { - this.selectedProvider = this.defaultProvider; - this.selectedProvider.providerNumber = - this.providerData.mobileProviderNumber; - } - }, + }, + providerData: { + handler(newValue) { + if (newValue === "Mobile") { + this.selectedProvider = new Provider(this.providerData.mobileProviderNumber); + } else { + this.selectedProvider = new Provider(); + } }, }, }, diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index f83631486..392866085 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -52,7 +52,7 @@ import { errorMessages } from "@/constants/error-messages"; import baseMixin from "@/mixins/base-mixin.js"; import { nextTick } from "vue"; -import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; +import { getAvailabilityRating, Provider } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); @@ -95,10 +95,9 @@ export default { return this.selectedValue?.providerNumber; }, set: function (newValue) { - console.log(`set: ${newValue}`); // Button Question only supports Number, or String data types so we must get the full object to emit this.selectedValue = - this.getSelectedProviderObject(newValue) ?? this.defaultProvider; + this.getSelectedProviderObject(newValue); }, }, displayDropoffInformation() { @@ -198,28 +197,15 @@ export default { async reloadShopData(serviceZipCode) { const result = await this.loadData(serviceZipCode); this.initializeComponent(result.data); - console.log("reloadShopData"); + this.resetAnswers(); await nextTick(); await this.getNextShopsFromList(); }, getSelectedProviderObject(providerNumber) { - const defaultProvider = { - providerNumber: null, - address: { - streetAddress1: null, - streetAddress2: null, - city: null, - state: null, - zipCode: null, - zipCodeCtu: null, - }, - }; - const provider = - this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ?? - defaultProvider; + this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ?? new Provider(); return provider; }, @@ -233,20 +219,15 @@ export default { }, watch: { selectedAppointmentType: { - async handler(newValue) { + // Question: Does it matter if this fires when clicking Mobile? Ideally it should not, but it doesn't seem to effect anything + // What we DON'T want to do here is create a dependency by checking if the selectedAppointmentType is Mobile as that has + // nothing to do with this component. We could mitigate this by showing / hiding this component with v-if but that messes + // up the component initialization on page load. + async handler() { this.resetAnswers(); await nextTick(); - - if (newValue !== "Mobile") { - this.selectedProviderNumber = -1; - } - - await nextTick(); - - if (newValue !== "Mobile") { - this.getNextShopsFromList(); - } + this.getNextShopsFromList(); }, }, shopProviders: { From 6e52253f62e3ba16f1df35d73846931a9bc62a35 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 6 Oct 2023 08:34:42 -0400 Subject: [PATCH 3/4] Prettified --- .../service-location/shop-question/shop-question.vue | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index 0cc934e65..9950b03f9 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -52,7 +52,10 @@ import { errorMessages } from "@/constants/error-messages"; import baseMixin from "@/mixins/base-mixin.js"; import { nextTick } from "vue"; -import { getAvailabilityRating, Provider } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; +import { + getAvailabilityRating, + Provider, +} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); @@ -96,8 +99,7 @@ export default { }, set: function (newValue) { // Button Question only supports Number, or String data types so we must get the full object to emit - this.selectedValue = - this.getSelectedProviderObject(newValue); + this.selectedValue = this.getSelectedProviderObject(newValue); }, }, displayDropoffInformation() { @@ -209,7 +211,8 @@ export default { }, getSelectedProviderObject(providerNumber) { const provider = - this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ?? new Provider(); + this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ?? + new Provider(); return provider; }, From aa47c33e69f41af8c0759c3a354145eab23fd93b Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 6 Oct 2023 09:38:22 -0400 Subject: [PATCH 4/4] Updated unit tests --- jest.config.js | 2 +- .../classes/provider-address.js | 15 ++++++++++++ .../service-location/classes/provider.js | 8 +++++++ .../service-location-helper.js | 23 ------------------- .../service-location/service-location.spec.js | 10 +++++++- .../service-location/service-location.vue | 4 +++- .../shop-question/shop-question.vue | 7 +++--- 7 files changed, 39 insertions(+), 30 deletions(-) create mode 100644 src/layouts/service-location/classes/provider-address.js create mode 100644 src/layouts/service-location/classes/provider.js diff --git a/jest.config.js b/jest.config.js index 93249f226..0f45a8a97 100644 --- a/jest.config.js +++ b/jest.config.js @@ -31,5 +31,5 @@ module.exports = { }, }, // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit - // silent: true, + silent: true, }; diff --git a/src/layouts/service-location/classes/provider-address.js b/src/layouts/service-location/classes/provider-address.js new file mode 100644 index 000000000..52f24109a --- /dev/null +++ b/src/layouts/service-location/classes/provider-address.js @@ -0,0 +1,15 @@ +export class ProviderAddress { + constructor( + streetAddress = null, + city = null, + state = null, + zipCode = null, + zipCodeCtu = null + ) { + this.streetAddress = streetAddress; + this.city = city; + this.state = state; + this.zipCode = zipCode; + this.zipCodeCtu = zipCodeCtu; + } +} diff --git a/src/layouts/service-location/classes/provider.js b/src/layouts/service-location/classes/provider.js new file mode 100644 index 000000000..dd9c7cd8c --- /dev/null +++ b/src/layouts/service-location/classes/provider.js @@ -0,0 +1,8 @@ +import { ProviderAddress } from "./provider-address"; + +export class Provider { + constructor(providerNumber = null, address = null) { + this.providerNumber = providerNumber; + this.address = address ?? new ProviderAddress(); + } +} 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 9ac30b976..cb4c06100 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 @@ -74,26 +74,3 @@ export async function getAvailabilityRating( return Promise.resolve(shopStatus); } - -export class Provider { - constructor(providerNumber = null, address = null) { - this.providerNumber = providerNumber; - this.address = address ?? new ProviderAddress(); - } -} - -export class ProviderAddress { - constructor( - streetAddress = null, - city = null, - state = null, - zipCode = null, - zipCodeCtu = null - ) { - this.streetAddress = streetAddress; - this.city = city; - this.state = state; - this.zipCode = zipCode; - this.zipCodeCtu = zipCodeCtu; - } -} diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js index 0073a9f65..6cd3bc2f1 100644 --- a/src/layouts/service-location/service-location.spec.js +++ b/src/layouts/service-location/service-location.spec.js @@ -7,7 +7,10 @@ import { getMountOptions } from "@/helpers/unit-test-helper"; import store from "@/store"; import baseMixin from "@/mixins/base-mixin"; -import { getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; +import { + getServiceabilityDetails, + Provider, +} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; // Define Mocks jest.mock("@/helpers/cms-content-helper", () => ({ @@ -16,6 +19,8 @@ jest.mock("@/helpers/cms-content-helper", () => ({ }), })); +jest.mock("./classes/provider"); + const mockGetPricedMobileFeePart = (mockServiceZipCode) => { let mobileFeePart = {}; @@ -397,6 +402,7 @@ describe("service-location.vue", () => { await wrapper.setData({ selectedAppointmentType: "Mobile", + providerData: { mobileProviderNumber: "01820" }, }); const mobileLocationQuestionsComponent = wrapper.findComponent({ @@ -448,6 +454,7 @@ describe("service-location.vue", () => { await wrapper.setData({ selectedAppointmentType: "Mobile", + providerData: { mobileProviderNumber: "01820" }, }); const mobileLocationQuestionsComponent = wrapper.findComponent({ @@ -511,6 +518,7 @@ describe("service-location.vue", () => { await wrapper.setData({ selectedAppointmentType: "Mobile", + providerData: { mobileProviderNumber: "01820" }, }); const mobileLocationQuestionsComponent = wrapper.findComponent({ diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index d03adaaa7..3e8587a7a 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -135,8 +135,10 @@ import { settleAllPromises } from "@/helpers/layout-helper"; import { getPricedMobileFeePart, getServiceabilityDetails, - Provider, } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; + +import { Provider } from "@/layouts/service-location/classes/provider"; + import store from "@/store"; // Validation diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index 9950b03f9..c3f31c68d 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -52,10 +52,9 @@ import { errorMessages } from "@/constants/error-messages"; import baseMixin from "@/mixins/base-mixin.js"; import { nextTick } from "vue"; -import { - getAvailabilityRating, - Provider, -} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; +import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper"; + +import { Provider } from "@/layouts/service-location/classes/provider"; defineRule("option-required", required(errorMessages.OPTION_REQUIRED));