CSR-747 Navigate to and from heritage funnel

This commit is contained in:
Katie 2022-11-15 16:49:34 -05:00
parent 8e2178c435
commit aa6aad7c07
14 changed files with 68 additions and 18 deletions

View file

@ -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>

View file

@ -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),

View file

@ -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;

View file

@ -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
});
}

View file

@ -39,7 +39,7 @@ export async function loadSessionIfPresent() {
funnelCookie.ReferralNumber,
funnelCookie.ReferralDate,
funnelCookie.ReferralCorrelationId,
funnelCookie.ReferralParentAccountNumber
funnelCookie.ReferralParentAccountNumber,
)
).data;
}

View file

@ -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>

View file

@ -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>

View file

@ -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;
},
},

View file

@ -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();

View file

@ -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>

View file

@ -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>

View file

@ -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

View file

@ -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);
}

View file

@ -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({