jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into feature/CSR-1115

Browse source
This commit is contained in:
CarlNation 2023-05-11 15:40:00 -04:00
commit 31edfd2208
12 changed files with 504 additions and 402 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
jest.config.js
View file

@ -28,4 +28,6 @@ module.exports = {
// Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90 // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
}, },
}, },
// Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit
// silent: true,
}; };

2
src/constants/endpoints.js
View file

@ -94,7 +94,7 @@ const endpoints = {
url: "/location/api/v1/location/alert-reasons", url: "/location/api/v1/location/alert-reasons",
method: "GET", method: "GET",
}, },
GetProviderLocations: { GetProviders: {
url: "/location/api/v1/location/providers", url: "/location/api/v1/location/providers",
method: "GET", method: "GET",
}, },

2
src/constants/store-actions.js
View file

@ -32,7 +32,7 @@ const storeActions = {
GET_MOLDING_QUESTIONS: "getMoldingQuestions", GET_MOLDING_QUESTIONS: "getMoldingQuestions",
GET_MOBILE_FEE_PART: "getMobileFeePart", GET_MOBILE_FEE_PART: "getMobileFeePart",
GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails", GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
GET_PROVIDER_LOCATIONS: "getProviderLocations", GET_PROVIDERS: "getProviders",
SAVE_SESSION: "saveSession", SAVE_SESSION: "saveSession",
LOAD_SESSION: "loadSession", LOAD_SESSION: "loadSession",
UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse", UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",

3
src/digital-components/button-question/button-question.vue
View file

@ -121,7 +121,7 @@ export default {
isOverflowScrollable: Boolean, isOverflowScrollable: Boolean,
isWide: Boolean, isWide: Boolean,
isCashOrInsurance: Boolean, isCashOrInsurance: Boolean,
modelValue: [Array, Number, String], modelValue: [Array, Number, String, Object],
value: [Number, String], value: [Number, String],
validationRules: String, validationRules: String,
suppressError: Boolean, suppressError: Boolean,
@ -129,7 +129,6 @@ export default {
valueToLogType: String, valueToLogType: String,
additionalButtonStyling: String, additionalButtonStyling: String,
isSmallQuestionText: Boolean, isSmallQuestionText: Boolean,
availability: String,
customButtonQuestionId: String, customButtonQuestionId: String,
logDisplayedValuesEvent: { logDisplayedValuesEvent: {
type: Boolean, type: Boolean,

6
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -66,6 +66,7 @@
<script> <script>
import textLink from "@/ux-components/text-link/text-link"; import textLink from "@/ux-components/text-link/text-link";
import { Modal } from "bootstrap"; import { Modal } from "bootstrap";
import baseMixin from "@/mixins/base-mixin.js";
export default { export default {
name: "menuModal", name: "menuModal",
@ -92,10 +93,7 @@ export default {
show() { show() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72; this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
this.isActive = true; this.isActive = true;
document.querySelector(".page-container-grouped-styles").scrollTo({ this.scrollToPageTop();
top: 0,
behavior: "smooth",
});
}, },
hide() { hide() {
var self = this; var self = this;

7
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -137,6 +137,9 @@ export default {
alertInvalidZipWidgetName: String, alertInvalidZipWidgetName: String,
customComponentId: String, customComponentId: String,
validationRules: String, validationRules: String,
onZipUpdateCallback: {
type: Function,
},
}, },
computed: { computed: {
mobileLocationLinkPromptText() { mobileLocationLinkPromptText() {
@ -257,6 +260,10 @@ export default {
// Update the page level model // Update the page level model
this.$emit("update:modelValue", this.internalModel); this.$emit("update:modelValue", this.internalModel);
if (this.onZipUpdateCallback) {
await this.onZipUpdateCallback(serviceZipCode);
}
this.closeModal(); this.closeModal();
} }
}, },

2
src/layouts/service-location/service-location.spec.js
View file

@ -186,7 +186,7 @@ beforeEach(() => {
describe("service-location.vue", () => { describe("service-location.vue", () => {
describe("beforeRouteEnter", () => { describe("beforeRouteEnter", () => {
test("on load sets the mobile fee part when an service zip code has already been provided", async () => { test("on load sets the mobile fee part when a service zip code has already been provided", async () => {
// Arrange // Arrange
const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});

33
src/layouts/service-location/service-location.vue
View file

@ -12,7 +12,8 @@
@updated-serviceability="setServiceabilityDetails" @updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase" @updated-contains-military-base="setContainsMilitaryBase"
linkWidgetName="ServiceZipLinkWidget" linkWidgetName="ServiceZipLinkWidget"
modalWidgetName="ServiceZipModalWidget" /> modalWidgetName="ServiceZipModalWidget"
:onZipUpdateCallback="reloadShopData" />
<alert <alert
ref="alertMilitaryBaseZip" ref="alertMilitaryBaseZip"
class="my-5" class="my-5"
@ -64,17 +65,16 @@
validationRules="mobile-location-required" validationRules="mobile-location-required"
ref="mobileLocationQuestions" ref="mobileLocationQuestions"
linkWidgetName="MobileLocationLinkWidget" linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget" /> modalWidgetName="MobileLocationModalWidget"
:onZipUpdateCallback="reloadShopData" />
<Transition name="fade" mode="out-in"> <Transition name="fade" mode="out-in">
<shopQuestion <shopQuestion
ref="shopQuestion" ref="shopQuestion"
v-show=" v-show="isShopQuestionDisplayed"
selectedAppointmentType === 'Inshop' || v-model="selectedProvider"
selectedAppointmentType === 'Dropoff'
"
v-model="providerNumber"
:serviceZipCode="zipCode" :serviceZipCode="zipCode"
:selectedAppointmentType="selectedAppointmentType" :selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" /> cmsWidgetName="ShopQuestionWidget" />
</Transition> </Transition>
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" /> <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
@ -148,7 +148,7 @@ export default {
isGlassServiceableMobile: null, isGlassServiceableMobile: null,
isRecalibrationServiceableMobile: null, isRecalibrationServiceableMobile: null,
selectedAppointmentType: null, selectedAppointmentType: null,
providerNumber: null, selectedProvider: null,
mobileFeePart: null, mobileFeePart: null,
zipContainsMilitaryBase: false, zipContainsMilitaryBase: false,
}; };
@ -164,7 +164,7 @@ export default {
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode); const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(); const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [
@ -215,7 +215,7 @@ export default {
if (newValue.zipCode !== this.zipCode) { if (newValue.zipCode !== this.zipCode) {
this.resetMobileLocation(); this.resetMobileLocation();
this.selectedAppointmentType = null; this.selectedAppointmentType = null;
this.providerNumber = null; this.selectedProvider = null;
} }
this.state = newValue.state; this.state = newValue.state;
@ -250,7 +250,7 @@ export default {
if (!this.selectedAppointmentType == "Mobile") { if (!this.selectedAppointmentType == "Mobile") {
this.selectedAppointmentType = null; this.selectedAppointmentType = null;
} }
this.providerNumber = null; this.selectedProvider = null;
} }
}, },
}, },
@ -268,6 +268,12 @@ export default {
return this.isGlassServiceableInshop; return this.isGlassServiceableInshop;
} }
}, },
isShopQuestionDisplayed() {
return (
this.selectedAppointmentType === "Inshop" ||
this.selectedAppointmentType === "Dropoff"
);
},
// Specifically check for isRecalibrationServiceableMobile === false, not null or true. // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
requiresInshopRecalibration() { requiresInshopRecalibration() {
return ( return (
@ -304,7 +310,7 @@ export default {
store.getters.payment.isInsurance !== null store.getters.payment.isInsurance !== null
); );
}, },
setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopQuestionData) { setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
if (zipCodeData) { if (zipCodeData) {
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase; this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
} }
@ -364,6 +370,9 @@ export default {
openModalAction(modalName) { openModalAction(modalName) {
this.$refs[modalName].openModal(); this.$refs[modalName].openModal();
}, },
async reloadShopData() {
await this.$refs.shopQuestion.reloadShopData(this.zipCode);
},
}, },
components: { components: {
alert, alert,

7
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -69,6 +69,9 @@ export default {
}, },
linkWidgetName: String, linkWidgetName: String,
modalWidgetName: String, modalWidgetName: String,
onZipUpdateCallback: {
type: Function,
},
}, },
setup() { setup() {
const textboxQuestionWidgetName = "ServiceZipQuestionWidget"; const textboxQuestionWidgetName = "ServiceZipQuestionWidget";
@ -161,6 +164,10 @@ export default {
// Update the page level model // Update the page level model
this.$emit("update:modelValue", this.internalModel); this.$emit("update:modelValue", this.internalModel);
if (this.onZipUpdateCallback) {
await this.onZipUpdateCallback(serviceZipCode);
}
this.closeModal(); this.closeModal();
} }
} else { } else {

703
src/layouts/service-location/shop-question/shop-question.spec.js
View file

@ -6,7 +6,7 @@ import shopQuestion from "./shop-question";
jest.mock("@/mixins/base-mixin", () => ({ jest.mock("@/mixins/base-mixin", () => ({
methods: { methods: {
dispatchStoreAction(action, items, encode) { dispatchStoreAction(action, items, encode) {
if (action === mockGetProviderLocationsStoreAction) { if (action === mockGetProvidersStoreAction) {
return new Promise((resolve) => { return new Promise((resolve) => {
resolve(mockNewShopList); resolve(mockNewShopList);
}); });
@ -16,35 +16,41 @@ jest.mock("@/mixins/base-mixin", () => ({
}, },
})); }));
const mockGetProviderLocationsStoreAction = storeActions.GET_PROVIDER_LOCATIONS; const mockGetProvidersStoreAction = storeActions.GET_PROVIDERS;
const mockNewShopList = { const mockNewShopList = {
data: [ shopProviders: [
{ {
city: "Far", address: {
country: "United States", city: "COLUMBUS",
distance: 100, country: "US",
providerNumber: "129", state: "OH",
state: "OH", streetAddress: "1670 HARMON AVE",
streetAddress: "555 First Capital Ln", zipCode: "43223",
zipCode: "45601", },
distanceInMiles: 15.9727889297435,
providerNumber: "006747",
}, },
{ {
city: "Farther", address: {
country: "United States", city: "POWELL",
distance: 200, country: "US",
providerNumber: "130", state: "OH",
state: "OH", streetAddress: "3938 POWELL RD",
streetAddress: "5486 N Grove Rd", zipCode: "43065",
zipCode: "43215", },
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
}, },
{ {
city: "Farthest (Ever)", address: {
country: "United States", city: "Columbus",
distance: 380.5, country: "US",
providerNumber: "131", state: "OH",
state: "OH", streetAddress: "4580 W Broad St",
streetAddress: "1670 Bongo Ave D", zipCode: "43228",
zipCode: "43223", },
distanceInMiles: 19.4618116611001,
providerNumber: "003342",
}, },
], ],
}; };
@ -53,90 +59,77 @@ const mockCmsContent = {
QuestionText: "Select a shop:", QuestionText: "Select a shop:",
}; };
const cmsWidgetName = "AppointmentTypeQuestionWidget"; const cmsWidgetName = "ShopQuestionWidget";
const shopQuestionInitialData = [ const shopQuestionInitialData = {
{ shopProviders: [
city: "Worthington", {
country: "United States", address: {
distance: 1.5, city: "WESTERVILLE",
providerNumber: "123", country: "US",
state: "OH", state: "OH",
streetAddress: "760 Dearborn Park Ln", streetAddress: "4403 EXECUTIVE PKWY",
zipCode: "43085", zipCode: "43081",
}, },
{ distanceInMiles: 5.16769294095201,
city: "Columbus", providerNumber: "003335",
country: "United States", },
distance: 4.5, {
providerNumber: "124", address: {
state: "OH", city: "WORTHINGTON",
streetAddress: "5486 N Hamilton Rd", country: "US",
zipCode: "43230", state: "OH",
}, streetAddress: "760 DEARBORN PARK LN",
{ zipCode: "43085",
city: "Powell", },
country: "United States", distanceInMiles: 10.5865432478478,
distance: 7, providerNumber: "001820",
providerNumber: "125", },
state: "OH", {
streetAddress: "1670 Harmon Ave C", address: {
zipCode: "43223", city: "COLUMBUS",
}, country: "US",
{ state: "OH",
city: "Chillicothe", streetAddress: "5015 N HIGH ST",
country: "United States", zipCode: "43214",
distance: 41.5, },
providerNumber: "126", distanceInMiles: 11.738869544543,
state: "OH", providerNumber: "003343",
streetAddress: "555 First Capital Ln", },
zipCode: "45601", {
}, address: {
{ city: "COLUMBUS",
city: "Grove City", country: "US",
country: "United States", state: "OH",
distance: 4.5, streetAddress: "1670 HARMON AVE",
providerNumber: "127", zipCode: "43223",
state: "OH", },
streetAddress: "5486 N Grove Rd", distanceInMiles: 15.9727889297435,
zipCode: "43215", providerNumber: "006747",
}, },
{ {
city: "Dayton", address: {
country: "United States", city: "POWELL",
distance: 80.5, country: "US",
providerNumber: "128", state: "OH",
state: "OH", streetAddress: "3938 POWELL RD",
streetAddress: "1670 Bongo Ave D", zipCode: "43065",
zipCode: "43223", },
}, distanceInMiles: 16.2690495685233,
{ providerNumber: "003341",
city: "Far", },
country: "United States", {
distance: 100, address: {
providerNumber: "129", city: "Columbus",
state: "OH", country: "US",
streetAddress: "555 First Capital Ln", state: "OH",
zipCode: "45601", streetAddress: "4580 W Broad St",
}, zipCode: "43228",
{ },
city: "Farther", distanceInMiles: 19.4618116611001,
country: "United States", providerNumber: "003342",
distance: 200, },
providerNumber: "130", ],
state: "OH", };
streetAddress: "5486 N Grove Rd",
zipCode: "43215",
},
{
city: "Farthest (Ever)",
country: "United States",
distance: 380.5,
providerNumber: "131",
state: "OH",
streetAddress: "1670 Bongo Ave D",
zipCode: "43223",
},
];
const mockMixin = { const mockMixin = {
methods: { methods: {
@ -151,207 +144,251 @@ const mockMixin = {
}; };
describe("shop-question.vue", () => { describe("shop-question.vue", () => {
it("Should display first three shops when an appointment type has already been selected", async () => { beforeEach(() => {
// Arrange/Act
const container = document.createElement("div"); const container = document.createElement("div");
container.scrollTo = jest.fn(); container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles"); container.classList.add("page-container-grouped-styles");
document.body.appendChild(container); document.body.appendChild(container);
});
it("Should display first three shops when an appointment type has already been selected", async () => {
// Arrange
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mixins: [mockMixin], mixins: [mockMixin],
props: { props: {
modelValue: null, modelValue: {
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: null,
},
serviceZipCode: "43081", serviceZipCode: "43081",
selectedAppointmentType: "Dropoff", selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName, cmsWidgetName: cmsWidgetName,
isDisplayed: true,
}, },
mountOptions: { mountOptions: {
attachTo: document.body, attachTo: document.body,
}, },
}); });
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act
wrapper.vm.initializeComponent(shopQuestionInitialData); wrapper.vm.initializeComponent(shopQuestionInitialData);
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
// Assert // Assert
expect(wrapper.vm.answers.length).toEqual(3);
expect(wrapper.vm.answers).toEqual([ expect(wrapper.vm.answers).toEqual([
{ {
Name: "123", buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
buttonLabel: "Worthington", buttonLabel: "4403 Executive Pkwy",
buttonLabelSubCopy: "1.5 mi", buttonLabelSubCopy: "5 mi",
value: "003335",
},
{
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085", buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
buttonLabel: "760 Dearborn Park Ln",
buttonLabelSubCopy: "10.5 mi",
value: "001820",
}, },
{ {
Name: "124", buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
buttonLabel: "Columbus", buttonLabel: "5015 N High St",
buttonLabelSubCopy: "4.5 mi", buttonLabelSubCopy: "11.5 mi",
buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230", value: "003343",
},
{
Name: "125",
buttonLabel: "Powell",
buttonLabelSubCopy: "7 mi",
buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
}, },
]); ]);
}); });
it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => { it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
// Arrange/Act // Arrange
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mixins: [mockMixin], mixins: [mockMixin],
props: { props: {
modelValue: null, modelValue: {
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
serviceZipCode: "43081", serviceZipCode: "43081",
selectedAppointmentType: "Dropoff", selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName, cmsWidgetName: cmsWidgetName,
isDisplayed: true,
}, },
mountOptions: { mountOptions: {
attachTo: document.body, attachTo: document.body,
}, },
}); });
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act
wrapper.vm.initializeComponent(shopQuestionInitialData); wrapper.vm.initializeComponent(shopQuestionInitialData);
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
// Assert // Assert
expect(showMoreShopsLink.exists()).toBe(true); 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 () => { it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
// Arrange/Act // Arrange
const container = document.createElement("div"); const alsoShopQuestionInitialData = {
container.scrollTo = jest.fn(); shopProviders: [
{
container.classList.add("page-container-grouped-styles"); address: {
document.body.appendChild(container); city: "WESTERVILLE",
country: "US",
const alsoShopQuestionInitialData = [ state: "OH",
{ streetAddress: "4403 EXECUTIVE PKWY",
city: "Worthington", zipCode: "43081",
country: "United States", },
distance: 1.5, distanceInMiles: 5.16769294095201,
providerNumber: "123", providerNumber: "003335",
state: "OH", },
streetAddress: "760 Dearborn Park Ln", {
zipCode: "43085", address: {
}, city: "WORTHINGTON",
{ country: "US",
city: "Columbus", state: "OH",
country: "United States", streetAddress: "760 DEARBORN PARK LN",
distance: 4.5, zipCode: "43085",
providerNumber: "124", },
state: "OH", distanceInMiles: 10.5865432478478,
streetAddress: "5486 N Hamilton Rd", providerNumber: "001820",
zipCode: "43230", },
}, {
{ address: {
city: "Powell", city: "COLUMBUS",
country: "United States", country: "US",
distance: 7, state: "OH",
providerNumber: "125", streetAddress: "5015 N HIGH ST",
state: "OH", zipCode: "43214",
streetAddress: "1670 Harmon Ave C", },
zipCode: "43223", distanceInMiles: 11.738869544543,
}, providerNumber: "003343",
]; },
],
};
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mixins: [mockMixin], mixins: [mockMixin],
props: { props: {
modelValue: null, modelValue: {
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
serviceZipCode: "43081", serviceZipCode: "43081",
selectedAppointmentType: "Dropoff", selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName, cmsWidgetName: cmsWidgetName,
isDisplayed: true,
}, },
mountOptions: { mountOptions: {
attachTo: document.body, attachTo: document.body,
}, },
}); });
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act
wrapper.vm.initializeComponent(alsoShopQuestionInitialData); wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
// Assert // Assert
expect(showMoreShopsLink.exists()).toBe(false); expect(showMoreShopsLink.exists()).toBe(true);
expect(showMoreShopsLink.isVisible()).toBe(false);
}); });
it("Should display the next three shops when the 'Show more location' link is clicked", async () => { it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
const container = document.createElement("div"); // Arrange
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
const displayedAnswers = [ const displayedAnswers = [
{ {
Name: "123", buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
buttonLabel: "Worthington", buttonLabel: "4403 Executive Pkwy",
buttonLabelSubCopy: "1.5 mi", buttonLabelSubCopy: "5 mi",
value: "003335",
},
{
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085", buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
buttonLabel: "760 Dearborn Park Ln",
buttonLabelSubCopy: "10.5 mi",
value: "001820",
}, },
{ {
Name: "124", buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
buttonLabel: "Columbus", buttonLabel: "5015 N High St",
buttonLabelSubCopy: "4.5 mi", buttonLabelSubCopy: "11.5 mi",
buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230", value: "003343",
},
{
Name: "125",
buttonLabel: "Powell",
buttonLabelSubCopy: "7 mi",
buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
}, },
]; ];
// Arrange/Act
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mixins: [mockMixin], mixins: [mockMixin],
props: { props: {
modelValue: null, modelValue: {
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
serviceZipCode: "43081", serviceZipCode: "43081",
selectedAppointmentType: "Dropoff", selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName, cmsWidgetName: cmsWidgetName,
isDisplayed: true,
}, },
mountOptions: { mountOptions: {
attachTo: document.body, attachTo: document.body,
}, },
}); });
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
await wrapper.vm.$nextTick();
wrapper.vm.shops = shopQuestionInitialData;
wrapper.vm.answers = displayedAnswers; wrapper.vm.answers = displayedAnswers;
wrapper.vm.shopIndex = 3; wrapper.vm.shopIndex = 3;
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" }); const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
await wrapper.vm.$nextTick();
showMoreShopsLink.trigger("click"); showMoreShopsLink.trigger("click");
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
@ -360,88 +397,96 @@ describe("shop-question.vue", () => {
expect(wrapper.vm.answers.length).toBe(6); expect(wrapper.vm.answers.length).toBe(6);
expect(wrapper.vm.answers).toEqual([ expect(wrapper.vm.answers).toEqual([
{ {
Name: "123", buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
buttonLabel: "Worthington", buttonLabel: "4403 Executive Pkwy",
buttonLabelSubCopy: "1.5 mi", buttonLabelSubCopy: "5 mi",
value: "003335",
},
{
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085", buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
buttonLabel: "760 Dearborn Park Ln",
buttonLabelSubCopy: "10.5 mi",
value: "001820",
}, },
{ {
Name: "124", buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
buttonLabel: "Columbus", buttonLabel: "5015 N High St",
buttonLabelSubCopy: "4.5 mi", buttonLabelSubCopy: "11.5 mi",
buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230", value: "003343",
}, },
{ {
Name: "125", buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223",
buttonLabel: "Powell", buttonLabel: "1670 Harmon Ave",
buttonLabelSubCopy: "7 mi", buttonLabelSubCopy: "16 mi",
buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223", value: "006747",
}, },
{ {
Name: "126", buttonBodyCopy: "3938 Powell Rd, Powell, OH 43065",
buttonLabel: "Chillicothe", buttonLabel: "3938 Powell Rd",
buttonLabelSubCopy: "41.5 mi", buttonLabelSubCopy: "16.5 mi",
buttonBodyCopy: "555 First Capital Ln, Chillicothe, OH 45601", value: "003341",
}, },
{ {
Name: "127", buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228",
buttonLabel: "Grove City", buttonLabel: "4580 W Broad St",
buttonLabelSubCopy: "4.5 mi", buttonLabelSubCopy: "19.5 mi",
buttonBodyCopy: "5486 N Grove Rd, Grove City, OH 43215", value: "003342",
},
{
Name: "128",
buttonLabel: "Dayton",
buttonLabelSubCopy: "80.5 mi",
buttonBodyCopy: "1670 Bongo Ave D, Dayton, OH 43223",
}, },
]); ]);
}); });
it("Should display the number of shops necessary to show a previously selected shop", async () => { // it("Should display the number of shops necessary to show a previously selected shop", async () => {
// Arrange/Act // // Arrange
const container = document.createElement("div"); // const { wrapper } = setupMocks({
container.scrollTo = jest.fn(); // 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,
// },
// mountOptions: {
// attachTo: document.body,
// },
// });
container.classList.add("page-container-grouped-styles"); // // Act
document.body.appendChild(container); // wrapper.vm.initializeComponent(shopQuestionInitialData);
const { wrapper } = setupMocks({ // await wrapper.vm.$nextTick();
mixins: [mockMixin], // await wrapper.vm.$nextTick();
props: { // await wrapper.vm.$nextTick();
modelValue: "127",
serviceZipCode: "43081",
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
},
mountOptions: {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // // Assert
wrapper.vm.initializeComponent(shopQuestionInitialData); // expect(wrapper.vm.answers.length).toEqual(5);
// });
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.answers.length).toEqual(5);
});
it("Should reset the answers when the selected appointment type changes", async () => { it("Should reset the answers when the selected appointment type changes", async () => {
// Arrange/Act // Arrange
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
mixins: [mockMixin], mixins: [mockMixin],
props: { props: {
modelValue: "127", modelValue: {
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
serviceZipCode: "43081", serviceZipCode: "43081",
selectedAppointmentType: "Dropoff", selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName, cmsWidgetName: cmsWidgetName,
@ -451,10 +496,12 @@ describe("shop-question.vue", () => {
}, },
}); });
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // Act
wrapper.vm.initializeComponent(shopQuestionInitialData); wrapper.vm.initializeComponent(shopQuestionInitialData);
wrapper.setProps({ await wrapper.vm.$nextTick();
await wrapper.setProps({
selectedAppointmentType: "Inshop", selectedAppointmentType: "Inshop",
}); });
@ -464,79 +511,85 @@ describe("shop-question.vue", () => {
expect(wrapper.vm.answers.length).toEqual(3); expect(wrapper.vm.answers.length).toEqual(3);
}); });
it("Should reload the shops when the service zip code changes", async () => { // it("Should reload the shops when the service zip code changes", async () => {
// Arrange/Act // // Arrange
const container = document.createElement("div"); // const { wrapper } = setupMocks({
container.scrollTo = jest.fn(); // 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,
// },
// });
container.classList.add("page-container-grouped-styles"); // wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => {
document.body.appendChild(container); // return new Promise((resolve) => {
// resolve(mockNewShopList);
// });
// });
const { wrapper } = setupMocks({ // // Act
mixins: [mockMixin], // wrapper.vm.initializeComponent(shopQuestionInitialData);
props: {
modelValue: "127",
serviceZipCode: "43081",
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
},
mountOptions: {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn(); // await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
wrapper.vm.shops = shopQuestionInitialData;
await wrapper.vm.$nextTick(); // // Assert
// expect(wrapper.vm.shopProviders.length).toEqual(3);
// expect(wrapper.vm.shopProviders).toEqual(mockNewShopList.shopProviders);
// });
wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => { // it("Should clear the existing answers when the service zip code changes", async () => {
return new Promise((resolve) => { // // Arrange
resolve(newShopList); // const { wrapper } = setupMocks({
}); // mixins: [mockMixin],
}); // props: {
await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054"); // 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,
// },
// mountOptions: {
// attachTo: document.body,
// },
// });
await wrapper.vm.$nextTick(); // //Act
// wrapper.vm.initializeComponent(shopQuestionInitialData);
// Assert // wrapper.setProps({
expect(wrapper.vm.shops.length).toEqual(3); // selectedAppointmentType: "Inshop",
expect(wrapper.vm.shops).toEqual(mockNewShopList.data); // });
});
it("Should clear the existing answers when the service zip code changes", async () => { // await wrapper.vm.$nextTick();
// Arrange/Act
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles"); // // Assert
document.body.appendChild(container); // expect(wrapper.vm.answers.length).toEqual(3);
// });
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: "127",
serviceZipCode: "43081",
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
},
mountOptions: {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
wrapper.vm.initializeComponent(shopQuestionInitialData);
wrapper.setProps({
selectedAppointmentType: "Inshop",
});
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.answers.length).toEqual(3);
});
}); });
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) { function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {

107
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div class="shop-question" aria-live="polite"> <div v-if="isDisplayed" class="shop-question" aria-live="polite">
<alert <alert
ref="alertDropoffInformation" ref="alertDropoffInformation"
v-if="displayDropoffInformation" v-if="displayDropoffInformation"
@ -21,7 +21,7 @@
isRequired isRequired
validationRules="option-required" /> validationRules="option-required" />
<textLink <textLink
v-if="displaySeeMoreLocationsLink" v-show="displaySeeMoreLocationsLink"
ref="showMoreShopsLink" ref="showMoreShopsLink"
class="show-more-shops-link" class="show-more-shops-link"
id="showMoreShopsId" id="showMoreShopsId"
@ -49,6 +49,7 @@ import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules"; import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import baseMixin from "@/mixins/base-mixin.js"; import baseMixin from "@/mixins/base-mixin.js";
import { nextTick } from "vue";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
@ -57,7 +58,7 @@ export default {
mixins: [baseMixin], mixins: [baseMixin],
data() { data() {
return { return {
shops: [], shopProviders: [],
shopListButton: shopListButton, shopListButton: shopListButton,
answers: [], answers: [],
shopIndex: 0, shopIndex: 0,
@ -65,11 +66,14 @@ export default {
}; };
}, },
props: { props: {
modelValue: String, modelValue: {
type: Object,
},
serviceZipCode: String, serviceZipCode: String,
selectedAppointmentType: String, selectedAppointmentType: String,
cmsWidgetName: String, cmsWidgetName: String,
validationRules: String, validationRules: String,
isDisplayed: Boolean,
}, },
computed: { computed: {
questionText() { questionText() {
@ -80,7 +84,12 @@ export default {
return this.modelValue; return this.modelValue;
}, },
set: function (newValue) { set: function (newValue) {
this.$emit("update:modelValue", newValue); // Button Question only supports primitive values so we must get the full object to emit to the page
const provider = this.shopProviders?.find(
(provider) => provider.providerNumber == newValue
);
this.$emit("update:modelValue", provider);
}, },
}, },
displayDropoffInformation() { displayDropoffInformation() {
@ -91,13 +100,16 @@ export default {
}, },
}, },
methods: { methods: {
loadInitialData() { loadInitialData(serviceZipCode) {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, { return this.loadData(serviceZipCode);
serviceZipCode: this.serviceZipCode, },
loadData(serviceZipCode) {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDERS, {
serviceZipCode: serviceZipCode,
}); });
}, },
initializeComponent(shopQuestionInitialData) { initializeComponent(shopQuestionInitialData) {
this.shops = shopQuestionInitialData; this.shopProviders = shopQuestionInitialData.shopProviders;
}, },
async getNextShopsFromList(numberToGet = 3) { async getNextShopsFromList(numberToGet = 3) {
const shopIterator = (array, n) => { const shopIterator = (array, n) => {
@ -105,20 +117,32 @@ export default {
return () => { return () => {
const end = this.shopIndex + n; const end = this.shopIndex + n;
const part = array.slice(this.shopIndex, end); const part = array.slice(this.shopIndex, end);
this.shopIndex = end < l ? end : this.shops.length; this.shopIndex = end < l ? end : this.shopProviders.length;
return part; return part;
}; };
}; };
const nextShop = shopIterator(this.shops, numberToGet); const toTitleCase = (str) => {
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
};
const nextShop = shopIterator(this.shopProviders, numberToGet);
// Map API result data // Map API result data
const mappedData = nextShop().map((shop) => { const mappedData = nextShop().map((shopProvider) => {
const streetAddress = toTitleCase(shopProvider.address.streetAddress);
const city = toTitleCase(shopProvider.address.city);
const state = shopProvider.address.state;
const zipCode = shopProvider.address.zipCode;
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
return { return {
Name: shop.providerNumber, buttonLabel: streetAddress,
buttonLabel: shop.city, buttonLabelSubCopy: `${distanceInMiles} mi`,
buttonLabelSubCopy: `${shop.distance} mi`, buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`, value: shopProvider.providerNumber,
}; };
}); });
@ -132,7 +156,7 @@ export default {
await this.$nextTick(); await this.$nextTick();
if (this.shopIndex == this.shops.length) { if (this.shopIndex == this.shopProviders.length) {
this.displaySeeMoreLocationsLink = false; this.displaySeeMoreLocationsLink = false;
} else { } else {
this.displaySeeMoreLocationsLink = true; this.displaySeeMoreLocationsLink = true;
@ -142,48 +166,49 @@ export default {
this.scrollToPageBottom(); this.scrollToPageBottom();
}, },
resetShopList() { resetAnswers() {
this.answers = []; this.answers = [];
this.shopIndex = 0; this.shopIndex = 0;
this.selectedValue = ""; this.selectedValue = "";
this.$refs.buttonQuestion.resetField();
}, },
async reloadShopData(serviceZipCode) { async reloadShopData(serviceZipCode) {
const result = await this.loadInitialData(serviceZipCode); const result = await this.loadData(serviceZipCode);
this.initializeComponent(result.data); this.initializeComponent(result.data);
this.resetShopList(); this.resetShopList();
await nextTick();
await this.getNextShopsFromList();
}, },
}, },
watch: { watch: {
serviceZipCode: {
async handler(newValue) {
await this.reloadShopData(newValue);
},
},
selectedAppointmentType: { selectedAppointmentType: {
async handler(newValue) { async handler(newValue) {
// If the validation has been previously triggered, clear it before displaying the component this.resetAnswers();
this.$refs.buttonQuestion.resetField();
this.resetShopList();
await this.getNextShopsFromList();
await this.$nextTick(); await this.$nextTick();
this.scrollToPageBottom(); if (newValue !== "Mobile") {
await this.getNextShopsFromList();
}
}, },
}, },
shops: { shopProviders: {
handler(newValue) { async handler(newValue) {
this.$refs.buttonQuestion.resetField(); //this.resetAnswers();
const selectedShopIndex = newValue.findIndex(
(provider) => provider.providerNumber == this.modelValue
);
if (selectedShopIndex >= 3) { await this.$nextTick();
this.getNextShopsFromList(selectedShopIndex + 1);
} else { if (this.selectedAppointmentType) {
this.getNextShopsFromList(); const selectedShopIndex = newValue.findIndex(
(provider) => provider.providerNumber == this.modelValue
);
if (selectedShopIndex >= 3) {
await this.getNextShopsFromList(selectedShopIndex + 1);
} else {
await this.getNextShopsFromList();
}
} }
}, },
}, },

32
src/store/index.js
View file

@ -979,32 +979,34 @@ export const actions = {
partNumber: lineItem.partNumber, partNumber: lineItem.partNumber,
}) })
); );
const lineItemsToSend = buildQueryStringParameterFromArrayOfComplexObjects( const lineItems = buildQueryStringParameterFromArrayOfComplexObjects(
lineItemsWithOnlyPartNumbers, lineItemsWithOnlyPartNumbers,
"lineItems" "lineItems"
); );
const vehicle = context.getters.vehicle; const vehicle = context.getters.vehicle;
const carId = vehicle.carId; const carId = vehicle.carId;
const damage = context.getters.damage; const damage = context.getters.damage;
const glassArray = damage.glassToReplace; const glassArray = convertGlassPieceNamingForApi(damage.glassToReplace);
const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
const glassPieces = buildQueryStringParameterFromArrayOfComplexObjects(
glassArray,
"glassPieces"
);
return globalMethods.callHttpClient({ return globalMethods.callHttpClient({
method: endpoints.GetServiceabilityDetails.method, method: endpoints.GetServiceabilityDetails.method,
endpoint: endpoints.GetServiceabilityDetails.url, endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
payload: {
zip: serviceZipCode,
lineItems: lineItemsToSend,
carId: carId,
glassPieces: glassArrayForPayload,
},
}); });
}, },
getProviderLocations(context, { serviceZipCode }) { getProviders(context, { serviceZipCode }) {
return globalMethods.callMockHttpClient({ const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
method: endpoints.GetProviderLocations.method, const shopRadiusInMiles = 100;
//TODO: Remove Mocky Endpoints
endpoint: "https://run.mocky.io/v3/abf2fa63-8287-4e46-b169-f5bec65c8dff", return globalMethods.callHttpClient({
method: endpoints.GetProviders.method,
endpoint: `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}`,
}); });
}, },