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
},
},
// 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",
method: "GET",
},
GetProviderLocations: {
GetProviders: {
url: "/location/api/v1/location/providers",
method: "GET",
},

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

@ -32,7 +32,7 @@ const storeActions = {
GET_MOLDING_QUESTIONS: "getMoldingQuestions",
GET_MOBILE_FEE_PART: "getMobileFeePart",
GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
GET_PROVIDER_LOCATIONS: "getProviderLocations",
GET_PROVIDERS: "getProviders",
SAVE_SESSION: "saveSession",
LOAD_SESSION: "loadSession",
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,
isWide: Boolean,
isCashOrInsurance: Boolean,
modelValue: [Array, Number, String],
modelValue: [Array, Number, String, Object],
value: [Number, String],
validationRules: String,
suppressError: Boolean,
@ -129,7 +129,6 @@ export default {
valueToLogType: String,
additionalButtonStyling: String,
isSmallQuestionText: Boolean,
availability: String,
customButtonQuestionId: String,
logDisplayedValuesEvent: {
type: Boolean,

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

@ -66,6 +66,7 @@
<script>
import textLink from "@/ux-components/text-link/text-link";
import { Modal } from "bootstrap";
import baseMixin from "@/mixins/base-mixin.js";
export default {
name: "menuModal",
@ -92,10 +93,7 @@ export default {
show() {
this.currentFooterAndHeaderHeight = this.getFooterInfoBoxHeight() + 72;
this.isActive = true;
document.querySelector(".page-container-grouped-styles").scrollTo({
top: 0,
behavior: "smooth",
});
this.scrollToPageTop();
},
hide() {
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,
customComponentId: String,
validationRules: String,
onZipUpdateCallback: {
type: Function,
},
},
computed: {
mobileLocationLinkPromptText() {
@ -257,6 +260,10 @@ export default {
// Update the page level model
this.$emit("update:modelValue", this.internalModel);
if (this.onZipUpdateCallback) {
await this.onZipUpdateCallback(serviceZipCode);
}
this.closeModal();
}
},

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

@ -186,7 +186,7 @@ beforeEach(() => {
describe("service-location.vue", () => {
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
const { wrapper } = setupMocks({});

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

@ -12,7 +12,8 @@
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase"
linkWidgetName="ServiceZipLinkWidget"
modalWidgetName="ServiceZipModalWidget" />
modalWidgetName="ServiceZipModalWidget"
:onZipUpdateCallback="reloadShopData" />
<alert
ref="alertMilitaryBaseZip"
class="my-5"
@ -64,17 +65,16 @@
validationRules="mobile-location-required"
ref="mobileLocationQuestions"
linkWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget" />
modalWidgetName="MobileLocationModalWidget"
:onZipUpdateCallback="reloadShopData" />
<Transition name="fade" mode="out-in">
<shopQuestion
ref="shopQuestion"
v-show="
selectedAppointmentType === 'Inshop' ||
selectedAppointmentType === 'Dropoff'
"
v-model="providerNumber"
v-show="isShopQuestionDisplayed"
v-model="selectedProvider"
:serviceZipCode="zipCode"
:selectedAppointmentType="selectedAppointmentType"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" />
</Transition>
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
@ -148,7 +148,7 @@ export default {
isGlassServiceableMobile: null,
isRecalibrationServiceableMobile: null,
selectedAppointmentType: null,
providerNumber: null,
selectedProvider: null,
mobileFeePart: null,
zipContainsMilitaryBase: false,
};
@ -164,7 +164,7 @@ export default {
const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData();
const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode);
// Settle promises and get results
const promiseResultMap = [
@ -215,7 +215,7 @@ export default {
if (newValue.zipCode !== this.zipCode) {
this.resetMobileLocation();
this.selectedAppointmentType = null;
this.providerNumber = null;
this.selectedProvider = null;
}
this.state = newValue.state;
@ -250,7 +250,7 @@ export default {
if (!this.selectedAppointmentType == "Mobile") {
this.selectedAppointmentType = null;
}
this.providerNumber = null;
this.selectedProvider = null;
}
},
},
@ -268,6 +268,12 @@ export default {
return this.isGlassServiceableInshop;
}
},
isShopQuestionDisplayed() {
return (
this.selectedAppointmentType === "Inshop" ||
this.selectedAppointmentType === "Dropoff"
);
},
// Specifically check for isRecalibrationServiceableMobile === false, not null or true.
requiresInshopRecalibration() {
return (
@ -304,7 +310,7 @@ export default {
store.getters.payment.isInsurance !== null
);
},
setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopQuestionData) {
setData(zipCodeData, serviceabilityDetails, mobileFeePart) {
if (zipCodeData) {
this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
}
@ -364,6 +370,9 @@ export default {
openModalAction(modalName) {
this.$refs[modalName].openModal();
},
async reloadShopData() {
await this.$refs.shopQuestion.reloadShopData(this.zipCode);
},
},
components: {
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,
modalWidgetName: String,
onZipUpdateCallback: {
type: Function,
},
},
setup() {
const textboxQuestionWidgetName = "ServiceZipQuestionWidget";
@ -161,6 +164,10 @@ export default {
// Update the page level model
this.$emit("update:modelValue", this.internalModel);
if (this.onZipUpdateCallback) {
await this.onZipUpdateCallback(serviceZipCode);
}
this.closeModal();
}
} 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", () => ({
methods: {
dispatchStoreAction(action, items, encode) {
if (action === mockGetProviderLocationsStoreAction) {
if (action === mockGetProvidersStoreAction) {
return new Promise((resolve) => {
resolve(mockNewShopList);
});
@ -16,35 +16,41 @@ jest.mock("@/mixins/base-mixin", () => ({
},
}));
const mockGetProviderLocationsStoreAction = storeActions.GET_PROVIDER_LOCATIONS;
const mockGetProvidersStoreAction = storeActions.GET_PROVIDERS;
const mockNewShopList = {
data: [
shopProviders: [
{
city: "Far",
country: "United States",
distance: 100,
providerNumber: "129",
state: "OH",
streetAddress: "555 First Capital Ln",
zipCode: "45601",
address: {
city: "COLUMBUS",
country: "US",
state: "OH",
streetAddress: "1670 HARMON AVE",
zipCode: "43223",
},
distanceInMiles: 15.9727889297435,
providerNumber: "006747",
},
{
city: "Farther",
country: "United States",
distance: 200,
providerNumber: "130",
state: "OH",
streetAddress: "5486 N Grove Rd",
zipCode: "43215",
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
{
city: "Farthest (Ever)",
country: "United States",
distance: 380.5,
providerNumber: "131",
state: "OH",
streetAddress: "1670 Bongo Ave D",
zipCode: "43223",
address: {
city: "Columbus",
country: "US",
state: "OH",
streetAddress: "4580 W Broad St",
zipCode: "43228",
},
distanceInMiles: 19.4618116611001,
providerNumber: "003342",
},
],
};
@ -53,90 +59,77 @@ const mockCmsContent = {
QuestionText: "Select a shop:",
};
const cmsWidgetName = "AppointmentTypeQuestionWidget";
const shopQuestionInitialData = [
{
city: "Worthington",
country: "United States",
distance: 1.5,
providerNumber: "123",
state: "OH",
streetAddress: "760 Dearborn Park Ln",
zipCode: "43085",
},
{
city: "Columbus",
country: "United States",
distance: 4.5,
providerNumber: "124",
state: "OH",
streetAddress: "5486 N Hamilton Rd",
zipCode: "43230",
},
{
city: "Powell",
country: "United States",
distance: 7,
providerNumber: "125",
state: "OH",
streetAddress: "1670 Harmon Ave C",
zipCode: "43223",
},
{
city: "Chillicothe",
country: "United States",
distance: 41.5,
providerNumber: "126",
state: "OH",
streetAddress: "555 First Capital Ln",
zipCode: "45601",
},
{
city: "Grove City",
country: "United States",
distance: 4.5,
providerNumber: "127",
state: "OH",
streetAddress: "5486 N Grove Rd",
zipCode: "43215",
},
{
city: "Dayton",
country: "United States",
distance: 80.5,
providerNumber: "128",
state: "OH",
streetAddress: "1670 Bongo Ave D",
zipCode: "43223",
},
{
city: "Far",
country: "United States",
distance: 100,
providerNumber: "129",
state: "OH",
streetAddress: "555 First Capital Ln",
zipCode: "45601",
},
{
city: "Farther",
country: "United States",
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 cmsWidgetName = "ShopQuestionWidget";
const shopQuestionInitialData = {
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",
},
{
address: {
city: "COLUMBUS",
country: "US",
state: "OH",
streetAddress: "5015 N HIGH ST",
zipCode: "43214",
},
distanceInMiles: 11.738869544543,
providerNumber: "003343",
},
{
address: {
city: "COLUMBUS",
country: "US",
state: "OH",
streetAddress: "1670 HARMON AVE",
zipCode: "43223",
},
distanceInMiles: 15.9727889297435,
providerNumber: "006747",
},
{
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: "003341",
},
{
address: {
city: "Columbus",
country: "US",
state: "OH",
streetAddress: "4580 W Broad St",
zipCode: "43228",
},
distanceInMiles: 19.4618116611001,
providerNumber: "003342",
},
],
};
const mockMixin = {
methods: {
@ -151,207 +144,251 @@ const mockMixin = {
};
describe("shop-question.vue", () => {
it("Should display first three shops when an appointment type has already been selected", async () => {
// Arrange/Act
beforeEach(() => {
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
});
it("Should display first three shops when an appointment type has already been selected", async () => {
// Arrange
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: null,
modelValue: {
address: {
city: "POWELL",
country: "US",
state: "OH",
streetAddress: "3938 POWELL RD",
zipCode: "43065",
},
distanceInMiles: 16.2690495685233,
providerNumber: null,
},
serviceZipCode: "43081",
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
isDisplayed: true,
},
mountOptions: {
attachTo: document.body,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.answers.length).toEqual(3);
expect(wrapper.vm.answers).toEqual([
{
Name: "123",
buttonLabel: "Worthington",
buttonLabelSubCopy: "1.5 mi",
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
buttonLabel: "4403 Executive Pkwy",
buttonLabelSubCopy: "5 mi",
value: "003335",
},
{
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
buttonLabel: "760 Dearborn Park Ln",
buttonLabelSubCopy: "10.5 mi",
value: "001820",
},
{
Name: "124",
buttonLabel: "Columbus",
buttonLabelSubCopy: "4.5 mi",
buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
},
{
Name: "125",
buttonLabel: "Powell",
buttonLabelSubCopy: "7 mi",
buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
buttonLabel: "5015 N High St",
buttonLabelSubCopy: "11.5 mi",
value: "003343",
},
]);
});
it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
// Arrange/Act
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
// Arrange
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: null,
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,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// 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/Act
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
const alsoShopQuestionInitialData = [
{
city: "Worthington",
country: "United States",
distance: 1.5,
providerNumber: "123",
state: "OH",
streetAddress: "760 Dearborn Park Ln",
zipCode: "43085",
},
{
city: "Columbus",
country: "United States",
distance: 4.5,
providerNumber: "124",
state: "OH",
streetAddress: "5486 N Hamilton Rd",
zipCode: "43230",
},
{
city: "Powell",
country: "United States",
distance: 7,
providerNumber: "125",
state: "OH",
streetAddress: "1670 Harmon Ave C",
zipCode: "43223",
},
];
// 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",
},
{
address: {
city: "COLUMBUS",
country: "US",
state: "OH",
streetAddress: "5015 N HIGH ST",
zipCode: "43214",
},
distanceInMiles: 11.738869544543,
providerNumber: "003343",
},
],
};
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: null,
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,
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// Act
wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
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()).toBe(true);
expect(showMoreShopsLink.isVisible()).toBe(false);
});
it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
// Arrange
const displayedAnswers = [
{
Name: "123",
buttonLabel: "Worthington",
buttonLabelSubCopy: "1.5 mi",
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
buttonLabel: "4403 Executive Pkwy",
buttonLabelSubCopy: "5 mi",
value: "003335",
},
{
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
buttonLabel: "760 Dearborn Park Ln",
buttonLabelSubCopy: "10.5 mi",
value: "001820",
},
{
Name: "124",
buttonLabel: "Columbus",
buttonLabelSubCopy: "4.5 mi",
buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
},
{
Name: "125",
buttonLabel: "Powell",
buttonLabelSubCopy: "7 mi",
buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
buttonLabel: "5015 N High St",
buttonLabelSubCopy: "11.5 mi",
value: "003343",
},
];
// Arrange/Act
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: null,
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,
},
});
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.shopIndex = 3;
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
await wrapper.vm.$nextTick();
showMoreShopsLink.trigger("click");
await wrapper.vm.$nextTick();
@ -360,88 +397,96 @@ describe("shop-question.vue", () => {
expect(wrapper.vm.answers.length).toBe(6);
expect(wrapper.vm.answers).toEqual([
{
Name: "123",
buttonLabel: "Worthington",
buttonLabelSubCopy: "1.5 mi",
buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
buttonLabel: "4403 Executive Pkwy",
buttonLabelSubCopy: "5 mi",
value: "003335",
},
{
buttonBodyCopy: "760 Dearborn Park Ln, Worthington, OH 43085",
buttonLabel: "760 Dearborn Park Ln",
buttonLabelSubCopy: "10.5 mi",
value: "001820",
},
{
Name: "124",
buttonLabel: "Columbus",
buttonLabelSubCopy: "4.5 mi",
buttonBodyCopy: "5486 N Hamilton Rd, Columbus, OH 43230",
buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
buttonLabel: "5015 N High St",
buttonLabelSubCopy: "11.5 mi",
value: "003343",
},
{
Name: "125",
buttonLabel: "Powell",
buttonLabelSubCopy: "7 mi",
buttonBodyCopy: "1670 Harmon Ave C, Powell, OH 43223",
buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223",
buttonLabel: "1670 Harmon Ave",
buttonLabelSubCopy: "16 mi",
value: "006747",
},
{
Name: "126",
buttonLabel: "Chillicothe",
buttonLabelSubCopy: "41.5 mi",
buttonBodyCopy: "555 First Capital Ln, Chillicothe, OH 45601",
buttonBodyCopy: "3938 Powell Rd, Powell, OH 43065",
buttonLabel: "3938 Powell Rd",
buttonLabelSubCopy: "16.5 mi",
value: "003341",
},
{
Name: "127",
buttonLabel: "Grove City",
buttonLabelSubCopy: "4.5 mi",
buttonBodyCopy: "5486 N Grove Rd, Grove City, OH 43215",
},
{
Name: "128",
buttonLabel: "Dayton",
buttonLabelSubCopy: "80.5 mi",
buttonBodyCopy: "1670 Bongo Ave D, Dayton, OH 43223",
buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228",
buttonLabel: "4580 W Broad St",
buttonLabelSubCopy: "19.5 mi",
value: "003342",
},
]);
});
it("Should display the number of shops necessary to show a previously selected shop", async () => {
// Arrange/Act
const container = document.createElement("div");
container.scrollTo = jest.fn();
// it("Should display the number of shops necessary to show a previously selected shop", 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,
// },
// mountOptions: {
// attachTo: document.body,
// },
// });
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
// // Act
// wrapper.vm.initializeComponent(shopQuestionInitialData);
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: "127",
serviceZipCode: "43081",
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
},
mountOptions: {
attachTo: document.body,
},
});
// await wrapper.vm.$nextTick();
// await wrapper.vm.$nextTick();
// await wrapper.vm.$nextTick();
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
wrapper.vm.initializeComponent(shopQuestionInitialData);
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.answers.length).toEqual(5);
});
// // Assert
// expect(wrapper.vm.answers.length).toEqual(5);
// });
it("Should reset the answers when the selected appointment type changes", async () => {
// Arrange/Act
const container = document.createElement("div");
container.scrollTo = jest.fn();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
// Arrange
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: "127",
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,
@ -451,10 +496,12 @@ describe("shop-question.vue", () => {
},
});
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
// Act
wrapper.vm.initializeComponent(shopQuestionInitialData);
wrapper.setProps({
await wrapper.vm.$nextTick();
await wrapper.setProps({
selectedAppointmentType: "Inshop",
});
@ -464,79 +511,85 @@ describe("shop-question.vue", () => {
expect(wrapper.vm.answers.length).toEqual(3);
});
it("Should reload the shops when the service zip code changes", async () => {
// Arrange/Act
const container = document.createElement("div");
container.scrollTo = jest.fn();
// it("Should reload the shops when the service zip code changes", 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,
// },
// });
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
// wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => {
// return new Promise((resolve) => {
// resolve(mockNewShopList);
// });
// });
const { wrapper } = setupMocks({
mixins: [mockMixin],
props: {
modelValue: "127",
serviceZipCode: "43081",
selectedAppointmentType: "Dropoff",
cmsWidgetName: cmsWidgetName,
},
mountOptions: {
attachTo: document.body,
},
});
// // Act
// wrapper.vm.initializeComponent(shopQuestionInitialData);
wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
wrapper.vm.shops = shopQuestionInitialData;
// await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
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(() => {
return new Promise((resolve) => {
resolve(newShopList);
});
});
await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
// it("Should clear the existing answers when the service zip code changes", 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,
// },
// mountOptions: {
// attachTo: document.body,
// },
// });
await wrapper.vm.$nextTick();
// //Act
// wrapper.vm.initializeComponent(shopQuestionInitialData);
// Assert
expect(wrapper.vm.shops.length).toEqual(3);
expect(wrapper.vm.shops).toEqual(mockNewShopList.data);
});
// wrapper.setProps({
// selectedAppointmentType: "Inshop",
// });
it("Should clear the existing answers when the service zip code changes", async () => {
// Arrange/Act
const container = document.createElement("div");
container.scrollTo = jest.fn();
// await wrapper.vm.$nextTick();
container.classList.add("page-container-grouped-styles");
document.body.appendChild(container);
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);
});
// // Assert
// expect(wrapper.vm.answers.length).toEqual(3);
// });
});
function setupMocks({ mountOptions, mixins, props, isShallowMount = true }) {

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

@ -1,6 +1,6 @@
<template>
<transition name="fade" mode="out-in">
<div class="shop-question" aria-live="polite">
<div v-if="isDisplayed" class="shop-question" aria-live="polite">
<alert
ref="alertDropoffInformation"
v-if="displayDropoffInformation"
@ -21,7 +21,7 @@
isRequired
validationRules="option-required" />
<textLink
v-if="displaySeeMoreLocationsLink"
v-show="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
class="show-more-shops-link"
id="showMoreShopsId"
@ -49,6 +49,7 @@ import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import baseMixin from "@/mixins/base-mixin.js";
import { nextTick } from "vue";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
@ -57,7 +58,7 @@ export default {
mixins: [baseMixin],
data() {
return {
shops: [],
shopProviders: [],
shopListButton: shopListButton,
answers: [],
shopIndex: 0,
@ -65,11 +66,14 @@ export default {
};
},
props: {
modelValue: String,
modelValue: {
type: Object,
},
serviceZipCode: String,
selectedAppointmentType: String,
cmsWidgetName: String,
validationRules: String,
isDisplayed: Boolean,
},
computed: {
questionText() {
@ -80,7 +84,12 @@ export default {
return this.modelValue;
},
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() {
@ -91,13 +100,16 @@ export default {
},
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, {
serviceZipCode: this.serviceZipCode,
loadInitialData(serviceZipCode) {
return this.loadData(serviceZipCode);
},
loadData(serviceZipCode) {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDERS, {
serviceZipCode: serviceZipCode,
});
},
initializeComponent(shopQuestionInitialData) {
this.shops = shopQuestionInitialData;
this.shopProviders = shopQuestionInitialData.shopProviders;
},
async getNextShopsFromList(numberToGet = 3) {
const shopIterator = (array, n) => {
@ -105,20 +117,32 @@ export default {
return () => {
const end = this.shopIndex + n;
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;
};
};
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
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 {
Name: shop.providerNumber,
buttonLabel: shop.city,
buttonLabelSubCopy: `${shop.distance} mi`,
buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`,
buttonLabel: streetAddress,
buttonLabelSubCopy: `${distanceInMiles} mi`,
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
value: shopProvider.providerNumber,
};
});
@ -132,7 +156,7 @@ export default {
await this.$nextTick();
if (this.shopIndex == this.shops.length) {
if (this.shopIndex == this.shopProviders.length) {
this.displaySeeMoreLocationsLink = false;
} else {
this.displaySeeMoreLocationsLink = true;
@ -142,48 +166,49 @@ export default {
this.scrollToPageBottom();
},
resetShopList() {
resetAnswers() {
this.answers = [];
this.shopIndex = 0;
this.selectedValue = "";
this.$refs.buttonQuestion.resetField();
},
async reloadShopData(serviceZipCode) {
const result = await this.loadInitialData(serviceZipCode);
const result = await this.loadData(serviceZipCode);
this.initializeComponent(result.data);
this.resetShopList();
await nextTick();
await this.getNextShopsFromList();
},
},
watch: {
serviceZipCode: {
async handler(newValue) {
await this.reloadShopData(newValue);
},
},
selectedAppointmentType: {
async handler(newValue) {
// If the validation has been previously triggered, clear it before displaying the component
this.$refs.buttonQuestion.resetField();
this.resetShopList();
await this.getNextShopsFromList();
this.resetAnswers();
await this.$nextTick();
this.scrollToPageBottom();
if (newValue !== "Mobile") {
await this.getNextShopsFromList();
}
},
},
shops: {
handler(newValue) {
this.$refs.buttonQuestion.resetField();
const selectedShopIndex = newValue.findIndex(
(provider) => provider.providerNumber == this.modelValue
);
shopProviders: {
async handler(newValue) {
//this.resetAnswers();
if (selectedShopIndex >= 3) {
this.getNextShopsFromList(selectedShopIndex + 1);
} else {
this.getNextShopsFromList();
await this.$nextTick();
if (this.selectedAppointmentType) {
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,
})
);
const lineItemsToSend = buildQueryStringParameterFromArrayOfComplexObjects(
const lineItems = buildQueryStringParameterFromArrayOfComplexObjects(
lineItemsWithOnlyPartNumbers,
"lineItems"
);
const vehicle = context.getters.vehicle;
const carId = vehicle.carId;
const damage = context.getters.damage;
const glassArray = damage.glassToReplace;
const glassArrayForPayload = convertGlassPieceNamingForApi(glassArray);
const glassArray = convertGlassPieceNamingForApi(damage.glassToReplace);
const glassPieces = buildQueryStringParameterFromArrayOfComplexObjects(
glassArray,
"glassPieces"
);
return globalMethods.callHttpClient({
method: endpoints.GetServiceabilityDetails.method,
endpoint: endpoints.GetServiceabilityDetails.url,
payload: {
zip: serviceZipCode,
lineItems: lineItemsToSend,
carId: carId,
glassPieces: glassArrayForPayload,
},
endpoint: `${endpoints.GetServiceabilityDetails.url}?zip=${serviceZipCode}&carId=${carId}&${lineItems}&${glassPieces}`,
});
},
getProviderLocations(context, { serviceZipCode }) {
return globalMethods.callMockHttpClient({
method: endpoints.GetProviderLocations.method,
//TODO: Remove Mocky Endpoints
endpoint: "https://run.mocky.io/v3/abf2fa63-8287-4e46-b169-f5bec65c8dff",
getProviders(context, { serviceZipCode }) {
const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
const shopRadiusInMiles = 100;
return globalMethods.callHttpClient({
method: endpoints.GetProviders.method,
endpoint: `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}`,
});
},