From f378f690ab9f7b2d43066593abdfd38c273dd588 Mon Sep 17 00:00:00 2001 From: FrankRua Date: Mon, 18 Apr 2022 17:10:58 -0400 Subject: [PATCH] Refactor logic for redirect --- .../funnel-footer/funnel-footer.vue | 12 +- src/global-methods.js | 6 +- .../heritage-integration/navigation-helper.js | 99 ++++++++---- src/layouts/address-lookup/address-lookup.vue | 2 +- src/layouts/estimate/estimate.vue | 0 src/layouts/form-test/form-test.vue | 2 +- .../license-plate-lookup.vue | 2 +- src/layouts/vehicle-damage/vehicle-damage.vue | 18 ++- src/layouts/vin-lookup/vin-lookup.vue | 39 ++--- src/router/index.js | 149 +++++++++--------- src/router/router-constants/fmgPage-values.js | 1 + .../router-constants/navigation-scenarios.js | 2 + src/router/router-constants/routing-table.js | 9 +- src/store/index.js | 23 ++- .../button-main/button-main.spec.js | 2 +- 15 files changed, 224 insertions(+), 142 deletions(-) create mode 100644 src/layouts/estimate/estimate.vue diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index c6e7659b9..424003708 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -22,13 +22,13 @@ isPrimary :buttonText="buttonText" loaderColor="white" - :class="isDisabled && 'form-test-invalid'" - :aria-disabled="isDisabled" - :isDisabled="isDisabled" + :class="isForwardActionDisabled && 'form-test-invalid'" + :aria-disabled="isForwardActionDisabled" + :isDisabled="isForwardActionDisabled" @click-event="buttonClick" /> -
+
{ - const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL; + var apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL; + + if(endpoint.includes("order")){ + apiGatewayUrl = 'https://localhost:44346'; + } const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass", diff --git a/src/helpers/heritage-integration/navigation-helper.js b/src/helpers/heritage-integration/navigation-helper.js index 06eff0042..b10f8c954 100644 --- a/src/helpers/heritage-integration/navigation-helper.js +++ b/src/helpers/heritage-integration/navigation-helper.js @@ -2,6 +2,7 @@ import { queryStrings } from "@/constants/query-strings"; import { externalUrls } from "@/router/router-constants/externalUrl-values"; import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"; import { saveOrder } from "@/helpers/heritage-integration/order-helper.js"; +import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import store from "@/store"; import router from "@/router"; @@ -12,45 +13,24 @@ import router from "@/router"; */ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHeritageOrder = false) { + // If navigating to a specific page, and that page is not part of the vin pages. + // Return that page, so that it can navigate like normal. + if (toRoute.query[queryStrings.FMG_PAGE] !== undefined && !isVinRelatedPage(toRoute)) { + return overrideYmmsDirectionIfNeeded(toRoute, toRoute.query[queryStrings.FMG_PAGE]); + } + // If the user is coming in via the Safelite.Com CTA if (toRoute.query[queryStrings.START_TYPE] === 'fmg') { - // If they have an existing order, return 'heritage' for the page name. if (existingHeritageOrder) { return 'heritage'; } } + // If this is not a direct link to a page using fmgPage, get the latest page. + const latestPageRoute = await getLatestPageForRedirection(); - // If this is a non-CTA navigation, determine where to send the user based on page prerequisites. - // This also works if a user has a 'fmg' start_type query string but no current order. - // That shouldn't happen, but it's possible. - const vehicleMakeComponent = (await lazyLoadComponent('vehicle-make')()).default; - const vehicleModelComponent = (await lazyLoadComponent('vehicle-model')()).default; - const vehicleStyleComponent = (await lazyLoadComponent('vehicle-style')()).default; - const vehicleDamageComponent = (await lazyLoadComponent('vehicle-damage')()).default; - - - if (!vehicleMakeComponent.methods.arePagePrerequisitesValid()) { - return "vehicle-year"; - } else if (!vehicleModelComponent.methods.arePagePrerequisitesValid()) { - return "vehicle-make"; - } else if (!vehicleStyleComponent.methods.arePagePrerequisitesValid()) { - return "vehicle-model"; - } else if (!vehicleDamageComponent.methods.arePagePrerequisitesValid()) { - return "vehicle-style"; - } else if (store.getters.damage.isRepair == null || !store.getters.vehicle.carId) { - return 'vehicle-damage' - } else { - if (store.getters.vehicle.vin) { - return 'vehicle-damage'; - //return "vin-lookup"; (uncomment) - } else { - return 'vehicle-damage'; - //return "estimate" (uncomment) - } - } - + return latestPageRoute; } /* @@ -66,6 +46,63 @@ export async function navigateToHeritageFunnel() { { corid: store.getters.order.referralCorrelationId, src: "concept-funnel", + experiments: "ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true" } ); -} \ No newline at end of file +} + +async function getLatestPageForRedirection() { + // If this is a non-CTA navigation, determine where to send the user based on page prerequisites. + // This also works if a user has a 'fmg' start_type query string but no current order. + // That shouldn't happen, but it's possible. + const vehicleMakeComponent = (await lazyLoadComponent('vehicle-make')()).default; + const vehicleModelComponent = (await lazyLoadComponent('vehicle-model')()).default; + const vehicleStyleComponent = (await lazyLoadComponent('vehicle-style')()).default; + const vehicleDamageComponent = (await lazyLoadComponent('vehicle-damage')()).default; + + + if (!vehicleMakeComponent.methods.arePagePrerequisitesValid()) { + return fmgPageValues.VEHICLE_YEAR; + } else if (!vehicleModelComponent.methods.arePagePrerequisitesValid()) { + return fmgPageValues.VEHICLE_MAKE; + } else if (!vehicleStyleComponent.methods.arePagePrerequisitesValid()) { + return fmgPageValues.VEHICLE_MODEL; + } else if (!vehicleDamageComponent.methods.arePagePrerequisitesValid()) { + return fmgPageValues.VEHICLE_STYLE; + } else if (store.getters.damage.isRepair == null || !store.getters.vehicle.carId) { + return fmgPageValues.VEHICLE_DAMAGE; + } else { + if (store.getters.vehicle.vin) { + return fmgPageValues.VIN_LOOKUP; + } else { + return fmgPageValues.ESTIMATE; + } + } +} + +function overrideYmmsDirectionIfNeeded(toRoute, defaultPageValue) { + if (store.getters.payment.insuranceCoverage.isVerified) { + switch (toRoute.query[queryStrings.FMG_PAGE]) { + case fmgPageValues.VEHICLE_YEAR: + case fmgPageValues.VEHICLE_MAKE: + case fmgPageValues.VEHICLE_MODEL: + case fmgPageValues.VEHICLE_STYLE: + { + return fmgPageValues.VEHICLE_DAMAGE; + } + default: { + return defaultPageValue; + } + } + } else { + return defaultPageValue; + } +} + +function isVinRelatedPage(toRoute) { + return toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.VIN_LOOKUP || + toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.LICENSE_PLATE_LOOKUP || + toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.ADDRESS_LOOKUP || + toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.ADDRESS_VEHICLES || + toRoute.query[queryStrings.FMG_PAGE] === fmgPageValues.ESTIMATE; +} diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue index 2086cd032..7a90ee123 100644 --- a/src/layouts/address-lookup/address-lookup.vue +++ b/src/layouts/address-lookup/address-lookup.vue @@ -12,7 +12,7 @@
diff --git a/src/layouts/estimate/estimate.vue b/src/layouts/estimate/estimate.vue new file mode 100644 index 000000000..e69de29bb diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue index 8e9aefe22..046b0c234 100644 --- a/src/layouts/form-test/form-test.vue +++ b/src/layouts/form-test/form-test.vue @@ -44,7 +44,7 @@ /> diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index a6d181ddd..d61c4e88e 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -50,7 +50,7 @@ diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 45ea9d92b..6dad2d9e4 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -47,7 +47,8 @@ /> @@ -145,9 +146,11 @@ export default { } return false; }, + resetDependentState() { store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES); }, + backButtonAction() { // route to move backwards this.$router.navigate( @@ -155,6 +158,7 @@ export default { this.$route ); }, + getDamageLocationsFromStore() { var glassSelections = []; @@ -275,13 +279,20 @@ export default { }, navigateForward(partsData){ - // CSR-98 TEMP + + // Temporary easter egg to navigate to heritage funnel. const vehicleYearsToShowHeritageFunnel = [ 2001, 2002, 2010 ]; if (vehicleYearsToShowHeritageFunnel.includes(store.getters.vehicle.year)) { navigateToHeritageFunnel(); return; } + // If vin already exists, navigate directly to vin-lookup + if(this.$store.getters.vehicle.vin){ + this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, this.$route); + return; + } + //found problem questions if (partsData.data.partsOrQuestions.some(pq => pq.partQuestions != null && pq.partQuestions.length > 0)){ this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_DAMAGE_WITH_PART_QUESTIONS, this.$route, {}, {}, partsData.data); @@ -398,6 +409,9 @@ export default { }) ); }, + shouldHideBackButton(){ + return this.$store.getters.payment.insuranceCoverage.isVerified; + } }, components: { diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue index fc9058abf..366a499af 100644 --- a/src/layouts/vin-lookup/vin-lookup.vue +++ b/src/layouts/vin-lookup/vin-lookup.vue @@ -1,17 +1,10 @@ @@ -25,14 +18,24 @@ import textboxQuestion from "@/common-components/textbox-question/textbox-questi import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information"; export default { - name: "vin-lookup", - components: { - funnelHeader, - vehicleBanner, - funnelSubHeader, - vinInformation, - funnelFooter, - }, + name: "vin-lookup", + components: { + funnelHeader, + vehicleBanner, + funnelSubHeader, + vinInformation, + funnelFooter, + }, + methods: { + arePagePrerequisitesValid() { + return true; + }, + backButtonAction() { + if (this.$store.getters.vehicle.vin) { + this.$router.navigate(this.navigationScenarios.CLICKED_BACK_WITH_VIN, this.$route) + } + } + } }; diff --git a/src/router/index.js b/src/router/index.js index 778c55cfc..1759dec68 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,9 +7,9 @@ import { globalEvents, globalEventTypes } from "@/constants/events"; // Heritage integration import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper"; -import { updateOrCreateFunnelCookie,getFunnelCookie } 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"; +import { getPageToRouteExistingOrderTo, navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper"; import baseMixin from "@/mixins/base-mixin"; import eventBus from "@/helpers/event-bus/event-bus"; @@ -35,84 +35,79 @@ const routes = [ name: "root", async beforeEnter(to, from, next) { // If we have no query string, or we don't have the FmgPage query string. - if (to.query.fmgPage === undefined) { - await GoToFunnelStartOn404(next); - } else { - try { + try { - // If the saved session has timed out, clear the session, execute 404 logic. - if (getFunnelCookie() !== null && !isSavedSessionStillActive()) { - await GoToFunnelStartOn404(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); - - // If getPageToRouteExistingOrderTo determines that the return user needs to - // go back to heritage funnel, send them there and stop our current navigation. - if (pageToRedirectTo === 'heritage') { - await navigateToHeritageFunnel(); - return next(false); - } - - // Assign our fmgPage so it will load normally like the other pages. - to.query.fmgPage = pageToRedirectTo; - } - - // Process funnel cookie. - updateOrCreateFunnelCookie(); - - // If we already have our route, go to it. - if (router.hasRoute(to.query.fmgPage)) { - // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function. - let component = router.getRoutes().filter((x) => x.name === to.query.fmgPage)[0].components; - - // If the component hasn't been loaded fully, load it before we check prerequisites. - if (component.default.methods === undefined) { - component = await component.default(); - } - - if (!arePagePrerequisitesValid(component)) { - await GoToFunnelStartOn404(next); - } - - return next({ name: to.query.fmgPage, query: to.query, params: to.params }); - } - - // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms. - const routeData = await GetRouteInfoFromPageName(to.query.fmgPage); - - // Add our dynamic route. - router.addRoute({ - path: routeData[0].path, // Always the same path, because we control it with query strings. - name: routeData[0].name, - component: routeData[0].component, - }); - - // Call the next components arePagePrerequisitesValid method before load. - // If it returns false, use the 404 logic. - const nextComponent = await router.getRoutes().filter((x) => x.name === routeData[0].name)[0].components.default(); - - if (!arePagePrerequisitesValid(nextComponent)) { - await GoToFunnelStartOn404(next); - } - - // Assign current query string parameters, as well as our fmgPage one. - next({ - name: routeData[0].name, - query: Object.assign(to.query, { fmgPage: routeData[0].name }), - params: to.params - }); - } catch (error) { - console.log(error); - - // If we don't have a route, go to our 404 page. + // If the saved session has timed out, clear the session, execute 404 logic. + if (getFunnelCookie() !== null && !isSavedSessionStillActive()) { await GoToFunnelStartOn404(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); + + // If getPageToRouteExistingOrderTo determines that the return user needs to + // go back to heritage funnel, send them there and stop our current navigation. + if (pageToRedirectTo === 'heritage') { + await navigateToHeritageFunnel(); + return next(false); + } + + + // Assign our fmgPage so it will load normally like the other pages. + to.query.fmgPage = pageToRedirectTo; + } + + // Process funnel cookie. + updateOrCreateFunnelCookie(); + + // If we already have our route, go to it. + if (router.hasRoute(to.query.fmgPage)) { + // Since our route is already in scope, we can grab the component from it and call the arePagePrerequisitesValid function. + let component = router.getRoutes().filter((x) => x.name === to.query.fmgPage)[0].components; + + // If the component hasn't been loaded fully, load it before we check prerequisites. + if (component.default.methods === undefined) { + component = await component.default(); + } + + if (!arePagePrerequisitesValid(component)) { + await GoToFunnelStartOn404(next); + } + + return next({ name: to.query.fmgPage, query: to.query, params: to.params }); + } + + // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms. + const routeData = await GetRouteInfoFromPageName(to.query.fmgPage); + + // Add our dynamic route. + router.addRoute({ + path: routeData[0].path, // Always the same path, because we control it with query strings. + name: routeData[0].name, + component: routeData[0].component, + }); + + // Call the next components arePagePrerequisitesValid method before load. + // If it returns false, use the 404 logic. + const nextComponent = await router.getRoutes().filter((x) => x.name === routeData[0].name)[0].components.default(); + + if (!arePagePrerequisitesValid(nextComponent)) { + await GoToFunnelStartOn404(next); + } + + // Assign current query string parameters, as well as our fmgPage one. + next({ + name: routeData[0].name, + query: Object.assign(to.query, { fmgPage: routeData[0].name }), + params: to.params + }); + } catch (error) { + console.log(error); + + // If we don't have a route, go to our 404 page. + await GoToFunnelStartOn404(next); } }, }, diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js index f3c811de3..9abb45cd2 100644 --- a/src/router/router-constants/fmgPage-values.js +++ b/src/router/router-constants/fmgPage-values.js @@ -11,6 +11,7 @@ const fmgPageValues = { LICENSE_PLATE_LOOKUP: "license-plate-lookup", REVEAL: "reveal", ESTIMATE: "estimate", + ADDRESS_VEHICLES: "address-vehicles", }; export { fmgPageValues }; diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index da170da53..57f07a041 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -4,7 +4,9 @@ const navigationScenarios = { SELECTED_MAKE: "SELECTED_MAKE", SELECTED_STYLE: "SELECTED_STYLE", CLICKED_BACK: "CLICKED_BACK", + CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN", CLICKED_FORWARD: "CLICKED_FORWARD", + CLICKED_FORWARD_WITH_VIN: "CLICKED_FORWARD_WITH_VIN", SELECTED_PARTS: "SELECTED_PARTS", SELECTED_DAMAGE_WITH_SINGLE_PART: "SELECTED_DAMAGE_WITH_SINGLE_PART", SELECTED_DAMAGE_WITH_MULTIPLE_PARTS: "SELECTED_DAMAGE_WITH_MULTIPLE_PARTS", diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 99583b975..e5228ea4c 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -1,6 +1,5 @@ import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; -import { applicationConfig } from "@/constants/application-config"; const routingTable = [ { @@ -58,6 +57,10 @@ const routingTable = [ scenario: navigationScenarios.CLICKED_BACK, destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE, }, + { + scenario: navigationScenarios.CLICKED_FORWARD_WITH_VIN, + destinationFmgPageValue: fmgPageValues.VIN_LOOKUP, + }, { scenario: navigationScenarios.SELECTED_DAMAGE_WITH_SINGLE_PART, destinationFmgPageValue: fmgPageValues.REVEAL @@ -109,6 +112,10 @@ const routingTable = [ scenario: navigationScenarios.CLICKED_BACK, destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE, }, + { + scenario: navigationScenarios.CLICKED_BACK_WITH_VIN, + destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE, + }, { scenario: navigationScenarios.VIN_LOOKUP, destinationFmgPageValue: fmgPageValues.PART_QUESTIONS, diff --git a/src/store/index.js b/src/store/index.js index b101d0524..0519fc0d2 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -45,6 +45,12 @@ const getDefaultState = () => { glassParts: null, otherParts: null }, + payment:{ + isInsurance: null, + insuranceCoverage: { + isVerified: null + } + }, referralNumber: null, referralDate: null, referralCorrelationId: null, @@ -120,6 +126,12 @@ export const mutations = { updateParentAcctNumber(state, parentAcctNumber) { state.order.parentAccountNumber = parentAcctNumber; }, + updateIsInsurance(state, isInsurance) { + state.order.payment.isInsurance = isInsurance; + }, + updateInsuranceVerifiedStatus(state, isVerified) { + state.order.payment.insuranceCoverage.isVerified = isVerified; + }, // EVENT BUS MUTATIONS @@ -176,6 +188,7 @@ export const mutations = { state.order.referralNumber = orderInformation.referralNumber; state.order.referralDate = orderInformation.referralDate; state.order.referralCorrelationId = orderInformation.referralCorrelationId; + state.order.vehicle = Object.assign(state.order.vehicle, { year: orderInformation.vehicle?.year, make: orderInformation.vehicle?.make, @@ -187,12 +200,17 @@ export const mutations = { imageVifNumber: orderInformation.vehicle?.imageVifNumber, imageColor: orderInformation.vehicle?.imageVifColor }); + state.order.damage.glassToReplace = orderInformation.glassToReplace; state.order.damage.isRepair = orderInformation.isRepair; state.order.damage.numberOfChips = orderInformation.numberOfChips; + state.order.lineItems.glassParts = orderInformation.parts; state.order.parentAccountNumber = orderInformation.parentAccountNumber; state.order.serviceLocation.zipCode = orderInformation.zipCode; + + state.order.payment.isInsurance = orderInformation.IsInsuranceOrder; + state.order.payment.insuranceCoverage.isVerified = orderInformation?.insuranceInfo.coverageVerified; } } @@ -210,11 +228,10 @@ export const getters = { eventBus: (state) => state.applicationUser.eventBus, damage: (state) => state.order.damage, lineItems: (state) => state.order.lineItems, - pageData: (state) => (page) => { - return state.applicationUser.pageData[page]; - }, + pageData: (state) => (page) => { return state.applicationUser.pageData[page]; }, applicationUser: (state) => state.applicationUser, order: (state) => state.order, + payment: (state) => state.order.payment, } // Export Actions diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js index ee5589a1d..7b99cfd04 100644 --- a/src/ux-components/button-main/button-main.spec.js +++ b/src/ux-components/button-main/button-main.spec.js @@ -22,7 +22,7 @@ describe("buttonMain.vue", () => { // Act const wrapper = shallowMount(buttonMain, { propsData: { - isDisabled: true, + isForwardActionDisabled: true, }, });