Merge branch 'develop' into bug/chloeherd/analytics-mismatch

src/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -158,7 +158,6 @@ export default {
 }
 .modal {
     &.menu-modal {
-        max-width: 576px;
         left: auto;
         height: calc(100% - 72px);
         top: 72px;
@@ -175,7 +174,6 @@ export default {
         }
         .modal-fullscreen {
             width: 100vw;
-            max-width: 576px;
         }
         .navigation-link {
             margin-bottom: 1.5rem;
@@ -188,7 +186,7 @@ export default {
             position: absolute;
             padding: 1.47rem 1rem 1.47rem 1.47rem;
             right: 0;
-            top: -4.5rem;
+            top: -5rem;
             button {
                 border: none;
                 &.menu-button {

src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue

@@ -1,34 +1,48 @@
 <template>
-    <div :class="`page-container-grouped-styles questions-page`">
+    <div :class="`questions-page`">
         <loadingModal ref="loadingModal" />
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+        <div class="container-fluid">
-        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+            <div class="row">
-        <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+                <div class="col">
-        <div class="fade-on-route-transition sub-container make-tall">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-            <alert
+                </div>
-                ref="alertFewMoreQuestions"
+            </div>
-                cmsWidgetName="alertWidget"
+            <div class="row justify-content-md-center">
-                class="my-5"
+                <div class="col-md-6 col-xl-4">
-                alertClass="alert-warning"
+                    <vehicleBanner
-                :manualHeadline="alertFewMoreQuestionsHeader"
+                        cmsWidgetName="VehicleBannerWidget"
-                :manualCopy="alertFewMoreQuestionsCopy"
+                        :displayGenericVehicleImage="false" />
-                v-bind:isDismissible="false" />
+
-            <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-                <questionChain
+
-                    ref="questionChain"
+                    <alert
-                    v-model="selectedAnswers[questionsDatum.answerKey]"
+                        ref="alertFewMoreQuestions"
-                    :questionData="questionsDatum.questions"
+                        cmsWidgetName="alertWidget"
-                    :index="i"
+                        class="my-5"
-                    v-if="showThisQuestionChain(questionsDatum, i)"
+                        alertClass="alert-warning"
-                    :answerKey="questionsDatum.answerKey"
+                        :manualHeadline="alertFewMoreQuestionsHeader"
-                    :validationRules="validationRules" />
+                        :manualCopy="alertFewMoreQuestionsCopy"
+                        v-bind:isDismissible="false" />
+
+                    <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
+                        <questionChain
+                            ref="questionChain"
+                            v-model="selectedAnswers[questionsDatum.answerKey]"
+                            :questionData="questionsDatum.questions"
+                            :index="i"
+                            v-if="showThisQuestionChain(questionsDatum, i)"
+                            :answerKey="questionsDatum.answerKey"
+                            :validationRules="validationRules" />
+                    </div>
+
+                    <navbar
+                        ref="navbar"
+                        cmsWidgetName="FunnelFooterWidget"
+                        :isForwardActionDisabled="!isMetaValid"
+                        @back-clicked="handleBackButtonAction"
+                        @ForwardClicked="handleForwardButtonAction" />
+                </div>
             </div>
-            <navbar
-                ref="navbar"
-                cmsWidgetName="FunnelFooterWidget"
-                :isForwardActionDisabled="!isMetaValid"
-                @back-clicked="handleBackButtonAction"
-                @ForwardClicked="handleForwardButtonAction" />
         </div>
     </div>
 </template>

src/fmg-components/nav-bar/nav-bar.vue

@@ -2,7 +2,9 @@
     <div class="row"></div>
     <div class="nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
         <div class="row d-flex flex-row-reverse align-items-center vw-100">
-            <div class="col button-col d-flex" id="stacked">
+            <div
+                :class="['col button-col d-flex', buttonSize ? 'large-button' : 'medium-button']"
+                id="stacked">
                 <buttonMain
                     ref="buttonMain"
                     isPrimary
@@ -41,6 +43,7 @@ export default {
         isForwardActionDisabled: Boolean,
         isBackButtonHidden: { type: Boolean, default: false },
         cmsWidgetName: String,
+        buttonSize: { type: Boolean, default: false },
     },
     components: {
         textLink,
@@ -93,6 +96,7 @@ export default {
 .nav-bar {
     overflow: visible;
     display: flex;
+    padding: 0;
     a {
         display: flex;
         justify-content: center;
@@ -120,5 +124,17 @@ export default {
     & > .container-fluid {
         overflow-x: visible; // needed to fix hidden footer on some iphones
     }
+    .medium-button {
+        // Define styles for a medium button (default size)
+        justify-content: flex-end;
+        width: auto;
+    }
+    .large-button {
+        justify-content: center;
+        .btn-primary {
+            width: 100%;
+            justify-content: center;
+        }
+    }
 }
 </style>

src/layouts/address-vehicles/address-vehicles.vue

@@ -1,38 +1,51 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <div class="page-container-grouped-styles">
+        <div class="container-fluid">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <div class="row">
-            <vehicleBanner
+                <div class="col">
-                cmsWidgetName="VehicleBannerWidget"
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-                :displayGenericVehicleImage="false" />
+                </div>
-            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+            </div>
-            <alert
+            <div class="row justify-content-md-center">
-                ref="alertFoundMultipleVehicles"
+                <div class="col-md-6 col-xl-4">
-                class="my-5"
+                    <vehicleBanner
-                alertClass="alert-warning"
+                        cmsWidgetName="VehicleBannerWidget"
-                :manualHeadline="AlertFoundMultipleVehiclesHeader"
+                        :displayGenericVehicleImage="false" />
-                manualCopy=""
+
-                v-bind:isDismissible="false" />
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-            <addressVehiclesQuestion
+
-                ref="addressVehiclesQuestion"
+                    <alert
-                cmsWidgetName="VehicleConfirmationQuestion"
+                        ref="alertFoundMultipleVehicles"
-                :vehicles="VehiclesForQuestions"
+                        class="my-5"
-                validationRules="vehicle-required"
+                        alertClass="alert-warning"
-                v-model="selectedVehicleVin"
+                        :manualHeadline="AlertFoundMultipleVehiclesHeader"
-                :isCarIdDifferent="isCarIdDifferent" />
+                        manualCopy=""
-            <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
+                        v-bind:isDismissible="false" />
-                <textBlock
+
-                    :customText="AlertProvideVinBody"
+                    <addressVehiclesQuestion
-                    justifyText="left"
+                        ref="addressVehiclesQuestion"
-                    class="mb-3"
+                        cmsWidgetName="VehicleConfirmationQuestion"
-                    marginTopSizeOverride="3" />
+                        :vehicles="VehiclesForQuestions"
+                        validationRules="vehicle-required"
+                        v-model="selectedVehicleVin"
+                        :isCarIdDifferent="isCarIdDifferent" />
+
+                    <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
+                        <textBlock
+                            :customText="AlertProvideVinBody"
+                            justifyText="left"
+                            class="mb-3"
+                            marginTopSizeOverride="3" />
+                    </div>
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
             </div>
-            <navbar
-                cmsWidgetName="FunnelFooterWidget"
-                ref="navbar"
-                :isForwardActionDisabled="!meta.valid"
-                @back-clicked="backButtonAction"
-                @ForwardClicked="forwardButtonAction" />
         </div>
     </Form>
 </template>

src/layouts/confirmation/confirmation.spec.js

@@ -0,0 +1,101 @@
+// Components
+import confirmation from "@/layouts/confirmation/confirmation.vue";
+
+// Supporting Files
+import { shallowMount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({
+    settleAllPromises: jest.fn(),
+}));
+
+beforeEach(() => {
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+    store.getters = {
+        order: {
+            schedule: {
+                date: "2019-01-01",
+                startTime: "09:00",
+                endTime: "10:00",
+                routeCode: "000",
+            },
+            lineItems: {
+                glassParts: [
+                    {
+                        partNumber: "ABC123",
+                    },
+                ],
+                supportingItems: [],
+            },
+            serviceLocation: {
+                address: "",
+                address2: null,
+                city: "",
+                state: "AZ",
+                appointmentType: "Inshop",
+                zipCode: "12345",
+                zipCodeCtu: "01234",
+                provider: {
+                    providerNumber: "123",
+                    address: {
+                        streetAddress: "test1",
+                        city: "test",
+                        state: "AZ",
+                        zipCode: "12345",
+                        zipCodeCtu: "01234",
+                    },
+                },
+            },
+            damage: {
+                isRepair: false,
+            },
+            referralNumber: "1234567",
+        },
+        payment: {
+            isInsurance: true,
+        },
+        lineItems: {
+            glassParts: [],
+            supportingItems: [],
+        },
+    };
+});
+afterEach(() => {
+    store.getters = {};
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+});
+
+describe("confirmation.vue", () => {
+    test("arePagePrerequisitesValid should be true ", async () => {
+        //Arrange
+        const { wrapper } = setupMocks();
+
+        //Act
+        let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+        await nextTick();
+
+        //Assert
+        expect(arePagePrerequisitesValid).toBe(true);
+    });
+});
+
+function setupMocks() {
+    const wrapper = shallowMount(
+        confirmation,
+        getMountOptions({
+            router: {
+                navigate: jest.fn(),
+                navigate: jest.fn(),
+                navigateWithSaving: jest.fn(),
+                navigateWithoutSaving: jest.fn(),
+            },
+        })
+    );
+
+    return { wrapper };
+}

src/layouts/confirmation/confirmation.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="page-container-grouped-styles position-relative">
+        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+        <div>
+            <div class="container-fluid pb-2">
+                <div class="row justify-content-md-center">
+                    <div class="col-md-6 col-xl-4">
+                        <navbar
+                            cmsWidgetName="FunnelFooterWidget"
+                            ref="navbar"
+                            isBackButtonHidden="true"
+                            @ForwardClicked="forwardButtonAction"
+                            :buttonSize="true" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+// Components
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+//Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+export default {
+    name: "confirmation",
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            // Service Location
+            const serviceLocation = store.getters.order.serviceLocation;
+            const mobileReqs = !!(
+                serviceLocation.address &&
+                serviceLocation.city &&
+                serviceLocation.state &&
+                serviceLocation.zipCode
+            );
+
+            const providerLocation = serviceLocation.provider.address;
+            const dropOffInshopReqs = !!(
+                providerLocation.streetAddress &&
+                providerLocation.city &&
+                providerLocation.state &&
+                providerLocation.zipCode
+            );
+
+            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
+
+            const serviceLocationReqs =
+                (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
+
+            // Schedule
+            const schedule = store.getters.order.schedule;
+            const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
+
+            return serviceLocationReqs && scheduleReqs;
+        },
+        forwardButtonAction() {},
+    },
+    components: {
+        funnelHeader,
+        navbar,
+    },
+};
+</script>

src/layouts/payment-method/payment-method.vue

@@ -59,7 +59,9 @@ export default {
             return true;
         },
         backButtonAction() {},
-        forwardButtonAction() {},
+        forwardButtonAction() {
+            this.$router.navigateWithSaving(this.navigationScenarios.CLICKED_FORWARD, this.$route);
+        },
     },
     components: {
         funnelHeader,

src/router/router-constants/fmgPage-values.js

@@ -17,6 +17,7 @@ const fmgPageValues = {
     CUSTOMER_DETAILS: "customer-details",
     REVIEW: "review",
     PAYMENT_METHOD: "payment-method",
+    CONFIRMATION: "confirmation",
 };
 
 export { fmgPageValues };

src/router/router-constants/routing-table.js

@@ -467,6 +467,18 @@ const routingTable = function (store) {
                 },
             ],
         },
+        {
+            fmgPageValue: fmgPageValues.PAYMENT_METHOD,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_FORWARD,
+                    destinationFmgPageValue: fmgPageValues.CONFIRMATION,
+                },
+            ],
+        },
+        {
+            fmgPageValue: fmgPageValues.CONFIRMATION,
+        },
     ];
 };
 

src/styles/common-styles.scss

@@ -6,6 +6,7 @@ body {
     color: #4d5151;
     .container-fluid {
         max-width: 1400px;
+        padding: 0 1.5rem;
         .prevent-squish {
             overflow-x: unset;
         }