WIP
This commit is contained in:
Leah Schumann
parent
3e0db9f308
commit
19c07dc23a
7 changed files with 377 additions and 92 deletions
|
|
@ -58,6 +58,8 @@ const storeMutations = {
|
|||
RESET_GLASS_PARTS_STATE: "resetGlassPartsState",
|
||||
RESET_STATE: "resetState",
|
||||
RESET_SAVE_SESSION_PROMISE: "resetSaveSessionPromise",
|
||||
RESET_SERVICE_LOCATION_APPOINTMENT_TYPE: "resetServiceLocationAppointmentType",
|
||||
RESET_SERVICE_LOCATION_PROVIDER: "resetServiceLocationProvider",
|
||||
|
||||
// OTHER MUTATIONS
|
||||
UPDATE_PAGE_DATA: "updatePageData",
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
// For nested objects, spread operator only creates new references to the top level fields,
|
||||
// the remaining nested fields actually reference the original object which can introduce problems.
|
||||
|
||||
// The purpose of this method is to deep clone the data in an object recursively, this is useful
|
||||
// for cloning modelValues to internal models when regular two-way binding is not an option.
|
||||
// See: mobile-location-modal-questions.vue
|
||||
|
||||
// Creates a deep clone of an object. Clones primitives, arrays and objects, excluding class instances.
|
||||
// https://www.30secondsofcode.org/js/s/deep-clone
|
||||
export function deepClone(object) {
|
||||
if (object === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let clone = Object.assign({}, object);
|
||||
Object.keys(clone).forEach(
|
||||
(key) =>
|
||||
(clone[key] = typeof object[key] === "object" ? deepClone(object[key]) : object[key])
|
||||
);
|
||||
|
||||
if (Array.isArray(object)) {
|
||||
clone.length = object.length;
|
||||
return Array.from(clone);
|
||||
}
|
||||
|
||||
return clone;
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import { deepClone } from "./object-cloning-helper";
|
||||
|
||||
describe("object-cloning-helper.js", () => {
|
||||
it("Should return null if no object is passed in", async () => {
|
||||
// Arrange
|
||||
const expected = null;
|
||||
|
||||
// Act
|
||||
const result = deepClone(null);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return a deep copy of the object", async () => {
|
||||
// Arrange
|
||||
|
||||
const object = {
|
||||
addressQuestions: {
|
||||
streetAddress: "555 Some St",
|
||||
apartmentNumberOrBusinessName: "Apt 1",
|
||||
city: "Funkytown",
|
||||
state: "OH",
|
||||
zipCode: "55555",
|
||||
},
|
||||
isVehicleProtected: true,
|
||||
serviceZipCode: "55555",
|
||||
};
|
||||
|
||||
const expected = {
|
||||
addressQuestions: {
|
||||
streetAddress: "555 Some St",
|
||||
apartmentNumberOrBusinessName: "Apt 1",
|
||||
city: "Funkytown",
|
||||
state: "OH",
|
||||
zipCode: "55555",
|
||||
},
|
||||
isVehicleProtected: true,
|
||||
serviceZipCode: "55555",
|
||||
};
|
||||
|
||||
// Act
|
||||
const result = deepClone(object);
|
||||
|
||||
// Assert
|
||||
expect(result).toStrictEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return a copy of the array", async () => {
|
||||
// Arrange
|
||||
|
||||
const array = [9, 8, 7, 6, 5, 4, 3, 2, 1];
|
||||
|
||||
const expected = [9, 8, 7, 6, 5, 4, 3, 2, 1];
|
||||
|
||||
// Act
|
||||
const result = deepClone(array);
|
||||
|
||||
// Assert
|
||||
expect(result).toStrictEqual(expected);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
// For nested objects, spread operator only creates new references to the top level fields,
|
||||
// the remaining nested fields actually reference the original object which can introduce problems.
|
||||
|
||||
// The purpose of this method is to deep clone the data in an object recursively, this is useful
|
||||
// for cloning modelValues to internal models when regular two-way binding is not an option.
|
||||
// See: mobile-location-modal-questions.vue
|
||||
|
||||
// Creates a deep clone of an object. Clones primitives, arrays and objects, excluding class instances.
|
||||
// https://www.30secondsofcode.org/js/s/deep-clone
|
||||
export function deepClone(object) {
|
||||
if (object === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let clone = Object.assign({}, object);
|
||||
Object.keys(clone).forEach(
|
||||
(key) =>
|
||||
(clone[key] = typeof object[key] === "object" ? deepClone(object[key]) : object[key])
|
||||
);
|
||||
|
||||
if (Array.isArray(object)) {
|
||||
clone.length = object.length;
|
||||
return Array.from(clone);
|
||||
}
|
||||
|
||||
return clone;
|
||||
}
|
||||
|
||||
// The purpose of this method is to check for array or object equality recursively to determine if two complex objects are equal.
|
||||
// This is only a comparison of data, not functions.
|
||||
export function deepEqual(obj1, obj2) {
|
||||
if (typeof obj1 !== typeof obj2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (obj1 === null || obj2 === null) {
|
||||
return obj1 === obj2;
|
||||
}
|
||||
|
||||
if (Array.isArray(obj1) && Array.isArray(obj2)) {
|
||||
if (obj1.length !== obj2.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const sorted1 = obj1.slice().sort();
|
||||
const sorted2 = obj2.slice().sort();
|
||||
|
||||
for (let i = 0; i < sorted1.length; i++) {
|
||||
if (!deepEqual(sorted1[i], sorted2[i])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
if (typeof obj1 === "object" && typeof obj2 === "object") {
|
||||
const keys1 = Object.keys(obj1);
|
||||
const keys2 = Object.keys(obj2);
|
||||
|
||||
if (keys1.length !== keys2.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const sortedKeys1 = keys1.sort();
|
||||
const sortedKeys2 = keys2.sort();
|
||||
|
||||
for (let i = 0; i < sortedKeys1.length; i++) {
|
||||
const key1 = sortedKeys1[i];
|
||||
const key2 = sortedKeys2[i];
|
||||
|
||||
if (key1 !== key2 || !deepEqual(obj1[key1], obj2[key2])) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return obj1 === obj2;
|
||||
}
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
import { deepClone, deepEqual } from "./object-helper";
|
||||
|
||||
describe("object-cloning-helper.js", () => {
|
||||
describe("deepClone", () => {
|
||||
it("Should return null if no object is passed in", async () => {
|
||||
// Arrange
|
||||
const expected = null;
|
||||
|
||||
// Act
|
||||
const result = deepClone(null);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return a deep copy of the object", async () => {
|
||||
// Arrange
|
||||
|
||||
const object = {
|
||||
addressQuestions: {
|
||||
streetAddress: "555 Some St",
|
||||
apartmentNumberOrBusinessName: "Apt 1",
|
||||
city: "Funkytown",
|
||||
state: "OH",
|
||||
zipCode: "55555",
|
||||
},
|
||||
isVehicleProtected: true,
|
||||
serviceZipCode: "55555",
|
||||
};
|
||||
|
||||
const expected = {
|
||||
addressQuestions: {
|
||||
streetAddress: "555 Some St",
|
||||
apartmentNumberOrBusinessName: "Apt 1",
|
||||
city: "Funkytown",
|
||||
state: "OH",
|
||||
zipCode: "55555",
|
||||
},
|
||||
isVehicleProtected: true,
|
||||
serviceZipCode: "55555",
|
||||
};
|
||||
|
||||
// Act
|
||||
const result = deepClone(object);
|
||||
|
||||
// Assert
|
||||
expect(result).toStrictEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return a copy of the array", async () => {
|
||||
// Arrange
|
||||
|
||||
const array = [9, 8, 7, 6, 5, 4, 3, 2, 1];
|
||||
|
||||
const expected = [9, 8, 7, 6, 5, 4, 3, 2, 1];
|
||||
|
||||
// Act
|
||||
const result = deepClone(array);
|
||||
|
||||
// Assert
|
||||
expect(result).toStrictEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe("deepEqual", () => {
|
||||
it("Should return false if the items being compared are not the same type", async () => {
|
||||
// Arrange
|
||||
const obj1 = ""; // String
|
||||
const obj2 = 3; // Number
|
||||
const expected = false;
|
||||
|
||||
// Act
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return false if one the items being compared is null", async () => {
|
||||
// Arrange
|
||||
const obj1 = {}; // Object
|
||||
const obj2 = null; // Array
|
||||
const expected = false;
|
||||
|
||||
// Act
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
describe("Both items being compared are arrays", () => {
|
||||
it("Should return true if the two arrays have the same elements in the same order", async () => {
|
||||
// Arrange
|
||||
const obj1 = [1, 2, 3]; // Array
|
||||
const obj2 = [1, 2, 3]; // Array
|
||||
const expected = true;
|
||||
|
||||
// Acts
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return true if the two arrays have the same elements in a different order", async () => {
|
||||
// Arrange
|
||||
const obj1 = [1, 2, 3]; // Array
|
||||
const obj2 = [3, 1, 2]; // Array
|
||||
const expected = true;
|
||||
|
||||
// Acts
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return false if the two arrays are not the same length", async () => {
|
||||
// Arrange
|
||||
const obj1 = [1, 2, 3]; // Array
|
||||
const obj2 = [1, 2]; // Array
|
||||
const expected = false;
|
||||
|
||||
// Acts
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return false if they have the same elements but their the array elements are different", async () => {
|
||||
// Arrange
|
||||
const obj1 = [1, 2, 3]; // Array
|
||||
const obj2 = [4, 5, 6]; // Array
|
||||
const expected = false;
|
||||
|
||||
// Acts
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Both items being compared are objects", () => {
|
||||
it("Should return false if the two objects *do not* have the same number of keys", async () => {
|
||||
// Arrange
|
||||
const obj1 = {
|
||||
prop1: {},
|
||||
}; // Object
|
||||
|
||||
const obj2 = {
|
||||
prop1: {},
|
||||
prop2: {},
|
||||
}; // Object
|
||||
const expected = false;
|
||||
|
||||
// Acts
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return true if the two objects have the same keys in the same order", async () => {
|
||||
// Arrange
|
||||
const obj1 = {
|
||||
prop1: {},
|
||||
prop2: {},
|
||||
}; // Object
|
||||
|
||||
const obj2 = {
|
||||
prop1: {},
|
||||
prop2: {},
|
||||
}; // Object
|
||||
|
||||
const expected = true;
|
||||
|
||||
// Acts
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return true if the two objects have the same keys in a different order", async () => {
|
||||
// Arrange
|
||||
const obj1 = {
|
||||
prop1: {},
|
||||
prop2: {},
|
||||
}; // Object
|
||||
|
||||
const obj2 = {
|
||||
prop2: {},
|
||||
prop1: {},
|
||||
}; // Object
|
||||
|
||||
const expected = true;
|
||||
|
||||
// Acts
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return false if the two objects have the same keys but in a nested object comparison one of the two values is null", async () => {
|
||||
// Arrange
|
||||
const obj1 = {
|
||||
prop1: {
|
||||
subProp1: {
|
||||
foo: "",
|
||||
bar: null,
|
||||
},
|
||||
},
|
||||
prop2: {
|
||||
subProp1: [1, 2, 3],
|
||||
},
|
||||
}; // Object
|
||||
|
||||
const obj2 = {
|
||||
prop1: {},
|
||||
prop2: {},
|
||||
}; // Object
|
||||
|
||||
const expected = false;
|
||||
|
||||
// Acts
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
|
||||
it("Should return false if the two objects have the same elements but a nested object comparison is of two different types", async () => {
|
||||
// Arrange
|
||||
const obj1 = {
|
||||
prop1: {
|
||||
subProp1: {
|
||||
foo: "",
|
||||
bar: "",
|
||||
},
|
||||
},
|
||||
prop2: {
|
||||
subProp1: [1, 2, 3],
|
||||
},
|
||||
}; // Object
|
||||
|
||||
const obj2 = {
|
||||
prop1: {
|
||||
subProp1: {
|
||||
foo: "",
|
||||
bar: "",
|
||||
},
|
||||
},
|
||||
prop2: {
|
||||
subProp1: {
|
||||
foo1: "",
|
||||
bar1: "",
|
||||
},
|
||||
},
|
||||
}; // Object
|
||||
|
||||
const expected = false;
|
||||
|
||||
// Acts
|
||||
const result = deepEqual(obj1, obj2);
|
||||
|
||||
// Assert
|
||||
expect(result).toEqual(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -66,7 +66,7 @@ import addressQuestions from "@/layouts/address-lookup/customer-questions/addres
|
|||
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
|
||||
|
||||
// Helpers
|
||||
import { deepClone } from "@/layouts/service-location/helpers/object-cloning-helper/object-cloning-helper";
|
||||
import { deepClone } from "@/layouts/service-location/helpers/object-helper/object-helper";
|
||||
import {
|
||||
getPricedMobileFeePart,
|
||||
getServiceabilityDetails,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { createStore, Store } from "vuex";
|
||||
import { createStore } from "vuex";
|
||||
import { endpoints } from "@/constants/endpoints.js";
|
||||
import { storeMutations } from "@/constants/store-mutations";
|
||||
import { getDateForSavedSessionTimeout } from "@/helpers/heritage-integration/session-helper";
|
||||
|
|
@ -9,8 +9,8 @@ import { applicationConfig } from "@/constants/application-config";
|
|||
import { experimentTriggers } from "@/constants/experiments";
|
||||
import { damageLocationsSelected } from "@/constants/damage-locations-selected";
|
||||
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||
import router from "@/router";
|
||||
import { deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper.js";
|
||||
import { deepEqual } from "@/layouts/service-location/helpers/object-helper/object-helper.js";
|
||||
|
||||
// Export State
|
||||
const getDefaultState = () => {
|
||||
|
|
@ -344,6 +344,12 @@ export const mutations = {
|
|||
resetSaveSessionPromise(state) {
|
||||
state.applicationUser.saveSessionPromise = null;
|
||||
},
|
||||
resetServiceLocationAppointmentType(state) {
|
||||
state.order.serviceLocation.appointmentType = null;
|
||||
},
|
||||
resetServiceLocationProvider(state) {
|
||||
state.order.serviceLocation.provider = null;
|
||||
},
|
||||
// Misc Mutations
|
||||
updateStateWithOrderInformation(state, sessionInformation) {
|
||||
state.order.referralNumber = sessionInformation.order.referralNumber;
|
||||
|
|
@ -1742,6 +1748,11 @@ export const actions = {
|
|||
},
|
||||
|
||||
saveSupportingItems(context, supportingItems) {
|
||||
if (!deepEqual(supportingItems, context.getters.order.lineItems.supportingItems)) {
|
||||
context.commit(storeMutations.RESET_SERVICE_LOCATION_APPOINTMENT_TYPE);
|
||||
context.commit(storeMutations.RESET_SERVICE_LOCATION_PROVIDER);
|
||||
}
|
||||
|
||||
context.commit(storeMutations.UPDATE_SUPPORTING_ITEMS, supportingItems);
|
||||
},
|
||||
|
||||
|
|
@ -1829,6 +1840,11 @@ export const actions = {
|
|||
},
|
||||
|
||||
saveGlassParts(context, parts) {
|
||||
if (!deepEqual(parts, context.store.order.lineItems.glassParts)) {
|
||||
context.commit(storeMutations.RESET_SERVICE_LOCATION_APPOINTMENT_TYPE);
|
||||
context.commit(storeMutations.RESET_SERVICE_LOCATION_PROVIDER);
|
||||
}
|
||||
|
||||
context.commit(storeMutations.UPDATE_GLASS_PARTS, parts);
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue