diff --git a/jest.config.js b/jest.config.js
index ac8208423..efec3da84 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/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.spec.js b/src/layouts/service-location/service-location.spec.js
index 6cd3bc2f1..f8e9062b3 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@@ -7,10 +7,7 @@ import { getMountOptions } from "@/helpers/unit-test-helper";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
-import {
- getServiceabilityDetails,
- Provider,
-} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import { getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
// Define Mocks
jest.mock("@/helpers/cms-content-helper", () => ({
@@ -21,7 +18,7 @@ jest.mock("@/helpers/cms-content-helper", () => ({
jest.mock("./classes/provider");
-const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
+let mockGetPricedMobileFeePart = (mockServiceZipCode) => {
let mobileFeePart = {};
if (mockServiceZipCode === "43235") {
@@ -38,7 +35,7 @@ const mockGetPricedMobileFeePart = (mockServiceZipCode) => {
return Promise.resolve(mobileFeePart);
};
-const mockGetServiceabilityDetails = (mockServiceZipCode) => {
+let mockGetServiceabilityDetails = (mockServiceZipCode) => {
const serviceabilityDetails = {
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
@@ -49,6 +46,17 @@ const mockGetServiceabilityDetails = (mockServiceZipCode) => {
return Promise.resolve(serviceabilityDetails);
};
+let mockGetShopProviderData = (mockServiceZipCode) => {
+ const result = {
+ data: {
+ mobileProviderNumber: "001820",
+ shopProviders: [{}],
+ },
+ };
+
+ return Promise.resolve(result);
+};
+
jest.mock(
"@/layouts/service-location/helpers/service-location-helper/service-location-helper",
() => ({
@@ -58,6 +66,9 @@ jest.mock(
getServiceabilityDetails: jest.fn((mockServiceZipCode) => {
return mockGetServiceabilityDetails(mockServiceZipCode);
}),
+ getShopProviderData: jest.fn((mockServiceZipCode) => {
+ return mockGetShopProviderData(mockServiceZipCode);
+ }),
})
);
@@ -554,14 +565,13 @@ describe("service-location.vue", () => {
describe("should be logical AND when recalibration is defined.", () => {
test("T & T => T", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: true,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -582,14 +592,13 @@ describe("service-location.vue", () => {
test("T & F => F", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: false,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: false,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -610,14 +619,13 @@ describe("service-location.vue", () => {
test("F & T => F", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: false,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: false,
isRecalibrationServiceableMobile: true,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -638,14 +646,13 @@ describe("service-location.vue", () => {
test("F & F => F", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: false,
isRecalibrationServiceableInshop: false,
isGlassServiceableMobile: false,
isRecalibrationServiceableMobile: false,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -666,14 +673,13 @@ describe("service-location.vue", () => {
test("displayServiceableMobileOnly should be true if mobile is true and inshop is false.", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: false,
isRecalibrationServiceableInshop: false,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: true,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -695,14 +701,13 @@ describe("service-location.vue", () => {
test("displayServiceableMobileOnly should be false if mobile is false.", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: false,
isRecalibrationServiceableInshop: false,
isGlassServiceableMobile: false,
isRecalibrationServiceableMobile: false,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -724,14 +729,13 @@ describe("service-location.vue", () => {
test("displayServiceableMobileOnly should be false if inShop is true", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: true,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -753,14 +757,13 @@ describe("service-location.vue", () => {
test("displayNoShopsAlert should be true if inShop is false and mobile is false", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: false,
isRecalibrationServiceableInshop: false,
isGlassServiceableMobile: false,
isRecalibrationServiceableMobile: false,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -782,14 +785,13 @@ describe("service-location.vue", () => {
test("displayNoShopsAlert should be false if inShop is true and mobile is true", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: true,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -811,14 +813,13 @@ describe("service-location.vue", () => {
test("displayNoShopsAlert should be false if inShop is true", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: false,
isRecalibrationServiceableMobile: false,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -840,14 +841,13 @@ describe("service-location.vue", () => {
test("displayNoShopsAlert should be false if mobile is true", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: false,
isRecalibrationServiceableInshop: false,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: true,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -869,14 +869,13 @@ describe("service-location.vue", () => {
test("displayServiceableInshopOnly should be true if inshop is true and mobile is false", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: false,
isRecalibrationServiceableMobile: false,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -898,14 +897,13 @@ describe("service-location.vue", () => {
test("displayServiceableInshopOnly should be false if inshop is false", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: false,
isRecalibrationServiceableInshop: false,
isGlassServiceableMobile: false,
isRecalibrationServiceableMobile: false,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -927,14 +925,13 @@ describe("service-location.vue", () => {
test("displayServiceableInshopOnly should be false if mobile is true", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: true,
- })
- );
+ });
const { wrapper } = setupMocks({});
@@ -956,14 +953,13 @@ describe("service-location.vue", () => {
test("displayServiceableInshopOnly should be false in the dual/static recalibration scenario", async () => {
// Arrange
- getServiceabilityDetails.mockImplementation(() =>
+ mockGetServiceabilityDetails = () =>
Promise.resolve({
isGlassServiceableInshop: true,
isRecalibrationServiceableInshop: true,
isGlassServiceableMobile: true,
isRecalibrationServiceableMobile: false,
- })
- );
+ });
const { wrapper } = setupMocks({});
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index ee84f649d..64a8c0d3e 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -19,8 +19,7 @@
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase"
linkWidgetName="ServiceZipLinkWidget"
- modalWidgetName="ServiceZipModalWidget"
- :onZipUpdateCallback="reloadShopData" />
+ modalWidgetName="ServiceZipModalWidget" />
+ modalWidgetName="MobileLocationModalWidget" />
@@ -135,6 +133,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 +179,7 @@ export default {
mobileFeePart: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null,
- providerData: null,
+ shopProviderData: null,
};
},
async beforeRouteEnter(to, from, next) {
@@ -188,7 +187,10 @@ 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 +200,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 +208,10 @@ export default {
resultKey: "cmsContent",
promise: cmsContentPromise,
},
+ {
+ resultKey: "zipCodeData",
+ promise: zipCodeDataPromise,
+ },
{
resultKey: "mobileFeePart",
promise: mobileFeePartPromise,
@@ -215,12 +221,8 @@ export default {
promise: serviceabilityDetailsPromise,
},
{
- resultKey: "zipCodeData",
- promise: getZipCodeData,
- },
- {
- resultKey: "shopQuestionInitialData",
- promise: shopQuestionInitialDataPromise,
+ resultKey: "shopProviderData",
+ promise: shopProviderDataPromise,
},
];
@@ -232,14 +234,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 +251,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 +274,16 @@ 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 +348,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 +361,10 @@ export default {
if (mobileFeePart) {
this.mobileFeePart = mobileFeePart;
}
+
+ if (shopProviderData) {
+ this.shopProviderData = shopProviderData;
+ }
},
setContainsMilitaryBase(val) {
if (this.zipContainsMilitaryBase !== val) {
@@ -416,12 +413,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();
},
@@ -500,18 +503,14 @@ 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.spec.js b/src/layouts/service-location/shop-question/shop-question.spec.js
index 2904af1a9..82e48d470 100644
--- a/src/layouts/service-location/shop-question/shop-question.spec.js
+++ b/src/layouts/service-location/shop-question/shop-question.spec.js
@@ -61,6 +61,7 @@ const mockCmsContent = {
const cmsWidgetName = "ShopQuestionWidget";
const shopQuestionInitialData = {
+ mobileProviderNumber: "001820",
shopProviders: [
{
address: {
@@ -162,15 +163,18 @@ describe("shop-question.vue", () => {
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
isDisplayed: true,
+ shopProviderData: null,
},
mountOptions: {
attachTo: document.body,
},
});
- // Act
- wrapper.vm.initializeComponent(shopQuestionInitialData);
+ await wrapper.setProps({
+ shopProviderData: shopQuestionInitialData,
+ });
+ // Act
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
@@ -199,47 +203,6 @@ describe("shop-question.vue", () => {
});
it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
- // Arrange
- const { wrapper } = setupMocks({
- mixins: [mockMixin],
- props: {
- modelValue: {
- address: {
- city: "POWELL",
- country: "US",
- state: "OH",
- streetAddress: "3938 POWELL RD",
- zipCode: "43065",
- },
- distanceInMiles: 16.2690495685233,
- providerNumber: "003341",
- },
- serviceZipCode: "43081",
- selectedAppointmentType: "Dropoff",
- cmsWidgetName: cmsWidgetName,
- isDisplayed: true,
- },
- mountOptions: {
- attachTo: document.body,
- },
- });
-
- // Act
- wrapper.vm.initializeComponent(shopQuestionInitialData);
-
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
- await wrapper.vm.$nextTick();
-
- const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
-
- // Assert
- expect(showMoreShopsLink.exists()).toBe(true);
- expect(showMoreShopsLink.isVisible()).toBe(true);
- });
-
- it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
// Arrange
const alsoShopQuestionInitialData = {
shopProviders: [
@@ -276,6 +239,17 @@ describe("shop-question.vue", () => {
distanceInMiles: 11.738869544543,
providerNumber: "003343",
},
+ {
+ address: {
+ city: "COLUMBUS",
+ country: "US",
+ state: "OH",
+ streetAddress: "1670 HARMON AVE",
+ zipCode: "43223",
+ },
+ distanceInMiles: 15.9727889297435,
+ providerNumber: "006747",
+ },
],
};
@@ -297,6 +271,7 @@ describe("shop-question.vue", () => {
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
isDisplayed: true,
+ shopProviderData: null,
},
mountOptions: {
attachTo: document.body,
@@ -304,17 +279,94 @@ describe("shop-question.vue", () => {
});
// Act
- wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
+ await wrapper.setProps({
+ shopProviderData: alsoShopQuestionInitialData,
+ });
+ await wrapper.vm.$nextTick();
+ await wrapper.vm.$nextTick();
+ await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
// Assert
- expect(showMoreShopsLink.exists()).toBe(false);
+ expect(showMoreShopsLink.exists()).toBeTruthy();
+ expect(showMoreShopsLink.isVisible()).toBeTruthy();
});
- it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
+ it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
+ // Arrange
+ const alsoShopQuestionInitialData = {
+ shopProviders: [
+ {
+ address: {
+ city: "WESTERVILLE",
+ country: "US",
+ state: "OH",
+ streetAddress: "4403 EXECUTIVE PKWY",
+ zipCode: "43081",
+ },
+ distanceInMiles: 5.16769294095201,
+ providerNumber: "003335",
+ },
+ {
+ address: {
+ city: "WORTHINGTON",
+ country: "US",
+ state: "OH",
+ streetAddress: "760 DEARBORN PARK LN",
+ zipCode: "43085",
+ },
+ distanceInMiles: 10.5865432478478,
+ providerNumber: "001820",
+ },
+ ],
+ };
+
+ const { wrapper } = setupMocks({
+ mixins: [mockMixin],
+ props: {
+ modelValue: {
+ address: {
+ city: "POWELL",
+ country: "US",
+ state: "OH",
+ streetAddress: "3938 POWELL RD",
+ zipCode: "43065",
+ },
+ distanceInMiles: 16.2690495685233,
+ providerNumber: "003341",
+ },
+ serviceZipCode: "43081",
+ selectedAppointmentType: "Dropoff",
+ cmsWidgetName: cmsWidgetName,
+ isDisplayed: true,
+ shopProviderData: null,
+ },
+ mountOptions: {
+ attachTo: document.body,
+ },
+ });
+
+ // Act
+ await wrapper.setProps({
+ shopProviderData: alsoShopQuestionInitialData,
+ });
+
+ await wrapper.vm.$nextTick();
+
+ const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
+
+ await wrapper.vm.$nextTick();
+
+ // Assert
+ expect(showMoreShopsLink.exists()).toBeFalsy();
+ });
+
+ //TODO: Add test to ensure the "Show more locations" link is not visible when all the existing shops are displayed.
+
+ it("Should display the next three shops when the 'Show more locations' link is clicked", async () => {
// Arrange
const displayedAnswers = [
{
@@ -355,6 +407,7 @@ describe("shop-question.vue", () => {
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
isDisplayed: true,
+ shopProviderData: null,
},
mountOptions: {
attachTo: document.body,
@@ -362,7 +415,9 @@ describe("shop-question.vue", () => {
});
// Act
- wrapper.vm.initializeComponent(shopQuestionInitialData);
+ await wrapper.setProps({
+ shopProviderData: shopQuestionInitialData,
+ });
await wrapper.vm.$nextTick();
@@ -384,7 +439,7 @@ describe("shop-question.vue", () => {
await wrapper.vm.$nextTick();
- showMoreShopsLink.trigger("click");
+ showMoreShopsLink.trigger("click-event");
await wrapper.vm.$nextTick();
@@ -443,6 +498,7 @@ describe("shop-question.vue", () => {
serviceZipCode: "43081",
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
+ shopProviderData: null,
},
mountOptions: {
attachTo: document.body,
@@ -450,7 +506,9 @@ describe("shop-question.vue", () => {
});
// Act
- wrapper.vm.initializeComponent(shopQuestionInitialData);
+ await wrapper.setProps({
+ shopProviderData: shopQuestionInitialData,
+ });
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
@@ -468,15 +526,18 @@ describe("shop-question.vue", () => {
modelValue: null,
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
+ shopProviderData: null,
},
mountOptions: {
attachTo: document.body,
},
});
- // Act
- await wrapper.vm.initializeComponent(shopQuestionInitialData);
+ await wrapper.setProps({
+ shopProviderData: shopQuestionInitialData,
+ });
+ // Act
await wrapper.vm.$nextTick();
expect(wrapper.vm.answers.length).toEqual(3);
diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue
index c3f31c68d..fa00ab1dc 100644
--- a/src/layouts/service-location/shop-question/shop-question.vue
+++ b/src/layouts/service-location/shop-question/shop-question.vue
@@ -30,7 +30,7 @@
linkType="text"
:text="showMoreShopsLinkText"
href="#!"
- @click-event="getNextShopsFromList"
+ @click-event="getNextShopsFromList(3)"
:aria-label="showMoreShopsLinkText" />
@@ -43,8 +43,6 @@ import buttonQuestion from "@/digital-components/button-question/button-question
import shopListButton from "./shop-list-button/shop-list-button";
import textLink from "@/ux-components/text-link/text-link";
-import { storeActions } from "@/constants/store-actions.js";
-
// Supporting files
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
@@ -63,7 +61,6 @@ export default {
mixins: [baseMixin],
data() {
return {
- shopProviders: [],
shopListButton: shopListButton,
answers: [],
shopIndex: 0,
@@ -76,6 +73,7 @@ export default {
default: () => null,
},
selectedAppointmentType: String,
+ shopProviderData: Object,
cmsWidgetName: String,
validationRules: String,
isDisplayed: Boolean,
@@ -84,6 +82,9 @@ export default {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
+ shopProviders() {
+ return this.shopProviderData?.shopProviders ?? [];
+ },
selectedValue: {
get: function () {
return this.modelValue;
@@ -124,22 +125,6 @@ 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);
- },
async getNextShopsFromList(numberToGet = 3) {
const shopIterator = (array, n) => {
const l = array.length;
@@ -199,15 +184,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 +215,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();
}
},
},