CSR-747 Navigate to and from heritage funnel

src/common-components/questions-page-layout/questions-page-layout.vue

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

src/global-methods.js

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

src/helpers/damage-helper.js

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

src/helpers/heritage-integration/navigation-helper.js

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

src/helpers/heritage-integration/order-helper.js

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

src/layouts/estimate/estimate.vue

@@ -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(
+                const payment = this.$store.getters.payment;
-                    this.navigationScenarios.HAS_NO_QUESTIONS,
+                // TODO KO If coverageStatus is null, they haven't gone to heritage yet... I think
-                    this.$route
+                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>

src/layouts/quote/quote.vue

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

src/layouts/quote/service-package-question/service-package-question.vue

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

src/layouts/vehicle-parts/vehicle-parts.spec.js

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

src/layouts/vehicle-parts/vehicle-parts.vue

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

src/layouts/vin-lookup/vin-lookup.vue

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

src/mixins/vehicle-questions-mixin.js

@@ -456,9 +456,11 @@ export default {
 
                 // save to store lineItems.glassParts
                 self.$store.commit(storeMutations.UPDATE_GLASS_PARTS, collectedGlassParts);
-
+                
-                shouldGoToHeritageQuote
+                const payment = self.$store.getters.payment;
-                    ? navigateToHeritageFunnel()
+                // 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

src/router/index.js

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

src/store/index.js

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