CSR-747 Navigate to and from heritage funnel
This commit is contained in:
parent
8e2178c435
commit
aa6aad7c07
14 changed files with 68 additions and 18 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div :class="`page-container-grouped-styles questions-page`">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
|
|
@ -40,6 +41,7 @@ import alert from "@/ux-components/alert/alert";
|
|||
import questionChain from "@/common-components/question-chain/question-chain";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
|
||||
|
||||
export default {
|
||||
name: "questions-page",
|
||||
|
|
@ -75,6 +77,9 @@ export default {
|
|||
handleBackButtonAction() {
|
||||
this.$emit("backButtonAction");
|
||||
},
|
||||
showLoadingModal() {
|
||||
this.$refs.loadingModal.showModal();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
|
|
@ -83,6 +88,7 @@ export default {
|
|||
questionChain,
|
||||
funnelSubHeader,
|
||||
funnelFooter,
|
||||
loadingModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,11 @@ import { headerKeys } from "@/constants/header-keys";
|
|||
export default {
|
||||
callHttpClient({ method, endpoint, payload, logApiCall = true }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
|
||||
let cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
|
||||
if (endpoint.includes("/order/")) {
|
||||
cfDistroUrl = "https://localhost:44346";
|
||||
}
|
||||
|
||||
const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
|
||||
const headers = {
|
||||
[headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
|
||||
|
|
|
|||
|
|
@ -37,7 +37,9 @@ export function getDamageString() {
|
|||
export function getIsWindshieldOnly() {
|
||||
const damageLocations = store.getters.damage.glassToReplace;
|
||||
const returnString =
|
||||
damageLocations.length === 1 && damageLocations[0]?.glassLocation === "Windshield"
|
||||
damageLocations &&
|
||||
damageLocations.length === 1 &&
|
||||
damageLocations[0]?.glassLocation === "Windshield"
|
||||
? "windshield"
|
||||
: "glass";
|
||||
return returnString;
|
||||
|
|
|
|||
|
|
@ -39,16 +39,22 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita
|
|||
Used to navigate to the heritage funnel with the correct query string and url.
|
||||
*/
|
||||
|
||||
export async function navigateToHeritageFunnel(shouldSaveSession = true) {
|
||||
export async function navigateToHeritageFunnel({shouldSaveSession = true, loadingModal}) {
|
||||
// Create the order (or save existing order) when navigating to Heritage Funnel.
|
||||
if (shouldSaveSession) {
|
||||
await saveSession();
|
||||
}
|
||||
|
||||
// TODO KO Can we trigger loading modal from here?
|
||||
if (loadingModal && loadingModal.showModal) {
|
||||
loadingModal.showModal()
|
||||
}
|
||||
|
||||
router.navigateToExternalUrl(externalUrls.HERITAGE_FUNNEL, {
|
||||
corid: store.getters.order.referralCorrelationId,
|
||||
src: "concept-funnel",
|
||||
conceptsqid: store.getters.applicationUser.savedSessionId,
|
||||
isInsurance: store.getters.payment.isInsurance
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export async function loadSessionIfPresent() {
|
|||
funnelCookie.ReferralNumber,
|
||||
funnelCookie.ReferralDate,
|
||||
funnelCookie.ReferralCorrelationId,
|
||||
funnelCookie.ReferralParentAccountNumber
|
||||
funnelCookie.ReferralParentAccountNumber,
|
||||
)
|
||||
).data;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<div class="page-container-grouped-styles">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
|
||||
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
|
|
@ -91,6 +92,7 @@ import buttonQuestion from "@/common-components/button-question/button-question"
|
|||
import alert from "@/ux-components/alert/alert";
|
||||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import textBlock from "@/common-components/text-block/text-block";
|
||||
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
|
||||
|
||||
//Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -195,10 +197,16 @@ export default {
|
|||
}
|
||||
this.displayNonServiceableZipAlert = false;
|
||||
|
||||
return this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.HAS_NO_QUESTIONS,
|
||||
this.$route
|
||||
);
|
||||
const payment = this.$store.getters.payment;
|
||||
// TODO KO If coverageStatus is null, they haven't gone to heritage yet... I think
|
||||
if (payment.isInsurance && payment.insuranceCoverage.coverageStatus) {
|
||||
navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal })
|
||||
} else {
|
||||
return this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.HAS_NO_QUESTIONS,
|
||||
this.$route
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.selectedVinLookupMethod === vinLookupMethodSelections.MANUALVIN) {
|
||||
|
|
@ -257,6 +265,7 @@ export default {
|
|||
alert,
|
||||
textboxQuestion,
|
||||
textBlock,
|
||||
loadingModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<div class="page-container-grouped-styles">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
|
|
@ -55,6 +56,7 @@ import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insura
|
|||
import servicePackageQuestion from "./service-package-question/service-package-question";
|
||||
import textBlock from "@/common-components/text-block/text-block";
|
||||
import modal from "@/common-components/modal/modal";
|
||||
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
|
|
@ -132,7 +134,8 @@ export default {
|
|||
price: 150.0,
|
||||
},
|
||||
];
|
||||
vm.isInsuranceSelected = vm.getDefaultIsInsuranceSelectedValue();
|
||||
|
||||
vm.dispatchStoreAction(storeActions.SAVE_IS_INSURANCE, vm.isInsuranceSelected);
|
||||
});
|
||||
},
|
||||
data() {
|
||||
|
|
@ -168,7 +171,7 @@ export default {
|
|||
|
||||
this.dispatchStoreAction(storeActions.SAVE_IS_INSURANCE, this.isInsuranceSelected);
|
||||
|
||||
navigateToHeritageFunnel();
|
||||
navigateToHeritageFunnel({loadingModal: this.$refs.loadingModal});
|
||||
},
|
||||
},
|
||||
components: {
|
||||
|
|
@ -181,6 +184,7 @@ export default {
|
|||
cashOrInsuranceQuestion,
|
||||
servicePackageQuestion,
|
||||
modal,
|
||||
loadingModal
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -231,9 +231,9 @@ export default {
|
|||
return !!partTypeMatches.length;
|
||||
},
|
||||
glassToReplaceContainsGlassLocation(glassLocation) {
|
||||
const glassLocationMatches = this.$store.getters.order.damage.glassToReplace.filter(
|
||||
const glassLocationMatches = this.$store.getters.order.damage.glassToReplace?.filter(
|
||||
(glassToReplace) => glassToReplace.glassLocation === glassLocation
|
||||
);
|
||||
) ?? [];
|
||||
return !!glassLocationMatches.length;
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -538,6 +538,7 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
|
|||
|
||||
wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
|
||||
wrapper.vm.$refs.funnelFooter.removeLoader = jest.fn();
|
||||
wrapper.vm.$refs.loadingModal.showModal = jest.fn();
|
||||
// wrapper.vm.$refs.onSubmit = jest.fn();
|
||||
// wrapper.vm.$refs.onInvalidSubmit = jest.fn();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
|
||||
<div class="page-container-grouped-styles vehicle-parts">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<funnelHeader ref="funnelHeader" cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner
|
||||
ref="vehicleBanner"
|
||||
|
|
@ -50,6 +51,7 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
|||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
|
||||
// Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
|
@ -224,6 +226,7 @@ export default {
|
|||
funnelSubHeader,
|
||||
funnelFooter,
|
||||
alert,
|
||||
loadingModal
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<div class="page-container-grouped-styles">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" />
|
||||
<vehicleBanner
|
||||
cmsWidgetName="VehicleBannerWidget"
|
||||
|
|
@ -121,6 +122,7 @@ import alert from "@/ux-components/alert/alert";
|
|||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
|
||||
import textBlock from "@/common-components/text-block/text-block";
|
||||
import loadingModal from "@/common-components/loading-modal/loading-modal.vue";
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
|
|
@ -464,6 +466,7 @@ export default {
|
|||
vinInformation,
|
||||
textBlock,
|
||||
Form,
|
||||
loadingModal
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -456,9 +456,11 @@ export default {
|
|||
|
||||
// save to store lineItems.glassParts
|
||||
self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
|
||||
|
||||
shouldGoToHeritageQuote
|
||||
? navigateToHeritageFunnel()
|
||||
|
||||
const payment = self.$store.getters.payment;
|
||||
// TODO KO If coverageStatus is null, they haven't gone to heritage yet... I think
|
||||
shouldGoToHeritageQuote || (payment.isInsurance && payment.insuranceCoverage.coverageStatus)
|
||||
? navigateToHeritageFunnel({loadingModal: self.$refs.loadingModal})
|
||||
: self.$router.navigateWithSaving(
|
||||
self.navigationScenarios.HAS_NO_MORE_QUESTIONS,
|
||||
self.$route
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const routes = [
|
|||
}
|
||||
|
||||
if (getFunnelCookie()?.SuppressConceptFunnel) {
|
||||
await navigateToHeritageFunnel(false);
|
||||
await navigateToHeritageFunnel({shouldSaveSession: false});
|
||||
return next(false);
|
||||
}
|
||||
|
||||
|
|
@ -66,6 +66,7 @@ const routes = [
|
|||
// clear the saveSessionPromise - if it exists in the vuex store but a new instance was created
|
||||
// the saveSessionPromise will no longer point to a valid promise
|
||||
baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
|
||||
|
||||
const loadSessionResponse = await loadSessionIfPresent();
|
||||
const pageToRedirectTo = await getPageToRouteExistingOrderTo(
|
||||
to,
|
||||
|
|
@ -289,6 +290,11 @@ function navigateToUrl(url, optionalQuery = {}) {
|
|||
externalUrl.searchParams.append(queryKey, optionalQuery[queryKey]);
|
||||
}
|
||||
|
||||
externalUrl.searchParams.append(
|
||||
"experiments",
|
||||
"ConceptFunnel=ConceptFunnel_V1=ConceptFunnel_TEST=true"
|
||||
);
|
||||
|
||||
window.location.assign(externalUrl);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ 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"
|
||||
|
||||
// Export State
|
||||
const getDefaultState = () => {
|
||||
|
|
@ -59,6 +60,7 @@ const getDefaultState = () => {
|
|||
isInsurance: null,
|
||||
insuranceCoverage: {
|
||||
isVerified: null,
|
||||
coverageStatus: null
|
||||
},
|
||||
},
|
||||
referralNumber: null,
|
||||
|
|
@ -349,9 +351,11 @@ export const mutations = {
|
|||
(state.order.serviceLocation.state = orderInformation.serviceLocation.state),
|
||||
(state.order.serviceLocation.zipCode = orderInformation.serviceLocation.zipCode);
|
||||
|
||||
state.order.payment.isInsurance = orderInformation.IsInsuranceOrder;
|
||||
state.order.payment.isInsurance = orderInformation.isInsuranceOrder;
|
||||
|
||||
state.order.payment.insuranceCoverage.isVerified =
|
||||
orderInformation?.insuranceInfo.coverageVerified;
|
||||
state.order.payment.insuranceCoverage.coverageStatus = orderInformation?.insuranceInfo.coverageStatus
|
||||
|
||||
state.order.customer.emailAddress = orderInformation.customer.emailAddress;
|
||||
state.applicationUser.experiments = orderInformation.experiments;
|
||||
|
|
@ -1336,7 +1340,7 @@ export const actions = {
|
|||
},
|
||||
saveIsInsurance(context, isInsurance) {
|
||||
context.commit(storeMutations.UPDATE_IS_INSURANCE, isInsurance);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default createStore({
|
||||
|
|
|
|||
Loading…
Reference in a new issue