diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue index a5a778cc8..332936ba6 100644 --- a/src/layouts/payment-method/payment-method.vue +++ b/src/layouts/payment-method/payment-method.vue @@ -525,14 +525,18 @@ export default { await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true }); this.$router.navigateWithoutSaving( this.navigationScenarios.CLICKED_FORWARD, - this.$route + this.$route, + {}, + { [routerParams.DISPLAY_PIA_ALERT]: false } ); } else { if (this.paymentMethod == paymentMethods.INSURANCE) { this.dispatchStoreAction(this.storeActions.SAVE_PAYMENT_TYPE, true, false); this.$router.navigateWithoutSaving( this.navigationScenarios.CLICKED_INSURANCE, - this.$route + this.$route, + {}, + { [routerParams.DISPLAY_PIA_ALERT]: false } ); } else { this.setupPia(); @@ -554,14 +558,16 @@ export default { } catch (error) { console.log("error: response from pia submit work order:" + error.message); this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE); - this.$route.params[routerParams.DISPLAY_PIA_ALERT] = true; + this.$route.query[queryStrings.DISPLAY_PIA_ALERT] = true; return; } } this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE); this.$router.navigateWithoutSaving( this.navigationScenarios.CLICKED_PAY_NOW, - this.$route + this.$route, + {}, + { [routerParams.DISPLAY_PIA_ALERT]: false } ); }, hasSubmittedOrder() { @@ -682,7 +688,7 @@ export default { shouldDisplayPiaAlert() { return ( this.$route.query[queryStrings.DISPLAY_PIA_ALERT] || - this.$route.params[routerParams.DISPLAY_PIA_ALERT] + eval(window.history.state.displayPiaAlert) ); }, // Necessary to make the watcher of lineItems work diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue index 987caf56d..5dc103c68 100644 --- a/src/layouts/payment/payment.vue +++ b/src/layouts/payment/payment.vue @@ -747,7 +747,7 @@ export default { shouldDisplayPiaAlert(payMethod) { return ( this.$route.query[queryStrings.DISPLAY_PIA_ALERT] === payMethod || - this.$route.params[routerParams.DISPLAY_PIA_ALERT] === payMethod + eval(window.history.state.displayPiaAlert) ); }, }, diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index b490114da..bc4ab9356 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -310,12 +310,11 @@ describe("vehicle-damage.vue", () => { describe("alert", () => { test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be rendered", () => { // Arrange & Act + window.history.pushState({ displayVehicleChangeAlert: "true" }, "", ""); const { wrapper } = setupMocks({ mountOptionsMockData: { route: { - params: { - [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true, - }, + state: { displayVehicleChangeAlert: true }, }, }, }); @@ -325,21 +324,24 @@ describe("vehicle-damage.vue", () => { test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be rendered", () => { // Arrange & Act + window.history.pushState({ displayVehicleChangeAlert: "false" }, "", ""); const { wrapper } = setupMocks({ mountOptionsMockData: { route: { - params: { + state: { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false, }, }, }, }); + // Assert expect(wrapper.findComponent({ ref: "vehicleChangeAlert" }).exists()).toBe(false); }); test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be rendered", () => { // Arrange & Act + window.history.pushState({ displayVehicleChangeAlert: "false" }, "", ""); const { wrapper } = setupMocks({ mountOptionsMockData: { route: { @@ -850,7 +852,7 @@ function setupMocks({ pageHeaderWidgetHeaderText, mountOptionsMockData, funnelCo navigateWithSaving: jest.fn(), }, route: { - params: { + state: { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false, }, }, diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 5744597e4..d22bb9c81 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -103,6 +103,7 @@ import { errorMessages } from "@/constants/error-messages"; import { damageLocationsCms } from "@/constants/damage-locations-cms.js"; import { damageLocationsSelected } from "@/constants/damage-locations-selected.js"; import { getFunnelCookie } from "@/helpers/heritage-integration/cookie-helper"; +import { routerParams } from "@/router/router-constants/router-params"; import store from "@/store"; import baseMixin from "@/mixins/base-mixin"; @@ -405,20 +406,26 @@ export default { if (skipVin) { this.$router.navigateWithSaving( this.navigationScenarios.CLICKED_FORWARD_WITH_SKIP_VIN, - this.$route + this.$route, + {}, + { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false } ); } else { if (store.getters.damage.isRepair) { this.$router.navigateWithSaving( this.navigationScenarios .CLICKED_FORWARD_WITH_REPAIR_AND_VERIFIED_INSURANCE, - this.$route + this.$route, + {}, + { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false } ); } else { this.$router.navigateWithSaving( this.navigationScenarios .CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE, - this.$route + this.$route, + {}, + { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false } ); } } @@ -427,17 +434,23 @@ export default { else if (store.getters.vehicle.vin) { this.$router.navigateWithSaving( this.navigationScenarios.CLICKED_FORWARD_WITH_VIN, - this.$route + this.$route, + {}, + { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false } ); } else if (skipVin) { this.$router.navigateWithSaving( this.navigationScenarios.CLICKED_FORWARD_WITH_SKIP_VIN, - this.$route + this.$route, + {}, + { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false } ); } else { this.$router.navigateWithSaving( this.navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN, - this.$route + this.$route, + {}, + { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false } ); } }, @@ -566,7 +579,7 @@ export default { ); }, shouldDisplayVehicleChangeAlert() { - return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]; + return eval(window.history.state.displayVehicleChangeAlert); }, shouldHideBackButton() { return this.$store.getters.requiresVerifiedRedirecting; diff --git a/src/router/index.js b/src/router/index.js index f3583e312..4ee7dd0c6 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -397,6 +397,8 @@ async function navigate( : (existingPageDataForPage ?? {}) ); + optionalParams.isSavingNavigation = isSavingNavigation; + // add querystring params to the route. if they are already in the store then no need to add them var queryStringsObject = { fmgPage: destinationFmgPageValue, @@ -428,9 +430,7 @@ async function navigate( router.push({ name: "root", query: Object.assign(optionalQuery, queryStringsObject), - state: { - isSavingNavigation: isSavingNavigation - } + state: optionalParams, }); } else if (matchingScenarioMap.destinationUrl !== undefined) { navigateToUrl(matchingScenarioMap.destinationUrl, optionalQuery);