CASH-2571 | Scheduling Page

Created new page
Added routing data
Added experiment flag (doesn't exist in framework yet) - hardcoded to true
Header, Footer, Subheader, H5 added

src/constants/experiments.js

@@ -47,6 +47,7 @@ const experimentSettings = {
     USE_ADYEN_PAYMENT: "UseAdyenPayment",
     SHOW_UNVERIFIED_DEDUCT_ENTRY: "ShowUnverifiedDeducEntry",
     SERVICE_PACKAGE_ORDER: "ServicePackageOrder",
+    USE_SCHEDULING_PAGE: "UseSchedulingPage",
 };
 
 const experimentTriggers = {

src/constants/progress-bar-mapper.js

@@ -68,6 +68,10 @@ export const pageProgressMapper = {
         percent: 76,
         step: 3,
     },
+    scheduling: {
+        percent: 76,
+        step: 3,
+    },
     "mobile-details": {
         percent: 76,
         step: 3,

src/layouts/scheduling/scheduling.vue

@@ -0,0 +1,128 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+    <div class="container page-container-grouped-styles">
+        <div class="row">
+            <div class="col-12">
+                <h5 class="fw-normal mb-0" :class="headerColor">
+                    <span>
+                        {{ serviceLocationText }}
+                    </span>
+                </h5>
+                <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
+                <navbar
+                    cmsWidgetName="FunnelFooterWidget"
+                    ref="navbar"
+                    @back-clicked="backButtonAction"
+                    @ForwardClicked="forwardButtonAction" />
+            </div>
+        </div>
+    </div>
+    </Form>
+</template>
+
+<script>
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import { Form } from "vee-validate";
+import store from "@/store";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import {
+    flushPagePrereqsLogs,
+    hasServiceZipInfo,
+    hasGlassPartsOrRepairInfo,
+    hasInsuranceInfo,
+} from "@/helpers/page-prerequisites-helper.js";
+import { debugLog } from "@/helpers/debug-log-helper";
+
+export default {
+    name: "scheduling",
+    async beforeRouteEnter(to, from, next) {
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: fetchCmsContentForPage(to.name),
+            },
+        ];
+        const resultMap = await settleAllPromises(promiseResultMap);
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    computed: {
+        serviceLocationText() {
+            return this.getCmsContent("ServiceLocationText", "Text");
+        },
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            const order = store.getters.order;
+            const logQueue = [];
+
+            const serviceZip = hasServiceZipInfo(order, logQueue);
+            const glassPartsOrRepair = hasGlassPartsOrRepairInfo(order, logQueue);
+            const insuranceInfo = hasInsuranceInfo(order, logQueue);
+
+            const supportingItemsInfo = store.getters.lineItems?.supportingItems;
+            const supportingItemsPreReqs = order.payment?.isInsurance
+                ? true
+                : !!supportingItemsInfo;
+
+            const preReqResult =
+                serviceZip && insuranceInfo && glassPartsOrRepair && supportingItemsPreReqs;
+
+            logQueue.push(() => {
+                debugLog(
+                    "store.getters.lineItems.supportingItems:",
+                    store.getters.lineItems?.supportingItems,
+                    !supportingItemsPreReqs
+                );
+            });
+
+            flushPagePrereqsLogs("scheduling.vue", preReqResult, logQueue);
+            return preReqResult;
+        },
+        backButtonAction() {
+            const payment = store.getters.order.payment;
+            if (
+                payment?.isInsurance &&
+                (payment?.insuranceCoverage?.isVerified ||
+                    store.getters.order.referralNumber.length === 6)
+            ) {
+                navigateToHeritageFunnel({
+                    shouldSaveSession: false,
+                    pageNameToLog: this.pageName,
+                    navType: "back",
+                });
+            } else {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK,
+                    this.pageName
+                );
+            }
+        },
+        forwardButtonAction() {
+            const appointmentType = store.getters.order.serviceLocation.appointmentType;
+            if (appointmentType === AppointmentTypeStrings.MOBILE) {
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
+                    this.pageName
+                );
+            } else {
+                this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD,
+                    this.pageName
+                );
+            }
+        },
+    },
+    components: {
+        funnelHeader,
+        navbar,
+        Form,
+    },
+};
+</script>

src/router/constants/routes.js

@@ -73,6 +73,10 @@ export const routeData = {
         name: "schedule",
         path: "/schedule",
     },
+    SCHEDULING: {
+        name: "scheduling",
+        path: "/scheduling",
+    },
     MOBILE_DETAILS: {
         name: "mobile-details",
         path: "/mobile-details",

src/router/constants/routing-table.js

@@ -496,6 +496,27 @@ const routingTable = function () {
                 },
             ],
         },
+        {
+            pageName: routeData.SCHEDULING.name,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationPageData: routeData.QUOTE,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationPageData: routeData.CUSTOMER_DETAILS,
+                },
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
+                    destinationPageData: routeData.MOBILE_DETAILS,
+                },
+                {
+                    scenario: navigationScenarios.ZIP_CODE_CHANGED_RECAL_ACK,
+                    destinationPageData: routeData.SERVICE_ZIP,
+                },
+            ],
+        },
         {
             pageName: routeData.MOBILE_DETAILS.name,
             maps: [

src/router/methods/route-logic/schedule.js

@@ -0,0 +1,17 @@
+import experimentMixin from "@/mixins/experiment-mixin.js";
+import { experimentSettings } from "@/constants/experiments";
+import { routeData } from "@/router/constants/routes";
+
+export async function scheduleBeforeEnter(to, from) {
+    const isSchedulingEnabled = true;
+        // experimentMixin.methods
+        //     .getSettingValue(experimentSettings.USE_SCHEDULING_PAGE)
+        //     ?.toLowerCase() === "true";
+
+    if (isSchedulingEnabled) {
+        return {
+            name: routeData.SCHEDULING.name,
+            replace: true,
+        };
+    }
+}

src/router/methods/routes.js

@@ -14,6 +14,7 @@ import { paymentMethodBeforeEnter } from "@/router/methods/route-logic/payment-m
 import { paymentBeforeEnter } from "@/router/methods/route-logic/payment";
 import { serviceLocationBeforeEnter } from "@/router/methods/route-logic/service-location";
 import { adyenReturnBeforeEnter } from "@/router/methods/route-logic/adyen-return";
+import { scheduleBeforeEnter } from "@/router/methods/route-logic/schedule";
 
 export const routes = [
     // Non-virtual pages.
@@ -32,7 +33,8 @@ export const routes = [
     createRoute(routeData.QUOTE, quoteBeforeEnter),
     createRoute(routeData.INSURANCE_COMPANY, insuranceCompanyBeforeEnter),
     createRoute(routeData.SERVICE_LOCATION, serviceLocationBeforeEnter),
-    createRoute(routeData.SCHEDULE),
+    createRoute(routeData.SCHEDULE, scheduleBeforeEnter),
+    createRoute(routeData.SCHEDULING),
     createRoute(routeData.CUSTOMER_DETAILS),
     createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),
     createRoute(routeData.PAYMENT, paymentBeforeEnter),