diff --git a/azure-pipelines.yml b/azure-pipelines.yml index ba2e359dc..e58f51862 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -78,4 +78,5 @@ stages: appDeployVariables: __VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__) __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__) + __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__) cfDistributionId: $(cfDistributionId) \ No newline at end of file diff --git a/src/.eslintrc.js b/src/.eslintrc.js new file mode 100644 index 000000000..309a0e4fd --- /dev/null +++ b/src/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + env: { + jest: true + }, +//... +} \ No newline at end of file diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue index 382640219..3266b88a9 100644 --- a/src/common-components/funnel-header/funnel-header.vue +++ b/src/common-components/funnel-header/funnel-header.vue @@ -66,4 +66,7 @@ export default { .logo-image { max-width: 78px; } +.alert { + left: 0; +} diff --git a/src/common-components/vehicle-banner/vehicle-banner.spec.js b/src/common-components/vehicle-banner/vehicle-banner.spec.js index a6dc13154..210653df2 100644 --- a/src/common-components/vehicle-banner/vehicle-banner.spec.js +++ b/src/common-components/vehicle-banner/vehicle-banner.spec.js @@ -93,7 +93,7 @@ function setupMocks({ categoryValue = "CAR" }) { //Mock store - store.dispatch = jest.fn(() => dataFromStoreApi); + store.dispatch = jest.fn(() => {}); store.getters = { vehicle: { category: categoryValue, imageUrl: imageUrlValue } }; const mountOptions = getMountOptions({ store: { diff --git a/src/constants/application-config.js b/src/constants/application-config.js index f2e4c76ac..489776e66 100644 --- a/src/constants/application-config.js +++ b/src/constants/application-config.js @@ -2,9 +2,8 @@ const applicationConfig = { CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY, GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY, - ANALYTICS_SESSION_TIMEOUT: 30, SAVED_SESSION_TIMEOUT: 45, + ANALYTICS_SESSION_TIMEOUT_MINUTES: 30, + SAVED_SESSION_TIMEOUT_DAYS: 45 }; - - -export { applicationConfig }; +export { applicationConfig }; \ No newline at end of file diff --git a/src/constants/cookie-names.js b/src/constants/cookie-names.js index 6b1e3c909..2756a8eb7 100644 --- a/src/constants/cookie-names.js +++ b/src/constants/cookie-names.js @@ -1,5 +1,5 @@ const cookieNames = { - CONCEPT_SESSION_INFO: "ConceptSessionInfo", + FUNNEL_SESSION_INFO: "FunnelSessionInfo", }; export { cookieNames }; diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index 00ac66d58..8b59bacb0 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -34,7 +34,7 @@ const storeMutations = { // OTHER MUTATIONS UPDATE_PAGE_DATA: "updatePageData", - SET_LOAD_CONCEPT_SESSION_INFO: "setLoadOrderInformation" + SET_LOAD_FUNNEL_SESSION_INFO: "setLoadOrderInformation" }; diff --git a/src/helpers/heritage-integration/cookie-helper.js b/src/helpers/heritage-integration/cookie-helper.js index 487c261b7..daf51876b 100644 --- a/src/helpers/heritage-integration/cookie-helper.js +++ b/src/helpers/heritage-integration/cookie-helper.js @@ -4,22 +4,12 @@ import store from "@/store"; /* Will update the cookie if present, or create a new one if not. */ -export function updateOrCreateConceptCookie() { - console.log("Updating cookie...", { - LastTouched: new Date().toUTCString(), - SavedQuoteTimeoutDate: store.getters.applicationUser.savedSessionTimeout, - DidHeritageFunnelUpdateLast: false, - ShouldResetState: false, - ReferralNumber: store.getters.order.referralNumber, - ReferralDate: store.getters.order.referralDate, - ReferralCorrelationId: store.getters.order.referralCorrelationId, - }); - +export function updateOrCreateFunnelCookie() { // Create the cookie - document.cookie = `${cookieNames.CONCEPT_SESSION_INFO}={}; domain=${getDomainWithoutSubdomain()}; path=/;`; + document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}={}; domain=${getDomainWithoutSubdomain()}; path=/;`; // Set up cookie with all the props. - setConceptCookieProperties({ + setFunnelCookieProperties({ LastTouched: new Date().toUTCString(), SavedQuoteTimeoutDate: store.getters.applicationUser.savedSessionTimeout, DidHeritageFunnelUpdateLast: false, @@ -32,17 +22,17 @@ export function updateOrCreateConceptCookie() { } /* - Gets the current instance of the concept funnel cookie. + Gets the current instance of the funnel cookie. Returns null if cookie isn't valid JSON. -*/ -export function getConceptCookie() { +*/ +export function getFunnelCookie() { console.log("getConceptCookie") console.log(document.cookie) console.log(location.hostname) console.log(getDomainWithoutSubdomain()) const cookieJson = document.cookie ?.split("; ") - ?.find(row => row.startsWith(`${cookieNames.CONCEPT_SESSION_INFO}=`)) + ?.find(row => row.startsWith(`${cookieNames.FUNNEL_SESSION_INFO}=`)) ?.split("=")[1]; console.log(cookieJson) try { @@ -53,19 +43,19 @@ export function getConceptCookie() { } /* - Removes concept cookie from browser. + Removes cookie from browser. */ export function deleteConceptCookie() { - document.cookie = `${cookieNames.CONCEPT_SESSION_INFO}=; Max-Age=0; domain=${getDomainWithoutSubdomain()}; path=/`; + document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}=; Max-Age=0; domain=${getDomainWithoutSubdomain()}; path=/`; } /* - Used to set properties on the concept funnel cookie. + Used to set properties on the funnel cookie. Takes an object with properties to set. Will overwrite existing properties. */ -function setConceptCookieProperties(properties) { +function setFunnelCookieProperties(properties) { if (typeof properties == "object") { - let cookie = getConceptCookie(); + let cookie = getFunnelCookie(); if (cookie !== null) { Object.keys(properties).forEach(key => { @@ -74,7 +64,7 @@ function setConceptCookieProperties(properties) { const cookieValueJson = JSON.stringify(cookie); - document.cookie = `${cookieNames.CONCEPT_SESSION_INFO}=${cookieValueJson}; domain=${getDomainWithoutSubdomain()}; path=/`; + document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}=${cookieValueJson}; domain=${getDomainWithoutSubdomain()}; path=/`; } } } diff --git a/src/helpers/heritage-integration/cookie-helper.spec.js b/src/helpers/heritage-integration/cookie-helper.spec.js index a20af9300..9d14389e2 100644 --- a/src/helpers/heritage-integration/cookie-helper.spec.js +++ b/src/helpers/heritage-integration/cookie-helper.spec.js @@ -1,4 +1,4 @@ -import {getConceptCookie} from "@/helpers/heritage-integration/cookie-helper.js"; +import {getFunnelCookie} from "@/helpers/heritage-integration/cookie-helper.js"; import { removeAllTestCookies, setupCookies } from "@/helpers/unit-test-helper"; describe("cookies", () => { @@ -7,7 +7,7 @@ describe("cookies", () => { removeAllTestCookies(); }) - describe("getConceptCookie method", () => { + describe("getFunnelCookie method", () => { test("gets correct value when cookie is present", () => { // Arrange const testReferralNumber = 1566818; @@ -24,10 +24,10 @@ describe("cookies", () => { DidHeritageFunnelUpdateLast: testDidHeritageFunnelUpdateLast } - setupCookies({ conceptCookieValue: JSON.stringify(testCookieValue) }); + setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) }); // Act - var result = getConceptCookie(); + var result = getFunnelCookie(); // Assert expect(result).toEqual(testCookieValue); @@ -42,10 +42,10 @@ describe("cookies", () => { test("returns empty object when value is empty object", () => { // Arrange const testCookieValue = {}; - setupCookies({ conceptCookieValue: JSON.stringify(testCookieValue) }); + setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) }); // Act - var result = getConceptCookie(); + var result = getFunnelCookie(); // Assert expect(result).toEqual(testCookieValue); @@ -56,21 +56,21 @@ describe("cookies", () => { test("returns null when value is empty string", () => { // Arrange const testCookieValue = ""; - setupCookies({ conceptCookieValue: testCookieValue }); + setupCookies({ funnelCookieValue: testCookieValue }); // Act - var result = getConceptCookie(); + var result = getFunnelCookie(); // Assert expect(result).toEqual(null); }); - test("returns null when concept cookie doesn't exist", () => { + test("returns null when funnel cookie doesn't exist", () => { // Arrange setupCookies({ includeHeritageCookie: false }); // Act - var result = getConceptCookie(); + var result = getFunnelCookie(); // Assert expect(result).toEqual(null); @@ -80,10 +80,10 @@ describe("cookies", () => { // Arrange const testCookieValue = { test: "testValue" }; - setupCookies({ conceptCookieValue: JSON.stringify(testCookieValue) }); + setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) }); // Act - const actualCookieValue = getConceptCookie(); + const actualCookieValue = getFunnelCookie(); // Assert expect(actualCookieValue).toEqual(testCookieValue); @@ -94,7 +94,7 @@ describe("cookies", () => { setupCookies({ includeHeritageCookie: false }); // Act - const actualCookieValue = getConceptCookie(); + const actualCookieValue = getFunnelCookie(); // Assert expect(actualCookieValue).toBeNull(); diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js index 4b9da5572..b6fd5a5b4 100644 --- a/src/helpers/heritage-integration/navigation-helper.js +++ b/src/helpers/heritage-integration/navigation-helper.js @@ -6,7 +6,7 @@ import store from "@/store"; import router from "@/router"; /* - If the user has visited the concept funnel before this method will determine the bets place to + If the user has visited the funnel before this method will determine the bets place to drop them so they don't start at the beginning again. This method will return 'heritage' if the user has an existing order and they come back in from the Safelite.com CTA. */ @@ -14,11 +14,9 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita // If the user is coming in via the Safelite.Com CTA if (toRoute.query[queryStrings.START_TYPE] === 'fmg') { - console.log("Start type is FMG... trying to figure out where to send them..."); // If they have an existing order, return 'heritage' for the page name. if (existingHeritageOrder) { - console.log("Existing heritage order found, returning 'heritage' for page redirect..."); return 'heritage'; } } @@ -45,11 +43,11 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita return 'vehicle-damage' } else { if (store.getters.vehicle.vin) { - return "vehicle-damage"; - // return "vin-lookup"; + return 'vehicle-damage'; + //return "vin-lookup"; (uncomment) } else { - return "vehicle-damage"; - // return "estimate" + return 'vehicle-damage'; + //return "estimate" (uncomment) } } diff --git a/src/helpers/heritage-integration/navigation-helper.spec.js b/src/helpers/heritage-integration/navigation-helper.spec.js index 78f91162b..be1136e63 100644 --- a/src/helpers/heritage-integration/navigation-helper.spec.js +++ b/src/helpers/heritage-integration/navigation-helper.spec.js @@ -4,6 +4,7 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js" import { storeActions } from "@/constants/store-actions"; import { setupMocksForJsFiles, getMockOrderInfo } from "@/helpers/unit-test-helper.js"; import { externalUrls } from "@/router/router-constants/externalUrl-values"; +import { queryStrings } from "@/constants/query-strings"; import store from "@/store"; import router from "@/router"; @@ -15,6 +16,58 @@ jest.mock("@/router/dynamic-routing/component-loader.js", () => ({ describe("getPageToRouteExistingOrderTo", () => { + test("getPageToRouteExistingOrderTo, should return vehicle-year", async () => { + // Arrange + const toRoute = { + query: {} + }; + + // Mock out the lazy load calls for all components. + lazyLoadComponent + .mockReturnValueOnce(() => { + return { + default: { + methods: { + arePagePrerequisitesValid: jest.fn().mockReturnValueOnce(false) + } + } + } + }) + .mockReturnValueOnce(() => { + return { + default: { + methods: { + arePagePrerequisitesValid: jest.fn().mockReturnValueOnce(false) + } + } + } + }) + .mockReturnValueOnce(() => { + return { + default: { + methods: { + arePagePrerequisitesValid: jest.fn().mockReturnValueOnce(false) + } + } + } + }) + .mockReturnValueOnce(() => { + return { + default: { + methods: { + arePagePrerequisitesValid: jest.fn().mockReturnValueOnce(false) + } + } + } + }); + + // Act + const result = await getPageToRouteExistingOrderTo(toRoute, false); + + //Assert + expect(result).toBe('vehicle-year'); + }); + test("getPageToRouteExistingOrderTo, should return vehicle-model", async () => { // Arrange const toRoute = { @@ -175,7 +228,8 @@ describe("getPageToRouteExistingOrderTo", () => { const result = await getPageToRouteExistingOrderTo(toRoute, false); //Assert - expect(result).toBe('vin-lookup'); + //expect(result).toBe('vin-lookup'); + expect(result).toBe('vehicle-damage'); }); test("getPageToRouteExistingOrderTo, should return estimate", async () => { @@ -230,8 +284,24 @@ describe("getPageToRouteExistingOrderTo", () => { const result = await getPageToRouteExistingOrderTo(toRoute, false); //Assert - expect(result).toBe('estimate'); + //expect(result).toBe('estimate'); + expect(result).toBe('vehicle-damage'); }); + + test("getPageToRouteExistingOrderTo, existing order, should return heritage", async () => { + // Arrange + const toRoute = { + query: { + [queryStrings.START_TYPE]: 'fmg' + } + } + + // Act + const result = await getPageToRouteExistingOrderTo(toRoute, true); + + // Assert + expect(result).toBe("heritage"); + }) }); describe("navigateToHeritageFunnel", () => { diff --git a/src/helpers/heritage-integration/order-helper.js b/src/helpers/heritage-integration/order-helper.js index cf8a45d16..aaf0db740 100644 --- a/src/helpers/heritage-integration/order-helper.js +++ b/src/helpers/heritage-integration/order-helper.js @@ -1,5 +1,5 @@ import { storeActions } from "@/constants/store-actions.js"; -import { getConceptCookie, updateOrCreateConceptCookie, deleteConceptCookie } from "@/helpers/heritage-integration/cookie-helper.js"; +import { getFunnelCookie, updateOrCreateFunnelCookie, deleteFunnelCookie } from "@/helpers/heritage-integration/cookie-helper.js"; import baseMixin from "@/mixins/base-mixin"; /* @@ -9,29 +9,23 @@ import baseMixin from "@/mixins/base-mixin"; */ export async function loadOrderIfPresent() { - console.log("attempting to load referral...."); - const conceptCookie = getConceptCookie(); - - console.log(conceptCookie) + const funnelCookie = getFunnelCookie(); // Do nothing if there is no cookie or no correlation id. - if (conceptCookie == null || conceptCookie.ReferralCorrelationId == null) { - console.log("No referral found"); + if (funnelCookie == null || funnelCookie.ReferralCorrelationId == null) { return null; } // Reset state if cookie says to. - if (conceptCookie.ShouldResetState) { - console.log("Resetting state..."); + if (funnelCookie.ShouldResetState) { baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.RESET_STATE); - deleteConceptCookie(); + deleteFunnelCookie(); return null; } - console.log("calling load order from loadOrderIfPresent()..."); // Load referral if there is a cookie, and it doesn't indicate it needs a state reset. - return (await loadOrder(conceptCookie.ReferralNumber, conceptCookie.ReferralDate, conceptCookie.ReferralCorrelationId)).data; + return (await loadOrder(funnelCookie.ReferralNumber, funnelCookie.ReferralDate, funnelCookie.ReferralCorrelationId)).data; } /* @@ -40,7 +34,6 @@ export async function loadOrderIfPresent() { update the cookie. */ export async function saveOrder() { - console.log("saving order..."); const savedOrderInfo = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.SAVE_ORDER); // Save the referral information back from the store. @@ -51,7 +44,7 @@ export async function saveOrder() { }, false); // Update the cookie with the referral information when saved. - updateOrCreateConceptCookie(); + updateOrCreateFunnelCookie(); } @@ -62,7 +55,6 @@ export async function saveOrder() { and returns the response. */ async function loadOrder(referralNumber, referralDate, referralCorrelationId) { - console.log("loading order...", referralNumber, referralDate, referralCorrelationId); const response = await baseMixin.methods.dispatchNonBlockingStoreAction(storeActions.LOAD_ORDER, { referralNumber: referralNumber.toString(), diff --git a/src/helpers/heritage-integration/order-helper.spec.js b/src/helpers/heritage-integration/order-helper.spec.js index 9d6b72f6e..5de25b6c0 100644 --- a/src/helpers/heritage-integration/order-helper.spec.js +++ b/src/helpers/heritage-integration/order-helper.spec.js @@ -11,7 +11,7 @@ describe("loadOrderIfPresent", () => { removeAllTestCookies(); }); - test("ShouldResetState == true => concept cookie is deleted", () => { + test("ShouldResetState == true => funnel cookie is deleted", () => { // Arrange const testShouldResetState = true; @@ -30,7 +30,7 @@ describe("loadOrderIfPresent", () => { test("ShouldResetState == true => reset store", () => { // Arrange - cookieHelper.getConceptCookie = jest.spyOn(cookieHelper, "getConceptCookie").mockReturnValueOnce({ ShouldResetState: true, ReferralCorrelationId: "xxx-xxx-xxx" }); + cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValueOnce({ ShouldResetState: true, ReferralCorrelationId: "xxx-xxx-xxx" }); const mockData = { actionList: [{ @@ -44,15 +44,13 @@ describe("loadOrderIfPresent", () => { loadOrderIfPresent(); // Assert - expect(cookieHelper.getConceptCookie).toHaveBeenCalled(); + expect(cookieHelper.getFunnelCookie).toHaveBeenCalled(); expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).toHaveBeenCalledWith(storeActions.RESET_STATE); - - cookieHelper.getConceptCookie.mockRestore(); }); - test("Concept cookie is null => store is unchanged", () => { + test("Funnel cookie is null => store is unchanged", () => { // Arrange - cookieHelper.getConceptCookie = jest.spyOn(cookieHelper, "getConceptCookie").mockReturnValueOnce(null); + cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie").mockReturnValueOnce(null); const mockData = { actionList: [{ @@ -66,10 +64,32 @@ describe("loadOrderIfPresent", () => { loadOrderIfPresent(); // Assert - expect(cookieHelper.getConceptCookie).toHaveBeenCalled(); + expect(cookieHelper.getFunnelCookie).toHaveBeenCalled(); expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).not.toHaveBeenCalledWith(storeActions.RESET_STATE); + }); - cookieHelper.getConceptCookie.mockRestore(); + test("Funnel cookie valid, should call loadOrder", async () => { + // Arrange + cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie") + .mockReturnValueOnce({ ShouldResetState: false, ReferralNumber: 123456, ReferralCorrelationId: "yyy-yyy-yyyy", ReferralDate: new Date()}); + + const mockData = { + actionList: [{ + actionName: storeActions.LOAD_ORDER, + data: { ReferralNumber: 123456, vehicle: { year: 2010 } } + }], + } + + var mocks = setupMocksForJsFiles(mockData); + + // Act + const result = await loadOrderIfPresent(); + + // Assert + expect(cookieHelper.getFunnelCookie).toHaveBeenCalled(); + expect(mocks.baseMixin.methods.dispatchNonBlockingStoreAction).not.toHaveBeenCalledWith(storeActions.LOAD_ORDER); + expect(result.ReferralNumber).toBe(123456); + expect(result.vehicle.year).toBe(2010); }); }); @@ -138,9 +158,7 @@ describe("saveOrder", () => { DidHeritageFunnelUpdateLast: true } - console.log("A") - console.log(location.hostname) - setupCookies({ conceptCookieValue: JSON.stringify(testCookieValue) }); + setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) }); console.log(document.cookie) @@ -148,6 +166,6 @@ describe("saveOrder", () => { await saveOrder(); // Assert - expect(cookieHelper.getConceptCookie().DidHeritageFunnelUpdateLast).toEqual(false); + expect(cookieHelper.getFunnelCookie().DidHeritageFunnelUpdateLast).toEqual(false); }); }); diff --git a/src/helpers/heritage-integration/session-helper.js b/src/helpers/heritage-integration/session-helper.js index 068c445eb..ba816cdb1 100644 --- a/src/helpers/heritage-integration/session-helper.js +++ b/src/helpers/heritage-integration/session-helper.js @@ -1,14 +1,14 @@ import { applicationConfig } from "@/constants/application-config"; -import { getConceptCookie} from "@/helpers/heritage-integration/cookie-helper.js"; +import { getFunnelCookie} from "@/helpers/heritage-integration/cookie-helper.js"; /* Method to determine if our analytics session has timed out or not. Amount used for timeout is configurable in application-config.js */ export function isAnalyticsSessionStillActive() { - if (getConceptCookie() !== null) { - const lastTouchedValue = getConceptCookie().LastTouched; - const timeoutAmount = applicationConfig.ANALYTICS_SESSION_TIMEOUT; + if (getFunnelCookie() !== null) { + const lastTouchedValue = getFunnelCookie().LastTouched; + const timeoutAmount = applicationConfig.ANALYTICS_SESSION_TIMEOUT_MINUTES; const isMoreThanHalfHourAgo = ((new Date() - new Date(lastTouchedValue)) / 60000) > timeoutAmount; if (isMoreThanHalfHourAgo) { @@ -27,12 +27,10 @@ export function isAnalyticsSessionStillActive() { Note: That time for saved session timeout is configurable in application-config.js */ export function isSavedSessionStillActive() { - if (getConceptCookie() !== null) { - const savedSessionTimeStamp = new Date(getConceptCookie().SavedQuoteTimeoutDate); + if (getFunnelCookie() !== null) { + const savedSessionTimeStamp = new Date(getFunnelCookie().SavedQuoteTimeoutDate); const isSavedSessionTimedOut = (new Date(new Date().toUTCString()) > savedSessionTimeStamp); - console.log("Saved Session Timed Out? --->", isSavedSessionTimedOut); - if (isSavedSessionTimedOut) { return false; } @@ -47,6 +45,6 @@ Function to get the date for the saved session timeout. export function getDateForSavedSessionTimeout() { const currentDate = new Date(new Date().toUTCString()) - currentDate.setDate(currentDate.getDate() + applicationConfig.SAVED_SESSION_TIMEOUT) + currentDate.setDate(currentDate.getDate() + applicationConfig.SAVED_SESSION_TIMEOUT_DAYS) return currentDate.toUTCString(); } \ No newline at end of file diff --git a/src/helpers/heritage-integration/session-helper.spec.js b/src/helpers/heritage-integration/session-helper.spec.js new file mode 100644 index 000000000..8a17743d1 --- /dev/null +++ b/src/helpers/heritage-integration/session-helper.spec.js @@ -0,0 +1,82 @@ +import * as cookieHelper from "@/helpers/heritage-integration/cookie-helper"; +import { isAnalyticsSessionStillActive, isSavedSessionStillActive, getDateForSavedSessionTimeout} from "@/helpers/heritage-integration/session-helper"; +import { applicationConfig } from "@/constants/application-config"; + +describe("isAnalyticsSessionStillActive", () => { + test("isAnalyticsSessionStillActive, should return true", () => { + // Arrange + const mockDate = new Date(new Date().toUTCString()) + mockDate.setDate(mockDate.getDate() + 1) + + cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie") + .mockReturnValue({ LastTouched: mockDate }); + + // Act + const result = isAnalyticsSessionStillActive(); + + // Assert + expect(result).toBe(true); + }); + + test("isAnalyticsSessionStillActive, should return false", () => { + // Arrange + const mockDate = new Date(new Date().toUTCString()) + mockDate.setDate(mockDate.getDate() - 1) + + cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie") + .mockReturnValue({ LastTouched: mockDate }); + + // Act + const result = isAnalyticsSessionStillActive(); + + // Assert + expect(result).toBe(false); + }); +}); + +describe("isSavedSessionStillActive", () => { + test("isSavedSessionStillActive, should return true", () => { + // Arrange + const mockDate = new Date(new Date().toUTCString()) + mockDate.setDate(mockDate.getDate() + 1); + + cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie") + .mockReturnValue({ SavedQuoteTimeoutDate: mockDate }); + + // Act + const result = isSavedSessionStillActive(); + + // Assert + expect(result).toBe(true); + }); + + test("isSavedSessionStillActive, should return false", () => { + // Arrange + const mockDate = new Date(new Date().toUTCString()) + mockDate.setDate(mockDate.getDate() - 1) + + cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie") + .mockReturnValue({ SavedQuoteTimeoutDate: mockDate }); + + // Act + const result = isSavedSessionStillActive(); + + // Assert + expect(result).toBe(false); + + }); +}); + +describe("getDateForSavedSessionTimeout", () => { + test("getDateForSavedSessionTimeout, should equal application config setting", () =>{ + // Arrange + const currentDate = new Date(new Date().toUTCString()) + currentDate.setDate(currentDate.getDate() + applicationConfig.SAVED_SESSION_TIMEOUT_DAYS) + + // Act + const result = getDateForSavedSessionTimeout(); + + // Assert + expect(result).toEqual(currentDate.toUTCString()); + }); +}) \ No newline at end of file diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index f95dc6f69..13ef9d632 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -54,7 +54,7 @@ export function setupMocksForJsFiles(mockData = {}) { // Heritage integration common methods export const cookies = { - [cookieNames.CONCEPT_SESSION_INFO]: `{"ReferralNumber":"1566818","ReferralDate":"2022-03-15T10:56:24.597","ReferralCorrelationId":"404d2b04-f86e-45c3-b373-127b6217b060","ShouldResetState":false,"DidHeritageFunnelUpdateLast":true}`, + [cookieNames.FUNNEL_SESSION_INFO]: `{"ReferralNumber":"1566818","ReferralDate":"2022-03-15T10:56:24.597","ReferralCorrelationId":"404d2b04-f86e-45c3-b373-127b6217b060","ShouldResetState":false,"DidHeritageFunnelUpdateLast":true}`, "UNIQUE_SESSION_ID": "33756020-b58e-4ec7-b8b8-3f1576719c40", "anotherCookie": "{}", "someOtherCookie": "{}" @@ -75,10 +75,10 @@ export function getMockOrderInfo(mockReferralNumber, mockCorrelationId, mockRefe } } -export function setupCookies({ conceptCookieValue = "", includeHeritageCookie = true }) { +export function setupCookies({ funnelCookieValue = "", includeHeritageCookie = true }) { Object.keys(cookies).forEach(key => { - const cookieValue = key == cookieNames.CONCEPT_SESSION_INFO ? conceptCookieValue : cookies[key]; - if (includeHeritageCookie || key != cookieNames.CONCEPT_SESSION_INFO) + const cookieValue = key == cookieNames.FUNNEL_SESSION_INFO ? funnelCookieValue : cookies[key]; + if (includeHeritageCookie || key != cookieNames.FUNNEL_SESSION_INFO) document.cookie = `${key}=${cookieValue}; domain=${getDomainWithoutSubdomain()}; path=/;`; }); diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js index a6ee43924..be3ef9485 100644 --- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js @@ -3,7 +3,7 @@ import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-que import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { nextTick } from "vue"; import store from "@/store"; -jest.mock("@/store", () => { return {}; }, {virtual: true}); +jest.mock("@/store",()=>{return{};},{virtual:true}); describe("replace-options-question.vue", () => { test("Selected damage option is emitted upon selection.", async () => { diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js index 9c40a0683..29bbb68b5 100644 --- a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js +++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js @@ -3,7 +3,7 @@ import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-doo import { getMountOptions } from "@/helpers/unit-test-helper.js"; import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question"; import store from "@/store"; -jest.mock("@/store", () => { return {}; }, {virtual: true}); +jest.mock("@/store",()=>{return{};},{virtual:true}); describe("replace-options-question.vue", () => { test("Selected side door option is emitted upon selection.", async () => { @@ -95,7 +95,7 @@ describe("replace-options-question.vue", () => { }) { //Mock store - store.dispatch = jest.fn(() => dataFromStoreApi); + store.dispatch = jest.fn(() => {}); store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} }; const mountOptions = getMountOptions({ store: { diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 93a3c9680..fd3f55a74 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -5,7 +5,7 @@ ref="theForm" v-slot="{ meta }" > -
+
@@ -285,7 +285,7 @@ export default { }, navigateForward(partsData){ - // CSR-98 TEMP + // CSR-98 TEMP if (store.getters.vehicle.year == 2010) { navigateToHeritageFunnel(); return; @@ -393,15 +393,15 @@ export default { hasSplitSingleConflict() { if (!this.selectedWindshieldOptions.selectedWindshieldReplaceOptions) return false; - return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedSingleWindshield => + return this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedSingleWindshield => { return selectedSingleWindshield.toUpperCase() === damageLocationsSelected.SINGLE.toUpperCase(); - }) && - (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedDriverWindshield => + }) && + (this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedDriverWindshield => { return selectedDriverWindshield.toUpperCase() === damageLocationsSelected.DRIVER.toUpperCase(); }) || - this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedPassengerWindshield => + this.selectedWindshieldOptions.selectedWindshieldReplaceOptions.some(selectedPassengerWindshield => { return selectedPassengerWindshield.toUpperCase() === damageLocationsSelected.PASSENGER.toUpperCase(); }) diff --git a/src/router/index.js b/src/router/index.js index eef9d4b23..fc24e70c4 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,7 +7,7 @@ import { globalEvents, globalEventTypes } from "@/constants/events"; // Heritage integration import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper"; -import { updateOrCreateConceptCookie,getConceptCookie } from "@/helpers/heritage-integration/cookie-helper"; +import { updateOrCreateFunnelCookie,getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper"; import { loadOrderIfPresent, saveOrder } from "@/helpers/heritage-integration/order-helper"; import { getPageToRouteExistingOrderTo, navigateToHeritageFunnel} from "@/helpers/heritage-integration/navigation-helper"; @@ -41,14 +41,14 @@ const routes = [ try { // If the saved session has timed out, clear the session, execute 404 logic. - if (!isSavedSessionStillActive()) { + if (getFunnelCookie() !== null && !isSavedSessionStillActive()) { await GoToFunnelStartOn404(next); } - // Process concept funnel cookie. - updateOrCreateConceptCookie(); + // Process funnel cookie. + updateOrCreateFunnelCookie(); - // On entering the concept funnel "fresh", read cookie information, decide what to do next. + // On entering the funnel "fresh", read cookie information, decide what to do next. if (from.redirectedFrom === undefined) { const loadOrderResponse = await loadOrderIfPresent(); const pageToRedirectTo = await getPageToRouteExistingOrderTo(to, loadOrderResponse); @@ -62,8 +62,6 @@ const routes = [ // Assign our fmgPage so it will load normally like the other pages. to.query.fmgPage = pageToRedirectTo; - - console.log("Page to redirect to: ", pageToRedirectTo); } // If we already have our route, go to it. @@ -164,7 +162,7 @@ async function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery baseMixin.methods.savePageDataToStore(destinationFmgPageValue, optionalPageData); // if cookie and referralNumber/Date exists - if (getConceptCookie()?.ReferralNumber && getConceptCookie()?.ReferralDate) { + if (getFunnelCookie()?.ReferralNumber && getFunnelCookie()?.ReferralDate) { await saveOrder(); } diff --git a/src/store/index.js b/src/store/index.js index 26a0b31b6..5f08cf0ba 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -391,7 +391,7 @@ export const actions = { referralCorrelationId: referralCorrelationId }, }).then((response) => { - context.commit(storeMutations.SET_LOAD_CONCEPT_SESSION_INFO, response.data); + context.commit(storeMutations.SET_LOAD_FUNNEL_SESSION_INFO, response.data); return response; }); } diff --git a/src/store/store.spec.js b/src/store/store.spec.js index a3f8a5cb5..c8fe2476b 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -200,6 +200,38 @@ describe("Mutations", () => { expect(storeState.applicationUser.pageData['vehicle-year']).toEqual({}); }); + it("setLoadOrderInformation, should set order information in state", () => { + // Arrange + const storeState = state; + + // Act + mutations.setLoadOrderInformation(storeState, { + referralNumber: 123, + referralDate: new Date().toUTCString(), + referralCorrelationId: "xxx-xxx-xxx", + vehicle: { + year: "2019", + make: "Acura", + model: "ILX", + style: "4 DOOR SEDAN", + carId: "C0000001", + category: "CAR" + }, + glassToReplace: ["Windshield"], + isRepair: false, + numberOfChips: 0, + parts: [], + parentAccountNumber: "123456789", + }); + + // Assert + expect(storeState.order.referralNumber).toEqual(123); + expect(storeState.order.referralCorrelationId).toEqual("xxx-xxx-xxx"); + expect(storeState.order.vehicle.year).toEqual("2019"); + expect(storeState.order.vehicle.make).toEqual("Acura"); + expect(storeState.order.vehicle.model).toEqual("ILX"); + }); + }); describe("Actions", () => { @@ -466,6 +498,66 @@ describe("Actions", () => { expect(response.data).toEqual({ imageUrl: "https://test.com" }); }); + it("saveOrder action, returns order information", async () => { + // Arrange + const context = state; + + context.getters = { + vehicle: {}, + damage: {}, + }; + context.state = { + order: {} + }; + + globalMethods.callHttpClient.mockImplementation(() => { + return Promise.resolve({ data: { referralNumber: 123 } }); + }); + + // Act + const response = await actions.saveOrder(context); + + // Assert + expect(response.data).toEqual({ referralNumber: 123 }); + }); + + + it("loadOrder action, returns order information, calls mutation", async () => { + // Arrange + const context = state; + + globalMethods.callHttpClient.mockImplementation(() => { + return Promise.resolve({ data: { referralNumber: 123 } }); + }); + + const commit = jest.fn(); + + context.commit = commit; + + // Act + const response = await actions.loadOrder(context, {referralNumber: "123", referralDate: new Date().toUTCString(), referralCorrelationId: "xxx-xxx-xxx"}); + + // Assert + expect(response.data).toEqual({ referralNumber: 123 }); + expect(commit).toBeCalledWith(storeMutations.SET_LOAD_FUNNEL_SESSION_INFO, {"referralNumber": 123}); + }); + + it("setReferralInformation, should call commit three times", () => { + // Arrange + const context = state; + const commit = jest.fn(); + + context.commit = commit; + + // Act + actions.setReferralInformation(context, {referralNumber: "123", referralDate: new Date().toUTCString(), referralCorrelationId: "xxx-xxx-xxx"}); + + // Assert + expect(commit).toBeCalledWith(storeMutations.UPDATE_REFERRAL_NUMBER, "123"); + expect(commit).toBeCalledWith(storeMutations.UPDATE_REFERRAL_DATE, new Date().toUTCString()); + expect(commit).toBeCalledWith(storeMutations.UPDATE_REFERRAL_CORRELATION_ID, "xxx-xxx-xxx"); + }); + }); describe("Getters", () => { diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index 323430dfe..fe1637e43 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -3,14 +3,19 @@ &.list-card { border: 1px solid $red; color: $red; - label { - box-shadow: 0 0 1px $red !important; - border-radius: .5rem; - } input[type=checkbox]:focus + label, input[type=radio]:focus + label { box-shadow: 0 0 0 2.5px $red; } + input[type=checkbox]:focus + label:hover, + input[type=radio]:focus + label { + box-shadow: 0 0 0 1px $red; + } + &:hover { + box-shadow: 0px 0px 0px 4px $red-200; + border-radius: 10px !important; + border: 1px solid $red; + } } input[type=checkbox]:checked + label, @@ -21,6 +26,9 @@ color: $red; label { border: 1px solid $red; + &:hover { + box-shadow: 0px 0px 0px 4px $red-200; + } } input[type=checkbox]:focus + label, input[type=radio]:focus + label { diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue index 60497df84..3ddd0bd6b 100644 --- a/src/ux-components/button-main/button-main.vue +++ b/src/ux-components/button-main/button-main.vue @@ -58,6 +58,9 @@ export default { @media (hover: hover) { background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%); } + &:focus { + box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; + } &:focus, // Mouse, touch, stylus focus &:focus-visible { // Keyboard focus for accessibility @@ -88,6 +91,7 @@ export default { &.has-loader { color: $white; background: $blue-700; + box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700; } &.delay {// fixes flicker while transitioning between states transition: background 0s 0s ease-in-out;